Merge branch 'master' into taggable

src/components/Code.vue

@@ -0,0 +1,14 @@
+<template>
+<code :class="class"><slot></slot></code>
+</template>
+
+<script type="text/babel">
+  export default {
+    props: ['lang'],
+    computed: {
+      class () {
+        return `language-${this.lang}`
+      }
+    }
+  }
+</script>

src/components/Install.vue

@@ -1,31 +1,176 @@
 <template>
-<h2 class="page-header">Install &amp; and Usage</h2>
-<p>Install from GitHub via NPM</p>
-<pre><code class="language-bash">npm install sagalbot/vue-select</code></pre>
+<section>
+  <h2 class="page-header" id="install">Install &amp; and Usage</h2>
+  <div class="row row-col-vh">
+    <div class="col-md-7">
+      <install-snippet></install-snippet>
+    </div>
 
-<pre v-pre>
-<code class="language-markup">&#x3C;template&#x3E;
-  &#x3C;div id=&#x22;myApp&#x22;&#x3E;
-    &#x3C;v-select :value.sync=&#x22;selected&#x22; :options=&#x22;options&#x22;&#x3E;&#x3C;/v-select&#x3E;
-  &#x3C;/div&#x3E;
-&#x3C;/template&#x3E;</code>
+    <div class="col-md-5">
+        <p>The resulting vue-select, and it's value: <v-code lang="json">{{ install | json }}</v-code></p>
+        <v-select :value.sync="install" :options="['foo','bar','baz']"></v-select>
+    </div>
+  </div>
 
