npm package: @lipak/lipak-input
Description: Lipak lipak-built input.
Latest version: 0.0.28

# 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.