@@ -18,17 +18,19 @@ A schema-based form generator component for Vue.js.
18
18
19
19
## Features
20
20
- multiple objects editing
21
- - 27 field types
21
+ - core & full bundles
22
+ - 21 field types
22
23
- built-in validators
23
24
- Bootstrap friendly templates
24
25
- customizable styles
26
+ - extendable with custom fields
25
27
- ...etc
26
28
27
29
## Documentation
28
30
[ Online documentation on Gitbook] ( https://icebob.gitbooks.io/vueformgenerator/content/ )
29
31
30
32
## Dependencies
31
- vue-form-generator use [ Moment.js ] ( http ://momentjs .com/) and [ lodash] ( https://lodash.com/ ) internally.
33
+ vue-form-generator use [ fecha ] ( https ://github .com/taylorhakes/fecha ) and [ lodash] ( https://lodash.com/ ) internally.
32
34
33
35
While built-in fields don't need external dependencies, optional fields may need other libraries.
34
36
These dependency fall in two camp: jQuery or Vanilla. You can find almost the same functionality in both flavor.
51
53
```
52
54
53
55
### Manual
54
- Download zip package and unpack and add the ` vue-form-generator .css` and ` vue-form-generator .js` file to your project from dist folder.
56
+ Download zip package and unpack and add the vfg .css and vfg .js file to your project from dist folder.
55
57
```
56
58
https://github.com/icebob/vue-form-generator/archive/master.zip
57
59
```
58
60
61
+ ### Core vs Full version
62
+
63
+ VueFormGenerator come in two version : ` core ` and ` full ` .
64
+ Core is a more minimal version with only half the fields.
65
+ Full is core + other fields.
66
+
67
+ * Full bundle: 75 kB (gzipped: 19 kB)
68
+ * Core bundle: 39 kB (gzipped: 11 kB)
69
+
70
+ If you don't know what to choose, don't worry, the full is the default version.
71
+ If you want the slim down version, here is the changes:
72
+
73
+ ``` js
74
+ // the "core" way
75
+ < script>
76
+ import VueFormGenerator from " vue-form-generator/dist/vfg-core.js" ;
77
+ import " vue-form-generator/dist/vfg-core.css" ;
78
+ < / script>
79
+ ```
80
+
59
81
## Usage
60
82
``` html
61
83
<template >
@@ -83,33 +105,37 @@ export default {
83
105
84
106
schema: {
85
107
fields: [{
86
- type: " text" ,
108
+ type: " input" ,
109
+ inputType: " text" ,
87
110
label: " ID (disabled text field)" ,
88
111
model: " id" ,
89
112
readonly: true ,
90
113
disabled: true
91
114
},{
92
- type: " text" ,
115
+ type: " input" ,
116
+ inputType: " text" ,
93
117
label: " Name" ,
94
118
model: " name" ,
95
119
placeholder: " Your name" ,
96
120
featured: true ,
97
121
required: true
98
122
},{
99
- type: " password" ,
123
+ type: " input" ,
124
+ inputType: " password" ,
100
125
label: " Password" ,
101
126
model: " password" ,
102
127
min: 6 ,
103
128
required: true ,
104
129
hint: " Minimum 6 characters" ,
105
- validator: validators .string
130
+ validator: VueFormGenerator . validators .string
106
131
},{
107
132
type: " select" ,
108
133
label: " skills" ,
109
134
model: " type" ,
110
135
values: [" Javascript" , " VueJS" , " CSS3" , " HTML5" ]
111
136
},{
112
- type: " email" ,
137
+ type: " input" ,
138
+ inputType: " email" ,
113
139
label: " E-mail" ,
114
140
model: " email" ,
115
141
placeholder: " User's e-mail address"
151
177
npm run ci
152
178
```
153
179
180
+ ## More fields * new*
181
+ VueFormGenerator support custom fields. If you decide to release your custom field into the wild, please open a new issue so we can add you to a list here! Please try to use this naming convention for your custom field : vfg-field-* Example :
182
+
183
+ - ` vfg-field-myfield `
184
+ - ` vfg-field-calendar `
185
+ - ` vfg-field-awesome-dropdown `
186
+
187
+ This way, it will be easier for everyone to find it. Thank you !
188
+
154
189
## Contribution
155
190
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.
156
191
0 commit comments