Command палитра

Command палитра — это интерфейсный компонент, позволяющий пользователю быстро выполнять команды, искать элементы или навигировать по приложению через текстовый ввод. В SvelteKit она реализуется как динамический и настраиваемый компонент, тесно интегрированный с реактивной архитектурой Svelte.

Структура компонента Command

В типичном SvelteKit-проекте Command палитра состоит из следующих ключевых элементов:

  1. Корневой контейнер – <Command> Он отвечает за состояние открытия/закрытия, обработку клавиш и общий контекст команд.

  2. Поле ввода – <CommandInput> Связывается с реактивной переменной через bind:value и инициирует фильтрацию списка команд по мере ввода текста.

  3. Список команд – <CommandList> Включает в себя дочерние компоненты <CommandItem> и <CommandGroup>. Отвечает за отображение отфильтрованных команд и управление навигацией через стрелки клавиатуры.

  4. Элементы команды – <CommandItem> Каждый элемент содержит уникальный идентификатор, label и callback-функцию, вызываемую при выборе команды.

  5. Группы команд – <CommandGroup> Позволяет структурировать команды по категориям, добавляя визуальное разделение и улучшая UX.

Реактивная фильтрация и поиск

SvelteKit позволяет реализовать мгновенную фильтрацию команд без перезагрузки DOM. Пример базовой связки:

<script>
  import { Command, CommandInput, CommandList, CommandItem } from 'sveltekit-ui';

  let query = '';
  const commands = [
    { id: 'new_file', label: 'Создать файл', action: () => console.log('Создан файл') },
    { id: 'open_file', label: 'Открыть файл', action: () => console.log('Файл открыт') },
    { id: 'save_file', label: 'Сохранить файл', action: () => console.log('Файл сохранён') },
  ];

  $: filteredCommands = commands.filter(c => c.label.toLowerCase().includes(query.toLowerCase()));
</script>

<Command>
  <CommandInput bind:value={query} placeholder="Введите команду..." />
  <CommandList>
    {#each filteredCommands as cmd}
      <CommandItem on:select={() => cmd.action()}>{cmd.label}</CommandItem>
    {/each}
  </CommandList>
</Command>

Особенности реактивного фильтра:

  • Использование $: позволяет автоматически обновлять список команд при изменении переменной query.
  • Фильтрация чувствительна к регистру при необходимости; для гибкости применяется .toLowerCase().

Обработка клавиш и навигация

Command палитра поддерживает следующие сценарии:

  • Стрелки вверх/вниз – навигация между элементами списка.
  • Enter – вызов функции выбранной команды.
  • Escape – закрытие палитры.

Для реализации можно использовать встроенные обработчики событий или подписки на on:keydown в <CommandInput>.

<CommandInput 
  bind:value={query} 
  on:keydown={(e) => {
    if (e.key === 'Escape') query = '';
  }}
  placeholder="Введите команду..." 
/>

Сложные сценарии: группировка и секции

<CommandGroup> позволяет объединять команды логически:

<CommandList>
  <CommandGroup heading="Файлы">
    <CommandItem on:select={createFile}>Создать файл</CommandItem>
    <CommandItem on:select={openFile}>Открыть файл</CommandItem>
  </CommandGroup>
  <CommandGroup heading="Редактирование">
    <CommandItem on:select={undo}>Отменить</CommandItem>
    <CommandItem on:select={redo}>Повторить</CommandItem>
  </CommandGroup>
</CommandList>

Преимущества использования групп:

  • Улучшает навигацию при большом количестве команд.
  • Позволяет добавлять заголовки секций без дополнительной логики фильтрации.
  • Визуально структурирует палитру, облегчая восприятие.

Асинхронные команды и интеграция с API

Command палитра в SvelteKit может работать с асинхронными источниками данных. Пример подгрузки команд с сервера:

<script>
  import { onMount } from 'svelte';
  import { Command, CommandInput, CommandList, CommandItem } from 'sveltekit-ui';

  let query = '';
  let commands = [];

  onMount(async () => {
    const response = await fetch('/api/commands');
    commands = await response.json();
  });

  $: filteredCommands = commands.filter(c => c.label.toLowerCase().includes(query.toLowerCase()));
</script>

Асинхронная подгрузка позволяет динамически расширять палитру без переработки фронтенда, что особенно полезно в больших приложениях с плагинами или пользовательскими командами.

Настройка визуального оформления

SvelteKit UI libs предоставляет возможность стилизовать Command палитру через пропсы и CSS-переменные:

  • size="sm|md|lg" – регулирует размеры элементов.
  • theme="light|dark" – переключает цветовую схему.
  • Пользовательские классы через class или class:active для <CommandItem>.
<Command class="bg-gray-800 text-white rounded-lg shadow-lg">
  <CommandInput class="p-2 text-sm" />
  <CommandList class="max-h-60 overflow-auto" />
</Command>

Расширяемость и кастомные рендеры

Каждый <CommandItem> может содержать кастомный шаблон:

<CommandItem on:select={openFile}>
  <span class="font-bold">{cmd.label}</span>
  <small class="text-gray-400">{cmd.shortcut}</small>
</CommandItem>

Таким образом, Command палитра становится гибкой платформой для любых командных интерфейсов: от поиска по меню до управления функционалом приложения через горячие клавиши.

Благодаря реактивной архитектуре Svelte, асинхронной подгрузке и настраиваемым визуальным стилям, Command палитра в SvelteKit превращается в мощный инструмент для повышения продуктивности пользователя и организации навигации.

Оглавление