imported legacy documentation from https://icebob.gitbooks.io/vueformgenerator/

Author: zoul0813

README.md

@@ -0,0 +1,49 @@
+# VueFormGenerator
+
+VueFormGenerator is a schema-based form generator component for [Vue.js](https://github.com/vuejs/vue)
+
+![Example screenshot](assets/vfg-example1.png)
+
+## Demo
+
+[JSFiddle simple example](https://jsfiddle.net/zoul0813/d8excp36/)
+
+## Features
+
+* multiple objects editing
+* core & full bundles
+* 21 field types
+* grouping fields
+* built-in validators
+* Bootstrap friendly templates
+* customizable styles
+* extendable with custom fields
+* ...etc
+
+## Documentation
+
+[Link to documentation on Gitbook](https://icebob.gitbooks.io/vueformgenerator/content/)
+
+## More fields `*new*`
+
+VueFormGenerator support 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 :
+
+* `vfg-field-myfield`
+* `vfg-field-calendar`
+* `vfg-field-awesome-dropdown`
+
+This way, it will be easier for everyone to find it. Thank you !
+
+## License
+
+vue-form-generator is available under the [MIT license](https://tldrlegal.com/license/mit-license).
+
+## Contact
+
+Copyright \(C\) 2016 Icebob
+
+[![@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)
+

SUMMARY.md

@@ -0,0 +1,42 @@
+# Summary
+
+* [Getting started](README.md)
+  * [Installation](installation.md)
+  * [Usage](usage.md)
+* [Component](component.md)
+* [Schema](schema.md)
+* [Fields](fields/README.md)
+  * [Field properties](fields/field_properties.md)
+    * [Inside buttons](fields/inside_buttons.md)
+  * [Core fields](fields/core-fields.md)
+    * [checkbox](fields/checkbox.md)
+    * [checklist](fields/checklist.md)
+    * [input](fields/input.md)
+    * [label](fields/label.md)
+    * [radios](fields/radios.md)
+    * [select](fields/select.md)
+    * [submit](fields/submit.md)
+    * [textArea](fields/textarea.md)
+  * [Optional fields](fields/optional_fields.md)
+    * [cleave](fields/cleave.md)
+    * [dateTimePicker](fields/datetime.md)
+    * [googleAddress](fields/googleaddress.md)
+    * [image](fields/image.md)
+    * [masked](fields/masked.md)
+    * [noUiSlider](fields/nouislider.md)
+    * [pikaday](fields/pikaday.md)
+    * [selectEx](fields/selectex.md)
+    * [rangeSlider](fields/slider.md)
+    * [spectrum](fields/spectrum.md)
+    * [staticMap](fields/staticmap.md)
+    * [switch](fields/switch.md)
+    * [vueMultiSelect](fields/vuemultiselect.md)
+  * [Custom fields](fields/custom_fields.md)
+* [Groups](groups.md)
+* [Validation](validation/README.md)
+  * [Built in Validators](validation/built-in-validators.md)
+  * [Custom Validators](validation/custom-validators.md)
+  * [Handling Validation Events](validation/validation-events.md)
+* [Model](model.md)
+* [Options](options.md)
+

assets/README.md

@@ -0,0 +1 @@
+{}

assets/vfg-buttons.png

@@ -0,0 +1,19 @@
+# Component
+
+```html
+<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| [schema](schema.md) | `Object` | `none` | The schema object with fields |
+| [model](model.md) | `Object` | `none` | The model/target JSON object |
+    | [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 |
+
+
+

assets/vfg-custom-validator-messages.png

@@ -0,0 +1,60 @@
+# Fields
+
+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:
+
+```js
+{
+    type: "select",
+    label: "Selections",
+    model: "selections"
+},
+```
+
+Each field has its own options, so be sure to check out their documentations.  
+For example, input field need an `inputType` to be specified as well.
+
+```js
+{
+    type: "input",
+    inputType: "text",
+    label: "Name",
+    model: "name"
+},
+```
+
+## Available fields
+
+### [Core fields](/fields/core-fields.md)
+
+These fields are available in the core version of VueFormGenerator.
+
+* [`checkbox`](checkbox.md) - Checkbox for boolean values
+* [`checklist`](checklist.md) - Checkbox list to select multiple values
+* [`input`](input.md) - Common input field `NEW!`
+* [`label`](label.md) - Static text \(e.g. timestamp, creation time...etc\)
+* [`radios`](radios.md) - Radio buttons to select `NEW!`
+* [`select`](select.md) - Select list
+* [`submit`](submit.md) - This is a simple submit button
+* [`textArea`](textarea.md) - Text area field
+
+### [Optional fields](/fields/optional_fields.md)
+
+These fields are available in the full version of VueFormGenerator. Some of these also have external dependency.
+
+* [`cleave`](cleave.md) - Format input text content when you are typing
+* [`dateTimePicker`](datetime.md) - datetime picker with bootstrap-datetimepicker component
+* [`googleAddress`](googleaddress.md) - Format input text content when you are typing
+* [`image`](image.md) - Image select field \(URL or upload in base64 string\)
+* [`masked`](masked.md) - Masked text input field with maskedinput component
+* [`noUiSlider`](nouislider.md) - Lightweight JavaScript range slider
+* [`pikaday`](pikaday.md) - A refreshing JavaScript Datepicker
+* [`selectEx`](selectex.md) - select list with the bootstrap-select component
+* [`slider`](slider.md) - pretty range slider with ion.rangeSlider component
+* [`spectrum`](spectrum.md) - Color picker with "The No Hassle" Spectrum jQuery Colorpicker component
+* [`staticMap`](staticmap.md) - Display a static map from Google Maps.
+* [`switch`](switch.md) - Switch field \(toggle two values \(on/off, yes/no, active/inactive\)
+* [`vueMultiSelect`](vuemultiselect.md) - Probably the most complete selecting solution for Vue.js
+
+### [Custom fields](custom_fields.md)
+
+You can create custom fields too. [Check here how you can do it](custom_fields.md).

assets/vfg-example1.png

@@ -0,0 +1,18 @@
+# checkbox field
+This is a standard HTML checkbox input field for boolean values.
+
+## Special properties of field
+Property        | Default  | Accepted values       | Description
+--------------- | -------- | --------------------- | -----------
+`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.
+
+## Usage
+
+```js
+{
+	type: "checkbox",
+	label: "Status",
+	model: "status",
+    default: true
+}
+```

book.json

@@ -0,0 +1,94 @@
+# Checklist field
+This is a checkbox list for multiple selection. The value will be an `Array`.
+
+## Special properties of field
+
+Property   | Default  | Accepted values       | Description
+---------- | -------- | --------------------- | -----------
+`listBox`  | `false`  | `Boolean`             | If `true`, render the items as a listBox. If `false`, render as a comboBox.
+`values`   | _none_   | `Array` or `Function` | List of items. It can be an array with items, or a `Function`, what is resulted an array. The item can be a `String`, `Boolean`, `Number` or an `Object` (with an `value` and a `name` properties). You can change `value` and `name` \(under `checklistOptions`\) to select any properties of that object as value or name. 
+| `checklistOptions` | {} | `Object` | Settings to checklist component. See details below. |
+
+### `checklistOptions`
+
+| Property | Default | Accepted values | Description |
+| --- | --- | --- | --- |
+| `value` | _none_ | `String` | Used to select any properties from object in `values` to use as actual value to save in model. |
+| `name` | _none_ | `String` | Used to select any properties from object in `name` to use as display in the list |
+
+
+## Usage
+#### Listbox checklist field with array of strings:
+
+```js
+{
+	type: "checklist",
+	label: "Skills",
+	model: "skills",
+    listBox: true,
+    values: [
+        "HTML5",
+        "Javascript",
+        "CSS3",
+        "CoffeeScript",
+        "AngularJS",
+        "ReactJS",
+        "VueJS"
+    ]    
+}
+```
+
+#### Combobox checklist field with `values` function:
+```js
+{
+	type: "checklist",
+	label: "Skills",
+	model: "skills",
+    values: function() {
+      return [
+        "HTML5",
+        "Javascript",
+        "CSS3",
+        "CoffeeScript",
+        "AngularJS",
+        "ReactJS",
+        "VueJS"
+      ]    
+    }),
+    validator: validators.array
+}
+```
+If you select the 2nd and 4th items, the `value` will be `["Javascript", "CoffeeScript"]` in the model.
+
+#### Checklist field with object values:
+```js
+{
+    type: "checklist",
+    label: "Roles",
+    model: "roles",
+    values: [
+        { value: "admin", name: "Administrator"},
+        { value: "moderator", name: "Moderator"},
+        { value: "user", name: "Registered User"},
+        { value: "visitor", name: "Visitor"}
+}
+```
+If you select the first and last items, the `value` will be `["admin", "visitor"]` in the model.
+
+#### Checklist field with custom object values:
+```js
+{
+    type: "checklist",
+    label: "Ingredient",
+    model: "ingredient",
+    values: [
+        { uuid: "a11e3f4b-d4f1-45ed-87fc-4eabda4e667e", name: "Cherimoya"},
+        { uuid: "5ceb59c6-efe6-4c8a-a4bd-0ef621cd1e5d", name: "Pummelo"},
+        { uuid: "39f05038-39ba-4cb9-8508-720806dcb20b", name: "Jabuticaba"},
+        { uuid: "94adbe8d-f9db-481c-97c0-7198d5f3d810", name: "Kiwano melon"}
+    ],
+    checklistOptions: {
+        value: "uuid" 
+    }
+}
+```