Функции продуктивности

Недавние команды

Недавние команды всегда отслеживаются в памяти для текущей сессии и показываются над всеми остальными командами, когда палитра открывается с пустым запросом. При persistRecent: true (по умолчанию) список дополнительно записывается в localStorage, чтобы пережить перезагрузку страницы; persistRecent: false оставляет работу недавних команд в рамках сессии, не трогая localStorage.

app.use(VCommandPalettePlugin, {
  persistRecent: true,
  maxRecent: 8, // хранить не более 8 команд всего
  maxRecentPerGroup: 2, // не более 2 на группу (0 = без ограничений)
  localStorageKey: 'myapp:recent',
})

Недавние команды разрешаются во время выполнения — если команда снята с регистрации (например, её компонент размонтирован), она молча исключается из списка недавних.

Закреплённые команды

Пользователи могут закрепить любую команду в секции Pinned, показываемой над Recent в виде с пустым запросом. Переключить закрепление можно через $mod+P на активном пункте, кликом по иконке булавки в строке (она появляется полупрозрачной при наведении/активности с клавиатуры и остаётся яркой на закреплённых командах — клик по ней никогда не запускает команду), либо через API composable. Закрепления сохраняются в localStorage (<localStorageKey>:pinned), когда включён persistRecent.

const { pin, unpin, togglePin, isPinned, getPinnedCommands, pinnedIds } = useCommandPalette()

Frecency

При frecency: true палитра отслеживает, как часто и как недавно выполнялась каждая команда, и добавляет бонус к её счёту в поиске, так что самые используемые команды всплывают наверх. Статистика хранится в памяти и (когда включён persistRecent) сохраняется в localStorage под ключом <localStorageKey>:frecency.

app.use(VCommandPalettePlugin, { frecency: true })

Бонус объединяет частоту (количество запусков) с недавностью (затухает примерно за ~30 дней) и никогда не скрывает сильное точное/префиксное совпадение — он лишь переупорядочивает сопоставимые результаты.

Панель предпросмотра

Установите preview, чтобы показать правую панель для активной команды — отлично подходит для деталей, документации или миниатюр. Обновляется при изменении выбора (хорошо сочетается с опцией onHighlight для асинхронных превью). На узких экранах панель скрывается автоматически.

Два источника заполняют панель, по порядку:

1. Слот #preview — область видимости { command }, полный контроль над разметкой.
2. Поле info активной команды (обычный текст или HTML) — рендерится после слота. Удобно, когда кастомный слот не нужен.

<CommandPalette preview>
  <template #preview="{ command }">
    <div v-if="command">
      <h3>{{ command.label }}</h3>
      <p>{{ command.description }}</p>
    </div>
  </template>
</CommandPalette>

useRegisterCommands([
  {
    id: 'analytics',
    label: 'Open Analytics',
    info: '<p>Traffic, conversions and revenue charts.</p>', // текст или HTML
    perform: () => {},
  },
])

Безопасность: info рендерится через v-html. Передавайте только доверенную/санитизированную разметку.

Переключение панели

• Рядом с переключателем темы появляется иконка боковой панели для разворачивания/сворачивания.
• Проп previewHotkey задаёт переключение с клавиатуры (по умолчанию ['$mod', 'i'] → ⌘/Ctrl + I; передайте [], чтобы отключить).
• Открытие/закрытие анимирует ширину панели синхронно с шириной диалога, так что список остаётся постоянной ширины без рывков; учитывает prefers-reduced-motion.

Диалог расширяется до --vcp-dialog-preview-width (по умолчанию 860px) только пока панель развёрнута — когда она свёрнута (или preview выключен), диалог возвращается к обычной --vcp-dialog-width (560px). Панель имеет ширину --vcp-preview-width (по умолчанию 300px); поддерживайте dialog-preview-width − dialog-width = preview-width для абсолютно стабильного списка во время анимации.

Дополнительные действия

Команда может предоставлять дополнительные actions (открыть, скопировать, удалить, …). Нажмите Tab на активном пункте, чтобы открыть меню действий; стрелки перемещают фокус, Enter выполняет, а Esc / Tab / Backspace (или кнопка ‹ Back в заголовке) возвращает к списку. Настройте меню слотом #actions ({ command, run, activeIndex, close }).

useRegisterCommands([
  {
    id: 'export',
    label: 'Export data',
    perform: () => download(),
    actions: [
      { id: 'copy', label: 'Copy as JSON', perform: () => copyJson() },
      { id: 'mail', label: 'Email export', shortcut: ['$mod', 'm'], perform: () => email() },
    ],
  },
])

Пункты с действиями показывают значок ⋯.

Множественный выбор

С selectable палитра становится мультивыбором: Enter (или клик) переключает активный пункт, $mod+Enter отправляет выбор. Выбранные строки показывают чекбокс.

<CommandPalette selectable @submit-selection="onPicked" />

function onPicked(commands: Command[]) {
  // сделать что-то с выбранными командами
}

Мобильные устройства / touch

Палитра адаптивна из коробки: на вьюпортах ≤ 640px диалог становится во всю ширину с более крупными (48px) touch-целями, панель предпросмотра скрывается, а hover-стили отключаются на touch-устройствах. Внутри вложенной палитры/страницы свайп вправо возвращает назад.