element-plus 2.5.1 → 2.5.3

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v2.5.1 */
+/*! Element Plus v2.5.3 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -8695,8 +8695,6 @@
   const rAF = (fn) => isClient ? window.requestAnimationFrame(fn) : setTimeout(fn, 16);
   const cAF = (handle) => isClient ? window.cancelAnimationFrame(handle) : clearTimeout(handle);
 
-  const generateId = () => Math.floor(Math.random() * 1e4);
-
   const mutable = (val) => val;
 
   const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
@@ -11565,7 +11563,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "2.5.1";
+  const version$1 = "2.5.3";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -11615,11 +11613,11 @@
   };
 
   const COMPONENT_NAME$n = "ElAffix";
-  const __default__$1H = vue.defineComponent({
+  const __default__$1I = vue.defineComponent({
     name: COMPONENT_NAME$n
   });
   const _sfc_main$2n = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1H,
+    ...__default__$1I,
     props: affixProps,
     emits: affixEmits,
     setup(__props, { expose, emit }) {
@@ -11735,12 +11733,12 @@
     }
   });
 
-  const __default__$1G = vue.defineComponent({
+  const __default__$1H = vue.defineComponent({
     name: "ElIcon",
     inheritAttrs: false
   });
   const _sfc_main$2m = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1G,
+    ...__default__$1H,
     props: iconProps,
     setup(__props) {
       const props = __props;
@@ -11803,11 +11801,11 @@
     close: (evt) => evt instanceof MouseEvent
   };
 
-  const __default__$1F = vue.defineComponent({
+  const __default__$1G = vue.defineComponent({
     name: "ElAlert"
   });
   const _sfc_main$2l = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1F,
+    ...__default__$1G,
     props: alertProps,
     emits: alertEmits,
     setup(__props, { emit }) {
@@ -12057,11 +12055,11 @@
   };
 
   const COMPONENT_NAME$m = "ElForm";
-  const __default__$1E = vue.defineComponent({
+  const __default__$1F = vue.defineComponent({
     name: COMPONENT_NAME$m
   });
   const _sfc_main$2k = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1E,
+    ...__default__$1F,
     props: formProps,
     emits: formEmits,
     setup(__props, { expose, emit }) {
@@ -13373,11 +13371,11 @@
   });
 
   const _hoisted_1$15 = ["role", "aria-labelledby"];
-  const __default__$1D = vue.defineComponent({
+  const __default__$1E = vue.defineComponent({
     name: "ElFormItem"
   });
   const _sfc_main$2j = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1D,
+    ...__default__$1E,
     props: formItemProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -13867,13 +13865,13 @@
 
   const _hoisted_1$14 = ["role"];
   const _hoisted_2$I = ["id", "minlength", "maxlength", "type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus"];
-  const _hoisted_3$i = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus"];
-  const __default__$1C = vue.defineComponent({
+  const _hoisted_3$i = ["id", "minlength", "maxlength", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus"];
+  const __default__$1D = vue.defineComponent({
     name: "ElInput",
     inheritAttrs: false
   });
   const _sfc_main$2i = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1C,
+    ...__default__$1D,
     props: inputProps,
     emits: inputEmits,
     setup(__props, { expose, emit }) {
@@ -14265,6 +14263,8 @@
               ref: textarea,
               class: vue.unref(nsTextarea).e("inner")
             }, vue.unref(attrs), {
+              minlength: _ctx.minlength,
+              maxlength: _ctx.maxlength,
               tabindex: _ctx.tabindex,
               disabled: vue.unref(inputDisabled),
               readonly: _ctx.readonly,
@@ -14577,11 +14577,11 @@
   };
 
   const COMPONENT_NAME$j = "ElScrollbar";
-  const __default__$1B = vue.defineComponent({
+  const __default__$1C = vue.defineComponent({
     name: COMPONENT_NAME$j
   });
   const _sfc_main$2f = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1B,
+    ...__default__$1C,
     props: scrollbarProps,
     emits: scrollbarEmits,
     setup(__props, { expose, emit }) {
@@ -14769,12 +14769,12 @@
   });
   const usePopperProps = popperProps;
 
-  const __default__$1A = vue.defineComponent({
+  const __default__$1B = vue.defineComponent({
     name: "ElPopper",
     inheritAttrs: false
   });
   const _sfc_main$2e = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1A,
+    ...__default__$1B,
     props: popperProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -14807,12 +14807,12 @@
   });
   const usePopperArrowProps = popperArrowProps;
 
-  const __default__$1z = vue.defineComponent({
+  const __default__$1A = vue.defineComponent({
     name: "ElPopperArrow",
     inheritAttrs: false
   });
   const _sfc_main$2d = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1z,
+    ...__default__$1A,
     props: popperArrowProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -14926,12 +14926,12 @@
   });
   const usePopperTriggerProps = popperTriggerProps;
 
-  const __default__$1y = vue.defineComponent({
+  const __default__$1z = vue.defineComponent({
     name: "ElPopperTrigger",
     inheritAttrs: false
   });
   const _sfc_main$2c = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1y,
+    ...__default__$1z,
     props: popperTriggerProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -15415,10 +15415,10 @@
       };
     }
   });
-  function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.renderSlot(_ctx.$slots, "default", { handleKeydown: _ctx.onKeydown });
   }
-  var ElFocusTrap = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$v], ["__file", "focus-trap.vue"]]);
+  var ElFocusTrap = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["render", _sfc_render$u], ["__file", "focus-trap.vue"]]);
 
   const POSITIONING_STRATEGIES = ["fixed", "absolute"];
   const popperCoreConfigProps = buildProps({
@@ -15712,11 +15712,11 @@
     };
   };
 
-  const __default__$1x = vue.defineComponent({
+  const __default__$1y = vue.defineComponent({
     name: "ElPopperContent"
   });
   const _sfc_main$2a = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1x,
+    ...__default__$1y,
     props: popperContentProps,
     emits: popperContentEmits,
     setup(__props, { expose, emit }) {
@@ -15917,11 +15917,11 @@
     };
   };
 
-  const __default__$1w = vue.defineComponent({
+  const __default__$1x = vue.defineComponent({
     name: "ElTooltipTrigger"
   });
   const _sfc_main$29 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1w,
+    ...__default__$1x,
     props: useTooltipTriggerProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -15982,12 +15982,12 @@
   });
   var ElTooltipTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["__file", "trigger.vue"]]);
 
-  const __default__$1v = vue.defineComponent({
+  const __default__$1w = vue.defineComponent({
     name: "ElTooltipContent",
     inheritAttrs: false
   });
   const _sfc_main$28 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1v,
+    ...__default__$1w,
     props: useTooltipContentProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -16149,11 +16149,11 @@
 
   const _hoisted_1$13 = ["innerHTML"];
   const _hoisted_2$H = { key: 1 };
-  const __default__$1u = vue.defineComponent({
+  const __default__$1v = vue.defineComponent({
     name: "ElTooltip"
   });
   const _sfc_main$27 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1u,
+    ...__default__$1v,
     props: useTooltipProps,
     emits: tooltipEmits,
     setup(__props, { expose, emit }) {
@@ -16390,12 +16390,12 @@
   const _hoisted_2$G = { key: 0 };
   const _hoisted_3$h = ["id", "aria-selected", "onClick"];
   const COMPONENT_NAME$i = "ElAutocomplete";
-  const __default__$1t = vue.defineComponent({
+  const __default__$1u = vue.defineComponent({
     name: COMPONENT_NAME$i,
     inheritAttrs: false
   });
   const _sfc_main$26 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1t,
+    ...__default__$1u,
     props: autocompleteProps,
     emits: autocompleteEmits,
     setup(__props, { expose, emit }) {
@@ -16416,7 +16416,7 @@
       const activated = vue.ref(false);
       const suggestionDisabled = vue.ref(false);
       const loading = vue.ref(false);
-      const listboxId = vue.computed(() => ns.b(String(generateId())));
+      const listboxId = useId();
       const styles = vue.computed(() => rawAttrs.style);
       const suggestionVisible = vue.computed(() => {
         const isValidData = suggestions.value.length > 0;
@@ -16763,11 +16763,11 @@
   };
 
   const _hoisted_1$11 = ["src", "alt", "srcset"];
-  const __default__$1s = vue.defineComponent({
+  const __default__$1t = vue.defineComponent({
     name: "ElAvatar"
   });
   const _sfc_main$25 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1s,
+    ...__default__$1t,
     props: avatarProps,
     emits: avatarEmits,
     setup(__props, { emit }) {
@@ -16882,11 +16882,11 @@
   };
 
   const COMPONENT_NAME$h = "ElBacktop";
-  const __default__$1r = vue.defineComponent({
+  const __default__$1s = vue.defineComponent({
     name: COMPONENT_NAME$h
   });
   const _sfc_main$24 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1r,
+    ...__default__$1s,
     props: backtopProps,
     emits: backtopEmits,
     setup(__props, { emit }) {
@@ -16948,11 +16948,11 @@
   });
 
   const _hoisted_1$10 = ["textContent"];
-  const __default__$1q = vue.defineComponent({
+  const __default__$1r = vue.defineComponent({
     name: "ElBadge"
   });
   const _sfc_main$23 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1q,
+    ...__default__$1r,
     props: badgeProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -17012,11 +17012,11 @@
     }
   });
 
-  const __default__$1p = vue.defineComponent({
+  const __default__$1q = vue.defineComponent({
     name: "ElBreadcrumb"
   });
   const _sfc_main$22 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1p,
+    ...__default__$1q,
     props: breadcrumbProps,
     setup(__props) {
       const props = __props;
@@ -17055,11 +17055,11 @@
     }
   });
 
-  const __default__$1o = vue.defineComponent({
+  const __default__$1p = vue.defineComponent({
     name: "ElBreadcrumbItem"
   });
   const _sfc_main$21 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1o,
+    ...__default__$1p,
     props: breadcrumbItemProps,
     setup(__props) {
       const props = __props;
@@ -18154,11 +18154,11 @@
     });
   }
 
-  const __default__$1n = vue.defineComponent({
+  const __default__$1o = vue.defineComponent({
     name: "ElButton"
   });
   const _sfc_main$20 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1n,
+    ...__default__$1o,
     props: buttonProps,
     emits: buttonEmits,
     setup(__props, { expose, emit }) {
@@ -18230,11 +18230,11 @@
     type: buttonProps.type
   };
 
-  const __default__$1m = vue.defineComponent({
+  const __default__$1n = vue.defineComponent({
     name: "ElButtonGroup"
   });
   const _sfc_main$1$ = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1m,
+    ...__default__$1n,
     props: buttonGroupProps,
     setup(__props) {
       const props = __props;
@@ -18796,11 +18796,11 @@
 
   const _hoisted_1$$ = ["id", "name", "placeholder", "value", "disabled", "readonly"];
   const _hoisted_2$F = ["id", "name", "placeholder", "value", "disabled", "readonly"];
-  const __default__$1l = vue.defineComponent({
+  const __default__$1m = vue.defineComponent({
     name: "Picker"
   });
   const _sfc_main$1_ = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1l,
+    ...__default__$1m,
     props: timePickerDefaultProps,
     emits: [
       "update:modelValue",
@@ -20709,11 +20709,11 @@
 
   const _hoisted_1$Y = { key: 0 };
   const _hoisted_2$D = ["onClick"];
-  const __default__$1k = vue.defineComponent({
+  const __default__$1l = vue.defineComponent({
     name: "DateTable"
   });
   const _sfc_main$1W = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1k,
+    ...__default__$1l,
     props: dateTableProps,
     emits: dateTableEmits,
     setup(__props, { expose, emit }) {
@@ -20927,11 +20927,11 @@
   };
 
   const COMPONENT_NAME$g = "ElCalendar";
-  const __default__$1j = vue.defineComponent({
+  const __default__$1k = vue.defineComponent({
     name: COMPONENT_NAME$g
   });
   const _sfc_main$1V = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1j,
+    ...__default__$1k,
     props: calendarProps,
     emits: calendarEmits,
     setup(__props, { expose, emit }) {
@@ -21073,11 +21073,11 @@
     }
   });
 
-  const __default__$1i = vue.defineComponent({
+  const __default__$1j = vue.defineComponent({
     name: "ElCard"
   });
   const _sfc_main$1U = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1i,
+    ...__default__$1j,
     props: cardProps,
     setup(__props) {
       const ns = useNamespace("card");
@@ -21426,11 +21426,11 @@
   const _hoisted_1$X = ["onMouseenter", "onClick"];
   const _hoisted_2$C = { key: 0 };
   const COMPONENT_NAME$f = "ElCarousel";
-  const __default__$1h = vue.defineComponent({
+  const __default__$1i = vue.defineComponent({
     name: COMPONENT_NAME$f
   });
   const _sfc_main$1T = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1h,
+    ...__default__$1i,
     props: carouselProps,
     emits: carouselEmits,
     setup(__props, { expose, emit }) {
@@ -21706,11 +21706,11 @@
     };
   };
 
-  const __default__$1g = vue.defineComponent({
+  const __default__$1h = vue.defineComponent({
     name: "ElCarouselItem"
   });
   const _sfc_main$1S = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1g,
+    ...__default__$1h,
     props: carouselItemProps,
     setup(__props) {
       const props = __props;
@@ -21903,7 +21903,7 @@
       set(val) {
         var _a, _b;
         if (isGroup.value && isArray$1(val)) {
-          isLimitExceeded.value = ((_a = checkboxGroup == null ? void 0 : checkboxGroup.max) == null ? void 0 : _a.value) !== void 0 && val.length > (checkboxGroup == null ? void 0 : checkboxGroup.max.value);
+          isLimitExceeded.value = ((_a = checkboxGroup == null ? void 0 : checkboxGroup.max) == null ? void 0 : _a.value) !== void 0 && val.length > (checkboxGroup == null ? void 0 : checkboxGroup.max.value) && val.length > model.value.length;
           isLimitExceeded.value === false && ((_b = checkboxGroup == null ? void 0 : checkboxGroup.changeEvent) == null ? void 0 : _b.call(checkboxGroup, val));
         } else {
           emit(UPDATE_MODEL_EVENT, val);
@@ -22010,11 +22010,11 @@
 
   const _hoisted_1$W = ["id", "indeterminate", "name", "tabindex", "disabled", "true-value", "false-value"];
   const _hoisted_2$B = ["id", "indeterminate", "disabled", "value", "name", "tabindex"];
-  const __default__$1f = vue.defineComponent({
+  const __default__$1g = vue.defineComponent({
     name: "ElCheckbox"
   });
   const _sfc_main$1R = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1f,
+    ...__default__$1g,
     props: checkboxProps,
     emits: checkboxEmits,
     setup(__props) {
@@ -22122,11 +22122,11 @@
 
   const _hoisted_1$V = ["name", "tabindex", "disabled", "true-value", "false-value"];
   const _hoisted_2$A = ["name", "tabindex", "disabled", "value"];
-  const __default__$1e = vue.defineComponent({
+  const __default__$1f = vue.defineComponent({
     name: "ElCheckboxButton"
   });
   const _sfc_main$1Q = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1e,
+    ...__default__$1f,
     props: checkboxProps,
     emits: checkboxEmits,
     setup(__props) {
@@ -22240,11 +22240,11 @@
     change: (val) => isArray$1(val)
   };
 
-  const __default__$1d = vue.defineComponent({
+  const __default__$1e = vue.defineComponent({
     name: "ElCheckboxGroup"
   });
   const _sfc_main$1P = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1d,
+    ...__default__$1e,
     props: checkboxGroupProps,
     emits: checkboxGroupEmits,
     setup(__props, { emit }) {
@@ -22374,11 +22374,11 @@
   };
 
   const _hoisted_1$U = ["value", "name", "disabled"];
-  const __default__$1c = vue.defineComponent({
+  const __default__$1d = vue.defineComponent({
     name: "ElRadio"
   });
   const _sfc_main$1O = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1c,
+    ...__default__$1d,
     props: radioProps,
     emits: radioEmits,
     setup(__props, { emit }) {
@@ -22452,11 +22452,11 @@
   });
 
   const _hoisted_1$T = ["value", "name", "disabled"];
-  const __default__$1b = vue.defineComponent({
+  const __default__$1c = vue.defineComponent({
     name: "ElRadioButton"
   });
   const _sfc_main$1N = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1b,
+    ...__default__$1c,
     props: radioButtonProps,
     setup(__props) {
       const props = __props;
@@ -22548,11 +22548,11 @@
   const radioGroupEmits = radioEmits;
 
   const _hoisted_1$S = ["id", "aria-label", "aria-labelledby"];
-  const __default__$1a = vue.defineComponent({
+  const __default__$1b = vue.defineComponent({
     name: "ElRadioGroup"
   });
   const _sfc_main$1M = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1a,
+    ...__default__$1b,
     props: radioGroupProps,
     emits: radioGroupEmits,
     setup(__props, { emit }) {
@@ -22748,7 +22748,7 @@
   });
   const _hoisted_1$R = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"];
   const _hoisted_2$z = /* @__PURE__ */ vue.createElementVNode("span", null, null, -1);
