extractShortcuts

Um utilitário para extrair atalhos de teclado dos itens de menu.

Uso

Use o utilitário extractShortcuts, importado automaticamente, para definir atalhos de teclado a partir de itens de menu. Ele extrai atalhos de componentes como DropdownMenu, ContextMenu ou CommandPalette em que os itens têm kbds definidos.

<script setup lang="ts">
const items = [{
  label: 'Save',
  icon: 'i-lucide-file-down',
  kbds: ['meta', 'S'],
  onSelect() {
    save()
  }
}, {
  label: 'Copy',
  icon: 'i-lucide-copy',
  kbds: ['meta', 'C'],
  onSelect() {
    copy()
  }
}]

defineShortcuts(extractShortcuts(items))
</script>

Saiba mais sobre atalhos de teclado na documentação do composable defineShortcuts.

API

extractShortcuts(items: any[] | any[][], separator?: '_' | '-'): ShortcutsConfig

Extrai atalhos de teclado de um array de itens de menu e retorna um objeto de configuração compatível com defineShortcuts.

Parâmetros

items

any[] | any[][] required

An array of menu items (or nested arrays) containing shortcut definitions. Each item can have the following properties:

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.

Exemplos

Com itens aninhados

O utilitário percorre recursivamente as propriedades children e items para extrair atalhos de estruturas de menu aninhadas.

<script setup lang="ts">
import type { DropdownMenuItem } from '@nitro/ui'

const items: DropdownMenuItem[][] = [[{
  label: 'Edit',
  icon: 'i-lucide-pencil',
  kbds: ['E'],
  onSelect() {
    edit()
  }
}, {
  label: 'Duplicate',
  icon: 'i-lucide-copy',
  kbds: ['D'],
  onSelect() {
    duplicate()
  }
}], [{
  label: 'Invite users',
  icon: 'i-lucide-user-plus',
  children: [[{
    label: 'Invite by email',
    icon: 'i-lucide-send-horizontal',
    kbds: ['meta', 'E'],
    onSelect() {
      inviteByEmail()
    }
  }, {
    label: 'Invite by link',
    icon: 'i-lucide-link',
    kbds: ['meta', 'I'],
    onSelect() {
      inviteByLink()
    }
  }]]
}], [{
  label: 'Delete',
  icon: 'i-lucide-trash',
  kbds: ['meta', 'backspace'],
  onSelect() {
    remove()
  }
}]]

defineShortcuts(extractShortcuts(items))
</script>

<template>
  <NDropdownMenu :items="items">
    <NButton label="Actions" />
  </NDropdownMenu>
</template>

Com sequências de teclas

Use o parâmetro separator para criar sequências de teclas em vez de combinações de teclas.

<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>

extendLocale

Um utilitário para estender um locale existente com traduções personalizadas.

useOverlay

Um composable para controlar overlays programaticamente.