Merge branch 'master' into better-accessibility-labels

Duncan Lock · Duncan Lock · commit ed16bac60fd1 · 2017-05-18T12:22:36.000-07:00
diff --git a/dev/checklist/app.vue b/dev/checklist/app.vue
@@ -0,0 +1,50 @@
+<template lang="html">
+	<div>
+		<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+		<pre><code>{{ model }}</code></pre>
+	</div>
+</template>
+
+<script>
+import Vue from "vue";
+import { validators } from "../../src";
+
+export default {
+	data () {
+		return {
+			model: {
+				skills: ["Javascript", "VueJS"]
+			},
+
+			schema: {
+				fields: [
+					{
+						type: "checklist",
+						label: "Skills",
+						model: "skills",
+						required: true,
+						min: 2,
+						listBox: true,
+						values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],
+						validator: validators.array,
+						onChanged(model) {
+							console.log("skills changed to", model.skills);
+						},
+						onValidated(model, errors) {
+							console.log("skills validated:", errors);
+						}
+					}
+				]
+			},
+
+			formOptions: {
+				validateAfterChanged: true
+			}
+		}
+	},
+
+	created() {
+		window.app = this;
+	}
+}
+</script>
diff --git a/dev/checklist/index.html b/dev/checklist/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue-form-generator multiselect demo</title>
+  </head>
+  <body>
+    <div class="container-fluid"></div>
+    <div id="app"></div>
+  	<script src="/checklist.js"></script>
+  </body>
+</html>
diff --git a/dev/checklist/main.js b/dev/checklist/main.js
@@ -0,0 +1,9 @@
+import Vue from "vue";
+import VueFormGenerator from "../../src";
+Vue.use(VueFormGenerator);
+
+import App from './app.vue';
+
+new Vue({
+    ...App
+}).$mount('#app');
diff --git a/dev/full/app.vue b/dev/full/app.vue
@@ -195,6 +195,22 @@
 
 			modelUpdated(newVal, schema) {
 				console.log("main model has updated", newVal, schema);
+			},
+
+
+			getLocation(model) {
+				if (navigator.geolocation) {
+					navigator.geolocation.getCurrentPosition((pos) => {
+						if (!model.address)
+							model.address = {};
+						if (!model.address.geo)
+							model.address.geo = {};
+						model.address.geo.latitude = pos.coords.latitude.toFixed(5);
+						model.address.geo.longitude = pos.coords.longitude.toFixed(5);
+					});
+				} else {
+					alert("Geolocation is not supported by this browser.");
+				}				
 			}
 
 			 
diff --git a/dev/full/schema.js b/dev/full/schema.js
@@ -351,18 +351,7 @@ module.exports = {
 				classes: "btn-location",
 				label: "Current location",
 				onclick: function(model) {
-					if (navigator.geolocation) {
-						navigator.geolocation.getCurrentPosition((pos) => {
-							if (!model.address)
-								model.address = {};
-							if (!model.address.geo)
-								model.address.geo = {};
-							model.address.geo.latitude = pos.coords.latitude.toFixed(5);
-							model.address.geo.longitude = pos.coords.longitude.toFixed(5);
-						});
-					} else {
-						alert("Geolocation is not supported by this browser.");
-					}
+					return this.$parent.getLocation(model);
 				}
 			}, {
 				classes: "btn-clear",
diff --git a/dist/vfg-core.js b/dist/vfg-core.js
diff --git a/dist/vfg.js b/dist/vfg.js
diff --git a/src/fields/core/fieldChecklist.vue b/src/fields/core/fieldChecklist.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-	import {isObject, isNil} from "lodash";
+	import {isObject, isNil, clone} from "lodash";
 	import abstractField from "../abstractField";
 	
 	export default {
@@ -90,9 +90,15 @@
 				}
 
 				if (event.target.checked) {
-					this.value.push(this.getItemValue(item));
+					// Note: If you modify this.value array, it won't trigger the `set` in computed field
+					const arr = clone(this.value);
+					arr.push(this.getItemValue(item));
+					this.value = arr;
 				} else {
-					this.value.splice(this.value.indexOf(this.getItemValue(item)), 1);
+					// Note: If you modify this.value array, it won't trigger the `set` in computed field
+					const arr = clone(this.value);
+					arr.splice(this.value.indexOf(this.getItemValue(item)), 1);
+					this.value = arr;
 				}
 			},
 
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
@@ -11,7 +11,7 @@ div
 				.field-wrap
 					component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema.sync='field', @model-updated='modelUpdated', @validated="onFieldValidated")
 					.buttons(v-if='buttonVisibility(field)')
-						button(v-for='btn in field.buttons', @click='btn.onclick(model, field)', :class='btn.classes') {{ btn.label }}
+						button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field)', :class='btn.classes') {{ btn.label }}
 				.hint(v-if='field.hint') {{ field.hint }}
 				.errors.help-block(v-if='fieldErrors(field).length > 0')
 					span(v-for='(error, index) in fieldErrors(field)', track-by='index') {{ error }}
@@ -250,6 +250,10 @@ div
 				return field.featured;
 			},
 
+			buttonClickHandler(btn, field) {
+				return btn.onclick.call(this, this.model, field, this);
+			},
+
 			// Child field executed validation
 			onFieldValidated(res, errors, field) {
 				// Remove old errors for this field
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -33,7 +33,8 @@ module.exports = {
 	
 	entry: {
 		full: path.resolve("dev", "full", "main.js"),
-		mselect: path.resolve("dev", "multiselect", "main.js")
+		mselect: path.resolve("dev", "multiselect", "main.js"),
+		checklist: path.resolve("dev", "checklist", "main.js")
 	},
 
 	output: {
