extractショートカット

メニュー項目からキーボードショートカットを抽出するユーティリティ。

使用法

自動インポートされたextractShortcutsユーティリティを使用して、メニュー項目からキーボードショートカットを定義します。 DropdownMenu のようなコンポーネントからショートカットを抽出します。 ContextMenu または CommandPalette ここで、項目はkbdsが定義されています。

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

キーボードショートカットの詳細については、** defineShortcuts ** composableドキュメントを参照してください。

API

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

メニュー項目の配列からキーボードショートカットを抽出し、defineShortcutsと互換性のある構成オブジェクトを返します。

パラメータ

items

any[] | any[][] required

ショートカット定義を含むメニューアイテムの配列（またはネストされた配列）。各アイテムは以下のプロパティを持つことができます。

separator

'_' | '-'

キーボードキーを結合するために使用されるセパレーター。キーの組み合わせには'_'を、キーシーケンスには'-'を使用します。デフォルトは'_'です。

戻り値 A ShortcutsConfigオブジェクトで、defineShortcutsに直接渡すことができます。

例

ネストされたアイテム

このユーティリティは、childrenおよびitemsのプロパティを再帰的にトラバースし、ネストされたメニュー構造からショートカットを抽出します。

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

キーシーケンス付き

separatorパラメータを使用して、キーの組み合わせの代わりにキーシーケンスを作成します。

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