@element-plus/nightly 0.0.20220722 → 0.0.20220726

package/dist/index.full.mjs

@@ -1,6 +1,6 @@
-/*! Element Plus v0.0.20220722 */
+/*! Element Plus v0.0.20220726 */
 
-import { getCurrentScope, onScopeDispose, readonly, shallowRef, watchEffect, ref, watch, unref, getCurrentInstance, onMounted, nextTick, computed, 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, onUpdated, withModifiers, reactive, cloneVNode, Text, toRefs, resolveComponent, onDeactivated, renderList, withKeys, createSlots, normalizeProps, guardReactiveProps, vModelCheckbox, vModelRadio, onBeforeUpdate, resolveDirective, vModelText, toHandlers, markRaw, effectScope, toRaw, triggerRef, TransitionGroup, createApp, shallowReactive, render } from 'vue';
+import { getCurrentScope, onScopeDispose, readonly, shallowRef, watchEffect, ref, watch, unref, 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, onUpdated, withModifiers, reactive, cloneVNode, Text, toRefs, resolveComponent, onDeactivated, renderList, withKeys, createSlots, normalizeProps, guardReactiveProps, vModelCheckbox, vModelRadio, onBeforeUpdate, resolveDirective, vModelText, toHandlers, markRaw, effectScope, toRaw as toRaw$1, triggerRef, TransitionGroup, createApp, shallowReactive, render } from 'vue';
 
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
 
@@ -6874,16 +6874,6 @@ const focusNode = (el) => {
   !isLeaf(el) && el.click();
 };
 