-  function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_checkbox = vue.resolveComponent("el-checkbox");
     const _component_el_radio = vue.resolveComponent("el-radio");
     const _component_check = vue.resolveComponent("check");
@@ -22831,7 +22831,7 @@
       ], 64)) : vue.createCommentVNode("v-if", true)
     ], 42, _hoisted_1$R);
   }
-  var ElCascaderNode = /* @__PURE__ */ _export_sfc(_sfc_main$1L, [["render", _sfc_render$u], ["__file", "node.vue"]]);
+  var ElCascaderNode = /* @__PURE__ */ _export_sfc(_sfc_main$1L, [["render", _sfc_render$t], ["__file", "node.vue"]]);
 
   const _sfc_main$1K = vue.defineComponent({
     name: "ElCascaderMenu",
@@ -22855,14 +22855,14 @@
       const instance = vue.getCurrentInstance();
       const ns = useNamespace("cascader-menu");
       const { t } = useLocale();
-      const id = generateId();
+      const id = useId();
       let activeNode = null;
       let hoverTimer = null;
       const panel = vue.inject(CASCADER_PANEL_INJECTION_KEY);
       const hoverZone = vue.ref(null);
       const isEmpty = vue.computed(() => !props.nodes.length);
       const isLoading = vue.computed(() => !panel.initialLoaded);
-      const menuId = vue.computed(() => `cascader-menu-${id}-${props.index}`);
+      const menuId = vue.computed(() => `${id.value}-${props.index}`);
       const handleExpand = (e) => {
         activeNode = e.target;
       };
@@ -22911,7 +22911,7 @@
       };
     }
   });
-  function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_cascader_node = vue.resolveComponent("el-cascader-node");
     const _component_loading = vue.resolveComponent("loading");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -22964,7 +22964,7 @@
       _: 1
     }, 8, ["class", "wrap-class", "view-class", "onMousemove", "onMouseleave"]);
   }
