Merge branch 'release/v1.3.1'

Author: johnnymillergh

.env

@@ -2,4 +2,4 @@
 VUE_APP_PACKAGE_JSON=''
 
 # TAG must be corresponding with the version tag in package.json, need to modify it when new version releases
-TAG=1.3.0
+TAG=1.3.1

.eslintrc.js

@@ -47,7 +47,8 @@ module.exports = {
     'vue/html-quotes': 'error',
     'vue/mustache-interpolation-spacing': 'error',
     'vue/html-self-closing': 'error',
-    'no-unused-vars': 'error'
+    'no-unused-vars': 'error',
+    'yoda': 'off'
   },
   parserOptions: {
     parser: '@typescript-eslint/parser',

CHANGELOG.md

@@ -1,3 +1,31 @@
+## [1.3.1](https://github.com/johnnymillergh/vuetify-typescript-playground/compare/v1.3.0...v1.3.1) (2020-01-03)
+
+
+### Features
+
+* **$App:** use YouTube-like layout ([dd61af0](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/dd61af02e5b42ea1494558a4f4f2a616b433a1c6))
+* **$Demo:** change ripple effect ([2a221d5](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/2a221d553c225eb82453c812090dbc9e47ecc8cc))
+* **$Icon:** add dependency `@mdi/js` ([2d48f33](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/2d48f33fa8d6bc4894808e625b2c46ea97a68f89))
+* **$Toast:** new Vue plugin `Vuetify Toast` ([faf96f0](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/faf96f047a9d0a74baa0da86a0f16fd93ad724a9))
+* **$Validation:** add field validation ([9170df2](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/9170df2bf10e5be044b4744d0ce793e2eee6df12))
+
+
+### Performance Improvements
+
+* **$ClassValidator:** integrate Class Validator ([7a44a3f](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/7a44a3fd6c8f056597472f97ed0bfc4c3866e0d4))
+* **$ESLint:** update ESLint rule `yoda` ([1473f79](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/1473f797bde18668d8511429b627b24c99dc8604))
+* **$package.json:** add dependencies axios, class-validator, mock.js ([9f98264](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/9f9826484cbc6ee8e1093243f4a7087e1240c20c))
+* **$package.json:** integrate axios-mock-adapter ([f890d6f](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/f890d6f69f4926c8acec33d73e18a9ba1c7125c0))
+* **$package.json:** upgrade dependencies: [email protected], @typescript-eslint/eslint-plugin@2.14.0, @typescript-eslint/parser@2.14.0, @vue/cli-plugin-babel@4.1.2, @vue/cli-plugin-eslint@4.1.2, @vue/cli-plugin-router@4.1.2, @vue/cli-plugin-typescript@4.1.2, @vue/cli-plugin-unit-jest@4.1.2, @vue/cli-plugin-vuex@4.1.2, @vue/cli-service@4.1.2, [email protected], [email protected] ([4122050](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/41220506241848558edd7afd2ac2fcdc1eb98427))
+
+
+### BREAKING CHANGES
+
+* **$Icon:** support @mdi/js
+* **$App:** use YouTube-like layout
+
+
+
 # [1.3.0](https://github.com/johnnymillergh/vuetify-typescript-playground/compare/v1.2.0...v1.3.0) (2019-12-31)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-typescript-playground",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "Apache-2.0",
   "description": "Vuetify Typescript Playground",
   "author": {
@@ -34,29 +34,33 @@
   },
   "dependencies": {
     "@mdi/font": "4.7.95",
+    "@mdi/js": "4.7.95",
     "@types/lodash": "4.14.149",
+    "axios": "0.19.0",
+    "axios-mock-adapter": "1.17.0",
+    "class-validator": "0.11.0",
     "core-js": "3.6.1",
     "lodash": "4.17.15",
     "roboto-fontface": "*",
     "vue": "2.6.11",
     "vue-class-component": "7.1.0",
     "vue-property-decorator": "8.3.0",
     "vue-router": "3.1.3",
-    "vuetify": "2.1.15",
+    "vuetify": "2.2.1",
     "vuex": "3.1.2"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
+    "@babel/plugin-proposal-optional-chaining": "7.7.5",
     "@types/jest": "^24.0.19",
-    "@typescript-eslint/eslint-plugin": "2.13.0",
-    "@typescript-eslint/parser": "2.13.0",
-    "@vue/cli-plugin-babel": "4.1.1",
-    "@vue/cli-plugin-eslint": "4.1.1",
-    "@vue/cli-plugin-router": "4.1.1",
-    "@vue/cli-plugin-typescript": "4.1.1",
-    "@vue/cli-plugin-unit-jest": "4.1.1",
-    "@vue/cli-plugin-vuex": "4.1.1",
-    "@vue/cli-service": "4.1.1",
+    "@typescript-eslint/eslint-plugin": "2.14.0",
+    "@typescript-eslint/parser": "2.14.0",
+    "@vue/cli-plugin-babel": "4.1.2",
+    "@vue/cli-plugin-eslint": "4.1.2",
+    "@vue/cli-plugin-router": "4.1.2",
+    "@vue/cli-plugin-typescript": "4.1.2",
+    "@vue/cli-plugin-unit-jest": "4.1.2",
+    "@vue/cli-plugin-vuex": "4.1.2",
+    "@vue/cli-service": "4.1.2",
     "@vue/eslint-config-standard": "5.0.1",
     "@vue/eslint-config-typescript": "5.0.1",
     "@vue/test-utils": "1.0.0-beta.29",
@@ -66,14 +70,14 @@
     "eslint-plugin-node": "11.0.0",
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-standard": "4.0.1",
-    "eslint-plugin-vue": "6.0.2",
+    "eslint-plugin-vue": "6.1.2",
     "eslint-plugin-vue-libs": "4.0.0",
     "lint-staged": "9.5.0",
     "node-sass": "4.13.0",
     "sass": "1.24.0",
     "sass-loader": "8.0.0",
     "typescript": "3.7.4",
-    "vue-cli-plugin-vuetify": "2.0.2",
+    "vue-cli-plugin-vuetify": "2.0.3",
     "vue-template-compiler": "2.6.11",
     "vuetify-loader": "1.4.3"
   },

src/App.vue

@@ -1,56 +1,11 @@
 <template>
-  <v-app id="app-container">
-    <v-app-bar app color="primary" dark>
-      <div class="d-flex align-center">
-        <v-img alt="Vuetify Logo" class="shrink mr-2" contain
-               src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition"
-               width="40"/>
-        <span id="app-name">{{ appName }}</span>
-        <span id="version">{{ version }}</span>
-        <span id="environment">{{ environment }}</span>
-      </div>
-      <v-spacer/>
-      <v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar>
-    <v-content>
-      <v-sheet class="text-center">
-        <router-link to="/">Home</router-link>
-        <span>|</span>
-        <router-link to="/vuetify-demo">Vuetify Demo</router-link>
-      </v-sheet>
-      <transition name="fade-transform" mode="out-in">
-        <router-view class="app-container"/>
-      </transition>
-    </v-content>
+  <v-app id="app">
+    <transition name="fade-transform" mode="out-in">
+      <router-view/>
+    </transition>
   </v-app>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { AppUtil } from '@/utils/app-util.ts'
-
-export default Vue.extend({
-  name: 'App',
-  data: () => ({
-    appName: '',
-    version: '',
-    environment: ''
-  }),
-  mounted (): void {
-    this.appName = AppUtil.getName()
-      .replace(/-/g, ' ')
-      .split(' ')
-      .map(word => word[0].toUpperCase() + word.substr(1).toLowerCase())
-      .join(' ')
-    this.version = AppUtil.getVersionInfo()
-    this.environment = `Environment: ${process.env.NODE_ENV} (${process.env.VUE_APP_ENV})`
-  }
-})
-</script>
-
 <!--suppress CssUnusedSymbol -->
 <style lang="scss" scoped>
 .fade-transform-leave-active, .fade-transform-enter-active {
@@ -72,20 +27,5 @@ export default Vue.extend({
     font-size: 32px;
     font-weight: bold;
   }
-
-  #version {
-    text-align: right;
-    font-size: 32px;
-    position: relative;
-    left: 8px;
-  }
-
-  #environment {
-    text-align: right;
-    font-size: 18px;
-    position: relative;
-    top: 4px;
-    left: 16px;
-  }
 }
 </style>

src/main.ts

@@ -8,6 +8,7 @@ import '@mdi/font/css/materialdesignicons.css'
 import '@/directives/throttled-click'
 import '@/directives/debounced-click'
 import { listenToColorScheme } from '@/plugins/adaptive-color-scheme'
+import '@/plugins/axios-mock-adapter'
 
 Vue.config.productionTip = false
 

src/plugins/axios-mock-adapter/index.ts

@@ -0,0 +1,15 @@
+const axios = require('axios')
+const MockAdapter = require('axios-mock-adapter')
+
+// All requests using this instance will have a 2 seconds delay:
+const mock = new MockAdapter(axios, { delayResponse: 2000 })
+
+// Mock GET request to /users when param `searchText` is 'John'
+// arguments for reply are (status, data, headers)
+mock.onGet('/api/getDemo').reply(200, {
+  message: '/api/getDemo success!'
+})
+
+mock.onGet('/api/delay').reply(200, {
+  message: 'delay message'
+})