element-plus 2.2.19 → 2.2.21

package/dist/index.full.mjs

@@ -1,6 +1,6 @@
-/*! Element Plus v2.2.19 */
+/*! Element Plus v2.2.21 */
 
-import { getCurrentScope, onScopeDispose, unref, readonly, shallowRef, watchEffect, ref, watch, getCurrentInstance, onMounted, nextTick, computed as computed$1, openBlock, createElementBlock, createElementVNode, warn, isVNode, Fragment, Comment, inject, provide, onBeforeUnmount, toRef, onUnmounted, isRef, h as h$1, Teleport, onBeforeMount, defineComponent, normalizeClass, normalizeStyle, renderSlot, mergeProps, useSlots, createBlock, Transition, withCtx, withDirectives, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, vShow, useAttrs as useAttrs$1, withModifiers, reactive, onUpdated, cloneVNode, Text, onDeactivated, renderList, withKeys, createSlots, toRefs, normalizeProps, toRaw as toRaw$1, vModelCheckbox, vModelRadio, resolveComponent, onBeforeUpdate, resolveDirective, vModelText, toHandlers, guardReactiveProps, markRaw, effectScope, triggerRef, shallowReactive, TransitionGroup, createApp, render } from 'vue';
+import { getCurrentScope, onScopeDispose, unref, readonly, shallowRef, watchEffect, ref, watch, getCurrentInstance, onMounted, nextTick, computed as computed$1, openBlock, createElementBlock, createElementVNode, warn, isVNode, Fragment, Comment, inject, provide, onBeforeUnmount, toRef, onUnmounted, isRef, h as h$1, Teleport, onBeforeMount, defineComponent, normalizeClass, normalizeStyle, renderSlot, mergeProps, useSlots, createBlock, Transition, withCtx, withDirectives, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, vShow, useAttrs as useAttrs$1, withModifiers, reactive, onUpdated, cloneVNode, Text, onDeactivated, renderList, withKeys, createSlots, toRefs, normalizeProps, toRaw as toRaw$1, vModelCheckbox, vModelRadio, resolveComponent, onBeforeUpdate, resolveDirective, vModelText, toHandlers, guardReactiveProps, markRaw, effectScope, triggerRef, TransitionGroup, createApp, shallowReactive, render } from 'vue';
 
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
 
@@ -7181,6 +7181,27 @@ const globalKey = "__vueuse_ssr_handlers__";
 _global[globalKey] = _global[globalKey] || {};
 _global[globalKey];
 
