diff --git a/src/runtime/composables/defineShortcuts.ts b/src/runtime/composables/defineShortcuts.ts index bb4a688f95..d2b5a7a5cc 100644 --- a/src/runtime/composables/defineShortcuts.ts +++ b/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 = { - 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 = { + 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[] = [] - 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[] = [] + 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) }