vue-form-ui

vue-form-ui

A set of Vue form components with complex validation.

Inputs Included:

:abc: Text input (only allows letters)

:date: Date input (3 inputs split DD/MM/YYYY - only allows valid dates and has optional min/max age validation)

:e-mail: Email input (valid emails only)

:iphone: Phone input (UK mobile or home)

:radio_button: Buttons input (fieldset)

:arrow_down_small: Select input

:pound: Currency input

All input types have these basic properties:

• Required: (boolean) - is the field required
• Inputname: (string) - name given to the input e.g. <input name="theName" />
• Label: (string) - string used to fill question and placerholder text

There is also additional properties for some types:

Text input

• minLength (string) - to set minimum length of the input
• maxLength (string) - to set maximum length of the input

Date input

• minAge (string) - to set minimum age for input
• maxAge (string) - to set maximum age for input

Phone input

• type (string) - set type to either 'mobile' or 'home'

Buttons input

• options (array{}) - array object containing options for the buttons e.g. btnOptions: [{'value': true, 'name': 'Yes'}, {'value': false, 'name': 'No'}]

Installation

npm i --save-dev vue-form-ui

Module

import Vue from 'vue'
import {
  TextInput, 
  EmailInput, 
  DateInput, 
  PhoneInput,
  Buttons,
  SelectInput,
  CurrencyInput,
  CheckboxInput,
  AddressBlock,
  MonthYearInput
} from 'vue-form-ui/dist/vue-form-ui'


// create event hub for validation events
window.Hub = new Vue;

export default {
  name: 'app',
  components: {
    TextInput,
    DateInput,
    EmailInput,
    PhoneInput,
    Buttons
  },
  data () {
      return {
        formData: {},
        skyblueOptions: [
            {
                'value': true, 
                'name': 'Yes'
            }, 
            {
                'value': false, 
                'name': 'No'
            }
        ]
      }
    },
  methods: {
    logResult (result) {
        console.log(result)
        // output:
        /* 
            {
                value: string, 
                name: string, 
                isValid: boolean
            }
        */

        // if input has valid result update formData object with input name and value
        if (result.isValid) {
            this.formData[result.name] = result.value
            console.log(this.formData)
        }
    }
  }
}

Usage

Once installed, it can be used in a template as simply as:

<text-input 
    label="Your name" 
    inputname="name" 
    required="true" 
    minLength="2" 
    maxLength="32"
    v-on:change="logResult">
    </text-input>

<date-input 
    label="Date of birth" 
    inputname="dob" 
    required="true" 
    minage="18" 
    maxage="99"
    v-on:change="logResult">
    </date-input>

<email-input 
    label="Your email" 
    inputname="email" 
    required="true"
    v-on:change="logResult">
    </email-input>

<phone-input 
    label="Home phone" 
    inputname="homephone" 
    required="true"
    type="home"
    v-on:change="logResult">
    </phone-input>

<phone-input 
    label="Mobile phone" 
    inputname="mobilephone" 
    required="true"
    type="mobile"
    v-on:change="logResult">
    </phone-input>

<buttons 
    label="Is the sky blue" 
    inputname="skyblue" 
    required="true" 
    v-bind:options="skyblueOptions" 
    v-on:change="logResult">
    </buttons>