Commits After Part 1

This prevents a bug from when you `vue add vue-router`

.browserslistrc

@@ -1 +1 @@
-chrome 80
+chrome 84

.eslintrc.js

@@ -26,7 +26,7 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:jest/recommended',
-    'plugin:vue-a11y/recommended',
+    'plugin:vuejs-accessibility/recommended',
     'tjw-base',
     'tjw-vue'
   ],
@@ -35,7 +35,15 @@ module.exports = {
       'error',
       'Property[method="true"]'
     ],
-    // https://github.com/maranran/eslint-plugin-vue-a11y/issues/10
+    'vuejs-accessibility/label-has-for': [
-    'vue-a11y/click-events-have-key-events': 'off'
+      'error',
+      {
+        'components': ['Label'],
+        'required': {
+          'some': ['nesting', 'id']
+        },
+        'allowChildren': false
+      }
+    ]
   }
 };

README.md

@@ -6,10 +6,10 @@ NW.js + Vue-CLI 4 example
 
 ![A screenshot of the default app running on Windows](screenshot.png)
 
-* NW.js 0.44.2
+* NW.js 0.47.0
-  * Chrome 80
+  * Chrome 84
-  * Node 13.8.0
+  * Node 14.5.0
-* Vue-CLI 4.2.2
+* Vue-CLI 4.4.6
 * Vue 2.6.11
 * Vue-DevTools (latest)
 * Babel

jest.config.js

@@ -14,6 +14,8 @@ module.exports = {
     '**/tests/unit/**/*.test.js'
   ],
   testPathIgnorePatterns: [
-    '<rootDir>/tests/e2e'
+    '<rootDir>/tests/e2e',
+    '<rootDir>/dist',
+    '<rootDir>/dist-vue'
   ]
 };

nightwatch.conf.js

