Usage
Use the auto-imported extractShortcuts utility to define keyboard shortcuts from menu items. It extracts shortcuts from components like DropdownMenu, ContextMenu or CommandPalette where items have kbds defined.
<script setup lang="ts">
const items = [{
label: 'Save',
kbds: ['meta', 'S'],
onSelect() {
save()
}
}, {
label: 'Copy',
kbds: ['meta', 'C'],
onSelect() {
copy()
}
}]
defineShortcuts(extractShortcuts(items))
</script>
API
extractShortcuts(items: any[] | any[][], separator?: '_' | '-'): ShortcutsConfig
Extracts keyboard shortcuts from an array of menu items and returns a configuration object compatible with defineShortcuts.
Parameters
items
any[] | any[][] required
An array of menu items (or nested arrays) containing shortcut definitions. Each item can have the following properties:
kbds
string[]
An array of keyboard keys that form the shortcut (e.g.,
['meta', 'S']).onSelect
() => void
A callback function to execute when the shortcut is triggered.
onClick
() => void
An alternative callback function (used if
onSelect is not defined).children
any[]
Nested menu items to recursively extract shortcuts from.
items
any[]
Alternative property for nested menu items.
separator
'_' | '-'
The separator used to join keyboard keys. Use
'_' for key combinations (e.g., meta_k) or '-' for key sequences (e.g., g-d). Defaults to '_'.Returns: A ShortcutsConfig object that can be passed directly to defineShortcuts.
Examples
With nested items
The utility recursively traverses children and items properties to extract shortcuts from nested menu structures.
<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'
const items: DropdownMenuItem[][] = [[{
label: 'Edit',
kbds: ['E'],
onSelect() {
edit()
}
}, {
label: 'Duplicate',
kbds: ['D'],
onSelect() {
duplicate()
}
}], [{
label: 'Invite users',
children: [[{
label: 'Invite by email',
kbds: ['meta', 'E'],
onSelect() {
inviteByEmail()
}
}, {
label: 'Invite by link',
kbds: ['meta', 'I'],
onSelect() {
inviteByLink()
}
}]]
}], [{
label: 'Delete',
kbds: ['meta', 'backspace'],
onSelect() {
remove()
}
}]]
defineShortcuts(extractShortcuts(items))
</script>
<template>
<B24DropdownMenu :items="items">
<B24Button label="Actions" />
</B24DropdownMenu>
</template>
With key sequences
Use the separator parameter to create key sequences instead of key combinations.
<script setup lang="ts">
const items = [{
label: 'Go to Dashboard',
kbds: ['G', 'D'],
onSelect() {
navigateTo('/dashboard')
}
}, {
label: 'Go to Settings',
kbds: ['G', 'S'],
onSelect() {
navigateTo('/settings')
}
}]
// Using '-' creates key sequences: 'g-d', 'g-s'
defineShortcuts(extractShortcuts(items, '-'))
</script>