-<code class="language-markup">&#x3C;script&#x3E;</code>
-  <code class="language-javascript">import vSelect from &#x27;vue-select&#x27;
-  export default {
-    components: {vSelect},
+  <h2 class="page-header" id="examples">Examples</h2>
 
-    data() {
-      return {
-        selected: null,
-        options: [&#x27;foo&#x27;,&#x27;bar&#x27;,&#x27;baz&#x27;]
-      }
-    }
-  }</code><code class="language-markup">
-&#x3C;/script&#x3E;</code>
-</pre>
+  <h3 class="page-header">Single/Multiple Selection</h3>
+  <div class="row">
+    <div class="col-md-6">
+      <h4>Single Option Select</h4>
+      <pre><v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
+      <v-select :options="countries"></v-select>
+    </div>
+
+    <div class="col-md-6">
+      <h4>Multiple Option Select</h4>
+      <pre><v-code lang="markup">&#x3C;v-select multiple :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
+      <v-select multiple :options="countries"></v-select>
+    </div>
+  </div>
+
+  <h3 class="page-header">Reactive Options</h3>
+
+  <div class="row">
+    <div class="col-md-6">
+        <p>When the list of options provided by the parent changes, vue-select will react as you'd expect.</p>
+        <div style="margin-top:0;" class="radio">
+        <label>
+          <input type="radio" name="reactive-options" v-model="reactive" :value="countries">
+          <v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
+        </label>
+      </div>
+
+      <div class="radio">
+        <label>
+          <input type="radio" name="reactive-options" v-model="reactive" :value="['foo','bar','baz']">
+          <v-code lang="markup">&#x3C;v-select options=&#x22;['foo','bar','baz']&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
+        </label>
+      </div>
+    </div>
+
+    <div class="col-md-6">
+      <v-select :options="reactive"></v-select>
+    </div>
+  </div>
+
+  <h3 class="page-header">Two-Way Value Syncing</h3>
+  <div class="row">
+    <div class="col-md-6">
+      <p>The most common use case for vue-select is being able to sync the components value with a parent component. The <code>value</code> property supports two-way data binding to accomplish this.</p>
+      <p>The <code>.sync</code> data-binding modifier is completely optional. You may use <code>value</code> without a two-way binding to preselect options.</p>
+      <p>Here we have preselected 'Canada' by setting <code>syncedVal: 'Canada'</code> on the parent component. The buttons below demonstrate how you can set the <code>value</code> from the parent.</p>
+
+      <p>Current value: <v-code>{{ syncedVal | json }}</v-code></p>
+    </div>
+
+    <div class="col-md-6">
+      <div class="form-group">
+        <pre><v-code lang="markup">&#x3C;v-select :value.sync=&#x22;syncedVal&#x22; :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
+      </div>
+      <div class="form-group">
+      <v-select :options="simple" :value.sync="syncedVal"></v-select>
+      </div>
+
+      <div class="form-group">
+      <button @click="syncedVal = 'United States'" class="btn btn-default">Set to United States</button>
+      <button @click="syncedVal = 'Canada'" class="btn btn-default">Set to Canada</button>
+      </div>
+    </div>
+  </div>
+
+  <h3 class="page-header">Custom Labels</h3>
+  <div class="row">
+    <div class="col-md-6">
+      <p>By default when the <code>options</code> array contains objects, <code>vue-select</code> looks for the <code>label</code> key for display. If your data source doesn't contain that key, you can set your own using the <code>label</code> prop.</p>
+      <p>On this page, the list of countries used in the examples contains <code>value</code> and <code>label</code> properties: <v-code lang="json">{value: "CA", label: "Canada"}</v-code>. In this example, we'll display the country code instead of the label.</p>
+    </div>
+
+    <div class="col-md-6">
+      <pre><v-code lang="markup">&#x3C;v-select label=&#x22;value&#x22; :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
+      <v-select :options="countries" label="value"></v-select>
+    </div>
+  </div>
+
+  <h3 class="page-header">On-Change Callback <small>Vuex Compatibility</small></h3>
+  <div class="row">
+    <div class="col-md-6">
+      <p>vue-select provides an <code>onChange</code> property that accepts a callback function. This function is passed the currently selected value(s) as it's only parameter.</p>
+      <p>This is very useful when integrating with Vuex, as it will allow your to trigger an action to update your vuex state object. Choose a callback and see it in action.</p>
+
+      <div class="form-inline">
+        <div class="radio">
+          <label>
+            <input type="radio" v-model="callback" value="console"> <code>console.log(val)</code>
+          </label>
+        </div>
+
+        <div class="radio">
+          <label>
+            <input type="radio" v-model="callback" value="alert"> <code>alert(val)</code>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-6">
+      <pre><v-code lang="markup">&#x3C;v-select on-change=&#x22;consoleCallback&#x22; :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
+      <pre><v-code lang="javascript">methods: {
+  consoleCallback(val) {
+    console.dir(JSON.stringify(val))
+  },
+
+  alertCallback(val) {
+    alert(JSON.stringify(val))
+  }
+}</v-code></pre>
+      <v-select :options="countries" :on-change="getCallback"></v-select>
+    </div>
+  </div>
+</section>
 </template>
 
+<style type="scss">
+
+</style>
+
 <script>
-  export default {}
+  import countries from '../countries/advanced'
+  import simple from '../countries/simple'
+  import vSelect from './Select.vue'
+  import vCode from './Code.vue'
+  import InstallSnippet from './snippets/InstallSnippet.vue'
+  export default {
+    components: {vSelect,vCode,InstallSnippet},
+    data () {
+      return {
+        countries,
+        simple,
+        callback: 'console',
+        reactive: null,
+        install: null,
+        syncedVal: 'Canada'
+      }
+    },
+
+    methods: {
+      consoleCallback(val) {
+        console.dir(JSON.stringify(val))
+      },
+
+      alertCallback(val) {
+        alert(JSON.stringify(val))
+      }
+    },
+
+    computed: {
+      getCallback() {
+        if( this.callback === 'alert' ) {
+          return this.alertCallback
+        }
+
+        return this.consoleCallback
+      }
+    }
+  }
 </script>

src/components/Jumbotron.vue

@@ -1,212 +0,0 @@
-<template>
-  <div class="jumbotron">
-      <div class="flex-container">
-        <div transition="slide-right" v-show="selected" class="flex code">
-          <pre>{{ selected | json }}</pre>
-        </div>
-
-        <div class="flex center">
-          <v-select
-            id="v-select"
-            :placeholder="placeholder"
-            :value="selected"
-            :options="options"
-            :multiple="multiple"
-            :on-change="setSelected"
-            >
-          </v-select>
-        </div>
-
-        <div class="flex code">
-            <div>
-              <pre class="fake">
-                /**<br>
-                 * @prop multiple <br>
-                 * @type {Boolean} <br>
-                 */
-              </pre>
-              <a @click="toggleMultiple" class="btn btn-code" :class="{ active: multiple }">Multiple</a>
-            </div>
-
-            <div>
-              <pre class="fake">
-                /**<br>
-                 * @prop options <br>
-                 * @type {Array} <br>
-                 */
-              </pre>
-              <a @click="toggleOptionType" class="btn btn-code">
-                <span :class="{active: type === 'advanced'}">[{label:'foo'}]</span> <span class="grey">||</span> <span :class="{active: type === 'simple'}">['foo']</span>
-              </a>
-            </div>
-
-            <div>
-              <pre class="fake">
-                /**<br>
-                 * @prop placeholder <br>
-                 * @type {String} <br>
-                 */
-              </pre>
-              <input @keyup="onPlaceholderChange" type="text" class="btn btn-code" value="{{ placeholder }}">
-            </div>
-          </div>
-      </div>
-  </div>
-</template>
-
-<script>
-  import vSelect from './Select.vue'
-  import { setSelected, toggleMultiple, setPlaceholder, toggleOptionType } from '../vuex/actions'
-
-  export default {
-    components: { vSelect },
-    vuex: {
-      getters: {
-        placeholder (store) {
-          return store.placeholder
-        },
-        selected (store) {
-          return store.selected
-        },
-        type (store) {
-          return store.optionType
-        },
-        options (store) {
-          return store.options[store.optionType]
-        },
-        multiple (store) {
-          return store.multiple
-        }
-      },
-      actions: { setSelected, toggleMultiple, setPlaceholder, toggleOptionType }
-    },
-    methods: {
-      onPlaceholderChange ( e ) {
-        this.setPlaceholder( e.target.value )
-      }
-    }
-  }
-</script>
-
-<style scoped lang="sass">
-  @import '../variables';
-
-  .slide-right-transition {
-    opacity: 1;
-    transition: all .5s;
-  }
-
-  .slide-right-enter, .slide-right-leave {
-    opacity: 0;
-  }
-
-  .jumbotron {
-    padding: 0;
-    background: rgba($green, .1);
-  }
-
-  .grey {
-    color: $code-grey;
-  }
-
-  .flex-container {
-    padding: 0;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    justify-content: center;
-  }
-
-  .flex {
-    display:flex;
-    align-self: stretch;
-    padding: 0 34px;
-  }
-
-  .flex.code:first-child {
-    width: 250px;
-    color: $code-white;
-    align-items: center;
-    // flex-grow: 1;
-  }
-
-  .flex.center {
-    width: 100%;
-    align-self: center;
-    text-align: center;
-
-    #v-select {
-      width: 70%;
-      margin: 0 auto;
-    }
-  }
-
-  .flex.code:last-child {
-    // flex-grow: 1;
-    width: 280px;
-    flex-direction: column;
-  }
-
-  .code {
-    background: $code-black;
-    // color: $code-white;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-    text-align: left;
-    padding: 48px 15px;
-
-    .active {
-      color: $code-green;
-    }
-  }
-
-  .btn-code {
-    display: inline-block;
-    float: left;
-    clear: both;
-    margin-bottom: 7px;
-    border: 1px solid $code-white;
-    color: $code-white;
-    box-shadow: none;
-    background: none;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-
-    &:focus,
-    &:active,
-    &:hover,
-    &.active {
-      color: $code-green;
-      border: 1px solid $code-green;
-      outline: none;
-      box-shadow: none;
-      appearance: none;
-
-      .active {
-        color: $code-grey;
-      }
-    }
-  }
-
-  .btn-code + pre {
-    margin-top: 15px;
-  }
-
-  input.btn-code {
-    text-align: left;
-
-  }
-
-  pre {
-    background: none;
-    border: none;
-    color: $code-white;
-  }
-
-  pre.fake {
-    padding: 0;
-    white-space: normal;
-    border: none;
-    background: $code-black;
-    color: $code-grey;
-  }
-</style>

