From a9ae09edc03285705ed3f05eb7f602f7c55ced76 Mon Sep 17 00:00:00 2001 From: Andrew Date: Sun, 5 Nov 2017 13:18:25 +1100 Subject: [PATCH 1/3] Add clear button to single select --- src/components/Select.vue | 48 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/src/components/Select.vue b/src/components/Select.vue index be9f45e..1ff37a5 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -23,6 +23,10 @@ .v-select.rtl .dropdown-menu { text-align: right; } + .v-select.rtl .dropdown-toggle .clear { + left: 30px; + right: auto; + } /* Open Indicator */ .v-select .open-indicator { position: absolute; @@ -80,6 +84,22 @@ clear: both; height: 0; } + + /* Clear Button */ + .v-select .dropdown-toggle .clear { + position: absolute; + bottom: 7px; + right: 30px; + font-size: 23px; + font-weight: 700; + line-height: 1; + color: rgba(60, 60, 60, .5); + padding: 0; + border: 0; + background-color: transparent; + cursor: pointer; + } + /* Dropdown Toggle States */ .v-select.searchable .dropdown-toggle { cursor: text; @@ -244,6 +264,7 @@ /* Disabled state */ .v-select.disabled .dropdown-toggle, + .v-select.disabled .dropdown-toggle .clear, .v-select.disabled .dropdown-toggle input, .v-select.disabled .selected-tag .close, .v-select.disabled .open-indicator { @@ -316,6 +337,17 @@ aria-label="Search for option" > + + @@ -689,6 +721,14 @@ } }, + /** + * Clears the currently selected value(s) + * @return {void} + */ + clearSelection() { + this.mutableValue = this.multiple ? [] : null + }, + /** * Called from this.select after each selection. * @param {Object|String} option @@ -935,6 +975,14 @@ } return [] + }, + + /** + * Determines if the clear button should be displayed. + * @return {Boolean} + */ + showClearButton() { + return !this.multiple && !this.open && this.mutableValue != null } }, From 5465b77436eb03769ce39f92891a0006c18afb6f Mon Sep 17 00:00:00 2001 From: Andrew Date: Thu, 30 Nov 2017 19:06:30 +1100 Subject: [PATCH 2/3] Add tests --- test/unit/specs/Select.spec.js | 43 ++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js index d08d9e2..89194b6 100644 --- a/test/unit/specs/Select.spec.js +++ b/test/unit/specs/Select.spec.js @@ -1222,4 +1222,47 @@ describe('Select.vue', () => { }) }) }) + + describe( 'Clear button', () => { + + it( 'should display clear button on single select with a selected value', () => { + const VueSelect = Vue.extend( vSelect ) + const vm = new VueSelect({ + propsData: { + options: ['foo','bar'], + value: 'foo' + } + }).$mount() + + expect(vm.showClearButton).toEqual(true) + }) + + it( 'should not display clear button on multiple select', () => { + const VueSelect = Vue.extend( vSelect ) + const vm = new VueSelect({ + propsData: { + options: ['foo','bar'], + value: 'foo', + multiple: true + } + }).$mount() + + expect(vm.showClearButton).toEqual(false) + }) + + it( 'should remove selected value when clear button is clicked', () => { + const VueSelect = Vue.extend( vSelect ) + const vm = new VueSelect({ + propsData: { + options: ['foo','bar'], + value: 'foo' + } + }).$mount() + + expect(vm.mutableValue).toEqual('foo') + vm.$el.querySelector( 'button.clear' ).click() + expect(vm.mutableValue).toEqual(null) + }) + + }); }) From fcf9a8e8b709bc0e21447b48f94e09a380ede419 Mon Sep 17 00:00:00 2001 From: Andrew Date: Thu, 30 Nov 2017 19:35:18 +1100 Subject: [PATCH 3/3] Add tests --- test/unit/specs/Select.spec.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js index 89194b6..21eff1c 100644 --- a/test/unit/specs/Select.spec.js +++ b/test/unit/specs/Select.spec.js @@ -1225,7 +1225,7 @@ describe('Select.vue', () => { describe( 'Clear button', () => { - it( 'should display clear button on single select with a selected value', () => { + it( 'should be displayed on single select when value is selected', () => { const VueSelect = Vue.extend( vSelect ) const vm = new VueSelect({ propsData: { @@ -1237,7 +1237,7 @@ describe('Select.vue', () => { expect(vm.showClearButton).toEqual(true) }) - it( 'should not display clear button on multiple select', () => { + it( 'should not be displayed on multiple select', () => { const VueSelect = Vue.extend( vSelect ) const vm = new VueSelect({ propsData: { @@ -1250,7 +1250,7 @@ describe('Select.vue', () => { expect(vm.showClearButton).toEqual(false) }) - it( 'should remove selected value when clear button is clicked', () => { + it( 'should remove selected value when clicked', () => { const VueSelect = Vue.extend( vSelect ) const vm = new VueSelect({ propsData: { @@ -1263,6 +1263,20 @@ describe('Select.vue', () => { vm.$el.querySelector( 'button.clear' ).click() expect(vm.mutableValue).toEqual(null) }) + + it( 'should be disabled when component is disabled', () => { + const VueSelect = Vue.extend( vSelect ) + const vm = new VueSelect({ + propsData: { + options: ['foo','bar'], + value: 'foo', + disabled: true + } + }).$mount() + + const buttonEl = vm.$el.querySelector( 'button.clear' ) + expect(buttonEl.disabled).toEqual(true); + }) }); })