@@ -18,17 +18,19 @@ A schema-based form generator component for Vue.js.
1818
1919## Features
2020- multiple objects editing
21- - 27 field types
21+ - core & full bundles
22+ - 21 field types
2223- built-in validators
2324- Bootstrap friendly templates
2425- customizable styles
26+ - extendable with custom fields
2527- ...etc
2628
2729## Documentation
2830[ Online documentation on Gitbook] ( https://icebob.gitbooks.io/vueformgenerator/content/ )
2931
3032## 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.
3234
3335While built-in fields don't need external dependencies, optional fields may need other libraries.
3436These dependency fall in two camp: jQuery or Vanilla. You can find almost the same functionality in both flavor.
@@ -51,11 +53,31 @@ $ npm install vue-form-generator@0.6.1
5153```
5254
5355### 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.
5557```
5658https://github.com/icebob/vue-form-generator/archive/master.zip
5759```
5860
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+
5981## Usage
6082``` html
6183<template >
@@ -83,33 +105,37 @@ export default {
83105
84106 schema: {
85107 fields: [{
86- type: " text" ,
108+ type: " input" ,
109+ inputType: " text" ,
87110 label: " ID (disabled text field)" ,
88111 model: " id" ,
89112 readonly: true ,
90113 disabled: true
91114 },{
92- type: " text" ,
115+ type: " input" ,
116+ inputType: " text" ,
93117 label: " Name" ,
94118 model: " name" ,
95119 placeholder: " Your name" ,
96120 featured: true ,
97121 required: true
98122 },{
99- type: " password" ,
123+ type: " input" ,
124+ inputType: " password" ,
100125 label: " Password" ,
101126 model: " password" ,
102127 min: 6 ,
103128 required: true ,
104129 hint: " Minimum 6 characters" ,
105- validator: validators .string
130+ validator: VueFormGenerator . validators .string
106131 },{
107132 type: " select" ,
108133 label: " skills" ,
109134 model: " type" ,
110135 values: [" Javascript" , " VueJS" , " CSS3" , " HTML5" ]
111136 },{
112- type: " email" ,
137+ type: " input" ,
138+ inputType: " email" ,
113139 label: " E-mail" ,
114140 model: " email" ,
115141 placeholder: " User's e-mail address"
151177npm run ci
152178```
153179
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+
154189## Contribution
155190Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.
156191
0 commit comments