extractSneltoetsen

Een hulpprogramma om sneltoetsen uit menu-items te extraheren.

Gebruik

Gebruik het automatisch geïmporteerde hulpprogramma extractShortcuts om sneltoetsen uit menu-items te definiëren. Het haalt sneltoetsen uit componenten zoals DropdownMenu, ContextMenu of CommandPalette waar items kbds hebben gedefinieerd.

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

Lees meer over sneltoetsen in de defineShortcuts samen te stellen documentatie.

API

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

Haalt sneltoetsen uit een reeks menu-items en retourneert een configuratieobject dat compatibel is met defineShortcuts.

Parameters

items

any[] | any[][] required

Een reeks menu-items (of geneste arrays) met snelkoppelingsdefinities. Elk item kan de volgende eigenschappen hebben:

separator

'_' | '-'

Het scheidingsteken dat wordt gebruikt om toetsenbordtoetsen samen te voegen. Gebruik '_' voor toetscombinaties (bijv. meta_k) of '-' voor toetsreeksen (bijv. g-d). Standaard '_'.

**Returns: ** Een ShortcutsConfig object dat direct aan defineShortcuts kan worden doorgegeven.

Voorbeelden

Met geneste items

Het hulpprogramma doorkruist recursief de eigenschappen children en items om snelkoppelingen uit geneste menustructuren te extraheren.

<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/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>
  <UDropdownMenu :items="items">
    <UButton label="Actions" />
  </UDropdownMenu>
</template>

Met toetsreeksen

Gebruik de parameter separator om toetsreeksen te maken in plaats van toetscombinaties.

<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

A utility to extend an existing locale with custom translations.

useOverlay

A composable to programmatically control overlays.