From ea11bc26d5174348f3f0f682ff1492586e19efd7 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Tue, 21 Feb 2017 23:08:37 -0800
Subject: [PATCH 1/3] WIP #141 #124

- add necessary styles to work without bootstrap
- update bootstrap 4 compatibility
---
 src/components/Select.vue | 164 +++++++++++++++++++++++++++++++++-----
 1 file changed, 142 insertions(+), 22 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 02bc3b4b8..b0f0e073a 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1,4 +1,55 @@
 <style>
+  .v-select,
+  .v-select * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    font-family: sans-serif;
+  }
+
+  .v-select ::after,
+  .v-select ::before {
+    -webkit-box-sizing: inherit;
+    box-sizing: inherit;
+  }
+
+  .v-select a:not([href]):not([tabindex]):focus,
+  .v-select a:not([href]):not([tabindex]):hover {
+    color: #fff;
+  }
+
+  .v-select input[type="search"] {
+
+  }
+
+
+
+  .dropdown-menu > li > a {
+
+  }
+
+  button.close {
+    appearance: none;
+    padding: 0;
+    cursor: pointer;
+    background: 0 0;
+    border: 0;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    filter: alpha(opacity=20);
+    opacity: .2;
+  }
+
+  .v-select .dropdown-toggle {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+
+  /* - - - - - - - - - - - - - - - - */
+
   .v-select {
     position: relative;
   }
@@ -23,7 +74,7 @@
   .v-select .open-indicator:before {
     border-color: rgba(60, 60, 60, .5);
     border-style: solid;
-    border-width: 0.25em 0.25em 0 0;
+    border-width: 3px 3px 0 0;
     content: '';
     display: inline-block;
     height: 10px;
@@ -34,14 +85,6 @@
     transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
   }
 
-  .v-select.open .open-indicator {
-    bottom: 1px;
-  }
-
-  .v-select.open .open-indicator:before {
-    transform: rotate(315deg);
-  }
-
   .v-select .dropdown-toggle {
     display: block;
     padding: 0;
@@ -51,25 +94,64 @@
     white-space: normal;
   }
 
+  .v-select .dropdown-toggle:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+
   .v-select.searchable .dropdown-toggle {
     cursor: text;
   }
 
-  .v-select.open .dropdown-toggle {
-    border-bottom: none;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  .v-select.unsearchable .dropdown-toggle {
+    cursor: pointer;
   }
 
   .v-select > .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    /*float: left;*/
+    min-width: 160px;
+    padding: 5px 0;
     margin: 0;
     width: 100%;
     overflow-y: scroll;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, .15);
     border-top: none;
+    border-radius: 4px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+    /*font-size: 14px;*/
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    background-clip: padding-box;
+    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+  }
+
+  /*divider*/
+  /*.v-select > .dropdown-menu*/
+  .dropdown-menu .divider {
+    height: 1px;
+    margin: 9px 0;
+    overflow: hidden;
+    background-color: #e5e5e5;
+  }
+
+  .v-select .text-center {
+    text-align: center;
   }
 
+  /*text-center*/
+
   .v-select .selected-tag {
     color: #333;
     background-color: #f0f0f0;
@@ -81,15 +163,27 @@
     float: left;
     line-height: 1.7em;
   }
-
   .v-select .selected-tag .close {
     float: none;
     margin-right: 0;
     font-size: 20px;
   }
 
+  /* -- Search Input -- */
+  .v-select input[type="search"]::-webkit-search-decoration,
+  .v-select input[type="search"]::-webkit-search-cancel-button,
+  .v-select input[type="search"]::-webkit-search-results-button,
+  .v-select input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+  }
   .v-select input[type=search],
   .v-select input[type=search]:focus {
+    appearance: none;
+    line-height: 1.42857143;
+    /*color: #555;*/
+    border-radius: 4px;
+    height: 34px;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
     display: inline-block;
     border: none;
     outline: none;
@@ -103,27 +197,40 @@
     float: left;
     clear: none;
   }
+  .v-select.unsearchable input[type=search] {
+    max-width: 1px;
+  }
 
