From f076019f8f84f2c71c66bfa806d7861ccf8fb959 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 23 Apr 2024 11:52:09 +0200
Subject: [PATCH] feat(useKbd): new composable (#73)

---
 playground/pages/dropdown-menu.vue            | 34 ++++++++----
 playground/pages/kbd.vue                      | 21 ++++----
 playground/pages/tooltip.vue                  |  8 +--
 src/runtime/components/DropdownMenu.vue       |  2 +-
 .../components/DropdownMenuContent.vue        |  8 +--
 src/runtime/components/Kbd.vue                |  8 ++-
 src/runtime/components/Tooltip.vue            |  6 +--
 src/runtime/composables/defineShortcuts.ts    | 52 ++++++++++++++----
 src/runtime/composables/useKbd.ts             | 53 +++++++++++++++++++
 src/runtime/composables/useShortcuts.ts       | 36 -------------
 src/theme/dropdown-menu.ts                    |  2 +-
 src/theme/tooltip.ts                          |  2 +-
 test/components/DropdownMenu.spec.ts          |  4 +-
 test/components/Tooltip.spec.ts               |  4 +-
 14 files changed, 153 insertions(+), 87 deletions(-)
 create mode 100644 src/runtime/composables/useKbd.ts
 delete mode 100644 src/runtime/composables/useShortcuts.ts

diff --git a/playground/pages/dropdown-menu.vue b/playground/pages/dropdown-menu.vue
index 7e510009..2c5ae0ce 100644
--- a/playground/pages/dropdown-menu.vue
+++ b/playground/pages/dropdown-menu.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-const { metaSymbol } = useShortcuts()
-
-const items = computed(() => [
+const items = [
   [{
     label: 'My account',
     avatar: {
@@ -19,11 +17,17 @@ const items = computed(() => [
   }, {
     label: 'Billing',
     icon: 'i-heroicons-credit-card',
-    shortcuts: [metaSymbol.value, 'B']
+    kbds: ['meta', 'b'],
+    select() {
+      console.log('Billing clicked')
+    }
   }, {
     label: 'Settings',
     icon: 'i-heroicons-cog',
-    shortcuts: [metaSymbol.value, ',']
+    kbds: ['?'],
+    select() {
+      console.log('Settings clicked')
+    }
   }], [{
     label: 'Team',
     icon: 'i-heroicons-users'
@@ -36,9 +40,9 @@ const items = computed(() => [
     }, {
       label: 'Invite by link',
       icon: 'i-heroicons-link',
-      shortcuts: [metaSymbol.value, 'I'],
+      kbds: ['meta', 'i'],
       select(e: Event) {
-        e.preventDefault()
+        e?.preventDefault()
         console.log('Invite by link clicked')
       }
     }], [{
@@ -72,7 +76,10 @@ const items = computed(() => [
   }, {
     label: 'New team',
     icon: 'i-heroicons-plus',
-    shortcuts: [metaSymbol.value, 'N']
+    kbds: ['meta', 'n'],
+    select() {
+      console.log('New team clicked')
+    }
   }], [{
     label: 'GitHub',
     icon: 'i-simple-icons-github',
@@ -86,7 +93,7 @@ const items = computed(() => [
     icon: 'i-heroicons-lifebuoy',
     to: '/dropdown-menu'
   }, {
-    label: 'Shortcuts',
+    label: 'Keyboard Shortcuts',
     icon: 'i-heroicons-key'
   }, {
     label: 'API',
@@ -95,9 +102,14 @@ const items = computed(() => [
   }], [{
     label: 'Logout',
     icon: 'i-heroicons-arrow-right-start-on-rectangle',
-    shortcuts: ['⇧', '⌘', 'Q']
+    kbds: ['shift', 'meta', 'q'],
+    select() {
+      console.log('Logout clicked')
+    }
   }]
-])
+]
+
+defineShortcuts(extractShortcuts(items))
 </script>
 
 <template>
diff --git a/playground/pages/kbd.vue b/playground/pages/kbd.vue
index 31d6f7a8..b6ee9c7a 100644
--- a/playground/pages/kbd.vue
+++ b/playground/pages/kbd.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
 import theme from '#build/ui/kbd'
+import { kbdKeysMap } from '#ui/composables/useKbd'
 
 const sizes = Object.keys(theme.variants.size)
+const kbdKeys = Object.keys(kbdKeysMap)
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
     <div class="flex items-center gap-1">
-      <UKbd value="⌘" />
-      <UKbd value="K" />
+      <UKbd value="meta" />
     </div>
     <div class="flex items-center gap-1">
-      <UKbd value="⌘" color="gray" />
-      <UKbd value="K" color="gray" />
+      <UKbd value="meta" color="gray" />
     </div>
     <div class="flex items-center gap-1">
-      <UKbd value="⌘" color="black" />
-      <UKbd value="K" color="black" />
+      <UKbd value="meta" color="black" />
     </div>
-    <div class="flex items-center gap-1 -ml-[41px]">
-      <template v-for="size in sizes" :key="size">
-        <UKbd value="⌘" :size="(size as any)" />
-        <UKbd value="K" :size="(size as any)" />
-      </template>
+    <div class="flex items-center gap-1 -ml-[216px]">
+      <UKbd v-for="(kdbKey, index) in kbdKeys" :key="index" :value="kdbKey" />
+    </div>
+    <div class="flex items-center gap-1 -ml-[22px]">
+      <UKbd v-for="size in sizes" :key="size" value="meta" :size="(size as any)" />
     </div>
   </div>
 </template>
diff --git a/playground/pages/tooltip.vue b/playground/pages/tooltip.vue
index c6ceb495..2eb981c6 100644
--- a/playground/pages/tooltip.vue
+++ b/playground/pages/tooltip.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="flex flex-col">
-    <UTooltip text="Top" :shortcuts="['⌘', 'T']" :content="{ side: 'top' }" arrow>
+    <UTooltip text="Top" :kbds="['meta', 'T']" :content="{ side: 'top' }" arrow>
       <UAvatar text="T" />
     </UTooltip>
 
     <div class="flex items-center gap-2 ml-[-20px]">
-      <UTooltip text="Left" :shortcuts="['⌘', 'L']" :content="{ side: 'left' }" arrow>
+      <UTooltip text="Left" :kbds="['meta', 'L']" :content="{ side: 'left' }" arrow>
         <UAvatar text="L" />
       </UTooltip>
 
-      <UTooltip text="Right" :shortcuts="['⌘', 'R']" :content="{ side: 'right' }" arrow>
+      <UTooltip text="Right" :kbds="['meta', 'R']" :content="{ side: 'right' }" arrow>
         <UAvatar text="R" />
       </UTooltip>
     </div>
 
-    <UTooltip text="Bottom" :shortcuts="['⌘', 'B']" arrow>
+    <UTooltip text="Bottom" :kbds="['meta', 'B']" arrow>
       <UAvatar text="B" />
     </UTooltip>
   </div>
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index ac704620..36539638 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -16,7 +16,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type'> {
   avatar?: AvatarProps
   disabled?: boolean
   content?: Omit<DropdownMenuContentProps, 'asChild' | 'forceMount'>
-  shortcuts?: string[] | KbdProps[]
+  kbds?: KbdProps['value'][] | KbdProps[]
   /**
    * The item type.
    * @defaultValue "link"
diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
index 52d0d579..a5923e8b 100644
--- a/src/runtime/components/DropdownMenuContent.vue
+++ b/src/runtime/components/DropdownMenuContent.vue
@@ -54,11 +54,11 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
       </slot>
     </span>
 
-    <span v-if="$slots.trailing || item.children?.length || item.shortcuts?.length" :class="ui.linkTrailing()">
+    <span v-if="$slots.trailing || item.children?.length || item.kbds?.length" :class="ui.linkTrailing()">
       <slot name="trailing" :item="item" :active="active" :index="index">
         <UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.linkTrailingIcon()" />
-        <span v-else-if="item.shortcuts?.length" :class="ui.linkTrailingShortcuts()">
-          <UKbd v-for="(shortcut, shortcutIndex) in item.shortcuts" :key="shortcutIndex" size="md" v-bind="typeof shortcut === 'string' ? { value: shortcut } : shortcut" />
+        <span v-else-if="item.kbds?.length" :class="ui.linkTrailingKbds()">
+          <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" size="md" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
         </span>
       </slot>
     </span>
@@ -107,7 +107,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
           </DropdownMenu.Sub>
           <DropdownMenu.Item v-else as-child :disabled="item.disabled" :text-value="item.label" @select="item.select">
             <slot :name="item.slot || 'item'" :item="item" :index="index">
-              <ULink v-slot="{ active, ...slotProps }" v-bind="omit((item as DropdownMenuItem), ['label', 'icon', 'avatar', 'shortcuts', 'slot', 'open', 'defaultOpen', 'select', 'children', 'type'])" custom>
+              <ULink v-slot="{ active, ...slotProps }" v-bind="omit((item as DropdownMenuItem), ['label', 'icon', 'avatar', 'kbds', 'slot', 'open', 'defaultOpen', 'select', 'children', 'type'])" custom>
                 <ULinkBase v-bind="slotProps" :class="ui.link({ active })">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </ULinkBase>
diff --git a/src/runtime/components/Kbd.vue b/src/runtime/components/Kbd.vue
index b3221ba7..a8e0de22 100644
--- a/src/runtime/components/Kbd.vue
+++ b/src/runtime/components/Kbd.vue
@@ -4,6 +4,7 @@ import type { PrimitiveProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/kbd'
+import type { KbdKey } from '#ui/composables/useKbd'
 
 const appConfig = _appConfig as AppConfig & { ui: { kbd: Partial<typeof theme> } }
 
@@ -12,7 +13,7 @@ const kbd = tv({ extend: tv(theme), ...(appConfig.ui?.kbd || {}) })
 type KbdVariants = VariantProps<typeof kbd>
 
 export interface KbdProps extends Omit<PrimitiveProps, 'asChild'> {
-  value?: string
+  value: KbdKey | string
   color?: KbdVariants['color']
   size?: KbdVariants['size']
   class?: any
@@ -25,15 +26,18 @@ export interface KbdSlots {
 
 <script setup lang="ts">
 import { Primitive } from 'radix-vue'
+import { useKbd } from '#imports'
 
 const props = withDefaults(defineProps<KbdProps>(), { as: 'kbd' })
 defineSlots<KbdSlots>()
+
+const { getKbdKey } = useKbd()
 </script>
 
 <template>
   <Primitive :as="as" :class="kbd({ color, size, class: props.class })">
     <slot>
-      {{ value }}
+      {{ getKbdKey(value) }}
     </slot>
   </Primitive>
 </template>
diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
index 0972db08..76602211 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -12,7 +12,7 @@ const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
 
 export interface TooltipProps extends TooltipRootProps {
   text?: string
-  shortcuts?: string[] | KbdProps[]
+  kbds?: KbdProps['value'][] | KbdProps[]
   content?: Omit<TooltipContentProps, 'asChild'>
   arrow?: boolean | Omit<TooltipArrowProps, 'asChild'>
   portal?: boolean
@@ -57,8 +57,8 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })({ side: conte
         <slot name="content">
           <span v-if="text" :class="ui.text()">{{ text }}</span>
 
-          <span v-if="shortcuts?.length" :class="ui.shortcuts()">
-            <UKbd v-for="(shortcut, index) in shortcuts" :key="index" size="sm" v-bind="typeof shortcut === 'string' ? { value: shortcut } : shortcut" />
+          <span v-if="kbds?.length" :class="ui.kbds()">
+            <UKbd v-for="(kbd, index) in kbds" :key="index" size="sm" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
diff --git a/src/runtime/composables/defineShortcuts.ts b/src/runtime/composables/defineShortcuts.ts
index b4766009..669b1add 100644
--- a/src/runtime/composables/defineShortcuts.ts
+++ b/src/runtime/composables/defineShortcuts.ts
@@ -1,9 +1,9 @@
 import { ref, computed, toValue } from 'vue'
 import type { MaybeRef } from 'vue'
-import { useEventListener, useDebounceFn } from '@vueuse/core'
-import { useShortcuts } from './useShortcuts'
+import { useEventListener, useActiveElement, useDebounceFn } from '@vueuse/core'
+import { useKbd } from '#imports'
 
-type Handler = () => void
+type Handler = (e?: any) => void
 
 export interface ShortcutConfig {
   handler: Handler
@@ -35,15 +35,36 @@ interface Shortcut {
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/
 
-export const defineShortcuts = (config: MaybeRef<ShortcutsConfig>, options: ShortcutsOptions = {}) => {
-  const { macOS, usingInput } = useShortcuts()
+export function extractShortcuts(items: any[] | any[][]) {
+  const shortcuts: Record<string, Handler> = {}
 
+  function traverse(items: any[]) {
+    items.forEach((item) => {
+      if (item.kbds?.length && (item.select || item.click)) {
+        const shortcutKey = item.kbds.join('_')
+        shortcuts[shortcutKey] = item.select || item.click
+      }
+      if (item.children) {
+        traverse(item.children.flat())
+      }
+    })
+  }
+
+  traverse(items.flat())
+
+  return shortcuts
+}
+
+export function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options: ShortcutsOptions = {}) {
   const chainedInputs = ref<string[]>([])
   const clearChainedInput = () => {
     chainedInputs.value.splice(0, chainedInputs.value.length)
   }
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800)
 
+  const { macOS } = useKbd()
+  const activeElement = useActiveElement()
+
   const onKeyDown = (e: KeyboardEvent) => {
     // Input autocomplete triggers a keydown event
     if (!e.key) {
@@ -65,7 +86,7 @@ export const defineShortcuts = (config: MaybeRef<ShortcutsConfig>, options: Shor
 
         if (shortcut.enabled) {
           e.preventDefault()
-          shortcut.handler()
+          shortcut.handler(e)
         }
         clearChainedInput()
         return
@@ -102,6 +123,19 @@ export const defineShortcuts = (config: MaybeRef<ShortcutsConfig>, options: Shor
     debouncedClearChainedInput()
   }
 
+  const usingInput = computed(() => {
+    const tagName = activeElement.value?.tagName
+    const contentEditable = activeElement.value?.contentEditable
+
+    const usingInput = !!(tagName === 'INPUT' || tagName === 'TEXTAREA' || contentEditable === 'true' || contentEditable === 'plaintext-only')
+
+    if (usingInput) {
+      return ((activeElement.value as any)?.name as string) || true
+    }
+
+    return false
+  })
+
   // Map config to full detailled shortcuts
   const shortcuts = computed<Shortcut[]>(() => {
     return Object.entries(toValue(config)).map(([key, shortcutConfig]) => {
@@ -132,11 +166,11 @@ export const defineShortcuts = (config: MaybeRef<ShortcutsConfig>, options: Shor
       } else {
         const keySplit = key.toLowerCase().split('_').map(k => k)
         shortcut = {
-          key: keySplit.filter(k => !['meta', 'ctrl', 'shift', 'alt'].includes(k)).join('_'),
-          metaKey: keySplit.includes('meta'),
+          key: keySplit.filter(k => !['meta', 'command', 'ctrl', 'shift', 'alt', 'option'].includes(k)).join('_'),
+          metaKey: keySplit.includes('meta') || keySplit.includes('command'),
           ctrlKey: keySplit.includes('ctrl'),
           shiftKey: keySplit.includes('shift'),
-          altKey: keySplit.includes('alt')
+          altKey: keySplit.includes('alt') || keySplit.includes('option')
         }
       }
       shortcut.chained = chained
diff --git a/src/runtime/composables/useKbd.ts b/src/runtime/composables/useKbd.ts
new file mode 100644
index 00000000..68b553e0
--- /dev/null
+++ b/src/runtime/composables/useKbd.ts
@@ -0,0 +1,53 @@
+import { createSharedComposable } from '@vueuse/core'
+import { ref, computed, onMounted } from 'vue'
+
+export const kbdKeysMap = {
+  meta: '',
+  command: '⌘',
+  shift: '⇧',
+  ctrl: '⌃',
+  option: '⌥',
+  alt: '⎇',
+  enter: '↵',
+  delete: '⌦',
+  backspace: '⌫',
+  escape: '⎋',
+  tab: '⇥',
+  capslock: '⇪',
+  arrowup: '↑',
+  arrowright: '→',
+  arrowdown: '↓',
+  arrowleft: '←',
+  pageup: '⇞',
+  pagedown: '⇟',
+  home: '↖',
+  end: '↘'
+}
+
+export type KbdKey = keyof typeof kbdKeysMap
+
+const _useKbd = () => {
+  const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/))
+
+  const metaSymbol = ref(' ')
+
+  onMounted(() => {
+    metaSymbol.value = macOS.value ? kbdKeysMap.command : kbdKeysMap.ctrl
+  })
+
+  function getKbdKey(value: KbdKey | string) {
+    if (value === 'meta') {
+      return metaSymbol.value
+    }
+
+    return kbdKeysMap[value as KbdKey] || value.toUpperCase()
+  }
+
+  return {
+    macOS,
+    metaSymbol,
+    getKbdKey
+  }
+}
+
+export const useKbd = createSharedComposable(_useKbd)
diff --git a/src/runtime/composables/useShortcuts.ts b/src/runtime/composables/useShortcuts.ts
deleted file mode 100644
index 4b3438c2..00000000
--- a/src/runtime/composables/useShortcuts.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { createSharedComposable, useActiveElement } from '@vueuse/core'
-import { ref, computed, onMounted } from 'vue'
-import type {} from '@vueuse/shared'
-
-const _useShortcuts = () => {
-  const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/))
-
-  const metaSymbol = ref(' ')
-
-  const activeElement = useActiveElement()
-  const usingInput = computed(() => {
-    const tagName = activeElement.value?.tagName
-    const contentEditable = activeElement.value?.contentEditable
-
-    const usingInput = !!(tagName === 'INPUT' || tagName === 'TEXTAREA' || contentEditable === 'true' || contentEditable === 'plaintext-only')
-
-    if (usingInput) {
-      return ((activeElement.value as any)?.name as string) || true
-    }
-
-    return false
-  })
-
-  onMounted(() => {
-    metaSymbol.value = macOS.value ? '⌘' : 'Ctrl'
-  })
-
-  return {
-    macOS,
-    metaSymbol,
-    activeElement,
-    usingInput
-  }
-}
-
-export const useShortcuts = createSharedComposable(_useShortcuts)
diff --git a/src/theme/dropdown-menu.ts b/src/theme/dropdown-menu.ts
index e920f4f5..fc842cbb 100644
--- a/src/theme/dropdown-menu.ts
+++ b/src/theme/dropdown-menu.ts
@@ -9,7 +9,7 @@ export default {
     linkLeadingAvatar: 'shrink-0',
     linkTrailing: 'ms-auto inline-flex',
     linkTrailingIcon: 'shrink-0 size-5',
-    linkTrailingShortcuts: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
+    linkTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
     linkLabel: 'truncate'
   },
   variants: {
diff --git a/src/theme/tooltip.ts b/src/theme/tooltip.ts
index 7d2ce8f3..c505eae7 100644
--- a/src/theme/tooltip.ts
+++ b/src/theme/tooltip.ts
@@ -3,7 +3,7 @@ export default {
     content: 'flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none',
     arrow: 'fill-gray-200 dark:fill-gray-800',
     text: 'truncate',
-    shortcuts: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`
+    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`
   },
   variants: {
     side: {
diff --git a/test/components/DropdownMenu.spec.ts b/test/components/DropdownMenu.spec.ts
index 3c22a43d..c9cb2dd8 100644
--- a/test/components/DropdownMenu.spec.ts
+++ b/test/components/DropdownMenu.spec.ts
@@ -11,11 +11,11 @@ describe('DropdownMenu', () => {
   }, {
     label: 'Edit',
     icon: 'i-heroicons-pencil-square-20-solid',
-    shortcuts: ['E']
+    kbds: ['E']
   }, {
     label: 'Duplicate',
     icon: 'i-heroicons-document-duplicate-20-solid',
-    shortcuts: ['D'],
+    kbds: ['D'],
     disabled: true,
     slot: 'custom'
   }]
diff --git a/test/components/Tooltip.spec.ts b/test/components/Tooltip.spec.ts
index 6aee685a..ee7fc440 100644
--- a/test/components/Tooltip.spec.ts
+++ b/test/components/Tooltip.spec.ts
@@ -18,9 +18,9 @@ describe('Tooltip', () => {
     // Props
     ['with text', { props: { text: 'Tooltip', open: true, portal: false } }],
     ['with arrow', { props: { text: 'Tooltip', arrow: true, open: true, portal: false } }],
-    ['with shortcuts', { props: { text: 'Tooltip', shortcuts: ['⌘', 'K'], open: true, portal: false } }],
+    ['with kbds', { props: { text: 'Tooltip', kbds: ['meta', 'K'], open: true, portal: false } }],
     // Slots
-    ['with default slot', { props: { text: 'Tooltip', shortcuts: ['⌘', 'K'], open: true, portal: false }, slots: { default: () => 'Default slot' } }],
+    ['with default slot', { props: { text: 'Tooltip', kbds: ['meta', 'K'], open: true, portal: false }, slots: { default: () => 'Default slot' } }],
     ['with content slot', { props: { open: true, portal: false }, slots: { content: () => 'Content slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TooltipProps, slots?: Partial<TooltipSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, TooltipWrapper)