@uzum-tech/ui 2.0.5 → 2.0.7

package/lib/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/lib/tree/src/Tree.js

@@ -109,7 +109,7 @@ exports.treeProps = Object.assign(Object.assign(Object.assign(Object.assign({},
         default: true
     }, scrollbarProps: Object, indent: {
         type: Number,
-        default: 24
+        default: 36
     }, allowDrop: {
         type: Function,
         default: dnd_1.defaultAllowDrop
@@ -122,7 +122,7 @@ exports.treeProps = Object.assign(Object.assign(Object.assign(Object.assign({},
     }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, nodeProps: Function, keyboard: {
         type: Boolean,
         default: true
-    }, getChildren: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), exports.treeSharedProps), { 
+    }, getChildren: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array], onScroll: [Function, Array] }), exports.treeSharedProps), { 
     // internal props for tree-select
     internalTreeSelect: Boolean, internalScrollable: Boolean, internalScrollablePadding: String, 
     // use it to display
@@ -568,7 +568,6 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, _utils_1.call)(_onUpdateSelectedKeys, value, option, meta);
             }
         }
-        // Drag & Drop
         function doDragEnter(info) {
             const { onDragenter } = props;
             if (onDragenter)
@@ -621,7 +620,6 @@ exports.default = (0, vue_1.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 || (0, utils_1.isNodeDisabled)(node, props.disabledField)) {
                 return;
             }
@@ -772,9 +770,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }, 1000);
             }
         }
