Skip to content

Commit 966254b

Browse files
committed
imported legacy documentation from https://icebob.gitbooks.io/vueformgenerator/
1 parent 5fcd994 commit 966254b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+2773
-0
lines changed

README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# VueFormGenerator
2+
3+
VueFormGenerator is a schema-based form generator component for [Vue.js](https://github.com/vuejs/vue)
4+
5+
![Example screenshot](assets/vfg-example1.png)
6+
7+
## Demo
8+
9+
[JSFiddle simple example](https://jsfiddle.net/zoul0813/d8excp36/)
10+
11+
## Features
12+
13+
* multiple objects editing
14+
* core & full bundles
15+
* 21 field types
16+
* grouping fields
17+
* built-in validators
18+
* Bootstrap friendly templates
19+
* customizable styles
20+
* extendable with custom fields
21+
* ...etc
22+
23+
## Documentation
24+
25+
[Link to documentation on Gitbook](https://icebob.gitbooks.io/vueformgenerator/content/)
26+
27+
## More fields `*new*`
28+
29+
VueFormGenerator support custom fields.
30+
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!
31+
Please try to use this naming convention for your custom field : `vfg-field-*`
32+
Example :
33+
34+
* `vfg-field-myfield`
35+
* `vfg-field-calendar`
36+
* `vfg-field-awesome-dropdown`
37+
38+
This way, it will be easier for everyone to find it. Thank you !
39+
40+
## License
41+
42+
vue-form-generator is available under the [MIT license](https://tldrlegal.com/license/mit-license).
43+
44+
## Contact
45+
46+
Copyright \(C\) 2016 Icebob
47+
48+
[![@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)
49+

SUMMARY.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Summary
2+
3+
* [Getting started](README.md)
4+
* [Installation](installation.md)
5+
* [Usage](usage.md)
6+
* [Component](component.md)
7+
* [Schema](schema.md)
8+
* [Fields](fields/README.md)
9+
* [Field properties](fields/field_properties.md)
10+
* [Inside buttons](fields/inside_buttons.md)
11+
* [Core fields](fields/core-fields.md)
12+
* [checkbox](fields/checkbox.md)
13+
* [checklist](fields/checklist.md)
14+
* [input](fields/input.md)
15+
* [label](fields/label.md)
16+
* [radios](fields/radios.md)
17+
* [select](fields/select.md)
18+
* [submit](fields/submit.md)
19+
* [textArea](fields/textarea.md)
20+
* [Optional fields](fields/optional_fields.md)
21+
* [cleave](fields/cleave.md)
22+
* [dateTimePicker](fields/datetime.md)
23+
* [googleAddress](fields/googleaddress.md)
24+
* [image](fields/image.md)
25+
* [masked](fields/masked.md)
26+
* [noUiSlider](fields/nouislider.md)
27+
* [pikaday](fields/pikaday.md)
28+
* [selectEx](fields/selectex.md)
29+
* [rangeSlider](fields/slider.md)
30+
* [spectrum](fields/spectrum.md)
31+
* [staticMap](fields/staticmap.md)
32+
* [switch](fields/switch.md)
33+
* [vueMultiSelect](fields/vuemultiselect.md)
34+
* [Custom fields](fields/custom_fields.md)
35+
* [Groups](groups.md)
36+
* [Validation](validation/README.md)
37+
* [Built in Validators](validation/built-in-validators.md)
38+
* [Custom Validators](validation/custom-validators.md)
39+
* [Handling Validation Events](validation/validation-events.md)
40+
* [Model](model.md)
41+
* [Options](options.md)
42+

assets/README.md

Whitespace-only changes.

assets/vfg-buttons.png

2.4 KB
Loading
10.7 KB
Loading

assets/vfg-example1.png

18 KB
Loading

book.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

component.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Component
2+
3+
```html
4+
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
5+
```
6+
7+
## Properties
8+
9+
| Property | Type | Default | Description |
10+
| :--- | :--- | :--- | :--- |
11+
| [schema](schema.md) | `Object` | `none` | The schema object with fields |
12+
| [model](model.md) | `Object` | `none` | The model/target JSON object |
13+
| [options](options.md) | `Object` | `{`<br/>`validateAfterLoad: false,`<br/>`validateAsync: false,`<br/>`validateAfterChanged: false,`<br/>` validationErrorClass: "error",`<br/>`validationSuccessClass: ""`<br/>`}` | Options for the VueFormComponent |
14+
| multiple | `Boolean` | `false` | If true, we only show `multi: true` fields |
15+
| isNewModel | `Boolean` | `false` | If true, we won't run validation after load |
16+
| tag | `String` | "fieldset" | Change the main HTML element of VueFormGenerator |
17+
18+
19+

fields/README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Fields
2+
3+
A field in the schema defines an input element to a value of model. For example, if you want to edit the `model.selections` value with a select field, you have to create a field with `select` type, what looks like this:
4+
5+
```js
6+
{
7+
type: "select",
8+
label: "Selections",
9+
model: "selections"
10+
},
11+
```
12+
13+
Each field has its own options, so be sure to check out their documentations.
14+
For example, input field need an `inputType` to be specified as well.
15+
16+
```js
17+
{
18+
type: "input",
19+
inputType: "text",
20+
label: "Name",
21+
model: "name"
22+
},
23+
```
24+
25+
## Available fields
26+
27+
### [Core fields](/fields/core-fields.md)
28+
29+
These fields are available in the core version of VueFormGenerator.
30+
31+
* [`checkbox`](checkbox.md) - Checkbox for boolean values
32+
* [`checklist`](checklist.md) - Checkbox list to select multiple values
33+
* [`input`](input.md) - Common input field `NEW!`
34+
* [`label`](label.md) - Static text \(e.g. timestamp, creation time...etc\)
35+
* [`radios`](radios.md) - Radio buttons to select `NEW!`
36+
* [`select`](select.md) - Select list
37+
* [`submit`](submit.md) - This is a simple submit button
38+
* [`textArea`](textarea.md) - Text area field
39+
40+
### [Optional fields](/fields/optional_fields.md)
41+
42+
These fields are available in the full version of VueFormGenerator. Some of these also have external dependency.
43+
44+
* [`cleave`](cleave.md) - Format input text content when you are typing
45+
* [`dateTimePicker`](datetime.md) - datetime picker with bootstrap-datetimepicker component
46+
* [`googleAddress`](googleaddress.md) - Format input text content when you are typing
47+
* [`image`](image.md) - Image select field \(URL or upload in base64 string\)
48+
* [`masked`](masked.md) - Masked text input field with maskedinput component
49+
* [`noUiSlider`](nouislider.md) - Lightweight JavaScript range slider
50+
* [`pikaday`](pikaday.md) - A refreshing JavaScript Datepicker
51+
* [`selectEx`](selectex.md) - select list with the bootstrap-select component
52+
* [`slider`](slider.md) - pretty range slider with ion.rangeSlider component
53+
* [`spectrum`](spectrum.md) - Color picker with "The No Hassle" Spectrum jQuery Colorpicker component
54+
* [`staticMap`](staticmap.md) - Display a static map from Google Maps.
55+
* [`switch`](switch.md) - Switch field \(toggle two values \(on/off, yes/no, active/inactive\)
56+
* [`vueMultiSelect`](vuemultiselect.md) - Probably the most complete selecting solution for Vue.js
57+
58+
### [Custom fields](custom_fields.md)
59+
60+
You can create custom fields too. [Check here how you can do it](custom_fields.md).

fields/checkbox.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# checkbox field
2+
This is a standard HTML checkbox input field for boolean values.
3+
4+
## Special properties of field
5+
Property | Default | Accepted values | Description
6+
--------------- | -------- | --------------------- | -----------
7+
`autocomplete` | _none_ | [see doc](https://html.spec.whatwg.org/multipage/forms.html#autofill) | Indicates whether the value of the control can be automatically completed by the browser.
8+
9+
## Usage
10+
11+
```js
12+
{
13+
type: "checkbox",
14+
label: "Status",
15+
model: "status",
16+
default: true
17+
}
18+
```

0 commit comments

Comments
 (0)