Lipak Input

Lipak lipak-built input.

Installation

npm install --save @lipak/lipak-input

How to use

add component to vue instance in main.js.

// main.js
import Vue from 'vue';
import LipakInput from '@lipak/lipak-input'

...

Vue.use(LipakInput);

...

now lipak input can be used as a component in the vue template.

<template>
    <div>
        my lipak input: <LipakInput v-model="username" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
        }
    }
}
</script>

props

• general props

  • v-model
    • type: [String, Number, Array, Object]
    • required: true
  • type
    • type: String
    • enum: text, password, chips, select, date, double, number, select-multiple, select-multiple-checkbox, textarea, color
    • default: text
  • title
    • type: String
    • default: ''
  • disabled
    • type: Boolean
    • default: false
  • required
    • type: Boolean
    • default: false
  • readonly
    • type: Boolean
    • default: false
  • placeholder
    • type: String
    • default: ''
  • show-message
    • type: Boolean
    • default: true
  • success-message
    • type: String
    • default: ''
  • error-message
    • type: String
    • default: ''

• chips type props

  • v-model
    • type: Array of Strings
    • required: true

• textarea type props

  • rows
    • type: [String, Number]
    • default: 3

• select type props

  • options
    • type: Array of Objects
    • default: []
    • options[index]
      • type: Object
      • props:
        1. value
           • type: String
           • required: true
        2. title
           • type: String
           • required: true
        3. disabled
           • type: Boolean
           • default: false
  • default-option-disabled
    • type: Boolean
    • default: true
  • auto-complete
    • type: Boolean
    • default: false
  • search-placeholder
    • type: String
    • default: جستجو...
  • search.sync
    • type: String

• select-multiple type props

  • v-model
    • type: Array of Objects (objects are selected from options)
  • options
    • type: Array of Objects
    • default: []
    • options[index]
      • type: Object
      • props:
        1. value
           • type: String
           • required: true
        2. title
           • type: String
           • required: true
        3. disabled
           • type: Boolean
           • default: false
  • auto-complete
    • type: Boolean
    • default: false
  • search-placeholder
    • type: String
    • default: جستجو...
  • search.sync
    • type: String

• select-multiple-checkbox type props

  • v-model
    • type: Array of Objects (objects are selected from options)
  • options
    • type: Array of Objects
    • default: []
    • options[index]
      • type: Object
      • props:
        1. value
           • type: String
           • required: true
        2. title
           • type: String
           • required: true
        3. disabled
           • type: Boolean
           • default: false
  • auto-complete
    • type: Boolean
    • default: false
  • search-placeholder
    • type: String
    • default: جستجو...
  • search.sync
    • type: String

• date type props

  • id
    • type: String
    • required: true
    • unique: true
  • date-type
    • type: String
    • enum: date, datetime, year, month, time
    • default: date
  • min-date
    • type: String
    • default: null
  • max-date
    • type: String
    • default: null

• double type props

  • v-model
    • type: Object
    • default: { main: '', side: '' }
  • title
    • type: String
    • default: ''
  • required
    • type: Boolean
    • default: false
  • success-message
    • type: String
    • default: ''
  • error-message
    • type: String
    • default: ''

  all other props are like any types props written above, but has appended with -main and -side.

• radio type props

  • v-model
    • type: [String, Number]
    • required: true
  • data
    • type: [String, Number]
    • default: ''
  • label
    • type: String
    • default: ''

  general props are not supported by radio type. you can't use radio type in double type.

• number type props

  • v-model
    • type: Number
    • required: true
  • min
    • type: Number
    • default: -Infinity
  • max
    • type: Number
    • default: +Infinity
  • step
    • type: Number
    • default: 1
  • is-editable
    • type: Boolean
    • default: true

  you can't use number type in double type.

• color type props

  • v-model
    • type: Object
    • default: { name: '', value: '' }

• color-multiple type props

  • v-model
    • type: Array
    • default: [{ name: '', value: '' }]

