@uzum-tech/ui 2.3.2 → 2.3.3

package/lib/select/src/Select.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,80 +24,16 @@ const vueuc_1 = require("vueuc");
 const _internal_1 = require("../../_internal");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
+const button_1 = require("../../button");
 const styles_1 = require("../styles");
+const interface_1 = require("./interface");
+Object.defineProperty(exports, "selectProps", { enumerable: true, get: function () { return interface_1.selectProps; } });
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const utils_1 = require("./utils");
-exports.selectProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, bordered: {
-        type: Boolean,
-        default: undefined
-    }, clearable: Boolean, clearCreatedOptionsOnClear: {
-        type: Boolean,
-        default: true
-    }, clearFilterAfterSelect: {
-        type: Boolean,
-        default: true
-    }, options: {
-        type: Array,
-        default: () => []
-    }, defaultValue: {
-        type: [String, Number, Array],
-        default: null
-    }, keyboard: {
-        type: Boolean,
-        default: true
-    }, value: [String, Number, Array], placeholder: String, menuProps: Object, multiple: Boolean, size: String, menuSize: {
-        type: String
-    }, filterable: Boolean, disabled: {
-        type: Boolean,
-        default: undefined
-    }, remote: Boolean, loading: Boolean, loadingSkeleton: Boolean, filter: Function, placement: {
-        type: String,
-        default: 'bottom-start'
-    }, widthMode: {
-        type: String,
-        default: 'trigger'
-    }, tag: Boolean, onCreate: Function, fallbackOption: {
-        type: [Function, Boolean],
-        default: undefined
-    }, show: {
-        type: Boolean,
-        default: undefined
-    }, showArrow: {
-        type: Boolean,
-        default: true
-    }, maxTagCount: [Number, String], ellipsisTagPopoverProps: Object, consistentMenuWidth: {
-        type: Boolean,
-        default: true
-    }, virtualScroll: {
-        type: Boolean,
-        default: true
-    }, labelField: {
-        type: String,
-        default: 'label'
-    }, valueField: {
-        type: String,
-        default: 'value'
-    }, childrenField: {
-        type: String,
-        default: 'children'
-    }, filled: Boolean, tagField: String, renderTagLabel: Function, renderLabel: Function, renderOption: Function, renderTag: Function, 'onUpdate:value': [Function, Array], inputProps: Object, nodeProps: Function, ignoreComposition: { type: Boolean, default: true }, showOnFocus: Boolean, 
-    // for jsx
-    onUpdateValue: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], onFocus: [Function, Array], onScroll: [Function, Array], onSearch: [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array], displayDirective: {
-        type: String,
-        default: 'show'
-    }, resetMenuOnOptionsChange: {
-        type: Boolean,
-        default: true
-    }, status: String, showCheckmark: {
-        type: Boolean,
-        default: true
-    }, scrollbarProps: Object, round: Boolean, counter: Boolean, secondary: Boolean, 
-    /** deprecated */
-    onChange: [Function, Array], items: Array, account: Boolean });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Select',
-    props: exports.selectProps,
-    setup(props) {
+    props: interface_1.selectProps,
+    setup(props, { slots }) {
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {
                 if (props.items !== undefined) {
@@ -95,6 +42,11 @@ exports.default = (0, vue_1.defineComponent)({
                 if (props.onChange !== undefined) {
                     (0, _utils_1.warnOnce)('select', '`on-change` is deprecated, please use `on-update:value` instead.');
                 }
+                if (slots.trigger
+                    && props.filterable
+                    && props.filterPlacement !== 'dropdown') {
+                    (0, _utils_1.warnOnce)('select', '`trigger` slot with `filterable` requires `filter-placement` to be `dropdown`, since the search input can\'t live inside a custom trigger.');
+                }
             });
         }
         const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
@@ -108,6 +60,8 @@ exports.default = (0, vue_1.defineComponent)({
         const uncontrolledShowRef = (0, vue_1.ref)(false);
         const mergedShowRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'show'), uncontrolledShowRef);
         const triggerRef = (0, vue_1.ref)(null);
+        const selfElRef = (0, vue_1.ref)(null);
+        const triggerSlotWrapperRef = (0, vue_1.ref)(null);
         const followerRef = (0, vue_1.ref)(null);
         const menuRef = (0, vue_1.ref)(null);
         const { localeRef } = (0, _mixins_1.useLocale)('Select');
@@ -115,6 +69,16 @@ exports.default = (0, vue_1.defineComponent)({
             var _a;
             return (_a = props.placeholder) !== null && _a !== void 0 ? _a : localeRef.value.placeholder;
         });
+        const localizedSearchPlaceholderRef = (0, vue_1.computed)(() => {
+            var _a;
+            return (_a = props.searchPlaceholder) !== null && _a !== void 0 ? _a : localeRef.value.searchPlaceholder;
+        });
+        const mergedTriggerFilterableRef = (0, vue_1.computed)(() => {
+            return props.filterable && props.filterPlacement !== 'dropdown';
+        });
+        const mergedMenuFilterableRef = (0, vue_1.computed)(() => {
+            return props.filterable && props.filterPlacement === 'dropdown';
+        });
         const compitableOptionsRef = (0, vooks_1.useCompitable)(props, ['items', 'options']);
         const emptyArray = [];
         const createdOptionsRef = (0, vue_1.ref)([]);
@@ -137,8 +101,15 @@ exports.default = (0, vue_1.defineComponent)({
                 });
             };
         });
