feat(useKbd): new composable (#73)

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"

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>

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>

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>