chore(Dropdown): support shortcuts

src/runtime/components/elements/Dropdown.vue

@@ -25,6 +25,10 @@
                   <Avatar v-if="item.avatar" v-bind="{ size: 'xxs', ...item.avatar }" :class="itemAvatarClass" />
 
                   <span class="truncate">{{ item.label }}</span>
+
+                  <span v-if="item.shortcuts?.length" :class="itemShortcutsClass">
+                    <kbd v-for="shortcut of item.shortcuts" :key="shortcut" class="font-sans">{{ shortcut }}</kbd>
+                  </span>
                 </slot>
               </Component>
             </MenuItem>
@@ -63,6 +67,7 @@ const props = defineProps({
       icon?: string
       avatar?: Partial<AvatarType>
       click?: Function
+      shortcuts?: string[]
     }[][]>,
     default: () => []
   },
@@ -122,6 +127,10 @@ const props = defineProps({
   itemAvatarClass: {
     type: String,
     default: () => $ui.dropdown.item.avatar
+  },
+  itemShortcutsClass: {
+    type: String,
+    default: () => $ui.dropdown.item.shortcuts
   }
 })
 

src/runtime/presets/default.ts

@@ -313,7 +313,8 @@ export default (variantColors: string[]) => {
       inactive: 'u-text-gray-700',
       disabled: 'cursor-not-allowed opacity-50',
       icon: 'h-5 w-5 u-text-gray-400 group-hover:u-text-gray-500 flex-shrink-0',
-      avatar: '-m-0.5 group-hover:u-bg-gray-200 flex-shrink-0'
+      avatar: '-m-0.5 group-hover:u-bg-gray-200 flex-shrink-0',
+      shortcuts: 'flex-shrink-0 text-xs font-semibold u-text-gray-500 ml-auto'
     }
   }