Adding Vue-Multiselect

dev/schema.js

@@ -77,6 +77,46 @@ module.exports = {
 			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
 		},	
 
 		{

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"
   }
 }

src/fields/fieldVueMultiSelect.vue

@@ -0,0 +1,86 @@
+<template lang="jade">
+	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";
+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(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>