update demo site to use Vuex (just a proof of concept), overhaul look and feel

src/components/Install.vue

@@ -0,0 +1,31 @@
+<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>
+
+<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>
+
+<code class="language-markup">&#x3C;script&#x3E;</code>
+  <code class="language-javascript">import vSelect from &#x27;vue-select&#x27;
+  export default {
+    components: {vSelect},
+
+    data() {
+      return {
+        selected: null,
+        options: [&#x27;foo&#x27;,&#x27;bar&#x27;,&#x27;baz&#x27;]
+      }
+    }
+  }</code><code class="language-markup">
+&#x3C;/script&#x3E;</code>
+</pre>
+</template>
+
+<script>
+  export default {}
+</script>

src/components/Jumbotron.vue

@@ -1,44 +1,212 @@
 <template>
-  <div class="jumbotron jumbotron-green">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6 col-md-offset-1">
+  <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.sync="select"
-            :options="options[optionType]"
-            :multiple="multiple">
+            :value="selected"
+            :options="options"
+            :multiple="multiple"
+            :on-change="setSelected"
+            >
           </v-select>
-
         </div>
 
-        <pre id="output" class="col-md-4">{{ select | json }}</pre>
+        <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>
   </div>
 </template>
 
 <script>
   import vSelect from './Select.vue'
+  import { setSelected, toggleMultiple, setPlaceholder, toggleOptionType } from '../vuex/actions'
 
   export default {
     components: { vSelect },
-
-    data() {
-      return {
-        select: null,
-        placeholder: 'Choose a Country',
-        multiple: true,
-        maxHeight: '400px',
-        options: {
-          advanced: require('../countries/countries.js'),
-          simple: require('../countries/simpleCountries.js'),
-          simpler: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}, {label: 'This is Baz', value: 'baz'}],
+    vuex: {
+      getters: {
+        placeholder (store) {
+          return store.placeholder
         },
-        optionType: 'simple'
+        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/Params.vue

@@ -0,0 +1,99 @@
+<template>
+  <h2 class="page-header">Parameters</h2>
+  <pre v-pre><code class="language-javascript">props: {
+
+    /**
+     * Contains the currently selected value. Very similar to a
+     * `value` attribute on an &amp;lt;input&amp;gt;. In most cases, you'll want
+     * to set this as a two-way binding, using :value.sync. However,
+     * this will not work with Vuex, in which case you'll need to use
+     * the onChange callback property.
+     * @type {Object||String||null}
+     */
+    value: {
+      default: null
+    },
+
+    /**
+     * An array of strings or objects to be used as dropdown choices.
+     * 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 {Array}
+     */
+    options: {
+      type: Array,
+      default() { return [] },
+    },
+
+    /**
+     * Enable/disable filtering the options.
+     * @type {Boolean}
+     */
+    searchable: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Equivalent to the `multiple` attribute on a `&lt;select&gt;` input.
+     * @type {Boolean}
+     */
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Equivalent to the `placeholder` attribute on an `&lt;input&gt;`.
+     * @type {String}
+     */
+    placeholder: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Sets a Vue transition property on the `.dropdown-menu`. vue-select
+     * does not include CSS for transitions, you'll need to add them yourself.
+     * @type {String}
+     */
+    transition: {
+      type: String,
+      default: 'expand'
+    },
+
+    /**
+     * Enables/disables clearing the search text when an option is selected.
+     * @type {Boolean}
+     */
+    clearSearchOnSelect: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Tells vue-select what key to use when generating option labels when
+     * `option` is an object.
+     * @type {String}
+     */
+    label: {
+      type: String,
+      default: 'label'
+    },
+
+    /**
+     * An optional callback function that is called each time the selected
+     * 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}
+     */
+    onChange: Function
+  }
+    </code></pre>
+</template>
+
+<script>
+  export default {}
+</script>