vue3-router-tab 1.2.5 → 1.2.7

package/dist/vue3-router-tab.js

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