@central-design-system/components 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/esm-node/src/components/CdsTable/composable/table.mjs

@@ -5,6 +5,7 @@ const makeTableProps = propsFactory(
   {
     /**
      * Идентификатор таблицы
+     * @en Table identifier
      */
     id: {
       type: String,
@@ -12,6 +13,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Массив данных для отображения в таблице
+     * @en Array of records to show in the table
      */
     data: {
       type: Array,
@@ -19,6 +21,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Колонки таблицы
+     * @en Table columns
      */
     columns: {
       type: Array,
@@ -26,6 +29,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Уникальный ключ строки может быть строкой или функцией возвращающей строку
+     * @en Unique row key — a string or a function returning a string
      */
     rowKey: {
       type: [String, Function],
@@ -33,6 +37,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Классы строки
+     * @en Row classes
      */
     rowClassName: {
       type: [String, Function],
@@ -40,6 +45,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Фиксированный или авто лэйаут
+     * @en Fixed or auto layout
      */
     tableLayout: {
       type: String,
@@ -47,6 +53,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Показывать ли заголовок таблицы
+     * @en Whether to show the table header
      */
     showHeader: {
       type: Boolean,
@@ -54,6 +61,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Sticky для заголовка и скроллбара
+     * @en Sticky behavior for the header and the scrollbar
      */
     sticky: {
       type: [Boolean, Object],
@@ -61,6 +69,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Загрузка таблицы
+     * @en Table loading state
      */
     loading: {
       type: Boolean,
@@ -68,6 +77,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Подсвечивание строки при наведении
+     * @en Highlight the row on hover
      */
     hovered: {
       type: Boolean,
@@ -75,6 +85,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Показывать все границы таблицы
+     * @en Show every table border
      */
     bordered: {
       type: Boolean,
@@ -82,6 +93,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Убрать все границы таблицы
+     * @en Remove every table border
      */
     borderless: {
       type: Boolean,
@@ -89,6 +101,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Рендер заголовка таблицы
+     * @en Render function for the table title
      */
     header: {
       type: Function,
@@ -96,6 +109,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Рендер тулбара таблицы
+     * @en Render function for the table toolbar
      */
     toolbar: {
       type: Function,
@@ -103,6 +117,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Рендер футера таблицы
+     * @en Render function for the table footer
      */
     footer: {
       type: Function,
@@ -110,6 +125,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Переопределить компоненты таблицы по умолчанию
+     * @en Override the default table components
      */
     components: {
       type: Object,
@@ -117,6 +133,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Устанавливает свойства для каждой строки
+     * @en Sets the properties for every row
      */
     customRow: {
       type: Function,
@@ -124,6 +141,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Устанавливает свойства для каждой строки заголовка
+     * @en Sets the properties for every header row
      */
     customHeaderRow: {
       type: Function,
@@ -131,6 +149,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Конфигурация пагинации таблицы
+     * @en Table pagination configuration
      */
     pagination: {
       type: [Object, Boolean],
@@ -138,6 +157,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Можно ли скроллить таблицу
+     * @en Whether the table can be scrolled
      */
     scroll: {
       type: Object,
@@ -145,6 +165,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Сортировка данных в таблице. 'ascend' | 'descend'
+     * @en Sorting of the table data. 'ascend' | 'descend'
      */
     sortDirection: {
       type: Array,
@@ -152,6 +173,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Показывать ли тултипы для сортировки в заголовке. Можно передать объект со свойствами для CdsTooltip.
+     * @en Whether to show sorting tooltips in the header. You can pass an object with CdsTooltip properties.
      */
     showSorterTooltip: {
       type: [Boolean, Object],
@@ -159,6 +181,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Сделать колонку с раскрытием фиксированной (left | right | boolean)
+     * @en Pin the expand column (left | right | boolean)
      */
     expandFixed: {
       type: [Boolean, String],
@@ -166,6 +189,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Ширина колонки с раскрытием
+     * @en Width of the expand column
      */
     expandColumnWidth: {
       type: Number,
@@ -173,6 +197,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Ключи текущих раскрытых строк (поддерживает v-model)
+     * @en Keys of the currently expanded rows (supports v-model)
      */
     expandedRowKeys: {
       type: Array,
@@ -180,6 +205,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Конфигурация для выбора строк
+     * @en Row selection configuration
      */
     rowSelection: {
       type: Object,
@@ -187,6 +213,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Ключи раскрытых строк по умолчанию
+     * @en Keys of the rows expanded by default
      */
     defaultExpandedRowKeys: {
       type: Array,
@@ -194,6 +221,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * По умолчанию все колонки раскрыты
+     * @en All rows are expanded by default
      */
     defaultExpandAllRows: {
       type: Boolean,
@@ -201,6 +229,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Может раскрываться
+     * @en Rows can be expanded
      */
     canExpandable: {
       type: Boolean,
@@ -208,6 +237,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Рендер для каждой раскрытой строки
+     * @en Render function for every expanded row
      */
     expandedRowRender: {
       type: Function,
@@ -215,6 +245,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Раскрытие строки по клику в любое место этой строки
+     * @en Expand the row by clicking anywhere in it
      */
     expandRowByClick: {
       type: Boolean,
@@ -222,6 +253,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Индекс колонки, в которой будет располагаться иконка раскрытия
+     * @en Index of the column that holds the expand icon
      */
     expandIconColumnIndex: {
       type: Number,
@@ -229,6 +261,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Своя иконка раскрытия
+     * @en Custom expand icon
      */
     expandIcon: {
       type: Function,
@@ -236,6 +269,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Размер отступа в пикселях для каждого уровня вложенности
+     * @en Indent size in pixels for each nesting level
      */
     indentSize: {
       type: Number,
@@ -243,6 +277,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Показать раскрытую колонку
+     * @en Show the expand column
      */
     showExpandColumn: {
       type: Boolean,
@@ -250,6 +285,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Классы для строк в раскрытом состоянии
+     * @en Classes for rows in the expanded state
      */
     expandedRowClassName: {
       type: Function,
@@ -257,6 +293,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Названия свойства для дочерних элементов
+     * @en Name of the property holding the child records
      */
     childrenColumnName: {
       type: String,
@@ -264,6 +301,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Строку можно раскрыть
+     * @en Whether the row can be expanded
      */
     rowExpandable: {
       type: Function,
@@ -271,6 +309,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Трансформировать текст в ячейке
+     * @en Transform the text inside a cell
      */
     transformCellText: {
       type: Function,
@@ -278,6 +317,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Контейнер рендеринга выпадающих списков
+     * @en Container that dropdowns are rendered into
      */
     getPopupContainer: {
       type: Function,
@@ -285,6 +325,7 @@ const makeTableProps = propsFactory(
     },
     /**
      * Локализация таблицы (переопределяет строки глобальной локали)
+     * @en Table localization (overrides the strings of the global locale)
      */
     locale: {
       type: Object,
@@ -322,6 +363,9 @@ const makeTableProps = propsFactory(
      * Перетаскивание строк (drag-n-drop). `true` или объект конфигурации
      * `{ icon, disabled, allowDrop }`. Reorder происходит только между соседями
      * одного родителя; порядок меняет потребитель в обработчике `@row-reorder`.
+     * @en Row drag and drop. `true` or a configuration object
+     * `{ icon, disabled, allowDrop }`. Reordering only happens between siblings
+     * of the same parent; the consumer changes the order in the `@row-reorder` handler.
      */
     rowDraggable: {
       type: [Boolean, Object],
@@ -331,6 +375,9 @@ const makeTableProps = propsFactory(
      * Перетаскивание колонок (drag-n-drop). `true` или объект конфигурации
      * `{ icon, disabled, allowDrop }`. Reorder происходит только среди соседей
      * внутри своей группы; порядок меняет потребитель в обработчике `@column-reorder`.
+     * @en Column drag and drop. `true` or a configuration object
+     * `{ icon, disabled, allowDrop }`. Reordering only happens among siblings
+     * inside the same group; the consumer changes the order in the `@column-reorder` handler.
      */
     columnDraggable: {
       type: [Boolean, Object],

package/dist/esm-node/src/components/CdsTabs/CdsTabs.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-tabs {
     gap: var(--cds-spacing-100);

package/dist/esm-node/src/components/CdsTabs/api/CdsTabs.props.mjs

@@ -9,9 +9,25 @@ import { a3 as omit, a7 as pick } from "../../../utils/helpers.mjs";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 const defineCdsTabProps = propsFactory(
   {
+    /**
+     * Фиксирует ширину вкладки, не давая ей растягиваться по длине заголовка
+     * @en Fixes the width of the tab so it does not stretch to the length of its label
+     */
     fixed: Boolean,
+    /**
+     * Анимация подчёркивающего индикатора активной вкладки
+     * @en Animation of the underline indicator of the active tab
+     */
     sliderTransition: String,
+    /**
+     * Длительность анимации индикатора в миллисекундах
+     * @en Duration of the indicator animation in milliseconds
+     */
     sliderTransitionDuration: [String, Number],
+    /**
+     * Скрывает подчёркивающий индикатор активной вкладки
+     * @en Hides the underline indicator of the active tab
+     */
     hideSlider: Boolean,
     ...omit(
       defineCdsButtonProps({
@@ -25,21 +41,61 @@ const defineCdsTabProps = propsFactory(
 );
 const defineCdsTabsProps = propsFactory(
   {
+    /**
+     * Список вкладок. Строка или число — заголовок, объект — вкладка с произвольными пропсами `CdsTab`
+     * @en List of tabs. A string or a number is a label, an object is a tab with arbitrary `CdsTab` props
+     */
     items: {
       type: Array,
       default: () => []
     },
+    /**
+     * Делает все вкладки одинаковой ширины независимо от длины заголовка
+     * @en Makes all tabs the same width regardless of the length of their labels
+     */
     fixedTabs: Boolean,
+    /**
+     * Располагает иконку и заголовок вкладки вертикально — иконка над текстом
+     * @en Lays out the icon and the label of the tab vertically — the icon above the text
+     */
     stacked: Boolean,
+    /**
+     * Растягивает вкладки на всю доступную ширину контейнера
+     * @en Stretches the tabs across the whole available width of the container
+     */
     grow: Boolean,
+    /**
+     * Высота полосы вкладок. Число — в пикселях, строка — с любой CSS-единицей
+     * @en Height of the tab bar. A number is in pixels, a string takes any CSS unit
+     */
     height: {
       type: [Number, String],
       default: void 0
     },
+    /**
+     * Скрывает подчёркивающий индикатор активной вкладки
+     * @en Hides the underline indicator of the active tab
+     */
     hideSlider: Boolean,
+    /**
+     * Вариант оформления с подложкой: активная вкладка выделяется залитой «таблеткой», а не подчёркиванием
+     * @en Styling with a background: the active tab is highlighted with a filled pill instead of an underline
+     */
     inset: Boolean,
+    /**
+     * Внутренний отступ подложки в режиме `inset`. Число — в пикселях, строка — с любой CSS-единицей
+     * @en Padding of the background in `inset` mode. A number is in pixels, a string takes any CSS unit
+     */
     insetPadding: [String, Number],
+    /**
+     * Радиус скругления подложки в режиме `inset`. Число — в пикселях, строка — с любой CSS-единицей
+     * @en Corner radius of the background in `inset` mode. A number is in pixels, a string takes any CSS unit
+     */
     insetRadius: [String, Number],
+    /**
+     * Выравнивание вкладок внутри полосы
+     * @en Alignment of the tabs inside the bar
+     */
     align: {
       type: String,
       default: "start"

package/dist/esm-node/src/components/CdsTag/CdsTag.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-tag {
     position: relative;

package/dist/esm-node/src/components/CdsTag/api/CdsTag.props.mjs

@@ -11,56 +11,110 @@ import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mj
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 const defineCdsTagProps = propsFactory(
   {
-    /** CSS-класс, применяемый к активной (выбранной) ссылке-тегу. */
+    /**
+     * CSS-класс, применяемый к активной (выбранной) ссылке-тегу.
+     * @en CSS class applied to the active (selected) link tag.
+     */
     activeClass: String,
-    /** Аватар, отображаемый после (справа от) контента тега. */
+    /**
+     * Аватар, отображаемый после (справа от) контента тега.
+     * @en Avatar displayed after (to the right of) the tag content.
+     */
     appendAvatar: String,
-    /** Аватар, отображаемый перед (слева от) контентом тега. */
+    /**
+     * Аватар, отображаемый перед (слева от) контентом тега.
+     * @en Avatar displayed before (to the left of) the tag content.
+     */
     prependAvatar: String,
-    /** Иконка, отображаемая после (справа от) контента тега. */
+    /**
+     * Иконка, отображаемая после (справа от) контента тега.
+     * @en Icon displayed after (to the right of) the tag content.
+     */
     appendIcon: IconValue,
-    /** Иконка, отображаемая перед (слева от) контентом тега. */
+    /**
+     * Иконка, отображаемая перед (слева от) контентом тега.
+     * @en Icon displayed before (to the left of) the tag content.
+     */
     prependIcon: IconValue,
-    /** Добавляет кнопку закрытия, скрывающую тег. */
+    /**
+     * Добавляет кнопку закрытия, скрывающую тег.
+     * @en Adds a close button that hides the tag.
+     */
     closable: Boolean,
-    /** Добавляет кнопку удаления (псевдоним `closable`). */
+    /**
+     * Добавляет кнопку удаления (псевдоним `closable`).
+     * @en Adds a remove button (alias for `closable`).
+     */
     removable: Boolean,
-    /** Делает тег перетаскиваемым (нативный drag-and-drop). */
+    /**
+     * Делает тег перетаскиваемым (нативный drag-and-drop).
+     * @en Makes the tag draggable (native drag-and-drop).
+     */
     draggable: Boolean,
-    /** Отображает иконку-индикатор выбора при использовании тега в группе (CdsTagGroup). */
+    /**
+     * Отображает иконку-индикатор выбора при использовании тега в группе (CdsTagGroup).
+     * @en Shows the selection indicator icon when the tag is used inside a group (CdsTagGroup).
+     */
     filter: Boolean,
-    /** Применяет стиль «label» с уменьшенным скруглением углов. */
+    /**
+     * Применяет стиль «label» с уменьшенным скруглением углов.
+     * @en Applies the “label” style with a smaller corner radius.
+     */
     label: Boolean,
-    /** Делает углы тега полностью скруглёнными. */
+    /**
+     * Делает углы тега полностью скруглёнными.
+     * @en Makes the corners of the tag fully rounded.
+     */
     pill: Boolean,
-    /** Назначает тегу стили и поведение ссылки. */
+    /**
+     * Назначает тегу стили и поведение ссылки.
+     * @en Gives the tag the styles and the behavior of a link.
+     */
     link: {
       type: Boolean,
       default: void 0
     },
-    /** Иконка кнопки закрытия. */
+    /**
+     * Иконка кнопки закрытия.
+     * @en Icon of the close button.
+     */
     closeIcon: {
       type: IconValue,
       default: "remove"
     },
-    /** Доступная подпись (aria-label) для кнопки закрытия. */
+    /**
+     * Доступная подпись (aria-label) для кнопки закрытия.
+     * @en Accessible label (aria-label) for the close button.
+     */
     closeLabel: {
       type: String,
       default: "$cds.close"
     },
-    /** Иконка индикатора выбора (актуально вместе с `filter`). */
+    /**
+     * Иконка индикатора выбора (актуально вместе с `filter`).
+     * @en Icon of the selection indicator (relevant together with `filter`).
+     */
     filterIcon: {
       type: IconValue,
       default: "check-fill"
     },
-    /** Видимость тега (v-model). При `false` тег не отображается. */
+    /**
+     * Видимость тега (v-model). При `false` тег не отображается.
+     * @en Visibility of the tag (v-model). When `false` the tag is not rendered.
+     */
     modelValue: {
       type: Boolean,
       default: true
     },
-    /** Обработчик клика по тегу. */
+    /**
+     * Обработчик клика по тегу.
+     * @en Click handler for the tag.
+     */
     onClick: EventProp(),
-    /** Однократный обработчик клика по тегу. */
+    /**
+     * Однократный обработчик клика по тегу.
+     * @en One-time click handler for the tag.
+     */
     onClickOnce: EventProp(),
     ...defineTextProps(),
     ...pick(defineColorProps(), ["color", "activeColor", "textColor"]),

package/dist/esm-node/src/components/CdsTagGroup/CdsTagGroup.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-tag-group {
     min-width: 0;

package/dist/esm-node/src/components/CdsTagGroup/CdsTagGroup.vue_vue_type_script_setup_true_lang.mjs

@@ -43,15 +43,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     __expose({
-      /** Идентификаторы выбранных тегов */
+      /**
+       * Идентификаторы выбранных тегов
+       * @en Ids of the selected tags
+       */
       selected,
-      /** Выбрать тег по id */
+      /**
+       * Выбрать тег по id
+       * @en Select a tag by id
+       */
       select,
-      /** Проверить, выбран ли тег по id */
+      /**
+       * Проверить, выбран ли тег по id
+       * @en Check whether a tag with the given id is selected
+       */
       isSelected,
-      /** Выбрать предыдущий тег */
+      /**
+       * Выбрать предыдущий тег
+       * @en Select the previous tag
+       */
       prev,
-      /** Выбрать следующий тег */
+      /**
+       * Выбрать следующий тег
+       * @en Select the next tag
+       */
       next
     });
     return () => {

package/dist/esm-node/src/components/CdsTagGroup/api/CdsTagGroup.props.mjs

@@ -8,13 +8,21 @@ import { a7 as pick } from "../../../utils/helpers.mjs";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 const defineCdsTagGroupProps = propsFactory(
   {
-    /** Располагает теги в несколько строк с переносом вместо горизонтальной прокрутки. */
+    /**
+     * Располагает теги в несколько строк с переносом вместо горизонтальной прокрутки.
+     * @en Lays the tags out in several rows with wrapping instead of a horizontal scroll.
+     */
     column: Boolean,
-    /** Показывает у выбранных тегов иконку-галочку (прокидывается в `CdsTag`). */
+    /**
+     * Показывает у выбранных тегов иконку-галочку (прокидывается в `CdsTag`).
+     * @en Shows a check icon on the selected tags (passed down to `CdsTag`).
+     */
     filter: Boolean,
     ...defineCdsSlideGroupProps({ scrollToActive: false }),
     ...pick(defineColorProps(), ["color", "activeColor"]),
-    ...defineGroupProps({ selectedClass: `${CdsTagConstants.rootClass}--selected` }),
+    ...defineGroupProps({
+      selectedClass: `${CdsTagConstants.rootClass}--selected`
+    }),
     ...defineThemeProps()
   },
   CdsTagGroupConstants.name