@wfrog/vc-ui 1.1.0 → 1.2.0

package/dist/es/chunk/{HAog8AWU.mjs → CitH0taR.mjs}

@@ -1,29 +1,29 @@
-import { shallowRef, ref, computed, watch, inject, getCurrentInstance, toRaw, defineComponent, withDirectives, createElementBlock, openBlock, withModifiers, normalizeClass, renderSlot, createElementVNode, toDisplayString, vShow, unref, toRefs, reactive, onBeforeUnmount, nextTick, normalizeStyle, createCommentVNode, onMounted, watchEffect, provide, isVNode, resolveComponent, resolveDirective, toHandlerKey, createVNode, withCtx, createBlock, Fragment, renderList, mergeProps, normalizeProps, createTextVNode, vModelText, resolveDynamicComponent } from 'vue';
-import { u as useTooltipContentProps, E as Ee, a as ElTooltip } from './CLMc8GzD.mjs';
-import { s as scrollbarEmits, E as ElScrollbar } from './axpwSky6.mjs';
-import { t as tagProps, E as ElTag } from './DihosKp1.mjs';
-import { E as ElIcon } from './cPBw23yt.mjs';
-import { i as isEqual } from './BsLJxiSC.mjs';
-import { g as get, u as useLocale } from './Dk6Bx0KT.mjs';
-import { c as buildProps, t as throwError, p as isObject, u as useNamespace, e as debugWarn, i as isArray$1, a as isEmpty, g as isUndefined, f as isNumber, j as isFunction, l as isPlainObject, k as isNil, h as isString, d as definePropType } from './DRoyW749.mjs';
-import { b as isArray } from './NQBKROII.mjs';
-import { _ as _export_sfc, w as withInstall, a as withNoopInstall } from './DTLPXrjb.mjs';
-import { u as useId } from './CBSopeeE.mjs';
+import { ref, watch, inject, computed, getCurrentInstance, toRaw, defineComponent, withDirectives, createElementBlock, openBlock, withModifiers, normalizeClass, renderSlot, createElementVNode, toDisplayString, vShow, unref, toRefs, reactive, onBeforeUnmount, nextTick, normalizeStyle, createCommentVNode, onMounted, useSlots, watchEffect, provide, isVNode, shallowRef, resolveComponent, resolveDirective, mergeProps, toHandlerKey, createVNode, withCtx, createBlock, Fragment, renderList, createTextVNode, vModelText, resolveDynamicComponent } from 'vue';
+import { u as useTooltipContentProps, E as Ee, a as ElTooltip } from './DMYHOxhk.mjs';
+import { s as scrollbarEmits, E as ElScrollbar } from './_8u_XVHh.mjs';
+import { t as tagProps, E as ElTag } from './B1BnPYNG.mjs';
+import { E as ElIcon } from './DEPZhJ0Z.mjs';
+import { i as isEqual } from './Dw-yyl2m.mjs';
+import { g as get, u as useLocale } from './plK2vnjp.mjs';
+import { c as buildProps, t as throwError, p as isObject, u as useNamespace, e as debugWarn, i as isArray$1, a as isEmpty, g as isUndefined, f as isNumber, j as isFunction, l as isPlainObject, k as isNil, h as isString, d as definePropType } from './CcKUdl3e.mjs';
+import { b as isArray } from './DWcIzeMM.mjs';
+import { _ as _export_sfc, w as withInstall, a as withNoopInstall } from './BTsEMnf_.mjs';
+import { u as useId } from './DQHGjqG5.mjs';
 import { useResizeObserver, isIOS, isClient, useDebounceFn, useMutationObserver } from '@vueuse/core';
-import { u as useFormItem, a as useFormItemInputId, b as useFormDisabled, c as useFormSize } from './DXPWe_a5.mjs';
-import { a as useEmptyValues, u as useEmptyValuesProps } from './BcTuAX8r.mjs';
-import { a as useComposition, u as useFocusController } from './XwSiBVsA.mjs';
+import { s as scrollIntoView } from './oW98L-44.mjs';
+import { u as useFormItem, a as useFormItemInputId, b as useFormDisabled, c as useFormSize } from './U13Qpiki.mjs';
+import { a as useEmptyValues, u as useEmptyValuesProps } from './Dsye5ZEp.mjs';
+import { a as useComposition, u as useFocusController } from './CM_I1FoA.mjs';
 import { V as ValidateComponentsMap, i as iconPropType } from '../components/icon/icon2.mjs';
 import { g as getEventCode, E as EVENT_CODE } from './BTpNRPQW.mjs';
 import { U as UPDATE_MODEL_EVENT, C as CHANGE_EVENT } from './Ct6q2FXg.mjs';
-import { s as scrollIntoView } from './Bl2KlMdP.mjs';
-import { b as baseIteratee } from './DZD-YnCt.mjs';
-import { c as clamp } from './73YgKz3H.mjs';
+import { b as baseIteratee } from './Dcm-lOj8.mjs';
+import { c as clamp } from './BLLKi_0v.mjs';
 import { ArrowDown, CircleClose } from '@element-plus/icons-vue';
