element-plus 2.2.28 → 2.2.29

package/dist/index.full.mjs

@@ -1,6 +1,6 @@
-/*! Element Plus v2.2.28 */
+/*! Element Plus v2.2.29 */
 
-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, vModelText, toHandlers, guardReactiveProps, markRaw, effectScope, triggerRef, resolveDirective, TransitionGroup, createApp, shallowReactive, 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, vModelText, toHandlers, guardReactiveProps, TransitionGroup, markRaw, effectScope, triggerRef, resolveDirective, createApp, shallowReactive, render } from 'vue';
 
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
 
@@ -8733,11 +8733,6 @@ const flattedChildren = (children) => {
   return result;
 };
 
-const cubic = (value) => {
-  return value ** 3;
-};
-const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
-
 const unique = (arr) => [...new Set(arr)];
 const castArray = (arr) => {
   if (!arr && arr !== 0)
@@ -9744,7 +9739,7 @@ const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
   return {
     state: computed$1(() => {
       var _a;
-      return (_a = unref(instanceRef)) == null ? void 0 : _a.state;
+      return { ...((_a = unref(instanceRef)) == null ? void 0 : _a.state) || {} };
     }),
     styles: computed$1(() => unref(states).styles),
     attributes: computed$1(() => unref(states).attributes),
@@ -9761,7 +9756,7 @@ const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
 };
 function deriveState(state) {
   const elements = Object.keys(state.elements);
-  const styles = fromPairs(elements.map((element) => [element, state.elements[element] || {}]));
+  const styles = fromPairs(elements.map((element) => [element, state.styles[element] || {}]));
   const attributes = fromPairs(elements.map((element) => [element, state.attributes[element]]));
   return {
     styles,
@@ -11203,7 +11198,7 @@ const useOrderedChildren = (vm, childComponentName) => {
   };
 };
 
-const version$1 = "2.2.28";
+const version$1 = "2.2.29";
 
 const makeInstaller = (components = []) => {
   const install = (app, options) => {
@@ -12581,7 +12576,7 @@ const popperProps = buildProps({
 const usePopperProps = popperProps;
 
 const __default__$1u = defineComponent({
-  name: "ElPopperRoot",
+  name: "ElPopper",
   inheritAttrs: false
 });
 const _sfc_main$2a = /* @__PURE__ */ defineComponent({
@@ -12628,7 +12623,7 @@ const _sfc_main$29 = /* @__PURE__ */ defineComponent({
   setup(__props, { expose }) {
     const props = __props;
     const ns = useNamespace("popper");
-    const { arrowOffset, arrowRef } = inject(POPPER_CONTENT_INJECTION_KEY, void 0);
+    const { arrowOffset, arrowRef, arrowStyle } = inject(POPPER_CONTENT_INJECTION_KEY, void 0);
     watch(() => props.arrowOffset, (val) => {
       arrowOffset.value = val;
     });
@@ -12643,8 +12638,9 @@ const _sfc_main$29 = /* @__PURE__ */ defineComponent({
         ref_key: "arrowRef",
         ref: arrowRef,
         class: normalizeClass(unref(ns).e("arrow")),
+        style: normalizeStyle(unref(arrowStyle)),
         "data-popper-arrow": ""
-      }, null, 2);
+      }, null, 6);
     };
   }
 });
@@ -13324,15 +13320,14 @@ const usePopperCoreConfigProps = popperCoreConfigProps;
 const usePopperContentProps = popperContentProps;
 const usePopperContentEmits = popperContentEmits;
 
-const buildPopperOptions = (props, arrowProps) => {
+const buildPopperOptions = (props, modifiers = []) => {
   const { placement, strategy, popperOptions } = props;
   const options = {
     placement,
     strategy,
     ...popperOptions,
-    modifiers: genModifiers(props)
+    modifiers: [...genModifiers(props), ...modifiers]
   };
-  attachArrow(options, arrowProps);
   deriveExtraModifiers(options, popperOptions == null ? void 0 : popperOptions.modifiers);
   return options;
 };
@@ -13376,21 +13371,153 @@ function genModifiers(options) {
     }
   ];
 }
-function attachArrow(options, { arrowEl, arrowOffset }) {
-  options.modifiers.push({
-    name: "arrow",
-    options: {
-      element: arrowEl,
-      padding: arrowOffset != null ? arrowOffset : 5
-    }
-  });
-}
 function deriveExtraModifiers(options, modifiers) {
   if (modifiers) {
     options.modifiers = [...options.modifiers, ...modifiers != null ? modifiers : []];
   }
 }
 
+const DEFAULT_ARROW_OFFSET = 0;
+const usePopperContent = (props) => {
+  const { popperInstanceRef, contentRef, triggerRef, role } = inject(POPPER_INJECTION_KEY, void 0);
+  const arrowRef = ref();
+  const arrowOffset = ref();
+  const eventListenerModifier = computed$1(() => {
+    return {
+      name: "eventListeners",
+      enabled: !!props.visible
+    };
+  });
+  const arrowModifier = computed$1(() => {
+    var _a;
+    const arrowEl = unref(arrowRef);
+    const offset = (_a = unref(arrowOffset)) != null ? _a : DEFAULT_ARROW_OFFSET;
+    return {
+      name: "arrow",
+      enabled: !isUndefined$1(arrowEl),
+      options: {
+        element: arrowEl,
+        padding: offset
+      }
+    };
+  });
+  const options = computed$1(() => {
+    return {
+      onFirstUpdate: () => {
+        update();
+      },
+      ...buildPopperOptions(props, [
+        unref(arrowModifier),
+        unref(eventListenerModifier)
+      ])
+    };
+  });
+  const computedReference = computed$1(() => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef));
+  const { attributes, state, styles, update, forceUpdate, instanceRef } = usePopper(computedReference, contentRef, options);
+  watch(instanceRef, (instance) => popperInstanceRef.value = instance);
+  onMounted(() => {
+    watch(() => {
+      var _a;
+      return (_a = unref(computedReference)) == null ? void 0 : _a.getBoundingClientRect();
+    }, () => {
+      update();
+    });
+  });
+  return {
+    attributes,
+    arrowRef,
+    contentRef,
+    instanceRef,
+    state,
+    styles,
+    role,
+    forceUpdate,
+    update
+  };
+};
+
+const usePopperContentDOM = (props, {
+  attributes,
+  styles,
+  role
+}) => {
+  const { nextZIndex } = useZIndex();
+  const ns = useNamespace("popper");
+  const contentAttrs = computed$1(() => unref(attributes).popper);
+  const contentZIndex = ref(props.zIndex || nextZIndex());
+  const contentClass = computed$1(() => [
+    ns.b(),
+    ns.is("pure", props.pure),
+    ns.is(props.effect),
+    props.popperClass
+  ]);
+  const contentStyle = computed$1(() => {
+    return [
+      { zIndex: unref(contentZIndex) },
+      props.popperStyle || {},
+      unref(styles).popper
+    ];
+  });
+  const ariaModal = computed$1(() => role.value === "dialog" ? "false" : void 0);
+  const arrowStyle = computed$1(() => unref(styles).arrow || {});
+  const updateZIndex = () => {
+    contentZIndex.value = props.zIndex || nextZIndex();
+  };
+  return {
+    ariaModal,
+    arrowStyle,
+    contentAttrs,
+    contentClass,
+    contentStyle,
+    contentZIndex,
+    updateZIndex
+  };
+};
+
+const usePopperContentFocusTrap = (props, emit) => {
+  const trapped = ref(false);
+  const focusStartRef = ref();
+  const onFocusAfterTrapped = () => {
+    emit("focus");
+  };
+  const onFocusAfterReleased = (event) => {
+    var _a;
+    if (((_a = event.detail) == null ? void 0 : _a.focusReason) !== "pointer") {
+      focusStartRef.value = "first";
+      emit("blur");
+    }
+  };
+  const onFocusInTrap = (event) => {
+    if (props.visible && !trapped.value) {
+      if (event.target) {
+        focusStartRef.value = event.target;
+      }
+      trapped.value = true;
+    }
+  };
+  const onFocusoutPrevented = (event) => {
+    if (!props.trapping) {
+      if (event.detail.focusReason === "pointer") {
+        event.preventDefault();
+      }
+      trapped.value = false;
+    }
+  };
+  const onReleaseRequested = () => {
+    trapped.value = false;
+    emit("close");
+  };
+  return {
+    focusStartRef,
+    trapped,
+    onFocusAfterReleased,
+    onFocusAfterTrapped,
+    onFocusInTrap,
+    onFocusoutPrevented,
+    onReleaseRequested
+  };
+};
+
 const __default__$1r = defineComponent({
   name: "ElPopperContent"
 });
@@ -13400,15 +13527,32 @@ const _sfc_main$26 = /* @__PURE__ */ defineComponent({
   emits: popperContentEmits,
   setup(__props, { expose, emit }) {
     const props = __props;
-    const { popperInstanceRef, contentRef, triggerRef, role } = inject(POPPER_INJECTION_KEY, void 0);
+    const {
+      focusStartRef,
+      trapped,
+      onFocusAfterReleased,
+      onFocusAfterTrapped,
+      onFocusInTrap,
+      onFocusoutPrevented,
+      onReleaseRequested
+    } = usePopperContentFocusTrap(props, emit);
+    const { attributes, arrowRef, contentRef, styles, instanceRef, role, update } = usePopperContent(props);
+    const {
+      ariaModal,
+      arrowStyle,
+      contentAttrs,
+      contentClass,
+      contentStyle,
+      updateZIndex
+    } = usePopperContentDOM(props, {
+      styles,
+      attributes,
+      role
+    });
     const formItemContext = inject(formItemContextKey, void 0);
-    const { nextZIndex } = useZIndex();
-    const ns = useNamespace("popper");
-    const popperContentRef = ref();
-    const focusStartRef = ref("first");
-    const arrowRef = ref();
     const arrowOffset = ref();
     provide(POPPER_CONTENT_INJECTION_KEY, {
+      arrowStyle,
       arrowRef,
       arrowOffset
     });
@@ -13419,43 +13563,12 @@ const _sfc_main$26 = /* @__PURE__ */ defineComponent({
         removeInputId: NOOP
       });
     }
-    const contentZIndex = ref(props.zIndex || nextZIndex());
-    const trapped = ref(false);
     let triggerTargetAriaStopWatch = void 0;
-    const computedReference = computed$1(() => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef));
-    const contentStyle = computed$1(() => [{ zIndex: unref(contentZIndex) }, props.popperStyle]);
-    const contentClass = computed$1(() => [
-      ns.b(),
-      ns.is("pure", props.pure),
-      ns.is(props.effect),
-      props.popperClass
-    ]);
-    const ariaModal = computed$1(() => {
-      return role && role.value === "dialog" ? "false" : void 0;
-    });
-    const createPopperInstance = ({
-      referenceEl,
-      popperContentEl,
-      arrowEl
-    }) => {
-      const options = buildPopperOptions(props, {
-        arrowEl,
-        arrowOffset: unref(arrowOffset)
-      });
-      return yn(referenceEl, popperContentEl, options);
-    };
     const updatePopper = (shouldUpdateZIndex = true) => {
-      var _a;
-      (_a = unref(popperInstanceRef)) == null ? void 0 : _a.update();
-      shouldUpdateZIndex && (contentZIndex.value = props.zIndex || nextZIndex());
+      update();
+      shouldUpdateZIndex && updateZIndex();
     };
     const togglePopperAlive = () => {
-      var _a, _b;
-      const monitorable = { name: "eventListeners", enabled: props.visible };
-      (_b = (_a = unref(popperInstanceRef)) == null ? void 0 : _a.setOptions) == null ? void 0 : _b.call(_a, (options) => ({
-        ...options,
-        modifiers: [...options.modifiers || [], monitorable]
-      }));
       updatePopper(false);
       if (props.visible && props.focusOnShow) {
         trapped.value = true;
@@ -13463,65 +13576,12 @@ const _sfc_main$26 = /* @__PURE__ */ defineComponent({
         trapped.value = false;
       }
     };
-    const onFocusAfterTrapped = () => {
-      emit("focus");
-    };
-    const onFocusAfterReleased = (event) => {
-      var _a;
-      if (((_a = event.detail) == null ? void 0 : _a.focusReason) !== "pointer") {
-        focusStartRef.value = "first";
-        emit("blur");
-      }
-    };
-    const onFocusInTrap = (event) => {
-      if (props.visible && !trapped.value) {
-        if (event.target) {
-          focusStartRef.value = event.target;
-        }
-        trapped.value = true;
-      }
-    };
-    const onFocusoutPrevented = (event) => {
-      if (!props.trapping) {
-        if (event.detail.focusReason === "pointer") {
-          event.preventDefault();
-        }
-        trapped.value = false;
-      }
-    };
-    const onReleaseRequested = () => {
-      trapped.value = false;
-      emit("close");
-    };
     onMounted(() => {
-      let updateHandle;
-      watch(computedReference, (referenceEl) => {
-        var _a;
-        updateHandle == null ? void 0 : updateHandle();
-        const popperInstance = unref(popperInstanceRef);
-        (_a = popperInstance == null ? void 0 : popperInstance.destroy) == null ? void 0 : _a.call(popperInstance);
-        if (referenceEl) {
-          const popperContentEl = unref(popperContentRef);
-          contentRef.value = popperContentEl;
-          popperInstanceRef.value = createPopperInstance({
-            referenceEl,
-            popperContentEl,
-            arrowEl: unref(arrowRef)
-          });
-          updateHandle = watch(() => referenceEl.getBoundingClientRect(), () => updatePopper(), {
-            immediate: true
-          });
-        } else {
-          popperInstanceRef.value = void 0;
-        }
-      }, {
-        immediate: true
-      });
       watch(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
         triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
         triggerTargetAriaStopWatch = void 0;
-        const el = unref(triggerTargetEl || popperContentRef.value);
-        const prevEl = unref(prevTriggerTargetEl || popperContentRef.value);
+        const el = unref(triggerTargetEl || contentRef.value);
+        const prevEl = unref(prevTriggerTargetEl || contentRef.value);
         if (isElement$1(el)) {
           triggerTargetAriaStopWatch = watch([role, () => props.ariaLabel, ariaModal, () => props.id], (watches) => {
             ["role", "aria-label", "aria-modal", "id"].forEach((key, idx) => {
@@ -13536,51 +13596,45 @@ const _sfc_main$26 = /* @__PURE__ */ defineComponent({
         }
       }, { immediate: true });
       watch(() => props.visible, togglePopperAlive, { immediate: true });
-      watch(() => buildPopperOptions(props, {
-        arrowEl: unref(arrowRef),
-        arrowOffset: unref(arrowOffset)
-      }), (option) => {
-        var _a;
-        return (_a = popperInstanceRef.value) == null ? void 0 : _a.setOptions(option);
-      });
     });
     onBeforeUnmount(() => {
       triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
       triggerTargetAriaStopWatch = void 0;
     });
     expose({
-      popperContentRef,
-      popperInstanceRef,
+      popperContentRef: contentRef,
+      popperInstanceRef: instanceRef,
       updatePopper,
       contentStyle
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "popperContentRef",
-        ref: popperContentRef,
-        style: normalizeStyle(unref(contentStyle)),
-        class: normalizeClass(unref(contentClass)),
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "contentRef",
+        ref: contentRef
+      }, unref(contentAttrs), {
+        style: unref(contentStyle),
+        class: unref(contentClass),
         tabindex: "-1",
         onMouseenter: _cache[0] || (_cache[0] = (e) => _ctx.$emit("mouseenter", e)),
         onMouseleave: _cache[1] || (_cache[1] = (e) => _ctx.$emit("mouseleave", e))
-      }, [
+      }), [
         createVNode(unref(ElFocusTrap), {
-          trapped: trapped.value,
+          trapped: unref(trapped),
           "trap-on-focus-in": true,
-          "focus-trap-el": popperContentRef.value,
-          "focus-start-el": focusStartRef.value,
-          onFocusAfterTrapped,
-          onFocusAfterReleased,
-          onFocusin: onFocusInTrap,
-          onFocusoutPrevented,
-          onReleaseRequested
+          "focus-trap-el": unref(contentRef),
+          "focus-start-el": unref(focusStartRef),
+          onFocusAfterTrapped: unref(onFocusAfterTrapped),
+          onFocusAfterReleased: unref(onFocusAfterReleased),
+          onFocusin: unref(onFocusInTrap),
+          onFocusoutPrevented: unref(onFocusoutPrevented),
+          onReleaseRequested: unref(onReleaseRequested)
         }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
           ]),
           _: 3
-        }, 8, ["trapped", "focus-trap-el", "focus-start-el"])
-      ], 38);
+        }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusin", "onFocusoutPrevented", "onReleaseRequested"])
+      ], 16);
     };
   }
 });