@@ -15,6 +15,7 @@ nwBinary = './node_modules/nw/' + nwBinary;
 driver = './node_modules/nw/' + driver;
 
 module.exports = (function (settings) {
+  console.log(nwBinary);
   settings.webdriver.server_path = driver;
   settings.selenium.cli_args['webdriver.chrome.driver'] = driver;
   return settings;

package.json

@@ -1,77 +1,75 @@
 {
-  "ManifestComments": [
-    "Only add dependencies that you want shipped to the end user, for everything else, use devDependencies, including things that will be bundled by webpack.",
-    "NW.js requires a name and a main, everything else is optional.",
-    "The build section is used by nwjs-builder-phoenix, see its documentation for more info",
-    "To turn spell checking off, remove it from the chromium-args in this file"
-  ],
   "name": "nw-vue",
-  "version": "1.5.0",
+  "version": "1.6.0",
-  "main": "http://localhost:8964",
-  "node-remote": "http://localhost:8964",
-  "node-main": "",
-  "window": {
-    "width": 960,
-    "height": 600,
-    "min_width": 700,
-    "min_height": 500,
-    "icon": "src/assets/vue.png"
-  },
   "private": true,
   "scripts": {
-    "start": "concurrently \"npm run serve\" \"wait-on http://localhost:8964 && nw .\"",
     "serve": "vue-cli-service serve --port=8964",
     "build": "npm run build:clean && npm run build:vue && npm run build:nw",
-    "build:clean": "rimraf ./dist-vue ./dist",
+    "test:unit": "jest --config jest.config.js --coverage",
-    "build:vue": "vue-cli-service build --modern --dest ./dist-vue",
-    "build:nw": "build --concurrent --tasks win-x86,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
-    "build:win": "npm run build:win:clean && npm run build:vue && build --tasks win-x86 --mirror https://dl.nwjs.io/ .",
-    "build:lin": "npm run build:lin:clean && npm run build:vue && build --tasks linux-x64 --mirror https://dl.nwjs.io/ .",
-    "build:win:clean": "rimraf ./dist-vue ./dist/nw-vue-1.5.0-win-x86 ./dist/nw-vue-1.5.0-win-x86.zip ./dist/nw-vue-1.5.0-win-x86.7z ./dist/nw-vue-1.5.0-win-x86-Setup.exe",
-    "build:lin:clean": "rimraf ./dist-vue ./dist/nw-vue-1.5.0-linux-x64 ./dist/nw-vue-1.5.0-linux-x64.zip",
-    "run:win": "dist\\nw-vue-1.5.0-win-x86\\nw-vue.exe",
-    "run:lin": "./dist/nw-vue-1.5.0-linux-x64/nw-vue",
-    "regression": "rd /s /q node_modules & rd /s /q node_modules & rd /s /q node_modules & npm install && npm run lint && npm test && npm run build:win && npm run run:win",
-    "lint": "vue-cli-service lint --no-fix",
-    "fix": "vue-cli-service lint --fix",
-    "test": "npm run test:unit",
     "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "jest --config jest.config.js --coverage --runInBand",
+    "lint": "vue-cli-service lint --no-fix",
-    "validate": "npm run lint && npm run test:unit && npm run build:vue",
+    "build:clean": "rimraf ./dist-vue ./dist",
-    "update:vue-devtools": "rimraf ./node_modules/nw-vue-devtools-prebuilt && npm install"
+    "build:lin": "npm run build:lin:clean && npm run build:vue && build --tasks linux-x64 --mirror https://dl.nwjs.io/ .",
+    "build:lin:clean": "rimraf ./dist-vue ./dist/nw-vue-1.6.0-linux-x64 ./dist/nw-vue-1.6.0-linux-x64.zip",
+    "build:nw": "build --concurrent --tasks win-x86,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
+    "build:vue": "vue-cli-service build --modern --dest ./dist-vue",
+    "build:win": "npm run build:win:clean && npm run build:vue && build --tasks win-x86 --mirror https://dl.nwjs.io/ .",
+    "build:win:clean": "rimraf ./dist-vue ./dist/nw-vue-1.6.0-win-x86 ./dist/nw-vue-1.6.0-win-x86.zip ./dist/nw-vue-1.6.0-win-x86.7z ./dist/nw-vue-1.6.0-win-x86-Setup.exe",
+    "fix": "vue-cli-service lint --fix",
+    "regression": "rd /s /q node_modules & rd /s /q node_modules & rd /s /q node_modules & npm install && npm run lint && npm test && npm run build:win && npm run run:win",
+    "run:lin": "./dist/nw-vue-1.6.0-linux-x64/nw-vue",
+    "run:win": "dist\\nw-vue-1.6.0-win-x86\\nw-vue.exe",
+    "start": "concurrently \"npm run serve\" \"wait-on http://localhost:8964 && nw .\"",
+    "test": "npm run test:unit",
+    "update:vue-devtools": "rimraf ./node_modules/nw-vue-devtools-prebuilt && npm install",
+    "validate": "npm run lint && npm run test:unit && npm run build:vue"
   },
+  "main": "http://localhost:8964",
   "dependencies": {
-    "express": "^4.17.1"
+    "bootstrap": "^4.5.0",
+    "bootstrap-vue": "^2.16.0",
+    "express": "^4.17.1",
+    "vue-router": "^3.2.0",
+    "vue-select": "^3.10.7",
+    "vue2-datepicker": "^3.6.1",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.2.2",
+    "@vue/cli-plugin-babel": "^4.4.6",
-    "@vue/cli-plugin-e2e-nightwatch": "^4.2.2",
+    "@vue/cli-plugin-e2e-nightwatch": "^4.4.6",
-    "@vue/cli-plugin-eslint": "^4.2.2",
+    "@vue/cli-plugin-eslint": "^4.4.6",
-    "@vue/cli-plugin-unit-jest": "^4.2.2",
+    "@vue/cli-plugin-router": "^4.4.6",
-    "@vue/cli-service": "^4.2.2",
+    "@vue/cli-plugin-unit-jest": "^4.4.6",
-    "@vue/test-utils": "1.0.0-beta.31",
+    "@vue/cli-plugin-vuex": "^4.4.6",
-    "babel-eslint": "^10.0.3",
+    "@vue/cli-service": "^4.4.6",
-    "concurrently": "^5.1.0",
+    "@vue/test-utils": "^1.0.3",
-    "core-js": "^3.6.4",
+    "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
+    "concurrently": "^5.2.0",
+    "core-js": "^3.6.5",
+    "eslint": "^7.4.0",
     "eslint-config-tjw-base": "^1.0.0",
-    "eslint-config-tjw-vue": "^1.0.0",
+    "eslint-config-tjw-vue": "^2.0.0",
-    "eslint-plugin-jest": "^23.7.0",
+    "eslint-plugin-jest": "^23.18.0",
-    "eslint-plugin-vue": "^6.2.1",
+    "eslint-plugin-vue": "^6.2.2",
-    "eslint-plugin-vue-a11y": "^0.0.31",
+    "eslint-plugin-vuejs-accessibility": "^0.3.1",
-    "jest-serializer-vue-tjw": "^3.11.0",
+    "jest-serializer-vue-tjw": "^3.14.0",
-    "nw": "0.44.2-sdk",
+    "nw": "0.47.0-sdk",
     "nw-vue-devtools-prebuilt": "^0.0.10",
     "nwjs-builder-phoenix": "^1.15.0",
     "nwjs-types": "^1.0.0",
     "rimraf": "^3.0.2",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11",
-    "wait-on": "^4.0.0"
+    "wait-on": "^5.1.0"
   },
-  "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension'",
+  "ManifestComments": [
+    "Only add dependencies that you want shipped to the end user, for everything else, use devDependencies, including things that will be bundled by webpack.",
+    "NW.js requires a name and a main, everything else is optional.",
+    "The build section is used by nwjs-builder-phoenix, see its documentation for more info",
+    "To turn spell checking off, remove it from the chromium-args in this file"
+  ],
   "build": {
-    "nwVersion": "v0.44.2",
+    "nwVersion": "v0.47.0",
     "nwFlavor": "normal",
     "targets": [
       "zip",
@@ -138,5 +136,15 @@
       "diffUpdaters": false,
       "hashCalculation": true
     }
+  },
+  "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension'",
+  "node-main": "",
+  "node-remote": "http://localhost:8964",
+  "window": {
+    "width": 960,
+    "height": 600,
+    "min_width": 700,
+    "min_height": 500,
+    "icon": "src/assets/vue.png"
   }
 }

src/App.vue

@@ -1,41 +1,55 @@
 <template>
   <div id="app">
-    <img
+    <b-navbar toggleable="lg" type="dark" variant="info">
-      src="@/assets/vue.png"
+      <b-button class="mr-4" v-b-toggle.sidebar>Menu</b-button>
-      alt="Vue.js logo"
+      <b-navbar-brand href="#">NavBar</b-navbar-brand>
-      title="Vue.js"
+    </b-navbar>
-      class="logo"
+    <b-sidebar id="sidebar" title="Main Menu">
-    />
+      <div class="px-3 py-2">
-    <img
+        <b-list-group>
-      src="@/assets/nw.png"
+          <b-list-group-item href="/#/">
-      alt="NW.js logo"
+            Hours Log
-      title="NW.js"
+          </b-list-group-item>
-      class="logo"
+          <b-list-group-item href="/#/projects">
-    />
+            Projects
-    <HelloWorld msg="Welcome to your Vue.js Desktop App in NW.js!" />
+          </b-list-group-item>
+        </b-list-group>
+        <div class="dropdown-divider"></div>
+        <b-list-group class="">
+          <b-list-group-item href="/">
+            Exports
+          </b-list-group-item>
+          <b-list-group-item href="/">
+            Settings
+          </b-list-group-item>
+        </b-list-group>
+      </div>
+    </b-sidebar>    
+    <div id="nav">
+    </div>
+    <router-view />
   </div>
 </template>
 
-<script>
-import HelloWorld from '@/components/HelloWorld.vue';
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-};
-</script>
-
 <style>
 #app {
-  margin-top: 60px;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
-  color: #2C3E50;
+  -webkit-font-smoothing: antialiased;
-  font-family: 'Avenir', sans-serif;
+  -moz-osx-font-smoothing: grayscale;
   text-align: center;
+  color: #2c3e50;
 }
