VueCraft NPM

CommandPalette ​

Корневой компонент. Рендерит модальный оверлей с полем поиска, списком результатов и опциональными слотами. По умолчанию телепортируется в <body>.

Пропы ​

name ​

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

Целевой именованный инстанс палитры (по умолчанию — singleton, если опущен).

placeholder ​

string · по умолчанию: 'Search commands…'

Текст плейсхолдера поля ввода.

maxResults ​

number · по умолчанию: 10

Максимальное число показываемых результатов.

emptyText ​

string · по умолчанию: 'No commands found.'

Текст, показываемый при отсутствии результатов поиска.

loadingText ​

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

Текст, показываемый пока загружаются асинхронные группы.

teleportTo ​

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

CSS-селектор для цели <Teleport>.

theme ​

'default' | 'compact' · по умолчанию: 'default'

Compact использует более узкий и короткий диалог.

animationDuration ​

number · по умолчанию: 150

Длительность fade-перехода в мс.

labels ​

Partial<PaletteLabels> · по умолчанию: —

Переопределение встроенных строк UI (i18n) — см. Локализацию.

groupRecent ​

boolean · по умолчанию: false

Группировать недавние команды по их group с подзаголовками.

modes ​

PaletteMode[] · по умолчанию: —

Активируемые префиксом области поиска — см. Режимы / области.

selectable ​

boolean · по умолчанию: false

Режим множественного выбора — см. Множественный выбор.

preview ​

boolean · по умолчанию: false

Показать панель предпросмотра для активной команды — см. Панель предпросмотра.

previewHotkey ​

string[] · по умолчанию: ['$mod', 'i']

Комбинация клавиш для переключения панели предпросмотра ([] — отключить).

Emits ​

submit-selection ​

Command[]

Генерируется по $mod+Enter в режиме множественного выбора.

Слоты ​

#trigger ​

{ open, toggle }

Кастомный элемент, открывающий палитру.

Контент, вставляемый над полем поиска.

#input ​

{ query, onInput }

Полностью заменяет стандартный <input>.

#item ​

{ command, active, matches, parents, matchedText }

Заменяет всю строку результата (parents — контекст хлебных крошек; matchedText — совпавшее ключевое слово/алиас).

#group-header ​

{ group }

Заменяет строку заголовка группы.

#empty ​

{ query }

Показывается, когда запрос не даёт результатов.

#actions ​

{ command, run, activeIndex, close }

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

#preview ​

{ command }

Контент панели предпросмотра для активной команды (требует проп preview).

Контент под списком результатов.

Кастомный слот #item ​

vue
<CommandPalette>
  <template #item="{ command, active, matches }">
    <div :class="['my-item', { 'my-item--active': active }]">
      <span v-if="command.icon" class="my-item__icon">{{ command.icon }}</span>

      <span class="my-item__body">
        <component :is="highlightMatches(command.label, matches)" />
        <span v-if="command.description" class="my-item__desc">
          {{ command.description }}
        </span>
      </span>

      <span v-if="command.shortcut?.length" class="my-item__shortcut">
        <kbd v-for="k in command.shortcut" :key="k">{{ k }}</kbd>
      </span>

      <span v-if="command.subCommands?.length">›</span>
    </div>
  </template>
</CommandPalette>
vue
<CommandPalette>
  <template #footer>
    <div class="my-footer">
      <span><kbd>↑↓</kbd> navigate</span>
      <span><kbd>↵</kbd> select</span>
      <span><kbd>Esc</kbd> close</span>
    </div>
  </template>
</CommandPalette>

Программное открытие через слот #trigger ​

vue
<CommandPalette>
  <template #trigger="{ toggle }">
    <button @click="toggle">Open palette</button>
  </template>
</CommandPalette>