-import { u as useSizeProp } from './BsGCX4td.mjs';
-import { u as useAriaProps } from './BpqBBo4z.mjs';
-import { C as ClickOutside } from './DrgvuOYH.mjs';
-import { f as flattedChildren } from './BzedaLtg.mjs';
+import { u as useSizeProp } from './BK4T_2ha.mjs';
+import { u as useAriaProps } from './BDyXj_90.mjs';
+import { C as ClickOutside } from './CL5WTCB3.mjs';
+import { f as flattedChildren } from './BYVaz5Or.mjs';
 
 /**
  * The base implementation of `_.findIndex` and `_.findLastIndex` without
@@ -133,27 +133,6 @@ function findLastIndex(array, predicate, fromIndex) {
   return baseFindIndex(array, baseIteratee(predicate), index);
 }
 
-const MINIMUM_INPUT_WIDTH = 11;
-const BORDER_HORIZONTAL_WIDTH = 2;
-
-function useCalcInputWidth() {
-  const calculatorRef = shallowRef();
-  const calculatorWidth = ref(0);
-  const inputStyle = computed(() => ({
-    minWidth: `${Math.max(calculatorWidth.value, MINIMUM_INPUT_WIDTH)}px`
-  }));
-  const resetCalculatorWidth = () => {
-    var _a, _b;
-    calculatorWidth.value = (_b = (_a = calculatorRef.value) == null ? void 0 : _a.getBoundingClientRect().width) != null ? _b : 0;
-  };
-  useResizeObserver(calculatorRef, resetCalculatorWidth);
-  return {
-    calculatorRef,
-    calculatorWidth,
-    inputStyle
-  };
-}
-
 const defaultProps = {
   label: "label",
   value: "value",
@@ -163,12 +142,16 @@ const defaultProps = {
 function useProps(props) {
   const aliasProps = ref({ ...defaultProps, ...props.props });
   let cache = { ...props.props };
-  watch(() => props.props, (val) => {
-    if (!isEqual(val, cache)) {
-      aliasProps.value = { ...defaultProps, ...val };
-      cache = { ...val };
-    }
-  }, { deep: true });
+  watch(
+    () => props.props,
+    (val) => {
+      if (!isEqual(val, cache)) {
+        aliasProps.value = { ...defaultProps, ...val };
+        cache = { ...val };
+      }
+    },
+    { deep: true }
+  );
   const getLabel = (option) => get(option, aliasProps.value.label);
   const getValue = (option) => get(option, aliasProps.value.value);
   const getDisabled = (option) => get(option, aliasProps.value.disabled);
@@ -248,27 +231,37 @@ function useOption(props, states) {
     const regexp = new RegExp(escapeStringRegexp(query), "i");
     states.visible = regexp.test(String(currentLabel.value)) || props.created;
   };
-  watch(() => currentLabel.value, () => {
-    if (!props.created && !select.props.remote)
-      select.setSelected();
-  });
-  watch(() => props.value, (val, oldVal) => {
-    const { remote, valueKey } = select.props;
-    const shouldUpdate = remote ? val !== oldVal : !isEqual(val, oldVal);
-    if (shouldUpdate) {
-      select.onOptionDestroy(oldVal, instance.proxy);
-      select.onOptionCreate(instance.proxy);
+  watch(
+    () => currentLabel.value,
+    () => {
+      if (!props.created && !select.props.remote)
+        select.setSelected();
     }
-    if (!props.created && !remote) {
-      if (valueKey && isObject(val) && isObject(oldVal) && val[valueKey] === oldVal[valueKey]) {
-        return;
+  );
+  watch(
+    () => props.value,
+    (val, oldVal) => {
+      const { remote, valueKey } = select.props;
+      const shouldUpdate = remote ? val !== oldVal : !isEqual(val, oldVal);
+      if (shouldUpdate) {
+        select.onOptionDestroy(oldVal, instance.proxy);
+        select.onOptionCreate(instance.proxy);
+      }
+      if (!props.created && !remote) {
+        if (valueKey && isObject(val) && isObject(oldVal) && val[valueKey] === oldVal[valueKey]) {
+          return;
+        }
+        select.setSelected();
       }
-      select.setSelected();
     }
-  });
-  watch(() => selectGroup.disabled, () => {
-    states.groupDisabled = selectGroup.disabled;
-  }, { immediate: true });
+  );
+  watch(
+    () => selectGroup.disabled,
+    () => {
+      states.groupDisabled = selectGroup.disabled;
+    },
+    { immediate: true }
+  );
   return {
     select,
     currentLabel,
@@ -345,24 +338,33 @@ const _sfc_main$3 = defineComponent({
     };
   }
 });
-function _sfc_render$3(_ctx, _cache) {
+const _hoisted_1$1 = ["id", "aria-disabled", "aria-selected"];
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createElementBlock("li", {
     id: _ctx.id,
     class: normalizeClass(_ctx.containerKls),
     role: "option",
     "aria-disabled": _ctx.isDisabled || void 0,
     "aria-selected": _ctx.itemSelected,
-    onMousemove: _ctx.hoverItem,
-    onClick: withModifiers(_ctx.selectOptionClick, ["stop"])
+    onMousemove: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
+    onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
   }, [
     renderSlot(_ctx.$slots, "default", {}, () => [
-      createElementVNode("span", null, toDisplayString(_ctx.currentLabel), 1)
+      createElementVNode(
+        "span",
+        null,
+        toDisplayString(_ctx.currentLabel),
+        1
+      )
     ])
-  ], 42, ["id", "aria-disabled", "aria-selected", "onMousemove", "onClick"])), [
+  ], 42, _hoisted_1$1)), [
     [vShow, _ctx.visible]
   ]);
 }
-var Option = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__file", "option.vue"]]);
+var Option = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/select/src/option.vue"]]);
+
+const MINIMUM_INPUT_WIDTH = 11;
+const BORDER_HORIZONTAL_WIDTH = 2;
 
 const _sfc_main$2 = defineComponent({
   name: "ElSelectDropdown",
@@ -397,29 +399,45 @@ const _sfc_main$2 = defineComponent({
   }
 });
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass([_ctx.ns.b("dropdown"), _ctx.ns.is("multiple", _ctx.isMultiple), _ctx.popperClass]),
-    style: normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
-  }, [
-    _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass(_ctx.ns.be("dropdown", "header"))
-    }, [
-      renderSlot(_ctx.$slots, "header")
-    ], 2)) : createCommentVNode("v-if", true),
-    renderSlot(_ctx.$slots, "default"),
-    _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
-      key: 1,
-      class: normalizeClass(_ctx.ns.be("dropdown", "footer"))
-    }, [
-      renderSlot(_ctx.$slots, "footer")
-    ], 2)) : createCommentVNode("v-if", true)
-  ], 6);
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      class: normalizeClass([_ctx.ns.b("dropdown"), _ctx.ns.is("multiple", _ctx.isMultiple), _ctx.popperClass]),
+      style: normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
+    },
+    [
+      _ctx.$slots.header ? (openBlock(), createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: normalizeClass(_ctx.ns.be("dropdown", "header"))
+        },
+        [
+          renderSlot(_ctx.$slots, "header")
+        ],
+        2
+      )) : createCommentVNode("v-if", true),
+      renderSlot(_ctx.$slots, "default"),
+      _ctx.$slots.footer ? (openBlock(), createElementBlock(
+        "div",
+        {
+          key: 1,
+          class: normalizeClass(_ctx.ns.be("dropdown", "footer"))
+        },
+        [
+          renderSlot(_ctx.$slots, "footer")
+        ],
+        2
+      )) : createCommentVNode("v-if", true)
+    ],
+    6
+  );
 }
-var ElSelectMenu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "select-dropdown.vue"]]);
+var ElSelectMenu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/select/src/select-dropdown.vue"]]);
 
 const useSelect = (props, emit) => {
   const { t } = useLocale();
+  const slots = useSlots();
   const contentId = useId();
   const nsSelect = useNamespace("select");
   const nsInput = useNamespace("input");
@@ -497,12 +515,20 @@ const useSelect = (props, emit) => {
   const showClearBtn = computed(() => {
     return props.clearable && !selectDisabled.value && hasModelValue.value && (isFocused.value || states.inputHovering);
   });
-  const iconComponent = computed(() => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon);
-  const iconReverse = computed(() => nsSelect.is("reverse", !!(iconComponent.value && expanded.value)));
+  const iconComponent = computed(
+    () => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon
+  );
+  const iconReverse = computed(
+    () => nsSelect.is("reverse", !!(iconComponent.value && expanded.value))
+  );
   const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
-  const validateIcon = computed(() => validateState.value && ValidateComponentsMap[validateState.value]);
+  const validateIcon = computed(
+    () => validateState.value && ValidateComponentsMap[validateState.value]
+  );
   const debounce = computed(() => props.remote ? props.debounce : 0);
-  const isRemoteSearchEmpty = computed(() => props.remote && !states.inputValue && states.options.size === 0);
+  const isRemoteSearchEmpty = computed(
+    () => props.remote && !states.inputValue && states.options.size === 0
+  );
   const emptyText = computed(() => {
     if (props.loading) {
       return props.loadingText || t("el.select.loading");
@@ -516,7 +542,9 @@ const useSelect = (props, emit) => {
     }
     return null;
   });
-  const filteredOptionsCount = computed(() => optionsArray.value.filter((option) => option.visible).length);
+  const filteredOptionsCount = computed(
+    () => optionsArray.value.filter((option) => option.visible).length
+  );
   const optionsArray = computed(() => {
     const list = Array.from(states.options.values());
     const newList = [];
@@ -528,7 +556,9 @@ const useSelect = (props, emit) => {
     });
     return newList.length >= list.length ? newList : list;
   });
-  const cachedOptionsArray = computed(() => Array.from(states.cachedOptions.values()));
+  const cachedOptionsArray = computed(
+    () => Array.from(states.cachedOptions.values())
+  );
   const showNewOption = computed(() => {
     const hasExistingOption = optionsArray.value.filter((option) => {
       return !option.created;
@@ -548,10 +578,12 @@ const useSelect = (props, emit) => {
     });
   };
   const selectSize = useFormSize();
-  const collapseTagSize = computed(() => ["small"].includes(selectSize.value) ? "small" : "default");
+  const collapseTagSize = computed(
+    () => ["small"].includes(selectSize.value) ? "small" : "default"
+  );
   const dropdownMenuVisible = computed({
     get() {
-      return expanded.value && (props.loading || !isRemoteSearchEmpty.value) && (!debouncing.value || !isEmpty(states.previousQuery));
+      return expanded.value && (props.loading || !isRemoteSearchEmpty.value || props.remote && !!slots.empty) && (!debouncing.value || !isEmpty(states.previousQuery));
     },
     set(val) {
       expanded.value = val;
@@ -570,40 +602,51 @@ const useSelect = (props, emit) => {
     return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
   });
   const mouseEnterEventName = computed(() => isIOS ? null : "mouseenter");
-  watch(() => props.modelValue, (val, oldVal) => {
-    if (props.multiple) {
-      if (props.filterable && !props.reserveKeyword) {
-        states.inputValue = "";
-        handleQueryChange("");
+  watch(
+    () => props.modelValue,
+    (val, oldVal) => {
+      if (props.multiple) {
+        if (props.filterable && !props.reserveKeyword) {
+          states.inputValue = "";
+          handleQueryChange("");
+        }
       }
+      setSelected();
+      if (!isEqual(val, oldVal) && props.validateEvent) {
+        formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
+      }
+    },
+    {
+      flush: "post",
+      deep: true
     }
-    setSelected();
-    if (!isEqual(val, oldVal) && props.validateEvent) {
-      formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
-    }
-  }, {
-    flush: "post",
-    deep: true
-  });
-  watch(() => expanded.value, (val) => {
-    if (val) {
-      handleQueryChange(states.inputValue);
-    } else {
-      states.inputValue = "";
-      states.previousQuery = null;
-      states.isBeforeHide = true;
+  );
+  watch(
+    () => expanded.value,
+    (val) => {
+      if (val) {
+        handleQueryChange(states.inputValue);
+      } else {
+        states.inputValue = "";
+        states.previousQuery = null;
+        states.isBeforeHide = true;
+      }
     }
-  });
-  watch(() => states.options.entries(), () => {
-    if (!isClient)
-      return;
-    setSelected();
-    if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptionsCount.value) {
-      checkDefaultFirstOption();
+  );
+  watch(
+    () => states.options.entries(),
+    () => {
+      if (!isClient)
+        return;
+      setSelected();
+      if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptionsCount.value) {
+        checkDefaultFirstOption();
+      }
+    },
+    {
+      flush: "post"
     }
-  }, {
-    flush: "post"
-  });
+  );
   watch([() => states.hoveringIndex, optionsArray], ([val]) => {
     if (isNumber(val) && val > -1) {
       hoverOption.value = optionsArray.value[val] || {};
@@ -636,11 +679,16 @@ const useSelect = (props, emit) => {
     }
   };
   const checkDefaultFirstOption = () => {
-    const optionsInDropdown = optionsArray.value.filter((n) => n.visible && !n.disabled && !n.states.groupDisabled);
+    const optionsInDropdown = optionsArray.value.filter(
+      (n) => n.visible && !n.disabled && !n.states.groupDisabled
+    );
     const userCreatedOption = optionsInDropdown.find((n) => n.created);
     const firstOriginOption = optionsInDropdown[0];
     const valueList = optionsArray.value.map((item) => item.value);
-    states.hoveringIndex = getValueIndex(valueList, userCreatedOption || firstOriginOption);
+    states.hoveringIndex = getValueIndex(
+      valueList,
+      userCreatedOption || firstOriginOption
+    );
   };
   const setSelected = () => {
     if (!props.multiple) {
@@ -692,13 +740,17 @@ const useSelect = (props, emit) => {
     const length = states.selected.length;
     if (length > 0) {
       const lastOption = states.selected[length - 1];
-      states.hoveringIndex = optionsArray.value.findIndex((item) => getValueKey(lastOption) === getValueKey(item));
+      states.hoveringIndex = optionsArray.value.findIndex(
+        (item) => getValueKey(lastOption) === getValueKey(item)
+      );
     } else {
       states.hoveringIndex = -1;
     }
   };
   const resetSelectionWidth = () => {
-    states.selectionWidth = Number.parseFloat(window.getComputedStyle(selectionRef.value).width);
+    states.selectionWidth = Number.parseFloat(
+      window.getComputedStyle(selectionRef.value).width
+    );
   };
   const resetCollapseItemWidth = () => {
     states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
@@ -829,13 +881,18 @@ const useSelect = (props, emit) => {
     const targetOption = isArray$1(option) ? option[option.length - 1] : option;
     let target = null;
     if (!isNil(targetOption == null ? void 0 : targetOption.value)) {
-      const options = optionsArray.value.filter((item) => item.value === targetOption.value);
+      const options = optionsArray.value.filter(
+        (item) => item.value === targetOption.value
+      );
       if (options.length > 0) {
         target = options[0].$el;
       }
     }
     if (tooltipRef.value && target) {
-      const menu = (_d = (_c = (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef) == null ? void 0 : _c.querySelector) == null ? void 0 : _d.call(_c, `.${nsSelect.be("dropdown", "wrap")}`);
+      const menu = (_d = (_c = (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef) == null ? void 0 : _c.querySelector) == null ? void 0 : _d.call(
+        _c,
+        `.${nsSelect.be("dropdown", "wrap")}`
+      );
       if (menu) {
         scrollIntoView(menu, target);
       }
@@ -921,7 +978,9 @@ const useSelect = (props, emit) => {
   const getValueKey = (item) => {
     return isObject(item.value) ? get(item.value, props.valueKey) : item.value;
   };
-  const optionsAllDisabled = computed(() => optionsArray.value.filter((option) => option.visible).every((option) => option.isDisabled));
+  const optionsAllDisabled = computed(
+    () => optionsArray.value.filter((option) => option.visible).every((option) => option.isDisabled)
+  );
   const showTagList = computed(() => {
     if (!props.multiple) {
       return [];
@@ -1058,15 +1117,18 @@ const useSelect = (props, emit) => {
   useResizeObserver(tagMenuRef, updateTagTooltip);
   useResizeObserver(collapseItemRef, resetCollapseItemWidth);
   let stop;
-  watch(() => dropdownMenuVisible.value, (newVal) => {
-    if (newVal) {
-      stop = useResizeObserver(menuRef, updateTooltip).stop;
-    } else {
-      stop == null ? void 0 : stop();
-      stop = void 0;
+  watch(
+    () => dropdownMenuVisible.value,
+    (newVal) => {
+      if (newVal) {
+        stop = useResizeObserver(menuRef, updateTooltip).stop;
+      } else {
+        stop == null ? void 0 : stop();
+        stop = void 0;
+      }
+      emit("visible-change", newVal);
     }
-    emit("visible-change", newVal);
-  });
+  );
   onMounted(() => {
     setSelected();
   });
@@ -1162,7 +1224,9 @@ var ElOptions = defineComponent({
           var _a2, _b2, _c, _d;
           const name = (_a2 = (item == null ? void 0 : item.type) || {}) == null ? void 0 : _a2.name;
           if (name === "ElOptionGroup") {
-            filterOptions(!isString(item.children) && !isArray$1(item.children) && isFunction((_b2 = item.children) == null ? void 0 : _b2.default) ? (_c = item.children) == null ? void 0 : _c.default() : item.children);
+            filterOptions(
+              !isString(item.children) && !isArray$1(item.children) && isFunction((_b2 = item.children) == null ? void 0 : _b2.default) ? (_c = item.children) == null ? void 0 : _c.default() : item.children
+            );
           } else if (name === "ElOption") {
             valueList.push((_d = item.props) == null ? void 0 : _d.value);
           } else if (isArray$1(item.children)) {
@@ -1331,10 +1395,15 @@ const _sfc_main$1 = defineComponent({
     const groupRef = ref();
     const instance = getCurrentInstance();
     const children = ref([]);
-    provide(selectGroupKey, reactive({
-      ...toRefs(props)
-    }));
-    const visible = computed(() => children.value.some((option) => option.visible === true));
+    provide(
+      selectGroupKey,
+      reactive({
+        ...toRefs(props)
+      })
+    );
+    const visible = computed(
+      () => children.value.some((option) => option.visible === true)
+    );
     const isOption = (node) => {
       var _a;
       return node.type.name === "ElOption" && !!((_a = node.component) == null ? void 0 : _a.proxy);
@@ -1375,25 +1444,58 @@ const _sfc_main$1 = defineComponent({
   }
 });
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return withDirectives((openBlock(), createElementBlock("ul", {
-    ref: "groupRef",
-    class: normalizeClass(_ctx.ns.be("group", "wrap"))
-  }, [
-    createElementVNode("li", {
-      class: normalizeClass(_ctx.ns.be("group", "title"))
-    }, toDisplayString(_ctx.label), 3),
-    createElementVNode("li", null, [
-      createElementVNode("ul", {
-        class: normalizeClass(_ctx.ns.b("group"))
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2)
-    ])
-  ], 2)), [
+  return withDirectives((openBlock(), createElementBlock(
+    "ul",
+    {
+      ref: "groupRef",
+      class: normalizeClass(_ctx.ns.be("group", "wrap"))
+    },
+    [
+      createElementVNode(
+        "li",
+        {
+          class: normalizeClass(_ctx.ns.be("group", "title"))
+        },
+        toDisplayString(_ctx.label),
+        3
+      ),
+      createElementVNode("li", null, [
+        createElementVNode(
+          "ul",
+          {
+            class: normalizeClass(_ctx.ns.b("group"))
+          },
+          [
+            renderSlot(_ctx.$slots, "default")
+          ],
+          2
+        )
+      ])
+    ],
+    2
+  )), [
     [vShow, _ctx.visible]
   ]);
 }
-var OptionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "option-group.vue"]]);
+var OptionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/select/src/option-group.vue"]]);
+
+function useCalcInputWidth() {
+  const calculatorRef = shallowRef();
+  const calculatorWidth = ref(0);
+  const inputStyle = computed(() => ({
+    minWidth: `${Math.max(calculatorWidth.value, MINIMUM_INPUT_WIDTH)}px`
+  }));
+  const resetCalculatorWidth = () => {
+    var _a, _b;
+    calculatorWidth.value = (_b = (_a = calculatorRef.value) == null ? void 0 : _a.getBoundingClientRect().width) != null ? _b : 0;
+  };
+  useResizeObserver(calculatorRef, resetCalculatorWidth);
+  return {
+    calculatorRef,
+    calculatorWidth,
+    inputStyle
+  };
+}
 
 const COMPONENT_NAME = "ElSelect";
 const warnHandlerMap = /* @__PURE__ */ new WeakMap();
