From cef52cba72fcb9ca706183036197bb3df0daccdb Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Tue, 2 Aug 2016 14:44:48 +0200
Subject: [PATCH 1/9] :new: new: new field type: Vue Multiselect

---
 dev/schema.js                      | 29 +++++++++++++++++++++++++++++
 package.json                       |  3 ++-
 src/fields/fieldVueMultiSelect.vue | 29 +++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 src/fields/fieldVueMultiSelect.vue

diff --git a/dev/schema.js b/dev/schema.js
index 5a11cf7f..eea232e1 100644
--- a/dev/schema.js
+++ b/dev/schema.js
@@ -77,6 +77,35 @@ module.exports = {
 			hint: "Minimum 6 characters",
 			styleClasses: "half-width",
 			validator: validators.string			
+		},
+
+		{
+			type: "vueMultiSelect",
+			label: "Skills (vue-multiSelect field)",
+			model: "skills",
+			multi: true,
+			required: true,
+			multiSelect: true,
+			selectOptions: {
+				// https://silviomoreto.github.io/bootstrap-select/options/
+				liveSearch: true,
+				//maxOptions: 3,
+				//size: 4,
+				//actionsBox: true,
+				selectedTextFormat: "count > 3"
+			},
+			values: [
+				"HTML5",
+				"Javascript",
+				"CSS3",
+				"CoffeeScript",
+				"AngularJS",
+				"ReactJS",
+				"VueJS"
+			],
+			min: 2,
+			max: 4,
+			validator: validators.array
 		},	
 	
 		{
diff --git a/package.json b/package.json
index d5e18c64..5f4685f0 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
   },
   "dependencies": {
     "babel-runtime": "6.9.2",
-    "vue": "1.0.24"
+    "vue": "1.0.24",
+    "vue-multiselect": "^1.0.1"
   }
 }
diff --git a/src/fields/fieldVueMultiSelect.vue b/src/fields/fieldVueMultiSelect.vue
new file mode 100644
index 00000000..7616ade4
--- /dev/null
+++ b/src/fields/fieldVueMultiSelect.vue
@@ -0,0 +1,29 @@
+<template lang="jade">
+    multiselect( :selected="selected", :options="options", @update="updateSelected" )
+</template>
+<script>
+import { isObject } from "lodash";
+import abstractField from "./abstractField";
+import Multiselect from 'vue-multiselect';
+
+export default {
+	mixins: [abstractField],
+	components: { Multiselect },
+	computed: {
+		options() {
+			let values = this.schema.values;
+			if (typeof(values) == "function") {
+				return values.apply(this, [this.model, this.schema]);
+			} else
+			return values;
+		}
+	},
+
+	methods: {
+		updateSelected (newSelected) {
+			console.log(newSelected, this.selected)
+			this.selected = newSelected
+		}
+	}
+};
+</script>

From 9df5b5e91dafff44c670207d9bfcf5affaea4015 Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Tue, 2 Aug 2016 18:05:56 +0200
Subject: [PATCH 2/9] added most options from vue-multiselect

---
 dev/schema.js                      | 25 +++++---
 src/fields/fieldVueMultiSelect.vue | 93 ++++++++++++++++++++++++------
 2 files changed, 93 insertions(+), 25 deletions(-)

diff --git a/dev/schema.js b/dev/schema.js
index eea232e1..d08e4c1f 100644
--- a/dev/schema.js
+++ b/dev/schema.js
@@ -83,16 +83,23 @@ module.exports = {
 			type: "vueMultiSelect",
 			label: "Skills (vue-multiSelect field)",
 			model: "skills",
-			multi: true,
 			required: true,
 			multiSelect: true,
 			selectOptions: {
-				// https://silviomoreto.github.io/bootstrap-select/options/
-				liveSearch: true,
-				//maxOptions: 3,
-				//size: 4,
-				//actionsBox: true,
-				selectedTextFormat: "count > 3"
+				// id:25,
+				// key:"name",
+				// label: "name",
+				searchable:true,
+				clearOnSelect:true,
+				hideSelected:true,
+				// maxHeight:300,
+				// allowEmpty:true,
+				// resetAfter:false,
+				closeOnSelect: true,
+				// customLabel:function(){return ""},
+				taggable:true,
+				tagPlaceholder:'Press enter to create a tag',
+				max:4
 			},
 			values: [
 				"HTML5",
@@ -103,8 +110,12 @@ module.exports = {
 				"ReactJS",
 				"VueJS"
 			],
+			onChanged(model, newVal, oldVal, field) {				
+				console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
+			},
 			min: 2,
 			max: 4,
+			placeholder:"Select one Vue",
 			validator: validators.array
 		},	
 	
diff --git a/src/fields/fieldVueMultiSelect.vue b/src/fields/fieldVueMultiSelect.vue
index 7616ade4..bf36b734 100644
--- a/src/fields/fieldVueMultiSelect.vue
+++ b/src/fields/fieldVueMultiSelect.vue
@@ -1,5 +1,33 @@
 <template lang="jade">
-    multiselect( :selected="selected", :options="options", @update="updateSelected" )
+	multiselect(
+		:id="schema.selectOptions.id", 
+		:options="options",
+		:multiple="schema.multiSelect", 
+		:selected="value", 
+		:key="schema.selectOptions.key || null", 
+		:label="schema.selectOptions.label || null", 
+		:searchable="schema.selectOptions.searchable", 
+		:clear-on-select="schema.selectOptions.clearOnSelect", 
+		:hide-selected="schema.selectOptions.hideSelected", 
+		:placeholder="schema.placeholder", 
+		:max-height="schema.selectOptions.maxHeight", 
+		:allow-empty="schema.selectOptions.allowEmpty", 
+		:reset-after="schema.selectOptions.resetAfter", 
+		:close-on-select="schema.selectOptions.closeOnSelect", 
+		:custom-label="schema.selectOptions.customLabel || null",
+		:taggable="schema.selectOptions.taggable",
+		:tag-placeholder="schema.selectOptions.tagPlaceholder",
+		:max="schema.selectOptions.max",
+		@update="updateSelected", 
+		@select="onSelect", 
+		@remove="onRemove", 
+		@search-change="onSearchChange", 
+		@tag="addTag", 
+		@open="onOpen", 
+		@close="onClose", 
+		:show-labels="schema.selectOptions.showLabels"
+		// TODO: add other options from multiSelectMixin
+		)
 </template>
 <script>
 import { isObject } from "lodash";
@@ -7,23 +35,52 @@ import abstractField from "./abstractField";
 import Multiselect from 'vue-multiselect';
 
 export default {
-	mixins: [abstractField],
-	components: { Multiselect },
-	computed: {
-		options() {
-			let values = this.schema.values;
-			if (typeof(values) == "function") {
-				return values.apply(this, [this.model, this.schema]);
-			} else
-			return values;
-		}
-	},
+    mixins: [abstractField],
+    components: {
+        Multiselect
+    },
+    computed: {
+        options() {
+            let values = this.schema.values;
+            if (typeof(values) == "function") {
+                return values.apply(this, [this.model, this.schema]);
+            } else {
+                return values;
+            }
+        }
+    },
 
-	methods: {
-		updateSelected (newSelected) {
-			console.log(newSelected, this.selected)
-			this.selected = newSelected
-		}
-	}
+    methods: {
+        updateSelected(value, id) {
+            this.value = value;
+        },
+        onSelect(selectedOption, id) {
+            console.log("onSelect", selectedOption, id)
+        },
+        onRemove(removedOption, id) {
+            console.log("onRemove", removedOption, id)
+        },
+        onSearchChange(searchQuery, id) {
+            console.log("onSearchChange", searchQuery, id)
+        },
+        addTag(newTag, id) {
+            console.log("addTag", newTag, id);
+            // TODO: implement tag object by sending this function into schema definition
+			/* const tag = {
+                name: newTag,
+                // Just for example needs as we use Array of Objects that should have other properties filled.
+                // For primitive values you can simply push the tag into options and selected arrays.
+                code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
+            }*/
+            this.options.push(newTag)
+            this.value.push(newTag)
+        },
+        onOpen(id) {
+            console.log("onOpen", id)
+        },
+        onClose(value, id) {
+            console.log("onClose", value, id)
+        },
+    }
 };
 </script>

From 24c49d9254498fea8c23e9408f1adcb4a912e87f Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Wed, 3 Aug 2016 14:33:02 +0200
Subject: [PATCH 3/9] fix: lint error and warning

---
 src/fields/fieldVueMultiSelect.vue | 84 +++++++++++++++---------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/fields/fieldVueMultiSelect.vue b/src/fields/fieldVueMultiSelect.vue
index bf36b734..23dbd7fa 100644
--- a/src/fields/fieldVueMultiSelect.vue
+++ b/src/fields/fieldVueMultiSelect.vue
@@ -30,57 +30,57 @@
 		)
 </template>
 <script>
