Vue-form-schema NPM

Vue Form Schema

A two ways drag and drop form builder for Vue.

npm install --save-dev vue-form-schema

Using form schema

This package comes in with a default dark.css and light.css theme and can always be overriden with your custom style.

import 'vue-form-schema/dist/dark.css';
import VueFormSchema from 'vue-form-schema';

export default {
    components: {
        VueFormSchema
    },
}

Template

<vue-form-schema></vue-form-schema>

Screen Shot

Schema Params

<vue-form-schema :config="{}" :import="[]" :template="{}"></vue-form-schema>

Import

Buids a form based on previosly exported JSON.

<div id="app">
  <vue-form-schema :import="from"></vue-form-schema>
</div>
<script>
    import 'vue-form-schema/dist/dark.css';
    import VueFormSchema from 'vue-form-schema';

    export default {
        components: {
            VueFormSchema
        },
        data() {
            return {
                from: [{"type":"text","required":false,"name":"name","label":{"text":"Full Name","class":"input"},"placeholder":"Enter your full name","value":null,"pattern":null,"autofocus":null,"autocomplete":null,"min":"2","max":"6","useName":true,"options":null,"multiple":false,"additionalAttr":[],"cols":null,"rows":null,"maxlength":null,"readonly":null,"disabled":null,"buttonType":"button","content":"Content","class":"input"}]
            }
        }
    }
</script>

Template

The default component for each of the element type. Eg

// Given were are using something like vue bootstrap
<vue-form-schema :template="{text: 'b-form-input'}"></vue-form-schema>

Name	Default
text	input
file	input
email	input
number	input
hidden	input
password	input
range	input
url	input
radio	input
checkbox	input
textarea	textarea
button	button
select	`select: {select: 'select', option: 'option'}`
countries	`select: {select: 'select', option: 'option'}`
paragraph	p
label	label

Config

Name	Description	Example
hide	Element attributes to hide	`hide: {text: ['required', 'name']}`
class	Element attributes default class	`class: {select: 'input select class'}`
action	Action attributes config	`action: {remove: {icon: 'X'}}`
additional	Additional attributes config	`additional: {add: {class: 'add-new-attr-btn'}}`
showLabel	Show label field.	`showLabel: true`
container	Each element wrapper	`container: {tag: 'div', attributes: {class: 'vue-form-gen-element'}}`

Default config:

{
    hide: {},
    class: {
        select: 'input',
        countries: 'input',
        button: 'button',
        textarea: 'input',
        buttonType: {
            span: 'span',
            select: 'input'
        }
    },
    action: {
        remove: {icon: '⊗', class: null, style: 'font-size:16px;cursor:pointer;color:red'},
        move: {up: '⇧', down: '⇩', class: null, style: 'font-size:16px;cursor:pointer;'},
        toggle: {show: '⊕', hide: '⊖', class: null, style: 'font-size:16px;cursor:pointer;'}
    },
    additional: {
        inputs: {
            style: null,
            class: null
        },
        add: {
            style: 'margin-top:10px'
        },
        remove: {
            style: 'margin-top:10px'
        }
    },
    showLabel: true,
    container: {tag: 'div', attributes: {class: 'vue-form-gen-element'}},
    button: {
        html: {class: 'vue-form-gen-button', show: true, click: null, content: 'Extract Html'},
        json: {class: 'vue-form-gen-button', show: true, click: null, content: 'Extract JSON'},
        view: {class: 'vue-form-gen-button', show: true, click: null, content: 'View'},
    }
}