Merge branch 'master' of https://github.com/icebob/vue-form-generator into file-upload

# Conflicts:
#	dist/vfg-core.js
#	dist/vfg.js

Author: cristian.jora

README.md

@@ -17,26 +17,27 @@ A schema-based form generator component for Vue.js.
 [![Screenshot](https://icebob.gitbooks.io/vueformgenerator/content/assets/vfg-example1.png)](https://jsfiddle.net/icebob/0mg1v81e/)
 
 ## Features
-- multiple objects editing
-- core & full bundles
+- reactive forms based on schemas
+- multiple object editing
 - 21 field types
 - built-in validators
+- core & full bundles (11kb and 19kb gzipped)
 - Bootstrap friendly templates
 - customizable styles
-- extendable with custom fields
+- can be extended easily with custom fields
 - ...etc
 
 ## Documentation
 [Online documentation on Gitbook](https://icebob.gitbooks.io/vueformgenerator/content/)
 
 ## Dependencies
-vue-form-generator use [fecha](https://github.com/taylorhakes/fecha) and [lodash](https://lodash.com/) internally.
+vue-form-generator uses [fecha](https://github.com/taylorhakes/fecha) and [lodash](https://lodash.com/) internally.
 
 While built-in 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.  
-That way, it's your choice to depend on jQuery or not.
+These dependencies fall into two camps: jQuery or Vanilla. You can find almost the same functionality in both flavors.
+In the end, it's your choice to depend on jQuery or not.
 
-You can find details about dependencies in [documentation](https://icebob.gitbooks.io/vueformgenerator/content/).
+You can find details about dependencies in the official [documentation](https://icebob.gitbooks.io/vueformgenerator/content/) under each specific component.
 
 ## Installation
 ### NPM
@@ -156,6 +157,17 @@ export default {
 </script>
 ```
 
+Usage in local components
+```js
+import VueFormGenerator from "vue-form-generator";
+
+//component javascript
+export default{
+  components:{
+    "vue-form-generator": VueFormGenerator.component
+  }
+}
+```
 ## Development
 This command will start a `webpack-dev-server` with content of `dev` folder.
 ```bash
@@ -178,7 +190,7 @@ npm run ci
 ```
 
 ## More fields *new*
-VueFormGenerator support custom fields. If you decide to release your custom field into the wild, please open a new issue so we can add you to a list here! Please try to use this naming convention for your custom field : vfg-field-* Example :
+VueFormGenerator supports custom fields. If you decide to release your custom field into the wild, please open a new issue 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`

dev/full/schema.js

@@ -4,6 +4,17 @@ import {
 	validators
 } from "../../src";
 
+let customAsyncValidator = function(value) {
+	return new Promise((resolve, reject) => {
+		setTimeout(() => {
+			if (value)
+				resolve();
+			else
+				resolve([ "Invalid value from async validator" ]);
+		}, 1000);
+	});
+};
+
 module.exports = {
 	fields: [
 
@@ -56,7 +67,7 @@ module.exports = {
 			model: "website",
 			placeholder: "Enter your website",
 			inputName: "website",
-			validator: validators.url
+			validator: customAsyncValidator //validators.url
 		}, {
 			type: "input",
 			inputType: "tel",
@@ -74,7 +85,10 @@ module.exports = {
 			required: true,
 			hint: "Minimum 6 characters",
 			styleClasses: "half-width",
-			validator: validators.string
+			validator: validators.string.locale({ 
+				fieldIsRequired: "The password is required!",
+				textTooSmall: "Password must be at least {1} characters!"
+			})
 		}, {
 			type: "input",
 			inputType: "date",
@@ -117,8 +131,8 @@ module.exports = {
 			inputType: "number",
 			label: "Number",
 			model: "age",
-			styleClasses: "half-width",
-			validator: validators.number
+			styleClasses: "half-width"
+			//validator: validators.number
 		}, {
 			type: "input",
 			inputType: "range",
@@ -309,7 +323,8 @@ module.exports = {
 			rows: 4,
 			validator: validators.string
 		}, {
-			type: "text",
+			type: "input",
+			inputType: "text",
 			label: "Field with buttons",
 			model: "address.geo",
 			disabled: false,

src/fields/abstractField.js

@@ -1,4 +1,17 @@
 import { get as objGet, each, isFunction, isString, isArray } from "lodash";
+import validators from "../utils/validators";
+
+function convertValidator(validator) {
+	if (isString(validator)) {
+		if (validators[validator] != null)
+			return validators[validator];
+		else {
+			console.warn(`'${validator}' is not a validator function!`);
+			return null; // caller need to handle null
+		}
+	}
+	return validator;
+}
 
 export default {
 	props: [
@@ -69,20 +82,34 @@ export default {
 
 				let validators = [];
 				if (!isArray(this.schema.validator)) {
-					validators.push(this.schema.validator.bind(this));
+					validators.push(convertValidator(this.schema.validator).bind(this));
 				} else {
 					each(this.schema.validator, (validator) => {
-						validators.push(validator.bind(this));
+						validators.push(convertValidator(validator).bind(this));
 					});
 				}
 
 				each(validators, (validator) => {
-					let err = validator(this.value, this.schema, this.model);
-					if (err) {
+					let addErrors = err => {
 						if (isArray(err))
 							Array.prototype.push.apply(this.errors, err);
 						else if (isString(err))
 							this.errors.push(err);
+					};
+
+					let res = validator(this.value, this.schema, this.model);
+					if (res && isFunction(res.then)) {
+						// It is a Promise, async validator
+						res.then(err => {
+							if (err) {
+								addErrors(err);
+								let isValid = this.errors.length == 0;
+								this.$emit("validated", isValid, this.errors, this);
+							}
+						});
+					} else {
+						if (res)
+							addErrors(res);
 					}
 				});
 

src/fields/core/fieldChecklist.vue

@@ -3,7 +3,7 @@
 		.listbox.form-control(v-if="schema.listBox", :disabled="disabled")
 			.list-row(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 				label
-					input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @input="onChanged($event, item)")
+					input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)")
 					| {{ getItemName(item) }}
 
 		.combobox.form-control(v-if="!schema.listBox", :disabled="disabled")
@@ -14,7 +14,7 @@
 			.dropList
 				.list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 					label
-						input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @input="onChanged($event, item)")
+						input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)")
 						| {{ getItemName(item) }}
 </template>