-  var ElCascaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["render", _sfc_render$t], ["__file", "menu.vue"]]);
+  var ElCascaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["render", _sfc_render$s], ["__file", "menu.vue"]]);
 
   let uid = 0;
   const calculatePathNodes = (node) => {
@@ -23446,7 +23446,7 @@
       };
     }
   });
-  function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_cascader_menu = vue.resolveComponent("el-cascader-menu");
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass([_ctx.ns.b("panel"), _ctx.ns.is("bordered", _ctx.border)]),
@@ -23463,7 +23463,7 @@
       }), 128))
     ], 34);
   }
-  var CascaderPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["render", _sfc_render$s], ["__file", "index.vue"]]);
+  var CascaderPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["render", _sfc_render$r], ["__file", "index.vue"]]);
 
   CascaderPanel.install = (app) => {
     app.component(CascaderPanel.name, CascaderPanel);
@@ -23501,11 +23501,11 @@
     click: (evt) => evt instanceof MouseEvent
   };
 
-  const __default__$19 = vue.defineComponent({
+  const __default__$1a = vue.defineComponent({
     name: "ElTag"
   });
   const _sfc_main$1I = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$19,
+    ...__default__$1a,
     props: tagProps,
     emits: tagEmits,
     setup(__props, { emit }) {
@@ -23650,11 +23650,11 @@
   const _hoisted_2$y = ["placeholder", "onKeydown"];
   const _hoisted_3$g = ["onClick"];
   const COMPONENT_NAME$e = "ElCascader";
-  const __default__$18 = vue.defineComponent({
+  const __default__$19 = vue.defineComponent({
     name: COMPONENT_NAME$e
   });
   const _sfc_main$1H = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$18,
+    ...__default__$19,
     props: cascaderProps,
     emits: cascaderEmits,
     setup(__props, { expose, emit }) {
@@ -24266,11 +24266,11 @@
     [CHANGE_EVENT]: (value) => isBoolean(value)
   };
 
-  const __default__$17 = vue.defineComponent({
+  const __default__$18 = vue.defineComponent({
     name: "ElCheckTag"
   });
   const _sfc_main$1G = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$17,
+    ...__default__$18,
     props: checkTagProps,
     emits: checkTagEmits,
     setup(__props, { emit }) {
@@ -24327,11 +24327,11 @@
     }
   });
 
-  const __default__$16 = vue.defineComponent({
+  const __default__$17 = vue.defineComponent({
     name: "ElRow"
   });
   const _sfc_main$1F = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$16,
+    ...__default__$17,
     props: rowProps,
     setup(__props) {
       const props = __props;
@@ -24413,11 +24413,11 @@
     }
   });
 
-  const __default__$15 = vue.defineComponent({
+  const __default__$16 = vue.defineComponent({
     name: "ElCol"
   });
   const _sfc_main$1E = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$15,
+    ...__default__$16,
     props: colProps,
     setup(__props) {
       const props = __props;
@@ -24529,11 +24529,11 @@
     };
   };
 
-  const __default__$14 = vue.defineComponent({
+  const __default__$15 = vue.defineComponent({
     name: "ElCollapse"
   });
   const _sfc_main$1D = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$14,
+    ...__default__$15,
     props: collapseProps,
     emits: collapseEmits,
     setup(__props, { expose, emit }) {
@@ -24555,11 +24555,11 @@
   });
   var Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__file", "collapse.vue"]]);
 
-  const __default__$13 = vue.defineComponent({
+  const __default__$14 = vue.defineComponent({
     name: "ElCollapseTransition"
   });
   const _sfc_main$1C = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$13,
+    ...__default__$14,
     setup(__props) {
       const ns = useNamespace("collapse-transition");
       const reset = (el) => {
@@ -24652,17 +24652,23 @@
     },
     name: {
       type: definePropType([String, Number]),
-      default: () => generateId()
+      default: void 0
     },
     disabled: Boolean
   });
 
   const useCollapseItem = (props) => {
     const collapse = vue.inject(collapseContextKey);
+    const { namespace } = useNamespace("collapse");
     const focusing = vue.ref(false);
     const isClick = vue.ref(false);
-    const id = vue.ref(generateId());
-    const isActive = vue.computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(props.name));
+    const idInjection = useIdInjection();
+    const id = vue.computed(() => idInjection.current++);
+    const name = vue.computed(() => {
+      var _a;
+      return (_a = props.name) != null ? _a : `${namespace.value}-id-${idInjection.prefix}-${vue.unref(id)}`;
+    });
+    const isActive = vue.computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(vue.unref(name)));
     const handleFocus = () => {
       setTimeout(() => {
         if (!isClick.value) {
@@ -24675,12 +24681,12 @@
     const handleHeaderClick = () => {
       if (props.disabled)
         return;
-      collapse == null ? void 0 : collapse.handleItemClick(props.name);
+      collapse == null ? void 0 : collapse.handleItemClick(vue.unref(name));
       focusing.value = false;
       isClick.value = true;
     };
     const handleEnterClick = () => {
-      collapse == null ? void 0 : collapse.handleItemClick(props.name);
+      collapse == null ? void 0 : collapse.handleItemClick(vue.unref(name));
     };
     return {
       focusing,
@@ -24724,11 +24730,11 @@
 
   const _hoisted_1$P = ["id", "aria-expanded", "aria-controls", "aria-describedby", "tabindex"];
   const _hoisted_2$x = ["id", "aria-hidden", "aria-labelledby"];
-  const __default__$12 = vue.defineComponent({
+  const __default__$13 = vue.defineComponent({
     name: "ElCollapseItem"
   });
   const _sfc_main$1B = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$12,
+    ...__default__$13,
     props: collapseItemProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -24968,11 +24974,11 @@
   };
 
   const COMPONENT_NAME$d = "ElColorAlphaSlider";
-  const __default__$11 = vue.defineComponent({
+  const __default__$12 = vue.defineComponent({
     name: COMPONENT_NAME$d
   });
   const _sfc_main$1A = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$11,
+    ...__default__$12,
     props: alphaSliderProps,
     setup(__props, { expose }) {
       const props = __props;
@@ -25111,7 +25117,7 @@
       };
     }
   });
-  function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.is("vertical", _ctx.vertical)])
     }, [
@@ -25130,7 +25136,7 @@
       }, null, 6)
     ], 2);
   }
-  var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$r], ["__file", "hue-slider.vue"]]);
+  var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$q], ["__file", "hue-slider.vue"]]);
 
   const colorPickerProps = buildProps({
     modelValue: String,
@@ -25498,7 +25504,7 @@
     }
   });
   const _hoisted_1$O = ["onClick"];
-  function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass(_ctx.ns.b())
     }, [
@@ -25523,7 +25529,7 @@
       ], 2)
     ], 2);
   }
-  var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$q], ["__file", "predefine.vue"]]);
+  var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$p], ["__file", "predefine.vue"]]);
 
   const _sfc_main$1x = vue.defineComponent({
     name: "ElSlPanel",
@@ -25599,7 +25605,7 @@
   const _hoisted_2$w = [
     _hoisted_1$N
   ];
-  function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass(_ctx.ns.b()),
       style: vue.normalizeStyle({
@@ -25621,15 +25627,15 @@
       }, _hoisted_2$w, 6)
     ], 6);
   }
-  var SvPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$p], ["__file", "sv-panel.vue"]]);
+  var SvPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$o], ["__file", "sv-panel.vue"]]);
 
   const _hoisted_1$M = ["onKeydown"];
   const _hoisted_2$v = ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex"];
