beyond-webui 1.1.44 → 1.1.45

package/dist/index.full.js

@@ -986,9 +986,9 @@
     return baseIsNative(value) ? value : void 0;
   }
 
-  var WeakMap = getNative(root, "WeakMap");
+  var WeakMap$1 = getNative(root, "WeakMap");
 
-  var metaMap = WeakMap && new WeakMap();
+  var metaMap = WeakMap$1 && new WeakMap$1();
 
   var baseSetData = !metaMap ? identity : function(func, data) {
     metaMap.set(func, data);
@@ -2926,9 +2926,9 @@
   var mapCtorString = toSource(Map$1);
   var promiseCtorString = toSource(Promise$1);
   var setCtorString = toSource(Set$1);
-  var weakMapCtorString = toSource(WeakMap);
+  var weakMapCtorString = toSource(WeakMap$1);
   var getTag = baseGetTag;
-  if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag$3 || Map$1 && getTag(new Map$1()) != mapTag$8 || Promise$1 && getTag(Promise$1.resolve()) != promiseTag || Set$1 && getTag(new Set$1()) != setTag$8 || WeakMap && getTag(new WeakMap()) != weakMapTag$2) {
+  if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag$3 || Map$1 && getTag(new Map$1()) != mapTag$8 || Promise$1 && getTag(Promise$1.resolve()) != promiseTag || Set$1 && getTag(new Set$1()) != setTag$8 || WeakMap$1 && getTag(new WeakMap$1()) != weakMapTag$2) {
     getTag = function(value) {
       var result = baseGetTag(value), Ctor = result == objectTag$2 ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
       if (ctorString) {
@@ -11100,20 +11100,58 @@
     return uids.map((uid) => children[uid]).filter((p) => !!p);
   };
   const useOrderedChildren = (vm, childComponentName) => {
-    const children = {};
+    const children = vue.shallowRef({});
     const orderedChildren = vue.shallowRef([]);
+    const nodesMap = /* @__PURE__ */ new WeakMap();
     const addChild = (child) => {
-      children[child.uid] = child;
-      orderedChildren.value = getOrderedChildren(vm, childComponentName, children);
+      children.value[child.uid] = child;
+      vue.triggerRef(children);
+      vue.onMounted(() => {
+        const childNode = child.getVnode().el;
+        const parentNode = childNode.parentNode;
+        if (!nodesMap.has(parentNode)) {
+          nodesMap.set(parentNode, []);
+          const originalFn = parentNode.insertBefore.bind(parentNode);
+          parentNode.insertBefore = (node, anchor) => {
+            const shouldSortChildren = nodesMap.get(parentNode).some((el) => node === el || anchor === el);
+            if (shouldSortChildren)
+              vue.triggerRef(children);
+            return originalFn(node, anchor);
+          };
+        }
+        nodesMap.get(parentNode).push(childNode);
+      });
     };
-    const removeChild = (uid) => {
-      delete children[uid];
-      orderedChildren.value = orderedChildren.value.filter((children2) => children2.uid !== uid);
+    const removeChild = (child) => {
+      delete children.value[child.uid];
+      vue.triggerRef(children);
+      const childNode = child.getVnode().el;
+      const parentNode = childNode.parentNode;
+      const childNodes = nodesMap.get(parentNode);
+      const index = childNodes.indexOf(childNode);
+      childNodes.splice(index, 1);
     };
+    const sortChildren = () => {
+      orderedChildren.value = getOrderedChildren(vm, childComponentName, children.value);
+    };
+    const IsolatedRenderer = (props) => {
+      return props.render();
+    };
+    const ChildrenSorter = vue.defineComponent({
+      setup(_, { slots }) {
+        return () => {
+          sortChildren();
+          return slots.default ? vue.h(IsolatedRenderer, {
+            render: slots.default
+          }) : null;
+        };
+      }
+    });
     return {
       children: orderedChildren,
       addChild,
-      removeChild
+      removeChild,
+      ChildrenSorter
     };
   };
 
@@ -13581,8 +13619,8 @@
 
   const _hoisted_1$12 = ["role"];
   const _hoisted_2$H = { class: "el-input__preStar" };
-  const _hoisted_3$q = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form"];
-  const _hoisted_4$g = /* @__PURE__ */ vue.createElementVNode("svg", {
+  const _hoisted_3$r = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form"];
+  const _hoisted_4$h = /* @__PURE__ */ vue.createElementVNode("svg", {
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -13602,7 +13640,7 @@
       ])
     ])
   ], -1);
-  const _hoisted_5$b = {
+  const _hoisted_5$c = {
     key: 0,
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink",
@@ -13611,14 +13649,14 @@
     fill: "#1a1f36",
     viewBox: "0 0 24 24"
   };
-  const _hoisted_6$5 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_6$6 = /* @__PURE__ */ vue.createElementVNode("path", {
     id: "ujy5xle6ka",
     d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
   }, null, -1);
-  const _hoisted_7$4 = [
-    _hoisted_6$5
+  const _hoisted_7$5 = [
+    _hoisted_6$6
   ];
-  const _hoisted_8$3 = {
+  const _hoisted_8$4 = {
     key: 1,
     width: "18",
     fill: "#1a1f36",
@@ -13996,7 +14034,7 @@
                 onBlur: handleBlur,
                 onChange: handleChange,
                 onKeydown: handleKeydown
-              }), null, 16, _hoisted_3$q),
+              }), null, 16, _hoisted_3$r),
               vue.createCommentVNode(" suffix slot "),
               vue.unref(suffixVisible) ? (vue.openBlock(), vue.createElementBlock("span", {
                 key: 1,
@@ -14015,7 +14053,7 @@
                   }, {
                     default: vue.withCtx(() => [
                       vue.createCommentVNode("              <circle-close />"),
-                      _hoisted_4$g
+                      _hoisted_4$h
                     ]),
                     _: 1
                   }, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true),
@@ -14027,7 +14065,7 @@
                   }, {
                     default: vue.withCtx(() => [
                       vue.createCommentVNode('              <component :is="passwordIcon" />'),
-                      passwordVisible.value ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_5$b, _hoisted_7$4)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_8$3, _hoisted_10$3))
+                      passwordVisible.value ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_5$c, _hoisted_7$5)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_8$4, _hoisted_10$3))
                     ]),
                     _: 1
                   }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