-import { isObject } from "lodash";
+// import { isObject } from "lodash";
 import abstractField from "./abstractField";
-import Multiselect from 'vue-multiselect';
+import Multiselect from "vue-multiselect";
 
 export default {
-    mixins: [abstractField],
-    components: {
-        Multiselect
-    },
-    computed: {
-        options() {
-            let values = this.schema.values;
-            if (typeof(values) == "function") {
-                return values.apply(this, [this.model, this.schema]);
-            } else {
-                return values;
-            }
-        }
-    },
+	mixins: [abstractField],
+	components: {
+		Multiselect
+	},
+	computed: {
+		options() {
+			let values = this.schema.values;
+			if (typeof(values) == "function") {
+				return values.apply(this, [this.model, this.schema]);
+			} else {
+				return values;
+			}
+		}
+	},
 
-    methods: {
-        updateSelected(value, id) {
-            this.value = value;
-        },
-        onSelect(selectedOption, id) {
-            console.log("onSelect", selectedOption, id)
-        },
-        onRemove(removedOption, id) {
-            console.log("onRemove", removedOption, id)
-        },
-        onSearchChange(searchQuery, id) {
-            console.log("onSearchChange", searchQuery, id)
-        },
-        addTag(newTag, id) {
-            console.log("addTag", newTag, id);
-            // TODO: implement tag object by sending this function into schema definition
+	methods: {
+		updateSelected(value, id) {
+			this.value = value;
+		},
+		onSelect(selectedOption, id) {
+			console.log("onSelect", selectedOption, id);
+		},
+		onRemove(removedOption, id) {
+			console.log("onRemove", removedOption, id);
+		},
+		onSearchChange(searchQuery, id) {
+			console.log("onSearchChange", searchQuery, id);
+		},
+		addTag(newTag, id) {
+			console.log("addTag", newTag, id);
+			// TODO: implement tag object by sending this function into schema definition
 			/* const tag = {
                 name: newTag,
                 // Just for example needs as we use Array of Objects that should have other properties filled.
                 // For primitive values you can simply push the tag into options and selected arrays.
                 code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
             }*/
-            this.options.push(newTag)
-            this.value.push(newTag)
-        },
-        onOpen(id) {
-            console.log("onOpen", id)
-        },
-        onClose(value, id) {
-            console.log("onClose", value, id)
-        },
-    }
+			this.options.push(newTag);
+			this.value.push(newTag);
+		},
+		onOpen(id) {
+			console.log("onOpen", id);
+		},
+		onClose(value, id) {
+			console.log("onClose", value, id);
+		}
+	}
 };
 </script>

From 7e3472df42b4764eebac4b8b212f3c4be0c32dac Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Fri, 5 Aug 2016 13:17:55 +0200
Subject: [PATCH 4/9] Remove dependency from vue-multiselect. Make it optional
 and check if loaded. Add it to dev files.

---
 dev/index.html                     |  1 +
 package.json                       |  3 +--
 src/fields/fieldVueMultiSelect.vue | 13 +++++++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/dev/index.html b/dev/index.html
index 95feb7f0..5987ae71 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -20,6 +20,7 @@
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
+	<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
   </head>
   <body>
diff --git a/package.json b/package.json
index 5f4685f0..63a7031e 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,5 @@
   "dependencies": {
     "babel-runtime": "6.9.2",
     "vue": "1.0.24",
-    "vue-multiselect": "^1.0.1"
   }
-}
+}
\ No newline at end of file
diff --git a/src/fields/fieldVueMultiSelect.vue b/src/fields/fieldVueMultiSelect.vue
index 23dbd7fa..64f1d94d 100644
--- a/src/fields/fieldVueMultiSelect.vue
+++ b/src/fields/fieldVueMultiSelect.vue
@@ -32,13 +32,9 @@
 <script>
 // import { isObject } from "lodash";
 import abstractField from "./abstractField";
