feat(useKbd): new composable (#73)

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>

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>

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>