feat(Kbd): special keys for macOS and other systems (#2494)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/composables/defineShortcuts.ts

@@ -3,7 +3,6 @@
 import { ref, computed, toValue } from 'vue'
 import type { MaybeRef } from 'vue'
 import { useEventListener, useActiveElement, useDebounceFn } from '@vueuse/core'
-import { useKbd } from '../composables/useKbd'
 
 type Handler = (e?: any) => void
 
@@ -67,7 +66,6 @@ export function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options: Shor
   }
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800)
 
-  const { macOS } = useKbd()
   const activeElement = useActiveElement()
 
   const onKeyDown = (e: KeyboardEvent) => {
@@ -180,12 +178,6 @@ export function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options: Shor
       }
       shortcut.chained = chained
 
-      // Convert Meta to Ctrl for non-MacOS
-      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
-        shortcut.metaKey = false
-        shortcut.ctrlKey = true
-      }
-
       // Retrieve handler function
       if (typeof shortcutConfig === 'function') {
         shortcut.handler = shortcutConfig

src/runtime/composables/useKbd.ts

@@ -1,13 +1,20 @@
 import { createSharedComposable } from '@vueuse/core'
 import { ref, computed, onMounted } from 'vue'
 
+type KbdSpecificMap = {
+  meta: string
+  alt: string
+  ctrl: string
+}
+
 export const kbdKeysMap = {
   meta: '',
+  ctrl: '',
+  alt: '',
+  win: '⊞',
   command: '⌘',
   shift: '⇧',
-  ctrl: '⌃',
   option: '⌥',
-  alt: '⎇',
   enter: '↵',
   delete: '⌦',
   backspace: '⌫',
@@ -24,7 +31,21 @@ export const kbdKeysMap = {
   end: '↘'
 }
 
+export const kbdKeysSpecificMap: Record<'macOS' | 'other', KbdSpecificMap> = {
+  macOS: {
+    meta: kbdKeysMap.command,
+    alt: kbdKeysMap.option,
+    ctrl: '⌃'
+  },
+  other: {
+    meta: kbdKeysMap.win,
+    alt: 'alt',
+    ctrl: 'ctrl'
+  }
+}
+
 export type KbdKey = keyof typeof kbdKeysMap
+export type KbdKeySpecific = keyof KbdSpecificMap
 
 const _useKbd = () => {
   const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/))
@@ -32,15 +53,16 @@ const _useKbd = () => {
   const metaSymbol = ref(' ')
 
   onMounted(() => {
-    metaSymbol.value = macOS.value ? kbdKeysMap.command : kbdKeysMap.ctrl
+    metaSymbol.value = getKbdKey('meta')!
   })
 
   function getKbdKey(value?: KbdKey | string) {
     if (!value) {
       return
     }
-    if (value === 'meta') {
-      return metaSymbol.value
+
+    if (['meta', 'alt', 'ctrl'].includes(value)) {
+      return kbdKeysSpecificMap[macOS.value ? 'macOS' : 'other'][value as KbdKeySpecific]
     }
 
     return kbdKeysMap[value as KbdKey] || value.toUpperCase()