-import Multiselect from "vue-multiselect";
 
 export default {
 	mixins: [abstractField],
-	components: {
-		Multiselect
-	},
 	computed: {
 		options() {
 			let values = this.schema.values;
@@ -82,5 +78,14 @@ export default {
 			console.log("onClose", value, id);
 		}
 	}
+    created() {
+        // Check if the component is loaded
+        if (window.VueMultiselect) {
+            Vue.component("multiselect", window.VueMultiselect.default);           
+        } else {
+            console.error("'vue-multiselect' is missing. Please download from https://github.com/monterail/vue-multiselect and load the script in the HTML head section!");
+        }
+    }
 };
 </script>
+

From c5b6f3388d417683ddf0266741a50c59d1ac4f1f Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Fri, 5 Aug 2016 13:20:19 +0200
Subject: [PATCH 5/9] [package] update package.json

---
 package.json | 52 ++++++++++++++++++++++++++--------------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 63a7031e..3f1e6e38 100644
--- a/package.json
+++ b/package.json
@@ -39,62 +39,62 @@
   "author": "Icebob",
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "6.9.1",
+    "babel-core": "6.11.4",
     "babel-loader": "6.2.4",
-    "babel-plugin-transform-runtime": "6.9.0",
+    "babel-plugin-transform-runtime": "6.12.0",
     "babel-preset-es2015": "6.9.0",
     "babel-preset-stage-0": "6.5.0",
     "chai": "3.5.0",
-    "conventional-changelog-cli": "1.1.1",
+    "conventional-changelog-cli": "1.2.0",
     "conventional-github-releaser": "1.1.3",
-    "coveralls": "2.11.9",
+    "coveralls": "2.11.12",
     "css-loader": "0.23.1",
-    "eslint": "2.12.0",
-    "eslint-friendly-formatter": "2.0.4",
-    "eslint-loader": "1.3.0",
-    "eslint-plugin-html": "1.4.0",
+    "eslint": "3.2.2",
+    "eslint-friendly-formatter": "2.0.6",
+    "eslint-loader": "1.5.0",
+    "eslint-plugin-html": "1.5.1",
     "eslint-plugin-vue": "0.1.1",
-    "fakerator": "0.1.1",
+    "fakerator": "0.3.0",
     "git-commit-message-convention": "git://github.com/kazupon/git-commit-message-convention.git#065dfffbe2de5f6f16150aac9d4db7fdf5515e56",
     "gitbook-cli": "2.3.0",
     "inject-loader": "2.0.1",
     "isparta-loader": "2.0.0",
     "jade": "1.11.0",
     "jade-loader": "0.8.0",
-    "karma": "0.13.9",
+    "karma": "1.1.2",
     "karma-chai": "0.1.0",
     "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "0.5.5",
+    "karma-coverage": "1.1.1",
     "karma-coveralls": "1.1.2",
-    "karma-mocha": "0.2.2",
-    "karma-phantomjs-launcher": "1.0.0",
-    "karma-sinon-chai": "1.2.0",
+    "karma-mocha": "1.1.1",
+    "karma-phantomjs-launcher": "1.0.1",
+    "karma-sinon-chai": "1.2.3",
     "karma-sourcemap-loader": "0.3.7",
     "karma-spec-reporter": "0.0.26",
     "karma-webpack": "1.7.0",
-    "lodash": "4.11.1",
-    "lolex": "1.4.0",
-    "mocha": "2.4.5",
+    "lodash": "4.14.1",
+    "lolex": "1.5.1",
+    "mocha": "2.5.3",
     "mocha-generators": "1.2.0",
     "mocha-loader": "0.7.1",
-    "moment": "2.13.0",
-    "node-sass": "3.6.0",
-    "phantomjs-prebuilt": "2.1.3",
+    "moment": "2.14.1",
+    "node-sass": "3.8.0",
+    "phantomjs-prebuilt": "2.1.10",
     "sass-loader": "3.2.0",
-    "sinon": "1.17.4",
+    "sinon": "1.17.5",
     "sinon-chai": "2.8.0",
     "style-loader": "0.13.1",
     "vue-hot-reload-api": "1.3.2",
-    "vue-html-loader": "1.2.2",
-    "vue-loader": "8.5.2",
+    "vue-html-loader": "1.2.3",
+    "vue-loader": "8.5.3",
     "vue-style-loader": "1.0.0",
     "webpack": "1.13.1",
     "webpack-dev-middleware": "1.6.1",
     "webpack-dev-server": "1.14.1",
-    "webpack-merge": "0.12.0"
+    "webpack-merge": "0.14.1"
   },
   "dependencies": {
-    "babel-runtime": "6.9.2",
-    "vue": "1.0.24",
+    "babel-runtime": "6.11.6",
+    "vue": "1.0.26"
   }
 }
\ No newline at end of file

From dba3ed710f17485ba634bda5cc06de62b8aa2d57 Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Fri, 5 Aug 2016 13:23:23 +0200
Subject: [PATCH 6/9] Add all remainning props and some events (`onNewTag` &
 `onSearch`) from multiselect and update dev schema.

---
 dev/schema.js                      | 876 ++++++++++++++---------------
 src/fields/fieldVueMultiSelect.vue | 142 ++---
 2 files changed, 507 insertions(+), 511 deletions(-)

