1.0.4 • Published 5 years ago
@creanet/vue-forms v1.0.4
Vue Forms
Description
This package includes several Vue.js components for creating forms.
Installation
To install this package run:
$ npm install @creanet/vue-formsTo import components use:
import { SimpleInput, SimpleForm } from '@creanet/vue-forms';To import styles use:
import "/assets/css/style.css" from "@creanet/vue-forms";Simple Input
Used for simple text or number input. Includes methods for validation.
Properties of this component are:
Properties
| Name | Description | Default value |
|---|---|---|
| value | The value of the <input> element | "" |
| type | The native type of the <input> element | "text" |
| theme | The design of the input. Only applied if styles were imported | "default" |
| placeholder | The placeholder for the <input> element | "" |
| hidePlaceholderOnFocus | True if placeholder should be hidden when <input> is focused | true |
| minLength | Minimal length of the value | null |
| maxLength | Maximal length of the value | null |
| min | Minimal numeric value (valid only if type is number) | null |
| max | Maximal numeric value (valid only if type if number) | null |
| pattern | Patter to test the value against | null |
| expectedValue | Exact value to test the value against | null |
| required | Whether some value is required | null |
| step | Numeric step (valid only if type is number) | 1 |
| errorMessages | Object containing custom error messages | {} |
| hideErrors | True if messages should be hidden | false |
| readonly | True if <input> should be readonly | false |
| preventSubmit | True if <form> should not be submitted when pressing ENTER | false |
Validation
| Name | Matching property | Error message |
|---|---|---|
| valueMissing | required | This field is required |
| typeMismatch | type | The value is in wrong format |
| tooLong | minLength | The value is too long |
| tooShort | maxLength | The value is too short |
| tooLow | min | The value is too low |
| tooHigh | max | The value is too high |
| stepMismatch | step | The value is not divisible by step |
| patternMismatch | pattern | The value is in wrong format |
| valueMismatch | expectedValue | The value is not correct |