move demo related files to /docs/ add gh-pages module

build/build.js

@@ -6,6 +6,7 @@ var path = require('path')
 var config = require('../config')
 var ora = require('ora')
 var webpack = require('webpack')
+var ghpages = require('gh-pages')
 var webpackConfig = require('./webpack.prod.conf')
 
 console.log(
@@ -32,4 +33,6 @@ webpack(webpackConfig, function (err, stats) {
     chunks: false,
     chunkModules: false
   }) + '\n')
+
+  ghpages.publish(path.join(__dirname, '../dist'))
 })

build/webpack.base.conf.js

@@ -5,7 +5,7 @@ var projectRoot = path.resolve(__dirname, '../')
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './docs/main.js'
   },
   output: {
     path: config.build.assetsRoot,
@@ -45,7 +45,7 @@ module.exports = {
         loader: 'vue-html'
       },
       {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        test: /\.(png|jpe?g|gif)(\?.*)?$/,
         loader: 'url',
         query: {
           limit: 10000,
@@ -53,7 +53,7 @@ module.exports = {
         }
       },
       {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
         loader: 'url',
         query: {
           limit: 10000,

config/index.js

@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: '/vue-select/',
     productionSourceMap: true
   },
   dev: {

docs/App.vue

@@ -0,0 +1,32 @@
+<style lang="scss">
+  @import 'assets/scss/_demo.scss';
+  @import 'assets/scss/_cyan_theme.scss';
+  @import 'assets/scss/_prism.scss';
+  @import 'assets/scss/_octicons.scss';
+</style>
+
+<template>
+  <div class="container">
+    <div class="col-md-10 col-md-offset-1">
+      <install></install>
+      <params></params>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+
+/**
+ * Note that this file (and anything other than src/components/Select.vue)
+ * has nothing to do with how you use vue-select. These files are used
+ * for the demo site at http://sagalbot.github.io/vue-select/. They'll
+ * be moved out of this repo in the very near future to avoid confusion.
+ */
+
+import Install from './components/Install.vue'
+import Params from './components/Params.vue'
+
+export default {
+  components: { Params, Install }
+}
+</script>

docs/assets/scss/_demo.scss

@@ -84,3 +84,8 @@ p.lead {
   font-family: "Helvetica Neue", "Helvetica";
   font-weight: 400;
 }
+
+.accolades a {
+  margin-left: 0;
+  margin-right: 5px;
+}

docs/components/Install.vue

@@ -141,9 +141,9 @@
    * for the demo site at http://sagalbot.github.io/vue-select/. They'll
    * be moved out of this repo in the very near future to avoid confusion.
    */
-  import countries from '../countries/advanced'
+  import countries from '../data/advanced'
-  import simple from '../countries/simple'
+  import simple from '../data/simple'
-  import vSelect from './Select.vue'
+  import vSelect from '../../src/components/Select.vue'
   import vCode from './Code.vue'
   import InstallSnippet from './snippets/InstallSnippet.vue'
   export default {

docs/main.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import App from './App.vue'
+import store from './vuex/store'
+import 'prismjs'
+import vSelect from '../src/components/Select.vue'
+
+Vue.component('v-select', vSelect)
+
+Vue.config.debug = true
+Vue.config.devtools = true
+
+import { setSelected, toggleMultiple, setPlaceholder, toggleOptionType } from './vuex/actions'
+
+
+/* eslint-disable no-new */
+new Vue({
+  el: 'body',
+  store,
+  components: { App },
+  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 }
+  }
+})

docs/vuex/store.js

@@ -10,8 +10,8 @@ const state = {
   multiple: true,
   maxHeight: '400px',
   options: {
-    advanced: require('../countries/advanced.js'),
+    advanced: require('../data/advanced.js'),
-    simple: require('../countries/simple.js'),
+    simple: require('../data/simple.js'),
   },
   optionType: 'advanced'
 }

index.html

@@ -24,6 +24,61 @@
     <meta property="twitter:description" content="A well-tested, native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
   </head>
   <body>
+    <div class="jumbotron jumbotron-top">
+      <div class="container">
+        <div class="col-md-8 col-md-offset-2">
+
+          <h1>Vue Select</h1>
+
+          <p class="accolades lead">
+            <a href="https://travis-ci.org/sagalbot/vue-select"><img src="https://img.shields.io/travis/sagalbot/vue-select.svg?style=flat-square" alt="Build Status"></a>
+            <a href="https://codeclimate.com/github/sagalbot/vue-select"><img src="https://img.shields.io/codeclimate/github/sagalbot/vue-select.svg?style=flat-square" alt="Code Climate Rating"></a>
+            <a href="https://codeclimate.com/github/sagalbot/vue-select"><img src="https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square" alt="Code Coverage"></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 native Vue.js select component that provides similar functionality to Select2/Chosen without the overhead of jQuery.</p>
+
+          <v-select
+                  id="v-select"
+                  taggable
+                  :placeholder="placeholder"
+                  :value="selected"
+                  :options="options"
+                  :multiple="multiple"
+                  :on-change="setSelected"
+          >
+          </v-select>
+
+          <div class="row">
+            <div class="col-md-3 col-md-offset-3">
+              <ul class="list-vue">
+                <li>Fully Reactive</li>
+                <li>Tagging Support <small>v1.1.0</small></li>
+                <li>Works with Vuex</li>
+                <li>Zero dependencies</li>
+              </ul>
+            </div>
+            <div class="col-md-3">
+              <ul class="list-vue">
+                <li>+95% Test Coverage</li>
+                <li>Select Single/Multiple</li>
+                <li>Typeahead Suggestions</li>
+                <li>Bootstrap Friendly Markup</li>
+              </ul>
+            </div>
+          </div>
+
+          <a class="btn btn-primary btn-outline" href="https://github.com/sagalbot/vue-select"><span class="octicon octicon-mark-github"></span> View on GitHub</a>
+        </div>
+      </div>
+      <a href="#install" class="down-arrow">
+        Install, Examples &amp; Documentation
+        <i role="presentation" class="glyphicon glyphicon-chevron-down"></i>
+      </a>
+    </div>
     <app></app>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

package.json

@@ -37,6 +37,7 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.4",
     "function-bind": "^1.0.2",
+    "gh-pages": "^0.11.0",
     "html-webpack-plugin": "^2.8.1",
     "http-proxy-middleware": "^0.15.2",
     "inject-loader": "^2.0.1",

src/App.vue

@@ -1,116 +0,0 @@
-<style lang="scss">
-  @import 'assets/scss/_demo.scss';
-  @import 'assets/scss/_cyan_theme.scss';
-  @import 'assets/scss/_prism.scss';
-  @import 'assets/scss/_octicons.scss';
-</style>
-
-<template>
-  <div class="jumbotron jumbotron-top">
-    <div class="container">
-      <div class="col-md-8 col-md-offset-2">
-
-        <h1>Vue Select</h1>
-
-        <p class="accolades lead">
-          <a href="https://travis-ci.org/sagalbot/vue-select"><img src="https://img.shields.io/travis/sagalbot/vue-select.svg?style=flat-square" alt="Build Status"></a>
-          <a href="https://codeclimate.com/github/sagalbot/vue-select"><img src="https://img.shields.io/codeclimate/github/sagalbot/vue-select.svg?style=flat-square" alt="Code Climate Rating"></a>
-          <a href="https://codeclimate.com/github/sagalbot/vue-select"><img src="https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square" alt="Code Coverage"></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 well-tested, native Vue.js select component that provides similar functionality to Select2/Chosen without the overhead of jQuery.</p>
-
-        <v-select
-          id="v-select"
-          taggable
-          :placeholder="placeholder"
-          :value="selected"
-          :options="options"
-          :multiple="multiple"
-          :on-change="setSelected"
-        >
-        </v-select>
-
-        <div class="row">
-          <div class="col-md-3 col-md-offset-3">
-            <ul class="list-vue">
-              <li>Fully Reactive</li>
-              <li>Tagging Support <small>v1.1.0</small></li>
-              <li>Works with Vuex</li>
-              <li>Zero dependencies</li>
-            </ul>
-          </div>
-          <div class="col-md-3">
-            <ul class="list-vue">
-              <li>+90% Test Coverage</li>
-              <li>Select Single/Multiple</li>
-              <li>Typeahead Suggestions</li>
-              <li>Bootstrap Friendly Markup</li>
-            </ul>
-          </div>
-        </div>
-
-        <a class="btn btn-primary btn-outline" href="https://github.com/sagalbot/vue-select"><span class="octicon octicon-mark-github"></span> View on GitHub</a>
-      </div>
-    </div>
-    <a href="#install" class="down-arrow">
-      Install, Examples &amp; Documentation
-      <i role="presentation" class="glyphicon glyphicon-chevron-down"></i>
-    </a>
-  </div>
-
-  <div class="container">
-    <div class="col-md-10 col-md-offset-1">
-      <install></install>
-      <params></params>
-    </div>
-  </div>
-</template>
-
-<script type="text/babel">
-
-/**
- * Note that this file (and anything other than src/components/Select.vue)
- * has nothing to do with how you use vue-select. These files are used
- * for the demo site at http://sagalbot.github.io/vue-select/. They'll
- * be moved out of this repo in the very near future to avoid confusion.
- */
-
-import Install from './components/Install.vue'
-import Params from './components/Params.vue'
-import vSelect from './components/Select.vue'
-import { setSelected, toggleMultiple, setPlaceholder, toggleOptionType } from './vuex/actions'
-
-export default {
-  components: { Params, Install, 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>

src/main.js

@@ -1,14 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import store from './vuex/store'
-import 'prismjs'
-
-// Vue.config.debug = true
-Vue.config.devtools = true
-
-/* eslint-disable no-new */
-new Vue({
-  el: 'body',
-  store,
-  components: { App }
-})