vue3-router-tab 1.0.9 → 1.1.1

package/dist/vue3-router-tab.js

@@ -1,116 +1,7 @@
 import './vue3-router-tab.css';
-import { defineComponent as se, inject as U, computed as S, unref as Ie, provide as G, ref as J, watch as x, h as Ke, getCurrentInstance as ie, reactive as Se, shallowRef as Ne, nextTick as le, onMounted as ne, onBeforeUnmount as $e, resolveComponent as Le, createElementBlock as A, openBlock as T, createElementVNode as I, createCommentVNode as K, renderSlot as ce, createVNode as j, TransitionGroup as De, mergeProps as Q, withCtx as M, Fragment as ue, renderList as fe, withModifiers as B, normalizeClass as de, createTextVNode as je, toDisplayString as pe, Transition as be, createBlock as W, KeepAlive as Me, resolveDynamicComponent as ve, normalizeStyle as Be } from "vue";
-import { defineStore as ze } from "pinia";
-/*!
-  * vue-router v4.5.1
-  * (c) 2025 Eduardo San Martin Morote
-  * @license MIT
-  */
-const Ge = typeof document < "u", Ue = Object.assign, Je = Array.isArray;
-function He(e) {
-  const a = Array.from(arguments).slice(1);
-  console.warn.apply(console, ["[Vue Router warn]: " + e].concat(a));
-}
-function qe(e, a) {
-  return (e.aliasOf || e) === (a.aliasOf || a);
-}
-var he;
-(function(e) {
-  e.pop = "pop", e.push = "push";
-})(he || (he = {}));
-var me;
-(function(e) {
-  e.back = "back", e.forward = "forward", e.unknown = "";
-})(me || (me = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "navigation failure" : "");
-var ye;
-(function(e) {
-  e[e.aborted = 4] = "aborted", e[e.cancelled = 8] = "cancelled", e[e.duplicated = 16] = "duplicated";
-})(ye || (ye = {}));
-const Xe = Symbol(process.env.NODE_ENV !== "production" ? "router view location matched" : ""), ge = Symbol(process.env.NODE_ENV !== "production" ? "router view depth" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "route location" : "");
-const we = Symbol(process.env.NODE_ENV !== "production" ? "router view location" : ""), Ye = /* @__PURE__ */ se({
-  name: "RouterView",
-  // #674 we manually inherit them
-  inheritAttrs: !1,
-  props: {
-    name: {
-      type: String,
-      default: "default"
-    },
-    route: Object
-  },
-  // Better compat for @vue/compat users
-  // https://github.com/vuejs/router/issues/1315
-  compatConfig: { MODE: 3 },
-  setup(e, { attrs: a, slots: n }) {
-    process.env.NODE_ENV !== "production" && Qe();
-    const t = U(we), l = S(() => e.route || t.value), p = U(ge, 0), d = S(() => {
-      let v = Ie(p);
-      const { matched: b } = l.value;
-      let m;
-      for (; (m = b[v]) && !m.components; )
-        v++;
-      return v;
-    }), i = S(() => l.value.matched[d.value]);
-    G(ge, S(() => d.value + 1)), G(Xe, i), G(we, l);
-    const f = J();
-    return x(() => [f.value, i.value, e.name], ([v, b, m], [k, y, C]) => {
-      b && (b.instances[m] = v, y && y !== b && v && v === k && (b.leaveGuards.size || (b.leaveGuards = y.leaveGuards), b.updateGuards.size || (b.updateGuards = y.updateGuards))), v && b && // if there is no instance but to and from are the same this might be
-      // the first visit
-      (!y || !qe(b, y) || !k) && (b.enterCallbacks[m] || []).forEach((_) => _(v));
-    }, { flush: "post" }), () => {
-      const v = l.value, b = e.name, m = i.value, k = m && m.components[b];
-      if (!k)
-        return Te(n.default, { Component: k, route: v });
-      const y = m.props[b], C = y ? y === !0 ? v.params : typeof y == "function" ? y(v) : y : null, g = Ke(k, Ue({}, C, a, {
-        onVnodeUnmounted: (E) => {
-          E.component.isUnmounted && (m.instances[b] = null);
-        },
-        ref: f
-      }));
-      if (process.env.NODE_ENV !== "production" && Ge && g.ref) {
-        const E = {
-          depth: d.value,
-          name: m.name,
-          path: m.path,
-          meta: m.meta
-        };
-        (Je(g.ref) ? g.ref.map((P) => P.i) : [g.ref.i]).forEach((P) => {
-          P.__vrv_devtools = E;
-        });
-      }
-      return (
-        // pass the vnode to the slot as a prop.
-        // h and <component :is="..."> both accept vnodes
-        Te(n.default, { Component: g, route: v }) || g
-      );
-    };
-  }
-});
-function Te(e, a) {
-  if (!e)
-    return null;
-  const n = e(a);
-  return n.length === 1 ? n[0] : n;
-}
-const Fe = Ye;
-function Qe() {
-  const e = ie(), a = e.parent && e.parent.type.name, n = e.parent && e.parent.subTree && e.parent.subTree.type;
-  if (a && (a === "KeepAlive" || a.includes("Transition")) && typeof n == "object" && n.name === "RouterView") {
-    const t = a === "KeepAlive" ? "keep-alive" : "transition";
-    He(`<router-view> can no longer be used directly inside <transition> or <keep-alive>.
-Use slot props instead:
-
-<router-view v-slot="{ Component }">
-  <${t}>
-    <component :is="Component" />
-  </${t}>
-</router-view>`);
-  }
-}
-function We(e = {}) {
+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 = {}) {
   return {
     initialTabs: e.initialTabs ?? [],
     keepAlive: e.keepAlive ?? !0,
@@ -120,79 +11,79 @@ function We(e = {}) {
     defaultRoute: e.defaultRoute ?? "/"
   };
 }
-function N(e, a) {
-  const n = e.resolve(a);
-  if (!n || !n.matched.length)
-    throw new Error(`[RouterTabs] Unable to resolve route: ${String(a)}`);
-  return n;
+function A(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 Ze = {
+const je = {
   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 $(e) {
-  const a = e.meta?.key;
-  if (typeof a == "function") {
-    const n = a(e);
-    if (typeof n == "string" && n.length) return n;
-  } else if (typeof a == "string" && a.length) {
-    const n = Ze[a.toLowerCase()];
-    return n ? n(e) : a;
+function _(e) {
+  const n = e.meta?.key;
+  if (typeof n == "function") {
+    const o = n(e);
+    if (typeof o == "string" && o.length) return o;
+  } else if (typeof n == "string" && n.length) {
+    const o = je[n.toLowerCase()];
+    return o ? o(e) : n;
   }
   return e.fullPath;
 }
-function ae(e, a) {
-  const n = e.meta?.keepAlive;
-  return typeof n == "boolean" ? n : a;
+function ee(e, n) {
+  const o = e.meta?.keepAlive;
+  return typeof o == "boolean" ? o : n;
 }
-function oe(e, a) {
-  const n = e.meta?.reuse;
-  return typeof n == "boolean" ? n : a;
+function te(e, n) {
+  const o = e.meta?.reuse;
+  return typeof o == "boolean" ? o : n;
 }
-function Pe(e) {
-  const a = e.meta ?? {}, n = {};
-  return "title" in a && (n.title = a.title), "tips" in a && (n.tips = a.tips), "icon" in a && (n.icon = a.icon), "closable" in a && (n.closable = a.closable), "tabClass" in a && (n.tabClass = a.tabClass), "target" in a && (n.target = a.target), "href" in a && (n.href = a.href), n;
+function Te(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 z(e, a, n) {
-  const t = Pe(e);
+function V(e, n, o) {
+  const t = Te(e);
   return {
-    id: $(e),
+    id: _(e),
     to: e.fullPath,
     fullPath: e.fullPath,
     matched: e,
-    alive: ae(e, n),
-    reusable: oe(e, !1),
+    alive: ee(e, o),
+    reusable: te(e, !1),
     closable: t.closable ?? !0,
     ...t,
-    ...a
+    ...n
   };
 }
-function Z(e, a, n, t) {
-  if (!e.find((p) => p.id === a.id)) {
-    if (n === "next" && t) {
-      const p = e.findIndex((d) => d.id === t);
-      if (p > -1) {
-        e.splice(p + 1, 0, a);
+function W(e, n, o, t) {
+  if (!e.find((d) => d.id === n.id)) {
+    if (o === "next" && t) {
+      const d = e.findIndex((b) => b.id === t);
+      if (d > -1) {
+        e.splice(d + 1, 0, n);
         return;
       }
     }
-    e.push(a);
+    e.push(n);
   }
 }
-function ke(e, a, n) {
-  if (!a || a <= 0) return;
-  const t = e.filter((l) => l.alive);
-  for (; t.length > a; ) {
-    const l = t.shift();
-    if (!l || l.id === n) continue;
-    const p = e.findIndex((d) => d.id === l.id);
-    p > -1 && (e[p].alive = !1);
+function ue(e, n, o) {
+  if (!n || n <= 0) return;
+  const t = e.filter((r) => r.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);
   }
 }
-function et(e) {
+function ze(e) {
   return {
     to: e.to,
     title: e.title,
@@ -202,134 +93,232 @@ function et(e) {
     closable: e.closable
   };
 }
-function tt(e) {
-  const a = {};
-  return "title" in e && (a.title = e.title), "tips" in e && (a.tips = e.tips), "icon" in e && (a.icon = e.icon), "tabClass" in e && (a.tabClass = e.tabClass), "closable" in e && (a.closable = e.closable), a;
+function Oe(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 nt(e, a = {}) {
-  const n = We(a), t = Se([]), l = J(null), p = Ne(), d = J(null), i = S(() => t.filter((s) => s.alive).map((s) => s.id));
-  let f = !1;
-  function v(s) {
-    const r = typeof s.matched == "object" ? s : N(e, s);
+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));
+  let u = !1;
+  function T(a) {
+    const s = typeof a.matched == "object" ? a : A(e, a);
     return {
-      key: $(r),
-      fullPath: r.fullPath,
-      alive: ae(r, n.keepAlive),
-      reusable: oe(r, !1),
-      matched: r
+      key: _(s),
+      fullPath: s.fullPath,
+      alive: ee(s, o.keepAlive),
+      reusable: te(s, !1),
+      matched: s
     };
   }
-  function b(s) {
-    const r = $(s);
-    let c = t.find((w) => w.id === r);
-    return c ? (c.fullPath = s.fullPath, c.to = s.fullPath, c.matched = s, c.alive = ae(s, n.keepAlive), c.reusable = oe(s, c.reusable), Object.assign(c, Pe(s)), c) : (c = z(s, {}, n.keepAlive), Z(t, c, n.appendPosition, l.value), ke(t, n.maxAlive, l.value), c);
+  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);
   }
-  async function m(s, r = !1, c = !0) {
-    const w = N(e, s), O = $(w), V = l.value === O;
-    c === "sameTab" && (c = V), c && await _(O, !0), await e[r ? "replace" : "push"](w), V && await L();
+  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 $();
   }
-  function k(s) {
-    const r = t.findIndex((w) => w.id === s), c = t[r] || t[r - 1] || t[0];
-    return c ? c.to : n.defaultRoute;
+  function L(a) {
+    const s = t.findIndex((p) => p.id === a), c = t[s] || t[s - 1] || t[0];
+    return c ? c.to : o.defaultRoute;
   }
-  async function y(s = l.value, r = {}) {
-    if (s) {
-      if (!r.force && n.keepLastTab && t.length === 1)
+  async function x(a = r.value, s = {}) {
+    if (a) {
+      if (!s.force && o.keepLastTab && t.length === 1)
         throw new Error("[RouterTabs] Unable to close the final tab when keepLastTab is true.");
-      if (await C(s, { force: r.force }), r.redirect !== null)
-        if (l.value === s) {
-          const c = r.redirect ?? k(s);
+      if (await M(a, { force: s.force }), s.redirect !== null)
+        if (r.value === a) {
+          const c = s.redirect ?? L(a);
           c && await e.replace(c);
-        } else r.redirect && await e.replace(r.redirect);
+        } else s.redirect && await e.replace(s.redirect);
     }
   }
-  async function C(s, r = {}) {
-    const c = t.findIndex((w) => w.id === s);
-    c !== -1 && (t.splice(c, 1), d.value === s && (d.value = null), l.value === s && (l.value = null, p.value = void 0));
+  async function M(a, s = {}) {
+    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));
   }
-  async function _(s = l.value ?? void 0, r = !1) {
-    s && (d.value = s, await le(), r || await le(), d.value = null);
+  async function v(a = r.value ?? void 0, s = !1) {
+    a && (b.value = a, await ie(), s || await ie(), b.value = null);
   }
-  async function g(s = !1) {
-    for (const r of t)
-      await _(r.id, s);
+  async function N(a = !1) {
+    for (const s of t)
+      await v(s.id, a);
   }
-  async function E(s = n.defaultRoute) {
-    t.splice(0, t.length), l.value = null, p.value = void 0;
-    for (const r of n.initialTabs) {
-      const c = N(e, r.to), w = z(c, r, n.keepAlive);
-      t.push(w);
+  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);
+      t.push(p);
     }
-    await e.replace(s);
+    await e.replace(a);
   }
-  async function L() {
-    const s = l.value;
-    s && await _(s, !0);
+  async function $() {
+    const a = r.value;
+    a && await v(a, !0);
   }
-  function P(s) {
-    return typeof s.matched == "object" ? $(s) : $(N(e, s));
+  function B(a) {
+    return typeof a.matched == "object" ? _(a) : _(A(e, a));
   }
-  function q() {
-    const s = t.find((r) => r.id === l.value);
+  function F() {
+    const a = t.find((s) => s.id === r.value);
     return {
-      tabs: t.map(et),
-      active: s ? s.to : null
+      tabs: t.map(ze),
+      active: a ? a.to : null
     };
   }
-  async function X(s) {
-    f = !0, t.splice(0, t.length), l.value = null, p.value = void 0;
-    const r = s?.tabs ?? [];
-    for (const w of r)
+  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)
       try {
-        const O = N(e, w.to), V = tt(w), D = z(O, V, n.keepAlive);
-        Z(t, D, "last", null);
+        const k = A(e, p.to), i = Oe(p), f = V(k, i, o.keepAlive);
+        W(t, f, "last", null);
       } catch {
       }
-    f = !1;
-    const c = s?.active ?? r[r.length - 1]?.to ?? n.defaultRoute;
+    u = !1;
+    const c = a?.active ?? s[s.length - 1]?.to ?? o.defaultRoute;
     if (c)
       try {
         await e.replace(c);
       } catch {
       }
   }
-  return x(
+  return P(
     () => e.currentRoute.value,
-    (s) => {
-      if (f) return;
-      const r = b(s);
-      l.value = r.id, p.value = r, ke(t, n.maxAlive, l.value);
+    (a) => {
+      if (u) return;
+      const s = C(a);
+      r.value = s.id, d.value = s, ue(t, o.maxAlive, r.value);
     },
     { immediate: !0 }
-  ), n.initialTabs.length && n.initialTabs.forEach((s) => {
-    const r = N(e, s.to), c = z(r, s, n.keepAlive);
-    Z(t, c, "last", null);
+  ), o.initialTabs.length && o.initialTabs.forEach((a) => {
+    const s = A(e, a.to), c = V(s, a, o.keepAlive);
+    W(t, c, "last", null);
   }), {
-    options: n,
+    options: o,
     tabs: t,
-    activeId: l,
-    current: p,
-    includeKeys: i,
-    refreshingKey: d,
-    openTab: m,
-    closeTab: y,
-    removeTab: C,
-    refreshTab: _,
-    refreshAll: g,
-    reset: E,
-    reload: L,
-    getRouteKey: P,
-    matchRoute: v,
-    snapshot: q,
-    hydrate: X
+    activeId: r,
+    current: d,
+    includeKeys: l,
+    refreshingKey: b,
+    openTab: S,
+    closeTab: x,
+    removeTab: M,
+    refreshTab: v,
+    refreshAll: N,
+    reset: U,
+    reload: $,
+    getRouteKey: B,
+    matchRoute: T,
+    snapshot: F,
+    hydrate: I
   };
 }
-function Re(e) {
+function fe(e) {
   return e ? typeof e == "string" ? { name: e } : e : {};
 }
-const H = Symbol("RouterTabsContext"), ee = typeof window < "u" && "sessionStorage" in window, at = se({
+const D = Symbol("RouterTabsContext"), De = "router-tabs:snapshot";
+function de(e = {}) {
+  const { optional: n = !1 } = e, o = oe(D, null);
+  if (o) return o;
+  const t = oe("$tabs", null);
+  if (t) return t;
+  const d = ye()?.appContext.config.globalProperties.$tabs;
+  if (d) return d;
+  if (!n)
+    throw new Error("[RouterTabs] useRouterTabs must be used within <router-tab>.");
+  return null;
+}
+const Ne = 864e5;
+function Ue(e) {
+  if (typeof document > "u") return null;
+  const n = `${encodeURIComponent(e)}=`, o = document.cookie ? document.cookie.split("; ") : [];
+  for (const t of o)
+    if (t.startsWith(n))
+      return decodeURIComponent(t.slice(n.length));
+  return null;
+}
+function be(e, n, o) {
+  if (typeof document > "u") return;
+  const {
+    expiresInDays: t = 7,
+    path: r = "/",
+    domain: d,
+    secure: b,
+    sameSite: l = "lax"
+  } = o, u = [`${encodeURIComponent(e)}=${encodeURIComponent(n)}`];
+  if (t !== 1 / 0) {
+    const T = new Date(Date.now() + t * Ne).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("; ");
+}
+function pe(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 Be = (e) => JSON.stringify(e ?? null), Fe = (e) => {
+  if (!e) return null;
+  try {
+    return JSON.parse(e);
+  } catch {
+    return null;
+  }
+};
+function ke(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));
+      if (u && u.tabs?.length)
+        try {
+          d.value = !0, await l.hydrate(u);
+        } finally {
+          d.value = !1;
+        }
+      else
+        try {
+          d.value = !0;
+          const C = e.fallbackRoute ?? l.options.defaultRoute;
+          await l.reset(C);
+        } finally {
+          d.value = !1;
+        }
+      const T = l.snapshot();
+      T.tabs.length ? be(n, o(T), e) : pe(n, e);
+    }), P(
+      () => ({
+        tabs: l.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
+      }),
+      () => {
+        if (d.value) return;
+        const u = l.snapshot();
+        u.tabs.length ? be(n, o(u), e) : pe(n, e);
+      },
+      { deep: !0 }
+    );
+  };
+  r ? b(r) : Z(() => {
+    const l = de({ optional: !0 });
+    l && b(l);
+  });
+}
+const Ge = ge({
   name: "RouterTab",
-  components: { RouterView: Fe },
+  components: { RouterView: Me },
   props: {
     tabs: {
       type: Array,
@@ -367,19 +356,23 @@ const H = Symbol("RouterTabsContext"), ee = typeof window < "u" && "sessionStora
       type: [Boolean, Array],
       default: !0
     },
-    storage: {
-      type: [Boolean, String],
-      default: !1
+    cookieKey: {
+      type: String,
+      default: null
+    },
+    persistence: {
+      type: Object,
+      default: null
     }
   },
   setup(e) {
-    const a = ie();
-    if (!a)
-      throw new Error("[RouterTab] component must be used within a Vue application context.");
-    const n = a.appContext.app.config.globalProperties.$router;
+    const n = ye();
     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 = nt(n, {
+    const t = Ve(o, {
       initialTabs: e.tabs,
       keepAlive: e.keepAlive,
       maxAlive: e.maxAlive,
@@ -387,14 +380,19 @@ const H = Symbol("RouterTabsContext"), ee = typeof window < "u" && "sessionStora
       appendPosition: e.append,
       defaultRoute: e.defaultPage
     });
-    G(H, t), a.appContext.config.globalProperties.$tabs = t;
-    const l = S(() => Re(e.tabTransition)), p = S(() => Re(e.pageTransition)), d = Se({
+    _e(D, t), n.appContext.config.globalProperties.$tabs = t;
+    const r = K(() => !!n?.slots?.default);
+    if (e.cookieKey || e.persistence) {
+      const i = {
+        ...e.persistence ?? {}
+      };
+      e.cookieKey && (i.cookieKey = e.cookieKey), ke(i);
+    }
+    const d = K(() => fe(e.tabTransition)), b = K(() => fe(e.pageTransition)), l = me({
       visible: !1,
       target: null,
       position: { x: 0, y: 0 }
-    }), i = S(() => !e.storage || !ee ? null : typeof e.storage == "string" ? e.storage : `router-tabs:${(n.options?.history?.base ?? "") || "default"}`);
-    let f = !!i.value;
-    const v = [
+    }), u = [
       "refresh",
       "refreshAll",
       "close",
@@ -402,33 +400,33 @@ const H = Symbol("RouterTabsContext"), ee = typeof window < "u" && "sessionStora
       "closeRights",
       "closeOthers"
     ];
-    function b(o) {
-      return t.tabs.findIndex((u) => u.id === o);
+    function T(i) {
+      return t.tabs.findIndex((f) => f.id === i);
     }
-    function m(o) {
-      const u = b(o.id);
-      return u > 0 ? t.tabs.slice(0, u) : [];
+    function C(i) {
+      const f = T(i.id);
+      return f > 0 ? t.tabs.slice(0, f) : [];
     }
-    function k(o) {
-      const u = b(o.id);
-      return u > -1 ? t.tabs.slice(u + 1) : [];
+    function S(i) {
+      const f = T(i.id);
+      return f > -1 ? t.tabs.slice(f + 1) : [];
     }
-    function y(o) {
-      return t.tabs.filter((u) => u.id !== o.id);
+    function L(i) {
+      return t.tabs.filter((f) => f.id !== i.id);
     }
-    async function C(o, u) {
-      const h = o.filter((R) => R.closable !== !1);
+    async function x(i, f) {
+      const h = i.filter((y) => y.closable !== !1);
       if (h.length) {
-        for (const R of h)
-          t.activeId.value === R.id ? await t.closeTab(R.id, { redirect: u.to, force: !0 }) : await t.removeTab(R.id, { force: !0 });
-        t.activeId.value !== u.id && await t.openTab(u.to, !0, !1);
+        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);
       }
     }
-    const _ = {
+    const M = {
       refresh: {
         label: "Refresh",
-        handler: async ({ target: o }) => {
-          await t.refreshTab(o.id, !0);
+        handler: async ({ target: i }) => {
+          await t.refreshTab(i.id, !0);
         }
       },
       refreshAll: {
@@ -439,393 +437,271 @@ const H = Symbol("RouterTabsContext"), ee = typeof window < "u" && "sessionStora
       },
       close: {
         label: "Close",
-        handler: async ({ target: o }) => {
-          await t.closeTab(o.id);
+        handler: async ({ target: i }) => {
+          await t.closeTab(i.id);
         },
-        enable: ({ target: o }) => s(o)
+        enable: ({ target: i }) => I(i)
       },
       closeLefts: {
         label: "Close to the Left",
-        handler: async ({ target: o }) => {
-          await C(m(o), o);
+        handler: async ({ target: i }) => {
+          await x(C(i), i);
         },
-        enable: ({ target: o }) => m(o).some((u) => u.closable !== !1)
+        enable: ({ target: i }) => C(i).some((f) => f.closable !== !1)
       },
       closeRights: {
         label: "Close to the Right",
-        handler: async ({ target: o }) => {
-          await C(k(o), o);
+        handler: async ({ target: i }) => {
+          await x(S(i), i);
         },
-        enable: ({ target: o }) => k(o).some((u) => u.closable !== !1)
+        enable: ({ target: i }) => S(i).some((f) => f.closable !== !1)
       },
       closeOthers: {
         label: "Close Others",
-        handler: async ({ target: o }) => {
-          await C(y(o), o);
+        handler: async ({ target: i }) => {
+          await x(L(i), i);
         },
-        enable: ({ target: o }) => y(o).some((u) => u.closable !== !1)
+        enable: ({ target: i }) => L(i).some((f) => f.closable !== !1)
       }
     };
-    function g() {
-      d.visible = !1, d.target = null;
+    function v() {
+      l.visible = !1, l.target = null;
     }
-    function E(o, u) {
-      e.contextmenu && (d.visible = !0, d.target = o, d.position.x = u.clientX, d.position.y = u.clientY, document.addEventListener("click", g, { once: !0 }));
+    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 L(o, u) {
-      const h = typeof o == "string" ? { id: o } : o, R = _[h.id], Ee = h.label ?? R?.label ?? String(h.id), Y = h.visible ?? R?.visible ?? !0;
-      if (!(typeof Y == "function" ? Y(u) : Y !== !1)) return null;
-      const F = h.enable ?? R?.enable ?? !0, Oe = typeof F == "function" ? F(u) : F !== !1, re = h.handler ?? R?.handler;
-      if (!re) return null;
-      const Ve = async () => {
-        await Promise.resolve(re(u));
+    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));
       };
       return {
         id: String(h.id),
-        label: Ee,
-        disabled: !Oe,
-        action: Ve
+        label: Ce,
+        disabled: !Re,
+        action: we
       };
     }
-    const P = S(() => {
-      if (!d.visible || !d.target || e.contextmenu === !1) return [];
-      const o = Array.isArray(e.contextmenu) ? e.contextmenu : v, u = { target: d.target, controller: t };
-      return o.map((h) => L(h, u)).filter((h) => !!h);
+    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);
     });
-    async function q(o) {
-      o.disabled || (g(), await o.action());
+    async function B(i) {
+      i.disabled || (v(), await i.action());
     }
-    function X(o) {
-      return typeof o.title == "string" ? o.title : Array.isArray(o.title) && o.title.length ? String(o.title[0]) : o.fullPath;
+    function F(i) {
+      return typeof i.title == "string" ? i.title : Array.isArray(i.title) && i.title.length ? String(i.title[0]) : i.fullPath;
     }
-    function s(o) {
-      return !(o.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 r(o) {
-      await t.closeTab(o.id);
+    async function a(i) {
+      await t.closeTab(i.id);
     }
-    function c(o) {
-      t.activeId.value !== o.id && t.openTab(o.to, !1);
+    function s(i) {
+      t.activeId.value !== i.id && t.openTab(i.to, !1);
     }
-    function w(o) {
+    function c(i) {
       return [
         "router-tab__item",
         {
-          "is-active": t.activeId.value === o.id,
-          "is-closable": s(o)
+          "is-active": t.activeId.value === i.id,
+          "is-closable": I(i)
         },
-        o.tabClass
+        i.tabClass
       ];
     }
-    function O(o) {
-      return t.refreshingKey.value === t.getRouteKey(o);
-    }
-    async function V() {
-      const o = i.value;
-      if (!o || !ee) return;
-      const u = window.sessionStorage.getItem(o);
-      if (u)
-        try {
-          const h = JSON.parse(u);
-          if (!h || !Array.isArray(h.tabs)) return;
-          f = !0, await t.hydrate(h);
-        } catch {
-        } finally {
-          f = !1, D();
-        }
-    }
-    function D() {
-      const o = i.value;
-      if (!(!o || !ee || f))
-        try {
-          const u = t.snapshot();
-          window.sessionStorage.setItem(o, JSON.stringify(u));
-        } catch {
-        }
+    function p(i) {
+      return t.refreshingKey.value === t.getRouteKey(i);
     }
-    ne(() => {
-      document.addEventListener("keydown", g), V();
-    }), $e(() => {
-      document.removeEventListener("keydown", g), a.appContext.config.globalProperties.$tabs = null, D();
-    }), x(
+    Z(() => {
+      document.addEventListener("keydown", v);
+    }), Pe(() => {
+      document.removeEventListener("keydown", v), n.appContext.config.globalProperties.$tabs = null;
+    }), P(
       () => e.keepAlive,
-      (o) => {
-        t.options.keepAlive = o;
+      (i) => {
+        t.options.keepAlive = i;
       }
-    ), x(
+    ), P(
       () => t.activeId.value,
-      () => g()
-    ), x(
+      () => v()
+    ), P(
       () => e.contextmenu,
-      (o) => {
-        o || g();
+      (i) => {
+        i || v();
       }
-    ), x(
-      () => P.value.length,
-      (o) => {
-        d.visible && o === 0 && g();
+    ), P(
+      () => $.value.length,
+      (i) => {
+        l.visible && i === 0 && v();
       }
-    ), x(
-      () => ({
-        key: i.value,
-        tabs: t.tabs.map((o) => ({
-          to: o.to,
-          title: o.title,
-          tips: o.tips,
-          icon: o.icon,
-          tabClass: o.tabClass,
-          closable: o.closable
-        })),
-        active: t.activeId.value
-      }),
-      () => {
-        D();
-      },
-      { deep: !0 }
     );
-    const xe = t.includeKeys;
+    const k = t.includeKeys;
     return {
       controller: t,
       tabs: t.tabs,
-      includeKeys: xe,
-      tabTransitionProps: l,
-      pageTransitionProps: p,
-      buildTabClass: w,
-      activate: c,
-      close: r,
-      context: d,
-      menuItems: P,
-      handleMenuAction: q,
-      showContextMenu: E,
-      hideContextMenu: g,
-      tabTitle: X,
-      isClosable: s,
-      isRefreshing: O
+      includeKeys: k,
+      tabTransitionProps: d,
+      pageTransitionProps: b,
+      buildTabClass: c,
+      activate: s,
+      close: a,
+      context: l,
+      menuItems: $,
+      handleMenuAction: B,
+      showContextMenu: N,
+      hideContextMenu: v,
+      tabTitle: F,
+      isClosable: I,
+      isRefreshing: p,
+      hasCustomSlot: r
     };
   }
-}), ot = (e, a) => {
-  const n = e.__vccOpts || e;
-  for (const [t, l] of a)
-    n[t] = l;
-  return n;
-}, st = { class: "router-tab" }, it = { class: "router-tab__header" }, rt = { class: "router-tab__slot-start" }, lt = { class: "router-tab__scroll" }, ct = ["onClick", "onAuxclick", "onContextmenu"], ut = ["title"], ft = ["onClick"], dt = { class: "router-tab__slot-end" }, pt = { class: "router-tab__container" }, bt = ["aria-disabled", "onClick"];
-function vt(e, a, n, t, l, p) {
-  const d = Le("RouterView");
-  return T(), A("div", st, [
-    I("header", it, [
-      I("div", rt, [
-        ce(e.$slots, "start")
+}), Je = (e, n) => {
+  const o = e.__vccOpts || e;
+  for (const [t, r] of n)
+    o[t] = r;
+  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")
       ]),
-      I("div", lt, [
-        j(De, Q({
+      R("div", We, [
+        E($e, j({
           tag: "ul",
           class: "router-tab__nav"
         }, e.tabTransitionProps), {
-          default: M(() => [
-            (T(!0), A(ue, null, fe(e.tabs, (i) => (T(), A("li", {
-              key: i.id,
-              class: de(e.buildTabClass(i)),
-              onClick: (f) => e.activate(i),
-              onAuxclick: B((f) => e.close(i), ["middle", "prevent"]),
-              onContextmenu: B((f) => e.showContextMenu(i, f), ["prevent"])
+          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"])
             }, [
-              I("span", {
+              R("span", {
                 class: "router-tab__item-title",
-                title: e.tabTitle(i)
+                title: e.tabTitle(l)
               }, [
-                i.icon ? (T(), A("i", {
+                l.icon ? (m(), g("i", {
                   key: 0,
-                  class: de(["router-tab__item-icon", i.icon])
-                }, null, 2)) : K("", !0),
-                je(" " + pe(e.tabTitle(i)), 1)
-              ], 8, ut),
-              e.isClosable(i) ? (T(), A("a", {
+                  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", {
                 key: 0,
                 class: "router-tab__item-close",
-                onClick: B((f) => e.close(i), ["stop"])
-              }, null, 8, ft)) : K("", !0)
-            ], 42, ct))), 128))
+                type: "button",
+                onClick: O((u) => e.close(l), ["stop"])
+              }, null, 8, Ze)) : w("", !0)
+            ], 42, Xe))), 128))
           ]),
           _: 1
         }, 16)
       ]),
-      I("div", dt, [
-        ce(e.$slots, "end")
+      R("div", et, [
+        H(e.$slots, "end")
       ])
     ]),
-    I("div", pt, [
-      j(d, null, {
-        default: M(({ Component: i, route: f }) => [
-          j(be, Q(e.pageTransitionProps, { appear: "" }), {
-            default: M(() => [
-              e.controller.options.keepAlive ? (T(), W(Me, {
-                key: 0,
-                include: e.includeKeys,
-                max: e.controller.options.maxAlive || void 0
-              }, [
-                e.isRefreshing(f) ? K("", !0) : (T(), W(ve(i), {
-                  key: e.controller.getRouteKey(f),
+    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, {
+                  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),
+                    class: "router-tab-page"
+                  }))
+                ], 1032, ["include", "max"])) : w("", !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" : ""),
                   class: "router-tab-page"
-                }))
-              ], 1032, ["include", "max"])) : K("", !0)
-            ]),
-            _: 2
-          }, 1040),
-          j(be, Q(e.pageTransitionProps, { appear: "" }), {
-            default: M(() => [
-              !e.controller.options.keepAlive || e.isRefreshing(f) ? (T(), W(ve(i), {
-                key: e.controller.getRouteKey(f) + (e.isRefreshing(f) ? "-refresh" : ""),
-                class: "router-tab-page"
-              })) : K("", !0)
-            ]),
-            _: 2
-          }, 1040)
+                })) : w("", !0)
+              ]),
+              _: 2
+            }, 1040)
+          ], 64))
         ]),
-        _: 1
+        _: 3
       })
     ]),
-    e.context.visible && e.context.target ? (T(), A("div", {
+    e.context.visible && e.context.target ? (m(), g("div", {
       key: 0,
       class: "router-tab__contextmenu",
-      style: Be({ left: e.context.position.x + "px", top: e.context.position.y + "px" })
+      style: Le({ left: e.context.position.x + "px", top: e.context.position.y + "px" })
     }, [
-      (T(!0), A(ue, null, fe(e.menuItems, (i) => (T(), A("a", {
-        key: i.id,
+      (m(!0), g(Y, null, ae(e.menuItems, (l) => (m(), g("a", {
+        key: l.id,
         class: "router-tab__contextmenu-item",
-        "aria-disabled": i.disabled,
-        onClick: B((f) => e.handleMenuAction(i), ["prevent"])
-      }, pe(i.label), 9, bt))), 128))
-    ], 4)) : K("", !0)
+        "aria-disabled": l.disabled,
+        onClick: O((u) => e.handleMenuAction(l), ["prevent"])
+      }, se(l.label), 9, nt))), 128))
+    ], 4)) : w("", !0)
   ]);
 }
-const Ce = /* @__PURE__ */ ot(at, [["render", vt]]);
-function _e(e = {}) {
-  const { optional: a = !1 } = e, n = U(H, null);
-  if (n) return n;
-  const t = U("$tabs", null);
-  if (t) return t;
-  const p = ie()?.appContext.config.globalProperties.$tabs;
-  if (p) return p;
-  if (!a)
-    throw new Error("[RouterTabs] useRouterTabs must be used within <router-tab>.");
-  return null;
-}
-const ht = "router-tabs:persistent";
-function mt(e) {
-  return typeof window > "u" ? null : e === void 0 ? window.localStorage ?? null : e;
-}
-function yt(e) {
-  const a = mt(e.storage), n = e.storageKey ?? ht;
-  return ze(e.storeId ?? "routerTabs", {
-    state: () => ({
-      snapshot: null
-    }),
-    actions: {
-      load() {
-        if (!(!a || this.snapshot))
-          try {
-            const t = a.getItem(n);
-            t && (this.snapshot = JSON.parse(t));
-          } catch {
-          }
-      },
-      setSnapshot(t) {
-        if (this.snapshot = t, !!a)
-          try {
-            t && t.tabs.length ? a.setItem(n, JSON.stringify(t)) : a.removeItem(n);
-          } catch {
-          }
-      },
-      clear() {
-        this.setSnapshot(null);
-      }
-    }
-  });
-}
-function gt(e = {}) {
-  const n = (e.store ?? yt(e))(), t = J(!1);
-  let l = !1;
-  const p = (i) => {
-    !i || l || (l = !0, ne(async () => {
-      n.load();
-      const f = n.snapshot;
-      if (f && f.tabs?.length)
-        try {
-          t.value = !0, await i.hydrate(f);
-        } finally {
-          t.value = !1;
-        }
-      else
-        try {
-          t.value = !0;
-          const v = e.fallbackRoute ?? i.options.defaultRoute;
-          await i.reset(v);
-        } finally {
-          t.value = !1;
-        }
-      n.setSnapshot(i.snapshot());
-    }), x(
-      () => ({
-        tabs: i.tabs.map((f) => ({
-          to: f.to,
-          title: f.title,
-          tips: f.tips,
-          icon: f.icon,
-          tabClass: f.tabClass,
-          closable: f.closable
-        })),
-        active: i.activeId.value
-      }),
-      () => {
-        t.value || n.setSnapshot(i.snapshot());
-      },
-      { deep: !0 }
-    ));
-  }, d = _e({ optional: !0 });
-  return d ? p(d) : ne(() => {
-    const i = _e({ optional: !0 });
-    i && p(i);
-  }), n;
-}
-const wt = {
+const he = /* @__PURE__ */ Je(Ge, [["render", it]]), ot = {
   class: "router-tabs",
   "aria-hidden": "true"
-}, te = /* @__PURE__ */ se({
+}, X = /* @__PURE__ */ ge({
   name: "RouterTabs",
-  __name: "RouterTabsPinia",
+  __name: "RouterTabs",
   props: {
-    storeId: {},
-    storageKey: {},
-    storage: {},
-    fallbackRoute: {},
-    store: { type: [Function, Object] }
+    cookieKey: {},
+    expiresInDays: {},
+    path: {},
+    domain: {},
+    secure: { type: Boolean },
+    sameSite: {},
+    serialize: { type: Function },
+    deserialize: { type: Function },
+    fallbackRoute: {}
   },
   setup(e) {
-    return gt(e), (n, t) => (T(), A("span", wt));
+    return ke(e), (o, t) => (m(), g("span", ot));
   }
-}), Ae = {
+}), ve = {
   install(e) {
-    if (Ae._installed) return;
-    Ae._installed = !0;
-    const a = Ce.name || "RouterTab", n = te.name || "RouterTabs";
-    e.component(a, Ce), e.component(n, te), n !== "router-tabs" && e.component("router-tabs", te), Object.defineProperty(e.config.globalProperties, "$tabs", {
+    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", {
       configurable: !0,
       enumerable: !1,
       get() {
-        return e._context.provides[H];
+        return e._context.provides[D];
       },
       set(t) {
-        t && e.provide(H, t);
+        t && e.provide(D, t);
       }
     });
   }
 };
 export {
-  Ce as RouterTab,
-  te as RouterTabs,
-  te as RouterTabsPinia,
-  Ae as default,
-  H as routerTabsKey,
-  _e as useRouterTabs,
-  gt as useRouterTabsPiniaPersistence
+  he as RouterTab,
+  X as RouterTabs,
+  ve as default,
+  D as routerTabsKey,
+  de as useRouterTabs,
+  ke as useRouterTabsPersistence
 };