- move gitbook files into their own folder at docs/gitbook

- rebuild homepage at `docs/homepage`

book.json

@@ -1,6 +1,7 @@
 {
   "title": "vue-select",
   "gitbook": ">3.0.0",
+  "root": "./docs/gitbook",
   "plugins": ["edit-link", "-fontsettings", "github", "codepen"],
   "pluginsConfig": {
     "edit-link": {

build/utils.js

@@ -2,13 +2,23 @@ var path = require('path')
 var config = require('../config')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
+/**
+ * Get the path to the assetsSubDirectory
+ * @param _path
+ * @returns {*|string}
+ */
 exports.assetsPath = function (_path) {
   return path.posix.join(config.build.assetsSubDirectory, _path)
 }
 
+/**
+ * Generate loader string to be used with extract text plugin
+ * @param options
+ * @returns {{css: *, postcss: *, less: *, sass: *, scss: *, stylus: *, styl: *}}
+ */
 exports.cssLoaders = function (options) {
   options = options || {}
-  // generate loader string to be used with extract text plugin
+
   function generateLoaders (loaders) {
     var sourceLoader = loaders.map(function (loader) {
       var extraParamChar
@@ -41,7 +51,11 @@ exports.cssLoaders = function (options) {
   }
 }
 
-// Generate loaders for standalone style files (outside of .vue)
+/**
+ * Generate loaders for standalone style files (outside of .vue)
+ * @param options
+ * @returns {Array}
+ */
 exports.styleLoaders = function (options) {
   var output = []
   var loaders = exports.cssLoaders(options)
@@ -54,3 +68,12 @@ exports.styleLoaders = function (options) {
   }
   return output
 }
+
+/**
+ * Are we serving the docs or
+ * the dev environment?
+ * @returns {boolean}
+ */
+exports.shouldServeHomepage = function () {
+  return process.argv.indexOf('--docs') > 0
+}

build/webpack.base.conf.js

@@ -5,7 +5,7 @@ var projectRoot = path.resolve(__dirname, '../')
 
 module.exports = {
   entry: {
-    app: process.argv.indexOf('--docs') > 0 ? './docs/docs.js' : './src/dev.js',
+    app: utils.shouldServeHomepage() ? './docs/homepage/home.js' : './src/dev.js',
   },
   output: {
     path: config.build.assetsRoot,

build/webpack.dev.conf.js

@@ -27,7 +27,7 @@ module.exports = merge(baseWebpackConfig, {
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: process.argv.indexOf('--docs') > 0 ? './docs/docs.html' : 'dev.html',
+      template: utils.shouldServeHomepage() ? './docs/homepage/home.html' : 'dev.html',
       inject: true
     })
   ],

docs-old/assets/scss/_prism.scss

@@ -1,155 +0,0 @@
-/*
-
-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-"] {
-  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;
-  font-size: 1em;
-  line-height: 1.375;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  font-weight: 500;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-  background: $code-white;
-  color: #5e6687;
-  border-radius: 0;
-  border: none;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #dfe2f1;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #dfe2f1;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
-  overflow: auto;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #898ea4;
-}
-
-.token.punctuation {
-  color: #5e6687;
-}
-
-.token.namespace {
-  opacity: .7;
-}
-
-.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 {
-  color: #22a2c9;
-}
-
-.token.attr-value,
-.token.keyword,
-.token.control,
-.token.directive,
-.token.unit {
-  color: #ac9739;
-}
-
-.token.statement,
-.token.regex,
-.token.atrule {
-  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;
-}
-
-.token.important {
-  color: #c94922;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-pre > code.highlight {
-  outline: 0.4em solid #c94922;
-  outline-offset: .4em;
-}

docs/gitbook/Basics/Values.md

@@ -12,12 +12,12 @@ If you don't require the `value` to be synced, you can also pass the prop direct
 <v-select :value="selected"></v-select>
 ```
 
-This method allows you to pre-select a value(s), without syncing any changes to the parent component.
+This method allows you to pre-select a value(s), without syncing any changes to the parent component. This is also very useful when using a state management tool, like Vuex.
 
 ### Single/Multiple Selection {#multiple}
 
 By default, `vue-select` supports choosing a single value. If you need multiple values, use the `multiple` prop:
 
 ```html
-<v-select multiple :options="countries"></v-select>
+<v-select multiple v-model="selected"></v-select>
 ```

docs/gitbook/SUMMARY.md

@@ -2,7 +2,7 @@
 
 - [Introduction](README.md)
 - [Installation](Install.md)
-  - [npm](Install.md#npm)
+  - [npm/yarn](Install.md#npm)
   - [cdn](Install.md#cdn)
 - [Getting Started](Basics.md)
   - [Dropdown Options](Basics/Options.md)
@@ -14,7 +14,7 @@
 - [Localization](Basics/Localization.md)
 
 - Digging Deeper
-  - [Templating](Basics.md#options)
+  - [Templating](Advanced/Templating.md)
   - [Vuex](Basics.md#options)
   - [AJAX](Basics.md#options)
   - [Mixins](Basics.md#options)
@@ -22,6 +22,6 @@
   - [Examples](Examples.md)
 
 - API
-- [Props](Props/Props.md)
+- [Props](Api/Props.md)
-- Events
+- [Events](Api/Events.md)
-- Slots
+- [Slots](Api/Slots.md)

docs/gitbook/styles/website.css

@@ -44,6 +44,13 @@ li a {
   color: #42b983;
   font-weight: 600;
 }
+
+/* remove gitbook link and divider */
+.book-summary ul.summary li a.gitbook-link,
+.book-summary ul.summary li:nth-last-child(2) {
+  display: none;
+}
+
 #book-search-input { background-color: #fafafa; }
 .book-summary { background-color: #fff; }
 

docs/homepage/assets/scss/_octicons.scss

@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'octicons';
-  src: url('~assets/fonts/octicons.eot?#iefix') format('embedded-opentype'),
+  src: url('~docs/homepage/assets/fonts/octicons.eot?#iefix') format('embedded-opentype'),
-  url('~assets/fonts/octicons.woff') format('woff'),
+  url('~docs/homepage/assets/fonts/octicons.woff') format('woff'),
-  url('~assets/fonts/octicons.ttf') format('truetype'),
+  url('~docs/homepage/assets/fonts/octicons.ttf') format('truetype'),
-  url('~assets/fonts/octicons.svg#octicons') format('svg');
+  url('~docs/homepage/assets/fonts/octicons.svg#octicons') format('svg');
   font-weight: normal;
   font-style: normal;
 }

docs/homepage/assets/scss/_variables.scss

@@ -6,6 +6,8 @@ $purple: #93648D;
 $black: #34495e;
 $red: #ff6666;
 
+$gradient: linear-gradient(45deg, rgba(76,195,217,0) 0%,rgba(152,227,234,1) 100%);
+
 //  Code
 $code-blue: #66d9ef;
 $code-purple: #ae81ff;

docs/homepage/assets/scss/home.scss

@@ -0,0 +1,4 @@
+@import '~normalize.css';
+@import 'demo';
+@import 'cyan_theme';
+@import 'octicons';

docs/homepage/home.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Vue Select | VueJS Select2 Component</title>
+
+    <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">
+
+    <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.">
+
+    <link rel="icon" href="static/vue-logo.png" type="image/png">
+    <meta property="og:image" content="static/vue-logo.png">
+    <meta property="twitter:image" content="static/vue-logo.png">
+
+    <meta name="description"
+          content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
+    <meta property="og:description"
+          content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
+    <meta property="twitter:description"
+          content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
+
+    <meta property="twitter:title" content="Vue Select | VueJS Select2/Chosen Component">
+    <meta property="og:title" content="Vue Select | VueJS Select2/Chosen Component">
+    <meta property="og:site_name" content="Vue Select | VueJS Select2/Chosen Component">
+    <meta property="og:url" content="http://sagalbot.github.io/vue-select/">
+</head>
+<body>
+<div id="app">
+
+    <h1>Vue Select</h1>
+
+    <p class="accolades lead">
+        <a href="https://github.com/sagalbot/vue-select">
+            <img src="https://img.shields.io/github/stars/sagalbot/vue-select.svg?label=Stars&style=flat-square"
+                 alt="GitHub Stars">
+        </a>
+        <a href="https://www.npmjs.com/package/vue-select">
+            <img src="https://img.shields.io/npm/dm/vue-select.svg?style=flat-square" alt="Downloads per Month">
+        </a>
+        <a href="https://codeclimate.com/github/sagalbot/vue-select/maintainability">
+            <img src="https://img.shields.io/codeclimate/maintainability/sagalbot/vue-select.svg?style=flat-square"
+                 alt="Maintainability"/>
+        </a>
+        <a href="https://gemnasium.com/github.com/sagalbot/vue-select">
+            <img src="https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square"
+                 alt="No Dependencies"/>
+        </a>
+        <img src="https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square" alt="MIT License">
+        <img src="https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square"
+             alt="Current Release">
+    </p>
+
+    <p class="lead">
+        A Vue.js select component that provides similar functionality to Select2/Chosen without the overhead of jQuery.
+    </p>
+
+    <v-select
+            id="v-select"
+            :placeholder="placeholder"
+            :options="options"
+            multiple
+    >
+    </v-select>
+
+    <div class="feature-list">
+        <ul class="list-vue">
+            <li>Custom Templating</li>
+            <li>Tagging Support</li>
+            <li>Works with Vuex</li>
+            <li>Zero dependencies</li>
+        </ul>
+
+        <ul class="list-vue">
+            <li>+95% Test Coverage</li>
+            <li>Select Single/Multiple</li>
+            <li>Typeahead Suggestions</li>
+            <li>Plays nice with CSS Frameworks</li>
+        </ul>
+    </div>
+
+    <a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
+        <span class="octicon octicon-mark-github"></span> View on GitHub
+    </a>
+
+    <a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select/docs/">
+        <span class="octicon octicon-book"></span> Read the Docs
+    </a>
+
+</div>
+<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),
+        m = s.getElementsByTagName(o)[0];
+    a.async = 1;
+    a.src = g;
+    m.parentNode.insertBefore(a, m)
+  })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+
+  ga('create', 'UA-12818324-8', 'auto');
+  ga('send', 'pageview');
+</script>
+</body>
+</html>

docs/homepage/home.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import vSelect from '../../src/components/Select'
+
+import './assets/scss/home.scss'
+
+Vue.component('v-select', vSelect);
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app'
+});

docs/md/OnChange.md

@@ -1,26 +0,0 @@
-### Change Event <small>Vuex Compatibility</small>
-
-vue-select provides a `change` event. This function is passed the currently selected value(s) as it's only parameter.
-
-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.
-
-<div class="form-inline">
-<div class="radio"><label><input type="radio" v-model="callback" value="console"> `console.log(val)`</label> </div>
-<div class="radio"><label><input type="radio" v-model="callback" value="alert"> `alert(val)`</label> </div>
-</div>
-
-```html
-<v-select :on-change="consoleCallback" :options="countries"></v-select>
-```
-
-```js
-methods: {
-  consoleCallback(val) {
-    console.dir(JSON.stringify(val))
-  },
-
-  alertCallback(val) {
-    alert(JSON.stringify(val))
-  }
-}
-```

package.json

@@ -9,7 +9,8 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "node build/dev-server.js",
-    "docs": "gitbook serve docs",
+    "dev:docs": "node build/dev-server.js --docs",
+    "docs": "gitbook serve docs/gitbook",
     "build": "node build/build.js",
     "lint": "eslint --ext .js,.vue src test/unit/specs",
     "test": "karma start test/unit/karma.conf.js --single-run",
@@ -58,6 +59,7 @@
     "lolex": "^1.4.0",
     "markdown-loader": "^0.1.7",
     "node-sass": "^3.7.0",
+    "normalize.css": "^7.0.0",
     "ora": "^0.2.0",
     "phantomjs-prebuilt": "^2.1.3",
     "prismjs": "^1.5.0",