-  const __default__$10 = vue.defineComponent({
+  const __default__$11 = vue.defineComponent({
     name: "ElColorPicker"
   });
   const _sfc_main$1w = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$10,
+    ...__default__$11,
     props: colorPickerProps,
     emits: colorPickerEmits,
     setup(__props, { expose, emit }) {
@@ -26003,11 +26009,11 @@
 
   const ElColorPicker = withInstall(ColorPicker);
 
-  const __default__$$ = vue.defineComponent({
+  const __default__$10 = vue.defineComponent({
     name: "ElContainer"
   });
   const _sfc_main$1v = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$$,
+    ...__default__$10,
     props: {
       direction: {
         type: String
@@ -26044,11 +26050,11 @@
   });
   var Container = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["__file", "container.vue"]]);
 
-  const __default__$_ = vue.defineComponent({
+  const __default__$$ = vue.defineComponent({
     name: "ElAside"
   });
   const _sfc_main$1u = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$_,
+    ...__default__$$,
     props: {
       width: {
         type: String,
@@ -26071,11 +26077,11 @@
   });
   var Aside = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["__file", "aside.vue"]]);
 
-  const __default__$Z = vue.defineComponent({
+  const __default__$_ = vue.defineComponent({
     name: "ElFooter"
   });
   const _sfc_main$1t = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$Z,
+    ...__default__$_,
     props: {
       height: {
         type: String,
@@ -26098,11 +26104,11 @@
   });
   var Footer$2 = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__file", "footer.vue"]]);
 
-  const __default__$Y = vue.defineComponent({
+  const __default__$Z = vue.defineComponent({
     name: "ElHeader"
   });
   const _sfc_main$1s = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$Y,
+    ...__default__$Z,
     props: {
       height: {
         type: String,
@@ -26129,11 +26135,11 @@
   });
   var Header$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["__file", "header.vue"]]);
 
-  const __default__$X = vue.defineComponent({
+  const __default__$Y = vue.defineComponent({
     name: "ElMain"
   });
   const _sfc_main$1r = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$X,
+    ...__default__$Y,
     setup(__props) {
       const ns = useNamespace("main");
       return (_ctx, _cache) => {
@@ -28689,11 +28695,11 @@
   const _hoisted_2$p = ["disabled"];
   const _hoisted_3$a = ["disabled"];
   const unit = "year";
-  const __default__$W = vue.defineComponent({
+  const __default__$X = vue.defineComponent({
     name: "DatePickerMonthRange"
   });
   const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$W,
+    ...__default__$X,
     props: panelMonthRangeProps,
     emits: panelMonthRangeEmits,
     setup(__props, { emit }) {
@@ -29076,11 +29082,11 @@
   });
 
   const _hoisted_1$F = { key: 1 };
-  const __default__$V = vue.defineComponent({
+  const __default__$W = vue.defineComponent({
     name: "ElDescriptionsRow"
   });
   const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$V,
+    ...__default__$W,
     props: descriptionsRowProps,
     setup(__props) {
       const descriptions = vue.inject(descriptionsKey, {});
@@ -29161,11 +29167,11 @@
     }
   });
 
-  const __default__$U = vue.defineComponent({
+  const __default__$V = vue.defineComponent({
     name: "ElDescriptions"
   });
   const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$U,
+    ...__default__$V,
     props: descriptionProps,
     setup(__props) {
       const props = __props;
@@ -29405,9 +29411,9 @@
   const _hoisted_1$E = ["aria-level"];
   const _hoisted_2$o = ["aria-label"];
   const _hoisted_3$9 = ["id"];
-  const __default__$T = vue.defineComponent({ name: "ElDialogContent" });
+  const __default__$U = vue.defineComponent({ name: "ElDialogContent" });
   const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$T,
+    ...__default__$U,
     props: dialogContentProps,
     emits: dialogContentEmits,
     setup(__props) {
@@ -29716,12 +29722,12 @@
   };
 
   const _hoisted_1$D = ["aria-label", "aria-labelledby", "aria-describedby"];
-  const __default__$S = vue.defineComponent({
+  const __default__$T = vue.defineComponent({
     name: "ElDialog",
     inheritAttrs: false
   });
   const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$S,
+    ...__default__$T,
     props: dialogProps,
     emits: dialogEmits,
     setup(__props, { expose }) {
@@ -29893,11 +29899,11 @@
     }
   });
 
-  const __default__$R = vue.defineComponent({
+  const __default__$S = vue.defineComponent({
     name: "ElDivider"
   });
   const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$R,
+    ...__default__$S,
     props: dividerProps,
     setup(__props) {
       const props = __props;
@@ -29953,18 +29959,21 @@
   });
   const drawerEmits = dialogEmits;
 
-  const _sfc_main$1f = vue.defineComponent({
+  const _hoisted_1$C = ["aria-label", "aria-labelledby", "aria-describedby"];
+  const _hoisted_2$n = ["id", "aria-level"];
+  const _hoisted_3$8 = ["aria-label"];
+  const _hoisted_4$6 = ["id"];
+  const __default__$R = vue.defineComponent({
     name: "ElDrawer",
-    components: {
-      ElOverlay,
-      ElFocusTrap,
-      ElIcon,
-      Close: close_default
-    },
-    inheritAttrs: false,
+    inheritAttrs: false
+  });
+  const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$R,
     props: drawerProps,
     emits: drawerEmits,
-    setup(props, { slots }) {
+    setup(__props, { expose }) {
+      const props = __props;
+      const slots = vue.useSlots();
       useDeprecated({
         scope: "el-drawer",
         from: "the title slot",
@@ -29984,138 +29993,140 @@
       const focusStartRef = vue.ref();
       const ns = useNamespace("drawer");
       const { t } = useLocale();
+      const {
+        afterEnter,
+        afterLeave,
+        beforeLeave,
+        visible,
+        rendered,
+        titleId,
+        bodyId,
+        onModalClick,
+        onCloseRequested,
+        handleClose
+      } = useDialog(props, drawerRef);
       const isHorizontal = vue.computed(() => props.direction === "rtl" || props.direction === "ltr");
       const drawerSize = vue.computed(() => addUnit(props.size));
-      return {
-        ...useDialog(props, drawerRef),
-        drawerRef,
-        focusStartRef,
-        isHorizontal,
-        drawerSize,
-        ns,
-        t
-      };
-    }
-  });
-  const _hoisted_1$C = ["aria-label", "aria-labelledby", "aria-describedby"];
-  const _hoisted_2$n = ["id", "aria-level"];
-  const _hoisted_3$8 = ["aria-label"];
-  const _hoisted_4$6 = ["id"];
-  function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_close = vue.resolveComponent("close");
-    const _component_el_icon = vue.resolveComponent("el-icon");
-    const _component_el_focus_trap = vue.resolveComponent("el-focus-trap");
-    const _component_el_overlay = vue.resolveComponent("el-overlay");
-    return vue.openBlock(), vue.createBlock(vue.Teleport, {
-      to: "body",
-      disabled: !_ctx.appendToBody
-    }, [
-      vue.createVNode(vue.Transition, {
-        name: _ctx.ns.b("fade"),
-        onAfterEnter: _ctx.afterEnter,
-        onAfterLeave: _ctx.afterLeave,
-        onBeforeLeave: _ctx.beforeLeave,
-        persisted: ""
-      }, {
-        default: vue.withCtx(() => [
-          vue.withDirectives(vue.createVNode(_component_el_overlay, {
-            mask: _ctx.modal,
-            "overlay-class": _ctx.modalClass,
-            "z-index": _ctx.zIndex,
-            onClick: _ctx.onModalClick
+      expose({
+        handleClose,
+        afterEnter,
+        afterLeave
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.Teleport, {
+          to: "body",
+          disabled: !_ctx.appendToBody
+        }, [
+          vue.createVNode(vue.Transition, {
+            name: vue.unref(ns).b("fade"),
+            onAfterEnter: vue.unref(afterEnter),
+            onAfterLeave: vue.unref(afterLeave),
+            onBeforeLeave: vue.unref(beforeLeave),
+            persisted: ""
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_component_el_focus_trap, {
-                loop: "",
-                trapped: _ctx.visible,
-                "focus-trap-el": _ctx.drawerRef,
-                "focus-start-el": _ctx.focusStartRef,
-                onReleaseRequested: _ctx.onCloseRequested
+              vue.withDirectives(vue.createVNode(vue.unref(ElOverlay), {
+                mask: _ctx.modal,
+                "overlay-class": _ctx.modalClass,
+                "z-index": _ctx.zIndex,
+                onClick: vue.unref(onModalClick)
               }, {
                 default: vue.withCtx(() => [
-                  vue.createElementVNode("div", vue.mergeProps({
-                    ref: "drawerRef",
-                    "aria-modal": "true",
-                    "aria-label": _ctx.title || void 0,
-                    "aria-labelledby": !_ctx.title ? _ctx.titleId : void 0,
-                    "aria-describedby": _ctx.bodyId
-                  }, _ctx.$attrs, {
-                    class: [_ctx.ns.b(), _ctx.direction, _ctx.visible && "open", _ctx.customClass],
-                    style: _ctx.isHorizontal ? "width: " + _ctx.drawerSize : "height: " + _ctx.drawerSize,
-                    role: "dialog",
-                    onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
-                    }, ["stop"]))
-                  }), [
-                    vue.createElementVNode("span", {
-                      ref: "focusStartRef",
-                      class: vue.normalizeClass(_ctx.ns.e("sr-focus")),
-                      tabindex: "-1"
-                    }, null, 2),
-                    _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", {
-                      key: 0,
-                      class: vue.normalizeClass(_ctx.ns.e("header"))
-                    }, [
-                      !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
-                        key: 0,
-                        close: _ctx.handleClose,
-                        titleId: _ctx.titleId,
-                        titleClass: _ctx.ns.e("title")
-                      }, () => [
-                        !_ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
+                  vue.createVNode(vue.unref(ElFocusTrap), {
+                    loop: "",
+                    trapped: vue.unref(visible),
+                    "focus-trap-el": drawerRef.value,
+                    "focus-start-el": focusStartRef.value,
+                    onReleaseRequested: vue.unref(onCloseRequested)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", vue.mergeProps({
+                        ref_key: "drawerRef",
+                        ref: drawerRef,
+                        "aria-modal": "true",
+                        "aria-label": _ctx.title || void 0,
+                        "aria-labelledby": !_ctx.title ? vue.unref(titleId) : void 0,
+                        "aria-describedby": vue.unref(bodyId)
+                      }, _ctx.$attrs, {
+                        class: [vue.unref(ns).b(), _ctx.direction, vue.unref(visible) && "open", _ctx.customClass],
+                        style: vue.unref(isHorizontal) ? "width: " + vue.unref(drawerSize) : "height: " + vue.unref(drawerSize),
+                        role: "dialog",
+                        onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+                        }, ["stop"]))
+                      }), [
+                        vue.createElementVNode("span", {
+                          ref_key: "focusStartRef",
+                          ref: focusStartRef,
+                          class: vue.normalizeClass(vue.unref(ns).e("sr-focus")),
+                          tabindex: "-1"
+                        }, null, 2),
+                        _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", {
                           key: 0,
-                          id: _ctx.titleId,
-                          role: "heading",
-                          "aria-level": _ctx.headerAriaLevel,
-                          class: vue.normalizeClass(_ctx.ns.e("title"))
-                        }, vue.toDisplayString(_ctx.title), 11, _hoisted_2$n)) : vue.createCommentVNode("v-if", true)
-                      ]) : vue.renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
-                        vue.createCommentVNode(" DEPRECATED SLOT ")
-                      ]),
-                      _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
-                        key: 2,
-                        "aria-label": _ctx.t("el.drawer.close"),
-                        class: vue.normalizeClass(_ctx.ns.e("close-btn")),
-                        type: "button",
-                        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
-                      }, [
-                        vue.createVNode(_component_el_icon, {
-                          class: vue.normalizeClass(_ctx.ns.e("close"))
-                        }, {
-                          default: vue.withCtx(() => [
-                            vue.createVNode(_component_close)
+                          class: vue.normalizeClass(vue.unref(ns).e("header"))
+                        }, [
+                          !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
+                            key: 0,
+                            close: vue.unref(handleClose),
+                            titleId: vue.unref(titleId),
+                            titleClass: vue.unref(ns).e("title")
+                          }, () => [
+                            !_ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
+                              key: 0,
+                              id: vue.unref(titleId),
+                              role: "heading",
+                              "aria-level": _ctx.headerAriaLevel,
+                              class: vue.normalizeClass(vue.unref(ns).e("title"))
+                            }, vue.toDisplayString(_ctx.title), 11, _hoisted_2$n)) : vue.createCommentVNode("v-if", true)
+                          ]) : vue.renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
+                            vue.createCommentVNode(" DEPRECATED SLOT ")
                           ]),
-                          _: 1
-                        }, 8, ["class"])
-                      ], 10, _hoisted_3$8)) : vue.createCommentVNode("v-if", true)
-                    ], 2)) : vue.createCommentVNode("v-if", true),
-                    _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("div", {
-                      key: 1,
-                      id: _ctx.bodyId,
-                      class: vue.normalizeClass(_ctx.ns.e("body"))
-                    }, [
-                      vue.renderSlot(_ctx.$slots, "default")
-                    ], 10, _hoisted_4$6)) : vue.createCommentVNode("v-if", true),
-                    _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
-                      key: 2,
-                      class: vue.normalizeClass(_ctx.ns.e("footer"))
-                    }, [
-                      vue.renderSlot(_ctx.$slots, "footer")
-                    ], 2)) : vue.createCommentVNode("v-if", true)
-                  ], 16, _hoisted_1$C)
+                          _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
+                            key: 2,
+                            "aria-label": vue.unref(t)("el.drawer.close"),
+                            class: vue.normalizeClass(vue.unref(ns).e("close-btn")),
+                            type: "button",
+                            onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleClose) && vue.unref(handleClose)(...args))
+                          }, [
+                            vue.createVNode(vue.unref(ElIcon), {
+                              class: vue.normalizeClass(vue.unref(ns).e("close"))
+                            }, {
+                              default: vue.withCtx(() => [
+                                vue.createVNode(vue.unref(close_default))
+                              ]),
+                              _: 1
+                            }, 8, ["class"])
+                          ], 10, _hoisted_3$8)) : vue.createCommentVNode("v-if", true)
+                        ], 2)) : vue.createCommentVNode("v-if", true),
+                        vue.unref(rendered) ? (vue.openBlock(), vue.createElementBlock("div", {
+                          key: 1,
+                          id: vue.unref(bodyId),
+                          class: vue.normalizeClass(vue.unref(ns).e("body"))
+                        }, [
+                          vue.renderSlot(_ctx.$slots, "default")
+                        ], 10, _hoisted_4$6)) : vue.createCommentVNode("v-if", true),
+                        _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+                          key: 2,
+                          class: vue.normalizeClass(vue.unref(ns).e("footer"))
+                        }, [
+                          vue.renderSlot(_ctx.$slots, "footer")
+                        ], 2)) : vue.createCommentVNode("v-if", true)
+                      ], 16, _hoisted_1$C)
+                    ]),
+                    _: 3
+                  }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
                 ]),
                 _: 3
