# Shtab UI Kit > Библиотека Vue 3 компонентов и design tokens Shtab: ~30 компонентов с TypeScript-типами, светлая и тёмная темы через CSS custom properties, пакеты `@shtabapp/ui-kit`, `@shtabapp/ui-kit-primitives`, `@shtabapp/ui-kit-tokens`. --- # Установка Shtab UI Kit публикуется в публичный npm (`registry.npmjs.org`). ## Пакеты | Пакет | Назначение | | ----------------------------- | ----------------------------------------------------- | | `@shtabapp/ui-kit` | Составные runtime-компоненты (`SButton`, `SInput`, …) | | `@shtabapp/ui-kit-tokens` | Design tokens, темы, основа CSS layers | | `@shtabapp/ui-kit-primitives` | Низкоуровневые примитивы (`SIcon`, `SSpinner`, …) | `tokens` и `primitives` — зависимости `@shtabapp/ui-kit`, отдельно их ставить не нужно: весь их JS-API реэкспортируется из `@shtabapp/ui-kit` (включая subpath-входы `@shtabapp/ui-kit/tokens`, `@shtabapp/ui-kit/icon`, `@shtabapp/ui-kit/spinner`, `@shtabapp/ui-kit/progress-bar`, `@shtabapp/ui-kit/skeleton`). ## Установка ```bash pnpm add @shtabapp/ui-kit ``` `@vueuse/core` — peer dependency для `primitives` и `components`; установите его в host-приложении. ## Стили Подключайте стили библиотеки **до** стилей приложения — одним импортом: ```ts import '@shtabapp/ui-kit/styles.css' ``` Агрегат подключает слои в правильном порядке: `tokens → primitives → components → app`. Гранулярные входы (`@shtabapp/ui-kit-tokens/styles.css`, `@shtabapp/ui-kit-primitives/styles.css`, `@shtabapp/ui-kit/components.css`) остаются доступны — порядок слоёв обязателен. Переменные темы объявлены на `:root` и наследуются по всему документу — компоненты темизированы сразу после импорта стилей, отдельная обёртка для этого не нужна. Класс `.s-ui-root` — необязательный хук: оборачивайте в него поддерево, только если переопределяете токены или задаёте scoped-тему для секции (Storybook и docs так делают для превью). > **`SIcon` асинхронный** (SVG загружается лениво) — компонентам с иконками нужен ``-boundary выше по дереву, иначе иконка молча не отрендерится: > > ```vue > > > > ``` ## Точечный импорт ```ts import { SButton } from '@shtabapp/ui-kit/button' import { SIcon } from '@shtabapp/ui-kit/icon' import { setDocumentTheme } from '@shtabapp/ui-kit/tokens' ``` Далее: [Стили и токены](/getting-started/styles-and-tokens), интерактивные примеры — [Storybook](/getting-started/storybook). --- # Стили и токены ## CSS layers Runtime-стили — только plain CSS с фиксированным порядком слоёв: 1. `tokens` 2. `primitives` 3. `components` 4. `app` (приложение-потребитель) Неслойные сбросы в приложении могут перебить стили библиотеки — размещайте product reset в `@layer app`. ## Токены Цвета, отступы, скругления, типографика и тени — из `packages/tokens` как CSS custom properties (`--ui-color-*`, `--ui-space-*`, …). Шрифты в опубликованный пакет `tokens` не входят. Задайте `--s-ui-font-family-sans` или подключите свой `@font-face` (в Storybook и на этом сайте локально используется Inter). ## Контуры компонентов Визуальные обводки — через `outline`, не `border`, чтобы группы (например `SButtonGroup`) могли перекрывать контуры без сдвига вёрстки. ## Темизация Переопределяйте переменные темы на `.s-ui-root` (или в scoped-обёртке). В продуктовом коде не используйте локальные hex/rgba — только CSS-переменные из tokens. --- # Design tokens Пакет `@shtabapp/ui-kit-tokens` задаёт CSS custom properties для цветов, отступов, радиусов, типографики и теней. ## Подключение ```ts import '@shtabapp/ui-kit-tokens/styles.css' ``` ## Структура - Переменные темы: `--s-ui-color-*`, `--s-ui-space-*`, `--s-ui-font-*` - Слои: `@layer tokens` — базовый слой, импортируется первым См. также [Темизация](/foundations/theming) и [Стили и токены](/getting-started/styles-and-tokens). --- # Темизация UI Kit использует CSS-переменные на корневом контейнере `.s-ui-root`. ## Light / dark Переключение темы — через data-атрибут или класс на `.s-ui-root` (см. tokens package). Storybook и docs оборачивают preview в `.s-ui-root`. ## Кастомизация Потребитель может переопределить переменные **после** импорта `@shtabapp/ui-kit-tokens/styles.css` и **до** `app` layer: ```css .s-ui-root { --s-ui-font-family-sans: 'Inter', system-ui, sans-serif; } ``` Шрифты не бандлятся в publishable tokens — host-приложение подключает `@font-face` самостоятельно. --- # CSS layers Порядок слоёв фиксирован: ``` tokens → primitives → components → app ``` ## Импорт ```ts import '@shtabapp/ui-kit/styles.css' ``` Агрегат подключает все слои в правильном порядке. Гранулярно (порядок обязателен): ```ts import '@shtabapp/ui-kit-tokens/styles.css' import '@shtabapp/ui-kit-primitives/styles.css' import '@shtabapp/ui-kit/components.css' ``` Стили приложения — только в `@layer app` или unlayered **после** UI Kit, иначе reset может ломать компоненты (например overlap в `SButtonGroup`). ## Контуры Визуальные обводки runtime-компонентов — через `outline`, не `border`, для стабильной бокс-модели. --- # Типографика Типографические utility-классы и переменные определены в tokens. ## Utility-классы Примеры: `s-ui-typography-body-14-regular`, `s-ui-typography-label-14-medium`. ## Preview --- # Паттерн: формы ## Состав | Компонент | Роль | | ----------------------------------------------------------------------------------------------------- | ------------------ | | [SLabel](/components/s-label) | Подпись поля | | [SInput](/components/s-input) | Однострочный ввод | | [SSelect](/components/s-select) | Выбор из списка | | [STextarea](/components/s-textarea) | Многострочный ввод | | [SCheckbox](/components/s-checkbox) / [SRadio](/components/s-radio) / [SToggle](/components/s-toggle) | Выбор | | [SInlineMessage](/components/s-inline-message) | Подсказки и ошибки | ## Рекомендации - Связывайте label и control через `for` / `id` или встроенный label в `SInput`. - Ошибки валидации — через `errorMessages` на поле или `SInlineMessage` рядом. - Disabled состояние блокирует взаимодействие, но сохраняет значение в форме. ## Пример --- # Паттерн: overlay и dropdown ## Компонент [SDropdown](/components/s-dropdown) — floating overlay с позиционированием (flip, shift, arrow). ## Когда использовать - Меню действий - Popover с произвольным контентом - Tooltip-like панели (с `showOnHover`) ## A11y - Trigger получает `triggerProps` для `aria-expanded` / `aria-controls`. - Закрытие по Escape и click-outside настраивается props. --- # Паттерн: списки ## Компоненты - [SList](/components/s-list) — контейнер (flat, tree, virtual, infinite) - [SListItem](/components/s-list-item) — строка списка ## Режимы SList | Режим | Story | | --------------- | -------- | | Flat + virtual | Usage | | Tree | Tree | | Virtual scroll | Virtual | | Infinite scroll | Infinite | --- # Паттерн: графики Chart-компоненты построены на Chart.js и используют tokens для палитры. | Компонент | Тип | | --------------------------------------------------------- | -------------- | | [SChartLine](/components/s-chart-line) | Line | | [SChartProgress](/components/s-chart-progress) | Progress line | | [SChartStackedArea](/components/s-chart-stacked-area) | Stacked area | | [SChartStackedBar](/components/s-chart-stacked-bar) | Stacked bar | | [SChartHorizontalBar](/components/s-chart-horizontal-bar) | Horizontal bar | | [SChartPie](/components/s-chart-pie) | Pie / donut | | [SChartMultiLine](/components/s-chart-multi-line) | Multi-line | | [SChartBurnup](/components/s-chart-burnup) | Burn-up | ## Skeleton Все chart-компоненты поддерживают skeleton-состояние для загрузки данных. --- # Компоненты --- ## SIcon Примитив иконки с размерами на основе токенов. См. примеры ниже и API-таблицу. Компонент `s-icon` — часть публичного API UI Kit. > **Важно:** `SIcon` — асинхронный компонент (SVG иконки загружается лениво), поэтому в дереве над ним должен быть ``-boundary: > > ```vue > > > > ``` > > Без `Suspense` компонент молча не отрендерится. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | --------------------- | ----------------------- | ------------------------------------------------------------ | ------------ | | `ariaLabel` | string | Текст для скринридеров, если иконка несёт смысл без подписи. | — | | `billing` | boolean | Градиент billing вместо однотонной заливки. | `false` | | `name` _обязательный_ | TSIconName | Имя иконки из набора UI Kit. | | | `size` | TSIconSize | Сторона квадрата в пикселях. | `20` | --- ## SSpinner Индикатор загрузки (спиннер). ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ----------- | -------------------------- | ------------------------------------------------ | ---------------------- | | `ariaLabel` | string | Текст для скринридеров; по умолчанию «Загрузка». | — | | `billing` | boolean | Градиент billing для индикатора. | `false` | | `size` | TSSpinnerSize | Диаметр спиннера в пикселях. | `DEFAULT_SPINNER_SIZE` | --- ## SProgressBar Горизонтальная полоса прогресса. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | --------------- | ------------------------------- | ------------------------------------------------ | ------------ | | `ariaLabel` | string | Подпись для скринридеров о прогрессе. | — | | `color` | ESProgressBarColor | Семантический цвет полосы. | `'main'` | | `indeterminate` | boolean | Неопределённый прогресс (анимация без значения). | `false` | | `size` | ESProgressBarSize | Высота дорожки. | `'medium'` | | `value` | number | Значение 0–100 для детерминированного режима. | `0` | --- ## SSkeleton Скелетон-заглушка для состояний загрузки. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------- | --------------------------------------------------- | ----------------------------------------- | ------------ | | `boilerplate` | boolean | Статичный плейсхолдер без пульсации. | `false` | | `height` | number | string | Высота блока. | — | | `maxHeight` | number | string | Максимальная высота. | — | | `maxWidth` | number | string | Максимальная ширина. | — | | `minHeight` | number | string | Минимальная высота. | — | | `minWidth` | number | string | Минимальная ширина. | — | | `type` | TSSkeletonType | TSSkeletonType[] | Пресет или комбинация пресетов скелетона. | `'image'` | | `width` | number | string | Ширина блока. | — | #### Слоты | Имя | Описание | | --------- | ---------------------------------------------- | | `default` | Контент под оверлеем скелетона (типы chart-\*) | --- ## SSeparator Разделитель для визуального отделения групп контента. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------- | ----------------------------------- | ------------------------ | -------------- | | `orientation` | ESSeparatorOrientation | Направление разделителя. | `'horizontal'` | --- ## SAvatar Аватар пользователя или сущности. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------- | ----------------------------------- | ----------------------------------------------- | ------------ | | `alt` | string | Текст для скринридеров при изображении. | — | | `badge` | ESAvatarBadge | Вариант бейджа в правом нижнем углу. | — | | `bordered` | boolean | Показывает визуальную обводку аватара. | `true` | | `color` | TSAvatarColorValue | Фоновый цвет или `#hex` для инициалов. | `'teal'` | | `counter` | number | Счётчик в правом верхнем углу. | — | | `disabled` | boolean | Приглушает аватар. | `false` | | `icon` | TSIconName | Иконка из набора `SIcon`, если нет изображения. | — | | `iconBackground` | ESAvatarIconBackground | Фон для аватара с иконкой. | `'neutral'` | | `initialLength` | number | Число символов инициалов из `name`. | `1` | | `name` | string | Имя для инициалов, если нет `src`. | — | | `shape` | ESAvatarShape | Круг или квадрат с скруглением. | `'circle'` | | `showName` | boolean | Показывает подпись имени под аватаром. | `true` | | `size` | ESAvatarSize | Размер аватара. | `'size-40'` | | `src` | string | URL изображения. | — | --- ## SAvatarGroup Группа аватаров со смещением (стек). ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------ | ------------------------------ | -------------------------------------------- | ------------ | | `disabled` | boolean | Отключает взаимодействие с группой. | `false` | | `maxVisible` | number | Максимум видимых аватаров; остальные в «+N». | — | | `size` | ESAvatarGroupSize | Общий size для дочерних `SAvatar`. | `'small'` | #### Слоты | Имя | Описание | | --------- | ------------------------- | | `default` | Дочерние аватары в стопке | --- ## SButton Кнопка действия для форм и панелей инструментов. Поддерживает `appearance`, `variant`, `size`, иконки, состояние загрузки и переход по `link`. `SButton` — основной action-контрол. Используйте `appearance` и `variant` для семантики, `size` для масштаба. - Для навигации передайте `link` — компонент рендерит `` или `router-link`, если Vue Router подключён в host-приложении. - Для icon-only кнопок задайте prop `icon` — слот `default` скрывается. - `loading` блокирует клики и показывает спиннер поверх контента. ```vue Save ``` ### С иконками ```vue Create ``` ### Загрузка ```vue Saving… ``` ### Disabled ```vue Unavailable ``` ### Outlined danger ```vue Delete ``` ### Icon only ```vue ``` ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------ | ------------------------------------------- | --------------------------------------------------------------------------------- | ------------ | | `appearance` | EButtonAppearance | Визуальный вес поверхности кнопки. | `major` | | `badgeColor` | ESBadgeColor | Цветовая роль бейджа-счётчика или индикатора. | — | | `counter` | number | Число во внешнем бейдже в правом верхнем углу. | — | | `disabled` | boolean | Отключает взаимодействие и приглушает контрол. | `false` | | `icon` | TSIconName | Одна иконка по центру; при задании скрывает содержимое слота подписи. | — | | `iconLeft` | TSIconName | Иконка перед подписью. | — | | `iconRight` | TSIconName | Иконка после подписи. | — | | `indicator` | boolean | Показывает внутренний индикатор в правом верхнем углу, если не передан `counter`. | `false` | | `loading` | boolean | Показывает спиннер поверх и блокирует клики. | `false` | | `size` | EButtonSize | Масштаб высоты и типографики. | `medium` | | `value` | TSButtonValue | Значение для форм или групп с общим выбором. | — | | `variant` | EButtonVariant | Семантическая цветовая роль. | `main` | | `link` | string | RouteLocationRaw | Рендер как ссылка (`a` или `router-link`), если задано. | — | | `exact` | boolean | Точное совпадение маршрута для router-link (path и query). | `false` | | `replace` | boolean | Замена текущей записи в history при навигации. | `false` | #### Слоты | Имя | Описание | | --------- | -------------- | | `default` | Подпись кнопки | --- ## SButtonGroup Группа кнопок с общим выбором (selection). `SButtonGroup` объединяет несколько `SButton` с общим `appearance`, `variant` и `size`. В режиме selection группа управляет единственным выбранным значением через `v-model`. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ---------------------------------- | ------------------------------------------------- | -------------- | | `mode` | ESelectionMode | Режим выбора: один, несколько или без выбора. | `'single'` | | `mandatory` | boolean | Запрещает снятие выбора в single-режиме. | `false` | | `orientation` | ESelectionOrientation | Горизонтальная или вертикальная раскладка кнопок. | `'horizontal'` | | `layout` | EButtonGroupLayout | Склеенные кнопки или с промежутком. | `'attached'` | | `loop` | boolean | Циклическая навигация стрелками по клавиатуре. | `true` | | `disabled` | boolean | Отключает всю группу. | `false` | | `appearance` | EButtonAppearance | Общий appearance для дочерних `SButton`. | — | | `variant` | EButtonVariant | Общий variant для дочерних `SButton`. | — | | `size` | EButtonSize | Общий size для дочерних `SButton`. | — | | `modelValue / v-model` | TModelValue | Двустороннее значение компонента (`v-model`). | — | #### Слоты | Имя | Описание | | --------- | -------------------------------- | | `default` | Дочерние `SButton` группы выбора | --- ## SCard Карточка-контейнер с заголовком и слотами контента. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------------------------- | ------------------------------------------- | ---------------------------------------------------------- | ------------ | | `layout` | ESCardLayout | Раскладка карточки или строки списка. | `'card'` | | `title` | string | Заголовок; для своей разметки — слот `title`. | — | | `subtitle` | string | Подзаголовок; для своей разметки — слот `subtitle`. | — | | `icon` | TSIconName | Иконка слева; для своей разметки — слот `icon`. | `'page'` | | `selectable` | boolean | Показывает чекбокс выбора. | `false` | | `disabled` | boolean | Отключает взаимодействие. | `false` | | `skeleton` | boolean | Режим скелетона вместо контента. | `false` | | `link` | string | RouteLocationRaw | Рендер как ссылка (`a` или `router-link`), если задано. | — | | `exact` | boolean | Точное совпадение маршрута для router-link (path и query). | `false` | | `replace` | boolean | Замена текущей записи в history при навигации. | `false` | | `modelValue / v-model:selected` | boolean | Двустороннее значение для `v-model:selected`. | `false` | #### События | Имя | Описание | Payload | | --------- | ---------------------------- | --------------- | | `click` | Клик по карточке. | `MouseEvent` | | `keydown` | Нажатие клавиши на карточке. | `KeyboardEvent` | #### Слоты | Имя | Описание | | -------------------- | ------------------------------------------------- | | `icon` | Иконка слева; по умолчанию `SIcon` из prop `icon` | | `title` | Заголовок карточки | | `subtitle` | Подзаголовок карточки | | `meta` | Дополнительный блок справа от текста | | `selected-indicator` | Индикатор выбора; по умолчанию `SCheckbox` | --- ## SSegmentControl Сегментированный переключатель с единственным выбором. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ----------------------------------- | -------------------------------------------------------------------------------------------- | ------------ | | `items` _обязательный_ | ISSegmentControlItem[] | Набор сегментов. | | | `size` | EButtonSize | Размер сегментов: те же отступы, gap, типографика и иконки, что у `SButton` (`EButtonSize`). | `'medium'` | | `disabled` | boolean | Отключает всю группу. | `false` | | `mandatory` | boolean | Запрещает снятие выбора. | `true` | | `name` | string | Имя нативной radio-группы. | — | | `modelValue / v-model` | TSSegmentControlValue | Двустороннее значение компонента (`v-model`). | — | #### События | Имя | Описание | Payload | | -------- | ------------------------------------------ | ----------------------- | | `change` | Срабатывает при смене выбранного сегмента. | `TSSegmentControlValue` | --- ## STab Элемент вкладки для использования внутри `STabs`. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ----------------------- | ------------------------------------------- | --------------------------------------------------------------- | ------------ | | `appearance` | ESTabAppearance | Визуальный стиль вкладки. | — | | `size` | ESTabSize | Размер вкладки. | — | | `disabled` | boolean | Отключает взаимодействие. | `false` | | `selected` | boolean | Визуально выделенное состояние (в группе `STabs`). | `false` | | `icon` | TSIconName | Иконка слева; для своей разметки — слот `icon`. | — | | `iconOnly` | boolean | Только иконка без текста. | `false` | | `billing` | boolean | Показывает billing-индикатор. | `false` | | `placeholder` | boolean | Режим placeholder: caret перед текстом или текст с caret после. | `false` | | `placeholderText` | string | Текст placeholder для поля переименования. | — | | `editableStaticDisplay` | boolean | Статический вид rename (текст + caret) для Storybook/QA. | `false` | | `iconBadge` | TSIconName | Маленькая иконка-бейдж на основной иконке. | — | | `value` | TSButtonValue | Значение вкладки в группе `STabs`. | — | | `link` | string | RouteLocationRaw | Рендер как ссылка (`a` или `router-link`), если задано. | — | | `exact` | boolean | Точное совпадение маршрута для router-link (path и query). | `false` | | `replace` | boolean | Замена текущей записи в history при навигации. | `false` | | `modelValue / v-model` | string | Двустороннее значение компонента (`v-model`). | `''` | #### События | Имя | Описание | Payload | | -------- | ------------------------------------- | ------------ | | `click` | Клик по вкладке. | `MouseEvent` | | `rename` | Подтверждение переименования вкладки. | `string` | #### Слоты | Имя | Описание | | --------- | --------------------------------------------------- | | `icon` | Иконка вкладки; по умолчанию `SIcon` из prop `icon` | | `default` | Текст вкладки (если не используется v-model rename) | | `right` | Контент справа от подписи (caret, действия) | --- ## STabs Список вкладок: статические элементы или интеграция с роутером. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ---------------------------- | -------------------------------------------------- | ------------ | | `appearance` | ESTabAppearance | Общий appearance для дочерних `STab`. | `'primary'` | | `size` | ESTabSize | Общий size для дочерних `STab`. | `'large'` | | `disabled` | boolean | Отключает всю группу вкладок. | `false` | | `mandatory` | boolean | Запрещает снятие выбора. | `true` | | `addable` | boolean | Показывает кнопку добавления вкладки (слот `add`). | `false` | | `loop` | boolean | Циклическая навигация стрелками по клавиатуре. | `true` | | `modelValue / v-model` | TSButtonValue | Двустороннее значение компонента (`v-model`). | — | #### События | Имя | Описание | Payload | | ----- | ----------------------------------- | ------- | | `add` | Запрос на добавление новой вкладки. | — | #### Слоты | Имя | Описание | | --------- | ---------------------------------------------------------------- | | `default` | Дочерние `STab` | | `add` | Кнопка добавления вкладки; по умолчанию `SButton` с иконкой plus | --- ## STag Компактная метка (тег). ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ------------------------------------------- | ---------------------------------------------------------- | -------------- | | `color` | TSTagColorValue | Палитра или кастомный цвет (`#hex` / CSS-переменная). | `'red-orange'` | | `size` | ESTagSize | Размер тега. | `'medium'` | | `short` | boolean | Компактная высота без лишних отступов. | `false` | | `closable` | boolean | Показывает кнопку закрытия. | `false` | | `disabled` | boolean | Отключает взаимодействие. | `false` | | `selected` | boolean | Визуально выделенное состояние. | `false` | | `link` | string | RouteLocationRaw | Рендер как ссылка (`a` или `router-link`), если задано. | — | | `exact` | boolean | Точное совпадение маршрута для router-link (path и query). | `false` | | `replace` | boolean | Замена текущей записи в history при навигации. | `false` | | `modelValue / v-model` | string | Двустороннее значение компонента (`v-model`). | `''` | #### События | Имя | Описание | Payload | | ------- | ---------------------------------- | ------- | | `close` | Запрос на закрытие removable-тега. | — | --- ## STagGroup Группа тегов с обработкой переполнения. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------ | ---------------------- | ------------------------------------------------------- | ------------ | | `maxVisible` | number | Максимум видимых тегов; остальные сворачиваются в «+N». | — | | `size` | ESTagSize | Общий size для дочерних `STag`. | `'small'` | | `short` | boolean | Компактная высота дочерних тегов. | `true` | #### Слоты | Имя | Описание | | --------- | ------------------------ | | `default` | Дочерние `STag` в группе | --- ## SChip Чип: статичный или с возможностью удаления. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------- | ------------------------ | -------------------------- | ------------ | | `color` | ESChipColor | Цветовая роль чипа. | `'blue'` | | `disabled` | boolean | Отключает взаимодействие. | `false` | | `size` | ESChipSize | Высота и типографика чипа. | `'size-32'` | #### Слоты | Имя | Описание | | --------- | ---------------------------------------------------- | | `icon` | Ведущая иконка; scope: `billing`, `disabled`, `size` | | `prefix` | Контент перед подписью; scope: `disabled`, `size` | | `default` | Подпись чипа | | `actions` | Кнопки справа; scope: `billing`, `disabled` | --- ## SColorPalette Палитра цветов: single-select row или grid из `SColorSwatch`. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | --------------------------------- | ----------------------------------------------------------- | ------------ | | `layout` | ESColorPaletteLayout | Раскладка swatch: одна строка или перенос (Figma Palette). | `'row'` | | `disabled` | boolean | Отключает выбор всех ячеек. | `false` | | `colors` | TColorValue[] | Список значений палитры; default — 11 accent primary из DS. | — | | `size` | ESColorSwatchSize | Размер ячеек. | `'size-40'` | | `modelValue / v-model` | TColorValue | Двустороннее значение компонента (`v-model`). | — | #### События | Имя | Описание | Payload | | -------- | ------------------------------------------------------------- | ------------- | | `select` | Дополнительно к v-model — для добавления в recent в продукте. | `TColorValue` | #### Слоты | Имя | Описание | | -------- | --------------------------------------------------------------- | | `append` | Контент после swatch в одной flex-строке (например кнопка «+»). | --- ## SColorPicker Выбор цвета: рекомендованная палитра, recent и custom editor через «+». ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | -------------------------- | ------------------------------------------------------------------------ | ------------ | | `disabled` | boolean | Отключает выбор палитр и custom editor. | `false` | | `recommendedColors` | TColorValue[] | Override DS-матрицы рекомендованных цветов. | — | | `recentColors` | TColorValue[] | Controlled recent list; хранение — снаружи. В UI отображаются первые 17. | `[]` | | `modelValue / v-model` | TColorValue | Двустороннее значение компонента (`v-model`). | — | #### События | Имя | Описание | Payload | | --------------------- | -------- | ------------- | | `select` | — | `TColorValue` | | `customEditorOpen` | — | — | | `customEditorClose` | — | — | | `formatDropdownOpen` | — | — | | `formatDropdownClose` | — | — | --- ## SCheckbox Флажок (checkbox). ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | --------------------------------- | --------------------------------------------- | --------------- | | `color` | ESCheckboxColor | Цветовая роль чекбокса. | `'main'` | | `disabled` | boolean | Отключает взаимодействие. | `false` | | `indeterminate` | boolean | Неопределённое состояние (минус). | `false` | | `name` | string | Имя нативного поля формы. | — | | `size` | ESCheckboxSize | Размер квадрата и отступов. | `'extra-small'` | | `value` | string | number | Значение для групп и форм. | — | | `modelValue / v-model` | boolean | Двустороннее значение компонента (`v-model`). | `false` | #### События | Имя | Описание | Payload | | -------- | -------------------------------------------- | --------- | | `change` | Срабатывает при изменении состояния checked. | `boolean` | --- ## SRadio Переключатель (radio). ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ---------------------------------- | --------------------------------------------- | ------------ | | `disabled` | boolean | Отключает взаимодействие. | `false` | | `labelPlacement` | ESRadioLabelPlacement | Положение подписи относительно круга. | `'left'` | | `name` | string | Имя нативной radio-группы. | — | | `value` _обязательный_ | TSRadioValue | Значение этой кнопки в группе. | | | `modelValue / v-model` | TSRadioValue | Двустороннее значение компонента (`v-model`). | — | #### События | Имя | Описание | Payload | | -------- | ----------------------------------------------- | -------------- | | `change` | Срабатывает при выборе значения в группе radio. | `TSRadioValue` | #### Слоты | Имя | Описание | | ------------- | ---------------------------- | | `default` | Основная подпись radio | | `description` | Вторичный текст под подписью | --- ## SToggle Переключатель булева значения (switch). ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ------------------------- | ---------------------------------------------------- | ------------ | | `disabled` | boolean | Отключает взаимодействие и приглушает переключатель. | `false` | | `name` | string | Имя нативного поля формы. | — | | `size` | ESToggleSize | Размер дорожки и ползунка. | `'large'` | | `modelValue / v-model` | boolean | Двустороннее значение компонента (`v-model`). | `false` | #### События | Имя | Описание | Payload | | -------- | ------------------------------------------- | --------- | | `change` | Срабатывает при изменении состояния switch. | `boolean` | --- ## SBadge Бейдж: число или точка поверх элемента. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ----------- | ----------------------------- | ---------------------------------------------------------------------------- | ------------ | | `anchored` | boolean | Абсолютное позиционирование внутри relative-предка без default slot. | `false` | | `color` | ESBadgeColor | Цветовая роль бейджа. | `'danger'` | | `value` | number | Число в бейдже; при `max` показывается «N+». | — | | `max` | number | Верхняя граница отображаемого числа. | — | | `label` | string | Текстовая подпись вместо числа. | — | | `icon` | TSIconName | Иконка внутри круглого бейджа. Если передана, счётчик не отображается. | — | | `size` | ESBadgeSize | Размер бейджа; для счётчика влияет на минимальную высоту при явной передаче. | `'small'` | | `placement` | ESBadgePlacement | Угол привязки к обёртке. | `'top-end'` | | `offsetX` | number | Смещение по горизонтали от угла. | `0` | | `offsetY` | number | Смещение по вертикали от угла. | `0` | #### Слоты | Имя | Описание | | --------- | ------------------------------------------------ | | `default` | Оборачиваемый элемент, к которому крепится бейдж | --- ## SInput Текстовое поле с подписью, иконками и сообщениями подсказки/ошибки. `SInput` — текстовое поле формы с label, иконками и inline-сообщениями. - Значение — через `v-model` / `modelValue`. - `helpMessages` и `errorMessages` отображаются под полем через встроенный рендер `SInlineMessage`. - `customize` управляет расположением label относительно поля (`horizontal` / `vertical`). - Для составных форм используйте вместе с [`SLabel`](/components/s-label) и [`STextarea`](/components/s-textarea) — см. блок «Связанные» выше. ```vue ``` ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ------------------------------ | -------------------------------------------------------------------------------------------- | ------------ | | `label` | string | Текст подписи; для своей разметки используйте слот `label`. | — | | `labelProps` | TSLabelFieldProps | Пропсы, передаваемые во внутренний `SLabel`. | — | | `placeholder` | string | Placeholder нативного input. | — | | `helpMessages` | TSInputMessages | Подсказка под полем (строка или массив). | — | | `errorMessages` | TSInputMessages | Текст ошибки под полем (строка или массив). | — | | `bordered` | boolean | Рисует стандартный контур поля. | `true` | | `disabled` | boolean | Отключает редактирование и взаимодействие. | `false` | | `readonly` | boolean | Только чтение без стиля disabled. | `false` | | `clearable` | boolean | Кнопка очистки при непустом значении. | `false` | | `hasValue` | boolean | Заполненность поля для `clearable`, если `#control` переопределён (иначе — длина `v-model`). | — | | `focused` | boolean | Визуальное состояние фокуса (например, открытый dropdown у select). | `false` | | `iconLeft` | TSIconName | Ведущая иконка в строке поля. | — | | `iconRight` | TSIconName | Замыкающая иконка как bare-кнопка действия. | — | | `customize` | ESInputCustomize | Раскладка слотов prepend/customize. | `'none'` | | `name` | string | Атрибут `name` нативного input. | — | | `type` | string | Атрибут `type` (например `text`, `password`). | `'text'` | | `id` | string | Атрибут `id`; генерируется автоматически, если не задан. | — | | `autocomplete` | string | Атрибут `autocomplete`. | — | | `modelValue / v-model` | string | Двустороннее значение компонента (`v-model`). | `''` | #### События | Имя | Описание | Payload | | ------- | ------------------------------------------------- | ------------ | | `clear` | Срабатывает после очистки значения кнопкой clear. | — | | `focus` | Поле получило фокус. | `FocusEvent` | | `blur` | Поле потеряло фокус. | `FocusEvent` | #### Слоты | Имя | Описание | | --------- | ------------------------------------------------------------------- | | `label` | Подпись поля; по умолчанию текст из prop `label` | | `prepend` | Блок над строкой ввода (вертикальный customize); scope: `disabled` | | `prefix` | Префикс в строке; по умолчанию `iconLeft`; scope: `disabled` | | `control` | Область ввода; по умолчанию нативный `input`; scope: `disabled` | | `action` | Действие справа; по умолчанию кнопка `iconRight`; scope: `disabled` | | `message` | Сообщения под полем; по умолчанию help/error из props | --- ## SInlineInput Inline contenteditable-поле с placeholder, multiline и сообщениями подсказки/ошибки. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ------------------------------------ | --------------------------------------------------------------------------------- | ------------ | | `label` | string | Текст подписи; для своей разметки используйте слот `label`. | — | | `labelProps` | TSLabelFieldProps | Пропсы, передаваемые во внутренний `SLabel`. | — | | `id` | string | Атрибут `id` contenteditable-элемента; генерируется автоматически, если не задан. | — | | `appearance` | ESInlineInputAppearance | Визуальный вес поверхности поля. | `filled` | | `tag` | string | Тег contenteditable элемента | `'div'` | | `multiline` | boolean | Многострочный режим contenteditable. | `false` | | `maxlength` | number | Максимальная длина | — | | `placeholder` | string | Placeholder нативного input. | `''` | | `helpMessages` | TSInlineInputMessages | Подсказка под полем (строка или массив). | — | | `errorMessages` | TSInlineInputMessages | Текст ошибки под полем (строка или массив). | — | | `disabled` | boolean | Отключает редактирование и взаимодействие. | `false` | | `readonly` | boolean | Только чтение без стиля disabled. | `false` | | `spellcheck` | boolean | Нативная проверка орфографии браузера. | `false` | | `modelValue / v-model` | string | Двустороннее значение компонента (`v-model`). | `''` | #### События | Имя | Описание | Payload | | ------ | -------- | ------- | | `blur` | — | — | #### Слоты | Имя | Описание | | --------- | -------- | | `label` | | | `default` | | | `message` | | --- ## STextarea Многострочное текстовое поле. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ------------------------------- | -------------------------------------------------------- | ------------ | | `label` | string | Текст подписи над полем. | — | | `labelProps` | TSLabelFieldProps | Пропсы, передаваемые во внутренний `SLabel`. | — | | `placeholder` | string | Placeholder нативного textarea. | — | | `helpMessages` | TSTextareaMessages | Подсказка под полем (строка или массив). | — | | `errorMessages` | TSTextareaMessages | Текст ошибки под полем (строка или массив). | — | | `bordered` | boolean | Рисует стандартный контур поля. | `true` | | `disabled` | boolean | Отключает редактирование и взаимодействие. | `false` | | `readonly` | boolean | Только чтение без стиля disabled. | `false` | | `maxlength` | number | Ограничение длины ввода. | — | | `counter` | boolean | Счётчик символов под полем. | — | | `resizable` | boolean | Разрешает изменение высоты перетаскиванием. | `true` | | `rows` | number | Число видимых строк. | — | | `name` | string | Атрибут `name` нативного textarea. | — | | `id` | string | Атрибут `id`; генерируется автоматически, если не задан. | — | | `autocomplete` | string | Атрибут `autocomplete`. | — | | `modelValue / v-model` | string | Двустороннее значение компонента (`v-model`). | `''` | #### События | Имя | Описание | Payload | | ------- | -------------------- | ------------ | | `focus` | Поле получило фокус. | `FocusEvent` | | `blur` | Поле потеряло фокус. | `FocusEvent` | --- ## SInlineMessage Строка подсказки или сообщения валидации под полем. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------------------ | -------------------------------------------- | -------------------------------------- | ------------ | | `message` _обязательный_ | string | Текст сообщения под полем. | | | `validationStatus` | ESInlineMessageValidationStatus | Статус валидации (обычный или ошибка). | `'default'` | --- ## SBanner Статичный inline-баннер внутри контейнера с контентом. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ------------------------------------- | --------------------------------------- | ------------- | | `type` | ENotificationType | Семантический тип оформления. | `info-accent` | | `layout` | ENotificationLayout | Горизонтальный или вертикальный layout. | `horizontal` | | `leftside` | ENotificationLeftside | Иконка или аватар слева. | `icon` | | `title` _обязательный_ | string | Заголовок. | | | `description` | string | Текст описания. | — | | `linkText` | string | Текст ссылки под описанием. | — | | `primaryButtonText` | string | Подпись основной кнопки. | — | | `secondaryButtonText` | string | Подпись вторичной кнопки. | — | | `showPrimaryButton` | boolean | Показывать блок кнопок. | `false` | | `closable` | boolean | Показывать кнопку закрытия. | `true` | | `closeAriaLabel` | string | Accessible name для кнопки закрытия. | `''` | | `icon` | TSIconName | Переопределение иконки типа. | — | | `avatar` | INotificationAvatarProps | Данные аватара при `leftside="avatar"`. | — | | `maxWidth` | string | number | Ограничение ширины. | — | #### События | Имя | Описание | Payload | | ----------------- | --------------------------- | ------- | | `close` | Пользователь закрыл баннер. | — | | `linkClick` | Клик по ссылке. | — | | `primaryAction` | Клик по основной кнопке. | — | | `secondaryAction` | Клик по вторичной кнопке. | — | #### Слоты | Имя | Описание | | ------------- | ----------------- | | `title` | Заголовок баннера | | `description` | Текст описания | --- ## SToast Presentational toast с обводкой и тенью для overlay. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ---------------------- | ------------------------------------- | --------------------------------------- | ------------- | | `type` | ENotificationType | Семантический тип оформления. | `info-accent` | | `layout` | ENotificationLayout | Горизонтальный или вертикальный layout. | `horizontal` | | `leftside` | ENotificationLeftside | Иконка или аватар слева. | `icon` | | `title` _обязательный_ | string | Заголовок. | | | `description` | string | Текст описания. | — | | `linkText` | string | Текст ссылки под описанием. | — | | `primaryButtonText` | string | Подпись основной кнопки. | — | | `secondaryButtonText` | string | Подпись вторичной кнопки. | — | | `showPrimaryButton` | boolean | Показывать блок кнопок. | `false` | | `closable` | boolean | Показывать кнопку закрытия. | `true` | | `closeAriaLabel` | string | Accessible name для кнопки закрытия. | `''` | | `icon` | TSIconName | Переопределение иконки типа. | — | | `avatar` | INotificationAvatarProps | Данные аватара при `leftside="avatar"`. | — | | `width` | string | number | Ширина toast. | `360` | #### События | Имя | Описание | Payload | | ----------------- | -------------------------- | ------- | | `close` | Пользователь закрыл toast. | — | | `linkClick` | Клик по ссылке. | — | | `primaryAction` | Клик по основной кнопке. | — | | `secondaryAction` | Клик по вторичной кнопке. | — | #### Слоты | Имя | Описание | | ------------- | --------------- | | `title` | Заголовок toast | | `description` | Текст описания | --- ## SToastProvider Overlay-провайдер toast с очередью и auto-dismiss. ### API #### Слоты | Имя | Описание | | ------- | ----------------------------------------------- | | `toast` | Кастомный рендер toast из очереди; scope: toast | --- ## SLabel Подпись поля формы. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ----------- | --------------------------- | ------------------------------------------------------ | ------------ | | `text` | string | Текст подписи; для своей разметки — слот по умолчанию. | — | | `size` | ESLabelSize | Размер типографики. | `'medium'` | | `variant` | ESLabelVariant | Семантический цвет текста. | `'neutral'` | | `required` | boolean | Показывает маркер обязательного поля. | `false` | | `iconLeft` | TSIconName | Иконка слева от текста. | — | | `iconRight` | TSIconName | Иконка справа от текста. | — | | `htmlFor` | string | Связь с полем через `for`. | — | #### Слоты | Имя | Описание | | --------- | ------------------ | | `default` | Текст подписи поля | --- ## SListItem Строка списка для `SList`. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | --------------- | ------------------------------ | --------------------------------------------------------------------------- | ------------ | | `depth` | number | Уровень вложенности для отступа слева. | `0` | | `expandable` | boolean | Показывает кнопку раскрытия дерева. | `false` | | `expanded` | boolean | Раскрыта ли ветка. | `false` | | `variant` | ESListItemVariant | Семантический цвет строки. | `'neutral'` | | `tiny` | boolean | Компактная высота строки. | `false` | | `selected` | boolean | Выбранная строка. | `false` | | `active` | boolean | Активная строка (фокус/навигация). | `false` | | `disabled` | boolean | Отключает взаимодействие. | `false` | | `readonly` | boolean | Только чтение без стиля disabled. | `false` | | `loading` | boolean | Скелетон вместо контента. | `false` | | `title` | string | Заголовок; для своей разметки — слот `title`. | — | | `subtitle` | string | Подзаголовок; для своей разметки — слот `subtitle`. | — | | `iconLeft` | TSIconName | Иконка слева; для своей разметки — слот `icon-left`. | — | | `rowKey` | string | Стабильный ключ строки. | — | | `revealRight` | boolean | Показывать правую колонку при наведении. | — | | `expandOnClick` | boolean | Клик по строке сворачивает/разворачивает ветку (работает при `expandable`). | — | #### События | Имя | Описание | Payload | | -------------- | ------------------------------------------------------- | --------------- | | `click` | Клик по строке списка. | `MouseEvent` | | `toggleExpand` | Переключение состояния expand/collapse у tree-элемента. | — | | `keydown` | Нажатие клавиши на строке. | `KeyboardEvent` | #### Слоты | Имя | Описание | | -------------- | ------------------------------------------------------------- | | `level` | Колонка отступа/кнопки раскрытия дерева | | `icon-left` | Иконка слева; по умолчанию `SIcon` из prop `iconLeft` | | `title` | Заголовок строки | | `subtitle` | Подзаголовок строки | | `title-action` | Действие в зоне заголовка; scope: `disabled`, `readonly` | | `trailing` | Элементы перед правой колонкой; scope: `disabled`, `readonly` | | `right` | Основная правая колонка; scope: `disabled`, `readonly` | | `action-end` | Крайняя правая зона; scope: `disabled`, `readonly` | --- ## SList Список: статический, дерево, виртуализация и infinite scroll. `SList` отображает коллекцию строк и поддерживает несколько режимов: плоский список, дерево, виртуализацию длинных списков и подгрузку при скролле. Строки оформляйте через `SListItem`. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------ | | `items` | TItem[] | Плоский или древовидный набор элементов. | — | | `itemKey` | TListItemKeyResolver<TItem> | Ключ строки для `v-for` и выбора. | `'id'` | | `childrenKey` | keyof TItem & string | Поле с дочерними элементами для дерева. | `'children'` | | `titleKey` | keyof TItem & string | Поле заголовка строки. | `'title'` | | `subtitleKey` | keyof TItem & string | Поле подзаголовка строки. | `'subtitle'` | | `iconLeftKey` | keyof TItem & string | Поле имени иконки слева. | `'iconLeft'` | | `disabledKey` | keyof TItem & string | Поле флага disabled. | `'disabled'` | | `itemProps` | (…) => … | Дополнительные пропсы для `SListItem` по элементу. | — | | `selectionMode` | ESelectionMode | Режим выбора строк. | `'none'` | | `mandatory` | boolean | Запрещает снятие выбора в single-режиме. | `false` | | `virtual` | boolean | Виртуальный скролл для длинных списков. | — | | `gap` | ESListGap | Вертикальный промежуток между строками. | `DEFAULT_LIST_GAP` | | `estimateItemSize` | number | Оценка высоты строки для виртуализации. | `36` | | `overscan` | number | Число строк вне viewport, рендеримых заранее. | `5` | | `endReachedDistance` | number | Расстояние до низа списка для события `end-reached`. | `0` | | `canLoadMore` | (…) => … | Предикат: можно ли запрашивать следующую порцию данных. | — | | `height` | number | string | Высота контейнера списка. | `320` | | `maxHeight` | number | string | Максимальная высота скролла при `height: auto`. | — | | `revealRight` | boolean | Показывать правую колонку действий при наведении. | `false` | | `expandOnClick` | boolean | Клик по строке с потомками сворачивает/разворачивает ветку. | `false` | | `hasMoreChildrenKey` | keyof TItem & string | Поле-флаг «у раскрытого узла есть ещё дети для догрузки»; включает синтетическую строку «Показать ещё». | — | | `loadingMoreChildrenKeys` | TItem[] | Ключи узлов, для которых сейчас идёт догрузка детей (в их строке «Показать ещё» — спиннер). | `[]` | | `modelValue / v-model:expanded` | string[] | Двустороннее значение для `v-model:expanded`. | `[]` | | `modelValue / v-model` | string | undefined | Двустороннее значение компонента (`v-model`). | — | | `modelValue / v-model:selected` | string | string[] | undefined | Двустороннее значение для `v-model:selected`. | — | #### События | Имя | Описание | Payload | | ------------------ | ---------------------------------------------------------------- | ------------------------------ | | `endReached` | Достигнут конец списка при прокрутке или виртуализации. | `{ direction: 'bottom' }` | | `loadMoreChildren` | Запрос догрузки детей конкретного узла из строки «Показать ещё». | `{ key: string; item: TItem }` | #### Слоты | Имя | Описание | | ---------- | ---------------------------------------------------------- | | `loadMore` | Строка «Показать ещё» для догрузки детей узла | | `item` | Кастомная строка; scope — данные строки и `toggleExpanded` | | `default` | Произвольные `SListItem` без prop `items` | --- ## SSelect Combobox: выбор из списка с триггером SInput, поиском и multiple. `SSelect` — combobox для выбора из списка: триггер на базе [`SInput`](/components/s-input), панель — [`SDropdown`](/components/s-dropdown) + [`SList`](/components/s-list). - Значение — `v-model` (примитив поля `itemValue` или объект опции при `returnObject`). - `multiple` — массив значений; отображение выбора в триггере через слот `#selection` (по умолчанию текст через запятую, для тегов — `STag`). - `searchable="input"` — фильтра в поле триггера; `searchable="content"` — отдельное поле поиска в шапке панели. - `closeOnSelect` — закрывать панель после выбора в single (по умолчанию `true`). - `closableOptions` — крестик справа у выбранных строк в списке (multiple). - Кастомная строка — слот `#option` (scope как у `SList` `#item`). ```vue ``` ```vue ``` ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------------------ | ------------------------------------ | --------------------------------------------------------------------- | ------------ | | `options` _обязательный_ | TItem[] | Набор опций выпадающего списка. | | | `itemValue` | keyof TItem & string | Поле значения для `v-model` и фильтрации; по умолчанию `value`. | `'value'` | | `itemTitle` | keyof TItem & string | Поле подписи в списке и на триггере. | `'label'` | | `itemSubtitle` | keyof TItem & string | Поле подзаголовка строки списка. | `'subtitle'` | | `itemId` | keyof TItem & string | Поле ключа строки для `SList`; по умолчанию совпадает с `itemValue`. | — | | `itemDisabled` | keyof TItem & string | Поле флага `disabled`. | `'disabled'` | | `itemIconLeft` | keyof TItem & string | Поле имени иконки слева. | `'iconLeft'` | | `multiple` | boolean | Разрешает выбор нескольких значений. | `false` | | `returnObject` | boolean & TReturnObject | В `v-model` отдавать объект опции целиком, а не значение `itemValue`. | Тип `boolean & TReturnObject` (а не просто `TReturnObject`) обязателен: это и делает значение источником вывода дженерика `TReturnObject`, и сохраняет рантайм-регистрацию пропа как `Boolean` (иначе Vue выведет `type: null`). | `false` | | `clearable` | boolean | Кнопка очистки выбранных значений. | `false` | | `closableOptions` | boolean | Крестик справа в выбранных строках списка для снятия выбора. | `false` | | `searchable` | ESSelectSearchable | false | Фильтрация: в поле (`input`) или в шапке панели (`content`). | `false` | | `closeOnSelect` | boolean | Закрывает панель после выбора в single-режиме. | `true` | | `listHeight` | number | string | Максимальная высота списка опций; при малом числе пунктов подстраивается под контент. | `320` | | `searchPlaceholder` | string | Плейсхолдер поля поиска в панели при `searchable="content"`. | `'Search'` | | `filterOption` | (…) => … | Пользовательский предикат фильтрации опций. | — | | `fitViewport` | boolean | Ограничивать панель пересечением overflow-предков reference. Отключите (`false`) внутри контейнеров с `overflow: hidden`, если панель не появляется. | `true` | | `modelValue / v-model:searchQuery` | string | Двустороннее значение для `v-model:searchQuery`. | `''` | #### События | Имя | Описание | Payload | | ------- | ------------------------------------------------- | ------------ | | `clear` | Срабатывает после очистки значения кнопкой clear. | — | | `focus` | Триггер получил фокус. | `FocusEvent` | | `blur` | Триггер потерял фокус. | `FocusEvent` | | `open` | Панель открылась. | — | | `close` | Панель закрылась. | — | #### Слоты | Имя | Описание | | -------------------------------------------------------------------------------------- | -------------------------------------------------------- | | `option` | Кастомная строка; scope — `SList` (`item`, `key`, …) | | `empty` | Состояние пустой выдачи после фильтрации | | `panel-footer` | Дополнительный блок под списком опций | | `label` | | | `prefix` | | | `prepend` | | | `selection` | Отображение выбранных значений в multiple (теги, chips). | | При `searchable="input"` поле фильтрации рендерится в control после содержимого слота. | | `value-suffix` | | | `message` | | --- ## SDropdown Выпадающая панель (floating overlay) с позиционированием относительно якоря. `SDropdown` позиционирует floating-панель относительно якоря из слота `#trigger` или внешнего `reference`. - Управление открытием — через `v-model` (boolean). - Слот `#trigger` получает `toggle`, `open`, `triggerProps` для a11y-связки с панелью. - Trigger может быть любым интерактивным элементом — кнопка, иконка, chip; компонент не привязан к `SButton`. - Для hover-режима включите `showOnHover` — панель открывается по наведению на trigger и content. - Общие паттерны overlay — см. [Overlays](/patterns/overlays). ```vue ``` ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ----------------------- | ------------------------------------ | ------------------------------------------------------------------ | ---------------- | | `placement` | ESDropdownPlacement | Предпочтительное положение панели относительно якоря. | `'bottom-start'` | | `offset` | number | Отступ панели от якоря в пикселях. | `8` | | `flip` | boolean | Переворот панели при нехватке места. | `true` | | `shift` | boolean | Сдвиг панели вдоль оси, чтобы оставаться в viewport. | `false` | | `matchReferenceWidth` | boolean | Ширина панели равна ширине якоря. | `false` | | `fitViewport` | boolean | Ограничение размеров панели границами viewport. | `false` | | `surfaceClass` | string | Дополнительный CSS-класс поверхности панели. | — | | `teleportTo` | string | false | Селектор контейнера для `Teleport`; `false` — без телепорта. | `'body'` | | `dismissOnClickOutside` | boolean | Закрытие по клику вне панели и якоря. | `true` | | `dismissOnEscape` | boolean | Закрытие по Escape. | `true` | | `disabled` | boolean | Блокирует открытие и взаимодействие. | `false` | | `reference` | HTMLElement | null | DOM-элемент якоря; если не задан, используется слот `trigger`. | `null` | | `contentId` | string | `id` панели для `aria-controls`. | — | | `viewportPadding` | number | Внутренний отступ от краёв viewport при позиционировании. | `8` | | `arrow` | boolean | Показывает стрелку-указатель к якорю. | `false` | | `showOnHover` | boolean | Открывает и закрывает панель по наведению на якорь и содержимое. | `false` | | `hoverLeaveDelay` | number | Задержка перед закрытием при уходе курсора с якоря или панели, мс. | `100` | | `modelValue / v-model` | boolean | Двустороннее значение компонента (`v-model`). | `false` | #### Слоты | Имя | Описание | | --------- | --------------------------------------------------------- | | `trigger` | Якорь открытия: `open`, `toggle`, `triggerProps` для a11y | | `content` | Содержимое панели; `resolvedPlacement` — итоговая позиция | --- ## SDropdownMenu Композиционная shell-панель для меню внутри `SDropdown`. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ----------- | ------------------------------------ | ------------------------------------------------------------------------ | ------------ | | `width` | TSDropdownMenuDimension | Ширина панели. | — | | `maxHeight` | TSDropdownMenuDimension | Максимальная высота панели; при переполнении прокручивается только body. | — | | `accent` | boolean | Акцентная обводка панели. | `false` | #### Слоты | Имя | Описание | | --------- | ---------------------------------- | | `header` | Верхняя фиксированная область меню | | `default` | Основное содержимое меню | | `footer` | Нижняя фиксированная область меню | --- ## SChartLine Линейный график. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------- | -------------------------- | ----------------------------- | ------------ | | `points` | TChartPoint[] | Точки линейного графика. | `[]` | | `seriesLabel` | string | Подпись серии в легенде. | `'Series'` | | `loading` | boolean | Режим загрузки со скелетоном. | `false` | | `yMax` | number | Верхняя граница оси Y. | — | | `yStep` | number | Шаг делений оси Y. | — | --- ## SChartProgress График прогресса по снапшотам с бэкенда с reference area; маркеры при hover. См. примеры ниже и API-таблицу. Компонент `s-chart-progress` — часть публичного API UI Kit. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------------- | ------------------------------------- | -------- | ------------ | | `progressSnapshots` | TChartProgressSnapshot[] | | `[]` | | `deadline` | string | null | | `null` | | `minValue` | number | | — | | `maxValue` | number | | — | | `prefix` | string | | — | | `seriesLabel` | string | | `'Progress'` | | `loading` | boolean | | `false` | --- ## SChartStackedArea График с накоплением (stacked area). ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------ | --------------------------- | -------------------------------------- | ------------ | | `series` | TChartSeries[] | Серии для stacked area. | `[]` | | `loading` | boolean | Режим загрузки со скелетоном. | `false` | | `yMax` | number | Верхняя граница оси Y. | — | | `yStep` | number | Шаг делений оси Y. | — | | `totalLabel` | string | Подпись суммарного значения в легенде. | — | #### События | Имя | Описание | Payload | | ------------- | -------------- | -------- | | `seriesClick` | Клик по серии. | `number` | --- ## SChartStackedBar Столбчатый график с накоплением. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | --------- | --------------------------- | ----------------------------- | ------------ | | `series` | TChartSeries[] | Серии для stacked bar. | `[]` | | `loading` | boolean | Режим загрузки со скелетоном. | `false` | | `yMax` | number | Верхняя граница оси Y. | — | | `yStep` | number | Шаг делений оси Y. | — | #### События | Имя | Описание | Payload | | ------------- | -------------- | -------- | | `seriesClick` | Клик по серии. | `number` | --- ## SChartPie Круговая диаграмма. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | --------- | -------------------------- | ----------------------------- | ------------ | | `slices` | TChartSlice[] | Секторы круговой диаграммы. | `[]` | | `loading` | boolean | Режим загрузки со скелетоном. | `false` | #### События | Имя | Описание | Payload | | ------------ | ---------------- | -------- | | `sliceClick` | Клик по сектору. | `number` | --- ## SChartSegmentedBar Пропорциональный сегментированный бар с легендой. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------ | -------------------------- | ----------------------------------------------------------------------- | ------------ | | `segments` | TChartSlice[] | Сегменты пропорционального бара; value выводится тегом внутри сегмента. | `[]` | | `showLegend` | boolean | Показывать легенду под треком. | `true` | | `loading` | boolean | Режим загрузки со скелетоном. | `false` | #### События | Имя | Описание | Payload | | -------------- | --------------------------------------------------------- | -------- | | `segmentClick` | Клик по сегменту; `index` — индекс сегмента в `segments`. | `number` | --- ## SChartWidget Карточка-виджет для чартов: заголовок, сворачивание, слот действий. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | -------------------------------- | -------------------- | ----------------------------------------------------- | ------------ | | `title` | string | Заголовок виджета (например «5 целей»). | `''` | | `collapsible` | boolean | Показывать кнопку-шеврон сворачивания контента. | `false` | | `hideContentWhenCollapsed` | boolean | Скрывать контент default-слота в свёрнутом состоянии. | `true` | | `loading` | boolean | Режим загрузки: заголовок заменяется скелетоном. | `false` | | `modelValue / v-model:collapsed` | boolean | Двустороннее значение для `v-model:collapsed`. | `false` | #### Слоты | Имя | Описание | | --------- | ------------------------------------------------------- | | `title` | Заголовок виджета; по умолчанию текст из prop `title` | | `actions` | Действия в шапке слева от кнопки сворачивания | | `default` | Контент виджета — как правило, один из чартов `SChart*` | --- ## SChartHorizontalBar Горизонтальная столбчатая диаграмма. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | --------- | -------------------------------------- | ---------------------------------- | ------------ | | `items` | TChartHorizontalBarItem[] | Элементы горизонтальной диаграммы. | `[]` | | `loading` | boolean | Режим загрузки со скелетоном. | `false` | | `xMin` | number | Нижняя граница оси X. | — | | `xMax` | number | Верхняя граница оси X. | — | | `xStep` | number | Шаг делений оси X. | — | #### События | Имя | Описание | Payload | | ---------- | ------------- | -------- | | `barClick` | Клик по бару. | `number` | --- ## SChartMultiLine Линейный график с несколькими независимыми (не стекуемыми) сериями и зеркальной осью Y. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------- | --------------------------- | ----------------------------------------- | ------------ | | `series` | TChartSeries[] | Независимые (не стекуемые) серии графика. | `[]` | | `loading` | boolean | Режим загрузки со скелетоном. | `false` | | `yMax` | number | Верхняя граница оси Y. | — | | `yStep` | number | Шаг делений оси Y. | — | | `mirrorYAxis` | boolean | Дублировать подписи оси Y справа. | `true` | #### События | Имя | Описание | Payload | | ------------- | -------------- | -------- | | `seriesClick` | Клик по серии. | `number` | --- ## SChartBurnup Burn-up график прогресса: цель/план/факт в процентах с линией «сегодня» и бейджем факт/план. ### API #### Свойства | Имя | Тип | Описание | По умолчанию | | ------------- | -------------------------------- | --------------------------------------------------------- | ----------------------------- | | `points` | TChartBurnupPoint[] | Точки план/факт по категориям. | `[]` | | `loading` | boolean | Режим загрузки со скелетоном. | `false` | | `goalValue` | number | Целевое значение (верхняя пунктирная линия), в процентах. | `100` | | `goalLabel` | string | Подпись серии цели. | `'Цель'` | | `planLabel` | string | Подпись серии плана. | `'План'` | | `factLabel` | string | Подпись серии факта. | `'Факт'` | | `futureLabel` | string | Текст tooltip для дней, которые ещё не наступили. | `'Этот день ещё не наступил'` | | `yStep` | number | Шаг делений оси Y. | `25` | | `mirrorYAxis` | boolean | Дублировать подписи оси Y справа. | `true` | | `showTag` | boolean | Показывать бейдж «факт/план» у конца линии факта. | `true` |