vue-draggable-form-builder v0.0.41

Dependencies

Vue

https://vuejs.org

Vue.Draggable

https://github.com/SortableJS/Vue.Draggable

Tailwind

https://tailwindcss.com/

Get started

import { VueDraggableFormBuilderBuilder, VueDraggableFormBuilderForm } from 'vue-draggable-form-builder';

...
components: {
    VueDraggableFormBuilderBuilder,
    VueDraggableFormBuilderForm
},

...
<VueDraggableFormBuilderBuilder
    :propAvailableElements="['input', 'select', 'textarea']"
    :propCurrentElements="currentElements"
/>

propAvailableElements

Array with any of input, select, textarea items

propCurrentElements TODO: change name

An existing representation of the items

[
    {
        "label": "Textarea",
        "type": "textarea",
        "description": "a description",
        "placeholder": "placeholder",
        "value": "",
        "name": "my_unique_key"
    },
    {
        "label": "Label",
        "type": "select",
        "description": "a description",
        "options": [
        {
            "label": "My option",
            "value": 1,
            "selected": true
        },
        {
            "label": "My option",
            "value": 1,
            "selected": true
        }
        ],
        "name": "my_unique_key2"
    },
    {
        "label": "Input",
        "type": "input",
        "description": "a description",
        "placeholder": "placeholder",
        "value": "",
        "name": "my_unique_key3"
    }
]

Rendering the form

<VueDraggableFormBuilderForm
    :propCurrentElements="currentElements"
/>

@onFormSave="onFormSave"