From cd2211b206fe43a84016d477d98c53e728a7b8cc Mon Sep 17 00:00:00 2001 From: "ak.dmitriev" Date: Thu, 23 Jul 2026 14:31:35 +0700 Subject: [PATCH 1/8] add docs --- docs/components-api/checkbox.md | 10 +++++++++ docs/components-api/common-info.md | 4 ++++ docs/components-api/inputtext.md | 14 ++++++++++++ docs/components-api/multiselect.md | 35 ++++++++++++++++++++++++++++++ 4 files changed, 63 insertions(+) create mode 100644 docs/components-api/checkbox.md create mode 100644 docs/components-api/common-info.md create mode 100644 docs/components-api/inputtext.md create mode 100644 docs/components-api/multiselect.md diff --git a/docs/components-api/checkbox.md b/docs/components-api/checkbox.md new file mode 100644 index 0000000..9f3b774 --- /dev/null +++ b/docs/components-api/checkbox.md @@ -0,0 +1,10 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5316&m=dev) + +# ExtraInputText + +| Свойство | Описание | Типизация | +| ---------------- | ----------------------------------------------- | ----------------- | +| `label` | текст названия поля | `string` | +| `label-position` | положение лейбла | `default \| left` | +| `note` | текст пояснения под лейблом | `string` | +| `indeterminate` | возможно ли третье состояние (частично выбрано) | `boolean` | diff --git a/docs/components-api/common-info.md b/docs/components-api/common-info.md new file mode 100644 index 0000000..f1639d7 --- /dev/null +++ b/docs/components-api/common-info.md @@ -0,0 +1,4 @@ +Дока описывает публичное апи компонента, без привязки к стэку. +То есть работа с формами, состояния (hover/foces/etc), валидации в этой документации не описываются, так как способы реализации и связанные с этим свойства для каждого стэка свои. + +[Общий вид лейблов в свяске с полями](https://www.figma.com/design/5PubP8FifQkibWvs3mZVqt/Templates--DS--v2.0?node-id=5243-4312&m=dev) diff --git a/docs/components-api/inputtext.md b/docs/components-api/inputtext.md new file mode 100644 index 0000000..597771e --- /dev/null +++ b/docs/components-api/inputtext.md @@ -0,0 +1,14 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5470&m=dev) + +# ExtraInput + +| Свойство | Описание | Типизация | +| ---------------- | ----------------------------------------------------------------------- | -------------------------- | +| `placeholder` | текст подсказки внутри поля | `string` | +| `label` | текст названия поля | `string` | +| `label-position` | положение лейбла | `default \| float \| left` | +| `clearable` | отображение иконки для очистки поля | `boolean` | +| `note` | текст пояснения под полем | `string` | +| `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | +| `size` | размер поля | `sm \| base \| lg \| xlg` | +| `type` | тип поля input | `text \| password` | diff --git a/docs/components-api/multiselect.md b/docs/components-api/multiselect.md new file mode 100644 index 0000000..da05279 --- /dev/null +++ b/docs/components-api/multiselect.md @@ -0,0 +1,35 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5726&m=dev) + +# ExtraMultiselect + +| Свойство | Описание | Типизация | +| -------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------- | +| `placeholder` | текст подсказки внутри поля | `string` | +| `label` | текст названия поля | `string` | +| `label-position` | положение лейбла | `default \| float \| left` | +| `chip` | отображать выбранные значения в виде chips | `boolean` | +| `chip-icon` | класс иконки tabler icon для элементов при отображении chips | `string` | +| `chip-clearable` | отображение иконки удаления chip | `boolean` | +| `clearable` | отображение иконки для очистки поля | `boolean` | +| `show-checkbox` | отображать чекбокс у option | `boolean` | +| `show-filter` | отображать фильтр в оверлее | `boolean` | +| `filter-placeholder` | текст подсказки в фильтре | `string` | +| `options` | список элементов или список групп с элементами | `ExtraMultiselectGroup[] \| ExtraMultiselectOption[] \| any[]` | +| `optionLabel` | наименование поля, содержащего отображаемое значение | `string` | +| `note` | текст пояснения под полем | `string` | +| `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | +| `size` | размер поля | `sm \| base \| lg \| xlg` | + +# ExtraMultiselectOption + +| Свойство | Описание | Возможные значения | +| -------- | --------------- | ------------------ | +| `name` | текст подсказки | `string` | +| `code` | идентификатор | `string \| number` | + +# ExtraMultiselectGroup + +| Свойство | Описание | Возможные значения | +| --------- | ------------------- | ----------------------------------- | +| `options` | список элементов | `ExtraMultiselectOption[] \| any[]` | +| `name` | наименование группы | `string` | From 8da354e7a5b4c82e91ab3b6a5740b08771343f6c Mon Sep 17 00:00:00 2001 From: "ak.dmitriev" Date: Thu, 23 Jul 2026 14:52:09 +0700 Subject: [PATCH 2/8] fix --- docs/components-api/checkbox.md | 2 +- docs/components-api/inputtext.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components-api/checkbox.md b/docs/components-api/checkbox.md index 9f3b774..fcda7bb 100644 --- a/docs/components-api/checkbox.md +++ b/docs/components-api/checkbox.md @@ -1,6 +1,6 @@ [Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5316&m=dev) -# ExtraInputText +# ExtraCheckbox | Свойство | Описание | Типизация | | ---------------- | ----------------------------------------------- | ----------------- | diff --git a/docs/components-api/inputtext.md b/docs/components-api/inputtext.md index 597771e..6fc1a6d 100644 --- a/docs/components-api/inputtext.md +++ b/docs/components-api/inputtext.md @@ -1,6 +1,6 @@ [Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5470&m=dev) -# ExtraInput +# ExtraInputText | Свойство | Описание | Типизация | | ---------------- | ----------------------------------------------------------------------- | -------------------------- | From a391cfc38bbc4f76956269c5f2d9235213f8eb5c Mon Sep 17 00:00:00 2001 From: "ak.dmitriev" Date: Thu, 23 Jul 2026 21:18:56 +0700 Subject: [PATCH 3/8] fix --- docs/components-api/checkbox.md | 2 +- docs/components-api/common-info.md | 2 +- docs/components-api/inputtext.md | 2 +- docs/components-api/multiselect.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/components-api/checkbox.md b/docs/components-api/checkbox.md index fcda7bb..1ca4b2a 100644 --- a/docs/components-api/checkbox.md +++ b/docs/components-api/checkbox.md @@ -6,5 +6,5 @@ | ---------------- | ----------------------------------------------- | ----------------- | | `label` | текст названия поля | `string` | | `label-position` | положение лейбла | `default \| left` | -| `note` | текст пояснения под лейблом | `string` | +| `caption` | текст пояснения под лейблом | `string` | | `indeterminate` | возможно ли третье состояние (частично выбрано) | `boolean` | diff --git a/docs/components-api/common-info.md b/docs/components-api/common-info.md index f1639d7..79478d9 100644 --- a/docs/components-api/common-info.md +++ b/docs/components-api/common-info.md @@ -1,4 +1,4 @@ Дока описывает публичное апи компонента, без привязки к стэку. -То есть работа с формами, состояния (hover/foces/etc), валидации в этой документации не описываются, так как способы реализации и связанные с этим свойства для каждого стэка свои. +То есть работа с формами, состояния (hover/focus/etc), валидации в этой документации не описываются, так как способы реализации и связанные с этим свойства для каждого стэка свои. [Общий вид лейблов в свяске с полями](https://www.figma.com/design/5PubP8FifQkibWvs3mZVqt/Templates--DS--v2.0?node-id=5243-4312&m=dev) diff --git a/docs/components-api/inputtext.md b/docs/components-api/inputtext.md index 6fc1a6d..514a8ad 100644 --- a/docs/components-api/inputtext.md +++ b/docs/components-api/inputtext.md @@ -8,7 +8,7 @@ | `label` | текст названия поля | `string` | | `label-position` | положение лейбла | `default \| float \| left` | | `clearable` | отображение иконки для очистки поля | `boolean` | -| `note` | текст пояснения под полем | `string` | +| `caption` | текст пояснения под полем | `string` | | `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | | `size` | размер поля | `sm \| base \| lg \| xlg` | | `type` | тип поля input | `text \| password` | diff --git a/docs/components-api/multiselect.md b/docs/components-api/multiselect.md index da05279..08edd5f 100644 --- a/docs/components-api/multiselect.md +++ b/docs/components-api/multiselect.md @@ -16,7 +16,7 @@ | `filter-placeholder` | текст подсказки в фильтре | `string` | | `options` | список элементов или список групп с элементами | `ExtraMultiselectGroup[] \| ExtraMultiselectOption[] \| any[]` | | `optionLabel` | наименование поля, содержащего отображаемое значение | `string` | -| `note` | текст пояснения под полем | `string` | +| `caption` | текст пояснения под полем | `string` | | `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | | `size` | размер поля | `sm \| base \| lg \| xlg` | From 3b38209e0f83da03fc8a851d045e23c7c904258b Mon Sep 17 00:00:00 2001 From: "ak.dmitriev" Date: Wed, 29 Jul 2026 01:03:49 +0700 Subject: [PATCH 4/8] DS-686 --- docs/components-api/autocomplete.md | 76 ++++++++++++++++++++++++++++ docs/components-api/checkbox.md | 15 ++++++ docs/components-api/confirmdialog.md | 29 +++++++++++ docs/components-api/datepicker.md | 44 ++++++++++++++++ docs/components-api/dialog.md | 27 ++++++++++ docs/components-api/drawer.md | 27 ++++++++++ docs/components-api/inputgroup.md | 19 +++++++ docs/components-api/inputmask.md | 25 +++++++++ docs/components-api/inputnumber.md | 36 +++++++++++++ docs/components-api/inputotp.md | 24 +++++++++ docs/components-api/listbox.md | 56 ++++++++++++++++++++ docs/components-api/multiselect.md | 38 ++++++++++++++ docs/components-api/password.md | 14 +++++ docs/components-api/radiobutton.md | 23 +++++++++ docs/components-api/rating.md | 22 ++++++++ docs/components-api/select.md | 48 ++++++++++++++++++ docs/components-api/selectbutton.md | 33 ++++++++++++ docs/components-api/slider.md | 25 +++++++++ docs/components-api/textarea.md | 13 +++++ docs/components-api/togglebutton.md | 25 +++++++++ docs/components-api/toggleswitch.md | 22 ++++++++ 21 files changed, 641 insertions(+) create mode 100644 docs/components-api/autocomplete.md create mode 100644 docs/components-api/confirmdialog.md create mode 100644 docs/components-api/datepicker.md create mode 100644 docs/components-api/dialog.md create mode 100644 docs/components-api/drawer.md create mode 100644 docs/components-api/inputgroup.md create mode 100644 docs/components-api/inputmask.md create mode 100644 docs/components-api/inputnumber.md create mode 100644 docs/components-api/inputotp.md create mode 100644 docs/components-api/listbox.md create mode 100644 docs/components-api/password.md create mode 100644 docs/components-api/radiobutton.md create mode 100644 docs/components-api/rating.md create mode 100644 docs/components-api/select.md create mode 100644 docs/components-api/selectbutton.md create mode 100644 docs/components-api/slider.md create mode 100644 docs/components-api/textarea.md create mode 100644 docs/components-api/togglebutton.md create mode 100644 docs/components-api/toggleswitch.md diff --git a/docs/components-api/autocomplete.md b/docs/components-api/autocomplete.md new file mode 100644 index 0000000..5c0ec8e --- /dev/null +++ b/docs/components-api/autocomplete.md @@ -0,0 +1,76 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=9370-42381&m=dev) + +# ExtraAutoComplete + +| Свойство | Описание | Типизация | +| ---------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------- | +| `placeholder` | текст подсказки внутри поля | `string` | +| `label` | текст названия поля | `string` | +| `label-position` | положение лейбла | `default \| float \| left` | +| `multiple` | множественный выбор значений (выбранные отображаются в виде chips) | `boolean` | +| `suggestions` | список предлагаемых вариантов, выводимых в оверлее | `ExtraAutoCompleteGroup[] \| ExtraAutoCompleteOption[] \| any[]` | +| `completeMethod` | функция, загружающая `suggestions` в зависимости от введённого значения | `(event: ExtraAutoCompleteCompleteEvent) => void` | +| `optionLabel` | наименование поля, содержащего отображаемое значение | `string` | +| `loading` | отображение индикатора загрузки | `boolean` | +| `chip` | отображать выбранные значения в виде chips | `boolean` | +| `chip-icon` | класс иконки tabler icon для элементов при отображении chips | `string` | +| `chip-clearable` | отображение иконки удаления chip | `boolean` | +| `show-checkbox` | отображать чекбокс у option | `boolean` | +| `clearable` | отображение иконки для очистки поля | `boolean` | +| `caption` | текст пояснения под полем | `string` | +| `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | +| `size` | размер поля | `sm \| base \| lg \| xlg` | + +Группировка элементов определяется по данным: если в `suggestions` передан `ExtraAutoCompleteGroup`, варианты выводятся сгруппированно. + +# ExtraAutoCompleteCompleteEvent + +Событие, передаваемое в `completeMethod`. По введённому значению `query` обработчик формирует и записывает новый список в `suggestions`. + +| Свойство | Описание | Типизация | +| --------------- | -------------------------------- | --------- | +| `query` | введённое пользователем значение | `string` | +| `originalEvent` | исходное браузерное событие | `Event` | + +# ExtraAutoCompleteOption + +| Свойство | Описание | Типизация | +| -------- | -------------- | ------------------ | +| `name` | текст варианта | `string` | +| `code` | идентификатор | `string \| number` | + +# ExtraAutoCompleteGroup + +| Свойство | Описание | Типизация | +| --------- | ------------------- | ------------------------------------ | +| `options` | список элементов | `ExtraAutoCompleteOption[] \| any[]` | +| `name` | наименование группы | `string` | + +# События + +| Событие | Описание | Типизация | +| ----------------- | ---------------------------------------- | ----------------------------------------------------- | +| `onSelect` | срабатывает при выборе варианта | `(event: ExtraAutoCompleteSelectEvent) => void` | +| `onUnselect` | срабатывает при снятии выбора | `(event: ExtraAutoCompleteSelectEvent) => void` | +| `onClear` | срабатывает при очистке значения | `() => void` | +| `onShow` | срабатывает при открытии оверлея | `() => void` | +| `onHide` | срабатывает при закрытии оверлея | `() => void` | +| `onDropdownClick` | срабатывает при клике по кнопке dropdown | `(event: ExtraAutoCompleteDropdownClickEvent) => void` | + +# ExtraAutoCompleteSelectEvent + +Событие выбора варианта, передаётся в `onSelect` и `onUnselect`. + +| Свойство | Описание | Типизация | +| --------------- | ----------------- | --------- | +| `value` | выбранный вариант | `any` | +| `originalEvent` | исходное событие | `Event` | + +# ExtraAutoCompleteDropdownClickEvent + +Событие клика по кнопке dropdown, передаётся в `onDropdownClick`. + +| Свойство | Описание | Типизация | +| --------------- | ---------------------------------- | --------- | +| `query` | введённое значение на момент клика | `string` | +| `originalEvent` | исходное событие | `Event` | diff --git a/docs/components-api/checkbox.md b/docs/components-api/checkbox.md index 1ca4b2a..7185905 100644 --- a/docs/components-api/checkbox.md +++ b/docs/components-api/checkbox.md @@ -8,3 +8,18 @@ | `label-position` | положение лейбла | `default \| left` | | `caption` | текст пояснения под лейблом | `string` | | `indeterminate` | возможно ли третье состояние (частично выбрано) | `boolean` | + +# События + +| Событие | Описание | Типизация | +| ---------- | --------------------------------- | ------------------------------------------ | +| `onChange` | срабатывает при изменении состояния | `(event: ExtraCheckboxChangeEvent) => void` | + +# ExtraCheckboxChangeEvent + +Событие изменения состояния, передаётся в `onChange`. + +| Свойство | Описание | Типизация | +| --------------- | ------------------ | --------- | +| `checked` | состояние чекбокса | `boolean` | +| `originalEvent` | исходное событие | `Event` | diff --git a/docs/components-api/confirmdialog.md b/docs/components-api/confirmdialog.md new file mode 100644 index 0000000..76c9ef8 --- /dev/null +++ b/docs/components-api/confirmdialog.md @@ -0,0 +1,29 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=562-2797&m=dev) + +# ExtraConfirmDialog + +Модальное окно подтверждения действия. + +| Свойство | Описание | Типизация | +| --------------- | --------------------------------------------------- | -------------------------------------- | +| `severity` | стиль окна (иконка и тон заголовка) | `danger \| warning \| success \| info \| help` | +| `header` | заголовок окна | `string` | +| `show-header` | отображать верхний колонтитул | `boolean` | +| `accept-label` | текст кнопки подтверждения | `string` | +| `accept-icon` | класс иконки tabler icon для подтверждения | `string` | +| `accept-icon-position` | положение иконки подтверждения | `left \| right` | +| `reject-label` | текст кнопки отмены | `string` | +| `reject-icon` | класс иконки tabler icon для отмены | `string` | +| `reject-icon-position` | положение иконки отмены | `left \| right` | + +# Слоты (content projection) + +| Слот | Описание | +| --------- | ---------------------------------------------------------- | +| `content` | основное содержимое окна (тело) — область под произвольный контент | + +# События + +| Событие | Описание | Типизация | +| --------- | -------------------------------- | ---------- | +| `onHide` | срабатывает при закрытии окна | `() => void` | diff --git a/docs/components-api/datepicker.md b/docs/components-api/datepicker.md new file mode 100644 index 0000000..0806c6e --- /dev/null +++ b/docs/components-api/datepicker.md @@ -0,0 +1,44 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5983&m=dev) + +# ExtraDatePicker + +| Свойство | Описание | Типизация | +| ---------------- | ----------------------------------------------------------------------- | -------------------------- | +| `placeholder` | текст подсказки внутри поля | `string` | +| `label` | текст названия поля | `string` | +| `label-position` | положение лейбла | `default \| float \| left` | +| `view` | режим отображения календаря | `day \| month \| year \| time` | +| `selection-mode` | режим выбора даты | `single \| multiple \| range` | +| `show-time` | включить выбор времени (значение времени в поле + timepicker в календаре) | `boolean` | +| `inline` | отображать календарь встроенно, без поля ввода | `boolean` | +| `show-button-bar`| отображать блок с кнопками (Сегодня / Очистить) | `boolean` | +| `clearable` | отображение иконки для очистки поля | `boolean` | +| `date-format` | формат отображения даты | `string` | +| `min-date` | минимальная выбираемая дата | `Date` | +| `max-date` | максимальная выбираемая дата | `Date` | +| `caption` | текст пояснения под полем | `string` | +| `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | +| `size` | размер поля | `sm \| base \| lg \| xlg` | + +# События + +| Событие | Описание | Типизация | +| ---------------- | ------------------------------------------------- | -------------------------------------------- | +| `onInput` | срабатывает при ручном вводе значения в поле | `(event: Event) => void` | +| `onSelect` | срабатывает при выборе даты в календаре | `(value: Date) => void` | +| `onClear` | срабатывает при очистке значения | `() => void` | +| `onShow` | срабатывает при открытии календаря | `() => void` | +| `onClose` | срабатывает при закрытии календаря | `() => void` | +| `onMonthChange` | срабатывает при смене месяца | `(event: ExtraDatePickerViewChangeEvent) => void` | +| `onYearChange` | срабатывает при смене года | `(event: ExtraDatePickerViewChangeEvent) => void` | +| `onTodayClick` | срабатывает при клике по кнопке «Сегодня» | `(value: Date) => void` | +| `onClearClick` | срабатывает при клике по кнопке «Очистить» | `() => void` | + +# ExtraDatePickerViewChangeEvent + +Событие смены месяца/года, передаётся в `onMonthChange` и `onYearChange`. + +| Свойство | Описание | Типизация | +| -------- | --------------- | --------- | +| `month` | выбранный месяц | `number` | +| `year` | выбранный год | `number` | diff --git a/docs/components-api/dialog.md b/docs/components-api/dialog.md new file mode 100644 index 0000000..8e8fe12 --- /dev/null +++ b/docs/components-api/dialog.md @@ -0,0 +1,27 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=19237-16303&m=dev) + +# ExtraDialog + +Универсальное окно (модальное или немодальное) для отображения произвольного содержимого. + +| Свойство | Описание | Типизация | +| -------------- | ------------------------------------------- | ---------- | +| `modal` | отображать маску (overlay) поверх интерфейса | `boolean` | +| `maximizable` | кнопка разворота окна на весь экран | `boolean` | +| `show-close` | кнопка закрытия окна | `boolean` | + +# Слоты (content projection) + +| Слот | Описание | +| --------- | --------------------------------------- | +| `header` | содержимое верхнего колонтитула (заголовок) | +| `content` | основное содержимое окна (тело) | +| `footer` | содержимое нижнего колонтитула (кнопки/действия) | + +# События + +| Событие | Описание | Типизация | +| ------------ | ------------------------------------- | ---------- | +| `onShow` | срабатывает при открытии окна | `() => void` | +| `onHide` | срабатывает при закрытии окна | `() => void` | +| `onMaximize` | срабатывает при развороте/сворачивании | `() => void` | diff --git a/docs/components-api/drawer.md b/docs/components-api/drawer.md new file mode 100644 index 0000000..d3a583a --- /dev/null +++ b/docs/components-api/drawer.md @@ -0,0 +1,27 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=562-2897&m=dev) + +# ExtraDrawer + +Панель, выезжающая с края экрана. + +| Свойство | Описание | Типизация | +| -------------- | ---------------------------------------------- | ---------------------------- | +| `modal` | отображать маску (overlay) поверх интерфейса | `boolean` | +| `position` | расположение панели | `left \| right \| top \| bottom` | +| `show-header` | отображать верхний колонтитул (шапку можно скрыть) | `boolean` | +| `show-back` | кнопка «Назад» в шапке | `boolean` | + +# Слоты (content projection) + +| Слот | Описание | +| --------- | --------------------------------------- | +| `header` | содержимое верхнего колонтитула (заголовок) | +| `content` | основное содержимое панели (тело) | +| `footer` | содержимое нижнего колонтитула (кнопки/действия) | + +# События + +| Событие | Описание | Типизация | +| -------- | --------------------------------- | ---------- | +| `onShow` | срабатывает при открытии панели | `() => void` | +| `onHide` | срабатывает при закрытии панели | `() => void` | diff --git a/docs/components-api/inputgroup.md b/docs/components-api/inputgroup.md new file mode 100644 index 0000000..2c23fde --- /dev/null +++ b/docs/components-api/inputgroup.md @@ -0,0 +1,19 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5932&m=dev) + +# ExtraInputGroup + +Контейнер: оборачивает поле ввода аддонами (текстом или иконкой) слева и/или справа. Поле ввода и аддоны передаются как содержимое (content projection). Событий нет — обрабатываются на вложенном поле. + +| Свойство | Описание | Типизация | +| ---------------- | ------------------------------------------ | ----------------------- | +| `addon-position` | расположение аддона(ов) относительно поля | `left \| right \| both` | + +# ExtraInputGroupAddon + +Аддон — текст или иконка рядом с полем. При `type: text` текст передаётся как содержимое. + +| Свойство | Описание | Типизация | +| ---------- | ------------------------------------------- | --------------- | +| `position` | расположение аддона относительно поля | `left \| right` | +| `type` | тип содержимого аддона | `text \| icon` | +| `icon` | класс иконки tabler icon (для `type: icon`) | `string` | diff --git a/docs/components-api/inputmask.md b/docs/components-api/inputmask.md new file mode 100644 index 0000000..a370b7d --- /dev/null +++ b/docs/components-api/inputmask.md @@ -0,0 +1,25 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5521&m=dev) + +# ExtraInputMask + +| Свойство | Описание | Типизация | +| ---------------- | ----------------------------------------------------------------------- | -------------------------- | +| `placeholder` | текст подсказки внутри поля | `string` | +| `label` | текст названия поля | `string` | +| `label-position` | положение лейбла | `default \| float \| left` | +| `mask` | маска ввода (`9` — цифра, `a` — буква, `*` — цифра или буква) | `string` | +| `slot-char` | символ-заполнитель маски | `string` | +| `unmask` | возвращать значение без маски (raw), а не отформатированное | `boolean` | +| `auto-clear` | очищать поле при неполном вводе (на blur) | `boolean` | +| `clearable` | отображение иконки для очистки поля | `boolean` | +| `caption` | текст пояснения под полем | `string` | +| `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | +| `size` | размер поля | `sm \| base \| lg \| xlg` | + +# События + +| Событие | Описание | Типизация | +| ------------ | ------------------------------------- | ------------------- | +| `onComplete` | срабатывает при полном заполнении маски | `() => void` | +| `onInput` | срабатывает при вводе значения | `(event: Event) => void` | +| `onClear` | срабатывает при очистке значения | `() => void` | diff --git a/docs/components-api/inputnumber.md b/docs/components-api/inputnumber.md new file mode 100644 index 0000000..16354dd --- /dev/null +++ b/docs/components-api/inputnumber.md @@ -0,0 +1,36 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5675&m=dev) + +# ExtraInputNumber + +| Свойство | Описание | Типизация | +| ---------------- | ---------------------------------------------------------------------------------------------- | -------------------------- | +| `placeholder` | текст подсказки внутри поля | `string` | +| `label` | текст названия поля | `string` | +| `label-position` | положение лейбла | `default \| float \| left` | +| `buttons` | отображение кнопок для увеличения/уменьшения значения (недоступно при `label-position: float`) | `boolean` | +| `min` | минимальное допустимое значение | `number` | +| `max` | максимальное допустимое значение | `number` | +| `step` | шаг изменения значения (кнопками `buttons`) | `number` | +| `prefix` | текст перед значением внутри поля | `string` | +| `suffix` | текст после значения внутри поля | `string` | +| `clearable` | отображение иконки для очистки поля | `boolean` | +| `caption` | текст пояснения под полем | `string` | +| `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | +| `size` | размер поля | `sm \| base \| lg \| xlg` | + +# События + +| Событие | Описание | Типизация | +| --------- | ---------------------------------- | ------------------------------------------ | +| `onInput` | срабатывает при вводе значения | `(event: ExtraInputNumberInputEvent) => void` | +| `onClear` | срабатывает при очистке значения | `() => void` | + +# ExtraInputNumberInputEvent + +Событие ввода значения, передаётся в `onInput`. + +| Свойство | Описание | Типизация | +| ---------------- | ---------------------- | ---------------- | +| `value` | введённое значение | `number \| null` | +| `formattedValue` | отформатированное значение | `string` | +| `originalEvent` | исходное событие | `Event` | diff --git a/docs/components-api/inputotp.md b/docs/components-api/inputotp.md new file mode 100644 index 0000000..c2f2fda --- /dev/null +++ b/docs/components-api/inputotp.md @@ -0,0 +1,24 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-6034&m=dev) + +# ExtraInputOtp + +| Свойство | Описание | Типизация | +| --------------- | -------------------------------------------- | ---------- | +| `length` | количество полей ввода | `number` | +| `mask` | скрывать введённое значение (как пароль) | `boolean` | +| `integer-only` | допускать только цифры | `boolean` | + +# События + +| Событие | Описание | Типизация | +| ---------- | --------------------------------- | ------------------------------------------ | +| `onChange` | срабатывает при изменении кода | `(event: ExtraInputOtpChangeEvent) => void` | + +# ExtraInputOtpChangeEvent + +Событие изменения кода, передаётся в `onChange`. + +| Свойство | Описание | Типизация | +| --------------- | ------------- | --------- | +| `value` | введённый код | `string` | +| `originalEvent` | исходное событие | `Event` | diff --git a/docs/components-api/listbox.md b/docs/components-api/listbox.md new file mode 100644 index 0000000..51f98e6 --- /dev/null +++ b/docs/components-api/listbox.md @@ -0,0 +1,56 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5829&m=dev) + +# ExtraListbox + +| Свойство | Описание | Типизация | +| ------------------- | ------------------------------------------------- | -------------------------------------------------------------- | +| `options` | список элементов или список групп с элементами | `ExtraListboxGroup[] \| ExtraListboxOption[] \| any[]` | +| `optionLabel` | наименование поля, содержащего отображаемое значение | `string` | +| `multiple` | множественный выбор (элементы с чекбоксами) | `boolean` | +| `show-filter` | отображать поле поиска элементов | `boolean` | +| `filter-placeholder`| текст подсказки в поле поиска | `string` | +| `show-checkbox` | отображать чекбоксы у элементов и «выбрать всё» | `boolean` | +| `empty-message` | сообщение при отсутствии элементов | `string` | + +# События + +| Событие | Описание | Типизация | +| ----------------- | ----------------------------------------- | ----------------------------------------------- | +| `onChange` | срабатывает при изменении выбора | `(event: ExtraListboxChangeEvent) => void` | +| `onFilter` | срабатывает при фильтрации | `(event: ExtraListboxFilterEvent) => void` | +| `onSelectAllChange` | срабатывает при переключении «выбрать всё» | `(event: ExtraListboxSelectAllChangeEvent) => void` | + +# ExtraListboxChangeEvent + +| Свойство | Описание | Типизация | +| --------------- | ------------------ | --------- | +| `value` | выбранные значения | `any` | +| `originalEvent` | исходное событие | `Event` | + +# ExtraListboxFilterEvent + +| Свойство | Описание | Типизация | +| --------------- | ----------------------- | --------- | +| `filter` | введённый текст поиска | `string` | +| `originalEvent` | исходное событие | `Event` | + +# ExtraListboxSelectAllChangeEvent + +| Свойство | Описание | Типизация | +| --------------- | --------------- | --------- | +| `checked` | выбрано ли всё | `boolean` | +| `originalEvent` | исходное событие | `Event` | + +# ExtraListboxOption + +| Свойство | Описание | Типизация | +| -------- | --------------- | ------------------ | +| `name` | текст элемента | `string` | +| `code` | идентификатор | `string \| number` | + +# ExtraListboxGroup + +| Свойство | Описание | Типизация | +| --------- | ------------------- | ------------------------------------ | +| `options` | список элементов | `ExtraListboxOption[] \| any[]` | +| `name` | наименование группы | `string` | diff --git a/docs/components-api/multiselect.md b/docs/components-api/multiselect.md index 08edd5f..f0da9b8 100644 --- a/docs/components-api/multiselect.md +++ b/docs/components-api/multiselect.md @@ -33,3 +33,41 @@ | --------- | ------------------- | ----------------------------------- | | `options` | список элементов | `ExtraMultiselectOption[] \| any[]` | | `name` | наименование группы | `string` | + +# События + +| Событие | Описание | Типизация | +| ---------- | ------------------------------------- | ----------------------------------------------- | +| `onChange` | срабатывает при изменении выбора | `(event: ExtraMultiSelectChangeEvent) => void` | +| `onFilter` | срабатывает при фильтрации | `(event: ExtraMultiSelectFilterEvent) => void` | +| `onClear` | срабатывает при очистке всех значений | `() => void` | +| `onShow` | срабатывает при открытии панели | `() => void` | +| `onHide` | срабатывает при закрытии панели | `() => void` | +| `onRemove` | срабатывает при удалении значения | `(event: ExtraMultiSelectRemoveEvent) => void` | + +# ExtraMultiSelectChangeEvent + +Событие изменения выбора, передаётся в `onChange`. + +| Свойство | Описание | Типизация | +| --------------- | ------------------ | --------- | +| `value` | выбранные значения | `any` | +| `originalEvent` | исходное событие | `Event` | + +# ExtraMultiSelectFilterEvent + +Событие фильтрации, передаётся в `onFilter`. + +| Свойство | Описание | Типизация | +| --------------- | ---------------------- | --------- | +| `filter` | введённый текст фильтра | `string` | +| `originalEvent` | исходное событие | `Event` | + +# ExtraMultiSelectRemoveEvent + +Событие удаления значения, передаётся в `onRemove`. + +| Свойство | Описание | Типизация | +| --------- | ----------------------- | --------- | +| `value` | значения после удаления | `any` | +| `removed` | удалённое значение | `any` | diff --git a/docs/components-api/password.md b/docs/components-api/password.md new file mode 100644 index 0000000..2d7408c --- /dev/null +++ b/docs/components-api/password.md @@ -0,0 +1,14 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5881&m=dev) + +# ExtraPassword + +| Свойство | Описание | Типизация | +| ---------------- | ----------------------------------------------------------------------- | -------------------------- | +| `placeholder` | текст подсказки внутри поля | `string` | +| `label` | текст названия поля | `string` | +| `label-position` | положение лейбла | `default \| float \| left` | +| `toggle-mask` | отображать иконку для переключения видимости пароля | `boolean` | +| `feedback` | отображать панель с индикатором сложности и подсказками | `boolean` | +| `caption` | текст пояснения под полем | `string` | +| `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | +| `size` | размер поля | `sm \| base \| lg \| xlg` | diff --git a/docs/components-api/radiobutton.md b/docs/components-api/radiobutton.md new file mode 100644 index 0000000..d5ae774 --- /dev/null +++ b/docs/components-api/radiobutton.md @@ -0,0 +1,23 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5367&m=dev) + +# ExtraRadioButton + +| Свойство | Описание | Типизация | +| ---------------- | --------------------------------- | ------------------ | +| `label` | текст названия | `string` | +| `label-position` | положение лейбла | `default \| left` | +| `caption` | текст пояснения под лейблом | `string` | +| `value` | значение опции | `any` | + +# События + +| Событие | Описание | Типизация | +| ---------- | ----------------------------- | ---------------------------------------------- | +| `onClick` | срабатывает при выборе опции | `(event: ExtraRadioButtonClickEvent) => void` | + +# ExtraRadioButtonClickEvent + +| Свойство | Описание | Типизация | +| --------------- | ------------------- | --------- | +| `value` | значение опции | `any` | +| `originalEvent` | исходное событие | `Event` | diff --git a/docs/components-api/rating.md b/docs/components-api/rating.md new file mode 100644 index 0000000..e763041 --- /dev/null +++ b/docs/components-api/rating.md @@ -0,0 +1,22 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-6086&m=dev) + +# ExtraRating + +| Свойство | Описание | Типизация | +| ----------- | ---------------------------------------------- | ---------- | +| `stars` | количество звёзд | `number` | +| `paddings` | отступы вокруг звёзд (увеличенная область нажатия) | `boolean` | +| `clearable` | отображать кнопку сброса оценки | `boolean` | + +# События + +| Событие | Описание | Типизация | +| -------- | ----------------------------------- | ---------------------------------------- | +| `onRate` | срабатывает при выставлении оценки | `(event: ExtraRatingRateEvent) => void` | + +# ExtraRatingRateEvent + +| Свойство | Описание | Типизация | +| --------------- | ----------------- | --------- | +| `value` | выставленная оценка | `number` | +| `originalEvent` | исходное событие | `Event` | diff --git a/docs/components-api/select.md b/docs/components-api/select.md new file mode 100644 index 0000000..874233a --- /dev/null +++ b/docs/components-api/select.md @@ -0,0 +1,48 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5777&m=dev) + +# ExtraSelect + +Single-select: выбор одного значения из списка. У опций нет чекбоксов (множественный выбор с чекбоксами — это `ExtraMultiSelect`). + +| Свойство | Описание | Типизация | +| ---------------- | ----------------------------------------------------------------------- | ---------------------------------------------------- | +| `placeholder` | текст подсказки внутри поля | `string` | +| `label` | текст названия поля | `string` | +| `label-position` | положение лейбла | `default \| float \| left` | +| `options` | список элементов или список групп с элементами | `ExtraSelectGroup[] \| ExtraSelectOption[] \| any[]` | +| `optionLabel` | наименование поля, содержащего отображаемое значение | `string` | +| `clearable` | отображение иконки для очистки поля | `boolean` | +| `show-checkbox` | отображать отметку выбранного option | `boolean` | +| `caption` | текст пояснения под полем | `string` | +| `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | +| `size` | размер поля | `sm \| base \| lg \| xlg` | + +# События + +| Событие | Описание | Типизация | +| ---------- | -------------------------------- | ----------------------------------------- | +| `onChange` | срабатывает при выборе значения | `(event: ExtraSelectChangeEvent) => void` | +| `onShow` | срабатывает при открытии списка | `() => void` | +| `onHide` | срабатывает при закрытии списка | `() => void` | +| `onClear` | срабатывает при очистке значения | `() => void` | + +# ExtraSelectChangeEvent + +| Свойство | Описание | Типизация | +| --------------- | ------------------ | --------- | +| `value` | выбранное значение | `any` | +| `originalEvent` | исходное событие | `Event` | + +# ExtraSelectOption + +| Свойство | Описание | Типизация | +| -------- | -------------- | ------------------ | +| `name` | текст элемента | `string` | +| `code` | идентификатор | `string \| number` | + +# ExtraSelectGroup + +| Свойство | Описание | Типизация | +| --------- | ------------------- | ------------------------------ | +| `options` | список элементов | `ExtraSelectOption[] \| any[]` | +| `name` | наименование группы | `string` | diff --git a/docs/components-api/selectbutton.md b/docs/components-api/selectbutton.md new file mode 100644 index 0000000..29d280e --- /dev/null +++ b/docs/components-api/selectbutton.md @@ -0,0 +1,33 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=24035-56&m=dev) + +# ExtraSelectButton + +Группа кнопок для выбора значения (или нескольких). Не использовать вместо табов — для этого есть отдельный компонент. + +| Свойство | Описание | Типизация | +| ------------- | ---------------------------------------------- | -------------------------------------- | +| `options` | список вариантов | `ExtraSelectButtonOption[] \| any[]` | +| `optionLabel` | наименование поля, содержащего отображаемое значение | `string` | +| `multiple` | множественный выбор | `boolean` | +| `size` | размер кнопок | `sm \| base \| lg \| xlg` | + +# События + +| Событие | Описание | Типизация | +| ----------- | --------------------------------- | ------------------------------------------------- | +| `onChange` | срабатывает при изменении выбора | `(event: ExtraSelectButtonChangeEvent) => void` | + +# ExtraSelectButtonChangeEvent + +| Свойство | Описание | Типизация | +| --------------- | ------------------ | --------- | +| `value` | выбранные значения | `any` | +| `originalEvent` | исходное событие | `Event` | + +# ExtraSelectButtonOption + +| Свойство | Описание | Типизация | +| -------- | --------------- | ------------------ | +| `name` | текст варианта | `string` | +| `code` | идентификатор | `string \| number` | +| `icon` | класс иконки tabler icon | `string` | diff --git a/docs/components-api/slider.md b/docs/components-api/slider.md new file mode 100644 index 0000000..8a6e05b --- /dev/null +++ b/docs/components-api/slider.md @@ -0,0 +1,25 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=24037-80&m=dev) + +# ExtraSlider + +| Свойство | Описание | Типизация | +| -------- | ----------------------------------------- | ---------- | +| `min` | минимальное значение | `number` | +| `max` | максимальное значение | `number` | +| `step` | шаг изменения значения | `number` | +| `range` | режим выбора диапазона (двумя ползунками) | `boolean` | + +# События + +| Событие | Описание | Типизация | +| ------------ | ----------------------------------------- | ---------------------------------------- | +| `onChange` | срабатывает при изменении значения | `(event: ExtraSliderChangeEvent) => void` | +| `onSlideEnd` | срабатывает после завершения перетаскивания | `() => void` | + +# ExtraSliderChangeEvent + +| Свойство | Описание | Типизация | +| --------------- | ------------------------ | ----------- | +| `value` | значение (одиночный режим) | `number` | +| `values` | значения (режим `range`) | `number[]` | +| `originalEvent` | исходное событие | `Event` | diff --git a/docs/components-api/textarea.md b/docs/components-api/textarea.md new file mode 100644 index 0000000..a151eed --- /dev/null +++ b/docs/components-api/textarea.md @@ -0,0 +1,13 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5624&m=dev) + +# ExtraTextarea + +| Свойство | Описание | Типизация | +| ---------------- | ----------------------------------------------------------------------- | -------------------------- | +| `placeholder` | текст подсказки внутри поля | `string` | +| `label` | текст названия поля | `string` | +| `label-position` | положение лейбла | `default \| float \| left` | +| `clearable` | отображение иконки для очистки поля | `boolean` | +| `resize` | разрешить изменение размера поля | `boolean` | +| `caption` | текст пояснения под полем | `string` | +| `info` | текст с доп. информацией (показывается в тултипе иконки ti-info-circle) | `string` | diff --git a/docs/components-api/togglebutton.md b/docs/components-api/togglebutton.md new file mode 100644 index 0000000..fe9eb9b --- /dev/null +++ b/docs/components-api/togglebutton.md @@ -0,0 +1,25 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-4821&m=dev) + +# ExtraToggleButton + +Кнопка с двумя состояниями (вкл/выкл). Текущее состояние — это значение (привязка через модель), читается через событие `onChange`. + +| Свойство | Описание | Типизация | +| ---------------- | --------------------------------------- | --------------------- | +| `label` | текст кнопки | `string` | +| `icon` | класс иконки tabler icon | `string` | +| `icon-position` | положение иконки | `left \| right` | +| `size` | размер кнопки | `sm \| base \| lg \| xlg` | + +# События + +| Событие | Описание | Типизация | +| ----------- | -------------------------------- | -------------------------------------------------- | +| `onChange` | срабатывает при переключении | `(event: ExtraToggleButtonChangeEvent) => void` | + +# ExtraToggleButtonChangeEvent + +| Свойство | Описание | Типизация | +| --------------- | ----------- | --------- | +| `checked` | новое состояние (вкл/выкл) | `boolean` | +| `originalEvent` | исходное событие | `Event` | diff --git a/docs/components-api/toggleswitch.md b/docs/components-api/toggleswitch.md new file mode 100644 index 0000000..5e5eaa2 --- /dev/null +++ b/docs/components-api/toggleswitch.md @@ -0,0 +1,22 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=24035-72&m=dev) + +# ExtraToggleSwitch + +| Свойство | Описание | Типизация | +| ---------------- | --------------------------- | ------------------ | +| `label` | текст названия | `string` | +| `label-position` | положение лейбла | `default \| left` | +| `caption` | текст пояснения под лейблом | `string` | + +# События + +| Событие | Описание | Типизация | +| ----------- | ----------------------------- | -------------------------------------------------- | +| `onChange` | срабатывает при переключении | `(event: ExtraToggleSwitchChangeEvent) => void` | + +# ExtraToggleSwitchChangeEvent + +| Свойство | Описание | Типизация | +| --------------- | ----------------- | --------- | +| `checked` | новое состояние | `boolean` | +| `originalEvent` | исходное событие | `Event` | From 6b95309c163547105914040a1ac8de72d717dd96 Mon Sep 17 00:00:00 2001 From: "ak.dmitriev" Date: Wed, 5 Aug 2026 14:27:04 +0700 Subject: [PATCH 5/8] figma-api --- docs/components-api/accordion.md | 33 +++++++++++++++++++ docs/components-api/avatar.md | 14 ++++++++ docs/components-api/badge.md | 12 +++++++ docs/components-api/card.md | 17 ++++++++++ docs/components-api/carousel.md | 28 ++++++++++++++++ docs/components-api/chip.md | 18 ++++++++++ docs/components-api/divider.md | 17 ++++++++++ docs/components-api/galleria.md | 27 +++++++++++++++ docs/components-api/message.md | 27 +++++++++++++++ docs/components-api/metergroup.md | 21 ++++++++++++ docs/components-api/popover.md | 27 +++++++++++++++ docs/components-api/progressbar.md | 10 ++++++ docs/components-api/progressspinner.md | 10 ++++++ docs/components-api/scrollpanel.md | 11 +++++++ docs/components-api/skeleton.md | 9 +++++ docs/components-api/stepper.md | 22 +++++++++++++ docs/components-api/tabs.md | 16 +++++++++ docs/components-api/tag.md | 12 +++++++ docs/components-api/toast.md | 27 +++++++++++++++ docs/components-api/tooltip.md | 13 ++++++++ .../metergroup/metergroup.component.ts | 4 ++- 21 files changed, 374 insertions(+), 1 deletion(-) create mode 100644 docs/components-api/accordion.md create mode 100644 docs/components-api/avatar.md create mode 100644 docs/components-api/badge.md create mode 100644 docs/components-api/card.md create mode 100644 docs/components-api/carousel.md create mode 100644 docs/components-api/chip.md create mode 100644 docs/components-api/divider.md create mode 100644 docs/components-api/galleria.md create mode 100644 docs/components-api/message.md create mode 100644 docs/components-api/metergroup.md create mode 100644 docs/components-api/popover.md create mode 100644 docs/components-api/progressbar.md create mode 100644 docs/components-api/progressspinner.md create mode 100644 docs/components-api/scrollpanel.md create mode 100644 docs/components-api/skeleton.md create mode 100644 docs/components-api/stepper.md create mode 100644 docs/components-api/tabs.md create mode 100644 docs/components-api/tag.md create mode 100644 docs/components-api/toast.md create mode 100644 docs/components-api/tooltip.md diff --git a/docs/components-api/accordion.md b/docs/components-api/accordion.md new file mode 100644 index 0000000..e06c4e6 --- /dev/null +++ b/docs/components-api/accordion.md @@ -0,0 +1,33 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=1207-3420&m=dev) + +# ExtraAccordion + +Контейнер из раскрывающихся панелей. Панели передаются как дочерние элементы `ExtraAccordionPanel`. + +| Свойство | Описание | Типизация | +| ----------- | ------------------------------------------------- | ---------- | +| `multiple` | разрешить несколько раскрытых панелей одновременно | `boolean` | + +# События + +| Событие | Описание | Типизация | +| --------- | -------------------------------- | ---------- | +| `onOpen` | срабатывает при раскрытии панели | `() => void` | +| `onClose` | срабатывает при сворачивании панели | `() => void` | + +# ExtraAccordionPanel + +Отдельная панель аккордеона: заголовок + раскрываемое тело. + +| Свойство | Описание | Типизация | +| ----------- | ----------------------- | ---------- | +| `icon` | класс иконки заголовка | `string` | +| `expanded` | раскрыта ли панель | `boolean` | +| `disabled` | панель недоступна | `boolean` | + +# Слоты (content projection) + +| Слот | Описание | +| --------- | ------------------------------ | +| `header` | заголовок панели | +| `content` | содержимое панели (тело) | diff --git a/docs/components-api/avatar.md b/docs/components-api/avatar.md new file mode 100644 index 0000000..ea2ff80 --- /dev/null +++ b/docs/components-api/avatar.md @@ -0,0 +1,14 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-4972&m=dev) + +# ExtraAvatar + +Представление пользователя. + +| Свойство | Описание | Типизация | +| -------- | --------------------------- | ------------------------- | +| `size` | размер аватара | `base \| large \| xlarge` | +| `shape` | форма | `square \| circle` | +| `image` | изображение | `string` | +| `label` | текст/инициалы | `string` | +| `icon` | класс иконки tabler icon | `string` | +| `badge` | отображать значок (`Badge`) | `string` | diff --git a/docs/components-api/badge.md b/docs/components-api/badge.md new file mode 100644 index 0000000..1081281 --- /dev/null +++ b/docs/components-api/badge.md @@ -0,0 +1,12 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-4871&m=dev) + +# ExtraBadge + +Счётчик или статус для элемента. + +| Свойство | Описание | Типизация | +| ----------- | ------------------------------------------ | -------------------------------------- | +| `severity` | вариант стиля | `primary \| info \| success \| warning \| danger` | +| `value` | значение (счётчик/текст) | `string` | +| `dot` | режим точки (без значения) | `boolean` | +| `size` | размер | `base \| large \| xlarge` | diff --git a/docs/components-api/card.md b/docs/components-api/card.md new file mode 100644 index 0000000..b3a2325 --- /dev/null +++ b/docs/components-api/card.md @@ -0,0 +1,17 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=1207-3471&m=dev) + +# ExtraCard + +Карточка для отображения информации. + +| Свойство | Описание | Типизация | +| ---------- | --------------------------- | ---------- | +| `overlay` | отображать тень (возвышение) | `boolean` | + +# Слоты (content projection) + +| Слот | Описание | +| --------- | --------------------------------- | +| `header` | верхняя область (обычно изображение) | +| `content` | тело карточки | +| `footer` | нижний колонтитул | diff --git a/docs/components-api/carousel.md b/docs/components-api/carousel.md new file mode 100644 index 0000000..e1bfed5 --- /dev/null +++ b/docs/components-api/carousel.md @@ -0,0 +1,28 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=1207-3811&m=dev) + +# ExtraCarousel + +Прокручиваемый набор элементов. + +| Свойство | Описание | Типизация | +| ----------------- | --------------------------------- | ---------- | +| `show-nav` | кнопки навигации (стрелки) | `boolean` | +| `show-indicators` | индикаторы-точки (пагинация) | `boolean` | + +# Слоты (content projection) + +| Слот | Описание | +| --------- | -------------------- | +| `content` | элементы карусели | + +# События + +| Событие | Описание | Типизация | +| --------- | --------------------------------- | ------------------------------------------ | +| `onPage` | срабатывает при смене страницы | `(event: ExtraCarouselPageEvent) => void` | + +# ExtraCarouselPageEvent + +| Свойство | Описание | Типизация | +| -------- | ----------------- | --------- | +| `page` | текущая страница | `number` | diff --git a/docs/components-api/chip.md b/docs/components-api/chip.md new file mode 100644 index 0000000..53a7ba8 --- /dev/null +++ b/docs/components-api/chip.md @@ -0,0 +1,18 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5126&m=dev) + +# ExtraChip + +Метка для представления значения. + +| Свойство | Описание | Типизация | +| ----------- | ------------------------ | --------- | +| `label` | текст метки | `string` | +| `icon` | класс иконки tabler icon | `string` | +| `removable` | кнопка удаления метки | `boolean` | +| `disabled` | блокаровка | `boolean` | + +# События + +| Событие | Описание | Типизация | +| ---------- | ------------------------ | ------------ | +| `onRemove` | срабатывает при удалении | `() => void` | diff --git a/docs/components-api/divider.md b/docs/components-api/divider.md new file mode 100644 index 0000000..2eca69f --- /dev/null +++ b/docs/components-api/divider.md @@ -0,0 +1,17 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5178&m=dev) + +# ExtraDivider + +Визуальный разделитель контента. + +| Свойство | Описание | Типизация | +| --------- | ------------------------------------- | -------------------------- | +| `layout` | ориентация разделителя | `horizontal \| vertical` | +| `type` | стиль линии | `solid \| dashed` | +| `align` | расположение контента относительно линии | `left \| center \| right` | + +# Слоты (content projection) + +| Слот | Описание | +| --------- | ----------------------------------------- | +| `content` | содержимое поверх линии (текст или иконка) | diff --git a/docs/components-api/galleria.md b/docs/components-api/galleria.md new file mode 100644 index 0000000..dcb172c --- /dev/null +++ b/docs/components-api/galleria.md @@ -0,0 +1,27 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=1207-3859&m=dev) + +# ExtraGalleria + +Галерея для просмотра изображений. + +| Свойство | Описание | Типизация | +| ----------------- | --------------------------------------------- | --------------------- | +| `value` | массив изображений | `ExtraGalleriaItem[]` | +| `mask` | полноэкранный режим (маска поверх интерфейса) | `boolean` | +| `show-nav` | стрелки навигации | `boolean` | +| `show-indicators` | точки-индикаторы (пагинация) | `boolean` | + +# События + +| Событие | Описание | Типизация | +| --------------------- | --------------------------------- | ------------------------- | +| `onActiveIndexChange` | срабатывает при смене изображения | `(index: number) => void` | + +# ExtraGalleriaItem + +| Свойство | Описание | Типизация | +| ----------- | --------------------- | --------- | +| `image` | основное изображение | `string` | +| `thumbnail` | миниатюра | `string` | +| `alt` | alt-текст | `string` | +| `caption` | подпись к изображению | `string` | diff --git a/docs/components-api/message.md b/docs/components-api/message.md new file mode 100644 index 0000000..4c67356 --- /dev/null +++ b/docs/components-api/message.md @@ -0,0 +1,27 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=24043-21934&m=dev) + +# ExtraMessage + +Сообщение-уведомление. + +| Свойство | Описание | Типизация | +| ------------ | ------------------------------------------------------------ | -------------------------------------- | +| `severity` | тип сообщения | `info \| success \| warning \| danger` | +| `timer` | таймер автоскрытия | `boolean` | +| `message` | заголовок сообщения | `string` | +| `caption` | заголовок сообщения | `string` | +| `icon` | класс иконки tabler icon (вместо стандартной для `severity`) | `string` | +| `show-close` | кнопка закрытия | `boolean` | + +# Слоты (content projection) + +| Слот | Описание | +| --------- | --------------------- | +| `content` | контент после caption | +| `footer` | контент футера | + +# События + +| Событие | Описание | Типизация | +| --------- | ---------------------------------- | ------------ | +| `onClose` | срабатывает при закрытии сообщения | `() => void` | diff --git a/docs/components-api/metergroup.md b/docs/components-api/metergroup.md new file mode 100644 index 0000000..43ed02d --- /dev/null +++ b/docs/components-api/metergroup.md @@ -0,0 +1,21 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5074&m=dev) + +# ExtraMeterGroup + +Отображение массива данных в виде группы измерителей (сегментов). + +| Свойство | Описание | Типизация | +| ------------------- | ------------------------ | ------------------------ | +| `value` | массив измерителей | `ExtraMeterItem[]` | +| `orientation` | ориентация компонента | `horizontal \| vertical` | +| `label-position` | расположение легенды | `start \| end` | +| `label-orientation` | ориентация легенды | `horizontal \| vertical` | + +# ExtraMeterItem + +| Свойство | Описание | Типизация | +| -------- | ----------------------- | --------- | +| `label` | подпись измерителя | `string` | +| `value` | значение | `number` | +| `color` | цвет | `string` | +| `icon` | класс иконки tabler icon | `string` | diff --git a/docs/components-api/popover.md b/docs/components-api/popover.md new file mode 100644 index 0000000..dd1c66a --- /dev/null +++ b/docs/components-api/popover.md @@ -0,0 +1,27 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=562-2847&m=dev) + +# ExtraPopover + +Плавающий контейнер, появляющийся по клику на целевой элемент. + +| Свойство | Описание | Типизация | +| --------------- | ------------------------------------------- | ------------------------------- | +| `show-close` | кнопка закрытия | `boolean` | +| `append-to` | куда крепить оверлей (`'body'` или элемент) | `HTMLElement \| 'body' \| null` | +| `auto-z-index` | автоматическое управление z-index | `boolean` | +| `base-z-index` | базовое значение z-index | `number` | +| `dismissable` | закрывать по клику вне панели | `boolean` | +| `focus-on-show` | переводить фокус на панель при открытии | `boolean` | + +# Слоты (content projection) + +| Слот | Описание | +| --------- | ------------------- | +| `content` | содержимое поповера | + +# События + +| Событие | Описание | Типизация | +| -------- | ------------------------ | ------------ | +| `onShow` | срабатывает при открытии | `() => void` | +| `onHide` | срабатывает при закрытии | `() => void` | diff --git a/docs/components-api/progressbar.md b/docs/components-api/progressbar.md new file mode 100644 index 0000000..861f2b0 --- /dev/null +++ b/docs/components-api/progressbar.md @@ -0,0 +1,10 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5024&m=dev) + +# ExtraProgressBar + +Индикатор выполнения процесса. + +| Свойство | Описание | Типизация | +| ------------- | --------------------------------- | ---------- | +| `value` | значение прогресса (0–100) | `number` | +| `show-value` | отображать значение прогресса | `boolean` | diff --git a/docs/components-api/progressspinner.md b/docs/components-api/progressspinner.md new file mode 100644 index 0000000..2d201fa --- /dev/null +++ b/docs/components-api/progressspinner.md @@ -0,0 +1,10 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=1219-3086&m=dev) + +# ExtraProgressSpinner + +Индикатор ожидания (спиннер). + +| Свойство | Описание | Типизация | +| -------- | -------- | ---------------------- | +| `size` | размер | `sm \| md \| lg \| xl` | +| `fill` | цвет | `primary \| white` | diff --git a/docs/components-api/scrollpanel.md b/docs/components-api/scrollpanel.md new file mode 100644 index 0000000..c3a5186 --- /dev/null +++ b/docs/components-api/scrollpanel.md @@ -0,0 +1,11 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-6190&m=dev) + +# ExtraScrollPanel + +Контейнер с кастомным скроллбаром для прокрутки содержимого. + +# Слоты (content projection) + +| Слот | Описание | +| --------- | ------------------------- | +| `content` | прокручиваемое содержимое | diff --git a/docs/components-api/skeleton.md b/docs/components-api/skeleton.md new file mode 100644 index 0000000..3d44f4d --- /dev/null +++ b/docs/components-api/skeleton.md @@ -0,0 +1,9 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=5241-3731&m=dev) + +# ExtraSkeleton + +Плейсхолдер контента на момент загрузки. + +| Свойство | Описание | Типизация | +| -------- | -------- | --------------------- | +| `shape` | форма | `rectangle \| circle` | diff --git a/docs/components-api/stepper.md b/docs/components-api/stepper.md new file mode 100644 index 0000000..2899177 --- /dev/null +++ b/docs/components-api/stepper.md @@ -0,0 +1,22 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=1207-1850&m=dev) + +# ExtraStepper + +Мастер пошаговых действий. Шаги передаются как дочерние элементы `ExtraStepperItem`; активный шаг управляется через привязку значения. + +| Свойство | Описание | Типизация | +| ------------- | -------------------------------- | ------------------------ | +| `orientation` | ориентация шагов | `horizontal \| vertical` | +| `line` | отображение соединительной линии | `boolean` | + +# ExtraStepperItem + +Отдельный шаг: индикатор (номер или иконка) + подпись + +| Свойство | Описание | Типизация | +| ---------- | --------------------------------- | ------------------------------ | +| `name` | название шага | `string` | +| `caption` | подсказка шага | `string` | +| `state` | состояние шага | `default \| success \| danger` | +| `icon` | иконка стрелки вместо номера шага | `boolean` | +| `disabled` | шаг недоступен | `boolean` | diff --git a/docs/components-api/tabs.md b/docs/components-api/tabs.md new file mode 100644 index 0000000..7856140 --- /dev/null +++ b/docs/components-api/tabs.md @@ -0,0 +1,16 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=17178-189662&m=dev) + +# ExtraTabs + +Унифицированный навигационный компонент вкладок (может использоваться как меню или как переключатель панелей). Вкладки передаются как дочерние элементы `ExtraTabItem`; активная вкладка управляется через привязку значения. + +# ExtraTabItem + +Отдельная вкладка: заголовок (подпись, иконка, значок) + содержимое панели. + +| Свойство | Описание | Типизация | +| ---------- | ------------------------ | --------- | +| `name` | название вкладки | `string` | +| `icon` | класс иконки tabler icon | `string` | +| `badge` | значок в конце вкладки | `string` | +| `disabled` | вкладка недоступна | `boolean` | diff --git a/docs/components-api/tag.md b/docs/components-api/tag.md new file mode 100644 index 0000000..42bd9b4 --- /dev/null +++ b/docs/components-api/tag.md @@ -0,0 +1,12 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-4921&m=dev) + +# ExtraTag + +Маркер для элементов интерфейса. + +| Свойство | Описание | Типизация | +| ----------- | ----------------------------------- | -------------------------------------------------- | +| `severity` | вариант стиля | `primary \| secondary \| info \| success \| warning \| danger` | +| `value` | текст тега | `string` | +| `rounded` | полное скругление углов | `boolean` | +| `icon` | класс иконки tabler icon | `string` | diff --git a/docs/components-api/toast.md b/docs/components-api/toast.md new file mode 100644 index 0000000..193f7bc --- /dev/null +++ b/docs/components-api/toast.md @@ -0,0 +1,27 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=15953-4475&m=dev) + +# ExtraToast + +Уведомление, отображаемое поверх интерфейса (overlay-вариант `ExtraMessage`; в потоке документа используется `ExtraMessage`). + +| Свойство | Описание | Типизация | +| ------------ | ------------------------------------------------------------ | -------------------------------------- | +| `severity` | тип сообщения | `info \| success \| warning \| danger` | +| `timer` | таймер автоскрытия | `boolean` | +| `message` | заголовок сообщения | `string` | +| `caption` | подробности сообщения | `string` | +| `icon` | класс иконки tabler icon (вместо стандартной для `severity`) | `string` | +| `show-close` | кнопка закрытия | `boolean` | + +# Слоты (content projection) + +| Слот | Описание | +| --------- | --------------------- | +| `content` | контент после caption | +| `footer` | контент футера | + +# События + +| Событие | Описание | Типизация | +| --------- | ------------------------------------ | ------------ | +| `onClose` | срабатывает при закрытии уведомления | `() => void` | diff --git a/docs/components-api/tooltip.md b/docs/components-api/tooltip.md new file mode 100644 index 0000000..edb9795 --- /dev/null +++ b/docs/components-api/tooltip.md @@ -0,0 +1,13 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=484-5229&m=dev) + +# ExtraTooltip + +Директива `[extra-tooltip]` — применяется к любому элементу и показывает всплывающую подсказку со справочной информацией. + +| Свойство | Описание | Типизация | +| --------------- | ------------------------------------ | -------------------------------- | +| `extra-tooltip` | текст подсказки (значение директивы) | `string` | +| `position` | расположение относительно элемента | `top \| right \| bottom \| left` | +| `event` | событие для показа подсказки | `hover \| focus \| both` | +| `show-delay` | задержка перед показом, мс | `number` | +| `hide-delay` | задержка перед скрытием, мс | `number` | diff --git a/src/lib/components/metergroup/metergroup.component.ts b/src/lib/components/metergroup/metergroup.component.ts index 7e5dcdf..b68c71c 100644 --- a/src/lib/components/metergroup/metergroup.component.ts +++ b/src/lib/components/metergroup/metergroup.component.ts @@ -1,5 +1,6 @@ import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; import { MeterGroup, MeterItem } from 'primeng/metergroup'; +import { MultiSelect } from 'primeng/multiselect'; export type ExtraMeterGroupOrientation = 'horizontal' | 'vertical'; export type ExtraMeterGroupLabelPosition = 'start' | 'end'; @@ -10,7 +11,7 @@ export type ExtraMeterItem = MeterItem; selector: 'extra-metergroup', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [MeterGroup], + imports: [MeterGroup, MultiSelect], template: ` + ` }) export class ExtraMeterGroupComponent { From a122edeee336fa7b8a7ef722069ee77c4e48ace8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=A7=D0=B8=D1=91=D1=81?= =?UTF-8?q?=D0=BE=D0=B2?= Date: Wed, 5 Aug 2026 18:18:27 +0700 Subject: [PATCH 6/8] +file-upload api --- docs/components-api/fileupload.md | 105 ++++++++++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 docs/components-api/fileupload.md diff --git a/docs/components-api/fileupload.md b/docs/components-api/fileupload.md new file mode 100644 index 0000000..5af6508 --- /dev/null +++ b/docs/components-api/fileupload.md @@ -0,0 +1,105 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=24068-112138&m=dev) + +# FileUpload + +## Свойства + +| Свойство | Описание | Типизация | +| -------------- | -------------------------------------------------------------- | ---------------------------------- | +| `name` | имя поля отправляемой формы | `string` | +| `multiple` | разрешить выбор нескольких файлов | `boolean` | +| `accept` | допустимые типы файлов (MIME или расширения через запятую) | `string` | +| `maxFileSize` | максимальный размер одного файла в байтах | `number` | +| `fileLimit` | максимальное количество файлов | `number \| undefined` | +| `dragAndDrop` | включить область drag-and-drop | `boolean` | +| `mode` | режим загрузки; кнопка «Отправить» видна только в `manual` | `'auto' \| 'manual' \| 'basic'` | +| `url` | endpoint загрузки (если компонент сам выполняет запрос) | `string` | +| `labels` | статические тексты интерфейса (сгруппированы) | `Labels` | +| `messages` | шаблоны сообщений об ошибках (сгруппированы, заменяют 6 полей) | `Messages` | + +## События + +| Событие | Описание | Типизация | +| --------------- | ---------------------------------------------------- | ----------------------------------------- | +| `onSelect` | срабатывает при выборе файлов | `(event: FileSelectEvent) => void` | +| `onRemove` | срабатывает при удалении файла из списка | `(event: FileRemoveEvent) => void` | +| `onClear` | срабатывает при очистке всего списка | `() => void` | +| `onUpload` | срабатывает при отправке файлов (кастомная загрузка) | `(event: FileUploadHandlerEvent) => void` | +| `onError` | срабатывает при ошибке загрузки | `(event: FileUploadErrorEvent) => void` | + +## Вложенные компоненты (делегирование) + +Обёртка композирует существующие DS-компоненты и использует их **родной API** из их +собственной документации. Пропсы вложенных компонентов на `FileUpload` **не выносятся**. + +| Вложенный (Figma) | DS-компонент | Документация | Кто управляет | +| ------------------------------ | ------------------ | --------------------------------- | -------------------------------------------------- | +| `` (статус файла) | `ExtraBadge` | [badge.md](./badge.md) | внутренне, `severity`/`value` из статуса файла ⚠️ | +| `` (ошибки / успех) | `ExtraMessage` | [message.md](./message.md) | внутренне, текст из `messages`, severity из состояния | +| `` (загрузка) | `ExtraProgressBar` | [progressbar.md](./progressbar.md)| внутренне, `value` из прогресса, `show-value` off | +| `` | `ExtraButton` | ❗ нет `button.md` | внутренне, фикс. конфиг; тексты через `labels` | + +## Типы + +```ts +// Статические локализуемые строки +interface Labels { + dropzoneTitle?: string; + dropzoneCaption?: string; // подпись под заголовком + chooseButton?: string; // текст кнопки выбора + uploadButton?: string; // текст кнопки отправки (mode = 'manual') + cancelButton?: string; // текст кнопки очистки +} + +// Шаблоны ошибок. `{0}` — токен подстановки (имя файла, лимит, …). +// Наличие записи управляет показом Message +interface Messages { + invalidFileSize?: { summary: string; detail: string }; // {0}=имя / {0}=макс. размер + invalidFileType?: { summary: string; detail: string }; // {0}=имя / {0}=типы + invalidFileLimit?: { summary: string; detail: string }; // {0}=макс. количество +} + +// Модель одного файла. +interface UploadFile { + file: File; + status: 'pending' | 'uploading' | 'success' | 'error'; + progress?: number; // 0–100 → ExtraProgressBar.value; + errorMessage?: string; // наличие → рендер ExtraMessage; +} +``` + +## FileSelectEvent + +Событие выбора файлов, передаётся в `onSelect`. + +| Свойство | Описание | Типизация | +| --------------- | ------------------------------ | --------- | +| `files` | выбранные файлы | `File[]` | +| `currentFiles` | все файлы, готовые к загрузке | `File[]` | +| `originalEvent` | исходное браузерное событие | `Event` | + +## FileRemoveEvent + +Событие удаления файла, передаётся в `onRemove`. + +| Свойство | Описание | Типизация | +| --------------- | --------------------------- | --------- | +| `file` | удаляемый файл | `File` | +| `originalEvent` | исходное браузерное событие | `Event` | + +## FileUploadHandlerEvent + +Событие отправки файлов в режиме кастомной загрузки, передаётся в `onUpload`. + +| Свойство | Описание | Типизация | +| -------- | ----------------------- | --------- | +| `files` | список выбранных файлов | `File[]` | + +## FileUploadErrorEvent + +Событие ошибки загрузки, передаётся в `onError`. + +| Свойство | Описание | Типизация | +| -------- | ----------------------- | ------------ | +| `files` | список выбранных файлов | `File[]` | +| `error` | объект ошибки | `ErrorEvent` | From ef26ba1cd7440855beb89a622aa9fe122363f85b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=A7=D0=B8=D1=91=D1=81?= =?UTF-8?q?=D0=BE=D0=B2?= Date: Wed, 5 Aug 2026 18:44:09 +0700 Subject: [PATCH 7/8] +menu api --- docs/components-api/menu.md | 94 +++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 docs/components-api/menu.md diff --git a/docs/components-api/menu.md b/docs/components-api/menu.md new file mode 100644 index 0000000..cc76f0a --- /dev/null +++ b/docs/components-api/menu.md @@ -0,0 +1,94 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=24068-103064&m=dev) + +# ExtraMenu + +## Свойства + +| Свойство | Описание | Типизация | По умолчанию | +| --- | --- | --- | --- | +| `items` | пункты меню | `MenuItem[]` | `[]` | +| `popup` | режим всплывающего меню | `boolean` | `false` | +| `open` | видимость всплывающего меню (управляемое состояние) | `boolean` | `false` | +| `appendTo` | контейнер рендера всплывающего меню | `'body' \| 'self' \| ElementLike` | `'body'` | +| `linkComponent` | компонент для рендера пунктов-ссылок (роутинг) | `unknown` | — | +| `ariaLabel` | доступное имя меню | `string` | — | + +## События + +| Событие | Описание | Типизация | +| --- | --- | --- | +| `onItemSelect` | выбран пункт меню | `(event: MenuItemSelectEvent) => void` | +| `onOpenChange` | всплывающее меню открылось или закрылось | `(open: boolean) => void` | + +## Методы + +| Метод | Описание | Типизация | +| --- | --- | --- | +| `toggle` | переключить всплывающее меню | `(anchor?: AnchorLike) => void` | +| `show` | открыть всплывающее меню | `(anchor?: AnchorLike) => void` | +| `hide` | закрыть всплывающее меню | `() => void` | + +`AnchorLike` — элемент, ref или координаты, относительно которых позиционируется меню. +В вебе допускается передача `Event` — якорь вычисляется из `event.currentTarget`. + +## Слоты + +| Слот | Описание | Контекст | +| --- | --- | --- | +| `item` | кастомный рендер пункта меню | `MenuAction` | +| `submenuHeader` | кастомный рендер заголовка группы | `MenuGroup` | +| `start` | произвольный контент перед списком | — | +| `end` | произвольный контент после списка | — | + +## MenuItem + +Пункт меню — размеченное объединение трёх сущностей. + +```ts +type MenuItem = MenuAction | MenuGroup | MenuSeparator; +``` + +### MenuAction + +| Свойство | Описание | Типизация | +| --- | --- | --- | +| `label` | текст пункта | `string` | +| `caption` | текст пояснения под лейблом | `string` | +| `icon` | иконка перед текстом | `IconName` | +| `iconEnd` | иконка после текста | `IconName` | +| `selected` | пункт отмечен как выбранный | `boolean` | +| `disabled` | пункт заблокирован | `boolean` | +| `visible` | пункт отображается | `boolean` | +| `href` | ссылка, на которую ведёт пункт | `string` | +| `target` | атрибут `target` ссылки | `string` | +| `command` | обработчик клика по пункту | `(event: MenuItemSelectEvent) => void` | +| `id` | идентификатор пункта | `string` | + +`icon` и `iconEnd` принимают имя иконки из справочника, а не CSS-класс — см. +[icons.md](../../figma-code-connect/icons.md). + +### MenuGroup + +| Свойство | Описание | Типизация | +| --- | --- | --- | +| `label` | заголовок группы | `string` | +| `items` | пункты группы | `MenuAction[]` | +| `visible` | группа отображается | `boolean` | +| `id` | идентификатор группы | `string` | + +Вложенность ограничена одним уровнем: группа содержит только `MenuAction`. + +### MenuSeparator + +| Свойство | Описание | Типизация | +| --- | --- | --- | +| `separator` | разделитель между пунктами | `true` | + +## MenuItemSelectEvent + +| Свойство | Описание | Типизация | +| --- | --- | --- | +| `item` | выбранный пункт | `MenuAction` | +| `originalEvent` | исходное событие | `unknown` | + + From 9ba8d192348329d637408f837d167ecb4c18803c Mon Sep 17 00:00:00 2001 From: "ak.dmitriev" Date: Wed, 12 Aug 2026 16:05:43 +0700 Subject: [PATCH 8/8] figma-api --- docs/components-api/carousel.md | 34 ++++++++++++++++++++------------ docs/components-api/paginator.md | 34 ++++++++++++++++++++++++++++++++ docs/components-api/timeline.md | 19 ++++++++++++++++++ 3 files changed, 74 insertions(+), 13 deletions(-) create mode 100644 docs/components-api/paginator.md create mode 100644 docs/components-api/timeline.md diff --git a/docs/components-api/carousel.md b/docs/components-api/carousel.md index e1bfed5..56aa978 100644 --- a/docs/components-api/carousel.md +++ b/docs/components-api/carousel.md @@ -4,25 +4,33 @@ Прокручиваемый набор элементов. -| Свойство | Описание | Типизация | -| ----------------- | --------------------------------- | ---------- | -| `show-nav` | кнопки навигации (стрелки) | `boolean` | -| `show-indicators` | индикаторы-точки (пагинация) | `boolean` | +| Свойство | Описание | Типизация | +| ------------------- | -------------------------------------- | ------------------------- | +| `show-nav` | кнопки навигации (стрелки) | `boolean` | +| `show-indicators` | индикаторы-точки (пагинация) | `boolean` | +| `nav-icon-left` | класс иконки tabler icon кнопки слева | `string` | +| `nav-icon-right` | класс иконки tabler icon кнопки справа | `string` | +| `nav-text-left` | текст кнопок навигации слева | `string` | +| `nav-text-right` | текст кнопок навигации справа | `string` | +| `nav-variant` | вариант стиля кнопок навигации | `string` | +| `nav-size` | размер кнопок навигации | `sm \| base \| lg \| xlg` | +| `nav-rounded` | скруглённая форма кнопок | `boolean` | +| `nav-icon-position` | позиция иконки в кнопках | `left \| right` | # Слоты (content projection) -| Слот | Описание | -| --------- | -------------------- | -| `content` | элементы карусели | +| Слот | Описание | +| --------- | ------------------------ | +| `content` | шаблон элемента карусели | # События -| Событие | Описание | Типизация | -| --------- | --------------------------------- | ------------------------------------------ | -| `onPage` | срабатывает при смене страницы | `(event: ExtraCarouselPageEvent) => void` | +| Событие | Описание | Типизация | +| -------------- | ------------------------------ | ----------------------------------------- | +| `onPageChange` | срабатывает при смене страницы | `(event: ExtraCarouselPageEvent) => void` | # ExtraCarouselPageEvent -| Свойство | Описание | Типизация | -| -------- | ----------------- | --------- | -| `page` | текущая страница | `number` | +| Свойство | Описание | Типизация | +| -------- | ---------------- | --------- | +| `page` | текущая страница | `number` | diff --git a/docs/components-api/paginator.md b/docs/components-api/paginator.md new file mode 100644 index 0000000..9c99fde --- /dev/null +++ b/docs/components-api/paginator.md @@ -0,0 +1,34 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=1284-1549&m=dev) + +# ExtraPaginator + +Постраничная навигация по данным. + +| Свойство | Описание | Типизация | +| -------------------------- | --------------------------------------------------- | ---------- | +| `rows` | количество элементов на странице | `number` | +| `total-records` | общее количество записей | `number` | +| `first` | индекс первой записи (0-based) | `number` | +| `rows-per-page-options` | варианты количества элементов на странице | `number[]` | +| `show-jump-to-page` | поле для перехода к конкретной странице | `boolean` | +| `show-jump-to-page-reset` | отображать иконку очистки поля выбора страницы | `boolean` | +| `jump-to-page-placeholder` | плэйсхолдер поля выбора страницы | `boolean` | +| `show-dropdown` | селект для перехода к конкретной странице | `boolean` | +| `show-dropdown-reset` | отображать иконку очистки дропдауна выбора страницы | `boolean` | +| `dropdown-placeholder` | плэйсхолдер дропдауна выбора страницы | `string` | +| `show-buttons` | отображение "стрелок" перевлючения страницы | `boolean` | + +# События + +| Событие | Описание | Типизация | +| -------------- | ------------------------------ | -------------------------------------- | +| `onPageChange` | срабатывает при смене страницы | `(event: ExtraPaginatorState) => void` | + +# ExtraPaginatorState + +| Свойство | Описание | Типизация | +| ------------ | -------------------------- | --------- | +| `page` | текущая страница (0-based) | `number` | +| `first` | индекс первой записи | `number` | +| `rows` | элементов на странице | `number` | +| `page-count` | всего страниц | `number` | diff --git a/docs/components-api/timeline.md b/docs/components-api/timeline.md new file mode 100644 index 0000000..9569d36 --- /dev/null +++ b/docs/components-api/timeline.md @@ -0,0 +1,19 @@ +[Открыть в Figma →](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=1207-3963&m=dev) + +# ExtraTimeline + +Список событий в хронологическом порядке. + +| Свойство | Описание | Типизация | +| -------- | ------------------------------------------ | --------------------------- | +| `value` | массив событий | `ExtraTimelineItem[]` | +| `icon` | класс иконки tabler icons | `string` | +| `align` | расположение контента относительно маркера | `opposite \| top \| bottom` | +| `line` | отображение линии | `boolean` | + +# ExtraTimelineItem + +| Свойство | Описание | Типизация | +| --------- | ----------------- | --------- | +| `caption` | пояснение | `string` | +| `name` | наименование шага | `string` |