vue3-router-tab 1.1.2 → 1.1.4

package/dist/vue3-router-tab.js

@@ -1,7 +1,7 @@
 import './vue3-router-tab.css';
-import { reactive as ye, ref as Z, shallowRef as _e, computed as I, watch as P, nextTick as oe, inject as ae, getCurrentInstance as ge, onMounted as ee, defineComponent as Te, provide as Pe, onBeforeUnmount as xe, resolveComponent as $e, createElementBlock as g, openBlock as m, createElementVNode as R, createCommentVNode as w, renderSlot as Y, createVNode as E, TransitionGroup as Ke, mergeProps as j, withCtx as z, Fragment as q, renderList as le, withModifiers as O, normalizeClass as se, createTextVNode as Ie, toDisplayString as re, normalizeProps as Se, Transition as ce, createBlock as W, KeepAlive as Le, resolveDynamicComponent as ue, normalizeStyle as Me } from "vue";
-import { RouterView as Ee } from "vue-router";
-function je(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,
@@ -11,13 +11,13 @@ function je(e = {}) {
     defaultRoute: e.defaultRoute ?? "/"
   };
 }
-function A(e, i) {
-  const o = e.resolve(i);
+function A(e, n) {
+  const o = e.resolve(n);
   if (!o || !o.matched.length)
-    throw new Error(`[RouterTabs] Unable to resolve route: ${String(i)}`);
+    throw new Error(`[RouterTabs] Unable to resolve route: ${String(n)}`);
   return o;
 }
-const ze = {
+const Ne = {
   path: (e) => e.path,
   fullpath: (e) => e.fullPath,
   fullname: (e) => e.fullPath,
@@ -25,65 +25,65 @@ const ze = {
   name: (e) => e.name ? String(e.name) : e.fullPath
 };
 function _(e) {
-  const i = e.meta?.key;
-  if (typeof i == "function") {
-    const o = i(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 i == "string" && i.length) {
-    const o = ze[i.toLowerCase()];
-    return o ? o(e) : i;
+  } else if (typeof n == "string" && n.length) {
+    const o = Ne[n.toLowerCase()];
+    return o ? o(e) : n;
   }
   return e.fullPath;
 }
-function te(e, i) {
+function ne(e, n) {
   const o = e.meta?.keepAlive;
-  return typeof o == "boolean" ? o : i;
+  return typeof o == "boolean" ? o : n;
 }
-function ne(e, i) {
+function oe(e, n) {
   const o = e.meta?.reuse;
-  return typeof o == "boolean" ? o : i;
+  return typeof o == "boolean" ? o : n;
 }
-function ke(e) {
-  const i = e.meta ?? {}, o = {};
-  return "title" in i && (o.title = i.title), "tips" in i && (o.tips = i.tips), "icon" in i && (o.icon = i.icon), "closable" in i && (o.closable = i.closable), "tabClass" in i && (o.tabClass = i.tabClass), "target" in i && (o.target = i.target), "href" in i && (o.href = i.href), o;
+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, i, o) {
-  const t = ke(e);
+function O(e, n, o) {
+  const t = we(e);
   return {
     id: _(e),
     to: e.fullPath,
     fullPath: e.fullPath,
     matched: e,
-    alive: te(e, o),
-    reusable: ne(e, !1),
+    alive: ne(e, o),
+    reusable: oe(e, !1),
     closable: t.closable ?? !0,
     ...t,
-    ...i
+    ...n
   };
 }
-function X(e, i, o, t) {
-  if (!e.find((d) => d.id === i.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, i);
+      const f = e.findIndex((b) => b.id === t);
+      if (f > -1) {
+        e.splice(f + 1, 0, n);
         return;
       }
     }
-    e.push(i);
+    e.push(n);
   }
 }
-function fe(e, i, o) {
-  if (!i || i <= 0) return;
-  const t = e.filter((r) => r.alive);
-  for (; t.length > i; ) {
-    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);
+function de(e, n, o) {
+  if (!n || n <= 0) return;
+  const t = e.filter((l) => l.alive);
+  for (; t.length > n; ) {
+    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 Oe(e) {
+function Be(e) {
   return {
     to: e.to,
     title: e.title,
@@ -93,91 +93,91 @@ function Oe(e) {
     closable: e.closable
   };
 }
-function Ve(e) {
-  const i = {};
-  return "title" in e && (i.title = e.title), "tips" in e && (i.tips = e.tips), "icon" in e && (i.icon = e.icon), "tabClass" in e && (i.tabClass = e.tabClass), "closable" in e && (i.closable = e.closable), i;
+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 De(e, i = {}) {
-  const o = je(i), t = ye([]), r = Z(null), d = _e(), b = Z(null), l = I(() => 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: te(s, o.keepAlive),
-      reusable: ne(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 = te(a, o.keepAlive), c.reusable = ne(a, c.reusable), Object.assign(c, ke(a)), c) : (c = V(a, {}, o.keepAlive), X(t, c, o.appendPosition, r.value), fe(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), n = r.value === k;
-    c === "sameTab" && (c = n), c && await v(k, !0), await e[s ? "replace" : "push"](p), n && 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 oe(), s || await oe(), 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 U(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 B(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 F(a) {
     return typeof a.matched == "object" ? _(a) : _(A(e, a));
   }
   function G() {
-    const a = t.find((s) => s.id === r.value);
+    const a = t.find((r) => r.id === l.value);
     return {
-      tabs: t.map(Oe),
+      tabs: t.map(Be),
       active: a ? a.to : null
     };
   }
-  async function K(a) {
-    u = !0, t.splice(0, t.length), r.value = null, d.value = void 0;
-    const s = a?.tabs ?? [];
-    for (const p of s)
+  async function I(a) {
+    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), n = Ve(p), f = V(k, n, o.keepAlive);
-        X(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,78 +188,78 @@ function De(e, i = {}) {
     () => e.currentRoute.value,
     (a) => {
       if (u) return;
-      const s = C(a);
-      r.value = s.id, d.value = s, fe(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);
+    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: U,
-    reset: B,
-    reload: $,
+    refreshTab: y,
+    refreshAll: B,
+    reset: Y,
+    reload: K,
     getRouteKey: F,
     matchRoute: T,
     snapshot: G,
-    hydrate: K
+    hydrate: I
   };
 }
-function de(e) {
+function be(e) {
   return e ? typeof e == "string" ? { name: e } : e : {};
 }
-const N = Symbol("RouterTabsContext"), D = "router-tabs:snapshot";
-function be(e = {}) {
-  const { optional: i = !1 } = e, o = ae(N, 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 = ae("$tabs", null);
+  const t = se("$tabs", null);
   if (t) return t;
-  const d = ge()?.appContext.config.globalProperties.$tabs;
-  if (d) return d;
-  if (!i)
+  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 i = `${encodeURIComponent(e)}=`, o = document.cookie ? document.cookie.split("; ") : [];
+  const n = `${encodeURIComponent(e)}=`, o = document.cookie ? document.cookie.split("; ") : [];
   for (const t of o)
-    if (t.startsWith(i))
-      return decodeURIComponent(t.slice(i.length));
+    if (t.startsWith(n))
+      return decodeURIComponent(t.slice(n.length));
   return null;
 }
-function pe(e, i, 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"
-  } = o, u = [`${encodeURIComponent(e)}=${encodeURIComponent(i)}`];
+    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 he(e, i) {
+function ye(e, n) {
   if (typeof document > "u") return;
-  const { path: o = "/", domain: t } = i, 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 Ce(e = {}) {
+function Re(e = {}) {
   const {
-    cookieKey: i = D,
-    serialize: o = Be,
-    deserialize: t = Fe
-  } = e, r = be({ optional: !0 }), d = Z(!0), b = (l) => {
-    ee(async () => {
-      const u = t(Ue(i));
+    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 ? pe(i, o(T), e) : he(i, e), d.value = !1;
+      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 Ce(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 ? pe(i, o(u), e) : he(i, 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) : ee(() => {
-    const l = be({ optional: !0 });
-    l && b(l);
+  l ? b(l) : te(() => {
+    const s = pe({ optional: !0 });
+    s && b(s);
   });
 }
-const Ge = Te({
+const Qe = ke({
   name: "RouterTab",
-  components: { RouterView: Ee },
+  components: { RouterView: Oe },
   props: {
     tabs: {
       type: Array,
@@ -358,7 +358,7 @@ const Ge = Te({
     },
     cookieKey: {
       type: String,
-      default: D
+      default: V
     },
     persistence: {
       type: Object,
@@ -366,13 +366,13 @@ const Ge = Te({
     }
   },
   setup(e) {
-    const i = ge();
-    if (!i)
+    const n = Te();
+    if (!n)
       throw new Error("[RouterTab] component must be used within a Vue application context.");
-    const o = i.appContext.app.config.globalProperties.$router;
+    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 = De(o, {
+    const t = Fe(o, {
       initialTabs: e.tabs,
       keepAlive: e.keepAlive,
       maxAlive: e.maxAlive,
@@ -380,15 +380,15 @@ const Ge = Te({
       appendPosition: e.append,
       defaultRoute: e.defaultPage
     });
-    Pe(N, t), i.appContext.config.globalProperties.$tabs = t;
-    const r = I(() => !!i?.slots?.default);
+    $e(N, t), n.appContext.config.globalProperties.$tabs = t;
+    const l = $(() => !!n?.slots?.default);
     if (e.cookieKey !== null || e.persistence) {
-      const n = {
+      const i = {
         ...e.persistence ?? {}
       };
-      e.cookieKey !== null ? n.cookieKey = e.cookieKey || D : n.cookieKey || (n.cookieKey = D), Ce(n);
+      e.cookieKey !== null ? i.cookieKey = e.cookieKey || V : i.cookieKey || (i.cookieKey = V), Re(i);
     }
-    const d = I(() => de(e.tabTransition)), b = I(() => de(e.pageTransition)), l = ye({
+    const f = $(() => be(e.tabTransition)), b = $(() => be(e.pageTransition)), s = ge({
       visible: !1,
       target: null,
       position: { x: 0, y: 0 }
@@ -400,33 +400,33 @@ const Ge = Te({
       "closeRights",
       "closeOthers"
     ];
-    function T(n) {
-      return t.tabs.findIndex((f) => f.id === n);
+    function T(i) {
+      return t.tabs.findIndex((d) => d.id === i);
     }
-    function C(n) {
-      const f = T(n.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(n) {
-      const f = T(n.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(n) {
-      return t.tabs.filter((f) => f.id !== n.id);
+    function L(i) {
+      return t.tabs.filter((d) => d.id !== i.id);
     }
-    async function x(n, f) {
-      const h = n.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 = {
       refresh: {
         label: "Refresh",
-        handler: async ({ target: n }) => {
-          await t.refreshTab(n.id, !0);
+        handler: async ({ target: i }) => {
+          await t.refreshTab(i.id, !0);
         }
       },
       refreshAll: {
@@ -437,108 +437,108 @@ const Ge = Te({
       },
       close: {
         label: "Close",
-        handler: async ({ target: n }) => {
-          await t.closeTab(n.id);
+        handler: async ({ target: i }) => {
+          await t.closeTab(i.id);
         },
-        enable: ({ target: n }) => K(n)
+        enable: ({ target: i }) => I(i)
       },
       closeLefts: {
         label: "Close to the Left",
-        handler: async ({ target: n }) => {
-          await x(C(n), n);
+        handler: async ({ target: i }) => {
+          await x(w(i), i);
         },
-        enable: ({ target: n }) => C(n).some((f) => f.closable !== !1)
+        enable: ({ target: i }) => w(i).some((d) => d.closable !== !1)
       },
       closeRights: {
         label: "Close to the Right",
-        handler: async ({ target: n }) => {
-          await x(S(n), n);
+        handler: async ({ target: i }) => {
+          await x(E(i), i);
         },
-        enable: ({ target: n }) => S(n).some((f) => f.closable !== !1)
+        enable: ({ target: i }) => E(i).some((d) => d.closable !== !1)
       },
       closeOthers: {
         label: "Close Others",
-        handler: async ({ target: n }) => {
-          await x(L(n), n);
+        handler: async ({ target: i }) => {
+          await x(L(i), i);
         },
-        enable: ({ target: n }) => L(n).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 U(n, f) {
-      e.contextmenu && (l.visible = !0, l.target = n, 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 B(n, f) {
-      const h = typeof n == "string" ? { id: n } : n, y = M[h.id], Re = h.label ?? y?.label ?? String(h.id), J = h.visible ?? y?.visible ?? !0;
-      if (!(typeof J == "function" ? J(f) : J !== !1)) return null;
-      const H = h.enable ?? y?.enable ?? !0, we = typeof H == "function" ? H(f) : H !== !1, ie = h.handler ?? y?.handler;
+    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 Ae = async () => {
-        await Promise.resolve(ie(f));
+      const Ie = async () => {
+        await Promise.resolve(ie(d));
       };
       return {
-        id: String(h.id),
-        label: Re,
-        disabled: !we,
-        action: Ae
+        id: String(m.id),
+        label: xe,
+        disabled: !Ke,
+        action: Ie
       };
     }
-    const $ = I(() => {
-      if (!l.visible || !l.target || e.contextmenu === !1) return [];
-      const n = Array.isArray(e.contextmenu) ? e.contextmenu : u, f = { target: l.target, controller: t };
-      return n.map((h) => B(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 F(n) {
-      n.disabled || (v(), await n.action());
+    async function F(i) {
+      i.disabled || (y(), await i.action());
     }
-    function G(n) {
-      return typeof n.title == "string" ? n.title : Array.isArray(n.title) && n.title.length ? String(n.title[0]) : n.fullPath;
+    function G(i) {
+      return typeof i.title == "string" ? i.title : Array.isArray(i.title) && i.title.length ? String(i.title[0]) : i.fullPath;
     }
-    function K(n) {
-      return !(n.closable === !1 || t.options.keepLastTab && t.tabs.length <= 1);
+    function I(i) {
+      return !(i.closable === !1 || t.options.keepLastTab && t.tabs.length <= 1);
     }
-    async function a(n) {
-      await t.closeTab(n.id);
+    async function a(i) {
+      await t.closeTab(i.id);
     }
-    function s(n) {
-      t.activeId.value !== n.id && t.openTab(n.to, !1);
+    function r(i) {
+      t.activeId.value !== i.id && t.openTab(i.to, !1);
     }
-    function c(n) {
+    function c(i) {
       return [
         "router-tab__item",
         {
-          "is-active": t.activeId.value === n.id,
-          "is-closable": K(n)
+          "is-active": t.activeId.value === i.id,
+          "is-closable": I(i)
         },
-        n.tabClass
+        i.tabClass
       ];
     }
-    function p(n) {
-      return t.refreshingKey.value === t.getRouteKey(n);
+    function p(i) {
+      return t.refreshingKey.value === t.getRouteKey(i);
     }
-    ee(() => {
-      document.addEventListener("keydown", v);
-    }), xe(() => {
-      document.removeEventListener("keydown", v), i.appContext.config.globalProperties.$tabs = null;
+    te(() => {
+      document.addEventListener("keydown", y);
+    }), Ee(() => {
+      document.removeEventListener("keydown", y), n.appContext.config.globalProperties.$tabs = null;
     }), P(
       () => e.keepAlive,
-      (n) => {
-        t.options.keepAlive = n;
+      (i) => {
+        t.options.keepAlive = i;
       }
     ), P(
       () => t.activeId.value,
-      () => v()
+      () => y()
     ), P(
       () => e.contextmenu,
-      (n) => {
-        n || v();
+      (i) => {
+        i || y();
       }
     ), P(
-      () => $.value.length,
-      (n) => {
-        l.visible && n === 0 && v();
+      () => K.value.length,
+      (i) => {
+        s.visible && i === 0 && y();
       }
     );
     const k = t.includeKeys;
@@ -546,98 +546,98 @@ const Ge = Te({
       controller: t,
       tabs: t.tabs,
       includeKeys: k,
-      tabTransitionProps: d,
+      tabTransitionProps: f,
       pageTransitionProps: b,
       buildTabClass: c,
-      activate: s,
+      activate: r,
       close: a,
-      context: l,
-      menuItems: $,
+      context: s,
+      menuItems: K,
       handleMenuAction: F,
-      showContextMenu: U,
-      hideContextMenu: v,
+      showContextMenu: B,
+      hideContextMenu: y,
       tabTitle: G,
-      isClosable: K,
+      isClosable: I,
       isRefreshing: p,
-      hasCustomSlot: r
+      hasCustomSlot: l
     };
   }
-}), Je = (e, i) => {
+}), We = (e, n) => {
   const o = e.__vccOpts || e;
-  for (const [t, r] of i)
-    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, i, o, t, r, d) {
-  const b = $e("RouterView");
-  return m(), g("div", He, [
-    R("header", Ye, [
-      R("div", qe, [
-        Y(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(Ke, j({
+      R("div", tt, [
+        D(Me, U({
           tag: "ul",
           class: "router-tab__nav"
         }, e.tabTransitionProps), {
-          default: z(() => [
-            (m(!0), g(q, null, le(e.tabs, (l) => (m(), g("li", {
-              key: l.id,
-              class: se(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: se(["router-tab__item-icon", l.icon])
-                }, null, 2)) : w("", !0),
-                Ie(" " + re(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, [
-        Y(e.$slots, "end")
+      R("div", at, [
+        q(e.$slots, "end")
       ])
     ]),
-    R("div", tt, [
-      E(b, null, {
-        default: z((l) => [
-          e.hasCustomSlot ? Y(e.$slots, "default", Se(j({ key: 0 }, { ...l, controller: e.controller }))) : (m(), g(q, { key: 1 }, [
-            E(ce, j(e.pageTransitionProps, { appear: "" }), {
-              default: z(() => [
-                e.controller.options.keepAlive ? (m(), W(Le, {
+    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(), W(ue(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(ce, j(e.pageTransitionProps, { appear: "" }), {
-              default: z(() => [
-                !e.controller.options.keepAlive || e.isRefreshing(l.route) ? (m(), W(ue(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, i, 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: Me({ 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(q, null, le(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"])
-      }, re(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 ve = /* @__PURE__ */ Je(Ge, [["render", it]]), ot = {
+const he = /* @__PURE__ */ We(Qe, [["render", rt]]), ct = {
   class: "router-tabs",
   "aria-hidden": "true"
-}, Q = /* @__PURE__ */ Te({
+}, Z = /* @__PURE__ */ ke({
   name: "RouterTabs",
   __name: "RouterTabs",
   props: {
@@ -678,14 +678,46 @@ const ve = /* @__PURE__ */ Je(Ge, [["render", it]]), ot = {
     fallbackRoute: {}
   },
   setup(e) {
-    return Ce(e), (o, t) => (m(), g("span", ot));
+    return Re(e), (o, t) => (h(), g("span", ct));
   }
-}), me = {
+}), Ce = "tab-theme-style", Ae = "tab-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 (me._installed) return;
-    me._installed = !0;
-    const i = ve.name || "RouterTab", o = Q.name || "RouterTabs";
-    e.component(i, ve), e.component(o, Q), o !== "router-tabs" && e.component("router-tabs", Q), Object.defineProperty(e.config.globalProperties, "$tabs", {
+    if (ve._installed) return;
+    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() {
@@ -698,10 +730,13 @@ const ve = /* @__PURE__ */ Je(Ge, [["render", it]]), ot = {
   }
 };
 export {
-  ve as RouterTab,
-  Q as RouterTabs,
-  me as default,
+  he as RouterTab,
+  Z as RouterTabs,
+  ve as default,
+  bt as initRouterTabsTheme,
   N as routerTabsKey,
-  be as useRouterTabs,
-  Ce as useRouterTabsPersistence
+  vt as setRouterTabsPrimary,
+  ht as setRouterTabsTheme,
+  pe as useRouterTabs,
+  Re as useRouterTabsPersistence
 };