iform-zt

v2.0.9

Published

3 years ago

iform-zt vue component

Downloads

0High
0Medium
0Low

tanakorn

npm iForm iForm Zt

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" />

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Index field name in State Store| iRequire| attribute: Document | iType| hidden,readonly| iEng| true |

iTextarea Component

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

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Index field name in State Store| iRows| number of rows| iCols| number of column| iRequire| attribute: Document | iType| 'readonly'|

iDate Component

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

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Index field name in State Store| iType| readonly, ''| iMin| (ISO 8601 format) Ex. 2017-05-30| iMax| (ISO 8601 format) Ex. 2019-01-25| iRequire| attribute: Document |

iCheckBox Component

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

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Index field name in State Store| iDisplay| label string in checkBox| iRequire| attribute: Document |

iUpload Component

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

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Index field name in State Store| iLink| link for upload data in api| iRequire| 'true' or 'false' |

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"
  />

Attribute| Description| --- | --- | iDisabled| true' or 'false'| v-on:onChangeValue="OnChangeFunction"| onChangeValue is emit event return value on-change to "OnChangeFunction"|

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>

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Index field name in State Store| iVal| keyname binding value in option select | iDisplay| keyname binding label in option select| iType| link: path web api ,or array: data array | iData| '/api/demo/' or array[ ] | iRequire| attribute: Document |

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

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Index field name in State Store| iType| number ,integer ,integermoney ,decimal ,decimalmoney ,cellphone ,homephone ,creditcard| iMaxLength| Maximum of number| iDecimalLength| Digit of Decimal| iDecimalLength| currency or Symbol| iRequire| attribute: Document|

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" />

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Determines the type of components used that have subDistrict,district,province,zipcode| iVal| Determines the type of components used that have subDistrict,district,province,zipcode| iDisplay| Determines the type of components used that have subDistrict,district,province,zipcode| iSubDistrict | Index field name in State Store| iDistrict | Index field name in State Store| iProvince | Index field name in State Store| iZipcode | Index field name in State Store| iRequire| 'required' or '' |

iDistrict Component

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

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Index field name in State Store| iRequire| 'required' or '' | iType| 'readonly' or '' |

iProvince Component

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

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Index field name in State Store| iRequire| 'required' or '' | iType| 'readonly' or '' |

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>

Attribute| Description| --- | --- | iVal| keyname binding value in option select | iDisplay| keyname binding label in option select| iType| link: path web api ,or array: data array | iData| '/api/demo/' or array[ ] *If you choose iType="array" please change props name to :iData | iName| placeholder | v-on:returnValue| emit value from child to function |

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

Attribute| Description| --- | --- | iHeight| Display height - example:700px | iUrl| URL for displaying PDF results |

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>

Attribute| Description| --- | --- | iStore| Store 'Vuex' ModulesName| iKey| Index field name in State Store| iRequire| attribute: Document | iType| number,decimal,currency,IDCard| iMaxlength| Max length| iReadonly| readonly,disabled| ** If you use iType="IDCard" please enter iRequire="regex:\d{1}-\d{4}-\d{5}-\d{2}-\d{1}"

Attribute

attribute/component| iSelect | iUpload | iNumber | iDate | iTextarea | iTextbox | iCheckBox --- | --- | --- | --- |--- |--- |--- |--- iStore| ✔ | ✔ | ✔| ✔| ✔| ✔| ✔ iKey| ✔ | ✔ | ✔| ✔| ✔| ✔| ✔ iRequire| ✔ | ✔ | ✔| ✔| ✔| ✔| ✔ iVal| ✔ |- | ✔|-| ✔| ✔|- iType| ✔ |- | ✔|-|-|-|- iDisplay| ✔ |- | ✔|-|-|-| ✔ iData| ✔ |- | ✔|-|-|-|- iMaxLength|- |- | ✔|-|-|-|- iDecimalLength|- |- | ✔|-|-|-|- iDecimalLength|- |- | ✔|-|-|-|- iSymbol|- |- | ✔|-|-|-|- iRows|- |- |-|-| ✔|-|- iCols|- |- |-|-| ✔|-|- iLink|- | ✔ |-|-|-|-|-