Merge commit '99f2dfdc0a70a2a6e1e2fe4d1370f8d4b728a3ad' into reduce-bug-fix-options-watcher

src/components/Select.vue

@@ -51,15 +51,15 @@
     </div>
 
     <transition :name="transition">
-      <ul ref="dropdownMenu" v-if="dropdownOpen" class="vs__dropdown-menu" role="listbox" @mousedown="onMousedown" @mouseup="onMouseUp">
+      <ul ref="dropdownMenu" v-if="dropdownOpen" class="vs__dropdown-menu" role="listbox" @mousedown.prevent="onMousedown" @mouseup="onMouseUp">
         <li
           role="option"
           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.
@@ -838,16 +851,10 @@
           case 9:
             //  tab
             return this.onTab();
-        }
-      },
-
-      /**
-       * Search 'input' KeyBoardEvent handler.
-       * @param e {KeyboardEvent}
-       * @return {Function}
-       */
-      onSearchKeyUp (e) {
-        switch (e.keyCode) {
+          case 13:
+            //  enter.prevent
+            e.preventDefault();
+            return this.typeAheadSelect();
           case 27:
             //  esc
             return this.onEscape();
@@ -859,10 +866,6 @@
             //  down.prevent
             e.preventDefault();
             return this.typeAheadDown();
-          case 13:
-            //  enter.prevent
-            e.preventDefault();
-            return this.typeAheadSelect();
         }
       }
     },
@@ -941,7 +944,6 @@
             },
             events: {
               'keydown': this.onSearchKeyDown,
-              'keyup': this.onSearchKeyUp,
               'blur': this.onSearchBlur,
               'focus': this.onSearchFocus,
               'input': (e) => this.search = e.target.value

src/mixins/typeAheadPointer.js

@@ -7,35 +7,46 @@ export default {
 
   watch: {
     filteredOptions() {
-      this.typeAheadPointer = 0
+      for (let i = 0; i < this.filteredOptions.length; i++) {
+        if (this.selectable(this.filteredOptions[i])) {
+          this.typeAheadPointer = i;
+          break;
+        }
+      }
     }
   },
 
   methods: {
     /**
      * Move the typeAheadPointer visually up the list by
-     * subtracting the current index by one.
+     * setting it to the previous selectable option.
      * @return {void}
      */
     typeAheadUp() {
-      if (this.typeAheadPointer > 0) {
-        this.typeAheadPointer--
-        if( this.maybeAdjustScroll ) {
-          this.maybeAdjustScroll()
+      for (let i = this.typeAheadPointer - 1; i >= 0; i--) {
+        if (this.selectable(this.filteredOptions[i])) {
+          this.typeAheadPointer = i;
+          if( this.maybeAdjustScroll ) {
+            this.maybeAdjustScroll()
+          }
+          break;
         }
       }
     },
 
     /**
      * Move the typeAheadPointer visually down the list by
-     * adding the current index by one.
+     * setting it to the next selectable option.
      * @return {void}
      */
     typeAheadDown() {
-      if (this.typeAheadPointer < this.filteredOptions.length - 1) {
-        this.typeAheadPointer++
-        if( this.maybeAdjustScroll ) {
-          this.maybeAdjustScroll()
+      for (let i = this.typeAheadPointer + 1; i < this.filteredOptions.length; i++) {
+        if (this.selectable(this.filteredOptions[i])) {
+          this.typeAheadPointer = i;
+          if( this.maybeAdjustScroll ) {
+            this.maybeAdjustScroll()
+          }
+          break;
         }
       }
     },

src/scss/modules/_dropdown-option.scss

@@ -16,3 +16,12 @@
   background: $vs-state-active-bg;
   color: $vs-state-active-color;
 }
+
+.vs__dropdown-option--disabled {
+  background: inherit;
+  color: $vs-state-disabled-color;
+
+  &:hover {
+    cursor: inherit;
+  }
+}