@@ -16208,8 +16246,8 @@
 
   const _hoisted_1$10 = ["aria-expanded", "aria-owns"];
   const _hoisted_2$F = { key: 0 };
-  const _hoisted_3$p = ["id", "aria-selected", "onClick"];
-  const _hoisted_4$f = {
+  const _hoisted_3$q = ["id", "aria-selected", "onClick"];
+  const _hoisted_4$g = {
     key: 1,
     class: "no-data"
   };
@@ -16508,8 +16546,8 @@
                         vue.renderSlot(_ctx.$slots, "default", { item }, () => [
                           vue.createTextVNode(vue.toDisplayString(item[_ctx.valueKey]), 1)
                         ])
-                      ], 10, _hoisted_3$p);
-                    }), 128)) : (vue.openBlock(), vue.createElementBlock("li", _hoisted_4$f, vue.toDisplayString(emptyTip.value), 1))
+                      ], 10, _hoisted_3$q);
+                    }), 128)) : (vue.openBlock(), vue.createElementBlock("li", _hoisted_4$g, vue.toDisplayString(emptyTip.value), 1))
                   ], 64))
                 ]),
                 _: 3
@@ -18691,7 +18729,7 @@
   const _hoisted_2$E = /* @__PURE__ */ vue.createElementVNode("g", { "clip-path": "url(#clip0_1022_307)" }, [
     /* @__PURE__ */ vue.createElementVNode("path", { d: "M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.8071 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0866C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C24 8.8174 22.7357 5.76516 20.4853 3.51472C18.2349 1.26428 15.1826 0 12 0V0ZM13 12.433L7.94701 15.6L6.88601 13.9L11 11.325V6H13V12.433Z" })
   ], -1);
-  const _hoisted_3$o = /* @__PURE__ */ vue.createElementVNode("defs", null, [
+  const _hoisted_3$p = /* @__PURE__ */ vue.createElementVNode("defs", null, [
     /* @__PURE__ */ vue.createElementVNode("clipPath", { id: "clip0_1022_307" }, [
       /* @__PURE__ */ vue.createElementVNode("rect", {
         width: "24",
@@ -18700,21 +18738,21 @@
       })
     ])
   ], -1);
-  const _hoisted_4$e = [
+  const _hoisted_4$f = [
     _hoisted_2$E,
-    _hoisted_3$o
+    _hoisted_3$p
   ];
-  const _hoisted_5$a = {
+  const _hoisted_5$b = {
     key: 1,
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_6$4 = /* @__PURE__ */ vue.createElementVNode("g", { "clip-path": "url(#clip0_1022_276)" }, [
+  const _hoisted_6$5 = /* @__PURE__ */ vue.createElementVNode("g", { "clip-path": "url(#clip0_1022_276)" }, [
     /* @__PURE__ */ vue.createElementVNode("path", { d: "M24 10V24H0V10H24ZM24 8V5C24 4.20435 23.6839 3.44129 23.1213 2.87868C22.5587 2.31607 21.7956 2 21 2H18V0H16V2H8V0H6V2H3C2.20435 2 1.44129 2.31607 0.87868 2.87868C0.31607 3.44129 0 4.20435 0 5L0 8H24ZM18 14H16V16H18V14ZM13 14H11V16H13V14ZM8 14H6V16H8V14ZM18 18H16V20H18V18ZM13 18H11V20H13V18ZM8 18H6V20H8V18Z" })
   ], -1);
-  const _hoisted_7$3 = /* @__PURE__ */ vue.createElementVNode("defs", null, [
+  const _hoisted_7$4 = /* @__PURE__ */ vue.createElementVNode("defs", null, [
     /* @__PURE__ */ vue.createElementVNode("clipPath", { id: "clip0_1022_276" }, [
       /* @__PURE__ */ vue.createElementVNode("rect", {
         width: "24",
@@ -18723,9 +18761,9 @@
       })
     ])
   ], -1);
-  const _hoisted_8$2 = [
-    _hoisted_6$4,
-    _hoisted_7$3
+  const _hoisted_8$3 = [
+    _hoisted_6$5,
+    _hoisted_7$4
   ];
   const _hoisted_9$2 = {
     key: 1,
@@ -19314,7 +19352,7 @@
                     onTouchstart: onTouchStartInput
                   }, {
                     default: vue.withCtx(() => [
-                      vue.unref(isTimeLikePicker) ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$Z, _hoisted_4$e)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_5$a, _hoisted_8$2))
+                      vue.unref(isTimeLikePicker) ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$Z, _hoisted_4$f)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_5$b, _hoisted_8$3))
                     ]),
                     _: 1
                   }, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true)
@@ -21156,6 +21194,10 @@
       values: ["", "card"],
       default: ""
     },
+    cardScale: {
+      type: Number,
+      default: 0.83
+    },
     loop: {
       type: Boolean,
       default: true
@@ -21168,37 +21210,59 @@
     pauseOnHover: {
       type: Boolean,
       default: true
-    }
+    },
+    motionBlur: Boolean
   });
   const carouselEmits = {
     change: (current, prev) => [current, prev].every(isNumber)
   };
 
   const carouselContextKey = Symbol("carouselContextKey");
+  const CAROUSEL_ITEM_NAME = "ElCarouselItem";
 
   const THROTTLE_TIME = 300;
   const useCarousel = (props, emit, componentName) => {
     const {
       children: items,
       addChild: addItem,
-      removeChild: removeItem
-    } = useOrderedChildren(vue.getCurrentInstance(), "ElCarouselItem");
+      removeChild: removeItem,
+      ChildrenSorter: ItemsSorter
+    } = useOrderedChildren(vue.getCurrentInstance(), CAROUSEL_ITEM_NAME);
+    const slots = vue.useSlots();
     const activeIndex = vue.ref(-1);
     const timer = vue.ref(null);
     const hover = vue.ref(false);
     const root = vue.ref();
+    const containerHeight = vue.ref(0);
+    const isItemsTwoLength = vue.ref(true);
     const arrowDisplay = vue.computed(() => props.arrow !== "never" && !vue.unref(isVertical));
     const hasLabel = vue.computed(() => {
       return items.value.some((item) => item.props.label.toString().length > 0);
     });
     const isCardType = vue.computed(() => props.type === "card");
     const isVertical = vue.computed(() => props.direction === "vertical");
