{"id":14973766,"url":"https://github.com/gwenaelp/vfg-field-array","last_synced_at":"2025-07-13T05:35:43.138Z","repository":{"id":49847731,"uuid":"125776846","full_name":"gwenaelp/vfg-field-array","owner":"gwenaelp","description":"A vue-form-generator field to handle arrays","archived":false,"fork":false,"pushed_at":"2021-07-13T13:59:19.000Z","size":303,"stargazers_count":38,"open_issues_count":13,"forks_count":24,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T01:33:36.329Z","etag":null,"topics":["javascript","vue","vue-components","vue-form-generator","vuejs2"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gwenaelp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-18T23:22:31.000Z","updated_at":"2024-12-13T09:34:12.000Z","dependencies_parsed_at":"2022-09-07T06:20:27.554Z","dependency_job_id":null,"html_url":"https://github.com/gwenaelp/vfg-field-array","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwenaelp%2Fvfg-field-array","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwenaelp%2Fvfg-field-array/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwenaelp%2Fvfg-field-array/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gwenaelp%2Fvfg-field-array/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gwenaelp","download_url":"https://codeload.github.com/gwenaelp/vfg-field-array/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238422930,"owners_count":19469662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","vue","vue-components","vue-form-generator","vuejs2"],"created_at":"2024-09-24T13:49:22.969Z","updated_at":"2025-02-12T06:32:13.797Z","avatar_url":"https://github.com/gwenaelp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vfg-field-array\n\n![Rollup badge](https://img.shields.io/badge/Rollup-^0.53.3-ff69b4.svg)\n![Jest](https://img.shields.io/badge/Jest-^22.0.4-blue.svg)\n![Vue](https://img.shields.io/badge/Vue-^2.5.13-brightgreen.svg)\n![Storybook](https://img.shields.io/badge/Storybook-^3.3.3-ff70a3.svg)\n![Commitizen](https://img.shields.io/badge/Commitizen-enabled-brightgreen.svg)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n![Npm badge](https://img.shields.io/npm/v/vfg-field-array.svg)\n[![Build Status](https://travis-ci.org/gwenaelp/vfg-field-array.svg?branch=master)](https://travis-ci.org/gwenaelp/vfg-field-array)\n\n\u003e A vue-form-generator field to handle arrays\n\n\u003e Generated using [vue-cli-template-library](https://github.com/julon/vue-cli-template-library).\n\n## Examples\n\n### Simple array\n\n![Simple](https://github.com/gwenaelp/vfg-field-array/blob/master/docs/preview-simple.png)\n\n```javascript\n{\n  model: {\n    array: [\"item1\", \"item2\", \"item3\"]\n  },\n  schema: {\n    fields: [\n      {\n        type: \"array\",\n        label: \"Array field\",\n        model: \"array\",\n        showRemoveButton: true\n      }\n    ]\n  }\n}\n```\n\n### With container component\n\n![With container](https://github.com/gwenaelp/vfg-field-array/blob/master/docs/preview-container.png)\n\n```javascript\n{\n  model: {\n    array: [\"item1\", \"item2\", \"item3\"]\n  },\n  schema: {\n    fields: [\n      {\n        type: \"array\",\n        label: \"Array field\",\n        model: \"array\",\n        itemContainerComponent: \"Container\"\n      }\n    ]\n  }\n}\n```\n\n#### Container.vue\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv\u003e\n      \u003cdiv class=\"title\"\u003e\n        \u003ca @click=\"contentVisible = !contentVisible\"\u003e\n          {{contentVisible ? \"-\" : \"+\"}} Container ({{model}})\n        \u003c/a\u003e\n        \u003ca @click=\"$emit('removeItem')\"\u003e\n          X\n        \u003c/a\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"content\" v-if=\"contentVisible\"\u003e\n        \u003cslot\u003e\u003c/slot\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    props: [\"model\"],\n    data() {\n      return {\n        contentVisible: false\n      };\n    }\n  };\n\u003c/script\u003e\n\u003cstyle scoped\u003e\n  .title { background: whitesmoke; }\n  .content { border: 2px solid whitesmoke; padding: 10px; }\n  a { color: blue; text-decoration: underline; }\n\u003c/style\u003e\n```\n\n### With container component and object as array item\n\n![With container and object](https://github.com/gwenaelp/vfg-field-array/blob/master/docs/preview-container-object.png)\n\n```javascript\n{\n  model: {\n    columns: [{\n      \"label\": \"Name\",\n      \"field\": \"full_name\",\n      \"template\": \"\"\n    }, {\n      \"label\": \"URL\",\n      \"field\": \"html_url\",\n      \"template\": \"\"\n    }, {\n      \"label\": \"Date\",\n      \"field\": \"date\",\n      \"template\": \"\"\n    }],\n  },\n  schema: {\n    type: 'array',\n    label: 'Columns',\n    model: 'columns',\n    itemContainerComponent: 'WidgetListColumnEditorContainer',\n    showRemoveButton: false,\n    fieldClasses: 'arrayEditor',\n    newElementButtonLabelClasses: \"button is-primary\",\n    items: {\n      type: 'object',\n      default: {},\n      schema: {\n        fields: [{\n          type: 'input',\n          inputType: 'text',\n          label: 'Label',\n          model: 'label',\n        },{\n          type: 'input',\n          inputType: 'text',\n          label: 'Field',\n          model: 'field',\n        },{\n          type: 'sourcecode',\n          label: 'Template',\n          model: 'template',\n        }]\n      }\n    }\n  }\n}\n```\n\n### With bootstrap 4 container component, object as array item, validation and inputName\n\n```javascript\nmodel: {\n  columns: {}\n},\nschema: {\n  fields:[\n    {\n      type: \"array\",\n      label: 'Columns',\n      model: 'columns',\n      inputName: \"columns\",\n      showRemoveButton: false,\n      newElementButtonLabelClasses: \"btn btn-outline-dark mt-2\",\n      itemContainerComponent: \"field-array-bootstrap-accordion-item\",\n      newElementButtonLabel: \"+ Add Column\",\n      itemContainerHeader: function(model, schema, index) {\n        return \"Column \" + (index + 1) + (model \u0026\u0026 model.label ? \" (\" + model.label + \")\": \"\");\n      },\n      items:{\n        type: 'object',\n        schema: {\n          fields: [\n              {\n                  type: \"input\",\n                  inputType: \"text\",\n                  label: \"Name\",\n                  model: \"name\",\n                  inputName: \"name\",\n                  required: true,\n                  validator: \"string\",\n              },\n              {\n                  type: \"input\",\n                  inputType: \"text\",\n                  label: \"Description\",\n                  model: \"description\",\n                  inputName: \"description\",\n                  validator: \"string\"\n              },\n              {\n                  type: \"select\",\n                  label: \"Field Type\",\n                  model: \"type\",\n                  inputName: \"type\",\n                  required: true,\n                  validator: \"string\",\n                  values: [\n                      {id: \"string\", name: \"Text Field\"},\n                      {id: \"text\", name: \"Text Area\"},\n                      {id: \"number\", name: \"Number\"},\n                      {id: \"date\", name: \"Date\"},\n                      {id: \"select\", name: \"Single selection\"},\n                      {id: \"multiselect\", name: \"Multiple Selection\"},\n                      {id: \"boolean\", name: \"True/False\"}\n                  ]\n              },\n              {\n                  type: \"array\",\n                  label: \"Values\",\n                  model: \"values\",\n                  inputName: \"values\",\n                  validator: \"array\",\n                  showRemoveButton: true,\n                  showModeElementUpButton: true,\n                  showModeElementDownButton: true,\n                  itemFieldClasses: \"form-control\",\n                  itemContainerClasses: \"input-group pb-2\",\n                  newElementButtonLabelClasses: \"btn btn-outline-dark\",\n                  removeElementButtonClasses: \"btn btn-danger input-group-append\",\n                  moveElementUpButtonClasses: \"btn btn-outline-dark input-group-append\",\n                  moveElementDownButtonClasses: \"btn btn-outline-dark input-group-append\",\n                  newElementButtonLabel: \"+ Add Value\",\n                  visible: function(model) {\n                      return model \u0026\u0026 (model.type === \"select\" || model.type === \"multiselect\");\n                  },\n                  required: function(model) {\n                      return model \u0026\u0026 (model.type === \"select\" || model.type === \"multiselect\");\n                  }\n              },\n              {\n                  type: \"input\",\n                  inputType: \"number\",\n                  label: \"Rows (optional)\",\n                  model: \"rows\",\n                  inputName: \"rows\",\n                  validator: \"integer\",\n                  visible: function(model) {\n                      return model \u0026\u0026 model.type === \"text\";\n                  }\n              }\n            ]\n        }\n      }\n    }\n  ]\n\n},\nformOptions: {\n  validateAfterChanged: true\n}\n```\n\n## Installation\n\n```shell\nnpm install vfg-field-array\n```\n\n`vfg-field-array` can be used as a module in both CommonJS and ES modular environments.\n\nWhen in non-modular environment, vfg-field-array will register all the components to vue by itself.\u003c/p\u003e\n\n### ES6\n\n```javascript\n//\n// You can register a component manually\n//\nimport { FieldArray } from 'vfg-field-array';\n\nexport default {\n  ...\n  components: {\n    FieldArray\n  },\n  ...\n};\n\n//\n// or register the whole module with vue\n//\nimport ModuleLibrary from 'vfg-field-array';\n\n// Install this library\nVue.use(ModuleLibrary);\n```\n\n### CommonJS\n\n```javascript\n//\n// You can register a component manually\n//\nvar Vue = require('vue');\nvar ModuleLibrary = require('vfg-field-array');\n\nvar YourComponent = Vue.extend({\n  ...\n  components: {\n    'field-array': ModuleLibrary.FieldArray\n  },\n  ...\n});\n\n//\n// or register the whole module with vue\n//\nvar Vue = require('vue');\nvar ModuleLibrary = require('vfg-field-array');\n\n// Install this library\nVue.use(ModuleLibrary);\n```\n\n### Browser\n\n```html\n\u003cscript src=\"path/to/vue/vue.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/vfg-field-array/dist/vfg-field-array.min.js\"\u003e\u003c/script\u003e\n\u003c!-- Components are registered globally --\u003e\n```\n\n### After that, you can use it with Vue Form Generator:\n\n```javascript\n  schema: {\n    fields: [\n      {\n        type: \"array\",\n        label: \"My array\",\n        model: \"myArray\"\n      }\n    ]\n  }\n```\n\n\n## Changelog\n\nSee the GitHub [release history](https://github.com/gwenaelp/vfg-field-array/releases).\n\n## Contributing\n\nSee [CONTRIBUTING.md](.github/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgwenaelp%2Fvfg-field-array","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgwenaelp%2Fvfg-field-array","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgwenaelp%2Fvfg-field-array/lists"}