Merge branch 'release/v1.1.0'

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.0.0
+TAG=1.1.0

.eslintrc.js

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

CHANGELOG.md

@@ -1,3 +1,29 @@
+# [1.1.0](https://github.com/johnnymillergh/vuetify-typescript-playground/compare/v1.0.0...v1.1.0) (2019-12-30)
+
+
+### Features
+
+* **$Directive:** add customized directive `Throttled Click` ([fdd17cf](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/fdd17cfaa375126fa3344b7c3af0421ec88704b5))
+* **$Theme:** adaptive color scheme support ([7da3520](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/7da3520b436bd043c2271201976487fd56ab9145))
+* **$Theme:** add self-adaptive color scheme ([ffe12e6](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/ffe12e6a4dff2f0e9055fdf607d90f642c3a148b))
+
+
+### Performance Improvements
+
+* **$ESLint:** add new rule for ESLint ([abcb400](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/abcb4007f70400c20151b1e11c7a20ab92899b01))
+* **$package.json:** add dependencies ([0fb370e](https://github.com/johnnymillergh/vuetify-typescript-playground/commit/0fb370e679ca699f639f32dda16487b923be91e2))
+
+
+### BREAKING CHANGES
+
+* **$Theme:** adaptive color scheme support.
+* **$Theme:** self-adaptive color scheme acording user's computer
+setting (dark or light)
+* **$Directive:** Throttled Click is a customized directive which can prevent user mouse input from triggering for several times in specific
+duration.
+
+
+
 # [1.0.0](https://github.com/johnnymillergh/vuetify-typescript-playground/compare/v0.1.2...v1.0.0) (2019-12-30)
 
 

babel.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining'
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-typescript-playground",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "description": "Vuetify Typescript Playground",
   "author": {
@@ -34,7 +34,9 @@
   },
   "dependencies": {
     "@mdi/font": "4.7.95",
+    "@types/lodash": "4.14.149",
     "core-js": "3.6.1",
+    "lodash": "4.17.15",
     "roboto-fontface": "*",
     "vue": "2.6.11",
     "vue-class-component": "7.1.0",
@@ -44,6 +46,7 @@
     "vuex": "3.1.2"
   },
   "devDependencies": {
+    "@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",

src/directives/throttled-click/index.ts

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import throttledClickDirectiveOptions from './throttled-click-directive-options'
+
+Vue.directive('throttled-click', throttledClickDirectiveOptions)

src/directives/throttled-click/throttled-click-directive-options.ts

@@ -0,0 +1,14 @@
+/* eslint-disable no-unused-vars */
+import { DirectiveOptions } from 'vue'
+import _ from 'lodash'
+
+const throttledClickDirectiveOptions: DirectiveOptions = {
+  inserted (el, directiveBinding) {
+    const wait: number = directiveBinding.arg ? +directiveBinding.arg : 1000
+    el.addEventListener('click', _.throttle(event => {
+      directiveBinding.value.call(el, event)
+    }, wait))
+  }
+}
+
+export default throttledClickDirectiveOptions

src/main.ts

@@ -5,12 +5,19 @@ import store from './store'
 import vuetify from './plugins/vuetify'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import '@mdi/font/css/materialdesignicons.css'
+import '@/directives/throttled-click'
+import { ColorSchemeUtil } from '@/utils/color-scheme-util'
 
 Vue.config.productionTip = false
 
-new Vue({
+const vue = new Vue({
   router,
   store,
   vuetify,
   render: h => h(App)
 }).$mount('#app')
+
+const media = window.matchMedia('(prefers-color-scheme: dark)')
+media.addEventListener('change', () => {
+  vue.$vuetify.theme.dark = ColorSchemeUtil.isDarkMode()
+})

src/plugins/vuetify.ts

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+import { ColorSchemeUtil } from '@/utils/color-scheme-util'
+import { darkTheme, lightTheme } from '@/plugins/vuetify/theme'
+
+Vue.use(Vuetify)
+
+export default new Vuetify({
+  theme: {
+    dark: ColorSchemeUtil.isDarkMode(),
+    options: {
+      customProperties: true
+    },
+    themes: {
+      dark: darkTheme,
+      light: lightTheme
+    }
+  }
+})