vue3-router-tab 1.1.1 → 1.1.3

package/dist/vue3-router-tab.js

@@ -1,7 +1,7 @@
 import './vue3-router-tab.css';
-import { reactive as me, ref as Q, shallowRef as Ae, computed as K, watch as P, nextTick as ie, inject as oe, getCurrentInstance as ye, onMounted as Z, defineComponent as ge, provide as _e, onBeforeUnmount as Pe, resolveComponent as xe, createElementBlock as g, openBlock as m, createElementVNode as R, createCommentVNode as w, renderSlot as H, createVNode as E, TransitionGroup as $e, mergeProps as j, withCtx as z, Fragment as Y, renderList as ae, withModifiers as O, normalizeClass as le, createTextVNode as Ie, toDisplayString as se, normalizeProps as Ke, Transition as re, createBlock as q, KeepAlive as Se, resolveDynamicComponent as ce, normalizeStyle as Le } from "vue";
-import { RouterView as Me } from "vue-router";
-function Ee(e = {}) {
+import { reactive as ge, ref as ee, shallowRef as Se, computed as $, watch as P, nextTick as ae, inject as se, getCurrentInstance as Te, onMounted as te, defineComponent as ke, provide as $e, onBeforeUnmount as Ee, resolveComponent as Le, createElementBlock as g, openBlock as h, createElementVNode as R, createCommentVNode as C, renderSlot as q, createVNode as D, TransitionGroup as Me, mergeProps as U, withCtx as j, Fragment as Q, renderList as le, withModifiers as z, normalizeClass as re, createTextVNode as De, toDisplayString as ce, normalizeProps as Ue, Transition as ue, createBlock as W, KeepAlive as je, resolveDynamicComponent as fe, normalizeStyle as ze } from "vue";
+import { RouterView as Oe } from "vue-router";
+function Ve(e = {}) {
   return {
     initialTabs: e.initialTabs ?? [],
     keepAlive: e.keepAlive ?? !0,
@@ -17,7 +17,7 @@ function A(e, n) {
     throw new Error(`[RouterTabs] Unable to resolve route: ${String(n)}`);
   return o;
 }
-const je = {
+const Ne = {
   path: (e) => e.path,
   fullpath: (e) => e.fullPath,
   fullname: (e) => e.fullPath,
@@ -30,60 +30,60 @@ function _(e) {
     const o = n(e);
     if (typeof o == "string" && o.length) return o;
   } else if (typeof n == "string" && n.length) {
-    const o = je[n.toLowerCase()];
+    const o = Ne[n.toLowerCase()];
     return o ? o(e) : n;
   }
   return e.fullPath;
 }
-function ee(e, n) {
+function ne(e, n) {
   const o = e.meta?.keepAlive;
   return typeof o == "boolean" ? o : n;
 }
-function te(e, n) {
+function oe(e, n) {
   const o = e.meta?.reuse;
   return typeof o == "boolean" ? o : n;
 }
-function Te(e) {
+function we(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, n, o) {
-  const t = Te(e);
+function O(e, n, o) {
+  const t = we(e);
   return {
     id: _(e),
     to: e.fullPath,
     fullPath: e.fullPath,
     matched: e,
-    alive: ee(e, o),
-    reusable: te(e, !1),
+    alive: ne(e, o),
+    reusable: oe(e, !1),
     closable: t.closable ?? !0,
     ...t,
     ...n
   };
 }
-function W(e, n, o, t) {
-  if (!e.find((d) => d.id === n.id)) {
+function X(e, n, o, t) {
+  if (!e.find((f) => f.id === n.id)) {
     if (o === "next" && t) {
-      const d = e.findIndex((b) => b.id === t);
-      if (d > -1) {
-        e.splice(d + 1, 0, n);
+      const f = e.findIndex((b) => b.id === t);
+      if (f > -1) {
+        e.splice(f + 1, 0, n);
         return;
       }
     }
     e.push(n);
   }
 }
-function ue(e, n, o) {
+function de(e, n, o) {
   if (!n || n <= 0) return;
-  const t = e.filter((r) => r.alive);
+  const t = e.filter((l) => l.alive);
   for (; t.length > n; ) {
-    const r = t.shift();
-    if (!r || r.id === o) continue;
-    const d = e.findIndex((b) => b.id === r.id);
-    d > -1 && (e[d].alive = !1);
+    const l = t.shift();
+    if (!l || l.id === o) continue;
+    const f = e.findIndex((b) => b.id === l.id);
+    f > -1 && (e[f].alive = !1);
   }
 }
-function ze(e) {
+function Be(e) {
   return {
     to: e.to,
     title: e.title,
@@ -93,91 +93,91 @@ function ze(e) {
     closable: e.closable
   };
 }
-function Oe(e) {
+function Ye(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 Ve(e, n = {}) {
-  const o = Ee(n), t = me([]), r = Q(null), d = Ae(), b = Q(null), l = K(() => t.filter((a) => a.alive).map((a) => a.id));
+function Fe(e, n = {}) {
+  const o = Ve(n), t = ge([]), l = ee(null), f = Se(), b = ee(null), s = $(() => t.filter((a) => a.alive).map((a) => a.id));
   let u = !1;
   function T(a) {
-    const s = typeof a.matched == "object" ? a : A(e, a);
+    const r = typeof a.matched == "object" ? a : A(e, a);
     return {
-      key: _(s),
-      fullPath: s.fullPath,
-      alive: ee(s, o.keepAlive),
-      reusable: te(s, !1),
-      matched: s
+      key: _(r),
+      fullPath: r.fullPath,
+      alive: ne(r, o.keepAlive),
+      reusable: oe(r, !1),
+      matched: r
     };
   }
-  function C(a) {
-    const s = _(a);
-    let c = t.find((p) => p.id === s);
-    return c ? (c.fullPath = a.fullPath, c.to = a.fullPath, c.matched = a, c.alive = ee(a, o.keepAlive), c.reusable = te(a, c.reusable), Object.assign(c, Te(a)), c) : (c = V(a, {}, o.keepAlive), W(t, c, o.appendPosition, r.value), ue(t, o.maxAlive, r.value), c);
+  function w(a) {
+    const r = _(a);
+    let c = t.find((p) => p.id === r);
+    return c ? (c.fullPath = a.fullPath, c.to = a.fullPath, c.matched = a, c.alive = ne(a, o.keepAlive), c.reusable = oe(a, c.reusable), Object.assign(c, we(a)), c) : (c = O(a, {}, o.keepAlive), X(t, c, o.appendPosition, l.value), de(t, o.maxAlive, l.value), c);
   }
-  async function S(a, s = !1, c = !0) {
-    const p = A(e, a), k = _(p), i = r.value === k;
-    c === "sameTab" && (c = i), c && await v(k, !0), await e[s ? "replace" : "push"](p), i && await $();
+  async function E(a, r = !1, c = !0) {
+    const p = A(e, a), k = _(p), i = l.value === k;
+    c === "sameTab" && (c = i), c && await y(k, !0), await e[r ? "replace" : "push"](p), i && await K();
   }
   function L(a) {
-    const s = t.findIndex((p) => p.id === a), c = t[s] || t[s - 1] || t[0];
+    const r = t.findIndex((p) => p.id === a), c = t[r] || t[r - 1] || t[0];
     return c ? c.to : o.defaultRoute;
   }
-  async function x(a = r.value, s = {}) {
+  async function x(a = l.value, r = {}) {
     if (a) {
-      if (!s.force && o.keepLastTab && t.length === 1)
+      if (!r.force && o.keepLastTab && t.length === 1)
         throw new Error("[RouterTabs] Unable to close the final tab when keepLastTab is true.");
-      if (await M(a, { force: s.force }), s.redirect !== null)
-        if (r.value === a) {
-          const c = s.redirect ?? L(a);
+      if (await M(a, { force: r.force }), r.redirect !== null)
+        if (l.value === a) {
+          const c = r.redirect ?? L(a);
           c && await e.replace(c);
-        } else s.redirect && await e.replace(s.redirect);
+        } else r.redirect && await e.replace(r.redirect);
     }
   }
-  async function M(a, s = {}) {
+  async function M(a, r = {}) {
     const c = t.findIndex((p) => p.id === a);
-    c !== -1 && (t.splice(c, 1), b.value === a && (b.value = null), r.value === a && (r.value = null, d.value = void 0));
+    c !== -1 && (t.splice(c, 1), b.value === a && (b.value = null), l.value === a && (l.value = null, f.value = void 0));
   }
-  async function v(a = r.value ?? void 0, s = !1) {
-    a && (b.value = a, await ie(), s || await ie(), b.value = null);
+  async function y(a = l.value ?? void 0, r = !1) {
+    a && (b.value = a, await ae(), r || await ae(), b.value = null);
   }
-  async function N(a = !1) {
-    for (const s of t)
-      await v(s.id, a);
+  async function B(a = !1) {
+    for (const r of t)
+      await y(r.id, a);
   }
-  async function U(a = o.defaultRoute) {
-    t.splice(0, t.length), r.value = null, d.value = void 0;
-    for (const s of o.initialTabs) {
-      const c = A(e, s.to), p = V(c, s, o.keepAlive);
+  async function Y(a = o.defaultRoute) {
+    t.splice(0, t.length), l.value = null, f.value = void 0;
+    for (const r of o.initialTabs) {
+      const c = A(e, r.to), p = O(c, r, o.keepAlive);
       t.push(p);
     }
     await e.replace(a);
   }
-  async function $() {
-    const a = r.value;
-    a && await v(a, !0);
+  async function K() {
+    const a = l.value;
+    a && await y(a, !0);
   }
-  function B(a) {
+  function F(a) {
     return typeof a.matched == "object" ? _(a) : _(A(e, a));
   }
-  function F() {
-    const a = t.find((s) => s.id === r.value);
+  function G() {
+    const a = t.find((r) => r.id === l.value);
     return {
-      tabs: t.map(ze),
+      tabs: t.map(Be),
       active: a ? a.to : null
     };
   }
   async function I(a) {
-    u = !0, t.splice(0, t.length), r.value = null, d.value = void 0;
-    const s = a?.tabs ?? [];
-    for (const p of s)
+    u = !0, t.splice(0, t.length), l.value = null, f.value = void 0;
+    const r = a?.tabs ?? [];
+    for (const p of r)
       try {
-        const k = A(e, p.to), i = Oe(p), f = V(k, i, o.keepAlive);
-        W(t, f, "last", null);
+        const k = A(e, p.to), i = Ye(p), d = O(k, i, o.keepAlive);
+        X(t, d, "last", null);
       } catch {
       }
     u = !1;
-    const c = a?.active ?? s[s.length - 1]?.to ?? o.defaultRoute;
+    const c = a?.active ?? r[r.length - 1]?.to ?? o.defaultRoute;
     if (c)
       try {
         await e.replace(c);
@@ -188,50 +188,50 @@ function Ve(e, n = {}) {
     () => e.currentRoute.value,
     (a) => {
       if (u) return;
-      const s = C(a);
-      r.value = s.id, d.value = s, ue(t, o.maxAlive, r.value);
+      const r = w(a);
+      l.value = r.id, f.value = r, de(t, o.maxAlive, l.value);
     },
     { immediate: !0 }
   ), o.initialTabs.length && o.initialTabs.forEach((a) => {
-    const s = A(e, a.to), c = V(s, a, o.keepAlive);
-    W(t, c, "last", null);
+    const r = A(e, a.to), c = O(r, a, o.keepAlive);
+    X(t, c, "last", null);
   }), {
     options: o,
     tabs: t,
-    activeId: r,
-    current: d,
-    includeKeys: l,
+    activeId: l,
+    current: f,
+    includeKeys: s,
     refreshingKey: b,
-    openTab: S,
+    openTab: E,
     closeTab: x,
     removeTab: M,
-    refreshTab: v,
-    refreshAll: N,
-    reset: U,
-    reload: $,
-    getRouteKey: B,
+    refreshTab: y,
+    refreshAll: B,
+    reset: Y,
+    reload: K,
+    getRouteKey: F,
     matchRoute: T,
-    snapshot: F,
+    snapshot: G,
     hydrate: I
   };
 }
-function fe(e) {
+function be(e) {
   return e ? typeof e == "string" ? { name: e } : e : {};
 }
-const D = Symbol("RouterTabsContext"), De = "router-tabs:snapshot";
-function de(e = {}) {
-  const { optional: n = !1 } = e, o = oe(D, null);
+const N = Symbol("RouterTabsContext"), V = "router-tabs:snapshot";
+function pe(e = {}) {
+  const { optional: n = !1 } = e, o = se(N, null);
   if (o) return o;
-  const t = oe("$tabs", null);
+  const t = se("$tabs", null);
   if (t) return t;
-  const d = ye()?.appContext.config.globalProperties.$tabs;
-  if (d) return d;
+  const f = Te()?.appContext.config.globalProperties.$tabs;
+  if (f) return f;
   if (!n)
     throw new Error("[RouterTabs] useRouterTabs must be used within <router-tab>.");
   return null;
 }
-const Ne = 864e5;
-function Ue(e) {
+const Ge = 864e5;
+function Je(e) {
   if (typeof document > "u") return null;
   const n = `${encodeURIComponent(e)}=`, o = document.cookie ? document.cookie.split("; ") : [];
   for (const t of o)
@@ -239,27 +239,27 @@ function Ue(e) {
       return decodeURIComponent(t.slice(n.length));
   return null;
 }
-function be(e, n, o) {
+function me(e, n, o) {
   if (typeof document > "u") return;
   const {
     expiresInDays: t = 7,
-    path: r = "/",
-    domain: d,
+    path: l = "/",
+    domain: f,
     secure: b,
-    sameSite: l = "lax"
+    sameSite: s = "lax"
   } = o, u = [`${encodeURIComponent(e)}=${encodeURIComponent(n)}`];
   if (t !== 1 / 0) {
-    const T = new Date(Date.now() + t * Ne).toUTCString();
+    const T = new Date(Date.now() + t * Ge).toUTCString();
     u.push(`Expires=${T}`);
   }
-  r && u.push(`Path=${r}`), d && u.push(`Domain=${d}`), b && u.push("Secure"), l && u.push(`SameSite=${l.charAt(0).toUpperCase()}${l.slice(1)}`), document.cookie = u.join("; ");
+  l && u.push(`Path=${l}`), f && u.push(`Domain=${f}`), b && u.push("Secure"), s && u.push(`SameSite=${s.charAt(0).toUpperCase()}${s.slice(1)}`), document.cookie = u.join("; ");
 }
-function pe(e, n) {
+function ye(e, n) {
   if (typeof document > "u") return;
-  const { path: o = "/", domain: t } = n, r = [`${encodeURIComponent(e)}=`];
-  r.push("Expires=Thu, 01 Jan 1970 00:00:01 GMT"), o && r.push(`Path=${o}`), t && r.push(`Domain=${t}`), document.cookie = r.join("; ");
+  const { path: o = "/", domain: t } = n, l = [`${encodeURIComponent(e)}=`];
+  l.push("Expires=Thu, 01 Jan 1970 00:00:01 GMT"), o && l.push(`Path=${o}`), t && l.push(`Domain=${t}`), document.cookie = l.join("; ");
 }
-const Be = (e) => JSON.stringify(e ?? null), Fe = (e) => {
+const He = (e) => JSON.stringify(e ?? null), qe = (e) => {
   if (!e) return null;
   try {
     return JSON.parse(e);
@@ -267,33 +267,33 @@ const Be = (e) => JSON.stringify(e ?? null), Fe = (e) => {
     return null;
   }
 };
-function ke(e = {}) {
+function Re(e = {}) {
   const {
-    cookieKey: n = De,
-    serialize: o = Be,
-    deserialize: t = Fe
-  } = e, r = de({ optional: !0 }), d = Q(!1), b = (l) => {
-    Z(async () => {
-      const u = t(Ue(n));
+    cookieKey: n = V,
+    serialize: o = He,
+    deserialize: t = qe
+  } = e, l = pe({ optional: !0 }), f = ee(!0), b = (s) => {
+    te(async () => {
+      const u = t(Je(n));
       if (u && u.tabs?.length)
         try {
-          d.value = !0, await l.hydrate(u);
+          f.value = !0, await s.hydrate(u);
         } finally {
-          d.value = !1;
+          f.value = !1;
         }
       else
         try {
-          d.value = !0;
-          const C = e.fallbackRoute ?? l.options.defaultRoute;
-          await l.reset(C);
+          f.value = !0;
+          const w = e.fallbackRoute ?? s.options.defaultRoute;
+          await s.reset(w);
         } finally {
-          d.value = !1;
+          f.value = !1;
         }
-      const T = l.snapshot();
-      T.tabs.length ? be(n, o(T), e) : pe(n, e);
+      const T = s.snapshot();
+      T.tabs.length ? me(n, o(T), e) : ye(n, e), f.value = !1;
     }), P(
       () => ({
-        tabs: l.tabs.map((u) => ({
+        tabs: s.tabs.map((u) => ({
           to: u.to,
           title: u.title,
           tips: u.tips,
@@ -301,24 +301,24 @@ function ke(e = {}) {
           tabClass: u.tabClass,
           closable: u.closable
         })),
-        active: l.activeId.value
+        active: s.activeId.value
       }),
       () => {
-        if (d.value) return;
-        const u = l.snapshot();
-        u.tabs.length ? be(n, o(u), e) : pe(n, e);
+        if (f.value) return;
+        const u = s.snapshot();
+        u.tabs.length ? me(n, o(u), e) : ye(n, e);
       },
       { deep: !0 }
     );
   };
-  r ? b(r) : Z(() => {
-    const l = de({ optional: !0 });
-    l && b(l);
+  l ? b(l) : te(() => {
+    const s = pe({ optional: !0 });
+    s && b(s);
   });
 }
-const Ge = ge({
+const Qe = ke({
   name: "RouterTab",
-  components: { RouterView: Me },
+  components: { RouterView: Oe },
   props: {
     tabs: {
       type: Array,
@@ -358,7 +358,7 @@ const Ge = ge({
     },
     cookieKey: {
       type: String,
-      default: null
+      default: V
     },
     persistence: {
       type: Object,
@@ -366,13 +366,13 @@ const Ge = ge({
     }
   },
   setup(e) {
-    const n = ye();
+    const n = Te();
     if (!n)
       throw new Error("[RouterTab] component must be used within a Vue application context.");
     const o = n.appContext.app.config.globalProperties.$router;
     if (!o)
       throw new Error("[RouterTab] Vue Router is required. Make sure to call app.use(router) before RouterTab.");
-    const t = Ve(o, {
+    const t = Fe(o, {
       initialTabs: e.tabs,
       keepAlive: e.keepAlive,
       maxAlive: e.maxAlive,
@@ -380,15 +380,15 @@ const Ge = ge({
       appendPosition: e.append,
       defaultRoute: e.defaultPage
     });
-    _e(D, t), n.appContext.config.globalProperties.$tabs = t;
-    const r = K(() => !!n?.slots?.default);
-    if (e.cookieKey || e.persistence) {
+    $e(N, t), n.appContext.config.globalProperties.$tabs = t;
+    const l = $(() => !!n?.slots?.default);
+    if (e.cookieKey !== null || e.persistence) {
       const i = {
         ...e.persistence ?? {}
       };
-      e.cookieKey && (i.cookieKey = e.cookieKey), ke(i);
+      e.cookieKey !== null ? i.cookieKey = e.cookieKey || V : i.cookieKey || (i.cookieKey = V), Re(i);
     }
-    const d = K(() => fe(e.tabTransition)), b = K(() => fe(e.pageTransition)), l = me({
+    const f = $(() => be(e.tabTransition)), b = $(() => be(e.pageTransition)), s = ge({
       visible: !1,
       target: null,
       position: { x: 0, y: 0 }
@@ -401,25 +401,25 @@ const Ge = ge({
       "closeOthers"
     ];
     function T(i) {
-      return t.tabs.findIndex((f) => f.id === i);
+      return t.tabs.findIndex((d) => d.id === i);
     }
-    function C(i) {
-      const f = T(i.id);
-      return f > 0 ? t.tabs.slice(0, f) : [];
+    function w(i) {
+      const d = T(i.id);
+      return d > 0 ? t.tabs.slice(0, d) : [];
     }
-    function S(i) {
-      const f = T(i.id);
-      return f > -1 ? t.tabs.slice(f + 1) : [];
+    function E(i) {
+      const d = T(i.id);
+      return d > -1 ? t.tabs.slice(d + 1) : [];
     }
     function L(i) {
-      return t.tabs.filter((f) => f.id !== i.id);
+      return t.tabs.filter((d) => d.id !== i.id);
     }
-    async function x(i, f) {
-      const h = i.filter((y) => y.closable !== !1);
-      if (h.length) {
-        for (const y of h)
-          t.activeId.value === y.id ? await t.closeTab(y.id, { redirect: f.to, force: !0 }) : await t.removeTab(y.id, { force: !0 });
-        t.activeId.value !== f.id && await t.openTab(f.to, !0, !1);
+    async function x(i, d) {
+      const m = i.filter((v) => v.closable !== !1);
+      if (m.length) {
+        for (const v of m)
+          t.activeId.value === v.id ? await t.closeTab(v.id, { redirect: d.to, force: !0 }) : await t.removeTab(v.id, { force: !0 });
+        t.activeId.value !== d.id && await t.openTab(d.to, !0, !1);
       }
     }
     const M = {
@@ -445,55 +445,55 @@ const Ge = ge({
       closeLefts: {
         label: "Close to the Left",
         handler: async ({ target: i }) => {
-          await x(C(i), i);
+          await x(w(i), i);
         },
-        enable: ({ target: i }) => C(i).some((f) => f.closable !== !1)
+        enable: ({ target: i }) => w(i).some((d) => d.closable !== !1)
       },
       closeRights: {
         label: "Close to the Right",
         handler: async ({ target: i }) => {
-          await x(S(i), i);
+          await x(E(i), i);
         },
-        enable: ({ target: i }) => S(i).some((f) => f.closable !== !1)
+        enable: ({ target: i }) => E(i).some((d) => d.closable !== !1)
       },
       closeOthers: {
         label: "Close Others",
         handler: async ({ target: i }) => {
           await x(L(i), i);
         },
-        enable: ({ target: i }) => L(i).some((f) => f.closable !== !1)
+        enable: ({ target: i }) => L(i).some((d) => d.closable !== !1)
       }
     };
-    function v() {
-      l.visible = !1, l.target = null;
+    function y() {
+      s.visible = !1, s.target = null;
     }
-    function N(i, f) {
-      e.contextmenu && (l.visible = !0, l.target = i, l.position.x = f.clientX, l.position.y = f.clientY, document.addEventListener("click", v, { once: !0 }));
+    function B(i, d) {
+      e.contextmenu && (s.visible = !0, s.target = i, s.position.x = d.clientX, s.position.y = d.clientY, document.addEventListener("click", y, { once: !0 }));
     }
-    function U(i, f) {
-      const h = typeof i == "string" ? { id: i } : i, y = M[h.id], Ce = h.label ?? y?.label ?? String(h.id), G = h.visible ?? y?.visible ?? !0;
-      if (!(typeof G == "function" ? G(f) : G !== !1)) return null;
-      const J = h.enable ?? y?.enable ?? !0, Re = typeof J == "function" ? J(f) : J !== !1, ne = h.handler ?? y?.handler;
-      if (!ne) return null;
-      const we = async () => {
-        await Promise.resolve(ne(f));
+    function Y(i, d) {
+      const m = typeof i == "string" ? { id: i } : i, v = M[m.id], xe = m.label ?? v?.label ?? String(m.id), J = m.visible ?? v?.visible ?? !0;
+      if (!(typeof J == "function" ? J(d) : J !== !1)) return null;
+      const H = m.enable ?? v?.enable ?? !0, Ke = typeof H == "function" ? H(d) : H !== !1, ie = m.handler ?? v?.handler;
+      if (!ie) return null;
+      const Ie = async () => {
+        await Promise.resolve(ie(d));
       };
       return {
-        id: String(h.id),
-        label: Ce,
-        disabled: !Re,
-        action: we
+        id: String(m.id),
+        label: xe,
+        disabled: !Ke,
+        action: Ie
       };
     }
-    const $ = K(() => {
-      if (!l.visible || !l.target || e.contextmenu === !1) return [];
-      const i = Array.isArray(e.contextmenu) ? e.contextmenu : u, f = { target: l.target, controller: t };
-      return i.map((h) => U(h, f)).filter((h) => !!h);
+    const K = $(() => {
+      if (!s.visible || !s.target || e.contextmenu === !1) return [];
+      const i = Array.isArray(e.contextmenu) ? e.contextmenu : u, d = { target: s.target, controller: t };
+      return i.map((m) => Y(m, d)).filter((m) => !!m);
     });
-    async function B(i) {
-      i.disabled || (v(), await i.action());
+    async function F(i) {
+      i.disabled || (y(), await i.action());
     }
-    function F(i) {
+    function G(i) {
       return typeof i.title == "string" ? i.title : Array.isArray(i.title) && i.title.length ? String(i.title[0]) : i.fullPath;
     }
     function I(i) {
@@ -502,7 +502,7 @@ const Ge = ge({
     async function a(i) {
       await t.closeTab(i.id);
     }
-    function s(i) {
+    function r(i) {
       t.activeId.value !== i.id && t.openTab(i.to, !1);
     }
     function c(i) {
@@ -518,10 +518,10 @@ const Ge = ge({
     function p(i) {
       return t.refreshingKey.value === t.getRouteKey(i);
     }
-    Z(() => {
-      document.addEventListener("keydown", v);
-    }), Pe(() => {
-      document.removeEventListener("keydown", v), n.appContext.config.globalProperties.$tabs = null;
+    te(() => {
+      document.addEventListener("keydown", y);
+    }), Ee(() => {
+      document.removeEventListener("keydown", y), n.appContext.config.globalProperties.$tabs = null;
     }), P(
       () => e.keepAlive,
       (i) => {
@@ -529,16 +529,16 @@ const Ge = ge({
       }
     ), P(
       () => t.activeId.value,
-      () => v()
+      () => y()
     ), P(
       () => e.contextmenu,
       (i) => {
-        i || v();
+        i || y();
       }
     ), P(
-      () => $.value.length,
+      () => K.value.length,
       (i) => {
-        l.visible && i === 0 && v();
+        s.visible && i === 0 && y();
       }
     );
     const k = t.includeKeys;
@@ -546,98 +546,98 @@ const Ge = ge({
       controller: t,
       tabs: t.tabs,
       includeKeys: k,
-      tabTransitionProps: d,
+      tabTransitionProps: f,
       pageTransitionProps: b,
       buildTabClass: c,
-      activate: s,
+      activate: r,
       close: a,
-      context: l,
-      menuItems: $,
-      handleMenuAction: B,
-      showContextMenu: N,
-      hideContextMenu: v,
-      tabTitle: F,
+      context: s,
+      menuItems: K,
+      handleMenuAction: F,
+      showContextMenu: B,
+      hideContextMenu: y,
+      tabTitle: G,
       isClosable: I,
       isRefreshing: p,
-      hasCustomSlot: r
+      hasCustomSlot: l
     };
   }
-}), Je = (e, n) => {
+}), We = (e, n) => {
   const o = e.__vccOpts || e;
-  for (const [t, r] of n)
-    o[t] = r;
+  for (const [t, l] of n)
+    o[t] = l;
   return o;
-}, He = { class: "router-tab" }, Ye = { class: "router-tab__header" }, qe = { class: "router-tab__slot-start" }, We = { class: "router-tab__scroll" }, Xe = ["onClick", "onAuxclick", "onContextmenu"], Qe = ["title"], Ze = ["onClick"], et = { class: "router-tab__slot-end" }, tt = { class: "router-tab__container" }, nt = ["aria-disabled", "onClick"];
-function it(e, n, o, t, r, d) {
-  const b = xe("RouterView");
-  return m(), g("div", He, [
-    R("header", Ye, [
-      R("div", qe, [
-        H(e.$slots, "start")
+}, Xe = { class: "router-tab" }, Ze = { class: "router-tab__header" }, et = { class: "router-tab__slot-start" }, tt = { class: "router-tab__scroll" }, nt = ["onClick", "onAuxclick", "onContextmenu"], ot = ["title"], it = ["onClick"], at = { class: "router-tab__slot-end" }, st = { class: "router-tab__container" }, lt = ["aria-disabled", "onClick"];
+function rt(e, n, o, t, l, f) {
+  const b = Le("RouterView");
+  return h(), g("div", Xe, [
+    R("header", Ze, [
+      R("div", et, [
+        q(e.$slots, "start")
       ]),
-      R("div", We, [
-        E($e, j({
+      R("div", tt, [
+        D(Me, U({
           tag: "ul",
           class: "router-tab__nav"
         }, e.tabTransitionProps), {
-          default: z(() => [
-            (m(!0), g(Y, null, ae(e.tabs, (l) => (m(), g("li", {
-              key: l.id,
-              class: le(e.buildTabClass(l)),
-              onClick: (u) => e.activate(l),
-              onAuxclick: O((u) => e.close(l), ["middle", "prevent"]),
-              onContextmenu: O((u) => e.showContextMenu(l, u), ["prevent"])
+          default: j(() => [
+            (h(!0), g(Q, null, le(e.tabs, (s) => (h(), g("li", {
+              key: s.id,
+              class: re(e.buildTabClass(s)),
+              onClick: (u) => e.activate(s),
+              onAuxclick: z((u) => e.close(s), ["middle", "prevent"]),
+              onContextmenu: z((u) => e.showContextMenu(s, u), ["prevent"])
             }, [
               R("span", {
                 class: "router-tab__item-title",
-                title: e.tabTitle(l)
+                title: e.tabTitle(s)
               }, [
-                l.icon ? (m(), g("i", {
+                s.icon ? (h(), g("i", {
                   key: 0,
-                  class: le(["router-tab__item-icon", l.icon])
-                }, null, 2)) : w("", !0),
-                Ie(" " + se(e.tabTitle(l)), 1)
-              ], 8, Qe),
-              e.isClosable(l) ? (m(), g("a", {
+                  class: re(["router-tab__item-icon", s.icon])
+                }, null, 2)) : C("", !0),
+                De(" " + ce(e.tabTitle(s)), 1)
+              ], 8, ot),
+              e.isClosable(s) ? (h(), g("a", {
                 key: 0,
                 class: "router-tab__item-close",
                 type: "button",
-                onClick: O((u) => e.close(l), ["stop"])
-              }, null, 8, Ze)) : w("", !0)
-            ], 42, Xe))), 128))
+                onClick: z((u) => e.close(s), ["stop"])
+              }, null, 8, it)) : C("", !0)
+            ], 42, nt))), 128))
           ]),
           _: 1
         }, 16)
       ]),
-      R("div", et, [
-        H(e.$slots, "end")
+      R("div", at, [
+        q(e.$slots, "end")
       ])
     ]),
-    R("div", tt, [
-      E(b, null, {
-        default: z((l) => [
-          e.hasCustomSlot ? H(e.$slots, "default", Ke(j({ key: 0 }, { ...l, controller: e.controller }))) : (m(), g(Y, { key: 1 }, [
-            E(re, j(e.pageTransitionProps, { appear: "" }), {
-              default: z(() => [
-                e.controller.options.keepAlive ? (m(), q(Se, {
+    R("div", st, [
+      D(b, null, {
+        default: j((s) => [
+          e.hasCustomSlot ? q(e.$slots, "default", Ue(U({ key: 0 }, { ...s, controller: e.controller }))) : (h(), g(Q, { key: 1 }, [
+            D(ue, U(e.pageTransitionProps, { appear: "" }), {
+              default: j(() => [
+                e.controller.options.keepAlive ? (h(), W(je, {
                   key: 0,
                   include: e.includeKeys,
                   max: e.controller.options.maxAlive || void 0
                 }, [
-                  e.isRefreshing(l.route) ? w("", !0) : (m(), q(ce(l.Component), {
-                    key: e.controller.getRouteKey(l.route),
+                  e.isRefreshing(s.route) ? C("", !0) : (h(), W(fe(s.Component), {
+                    key: e.controller.getRouteKey(s.route),
                     class: "router-tab-page"
                   }))
-                ], 1032, ["include", "max"])) : w("", !0)
+                ], 1032, ["include", "max"])) : C("", !0)
               ]),
               _: 2
             }, 1040),
-            E(re, j(e.pageTransitionProps, { appear: "" }), {
-              default: z(() => [
-                !e.controller.options.keepAlive || e.isRefreshing(l.route) ? (m(), q(ce(l.Component), {
-                  key: e.controller.getRouteKey(l.route) + (e.isRefreshing(l.route) ? "-refresh" : ""),
+            D(ue, U(e.pageTransitionProps, { appear: "" }), {
+              default: j(() => [
+                !e.controller.options.keepAlive || e.isRefreshing(s.route) ? (h(), W(fe(s.Component), {
+                  key: e.controller.getRouteKey(s.route) + (e.isRefreshing(s.route) ? "-refresh" : ""),
                   class: "router-tab-page"
-                })) : w("", !0)
+                })) : C("", !0)
               ]),
               _: 2
             }, 1040)
@@ -646,24 +646,24 @@ function it(e, n, o, t, r, d) {
         _: 3
       })
     ]),
-    e.context.visible && e.context.target ? (m(), g("div", {
+    e.context.visible && e.context.target ? (h(), g("div", {
       key: 0,
       class: "router-tab__contextmenu",
-      style: Le({ left: e.context.position.x + "px", top: e.context.position.y + "px" })
+      style: ze({ left: e.context.position.x + "px", top: e.context.position.y + "px" })
     }, [
-      (m(!0), g(Y, null, ae(e.menuItems, (l) => (m(), g("a", {
-        key: l.id,
+      (h(!0), g(Q, null, le(e.menuItems, (s) => (h(), g("a", {
+        key: s.id,
         class: "router-tab__contextmenu-item",
-        "aria-disabled": l.disabled,
-        onClick: O((u) => e.handleMenuAction(l), ["prevent"])
-      }, se(l.label), 9, nt))), 128))
-    ], 4)) : w("", !0)
+        "aria-disabled": s.disabled,
+        onClick: z((u) => e.handleMenuAction(s), ["prevent"])
+      }, ce(s.label), 9, lt))), 128))
+    ], 4)) : C("", !0)
   ]);
 }
-const he = /* @__PURE__ */ Je(Ge, [["render", it]]), ot = {
+const he = /* @__PURE__ */ We(Qe, [["render", rt]]), ct = {
   class: "router-tabs",
   "aria-hidden": "true"
-}, X = /* @__PURE__ */ ge({
+}, Z = /* @__PURE__ */ ke({
   name: "RouterTabs",
   __name: "RouterTabs",
   props: {
@@ -678,30 +678,65 @@ const he = /* @__PURE__ */ Je(Ge, [["render", it]]), ot = {
     fallbackRoute: {}
   },
   setup(e) {
-    return ke(e), (o, t) => (m(), g("span", ot));
+    return Re(e), (o, t) => (h(), g("span", ct));
   }
-}), ve = {
+}), Ce = "theme-style", Ae = "theme-primary-color", ut = "system", ft = "#635bff", dt = "(prefers-color-scheme: dark)";
+let S = null;
+function _e(e) {
+  typeof document > "u" || (document.documentElement.style.setProperty("--theme-primary", e), document.documentElement.style.setProperty("--router-tab-primary", e));
+}
+function Pe(e) {
+  if (typeof document > "u") return;
+  const n = document.documentElement, o = window.matchMedia(dt), t = () => {
+    n.dataset.theme = o.matches ? "dark" : "light";
+  };
+  S && (o.removeEventListener("change", S), S = null), e === "system" ? (t(), S = () => t(), o.addEventListener("change", S)) : n.dataset.theme = e;
+}
+function bt(e = {}) {
+  if (typeof window > "u") return;
+  const {
+    styleKey: n = Ce,
+    primaryKey: o = Ae,
+    defaultStyle: t = ut,
+    defaultPrimary: l = ft
+  } = e, f = window.localStorage.getItem(n) ?? t, b = window.localStorage.getItem(o) ?? l;
+  Pe(f), _e(b);
+}
+function ht(e, n) {
+  if (typeof window > "u") return;
+  const o = n?.styleKey ?? Ce;
+  window.localStorage.setItem(o, e), Pe(e);
+}
+function vt(e, n) {
+  if (typeof window > "u") return;
+  const o = n?.primaryKey ?? Ae;
+  window.localStorage.setItem(o, e), _e(e);
+}
+const ve = {
   install(e) {
     if (ve._installed) return;
-    ve._installed = !0;
-    const n = he.name || "RouterTab", o = X.name || "RouterTabs";
-    e.component(n, he), e.component(o, X), o !== "router-tabs" && e.component("router-tabs", X), Object.defineProperty(e.config.globalProperties, "$tabs", {
+    ve._installed = !0, bt();
+    const n = he.name || "RouterTab", o = Z.name || "RouterTabs";
+    e.component(n, he), e.component(o, Z), o !== "router-tabs" && e.component("router-tabs", Z), Object.defineProperty(e.config.globalProperties, "$tabs", {
       configurable: !0,
       enumerable: !1,
       get() {
-        return e._context.provides[D];
+        return e._context.provides[N];
       },
       set(t) {
-        t && e.provide(D, t);
+        t && e.provide(N, t);
       }
     });
   }
 };
 export {
   he as RouterTab,
-  X as RouterTabs,
+  Z as RouterTabs,
   ve as default,
-  D as routerTabsKey,
-  de as useRouterTabs,
-  ke as useRouterTabsPersistence
+  bt as initRouterTabsTheme,
+  N as routerTabsKey,
+  vt as setRouterTabsPrimary,
+  ht as setRouterTabsTheme,
+  pe as useRouterTabs,
+  Re as useRouterTabsPersistence
 };