From c0347f6e067cc8096330e723cdf5d0d8f2853fe3 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Mon, 28 Apr 2025 11:53:13 +0200 Subject: [PATCH] fix(defineShortcuts): bring back `meta` to `ctrl` convert on non macos platforms Resolves #3869, resolves #3318 Co-Authored-By: Sylvain Marroufin --- .../content/2.composables/define-shortcuts.md | 3 +- docs/content/3.components/kbd.md | 2 +- src/runtime/composables/defineShortcuts.ts | 8 + src/runtime/composables/useKbd.ts | 7 +- .../CommandPalette-vue.spec.ts.snap | 162 +++++++++--------- .../__snapshots__/CommandPalette.spec.ts.snap | 162 +++++++++--------- .../ContextMenu-vue.spec.ts.snap | 60 +++---- .../__snapshots__/ContextMenu.spec.ts.snap | 60 +++---- .../DropdownMenu-vue.spec.ts.snap | 102 +++++------ .../__snapshots__/DropdownMenu.spec.ts.snap | 102 +++++------ .../__snapshots__/Tooltip-vue.spec.ts.snap | 2 +- .../__snapshots__/Tooltip.spec.ts.snap | 2 +- 12 files changed, 341 insertions(+), 331 deletions(-) diff --git a/docs/content/2.composables/define-shortcuts.md b/docs/content/2.composables/define-shortcuts.md index 2e3f5d9f..b38cb82f 100644 --- a/docs/content/2.composables/define-shortcuts.md +++ b/docs/content/2.composables/define-shortcuts.md @@ -19,6 +19,7 @@ defineShortcuts({ ``` +- Shortcuts are automatically adjusted for non-macOS platforms, converting `meta` to `ctrl`. - The composable uses VueUse's [`useEventListener`](https://vueuse.org/core/useEventListener/) to handle keydown events. - For a complete list of available shortcut keys, refer to the [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) API documentation. Note that the key should be written in lowercase. @@ -46,7 +47,7 @@ Shortcuts are defined using the following format: #### Modifiers -- `meta`: Represents `⌘ Command` on macOS and `⊞ Windows` on Windows +- `meta`: Represents `⌘ Command` on macOS and `Ctrl` on other platforms - `ctrl`: Represents `Ctrl` on all platforms - `shift`: Used for alphabetic keys when Shift is required diff --git a/docs/content/3.components/kbd.md b/docs/content/3.components/kbd.md index e379cfe4..88e88fd4 100644 --- a/docs/content/3.components/kbd.md +++ b/docs/content/3.components/kbd.md @@ -32,7 +32,7 @@ props: --- :: -You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/nuxt/ui/blob/v3/src/runtime/composables/useKbd.ts) composable. For example, the `meta` key displays as `⌘` on macOS and `⊞` on other platforms. +You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/nuxt/ui/blob/v3/src/runtime/composables/useKbd.ts) composable. For example, the `meta` key displays as `⌘` on macOS and `Ctrl` on other platforms. ::component-code --- diff --git a/src/runtime/composables/defineShortcuts.ts b/src/runtime/composables/defineShortcuts.ts index 68fd14a4..6042c266 100644 --- a/src/runtime/composables/defineShortcuts.ts +++ b/src/runtime/composables/defineShortcuts.ts @@ -3,6 +3,7 @@ import { ref, computed, toValue } from 'vue' import type { MaybeRef } from 'vue' import { useEventListener, useActiveElement, useDebounceFn } from '@vueuse/core' +import { useKbd } from './useKbd' type Handler = (e?: any) => void @@ -66,6 +67,7 @@ export function defineShortcuts(config: MaybeRef, options: Shor } const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800) + const { macOS } = useKbd() const activeElement = useActiveElement() const onKeyDown = (e: KeyboardEvent) => { @@ -178,6 +180,12 @@ export function defineShortcuts(config: MaybeRef, options: Shor } shortcut.chained = chained + // Convert Meta to Ctrl for non-MacOS + if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) { + shortcut.metaKey = false + shortcut.ctrlKey = true + } + // Retrieve handler function if (typeof shortcutConfig === 'function') { shortcut.handler = shortcutConfig diff --git a/src/runtime/composables/useKbd.ts b/src/runtime/composables/useKbd.ts index e6b48dcc..dbab5c73 100644 --- a/src/runtime/composables/useKbd.ts +++ b/src/runtime/composables/useKbd.ts @@ -14,6 +14,7 @@ export const kbdKeysMap = { win: '⊞', command: '⌘', shift: '⇧', + control: '⌃', option: '⌥', enter: '↵', delete: '⌦', @@ -44,9 +45,9 @@ const _useKbd = () => { }) onMounted(() => { - kbdKeysSpecificMap.meta = macOS.value ? kbdKeysMap.command : kbdKeysMap.win - kbdKeysSpecificMap.alt = macOS.value ? kbdKeysMap.option : 'alt' - kbdKeysSpecificMap.ctrl = macOS.value ? '⌃' : 'ctrl' + kbdKeysSpecificMap.meta = macOS.value ? kbdKeysMap.command : 'Ctrl' + kbdKeysSpecificMap.ctrl = macOS.value ? kbdKeysMap.control : 'Ctrl' + kbdKeysSpecificMap.alt = macOS.value ? kbdKeysMap.option : 'Alt' }) function getKbdKey(value?: KbdKey | string) { diff --git a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap index 6cda372c..321a4fe8 100644 --- a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap +++ b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap @@ -8,13 +8,13 @@ exports[`CommandPalette > renders with as correctly 1`] = `
-
@@ -44,13 +44,13 @@ exports[`CommandPalette > renders with class correctly 1`] = `
-
@@ -78,13 +78,13 @@ exports[`CommandPalette > renders with close correctly 1`] = `
-
@@ -112,13 +112,13 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
-
@@ -146,13 +146,13 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
-
@@ -182,11 +182,11 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
-
@@ -216,13 +216,13 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
-
@@ -252,13 +252,13 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
-
@@ -288,13 +288,13 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
-
@@ -324,13 +324,13 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
-
@@ -360,13 +360,13 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
-
@@ -396,7 +396,7 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
-
@@ -420,13 +420,13 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
-
@@ -456,13 +456,13 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
-
@@ -486,7 +486,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
-
@@ -516,13 +516,13 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
-
@@ -557,13 +557,13 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
-
@@ -593,13 +593,13 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
-
@@ -629,13 +629,13 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
-
@@ -665,13 +665,13 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
-
@@ -701,13 +701,13 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
-
@@ -737,13 +737,13 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
-
diff --git a/test/components/__snapshots__/CommandPalette.spec.ts.snap b/test/components/__snapshots__/CommandPalette.spec.ts.snap index eef31d66..8cb18c6f 100644 --- a/test/components/__snapshots__/CommandPalette.spec.ts.snap +++ b/test/components/__snapshots__/CommandPalette.spec.ts.snap @@ -8,13 +8,13 @@ exports[`CommandPalette > renders with as correctly 1`] = `
-
@@ -44,13 +44,13 @@ exports[`CommandPalette > renders with class correctly 1`] = `
-
@@ -81,13 +81,13 @@ exports[`CommandPalette > renders with close correctly 1`] = `
-
@@ -115,13 +115,13 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
-
@@ -152,13 +152,13 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
-
@@ -188,11 +188,11 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
-
@@ -222,13 +222,13 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
-
@@ -258,13 +258,13 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
-
@@ -294,13 +294,13 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
-
@@ -330,13 +330,13 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
-
@@ -366,13 +366,13 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
-
@@ -402,7 +402,7 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
-
@@ -426,13 +426,13 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
-
@@ -462,13 +462,13 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
-
@@ -492,7 +492,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
-
@@ -522,13 +522,13 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
-
@@ -563,13 +563,13 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
-
@@ -599,13 +599,13 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
-
@@ -635,13 +635,13 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
-
@@ -671,13 +671,13 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
-
@@ -707,13 +707,13 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
-
@@ -743,13 +743,13 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
-
diff --git a/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap b/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap index 11233ac9..4209204f 100644 --- a/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap +++ b/test/components/__snapshots__/ContextMenu-vue.spec.ts.snap @@ -17,10 +17,10 @@ exports[`ContextMenu > renders with class correctly 1`] = `
-
@@ -388,10 +388,10 @@ exports[`ContextMenu > renders with items correctly 1`] = `
-
@@ -403,10 +403,10 @@ exports[`ContextMenu > renders with items correctly 1`] = `
GitHubSupport
-
@@ -49,7 +49,7 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
My account
-
GitHubSupport
-
@@ -87,7 +87,7 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
My account
-
GitHubSupport
-
@@ -125,7 +125,7 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
My account
-
GitHubSupport
-
@@ -163,7 +163,7 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
My account
-
GitHubSupport
-
@@ -201,7 +201,7 @@ exports[`DropdownMenu > renders with externalIcon correctly 1`] = `
My account
-
GitHubSupport
-
@@ -269,7 +269,7 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
Item label slot
-
Item label slotItem label slot
-
@@ -307,7 +307,7 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
Item leading slotMy account
-
Item leading slotGitHubItem leading slotSupport
-
@@ -375,7 +375,7 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
My account
-
GitHubSupport
-
@@ -415,7 +415,7 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
-
i-simple-icons-githubi-lucide-life-buoy
-
@@ -453,7 +453,7 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
My account
-
GitHubSupport
-
@@ -491,7 +491,7 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
My account
-
GitHubSupport
-
@@ -529,7 +529,7 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
My account
-
GitHubSupport
-
@@ -567,7 +567,7 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
My account
-
GitHubSupport
-
@@ -605,7 +605,7 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
My account
-
GitHubSupport
-
@@ -643,7 +643,7 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
My account
-
GitHubSupport
-
@@ -681,7 +681,7 @@ exports[`DropdownMenu > renders without externalIcon correctly 1`] = `
My account
-
GitHubSupport
-
diff --git a/test/components/__snapshots__/DropdownMenu.spec.ts.snap b/test/components/__snapshots__/DropdownMenu.spec.ts.snap index 191aeb52..26e2ec64 100644 --- a/test/components/__snapshots__/DropdownMenu.spec.ts.snap +++ b/test/components/__snapshots__/DropdownMenu.spec.ts.snap @@ -11,7 +11,7 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
My account
-
GitHubSupport
-
@@ -51,7 +51,7 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
My account
-
GitHubSupport
-
@@ -91,7 +91,7 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
My account
-
GitHubSupport
-
@@ -131,7 +131,7 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
My account
-
GitHubSupport
-
@@ -171,7 +171,7 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
My account
-
GitHubSupport
-
@@ -211,7 +211,7 @@ exports[`DropdownMenu > renders with externalIcon correctly 1`] = `
My account
-
GitHubSupport
-
@@ -281,7 +281,7 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
Item label slot
-
Item label slotItem label slot
-
@@ -321,7 +321,7 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
Item leading slotMy account
-
Item leading slotGitHubItem leading slotSupport
-
@@ -391,7 +391,7 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
My account
-
GitHubSupport
-
@@ -433,7 +433,7 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
-
i-simple-icons-githubi-lucide-life-buoy
-
@@ -473,7 +473,7 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
My account
-
GitHubSupport
-
@@ -513,7 +513,7 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
My account
-
GitHubSupport
-
@@ -553,7 +553,7 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
My account
-
GitHubSupport
-
@@ -593,7 +593,7 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
My account
-
GitHubSupport
-
@@ -633,7 +633,7 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
My account
-
GitHubSupport
-
@@ -673,7 +673,7 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
My account
-
GitHubSupport
-
@@ -713,7 +713,7 @@ exports[`DropdownMenu > renders without externalIcon correctly 1`] = `
My account
-
GitHubSupport
-
diff --git a/test/components/__snapshots__/Tooltip-vue.spec.ts.snap b/test/components/__snapshots__/Tooltip-vue.spec.ts.snap index 8c096f95..afcd64f0 100644 --- a/test/components/__snapshots__/Tooltip-vue.spec.ts.snap +++ b/test/components/__snapshots__/Tooltip-vue.spec.ts.snap @@ -68,7 +68,7 @@ exports[`Tooltip > renders with kbds correctly 1`] = `
-
Tooltip +
Tooltip
diff --git a/test/components/__snapshots__/Tooltip.spec.ts.snap b/test/components/__snapshots__/Tooltip.spec.ts.snap index 445339c0..41481907 100644 --- a/test/components/__snapshots__/Tooltip.spec.ts.snap +++ b/test/components/__snapshots__/Tooltip.spec.ts.snap @@ -68,7 +68,7 @@ exports[`Tooltip > renders with kbds correctly 1`] = `
-
Tooltip +
Tooltip