Справочник
Доступность
| Функция | Реализация |
|---|---|
role="dialog" + aria-modal="true" | Применяется к элементу диалога палитры |
role="combobox" | Применяется к <input> поиска |
aria-expanded="true" | Устанавливается на input, пока палитра открыта |
aria-controls | Input указывает на список результатов с role="listbox" |
aria-activedescendant | Обновляется при смене активного по клавиатуре пункта |
role="listbox" | Применяется к контейнеру списка результатов |
role="option" | Применяется к каждому CommandItem |
aria-selected | Устанавливается в true для текущего активного пункта |
aria-disabled | Устанавливается, когда disabled: true или enabled() возвращает false |
aria-live="polite" | Хлебные крошки — скринридеры объявляют навигацию по под-палитре; визуально скрытая область также объявляет количество результатов (labels.resultsCount) |
| Focus trap | Tab перехватывается, чтобы удерживать фокус внутри диалога |
| Блокировка скролла | document.body.style.overflow устанавливается в hidden, пока диалог открыт |
| Уменьшенное движение | @media (prefers-reduced-motion: reduce) отключает fade-переход |
Совместимость с SSR
Все браузерные API защищены перед использованием:
ts
// KeyboardManager — пропускает addEventListener на сервере
if (typeof document === 'undefined') return
// Недавние команды — пропускает localStorage на сервере
if (typeof localStorage === 'undefined') return
// CommandItem — определение платформы для метки ⌘ или Ctrl
typeof navigator !== 'undefined' && navigator.platform.includes('Mac')VirtualList (используется для наборов результатов > 50 элементов) рендерит пустой плейсхолдер на сервере и гидрируется на клиенте. Весь контент слотов и регистрация команд полностью SSR-безопасны.
Размер бандла и peer-зависимости
| Точка входа | Peer-зависимости | Заметки |
|---|---|---|
@macrulez/vue-command-palette | vue ^3.3 | Компоненты, composables, движок нечёткого поиска, менеджер клавиатуры |
@macrulez/vue-command-palette/style.css | — | Стандартные стили; ~3 КБ |
@macrulez/vue-command-palette/testing | vue ^3.3 | createPaletteContext + PaletteProvider; только для dev/тестов |
@macrulez/vue-command-palette/nuxt | @nuxt/kit >=3.0 (опционально), vue ^3.3 | Модуль Nuxt — автоматически устанавливает плагин, регистрирует автоимпорты composables, добавляет стандартный стилевой файл |
Поставляется как tree-shakeable ESM (dist/vue-command-palette.js) + CJS (dist/vue-command-palette.cjs). Базовый бандл без стилей — ~12 КБ gzip; стилевой файл — ~2 КБ gzip.
Лицензия
MIT