+        const defaultOptionValuesRef = (0, vue_1.computed)(() => (0, utils_1.createOptionValueSet)(props.defaultOptions, props.valueField, props.childrenField));
+        const mergedOptionsRef = (0, vue_1.computed)(() => {
+            const options = compitableOptionsRef.value || emptyArray;
+            if (!props.defaultOptions.length)
+                return options;
+            return (0, utils_1.mergeDefaultOptions)(props.defaultOptions, defaultOptionValuesRef.value, options, props.valueField, props.childrenField);
+        });
         const localOptionsRef = (0, vue_1.computed)(() => {
-            return beingCreatedOptionsRef.value.concat(createdOptionsRef.value).concat(compitableOptionsRef.value);
+            return beingCreatedOptionsRef.value.concat(createdOptionsRef.value).concat(mergedOptionsRef.value);
         });
         const resolvedFilterRef = (0, vue_1.computed)(() => {
             const { filter } = props;
@@ -164,7 +135,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const filteredOptionsRef = (0, vue_1.computed)(() => {
             if (props.remote) {
-                return compitableOptionsRef.value;
+                return mergedOptionsRef.value;
             }
             else {
                 const { value: localOptions } = localOptionsRef;
@@ -183,6 +154,10 @@ exports.default = (0, vue_1.defineComponent)({
             return (0, treemate_1.createTreeMate)(filteredOptionsRef.value, options);
         });
         const valOptMapRef = (0, vue_1.computed)(() => (0, utils_1.createValOptMap)(localOptionsRef.value, props.valueField, props.childrenField));
+        function getTriggerEl() {
+            var _a, _b;
+            return (_b = (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.$el) !== null && _b !== void 0 ? _b : selfElRef.value;
+        }
         function getMergedOptions(values) {
             const remote = props.remote;
             const { value: memoValOptMap } = memoValOptMapRef;
@@ -230,6 +205,12 @@ exports.default = (0, vue_1.defineComponent)({
                 return 'huge';
             return formItem.mergedSizeRef.value;
         });
+        const mergedCloseOnSelectRef = (0, vue_1.computed)(() => {
+            const { closeOnSelect } = props;
+            if (closeOnSelect !== undefined)
+                return closeOnSelect;
+            return !props.multiple;
+        });
         function doUpdateValue(value, option) {
             const { onChange, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
             const { triggerFormChange, triggerFormInput } = formItem;
@@ -310,13 +291,42 @@ exports.default = (0, vue_1.defineComponent)({
                 doUpdateShow(true);
                 uncontrolledShowRef.value = true;
                 if (props.filterable) {
-                    focusSelectionInput();
+                    if (props.filterPlacement === 'dropdown') {
+                        void (0, vue_1.nextTick)(() => {
+                            var _a;
+                            (_a = menuRef.value) === null || _a === void 0 ? void 0 : _a.focusSearchInput();
+                        });
+                    }
+                    else {
+                        focusSelectionInput();
+                    }
                 }
             }
         }
         function closeMenu() {
             doUpdateShow(false);
         }
+        function toggleMenu() {
+            if (mergedShowRef.value) {
+                closeMenu();
+            }
+            else {
+                openMenu();
+            }
+        }
+        function closeMenuAndRestoreFocus() {
+            focusSelection();
+            closeMenu();
+        }
+        function handleFooterButtonClick(buttonProps, event) {
+            const { onClick, closeOnClick } = buttonProps;
+            if (onClick) {
+                (0, _utils_1.call)(onClick, event);
+            }
+            if (closeOnClick) {
+                closeMenuAndRestoreFocus();
+            }
+        }
         function handleMenuAfterLeave() {
             patternRef.value = '';
             beingCreatedOptionsRef.value = emptyArray;
@@ -342,7 +352,7 @@ exports.default = (0, vue_1.defineComponent)({
                 openMenu();
             }
             else {
-                if (!props.filterable) {
+                if (!props.filterable || props.filterPlacement === 'dropdown') {
                     // already focused, don't need to return focus
                     closeMenu();
                 }
@@ -370,7 +380,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleMenuBlur(e) {
             var _a;
-            if ((_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(e.relatedTarget))
+            if ((_a = getTriggerEl()) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
                 return;
             focusedRef.value = false;
             doBlur(e);
@@ -378,14 +388,13 @@ exports.default = (0, vue_1.defineComponent)({
             closeMenu();
         }
         function handleMenuTabOut() {
-            var _a;
-            (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+            focusSelection();
             closeMenu();
         }
         function handleMenuClickOutside(e) {
             var _a;
             if (mergedShowRef.value) {
-                if (!((_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains((0, seemly_1.getPreciseEventTarget)(e)))) {
+                if (!((_a = getTriggerEl()) === null || _a === void 0 ? void 0 : _a.contains((0, seemly_1.getPreciseEventTarget)(e)))) {
                     // outside select, don't need to return focus
                     closeMenu();
                 }
@@ -404,10 +413,10 @@ exports.default = (0, vue_1.defineComponent)({
                 const { value: valOptMap } = valOptMapRef;
                 if (remote) {
                     const { value: memoValOptMap } = memoValOptMapRef;
-                    return value.filter(v => valOptMap.has(v) || memoValOptMap.has(v));
+                    return value.filter(value => valOptMap.has(value) || memoValOptMap.has(value));
                 }
                 else {
-                    return value.filter(v => valOptMap.has(v));
+                    return value.filter(value => valOptMap.has(value));
                 }
             }
         }
@@ -454,6 +463,9 @@ exports.default = (0, vue_1.defineComponent)({
                     if (clearFilterAfterSelect)
                         patternRef.value = '';
                 }
+                if (mergedCloseOnSelectRef.value) {
+                    closeMenuAndRestoreFocus();
+                }
                 doUpdateValue(changedValue, getMergedOptions(changedValue));
             }
             else {
@@ -468,8 +480,9 @@ exports.default = (0, vue_1.defineComponent)({
                         createdOptionsRef.value = emptyArray;
                     }
                 }
-                focusSelection();
-                closeMenu();
+                if (mergedCloseOnSelectRef.value) {
+                    closeMenuAndRestoreFocus();
+                }
                 doUpdateValue(option[valueField], option);
             }
         }
@@ -477,11 +490,7 @@ exports.default = (0, vue_1.defineComponent)({
             const createdOptions = createdOptionsRef.value;
             return createdOptions.findIndex(createdOption => createdOption[props.valueField] === optionValue);
         }
-        function handlePatternInput(e) {
-            if (!mergedShowRef.value) {
-                openMenu();
-            }
-            const { value } = e.target;
+        function setPattern(value) {
             patternRef.value = value;
             const { tag, remote } = props;
             doSearch(value);
@@ -495,7 +504,7 @@ exports.default = (0, vue_1.defineComponent)({
                     ? onCreate(value)
                     : { [props.labelField]: value, [props.valueField]: value };
                 const { valueField, labelField } = props;
-                if (compitableOptionsRef.value.some((option) => {
+                if (mergedOptionsRef.value.some((option) => {
                     return (option[valueField] === optionBeingCreated[valueField]
                         || option[labelField] === optionBeingCreated[labelField]);
                 })
@@ -510,6 +519,16 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
+        function handlePatternInput(e) {
+            if (!mergedShowRef.value) {
+                openMenu();
+            }
+            const { value } = e.target;
+            setPattern(value);
+        }
+        function handleMenuPatternInput(value) {
+            setPattern(value);
+        }
         function handleClear(e) {
             e.stopPropagation();
             const { multiple, tag, remote, clearCreatedOptionsOnClear } = props;
@@ -530,7 +549,8 @@ exports.default = (0, vue_1.defineComponent)({
         function handleMenuMousedown(e) {
             if (!(0, seemly_1.happensIn)(e, 'action')
                 && !(0, seemly_1.happensIn)(e, 'empty')
-                && !(0, seemly_1.happensIn)(e, 'header')) {
+                && !(0, seemly_1.happensIn)(e, 'header')
+                && !(0, seemly_1.happensIn)(e, 'search')) {
                 e.preventDefault();
             }
         }
@@ -540,19 +560,19 @@ exports.default = (0, vue_1.defineComponent)({
         }
         // keyboard events
         // also for menu keydown
-        function handleKeydown(e) {
-            var _a, _b, _c, _d, _e;
+        function handleKeydown(event) {
+            var _a, _b, _c, _d;
             if (!props.keyboard) {
-                e.preventDefault();
+                event.preventDefault();
                 return;
             }
-            switch (e.key) {
+            switch (event.key) {
                 case ' ':
                     if (props.filterable) {
                         break;
                     }
                     else {
-                        e.preventDefault();
+                        event.preventDefault();
                     }
                 // eslint-disable-next-line no-fallthrough
                 case 'Enter':
@@ -590,10 +610,10 @@ exports.default = (0, vue_1.defineComponent)({
                             }
                         }
                     }
-                    e.preventDefault();
+                    event.preventDefault();
                     break;
                 case 'ArrowUp':
-                    e.preventDefault();
+                    event.preventDefault();
                     if (props.loading)
                         return;
                     if (mergedShowRef.value) {
@@ -601,7 +621,7 @@ exports.default = (0, vue_1.defineComponent)({
                     }
                     break;
                 case 'ArrowDown':
-                    e.preventDefault();
+                    event.preventDefault();
                     if (props.loading)
                         return;
                     if (mergedShowRef.value) {
@@ -613,16 +633,31 @@ exports.default = (0, vue_1.defineComponent)({
                     break;
                 case 'Escape':
                     if (mergedShowRef.value) {
-                        (0, _utils_1.markEventEffectPerformed)(e);
+                        (0, _utils_1.markEventEffectPerformed)(event);
                         closeMenu();
                     }
-                    (_e = triggerRef.value) === null || _e === void 0 ? void 0 : _e.focus();
+                    focusSelection();
                     break;
             }
         }
-        function focusSelection() {
+        function handleSelfKeydown(event) {
             var _a;
-            (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+            if (((_a = menuRef.value) === null || _a === void 0 ? void 0 : _a.selfRef)
+                && menuRef.value.selfRef.contains(event.target)) {
+                return;
+            }
+            handleKeydown(event);
+        }
+        function focusSelection() {
+            if (triggerRef.value) {
+                triggerRef.value.focus();
+                return;
+            }
+            const wrapperEl = triggerSlotWrapperRef.value;
+            if (!wrapperEl)
+                return;
+            const focusableEl = wrapperEl.querySelector('[tabindex], button, input, select, textarea, a[href]');
+            focusableEl === null || focusableEl === void 0 ? void 0 : focusableEl.focus();
         }
         function focusSelectionInput() {
             var _a;
@@ -664,7 +699,9 @@ exports.default = (0, vue_1.defineComponent)({
             ? (0, _mixins_1.useThemeClass)('select', undefined, cssVarsRef, props)
             : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, treeMate: treeMateRef, isMounted: (0, vooks_1.useIsMounted)(), triggerRef,
-            menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, followerRef, localizedPlaceholder: localizedPlaceholderRef, selectedOption: selectedOptionRef, selectedOptions: selectedOptionsRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, focused: focusedRef, activeWithoutMenuOpen: activeWithoutMenuOpenRef, inlineThemeDisabled,
+            selfElRef,
+            triggerSlotWrapperRef,
+            menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, followerRef, localizedPlaceholder: localizedPlaceholderRef, localizedSearchPlaceholder: localizedSearchPlaceholderRef, mergedTriggerFilterable: mergedTriggerFilterableRef, mergedMenuFilterable: mergedMenuFilterableRef, selectedOption: selectedOptionRef, selectedOptions: selectedOptionsRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, focused: focusedRef, activeWithoutMenuOpen: activeWithoutMenuOpenRef, inlineThemeDisabled,
             onTriggerInputFocus,
             onTriggerInputBlur,
             handleTriggerOrMenuResize,
@@ -672,22 +709,66 @@ exports.default = (0, vue_1.defineComponent)({
             handleMenuBlur,
             handleMenuTabOut,
             handleTriggerClick, handleToggle: handleToggleByTmNode, handleDeleteOption: handleToggleByOption, handlePatternInput,
+            handleMenuPatternInput,
             handleClear,
             handleTriggerBlur,
             handleTriggerFocus,
             handleKeydown,
             handleMenuAfterLeave,
             handleMenuClickOutside,
-            handleMenuScroll, handleMenuKeydown: handleKeydown, handleMenuMousedown, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
+            handleMenuScroll, handleMenuKeydown: handleKeydown, handleMenuMousedown,
+            handleFooterButtonClick,
+            handleSelfKeydown,
+            openMenu,
+            closeMenu,
+            toggleMenu, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
-        return ((0, vue_1.h)("div", { class: `${this.mergedClsPrefix}-select` },
+        const renderFooterButton = (buttonProps, key) => {
+            if (!buttonProps)
+                return null;
+            const { label, closeOnClick: _closeOnClick, onClick: _onClick } = buttonProps, restButtonProps = __rest(buttonProps, ["label", "closeOnClick", "onClick"]);
+            return ((0, vue_1.h)(button_1.UButton, Object.assign({ key: key }, restButtonProps, { onClick: (e) => {
+                    this.handleFooterButtonClick(buttonProps, e);
+                } }), {
+                default: () => (typeof label === 'function' ? label() : label)
+            }));
+        };
+        const renderFooter = () => {
+            const { action } = this.$slots;
+            if (action) {
+                return [action()].flat();
+            }
+            const { primaryButtonProps, secondaryButtonProps } = this;
+            if (!primaryButtonProps && !secondaryButtonProps)
+                return undefined;
+            return [
+                (0, vue_1.h)("div", { class: `${this.mergedClsPrefix}-select-footer`, key: "footer" },
+                    renderFooterButton(secondaryButtonProps, 'secondary'),
+                    renderFooterButton(primaryButtonProps, 'primary'))
+            ];
+        };
+        return ((0, vue_1.h)("div", { ref: "selfElRef", class: `${this.mergedClsPrefix}-select`, onKeydown: this.$slots.trigger ? this.handleSelfKeydown : undefined },
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(_internal_1.UInternalSelection, { ref: "triggerRef", inlineThemeDisabled: this.inlineThemeDisabled, status: this.mergedStatus, inputProps: this.inputProps, clsPrefix: this.mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, ellipsisTagPopoverProps: this.ellipsisTagPopoverProps, bordered: this.mergedBordered, active: this.activeWithoutMenuOpen || this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, labelField: this.labelField, valueField: this.valueField, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, loadingSkeleton: this.loadingSkeleton, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeydown, onPatternBlur: this.onTriggerInputBlur, onPatternFocus: this.onTriggerInputFocus, onResize: this.handleTriggerOrMenuResize, ignoreComposition: this.ignoreComposition, round: this.round, counter: this.counter, secondary: this.secondary, account: this.account, tagField: this.tagField, renderTagLabel: this.renderTagLabel, filled: this.filled }, {
-                            arrow: () => { var _a, _b; return [(_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
-                        }))
+                        default: () => {
+                            if (this.$slots.trigger) {
+                                return ((0, vue_1.h)("div", { ref: "triggerSlotWrapperRef", class: `${this.mergedClsPrefix}-select__trigger-wrapper` }, this.$slots.trigger({
+                                    open: this.openMenu,
+                                    close: this.closeMenu,
+                                    toggle: this.toggleMenu,
+                                    show: this.mergedShow,
+                                    disabled: this.mergedDisabled,
+                                    value: this.mergedValue,
+                                    selectedOption: this.selectedOption,
+                                    selectedOptions: this.selectedOptions
+                                })));
+                            }
+                            return ((0, vue_1.h)(_internal_1.UInternalSelection, { ref: "triggerRef", inlineThemeDisabled: this.inlineThemeDisabled, status: this.mergedStatus, inputProps: this.inputProps, clsPrefix: this.mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, ellipsisTagPopoverProps: this.ellipsisTagPopoverProps, bordered: this.mergedBordered, active: this.activeWithoutMenuOpen || this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.mergedTriggerFilterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, labelField: this.labelField, valueField: this.valueField, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, loadingSkeleton: this.loadingSkeleton, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeydown, onPatternBlur: this.onTriggerInputBlur, onPatternFocus: this.onTriggerInputFocus, onResize: this.handleTriggerOrMenuResize, ignoreComposition: this.ignoreComposition, round: this.round, counter: this.counter, secondary: this.secondary, account: this.account, tagField: this.tagField, renderTagLabel: this.renderTagLabel, filled: this.filled }, {
+                                arrow: () => { var _a, _b; return [(_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
+                            }));
+                        }
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { ref: "followerRef", show: this.mergedShow, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, containerClass: this.namespace, width: this.consistentMenuWidth ? 'target' : undefined, minWidth: "target", placement: this.placement }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onAfterLeave: this.handleMenuAfterLeave }, {
@@ -703,10 +784,10 @@ exports.default = (0, vue_1.defineComponent)({
                                         this.themeClass,
                                         (_b = this.menuProps) === null || _b === void 0 ? void 0 : _b.class
                                     ], clsPrefix: this.mergedClsPrefix, focusable: true, account: this.account, labelField: this.labelField, valueField: this.valueField, autoPending: true, nodeProps: this.nodeProps, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
-                                        .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: this.menuSize || 'medium', renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_c = this.menuProps) === null || _c === void 0 ? void 0 : _c.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, showCheckmark: this.showCheckmark, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange, scrollbarProps: this.scrollbarProps }), {
+                                        .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: this.menuSize || 'medium', renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_c = this.menuProps) === null || _c === void 0 ? void 0 : _c.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, showCheckmark: this.showCheckmark, markType: this.markType, filterable: this.mergedMenuFilterable, pattern: this.pattern, searchPlaceholder: this.localizedSearchPlaceholder, onPatternInput: this.handleMenuPatternInput, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange, scrollbarProps: this.scrollbarProps }), {
                                     empty: () => { var _a, _b; return [(_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
                                     header: () => { var _a, _b; return [(_b = (_a = this.$slots).header) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
-                                    action: () => { var _a, _b; return [(_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
+                                    action: renderFooter
                                 }), this.displayDirective === 'show'
                                     ? [
                                         [vue_1.vShow, this.mergedShow],