You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[Online documentation on Gitbook](https://icebob.gitbooks.io/vueformgenerator/content/)
33
37
34
38
## Dependencies
39
+
35
40
vue-form-generator uses [fecha](https://github.com/taylorhakes/fecha) and [lodash](https://lodash.com/) internally.
36
41
37
-
While built-in fields don't need external dependencies, optional fields may need other libraries.
42
+
While built-in fields don't need external dependencies, optional fields may need other libraries.
38
43
These dependencies fall into two camps: jQuery or Vanilla. You can find almost the same functionality in both flavors.
39
44
In the end, it's your choice to depend on jQuery or not.
40
45
41
46
You can find details about dependencies in the official [documentation](https://icebob.gitbooks.io/vueformgenerator/content/) under each specific component.
42
47
43
48
## Installation
49
+
44
50
### NPM
51
+
45
52
You can install it via [NPM](http://npmjs.org/) or [yarn](https://yarnpkg.com/).
46
53
47
54
#### Latest version for Vue 2.x
55
+
48
56
```
49
57
$ npm install vue-form-generator
50
58
```
51
59
52
60
#### Legacy version for Vue 1.0.x
61
+
53
62
```
54
63
$ npm install vue-form-generator@0.6.1
55
64
```
56
65
57
66
### Manual
67
+
58
68
Download zip package and unpack and add the vfg.css and vfg.js file to your project from dist folder.
@@ -66,10 +77,10 @@ VueFormGenerator come in two version : `core` and `full`.
66
77
Core is a more minimal version with only half the fields.
67
78
Full is core + other fields.
68
79
69
-
* Full bundle: 75 kB (gzipped: 19 kB)
70
-
* Core bundle: 39 kB (gzipped: 11 kB)
80
+
*Full bundle: 75 kB (gzipped: 19 kB)
81
+
*Core bundle: 39 kB (gzipped: 11 kB)
71
82
72
-
If you don't know what to choose, don't worry, the full is the default version.
83
+
If you don't know what to choose, don't worry, the full is the default version.
73
84
If you want the slim down version, here is the changes:
74
85
75
86
```js
@@ -87,6 +98,7 @@ If you want the slim down version, here is the changes:
87
98
```
88
99
89
100
## Usage
101
+
90
102
```html
91
103
<template>
92
104
<divclass="panel-body">
@@ -101,23 +113,23 @@ Vue.use(VueFormGenerator);
101
113
102
114
exportdefault {
103
115
data: {
104
-
105
-
model: {
116
+
117
+
model: {
106
118
id:1,
107
119
name:"John Doe",
108
120
password:"J0hnD03!x4",
109
121
skills: ["Javascript", "VueJS"],
110
122
email:"john.doe@gmail.com",
111
123
status:true
112
124
},
113
-
125
+
114
126
schema: {
115
127
fields: [{
116
128
type:"input",
117
129
inputType:"text",
118
130
label:"ID (disabled text field)",
119
131
model:"id",
120
-
readonly:true,
132
+
readonly:true,
121
133
disabled:true
122
134
},{
123
135
type:"input",
@@ -139,7 +151,7 @@ export default {
139
151
},{
140
152
type:"select",
141
153
label:"Skills",
142
-
model:"skills",
154
+
model:"skills",
143
155
values: ["Javascript", "VueJS", "CSS3", "HTML5"]
144
156
},{
145
157
type:"input",
@@ -165,56 +177,68 @@ export default {
165
177
```
166
178
167
179
Usage in local components
180
+
168
181
```js
169
182
importVueFormGeneratorfrom"vue-form-generator";
170
183
171
184
//component javascript
172
-
exportdefault{
173
-
components:{
174
-
"vue-form-generator":VueFormGenerator.component
175
-
}
176
-
}
185
+
exportdefault{
186
+
components:{
187
+
"vue-form-generator":VueFormGenerator.component
188
+
}
189
+
};
177
190
```
191
+
178
192
## Development
193
+
179
194
This command will start a `webpack-dev-server` with content of `dev` folder.
195
+
180
196
```bash
181
197
npm run dev
182
198
```
183
199
184
200
## Build
201
+
185
202
This command will build a distributable version in the `dist` directory.
203
+
186
204
```bash
187
205
npm run build
188
206
```
189
207
190
208
## Test
209
+
191
210
```bash
192
211
npm test
193
212
```
194
-
or
213
+
214
+
or
215
+
195
216
```bash
196
217
npm run ci
197
218
```
198
219
199
-
## More fields *new*
200
-
VueFormGenerator supports 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 :
220
+
## More fields _new_
201
221
202
-
-`vfg-field-myfield`
203
-
-`vfg-field-calendar`
204
-
-`vfg-field-awesome-dropdown`
222
+
VueFormGenerator supports 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 :
223
+
224
+
*`vfg-field-myfield`
225
+
*`vfg-field-calendar`
226
+
*`vfg-field-awesome-dropdown`
205
227
206
228
This way, it will be easier for everyone to find it. Thank you !
207
229
208
230
### Public Custom Fields
209
231
210
-
-[vue-tel-input](https://github.com/EducationLink/vue-tel-input) - International Telephone Input Boilerplate with Vue (integrated with VueFormGenerator).
211
-
-[vfg-field-sourcecode](https://github.com/gwenaelp/vfg-field-sourcecode) - A source code field for vue-form-generator
212
-
-[vfg-field-object](https://github.com/gwenaelp/vfg-field-object) - A vue-form-generator field to handle objects, with or without schemas.
232
+
*[vue-tel-input](https://github.com/EducationLink/vue-tel-input) - International Telephone Input Boilerplate with Vue (integrated with VueFormGenerator).
233
+
*[vfg-field-sourcecode](https://github.com/gwenaelp/vfg-field-sourcecode) - A source code field for vue-form-generator
234
+
*[vfg-field-object](https://github.com/gwenaelp/vfg-field-object) - A vue-form-generator field to handle objects, with or without schemas.
213
235
214
236
## Contribution
237
+
215
238
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.
216
239
217
240
## License
241
+
218
242
vue-form-generator is available under the [MIT license](https://tldrlegal.com/license/mit-license).
// help: "You can use any <b>formatted</b> texts. Or place a <a target='_blank' href='https://github.com/icebob/vue-form-generator'>link</a> to another site.",
994
+
// help: "You can use any <b>formatted</b> texts. Or place a <a target='_blank' href='https://github.com/vue-generators/vue-form-generator/'>link</a> to another site.",
0 commit comments