Skip to content

Commit a3d8e7e

Browse files
committed
update readme #123
1 parent e87756c commit a3d8e7e

File tree

1 file changed

+43
-8
lines changed

1 file changed

+43
-8
lines changed

README.md

+43-8
Original file line numberDiff line numberDiff line change
@@ -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

3335
While built-in fields don't need external dependencies, optional fields may need other libraries.
3436
These dependency fall in two camp: jQuery or Vanilla. You can find almost the same functionality in both flavor.
@@ -51,11 +53,31 @@ $ npm install [email protected]
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
```
5658
https://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"
@@ -151,6 +177,15 @@ or
151177
npm 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
155190
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.
156191

0 commit comments

Comments
 (0)