init vuex compat

package.json

@@ -23,7 +23,8 @@
     "url": "https://github.com/sagalbot/vue-select.git"
   },
   "dependencies": {
-    "vue": "^1.0.0"
+    "vue": "^1.0.0",
+    "vuex": "^0.6.2"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",

src/App.vue

@@ -71,26 +71,7 @@
     </div>
   </div>
 
-    <div class="jumbotron jumbotron-green">
+    <jumbotron></jumbotron>
-      <div class="container">
-      <div class="row">
-        <div class="col-md-6 col-md-offset-1">
-          <v-select
-            id="v-select"
-            :placeholder="placeholder"
-            :value.sync="select"
-            :options="options[optionType]"
-            :multiple="multiple">
-          </v-select>
-        </div>
-
-        <div class="col-md-4">
-          <!-- <h4>Output</h4> -->
-          <pre id="output">{{ select | json }}</pre>
-        </div>
-      </div>
-    </div>
-    </div>
 
     <div id="app" class="container">
     <h2 class="page-header">Live Edit <small>play around with the above vue-select</small></h2>
@@ -138,14 +119,6 @@
       </div>
     </div>
 
-    <!-- <h3>Todos:</h3>
-    <ul>
-      <li>Fix layout issue where selected tags & text input overflow outside <code>.dropdown</code>.</li>
-      <li>Clicking the 'caret' icon should toggle the dropdown.</li>
-      <li>Add boolean prop to disable search.</li>
-      <li>Add a 'simple' prop that disables search, and the selected 'tags'. Uses an active class on the selected item(s) while keeping the placeholder constant.</li>
-    </ul> -->
-
     <div class="row">
       <div class="col-md-6">
         <h2 class="page-header">Install & Usage</h2>
@@ -237,42 +210,13 @@
       </div>
     </div>
 
-
-
-
-    <!-- <h2 class="page-header">Contributing</h2>
-    <h4>Build Setup <small>built using the <a href="https://github.com/vuejs-templates/webpack">vue-cli webpack template</a></small></h4>
-    <p>install dependencies <br/><code>npm install</code></p>
-    <p>serve with hot reload at localhost:8080 <br><code>npm run dev</code></p>
-    <p>build for production with minification <br><code>npm run build</code></p>
-    <p>lint all *.js and *.vue files <br><code>npm run lint</code></p>
-    <p>run unit tests <br><code>npm test</code></p> -->
-
   </div>
 </template>
 
 <script>
-import Vue from 'vue'
+import Jumbotron from './components/Jumbotron.vue'
-import vSelect from './components/Select.vue'
-
-Vue.config.debug = true
 
 export default {
-  components: {vSelect},
+  components: {Jumbotron},
-
-  data() {
-    return {
-      select: null,
-      placeholder: 'Choose a Country',
-      multiple: true,
-      maxHeight: '400px',
-      options: {
-        advanced: require('./countries.js'),
-        simple: require('./simpleCountries.js'),
-        simpler: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}, {label: 'This is Baz', value: 'baz'}]
-      },
-      optionType: 'advanced'
-    }
-  }
 }
 </script>

src/components/Jumbotron.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="jumbotron jumbotron-green">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6 col-md-offset-1">
+
+          <v-select
+            id="v-select"
+            :placeholder="placeholder"
+            :value.sync="select"
+            :options="options[optionType]"
+            :multiple="multiple">
+          </v-select>
+
+        </div>
+
+        <pre id="output" class="col-md-4">{{ select | json }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import vSelect from './Select.vue'
+
+  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'}],
+        },
+        optionType: 'simple'
+      }
+    }
+  }
+</script>

src/main.js

@@ -1,58 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import store from './vuex/store'
-Vue.transition('bounce', {
-    enterClass: 'bounceInLeft',
-    leaveClass: 'bounceOutRight'
-})
-
-Vue.transition('zoom', {
-    enterClass: 'zoomIn',
-    leaveClass: 'zoomOut'
-})
-
-Vue.transition('fade', {
-    enterClass: 'fadeIn',
-    leaveClass: 'fadeOut'
-})
-
-Vue.transition('fadeInDownBig', {
-    enterClass: 'fadeInDownBig',
-    leaveClass: 'fadeOutDownBig'
-})
-
-Vue.transition('slideInDown', {
-    enterClass: 'slideInDown',
-    leaveClass: 'slideOutDown'
-})
-
-Vue.transition('slideUp', {
-    enterClass: 'fadeInDown',
-    leaveClass: 'fadeOutUp'
-})
-
-Vue.transition('lightSpeed', {
-    enterClass: 'lightSpeedIn',
-    leaveClass: 'lightSpeedOut'
-})
-
-Vue.transition('flipX', {
-    enterClass: 'flipInX',
-    leaveClass: 'flipOutX'
-})
-
-Vue.transition('flipY', {
-    enterClass: 'flipInY',
-    leaveClass: 'flipOutY'
-})
-
-Vue.transition('rotate', {
-    enterClass: 'rotateIn',
-    leaveClass: 'rotateOut'
-})
 
 /* eslint-disable no-new */
 new Vue({
   el: 'body',
+  store,
   components: { App }
 })

src/vuex/actions.js

@@ -0,0 +1,14 @@
+export const increment = ({ dispatch }) => dispatch('INCREMENT')
+export const decrement = ({ dispatch }) => dispatch('DECREMENT')
+
+export const incrementIfOdd = ({ dispatch, state }) => {
+  if ((state.count + 1) % 2 === 0) {
+    dispatch('INCREMENT')
+  }
+}
+
+export const incrementAsync = ({ dispatch }) => {
+  setTimeout(() => {
+    dispatch('INCREMENT')
+  }, 1000)
+}

src/vuex/store.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+Vue.config.debug = true
+
+const state = {
+  count: 0
+}
+
+const mutations = {
+  INCREMENT (state) {
+    state.count++
+  },
+  DECREMENT (state) {
+    state.count--
+  }
+}
+
+export default new Vuex.Store({
+  state,
+  mutations
+})