Skip to content

Feature/minor doc updates #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Dec 14, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 :
Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion component.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |



2 changes: 1 addition & 1 deletion fields/field_properties.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
2 changes: 1 addition & 1 deletion fields/pikaday.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion fields/text.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
```
6 changes: 6 additions & 0 deletions groups.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
22 changes: 11 additions & 11 deletions installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 |
Expand Down