Command Palette | astryx-vue

Usage

CommandPalette is a searchable command list. It owns the dialog, the search field, grouping, the empty state, and keyboard movement. The commands themselves come from a SearchSource. An empty query calls bootstrap; a typed query calls search.

isInline draws the palette in the page instead of a modal. Production palettes leave it off. Opening from a shortcut is the page's job: useHotkeys already handles mod+k.

vue

<script setup lang="ts">
import { createStaticSource, useHotkeys } from '@astryx-vue/core'
import { CommandPalette } from '@astryx-vue/core/CommandPalette'
import { ref } from 'vue'

const isOpen = ref(false)
const source = createStaticSource([
  { id: 'home', label: 'Home' },
  { id: 'settings', label: 'Settings' },
])

function openPalette() {
  isOpen.value = true
}

useHotkeys([{ keys: 'mod+k', onPress: openPalette }])
</script>

<template>
  <CommandPalette
    :is-open="isOpen"
    :search-source="source"
    @open-change="isOpen = $event"
  />
</template>

v-model:value turns the palette into a picker: the matching row stays selected, and choosing a row writes that id. auxiliaryData.group splits the list into groups in first-seen order. The item slot replaces the row label; footer replaces the hint row.

Arrow keys move the highlight and do not wrap. Home and End stay in the input and leave the highlight where it is. Page Up jumps to the first enabled row, and Page Down jumps to the last. Enter selects the highlighted row. Escape closes the palette and drops an in-flight search. Moving the pointer highlights a row without scrolling the list. The highlight stays empty until the pointer or the keyboard moves it.

Anatomy

Element	Description
Dialog	Modal surface that contains the command palette.
Input	Search region containing the query field and its supporting visuals.
Search glyph	Search symbol rendered by Icon in the default Input.
Query field	Native text field used to enter a search query.
Loading spinner	Spinner shown in the default Input while a search is pending.
List	Scrollable listbox containing the current results or Empty state.
Item	Selectable command result rendered inside the List.
Group	Optional collection of Items that share a heading.
Group heading	Visible heading rendered for a Group.
Empty	Message shown when the current result set is empty.
Footer	Footer region for default keyboard guidance or caller-provided content.
Keyboard shortcut	Painted key badges rendered by Kbd in the default Footer guidance.

Examples

Async search

Search waits briefly, then filters filenames. An empty query asks for a filename.

Grouped

Home and Settings sit under Navigation. New File and Save sit under Actions.

Custom footer

The hint row is replaced with a short note.

Picker mode

Light, Dark, and System. The current theme keeps a check mark.

Rich items

Rows show the command and, when one is set, its shortcut.

Usage ​