Vue Forms

Description

This package includes several Vue.js components for creating forms.

Installation

To install this package run:

$ npm install @creanet/vue-forms

To 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 |