Merge branch 'master' of https://github.com/sagalbot/vue-select into patch-3

src/components/Select.vue

@@ -3,12 +3,26 @@
     position: relative;
     font-family: sans-serif;
   }
+
   .v-select,
   .v-select * {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
+  /* Rtl support */
+  .v-select.rtl .open-indicator {
+    left: 10px;
+    right: auto;
+  }
+  .v-select.rtl .selected-tag {
+    float: right;
+    margin-right: 3px;
+    margin-left: 1px;
+  }
+  .v-select.rtl .dropdown-menu {
+    text-align: right;
+  }
   /* Open Indicator */
   .v-select .open-indicator {
     position: absolute;
@@ -20,7 +34,6 @@
     transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
     transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
     opacity: 1;
-    transition: opacity .1s;
     height: 20px; width: 10px;
   }
   .v-select .open-indicator:before {
@@ -58,7 +71,6 @@
     border: 1px solid rgba(60, 60, 60, .26);
     border-radius: 4px;
     white-space: normal;
-    transition: border-radius .25s;
   }
   .v-select .dropdown-toggle:after {
     visibility: hidden;
@@ -177,10 +189,6 @@
     float: left;
     clear: none;
   }
-  /* Search Input States */
-  .v-select.unsearchable input[type="search"] {
-    max-width: 1px;
-  }
   /* List Items */
   .v-select li {
     line-height: 1.42857143; /* Normalize line height */
@@ -233,6 +241,16 @@
     width: 5em;
     height: 5em;
   }
+
+  /* Disabled state */
+  .v-select.disabled .dropdown-toggle,
+  .v-select.disabled .dropdown-toggle input,
+  .v-select.disabled .selected-tag .close,
+  .v-select.disabled .open-indicator {
+    cursor: not-allowed;
+    background-color: rgb(248, 248, 248);
+  }
+
   /* Loading Spinner States */
   .v-select.loading .spinner {
     opacity: 1;
@@ -266,12 +284,14 @@
 </style>
 
 <template>
-  <div class="dropdown v-select" :class="dropdownClasses">
-    <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle">
+  <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
+    <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">
 
       <span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
-        {{ getOptionLabel(option) }}
-        <button v-if="multiple" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
+        <slot name="selected-option" v-bind="option">
+          {{ getOptionLabel(option) }}
+        </slot>
+        <button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
           <span aria-hidden="true">&times;</span>
         </button>
       </span>
@@ -283,11 +303,12 @@
               @keyup.esc="onEscape"
               @keydown.up.prevent="typeAheadUp"
               @keydown.down.prevent="typeAheadDown"
-              @keyup.enter.prevent="typeAheadSelect"
+              @keydown.enter.prevent="typeAheadSelect"
               @blur="onSearchBlur"
               @focus="onSearchFocus"
               type="search"
               class="form-control"
+              :disabled="disabled"
               :placeholder="searchPlaceholder"
               :readonly="!searchable"
               :style="{ width: isValueEmpty ? '100%' : 'auto' }"
@@ -306,7 +327,9 @@
       <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
         <li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
           <a @mousedown.prevent="select(option)">
+          <slot name="option" v-bind="option">
             {{ getOptionLabel(option) }}
+          </slot>
           </a>
         </li>
         <li v-if="!filteredOptions.length" class="no-options">
@@ -341,7 +364,7 @@
        * If you are using an array of objects, vue-select will look for
        * a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
        * custom label key can be set with the `label` prop.
-       * @type {Object}
+       * @type {Array}
        */
       options: {
         type: Array,
@@ -350,6 +373,15 @@
         },
       },
 
+      /**
+       * Disable the entire component.
+       * @type {Boolean}
+       */
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+
       /**
        * Sets the max-height property on the dropdown list.
        * @deprecated
@@ -371,7 +403,7 @@
 
       /**
        * Equivalent to the `multiple` attribute on a `<select>` input.
-       * @type {Object}
+       * @type {Boolean}
        */
       multiple: {
         type: Boolean,
@@ -380,7 +412,7 @@
 
       /**
        * Equivalent to the `placeholder` attribute on an `<input>`.
-       * @type {Object}
+       * @type {String}
        */
       placeholder: {
         type: String,
@@ -429,6 +461,7 @@
       /**
        * Callback to generate the label text. If {option}
        * is an object, returns option[this.label] by default.
+       * @type {Function}
        * @param  {Object || String} option
        * @return {String}
        */
@@ -467,7 +500,7 @@
        * value(s) change. When integrating with Vuex, use this callback to trigger
        * an action, rather than using :value.sync to retreive the selected value.
        * @type {Function}
-       * @default {null}
+       * @param {Object || String} val
        */
       onChange: {
         type: Function,
@@ -535,7 +568,18 @@
        */
       inputId: {
         type: String
-      }
+      },
+
+      /**
+       * Sets RTL support. Accepts 'ltr', 'rtl', 'auto'.
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
+       * @type {String}
+       * @default 'auto'
+       */
+      dir: {
+        type: String,
+        default: 'auto'
+      },
     },
 
     data() {
@@ -689,8 +733,10 @@
           if (this.open) {
             this.$refs.search.blur() // dropdown will close on blur
           } else {
-            this.open = true
-            this.$refs.search.focus()
+            if (!this.disabled) {
+              this.open = true
+              this.$refs.search.focus()
+            }
           }
         }
       },
@@ -814,7 +860,9 @@
           searching: this.searching,
           searchable: this.searchable,
           unsearchable: !this.searchable,
-          loading: this.mutableLoading
+          loading: this.mutableLoading,
+          rtl: this.dir === 'rtl',
+          disabled: this.disabled
         }
       },
 
@@ -824,7 +872,7 @@
        */
       clearSearchOnBlur() {
         return this.clearSearchOnSelect && !this.multiple
-      },  
+      },
 
       /**
        * Return the current state of the