{"id":27463057,"url":"https://github.com/wotamann/vuetify-form-base","last_synced_at":"2025-04-15T22:01:57.301Z","repository":{"id":35024058,"uuid":"168704155","full_name":"wotamann/vuetify-2-form-base","owner":"wotamann","description":"Schema-based Form Generator - Vue.js 2.0 Component based on Vuetify 2.0","archived":false,"fork":false,"pushed_at":"2024-07-22T10:12:39.000Z","size":9099,"stargazers_count":230,"open_issues_count":58,"forks_count":60,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-06T19:55:39.365Z","etag":null,"topics":["form","generator","javascript","reactive","schema-design","vue","vue-component","vuetify","vuetify-control"],"latest_commit_sha":null,"homepage":"https://wotamann.github.io/vuetify","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/wotamann.png","metadata":{"files":{"readme":"README.md","changelog":"change.log","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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-01T13:49:11.000Z","updated_at":"2025-03-30T12:18:49.000Z","dependencies_parsed_at":"2024-06-18T22:54:22.373Z","dependency_job_id":"80af66da-b050-4260-9d1b-cb28d593c4f0","html_url":"https://github.com/wotamann/vuetify-2-form-base","commit_stats":{"total_commits":190,"total_committers":7,"mean_commits":"27.142857142857142","dds":0.1105263157894737,"last_synced_commit":"08bf66b32bfcf237271adce59176eacbf78c6f0b"},"previous_names":["wotamann/vuetify-2-form-base","wotamann/vuetify-form-base"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotamann%2Fvuetify-2-form-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotamann%2Fvuetify-2-form-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotamann%2Fvuetify-2-form-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wotamann%2Fvuetify-2-form-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wotamann","download_url":"https://codeload.github.com/wotamann/vuetify-2-form-base/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249161129,"owners_count":21222472,"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":["form","generator","javascript","reactive","schema-design","vue","vue-component","vuetify","vuetify-control"],"created_at":"2025-04-15T22:01:02.605Z","updated_at":"2025-04-15T22:01:57.275Z","avatar_url":"https://github.com/wotamann.png","language":"JavaScript","funding_links":[],"categories":["🙌 Projects using Vuetify \u003ca name=\"projects\"\u003e\u003c/a\u003e"],"sub_categories":["Vuetify 2"],"readme":"# Documentation\n\n**[Updated Documentation at Gitbook](https://wotamann.gitbook.io/vuetify-form-base/)**\n\n---\n\n# Vuetify-Form-Base\n\nImagine you get Data as JS-Object and you have to create an editable Form.\n\n```javascript\nModel: {\n\tname: 'Stoner',\n\tposition: 'Admin',\n\ttasks: [\n\t\t{ \n\t\t  done: true,\n\t\t  title: 'make refactoring' \n\t\t},\n\t\t{ \n\t\t  done: false,\n\t\t  title: 'write documentation'  \n\t\t},\n\t\t{ \n\t\t  done: true,\n\t\t  title: 'remove logs'  \n\t\t}        \n\t]        \n}\n```\n\nNormally you have to flatten the Data-Structure and map all to an appropriate Format. Then you have to define a HTML-Form and animate it with your Data. \n\nWith **Vuetify-Form-Base** create a Schema Object with the same Structure as your Data.\n\n```javascript\nSchema: {\n\tname: { type:'text', label:'Name' },\n\tposition: { type:'text', label:'Position' },\n\ttasks: { \n\t\ttype: 'array',\n\t\tschema: { \n\t\t\tdone:{ type:'checkbox', label:'done', col:3}, \n\t\t\ttitle:{ type:'text', col:9 }\n\t\t} \n\t}\n}  \n```\n\nand you will get a working Form. \n\n\n\n![Form](./images/array-schema.PNG)\n\nIf you have to generate Forms or you have to edit Data presented as JSON- or JS-Objects, then take a closer look at **Vuetify-Form-Base** and try it. It can make your work much easier and save your time. This Form Generator works as [Vue.js 2.0 Component](https://vuejs.org/) and can simplify your Work by automatically creating Forms, based on your Schema-Definition. \n\nFurthermore if you don't define a Schema, then **Vuetify-Form-Base** tries to generate a schema automatically. This works if the Data Values are of Type 'string', 'number' or 'bool'.\n\n**Vuetify-Form-Base** uses the well known and excellent [Component Framework Vuetify 2.0](https://vuetifyjs.com/) to style and layout your Form. Vuetify Controls have a clear, minimalistic design and support responsive Design. If necessary add specific layouts by using the implemented Vuetify [Grid System](https://vuetifyjs.com/en/components/grids/).\n\n---\n\n\n\n## Demo\n\n[Read Documentation](https://wotamann.gitbook.io/vuetify-form-base/)\n\nand start here \n\n[Here you can see a Demo with Key-Examples](https://wotamann.github.io/)\n\nor\n\nClone or download this Project, change current directory to **./vuetify-form-base/example**  and then run\n\n`npm install`\n\n`npm run serve`\n\nor \n\nDownload and open this [HTML-File](https://github.com/wotamann/vuetify-form-base/blob/master/dist/index-cdn.html) in your Browser\n\nor \n\nPlay with [Fiddle](https://jsfiddle.net/wotamann/204z6vpq/13/)\n\nor \n\nCopy this HTML File with CDN\n```HTML\n\u003chtml\u003e\n\t\u003chead\u003e\n\t  \u003clink href=\"https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900\" rel=\"stylesheet\"\u003e\n\t  \u003clink href=\"https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css\" rel=\"stylesheet\"\u003e\n\t  \u003clink href=\"https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css\" rel=\"stylesheet\"\u003e\n\t  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui\"\u003e\n\t\u003c/head\u003e\t\n\t\u003cbody\u003e\n\t\t\u003cdiv id=\"app\"\u003e\n\t\t\u003cv-app\u003e\n\t\t  \u003cv-main\u003e\n\t\t\t\u003cv-container\u003e\n\t\t\t\t\u003cv-form-base :col=\"{cols:12, sm:6, md:3 }\" :model=\"model\" :schema=\"schema\" @input=\"log\" /\u003e\n\t\t\t\u003c/v-container\u003e\n\t\t  \u003c/v-main\u003e\n\t\t\u003c/v-app\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript src=\"https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript src=\"https://unpkg.com/vuetify-form-base\"\u003e\u003c/script\u003e\n\t\t\u003cscript\u003e\n\t\tnew Vue({\n\t\t\tel: '#app',\n\t\t\tvuetify: new Vuetify(),\n\t\t\tcomponents: { vFormBase },\n\t\t\tdata () {\n\t\t\t\treturn {      \n\t\t\t\t  model: {\n\t\t\t\t\ttext: 'Base',\n\t\t\t\t\tpassword: 'abcdefgh',\n\t\t\t\t\tcheckbox:true,\n\t\t\t\t\tfile: [] // array of File objects\n\t\t\t\t  },     \n\t\t\t\t  schema: {\n\t\t\t\t\ttext: 'text', // shorthand for -\u003e  text: { type:'text', label:'text' }                   \n\t\t\t\t\tpassword: { \n\t\t\t\t\t  type: 'password',\n\t\t\t\t\t  clearable: true,\n\t\t\t\t\t  solo:true,\n\t\t\t\t\t  class:'mx-2 mt-2'\n\t\t\t\t\t},\t\t\t  \n\t\t\t\t\tcheckbox:'checkbox',\n\t\t\t\t\tfile: { \n\t\t\t\t\t  type: 'file', \n\t\t\t\t\t  label: 'Images', \n\t\t\t\t\t  showSize:true,\n\t\t\t\t\t  counter:true\n\t\t\t\t\t}\n\t\t\t\t  }\n\t\t\t\t}\n\t\t\t},\n\t\t\tmethods:{\n\t\t\t\tlog(v){ \n\t\t\t\t\tconsole.log(v) \n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t\t\u003c/script\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n\n---\n## Intro\n\n**vuetify-form-base** comes as a singular File. It is a [Vue Component](https://vuejs.org/v2/guide/components.html) and can easily integrated into any Vue Project.   \n\n```HTML\n\u003cv-form-base :model=\"myModel\" :schema=\"mySchema\" @input=\"handleInput\" /\u003e\n\n\u003c!-- ident but deprecated  --\u003e\n\u003cv-form-base :value=\"myModel\" :schema=\"mySchema\" @input=\"handleInput\" /\u003e\n````\n\nThe Schema-Object has the **same Structure** as the Model-Object. Create a Schema by copying the Model-Object and replace the Values of the Model-Object by Definitions for your your Schema. This corresponding Schema-Object defines type, layout and functional behaviour of the Controls in your Form. \n\n![Form Example](./images/dat-schema.PNG)\n\n---\n\nThe [Component Framework Vuetify 2.0](https://vuetifyjs.com/) styles your Form. The Controls have a clear design, but don't worry if you need more you can change Style and Layout. For more Details see Section **Style with CSS**\n\n### Autogenerated Schema\nIf you don't define a Schema, then **Vuetify-Form-Base** tries to generate a schema automatically. But this works only if the Model Values are of Type 'string','number' or 'bool'.\n\n### Defined Schema\nBased on an existing Model **vuetify-form-base** generates a full editable Form using defined Schema. Layout and Functionality are defined in a Schema-Object, which has the same Property structure as the Model-Object. Your Data-Object keeps full reactive and any Input or Change in your Form triggers an Event too. \n\nIf you have a deep nested Model-Object including any Array-Structure you can direct work on it. There is no need to flatten or modify your Data Presentation. \n\n![Form Example](./images/formbase01.PNG)\n\nChanging any Field in the Form gives you a **reactive Result** in your Model-Object. \nFurthermore you can **synchronize** two or more Forms by using same Model-Object. \n\nIf you want a **Partial-Form** which displays only parts of your Data.Object, then link a property of your Data-Object to your **vuetify-form-base** Component. \n\nAnd if necessary you can also build a **Form in Form** by using **Slots**.\n\n---\n## Events in 'v-form-base' \n\nUse the v-on directive to listen to Events for \n\n\u003e**'Focus', 'Input',  'Click', 'Blur', 'Resize', 'Intersect', 'Mouse'** and **'Swipe'**. \n\n\u003e**'Change'** will catch 'Input' and 'Click'. \n\n\u003e**'Watch'** will listen to 'Focus', 'Input', 'Blur' and 'Click'. \n\n\u003e**'Update'** will catch all Events. \n\n```HTML\n\u003c!-- No ID defined --\u003e\n\u003cv-form-base \n  :model=\"myModel\"\n  :schema=\"mySchema\"\n  @input=\"handleInput\"\n  @resize=\"handleResize\"\n/\u003e\n\n\u003c!-- ID defined  --\u003e\n\u003cv-form-base \n  id=\"form-base-person\"\n  :model=\"myModel\"\n  :schema=\"mySchema\"\n  @input:form-base-person=\"handleInput\"\n  @blur:form-base-person=\"handleblur\"\n/\u003e\n````\n---\n## Supported Attributes in 'v-form-base'\n```HTML\n\n\u003cv-form-base \n  id=\"my-form-base\"\n  :model=\"myModel\"\n  :schema=\"mySchema\"\n  :row =\"rowAttributesForLayoutControl\"\n  :col = \"globalColDefinition\"  \n  @input:my-form-base=\"handleInputOrOtherEvents\"\n/\u003e\n\u003c!-- deprecated --\u003e\n\u003cv-form-base \n  :value= \"myModel\"\n  :flex = \"globalColDefinition\"  \n/\u003e\n````\n---\n## Supported Controls - Vuetify Input \u0026 Controls  \n---\n\n### Text-Field\n\n````javascript\n  // Textfield - Text: \n  schema: { ctrl: 'text' }  // shorthand definition\n  \n  schema: { \n    ctrl: { type:'text', ...} \n  }\n  // Textfield - Password: \n  schema: { ctrl: 'password' }\n  \n  schema: { \n    ctrl: { type:'password', ...} \n  }\n  // Textfield - Email:  \n  schema: { ctrl: 'email' }\n  \n  schema: { \n    ctrl: { type:'email', ...} \n  }\n  // Textfield - Number:  \n  schema: { ctrl: 'number' }\n\t\n  schema: { \n    ctrl: { type:'number', ...} \n  }\n\n  // Use most of Attributes from \u003cv-text-field\u003e\n  schema: { \n    ctrl: { \n      type:'text', \n      label:'Search', \n      hint:'Books', \n      prependIcon:'search', \n      clearable:true } \n    }\n````\n\n  [More Informations to Vuetify-Textfield Attributes find here](https://vuetifyjs.com/en/components/text-fields/). \n\n---\n### Access native Type of HTML-INPUT\nProp 'ext' in combination with Type:'text' make the native [HTML Input Type ]( https://www.w3schools.com/tags/att_input_type.asp ) accessable. \n\n````javascript\nmySchema:{    \n  range:{ \n    type:'text', \n    ext:'range' \n  },\n  color:{ \n    type:'text', \n    ext:'color',\n    prependIcon: 'palette', \n    label:'Color'\n  },    \n  date:{ \n    type:'text', \n    ext:'date', \n    locale:'en',\n    prependIcon: 'event', \n    label:'Date'\n  },\n  time:{ \n    type:'text', \n    ext:'time', \n    format:'24h',\n    prependIcon: 'timer', \n    label:'Time'\n  }\n}\n````\n---\n\n### File-Input: \n````javascript\nschema: { ctrl: 'file', ... }\nschema: { ctrl: { type:'file', ...}, ... }\n````\n[More Informations to Vuetify File-Input find here](https://vuetifyjs.com/en/components/file-inputs/). \n\n---\n\n### Textarea:\n````javascript\nschema: { ctrl: 'textarea', ... }\nschema: { ctrl: { type:'textarea', ...}, ... }\n````\n[More Informations to Vuetify Textarea find here](https://vuetifyjs.com/en/components/textarea/). \n\n---\n\n### Checkbox, Radio or Switch:\n````javascript \n// Checkbox\nschema: { ctrl: 'checkbox', ... }\nschema: { ctrl: { type:'checkbox', ...}, ... }\n\n// Radio: \nschema: { ctrl: { type:'radio', ...}, ... }\n\n// Switch: \nschema: { ctrl: 'switch', ... }\nschema: { ctrl: { type:'switch', ...}, ... }\n````\n[More Informations to Vuetify Selection-Controls find here](https://vuetifyjs.com/en/components/selection-controls/). \n\n---\n### Slider\n````javascript\n// Slider: \nschema: { ctrl: 'slider', ... }\nschema: { ctrl: { type:'slider', ...}, ... }\n````\n[More Informations to Vuetify Sliders find here](https://vuetifyjs.com/en/components/sliders/). \n\n---\n### Icon\n````javascript\n// Icon: \nschema: { ctrl: 'icon', ... }\nschema: { ctrl: { type:'icon', ...}, ... }\n````\n[More Informations to Vuetify Icons find here](https://vuetifyjs.com/en/components/icons/). \n\n---\n### Image\n````javascript\n// Image: \nschema: { ctrl: 'icon', ... }\nschema: { ctrl: { type:'img', src:'...', ...}, ... }\n````\n[More Informations to Vuetify Icons find here](https://vuetifyjs.com/en/components/icons/)\n\n--- \n### Button\n````javascript\n// Button: \nschema: { ctrl: 'btn', ... }\nschema: { ctrl: { type:'btn', ...}, ... }\n````\n[More Informations to Vuetify Buttons find here](https://vuetifyjs.com/en/components/buttons/). \n### Button-Group \n````javascript\n// Button Group: \nschema: { ctrl: 'btn-toggle', ... }\nschema: { ctrl: { type:'btn-toggle', ...}, ... }\n````\n[More Informations to Vuetify Button Groups find here](https://vuetifyjs.com/en/components/button-groups/). \n\n---\n### Select, Combobox, Autocomplete\n\nSelect Data from Array defined in Schema\n\n````javascript\n// Select:\nschema: { ctrl: 'select', ... }\nschema: { ctrl: { type:'select', items:['1','2'] }, ... }\n````\n[More Informations to Vuetify Select find here](https://vuetifyjs.com/en/components/select/). \n````javascript\n// Combobox:\nschema: { ctrl: 'combobox', ... }\nschema: { ctrl: { type:'combobox', items:['1','2']}, ... }\n````\n[More Informations to Vuetify Combobox find here](https://vuetifyjs.com/en/components/combobox/). \n````javascript\n// Autocomplete:\nschema: { ctrl: 'autocomplete', ... }\nschema: { ctrl: { type:'autocomplete', items:['1','2']}, ... }\n````\n[More Informations to Vuetify Autocomplete find here](https://vuetifyjs.com/en/components/autocomplete/). \n\n---\n### List and Treeview\n\nSelect Items from an Array in your Model\n````javascript\n// List: Edit  \nschema: { ctrl: 'list', ... }\nschema: { ctrl: { type:'list', ...}, ... }\n````\n[More Informations to Vuetify List-Item-Groups find here](https://vuetifyjs.com/en/components/list-item-groups/). \n````javascript\n// Treeview: \nschema: { ctrl: 'treeview', ... }\nschema: { ctrl: { type:'treeview', ...}, ... }\n````\n[More Informations to Vuetify Treeview find here](https://vuetifyjs.com/en/components/treeview/). \n\n---\n### Model-Array\n\n````javascript\n  // Array: \n  model:{\n    ctrlArray:[\n      { idx:1, ctrl:'A'},\n      { idx:2, ctrl:'B'},\n      { idx:3, ctrl:'C'}\n    ]\n  }\n\tschema: { \n    ctrlArray: { \n      type:'array',\n      // optional define key for array removing \n      key:'idx' // or ['idx','ctrl']\n      // define schema of your items in array\n      schema: { ctrl: 'text' }\n    }, \n\t}\n````\n---\n### Group Controls\n````javascript\n  // Grouping\n  model:{\n    group1:{ a: 'A', b: 'B', c: 'C' }\n    group2:{ a: 'A', b: 'B', c: 'C' }\n  }\n\tschema: { \n    group1: { \n      type:'group',\n      schema: { a:'text', b:'text', c:'text' }\n    }, \n    group2: { \n      type:'group',\n      schema: { a:'text', b:'text', c:'text' }\n    }, \n\t}\n````\n\n[See more under Example 'Group Controls'](https://wotamann.github.io/) \n\n---\n### Color - Pickers, Menu \u0026 Native Implementation\n````javascript\n// Color Picker: \nschema: { ctrl: 'color', ... }\nschema: { ctrl: { type:'color', ...}, ... }\n\n// Textfield with linked Color Menu\ncolor:{ \n  type:'color', \n  ext:'text',\n  prependIcon:'palette', \n  label:'Color'\n}    \n// Color - Native HTML \u003cInput type=\"color\" /\u003e \ncolor:{ \n  type:'text', \n  ext:'color',\n  prependIcon:'palette', \n  label:'Color'\n}    \n````\n[More Informations to Vuetify Color-Pickers find here](https://vuetifyjs.com/en/components/color-pickers/). \n\n### Date|Month - Pickers, Menu \u0026 Native Implementation\n\n````javascript\n// Date Picker: \nschema: { ctrl: 'date', ... }\nschema: { ctrl: { type:'date', ...}, ... }\n\n// Textfield with linked Date Menu\ndate:{ \n  type:'date', \n  ext:'text',\n  locale:'en',\n  prependIcon:'event', \n  label:'Date'\n}\n\n// Textfield with linked Month Menu\ndate:{ \n  type:'date', \n  ext:'text',\n  typeInt:'month', \n  locale:'en',\n  prependIcon:'event', \n  label:'Date'\n}\n\n// Date - Native HTML \u003cInput type=\"date\" /\u003e\ndate:{ \n  type:'text', \n  ext:'date', \n  locale:'en',\n  prependIcon: 'event', \n  label:'Date'\n}\n````\t\n[More Informations to Vuetify Date-Pickers find here](https://vuetifyjs.com/en/components/date-pickers/). \n\n### Time - Pickers, Menu \u0026 Native Implementation\n\n````javascript\n// Time Picker: \nschema: { ctrl: 'time', ... }\nschema: { ctrl: { type:'time', ...}, ... }\n\n// Textfield with linked Time Menu\ntime:{ \n  type:'time', \n  ext:'text', \n  format:'24h',\n  prependIcon: 'timer', \n  label:'Time',    \n  menu:{ closeOnContentClick:false, nudgeRight:200, maxWidth:'290px', minWidth:'290px' }\n}\n\n// Time  - Native HTML \u003cInput type=\"time\" /\u003e\ntime:{ \n  type:'text', \n  ext:'time', \n  format:'24h',\n  prependIcon: 'timer', \n  label:'Time'\n}\n````\n[More Informations to Vuetify Time-Pickers find here](https://vuetifyjs.com/en/components/time-pickers/). \n\t\n[See Example under Section 'Date, Time, Color as native HTML-Type, Menu and Pickers'](https://wotamann.github.io/) \n\n---\n## Installation\n\nFor proper working you need a Vue.js Project with Vuetify 2.0 installed. Get started with **Vuetify**, the world’s most popular Vue.js framework for building feature rich, blazing fast application [here](https://vuetifyjs.com/en/getting-started/quick-start/).\n\n\u003e**INFORMATION:** Vue-Loader doesn't autoload components, because Vuetify-Form-Base use \n```html\n\u003ccomponent is=\"my-component\" /\u003e\n```\nand therefore Components must be [manually imported](https://vuetifyjs.com/en/customization/a-la-carte/). More information about dynamic components is in the official [Vue documentation](https://vuejs.org/v2/guide/components.html#Dynamic-Components)\n\n\nAfter successful installation of a Vue 2.6 Project with Vuetify 2.0  \n\n    npm install vuetify-form-base --save\n\n**vuetify-form-base** is a [Vue.js single-file component](https://vuejs.org/v2/guide/single-file-components.html) with a .vue extension and you can use it like any Vue-Component. \n\nIn order for your application to work properly, you must wrap it in a [v-app](https://next.vuetifyjs.com/en-US/framework/default-markup) component. This component is required and can exist anywhere inside the body, but must be the parent of ALL Vuetify components. **v-main** needs to be a direct descendant of **v-app**. \n\n\u003eInformation: since Vuetify 2.3.10 **\"v-content\"** is named **\"v-main\"** \n\n### How to manually import components and directives\n\n#### Steps to import\n1. Go to the file ```src/plugins/vuetify.js```\n2. Import the necessary components and directives used by vuetify-form-base:\n  - Components\n    - VRow\n    - VCol\n    - VTooltip\n  - Directives\n    - Ripple\n    - Intersect\n    - Touch\n    - Resize\n3. After this, the library will be successfully imported to your Vue file, and no errors on the console should appear.\n4. If a new error appears on the console, it means component you are using is not imported. See the name of the component on the console and add tot he plugin file.\n\n#### Example file from ```src/plugins/vuetify.js```\n\n```js\nimport Vue from 'vue';\nimport Vuetify, {\n    VRow,\n    VCol,\n    VTextField,\n    VTooltip,\n    VCheckbox,\n    VSelect,\n} from 'vuetify/lib';\nimport { Ripple, Intersect, Touch, Resize } from 'vuetify/lib/directives';\n\nVue.use(Vuetify, {\n    components: { VRow, VTooltip, VCol, VTextField, VCheckbox, VSelect },\n    directives: { Ripple, Intersect, Touch, Resize },\n});\n\nexport default new Vuetify({});\n```\nThis example shows how to import the needed components and directives to use the vuetify-form-base and some basic components like VTextField, VCheckbox, VSelect.\n\n### Quickstart with VUE-File\n```HTML\n\u003c!-- exampleFile.vue --\u003e\n\u003ctemplate\u003e\n  \u003cv-app\u003e\n  \u003c!-- Since Vuetify 2.3.10 \"v-content\" is named \"v-main\"  --\u003e\n    \u003cv-main\u003e\n      \u003cv-container fluid\u003e\n        \u003cv-form\u003e\n          \u003cv-form-base :model=\"myModel\" :schema=\"mySchema\" @input=\"handleInput\"/\u003e\n        \u003c/v-form\u003e\n      \u003c/v-container\u003e   \n    \u003c/v-main\u003e\n  \u003c/v-app\u003e\n\u003c/template\u003e\n\n```\n```javascript\nimport VFormBase from 'vuetify-form-base';  \n\nexport default {\t\n  components:{ VFormBase },\n  data () {\n    return {\n      myModel: {\n        name: 'Jumo',\n        password: '123456',\n        email: 'base@mail.com',\n        checkbox: true,\n        select: 'Jobs',\n      },   \n      mySchema: {\n        name: { type: 'text', label: 'Name' },\n        password: { type: 'password', label: 'Password' },\n        email: { type: 'email', label: 'Email' },\n        checkbox: { type: 'checkbox', label: 'Checkbox' },\n        select: { type: 'select', label: 'Select', items: ['Tesla', 'Jobs', 'Taleb'] }\n      }\n    }\n  },\n  methods:{\n    handleInput(val){\n      console.log(val) \n    }\n  }\n}\n```\nand you will get a full editable Form based on your schema and filled with your Model-Object. \n\n![Basic Form](./images/formbase2.PNG)\n\n\u003eINFORMATION: \n\u003e\n\u003eProperties in 'myModel' without corresponding Prop in 'mySchema', are ignored and keep untouched, but a initial warning will be logged to console\n\n---\n## Example displaying nested Data-Object\n \n\nIn Reality sometimes you will have deep nested objects or arrays, which should be edited. **vuetify-form-base** works for you and flatten internally this nested object and build a plain Form.   \n\n```javascript\nmyValue: {\n  name: 'Base',\n  controls:{\n    selection:{\n      select: 'Tesla',\n      selectM: ['Jobs'],\n    },\n    switch: [ true,false ],\n    checkbox: [ false, true, { \n      checkboxArray: [ true, false ]}\n    ]\n  }       \n},\n\nmySchema: {\n  name: { type: 'text', label: 'Name'},\n  controls:{\n    selection:{\n      select: { type: 'select', label: 'Select', items: ['Tesla', 'Jobs', 'Taleb'] },        \n      selectM: { type: 'select', label: 'M-Select', multiple:true, items: ['Tesla', 'Jobs', 'Taleb']}\n    },\n    switch: [ \n      { type: 'switch', label: '1' }, \n      { type: 'switch', label: '2' } \n    ],\n    checkbox: [\n      { type: 'checkbox', label: 'A' },\n      { type: 'checkbox', label: 'B' }, \n      { checkboxArray: [\n        { type: 'checkbox', label: 'C-A', color:'red' },\n        { type: 'checkbox', label: 'C-B', color:'red' }\n      ]}  \n    ],\n  }\n}\n```\n\n![Form Example](./images/deep.png)\n\n\n---\n## Example editing Data-Arrays\n \nFor editing arrays use the type 'array' and define an nested 'schema' property. \n\n```javascript\n    mySchema: {\n      tasks: {\n        type: 'array',\n        schema: { \n          done: { type: 'checkbox'  }, \n          title: { type: 'text' }\n        }\n      }  \n    }\n```\n\n#### Type Array - Schema object\n\n```javascript\n    myValue: {      \n      tasks: [\n        {\n          idx:0,\n          done: true,\n          title: 'make refactoring'\n        },\n        {\n          idx:1,\n          done: true,\n          title: 'write documentation'\n        },\n        {\n          idx:2,\n          done: true,\n          title: 'remove logs'\n        }\n      ]\n    },\n    mySchema: {\n      tasks: {\n        type: 'array',\n        // 'key' is optional.\n        // For working on arrays (ie removing) define a key\n        // IMPORTANT: don't use an editable key (because of permanent re-iteration on change) \n        key:'idx',\n        schema: { \n          done: { type: 'checkbox', label: 'Ok', col: 3 }, \n          title: { type: 'text', col: 8 },            \n        }\n      }\n    }\n```\n\n![Form Example](./images/array-template.png)\n\n---\n## Dynamic Schema\n \nIF you want Schema Properties to be changed **dynamic**, then you must make a **computed** Schema Object. \n\nThis Example turns the Radio Layout from Column to Row on Resizing to Layout-Size medium or greater. \n\n```javascript\ndata () {\n  return {\n    myModel:{\n      radio: 'A',\n    }, \n  }\n},\n//  dynamic Schema with computed \ncomputed:{\n  mySchema() { \n    return {       \n      radio: { type: 'radio', row: this.row, options:['A','B'] }\n    }  \n  },\n  row () { return this.$vuetify.breakpoint.mdAndUp }\n}\n```\n---\n\n## Vuetify Display, Typography and Spacing\n\nIntegrate Vuetify-Display and Layout behaviour by using the Schema-Property 'class':\n\n```javascript\n    mySchema: {\n      name: { type: 'text', class:'title d-flex d-sm-none ml-4 pa-1 float-left' },\n    }\n```\n[More Info at Vuetify Display:](https://vuetifyjs.com/en/styles/display) \n\n[More Info at Vuetify Typography:](https://vuetifyjs.com/en/styles/typography) \n\n[More Info at Vuetify Spacing:](https://vuetifyjs.com/en/styles/spacing) \n\n[More Info at Vuetify Float:](https://vuetifyjs.com/en/styles/float) \n\n\n[See Example under Section 'Display, Typographie and Layout'](https://wotamann.github.io/) \n\n---\n\n## Vuetify Grid\n\nIntegrate Vuetify-Grid behaviour by setting the Form-Base Property 'col':\n\n**Default Form-Base Definition**\n\n```html\n\u003c!-- object declaration --\u003e\n\u003cform-base :col=\"{ cols:12, sm:8, md:6, lg:4 }\" ... /\u003e\n\u003c!-- ident but deprecated --\u003e\n\u003cform-base :flex=\"{ xs:12, sm:8, md:6, lg:4 }\" ... /\u003e  \n\n\u003c!-- default grid --\u003e\n\u003cform-base :col=\"{ cols:12 }\" ... /\u003e\n\u003cform-base :col=\"{ cols:'auto' }\" ... /\u003e\n\n\u003c!-- or shorthand for {cols:12 }  --\u003e\n\u003cform-base :col=12 ... /\u003e\n\u003cform-base :col=\"12\" ... /\u003e\n\u003c!-- ident but deprecated --\u003e\n\u003cform-base :flex=\"12\" ... /\u003e\n\n\u003c!-- NEW 'row' Attribute \nset v-row and is a wrapper component for v-col. It utilizes flex properties \nto control the layout and flow of its inner columns. Standard gutter can be\nreduced with the dense prop or removed completely with no-gutters\n\nsee -\u003e https://vuetifyjs.com/en/components/grids/ \n--\u003e\n\u003cform-base :row=\"rowAttribute\" :col=\"12\" ... /\u003e\n```\n```javascript\nconst rowAttribute = { justify:'center', align:'center', noGutters:true } \n```\n  \n**Schema-Definition (overrules Form-Base Definition)**\n\nGet individual Grid-Control by using Schema-Properties 'col', 'offset' and 'order'.\n\n```javascript\nmySchema: {      \n  name1: { type: 'text', col: 4, offset: 2, order: 1 },\n    // col: 4     // shorthand for col: { cols:4 }\n    // offset: 2  // shorthand for offset: { offset:2 }\n    // order: 1   // shorthand for order: { order:1 }\n  },\n  name2: { \n    type: 'text', \n    col: { cols:12, sm:6, md:4, lg:3, xl:2 }, \n    offset:{ offset:0, sm:1, md:2 }, \n    order:{ order:0, sm:1, md:2 } \n  }\n}\n```\n  \n[More Info at Vuetify Grid:](https://vuetifyjs.com/en/framework/grid#usage) \n \n\n---\n\n## Link \u0026 Synchronize\n\nForms can be **linked** together using the same Model-Object. Changes in one Form are synchronized and reflected in the other Form. \n\n```HTML\n\t\u003cv-form-base :model=\"myValue\" :schema=\"mySchema\" /\u003e\n  \n\t\u003cv-form-base id=\"form-sync\" :model=\"myValue\" :schema=\"mySchema\" /\u003e\n```\n---\n\n## From 'cebab-case' to 'camelCase' in Vuetify-Controls API\n\n[Use Vuetify Controls API:](https://vuetifyjs.com/en/components/text-fields#api) Props in Vuetify-Controls in **kebab-case** must be converted to **camelCase** in Schema-Definition.\n \n```javascript\n  mySchema: { \n    name: { type:'text', prependIcon:'menu', backgroundColor:'red' }  \n  }\n```\nmaps to \n```HTML\n\t\u003cv-text-field prepend-icon=\"menu\" background-color=\"red\"\u003e\u003c/v-text-field\u003e\n``` \n---\n\n## Schema\n\n```HTML\n\u003cv-form-base :model=\"myValue\" :schema=\"mySchema\" /\u003e\n\n\u003cv-form-base \n  id=\"form-id\" \n  :model=\"myValue\" \n  :schema=\"mySchema\" \n  :col=\"12\" \n  :change:form-id=\"myEventHandler\"\n/\u003e\n```\n\t\nSchema is an Object, which defines and controls the behavior of your Form. Each Key in your Schema-Object should reflect a Key from your Data-Object. \n\n```javascript\ndata () {\n  return {\n    myValue:{\n      name: 'Base'  \n    }, \n    mySchema:{\n      name: 'text' // shorthand for name: { type:'text', label:'name' }  \n    }\n  }\n}\n```\n\nThe next example shows a more complex Schema:\n  \n```javascript  \n    // Partials Functions for Rules\n    const minLen = l =\u003e v =\u003e (v \u0026\u0026 v.length \u003e= l) || `min. ${l} Characters`\n    const maxLen = l =\u003e v =\u003e (v \u0026\u0026 v.length \u003c= l) || `max. ${l} Characters`\n    const required = msg =\u003e v =\u003e !!v || msg\n    const validEmail: msg =\u003e v =\u003e /.+@.+\\..+/.test(v) || msg\n  \n\t  // Destruct value from obj and return a modified value! \n    const toUpper = ( {value} ) =\u003e typeof value === 'string' ? value.toUpperCase() : value \n\n    export default {\n    \n      components: { VFormBase },\n\n      data () {\n        return {\n          // model\n          myModel: {\n            name: 'Base',\n            password: '123456',\n            email: 'base@mail.com'\n          },\n          // schema\n          mySchema: {\n            name: { \n              type: 'text', \n              label: 'Name', \n              hint:'Converts to UpperCase'\n              toCtrl: toUpper, \n              fromCtrl:toUpper,\n              rules: [ required('Name is required\u003c\u003e) ] \n              col: 12, \n            },\n            password: { \n              type: 'password', \n              label: 'Password', \n              hint:'Between 6-12 Chars', \n              appendIcon: 'visibility', \n              counter: 12, \n              rules: [ minLen(6), maxLen(12) ], \n              clearable: true, \n              col: 12 \n            },\n            email: { \n              type: 'email', \n              label: 'Email', \n              rules: [ validEmail('No valid Email'), required('Email is required\u003c\u003e) ], \n              col: 12 \n            }\n          }\n        }\n      }\n\n    }\n```\n\n**Available Properties in Schema **\n  \n[For more Schema-Properties see Vuetify Controls API](https://vuetifyjs.com/en/components/text-fields#api)  \n\n\tschema:{\n      \n      type: string            // text, password, email, file, textarea \n                              // radio, switch, checkbox, slider,\n                              // select, combobox, autocomplete, \n                              // array, list, treeview\n                              // icon, btn, btn-toggle \n                              // date, time, color\n  \n  \t  ext: string             // access to native HTML-Input Type \n\n      sort: num               // use simple order to display items \n\n      col:   num or object    // See Vuetify Grid\n      flex:  num or object    // DEPRECATED \n      order: num or object    // use Vuetify-Grid  \n      offset: num or object   // See Vuetify Grid\n\n      label string,           // label of item    \n      placeholder: string,    // placeholder \n      hint: string,           // additional Info  \n      tooltip: string | bool | object // show tooltip - use Slots for individual text\n\n      color: string\n      backgroundColor:string\n      class: string,            // inject classnames - schema:{ name:{ css:'small'}, ...  }\n        \n      mask: string,           // regex to control input  \n\n      multiple: bool,         // used by type: select, combobox, autocomplete    \n      required: bool,         // need an input value\n      hidden: bool,           // hide item - set from another item\n      disabled: bool,         \n      readonly: bool,          \n            \n      appendIcon: icon        // click triggers event with icon-location\n      prependIcon: icon       // click triggers event with icon-location\n\n      items: array            // ['A','B'] used by type: select, combobox, autocomplete   \n      options: array,         // ['A','B'] used by type:radio\n      rules: array of Fn      // [ value =\u003e true || false, ... ]\n      \n      // must return a (modified) value!!\n      toCtrl: function,       // ( {value, obj, data, schema} ) =\u003e value\t\n      fromCtrl: function,     // ( {value, obj, data, schema} ) =\u003e value\n    }\n\n---\n## Events\n\nWe can use the v-on directive to listen to vuetify-form-base events **'focus', 'input', 'click', 'blur', 'change', 'watch', 'mouse', 'display', 'intersect', 'resize', 'swipe', 'update'** and run some Code when they’re triggered.\n\nThis Example use the Default ID and listen all events with 'update':\n\n```HTML\n    \u003c!-- HTML --\u003e\n    \u003cv-form-base :value= \"myValue\" :schema= \"mySchema\" @update= \"update\" /\u003e\n```\n\nThe next Code has the Custom ID **'form-base-simple'**. In this case your v-on Directive must append the Custom ID like **@update:form-base-simple:**\n\n```HTML\n    \u003c!-- HTML --\u003e\n    \u003cv-form-base \n      id = \"form-base-simple\" \n      :value= \"myValue\" \n      :schema= \"mySchema\" \n      @update:form-base-simple= \"update\" \n    /\u003e\n```\n\nYou can listen to one or more Events\n\n```HTML\n  \u003c!-- HTML --\u003e\n  \u003c!-- compose Listener to one or more of following Events: --\u003e\n  \u003cv-form-base \n    :model= \"myValue\" \n    :schema= \"mySchema\" \n    \n    @click= \"log\"\n    @input= \"log\"\n    @change=\"log\"    // input|click\n    @watch= \"log\"    // focus|input|click|blur\n    @focus= \"log\"\n    @blur=  \"log\"        \n    @mouse= \"log\"    // mouseenter|mouseleave  \n    @display= \"log\"  // resize|swipe|intersect \n    @intersect=\"log\" // intersect - https://vuetifyjs.com/en/directives/intersect\n    @resize= \"log\"\n    @swipe=  \"log\"   // touch events        \n    @update= \"log\"   // catch all events    \n  /\u003e      \n```\n\n**The Event-Signature:**\n\n```javascript\n    change( {  on, id, key, value, params, obj, data, schema, parent, index, event } ){\n      // destructure the signature object \n    }\n```\n\n    on -        Trigger Name  // focus|input|blur|click|resize|swipe|update \n    id -        Formbase-ID\n    key -       key of triggering Element\n    value -     value of triggering Element\n    obj -       triggering Element { key, value, schema } \n    event -     the native trigger-event if available \n    params -    params object if available { text, x, y, tag, model, open, index }    \n    index -     index of array of schemas  \n    data -      Data-Object\n    schema -    Schema-Object\n    parent -    Formbase-Object - if available \n---\n**Example: Use 'Change' Event to change Visibility on Password Element**\n\n```HTML\n    \u003c!-- HTML --\u003e\n    \u003cv-form-base :model=\"myValue\" :schema=\"mySchema\" @change=\"change\"\u003e\n```\n\n```javascript\n    ...\n\n    mySchema: {\n      firstPassword:{ type:'password', appendIcon:'visibility', .... }\n    }\n    \n    ...\n    \n    change ({ on, key, obj, params }) {\n      // test event is 'click' and comes from appendIcon on key 'firstPassword'\n      if (on == 'click' \u0026\u0026 key == 'firstPassword' \u0026\u0026 (params \u0026\u0026 params.tag) == 'append') {         \n        // toggle icon\n        obj.schema.appendIcon = obj.schema.type === 'password'? 'lock': 'visibility'\n        // toggle visibility \n        obj.schema.type = obj.schema.type === 'password'? 'text': 'password'\n      }\n    }\n```\n---\n## Slots\n\nUse Slots to pass Header and Footer into a Control. If necessary replace Controls by Slots. Any slot could be a v-form-base component itself.   \n \n```HTML\n   \u003c!-- FORM-BASE-COMPONENT --\u003e\n    \u003cv-form-base id=\"form-base-css\" :model=\"myValue\" :schema=\"mySchema\" \u003e\n      \u003c!-- FORM SLOT --\u003e\n      \u003ch4 slot=\"form-base-css-top\" class=\"slot\"\u003e\n        Top Slot of 'Form'\n      \u003c/h4\u003e\n      \u003ch4 slot=\"form-base-css-bottom\" class=\"slot\"\u003e\n        Bottom Slot of 'Form'\n      \u003c/h4\u003e  \n      \u003c!-- KEY SLOTS --\u003e\n      \u003ch4 slot=\"slot-top-key-name\" class=\"slot\"\u003e\n        Slot at Top of Key 'Name'\n      \u003c/h4\u003e\n      \u003ch4 slot=\"slot-item-key-password\" class=\"slot\"\u003e\n        Slot replaces Key 'Password'\n      \u003c/h4\u003e\n      \u003ch4 slot=\"slot-bottom-key-email\" class=\"slot\"\u003e\n        Slot at Bottom of Key 'Email'\n      \u003c/h4\u003e\n      \u003c!-- TYPE SLOTS --\u003e\n      \u003ch4 slot=\"slot-top-type-btn-toggle\" class=\"slot\"\u003e\n        Slot at Top of Type 'Btn-Toggle'\n      \u003c/h4\u003e\n      \u003ch4 slot=\"slot-bottom-type-btn\" class=\"slot\"\u003e\n        Slot at Bottom of Type 'Btn'\n      \u003c/h4\u003e\n      \u003ch4 slot=\"slot-top-type-radio\" class=\"slot\"\u003e\n        Slot at Top of Type 'Radio'\n      \u003c/h4\u003e\n      \u003c!-- TOOLTIP SLOTS --\u003e\n      \u003cdiv\n        slot=\"slot-tooltip\"\n        slot-scope=\"slotProps\"\n      \u003e\n        Tooltip-Slot: {{ slotProps.obj.schema.tooltip }} has value '{{ slotProps.obj.value || 'undefined' }}'\n      \u003c/div\u003e\n      \u003c!-- TOOLTIP SLOT -  New Syntax VUE 2.6.0 --\u003e\n      \u003c!-- \u003ctemplate v-slot:slot-tooltip=\"slotProps\"\u003e\n         {{ slotProps.obj.schema.tooltip }} with Value: {{ slotProps.obj.value }}\n      \u003c/template\u003e --\u003e\n    \u003c/v-form-base\u003e\n```\n\n[Try CSS \u0026 Slots in Example](https://wotamann.github.io/)\n\n![Slots in Blue](./images/slot.png)\n\n---\n## Form Validation\n\nIf you need Form Validation you have to wrap **v-form-base** with **[v-form](https://next.vuetifyjs.com/en/components/forms#api)** and take the reference of v-form for working on.\n    \n```HTML    \n    \u003c!-- HTML --\u003e    \n    \u003cv-form ref=\"form\" v-model= \"formValid\" lazy-validation\u003e\n      \u003cv-form-base :model= \"myValue\" :schema= \"mySchema\" @update= \"update\"/\u003e\n    \u003c/v-form\u003e\n```\n```javascript\n    \u003c!-- JS --\u003e\n    validate () {\n      this.$refs.form.validate()\n    },\n\n    resetValidation () {\n      this.$refs.form.resetValidation()\n    },\n```\n\n[Try **Form with Rules and Validation** in Example](https://wotamann.github.io/)\n\n---\n\n## Style with CSS \n\n\nCustomize your **vuetify-form-base** component using CSS-Classnames \n \n[Try **CSS, SLots, Tooltips \u0026 Buttons** in Example](https://wotamann.github.io/)\n\n\u003e  **IMPORTANT:**  \n\u003e  Don't use **`\u003cstyle scoped\u003e`** in parents component, because scoped definitions\n\u003e  are inside the child component not accessable\n\n\n### Formbase - Default ID\n\n`#form-base` is the default ID of your component. If you need different CSS for two or more forms in the same parent component, then change default value by setting a different ID for each component and use this new ID. Using a 'custom-id' you have to modify the event-binding to @update:custom-id = \"update\" \n\n#### - Default ID   \t\n```HTML\n    \u003c!-- HTML-Template --\u003e   \n    \u003cv-form-base @update= \"update\" /\u003e  \n```\n```CSS\n    #form-base {...} \n```\n#### - Custom-ID\n```HTML\n\n    \u003c!-- HTML-Template --\u003e   \n    \u003cv-form-base id=\"custom-id\" @update:custom-id= \"update\" /\u003e  \n```\n```CSS \n    #custom-id {...} \n```\n\n### Type - Classnames\n\n  \n  Style all items of a specific type, then use type specific classnames. They start with `type-` appended by any `type`. You can use following types in your Schema-Object: \n\n```CSS\n\n    #form-base .type-text { color: #44A }}           \t  \n    #form-base .type-email { font-weight:500; }  \n\n```\n### Key - Classnames\n\n  Set Classname of deep key in your Data-Object, by converting **.dot notation** 'person.adress.city' into **kebab case** 'person-adress-city' prepending 'key-' \n\n```CSS\n    \u003c!-- \n\t    myValue{ person:{ adress:{ city:'',... } ... } ... } \n      CSS Classname to access to key 'city'\n    --\u003e\n    #form-base .key-person-adress-city { font-weight:500; }    \n    \n\n    \u003c!-- \n      Access to myValue: { name:'' }\n      CSS Classname to access key 'name' \t       \n    --\u003e\n    #form-base .key-name { font-weight:500; }            \n    \n    \u003c!-- \n      myValue: { controls: { slide: [25, 64]  } \n      Access First Entry in Array of Key Slide \n    --\u003e\n    #form-base .key-controls-slide-0 { font-weight:500; }  \n```\n\n### Validate with Pseudoselectors\n```CSS\t  \n    #form-base .item input:valid { background-color: #afa; }\n    #form-base .type-email input:invalid { background-color: #faa; }\n    #form-base .key-name input:focus { background-color: #ffd; }   \n```\n\n### CSS - Example\n```javascript\t  \n    \u003c!-- JS --\u003e\n    myValue: {\n        name: 'Base',\n        password: '123456',\n        email: 'base@mail.com',\n        controls: {\n          checkbox: true,\n          switch: true,\n          slider: 33,\n          radioA: 'A',\n          radioB: 'B'\n        }\n      }\n\n```\t  \n```CSS\t  \n     \u003c!-- CSS  --\u003e\n    \u003cstyle\u003e\n      #form-base { \n        border: 1px solid #cb2; \n        background-color: #ffe; \n        padding:2rem \n      }\n      \n      /* CSS Item --- set all items  */\n      #form-base .item { \n        border-left: 1px dashed #29D; \n        border-top: 1px dashed #29D; \n        padding:1rem \n      }\n\n      /* CSS Type --- set all items with type */\n      #form-base .type-switch { border-bottom: 3px solid #E23}\n      #form-base .type-checkbox { background-color: #fdd }\n\n      /* CSS Keys --- select key in object 'myValue.controls.slider' */\n      #form-base .key-controls-slider { background-color: #fec }\n    \u003c/style\u003e\n```\n\n![Slots in Blue](./images/css.PNG)\n\n---\n## Features\n\n* Vue-Component\n* integrates UI framework Vuetify 2.0 with responsive Layout and Support of Grid\n* Use Vuetify Control \u0026 Input types inclusive most of available API-Props\n* Define and use custom Components\n* Get full configurable Forms based on Schema Definition\n* Full control over Grid\n* Drag and Drop Integration \n* Edit plain or deep nested objects including Arrays, without the need to flatten your data\n* Get a full, reactive Result\n* Listen on 'Resize', 'Focus', 'Input', 'Blur', 'Click', 'Swipe', 'Intersect', 'Mouse' and 'Update' Events\n* Use Slots to pass Header and Footer into a Control or replace a Control by a Slot.  Use  Slots to individualize your Tooltip   \n* Configurable CSS Style \n\n---\n## Change\n\n See change.log\n\n---\n## Dependencies\n\nvue \u003e= 2.6   -  current vuetify doesn't support vue 3.0\n\nvuetify \u003e= 2.0\n\nlodash \u003e 4.15\n\nvue-the-mask\n\n---\n## Similar Projects\n\n\n[vue-form-generator](https://github.com/icebob/vue-form-generator)\n\n[vue-formular](https://github.com/matfish2/vue-formular)\n\n---\n## License\n\n**vuetify-form-base** is available under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwotamann%2Fvuetify-form-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwotamann%2Fvuetify-form-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwotamann%2Fvuetify-form-base/lists"}