-.logo {
+
-  max-height: 140px;
+#nav {
-  margin: 0px 10px;
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
 }
 </style>

src/main.js

@@ -1,10 +1,29 @@
 import Vue from 'vue';
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import vSelect from 'vue-select'
+import DatePicker from 'vue2-datepicker'
+
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'vue-select/dist/vue-select.css'
+import 'vue2-datepicker/index.css'
+
 import App from './App.vue';
+import router from './router';
+import store from './store';
+
+Vue.use(BootstrapVue)
+Vue.use(IconsPlugin)
+Vue.component('v-select', vSelect)
+Vue.component('date-picker', DatePicker)
 
 Vue.config.productionTip = false;
 
 // eslint-disable-next-line no-unused-vars
 const app = new Vue({
+  router,
+  store,
+
   render: function (hyperscript) {
     return hyperscript(App);
   }

src/router/index.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import HoursLog from '../views/HoursLog.vue';
+import TimeEntry from '../views/TimeEntry.vue';
+import Projects from '../views/Projects.vue'
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: '/',
+    name: 'HoursLog',
+    component: HoursLog
+  },
+  {
+    path: '/add-time-entry',
+    name: 'TimeEntry',
+    component: TimeEntry
+  },
+  {
+    path: '/projects',
+    name: 'Projects',
+    component: Projects
+  },
+];
+
+const router = new VueRouter({
+  routes
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+});

src/views/HoursLog.vue

