Оформление и локализация

Оформление

Палитра полностью стилизуется через CSS custom properties. Импортируйте стандартный стилевой файл, затем переопределите переменные в своём CSS.

css

/* Переопределение глобально */
:root {
  --vcp-dialog-width: 640px;
  --vcp-item-height: 44px;
  --vcp-item-active-bg: #ede9fe;
  --vcp-match-color: #7c3aed;
}

/* Или ограничить область родительским элементом */
.my-app [data-vcp] {
  --vcp-dialog-bg: #fafafa;
}

Все CSS custom properties

css

:root {
  /* Оверлей и диалог */
  --vcp-z-index: 9999;
  --vcp-overlay-bg: rgba(0, 0, 0, 0.5);
  --vcp-dialog-bg: #ffffff;
  --vcp-dialog-color: #111111;
  --vcp-dialog-radius: 8px;
  --vcp-dialog-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);
  --vcp-dialog-width: 560px;
  --vcp-dialog-preview-width: 860px;
  --vcp-preview-width: 300px;
  --vcp-dialog-max-height: 60vh;
  --vcp-dialog-padding-top: 15vh;

  /* Границы */
  --vcp-border-color: #eeeeee;

  /* Поле поиска */
  --vcp-input-font-size: 16px;

  /* Пункты результатов */
  --vcp-item-height: 40px;
  --vcp-item-active-bg: #f0f0f0;
  --vcp-item-font-size: 14px;
  --vcp-item-radius: 4px;

  /* Заголовки групп */
  --vcp-group-header-color: #999999;
  --vcp-group-header-font-size: 11px;

  /* Бейдж клавиатуры */
  --vcp-kbd-bg: #eeeeee;
  --vcp-kbd-border: #dddddd;

  /* Подсветка совпадений */
  --vcp-match-color: inherit;

  /* Хлебные крошки (вложенные палитры) */
  --vcp-breadcrumb-color: #888888;

  /* Состояния пусто / загрузка */
  --vcp-state-color: #999999;

  /* Скроллбар */
  --vcp-scrollbar-thumb: #d0d0d0;
  --vcp-scrollbar-thumb-hover: #b0b0b0;
}

Тёмная тема

Стилевой файл включает автоматическую тёмную тему через @media (prefers-color-scheme: dark). Чтобы переопределить вручную классом темы:

css

[data-theme='dark'] {
  --vcp-dialog-bg: #1a1a1a;
  --vcp-dialog-color: #eeeeee;
  --vcp-border-color: #333333;
  --vcp-item-active-bg: #2a2a2a;
  --vcp-kbd-bg: #2a2a2a;
  --vcp-kbd-border: #444444;
  --vcp-group-header-color: #666666;
  --vcp-scrollbar-thumb: #444444;
  --vcp-scrollbar-thumb-hover: #666666;
}

Встроенный переключатель темы

Палитра включает встроенный переключатель light / system / dark, отрисовываемый прямо внутри строки поиска. Начальная тема задаётся опцией плагина colorTheme и может быть изменена во время выполнения через useCommandPalette():

app.use(VCommandPalettePlugin, {
  colorTheme: 'dark', // 'light' | 'dark' | 'system' (по умолчанию: 'system')
})

// Изменить тему программно из любого компонента
import { useCommandPalette } from '@macrulez/vue-command-palette'

const { colorTheme } = useCommandPalette()
colorTheme.value = 'dark'

'system' следует за prefers-color-scheme. Выбор 'light' или 'dark' применяет .vcp-theme-light / .vcp-theme-dark на оверлей, что переопределяет медиа-запрос.

Локализация

Встроенные строки UI (заголовок Recent, кнопки диалога подтверждения, заголовки переключателя темы, ARIA-метки) можно переопределить через проп labels. Переопределяются только переданные ключи; остальные откатываются к английским значениям по умолчанию.

vue

<CommandPalette
  placeholder="Поиск команд…"
  empty-text="Ничего не найдено."
  loading-text="Загрузка…"
  :labels="{
    recent: 'Недавние',
    confirmYes: 'Да, продолжить',
    confirmCancel: 'Отмена',
    themeLight: 'Светлая тема',
    themeDark: 'Тёмная тема',
    themeSystem: 'Системная тема',
    dialogLabel: 'Палитра команд',
    loading: 'Загрузка',
  }"
/>

`PaletteLabels`

Ключ	По умолчанию	Где отображается
`recent`	`'Recent'`	Заголовок над недавними командами (пустой запрос)
`pinned`	`'Pinned'`	Заголовок над закреплёнными командами (пустой запрос)
`pin` / `unpin`	`'Pin'` / `'Unpin'`	`title` иконки закрепления в строке
`actions`	`'Actions'`	Заголовок меню дополнительных действий
`back`	`'Back'`	Элемент «Назад» (меню действий)
`togglePreview`	`'Toggle preview panel'`	`title`/`aria-label` кнопки переключения панели предпросмотра
`confirmYes`	`'Yes, proceed'`	Диалог подтверждения — кнопка продолжения
`confirmCancel`	`'Cancel'`	Диалог подтверждения — кнопка отмены
`themeLight`	`'Light theme'`	Заголовок кнопки переключателя темы
`themeDark`	`'Dark theme'`	Заголовок кнопки переключателя темы
`themeSystem`	`'System theme'`	Заголовок кнопки переключателя темы
`dialogLabel`	`'Command palette'`	`aria-label` диалога
`loading`	`'Loading'`	`aria-label` спиннера пункта
`resultsCount`	`(n) => '… results available'`	`aria-live`-объявление количества результатов (функция)

Примечание: placeholder, emptyText и loadingText остаются отдельными пропами CommandPalette.

Оформление и локализация ​