@cknow/vfg

A schema-based form generator component for Vue.js

Usage no npm install needed!

<script type="module">
  import cknowVfg from 'https://cdn.skypack.dev/@cknow/vfg';
</script>

README

Vue Form Generator

NPM Version Downloads MIT License

Build Status Build status Coverage Status

Code Climate Test Coverage Issue Count

Dependencies Status devDependencies Status peerDependencies Status

Semantic Release Average time to resolve an issue Percentage of issues still open Gitter

Install

npm install --save @cknow/vfg

Usage

In the example below will be generated dry fields, that is, without style.

<template>
    <vfg :model="model" :schema="schema"></vfg>
</template>

<script>

import vfg from '@cknow/vfg';

Vue.use(vfg);

export default {
    data() {
        return {
            model: {
                name: 'Your name',
                subject: 'Option 1'
            },
            schema: [{
                // input text is default
                label: 'Name',
                model: 'name'
            },{
                type: 'select',
                label: 'Subject',
                model: 'subject',
                items: ['Option 1', 'Option 2', 'Option 3']
            },{
                type: 'textarea',
                label: 'Message',
                model: 'message'
            }]
        }
    }
}

</script>

Fields

Available fields

Input

...
schema: [
    {
        type: 'input',
        inputType: 'INPUT_TYPE',
        class: ['foo', 'bar'],
        id: 'fieldID',
        enabled: true,
        autocomplete: false,
        autofocus: false,
        disabled: false,
        max: 150,
        maxlength: 150,
        min: 50,
        name: 'fieldName',
        placeholder: 'Field Placeholder',
        readonly: false,
        required: true
        size: 50,
        step: 1,
        width: 80,

        // custom attrs
        attrs: {
            'data-foo': 'bar'
        },

        // events
        events: {
            click: 'clickHanlder'
        }
    }
]
....

Input type list:

  • text
  • email
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week

Select

...
schema: [
    {
        type: 'select',
        items: ['Option 1', 'Option 2', 'Option 3'],
        classes: ['foo', 'bar'],
        id: 'fieldId',
        enabled: true,
        autofocus: false,
        disabled: false,
        multiple: false,
        name: 'fieldName',
        required: true,

        // custom attrs
        attrs: {
            'data-foo': 'bar'
        },

        // events
        events: {
            click: 'clickHanlder'
        }
    },

    // with value and name
    {
        type: 'select',
        items: [{
            id: 1, // value
            name: 'Option 1' // name
        }, {
            id: 2, // value
            name: 'Option 2' // name
        }, {
            id: 3, // value
            name: 'Option 3' // name
        }]
    },

    // with optgroup
    {
        type: 'select',
        items: [{
            name: 'Option 1',
            options: [
                'Option 1-1',
                'Option 1-2',
                'Option 1-3'
            ]
        }, {
            name: 'Option 2',
            options: [
                'Option 2-1',
                'Option 2-2',
                'Option 2-3'
            ]
        }]
    }
]
....

Textarea

...
schema: [
    {
        type: 'textarea',
        classes: ['foo', 'bar'],
        id: 'fieldId',
        enabled: true,
        autofocus: false,
        cols: 80,
        disabled: false,
        maxlength: 500,
        name: 'fieldName',
        placeholder: 'Field Placeholder',
        readonly: false,
        required: true,
        rows: 5,

        // custom attrs
        attrs: {
            'data-foo': 'bar'
        },

        // events
        events: {
            click: 'clickHanlder'
        }
    }
]
....

Theme

The big difference in this package is that we can use themes in a very simple way.

But do not worry, we already have the most well-known themes developed:

Theme usage

In the example below the fields will be generated with the style of Bootstrap:

Note: Do not forget to add the style sheets of theme to the header of the page.

npm install --save @cknow/vfg-theme-bootstrap
<template>
    <vfg :options="options" :model="model" :schema="schema"></vfg>
</template>

<script>

import vfg from '@cknow/vfg';
import vfgThemeBootstrap from '@cknow/vfg-theme-bootstrap';

Vue.use(vfg);
Vue.use(vfgThemeBootstrap); // register bootstrap theme

export default {
    data() {
        return {
            options: {
                theme: 'bootstrap' // set theme
            },

            model: {
                ...
            },

            schema: [
                ...
            ]
        }
    }
}

</script>

Global theme

You can use a global theme, as in the example below:

import vfg from '@cknow/vfg';

Vue.use(vfg, {
    theme: 'THEME_NAME'
});

Advanced theme usage

You can also mix themes and styles if necessary. By placing the theme option in the field you want, you will see in example below:

Note: Do not forget to add the style sheets of each theme to the header of the page.

npm install --save @cknow/vfg-theme-bootstrap
npm install --save @cknow/vfg-theme-bulma
<template>
    <vfg :options="options" :schema="schema"></vfg>
</template>

<script>

import vfg from '@cknow/vfg';
import vfgThemeBootstrap from '@cknow/vfg-theme-bootstrap';
import vfgThemeBulma from '@cknow/vfg-theme-bulma';

Vue.use(vfg);
Vue.use(vfgThemeBootstrap); // register bootstrap theme
Vue.use(vfgThemeBulma); // register bulma theme

export default {
    data() {
        return {
            options: {
                // default theme is Bootstrap
                theme: 'bootstrap'
            },

            schema: [{
                label: 'Name with Bootstrap'
            },{
                theme: 'bulma' // set Bulma theme
                label: 'Name with Bulma'
            }]
        }
    }
}

</script>