@@ -0,0 +1,46 @@
+<template>
+  <b-container class="hours-log-page">
+    <b-row>
+      <b-col cm="8" offset-sm="2">
+        <b-row class="mt-5 mb-4 ">
+          <b-col>
+            <h1>Hours Log</h1>
+          </b-col>
+          <b-col>
+            <b-btn variant="primary" @click="$router.push({name: 'TimeEntry'})">
+              + Add Entry
+              </b-btn>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col>
+            <b-table striped hover :items="items"></b-table> 
+          </b-col>
+        </b-row>
+      </b-col>
+    </b-row>
+  </b-container>
+  
+</template>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: 'HoursLog',
+  components: {
+  },
+  data() {
+    return {
+      items: [
+        { 
+          project_name: 'Company #1', 
+          date: 'May 12, 2020', 
+          start_time: '7:00 am', 
+          end_time: '11:00',
+        },
+      ]
+    }
+  }
+};
+</script>

src/views/Projects.vue

@@ -0,0 +1,39 @@
+<template>
+  <b-container class="projects-page">
+    <b-row>
+      <b-col cm="8" offset-sm="2">
+        <b-row class="mt-5 mb-4 ">
+          <b-col>
+            <h1>Projects</h1>
+          </b-col>
+          <b-col>
+            <b-btn variant="primary">+ Add New Project</b-btn>
+          </b-col>
+        </b-row>
+
+        <b-row>
+          <b-col>
+            <v-select
+            :options="[{label: 'Canada', code: 'ca'}]" 
+            />
+          </b-col>
+        </b-row>
+      </b-col>
+    </b-row>
+  </b-container>
+  
+</template>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: 'Projects',
+  components: {
+  },
+  data() {
+    return {
+    }
+  }
+};
+</script>

src/views/TimeEntry.vue

@@ -0,0 +1,56 @@
+<template>
+  <b-container class="time-entry-page">
+    <b-row>
+      <b-col sm="6" offset-sm="3">
+        <b-row>
+          <b-col>
+            <h1>New Time Entry</h1>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col>
+            <b-form @submit="onSubmit" @reset="onReset">
+              <b-form-group id="input-group-1" label="Star Date:" label-for="input-1">
+                <date-picker v-model="formData.startDate" type="datetime" />
+              </b-form-group>
+
+              <b-form-group id="input-group-2" label="End Date:" label-for="input-2">
+                <date-picker v-model="formData.endDate" type="datetime" />
+              </b-form-group>
+              <b-button type="submit" variant="primary">Submit</b-button>
+              <b-button type="reset" variant="danger">Reset</b-button>
+            </b-form>        
+          </b-col>
+        </b-row>
+      </b-col>
+    </b-row>
+  </b-container>
+  
+</template>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: 'TimeEntry',
+  components: {
+  },
+  data() {
+    return {
+      formData: {
+        startDate: {},
+        endDate: {},
+        notes: '',
+      }
+    }
+  },
+  methods: {
+    onSubmit() {
+
+    },
+    onReset() {
+
+    },
+  },
+};
+</script>

tests/unit/__snapshots__/App.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`App.vue Render default contents 1`] = `
 <div id="app">
-  <img src="@/assets/vue.png" alt="Vue.js logo" title="Vue.js" class="logo">
+  <img src="@/assets/logo.png" alt="Vue.js logo" title="Vue.js" class="logo">
   <img src="@/assets/nw.png" alt="NW.js logo" title="NW.js" class="logo">
   <helloworld-stub msg="Welcome to your Vue.js Desktop App in NW.js!"></helloworld-stub>
 </div>

tests/unit/components/__snapshots__/HelloWorld.test.js.snap

@@ -24,10 +24,10 @@ exports[`HelloWorld.vue Render default contents 1`] = `
   <h3>
     You are using
     Vue.js (v2.6.11),
-    NW.js (v0.44.2-sdk),
+    NW.js (v0.47.0-sdk),
-    Node.js (v13.8.0),
+    Node.js (v14.5.0),
     and
-    Chromium (v80.0.3987.116).
+    Chromium (v84.0.4147.89).
   </h3>
   <button>
     Show

tests/unit/setup.js

@@ -27,10 +27,10 @@ global.beforeEach(() => {
       NODE_ENV: 'development'
     },
     versions: {
-      chromium: '80.0.3987.116',
+      chromium: '84.0.4147.89',
-      nw: '0.44.2',
+      nw: '0.47.0',
       'nw-flavor': 'sdk',
-      node: '13.8.0'
+      node: '14.5.0'
     }
   };
   window.nw = {