feat($Debounce): add Debounced Click directive

add `Debounced Click` directive

BREAKING CHANGE: debounced click support.

Author: johnnymillergh

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,6 +6,7 @@ import vuetify from './plugins/vuetify'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import '@mdi/font/css/materialdesignicons.css'
 import '@/directives/throttled-click'
+import '@/directives/debounced-click'
 import { listenToColorScheme } from '@/plugins/adaptive-color-scheme'
 
 Vue.config.productionTip = false

src/views/VuetifyDemo.vue

@@ -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 }