KCommandMenu

示例

Press Ctrl+K to open command menu

A command palette overlay with grouped, searchable items and keyboard navigation. Opens with Cmd/Ctrl+K.

Props

Name	Type	Default	Description
open	boolean	false	Whether the command menu is visible.
groups	KCommandMenuGroup[]	[]	Array of groups, each with a name and items array ({ id, label, action? }).
placeholder	string	'Type a command or search...'	Placeholder text for the search input.
theme	'auto' | 'day' | 'night'	'auto'	Theme mode. auto follows the current theme; day and night force a specific mode.

Emits

Name	Parameters	Description
update:open	boolean	Emitted when the menu should open or close.
select	{ id: string; label: string; action?: () => void; groupName: string }	Emitted when an item is selected.

Slots

Name	Description
—	This component does not provide slots.

Basic Usage

<script setup>
import { ref } from 'vue'
import { KCommandMenu } from '@kK-2004/ui-component'

const open = ref(false)
const groups = [
  {
    name: 'Actions',
    items: [
      { id: 'new', label: 'New File', action: () => console.log('new') },
      { id: 'open', label: 'Open File', action: () => console.log('open') },
    ],
  },
]
</script>

<template>
  <KCommandMenu v-model:open="open" :groups="groups" />
</template>