diff --git a/README.md b/README.md index 0aae560c..04f85695 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,9 @@ A schema-based form generator component for Vue.js v1.x.x ## Features - multiple objects editing -- 21 field types +- 24 field types - built-in validators +- Bootstrap friendly templates - customizable styles - ...etc @@ -63,8 +64,8 @@ Vue.use(VueFormGenerator); export default { data: { - schema: { ... }, - model: { + + model: id: 1, name: "John Doe", password: "J0hnD03!x4", @@ -72,68 +73,54 @@ export default { email: "john.doe@gmail.com", status: true }, - formOptions: { - validateAfterLoad: true, - validateAfterChanged: true - } - } -} - -``` - -## Examples -### Schema sample -```js -{ - fields: [{ + + schema: { + fields: [{ type: "text", - label: "ID", + label: "ID (disabled text field)", model: "id", - readonly: true, - featured: false, + readonly: true, disabled: true - }, { + },{ type: "text", label: "Name", model: "name", - readonly: false, + placeholder: "Your name", featured: true, - required: true, - disabled: false, - placeholder: "User's name", - validator: VueFormGenerator.validators.string - }, { + required: true + },{ type: "password", label: "Password", model: "password", min: 6, required: true, hint: "Minimum 6 characters", - validator: VueFormGenerator.validators.string - }, { + validator: validators.string + },{ + type: "select", + label: "skills", + model: "type", + values: ["Javascript", "VueJS", "CSS3", "HTML5"] + },{ type: "email", label: "E-mail", model: "email", - placeholder: "User's e-mail address", - validator: VueFormGenerator.validators.email - }, { - type: "checklist", - label: "Skills", - model: "skills", - multi: true, - required: true, - multiSelect: true, - values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"] - }, { - type: "switch", + placeholder: "User's e-mail address" + },{ + type: "checkbox", label: "Status", model: "status", - multi: true, - default: true, - textOn: "Active", - textOff: "Inactive" - }] + default: true + }] + }, + + formOptions: { + validateAfterLoad: true, + validateAfterChanged: true + } + } } + ``` ## Development @@ -157,7 +144,6 @@ npm run test * [ ] sortable checkbox list * [ ] Groupable fields * [ ] Validation handling with multiple models -* [ ] Bundle for vendor files ## Contribution Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.