iform-zt v2.0.9

iForm-zt

iForm-zt is a Vue Component for zt-dev Depertment.

Installation

Use the package manager npm to install iForm-zt.

install lib

npm i vue-cleave
npm i vue-sweetalert2
npm i vee-validate
npm i vue-multiselect
npm install vue-loading-overlay --save
npm i vue-instant-pdf-viewer

install iForm-zt

npm i iform-zt

Usage

import { iSelect } from 'iform-zt';

export default {
components:{ 
     iSelect,
  },
}

Example

iTextbox Component

 <iTextbox iStore="Data" iKey="name" iRequire="required" />

iTextarea Component

 <iTextarea iStore="Data" iKey="name" iRows="5" iCols="100" iRequire="required" iType="readonly" />

iDate Component

 <iDate iStore="Data" iKey="date" iMin="2017-05-30" />

iCheckBox Component

 <iCheckBox iStore="Data" iKey="checkBox"  iDisplay="ตัวเลือก" iRequire="required" />

iUpload Component

 <iUpload iStore="Data" iKey="uploadFile"  iLink="/api/demo/uploadfile" iRequire="image" />

iSelect Component

 <iSelect  
     iStore="Data"
     iKey="province" 
     iVal="name" 
     iDisplay="name" 
     iType="link" 
     iData="/api/provinces"
     iRequire="required"
  />

iAutocomplete Component

 <iAutocomplete  
     iStore="Data"
     iKey="province" 
     iVal="name" 
     iDisplay="name" 
     iType="link" 
     iData="/api/provinces"
     iRequire="required"
  />

use array data

 <iSelect  
     iStore="Data"
     iKey="province" 
     iVal="name"
     iDisplay="name" 
     iType="array" 
     :iData="obj"
     iRequire="required"
  />

  <script>
export default {
    ...

    data(){
      return{
        obj:[
          {name:'A'},
          {name:'B'},
          {name:'C'}
        ]
      }
    }
    
    ...
}
</script>

iNumber Component

<iNumber iStore="Data" iKey="number" ></iNumber>
//1234567879

<iNumber iStore="Data" iKey="number" iType="number" ></iNumber>
//1234567879

<iNumber iStore="Data" iKey="integer" iType="integer" ></iNumber>
//1,234,567

<iNumber iStore="Data" iKey="integermoney" iType="integermoney" ></iNumber>
//$ 1,234,567

<iNumber iStore="Data" iKey="decimal" iType="decimal" ></iNumber>
//1234567.89

<iNumber iStore="Data" iKey="decimalmoney" iType="decimalmoney" ></iNumber>
//$ 1,234,567.89

<iNumber iStore="Data" iKey="cellphone" iType="cellphone" ></iNumber>
//display: 08-9999-9999 value: 08999999999

<iNumber iStore="Data" iKey="homephone" iType="homephone" ></iNumber>
//display: 0-2222-2222 value: 022222222

<iNumber iStore="Data" iKey="homephone" iType="creditcard" ></iNumber>
//display: xxxx-xxxx-xxxx-xxxx value: 0000000000000000

<iNumber iStore="Data" iKey="homephone" iType="idcard" ></iNumber>
//display: x-xxxx-xxxxxx-xx-x value: 0000000000000

================================== Length Number ==================================================
<iNumber iStore="Data" iKey="number" iType="number" ></iNumber>
//12345

<iNumber iStore="Data" iKey="integer" iType="integer" ></iNumber>
//12,345

<iNumber iStore="Data" iKey="integermoney" iType="integermoney" ></iNumber>
//$ 12,345

<iNumber iStore="Data" iKey="decimal" iType="decimal" ></iNumber>
//12,345.89

<iNumber iStore="Data" iKey="decimalmoney" iType="decimalmoney" ></iNumber>
//$ 12345.89

<iNumber iStore="Data" iKey="decimal" iType="decimal" ></iNumber>
//12345.67890

<iNumber iStore="Data" iKey="decimalmoney" iType="decimalmoney" ></iNumber>
//$ 12345.67890

