CommandPalette

A global command palette for quick actions and search.

Basic Usage

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
const selected = ref('')

const commands = [
  { id: 'open', title: 'Open File', description: 'Quickly open a file', shortcut: 'Cmd/Ctrl+O' },
  { id: 'search', title: 'Global Search', description: 'Search across content', shortcut: 'Cmd/Ctrl+K' },
  { id: 'settings', title: 'Settings', description: 'Open preferences', shortcut: 'Cmd/Ctrl+,' },
]

function onSelect(command: { title: string }) {
  selected.value = command.title
}
</script>

<template>
  <TxButton variant="primary" @click="open = true">
    Open command palette
  </TxButton>
  <TxCommandPalette v-model="open" :commands="commands" @select="onSelect" />
</template>

API

TxCommandPalette Props

Name	Type	Default	Description
`modelValue`	`boolean`	-	Visibility state
`commands`	`CommandPaletteItem[]`	`[]`	Command list
`placeholder`	`string`	`'Search commands'`	Search placeholder
`emptyText`	`string`	`'No commands found'`	Empty text
`maxHeight`	`number`	`320`	Max list height
`autoFocus`	`boolean`	`true`	Auto focus input
`closeOnSelect`	`boolean`	`true`	Close after select

CommandPaletteItem

Field	Type	Description
`id`	`string`	Unique id
`title`	`string`	Title
`description`	`string`	Description
`keywords`	`string[]`	Keywords
`icon`	`TxIconSource \| string`	Icon
`shortcut`	`string`	Shortcut
`disabled`	`boolean`	Disabled state

Events

Event	Payload	Description
`update:modelValue`	`(value)`	Visibility state
`select`	`(item)`	Select command
`open`	-	Opened
`close`	-	Closed
`update:query`	`(value)`	Search input update