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

package/dist/es/src/components/CdsToolbar/CdsToolbar.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-toolbar {
     position: relative;

package/dist/es/src/components/CdsToolbar/CdsToolbar.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
 import { defineComponent, useSlots, computed, createVNode, unref } from "vue";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
 import { C as CdsToolbarConstants } from "./api/CdsToolbar.constants.js";
 import { d as defineCdsToolbarProps } from "./api/CdsToolbar.props.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { a as useBackgroundColor, u as useTextColor } from "../../composables/useColor/useColor.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/es/src/components/CdsToolbar/api/CdsToolbar.props.js

@@ -1,27 +1,39 @@
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { a7 as pick } from "../../../utils/helpers.js";
 import { C as CdsToolbarConstants, a as CdsToolbarTitleConstants } from "./CdsToolbar.constants.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
 const defineCdsToolbarProps = propsFactory(
   {
-    /** Вложенный тулбар (отступ слева). */
+    /**
+     * Вложенный тулбар (отступ слева).
+     * @en Nested toolbar (indented from the left).
+     */
     inset: {
       type: Boolean,
       default: false
     },
-    /** Показать нижнюю границу. */
+    /**
+     * Показать нижнюю границу.
+     * @en Shows the bottom border.
+     */
     bordered: {
       type: Boolean,
       default: false
     },
-    /** Убрать отступ с одной стороны: `start` или `end`. */
+    /**
+     * Убрать отступ с одной стороны: `start` или `end`.
+     * @en Removes the padding on one side: `start` or `end`.
+     */
     noGutter: {
       type: String,
       default: void 0
     },
-    /** Убрать все внутренние отступы. */
+    /**
+     * Убрать все внутренние отступы.
+     * @en Removes all inner paddings.
+     */
     noGutters: {
       type: Boolean,
       default: false
@@ -34,7 +46,10 @@ const defineCdsToolbarProps = propsFactory(
 );
 const defineCdsToolbarTitleProps = propsFactory(
   {
-    /** Сжимать заголовок по содержимому вместо растягивания. */
+    /**
+     * Сжимать заголовок по содержимому вместо растягивания.
+     * @en Shrinks the title to its content instead of stretching it.
+     */
     shrink: {
       type: Boolean,
       default: false

package/dist/es/src/components/CdsTooltip/CdsTooltip.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-tooltip > .cds-overlay__content {
     display: inline-block;

package/dist/es/src/components/CdsTooltip/api/CdsTooltip.props.js

@@ -4,15 +4,30 @@ import { a3 as omit } from "../../../utils/helpers.js";
 import { C as CdsTooltipConstants } from "./CdsTooltip.constants.js";
 const defineCdsTooltipProps = propsFactory(
   {
-    /** Уникальный идентификатор для связывания подсказки с её активатором. Если не указано, будет сгенерирован автоматически. */
+    /**
+     * Уникальный идентификатор для связывания подсказки с её активатором. Если не указано, будет сгенерирован автоматически.
+     * @en Unique id that links the tooltip to its activator. Generated automatically when omitted.
+     */
     id: String,
-    /** Разрешает взаимодействие с содержимым подсказки: наведение курсора на контент не закрывает её. */
+    /**
+     * Разрешает взаимодействие с содержимым подсказки: наведение курсора на контент не закрывает её.
+     * @en Allows interaction with the tooltip content: hovering the content does not close it.
+     */
     interactive: Boolean,
-    /** Скрывает стрелку-указатель, направленную на активатор. По умолчанию стрелка отображается. */
+    /**
+     * Скрывает стрелку-указатель, направленную на активатор. По умолчанию стрелка отображается.
+     * @en Hides the arrow pointing at the activator. The arrow is shown by default.
+     */
     hideArrow: Boolean,
-    /** Текст всплывающей подсказки. Используется, если не передан слот default. */
+    /**
+     * Текст всплывающей подсказки. Используется, если не передан слот default.
+     * @en Text of the tooltip. Used when the default slot is not passed.
+     */
     text: String,
-    /** Цвет фона подсказки. */
+    /**
+     * Цвет фона подсказки.
+     * @en Background color of the tooltip.
+     */
     color: String,
     ...omit(
       defineCdsOverlayProps({

package/dist/es/src/components/CdsTree/CdsTree.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-tree {
     font-family: inherit;

package/dist/es/src/components/CdsTree/CdsTree.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,5 @@
 import { defineComponent, useSlots, useAttrs, ref, computed, unref, h } from "vue";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { f as filterEmpty } from "../../utils/use/flattenChildren.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
@@ -7,7 +8,6 @@ import { d as defineCdsTreeProps } from "./api/CdsTree.props.js";
 import { D as DropIndicator } from "./components/DropIndicator.js";
 import { r as renderSwitcherIcon } from "./components/SwitcherIcon.js";
 import { T as TreeProvider } from "./components/TreeProvider.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsTreeConstants.name,
@@ -66,11 +66,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("select", selectedKeys, eventObj);
     };
     __expose({
+      /**
+       * Ссылка на внутренний экземпляр дерева.
+       * @en Reference to the internal tree instance.
+       */
       treeRef,
       onNodeExpand: (...args) => {
         var _a;
         (_a = unref(treeRef)) == null ? void 0 : _a.onNodeExpand(...args);
       },
+      /**
+       * Прокручивает дерево к узлу по ключу или к указанной позиции.
+       * @en Scrolls the tree to a node by its key or to a given position.
+       */
       scrollTo,
       selectedKeys: computed(() => {
         var _a;
@@ -80,6 +88,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         var _a;
         return (_a = unref(treeRef)) == null ? void 0 : _a.checkedKeys;
       }),
+      /**
+       * Ключи узлов с частично отмеченными потомками — состояние «наполовину выбран».
+       * @en Keys of the nodes with partially checked children — the “half checked” state.
+       */
       halfCheckedKeys: computed(() => {
         var _a;
         return (_a = unref(treeRef)) == null ? void 0 : _a.halfCheckedKeys;
@@ -88,6 +100,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         var _a;
         return (_a = unref(treeRef)) == null ? void 0 : _a.expandedKeys;
       }),
+      /**
+       * Ключи узлов, для которых сейчас идёт ленивая подгрузка потомков.
+       * @en Keys of the nodes whose children are being lazily loaded right now.
+       */
       loadingKeys: computed(() => {
         var _a;
         return (_a = unref(treeRef)) == null ? void 0 : _a.loadingKeys;

package/dist/es/src/components/CdsTree/api/CdsTree.props.js

@@ -1,7 +1,7 @@
 import { d as defineDisabledProps } from "../../../composables/useDisabled/useDisabled.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsTreeConstants } from "./CdsTree.constants.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { m as makeTreeEventsProps } from "../composable/events.js";
 import { m as makeTreeProps } from "../composable/tree.js";
 const defineCdsTreeProps = propsFactory(

package/dist/es/src/components/CdsTree/composable/tree.js

@@ -4,6 +4,7 @@ const makeTreeProps = propsFactory(
   {
     /**
      * Данные дерева
+     * @en Data of the tree
      */
     treeData: {
       type: Array,
@@ -11,6 +12,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Выбираемые узлы дерева
+     * @en Makes the tree nodes selectable
      */
     selectable: {
       type: Boolean,
@@ -18,6 +20,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Множественный выбор узлов дерева
+     * @en Allows selecting several tree nodes
      */
     multiple: {
       type: Boolean,
@@ -25,6 +28,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Добавляет checkbox перед узлами дерева
+     * @en Adds a checkbox before the tree nodes
      */
     checkable: {
       type: Boolean,
@@ -32,6 +36,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Разрешает перетаскивание узлов дерева
+     * @en Allows dragging the tree nodes
      */
     draggable: {
       type: [Object, Boolean],
@@ -42,6 +47,7 @@ const makeTreeProps = propsFactory(
      * Когда указан ключ узла дерева, который также является родительским узлом дерева, все дочерние узлы дерева будут checked;
      * и наоборот, когда указан ключ узла дерева, который является дочерним узлом дерева, его родительский узел дерева также будет checked.
      * Когда checkable и checkStrictly равны true, объект имеет свойство checked и halfChecked. Независимо от того, проверяется ли дочерний или родительский узел дерева, они не будут влиять друг на друга.
+     * @en (v-model) Keys of the checked tree nodes. When the key of a parent node is given, all its child nodes become checked; and the other way around, when the key of a child node is given, its parent node becomes checked too. When `checkable` and `checkStrictly` are both true, the object has the `checked` and `halfChecked` fields, and checking a child or a parent node no longer affects the other.
      */
     checkedKeys: {
       type: [Object, Array],
@@ -49,6 +55,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * (v-model) Определяет ключи раскрытых узлов дерева.
+     * @en (v-model) Keys of the expanded tree nodes.
      */
     expandedKeys: {
       type: Array,
@@ -56,6 +63,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * (v-model) Определяет ключи выбранных узлов дерева.
+     * @en (v-model) Keys of the selected tree nodes.
      */
     selectedKeys: {
       type: Array,
@@ -63,6 +71,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Автоматически раскрывать родительский узел
+     * @en Expands the parent node automatically
      */
     autoExpandParent: {
       type: Boolean,
@@ -70,6 +79,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Раскрывать все узлы по умолчанию
+     * @en Expands all the nodes by default
      */
     defaultExpandedKeys: {
       type: Array,
@@ -77,6 +87,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Раскрывать родительские узлы по умолчанию
+     * @en Expands the parent nodes by default
      */
     defaultExpandParent: {
       type: Boolean,
@@ -84,6 +95,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Раскрывать все узлы по умолчанию
+     * @en Expands all the nodes by default
      */
     defaultExpandAll: {
       type: Boolean,
@@ -91,6 +103,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Выбранные узлы дерева по умолчанию
+     * @en Tree nodes selected by default
      */
     defaultSelectedKeys: {
       type: Array,
@@ -98,6 +111,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Действие, которое будет раскрывать/скрывать узлы дерева
+     * @en Action that expands or collapses the tree nodes
      */
     expandAction: {
       type: [Boolean, String],
@@ -105,6 +119,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Выбирает только родительский узел.
+     * @en Checks only the node itself, without its parents and children.
      */
     checkStrictly: {
       type: Boolean,
@@ -112,6 +127,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Разрешает сброс на узле
+     * @en Decides whether a node accepts a drop
      */
     allowDrop: {
       type: Function,
@@ -119,6 +135,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Узел дерева заполняет все оставшееся горизонтальное пространство
+     * @en The tree node fills all the remaining horizontal space
      */
     blockNode: {
       type: Boolean,
@@ -126,6 +143,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Заменяет поля title, key и children в treeNode на соответствующие поля в treeData
+     * @en Maps the title, key and children fields of a tree node to the matching fields of treeData
      */
     fieldNames: {
       type: Object,
@@ -133,6 +151,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Показывает линии между узлами дерева
+     * @en Shows the lines between the tree nodes
      */
     showLine: {
       type: [Boolean, Object],
@@ -140,6 +159,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Показывает иконку узла дерева
+     * @en Shows the icon of the tree node
      */
     showIcon: {
       type: Boolean,
@@ -147,6 +167,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Функция для фильтрации (выделения) узлов дерева. Когда функция возвращает true, узел дерева будет выделен.
+     * @en Function that filters (highlights) the tree nodes. When it returns true, the node is highlighted.
      */
     filterTreeNode: {
       type: Function,
@@ -154,6 +175,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Загружает данные для узла дерева асинхронно
+     * @en Loads the data of a tree node asynchronously
      */
     loadData: {
       type: Function,
@@ -161,6 +183,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Загруженные узлы дерева. Необходимо для работы с loadData
+     * @en Keys of the already loaded tree nodes. Required to work with loadData
      */
     loadedKeys: {
       type: Array,
@@ -168,6 +191,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Иконка узла дерева (также доступно через slot#icon)
+     * @en Icon of the tree node (also available through slot#icon)
      */
     icon: {
       type: Function,
@@ -175,6 +199,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Иконка открытия/закрытия узла дерева (также доступно через slot#switcherIcon)
+     * @en Icon of the expand/collapse switcher (also available through slot#switcherIcon)
      */
     switcherIcon: {
       type: Function,
@@ -182,6 +207,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Функция анимации открытия/закрытия узла дерева
+     * @en Animation function for expanding and collapsing a tree node
      */
     openAnimation: {
       type: Function,
@@ -190,6 +216,7 @@ const makeTreeProps = propsFactory(
     // Virtual List
     /**
      * Включает виртуальную прокрутку списка в дереве, по-умолчанию включено
+     * @en Enables virtual scrolling of the list inside the tree; enabled by default
      */
     virtual: {
       type: Boolean,
@@ -197,6 +224,7 @@ const makeTreeProps = propsFactory(
     },
     /**
      * Высота виртуального списка для прокрутки
+     * @en Height of the virtual scrolling list
      */
     height: {
       type: Number,

package/dist/es/src/components/CdsTree/composable/treeNode.js

@@ -1,26 +1,96 @@
 import { p as propsFactory } from "../../../core/propsFactory.js";
 const makeTreeNodeProps = propsFactory(
   {
+    /**
+     * Уникальный ключ узла — по нему дерево отслеживает выбор, раскрытие и отметку
+     * @en Unique key of the node — the tree uses it to track selection, expansion and checking
+     */
     eventKey: {
       type: [String, Number],
       default: ""
     },
+    /**
+     * Префикс CSS-классов узла
+     * @en Prefix of the CSS classes of the node
+     */
     prefixCls: String,
+    /**
+     * Заголовок узла дерева: строка или рендер-функция
+     * @en Tree node title: a string or a render function
+     */
     title: [Function, String],
-    data: { type: Object, default: void 0 },
-    parent: { type: Object, default: void 0 },
+    /**
+     * Данные узла — исходный элемент списка, из которого построен узел
+     * @en Data of the node — the original list item the node is built from
+     */
+    data: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Данные родительского узла. Для узлов верхнего уровня не задаётся
+     * @en Data of the parent node. Not set for the top-level nodes
+     */
+    parent: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Признаки «первый на своём уровне» для каждого уровня вложенности — по ним рисуются соединительные линии
+     * @en “First on its level” flags for every nesting level — the connecting lines are drawn from them
+     */
     isStart: { type: Array },
+    /**
+     * Признаки «последний на своём уровне» для каждого уровня вложенности — по ним рисуются соединительные линии
+     * @en “Last on its level” flags for every nesting level — the connecting lines are drawn from them
+     */
     isEnd: { type: Array },
+    /**
+     * Подсвечивает узел как активный
+     * @en Highlights the node as active
+     */
     active: { type: Boolean, default: void 0 },
     onMousemove: { type: Function },
     // By user
+    /**
+     * Узел — лист: не имеет потомков и не показывает переключатель раскрытия
+     * @en The node is a leaf: it has no children and shows no expand switcher
+     */
     isLeaf: { type: Boolean, default: void 0 },
+    /**
+     * Показывает чекбокс у узла
+     * @en Shows a checkbox next to the node
+     */
     checkable: { type: Boolean, default: void 0 },
+    /**
+     * Разрешает выделять узел
+     * @en Allows selecting the node
+     */
     selectable: { type: Boolean, default: void 0 },
+    /**
+     * Блокирует узел: нельзя выделить, отметить или раскрыть
+     * @en Disables the node: it cannot be selected, checked or expanded
+     */
     disabled: { type: Boolean, default: void 0 },
+    /**
+     * Блокирует только чекбокс узла, оставляя сам узел доступным
+     * @en Disables only the checkbox of the node, leaving the node itself available
+     */
     disableCheckbox: { type: Boolean, default: void 0 },
+    /**
+     * Функция, возвращающая иконку узла
+     * @en Function that returns the icon of the node
+     */
     icon: [Function],
+    /**
+     * Функция, возвращающая иконку переключателя раскрытия узла
+     * @en Function that returns the icon of the expand switcher
+     */
     switcherIcon: [Function],
+    /**
+     * Колбэк, получающий DOM-элемент узла после монтирования
+     * @en Callback that receives the DOM element of the node after mounting
+     */
     domRef: { type: Function }
   },
   "tree-node"

package/dist/es/src/components/CdsUploader/CdsUploader.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-uploader-field {
     position: relative;

package/dist/es/src/components/CdsUploader/CdsUploader.vue_vue_type_script_setup_true_lang.js

@@ -3,13 +3,13 @@ import { C as CdsButton } from "../CdsButton/index.js";
 import { C as CdsInput } from "../CdsInput/index.js";
 import { d as defineCdsInputProps } from "../CdsInput/api/CdsInput.props.js";
 import { a as useLocale } from "../../composables/useLocale/useLocale.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { f as filterProps } from "../../core/defineComponent.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { u as useProxyModel } from "../../core/useProxyModel.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
 import { C as CdsUploaderConstants, L as LIST_IGNORE } from "./api/CdsUploader.constants.js";
 import { d as defineCdsUploaderProps } from "./api/CdsUploader.props.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { g as getFileItem, f as fileToObject, u as updateFileList, r as removeFileItem } from "./utils/helpers.js";
 import { _ as _sfc_main$1 } from "./components/UploadList/UploadList.vue_vue_type_script_setup_true_lang.js";
 import { d as defineUploadProps } from "./composables/useUpload.js";
@@ -264,7 +264,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       onSuccess,
       onProgress,
       onError,
+      /**
+       * Текущий список файлов со статусами загрузки.
+       * @en Current list of files together with their upload statuses.
+       */
       fileList: mergedFileList,
+      /**
+       * Ссылка на внутренний элемент загрузки — даёт доступ к программному выбору файлов и прерыванию.
+       * @en Ref to the inner upload element — gives access to choosing files programmatically and to aborting.
+       */
       uploadRef
     });
     return () => {