src/components/Select.vue

@@ -1,16 +1,11 @@
-<style scoped>
-  .dropdown {
+<style>
+  .v-select.dropdown {
     position: relative;
   }
 
-  .open .dropdown-toggle,
-  .open .dropdown-menu {
-    border-color: rgba(60,60,60,.26);
-  }
-
-  .open-indicator {
+  .v-select .open-indicator {
     position: absolute;
-    top: 10px;
+    bottom: 6px;
     right: 10px;
     display: inline-block;
     cursor: pointer;
@@ -19,11 +14,29 @@
     transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
   }
 
-  .open .open-indicator {
-    transform: rotate(180deg);
+  .v-select .open-indicator:before {
+    border-color:  rgba(60,60,60,.5);
+    border-style: solid;
+    border-width: 0.25em 0.25em 0 0;
+    content: '';
+    display: inline-block;
+    height: 10px;
+    width: 10px;
+    vertical-align: top;
+    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);
   }
 
-  .dropdown-toggle {
+  .v-select.open .open-indicator {
+    bottom: 1px;
+  }
+
+  .v-select.open .open-indicator:before {
+    transform: rotate(315deg);
+  }
+
+  .v-select .dropdown-toggle {
     display: block;
     padding: 0;
     background: none;
@@ -31,17 +44,18 @@
     border-radius: 4px;
     white-space: normal;
   }
-  .searchable .dropdown-toggle {
+
+  .v-select.searchable .dropdown-toggle {
     cursor: text;
   }
 
-  .open .dropdown-toggle {
+  .v-select.open .dropdown-toggle {
     border-bottom: none;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .dropdown-menu {
+  .v-select > .dropdown-menu {
     margin: 0;
     width: 100%;
     overflow-y: auto;
@@ -50,7 +64,7 @@
     border-top-right-radius: 0;
   }
 
-  .selected-tag {
+  .v-select .selected-tag {
     color: #333;
     background-color: #f0f0f0;
     border: 1px solid #ccc;
@@ -62,14 +76,14 @@
     line-height: 1.7em;
   }
 
-  .selected-tag .close {
+  .v-select .selected-tag .close {
     float: none;
     margin-right: 0;
     font-size: 20px;
   }
 
-  input[type=search],
-  input[type=search]:focus {
+  .v-select input[type=search],
+  .v-select input[type=search]:focus {
     display: inline-block;
     border: none;
     outline: none;
@@ -84,28 +98,28 @@
     clear: none;
   }
 
-  input[type=search]:disabled {
+  .v-select input[type=search]:disabled {
     cursor: pointer;
   }
 
-  li a {
+  .v-select li a {
     cursor: pointer;
   }
 
-  .active a {
+  .v-select .active a {
     background: rgba(50,50,50,.1);
     color: #333;
   }
 
-  .highlight a,
-  li:hover > a {
+  .v-select .highlight a,
+  .v-select li:hover > a {
     background: #f0f0f0;
     color: #333;
   }
 </style>
 
 <template>
-  <div class="dropdown" :class="dropdownClasses">
+  <div class="dropdown v-select" :class="dropdownClasses">
     <div v-el:toggle @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
         <span class="form-control" v-if="!searchable && isValueEmpty">
           {{ placeholder }}
@@ -122,7 +136,7 @@
           v-el:search
           v-show="searchable"
           v-model="search"
-          @keyup.delete="maybeDeleteValue"
+          @keydown.delete="maybeDeleteValue"
           @keyup.esc="onEscape"
           @keyup.up.prevent="typeAheadUp"
           @keyup.down.prevent="typeAheadDown"
@@ -135,7 +149,7 @@
           :style="{ width: isValueEmpty ? '100%' : 'auto' }"
         >
 
-        <i v-el:open-indicator role="presentation" class="open-indicator glyphicon-chevron-down glyphicon"></i>
+        <i v-el:open-indicator role="presentation" class="open-indicator"></i>
     </div>
 
     <ul v-show="open" v-el:dropdown-menu :transition="transition" :style="{ 'max-height': maxHeight }" class="dropdown-menu animated">
@@ -145,7 +159,9 @@
         </a>
       </li>
       <li transition="fade" v-if="!filteredOptions.length" class="divider"></li>
-      <li transition="fade" v-if="!filteredOptions.length" class="text-center">Sorry, no matching options.</li>
+      <li transition="fade" v-if="!filteredOptions.length" class="text-center">
+        <slot name="no-options">Sorry, no matching options.</slot>
+      </li>
     </ul>
   </div>
 </template>

src/components/snippets/InstallSnippet.vue

@@ -0,0 +1,31 @@
+<template>
+<p>Install from GitHub via NPM</p>
+      <pre><v-code lang="bash">npm install sagalbot/vue-select</v-code></pre>
+
+      <p>To use the vue-select component in your templates, simply import it, and register it with your component.</p>
+<pre><v-code lang="markup">&#x3C;template&#x3E;
+  &#x3C;div id=&#x22;myApp&#x22;&#x3E;
+    &#x3C;v-select :value.sync=&#x22;selected&#x22; :options=&#x22;options&#x22;&#x3E;&#x3C;/v-select&#x3E;
+  &#x3C;/div&#x3E;
+&#x3C;/template&#x3E;
+&#x3C;script&#x3E;</v-code>
+<v-code lang="javascript">import vSelect from "vue-select"
+  export default {
+    components: {vSelect},
+
+    data() {
+      return {
+        selected: null,
+        options: ['foo','bar','baz']
+      }
+    }
+  }
+&#x3C;/script&#x3E;</v-code>
+</pre>
+</template>
+<script type="text/babel">
+import vCode from '../Code.vue'
+export default {
+  components: {vCode}
+}
+</script>