mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
Add option to disable the entire component
This commit is contained in:
@@ -3,6 +3,10 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.v-select .disabled {
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
|
||||||
.v-select .open-indicator {
|
.v-select .open-indicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 6px;
|
bottom: 6px;
|
||||||
@@ -193,13 +197,13 @@
|
|||||||
@blur="open = false"
|
@blur="open = false"
|
||||||
@focus="open = true"
|
@focus="open = true"
|
||||||
type="search"
|
type="search"
|
||||||
class="form-control"
|
:class="[{'disabled': disabled}, 'form-control']"
|
||||||
:placeholder="searchPlaceholder"
|
:placeholder="searchPlaceholder"
|
||||||
:readonly="!searchable"
|
:readonly="!searchable"
|
||||||
:style="{ width: isValueEmpty ? '100%' : 'auto' }"
|
:style="{ width: isValueEmpty ? '100%' : 'auto' }"
|
||||||
>
|
>
|
||||||
|
|
||||||
<i v-el:open-indicator role="presentation" class="open-indicator"></i>
|
<i v-el:open-indicator role="presentation" :class="[{'disabled': disabled}, 'open-indicator']"></i>
|
||||||
|
|
||||||
<slot name="spinner">
|
<slot name="spinner">
|
||||||
<div class="spinner" v-show="loading">Loading...</div>
|
<div class="spinner" v-show="loading">Loading...</div>
|
||||||
@@ -284,6 +288,15 @@
|
|||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable the entire component.
|
||||||
|
* @type {Boolean}
|
||||||
|
*/
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Equivalent to the `placeholder` attribute on an `<input>`.
|
* Equivalent to the `placeholder` attribute on an `<input>`.
|
||||||
* @type {Object}
|
* @type {Object}
|
||||||
@@ -495,8 +508,10 @@
|
|||||||
if (this.open) {
|
if (this.open) {
|
||||||
this.$els.search.blur() // dropdown will close on blur
|
this.$els.search.blur() // dropdown will close on blur
|
||||||
} else {
|
} else {
|
||||||
this.open = true
|
if (!this.disabled) {
|
||||||
this.$els.search.focus()
|
this.open = true
|
||||||
|
this.$els.search.focus()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -253,6 +253,25 @@ describe('Select.vue', () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
describe('Toggling Dropdown', () => {
|
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: '<div><v-select :options="options" :value.sync="value" disabled></v-select></div>',
|
||||||
|
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) => {
|
it('should open the dropdown when the el is clicked', (done) => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
|
template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
|
||||||
|
|||||||
Reference in New Issue
Block a user