CommandPalette

Открыть палитру

Используйте поиск или стрелки + Enter для выбора, Esc для закрытия.

Выбранная команда

Пока ничего не выбрано

Входные параметры

ИмяТипПо умолчаниюОписание
itemsCommandPaletteItem[][]Список команд. Тип CommandPaletteItem: value, label, description?, group?, keywords?, disabled?.
placeholderstring'Поиск команд…'Плейсхолдер поля поиска.
emptyTextstring'Ничего не найдено'Текст пустого состояния при отсутствии результатов.
widthstring'32rem'Ширина диалога палитры.
readonlybooleanfalseРежим «только чтение» — без фильтрации по мере ввода.

v-model

Проп open через v-model:open управляет открытием/закрытием палитры (тип boolean, по умолчанию false).

События

ИмяАргументыКогда срабатывает
selectitem: CommandPaletteItemПри выборе команды (клик, Enter или клик по активному пункту). Не срабатывает для отключённых команд.

Описание

Компонент C3CommandPalette — командная палитра в стиле быстрых действий (command palette): модальный оверлей с полем поиска и списком команд, сгруппированных по group. Позволяет быстро находить и выполнять действия с клавиатуры.

Управляйте видимостью через v-model:open. Поиск фильтрует команды по label, description, group и keywords (кроме режима readonly).

Дополнительная информация

  • Компонент целиком телепортируется в document.body и использует transition c3-modal.
  • Элемент имеет role="dialog" и aria-label="Командная палитра"; при открытии фокус ставится в поле поиска, скролл страницы блокируется, при закрытии фокус возвращается на элемент, открывший палитру.
  • Клавиатура: ArrowDown/ArrowUp — навигация по командам, Enter — выбор, Escape — закрытие; поддерживается ловушка фокуса (trapFocus).
  • Слоты не предусмотрены; контент и разметка управляются пропсами items и emptyText.
×