@chai.apichai/text-input

The Vue component for testing

Usage no npm install needed!

<script type="module">
  import chaiApichaiTextInput from 'https://cdn.skypack.dev/@chai.apichai/text-input';
</script>

README

@maqe-vue/text-input

The Vue2 component for text-input

label-insde

See demo: jsfiddle

Installation

NPM

Install the npm package.

npm install @maqe-vue/text-input --save

Register the component

import Input from '@maqe-vue/text-input'
import '@maqe-vue/text-input/dist/style.css'

Vue.component('m-input', Input)

Usage

Basic

``` ```

Theme


``` 


###
#### State
<img src="https://i.imgur.com/eDpfSbd.png" width="315" height="50">
<br/>
<img src="https://i.imgur.com/2YU4GE6.png" width="315" height="50">

<m-input v-model="email" type="text" theme="label-inside" :state="false"

<template v-slot:state-invalid-text>
    <span>
        Invalid
        <u>email</u>
    </span>
</template>



------

## API
#### Props

| Name                 | Type                | Description    | default    |
| :--------------------|:-------------------:|----------------|:-----------|
| `v-model`            | `bind`              |                |            |
| `size`               | `string`            | `sm|md|lg`     |            |
| `color`              | `string`            | `name|hex|rgb` | `#28b7c1`  |
| `theme`              | `string`            | `label-inside|label-border|label-none`
| `label`              | `string`            |                |            |
| `placeholder`        | `string`            |                |            |
| `state`              | `boolean|null`      |                | `null`     |
| `state-valid-text`   | `string`            |                |            |
| `state-invalid-text` | `string`            |                |            |
| `helper-text`        | `string`            |                |            |
| `icon`               | `string|array`      |                |            |
| `icon-after`         | `string|array`      |                |            |
| `counter-max `       | `Integer`           |                | `-1`       |
| `counter`            | `Integer`           |                |            |
| `disabled`           | `boolean`           |                | `false`    |
| `loading`            | `boolean`           |                | `false`    |
| `clearable`          | `boolean`           |                | `false`    |
| `autofocus`          | `boolean`           |                | `false`    |
| `trim`               | `boolean`           |                | `false`    |

#### Slot
| Name                 | Type                | Description    | default    |
| :--------------------|:-------------------:|----------------|:-----------|
| `state-valid-text`          
| `state-invalid-text`          
| `icon`               |                     | left side icon
| `icon-after`         |                     | right side icon
| `helper-text`         

#### Slot Example
```

Event

Name Type Description default
select(value, event) function Invoked when input is selected.
focus(value, event) function Invoked when input gains focus.
blur(value, event) function Invoked when input loses focus.
change(value, event) function Invoked when input changes.
keyup(value, event) function Invoked when a key is released.
keydown(value, event) function Invoked when the user presses a keyboard key.
keypress(value, event) function Invoked when the user presses a key on the keyboard.

Event Example

<m-input
    type="text"
    theme="label-border"
    @change="handleChange"
/>

methods: {
    handleChange(value, event) {
        // code here
    }
}

Classes

.vmq-input-wrapper
.vmq-input-textfield
.vmq-input-label
.vmq-input-state
.vmq-input-icon
.vmq-input-icon-after
.vmq-input-helper
.vmq-input-counter
.vmq-input-clear

Custom Style Example

.vmq-input-textfield {
    border: solid 1px #ccc;
    border-radius: 6px;
}

.vmq-input-state, .vmq-input-helper {
    left: 0;
    color: #ccc;
}