-        // Dnd
         function handleDragEnter({ event, node }) {
-            // node should be a tmNode
             if (!props.draggable
                 || props.disabled
                 || (0, utils_1.isNodeDisabled)(node, props.disabledField)) {
@@ -791,12 +787,11 @@ exports.default = (0, vue_1.defineComponent)({
             }
             doDragLeave({ event, node: node.rawNode });
         }
-        function handleDragLeaveTree(e) {
-            if (e.target !== e.currentTarget)
+        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 }) {
             resetDndState();
             if (!props.draggable
@@ -1064,24 +1059,28 @@ exports.default = (0, vue_1.defineComponent)({
             });
             resetDndState();
         }
-        function handleScroll() {
+        function doScroll(event) {
+            props.onScroll && (0, _utils_1.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;
             }
             else {
                 const { value: selfEl } = selfElRef;
-                if (selfEl === null || selfEl === void 0 ? void 0 : selfEl.contains(e.relatedTarget))
+                if (selfEl === null || selfEl === void 0 ? void 0 : selfEl.contains(event.relatedTarget))
                     return;
                 pendingNodeKeyRef.value = null;
             }
@@ -1183,12 +1182,14 @@ exports.default = (0, vue_1.defineComponent)({
             }
         };
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, loadingColor, nodeTextColor, nodeTextColorDisabled, dropMarkColor, nodeWrapperPadding, nodeHeight, lineHeight } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, switcherColor, switcherSize, loadingColor, nodeTextColor, nodeTextColorDisabled, dropMarkColor, nodeWrapperPadding, nodeHeight, lineHeight } } = themeRef.value;
             const lineOffsetTop = (0, seemly_1.getPadding)(nodeWrapperPadding, 'top');
             const lineOffsetBottom = (0, seemly_1.getPadding)(nodeWrapperPadding, 'bottom');
             const nodeContentHeight = (0, seemly_1.pxfy)((0, seemly_1.depx)(nodeHeight) - (0, seemly_1.depx)(lineOffsetTop) - (0, seemly_1.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,
@@ -1263,7 +1264,7 @@ exports.default = (0, vue_1.defineComponent)({
         treeClass.push(this.themeClass);
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         if (internalScrollable) {
-            return ((0, vue_1.h)(_internal_1.UxScrollbar, Object.assign({}, scrollbarProps, { class: treeClass, tabindex: tabindex, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined, style: this.cssVars, contentStyle: { padding: this.internalScrollablePadding } }), {
+            return ((0, vue_1.h)(_internal_1.UxScrollbar, Object.assign({}, scrollbarProps, { class: treeClass, tabindex: tabindex, onScroll: this.handleScroll, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined, style: this.cssVars, contentStyle: { padding: this.internalScrollablePadding } }), {
                 default: () => ((0, vue_1.h)("div", { onDragleave: draggable ? this.handleDragLeaveTree : undefined, ref: "selfElRef" }, this.fNodes.map(createNode)))
             }));
         }

package/lib/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/lib/tree/src/TreeNodeSwitcher.js

@@ -24,6 +24,16 @@ exports.default = (0, vue_1.defineComponent)({
     },
     setup(props) {
         const { renderSwitcherIconRef, spinPropsRef } = (0, vue_1.inject)(interface_1.treeInjectionKey, null);
+        const renderSwitchIcon = () => {
+            const { value: renderSwitcherIcon } = renderSwitcherIconRef;
+            return ((0, vue_1.h)(_internal_1.UIconSwitchTransition, null, {
+                default: () => renderSwitcherIcon ? (renderSwitcherIcon({
+                    expanded: props.expanded,
+                    selected: props.selected,
+                    option: props.tmNode.rawNode
+                })) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: props.clsPrefix, key: "switcher" }, { default: () => (0, vue_1.h)(icons_1.ChevronRightIcon, null) }))
+            }));
+        };
         return () => {
             const { clsPrefix, expanded, hide, indent, onClick } = props;
             return ((0, vue_1.h)("span", { "data-switcher": true, class: [
@@ -31,20 +41,7 @@ exports.default = (0, vue_1.defineComponent)({
                     expanded && `${clsPrefix}-tree-node-switcher--expanded`,
                     hide && `${clsPrefix}-tree-node-switcher--hide`
                 ], style: { width: `${indent}px` }, onClick: onClick },
-                (0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-switcher__icon` },
-                    (0, vue_1.h)(_internal_1.UIconSwitchTransition, null, {
-                        default: () => {
-                            if (props.loading) {
-                                return ((0, vue_1.h)(_internal_1.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
-                            })) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, key: "switcher" }, { default: () => (0, vue_1.h)(icons_1.SwitcherIcon, null) }));
-                        }
-                    }))));
+                (0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-switcher__icon` }, props.loading ? ((0, vue_1.h)(_internal_1.UBaseLoading, Object.assign({ clsPrefix: clsPrefix, key: "loading", radius: 85, strokeWidth: 20 }, spinPropsRef === null || spinPropsRef === void 0 ? void 0 : spinPropsRef.value))) : (renderSwitchIcon()))));
         };
     }
 });

package/lib/tree/src/styles/index.cssr.js

@@ -9,6 +9,8 @@ const cssr_1 = require("../../../_utils/cssr");
 const iconSwitchTransitionNode = (0, icon_switch_cssr_1.iconSwitchTransition)();
 // vars:
 // --u-arrow-color
+// --u-switcher-color
+// --u-switcher-size
 // --u-bezier
 // --u-font-size
 // --u-node-border-radius
@@ -100,19 +102,20 @@ exports.default = (0, cssr_1.cB)('tree', `
  vertical-align: bottom;
  `, [(0, cssr_1.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;
  `, [(0, cssr_1.cB)('icon', [iconSwitchTransitionNode]), (0, cssr_1.cB)('base-loading', `
  color: var(--u-loading-color);
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
  `, [iconSwitchTransitionNode]), (0, cssr_1.cB)('base-icon', [iconSwitchTransitionNode])]), (0, cssr_1.cM)('hide', 'visibility: hidden;'), (0, cssr_1.cM)('expanded', 'transform: rotate(90deg);')]), (0, cssr_1.cB)('tree-node-checkbox', `
  display: inline-flex;
  height: var(--u-node-content-height);

package/lib/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/use-theme").Theme<"Tree", {
     nodeColorPressed: string;
     nodeColorActive: string;
     arrowColor: string;
+    switcherColor: string;
+    switcherSize: string;
     nodeTextColor: string;
     nodeTextColorDisabled: string;
     loadingColor: string;

package/lib/tree/styles/light.js

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

package/lib/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';

package/lib/tree-select/src/TreeSelect.d.ts

@@ -7,15 +7,17 @@ import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { FormValidationStatus } from '../../form/src/interface';
 import type { SelectBaseOption, SelectOption } from '../../select/src/interface';
 import type { InternalTreeInst, Key, TreeOption } from '../../tree/src/interface';
-import type { OnUpdateValue, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './interface';
+import type { OnScrollOptionEnd, OnUpdateValue, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './interface';
 type OnLoad = (node: TreeSelectOption) => Promise<void>;
 export declare const treeSelectProps: {
     readonly renderLabel: PropType<TreeSelectRenderLabel>;
     readonly renderPrefix: PropType<TreeSelectRenderPrefix>;
     readonly renderSuffix: PropType<TreeSelectRenderSuffix>;
     readonly nodeProps: PropType<TreeSelectNodeProps>;
-    readonly onBlur: PropType<(e: FocusEvent) => void>;
-    readonly onFocus: PropType<(e: FocusEvent) => void>;
+    readonly onBlur: PropType<(event: FocusEvent) => void>;
+    readonly onFocus: PropType<(event: FocusEvent) => void>;
+    readonly onScroll: PropType<MaybeArray<(event: Event) => void>>;
+    readonly onScrollOptionEnd: PropType<MaybeArray<OnScrollOptionEnd>>;
     readonly onLoad: PropType<OnLoad>;
     readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -139,6 +141,8 @@ export declare const treeSelectProps: {
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -391,6 +395,8 @@ export declare const treeSelectProps: {
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -643,6 +649,8 @@ export declare const treeSelectProps: {
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -888,8 +896,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly renderPrefix: PropType<TreeSelectRenderPrefix>;
     readonly renderSuffix: PropType<TreeSelectRenderSuffix>;
     readonly nodeProps: PropType<TreeSelectNodeProps>;
-    readonly onBlur: PropType<(e: FocusEvent) => void>;
-    readonly onFocus: PropType<(e: FocusEvent) => void>;
+    readonly onBlur: PropType<(event: FocusEvent) => void>;
+    readonly onFocus: PropType<(event: FocusEvent) => void>;
+    readonly onScroll: PropType<MaybeArray<(event: Event) => void>>;
+    readonly onScrollOptionEnd: PropType<MaybeArray<OnScrollOptionEnd>>;
     readonly onLoad: PropType<OnLoad>;
     readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -1013,6 +1023,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;
@@ -1265,6 +1277,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;
@@ -1517,6 +1531,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;
@@ -1815,22 +1831,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }) => void;
     handleMenuLeave: () => void;
     handleTriggerClick: () => void;
-    handleMenuClickoutside: (e: MouseEvent) => void;
+    handleMenuClickoutside: (event: MouseEvent) => void;
     handleUpdateCheckedKeys: (keys: Key[], _: unknown, meta: {
         node: TreeOption | null;
         action: "check" | "uncheck";
     }) => void;
     handleUpdateIndeterminateKeys: (keys: Key[]) => void;
-    handleTriggerFocus: (e: FocusEvent) => void;
-    handleTriggerBlur: (e: FocusEvent) => void;
-    handleMenuFocusin: (e: FocusEvent) => void;
-    handleMenuFocusout: (e: FocusEvent) => void;
-    handleClear: (e: MouseEvent) => void;
+    handleTriggerFocus: (event: FocusEvent) => void;
+    handleTriggerBlur: (event: FocusEvent) => void;
+    handleMenuFocusin: (event: FocusEvent) => void;
+    handleMenuFocusout: (event: FocusEvent) => void;
+    handleClear: (event: MouseEvent) => void;
     handleDeleteOption: (option: SelectBaseOption) => void;
-    handlePatternInput: (e: InputEvent) => void;
-    handleKeydown: (e: KeyboardEvent) => void;
+    handlePatternInput: (event: InputEvent) => void;
+    handleKeydown: (event: KeyboardEvent) => void;
     handleTabOut: () => void;
-    handleMenuMousedown: (e: MouseEvent) => void;
+    handleMenuMousedown: (event: MouseEvent) => void;
+    handleTreeScroll: (event: Event) => void;
     mergedTheme: import("vue").ComputedRef<{
         common: import("../..").ThemeCommonVars;
         self: {
@@ -1854,6 +1871,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;
@@ -2228,8 +2247,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly renderPrefix: PropType<TreeSelectRenderPrefix>;
     readonly renderSuffix: PropType<TreeSelectRenderSuffix>;
     readonly nodeProps: PropType<TreeSelectNodeProps>;
-    readonly onBlur: PropType<(e: FocusEvent) => void>;
-    readonly onFocus: PropType<(e: FocusEvent) => void>;
+    readonly onBlur: PropType<(event: FocusEvent) => void>;
+    readonly onFocus: PropType<(event: FocusEvent) => void>;
+    readonly onScroll: PropType<MaybeArray<(event: Event) => void>>;
+    readonly onScrollOptionEnd: PropType<MaybeArray<OnScrollOptionEnd>>;
     readonly onLoad: PropType<OnLoad>;
     readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -2353,6 +2374,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;
@@ -2605,6 +2628,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;
@@ -2857,6 +2882,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;