diff --git a/dev/schema.js b/dev/schema.js
index d08e4c1f..a5e3c1d2 100644
--- a/dev/schema.js
+++ b/dev/schema.js
@@ -7,464 +7,458 @@ import { validators } from "../src";
 let fakerator = new Fakerator();
 
 module.exports = {
-	fields: [
-		{
-			type: "text",
-			label: "ID (disabled text field)",
-			model: "id",
-			readonly: true,
-			editableIfNew: true, // TODO
-			featured: false,
-			disabled: true
-		},
-		{
-			type: "select",
-			label: "Type (select field)",
-			model: "type",
-			required: true,
-			values: [
-				{ id: "personal", name: "Personal" },
-				{ id: "business", name: "Business" }
-			],
-			default: "personal"
-		},	
-		{
-			type: "text",
-			label: "First name",
-			model: "firstName",
-			featured: true,
-			required: true,
-			placeholder: "User's first name",
-			styleClasses: "half-width",
-			validator: validators.string,
+    fields: [{
+            type: "text",
+            label: "ID (disabled text field)",
+            model: "id",
+            readonly: true,
+            editableIfNew: true, // TODO
+            featured: false,
+            disabled: true
+        }, {
+            type: "select",
+            label: "Type (select field)",
+            model: "type",
+            required: true,
+            values: [
+                { id: "personal", name: "Personal" },
+                { id: "business", name: "Business" }
+            ],
+            default: "personal"
+        }, {
+            type: "text",
+            label: "First name",
+            model: "firstName",
+            featured: true,
+            required: true,
+            placeholder: "User's first name",
+            styleClasses: "half-width",
+            validator: validators.string,
 
-			onChanged(model, newVal, oldVal, field) {
-				//console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
-			},
+            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);
-			}
-		},
-		{
-			type: "text",
-			label: "Last name",
-			model: "lastName",
-			featured: true,
-			required: true,
-			placeholder: "User's last name",
-			styleClasses: "half-width",
-			validator: validators.string
-		},	
-		{
-			type: "text",
-			label: "Username",
-			model: "userName",
-			featured: true,
-			required: true,
-			min: 5,
-			placeholder: "User's last name",
-			styleClasses: ["half-width", "first"],
-			validator: validators.string
-		},
-		{
-			type: "password",
-			label: "Password (password field)",
-			model: "password",
-			min: 6,
-			required: true,
-			hint: "Minimum 6 characters",
-			styleClasses: "half-width",
-			validator: validators.string			
-		},
+            onValidated(model, errors, field) {
+                //if (errors.length > 0)
+                //	console.warn("Validation error in Name field! Errors:", errors);
+            }
+        }, {
+            type: "text",
+            label: "Last name",
+            model: "lastName",
+            featured: true,
+            required: true,
+            placeholder: "User's last name",
+            styleClasses: "half-width",
+            validator: validators.string
+        }, {
+            type: "text",
+            label: "Username",
+            model: "userName",
+            featured: true,
+            required: true,
+            min: 5,
+            placeholder: "User's last name",
+            styleClasses: ["half-width", "first"],
+            validator: validators.string
+        }, {
+            type: "password",
+            label: "Password (password field)",
+            model: "password",
+            min: 6,
+            required: true,
+            hint: "Minimum 6 characters",
+            styleClasses: "half-width",
+            validator: validators.string
+        },
 
-		{
-			type: "vueMultiSelect",
-			label: "Skills (vue-multiSelect field)",
-			model: "skills",
-			required: true,
-			multiSelect: true,
-			selectOptions: {
-				// id:25,
-				// key:"name",
-				// label: "name",
-				searchable:true,
-				clearOnSelect:true,
-				hideSelected:true,
-				// maxHeight:300,
-				// allowEmpty:true,
-				// resetAfter:false,
-				closeOnSelect: true,
-				// customLabel:function(){return ""},
-				taggable:true,
-				tagPlaceholder:'Press enter to create a tag',
-				max:4
-			},
-			values: [
-				"HTML5",
-				"Javascript",
-				"CSS3",
-				"CoffeeScript",
-				"AngularJS",
-				"ReactJS",
-				"VueJS"
-			],
-			onChanged(model, newVal, oldVal, field) {				
-				console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
-			},
-			min: 2,
-			max: 4,
-			placeholder:"Select one Vue",
-			validator: validators.array
-		},	
-	
-		{
-			type: "selectEx",
-			label: "Skills (selectEx field)",
-			model: "skills",
-			multi: true,
-			required: true,
-			multiSelect: true,
-			selectOptions: {
-				// https://silviomoreto.github.io/bootstrap-select/options/
-				liveSearch: true,
-				//maxOptions: 3,
-				//size: 4,
-				//actionsBox: true,
-				selectedTextFormat: "count > 3"
-			},
-			values: [
-				"HTML5",
-				"Javascript",
-				"CSS3",
-				"CoffeeScript",
-				"AngularJS",
-				"ReactJS",
-				"VueJS"
-			],
-			min: 2,
-			max: 4,
-			validator: validators.array
-		},	
-		{
-			type: "text",
-			label: "Company name",
-			model: "company.name",
-			styleClasses: ["company", "half-width"],
+        {
+            type: "vueMultiSelect",
+            label: "Skills (vue-multiSelect field)",
+            model: "skills",
+            required: true,
+            multiSelect: true,
+            selectOptions: {
+                // id:25,
+                // key:"name",
+                // label: "name",
+                searchable: true,
+                clearOnSelect: true,
+                hideSelected: true,
+                // maxHeight:300,
+                // allowEmpty:true,
+                // resetAfter:false,
+                // closeOnSelect: true,
+                // customLabel:function(){return ""},
+                taggable: true,
+                tagPlaceholder: 'tagPlaceholder',
+                onNewTag(newTag, id, options, value) {
+                    console.log("onNewTag", newTag, id, options, value);
+					options.push(newTag);
+					value.push(newTag);
+                },	
+                // showPointer: true,
+                onSearch(searchQuery, id, options){
+                    console.log("onSearch",searchQuery, id, options);                    
+                }
+                // selectLabel: "selectLabel",
+                // selectedLabel: "selectedLabel",
+                // deselectLabel: "deselectLabel",
+                // limit:2,
+                // limitText: count => `and ${count} more`,
+                // loading: false
+            },
+            values: [
+                "HTML5",
+                "Javascript",
+                "CSS3",
+                "CoffeeScript",
+                "AngularJS",
+                "ReactJS",
+                "VueJS"
+            ],
+            onChanged(model, newVal, oldVal, field) {
+                console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
+            },
+            min: 2,
+            max: 4,
+            placeholder: "placeholder",
+            validator: validators.array
+        },
 
-			visible(model) { return model && model.type == "business"; }
-		},
-		{
-			type: "text",
-			label: "Company phone",
-			model: "company.phone",
-			styleClasses: "company",
-			pattern: "^\\+[0-9]{2}-[237]0-[0-9]{3}-[0-9]{4}$",
-			placeholder: "User's phone number",
-			hint: "Format: +36-(20|30|70)-000-0000",
-			styleClasses: "half-width",
-			visible(model) { return model && model.type == "business"; }
-		},			
-		{
-			type: "email",
-			label: "E-mail (email field)",
-			model: "email",
-			placeholder: "User's e-mail address"
-		},		
-		{
-			type: "text",
-			label: "Phone",
-			model: "phone",
-			pattern: "^\\+[0-9]{2}-[237]0-[0-9]{3}-[0-9]{4}$",
-			placeholder: "User's phone number",
-			hint: "Format: +36-(20|30|70)-000-0000",
-			help: "You can use any <b>formatted</b> texts. Or place a <a target='_blank' href='https://github.com/icebob/vue-form-generator'>link</a> to another site.",
-			styleClasses: "half-width"
-			//validator: validators.regexp
-		},
-		{
-			type: "masked",
-			label: "Mobile  (masked field)",
-			model: "mobile",
-			mask: "(99) 999-9999",
-			styleClasses: "half-width",
-			validator: validators.required
-		},		
-		{
-			type: "spectrum",
-			label: "Color (spectrum field)",
-			model: "favoriteColor",
-			required: true,
-			colorOptions: {
-				//preferredFormat: "rgb"
-			},
-			validator: validators.required
-		},	
-		{
-			type: "image",
-			label: "Avatar (image field)",
-			model: "avatar",
-			required: true,
-			browse: true,
-			validator: validators.required
+        {
+            type: "selectEx",
+            label: "Skills (selectEx field)",
+            model: "skills",
+            multi: true,
+            required: true,
+            multiSelect: true,
+            selectOptions: {
+                // https://silviomoreto.github.io/bootstrap-select/options/
+                liveSearch: true,
+                //maxOptions: 3,
+                //size: 4,
+                //actionsBox: true,
+                selectedTextFormat: "count > 3"
+            },
+            values: [
+                "HTML5",
+                "Javascript",
+                "CSS3",
+                "CoffeeScript",
+                "AngularJS",
+                "ReactJS",
+                "VueJS"
+            ],
+            min: 2,
+            max: 4,
+            validator: validators.array
+        }, {
+            type: "text",
+            label: "Company name",
+            model: "company.name",
+            styleClasses: ["company", "half-width"],
 
-		},
-		{
-			type: "number",
-			label: "Age (number field)",
-			model: "age",
-			multi: true,
-			disabled: true,
-			placeholder: "User's age",
-			hint: "Minimum 18 age.",
-			min: 18,
-			max: 100,
-			validator: [
-				validators.integer,
-				validators.number
-			]
-		},
-		{
-			type: "dateTime",
-			label: "DOB (dateTime field)",
-			model: "dob",
-			required: true,
-			placeholder: "User's birth of date",
-			min: moment("1900-01-01").toDate(),
-			max: moment("2016-01-01").toDate(),
-			validator: [
-				validators.date
-			],
-			dateTimePickerOptions: {
-				format: "YYYY-MM-DD"
-			},			
-			onChanged(model, newVal, oldVal, field) {
-				model.age = moment().year() - moment(newVal).year();
-			}
+            visible(model) {
+                return model && model.type == "business";
+            }
+        }, {
+            type: "text",
+            label: "Company phone",
+            model: "company.phone",
+            styleClasses: "company",
+            pattern: "^\\+[0-9]{2}-[237]0-[0-9]{3}-[0-9]{4}$",
+            placeholder: "User's phone number",
+            hint: "Format: +36-(20|30|70)-000-0000",
+            styleClasses: "half-width",
+            visible(model) {
+                return model && model.type == "business";
+            }
+        }, {
+            type: "email",
+            label: "E-mail (email field)",
+            model: "email",
+            placeholder: "User's e-mail address"
+        }, {
+            type: "text",
+            label: "Phone",
+            model: "phone",
+            pattern: "^\\+[0-9]{2}-[237]0-[0-9]{3}-[0-9]{4}$",
+            placeholder: "User's phone number",
+            hint: "Format: +36-(20|30|70)-000-0000",
+            help: "You can use any <b>formatted</b> texts. Or place a <a target='_blank' href='https://github.com/icebob/vue-form-generator'>link</a> to another site.",
+            styleClasses: "half-width"
+                //validator: validators.regexp
+        }, {
+            type: "masked",
+            label: "Mobile  (masked field)",
+            model: "mobile",
+            mask: "(99) 999-9999",
+            styleClasses: "half-width",
+            validator: validators.required
+        }, {
+            type: "spectrum",
+            label: "Color (spectrum field)",
+            model: "favoriteColor",
+            required: true,
+            colorOptions: {
+                //preferredFormat: "rgb"
+            },
+            validator: validators.required
+        }, {
+            type: "image",
+            label: "Avatar (image field)",
+            model: "avatar",
+            required: true,
+            browse: true,
+            validator: validators.required
 
-		},	
+        }, {
+            type: "number",
+            label: "Age (number field)",
+            model: "age",
+            multi: true,
+            disabled: true,
+            placeholder: "User's age",
+            hint: "Minimum 18 age.",
+            min: 18,
+            max: 100,
+            validator: [
+                validators.integer,
+                validators.number
+            ]
+        }, {
+            type: "dateTime",
+            label: "DOB (dateTime field)",
+            model: "dob",
+            required: true,
+            placeholder: "User's birth of date",
+            min: moment("1900-01-01").toDate(),
+            max: moment("2016-01-01").toDate(),
+            validator: [
+                validators.date
+            ],
+            dateTimePickerOptions: {
+                format: "YYYY-MM-DD"
+            },
+            onChanged(model, newVal, oldVal, field) {
+                model.age = moment().year() - moment(newVal).year();
+            }
 
-		{
-			type: "dateTime",
-			label: "DT",
-			model: "dt",
-			multi: true,
-			validator: [
-				validators.date
-			],
-			dateTimePickerOptions: {
-				format: "YYYY-MM-DD HH:mm:ss"
-			}
+        },
 
-		},
+        {
+            type: "dateTime",
+            label: "DT",
+            model: "dt",
+            multi: true,
+            validator: [
+                validators.date
+            ],
+            dateTimePickerOptions: {
+                format: "YYYY-MM-DD HH:mm:ss"
+            }
 
-		{
-			type: "dateTime",
-			label: "Time",
-			model: "time",
-			multi: true,
-			format: "HH:mm:ss",
-			/*validator: [
-				validators.time
-			],*/
-			dateTimePickerOptions: {
-				format: "HH:mm:ss"
-			}
+        },
 
-		},
+        {
+            type: "dateTime",
+            label: "Time",
+            model: "time",
+            multi: true,
+            format: "HH:mm:ss",
+            /*validator: [
+            	validators.time
+            ],*/
+            dateTimePickerOptions: {
+                format: "HH:mm:ss"
+            }
 
-		{
-			type: "switch",
-			label: "Sex (switch field)",
-			model: "sex",
-			multi: true,
-			default: "male",
-			textOn: "Female",
-			textOff: "Male",
-			valueOn: "female",
-			valueOff: "male"
-		},		
+        },
 
-		{
-			type: "slider",
-			label: "Rank (slider field)",
-			model: "rank",
-			multi: true,
-			min: 1,
-			max: 10,
-			required: true,
-			sliderOptions: {
-				grid: true
-			},
-			validator: validators.integer
-		},	
+        {
+            type: "switch",
+            label: "Sex (switch field)",
+            model: "sex",
+            multi: true,
+            default: "male",
+            textOn: "Female",
+            textOff: "Male",
+            valueOn: "female",
+            valueOff: "male"
+        },
 
-		{
-			type: "slider",
-			label: "Income",
-			model: "income",
-			multi: true,
-			min: 0,
-			max: 100000,
-			sliderOptions: {
-				type: "double",
-				prefix: "$",
-				step: 1000
-			}
-		},
+        {
+            type: "slider",
+            label: "Rank (slider field)",
+            model: "rank",
+            multi: true,
+            min: 1,
+            max: 10,
+            required: true,
+            sliderOptions: {
+                grid: true
+            },
+            validator: validators.integer
+        },
 
-		{
-			type: "select",
-			label: "Role",
-			model: "role",
-			required: true,
-			values: [
-				{ id: "admin", name: "Administrator"},
-				{ id: "moderator", name: "Moderator"},
-				{ id: "user", name: "Registered User"},
-				{ id: "visitor", name: "Visitor"}
-			],
-			styleClasses: "half-width",
-			validator: validators.required
-		},		
+        {
+            type: "slider",
+            label: "Income",
+            model: "income",
+            multi: true,
+            min: 0,
+            max: 100000,
+            sliderOptions: {
+                type: "double",
+                prefix: "$",
+                step: 1000
+            }
+        },
 
-		{
-			type: "select",
-			label: "Language",
-			model: "language",
-			required: true,
-			values: [
-				{ id: "en-GB", name: "English (GB)" },
-				{ id: "en-US", name: "English (US)" },
-				{ id: "de", name: "German" },
-				{ id: "it", name: "Italic" },
-				{ id: "fr", name: "French" }
-			],
-			hint: "Your native language",
-			styleClasses: "half-width",
-			validator: validators.required
-		},
-		{
-			type: "selectEx",
-			label: "Country (selectEx field)",
-			model: "address.country",
-			multi: true,
-			required: true,
-			values: ["United Kingdom", "France", "Germany"],
-			//default: "United Kingdom",
-			multiSelect: false,
-			selectOptions: {
-				// https://silviomoreto.github.io/bootstrap-select/options/
-				liveSearch: true,
-				size: 10
-			},
-			styleClasses: ["half-width", "first"],
-			validator: validators.required
-		},
-		{
-			type: "text",
-			label: "City",
-			model: "address.city",
-			multi: true,
-			styleClasses: "half-width",
-			validator: validators.required
-		},
-		{
-			type: "text",
-			label: "Street",
-			model: "address.street"
-		},        
-		{
-			type: "text",
-			label: "GPS",
-			model: "address.geo",
-			disabled: false,
-			get(model) { 
-				if (model && model.address && model.address.geo) 
-					return model.address.geo.latitude + ", " + model.address.geo.longitude;
-			},
-			set(model, val) {
-				let values = val.split(",");
-				if (!model.address)
-					model.address = {};
+        {
+            type: "select",
+            label: "Role",
+            model: "role",
+            required: true,
+            values: [
+                { id: "admin", name: "Administrator" },
+                { id: "moderator", name: "Moderator" },
+                { id: "user", name: "Registered User" },
+                { id: "visitor", name: "Visitor" }
+            ],
+            styleClasses: "half-width",
+            validator: validators.required
+        },
 
-				if (!model.address.geo)
-					model.address.geo = {};
+        {
+            type: "select",
+            label: "Language",
+            model: "language",
+            required: true,
+            values: [
+                { id: "en-GB", name: "English (GB)" },
+                { id: "en-US", name: "English (US)" },
+                { id: "de", name: "German" },
+                { id: "it", name: "Italic" },
+                { id: "fr", name: "French" }
+            ],
+            hint: "Your native language",
+            styleClasses: "half-width",
+            validator: validators.required
+        }, {
+            type: "selectEx",
+            label: "Country (selectEx field)",
+            model: "address.country",
+            multi: true,
+            required: true,
+            values: ["United Kingdom", "France", "Germany"],
+            //default: "United Kingdom",
+            multiSelect: false,
+            selectOptions: {
+                // https://silviomoreto.github.io/bootstrap-select/options/
+                liveSearch: true,
+                size: 10
+            },
+            styleClasses: ["half-width", "first"],
+            validator: validators.required
+        }, {
+            type: "text",
+            label: "City",
+            model: "address.city",
+            multi: true,
+            styleClasses: "half-width",
+            validator: validators.required
+        }, {
+            type: "text",
+            label: "Street",
+            model: "address.street"
+        }, {
+            type: "text",
+            label: "GPS",
+            model: "address.geo",
+            disabled: false,
+            get(model) {
+                if (model && model.address && model.address.geo)
+                    return model.address.geo.latitude + ", " + model.address.geo.longitude;
+            },
+            set(model, val) {
+                let values = val.split(",");
+                if (!model.address)
+                    model.address = {};
 
-				if (values.length > 0 && values[0].trim() != "")
-					model.address.geo.latitude = parseFloat(values[0].trim());
-				else 
-					model.address.geo.latitude = 0
+                if (!model.address.geo)
+                    model.address.geo = {};
 
-				if (values.length > 1 && values[1].trim() != "")
-					model.address.geo.longitude = parseFloat(values[1].trim());
-				else 
-					model.address.geo.longitude = 0
-			},
-			buttons: [
-				{
-					classes: "btn-location",
-					label: "Current location",
-					onclick: function(model) {
-					    if (navigator.geolocation) {
-    						navigator.geolocation.getCurrentPosition((pos) => {
-							if (!model.address)
-								model.address = {};
+                if (values.length > 0 && values[0].trim() != "")
+                    model.address.geo.latitude = parseFloat(values[0].trim());
+                else
+                    model.address.geo.latitude = 0
 
-							if (!model.address.geo)
-								model.address.geo = {};
+                if (values.length > 1 && values[1].trim() != "")
+                    model.address.geo.longitude = parseFloat(values[1].trim());
+                else
+                    model.address.geo.longitude = 0
+            },
+            buttons: [{
+                classes: "btn-location",
+                label: "Current location",
+                onclick: function(model) {
+                    if (navigator.geolocation) {
+                        navigator.geolocation.getCurrentPosition((pos) => {
+                            if (!model.address)
+                                model.address = {};
 
-							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.");
-						}
-					}
-				},
-				{
-					classes: "btn-clear",
-					label: "Clear",
-					onclick: function(model) {
-						model.address.geo = {
-							latitude: 0,
-							longitude: 0
-						};
-					}
-				}
-			]
-		}, 
-		{
-			type: "staticMap",
-			label: "Map",
-			model: "address.geo",
-			visible: false				
-		},
-		{
-			type: "label",
-			label: "Created (label field)",
-			model: "created",
-			get(model) { return model && model.created ? moment(model.created).format("LLL") : "-"; }
-		},
-		{
-			type: "switch",
-			label: "Status (switch field)",
-			model: "status",
-			multi: true,
-			default: true,
-			textOn: "Active",
-			textOff: "Inactive"
-		},
-		{
-			type: "textArea",
-			label: "Biography (textArea field)",
-			model: "bio",
-			hint: "Max 500 characters",
-			max: 500,
-			placeholder: "User's biography",
-			rows: 4,
-			validator: validators.string
-		}
-	]
-}
\ No newline at end of file
+                            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.");
+                    }
+                }
+            }, {
+                classes: "btn-clear",
+                label: "Clear",
+                onclick: function(model) {
+                    model.address.geo = {
+                        latitude: 0,
+                        longitude: 0
+                    };
+                }
+            }]
+        }, {
+            type: "staticMap",
+            label: "Map",
+            model: "address.geo",
+            visible: false
+        }, {
+            type: "label",
+            label: "Created (label field)",
+            model: "created",
+            get(model) {
+                return model && model.created ? moment(model.created).format("LLL") : "-";
+            }
+        }, {
+            type: "switch",
+            label: "Status (switch field)",
+            model: "status",
+            multi: true,
+            default: true,
+            textOn: "Active",
+            textOff: "Inactive"
+        }, {
+            type: "textArea",
+            label: "Biography (textArea field)",
+            model: "bio",
+            hint: "Max 500 characters",
+            max: 500,
+            placeholder: "User's biography",
+            rows: 4,
+            validator: validators.string
+        }
+    ]
+}
diff --git a/src/fields/fieldVueMultiSelect.vue b/src/fields/fieldVueMultiSelect.vue
index 64f1d94d..d1868e00 100644
--- a/src/fields/fieldVueMultiSelect.vue
+++ b/src/fields/fieldVueMultiSelect.vue
@@ -1,83 +1,85 @@
 <template lang="jade">
-	multiselect(
-		:id="schema.selectOptions.id", 
+	multiselect(		
+		:id="schema.selectOptions.id",
 		:options="options",
-		:multiple="schema.multiSelect", 
-		:selected="value", 
-		:key="schema.selectOptions.key || null", 
-		:label="schema.selectOptions.label || null", 
-		:searchable="schema.selectOptions.searchable", 
-		:clear-on-select="schema.selectOptions.clearOnSelect", 
-		:hide-selected="schema.selectOptions.hideSelected", 
-		:placeholder="schema.placeholder", 
-		:max-height="schema.selectOptions.maxHeight", 
-		:allow-empty="schema.selectOptions.allowEmpty", 
-		:reset-after="schema.selectOptions.resetAfter", 
-		:close-on-select="schema.selectOptions.closeOnSelect", 
+		:multiple="schema.multiSelect",
+		:selected="value",
+		:key="schema.selectOptions.key || null",
+		:label="schema.selectOptions.label || null",
+		:searchable="schema.selectOptions.searchable",
+		:clear-on-select="schema.selectOptions.clearOnSelect",
+		:hide-selected="schema.selectOptions.hideSelected",
+		:placeholder="schema.placeholder",
+		:max-height="schema.selectOptions.maxHeight",
+		:allow-empty="schema.selectOptions.allowEmpty",
+		:reset-after="schema.selectOptions.resetAfter",
+		:close-on-select="schema.selectOptions.closeOnSelect",
 		:custom-label="schema.selectOptions.customLabel || null",
 		:taggable="schema.selectOptions.taggable",
 		:tag-placeholder="schema.selectOptions.tagPlaceholder",
-		:max="schema.selectOptions.max",
-		@update="updateSelected", 
-		@select="onSelect", 
-		@remove="onRemove", 
-		@search-change="onSearchChange", 
-		@tag="addTag", 
-		@open="onOpen", 
-		@close="onClose", 
-		:show-labels="schema.selectOptions.showLabels"
-		// TODO: add other options from multiSelectMixin
-		)
+		:max="schema.max",
+		@update="updateSelected",
+		@tag="addTag",
+		@select="onSelect",
+		@remove="onRemove",
+		@search-change="onSearchChange",
+		@open="onOpen",
+		@close="onClose",
+		:show-pointer="schema.selectOptions.showPointer",
+		:select-label="schema.selectOptions.selectLabel",
+		:selected-label="schema.selectOptions.selectedLabel",
+		:deselect-label="schema.selectOptions.deselectLabel",
+		:show-labels="schema.selectOptions.showLabels",
+		:limit="schema.selectOptions.limit",
+		:limit-text="schema.selectOptions.limitText",
+		:loading="schema.selectOptions.loading",
+		:disabled="schema.disabled",
+	)
 </template>
 <script>
-// import { isObject } from "lodash";
 import abstractField from "./abstractField";
 
 export default {
-	mixins: [abstractField],
-	computed: {
-		options() {
-			let values = this.schema.values;
-			if (typeof(values) == "function") {
-				return values.apply(this, [this.model, this.schema]);
-			} else {
-				return values;
-			}
-		}
-	},
-
-	methods: {
-		updateSelected(value, id) {
-			this.value = value;
-		},
-		onSelect(selectedOption, id) {
-			console.log("onSelect", selectedOption, id);
-		},
-		onRemove(removedOption, id) {
-			console.log("onRemove", removedOption, id);
-		},
-		onSearchChange(searchQuery, id) {
-			console.log("onSearchChange", searchQuery, id);
-		},
-		addTag(newTag, id) {
-			console.log("addTag", newTag, id);
-			// TODO: implement tag object by sending this function into schema definition
-			/* const tag = {
-                name: newTag,
-                // Just for example needs as we use Array of Objects that should have other properties filled.
-                // For primitive values you can simply push the tag into options and selected arrays.
-                code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
-            }*/
-			this.options.push(newTag);
-			this.value.push(newTag);
-		},
-		onOpen(id) {
-			console.log("onOpen", id);
-		},
-		onClose(value, id) {
-			console.log("onClose", value, id);
-		}
-	}
+    mixins: [abstractField],
+    computed: {
+        options() {
+            let values = this.schema.values;
+            if (typeof(values) == "function") {
+                return values.apply(this, [this.model, this.schema]);
+            } else {
+                return values;
+            }
+        }
+    },
+    methods: {
+        updateSelected(value, id) {
+            this.value = value;
+        },
+        addTag(newTag, id) {
+            let onNewTag = this.schema.selectOptions.onNewTag;
+            if (typeof(onNewTag) == "function") {
+                onNewTag(newTag, id, this.options, this.value);
+            }
+        },
+        onSearchChange(searchQuery, id) {
+            let onSearch = this.schema.selectOptions.onSearch;
+            if (typeof(onSearch) == "function") {
+                onSearch(searchQuery, id, this.options);
+            }
+        },
+        onSelect(selectedOption, id) {
+            // console.log("onSelect", selectedOption, id);
+        },
+        onRemove(removedOption, id) {
+            // console.log("onRemove", removedOption, id);
+        },
+        onOpen(id) {
+            // console.log("onOpen", id);
+        },
+        onClose(value, id) {
+            // console.log("onClose", value, id);
+        }
+    },
     created() {
         // Check if the component is loaded
         if (window.VueMultiselect) {

From f870dae185cc48f597918dfee30409bbaceafe65 Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Mon, 8 Aug 2016 11:28:45 +0200
Subject: [PATCH 7/9] test: basic unit testing

---
 .../specs/fields/fieldVueMultiSelect.spec.js  | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 test/unit/specs/fields/fieldVueMultiSelect.spec.js

diff --git a/test/unit/specs/fields/fieldVueMultiSelect.spec.js b/test/unit/specs/fields/fieldVueMultiSelect.spec.js
new file mode 100644
index 00000000..2d7b3fcf
--- /dev/null
+++ b/test/unit/specs/fields/fieldVueMultiSelect.spec.js
@@ -0,0 +1,49 @@
+import { expect } from "chai";
+import { createVueField } from "../util";
+
+import Vue from "vue";
+import fieldVueMultiSelect from "src/fields/fieldVueMultiSelect.vue";
+
+Vue.component("fieldVueMultiSelect", fieldVueMultiSelect);
+
+// eslint-disable-next-line
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	[ el, vm, field ] = createVueField("fieldVueMultiSelect", schema, model, disabled, options);
+}
+
+describe("fieldVueMultiSelect.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "vueMultiSelect",
+			label: "Cities",
+			model: "city",
+			multiSelect: false,
+			required: false,
+			values: [
+				"London",
+				"Paris",
+				"Rome",
+				"Berlin"
+			]
+		};
+		let model = { city: "Paris" };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("select")[0];
+		});
+
+		it("should contain a select element", () => {
+			expect(field).to.be.exist;
+			expect(field.$el).to.be.exist;
+
+			expect(input).to.be.defined;
+			// expect(input.classList.contains("form-control")).to.be.false;
+			// expect(input.disabled).to.be.false;	
+		});
+	});
+});
\ No newline at end of file