+    const containerStyle = vue.computed(() => {
+      if (props.height !== "auto") {
+        return {
+          height: props.height
+        };
+      }
+      return {
+        height: `${containerHeight.value}px`,
+        overflow: "hidden"
+      };
+    });
     const throttledArrowClick = throttle((index) => {
       setActiveItem(index);
     }, THROTTLE_TIME, { trailing: true });
     const throttledIndicatorHover = throttle((index) => {
       handleIndicatorHover(index);
     }, THROTTLE_TIME);
+    const isTwoLengthShow = (index) => {
+      if (!isItemsTwoLength.value)
+        return true;
+      return activeIndex.value <= 1 ? index <= 1 : index > 1;
+    };
     function pauseTimer() {
       if (timer.value) {
         clearInterval(timer.value);
@@ -21309,14 +21373,46 @@
     }
     function resetTimer() {
       pauseTimer();
-      startTimer();
+      if (!props.pauseOnHover)
+        startTimer();
+    }
+    function setContainerHeight(height) {
+      if (props.height !== "auto")
+        return;
+      containerHeight.value = height;
+    }
+    function PlaceholderItem() {
+      var _a;
+      const defaultSlots = (_a = slots.default) == null ? void 0 : _a.call(slots);
+      if (!defaultSlots)
+        return null;
+      const flatSlots = flattedChildren(defaultSlots);
+      const normalizeSlots = flatSlots.filter((slot) => {
+        return vue.isVNode(slot) && slot.type.name === CAROUSEL_ITEM_NAME;
+      });
+      if ((normalizeSlots == null ? void 0 : normalizeSlots.length) === 2 && props.loop && !isCardType.value) {
+        isItemsTwoLength.value = true;
+        return normalizeSlots;
+      }
+      isItemsTwoLength.value = false;
+      return null;
     }
     vue.watch(() => activeIndex.value, (current, prev2) => {
       resetItemPosition(prev2);
+      if (isItemsTwoLength.value) {
+        current = current % 2;
+        prev2 = prev2 % 2;
+      }
       if (prev2 > -1) {
-        emit("change", current, prev2);
+        emit(CHANGE_EVENT, current, prev2);
       }
     });
+    const exposeActiveIndex = vue.computed({
+      get: () => {
+        return isItemsTwoLength.value ? activeIndex.value % 2 : activeIndex.value;
+      },
+      set: (value) => activeIndex.value = value
+    });
     vue.watch(() => props.autoplay, (autoplay) => {
       autoplay ? startTimer() : pauseTimer();
     });
@@ -21326,12 +21422,14 @@
     vue.watch(() => props.interval, () => {
       resetTimer();
     });
-    vue.watch(() => items.value, () => {
-      if (items.value.length > 0)
-        setActiveItem(props.initialIndex);
-    });
     const resizeObserver = vue.shallowRef();
     vue.onMounted(() => {
+      vue.watch(() => items.value, () => {
+        if (items.value.length > 0)
+          setActiveItem(props.initialIndex);
+      }, {
+        immediate: true
+      });
       resizeObserver.value = useResizeObserver(root.value, () => {
         resetItemPosition();
       });
@@ -21348,18 +21446,24 @@
       isVertical,
       items,
       loop: props.loop,
+      cardScale: props.cardScale,
       addItem,
       removeItem,
-      setActiveItem
+      setActiveItem,
+      setContainerHeight
     });
     return {
       root,
       activeIndex,
+      exposeActiveIndex,
       arrowDisplay,
       hasLabel,
       hover,
       isCardType,
       items,
+      isVertical,
+      containerStyle,
+      isItemsTwoLength,
       handleButtonEnter,
       handleButtonLeave,
       handleIndicatorClick,
@@ -21368,13 +21472,42 @@
       setActiveItem,
       prev,
       next,
+      PlaceholderItem,
+      isTwoLengthShow,
+      ItemsSorter,
       throttledArrowClick,
       throttledIndicatorHover
     };
   };
 
