@element-plus/nightly 0.0.20221022 → 0.0.20221024

package/dist/index.full.mjs

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20221022 */
+/*! Element Plus v0.0.20221024 */
 
 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';
 
@@ -11068,7 +11068,7 @@ const useOrderedChildren = (vm, childComponentName) => {
   };
 };
 
-const version$1 = "0.0.20221022";
+const version$1 = "0.0.20221024";
 
 const makeInstaller = (components = []) => {
   const install = (app, options) => {
@@ -11117,9 +11117,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,
@@ -11195,7 +11195,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 +11576,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 +11967,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 +12027,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 +12036,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({});
@@ -13993,10 +13993,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 +14058,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 +14256,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 +14494,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 +14505,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`
@@ -18521,9 +18521,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,
@@ -18756,12 +18756,207 @@ 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 {
+    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,
@@ -18769,20 +18964,25 @@ 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);
-    });
+      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)) {
@@ -18792,7 +18992,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)) {
@@ -18800,167 +19000,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,
@@ -18968,11 +19007,10 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        ref_key: "root",
-        ref: 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")),
@@ -18987,9 +19025,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(() => [
@@ -19000,7 +19038,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)
                 ]
               ])
             ]),
@@ -19015,9 +19053,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(() => [
@@ -19028,7 +19066,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)
                 ]
               ])
             ]),
@@ -19046,20 +19084,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);
     };
   }
 });
@@ -41281,22 +41319,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) {
@@ -41304,14 +41349,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";
       }
   }
@@ -41323,11 +41368,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");
@@ -41339,7 +41384,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;
   }
@@ -41347,9 +41396,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;
 };
@@ -41735,7 +41784,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) {
@@ -43035,13 +43094,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,
@@ -43439,13 +43498,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") {