@central-design-system/components 4.0.0-alpha.3 → 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/CdsTable/context/sticky.mjs

@@ -1,5 +1,5 @@
-import { i as isStyleSupport } from "../../../utils/dom/dom.mjs";
 import { onMounted, ref } from "vue";
+import { i as isStyleSupport } from "../../../utils/dom/dom.mjs";
 const supportSticky = ref(false);
 const useProvideSticky = () => {
   onMounted(() => {

package/dist/esm-node/src/components/CdsTable/utils/column.mjs

@@ -1,5 +1,5 @@
-import { a as flattenChildren } from "../../../utils/use/flattenChildren.mjs";
 import { camelize } from "vue";
+import { a as flattenChildren } from "../../../utils/use/flattenChildren.mjs";
 function convertChildrenToColumn(elements = []) {
   const flattenElements = flattenChildren(elements);
   const columns = [];

package/dist/esm-node/src/components/CdsTabs/CdsTab.vue_vue_type_script_setup_true_lang.mjs

@@ -5,12 +5,12 @@ import { u as useDirection } from "../../composables/useDirection/useDirection.m
 import { s as standardEasing } from "../../composables/useTransition/useTransition.mjs";
 import { f as filterProps } from "../../core/defineComponent.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
-import { a3 as omit } from "../../utils/helpers.mjs";
-import { a as animate } from "../../utils/dom/animation.mjs";
-import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { C as CdsTabConstants, d as CdsTabsSymbol } from "./api/CdsTabs.constants.mjs";
 import { d as defineCdsTabProps } from "./api/CdsTabs.props.mjs";
 import { u as useTextColor, a as useBackgroundColor } from "../../composables/useColor/useColor.mjs";
+import { a3 as omit } from "../../utils/helpers.mjs";
+import { c as classNames } from "../../utils/dom/classNames.mjs";
+import { a as animate } from "../../utils/dom/animation.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsTabConstants.name

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/CdsTabs.vue_vue_type_script_setup_true_lang.mjs

@@ -6,14 +6,14 @@ import { u as useScopeId } from "../../composables/useScopeId/useScopeId.mjs";
 import { f as filterProps } from "../../core/defineComponent.mjs";
 import { u as useDefaults, p as provideDefaults } from "../../core/useDefaults.mjs";
 import { u as useProxyModel } from "../../core/useProxyModel.mjs";
-import { l as isObject, u as convertToUnit } from "../../utils/helpers.mjs";
-import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { c as CdsTabsConstants, d as CdsTabsSymbol } from "./api/CdsTabs.constants.mjs";
 import { c as defineCdsTabsProps } from "./api/CdsTabs.props.mjs";
 import { _ as _sfc_main$1 } from "./CdsTab.vue_vue_type_script_setup_true_lang.mjs";
 import { _ as _sfc_main$2 } from "./CdsTabsView.vue_vue_type_script_setup_true_lang.mjs";
 import { _ as _sfc_main$3 } from "./CdsTabsViewItem.vue_vue_type_script_setup_true_lang.mjs";
 import { a as useBackgroundColor } from "../../composables/useColor/useColor.mjs";
+import { l as isObject, u as convertToUnit } from "../../utils/helpers.mjs";
+import { c as classNames } from "../../utils/dom/classNames.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsTabsConstants.name

package/dist/esm-node/src/components/CdsTabs/CdsTabsView.vue_vue_type_script_setup_true_lang.mjs

@@ -5,8 +5,8 @@ import { a as defineCdsTabsView } from "./api/CdsTabs.props.mjs";
 import { f as filterProps } from "../../core/defineComponent.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { u as useProxyModel } from "../../core/useProxyModel.mjs";
-import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { a as CdsTabsViewConstants, d as CdsTabsSymbol } from "./api/CdsTabs.constants.mjs";
+import { c as classNames } from "../../utils/dom/classNames.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsTabsViewConstants.name

package/dist/esm-node/src/components/CdsTabs/CdsTabsViewItem.vue_vue_type_script_setup_true_lang.mjs

@@ -3,9 +3,9 @@ import { a as CdsSlideViewItem } from "../CdsSlideView/index.mjs";
 import { a as defineCdsSlideViewItemProps } from "../CdsSlideView/api/CdsSlideView.props.mjs";
 import { f as filterProps } from "../../core/defineComponent.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
-import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { b as CdsTabsViewItemConstants } from "./api/CdsTabs.constants.mjs";
 import { b as defineCdsTabsViewItem } from "./api/CdsTabs.props.mjs";
+import { c as classNames } from "../../utils/dom/classNames.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsTabsViewItemConstants.name

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

@@ -4,14 +4,30 @@ import { d as defineCdsSlideViewProps, a as defineCdsSlideViewItemProps } from "
 import { d as defineDirectionProps } from "../../../composables/useDirection/useDirection.mjs";
 import { a as defineTagProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
-import { a3 as omit, a7 as pick } from "../../../utils/helpers.mjs";
 import { C as CdsTabConstants, a as CdsTabsViewConstants, b as CdsTabsViewItemConstants, c as CdsTabsConstants } from "./CdsTabs.constants.mjs";
+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/CdsTag.vue_vue_type_script_setup_true_lang.mjs

@@ -4,14 +4,14 @@ import { u as useGroupItem } from "../../composables/useGroup/useGroupItem.mjs";
 import { a as useLocale } from "../../composables/useLocale/useLocale.mjs";
 import { u as useLink } from "../../composables/useRouter/useRouter.mjs";
 import { u as useText } from "../../composables/useText/useText.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { u as useProxyModel } from "../../core/useProxyModel.mjs";
 import { a as CdsTransitionExpandX } from "../../transitions/index.mjs";
-import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { C as CdsTagConstants, a as CdsTagGroupSymbol } from "./api/CdsTag.constants.mjs";
 import { d as defineCdsTagProps } from "./api/CdsTag.props.mjs";
 import { u as useSize } from "../../composables/useSize/useSize.mjs";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
+import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { C as CdsIcon } from "../CdsIcon/index.mjs";
 import { C as CdsDefaultsProvider } from "../CdsDefaultsProvider/index.mjs";
 import { C as CdsAvatar } from "../CdsAvatar/index.mjs";