Skip to content

Commit

Permalink
✏️ docs: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
icebob committed Aug 30, 2016
1 parent 38c98c8 commit 06f55ac
Showing 1 changed file with 33 additions and 47 deletions.
80 changes: 33 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -63,77 +64,63 @@ Vue.use(VueFormGenerator);
export default {
data: {
schema: { ... },
model: {
model:
id: 1,
name: "John Doe",
password: "J0hnD03!x4",
skills: ["Javascript", "VueJS"],
email: "[email protected]",
status: true
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
}
}
}
</script>
```

## 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
}
}
}
</script>
```

## Development
Expand All @@ -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.
Expand Down

0 comments on commit 06f55ac

Please sign in to comment.