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 ) + 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:

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