+function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } = {}) {
+  const variable = ref(initialValue);
+  const elRef = computed$1(() => {
+    var _a;
+    return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+  });
+  watch([elRef, () => resolveUnref(prop)], ([el, prop2]) => {
+    var _a;
+    if (el && window) {
+      const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim();
+      variable.value = value || initialValue;
+    }
+  }, { immediate: true });
+  watch(variable, (val) => {
+    var _a;
+    if ((_a = elRef.value) == null ? void 0 : _a.style)
+      elRef.value.style.setProperty(resolveUnref(prop), val);
+  });
+  return variable;
+}
+
 function useDocumentVisibility({ document = defaultDocument } = {}) {
   if (!document)
     return ref("visible");
@@ -7518,6 +7539,12 @@ const isElement$1 = (e) => {
 const isPropAbsent = (prop) => {
   return isNil(prop);
 };
+const isStringNumber = (val) => {
+  if (!isString(val)) {
+    return false;
+  }
+  return !Number.isNaN(Number(val));
+};
 
 const escapeStringRegexp = (string = "") => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
 const capitalize = (str) => capitalize$1(str);
@@ -7585,10 +7612,10 @@ const getStyle = (element, styleName) => {
 function addUnit(value, defaultUnit = "px") {
   if (!value)
     return "";
-  if (isString(value)) {
-    return value;
-  } else if (isNumber(value)) {
+  if (isNumber(value) || isStringNumber(value)) {
     return `${value}${defaultUnit}`;
+  } else if (isString(value)) {
+    return value;
   }
 }
 
@@ -8691,12 +8718,16 @@ const flattedChildren = (children) => {
   const vNodes = isArray(children) ? children : [children];
   const result = [];
   vNodes.forEach((child) => {
+    var _a;
     if (isArray(child)) {
       result.push(...flattedChildren(child));
     } else if (isVNode(child) && isArray(child.children)) {
       result.push(...flattedChildren(child.children));
     } else {
       result.push(child);
+      if (isVNode(child) && ((_a = child.component) == null ? void 0 : _a.subTree)) {
+        result.push(...flattedChildren(child.component.subTree));
+      }
     }
   });
   return result;
@@ -11068,7 +11099,7 @@ const useOrderedChildren = (vm, childComponentName) => {
   };
 };
 
-const version$1 = "2.2.19";
+const version$1 = "2.2.21";
 
 const makeInstaller = (components = []) => {
   const install = (app, options) => {
@@ -11117,9 +11148,9 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-const COMPONENT_NAME$k = "ElAffix";
+const COMPONENT_NAME$l = "ElAffix";
 const __default__$1w = defineComponent({
-  name: COMPONENT_NAME$k
+  name: COMPONENT_NAME$l
 });
 const _sfc_main$2f = /* @__PURE__ */ defineComponent({
   ...__default__$1w,
@@ -11152,7 +11183,7 @@ const _sfc_main$2f = /* @__PURE__ */ defineComponent({
     const affixStyle = computed$1(() => {
       if (!fixed.value)
         return {};
-      const offset = props.offset ? `${props.offset}px` : 0;
+      const offset = props.offset ? addUnit(props.offset) : 0;
       return {
         height: `${rootHeight.value}px`,
         width: `${rootWidth.value}px`,
@@ -11195,7 +11226,7 @@ const _sfc_main$2f = /* @__PURE__ */ defineComponent({
       if (props.target) {
         target.value = (_a = document.querySelector(props.target)) != null ? _a : void 0;
         if (!target.value)
-          throwError(COMPONENT_NAME$k, `Target is not existed: ${props.target}`);
+          throwError(COMPONENT_NAME$l, `Target is not existed: ${props.target}`);
       } else {
         target.value = document.documentElement;
       }
@@ -11576,7 +11607,7 @@ const inputEmits = {
 
 const _hoisted_1$13 = ["role"];
 const _hoisted_2$G = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form"];
-const _hoisted_3$l = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"];
+const _hoisted_3$k = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"];
 const __default__$1t = defineComponent({
   name: "ElInput",
   inheritAttrs: false
@@ -11967,7 +11998,7 @@ const _sfc_main$2c = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onChange: handleChange,
             onKeydown: handleKeydown
-          }), null, 16, _hoisted_3$l),
+          }), null, 16, _hoisted_3$k),
           unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
             key: 0,
             style: normalizeStyle(countStyle.value),
@@ -12027,7 +12058,7 @@ const thumbProps = buildProps({
   always: Boolean
 });
 
-const COMPONENT_NAME$j = "Thumb";
+const COMPONENT_NAME$k = "Thumb";
 const _sfc_main$2b = /* @__PURE__ */ defineComponent({
   __name: "thumb",
   props: thumbProps,
@@ -12036,7 +12067,7 @@ const _sfc_main$2b = /* @__PURE__ */ defineComponent({
     const scrollbar = inject(scrollbarContextKey);
     const ns = useNamespace("scrollbar");
     if (!scrollbar)
-      throwError(COMPONENT_NAME$j, "can not inject scrollbar context");
+      throwError(COMPONENT_NAME$k, "can not inject scrollbar context");
     const instance = ref();
     const thumb = ref();
     const thumbState = ref({});
@@ -12757,6 +12788,10 @@ const tryFocus = (element, shouldSelect) => {
     element.focus({ preventScroll: true });
     lastAutomatedFocusTimestamp.value = window.performance.now();
     if (element !== prevFocusedElement && isSelectable(element) && shouldSelect) {
+      if (element.tagName === "INPUT") {
+        element.setSelectionRange(element.value.length, element.value.length);
+        return;
+      }
       element.select();
     }
   }
@@ -13221,8 +13256,7 @@ function genModifiers(options) {
     {
       name: "computeStyles",
       options: {
-        gpuAcceleration,
-        adaptive: gpuAcceleration
+        gpuAcceleration
       }
     }
   ];
@@ -13498,13 +13532,6 @@ const useTooltipProps = buildProps({
   ...useTooltipContentProps,
   ...useTooltipTriggerProps,
   ...popperArrowProps,
-  openDelay: {
-    type: Number
-  },
-  visibleArrow: {
-    type: Boolean,
-    default: void 0
-  },
   showArrow: {
     type: Boolean,
     default: true
@@ -13767,14 +13794,6 @@ const _sfc_main$21 = /* @__PURE__ */ defineComponent({
   setup(__props, { expose, emit }) {
     const props = __props;
     usePopperContainer();
-    const compatShowAfter = computed$1(() => {
-      if (!isUndefined(props.openDelay)) ;
-      return props.openDelay || props.showAfter;
-    });
-    const compatShowArrow = computed$1(() => {
-      if (!isUndefined(props.visibleArrow)) ;
-      return isBoolean(props.visibleArrow) ? props.visibleArrow : props.showArrow;
-    });
     const id = useId();
     const popperRef = ref();
     const contentRef = ref();
@@ -13792,7 +13811,7 @@ const _sfc_main$21 = /* @__PURE__ */ defineComponent({
       toggleReason
     });
     const { onOpen, onClose } = useDelayedToggle({
-      showAfter: compatShowAfter,
+      showAfter: toRef(props, "showAfter"),
       hideAfter: toRef(props, "hideAfter"),
       open: show,
       close: hide
@@ -13891,7 +13910,7 @@ const _sfc_main$21 = /* @__PURE__ */ defineComponent({
             "raw-content": _ctx.rawContent,
             "reference-el": _ctx.referenceEl,
             "trigger-target-el": _ctx.triggerTargetEl,
-            "show-after": unref(compatShowAfter),
+            "show-after": _ctx.showAfter,
             strategy: _ctx.strategy,
             teleported: _ctx.teleported,
             transition: _ctx.transition,
@@ -13906,7 +13925,7 @@ const _sfc_main$21 = /* @__PURE__ */ defineComponent({
                   innerHTML: _ctx.content
                 }, null, 8, _hoisted_1$12)) : (openBlock(), createElementBlock("span", _hoisted_2$F, toDisplayString(_ctx.content), 1))
               ]),
-              unref(compatShowArrow) ? (openBlock(), createBlock(unref(ElPopperArrow), {
+              _ctx.showArrow ? (openBlock(), createBlock(unref(ElPopperArrow), {
                 key: 0,
                 "arrow-offset": _ctx.arrowOffset
               }, null, 8, ["arrow-offset"])) : createCommentVNode("v-if", true)
@@ -13993,10 +14012,10 @@ const autocompleteEmits = {
 
 const _hoisted_1$11 = ["aria-expanded", "aria-owns"];
 const _hoisted_2$E = { key: 0 };
-const _hoisted_3$k = ["id", "aria-selected", "onClick"];
-const COMPONENT_NAME$i = "ElAutocomplete";
+const _hoisted_3$j = ["id", "aria-selected", "onClick"];
+const COMPONENT_NAME$j = "ElAutocomplete";
 const __default__$1k = defineComponent({
-  name: COMPONENT_NAME$i,
+  name: COMPONENT_NAME$j,
   inheritAttrs: false
 });
 const _sfc_main$20 = /* @__PURE__ */ defineComponent({
@@ -14058,7 +14077,7 @@ const _sfc_main$20 = /* @__PURE__ */ defineComponent({
           suggestions.value = suggestionList;
           highlightedIndex.value = props.highlightFirstItem ? 0 : -1;
         } else {
-          throwError(COMPONENT_NAME$i, "autocomplete suggestions must be an array");
+          throwError(COMPONENT_NAME$j, "autocomplete suggestions must be an array");
         }
       };
       loading.value = true;
@@ -14256,7 +14275,7 @@ const _sfc_main$20 = /* @__PURE__ */ defineComponent({
                     renderSlot(_ctx.$slots, "default", { item }, () => [
                       createTextVNode(toDisplayString(item[_ctx.valueKey]), 1)
                     ])
-                  ], 10, _hoisted_3$k);
+                  ], 10, _hoisted_3$j);
                 }), 128))
               ]),
               _: 3
@@ -14494,9 +14513,9 @@ const useBackTop = (props, emit, componentName) => {
   };
 };
 
-const COMPONENT_NAME$h = "ElBacktop";
+const COMPONENT_NAME$i = "ElBacktop";
 const __default__$1i = defineComponent({
-  name: COMPONENT_NAME$h
+  name: COMPONENT_NAME$i
 });
 const _sfc_main$1_ = /* @__PURE__ */ defineComponent({
   ...__default__$1i,
@@ -14505,7 +14524,7 @@ const _sfc_main$1_ = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const ns = useNamespace("backtop");
-    const { handleClick, visible } = useBackTop(props, emit, COMPONENT_NAME$h);
+    const { handleClick, visible } = useBackTop(props, emit, COMPONENT_NAME$i);
     const backTopStyle = computed$1(() => ({
       right: `${props.right}px`,
       bottom: `${props.bottom}px`
@@ -18386,9 +18405,32 @@ const _sfc_main$1Q = /* @__PURE__ */ defineComponent({
 });
 var DateTable$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1Q, [["__file", "date-table.vue"]]);
 
+const adjacentMonth = (start, end) => {
+  const firstMonthLastDay = start.endOf("month");
+  const lastMonthFirstDay = end.startOf("month");
+  const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, "week");
+  const lastMonthStartDay = isSameWeek ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
+  return [
+    [start, firstMonthLastDay],
+    [lastMonthStartDay.startOf("week"), end]
+  ];
+};
+const threeConsecutiveMonth = (start, end) => {
+  const firstMonthLastDay = start.endOf("month");
+  const secondMonthFirstDay = start.add(1, "month").startOf("month");
+  const secondMonthStartDay = firstMonthLastDay.isSame(secondMonthFirstDay, "week") ? secondMonthFirstDay.add(1, "week") : secondMonthFirstDay;
+  const secondMonthLastDay = secondMonthStartDay.endOf("month");
+  const lastMonthFirstDay = end.startOf("month");
+  const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, "week") ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
+  return [
+    [start, firstMonthLastDay],
+    [secondMonthStartDay.startOf("week"), secondMonthLastDay],
+    [lastMonthStartDay.startOf("week"), end]
+  ];
+};
 const useCalendar = (props, emit, componentName) => {
-  const solts = useSlots();
-  const { t, lang } = useLocale();
+  const slots = useSlots();
+  const { lang } = useLocale();
   const selectedDay = ref();
   const now = dayjs().locale(lang.value);
   const realSelectedDay = computed$1({
@@ -18425,12 +18467,7 @@ const useCalendar = (props, emit, componentName) => {
   });
   const date = computed$1(() => {
     if (!props.modelValue) {
-      if (realSelectedDay.value) {
-        return realSelectedDay.value;
-      } else if (validatedRange.value.length) {
-        return validatedRange.value[0][0];
-      }
-      return now;
+      return realSelectedDay.value || (validatedRange.value.length ? validatedRange.value[0][0] : now);
     } else {
       return dayjs(props.modelValue).locale(lang.value);
     }
@@ -18439,10 +18476,6 @@ const useCalendar = (props, emit, componentName) => {
   const nextMonthDayjs = computed$1(() => date.value.add(1, "month").date(1));
   const prevYearDayjs = computed$1(() => date.value.subtract(1, "year").date(1));
   const nextYearDayjs = computed$1(() => date.value.add(1, "year").date(1));
-  const i18nDate = computed$1(() => {
-    const pickedMonth = `el.datepicker.month${date.value.format("M")}`;
-    return `${date.value.year()} ${t("el.datepicker.year")} ${t(pickedMonth)}`;
-  });
   const calculateValidatedDateRange = (startDayjs, endDayjs) => {
     const firstDay = startDayjs.startOf("week");
     const lastDay = endDayjs.endOf("week");
@@ -18450,27 +18483,10 @@ const useCalendar = (props, emit, componentName) => {
     const lastMonth = lastDay.get("month");
     if (firstMonth === lastMonth) {
       return [[firstDay, lastDay]];
-    } else if (firstMonth + 1 === lastMonth) {
-      const firstMonthLastDay = firstDay.endOf("month");
-      const lastMonthFirstDay = lastDay.startOf("month");
-      const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, "week");
-      const lastMonthStartDay = isSameWeek ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
-      return [
-        [firstDay, firstMonthLastDay],
-        [lastMonthStartDay.startOf("week"), lastDay]
-      ];
+    } else if ((firstMonth + 1) % 12 === lastMonth) {
+      return adjacentMonth(firstDay, lastDay);
     } else if (firstMonth + 2 === lastMonth || (firstMonth + 1) % 11 === lastMonth) {
-      const firstMonthLastDay = firstDay.endOf("month");
-      const secondMonthFirstDay = firstDay.add(1, "month").startOf("month");
-      const secondMonthStartDay = firstMonthLastDay.isSame(secondMonthFirstDay, "week") ? secondMonthFirstDay.add(1, "week") : secondMonthFirstDay;
-      const secondMonthLastDay = secondMonthStartDay.endOf("month");
-      const lastMonthFirstDay = lastDay.startOf("month");
-      const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, "week") ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
-      return [
-        [firstDay, firstMonthLastDay],
-        [secondMonthStartDay.startOf("week"), secondMonthLastDay],
-        [lastMonthStartDay.startOf("week"), lastDay]
-      ];
+      return threeConsecutiveMonth(firstDay, lastDay);
     } else {
       return [];
     }
@@ -18498,16 +18514,14 @@ const useCalendar = (props, emit, componentName) => {
     version: "2.3.0",
     ref: "https://element-plus.org/en-US/component/calendar.html#slots",
     type: "Slot"
-  }, computed$1(() => !!solts.dateCell));
+  }, computed$1(() => !!slots.dateCell));
   return {
     calculateValidatedDateRange,
     date,
     realSelectedDay,
     pickDay,
     selectDate,
-    validatedRange,
-    t,
-    i18nDate
+    validatedRange
   };
 };
 
@@ -18526,9 +18540,9 @@ const calendarEmits = {
   [INPUT_EVENT]: (value) => isDate(value)
 };
 
-const COMPONENT_NAME$g = "ElCalendar";
+const COMPONENT_NAME$h = "ElCalendar";
 const __default__$1a = defineComponent({
-  name: COMPONENT_NAME$g
+  name: COMPONENT_NAME$h
 });
 const _sfc_main$1P = /* @__PURE__ */ defineComponent({
   ...__default__$1a,
@@ -18543,10 +18557,13 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
       pickDay,
       realSelectedDay,
       selectDate,
-      t,
-      i18nDate,
       validatedRange
     } = useCalendar(props, emit);
+    const { t } = useLocale();
+    const i18nDate = computed$1(() => {
+      const pickedMonth = `el.datepicker.month${date.value.format("M")}`;
+      return `${date.value.year()} ${t("el.datepicker.year")} ${t(pickedMonth)}`;
+    });
     expose({
       selectedDay: realSelectedDay,
       pickDay,
@@ -18758,12 +18775,208 @@ const carouselEmits = {
   change: (current, prev) => [current, prev].every(isNumber)
 };
 
-const _hoisted_1$V = ["onMouseenter", "onMouseleave"];
-const _hoisted_2$A = ["onMouseenter", "onClick"];
-const _hoisted_3$j = { key: 0 };
 const THROTTLE_TIME = 300;
+const useCarousel = (props, emit, componentName) => {
+  const {
+    children: items,
+    addChild: addItem,
+    removeChild: removeItem
+  } = useOrderedChildren(getCurrentInstance(), "ElCarouselItem");
+  const activeIndex = ref(-1);
+  const timer = ref(null);
+  const hover = ref(false);
+  const root = ref();
+  const arrowDisplay = computed$1(() => props.arrow !== "never" && !unref(isVertical));
+  const hasLabel = computed$1(() => {
+    return items.value.some((item) => item.props.label.toString().length > 0);
+  });
+  const isCardType = computed$1(() => props.type === "card");
+  const isVertical = computed$1(() => props.direction === "vertical");
+  const throttledArrowClick = throttle((index) => {
+    setActiveItem(index);
+  }, THROTTLE_TIME, { trailing: true });
+  const throttledIndicatorHover = throttle((index) => {
+    handleIndicatorHover(index);
+  }, THROTTLE_TIME);
+  function pauseTimer() {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+  }
+  function startTimer() {
+    if (props.interval <= 0 || !props.autoplay || timer.value)
+      return;
+    timer.value = setInterval(() => playSlides(), props.interval);
+  }
+  const playSlides = () => {
+    if (activeIndex.value < items.value.length - 1) {
+      activeIndex.value = activeIndex.value + 1;
+    } else if (props.loop) {
+      activeIndex.value = 0;
+    }
+  };
+  function setActiveItem(index) {
+    if (isString(index)) {
+      const filteredItems = items.value.filter((item) => item.props.name === index);
+      if (filteredItems.length > 0) {
+        index = items.value.indexOf(filteredItems[0]);
+      }
+    }
+    index = Number(index);
+    if (Number.isNaN(index) || index !== Math.floor(index)) {
+      return;
+    }
+    const itemCount = items.value.length;
+    const oldIndex = activeIndex.value;
+    if (index < 0) {
+      activeIndex.value = props.loop ? itemCount - 1 : 0;
+    } else if (index >= itemCount) {
+      activeIndex.value = props.loop ? 0 : itemCount - 1;
+    } else {
+      activeIndex.value = index;
+    }
+    if (oldIndex === activeIndex.value) {
+      resetItemPosition(oldIndex);
+    }
+    resetTimer();
+  }
+  function resetItemPosition(oldIndex) {
+    items.value.forEach((item, index) => {
+      item.translateItem(index, activeIndex.value, oldIndex);
+    });
+  }
+  function itemInStage(item, index) {
+    var _a, _b, _c, _d;
+    const _items = unref(items);
+    const itemCount = _items.length;
+    if (itemCount === 0 || !item.states.inStage)
+      return false;
+    const nextItemIndex = index + 1;
+    const prevItemIndex = index - 1;
+    const lastItemIndex = itemCount - 1;
+    const isLastItemActive = _items[lastItemIndex].states.active;
+    const isFirstItemActive = _items[0].states.active;
+    const isNextItemActive = (_b = (_a = _items[nextItemIndex]) == null ? void 0 : _a.states) == null ? void 0 : _b.active;
+    const isPrevItemActive = (_d = (_c = _items[prevItemIndex]) == null ? void 0 : _c.states) == null ? void 0 : _d.active;
+    if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
+      return "left";
+    } else if (index === 0 && isLastItemActive || isPrevItemActive) {
+      return "right";
+    }
+    return false;
+  }
+  function handleMouseEnter() {
+    hover.value = true;
+    if (props.pauseOnHover) {
+      pauseTimer();
+    }
+  }
+  function handleMouseLeave() {
+    hover.value = false;
+    startTimer();
+  }
+  function handleButtonEnter(arrow) {
+    if (unref(isVertical))
+      return;
+    items.value.forEach((item, index) => {
+      if (arrow === itemInStage(item, index)) {
+        item.states.hover = true;
+      }
+    });
+  }
+  function handleButtonLeave() {
+    if (unref(isVertical))
+      return;
+    items.value.forEach((item) => {
+      item.states.hover = false;
+    });
+  }
+  function handleIndicatorClick(index) {
+    activeIndex.value = index;
+  }
+  function handleIndicatorHover(index) {
+    if (props.trigger === "hover" && index !== activeIndex.value) {
+      activeIndex.value = index;
+    }
+  }
+  function prev() {
+    setActiveItem(activeIndex.value - 1);
+  }
+  function next() {
+    setActiveItem(activeIndex.value + 1);
+  }
+  function resetTimer() {
+    pauseTimer();
+    startTimer();
+  }
+  watch(() => activeIndex.value, (current, prev2) => {
+    resetItemPosition(prev2);
+    if (prev2 > -1) {
+      emit("change", current, prev2);
+    }
+  });
+  watch(() => props.autoplay, (autoplay) => {
+    autoplay ? startTimer() : pauseTimer();
+  });
+  watch(() => props.loop, () => {
+    setActiveItem(activeIndex.value);
+  });
+  watch(() => props.interval, () => {
+    resetTimer();
+  });
+  watch(() => items.value, () => {
+    if (items.value.length > 0)
+      setActiveItem(props.initialIndex);
+  });
+  const resizeObserver = shallowRef();
+  onMounted(() => {
+    resizeObserver.value = useResizeObserver(root.value, () => {
+      resetItemPosition();
+    });
+    startTimer();
+  });
+  onBeforeUnmount(() => {
+    pauseTimer();
+    if (root.value && resizeObserver.value)
+      resizeObserver.value.stop();
+  });
+  provide(carouselContextKey, {
+    root,
+    isCardType,
+    isVertical,
+    items,
+    loop: props.loop,
+    addItem,
+    removeItem,
+    setActiveItem
+  });
+  return {
+    root,
+    activeIndex,
+    arrowDisplay,
+    hasLabel,
+    hover,
+    isCardType,
+    items,
+    handleButtonEnter,
+    handleButtonLeave,
+    handleIndicatorClick,
+    handleMouseEnter,
+    handleMouseLeave,
+    setActiveItem,
+    prev,
+    next,
+    throttledArrowClick,
+    throttledIndicatorHover
+  };
+};
+
+const _hoisted_1$V = ["onMouseenter", "onClick"];
+const _hoisted_2$A = { key: 0 };
+const COMPONENT_NAME$g = "ElCarousel";
 const __default__$18 = defineComponent({
-  name: "ElCarousel"
+  name: COMPONENT_NAME$g
 });
 const _sfc_main$1N = /* @__PURE__ */ defineComponent({
   ...__default__$18,
@@ -18771,20 +18984,26 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
   emits: carouselEmits,
   setup(__props, { expose, emit }) {
     const props = __props;
-    const ns = useNamespace("carousel");
     const {
-      children: items,
-      addChild: addItem,
-      removeChild: removeItem
-    } = useOrderedChildren(getCurrentInstance(), "ElCarouselItem");
-    const activeIndex = ref(-1);
-    const timer = ref(null);
-    const hover = ref(false);
-    const root = ref();
-    const arrowDisplay = computed$1(() => props.arrow !== "never" && !unref(isVertical));
-    const hasLabel = computed$1(() => {
-      return items.value.some((item) => item.props.label.toString().length > 0);
-    });
+      root,
+      activeIndex,
+      arrowDisplay,
+      hasLabel,
+      hover,
+      isCardType,
+      items,
+      handleButtonEnter,
+      handleButtonLeave,
+      handleIndicatorClick,
+      handleMouseEnter,
+      handleMouseLeave,
+      setActiveItem,
+      prev,
+      next,
+      throttledArrowClick,
+      throttledIndicatorHover
+    } = useCarousel(props, emit);
+    const ns = useNamespace("carousel");
     const carouselClasses = computed$1(() => {
       const classes = [ns.b(), ns.m(props.direction)];
       if (unref(isCardType)) {
@@ -18794,7 +19013,7 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
     });
     const indicatorsClasses = computed$1(() => {
       const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
-      if (hasLabel.value) {
+      if (unref(hasLabel)) {
         classes.push(ns.em("indicators", "labels"));
       }
       if (props.indicatorPosition === "outside" || unref(isCardType)) {
@@ -18802,167 +19021,6 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
       }
       return classes;
     });
-    const isCardType = computed$1(() => props.type === "card");
-    const isVertical = computed$1(() => props.direction === "vertical");
-    const throttledArrowClick = throttle((index) => {
-      setActiveItem(index);
-    }, THROTTLE_TIME, { trailing: true });
-    const throttledIndicatorHover = throttle((index) => {
-      handleIndicatorHover(index);
-    }, THROTTLE_TIME);
-    function pauseTimer() {
-      if (timer.value) {
-        clearInterval(timer.value);
-        timer.value = null;
-      }
-    }
-    function startTimer() {
-      if (props.interval <= 0 || !props.autoplay || timer.value)
-        return;
-      timer.value = setInterval(() => playSlides(), props.interval);
-    }
-    const playSlides = () => {
-      if (activeIndex.value < items.value.length - 1) {
-        activeIndex.value = activeIndex.value + 1;
-      } else if (props.loop) {
-        activeIndex.value = 0;
-      }
-    };
-    function setActiveItem(index) {
-      if (isString(index)) {
-        const filteredItems = items.value.filter((item) => item.props.name === index);
-        if (filteredItems.length > 0) {
-          index = items.value.indexOf(filteredItems[0]);
-        }
-      }
-      index = Number(index);
-      if (Number.isNaN(index) || index !== Math.floor(index)) {
-        return;
-      }
-      const itemCount = items.value.length;
-      const oldIndex = activeIndex.value;
-      if (index < 0) {
-        activeIndex.value = props.loop ? itemCount - 1 : 0;
-      } else if (index >= itemCount) {
-        activeIndex.value = props.loop ? 0 : itemCount - 1;
-      } else {
-        activeIndex.value = index;
-      }
-      if (oldIndex === activeIndex.value) {
-        resetItemPosition(oldIndex);
-      }
-      resetTimer();
-    }
-    function resetItemPosition(oldIndex) {
-      items.value.forEach((item, index) => {
-        item.translateItem(index, activeIndex.value, oldIndex);
-      });
-    }
-    function itemInStage(item, index) {
-      var _a, _b, _c, _d;
-      const _items = unref(items);
-      const itemCount = _items.length;
-      if (itemCount === 0 || !item.states.inStage)
-        return false;
-      const nextItemIndex = index + 1;
-      const prevItemIndex = index - 1;
-      const lastItemIndex = itemCount - 1;
-      const isLastItemActive = _items[lastItemIndex].states.active;
-      const isFirstItemActive = _items[0].states.active;
-      const isNextItemActive = (_b = (_a = _items[nextItemIndex]) == null ? void 0 : _a.states) == null ? void 0 : _b.active;
-      const isPrevItemActive = (_d = (_c = _items[prevItemIndex]) == null ? void 0 : _c.states) == null ? void 0 : _d.active;
-      if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
-        return "left";
-      } else if (index === 0 && isLastItemActive || isPrevItemActive) {
-        return "right";
-      }
-      return false;
-    }
-    function handleMouseEnter() {
-      hover.value = true;
-      if (props.pauseOnHover) {
-        pauseTimer();
-      }
-    }
-    function handleMouseLeave() {
-      hover.value = false;
-      startTimer();
-    }
-    function handleButtonEnter(arrow) {
-      if (unref(isVertical))
-        return;
-      items.value.forEach((item, index) => {
-        if (arrow === itemInStage(item, index)) {
-          item.states.hover = true;
-        }
-      });
-    }
-    function handleButtonLeave() {
-      if (unref(isVertical))
-        return;
-      items.value.forEach((item) => {
-        item.states.hover = false;
-      });
-    }
-    function handleIndicatorClick(index) {
-      activeIndex.value = index;
-    }
-    function handleIndicatorHover(index) {
-      if (props.trigger === "hover" && index !== activeIndex.value) {
-        activeIndex.value = index;
-      }
-    }
-    function prev() {
-      setActiveItem(activeIndex.value - 1);
-    }
-    function next() {
-      setActiveItem(activeIndex.value + 1);
-    }
-    function resetTimer() {
-      pauseTimer();
-      startTimer();
-    }
-    watch(() => activeIndex.value, (current, prev2) => {
-      resetItemPosition(prev2);
-      if (prev2 > -1) {
-        emit("change", current, prev2);
-      }
-    });
-    watch(() => props.autoplay, (autoplay) => {
-      autoplay ? startTimer() : pauseTimer();
-    });
-    watch(() => props.loop, () => {
-      setActiveItem(activeIndex.value);
-    });
-    watch(() => props.interval, () => {
-      resetTimer();
-    });
-    watch(() => items.value, () => {
-      if (items.value.length > 0)
-        setActiveItem(props.initialIndex);
-    });
-    const resizeObserver = shallowRef();
-    onMounted(() => {
-      resizeObserver.value = useResizeObserver(root.value, () => {
-        resetItemPosition();
-      });
-      startTimer();
-    });
-    onBeforeUnmount(() => {
-      pauseTimer();
-      if (root.value && resizeObserver.value)
-        resizeObserver.value.stop();
-    });
-    provide(carouselContextKey, {
-      root,
-      isCardType,
-      isVertical,
-      items,
-      loop: props.loop,
-      addItem,
-      removeItem,
-      setActiveItem
-    });
     expose({
       setActiveItem,
       prev,
@@ -18973,8 +19031,8 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
         ref_key: "root",
         ref: root,
         class: normalizeClass(unref(carouselClasses)),
-        onMouseenter: withModifiers(handleMouseEnter, ["stop"]),
-        onMouseleave: withModifiers(handleMouseLeave, ["stop"])
+        onMouseenter: _cache[6] || (_cache[6] = withModifiers((...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args), ["stop"])),
+        onMouseleave: _cache[7] || (_cache[7] = withModifiers((...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args), ["stop"]))
       }, [
         createElementVNode("div", {
           class: normalizeClass(unref(ns).e("container")),
@@ -18989,9 +19047,9 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
               withDirectives(createElementVNode("button", {
                 type: "button",
                 class: normalizeClass([unref(ns).e("arrow"), unref(ns).em("arrow", "left")]),
-                onMouseenter: _cache[0] || (_cache[0] = ($event) => handleButtonEnter("left")),
-                onMouseleave: handleButtonLeave,
-                onClick: _cache[1] || (_cache[1] = withModifiers(($event) => unref(throttledArrowClick)(activeIndex.value - 1), ["stop"]))
+                onMouseenter: _cache[0] || (_cache[0] = ($event) => unref(handleButtonEnter)("left")),
+                onMouseleave: _cache[1] || (_cache[1] = (...args) => unref(handleButtonLeave) && unref(handleButtonLeave)(...args)),
+                onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(throttledArrowClick)(unref(activeIndex) - 1), ["stop"]))
               }, [
                 createVNode(unref(ElIcon), null, {
                   default: withCtx(() => [
@@ -19002,7 +19060,7 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
               ], 34), [
                 [
                   vShow,
-                  (_ctx.arrow === "always" || hover.value) && (props.loop || activeIndex.value > 0)
+                  (_ctx.arrow === "always" || unref(hover)) && (props.loop || unref(activeIndex) > 0)
                 ]
               ])
             ]),
@@ -19017,9 +19075,9 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
               withDirectives(createElementVNode("button", {
                 type: "button",
                 class: normalizeClass([unref(ns).e("arrow"), unref(ns).em("arrow", "right")]),
-                onMouseenter: _cache[2] || (_cache[2] = ($event) => handleButtonEnter("right")),
-                onMouseleave: handleButtonLeave,
-                onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(throttledArrowClick)(activeIndex.value + 1), ["stop"]))
+                onMouseenter: _cache[3] || (_cache[3] = ($event) => unref(handleButtonEnter)("right")),
+                onMouseleave: _cache[4] || (_cache[4] = (...args) => unref(handleButtonLeave) && unref(handleButtonLeave)(...args)),
+                onClick: _cache[5] || (_cache[5] = withModifiers(($event) => unref(throttledArrowClick)(unref(activeIndex) + 1), ["stop"]))
               }, [
                 createVNode(unref(ElIcon), null, {
                   default: withCtx(() => [
@@ -19030,7 +19088,7 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
               ], 34), [
                 [
                   vShow,
-                  (_ctx.arrow === "always" || hover.value) && (props.loop || activeIndex.value < unref(items).length - 1)
+                  (_ctx.arrow === "always" || unref(hover)) && (props.loop || unref(activeIndex) < unref(items).length - 1)
                 ]
               ])
             ]),
@@ -19048,20 +19106,20 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
               class: normalizeClass([
                 unref(ns).e("indicator"),
                 unref(ns).em("indicator", _ctx.direction),
-                unref(ns).is("active", index === activeIndex.value)
+                unref(ns).is("active", index === unref(activeIndex))
               ]),
               onMouseenter: ($event) => unref(throttledIndicatorHover)(index),
-              onClick: withModifiers(($event) => handleIndicatorClick(index), ["stop"])
+              onClick: withModifiers(($event) => unref(handleIndicatorClick)(index), ["stop"])
             }, [
               createElementVNode("button", {
                 class: normalizeClass(unref(ns).e("button"))
               }, [
-                unref(hasLabel) ? (openBlock(), createElementBlock("span", _hoisted_3$j, toDisplayString(item.props.label), 1)) : createCommentVNode("v-if", true)
+                unref(hasLabel) ? (openBlock(), createElementBlock("span", _hoisted_2$A, toDisplayString(item.props.label), 1)) : createCommentVNode("v-if", true)
               ], 2)
-            ], 42, _hoisted_2$A);
+            ], 42, _hoisted_1$V);
           }), 128))
         ], 2)) : createCommentVNode("v-if", true)
-      ], 42, _hoisted_1$V);
+      ], 34);
     };
   }
 });
@@ -19075,7 +19133,113 @@ const carouselItemProps = buildProps({
   }
 });
 
-const CARD_SCALE = 0.83;
+const useCarouselItem = (props, componentName) => {
+  const carouselContext = inject(carouselContextKey);
+  const instance = getCurrentInstance();
+  const CARD_SCALE = 0.83;
+  const hover = ref(false);
+  const translate = ref(0);
+  const scale = ref(1);
+  const active = ref(false);
+  const ready = ref(false);
+  const inStage = ref(false);
+  const animating = ref(false);
+  const { isCardType, isVertical } = carouselContext;
+  function processIndex(index, activeIndex, length) {
+    const lastItemIndex = length - 1;
+    const prevItemIndex = activeIndex - 1;
+    const nextItemIndex = activeIndex + 1;
+    const halfItemIndex = length / 2;
+    if (activeIndex === 0 && index === lastItemIndex) {
+      return -1;
+    } else if (activeIndex === lastItemIndex && index === 0) {
+      return length;
+    } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
+      return length + 1;
+    } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
+      return -2;
+    }
+    return index;
+  }
+  function calcCardTranslate(index, activeIndex) {
+    var _a;
+    const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0;
+    if (inStage.value) {
+      return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
+    } else if (index < activeIndex) {
+      return -(1 + CARD_SCALE) * parentWidth / 4;
+    } else {
+      return (3 + CARD_SCALE) * parentWidth / 4;
+    }
+  }
+  function calcTranslate(index, activeIndex, isVertical2) {
+    const rootEl = carouselContext.root.value;
+    if (!rootEl)
+      return 0;
+    const distance = (isVertical2 ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
+    return distance * (index - activeIndex);
+  }
+  const translateItem = (index, activeIndex, oldIndex) => {
+    var _a;
+    const _isCardType = unref(isCardType);
+    const carouselItemLength = (_a = carouselContext.items.value.length) != null ? _a : Number.NaN;
+    const isActive = index === activeIndex;
+    if (!_isCardType && !isUndefined(oldIndex)) {
+      animating.value = isActive || index === oldIndex;
+    }
+    if (!isActive && carouselItemLength > 2 && carouselContext.loop) {
+      index = processIndex(index, activeIndex, carouselItemLength);
+    }
+    const _isVertical = unref(isVertical);
+    active.value = isActive;
+    if (_isCardType) {
+      inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
+      translate.value = calcCardTranslate(index, activeIndex);
+      scale.value = unref(active) ? 1 : CARD_SCALE;
+    } else {
+      translate.value = calcTranslate(index, activeIndex, _isVertical);
+    }
+    ready.value = true;
+  };
+  function handleItemClick() {
+    if (carouselContext && unref(isCardType)) {
+      const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
+      carouselContext.setActiveItem(index);
+    }
+  }
+  onMounted(() => {
+    carouselContext.addItem({
+      props,
+      states: reactive({
+        hover,
+        translate,
+        scale,
+        active,
+        ready,
+        inStage,
+        animating
+      }),
+      uid: instance.uid,
+      translateItem
+    });
+  });
+  onUnmounted(() => {
+    carouselContext.removeItem(instance.uid);
+  });
+  return {
+    active,
+    animating,
+    hover,
+    inStage,
+    isVertical,
+    translate,
+    isCardType,
+    scale,
+    ready,
+    handleItemClick
+  };
+};
+
 const __default__$17 = defineComponent({
   name: "ElCarouselItem"
 });
@@ -19085,16 +19249,18 @@ const _sfc_main$1M = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const ns = useNamespace("carousel");
-    const carouselContext = inject(carouselContextKey);
-    const instance = getCurrentInstance();
-    const hover = ref(false);
-    const translate = ref(0);
-    const scale = ref(1);
-    const active = ref(false);
-    const ready = ref(false);
-    const inStage = ref(false);
-    const animating = ref(false);
-    const { isCardType, isVertical } = carouselContext;
+    const {
+      active,
+      animating,
+      hover,
+      inStage,
+      isVertical,
+      translate,
+      isCardType,
+      scale,
+      ready,
+      handleItemClick
+    } = useCarouselItem(props);
     const itemStyle = computed$1(() => {
       const translateType = `translate${unref(isVertical) ? "Y" : "X"}`;
       const _translate = `${translateType}(${unref(translate)}px)`;
@@ -19104,109 +19270,28 @@ const _sfc_main$1M = /* @__PURE__ */ defineComponent({
         transform
       };
     });
-    function processIndex(index, activeIndex, length) {
-      const lastItemIndex = length - 1;
-      const prevItemIndex = activeIndex - 1;
-      const nextItemIndex = activeIndex + 1;
-      const halfItemIndex = length / 2;
-      if (activeIndex === 0 && index === lastItemIndex) {
-        return -1;
-      } else if (activeIndex === lastItemIndex && index === 0) {
-        return length;
-      } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
-        return length + 1;
-      } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
-        return -2;
-      }
-      return index;
-    }
-    function calcCardTranslate(index, activeIndex) {
-      var _a;
-      const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0;
-      if (inStage.value) {
-        return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
-      } else if (index < activeIndex) {
-        return -(1 + CARD_SCALE) * parentWidth / 4;
-      } else {
-        return (3 + CARD_SCALE) * parentWidth / 4;
-      }
-    }
-    function calcTranslate(index, activeIndex, isVertical2) {
-      const rootEl = carouselContext.root.value;
-      if (!rootEl)
-        return 0;
-      const distance = (isVertical2 ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
-      return distance * (index - activeIndex);
-    }
-    const translateItem = (index, activeIndex, oldIndex) => {
-      var _a;
-      const _isCardType = unref(isCardType);
-      const carouselItemLength = (_a = carouselContext.items.value.length) != null ? _a : Number.NaN;
-      const isActive = index === activeIndex;
-      if (!_isCardType && !isUndefined(oldIndex)) {
-        animating.value = isActive || index === oldIndex;
-      }
-      if (!isActive && carouselItemLength > 2 && carouselContext.loop) {
-        index = processIndex(index, activeIndex, carouselItemLength);
-      }
-      const _isVertical = unref(isVertical);
-      active.value = isActive;
-      if (_isCardType) {
-        inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
-        translate.value = calcCardTranslate(index, activeIndex);
-        scale.value = unref(active) ? 1 : CARD_SCALE;
-      } else {
-        translate.value = calcTranslate(index, activeIndex, _isVertical);
-      }
-      ready.value = true;
-    };
-    function handleItemClick() {
-      if (carouselContext && unref(isCardType)) {
-        const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
-        carouselContext.setActiveItem(index);
-      }
-    }
-    onMounted(() => {
-      carouselContext.addItem({
-        props,
-        states: reactive({
-          hover,
-          translate,
-          scale,
-          active,
-          ready,
-          inStage,
-          animating
-        }),
-        uid: instance.uid,
-        translateItem
-      });
-    });
-    onUnmounted(() => {
-      carouselContext.removeItem(instance.uid);
-    });
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
         class: normalizeClass([
           unref(ns).e("item"),
-          unref(ns).is("active", active.value),
-          unref(ns).is("in-stage", inStage.value),
-          unref(ns).is("hover", hover.value),
-          unref(ns).is("animating", animating.value),
+          unref(ns).is("active", unref(active)),
+          unref(ns).is("in-stage", unref(inStage)),
+          unref(ns).is("hover", unref(hover)),
+          unref(ns).is("animating", unref(animating)),
           { [unref(ns).em("item", "card")]: unref(isCardType) }
         ]),
         style: normalizeStyle(unref(itemStyle)),
-        onClick: handleItemClick
+        onClick: _cache[0] || (_cache[0] = (...args) => unref(handleItemClick) && unref(handleItemClick)(...args))
       }, [
         unref(isCardType) ? withDirectives((openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(unref(ns).e("mask"))
         }, null, 2)), [
-          [vShow, !active.value]
+          [vShow, !unref(active)]
         ]) : createCommentVNode("v-if", true),
         renderSlot(_ctx.$slots, "default")
       ], 6)), [
-        [vShow, ready.value]
+        [vShow, unref(ready)]
       ]);
     };
   }
@@ -19365,7 +19450,11 @@ const useCheckboxStatus = (props, slots, { model }) => {
     if (isBoolean(value)) {
       return value;
     } else if (isArray(value)) {
-      return value.map(toRaw$1).includes(props.label);
+      if (isObject$1(props.label)) {
+        return value.map(toRaw$1).some((o) => isEqual$1(o, props.label));
+      } else {
+        return value.map(toRaw$1).includes(props.label);
+      }
     } else if (value !== null && value !== void 0) {
       return value === props.trueLabel;
     } else {
@@ -20996,12 +21085,6 @@ var Tag = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__file", "tag.vue"]]);
 
 const ElTag = withInstall(Tag);
 
-const DEFAULT_INPUT_HEIGHT = 40;
-const INPUT_HEIGHT_MAP = {
-  large: 36,
-  default: 32,
-  small: 28
-};
 const popperOptions = {
   modifiers: [
     {
@@ -21115,6 +21198,7 @@ const _sfc_main$1B = defineComponent({
     const isOnComposition = ref(false);
     const isDisabled = computed$1(() => props.disabled || (form == null ? void 0 : form.disabled));
     const inputPlaceholder = computed$1(() => props.placeholder || t("el.cascader.placeholder"));
+    const currentPlaceholder = computed$1(() => searchInputValue.value || presentTags.value.length > 0 ? "" : inputPlaceholder.value);
     const realSize = useSize();
     const tagSize = computed$1(() => ["small"].includes(realSize.value) ? "small" : "default");
     const multiple = computed$1(() => !!props.props.multiple);
@@ -21132,7 +21216,7 @@ const _sfc_main$1B = defineComponent({
     const presentText = computed$1(() => {
       const { showAllLevels, separator } = props;
       const nodes = checkedNodes.value;
-      return nodes.length ? multiple.value ? " " : nodes[0].calcText(showAllLevels, separator) : "";
+      return nodes.length ? multiple.value ? "" : nodes[0].calcText(showAllLevels, separator) : "";
     });
     const checkedValue = computed$1({
       get() {
@@ -21393,10 +21477,10 @@ const _sfc_main$1B = defineComponent({
     });
     watch(presentText, syncPresentTextValue, { immediate: true });
     onMounted(() => {
-      var _a;
-      const inputEl = (_a = input.value) == null ? void 0 : _a.$el;
-      inputInitialHeight = (inputEl == null ? void 0 : inputEl.offsetHeight) || INPUT_HEIGHT_MAP[realSize.value] || DEFAULT_INPUT_HEIGHT;
-      useResizeObserver(inputEl, updateStyle);
+      const inputInner = input.value.input;
+      const inputInnerHeight = Number.parseFloat(useCssVar(nsInput.cssVarName("input-height"), inputInner).value) - 2;
+      inputInitialHeight = inputInner.offsetHeight || inputInnerHeight;
+      useResizeObserver(inputInner, updateStyle);
     });
     return {
       popperOptions,
@@ -21409,6 +21493,7 @@ const _sfc_main$1B = defineComponent({
       popperVisible,
       inputHover,
       inputPlaceholder,
+      currentPlaceholder,
       filtering,
       presentText,
       checkedValue,
@@ -21498,7 +21583,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
           ref: "input",
           modelValue: _ctx.inputValue,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.inputValue = $event),
-          placeholder: _ctx.searchInputValue ? "" : _ctx.inputPlaceholder,
+          placeholder: _ctx.currentPlaceholder,
           readonly: _ctx.readonly,
           disabled: _ctx.isDisabled,
           "validate-event": false,
@@ -21839,6 +21924,46 @@ const collapseEmits = {
   [CHANGE_EVENT]: emitChangeFn
 };
 
+const useCollapse = (props, emit) => {
+  const activeNames = ref(castArray$1(props.modelValue));
+  const setActiveNames = (_activeNames) => {
+    activeNames.value = _activeNames;
+    const value = props.accordion ? activeNames.value[0] : activeNames.value;
+    emit(UPDATE_MODEL_EVENT, value);
+    emit(CHANGE_EVENT, value);
+  };
+  const handleItemClick = (name) => {
+    if (props.accordion) {
+      setActiveNames([activeNames.value[0] === name ? "" : name]);
+    } else {
+      const _activeNames = [...activeNames.value];
+      const index = _activeNames.indexOf(name);
+      if (index > -1) {
+        _activeNames.splice(index, 1);
+      } else {
+        _activeNames.push(name);
+      }
+      setActiveNames(_activeNames);
+    }
+  };
+  watch(() => props.modelValue, () => activeNames.value = castArray$1(props.modelValue), { deep: true });
+  provide(collapseContextKey, {
+    activeNames,
+    handleItemClick
+  });
+  return {
+    activeNames,
+    setActiveNames
+  };
+};
+const useCollapseDOM = () => {
+  const ns = useNamespace("collapse");
+  const rootKls = computed$1(() => ns.b());
+  return {
+    rootKls
+  };
+};
+
 const __default__$Z = defineComponent({
   name: "ElCollapse"
 });
@@ -21848,42 +21973,15 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
   emits: collapseEmits,
   setup(__props, { expose, emit }) {
     const props = __props;
-    const ns = useNamespace("collapse");
-    const activeNames = ref(castArray$1(props.modelValue));
-    const setActiveNames = (_activeNames) => {
-      activeNames.value = _activeNames;
-      const value = props.accordion ? activeNames.value[0] : activeNames.value;
-      emit(UPDATE_MODEL_EVENT, value);
-      emit(CHANGE_EVENT, value);
-    };
-    const handleItemClick = (name) => {
-      if (props.accordion) {
-        setActiveNames([
-          (activeNames.value[0] || activeNames.value[0] === 0) && activeNames.value[0] === name ? "" : name
-        ]);
-      } else {
-        const _activeNames = [...activeNames.value];
-        const index = _activeNames.indexOf(name);
-        if (index > -1) {
-          _activeNames.splice(index, 1);
-        } else {
-          _activeNames.push(name);
-        }
-        setActiveNames(_activeNames);
-      }
-    };
-    watch(() => props.modelValue, () => activeNames.value = castArray$1(props.modelValue), { deep: true });
-    provide(collapseContextKey, {
-      activeNames,
-      handleItemClick
-    });
+    const { activeNames, setActiveNames } = useCollapse(props, emit);
+    const { rootKls } = useCollapseDOM();
     expose({
       activeNames,
       setActiveNames
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(ns).b()),
+        class: normalizeClass(unref(rootKls)),
         role: "tablist",
         "aria-multiselectable": "true"
       }, [
@@ -21983,8 +22081,73 @@ const collapseItemProps = buildProps({
   disabled: Boolean
 });
 
+const useCollapseItem = (props) => {
+  const collapse = inject(collapseContextKey);
+  const focusing = ref(false);
+  const isClick = ref(false);
+  const id = ref(generateId());
+  const isActive = computed$1(() => collapse == null ? void 0 : collapse.activeNames.value.includes(props.name));
+  const handleFocus = () => {
+    setTimeout(() => {
+      if (!isClick.value) {
+        focusing.value = true;
+      } else {
+        isClick.value = false;
+      }
+    }, 50);
+  };
+  const handleHeaderClick = () => {
+    if (props.disabled)
+      return;
+    collapse == null ? void 0 : collapse.handleItemClick(props.name);
+    focusing.value = false;
+    isClick.value = true;
+  };
+  const handleEnterClick = () => {
+    collapse == null ? void 0 : collapse.handleItemClick(props.name);
+  };
+  return {
+    focusing,
+    id,
+    isActive,
+    handleFocus,
+    handleHeaderClick,
+    handleEnterClick
+  };
+};
+const useCollapseItemDOM = (props, { focusing, isActive, id }) => {
+  const ns = useNamespace("collapse");
+  const rootKls = computed$1(() => [
+    ns.b("item"),
+    ns.is("active", unref(isActive)),
+    ns.is("disabled", props.disabled)
+  ]);
+  const headKls = computed$1(() => [
+    ns.be("item", "header"),
+    ns.is("active", unref(isActive)),
+    { focusing: unref(focusing) && !props.disabled }
+  ]);
+  const arrowKls = computed$1(() => [
+    ns.be("item", "arrow"),
+    ns.is("active", unref(isActive))
+  ]);
+  const itemWrapperKls = computed$1(() => ns.be("item", "wrap"));
+  const itemContentKls = computed$1(() => ns.be("item", "content"));
+  const scopedContentId = computed$1(() => ns.b(`content-${unref(id)}`));
+  const scopedHeadId = computed$1(() => ns.b(`head-${unref(id)}`));
+  return {
+    arrowKls,
+    headKls,
+    rootKls,
+    itemWrapperKls,
+    itemContentKls,
+    scopedContentId,
+    scopedHeadId
+  };
+};
+
 const _hoisted_1$N = ["aria-expanded", "aria-controls", "aria-describedby"];
-const _hoisted_2$v = ["id", "tabindex", "onKeypress"];
+const _hoisted_2$v = ["id", "tabindex"];
 const _hoisted_3$g = ["id", "aria-hidden", "aria-labelledby"];
 const __default__$X = defineComponent({
   name: "ElCollapseItem"
@@ -21994,67 +22157,51 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   props: collapseItemProps,
   setup(__props, { expose }) {
     const props = __props;
-    const collapse = inject(collapseContextKey);
-    const ns = useNamespace("collapse");
-    const focusing = ref(false);
-    const isClick = ref(false);
-    const id = ref(generateId());
-    const isActive = computed$1(() => collapse == null ? void 0 : collapse.activeNames.value.includes(props.name));
-    const handleFocus = () => {
-      setTimeout(() => {
-        if (!isClick.value) {
-          focusing.value = true;
-        } else {
-          isClick.value = false;
-        }
-      }, 50);
-    };
-    const handleHeaderClick = () => {
-      if (props.disabled)
-        return;
-      collapse == null ? void 0 : collapse.handleItemClick(props.name);
-      focusing.value = false;
-      isClick.value = true;
-    };
-    const handleEnterClick = () => {
-      collapse == null ? void 0 : collapse.handleItemClick(props.name);
-    };
+    const {
+      focusing,
+      id,
+      isActive,
+      handleFocus,
+      handleHeaderClick,
+      handleEnterClick
+    } = useCollapseItem(props);
+    const {
+      arrowKls,
+      headKls,
+      rootKls,
+      itemWrapperKls,
+      itemContentKls,
+      scopedContentId,
+      scopedHeadId
+    } = useCollapseItemDOM(props, { focusing, isActive, id });
     expose({
       isActive
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          unref(ns).b("item"),
-          unref(ns).is("active", unref(isActive)),
-          unref(ns).is("disabled", _ctx.disabled)
-        ])
+        class: normalizeClass(unref(rootKls))
       }, [
         createElementVNode("div", {
           role: "tab",
           "aria-expanded": unref(isActive),
-          "aria-controls": unref(ns).b(`content-${id.value}`),
-          "aria-describedby": unref(ns).b(`content-${id.value}`)
+          "aria-controls": unref(scopedContentId),
+          "aria-describedby": unref(scopedContentId)
         }, [
           createElementVNode("div", {
-            id: unref(ns).b(`head-${id.value}`),
-            class: normalizeClass([
-              unref(ns).be("item", "header"),
-              unref(ns).is("active", unref(isActive)),
-              { focusing: focusing.value && !_ctx.disabled }
-            ]),
+            id: unref(scopedHeadId),
+            class: normalizeClass(unref(headKls)),
             role: "button",
             tabindex: _ctx.disabled ? -1 : 0,
-            onClick: handleHeaderClick,
-            onKeypress: withKeys(withModifiers(handleEnterClick, ["stop", "prevent"]), ["space", "enter"]),
-            onFocus: handleFocus,
-            onBlur: _cache[0] || (_cache[0] = ($event) => focusing.value = false)
+            onClick: _cache[0] || (_cache[0] = (...args) => unref(handleHeaderClick) && unref(handleHeaderClick)(...args)),
+            onKeypress: _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => unref(handleEnterClick) && unref(handleEnterClick)(...args), ["stop", "prevent"]), ["space", "enter"])),
+            onFocus: _cache[2] || (_cache[2] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
+            onBlur: _cache[3] || (_cache[3] = ($event) => focusing.value = false)
           }, [
             renderSlot(_ctx.$slots, "title", {}, () => [
               createTextVNode(toDisplayString(_ctx.title), 1)
             ]),
             createVNode(unref(ElIcon), {
-              class: normalizeClass([unref(ns).be("item", "arrow"), unref(ns).is("active", unref(isActive))])
+              class: normalizeClass(unref(arrowKls))
             }, {
               default: withCtx(() => [
                 createVNode(unref(arrow_right_default))
@@ -22066,14 +22213,14 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
         createVNode(unref(_CollapseTransition), null, {
           default: withCtx(() => [
             withDirectives(createElementVNode("div", {
-              id: unref(ns).b(`content-${id.value}`),
-              class: normalizeClass(unref(ns).be("item", "wrap")),
+              id: unref(scopedContentId),
+              class: normalizeClass(unref(itemWrapperKls)),
               role: "tabpanel",
               "aria-hidden": !unref(isActive),
-              "aria-labelledby": unref(ns).b(`head-${id.value}`)
+              "aria-labelledby": unref(scopedHeadId)
             }, [
               createElementVNode("div", {
-                class: normalizeClass(unref(ns).be("item", "content"))
+                class: normalizeClass(unref(itemContentKls))
               }, [
                 renderSlot(_ctx.$slots, "default")
               ], 2)
@@ -25752,12 +25899,12 @@ const useMonthRangeHeader = ({
   const { t } = useLocale();
   const leftPrevYear = () => {
     leftDate.value = leftDate.value.subtract(1, "year");
-    if (!unlinkPanels) {
+    if (!unlinkPanels.value) {
       rightDate.value = rightDate.value.subtract(1, "year");
     }
   };
   const rightNextYear = () => {
-    if (!unlinkPanels) {
+    if (!unlinkPanels.value) {
       leftDate.value = leftDate.value.add(1, "year");
     }
     rightDate.value = rightDate.value.add(1, "year");
@@ -27631,7 +27778,8 @@ const dropdownProps = buildProps({
   },
   buttonProps: {
     type: definePropType(Object)
-  }
+  },
+  teleported: useTooltipContentProps.teleported
 });
 const dropdownItemProps = buildProps({
   command: {
@@ -27829,7 +27977,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
       "virtual-triggering": _ctx.splitButton,
       disabled: _ctx.disabled,
       transition: `${_ctx.ns.namespace.value}-zoom-in-top`,
-      teleported: "",
+      teleported: _ctx.teleported,
       pure: "",
       persistent: "",
       onBeforeShow: _ctx.handleBeforeShowTooltip,
@@ -27882,7 +28030,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
           }, 8, ["id", "tabindex"])
         ])
       } : void 0
-    ]), 1032, ["role", "effect", "popper-options", "hide-after", "placement", "popper-class", "reference-element", "trigger", "trigger-keys", "trigger-target-el", "show-after", "virtual-ref", "virtual-triggering", "disabled", "transition", "onBeforeShow", "onShow", "onBeforeHide"]),
+    ]), 1032, ["role", "effect", "popper-options", "hide-after", "placement", "popper-class", "reference-element", "trigger", "trigger-keys", "trigger-target-el", "show-after", "virtual-ref", "virtual-triggering", "disabled", "transition", "teleported", "onBeforeShow", "onShow", "onBeforeHide"]),
     _ctx.splitButton ? (openBlock(), createBlock(_component_el_button_group, { key: 0 }, {
       default: withCtx(() => [
         createVNode(_component_el_button, mergeProps({ ref: "referenceElementRef" }, _ctx.buttonProps, {
@@ -28061,6 +28209,9 @@ const _sfc_main$12 = defineComponent({
       onItemLeave(e);
     }));
     const handleClick = composeEventHandlers((e) => {
+      if (props.disabled) {
+        return;
+      }
       emit("click", e);
       return e.type !== "keydown" && e.defaultPrevented;
     }, (e) => {
@@ -28621,6 +28772,8 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
         }
         return result;
       } catch (e) {
+        if (e instanceof Error)
+          throw e;
         const invalidFields = e;
         if (props.scrollToError) {
           scrollToField(Object.keys(invalidFields)[0]);
@@ -30990,7 +31143,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     const increase = () => {
       if (props.readonly || inputNumberDisabled.value || maxDisabled.value)
         return;
-      const value = props.modelValue || 0;
+      const value = Number(displayValue.value) || 0;
       const newVal = ensurePrecision(value);
       setCurrentValue(newVal);
       emit(INPUT_EVENT, data.currentValue);
@@ -30998,7 +31151,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     const decrease = () => {
       if (props.readonly || inputNumberDisabled.value || minDisabled.value)
         return;
-      const value = props.modelValue || 0;
+      const value = Number(displayValue.value) || 0;
       const newVal = ensurePrecision(value, -1);
       setCurrentValue(newVal);
       emit(INPUT_EVENT, data.currentValue);
@@ -32754,10 +32907,10 @@ const useSelect$3 = (props, states, ctx) => {
     if (!val) {
       if (props.filterable) {
         if (isFunction(props.filterMethod)) {
-          props.filterMethod();
+          props.filterMethod("");
         }
         if (isFunction(props.remoteMethod)) {
-          props.remoteMethod();
+          props.remoteMethod("");
         }
       }
       input.value && input.value.blur();
@@ -32828,7 +32981,7 @@ const useSelect$3 = (props, states, ctx) => {
     flush: "post"
   });
   watch(() => states.hoverIndex, (val) => {
-    if (typeof val === "number" && val > -1) {
+    if (isNumber(val) && val > -1) {
       hoverOption.value = optionsArray.value[val] || {};
     } else {
       hoverOption.value = {};
@@ -32857,7 +33010,7 @@ const useSelect$3 = (props, states, ctx) => {
   const handleQueryChange = async (val) => {
     if (states.previousQuery === val || states.isOnComposition)
       return;
-    if (states.previousQuery === null && (typeof props.filterMethod === "function" || typeof props.remoteMethod === "function")) {
+    if (states.previousQuery === null && (isFunction(props.filterMethod) || isFunction(props.remoteMethod))) {
       states.previousQuery = val;
       return;
     }
@@ -32876,10 +33029,10 @@ const useSelect$3 = (props, states, ctx) => {
         resetInputHeight();
       });
     }
-    if (props.remote && typeof props.remoteMethod === "function") {
+    if (props.remote && isFunction(props.remoteMethod)) {
       states.hoverIndex = -1;
       props.remoteMethod(val);
-    } else if (typeof props.filterMethod === "function") {
+    } else if (isFunction(props.filterMethod)) {
       props.filterMethod(val);
       triggerRef(groupQueryChange);
     } else {
@@ -33035,7 +33188,7 @@ const useSelect$3 = (props, states, ctx) => {
   const deleteSelected = (event) => {
     event.stopPropagation();
     const value = props.multiple ? [] : "";
-    if (typeof value !== "string") {
+    if (!isString(value)) {
       for (const item of states.selected) {
         if (item.isDisabled)
           value.push(item.value);
@@ -38138,7 +38291,7 @@ const useSelect$1 = (props, emit) => {
     selectWidth: 200,
     initialInputHeight: 0,
     previousQuery: null,
-    previousValue: "",
+    previousValue: void 0,
     query: "",
     selectedLabel: "",
     softFocus: false,
@@ -38327,7 +38480,7 @@ const useSelect$1 = (props, emit) => {
   const update = (val) => {
     emit(UPDATE_MODEL_EVENT, val);
     emitChange(val);
-    states.previousValue = val.toString();
+    states.previousValue = val == null ? void 0 : val.toString();
   };
   const getValueIndex = (arr = [], value) => {
     if (!isObject$1(value)) {
@@ -38493,7 +38646,7 @@ const useSelect$1 = (props, emit) => {
     if (isArray(props.modelValue)) {
       emptyValue = [];
     } else {
-      emptyValue = "";
+      emptyValue = void 0;
     }
     states.softFocus = true;
     if (props.multiple) {
@@ -38613,7 +38766,7 @@ const useSelect$1 = (props, emit) => {
         });
       } else {
         states.cachedOptions = [];
-        states.previousValue = "";
+        states.previousValue = void 0;
       }
     } else {
       if (hasModelValue.value) {
@@ -38628,7 +38781,7 @@ const useSelect$1 = (props, emit) => {
         }
       } else {
         states.selectedLabel = "";
-        states.previousValue = "";
+        states.previousValue = void 0;
       }
     }
     clearAllNewOption();
@@ -38809,7 +38962,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
             ref: "selectionRef",
             class: normalizeClass([
               _ctx.nsSelectV2.e("wrapper"),
-              _ctx.nsSelectV2.is("focused", _ctx.states.isComposing),
+              _ctx.nsSelectV2.is("focused", _ctx.states.isComposing || _ctx.expanded),
               _ctx.nsSelectV2.is("hovering", _ctx.states.comboBoxHovering),
               _ctx.nsSelectV2.is("filterable", _ctx.filterable),
               _ctx.nsSelectV2.is("disabled", _ctx.selectDisabled)
@@ -39046,7 +39199,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
               key: 3,
               class: normalizeClass([
                 _ctx.nsSelectV2.e("placeholder"),
-                _ctx.nsSelectV2.is("transparent", _ctx.states.isComposing || (_ctx.multiple ? _ctx.modelValue.length === 0 : !_ctx.hasModelValue))
+                _ctx.nsSelectV2.is("transparent", _ctx.multiple ? _ctx.modelValue.length === 0 : !_ctx.hasModelValue)
               ])
             }, toDisplayString(_ctx.currentPlaceholder), 3)) : createCommentVNode("v-if", true),
             createElementVNode("span", {
@@ -41171,26 +41324,27 @@ function toggleRowStatus(statusArr, row, newVal) {
   let changed = false;
   const index = statusArr.indexOf(row);
   const included = index !== -1;
-  const addRow = () => {
-    statusArr.push(row);
-    changed = true;
-  };
-  const removeRow = () => {
-    statusArr.splice(index, 1);
+  const toggleStatus = (type) => {
+    if (type === "add") {
+      statusArr.push(row);
+    } else {
+      statusArr.splice(index, 1);
+    }
     changed = true;
+    if (isArray(row.children)) {
+      row.children.forEach((item) => {
+        toggleRowStatus(statusArr, item, newVal != null ? newVal : !included);
+      });
+    }
   };
-  if (typeof newVal === "boolean") {
+  if (isBoolean(newVal)) {
     if (newVal && !included) {
-      addRow();
+      toggleStatus("add");
     } else if (!newVal && included) {
-      removeRow();
+      toggleStatus("remove");
     }
   } else {
-    if (included) {
-      removeRow();
-    } else {
-      addRow();
-    }
+    included ? toggleStatus("remove") : toggleStatus("add");
   }
   return changed;
 }
@@ -41283,22 +41437,29 @@ function createTablePopper(parentNode, trigger, popperContent, popperOptions, to
   scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", removePopper);
   return popperInstance;
 }
+function getCurrentColumns(column) {
+  if (column.children) {
+    return flatMap(column.children, getCurrentColumns);
+  } else {
+    return [column];
+  }
+}
+function getColSpan(colSpan, column) {
+  return colSpan + column.colSpan;
+}
 const isFixedColumn = (index, fixed, store, realColumns) => {
   let start = 0;
   let after = index;
+  const columns = store.states.columns.value;
   if (realColumns) {
-    if (realColumns[index].colSpan > 1) {
-      return {};
-    }
-    for (let i = 0; i < index; i++) {
-      start += realColumns[i].colSpan;
-    }
-    after = start + realColumns[index].colSpan - 1;
+    const curColumns = getCurrentColumns(realColumns[index]);
+    const preColumns = columns.slice(0, columns.indexOf(curColumns[0]));
+    start = preColumns.reduce(getColSpan, 0);
+    after = start + curColumns.reduce(getColSpan, 0) - 1;
   } else {
     start = index;
   }
   let fixedLayout;
-  const columns = store.states.columns;
   switch (fixed) {
     case "left":
       if (after < store.states.fixedLeafColumnsLength.value) {
@@ -41306,14 +41467,14 @@ const isFixedColumn = (index, fixed, store, realColumns) => {
       }
       break;
     case "right":
-      if (start >= columns.value.length - store.states.rightFixedLeafColumnsLength.value) {
+      if (start >= columns.length - store.states.rightFixedLeafColumnsLength.value) {
         fixedLayout = "right";
       }
       break;
     default:
       if (after < store.states.fixedLeafColumnsLength.value) {
         fixedLayout = "left";
-      } else if (start >= columns.value.length - store.states.rightFixedLeafColumnsLength.value) {
+      } else if (start >= columns.length - store.states.rightFixedLeafColumnsLength.value) {
         fixedLayout = "right";
       }
   }
@@ -41325,11 +41486,11 @@ const isFixedColumn = (index, fixed, store, realColumns) => {
 };
 const getFixedColumnsClass = (namespace, index, fixed, store, realColumns, offset = 0) => {
   const classes = [];
-  const { direction, start } = isFixedColumn(index, fixed, store, realColumns);
+  const { direction, start, after } = isFixedColumn(index, fixed, store, realColumns);
   if (direction) {
     const isLeft = direction === "left";
     classes.push(`${namespace}-fixed-column--${direction}`);
-    if (isLeft && start + offset === store.states.fixedLeafColumnsLength.value - 1) {
+    if (isLeft && after + offset === store.states.fixedLeafColumnsLength.value - 1) {
       classes.push("is-last-column");
     } else if (!isLeft && start - offset === store.states.columns.value.length - store.states.rightFixedLeafColumnsLength.value) {
       classes.push("is-first-column");
@@ -41341,7 +41502,11 @@ function getOffset(offset, column) {
   return offset + (column.realWidth === null || Number.isNaN(column.realWidth) ? Number(column.width) : column.realWidth);
 }
 const getFixedColumnOffset = (index, fixed, store, realColumns) => {
-  const { direction, start = 0 } = isFixedColumn(index, fixed, store, realColumns);
+  const {
+    direction,
+    start = 0,
+    after = 0
+  } = isFixedColumn(index, fixed, store, realColumns);
   if (!direction) {
     return;
   }
@@ -41349,9 +41514,9 @@ const getFixedColumnOffset = (index, fixed, store, realColumns) => {
   const isLeft = direction === "left";
   const columns = store.states.columns.value;
   if (isLeft) {
-    styles.left = columns.slice(0, index).reduce(getOffset, 0);
+    styles.left = columns.slice(0, start).reduce(getOffset, 0);
   } else {
-    styles.right = columns.slice(start + 1).reverse().reduce(getOffset, 0);
+    styles.right = columns.slice(after + 1).reverse().reduce(getOffset, 0);
   }
   return styles;
 };
@@ -41737,7 +41902,17 @@ function useWatcher$1() {
     if (!rowKey.value)
       throw new Error("[ElTable] prop row-key is required");
   };
+  const updateChildFixed = (column) => {
+    var _a2;
+    (_a2 = column.children) == null ? void 0 : _a2.forEach((childColumn) => {
+      childColumn.fixed = column.fixed;
+      updateChildFixed(childColumn);
+    });
+  };
   const updateColumns = () => {
+    _columns.value.forEach((column) => {
+      updateChildFixed(column);
+    });
     fixedColumns.value = _columns.value.filter((column) => column.fixed === true || column.fixed === "left");
     rightFixedColumns.value = _columns.value.filter((column) => column.fixed === "right");
     if (fixedColumns.value.length > 0 && _columns.value[0] && _columns.value[0].type === "selection" && !_columns.value[0].fixed) {
@@ -43037,13 +43212,13 @@ function useStyle$2(props) {
         column
       });
     }
-    const fixedStyle = column.isSubColumn ? null : getFixedColumnOffset(columnIndex, column.fixed, props.store, row);
+    const fixedStyle = getFixedColumnOffset(columnIndex, column.fixed, props.store, row);
     ensurePosition(fixedStyle, "left");
     ensurePosition(fixedStyle, "right");
     return Object.assign({}, headerCellStyles, fixedStyle);
   };
   const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
-    const fixedClasses = column.isSubColumn ? [] : getFixedColumnsClass(ns.b(), columnIndex, column.fixed, props.store, row);
+    const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, column.fixed, props.store, row);
     const classes = [
       column.id,
       column.order,
@@ -43441,13 +43616,13 @@ function useStyles$1(props) {
         column
       });
     }
-    const fixedStyle = column.isSubColumn ? null : getFixedColumnOffset(columnIndex, props == null ? void 0 : props.fixed, props.store);
+    const fixedStyle = getFixedColumnOffset(columnIndex, props == null ? void 0 : props.fixed, props.store);
     ensurePosition(fixedStyle, "left");
     ensurePosition(fixedStyle, "right");
     return Object.assign({}, cellStyles, fixedStyle);
   };
   const getCellClass = (rowIndex, columnIndex, row, column, offset) => {
-    const fixedClasses = column.isSubColumn ? [] : getFixedColumnsClass(ns.b(), columnIndex, props == null ? void 0 : props.fixed, props.store, void 0, offset);
+    const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, props == null ? void 0 : props.fixed, props.store, void 0, offset);
     const classes = [column.id, column.align, column.className, ...fixedClasses];
     const cellClassName = parent == null ? void 0 : parent.props.cellClassName;
     if (typeof cellClassName === "string") {
@@ -47743,19 +47918,6 @@ const TabNav = defineComponent({
   }
 });
 
-const getTabPanes = (vm) => {
-  const nodes = flattedChildren(vm.subTree);
-  return nodes.filter((n) => {
-    var _a;
-    return isVNode(n) && ((_a = n.type) == null ? void 0 : _a.name) === "ElTabPane" && !!n.component;
-  });
-};
-const getOrderedPanes = (vm, panes) => {
-  const nodes = getTabPanes(vm);
-  const uids = nodes.map((n) => n.component.uid);
-  return uids.map((uid) => panes[uid]).filter((p) => !!p);
-};
-
 const tabsProps = buildProps({
   type: {
     type: String,
@@ -47801,11 +47963,13 @@ var Tabs = defineComponent({
     expose
   }) {
     var _a, _b;
-    const vm = getCurrentInstance();
     const ns = useNamespace("tabs");
+    const {
+      children: panes,
+      addChild: registerPane,
+      removeChild: unregisterPane
+    } = useOrderedChildren(getCurrentInstance(), "ElTabPane");
     const nav$ = ref();
-    const panes = shallowReactive({});
-    const orderedPanes = shallowRef([]);
     const currentName = ref((_b = (_a = props.modelValue) != null ? _a : props.activeName) != null ? _b : "0");
     const changeCurrentName = (value) => {
       currentName.value = value;
@@ -47857,22 +48021,12 @@ var Tabs = defineComponent({
       await nextTick();
       (_a2 = nav$.value) == null ? void 0 : _a2.scrollToActiveTab();
     });
-    {
-      const registerPane = (pane) => {
-        panes[pane.uid] = pane;
-        orderedPanes.value = getOrderedPanes(vm, panes);
-      };
-      const unregisterPane = (uid) => {
-        delete panes[uid];
-        orderedPanes.value = getOrderedPanes(vm, panes);
-      };
-      provide(tabsRootContextKey, {
-        props,
-        currentName,
-        registerPane,
-        unregisterPane
-      });
-    }
+    provide(tabsRootContextKey, {
+      props,
+      currentName,
+      registerPane,
+      unregisterPane
+    });
     expose({
       currentName
     });
@@ -47897,7 +48051,7 @@ var Tabs = defineComponent({
         "currentName": currentName.value,
         "editable": props.editable,
         "type": props.type,
-        "panes": orderedPanes.value,
+        "panes": panes.value,
         "stretch": props.stretch,
         "onTabClick": handleTabClick,
         "onTabRemove": handleTabRemove
@@ -51943,7 +52097,6 @@ var ElNodeContent = defineComponent({
 });
 
 const _hoisted_1$6 = ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick"];
-const DEFAULT_ICON = "caret-right";
 const __default__$7 = defineComponent({
   name: "ElTreeNode"
 });
@@ -51961,7 +52114,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     });
     const icon = computed$1(() => {
       var _a;
-      return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : DEFAULT_ICON;
+      return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : caret_right_default;
     });
     const handleClick = (e) => {
       emit("click", props.node, e);
@@ -52841,6 +52994,8 @@ const useHandlers = (props, uploadRef) => {
     props.onChange(file, uploadFiles.value);
   };
   const handleStart = (file) => {
+    if (isNil(file.uid))
+      file.uid = genFileId();
     const uploadFile = {
       name: file.name,
       percentage: 0,