-  const _hoisted_1$V = ["onMouseenter", "onClick"];
-  const _hoisted_2$B = { key: 0 };
+  const _hoisted_1$V = ["aria-label"];
+  const _hoisted_2$B = ["aria-label"];
+  const _hoisted_3$o = ["onMouseenter", "onClick"];
+  const _hoisted_4$e = ["aria-label"];
+  const _hoisted_5$a = { key: 0 };
+  const _hoisted_6$4 = {
+    key: 2,
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    style: { "display": "none" }
+  };
+  const _hoisted_7$3 = /* @__PURE__ */ vue.createElementVNode("defs", null, [
+    /* @__PURE__ */ vue.createElementVNode("filter", { id: "elCarouselHorizontal" }, [
+      /* @__PURE__ */ vue.createElementVNode("feGaussianBlur", {
+        in: "SourceGraphic",
+        stdDeviation: "12,0"
+      })
+    ]),
+    /* @__PURE__ */ vue.createElementVNode("filter", { id: "elCarouselVertical" }, [
+      /* @__PURE__ */ vue.createElementVNode("feGaussianBlur", {
+        in: "SourceGraphic",
+        stdDeviation: "0,10"
+      })
+    ])
+  ], -1);
+  const _hoisted_8$2 = [
+    _hoisted_7$3
+  ];
   const COMPONENT_NAME$f = "ElCarousel";
   const __default__$1c = vue.defineComponent({
     name: COMPONENT_NAME$f
@@ -21388,11 +21521,14 @@
       const {
         root,
         activeIndex,
+        exposeActiveIndex,
         arrowDisplay,
         hasLabel,
         hover,
         isCardType,
         items,
+        isVertical,
+        containerStyle,
         handleButtonEnter,
         handleButtonLeave,
         handleIndicatorClick,
@@ -21401,10 +21537,14 @@
         setActiveItem,
         prev,
         next,
+        PlaceholderItem,
+        isTwoLengthShow,
+        ItemsSorter,
         throttledArrowClick,
         throttledIndicatorHover
       } = useCarousel(props, emit);
       const ns = useNamespace("carousel");
+      const { t } = useLocale();
       const carouselClasses = vue.computed(() => {
         const classes = [ns.b(), ns.m(props.direction)];
         if (vue.unref(isCardType)) {
@@ -21417,12 +21557,28 @@
         if (vue.unref(hasLabel)) {
           classes.push(ns.em("indicators", "labels"));
         }
-        if (props.indicatorPosition === "outside" || vue.unref(isCardType)) {
+        if (props.indicatorPosition === "outside") {
           classes.push(ns.em("indicators", "outside"));
         }
+        if (vue.unref(isVertical)) {
+          classes.push(ns.em("indicators", "right"));
+        }
         return classes;
       });
+      function handleTransitionStart(e) {
+        if (!props.motionBlur)
+          return;
+        const kls = vue.unref(isVertical) ? `${ns.namespace.value}-transitioning-vertical` : `${ns.namespace.value}-transitioning`;
+        e.currentTarget.classList.add(kls);
+      }
+      function handleTransitionEnd(e) {
+        if (!props.motionBlur)
+          return;
+        const kls = vue.unref(isVertical) ? `${ns.namespace.value}-transitioning-vertical` : `${ns.namespace.value}-transitioning`;
+        e.currentTarget.classList.remove(kls);
+      }
       expose({
+        activeIndex: exposeActiveIndex,
         setActiveItem,
         prev,
         next
@@ -21435,91 +21591,105 @@
           onMouseenter: _cache[6] || (_cache[6] = vue.withModifiers((...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args), ["stop"])),
           onMouseleave: _cache[7] || (_cache[7] = vue.withModifiers((...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args), ["stop"]))
         }, [
+          vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+            key: 0,
+            name: "carousel-arrow-left",
+            persisted: ""
+          }, {
+            default: vue.withCtx(() => [
+              vue.withDirectives(vue.createElementVNode("button", {
+                type: "button",
+                class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "left")]),
+                "aria-label": vue.unref(t)("el.carousel.leftArrow"),
+                onMouseenter: _cache[0] || (_cache[0] = ($event) => vue.unref(handleButtonEnter)("left")),
+                onMouseleave: _cache[1] || (_cache[1] = (...args) => vue.unref(handleButtonLeave) && vue.unref(handleButtonLeave)(...args)),
+                onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) - 1), ["stop"]))
+              }, [
+                vue.createVNode(vue.unref(ElIcon), null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(arrow_left_default))
+                  ]),
+                  _: 1
+                })
+              ], 42, _hoisted_1$V), [
+                [
+                  vue.vShow,
+                  (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) > 0)
+                ]
+              ])
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("v-if", true),
+          vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+            key: 1,
+            name: "carousel-arrow-right",
+            persisted: ""
+          }, {
+            default: vue.withCtx(() => [
+              vue.withDirectives(vue.createElementVNode("button", {
+                type: "button",
+                class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "right")]),
+                "aria-label": vue.unref(t)("el.carousel.rightArrow"),
+                onMouseenter: _cache[3] || (_cache[3] = ($event) => vue.unref(handleButtonEnter)("right")),
+                onMouseleave: _cache[4] || (_cache[4] = (...args) => vue.unref(handleButtonLeave) && vue.unref(handleButtonLeave)(...args)),
+                onClick: _cache[5] || (_cache[5] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) + 1), ["stop"]))
+              }, [
+                vue.createVNode(vue.unref(ElIcon), null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(arrow_right_default))
+                  ]),
+                  _: 1
+                })
+              ], 42, _hoisted_2$B), [
+                [
+                  vue.vShow,
+                  (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) < vue.unref(items).length - 1)
+                ]
+              ])
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("v-if", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(vue.unref(ns).e("container")),
-            style: vue.normalizeStyle({ height: _ctx.height })
+            style: vue.normalizeStyle(vue.unref(containerStyle)),
+            onTransitionstart: handleTransitionStart,
+            onTransitionend: handleTransitionEnd
           }, [
-            vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, {
-              key: 0,
-              name: "carousel-arrow-left",
-              persisted: ""
-            }, {
-              default: vue.withCtx(() => [
-                vue.withDirectives(vue.createElementVNode("button", {
-                  type: "button",
-                  class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "left")]),
-                  onMouseenter: _cache[0] || (_cache[0] = ($event) => vue.unref(handleButtonEnter)("left")),
-                  onMouseleave: _cache[1] || (_cache[1] = (...args) => vue.unref(handleButtonLeave) && vue.unref(handleButtonLeave)(...args)),
-                  onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) - 1), ["stop"]))
-                }, [
-                  vue.createVNode(vue.unref(ElIcon), null, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(arrow_left_default))
-                    ]),
-                    _: 1
-                  })
-                ], 34), [
-                  [
-                    vue.vShow,
-                    (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) > 0)
-                  ]
-                ])
-              ]),
-              _: 1
-            })) : vue.createCommentVNode("v-if", true),
-            vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, {
-              key: 1,
-              name: "carousel-arrow-right",
-              persisted: ""
-            }, {
-              default: vue.withCtx(() => [
-                vue.withDirectives(vue.createElementVNode("button", {
-                  type: "button",
-                  class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "right")]),
-                  onMouseenter: _cache[3] || (_cache[3] = ($event) => vue.unref(handleButtonEnter)("right")),
-                  onMouseleave: _cache[4] || (_cache[4] = (...args) => vue.unref(handleButtonLeave) && vue.unref(handleButtonLeave)(...args)),
-                  onClick: _cache[5] || (_cache[5] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) + 1), ["stop"]))
-                }, [
-                  vue.createVNode(vue.unref(ElIcon), null, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(arrow_right_default))
-                    ]),
-                    _: 1
-                  })
-                ], 34), [
-                  [
-                    vue.vShow,
-                    (_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) < vue.unref(items).length - 1)
-                  ]
-                ])
-              ]),
-              _: 1
-            })) : vue.createCommentVNode("v-if", true),
+            vue.createVNode(vue.unref(PlaceholderItem)),
             vue.renderSlot(_ctx.$slots, "default")