From acfa264b6d1e9d41f150649acd3e3699df5dbe9f Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Mon, 8 Aug 2016 11:30:38 +0200
Subject: [PATCH 8/9] fix: add a .jsbeautify to help with linting

---
 .jsbeautifyrc | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .jsbeautifyrc

diff --git a/.jsbeautifyrc b/.jsbeautifyrc
new file mode 100644
index 00000000..71c7efbf
--- /dev/null
+++ b/.jsbeautifyrc
@@ -0,0 +1,6 @@
+{
+  "html": {
+    "indent_char": "\t",
+    "indent_size": 1
+  }
+}
\ No newline at end of file

From 54a3502989e0879ee0f1e75ddea52cd3ccdf2443 Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Mon, 8 Aug 2016 11:31:01 +0200
Subject: [PATCH 9/9] fix: lint error and warning

---
 src/fields/fieldVueMultiSelect.vue | 97 +++++++++++++++---------------
 1 file changed, 49 insertions(+), 48 deletions(-)

diff --git a/src/fields/fieldVueMultiSelect.vue b/src/fields/fieldVueMultiSelect.vue
index d1868e00..ac798c38 100644
--- a/src/fields/fieldVueMultiSelect.vue
+++ b/src/fields/fieldVueMultiSelect.vue
@@ -37,57 +37,58 @@
 	)
 </template>
 <script>