-  .v-select input[type=search]:disabled {
-    cursor: pointer;
+  .v-select li > a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap;
   }
 
-  .v-select li a {
+  .v-select li:hover {
     cursor: pointer;
   }
 
-  .v-select .active a {
+  .v-select .active > a {
     background: rgba(50, 50, 50, .1);
-    color: #333;
+    /*color: #333;*/
+  }
+
+  .v-select .highlight > a {
+    background: #5897fb;
+    color: #fff;
   }
 
-  .v-select .highlight a,
-  .v-select li:hover > a,
-  .v-select .active > a:hover {
+  .v-select .highlight > a {
     background: #5897fb;
     color: #fff;
   }
 
+
   .v-select .spinner {
     opacity: 0;
     position: absolute;
@@ -152,6 +259,19 @@
     height: 5em;
   }
 
+  /* -- Open State -- */
+  .v-select.open .open-indicator {
+    bottom: 1px;
+  }
+  .v-select.open .open-indicator:before {
+    transform: rotate(315deg);
+  }
+  .v-select.open .dropdown-toggle {
+    border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
   @-webkit-keyframes vSelectSpinner {
     0% {
       transform: rotate(0deg);

From e202474905efcc4dc4477037aaaacb8ac150d32e Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Thu, 9 Mar 2017 11:29:08 -0800
Subject: [PATCH 2/3] WIP

remove clearfix class
clean up spacing in css
add unsearchable class to dropdown
---
 dev.html                  |  6 ++++--
 src/components/Select.vue | 12 +++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/dev.html b/dev.html
index b0d78eb12..0bee7e963 100644
--- a/dev.html
+++ b/dev.html
@@ -4,8 +4,10 @@
 <head>
     <meta charset="utf-8">
     <title>Vue Select Dev</title>
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
-    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"> -->
+    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
+    <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
+    <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
+     <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
     <style>
         html,
         body,
diff --git a/src/components/Select.vue b/src/components/Select.vue
index b0f0e073a..48c3fd636 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -22,8 +22,6 @@
 
   }
 
-
-
   .dropdown-menu > li > a {
 
   }
@@ -163,6 +161,7 @@
     float: left;
     line-height: 1.7em;
   }
+
   .v-select .selected-tag .close {
     float: none;
     margin-right: 0;
@@ -176,6 +175,7 @@
   .v-select input[type="search"]::-webkit-search-results-decoration {
     display: none;
   }
+
   .v-select input[type=search],
   .v-select input[type=search]:focus {
     appearance: none;
@@ -197,6 +197,7 @@
     float: left;
     clear: none;
   }
+
   .v-select.unsearchable input[type=search] {
     max-width: 1px;
   }
@@ -230,7 +231,6 @@
     color: #fff;
   }
 
-
   .v-select .spinner {
     opacity: 0;
     position: absolute;
@@ -263,9 +263,11 @@
   .v-select.open .open-indicator {
     bottom: 1px;
   }
+
   .v-select.open .open-indicator:before {
     transform: rotate(315deg);
   }
+
   .v-select.open .dropdown-toggle {
     border-bottom: none;
     border-bottom-left-radius: 0;
@@ -293,7 +295,7 @@
 
 <template>
   <div class="dropdown v-select" :class="dropdownClasses">
-    <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
+    <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle" type="button">
 
         <span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
           {{ getOptionLabel(option) }}
@@ -345,7 +347,6 @@
   </div>
 </template>
 
-
 <script type="text/babel">
   import pointerScroll from '../mixins/pointerScroll'
   import typeAheadPointer from '../mixins/typeAheadPointer'
@@ -801,6 +802,7 @@
         return {
           open: this.dropdownOpen,
           searchable: this.searchable,
+          unsearchable: !this.searchable,
           loading: this.mutableLoading
         }
       },

From ffbd2238b88622343726db4bd13364824bcff810 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Sat, 11 Mar 2017 16:27:36 -0800
Subject: [PATCH 3/3] #124

- organize css
- switched 'selected' class back to 'active'
- remove specificity where possible
- add unsearchable and loading example to dev template
---
 dev.html                  |   6 +-
 src/components/Select.vue | 177 +++++++++++++++-----------------------
 2 files changed, 71 insertions(+), 112 deletions(-)

diff --git a/dev.html b/dev.html
index 0bee7e963..a5cf40133 100644
--- a/dev.html
+++ b/dev.html
@@ -4,10 +4,10 @@
 <head>
     <meta charset="utf-8">
     <title>Vue Select Dev</title>
-    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
     <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
     <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
-     <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
+    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
+    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
     <style>
         html,
         body,
@@ -34,6 +34,8 @@
         <v-select placeholder="multiple" multiple :options="options"></v-select>
         <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
         <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
+        <v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>
+        <v-select placeholder="loading" loading></v-select>
     </div>
 </body>
 
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 48c3fd636..e161464aa 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1,4 +1,7 @@
 <style>
+  .v-select {
+    position: relative;
+  }
   .v-select,
   .v-select * {
     -webkit-box-sizing: border-box;
@@ -6,52 +9,7 @@
     box-sizing: border-box;
     font-family: sans-serif;
   }
-
-  .v-select ::after,
-  .v-select ::before {
-    -webkit-box-sizing: inherit;
-    box-sizing: inherit;
-  }
-
-  .v-select a:not([href]):not([tabindex]):focus,
-  .v-select a:not([href]):not([tabindex]):hover {
-    color: #fff;
-  }
-
-  .v-select input[type="search"] {
-
-  }
-
-  .dropdown-menu > li > a {
-
-  }
-
-  button.close {
-    appearance: none;
-    padding: 0;
-    cursor: pointer;
-    background: 0 0;
-    border: 0;
-    font-weight: 700;
-    line-height: 1;
-    color: #000;
-    text-shadow: 0 1px 0 #fff;
-    filter: alpha(opacity=20);
-    opacity: .2;
-  }
-
-  .v-select .dropdown-toggle {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-  }
-
-  /* - - - - - - - - - - - - - - - - */
-
-  .v-select {
-    position: relative;
-  }
-
+  /* Open Indicator */
   .v-select .open-indicator {
     position: absolute;
     bottom: 6px;
@@ -63,12 +21,8 @@
     transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
     opacity: 1;
     transition: opacity .1s;
+    height: 20px; width: 10px;
   }
-
-  .v-select.loading .open-indicator {
-    opacity: 0;
-  }
-
   .v-select .open-indicator:before {
     border-color: rgba(60, 60, 60, .5);
     border-style: solid;
@@ -81,8 +35,24 @@
     transform: rotate(133deg);
     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);
+    box-sizing: inherit;
+  }
+  /* Open Indicator States */
+  .v-select.open .open-indicator:before {
+    transform: rotate(315deg);
+  }
+  .v-select.loading .open-indicator {
+    opacity: 0;
+  }
+  .v-select.open .open-indicator {
+    bottom: 1px;
+  }
+  /* Dropdown Toggle */
+  .v-select .dropdown-toggle {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
   }
-
   .v-select .dropdown-toggle {
     display: block;
     padding: 0;
@@ -91,7 +61,6 @@
     border-radius: 4px;
     white-space: normal;
   }
-
   .v-select .dropdown-toggle:after {
     visibility: hidden;
     display: block;
@@ -100,16 +69,20 @@
     clear: both;
     height: 0;
   }
-
+  /* Dropdown Toggle States */
   .v-select.searchable .dropdown-toggle {
     cursor: text;
   }
-
   .v-select.unsearchable .dropdown-toggle {
     cursor: pointer;
   }
-
-  .v-select > .dropdown-menu {
+  .v-select.open .dropdown-toggle {
+    border-bottom-color: transparent;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  /* Dropdown Menu */
+  .v-select .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
@@ -134,22 +107,17 @@
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
     box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
   }
-
-  /*divider*/
-  /*.v-select > .dropdown-menu*/
-  .dropdown-menu .divider {
+  .v-select .dropdown-menu .divider {
     height: 1px;
-    margin: 9px 0;
+    margin: 7px 0;
     overflow: hidden;
     background-color: #e5e5e5;
   }
-
-  .v-select .text-center {
+  .v-select .no-options {
     text-align: center;
+    padding-bottom: 2px;
   }
-
-  /*text-center*/
-
+  /* Selected Tags */
   .v-select .selected-tag {
     color: #333;
     background-color: #f0f0f0;
@@ -159,23 +127,31 @@
     margin: 4px 1px 0px 3px;
     padding: 0 0.25em;
     float: left;
-    line-height: 1.7em;
+    line-height: 24px;
   }
-
   .v-select .selected-tag .close {
     float: none;
     margin-right: 0;
     font-size: 20px;
+    appearance: none;
+    padding: 0;
+    cursor: pointer;
+    background: 0 0;
+    border: 0;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    filter: alpha(opacity=20);
+    opacity: .2;
   }
-
-  /* -- Search Input -- */
+  /* Search Input */
   .v-select input[type="search"]::-webkit-search-decoration,
   .v-select input[type="search"]::-webkit-search-cancel-button,
   .v-select input[type="search"]::-webkit-search-results-button,
   .v-select input[type="search"]::-webkit-search-results-decoration {
     display: none;
   }
-
   .v-select input[type=search],
   .v-select input[type=search]:focus {
     appearance: none;
@@ -197,40 +173,38 @@
     float: left;
     clear: none;
   }
-
+  /* Search Input States */
   .v-select.unsearchable input[type=search] {
     max-width: 1px;
   }
-
+  /* List Items */
   .v-select li > a {
     display: block;
     padding: 3px 20px;
     clear: both;
-    font-weight: 400;
-    line-height: 1.42857143;
-    color: #333;
+    line-height: 1.42857143; /* Normalize line height */
+    color: #333; /* Overrides most CSS frameworks */
     white-space: nowrap;
   }
-
   .v-select li:hover {
     cursor: pointer;
   }
-
-  .v-select .active > a {
+  .v-select .dropdown-menu .active > a {
+    color: #333;
     background: rgba(50, 50, 50, .1);
-    /*color: #333;*/
   }
-
-  .v-select .highlight > a {
+  .v-select .dropdown-menu > .highlight > a {
+    /*
+     * required to override bootstrap 3's
+     * .dropdown-menu > li > a:hover {} styles
+     */
     background: #5897fb;
     color: #fff;
   }
-
-  .v-select .highlight > a {
-    background: #5897fb;
-    color: #fff;
+  .v-select .highlight:not(:last-child) {
+    margin-bottom: 0; /* Fixes Bulma Margin */
   }
-
+  /* Loading Spinner */
   .v-select .spinner {
     opacity: 0;
     position: absolute;
@@ -247,33 +221,17 @@
     animation: vSelectSpinner 1.1s infinite linear;
     transition: opacity .1s;
   }
-
-  .v-select.loading .spinner {
-    opacity: 1;
-  }
-
   .v-select .spinner,
   .v-select .spinner:after {
     border-radius: 50%;
     width: 5em;
     height: 5em;
   }
-
-  /* -- Open State -- */
-  .v-select.open .open-indicator {
-    bottom: 1px;
-  }
-
-  .v-select.open .open-indicator:before {
-    transform: rotate(315deg);
-  }
-
-  .v-select.open .dropdown-toggle {
-    border-bottom: none;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  /* Loading Spinner States */
+  .v-select.loading .spinner {
+    opacity: 1;
   }
-
+  /* KeyFrames */
   @-webkit-keyframes vSelectSpinner {
     0% {
       transform: rotate(0deg);
@@ -282,7 +240,6 @@
       transform: rotate(360deg);
     }
   }
-
   @keyframes vSelectSpinner {
     0% {
       transform: rotate(0deg);
@@ -339,7 +296,7 @@
         <li v-if="!filteredOptions.length" class="divider"></li>
       </transition>
       <transition name="fade">
-        <li v-if="!filteredOptions.length" class="text-center">
+        <li v-if="!filteredOptions.length" class="no-options">
           <slot name="no-options">Sorry, no matching options.</slot>
         </li>
       </transition>