-          ], 6),
-          _ctx.indicatorPosition !== "none" ? (vue.openBlock(), vue.createElementBlock("ul", {
-            key: 0,
-            class: vue.normalizeClass(vue.unref(indicatorsClasses))
-          }, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (item, index) => {
-              return vue.openBlock(), vue.createElementBlock("li", {
-                key: index,
-                class: vue.normalizeClass([
-                  vue.unref(ns).e("indicator"),
-                  vue.unref(ns).em("indicator", _ctx.direction),
-                  vue.unref(ns).is("active", index === vue.unref(activeIndex))
-                ]),
-                onMouseenter: ($event) => vue.unref(throttledIndicatorHover)(index),
-                onClick: vue.withModifiers(($event) => vue.unref(handleIndicatorClick)(index), ["stop"])
+          ], 38),
+          vue.createVNode(vue.unref(ItemsSorter), null, {
+            default: vue.withCtx(() => [
+              _ctx.indicatorPosition !== "none" ? (vue.openBlock(), vue.createElementBlock("ul", {
+                key: 0,
+                class: vue.normalizeClass(vue.unref(indicatorsClasses))
               }, [
-                vue.createElementVNode("button", {
-                  class: vue.normalizeClass(vue.unref(ns).e("button"))
-                }, [
-                  vue.unref(hasLabel) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$B, vue.toDisplayString(item.props.label), 1)) : vue.createCommentVNode("v-if", true)
-                ], 2)
-              ], 42, _hoisted_1$V);
-            }), 128))
-          ], 2)) : vue.createCommentVNode("v-if", true)
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (item, index) => {
+                  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
+                    key: index,
+                    class: vue.normalizeClass([
+                      vue.unref(ns).e("indicator"),
+                      vue.unref(ns).em("indicator", _ctx.direction),
+                      vue.unref(ns).is("active", index === vue.unref(activeIndex))
+                    ]),
+                    onMouseenter: ($event) => vue.unref(throttledIndicatorHover)(index),
+                    onClick: vue.withModifiers(($event) => vue.unref(handleIndicatorClick)(index), ["stop"])
+                  }, [
+                    vue.createElementVNode("button", {
+                      class: vue.normalizeClass(vue.unref(ns).e("button")),
+                      "aria-label": vue.unref(t)("el.carousel.indicator", { index: index + 1 })
+                    }, [
+                      vue.unref(hasLabel) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$a, vue.toDisplayString(item.props.label), 1)) : vue.createCommentVNode("v-if", true)
+                    ], 10, _hoisted_4$e)
+                  ], 42, _hoisted_3$o)), [
+                    [vue.vShow, vue.unref(isTwoLengthShow)(index)]
+                  ]);
+                }), 128))
+              ], 2)) : vue.createCommentVNode("v-if", true)
+            ]),
+            _: 1
+          }),
+          props.motionBlur ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_6$4, _hoisted_8$2)) : vue.createCommentVNode("v-if", true)
         ], 34);
       };
     }
@@ -21534,10 +21704,10 @@
     }
   });
 
-  const useCarouselItem = (props, componentName) => {
+  const useCarouselItem = (props) => {
     const carouselContext = vue.inject(carouselContextKey);
     const instance = vue.getCurrentInstance();
-    const CARD_SCALE = 0.83;
+    const carouselItemRef = vue.ref();
     const hover = vue.ref(false);
     const translate = vue.ref(0);
     const scale = vue.ref(1);
@@ -21545,7 +21715,7 @@
     const ready = vue.ref(false);
     const inStage = vue.ref(false);
     const animating = vue.ref(false);
-    const { isCardType, isVertical } = carouselContext;
+    const { isCardType, isVertical, cardScale } = carouselContext;
     function processIndex(index, activeIndex, length) {
       const lastItemIndex = length - 1;
       const prevItemIndex = activeIndex - 1;
@@ -21563,14 +21733,14 @@
       return index;
     }
     function calcCardTranslate(index, activeIndex) {
-      var _a;
-      const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0;
+      var _a, _b;
+      const parentWidth = vue.unref(isVertical) ? ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetHeight) || 0 : ((_b = carouselContext.root.value) == null ? void 0 : _b.offsetWidth) || 0;
       if (inStage.value) {
-        return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
+        return parentWidth * ((2 - cardScale) * (index - activeIndex) + 1) / 4;
       } else if (index < activeIndex) {
-        return -(1 + CARD_SCALE) * parentWidth / 4;
+        return -(1 + cardScale) * parentWidth / 4;
       } else {
-        return (3 + CARD_SCALE) * parentWidth / 4;
+        return (3 + cardScale) * parentWidth / 4;
       }
     }
     function calcTranslate(index, activeIndex, isVertical2) {
@@ -21596,11 +21766,14 @@
       if (_isCardType) {
         inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
         translate.value = calcCardTranslate(index, activeIndex);
-        scale.value = vue.unref(active) ? 1 : CARD_SCALE;
+        scale.value = vue.unref(active) ? 1 : cardScale;
       } else {
         translate.value = calcTranslate(index, activeIndex, _isVertical);
       }
       ready.value = true;
+      if (isActive && carouselItemRef.value) {
+        carouselContext.setContainerHeight(carouselItemRef.value.offsetHeight);
+      }
     };
     function handleItemClick() {
       if (carouselContext && vue.unref(isCardType)) {
@@ -21608,26 +21781,27 @@
         carouselContext.setActiveItem(index);
       }
     }
-    vue.onMounted(() => {
-      carouselContext.addItem({
-        props,
-        states: vue.reactive({
-          hover,
-          translate,
-          scale,
-          active,
-          ready,
-          inStage,
-          animating
-        }),
-        uid: instance.uid,
-        translateItem
-      });
-    });
-    vue.onUnmounted(() => {
-      carouselContext.removeItem(instance.uid);
+    const carouselItemContext = {
+      props,
+      states: vue.reactive({
+        hover,
+        translate,
+        scale,
+        active,
+        ready,
+        inStage,
+        animating
+      }),
+      uid: instance.uid,
+      getVnode: () => instance.vnode,
+      translateItem
+    };
+    carouselContext.addItem(carouselItemContext);
+    vue.onBeforeUnmount(() => {
+      carouselContext.removeItem(carouselItemContext);
     });
     return {
+      carouselItemRef,
       active,
       animating,
       hover,
@@ -21642,7 +21816,7 @@
   };
 
   const __default__$1b = vue.defineComponent({
-    name: "ElCarouselItem"
+    name: CAROUSEL_ITEM_NAME
   });
   const _sfc_main$1N = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1b,
@@ -21651,6 +21825,7 @@
       const props = __props;
       const ns = useNamespace("carousel");
       const {
+        carouselItemRef,
         active,
         animating,
         hover,
@@ -21662,6 +21837,17 @@
         ready,
         handleItemClick
       } = useCarouselItem(props);
+      const itemKls = vue.computed(() => [
+        ns.e("item"),
+        ns.is("active", active.value),
+        ns.is("in-stage", inStage.value),
+        ns.is("hover", hover.value),
+        ns.is("animating", animating.value),
+        {
+          [ns.em("item", "card")]: isCardType.value,
+          [ns.em("item", "card-vertical")]: isCardType.value && isVertical.value
+        }
+      ]);
       const itemStyle = vue.computed(() => {
         const translateType = `translate${vue.unref(isVertical) ? "Y" : "X"}`;
         const _translate = `${translateType}(${vue.unref(translate)}px)`;
@@ -21673,14 +21859,9 @@
       });
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass([
-            vue.unref(ns).e("item"),
-            vue.unref(ns).is("active", vue.unref(active)),
-            vue.unref(ns).is("in-stage", vue.unref(inStage)),
-            vue.unref(ns).is("hover", vue.unref(hover)),
-            vue.unref(ns).is("animating", vue.unref(animating)),
-            { [vue.unref(ns).em("item", "card")]: vue.unref(isCardType) }
-          ]),
+          ref_key: "carouselItemRef",
+          ref: carouselItemRef,
+          class: vue.normalizeClass(vue.unref(itemKls)),
           style: vue.normalizeStyle(vue.unref(itemStyle)),
           onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleItemClick) && vue.unref(handleItemClick)(...args))
         }, [
@@ -49121,6 +49302,10 @@
     tabs: {
       type: definePropType(Array),
       default: () => mutable([])
+    },
+    tabRefs: {
+      type: definePropType(Object),
+      default: () => mutable({})
     }
   });
 
