vue3-router-tab 1.2.8 → 1.3.0

package/dist/vue3-router-tab.css

@@ -1 +1 @@
-:root{--router-tab-header-height: 42px;--router-tab-padding: 12px;--router-tab-font-size: 14px;--router-tab-transition: all .3s ease;--router-tab-primary: #3b82f6;--router-tab-background: #ffffff;--router-tab-text: #0f172a;--router-tab-border: #e2e8f0;--router-tab-header-bg: #ffffff;--router-tab-active-background: #3b82f6;--router-tab-active-text: #ffffff;--router-tab-active-border: #3b82f6;--router-tab-icon-color: #475569;--router-tab-button-background: #f8fafc;--router-tab-button-color: #0f172a;--router-tab-active-button-background: #3b82f6;--router-tab-active-button-color: #ffffff}:root[data-theme=dark]{--router-tab-background: #1e293b;--router-tab-text: #f1f5f9;--router-tab-border: #334155;--router-tab-header-bg: #1e293b;--router-tab-icon-color: #cbd5e1;--router-tab-button-background: #1f2937;--router-tab-button-color: #f8fafc;--router-tab-active-button-background: #38bdf8;--router-tab-active-button-color: #0f172a}.router-tab{display:flex;flex-direction:column;min-height:300px;background-color:var(--router-tab-background);color:var(--router-tab-text)}.router-tab__header{position:relative;z-index:10;display:flex;flex:none;align-items:center;box-sizing:border-box;height:var(--router-tab-header-height);background-color:var(--router-tab-header-bg);border-bottom:1px solid var(--router-tab-border);transition:all .2s ease}.router-tab__scroll{position:relative;flex:1 1 0px;height:100%;overflow:hidden}.router-tab__scroll-container{width:100%;height:100%;overflow:hidden}.router-tab__scroll-container.is-mobile{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.router-tab__scroll-container.is-mobile::-webkit-scrollbar{display:none}.router-tab__nav{position:relative;display:inline-flex;flex-wrap:nowrap;height:100%;margin:0;padding:0;list-style:none}.router-tab__item{position:relative;display:flex;flex:none;align-items:center;gap:.5rem;padding:0 var(--router-tab-padding);color:var(--router-tab-text);font-size:var(--router-tab-font-size);background-color:transparent;border:none;border-right:1px solid var(--router-tab-border);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--router-tab-transition);will-change:background-color,color}.router-tab__item:first-child{border-left:1px solid var(--router-tab-border)}.router-tab__item:hover{background-color:color-mix(in srgb,var(--router-tab-primary) 4%,transparent);color:var(--router-tab-primary)}.router-tab__item.is-active{background-color:var(--router-tab-active-background);color:var(--router-tab-active-text);font-weight:510}.router-tab__item.is-active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--router-tab-active-border)}.router-tab__item.is-active+.router-tab__item{border-left-color:transparent}.router-tab__item-icon{flex-shrink:0;font-size:14px;color:var(--router-tab-icon-color)}.router-tab__item.is-active .router-tab__item-icon{color:var(--router-tab-active-text)}.router-tab__item:hover .router-tab__item-icon{color:currentColor}.router-tab__item-title{min-width:auto;max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.router-tab__item-close{position:relative;display:block;width:0;height:12px;flex-shrink:0;overflow:hidden;border:none;border-radius:50%;background:var(--router-tab-button-background);color:var(--router-tab-button-color);cursor:pointer;transition:var(--router-tab-transition)}.router-tab__item-close:before,.router-tab__item-close:after{position:absolute;top:50%;left:50%;display:block;width:8px;height:1px;margin-left:-4px;background-color:currentColor;transition:background-color .2s ease-in-out;content:""}.router-tab__item-close:before{transform:translateY(-50%) rotate(-45deg)}.router-tab__item-close:after{transform:translateY(-50%) rotate(45deg)}.router-tab__item-close:hover{background:var(--router-tab-active-button-background);color:var(--router-tab-active-button-color)}.router-tab__item:hover .router-tab__item-close,.router-tab__item.is-active .router-tab__item-close{width:12px;margin-left:4px}.router-tab__item.is-dragging{opacity:.6;cursor:grabbing}.router-tab__item.is-drag-over{background-color:color-mix(in srgb,var(--router-tab-primary) 12%,transparent)}.router-tab__container{position:relative;flex:1 1 auto;background-color:var(--router-tab-background);overflow:hidden}.router-tab__container{padding:10px;border:1px solid var(--router-tab-border);transition:var(--router-tab-transition);will-change:background-color,border-color}.router-tab__slot-start,.router-tab__slot-end{display:none;align-items:center;gap:.25rem;padding:0 .5rem;height:100%}.router-tab__slot-start.has-content{display:flex;border-right:1px solid var(--router-tab-border)}.router-tab__slot-end.has-content{display:flex;border-left:1px solid var(--router-tab-border)}.router-tab__contextmenu{position:fixed;z-index:1000;min-width:160px;padding:6px 0;font-size:var(--router-tab-font-size);background:var(--router-tab-background);border:1px solid var(--router-tab-border);border-radius:8px;box-shadow:0 2px 8px #0000001a}.router-tab__contextmenu-item{display:block;width:100%;padding:5px 12px;line-height:32px;text-align:left;text-decoration:none;background:var(--router-tab-button-background);border:none;color:var(--router-tab-button-color);cursor:pointer;font:inherit;border-radius:4px;transition:all .2s ease-in-out;outline:none}.router-tab__contextmenu-item[aria-disabled=true]{color:color-mix(in srgb,var(--router-tab-text) 40%);pointer-events:none;cursor:not-allowed}.router-tab__contextmenu-item:focus,.router-tab__contextmenu-item:focus-visible{outline:none}.router-tab__contextmenu-item:hover:not([aria-disabled=true]),.router-tab__contextmenu-item:focus-visible,.router-tab__contextmenu-item.is-focused{background:var(--router-tab-active-button-background);color:var(--router-tab-active-button-color)}.router-tab-zoom-enter-active,.router-tab-zoom-leave-active{transition:transform all .2s ease,opacity all .2s ease}.router-tab-zoom-enter-from,.router-tab-zoom-leave-to{transform:scale(.9);opacity:0}.router-tab-zoom-enter-to,.router-tab-zoom-leave-from{transform:scale(1);opacity:1}.router-tab-zoom-move{transition:transform all .2s ease}.router-tab-swap-enter-active,.router-tab-swap-leave-active{position:relative;transition:opacity .5s ease,transform .5s ease;will-change:opacity,transform}.router-tab-swap-enter-from{opacity:0;transform:translateY(20px)}.router-tab-swap-enter-to,.router-tab-swap-leave-from{opacity:1;transform:translateY(0)}.router-tab-swap-leave-to{opacity:0;transform:translateY(-15px)}.router-tab-slide-enter-active,.router-tab-slide-leave-active{position:relative;transition:opacity .5s ease,transform .5s ease;will-change:opacity,transform}.router-tab-slide-enter-from{opacity:0;transform:translate(80px)}.router-tab-slide-enter-to,.router-tab-slide-leave-from{opacity:1;transform:translate(0)}.router-tab-slide-leave-to{opacity:0;transform:translate(-80px)}.router-tab-fade-enter-active{transition:opacity .8s ease-in;will-change:opacity}.router-tab-fade-leave-active{transition:opacity .6s ease-out;will-change:opacity}.router-tab-fade-enter-from{opacity:0}.router-tab-fade-enter-to,.router-tab-fade-leave-from{opacity:1}.router-tab-fade-leave-to{opacity:0}.router-tab-scale-enter-active,.router-tab-scale-leave-active{position:relative;transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.56,.64,1);will-change:opacity,transform}.router-tab-scale-enter-from{opacity:0;transform:scale(.7)}.router-tab-scale-enter-to,.router-tab-scale-leave-from{opacity:1;transform:scale(1)}.router-tab-scale-leave-to{opacity:0;transform:scale(1.2)}.router-tab-flip-enter-active,.router-tab-flip-leave-active{position:relative;transition:opacity .6s ease,transform .6s ease;transform-style:preserve-3d;will-change:opacity,transform}.router-tab-flip-enter-from{opacity:0;transform:rotateX(-90deg)}.router-tab-flip-enter-to,.router-tab-flip-leave-from{opacity:1;transform:rotateX(0)}.router-tab-flip-leave-to{opacity:0;transform:rotateX(90deg)}.router-tab-rotate-enter-active,.router-tab-rotate-leave-active{position:relative;transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}.router-tab-rotate-enter-from{opacity:0;transform:rotate(-8deg) scale(.85)}.router-tab-rotate-enter-to,.router-tab-rotate-leave-from{opacity:1;transform:rotate(0) scale(1)}.router-tab-rotate-leave-to{opacity:0;transform:rotate(8deg) scale(.85)}.router-tab-bounce-enter-active{animation:router-tab-bounce-in .8s cubic-bezier(.68,-.55,.265,1.55)}.router-tab-bounce-leave-active{animation:router-tab-bounce-out .5s ease-in}@keyframes router-tab-bounce-in{0%{opacity:0;transform:scale(.3) translateY(-80px)}50%{opacity:1;transform:scale(1.1)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes router-tab-bounce-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.7) translateY(30px)}}
+:root{--router-tab-header-height: 42px;--router-tab-padding: 12px;--router-tab-font-size: 14px;--router-tab-transition: all .3s ease;--router-tab-primary: #3b82f6;--router-tab-background: #ffffff;--router-tab-text: #0f172a;--router-tab-border: #e2e8f0;--router-tab-header-bg: #ffffff;--router-tab-active-background: #3b82f6;--router-tab-active-text: #ffffff;--router-tab-active-border: #3b82f6;--router-tab-icon-color: #475569;--router-tab-button-background: #f8fafc;--router-tab-button-color: #0f172a;--router-tab-active-button-background: #3b82f6;--router-tab-active-button-color: #ffffff}:root[data-theme=dark]{--router-tab-background: #1e293b;--router-tab-text: #f1f5f9;--router-tab-border: #334155;--router-tab-header-bg: #1e293b;--router-tab-icon-color: #cbd5e1;--router-tab-button-background: #1f2937;--router-tab-button-color: #f8fafc;--router-tab-active-button-background: #38bdf8;--router-tab-active-button-color: #0f172a}.router-tab{display:flex;flex-direction:column;min-height:300px;background-color:var(--router-tab-background);color:var(--router-tab-text)}.router-tab__header{position:relative;z-index:10;display:flex;flex:none;align-items:center;box-sizing:border-box;height:var(--router-tab-header-height);background-color:var(--router-tab-header-bg);border-bottom:1px solid var(--router-tab-border);transition:all .2s ease}.router-tab__scroll{position:relative;flex:1 1 0px;height:100%;overflow:hidden}.router-tab__scroll-container{width:100%;height:100%;overflow:hidden}.router-tab__scroll-container.is-mobile{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.router-tab__scroll-container.is-mobile::-webkit-scrollbar{display:none}.router-tab__nav{position:relative;display:inline-flex;flex-wrap:nowrap;height:100%;margin:0;padding:0;list-style:none}.router-tab__item{position:relative;display:flex;flex:none;align-items:center;gap:.5rem;padding:0 var(--router-tab-padding);color:var(--router-tab-text);font-size:var(--router-tab-font-size);background-color:transparent;border:none;border-right:1px solid var(--router-tab-border);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--router-tab-transition);will-change:background-color,color}.router-tab__item:first-child{border-left:1px solid var(--router-tab-border)}.router-tab__item:hover{background-color:color-mix(in srgb,var(--router-tab-primary) 4%,transparent);color:var(--router-tab-primary)}.router-tab__item.is-active{background-color:var(--router-tab-active-background);color:var(--router-tab-active-text);font-weight:510}.router-tab__item.is-active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--router-tab-active-border)}.router-tab__item.is-active+.router-tab__item{border-left-color:transparent}.router-tab__item-icon{flex-shrink:0;font-size:14px;color:var(--router-tab-icon-color)}.router-tab__item.is-active .router-tab__item-icon{color:var(--router-tab-active-text)}.router-tab__item:hover .router-tab__item-icon{color:currentColor}.router-tab__item-title{min-width:auto;max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.router-tab__item-close{position:relative;display:block;width:0;height:12px;flex-shrink:0;overflow:hidden;border:none;border-radius:50%;background:var(--router-tab-button-background);color:var(--router-tab-button-color);cursor:pointer;transition:var(--router-tab-transition)}.router-tab__item-close:before,.router-tab__item-close:after{position:absolute;top:50%;left:50%;display:block;width:8px;height:1px;margin-left:-4px;background-color:currentColor;transition:background-color .2s ease-in-out;content:""}.router-tab__item-close:before{transform:translateY(-50%) rotate(-45deg)}.router-tab__item-close:after{transform:translateY(-50%) rotate(45deg)}.router-tab__item-close:hover{background:var(--router-tab-active-button-background);color:var(--router-tab-active-button-color)}.router-tab__item:hover .router-tab__item-close,.router-tab__item.is-active .router-tab__item-close{width:12px;margin-left:4px}.router-tab__item.is-dragging{opacity:.6;cursor:grabbing}.router-tab__item.is-drag-over{background-color:color-mix(in srgb,var(--router-tab-primary) 12%,transparent)}.router-tab__container{position:relative;flex:1 1 auto;background-color:var(--router-tab-background);overflow:hidden}.router-tab__container{padding:10px;border:1px solid var(--router-tab-border);transition:var(--router-tab-transition);will-change:background-color,border-color}.router-tab__slot-start,.router-tab__slot-end{display:none;align-items:center;gap:.25rem;padding:0 .5rem;height:100%}.router-tab__slot-start.has-content{display:flex;border-right:1px solid var(--router-tab-border)}.router-tab__slot-end.has-content{display:flex;border-left:1px solid var(--router-tab-border)}.router-tab__contextmenu{position:fixed;z-index:1000;min-width:160px;padding:6px 0;font-size:var(--router-tab-font-size);background:var(--router-tab-background);border:1px solid var(--router-tab-border);border-radius:8px;box-shadow:0 2px 8px #0000001a}.router-tab__contextmenu-item{display:block;width:100%;padding:5px 12px;line-height:32px;text-align:left;text-decoration:none;background:var(--router-tab-button-background);border:none;color:var(--router-tab-button-color);cursor:pointer;font:inherit;border-radius:4px;transition:all .2s ease-in-out;outline:none}.router-tab__contextmenu-item[aria-disabled=true]{color:color-mix(in srgb,var(--router-tab-text) 40%);pointer-events:none;cursor:not-allowed}.router-tab__contextmenu-item:focus,.router-tab__contextmenu-item:focus-visible{outline:none}.router-tab__contextmenu-item:hover:not([aria-disabled=true]),.router-tab__contextmenu-item:focus-visible,.router-tab__contextmenu-item.is-focused{background:var(--router-tab-active-button-background);color:var(--router-tab-active-button-color)}.router-tab-zoom-enter-active,.router-tab-zoom-leave-active{transition:transform all .2s ease,opacity all .2s ease}.router-tab-zoom-enter-from,.router-tab-zoom-leave-to{transform:scale(.9);opacity:0}.router-tab-zoom-enter-to,.router-tab-zoom-leave-from{transform:scale(1);opacity:1}.router-tab-zoom-move{transition:transform all .2s ease}.router-tab-swap-enter-active,.router-tab-swap-leave-active{position:relative;transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}.router-tab-swap-enter-from{opacity:0;transform:translateY(20px)}.router-tab-swap-enter-to,.router-tab-swap-leave-from{opacity:1;transform:translateY(0)}.router-tab-swap-leave-to{opacity:0;transform:translateY(-15px)}.router-tab-slide-enter-active,.router-tab-slide-leave-active{position:relative;transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}.router-tab-slide-enter-from{opacity:0;transform:translate(80px)}.router-tab-slide-enter-to,.router-tab-slide-leave-from{opacity:1;transform:translate(0)}.router-tab-slide-leave-to{opacity:0;transform:translate(-80px)}.router-tab-fade-enter-active{transition:opacity .4s ease-in;will-change:opacity}.router-tab-fade-leave-active{transition:opacity .3s ease-out;will-change:opacity}.router-tab-fade-enter-from{opacity:0}.router-tab-fade-enter-to,.router-tab-fade-leave-from{opacity:1}.router-tab-fade-leave-to{opacity:0}.router-tab-scale-enter-active,.router-tab-scale-leave-active{position:relative;transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);will-change:opacity,transform}.router-tab-scale-enter-from{opacity:0;transform:scale(.7)}.router-tab-scale-enter-to,.router-tab-scale-leave-from{opacity:1;transform:scale(1)}.router-tab-scale-leave-to{opacity:0;transform:scale(1.2)}.router-tab-flip-enter-active,.router-tab-flip-leave-active{position:relative;transition:opacity .35s ease,transform .35s ease;transform-style:preserve-3d;will-change:opacity,transform}.router-tab-flip-enter-from{opacity:0;transform:rotateX(-90deg)}.router-tab-flip-enter-to,.router-tab-flip-leave-from{opacity:1;transform:rotateX(0)}.router-tab-flip-leave-to{opacity:0;transform:rotateX(90deg)}.router-tab-rotate-enter-active,.router-tab-rotate-leave-active{position:relative;transition:opacity .2s ease,transform .2s ease;will-change:opacity,transform}.router-tab-rotate-enter-from{opacity:0;transform:rotate(-8deg) scale(.85)}.router-tab-rotate-enter-to,.router-tab-rotate-leave-from{opacity:1;transform:rotate(0) scale(1)}.router-tab-rotate-leave-to{opacity:0;transform:rotate(8deg) scale(.85)}.router-tab-bounce-enter-active{animation:router-tab-bounce-in .5s cubic-bezier(.68,-.55,.265,1.55)}.router-tab-bounce-leave-active{animation:router-tab-bounce-out .3s ease-in}@keyframes router-tab-bounce-in{0%{opacity:0;transform:scale(.3) translateY(-80px)}50%{opacity:1;transform:scale(1.1)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes router-tab-bounce-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.7) translateY(30px)}}

package/dist/vue3-router-tab.js

@@ -1,5 +1,5 @@
 import './vue3-router-tab.css';
-import { reactive as ge, ref as $, shallowRef as bt, computed as k, watch as A, nextTick as L, inject as Ae, getCurrentInstance as Oe, onMounted as me, defineComponent as Ue, provide as pt, onBeforeUnmount as gt, resolveComponent as mt, createElementBlock as I, openBlock as P, createElementVNode as U, createCommentVNode as V, normalizeClass as J, renderSlot as ue, createVNode as q, TransitionGroup as vt, mergeProps as Q, withCtx as Z, Fragment as ce, renderList as Ee, withModifiers as fe, toDisplayString as Ke, normalizeProps as yt, Transition as Ie, createBlock as de, KeepAlive as ht, resolveDynamicComponent as xe, normalizeStyle as Tt, isRef as kt, isReadonly as wt } from "vue";
+import { reactive as ge, ref as $, shallowRef as bt, computed as k, watch as A, nextTick as _, inject as Ae, getCurrentInstance as Oe, onMounted as me, defineComponent as Ue, provide as pt, onBeforeUnmount as gt, resolveComponent as mt, createElementBlock as I, openBlock as P, createElementVNode as O, createCommentVNode as U, normalizeClass as J, renderSlot as ue, createVNode as q, TransitionGroup as vt, mergeProps as Q, withCtx as Z, Fragment as ce, renderList as Ee, withModifiers as fe, toDisplayString as Ke, normalizeProps as yt, Transition as Ie, createBlock as de, KeepAlive as ht, resolveDynamicComponent as xe, normalizeStyle as Tt, isRef as kt, isReadonly as wt } from "vue";
 import { RouterView as Ct } from "vue-router";
 function Rt(e = {}) {
   return {
@@ -11,7 +11,7 @@ function Rt(e = {}) {
     defaultRoute: e.defaultRoute ?? "/"
   };
 }
-function N(e, n) {
+function V(e, n) {
   const o = e.resolve(n);
   if (!o || !o.matched.length)
     throw new Error(`[RouterTabs] Unable to resolve route: ${String(n)}`);
@@ -24,7 +24,7 @@ const Pt = {
   full: (e) => e.fullPath,
   name: (e) => e.name ? String(e.name) : e.fullPath
 };
-function _(e) {
+function N(e) {
   const n = e.meta?.key;
   if (typeof n == "function") {
     const o = n(e);
@@ -50,7 +50,7 @@ function Ve(e) {
 function ee(e, n, o) {
   const l = Ve(e);
   return {
-    id: _(e),
+    id: N(e),
     to: e.fullPath,
     fullPath: e.fullPath,
     matched: e,
@@ -76,11 +76,11 @@ function be(e, n, o, l) {
 }
 function Se(e, n, o) {
   if (!n || n <= 0) return;
-  const l = e.filter((i) => i.alive);
+  const l = e.filter((r) => r.alive);
   for (; l.length > n; ) {
-    const i = l.shift();
-    if (!i || i.id === o) continue;
-    const p = e.findIndex((T) => T.id === i.id);
+    const r = l.shift();
+    if (!r || r.id === o) continue;
+    const p = e.findIndex((T) => T.id === r.id);
     p > -1 && (e[p].alive = !1);
   }
 }
@@ -100,120 +100,120 @@ function Et(e) {
   return "title" in e && (n.title = e.title), "tips" in e && (n.tips = e.tips), "icon" in e && (n.icon = e.icon), "tabClass" in e && (n.tabClass = e.tabClass), "closable" in e && (n.closable = e.closable), "renderKey" in e && typeof e.renderKey == "number" && (n.renderKey = e.renderKey), n;
 }
 function Kt(e, n = {}) {
-  const o = Rt(n), l = ge([]), i = $(null), p = bt(), T = $(null), s = k(
-    () => l.filter((r) => r.alive).map((r) => `${r.id}::${r.renderKey}`)
+  const o = Rt(n), l = ge([]), r = $(null), p = bt(), T = $(null), s = k(
+    () => l.filter((i) => i.alive).map((i) => `${i.id}::${i.renderKey ?? 0}`)
   );
   let c = !1;
-  function g(r) {
-    const d = typeof r.matched == "object" ? r : N(e, r);
+  function g(i) {
+    const b = typeof i.matched == "object" ? i : V(e, i);
     return {
-      key: _(d),
-      fullPath: d.fullPath,
-      alive: ve(d, o.keepAlive),
-      reusable: ye(d, !1),
-      matched: d
+      key: N(b),
+      fullPath: b.fullPath,
+      alive: ve(b, o.keepAlive),
+      reusable: ye(b, !1),
+      matched: b
     };
   }
-  function R(r) {
-    const d = _(r);
-    let b = l.find((h) => h.id === d);
-    return b ? (b.fullPath = r.fullPath, b.to = r.fullPath, b.matched = r, b.alive = ve(r, o.keepAlive), b.reusable = ye(r, b.reusable), Object.assign(b, Ve(r)), b) : (b = ee(r, {}, o.keepAlive), be(l, b, o.appendPosition, i.value), Se(l, o.maxAlive, i.value), b);
+  function R(i) {
+    const b = N(i);
+    let d = l.find((h) => h.id === b);
+    return d ? (d.fullPath = i.fullPath, d.to = i.fullPath, d.matched = i, d.alive = ve(i, o.keepAlive), d.reusable = ye(i, d.reusable), typeof d.renderKey != "number" && (d.renderKey = 0), Object.assign(d, Ve(i)), d) : (d = ee(i, {}, o.keepAlive), be(l, d, o.appendPosition, r.value), Se(l, o.maxAlive, r.value), d);
   }
-  async function S(r, d = !1, b = !0) {
-    const h = N(e, r), w = _(h), E = i.value === w;
-    b === "sameTab" && (b = E), b && await j(w, !0), await e[d ? "replace" : "push"](h), E && await y();
+  async function S(i, b = !1, d = !0) {
+    const h = V(e, i), w = N(h), E = r.value === w;
+    d === "sameTab" && (d = E), d && await L(w, !0), await e[b ? "replace" : "push"](h), E && await y();
   }
-  function B(r) {
-    const d = l.findIndex((x) => x.id === r);
-    if (d === -1) return o.defaultRoute;
-    const b = l[d + 1], h = l[d - 1], w = l.find((x) => x.id !== r), E = b || h || w;
+  function B(i) {
+    const b = l.findIndex((x) => x.id === i);
+    if (b === -1) return o.defaultRoute;
+    const d = l[b + 1], h = l[b - 1], w = l.find((x) => x.id !== i), E = d || h || w;
     return E ? E.to : o.defaultRoute;
   }
-  async function z(r = i.value, d = {}) {
-    if (!r) return;
-    if (!d.force && o.keepLastTab && l.length === 1)
+  async function z(i = r.value, b = {}) {
+    if (!i) return;
+    if (!b.force && o.keepLastTab && l.length === 1)
       throw new Error("[RouterTabs] Unable to close the final tab when keepLastTab is true.");
-    const h = i.value === r && d.redirect !== null, w = h ? d.redirect ?? B(r) : null;
-    await Y(r, { force: d.force }), d.redirect !== null && h && w && await e.replace(w);
+    const h = r.value === i && b.redirect !== null, w = h ? b.redirect ?? B(i) : null;
+    await Y(i, { force: b.force }), b.redirect !== null && h && w && await e.replace(w);
   }
-  async function Y(r, d = {}) {
-    const b = l.findIndex((h) => h.id === r);
-    b !== -1 && (l.splice(b, 1), T.value === r && (T.value = null), i.value === r && (i.value = null, p.value = void 0));
+  async function Y(i, b = {}) {
+    const d = l.findIndex((h) => h.id === i);
+    d !== -1 && (l.splice(d, 1), T.value === i && (T.value = null), r.value === i && (r.value = null, p.value = void 0));
   }
-  async function j(r = i.value ?? void 0, d = !1) {
-    if (!r) return;
-    const b = l.find((w) => w.id === r);
-    if (!b) return;
-    const h = o.keepAlive && b.alive;
-    h && (b.alive = !1, await L()), b.renderKey = (b.renderKey ?? 0) + 1, h && (b.alive = !0, await L()), T.value = r, await L(), d || await L(), T.value = null;
+  async function L(i = r.value ?? void 0, b = !1) {
+    if (!i) return;
+    const d = l.find((w) => w.id === i);
+    if (!d) return;
+    const h = o.keepAlive && d.alive;
+    h && (d.alive = !1, await _()), d.renderKey = (d.renderKey ?? 0) + 1, h && (d.alive = !0), T.value = i, await _(), await _(), T.value = null;
   }
-  async function ae(r = !1) {
-    for (const d of l)
-      await j(d.id, r);
+  async function ae(i = !1) {
+    for (const b of l)
+      await L(b.id, i);
   }
-  async function ie(r = o.defaultRoute) {
-    l.splice(0, l.length), i.value = null, p.value = void 0;
-    for (const d of o.initialTabs) {
-      const b = N(e, d.to), h = ee(b, d, o.keepAlive);
+  async function re(i = o.defaultRoute) {
+    l.splice(0, l.length), r.value = null, p.value = void 0;
+    for (const b of o.initialTabs) {
+      const d = V(e, b.to), h = ee(d, b, o.keepAlive);
       l.push(h);
     }
-    await e.replace(r);
+    await e.replace(i);
   }
   async function y() {
-    const r = i.value;
-    r && await j(r, !0);
+    const i = r.value;
+    i && await L(i, !0);
   }
-  function G(r) {
-    return typeof r.matched == "object" ? _(r) : _(N(e, r));
+  function G(i) {
+    return typeof i.matched == "object" ? N(i) : N(V(e, i));
   }
   function M() {
-    const r = l.find((d) => d.id === i.value);
+    const i = l.find((b) => b.id === r.value);
     return {
       tabs: l.map(At),
-      active: r ? r.to : null
+      active: i ? i.to : null
     };
   }
-  async function D(r) {
-    c = !0, l.splice(0, l.length), i.value = null, p.value = void 0;
-    const d = r?.tabs ?? [];
-    for (const h of d)
+  async function D(i) {
+    c = !0, l.splice(0, l.length), r.value = null, p.value = void 0;
+    const b = i?.tabs ?? [];
+    for (const h of b)
       try {
-        const w = N(e, h.to), E = Et(h), x = ee(w, E, o.keepAlive);
+        const w = V(e, h.to), E = Et(h), x = ee(w, E, o.keepAlive);
         be(l, x, "last", null);
       } catch {
       }
     c = !1;
-    const b = r?.active ?? d[d.length - 1]?.to ?? o.defaultRoute;
-    if (b)
+    const d = i?.active ?? b[b.length - 1]?.to ?? o.defaultRoute;
+    if (d)
       try {
-        await e.replace(b);
+        await e.replace(d);
       } catch {
       }
   }
   return A(
     () => e.currentRoute.value,
-    (r) => {
+    (i) => {
       if (c) return;
-      const d = R(r);
-      i.value = d.id, p.value = d, Se(l, o.maxAlive, i.value);
+      const b = R(i);
+      r.value = b.id, p.value = b, Se(l, o.maxAlive, r.value);
     },
     { immediate: !0 }
-  ), o.initialTabs.length && o.initialTabs.forEach((r) => {
-    const d = N(e, r.to), b = ee(d, r, o.keepAlive);
-    be(l, b, "last", null);
+  ), o.initialTabs.length && o.initialTabs.forEach((i) => {
+    const b = V(e, i.to), d = ee(b, i, o.keepAlive);
+    be(l, d, "last", null);
   }), {
     options: o,
     tabs: l,
-    activeId: i,
+    activeId: r,
     current: p,
     includeKeys: s,
     refreshingKey: T,
     openTab: S,
     closeTab: z,
     removeTab: Y,
-    refreshTab: j,
+    refreshTab: L,
     refreshAll: ae,
-    reset: ie,
+    reset: re,
     reload: y,
     getRouteKey: G,
     matchRoute: g,
@@ -249,7 +249,7 @@ function Be(e, n, o) {
   if (typeof document > "u") return;
   const {
     expiresInDays: l = 7,
-    path: i = "/",
+    path: r = "/",
     domain: p,
     secure: T,
     sameSite: s = "lax"
@@ -258,12 +258,12 @@ function Be(e, n, o) {
     const g = new Date(Date.now() + l * It).toUTCString();
     c.push(`Expires=${g}`);
   }
-  i && c.push(`Path=${i}`), p && c.push(`Domain=${p}`), T && c.push("Secure"), s && c.push(`SameSite=${s.charAt(0).toUpperCase()}${s.slice(1)}`), document.cookie = c.join("; ");
+  r && c.push(`Path=${r}`), p && c.push(`Domain=${p}`), T && c.push("Secure"), s && c.push(`SameSite=${s.charAt(0).toUpperCase()}${s.slice(1)}`), document.cookie = c.join("; ");
 }
 function Me(e, n) {
   if (typeof document > "u") return;
-  const { path: o = "/", domain: l } = n, i = [`${encodeURIComponent(e)}=`];
-  i.push("Expires=Thu, 01 Jan 1970 00:00:01 GMT"), o && i.push(`Path=${o}`), l && i.push(`Domain=${l}`), document.cookie = i.join("; ");
+  const { path: o = "/", domain: l } = n, r = [`${encodeURIComponent(e)}=`];
+  r.push("Expires=Thu, 01 Jan 1970 00:00:01 GMT"), o && r.push(`Path=${o}`), l && r.push(`Domain=${l}`), document.cookie = r.join("; ");
 }
 const St = (e) => JSON.stringify(e ?? null), Dt = (e) => {
   if (!e) return null;
@@ -278,13 +278,13 @@ function Ne(e = {}) {
     cookieKey: n = ne,
     serialize: o = St,
     deserialize: l = Dt
-  } = e, i = $e({ optional: !0 }), p = $(!0), T = (s) => {
+  } = e, r = $e({ optional: !0 }), p = $(!0), T = (s) => {
     me(async () => {
       const c = l(xt(n));
       if (c && c.tabs?.length)
         try {
           if (p.value = !0, await s.hydrate(c), c.active) {
-            await L();
+            await _();
             const R = s.tabs.find((S) => S.to === c.active);
             R && (s.activeId.value = R.id, s.current.value = R);
           }
@@ -324,7 +324,7 @@ function Ne(e = {}) {
       { deep: !0 }
     );
   };
-  i ? T(i) : me(() => {
+  r ? T(r) : me(() => {
     const s = $e({ optional: !0 });
     s && T(s);
   });
@@ -390,7 +390,7 @@ const $t = Ue({
     const l = o.appContext.app.config.globalProperties.$router;
     if (!l)
       throw new Error("[RouterTab] Vue Router is required. Make sure to call app.use(router) before RouterTab.");
-    const i = Kt(l, {
+    const r = Kt(l, {
       initialTabs: e.tabs,
       keepAlive: e.keepAlive,
       maxAlive: e.maxAlive,
@@ -398,12 +398,12 @@ const $t = Ue({
       appendPosition: e.append,
       defaultRoute: e.defaultPage
     });
-    pt(oe, i), o.appContext.config.globalProperties.$tabs = i;
+    pt(oe, r), o.appContext.config.globalProperties.$tabs = r;
     const p = k(() => !!o?.slots?.default), T = k(() => !!o?.slots?.start), s = k(() => !!o?.slots?.end), c = $(0), g = k(() => {
       c.value;
       const t = {};
-      return i.tabs.forEach((a) => {
-        const f = typeof a.title == "string" ? a.title : String(a.title || re(a));
+      return r.tabs.forEach((a) => {
+        const f = typeof a.title == "string" ? a.title : String(a.title || ie(a));
         t[a.id] = f;
       }), t;
     });
@@ -414,7 +414,7 @@ const $t = Ue({
     function z(t, a) {
       if (!a || S.has(t)) return;
       S.set(t, a);
-      const f = i.tabs.find((v) => i.getRouteKey(v.to) === t);
+      const f = r.tabs.find((v) => r.getRouteKey(v.to) === t);
       if (!f) return;
       const m = [];
       if (a.routeTabTitle !== void 0) {
@@ -425,8 +425,8 @@ const $t = Ue({
           },
           (u) => {
             if (u != null) {
-              const O = String(u);
-              f.title = O, R();
+              const j = String(u);
+              f.title = j, R();
             }
           },
           { immediate: !0 }
@@ -478,7 +478,7 @@ const $t = Ue({
       const a = B.get(t);
       a && (a.forEach((f) => f()), B.delete(t)), S.delete(t);
     }
-    function j(t, a) {
+    function L(t, a) {
       t ? t.routeTabTitle !== void 0 || t.routeTabIcon !== void 0 || t.routeTabClosable !== void 0 ? z(a, t) : t.$ && (t.$.routeTabTitle !== void 0 || t.$.routeTabIcon !== void 0 || t.$.routeTabClosable !== void 0) && z(a, t.$) : t === null && Y(a);
     }
     if (e.cookieKey !== null || e.persistence) {
@@ -487,16 +487,16 @@ const $t = Ue({
       };
       e.cookieKey !== null ? t.cookieKey = e.cookieKey || ne : t.cookieKey || (t.cookieKey = ne), Ne(t);
     }
-    const ae = k(() => De(e.tabTransition)), ie = k(() => De(e.pageTransition)), y = ge({
+    const ae = k(() => De(e.tabTransition)), re = k(() => De(e.pageTransition)), y = ge({
       visible: !1,
       target: null,
       position: { x: 0, y: 0 }
-    }), G = $(null), M = $([]), D = $(-1), r = ge({
+    }), G = $(null), M = $([]), D = $(-1), i = ge({
       dragging: !1,
       dragIndex: -1,
       dropIndex: -1,
       dragTab: null
-    }), d = [
+    }), b = [
       "refresh",
       "refreshAll",
       "close",
@@ -504,45 +504,45 @@ const $t = Ue({
       "closeRights",
       "closeOthers"
     ];
-    function b(t) {
-      return i.tabs.findIndex((a) => a.id === t);
+    function d(t) {
+      return r.tabs.findIndex((a) => a.id === t);
     }
     function h(t) {
-      const a = b(t.id);
-      return a > 0 ? i.tabs.slice(0, a) : [];
+      const a = d(t.id);
+      return a > 0 ? r.tabs.slice(0, a) : [];
     }
     function w(t) {
-      const a = b(t.id);
-      return a > -1 ? i.tabs.slice(a + 1) : [];
+      const a = d(t.id);
+      return a > -1 ? r.tabs.slice(a + 1) : [];
     }
     function E(t) {
-      return i.tabs.filter((a) => a.id !== t.id);
+      return r.tabs.filter((a) => a.id !== t.id);
     }
     async function x(t, a) {
       const f = t.filter((m) => m.closable !== !1);
       if (f.length) {
         for (const m of f)
-          i.activeId.value === m.id ? await i.closeTab(m.id, { redirect: a.to, force: !0 }) : await i.removeTab(m.id, { force: !0 });
-        i.activeId.value !== a.id && await i.openTab(a.to, !0, !1);
+          r.activeId.value === m.id ? await r.closeTab(m.id, { redirect: a.to, force: !0 }) : await r.removeTab(m.id, { force: !0 });
+        r.activeId.value !== a.id && await r.openTab(a.to, !0, !1);
       }
     }
     const He = {
       refresh: {
         label: "Refresh",
         handler: async ({ target: t }) => {
-          await i.refreshTab(t.id, !0);
+          await r.refreshTab(t.id, !0);
         }
       },
       refreshAll: {
         label: "Refresh All",
         handler: async () => {
-          await i.refreshAll(!0);
+          await r.refreshAll(!0);
         }
       },
       close: {
         label: "Close",
         handler: async ({ target: t }) => {
-          await i.closeTab(t.id);
+          await r.closeTab(t.id);
         },
         enable: ({ target: t }) => le(t)
       },
@@ -572,7 +572,7 @@ const $t = Ue({
       y.visible = !1, y.target = null, D.value = -1, M.value = [];
     }
     function Je(t, a) {
-      e.contextmenu && (y.visible = !0, y.target = t, y.position.x = a.clientX, y.position.y = a.clientY, document.addEventListener("click", K, { once: !0 }), L(() => {
+      e.contextmenu && (y.visible = !0, y.target = t, y.position.x = a.clientX, y.position.y = a.clientY, document.addEventListener("click", K, { once: !0 }), _(() => {
         Ge();
       }));
     }
@@ -593,15 +593,15 @@ const $t = Ue({
     }
     const F = k(() => {
       if (!y.visible || !y.target || e.contextmenu === !1) return [];
-      const t = Array.isArray(e.contextmenu) ? e.contextmenu : d, a = { target: y.target, controller: i };
+      const t = Array.isArray(e.contextmenu) ? e.contextmenu : b, a = { target: y.target, controller: r };
       return t.map((f) => We(f, a)).filter((f) => !!f);
     });
     function Ge() {
       const t = G.value;
       if (!t) return;
       const a = 8, { innerWidth: f, innerHeight: m } = window, v = t.getBoundingClientRect();
-      let u = y.position.x, O = y.position.y;
-      v.right > f - a && (u = Math.max(a, f - v.width - a)), v.bottom > m - a && (O = Math.max(a, m - v.height - a)), (u !== y.position.x || O !== y.position.y) && (y.position.x = u, y.position.y = O);
+      let u = y.position.x, j = y.position.y;
+      v.right > f - a && (u = Math.max(a, f - v.width - a)), v.bottom > m - a && (j = Math.max(a, m - v.height - a)), (u !== y.position.x || j !== y.position.y) && (y.position.x = u, y.position.y = j);
     }
     function Xe(t, a) {
       M.value[a] = t ?? null;
@@ -619,7 +619,7 @@ const $t = Ue({
       return -1;
     }
     function H(t) {
-      D.value = t, !(t < 0) && L(() => qe(t));
+      D.value = t, !(t < 0) && _(() => qe(t));
     }
     function ke(t) {
       const a = X(D.value, t);
@@ -678,66 +678,66 @@ const $t = Ue({
     async function we(t) {
       t.disabled || (K(), await t.action());
     }
-    function re(t) {
+    function ie(t) {
       return typeof t.title == "string" && t.title.trim() ? t.title : Array.isArray(t.title) && t.title.length && String(t.title[0]).trim() ? String(t.title[0]) : "Untitled";
     }
     function Ze(t) {
-      return g.value[t.id] || re(t);
+      return g.value[t.id] || ie(t);
     }
     function Ce(t) {
-      const a = i.getRouteKey(t), m = i.tabs.find((v) => v.id === a)?.renderKey ?? 0;
+      const a = r.getRouteKey(t), m = r.tabs.find((v) => v.id === a)?.renderKey ?? 0;
       return `${a}::${m}`;
     }
     function et(t) {
       return `${Ce(t)}::refresh`;
     }
     function le(t) {
-      return !(t.closable === !1 || i.options.keepLastTab && i.tabs.length <= 1);
+      return !(t.closable === !1 || r.options.keepLastTab && r.tabs.length <= 1);
     }
     async function tt(t) {
-      await i.closeTab(t.id);
+      await r.closeTab(t.id);
     }
     function nt(t) {
       if (t.href && typeof window < "u") {
         t.target && t.target !== "_self" ? window.open(t.href, t.target) : window.location.assign(t.href);
         return;
       }
-      i.activeId.value !== t.id && i.openTab(t.to, !1);
+      r.activeId.value !== t.id && r.openTab(t.to, !1);
     }
     function ot(t) {
       return [
         "router-tab__item",
         {
-          "is-active": i.activeId.value === t.id,
+          "is-active": r.activeId.value === t.id,
           "is-closable": le(t),
-          "is-dragging": r.dragging && r.dragTab?.id === t.id,
-          "is-drag-over": r.dropIndex === b(t.id)
+          "is-dragging": i.dragging && i.dragTab?.id === t.id,
+          "is-drag-over": i.dropIndex === d(t.id)
         },
         t.tabClass
       ];
     }
     function at(t) {
-      return i.refreshingKey.value === i.getRouteKey(t);
+      return r.refreshingKey.value === r.getRouteKey(t);
     }
-    function it(t, a, f) {
-      e.sortable && (r.dragging = !0, r.dragIndex = a, r.dragTab = t, f.dataTransfer && (f.dataTransfer.effectAllowed = "move", f.dataTransfer.setData("text/plain", t.id)), n("tab-sort", { tab: t, index: a }));
+    function rt(t, a, f) {
+      e.sortable && (i.dragging = !0, i.dragIndex = a, i.dragTab = t, f.dataTransfer && (f.dataTransfer.effectAllowed = "move", f.dataTransfer.setData("text/plain", t.id)), n("tab-sort", { tab: t, index: a }));
     }
-    function rt(t, a) {
-      !e.sortable || !r.dragging || (a.preventDefault(), a.dataTransfer && (a.dataTransfer.dropEffect = "move"));
+    function it(t, a) {
+      !e.sortable || !i.dragging || (a.preventDefault(), a.dataTransfer && (a.dataTransfer.dropEffect = "move"));
     }
     function lt(t) {
-      !e.sortable || !r.dragging || (r.dropIndex = t);
+      !e.sortable || !i.dragging || (i.dropIndex = t);
     }
     function st() {
-      !e.sortable || r.dragging;
+      !e.sortable || i.dragging;
     }
     function ut(t, a) {
-      if (!(!e.sortable || !r.dragging)) {
-        if (a.preventDefault(), r.dragIndex !== -1 && r.dragIndex !== t) {
-          const f = i.tabs.splice(r.dragIndex, 1)[0];
-          i.tabs.splice(t, 0, f), n("tab-sorted", {
+      if (!(!e.sortable || !i.dragging)) {
+        if (a.preventDefault(), i.dragIndex !== -1 && i.dragIndex !== t) {
+          const f = r.tabs.splice(i.dragIndex, 1)[0];
+          r.tabs.splice(t, 0, f), n("tab-sorted", {
             tab: f,
-            fromIndex: r.dragIndex,
+            fromIndex: i.dragIndex,
             toIndex: t
           });
         }
@@ -745,7 +745,7 @@ const $t = Ue({
       }
     }
     function Re() {
-      r.dragging = !1, r.dragIndex = -1, r.dropIndex = -1, r.dragTab = null;
+      i.dragging = !1, i.dragIndex = -1, i.dropIndex = -1, i.dragTab = null;
     }
     me(() => {
       document.addEventListener("keydown", K);
@@ -756,10 +756,10 @@ const $t = Ue({
     }), A(
       () => e.keepAlive,
       (t) => {
-        i.options.keepAlive = t;
+        r.options.keepAlive = t;
       }
     ), A(
-      () => i.activeId.value,
+      () => r.activeId.value,
       () => K()
     ), A(
       () => e.contextmenu,
@@ -781,13 +781,13 @@ const $t = Ue({
         t || (D.value = -1, M.value = []);
       }
     );
-    const ct = i.includeKeys;
+    const ct = r.includeKeys;
     return {
-      controller: i,
-      tabs: i.tabs,
+      controller: r,
+      tabs: r.tabs,
       includeKeys: ct,
       tabTransitionProps: ae,
-      pageTransitionProps: ie,
+      pageTransitionProps: re,
       buildTabClass: ot,
       activate: nt,
       close: tt,
@@ -796,21 +796,21 @@ const $t = Ue({
       handleMenuAction: we,
       showContextMenu: Je,
       hideContextMenu: K,
-      getTabTitle: re,
+      getTabTitle: ie,
       isClosable: le,
       isRefreshing: at,
       hasCustomSlot: p,
       hasStartSlot: T,
       hasEndSlot: s,
-      onDragStart: it,
-      onDragOver: rt,
+      onDragStart: rt,
+      onDragOver: it,
       onDragEnter: lt,
       onDragLeave: st,
       onDrop: ut,
       onDragEnd: Re,
       setupComponentWatching: z,
       cleanupComponentWatching: Y,
-      handleComponentRef: j,
+      handleComponentRef: L,
       getReactiveTabTitle: Ze,
       getComponentCacheKey: Ce,
       getRefreshComponentKey: et,
@@ -824,20 +824,20 @@ const $t = Ue({
   }
 }), Bt = (e, n) => {
   const o = e.__vccOpts || e;
-  for (const [l, i] of n)
-    o[l] = i;
+  for (const [l, r] of n)
+    o[l] = r;
   return o;
 }, Mt = { class: "router-tab" }, Lt = { class: "router-tab__header" }, jt = { class: "router-tab__scroll" }, Ot = ["data-title", "draggable", "onClick", "onAuxclick", "onContextmenu", "onDragstart", "onDragover", "onDragenter", "onDrop"], Ut = ["title"], Vt = ["onClick"], Nt = { class: "router-tab__container" }, _t = ["aria-disabled", "disabled", "tabindex", "onMouseenter", "onClick"];
-function zt(e, n, o, l, i, p) {
+function zt(e, n, o, l, r, p) {
   const T = mt("RouterView");
   return P(), I("div", Mt, [
-    U("header", Lt, [
-      U("div", {
+    O("header", Lt, [
+      O("div", {
         class: J(["router-tab__slot-start", { "has-content": e.hasStartSlot }])
       }, [
         ue(e.$slots, "start")
       ], 2),
-      U("div", jt, [
+      O("div", jt, [
         q(vt, Q({
           tag: "ul",
           class: "router-tab__nav"
@@ -861,8 +861,8 @@ function zt(e, n, o, l, i, p) {
               s.icon ? (P(), I("i", {
                 key: 0,
                 class: J(["router-tab__item-icon", s.icon])
-              }, null, 2)) : V("", !0),
-              U("span", {
+              }, null, 2)) : U("", !0),
+              O("span", {
                 class: "router-tab__item-title",
                 title: e.getReactiveTabTitle(s)
               }, Ke(e.getReactiveTabTitle(s)), 9, Ut),
@@ -870,19 +870,19 @@ function zt(e, n, o, l, i, p) {
                 key: 1,
                 class: "router-tab__item-close",
                 onClick: fe((g) => e.close(s), ["stop"])
-              }, null, 8, Vt)) : V("", !0)
+              }, null, 8, Vt)) : U("", !0)
             ], 42, Ot))), 128))
           ]),
           _: 1
         }, 16)
       ]),
-      U("div", {
+      O("div", {
         class: J(["router-tab__slot-end", { "has-content": e.hasEndSlot }])
       }, [
         ue(e.$slots, "end")
       ], 2)
     ]),
-    U("div", Nt, [
+    O("div", Nt, [
       q(T, null, {
         default: Z((s) => [
           e.hasCustomSlot ? ue(e.$slots, "default", yt(Q({ key: 0 }, {
@@ -898,12 +898,12 @@ function zt(e, n, o, l, i, p) {
                   include: e.includeKeys,
                   max: e.controller.options.maxAlive || void 0
                 }, [
-                  e.isRefreshing(s.route) ? V("", !0) : (P(), de(xe(s.Component), {
+                  e.isRefreshing(s.route) ? U("", !0) : (P(), de(xe(s.Component), {
                     key: e.getComponentCacheKey(s.route),
                     ref: (c) => e.handleComponentRef(c, e.controller.getRouteKey(s.route)),
                     class: "router-tab-page"
                   }))
-                ], 1032, ["include", "max"])) : V("", !0)
+                ], 1032, ["include", "max"])) : U("", !0)
               ]),
               _: 2
             }, 1040),
@@ -913,7 +913,7 @@ function zt(e, n, o, l, i, p) {
                   key: e.getRefreshComponentKey(s.route),
                   ref: (c) => e.handleComponentRef(c, e.controller.getRouteKey(s.route)),
                   class: "router-tab-page"
-                })) : V("", !0)
+                })) : U("", !0)
               ]),
               _: 2
             }, 1040)
@@ -942,7 +942,7 @@ function zt(e, n, o, l, i, p) {
         onMouseenter: (g) => !s.disabled && e.highlightMenuIndex(c),
         onClick: (g) => e.handleMenuAction(s)
       }, Ke(s.label), 43, _t))), 128))
-    ], 36)) : V("", !0)
+    ], 36)) : U("", !0)
   ]);
 }
 const Le = /* @__PURE__ */ Bt($t, [["render", zt]]), Yt = {
@@ -1024,11 +1024,11 @@ function Wt(e = {}) {
     styleKey: n = _e,
     primaryKey: o = ze,
     defaultStyle: l = Ft,
-    defaultPrimary: i
+    defaultPrimary: r
   } = e, p = window.localStorage.getItem(n) ?? l;
   Fe(p);
   const s = p === "dark" || p === "system" && window.matchMedia(Ye).matches ? { ...Ht } : { ...C };
-  i && (s.primary = i);
+  r && (s.primary = r);
   const c = Jt(o);
   he(c ? {
     ...s,
@@ -1050,8 +1050,8 @@ function te(e, n) {
     const l = !wt(e);
     return {
       value: e,
-      update: l ? (i) => {
-        e.value = i;
+      update: l ? (r) => {
+        e.value = r;
       } : () => {
       }
     };
@@ -1073,16 +1073,16 @@ function te(e, n) {
   };
 }
 function Te(e = {}) {
-  const n = te(e.title, "Untitled"), o = te(e.icon, ""), l = te(e.closable, !0), i = te(e.meta, {});
+  const n = te(e.title, "Untitled"), o = te(e.icon, ""), l = te(e.closable, !0), r = te(e.meta, {});
   return {
     routeTabTitle: n.value,
     routeTabIcon: o.value,
     routeTabClosable: l.value,
-    routeTabMeta: i.value,
+    routeTabMeta: r.value,
     updateTitle: n.update,
     updateIcon: o.update,
     updateClosable: l.update,
-    updateMeta: i.update
+    updateMeta: r.update
   };
 }
 function Zt(e, n = "Page") {
@@ -1119,10 +1119,10 @@ const nn = {
     const {
       initTheme: o = !0,
       themeOptions: l,
-      componentName: i = Le.name || "RouterTab",
+      componentName: r = Le.name || "RouterTab",
       tabsComponentName: p = pe.name || "RouterTabs"
     } = n ?? {};
-    o && Wt(l ?? {}), e.component(i, Le), e.component(p, pe), p.toLowerCase() !== "router-tabs" && e.component("router-tabs", pe), Object.defineProperty(e.config.globalProperties, "$tabs", {
+    o && Wt(l ?? {}), e.component(r, Le), e.component(p, pe), p.toLowerCase() !== "router-tabs" && e.component("router-tabs", pe), Object.defineProperty(e.config.globalProperties, "$tabs", {
       configurable: !0,
       enumerable: !1,
       get() {

package/dist/vue3-router-tab.umd.cjs

@@ -1 +1 @@
-(function(w,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router"],n):(w=typeof globalThis<"u"?globalThis:w||self,n(w["vue3-router-tab"]={},w.Vue,w.VueRouter))})(this,(function(w,n,Re){"use strict";function Ee(e={}){return{initialTabs:e.initialTabs??[],keepAlive:e.keepAlive??!0,maxAlive:e.maxAlive??0,keepLastTab:e.keepLastTab??!0,appendPosition:e.appendPosition??"last",defaultRoute:e.defaultRoute??"/"}}function D(e,o){const a=e.resolve(o);if(!a||!a.matched.length)throw new Error(`[RouterTabs] Unable to resolve route: ${String(o)}`);return a}const Pe={path:e=>e.path,fullpath:e=>e.fullPath,fullname:e=>e.fullPath,full:e=>e.fullPath,name:e=>e.name?String(e.name):e.fullPath};function $(e){const o=e.meta?.key;if(typeof o=="function"){const a=o(e);if(typeof a=="string"&&a.length)return a}else if(typeof o=="string"&&o.length){const a=Pe[o.toLowerCase()];return a?a(e):o}return e.fullPath}function G(e,o){const a=e.meta?.keepAlive;return typeof a=="boolean"?a:o}function X(e,o){const a=e.meta?.reuse;return typeof a=="boolean"?a:o}function se(e){const o=e.meta??{},a={};return"title"in o&&(a.title=o.title),"tips"in o&&(a.tips=o.tips),"icon"in o&&(a.icon=o.icon),"closable"in o&&(a.closable=o.closable),"tabClass"in o&&(a.tabClass=o.tabClass),"target"in o&&(a.target=o.target),"href"in o&&(a.href=o.href),a}function _(e,o,a){const s=se(e);return{id:$(e),to:e.fullPath,fullPath:e.fullPath,matched:e,alive:G(e,a),reusable:X(e,!1),closable:s.closable??!0,renderKey:typeof o.renderKey=="number"?o.renderKey:0,...s,...o}}function Q(e,o,a,s){if(!e.find(p=>p.id===o.id)){if(a==="next"&&s){const p=e.findIndex(v=>v.id===s);if(p!==-1){e.splice(p+1,0,o);return}}e.push(o)}}function ce(e,o,a){if(!o||o<=0)return;const s=e.filter(i=>i.alive);for(;s.length>o;){const i=s.shift();if(!i||i.id===a)continue;const p=e.findIndex(v=>v.id===i.id);p>-1&&(e[p].alive=!1)}}function Be(e){return{to:e.to,title:e.title,tips:e.tips,icon:e.icon,tabClass:e.tabClass,closable:e.closable,renderKey:e.renderKey}}function Ae(e){const o={};return"title"in e&&(o.title=e.title),"tips"in e&&(o.tips=e.tips),"icon"in e&&(o.icon=e.icon),"tabClass"in e&&(o.tabClass=e.tabClass),"closable"in e&&(o.closable=e.closable),"renderKey"in e&&typeof e.renderKey=="number"&&(o.renderKey=e.renderKey),o}function Ke(e,o={}){const a=Ee(o),s=n.reactive([]),i=n.ref(null),p=n.shallowRef(),v=n.ref(null),c=n.computed(()=>s.filter(l=>l.alive).map(l=>`${l.id}::${l.renderKey}`));let d=!1;function g(l){const b=typeof l.matched=="object"?l:D(e,l);return{key:$(b),fullPath:b.fullPath,alive:G(b,a.keepAlive),reusable:X(b,!1),matched:b}}function E(l){const b=$(l);let m=s.find(k=>k.id===b);return m?(m.fullPath=l.fullPath,m.to=l.fullPath,m.matched=l,m.alive=G(l,a.keepAlive),m.reusable=X(l,m.reusable),Object.assign(m,se(l)),m):(m=_(l,{},a.keepAlive),Q(s,m,a.appendPosition,i.value),ce(s,a.maxAlive,i.value),m)}async function K(l,b=!1,m=!0){const k=D(e,l),C=$(k),P=i.value===C;m==="sameTab"&&(m=P),m&&await M(C,!0),await e[b?"replace":"push"](k),P&&await T()}function S(l){const b=s.findIndex(A=>A.id===l);if(b===-1)return a.defaultRoute;const m=s[b+1],k=s[b-1],C=s.find(A=>A.id!==l),P=m||k||C;return P?P.to:a.defaultRoute}async function j(l=i.value,b={}){if(!l)return;if(!b.force&&a.keepLastTab&&s.length===1)throw new Error("[RouterTabs] Unable to close the final tab when keepLastTab is true.");const k=i.value===l&&b.redirect!==null,C=k?b.redirect??S(l):null;await O(l,{force:b.force}),b.redirect!==null&&k&&C&&await e.replace(C)}async function O(l,b={}){const m=s.findIndex(k=>k.id===l);m!==-1&&(s.splice(m,1),v.value===l&&(v.value=null),i.value===l&&(i.value=null,p.value=void 0))}async function M(l=i.value??void 0,b=!1){if(!l)return;const m=s.find(C=>C.id===l);if(!m)return;const k=a.keepAlive&&m.alive;k&&(m.alive=!1,await n.nextTick()),m.renderKey=(m.renderKey??0)+1,k&&(m.alive=!0,await n.nextTick()),v.value=l,await n.nextTick(),b||await n.nextTick(),v.value=null}async function oe(l=!1){for(const b of s)await M(b.id,l)}async function ae(l=a.defaultRoute){s.splice(0,s.length),i.value=null,p.value=void 0;for(const b of a.initialTabs){const m=D(e,b.to),k=_(m,b,a.keepAlive);s.push(k)}await e.replace(l)}async function T(){const l=i.value;l&&await M(l,!0)}function W(l){return typeof l.matched=="object"?$(l):$(D(e,l))}function x(){const l=s.find(b=>b.id===i.value);return{tabs:s.map(Be),active:l?l.to:null}}async function I(l){d=!0,s.splice(0,s.length),i.value=null,p.value=void 0;const b=l?.tabs??[];for(const k of b)try{const C=D(e,k.to),P=Ae(k),A=_(C,P,a.keepAlive);Q(s,A,"last",null)}catch{}d=!1;const m=l?.active??b[b.length-1]?.to??a.defaultRoute;if(m)try{await e.replace(m)}catch{}}return n.watch(()=>e.currentRoute.value,l=>{if(d)return;const b=E(l);i.value=b.id,p.value=b,ce(s,a.maxAlive,i.value)},{immediate:!0}),a.initialTabs.length&&a.initialTabs.forEach(l=>{const b=D(e,l.to),m=_(b,l,a.keepAlive);Q(s,m,"last",null)}),{options:a,tabs:s,activeId:i,current:p,includeKeys:c,refreshingKey:v,openTab:K,closeTab:j,removeTab:O,refreshTab:M,refreshAll:oe,reset:ae,reload:T,getRouteKey:W,matchRoute:g,snapshot:x,hydrate:I}}function ue(e){return e?typeof e=="string"?{name:e}:e:{}}const V=Symbol("RouterTabsContext"),Y="router-tabs:snapshot";function Z(e={}){const{optional:o=!1}=e,a=n.inject(V,null);if(a)return a;const s=n.inject("$tabs",null);if(s)return s;const p=n.getCurrentInstance()?.appContext.config.globalProperties.$tabs;if(p)return p;if(!o)throw new Error("[RouterTabs] useRouterTabs must be used within <router-tab>.");return null}const Ie=864e5;function Se(e){if(typeof document>"u")return null;const o=`${encodeURIComponent(e)}=`,a=document.cookie?document.cookie.split("; "):[];for(const s of a)if(s.startsWith(o))return decodeURIComponent(s.slice(o.length));return null}function de(e,o,a){if(typeof document>"u")return;const{expiresInDays:s=7,path:i="/",domain:p,secure:v,sameSite:c="lax"}=a,d=[`${encodeURIComponent(e)}=${encodeURIComponent(o)}`];if(s!==1/0){const g=new Date(Date.now()+s*Ie).toUTCString();d.push(`Expires=${g}`)}i&&d.push(`Path=${i}`),p&&d.push(`Domain=${p}`),v&&d.push("Secure"),c&&d.push(`SameSite=${c.charAt(0).toUpperCase()}${c.slice(1)}`),document.cookie=d.join("; ")}function fe(e,o){if(typeof document>"u")return;const{path:a="/",domain:s}=o,i=[`${encodeURIComponent(e)}=`];i.push("Expires=Thu, 01 Jan 1970 00:00:01 GMT"),a&&i.push(`Path=${a}`),s&&i.push(`Domain=${s}`),document.cookie=i.join("; ")}const xe=e=>JSON.stringify(e??null),De=e=>{if(!e)return null;try{return JSON.parse(e)}catch{return null}};function ee(e={}){const{cookieKey:o=Y,serialize:a=xe,deserialize:s=De}=e,i=Z({optional:!0}),p=n.ref(!0),v=c=>{n.onMounted(async()=>{const d=s(Se(o));if(d&&d.tabs?.length)try{if(p.value=!0,await c.hydrate(d),d.active){await n.nextTick();const E=c.tabs.find(K=>K.to===d.active);E&&(c.activeId.value=E.id,c.current.value=E)}}finally{p.value=!1}else if(Object.prototype.hasOwnProperty.call(e,"fallbackRoute"))try{p.value=!0;const E=e.fallbackRoute??c.options.defaultRoute;await c.reset(E)}finally{p.value=!1}else p.value=!1;const g=c.snapshot();g.tabs.length?de(o,a(g),e):fe(o,e),p.value=!1}),n.watch(()=>({tabs:c.tabs.map(d=>({to:d.to,title:d.title,tips:d.tips,icon:d.icon,tabClass:d.tabClass,closable:d.closable,renderKey:d.renderKey})),active:c.activeId.value}),()=>{if(p.value)return;const d=c.snapshot();d.tabs.length?de(o,a(d),e):fe(o,e)},{deep:!0})};i?v(i):n.onMounted(()=>{const c=Z({optional:!0});c&&v(c)})}const $e=n.defineComponent({name:"RouterTab",components:{RouterView:Re.RouterView},props:{tabs:{type:Array,default:()=>[]},keepAlive:{type:Boolean,default:!0},maxAlive:{type:Number,default:0},keepLastTab:{type:Boolean,default:!0},append:{type:String,default:"last"},defaultPage:{type:[String,Object],default:"/"},tabTransition:{type:[String,Object],default:"router-tab-zoom"},pageTransition:{type:[String,Object],default:()=>({name:"router-tab-swap",mode:"out-in"})},contextmenu:{type:[Boolean,Array],default:!0},cookieKey:{type:String,default:Y},persistence:{type:Object,default:null},sortable:{type:Boolean,default:!0}},emits:["tab-sort","tab-sorted"],setup(e,{emit:o}){const a=n.getCurrentInstance();if(!a)throw new Error("[RouterTab] component must be used within a Vue application context.");const s=a.appContext.app.config.globalProperties.$router;if(!s)throw new Error("[RouterTab] Vue Router is required. Make sure to call app.use(router) before RouterTab.");const i=Ke(s,{initialTabs:e.tabs,keepAlive:e.keepAlive,maxAlive:e.maxAlive,keepLastTab:e.keepLastTab,appendPosition:e.append,defaultRoute:e.defaultPage});n.provide(V,i),a.appContext.config.globalProperties.$tabs=i;const p=n.computed(()=>!!a?.slots?.default),v=n.computed(()=>!!a?.slots?.start),c=n.computed(()=>!!a?.slots?.end),d=n.ref(0),g=n.computed(()=>{d.value;const t={};return i.tabs.forEach(r=>{const f=typeof r.title=="string"?r.title:String(r.title||re(r));t[r.id]=f}),t});function E(){d.value++}const K=new Map,S=new Map;function j(t,r){if(!r||K.has(t))return;K.set(t,r);const f=i.tabs.find(y=>i.getRouteKey(y.to)===t);if(!f)return;const h=[];if(r.routeTabTitle!==void 0){const y=n.watch(()=>{const u=r.routeTabTitle;return u&&typeof u=="object"&&"value"in u?u.value:u},u=>{if(u!=null){const L=String(u);f.title=L,E()}},{immediate:!0});h.push(y)}if(r.routeTabIcon!==void 0){const y=n.watch(()=>{const u=r.routeTabIcon;return u&&typeof u=="object"&&"value"in u?u.value:u},u=>{u!=null&&(f.icon=String(u),E())},{immediate:!0});h.push(y)}if(r.routeTabClosable!==void 0){const y=n.watch(()=>{const u=r.routeTabClosable;return u&&typeof u=="object"&&"value"in u?u.value:u},u=>{u!=null&&(f.closable=!!u,E())},{immediate:!0});h.push(y)}if(r.routeTabMeta!==void 0){const y=n.watch(()=>{const u=r.routeTabMeta;return u&&typeof u=="object"&&"value"in u?u.value:u},u=>{u&&typeof u=="object"&&(Object.assign(f,u),E())},{immediate:!0,deep:!0});h.push(y)}S.set(t,h)}function O(t){const r=S.get(t);r&&(r.forEach(f=>f()),S.delete(t)),K.delete(t)}function M(t,r){t?t.routeTabTitle!==void 0||t.routeTabIcon!==void 0||t.routeTabClosable!==void 0?j(r,t):t.$&&(t.$.routeTabTitle!==void 0||t.$.routeTabIcon!==void 0||t.$.routeTabClosable!==void 0)&&j(r,t.$):t===null&&O(r)}if(e.cookieKey!==null||e.persistence){const t={...e.persistence??{}};e.cookieKey!==null?t.cookieKey=e.cookieKey||Y:t.cookieKey||(t.cookieKey=Y),ee(t)}const oe=n.computed(()=>ue(e.tabTransition)),ae=n.computed(()=>ue(e.pageTransition)),T=n.reactive({visible:!1,target:null,position:{x:0,y:0}}),W=n.ref(null),x=n.ref([]),I=n.ref(-1),l=n.reactive({dragging:!1,dragIndex:-1,dropIndex:-1,dragTab:null}),b=["refresh","refreshAll","close","closeLefts","closeRights","closeOthers"];function m(t){return i.tabs.findIndex(r=>r.id===t)}function k(t){const r=m(t.id);return r>0?i.tabs.slice(0,r):[]}function C(t){const r=m(t.id);return r>-1?i.tabs.slice(r+1):[]}function P(t){return i.tabs.filter(r=>r.id!==t.id)}async function A(t,r){const f=t.filter(h=>h.closable!==!1);if(f.length){for(const h of f)i.activeId.value===h.id?await i.closeTab(h.id,{redirect:r.to,force:!0}):await i.removeTab(h.id,{force:!0});i.activeId.value!==r.id&&await i.openTab(r.to,!0,!1)}}const tt={refresh:{label:"Refresh",handler:async({target:t})=>{await i.refreshTab(t.id,!0)}},refreshAll:{label:"Refresh All",handler:async()=>{await i.refreshAll(!0)}},close:{label:"Close",handler:async({target:t})=>{await i.closeTab(t.id)},enable:({target:t})=>ie(t)},closeLefts:{label:"Close to the Left",handler:async({target:t})=>{await A(k(t),t)},enable:({target:t})=>k(t).some(r=>r.closable!==!1)},closeRights:{label:"Close to the Right",handler:async({target:t})=>{await A(C(t),t)},enable:({target:t})=>C(t).some(r=>r.closable!==!1)},closeOthers:{label:"Close Others",handler:async({target:t})=>{await A(P(t),t)},enable:({target:t})=>P(t).some(r=>r.closable!==!1)}};function B(){T.visible=!1,T.target=null,I.value=-1,x.value=[]}function nt(t,r){e.contextmenu&&(T.visible=!0,T.target=t,T.position.x=r.clientX,T.position.y=r.clientY,document.addEventListener("click",B,{once:!0}),n.nextTick(()=>{at()}))}function ot(t,r){const f=typeof t=="string"?{id:t}:t,h=tt[f.id],y=f.label??h?.label??String(f.id),u=f.visible??h?.visible??!0;if(!(typeof u=="function"?u(r):u!==!1))return null;const le=f.enable??h?.enable??!0,kt=typeof le=="function"?le(r):le!==!1,Ce=f.handler??h?.handler;if(!Ce)return null;const vt=async()=>{await Promise.resolve(Ce(r))};return{id:String(f.id),label:y,disabled:!kt,action:vt}}const U=n.computed(()=>{if(!T.visible||!T.target||e.contextmenu===!1)return[];const t=Array.isArray(e.contextmenu)?e.contextmenu:b,r={target:T.target,controller:i};return t.map(f=>ot(f,r)).filter(f=>!!f)});function at(){const t=W.value;if(!t)return;const r=8,{innerWidth:f,innerHeight:h}=window,y=t.getBoundingClientRect();let u=T.position.x,L=T.position.y;y.right>f-r&&(u=Math.max(r,f-y.width-r)),y.bottom>h-r&&(L=Math.max(r,h-y.height-r)),(u!==T.position.x||L!==T.position.y)&&(T.position.x=u,T.position.y=L)}function rt(t,r){x.value[r]=t??null}function it(t){if(t<0)return;x.value[t]?.focus({preventScroll:!0})}function q(t,r,f=U.value){if(!f.length)return-1;const h=f.length;let y=t;for(let u=0;u<h;u++)if(y=(y+r+h)%h,!f[y].disabled)return y;return-1}function z(t){I.value=t,!(t<0)&&n.nextTick(()=>it(t))}function Te(t){const r=q(I.value,t);r!==-1&&z(r)}function lt(t){if(!T.visible)return;const r=t.key,f=U.value;if(!f.length)return;if(r==="Tab"){B();return}if(["ArrowDown","ArrowUp","ArrowRight","ArrowLeft","Home","End","Enter"," ","Spacebar","Escape"].includes(r))switch(t.preventDefault(),r){case"ArrowDown":case"ArrowRight":Te(1);break;case"ArrowUp":case"ArrowLeft":Te(-1);break;case"Home":z(q(-1,1));break;case"End":z(q(f.length,-1));break;case"Enter":case" ":case"Spacebar":{const y=I.value;if(y>-1){const u=f[y];u.disabled||ke(u)}break}case"Escape":B();break}}async function ke(t){t.disabled||(B(),await t.action())}function re(t){return typeof t.title=="string"&&t.title.trim()?t.title:Array.isArray(t.title)&&t.title.length&&String(t.title[0]).trim()?String(t.title[0]):"Untitled"}function st(t){return g.value[t.id]||re(t)}function ve(t){const r=i.getRouteKey(t),h=i.tabs.find(y=>y.id===r)?.renderKey??0;return`${r}::${h}`}function ct(t){return`${ve(t)}::refresh`}function ie(t){return!(t.closable===!1||i.options.keepLastTab&&i.tabs.length<=1)}async function ut(t){await i.closeTab(t.id)}function dt(t){if(t.href&&typeof window<"u"){t.target&&t.target!=="_self"?window.open(t.href,t.target):window.location.assign(t.href);return}i.activeId.value!==t.id&&i.openTab(t.to,!1)}function ft(t){return["router-tab__item",{"is-active":i.activeId.value===t.id,"is-closable":ie(t),"is-dragging":l.dragging&&l.dragTab?.id===t.id,"is-drag-over":l.dropIndex===m(t.id)},t.tabClass]}function bt(t){return i.refreshingKey.value===i.getRouteKey(t)}function mt(t,r,f){e.sortable&&(l.dragging=!0,l.dragIndex=r,l.dragTab=t,f.dataTransfer&&(f.dataTransfer.effectAllowed="move",f.dataTransfer.setData("text/plain",t.id)),o("tab-sort",{tab:t,index:r}))}function pt(t,r){!e.sortable||!l.dragging||(r.preventDefault(),r.dataTransfer&&(r.dataTransfer.dropEffect="move"))}function gt(t){!e.sortable||!l.dragging||(l.dropIndex=t)}function ht(){!e.sortable||l.dragging}function yt(t,r){if(!(!e.sortable||!l.dragging)){if(r.preventDefault(),l.dragIndex!==-1&&l.dragIndex!==t){const f=i.tabs.splice(l.dragIndex,1)[0];i.tabs.splice(t,0,f),o("tab-sorted",{tab:f,fromIndex:l.dragIndex,toIndex:t})}we()}}function we(){l.dragging=!1,l.dragIndex=-1,l.dropIndex=-1,l.dragTab=null}n.onMounted(()=>{document.addEventListener("keydown",B)}),n.onBeforeUnmount(()=>{document.removeEventListener("keydown",B),a.appContext.config.globalProperties.$tabs=null,S.forEach(t=>{t.forEach(r=>r())}),S.clear(),K.clear()}),n.watch(()=>e.keepAlive,t=>{i.options.keepAlive=t}),n.watch(()=>i.activeId.value,()=>B()),n.watch(()=>e.contextmenu,t=>{t||B()}),n.watch(()=>U.value.length,t=>{T.visible&&t===0&&B()}),n.watch(U,t=>{if(x.value=new Array(t.length).fill(null),!T.visible)return;const r=q(-1,1,t);z(r)}),n.watch(()=>T.visible,t=>{t||(I.value=-1,x.value=[])});const Tt=i.includeKeys;return{controller:i,tabs:i.tabs,includeKeys:Tt,tabTransitionProps:oe,pageTransitionProps:ae,buildTabClass:ft,activate:dt,close:ut,context:T,menuItems:U,handleMenuAction:ke,showContextMenu:nt,hideContextMenu:B,getTabTitle:re,isClosable:ie,isRefreshing:bt,hasCustomSlot:p,hasStartSlot:v,hasEndSlot:c,onDragStart:mt,onDragOver:pt,onDragEnter:gt,onDragLeave:ht,onDrop:yt,onDragEnd:we,setupComponentWatching:j,cleanupComponentWatching:O,handleComponentRef:M,getReactiveTabTitle:st,getComponentCacheKey:ve,getRefreshComponentKey:ct,triggerTabUpdate:E,menuRef:W,highlightedIndex:I,setMenuItemRef:rt,onMenuKeydown:lt,highlightMenuIndex:z}}}),Me=(e,o)=>{const a=e.__vccOpts||e;for(const[s,i]of o)a[s]=i;return a},Le={class:"router-tab"},Ve={class:"router-tab__header"},Ne={class:"router-tab__scroll"},je=["data-title","draggable","onClick","onAuxclick","onContextmenu","onDragstart","onDragover","onDragenter","onDrop"],Oe=["title"],Ue=["onClick"],ze={class:"router-tab__container"},_e=["aria-disabled","disabled","tabindex","onMouseenter","onClick"];function Ye(e,o,a,s,i,p){const v=n.resolveComponent("RouterView");return n.openBlock(),n.createElementBlock("div",Le,[n.createElementVNode("header",Ve,[n.createElementVNode("div",{class:n.normalizeClass(["router-tab__slot-start",{"has-content":e.hasStartSlot}])},[n.renderSlot(e.$slots,"start")],2),n.createElementVNode("div",Ne,[n.createVNode(n.TransitionGroup,n.mergeProps({tag:"ul",class:"router-tab__nav"},e.tabTransitionProps),{default:n.withCtx(()=>[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(e.tabs,(c,d)=>(n.openBlock(),n.createElementBlock("li",{key:c.id,class:n.normalizeClass(e.buildTabClass(c)),"data-title":e.getTabTitle(c),draggable:e.sortable,onClick:g=>e.activate(c),onAuxclick:n.withModifiers(g=>e.close(c),["middle","prevent"]),onContextmenu:n.withModifiers(g=>e.showContextMenu(c,g),["prevent"]),onDragstart:g=>e.onDragStart(c,d,g),onDragover:g=>e.onDragOver(d,g),onDragenter:g=>e.onDragEnter(d),onDragleave:o[0]||(o[0]=(...g)=>e.onDragLeave&&e.onDragLeave(...g)),onDrop:g=>e.onDrop(d,g),onDragend:o[1]||(o[1]=(...g)=>e.onDragEnd&&e.onDragEnd(...g))},[c.icon?(n.openBlock(),n.createElementBlock("i",{key:0,class:n.normalizeClass(["router-tab__item-icon",c.icon])},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",{class:"router-tab__item-title",title:e.getReactiveTabTitle(c)},n.toDisplayString(e.getReactiveTabTitle(c)),9,Oe),e.isClosable(c)?(n.openBlock(),n.createElementBlock("a",{key:1,class:"router-tab__item-close",onClick:n.withModifiers(g=>e.close(c),["stop"])},null,8,Ue)):n.createCommentVNode("",!0)],42,je))),128))]),_:1},16)]),n.createElementVNode("div",{class:n.normalizeClass(["router-tab__slot-end",{"has-content":e.hasEndSlot}])},[n.renderSlot(e.$slots,"end")],2)]),n.createElementVNode("div",ze,[n.createVNode(v,null,{default:n.withCtx(c=>[e.hasCustomSlot?n.renderSlot(e.$slots,"default",n.normalizeProps(n.mergeProps({key:0},{...c,controller:e.controller,pageRef:d=>e.handleComponentRef(d,e.controller.getRouteKey(c.route))}))):(n.openBlock(),n.createElementBlock(n.Fragment,{key:1},[n.createVNode(n.Transition,n.mergeProps(e.pageTransitionProps,{appear:""}),{default:n.withCtx(()=>[e.controller.options.keepAlive?(n.openBlock(),n.createBlock(n.KeepAlive,{key:0,include:e.includeKeys,max:e.controller.options.maxAlive||void 0},[e.isRefreshing(c.route)?n.createCommentVNode("",!0):(n.openBlock(),n.createBlock(n.resolveDynamicComponent(c.Component),{key:e.getComponentCacheKey(c.route),ref:d=>e.handleComponentRef(d,e.controller.getRouteKey(c.route)),class:"router-tab-page"}))],1032,["include","max"])):n.createCommentVNode("",!0)]),_:2},1040),n.createVNode(n.Transition,n.mergeProps(e.pageTransitionProps,{appear:""}),{default:n.withCtx(()=>[!e.controller.options.keepAlive||e.isRefreshing(c.route)?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(c.Component),{key:e.getRefreshComponentKey(c.route),ref:d=>e.handleComponentRef(d,e.controller.getRouteKey(c.route)),class:"router-tab-page"})):n.createCommentVNode("",!0)]),_:2},1040)],64))]),_:3})]),e.context.visible&&e.context.target?(n.openBlock(),n.createElementBlock("div",{key:0,ref:"menuRef",class:"router-tab__contextmenu",role:"menu",onKeydown:o[2]||(o[2]=(...c)=>e.onMenuKeydown&&e.onMenuKeydown(...c)),style:n.normalizeStyle({left:e.context.position.x+"px",top:e.context.position.y+"px"})},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(e.menuItems,(c,d)=>(n.openBlock(),n.createElementBlock("a",{key:c.id,role:"menuitem",class:n.normalizeClass(["router-tab__contextmenu-item",{"is-focused":d===e.highlightedIndex}]),"aria-disabled":c.disabled,disabled:c.disabled,tabindex:c.disabled?-1:d===e.highlightedIndex?0:-1,ref_for:!0,ref:g=>e.setMenuItemRef(g,d),onMouseenter:g=>!c.disabled&&e.highlightMenuIndex(d),onClick:g=>e.handleMenuAction(c)},n.toDisplayString(c.label),43,_e))),128))],36)):n.createCommentVNode("",!0)])}const te=Me($e,[["render",Ye]]),Fe={class:"router-tabs","aria-hidden":"true"},F=n.defineComponent({name:"RouterTabs",__name:"RouterTabs",props:{cookieKey:{},expiresInDays:{},path:{},domain:{},secure:{type:Boolean},sameSite:{},serialize:{type:Function},deserialize:{type:Function},fallbackRoute:{}},setup(e){return ee(e),(a,s)=>(n.openBlock(),n.createElementBlock("span",Fe))}}),be="tab-theme-style",me="tab-theme-primary-color",He="system",pe="(prefers-color-scheme: dark)";let N=null;const R={primary:"#034960",background:"#ffffff",text:"#1e293b",border:"#e2e8f0",activeBackground:"#034960",activeText:"#ffffff",activeBorder:"#034960",headerBackground:"#ffffff",buttonBackground:"#f8fafc",buttonColor:"#034960",activeButtonBackground:"#034960",activeButtonColor:"#ffffff",iconColor:"#475569"},Je={primary:"#38bdf8",background:"#0f172a",text:"#f1f5f9",border:"#334155",activeBackground:"#1e293b",activeText:"#38bdf8",activeBorder:"#38bdf8",headerBackground:"#0c4a6e",buttonBackground:"#1e293b",buttonColor:"#f1f5f9",activeButtonBackground:"#38bdf8",activeButtonColor:"#0f172a",iconColor:"#cbd5e1"};function We(e){if(typeof window>"u")return null;const o=window.localStorage.getItem(e);if(!o)return null;try{const a=JSON.parse(o);return a&&typeof a=="object"?a:null}catch{return null}}function ne(e){typeof document>"u"||(document.documentElement.style.setProperty("--router-tab-primary",e.primary??R.primary),document.documentElement.style.setProperty("--router-tab-header-bg",e.headerBackground??R.headerBackground),document.documentElement.style.setProperty("--router-tab-background",e.background??R.background),document.documentElement.style.setProperty("--router-tab-active-background",e.activeBackground??R.activeBackground),document.documentElement.style.setProperty("--router-tab-text",e.text??R.text),document.documentElement.style.setProperty("--router-tab-active-text",e.activeText??R.activeText),document.documentElement.style.setProperty("--router-tab-border",e.border??R.border),document.documentElement.style.setProperty("--router-tab-active-border",e.activeBorder??R.activeBorder),document.documentElement.style.setProperty("--router-tab-button-color",e.buttonColor??R.buttonColor),document.documentElement.style.setProperty("--router-tab-active-button-color",e.activeButtonColor??R.activeButtonColor),document.documentElement.style.setProperty("--router-tab-button-background",e.buttonBackground??R.buttonBackground),document.documentElement.style.setProperty("--router-tab-active-button-background",e.activeButtonBackground??R.activeButtonBackground),document.documentElement.style.setProperty("--router-tab-icon-color",e.iconColor??R.iconColor))}function ge(e){if(typeof document>"u")return;const o=document.documentElement,a=window.matchMedia(pe),s=()=>{o.dataset.theme=a.matches?"dark":"light"};N&&(a.removeEventListener("change",N),N=null),e==="system"?(s(),N=()=>s(),a.addEventListener("change",N)):o.dataset.theme=e}function he(e={}){if(typeof window>"u")return;const{styleKey:o=be,primaryKey:a=me,defaultStyle:s=He,defaultPrimary:i}=e,p=window.localStorage.getItem(o)??s;ge(p);const c=p==="dark"||p==="system"&&window.matchMedia(pe).matches?{...Je}:{...R};i&&(c.primary=i);const d=We(a);ne(d?{...c,...d}:c)}function qe(e,o){if(typeof window>"u")return;const a=o?.styleKey??be;window.localStorage.setItem(a,e),ge(e)}function Ge(e,o){if(typeof window>"u")return;const a=o?.primaryKey??me;window.localStorage.setItem(a,JSON.stringify(e)),ne(e)}function H(e,o){if(n.isRef(e)){const s=!n.isReadonly(e);return{value:e,update:s?i=>{e.value=i}:()=>{}}}if(typeof e=="function"){const s=e;return{value:n.computed(s),update:()=>{}}}const a=n.ref(e===void 0?o:e);return{value:a,update:s=>{a.value=s}}}function J(e={}){const o=H(e.title,"Untitled"),a=H(e.icon,""),s=H(e.closable,!0),i=H(e.meta,{});return{routeTabTitle:o.value,routeTabIcon:a.value,routeTabClosable:s.value,routeTabMeta:i.value,updateTitle:o.update,updateIcon:a.update,updateClosable:s.update,updateMeta:i.update}}function Xe(e,o="Page"){return J({title:n.computed(()=>e.value?"Loading...":o),icon:n.computed(()=>e.value?"mdi-loading mdi-spin":"mdi-page"),closable:n.computed(()=>!e.value)})}function Qe(e,o="Page",a="mdi-page"){return J({title:n.computed(()=>e.value>0?`${o} (${e.value})`:o),icon:n.computed(()=>e.value>0?"mdi-bell-badge":a)})}function Ze(e,o="Page"){const a={normal:{suffix:"",icon:"mdi-page"},loading:{suffix:" - Loading",icon:"mdi-loading mdi-spin"},error:{suffix:" - Error",icon:"mdi-alert"},success:{suffix:" - Success",icon:"mdi-check-circle"}};return J({title:n.computed(()=>o+a[e.value].suffix),icon:n.computed(()=>a[e.value].icon),closable:n.computed(()=>e.value!=="loading")})}let ye=!1;const et={install(e,o){if(ye)return;ye=!0;const{initTheme:a=!0,themeOptions:s,componentName:i=te.name||"RouterTab",tabsComponentName:p=F.name||"RouterTabs"}=o??{};a&&he(s??{}),e.component(i,te),e.component(p,F),p.toLowerCase()!=="router-tabs"&&e.component("router-tabs",F),Object.defineProperty(e.config.globalProperties,"$tabs",{configurable:!0,enumerable:!1,get(){return e._context.provides[V]},set(v){v&&e.provide(V,v)}})}};w.RouterTab=te,w.RouterTabs=F,w.default=et,w.initRouterTabsTheme=he,w.routerTabsKey=V,w.setRouterTabsPrimary=Ge,w.setRouterTabsTheme=qe,w.useLoadingTab=Xe,w.useNotificationTab=Qe,w.useReactiveTab=J,w.useRouterTabs=Z,w.useRouterTabsPersistence=ee,w.useStatusTab=Ze,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(w,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router"],n):(w=typeof globalThis<"u"?globalThis:w||self,n(w["vue3-router-tab"]={},w.Vue,w.VueRouter))})(this,(function(w,n,Re){"use strict";function Ee(e={}){return{initialTabs:e.initialTabs??[],keepAlive:e.keepAlive??!0,maxAlive:e.maxAlive??0,keepLastTab:e.keepLastTab??!0,appendPosition:e.appendPosition??"last",defaultRoute:e.defaultRoute??"/"}}function D(e,o){const a=e.resolve(o);if(!a||!a.matched.length)throw new Error(`[RouterTabs] Unable to resolve route: ${String(o)}`);return a}const Pe={path:e=>e.path,fullpath:e=>e.fullPath,fullname:e=>e.fullPath,full:e=>e.fullPath,name:e=>e.name?String(e.name):e.fullPath};function $(e){const o=e.meta?.key;if(typeof o=="function"){const a=o(e);if(typeof a=="string"&&a.length)return a}else if(typeof o=="string"&&o.length){const a=Pe[o.toLowerCase()];return a?a(e):o}return e.fullPath}function G(e,o){const a=e.meta?.keepAlive;return typeof a=="boolean"?a:o}function X(e,o){const a=e.meta?.reuse;return typeof a=="boolean"?a:o}function se(e){const o=e.meta??{},a={};return"title"in o&&(a.title=o.title),"tips"in o&&(a.tips=o.tips),"icon"in o&&(a.icon=o.icon),"closable"in o&&(a.closable=o.closable),"tabClass"in o&&(a.tabClass=o.tabClass),"target"in o&&(a.target=o.target),"href"in o&&(a.href=o.href),a}function _(e,o,a){const s=se(e);return{id:$(e),to:e.fullPath,fullPath:e.fullPath,matched:e,alive:G(e,a),reusable:X(e,!1),closable:s.closable??!0,renderKey:typeof o.renderKey=="number"?o.renderKey:0,...s,...o}}function Q(e,o,a,s){if(!e.find(p=>p.id===o.id)){if(a==="next"&&s){const p=e.findIndex(v=>v.id===s);if(p!==-1){e.splice(p+1,0,o);return}}e.push(o)}}function ce(e,o,a){if(!o||o<=0)return;const s=e.filter(i=>i.alive);for(;s.length>o;){const i=s.shift();if(!i||i.id===a)continue;const p=e.findIndex(v=>v.id===i.id);p>-1&&(e[p].alive=!1)}}function Be(e){return{to:e.to,title:e.title,tips:e.tips,icon:e.icon,tabClass:e.tabClass,closable:e.closable,renderKey:e.renderKey}}function Ae(e){const o={};return"title"in e&&(o.title=e.title),"tips"in e&&(o.tips=e.tips),"icon"in e&&(o.icon=e.icon),"tabClass"in e&&(o.tabClass=e.tabClass),"closable"in e&&(o.closable=e.closable),"renderKey"in e&&typeof e.renderKey=="number"&&(o.renderKey=e.renderKey),o}function Ke(e,o={}){const a=Ee(o),s=n.reactive([]),i=n.ref(null),p=n.shallowRef(),v=n.ref(null),c=n.computed(()=>s.filter(l=>l.alive).map(l=>`${l.id}::${l.renderKey??0}`));let d=!1;function g(l){const m=typeof l.matched=="object"?l:D(e,l);return{key:$(m),fullPath:m.fullPath,alive:G(m,a.keepAlive),reusable:X(m,!1),matched:m}}function E(l){const m=$(l);let b=s.find(k=>k.id===m);return b?(b.fullPath=l.fullPath,b.to=l.fullPath,b.matched=l,b.alive=G(l,a.keepAlive),b.reusable=X(l,b.reusable),typeof b.renderKey!="number"&&(b.renderKey=0),Object.assign(b,se(l)),b):(b=_(l,{},a.keepAlive),Q(s,b,a.appendPosition,i.value),ce(s,a.maxAlive,i.value),b)}async function K(l,m=!1,b=!0){const k=D(e,l),C=$(k),P=i.value===C;b==="sameTab"&&(b=P),b&&await M(C,!0),await e[m?"replace":"push"](k),P&&await T()}function S(l){const m=s.findIndex(A=>A.id===l);if(m===-1)return a.defaultRoute;const b=s[m+1],k=s[m-1],C=s.find(A=>A.id!==l),P=b||k||C;return P?P.to:a.defaultRoute}async function j(l=i.value,m={}){if(!l)return;if(!m.force&&a.keepLastTab&&s.length===1)throw new Error("[RouterTabs] Unable to close the final tab when keepLastTab is true.");const k=i.value===l&&m.redirect!==null,C=k?m.redirect??S(l):null;await O(l,{force:m.force}),m.redirect!==null&&k&&C&&await e.replace(C)}async function O(l,m={}){const b=s.findIndex(k=>k.id===l);b!==-1&&(s.splice(b,1),v.value===l&&(v.value=null),i.value===l&&(i.value=null,p.value=void 0))}async function M(l=i.value??void 0,m=!1){if(!l)return;const b=s.find(C=>C.id===l);if(!b)return;const k=a.keepAlive&&b.alive;k&&(b.alive=!1,await n.nextTick()),b.renderKey=(b.renderKey??0)+1,k&&(b.alive=!0),v.value=l,await n.nextTick(),await n.nextTick(),v.value=null}async function oe(l=!1){for(const m of s)await M(m.id,l)}async function ae(l=a.defaultRoute){s.splice(0,s.length),i.value=null,p.value=void 0;for(const m of a.initialTabs){const b=D(e,m.to),k=_(b,m,a.keepAlive);s.push(k)}await e.replace(l)}async function T(){const l=i.value;l&&await M(l,!0)}function W(l){return typeof l.matched=="object"?$(l):$(D(e,l))}function x(){const l=s.find(m=>m.id===i.value);return{tabs:s.map(Be),active:l?l.to:null}}async function I(l){d=!0,s.splice(0,s.length),i.value=null,p.value=void 0;const m=l?.tabs??[];for(const k of m)try{const C=D(e,k.to),P=Ae(k),A=_(C,P,a.keepAlive);Q(s,A,"last",null)}catch{}d=!1;const b=l?.active??m[m.length-1]?.to??a.defaultRoute;if(b)try{await e.replace(b)}catch{}}return n.watch(()=>e.currentRoute.value,l=>{if(d)return;const m=E(l);i.value=m.id,p.value=m,ce(s,a.maxAlive,i.value)},{immediate:!0}),a.initialTabs.length&&a.initialTabs.forEach(l=>{const m=D(e,l.to),b=_(m,l,a.keepAlive);Q(s,b,"last",null)}),{options:a,tabs:s,activeId:i,current:p,includeKeys:c,refreshingKey:v,openTab:K,closeTab:j,removeTab:O,refreshTab:M,refreshAll:oe,reset:ae,reload:T,getRouteKey:W,matchRoute:g,snapshot:x,hydrate:I}}function ue(e){return e?typeof e=="string"?{name:e}:e:{}}const V=Symbol("RouterTabsContext"),Y="router-tabs:snapshot";function Z(e={}){const{optional:o=!1}=e,a=n.inject(V,null);if(a)return a;const s=n.inject("$tabs",null);if(s)return s;const p=n.getCurrentInstance()?.appContext.config.globalProperties.$tabs;if(p)return p;if(!o)throw new Error("[RouterTabs] useRouterTabs must be used within <router-tab>.");return null}const Ie=864e5;function Se(e){if(typeof document>"u")return null;const o=`${encodeURIComponent(e)}=`,a=document.cookie?document.cookie.split("; "):[];for(const s of a)if(s.startsWith(o))return decodeURIComponent(s.slice(o.length));return null}function de(e,o,a){if(typeof document>"u")return;const{expiresInDays:s=7,path:i="/",domain:p,secure:v,sameSite:c="lax"}=a,d=[`${encodeURIComponent(e)}=${encodeURIComponent(o)}`];if(s!==1/0){const g=new Date(Date.now()+s*Ie).toUTCString();d.push(`Expires=${g}`)}i&&d.push(`Path=${i}`),p&&d.push(`Domain=${p}`),v&&d.push("Secure"),c&&d.push(`SameSite=${c.charAt(0).toUpperCase()}${c.slice(1)}`),document.cookie=d.join("; ")}function fe(e,o){if(typeof document>"u")return;const{path:a="/",domain:s}=o,i=[`${encodeURIComponent(e)}=`];i.push("Expires=Thu, 01 Jan 1970 00:00:01 GMT"),a&&i.push(`Path=${a}`),s&&i.push(`Domain=${s}`),document.cookie=i.join("; ")}const xe=e=>JSON.stringify(e??null),De=e=>{if(!e)return null;try{return JSON.parse(e)}catch{return null}};function ee(e={}){const{cookieKey:o=Y,serialize:a=xe,deserialize:s=De}=e,i=Z({optional:!0}),p=n.ref(!0),v=c=>{n.onMounted(async()=>{const d=s(Se(o));if(d&&d.tabs?.length)try{if(p.value=!0,await c.hydrate(d),d.active){await n.nextTick();const E=c.tabs.find(K=>K.to===d.active);E&&(c.activeId.value=E.id,c.current.value=E)}}finally{p.value=!1}else if(Object.prototype.hasOwnProperty.call(e,"fallbackRoute"))try{p.value=!0;const E=e.fallbackRoute??c.options.defaultRoute;await c.reset(E)}finally{p.value=!1}else p.value=!1;const g=c.snapshot();g.tabs.length?de(o,a(g),e):fe(o,e),p.value=!1}),n.watch(()=>({tabs:c.tabs.map(d=>({to:d.to,title:d.title,tips:d.tips,icon:d.icon,tabClass:d.tabClass,closable:d.closable,renderKey:d.renderKey})),active:c.activeId.value}),()=>{if(p.value)return;const d=c.snapshot();d.tabs.length?de(o,a(d),e):fe(o,e)},{deep:!0})};i?v(i):n.onMounted(()=>{const c=Z({optional:!0});c&&v(c)})}const $e=n.defineComponent({name:"RouterTab",components:{RouterView:Re.RouterView},props:{tabs:{type:Array,default:()=>[]},keepAlive:{type:Boolean,default:!0},maxAlive:{type:Number,default:0},keepLastTab:{type:Boolean,default:!0},append:{type:String,default:"last"},defaultPage:{type:[String,Object],default:"/"},tabTransition:{type:[String,Object],default:"router-tab-zoom"},pageTransition:{type:[String,Object],default:()=>({name:"router-tab-swap",mode:"out-in"})},contextmenu:{type:[Boolean,Array],default:!0},cookieKey:{type:String,default:Y},persistence:{type:Object,default:null},sortable:{type:Boolean,default:!0}},emits:["tab-sort","tab-sorted"],setup(e,{emit:o}){const a=n.getCurrentInstance();if(!a)throw new Error("[RouterTab] component must be used within a Vue application context.");const s=a.appContext.app.config.globalProperties.$router;if(!s)throw new Error("[RouterTab] Vue Router is required. Make sure to call app.use(router) before RouterTab.");const i=Ke(s,{initialTabs:e.tabs,keepAlive:e.keepAlive,maxAlive:e.maxAlive,keepLastTab:e.keepLastTab,appendPosition:e.append,defaultRoute:e.defaultPage});n.provide(V,i),a.appContext.config.globalProperties.$tabs=i;const p=n.computed(()=>!!a?.slots?.default),v=n.computed(()=>!!a?.slots?.start),c=n.computed(()=>!!a?.slots?.end),d=n.ref(0),g=n.computed(()=>{d.value;const t={};return i.tabs.forEach(r=>{const f=typeof r.title=="string"?r.title:String(r.title||re(r));t[r.id]=f}),t});function E(){d.value++}const K=new Map,S=new Map;function j(t,r){if(!r||K.has(t))return;K.set(t,r);const f=i.tabs.find(y=>i.getRouteKey(y.to)===t);if(!f)return;const h=[];if(r.routeTabTitle!==void 0){const y=n.watch(()=>{const u=r.routeTabTitle;return u&&typeof u=="object"&&"value"in u?u.value:u},u=>{if(u!=null){const L=String(u);f.title=L,E()}},{immediate:!0});h.push(y)}if(r.routeTabIcon!==void 0){const y=n.watch(()=>{const u=r.routeTabIcon;return u&&typeof u=="object"&&"value"in u?u.value:u},u=>{u!=null&&(f.icon=String(u),E())},{immediate:!0});h.push(y)}if(r.routeTabClosable!==void 0){const y=n.watch(()=>{const u=r.routeTabClosable;return u&&typeof u=="object"&&"value"in u?u.value:u},u=>{u!=null&&(f.closable=!!u,E())},{immediate:!0});h.push(y)}if(r.routeTabMeta!==void 0){const y=n.watch(()=>{const u=r.routeTabMeta;return u&&typeof u=="object"&&"value"in u?u.value:u},u=>{u&&typeof u=="object"&&(Object.assign(f,u),E())},{immediate:!0,deep:!0});h.push(y)}S.set(t,h)}function O(t){const r=S.get(t);r&&(r.forEach(f=>f()),S.delete(t)),K.delete(t)}function M(t,r){t?t.routeTabTitle!==void 0||t.routeTabIcon!==void 0||t.routeTabClosable!==void 0?j(r,t):t.$&&(t.$.routeTabTitle!==void 0||t.$.routeTabIcon!==void 0||t.$.routeTabClosable!==void 0)&&j(r,t.$):t===null&&O(r)}if(e.cookieKey!==null||e.persistence){const t={...e.persistence??{}};e.cookieKey!==null?t.cookieKey=e.cookieKey||Y:t.cookieKey||(t.cookieKey=Y),ee(t)}const oe=n.computed(()=>ue(e.tabTransition)),ae=n.computed(()=>ue(e.pageTransition)),T=n.reactive({visible:!1,target:null,position:{x:0,y:0}}),W=n.ref(null),x=n.ref([]),I=n.ref(-1),l=n.reactive({dragging:!1,dragIndex:-1,dropIndex:-1,dragTab:null}),m=["refresh","refreshAll","close","closeLefts","closeRights","closeOthers"];function b(t){return i.tabs.findIndex(r=>r.id===t)}function k(t){const r=b(t.id);return r>0?i.tabs.slice(0,r):[]}function C(t){const r=b(t.id);return r>-1?i.tabs.slice(r+1):[]}function P(t){return i.tabs.filter(r=>r.id!==t.id)}async function A(t,r){const f=t.filter(h=>h.closable!==!1);if(f.length){for(const h of f)i.activeId.value===h.id?await i.closeTab(h.id,{redirect:r.to,force:!0}):await i.removeTab(h.id,{force:!0});i.activeId.value!==r.id&&await i.openTab(r.to,!0,!1)}}const tt={refresh:{label:"Refresh",handler:async({target:t})=>{await i.refreshTab(t.id,!0)}},refreshAll:{label:"Refresh All",handler:async()=>{await i.refreshAll(!0)}},close:{label:"Close",handler:async({target:t})=>{await i.closeTab(t.id)},enable:({target:t})=>ie(t)},closeLefts:{label:"Close to the Left",handler:async({target:t})=>{await A(k(t),t)},enable:({target:t})=>k(t).some(r=>r.closable!==!1)},closeRights:{label:"Close to the Right",handler:async({target:t})=>{await A(C(t),t)},enable:({target:t})=>C(t).some(r=>r.closable!==!1)},closeOthers:{label:"Close Others",handler:async({target:t})=>{await A(P(t),t)},enable:({target:t})=>P(t).some(r=>r.closable!==!1)}};function B(){T.visible=!1,T.target=null,I.value=-1,x.value=[]}function nt(t,r){e.contextmenu&&(T.visible=!0,T.target=t,T.position.x=r.clientX,T.position.y=r.clientY,document.addEventListener("click",B,{once:!0}),n.nextTick(()=>{at()}))}function ot(t,r){const f=typeof t=="string"?{id:t}:t,h=tt[f.id],y=f.label??h?.label??String(f.id),u=f.visible??h?.visible??!0;if(!(typeof u=="function"?u(r):u!==!1))return null;const le=f.enable??h?.enable??!0,kt=typeof le=="function"?le(r):le!==!1,Ce=f.handler??h?.handler;if(!Ce)return null;const vt=async()=>{await Promise.resolve(Ce(r))};return{id:String(f.id),label:y,disabled:!kt,action:vt}}const U=n.computed(()=>{if(!T.visible||!T.target||e.contextmenu===!1)return[];const t=Array.isArray(e.contextmenu)?e.contextmenu:m,r={target:T.target,controller:i};return t.map(f=>ot(f,r)).filter(f=>!!f)});function at(){const t=W.value;if(!t)return;const r=8,{innerWidth:f,innerHeight:h}=window,y=t.getBoundingClientRect();let u=T.position.x,L=T.position.y;y.right>f-r&&(u=Math.max(r,f-y.width-r)),y.bottom>h-r&&(L=Math.max(r,h-y.height-r)),(u!==T.position.x||L!==T.position.y)&&(T.position.x=u,T.position.y=L)}function rt(t,r){x.value[r]=t??null}function it(t){if(t<0)return;x.value[t]?.focus({preventScroll:!0})}function q(t,r,f=U.value){if(!f.length)return-1;const h=f.length;let y=t;for(let u=0;u<h;u++)if(y=(y+r+h)%h,!f[y].disabled)return y;return-1}function z(t){I.value=t,!(t<0)&&n.nextTick(()=>it(t))}function Te(t){const r=q(I.value,t);r!==-1&&z(r)}function lt(t){if(!T.visible)return;const r=t.key,f=U.value;if(!f.length)return;if(r==="Tab"){B();return}if(["ArrowDown","ArrowUp","ArrowRight","ArrowLeft","Home","End","Enter"," ","Spacebar","Escape"].includes(r))switch(t.preventDefault(),r){case"ArrowDown":case"ArrowRight":Te(1);break;case"ArrowUp":case"ArrowLeft":Te(-1);break;case"Home":z(q(-1,1));break;case"End":z(q(f.length,-1));break;case"Enter":case" ":case"Spacebar":{const y=I.value;if(y>-1){const u=f[y];u.disabled||ke(u)}break}case"Escape":B();break}}async function ke(t){t.disabled||(B(),await t.action())}function re(t){return typeof t.title=="string"&&t.title.trim()?t.title:Array.isArray(t.title)&&t.title.length&&String(t.title[0]).trim()?String(t.title[0]):"Untitled"}function st(t){return g.value[t.id]||re(t)}function ve(t){const r=i.getRouteKey(t),h=i.tabs.find(y=>y.id===r)?.renderKey??0;return`${r}::${h}`}function ct(t){return`${ve(t)}::refresh`}function ie(t){return!(t.closable===!1||i.options.keepLastTab&&i.tabs.length<=1)}async function ut(t){await i.closeTab(t.id)}function dt(t){if(t.href&&typeof window<"u"){t.target&&t.target!=="_self"?window.open(t.href,t.target):window.location.assign(t.href);return}i.activeId.value!==t.id&&i.openTab(t.to,!1)}function ft(t){return["router-tab__item",{"is-active":i.activeId.value===t.id,"is-closable":ie(t),"is-dragging":l.dragging&&l.dragTab?.id===t.id,"is-drag-over":l.dropIndex===b(t.id)},t.tabClass]}function bt(t){return i.refreshingKey.value===i.getRouteKey(t)}function mt(t,r,f){e.sortable&&(l.dragging=!0,l.dragIndex=r,l.dragTab=t,f.dataTransfer&&(f.dataTransfer.effectAllowed="move",f.dataTransfer.setData("text/plain",t.id)),o("tab-sort",{tab:t,index:r}))}function pt(t,r){!e.sortable||!l.dragging||(r.preventDefault(),r.dataTransfer&&(r.dataTransfer.dropEffect="move"))}function gt(t){!e.sortable||!l.dragging||(l.dropIndex=t)}function ht(){!e.sortable||l.dragging}function yt(t,r){if(!(!e.sortable||!l.dragging)){if(r.preventDefault(),l.dragIndex!==-1&&l.dragIndex!==t){const f=i.tabs.splice(l.dragIndex,1)[0];i.tabs.splice(t,0,f),o("tab-sorted",{tab:f,fromIndex:l.dragIndex,toIndex:t})}we()}}function we(){l.dragging=!1,l.dragIndex=-1,l.dropIndex=-1,l.dragTab=null}n.onMounted(()=>{document.addEventListener("keydown",B)}),n.onBeforeUnmount(()=>{document.removeEventListener("keydown",B),a.appContext.config.globalProperties.$tabs=null,S.forEach(t=>{t.forEach(r=>r())}),S.clear(),K.clear()}),n.watch(()=>e.keepAlive,t=>{i.options.keepAlive=t}),n.watch(()=>i.activeId.value,()=>B()),n.watch(()=>e.contextmenu,t=>{t||B()}),n.watch(()=>U.value.length,t=>{T.visible&&t===0&&B()}),n.watch(U,t=>{if(x.value=new Array(t.length).fill(null),!T.visible)return;const r=q(-1,1,t);z(r)}),n.watch(()=>T.visible,t=>{t||(I.value=-1,x.value=[])});const Tt=i.includeKeys;return{controller:i,tabs:i.tabs,includeKeys:Tt,tabTransitionProps:oe,pageTransitionProps:ae,buildTabClass:ft,activate:dt,close:ut,context:T,menuItems:U,handleMenuAction:ke,showContextMenu:nt,hideContextMenu:B,getTabTitle:re,isClosable:ie,isRefreshing:bt,hasCustomSlot:p,hasStartSlot:v,hasEndSlot:c,onDragStart:mt,onDragOver:pt,onDragEnter:gt,onDragLeave:ht,onDrop:yt,onDragEnd:we,setupComponentWatching:j,cleanupComponentWatching:O,handleComponentRef:M,getReactiveTabTitle:st,getComponentCacheKey:ve,getRefreshComponentKey:ct,triggerTabUpdate:E,menuRef:W,highlightedIndex:I,setMenuItemRef:rt,onMenuKeydown:lt,highlightMenuIndex:z}}}),Me=(e,o)=>{const a=e.__vccOpts||e;for(const[s,i]of o)a[s]=i;return a},Le={class:"router-tab"},Ve={class:"router-tab__header"},Ne={class:"router-tab__scroll"},je=["data-title","draggable","onClick","onAuxclick","onContextmenu","onDragstart","onDragover","onDragenter","onDrop"],Oe=["title"],Ue=["onClick"],ze={class:"router-tab__container"},_e=["aria-disabled","disabled","tabindex","onMouseenter","onClick"];function Ye(e,o,a,s,i,p){const v=n.resolveComponent("RouterView");return n.openBlock(),n.createElementBlock("div",Le,[n.createElementVNode("header",Ve,[n.createElementVNode("div",{class:n.normalizeClass(["router-tab__slot-start",{"has-content":e.hasStartSlot}])},[n.renderSlot(e.$slots,"start")],2),n.createElementVNode("div",Ne,[n.createVNode(n.TransitionGroup,n.mergeProps({tag:"ul",class:"router-tab__nav"},e.tabTransitionProps),{default:n.withCtx(()=>[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(e.tabs,(c,d)=>(n.openBlock(),n.createElementBlock("li",{key:c.id,class:n.normalizeClass(e.buildTabClass(c)),"data-title":e.getTabTitle(c),draggable:e.sortable,onClick:g=>e.activate(c),onAuxclick:n.withModifiers(g=>e.close(c),["middle","prevent"]),onContextmenu:n.withModifiers(g=>e.showContextMenu(c,g),["prevent"]),onDragstart:g=>e.onDragStart(c,d,g),onDragover:g=>e.onDragOver(d,g),onDragenter:g=>e.onDragEnter(d),onDragleave:o[0]||(o[0]=(...g)=>e.onDragLeave&&e.onDragLeave(...g)),onDrop:g=>e.onDrop(d,g),onDragend:o[1]||(o[1]=(...g)=>e.onDragEnd&&e.onDragEnd(...g))},[c.icon?(n.openBlock(),n.createElementBlock("i",{key:0,class:n.normalizeClass(["router-tab__item-icon",c.icon])},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",{class:"router-tab__item-title",title:e.getReactiveTabTitle(c)},n.toDisplayString(e.getReactiveTabTitle(c)),9,Oe),e.isClosable(c)?(n.openBlock(),n.createElementBlock("a",{key:1,class:"router-tab__item-close",onClick:n.withModifiers(g=>e.close(c),["stop"])},null,8,Ue)):n.createCommentVNode("",!0)],42,je))),128))]),_:1},16)]),n.createElementVNode("div",{class:n.normalizeClass(["router-tab__slot-end",{"has-content":e.hasEndSlot}])},[n.renderSlot(e.$slots,"end")],2)]),n.createElementVNode("div",ze,[n.createVNode(v,null,{default:n.withCtx(c=>[e.hasCustomSlot?n.renderSlot(e.$slots,"default",n.normalizeProps(n.mergeProps({key:0},{...c,controller:e.controller,pageRef:d=>e.handleComponentRef(d,e.controller.getRouteKey(c.route))}))):(n.openBlock(),n.createElementBlock(n.Fragment,{key:1},[n.createVNode(n.Transition,n.mergeProps(e.pageTransitionProps,{appear:""}),{default:n.withCtx(()=>[e.controller.options.keepAlive?(n.openBlock(),n.createBlock(n.KeepAlive,{key:0,include:e.includeKeys,max:e.controller.options.maxAlive||void 0},[e.isRefreshing(c.route)?n.createCommentVNode("",!0):(n.openBlock(),n.createBlock(n.resolveDynamicComponent(c.Component),{key:e.getComponentCacheKey(c.route),ref:d=>e.handleComponentRef(d,e.controller.getRouteKey(c.route)),class:"router-tab-page"}))],1032,["include","max"])):n.createCommentVNode("",!0)]),_:2},1040),n.createVNode(n.Transition,n.mergeProps(e.pageTransitionProps,{appear:""}),{default:n.withCtx(()=>[!e.controller.options.keepAlive||e.isRefreshing(c.route)?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(c.Component),{key:e.getRefreshComponentKey(c.route),ref:d=>e.handleComponentRef(d,e.controller.getRouteKey(c.route)),class:"router-tab-page"})):n.createCommentVNode("",!0)]),_:2},1040)],64))]),_:3})]),e.context.visible&&e.context.target?(n.openBlock(),n.createElementBlock("div",{key:0,ref:"menuRef",class:"router-tab__contextmenu",role:"menu",onKeydown:o[2]||(o[2]=(...c)=>e.onMenuKeydown&&e.onMenuKeydown(...c)),style:n.normalizeStyle({left:e.context.position.x+"px",top:e.context.position.y+"px"})},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(e.menuItems,(c,d)=>(n.openBlock(),n.createElementBlock("a",{key:c.id,role:"menuitem",class:n.normalizeClass(["router-tab__contextmenu-item",{"is-focused":d===e.highlightedIndex}]),"aria-disabled":c.disabled,disabled:c.disabled,tabindex:c.disabled?-1:d===e.highlightedIndex?0:-1,ref_for:!0,ref:g=>e.setMenuItemRef(g,d),onMouseenter:g=>!c.disabled&&e.highlightMenuIndex(d),onClick:g=>e.handleMenuAction(c)},n.toDisplayString(c.label),43,_e))),128))],36)):n.createCommentVNode("",!0)])}const te=Me($e,[["render",Ye]]),Fe={class:"router-tabs","aria-hidden":"true"},F=n.defineComponent({name:"RouterTabs",__name:"RouterTabs",props:{cookieKey:{},expiresInDays:{},path:{},domain:{},secure:{type:Boolean},sameSite:{},serialize:{type:Function},deserialize:{type:Function},fallbackRoute:{}},setup(e){return ee(e),(a,s)=>(n.openBlock(),n.createElementBlock("span",Fe))}}),be="tab-theme-style",me="tab-theme-primary-color",He="system",pe="(prefers-color-scheme: dark)";let N=null;const R={primary:"#034960",background:"#ffffff",text:"#1e293b",border:"#e2e8f0",activeBackground:"#034960",activeText:"#ffffff",activeBorder:"#034960",headerBackground:"#ffffff",buttonBackground:"#f8fafc",buttonColor:"#034960",activeButtonBackground:"#034960",activeButtonColor:"#ffffff",iconColor:"#475569"},Je={primary:"#38bdf8",background:"#0f172a",text:"#f1f5f9",border:"#334155",activeBackground:"#1e293b",activeText:"#38bdf8",activeBorder:"#38bdf8",headerBackground:"#0c4a6e",buttonBackground:"#1e293b",buttonColor:"#f1f5f9",activeButtonBackground:"#38bdf8",activeButtonColor:"#0f172a",iconColor:"#cbd5e1"};function We(e){if(typeof window>"u")return null;const o=window.localStorage.getItem(e);if(!o)return null;try{const a=JSON.parse(o);return a&&typeof a=="object"?a:null}catch{return null}}function ne(e){typeof document>"u"||(document.documentElement.style.setProperty("--router-tab-primary",e.primary??R.primary),document.documentElement.style.setProperty("--router-tab-header-bg",e.headerBackground??R.headerBackground),document.documentElement.style.setProperty("--router-tab-background",e.background??R.background),document.documentElement.style.setProperty("--router-tab-active-background",e.activeBackground??R.activeBackground),document.documentElement.style.setProperty("--router-tab-text",e.text??R.text),document.documentElement.style.setProperty("--router-tab-active-text",e.activeText??R.activeText),document.documentElement.style.setProperty("--router-tab-border",e.border??R.border),document.documentElement.style.setProperty("--router-tab-active-border",e.activeBorder??R.activeBorder),document.documentElement.style.setProperty("--router-tab-button-color",e.buttonColor??R.buttonColor),document.documentElement.style.setProperty("--router-tab-active-button-color",e.activeButtonColor??R.activeButtonColor),document.documentElement.style.setProperty("--router-tab-button-background",e.buttonBackground??R.buttonBackground),document.documentElement.style.setProperty("--router-tab-active-button-background",e.activeButtonBackground??R.activeButtonBackground),document.documentElement.style.setProperty("--router-tab-icon-color",e.iconColor??R.iconColor))}function ge(e){if(typeof document>"u")return;const o=document.documentElement,a=window.matchMedia(pe),s=()=>{o.dataset.theme=a.matches?"dark":"light"};N&&(a.removeEventListener("change",N),N=null),e==="system"?(s(),N=()=>s(),a.addEventListener("change",N)):o.dataset.theme=e}function he(e={}){if(typeof window>"u")return;const{styleKey:o=be,primaryKey:a=me,defaultStyle:s=He,defaultPrimary:i}=e,p=window.localStorage.getItem(o)??s;ge(p);const c=p==="dark"||p==="system"&&window.matchMedia(pe).matches?{...Je}:{...R};i&&(c.primary=i);const d=We(a);ne(d?{...c,...d}:c)}function qe(e,o){if(typeof window>"u")return;const a=o?.styleKey??be;window.localStorage.setItem(a,e),ge(e)}function Ge(e,o){if(typeof window>"u")return;const a=o?.primaryKey??me;window.localStorage.setItem(a,JSON.stringify(e)),ne(e)}function H(e,o){if(n.isRef(e)){const s=!n.isReadonly(e);return{value:e,update:s?i=>{e.value=i}:()=>{}}}if(typeof e=="function"){const s=e;return{value:n.computed(s),update:()=>{}}}const a=n.ref(e===void 0?o:e);return{value:a,update:s=>{a.value=s}}}function J(e={}){const o=H(e.title,"Untitled"),a=H(e.icon,""),s=H(e.closable,!0),i=H(e.meta,{});return{routeTabTitle:o.value,routeTabIcon:a.value,routeTabClosable:s.value,routeTabMeta:i.value,updateTitle:o.update,updateIcon:a.update,updateClosable:s.update,updateMeta:i.update}}function Xe(e,o="Page"){return J({title:n.computed(()=>e.value?"Loading...":o),icon:n.computed(()=>e.value?"mdi-loading mdi-spin":"mdi-page"),closable:n.computed(()=>!e.value)})}function Qe(e,o="Page",a="mdi-page"){return J({title:n.computed(()=>e.value>0?`${o} (${e.value})`:o),icon:n.computed(()=>e.value>0?"mdi-bell-badge":a)})}function Ze(e,o="Page"){const a={normal:{suffix:"",icon:"mdi-page"},loading:{suffix:" - Loading",icon:"mdi-loading mdi-spin"},error:{suffix:" - Error",icon:"mdi-alert"},success:{suffix:" - Success",icon:"mdi-check-circle"}};return J({title:n.computed(()=>o+a[e.value].suffix),icon:n.computed(()=>a[e.value].icon),closable:n.computed(()=>e.value!=="loading")})}let ye=!1;const et={install(e,o){if(ye)return;ye=!0;const{initTheme:a=!0,themeOptions:s,componentName:i=te.name||"RouterTab",tabsComponentName:p=F.name||"RouterTabs"}=o??{};a&&he(s??{}),e.component(i,te),e.component(p,F),p.toLowerCase()!=="router-tabs"&&e.component("router-tabs",F),Object.defineProperty(e.config.globalProperties,"$tabs",{configurable:!0,enumerable:!1,get(){return e._context.provides[V]},set(v){v&&e.provide(V,v)}})}};w.RouterTab=te,w.RouterTabs=F,w.default=et,w.initRouterTabsTheme=he,w.routerTabsKey=V,w.setRouterTabsPrimary=Ge,w.setRouterTabsTheme=qe,w.useLoadingTab=Xe,w.useNotificationTab=Qe,w.useReactiveTab=J,w.useRouterTabs=Z,w.useRouterTabsPersistence=ee,w.useStatusTab=Ze,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/lib/core/createRouterTabs.ts

@@ -166,7 +166,7 @@ export function createRouterTabs(
   const includeKeys = computed(() =>
     tabs
       .filter(tab => tab.alive)
-      .map(tab => `${tab.id}::${tab.renderKey}`)
+      .map(tab => `${tab.id}::${tab.renderKey ?? 0}`)
   )
 
   let isHydrating = false
@@ -196,6 +196,10 @@ export function createRouterTabs(
       tab.matched = route
       tab.alive = resolveAlive(route, options.keepAlive)
       tab.reusable = resolveReusable(route, tab.reusable)
+      // Ensure renderKey is initialized
+      if (typeof tab.renderKey !== 'number') {
+        tab.renderKey = 0
+      }
       Object.assign(tab, pickMeta(route))
       return tab
     }
@@ -290,12 +294,16 @@ export function createRouterTabs(
 
     if (wasAlive) {
       tab.alive = true
-      await nextTick()
     }
 
+    // Set refreshing state to unmount old component
     refreshingKey.value = id
     await nextTick()
-    if (!force) await nextTick()
+    
+    // Wait for component to unmount and new one to mount
+    await nextTick()
+    
+    // Clear refreshing state
     refreshingKey.value = null
   }
 

package/lib/scss/index.scss

@@ -344,8 +344,8 @@
 .router-tab-swap-leave-active {
   position: relative;
   transition:
-    opacity 0.5s ease,
-    transform 0.5s ease;
+    opacity 0.3s ease,
+    transform 0.3s ease;
   will-change: opacity, transform;
 }
 
@@ -378,8 +378,8 @@
 .router-tab-slide-leave-active {
   position: relative;
   transition:
-    opacity 0.5s ease,
-    transform 0.5s ease;
+    opacity 0.3s ease,
+    transform 0.3s ease;
   will-change: opacity, transform;
 }
 
@@ -405,12 +405,12 @@
 
 // Fade transition - smooth fade in and out
 .router-tab-fade-enter-active {
-  transition: opacity 0.8s ease-in;
+  transition: opacity 0.4s ease-in;
   will-change: opacity;
 }
 
 .router-tab-fade-leave-active {
-  transition: opacity 0.6s ease-out;
+  transition: opacity 0.3s ease-out;
   will-change: opacity;
 }
 
@@ -435,8 +435,8 @@
 .router-tab-scale-leave-active {
   position: relative;
   transition:
-    opacity 0.6s ease,
-    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+    opacity 0.35s ease,
+    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
   will-change: opacity, transform;
 }
 
@@ -465,8 +465,8 @@
 .router-tab-flip-leave-active {
   position: relative;
   transition:
-    opacity 0.6s ease,
-    transform 0.6s ease;
+    opacity 0.35s ease,
+    transform 0.35s ease;
   transform-style: preserve-3d;
   will-change: opacity, transform;
 }
@@ -496,8 +496,8 @@
 .router-tab-rotate-leave-active {
   position: relative;
   transition:
-    opacity 0.6s ease,
-    transform 0.6s ease;
+    opacity 0.20s ease,
+    transform 0.20s ease;
   will-change: opacity, transform;
 }
 
@@ -523,11 +523,11 @@
 
 // Bounce transition - elastic bounce effect
 .router-tab-bounce-enter-active {
-  animation: router-tab-bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  animation: router-tab-bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }
 
 .router-tab-bounce-leave-active {
-  animation: router-tab-bounce-out 0.5s ease-in;
+  animation: router-tab-bounce-out 0.3s ease-in;
 }
 
 @keyframes router-tab-bounce-in {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-router-tab",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "type": "module",
   "files": [
     "dist",