vfg-field-array
A vue-form-generator field to handle arrays
Generated using vue-cli-template-library.
Examples
Simple array
model: array: "item1" "item2" "item3" schema: fields: type: "array" label: "Array field" model: "array" showRemoveButton: true
With container component
model: array: "item1" "item2" "item3" schema: fields: type: "array" label: "Array field" model: "array" itemContainerComponent: "Container"
Container.vue
{{contentVisible ? "-" : "+"}} Container ({{model}}) X
With container component and object as array item
model: columns: "label": "Name" "field": "full_name" "template": "" "label": "URL" "field": "html_url" "template": "" "label": "Date" "field": "date" "template": "" schema: type: 'array' label: 'Columns' model: 'columns' itemContainerComponent: 'WidgetListColumnEditorContainer' showRemoveButton: false fieldClasses: 'arrayEditor' newElementButtonLabelClasses: "button is-primary" items: type: 'object' default: {} schema: fields: type: 'input' inputType: 'text' label: 'Label' model: 'label' type: 'input' inputType: 'text' label: 'Field' model: 'field' type: 'sourcecode' label: 'Template' model: 'template'
With bootstrap 4 container component, object as array item, validation and inputName
model: columns: {}schema: fields: type: "array" label: 'Columns' model: 'columns' inputName: "columns" showRemoveButton: false newElementButtonLabelClasses: "btn btn-outline-dark mt-2" itemContainerComponent: "field-array-bootstrap-accordion-item" newElementButtonLabel: "+ Add Column" { return "Column " + index + 1 + model && modellabel ? " (" + modellabel + ")": ""; } items: type: 'object' schema: fields: type: "input" inputType: "text" label: "Name" model: "name" inputName: "name" required: true validator: "string" type: "input" inputType: "text" label: "Description" model: "description" inputName: "description" validator: "string" type: "select" label: "Field Type" model: "type" inputName: "type" required: true validator: "string" values: id: "string" name: "Text Field" id: "text" name: "Text Area" id: "number" name: "Number" id: "date" name: "Date" id: "select" name: "Single selection" id: "multiselect" name: "Multiple Selection" id: "boolean" name: "True/False" type: "array" label: "Values" model: "values" inputName: "values" validator: "array" showRemoveButton: true showModeElementUpButton: true showModeElementDownButton: true itemFieldClasses: "form-control" itemContainerClasses: "input-group pb-2" newElementButtonLabelClasses: "btn btn-outline-dark" removeElementButtonClasses: "btn btn-danger input-group-append" moveElementUpButtonClasses: "btn btn-outline-dark input-group-append" moveElementDownButtonClasses: "btn btn-outline-dark input-group-append" newElementButtonLabel: "+ Add Value" { return model && modeltype === "select" || modeltype === "multiselect"; } { return model && modeltype === "select" || modeltype === "multiselect"; } type: "input" inputType: "number" label: "Rows (optional)" model: "rows" inputName: "rows" validator: "integer" { return model && modeltype === "text"; } formOptions: validateAfterChanged: true
Installation
npm install vfg-field-array
vfg-field-array
can be used as a module in both CommonJS and ES modular environments.
When in non-modular environment, vfg-field-array will register all the components to vue by itself.
ES6
//// You can register a component manually//; ... components: FieldArray ...; //// or register the whole module with vue//; // Install this libraryVue;
CommonJS
//// You can register a component manually//var Vue = ;var ModuleLibrary = ; var YourComponent = Vue; //// or register the whole module with vue//var Vue = ;var ModuleLibrary = ; // Install this libraryVue;
Browser
<!-- Components are registered globally -->
After that, you can use it with Vue Form Generator:
schema: fields: type: "array" label: "My array" model: "myArray"
Changelog
See the GitHub release history.
Contributing
See CONTRIBUTING.md.