Add v-kbd component#27068
Conversation
alvarosabu
left a comment
There was a problem hiding this comment.
Love to see this starting to take shape @HZooly, visually is ready from my side, but logic wise it need some iterations.
Happy to discuss
| import { computed } from 'vue'; | ||
|
|
||
| interface Props { | ||
| /** Keyboard key name to display, translated per platform (e.g. 'meta' → '⌘' on Mac) */ |
There was a problem hiding this comment.
Blocking:
The comment suggest that keys like meta would be translated on the specific operative system
<VKbd value="meta+s"></VKbd>
Should output ⌘S instead of META+S. You would need a composable like useKbd with navigator awareness
There was a problem hiding this comment.
v-kbd.vue is already using our composable translateShortcut.
Why your example is not working: v-kbd is responsible for displaying a single Kbd item.
<VKbd value="meta" />If you want to display a set of keys, you have to use either VKbd multiple times
<VKbd value="meta" />
<VKbd value="S" />or v-kbd-shortcut
<VKbdShortcut value="['meta', 's']" />
alvarosabu
left a comment
There was a problem hiding this comment.
LGTM @HZooly great work!
7c3da7d
into
hugo/cms-1123-replace-custom-v-tooltip-with-reka-ui
Scope
What's changed:
v-kbdcomponent to display individual keyboard keys with platform-aware translation (e.g.meta→⌘on Mac,Ctrlon Windows), supporting three sizes and three visual variants (outlined,soft,inverted)v-kbd-shortcutcompanion component that renders a sequence ofv-kbdkeys with consistent spacing, extendingv-kbd's props interfacev-kbdas a global componenttranslateShortcut()plain-text usages in list item hints withVKbdShortcut— coverssave-options.vue,item.vue, andinput-rich-text-md.vuev-kbdinto the tooltip system via thekbdoption on thev-tooltipdirective, replacing inline string concatenation in toolbar buttonsPotential Risks / Drawbacks
translateShortcutis still used as a plain string incomparison-modal.vueandoverlay-item.vue(JS logic, not template) — these are out of scope but leave the migration incompleteapp-tooltip.vuestill renders individualVKbdin av-forloop rather than usingVKbdShortcut— minor inconsistencyTested Scenarios
v-kbdrenders the correct translated symbol formetaon Mac (⌘) and non-Mac (Ctrl)valuepropv-kbd.test.ts)v-kbd-shortcutrenders multiple keys with gap spacingVKbd-rendered shortcutsReview Notes / Questions
Checklist
Fixes #CMS-2090