@chai.apichai/text-input

0.0.1 • Public • Published

@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
Helper Text ```

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;
}

Package Sidebar

Install

npm i @chai.apichai/text-input

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

467 kB

Total Files

10

Last publish

Collaborators

  • chai.apichai