🆕 new: new field type: Vue Multiselect

Author: Lionel Bijaoui

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
 		},	
 
 		{

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,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>