diff --git a/README.md b/README.md index d63ddd6..78a33a8 100644 --- a/README.md +++ b/README.md @@ -7,12 +7,13 @@ VueFormGenerator is a schema-based form generator component for [Vue.js](https:/ ## Demo [JSFiddle simple example](https://jsfiddle.net/zoul0813/d8excp36/) +[CodePen simple example](https://codepen.io/zoul0813/pen/OrNVNw) ## Features * multiple objects editing * core & full bundles -* 21 field types +* 21+ field types * grouping fields * built-in validators * Bootstrap friendly templates @@ -22,11 +23,11 @@ VueFormGenerator is a schema-based form generator component for [Vue.js](https:/ ## Documentation -[Link to documentation on Gitbook](https://icebob.gitbooks.io/vueformgenerator/content/) +[Link to documentation on Gitbook](https://vue-generators.gitbook.io/vue-generators/) ## More fields `*new*` -VueFormGenerator support custom fields. +VueFormGenerator supports custom fields. If you decide to release your custom field into the wild, please [open a new issue](https://github.com/vue-generators/vue-form-generator/issues) so we can add you to a list here! Please try to use this naming convention for your custom field : `vfg-field-*` Example : @@ -35,7 +36,7 @@ Example : * `vfg-field-calendar` * `vfg-field-awesome-dropdown` -This way, it will be easier for everyone to find it. Thank you ! +This way, it will be easier for everyone to find it. Thank you! ## License diff --git a/component.md b/component.md index 827e1f1..5e99c96 100644 --- a/component.md +++ b/component.md @@ -13,7 +13,7 @@ | [options](options.md) | `Object` | `{`<br/>`validateAfterLoad: false,`<br/>`validateAsync: false,`<br/>`validateAfterChanged: false,`<br/>` validationErrorClass: "error",`<br/>`validationSuccessClass: ""`<br/>`}` | Options for the VueFormComponent | | multiple | `Boolean` | `false` | If true, we only show `multi: true` fields | | isNewModel | `Boolean` | `false` | If true, we won't run validation after load | -| tag | `String` | "fieldset" | Change the main HTML element of VueFormGenerator | +| tag | `String` | "fieldset" | Change the main HTML element wrapper for Fields and Groups | diff --git a/fields/field_properties.md b/fields/field_properties.md index c401025..65c821b 100644 --- a/fields/field_properties.md +++ b/fields/field_properties.md @@ -15,7 +15,7 @@ | multi | `false` | `Boolean` | if `true`, it will visible only if `multiple` is `true` in component attributes | | default | _none_ | any | Default value of the field \(use when create a new model\) | | hint | _none_ | `String` | show this hint below the field | -| inputName | _none_ | `String` | set `name` attribute to `input` field. You can use it to generate normal HTML Forms and submit the field values to server-side. [Example](https://github.com/icebob/vue-form-generator/tree/master/examples/post-form) | +| inputName | _none_ | `String` | set `name` attribute to `input` field. You can use it to generate normal HTML Forms and submit the field values to server-side. [Example](https://github.com/vue-generators/vue-form-generator/tree/master/examples/post-form) | | help | _none_ | `String` | show this help if mouse hover the question icon before the caption of field. _You can use HTML elements too._ | | validator | _none_ | `Function` or `Array` | Validator for value. It can be an array of functions too. | | styleClasses | _none_ | `String` or `Array` | custom css style classes. It will be appended to the `.from-group` | diff --git a/fields/pikaday.md b/fields/pikaday.md index 14d6ddf..8a9dbdb 100644 --- a/fields/pikaday.md +++ b/fields/pikaday.md @@ -4,7 +4,7 @@ A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS > Please note, this field depend on the following library: - [Pikaday](https://github.com/dbushell/Pikaday) -- [Moment.js](http://momentjs.com/) (see [issue #59](https://github.com/icebob/vue-form-generator/issues/59)) +- [Moment.js](http://momentjs.com/) (see [issue #59](https://github.com/vue-generators/vue-form-generator/issues/59)) ## Special properties of field diff --git a/fields/text.md b/fields/text.md index b77c9f0..ac8a201 100644 --- a/fields/text.md +++ b/fields/text.md @@ -51,7 +51,7 @@ Property | Default | Accepted values | Description pattern: "^\\+[0-9]{2}-[237]0-[0-9]{3}-[0-9]{4}$", placeholder: "User's phone number", hint: "Format: +36-(20|30|70)-000-0000", - 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." + 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." validator: validators.regexp } ``` \ No newline at end of file diff --git a/groups.md b/groups.md index f83d359..4022a7b 100644 --- a/groups.md +++ b/groups.md @@ -39,4 +39,10 @@ would produce (simplified) HTML output something like this: <label>Age</label> <input type="number" /> </fieldset> +``` + +You can change the default `fieldset` tag by passing the `tag` property to the `<vue-form-genator />` component in your markup. + +```html +<vue-form-generator tag="div" :model="model" :schema="schema" :options="options"></vue-form-generator> ``` \ No newline at end of file diff --git a/installation.md b/installation.md index b4b14bc..b5d13af 100644 --- a/installation.md +++ b/installation.md @@ -10,23 +10,23 @@ $ npm install vue-form-generator ### Manual -Download zip package and unpack and add the `vfg.css` and `vfg.js` file to your project from dist folder. +Download zip package, unpack and add the `vfg.css` and `vfg.js` file to your project from `/dist` folder. ``` -https://github.com/icebob/vue-form-generator/archive/master.zip +https://github.com/vue-generators/vue-form-generator/releases/latest ``` ### Core vs Full version -VueFormGenerator come in two version : core and full. -Core is a more minimal version with only half the fields. +VueFormGenerator comes in two versions: core and full. +Core is a minimal version with only half the fields. Full is core + other fields. -* Full bundle: 75 kB (gzipped: 19 kB) -* Core bundle: 39 kB (gzipped: 11 kB) +* Full bundle: 169 kB (gzipped: 50 kB) +* Core bundle: 143 kB (gzipped: 45 kB) -If you don't know what to choose, don't worry, the full is the default version. -If you want the slim down version, here is the changes: +If you don't know what to choose, don't worry, full is the default version. +If you want the slimmed down version, here are the changes: ```js // the "core" way @@ -38,10 +38,10 @@ If you want the slim down version, here is the changes: ### Dependencies -VueFormGenerator use [fecha](https://github.com/taylorhakes/fecha) and [lodash](https://lodash.com/) internally. +VueFormGenerator uses [fecha](https://github.com/taylorhakes/fecha) and [lodash](https://lodash.com/) internally. -While core fields don't need external dependencies, optional fields may need other libraries. -These dependency fall in two camp: jQuery or Vanilla. You can find almost the same functionality in both flavor. +While core fields don't need external dependencies, optional fields in the full package may need additional libraries. +These dependencies fall into two camps: jQuery or Vanilla. You can find almost the same functionality in both flavors. That way, it's your choice to depend on jQuery or not. | Field type | jQuery | Vanilla |