vue-form-ui/README.md

A set of Vue form components with complex validation

# 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

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

### Module
```js
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:

```html
<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>
```