Examples

text full props

<LipakInput
    v-model="myValue"
    type="text"
    title="myTitle"
    :disabled="false"
    :readonly="false"
    :required="true"
    placeholder="myPlaceholder"
    :show-message="true"
    success-message="myMessage"
/>

select full props

<LipakInput
    v-model="myValue"
    type="select"
    title="myTitle"
    :disabled="false"
    :readonly="false"
    :required="true"
    placeholder="myPlaceholder"
    :show-message="true"
    success-message="myMessage"
    :default-option-disabled="true"
    :options="[{ value: '1', title: 'option1 title' },
               { value: '2', title: 'option2 title', disabled: true },
               { value: '3', title: 'option3 title' }]"
    :auto-complete="true"
    search-placeholder="جستجو..."
    :search.sync="search"
/>

select-multiple full props

<LipakInput
    v-model="myValue"
    type="select-multiple"
    title="myTitle"
    :disabled="false"
    :readonly="false"
    :required="true"
    placeholder="myPlaceholder"
    :show-message="true"
    success-message="myMessage"
    :options="[{ value: '1', title: 'option1 title' },
               { value: '2', title: 'option2 title', disabled: true },
               { value: '3', title: 'option3 title' }]"
    :auto-complete="true"
    search-placeholder="جستجو..."
    :search.sync="search"
/>

select-multiple full props

<LipakInput
    v-model="myValue"
    type="select-multiple-checkbox"
    title="myTitle"
    :disabled="false"
    :readonly="false"
    :required="true"
    placeholder="myPlaceholder"
    :show-message="true"
    success-message="myMessage"
    :options="[{ value: '1', title: 'option1 title' },
               { value: '2', title: 'option2 title', disabled: true },
               { value: '3', title: 'option3 title' }]"
    :auto-complete="true"
    search-placeholder="جستجو..."
    :search.sync="search"
/>

date full props

<LipakInput
    v-model="myValue"
    type="date"
    title="myTitle"
    :disabled="false"
    :readonly="false"
    :required="true"
    placeholder="myPlaceholder"
    :show-message="true"
    success-message="myMessage"
    date-type="datetime"
    min-date="2020/05/04"
    max-date="2020/05/22"
/>

double full props

<LipakInput
    v-model="myValue"
    type="double"
    title="myTitle"
    :required="true"
    :show-message="true"
    success-message="myMessage"
    type-main="select"
    :readonly-main="false"
    :default-option-disabled-main="true"
    placeholder-main="myPlaceholder"
    :options-main="[{ value: '1', title: 'option1 title' },
                    { value: '2', title: 'option2 title', disabled: true },
                    { value: '3', title: 'option3 title' }]"
    :auto-complete-main="true"
    search-placeholder-main="جستجو..."
    :search-main.sync="search"
    type-side="date"
    :readonly-side="false"
    date-type-side="datetime"
    min-date-side="2020/05/04"
    max-date-side="2020/05/22"
/>

radio full props

<LipakInput
    v-model="myValue"
    type="radio"
    :disabled="false"
    :readonly="false"
    label="myLabel1"
    data="myData1"
    :show-message="true"
/>
<LipakInput
    v-model="myValue"
    type="radio"
    :disabled="false"
    :readonly="false"
    label="myLabel2"
    data="myData2"
    :show-message="true"
/>

number full props

<LipakInput
    v-model="myValue"
    type="number"
    :disabled="false"
    :readonly="false"
    :min="3"
    :max="7"
    :step="5"
    :is-editable="false"
    :show-message="true"
    success-message="myMessage"
/>

color full props

<LipakInput
    v-model="myValue"
    type="color"
    :disabled="false"
    :show-message="true"
    success-message="myMessage"
/>

color-multiple full props

<LipakInput
    v-model="myValue"
    type="color-multiple"
    :disabled="false"
    :show-message="true"
    success-message="myMessage"
/>

Important notes

1. if success-message and error-message set together, successMessage will be rendered.