vue3-router-tab 1.3.2 → 1.3.3

package/dist/vue3-router-tab.js

@@ -1,5 +1,5 @@
 import './vue3-router-tab.css';
-import { reactive as be, ref as $, shallowRef as dt, computed as k, watch as A, nextTick as j, inject as Re, getCurrentInstance as je, onMounted as pe, defineComponent as Oe, provide as bt, onBeforeUnmount as pt, resolveComponent as gt, createElementBlock as S, openBlock as P, createElementVNode as L, withDirectives as mt, normalizeClass as H, renderSlot as re, createVNode as Pe, TransitionGroup as vt, mergeProps as le, withCtx as se, Fragment as Ae, renderList as Ke, withModifiers as ue, createCommentVNode as Ee, toDisplayString as Ie, createBlock as J, normalizeProps as yt, Transition as ht, resolveDynamicComponent as ce, KeepAlive as Tt, normalizeStyle as kt, vShow as wt, isRef as Ct, isReadonly as Rt } from "vue";
+import { reactive as me, ref as S, shallowRef as bt, computed as k, watch as P, nextTick as j, inject as Pe, getCurrentInstance as je, onMounted as ge, defineComponent as Oe, provide as pt, onBeforeUnmount as mt, resolveComponent as gt, createElementBlock as x, openBlock as C, createElementVNode as L, withDirectives as vt, normalizeClass as H, renderSlot as re, createVNode as Ae, TransitionGroup as yt, mergeProps as le, withCtx as se, Fragment as ue, renderList as Ee, withModifiers as ce, createCommentVNode as fe, toDisplayString as Ie, createBlock as J, normalizeProps as ht, Transition as Tt, resolveDynamicComponent as de, KeepAlive as kt, normalizeStyle as wt, vShow as Ct, isRef as Rt, isReadonly as Kt } from "vue";
 import { RouterView as Pt } from "vue-router";
 function At(e = {}) {
   return {
@@ -17,7 +17,7 @@ function V(e, n) {
     throw new Error(`[RouterTabs] Unable to resolve route: ${String(n)}`);
   return o;
 }
-const Kt = {
+const Et = {
   path: (e) => e.path,
   fullpath: (e) => e.fullPath,
   fullname: (e) => e.fullPath,
@@ -30,16 +30,16 @@ function N(e) {
     const o = n(e);
     if (typeof o == "string" && o.length) return o;
   } else if (typeof n == "string" && n.length) {
-    const o = Kt[n.toLowerCase()];
+    const o = Et[n.toLowerCase()];
     return o ? o(e) : n;
   }
   return e.fullPath;
 }
-function ge(e, n) {
+function ve(e, n) {
   const o = e.meta?.keepAlive;
   return typeof o == "boolean" ? o : n;
 }
-function me(e, n) {
+function ye(e, n) {
   const o = e.meta?.reuse;
   return typeof o == "boolean" ? o : n;
 }
@@ -54,15 +54,15 @@ function q(e, n, o) {
     to: e.fullPath,
     fullPath: e.fullPath,
     matched: e,
-    alive: ge(e, o),
-    reusable: me(e, !1),
+    alive: ve(e, o),
+    reusable: ye(e, !1),
     closable: l.closable ?? !0,
     renderKey: typeof n.renderKey == "number" ? n.renderKey : 0,
     ...l,
     ...n
   };
 }
-function fe(e, n, o, l) {
+function be(e, n, o, l) {
   if (!e.find((p) => p.id === n.id)) {
     if (o === "next" && l) {
       const p = e.findIndex((T) => T.id === l);
@@ -84,7 +84,7 @@ function xe(e, n, o) {
     p > -1 && (e[p].alive = !1);
   }
 }
-function Et(e) {
+function It(e) {
   return {
     to: e.to,
     title: e.title,
@@ -95,39 +95,39 @@ function Et(e) {
     renderKey: e.renderKey
   };
 }
-function It(e) {
+function xt(e) {
   const n = {};
   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 xt(e, n = {}) {
-  const o = At(n), l = be([]), i = $(null), p = dt(), T = $(null), s = k(
+function $t(e, n = {}) {
+  const o = At(n), l = me([]), i = S(null), p = bt(), T = S(null), s = k(
     () => l.filter((r) => r.alive).map((r) => `${r.id}::${r.renderKey ?? 0}`)
   );
   let c = !1;
-  function g(r) {
+  function m(r) {
     const b = typeof r.matched == "object" ? r : V(e, r);
     return {
       key: N(b),
       fullPath: b.fullPath,
-      alive: ge(b, o.keepAlive),
-      reusable: me(b, !1),
+      alive: ve(b, o.keepAlive),
+      reusable: ye(b, !1),
       matched: b
     };
   }
-  function R(r) {
+  function K(r) {
     const b = N(r);
     let d = l.find((h) => h.id === b);
-    return d ? (d.fullPath = r.fullPath, d.to = r.fullPath, d.matched = r, d.alive = ge(r, o.keepAlive), d.reusable = me(r, d.reusable), typeof d.renderKey != "number" && (d.renderKey = 0), Object.assign(d, Ue(r)), d) : (d = q(r, {}, o.keepAlive), fe(l, d, o.appendPosition, i.value), xe(l, o.maxAlive, i.value), d);
+    return d ? (d.fullPath = r.fullPath, d.to = r.fullPath, d.matched = r, d.alive = ve(r, o.keepAlive), d.reusable = ye(r, d.reusable), typeof d.renderKey != "number" && (d.renderKey = 0), Object.assign(d, Ue(r)), d) : (d = q(r, {}, o.keepAlive), be(l, d, o.appendPosition, i.value), xe(l, o.maxAlive, i.value), d);
   }
-  async function x(r, b = !1, d = !0) {
-    const h = V(e, r), w = N(h), K = i.value === w;
-    d === "sameTab" && (d = K), d && await O(w, !0), await e[b ? "replace" : "push"](h), K && await y();
+  async function $(r, b = !1, d = !0) {
+    const h = V(e, r), w = N(h), A = i.value === w;
+    d === "sameTab" && (d = A), d && await O(w, !0), await e[b ? "replace" : "push"](h), A && await y();
   }
   function B(r) {
     const b = l.findIndex((I) => I.id === r);
     if (b === -1) return o.defaultRoute;
-    const d = l[b + 1], h = l[b - 1], w = l.find((I) => I.id !== r), K = d || h || w;
-    return K ? K.to : o.defaultRoute;
+    const d = l[b + 1], h = l[b - 1], w = l.find((I) => I.id !== r), A = d || h || w;
+    return A ? A.to : o.defaultRoute;
   }
   async function z(r = i.value, b = {}) {
     if (!r) return;
@@ -169,7 +169,7 @@ function xt(e, n = {}) {
   function M() {
     const r = l.find((b) => b.id === i.value);
     return {
-      tabs: l.map(Et),
+      tabs: l.map(It),
       active: r ? r.to : null
     };
   }
@@ -178,8 +178,8 @@ function xt(e, n = {}) {
     const b = r?.tabs ?? [];
     for (const h of b)
       try {
-        const w = V(e, h.to), K = It(h), I = q(w, K, o.keepAlive);
-        fe(l, I, "last", null);
+        const w = V(e, h.to), A = xt(h), I = q(w, A, o.keepAlive);
+        be(l, I, "last", null);
       } catch {
       }
     c = !1;
@@ -190,17 +190,17 @@ function xt(e, n = {}) {
       } catch {
       }
   }
-  return A(
+  return P(
     () => e.currentRoute.value,
     (r) => {
       if (c) return;
-      const b = R(r);
+      const b = K(r);
       i.value = b.id, p.value = b, xe(l, o.maxAlive, i.value);
     },
     { immediate: !0 }
   ), o.initialTabs.length && o.initialTabs.forEach((r) => {
     const b = V(e, r.to), d = q(b, r, o.keepAlive);
-    fe(l, d, "last", null);
+    be(l, d, "last", null);
   }), {
     options: o,
     tabs: l,
@@ -208,7 +208,7 @@ function xt(e, n = {}) {
     current: p,
     includeKeys: s,
     refreshingKey: T,
-    openTab: x,
+    openTab: $,
     closeTab: z,
     removeTab: _,
     refreshTab: O,
@@ -216,19 +216,19 @@ function xt(e, n = {}) {
     reset: ne,
     reload: y,
     getRouteKey: G,
-    matchRoute: g,
+    matchRoute: m,
     snapshot: M,
     hydrate: D
   };
 }
-function De(e) {
+function $e(e) {
   return e ? typeof e == "string" ? { name: e } : e : {};
 }
 const ee = Symbol("RouterTabsContext"), Z = "router-tabs:snapshot";
-function Se(e = {}) {
-  const { optional: n = !1 } = e, o = Re(ee, null);
+function De(e = {}) {
+  const { optional: n = !1 } = e, o = Pe(ee, null);
   if (o) return o;
-  const l = Re("$tabs", null);
+  const l = Pe("$tabs", null);
   if (l) return l;
   const p = je()?.appContext.config.globalProperties.$tabs;
   if (p) return p;
@@ -245,7 +245,7 @@ function St(e) {
       return decodeURIComponent(l.slice(n.length));
   return null;
 }
-function $e(e, n, o) {
+function Se(e, n, o) {
   if (typeof document > "u") return;
   const {
     expiresInDays: l = 7,
@@ -255,8 +255,8 @@ function $e(e, n, o) {
     sameSite: s = "lax"
   } = o, c = [`${encodeURIComponent(e)}=${encodeURIComponent(n)}`];
   if (l !== 1 / 0) {
-    const g = new Date(Date.now() + l * Dt).toUTCString();
-    c.push(`Expires=${g}`);
+    const m = new Date(Date.now() + l * Dt).toUTCString();
+    c.push(`Expires=${m}`);
   }
   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("; ");
 }
@@ -265,7 +265,7 @@ function Be(e, n) {
   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 $t = (e) => JSON.stringify(e ?? null), Bt = (e) => {
+const Bt = (e) => JSON.stringify(e ?? null), Mt = (e) => {
   if (!e) return null;
   try {
     return JSON.parse(e);
@@ -276,17 +276,17 @@ const $t = (e) => JSON.stringify(e ?? null), Bt = (e) => {
 function Ve(e = {}) {
   const {
     cookieKey: n = Z,
-    serialize: o = $t,
-    deserialize: l = Bt
-  } = e, i = Se({ optional: !0 }), p = $(!0), T = (s) => {
-    pe(async () => {
+    serialize: o = Bt,
+    deserialize: l = Mt
+  } = e, i = De({ optional: !0 }), p = S(!0), T = (s) => {
+    ge(async () => {
       const c = l(St(n));
       if (c && c.tabs?.length)
         try {
           if (p.value = !0, await s.hydrate(c), c.active) {
             await j();
-            const R = s.tabs.find((x) => x.to === c.active);
-            R && (s.activeId.value = R.id, s.current.value = R);
+            const K = s.tabs.find(($) => $.to === c.active);
+            K && (s.activeId.value = K.id, s.current.value = K);
           }
         } finally {
           p.value = !1;
@@ -294,16 +294,16 @@ function Ve(e = {}) {
       else if (Object.prototype.hasOwnProperty.call(e, "fallbackRoute"))
         try {
           p.value = !0;
-          const R = e.fallbackRoute ?? s.options.defaultRoute;
-          await s.reset(R);
+          const K = e.fallbackRoute ?? s.options.defaultRoute;
+          await s.reset(K);
         } finally {
           p.value = !1;
         }
       else
         p.value = !1;
-      const g = s.snapshot();
-      g.tabs.length ? $e(n, o(g), e) : Be(n, e), p.value = !1;
-    }), A(
+      const m = s.snapshot();
+      m.tabs.length ? Se(n, o(m), e) : Be(n, e), p.value = !1;
+    }), P(
       () => ({
         tabs: s.tabs.map((c) => ({
           to: c.to,
@@ -319,17 +319,17 @@ function Ve(e = {}) {
       () => {
         if (p.value) return;
         const c = s.snapshot();
-        c.tabs.length ? $e(n, o(c), e) : Be(n, e);
+        c.tabs.length ? Se(n, o(c), e) : Be(n, e);
       },
       { deep: !0 }
     );
   };
-  i ? T(i) : pe(() => {
-    const s = Se({ optional: !0 });
+  i ? T(i) : ge(() => {
+    const s = De({ optional: !0 });
     s && T(s);
   });
 }
-const Mt = Oe({
+const Lt = Oe({
   name: "RouterTab",
   components: { RouterView: Pt },
   props: {
@@ -390,7 +390,7 @@ const Mt = Oe({
     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 = xt(l, {
+    const i = $t(l, {
       initialTabs: e.tabs,
       keepAlive: e.keepAlive,
       maxAlive: e.maxAlive,
@@ -398,8 +398,8 @@ const Mt = Oe({
       appendPosition: e.append,
       defaultRoute: e.defaultPage
     });
-    bt(ee, i), o.appContext.config.globalProperties.$tabs = i;
-    const p = k(() => !!o?.slots?.default), T = k(() => !!o?.slots?.start), s = k(() => !!o?.slots?.end), c = $(0), g = k(() => {
+    pt(ee, i), o.appContext.config.globalProperties.$tabs = i;
+    const p = k(() => !!o?.slots?.default), T = k(() => !!o?.slots?.start), s = k(() => !!o?.slots?.end), c = S(0), m = k(() => {
       c.value;
       const t = {};
       return i.tabs.forEach((a) => {
@@ -407,18 +407,18 @@ const Mt = Oe({
         t[a.id] = f;
       }), t;
     });
-    function R() {
+    function K() {
       c.value++;
     }
-    const x = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map();
+    const $ = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map();
     function z(t, a) {
-      if (!a || x.has(t)) return;
-      x.set(t, a);
+      if (!a || $.has(t)) return;
+      $.set(t, a);
       const f = i.tabs.find((v) => i.getRouteKey(v.to) === t);
       if (!f) return;
-      const m = [];
+      const g = [];
       if (a.routeTabTitle !== void 0) {
-        const v = A(
+        const v = P(
           () => {
             const u = a.routeTabTitle;
             return u && typeof u == "object" && "value" in u ? u.value : u;
@@ -426,57 +426,57 @@ const Mt = Oe({
           (u) => {
             if (u != null) {
               const U = String(u);
-              f.title = U, R();
+              f.title = U, K();
             }
           },
           { immediate: !0 }
         );
-        m.push(v);
+        g.push(v);
       }
       if (a.routeTabIcon !== void 0) {
-        const v = A(
+        const v = P(
           () => {
             const u = a.routeTabIcon;
             return u && typeof u == "object" && "value" in u ? u.value : u;
           },
           (u) => {
-            u != null && (f.icon = String(u), R());
+            u != null && (f.icon = String(u), K());
           },
           { immediate: !0 }
         );
-        m.push(v);
+        g.push(v);
       }
       if (a.routeTabClosable !== void 0) {
-        const v = A(
+        const v = P(
           () => {
             const u = a.routeTabClosable;
             return u && typeof u == "object" && "value" in u ? u.value : u;
           },
           (u) => {
-            u != null && (f.closable = !!u, R());
+            u != null && (f.closable = !!u, K());
           },
           { immediate: !0 }
         );
-        m.push(v);
+        g.push(v);
       }
       if (a.routeTabMeta !== void 0) {
-        const v = A(
+        const v = P(
           () => {
             const u = a.routeTabMeta;
             return u && typeof u == "object" && "value" in u ? u.value : u;
           },
           (u) => {
-            u && typeof u == "object" && (Object.assign(f, u), R());
+            u && typeof u == "object" && (Object.assign(f, u), K());
           },
           { immediate: !0, deep: !0 }
         );
-        m.push(v);
+        g.push(v);
       }
-      B.set(t, m);
+      B.set(t, g);
     }
     function _(t) {
       const a = B.get(t);
-      a && (a.forEach((f) => f()), B.delete(t)), x.delete(t);
+      a && (a.forEach((f) => f()), B.delete(t)), $.delete(t);
     }
     function O(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 && _(a);
@@ -487,11 +487,11 @@ const Mt = Oe({
       };
       e.cookieKey !== null ? t.cookieKey = e.cookieKey || Z : t.cookieKey || (t.cookieKey = Z), Ve(t);
     }
-    const te = k(() => De(e.tabTransition)), ne = k(() => De(e.pageTransition)), y = be({
+    const te = k(() => $e(e.tabTransition)), ne = k(() => $e(e.pageTransition)), y = me({
       visible: !1,
       target: null,
       position: { x: 0, y: 0 }
-    }), G = $(null), M = $([]), D = $(-1), r = be({
+    }), G = S(null), M = S([]), D = S(-1), r = me({
       dragging: !1,
       dragIndex: -1,
       dropIndex: -1,
@@ -515,14 +515,14 @@ const Mt = Oe({
       const a = d(t.id);
       return a > -1 ? i.tabs.slice(a + 1) : [];
     }
-    function K(t) {
+    function A(t) {
       return i.tabs.filter((a) => a.id !== t.id);
     }
     async function I(t, a) {
-      const f = t.filter((m) => m.closable !== !1);
+      const f = t.filter((g) => g.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 });
+        for (const g of f)
+          i.activeId.value === g.id ? await i.closeTab(g.id, { redirect: a.to, force: !0 }) : await i.removeTab(g.id, { force: !0 });
         i.activeId.value !== a.id && await i.openTab(a.to, !0, !1);
       }
     }
@@ -563,9 +563,9 @@ const Mt = Oe({
       closeOthers: {
         label: "Close Others",
         handler: async ({ target: t }) => {
-          await I(K(t), t);
+          await I(A(t), t);
         },
-        enable: ({ target: t }) => K(t).some((a) => a.closable !== !1)
+        enable: ({ target: t }) => A(t).some((a) => a.closable !== !1)
       }
     };
     function E() {
@@ -579,18 +579,18 @@ const Mt = Oe({
       }));
     }
     function Je(t, a) {
-      const f = typeof t == "string" ? { id: t } : t, m = Fe[f.id], v = f.label ?? m?.label ?? String(f.id), u = f.visible ?? m?.visible ?? !0;
+      const f = typeof t == "string" ? { id: t } : t, g = Fe[f.id], v = f.label ?? g?.label ?? String(f.id), u = f.visible ?? g?.visible ?? !0;
       if (!(typeof u == "function" ? u(a) : u !== !1)) return null;
-      const ie = f.enable ?? m?.enable ?? !0, ct = typeof ie == "function" ? ie(a) : ie !== !1, Ce = f.handler ?? m?.handler;
-      if (!Ce) return null;
-      const ft = async () => {
-        await Promise.resolve(Ce(a));
+      const ie = f.enable ?? g?.enable ?? !0, ft = typeof ie == "function" ? ie(a) : ie !== !1, Ke = f.handler ?? g?.handler;
+      if (!Ke) return null;
+      const dt = async () => {
+        await Promise.resolve(Ke(a));
       };
       return {
         id: String(f.id),
         label: v,
-        disabled: !ct,
-        action: ft
+        disabled: !ft,
+        action: dt
       };
     }
     const Y = k(() => {
@@ -601,12 +601,13 @@ const Mt = Oe({
     function We() {
       const t = G.value;
       if (!t) return;
-      const a = 8, { innerWidth: f, innerHeight: m } = window, v = t.getBoundingClientRect();
+      const a = 8, { innerWidth: f, innerHeight: g } = window, v = t.getBoundingClientRect();
       let u = y.position.x, U = y.position.y;
-      v.right > f - a && (u = Math.max(a, f - v.width - a)), v.bottom > m - a && (U = Math.max(a, m - v.height - a)), (u !== y.position.x || U !== y.position.y) && (y.position.x = u, y.position.y = U);
+      v.right > f - a && (u = Math.max(a, f - v.width - a)), v.bottom > g - a && (U = Math.max(a, g - v.height - a)), (u !== y.position.x || U !== y.position.y) && (y.position.x = u, y.position.y = U);
     }
     function Ge(t, a) {
-      M.value[a] = t ?? null;
+      const f = t?.$el || t;
+      M.value[a] = f ?? null;
     }
     function Xe(t) {
       if (t < 0) return;
@@ -614,16 +615,16 @@ const Mt = Oe({
     }
     function X(t, a, f = Y.value) {
       if (!f.length) return -1;
-      const m = f.length;
+      const g = f.length;
       let v = t;
-      for (let u = 0; u < m; u++)
-        if (v = (v + a + m) % m, !f[v].disabled) return v;
+      for (let u = 0; u < g; u++)
+        if (v = (v + a + g) % g, !f[v].disabled) return v;
       return -1;
     }
     function F(t) {
       D.value = t, !(t < 0) && j(() => Xe(t));
     }
-    function he(t) {
+    function ke(t) {
       const a = X(D.value, t);
       a !== -1 && F(a);
     }
@@ -650,11 +651,11 @@ const Mt = Oe({
         switch (t.preventDefault(), a) {
           case "ArrowDown":
           case "ArrowRight":
-            he(1);
+            ke(1);
             break;
           case "ArrowUp":
           case "ArrowLeft":
-            he(-1);
+            ke(-1);
             break;
           case "Home":
             F(X(-1, 1));
@@ -668,7 +669,7 @@ const Mt = Oe({
             const v = D.value;
             if (v > -1) {
               const u = f[v];
-              u.disabled || Te(u);
+              u.disabled || we(u);
             }
             break;
           }
@@ -677,21 +678,24 @@ const Mt = Oe({
             break;
         }
     }
-    async function Te(t) {
+    async function we(t) {
       t.disabled || (E(), await t.action());
     }
     function oe(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 Qe(t) {
-      return g.value[t.id] || oe(t);
+      return m.value[t.id] || oe(t);
     }
-    function ke(t) {
-      const a = i.getRouteKey(t), m = i.tabs.find((v) => v.id === a)?.renderKey ?? 0;
-      return `${a}::${m}`;
+    function Ce(t) {
+      const a = i.getRouteKey(t), f = i.tabs.find((v) => v.id === a);
+      if (!f)
+        return console.warn(`[RouterTab] Tab not found for key: ${a}. This may cause rendering issues.`), `${a}::0`;
+      const g = f.renderKey ?? 0;
+      return `${a}::${g}`;
     }
     function Ze(t) {
-      return `${ke(t)}::refresh`;
+      return `${Ce(t)}::refresh`;
     }
     function ae(t) {
       return !(t.closable === !1 || i.options.keepLastTab && i.tabs.length <= 1);
@@ -721,19 +725,23 @@ const Mt = Oe({
     function ot(t) {
       return i.refreshingKey.value === i.getRouteKey(t);
     }
-    function at(t, a, f) {
+    function at(t) {
+      const a = i.getRouteKey(t);
+      return i.tabs.some((f) => f.id === a);
+    }
+    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 it(t, a) {
+    function rt(t, a) {
       !e.sortable || !r.dragging || (a.preventDefault(), a.dataTransfer && (a.dataTransfer.dropEffect = "move"));
     }
-    function rt(t) {
+    function lt(t) {
       !e.sortable || !r.dragging || (r.dropIndex = t);
     }
-    function lt() {
+    function st() {
       !e.sortable || r.dragging;
     }
-    function st(t, a) {
+    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];
@@ -743,54 +751,54 @@ const Mt = Oe({
             toIndex: t
           });
         }
-        we();
+        Re();
       }
     }
-    function we() {
+    function Re() {
       r.dragging = !1, r.dragIndex = -1, r.dropIndex = -1, r.dragTab = null;
     }
-    pe(() => {
+    ge(() => {
       document.addEventListener("keydown", E);
-    }), pt(() => {
+    }), mt(() => {
       document.removeEventListener("keydown", E), o.appContext.config.globalProperties.$tabs = null, B.forEach((t) => {
         t.forEach((a) => a());
-      }), B.clear(), x.clear();
-    }), A(
+      }), B.clear(), $.clear();
+    }), P(
       () => e.keepAlive,
       (t) => {
         i.options.keepAlive = t;
       }
-    ), A(
+    ), P(
       () => i.activeId.value,
       () => E()
-    ), A(
+    ), P(
       () => e.contextmenu,
       (t) => {
         t || E();
       }
-    ), A(
+    ), P(
       () => Y.value.length,
       (t) => {
         y.visible && t === 0 && E();
       },
       { flush: "post" }
       // Run after component updates to prevent blocking render
-    ), A(Y, (t) => {
+    ), P(Y, (t) => {
       if (!y.visible) return;
       M.value = new Array(t.length).fill(null);
       const a = X(-1, 1, t);
       F(a);
-    }, { flush: "post" }), A(
+    }, { flush: "post" }), P(
       () => y.visible,
       (t) => {
         t || (D.value = -1, M.value = []);
       }
     );
-    const ut = i.includeKeys;
+    const ct = i.includeKeys;
     return {
       controller: i,
       tabs: i.tabs,
-      includeKeys: ut,
+      includeKeys: ct,
       tabTransitionProps: te,
       pageTransitionProps: ne,
       buildTabClass: nt,
@@ -798,28 +806,29 @@ const Mt = Oe({
       close: et,
       context: y,
       menuItems: Y,
-      handleMenuAction: Te,
+      handleMenuAction: we,
       showContextMenu: He,
       hideContextMenu: E,
       getTabTitle: oe,
       isClosable: ae,
       isRefreshing: ot,
+      isTabReady: at,
       hasCustomSlot: p,
       hasStartSlot: T,
       hasEndSlot: s,
-      onDragStart: at,
-      onDragOver: it,
-      onDragEnter: rt,
-      onDragLeave: lt,
-      onDrop: st,
-      onDragEnd: we,
+      onDragStart: it,
+      onDragOver: rt,
+      onDragEnter: lt,
+      onDragLeave: st,
+      onDrop: ut,
+      onDragEnd: Re,
       setupComponentWatching: z,
       cleanupComponentWatching: _,
       handleComponentRef: O,
       getReactiveTabTitle: Qe,
-      getComponentCacheKey: ke,
+      getComponentCacheKey: Ce,
       getRefreshComponentKey: Ze,
-      triggerTabUpdate: R,
+      triggerTabUpdate: K,
       menuRef: G,
       highlightedIndex: D,
       setMenuItemRef: Ge,
@@ -827,56 +836,56 @@ const Mt = Oe({
       highlightMenuIndex: F
     };
   }
-}), Lt = (e, n) => {
+}), jt = (e, n) => {
   const o = e.__vccOpts || e;
   for (const [l, i] of n)
     o[l] = i;
   return o;
-}, jt = { class: "router-tab" }, Ot = { class: "router-tab__header" }, Ut = { class: "router-tab__scroll" }, Vt = ["data-title", "draggable", "onClick", "onAuxclick", "onContextmenu", "onDragstart", "onDragover", "onDragenter", "onDrop"], Nt = ["title"], zt = ["onClick"], _t = { class: "router-tab__container" }, Yt = ["aria-disabled", "disabled", "tabindex", "onMouseenter", "onClick"];
-function Ft(e, n, o, l, i, p) {
+}, Ot = { class: "router-tab" }, Ut = { class: "router-tab__header" }, Vt = { class: "router-tab__scroll" }, Nt = ["data-title", "draggable", "onClick", "onAuxclick", "onContextmenu", "onDragstart", "onDragover", "onDragenter", "onDrop"], zt = ["title"], _t = ["onClick"], Yt = { class: "router-tab__container" }, Ft = ["aria-disabled", "disabled", "tabindex", "onMouseenter", "onClick"];
+function Ht(e, n, o, l, i, p) {
   const T = gt("RouterView");
-  return P(), S("div", jt, [
-    L("header", Ot, [
+  return C(), x("div", Ot, [
+    L("header", Ut, [
       L("div", {
         class: H(["router-tab__slot-start", { "has-content": e.hasStartSlot }])
       }, [
         re(e.$slots, "start")
       ], 2),
-      L("div", Ut, [
-        Pe(vt, le({
+      L("div", Vt, [
+        Ae(yt, le({
           tag: "ul",
           class: "router-tab__nav"
         }, e.tabTransitionProps), {
           default: se(() => [
-            (P(!0), S(Ae, null, Ke(e.tabs, (s, c) => (P(), S("li", {
+            (C(!0), x(ue, null, Ee(e.tabs, (s, c) => (C(), x("li", {
               key: s.id,
               class: H(e.buildTabClass(s)),
               "data-title": e.getTabTitle(s),
               draggable: e.sortable,
-              onClick: (g) => e.activate(s),
-              onAuxclick: ue((g) => e.close(s), ["middle", "prevent"]),
-              onContextmenu: ue((g) => e.showContextMenu(s, g), ["prevent"]),
-              onDragstart: (g) => e.onDragStart(s, c, g),
-              onDragover: (g) => e.onDragOver(c, g),
-              onDragenter: (g) => e.onDragEnter(c),
-              onDragleave: n[0] || (n[0] = (...g) => e.onDragLeave && e.onDragLeave(...g)),
-              onDrop: (g) => e.onDrop(c, g),
-              onDragend: n[1] || (n[1] = (...g) => e.onDragEnd && e.onDragEnd(...g))
+              onClick: (m) => e.activate(s),
+              onAuxclick: ce((m) => e.close(s), ["middle", "prevent"]),
+              onContextmenu: ce((m) => e.showContextMenu(s, m), ["prevent"]),
+              onDragstart: (m) => e.onDragStart(s, c, m),
+              onDragover: (m) => e.onDragOver(c, m),
+              onDragenter: (m) => e.onDragEnter(c),
+              onDragleave: n[0] || (n[0] = (...m) => e.onDragLeave && e.onDragLeave(...m)),
+              onDrop: (m) => e.onDrop(c, m),
+              onDragend: n[1] || (n[1] = (...m) => e.onDragEnd && e.onDragEnd(...m))
             }, [
-              s.icon ? (P(), S("i", {
+              s.icon ? (C(), x("i", {
                 key: 0,
                 class: H(["router-tab__item-icon", s.icon])
-              }, null, 2)) : Ee("", !0),
+              }, null, 2)) : fe("", !0),
               L("span", {
                 class: "router-tab__item-title",
                 title: e.getReactiveTabTitle(s)
-              }, Ie(e.getReactiveTabTitle(s)), 9, Nt),
-              e.isClosable(s) ? (P(), S("a", {
+              }, Ie(e.getReactiveTabTitle(s)), 9, zt),
+              e.isClosable(s) ? (C(), x("a", {
                 key: 1,
                 class: "router-tab__item-close",
-                onClick: ue((g) => e.close(s), ["stop"])
-              }, null, 8, zt)) : Ee("", !0)
-            ], 42, Vt))), 128))
+                onClick: ce((m) => e.close(s), ["stop"])
+              }, null, 8, _t)) : fe("", !0)
+            ], 42, Nt))), 128))
           ]),
           _: 1
         }, 16)
@@ -887,35 +896,37 @@ function Ft(e, n, o, l, i, p) {
         re(e.$slots, "end")
       ], 2)
     ]),
-    L("div", _t, [
-      Pe(T, null, {
+    L("div", Yt, [
+      Ae(T, null, {
         default: se((s) => [
-          e.hasCustomSlot ? re(e.$slots, "default", yt(le({ key: 0 }, {
+          e.hasCustomSlot ? re(e.$slots, "default", ht(le({ key: 0 }, {
             ...s,
             controller: e.controller,
             // Expose a ref binder so custom slots can keep reactivity
             pageRef: (c) => e.handleComponentRef(c, e.controller.getRouteKey(s.route))
-          }))) : (P(), J(ht, le({ key: 1 }, e.pageTransitionProps, { appear: "" }), {
+          }))) : (C(), J(Tt, le({ key: 1 }, e.pageTransitionProps, { appear: "" }), {
             default: se(() => [
-              e.isRefreshing(s.route) ? (P(), J(ce(s.Component), {
-                key: e.getRefreshComponentKey(s.route),
-                ref: (c) => e.handleComponentRef(c, e.controller.getRouteKey(s.route)),
-                class: "router-tab-page"
-              })) : e.controller.options.keepAlive ? (P(), J(Tt, {
-                key: 1,
-                include: e.includeKeys,
-                max: e.controller.options.maxAlive || void 0
-              }, [
-                (P(), J(ce(s.Component), {
+              s.Component && e.isTabReady(s.route) ? (C(), x(ue, { key: 0 }, [
+                e.isRefreshing(s.route) ? (C(), J(de(s.Component), {
+                  key: e.getRefreshComponentKey(s.route),
+                  ref: (c) => e.handleComponentRef(c, e.controller.getRouteKey(s.route)),
+                  class: "router-tab-page"
+                })) : e.controller.options.keepAlive ? (C(), J(kt, {
+                  key: 1,
+                  include: e.includeKeys,
+                  max: e.controller.options.maxAlive || void 0
+                }, [
+                  (C(), J(de(s.Component), {
+                    key: e.getComponentCacheKey(s.route),
+                    ref: (c) => e.handleComponentRef(c, e.controller.getRouteKey(s.route)),
+                    class: "router-tab-page"
+                  }))
+                ], 1032, ["include", "max"])) : (C(), J(de(s.Component), {
                   key: e.getComponentCacheKey(s.route),
                   ref: (c) => e.handleComponentRef(c, e.controller.getRouteKey(s.route)),
                   class: "router-tab-page"
                 }))
-              ], 1032, ["include", "max"])) : (P(), J(ce(s.Component), {
-                key: e.getComponentCacheKey(s.route),
-                ref: (c) => e.handleComponentRef(c, e.controller.getRouteKey(s.route)),
-                class: "router-tab-page"
-              }))
+              ], 64)) : fe("", !0)
             ]),
             _: 2
           }, 1040))
@@ -923,14 +934,14 @@ function Ft(e, n, o, l, i, p) {
         _: 3
       })
     ]),
-    mt(L("div", {
+    vt(L("div", {
       ref: "menuRef",
       class: "router-tab__contextmenu",
       role: "menu",
       onKeydown: n[2] || (n[2] = (...s) => e.onMenuKeydown && e.onMenuKeydown(...s)),
-      style: kt({ left: e.context.position.x + "px", top: e.context.position.y + "px" })
+      style: wt({ left: e.context.position.x + "px", top: e.context.position.y + "px" })
     }, [
-      (P(!0), S(Ae, null, Ke(e.menuItems, (s, c) => (P(), S("a", {
+      (C(!0), x(ue, null, Ee(e.menuItems, (s, c) => (C(), x("a", {
         key: s.id,
         role: "menuitem",
         class: H(["router-tab__contextmenu-item", { "is-focused": c === e.highlightedIndex }]),
@@ -938,19 +949,19 @@ function Ft(e, n, o, l, i, p) {
         disabled: s.disabled,
         tabindex: s.disabled ? -1 : c === e.highlightedIndex ? 0 : -1,
         ref_for: !0,
-        ref: (g) => e.setMenuItemRef(g, c),
-        onMouseenter: (g) => !s.disabled && e.highlightMenuIndex(c),
-        onClick: (g) => e.handleMenuAction(s)
-      }, Ie(s.label), 43, Yt))), 128))
+        ref: (m) => e.setMenuItemRef(m, c),
+        onMouseenter: (m) => !s.disabled && e.highlightMenuIndex(c),
+        onClick: (m) => e.handleMenuAction(s)
+      }, Ie(s.label), 43, Ft))), 128))
     ], 36), [
-      [wt, e.context.visible && e.context.target]
+      [Ct, e.context.visible && e.context.target]
     ])
   ]);
 }
-const Me = /* @__PURE__ */ Lt(Mt, [["render", Ft]]), Ht = {
+const Me = /* @__PURE__ */ jt(Lt, [["render", Ht]]), Jt = {
   class: "router-tabs",
   "aria-hidden": "true"
-}, de = /* @__PURE__ */ Oe({
+}, pe = /* @__PURE__ */ Oe({
   name: "RouterTabs",
   __name: "RouterTabs",
   props: {
@@ -965,11 +976,11 @@ const Me = /* @__PURE__ */ Lt(Mt, [["render", Ft]]), Ht = {
     fallbackRoute: {}
   },
   setup(e) {
-    return Ve(e), (o, l) => (P(), S("span", Ht));
+    return Ve(e), (o, l) => (C(), x("span", Jt));
   }
-}), Ne = "tab-theme-style", ze = "tab-theme-primary-color", Jt = "system", _e = "(prefers-color-scheme: dark)";
+}), Ne = "tab-theme-style", ze = "tab-theme-primary-color", Wt = "system", _e = "(prefers-color-scheme: dark)";
 let W = null;
-const C = {
+const R = {
   primary: "#034960",
   background: "#ffffff",
   text: "#1e293b",
@@ -983,7 +994,7 @@ const C = {
   activeButtonBackground: "#034960",
   activeButtonColor: "#ffffff",
   iconColor: "#475569"
-}, Wt = {
+}, Gt = {
   primary: "#38bdf8",
   background: "#0f172a",
   text: "#f1f5f9",
@@ -999,7 +1010,7 @@ const C = {
   activeButtonColor: "#0f172a",
   iconColor: "#cbd5e1"
 };
-function Gt(e) {
+function Xt(e) {
   if (typeof window > "u") return null;
   const n = window.localStorage.getItem(e);
   if (!n) return null;
@@ -1010,8 +1021,8 @@ function Gt(e) {
     return null;
   }
 }
-function ve(e) {
-  typeof document > "u" || (document.documentElement.style.setProperty("--router-tab-primary", e.primary ?? C.primary), document.documentElement.style.setProperty("--router-tab-header-bg", e.headerBackground ?? C.headerBackground), document.documentElement.style.setProperty("--router-tab-background", e.background ?? C.background), document.documentElement.style.setProperty("--router-tab-active-background", e.activeBackground ?? C.activeBackground), document.documentElement.style.setProperty("--router-tab-text", e.text ?? C.text), document.documentElement.style.setProperty("--router-tab-active-text", e.activeText ?? C.activeText), document.documentElement.style.setProperty("--router-tab-border", e.border ?? C.border), document.documentElement.style.setProperty("--router-tab-active-border", e.activeBorder ?? C.activeBorder), document.documentElement.style.setProperty("--router-tab-button-color", e.buttonColor ?? C.buttonColor), document.documentElement.style.setProperty("--router-tab-active-button-color", e.activeButtonColor ?? C.activeButtonColor), document.documentElement.style.setProperty("--router-tab-button-background", e.buttonBackground ?? C.buttonBackground), document.documentElement.style.setProperty("--router-tab-active-button-background", e.activeButtonBackground ?? C.activeButtonBackground), document.documentElement.style.setProperty("--router-tab-icon-color", e.iconColor ?? C.iconColor));
+function he(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 Ye(e) {
   if (typeof document > "u") return;
@@ -1020,36 +1031,36 @@ function Ye(e) {
   };
   W && (o.removeEventListener("change", W), W = null), e === "system" ? (l(), W = () => l(), o.addEventListener("change", W)) : n.dataset.theme = e;
 }
-function Xt(e = {}) {
+function qt(e = {}) {
   if (typeof window > "u") return;
   const {
     styleKey: n = Ne,
     primaryKey: o = ze,
-    defaultStyle: l = Jt,
+    defaultStyle: l = Wt,
     defaultPrimary: i
   } = e, p = window.localStorage.getItem(n) ?? l;
   Ye(p);
-  const s = p === "dark" || p === "system" && window.matchMedia(_e).matches ? { ...Wt } : { ...C };
+  const s = p === "dark" || p === "system" && window.matchMedia(_e).matches ? { ...Gt } : { ...R };
   i && (s.primary = i);
-  const c = Gt(o);
-  ve(c ? {
+  const c = Xt(o);
+  he(c ? {
     ...s,
     ...c
   } : s);
 }
-function Zt(e, n) {
+function en(e, n) {
   if (typeof window > "u") return;
   const o = n?.styleKey ?? Ne;
   window.localStorage.setItem(o, e), Ye(e);
 }
-function en(e, n) {
+function tn(e, n) {
   if (typeof window > "u") return;
   const o = n?.primaryKey ?? ze;
-  window.localStorage.setItem(o, JSON.stringify(e)), ve(e);
+  window.localStorage.setItem(o, JSON.stringify(e)), he(e);
 }
 function Q(e, n) {
-  if (Ct(e)) {
-    const l = !Rt(e);
+  if (Rt(e)) {
+    const l = !Kt(e);
     return {
       value: e,
       update: l ? (i) => {
@@ -1064,7 +1075,7 @@ function Q(e, n) {
       update: () => {
       }
     };
-  const o = $(
+  const o = S(
     e === void 0 ? n : e
   );
   return {
@@ -1074,7 +1085,7 @@ function Q(e, n) {
     }
   };
 }
-function ye(e = {}) {
+function Te(e = {}) {
   const n = Q(e.title, "Untitled"), o = Q(e.icon, ""), l = Q(e.closable, !0), i = Q(e.meta, {});
   return {
     routeTabTitle: n.value,
@@ -1087,34 +1098,34 @@ function ye(e = {}) {
     updateMeta: i.update
   };
 }
-function tn(e, n = "Page") {
-  return ye({
+function nn(e, n = "Page") {
+  return Te({
     title: k(() => e.value ? "Loading..." : n),
     icon: k(() => e.value ? "mdi-loading mdi-spin" : "mdi-page"),
     closable: k(() => !e.value)
   });
 }
-function nn(e, n = "Page", o = "mdi-page") {
-  return ye({
+function on(e, n = "Page", o = "mdi-page") {
+  return Te({
     title: k(() => e.value > 0 ? `${n} (${e.value})` : n),
     icon: k(() => e.value > 0 ? "mdi-bell-badge" : o)
   });
 }
-function on(e, n = "Page") {
+function an(e, n = "Page") {
   const o = {
     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 ye({
+  return Te({
     title: k(() => n + o[e.value].suffix),
     icon: k(() => o[e.value].icon),
     closable: k(() => e.value !== "loading")
   });
 }
 let Le = !1;
-const an = {
+const rn = {
   install(e, n) {
     if (Le) return;
     Le = !0;
@@ -1122,9 +1133,9 @@ const an = {
       initTheme: o = !0,
       themeOptions: l,
       componentName: i = Me.name || "RouterTab",
-      tabsComponentName: p = de.name || "RouterTabs"
+      tabsComponentName: p = pe.name || "RouterTabs"
     } = n ?? {};
-    o && Xt(l ?? {}), e.component(i, Me), e.component(p, de), p.toLowerCase() !== "router-tabs" && e.component("router-tabs", de), Object.defineProperty(e.config.globalProperties, "$tabs", {
+    o && qt(l ?? {}), e.component(i, Me), e.component(p, pe), p.toLowerCase() !== "router-tabs" && e.component("router-tabs", pe), Object.defineProperty(e.config.globalProperties, "$tabs", {
       configurable: !0,
       enumerable: !1,
       get() {
@@ -1138,16 +1149,16 @@ const an = {
 };
 export {
   Me as RouterTab,
-  de as RouterTabs,
-  an as default,
-  Xt as initRouterTabsTheme,
+  pe as RouterTabs,
+  rn as default,
+  qt as initRouterTabsTheme,
   ee as routerTabsKey,
-  en as setRouterTabsPrimary,
-  Zt as setRouterTabsTheme,
-  tn as useLoadingTab,
-  nn as useNotificationTab,
-  ye as useReactiveTab,
-  Se as useRouterTabs,
+  tn as setRouterTabsPrimary,
+  en as setRouterTabsTheme,
+  nn as useLoadingTab,
+  on as useNotificationTab,
+  Te as useReactiveTab,
+  De as useRouterTabs,
   Ve as useRouterTabsPersistence,
-  on as useStatusTab
+  an as useStatusTab
 };

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 x(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 Ke(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 Ae(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:x(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 A(l,m=!1,b=!0){const k=x(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(K=>K.id===l);if(m===-1)return a.defaultRoute;const b=s[m+1],k=s[m-1],C=s.find(K=>K.id!==l),P=b||k||C;return P?P.to:a.defaultRoute}async function N(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(),m||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=x(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):$(x(e,l))}function D(){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=x(e,k.to),P=Ke(k),K=_(C,P,a.keepAlive);Q(s,K,"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=x(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:A,closeTab:N,removeTab:O,refreshTab:M,refreshAll:oe,reset:ae,reload:T,getRouteKey:W,matchRoute:g,snapshot:D,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 De=e=>JSON.stringify(e??null),xe=e=>{if(!e)return null;try{return JSON.parse(e)}catch{return null}};function ee(e={}){const{cookieKey:o=Y,serialize:a=De,deserialize:s=xe}=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(A=>A.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=Ae(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 A=new Map,S=new Map;function N(t,r){if(!r||A.has(t))return;A.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)),A.delete(t)}function M(t,r){t?t.routeTabTitle!==void 0||t.routeTabIcon!==void 0||t.routeTabClosable!==void 0?N(r,t):t.$&&(t.$.routeTabTitle!==void 0||t.$.routeTabIcon!==void 0||t.$.routeTabClosable!==void 0)&&N(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),D=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 K(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 K(k(t),t)},enable:({target:t})=>k(t).some(r=>r.closable!==!1)},closeRights:{label:"Close to the Right",handler:async({target:t})=>{await K(C(t),t)},enable:({target:t})=>C(t).some(r=>r.closable!==!1)},closeOthers:{label:"Close Others",handler:async({target:t})=>{await K(P(t),t)},enable:({target:t})=>P(t).some(r=>r.closable!==!1)}};function B(){T.visible=!1,T.target=null,I.value=-1,D.value=[]}function nt(t,r){e.contextmenu&&(T.target=t,T.position.x=r.clientX,T.position.y=r.clientY,n.nextTick(()=>{T.visible=!0,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){D.value[r]=t??null}function it(t){if(t<0)return;D.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(),A.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()},{flush:"post"}),n.watch(U,t=>{if(!T.visible)return;D.value=new Array(t.length).fill(null);const r=q(-1,1,t);z(r)},{flush:"post"}),n.watch(()=>T.visible,t=>{t||(I.value=-1,D.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:N,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"},je={class:"router-tab__scroll"},Ne=["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",je,[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,Ne))),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.createBlock(n.Transition,n.mergeProps({key:1},e.pageTransitionProps,{appear:""}),{default:n.withCtx(()=>[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"})):e.controller.options.keepAlive?(n.openBlock(),n.createBlock(n.KeepAlive,{key:1,include:e.includeKeys,max:e.controller.options.maxAlive||void 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.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"}))]),_:2},1040))]),_:3})]),n.withDirectives(n.createElementVNode("div",{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.vShow,e.context.visible&&e.context.target]])])}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 j=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"};j&&(a.removeEventListener("change",j),j=null),e==="system"?(s(),j=()=>s(),a.addEventListener("change",j)):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 $(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 Be={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 x(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=Be[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:x(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 Pe(e){return{to:e.to,title:e.title,tips:e.tips,icon:e.icon,tabClass:e.tabClass,closable:e.closable,renderKey:e.renderKey}}function Ke(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 Ae(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:$(e,l);return{key:x(m),fullPath:m.fullPath,alive:G(m,a.keepAlive),reusable:X(m,!1),matched:m}}function E(l){const m=x(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 A(l,m=!1,b=!0){const k=$(e,l),C=x(k),B=i.value===C;b==="sameTab"&&(b=B),b&&await M(C,!0),await e[m?"replace":"push"](k),B&&await T()}function S(l){const m=s.findIndex(K=>K.id===l);if(m===-1)return a.defaultRoute;const b=s[m+1],k=s[m-1],C=s.find(K=>K.id!==l),B=b||k||C;return B?B.to:a.defaultRoute}async function N(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(),m||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=$(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"?x(l):x($(e,l))}function D(){const l=s.find(m=>m.id===i.value);return{tabs:s.map(Pe),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=$(e,k.to),B=Ke(k),K=_(C,B,a.keepAlive);Q(s,K,"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=$(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:A,closeTab:N,removeTab:O,refreshTab:M,refreshAll:oe,reset:ae,reload:T,getRouteKey:W,matchRoute:g,snapshot:D,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 De=e=>JSON.stringify(e??null),$e=e=>{if(!e)return null;try{return JSON.parse(e)}catch{return null}};function ee(e={}){const{cookieKey:o=Y,serialize:a=De,deserialize:s=$e}=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(A=>A.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 xe=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=Ae(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 A=new Map,S=new Map;function N(t,r){if(!r||A.has(t))return;A.set(t,r);const f=i.tabs.find(h=>i.getRouteKey(h.to)===t);if(!f)return;const y=[];if(r.routeTabTitle!==void 0){const h=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});y.push(h)}if(r.routeTabIcon!==void 0){const h=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});y.push(h)}if(r.routeTabClosable!==void 0){const h=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});y.push(h)}if(r.routeTabMeta!==void 0){const h=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});y.push(h)}S.set(t,y)}function O(t){const r=S.get(t);r&&(r.forEach(f=>f()),S.delete(t)),A.delete(t)}function M(t,r){t?t.routeTabTitle!==void 0||t.routeTabIcon!==void 0||t.routeTabClosable!==void 0?N(r,t):t.$&&(t.$.routeTabTitle!==void 0||t.$.routeTabIcon!==void 0||t.$.routeTabClosable!==void 0)&&N(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),D=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 B(t){return i.tabs.filter(r=>r.id!==t.id)}async function K(t,r){const f=t.filter(y=>y.closable!==!1);if(f.length){for(const y of f)i.activeId.value===y.id?await i.closeTab(y.id,{redirect:r.to,force:!0}):await i.removeTab(y.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 K(k(t),t)},enable:({target:t})=>k(t).some(r=>r.closable!==!1)},closeRights:{label:"Close to the Right",handler:async({target:t})=>{await K(C(t),t)},enable:({target:t})=>C(t).some(r=>r.closable!==!1)},closeOthers:{label:"Close Others",handler:async({target:t})=>{await K(B(t),t)},enable:({target:t})=>B(t).some(r=>r.closable!==!1)}};function P(){T.visible=!1,T.target=null,I.value=-1,D.value=[]}function nt(t,r){e.contextmenu&&(T.target=t,T.position.x=r.clientX,T.position.y=r.clientY,n.nextTick(()=>{T.visible=!0,document.addEventListener("click",P,{once:!0}),n.nextTick(()=>{at()})}))}function ot(t,r){const f=typeof t=="string"?{id:t}:t,y=tt[f.id],h=f.label??y?.label??String(f.id),u=f.visible??y?.visible??!0;if(!(typeof u=="function"?u(r):u!==!1))return null;const le=f.enable??y?.enable??!0,vt=typeof le=="function"?le(r):le!==!1,Ce=f.handler??y?.handler;if(!Ce)return null;const wt=async()=>{await Promise.resolve(Ce(r))};return{id:String(f.id),label:h,disabled:!vt,action:wt}}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:y}=window,h=t.getBoundingClientRect();let u=T.position.x,L=T.position.y;h.right>f-r&&(u=Math.max(r,f-h.width-r)),h.bottom>y-r&&(L=Math.max(r,y-h.height-r)),(u!==T.position.x||L!==T.position.y)&&(T.position.x=u,T.position.y=L)}function rt(t,r){const f=t?.$el||t;D.value[r]=f??null}function it(t){if(t<0)return;D.value[t]?.focus({preventScroll:!0})}function q(t,r,f=U.value){if(!f.length)return-1;const y=f.length;let h=t;for(let u=0;u<y;u++)if(h=(h+r+y)%y,!f[h].disabled)return h;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"){P();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 h=I.value;if(h>-1){const u=f[h];u.disabled||ke(u)}break}case"Escape":P();break}}async function ke(t){t.disabled||(P(),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),f=i.tabs.find(h=>h.id===r);if(!f)return console.warn(`[RouterTab] Tab not found for key: ${r}. This may cause rendering issues.`),`${r}::0`;const y=f.renderKey??0;return`${r}::${y}`}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){const r=i.getRouteKey(t);return i.tabs.some(f=>f.id===r)}function pt(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 gt(t,r){!e.sortable||!l.dragging||(r.preventDefault(),r.dataTransfer&&(r.dataTransfer.dropEffect="move"))}function yt(t){!e.sortable||!l.dragging||(l.dropIndex=t)}function ht(){!e.sortable||l.dragging}function Tt(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",P)}),n.onBeforeUnmount(()=>{document.removeEventListener("keydown",P),a.appContext.config.globalProperties.$tabs=null,S.forEach(t=>{t.forEach(r=>r())}),S.clear(),A.clear()}),n.watch(()=>e.keepAlive,t=>{i.options.keepAlive=t}),n.watch(()=>i.activeId.value,()=>P()),n.watch(()=>e.contextmenu,t=>{t||P()}),n.watch(()=>U.value.length,t=>{T.visible&&t===0&&P()},{flush:"post"}),n.watch(U,t=>{if(!T.visible)return;D.value=new Array(t.length).fill(null);const r=q(-1,1,t);z(r)},{flush:"post"}),n.watch(()=>T.visible,t=>{t||(I.value=-1,D.value=[])});const kt=i.includeKeys;return{controller:i,tabs:i.tabs,includeKeys:kt,tabTransitionProps:oe,pageTransitionProps:ae,buildTabClass:ft,activate:dt,close:ut,context:T,menuItems:U,handleMenuAction:ke,showContextMenu:nt,hideContextMenu:P,getTabTitle:re,isClosable:ie,isRefreshing:bt,isTabReady:mt,hasCustomSlot:p,hasStartSlot:v,hasEndSlot:c,onDragStart:pt,onDragOver:gt,onDragEnter:yt,onDragLeave:ht,onDrop:Tt,onDragEnd:we,setupComponentWatching:N,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"},je={class:"router-tab__scroll"},Ne=["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",je,[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,Ne))),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.createBlock(n.Transition,n.mergeProps({key:1},e.pageTransitionProps,{appear:""}),{default:n.withCtx(()=>[c.Component&&e.isTabReady(c.route)?(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[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"})):e.controller.options.keepAlive?(n.openBlock(),n.createBlock(n.KeepAlive,{key:1,include:e.includeKeys,max:e.controller.options.maxAlive||void 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.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"}))],64)):n.createCommentVNode("",!0)]),_:2},1040))]),_:3})]),n.withDirectives(n.createElementVNode("div",{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.vShow,e.context.visible&&e.context.target]])])}const te=Me(xe,[["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 j=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"};j&&(a.removeEventListener("change",j),j=null),e==="system"?(s(),j=()=>s(),a.addEventListener("change",j)):o.dataset.theme=e}function ye(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 he=!1;const et={install(e,o){if(he)return;he=!0;const{initTheme:a=!0,themeOptions:s,componentName:i=te.name||"RouterTab",tabsComponentName:p=F.name||"RouterTabs"}=o??{};a&&ye(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=ye,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/components/RouterTab.vue

@@ -68,32 +68,35 @@
             v-bind="pageTransitionProps"
             appear
           >
-            <component
-              v-if="isRefreshing(routerSlot.route)"
-              :is="routerSlot.Component"
-              :key="getRefreshComponentKey(routerSlot.route)"
-              :ref="(el: any) => handleComponentRef(el, controller.getRouteKey(routerSlot.route))"
-              class="router-tab-page"
-            />
-            <KeepAlive
-              v-else-if="controller.options.keepAlive"
-              :include="includeKeys"
-              :max="controller.options.maxAlive || undefined"
-            >
+            <!-- Only render if Component is available to prevent blank pages on first load -->
+            <template v-if="routerSlot.Component && isTabReady(routerSlot.route)">
               <component
+                v-if="isRefreshing(routerSlot.route)"
+                :is="routerSlot.Component"
+                :key="getRefreshComponentKey(routerSlot.route)"
+                :ref="(el: any) => handleComponentRef(el, controller.getRouteKey(routerSlot.route))"
+                class="router-tab-page"
+              />
+              <KeepAlive
+                v-else-if="controller.options.keepAlive"
+                :include="includeKeys"
+                :max="controller.options.maxAlive || undefined"
+              >
+                <component
+                  :is="routerSlot.Component"
+                  :key="getComponentCacheKey(routerSlot.route)"
+                  :ref="(el: any) => handleComponentRef(el, controller.getRouteKey(routerSlot.route))"
+                  class="router-tab-page"
+                />
+              </KeepAlive>
+              <component
+                v-else
                 :is="routerSlot.Component"
                 :key="getComponentCacheKey(routerSlot.route)"
                 :ref="(el: any) => handleComponentRef(el, controller.getRouteKey(routerSlot.route))"
                 class="router-tab-page"
               />
-            </KeepAlive>
-            <component
-              v-else
-              :is="routerSlot.Component"
-              :key="getComponentCacheKey(routerSlot.route)"
-              :ref="(el: any) => handleComponentRef(el, controller.getRouteKey(routerSlot.route))"
-              class="router-tab-page"
-            />
+            </template>
           </transition>
         </template>
       </RouterView>
@@ -609,8 +612,10 @@ export default defineComponent({
       }
     }
 
-    function setMenuItemRef(el: Element | null, index: number) {
-      menuItemRefs.value[index] = (el as HTMLElement) ?? null
+    function setMenuItemRef(el: any, index: number) {
+      // Handle both direct elements and component instances
+      const element = el?.$el || el
+      menuItemRefs.value[index] = (element as HTMLElement) ?? null
     }
 
     function focusMenuItem(index: number) {
@@ -729,7 +734,13 @@ export default defineComponent({
     function getComponentCacheKey(route: RouteLocationNormalizedLoaded): string {
       const routeKey = controller.getRouteKey(route)
       const tab = controller.tabs.find(item => item.id === routeKey)
-      const renderKey = tab?.renderKey ?? 0
+      
+      if (!tab) {
+        console.warn(`[RouterTab] Tab not found for key: ${routeKey}. This may cause rendering issues.`)
+        return `${routeKey}::0`
+      }
+      
+      const renderKey = tab.renderKey ?? 0
       return `${routeKey}::${renderKey}`
     }
 
@@ -778,6 +789,11 @@ export default defineComponent({
       return controller.refreshingKey.value === controller.getRouteKey(route)
     }
 
+    function isTabReady(route: RouteLocationNormalizedLoaded): boolean {
+      const routeKey = controller.getRouteKey(route)
+      return controller.tabs.some(tab => tab.id === routeKey)
+    }
+
     // Drag and drop handlers
     function onDragStart(tab: TabRecord, index: number, event: DragEvent) {
       if (!props.sortable) return
@@ -919,6 +935,7 @@ export default defineComponent({
       getTabTitle,
       isClosable,
       isRefreshing,
+      isTabReady,
       hasCustomSlot,
       hasStartSlot,
       hasEndSlot,

package/package.json

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