CommandPalette
⌘K-палітра команд із пошуком, групами та глобальним хоткеєм Ctrl+K / Cmd+K.
Палітра НЕ обгортка над UiModal, але ділить із ним те саме overlay-ядро:
власний Teleport і backdrop, зареєстровані в одному стеку шарів. Тому
UiCommandPalette, відкрита поверх UiModal, правильно переживає Escape —
закривається лише верхній оверлей — і не пірнає під неї за z-index.
Приклад
Або натисніть Ctrl+K
Остання дія: —
Натисніть Ctrl+K / Cmd+K у будь-якому місці сторінки — палітра відкриється
і без кнопки. Хоткей не спрацьовує, лише коли фокус уже в текстовому полі
або contenteditable: там свої комбінації.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
groups* | CommandGroup[] | [] | Групи команд у порядку показу. |
placeholder | string | "Пошук…" | Placeholder поля пошуку. |
emptyText | string | "Нічого не знайдено" | Текст, коли за запитом нічого не знайдено. |
modelValue | boolean | false | Відкрито. Використовуйте через `v-model`. |
hotkey | boolean | true | Глобальний Ctrl+K / Cmd+K відкриває палітру. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: boolean] | Зміна стану відкриття. Використовуйте через `v-model`. |
search | [query: string] | Запит у полі пошуку змінився — на кожен ввід, включно з порожнім рядком. |
select | [payload: { groupId: string; item: string; }] | Обрано команду. У payload приходять `groupId` та `item` — id групи й елемента, не їхні назви. |
Слоти
| Назва | Опис |
|---|---|
item | Повний рендер рядка замість типового. `active` — чи рядок підсвічений навігацією ↑↓. |
empty | Замінює блок «Нічого не знайдено». |
Коли використовувати
Для «все в одному місці»: команди, переходи, дії, які користувач має знаходити за назвою, не пам'ятаючи, в якому меню вони лежать.
Коли команд багато і вони ростуть — групи плюс фільтр масштабуються краще, ніж вкладені меню.
Коли НЕ використовувати
Якщо команд три і вони видимі кнопками на екрані — палітра лише додає зайвий шар: кнопки зрозуміліші, ніж рядок пошуку.
Не кладіть у палітру деструктивні дії без підтвердження. Enter у палітрі
спрацьовує одразу, і випадковий рядок не має коштувати видалених даних —
для цього є UiConfirmDialog.
Доступність
Поле має role="combobox" з aria-controls на listbox; рядки —
role="option" з aria-selected на активному. Навігація ↑↓ іде плоским
списком збігів: заголовки груп не фокусуються.
Фокус утримується всередині панелі, а при закритті повертається на елемент,
з якого палітру відкрили. При відкритті фокус отримує поле пошуку — на
відміну від UiModal, де типово фокусується сама панель.
Портування
Ті самі чотири композабли overlay-ядра, що й для UiModal, плюс
uiFieldStyles для стилю поля пошуку. Якщо в проєкті вже є UiModal,
копіювати композабли удруге не потрібно.