+/*global Vue:true*/
 import abstractField from "./abstractField";
 
 export default {
-    mixins: [abstractField],
-    computed: {
-        options() {
-            let values = this.schema.values;
-            if (typeof(values) == "function") {
-                return values.apply(this, [this.model, this.schema]);
-            } else {
-                return values;
-            }
-        }
-    },
-    methods: {
-        updateSelected(value, id) {
-            this.value = value;
-        },
-        addTag(newTag, id) {
-            let onNewTag = this.schema.selectOptions.onNewTag;
-            if (typeof(onNewTag) == "function") {
-                onNewTag(newTag, id, this.options, this.value);
-            }
-        },
-        onSearchChange(searchQuery, id) {
-            let onSearch = this.schema.selectOptions.onSearch;
-            if (typeof(onSearch) == "function") {
-                onSearch(searchQuery, id, this.options);
-            }
-        },
-        onSelect(selectedOption, id) {
-            // console.log("onSelect", selectedOption, id);
-        },
-        onRemove(removedOption, id) {
-            // console.log("onRemove", removedOption, id);
-        },
-        onOpen(id) {
-            // console.log("onOpen", id);
-        },
-        onClose(value, id) {
-            // console.log("onClose", value, id);
-        }
-    },
-    created() {
-        // Check if the component is loaded
-        if (window.VueMultiselect) {
-            Vue.component("multiselect", window.VueMultiselect.default);           
-        } else {
-            console.error("'vue-multiselect' is missing. Please download from https://github.com/monterail/vue-multiselect and load the script in the HTML head section!");
-        }
-    }
+	mixins: [abstractField],
+	computed: {
+		options() {
+			let values = this.schema.values;
+			if (typeof(values) == "function") {
+				return values.apply(this, [this.model, this.schema]);
+			} else {
+				return values;
+			}
+		}
+	},
+	methods: {
+		updateSelected(value/*, id*/) {
+			this.value = value;
+		},
+		addTag(newTag, id) {
+			let onNewTag = this.schema.selectOptions.onNewTag;
+			if (typeof(onNewTag) == "function") {
+				onNewTag(newTag, id, this.options, this.value);
+			}
+		},
+		onSearchChange(searchQuery, id) {
+			let onSearch = this.schema.selectOptions.onSearch;
+			if (typeof(onSearch) == "function") {
+				onSearch(searchQuery, id, this.options);
+			}
+		},
+		onSelect(/*selectedOption, id*/) {
+			// console.log("onSelect", selectedOption, id);
+		},
+		onRemove(/*removedOption, id*/) {
+			// console.log("onRemove", removedOption, id);
+		},
+		onOpen(/*id*/) {
+			// console.log("onOpen", id);
+		},
+		onClose(/*value, id*/) {
+			// console.log("onClose", value, id);
+		}
+	},
+	created() {
+		// Check if the component is loaded
+		if (window.VueMultiselect) {
+			Vue.component("multiselect", window.VueMultiselect.default);
+		} else {
+			console.error("'vue-multiselect' is missing. Please download from https://github.com/monterail/vue-multiselect and load the script in the HTML head section!");
+		}
+	}
 };
 </script>