-const on$1 = (element, event, handler, useCapture = false) => {
-  if (element && event && handler) {
-    element == null ? void 0 : element.addEventListener(event, handler, useCapture);
-  }
-};
-const off = (element, event, handler, useCapture = false) => {
-  if (element && event && handler) {
-    element == null ? void 0 : element.removeEventListener(event, handler, useCapture);
-  }
-};
 const composeEventHandlers = (theirsHandler, oursHandler, { checkForDefaultPrevented = true } = {}) => {
   const handleEvent = (event) => {
     const shouldPrevent = theirsHandler == null ? void 0 : theirsHandler(event);
@@ -7324,7 +7314,7 @@ function useVModel(props, key, emit, options = {}) {
     });
     return proxy;
   } else {
-    return computed({
+    return computed$1({
       get() {
         return getValue();
       },
@@ -7551,14 +7541,14 @@ const getScrollContainer = (el, isVertical) => {
   return parent;
 };
 let scrollBarWidth;
-const getScrollBarWidth = () => {
+const getScrollBarWidth = (namespace) => {
   var _a;
   if (!isClient)
     return 0;
   if (scrollBarWidth !== void 0)
     return scrollBarWidth;
   const outer = document.createElement("div");
-  outer.className = "el-scrollbar__wrap";
+  outer.className = `${namespace}-scrollbar__wrap`;
   outer.style.visibility = "hidden";
   outer.style.width = "100px";
   outer.style.position = "absolute";
@@ -8649,14 +8639,14 @@ const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
 const LISTENER_PREFIX = /^on[A-Z]/;
 const useAttrs = (params = {}) => {
   const { excludeListeners = false, excludeKeys } = params;
-  const allExcludeKeys = computed(() => {
+  const allExcludeKeys = computed$1(() => {
     return ((excludeKeys == null ? void 0 : excludeKeys.value) || []).concat(DEFAULT_EXCLUDE_KEYS);
   });
   const instance = getCurrentInstance();
   if (!instance) {
-    return computed(() => ({}));
+    return computed$1(() => ({}));
   }
-  return computed(() => {
+  return computed$1(() => {
     var _a;
     return fromPairs(Object.entries((_a = instance.proxy) == null ? void 0 : _a.$attrs).filter(([key]) => !allExcludeKeys.value.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))));
   });
@@ -8702,7 +8692,7 @@ const ROOT_PICKER_INJECTION_KEY = Symbol();
 
 const useProp = (name) => {
   const vm = getCurrentInstance();
-  return computed(() => {
+  return computed$1(() => {
     var _a, _b;
     return (_b = ((_a = vm.proxy) == null ? void 0 : _a.$props)[name]) != null ? _b : void 0;
   });
@@ -8712,7 +8702,7 @@ const globalConfig = ref();
 function useGlobalConfig(key, defaultValue = void 0) {
   const config = getCurrentInstance() ? inject(configProviderContextKey, globalConfig) : globalConfig;
   if (key) {
-    return computed(() => {
+    return computed$1(() => {
       var _a, _b;
       return (_b = (_a = config.value) == null ? void 0 : _a[key]) != null ? _b : defaultValue;
     });
@@ -8728,7 +8718,7 @@ const provideGlobalConfig = (config, app, global = false) => {
   if (!provideFn) {
     return;
   }
-  const context = computed(() => {
+  const context = computed$1(() => {
     const cfg = unref(config);
     if (!(oldConfig == null ? void 0 : oldConfig.value))
       return cfg;
@@ -8761,12 +8751,12 @@ const useSize = (fallback, ignore = {}) => {
   const globalConfig = ignore.global ? emptyRef : useGlobalConfig("size");
   const form = ignore.form ? { size: void 0 } : inject(formContextKey, void 0);
   const formItem = ignore.formItem ? { size: void 0 } : inject(formItemContextKey, void 0);
-  return computed(() => size.value || unref(fallback) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || globalConfig.value || "");
+  return computed$1(() => size.value || unref(fallback) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || globalConfig.value || "");
 };
 const useDisabled$1 = (fallback) => {
   const disabled = useProp("disabled");
   const form = inject(formContextKey, void 0);
-  return computed(() => disabled.value || unref(fallback) || (form == null ? void 0 : form.disabled) || false);
+  return computed$1(() => disabled.value || unref(fallback) || (form == null ? void 0 : form.disabled) || false);
 };
 
 const useDeprecated = ({ from, replacement, scope, version, ref, type = "API" }, condition) => {
@@ -8852,7 +8842,7 @@ const defaultIdInjection = {
 const ID_INJECTION_KEY = Symbol("elIdInjection");
 const useId = (deterministicId) => {
   const idInjection = inject(ID_INJECTION_KEY, defaultIdInjection);
-  const idRef = computed(() => unref(deterministicId) || `el-id-${idInjection.prefix}-${idInjection.current++}`);
+  const idRef = computed$1(() => unref(deterministicId) || `el-id-${idInjection.prefix}-${idInjection.current++}`);
   return idRef;
 };
 
@@ -8877,7 +8867,7 @@ const useFormItemInputId = (props, {
   }
   const inputId = ref();
   let idUnwatch = void 0;
-  const isLabeledByFormItem = computed(() => {
+  const isLabeledByFormItem = computed$1(() => {
     var _a;
     return !!(!props.label && formItemContext && formItemContext.inputIds && ((_a = formItemContext.inputIds) == null ? void 0 : _a.length) <= 1);
   });
@@ -9070,7 +9060,7 @@ const translate = (path, option, locale) => get(locale, path, path).replace(/\{(
   return `${(_a = option == null ? void 0 : option[key]) != null ? _a : `{${key}}`}`;
 });
 const buildLocaleContext = (locale) => {
-  const lang = computed(() => unref(locale).name);
+  const lang = computed$1(() => unref(locale).name);
   const localeRef = isRef(locale) ? locale : ref(locale);
   return {
     lang,
@@ -9080,14 +9070,288 @@ const buildLocaleContext = (locale) => {
 };
 const useLocale = () => {
   const locale = useGlobalConfig("locale");
-  return buildLocaleContext(computed(() => locale.value || English));
+  return buildLocaleContext(computed$1(() => locale.value || English));
+};
+
+let activeEffectScope;
+function recordEffectScope(effect2, scope = activeEffectScope) {
+  if (scope && scope.active) {
+    scope.effects.push(effect2);
+  }
+}
+const createDep = (effects) => {
+  const dep = new Set(effects);
+  dep.w = 0;
+  dep.n = 0;
+  return dep;
+};
+const wasTracked = (dep) => (dep.w & trackOpBit) > 0;
+const newTracked = (dep) => (dep.n & trackOpBit) > 0;
+const initDepMarkers = ({ deps }) => {
+  if (deps.length) {
+    for (let i = 0; i < deps.length; i++) {
+      deps[i].w |= trackOpBit;
+    }
+  }
+};
+const finalizeDepMarkers = (effect2) => {
+  const { deps } = effect2;
+  if (deps.length) {
+    let ptr = 0;
+    for (let i = 0; i < deps.length; i++) {
+      const dep = deps[i];
+      if (wasTracked(dep) && !newTracked(dep)) {
+        dep.delete(effect2);
+      } else {
+        deps[ptr++] = dep;
+      }
+      dep.w &= ~trackOpBit;
+      dep.n &= ~trackOpBit;
+    }
+    deps.length = ptr;
+  }
+};
+let effectTrackDepth = 0;
+let trackOpBit = 1;
+const maxMarkerBits = 30;
+let activeEffect;
+class ReactiveEffect {
+  constructor(fn, scheduler2 = null, scope) {
+    this.fn = fn;
+    this.scheduler = scheduler2;
+    this.active = true;
+    this.deps = [];
+    this.parent = void 0;
+    recordEffectScope(this, scope);
+  }
+  run() {
+    if (!this.active) {
+      return this.fn();
+    }
+    let parent = activeEffect;
+    let lastShouldTrack = shouldTrack;
+    while (parent) {
+      if (parent === this) {
+        return;
+      }
+      parent = parent.parent;
+    }
+    try {
+      this.parent = activeEffect;
+      activeEffect = this;
+      shouldTrack = true;
+      trackOpBit = 1 << ++effectTrackDepth;
+      if (effectTrackDepth <= maxMarkerBits) {
+        initDepMarkers(this);
+      } else {
+        cleanupEffect(this);
+      }
+      return this.fn();
+    } finally {
+      if (effectTrackDepth <= maxMarkerBits) {
+        finalizeDepMarkers(this);
+      }
+      trackOpBit = 1 << --effectTrackDepth;
+      activeEffect = this.parent;
+      shouldTrack = lastShouldTrack;
+      this.parent = void 0;
+      if (this.deferStop) {
+        this.stop();
+      }
+    }
+  }
+  stop() {
+    if (activeEffect === this) {
+      this.deferStop = true;
+    } else if (this.active) {
+      cleanupEffect(this);
+      if (this.onStop) {
+        this.onStop();
+      }
+      this.active = false;
+    }
+  }
+}
+function cleanupEffect(effect2) {
+  const { deps } = effect2;
+  if (deps.length) {
+    for (let i = 0; i < deps.length; i++) {
+      deps[i].delete(effect2);
+    }
+    deps.length = 0;
+  }
+}
+let shouldTrack = true;
+function trackEffects(dep, debuggerEventExtraInfo) {
+  let shouldTrack2 = false;
+  if (effectTrackDepth <= maxMarkerBits) {
+    if (!newTracked(dep)) {
+      dep.n |= trackOpBit;
+      shouldTrack2 = !wasTracked(dep);
+    }
+  } else {
+    shouldTrack2 = !dep.has(activeEffect);
+  }
+  if (shouldTrack2) {
+    dep.add(activeEffect);
+    activeEffect.deps.push(dep);
+  }
+}
+function triggerEffects(dep, debuggerEventExtraInfo) {
+  const effects = isArray(dep) ? dep : [...dep];
+  for (const effect2 of effects) {
+    if (effect2.computed) {
+      triggerEffect(effect2);
+    }
+  }
+  for (const effect2 of effects) {
+    if (!effect2.computed) {
+      triggerEffect(effect2);
+    }
+  }
+}
+function triggerEffect(effect2, debuggerEventExtraInfo) {
+  if (effect2 !== activeEffect || effect2.allowRecurse) {
+    if (effect2.scheduler) {
+      effect2.scheduler();
+    } else {
+      effect2.run();
+    }
+  }
+}
+function toRaw(observed) {
+  const raw = observed && observed["__v_raw"];
+  return raw ? toRaw(raw) : observed;
+}
+function trackRefValue(ref2) {
+  if (shouldTrack && activeEffect) {
+    ref2 = toRaw(ref2);
+    {
+      trackEffects(ref2.dep || (ref2.dep = createDep()));
+    }
+  }
+}
+function triggerRefValue(ref2, newVal) {
+  ref2 = toRaw(ref2);
+  if (ref2.dep) {
+    {
+      triggerEffects(ref2.dep);
+    }
+  }
+}
+class ComputedRefImpl {
+  constructor(getter, _setter, isReadonly2, isSSR) {
+    this._setter = _setter;
+    this.dep = void 0;
+    this.__v_isRef = true;
+    this._dirty = true;
+    this.effect = new ReactiveEffect(getter, () => {
+      if (!this._dirty) {
+        this._dirty = true;
+        triggerRefValue(this);
+      }
+    });
+    this.effect.computed = this;
+    this.effect.active = this._cacheable = !isSSR;
+    this["__v_isReadonly"] = isReadonly2;
+  }
+  get value() {
+    const self = toRaw(this);
+    trackRefValue(self);
+    if (self._dirty || !self._cacheable) {
+      self._dirty = false;
+      self._value = self.effect.run();
+    }
+    return self._value;
+  }
+  set value(newValue) {
+    this._setter(newValue);
+  }
+}
+function computed(getterOrOptions, debugOptions, isSSR = false) {
+  let getter;
+  let setter;
+  const onlyGetter = isFunction(getterOrOptions);
+  if (onlyGetter) {
+    getter = getterOrOptions;
+    setter = NOOP;
+  } else {
+    getter = getterOrOptions.get;
+    setter = getterOrOptions.set;
+  }
+  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
+  return cRef;
+}
+
+const defaultNamespace = "el";
+const statePrefix = "is-";
+const _bem = (namespace, block, blockSuffix, element, modifier) => {
+  let cls = `${namespace}-${block}`;
+  if (blockSuffix) {
+    cls += `-${blockSuffix}`;
+  }
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+};
+const useNamespace = (block) => {
+  const globalConfig = useGlobalConfig("namespace");
+  const namespace = computed$1(() => globalConfig.value || defaultNamespace);
+  const b = (blockSuffix = "") => _bem(unref(namespace), block, blockSuffix, "", "");
+  const e = (element) => element ? _bem(unref(namespace), block, "", element, "") : "";
+  const m = (modifier) => modifier ? _bem(unref(namespace), block, "", "", modifier) : "";
+  const be = (blockSuffix, element) => blockSuffix && element ? _bem(unref(namespace), block, blockSuffix, element, "") : "";
+  const em = (element, modifier) => element && modifier ? _bem(unref(namespace), block, "", element, modifier) : "";
+  const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(unref(namespace), block, blockSuffix, "", modifier) : "";
+  const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(unref(namespace), block, blockSuffix, element, modifier) : "";
+  const is = (name, ...args) => {
+    const state = args.length >= 1 ? args[0] : true;
+    return name && state ? `${statePrefix}${name}` : "";
+  };
+  const cssVar = (object) => {
+    const styles = {};
+    for (const key in object) {
+      styles[`--${namespace.value}-${key}`] = object[key];
+    }
+    return styles;
+  };
+  const cssVarBlock = (object) => {
+    const styles = {};
+    for (const key in object) {
+      styles[`--${namespace.value}-${block}-${key}`] = object[key];
+    }
+    return styles;
+  };
+  const cssVarName = (name) => `--${namespace.value}-${name}`;
+  const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
+  return {
+    namespace,
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is,
+    cssVar,
+    cssVarName,
+    cssVarBlock,
+    cssVarBlockName
+  };
 };
 
 const useLockscreen = (trigger) => {
   if (!isRef(trigger)) {
     throwError("[useLockscreen]", "You need to pass a ref param to this function");
   }
-  if (!isClient || hasClass(document.body, "el-popup-parent--hidden")) {
+  const ns = useNamespace("popup");
+  const hiddenCls = computed(() => ns.bm("parent", "hidden"));
+  if (!isClient || hasClass(document.body, hiddenCls.value)) {
     return;
   }
   let scrollBarWidth = 0;
@@ -9095,7 +9359,7 @@ const useLockscreen = (trigger) => {
   let bodyPaddingRight = "0";
   let computedBodyPaddingRight = 0;
   const cleanup = () => {
-    removeClass(document.body, "el-popup-parent--hidden");
+    removeClass(document.body, hiddenCls.value);
     if (withoutHiddenClass) {
       document.body.style.paddingRight = bodyPaddingRight;
     }
@@ -9105,18 +9369,18 @@ const useLockscreen = (trigger) => {
       cleanup();
       return;
     }
-    withoutHiddenClass = !hasClass(document.body, "el-popup-parent--hidden");
+    withoutHiddenClass = !hasClass(document.body, hiddenCls.value);
     if (withoutHiddenClass) {
       bodyPaddingRight = document.body.style.paddingRight;
       computedBodyPaddingRight = Number.parseInt(getStyle(document.body, "paddingRight"), 10);
     }
-    scrollBarWidth = getScrollBarWidth();
+    scrollBarWidth = getScrollBarWidth(ns.namespace.value);
     const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
     const bodyOverflowY = getStyle(document.body, "overflowY");
     if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === "scroll") && withoutHiddenClass) {
       document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarWidth}px`;
     }
-    addClass(document.body, "el-popup-parent--hidden");
+    addClass(document.body, hiddenCls.value);
   });
   onScopeDispose(() => cleanup());
 };
@@ -9169,8 +9433,8 @@ const createModelToggleComposable = (name) => {
     const instance = getCurrentInstance();
     const { emit } = instance;
     const props = instance.props;
-    const hasUpdateHandler = computed(() => isFunction(props[updateEventKeyRaw]));
-    const isModelBindingAbsent = computed(() => props[name] === null);
+    const hasUpdateHandler = computed$1(() => isFunction(props[updateEventKeyRaw]));
+    const isModelBindingAbsent = computed$1(() => props[name] === null);
     const doShow = (event) => {
       if (indicator.value === true) {
         return;
@@ -9592,72 +9856,10 @@ const useForwardRefDirective = (setForwardRef) => {
   };
 };
 
-const defaultNamespace = "el";
-const statePrefix = "is-";
-const _bem = (namespace, block, blockSuffix, element, modifier) => {
-  let cls = `${namespace}-${block}`;
-  if (blockSuffix) {
-    cls += `-${blockSuffix}`;
-  }
-  if (element) {
-    cls += `__${element}`;
-  }
-  if (modifier) {
-    cls += `--${modifier}`;
-  }
-  return cls;
-};
-const useNamespace = (block) => {
-  const globalConfig = useGlobalConfig("namespace");
-  const namespace = computed(() => globalConfig.value || defaultNamespace);
-  const b = (blockSuffix = "") => _bem(unref(namespace), block, blockSuffix, "", "");
-  const e = (element) => element ? _bem(unref(namespace), block, "", element, "") : "";
-  const m = (modifier) => modifier ? _bem(unref(namespace), block, "", "", modifier) : "";
-  const be = (blockSuffix, element) => blockSuffix && element ? _bem(unref(namespace), block, blockSuffix, element, "") : "";
-  const em = (element, modifier) => element && modifier ? _bem(unref(namespace), block, "", element, modifier) : "";
-  const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(unref(namespace), block, blockSuffix, "", modifier) : "";
-  const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(unref(namespace), block, blockSuffix, element, modifier) : "";
-  const is = (name, ...args) => {
-    const state = args.length >= 1 ? args[0] : true;
-    return name && state ? `${statePrefix}${name}` : "";
-  };
-  const cssVar = (object) => {
-    const styles = {};
-    for (const key in object) {
-      styles[`--${namespace.value}-${key}`] = object[key];
-    }
-    return styles;
-  };
-  const cssVarBlock = (object) => {
-    const styles = {};
-    for (const key in object) {
-      styles[`--${namespace.value}-${block}-${key}`] = object[key];
-    }
-    return styles;
-  };
-  const cssVarName = (name) => `--${namespace.value}-${name}`;
-  const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
-  return {
-    namespace,
-    b,
-    e,
-    m,
-    be,
-    em,
-    bm,
-    bem,
-    is,
-    cssVar,
-    cssVarName,
-    cssVarBlock,
-    cssVarBlockName
-  };
-};
-
 const zIndex = ref(0);
 const useZIndex = () => {
   const initialZIndex = useGlobalConfig("zIndex", 2e3);
-  const currentZIndex = computed(() => initialZIndex.value + zIndex.value);
+  const currentZIndex = computed$1(() => initialZIndex.value + zIndex.value);
   const nextZIndex = () => {
     zIndex.value++;
     return currentZIndex.value;
@@ -10692,7 +10894,7 @@ function useCursor(input) {
   return [recordCursor, setCursor];
 }
 
-const version$1 = "0.0.20220722";
+const version$1 = "0.0.20220726";
 
 const makeInstaller = (components = []) => {
   const install = (app, options) => {
@@ -10767,13 +10969,13 @@ const _sfc_main$2f = /* @__PURE__ */ defineComponent({
     const fixed = ref(false);
     const scrollTop = ref(0);
     const transform = ref(0);
-    const rootStyle = computed(() => {
+    const rootStyle = computed$1(() => {
       return {
         height: fixed.value ? `${rootHeight.value}px` : "",
         width: fixed.value ? `${rootWidth.value}px` : ""
       };
     });
-    const affixStyle = computed(() => {
+    const affixStyle = computed$1(() => {
       if (!fixed.value)
         return {};
       const offset = props.offset ? `${props.offset}px` : 0;
@@ -10870,7 +11072,7 @@ const _sfc_main$2e = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const ns = useNamespace("icon");
-    const style = computed(() => {
+    const style = computed$1(() => {
       if (!props.size && !props.color)
         return {};
       return {
@@ -10940,12 +11142,12 @@ const _sfc_main$2d = /* @__PURE__ */ defineComponent({
     const slots = useSlots();
     const ns = useNamespace("alert");
     const visible = ref(true);
-    const iconComponent = computed(() => TypeComponentsMap[props.type]);
-    const iconClass = computed(() => [
+    const iconComponent = computed$1(() => TypeComponentsMap[props.type]);
+    const iconClass = computed$1(() => [
       ns.e("icon"),
       { [ns.is("big")]: !!props.description || !!slots.default }
     ]);
-    const isBoldTitle = computed(() => props.description || { [ns.is("bold")]: slots.default });
+    const isBoldTitle = computed$1(() => props.description || { [ns.is("bold")]: slots.default });
     const close = (evt) => {
       visible.value = false;
       emit("close", evt);
@@ -11216,7 +11418,7 @@ const _sfc_main$2c = /* @__PURE__ */ defineComponent({
     const instance = getCurrentInstance();
     const rawAttrs = useAttrs$1();
     const slots = useSlots();
-    const containerAttrs = computed(() => {
+    const containerAttrs = computed$1(() => {
       const comboBoxAttrs = {};
       if (props.containerRole === "combobox") {
         comboBoxAttrs["aria-haspopup"] = rawAttrs["aria-haspopup"];
@@ -11226,7 +11428,7 @@ const _sfc_main$2c = /* @__PURE__ */ defineComponent({
       return comboBoxAttrs;
     });
     const attrs = useAttrs({
-      excludeKeys: computed(() => {
+      excludeKeys: computed$1(() => {
         return Object.keys(containerAttrs.value);
       })
     });
@@ -11246,30 +11448,30 @@ const _sfc_main$2c = /* @__PURE__ */ defineComponent({
     const passwordVisible = ref(false);
     const countStyle = ref();
     const textareaCalcStyle = shallowRef(props.inputStyle);
-    const _ref = computed(() => input.value || textarea.value);
-    const needStatusIcon = computed(() => {
+    const _ref = computed$1(() => input.value || textarea.value);
+    const needStatusIcon = computed$1(() => {
       var _a;
       return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;
     });
-    const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
-    const validateIcon = computed(() => validateState.value && ValidateComponentsMap[validateState.value]);
-    const passwordIcon = computed(() => passwordVisible.value ? view_default : hide_default);
-    const containerStyle = computed(() => [
+    const validateState = computed$1(() => (formItem == null ? void 0 : formItem.validateState) || "");
+    const validateIcon = computed$1(() => validateState.value && ValidateComponentsMap[validateState.value]);
+    const passwordIcon = computed$1(() => passwordVisible.value ? view_default : hide_default);
+    const containerStyle = computed$1(() => [
       rawAttrs.style,
       props.inputStyle
     ]);
-    const textareaStyle = computed(() => [
+    const textareaStyle = computed$1(() => [
       props.inputStyle,
       textareaCalcStyle.value,
       { resize: props.resize }
     ]);
-    const nativeInputValue = computed(() => isNil(props.modelValue) ? "" : String(props.modelValue));
-    const showClear = computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (focused.value || hovering.value));
-    const showPwdVisible = computed(() => props.showPassword && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (!!nativeInputValue.value || focused.value));
-    const isWordLimitVisible = computed(() => props.showWordLimit && !!attrs.value.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
-    const textLength = computed(() => Array.from(nativeInputValue.value).length);
-    const inputExceed = computed(() => !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength));
-    const suffixVisible = computed(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
+    const nativeInputValue = computed$1(() => isNil(props.modelValue) ? "" : String(props.modelValue));
+    const showClear = computed$1(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (focused.value || hovering.value));
+    const showPwdVisible = computed$1(() => props.showPassword && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (!!nativeInputValue.value || focused.value));
+    const isWordLimitVisible = computed$1(() => props.showWordLimit && !!attrs.value.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
+    const textLength = computed$1(() => Array.from(nativeInputValue.value).length);
+    const inputExceed = computed$1(() => !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength));
+    const suffixVisible = computed$1(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
     const [recordCursor, setCursor] = useCursor(input);
     useResizeObserver(textarea, (entries) => {
       if (!isWordLimitVisible.value || props.resize !== "both")
@@ -11693,13 +11895,13 @@ const _sfc_main$2b = /* @__PURE__ */ defineComponent({
     let cursorDown = false;
     let cursorLeave = false;
     let originalOnSelectStart = isClient ? document.onselectstart : null;
-    const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
-    const thumbStyle = computed(() => renderThumbStyle$1({
+    const bar = computed$1(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
+    const thumbStyle = computed$1(() => renderThumbStyle$1({
       size: props.size,
       move: props.move,
       bar: bar.value
     }));
-    const offsetRatio = computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
+    const offsetRatio = computed$1(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
     const clickThumbHandler = (e) => {
       var _a;
       e.stopPropagation();
@@ -11918,7 +12120,7 @@ const _sfc_main$29 = /* @__PURE__ */ defineComponent({
     const barRef = ref();
     const ratioY = ref(1);
     const ratioX = ref(1);
-    const style = computed(() => {
+    const style = computed$1(() => {
       const style2 = {};
       if (props.height)
         style2.height = addUnit(props.height);
@@ -12078,7 +12280,7 @@ const _sfc_main$28 = /* @__PURE__ */ defineComponent({
     const popperInstanceRef = ref();
     const contentRef = ref();
     const referenceRef = ref();
-    const role = computed(() => props.role);
+    const role = computed$1(() => props.role);
     const popperProvides = {
       triggerRef,
       popperInstanceRef,
@@ -12215,22 +12417,22 @@ const _sfc_main$26 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { role, triggerRef } = inject(POPPER_INJECTION_KEY, void 0);
     useForwardRef(triggerRef);
-    const ariaControls = computed(() => {
+    const ariaControls = computed$1(() => {
       return ariaHaspopup.value ? props.id : void 0;
     });
-    const ariaDescribedby = computed(() => {
+    const ariaDescribedby = computed$1(() => {
       if (role && role.value === "tooltip") {
         return props.open && props.id ? props.id : void 0;
       }
       return void 0;
     });
-    const ariaHaspopup = computed(() => {
+    const ariaHaspopup = computed$1(() => {
       if (role && role.value !== "tooltip") {
         return role.value;
       }
       return void 0;
     });
-    const ariaExpanded = computed(() => {
+    const ariaExpanded = computed$1(() => {
       return ariaHaspopup.value ? `${props.open}` : void 0;
     });
     let virtualTriggerAriaStopWatch = void 0;
@@ -12802,15 +13004,15 @@ const _sfc_main$24 = /* @__PURE__ */ defineComponent({
     const contentZIndex = ref(props.zIndex || nextZIndex());
     const trapped = ref(false);
     let triggerTargetAriaStopWatch = void 0;
-    const computedReference = computed(() => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef));
-    const contentStyle = computed(() => [{ zIndex: unref(contentZIndex) }, props.popperStyle]);
-    const contentClass = computed(() => [
+    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(() => {
+    const ariaModal = computed$1(() => {
       return role && role.value === "dialog" ? "false" : void 0;
     });
     const createPopperInstance = ({ referenceEl, popperContentEl, arrowEl }) => {
@@ -13054,23 +13256,23 @@ const _sfc_main$23 = defineComponent({
       onBeforeShow,
       onBeforeHide
     } = inject(TOOLTIP_INJECTION_KEY, void 0);
-    const persistentRef = computed(() => {
+    const persistentRef = computed$1(() => {
       return props.persistent;
     });
     onBeforeUnmount(() => {
       destroyed.value = true;
     });
-    const shouldRender = computed(() => {
+    const shouldRender = computed$1(() => {
       return unref(persistentRef) ? true : unref(open);
     });
-    const shouldShow = computed(() => {
+    const shouldShow = computed$1(() => {
       return props.disabled ? false : unref(open);
     });
-    const contentStyle = computed(() => {
+    const contentStyle = computed$1(() => {
       var _a;
       return (_a = props.style) != null ? _a : {};
     });
-    const ariaHidden = computed(() => !unref(open));
+    const ariaHidden = computed$1(() => !unref(open));
     const onTransitionLeave = () => {
       onHide();
     };
@@ -13098,7 +13300,7 @@ const _sfc_main$23 = defineComponent({
     };
     const onAfterShow = () => {
       onShow();
-      stopHandle = onClickOutside(computed(() => {
+      stopHandle = onClickOutside(computed$1(() => {
         var _a;
         return (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
       }), () => {
@@ -13318,11 +13520,11 @@ const _sfc_main$21 = defineComponent({
   ],
   setup(props, { emit }) {
     usePopperContainer();
-    const compatShowAfter = computed(() => {
+    const compatShowAfter = computed$1(() => {
       if (!isUndefined(props.openDelay)) ;
       return props.openDelay || props.showAfter;
     });
-    const compatShowArrow = computed(() => {
+    const compatShowArrow = computed$1(() => {
       if (!isUndefined(props.visibleArrow)) ;
       return isBoolean(props.visibleArrow) ? props.visibleArrow : props.showArrow;
     });
@@ -13348,7 +13550,7 @@ const _sfc_main$21 = defineComponent({
       open: show,
       close: hide
     });
-    const controlled = computed(() => isBoolean(props.visible) && !hasUpdateHandler.value);
+    const controlled = computed$1(() => isBoolean(props.visible) && !hasUpdateHandler.value);
     provide(TOOLTIP_INJECTION_KEY, {
       controlled,
       id,
@@ -13578,14 +13780,14 @@ const _sfc_main$20 = /* @__PURE__ */ defineComponent({
     const activated = ref(false);
     const suggestionDisabled = ref(false);
     const loading = ref(false);
-    const listboxId = computed(() => ns.b(String(generateId())));
-    const styles = computed(() => rawAttrs.style);
-    const suggestionVisible = computed(() => {
+    const listboxId = computed$1(() => ns.b(String(generateId())));
+    const styles = computed$1(() => rawAttrs.style);
+    const suggestionVisible = computed$1(() => {
       const isValidData = suggestions.value.length > 0;
       return (isValidData || loading.value) && activated.value;
     });
-    const suggestionLoading = computed(() => !props.hideLoading && loading.value);
-    const refInput = computed(() => {
+    const suggestionLoading = computed$1(() => !props.hideLoading && loading.value);
+    const refInput = computed$1(() => {
       if (inputRef.value) {
         return Array.from(inputRef.value.$el.querySelectorAll("input"));
       }
@@ -13927,7 +14129,7 @@ const _sfc_main$1$ = /* @__PURE__ */ defineComponent({
     const props = __props;
     const ns = useNamespace("avatar");
     const hasLoadError = ref(false);
-    const avatarClass = computed(() => {
+    const avatarClass = computed$1(() => {
       const { size, icon, shape } = props;
       const classList = [ns.b()];
       if (isString(size))
@@ -13938,13 +14140,13 @@ const _sfc_main$1$ = /* @__PURE__ */ defineComponent({
         classList.push(ns.m(shape));
       return classList;
     });
-    const sizeStyle = computed(() => {
+    const sizeStyle = computed$1(() => {
       const { size } = props;
       return isNumber(size) ? ns.cssVarBlock({
         size: addUnit(size) || ""
       }) : void 0;
     });
-    const fitStyle = computed(() => ({
+    const fitStyle = computed$1(() => ({
       objectFit: props.fit
     }));
     watch(() => props.src, () => hasLoadError.value = false);
@@ -14015,7 +14217,7 @@ const _sfc_main$1_ = /* @__PURE__ */ defineComponent({
     const el = shallowRef();
     const container = shallowRef();
     const visible = ref(false);
-    const backTopStyle = computed(() => ({
+    const backTopStyle = computed$1(() => ({
       right: `${props.right}px`,
       bottom: `${props.bottom}px`
     }));
@@ -14119,7 +14321,7 @@ const _sfc_main$1Z = /* @__PURE__ */ defineComponent({
   setup(__props, { expose }) {
     const props = __props;
     const ns = useNamespace("badge");
-    const content = computed(() => {
+    const content = computed$1(() => {
       if (props.isDot)
         return "";
       if (isNumber(props.value) && isNumber(props.max)) {
@@ -15202,7 +15404,7 @@ function darken(color, amount = 20) {
 function useButtonCustomStyle(props) {
   const _disabled = useDisabled$1();
   const ns = useNamespace("button");
-  return computed(() => {
+  return computed$1(() => {
     let styles = {};
     const buttonColor = props.color;
     if (buttonColor) {
@@ -15267,20 +15469,20 @@ const _sfc_main$1W = /* @__PURE__ */ defineComponent({
       version: "3.0.0",
       scope: "props",
       ref: "https://element-plus.org/en-US/component/button.html#button-attributes"
-    }, computed(() => props.type === "text"));
+    }, computed$1(() => props.type === "text"));
     const buttonGroupContext = inject(buttonGroupContextKey, void 0);
     const globalConfig = useGlobalConfig("button");
     const ns = useNamespace("button");
     const { form } = useFormItem();
-    const _size = useSize(computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size));
+    const _size = useSize(computed$1(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size));
     const _disabled = useDisabled$1();
     const _ref = ref();
-    const _type = computed(() => props.type || (buttonGroupContext == null ? void 0 : buttonGroupContext.type) || "");
-    const autoInsertSpace = computed(() => {
+    const _type = computed$1(() => props.type || (buttonGroupContext == null ? void 0 : buttonGroupContext.type) || "");
+    const autoInsertSpace = computed$1(() => {
       var _a, _b, _c;
       return (_c = (_b = props.autoInsertSpace) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.autoInsertSpace) != null ? _c : false;
     });
-    const shouldAddSpace = computed(() => {
+    const shouldAddSpace = computed$1(() => {
       var _a;
       const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots);
       if (autoInsertSpace.value && (defaultSlot == null ? void 0 : defaultSlot.length) === 1) {
@@ -16082,7 +16284,7 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
     const emitKeydown = (e) => {
       emit("keydown", e);
     };
-    const refInput = computed(() => {
+    const refInput = computed$1(() => {
       if (inputRef.value) {
         const _r = isRangeInput.value ? inputRef.value : inputRef.value.$el;
         return Array.from(_r.querySelectorAll("input"));
@@ -16176,10 +16378,10 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
       currentHandleBlurDeferCallback = handleBlurDefer;
       handleBlurDefer();
     };
-    const pickerDisabled = computed(() => {
+    const pickerDisabled = computed$1(() => {
       return props.disabled || elForm.disabled;
     });
-    const parsedValue = computed(() => {
+    const parsedValue = computed$1(() => {
       let dayOrDays;
       if (valueIsEmpty.value) {
         if (pickerOptions.value.getDefaultValue) {
@@ -16204,7 +16406,7 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
       }
       return dayOrDays;
     });
-    const displayValue = computed(() => {
+    const displayValue = computed$1(() => {
       if (!pickerOptions.value.panelReady)
         return "";
       const formattedValue = formatDayjsToString(parsedValue.value);
@@ -16225,10 +16427,10 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
       }
       return "";
     });
-    const isTimeLikePicker = computed(() => props.type.includes("time"));
-    const isTimePicker = computed(() => props.type.startsWith("time"));
-    const isDatesPicker = computed(() => props.type === "dates");
-    const triggerIcon = computed(() => props.prefixIcon || (isTimeLikePicker.value ? clock_default : calendar_default));
+    const isTimeLikePicker = computed$1(() => props.type.includes("time"));
+    const isTimePicker = computed$1(() => props.type.startsWith("time"));
+    const isDatesPicker = computed$1(() => props.type === "dates");
+    const triggerIcon = computed$1(() => props.prefixIcon || (isTimeLikePicker.value ? clock_default : calendar_default));
     const showClose = ref(false);
     const onClearIconClick = (event) => {
       if (props.readonly || pickerDisabled.value)
@@ -16243,7 +16445,7 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
         pickerOptions.value.handleClear && pickerOptions.value.handleClear();
       }
     };
-    const valueIsEmpty = computed(() => {
+    const valueIsEmpty = computed$1(() => {
       const { modelValue } = props;
       return !modelValue || isArray(modelValue) && !modelValue.filter(Boolean).length;
     });
@@ -16271,15 +16473,15 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
         pickerVisible.value = true;
       }
     };
-    const isRangeInput = computed(() => {
+    const isRangeInput = computed$1(() => {
       return props.type.includes("range");
     });
     const pickerSize = useSize();
-    const popperEl = computed(() => {
+    const popperEl = computed$1(() => {
       var _a, _b;
       return (_b = (_a = unref(refPopper)) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
     });
-    const actualInputRef = computed(() => {
+    const actualInputRef = computed$1(() => {
       var _a;
       if (unref(isRangeInput)) {
         return unref(inputRef);
@@ -16541,7 +16743,6 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
             ]),
             style: normalizeStyle(_ctx.$attrs.style),
             onClick: handleFocusInput,
-            onMousedown: onMouseDownInput,
             onMouseenter: onMouseEnter,
             onMouseleave: onMouseLeave,
             onTouchstart: onTouchStartInput,
@@ -16567,6 +16768,7 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
               disabled: unref(pickerDisabled),
               readonly: !_ctx.editable || _ctx.readonly,
               class: normalizeClass(unref(nsRange).b("input")),
+              onMousedown: onMouseDownInput,
               onInput: handleStartInput,
               onChange: handleStartChange,
               onFocus: handleFocusInput,
@@ -16586,6 +16788,7 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
               disabled: unref(pickerDisabled),
               readonly: !_ctx.editable || _ctx.readonly,
               class: normalizeClass(unref(nsRange).b("input")),
+              onMousedown: onMouseDownInput,
               onFocus: handleFocusInput,
               onBlur: handleBlurInput,
               onInput: handleEndInput,
@@ -16951,17 +17154,17 @@ const _sfc_main$1T = /* @__PURE__ */ defineComponent({
       minutes: listMinutesRef,
       seconds: listSecondsRef
     };
-    const spinnerItems = computed(() => {
+    const spinnerItems = computed$1(() => {
       return props.showSeconds ? timeUnits : timeUnits.slice(0, 2);
     });
-    const timePartials = computed(() => {
+    const timePartials = computed$1(() => {
       const { spinnerDate } = props;
       const hours = spinnerDate.hour();
       const minutes = spinnerDate.minute();
       const seconds = spinnerDate.second();
       return { hours, minutes, seconds };
     });
-    const timeList = computed(() => {
+    const timeList = computed$1(() => {
       const { hours, minutes } = unref(timePartials);
       return {
         hours: getHoursList(props.role),
@@ -16969,7 +17172,7 @@ const _sfc_main$1T = /* @__PURE__ */ defineComponent({
         seconds: getSecondsList(hours, minutes, props.role)
       };
     });
-    const arrowControlTimeList = computed(() => {
+    const arrowControlTimeList = computed$1(() => {
       const { hours, minutes, seconds } = unref(timePartials);
       return {
         hours: buildTimeList(hours, 23),
@@ -17228,13 +17431,13 @@ const _sfc_main$1S = /* @__PURE__ */ defineComponent({
     const { t, lang } = useLocale();
     const selectionRange = ref([0, 2]);
     const oldValue = useOldValue(props);
-    const transitionName = computed(() => {
+    const transitionName = computed$1(() => {
       return isUndefined(props.actualVisible) ? `${ns.namespace.value}-zoom-in-top` : "";
     });
-    const showSeconds = computed(() => {
+    const showSeconds = computed$1(() => {
       return props.format.includes("ss");
     });
-    const amPmMode = computed(() => {
+    const amPmMode = computed$1(() => {
       if (props.format.includes("A"))
         return "A";
       if (props.format.includes("a"))
@@ -17395,16 +17598,16 @@ const _sfc_main$1R = /* @__PURE__ */ defineComponent({
       disabledSeconds,
       defaultValue
     } = pickerBase.props;
-    const startTime = computed(() => props.parsedValue[0]);
-    const endTime = computed(() => props.parsedValue[1]);
+    const startTime = computed$1(() => props.parsedValue[0]);
+    const endTime = computed$1(() => props.parsedValue[1]);
     const oldValue = useOldValue(props);
     const handleCancel = () => {
       emit("pick", oldValue.value, false);
     };
-    const showSeconds = computed(() => {
+    const showSeconds = computed$1(() => {
       return props.format.includes("ss");
     });
-    const amPmMode = computed(() => {
+    const amPmMode = computed$1(() => {
       if (props.format.includes("A"))
         return "A";
       if (props.format.includes("a"))
@@ -17428,7 +17631,7 @@ const _sfc_main$1R = /* @__PURE__ */ defineComponent({
     const handleChange = (start, end) => {
       emit("pick", [start, end], true);
     };
-    const btnConfirmDisabled = computed(() => {
+    const btnConfirmDisabled = computed$1(() => {
       return startTime.value > endTime.value;
     });
     const selectionRange = ref([0, 2]);
@@ -17436,7 +17639,7 @@ const _sfc_main$1R = /* @__PURE__ */ defineComponent({
       emit("select-range", start, end, "min");
       selectionRange.value = [start, end];
     };
-    const offset = computed(() => showSeconds.value ? 11 : 8);
+    const offset = computed$1(() => showSeconds.value ? 11 : 8);
     const setMaxSelectionRange = (start, end) => {
       emit("select-range", start, end, "max");
       const _offset = unref(offset);
@@ -17735,8 +17938,8 @@ const _sfc_main$1Q = /* @__PURE__ */ defineComponent({
     const nsDay = useNamespace("calendar-day");
     const now = dayjs().locale(lang.value);
     const firstDayOfWeek = now.$locale().weekStart || 0;
-    const isInRange = computed(() => !!props.range && !!props.range.length);
-    const rows = computed(() => {
+    const isInRange = computed$1(() => !!props.range && !!props.range.length);
+    const rows = computed$1(() => {
       let days = [];
       if (isInRange.value) {
         const [start, end] = props.range;
@@ -17771,7 +17974,7 @@ const _sfc_main$1Q = /* @__PURE__ */ defineComponent({
       }
       return toNestedArr(days);
     });
-    const weekDays = computed(() => {
+    const weekDays = computed$1(() => {
       const start = firstDayOfWeek;
       if (start === 0) {
         return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`));
@@ -17892,7 +18095,7 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
     const { t, lang } = useLocale();
     const selectedDay = ref();
     const now = dayjs().locale(lang.value);
-    const realSelectedDay = computed({
+    const realSelectedDay = computed$1({
       get() {
         if (!props.modelValue)
           return selectedDay.value;
@@ -17907,7 +18110,7 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
         emit(UPDATE_MODEL_EVENT, result);
       }
     });
-    const validatedRange = computed(() => {
+    const validatedRange = computed$1(() => {
       if (!props.range)
         return [];
       const rangeArrDayjs = props.range.map((_) => dayjs(_).locale(lang.value));
@@ -17924,7 +18127,7 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
         return calculateValidatedDateRange(startDayjs, endDayjs);
       }
     });
-    const date = computed(() => {
+    const date = computed$1(() => {
       if (!props.modelValue) {
         if (realSelectedDay.value) {
           return realSelectedDay.value;
@@ -17936,11 +18139,11 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
         return dayjs(props.modelValue).locale(lang.value);
       }
     });
-    const prevMonthDayjs = computed(() => date.value.subtract(1, "month").date(1));
-    const nextMonthDayjs = computed(() => date.value.add(1, "month").date(1));
-    const prevYearDayjs = computed(() => date.value.subtract(1, "year").date(1));
-    const nextYearDayjs = computed(() => date.value.add(1, "year").date(1));
-    const i18nDate = computed(() => {
+    const prevMonthDayjs = computed$1(() => date.value.subtract(1, "month").date(1));
+    const nextMonthDayjs = computed$1(() => date.value.add(1, "month").date(1));
+    const prevYearDayjs = computed$1(() => date.value.subtract(1, "year").date(1));
+    const nextYearDayjs = computed$1(() => date.value.add(1, "year").date(1));
+    const i18nDate = computed$1(() => {
       const pickedMonth = `el.datepicker.month${date.value.format("M")}`;
       return `${date.value.year()} ${t("el.datepicker.year")} ${t(pickedMonth)}`;
     });
@@ -18226,18 +18429,19 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
     const hover = ref(false);
     const root = ref();
     const items = ref([]);
-    const arrowDisplay = computed(() => props.arrow !== "never" && !unref(isVertical));
-    const hasLabel = computed(() => {
+    const arrowDisplay = computed$1(() => props.arrow !== "never" && !unref(isVertical));
+    const interval = computed$1(() => props.interval);
+    const hasLabel = computed$1(() => {
       return items.value.some((item) => item.props.label.toString().length > 0);
     });
-    const carouselClasses = computed(() => {
+    const carouselClasses = computed$1(() => {
       const classes = [ns.b(), ns.m(props.direction)];
       if (unref(isCardType)) {
         classes.push(ns.m("card"));
       }
       return classes;
     });
-    const indicatorsClasses = computed(() => {
+    const indicatorsClasses = computed$1(() => {
       const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
       if (hasLabel.value) {
         classes.push(ns.em("indicators", "labels"));
@@ -18247,8 +18451,8 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
       }
       return classes;
     });
-    const isCardType = computed(() => props.type === "card");
-    const isVertical = computed(() => props.direction === "vertical");
+    const isCardType = computed$1(() => props.type === "card");
+    const isVertical = computed$1(() => props.direction === "vertical");
     const throttledArrowClick = throttle((index) => {
       setActiveItem(index);
     }, THROTTLE_TIME, { trailing: true });
@@ -18262,9 +18466,9 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
       }
     }
     function startTimer() {
-      if (props.interval <= 0 || !props.autoplay || timer.value)
+      if (interval.value <= 0 || !props.autoplay || timer.value)
         return;
-      timer.value = setInterval(() => playSlides(), props.interval);
+      timer.value = setInterval(() => playSlides(), interval.value);
     }
     const playSlides = () => {
       if (activeIndex.value < items.value.length - 1) {
@@ -18543,7 +18747,7 @@ const _sfc_main$1M = /* @__PURE__ */ defineComponent({
     const inStage = ref(false);
     const animating = ref(false);
     const { isCardType, isVertical } = carouselContext;
-    const itemStyle = computed(() => {
+    const itemStyle = computed$1(() => {
       const translateType = `translate${unref(isVertical) ? "Y" : "X"}`;
       const _translate = `${translateType}(${unref(translate)}px)`;
       const _scale = `scale(${unref(scale)})`;
@@ -18749,8 +18953,8 @@ const useCheckboxGroup = () => {
   const elForm = inject(formContextKey, {});
   const elFormItem = inject(formItemContextKey, {});
   const checkboxGroup = inject("CheckboxGroup", {});
-  const isGroup = computed(() => checkboxGroup && (checkboxGroup == null ? void 0 : checkboxGroup.name) === "ElCheckboxGroup");
-  const elFormItemSize = computed(() => {
+  const isGroup = computed$1(() => checkboxGroup && (checkboxGroup == null ? void 0 : checkboxGroup.name) === "ElCheckboxGroup");
+  const elFormItemSize = computed$1(() => {
     return elFormItem.size;
   });
   return {
@@ -18775,7 +18979,7 @@ const useModel = (props) => {
   const { emit } = getCurrentInstance();
   const { isGroup, checkboxGroup, elFormItem } = useCheckboxGroup();
   const isLimitExceeded = ref(false);
-  const model = computed({
+  const model = computed$1({
     get() {
       var _a, _b;
       return isGroup.value ? (_a = checkboxGroup.modelValue) == null ? void 0 : _a.value : (_b = props.modelValue) != null ? _b : selfModel.value;
@@ -18802,7 +19006,7 @@ const useCheckboxStatus = (props, slots, { model }) => {
   const { isGroup, checkboxGroup } = useCheckboxGroup();
   const focus = ref(false);
   const size = useSize(checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize, { prop: true });
-  const isChecked = computed(() => {
+  const isChecked = computed$1(() => {
     const value = model.value;
     if (toTypeString(value) === "[object Boolean]") {
       return value;
@@ -18814,11 +19018,11 @@ const useCheckboxStatus = (props, slots, { model }) => {
       return !!value;
     }
   });
-  const checkboxSize = useSize(computed(() => {
+  const checkboxSize = useSize(computed$1(() => {
     var _a;
     return isGroup.value ? (_a = checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) == null ? void 0 : _a.value : void 0;
   }));
-  const hasOwnLabel = computed(() => {
+  const hasOwnLabel = computed$1(() => {
     return !!(slots.default || props.label);
   });
   return {
@@ -18834,13 +19038,13 @@ const useDisabled = (props, {
   isChecked
 }) => {
   const { elForm, isGroup, checkboxGroup } = useCheckboxGroup();
-  const isLimitDisabled = computed(() => {
+  const isLimitDisabled = computed$1(() => {
     var _a, _b;
     const max = (_a = checkboxGroup.max) == null ? void 0 : _a.value;
     const min = (_b = checkboxGroup.min) == null ? void 0 : _b.value;
     return !!(max || min) && model.value.length >= max && !isChecked.value || model.value.length <= min && isChecked.value;
   });
-  const isDisabled = computed(() => {
+  const isDisabled = computed$1(() => {
     var _a, _b;
     const disabled = props.disabled || (elForm == null ? void 0 : elForm.disabled);
     return (_b = isGroup.value ? ((_a = checkboxGroup.disabled) == null ? void 0 : _a.value) || disabled || isLimitDisabled.value : disabled) != null ? _b : false;
@@ -18891,7 +19095,7 @@ const useEvent$1 = (props, {
       emitChangeEvent(model.value, e);
     }
   }
-  const validateEvent = computed(() => {
+  const validateEvent = computed$1(() => {
     var _a;
     return ((_a = checkboxGroup.validateEvent) == null ? void 0 : _a.value) || props.validateEvent;
   });
@@ -19071,7 +19275,7 @@ const _sfc_main$1K = /* @__PURE__ */ defineComponent({
     const { focus, isChecked, isDisabled, size, model, handleChange } = useCheckbox(props, slots);
     const { checkboxGroup } = useCheckboxGroup();
     const ns = useNamespace("checkbox");
-    const activeStyle = computed(() => {
+    const activeStyle = computed$1(() => {
       var _a, _b, _c, _d;
       const fillValue = (_b = (_a = checkboxGroup == null ? void 0 : checkboxGroup.fill) == null ? void 0 : _a.value) != null ? _b : "";
       return {
@@ -19157,7 +19361,7 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
         emit("change", value);
       });
     };
-    const modelValue = computed({
+    const modelValue = computed$1({
       get() {
         return props.modelValue;
       },
@@ -19167,8 +19371,8 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
     });
     provide("CheckboxGroup", {
       name: "ElCheckboxGroup",
-      modelValue,
       ...toRefs(props),
+      modelValue,
       checkboxGroupSize,
       changeEvent
     });
@@ -19231,8 +19435,8 @@ const radioEmits = {
 const useRadio = (props, emit) => {
   const radioRef = ref();
   const radioGroup = inject(radioGroupKey, void 0);
-  const isGroup = computed(() => !!radioGroup);
-  const modelValue = computed({
+  const isGroup = computed$1(() => !!radioGroup);
+  const modelValue = computed$1({
     get() {
       return isGroup.value ? radioGroup.modelValue : props.modelValue;
     },
@@ -19245,10 +19449,10 @@ const useRadio = (props, emit) => {
       radioRef.value.checked = props.modelValue === props.label;
     }
   });
-  const size = useSize(computed(() => radioGroup == null ? void 0 : radioGroup.size));
-  const disabled = useDisabled$1(computed(() => radioGroup == null ? void 0 : radioGroup.disabled));
+  const size = useSize(computed$1(() => radioGroup == null ? void 0 : radioGroup.size));
+  const disabled = useDisabled$1(computed$1(() => radioGroup == null ? void 0 : radioGroup.disabled));
   const focus = ref(false);
-  const tabIndex = computed(() => {
+  const tabIndex = computed$1(() => {
     return disabled.value || isGroup.value && modelValue.value !== props.label ? -1 : 0;
   });
   return {
@@ -19350,7 +19554,7 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
     const props = __props;
     const ns = useNamespace("radio");
     const { radioRef, focus, size, disabled, modelValue, radioGroup } = useRadio(props);
-    const activeStyle = computed(() => {
+    const activeStyle = computed$1(() => {
       return {
         backgroundColor: (radioGroup == null ? void 0 : radioGroup.fill) || "",
         borderColor: (radioGroup == null ? void 0 : radioGroup.fill) || "",
@@ -19461,7 +19665,7 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
         firstLabel.tabIndex = 0;
       }
     });
-    const name = computed(() => {
+    const name = computed$1(() => {
       return props.name || radioId.value;
     });
     provide(radioGroupKey, reactive({
@@ -19544,18 +19748,18 @@ const _sfc_main$1F = defineComponent({
   setup(props, { emit }) {
     const panel = inject(CASCADER_PANEL_INJECTION_KEY);
     const ns = useNamespace("cascader-node");
-    const isHoverMenu = computed(() => panel.isHoverMenu);
-    const multiple = computed(() => panel.config.multiple);
-    const checkStrictly = computed(() => panel.config.checkStrictly);
-    const checkedNodeId = computed(() => {
+    const isHoverMenu = computed$1(() => panel.isHoverMenu);
+    const multiple = computed$1(() => panel.config.multiple);
+    const checkStrictly = computed$1(() => panel.config.checkStrictly);
+    const checkedNodeId = computed$1(() => {
       var _a;
       return (_a = panel.checkedNodes[0]) == null ? void 0 : _a.uid;
     });
-    const isDisabled = computed(() => props.node.isDisabled);
-    const isLeaf = computed(() => props.node.isLeaf);
-    const expandable = computed(() => checkStrictly.value && !isLeaf.value || !isDisabled.value);
-    const inExpandingPath = computed(() => isInPath(panel.expandingNode));
-    const inCheckedPath = computed(() => checkStrictly.value && panel.checkedNodes.some(isInPath));
+    const isDisabled = computed$1(() => props.node.isDisabled);
+    const isLeaf = computed$1(() => props.node.isLeaf);
+    const expandable = computed$1(() => checkStrictly.value && !isLeaf.value || !isDisabled.value);
+    const inExpandingPath = computed$1(() => isInPath(panel.expandingNode));
+    const inCheckedPath = computed$1(() => checkStrictly.value && panel.checkedNodes.some(isInPath));
     const isInPath = (node) => {
       var _a;
       const { level, uid } = props.node;
@@ -19751,9 +19955,9 @@ const _sfc_main$1E = defineComponent({
     let hoverTimer = null;
     const panel = inject(CASCADER_PANEL_INJECTION_KEY);
     const hoverZone = ref(null);
-    const isEmpty = computed(() => !props.nodes.length);
-    const isLoading = computed(() => !panel.initialLoaded);
-    const menuId = computed(() => `cascader-menu-${id}-${props.index}`);
+    const isEmpty = computed$1(() => !props.nodes.length);
+    const isLoading = computed$1(() => !panel.initialLoaded);
+    const menuId = computed$1(() => `cascader-menu-${id}-${props.index}`);
     const handleExpand = (e) => {
       activeNode = e.target;
     };
@@ -20052,7 +20256,7 @@ const DefaultProps = {
   hoverThreshold: 500
 };
 const useCascaderConfig = (props) => {
-  return computed(() => ({
+  return computed$1(() => ({
     ...DefaultProps,
     ...props.props
   }));
@@ -20115,8 +20319,8 @@ const _sfc_main$1D = defineComponent({
     const menus = ref([]);
     const expandingNode = ref(null);
     const checkedNodes = ref([]);
-    const isHoverMenu = computed(() => config.value.expandTrigger === ExpandTrigger.HOVER);
-    const renderLabelFn = computed(() => props.renderLabel || slots.default);
+    const isHoverMenu = computed$1(() => config.value.expandTrigger === ExpandTrigger.HOVER);
+    const renderLabelFn = computed$1(() => props.renderLabel || slots.default);
     const initStore = () => {
       const { options } = props;
       const cfg = config.value;
@@ -20396,7 +20600,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     const props = __props;
     const tagSize = useSize();
     const ns = useNamespace("tag");
-    const classes = computed(() => {
+    const classes = computed$1(() => {
       const { type, hit, effect, closable, round } = props;
       return [
         ns.b(),
@@ -20591,28 +20795,28 @@ const _sfc_main$1B = defineComponent({
     const allPresentTags = ref([]);
     const suggestions = ref([]);
     const isOnComposition = ref(false);
-    const isDisabled = computed(() => props.disabled || elForm.disabled);
-    const inputPlaceholder = computed(() => props.placeholder || t("el.cascader.placeholder"));
+    const isDisabled = computed$1(() => props.disabled || elForm.disabled);
+    const inputPlaceholder = computed$1(() => props.placeholder || t("el.cascader.placeholder"));
     const realSize = useSize();
-    const tagSize = computed(() => ["small"].includes(realSize.value) ? "small" : "default");
-    const multiple = computed(() => !!props.props.multiple);
-    const readonly = computed(() => !props.filterable || multiple.value);
-    const searchKeyword = computed(() => multiple.value ? searchInputValue.value : inputValue.value);
-    const checkedNodes = computed(() => {
+    const tagSize = computed$1(() => ["small"].includes(realSize.value) ? "small" : "default");
+    const multiple = computed$1(() => !!props.props.multiple);
+    const readonly = computed$1(() => !props.filterable || multiple.value);
+    const searchKeyword = computed$1(() => multiple.value ? searchInputValue.value : inputValue.value);
+    const checkedNodes = computed$1(() => {
       var _a;
       return ((_a = panel.value) == null ? void 0 : _a.checkedNodes) || [];
     });
-    const clearBtnVisible = computed(() => {
+    const clearBtnVisible = computed$1(() => {
       if (!props.clearable || isDisabled.value || filtering.value || !inputHover.value)
         return false;
       return !!checkedNodes.value.length;
     });
-    const presentText = computed(() => {
+    const presentText = computed$1(() => {
       const { showAllLevels, separator } = props;
       const nodes = checkedNodes.value;
       return nodes.length ? multiple.value ? " " : nodes[0].calcText(showAllLevels, separator) : "";
     });
-    const checkedValue = computed({
+    const checkedValue = computed$1({
       get() {
         return props.modelValue;
       },
@@ -20625,7 +20829,7 @@ const _sfc_main$1B = defineComponent({
         }
       }
     });
-    const popperPaneRef = computed(() => {
+    const popperPaneRef = computed$1(() => {
       var _a, _b;
       return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
     });
@@ -20933,7 +21137,6 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_el_tooltip, {
     ref: "tooltipRef",
     visible: _ctx.popperVisible,
-    "onUpdate:visible": _cache[17] || (_cache[17] = ($event) => _ctx.popperVisible = $event),
     teleported: _ctx.teleported,
     "popper-class": [_ctx.nsCascader.e("dropdown"), _ctx.popperClass],
     "popper-options": _ctx.popperOptions,
@@ -21247,16 +21450,16 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   props: colProps,
   setup(__props) {
     const props = __props;
-    const { gutter } = inject(rowContextKey, { gutter: computed(() => 0) });
+    const { gutter } = inject(rowContextKey, { gutter: computed$1(() => 0) });
     const ns = useNamespace("col");
-    const style = computed(() => {
+    const style = computed$1(() => {
       const styles = {};
       if (gutter.value) {
         styles.paddingLeft = styles.paddingRight = `${gutter.value / 2}px`;
       }
       return styles;
     });
-    const classes = computed(() => {
+    const classes = computed$1(() => {
       const classes2 = [];
       const pos = ["span", "offset", "pull", "push"];
       pos.forEach((prop) => {
@@ -21473,7 +21676,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     const focusing = ref(false);
     const isClick = ref(false);
     const id = ref(generateId());
-    const isActive = computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(props.name));
+    const isActive = computed$1(() => collapse == null ? void 0 : collapse.activeNames.value.includes(props.name));
     const handleFocus = () => {
       setTimeout(() => {
         if (!isClick.value) {
@@ -21578,10 +21781,10 @@ function draggable(element, options) {
   };
   const upFn = function(event) {
     var _a;
-    off(document, "mousemove", moveFn);
-    off(document, "mouseup", upFn);
-    off(document, "touchmove", moveFn);
-    off(document, "touchend", upFn);
+    document.removeEventListener("mousemove", moveFn);
+    document.removeEventListener("mouseup", upFn);
+    document.removeEventListener("touchmove", moveFn);
+    document.removeEventListener("touchend", upFn);
     document.onselectstart = null;
     document.ondragstart = null;
     isDragging = false;
@@ -21594,15 +21797,15 @@ function draggable(element, options) {
     event.preventDefault();
     document.onselectstart = () => false;
     document.ondragstart = () => false;
-    on$1(document, "mousemove", moveFn);
-    on$1(document, "mouseup", upFn);
-    on$1(document, "touchmove", moveFn);
-    on$1(document, "touchend", upFn);
+    document.addEventListener("mousemove", moveFn);
+    document.addEventListener("mouseup", upFn);
+    document.addEventListener("touchmove", moveFn);
+    document.addEventListener("touchend", upFn);
     isDragging = true;
     (_a = options.start) == null ? void 0 : _a.call(options, event);
   };
-  on$1(element, "mousedown", downFn);
-  on$1(element, "touchstart", downFn);
+  document.addEventListener("mousedown", downFn);
+  document.addEventListener("touchstart", downFn);
 }
 
 const _sfc_main$1v = defineComponent({
@@ -21748,7 +21951,7 @@ const _sfc_main$1u = defineComponent({
     const bar = ref(null);
     const thumbLeft = ref(0);
     const thumbTop = ref(0);
-    const hueValue = computed(() => {
+    const hueValue = computed$1(() => {
       return props.color.get("hue");
     });
     watch(() => hueValue.value, () => {
@@ -22206,7 +22409,7 @@ const _sfc_main$1s = defineComponent({
     const cursorTop = ref(0);
     const cursorLeft = ref(0);
     const background = ref("hsl(0, 100%, 50%)");
-    const colorValue = computed(() => {
+    const colorValue = computed$1(() => {
       const hue = props.color.get("hue");
       const value = props.color.get("value");
       return { hue, value };
@@ -22354,23 +22557,23 @@ const _sfc_main$1r = defineComponent({
     const showPicker = ref(false);
     const showPanelColor = ref(false);
     const customInput = ref("");
-    const displayedColor = computed(() => {
+    const displayedColor = computed$1(() => {
       if (!props.modelValue && !showPanelColor.value) {
         return "transparent";
       }
       return displayedRgb(color, props.showAlpha);
     });
     const colorSize = useSize();
-    const colorDisabled = computed(() => {
+    const colorDisabled = computed$1(() => {
       return !!(props.disabled || elForm.disabled);
     });
-    const currentColor = computed(() => {
+    const currentColor = computed$1(() => {
       return !props.modelValue && !showPanelColor.value ? "" : color.value;
     });
-    const buttonAriaLabel = computed(() => {
+    const buttonAriaLabel = computed$1(() => {
       return !isLabeledByFormItem.value ? props.label || t("el.colorpicker.defaultLabel") : void 0;
     });
-    const buttonAriaLabelledby = computed(() => {
+    const buttonAriaLabelledby = computed$1(() => {
       return isLabeledByFormItem.value ? elFormItem.labelId : void 0;
     });
     watch(() => props.modelValue, (newVal) => {
@@ -22513,7 +22716,6 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_el_tooltip, {
     ref: "popper",
     visible: _ctx.showPicker,
-    "onUpdate:visible": _cache[3] || (_cache[3] = ($event) => _ctx.showPicker = $event),
     "show-arrow": false,
     "fallback-placements": ["bottom", "top", "right", "left"],
     offset: 0,
@@ -22718,7 +22920,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
     const props = __props;
     const slots = useSlots();
     const ns = useNamespace("container");
-    const isVertical = computed(() => {
+    const isVertical = computed$1(() => {
       if (props.direction === "vertical") {
         return true;
       } else if (props.direction === "horizontal") {
@@ -22759,7 +22961,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const ns = useNamespace("aside");
-    const style = computed(() => props.width ? ns.cssVarBlock({ width: props.width }) : {});
+    const style = computed$1(() => props.width ? ns.cssVarBlock({ width: props.width }) : {});
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("aside", {
         class: normalizeClass(unref(ns).b()),
@@ -22786,7 +22988,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const ns = useNamespace("footer");
-    const style = computed(() => props.height ? ns.cssVarBlock({ height: props.height }) : {});
+    const style = computed$1(() => props.height ? ns.cssVarBlock({ height: props.height }) : {});
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("footer", {
         class: normalizeClass(unref(ns).b()),
@@ -22813,7 +23015,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const ns = useNamespace("header");
-    const style = computed(() => {
+    const style = computed$1(() => {
       return props.height ? ns.cssVarBlock({
         height: props.height
       }) : {};
@@ -23210,22 +23412,22 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     let focusWithClick = false;
     const firstDayOfWeek = props.date.$locale().weekStart || 7;
     const WEEKS_CONSTANT = props.date.locale("en").localeData().weekdaysShort().map((_) => _.toLowerCase());
-    const offsetDay = computed(() => {
+    const offsetDay = computed$1(() => {
       return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
     });
-    const startDate = computed(() => {
+    const startDate = computed$1(() => {
       const startDayOfMonth = props.date.startOf("month");
       return startDayOfMonth.subtract(startDayOfMonth.day() || 7, "day");
     });
-    const WEEKS = computed(() => {
+    const WEEKS = computed$1(() => {
       return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7);
     });
-    const hasCurrent = computed(() => {
+    const hasCurrent = computed$1(() => {
       return rows.value.flat().some((row) => {
         return row.isCurrent;
       });
     });
-    const days = computed(() => {
+    const days = computed$1(() => {
       const startOfMonth = props.date.startOf("month");
       const startOfMonthDay = startOfMonth.day() || 7;
       const dateCountOfMonth = startOfMonth.daysInMonth();
@@ -23236,7 +23438,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
         dateCountOfLastMonth
       };
     });
-    const selectedDate = computed(() => {
+    const selectedDate = computed$1(() => {
       return props.selectionMode === "dates" ? castArray(props.parsedValue) : [];
     });
     const setDateText = (cell, {
@@ -23291,7 +23493,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
         row[end].end = isActive;
       }
     };
-    const rows = computed(() => {
+    const rows = computed$1(() => {
       const { minDate, maxDate, rangeState, showWeekNumber } = props;
       const offset = offsetDay.value;
       const rows_ = tableRows.value;
@@ -23572,7 +23774,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     ]);
     const lastRow = ref();
     const lastColumn = ref();
-    const rows = computed(() => {
+    const rows = computed$1(() => {
       var _a, _b;
       const rows2 = tableRows.value;
       const now = dayjs().locale(lang.value).startOf("month");
@@ -23771,7 +23973,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     const { t, lang } = useLocale();
     const tbodyRef = ref();
     const currentCellRef = ref();
-    const startYear = computed(() => {
+    const startYear = computed$1(() => {
       return Math.floor(props.date.year() / 10) * 10;
     });
     const focus = () => {
@@ -23874,13 +24076,13 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     const defaultValue = toRef(pickerBase.props, "defaultValue");
     const currentViewRef = ref();
     const innerDate = ref(dayjs().locale(lang.value));
-    const defaultTimeD = computed(() => {
+    const defaultTimeD = computed$1(() => {
       return dayjs(defaultTime).locale(lang.value);
     });
-    const month = computed(() => {
+    const month = computed$1(() => {
       return innerDate.value.month();
     });
-    const year = computed(() => {
+    const year = computed$1(() => {
       return innerDate.value.year();
     });
     const selectableRange = ref([]);
@@ -23936,7 +24138,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
       handlePanelChange("year");
     };
     const currentView = ref("date");
-    const yearLabel = computed(() => {
+    const yearLabel = computed$1(() => {
       const yearTranslation = t("el.datepicker.year");
       if (currentView.value === "year") {
         const startYear = Math.floor(year.value / 10) * 10;
@@ -23961,16 +24163,16 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
         });
       }
     };
-    const selectionMode = computed(() => {
+    const selectionMode = computed$1(() => {
       const { type } = props;
       if (["week", "month", "year", "dates"].includes(type))
         return type;
       return "date";
     });
-    const keyboardMode = computed(() => {
+    const keyboardMode = computed$1(() => {
       return selectionMode.value === "date" ? currentView.value : selectionMode.value;
     });
-    const hasShortcuts = computed(() => !!shortcuts.length);
+    const hasShortcuts = computed$1(() => !!shortcuts.length);
     const handleMonthPick = async (month2) => {
       innerDate.value = innerDate.value.startOf("month").month(month2);
       if (selectionMode.value === "month") {
@@ -24005,8 +24207,8 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
       await nextTick();
       handleFocusPicker();
     };
-    const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
-    const footerVisible = computed(() => {
+    const showTime = computed$1(() => props.type === "datetime" || props.type === "datetimerange");
+    const footerVisible = computed$1(() => {
       return showTime.value || selectionMode.value === "dates";
     });
     const onConfirm = () => {
@@ -24031,20 +24233,20 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
         emit(innerDate.value);
       }
     };
-    const timeFormat = computed(() => {
+    const timeFormat = computed$1(() => {
       return extractTimeFormat(props.format);
     });
-    const dateFormat = computed(() => {
+    const dateFormat = computed$1(() => {
       return extractDateFormat(props.format);
     });
-    const visibleTime = computed(() => {
+    const visibleTime = computed$1(() => {
       if (userInputTime.value)
         return userInputTime.value;
       if (!props.parsedValue && !defaultValue.value)
         return;
       return (props.parsedValue || innerDate.value).format(timeFormat.value);
     });
-    const visibleDate = computed(() => {
+    const visibleDate = computed$1(() => {
       if (userInputDate.value)
         return userInputDate.value;
       if (!props.parsedValue && !defaultValue.value)
@@ -24633,57 +24835,57 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
       min: null,
       max: null
     });
-    const leftLabel = computed(() => {
+    const leftLabel = computed$1(() => {
       return `${leftDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${leftDate.value.month() + 1}`)}`;
     });
-    const rightLabel = computed(() => {
+    const rightLabel = computed$1(() => {
       return `${rightDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${rightDate.value.month() + 1}`)}`;
     });
-    const leftYear = computed(() => {
+    const leftYear = computed$1(() => {
       return leftDate.value.year();
     });
-    const leftMonth = computed(() => {
+    const leftMonth = computed$1(() => {
       return leftDate.value.month();
     });
-    const rightYear = computed(() => {
+    const rightYear = computed$1(() => {
       return rightDate.value.year();
     });
-    const rightMonth = computed(() => {
+    const rightMonth = computed$1(() => {
       return rightDate.value.month();
     });
-    const hasShortcuts = computed(() => !!shortcuts.value.length);
-    const minVisibleDate = computed(() => {
+    const hasShortcuts = computed$1(() => !!shortcuts.value.length);
+    const minVisibleDate = computed$1(() => {
       if (dateUserInput.value.min !== null)
         return dateUserInput.value.min;
       if (minDate.value)
         return minDate.value.format(dateFormat.value);
       return "";
     });
-    const maxVisibleDate = computed(() => {
+    const maxVisibleDate = computed$1(() => {
       if (dateUserInput.value.max !== null)
         return dateUserInput.value.max;
       if (maxDate.value || minDate.value)
         return (maxDate.value || minDate.value).format(dateFormat.value);
       return "";
     });
-    const minVisibleTime = computed(() => {
+    const minVisibleTime = computed$1(() => {
       if (timeUserInput.value.min !== null)
         return timeUserInput.value.min;
       if (minDate.value)
         return minDate.value.format(timeFormat.value);
       return "";
     });
-    const maxVisibleTime = computed(() => {
+    const maxVisibleTime = computed$1(() => {
       if (timeUserInput.value.max !== null)
         return timeUserInput.value.max;
       if (maxDate.value || minDate.value)
         return (maxDate.value || minDate.value).format(timeFormat.value);
       return "";
     });
-    const timeFormat = computed(() => {
+    const timeFormat = computed$1(() => {
       return extractTimeFormat(format);
     });
-    const dateFormat = computed(() => {
+    const dateFormat = computed$1(() => {
       return extractDateFormat(format);
     });
     const leftPrevYear = () => {
@@ -24737,18 +24939,18 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     const handlePanelChange = (mode) => {
       emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
     };
-    const enableMonthArrow = computed(() => {
+    const enableMonthArrow = computed$1(() => {
       const nextMonth = (leftMonth.value + 1) % 12;
       const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0;
       return props.unlinkPanels && new Date(leftYear.value + yearOffset, nextMonth) < new Date(rightYear.value, rightMonth.value);
     });
-    const enableYearArrow = computed(() => {
+    const enableYearArrow = computed$1(() => {
       return props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12;
     });
-    const btnDisabled = computed(() => {
+    const btnDisabled = computed$1(() => {
       return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidRange([minDate.value, maxDate.value]));
     });
-    const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
+    const showTime = computed$1(() => props.type === "datetime" || props.type === "datetimerange");
     const formatEmit = (emitDayjs, index) => {
       if (!emitDayjs)
         return;
@@ -25248,16 +25450,16 @@ const useMonthRangeHeader = ({
   const rightPrevYear = () => {
     rightDate.value = rightDate.value.subtract(1, "year");
   };
-  const leftLabel = computed(() => {
+  const leftLabel = computed$1(() => {
     return `${leftDate.value.year()} ${t("el.datepicker.year")}`;
   });
-  const rightLabel = computed(() => {
+  const rightLabel = computed$1(() => {
     return `${rightDate.value.year()} ${t("el.datepicker.year")}`;
   });
-  const leftYear = computed(() => {
+  const leftYear = computed$1(() => {
     return leftDate.value.year();
   });
-  const rightYear = computed(() => {
+  const rightYear = computed$1(() => {
     return rightDate.value.year() === leftDate.value.year() ? leftDate.value.year() + 1 : rightDate.value.year();
   });
   return {
@@ -25308,7 +25510,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
       unit,
       onParsedValueChanged
     });
-    const hasShortcuts = computed(() => !!shortcuts.length);
+    const hasShortcuts = computed$1(() => !!shortcuts.length);
     const {
       leftPrevYear,
       rightNextYear,
@@ -25323,7 +25525,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
       leftDate,
       rightDate
     });
-    const enableYearArrow = computed(() => {
+    const enableYearArrow = computed$1(() => {
       return props.unlinkPanels && rightYear.value > leftYear.value + 1;
     });
     const handleRangePick = (val, close = true) => {
@@ -25749,7 +25951,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     const descriptionsSize = useSize();
     const slots = useSlots();
     provide(descriptionsKey, props);
-    const descriptionKls = computed(() => [ns.b(), ns.m(descriptionsSize.value)]);
+    const descriptionKls = computed$1(() => [ns.b(), ns.m(descriptionsSize.value)]);
     const flattedChildren = (children) => {
       const temp = Array.isArray(children) ? children : [children];
       const res = [];
@@ -26003,7 +26205,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
     const { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey);
     const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY);
     const composedDialogRef = composeRefs(focusTrapRef, dialogRef);
-    const draggable = computed(() => props.draggable);
+    const draggable = computed$1(() => props.draggable);
     useDraggable(dialogRef, headerRef, draggable);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -26146,7 +26348,7 @@ const useDialog = (props, targetRef) => {
   let openTimer = void 0;
   let closeTimer = void 0;
   const namespace = useGlobalConfig("namespace", defaultNamespace);
-  const style = computed(() => {
+  const style = computed$1(() => {
     const style2 = {};
     const varPrefix = `--${namespace.value}-dialog`;
     if (!props.fullscreen) {
@@ -26303,7 +26505,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
       replacement: "the header slot",
       version: "3.0.0",
       ref: "https://element-plus.org/en-US/component/dialog.html#slots"
-    }, computed(() => !!slots.title));
+    }, computed$1(() => !!slots.title));
     const ns = useNamespace("dialog");
     const dialogRef = ref();
     const headerRef = ref();
@@ -26333,7 +26535,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
       style
     });
     const overlayEvent = useSameTarget(onModalClick);
-    const draggable = computed(() => props.draggable && !props.fullscreen);
+    const draggable = computed$1(() => props.draggable && !props.fullscreen);
     expose({
       visible,
       dialogContentRef
@@ -26457,7 +26659,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const ns = useNamespace("divider");
-    const dividerStyle = computed(() => {
+    const dividerStyle = computed$1(() => {
       return ns.cssVar({
         "border-style": props.borderStyle
       });
@@ -26521,13 +26723,13 @@ const _sfc_main$1a = defineComponent({
       replacement: "the header slot",
       version: "3.0.0",
       ref: "https://element-plus.org/en-US/component/drawer.html#slots"
-    }, computed(() => !!slots.title));
+    }, computed$1(() => !!slots.title));
     const drawerRef = ref();
     const focusStartRef = ref();
     const ns = useNamespace("drawer");
     const { t } = useLocale();
-    const isHorizontal = computed(() => props.direction === "rtl" || props.direction === "ltr");
-    const drawerSize = computed(() => addUnit(props.size));
+    const isHorizontal = computed$1(() => props.direction === "rtl" || props.direction === "ltr");
+    const drawerSize = computed$1(() => addUnit(props.size));
     return {
       ...useDialog(props, drawerRef),
       drawerRef,
@@ -26823,7 +27025,7 @@ const _sfc_main$17 = defineComponent({
     const isClickFocus = ref(false);
     const rovingFocusGroupRef = ref(null);
     const { getItems } = inject(COLLECTION_INJECTION_KEY$1, void 0);
-    const rovingFocusGroupRootStyle = computed(() => {
+    const rovingFocusGroupRootStyle = computed$1(() => {
       return [
         {
           outline: "none"
@@ -26875,7 +27077,7 @@ const _sfc_main$17 = defineComponent({
     provide(ROVING_FOCUS_GROUP_INJECTION_KEY, {
       currentTabbedId: readonly(currentTabbedId),
       loop: toRef(props, "loop"),
-      tabIndex: computed(() => {
+      tabIndex: computed$1(() => {
         return unref(isBackingOut) ? -1 : 0;
       }),
       rovingFocusGroupRef,
@@ -26891,14 +27093,7 @@ const _sfc_main$17 = defineComponent({
     watch(() => props.currentTabId, (val) => {
       currentTabbedId.value = val != null ? val : null;
     });
-    onMounted(() => {
-      const rovingFocusGroupEl = unref(rovingFocusGroupRef);
-      on$1(rovingFocusGroupEl, ENTRY_FOCUS_EVT, handleEntryFocus);
-    });
-    onBeforeUnmount(() => {
-      const rovingFocusGroupEl = unref(rovingFocusGroupRef);
-      off(rovingFocusGroupEl, ENTRY_FOCUS_EVT, handleEntryFocus);
-    });
+    useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus);
   }
 });
 function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
@@ -26999,10 +27194,10 @@ const _sfc_main$15 = defineComponent({
         });
       }
     });
-    const isCurrentTab = computed(() => currentTabbedId.value === unref(id));
+    const isCurrentTab = computed$1(() => currentTabbedId.value === unref(id));
     provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {
       rovingFocusGroupItemRef,
-      tabIndex: computed(() => unref(isCurrentTab) ? 0 : -1),
+      tabIndex: computed$1(() => unref(isCurrentTab) ? 0 : -1),
       handleMousedown,
       handleFocus,
       handleKeydown
@@ -27152,12 +27347,12 @@ const _sfc_main$14 = defineComponent({
     const currentTabId = ref(null);
     const isUsingKeyboard = ref(false);
     const triggerKeys = [EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.down];
-    const wrapStyle = computed(() => ({
+    const wrapStyle = computed$1(() => ({
       maxHeight: addUnit(props.maxHeight)
     }));
-    const dropdownTriggerKls = computed(() => [ns.m(dropdownSize.value)]);
+    const dropdownTriggerKls = computed$1(() => [ns.m(dropdownSize.value)]);
     const defaultTriggerId = useId().value;
-    const triggerId = computed(() => {
+    const triggerId = computed$1(() => {
       return props.id || defaultTriggerId;
     });
     function handleClick() {
@@ -27204,7 +27399,7 @@ const _sfc_main$14 = defineComponent({
     }
     provide(DROPDOWN_INJECTION_KEY, {
       contentRef,
-      role: computed(() => props.role),
+      role: computed$1(() => props.role),
       triggerId,
       isUsingKeyboard,
       onItemEnter,
@@ -27408,7 +27603,7 @@ const _sfc_main$13 = defineComponent({
       handleMousedown
     } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, void 0);
     const itemRef = composeRefs(dropdownCollectionItemRef, rovingFocusCollectionItemRef, rovingFocusGroupItemRef);
-    const role = computed(() => {
+    const role = computed$1(() => {
       if (menuRole.value === "menu") {
         return "menuitem";
       } else if (menuRole.value === "navigation") {
@@ -27474,7 +27669,7 @@ var ElDropdownItemImpl = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _
 
 const useDropdown = () => {
   const elDropdown = inject("elDropdown", {});
-  const _elDropdownSize = computed(() => elDropdown == null ? void 0 : elDropdown.dropdownSize);
+  const _elDropdownSize = computed$1(() => elDropdown == null ? void 0 : elDropdown.dropdownSize);
   return {
     elDropdown,
     _elDropdownSize
@@ -27495,7 +27690,7 @@ const _sfc_main$12 = defineComponent({
     const { elDropdown } = useDropdown();
     const _instance = getCurrentInstance();
     const itemRef = ref(null);
-    const textContent = computed(() => {
+    const textContent = computed$1(() => {
       var _a, _b;
       return (_b = (_a = unref(itemRef)) == null ? void 0 : _a.textContent) != null ? _b : "";
     });
@@ -27534,7 +27729,7 @@ const _sfc_main$12 = defineComponent({
       }
       (_c = elDropdown.commandHandler) == null ? void 0 : _c.call(elDropdown, props.command, _instance, e);
     });
-    const propsAndAttrs = computed(() => {
+    const propsAndAttrs = computed$1(() => {
       return { ...props, ...attrs };
     });
     return {
@@ -27598,7 +27793,7 @@ const _sfc_main$11 = defineComponent({
       onMousedown
     } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
     const { collectionRef: rovingFocusGroupCollectionRef } = inject(COLLECTION_INJECTION_KEY$1, void 0);
-    const dropdownKls = computed(() => {
+    const dropdownKls = computed$1(() => {
       return [ns.b("menu"), ns.bm("menu", size == null ? void 0 : size.value)];
     });
     const dropdownListWrapperRef = composeRefs(contentRef, dropdownCollectionRef, focusTrapRef, rovingFocusGroupRef, rovingFocusGroupCollectionRef);
@@ -27870,8 +28065,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { t } = useLocale();
     const ns = useNamespace("empty");
-    const emptyDescription = computed(() => props.description || t("el.table.emptyText"));
-    const imageStyle = computed(() => ({
+    const emptyDescription = computed$1(() => props.description || t("el.table.emptyText"));
+    const imageStyle = computed$1(() => ({
       width: props.imageSize ? `${props.imageSize}px` : ""
     }));
     return (_ctx, _cache) => {
@@ -27955,7 +28150,7 @@ const formEmits = {
 
 function useFormLabelWidth() {
   const potentialLabelWidthArr = ref([]);
-  const autoLabelWidth = computed(() => {
+  const autoLabelWidth = computed$1(() => {
     if (!potentialLabelWidthArr.value.length)
       return "0";
     const max = Math.max(...potentialLabelWidthArr.value);
@@ -28002,7 +28197,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     const fields = [];
     const formSize = useSize();
     const ns = useNamespace("form");
-    const formClasses = computed(() => {
+    const formClasses = computed$1(() => {
       const { labelPosition, inline } = props;
       return [
         ns.b(),
@@ -28030,7 +28225,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     const clearValidate = (props2 = []) => {
       filterFields(fields, props2).forEach((field) => field.clearValidate());
     };
-    const isValidatable = computed(() => {
+    const isValidatable = computed$1(() => {
       const hasModel = !!props.model;
       return hasModel;
     });
@@ -29263,7 +29458,7 @@ var FormLabelWrap = defineComponent({
         formContext == null ? void 0 : formContext.registerLabelWidth(val, oldVal);
       }
     });
-    useResizeObserver(computed(() => {
+    useResizeObserver(computed$1(() => {
       var _a, _b;
       return (_b = (_a = el.value) == null ? void 0 : _a.firstElementChild) != null ? _b : null;
     }), updateLabelWidthFn);
@@ -29320,7 +29515,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     const formItemRef = ref();
     let initialValue = void 0;
     let isResettingField = false;
-    const labelStyle = computed(() => {
+    const labelStyle = computed$1(() => {
       if ((formContext == null ? void 0 : formContext.labelPosition) === "top") {
         return {};
       }
@@ -29329,7 +29524,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         return { width: labelWidth };
       return {};
     });
-    const contentStyle = computed(() => {
+    const contentStyle = computed$1(() => {
       if ((formContext == null ? void 0 : formContext.labelPosition) === "top" || (formContext == null ? void 0 : formContext.inline)) {
         return {};
       }
@@ -29342,7 +29537,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
       }
       return {};
     });
-    const formItemClasses = computed(() => [
+    const formItemClasses = computed$1(() => [
       ns.b(),
       ns.m(_size.value),
       ns.is("error", validateState.value === "error"),
@@ -29352,34 +29547,34 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
       ns.is("no-asterisk", formContext == null ? void 0 : formContext.hideRequiredAsterisk),
       { [ns.m("feedback")]: formContext == null ? void 0 : formContext.statusIcon }
     ]);
-    const _inlineMessage = computed(() => isBoolean(props.inlineMessage) ? props.inlineMessage : (formContext == null ? void 0 : formContext.inlineMessage) || false);
-    const validateClasses = computed(() => [
+    const _inlineMessage = computed$1(() => isBoolean(props.inlineMessage) ? props.inlineMessage : (formContext == null ? void 0 : formContext.inlineMessage) || false);
+    const validateClasses = computed$1(() => [
       ns.e("error"),
       { [ns.em("error", "inline")]: _inlineMessage.value }
     ]);
-    const propString = computed(() => {
+    const propString = computed$1(() => {
       if (!props.prop)
         return "";
       return isString(props.prop) ? props.prop : props.prop.join(".");
     });
-    const hasLabel = computed(() => {
+    const hasLabel = computed$1(() => {
       return !!(props.label || slots.label);
     });
-    const labelFor = computed(() => {
+    const labelFor = computed$1(() => {
       return props.for || inputIds.value.length === 1 ? inputIds.value[0] : void 0;
     });
-    const isGroup = computed(() => {
+    const isGroup = computed$1(() => {
       return !labelFor.value && hasLabel.value;
     });
     const isNested = !!parentFormItemContext;
-    const fieldValue = computed(() => {
+    const fieldValue = computed$1(() => {
       const model = formContext == null ? void 0 : formContext.model;
       if (!model || !props.prop) {
         return;
       }
       return getProp(model, props.prop).value;
     });
-    const _rules = computed(() => {
+    const _rules = computed$1(() => {
       const rules = props.rules ? castArray$1(props.rules) : [];
       const formRules = formContext == null ? void 0 : formContext.rules;
       if (formRules && props.prop) {
@@ -29393,7 +29588,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
       }
       return rules;
     });
-    const validateEnabled = computed(() => _rules.value.length > 0);
+    const validateEnabled = computed$1(() => _rules.value.length > 0);
     const getFilteredRule = (trigger) => {
       const rules = _rules.value;
       return rules.filter((rule) => {
@@ -29406,12 +29601,12 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         }
       }).map(({ trigger: trigger2, ...rule }) => rule);
     };
-    const isRequired = computed(() => _rules.value.some((rule) => rule.required === true));
-    const shouldShowError = computed(() => {
+    const isRequired = computed$1(() => _rules.value.some((rule) => rule.required === true));
+    const shouldShowError = computed$1(() => {
       var _a;
       return validateStateDebounced.value === "error" && props.showMessage && ((_a = formContext == null ? void 0 : formContext.showMessage) != null ? _a : true);
     });
-    const currentLabel = computed(() => `${props.label || ""}${(formContext == null ? void 0 : formContext.labelSuffix) || ""}`);
+    const currentLabel = computed$1(() => `${props.label || ""}${(formContext == null ? void 0 : formContext.labelSuffix) || ""}`);
     const setValidationState = (state) => {
       validateState.value = state;
     };
@@ -29662,20 +29857,20 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
       offsetY: 0,
       enableTransition: false
     });
-    const isSingle = computed(() => {
+    const isSingle = computed$1(() => {
       const { urlList } = props;
       return urlList.length <= 1;
     });
-    const isFirst = computed(() => {
+    const isFirst = computed$1(() => {
       return index.value === 0;
     });
-    const isLast = computed(() => {
+    const isLast = computed$1(() => {
       return index.value === props.urlList.length - 1;
     });
-    const currentImg = computed(() => {
+    const currentImg = computed$1(() => {
       return props.urlList[index.value];
     });
-    const imgStyle = computed(() => {
+    const imgStyle = computed$1(() => {
       const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
       let translateX = offsetX / scale;
       let translateY = offsetY / scale;
@@ -29702,7 +29897,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
       }
       return style;
     });
-    const computedZIndex = computed(() => {
+    const computedZIndex = computed$1(() => {
       return isNumber(props.zIndex) ? props.zIndex : nextZIndex();
     });
     function hide() {
@@ -30064,7 +30259,8 @@ const imageEmits = {
   load: (evt) => evt instanceof Event,
   error: (evt) => evt instanceof Event,
   switch: (val) => isNumber(val),
-  close: () => true
+  close: () => true,
+  show: () => true
 };
 
 const _hoisted_1$r = ["src", "loading"];
@@ -30093,19 +30289,19 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     const supportLoading = isClient && "loading" in HTMLImageElement.prototype;
     let stopScrollListener;
     let stopWheelListener;
-    const containerStyle = computed(() => rawAttrs.style);
-    const imageStyle = computed(() => {
+    const containerStyle = computed$1(() => rawAttrs.style);
+    const imageStyle = computed$1(() => {
       const { fit } = props;
       if (isClient && fit) {
         return { objectFit: fit };
       }
       return {};
     });
-    const preview = computed(() => {
+    const preview = computed$1(() => {
       const { previewSrcList } = props;
       return Array.isArray(previewSrcList) && previewSrcList.length > 0;
     });
-    const imageIndex = computed(() => {
+    const imageIndex = computed$1(() => {
       const { previewSrcList, initialIndex } = props;
       let previewIndex = initialIndex;
       if (initialIndex > previewSrcList.length - 1) {
@@ -30113,7 +30309,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       }
       return previewIndex;
     });
-    const isManual = computed(() => {
+    const isManual = computed$1(() => {
       if (props.loading === "eager")
         return false;
       return !supportLoading && props.loading === "lazy" || props.lazy;
@@ -30186,6 +30382,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       prevOverflow = document.body.style.overflow;
       document.body.style.overflow = "hidden";
       showViewer.value = true;
+      emit("show");
     }
     function closeViewer() {
       stopWheelListener == null ? void 0 : stopWheelListener();
@@ -30350,9 +30547,9 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
       userInput: null
     });
     const { formItem } = useFormItem();
-    const minDisabled = computed(() => isNumber(props.modelValue) && ensurePrecision(props.modelValue, -1) < props.min);
-    const maxDisabled = computed(() => isNumber(props.modelValue) && ensurePrecision(props.modelValue) > props.max);
-    const numPrecision = computed(() => {
+    const minDisabled = computed$1(() => isNumber(props.modelValue) && ensurePrecision(props.modelValue, -1) < props.min);
+    const maxDisabled = computed$1(() => isNumber(props.modelValue) && ensurePrecision(props.modelValue) > props.max);
+    const numPrecision = computed$1(() => {
       const stepPrecision = getPrecision(props.step);
       if (!isUndefined(props.precision)) {
         if (stepPrecision > props.precision) ;
@@ -30361,12 +30558,12 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
         return Math.max(getPrecision(props.modelValue), stepPrecision);
       }
     });
-    const controlsAtRight = computed(() => {
+    const controlsAtRight = computed$1(() => {
       return props.controls && props.controlsPosition === "right";
     });
     const inputNumberSize = useSize();
     const inputNumberDisabled = useDisabled$1();
-    const displayValue = computed(() => {
+    const displayValue = computed$1(() => {
       if (data.userInput !== null) {
         return data.userInput;
       }
@@ -30859,7 +31056,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
 var ElMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$h], ["__file", "menu-collapse-transition.vue"]]);
 
 function useMenu(instance, currentIndex) {
-  const indexPath = computed(() => {
+  const indexPath = computed$1(() => {
     let parent = instance.parent;
     const path = [currentIndex.value];
     while (parent.type.name !== "ElMenu") {
@@ -30870,7 +31067,7 @@ function useMenu(instance, currentIndex) {
     }
     return path;
   });
-  const parentMenu = computed(() => {
+  const parentMenu = computed$1(() => {
     let parent = instance.parent;
     while (parent && !["ElMenu", "ElSubMenu"].includes(parent.type.name)) {
       parent = parent.parent;
@@ -30884,7 +31081,7 @@ function useMenu(instance, currentIndex) {
 }
 
 function useMenuColor(props) {
-  const menuBarColor = computed(() => {
+  const menuBarColor = computed$1(() => {
     const color = props.backgroundColor;
     if (!color) {
       return "";
@@ -30897,7 +31094,7 @@ function useMenuColor(props) {
 
 const useMenuCssVar = (props, level) => {
   const ns = useNamespace("menu");
-  return computed(() => {
+  return computed$1(() => {
     return ns.cssVarBlock({
       "text-color": props.textColor || "",
       "hover-text-color": props.textColor || "",
@@ -30939,7 +31136,7 @@ var SubMenu = defineComponent({
   props: subMenuProps,
   setup(props, { slots, expose }) {
     const instance = getCurrentInstance();
-    const { indexPath, parentMenu } = useMenu(instance, computed(() => props.index));
+    const { indexPath, parentMenu } = useMenu(instance, computed$1(() => props.index));
     const nsMenu = useNamespace("menu");
     const nsSubMenu = useNamespace("sub-menu");
     const rootMenu = inject("rootMenu");
@@ -30954,18 +31151,18 @@ var SubMenu = defineComponent({
     const mouseInChild = ref(false);
     const verticalTitleRef = ref();
     const vPopper = ref(null);
-    const currentPlacement = computed(() => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start");
-    const subMenuTitleIcon = computed(() => {
+    const currentPlacement = computed$1(() => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start");
+    const subMenuTitleIcon = computed$1(() => {
       return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? arrow_down_default : arrow_right_default;
     });
-    const isFirstLevel = computed(() => {
+    const isFirstLevel = computed$1(() => {
       return subMenu.level === 0;
     });
-    const appendToBody = computed(() => {
+    const appendToBody = computed$1(() => {
       return props.popperAppendToBody === void 0 ? isFirstLevel.value : Boolean(props.popperAppendToBody);
     });
-    const menuTransitionName = computed(() => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`);
-    const fallbackPlacements = computed(() => mode.value === "horizontal" && isFirstLevel.value ? [
+    const menuTransitionName = computed$1(() => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`);
+    const fallbackPlacements = computed$1(() => mode.value === "horizontal" && isFirstLevel.value ? [
       "bottom-start",
       "bottom-end",
       "top-start",
@@ -30980,8 +31177,8 @@ var SubMenu = defineComponent({
       "top-start",
       "top-end"
     ]);
-    const opened = computed(() => rootMenu.openedMenus.includes(props.index));
-    const active = computed(() => {
+    const opened = computed$1(() => rootMenu.openedMenus.includes(props.index));
+    const active = computed$1(() => {
       let isActive = false;
       Object.values(items.value).forEach((item2) => {
         if (item2.active) {
@@ -30995,16 +31192,16 @@ var SubMenu = defineComponent({
       });
       return isActive;
     });
-    const backgroundColor = computed(() => rootMenu.props.backgroundColor || "");
-    const activeTextColor = computed(() => rootMenu.props.activeTextColor || "");
-    const textColor = computed(() => rootMenu.props.textColor || "");
-    const mode = computed(() => rootMenu.props.mode);
+    const backgroundColor = computed$1(() => rootMenu.props.backgroundColor || "");
+    const activeTextColor = computed$1(() => rootMenu.props.activeTextColor || "");
+    const textColor = computed$1(() => rootMenu.props.textColor || "");
+    const mode = computed$1(() => rootMenu.props.mode);
     const item = reactive({
       index: props.index,
       indexPath,
       active
     });
-    const titleStyle = computed(() => {
+    const titleStyle = computed$1(() => {
       if (mode.value !== "horizontal") {
         return {
           color: textColor.value
@@ -31238,7 +31435,7 @@ var Menu = defineComponent({
     const activeIndex = ref(props.defaultActive);
     const items = ref({});
     const subMenus = ref({});
-    const isMenuPopup = computed(() => {
+    const isMenuPopup = computed$1(() => {
       return props.mode === "horizontal" || props.mode === "vertical" && props.collapse;
     });
     const initMenu = () => {
@@ -31317,11 +31514,6 @@ var Menu = defineComponent({
       }
       updateActiveIndex(currentActive);
     });
-    watch(items.value, () => {
-      initMenu();
-      if (props.mode === "horizontal" && props.ellipsis)
-        handleResize();
-    });
     watch(() => props.collapse, (value) => {
       if (value)
         openedMenus.value = [];
@@ -31485,7 +31677,7 @@ const _sfc_main$T = defineComponent({
     const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
     if (!subMenu)
       throwError(COMPONENT_NAME$7, "can not inject sub menu");
-    const active = computed(() => props.index === rootMenu.activeIndex);
+    const active = computed$1(() => props.index === rootMenu.activeIndex);
     const item = reactive({
       index: props.index,
       indexPath,
@@ -31697,7 +31889,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   emits: paginationPrevEmits,
   setup(__props) {
     const props = __props;
-    const internalDisabled = computed(() => props.disabled || props.currentPage <= 1);
+    const internalDisabled = computed$1(() => props.disabled || props.currentPage <= 1);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
         type: "button",
@@ -31744,7 +31936,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   emits: ["click"],
   setup(__props) {
     const props = __props;
-    const internalDisabled = computed(() => props.disabled || props.currentPage === props.pageCount || props.pageCount === 0);
+    const internalDisabled = computed$1(() => props.disabled || props.currentPage === props.pageCount || props.pageCount === 0);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
         type: "button",
@@ -31771,17 +31963,17 @@ const selectKey = "ElSelect";
 function useOption$1(props, states) {
   const select = inject(selectKey);
   const selectGroup = inject(selectGroupKey, { disabled: false });
-  const isObject = computed(() => {
+  const isObject = computed$1(() => {
     return Object.prototype.toString.call(props.value).toLowerCase() === "[object object]";
   });
-  const itemSelected = computed(() => {
+  const itemSelected = computed$1(() => {
     if (!select.props.multiple) {
       return isEqual(props.value, select.props.modelValue);
     } else {
       return contains(select.props.modelValue, props.value);
     }
   });
-  const limitReached = computed(() => {
+  const limitReached = computed$1(() => {
     if (select.props.multiple) {
       const modelValue = select.props.modelValue || [];
       return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
@@ -31789,13 +31981,13 @@ function useOption$1(props, states) {
       return false;
     }
   });
-  const currentLabel = computed(() => {
+  const currentLabel = computed$1(() => {
     return props.label || (isObject.value ? "" : props.value);
   });
-  const currentValue = computed(() => {
+  const currentValue = computed$1(() => {
     return props.value || props.label || "";
   });
-  const isDisabled = computed(() => {
+  const isDisabled = computed$1(() => {
     return props.disabled || states.groupDisabled || limitReached.value;
   });
   const instance = getCurrentInstance();
@@ -31838,7 +32030,7 @@ function useOption$1(props, states) {
   watch(() => selectGroup.disabled, () => {
     states.groupDisabled = selectGroup.disabled;
   }, { immediate: true });
-  const { queryChange } = toRaw(select);
+  const { queryChange } = toRaw$1(select);
   watch(queryChange, (changes) => {
     const { query } = unref(changes);
     const regexp = new RegExp(escapeStringRegexp(query), "i");
@@ -31946,9 +32138,9 @@ const _sfc_main$N = defineComponent({
   setup() {
     const select = inject(selectKey);
     const ns = useNamespace("select");
-    const popperClass = computed(() => select.props.popperClass);
-    const isMultiple = computed(() => select.props.multiple);
-    const isFitInputWidth = computed(() => select.props.fitInputWidth);
+    const popperClass = computed$1(() => select.props.popperClass);
+    const isMultiple = computed$1(() => select.props.multiple);
+    const isFitInputWidth = computed$1(() => select.props.fitInputWidth);
     const minWidth = ref("");
     function updateMinWidth() {
       var _a;
@@ -32019,17 +32211,17 @@ const useSelect$3 = (props, states, ctx) => {
   const groupQueryChange = shallowRef("");
   const elForm = inject(formContextKey, {});
   const elFormItem = inject(formItemContextKey, {});
-  const readonly = computed(() => !props.filterable || props.multiple || !states.visible);
-  const selectDisabled = computed(() => props.disabled || elForm.disabled);
-  const showClose = computed(() => {
+  const readonly = computed$1(() => !props.filterable || props.multiple || !states.visible);
+  const selectDisabled = computed$1(() => props.disabled || elForm.disabled);
+  const showClose = computed$1(() => {
     const hasValue = props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "";
     const criteria = props.clearable && !selectDisabled.value && states.inputHovering && hasValue;
     return criteria;
   });
-  const iconComponent = computed(() => props.remote && props.filterable ? "" : props.suffixIcon);
-  const iconReverse = computed(() => ns.is("reverse", iconComponent.value && states.visible));
-  const debounce$1 = computed(() => props.remote ? 300 : 0);
-  const emptyText = computed(() => {
+  const iconComponent = computed$1(() => props.remote && props.filterable ? "" : props.suffixIcon);
+  const iconReverse = computed$1(() => ns.is("reverse", iconComponent.value && states.visible));
+  const debounce$1 = computed$1(() => props.remote ? 300 : 0);
+  const emptyText = computed$1(() => {
     if (props.loading) {
       return props.loadingText || t("el.select.loading");
     } else {
@@ -32044,9 +32236,9 @@ const useSelect$3 = (props, states, ctx) => {
     }
     return null;
   });
-  const optionsArray = computed(() => Array.from(states.options.values()));
-  const cachedOptionsArray = computed(() => Array.from(states.cachedOptions.values()));
-  const showNewOption = computed(() => {
+  const optionsArray = computed$1(() => Array.from(states.options.values()));
+  const cachedOptionsArray = computed$1(() => Array.from(states.cachedOptions.values()));
+  const showNewOption = computed$1(() => {
     const hasExistingOption = optionsArray.value.filter((option) => {
       return !option.created;
     }).some((option) => {
@@ -32055,8 +32247,8 @@ const useSelect$3 = (props, states, ctx) => {
     return props.filterable && props.allowCreate && states.query !== "" && !hasExistingOption;
   });
   const selectSize = useSize();
-  const collapseTagSize = computed(() => ["small"].includes(selectSize.value) ? "small" : "default");
-  const dropMenuVisible = computed({
+  const collapseTagSize = computed$1(() => ["small"].includes(selectSize.value) ? "small" : "default");
+  const dropMenuVisible = computed$1({
     get() {
       return states.visible && emptyText.value !== false;
     },
@@ -32565,7 +32757,7 @@ const useSelect$3 = (props, states, ctx) => {
   const getValueKey = (item) => {
     return isObject$1(item.value) ? get(item.value, props.valueKey) : item.value;
   };
-  const optionsAllDisabled = computed(() => optionsArray.value.filter((option) => option.visible).every((option) => option.disabled));
+  const optionsAllDisabled = computed$1(() => optionsArray.value.filter((option) => option.visible).every((option) => option.disabled));
   const navigateOptions = (direction) => {
     if (!states.visible) {
       states.visible = true;
@@ -32822,7 +33014,7 @@ const _sfc_main$M = defineComponent({
       prefixWidth,
       tagInMultiLine
     } = toRefs(states);
-    const wrapperKls = computed(() => {
+    const wrapperKls = computed$1(() => {
       const classList = [nsSelect.b()];
       const _selectSize = unref(selectSize);
       if (_selectSize) {
@@ -32833,7 +33025,7 @@ const _sfc_main$M = defineComponent({
       }
       return classList;
     });
-    const selectTagsStyle = computed(() => ({
+    const selectTagsStyle = computed$1(() => ({
       maxWidth: `${unref(inputWidth) - 32}px`,
       width: "100%"
     }));
@@ -32881,7 +33073,7 @@ const _sfc_main$M = defineComponent({
     if (!props.multiple && Array.isArray(props.modelValue)) {
       ctx.emit(UPDATE_MODEL_EVENT, "");
     }
-    const popperPaneRef = computed(() => {
+    const popperPaneRef = computed$1(() => {
       var _a, _b;
       return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
     });
@@ -32966,12 +33158,11 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createElementBlock("div", {
     ref: "selectWrapper",
     class: normalizeClass(_ctx.wrapperKls),
-    onClick: _cache[23] || (_cache[23] = withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
+    onClick: _cache[22] || (_cache[22] = withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
   }, [
     createVNode(_component_el_tooltip, {
       ref: "tooltipRef",
       visible: _ctx.dropMenuVisible,
-      "onUpdate:visible": _cache[22] || (_cache[22] = ($event) => _ctx.dropMenuVisible = $event),
       placement: "bottom-start",
       teleported: _ctx.teleported,
       "popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
@@ -33294,7 +33485,7 @@ const _sfc_main$L = defineComponent({
       }
       return children2;
     };
-    const { groupQueryChange } = toRaw(select);
+    const { groupQueryChange } = toRaw$1(select);
     watch(groupQueryChange, () => {
       visible.value = children.value.some((option) => option.visible === true);
     });
@@ -33376,7 +33567,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     watch(() => props.pageSize, (newVal) => {
       innerPageSize.value = newVal;
     });
-    const innerPageSizes = computed(() => props.pageSizes);
+    const innerPageSizes = computed$1(() => props.pageSizes);
     function handleChange(val) {
       var _a;
       if (val !== innerPageSize.value) {
@@ -33423,7 +33614,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("pagination");
     const { pageCount, disabled, currentPage, changeEvent } = usePagination();
     const userInput = ref();
-    const innerValue = computed(() => {
+    const innerValue = computed$1(() => {
       var _a;
       return (_a = userInput.value) != null ? _a : currentPage == null ? void 0 : currentPage.value;
     });
@@ -33528,7 +33719,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     const quickNextHover = ref(false);
     const quickPrevFocus = ref(false);
     const quickNextFocus = ref(false);
-    const pagers = computed(() => {
+    const pagers = computed$1(() => {
       const pagerCount = props.pagerCount;
       const halfPagerCount = (pagerCount - 1) / 2;
       const currentPage = Number(props.currentPage);
@@ -33565,7 +33756,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       }
       return array;
     });
-    const tabindex = computed(() => props.disabled ? -1 : 0);
+    const tabindex = computed$1(() => props.disabled ? -1 : 0);
     watchEffect(() => {
       const halfPagerCount = (props.pagerCount - 1) / 2;
       showPrevMore.value = false;
@@ -33766,7 +33957,7 @@ var Pagination = defineComponent({
     const vnodeProps = getCurrentInstance().vnode.props || {};
     const hasCurrentPageListener = "onUpdate:currentPage" in vnodeProps || "onUpdate:current-page" in vnodeProps || "onCurrentChange" in vnodeProps;
     const hasPageSizeListener = "onUpdate:pageSize" in vnodeProps || "onUpdate:page-size" in vnodeProps || "onSizeChange" in vnodeProps;
-    const assertValidUsage = computed(() => {
+    const assertValidUsage = computed$1(() => {
       if (isAbsent(props.total) && isAbsent(props.pageCount))
         return false;
       if (!isAbsent(props.currentPage) && !hasCurrentPageListener)
@@ -33787,7 +33978,7 @@ var Pagination = defineComponent({
     });
     const innerPageSize = ref(isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize);
     const innerCurrentPage = ref(isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage);
-    const pageSizeBridge = computed({
+    const pageSizeBridge = computed$1({
       get() {
         return isAbsent(props.pageSize) ? innerPageSize.value : props.pageSize;
       },
@@ -33801,7 +33992,7 @@ var Pagination = defineComponent({
         }
       }
     });
-    const pageCountBridge = computed(() => {
+    const pageCountBridge = computed$1(() => {
       let pageCount = 0;
       if (!isAbsent(props.pageCount)) {
         pageCount = props.pageCount;
@@ -33810,7 +34001,7 @@ var Pagination = defineComponent({
       }
       return pageCount;
     });
-    const currentPageBridge = computed({
+    const currentPageBridge = computed$1({
       get() {
         return isAbsent(props.currentPage) ? innerCurrentPage.value : props.currentPage;
       },
@@ -33866,7 +34057,7 @@ var Pagination = defineComponent({
     }
     provide(elPaginationKey, {
       pageCount: pageCountBridge,
-      disabled: computed(() => props.disabled),
+      disabled: computed$1(() => props.disabled),
       currentPage: currentPageBridge,
       changeEvent: handleCurrentChange,
       handleSizeChange
@@ -34018,8 +34209,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       (_a = props.onCancel) == null ? void 0 : _a.call(props, e);
       hidePopper();
     };
-    const finalConfirmButtonText = computed(() => props.confirmButtonText || t("el.popconfirm.confirmButtonText"));
-    const finalCancelButtonText = computed(() => props.cancelButtonText || t("el.popconfirm.cancelButtonText"));
+    const finalConfirmButtonText = computed$1(() => props.confirmButtonText || t("el.popconfirm.confirmButtonText"));
+    const finalCancelButtonText = computed$1(() => props.cancelButtonText || t("el.popconfirm.cancelButtonText"));
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ElTooltip), {
         ref_key: "tooltipRef",
@@ -34162,16 +34353,16 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   setup(__props, { expose, emit }) {
     const props = __props;
     const updateEventKeyRaw = `onUpdate:visible`;
-    const onUpdateVisible = computed(() => {
+    const onUpdateVisible = computed$1(() => {
       return props[updateEventKeyRaw];
     });
     const ns = useNamespace("popover");
     const tooltipRef = ref();
-    const popperRef = computed(() => {
+    const popperRef = computed$1(() => {
       var _a;
       return (_a = unref(tooltipRef)) == null ? void 0 : _a.popperRef;
     });
-    const style = computed(() => {
+    const style = computed$1(() => {
       return [
         {
           width: addUnit(props.width)
@@ -34179,10 +34370,10 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         props.popperStyle
       ];
     });
-    const kls = computed(() => {
+    const kls = computed$1(() => {
       return [ns.b(), props.popperClass, { [ns.m("plain")]: !!props.content }];
     });
-    const gpuAcceleration = computed(() => {
+    const gpuAcceleration = computed$1(() => {
       return props.transition === "el-fade-in-linear";
     });
     const hide = () => {
@@ -34358,19 +34549,19 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       default: "#20a0ff"
     };
     const ns = useNamespace("progress");
-    const barStyle = computed(() => ({
+    const barStyle = computed$1(() => ({
       width: `${props.percentage}%`,
       animationDuration: `${props.duration}s`,
       backgroundColor: getCurrentColor(props.percentage)
     }));
-    const relativeStrokeWidth = computed(() => (props.strokeWidth / props.width * 100).toFixed(1));
-    const radius = computed(() => {
+    const relativeStrokeWidth = computed$1(() => (props.strokeWidth / props.width * 100).toFixed(1));
+    const radius = computed$1(() => {
       if (["circle", "dashboard"].includes(props.type)) {
         return Number.parseInt(`${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`, 10);
       }
       return 0;
     });
-    const trackPath = computed(() => {
+    const trackPath = computed$1(() => {
       const r = radius.value;
       const isDashboard = props.type === "dashboard";
       return `
@@ -34380,22 +34571,22 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           a ${r} ${r} 0 1 1 0 ${isDashboard ? "" : "-"}${r * 2}
           `;
     });
-    const perimeter = computed(() => 2 * Math.PI * radius.value);
-    const rate = computed(() => props.type === "dashboard" ? 0.75 : 1);
-    const strokeDashoffset = computed(() => {
+    const perimeter = computed$1(() => 2 * Math.PI * radius.value);
+    const rate = computed$1(() => props.type === "dashboard" ? 0.75 : 1);
+    const strokeDashoffset = computed$1(() => {
       const offset = -1 * perimeter.value * (1 - rate.value) / 2;
       return `${offset}px`;
     });
-    const trailPathStyle = computed(() => ({
+    const trailPathStyle = computed$1(() => ({
       strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,
       strokeDashoffset: strokeDashoffset.value
     }));
-    const circlePathStyle = computed(() => ({
+    const circlePathStyle = computed$1(() => ({
       strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100)}px, ${perimeter.value}px`,
       strokeDashoffset: strokeDashoffset.value,
       transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease, opacity ease 0.6s"
     }));
-    const stroke = computed(() => {
+    const stroke = computed$1(() => {
       let ret;
       if (props.color) {
         ret = getCurrentColor(props.percentage);
@@ -34404,7 +34595,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       }
       return ret;
     });
-    const statusIcon = computed(() => {
+    const statusIcon = computed$1(() => {
       if (props.status === "warning") {
         return warning_filled_default;
       }
@@ -34414,10 +34605,10 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         return props.status === "success" ? check_default : close_default;
       }
     });
-    const progressTextSize = computed(() => {
+    const progressTextSize = computed$1(() => {
       return props.type === "line" ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2;
     });
-    const content = computed(() => props.format(props.percentage));
+    const content = computed$1(() => props.format(props.percentage));
     function getColors(color) {
       const span = 100 / color.length;
       const seriesColors = color.map((seriesColor, index) => {
@@ -34656,16 +34847,16 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     const currentValue = ref(props.modelValue);
     const hoverIndex = ref(-1);
     const pointerAtLeftHalf = ref(true);
-    const rateClasses = computed(() => [ns.b(), ns.m(rateSize.value)]);
-    const rateDisabled = computed(() => props.disabled || (formContext == null ? void 0 : formContext.disabled));
-    const rateStyles = computed(() => {
+    const rateClasses = computed$1(() => [ns.b(), ns.m(rateSize.value)]);
+    const rateDisabled = computed$1(() => props.disabled || (formContext == null ? void 0 : formContext.disabled));
+    const rateStyles = computed$1(() => {
       return ns.cssVarBlock({
         "void-color": props.voidColor,
         "disabled-void-color": props.disabledVoidColor,
         "fill-color": activeColor.value
       });
     });
-    const text = computed(() => {
+    const text = computed$1(() => {
       let result = "";
       if (props.showScore) {
         result = props.scoreTemplate.replace(/\{\s*value\s*\}/, rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`);
@@ -34674,17 +34865,17 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       }
       return result;
     });
-    const valueDecimal = computed(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100);
-    const colorMap = computed(() => isArray(props.colors) ? {
+    const valueDecimal = computed$1(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100);
+    const colorMap = computed$1(() => isArray(props.colors) ? {
       [props.lowThreshold]: props.colors[0],
       [props.highThreshold]: { value: props.colors[1], excluded: true },
       [props.max]: props.colors[2]
     } : props.colors);
-    const activeColor = computed(() => {
+    const activeColor = computed$1(() => {
       const color = getValueFromMap(currentValue.value, colorMap.value);
       return isObject$1(color) ? "" : color;
     });
-    const decimalStyle = computed(() => {
+    const decimalStyle = computed$1(() => {
       let width = "";
       if (rateDisabled.value) {
         width = `${valueDecimal.value}%`;
@@ -34696,7 +34887,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         width
       };
     });
-    const componentMap = computed(() => isArray(props.icons) ? {
+    const componentMap = computed$1(() => isArray(props.icons) ? {
       [props.lowThreshold]: props.icons[0],
       [props.highThreshold]: {
         value: props.icons[1],
@@ -34704,10 +34895,10 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       },
       [props.max]: props.icons[2]
     } : props.icons);
-    const decimalIconComponent = computed(() => getValueFromMap(props.modelValue, componentMap.value));
-    const voidComponent = computed(() => rateDisabled.value ? props.disabledVoidIcon : props.voidIcon);
-    const activeComponent = computed(() => getValueFromMap(currentValue.value, componentMap.value));
-    const iconComponents = computed(() => {
+    const decimalIconComponent = computed$1(() => getValueFromMap(props.modelValue, componentMap.value));
+    const voidComponent = computed$1(() => rateDisabled.value ? props.disabledVoidIcon : props.voidIcon);
+    const activeComponent = computed$1(() => getValueFromMap(currentValue.value, componentMap.value));
+    const iconComponents = computed$1(() => {
       const result = Array.from({ length: props.max });
       const threshold = currentValue.value;
       result.fill(activeComponent.value, 0, threshold);
@@ -34901,7 +35092,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const ns = useNamespace("result");
-    const resultIcon = computed(() => {
+    const resultIcon = computed$1(() => {
       const icon = props.icon;
       const iconClass = icon && IconMap[icon] ? IconMap[icon] : "icon-info";
       const iconComponent = IconComponentMap[iconClass] || IconComponentMap["icon-info"];
@@ -34993,11 +35184,11 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const ns = useNamespace("row");
-    const gutter = computed(() => props.gutter);
+    const gutter = computed$1(() => props.gutter);
     provide(rowContextKey, {
       gutter
     });
-    const style = computed(() => {
+    const style = computed$1(() => {
       const styles = {};
       if (!props.gutter) {
         return styles;
@@ -35079,7 +35270,7 @@ function memoizeOne(resultFn, isEqual2) {
 const useCache = () => {
   const vm = getCurrentInstance();
   const props = vm.proxy.$props;
-  return computed(() => {
+  return computed$1(() => {
     const _getItemStyleCache = (_, __, ___) => ({});
     return props.perfMode ? memoize(_getItemStyleCache) : memoizeOne(_getItemStyleCache);
   });
@@ -35323,7 +35514,7 @@ const ScrollBar = defineComponent({
   props: virtualizedScrollbarProps,
   emits: ["scroll", "start-move", "stop-move"],
   setup(props, { emit }) {
-    const GAP = computed(() => props.startGap + props.endGap);
+    const GAP = computed$1(() => props.startGap + props.endGap);
     const nsVirtualScrollbar = useNamespace("virtual-scrollbar");
     const nsScrollbar = useNamespace("scrollbar");
     const trackRef = ref();
@@ -35334,9 +35525,9 @@ const ScrollBar = defineComponent({
       isDragging: false,
       traveled: 0
     });
-    const bar = computed(() => BAR_MAP[props.layout]);
-    const trackSize = computed(() => props.clientSize - unref(GAP));
-    const trackStyle = computed(() => ({
+    const bar = computed$1(() => BAR_MAP[props.layout]);
+    const trackSize = computed$1(() => props.clientSize - unref(GAP));
+    const trackStyle = computed$1(() => ({
       position: "absolute",
       width: `${HORIZONTAL === props.layout ? trackSize.value : props.scrollbarSize}px`,
       height: `${HORIZONTAL === props.layout ? props.scrollbarSize : trackSize.value}px`,
@@ -35345,7 +35536,7 @@ const ScrollBar = defineComponent({
       bottom: "2px",
       borderRadius: "4px"
     }));
-    const thumbSize = computed(() => {
+    const thumbSize = computed$1(() => {
       const ratio = props.ratio;
       const clientSize = props.clientSize;
       if (ratio >= 100) {
@@ -35357,7 +35548,7 @@ const ScrollBar = defineComponent({
       const SCROLLBAR_MAX_SIZE = clientSize / 3;
       return Math.floor(Math.min(Math.max(ratio * clientSize, SCROLLBAR_MIN_SIZE), SCROLLBAR_MAX_SIZE));
     });
-    const thumbStyle = computed(() => {
+    const thumbStyle = computed$1(() => {
       if (!Number.isFinite(thumbSize.value)) {
         return {
           display: "none"
@@ -35371,7 +35562,7 @@ const ScrollBar = defineComponent({
       }, props.layout);
       return style;
     });
-    const totalSteps = computed(() => Math.floor(props.clientSize - thumbSize.value - unref(GAP)));
+    const totalSteps = computed$1(() => Math.floor(props.clientSize - thumbSize.value - unref(GAP)));
     const attachEvents = () => {
       window.addEventListener("mousemove", onMouseMove);
       window.addEventListener("mouseup", onMouseUp);
@@ -35499,7 +35690,7 @@ const createList = ({
         isScrollbarDragging: false,
         scrollbarAlwaysOn: props.scrollbarAlwaysOn
       });
-      const itemsToRender = computed(() => {
+      const itemsToRender = computed$1(() => {
         const { total, cache } = props;
         const { isScrolling, scrollDir, scrollOffset } = unref(states);
         if (total === 0) {
@@ -35516,9 +35707,9 @@ const createList = ({
           stopIndex
         ];
       });
-      const estimatedTotalSize = computed(() => getEstimatedTotalSize(props, unref(dynamicSizeCache)));
-      const _isHorizontal = computed(() => isHorizontal(props.layout));
-      const windowStyle = computed(() => [
+      const estimatedTotalSize = computed$1(() => getEstimatedTotalSize(props, unref(dynamicSizeCache)));
+      const _isHorizontal = computed$1(() => isHorizontal(props.layout));
+      const windowStyle = computed$1(() => [
         {
           position: "relative",
           [`overflow-${_isHorizontal.value ? "x" : "y"}`]: "scroll",
@@ -35532,7 +35723,7 @@ const createList = ({
         },
         props.style
       ]);
-      const innerStyle = computed(() => {
+      const innerStyle = computed$1(() => {
         const size = unref(estimatedTotalSize);
         const horizontal = unref(_isHorizontal);
         return {
@@ -35541,11 +35732,11 @@ const createList = ({
           width: horizontal ? `${size}px` : "100%"
         };
       });
-      const clientSize = computed(() => _isHorizontal.value ? props.width : props.height);
+      const clientSize = computed$1(() => _isHorizontal.value ? props.width : props.height);
       const { onWheel } = useWheel$1({
-        atStartEdge: computed(() => states.value.scrollOffset <= 0),
-        atEndEdge: computed(() => states.value.scrollOffset >= estimatedTotalSize.value),
-        layout: computed(() => props.layout)
+        atStartEdge: computed$1(() => states.value.scrollOffset <= 0),
+        atEndEdge: computed$1(() => states.value.scrollOffset >= estimatedTotalSize.value),
+        layout: computed$1(() => props.layout)
       }, (offset) => {
         var _a, _b;
         (_b = (_a = scrollbarRef.value).onMouseUp) == null ? void 0 : _b.call(_a);
@@ -36097,9 +36288,9 @@ const createGrid = ({
         yAxisScrollDir: FORWARD
       });
       const getItemStyleCache = useCache();
-      const parsedHeight = computed(() => Number.parseInt(`${props.height}`, 10));
-      const parsedWidth = computed(() => Number.parseInt(`${props.width}`, 10));
-      const columnsToRender = computed(() => {
+      const parsedHeight = computed$1(() => Number.parseInt(`${props.height}`, 10));
+      const parsedWidth = computed$1(() => Number.parseInt(`${props.width}`, 10));
+      const columnsToRender = computed$1(() => {
         const { totalColumn, totalRow, columnCache } = props;
         const { isScrolling, xAxisScrollDir, scrollLeft } = unref(states);
         if (totalColumn === 0 || totalRow === 0) {
@@ -36116,7 +36307,7 @@ const createGrid = ({
           stopIndex
         ];
       });
-      const rowsToRender = computed(() => {
+      const rowsToRender = computed$1(() => {
         const { totalColumn, totalRow, rowCache } = props;
         const { isScrolling, yAxisScrollDir, scrollTop } = unref(states);
         if (totalColumn === 0 || totalRow === 0) {
@@ -36133,9 +36324,9 @@ const createGrid = ({
           stopIndex
         ];
       });
-      const estimatedTotalHeight = computed(() => getEstimatedTotalHeight(props, unref(cache)));
-      const estimatedTotalWidth = computed(() => getEstimatedTotalWidth(props, unref(cache)));
-      const windowStyle = computed(() => {
+      const estimatedTotalHeight = computed$1(() => getEstimatedTotalHeight(props, unref(cache)));
+      const estimatedTotalWidth = computed$1(() => getEstimatedTotalWidth(props, unref(cache)));
+      const windowStyle = computed$1(() => {
         var _a;
         return [
           {
@@ -36152,7 +36343,7 @@ const createGrid = ({
           (_a = props.style) != null ? _a : {}
         ];
       });
-      const innerStyle = computed(() => {
+      const innerStyle = computed$1(() => {
         const width = `${unref(estimatedTotalWidth)}px`;
         const height = `${unref(estimatedTotalHeight)}px`;
         return {
@@ -36249,10 +36440,10 @@ const createGrid = ({
         });
       };
       const { onWheel } = useGridWheel({
-        atXStartEdge: computed(() => states.value.scrollLeft <= 0),
-        atXEndEdge: computed(() => states.value.scrollLeft >= estimatedTotalWidth.value),
-        atYStartEdge: computed(() => states.value.scrollTop <= 0),
-        atYEndEdge: computed(() => states.value.scrollTop >= estimatedTotalHeight.value)
+        atXStartEdge: computed$1(() => states.value.scrollLeft <= 0),
+        atXEndEdge: computed$1(() => states.value.scrollLeft >= estimatedTotalWidth.value),
+        atYStartEdge: computed$1(() => states.value.scrollTop <= 0),
+        atYEndEdge: computed$1(() => states.value.scrollTop >= estimatedTotalHeight.value)
       }, (x, y) => {
         var _a, _b, _c, _d;
         (_b = (_a = hScrollbar.value) == null ? void 0 : _a.onMouseUp) == null ? void 0 : _b.call(_a);
@@ -36290,7 +36481,7 @@ const createGrid = ({
         const _states = unref(states);
         columnIdx = Math.max(0, Math.min(columnIdx, props.totalColumn - 1));
         rowIndex = Math.max(0, Math.min(rowIndex, props.totalRow - 1));
-        const scrollBarWidth = getScrollBarWidth();
+        const scrollBarWidth = getScrollBarWidth(ns.namespace.value);
         const _cache = unref(cache);
         const estimatedHeight = getEstimatedTotalHeight(props, _cache);
         const estimatedWidth = getEstimatedTotalWidth(props, _cache);
@@ -37036,8 +37227,8 @@ var ElSelectMenu = defineComponent({
     const ns = useNamespace("select");
     const cachedHeights = ref([]);
     const listRef = ref();
-    const isSized = computed(() => isUndefined(select.props.estimatedOptionHeight));
-    const listProps = computed(() => {
+    const isSized = computed$1(() => isUndefined(select.props.estimatedOptionHeight));
+    const listProps = computed$1(() => {
       if (isSized.value) {
         return {
           itemSize: select.props.itemHeight
@@ -37244,7 +37435,7 @@ var ElSelectMenu = defineComponent({
 function useAllowCreate(props, states) {
   const createOptionCount = ref(0);
   const cachedSelectedOption = ref(null);
-  const enableAllowCreateMode = computed(() => {
+  const enableAllowCreateMode = computed$1(() => {
     return props.allowCreate && props.filterable;
   });
   function hasExistingOption(query) {
@@ -37406,25 +37597,25 @@ const useSelect$1 = (props, emit) => {
   const selectionRef = ref(null);
   const calculatorRef = ref(null);
   const expanded = ref(false);
-  const selectDisabled = computed(() => props.disabled || (elForm == null ? void 0 : elForm.disabled));
-  const popupHeight = computed(() => {
+  const selectDisabled = computed$1(() => props.disabled || (elForm == null ? void 0 : elForm.disabled));
+  const popupHeight = computed$1(() => {
     const totalHeight = filteredOptions.value.length * 34;
     return totalHeight > props.height ? props.height : totalHeight;
   });
-  const hasModelValue = computed(() => {
+  const hasModelValue = computed$1(() => {
     return props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "";
   });
-  const showClearBtn = computed(() => {
+  const showClearBtn = computed$1(() => {
     const hasValue = props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : hasModelValue.value;
     const criteria = props.clearable && !selectDisabled.value && states.comboBoxHovering && hasValue;
     return criteria;
   });
-  const iconComponent = computed(() => props.remote && props.filterable ? "" : arrow_up_default);
-  const iconReverse = computed(() => iconComponent.value && nsSelectV2.is("reverse", expanded.value));
-  const validateState = computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
-  const validateIcon = computed(() => ValidateComponentsMap[validateState.value]);
-  const debounce$1 = computed(() => props.remote ? 300 : 0);
-  const emptyText = computed(() => {
+  const iconComponent = computed$1(() => props.remote && props.filterable ? "" : arrow_up_default);
+  const iconReverse = computed$1(() => iconComponent.value && nsSelectV2.is("reverse", expanded.value));
+  const validateState = computed$1(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
+  const validateIcon = computed$1(() => ValidateComponentsMap[validateState.value]);
+  const debounce$1 = computed$1(() => props.remote ? 300 : 0);
+  const emptyText = computed$1(() => {
     const options = filteredOptions.value;
     if (props.loading) {
       return props.loadingText || t("el.select.loading");
@@ -37440,7 +37631,7 @@ const useSelect$1 = (props, emit) => {
     }
     return null;
   });
-  const filteredOptions = computed(() => {
+  const filteredOptions = computed$1(() => {
     const isValidOption = (o) => {
       var _a;
       const query = states.inputValue;
@@ -37467,10 +37658,10 @@ const useSelect$1 = (props, emit) => {
       return null;
     }).filter((v) => v !== null));
   });
-  const optionsAllDisabled = computed(() => filteredOptions.value.every((option) => option.disabled));
+  const optionsAllDisabled = computed$1(() => filteredOptions.value.every((option) => option.disabled));
   const selectSize = useSize();
-  const collapseTagSize = computed(() => selectSize.value === "small" ? "small" : "default");
-  const tagMaxWidth = computed(() => {
+  const collapseTagSize = computed$1(() => selectSize.value === "small" ? "small" : "default");
+  const tagMaxWidth = computed$1(() => {
     const select = selectionRef.value;
     const size = collapseTagSize.value || "default";
     const paddingLeft = select ? Number.parseInt(getComputedStyle(select).paddingLeft) : 0;
@@ -37481,26 +37672,26 @@ const useSelect$1 = (props, emit) => {
     var _a;
     popperSize.value = ((_a = selectRef.value) == null ? void 0 : _a.offsetWidth) || 200;
   };
-  const inputWrapperStyle = computed(() => {
+  const inputWrapperStyle = computed$1(() => {
     return {
       width: `${states.calculatedWidth === 0 ? MINIMUM_INPUT_WIDTH : Math.ceil(states.calculatedWidth) + MINIMUM_INPUT_WIDTH}px`
     };
   });
-  const shouldShowPlaceholder = computed(() => {
+  const shouldShowPlaceholder = computed$1(() => {
     if (isArray(props.modelValue)) {
       return props.modelValue.length === 0 && !states.displayInputValue;
     }
     return props.filterable ? states.displayInputValue.length === 0 : true;
   });
-  const currentPlaceholder = computed(() => {
+  const currentPlaceholder = computed$1(() => {
     const _placeholder = props.placeholder || t("el.select.placeholder");
     return props.multiple ? _placeholder : states.selectedLabel || _placeholder;
   });
-  const popperRef = computed(() => {
+  const popperRef = computed$1(() => {
     var _a, _b;
     return (_b = (_a = popper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
   });
-  const indexRef = computed(() => {
+  const indexRef = computed$1(() => {
     if (props.multiple) {
       const len = props.modelValue.length;
       if (props.modelValue.length > 0) {
@@ -37513,7 +37704,7 @@ const useSelect$1 = (props, emit) => {
     }
     return -1;
   });
-  const dropdownMenuVisible = computed({
+  const dropdownMenuVisible = computed$1({
     get() {
       return expanded.value && emptyText.value !== false;
     },
@@ -38031,14 +38222,13 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createElementBlock("div", {
     ref: "selectRef",
     class: normalizeClass([_ctx.nsSelectV2.b(), _ctx.nsSelectV2.m(_ctx.selectSize)]),
-    onClick: _cache[24] || (_cache[24] = withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"])),
-    onMouseenter: _cache[25] || (_cache[25] = ($event) => _ctx.states.comboBoxHovering = true),
-    onMouseleave: _cache[26] || (_cache[26] = ($event) => _ctx.states.comboBoxHovering = false)
+    onClick: _cache[23] || (_cache[23] = withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"])),
+    onMouseenter: _cache[24] || (_cache[24] = ($event) => _ctx.states.comboBoxHovering = true),
+    onMouseleave: _cache[25] || (_cache[25] = ($event) => _ctx.states.comboBoxHovering = false)
   }, [
     createVNode(_component_el_tooltip, {
       ref: "popper",
       visible: _ctx.dropdownMenuVisible,
-      "onUpdate:visible": _cache[22] || (_cache[22] = ($event) => _ctx.dropdownMenuVisible = $event),
       teleported: _ctx.teleported,
       "popper-class": [_ctx.nsSelectV2.e("popper"), _ctx.popperClass],
       "gpu-acceleration": false,
@@ -38052,7 +38242,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
       trigger: "click",
       persistent: _ctx.persistent,
       onBeforeShow: _ctx.handleMenuEnter,
-      onHide: _cache[23] || (_cache[23] = ($event) => _ctx.states.inputValue = _ctx.states.displayInputValue)
+      onHide: _cache[22] || (_cache[22] = ($event) => _ctx.states.inputValue = _ctx.states.displayInputValue)
     }, {
       default: withCtx(() => {
         var _a;
@@ -38594,7 +38784,7 @@ const useLifecycle = (props, initData, resetSize) => {
 };
 
 const useMarks = (props) => {
-  return computed(() => {
+  return computed$1(() => {
     if (!props.marks) {
       return [];
     }
@@ -38616,25 +38806,25 @@ const useSlide = (props, initData, emit) => {
     firstButton,
     secondButton
   };
-  const sliderDisabled = computed(() => {
+  const sliderDisabled = computed$1(() => {
     return props.disabled || (elForm == null ? void 0 : elForm.disabled) || false;
   });
-  const minValue = computed(() => {
+  const minValue = computed$1(() => {
     return Math.min(initData.firstValue, initData.secondValue);
   });
-  const maxValue = computed(() => {
+  const maxValue = computed$1(() => {
     return Math.max(initData.firstValue, initData.secondValue);
   });
-  const barSize = computed(() => {
+  const barSize = computed$1(() => {
     return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstValue - props.min) / (props.max - props.min)}%`;
   });
-  const barStart = computed(() => {
+  const barStart = computed$1(() => {
     return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%";
   });
-  const runwayStyle = computed(() => {
+  const runwayStyle = computed$1(() => {
     return props.vertical ? { height: props.height } : {};
   });
-  const barStyle = computed(() => {
+  const barStyle = computed$1(() => {
     return props.vertical ? {
       height: barSize.value,
       bottom: barStart.value
@@ -38747,10 +38937,10 @@ const { left, down, right, up, home, end, pageUp, pageDown } = EVENT_CODE;
 const useTooltip = (props, formatTooltip, showTooltip) => {
   const tooltip = ref();
   const tooltipVisible = ref(false);
-  const enableFormat = computed(() => {
+  const enableFormat = computed$1(() => {
     return formatTooltip.value instanceof Function;
   });
-  const formatValue = computed(() => {
+  const formatValue = computed$1(() => {
     return enableFormat.value && formatTooltip.value(props.modelValue) || props.modelValue;
   });
   const displayTooltip = debounce(() => {
@@ -38783,10 +38973,10 @@ const useSliderButton = (props, initData, emit) => {
   } = inject(sliderContextKey);
   const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip);
   const button = ref();
-  const currentPosition = computed(() => {
+  const currentPosition = computed$1(() => {
     return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`;
   });
-  const wrapperStyle = computed(() => {
+  const wrapperStyle = computed$1(() => {
     return props.vertical ? { bottom: currentPosition.value } : { left: currentPosition.value };
   });
   const handleMouseEnter = () => {
@@ -38966,7 +39156,7 @@ const useSliderButton = (props, initData, emit) => {
 };
 
 const useStops = (props, initData, minValue, maxValue) => {
-  const stops = computed(() => {
+  const stops = computed$1(() => {
     if (!props.showStops || props.min > props.max)
       return [];
     if (props.step === 0) {
@@ -39132,19 +39322,18 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         class: normalizeClass([unref(ns).e("button-wrapper"), { hover: unref(hovering), dragging: unref(dragging) }]),
         style: normalizeStyle(unref(wrapperStyle)),
         tabindex: "0",
-        onMouseenter: _cache[1] || (_cache[1] = (...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args)),
-        onMouseleave: _cache[2] || (_cache[2] = (...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args)),
-        onMousedown: _cache[3] || (_cache[3] = (...args) => unref(onButtonDown) && unref(onButtonDown)(...args)),
-        onTouchstart: _cache[4] || (_cache[4] = (...args) => unref(onButtonDown) && unref(onButtonDown)(...args)),
-        onFocus: _cache[5] || (_cache[5] = (...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args)),
-        onBlur: _cache[6] || (_cache[6] = (...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args)),
-        onKeydown: _cache[7] || (_cache[7] = (...args) => unref(onKeyDown) && unref(onKeyDown)(...args))
+        onMouseenter: _cache[0] || (_cache[0] = (...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args)),
+        onMouseleave: _cache[1] || (_cache[1] = (...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args)),
+        onMousedown: _cache[2] || (_cache[2] = (...args) => unref(onButtonDown) && unref(onButtonDown)(...args)),
+        onTouchstart: _cache[3] || (_cache[3] = (...args) => unref(onButtonDown) && unref(onButtonDown)(...args)),
+        onFocus: _cache[4] || (_cache[4] = (...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args)),
+        onBlur: _cache[5] || (_cache[5] = (...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args)),
+        onKeydown: _cache[6] || (_cache[6] = (...args) => unref(onKeyDown) && unref(onKeyDown)(...args))
       }, [
         createVNode(unref(ElTooltip), {
           ref_key: "tooltip",
           ref: tooltip,
           visible: unref(tooltipVisible),
-          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isRef(tooltipVisible) ? tooltipVisible.value = $event : null),
           placement: _ctx.placement,
           "fallback-placements": ["top", "bottom", "right", "left"],
           "stop-popper-mouse-event": false,
@@ -39179,10 +39368,10 @@ var SliderMarker = defineComponent({
   props: sliderMarkerProps,
   setup(props) {
     const ns = useNamespace("slider");
-    const label = computed(() => {
+    const label = computed$1(() => {
       return isString(props.mark) ? props.mark : props.mark.label;
     });
-    const style = computed(() => isString(props.mark) ? void 0 : props.mark.style);
+    const style = computed$1(() => isString(props.mark) ? void 0 : props.mark.style);
     return () => h$1("div", {
       class: ns.e("marks-text"),
       style: style.value
@@ -39233,30 +39422,30 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       formItemContext: elFormItem
     });
     const sliderWrapperSize = useSize();
-    const sliderInputSize = computed(() => props.inputSize || sliderWrapperSize.value);
-    const groupLabel = computed(() => {
+    const sliderInputSize = computed$1(() => props.inputSize || sliderWrapperSize.value);
+    const groupLabel = computed$1(() => {
       return props.label || t("el.slider.defaultLabel", {
         min: props.min,
         max: props.max
       });
     });
-    const firstButtonLabel = computed(() => {
+    const firstButtonLabel = computed$1(() => {
       if (props.range) {
         return props.rangeStartLabel || t("el.slider.defaultRangeStartLabel");
       } else {
         return groupLabel.value;
       }
     });
-    const firstValueText = computed(() => {
+    const firstValueText = computed$1(() => {
       return props.formatValueText ? props.formatValueText(firstValue.value) : `${firstValue.value}`;
     });
-    const secondButtonLabel = computed(() => {
+    const secondButtonLabel = computed$1(() => {
       return props.rangeEndLabel || t("el.slider.defaultRangeEndLabel");
     });
-    const secondValueText = computed(() => {
+    const secondValueText = computed$1(() => {
       return props.formatValueText ? props.formatValueText(secondValue.value) : `${secondValue.value}`;
     });
-    const sliderKls = computed(() => [
+    const sliderKls = computed$1(() => [
       ns.b(),
       ns.m(sliderWrapperSize.value),
       ns.is("vertical", props.vertical),
@@ -39264,7 +39453,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     ]);
     const markList = useMarks(props);
     useWatch(props, initData, minValue, maxValue, emit, elFormItem);
-    const precision = computed(() => {
+    const precision = computed$1(() => {
       const precisions = [props.min, props.max, props.step].map((item) => {
         const decimal = `${item}`.split(".")[1];
         return decimal ? decimal.length : 0;
@@ -39419,7 +39608,7 @@ const SpaceItem = defineComponent({
   props: spaceItemProps,
   setup(props, { slots }) {
     const ns = useNamespace("space");
-    const classes = computed(() => `${props.prefixCls || ns.b()}__item`);
+    const classes = computed$1(() => `${props.prefixCls || ns.b()}__item`);
     return () => h$1("div", { class: classes.value }, renderSlot(slots, "default"));
   }
 });
@@ -39432,17 +39621,17 @@ const SIZE_MAP = {
 };
 function useSpace(props) {
   const ns = useNamespace("space");
-  const classes = computed(() => [ns.b(), ns.m(props.direction), props.class]);
+  const classes = computed$1(() => [ns.b(), ns.m(props.direction), props.class]);
   const horizontalSize = ref(0);
   const verticalSize = ref(0);
-  const containerStyle = computed(() => {
+  const containerStyle = computed$1(() => {
     const wrapKls = props.wrap || props.fill ? { flexWrap: "wrap", marginBottom: `-${verticalSize.value}px` } : {};
     const alignment = {
       alignItems: props.alignment
     };
     return [wrapKls, alignment, props.style];
   });
-  const itemStyle = computed(() => {
+  const itemStyle = computed$1(() => {
     const itemBaseStyle = {
       paddingBottom: `${verticalSize.value}px`,
       marginRight: `${horizontalSize.value}px`
@@ -39704,33 +39893,33 @@ const _sfc_main$s = defineComponent({
     onBeforeUnmount(() => {
       parent.steps.value = parent.steps.value.filter((instance) => instance.uid !== (currentInstance == null ? void 0 : currentInstance.uid));
     });
-    const currentStatus = computed(() => {
+    const currentStatus = computed$1(() => {
       return props.status || internalStatus.value;
     });
-    const prevStatus = computed(() => {
+    const prevStatus = computed$1(() => {
       const prevStep = parent.steps.value[index.value - 1];
       return prevStep ? prevStep.currentStatus : "wait";
     });
-    const isCenter = computed(() => {
+    const isCenter = computed$1(() => {
       return parent.props.alignCenter;
     });
-    const isVertical = computed(() => {
+    const isVertical = computed$1(() => {
       return parent.props.direction === "vertical";
     });
-    const isSimple = computed(() => {
+    const isSimple = computed$1(() => {
       return parent.props.simple;
     });
-    const stepsCount = computed(() => {
+    const stepsCount = computed$1(() => {
       return parent.steps.value.length;
     });
-    const isLast = computed(() => {
+    const isLast = computed$1(() => {
       var _a;
       return ((_a = parent.steps.value[stepsCount.value - 1]) == null ? void 0 : _a.uid) === (currentInstance == null ? void 0 : currentInstance.uid);
     });
-    const space = computed(() => {
+    const space = computed$1(() => {
       return isSimple.value ? "" : parent.props.space;
     });
-    const style = computed(() => {
+    const style = computed$1(() => {
       const style2 = {
         flexBasis: typeof space.value === "number" ? `${space.value}px` : space.value ? space.value : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`
       };
@@ -39771,7 +39960,7 @@ const _sfc_main$s = defineComponent({
         prevChild.calcProgress(internalStatus.value);
     };
     const stepItemState = reactive({
-      uid: computed(() => currentInstance == null ? void 0 : currentInstance.uid),
+      uid: computed$1(() => currentInstance == null ? void 0 : currentInstance.uid),
       currentStatus,
       setIndex,
       calcProgress
@@ -39976,24 +40165,24 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       version: "2.3.0",
       ref: "https://element-plus.org/en-US/component/switch.html#attributes",
       type: "Attribute"
-    }, computed(() => {
+    }, computed$1(() => {
       var _a;
       return !!((_a = vm.vnode.props) == null ? void 0 : _a.value);
     }));
     const { inputId } = useFormItemInputId(props, {
       formItemContext: formItem
     });
-    const switchDisabled = useDisabled$1(computed(() => props.loading));
+    const switchDisabled = useDisabled$1(computed$1(() => props.loading));
     const isControlled = ref(props.modelValue !== false);
     const input = ref();
     const core = ref();
-    const switchKls = computed(() => [
+    const switchKls = computed$1(() => [
       ns.b(),
       ns.m(switchSize.value),
       ns.is("disabled", switchDisabled.value),
       ns.is("checked", checked.value)
     ]);
-    const coreStyle = computed(() => ({
+    const coreStyle = computed$1(() => ({
       width: addUnit(props.width)
     }));
     watch(() => props.modelValue, () => {
@@ -40002,10 +40191,10 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     watch(() => props.value, () => {
       isControlled.value = false;
     });
-    const actualValue = computed(() => {
+    const actualValue = computed$1(() => {
       return isControlled.value ? props.modelValue : props.value;
     });
-    const checked = computed(() => actualValue.value === props.activeValue);
+    const checked = computed$1(() => actualValue.value === props.activeValue);
     if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
       emit(UPDATE_MODEL_EVENT, props.inactiveValue);
       emit(CHANGE_EVENT, props.inactiveValue);
@@ -40054,7 +40243,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         handleChange();
       }
     };
-    const styles = computed(() => {
+    const styles = computed$1(() => {
       return ns.cssVarBlock({
         ...props.activeColor ? { "on-color": props.activeColor } : null,
         ...props.inactiveColor ? { "off-color": props.inactiveColor } : null,
@@ -40749,13 +40938,13 @@ function useTree$2(watcherData) {
   const lazyColumnIdentifier = ref("hasChildren");
   const childrenColumnName = ref("children");
   const instance = getCurrentInstance();
-  const normalizedData = computed(() => {
+  const normalizedData = computed$1(() => {
     if (!watcherData.rowKey.value)
       return {};
     const data = watcherData.data.value || [];
     return normalize(data);
   });
-  const normalizedLazyNode = computed(() => {
+  const normalizedLazyNode = computed$1(() => {
     const rowKey = watcherData.rowKey.value;
     const keys = Object.keys(lazyTreeNodeMap.value);
     const res = {};
@@ -41804,10 +41993,10 @@ const _sfc_main$q = defineComponent({
     }
     const tooltipVisible = ref(false);
     const tooltip = ref(null);
-    const filters = computed(() => {
+    const filters = computed$1(() => {
       return props.column && props.column.filters;
     });
-    const filterValue = computed({
+    const filterValue = computed$1({
       get: () => {
         var _a;
         return (((_a = props.column) == null ? void 0 : _a.filteredValue) || [])[0];
@@ -41822,7 +42011,7 @@ const _sfc_main$q = defineComponent({
         }
       }
     });
-    const filteredValue = computed({
+    const filteredValue = computed$1({
       get() {
         if (props.column) {
           return props.column.filteredValue || [];
@@ -41835,7 +42024,7 @@ const _sfc_main$q = defineComponent({
         }
       }
     });
-    const multiple = computed(() => {
+    const multiple = computed$1(() => {
       if (props.column) {
         return props.column.filterMultiple;
       }
@@ -41886,7 +42075,7 @@ const _sfc_main$q = defineComponent({
     }, {
       immediate: true
     });
-    const popperPaneRef = computed(() => {
+    const popperPaneRef = computed$1(() => {
       var _a, _b;
       return (_b = (_a = tooltip.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
     });
@@ -41924,7 +42113,6 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_el_tooltip, {
     ref: "tooltip",
     visible: _ctx.tooltipVisible,
-    "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => _ctx.tooltipVisible = $event),
     offset: 0,
     placement: _ctx.placement,
     "show-arrow": false,
@@ -42044,7 +42232,7 @@ function useLayoutObserver(root) {
   onUnmounted(() => {
     tableLayout.value.removeObserver(instance);
   });
-  const tableLayout = computed(() => {
+  const tableLayout = computed$1(() => {
     const layout = root.layout;
     if (!layout) {
       throw new Error("Can not find table layout.");
@@ -42384,10 +42572,10 @@ const convertToRows = (originColumns) => {
 };
 function useUtils$1(props) {
   const parent = inject(TABLE_INJECTION_KEY);
-  const columnRows = computed(() => {
+  const columnRows = computed$1(() => {
     return convertToRows(props.store.states.originColumns.value);
   });
-  const isGroup = computed(() => {
+  const isGroup = computed$1(() => {
     const result = columnRows.value.length > 1;
     if (result && parent) {
       parent.state.isGroup.value = true;
@@ -42774,7 +42962,7 @@ function useRender$1(props) {
     getSpan,
     getColspanRealWidth
   } = useStyles$1(props);
-  const firstDefaultColumnIndex = computed(() => {
+  const firstDefaultColumnIndex = computed$1(() => {
     return props.store.states.columns.value.findIndex(({ type }) => type === "default");
   });
   const getKeyOfRow = (row, index) => {
@@ -43064,19 +43252,19 @@ hColgroup.props = ["columns", "tableLayout"];
 function useMapState() {
   const table = inject(TABLE_INJECTION_KEY);
   const store = table == null ? void 0 : table.store;
-  const leftFixedLeafCount = computed(() => {
+  const leftFixedLeafCount = computed$1(() => {
     return store.states.fixedLeafColumnsLength.value;
   });
-  const rightFixedLeafCount = computed(() => {
+  const rightFixedLeafCount = computed$1(() => {
     return store.states.rightFixedColumns.value.length;
   });
-  const columnsCount = computed(() => {
+  const columnsCount = computed$1(() => {
     return store.states.columns.value.length;
   });
-  const leftFixedCount = computed(() => {
+  const leftFixedCount = computed$1(() => {
     return store.states.fixedColumns.value.length;
   });
-  const rightFixedCount = computed(() => {
+  const rightFixedCount = computed$1(() => {
     return store.states.rightFixedColumns.value.length;
   });
   return {
@@ -43294,6 +43482,7 @@ function useStyle(props, layout, store, table) {
   const tableScrollHeight = ref(0);
   const bodyScrollHeight = ref(0);
   const headerScrollHeight = ref(0);
+  const footerScrollHeight = ref(0);
   watchEffect(() => {
     layout.setHeight(props.height);
   });
@@ -43329,10 +43518,10 @@ function useStyle(props, layout, store, table) {
       table.refs.bodyWrapper.scrollLeft += data.pixelX / 5;
     }
   };
-  const shouldUpdateHeight = computed(() => {
+  const shouldUpdateHeight = computed$1(() => {
     return props.height || props.maxHeight || store.states.fixedColumns.value.length > 0 || store.states.rightFixedColumns.value.length > 0;
   });
-  const tableBodyStyles = computed(() => {
+  const tableBodyStyles = computed$1(() => {
     return {
       width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : ""
     };
@@ -43428,7 +43617,7 @@ function useStyle(props, layout, store, table) {
     }
   };
   const resizeListener = () => {
-    var _a;
+    var _a, _b;
     if (!table.$ready)
       return;
     let shouldUpdateLayout = false;
@@ -43447,32 +43636,33 @@ function useStyle(props, layout, store, table) {
       shouldUpdateLayout = true;
     }
     const tableHeader = table.refs.headerWrapper;
-    if (props.showHeader && tableHeader.offsetHeight !== oldHeaderHeight) {
+    if (props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) !== oldHeaderHeight) {
       shouldUpdateLayout = true;
     }
-    tableScrollHeight.value = table.refs.tableWrapper.scrollHeight;
-    headerScrollHeight.value = ((_a = table.refs.headerWrapper) == null ? void 0 : _a.scrollHeight) || 0;
-    bodyScrollHeight.value = tableScrollHeight.value - headerScrollHeight.value;
+    tableScrollHeight.value = ((_a = table.refs.tableWrapper) == null ? void 0 : _a.scrollHeight) || 0;
+    headerScrollHeight.value = (tableHeader == null ? void 0 : tableHeader.scrollHeight) || 0;
+    footerScrollHeight.value = ((_b = table.refs.footerWrapper) == null ? void 0 : _b.scrollHeight) || 0;
+    bodyScrollHeight.value = tableScrollHeight.value - headerScrollHeight.value - footerScrollHeight.value;
     if (shouldUpdateLayout) {
       resizeState.value = {
         width,
         height,
-        headerHeight: props.showHeader ? tableHeader.offsetHeight : null
+        headerHeight: props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) || 0
       };
       doLayout();
     }
   };
   const tableSize = useSize();
-  const bodyWidth = computed(() => {
+  const bodyWidth = computed$1(() => {
     const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout;
     return bodyWidth_.value ? `${bodyWidth_.value - (scrollY.value ? gutterWidth : 0)}px` : "";
   });
-  const tableLayout = computed(() => {
+  const tableLayout = computed$1(() => {
     if (props.maxHeight)
       return "fixed";
     return props.tableLayout;
   });
-  const emptyBlockStyle = computed(() => {
+  const emptyBlockStyle = computed$1(() => {
     if (props.data && props.data.length)
       return null;
     let height = "100%";
@@ -43485,7 +43675,7 @@ function useStyle(props, layout, store, table) {
       height
     };
   });
-  const tableInnerStyle = computed(() => {
+  const tableInnerStyle = computed$1(() => {
     if (props.height) {
       return {
         height: !Number.isNaN(Number(props.height)) ? `${props.height}px` : props.height
@@ -43498,8 +43688,8 @@ function useStyle(props, layout, store, table) {
     }
     return {};
   });
-  const scrollbarStyle = computed(() => {
-    var _a;
+  const scrollbarStyle = computed$1(() => {
+    var _a, _b;
     if (props.height) {
       return {
         height: "100%"
@@ -43508,16 +43698,17 @@ function useStyle(props, layout, store, table) {
     if (props.maxHeight) {
       if (!Number.isNaN(Number(props.maxHeight))) {
         const headerHeight = ((_a = table.refs.headerWrapper) == null ? void 0 : _a.scrollHeight) || 0;
+        const footerHeight = ((_b = table.refs.footerWrapper) == null ? void 0 : _b.scrollHeight) || 0;
         const maxHeight = props.maxHeight;
         const reachMaxHeight = tableScrollHeight.value >= Number(maxHeight);
         if (reachMaxHeight) {
           return {
-            maxHeight: `${tableScrollHeight.value - headerHeight}px`
+            maxHeight: `${tableScrollHeight.value - headerHeight - footerHeight}px`
           };
         }
       } else {
         return {
-          maxHeight: `calc(${props.maxHeight} - ${headerScrollHeight.value}px)`
+          maxHeight: `calc(${props.maxHeight} - ${headerScrollHeight.value + footerScrollHeight.value}px)`
         };
       }
     }
@@ -43711,7 +43902,7 @@ const _sfc_main$p = defineComponent({
       showHeader: props.showHeader
     });
     table.layout = layout;
-    const isEmpty = computed(() => (store.states.data.value || []).length === 0);
+    const isEmpty = computed$1(() => (store.states.data.value || []).length === 0);
     const {
       setCurrentRow,
       getSelectionRows,
@@ -43753,8 +43944,8 @@ const _sfc_main$p = defineComponent({
       doLayout,
       debouncedUpdateLayout
     };
-    const computedSumText = computed(() => props.sumText || t("el.table.sumText"));
-    const computedEmptyText = computed(() => {
+    const computedSumText = computed$1(() => props.sumText || t("el.table.sumText"));
+    const computedEmptyText = computed$1(() => {
       return props.emptyText || t("el.table.emptyText");
     });
     return {
@@ -43902,6 +44093,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
               }, null, 8, ["columns", "table-layout"]),
               _ctx.showHeader && _ctx.tableLayout === "auto" ? (openBlock(), createBlock(_component_table_header, {
                 key: 0,
+                ref: "tableHeaderRef",
                 border: _ctx.border,
                 "default-sort": _ctx.defaultSort,
                 store: _ctx.store,
@@ -44244,14 +44436,14 @@ function useRender(props, slots, owner) {
     realHeaderAlign.value = props.headerAlign ? `is-${props.headerAlign}` : realAlign.value;
     realHeaderAlign.value;
   });
-  const columnOrTableParent = computed(() => {
+  const columnOrTableParent = computed$1(() => {
     let parent = instance.vnode.vParent || instance.parent;
     while (parent && !parent.tableId && !parent.columnId) {
       parent = parent.vnode.vParent || parent.parent;
     }
     return parent;
   });
-  const hasTreeColumn = computed(() => {
+  const hasTreeColumn = computed$1(() => {
     const { store } = instance.parent;
     if (!store)
       return false;
@@ -44442,7 +44634,7 @@ var ElTableColumn$1 = defineComponent({
   setup(props, { slots }) {
     const instance = getCurrentInstance();
     const columnConfig = ref({});
-    const owner = computed(() => {
+    const owner = computed$1(() => {
       let parent2 = instance.parent;
       while (parent2 && !parent2.tableId) {
         parent2 = parent2.parent;
@@ -44617,13 +44809,13 @@ const calcColumnStyle = (column, fixedColumn, fixed) => {
 };
 
 function useColumns(props, columns, fixed) {
-  const visibleColumns = computed(() => {
+  const visibleColumns = computed$1(() => {
     return unref(columns).filter((column) => !column.hidden);
   });
-  const fixedColumnsOnLeft = computed(() => unref(visibleColumns).filter((column) => column.fixed === "left" || column.fixed === true));
-  const fixedColumnsOnRight = computed(() => unref(visibleColumns).filter((column) => column.fixed === "right"));
-  const normalColumns = computed(() => unref(visibleColumns).filter((column) => !column.fixed));
-  const mainColumns = computed(() => {
+  const fixedColumnsOnLeft = computed$1(() => unref(visibleColumns).filter((column) => column.fixed === "left" || column.fixed === true));
+  const fixedColumnsOnRight = computed$1(() => unref(visibleColumns).filter((column) => column.fixed === "right"));
+  const normalColumns = computed$1(() => unref(visibleColumns).filter((column) => !column.fixed));
+  const mainColumns = computed$1(() => {
     const ret = [];
     unref(fixedColumnsOnLeft).forEach((column) => {
       ret.push({
@@ -44642,17 +44834,17 @@ function useColumns(props, columns, fixed) {
     });
     return ret;
   });
-  const hasFixedColumns = computed(() => {
+  const hasFixedColumns = computed$1(() => {
     return unref(fixedColumnsOnLeft).length || unref(fixedColumnsOnRight).length;
   });
-  const columnsStyles = computed(() => {
+  const columnsStyles = computed$1(() => {
     const _columns = unref(columns);
     return _columns.reduce((style, column) => {
       style[column.key] = calcColumnStyle(column, unref(fixed), props.fixed);
       return style;
     }, {});
   });
-  const columnsTotalWidth = computed(() => {
+  const columnsTotalWidth = computed$1(() => {
     return unref(visibleColumns).reduce((width, column) => width + column.width, 0);
   });
   const getColumn = (key) => {
@@ -44764,7 +44956,7 @@ const useRow = (props, { mainTableRef, leftTableRef, rightTableRef, onMaybeEndRe
   const leftTableHeights = shallowRef({});
   const mainTableHeights = shallowRef({});
   const rightTableHeights = shallowRef({});
-  const isDynamic = computed(() => isNumber(props.estimatedRowHeight));
+  const isDynamic = computed$1(() => isNumber(props.estimatedRowHeight));
   function onRowsRendered(params) {
     var _a;
     (_a = props.onRowsRendered) == null ? void 0 : _a.call(props, params);
@@ -44868,7 +45060,7 @@ const useRow = (props, { mainTableRef, leftTableRef, rightTableRef, onMaybeEndRe
 
 const useData = (props, { expandedRowKeys, lastRenderedRowIndex, resetAfterIndex }) => {
   const depthMap = ref({});
-  const flattenedData = computed(() => {
+  const flattenedData = computed$1(() => {
     const depths = {};
     const { data: data2, rowKey } = props;
     const _expandedRowKeys = unref(expandedRowKeys);
@@ -44890,7 +45082,7 @@ const useData = (props, { expandedRowKeys, lastRenderedRowIndex, resetAfterIndex
     depthMap.value = depths;
     return array;
   });
-  const data = computed(() => {
+  const data = computed$1(() => {
     const { data: data2, expandColumnKey } = props;
     return expandColumnKey ? unref(flattenedData) : data2;
   });
@@ -44927,13 +45119,13 @@ const useStyles = (props, {
   fixedColumnsOnLeft,
   fixedColumnsOnRight
 }) => {
-  const bodyWidth = computed(() => {
+  const bodyWidth = computed$1(() => {
     const { fixed, width, vScrollbarSize } = props;
     const ret = width - vScrollbarSize;
     return fixed ? Math.max(Math.round(unref(columnsTotalWidth)), ret) : ret;
   });
-  const headerWidth = computed(() => unref(bodyWidth) + (props.fixed ? props.vScrollbarSize : 0));
-  const mainTableHeight = computed(() => {
+  const headerWidth = computed$1(() => unref(bodyWidth) + (props.fixed ? props.vScrollbarSize : 0));
+  const mainTableHeight = computed$1(() => {
     const { height = 0, maxHeight = 0, footerHeight: footerHeight2, hScrollbarSize } = props;
     if (maxHeight > 0) {
       const _fixedRowsHeight = unref(fixedRowsHeight);
@@ -44944,7 +45136,7 @@ const useStyles = (props, {
     }
     return height - footerHeight2;
   });
-  const rowsHeight = computed(() => {
+  const rowsHeight = computed$1(() => {
     const { rowHeight, estimatedRowHeight } = props;
     const _data = unref(data);
     if (isNumber(estimatedRowHeight)) {
@@ -44952,7 +45144,7 @@ const useStyles = (props, {
     }
     return _data.length * rowHeight;
   });
-  const fixedTableHeight = computed(() => {
+  const fixedTableHeight = computed$1(() => {
     const { maxHeight } = props;
     const tableHeight = unref(mainTableHeight);
     if (isNumber(maxHeight) && maxHeight > 0)
@@ -44961,17 +45153,17 @@ const useStyles = (props, {
     return Math.min(tableHeight, totalHeight);
   });
   const mapColumn = (column) => column.width;
-  const leftTableWidth = computed(() => sum(unref(fixedColumnsOnLeft).map(mapColumn)));
-  const rightTableWidth = computed(() => sum(unref(fixedColumnsOnRight).map(mapColumn)));
-  const headerHeight = computed(() => sum(props.headerHeight));
-  const fixedRowsHeight = computed(() => {
+  const leftTableWidth = computed$1(() => sum(unref(fixedColumnsOnLeft).map(mapColumn)));
+  const rightTableWidth = computed$1(() => sum(unref(fixedColumnsOnRight).map(mapColumn)));
+  const headerHeight = computed$1(() => sum(props.headerHeight));
+  const fixedRowsHeight = computed$1(() => {
     var _a;
     return (((_a = props.fixedData) == null ? void 0 : _a.length) || 0) * props.rowHeight;
   });
-  const windowHeight = computed(() => {
+  const windowHeight = computed$1(() => {
     return unref(mainTableHeight) - unref(headerHeight) - unref(fixedRowsHeight);
   });
-  const rootStyle = computed(() => {
+  const rootStyle = computed$1(() => {
     const { style = {}, height, width } = props;
     return enforceUnit({
       ...style,
@@ -44979,8 +45171,8 @@ const useStyles = (props, {
       width
     });
   });
-  const footerHeight = computed(() => enforceUnit({ height: props.footerHeight }));
-  const emptyStyle = computed(() => ({
+  const footerHeight = computed$1(() => enforceUnit({ height: props.footerHeight }));
+  const emptyStyle = computed$1(() => ({
     top: addUnit(unref(headerHeight)),
     bottom: addUnit(props.footerHeight),
     width: addUnit(props.width)
@@ -45105,7 +45297,7 @@ function useTable(props) {
   });
   const isScrolling = shallowRef(false);
   const containerRef = ref();
-  const showEmpty = computed(() => {
+  const showEmpty = computed$1(() => {
     const noData = unref(data).length === 0;
     return isArray(props.fixedData) ? props.fixedData.length === 0 && noData : noData;
   });
@@ -45495,15 +45687,15 @@ const TableV2Header = defineComponent({
   }) {
     const ns = useNamespace("table-v2");
     const headerRef = ref();
-    const headerStyle = computed(() => enforceUnit({
+    const headerStyle = computed$1(() => enforceUnit({
       width: props.width,
       height: props.height
     }));
-    const rowStyle = computed(() => enforceUnit({
+    const rowStyle = computed$1(() => enforceUnit({
       width: props.rowWidth,
       height: props.height
     }));
-    const headerHeights = computed(() => castArray$1(unref(props.headerHeight)));
+    const headerHeights = computed$1(() => castArray$1(unref(props.headerHeight)));
     const scrollToLeft = (left) => {
       const headerEl = unref(headerRef);
       nextTick(() => {
@@ -45578,7 +45770,7 @@ const useTableRow = (props) => {
   } = inject(TableV2InjectionKey);
   const measured = ref(false);
   const rowRef = ref();
-  const measurable = computed(() => {
+  const measurable = computed$1(() => {
     return isNumber(props.estimatedRowHeight) && props.rowIndex >= 0;
   });
   const doMeasure = (isInit = false) => {
@@ -45608,7 +45800,7 @@ const useTableRow = (props) => {
       }
     });
   };
-  const eventHandlers = computed(() => {
+  const eventHandlers = computed$1(() => {
     const {
       rowData,
       rowIndex,
@@ -45807,7 +45999,7 @@ const COMPONENT_NAME$2 = "ElTableV2Grid";
 const useTableGrid = (props) => {
   const headerRef = ref();
   const bodyRef = ref();
-  const totalHeight = computed(() => {
+  const totalHeight = computed$1(() => {
     const {
       data,
       rowHeight,
@@ -45818,21 +46010,21 @@ const useTableGrid = (props) => {
     }
     return data.length * rowHeight;
   });
-  const fixedRowHeight = computed(() => {
+  const fixedRowHeight = computed$1(() => {
     const {
       fixedData,
       rowHeight
     } = props;
     return ((fixedData == null ? void 0 : fixedData.length) || 0) * rowHeight;
   });
-  const headerHeight = computed(() => sum(props.headerHeight));
-  const gridHeight = computed(() => {
+  const headerHeight = computed$1(() => sum(props.headerHeight));
+  const gridHeight = computed$1(() => {
     const {
       height
     } = props;
     return Math.max(0, height - unref(headerHeight) - unref(fixedRowHeight));
   });
-  const hasHeader = computed(() => {
+  const hasHeader = computed$1(() => {
     return unref(headerHeight) + unref(fixedRowHeight) > 0;
   });
   const itemKey = ({
@@ -46767,8 +46959,8 @@ const TabNav = defineComponent({
     const navOffset = ref(0);
     const isFocus = ref(false);
     const focusable = ref(true);
-    const sizeName = computed(() => ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height");
-    const navStyle = computed(() => {
+    const sizeName = computed$1(() => ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height");
+    const navStyle = computed$1(() => {
       const dir = sizeName.value === "width" ? "X" : "Y";
       return {
         transform: `translate${dir}(-${navOffset.value}px)`
@@ -47066,7 +47258,7 @@ var Tabs = defineComponent({
       version: "2.3.0",
       ref: "https://element-plus.org/en-US/component/tabs.html#attributes",
       type: "Attribute"
-    }, computed(() => !!props.activeName));
+    }, computed$1(() => !!props.activeName));
     watch(() => props.activeName, (modelValue) => setCurrentName(modelValue));
     watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
     watch(currentName, async () => {
@@ -47156,13 +47348,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       throwError(COMPONENT_NAME, "usage: <el-tabs><el-tab-pane /></el-tabs/>");
     const ns = useNamespace("tab-pane");
     const index = ref();
-    const isClosable = computed(() => props.closable || tabsRoot.props.closable);
+    const isClosable = computed$1(() => props.closable || tabsRoot.props.closable);
     const active = computedEager(() => {
       var _a;
       return tabsRoot.currentName.value === ((_a = props.name) != null ? _a : index.value);
     });
     const loaded = ref(active.value);
-    const paneName = computed(() => {
+    const paneName = computed$1(() => {
       var _a;
       return (_a = props.name) != null ? _a : index.value;
     });
@@ -47324,28 +47516,28 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     const { Option: ElOption } = ElSelect;
     const nsInput = useNamespace("input");
     const select = ref();
-    const value = computed(() => props.modelValue);
-    const start = computed(() => {
+    const value = computed$1(() => props.modelValue);
+    const start = computed$1(() => {
       const time = parseTime(props.start);
       return time ? formatTime(time) : null;
     });
-    const end = computed(() => {
+    const end = computed$1(() => {
       const time = parseTime(props.end);
       return time ? formatTime(time) : null;
     });
-    const step = computed(() => {
+    const step = computed$1(() => {
       const time = parseTime(props.step);
       return time ? formatTime(time) : null;
     });
-    const minTime = computed(() => {
+    const minTime = computed$1(() => {
       const time = parseTime(props.minTime || "");
       return time ? formatTime(time) : null;
     });
-    const maxTime = computed(() => {
+    const maxTime = computed$1(() => {
       const time = parseTime(props.maxTime || "");
       return time ? formatTime(time) : null;
     });
-    const items = computed(() => {
+    const items = computed$1(() => {
       const result = [];
       if (props.start && props.end && props.step) {
         let current = start.value;
@@ -47692,7 +47884,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const props = __props;
     const _open = ref(props.defaultOpen);
     const triggerRef = ref(null);
-    const open = computed({
+    const open = computed$1({
       get: () => isPropAbsent(props.open) ? _open.value : props.open,
       set: (open2) => {
         var _a;
@@ -47700,10 +47892,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         (_a = props["onUpdate:open"]) == null ? void 0 : _a.call(props, open2);
       }
     });
-    const isOpenDelayed = computed(() => isNumber(props.delayDuration) && props.delayDuration > 0);
+    const isOpenDelayed = computed$1(() => isNumber(props.delayDuration) && props.delayDuration > 0);
     const { start: onDelayedOpen, stop: clearTimer } = useTimeoutFn(() => {
       open.value = true;
-    }, computed(() => props.delayDuration), {
+    }, computed$1(() => props.delayDuration), {
       immediate: false
     });
     const ns = useNamespace("tooltip-v2");
@@ -47768,7 +47960,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { ns } = inject(tooltipV2RootKey);
     const { arrowRef } = inject(tooltipV2ContentKey);
-    const arrowStyle = computed(() => {
+    const arrowStyle = computed$1(() => {
       const { style, width, height } = props;
       const namespace = ns.namespace.value;
       return {
@@ -47806,7 +47998,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   props: visualHiddenProps,
   setup(__props) {
     const props = __props;
-    const computedStyle = computed(() => {
+    const computedStyle = computed$1(() => {
       return [
         props.style,
         {
@@ -47848,7 +48040,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const { referenceRef, contentRef, middlewareData, x, y, update } = useFloating({
       placement,
       strategy,
-      middleware: computed(() => {
+      middleware: computed$1(() => {
         const middleware = [offset(props.offset)];
         if (props.showArrow) {
           middleware.push(arrowMiddleware({
@@ -47860,10 +48052,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     });
     const zIndex = useZIndex().nextZIndex();
     const ns = useNamespace("tooltip-v2");
-    const side = computed(() => {
+    const side = computed$1(() => {
       return placement.value.split("-")[0];
     });
-    const contentStyle = computed(() => {
+    const contentStyle = computed$1(() => {
       return {
         position: unref(strategy),
         top: `${unref(y) || 0}px`,
@@ -47871,7 +48063,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         zIndex
       };
     });
-    const arrowStyle = computed(() => {
+    const arrowStyle = computed$1(() => {
       if (!props.showArrow)
         return {};
       const { arrow } = unref(middlewareData);
@@ -47880,7 +48072,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         [`--${ns.namespace.value}-tooltip-v2-arrow-y`]: `${arrow == null ? void 0 : arrow.y}px` || ""
       };
     });
-    const contentClass = computed(() => [
+    const contentClass = computed$1(() => [
       ns.e("content"),
       ns.is("dark", props.effect === "dark"),
       ns.is(unref(strategy)),
@@ -48204,7 +48396,7 @@ const usePropsAlias = (props) => {
     key: "key",
     disabled: "disabled"
   };
-  return computed(() => ({
+  return computed$1(() => ({
     ...initProps,
     ...props.props
   }));
@@ -48212,7 +48404,7 @@ const usePropsAlias = (props) => {
 
 const useCheck$1 = (props, panelState, emit) => {
   const propsAlias = usePropsAlias(props);
-  const filteredData = computed(() => {
+  const filteredData = computed$1(() => {
     return props.data.filter((item) => {
       if (isFunction(props.filterMethod)) {
         return props.filterMethod(panelState.query, item);
@@ -48222,8 +48414,8 @@ const useCheck$1 = (props, panelState, emit) => {
       }
     });
   });
-  const checkableData = computed(() => filteredData.value.filter((item) => !item[propsAlias.value.disabled]));
-  const checkedSummary = computed(() => {
+  const checkableData = computed$1(() => filteredData.value.filter((item) => !item[propsAlias.value.disabled]));
+  const checkedSummary = computed$1(() => {
     const checkedLength = panelState.checked.length;
     const dataLength = props.data.length;
     const { noChecked, hasChecked } = props.format;
@@ -48233,7 +48425,7 @@ const useCheck$1 = (props, panelState, emit) => {
       return `${checkedLength}/${dataLength}`;
     }
   });
-  const isIndeterminate = computed(() => {
+  const isIndeterminate = computed$1(() => {
     const checkedLength = panelState.checked.length;
     return checkedLength > 0 && checkedLength < checkableData.value.length;
   });
@@ -48314,9 +48506,9 @@ const useCheckedChange = (checkedState, emit) => {
 
 const useComputedData = (props) => {
   const propsAlias = usePropsAlias(props);
-  const dataObj = computed(() => props.data.reduce((o, cur) => (o[cur[propsAlias.value.key]] = cur) && o, {}));
-  const sourceData = computed(() => props.data.filter((item) => !props.modelValue.includes(item[propsAlias.value.key])));
-  const targetData = computed(() => {
+  const dataObj = computed$1(() => props.data.reduce((o, cur) => (o[cur[propsAlias.value.key]] = cur) && o, {}));
+  const sourceData = computed$1(() => props.data.filter((item) => !props.modelValue.includes(item[propsAlias.value.key])));
+  const targetData = computed$1(() => {
     if (props.targetOrder === "original") {
       return props.data.filter((item) => props.modelValue.includes(item[propsAlias.value.key]));
     } else {
@@ -48396,8 +48588,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       isIndeterminate,
       handleAllCheckedChange
     } = useCheck$1(props, panelState, emit);
-    const hasNoMatch = computed(() => !isEmpty(panelState.query) && isEmpty(filteredData.value));
-    const hasFooter = computed(() => !isEmpty(slots.default()[0].children));
+    const hasNoMatch = computed$1(() => !isEmpty(panelState.query) && isEmpty(filteredData.value));
+    const hasFooter = computed$1(() => !isEmpty(slots.default()[0].children));
     const { checked, allChecked, query, inputHover } = toRefs(panelState);
     expose({
       query
@@ -48519,17 +48711,17 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           break;
       }
     };
-    const hasButtonTexts = computed(() => props.buttonTexts.length === 2);
-    const leftPanelTitle = computed(() => props.titles[0] || t("el.transfer.titles.0"));
-    const rightPanelTitle = computed(() => props.titles[1] || t("el.transfer.titles.1"));
-    const panelFilterPlaceholder = computed(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
+    const hasButtonTexts = computed$1(() => props.buttonTexts.length === 2);
+    const leftPanelTitle = computed$1(() => props.titles[0] || t("el.transfer.titles.0"));
+    const rightPanelTitle = computed$1(() => props.titles[1] || t("el.transfer.titles.1"));
+    const panelFilterPlaceholder = computed$1(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
     watch(() => props.modelValue, () => {
       var _a;
       if (props.validateEvent) {
         (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
       }
     });
-    const optionRender = computed(() => (option) => {
+    const optionRender = computed$1(() => (option) => {
       if (props.renderContent)
         return props.renderContent(h$1, option);
       if (slots.default)
@@ -49855,10 +50047,6 @@ function useKeydown({ el$ }, store) {
   const checkboxItems = shallowRef([]);
   onMounted(() => {
     initTabIndex();
-    on$1(el$.value, "keydown", handleKeydown);
-  });
-  onBeforeUnmount(() => {
-    off(el$.value, "keydown", handleKeydown);
   });
   onUpdated(() => {
     treeItems.value = Array.from(el$.value.querySelectorAll("[role=treeitem]"));
@@ -49922,6 +50110,7 @@ function useKeydown({ el$ }, store) {
       hasInput.click();
     }
   };
+  useEventListener(el$, "keydown", handleKeydown);
   const initTabIndex = () => {
     var _a;
     treeItems.value = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`));
@@ -50049,7 +50238,7 @@ const _sfc_main$a = defineComponent({
       store
     });
     useKeydown({ el$ }, store);
-    const isEmpty = computed(() => {
+    const isEmpty = computed$1(() => {
       const { childNodes } = root.value;
       return !childNodes || childNodes.length === 0 || childNodes.every(({ visible }) => !visible);
     });
@@ -50258,7 +50447,7 @@ const useSelect = (props, { attrs }, {
     ...pick(toRefs(props), Object.keys(ElSelect.props)),
     ...attrs,
     valueKey: key,
-    popperClass: computed(() => {
+    popperClass: computed$1(() => {
       const classes = [ns.e("popper")];
       if (props.popperClass)
         classes.push(props.popperClass);
@@ -50347,7 +50536,7 @@ const useTree$1 = (props, { attrs, slots, emit }, {
     immediate: true,
     deep: true
   });
-  const propsMap = computed(() => ({
+  const propsMap = computed$1(() => ({
     value: key.value,
     ...props.props
   }));
@@ -50367,10 +50556,10 @@ const useTree$1 = (props, { attrs, slots, emit }, {
     ...pick(toRefs(props), Object.keys(_Tree.props)),
     ...attrs,
     nodeKey: key,
-    expandOnClickNode: computed(() => {
+    expandOnClickNode: computed$1(() => {
       return !props.checkStrictly;
     }),
-    defaultExpandedKeys: computed(() => {
+    defaultExpandedKeys: computed$1(() => {
       return props.defaultExpandedKeys ? props.defaultExpandedKeys.concat(defaultExpandedParentKeys) : defaultExpandedParentKeys;
     }),
     renderContent: (h, { node, data, store }) => {
@@ -50433,7 +50622,7 @@ const _sfc_main$9 = defineComponent({
     const { slots, expose } = context;
     const select = ref();
     const tree = ref();
-    const key = computed(() => props.nodeKey || props.valueKey || "value");
+    const key = computed$1(() => props.nodeKey || props.valueKey || "value");
     const selectProps = useSelect(props, context, { select, tree, key });
     const treeProps = useTree$1(props, context, { select, tree, key });
     const methods = reactive({});
@@ -50810,7 +50999,7 @@ function useCheck(props, tree) {
 function useFilter(props, tree) {
   const hiddenNodeKeySet = ref(/* @__PURE__ */ new Set([]));
   const hiddenExpandIconKeySet = ref(/* @__PURE__ */ new Set([]));
-  const filterable = computed(() => {
+  const filterable = computed$1(() => {
     return isFunction(props.filterMethod);
   });
   function doFilter(query) {
@@ -50900,23 +51089,23 @@ function useTree(props, emit) {
     setCheckedKeys
   } = useCheck(props, tree);
   const { doFilter, hiddenNodeKeySet, isForceHiddenExpandIcon } = useFilter(props, tree);
-  const valueKey = computed(() => {
+  const valueKey = computed$1(() => {
     var _a;
     return ((_a = props.props) == null ? void 0 : _a.value) || TreeOptionsEnum.KEY;
   });
-  const childrenKey = computed(() => {
+  const childrenKey = computed$1(() => {
     var _a;
     return ((_a = props.props) == null ? void 0 : _a.children) || TreeOptionsEnum.CHILDREN;
   });
-  const disabledKey = computed(() => {
+  const disabledKey = computed$1(() => {
     var _a;
     return ((_a = props.props) == null ? void 0 : _a.disabled) || TreeOptionsEnum.DISABLED;
   });
-  const labelKey = computed(() => {
+  const labelKey = computed$1(() => {
     var _a;
     return ((_a = props.props) == null ? void 0 : _a.label) || TreeOptionsEnum.LABEL;
   });
-  const flattenTree = computed(() => {
+  const flattenTree = computed$1(() => {
     const expandedKeys = expandedKeySet.value;
     const hiddenKeys = hiddenNodeKeySet.value;
     const flattenNodes = [];
@@ -50947,7 +51136,7 @@ function useTree(props, emit) {
     traverse();
     return flattenNodes;
   });
-  const isNotEmpty = computed(() => {
+  const isNotEmpty = computed$1(() => {
     return flattenTree.value.length > 0;
   });
   function createTree(data) {
@@ -51141,11 +51330,11 @@ const _sfc_main$8 = defineComponent({
   setup(props, { emit }) {
     const tree = inject(ROOT_TREE_INJECTION_KEY);
     const ns = useNamespace("tree");
-    const indent = computed(() => {
+    const indent = computed$1(() => {
       var _a;
       return (_a = tree == null ? void 0 : tree.props.indent) != null ? _a : 16;
     });
-    const icon = computed(() => {
+    const icon = computed$1(() => {
       var _a;
       return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : DEFAULT_ICON;
     });
@@ -52150,8 +52339,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       handleSuccess,
       handleProgress
     } = useHandlers(props, uploadRef);
-    const isPictureCard = computed(() => props.listType === "picture-card");
-    const uploadContentProps = computed(() => ({
+    const isPictureCard = computed$1(() => props.listType === "picture-card");
+    const uploadContentProps = computed$1(() => ({
       ...props,
       onStart: handleStart,
       onProgress: handleProgress,
@@ -52863,16 +53052,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const visible = ref(false);
     const height = ref(0);
     let stopTimer = void 0;
-    const badgeType = computed(() => props.type ? props.type === "error" ? "danger" : props.type : "info");
-    const typeClass = computed(() => {
+    const badgeType = computed$1(() => props.type ? props.type === "error" ? "danger" : props.type : "info");
+    const typeClass = computed$1(() => {
       const type = props.type;
       return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] };
     });
-    const iconComponent = computed(() => props.icon || TypeComponentsMap[props.type] || "");
-    const lastOffset = computed(() => getLastOffset(props.id));
-    const offset = computed(() => props.offset + lastOffset.value);
-    const bottom = computed(() => height.value + offset.value);
-    const customStyle = computed(() => ({
+    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 bottom = computed$1(() => height.value + offset.value);
+    const customStyle = computed$1(() => ({
       top: `${offset.value}px`,
       zIndex: props.zIndex
     }));
@@ -53185,21 +53374,21 @@ const _sfc_main$1 = defineComponent({
       validateError: false,
       zIndex: nextZIndex()
     });
-    const typeClass = computed(() => {
+    const typeClass = computed$1(() => {
       const type = state.type;
       return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] };
     });
     const contentId = useId();
     const inputId = useId();
-    const btnSize = useSize(computed(() => props.buttonSize), { prop: true, form: true, formItem: true });
-    const iconComponent = computed(() => state.icon || TypeComponentsMap[state.type] || "");
-    const hasMessage = computed(() => !!state.message);
+    const btnSize = useSize(computed$1(() => props.buttonSize), { prop: true, form: true, formItem: true });
+    const iconComponent = computed$1(() => state.icon || TypeComponentsMap[state.type] || "");
+    const hasMessage = computed$1(() => !!state.message);
     const rootRef = ref();
     const headerRef = ref();
     const focusStartRef = ref();
     const inputRef = ref();
     const confirmRef = ref();
-    const confirmButtonClasses = computed(() => state.confirmButtonClass);
+    const confirmButtonClasses = computed$1(() => state.confirmButtonClass);
     watch(() => state.inputValue, async (val) => {
       await nextTick();
       if (props.boxType === "prompt" && val !== null) {
@@ -53236,17 +53425,17 @@ const _sfc_main$1 = defineComponent({
         state.validateError = false;
       }
     });
-    const draggable = computed(() => props.draggable);
+    const draggable = computed$1(() => props.draggable);
     useDraggable(rootRef, headerRef, draggable);
     onMounted(async () => {
       await nextTick();
       if (props.closeOnHashChange) {
-        on$1(window, "hashchange", doClose);
+        window.addEventListener("hashchange", doClose);
       }
     });
     onBeforeUnmount(() => {
       if (props.closeOnHashChange) {
-        off(window, "hashchange", doClose);
+        window.removeEventListener("hashchange", doClose);
       }
     });
     function doClose() {
@@ -53765,16 +53954,16 @@ const _sfc_main = defineComponent({
     const ns = useNamespace("notification");
     const visible = ref(false);
     let timer = void 0;
-    const typeClass = computed(() => {
+    const typeClass = computed$1(() => {
       const type = props.type;
       return type && TypeComponentsMap[props.type] ? ns.m(type) : "";
     });
-    const iconComponent = computed(() => {
+    const iconComponent = computed$1(() => {
       return TypeComponentsMap[props.type] || props.icon || "";
     });
-    const horizontalClass = computed(() => props.position.endsWith("right") ? "right" : "left");
-    const verticalProperty = computed(() => props.position.startsWith("top") ? "top" : "bottom");
-    const positionStyle = computed(() => {
+    const horizontalClass = computed$1(() => props.position.endsWith("right") ? "right" : "left");
+    const verticalProperty = computed$1(() => props.position.startsWith("top") ? "top" : "bottom");
+    const positionStyle = computed$1(() => {
       return {
         [verticalProperty.value]: `${props.offset}px`,
         zIndex: props.zIndex