fix(defineShortcuts): use useEventListener (#150)

src/runtime/composables/defineShortcuts.ts

@@ -1,6 +1,7 @@
 import type { ComputedRef, WatchSource } from 'vue'
 import { logicAnd, logicNot } from '@vueuse/math'
-import { computed, onMounted, onBeforeUnmount } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { computed } from 'vue'
 import { useShortcuts } from './useShortcuts'
 
 export interface ShortcutConfig {
@@ -52,58 +53,51 @@ export const defineShortcuts = (config: ShortcutsConfig) => {
     }
   }
 
-  onMounted(() => {
-    // Map config to full detailled shortcuts
-    shortcuts = Object.entries(config).map(([key, shortcutConfig]) => {
-      if (!shortcutConfig) {
-        return null
-      }
-
-      // Parse key and modifiers
-      const keySplit = key.toLowerCase().split('_').map(k => k)
-      let shortcut: Partial<Shortcut> = {
-        key: keySplit.filter(k => !['meta', 'ctrl', 'shift', 'alt'].includes(k)).join('_'),
-        metaKey: keySplit.includes('meta'),
-        ctrlKey: keySplit.includes('ctrl'),
-        shiftKey: keySplit.includes('shift'),
-        altKey: keySplit.includes('alt')
-      }
+  // Map config to full detailled shortcuts
+  shortcuts = Object.entries(config).map(([key, shortcutConfig]) => {
+    if (!shortcutConfig) {
+      return null
+    }
 
-      // Convert Meta to Ctrl for non-MacOS
-      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
-        shortcut.metaKey = false
-        shortcut.ctrlKey = true
-      }
+    // Parse key and modifiers
+    const keySplit = key.toLowerCase().split('_').map(k => k)
+    let shortcut: Partial<Shortcut> = {
+      key: keySplit.filter(k => !['meta', 'ctrl', 'shift', 'alt'].includes(k)).join('_'),
+      metaKey: keySplit.includes('meta'),
+      ctrlKey: keySplit.includes('ctrl'),
+      shiftKey: keySplit.includes('shift'),
+      altKey: keySplit.includes('alt')
+    }
 
-      // Retrieve handler function
-      if (typeof shortcutConfig === 'function') {
-        shortcut.handler = shortcutConfig
-      } else if (typeof shortcutConfig === 'object') {
-        shortcut = { ...shortcut, handler: shortcutConfig.handler }
-      }
+    // Convert Meta to Ctrl for non-MacOS
+    if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
+      shortcut.metaKey = false
+      shortcut.ctrlKey = true
+    }
 
-      if (!shortcut.handler) {
-        // eslint-disable-next-line no-console
-        console.trace('[Shortcut] Invalid value')
-        return null
-      }
+    // Retrieve handler function
+    if (typeof shortcutConfig === 'function') {
+      shortcut.handler = shortcutConfig
+    } else if (typeof shortcutConfig === 'object') {
+      shortcut = { ...shortcut, handler: shortcutConfig.handler }
+    }
 
-      // Create shortcut computed
-      const conditions: ComputedRef<Boolean>[] = []
-      if (!(shortcutConfig as ShortcutConfig).usingInput) {
-        conditions.push(logicNot(usingInput))
-      } else if (typeof (shortcutConfig as ShortcutConfig).usingInput === 'string') {
-        conditions.push(computed(() => usingInput.value === (shortcutConfig as ShortcutConfig).usingInput))
-      }
-      shortcut.condition = logicAnd(...conditions, ...((shortcutConfig as ShortcutConfig).whenever || []))
+    if (!shortcut.handler) {
+      console.trace('[Shortcut] Invalid value')
+      return null
+    }
 
-      return shortcut as Shortcut
-    }).filter(Boolean) as Shortcut[]
+    // Create shortcut computed
+    const conditions: ComputedRef<Boolean>[] = []
+    if (!(shortcutConfig as ShortcutConfig).usingInput) {
+      conditions.push(logicNot(usingInput))
+    } else if (typeof (shortcutConfig as ShortcutConfig).usingInput === 'string') {
+      conditions.push(computed(() => usingInput.value === (shortcutConfig as ShortcutConfig).usingInput))
+    }
+    shortcut.condition = logicAnd(...conditions, ...((shortcutConfig as ShortcutConfig).whenever || []))
 
-    document.addEventListener('keydown', onKeyDown)
-  })
+    return shortcut as Shortcut
+  }).filter(Boolean) as Shortcut[]
 
-  onBeforeUnmount(() => {
-    document.removeEventListener('keydown', onKeyDown)
-  })
+  useEventListener('keydown', onKeyDown)
 }