improved demo page

dist/prism.css

@@ -1,123 +1,153 @@
-/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+jsx */
+/*
-/**
- * okaidia theme for JavaScript, CSS and HTML
- * Loosely based on Monokai textmate theme by http://www.monokai.nl/
- * @author ocodia
- */
 
+Name:       Base16 Atelier Sulphurpool Light
+Author:     Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
+
+Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
+Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
 code[class*="language-"],
 pre[class*="language-"] {
-	color: #f8f8f2;
+  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
-	background: none;
+  font-size: 1em;
-	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  line-height: 1.375;
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  direction: ltr;
-	text-align: left;
+  text-align: left;
-	white-space: pre;
+  white-space: pre;
-	word-spacing: normal;
+  word-spacing: normal;
-	word-break: normal;
+  word-break: normal;
-	word-wrap: normal;
+  font-weight: 500;
-	line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  background: #f5f7ff;
+  color: #5e6687;
+}
 
-	-moz-tab-size: 4;
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-	-o-tab-size: 4;
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-	tab-size: 4;
+  text-shadow: none;
+  background: #dfe2f1;
+}
 
-	-webkit-hyphens: none;
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-	-moz-hyphens: none;
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
-	-ms-hyphens: none;
+  text-shadow: none;
-	hyphens: none;
+  background: #dfe2f1;
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-	padding: 1em;
+  padding: 1em;
-	margin: .5em 0;
+  margin: .5em 0;
-	overflow: auto;
+  overflow: auto;
-	border-radius: 0.3em;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-	background: #272822;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-	padding: .1em;
+  padding: .1em;
-	border-radius: .3em;
+  border-radius: .3em;
-	white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: slategray;
+  color: #898ea4;
 }
 
 .token.punctuation {
-	color: #f8f8f2;
+  color: #5e6687;
 }
 
-.namespace {
+.token.namespace {
-	opacity: .7;
+  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
-	color: #f92672;
-}
-
-.token.boolean,
-.token.number {
-	color: #ae81ff;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-	color: #a6e22e;
 }
 
 .token.operator,
+.token.boolean,
+.token.number {
+  color: #c76b29;
+}
+
+.token.property {
+  color: #c08b30;
+}
+
+.token.tag {
+  color: #3d8fd1;
+}
+
+.token.string {
+  color: #22a2c9;
+}
+
+.token.selector {
+  color: #6679cc;
+}
+
+.token.attr-name {
+  color: #c76b29;
+}
+
 .token.entity,
 .token.url,
 .language-css .token.string,
-.style .token.string,
+.style .token.string {
-.token.variable {
+  color: #22a2c9;
-	color: #f8f8f2;
 }
 
-.token.atrule,
 .token.attr-value,
-.token.function {
+.token.keyword,
-	color: #e6db74;
+.token.control,
-}
+.token.directive,
-
+.token.unit {
-.token.keyword {
+  color: #ac9739;
-	color: #66d9ef;
 }
 
+.token.statement,
 .token.regex,
-.token.important {
+.token.atrule {
-	color: #fd971f;
+  color: #22a2c9;
+}
+
+.token.placeholder,
+.token.variable {
+  color: #3d8fd1;
+}
+
+.token.deleted {
+  text-decoration: line-through;
+}
+
+.token.inserted {
+  border-bottom: 1px dotted #202746;
+  text-decoration: none;
+}
+
+.token.italic {
+  font-style: italic;
 }
 
 .token.important,
 .token.bold {
-	font-weight: bold;
+  font-weight: bold;
 }
-.token.italic {
+
-	font-style: italic;
+.token.important {
+  color: #c94922;
 }
 
 .token.entity {
-	cursor: help;
+  cursor: help;
 }
 
+pre > code.highlight {
+  outline: 0.4em solid #c94922;
+  outline-offset: .4em;
+}

index.html

@@ -2,16 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>vue-select</title>
+    <title>Vue Select | VueJS Select2/Chosen Component</title>
 
     <link rel="stylesheet" href="dist/prism.css">
     <link rel="stylesheet" href="dist/octicons.css">
-    <link href='https://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
+
+    <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono" rel="stylesheet" type="text/css">
+    <link href="//fonts.googleapis.com/css?family=Dosis:300&amp;text=Vue Select" rel="stylesheet" type="text/css">
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+
+    <meta name="title" content="Vue Select | VueJS Select2/Chosen Component">
+    <meta name="description" content="A well-tested, native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
   </head>
   <body>
     <app></app>
-
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

src/components/Install.vue

@@ -1,5 +1,5 @@
 <template>
-<h2 class="page-header">Install &amp; and Usage</h2>
+<h2 class="page-header" id="install">Install &amp; and Usage</h2>
 <p>Install from GitHub via NPM</p>
 <pre><code class="language-bash">npm install sagalbot/vue-select</code></pre>
 

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>