{"id":20319203,"url":"https://github.com/bitkris-dev/buefy-form-generator","last_synced_at":"2025-07-03T18:34:44.787Z","repository":{"id":202425180,"uuid":"134840909","full_name":"bitkris-dev/buefy-form-generator","owner":"bitkris-dev","description":"A form generator component for VueJS, built on top of Buefy components and with Nuxt.js/SSR support","archived":false,"fork":false,"pushed_at":"2018-10-30T10:23:25.000Z","size":3025,"stargazers_count":8,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T18:12:39.729Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bitkris-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-05-25T10:21:55.000Z","updated_at":"2020-06-24T17:19:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"70338daa-1a26-40f2-8c64-c573b0f4b4bc","html_url":"https://github.com/bitkris-dev/buefy-form-generator","commit_stats":null,"previous_names":["bitkris-dev/buefy-form-generator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitkris-dev%2Fbuefy-form-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitkris-dev%2Fbuefy-form-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitkris-dev%2Fbuefy-form-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitkris-dev%2Fbuefy-form-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitkris-dev","download_url":"https://codeload.github.com/bitkris-dev/buefy-form-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248456372,"owners_count":21106604,"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":[],"created_at":"2024-11-14T18:45:32.727Z","updated_at":"2025-04-11T18:12:44.826Z","avatar_url":"https://github.com/bitkris-dev.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# buefy-form-generator\n\n\u003e A form generator component for VueJS, built on top of Buefy components and with Nuxt.js/SSR support\n\n## Install\n\n• Add dependencies to your npm/yarn package manager:\n\n``` bash\nnpm install awesome-phonenumber buefy mdi moment nuxt-dropzone vee-validate vue-quill-editor vue-scrollto\n# OR\nyarn add awesome-phonenumber buefy mdi moment nuxt-dropzone vee-validate vue-quill-editor vue-scrollto\n```\n\n• Install the form generator:\n\n``` bash\nnpm install buefy-form-generator\n# OR\nyarn add buefy-form-generator\n```\n\n• Configure and use plugins in the direct parent **.vue** file in which you will use the `\u003cbuefyFormGenerator\u003e` component:\n\n``` bash\nimport Vue from  'vue'\n\n# it's better to import components a-la-carte\nimport Datepicker from  'buefy/src/components/datepicker/Datepicker.vue'\nimport Timepicker from  'buefy/src/components/timepicker/Timepicker.vue'\nimport Field from  'buefy/src/components/field/Field.vue'\nimport Select from  'buefy/src/components/select/Select.vue'\nimport Input from  'buefy/src/components/input/Input.vue'\nimport Checkbox from  'buefy/src/components/checkbox/Checkbox.vue'\nimport Switch from  'buefy/src/components/switch/Switch.vue'\nimport Message from  'buefy/src/components/message/Message.vue'\nimport Icon from  'buefy/src/components/icon/Icon.vue'\nimport Loading from  'buefy/src/components/loading/Loading.vue'\n\n# this package already deals with all the validation through Vee-Validate\nimport VeeValidate,  { ErrorComponent }  from  'vee-validate'\n\n# needed to scroll to the error\nimport VueScrollTo from  'vue-scrollto'\n\n# install buefy-form-generator\nVue.component('buefyFormGenerator', require('buefy-form-generator'))\n\n# //// OR - For Nuxt SSR support\nif (process.browser) Vue.component('buefyFormGenerator', require('buefy-form-generator'))\n\n# install components\nVue.component(Datepicker.name, Datepicker)\nVue.component(Timepicker.name, Timepicker)\nVue.component(Field.name, Field)\nVue.component(Select.name, Select)\nVue.component(Input.name, Input)\nVue.component(Checkbox.name, Checkbox)\nVue.component(Switch.name, Switch)\nVue.component(Message.name, Message)\nVue.component(Icon.name, Icon)\nVue.component(Loading.name, Loading)\n\n# this is the VeeValidate config, you can customize it\nconst vvConfig =  { enableAutoClasses:  true, events:  'blur, change', errorBagName:  'vErrors'  }\nVue.use(VeeValidate, vvConfig)\nVue.component('vv-error', ErrorComponent)\n\n# use vue-scrollto\nVue.use(VueScrollTo)\n\n[...]\n\n```\n\nImport its css:\n\n``` bash\n\u003cstyle lang=\"css\"\u003e\n[...]\n\n@import 'node_modules/buefy-form-generator/dist/bfg.css';\n\n[...]\n\u003c/style\u003e\n```\n\nInsert in template:\n\n``` bash\n\u003ctemplate\u003e\n[...]\n\n\u003cbuefyFormGenerator\nref=\"form\"\n:schema=\"schema\"\n@changed=\"changed($event)\"\n@canceled=\"canceled($event)\"\n@validation=\"($event) ? save() : error()\"\n/\u003e\n\n[...]\n\u003c/template\u003e\n```\n\n## Schema\n\nThis form generator parses a simple JSON schema to generate all what you need in a common form.\nCreate a JSON object for each input you want to create as follows:\n\n``` bash\n{\n   [...]\n   \"inputName\": { options },\n   [...]\n}\n```\n\n### Configurable input options\n\n| Name | Type | Default | Description\n|--|--|--|--|\n|`header`|`{Object}`|`undefined`|Adds a `\u003ch1 class=\"title is-5\"\u003e\u003c/h1\u003e` before the input. \u003cbr\u003e\u003cbr\u003e Supported keys: \u003cbr\u003e• **icon**: `{String}` \u003cbr\u003e \u0026nbsp;\u0026nbsp; *(icon class name from [MDI](hhttps://materialdesignicons.com/) )*  \u003cbr\u003e • **text**: `{String}` |\n|`appearance`|`{Object}`|`undefined`|With this property, you can customize the input's look and layout. \u003cbr\u003e\u003cbr\u003e Supported keys:\u003cbr\u003e • **label**: `{String}`  \u003cbr\u003e • **icon**: `{String}` \u003cbr\u003e \u0026nbsp;\u0026nbsp; *(icon class name from [MDI](hhttps://materialdesignicons.com/) )* \u003cbr\u003e • **layout**: `{String}`  \u003cbr\u003e\u0026nbsp;\u0026nbsp; (add *here your CSS classes)* |\n|`data`|`{Object}`|`undefined`|Configure the data properties, types and validation rules. \u003cbr\u003e\u003cbr\u003e Supported keys: \u003cbr\u003e • **value**: `any type`  \u003cbr\u003e  \u0026nbsp;\u0026nbsp; (*use this for editable values, otherwise set to* `null` *for empty forms*.) \u003cbr\u003e • **type**: `{String}`  \u003cbr\u003e  \u0026nbsp;\u0026nbsp; (*can be one of the following values:*  `text`, `textarea`, `richtext`, `number`, `password`, `checkbox`, `switch`, `select`, `phone`, `date`, `time`, `dropzone`, `html`, `link`)\u003cbr\u003e • **disabled**: `{Boolean}`\u003cbr\u003e • **disabled**: `{Boolean}`\u003cbr\u003e • **noSend**: `{Boolean}`\u003cbr\u003e  \u0026nbsp;\u0026nbsp; (*If you want to show an input excluding it from the values passed via the* `@changed` *event. Best to use it with* **disabled**: `true`.) \u003cbr\u003e • **validate**: `{String}` \u003cbr\u003e  \u0026nbsp;\u0026nbsp; (*Insert your vee-validate validation rules. [Click this link](https://baianat.github.io/vee-validate/guide/rules.html) to see what is available*) \u003cbr\u003e  \u003cbr\u003e ╚ If (**type** = `html`) \u003cbr\u003e • **html:**  `{String}`  \u003cbr\u003e \u0026nbsp;\u0026nbsp; (*HTML elements will always work as if* **noSend**  *is set to `true`* for them.) \u003cbr\u003e  \u003cbr\u003e ╚ If (**type** = `dropzone`) \u003cbr\u003e • **button:**  `{String}`  \u003cbr\u003e • **options:**  `{String}`\u003cbr\u003e\u003cbr\u003e ╚ If (**type** = `select`) \u003cbr\u003e • **options:**  `{Array}` \u003cbr\u003e  \u0026nbsp;\u0026nbsp; (*Array of objects with this format: `{text: \"text\", value: \"value\"}`*) \u003cbr\u003e\u003cbr\u003e ╚ If (**type** = `number`) \u003cbr\u003e • **step:**  `{Float}`  \u003cbr\u003e • **min:**  `{Float}`\n\n### Example schema object\n\n``` bash\n{\n   # Text\n   \"name\":  {\n      \"header\":  {  \"icon\":  \"information\",  \"text\":  \"General Info\"  },\n      \"appearance\":  {  \"label\":  \"Name and Surname\",  \"icon\":  \"format-text\",  \"layout\":  \"column is-12-mobile is-6-tablet is-6-desktop is-6-widescreen\"  },\n      \"data\":  {  \"value\":  null,  \"type\":  \"text\",  \"validate\":  \"required|min:3\"  }\n   },\n\n   # Richtext\n   \"bio\":  {\n      \"appearance\":  {  \"label\":  \"Biography\",  \"icon\":  \"format-text\",  \"layout\":  \"column is-12-mobile is-6-tablet is-6-desktop is-6-widescreen\"  },\n      \"data\":  {  \"value\":  \"A sample biography\",  \"type\":  \"richtext\",  \"validate\":  \"required|min:20\"  }\n   },\n\n   # Select\n   \"gender\":  {\n      \"appearance\":  {  \"label\":  \"Gender\",  \"icon\":  \" human-male-female\",  \"layout\":  \"column is-12-mobile is-6-tablet is-6-desktop is-6-widescreen\"  },\n      \"data\": { \"value\": null, \"type\": \"select\",\n         \"options\": [\n            { \"text\": \"Male\", \"value\": \"gender-male\"},\n            { \"text\": \"Female\", \"value\": \"gender-female\"}\n         ]\n      }\n   },\n\n   # Date\n   \"birth_date\":  {\n      \"header\":  {  \"icon\":  \"calendar-multiple\",  \"text\":  \"Dates\"  },\n      \"appearance\":  {  \"label\":  \"Birth date\",  \"icon\":  \"calendar-clock\",  \"layout\":  \"column is-12-mobile is-6-tablet is-6-desktop is-6-widescreen\"  },\n      \"data\":  {  \"value\":  null,  \"type\":  \"date\",  \"validate\":  \"required|date_format:DD/MM/YYYY\"  }\n   },\n\n   # Time\n   \"time\": {\n      \"header\": { \"icon\": \"clock\", \"text\": \"Time\" },\n      \"appearance\": { \"label\": \"Scheduled time\", \"icon\": \"clock\", \"layout\": \"column is-6\" },\n      \"data\": { \"value\": null, \"type\": \"time\" }\n   },\n\n   # checkbox\n   \"checkbox\": {\n      \"appearance\": { \"label\": \"Are you a PRO?\", \"icon\": \"format-text\", \"layout\": \"column is-3\" },\n      \"data\": { \"value\": \"No\", \"type\": \"checkbox\" }\n   },\n\n   # Switch\n   \"switch\": {\n      \"header\": { \"icon\": \"toggle-switch\", \"text\": \"Enable\" },\n      \"appearance\": { \"label\": \"Publish your profile\", \"icon\": \"format-text\", \"layout\": \"column is-3\" },\n      \"data\": { \"value\": \"No\", \"type\": \"switch\" }\n   },\n\n   # HTML\n   \"guide\":  {\n      \"header\":  {  \"icon\":  \"information\",  \"text\":  \"Guide\"  },\n      \"appearance\":  {  \"label\":  \"Guide\",  \"layout\":  \"column is-12-mobile is-6-tablet is-6-desktop is-6-widescreen\"  },\n      \"data\":  {  \"html\":  \"Here you can insert as much \u003cb\u003eHTML\u003c/b\u003e you wish. Any tag whatsoever.\",  \"type\":  \"html\"  }\n   },\n\n   # Dropzone\n   \"image\": {\n      \"header\": { \"icon\": \"file-multiple\", \"text\": \"Avatar\" },\n      \"appearance\": { \"label\": \"Avatar\", \"layout\": \"column is-6\" },\n      \"data\": {\n         \"value\": null,\n         \"type\": \"dropzone\",\n         \"button\": \"Change avatar\",\n         \"options\": {\n            \"maxFiles\": 1,\n            \"url\": \"/\",\n            \"uploadMultiple\": false,\n            \"createImageThumbnails\": true,\n            \"acceptedFiles\": \".jpg, .jpeg, .png\"\n         }\n      }\n   }\n}\n```\n\n## To contribute\n\n``` bash\n# install dependencies\nyarn install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitkris-dev%2Fbuefy-form-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitkris-dev%2Fbuefy-form-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitkris-dev%2Fbuefy-form-generator/lists"}