2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-04 06:32:23 +03:00

Allow to disable options with selectable function (#921)

* allow to disable options with selectable function

* add simple spec for new selectable option

* Prevent non-selectable options from being keyboard navigatable
This commit is contained in:
Markus
2019-10-25 22:11:50 +02:00
committed by Jeff Sagal
parent 17c1d3db97
commit aea81a6f5c
5 changed files with 104 additions and 18 deletions
+16 -3
View File
@@ -57,9 +57,9 @@
v-for="(option, index) in filteredOptions"
:key="getOptionKey(option)"
class="vs__dropdown-option"
:class="{ 'vs__dropdown-option--selected': isOptionSelected(option), 'vs__dropdown-option--highlight': index === typeAheadPointer }"
@mouseover="typeAheadPointer = index"
@mousedown.prevent.stop="select(option)"
:class="{ 'vs__dropdown-option--selected': isOptionSelected(option), 'vs__dropdown-option--highlight': index === typeAheadPointer, 'vs__dropdown-option--disabled': !selectable(option) }"
@mouseover="selectable(option) ? typeAheadPointer = index : null"
@mousedown.prevent.stop="selectable(option) ? select(option) : null"
>
<slot name="option" v-bind="normalizeOptionForSlot(option)">
{{ getOptionLabel(option) }}
@@ -224,6 +224,19 @@
default: option => option,
},
/**
* Decides wether an option is selectable or not. Not selectable options
* are displayed but disabled and cannot be selected.
*
* @type {Function}
* @param {Object|String} option
* @return {Boolean}
*/
selectable: {
type: Function,
default: option => true,
},
/**
* Callback to generate the label text. If {option}
* is an object, returns option[this.label] by default.