├── dist
    └── .gitkeep
├── .babelrc
├── .gitignore
├── .eslintrc
├── src
    ├── main.js
    ├── vuex
    │   ├── modules
    │   │   ├── menu.js
    │   │   └── orders.js
    │   └── store.js
    ├── components
    │   ├── menuitems
    │   │   ├── ItemA.vue
    │   │   ├── ItemB.vue
    │   │   └── ItemC.vue
    │   ├── SovMenu.vue
    │   ├── SovConsole.vue
    │   └── SovOrders.vue
    └── App.vue
├── README.md
├── karma.conf.js
├── index.html
├── LICENSE
└── package.json


/dist/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"]
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist/build.js
4 | dist/build.css
5 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "standard",
 3 |   "plugins": [
 4 |     "html"
 5 |   ],
 6 |   "env": {
 7 |     "jasmine": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | // Import the app's store
 5 | import store from './vuex/store'
 6 | 
 7 | new Vue({ // eslint-disable-line no-new
 8 |   el: '#app',
 9 |   render: (h) => h(App),
10 |   store: store,
11 |   components: {
12 |     App
13 |   }
14 | })
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # short-order-vue
 2 | 
 3 | > A simple Vue 2.0 demo
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # lint all *.js and *.vue files
18 | npm run lint
19 | 
20 | # run unit tests
21 | npm test
22 | ```
23 | 
24 | For more information see the [docs for vueify](https://github.com/vuejs/vueify).
25 | 


--------------------------------------------------------------------------------
/src/vuex/modules/menu.js:
--------------------------------------------------------------------------------
 1 | // Initial state
 2 | const state = {
 3 |   items: [
 4 |     {
 5 |       id: 1,
 6 |       title: 'Bowl of chocolate ice cream',
 7 |       type: 'ItemA'
 8 |     },
 9 |     {
10 |       id: 2,
11 |       title: 'Salad',
12 |       type: 'ItemB'
13 |     },
14 |     {
15 |       id: 3,
16 |       title: 'Iced tea',
17 |       type: 'ItemC'
18 |     }
19 |   ]
20 | }
21 | 
22 | // Mutations
23 | const mutations = {}
24 | 
25 | export default {
26 |   state,
27 |   mutations
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/menuitems/ItemA.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li class="mud">
 3 |     Bucket of Cold Mud
 4 |     <a class="button is-success" @click="sendOrder">Order Up!</a>
 5 |   </li>
 6 | </template>
 7 | 
 8 | <script>
 9 | import { mapActions } from 'vuex'
10 | 
11 | export default {
12 |   name: 'ItemA',
13 |   props: ['order'],
14 |   methods: {
15 |     sendOrder () {
16 |       this.orderUp(this.order.id)
17 |     },
18 |     ...mapActions(['orderUp'])
19 |   }
20 | }
21 | </script>
22 | 
23 | <style>
24 | .mud {
25 | 
26 | }
27 | </style>


--------------------------------------------------------------------------------
/src/vuex/modules/orders.js:
--------------------------------------------------------------------------------
 1 | // Initial state
 2 | const state = {
 3 |   items: []
 4 | }
 5 | 
 6 | // Mutations
 7 | const mutations = {
 8 |   NEW_ORDER (state, type) {
 9 |     var id = 'order-' + parseInt(Math.random() * 100000)
10 |     state.items.push({ 'type': type, 'id': id })
11 |   },
12 |   CLEAR_ORDER (state, id) {
13 |     for (var i = state.items.length - 1; i >= 0; i--) {
14 |       if (state.items[i].id === id) {
15 |         state.items.splice(i, 1)
16 |       }
17 |     }
18 |   }
19 | }
20 | 
21 | export default {
22 |   state,
23 |   mutations
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/menuitems/ItemB.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li class="cow">
 3 |     Cow Feed
 4 |     <a class="button is-success" @click="sendOrder">Order Up!</a>
 5 |   </li>
 6 | </template>
 7 | 
 8 | <script>
 9 | import { mapActions } from 'vuex'
10 | 
11 | export default {
12 |   name: 'ItemB',
13 |   props: ['order'],
14 |   methods: {
15 |     sendOrder () {
16 |       if (window.confirm('Did you remember the Love Apples?')) {
17 |         this.orderUp(this.order.id)
18 |       } else {
19 |         return false
20 |       }
21 |     },
22 |     ...mapActions(['orderUp'])
23 |   }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/Nikku/karma-browserify
 2 | module.exports = function (config) {
 3 |   config.set({
 4 |     browsers: ['PhantomJS'],
 5 |     frameworks: ['browserify', 'jasmine'],
 6 |     files: ['test/unit/**/*.js'],
 7 |     reporters: ['spec'],
 8 |     preprocessors: {
 9 |       'test/unit/**/*.js': ['browserify']
10 |     },
11 |     browserify: {
12 |       debug: true,
13 |       // needed to enable mocks
14 |       plugin: [require('proxyquireify').plugin]
15 |     },
16 |     // if you want to continuously re-run tests on file-save,
17 |     // replace the following line with `autoWatch: true`
18 |     singleRun: true
19 |   })
20 | }
21 | 


--------------------------------------------------------------------------------
/src/vuex/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | // Modules
 5 | import menu from './modules/menu'
 6 | import orders from './modules/orders'
 7 | 
 8 | const debug = process.env.NODE_ENV !== 'production'
 9 | 
10 | // Initialize
11 | Vue.use(Vuex)
12 | Vue.config.debug = debug
13 | 
14 | // Build the store
15 | export default new Vuex.Store({
16 |   actions: {
17 |     newOrder ({commit}, event) {
18 |       commit('NEW_ORDER', event.target.dataset.type)
19 |     },
20 |     orderUp ({commit}, id) {
21 |       commit('CLEAR_ORDER', id)
22 |     }
23 |   },
24 | 
25 |   modules: {
26 |     menu,
27 |     orders
28 |   },
29 | 
30 |   strict: debug
31 | 
32 | })
33 | 


--------------------------------------------------------------------------------
/src/components/SovMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sov-menu box">
 3 |     <header>
 4 |       <h1 class="title is-3">Menu</h1>
 5 |     </header>
 6 |     <ul>
 7 |         <li v-for="item in menuItems">
 8 |           {{item.title}}
 9 |           <a class="button is-danger" @click="newOrder" :data-type="item.type">+1</a>
10 |         </li>
11 |     </ul>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import { mapActions, mapState } from 'vuex'
17 | 
18 | export default {
19 |   name: 'SovMenu',
20 |   methods: {
21 |     ...mapActions(['newOrder'])
22 |   },
23 |   computed: {
24 |     ...mapState({
25 |       menuItems: ({ menu }) => menu.items
26 |     })
27 |   }
28 | }
29 | </script>
30 | 
31 | 


--------------------------------------------------------------------------------
/src/components/menuitems/ItemC.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li class="winter">
 3 |     English Winter
 4 |     <a class="button is-success" @click="sendOrder">Order Up!</a>
 5 |   </li>
 6 | </template>
 7 | 
 8 | <script>
 9 | import { mapActions } from 'vuex'
10 | 
11 | export default {
12 |   name: 'ItemC',
13 |   props: ['order'],
14 |   methods: {
15 |     sendOrder (event) {
16 |       event.target.className = event.target.className + ' spin'
17 |       this.orderUp(this.order.id)
18 |     },
19 |     ...mapActions(['orderUp'])
20 |   }
21 | }
22 | </script>
23 | 
24 | <style>
25 | .winter .button {
26 |   transition: transform .5s
27 | }
28 | .winter .button.spin {
29 |   transform: rotate(180deg);
30 | }
31 | </style>


--------------------------------------------------------------------------------
/src/components/SovConsole.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sov-console box">
 3 |     <pre>orderItems = {{orderItems}}
 4 | 
 5 | menuItems = {{menuItems}}
 6 |     </pre>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { mapState } from 'vuex'
12 | 
13 | export default {
14 |   name: 'SovConsole',
15 |   computed: {
16 |     ...mapState({
17 |       menuItems: ({ menu }) => menu.items,
18 |       orderItems: ({ orders }) => orders.items
19 |     })
20 |   }
21 | }
22 | </script>
23 | 
24 | <style>
25 | .sov-console {
26 |   background: #444;
27 |   box-shadow: inset 0px 5px 5px #333;
28 | }
29 | .sov-console pre {
30 |   background: #444;
31 |   color: #6c6;
32 |   max-height: 780px;
33 |   overflow: auto;
34 | }
35 | </style>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Short Order Vue</title>
 6 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.min.css">
 7 |     <link rel="stylesheet" href="dist/build.css">
 8 |   </head>
 9 |   <body>
10 |     <div class="columns">
11 |       <div class="column is-6 is-offset-3">
12 |         <header>
13 |           <h1 class="title is-2 has-text-centered">Short Order Vue</h1>
14 |           <p class="has-text-centered">A simple demo app for Vue 2.0<br/><a href="https://benjaminlistwon.com/short-order-vue-a-vue-20-app">Blog Post</a> | <a href="https://github.com/BenjaminListwon/short-order-vue">GitHub Repo</a> | <a href="https://benjaminlistwon.com/demo/shortordervue/shortordervue.zip">Dist Zip</a> | <a href="http://www.dinerlingo.com/">Diner Lingo</a></p>
15 |         </header>
16 |       </div>
17 |     </div>
18 | 
19 |     <div id="app"></div>
20 |     <script src="dist/build.js"></script>
21 |   </body>
22 | </html>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Benjamin Listwon
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" class="columns">     
 3 |     <div class="column is-4 is-offset-1">
 4 |       <sov-menu></sov-menu>
 5 |       <sov-orders></sov-orders>
 6 |     </div>
 7 |     <div class="column is-5 is-offset-1">
 8 |       <sov-console></sov-console>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import SovMenu from './components/SovMenu.vue'
15 | import SovOrders from './components/SovOrders.vue'
16 | import SovConsole from './components/SovConsole.vue'
17 | 
18 | export default {
19 |   components: {
20 |     SovMenu,
21 |     SovOrders,
22 |     SovConsole
23 |   }
24 | }
25 | </script>
26 | 
27 | <style>
28 | body {
29 |   font-family: Helvetica, sans-serif;
30 | }
31 | .column {
32 |   padding: 2rem;
33 | }
34 | .box header {
35 |   padding-bottom: 1rem;  
36 |   text-align: center;
37 |   border-bottom: 3px double #ddd;
38 | }
39 | ul li {
40 |   padding: 1.1rem 0;
41 |   position: relative;
42 | }
43 | li a.button {
44 |   position: absolute;
45 |   right: 0;
46 | }
47 | div.box a.button {
48 |   position: absolute;
49 |   right: 0em;
50 |   top: 0.75rem;
51 | }
52 | .fade-enter-active, .fade-leave-active {
53 |   transition: opacity .5s
54 | }
55 | .fade-enter, .fade-leave-active {
56 |   opacity: 0
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/SovOrders.vue:
--------------------------------------------------------------------------------
 1 | <!--  
 2 | SovOrders.vue
 3 | 
 4 | This component displays the current orders on "The Line". It uses three
 5 | subcomponents to render the list items which is a bit contrived, but I 
 6 | wanted to show how you can include different components based on some
 7 | type value.
 8 | 
 9 | 
10 | -->
11 | <template>
12 |   <div class="sov-orders box">
13 |     <header>
14 |       <h1 class="title is-3">The Line</h1>
15 |       <h2 :class="[{ 'backedup':isBackedUp }, 'subtitle', 'is-6']"><strong>{{count}}</strong> Orders Waiting</h2>
16 |     </header>
17 | 
18 |     <transition-group tag="ul" name="fade" mode="out-in">
19 |       <component v-for="order in orderItems" :is="order.type" :key="order.id" :order="order"></component>
20 |     </transition>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import ItemA from './menuitems/ItemA.vue'
26 | import ItemB from './menuitems/ItemB.vue'
27 | import ItemC from './menuitems/ItemC.vue'
28 | 
29 | import { mapActions, mapState } from 'vuex'
30 | 
31 | export default {
32 |   name: 'SovOrders',
33 |   components: {
34 |     ItemA,
35 |     ItemB,
36 |     ItemC
37 |   },
38 |   methods: {
39 |     ...mapActions(['handleOrder'])
40 |   },
41 |   computed: {
42 |     ...mapState({
43 |       orderItems: ({ orders }) => orders.items
44 |     }),
45 |     count () { return this.orderItems.length },
46 |     isBackedUp () { return this.count > 10 }
47 |   }
48 | }
49 | </script>
50 | 
51 | <style>
52 | .sov-orders ul {
53 |   max-height: 450px;
54 |   overflow: auto;
55 | }
56 | .backedup, .backedup strong  {
57 |   color: tomato;
58 | }
59 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "short-order-vue",
 3 |   "version": "0.0.1",
 4 |   "description": "A simple Vue 2.0 demo",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/BenjaminListwon/short-order-vue.git"
 8 |   },
 9 |   "keywords": [
10 |     "vue",
11 |     "vuejs",
12 |     "vuex",
13 |     "javascript"
14 |   ],
15 |   "license": "MIT",
16 |   "author": "Benjamin Listwon <blistwon@mac.com>",
17 |   "scripts": {
18 |     "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
19 |     "serve": "http-server -c 1 -a localhost",
20 |     "dev": "npm-run-all --parallel watchify serve",
21 |     "lint": "eslint --ext .js,.vue src",
22 |     "build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
23 |   },
24 |   "browserify": {
25 |     "transform": [
26 |       "vueify",
27 |       "babelify"
28 |     ]
29 |   },
30 |   "dependencies": {
31 |     "vue": "^v2.0.0-rc.6",
32 |     "vuex": "^v2.0.0-rc.5"
33 |   },
34 |   "devDependencies": {
35 |     "babel-core": "^6.0.0",
36 |     "babel-plugin-transform-runtime": "^6.0.0",
37 |     "babel-preset-es2015": "^6.0.0",
38 |     "babel-preset-stage-2": "^6.0.0",
39 |     "babel-runtime": "^6.0.0",
40 |     "babelify": "^7.2.0",
41 |     "browserify": "^13.1.0",
42 |     "browserify-hmr": "^0.3.1",
43 |     "cross-env": "^2.0.0",
44 |     "envify": "^3.4.1",
45 |     "eslint": "^3.3.0",
46 |     "eslint-config-standard": "^5.3.5",
47 |     "eslint-plugin-html": "^1.5.2",
48 |     "eslint-plugin-promise": "^2.0.1",
49 |     "eslint-plugin-standard": "^2.0.0",
50 |     "http-server": "^0.9.0",
51 |     "npm-run-all": "^2.3.0",
52 |     "proxyquireify": "^3.0.1",
53 |     "uglify-js": "^2.5.0",
54 |     "vueify": "^9.0.0",
55 |     "watchify": "^3.4.0"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------