@@ -14584,30 +14638,13 @@ const useBackTop = (props, emit, componentName) => {
   const el = shallowRef();
   const container = shallowRef();
   const visible = ref(false);
-  const scrollToTop = () => {
-    if (!el.value)
-      return;
-    const beginTime = Date.now();
-    const beginValue = el.value.scrollTop;
-    const frameFunc = () => {
-      if (!el.value)
-        return;
-      const progress = (Date.now() - beginTime) / 500;
-      if (progress < 1) {
-        el.value.scrollTop = beginValue * (1 - easeInOutCubic(progress));
-        requestAnimationFrame(frameFunc);
-      } else {
-        el.value.scrollTop = 0;
-      }
-    };
-    requestAnimationFrame(frameFunc);
-  };
   const handleScroll = () => {
     if (el.value)
       visible.value = el.value.scrollTop >= props.visibilityHeight;
   };
   const handleClick = (event) => {
-    scrollToTop();
+    var _a;
+    (_a = el.value) == null ? void 0 : _a.scrollTo({ top: 0, behavior: "smooth" });
     emit("click", event);
   };
   const handleScrollThrottled = useThrottleFn(handleScroll, 300, true);
@@ -19793,7 +19830,7 @@ const _sfc_main$1M = /* @__PURE__ */ defineComponent({
         boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : void 0
       };
     });
-    const lableKls = computed$1(() => {
+    const labelKls = computed$1(() => {
       return [
         ns.b("button"),
         ns.bm("button", checkboxButtonSize.value),
@@ -19804,7 +19841,7 @@ const _sfc_main$1M = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
-        class: normalizeClass(unref(lableKls))
+        class: normalizeClass(unref(labelKls))
       }, [
         _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
           key: 0,
@@ -21257,8 +21294,8 @@ const cascaderProps = buildProps({
   }
 });
 const cascaderEmits = {
-  [UPDATE_MODEL_EVENT]: (val) => !!val,
-  [CHANGE_EVENT]: (val) => !!val,
+  [UPDATE_MODEL_EVENT]: (val) => !!val || val === null,
+  [CHANGE_EVENT]: (val) => !!val || val === null,
   focus: (evt) => evt instanceof FocusEvent,
   blur: (evt) => evt instanceof FocusEvent,
   visibleChange: (val) => isBoolean(val),
@@ -30381,7 +30418,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(unref(contentStyle))
         }, [
           renderSlot(_ctx.$slots, "default"),
-          createVNode(Transition, {
+          createVNode(TransitionGroup, {
             name: `${unref(ns).namespace.value}-zoom-in-top`
           }, {
             default: withCtx(() => [
@@ -30466,7 +30503,6 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
         icon: markRaw(scale_to_original_default)
       }
     };
-    const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
     const { t } = useLocale();
     const ns = useNamespace("image-viewer");
     const { nextZIndex } = useZIndex();
@@ -30554,22 +30590,15 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
         }
       });
       const mousewheelHandler = throttle((e) => {
-        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
-        if (delta > 0) {
-          handleActions("zoomIn", {
-            zoomRate: props.zoomRate,
-            enableTransition: false
-          });
-        } else {
-          handleActions("zoomOut", {
-            zoomRate: props.zoomRate,
-            enableTransition: false
-          });
-        }
+        const delta = e.deltaY || e.deltaX;
+        handleActions(delta < 0 ? "zoomIn" : "zoomOut", {
+          zoomRate: props.zoomRate,
+          enableTransition: false
+        });
       });
       scopeEventListener.run(() => {
         useEventListener(document, "keydown", keydownHandler);
-        useEventListener(document, mousewheelEventName, mousewheelHandler);
+        useEventListener(document, "wheel", mousewheelHandler);
       });
     }
     function unregisterEventListener() {
@@ -33271,7 +33300,7 @@ const useSelect$3 = (props, states, ctx) => {
   };
   const resetInputWidth = () => {
     var _a;
-    states.inputWidth = (_a = reference.value) == null ? void 0 : _a.$el.getBoundingClientRect().width;
+    states.inputWidth = (_a = reference.value) == null ? void 0 : _a.$el.offsetWidth;
   };
   const onInputChange = () => {
     if (props.filterable && states.query !== states.selectedLabel) {
@@ -35599,18 +35628,10 @@ const rateProps = buildProps({
     type: iconPropType,
     default: () => star_filled_default
   },
-  disabled: {
-    type: Boolean
-  },
-  allowHalf: {
-    type: Boolean
-  },
-  showText: {
-    type: Boolean
-  },
-  showScore: {
-    type: Boolean
-  },
+  disabled: Boolean,
+  allowHalf: Boolean,
+  showText: Boolean,
+  showScore: Boolean,
   textColor: {
     type: String,
     default: ""
@@ -35629,10 +35650,7 @@ const rateProps = buildProps({
     type: String,
     default: "{value}"
   },
-  size: {
-    type: String,
-    validator: isValidComponentSize
-  },
+  size: useSizeProp,
   label: {
     type: String,
     default: void 0
@@ -35790,7 +35808,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       if (rateDisabled.value) {
         return;
       }
-      if (props.allowHalf) {
+      if (props.allowHalf && event) {
         let target = event.target;
         if (hasClass(target, ns.e("item"))) {
           target = target.querySelector(`.${ns.e("icon")}`);
@@ -42273,6 +42291,7 @@ function useWatcher$1() {
   const leafColumns = ref([]);
   const fixedLeafColumns = ref([]);
   const rightFixedLeafColumns = ref([]);
+  const updateOrderFns = [];
   const leafColumnsLength = ref(0);
   const fixedLeafColumnsLength = ref(0);
   const rightFixedLeafColumnsLength = ref(0);
@@ -42649,6 +42668,7 @@ function useWatcher$1() {
       leafColumns,
       fixedLeafColumns,
       rightFixedLeafColumns,
+      updateOrderFns,
       leafColumnsLength,
       fixedLeafColumnsLength,
       rightFixedLeafColumnsLength,
@@ -42719,7 +42739,7 @@ function useStore() {
         instance.store.scheduleLayout();
       }
     },
-    insertColumn(states, column, parent) {
+    insertColumn(states, column, parent, updateColumnOrder) {
       const array = unref(states._columns);
       let newColumns = [];
       if (!parent) {
@@ -42734,6 +42754,7 @@ function useStore() {
       }
       sortColumn(newColumns);
       states._columns.value = newColumns;
+      states.updateOrderFns.push(updateColumnOrder);
       if (column.type === "selection") {
         states.selectable.value = column.selectable;
         states.reserveSelection.value = column.reserveSelection;
@@ -42743,7 +42764,17 @@ function useStore() {
         instance.store.scheduleLayout();
       }
     },
-    removeColumn(states, column, parent) {
+    updateColumnOrder(states, column) {
+      var _a;
+      const newColumnIndex = (_a = column.getColumnIndex) == null ? void 0 : _a.call(column);
+      if (newColumnIndex === column.no)
+        return;
+      sortColumn(states._columns.value);
+      if (instance.$ready) {
+        instance.store.updateColumns();
+      }
+    },
+    removeColumn(states, column, parent, updateColumnOrder) {
       const array = unref(states._columns) || [];
       if (parent) {
         parent.children.splice(parent.children.findIndex((item) => item.id === column.id), 1);
@@ -42761,6 +42792,8 @@ function useStore() {
           states._columns.value = array;
         }
       }
+      const updateFnIndex = states.updateOrderFns.indexOf(updateColumnOrder);
+      updateFnIndex > -1 && states.updateOrderFns.splice(updateFnIndex, 1);
       if (instance.$ready) {
         instance.store.updateColumns();
         instance.store.scheduleLayout();
@@ -44886,12 +44919,33 @@ function useStyle(props, layout, store, table) {
   };
 }
 
+function useKeyRender(table) {
+  const observer = ref();
+  const initWatchDom = () => {
+    const el = table.vnode.el;
+    const columnsWrapper = el.querySelector(".hidden-columns");
+    const config = { childList: true, subtree: true };
+    const updateOrderFns = table.store.states.updateOrderFns;
+    observer.value = new MutationObserver(() => {
+      updateOrderFns.forEach((fn) => fn());
+    });
+    observer.value.observe(columnsWrapper, config);
+  };
+  onMounted(() => {
+    initWatchDom();
+  });
+  onUnmounted(() => {
+    var _a;
+    (_a = observer.value) == null ? void 0 : _a.disconnect();
+  });
+}
+
 var defaultProps$1 = {
   data: {
     type: Array,
     default: () => []
   },
-  size: String,
+  size: useSizeProp,
   width: [String, Number],
   height: [String, Number],
   maxHeight: [String, Number],
@@ -45082,6 +45136,7 @@ const _sfc_main$p = defineComponent({
     const computedEmptyText = computed$1(() => {
       return props.emptyText || t("el.table.emptyText");
     });
+    useKeyRender(table);
     return {
       ns,
       layout,
@@ -45692,6 +45747,9 @@ function useRender(props, slots, owner) {
   const getColumnElIndex = (children, child) => {
     return Array.prototype.indexOf.call(children, child);
   };
+  const updateColumnOrder = () => {
+    owner.value.store.commit("updateColumnOrder", instance.columnConfig.value);
+  };
   return {
     columnId,
     realAlign,
@@ -45702,7 +45760,8 @@ function useRender(props, slots, owner) {
     setColumnForcedProps,
     setColumnRenders,
     getPropsData,
-    getColumnElIndex
+    getColumnElIndex,
+    updateColumnOrder
   };
 }
 
@@ -45791,7 +45850,8 @@ var ElTableColumn$1 = defineComponent({
       setColumnRenders,
       getPropsData,
       getColumnElIndex,
-      realAlign
+      realAlign,
+      updateColumnOrder
     } = useRender(props, slots, owner);
     const parent = columnOrTableParent.value;
     columnId.value = `${parent.tableId || parent.columnId}_column_${columnIdSeed++}`;
@@ -45853,10 +45913,10 @@ var ElTableColumn$1 = defineComponent({
       const getColumnIndex = () => getColumnElIndex(children || [], instance.vnode.el);
       columnConfig.value.getColumnIndex = getColumnIndex;
       const columnIndex = getColumnIndex();
-      columnIndex > -1 && owner.value.store.commit("insertColumn", columnConfig.value, isSubColumn.value ? parent2.columnConfig.value : null);
+      columnIndex > -1 && owner.value.store.commit("insertColumn", columnConfig.value, isSubColumn.value ? parent2.columnConfig.value : null, updateColumnOrder);
     });
     onBeforeUnmount(() => {
-      owner.value.store.commit("removeColumn", columnConfig.value, isSubColumn.value ? parent.columnConfig.value : null);
+      owner.value.store.commit("removeColumn", columnConfig.value, isSubColumn.value ? parent.columnConfig.value : null, updateColumnOrder);
     });
     instance.columnId = columnId.value;
     instance.columnConfig = columnConfig;
@@ -48172,11 +48232,10 @@ const TabNav = defineComponent({
       const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];
       const currentOffset = navOffset.value;
       if (containerSize < navSize) {
-        const currentOffset2 = navOffset.value;
         scrollable.value = scrollable.value || {};
-        scrollable.value.prev = currentOffset2;
-        scrollable.value.next = currentOffset2 + containerSize < navSize;
-        if (navSize - currentOffset2 < containerSize) {
+        scrollable.value.prev = currentOffset;
+        scrollable.value.next = currentOffset + containerSize < navSize;
+        if (navSize - currentOffset < containerSize) {
           navOffset.value = navSize - containerSize;
         }
       } else {
@@ -51708,6 +51767,10 @@ const useTree$1 = (props, { attrs, slots, emit }, {
   });
   const propsMap = computed$1(() => ({
     value: key.value,
+    label: "label",
+    children: "children",
+    disabled: "disabled",
+    isLeaf: "isLeaf",
     ...props.props
   }));
   const getNodeValByProp = (prop, data) => {
@@ -53851,10 +53914,11 @@ const InfiniteScroll = {
   async updated(el) {
     if (!el[SCOPE]) {
       await nextTick();
-    }
-    const { containerEl, cb, observer } = el[SCOPE];
-    if (containerEl.clientHeight && observer) {
-      checkFull(el, cb);
+    } else {
+      const { containerEl, cb, observer } = el[SCOPE];
+      if (containerEl.clientHeight && observer) {
+        checkFull(el, cb);
+      }
     }
   }
 };
@@ -54241,6 +54305,10 @@ const getLastOffset = (id) => {
     return 0;
   return prev.vm.exposed.bottom.value;
 };
+const getOffsetOrSpace = (id, offset) => {
+  const idx = instances.findIndex((instance) => instance.id === id);
+  return idx > 0 ? 20 : offset;
+};
 
 const _hoisted_1$2 = ["id"];
 const _hoisted_2$2 = ["innerHTML"];
@@ -54266,7 +54334,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     });
     const iconComponent = computed$1(() => props.icon || TypeComponentsMap[props.type] || "");
     const lastOffset = computed$1(() => getLastOffset(props.id));
-    const offset = computed$1(() => props.offset + lastOffset.value);
+    const offset = computed$1(() => getOffsetOrSpace(props.id, props.offset) + lastOffset.value);
     const bottom = computed$1(() => height.value + offset.value);
     const customStyle = computed$1(() => ({
       top: `${offset.value}px`,