Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gwenaelp/vfg-field-array
A vue-form-generator field to handle arrays
https://github.com/gwenaelp/vfg-field-array
javascript vue vue-components vue-form-generator vuejs2
Last synced: 3 days ago
JSON representation
A vue-form-generator field to handle arrays
- Host: GitHub
- URL: https://github.com/gwenaelp/vfg-field-array
- Owner: gwenaelp
- License: mit
- Created: 2018-03-18T23:22:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-07-13T13:59:19.000Z (about 3 years ago)
- Last Synced: 2024-09-19T13:31:52.238Z (8 days ago)
- Topics: javascript, vue, vue-components, vue-form-generator, vuejs2
- Language: JavaScript
- Size: 296 KB
- Stars: 39
- Watchers: 2
- Forks: 24
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# vfg-field-array
[](https://github.com/semantic-release/semantic-release)
[](https://travis-ci.org/gwenaelp/vfg-field-array)
> A vue-form-generator field to handle arrays
> Generated using [vue-cli-template-library](https://github.com/julon/vue-cli-template-library).
## Examples
### Simple array
```javascript
{
model: {
array: ["item1", "item2", "item3"]
},
schema: {
fields: [
{
type: "array",
label: "Array field",
model: "array",
showRemoveButton: true
}
]
}
}
```
### With container component
```javascript
{
model: {
array: ["item1", "item2", "item3"]
},
schema: {
fields: [
{
type: "array",
label: "Array field",
model: "array",
itemContainerComponent: "Container"
}
]
}
}
```
#### Container.vue
```html
export default {
props: ["model"],
data() {
return {
contentVisible: false
};
}
};
.title { background: whitesmoke; }
.content { border: 2px solid whitesmoke; padding: 10px; }
a { color: blue; text-decoration: underline; }
```
### With container component and object as array item
```javascript
{
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
```javascript
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",
itemContainerHeader: function(model, schema, index) {
return "Column " + (index + 1) + (model && model.label ? " (" + model.label + ")": "");
},
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",
visible: function(model) {
return model && (model.type === "select" || model.type === "multiselect");
},
required: function(model) {
return model && (model.type === "select" || model.type === "multiselect");
}
},
{
type: "input",
inputType: "number",
label: "Rows (optional)",
model: "rows",
inputName: "rows",
validator: "integer",
visible: function(model) {
return model && model.type === "text";
}
}
]
}
}
}
]
},
formOptions: {
validateAfterChanged: true
}
```
## Installation
```shell
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
```javascript
//
// You can register a component manually
//
import { FieldArray } from 'vfg-field-array';
export default {
...
components: {
FieldArray
},
...
};
//
// or register the whole module with vue
//
import ModuleLibrary from 'vfg-field-array';
// Install this library
Vue.use(ModuleLibrary);
```
### CommonJS
```javascript
//
// You can register a component manually
//
var Vue = require('vue');
var ModuleLibrary = require('vfg-field-array');
var YourComponent = Vue.extend({
...
components: {
'field-array': ModuleLibrary.FieldArray
},
...
});
//
// or register the whole module with vue
//
var Vue = require('vue');
var ModuleLibrary = require('vfg-field-array');
// Install this library
Vue.use(ModuleLibrary);
```
### Browser
```html
```
### After that, you can use it with Vue Form Generator:
```javascript
schema: {
fields: [
{
type: "array",
label: "My array",
model: "myArray"
}
]
}
```
## Changelog
See the GitHub [release history](https://github.com/gwenaelp/vfg-field-array/releases).
## Contributing
See [CONTRIBUTING.md](.github/CONTRIBUTING.md).