Vue-forminator NPM

vue-forminator

Forminator is a "no magic", extensible, configurable, schema-based form fields factory.

import Vue from 'vue';
import Forminator from 'vue-forminator';

new Vue({
    render(h) {
        return (<form>
            <Forminator schema={schema} model={form} />
        </form>)
    },
    data() {
        return {
            form: {}
        }
    },
    computed: {
        schema => ([
            [
                { name: 'firstName', label: 'First name' },
                { name: 'lastName', label: 'Last name' }
            ],
            { name: 'email', label: 'Email address', as: 'email' },
            { name: 'acceptedTerms', label: 'Accept terms', as: 'boolean' },
        ])
    },
}).$mount('#app')

Why you (may) need it?

your project involves many forms
your form markup is complicated
you are seeing a lot of duplicated code in your form components
your forms look inconsistent
maintainance takes to much time

Integrations

// Bootstrap (v4.1)
import BootstrapForminator from 'vue-forminator/lib/presets/bootstrap';

// Bulma
import BulmaForminator from 'vue-forminator/lib/presets/bulma';

Schema definition

text|number|email

{
    as: 'text|number|email',
    name: 'fieldName',
    attrs: {
        // html attributes passed to input element, for example:
        placeholder: 'Field label',
        class: 'customInputClass',
        ...
    }
}

checkbox|boolean

{
    as: 'boolean',
    name: 'fieldName',
    attrs: {
        // html attributes passed to input element, for example:
        class: 'customInputClass',
        ...
    }
}

select

{
    as: 'select',
    name: 'fieldName',
    attrs: {
        // html attributes passed to input element, for example:
        class: 'customInputClass',
        ...
    },
    options: [
        {
            value: 'optionValue',
            label: 'Option text label',
            attrs: {
                // html attributes passed to option element, for example:
                disabled: 'disabled',
                ...
            }
        },
        ...
    ]
}

radio

{
    as: 'radioGroup',
    name: 'fieldName',
    options: [
        {
            value: 'optionValue',
            label: 'Option text label',
            attrs: {
                // html attributes passed to input element, for example:
                disabled: 'disabled',
                ...
            }
        },
        ...
    ]
}

Rows and columns

row field type can be used to render fields inline. It generates div element with config.rowClass css class followed by set of divs (columns) with config.columnClass css class.

// short version, filled with default values
[
    { name: 'firstName', as: 'text' },
    { name: 'email', as: 'email' },
],

// long version for inplace costumization
{
    as: 'row',
    attrs: {
        // html attributes passed to row wrapper element, for example:
        class: 'row space-around',
        ...
    },
    columns: [
        { as: 'text', name: 'address' }, // shorthand for default column definition

        // long version for inplace customization
        {
            as: 'column',
            attrs: {
                // html attributes passed to column wrapper element, for example:
                class: 'col col-sm-4',
                ...
            },
            field: {
                // any field definition, for example:
                name: 'postalCode',
                as: 'text'
            }
        }
    ]
}

Fieldset

{
    as: 'fieldset',
    label: '',
    legendAttrs: {
        // html attributes passed to column legend element, for example:
        class: 'some-custom-legend-class'
    },
    fields: [
        // any field definition
        ... 
    ]
}

Customization

import { Factory } from 'vue-forminator'
import { LabelWrap, LabelBefore } from 'vue-forminator/lib/helpers'

const Forminator = Factory({
    config: {
        labelClass: 'control-label',
        inputClass: 'form-control',
        textInputClass: 'string or inputClass if not provided'
        numberInputClass: 'string or inputClass if not provided'
        emailInputClass: 'string or inputClass if not provided'
        selectClass: 'select',
        fieldClass: 'form-group',
        rowClass: 'row',
        columnClass: 'col',
        fieldsetClass: 'form-fieldset',
        fieldsetLegendClass: 'form-fieldset',
        requiredLabelClass: 'css to be applied to field which attrs.required is truthy'
    },
    Field, // Field component provider function
    inputs: {
        YourCustomInputComponent,
        // basic input components, i.e.
        Text,
        Checkbox,
    },
    fields: function({ ..inputs }) {
        return {
            'text': LabelBefore(Text),
            'boolean': LabelWrap(Checkbox)
        };
    }
})