arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 03:38:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(defineShortcuts): use useEventListener (#150)

Browse Source
This commit is contained in:
Sylvain Marroufin
2023-05-04 10:50:10 +02:00
committed by GitHub
parent b85a8e7203
commit 59f62d322f
1 changed files with 42 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/runtime/composables/defineShortcuts.ts
View File

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