@me_slack/vue2easyform v2.0.9

Vue2EasyForm

Vue2EasyForm is a Vue2 component which makes working with forms very easy indeed.

Simply pass the Form Prop into the component and it will Emit Events as they happen.

On submit it will validate the inputs and return @error or if successful a @submit {key:value} object.

• Image (small video/gif)

Install

npm install --save @me_slack/vue2easyform@latest vuesax@^3 @boxicons@^2

import Vue from 'vue'
import Vuesax from 'vuesax'

import 'vuesax/dist/vuesax.css'

<link rel="stylesheet" href="https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css">

Required Dependencies

• We require the Vuesax 3 framework.

Optional Dependencies

• We recommend Boxicons and use it as fallbacks in places.

Usage

import VueEasyForm from "@me_slack/vue2easyform"

data: () => ({
    contact_form: {
        name: 'contact_form',
        fields: [{
            key: 'email',
            value: '',
            input: {
                type: 'email',
                placeholder: 'Email',
            },
            required: true
        }, {
            key: 'submit',
            submit: {
                label: 'Send Email'
            }
        }]
    },
})

<VueEasyForm :form="conact_form" @submit="sendEmail" @updated_email="updateEmail"></VueEasyForm>

Props

The only prop you need is form this is the JSON object which builds out the form fields, buttons, etc.

This is made up as follows:

Fields

fields:[
    {
        key: 'email',
        value: 'me@me.com'
    }
]

This is the key you will get back in any events. For example:

{
    email: 'me@me.com'
}

You can pass the following values:

Input

A field with the Div #id vef_input_${key}

Example:

{
    email: {
        type: 'email',
        label: 'Email Address',
        value: 'me@me.com',
        placeholder: 'jon.doe@email.com',
    }
}

Textarea

A field with the Div #id vef_textarea_${key}

Example:

{
    message: {
        label: 'Message',
        counter: 150
    }
}

Dropdown

A field with the Div #id vef_dropdown_${key}

Example:

{
   label: "Do you want a truth or dare?",
   options: [{value: 'TRUTH', name: "Truth"}, {value: 'DARE', name: "Dare"}]
}

Checkbox

A field with the Div #id vef_checkbox_${key}

Button

An input field with the Div #id vef_input_${key}

Module

Modules are pre-built form options which can reused with the Div #id vef_module_${key}, support types are:

timezone_dropdown, country_dropdown

An input field

Pass the following properities depending on the type:

timezone_dropdown

country_dropdown

• language dropdown (-mode -small (just symbols) - medium (just names) - large (names and symbols/shotcodes)) - options (array specify which ones to show otherwise all)
• countires (-mode -small (just flags) - medium (just names) - large (names and flags/names)) - options (array specify which ones to show otherwise all)
• address lookup - Will need to look for external modules
• google maps - show on a map the location passed (will require google api keys to be passed)
• light/dark switcher
• Key/Pair list with ADD / REMOVE Options

Example:

{
    type: 'timezone_dropdown'
}

Submit

The forms submit button with Div #id vef_submit and vef_submit_button

Example:

{
    submit: {
        label: "Submit"
    }
}

Section

You can split up your form with sections, passing the following options. #id vef_section_${key} class vef_section

Example:

{
    hr_above: true,
    header: "Section Title",
    text: "Section Text",
}

Shared

The following are reused elements

Validation

We are using ValidatorJS for validation.

• Add more validation options

Transform

Some fields allow you to transform content as it is entered, see below:

• Add more transform options

Icons

Events

The following events will be emitted to allow maximum flexibility to your application:

@submit

Once the submit button is pressed (if you have one), it will validate the form and return a json object with a {field: value} pair:

{
    email: 'users@email.address'
    message: 'The users message here'
}

@updated_{{field}}

• Watch a single field for changes, you will get the value object emitted when it changes and passes validation.

@updated

• Watch the entire form for changes, you will get the same object of results as @submit each time the form is updated, however this will not have been validated.

@clicked

If a user clicks on a button element, this event will fire with the name of your field as the value. This will also fire on submit

@error

Each time a field fails a validation check an @error event will fire, you can choose to consume it if you wish. You will receive a {field: message} object for failing fields.

Note: Validation checks happen both when field values change and on submit, you might receive multiple errors on a single form submission.

Examples

You can see some prebuild examples here:

• Basic

• Share more advanced examples

Shell Script

• Create a runner.sh script which will allow users to build the form json by entering commands for even easier form setup.