@uzum-tech/ui 2.0.6 → 2.0.8

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';

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

@@ -7,15 +7,18 @@ 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 { FilterHandler, 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 onSearch: PropType<MaybeArray<(value: string) => void>>;
     readonly onLoad: PropType<OnLoad>;
     readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -88,6 +91,7 @@ export declare const treeSelectProps: {
     readonly loading: BooleanConstructor;
     readonly maxTagCount: PropType<number | "responsive">;
     readonly multiple: BooleanConstructor;
+    readonly remote: BooleanConstructor;
     readonly showPath: BooleanConstructor;
     readonly separator: {
         readonly type: StringConstructor;
@@ -139,6 +143,8 @@ export declare const treeSelectProps: {
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -391,6 +397,8 @@ export declare const treeSelectProps: {
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -643,6 +651,8 @@ export declare const treeSelectProps: {
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -888,8 +898,11 @@ 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 onSearch: PropType<MaybeArray<(value: string) => void>>;
     readonly onLoad: PropType<OnLoad>;
     readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -962,6 +975,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly loading: BooleanConstructor;
     readonly maxTagCount: PropType<number | "responsive">;
     readonly multiple: BooleanConstructor;
+    readonly remote: BooleanConstructor;
     readonly showPath: BooleanConstructor;
     readonly separator: {
         readonly type: StringConstructor;
@@ -1013,6 +1027,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 +1281,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 +1535,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;
@@ -1798,9 +1818,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     selectedOption: import("vue").ComputedRef<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | /*elided*/ any>, selected: boolean) => VNodeChild)> | null>;
     selectedOptions: import("vue").ComputedRef<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | /*elided*/ any>, selected: boolean) => VNodeChild)>[] | null>;
     pattern: import("vue").Ref<string, string>;
+    treePattern: import("vue").ComputedRef<string>;
     pendingNodeKey: import("vue").Ref<string | number | null, string | number | null>;
     mergedCascade: import("vue").ComputedRef<boolean>;
-    mergedFilter: import("vue").ComputedRef<(pattern: string, node: TreeOption) => boolean>;
+    mergedFilter: import("vue").ComputedRef<FilterHandler>;
     selectionRenderTag: import("vue").ComputedRef<(({ option, handleClose }: {
         option: SelectOption;
         handleClose: () => void;
@@ -1815,22 +1836,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 +1876,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 +2252,11 @@ 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 onSearch: PropType<MaybeArray<(value: string) => void>>;
     readonly onLoad: PropType<OnLoad>;
     readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -2302,6 +2329,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly loading: BooleanConstructor;
     readonly maxTagCount: PropType<number | "responsive">;
     readonly multiple: BooleanConstructor;
+    readonly remote: BooleanConstructor;
     readonly showPath: BooleanConstructor;
     readonly separator: {
         readonly type: StringConstructor;
@@ -2353,6 +2381,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 +2635,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 +2889,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;
@@ -3105,6 +3139,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly filterable: boolean;
     readonly disabledField: string;
     readonly clearFilterAfterSelect: boolean;
+    readonly remote: boolean;
     readonly cascade: boolean;
     readonly leafOnly: boolean;
     readonly showPath: boolean;

package/es/tree-select/src/TreeSelect.mjs

@@ -13,6 +13,7 @@ import { createTreeMateOptions, treeSharedProps } from "../../tree/src/Tree.mjs"
 import { useMergedCheckStrategy } from "../../tree/src/utils.mjs";
 import { treeSelectLight } from "../styles/index.mjs";
 import { treeSelectInjectionKey } from "./interface.mjs";
+import { scanReachedRootOptions } from "./scroll-option-end.mjs";
 import style from "./styles/index.cssr.mjs";
 import { treeOption2SelectOption, treeOption2SelectOptionWithPath } from "./utils.mjs";
 export const treeSelectProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), {
@@ -48,6 +49,7 @@ export const treeSelectProps = Object.assign(Object.assign(Object.assign(Object.
   loading: Boolean,
   maxTagCount: [String, Number],
   multiple: Boolean,
+  remote: Boolean,
   showPath: Boolean,
   separator: {
     type: String,
@@ -83,6 +85,9 @@ export const treeSelectProps = Object.assign(Object.assign(Object.assign(Object.
   nodeProps: Function,
   onBlur: Function,
   onFocus: Function,
+  onScroll: [Function, Array],
+  onScrollOptionEnd: [Function, Array],
+  onSearch: [Function, Array],
   onLoad: Function,
   onUpdateShow: [Function, Array],
   onUpdateValue: [Function, Array],
@@ -133,20 +138,16 @@ export default defineComponent({
     const controlledShowRef = toRef(props, 'show');
     const mergedShowRef = useMergedState(controlledShowRef, uncontrolledShowRef);
     const patternRef = ref('');
+    const treePatternRef = computed(() => {
+      return props.remote ? '' : patternRef.value;
+    });
     const mergedFilterRef = computed(() => {
-      const {
-        filter
-      } = props;
-      if (filter) return filter;
-      const {
-        labelField
-      } = props;
+      if (props.filter) return props.filter;
       return (pattern, node) => {
         if (!pattern.length) return true;
-        return node[labelField].toLowerCase().includes(pattern.toLowerCase());
+        return node[props.labelField].toLowerCase().includes(pattern.toLowerCase());
       };
     });
-    // used to resolve selected options
     const dataTreeMateRef = computed(() => createTreeMate(props.options, createTreeMateOptions(props.keyField, props.childrenField, props.disabledField, undefined)));
     const {
       value: initMergedValue
@@ -162,6 +163,7 @@ export default defineComponent({
     const controlledExpandedKeysRef = toRef(props, 'expandedKeys');
     const mergedExpandedKeysRef = useMergedState(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);
     const focusedRef = ref(false);
+    let visibleRootEndKeys = new Set();
     const mergedPlaceholderRef = computed(() => {
       const {
         placeholder
@@ -297,19 +299,19 @@ export default defineComponent({
       }
       uncontrolledExpandedKeysRef.value = keys;
     }
-    function doFocus(e) {
+    function doFocus(event) {
       const {
         onFocus
       } = props;
-      if (onFocus) onFocus(e);
+      if (onFocus) onFocus(event);
       triggerFormFocus();
     }
-    function doBlur(e) {
+    function doBlur(event) {
       closeMenu();
       const {
         onBlur
       } = props;
-      if (onBlur) onBlur(e);
+      if (onBlur) onBlur(event);
       triggerFormBlur();
     }
     function closeMenu() {
@@ -326,11 +328,12 @@ export default defineComponent({
     }
     function handleMenuLeave() {
       patternRef.value = '';
+      visibleRootEndKeys = new Set();
     }
-    function handleMenuClickoutside(e) {
+    function handleMenuClickoutside(event) {
       var _a;
       if (mergedShowRef.value) {
-        if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(getPreciseEventTarget(e)))) {
+        if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(getPreciseEventTarget(event)))) {
           // outside select, don't need to return focus
           closeMenu();
         }
@@ -390,36 +393,36 @@ export default defineComponent({
         doUpdateIndeterminateKeys(keys, getOptionsByKeys(keys));
       }
     }
-    function handleTriggerFocus(e) {
+    function handleTriggerFocus(event) {
       var _a;
-      if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) return;
+      if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) return;
       focusedRef.value = true;
-      doFocus(e);
+      doFocus(event);
     }
-    function handleTriggerBlur(e) {
+    function handleTriggerBlur(event) {
       var _a;
-      if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) return;
+      if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) return;
       focusedRef.value = false;
-      doBlur(e);
+      doBlur(event);
     }
-    function handleMenuFocusin(e) {
+    function handleMenuFocusin(event) {
       var _a, _b, _c;
-      if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(e.relatedTarget))) {
+      if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(event.relatedTarget))) {
         return;
       }
       focusedRef.value = true;
-      doFocus(e);
+      doFocus(event);
     }
-    function handleMenuFocusout(e) {
+    function handleMenuFocusout(event) {
       var _a, _b, _c;
-      if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(e.relatedTarget))) {
+      if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(event.relatedTarget))) {
         return;
       }
       focusedRef.value = false;
-      doBlur(e);
+      doBlur(event);
     }
-    function handleClear(e) {
-      e.stopPropagation();
+    function handleClear(event) {
+      event.stopPropagation();
       const {
         multiple
       } = props;
@@ -481,24 +484,28 @@ export default defineComponent({
         }
       }
     }
-    function handlePatternInput(e) {
+    function doSearch(value) {
+      props.onSearch && call(props.onSearch, value);
+    }
+    function handlePatternInput(event) {
       const {
         value
-      } = e.target;
+      } = event.target;
       patternRef.value = value;
+      doSearch(value);
     }
-    function treeHandleKeydown(e) {
+    function treeHandleKeydown(event) {
       const {
         value: treeInst
       } = treeInstRef;
       if (treeInst) {
-        treeInst.handleKeydown(e);
+        treeInst.handleKeydown(event);
       }
     }
-    function handleKeydown(e) {
-      if (e.key === 'Enter') {
+    function handleKeydown(event) {
+      if (event.key === 'Enter') {
         if (mergedShowRef.value) {
-          treeHandleKeydown(e);
+          treeHandleKeydown(event);
           if (!props.multiple) {
             closeMenu();
             focusSelection();
@@ -506,17 +513,17 @@ export default defineComponent({
         } else {
           openMenu();
         }
-        e.preventDefault();
-      } else if (e.key === 'Escape') {
+        event.preventDefault();
+      } else if (event.key === 'Escape') {
         if (mergedShowRef.value) {
-          markEventEffectPerformed(e);
+          markEventEffectPerformed(event);
           closeMenu();
           focusSelection();
         }
       } else {
         if (mergedShowRef.value) {
-          treeHandleKeydown(e);
-        } else if (e.key === 'ArrowDown') {
+          treeHandleKeydown(event);
+        } else if (event.key === 'ArrowDown') {
           openMenu();
         }
       }
@@ -525,10 +532,33 @@ export default defineComponent({
       closeMenu();
       focusSelection();
     }
-    function handleMenuMousedown(e) {
+    function handleMenuMousedown(event) {
       // If there's an action slot later, we need to check if mousedown happens
       // in action panel
-      if (!happensIn(e, 'action')) e.preventDefault();
+      if (!happensIn(event, 'action')) event.preventDefault();
+    }
+    function doScroll(event) {
+      const {
+        onScroll
+      } = props;
+      if (onScroll) call(onScroll, event);
+    }
+    function doScrollOptionEnd(option, event) {
+      props.onScrollOptionEnd && call(props.onScrollOptionEnd, option, event);
+    }
+    function handleTreeScroll(event) {
+      doScroll(event);
+      if (!props.onScrollOptionEnd) return;
+      const scrollElement = event.currentTarget || event.target;
+      if (!scrollElement) return;
+      const {
+        reachedOptions,
+        visibleKeys
+      } = scanReachedRootOptions(scrollElement, dataTreeMateRef.value.treeNodes, mergedExpandedKeysRef.value, visibleRootEndKeys);
+      visibleRootEndKeys = visibleKeys;
+      for (const reachedOption of reachedOptions) {
+        doScrollOptionEnd(reachedOption, event);
+      }
     }
     const selectionRenderTagRef = computed(() => {
       const {
@@ -681,6 +711,7 @@ export default defineComponent({
       selectedOption: selectedOptionRef,
       selectedOptions: selectedOptionsRef,
       pattern: patternRef,
+      treePattern: treePatternRef,
       pendingNodeKey: pendingNodeKeyRef,
       mergedCascade: mergedCascadeRef,
       mergedFilter: mergedFilterRef,
@@ -702,6 +733,7 @@ export default defineComponent({
       handleKeydown,
       handleTabOut,
       handleMenuMousedown,
+      handleTreeScroll,
       mergedTheme: themeRef,
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
       themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
@@ -795,7 +827,7 @@ export default defineComponent({
               allowCheckingNotLoaded: this.allowCheckingNotLoaded,
               showIrrelevantNodes: false,
               animated: false,
-              pattern: this.pattern,
+              pattern: this.treePattern,
               filter: this.mergedFilter,
               data: options,
               cancelable: multiple,
@@ -836,7 +868,8 @@ export default defineComponent({
               onLoad: this.onLoad,
               onUpdateCheckedKeys: this.handleUpdateCheckedKeys,
               onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys,
-              onUpdateExpandedKeys: this.doUpdateExpandedKeys
+              onUpdateExpandedKeys: this.doUpdateExpandedKeys,
+              onScroll: this.handleTreeScroll
             }), resolveWrappedSlot($slots.action, children => {
               return children ? h("div", {
                 class: `${mergedClsPrefix}-tree-select-menu__action`,

package/es/tree-select/src/interface.d.ts

@@ -1,4 +1,4 @@
-import type { TreeMate, TreeNode } from 'treemate';
+import type { Key, TreeMate, TreeNode } from 'treemate';
 import type { HTMLAttributes, Ref, VNodeChild } from 'vue';
 import type { TreeOption, TreeOptionBase } from '../../tree/src/interface';
 export type TreeSelectOption = Omit<TreeOptionBase, 'checkboxDisabled' | 'isLeaf' | 'children'> & {
@@ -28,6 +28,12 @@ export type OnUpdateValueImpl = (value: string | number | (string | number) | st
 }) => void;
 export type OnUpdateIndeterminateKeysImpl = (value: string | number | (string | number) | string[] | number[] | Array<string | number> | null, option: TreeSelectOption | null | Array<TreeSelectOption | null>) => void;
 export type Value = string | number | Array<string | number> | null;
+export type OnScrollOptionEnd = (option: TreeSelectOption, event: Event) => void;
+export type FilterHandler = (pattern: string, node: TreeSelectOption) => boolean;
+export interface ScrollOptionEndScanResult {
+    reachedOptions: TreeSelectOption[];
+    visibleKeys: Set<Key>;
+}
 export interface TreeSelectInjection {
     pendingNodeKeyRef: Ref<string | number | null>;
     dataTreeMate: Ref<TreeMate<TreeOption>>;