Merge pull request #240 from lionel-bijaoui/lb_multiselect_update

Update the options for the v2 of multiselect
vue-generators · Jun 27, 2017 · b6e8cc5 · b6e8cc5
2 parents a0dc302 + 155f5a1
commit b6e8cc5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 40 deletions.
diff --git a/src/fields/optional/fieldVueMultiSelect.vue b/src/fields/optional/fieldVueMultiSelect.vue
@@ -1,31 +1,26 @@
 <template lang="pug">
-	multiselect(		
+	multiselect(
 		:id="selectOptions.id",
 		:options="options",
-		:multiple="schema.multiSelect",
 		:value="value",
+		:multiple="selectOptions.multiple",
 		:track-by="selectOptions.trackBy || null",
 		:label="selectOptions.label || null",
 		:searchable="selectOptions.searchable",
-		:local-search="selectOptions.localSearch",
 		:clear-on-select="selectOptions.clearOnSelect",
 		:hide-selected="selectOptions.hideSelected",
 		:placeholder="schema.placeholder",
-		:max-height="selectOptions.maxHeight",
 		:allow-empty="selectOptions.allowEmpty",
 		:reset-after="selectOptions.resetAfter",
 		:close-on-select="selectOptions.closeOnSelect",
 		:custom-label="customLabel",
 		:taggable="selectOptions.taggable",
 		:tag-placeholder="selectOptions.tagPlaceholder",
 		:max="schema.max || null",
-		@input="updateSelected",
-		@tag="addTag",
-		@select="onSelect",
-		@remove="onRemove",
-		@search-change="onSearchChange",
-		@open="onOpen",
-		@close="onClose",		
+		:options-limit="selectOptions.optionsLimit",
+		:group-label="selectOptions.groupLabel",
+		:block-keys="selectOptions.blockKeys",
+		:internal-search="selectOptions.internalSearch",
 		:select-label="selectOptions.selectLabel",
 		:selected-label="selectOptions.selectedLabel",
 		:deselect-label="selectOptions.deselectLabel",
@@ -34,9 +29,16 @@
 		:limit-text="selectOptions.limitText",
 		:loading="selectOptions.loading",
 		:disabled="disabled",
-		:option-partial="selectOptions.optionPartial",
+		:max-height="selectOptions.maxHeight",
 		:show-pointer="selectOptions.showPointer",
-		:option-height="selectOptions.optionHeight"
+		@input="updateSelected",
+		@select="onSelect",
+		@remove="onRemove",
+		@search-change="onSearchChange",
+		@tag="addTag",
+		@open="onOpen",
+		@close="onClose",
+		:option-height="selectOptions.optionHeight",
 	)
 </template>
 <script>

diff --git a/test/unit/specs/fields/fieldVueMultiSelect.spec.js b/test/unit/specs/fields/fieldVueMultiSelect.spec.js
@@ -12,7 +12,7 @@ Vue.component("multiselect", VueMultiSelect);
 let el, vm, field;
 
 function createField(test, schema = {}, model = null, disabled = false, options) {
-	[ el, vm, field ] = createVueField(test, "fieldVueMultiSelect", schema, model, disabled, options);
+	[el, vm, field] = createVueField(test, "fieldVueMultiSelect", schema, model, disabled, options);
 }
 
 describe("fieldVueMultiSelect.vue", function() {
@@ -22,20 +22,21 @@ describe("fieldVueMultiSelect.vue", function() {
 			type: "vueMultiSelect",
 			label: "Cities",
 			model: "city",
-			multiSelect: true,
 			required: false,
 			values: [
 				"London",
 				"Paris",
 				"Rome",
 				"Berlin"
 			],
-			selectOptions: {}
+			selectOptions: {
+				multiple: true
+			}
 		};
 		let model = { city: "Paris" };
 		let input;
 
-		before( () => {
+		before(() => {
 			createField(this, schema, model, false);
 			input = el.querySelector(".multiselect");
 		});
@@ -58,7 +59,7 @@ describe("fieldVueMultiSelect.vue", function() {
 
 		it("should set disabled", (done) => {
 			field.disabled = true;
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(input.classList.contains("multiselect--disabled")).to.be.true;
 				field.disabled = false;
 				done();
@@ -67,7 +68,7 @@ describe("fieldVueMultiSelect.vue", function() {
 
 		it("input value should be the model value after changed", (done) => {
 			model.city = "Rome";
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(input.querySelectorAll("li .multiselect__option--selected").length).to.be.equal(1);
 				let options = input.querySelectorAll("li .multiselect__option");
 				expect(options[2].querySelector("span").textContent).to.be.equal("Rome");
@@ -77,8 +78,8 @@ describe("fieldVueMultiSelect.vue", function() {
 		});
 
 		it("input value should be the model value after changed (multiselection)", (done) => {
-			model.city = ["Paris","Rome"];
-			vm.$nextTick( () => {
+			model.city = ["Paris", "Rome"];
+			vm.$nextTick(() => {
 				expect(input.querySelectorAll("li .multiselect__option--selected").length).to.be.equal(2);
 				let options = input.querySelectorAll("li .multiselect__option");
 				expect(options[1].querySelector("span").textContent).to.be.equal("Paris");
@@ -93,7 +94,7 @@ describe("fieldVueMultiSelect.vue", function() {
 			let options = input.querySelectorAll("li .multiselect__option");
 			trigger(options[2], "mousedown");
 
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(model.city.length).to.be.equal(1);
 				expect(model.city[0]).to.be.equal("Paris");
 				done();
@@ -106,31 +107,28 @@ describe("fieldVueMultiSelect.vue", function() {
 				name: "Vue.js",
 				language: "JavaScript"
 			};
-			let schema = {...schema};
+			let schema = {...schema };
 			let model = {
 				city: [option]
 			};
-			schema.values = [
-				{
-					name: "Vue.js",
-					language: "JavaScript"
-				},
-				{
-					name: "Rails",
-					language: "Ruby"
-				},
-				{
-					name: "Sinatra",
-					language: "Ruby"
-				}];
+			schema.values = [{
+				name: "Vue.js",
+				language: "JavaScript"
+			}, {
+				name: "Rails",
+				language: "Ruby"
+			}, {
+				name: "Sinatra",
+				language: "Ruby"
+			}];
 			schema.selectOptions = {};
 			before(() => {
 				createField(this, schema, model, false);
 				input = el.querySelector(".multiselect");
 			});
 
 			it("model value should work with objects", (done) => {
-				schema.selectOptions = {label: "name", trackBy: "name"};
+				schema.selectOptions = { label: "name", trackBy: "name" };
 				vm.$nextTick(() => {
 					expect(model.city.length).to.be.equal(1);
 					expect(model.city[0]).to.be.eql(schema.values[0]);
@@ -139,7 +137,7 @@ describe("fieldVueMultiSelect.vue", function() {
 			});
 
 			it("options should contain only text specified in label", (done) => {
-				schema.selectOptions = {label: "language", trackBy: "language"};
+				schema.selectOptions = { label: "language", trackBy: "language" };
 				vm.$nextTick(() => {
 					let options = input.querySelectorAll("li .multiselect__option");
 					expect(options[0].querySelector("span").textContent).to.be.equal("JavaScript");
@@ -151,7 +149,7 @@ describe("fieldVueMultiSelect.vue", function() {
 				schema.selectOptions = {
 					label: "name",
 					trackBy: "name",
-					customLabel: ({name, language}) => {
+					customLabel: ({ name, language }) => {
 						return `${name}-${language}`;
 					}
 				};
@@ -163,4 +161,4 @@ describe("fieldVueMultiSelect.vue", function() {
 			});
 		});
 	});
-});
+});