@@ -1401,7 +1503,9 @@ const createSelectWarnHandler = (appContext) => {
   return (...args) => {
     var _a, _b;
     const message = args[0];
-    if (!message || message.includes('Slot "default" invoked outside of the render function') && ((_a = args[2]) == null ? void 0 : _a.includes("ElTreeSelect")))
+    if (!message || message.includes(
+      'Slot "default" invoked outside of the render function'
+    ) && ((_a = args[2]) == null ? void 0 : _a.includes("ElTreeSelect")))
       return;
     const original = (_b = warnHandlerMap.get(appContext)) == null ? void 0 : _b.originalWarnHandler;
     if (original) {
@@ -1503,29 +1607,36 @@ const _sfc_main = defineComponent({
         }
       });
     };
-    watch(() => {
-      var _a;
-      return [(_a = slots.default) == null ? void 0 : _a.call(slots), modelValue.value];
-    }, () => {
-      var _a;
-      if (props.persistent || API.expanded.value) {
-        return;
+    watch(
+      () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots), modelValue.value];
+      },
+      () => {
+        var _a;
+        if (props.persistent || API.expanded.value) {
+          return;
+        }
+        API.states.options.clear();
+        manuallyRenderSlots((_a = slots.default) == null ? void 0 : _a.call(slots));
+      },
+      {
+        immediate: true
       }
-      API.states.options.clear();
-      manuallyRenderSlots((_a = slots.default) == null ? void 0 : _a.call(slots));
-    }, {
-      immediate: true
-    });
-    provide(selectKey, reactive({
-      props: _props,
-      states: API.states,
-      selectRef: API.selectRef,
-      optionsArray: API.optionsArray,
-      setSelected: API.setSelected,
-      handleOptionSelect: API.handleOptionSelect,
-      onOptionCreate: API.onOptionCreate,
-      onOptionDestroy: API.onOptionDestroy
-    }));
+    );
+    provide(
+      selectKey,
+      reactive({
+        props: _props,
+        states: API.states,
+        selectRef: API.selectRef,
+        optionsArray: API.optionsArray,
+        setSelected: API.setSelected,
+        handleOptionSelect: API.handleOptionSelect,
+        onOptionCreate: API.onOptionCreate,
+        onOptionDestroy: API.onOptionDestroy
+      })
+    );
     const selectedLabel = computed(() => {
       if (!props.multiple) {
         return API.states.selectedLabel;
@@ -1556,7 +1667,10 @@ const _sfc_main = defineComponent({
     };
   }
 });
-function _sfc_render(_ctx, _cache) {
+const _hoisted_1 = ["id", "name", "disabled", "autocomplete", "tabindex", "readonly", "aria-activedescendant", "aria-controls", "aria-expanded", "aria-label"];
+const _hoisted_2 = ["textContent"];
+const _hoisted_3 = { key: 1 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_tag = resolveComponent("el-tag");
   const _component_el_tooltip = resolveComponent("el-tooltip");
   const _component_el_icon = resolveComponent("el-icon");
@@ -1566,371 +1680,534 @@ function _sfc_render(_ctx, _cache) {
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
   const _component_el_select_menu = resolveComponent("el-select-menu");
   const _directive_click_outside = resolveDirective("click-outside");
-  return withDirectives((openBlock(), createElementBlock("div", {
-    ref: "selectRef",
-    class: normalizeClass([_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]),
-    [toHandlerKey(_ctx.mouseEnterEventName)]: ($event) => _ctx.states.inputHovering = true,
-    onMouseleave: ($event) => _ctx.states.inputHovering = false
-  }, [
-    createVNode(_component_el_tooltip, {
-      ref: "tooltipRef",
-      visible: _ctx.dropdownMenuVisible,
-      placement: _ctx.placement,
-      teleported: _ctx.teleported,
-      "popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
-      "popper-style": _ctx.popperStyle,
-      "popper-options": _ctx.popperOptions,
-      "fallback-placements": _ctx.fallbackPlacements,
-      effect: _ctx.effect,
-      pure: "",
-      trigger: "click",
-      transition: `${_ctx.nsSelect.namespace.value}-zoom-in-top`,
-      "stop-popper-mouse-event": false,
-      "gpu-acceleration": false,
-      persistent: _ctx.persistent,
-      "append-to": _ctx.appendTo,
-      "show-arrow": _ctx.showArrow,
-      offset: _ctx.offset,
-      onBeforeShow: _ctx.handleMenuEnter,
-      onHide: ($event) => _ctx.states.isBeforeHide = false
+  return withDirectives((openBlock(), createElementBlock(
+    "div",
+    mergeProps({
+      ref: "selectRef",
+      class: [_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]
     }, {
-      default: withCtx(() => {
-        var _a;
-        return [
-          createElementVNode("div", {
-            ref: "wrapperRef",
-            class: normalizeClass([
-              _ctx.nsSelect.e("wrapper"),
-              _ctx.nsSelect.is("focused", _ctx.isFocused),
-              _ctx.nsSelect.is("hovering", _ctx.states.inputHovering),
-              _ctx.nsSelect.is("filterable", _ctx.filterable),
-              _ctx.nsSelect.is("disabled", _ctx.selectDisabled)
-            ]),
-            onClick: withModifiers(_ctx.toggleMenu, ["prevent"])
-          }, [
-            _ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              ref: "prefixRef",
-              class: normalizeClass(_ctx.nsSelect.e("prefix"))
-            }, [
-              renderSlot(_ctx.$slots, "prefix")
-            ], 2)) : createCommentVNode("v-if", true),
-            createElementVNode("div", {
-              ref: "selectionRef",
-              class: normalizeClass([
-                _ctx.nsSelect.e("selection"),
-                _ctx.nsSelect.is("near", _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.states.selected.length)
-              ])
-            }, [
-              _ctx.multiple ? renderSlot(_ctx.$slots, "tag", {
-                key: 0,
-                data: _ctx.states.selected,
-                deleteTag: _ctx.deleteTag,
-                selectDisabled: _ctx.selectDisabled
-              }, () => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.showTagList, (item) => {
-                  return openBlock(), createElementBlock("div", {
-                    key: _ctx.getValueKey(item),
-                    class: normalizeClass(_ctx.nsSelect.e("selected-item"))
-                  }, [
-                    createVNode(_component_el_tag, {
-                      closable: !_ctx.selectDisabled && !item.isDisabled,
-                      size: _ctx.collapseTagSize,
-                      type: _ctx.tagType,
-                      effect: _ctx.tagEffect,
-                      "disable-transitions": "",
-                      style: normalizeStyle(_ctx.tagStyle),
-                      onClose: ($event) => _ctx.deleteTag($event, item)
+      [toHandlerKey(_ctx.mouseEnterEventName)]: _cache[11] || (_cache[11] = ($event) => _ctx.states.inputHovering = true)
+    }, {
+      onMouseleave: _cache[12] || (_cache[12] = ($event) => _ctx.states.inputHovering = false)
+    }),
+    [
+      createVNode(_component_el_tooltip, {
+        ref: "tooltipRef",
+        visible: _ctx.dropdownMenuVisible,
+        placement: _ctx.placement,
+        teleported: _ctx.teleported,
+        "popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
+        "popper-style": _ctx.popperStyle,
+        "popper-options": _ctx.popperOptions,
+        "fallback-placements": _ctx.fallbackPlacements,
+        effect: _ctx.effect,
+        pure: "",
+        trigger: "click",
+        transition: `${_ctx.nsSelect.namespace.value}-zoom-in-top`,
+        "stop-popper-mouse-event": false,
+        "gpu-acceleration": false,
+        persistent: _ctx.persistent,
+        "append-to": _ctx.appendTo,
+        "show-arrow": _ctx.showArrow,
+        offset: _ctx.offset,
+        onBeforeShow: _ctx.handleMenuEnter,
+        onHide: _cache[10] || (_cache[10] = ($event) => _ctx.states.isBeforeHide = false)
+      }, {
+        default: withCtx(() => {
+          var _a;
+          return [
+            createElementVNode(
+              "div",
+              {
+                ref: "wrapperRef",
+                class: normalizeClass([
+                  _ctx.nsSelect.e("wrapper"),
+                  _ctx.nsSelect.is("focused", _ctx.isFocused),
+                  _ctx.nsSelect.is("hovering", _ctx.states.inputHovering),
+                  _ctx.nsSelect.is("filterable", _ctx.filterable),
+                  _ctx.nsSelect.is("disabled", _ctx.selectDisabled)
+                ]),
+                onClick: _cache[7] || (_cache[7] = withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["prevent"]))
+              },
+              [
+                _ctx.$slots.prefix ? (openBlock(), createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    ref: "prefixRef",
+                    class: normalizeClass(_ctx.nsSelect.e("prefix"))
+                  },
+                  [
+                    renderSlot(_ctx.$slots, "prefix")
+                  ],
+                  2
+                )) : createCommentVNode("v-if", true),
+                createElementVNode(
+                  "div",
+                  {
+                    ref: "selectionRef",
+                    class: normalizeClass([
+                      _ctx.nsSelect.e("selection"),
+                      _ctx.nsSelect.is(
+                        "near",
+                        _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.states.selected.length
+                      )
+                    ])
+                  },
+                  [
+                    _ctx.multiple ? renderSlot(_ctx.$slots, "tag", {
+                      key: 0,
+                      data: _ctx.states.selected,
+                      deleteTag: _ctx.deleteTag,
+                      selectDisabled: _ctx.selectDisabled
+                    }, () => [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(_ctx.showTagList, (item) => {
+                          return openBlock(), createElementBlock(
+                            "div",
+                            {
+                              key: _ctx.getValueKey(item),
+                              class: normalizeClass(_ctx.nsSelect.e("selected-item"))
+                            },
+                            [
+                              createVNode(_component_el_tag, {
+                                closable: !_ctx.selectDisabled && !item.isDisabled,
+                                size: _ctx.collapseTagSize,
+                                type: _ctx.tagType,
+                                effect: _ctx.tagEffect,
+                                "disable-transitions": "",
+                                style: normalizeStyle(_ctx.tagStyle),
+                                onClose: ($event) => _ctx.deleteTag($event, item)
+                              }, {
+                                default: withCtx(() => [
+                                  createElementVNode(
+                                    "span",
+                                    {
+                                      class: normalizeClass(_ctx.nsSelect.e("tags-text"))
+                                    },
+                                    [
+                                      renderSlot(_ctx.$slots, "label", {
+                                        index: item.index,
+                                        label: item.currentLabel,
+                                        value: item.value
+                                      }, () => [
+                                        createTextVNode(
+                                          toDisplayString(item.currentLabel),
+                                          1
+                                        )
+                                      ])
+                                    ],
+                                    2
+                                  )
+                                ]),
+                                _: 2
+                              }, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
+                            ],
+                            2
+                          );
+                        }),
+                        128
+                      )),
+                      _ctx.collapseTags && _ctx.states.selected.length > _ctx.maxCollapseTags ? (openBlock(), createBlock(_component_el_tooltip, {
+                        key: 0,
+                        ref: "tagTooltipRef",
+                        disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
+                        "fallback-placements": ["bottom", "top", "right", "left"],
+                        effect: _ctx.effect,
+                        placement: "bottom",
+                        "popper-class": _ctx.popperClass,
+                        "popper-style": _ctx.popperStyle,
+                        teleported: _ctx.teleported,
+                        "popper-options": _ctx.popperOptions
+                      }, {
+                        default: withCtx(() => [
+                          createElementVNode(
+                            "div",
+                            {
+                              ref: "collapseItemRef",
+                              class: normalizeClass(_ctx.nsSelect.e("selected-item"))
+                            },
+                            [
+                              createVNode(_component_el_tag, {
+                                closable: false,
+                                size: _ctx.collapseTagSize,
+                                type: _ctx.tagType,
+                                effect: _ctx.tagEffect,
+                                "disable-transitions": "",
+                                style: normalizeStyle(_ctx.collapseTagStyle)
+                              }, {
+                                default: withCtx(() => [
+                                  createElementVNode(
+                                    "span",
+                                    {
+                                      class: normalizeClass(_ctx.nsSelect.e("tags-text"))
+                                    },
+                                    " + " + toDisplayString(_ctx.states.selected.length - _ctx.maxCollapseTags),
+                                    3
+                                  )
+                                ]),
+                                _: 1
+                              }, 8, ["size", "type", "effect", "style"])
+                            ],
+                            2
+                          )
+                        ]),
+                        content: withCtx(() => [
+                          createElementVNode(
+                            "div",
+                            {
+                              ref: "tagMenuRef",
+                              class: normalizeClass(_ctx.nsSelect.e("selection"))
+                            },
+                            [
+                              (openBlock(true), createElementBlock(
+                                Fragment,
+                                null,
+                                renderList(_ctx.collapseTagList, (item) => {
+                                  return openBlock(), createElementBlock(
+                                    "div",
+                                    {
+                                      key: _ctx.getValueKey(item),
+                                      class: normalizeClass(_ctx.nsSelect.e("selected-item"))
+                                    },
+                                    [
+                                      createVNode(_component_el_tag, {
+                                        class: "in-tooltip",
+                                        closable: !_ctx.selectDisabled && !item.isDisabled,
+                                        size: _ctx.collapseTagSize,
+                                        type: _ctx.tagType,
+                                        effect: _ctx.tagEffect,
+                                        "disable-transitions": "",
+                                        onClose: ($event) => _ctx.deleteTag($event, item)
+                                      }, {
+                                        default: withCtx(() => [
+                                          createElementVNode(
+                                            "span",
+                                            {
+                                              class: normalizeClass(_ctx.nsSelect.e("tags-text"))
+                                            },
+                                            [
+                                              renderSlot(_ctx.$slots, "label", {
+                                                index: item.index,
+                                                label: item.currentLabel,
+                                                value: item.value
+                                              }, () => [
+                                                createTextVNode(
+                                                  toDisplayString(item.currentLabel),
+                                                  1
+                                                )
+                                              ])
+                                            ],
+                                            2
+                                          )
+                                        ]),
+                                        _: 2
+                                      }, 1032, ["closable", "size", "type", "effect", "onClose"])
+                                    ],
+                                    2
+                                  );
+                                }),
+                                128
+                              ))
+                            ],
+                            2
+                          )
+                        ]),
+                        _: 3
+                      }, 8, ["disabled", "effect", "popper-class", "popper-style", "teleported", "popper-options"])) : createCommentVNode("v-if", true)
+                    ]) : createCommentVNode("v-if", true),
+                    createElementVNode(
+                      "div",
+                      {
+                        class: normalizeClass([
+                          _ctx.nsSelect.e("selected-item"),
+                          _ctx.nsSelect.e("input-wrapper"),
+                          _ctx.nsSelect.is("hidden", !_ctx.filterable || _ctx.selectDisabled)
+                        ])
+                      },
+                      [
+                        withDirectives(createElementVNode("input", {
+                          id: _ctx.inputId,
+                          ref: "inputRef",
+                          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.states.inputValue = $event),
+                          type: "text",
+                          name: _ctx.name,
+                          class: normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
+                          disabled: _ctx.selectDisabled,
+                          autocomplete: _ctx.autocomplete,
+                          style: normalizeStyle(_ctx.inputStyle),
+                          tabindex: _ctx.tabindex,
+                          role: "combobox",
+                          readonly: !_ctx.filterable,
+                          spellcheck: "false",
+                          "aria-activedescendant": ((_a = _ctx.hoverOption) == null ? void 0 : _a.id) || "",
+                          "aria-controls": _ctx.contentId,
+                          "aria-expanded": _ctx.dropdownMenuVisible,
+                          "aria-label": _ctx.ariaLabel,
+                          "aria-autocomplete": "none",
+                          "aria-haspopup": "listbox",
+                          onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
+                          onCompositionstart: _cache[2] || (_cache[2] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
+                          onCompositionupdate: _cache[3] || (_cache[3] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
+                          onCompositionend: _cache[4] || (_cache[4] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
+                          onInput: _cache[5] || (_cache[5] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
+                          onClick: _cache[6] || (_cache[6] = withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
+                        }, null, 46, _hoisted_1), [
+                          [vModelText, _ctx.states.inputValue]
+                        ]),
+                        _ctx.filterable ? (openBlock(), createElementBlock("span", {
+                          key: 0,
+                          ref: "calculatorRef",
+                          "aria-hidden": "true",
+                          class: normalizeClass(_ctx.nsSelect.e("input-calculator")),
+                          textContent: toDisplayString(_ctx.states.inputValue)
+                        }, null, 10, _hoisted_2)) : createCommentVNode("v-if", true)
+                      ],
+                      2
+                    ),
+                    _ctx.shouldShowPlaceholder ? (openBlock(), createElementBlock(
+                      "div",
+                      {
+                        key: 1,
+                        class: normalizeClass([
+                          _ctx.nsSelect.e("selected-item"),
+                          _ctx.nsSelect.e("placeholder"),
+                          _ctx.nsSelect.is(
+                            "transparent",
+                            !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue
+                          )
+                        ])
+                      },
+                      [
+                        _ctx.hasModelValue ? renderSlot(_ctx.$slots, "label", {
+                          key: 0,
+                          index: _ctx.getOption(_ctx.modelValue).index,
+                          label: _ctx.currentPlaceholder,
+                          value: _ctx.modelValue
+                        }, () => [
+                          createElementVNode(
+                            "span",
+                            null,
+                            toDisplayString(_ctx.currentPlaceholder),
+                            1
+                          )
+                        ]) : (openBlock(), createElementBlock(
+                          "span",
+                          _hoisted_3,
+                          toDisplayString(_ctx.currentPlaceholder),
+                          1
+                        ))
+                      ],
+                      2
+                    )) : createCommentVNode("v-if", true)
+                  ],
+                  2
+                ),
+                createElementVNode(
+                  "div",
+                  {
+                    ref: "suffixRef",
+                    class: normalizeClass(_ctx.nsSelect.e("suffix"))
+                  },
+                  [
+                    _ctx.iconComponent && !_ctx.showClearBtn ? (openBlock(), createBlock(_component_el_icon, {
+                      key: 0,
+                      class: normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon"), _ctx.iconReverse])
+                    }, {
+                      default: withCtx(() => [
+                        (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
+                      ]),
+                      _: 1
+                    }, 8, ["class"])) : createCommentVNode("v-if", true),
+                    _ctx.showClearBtn && _ctx.clearIcon ? (openBlock(), createBlock(_component_el_icon, {
+                      key: 1,
+                      class: normalizeClass([
+                        _ctx.nsSelect.e("caret"),
+                        _ctx.nsSelect.e("icon"),
+                        _ctx.nsSelect.e("clear")
+                      ]),
+                      onClick: _ctx.handleClearClick
                     }, {
                       default: withCtx(() => [
-                        createElementVNode("span", {
-                          class: normalizeClass(_ctx.nsSelect.e("tags-text"))
-                        }, [
-                          renderSlot(_ctx.$slots, "label", {
-                            index: item.index,
-                            label: item.currentLabel,
-                            value: item.value
-                          }, () => [
-                            createTextVNode(toDisplayString(item.currentLabel), 1)
-                          ])
-                        ], 2)
+                        (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
                       ]),
-                      _: 2
-                    }, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
-                  ], 2);
-                }), 128)),
-                _ctx.collapseTags && _ctx.states.selected.length > _ctx.maxCollapseTags ? (openBlock(), createBlock(_component_el_tooltip, {
-                  key: 0,
-                  ref: "tagTooltipRef",
-                  disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
-                  "fallback-placements": ["bottom", "top", "right", "left"],
-                  effect: _ctx.effect,
-                  placement: "bottom",
-                  "popper-class": _ctx.popperClass,
-                  "popper-style": _ctx.popperStyle,
-                  teleported: _ctx.teleported
+                      _: 1
+                    }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
+                    _ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (openBlock(), createBlock(_component_el_icon, {
+                      key: 2,
+                      class: normalizeClass([
+                        _ctx.nsInput.e("icon"),
+                        _ctx.nsInput.e("validateIcon"),
+                        _ctx.nsInput.is("loading", _ctx.validateState === "validating")
+                      ])
+                    }, {
+                      default: withCtx(() => [
+                        (openBlock(), createBlock(resolveDynamicComponent(_ctx.validateIcon)))
+                      ]),
+                      _: 1
+                    }, 8, ["class"])) : createCommentVNode("v-if", true)
+                  ],
+                  2
+                )
+              ],
+              2
+            )
+          ];
+        }),
+        content: withCtx(() => [
+          createVNode(
+            _component_el_select_menu,
+            { ref: "menuRef" },
+            {
+              default: withCtx(() => [
+                _ctx.$slots.header ? (openBlock(), createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    class: normalizeClass(_ctx.nsSelect.be("dropdown", "header")),
+                    onClick: _cache[8] || (_cache[8] = withModifiers(() => {
+                    }, ["stop"]))
+                  },
+                  [
+                    renderSlot(_ctx.$slots, "header")
+                  ],
+                  2
+                )) : createCommentVNode("v-if", true),
+                withDirectives(createVNode(_component_el_scrollbar, {
+                  id: _ctx.contentId,
+                  ref: "scrollbarRef",
+                  tag: "ul",
+                  "wrap-class": _ctx.nsSelect.be("dropdown", "wrap"),
+                  "view-class": _ctx.nsSelect.be("dropdown", "list"),
+                  class: normalizeClass([_ctx.nsSelect.is("empty", _ctx.filteredOptionsCount === 0)]),
+                  role: "listbox",
+                  "aria-label": _ctx.ariaLabel,
+                  "aria-orientation": "vertical",
+                  onScroll: _ctx.popupScroll
                 }, {
                   default: withCtx(() => [
-                    createElementVNode("div", {
-                      ref: "collapseItemRef",
-                      class: normalizeClass(_ctx.nsSelect.e("selected-item"))
-                    }, [
-                      createVNode(_component_el_tag, {
-                        closable: false,
-                        size: _ctx.collapseTagSize,
-                        type: _ctx.tagType,
-                        effect: _ctx.tagEffect,
-                        "disable-transitions": "",
-                        style: normalizeStyle(_ctx.collapseTagStyle)
-                      }, {
-                        default: withCtx(() => [
-                          createElementVNode("span", {
-                            class: normalizeClass(_ctx.nsSelect.e("tags-text"))
-                          }, " + " + toDisplayString(_ctx.states.selected.length - _ctx.maxCollapseTags), 3)
-                        ]),
-                        _: 1
-                      }, 8, ["size", "type", "effect", "style"])
-                    ], 2)
-                  ]),
-                  content: withCtx(() => [
-                    createElementVNode("div", {
-                      ref: "tagMenuRef",
-                      class: normalizeClass(_ctx.nsSelect.e("selection"))
-                    }, [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.collapseTagList, (item) => {
-                        return openBlock(), createElementBlock("div", {
-                          key: _ctx.getValueKey(item),
-                          class: normalizeClass(_ctx.nsSelect.e("selected-item"))
-                        }, [
-                          createVNode(_component_el_tag, {
-                            class: "in-tooltip",
-                            closable: !_ctx.selectDisabled && !item.isDisabled,
-                            size: _ctx.collapseTagSize,
-                            type: _ctx.tagType,
-                            effect: _ctx.tagEffect,
-                            "disable-transitions": "",
-                            onClose: ($event) => _ctx.deleteTag($event, item)
-                          }, {
-                            default: withCtx(() => [
-                              createElementVNode("span", {
-                                class: normalizeClass(_ctx.nsSelect.e("tags-text"))
-                              }, [
-                                renderSlot(_ctx.$slots, "label", {
-                                  index: item.index,
-                                  label: item.currentLabel,
-                                  value: item.value
-                                }, () => [
-                                  createTextVNode(toDisplayString(item.currentLabel), 1)
-                                ])
-                              ], 2)
-                            ]),
-                            _: 2
-                          }, 1032, ["closable", "size", "type", "effect", "onClose"])
-                        ], 2);
-                      }), 128))
-                    ], 2)
+                    _ctx.showNewOption ? (openBlock(), createBlock(_component_el_option, {
+                      key: 0,
+                      value: _ctx.states.inputValue,
+                      created: true
+                    }, null, 8, ["value"])) : createCommentVNode("v-if", true),
+                    createVNode(_component_el_options, null, {
+                      default: withCtx(() => [
+                        renderSlot(_ctx.$slots, "default", {}, () => [
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(_ctx.options, (option, index) => {
+                              var _a;
+                              return openBlock(), createElementBlock(
+                                Fragment,
+                                { key: index },
+                                [
+                                  ((_a = _ctx.getOptions(option)) == null ? void 0 : _a.length) ? (openBlock(), createBlock(_component_el_option_group, {
+                                    key: 0,
+                                    label: _ctx.getLabel(option),
+                                    disabled: _ctx.getDisabled(option)
+                                  }, {
+                                    default: withCtx(() => [
+                                      (openBlock(true), createElementBlock(
+                                        Fragment,
+                                        null,
+                                        renderList(_ctx.getOptions(option), (item) => {
+                                          return openBlock(), createBlock(
+                                            _component_el_option,
+                                            mergeProps({
+                                              key: _ctx.getValue(item)
+                                            }, { ref_for: true }, _ctx.getOptionProps(item)),
+                                            null,
+                                            16
+                                          );
+                                        }),
+                                        128
+                                      ))
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["label", "disabled"])) : (openBlock(), createBlock(
+                                    _component_el_option,
+                                    mergeProps({
+                                      key: 1,
+                                      ref_for: true
+                                    }, _ctx.getOptionProps(option)),
+                                    null,
+                                    16
+                                  ))
+                                ],
+                                64
+                              );
+                            }),
+                            128
+                          ))
+                        ])
+                      ]),
+                      _: 3
+                    })
                   ]),
                   _: 3
-                }, 8, ["disabled", "effect", "popper-class", "popper-style", "teleported"])) : createCommentVNode("v-if", true)
-              ]) : createCommentVNode("v-if", true),
-              createElementVNode("div", {
-                class: normalizeClass([
-                  _ctx.nsSelect.e("selected-item"),
-                  _ctx.nsSelect.e("input-wrapper"),
-                  _ctx.nsSelect.is("hidden", !_ctx.filterable || _ctx.selectDisabled)
-                ])
-              }, [
-                withDirectives(createElementVNode("input", {
-                  id: _ctx.inputId,
-                  ref: "inputRef",
-                  "onUpdate:modelValue": ($event) => _ctx.states.inputValue = $event,
-                  type: "text",
-                  name: _ctx.name,
-                  class: normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
-                  disabled: _ctx.selectDisabled,
-                  autocomplete: _ctx.autocomplete,
-                  style: normalizeStyle(_ctx.inputStyle),
-                  tabindex: _ctx.tabindex,
-                  role: "combobox",
-                  readonly: !_ctx.filterable,
-                  spellcheck: "false",
-                  "aria-activedescendant": ((_a = _ctx.hoverOption) == null ? void 0 : _a.id) || "",
-                  "aria-controls": _ctx.contentId,
-                  "aria-expanded": _ctx.dropdownMenuVisible,
-                  "aria-label": _ctx.ariaLabel,
-                  "aria-autocomplete": "none",
-                  "aria-haspopup": "listbox",
-                  onKeydown: _ctx.handleKeydown,
-                  onCompositionstart: _ctx.handleCompositionStart,
-                  onCompositionupdate: _ctx.handleCompositionUpdate,
-                  onCompositionend: _ctx.handleCompositionEnd,
-                  onInput: _ctx.onInput,
-                  onClick: withModifiers(_ctx.toggleMenu, ["stop"])
-                }, null, 46, ["id", "onUpdate:modelValue", "name", "disabled", "autocomplete", "tabindex", "readonly", "aria-activedescendant", "aria-controls", "aria-expanded", "aria-label", "onKeydown", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onInput", "onClick"]), [
-                  [vModelText, _ctx.states.inputValue]
-                ]),
-                _ctx.filterable ? (openBlock(), createElementBlock("span", {
-                  key: 0,
-                  ref: "calculatorRef",
-                  "aria-hidden": "true",
-                  class: normalizeClass(_ctx.nsSelect.e("input-calculator")),
-                  textContent: toDisplayString(_ctx.states.inputValue)
-                }, null, 10, ["textContent"])) : createCommentVNode("v-if", true)
-              ], 2),
-              _ctx.shouldShowPlaceholder ? (openBlock(), createElementBlock("div", {
-                key: 1,
-                class: normalizeClass([
-                  _ctx.nsSelect.e("selected-item"),
-                  _ctx.nsSelect.e("placeholder"),
-                  _ctx.nsSelect.is("transparent", !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue)
-                ])
-              }, [
-                _ctx.hasModelValue ? renderSlot(_ctx.$slots, "label", {
-                  key: 0,
-                  index: _ctx.getOption(_ctx.modelValue).index,
-                  label: _ctx.currentPlaceholder,
-                  value: _ctx.modelValue
-                }, () => [
-                  createElementVNode("span", null, toDisplayString(_ctx.currentPlaceholder), 1)
-                ]) : (openBlock(), createElementBlock("span", { key: 1 }, toDisplayString(_ctx.currentPlaceholder), 1))
-              ], 2)) : createCommentVNode("v-if", true)
-            ], 2),
-            createElementVNode("div", {
-              ref: "suffixRef",
-              class: normalizeClass(_ctx.nsSelect.e("suffix"))
-            }, [
-              _ctx.iconComponent && !_ctx.showClearBtn ? (openBlock(), createBlock(_component_el_icon, {
-                key: 0,
-                class: normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon"), _ctx.iconReverse])
-              }, {
-                default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
-                ]),
-                _: 1
-              }, 8, ["class"])) : createCommentVNode("v-if", true),
-              _ctx.showClearBtn && _ctx.clearIcon ? (openBlock(), createBlock(_component_el_icon, {
-                key: 1,
-                class: normalizeClass([
-                  _ctx.nsSelect.e("caret"),
-                  _ctx.nsSelect.e("icon"),
-                  _ctx.nsSelect.e("clear")
-                ]),
-                onClick: _ctx.handleClearClick
-              }, {
-                default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
-                ]),
-                _: 1
-              }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
-              _ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (openBlock(), createBlock(_component_el_icon, {
-                key: 2,
-                class: normalizeClass([
-                  _ctx.nsInput.e("icon"),
-                  _ctx.nsInput.e("validateIcon"),
-                  _ctx.nsInput.is("loading", _ctx.validateState === "validating")
-                ])
-              }, {
-                default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.validateIcon)))
+                }, 8, ["id", "wrap-class", "view-class", "class", "aria-label", "onScroll"]), [
+                  [vShow, _ctx.states.options.size > 0 && !_ctx.loading]
                 ]),
-                _: 1
-              }, 8, ["class"])) : createCommentVNode("v-if", true)
-            ], 2)
-          ], 10, ["onClick"])
-        ];
-      }),
-      content: withCtx(() => [
-        createVNode(_component_el_select_menu, { ref: "menuRef" }, {
-          default: withCtx(() => [
-            _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(_ctx.nsSelect.be("dropdown", "header")),
-              onClick: withModifiers(() => {
-              }, ["stop"])
-            }, [
-              renderSlot(_ctx.$slots, "header")
-            ], 10, ["onClick"])) : createCommentVNode("v-if", true),
-            withDirectives(createVNode(_component_el_scrollbar, {
-              id: _ctx.contentId,
-              ref: "scrollbarRef",
-              tag: "ul",
-              "wrap-class": _ctx.nsSelect.be("dropdown", "wrap"),
-              "view-class": _ctx.nsSelect.be("dropdown", "list"),
-              class: normalizeClass([_ctx.nsSelect.is("empty", _ctx.filteredOptionsCount === 0)]),
-              role: "listbox",
-              "aria-label": _ctx.ariaLabel,
-              "aria-orientation": "vertical",
-              onScroll: _ctx.popupScroll
-            }, {
-              default: withCtx(() => [
-                _ctx.showNewOption ? (openBlock(), createBlock(_component_el_option, {
-                  key: 0,
-                  value: _ctx.states.inputValue,
-                  created: true
-                }, null, 8, ["value"])) : createCommentVNode("v-if", true),
-                createVNode(_component_el_options, null, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "default", {}, () => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
-                        var _a;
-                        return openBlock(), createElementBlock(Fragment, { key: index }, [
-                          ((_a = _ctx.getOptions(option)) == null ? void 0 : _a.length) ? (openBlock(), createBlock(_component_el_option_group, {
-                            key: 0,
-                            label: _ctx.getLabel(option),
-                            disabled: _ctx.getDisabled(option)
-                          }, {
-                            default: withCtx(() => [
-                              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.getOptions(option), (item) => {
-                                return openBlock(), createBlock(_component_el_option, mergeProps({
-                                  key: _ctx.getValue(item)
-                                }, _ctx.getOptionProps(item)), null, 16);
-                              }), 128))
-                            ]),
-                            _: 2
-                          }, 1032, ["label", "disabled"])) : (openBlock(), createBlock(_component_el_option, normalizeProps(mergeProps({ key: 1 }, _ctx.getOptionProps(option))), null, 16))
-                        ], 64);
-                      }), 128))
+                _ctx.$slots.loading && _ctx.loading ? (openBlock(), createElementBlock(
+                  "div",
+                  {
+                    key: 1,
+                    class: normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
+                  },
+                  [
+                    renderSlot(_ctx.$slots, "loading")
+                  ],
+                  2
+                )) : _ctx.loading || _ctx.filteredOptionsCount === 0 ? (openBlock(), createElementBlock(
+                  "div",
+                  {
+                    key: 2,
+                    class: normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
+                  },
+                  [
+                    renderSlot(_ctx.$slots, "empty", {}, () => [
+                      createElementVNode(
+                        "span",
+                        null,
+                        toDisplayString(_ctx.emptyText),
+                        1
+                      )
                     ])
-                  ]),
-                  _: 3
-                })
+                  ],
+                  2
+                )) : createCommentVNode("v-if", true),
+                _ctx.$slots.footer ? (openBlock(), createElementBlock(
+                  "div",
+                  {
+                    key: 3,
+                    class: normalizeClass(_ctx.nsSelect.be("dropdown", "footer")),
+                    onClick: _cache[9] || (_cache[9] = withModifiers(() => {
+                    }, ["stop"]))
+                  },
+                  [
+                    renderSlot(_ctx.$slots, "footer")
+                  ],
+                  2
+                )) : createCommentVNode("v-if", true)
               ]),
               _: 3
-            }, 8, ["id", "wrap-class", "view-class", "class", "aria-label", "onScroll"]), [
-              [vShow, _ctx.states.options.size > 0 && !_ctx.loading]
-            ]),
-            _ctx.$slots.loading && _ctx.loading ? (openBlock(), createElementBlock("div", {
-              key: 1,
-              class: normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
-            }, [
-              renderSlot(_ctx.$slots, "loading")
-            ], 2)) : _ctx.loading || _ctx.filteredOptionsCount === 0 ? (openBlock(), createElementBlock("div", {
-              key: 2,
-              class: normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
-            }, [
-              renderSlot(_ctx.$slots, "empty", {}, () => [
-                createElementVNode("span", null, toDisplayString(_ctx.emptyText), 1)
-              ])
-            ], 2)) : createCommentVNode("v-if", true),
-            _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
-              key: 3,
-              class: normalizeClass(_ctx.nsSelect.be("dropdown", "footer")),
-              onClick: withModifiers(() => {
-              }, ["stop"])
-            }, [
-              renderSlot(_ctx.$slots, "footer")
-            ], 10, ["onClick"])) : createCommentVNode("v-if", true)
-          ]),
-          _: 3
-        }, 512)
-      ]),
-      _: 3
-    }, 8, ["visible", "placement", "teleported", "popper-class", "popper-style", "popper-options", "fallback-placements", "effect", "transition", "persistent", "append-to", "show-arrow", "offset", "onBeforeShow", "onHide"])
-  ], 16, ["onMouseleave"])), [
+            },
+            512
+          )
+        ]),
+        _: 3
+      }, 8, ["visible", "placement", "teleported", "popper-class", "popper-style", "popper-options", "fallback-placements", "effect", "transition", "persistent", "append-to", "show-arrow", "offset", "onBeforeShow"])
+    ],
+    16
+  )), [
     [_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
   ]);
 }
-var Select = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "select.vue"]]);
+var Select = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/select/src/select.vue"]]);
 
 const ElSelect = withInstall(Select, {
   Option,