@@ -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
6465export 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 email: " john.doe@gmail.com" ,
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
163149Please 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