-              }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
+              }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
+                [vue.vShow, vue.unref(visible)]
+              ])
             ]),
             _: 3
-          }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
-            [vue.vShow, _ctx.visible]
-          ])
-        ]),
-        _: 3
-      }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
-    ], 8, ["disabled"]);
-  }
-  var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$o], ["__file", "drawer.vue"]]);
+          }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
+        ], 8, ["disabled"]);
+      };
+    }
+  });
+  var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["__file", "drawer.vue"]]);
 
   const ElDrawer = withInstall(Drawer);
 
@@ -31427,8 +31438,7 @@
       default: 7
     },
     crossorigin: {
-      type: definePropType(String),
-      default: "anonymous"
+      type: definePropType(String)
     }
   });
   const imageViewerEmits = {
@@ -31446,6 +31456,7 @@
     props: imageViewerProps,
     emits: imageViewerEmits,
     setup(__props, { expose, emit }) {
+      var _a;
       const props = __props;
       const modes = {
         CONTAIN: {
@@ -31464,7 +31475,6 @@
       const imgRefs = vue.ref([]);
       const scopeEventListener = vue.effectScope();
       const loading = vue.ref(true);
-      const crossorigin = vue.ref(props.crossorigin);
       const activeIndex = vue.ref(props.initialIndex);
       const mode = vue.shallowRef(modes.CONTAIN);
       const transform = vue.ref({
@@ -31474,6 +31484,7 @@
         offsetY: 0,
         enableTransition: false
       });
+      const zIndex = vue.ref((_a = props.zIndex) != null ? _a : nextZIndex());
       const isSingle = vue.computed(() => {
         const { urlList } = props;
         return urlList.length <= 1;
@@ -31524,9 +31535,6 @@
         }
         return style;
       });
-      const computedZIndex = vue.computed(() => {
-        return isNumber(props.zIndex) ? props.zIndex : nextZIndex();
-      });
       function hide() {
         unregisterEventListener();
         emit("close");
@@ -31675,9 +31683,9 @@
         emit("switch", val);
       });
       vue.onMounted(() => {
-        var _a, _b;
+        var _a2, _b;
         registerEventListener();
-        (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+        (_b = (_a2 = wrapper.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);
       });
       expose({
         setActiveItem
@@ -31697,7 +31705,7 @@
                 ref: wrapper,
                 tabindex: -1,
                 class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
-                style: vue.normalizeStyle({ zIndex: vue.unref(computedZIndex) })
+                style: vue.normalizeStyle({ zIndex: zIndex.value })
               }, [
                 vue.createElementVNode("div", {
                   class: vue.normalizeClass(vue.unref(ns).e("mask")),
@@ -31805,7 +31813,7 @@
                       src: url,
                       style: vue.normalizeStyle(vue.unref(imgStyle)),
                       class: vue.normalizeClass(vue.unref(ns).e("img")),
-                      crossorigin: crossorigin.value,
+                      crossorigin: _ctx.crossorigin,
                       onLoad: handleImgLoad,
                       onError: handleImgError,
                       onMousedown: handleMouseDown
@@ -31879,8 +31887,7 @@
       default: 7
     },
     crossorigin: {
-      type: definePropType(String),
-      default: "anonymous"
+      type: definePropType(String)
     }
   });
   const imageEmits = {
@@ -31909,7 +31916,6 @@
       const rawAttrs = vue.useAttrs();
       const attrs = useAttrs();
       const imageSrc = vue.ref();
-      const crossorigin = vue.ref(props.crossorigin);
       const hasLoadError = vue.ref(false);
       const isLoading = vue.ref(true);
       const showViewer = vue.ref(false);
@@ -32061,7 +32067,7 @@
               loading: _ctx.loading,
               style: vue.unref(imageStyle),
               class: vue.unref(imageKls),
-              crossorigin: crossorigin.value,
+              crossorigin: _ctx.crossorigin,
               onClick: clickHandler,
               onLoad: handleLoad,
               onError: handleError
@@ -34013,6 +34019,7 @@
       selected: props.multiple ? [] : {},
       selectionWidth: 0,
       calculatorWidth: 0,
+      collapseItemWidth: 0,
       selectedLabel: "",
       hoveringIndex: -1,
       previousQuery: null,
@@ -34037,6 +34044,7 @@
     const suffixRef = vue.ref(null);
     const menuRef = vue.ref(null);
     const tagMenuRef = vue.ref(null);
+    const collapseItemRef = vue.ref(null);
     const scrollbarRef = vue.ref(null);
     const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
       afterFocus() {
@@ -34281,6 +34289,9 @@
     const resetCalculatorWidth = () => {
       states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width;
     };
+    const resetCollapseItemWidth = () => {
+      states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
+    };
     const updateTooltip = () => {
       var _a, _b;
       (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
@@ -34290,13 +34301,13 @@
       (_b = (_a = tagTooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
     };
     const onInputChange = () => {
+      if (states.inputValue.length > 0 && !expanded.value) {
+        expanded.value = true;
+      }
       handleQueryChange(states.inputValue);
     };
     const onInput = (event) => {
       states.inputValue = event.target.value;
-      if (states.inputValue.length > 0 && !expanded.value) {
-        expanded.value = true;
-      }
       if (props.remote) {
         debouncedOnInputChange();
       } else {
@@ -34465,6 +34476,8 @@
     const toggleMenu = () => {
       if (selectDisabled.value)
         return;
+      if (props.filterable && props.remote && isFunction$1(props.remoteMethod))
+        return;
       if (states.menuVisibleOnFocus) {
         states.menuVisibleOnFocus = false;
       } else {
@@ -34522,7 +34535,18 @@
         vue.nextTick(() => scrollToOption(hoverOption.value));
       }
     };
+    const getGapWidth = () => {
+      if (!selectionRef.value)
+        return 0;
+      const style = window.getComputedStyle(selectionRef.value);
+      return Number.parseFloat(style.gap || "6px");
+    };
     const tagStyle = vue.computed(() => {
+      const gapWidth = getGapWidth();
+      const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth : states.selectionWidth;
+      return { maxWidth: `${maxWidth}px` };
+    });
+    const collapseTagStyle = vue.computed(() => {
       return { maxWidth: `${states.selectionWidth}px` };
     });
     const inputStyle = vue.computed(() => ({
@@ -34537,7 +34561,9 @@
     useResizeObserver(selectionRef, resetSelectionWidth);
     useResizeObserver(calculatorRef, resetCalculatorWidth);
     useResizeObserver(menuRef, updateTooltip);
+    useResizeObserver(wrapperRef, updateTooltip);
     useResizeObserver(tagMenuRef, updateTagTooltip);
+    useResizeObserver(collapseItemRef, resetCollapseItemWidth);
     vue.onMounted(() => {
       setSelected();
     });
@@ -34598,6 +34624,7 @@
       showTagList,
       collapseTagList,
       tagStyle,
+      collapseTagStyle,
       inputStyle,
       popperRef,
       inputRef,
@@ -34611,7 +34638,8 @@
       selectionRef,
       scrollbarRef,
       menuRef,
-      tagMenuRef
+      tagMenuRef,
+      collapseItemRef
     };
   };
 
@@ -34803,9 +34831,9 @@
     return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
       ref: "selectRef",
       class: vue.normalizeClass([_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]),
-      onMouseenter: _cache[15] || (_cache[15] = ($event) => _ctx.states.inputHovering = true),
-      onMouseleave: _cache[16] || (_cache[16] = ($event) => _ctx.states.inputHovering = false),
-      onClick: _cache[17] || (_cache[17] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
+      onMouseenter: _cache[14] || (_cache[14] = ($event) => _ctx.states.inputHovering = true),
+      onMouseleave: _cache[15] || (_cache[15] = ($event) => _ctx.states.inputHovering = false),
+      onClick: _cache[16] || (_cache[16] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
     }, [
       vue.createVNode(_component_el_tooltip, {
         ref: "tooltipRef",
@@ -34823,7 +34851,7 @@
         "gpu-acceleration": false,
         persistent: _ctx.persistent,
         onBeforeShow: _ctx.handleMenuEnter,
-        onHide: _cache[14] || (_cache[14] = ($event) => _ctx.states.isBeforeHide = false)
+        onHide: _cache[13] || (_cache[13] = ($event) => _ctx.states.isBeforeHide = false)
       }, {
         default: vue.withCtx(() => {
           var _a;
@@ -34878,7 +34906,7 @@
                   _ctx.collapseTags && _ctx.states.selected.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
                     key: 0,
                     ref: "tagTooltipRef",
-                    disabled: !_ctx.collapseTagsTooltip,
+                    disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
                     "fallback-placements": ["bottom", "top", "right", "left"],
                     effect: _ctx.effect,
                     placement: "bottom",
@@ -34886,6 +34914,7 @@
                   }, {
                     default: vue.withCtx(() => [
                       vue.createElementVNode("div", {
+                        ref: "collapseItemRef",
                         class: vue.normalizeClass(_ctx.nsSelect.e("selected-item"))
                       }, [
                         vue.createVNode(_component_el_tag, {
@@ -34893,7 +34922,7 @@
                           size: _ctx.collapseTagSize,
                           type: _ctx.tagType,
                           "disable-transitions": "",
-                          style: vue.normalizeStyle(_ctx.tagStyle)
+                          style: vue.normalizeStyle(_ctx.collapseTagStyle)
                         }, {
                           default: vue.withCtx(() => [
                             vue.createElementVNode("span", {
@@ -34965,19 +34994,17 @@
                     onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
                     onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
                     onKeydown: [
-                      _cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["prevent"]), ["down"])),
-                      _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["prevent"]), ["up"])),
-                      _cache[5] || (_cache[5] = vue.withKeys((...args) => _ctx.handleEsc && _ctx.handleEsc(...args), ["esc"])),
+                      _cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"])),
+                      _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"])),
+                      _cache[5] || (_cache[5] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleEsc && _ctx.handleEsc(...args), ["stop", "prevent"]), ["esc"])),
                       _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers((...args) => _ctx.selectOption && _ctx.selectOption(...args), ["stop", "prevent"]), ["enter"])),
-                      _cache[7] || (_cache[7] = vue.withKeys(vue.withModifiers((...args) => _ctx.deletePrevTag && _ctx.deletePrevTag(...args), ["stop"]), ["delete"])),
-                      _cache[8] || (_cache[8] = vue.withKeys(($event) => _ctx.expanded = false, ["tab"]))
+                      _cache[7] || (_cache[7] = vue.withKeys(vue.withModifiers((...args) => _ctx.deletePrevTag && _ctx.deletePrevTag(...args), ["stop"]), ["delete"]))
                     ],
-                    onCompositionstart: _cache[9] || (_cache[9] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
-                    onCompositionupdate: _cache[10] || (_cache[10] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
-                    onCompositionend: _cache[11] || (_cache[11] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
-                    onInput: _cache[12] || (_cache[12] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
-                    onClick: _cache[13] || (_cache[13] = vue.withModifiers(() => {
-                    }, ["stop"]))
+                    onCompositionstart: _cache[8] || (_cache[8] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
+                    onCompositionupdate: _cache[9] || (_cache[9] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
+                    onCompositionend: _cache[10] || (_cache[10] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
+                    onInput: _cache[11] || (_cache[11] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
+                    onClick: _cache[12] || (_cache[12] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
                   }, null, 46, _hoisted_1$p), [
                     [vue.vModelText, _ctx.states.inputValue]
                   ]),
@@ -35073,13 +35100,21 @@
               }, 8, ["id", "wrap-class", "view-class", "class", "aria-label"]), [
                 [vue.vShow, _ctx.states.options.size > 0 && !_ctx.loading]
               ]),
-              _ctx.loading || _ctx.filteredOptionsCount === 0 ? vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createElementVNode("p", {
-                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
-                }, vue.toDisplayString(_ctx.emptyText), 3)
-              ]) : vue.createCommentVNode("v-if", true),
-              _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+              _ctx.$slots.loading && _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 1,
+                class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
+              }, [
+                vue.renderSlot(_ctx.$slots, "loading")
+              ], 2)) : _ctx.loading || _ctx.filteredOptionsCount === 0 ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 2,
+                class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
+              }, [
+                vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+                  vue.createElementVNode("span", null, vue.toDisplayString(_ctx.emptyText), 1)
+                ])
+              ], 2)) : vue.createCommentVNode("v-if", true),
+              _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 3,
                 class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "footer"))
               }, [
                 vue.renderSlot(_ctx.$slots, "footer")
@@ -38745,10 +38780,7 @@
       default: "light"
     },
     collapseTags: Boolean,
-    collapseTagsTooltip: {
-      type: Boolean,
-      default: false
-    },
+    collapseTagsTooltip: Boolean,
     maxCollapseTags: {
       type: Number,
       default: 1
@@ -38818,10 +38850,7 @@
       type: String,
       default: "value"
     },
-    scrollbarAlwaysOn: {
-      type: Boolean,
-      default: false
-    },
+    scrollbarAlwaysOn: Boolean,
     validateEvent: {
       type: Boolean,
       default: true
@@ -38898,6 +38927,7 @@
   var ElSelectMenu = vue.defineComponent({
     name: "ElSelectDropdown",
     props: {
+      loading: Boolean,
       data: {
         type: Array,
         required: true
@@ -39087,7 +39117,7 @@
         }
       };
       return () => {
-        var _a;
+        var _a, _b, _c, _d;
         const {
           data,
           width
@@ -39097,18 +39127,18 @@
           multiple,
           scrollbarAlwaysOn
         } = select.props;
-        if (data.length === 0) {
+        if (slots.loading || slots.empty) {
           return vue.createVNode("div", {
             "class": ns.b("dropdown"),
             "style": {
               width: `${width}px`
             }
-          }, [(_a = slots.empty) == null ? void 0 : _a.call(slots)]);
+          }, [((_a = slots.loading) == null ? void 0 : _a.call(slots)) || ((_b = slots.empty) == null ? void 0 : _b.call(slots))]);
         }
         const List = vue.unref(isSized) ? FixedSizeList$1 : DynamicSizeList$1;
         return vue.createVNode("div", {
           "class": [ns.b("dropdown"), ns.is("multiple", multiple)]
-        }, [vue.createVNode(List, vue.mergeProps({
+        }, [(_c = slots.header) == null ? void 0 : _c.call(slots), vue.createVNode(List, vue.mergeProps({
           "ref": listRef
         }, vue.unref(listProps), {
           "className": ns.be("dropdown", "list"),
@@ -39120,7 +39150,7 @@
           "onKeydown": onKeydown
         }), {
           default: (props2) => vue.createVNode(Item, props2, null)
-        })]);
+        }), (_d = slots.footer) == null ? void 0 : _d.call(slots)]);
       };
     }
   });
@@ -39218,6 +39248,7 @@
       inputHovering: false,
       selectionWidth: 0,
       calculatorWidth: 0,
+      collapseItemWidth: 0,
       previousQuery: null,
       previousValue: void 0,
       selectedLabel: "",
@@ -39236,6 +39267,7 @@
     const suffixRef = vue.ref(null);
     const menuRef = vue.ref(null);
     const tagMenuRef = vue.ref(null);
+    const collapseItemRef = vue.ref(null);
     const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
       afterFocus() {
         if (props.automaticDropdown && !expanded.value) {
@@ -39334,7 +39366,18 @@
       var _a;
       popperSize.value = ((_a = selectRef.value) == null ? void 0 : _a.offsetWidth) || 200;
     };
+    const getGapWidth = () => {
+      if (!selectionRef.value)
+        return 0;
+      const style = window.getComputedStyle(selectionRef.value);
+      return Number.parseFloat(style.gap || "6px");
+    };
     const tagStyle = vue.computed(() => {
+      const gapWidth = getGapWidth();
+      const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth : states.selectionWidth;
+      return { maxWidth: `${maxWidth}px` };
+    });
+    const collapseTagStyle = vue.computed(() => {
       return { maxWidth: `${states.selectionWidth}px` };
     });
     const inputStyle = vue.computed(() => ({
@@ -39404,6 +39447,8 @@
     const toggleMenu = () => {
       if (selectDisabled.value)
         return;
+      if (props.filterable && props.remote && isFunction$1(props.remoteMethod))
+        return;
       if (states.menuVisibleOnFocus) {
         states.menuVisibleOnFocus = false;
       } else {
@@ -39411,6 +39456,9 @@
       }
     };
     const onInputChange = () => {
+      if (states.inputValue.length > 0 && !expanded.value) {
+        expanded.value = true;
+      }
       createNewOption(states.inputValue);
       handleQueryChange(states.inputValue);
     };
@@ -39474,6 +39522,9 @@
     const resetCalculatorWidth = () => {
       states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width;
     };
+    const resetCollapseItemWidth = () => {
+      states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
+    };
     const updateTooltip = () => {
       var _a, _b;
       (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
@@ -39645,9 +39696,6 @@
     };
     const onInput = (event) => {
       states.inputValue = event.target.value;
-      if (states.inputValue.length > 0 && !expanded.value) {
-        expanded.value = true;
-      }
       if (props.remote) {
         debouncedOnInputChange();
       } else {
@@ -39751,6 +39799,22 @@
         return;
       updateOptions();
     });
+    vue.watchEffect(() => {
+      const { valueKey, options } = props;
+      const duplicateValue = /* @__PURE__ */ new Map();
+      for (const item of options) {
+        const optionValue = getValue(item);
+        let v = optionValue;
+        if (isObject$1(v)) {
+          v = get(optionValue, valueKey);
+        }
+        if (duplicateValue.get(v)) {
+          break;
+        } else {
+          duplicateValue.set(v, true);
+        }
+      }
+    });
     vue.onMounted(() => {
       initStates();
     });
@@ -39758,7 +39822,9 @@
     useResizeObserver(selectionRef, resetSelectionWidth);
     useResizeObserver(calculatorRef, resetCalculatorWidth);
     useResizeObserver(menuRef, updateTooltip);
+    useResizeObserver(wrapperRef, updateTooltip);
     useResizeObserver(tagMenuRef, updateTagTooltip);
+    useResizeObserver(collapseItemRef, resetCollapseItemWidth);
     return {
       inputId,
       collapseTagSize,
@@ -39772,6 +39838,7 @@
       iconComponent,
       iconReverse,
       tagStyle,
+      collapseTagStyle,
       inputStyle,
       popperSize,
       dropdownMenuVisible,
@@ -39795,6 +39862,7 @@
       selectionRef,
       prefixRef,
       suffixRef,
+      collapseItemRef,
       popperRef,
       validateState,
       validateIcon,
@@ -39885,7 +39953,7 @@
       };
     }
   });
-  const _hoisted_1$i = ["id", "autocomplete", "aria-expanded", "aria-label", "disabled", "readonly", "name", "unselectable"];
+  const _hoisted_1$i = ["id", "autocomplete", "aria-expanded", "aria-label", "disabled", "readonly", "name"];
   const _hoisted_2$c = ["textContent"];
   function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_tag = vue.resolveComponent("el-tag");
@@ -39969,7 +40037,7 @@
                 _ctx.collapseTags && _ctx.modelValue.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
                   key: 0,
                   ref: "tagTooltipRef",
-                  disabled: !_ctx.collapseTagsTooltip,
+                  disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
                   "fallback-placements": ["bottom", "top", "right", "left"],
                   effect: _ctx.effect,
                   placement: "bottom",
@@ -39977,13 +40045,14 @@
                 }, {
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", {
+                      ref: "collapseItemRef",
                       class: vue.normalizeClass(_ctx.nsSelect.e("selected-item"))
                     }, [
                       vue.createVNode(_component_el_tag, {
                         closable: false,
                         size: _ctx.collapseTagSize,
                         type: _ctx.tagType,
-                        style: vue.normalizeStyle(_ctx.tagStyle),
+                        style: vue.normalizeStyle(_ctx.collapseTagStyle),
                         "disable-transitions": ""
                       }, {
                         default: vue.withCtx(() => [
@@ -40053,7 +40122,6 @@
                   spellcheck: "false",
                   type: "text",
                   name: _ctx.name,
-                  unselectable: _ctx.expanded ? "on" : void 0,
                   onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
                   onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
                   onInput: _cache[3] || (_cache[3] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
@@ -40067,8 +40135,7 @@
                     _cache[10] || (_cache[10] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleEsc && _ctx.handleEsc(...args), ["stop", "prevent"]), ["esc"])),
                     _cache[11] || (_cache[11] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleDel && _ctx.handleDel(...args), ["stop"]), ["delete"]))
                   ],
-                  onClick: _cache[12] || (_cache[12] = vue.withModifiers(() => {
-                  }, ["stop"]))
+                  onClick: _cache[12] || (_cache[12] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
                 }, null, 46, _hoisted_1$i), [
                   [vue.vModelText, _ctx.states.inputValue]
                 ]),
@@ -40135,19 +40202,54 @@
             width: _ctx.popperSize,
             "hovering-index": _ctx.states.hoveringIndex,
             "scrollbar-always-on": _ctx.scrollbarAlwaysOn
-          }, {
+          }, vue.createSlots({
             default: vue.withCtx((scope) => [
               vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(scope)))
             ]),
-            empty: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "empty", {}, () => [
-                vue.createElementVNode("p", {
+            _: 2
+          }, [
+            _ctx.$slots.header ? {
+              name: "header",
+              fn: vue.withCtx(() => [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "header"))
+                }, [
+                  vue.renderSlot(_ctx.$slots, "header")
+                ], 2)
+              ])
+            } : void 0,
+            _ctx.$slots.loading && _ctx.loading ? {
+              name: "loading",
+              fn: vue.withCtx(() => [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
+                }, [
+                  vue.renderSlot(_ctx.$slots, "loading")
+                ], 2)
+              ])
+            } : _ctx.loading || _ctx.filteredOptions.length === 0 ? {
+              name: "empty",
+              fn: vue.withCtx(() => [
+                vue.createElementVNode("div", {
                   class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
-                }, vue.toDisplayString(_ctx.emptyText ? _ctx.emptyText : ""), 3)
+                }, [
+                  vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+                    vue.createElementVNode("span", null, vue.toDisplayString(_ctx.emptyText), 1)
+                  ])
+                ], 2)
               ])
