Merge branch 'feature/throttle-and-debounce' into develop

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.1.0
+TAG=1.2.0-beta

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-typescript-playground",
-  "version": "1.1.0",
+  "version": "1.2.0-beta",
   "license": "Apache-2.0",
   "description": "Vuetify Typescript Playground",
   "author": {

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

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

src/directives/debounced-click/index.ts

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

src/main.ts

@@ -6,18 +6,16 @@ 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'
+import '@/directives/debounced-click'
+import { listenToColorScheme } from '@/plugins/adaptive-color-scheme'
 
 Vue.config.productionTip = false
 
-const vue = new Vue({
+const vueInstance = 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()
-})
+listenToColorScheme(vueInstance)

src/plugins/adaptive-color-scheme/index.ts

@@ -0,0 +1,16 @@
+import { ColorSchemeUtil } from '@/utils/color-scheme-util'
+// eslint-disable-next-line no-unused-vars
+import Vue from 'vue'
+
+/**
+ * Listen to color scheme
+ * @param vueInstance Vue instance
+ * @author Johnny Miller (鍾俊), e-mail: [email protected]
+ * @date 12/31/19 7:43 AM
+ */
+export function listenToColorScheme (vueInstance: Vue): void {
+  const media = window.matchMedia('(prefers-color-scheme: dark)')
+  media.addEventListener('change', () => {
+    vueInstance.$vuetify.theme.dark = ColorSchemeUtil.isDarkMode()
+  })
+}

src/views/VuetifyDemo.vue

@@ -2,7 +2,7 @@
   <div id="vuetify-demo-container">
     <h1 class="text-center">This is an about page</h1>
     <v-container>
-      <v-carousel cycle height="400" hide-delimiter-background show-arrows-on-hover>
+      <v-carousel cycle height="400" hide-delimiter-background show-arrows-on-hover v-ripple>
         <v-carousel-item v-for="(slide, i) in slides" :key="i">
           <v-sheet :color="colors[i]" height="100%">
             <v-row class="fill-height" align="center" justify="center">
@@ -39,8 +39,8 @@
           <v-list-item-avatar tile size="80" color="grey"/>
         </v-list-item>
         <v-card-actions>
-          <v-btn text v-throttled-click:2000="handleThrottledClickButton">Button</v-btn>
-          <v-btn text>Button</v-btn>
+          <v-btn text v-throttled-click:2000="handleThrottledClickButton">Throttle</v-btn>
+          <v-btn text v-debounced-click:2000="handleDebouncedClickButton">Debounce</v-btn>
         </v-card-actions>
       </v-card>
       <v-row align="center">
@@ -148,7 +148,10 @@ export default Vue.extend({
   },
   methods: {
     handleThrottledClickButton (event: Event) {
-      console.log('handleThrottledClickButton', event)
+      console.info('handleThrottledClickButton', event)
+    },
+    handleDebouncedClickButton (event: Event) {
+      console.info('handleDebouncedClickButton', event)
     },
     onResize () {
       this.windowSize = { x: window.innerWidth, y: window.innerHeight }