vue3-router-tab 1.2.6 → 1.2.8

package/dist/vue3-router-tab.js

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