-            ]),
-            _: 3
-          }, 8, ["data", "width", "hovering-index", "scrollbar-always-on"])
+            } : void 0,
+            _ctx.$slots.footer ? {
+              name: "footer",
+              fn: vue.withCtx(() => [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "footer"))
+                }, [
+                  vue.renderSlot(_ctx.$slots, "footer")
+                ], 2)
+              ])
+            } : void 0
+          ]), 1032, ["data", "width", "hovering-index", "scrollbar-always-on"])
         ]),
         _: 3
       }, 8, ["visible", "teleported", "popper-class", "popper-options", "effect", "placement", "transition", "persistent", "onBeforeShow"])
@@ -41231,19 +41333,18 @@
     const horizontalSize = vue.ref(0);
     const verticalSize = vue.ref(0);
     const containerStyle = vue.computed(() => {
-      const wrapKls = props.wrap || props.fill ? { flexWrap: "wrap", marginBottom: `-${verticalSize.value}px` } : {};
+      const wrapKls = props.wrap || props.fill ? { flexWrap: "wrap" } : {};
       const alignment = {
         alignItems: props.alignment
       };
-      return [wrapKls, alignment, props.style];
+      const gap = {
+        rowGap: `${verticalSize.value}px`,
+        columnGap: `${horizontalSize.value}px`
+      };
+      return [wrapKls, alignment, gap, props.style];
     });
     const itemStyle = vue.computed(() => {
-      const itemBaseStyle = {
-        paddingBottom: `${verticalSize.value}px`,
-        marginRight: `${horizontalSize.value}px`
-      };
-      const fillStyle = props.fill ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } : {};
-      return [itemBaseStyle, fillStyle];
+      return props.fill ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } : {};
     });
     vue.watchEffect(() => {
       const { size = "small", wrap, direction: dir, fill } = props;
@@ -42239,54 +42340,6 @@
 
   const ElSwitch = withInstall(Switch);
 
-  var matchHtmlRegExp = /["'&<>]/;
-  var escapeHtml_1 = escapeHtml;
-  function escapeHtml(string) {
-    var str = "" + string;
-    var match = matchHtmlRegExp.exec(str);
-    if (!match) {
-      return str;
-    }
-    var escape;
-    var html = "";
-    var index = 0;
-    var lastIndex = 0;
-    for (index = match.index; index < str.length; index++) {
-      switch (str.charCodeAt(index)) {
-        case 34:
-          escape = "&quot;";
-          break;
-        case 38:
-          escape = "&amp;";
-          break;
-        case 39:
-          escape = "&#39;";
-          break;
-        case 60:
-          escape = "&lt;";
-          break;
-        case 62:
-          escape = "&gt;";
-          break;
-        default:
-          continue;
-      }
-      if (lastIndex !== index) {
-        html += str.substring(lastIndex, index);
-      }
-      lastIndex = index + 1;
-      html += escape;
-    }
-    return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
-  }
-  /*!
-   * escape-html
-   * Copyright(c) 2012-2013 TJ Holowaychuk
-   * Copyright(c) 2015 Andreas Lubbe
-   * Copyright(c) 2015 Tiancheng "Timothy" Gu
-   * MIT Licensed
-   */
-
   const getCell = function(event) {
     var _a;
     return (_a = event.target) == null ? void 0 : _a.closest("td");
@@ -42514,112 +42567,45 @@
       }
     });
   }
