1 | # vue-form-generator [![NPM version](https://img.shields.io/npm/v/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator) ![VueJS v2.x compatible](https://img.shields.io/badge/vue%202.x-compatible-green.svg)
|
2 |
|
3 | A schema-based form generator component for Vue.js.
|
4 |
|
5 | [![Codacy Badge](https://api.codacy.com/project/badge/Grade/d27be05a35bf459b9292b8172e314a08)](https://www.codacy.com/app/mereg-norbert/vue-form-generator_2?utm_source=github.com&utm_medium=referral&utm_content=vue-generators/vue-form-generator&utm_campaign=Badge_Grade)
|
6 | [![Build Status](https://travis-ci.org/vue-generators/vue-form-generator.svg?branch=master)](https://travis-ci.org/vue-generators/vue-form-generator)
|
7 | [![Coverage Status](https://coveralls.io/repos/github/vue-generators/vue-form-generator/badge.svg?branch=master)](https://coveralls.io/github/vue-generators/vue-form-generator?branch=master)
|
8 | [![NPMS.io score](https://badges.npms.io/vue-form-generator.svg)]()
|
9 | [![Package Quality](http://npm.packagequality.com/shield/vue-form-generator.svg)](http://packagequality.com/#?package=vue-form-generator)
|
10 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fvue-generators%2Fvue-form-generator.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fvue-generators%2Fvue-form-generator?ref=badge_shield)
|
11 |
|
12 | [![Dependency Status](https://david-dm.org/vue-generators/vue-form-generator.svg)](https://david-dm.org/vue-generators/vue-form-generator)
|
13 | [![devDependency Status](https://david-dm.org/vue-generators/vue-form-generator/dev-status.svg)](https://david-dm.org/vue-generators/vue-form-generator#info=devDependencies)
|
14 | [![Downloads](https://img.shields.io/npm/dm/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator)
|
15 |
|
16 | ## Demo
|
17 |
|
18 | [JSFiddle simple example](https://jsfiddle.net/zoul0813/d8excp36/)
|
19 |
|
20 | [CodePen simple example](https://codepen.io/zoul0813/pen/OrNVNw)
|
21 |
|
22 | [![Screenshot](https://github.com/vue-generators/vue-form-generator-docs/raw/master/assets/vfg-example1.png)](https://jsfiddle.net/zoul0813/d8excp36/)
|
23 |
|
24 | ## Features
|
25 |
|
26 | * reactive forms based on schemas
|
27 | * multiple object editing
|
28 | * 21 field types
|
29 | * built-in validators
|
30 | * core & full bundles (11kb and 19kb gzipped)
|
31 | * Bootstrap friendly templates
|
32 | * customizable styles
|
33 | * can be extended easily with custom fields
|
34 | * ...etc
|
35 |
|
36 | ## Documentation
|
37 |
|
38 | [Online documentation on Gitbook](https://vue-generators.gitbook.io/vue-generators/)
|
39 |
|
40 | ## Dependencies
|
41 |
|
42 | vue-form-generator uses [fecha](https://github.com/taylorhakes/fecha) and [lodash](https://lodash.com/) internally.
|
43 |
|
44 | While built-in fields don't need external dependencies, optional fields may need other libraries.
|
45 | These dependencies fall into two camps: jQuery or Vanilla. You can find almost the same functionality in both flavors.
|
46 | In the end, it's your choice to depend on jQuery or not.
|
47 |
|
48 | You can find details about dependencies in the official [documentation](https://vue-generators.gitbook.io/vue-generators/) under each specific component.
|
49 |
|
50 | ## Installation
|
51 |
|
52 | ### NPM
|
53 |
|
54 | You can install it via [NPM](http://npmjs.org/) or [yarn](https://yarnpkg.com/).
|
55 |
|
56 | #### Latest version for Vue 2.x
|
57 |
|
58 | ```
|
59 | $ npm install vue-form-generator
|
60 | ```
|
61 |
|
62 | #### Legacy version for Vue 1.0.x
|
63 |
|
64 | ```
|
65 | $ npm install vue-form-generator@0.6.1
|
66 | ```
|
67 |
|
68 | ### Manual
|
69 |
|
70 | Download zip package and unpack and add the vfg.css and vfg.js file to your project from dist folder.
|
71 |
|
72 | ```
|
73 | https://github.com/vue-generators/vue-form-generator/archive/master.zip
|
74 | ```
|
75 |
|
76 | ### Core vs Full version
|
77 |
|
78 | VueFormGenerator come in two version : `core` and `full`.
|
79 | Core is a more minimal version with only half the fields.
|
80 | Full is core + other fields.
|
81 |
|
82 | * Full bundle: 75 kB (gzipped: 19 kB)
|
83 | * Core bundle: 39 kB (gzipped: 11 kB)
|
84 |
|
85 | If you don't know what to choose, don't worry, the full is the default version.
|
86 | If you want the slim down version, here is the changes:
|
87 |
|
88 | ```js
|
89 | // the "full" way
|
90 | <script>
|
91 | import VueFormGenerator from "vue-form-generator";
|
92 | import "vue-form-generator/dist/vfg.css"; // optional full css additions
|
93 | </script>
|
94 |
|
95 | // the "core" way
|
96 | <script>
|
97 | import VueFormGenerator from "vue-form-generator/dist/vfg-core.js";
|
98 | import "vue-form-generator/dist/vfg-core.css"; // optional core css additions
|
99 | </script>
|
100 | ```
|
101 |
|
102 | ## Usage
|
103 |
|
104 | ```html
|
105 | <template>
|
106 | <div class="panel-body">
|
107 | <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
|
108 | </div>
|
109 | </template>
|
110 |
|
111 | <script>
|
112 | import Vue from 'vue'
|
113 | import VueFormGenerator from 'vue-form-generator'
|
114 | import 'vue-form-generator/dist/vfg.css'
|
115 |
|
116 | Vue.use(VueFormGenerator)
|
117 |
|
118 | export default {
|
119 | data () {
|
120 | return {
|
121 | model: {
|
122 | id: 1,
|
123 | name: 'John Doe',
|
124 | password: 'J0hnD03!x4',
|
125 | skills: ['Javascript', 'VueJS'],
|
126 | email: 'john.doe@gmail.com',
|
127 | status: true
|
128 | },
|
129 | schema: {
|
130 | fields: [
|
131 | {
|
132 | type: 'input',
|
133 | inputType: 'text',
|
134 | label: 'ID (disabled text field)',
|
135 | model: 'id',
|
136 | readonly: true,
|
137 | disabled: true
|
138 | },
|
139 | {
|
140 | type: 'input',
|
141 | inputType: 'text',
|
142 | label: 'Name',
|
143 | model: 'name',
|
144 | placeholder: 'Your name',
|
145 | featured: true,
|
146 | required: true
|
147 | },
|
148 | {
|
149 | type: 'input',
|
150 | inputType: 'password',
|
151 | label: 'Password',
|
152 | model: 'password',
|
153 | min: 6,
|
154 | required: true,
|
155 | hint: 'Minimum 6 characters',
|
156 | validator: VueFormGenerator.validators.string
|
157 | },
|
158 | {
|
159 | type: 'select',
|
160 | label: 'Skills',
|
161 | model: 'skills',
|
162 | values: ['Javascript', 'VueJS', 'CSS3', 'HTML5']
|
163 | },
|
164 | {
|
165 | type: 'input',
|
166 | inputType: 'email',
|
167 | label: 'E-mail',
|
168 | model: 'email',
|
169 | placeholder: 'User\'s e-mail address'
|
170 | },
|
171 | {
|
172 | type: 'checkbox',
|
173 | label: 'Status',
|
174 | model: 'status',
|
175 | default: true
|
176 | }
|
177 | ]
|
178 | },
|
179 | formOptions: {
|
180 | validateAfterLoad: true,
|
181 | validateAfterChanged: true,
|
182 | validateAsync: true
|
183 | }
|
184 | }
|
185 | }
|
186 | }
|
187 | </script>
|
188 |
|
189 | ```
|
190 |
|
191 | Usage in local components
|
192 |
|
193 | ```js
|
194 | import VueFormGenerator from "vue-form-generator";
|
195 |
|
196 | //component javascript
|
197 | export default {
|
198 | components: {
|
199 | "vue-form-generator": VueFormGenerator.component
|
200 | }
|
201 | };
|
202 | ```
|
203 |
|
204 | ## Development
|
205 |
|
206 | This command will start a `webpack-dev-server` with content of `dev` folder.
|
207 |
|
208 | ```bash
|
209 | npm run dev
|
210 | ```
|
211 |
|
212 | ## Build
|
213 |
|
214 | This command will build a distributable version in the `dist` directory.
|
215 |
|
216 | ```bash
|
217 | npm run build
|
218 | ```
|
219 |
|
220 | ## Test
|
221 |
|
222 | ```bash
|
223 | npm test
|
224 | ```
|
225 |
|
226 | or
|
227 |
|
228 | ```bash
|
229 | npm run ci
|
230 | ```
|
231 |
|
232 | ## More fields _new_
|
233 |
|
234 | 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 :
|
235 |
|
236 | * `vfg-field-myfield`
|
237 | * `vfg-field-calendar`
|
238 | * `vfg-field-awesome-dropdown`
|
239 |
|
240 | This way, it will be easier for everyone to find it. Thank you !
|
241 |
|
242 | ### Public Custom Fields
|
243 |
|
244 | * [vue-tel-input](https://github.com/EducationLink/vue-tel-input) - International Telephone Input Boilerplate with Vue (integrated with VueFormGenerator).
|
245 | * [vfg-field-sourcecode](https://github.com/gwenaelp/vfg-field-sourcecode) - A source code field for vue-form-generator
|
246 | * [vfg-field-array](https://github.com/gwenaelp/vfg-field-array) - A vue-form-generator field to handle arrays of items of any type.
|
247 | * [vfg-field-object](https://github.com/gwenaelp/vfg-field-object) - A vue-form-generator field to handle objects, with or without schemas.
|
248 | * [vfg-field-matrix](https://github.com/shwld/vfg-field-matrix) - A matrix field for vue-form-generator.
|
249 |
|
250 | ## Contribution
|
251 |
|
252 | 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.
|
253 |
|
254 | ## License
|
255 |
|
256 | vue-form-generator is available under the [MIT license](https://tldrlegal.com/license/mit-license).
|
257 |
|
258 | ## Contact
|
259 |
|
260 | Copyright (C) 2017 Icebob
|
261 |
|
262 | [![@icebob](https://img.shields.io/badge/github-icebob-green.svg)](https://github.com/icebob) [![@icebob](https://img.shields.io/badge/twitter-Icebobcsi-blue.svg)](https://twitter.com/Icebobcsi)
|