@@ -18,8 +18,9 @@ A schema-based form generator component for Vue.js v1.x.x
18
18
19
19
## Features
20
20
- multiple objects editing
21
- - 21 field types
21
+ - 24 field types
22
22
- built-in validators
23
+ - Bootstrap friendly templates
23
24
- customizable styles
24
25
- ...etc
25
26
@@ -63,77 +64,63 @@ Vue.use(VueFormGenerator);
63
64
64
65
export default {
65
66
data: {
66
- schema : { ... },
67
- model: {
67
+
68
+ model:
68
69
id: 1 ,
69
70
name: " John Doe" ,
70
71
password: " J0hnD03!x4" ,
71
72
skills: [" Javascript" , " VueJS" ],
72
73
73
74
status: true
74
75
},
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: [{
89
79
type: " text" ,
90
- label: " ID" ,
80
+ label: " ID (disabled text field) " ,
91
81
model: " id" ,
92
- readonly: true ,
93
- featured: false ,
82
+ readonly: true ,
94
83
disabled: true
95
- }, {
84
+ }, {
96
85
type: " text" ,
97
86
label: " Name" ,
98
87
model: " name" ,
99
- readonly : false ,
88
+ placeholder : " Your name " ,
100
89
featured: true ,
101
- required: true ,
102
- disabled: false ,
103
- placeholder: " User's name" ,
104
- validator: VueFormGenerator .validators .string
105
- }, {
90
+ required: true
91
+ },{
106
92
type: " password" ,
107
93
label: " Password" ,
108
94
model: " password" ,
109
95
min: 6 ,
110
96
required: true ,
111
97
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
+ },{
114
105
type: " email" ,
115
106
label: " E-mail" ,
116
107
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" ,
129
111
label: " Status" ,
130
112
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
+ }
136
122
}
123
+ </script >
137
124
```
138
125
139
126
## Development
@@ -157,7 +144,6 @@ npm run test
157
144
* [ ] sortable checkbox list
158
145
* [ ] Groupable fields
159
146
* [ ] Validation handling with multiple models
160
- * [ ] Bundle for vendor files
161
147
162
148
## Contribution
163
149
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