Command Palette
@astryxdesign/core v0.7.1 · CommandPalette
Props
| Name | Type | Default | Description |
|---|---|---|---|
isOpen | boolean | - | Whether the palette is open. |
searchSource | SearchSource | - | Where commands come from. An empty query calls bootstrap. |
isInline | boolean | false | Render in the page flow instead of a modal dialog. |
label | string | Command palette | Accessible name of the dialog. |
width | number | string | 640 | Width of the dialog. Numbers are pixels. |
maxHeight | number | string | 480 | Maximum height of the dialog. Numbers are pixels. |
emptySearchText | string | No results | Shown when a query returns nothing. |
emptyBootstrapText | string | Type to search | Shown before the source has anything to list. |
value | string | - | Selected id in picker mode. Bind with v-model:value. |
Events
| Name | Payload | Description |
|---|---|---|
openChange | boolean | The next open state. Escape and a selection both close the palette. |
update:value | string | The id of the row that was selected. |
valueChange | string | The same selection under the original callback name, for code ported from React. |
Slots
| Name | Props | Description |
|---|---|---|
input | - | Replaces CommandPaletteInput. |
item | { item, isSelected } | Row content. isSelected is the picker match, not the keyboard highlight. |
footer | - | Replaces the default hint row. Put a CommandPaletteFooter here when the replacement should keep the footer chrome. |
CommandPaletteInput
| Name | Type | Default | Description |
|---|---|---|---|
placeholder | string | Search… | Placeholder and the fallback accessible name. |
label | string | - | Accessible name of the combobox. Falls back to placeholder. |
hasAutoFocus | boolean | true | Focus the field when the palette opens. Inline palettes skip this. |
value | string | - | Search value, bound with v-model:value. Read from the surrounding CommandPalette when omitted. |
| Name | Description |
|---|---|
valueChange | Next search value. Fired only while value is bound; otherwise the input writes to the palette. |
The endContent slot (also available as end) is trailing content after the spinner.
CommandPaletteList
label names the listbox. The default is Commands.
CommandPaletteGroup
heading is the visible group label and the group's accessible name.
CommandPaletteItem
value is the command id. isDisabled blocks selection. isHighlighted and isSelected override the state the row reads from the palette, which is what standalone previews need. select fires with the value when the row is activated by pointer. The default slot is the row content.
CommandPaletteEmpty
The default slot is the empty message.
CommandPaletteFooter
The default slot replaces the Navigate, Select, and Close hints. The footer chrome stays.