vue3-router-tab 1.2.4 → 1.2.6

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 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 = {}) {
   return {
     initialTabs: e.initialTabs ?? [],
     keepAlive: e.keepAlive ?? !0,
@@ -11,79 +11,70 @@ function qe(e = {}) {
     defaultRoute: e.defaultRoute ?? "/"
   };
 }
-function E(e, o) {
-  const t = e.resolve(o);
-  if (!t || !t.matched.length)
-    throw new Error(`[RouterTabs] Unable to resolve route: ${String(o)}`);
-  return t;
+function _(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 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) {
-  const o = e.meta?.key;
-  if (typeof o == "function") {
-    const t = o(e);
-    if (typeof t == "string" && t.length) return t;
-  } else if (typeof o == "string" && o.length) {
-    const t = Qe[o.toLowerCase()];
-    return t ? t(e) : o;
+function j(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()];
+    return o ? o(e) : n;
   }
   return e.fullPath;
 }
-function le(e, o) {
-  const t = e.meta?.keepAlive;
-  return typeof t == "boolean" ? t : o;
+function ce(e, n) {
+  const o = e.meta?.keepAlive;
+  return typeof o == "boolean" ? o : n;
 }
-function se(e, o) {
-  const t = e.meta?.reuse;
-  return typeof t == "boolean" ? t : o;
+function fe(e, n) {
+  const o = e.meta?.reuse;
+  return typeof o == "boolean" ? o : n;
 }
-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 $e(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 V(e, o, t) {
-  const r = xe(e);
+function q(e, n, o) {
+  const i = $e(e);
   return {
-    id: D(e),
+    id: j(e),
     to: e.fullPath,
     fullPath: e.fullPath,
     matched: e,
-    alive: le(e, t),
-    reusable: se(e, !1),
-    closable: r.closable ?? !0,
-    ...r,
-    ...o
+    alive: ce(e, o),
+    reusable: fe(e, !1),
+    closable: i.closable ?? !0,
+    ...i,
+    ...n
   };
 }
-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);
-        return;
-      }
-    }
-    e.push(o);
-  }
+function ie(e, n, o, i) {
+  e.find((p) => p.id === n.id) || e.push(n);
 }
-function ye(e, o, t) {
-  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);
+function Re(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);
+    p > -1 && (e[p].alive = !1);
   }
 }
-function We(e) {
+function lt(e) {
   return {
     to: e.to,
     title: e.title,
@@ -93,173 +84,171 @@ function We(e) {
     closable: e.closable
   };
 }
-function Xe(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 st(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;
 }
-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 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);
     return {
-      key: D(c),
-      fullPath: c.fullPath,
-      alive: le(c, t.keepAlive),
-      reusable: se(c, !1),
-      matched: c
+      key: j(f),
+      fullPath: f.fullPath,
+      alive: ce(f, o.keepAlive),
+      reusable: fe(f, !1),
+      matched: f
     };
   }
-  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 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);
   }
-  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 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();
   }
-  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 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;
   }
-  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 A(l = a.value, f = {}) {
+    if (!l) return;
+    if (!f.force && o.keepLastTab && i.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);
   }
-  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 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 w(i = a.value ?? void 0, c = !1) {
-    i && (m.value = i, await re(), c || await re(), m.value = null);
+  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(i = !1) {
-    for (const c of r)
-      await w(c.id, i);
+  async function R(l = !1) {
+    for (const f of i)
+      await L(f.id, l);
   }
-  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 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);
     }
-    await e.replace(i);
+    await e.replace(l);
   }
