✏️ docs

Author: icebob

docs/fields/README.md

@@ -0,0 +1,68 @@
+# Available fields
+
+## Built-in fields
+
+For this fields there is no need 3rd party libraries
+
+- [`text`](text.md) - Simple text input field
+- `email` - E-mail address input field
+- `password` - Password input field
+- `number` - Number input field
+- `textArea` - Text area field
+- `checkbox` - Checkbox for boolean values
+- `select` - Select list
+- `color` - Color picker (built-in HTML5 control)
+- `checklist` - Checkbox list to select multiple values
+- `range` - Range slider (built-in HTML5 control)
+- `image` - Image select field (URL or upload in base64 string)
+- `label` - Static text (e.g. timestamp, creation time...etc)
+
+## Optional fields
+
+For this fields needs 3rd party libraries
+
+- `selectEx` - select list with the bootstrap-select component
+- `dateTime` - datetime picker with bootstrap-datetimepicker component
+- `masked` - Masked text input field with maskedinput component
+- `slider` - pretty range slider with ion.rangeSlider component
+- `spectrum` - Color picker with "The No Hassle" Spectrum jQuery Colorpicker component
+
+## Common properties of field
+
+Property 		| Type 			| Description
+--------------- | ------------- | -----------
+type 			| `String` 		| Type of field
+label 			| `String` 		| Label of field
+model 			| `String` 		| Name of property in the model
+featured 		| `boolean` 	| is it a featured (bold) field?
+disabled 		| `boolean` 	| if true, disable this field
+required 		| `boolean` 	| if true, must be fill this field
+default			|  any	| Default value of the field (for create a new model)
+validator 		| `Function` or `Array` | Validator for value. It can be array of functions too.
+onChanged		| `Function` 	| Event if this field value is changed. `onChanged(model, newVal, oldVal, field) { ... }`
+onValidated		| `Function` 	| Event if validation executed. `onValidated(model, errors, field) { ... }`
+
+## Example
+
+```js
+	{
+		type: "text",
+		label: "Name",
+		model: "name",
+		readonly: false,
+		featured: true,
+		disabled: false,
+		required: true,
+		default: "Anonymous",
+		validator: validators.string,
+
+		onChanged(model, newVal, oldVal, field) {
+			console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
+		},
+
+		onValidated(model, errors, field) {
+			if (errors.length > 0)
+				console.warn("Validation error in Name field! Errors:", errors);
+		}
+	}
+```

docs/fields/text.md

@@ -0,0 +1,33 @@
+# `text` field
+
+## Special properties of field
+
+Property 		| Type 			| Description
+--------------- | ------------- | -----------
+readonly		| `boolean` 	| If true, the input field is read-only
+placeholder		| `String` 		| Placeholder text for input field
+min 			| `Number` 		| Minimum length of text (need `validators.string`)
+max 			| `Number` 		| Maximum length of text (need `validators.string`)
+
+## Usage
+
+```js
+	{
+		type: "text",
+		label: "Name",
+		model: "name",
+		min: 3,
+		max: 50,
+		required: true,
+		placeholder: "User's full name",
+
+		onChanged(model, newVal, oldVal, field) {
+			console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
+		},
+
+		onValidated(model, errors, field) {
+			if (errors.length > 0)
+				console.warn("Validation error in Name field! Errors:", errors);
+		}
+	}
+```

docs/main.md

@@ -0,0 +1,47 @@
+# VueFormGenerator component
+
+## Component properties
+
+Property | Type | Description
+-------- | ---- | -----------
+[schema](schema.md)| `Object` | Schema object with fields
+[options](options.md) | `Object` | form options
+model | `Object` | Model/target object
+multiple | `boolean` | Is it a multiple merged model? We only show `multi: true` fields
+isNewModel | `boolean` | If model is new/empty, we won't validate after it load
+
+## Usage
+```html
+<template>
+  <div class="panel-body">
+    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+  </div>
+</template>
+
+<script>
+import VueFormGenerator from "vue-form-generator";
+
+export default {
+  ...
+  components: {
+    VueFormGenerator: VueFormGenerator.component
+  },
+  
+  data: {
+    schema: { ... },
+    model:             
+      id: 1,
+      name: "John Doe",
+      password: "J0hnD03!x4",
+      skills: ["Javascript", "VueJS"],
+      email: "[email protected]",
+      status: true
+    },
+    formOptions: {
+      validateAfterLoad: true,
+      validateAfterChanged: true
+    }
+  }
+  ...
+</script>
+```

docs/schema.md

@@ -0,0 +1,22 @@
+# Schema
+The schema contains the fields of the form
+
+## Sample
+```js
+{ 
+    fields: [
+    	{
+    		type: "text",
+    		label: "Name",
+    		model: "name"
+    	},
+    	{
+    		type: "number",
+    		label: "Age",
+    		model: "age"
+    	}
+    ]
+}
+```
+
+[Available field types](fields/README.md)