Skip to content

Commit 06f55ac

Browse files
committed
✏️ docs: update readme
1 parent 38c98c8 commit 06f55ac

File tree

1 file changed

+33
-47
lines changed

1 file changed

+33
-47
lines changed

README.md

+33-47
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ A schema-based form generator component for Vue.js v1.x.x
1818

1919
## Features
2020
- multiple objects editing
21-
- 21 field types
21+
- 24 field types
2222
- built-in validators
23+
- Bootstrap friendly templates
2324
- customizable styles
2425
- ...etc
2526

@@ -63,77 +64,63 @@ Vue.use(VueFormGenerator);
6364
6465
export default {
6566
data: {
66-
schema: { ... },
67-
model: {
67+
68+
model:
6869
id: 1,
6970
name: "John Doe",
7071
password: "J0hnD03!x4",
7172
skills: ["Javascript", "VueJS"],
7273
7374
status: true
7475
},
75-
formOptions: {
76-
validateAfterLoad: true,
77-
validateAfterChanged: true
78-
}
79-
}
80-
}
81-
</script>
82-
```
83-
84-
## Examples
85-
### Schema sample
86-
```js
87-
{
88-
fields: [{
76+
77+
schema: {
78+
fields: [{
8979
type: "text",
90-
label: "ID",
80+
label: "ID (disabled text field)",
9181
model: "id",
92-
readonly: true,
93-
featured: false,
82+
readonly: true,
9483
disabled: true
95-
}, {
84+
},{
9685
type: "text",
9786
label: "Name",
9887
model: "name",
99-
readonly: false,
88+
placeholder: "Your name",
10089
featured: true,
101-
required: true,
102-
disabled: false,
103-
placeholder: "User's name",
104-
validator: VueFormGenerator.validators.string
105-
}, {
90+
required: true
91+
},{
10692
type: "password",
10793
label: "Password",
10894
model: "password",
10995
min: 6,
11096
required: true,
11197
hint: "Minimum 6 characters",
112-
validator: VueFormGenerator.validators.string
113-
}, {
98+
validator: validators.string
99+
},{
100+
type: "select",
101+
label: "skills",
102+
model: "type",
103+
values: ["Javascript", "VueJS", "CSS3", "HTML5"]
104+
},{
114105
type: "email",
115106
label: "E-mail",
116107
model: "email",
117-
placeholder: "User's e-mail address",
118-
validator: VueFormGenerator.validators.email
119-
}, {
120-
type: "checklist",
121-
label: "Skills",
122-
model: "skills",
123-
multi: true,
124-
required: true,
125-
multiSelect: true,
126-
values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
127-
}, {
128-
type: "switch",
108+
placeholder: "User's e-mail address"
109+
},{
110+
type: "checkbox",
129111
label: "Status",
130112
model: "status",
131-
multi: true,
132-
default: true,
133-
textOn: "Active",
134-
textOff: "Inactive"
135-
}]
113+
default: true
114+
}]
115+
},
116+
117+
formOptions: {
118+
validateAfterLoad: true,
119+
validateAfterChanged: true
120+
}
121+
}
136122
}
123+
</script>
137124
```
138125

139126
## Development
@@ -157,7 +144,6 @@ npm run test
157144
* [ ] sortable checkbox list
158145
* [ ] Groupable fields
159146
* [ ] Validation handling with multiple models
160-
* [ ] Bundle for vendor files
161147

162148
## Contribution
163149
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.

0 commit comments

Comments
 (0)