================================== Symbol Money ==================================================
<iNumber iStore="Data" iKey="integermoney" iType="integermoney" iSymbol="currency"></iNumber>
//THB 12,345

<iNumber iStore="Data" iKey="decimalmoney" iType="decimalmoney" iSymbol="currency"></iNumber>
//THB 12,345.67890

<iNumber iStore="Data" iKey="integermoney" iType="integermoney" iSymbol="Symbol"></iNumber>
//$ 12,345

<iNumber iStore="Data" iKey="decimalmoney" iType="decimalmoney" iSymbol="Symbol"></iNumber>
//$ 12,345.67890

iAddress Component

<iAddress iStore="Data" 
          iSubDistrict="subDistrictKey" iDistrict="districtKey" iProvince="provinceKey" iZipcode="zipcodeKey" iKey="subDistrict" iVal="subDistrict" iDisplay="subDistrict" iRequire="required" />

<iAddress iStore="Data" 
          iSubDistrict="subDistrictKey" iDistrict="districtKey" iProvince="provinceKey" iZipcode="zipcodeKey" 
          iKey="district" iVal="district" iDisplay="district" iRequire="required" />

<iAddress iStore="Data" 
          iSubDistrict="subDistrictKey" iDistrict="districtKey" iProvince="provinceKey" iZipcode="zipcodeKey" 
          iKey="province" iVal="province" iDisplay="province" iRequire="required" />
     
<iAddress iStore="Data" 
          iSubDistrict="subDistrictKey" iDistrict="districtKey" iProvince="provinceKey" iZipcode="zipcodeKey" 
          iKey="zipcode" iVal="zipcode" iDisplay="zipcode" iRequire="required" />

iDistrict Component

 <iDistrict iStore="Data" iKey="name" iRequire="required" iType="readonly" />

iProvince Component

 <iProvince iStore="Data" iKey="name" iRequire="required" iType="readonly" />

iStep Component

 <iStep  
     :iData="obj"
  />

  <script>
export default {
    ...

    data(){
      return{
        obj:[
          {title:'A','icon':'fab fa-angellist',active:true,'des':'test A'},
          {title:'B','icon':'fab fa-angellist',active:false,'des':'test B'},
          {title:'C','icon':'fab fa-angellist',active:false,'des':'test C'},
        ]
      }
    }
    
    ...
}
</script>

iLoadingJS is file js use animation laoding for actions

<script>

import iLoadingJS from 'iform-zt';

const time_seconds = 5000 // seconds or not use time_seconds system is default second iLoadingJS
iLoadingJS.animationLoad.startLoad(time_seconds);

<script>

iSelectSearch Component

 <iSelectSearch 
  iVal="name" 
  iDisplay="name" 
  iType="link" 
  iData="/api/employeeType" 
  iName="ค้นหา"
  v-on:returnValue="CallFunction"
  />

  <script>

  import iSelectSearch from 'iform-zt';

  export default {
    components:{ iSelectSearch },
    methods: {
      CallFunction(value){
        console.log(value);
        // code here
    }
    ...
  }
  
  <script>

iPDFViewer Component

 <iPDFViewer iHeight="700px" :iUrl="url" />

 Installation
 npm i vue-instant-pdf-viewer
 
 Using
 import iPDFViewer from 'iform-zt';

 <script src="/js/static/lib/pdfobject.min.js"></script>  to /views/ ___.blade.php

iNumberV2 Component

<iNumberV2 iStore="Data" iKey="name" iRequire="required" iMaxlength="13" iType="currency" iReadonly="readonly"></iNumberV2>
<iNumberV2 iStore="Data" iKey="name" iRequire="regex:\d{1}-\d{4}-\d{5}-\d{2}-\d{1}" iMaxlength="13" iType="IDCard" iReadonly=""></iNumberV2>

** If you use iType="IDCard" please enter iRequire="regex:\d{1}-\d{4}-\d{5}-\d{2}-\d{1}"

Attribute

License

ZT