npm package: @miasta/vue-input
Description: Miasta Vue.js UI – input with validation and autogrow
Author: JF Cieslak
Latest version: 0.0.14

# vue-input
Part of the M2 UI suite.

 A versatile input with optional validation. It is styled in similar way to material design inputs, with floating labels.
`vue-input` can be of all standard html input types (`text` `number` `date`, etc.) or it can be a `textarea` type.

## features:

- all standard html input attributes are also valid with `vue-input`
- validation on key up or on blur
- built in validation for most common cases (email, length, equality), with possibility to pass custom regex validators
- `textarea` auto grow

------

## props:

| name           | type    | default                             | comment                                  |
| -------------- | ------- | ----------------------------------- | ---------------------------------------- |
| `val`          | any     |                                     | Initial input value                      |
| `type`         | String  | `text`                              | Type of input (see: [supported input types](https://www.w3schools.com/tags/att_input_type.asp) ) + `textarea` |
| `label`        | String  |                                     | Floating label                           |
| `placeholder`  | String  |                                     | Input placeholder                        |
| `name`         | String  |                                     | Input name                               |
| `required`     | Boolean |                                     | Is required                              |
| `autocomplete` | String  | `on`                                | Browser autocomplete feature             |
| `spellcheck`   | Boolean |                                     | Browser spellcheck feature               |
| `pattern`      | String  |                                     | Regex pattern to validate field          |
| `disabled`     | Boolean |                                     | Is disabled                              |
| `readonly`     | Boolean |                                     | Is readonly                              |
| `autogrow`     | Boolean |                                     | Only for: type  `textarea`  – field will grow with text |
| `minHeight`    | String  | `2rem`                              | Minimum height of `textarea` (limits auto grow) |
| `maxHeight`    | String  |                                     | Maximum height of `textarea` (limits auto grow) |
| `counter`      | Boolean |                                     | Character counter for `textarea`         |
| `auto`         | Boolean |                                     | Validate while typing                    |
| `equals`       | String  |                                     | Value equals to another field (by ref). Should have the same parent. |
| `min`          | Number  |                                     | Minimum number of characters OR: minimum numeric value, if field type is `number` |
| `max`          | Number  |                                     | Maximum number of characters OR: maximum numeric value, if field type is `number` |
| `validators`   | Array   |                                     | Array of regex expressions to test the field value against |
| `errorMin`     | String  | `Minimum number of characters:`     | Text of error when `min` fails           |
| `errorMax`     | String  | `Max number of characters reached:` | Text of error when `max` fails           |
| `errorEquals`  | String  | `fields do not match`               | Text of error when `equals` fails        |
| `errorCustom`  | String  |                                     | Text of error when your custom regex validator fails |



------

## data:

| property       | comment                       |
| -------------- | ----------------------------- |
| `value`        | Value of input                |
| `selected`     | Boolean. Same as focus        |
| `valid`        | Boolean. Is input valid       |
| `errorMessage` | String. Current error message |
| `infoMessage`  | String. Current info message  |
| `filled`       | Boolean. Is input filled      |



------

## methods:

| method       | args | comment        |
| ------------ | ---- | -------------- |
| `validate()` | —    | Validate input |



------

## events:

| event          | payload | comment         |
| -------------- | ------- | ----------------|
| `enter`        | ✖       | On keyup.enter  |
| `blur`         | ✖       | On input blured |
| `value:change` | ✔       | On input        |
| `validate`     | ✔       | Once validated  |

## css variables:

```css
{
--vue-input-error-color: red;
--vue-input-text-color: black;
--vue-input-select-color: blue;
--vue-input-blur-color: rgba(black, .8);
--vue-input-font-family: system-ui, sans-serif;
--vue-input-label-font-family: system-ui, sans-serif;
--vue-input-border-color: rgba(black, .2);
--vue-input-border-color-active: var(--vue-input-select-color);
--vue-input-border-color-error: var(--vue-input-error-color);
}
```