-  async function M() {
-    const i = a.value;
-    i && await w(i, !0);
+  async function N() {
+    const l = a.value;
+    l && await L(l, !0);
   }
-  function G(i) {
-    return typeof i.matched == "object" ? D(i) : D(E(e, i));
+  function U(l) {
+    return typeof l.matched == "object" ? j(l) : j(_(e, l));
   }
-  function O() {
-    const i = r.find((c) => c.id === a.value);
+  function Y() {
+    const l = i.find((f) => f.id === a.value);
     return {
-      tabs: r.map(We),
-      active: i ? i.to : null
+      tabs: i.map(lt),
+      active: l ? l.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 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)
       try {
-        const P = E(e, g.to), A = Xe(g), q = V(P, A, t.keepAlive);
-        te(r, q, "last", null);
+        const P = _(e, v.to), D = st(v), $ = q(P, D, o.keepAlive);
+        ie(i, $, "last", null);
       } catch {
       }
-    s = !1;
-    const d = i?.active ?? c[c.length - 1]?.to ?? t.defaultRoute;
+    u = !1;
+    const d = l?.active ?? f[f.length - 1]?.to ?? o.defaultRoute;
     if (d)
       try {
         await e.replace(d);
       } catch {
       }
   }
-  return B(
+  return x(
     () => e.currentRoute.value,
-    (i) => {
-      if (s) return;
-      const c = C(i);
-      a.value = c.id, b.value = c, ye(r, t.maxAlive, a.value);
+    (l) => {
+      if (u) return;
+      const f = k(l);
+      a.value = f.id, p.value = f, Re(i, o.maxAlive, a.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);
+  ), o.initialTabs.length && o.initialTabs.forEach((l) => {
+    const f = _(e, l.to), d = q(f, l, o.keepAlive);
+    ie(i, d);
   }), {
-    options: t,
-    tabs: r,
+    options: o,
+    tabs: i,
     activeId: a,
-    current: b,
-    includeKeys: l,
-    refreshingKey: m,
-    openTab: R,
-    closeTab: L,
-    removeTab: S,
-    refreshTab: w,
-    refreshAll: J,
-    reset: h,
-    reload: M,
-    getRouteKey: G,
-    matchRoute: u,
-    snapshot: O,
-    hydrate: H
+    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
   };
 }
-function he(e) {
+function we(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;
-  if (!o)
+const X = Symbol("RouterTabsContext"), Q = "router-tabs:snapshot";
+function Pe(e = {}) {
+  const { optional: n = !1 } = e, o = ge(X, null);
+  if (o) return o;
+  const i = ge("$tabs", null);
+  if (i) return i;
+  const p = De()?.appContext.config.globalProperties.$tabs;
+  if (p) return p;
+  if (!n)
     throw new Error("[RouterTabs] useRouterTabs must be used within <router-tab>.");
   return null;
 }
-const et = 864e5;
-function tt(e) {
+const ct = 864e5;
+function ft(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 n = `${encodeURIComponent(e)}=`, o = document.cookie ? document.cookie.split("; ") : [];
+  for (const i of o)
+    if (i.startsWith(n))
+      return decodeURIComponent(i.slice(n.length));
   return null;
 }
-function Te(e, o, t) {
+function Ae(e, n, o) {
   if (typeof document > "u") return;
   const {
-    expiresInDays: r = 7,
+    expiresInDays: i = 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}`);
+    domain: p,
+    secure: y,
+    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}`);
   }
-  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("; ");
+  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("; ");
 }
-function Ce(e, o) {
+function Ee(e, n) {
   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: 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 nt = (e) => JSON.stringify(e ?? null), ot = (e) => {
+const dt = (e) => JSON.stringify(e ?? null), bt = (e) => {
   if (!e) return null;
   try {
     return JSON.parse(e);
@@ -267,62 +256,62 @@ const nt = (e) => JSON.stringify(e ?? null), ot = (e) => {
     return null;
   }
 };
-function Ie(e = {}) {
+function Ke(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: 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)
         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(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);
           }
         } finally {
-          b.value = !1;
+          p.value = !1;
         }
       else
         try {
-          b.value = !0;
-          const C = e.fallbackRoute ?? l.options.defaultRoute;
-          await l.reset(C);
+          p.value = !0;
+          const k = e.fallbackRoute ?? s.options.defaultRoute;
+          await s.reset(k);
         } 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(
+      const m = s.snapshot();
+      m.tabs.length ? Ae(n, o(m), e) : Ee(n, e), p.value = !1;
+    }), x(
       () => ({
-        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((u) => ({
+          to: u.to,
+          title: u.title,
+          tips: u.tips,
+          icon: u.icon,
+          tabClass: u.tabClass,
+          closable: u.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 u = s.snapshot();
+        u.tabs.length ? Ae(n, o(u), e) : Ee(n, e);
       },
       { deep: !0 }
     );
   };
-  a ? m(a) : ie(() => {
-    const l = ke({ optional: !0 });
-    l && m(l);
+  a ? y(a) : ue(() => {
+    const s = Pe({ optional: !0 });
+    s && y(s);
   });
 }
-const at = Ae({
+const pt = Be({
   name: "RouterTab",
-  components: { RouterView: He },
+  components: { RouterView: at },
   props: {
     tabs: {
       type: Array,
@@ -362,7 +351,7 @@ const at = Ae({
     },
     cookieKey: {
       type: String,
-      default: Y
+      default: Q
     },
     persistence: {
       type: Object,
@@ -371,21 +360,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)
+  setup(e, { emit: n }) {
+    const o = De();
+    if (!o)
       throw new Error("[RouterTab] component must be used within a Vue application context.");
-    const r = t.appContext.app.config.globalProperties.$router;
-    if (!r)
+    const i = o.appContext.app.config.globalProperties.$router;
+    if (!i)
       throw new Error("[RouterTab] Vue Router is required. Make sure to call app.use(router) before RouterTab.");
-    const a = Ze(r, {
+    const a = ut(i, {
       initialTabs: e.tabs,
       keepAlive: e.keepAlive,
       maxAlive: e.maxAlive,
@@ -393,24 +378,105 @@ const at = Ae({
       appendPosition: e.append,
       defaultRoute: e.defaultPage
     });
-    Ue(F, a), t.appContext.config.globalProperties.$tabs = a;
-    const b = $(() => !!t?.slots?.default);
+    Qe(X, a), o.appContext.config.globalProperties.$tabs = a;
+    const p = h(() => !!o?.slots?.default), y = K(0), s = h(() => {
+      y.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;
+      }), 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(
+          () => {
+            const c = r.routeTabTitle;
+            return c && typeof c == "object" && "value" in c ? c.value : c;
+          },
+          (c) => {
+            if (c != null) {
+              const me = String(c);
+              b.title = me, u();
+            }
+          },
+          { immediate: !0 }
+        );
+        T.push(E);
+      }
+      if (r.routeTabIcon !== void 0) {
+        const E = x(
+          () => {
+            const c = r.routeTabIcon;
+            return c && typeof c == "object" && "value" in c ? c.value : c;
+          },
+          (c) => {
+            c != null && (b.icon = String(c), u());
+          },
+          { immediate: !0 }
+        );
+        T.push(E);
+      }
+      if (r.routeTabClosable !== void 0) {
+        const E = x(
+          () => {
+            const c = r.routeTabClosable;
+            return c && typeof c == "object" && "value" in c ? c.value : c;
+          },
+          (c) => {
+            c != null && (b.closable = !!c, u());
+          },
+          { immediate: !0 }
+        );
+        T.push(E);
+      }
+      if (r.routeTabMeta !== void 0) {
+        const E = x(
+          () => {
+            const c = r.routeTabMeta;
+            return c && typeof c == "object" && "value" in c ? c.value : c;
+          },
+          (c) => {
+            c && typeof c == "object" && (Object.assign(b, c), u());
+          },
+          { immediate: !0, deep: !0 }
+        );
+        T.push(E);
+      }
+      k.set(t, T);
+    }
+    function O(t) {
+      const r = k.get(t);
+      r && (r.forEach((b) => b()), k.delete(t)), m.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);
+    }
     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 || Q : t.cookieKey || (t.cookieKey = Q), Ke(t);
     }
-    const m = $(() => he(e.tabTransition)), l = $(() => he(e.pageTransition)), s = oe({
+    const z = h(() => we(e.tabTransition)), L = h(() => we(e.pageTransition)), R = le({
       visible: !1,
       target: null,
       position: { x: 0, y: 0 }
-    }), u = oe({
+    }), g = le({
       dragging: !1,
       dragIndex: -1,
       dropIndex: -1,
       dragTab: null
-    }), C = [
+    }), N = [
       "refresh",
       "refreshAll",
       "close",
@@ -418,33 +484,33 @@ const at = Ae({
       "closeRights",
       "closeOthers"
     ];
-    function R(n) {
-      return a.tabs.findIndex((f) => f.id === n);
+    function U(t) {
+      return a.tabs.findIndex((r) => r.id === t);
     }
-    function _(n) {
-      const f = R(n.id);
-      return f > 0 ? a.tabs.slice(0, f) : [];
+    function Y(t) {
+      const r = U(t.id);
+      return r > 0 ? a.tabs.slice(0, r) : [];
     }
-    function L(n) {
-      const f = R(n.id);
-      return f > -1 ? a.tabs.slice(f + 1) : [];
+    function F(t) {
+      const r = U(t.id);
+      return r > -1 ? a.tabs.slice(r + 1) : [];
     }
-    function S(n) {
-      return a.tabs.filter((f) => f.id !== n.id);
+    function l(t) {
+      return a.tabs.filter((r) => r.id !== t.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);
+    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);
       }
     }
-    const J = {
+    const d = {
       refresh: {
         label: "Refresh",
-        handler: async ({ target: n }) => {
-          await a.refreshTab(n.id, !0);
+        handler: async ({ target: t }) => {
+          await a.refreshTab(t.id, !0);
         }
       },
       refreshAll: {
@@ -455,250 +521,265 @@ const at = Ae({
       },
       close: {
         label: "Close",
-        handler: async ({ target: n }) => {
-          await a.closeTab(n.id);
+        handler: async ({ target: t }) => {
+          await a.closeTab(t.id);
         },
-        enable: ({ target: n }) => c(n)
+        enable: ({ target: t }) => ee(t)
       },
       closeLefts: {
         label: "Close to the Left",
-        handler: async ({ target: n }) => {
-          await w(_(n), n);
+        handler: async ({ target: t }) => {
+          await f(Y(t), t);
         },
-        enable: ({ target: n }) => _(n).some((f) => f.closable !== !1)
+        enable: ({ target: t }) => Y(t).some((r) => r.closable !== !1)
       },
       closeRights: {
         label: "Close to the Right",
-        handler: async ({ target: n }) => {
-          await w(L(n), n);
+        handler: async ({ target: t }) => {
+          await f(F(t), t);
         },
-        enable: ({ target: n }) => L(n).some((f) => f.closable !== !1)
+        enable: ({ target: t }) => F(t).some((r) => r.closable !== !1)
       },
       closeOthers: {
         label: "Close Others",
-        handler: async ({ target: n }) => {
-          await w(S(n), n);
+        handler: async ({ target: t }) => {
+          await f(l(t), t);
         },
-        enable: ({ target: n }) => S(n).some((f) => f.closable !== !1)
+        enable: ({ target: t }) => l(t).some((r) => r.closable !== !1)
       }
     };
-    function h() {
-      s.visible = !1, s.target = null;
+    function v() {
+      R.visible = !1, R.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 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 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 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));
       };
       return {
-        id: String(p.id),
-        label: Le,
-        disabled: !Me,
-        action: Oe
+        id: String(b.id),
+        label: E,
+        disabled: !We,
+        action: He
       };
     }
-    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 $ = 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);
     });
-    async function H(n) {
-      n.disabled || (h(), await n.action());
+    async function Me(t) {
+      t.disabled || (v(), await t.action());
     }
-    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 Z(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 c(n) {
-      return !(n.closable === !1 || a.options.keepLastTab && a.tabs.length <= 1);
+    function _e(t) {
+      return s.value[t.id] || Z(t);
     }
-    async function d(n) {
-      await a.closeTab(n.id);
+    function ee(t) {
+      return !(t.closable === !1 || a.options.keepLastTab && a.tabs.length <= 1);
     }
-    function g(n) {
-      a.activeId.value !== n.id && a.openTab(n.to, !1);
+    async function je(t) {
+      await a.closeTab(t.id);
     }
-    function P(n) {
+    function Oe(t) {
+      a.activeId.value !== t.id && a.openTab(t.to, !1);
+    }
+    function Ue(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": 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)
         },
-        n.tabClass
+        t.tabClass
       ];
     }
-    function A(n) {
-      return a.refreshingKey.value === a.getRouteKey(n);
+    function Ve(t) {
+      return a.refreshingKey.value === a.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 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 Be(n, f) {
-      !e.sortable || !u.dragging || (f.preventDefault(), f.dataTransfer && (f.dataTransfer.dropEffect = "move"));
+    function Ne(t, r) {
+      !e.sortable || !g.dragging || (r.preventDefault(), r.dataTransfer && (r.dataTransfer.dropEffect = "move"));
     }
-    function Se(n) {
-      !e.sortable || !u.dragging || (u.dropIndex = n);
+    function Ye(t) {
+      !e.sortable || !g.dragging || (g.dropIndex = t);
     }
-    function Ke() {
-      !e.sortable || u.dragging;
+    function Fe() {
+      !e.sortable || g.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 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,
+            toIndex: t
           });
         }
-        ce();
+        pe();
       }
     }
-    function ce() {
-      u.dragging = !1, u.dragIndex = -1, u.dropIndex = -1, u.dragTab = null;
+    function pe() {
+      g.dragging = !1, g.dragIndex = -1, g.dropIndex = -1, g.dragTab = null;
     }
-    ie(() => {
-      document.addEventListener("keydown", h);
-    }), ze(() => {
-      document.removeEventListener("keydown", h), t.appContext.config.globalProperties.$tabs = null;
-    }), B(
+    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(
       () => e.keepAlive,
-      (n) => {
-        a.options.keepAlive = n;
+      (t) => {
+        a.options.keepAlive = t;
       }
-    ), B(
+    ), x(
       () => a.activeId.value,
-      () => h()
-    ), B(
+      () => v()
+    ), x(
       () => e.contextmenu,
-      (n) => {
-        n || h();
+      (t) => {
+        t || v();
       }
-    ), B(
-      () => O.value.length,
-      (n) => {
-        s.visible && n === 0 && h();
+    ), x(
+      () => $.value.length,
+      (t) => {
+        R.visible && t === 0 && v();
       }
     );
-    const _e = a.includeKeys;
+    const Ge = a.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
+      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,
+      hasCustomSlot: p,
+      onDragStart: ze,
+      onDragOver: Ne,
+      onDragEnter: Ye,
+      onDragLeave: Fe,
+      onDrop: Je,
+      onDragEnd: pe,
+      setupComponentWatching: B,
+      cleanupComponentWatching: O,
+      handleComponentRef: A,
+      getReactiveTabTitle: _e,
+      triggerTabUpdate: u
     };
   }
-}), 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")
+}), mt = (e, n) => {
+  const o = e.__vccOpts || e;
+  for (const [i, a] of n)
+    o[i] = a;
+  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")
       ]),
-      x("div", ut, [
-        j(Ve, U({
+      S("div", ht, [
+        J(et, G({
           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: W(() => [
+            (w(!0), I(oe, null, ye(e.tabs, (s, u) => (w(), I("li", {
+              key: s.id,
+              class: he(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: (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))
             }, [
-              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 ? (w(), I("i", {
                 key: 0,
+                class: he(["router-tab__item-icon", s.icon])
+              }, null, 2)) : M("", !0),
+              S("span", {
+                class: "router-tab__item-title",
+                title: e.getReactiveTabTitle(s)
+              }, Te(e.getReactiveTabTitle(s)), 9, kt),
+              e.isClosable(s) ? (w(), I("a", {
+                key: 1,
                 class: "router-tab__item-close",
-                onClick: N((u) => e.close(l), ["stop"])
-              }, null, 8, dt)) : I("", !0)
-            ], 42, ct))), 128))
+                onClick: H((m) => e.close(s), ["stop"])
+              }, null, 8, Ct)) : M("", !0)
+            ], 42, Tt))), 128))
           ]),
           _: 1
         }, 16)
       ]),
-      x("div", bt, [
-        X(e.$slots, "end")
+      S("div", Rt, [
+        ne(e.$slots, "end")
       ])
     ]),
-    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, {
+    S("div", wt, [
+      J(y, null, {
+        default: W((s) => [
+          e.hasCustomSlot ? ne(e.$slots, "default", tt(G({ 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, {
                   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) ? M("", !0) : (w(), ae(Ce(s.Component), {
+                    key: e.controller.getRouteKey(s.route),
+                    ref: (u) => e.handleComponentRef(u, e.controller.getRouteKey(s.route)),
                     class: "router-tab-page"
                   }))
-                ], 1032, ["include", "max"])) : I("", !0)
+                ], 1032, ["include", "max"])) : M("", !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" : ""),
+            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)),
                   class: "router-tab-page"
-                })) : I("", !0)
+                })) : M("", !0)
               ]),
               _: 2
             }, 1040)
@@ -707,24 +788,24 @@ function gt(e, o, t, r, a, b) {
         _: 3
       })
     ]),
-    e.context.visible && e.context.target ? (v(), T("div", {
+    e.context.visible && e.context.target ? (w(), I("div", {
       key: 0,
       class: "router-tab__contextmenu",
-      style: Ge({ left: e.context.position.x + "px", top: e.context.position.y + "px" })
+      style: ot({ 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,
+      (w(!0), I(oe, null, ye(e.menuItems, (s) => (w(), I("a", {
+        key: s.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)
+        "aria-disabled": s.disabled,
+        onClick: H((u) => e.handleMenuAction(s), ["prevent"])
+      }, Te(s.label), 9, Pt))), 128))
+    ], 4)) : M("", !0)
   ]);
 }
-const we = /* @__PURE__ */ rt(at, [["render", gt]]), vt = {
+const Ie = /* @__PURE__ */ mt(pt, [["render", At]]), Et = {
   class: "router-tabs",
   "aria-hidden": "true"
-}, ne = /* @__PURE__ */ Ae({
+}, re = /* @__PURE__ */ Be({
   name: "RouterTabs",
   __name: "RouterTabs",
   props: {
@@ -739,11 +820,11 @@ const we = /* @__PURE__ */ rt(at, [["render", gt]]), vt = {
     fallbackRoute: {}
   },
   setup(e) {
-    return Ie(e), (t, r) => (v(), T("span", vt));
+    return Ke(e), (o, i) => (w(), I("span", Et));
   }
-}), Ee = "tab-theme-style", yt = "tab-theme-primary-color", ht = "system", kt = "(prefers-color-scheme: dark)";
-let K = null;
-const y = {
+}), Le = "tab-theme-style", It = "tab-theme-primary-color", xt = "system", Dt = "(prefers-color-scheme: dark)";
+let V = null;
+const C = {
   primary: "#034960",
   background: "#ffffff",
   text: "#1e293b",
@@ -751,13 +832,13 @@ const y = {
   activeBackground: "#034960",
   activeText: "#ffffff",
   activeBorder: "#034960",
-  headerBackground: "#ffff",
+  headerBackground: "#ffffff",
   buttonBackground: "#f8fafc",
   buttonColor: "#034960",
   activeButtonBackground: "#034960",
   activeButtonColor: "#ffffff",
   iconColor: "#475569"
-}, Tt = {
+}, Bt = {
   primary: "#38bdf8",
   background: "#0f172a",
   text: "#f1f5f9",
@@ -773,59 +854,110 @@ 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 de(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 De(e) {
+function Se(e) {
   if (typeof document > "u") return;
-  const o = document.documentElement, t = window.matchMedia(kt), r = () => {
-    o.dataset.theme = t.matches ? "dark" : "light";
+  const n = document.documentElement, o = window.matchMedia(Dt), i = () => {
+    n.dataset.theme = o.matches ? "dark" : "light";
   };
-  K && (t.removeEventListener("change", K), K = null), e === "system" ? (r(), K = () => r(), t.addEventListener("change", K)) : o.dataset.theme = e;
+  V && (o.removeEventListener("change", V), V = null), e === "system" ? (i(), V = () => i(), o.addEventListener("change", V)) : n.dataset.theme = e;
 }
-function Ct(e = {}) {
+function $t(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: n = Le,
+    defaultStyle: o = xt
+  } = e, i = window.localStorage.getItem(n) ?? o;
+  Se(i), de(i === "dark" ? Bt : C);
 }
-function At(e, o) {
+function St(e, n) {
   if (typeof window > "u") return;
-  const t = o?.styleKey ?? Ee;
-  window.localStorage.setItem(t, e), De(e);
+  const o = n?.styleKey ?? Le;
+  window.localStorage.setItem(o, e), Se(e);
 }
-function xt(e, o) {
+function Mt(e, n) {
   if (typeof window > "u") return;
-  const t = o?.primaryKey ?? yt;
-  window.localStorage.setItem(t, JSON.stringify(e)), ue(e);
+  const o = n?.primaryKey ?? It;
+  window.localStorage.setItem(o, JSON.stringify(e)), de(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;
+  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);
+    }
+  };
+}
+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 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 Ot(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")
+  });
 }
-const Re = {
+const xe = {
   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", {
+    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", {
       configurable: !0,
       enumerable: !1,
       get() {
-        return e._context.provides[F];
+        return e._context.provides[X];
       },
-      set(r) {
-        r && e.provide(F, r);
+      set(i) {
+        i && e.provide(X, i);
       }
     });
   }
 };
 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
+  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
 };