Компоненты
CommandPalette
Корневой компонент. Рендерит модальный оверлей с полем поиска, списком результатов и опциональными слотами. По умолчанию телепортируется в <body>.
Пропы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
name | string | — | Целевой именованный инстанс палитры (по умолчанию — singleton, если опущен) |
placeholder | string | 'Search commands…' | Текст плейсхолдера поля ввода |
maxResults | number | 10 | Максимальное число показываемых результатов |
emptyText | string | 'No commands found.' | Текст, показываемый при отсутствии результатов поиска |
loadingText | string | 'Loading…' | Текст, показываемый пока загружаются асинхронные группы |
teleportTo | string | 'body' | CSS-селектор для цели <Teleport> |
theme | 'default' | 'compact' | 'default' | Compact использует более узкий и короткий диалог |
animationDuration | number | 150 | Длительность fade-перехода в мс |
labels | Partial<PaletteLabels> | — | Переопределение встроенных строк UI (i18n) — см. Локализацию |
groupRecent | boolean | false | Группировать недавние команды по их group с подзаголовками |
modes | PaletteMode[] | — | Активируемые префиксом области поиска (см. Режимы / области) |
selectable | boolean | false | Режим множественного выбора (см. Множественный выбор) |
preview | boolean | false | Показать панель предпросмотра для активной команды (см. Панель предпросмотра) |
previewHotkey | string[] | ['$mod', 'i'] | Комбинация клавиш для переключения панели предпросмотра ([] — отключить) |
Emits
| Событие | Payload | Описание |
|---|---|---|
submit-selection | Command[] | Генерируется по $mod+Enter в режиме множественного выбора |
Слоты
| Слот | Область видимости | Описание |
|---|---|---|
#trigger | { open, toggle } | Кастомный элемент, открывающий палитру |
#header | — | Контент, вставляемый над полем поиска |
#input | { query, onInput } | Полностью заменяет стандартный <input> |
#item | { command, active, matches, parents, matchedText } | Заменяет всю строку результата (parents — контекст хлебных крошек; matchedText — совпавшее ключевое слово/алиас) |
#group-header | { group } | Заменяет строку заголовка группы |
#empty | { query } | Показывается, когда запрос не даёт результатов |
#actions | { command, run, activeIndex, close } | Заменяет меню дополнительных действий |
#preview | { command } | Контент панели предпросмотра для активной команды (требует проп preview) |
#footer | — | Контент под списком результатов |
Кастомный слот #item
vue
<CommandPalette>
<template #item="{ command, active, matches }">
<div :class="['my-item', { 'my-item--active': active }]">
<span v-if="command.icon" class="my-item__icon">{{ command.icon }}</span>
<span class="my-item__body">
<component :is="highlightMatches(command.label, matches)" />
<span v-if="command.description" class="my-item__desc">
{{ command.description }}
</span>
</span>
<span v-if="command.shortcut?.length" class="my-item__shortcut">
<kbd v-for="k in command.shortcut" :key="k">{{ k }}</kbd>
</span>
<span v-if="command.subCommands?.length">›</span>
</div>
</template>
</CommandPalette>Кастомный слот #footer
vue
<CommandPalette>
<template #footer>
<div class="my-footer">
<span><kbd>↑↓</kbd> navigate</span>
<span><kbd>↵</kbd> select</span>
<span><kbd>Esc</kbd> close</span>
</div>
</template>
</CommandPalette>Программное открытие через слот #trigger
vue
<CommandPalette>
<template #trigger="{ toggle }">
<button @click="toggle">Open palette</button>
</template>
</CommandPalette>CommandItem
Рендерит одну строку команды с иконкой, label (с подсветкой совпадений), описанием, бейджем горячей клавиши, спиннером загрузки и состоянием disabled. Используется внутренне; также доступен для кастомных раскладок.
Пропы
| Проп | Тип | Описание |
|---|---|---|
command | Command | Отображаемая команда |
active | boolean | Выбрана ли эта строка с клавиатуры |
matches | Array<[number, number]> | Диапазоны подсветки от движка нечёткого поиска |
itemId | string | Атрибут id для ARIA aria-activedescendant |
loadingCommandId | string | null | ID выполняющейся команды; показывает спиннер |
Emits
| Событие | Описание |
|---|---|
execute | Пользователь кликнул или нажал Enter на этом пункте |
activate | Пользователь навёл курсор на этот пункт |
CommandGroup
Рендерит заголовок группы и следующие за ним строки CommandItem. Пробрасывает все слоты #item, #item-icon и #item-shortcut каждому дочернему элементу.
Пропы
| Проп | Тип | Описание |
|---|---|---|
group | CommandGroup | Метаданные группы (id, label, priority) |
items | SearchResult[] | Отфильтрованные результаты для этой группы |
activeIndex | number | Глобальный активный индекс для отслеживания подсветки |
globalOffset | number | Смещение индекса в плоском списке результатов |
loadingCommandId | string | null | Пробрасывается в каждый CommandItem |