@@ -49133,7 +49318,6 @@
     props: tabBarProps,
     setup(__props, { expose }) {
       const props = __props;
-      const instance = vue.getCurrentInstance();
       const rootTabs = vue.inject(tabsRootContextKey);
       if (!rootTabs)
         throwError(COMPONENT_NAME$3, "<el-tabs><el-tab-bar /></el-tabs>");
@@ -49147,8 +49331,9 @@
         const sizeDir = sizeName === "width" ? "x" : "y";
         const position = sizeDir === "x" ? "left" : "top";
         props.tabs.every((tab) => {
-          var _a, _b;
-          const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`];
+          if (isUndefined(tab.paneName))
+            return false;
+          const $el = props.tabRefs[tab.paneName];
           if (!$el)
             return false;
           if (!tab.active) {
@@ -49158,9 +49343,7 @@
           tabSize = $el[`client${capitalize(sizeName)}`];
           const tabStyles = window.getComputedStyle($el);
           if (sizeName === "width") {
-            if (props.tabs.length > 1) {
-              tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
-            }
+            tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
             offset += Number.parseFloat(tabStyles.paddingLeft);
           }
           return false;
@@ -49171,11 +49354,25 @@
         };
       };
       const update = () => barStyle.value = getBarStyle();
+      const tabObservers = [];
+      const observerTabs = () => {
+        tabObservers.forEach((observer) => observer.stop());
+        tabObservers.length = 0;
+        Object.values(props.tabRefs).forEach((tab) => {
+          tabObservers.push(useResizeObserver(tab, update));
+        });
+      };
       vue.watch(() => props.tabs, async () => {
         await vue.nextTick();
         update();
+        observerTabs();
       }, { immediate: true });
-      useResizeObserver(barRef, () => update());
+      const barObserver = useResizeObserver(barRef, () => update());
+      vue.onBeforeUnmount(() => {
+        tabObservers.forEach((observer) => observer.stop());
+        tabObservers.length = 0;
+        barObserver.stop();
+      });
       expose({
         ref: barRef,
         update
@@ -49222,7 +49419,6 @@
       expose,
       emit
     }) {
-      const vm = vue.getCurrentInstance();
       const rootTabs = vue.inject(tabsRootContextKey);
       if (!rootTabs)
         throwError(COMPONENT_NAME$2, `<el-tabs><tab-nav /></el-tabs>`);
@@ -49232,11 +49428,13 @@
       const navScroll$ = vue.ref();
       const nav$ = vue.ref();
       const el$ = vue.ref();
+      const tabRefsMap = vue.ref({});
       const tabBarRef = vue.ref();
       const scrollable = vue.ref(false);
       const navOffset = vue.ref(0);
       const isFocus = vue.ref(false);
       const focusable = vue.ref(true);
+      const tracker = vue.shallowRef();
       const sizeName = vue.computed(() => ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height");
       const navStyle = vue.computed(() => {
         const dir = sizeName.value === "width" ? "X" : "Y";
@@ -49270,7 +49468,7 @@
         if (!scrollable.value || !el$.value || !navScroll$.value || !nav)
           return;
         await vue.nextTick();
-        const activeTab = el$.value.querySelector(".is-active");
+        const activeTab = tabRefsMap.value[props.currentName];
         if (!activeTab)
           return;
         const navScroll = navScroll$.value;
@@ -49320,31 +49518,27 @@
           }
         }
       };
-      const changeTab = (e) => {
-        const code = e.code;
-        const {
-          up,
-          down,
-          left,
-          right
-        } = EVENT_CODE;
-        if (![up, down, left, right].includes(code))
-          return;
-        const tabList = Array.from(e.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)"));
-        const currentIndex = tabList.indexOf(e.target);
-        let nextIndex;
-        if (code === left || code === up) {
-          if (currentIndex === 0) {
-            nextIndex = tabList.length - 1;
-          } else {
-            nextIndex = currentIndex - 1;
-          }
-        } else {
-          if (currentIndex < tabList.length - 1) {
-            nextIndex = currentIndex + 1;
-          } else {
-            nextIndex = 0;
-          }
+      const changeTab = (event) => {
+        let step = 0;
+        switch (event.code) {
+          case EVENT_CODE.left:
+          case EVENT_CODE.up:
+            step = -1;
+            break;
+          case EVENT_CODE.right:
+          case EVENT_CODE.down:
+            step = 1;
+            break;
+          default:
+            return;
+        }
+        const tabList = Array.from(event.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)"));
+        const currentIndex = tabList.indexOf(event.target);
+        let nextIndex = currentIndex + step;
+        if (nextIndex < 0) {
+          nextIndex = tabList.length - 1;
+        } else if (nextIndex >= tabList.length) {
+          nextIndex = 0;
         }
         tabList[nextIndex].focus({
           preventScroll: true
@@ -49357,6 +49551,16 @@
           isFocus.value = true;
       };
       const removeFocus = () => isFocus.value = false;
+      const setRefs = (el, key) => {
+        tabRefsMap.value[key] = el;
+      };
+      const focusActiveTab = async () => {
+        await vue.nextTick();
+        const activeTab = tabRefsMap.value[props.currentName];
+        activeTab == null ? void 0 : activeTab.focus({
+          preventScroll: true
+        });
+      };
       vue.watch(visibility, (visibility2) => {
         if (visibility2 === "hidden") {
           focusable.value = false;
@@ -49376,11 +49580,11 @@
       vue.onUpdated(() => update());
       expose({
         scrollToActiveTab,
-        removeFocus
-      });
-      vue.watch(() => props.panes, () => vm.update(), {
-        flush: "post",
-        deep: true
+        removeFocus,
+        focusActiveTab,
+        tabListRef: nav$,
+        tabBarRef,
+        scheduleRender: () => vue.triggerRef(tracker)
       });
       return () => {
         const scrollBtn = scrollable.value ? [vue.createVNode("span", {
@@ -49410,7 +49614,7 @@
           const tabLabelContent = ((_d = (_c = pane.slots).label) == null ? void 0 : _d.call(_c)) || pane.props.label;
           const tabindex = !disabled && pane.active ? 0 : -1;
           return vue.createVNode("div", {
-            "ref": `tab-${uid}`,
+            "ref": (el) => setRefs(el, tabName),
             "class": [ns.e("item"), ns.is(rootTabs.props.tabPosition), ns.is("active", pane.active), ns.is("disabled", disabled), ns.is("closable", closable), ns.is("focus", isFocus.value)],
             "id": `tab-${tabName}`,
             "key": `tab-${uid}`,
@@ -49431,13 +49635,14 @@
             }
           }, [...[tabLabelContent, btnClose]]);
         });
+        tracker.value;
         return vue.createVNode("div", {
           "ref": el$,
           "class": [ns.e("nav-wrap"), ns.is("scrollable", !!scrollable.value), ns.is(rootTabs.props.tabPosition)]
         }, [scrollBtn, vue.createVNode("div", {
           "class": ns.e("nav-scroll"),
           "ref": navScroll$
-        }, [vue.createVNode("div", {
+        }, [props.panes.length > 0 ? vue.createVNode("div", {
           "class": [ns.e("nav"), ns.is(rootTabs.props.tabPosition), ns.is("stretch", props.stretch && ["top", "bottom"].includes(rootTabs.props.tabPosition))],
           "ref": nav$,
           "style": navStyle.value,
@@ -49445,8 +49650,9 @@
           "onKeydown": changeTab
         }, [...[!props.type ? vue.createVNode(TabBar, {
           "ref": tabBarRef,
-          "tabs": [...props.panes]
-        }, null) : null, tabs]])])]);
+          "tabs": [...props.panes],
+          "tabRefs": tabRefsMap.value
+        }, null) : null, tabs]]) : null])]);
       };
     }
   });
@@ -49457,9 +49663,6 @@
       values: ["card", "border-card", ""],
       default: ""
     },
-    activeName: {
-      type: [String, Number]
-    },
     closable: Boolean,
     addable: Boolean,
     modelValue: {
@@ -49486,7 +49689,7 @@
     tabRemove: (name) => isPaneName(name),
     tabAdd: () => true
   };
-  var Tabs = vue.defineComponent({
+  const Tabs = vue.defineComponent({
     name: "ElTabs",
     props: tabsProps,
     emits: tabsEmits,
@@ -49495,29 +49698,40 @@
       slots,
       expose
     }) {
-      var _a, _b;
+      var _a;
       const ns = useNamespace("tabs");
+      const isVertical = vue.computed(() => ["left", "right"].includes(props.tabPosition));
       const {
         children: panes,
         addChild: registerPane,
-        removeChild: unregisterPane
+        removeChild: unregisterPane,
+        ChildrenSorter: PanesSorter
       } = useOrderedChildren(vue.getCurrentInstance(), "ElTabPane");
       const nav$ = vue.ref();
-      const currentName = vue.ref((_b = (_a = props.modelValue) != null ? _a : props.activeName) != null ? _b : "0");
-      const changeCurrentName = (value) => {
-        currentName.value = value;
-        emit(UPDATE_MODEL_EVENT, value);
-        emit("tabChange", value);
-      };
-      const setCurrentName = async (value) => {
-        var _a2, _b2, _c;
+      const currentName = vue.ref((_a = props.modelValue) != null ? _a : "0");
+      const setCurrentName = async (value, trigger = false) => {
+        var _a2, _b, _c, _d;
         if (currentName.value === value || isUndefined(value))
           return;
         try {
-          const canLeave = await ((_a2 = props.beforeLeave) == null ? void 0 : _a2.call(props, value, currentName.value));
+          let canLeave;
+          if (props.beforeLeave) {
+            const result = props.beforeLeave(value, currentName.value);
+            canLeave = result instanceof Promise ? await result : result;
+          } else {
+            canLeave = true;
+          }
           if (canLeave !== false) {
-            changeCurrentName(value);
-            (_c = (_b2 = nav$.value) == null ? void 0 : _b2.removeFocus) == null ? void 0 : _c.call(_b2);
+            const isFocusInsidePane = (_a2 = panes.value.find((item) => item.paneName === currentName.value)) == null ? void 0 : _a2.isFocusInsidePane();
+            currentName.value = value;
+            if (trigger) {
+              emit(UPDATE_MODEL_EVENT, value);
+              emit("tabChange", value);
+            }
+            (_c = (_b = nav$.value) == null ? void 0 : _b.removeFocus) == null ? void 0 : _c.call(_b);
+            if (isFocusInsidePane) {
+              (_d = nav$.value) == null ? void 0 : _d.focusActiveTab();
+            }
           }
         } catch (e) {
         }
@@ -49525,8 +49739,8 @@
       const handleTabClick = (tab, tabName, event) => {
         if (tab.props.disabled)
           return;
-        setCurrentName(tabName);
         emit("tabClick", tab, event);
+        setCurrentName(tabName, true);
       };
       const handleTabRemove = (pane, ev) => {
         if (pane.props.disabled || isUndefined(pane.props.name))
@@ -49539,15 +49753,13 @@
         emit("edit", void 0, "add");
         emit("tabAdd");
       };
-      useDeprecated({
-        from: '"activeName"',
-        replacement: '"model-value" or "v-model"',
-        scope: "ElTabs",
-        version: "2.3.0",
-        ref: "https://element-plus.org/en-US/component/tabs.html#attributes",
-        type: "Attribute"
-      }, vue.computed(() => !!props.activeName));
-      vue.watch(() => props.activeName, (modelValue) => setCurrentName(modelValue));
+      const swapChildren = (vnode) => {
+        const actualFirstChild = vnode.el.firstChild;
+        const firstChild = ["bottom", "right"].includes(props.tabPosition) ? vnode.children[0].el : vnode.children[1].el;
+        if (actualFirstChild !== firstChild) {
+          actualFirstChild.before(firstChild);
+        }
+      };
       vue.watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
       vue.watch(currentName, async () => {
         var _a2;
@@ -49558,28 +49770,31 @@
         props,
         currentName,
         registerPane,
-        unregisterPane
+        unregisterPane,
+        nav$
       });
       expose({
-        currentName
+        currentName,
+        get tabNavRef() {
+          return omit(nav$.value, ["scheduleRender"]);
+        }
       });
       return () => {
-        const newButton = props.editable || props.addable ? vue.createVNode("span", {
-          "class": ns.e("new-tab"),
+        const addSlot = slots["add-icon"];
+        const newButton = props.editable || props.addable ? vue.createVNode("div", {
+          "class": [ns.e("new-tab"), isVertical.value && ns.e("new-tab-vertical")],
           "tabindex": "0",
           "onClick": handleTabAdd,
           "onKeydown": (ev) => {
-            if (ev.code === EVENT_CODE.enter)
+            if ([EVENT_CODE.enter, EVENT_CODE.numpadEnter].includes(ev.code))
               handleTabAdd();
           }
-        }, [vue.createVNode(ElIcon, {
+        }, [addSlot ? vue.renderSlot(slots, "add-icon") : vue.createVNode(ElIcon, {
           "class": ns.is("icon-plus")
         }, {
           default: () => [vue.createVNode(plus_default, null, null)]
         })]) : null;
-        const header = vue.createVNode("div", {
-          "class": [ns.e("header"), ns.is(props.tabPosition)]
-        }, [newButton, vue.createVNode(TabNav, {
+        const tabNav = () => vue.createVNode(TabNav, {
           "ref": nav$,
           "currentName": currentName.value,
           "editable": props.editable,
@@ -49588,7 +49803,13 @@
           "stretch": props.stretch,
           "onTabClick": handleTabClick,
           "onTabRemove": handleTabRemove
-        }, null)]);
+        }, null);
+        const header = vue.createVNode("div", {
+          "class": [ns.e("header"), isVertical.value && ns.e("header-vertical"), ns.is(props.tabPosition)]
+        }, [vue.createVNode(PanesSorter, null, {
+          default: tabNav,
+          $stable: true
+        }), newButton]);
         const panels = vue.createVNode("div", {
           "class": ns.e("content")
         }, [vue.renderSlot(slots, "default")]);
@@ -49596,8 +49817,10 @@
           "class": [ns.b(), ns.m(props.tabPosition), {
             [ns.m("card")]: props.type === "card",
             [ns.m("border-card")]: props.type === "border-card"
-          }]
-        }, [...props.tabPosition !== "bottom" ? [header, panels] : [panels, header]]);
+          }],
+          "onVnodeMounted": swapChildren,
+          "onVnodeUpdated": swapChildren
+        }, [panels, header]);
       };
     }
   });
@@ -49631,6 +49854,7 @@
       if (!tabsRoot)
         throwError(COMPONENT_NAME$1, "usage: <el-tabs><el-tab-pane /></el-tabs/>");
       const ns = useNamespace("tab-pane");
+      const paneRef = vue.ref();
       const index = vue.ref();
       const isClosable = vue.computed(() => props.closable || tabsRoot.props.closable);
       const active = computedEager(() => {
@@ -49643,29 +49867,40 @@
         return (_a = props.name) != null ? _a : index.value;
       });
       const shouldBeRender = computedEager(() => !props.lazy || loaded.value || active.value);
+      const isFocusInsidePane = () => {
+        var _a;
+        return (_a = paneRef.value) == null ? void 0 : _a.contains(document.activeElement);
+      };
       vue.watch(active, (val) => {
         if (val)
           loaded.value = true;
       });
       const pane = vue.reactive({
         uid: instance.uid,
+        getVnode: () => instance.vnode,
         slots,
         props,
         paneName,
         active,
         index,
-        isClosable
+        isClosable,
+        isFocusInsidePane
       });
-      vue.onMounted(() => {
-        tabsRoot.registerPane(pane);
+      tabsRoot.registerPane(pane);
+      vue.onBeforeUnmount(() => {
+        tabsRoot.unregisterPane(pane);
       });
-      vue.onUnmounted(() => {
-        tabsRoot.unregisterPane(pane.uid);
+      vue.onBeforeUpdate(() => {
+        var _a;
+        if (slots.label)
+          (_a = tabsRoot.nav$.value) == null ? void 0 : _a.scheduleRender();
       });
       return (_ctx, _cache) => {
         return vue.unref(shouldBeRender) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           id: `pane-${vue.unref(paneName)}`,
+          ref_key: "paneRef",
+          ref: paneRef,
           class: vue.normalizeClass(vue.unref(ns).b()),
           role: "tabpanel",
           "aria-hidden": !vue.unref(active),
@@ -56768,6 +57003,7 @@
   const version = installer.version;
 
   exports.BAR_MAP = BAR_MAP;
+  exports.CAROUSEL_ITEM_NAME = CAROUSEL_ITEM_NAME;
   exports.CASCADER_PANEL_INJECTION_KEY = CASCADER_PANEL_INJECTION_KEY;
   exports.CHANGE_EVENT = CHANGE_EVENT;
   exports.ClickOutside = ClickOutside;