VueCraft NPM

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

Оформление ​

Палитра полностью стилизуется через 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():

ts
app.use(VCommandPalettePlugin, {
  colorTheme: 'dark', // 'light' | 'dark' | 'system' (по умолчанию: 'system')
})
ts
// Изменить тему программно из любого компонента
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: 'Загрузка',
  }"
/>

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

PaletteLabels ​

recent ​

string · по умолчанию: 'Recent'

Заголовок над недавними командами (пустой запрос).

pinned ​

string · по умолчанию: 'Pinned'

Заголовок над закреплёнными командами (пустой запрос).

pin ​

string · по умолчанию: 'Pin'

title иконки закрепления в строке, когда команда ещё не закреплена.

unpin ​

string · по умолчанию: 'Unpin'

title иконки закрепления в строке, когда команда уже закреплена.

actions ​

string · по умолчанию: 'Actions'

Заголовок меню дополнительных действий.

back ​

string · по умолчанию: 'Back'

Элемент «Назад» (меню действий).

togglePreview ​

string · по умолчанию: 'Toggle preview panel'

title/aria-label кнопки переключения панели предпросмотра.

confirmYes ​

string · по умолчанию: 'Yes, proceed'

Диалог подтверждения — кнопка продолжения.

confirmCancel ​

string · по умолчанию: 'Cancel'

Диалог подтверждения — кнопка отмены.

themeLight ​

string · по умолчанию: 'Light theme'

Заголовок кнопки переключателя темы.

themeDark ​

string · по умолчанию: 'Dark theme'

Заголовок кнопки переключателя темы.

themeSystem ​

string · по умолчанию: 'System theme'

Заголовок кнопки переключателя темы.

dialogLabel ​

string · по умолчанию: 'Command palette'

aria-label диалога.

loading ​

string · по умолчанию: 'Loading'

aria-label спиннера пункта.

resultsCount ​

(n: number) => string

aria-live-объявление количества результатов.