0.0.14 • Published 7 years ago
Share package 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 growprops: name type default comment valany Initial input value typeString textType of input (see: supported input types ) + textarea labelString Floating label placeholderString Input placeholder nameString Input name requiredBoolean Is required autocompleteString onBrowser autocomplete feature spellcheckBoolean Browser spellcheck feature patternString Regex pattern to validate field disabledBoolean Is disabled readonlyBoolean Is readonly autogrowBoolean Only for: type textarea – field will grow with text minHeightString 2remMinimum height of textarea (limits auto grow) maxHeightString Maximum height of textarea (limits auto grow) counterBoolean Character counter for textarea autoBoolean Validate while typing equalsString Value equals to another field (by ref). Should have the same parent. minNumber Minimum number of characters OR: minimum numeric value, if field type is number maxNumber Maximum number of characters OR: maximum numeric value, if field type is number validatorsArray Array of regex expressions to test the field value against errorMinString Minimum number of characters:Text of error when min fails errorMaxString Max number of characters reached:Text of error when max fails errorEqualsString fields do not matchText of error when equals fails errorCustomString Text of error when your custom regex validator fails
data: property comment valueValue of input selectedBoolean. Same as focus validBoolean. Is input valid errorMessageString. Current error message infoMessageString. Current info message filledBoolean. 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);
}