-  let removePopper;
-  function createTablePopper(parentNode, trigger, popperContent, nextZIndex, tooltipOptions) {
-    tooltipOptions = merge({
-      enterable: true,
-      showArrow: true
-    }, tooltipOptions);
-    const ns = parentNode == null ? void 0 : parentNode.dataset.prefix;
-    const scrollContainer = parentNode == null ? void 0 : parentNode.querySelector(`.${ns}-scrollbar__wrap`);
-    function renderContent() {
-      const isLight = tooltipOptions.effect === "light";
-      const content2 = document.createElement("div");
-      content2.className = [
-        `${ns}-popper`,
-        isLight ? "is-light" : "is-dark",
-        tooltipOptions.popperClass || ""
-      ].join(" ");
-      popperContent = escapeHtml_1(popperContent);
-      content2.innerHTML = popperContent;
-      content2.style.zIndex = String(nextZIndex());
-      parentNode == null ? void 0 : parentNode.appendChild(content2);
-      return content2;
-    }
-    function renderArrow() {
-      const arrow = document.createElement("div");
-      arrow.className = `${ns}-popper__arrow`;
-      return arrow;
-    }
-    function togglePopperVisible(display) {
-      return {
-        name: "updateState",
-        enabled: true,
-        phase: "beforeWrite",
-        fn: ({ state }) => {
-          state.styles.popper.display = display;
-        },
-        requires: ["computeStyles"]
-      };
-    }
-    function showPopper() {
-      if (tooltipOptions.showAfter) {
-        popperInstance == null ? void 0 : popperInstance.setOptions({
-          modifiers: [togglePopperVisible("block")]
-        });
-      }
-      popperInstance == null ? void 0 : popperInstance.update();
+  let removePopper = null;
+  function createTablePopper(props, popperContent, trigger, table) {
+    if ((removePopper == null ? void 0 : removePopper.trigger) === trigger) {
+      return;
     }
-    const triggerChanged = (removePopper == null ? void 0 : removePopper.trigger) !== trigger;
     removePopper == null ? void 0 : removePopper();
-    removePopper = () => {
-      try {
-        popperInstance && popperInstance.destroy();
-        content && (parentNode == null ? void 0 : parentNode.removeChild(content));
-        trigger.removeEventListener("mouseenter", onOpen);
-        trigger.removeEventListener("mouseleave", onClose);
-        scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", removePopper);
-        removePopper = void 0;
-      } catch (e) {
+    const parentNode = table == null ? void 0 : table.refs.tableWrapper;
+    const ns = parentNode == null ? void 0 : parentNode.dataset.prefix;
+    const popperOptions = {
+      strategy: "fixed",
+      ...props.popperOptions
+    };
+    const vm = vue.createVNode(ElTooltip, {
+      content: popperContent,
+      virtualTriggering: true,
+      virtualRef: trigger,
+      appendTo: parentNode,
+      placement: "top",
+      transition: "none",
+      offset: 0,
+      hideAfter: 0,
+      ...props,
+      popperOptions,
+      onHide: () => {
+        removePopper == null ? void 0 : removePopper();
       }
+    });
+    vm.appContext = table.appContext;
+    const container = document.createElement("div");
+    vue.render(vm, container);
+    vm.component.exposed.onOpen();
+    const scrollContainer = parentNode == null ? void 0 : parentNode.querySelector(`.${ns}-scrollbar__wrap`);
+    removePopper = () => {
+      vue.render(null, container);
+      scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", removePopper);
+      removePopper = null;
     };
     removePopper.trigger = trigger;
-    let popperInstance = null;
-    const { onOpen, onClose } = useDelayedToggle({
-      showAfter: tooltipOptions.showAfter,
-      hideAfter: tooltipOptions.hideAfter,
-      open: showPopper,
-      close: removePopper
-    });
-    const content = renderContent();
-    if (tooltipOptions.enterable) {
-      content.onmouseenter = onOpen;
-      content.onmouseleave = onClose;
-    }
-    const modifiers = [];
-    if (tooltipOptions.offset) {
-      modifiers.push({
-        name: "offset",
-        options: {
-          offset: [0, tooltipOptions.offset]
-        }
-      });
-    }
-    if (tooltipOptions.showArrow) {
-      const arrow = content.appendChild(renderArrow());
-      modifiers.push({
-        name: "arrow",
-        options: {
-          element: arrow,
-          padding: 10
-        }
-      });
-    }
-    if (tooltipOptions.showAfter && triggerChanged) {
-      modifiers.push(togglePopperVisible("none"));
-    }
-    const popperOptions = tooltipOptions.popperOptions || {};
-    popperInstance = yn(trigger, content, {
-      placement: tooltipOptions.placement || "top",
-      strategy: "fixed",
-      ...popperOptions,
-      modifiers: popperOptions.modifiers ? modifiers.concat(popperOptions.modifiers) : modifiers
-    });
-    trigger.addEventListener("mouseenter", onOpen);
-    trigger.addEventListener("mouseleave", onClose);
     scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", removePopper);
-    onOpen();
-    return popperInstance;
   }
   function getCurrentColumns(column) {
     if (column.children) {
@@ -44705,7 +44691,6 @@
     const parent = vue.inject(TABLE_INJECTION_KEY);
     const tooltipContent = vue.ref("");
     const tooltipTrigger = vue.ref(vue.h("div"));
-    const { nextZIndex } = useZIndex();
     const handleEvent = (event, row, name) => {
       var _a;
       const table = parent;
@@ -44787,7 +44772,7 @@
       const horizontalPadding = left + right;
       const verticalPadding = top + bottom;
       if (rangeWidth + horizontalPadding > cellChild.offsetWidth || rangeHeight + verticalPadding > cellChild.offsetHeight || cellChild.scrollWidth > cellChild.offsetWidth) {
-        createTablePopper(parent == null ? void 0 : parent.refs.tableWrapper, cell, cell.innerText || cell.textContent, nextZIndex, tooltipOptions);
+        createTablePopper(tooltipOptions, cell.innerText || cell.textContent, cell, table);
       }
     };
     const handleCellMouseLeave = (event) => {
@@ -51569,10 +51554,19 @@
       }
     }
     _setCheckedKeys(key, leafOnly = false, checkedKeys) {
-      const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level);
+      const allNodes = this._getAllNodes().sort((a, b) => a.level - b.level);
       const cache = /* @__PURE__ */ Object.create(null);
       const keys = Object.keys(checkedKeys);
       allNodes.forEach((node) => node.setChecked(false, false));
+      const cacheCheckedChild = (node) => {
+        node.childNodes.forEach((child) => {
+          var _a;
+          cache[child.data[key]] = true;
+          if ((_a = child.childNodes) == null ? void 0 : _a.length) {
+            cacheCheckedChild(child);
+          }
+        });
+      };
       for (let i = 0, j = allNodes.length; i < j; i++) {
         const node = allNodes[i];
         const nodeKey = node.data[key].toString();
@@ -51583,10 +51577,8 @@
           }
           continue;
         }
-        let parent = node.parent;
-        while (parent && parent.level > 0) {
-          cache[parent.data[key]] = true;
-          parent = parent.parent;
+        if (node.childNodes.length) {
+          cacheCheckedChild(node);
         }
         if (node.isLeaf || this.checkStrictly) {
           node.setChecked(true, false);
@@ -55030,15 +55022,27 @@
 
   const useTarget = (target, open, gap, mergedMask, scrollIntoViewOptions) => {
     const posInfo = vue.ref(null);
+    const getTargetEl = () => {
+      let targetEl;
+      if (isString$1(target.value)) {
+        targetEl = document.querySelector(target.value);
+      } else if (isFunction$1(target.value)) {
+        targetEl = target.value();
+      } else {
+        targetEl = target.value;
+      }
+      return targetEl;
+    };
     const updatePosInfo = () => {
-      if (!target.value || !open.value) {
+      const targetEl = getTargetEl();
+      if (!targetEl || !open.value) {
         posInfo.value = null;
         return;
       }
-      if (!isInViewPort(target.value) && open.value) {
-        target.value.scrollIntoView(scrollIntoViewOptions.value);
+      if (!isInViewPort(targetEl) && open.value) {
+        targetEl.scrollIntoView(scrollIntoViewOptions.value);
       }
-      const { left, top, width, height } = target.value.getBoundingClientRect();
+      const { left, top, width, height } = targetEl.getBoundingClientRect();
       posInfo.value = {
         left,
         top,
@@ -55078,8 +55082,9 @@
       };
     });
     const triggerTarget = vue.computed(() => {
-      if (!mergedMask.value || !target.value || !window.DOMRect) {
-        return target.value || void 0;
+      const targetEl = getTargetEl();
+      if (!mergedMask.value || !targetEl || !window.DOMRect) {
+        return targetEl || void 0;
       }
       return {
         getBoundingClientRect() {
@@ -55673,7 +55678,7 @@
 
   const tourStepProps = buildProps({
     target: {
-      type: definePropType(Object)
+      type: definePropType([String, Object, Function])
     },
     title: String,
     description: String,