Merge branch 'master' into feature/custom-filter

# Conflicts:
#	dev.html
#	src/components/Select.vue
#	src/dev.js

src/components/Select.vue

@@ -23,6 +23,10 @@
   .v-select.rtl .dropdown-menu {
     text-align: right;
   }
+  .v-select.rtl .dropdown-toggle .clear {
+    left: 30px;
+    right: auto;
+  }
   /* Open Indicator */
   .v-select .open-indicator {
     position: absolute;
@@ -80,6 +84,22 @@
     clear: both;
     height: 0;
   }
+
+  /* Clear Button */
+  .v-select .dropdown-toggle .clear {
+    position: absolute;
+    bottom: 9px;
+    right: 30px;
+    font-size: 23px;
+    font-weight: 700;
+    line-height: 1;
+    color: rgba(60, 60, 60, .5);
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+  }
+
   /* Dropdown Toggle States */
   .v-select.searchable .dropdown-toggle {
     cursor: text;
@@ -186,10 +206,14 @@
     background: none;
     position: relative;
     box-shadow: none;
-    float: left;
-    clear: none;
   }
-  /* List Items */
+  .v-select.unsearchable input[type="search"] {
+    opacity: 0;
+  }
+  .v-select.unsearchable input[type="search"]:hover {
+    cursor: pointer;
+  }
+    /* List Items */
   .v-select li {
     line-height: 1.42857143; /* Normalize line height */
   }
@@ -244,6 +268,7 @@
 
   /* Disabled state */
   .v-select.disabled .dropdown-toggle,
+  .v-select.disabled .dropdown-toggle .clear,
   .v-select.disabled .dropdown-toggle input,
   .v-select.disabled .selected-tag .close,
   .v-select.disabled .open-indicator {
@@ -308,14 +333,27 @@
               @focus="onSearchFocus"
               type="search"
               class="form-control"
+              autocomplete="false"
               :disabled="disabled"
               :placeholder="searchPlaceholder"
+              :tabindex="tabindex"
               :readonly="!searchable"
               :style="{ width: isValueEmpty ? '100%' : 'auto' }"
               :id="inputId"
               aria-label="Search for option"
       >
 
+      <button 
+        v-show="showClearButton" 
+        :disabled="disabled" 
+        @click="clearSelection"
+        type="button" 
+        class="clear" 
+        title="Clear selection" 
+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+
       <i v-if="!noDrop" ref="openIndicator" role="presentation" class="open-indicator"></i>
 
       <slot name="spinner">
@@ -535,6 +573,15 @@
         default: false
       },
 
+      /**
+       * Set the tabindex for the input field.
+       * @type {Number}
+       */
+      tabindex: {
+        type: Number,
+        default: null
+      },
+
       /**
        * When true, newly created tags will be added to
        * the options list.
@@ -545,6 +592,17 @@
         default: false
       },
 
+      /**
+       * When true, existing options will be filtered
+       * by the search text. Should not be used in conjunction
+       * with taggable.
+       * @type {Boolean}
+       */
+      filterable: {
+        type: Boolean,
+        default: true
+      },
+
       /**
        * User defined function for adding Options
        * @type {Function}
@@ -724,6 +782,14 @@
         }
       },
 
+      /**
+       * Clears the currently selected value(s)
+       * @return {void}
+       */
+       clearSelection() {
+         this.mutableValue = this.multiple ? [] : null
+       },
+
       /**
        * Called from this.select after each selection.
        * @param  {Object|String} option
@@ -963,6 +1029,14 @@
         }
 
         return []
+      },
+
+      /**
+       * Determines if the clear button should be displayed.
+       * @return {Boolean}
+       */
+      showClearButton() {
+        return !this.multiple && !this.open && this.mutableValue != null
       }
     },