From 669984718d0e51ded8342b872ca70b8a3b4fac43 Mon Sep 17 00:00:00 2001 From: es Date: Mon, 26 Dec 2016 17:12:56 +0800 Subject: [PATCH 001/514] Add option to disable the entire component --- src/components/Select.vue | 23 +++++++++++++++++++---- test/unit/specs/Select.spec.js | 21 ++++++++++++++++++++- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/src/components/Select.vue b/src/components/Select.vue index c2523e96b..8b98d0d1c 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -3,6 +3,10 @@ position: relative; } + .v-select .disabled { + cursor: not-allowed !important; + } + .v-select .open-indicator { position: absolute; bottom: 6px; @@ -193,13 +197,13 @@ @blur="open = false" @focus="open = true" type="search" - class="form-control" + :class="[{'disabled': disabled}, 'form-control']" :placeholder="searchPlaceholder" :readonly="!searchable" :style="{ width: isValueEmpty ? '100%' : 'auto' }" > - +
Loading...
@@ -284,6 +288,15 @@ default: false }, + /** + * Disable the entire component. + * @type {Boolean} + */ + disabled: { + type: Boolean, + default: false + }, + /** * Equivalent to the `placeholder` attribute on an ``. * @type {Object} @@ -495,8 +508,10 @@ if (this.open) { this.$els.search.blur() // dropdown will close on blur } else { - this.open = true - this.$els.search.focus() + if (!this.disabled) { + this.open = true + this.$els.search.focus() + } } } }, diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js index fd5186315..7b8891534 100644 --- a/test/unit/specs/Select.spec.js +++ b/test/unit/specs/Select.spec.js @@ -253,6 +253,25 @@ describe('Select.vue', () => { }) describe('Toggling Dropdown', () => { + it('should not open the dropdown when the el is clicked but the component is disabled', (done) => { + const vm = new Vue({ + template: '
', + components: {vSelect}, + data: { + value: [{label: 'one'}], + options: [{label: 'one'}] + } + }).$mount() + + vm.$children[0].toggleDropdown({target: vm.$children[0].$els.search}) + Vue.nextTick(() => { + Vue.nextTick(() => { + expect(vm.$children[0].open).toEqual(false) + done() + }) + }) + }) + it('should open the dropdown when the el is clicked', (done) => { const vm = new Vue({ template: '
', @@ -896,4 +915,4 @@ describe('Select.vue', () => { }) }) }) -}) \ No newline at end of file +}) From 68a1c33d9b3de820f9c7ae88e78979f01a92868f Mon Sep 17 00:00:00 2001 From: es Date: Mon, 26 Dec 2016 17:25:20 +0800 Subject: [PATCH 002/514] Add gray background-color when disabled --- src/components/Select.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Select.vue b/src/components/Select.vue index 8b98d0d1c..633c425a1 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -7,6 +7,10 @@ cursor: not-allowed !important; } + .v-select .dropdown-toggle .disabled { + background-color: rgb(248, 248, 248); + } + .v-select .open-indicator { position: absolute; bottom: 6px; @@ -176,7 +180,7 @@