@uzum-tech/ui 2.0.5 → 2.0.7

package/es/mapping-card/src/MappingCardParts/Header.mjs

@@ -33,6 +33,31 @@ export default defineComponent({
     const theme = mergedThemeRef.value;
     const locale = localeRef.value;
     const renderTextProp = value => typeof value === 'function' ? value() : value;
+    const renderInfoText = (title, description) => {
+      if (!title && !description) return null;
+      return h("div", {
+        class: `${prefix}-mapping-card__header-info-text`
+      }, title && h("div", {
+        class: `${prefix}-mapping-card__header-title`
+      }, renderTextProp(title)), description && h("div", {
+        class: `${prefix}-mapping-card__header-description`
+      }, renderTextProp(description)));
+    };
+    const mainInfo = resolveSlot(slots.headerInfo, () => {
+      var _a;
+      const fromProp = (_a = props.headerInfo) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (fromProp) return [fromProp];
+      const fallback = renderInfoText(props.title, props.description);
+      return fallback ? [fallback] : [];
+    });
+    const subInfo = resolveSlot(slots.headerSubInfo, () => {
+      var _a;
+      const fromProp = (_a = props.headerSubInfo) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (fromProp) return [fromProp];
+      const fallback = renderInfoText(props.subTitle, props.subDescription);
+      return fallback ? [fallback] : [];
+    });
+    const hasSubInfo = subInfo.length > 0;
     return h("div", {
       class: `${prefix}-mapping-card__header`
     }, h(UFlex, {
@@ -40,13 +65,7 @@ export default defineComponent({
       size: "small",
       class: `${prefix}-mapping-card__header-info`
     }, {
-      default: () => h(Fragment, null, h("div", {
-        class: `${prefix}-mapping-card__header-info-text`
-      }, h("div", {
-        class: `${prefix}-mapping-card__header-title`
-      }, renderTextProp(props.title)), props.description && h("div", {
-        class: `${prefix}-mapping-card__header-description`
-      }, renderTextProp(props.description))), !props.hideCopy && h(UTooltip, null, {
+      default: () => h(Fragment, null, mainInfo, !props.hideCopy && h(UTooltip, null, {
         trigger: () => {
           var _a;
           return h(UButton, Object.assign({
@@ -72,7 +91,9 @@ export default defineComponent({
           });
         },
         default: () => locale.copyTooltip
-      }))
+      }), hasSubInfo && h("div", {
+        class: `${prefix}-mapping-card__header-info-divider`
+      }), hasSubInfo && subInfo)
     }), !props.hideHeaderActions && h(UFlex, {
       align: "center",
       size: "small"
@@ -86,9 +107,9 @@ export default defineComponent({
             return h(USwitch, Object.assign({}, (_a = props.headerSwitchProps) !== null && _a !== void 0 ? _a : {}, {
               theme: theme.peers.Switch,
               themeOverrides: theme.peerOverrides.Switch,
-              onUpdateValue: val => {
+              onUpdateValue: value => {
                 var _a;
-                return (_a = props.onSwitchChange) === null || _a === void 0 ? void 0 : _a.call(props, val);
+                return (_a = props.onSwitchChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
               }
             }));
           },

package/es/mapping-card/src/interface.d.ts

@@ -32,6 +32,10 @@ export interface MappingRow {
 export interface MappingCardInterface {
     title: string | (() => VNodeChild);
     description: string | (() => VNodeChild);
+    subTitle?: string | (() => VNodeChild);
+    subDescription?: string | (() => VNodeChild);
+    headerInfo?: () => VNodeChild;
+    headerSubInfo?: () => VNodeChild;
     rows: MappingRow[];
     cols?: number;
     defaultSpan?: number;
@@ -61,6 +65,10 @@ export interface MappingCardListInterface {
 export declare const mappingCardProps: {
     readonly title: PropType<MappingCardInterface["title"]>;
     readonly description: PropType<MappingCardInterface["description"]>;
+    readonly subTitle: PropType<MappingCardInterface["subTitle"]>;
+    readonly subDescription: PropType<MappingCardInterface["subDescription"]>;
+    readonly headerInfo: PropType<MappingCardInterface["headerInfo"]>;
+    readonly headerSubInfo: PropType<MappingCardInterface["headerSubInfo"]>;
     readonly rows: PropType<MappingCardInterface["rows"]>;
     readonly cols: {
         readonly type: PropType<MappingCardInterface["cols"]>;

package/es/mapping-card/src/interface.mjs

@@ -1,6 +1,10 @@
 export const mappingCardProps = {
   title: [String, Function],
   description: [String, Function],
+  subTitle: [String, Function],
+  subDescription: [String, Function],
+  headerInfo: Function,
+  headerSubInfo: Function,
   rows: Array,
   cols: {
     type: Number,

package/es/mapping-card/src/styles/index.cssr.mjs

@@ -14,7 +14,7 @@ export default c([cB('mapping-card', `
  border-radius: var(--u-border-radius);
  overflow: hidden;
  box-sizing: border-box;
-`, [cE('header', `
+ `, [cE('header', `
  padding: var(--u-header-padding);
  display: flex;
  align-items: center;
@@ -33,11 +33,18 @@ export default c([cB('mapping-card', `
  min-width: 0;
  `), cE('header-info-text', `
  min-width: 0;
+ margin-right: 12px;
  `), cE('header-title', `
  color: var(--u-title-color);
  `), cE('header-description', `
  color: var(--u-description-color);
  margin-top: 2px;
+ `), cE('header-info-divider', `
+ margin-right: 12px;
+ width: 1px;
+ align-self: stretch;
+ background: var(--u-border-color);
+ flex-shrink: 0;
  `), cE('body', `
  display: flex;
  padding: var(--u-body-padding);

package/es/tree/src/Tree.d.ts

@@ -180,7 +180,7 @@ export declare const treeProps: {
     readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly indent: {
         readonly type: NumberConstructor;
-        readonly default: 24;
+        readonly default: 36;
     };
     readonly allowDrop: {
         readonly type: PropType<AllowDrop>;
@@ -206,16 +206,17 @@ export declare const treeProps: {
         readonly default: true;
     };
     readonly getChildren: PropType<GetChildren>;
-    readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragstart: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragover: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDrop: PropType<MaybeArray<(e: TreeDropInfo) => void>>;
+    readonly onDragenter: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragleave: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragend: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragstart: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragover: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDrop: PropType<MaybeArray<(event: TreeDropInfo) => void>>;
     readonly onUpdateCheckedKeys: PropType<MaybeArray<OnUpdateCheckedKeys>>;
     readonly 'onUpdate:checkedKeys': PropType<MaybeArray<OnUpdateCheckedKeys>>;
     readonly onUpdateSelectedKeys: PropType<MaybeArray<OnUpdateSelectedKeys>>;
     readonly 'onUpdate:selectedKeys': PropType<MaybeArray<OnUpdateSelectedKeys>>;
+    readonly onScroll: PropType<MaybeArray<(event: Event) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
         lineHeight: string;
@@ -226,6 +227,8 @@ export declare const treeProps: {
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;
@@ -325,6 +328,8 @@ export declare const treeProps: {
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;
@@ -424,6 +429,8 @@ export declare const treeProps: {
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;
@@ -626,7 +633,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly indent: {
         readonly type: NumberConstructor;
-        readonly default: 24;
+        readonly default: 36;
     };
     readonly allowDrop: {
         readonly type: PropType<AllowDrop>;
@@ -652,16 +659,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly default: true;
     };
     readonly getChildren: PropType<GetChildren>;
-    readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragstart: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragover: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDrop: PropType<MaybeArray<(e: TreeDropInfo) => void>>;
+    readonly onDragenter: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragleave: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragend: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragstart: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragover: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDrop: PropType<MaybeArray<(event: TreeDropInfo) => void>>;
     readonly onUpdateCheckedKeys: PropType<MaybeArray<OnUpdateCheckedKeys>>;
     readonly 'onUpdate:checkedKeys': PropType<MaybeArray<OnUpdateCheckedKeys>>;
     readonly onUpdateSelectedKeys: PropType<MaybeArray<OnUpdateSelectedKeys>>;
     readonly 'onUpdate:selectedKeys': PropType<MaybeArray<OnUpdateSelectedKeys>>;
+    readonly onScroll: PropType<MaybeArray<(event: Event) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
         lineHeight: string;
@@ -672,6 +680,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;
@@ -771,6 +781,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;
@@ -870,6 +882,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;
@@ -973,6 +987,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -1362,15 +1378,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
     } | null>;
-    handleFocusout: (e: FocusEvent) => void;
-    handleDragLeaveTree: (e: DragEvent) => void;
-    handleScroll: () => void;
+    handleFocusout: (event: FocusEvent) => void;
+    handleDragLeaveTree: (event: DragEvent) => void;
+    handleScroll: (event: Event) => void;
     getScrollContainer: () => HTMLElement | null | undefined;
     getScrollContent: () => HTMLElement | null | undefined;
     handleAfterEnter: () => void;
     handleResize: () => void;
     cssVars: import("vue").ComputedRef<{
         '--u-arrow-color': string;
+        '--u-switcher-color': string;
+        '--u-switcher-size': string;
         '--u-loading-color': string;
         '--u-bezier': string;
         '--u-font-size': string;
@@ -1510,7 +1528,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly indent: {
         readonly type: NumberConstructor;
-        readonly default: 24;
+        readonly default: 36;
     };
     readonly allowDrop: {
         readonly type: PropType<AllowDrop>;
@@ -1536,16 +1554,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly default: true;
     };
     readonly getChildren: PropType<GetChildren>;
-    readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragstart: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDragover: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDrop: PropType<MaybeArray<(e: TreeDropInfo) => void>>;
+    readonly onDragenter: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragleave: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragend: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragstart: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDragover: PropType<MaybeArray<(event: TreeDragInfo) => void>>;
+    readonly onDrop: PropType<MaybeArray<(event: TreeDropInfo) => void>>;
     readonly onUpdateCheckedKeys: PropType<MaybeArray<OnUpdateCheckedKeys>>;
     readonly 'onUpdate:checkedKeys': PropType<MaybeArray<OnUpdateCheckedKeys>>;
     readonly onUpdateSelectedKeys: PropType<MaybeArray<OnUpdateSelectedKeys>>;
     readonly 'onUpdate:selectedKeys': PropType<MaybeArray<OnUpdateSelectedKeys>>;
+    readonly onScroll: PropType<MaybeArray<(event: Event) => void>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
         lineHeight: string;
@@ -1556,6 +1575,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;
@@ -1655,6 +1676,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;
@@ -1754,6 +1777,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;

package/es/tree/src/Tree.mjs

@@ -146,7 +146,7 @@ export const treeProps = Object.assign(Object.assign(Object.assign(Object.assign
   scrollbarProps: Object,
   indent: {
     type: Number,
-    default: 24
+    default: 36
   },
   allowDrop: {
     type: Function,
@@ -181,7 +181,8 @@ export const treeProps = Object.assign(Object.assign(Object.assign(Object.assign
   onUpdateCheckedKeys: [Function, Array],
   'onUpdate:checkedKeys': [Function, Array],
   onUpdateSelectedKeys: [Function, Array],
-  'onUpdate:selectedKeys': [Function, Array]
+  'onUpdate:selectedKeys': [Function, Array],
+  onScroll: [Function, Array]
 }), treeSharedProps), {
   // internal props for tree-select
   internalTreeSelect: Boolean,
@@ -657,7 +658,6 @@ export default defineComponent({
         call(_onUpdateSelectedKeys, value, option, meta);
       }
     }
-    // Drag & Drop
     function doDragEnter(info) {
       const {
         onDragenter
@@ -716,7 +716,6 @@ export default defineComponent({
       nodeKeyToBeExpanded = null;
     }
     function handleCheck(node, checked) {
-      // We don't guard for leaf only since we have done it in view layer
       if (props.disabled || isNodeDisabled(node, props.disabledField)) {
         return;
       }
@@ -869,12 +868,10 @@ export default defineComponent({
         }, 1000);
       }
     }
-    // Dnd
     function handleDragEnter({
       event,
       node
     }) {
-      // node should be a tmNode
       if (!props.draggable || props.disabled || isNodeDisabled(node, props.disabledField)) {
         return;
       }
@@ -899,11 +896,10 @@ export default defineComponent({
         node: node.rawNode
       });
     }
-    function handleDragLeaveTree(e) {
-      if (e.target !== e.currentTarget) return;
+    function handleDragLeaveTree(event) {
+      if (event.target !== event.currentTarget) return;
       resetDropState();
     }
-    // Dragend is ok, we don't need to add global listener to reset drag status
     function handleDragEnd({
       event,
       node
@@ -1180,19 +1176,23 @@ export default defineComponent({
       });
       resetDndState();
     }
-    function handleScroll() {
+    function doScroll(event) {
+      props.onScroll && call(props.onScroll, event);
+    }
+    function handleScroll(event) {
       syncScrollbar();
+      doScroll(event);
     }
     function handleResize() {
       syncScrollbar();
     }
-    function handleFocusout(e) {
+    function handleFocusout(event) {
       var _a;
       if (props.virtualScroll || props.internalScrollable) {
         const {
           value: scrollbarInst
         } = scrollbarInstRef;
-        if ((_a = scrollbarInst === null || scrollbarInst === void 0 ? void 0 : scrollbarInst.containerRef) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) {
+        if ((_a = scrollbarInst === null || scrollbarInst === void 0 ? void 0 : scrollbarInst.containerRef) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
           return;
         }
         pendingNodeKeyRef.value = null;
@@ -1200,7 +1200,7 @@ export default defineComponent({
         const {
           value: selfEl
         } = selfElRef;
-        if (selfEl === null || selfEl === void 0 ? void 0 : selfEl.contains(e.relatedTarget)) return;
+        if (selfEl === null || selfEl === void 0 ? void 0 : selfEl.contains(event.relatedTarget)) return;
         pendingNodeKeyRef.value = null;
       }
     }
@@ -1320,6 +1320,8 @@ export default defineComponent({
           nodeColorPressed,
           nodeColorActive,
           arrowColor,
+          switcherColor,
+          switcherSize,
           loadingColor,
           nodeTextColor,
           nodeTextColorDisabled,
@@ -1334,6 +1336,8 @@ export default defineComponent({
       const nodeContentHeight = pxfy(depx(nodeHeight) - depx(lineOffsetTop) - depx(lineOffsetBottom));
       return {
         '--u-arrow-color': arrowColor,
+        '--u-switcher-color': switcherColor,
+        '--u-switcher-size': switcherSize,
         '--u-loading-color': loadingColor,
         '--u-bezier': cubicBezierEaseInOut,
         '--u-font-size': fontSize,
@@ -1465,6 +1469,7 @@ export default defineComponent({
       return h(UxScrollbar, Object.assign({}, scrollbarProps, {
         class: treeClass,
         tabindex: tabindex,
+        onScroll: this.handleScroll,
         onKeydown: mergedFocusable ? handleKeydown : undefined,
         onFocusout: mergedFocusable ? handleFocusout : undefined,
         style: this.cssVars,

package/es/tree/src/TreeNodeCheckbox.d.ts

@@ -28,6 +28,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -147,6 +149,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;

package/es/tree/src/TreeNodeSwitcher.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, h, inject } from 'vue';
 import { UBaseIcon, UBaseLoading, UIconSwitchTransition } from "../../_internal/index.mjs";
-import { SwitcherIcon } from "../../_internal/icons/index.mjs";
+import { ChevronRightIcon } from "../../_internal/icons/index.mjs";
 import { treeInjectionKey } from "./interface.mjs";
 export default defineComponent({
   name: 'UTreeSwitcher',
@@ -28,6 +28,23 @@ export default defineComponent({
       renderSwitcherIconRef,
       spinPropsRef
     } = inject(treeInjectionKey, null);
+    const renderSwitchIcon = () => {
+      const {
+        value: renderSwitcherIcon
+      } = renderSwitcherIconRef;
+      return h(UIconSwitchTransition, null, {
+        default: () => renderSwitcherIcon ? renderSwitcherIcon({
+          expanded: props.expanded,
+          selected: props.selected,
+          option: props.tmNode.rawNode
+        }) : h(UBaseIcon, {
+          clsPrefix: props.clsPrefix,
+          key: "switcher"
+        }, {
+          default: () => h(ChevronRightIcon, null)
+        })
+      });
+    };
     return () => {
       const {
         clsPrefix,
@@ -45,31 +62,12 @@ export default defineComponent({
         onClick: onClick
       }, h("div", {
         class: `${clsPrefix}-tree-node-switcher__icon`
-      }, h(UIconSwitchTransition, null, {
-        default: () => {
-          if (props.loading) {
-            return h(UBaseLoading, Object.assign({
-              clsPrefix: clsPrefix,
-              key: "loading",
-              radius: 85,
-              strokeWidth: 20
-            }, spinPropsRef === null || spinPropsRef === void 0 ? void 0 : spinPropsRef.value));
-          }
-          const {
-            value: renderSwitcherIcon
-          } = renderSwitcherIconRef;
-          return renderSwitcherIcon ? renderSwitcherIcon({
-            expanded: props.expanded,
-            selected: props.selected,
-            option: props.tmNode.rawNode
-          }) : h(UBaseIcon, {
-            clsPrefix: clsPrefix,
-            key: "switcher"
-          }, {
-            default: () => h(SwitcherIcon, null)
-          });
-        }
-      })));
+      }, props.loading ? h(UBaseLoading, Object.assign({
+        clsPrefix: clsPrefix,
+        key: "loading",
+        radius: 85,
+        strokeWidth: 20
+      }, spinPropsRef === null || spinPropsRef === void 0 ? void 0 : spinPropsRef.value)) : renderSwitchIcon()));
     };
   }
 });

package/es/tree/src/styles/index.cssr.mjs

@@ -4,6 +4,8 @@ import { c, cB, cE, cM, cNotM } from "../../../_utils/cssr/index.mjs";
 const iconSwitchTransitionNode = iconSwitchTransition();
 // vars:
 // --u-arrow-color
+// --u-switcher-color
+// --u-switcher-size
 // --u-bezier
 // --u-font-size
 // --u-node-border-radius
@@ -95,19 +97,20 @@ export default cB('tree', `
  vertical-align: bottom;
  `, [cE('icon', `
  position: relative;
- height: 14px;
- width: 14px;
+ height: var(--u-switcher-size);
+ width: var(--u-switcher-size);
  display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
  color: var(--u-arrow-color);
- transition: color .3s var(--u-bezier);
+ background-color: var(--u-switcher-color);
+ transition:
+ color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier);
  font-size: 14px;
  `, [cB('icon', [iconSwitchTransitionNode]), cB('base-loading', `
  color: var(--u-loading-color);
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
  `, [iconSwitchTransitionNode]), cB('base-icon', [iconSwitchTransitionNode])]), cM('hide', 'visibility: hidden;'), cM('expanded', 'transform: rotate(90deg);')]), cB('tree-node-checkbox', `
  display: inline-flex;
  height: var(--u-node-content-height);

package/es/tree/styles/light.d.ts

@@ -9,6 +9,8 @@ export declare function self(vars: ThemeCommonVars): {
     nodeColorPressed: string;
     nodeColorActive: string;
     arrowColor: string;
+    switcherColor: string;
+    switcherSize: string;
     nodeTextColor: string;
     nodeTextColorDisabled: string;
     loadingColor: string;
@@ -25,6 +27,8 @@ declare const treeLight: import("../../_mixins").Theme<"Tree", {
     nodeColorPressed: string;
     nodeColorActive: string;
     arrowColor: string;
+    switcherColor: string;
+    switcherSize: string;
     nodeTextColor: string;
     nodeTextColorDisabled: string;
     loadingColor: string;

package/es/tree/styles/light.mjs

@@ -25,6 +25,8 @@ export function self(vars) {
     nodeColorPressed: elementsQuaternary,
     nodeColorActive: brandPrimary100,
     arrowColor: elementsPrimary,
+    switcherColor: elementsTertiary,
+    switcherSize: '22px',
     nodeTextColor: textPrimary,
     nodeTextColorDisabled: textSecondary,
     loadingColor: elementsPrimary,

package/es/tree-select/index.d.ts

@@ -1,5 +1,5 @@
 export type { TreeOverrideNodeClickBehavior as TreeSelectOverrideNodeClickBehavior, TreeOverrideNodeClickBehaviorReturn as TreeSelectOverrideNodeClickBehaviorReturn } from '../tree';
-export type { TreeSelectInst, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './src/interface';
+export type { OnScrollOptionEnd, TreeSelectInst, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './src/interface';
 export type * from './src/public-types';
 export { treeSelectProps, default as UTreeSelect } from './src/TreeSelect';
 export type { TreeSelectProps, TreeSelectSlots } from './src/TreeSelect';