@uzum-tech/ui 2.3.2 → 2.3.3

package/es/select/src/Select.mjs

@@ -1,152 +1,32 @@
+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;
+};
 import { getPreciseEventTarget, happensIn } from 'seemly';
 import { createTreeMate } from 'treemate';
 import { clickoutside } from 'vdirs';
 import { useCompitable, useIsMounted, useMergedState } from 'vooks';
-import { computed, defineComponent, h, ref, toRef, Transition, vShow, watch, watchEffect, withDirectives } from 'vue';
+import { computed, defineComponent, h, nextTick, ref, toRef, Transition, vShow, watch, watchEffect, withDirectives } from 'vue';
 import { VBinder, VFollower, VTarget } from 'vueuc';
 import { UInternalSelection, UInternalSelectMenu } from "../../_internal/index.mjs";
 import { useConfig, useFormItem, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { call, markEventEffectPerformed, useAdjustedTo, warnOnce } from "../../_utils/index.mjs";
+import { UButton } from "../../button/index.mjs";
 import { selectLight } from "../styles/index.mjs";
+import { selectProps } from "./interface.mjs";
 import style from "./styles/index.cssr.mjs";
-import { createTmOptions, createValOptMap, filterOptions, patternMatched } from "./utils.mjs";
-export const selectProps = Object.assign(Object.assign({}, useTheme.props), {
-  to: 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
-});
+import { createOptionValueSet, createTmOptions, createValOptMap, filterOptions, mergeDefaultOptions, patternMatched } from "./utils.mjs";
+export { selectProps };
 export default defineComponent({
   name: 'Select',
   props: selectProps,
-  setup(props) {
+  setup(props, {
+    slots
+  }) {
     if (process.env.NODE_ENV !== 'production') {
       watchEffect(() => {
         if (props.items !== undefined) {
@@ -155,6 +35,9 @@ export default defineComponent({
         if (props.onChange !== undefined) {
           warnOnce('select', '`on-change` is deprecated, please use `on-update:value` instead.');
         }
+        if (slots.trigger && props.filterable && props.filterPlacement !== 'dropdown') {
+          warnOnce('select', '`trigger` slot with `filterable` requires `filter-placement` to be `dropdown`, since the search input can\'t live inside a custom trigger.');
+        }
       });
     }
     const {
@@ -173,6 +56,8 @@ export default defineComponent({
     const uncontrolledShowRef = ref(false);
     const mergedShowRef = useMergedState(toRef(props, 'show'), uncontrolledShowRef);
     const triggerRef = ref(null);
+    const selfElRef = ref(null);
+    const triggerSlotWrapperRef = ref(null);
     const followerRef = ref(null);
     const menuRef = ref(null);
     const {
@@ -182,6 +67,16 @@ export default defineComponent({
       var _a;
       return (_a = props.placeholder) !== null && _a !== void 0 ? _a : localeRef.value.placeholder;
     });
+    const localizedSearchPlaceholderRef = computed(() => {
+      var _a;
+      return (_a = props.searchPlaceholder) !== null && _a !== void 0 ? _a : localeRef.value.searchPlaceholder;
+    });
+    const mergedTriggerFilterableRef = computed(() => {
+      return props.filterable && props.filterPlacement !== 'dropdown';
+    });
+    const mergedMenuFilterableRef = computed(() => {
+      return props.filterable && props.filterPlacement === 'dropdown';
+    });
     const compitableOptionsRef = useCompitable(props, ['items', 'options']);
     const emptyArray = [];
     const createdOptionsRef = ref([]);
@@ -208,8 +103,14 @@ export default defineComponent({
         });
       };
     });
+    const defaultOptionValuesRef = computed(() => createOptionValueSet(props.defaultOptions, props.valueField, props.childrenField));
+    const mergedOptionsRef = computed(() => {
+      const options = compitableOptionsRef.value || emptyArray;
+      if (!props.defaultOptions.length) return options;
+      return mergeDefaultOptions(props.defaultOptions, defaultOptionValuesRef.value, options, props.valueField, props.childrenField);
+    });
     const localOptionsRef = computed(() => {
-      return beingCreatedOptionsRef.value.concat(createdOptionsRef.value).concat(compitableOptionsRef.value);
+      return beingCreatedOptionsRef.value.concat(createdOptionsRef.value).concat(mergedOptionsRef.value);
     });
     const resolvedFilterRef = computed(() => {
       const {
@@ -238,7 +139,7 @@ export default defineComponent({
     });
     const filteredOptionsRef = computed(() => {
       if (props.remote) {
-        return compitableOptionsRef.value;
+        return mergedOptionsRef.value;
       } else {
         const {
           value: localOptions
@@ -262,6 +163,10 @@ export default defineComponent({
       return createTreeMate(filteredOptionsRef.value, options);
     });
     const valOptMapRef = computed(() => 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 {
@@ -317,6 +222,13 @@ export default defineComponent({
       if (props.account) return 'huge';
       return formItem.mergedSizeRef.value;
     });
+    const mergedCloseOnSelectRef = computed(() => {
+      const {
+        closeOnSelect
+      } = props;
+      if (closeOnSelect !== undefined) return closeOnSelect;
+      return !props.multiple;
+    });
     function doUpdateValue(value, option) {
       const {
         onChange,
@@ -419,13 +331,43 @@ export default defineComponent({
         doUpdateShow(true);
         uncontrolledShowRef.value = true;
         if (props.filterable) {
-          focusSelectionInput();
+          if (props.filterPlacement === 'dropdown') {
+            void 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) {
+        call(onClick, event);
+      }
+      if (closeOnClick) {
+        closeMenuAndRestoreFocus();
+      }
+    }
     function handleMenuAfterLeave() {
       patternRef.value = '';
       beingCreatedOptionsRef.value = emptyArray;
@@ -449,7 +391,7 @@ export default defineComponent({
       if (!mergedShowRef.value) {
         openMenu();
       } else {
-        if (!props.filterable) {
+        if (!props.filterable || props.filterPlacement === 'dropdown') {
           // already focused, don't need to return focus
           closeMenu();
         } else {
@@ -476,21 +418,20 @@ export default defineComponent({
     }
     function handleMenuBlur(e) {
       var _a;
-      if ((_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(e.relatedTarget)) return;
+      if ((_a = getTriggerEl()) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) return;
       focusedRef.value = false;
       doBlur(e);
       // outside select, don't need to return focus
       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(getPreciseEventTarget(e)))) {
+        if (!((_a = getTriggerEl()) === null || _a === void 0 ? void 0 : _a.contains(getPreciseEventTarget(e)))) {
           // outside select, don't need to return focus
           closeMenu();
         }
@@ -513,9 +454,9 @@ export default defineComponent({
           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));
         }
       }
     }
@@ -564,6 +505,9 @@ export default defineComponent({
           changedValue.push(option[valueField]);
           if (clearFilterAfterSelect) patternRef.value = '';
         }
+        if (mergedCloseOnSelectRef.value) {
+          closeMenuAndRestoreFocus();
+        }
         doUpdateValue(changedValue, getMergedOptions(changedValue));
       } else {
         if (tag && !remote) {
@@ -574,8 +518,9 @@ export default defineComponent({
             createdOptionsRef.value = emptyArray;
           }
         }
-        focusSelection();
-        closeMenu();
+        if (mergedCloseOnSelectRef.value) {
+          closeMenuAndRestoreFocus();
+        }
         doUpdateValue(option[valueField], option);
       }
     }
@@ -583,13 +528,7 @@ export default 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,
@@ -612,7 +551,7 @@ export default defineComponent({
           valueField,
           labelField
         } = props;
-        if (compitableOptionsRef.value.some(option => {
+        if (mergedOptionsRef.value.some(option => {
           return option[valueField] === optionBeingCreated[valueField] || option[labelField] === optionBeingCreated[labelField];
         }) || createdOptionsRef.value.some(option => {
           return option[valueField] === optionBeingCreated[valueField] || option[labelField] === optionBeingCreated[labelField];
@@ -623,6 +562,18 @@ export default 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 {
@@ -645,7 +596,7 @@ export default defineComponent({
       }
     }
     function handleMenuMousedown(e) {
-      if (!happensIn(e, 'action') && !happensIn(e, 'empty') && !happensIn(e, 'header')) {
+      if (!happensIn(e, 'action') && !happensIn(e, 'empty') && !happensIn(e, 'header') && !happensIn(e, 'search')) {
         e.preventDefault();
       }
     }
@@ -655,18 +606,18 @@ export default 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':
@@ -701,17 +652,17 @@ export default defineComponent({
               }
             }
           }
-          e.preventDefault();
+          event.preventDefault();
           break;
         case 'ArrowUp':
-          e.preventDefault();
+          event.preventDefault();
           if (props.loading) return;
           if (mergedShowRef.value) {
             (_c = menuRef.value) === null || _c === void 0 ? void 0 : _c.prev();
           }
           break;
         case 'ArrowDown':
-          e.preventDefault();
+          event.preventDefault();
           if (props.loading) return;
           if (mergedShowRef.value) {
             (_d = menuRef.value) === null || _d === void 0 ? void 0 : _d.next();
@@ -721,16 +672,29 @@ export default defineComponent({
           break;
         case 'Escape':
           if (mergedShowRef.value) {
-            markEventEffectPerformed(e);
+            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;
@@ -780,6 +744,8 @@ export default defineComponent({
       treeMate: treeMateRef,
       isMounted: useIsMounted(),
       triggerRef,
+      selfElRef,
+      triggerSlotWrapperRef,
       menuRef,
       pattern: patternRef,
       uncontrolledShow: uncontrolledShowRef,
@@ -789,6 +755,9 @@ export default defineComponent({
       mergedValue: mergedValueRef,
       followerRef,
       localizedPlaceholder: localizedPlaceholderRef,
+      localizedSearchPlaceholder: localizedSearchPlaceholderRef,
+      mergedTriggerFilterable: mergedTriggerFilterableRef,
+      mergedMenuFilterable: mergedMenuFilterableRef,
       selectedOption: selectedOptionRef,
       selectedOptions: selectedOptionsRef,
       mergedSize: mergedSizeRef,
@@ -806,6 +775,7 @@ export default defineComponent({
       handleToggle: handleToggleByTmNode,
       handleDeleteOption: handleToggleByOption,
       handlePatternInput,
+      handleMenuPatternInput,
       handleClear,
       handleTriggerBlur,
       handleTriggerFocus,
@@ -815,6 +785,11 @@ export default defineComponent({
       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,
@@ -822,63 +797,117 @@ export default defineComponent({
     });
   },
   render() {
+    const renderFooterButton = (buttonProps, key) => {
+      if (!buttonProps) return null;
+      const {
+          label,
+          closeOnClick: _closeOnClick,
+          onClick: _onClick
+        } = buttonProps,
+        restButtonProps = __rest(buttonProps, ["label", "closeOnClick", "onClick"]);
+      return h(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 [h("div", {
+        class: `${this.mergedClsPrefix}-select-footer`,
+        key: "footer"
+      }, renderFooterButton(secondaryButtonProps, 'secondary'), renderFooterButton(primaryButtonProps, 'primary'))];
+    };
     return h("div", {
-      class: `${this.mergedClsPrefix}-select`
+      ref: "selfElRef",
+      class: `${this.mergedClsPrefix}-select`,
+      onKeydown: this.$slots.trigger ? this.handleSelfKeydown : undefined
     }, h(VBinder, null, {
       default: () => [h(VTarget, null, {
-        default: () => h(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 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 h(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)];
+            }
+          });
+        }
       }), h(VFollower, {
         ref: "followerRef",
         show: this.mergedShow,
@@ -931,6 +960,11 @@ export default defineComponent({
               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
             }), {
@@ -942,10 +976,7 @@ export default defineComponent({
                 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' ? [[vShow, this.mergedShow], [clickoutside, this.handleMenuClickOutside, undefined, {
               capture: true
             }]] : [[clickoutside, this.handleMenuClickOutside, undefined, {