feat(app-menu-item): render a-keyboard-shortcut if 'shortcut' prop …

…is provided
archilogic-com · Feb 9, 2024 · 9779877 · 9779877
1 parent 4fa4dc2
commit 9779877
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 4 deletions.
diff --git a/src/components/AppMenuItem.vue b/src/components/AppMenuItem.vue
@@ -4,10 +4,11 @@ import { useElementBounding } from '@vueuse/core'
 
 import AIcon from './Icon.vue'
 import ArrowKeyFocusable from './ArrowKeyFocusable.vue'
+import { type Shortcut, default as KeyboardShortcut } from './KeyboardShortcut.vue'
 
 export default defineComponent({
   name: 'AAppMenuItem',
-  components: { AIcon, ArrowKeyFocusable },
+  components: { AIcon, ArrowKeyFocusable, KeyboardShortcut },
   props: {
     disabled: {
       type: Boolean,
@@ -29,8 +30,12 @@ export default defineComponent({
       type: String as PropType<'radio' | 'checkbox' | ''>,
       default: ''
     },
+    /**
+     * type `string` for shortcut prop is deprecated,
+     * use type `Shortcut` or `Shortcut[]` instead to
+     */
     shortcut: {
-      type: String,
+      type: [String, Object, Array] as PropType<string | Shortcut | Shortcut[]>,
       default: ''
     },
     /**
@@ -225,7 +230,13 @@ export default defineComponent({
       </div>
       <div class="mr-2 flex w-fit shrink-0 items-center gap-2">
         <slot name="extra"></slot>
-        <kbd v-if="shortcut" class="text-warsaw body-sm">{{ shortcut }}</kbd>
+        <KeyboardShortcut
+          v-if="shortcut"
+          :class="disabled && '!text-warsaw'"
+          variant="subtle"
+          :shortcut="
+            typeof shortcut === 'string' ? { keySequence: shortcut } : shortcut
+          "></KeyboardShortcut>
       </div>
       <template v-if="$slots.submenu">
         <a-icon name="MenuChevronRight" size="other" class="mr-2"></a-icon>

diff --git a/src/stories/AppMenu/AppMenuItem.stories.ts b/src/stories/AppMenu/AppMenuItem.stories.ts
@@ -182,7 +182,44 @@ export const Shortcut: Story = {
             <AAppMenuButton :open="open" v-bind="aria">Edit</AAppMenuButton>
           </template>
           <AAppMenuItem>Cut</AAppMenuItem>
-          <AAppMenuItem shortcut="Ctrl C">
+          <AAppMenuItem :shortcut="{modifiers: ['ctrl'], keySequence: 'c'}">
+            Copy
+          </AAppMenuItem>
+          <AAppMenuItem>Status</AAppMenuItem>
+        </AAppMenu>
+      `
+  }),
+  play: openMenu
+}
+export const MultipleShortcuts: Story = {
+  render: () => ({
+    components: { AAppMenu, AAppMenuItem, AAppMenuButton },
+    template: `
+        <AAppMenu>
+          <template #menu-button="{open, aria}">
+            <AAppMenuButton :open="open" v-bind="aria">Edit</AAppMenuButton>
+          </template>
+          <AAppMenuItem>Cut</AAppMenuItem>
+          <AAppMenuItem :shortcut="[{modifiers: ['ctrl'], keySequence: 'c'}, {modifiers: ['shift'], keySequence: 'c'}]">
+            Copy
+          </AAppMenuItem>
+          <AAppMenuItem>Status</AAppMenuItem>
+        </AAppMenu>
+      `
+  }),
+  play: openMenu
+}
+
+export const DisabledWithShortcuts: Story = {
+  render: () => ({
+    components: { AAppMenu, AAppMenuItem, AAppMenuButton },
+    template: `
+        <AAppMenu>
+          <template #menu-button="{open, aria}">
+            <AAppMenuButton :open="open" v-bind="aria">Edit</AAppMenuButton>
+          </template>
+          <AAppMenuItem>Cut</AAppMenuItem>
+          <AAppMenuItem disabled :shortcut="[{modifiers: ['ctrl'], keySequence: 'c'}, {modifiers: ['shift'], keySequence: 'c'}]">
             Copy
           </AAppMenuItem>
           <AAppMenuItem>Status</AAppMenuItem>