@uzum-tech/ui 2.3.2 → 2.3.3

package/lib/_internal/select-menu/src/SelectMenu.js

@@ -6,65 +6,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const seemly_1 = require("seemly");
 const treemate_1 = require("treemate");
 const vue_1 = require("vue");
-const vueuc_1 = require("vueuc");
 const _mixins_1 = require("../../../_mixins");
 const _utils_1 = require("../../../_utils");
 const cssr_1 = require("../../../_utils/cssr");
-const empty_1 = require("../../../empty");
-const focus_detector_1 = __importDefault(require("../../focus-detector"));
-const loading_1 = __importDefault(require("../../loading"));
-const scrollbar_1 = require("../../scrollbar");
 const styles_1 = require("../styles");
 const interface_1 = require("./interface");
-const SelectGroupHeader_1 = __importDefault(require("./SelectGroupHeader"));
-const SelectOption_1 = __importDefault(require("./SelectOption"));
+const Action_1 = __importDefault(require("./SelectMenuParts/Action"));
+const Header_1 = __importDefault(require("./SelectMenuParts/Header"));
+const List_1 = __importDefault(require("./SelectMenuParts/List"));
+const Search_1 = __importDefault(require("./SelectMenuParts/Search"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'InternalSelectMenu',
-    props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), { clsPrefix: {
-            type: String,
-            required: true
-        }, scrollable: {
-            type: Boolean,
-            default: true
-        }, treeMate: {
-            type: Object,
-            required: true
-        }, multiple: Boolean, account: Boolean, size: {
-            type: String,
-            default: 'medium'
-        }, value: {
-            type: [String, Number, Array],
-            default: null
-        }, autoPending: Boolean, virtualScroll: {
-            type: Boolean,
-            default: true
-        }, 
-        // show is used to toggle pending state initialization
-        show: {
-            type: Boolean,
-            default: true
-        }, labelField: {
-            type: String,
-            default: 'label'
-        }, valueField: {
-            type: String,
-            default: 'value'
-        }, loading: Boolean, focusable: Boolean, renderLabel: Function, renderOption: Function, nodeProps: Function, showCheckmark: { type: Boolean, default: true }, onMousedown: Function, onScroll: Function, onFocus: Function, onBlur: Function, onKeyup: Function, onKeydown: Function, onTabOut: Function, onMouseenter: Function, onMouseleave: Function, onResize: Function, resetMenuOnOptionsChange: {
-            type: Boolean,
-            default: true
-        }, inlineThemeDisabled: Boolean, scrollbarProps: Object, 
-        // deprecated
-        onToggle: Function }),
+    props: interface_1.internalSelectMenuProps,
     setup(props) {
         const { mergedComponentPropsRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('InternalSelectMenu', '-internal-select-menu', index_cssr_1.default, styles_1.internalSelectMenuLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
         const selfRef = (0, vue_1.ref)(null);
-        const virtualListRef = (0, vue_1.ref)(null);
-        const scrollbarRef = (0, vue_1.ref)(null);
+        const listPartRef = (0, vue_1.ref)(null);
+        const searchPartRef = (0, vue_1.ref)(null);
+        const pendingNodeRef = (0, vue_1.ref)(null);
         const flattenedNodesRef = (0, vue_1.computed)(() => props.treeMate.getFlattenedNodes());
         const fIndexGetterRef = (0, vue_1.computed)(() => (0, treemate_1.createIndexGetter)(flattenedNodesRef.value));
-        const pendingNodeRef = (0, vue_1.ref)(null);
         function initPendingNode() {
             const { treeMate } = props;
             let defaultPendingNode = null;
@@ -155,16 +118,6 @@ exports.default = (0, vue_1.defineComponent)({
             if (onScroll)
                 onScroll(e);
         }
-        // required, scroller sync need to be triggered manually
-        function handleVirtualListScroll(e) {
-            var _a;
-            (_a = scrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
-            doScroll(e);
-        }
-        function handleVirtualListResize() {
-            var _a;
-            (_a = scrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
-        }
         function getPendingTmNode() {
             const { value: pendingTmNode } = pendingNodeRef;
             if (pendingTmNode)
@@ -219,22 +172,18 @@ exports.default = (0, vue_1.defineComponent)({
                 scrollToPendingNode();
         }
         function scrollToPendingNode() {
-            var _a, _b;
+            var _a;
             const tmNode = pendingNodeRef.value;
             if (!tmNode)
                 return;
             const fIndex = fIndexGetterRef.value(tmNode.key);
             if (fIndex === null)
                 return;
-            if (props.virtualScroll) {
-                (_a = virtualListRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo({ index: fIndex });
-            }
-            else {
-                (_b = scrollbarRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo({
-                    index: fIndex,
-                    elSize: itemSizeRef.value
-                });
-            }
+            (_a = listPartRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(fIndex);
+        }
+        function focusSearchInput() {
+            var _a;
+            (_a = searchPartRef.value) === null || _a === void 0 ? void 0 : _a.focus();
         }
         function handleFocusin(e) {
             var _a, _b;
@@ -255,6 +204,7 @@ exports.default = (0, vue_1.defineComponent)({
             pendingTmNodeRef: pendingNodeRef,
             nodePropsRef: (0, vue_1.toRef)(props, 'nodeProps'),
             showCheckmarkRef: (0, vue_1.toRef)(props, 'showCheckmark'),
+            markTypeRef: (0, vue_1.toRef)(props, 'markType'),
             multipleRef: (0, vue_1.toRef)(props, 'multiple'),
             accountRef: (0, vue_1.toRef)(props, 'account'),
             valueRef: (0, vue_1.toRef)(props, 'value'),
@@ -264,11 +214,6 @@ exports.default = (0, vue_1.defineComponent)({
             valueFieldRef: (0, vue_1.toRef)(props, 'valueField')
         });
         (0, vue_1.provide)(interface_1.internalSelectionMenuBodyInjectionKey, selfRef);
-        (0, vue_1.onMounted)(() => {
-            const { value } = scrollbarRef;
-            if (value)
-                value.sync();
-        });
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { size } = props;
             const { common: { cubicBezierEaseInOut }, self: { height, borderRadius, color, groupHeaderTextColor, actionDividerColor, optionTextColorPressed, optionTextColor, optionTextColorDisabled, optionTextColorActive, optionOpacityDisabled, optionGroupHeaderBorderColor, optionCheckColor, actionTextColor, optionColorPending, optionColorActive, loadingColor, loadingSize, optionColorActivePending, optionBorderRadius, [(0, cssr_1.createKey)('optionFontSize', size)]: optionFontSize, [(0, cssr_1.createKey)('optionHeight', size)]: optionHeight, [(0, cssr_1.createKey)('optionPadding', size)]: optionPadding } } = themeRef.value;
@@ -308,57 +253,32 @@ exports.default = (0, vue_1.defineComponent)({
             selfRef,
             next,
             prev,
-            getPendingTmNode
+            getPendingTmNode,
+            focusSearchInput
         };
         (0, _utils_1.useOnResize)(selfRef, props.onResize);
-        return Object.assign({ mergedTheme: themeRef, virtualListRef,
-            scrollbarRef, itemSize: itemSizeRef, padding: paddingRef, flattenedNodes: flattenedNodesRef, empty: emptyRef, mergedRenderEmpty: mergedRenderEmptyRef, virtualListContainer() {
-                const { value } = virtualListRef;
-                return value === null || value === void 0 ? void 0 : value.listElRef;
-            },
-            virtualListContent() {
-                const { value } = virtualListRef;
-                return value === null || value === void 0 ? void 0 : value.itemsElRef;
-            },
-            doScroll,
+        return Object.assign({ mergedTheme: themeRef, listPartRef,
+            searchPartRef, itemSize: itemSizeRef, padding: paddingRef, flattenedNodes: flattenedNodesRef, empty: emptyRef, mergedRenderEmpty: mergedRenderEmptyRef, doScroll,
             handleFocusin,
             handleFocusout,
             handleKeyUp,
             handleKeyDown,
-            handleMouseDown,
-            handleVirtualListResize,
-            handleVirtualListScroll, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedProps);
+            handleMouseDown, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedProps);
     },
     render() {
-        const { $slots, virtualScroll, clsPrefix, mergedTheme, themeClass, onRender } = this;
+        const { $slots, clsPrefix, mergedTheme, themeClass, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
+        const hasFooter = !(0, _utils_1.isSlotEmpty)($slots.action);
         return ((0, vue_1.h)("div", { ref: "selfRef", tabindex: this.focusable ? 0 : -1, class: [
                 `${clsPrefix}-base-select-menu`,
                 themeClass,
-                this.multiple && `${clsPrefix}-base-select-menu--multiple`
+                this.multiple && `${clsPrefix}-base-select-menu--multiple`,
+                this.filterable && `${clsPrefix}-base-select-menu--has-search`,
+                hasFooter && `${clsPrefix}-base-select-menu--has-footer`
             ], style: this.cssVars, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onKeyup: this.handleKeyUp, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
-            (0, _utils_1.resolveWrappedSlot)($slots.header, children => children && ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__header`, "data-header": true, key: "header" }, children))),
-            this.loading ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__loading` },
-                (0, vue_1.h)(loading_1.default, { clsPrefix: clsPrefix, strokeWidth: 20 }))) : !this.empty ? ((0, vue_1.h)(scrollbar_1.UScrollbar, Object.assign({ ref: "scrollbarRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, scrollable: this.scrollable, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, onScroll: virtualScroll ? undefined : this.doScroll }, this.scrollbarProps), {
-                default: () => {
-                    return virtualScroll ? ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "virtualListRef", class: `${clsPrefix}-virtual-list`, items: this.flattenedNodes, itemSize: this.itemSize, showScrollbar: false, paddingTop: this.padding.top, paddingBottom: this.padding.bottom, onResize: this.handleVirtualListResize, onScroll: this.handleVirtualListScroll, itemResizable: true }, {
-                        default: ({ item: tmNode }) => {
-                            return tmNode.isGroup ? ((0, vue_1.h)(SelectGroupHeader_1.default, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : tmNode.ignored ? null : ((0, vue_1.h)(SelectOption_1.default, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode }));
-                        }
-                    })) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu-option-wrapper`, style: {
-                            paddingTop: this.padding.top,
-                            paddingBottom: this.padding.bottom
-                        } }, this.flattenedNodes.map(tmNode => tmNode.isGroup ? ((0, vue_1.h)(SelectGroupHeader_1.default, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : ((0, vue_1.h)(SelectOption_1.default, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode })))));
-                }
-            })) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__empty`, "data-empty": true, "data-action": true }, (0, _utils_1.resolveSlot)($slots.empty, () => {
-                var _a;
-                return [
-                    ((_a = this.mergedRenderEmpty) === null || _a === void 0 ? void 0 : _a.call(this)) || ((0, vue_1.h)(empty_1.UEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))
-                ];
-            }))),
-            (0, _utils_1.resolveWrappedSlot)($slots.action, children => children && [
-                (0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__action`, "data-action": true, key: "action" }, children),
-                (0, vue_1.h)(focus_detector_1.default, { onFocus: this.onTabOut, key: "focus-detector" })
-            ])));
+            this.filterable ? ((0, vue_1.h)(Search_1.default, { ref: "searchPartRef", clsPrefix: clsPrefix, size: this.size, pattern: this.pattern, searchPlaceholder: this.searchPlaceholder, mergedTheme: mergedTheme, onPatternInput: this.onPatternInput })) : null,
+            (0, vue_1.h)(Header_1.default, { clsPrefix: clsPrefix }, { default: $slots.header }),
+            (0, vue_1.h)(List_1.default, { ref: "listPartRef", clsPrefix: clsPrefix, loading: this.loading, empty: this.empty, virtualScroll: this.virtualScroll, scrollable: this.scrollable, flattenedNodes: this.flattenedNodes, itemSize: this.itemSize, padding: this.padding, scrollbarProps: this.scrollbarProps, mergedTheme: mergedTheme, mergedRenderEmpty: this.mergedRenderEmpty, onScroll: this.doScroll }, { empty: $slots.empty }),
+            (0, vue_1.h)(Action_1.default, { clsPrefix: clsPrefix, onTabOut: this.onTabOut }, { default: $slots.action })));
     }
 });

package/lib/_internal/select-menu/src/SelectMenuParts/Action.d.ts

@@ -0,0 +1,15 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    onTabOut: PropType<() => void>;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    onTabOut: PropType<() => void>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/_internal/select-menu/src/SelectMenuParts/Action.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _utils_1 = require("../../../../_utils");
+const focus_detector_1 = __importDefault(require("../../../focus-detector"));
+exports.default = (0, vue_1.defineComponent)({
+    name: 'SelectMenuAction',
+    props: {
+        clsPrefix: {
+            type: String,
+            required: true
+        },
+        onTabOut: Function
+    },
+    render() {
+        const { clsPrefix, onTabOut, $slots } = this;
+        return (0, _utils_1.resolveWrappedSlot)($slots.default, children => children && [
+            (0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__action`, "data-action": true, key: "action" }, children),
+            (0, vue_1.h)(focus_detector_1.default, { onFocus: onTabOut, key: "focus-detector" })
+        ]);
+    }
+});

package/lib/_internal/select-menu/src/SelectMenuParts/Header.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/_internal/select-menu/src/SelectMenuParts/Header.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _utils_1 = require("../../../../_utils");
+exports.default = (0, vue_1.defineComponent)({
+    name: 'SelectMenuHeader',
+    props: {
+        clsPrefix: {
+            type: String,
+            required: true
+        }
+    },
+    render() {
+        const { clsPrefix, $slots } = this;
+        return (0, _utils_1.resolveWrappedSlot)($slots.default, children => children && ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__header`, "data-header": true, key: "header" }, children)));
+    }
+});

package/lib/_internal/select-menu/src/SelectMenuParts/List.d.ts

@@ -0,0 +1,129 @@
+import type { Margin } from 'seemly';
+import type { TreeNode } from 'treemate';
+import type { PropType, VNodeChild } from 'vue';
+import type { VirtualListInst } from 'vueuc';
+import type { MergedTheme } from '../../../../_mixins';
+import type { SelectGroupOption, SelectIgnoredOption, SelectTreeMate } from '../../../../select/src/interface';
+import type { ScrollbarInst } from '../../../scrollbar';
+import type { ScrollbarProps } from '../../../scrollbar/src/Scrollbar';
+import type { InternalSelectMenuTheme } from '../../styles';
+export interface SelectMenuListInst {
+    sync: () => void;
+    scrollTo: (index: number) => void;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    loading: BooleanConstructor;
+    empty: BooleanConstructor;
+    virtualScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flattenedNodes: {
+        type: PropType<ReturnType<SelectTreeMate["getFlattenedNodes"]>>;
+        default: () => never[];
+    };
+    itemSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    padding: {
+        type: PropType<Margin>;
+        required: true;
+    };
+    scrollbarProps: PropType<ScrollbarProps>;
+    mergedTheme: {
+        type: PropType<MergedTheme<InternalSelectMenuTheme>>;
+        required: true;
+    };
+    mergedRenderEmpty: PropType<() => VNodeChild>;
+    onScroll: PropType<(e: Event) => void>;
+}>, {
+    virtualListRef: import("vue").Ref<{
+        listElRef: HTMLElement;
+        itemsElRef: HTMLElement | null;
+        scrollTo: import("vueuc").VVirtualListScrollTo;
+    } | null, VirtualListInst | {
+        listElRef: HTMLElement;
+        itemsElRef: HTMLElement | null;
+        scrollTo: import("vueuc").VVirtualListScrollTo;
+    } | null>;
+    scrollbarRef: import("vue").Ref<{
+        $el: HTMLElement;
+        containerRef: HTMLElement | null;
+        contentRef: HTMLElement | null;
+        containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../../scrollbar/src/Scrollbar").ScrollTo;
+        scrollBy: import("../../../scrollbar/src/Scrollbar").ScrollBy;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
+    } | null, ScrollbarInst | {
+        $el: HTMLElement;
+        containerRef: HTMLElement | null;
+        contentRef: HTMLElement | null;
+        containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../../scrollbar/src/Scrollbar").ScrollTo;
+        scrollBy: import("../../../scrollbar/src/Scrollbar").ScrollBy;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
+    } | null>;
+    doScroll: (e: Event) => void;
+    handleVirtualListScroll: (e: Event) => void;
+    handleVirtualListResize: () => void;
+    virtualListContainer: () => HTMLElement;
+    virtualListContent: () => HTMLElement;
+    sync: () => void;
+    scrollTo: (index: number) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    loading: BooleanConstructor;
+    empty: BooleanConstructor;
+    virtualScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flattenedNodes: {
+        type: PropType<ReturnType<SelectTreeMate["getFlattenedNodes"]>>;
+        default: () => never[];
+    };
+    itemSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    padding: {
+        type: PropType<Margin>;
+        required: true;
+    };
+    scrollbarProps: PropType<ScrollbarProps>;
+    mergedTheme: {
+        type: PropType<MergedTheme<InternalSelectMenuTheme>>;
+        required: true;
+    };
+    mergedRenderEmpty: PropType<() => VNodeChild>;
+    onScroll: PropType<(e: Event) => void>;
+}>> & Readonly<{}>, {
+    loading: boolean;
+    scrollable: boolean;
+    virtualScroll: boolean;
+    empty: boolean;
+    flattenedNodes: TreeNode<import("../../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../../select/src/interface").SelectBaseOption<string | number, string | /*elided*/ any>, selected: boolean) => VNodeChild)>, SelectGroupOption, SelectIgnoredOption>[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/_internal/select-menu/src/SelectMenuParts/List.js

@@ -0,0 +1,134 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const vueuc_1 = require("vueuc");
+const _utils_1 = require("../../../../_utils");
+const empty_1 = require("../../../../empty");
+const loading_1 = __importDefault(require("../../../loading"));
+const scrollbar_1 = require("../../../scrollbar");
+const SelectGroupHeader_1 = __importDefault(require("../SelectGroupHeader"));
+const SelectOption_1 = __importDefault(require("../SelectOption"));
+exports.default = (0, vue_1.defineComponent)({
+    name: 'SelectMenuList',
+    props: {
+        clsPrefix: {
+            type: String,
+            required: true
+        },
+        loading: Boolean,
+        empty: Boolean,
+        virtualScroll: {
+            type: Boolean,
+            default: true
+        },
+        scrollable: {
+            type: Boolean,
+            default: true
+        },
+        flattenedNodes: {
+            type: Array,
+            default: () => []
+        },
+        itemSize: {
+            type: Number,
+            required: true
+        },
+        padding: {
+            type: Object,
+            required: true
+        },
+        scrollbarProps: Object,
+        mergedTheme: {
+            type: Object,
+            required: true
+        },
+        mergedRenderEmpty: Function,
+        onScroll: Function
+    },
+    setup(props) {
+        const virtualListRef = (0, vue_1.ref)(null);
+        const scrollbarRef = (0, vue_1.ref)(null);
+        function doScroll(e) {
+            var _a;
+            (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+        // required, scroller sync need to be triggered manually
+        function handleVirtualListScroll(e) {
+            var _a;
+            (_a = scrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
+            doScroll(e);
+        }
+        function handleVirtualListResize() {
+            var _a;
+            (_a = scrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
+        }
+        function virtualListContainer() {
+            const { value } = virtualListRef;
+            return value === null || value === void 0 ? void 0 : value.listElRef;
+        }
+        function virtualListContent() {
+            const { value } = virtualListRef;
+            return value === null || value === void 0 ? void 0 : value.itemsElRef;
+        }
+        function sync() {
+            var _a;
+            (_a = scrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
+        }
+        function scrollTo(index) {
+            var _a, _b;
+            if (props.virtualScroll) {
+                (_a = virtualListRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo({ index });
+            }
+            else {
+                (_b = scrollbarRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                    index,
+                    elSize: props.itemSize
+                });
+            }
+        }
+        (0, vue_1.onMounted)(() => {
+            var _a;
+            (_a = scrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
+        });
+        return {
+            virtualListRef,
+            scrollbarRef,
+            doScroll,
+            handleVirtualListScroll,
+            handleVirtualListResize,
+            virtualListContainer,
+            virtualListContent,
+            sync,
+            scrollTo
+        };
+    },
+    render() {
+        const { clsPrefix, virtualScroll, mergedTheme, loading, empty, scrollable, flattenedNodes, itemSize, padding, scrollbarProps, mergedRenderEmpty, $slots } = this;
+        if (loading) {
+            return ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__loading` },
+                (0, vue_1.h)(loading_1.default, { clsPrefix: clsPrefix, strokeWidth: 20 })));
+        }
+        if (!empty) {
+            return ((0, vue_1.h)(scrollbar_1.UScrollbar, Object.assign({ ref: "scrollbarRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, scrollable: scrollable, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, onScroll: virtualScroll ? undefined : this.doScroll }, scrollbarProps), {
+                default: () => {
+                    return virtualScroll ? ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "virtualListRef", class: `${clsPrefix}-virtual-list`, items: flattenedNodes, itemSize: itemSize, showScrollbar: false, paddingTop: padding.top, paddingBottom: padding.bottom, onResize: this.handleVirtualListResize, onScroll: this.handleVirtualListScroll, itemResizable: true }, {
+                        default: ({ item: tmNode }) => {
+                            return tmNode.isGroup ? ((0, vue_1.h)(SelectGroupHeader_1.default, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : tmNode.ignored ? null : ((0, vue_1.h)(SelectOption_1.default, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode }));
+                        }
+                    })) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu-option-wrapper`, style: {
+                            paddingTop: padding.top,
+                            paddingBottom: padding.bottom
+                        } }, flattenedNodes.map(tmNode => tmNode.isGroup ? ((0, vue_1.h)(SelectGroupHeader_1.default, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : ((0, vue_1.h)(SelectOption_1.default, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode })))));
+                }
+            }));
+        }
+        return ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__empty`, "data-empty": true, "data-action": true }, (0, _utils_1.resolveSlot)($slots.empty, () => {
+            return [
+                (mergedRenderEmpty === null || mergedRenderEmpty === void 0 ? void 0 : mergedRenderEmpty()) || ((0, vue_1.h)(empty_1.UEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))
+            ];
+        })));
+    }
+});

package/lib/_internal/select-menu/src/SelectMenuParts/Search.d.ts

@@ -0,0 +1,90 @@
+import type { PropType } from 'vue';
+import type { MergedTheme } from '../../../../_mixins';
+import type { InternalSelectMenuTheme } from '../../styles';
+import type { Size } from '../interface';
+export interface SelectMenuSearchInst {
+    focus: () => void;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
+    pattern: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchPlaceholder: StringConstructor;
+    mergedTheme: {
+        type: PropType<MergedTheme<InternalSelectMenuTheme>>;
+        required: true;
+    };
+    onPatternInput: PropType<(value: string) => void>;
+}>, {
+    inputInstRef: import("vue").Ref<{
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        clear: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | null, {
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        clear: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | {
+        wrapperElRef: HTMLElement | null;
+        textareaElRef: HTMLTextAreaElement | null;
+        inputElRef: HTMLInputElement | null;
+        isCompositing: boolean;
+        blur: () => void;
+        clear: () => void;
+        focus: () => void;
+        select: () => void;
+        activate: () => void;
+        deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
+    } | null>;
+    handleInput: (value: string) => void;
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
+    pattern: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchPlaceholder: StringConstructor;
+    mergedTheme: {
+        type: PropType<MergedTheme<InternalSelectMenuTheme>>;
+        required: true;
+    };
+    onPatternInput: PropType<(value: string) => void>;
+}>> & Readonly<{}>, {
+    size: Size;
+    pattern: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;