@creanet/vue-forms

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