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	-	✔	-	-	-	-	-

iform-zt

iForm-zt

Installation

install lib

install iForm-zt

Usage

Example

iTextbox Component

iTextarea Component

iDate Component

iCheckBox Component

iUpload Component

iSelect Component

iAutocomplete Component

use array data

iNumber Component

iAddress Component

iDistrict Component

iProvince Component

iStep Component

iLoadingJS is file js use animation laoding for actions

iSelectSearch Component

iPDFViewer Component

iNumberV2 Component

Attribute

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

iform-zt

iForm-zt

Installation

install lib

install iForm-zt

Usage

Example

iTextbox Component

iTextarea Component

iDate Component

iCheckBox Component

iUpload Component

iSelect Component

iAutocomplete Component

use array data

iNumber Component

iAddress Component

iDistrict Component

iProvince Component

iStep Component

iLoadingJS is file js use animation laoding for actions

iSelectSearch Component

iPDFViewer Component

iNumberV2 Component

Attribute

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads