element-plus 2.2.28 → 2.2.29

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v2.2.28 */
+/*! Element Plus v2.2.29 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -8737,11 +8737,6 @@
     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)
@@ -9748,7 +9743,7 @@
     return {
       state: vue.computed(() => {
         var _a;
-        return (_a = vue.unref(instanceRef)) == null ? void 0 : _a.state;
+        return { ...((_a = vue.unref(instanceRef)) == null ? void 0 : _a.state) || {} };
       }),
       styles: vue.computed(() => vue.unref(states).styles),
       attributes: vue.computed(() => vue.unref(states).attributes),
@@ -9765,7 +9760,7 @@
   };
   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,
@@ -11207,7 +11202,7 @@
     };
   };
 
-  const version$1 = "2.2.28";
+  const version$1 = "2.2.29";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -12585,7 +12580,7 @@
   const usePopperProps = popperProps;
 
   const __default__$1u = vue.defineComponent({
-    name: "ElPopperRoot",
+    name: "ElPopper",
     inheritAttrs: false
   });
   const _sfc_main$2a = /* @__PURE__ */ vue.defineComponent({
@@ -12632,7 +12627,7 @@
     setup(__props, { expose }) {
       const props = __props;
       const ns = useNamespace("popper");
-      const { arrowOffset, arrowRef } = vue.inject(POPPER_CONTENT_INJECTION_KEY, void 0);
+      const { arrowOffset, arrowRef, arrowStyle } = vue.inject(POPPER_CONTENT_INJECTION_KEY, void 0);
       vue.watch(() => props.arrowOffset, (val) => {
         arrowOffset.value = val;
       });
@@ -12647,8 +12642,9 @@
           ref_key: "arrowRef",
           ref: arrowRef,
           class: vue.normalizeClass(vue.unref(ns).e("arrow")),
+          style: vue.normalizeStyle(vue.unref(arrowStyle)),
           "data-popper-arrow": ""
-        }, null, 2);
+        }, null, 6);
       };
     }
   });
@@ -13328,15 +13324,14 @@
   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;
   };
@@ -13380,21 +13375,153 @@
       }
     ];
   }
-  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 } = vue.inject(POPPER_INJECTION_KEY, void 0);
+    const arrowRef = vue.ref();
+    const arrowOffset = vue.ref();
+    const eventListenerModifier = vue.computed(() => {
+      return {
+        name: "eventListeners",
+        enabled: !!props.visible
+      };
+    });
+    const arrowModifier = vue.computed(() => {
+      var _a;
+      const arrowEl = vue.unref(arrowRef);
+      const offset = (_a = vue.unref(arrowOffset)) != null ? _a : DEFAULT_ARROW_OFFSET;
+      return {
+        name: "arrow",
+        enabled: !isUndefined$1(arrowEl),
+        options: {
+          element: arrowEl,
+          padding: offset
+        }
+      };
+    });
+    const options = vue.computed(() => {
+      return {
+        onFirstUpdate: () => {
+          update();
+        },
+        ...buildPopperOptions(props, [
+          vue.unref(arrowModifier),
+          vue.unref(eventListenerModifier)
+        ])
+      };
+    });
+    const computedReference = vue.computed(() => unwrapMeasurableEl(props.referenceEl) || vue.unref(triggerRef));
+    const { attributes, state, styles, update, forceUpdate, instanceRef } = usePopper(computedReference, contentRef, options);
+    vue.watch(instanceRef, (instance) => popperInstanceRef.value = instance);
+    vue.onMounted(() => {
+      vue.watch(() => {
+        var _a;
+        return (_a = vue.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 = vue.computed(() => vue.unref(attributes).popper);
+    const contentZIndex = vue.ref(props.zIndex || nextZIndex());
+    const contentClass = vue.computed(() => [
+      ns.b(),
+      ns.is("pure", props.pure),
+      ns.is(props.effect),
+      props.popperClass
+    ]);
+    const contentStyle = vue.computed(() => {
+      return [
+        { zIndex: vue.unref(contentZIndex) },
+        props.popperStyle || {},
+        vue.unref(styles).popper
+      ];
+    });
+    const ariaModal = vue.computed(() => role.value === "dialog" ? "false" : void 0);
+    const arrowStyle = vue.computed(() => vue.unref(styles).arrow || {});
+    const updateZIndex = () => {
+      contentZIndex.value = props.zIndex || nextZIndex();
+    };
+    return {
+      ariaModal,
+      arrowStyle,
+      contentAttrs,
+      contentClass,
+      contentStyle,
+      contentZIndex,
+      updateZIndex
+    };
+  };
+
+  const usePopperContentFocusTrap = (props, emit) => {
+    const trapped = vue.ref(false);
+    const focusStartRef = vue.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 = vue.defineComponent({
     name: "ElPopperContent"
   });
@@ -13404,15 +13531,32 @@
     emits: popperContentEmits,
     setup(__props, { expose, emit }) {
       const props = __props;
-      const { popperInstanceRef, contentRef, triggerRef, role } = vue.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 = vue.inject(formItemContextKey, void 0);
-      const { nextZIndex } = useZIndex();
-      const ns = useNamespace("popper");
-      const popperContentRef = vue.ref();
-      const focusStartRef = vue.ref("first");
-      const arrowRef = vue.ref();
       const arrowOffset = vue.ref();
       vue.provide(POPPER_CONTENT_INJECTION_KEY, {
+        arrowStyle,
         arrowRef,
         arrowOffset
       });
@@ -13423,43 +13567,12 @@
           removeInputId: NOOP
         });
       }
-      const contentZIndex = vue.ref(props.zIndex || nextZIndex());
-      const trapped = vue.ref(false);
       let triggerTargetAriaStopWatch = void 0;
-      const computedReference = vue.computed(() => unwrapMeasurableEl(props.referenceEl) || vue.unref(triggerRef));
-      const contentStyle = vue.computed(() => [{ zIndex: vue.unref(contentZIndex) }, props.popperStyle]);
-      const contentClass = vue.computed(() => [
-        ns.b(),
-        ns.is("pure", props.pure),
-        ns.is(props.effect),
-        props.popperClass
-      ]);
-      const ariaModal = vue.computed(() => {
-        return role && role.value === "dialog" ? "false" : void 0;
-      });
-      const createPopperInstance = ({
-        referenceEl,
-        popperContentEl,
-        arrowEl
-      }) => {
-        const options = buildPopperOptions(props, {
-          arrowEl,
-          arrowOffset: vue.unref(arrowOffset)
-        });
-        return yn(referenceEl, popperContentEl, options);
-      };
       const updatePopper = (shouldUpdateZIndex = true) => {
-        var _a;
-        (_a = vue.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 = vue.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;
@@ -13467,65 +13580,12 @@
           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");
-      };
       vue.onMounted(() => {
-        let updateHandle;
-        vue.watch(computedReference, (referenceEl) => {
-          var _a;
-          updateHandle == null ? void 0 : updateHandle();
-          const popperInstance = vue.unref(popperInstanceRef);
-          (_a = popperInstance == null ? void 0 : popperInstance.destroy) == null ? void 0 : _a.call(popperInstance);
-          if (referenceEl) {
-            const popperContentEl = vue.unref(popperContentRef);
-            contentRef.value = popperContentEl;
-            popperInstanceRef.value = createPopperInstance({
-              referenceEl,
-              popperContentEl,
-              arrowEl: vue.unref(arrowRef)
-            });
-            updateHandle = vue.watch(() => referenceEl.getBoundingClientRect(), () => updatePopper(), {
-              immediate: true
-            });
-          } else {
-            popperInstanceRef.value = void 0;
-          }
-        }, {
-          immediate: true
-        });
         vue.watch(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
           triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
           triggerTargetAriaStopWatch = void 0;
-          const el = vue.unref(triggerTargetEl || popperContentRef.value);
-          const prevEl = vue.unref(prevTriggerTargetEl || popperContentRef.value);
+          const el = vue.unref(triggerTargetEl || contentRef.value);
+          const prevEl = vue.unref(prevTriggerTargetEl || contentRef.value);
           if (isElement$1(el)) {
             triggerTargetAriaStopWatch = vue.watch([role, () => props.ariaLabel, ariaModal, () => props.id], (watches) => {
               ["role", "aria-label", "aria-modal", "id"].forEach((key, idx) => {
@@ -13540,51 +13600,45 @@
           }
         }, { immediate: true });
         vue.watch(() => props.visible, togglePopperAlive, { immediate: true });
-        vue.watch(() => buildPopperOptions(props, {
-          arrowEl: vue.unref(arrowRef),
-          arrowOffset: vue.unref(arrowOffset)
-        }), (option) => {
-          var _a;
-          return (_a = popperInstanceRef.value) == null ? void 0 : _a.setOptions(option);
-        });
       });
       vue.onBeforeUnmount(() => {
         triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
         triggerTargetAriaStopWatch = void 0;
       });
       expose({
-        popperContentRef,
-        popperInstanceRef,
+        popperContentRef: contentRef,
+        popperInstanceRef: instanceRef,
         updatePopper,
         contentStyle
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "popperContentRef",
-          ref: popperContentRef,
-          style: vue.normalizeStyle(vue.unref(contentStyle)),
-          class: vue.normalizeClass(vue.unref(contentClass)),
+        return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          ref_key: "contentRef",
+          ref: contentRef
+        }, vue.unref(contentAttrs), {
+          style: vue.unref(contentStyle),
+          class: vue.unref(contentClass),
           tabindex: "-1",
           onMouseenter: _cache[0] || (_cache[0] = (e) => _ctx.$emit("mouseenter", e)),
           onMouseleave: _cache[1] || (_cache[1] = (e) => _ctx.$emit("mouseleave", e))
-        }, [
+        }), [
           vue.createVNode(vue.unref(ElFocusTrap), {
-            trapped: trapped.value,
+            trapped: vue.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": vue.unref(contentRef),
+            "focus-start-el": vue.unref(focusStartRef),
+            onFocusAfterTrapped: vue.unref(onFocusAfterTrapped),
+            onFocusAfterReleased: vue.unref(onFocusAfterReleased),
+            onFocusin: vue.unref(onFocusInTrap),
+            onFocusoutPrevented: vue.unref(onFocusoutPrevented),
+            onReleaseRequested: vue.unref(onReleaseRequested)
           }, {
             default: vue.withCtx(() => [
               vue.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);
       };
     }
   });
@@ -14588,30 +14642,13 @@
     const el = vue.shallowRef();
     const container = vue.shallowRef();
     const visible = vue.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);
@@ -19797,7 +19834,7 @@
           boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : void 0
         };
       });
-      const lableKls = vue.computed(() => {
+      const labelKls = vue.computed(() => {
         return [
           ns.b("button"),
           ns.bm("button", checkboxButtonSize.value),
@@ -19808,7 +19845,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("label", {
-          class: vue.normalizeClass(vue.unref(lableKls))
+          class: vue.normalizeClass(vue.unref(labelKls))
         }, [
           _ctx.trueLabel || _ctx.falseLabel ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
             key: 0,
@@ -21261,8 +21298,8 @@
     }
   });
   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),
@@ -30385,7 +30422,7 @@
             style: vue.normalizeStyle(vue.unref(contentStyle))
           }, [
             vue.renderSlot(_ctx.$slots, "default"),
-            vue.createVNode(vue.Transition, {
+            vue.createVNode(vue.TransitionGroup, {
               name: `${vue.unref(ns).namespace.value}-zoom-in-top`
             }, {
               default: vue.withCtx(() => [
@@ -30470,7 +30507,6 @@
           icon: vue.markRaw(scale_to_original_default)
         }
       };
-      const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
       const { t } = useLocale();
       const ns = useNamespace("image-viewer");
       const { nextZIndex } = useZIndex();
@@ -30558,22 +30594,15 @@
           }
         });
         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() {
@@ -33275,7 +33304,7 @@
     };
     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) {
@@ -35603,18 +35632,10 @@
       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: ""
@@ -35633,10 +35654,7 @@
       type: String,
       default: "{value}"
     },
-    size: {
-      type: String,
-      validator: isValidComponentSize
-    },
+    size: useSizeProp,
     label: {
       type: String,
       default: void 0
@@ -35794,7 +35812,7 @@
         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")}`);
@@ -42277,6 +42295,7 @@
     const leafColumns = vue.ref([]);
     const fixedLeafColumns = vue.ref([]);
     const rightFixedLeafColumns = vue.ref([]);
+    const updateOrderFns = [];
     const leafColumnsLength = vue.ref(0);
     const fixedLeafColumnsLength = vue.ref(0);
     const rightFixedLeafColumnsLength = vue.ref(0);
@@ -42653,6 +42672,7 @@
         leafColumns,
         fixedLeafColumns,
         rightFixedLeafColumns,
+        updateOrderFns,
         leafColumnsLength,
         fixedLeafColumnsLength,
         rightFixedLeafColumnsLength,
@@ -42723,7 +42743,7 @@
           instance.store.scheduleLayout();
         }
       },
-      insertColumn(states, column, parent) {
+      insertColumn(states, column, parent, updateColumnOrder) {
         const array = vue.unref(states._columns);
         let newColumns = [];
         if (!parent) {
@@ -42738,6 +42758,7 @@
         }
         sortColumn(newColumns);
         states._columns.value = newColumns;
+        states.updateOrderFns.push(updateColumnOrder);
         if (column.type === "selection") {
           states.selectable.value = column.selectable;
           states.reserveSelection.value = column.reserveSelection;
@@ -42747,7 +42768,17 @@
           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 = vue.unref(states._columns) || [];
         if (parent) {
           parent.children.splice(parent.children.findIndex((item) => item.id === column.id), 1);
@@ -42765,6 +42796,8 @@
             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();
@@ -44890,12 +44923,33 @@
     };
   }
 
+  function useKeyRender(table) {
+    const observer = vue.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);
+    };
+    vue.onMounted(() => {
+      initWatchDom();
+    });
+    vue.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],
@@ -45086,6 +45140,7 @@
       const computedEmptyText = vue.computed(() => {
         return props.emptyText || t("el.table.emptyText");
       });
+      useKeyRender(table);
       return {
         ns,
         layout,
@@ -45696,6 +45751,9 @@
     const getColumnElIndex = (children, child) => {
       return Array.prototype.indexOf.call(children, child);
     };
+    const updateColumnOrder = () => {
+      owner.value.store.commit("updateColumnOrder", instance.columnConfig.value);
+    };
     return {
       columnId,
       realAlign,
@@ -45706,7 +45764,8 @@
       setColumnForcedProps,
       setColumnRenders,
       getPropsData,
-      getColumnElIndex
+      getColumnElIndex,
+      updateColumnOrder
     };
   }
 
@@ -45795,7 +45854,8 @@
         setColumnRenders,
         getPropsData,
         getColumnElIndex,
-        realAlign
+        realAlign,
+        updateColumnOrder
       } = useRender(props, slots, owner);
       const parent = columnOrTableParent.value;
       columnId.value = `${parent.tableId || parent.columnId}_column_${columnIdSeed++}`;
@@ -45857,10 +45917,10 @@
         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);
       });
       vue.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;
@@ -48176,11 +48236,10 @@
         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 {
@@ -51712,6 +51771,10 @@
     });
     const propsMap = vue.computed(() => ({
       value: key.value,
+      label: "label",
+      children: "children",
+      disabled: "disabled",
+      isLeaf: "isLeaf",
       ...props.props
     }));
     const getNodeValByProp = (prop, data) => {
@@ -53855,10 +53918,11 @@
     async updated(el) {
       if (!el[SCOPE]) {
         await vue.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);
+        }
       }
     }
   };
@@ -54245,6 +54309,10 @@
       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"];
@@ -54270,7 +54338,7 @@
       });
       const iconComponent = vue.computed(() => props.icon || TypeComponentsMap[props.type] || "");
       const lastOffset = vue.computed(() => getLastOffset(props.id));
-      const offset = vue.computed(() => props.offset + lastOffset.value);
+      const offset = vue.computed(() => getOffsetOrSpace(props.id, props.offset) + lastOffset.value);
       const bottom = vue.computed(() => height.value + offset.value);
       const customStyle = vue.computed(() => ({
         top: `${offset.value}px`,