vue3-router-tab 1.1.1 → 1.1.2

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 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 = {}) {
   return {
     initialTabs: e.initialTabs ?? [],
     keepAlive: e.keepAlive ?? !0,
@@ -11,13 +11,13 @@ function Ee(e = {}) {
     defaultRoute: e.defaultRoute ?? "/"
   };
 }
-function A(e, n) {
-  const o = e.resolve(n);
+function A(e, i) {
+  const o = e.resolve(i);
   if (!o || !o.matched.length)
-    throw new Error(`[RouterTabs] Unable to resolve route: ${String(n)}`);
+    throw new Error(`[RouterTabs] Unable to resolve route: ${String(i)}`);
   return o;
 }
-const je = {
+const ze = {
   path: (e) => e.path,
   fullpath: (e) => e.fullPath,
   fullname: (e) => e.fullPath,
@@ -25,65 +25,65 @@ const je = {
   name: (e) => e.name ? String(e.name) : e.fullPath
 };
 function _(e) {
-  const n = e.meta?.key;
-  if (typeof n == "function") {
-    const o = n(e);
+  const i = e.meta?.key;
+  if (typeof i == "function") {
+    const o = i(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;
+  } else if (typeof i == "string" && i.length) {
+    const o = ze[i.toLowerCase()];
+    return o ? o(e) : i;
   }
   return e.fullPath;
 }
-function ee(e, n) {
+function te(e, i) {
   const o = e.meta?.keepAlive;
-  return typeof o == "boolean" ? o : n;
+  return typeof o == "boolean" ? o : i;
 }
-function te(e, n) {
+function ne(e, i) {
   const o = e.meta?.reuse;
-  return typeof o == "boolean" ? o : n;
+  return typeof o == "boolean" ? o : i;
 }
-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 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 V(e, n, o) {
-  const t = Te(e);
+function V(e, i, o) {
+  const t = ke(e);
   return {
     id: _(e),
     to: e.fullPath,
     fullPath: e.fullPath,
     matched: e,
-    alive: ee(e, o),
-    reusable: te(e, !1),
+    alive: te(e, o),
+    reusable: ne(e, !1),
     closable: t.closable ?? !0,
     ...t,
-    ...n
+    ...i
   };
 }
-function W(e, n, o, t) {
-  if (!e.find((d) => d.id === n.id)) {
+function X(e, i, o, t) {
+  if (!e.find((d) => d.id === i.id)) {
     if (o === "next" && t) {
       const d = e.findIndex((b) => b.id === t);
       if (d > -1) {
-        e.splice(d + 1, 0, n);
+        e.splice(d + 1, 0, i);
         return;
       }
     }
-    e.push(n);
+    e.push(i);
   }
 }
-function ue(e, n, o) {
-  if (!n || n <= 0) return;
+function fe(e, i, o) {
+  if (!i || i <= 0) return;
   const t = e.filter((r) => r.alive);
-  for (; t.length > n; ) {
+  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 ze(e) {
+function Oe(e) {
   return {
     to: e.to,
     title: e.title,
@@ -93,31 +93,31 @@ function ze(e) {
     closable: e.closable
   };
 }
-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 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 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 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));
   let u = !1;
   function T(a) {
     const s = typeof a.matched == "object" ? a : A(e, a);
     return {
       key: _(s),
       fullPath: s.fullPath,
-      alive: ee(s, o.keepAlive),
-      reusable: te(s, !1),
+      alive: te(s, o.keepAlive),
+      reusable: ne(s, !1),
       matched: s
     };
   }
   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);
+    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);
   }
   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 $();
+    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 $();
   }
   function L(a) {
     const s = t.findIndex((p) => p.id === a), c = t[s] || t[s - 1] || t[0];
@@ -139,13 +139,13 @@ function Ve(e, n = {}) {
     c !== -1 && (t.splice(c, 1), b.value === a && (b.value = null), r.value === a && (r.value = null, d.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);
+    a && (b.value = a, await oe(), s || await oe(), b.value = null);
   }
-  async function N(a = !1) {
+  async function U(a = !1) {
     for (const s of t)
       await v(s.id, a);
   }
-  async function U(a = o.defaultRoute) {
+  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);
@@ -157,23 +157,23 @@ function Ve(e, n = {}) {
     const a = r.value;
     a && await v(a, !0);
   }
-  function B(a) {
+  function F(a) {
     return typeof a.matched == "object" ? _(a) : _(A(e, a));
   }
-  function F() {
+  function G() {
     const a = t.find((s) => s.id === r.value);
     return {
-      tabs: t.map(ze),
+      tabs: t.map(Oe),
       active: a ? a.to : null
     };
   }
-  async function I(a) {
+  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)
       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), n = Ve(p), f = V(k, n, o.keepAlive);
+        X(t, f, "last", null);
       } catch {
       }
     u = !1;
@@ -189,12 +189,12 @@ function Ve(e, n = {}) {
     (a) => {
       if (u) return;
       const s = C(a);
-      r.value = s.id, d.value = s, ue(t, o.maxAlive, r.value);
+      r.value = s.id, d.value = s, fe(t, o.maxAlive, r.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);
+    X(t, c, "last", null);
   }), {
     options: o,
     tabs: t,
@@ -206,40 +206,40 @@ function Ve(e, n = {}) {
     closeTab: x,
     removeTab: M,
     refreshTab: v,
-    refreshAll: N,
-    reset: U,
+    refreshAll: U,
+    reset: B,
     reload: $,
-    getRouteKey: B,
+    getRouteKey: F,
     matchRoute: T,
-    snapshot: F,
-    hydrate: I
+    snapshot: G,
+    hydrate: K
   };
 }
-function fe(e) {
+function de(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"), D = "router-tabs:snapshot";
+function be(e = {}) {
+  const { optional: i = !1 } = e, o = ae(N, null);
   if (o) return o;
-  const t = oe("$tabs", null);
+  const t = ae("$tabs", null);
   if (t) return t;
-  const d = ye()?.appContext.config.globalProperties.$tabs;
+  const d = ge()?.appContext.config.globalProperties.$tabs;
   if (d) return d;
-  if (!n)
+  if (!i)
     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("; ") : [];
+  const i = `${encodeURIComponent(e)}=`, o = document.cookie ? document.cookie.split("; ") : [];
   for (const t of o)
-    if (t.startsWith(n))
-      return decodeURIComponent(t.slice(n.length));
+    if (t.startsWith(i))
+      return decodeURIComponent(t.slice(i.length));
   return null;
 }
-function be(e, n, o) {
+function pe(e, i, o) {
   if (typeof document > "u") return;
   const {
     expiresInDays: t = 7,
@@ -247,16 +247,16 @@ function be(e, n, o) {
     domain: d,
     secure: b,
     sameSite: l = "lax"
-  } = o, u = [`${encodeURIComponent(e)}=${encodeURIComponent(n)}`];
+  } = o, u = [`${encodeURIComponent(e)}=${encodeURIComponent(i)}`];
   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) {
+function he(e, i) {
   if (typeof document > "u") return;
-  const { path: o = "/", domain: t } = n, r = [`${encodeURIComponent(e)}=`];
+  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 Be = (e) => JSON.stringify(e ?? null), Fe = (e) => {
@@ -267,14 +267,14 @@ const Be = (e) => JSON.stringify(e ?? null), Fe = (e) => {
     return null;
   }
 };
-function ke(e = {}) {
+function Ce(e = {}) {
   const {
-    cookieKey: n = De,
+    cookieKey: i = D,
     serialize: o = Be,
     deserialize: t = Fe
-  } = e, r = de({ optional: !0 }), d = Q(!1), b = (l) => {
-    Z(async () => {
-      const u = t(Ue(n));
+  } = e, r = be({ optional: !0 }), d = Z(!0), b = (l) => {
+    ee(async () => {
+      const u = t(Ue(i));
       if (u && u.tabs?.length)
         try {
           d.value = !0, await l.hydrate(u);
@@ -290,7 +290,7 @@ function ke(e = {}) {
           d.value = !1;
         }
       const T = l.snapshot();
-      T.tabs.length ? be(n, o(T), e) : pe(n, e);
+      T.tabs.length ? pe(i, o(T), e) : he(i, e), d.value = !1;
     }), P(
       () => ({
         tabs: l.tabs.map((u) => ({
@@ -306,19 +306,19 @@ function ke(e = {}) {
       () => {
         if (d.value) return;
         const u = l.snapshot();
-        u.tabs.length ? be(n, o(u), e) : pe(n, e);
+        u.tabs.length ? pe(i, o(u), e) : he(i, e);
       },
       { deep: !0 }
     );
   };
-  r ? b(r) : Z(() => {
-    const l = de({ optional: !0 });
+  r ? b(r) : ee(() => {
+    const l = be({ optional: !0 });
     l && b(l);
   });
 }
-const Ge = ge({
+const Ge = Te({
   name: "RouterTab",
-  components: { RouterView: Me },
+  components: { RouterView: Ee },
   props: {
     tabs: {
       type: Array,
@@ -358,7 +358,7 @@ const Ge = ge({
     },
     cookieKey: {
       type: String,
-      default: null
+      default: D
     },
     persistence: {
       type: Object,
@@ -366,13 +366,13 @@ const Ge = ge({
     }
   },
   setup(e) {
-    const n = ye();
-    if (!n)
+    const i = ge();
+    if (!i)
       throw new Error("[RouterTab] component must be used within a Vue application context.");
-    const o = n.appContext.app.config.globalProperties.$router;
+    const o = i.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 = De(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) {
-      const i = {
+    Pe(N, t), i.appContext.config.globalProperties.$tabs = t;
+    const r = I(() => !!i?.slots?.default);
+    if (e.cookieKey !== null || e.persistence) {
+      const n = {
         ...e.persistence ?? {}
       };
-      e.cookieKey && (i.cookieKey = e.cookieKey), ke(i);
+      e.cookieKey !== null ? n.cookieKey = e.cookieKey || D : n.cookieKey || (n.cookieKey = D), Ce(n);
     }
-    const d = K(() => fe(e.tabTransition)), b = K(() => fe(e.pageTransition)), l = me({
+    const d = I(() => de(e.tabTransition)), b = I(() => de(e.pageTransition)), l = ye({
       visible: !1,
       target: null,
       position: { x: 0, y: 0 }
@@ -400,22 +400,22 @@ const Ge = ge({
       "closeRights",
       "closeOthers"
     ];
-    function T(i) {
-      return t.tabs.findIndex((f) => f.id === i);
+    function T(n) {
+      return t.tabs.findIndex((f) => f.id === n);
     }
-    function C(i) {
-      const f = T(i.id);
+    function C(n) {
+      const f = T(n.id);
       return f > 0 ? t.tabs.slice(0, f) : [];
     }
-    function S(i) {
-      const f = T(i.id);
+    function S(n) {
+      const f = T(n.id);
       return f > -1 ? t.tabs.slice(f + 1) : [];
     }
-    function L(i) {
-      return t.tabs.filter((f) => f.id !== i.id);
+    function L(n) {
+      return t.tabs.filter((f) => f.id !== n.id);
     }
-    async function x(i, f) {
-      const h = i.filter((y) => y.closable !== !1);
+    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 });
@@ -425,8 +425,8 @@ const Ge = ge({
     const M = {
       refresh: {
         label: "Refresh",
-        handler: async ({ target: i }) => {
-          await t.refreshTab(i.id, !0);
+        handler: async ({ target: n }) => {
+          await t.refreshTab(n.id, !0);
         }
       },
       refreshAll: {
@@ -437,108 +437,108 @@ const Ge = ge({
       },
       close: {
         label: "Close",
-        handler: async ({ target: i }) => {
-          await t.closeTab(i.id);
+        handler: async ({ target: n }) => {
+          await t.closeTab(n.id);
         },
-        enable: ({ target: i }) => I(i)
+        enable: ({ target: n }) => K(n)
       },
       closeLefts: {
         label: "Close to the Left",
-        handler: async ({ target: i }) => {
-          await x(C(i), i);
+        handler: async ({ target: n }) => {
+          await x(C(n), n);
         },
-        enable: ({ target: i }) => C(i).some((f) => f.closable !== !1)
+        enable: ({ target: n }) => C(n).some((f) => f.closable !== !1)
       },
       closeRights: {
         label: "Close to the Right",
-        handler: async ({ target: i }) => {
-          await x(S(i), i);
+        handler: async ({ target: n }) => {
+          await x(S(n), n);
         },
-        enable: ({ target: i }) => S(i).some((f) => f.closable !== !1)
+        enable: ({ target: n }) => S(n).some((f) => f.closable !== !1)
       },
       closeOthers: {
         label: "Close Others",
-        handler: async ({ target: i }) => {
-          await x(L(i), i);
+        handler: async ({ target: n }) => {
+          await x(L(n), n);
         },
-        enable: ({ target: i }) => L(i).some((f) => f.closable !== !1)
+        enable: ({ target: n }) => L(n).some((f) => f.closable !== !1)
       }
     };
     function v() {
       l.visible = !1, l.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 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 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 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;
+      if (!ie) return null;
+      const Ae = async () => {
+        await Promise.resolve(ie(f));
       };
       return {
         id: String(h.id),
-        label: Ce,
-        disabled: !Re,
-        action: we
+        label: Re,
+        disabled: !we,
+        action: Ae
       };
     }
-    const $ = K(() => {
+    const $ = I(() => {
       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 n = Array.isArray(e.contextmenu) ? e.contextmenu : u, f = { target: l.target, controller: t };
+      return n.map((h) => B(h, f)).filter((h) => !!h);
     });
-    async function B(i) {
-      i.disabled || (v(), await i.action());
+    async function F(n) {
+      n.disabled || (v(), await n.action());
     }
-    function F(i) {
-      return typeof i.title == "string" ? i.title : Array.isArray(i.title) && i.title.length ? String(i.title[0]) : i.fullPath;
+    function G(n) {
+      return typeof n.title == "string" ? n.title : Array.isArray(n.title) && n.title.length ? String(n.title[0]) : n.fullPath;
     }
-    function I(i) {
-      return !(i.closable === !1 || t.options.keepLastTab && t.tabs.length <= 1);
+    function K(n) {
+      return !(n.closable === !1 || t.options.keepLastTab && t.tabs.length <= 1);
     }
-    async function a(i) {
-      await t.closeTab(i.id);
+    async function a(n) {
+      await t.closeTab(n.id);
     }
-    function s(i) {
-      t.activeId.value !== i.id && t.openTab(i.to, !1);
+    function s(n) {
+      t.activeId.value !== n.id && t.openTab(n.to, !1);
     }
-    function c(i) {
+    function c(n) {
       return [
         "router-tab__item",
         {
-          "is-active": t.activeId.value === i.id,
-          "is-closable": I(i)
+          "is-active": t.activeId.value === n.id,
+          "is-closable": K(n)
         },
-        i.tabClass
+        n.tabClass
       ];
     }
-    function p(i) {
-      return t.refreshingKey.value === t.getRouteKey(i);
+    function p(n) {
+      return t.refreshingKey.value === t.getRouteKey(n);
     }
-    Z(() => {
+    ee(() => {
       document.addEventListener("keydown", v);
-    }), Pe(() => {
-      document.removeEventListener("keydown", v), n.appContext.config.globalProperties.$tabs = null;
+    }), xe(() => {
+      document.removeEventListener("keydown", v), i.appContext.config.globalProperties.$tabs = null;
     }), P(
       () => e.keepAlive,
-      (i) => {
-        t.options.keepAlive = i;
+      (n) => {
+        t.options.keepAlive = n;
       }
     ), P(
       () => t.activeId.value,
       () => v()
     ), P(
       () => e.contextmenu,
-      (i) => {
-        i || v();
+      (n) => {
+        n || v();
       }
     ), P(
       () => $.value.length,
-      (i) => {
-        l.visible && i === 0 && v();
+      (n) => {
+        l.visible && n === 0 && v();
       }
     );
     const k = t.includeKeys;
@@ -553,37 +553,37 @@ const Ge = ge({
       close: a,
       context: l,
       menuItems: $,
-      handleMenuAction: B,
-      showContextMenu: N,
+      handleMenuAction: F,
+      showContextMenu: U,
       hideContextMenu: v,
-      tabTitle: F,
-      isClosable: I,
+      tabTitle: G,
+      isClosable: K,
       isRefreshing: p,
       hasCustomSlot: r
     };
   }
-}), Je = (e, n) => {
+}), Je = (e, i) => {
   const o = e.__vccOpts || e;
-  for (const [t, r] of n)
+  for (const [t, r] of i)
     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");
+function it(e, i, o, t, r, d) {
+  const b = $e("RouterView");
   return m(), g("div", He, [
     R("header", Ye, [
       R("div", qe, [
-        H(e.$slots, "start")
+        Y(e.$slots, "start")
       ]),
       R("div", We, [
-        E($e, j({
+        E(Ke, j({
           tag: "ul",
           class: "router-tab__nav"
         }, e.tabTransitionProps), {
           default: z(() => [
-            (m(!0), g(Y, null, ae(e.tabs, (l) => (m(), g("li", {
+            (m(!0), g(q, null, le(e.tabs, (l) => (m(), g("li", {
               key: l.id,
-              class: le(e.buildTabClass(l)),
+              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"])
@@ -594,9 +594,9 @@ function it(e, n, o, t, r, d) {
               }, [
                 l.icon ? (m(), g("i", {
                   key: 0,
-                  class: le(["router-tab__item-icon", l.icon])
+                  class: se(["router-tab__item-icon", l.icon])
                 }, null, 2)) : w("", !0),
-                Ie(" " + se(e.tabTitle(l)), 1)
+                Ie(" " + re(e.tabTitle(l)), 1)
               ], 8, Qe),
               e.isClosable(l) ? (m(), g("a", {
                 key: 0,
@@ -610,21 +610,21 @@ function it(e, n, o, t, r, d) {
         }, 16)
       ]),
       R("div", et, [
-        H(e.$slots, "end")
+        Y(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: "" }), {
+          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(), q(Se, {
+                e.controller.options.keepAlive ? (m(), W(Le, {
                   key: 0,
                   include: e.includeKeys,
                   max: e.controller.options.maxAlive || void 0
                 }, [
-                  e.isRefreshing(l.route) ? w("", !0) : (m(), q(ce(l.Component), {
+                  e.isRefreshing(l.route) ? w("", !0) : (m(), W(ue(l.Component), {
                     key: e.controller.getRouteKey(l.route),
                     class: "router-tab-page"
                   }))
@@ -632,9 +632,9 @@ function it(e, n, o, t, r, d) {
               ]),
               _: 2
             }, 1040),
-            E(re, j(e.pageTransitionProps, { appear: "" }), {
+            E(ce, j(e.pageTransitionProps, { appear: "" }), {
               default: z(() => [
-                !e.controller.options.keepAlive || e.isRefreshing(l.route) ? (m(), q(ce(l.Component), {
+                !e.controller.options.keepAlive || e.isRefreshing(l.route) ? (m(), W(ue(l.Component), {
                   key: e.controller.getRouteKey(l.route) + (e.isRefreshing(l.route) ? "-refresh" : ""),
                   class: "router-tab-page"
                 })) : w("", !0)
@@ -649,21 +649,21 @@ function it(e, n, o, t, r, d) {
     e.context.visible && e.context.target ? (m(), g("div", {
       key: 0,
       class: "router-tab__contextmenu",
-      style: Le({ left: e.context.position.x + "px", top: e.context.position.y + "px" })
+      style: Me({ left: e.context.position.x + "px", top: e.context.position.y + "px" })
     }, [
-      (m(!0), g(Y, null, ae(e.menuItems, (l) => (m(), g("a", {
+      (m(!0), g(q, null, le(e.menuItems, (l) => (m(), g("a", {
         key: l.id,
         class: "router-tab__contextmenu-item",
         "aria-disabled": l.disabled,
         onClick: O((u) => e.handleMenuAction(l), ["prevent"])
-      }, se(l.label), 9, nt))), 128))
+      }, re(l.label), 9, nt))), 128))
     ], 4)) : w("", !0)
   ]);
 }
-const he = /* @__PURE__ */ Je(Ge, [["render", it]]), ot = {
+const ve = /* @__PURE__ */ Je(Ge, [["render", it]]), ot = {
   class: "router-tabs",
   "aria-hidden": "true"
-}, X = /* @__PURE__ */ ge({
+}, Q = /* @__PURE__ */ Te({
   name: "RouterTabs",
   __name: "RouterTabs",
   props: {
@@ -678,30 +678,30 @@ const he = /* @__PURE__ */ Je(Ge, [["render", it]]), ot = {
     fallbackRoute: {}
   },
   setup(e) {
-    return ke(e), (o, t) => (m(), g("span", ot));
+    return Ce(e), (o, t) => (m(), g("span", ot));
   }
-}), ve = {
+}), me = {
   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", {
+    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", {
       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,
-  ve as default,
-  D as routerTabsKey,
-  de as useRouterTabs,
-  ke as useRouterTabsPersistence
+  ve as RouterTab,
+  Q as RouterTabs,
+  me as default,
+  N as routerTabsKey,
+  be as useRouterTabs,
+  Ce as useRouterTabsPersistence
 };

package/dist/vue3-router-tab.umd.cjs

@@ -1 +1 @@
-(function(y,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router"],t):(y=typeof globalThis<"u"?globalThis:y||self,t(y["vue3-router-tab"]={},y.Vue,y.VueRouter))})(this,(function(y,t,Z){"use strict";function ee(e={}){return{initialTabs:e.initialTabs??[],keepAlive:e.keepAlive??!0,maxAlive:e.maxAlive??0,keepLastTab:e.keepLastTab??!0,appendPosition:e.appendPosition??"last",defaultRoute:e.defaultRoute??"/"}}function w(e,o){const a=e.resolve(o);if(!a||!a.matched.length)throw new Error(`[RouterTabs] Unable to resolve route: ${String(o)}`);return a}const te={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 R(e){const o=e.meta?.key;if(typeof o=="function"){const a=o(e);if(typeof a=="string"&&a.length)return a}else if(typeof o=="string"&&o.length){const a=te[o.toLowerCase()];return a?a(e):o}return e.fullPath}function I(e,o){const a=e.meta?.keepAlive;return typeof a=="boolean"?a:o}function K(e,o){const a=e.meta?.reuse;return typeof a=="boolean"?a:o}function J(e){const o=e.meta??{},a={};return"title"in o&&(a.title=o.title),"tips"in o&&(a.tips=o.tips),"icon"in o&&(a.icon=o.icon),"closable"in o&&(a.closable=o.closable),"tabClass"in o&&(a.tabClass=o.tabClass),"target"in o&&(a.target=o.target),"href"in o&&(a.href=o.href),a}function B(e,o,a){const n=J(e);return{id:R(e),to:e.fullPath,fullPath:e.fullPath,matched:e,alive:I(e,a),reusable:K(e,!1),closable:n.closable??!0,...n,...o}}function N(e,o,a,n){if(!e.find(b=>b.id===o.id)){if(a==="next"&&n){const b=e.findIndex(p=>p.id===n);if(b>-1){e.splice(b+1,0,o);return}}e.push(o)}}function H(e,o,a){if(!o||o<=0)return;const n=e.filter(c=>c.alive);for(;n.length>o;){const c=n.shift();if(!c||c.id===a)continue;const b=e.findIndex(p=>p.id===c.id);b>-1&&(e[b].alive=!1)}}function ne(e){return{to:e.to,title:e.title,tips:e.tips,icon:e.icon,tabClass:e.tabClass,closable:e.closable}}function oe(e){const o={};return"title"in e&&(o.title=e.title),"tips"in e&&(o.tips=e.tips),"icon"in e&&(o.icon=e.icon),"tabClass"in e&&(o.tabClass=e.tabClass),"closable"in e&&(o.closable=e.closable),o}function ie(e,o={}){const a=ee(o),n=t.reactive([]),c=t.ref(null),b=t.shallowRef(),p=t.ref(null),s=t.computed(()=>n.filter(l=>l.alive).map(l=>l.id));let f=!1;function T(l){const r=typeof l.matched=="object"?l:w(e,l);return{key:R(r),fullPath:r.fullPath,alive:I(r,a.keepAlive),reusable:K(r,!1),matched:r}}function A(l){const r=R(l);let u=n.find(m=>m.id===r);return u?(u.fullPath=l.fullPath,u.to=l.fullPath,u.matched=l,u.alive=I(l,a.keepAlive),u.reusable=K(l,u.reusable),Object.assign(u,J(l)),u):(u=B(l,{},a.keepAlive),N(n,u,a.appendPosition,c.value),H(n,a.maxAlive,c.value),u)}async function E(l,r=!1,u=!0){const m=w(e,l),C=R(m),i=c.value===C;u==="sameTab"&&(u=i),u&&await g(C,!0),await e[r?"replace":"push"](m),i&&await v()}function S(l){const r=n.findIndex(m=>m.id===l),u=n[r]||n[r-1]||n[0];return u?u.to:a.defaultRoute}async function P(l=c.value,r={}){if(l){if(!r.force&&a.keepLastTab&&n.length===1)throw new Error("[RouterTabs] Unable to close the final tab when keepLastTab is true.");if(await V(l,{force:r.force}),r.redirect!==null)if(c.value===l){const u=r.redirect??S(l);u&&await e.replace(u)}else r.redirect&&await e.replace(r.redirect)}}async function V(l,r={}){const u=n.findIndex(m=>m.id===l);u!==-1&&(n.splice(u,1),p.value===l&&(p.value=null),c.value===l&&(c.value=null,b.value=void 0))}async function g(l=c.value??void 0,r=!1){l&&(p.value=l,await t.nextTick(),r||await t.nextTick(),p.value=null)}async function D(l=!1){for(const r of n)await g(r.id,l)}async function O(l=a.defaultRoute){n.splice(0,n.length),c.value=null,b.value=void 0;for(const r of a.initialTabs){const u=w(e,r.to),m=B(u,r,a.keepAlive);n.push(m)}await e.replace(l)}async function v(){const l=c.value;l&&await g(l,!0)}function U(l){return typeof l.matched=="object"?R(l):R(w(e,l))}function F(){const l=n.find(r=>r.id===c.value);return{tabs:n.map(ne),active:l?l.to:null}}async function x(l){f=!0,n.splice(0,n.length),c.value=null,b.value=void 0;const r=l?.tabs??[];for(const m of r)try{const C=w(e,m.to),i=oe(m),d=B(C,i,a.keepAlive);N(n,d,"last",null)}catch{}f=!1;const u=l?.active??r[r.length-1]?.to??a.defaultRoute;if(u)try{await e.replace(u)}catch{}}return t.watch(()=>e.currentRoute.value,l=>{if(f)return;const r=A(l);c.value=r.id,b.value=r,H(n,a.maxAlive,c.value)},{immediate:!0}),a.initialTabs.length&&a.initialTabs.forEach(l=>{const r=w(e,l.to),u=B(r,l,a.keepAlive);N(n,u,"last",null)}),{options:a,tabs:n,activeId:c,current:b,includeKeys:s,refreshingKey:p,openTab:E,closeTab:P,removeTab:V,refreshTab:g,refreshAll:D,reset:O,reload:v,getRouteKey:U,matchRoute:T,snapshot:F,hydrate:x}}function Y(e){return e?typeof e=="string"?{name:e}:e:{}}const _=Symbol("RouterTabsContext"),ae="router-tabs:snapshot";function M(e={}){const{optional:o=!1}=e,a=t.inject(_,null);if(a)return a;const n=t.inject("$tabs",null);if(n)return n;const b=t.getCurrentInstance()?.appContext.config.globalProperties.$tabs;if(b)return b;if(!o)throw new Error("[RouterTabs] useRouterTabs must be used within <router-tab>.");return null}const le=864e5;function se(e){if(typeof document>"u")return null;const o=`${encodeURIComponent(e)}=`,a=document.cookie?document.cookie.split("; "):[];for(const n of a)if(n.startsWith(o))return decodeURIComponent(n.slice(o.length));return null}function W(e,o,a){if(typeof document>"u")return;const{expiresInDays:n=7,path:c="/",domain:b,secure:p,sameSite:s="lax"}=a,f=[`${encodeURIComponent(e)}=${encodeURIComponent(o)}`];if(n!==1/0){const T=new Date(Date.now()+n*le).toUTCString();f.push(`Expires=${T}`)}c&&f.push(`Path=${c}`),b&&f.push(`Domain=${b}`),p&&f.push("Secure"),s&&f.push(`SameSite=${s.charAt(0).toUpperCase()}${s.slice(1)}`),document.cookie=f.join("; ")}function X(e,o){if(typeof document>"u")return;const{path:a="/",domain:n}=o,c=[`${encodeURIComponent(e)}=`];c.push("Expires=Thu, 01 Jan 1970 00:00:01 GMT"),a&&c.push(`Path=${a}`),n&&c.push(`Domain=${n}`),document.cookie=c.join("; ")}const re=e=>JSON.stringify(e??null),ce=e=>{if(!e)return null;try{return JSON.parse(e)}catch{return null}};function L(e={}){const{cookieKey:o=ae,serialize:a=re,deserialize:n=ce}=e,c=M({optional:!0}),b=t.ref(!1),p=s=>{t.onMounted(async()=>{const f=n(se(o));if(f&&f.tabs?.length)try{b.value=!0,await s.hydrate(f)}finally{b.value=!1}else try{b.value=!0;const A=e.fallbackRoute??s.options.defaultRoute;await s.reset(A)}finally{b.value=!1}const T=s.snapshot();T.tabs.length?W(o,a(T),e):X(o,e)}),t.watch(()=>({tabs:s.tabs.map(f=>({to:f.to,title:f.title,tips:f.tips,icon:f.icon,tabClass:f.tabClass,closable:f.closable})),active:s.activeId.value}),()=>{if(b.value)return;const f=s.snapshot();f.tabs.length?W(o,a(f),e):X(o,e)},{deep:!0})};c?p(c):t.onMounted(()=>{const s=M({optional:!0});s&&p(s)})}const ue=t.defineComponent({name:"RouterTab",components:{RouterView:Z.RouterView},props:{tabs:{type:Array,default:()=>[]},keepAlive:{type:Boolean,default:!0},maxAlive:{type:Number,default:0},keepLastTab:{type:Boolean,default:!0},append:{type:String,default:"last"},defaultPage:{type:[String,Object],default:"/"},tabTransition:{type:[String,Object],default:"router-tab-zoom"},pageTransition:{type:[String,Object],default:()=>({name:"router-tab-swap",mode:"out-in"})},contextmenu:{type:[Boolean,Array],default:!0},cookieKey:{type:String,default:null},persistence:{type:Object,default:null}},setup(e){const o=t.getCurrentInstance();if(!o)throw new Error("[RouterTab] component must be used within a Vue application context.");const a=o.appContext.app.config.globalProperties.$router;if(!a)throw new Error("[RouterTab] Vue Router is required. Make sure to call app.use(router) before RouterTab.");const n=ie(a,{initialTabs:e.tabs,keepAlive:e.keepAlive,maxAlive:e.maxAlive,keepLastTab:e.keepLastTab,appendPosition:e.append,defaultRoute:e.defaultPage});t.provide(_,n),o.appContext.config.globalProperties.$tabs=n;const c=t.computed(()=>!!o?.slots?.default);if(e.cookieKey||e.persistence){const i={...e.persistence??{}};e.cookieKey&&(i.cookieKey=e.cookieKey),L(i)}const b=t.computed(()=>Y(e.tabTransition)),p=t.computed(()=>Y(e.pageTransition)),s=t.reactive({visible:!1,target:null,position:{x:0,y:0}}),f=["refresh","refreshAll","close","closeLefts","closeRights","closeOthers"];function T(i){return n.tabs.findIndex(d=>d.id===i)}function A(i){const d=T(i.id);return d>0?n.tabs.slice(0,d):[]}function E(i){const d=T(i.id);return d>-1?n.tabs.slice(d+1):[]}function S(i){return n.tabs.filter(d=>d.id!==i.id)}async function P(i,d){const h=i.filter(k=>k.closable!==!1);if(h.length){for(const k of h)n.activeId.value===k.id?await n.closeTab(k.id,{redirect:d.to,force:!0}):await n.removeTab(k.id,{force:!0});n.activeId.value!==d.id&&await n.openTab(d.to,!0,!1)}}const V={refresh:{label:"Refresh",handler:async({target:i})=>{await n.refreshTab(i.id,!0)}},refreshAll:{label:"Refresh All",handler:async()=>{await n.refreshAll(!0)}},close:{label:"Close",handler:async({target:i})=>{await n.closeTab(i.id)},enable:({target:i})=>x(i)},closeLefts:{label:"Close to the Left",handler:async({target:i})=>{await P(A(i),i)},enable:({target:i})=>A(i).some(d=>d.closable!==!1)},closeRights:{label:"Close to the Right",handler:async({target:i})=>{await P(E(i),i)},enable:({target:i})=>E(i).some(d=>d.closable!==!1)},closeOthers:{label:"Close Others",handler:async({target:i})=>{await P(S(i),i)},enable:({target:i})=>S(i).some(d=>d.closable!==!1)}};function g(){s.visible=!1,s.target=null}function D(i,d){e.contextmenu&&(s.visible=!0,s.target=i,s.position.x=d.clientX,s.position.y=d.clientY,document.addEventListener("click",g,{once:!0}))}function O(i,d){const h=typeof i=="string"?{id:i}:i,k=V[h.id],Ae=h.label??k?.label??String(h.id),q=h.visible??k?.visible??!0;if(!(typeof q=="function"?q(d):q!==!1))return null;const G=h.enable??k?.enable??!0,_e=typeof G=="function"?G(d):G!==!1,Q=h.handler??k?.handler;if(!Q)return null;const Pe=async()=>{await Promise.resolve(Q(d))};return{id:String(h.id),label:Ae,disabled:!_e,action:Pe}}const v=t.computed(()=>{if(!s.visible||!s.target||e.contextmenu===!1)return[];const i=Array.isArray(e.contextmenu)?e.contextmenu:f,d={target:s.target,controller:n};return i.map(h=>O(h,d)).filter(h=>!!h)});async function U(i){i.disabled||(g(),await i.action())}function F(i){return typeof i.title=="string"?i.title:Array.isArray(i.title)&&i.title.length?String(i.title[0]):i.fullPath}function x(i){return!(i.closable===!1||n.options.keepLastTab&&n.tabs.length<=1)}async function l(i){await n.closeTab(i.id)}function r(i){n.activeId.value!==i.id&&n.openTab(i.to,!1)}function u(i){return["router-tab__item",{"is-active":n.activeId.value===i.id,"is-closable":x(i)},i.tabClass]}function m(i){return n.refreshingKey.value===n.getRouteKey(i)}t.onMounted(()=>{document.addEventListener("keydown",g)}),t.onBeforeUnmount(()=>{document.removeEventListener("keydown",g),o.appContext.config.globalProperties.$tabs=null}),t.watch(()=>e.keepAlive,i=>{n.options.keepAlive=i}),t.watch(()=>n.activeId.value,()=>g()),t.watch(()=>e.contextmenu,i=>{i||g()}),t.watch(()=>v.value.length,i=>{s.visible&&i===0&&g()});const C=n.includeKeys;return{controller:n,tabs:n.tabs,includeKeys:C,tabTransitionProps:b,pageTransitionProps:p,buildTabClass:u,activate:r,close:l,context:s,menuItems:v,handleMenuAction:U,showContextMenu:D,hideContextMenu:g,tabTitle:F,isClosable:x,isRefreshing:m,hasCustomSlot:c}}}),fe=(e,o)=>{const a=e.__vccOpts||e;for(const[n,c]of o)a[n]=c;return a},de={class:"router-tab"},be={class:"router-tab__header"},pe={class:"router-tab__slot-start"},me={class:"router-tab__scroll"},he=["onClick","onAuxclick","onContextmenu"],ye=["title"],ge=["onClick"],ke={class:"router-tab__slot-end"},Te={class:"router-tab__container"},Ce=["aria-disabled","onClick"];function we(e,o,a,n,c,b){const p=t.resolveComponent("RouterView");return t.openBlock(),t.createElementBlock("div",de,[t.createElementVNode("header",be,[t.createElementVNode("div",pe,[t.renderSlot(e.$slots,"start")]),t.createElementVNode("div",me,[t.createVNode(t.TransitionGroup,t.mergeProps({tag:"ul",class:"router-tab__nav"},e.tabTransitionProps),{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.tabs,s=>(t.openBlock(),t.createElementBlock("li",{key:s.id,class:t.normalizeClass(e.buildTabClass(s)),onClick:f=>e.activate(s),onAuxclick:t.withModifiers(f=>e.close(s),["middle","prevent"]),onContextmenu:t.withModifiers(f=>e.showContextMenu(s,f),["prevent"])},[t.createElementVNode("span",{class:"router-tab__item-title",title:e.tabTitle(s)},[s.icon?(t.openBlock(),t.createElementBlock("i",{key:0,class:t.normalizeClass(["router-tab__item-icon",s.icon])},null,2)):t.createCommentVNode("",!0),t.createTextVNode(" "+t.toDisplayString(e.tabTitle(s)),1)],8,ye),e.isClosable(s)?(t.openBlock(),t.createElementBlock("a",{key:0,class:"router-tab__item-close",type:"button",onClick:t.withModifiers(f=>e.close(s),["stop"])},null,8,ge)):t.createCommentVNode("",!0)],42,he))),128))]),_:1},16)]),t.createElementVNode("div",ke,[t.renderSlot(e.$slots,"end")])]),t.createElementVNode("div",Te,[t.createVNode(p,null,{default:t.withCtx(s=>[e.hasCustomSlot?t.renderSlot(e.$slots,"default",t.normalizeProps(t.mergeProps({key:0},{...s,controller:e.controller}))):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createVNode(t.Transition,t.mergeProps(e.pageTransitionProps,{appear:""}),{default:t.withCtx(()=>[e.controller.options.keepAlive?(t.openBlock(),t.createBlock(t.KeepAlive,{key:0,include:e.includeKeys,max:e.controller.options.maxAlive||void 0},[e.isRefreshing(s.route)?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.Component),{key:e.controller.getRouteKey(s.route),class:"router-tab-page"}))],1032,["include","max"])):t.createCommentVNode("",!0)]),_:2},1040),t.createVNode(t.Transition,t.mergeProps(e.pageTransitionProps,{appear:""}),{default:t.withCtx(()=>[!e.controller.options.keepAlive||e.isRefreshing(s.route)?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.Component),{key:e.controller.getRouteKey(s.route)+(e.isRefreshing(s.route)?"-refresh":""),class:"router-tab-page"})):t.createCommentVNode("",!0)]),_:2},1040)],64))]),_:3})]),e.context.visible&&e.context.target?(t.openBlock(),t.createElementBlock("div",{key:0,class:"router-tab__contextmenu",style:t.normalizeStyle({left:e.context.position.x+"px",top:e.context.position.y+"px"})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.menuItems,s=>(t.openBlock(),t.createElementBlock("a",{key:s.id,class:"router-tab__contextmenu-item","aria-disabled":s.disabled,onClick:t.withModifiers(f=>e.handleMenuAction(s),["prevent"])},t.toDisplayString(s.label),9,Ce))),128))],4)):t.createCommentVNode("",!0)])}const j=fe(ue,[["render",we]]),Re={class:"router-tabs","aria-hidden":"true"},$=t.defineComponent({name:"RouterTabs",__name:"RouterTabs",props:{cookieKey:{},expiresInDays:{},path:{},domain:{},secure:{type:Boolean},sameSite:{},serialize:{type:Function},deserialize:{type:Function},fallbackRoute:{}},setup(e){return L(e),(a,n)=>(t.openBlock(),t.createElementBlock("span",Re))}}),z={install(e){if(z._installed)return;z._installed=!0;const o=j.name||"RouterTab",a=$.name||"RouterTabs";e.component(o,j),e.component(a,$),a!=="router-tabs"&&e.component("router-tabs",$),Object.defineProperty(e.config.globalProperties,"$tabs",{configurable:!0,enumerable:!1,get(){return e._context.provides[_]},set(n){n&&e.provide(_,n)}})}};y.RouterTab=j,y.RouterTabs=$,y.default=z,y.routerTabsKey=_,y.useRouterTabs=M,y.useRouterTabsPersistence=L,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(y,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router"],t):(y=typeof globalThis<"u"?globalThis:y||self,t(y["vue3-router-tab"]={},y.Vue,y.VueRouter))})(this,(function(y,t,ee){"use strict";function te(e={}){return{initialTabs:e.initialTabs??[],keepAlive:e.keepAlive??!0,maxAlive:e.maxAlive??0,keepLastTab:e.keepLastTab??!0,appendPosition:e.appendPosition??"last",defaultRoute:e.defaultRoute??"/"}}function w(e,i){const a=e.resolve(i);if(!a||!a.matched.length)throw new Error(`[RouterTabs] Unable to resolve route: ${String(i)}`);return a}const ne={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 R(e){const i=e.meta?.key;if(typeof i=="function"){const a=i(e);if(typeof a=="string"&&a.length)return a}else if(typeof i=="string"&&i.length){const a=ne[i.toLowerCase()];return a?a(e):i}return e.fullPath}function I(e,i){const a=e.meta?.keepAlive;return typeof a=="boolean"?a:i}function N(e,i){const a=e.meta?.reuse;return typeof a=="boolean"?a:i}function H(e){const i=e.meta??{},a={};return"title"in i&&(a.title=i.title),"tips"in i&&(a.tips=i.tips),"icon"in i&&(a.icon=i.icon),"closable"in i&&(a.closable=i.closable),"tabClass"in i&&(a.tabClass=i.tabClass),"target"in i&&(a.target=i.target),"href"in i&&(a.href=i.href),a}function B(e,i,a){const n=H(e);return{id:R(e),to:e.fullPath,fullPath:e.fullPath,matched:e,alive:I(e,a),reusable:N(e,!1),closable:n.closable??!0,...n,...i}}function M(e,i,a,n){if(!e.find(b=>b.id===i.id)){if(a==="next"&&n){const b=e.findIndex(p=>p.id===n);if(b>-1){e.splice(b+1,0,i);return}}e.push(i)}}function Y(e,i,a){if(!i||i<=0)return;const n=e.filter(c=>c.alive);for(;n.length>i;){const c=n.shift();if(!c||c.id===a)continue;const b=e.findIndex(p=>p.id===c.id);b>-1&&(e[b].alive=!1)}}function oe(e){return{to:e.to,title:e.title,tips:e.tips,icon:e.icon,tabClass:e.tabClass,closable:e.closable}}function ie(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 ae(e,i={}){const a=te(i),n=t.reactive([]),c=t.ref(null),b=t.shallowRef(),p=t.ref(null),s=t.computed(()=>n.filter(l=>l.alive).map(l=>l.id));let f=!1;function T(l){const r=typeof l.matched=="object"?l:w(e,l);return{key:R(r),fullPath:r.fullPath,alive:I(r,a.keepAlive),reusable:N(r,!1),matched:r}}function A(l){const r=R(l);let u=n.find(m=>m.id===r);return u?(u.fullPath=l.fullPath,u.to=l.fullPath,u.matched=l,u.alive=I(l,a.keepAlive),u.reusable=N(l,u.reusable),Object.assign(u,H(l)),u):(u=B(l,{},a.keepAlive),M(n,u,a.appendPosition,c.value),Y(n,a.maxAlive,c.value),u)}async function K(l,r=!1,u=!0){const m=w(e,l),C=R(m),o=c.value===C;u==="sameTab"&&(u=o),u&&await k(C,!0),await e[r?"replace":"push"](m),o&&await P()}function S(l){const r=n.findIndex(m=>m.id===l),u=n[r]||n[r-1]||n[0];return u?u.to:a.defaultRoute}async function v(l=c.value,r={}){if(l){if(!r.force&&a.keepLastTab&&n.length===1)throw new Error("[RouterTabs] Unable to close the final tab when keepLastTab is true.");if(await V(l,{force:r.force}),r.redirect!==null)if(c.value===l){const u=r.redirect??S(l);u&&await e.replace(u)}else r.redirect&&await e.replace(r.redirect)}}async function V(l,r={}){const u=n.findIndex(m=>m.id===l);u!==-1&&(n.splice(u,1),p.value===l&&(p.value=null),c.value===l&&(c.value=null,b.value=void 0))}async function k(l=c.value??void 0,r=!1){l&&(p.value=l,await t.nextTick(),r||await t.nextTick(),p.value=null)}async function O(l=!1){for(const r of n)await k(r.id,l)}async function U(l=a.defaultRoute){n.splice(0,n.length),c.value=null,b.value=void 0;for(const r of a.initialTabs){const u=w(e,r.to),m=B(u,r,a.keepAlive);n.push(m)}await e.replace(l)}async function P(){const l=c.value;l&&await k(l,!0)}function F(l){return typeof l.matched=="object"?R(l):R(w(e,l))}function q(){const l=n.find(r=>r.id===c.value);return{tabs:n.map(oe),active:l?l.to:null}}async function x(l){f=!0,n.splice(0,n.length),c.value=null,b.value=void 0;const r=l?.tabs??[];for(const m of r)try{const C=w(e,m.to),o=ie(m),d=B(C,o,a.keepAlive);M(n,d,"last",null)}catch{}f=!1;const u=l?.active??r[r.length-1]?.to??a.defaultRoute;if(u)try{await e.replace(u)}catch{}}return t.watch(()=>e.currentRoute.value,l=>{if(f)return;const r=A(l);c.value=r.id,b.value=r,Y(n,a.maxAlive,c.value)},{immediate:!0}),a.initialTabs.length&&a.initialTabs.forEach(l=>{const r=w(e,l.to),u=B(r,l,a.keepAlive);M(n,u,"last",null)}),{options:a,tabs:n,activeId:c,current:b,includeKeys:s,refreshingKey:p,openTab:K,closeTab:v,removeTab:V,refreshTab:k,refreshAll:O,reset:U,reload:P,getRouteKey:F,matchRoute:T,snapshot:q,hydrate:x}}function W(e){return e?typeof e=="string"?{name:e}:e:{}}const _=Symbol("RouterTabsContext"),$="router-tabs:snapshot";function L(e={}){const{optional:i=!1}=e,a=t.inject(_,null);if(a)return a;const n=t.inject("$tabs",null);if(n)return n;const b=t.getCurrentInstance()?.appContext.config.globalProperties.$tabs;if(b)return b;if(!i)throw new Error("[RouterTabs] useRouterTabs must be used within <router-tab>.");return null}const le=864e5;function se(e){if(typeof document>"u")return null;const i=`${encodeURIComponent(e)}=`,a=document.cookie?document.cookie.split("; "):[];for(const n of a)if(n.startsWith(i))return decodeURIComponent(n.slice(i.length));return null}function X(e,i,a){if(typeof document>"u")return;const{expiresInDays:n=7,path:c="/",domain:b,secure:p,sameSite:s="lax"}=a,f=[`${encodeURIComponent(e)}=${encodeURIComponent(i)}`];if(n!==1/0){const T=new Date(Date.now()+n*le).toUTCString();f.push(`Expires=${T}`)}c&&f.push(`Path=${c}`),b&&f.push(`Domain=${b}`),p&&f.push("Secure"),s&&f.push(`SameSite=${s.charAt(0).toUpperCase()}${s.slice(1)}`),document.cookie=f.join("; ")}function Q(e,i){if(typeof document>"u")return;const{path:a="/",domain:n}=i,c=[`${encodeURIComponent(e)}=`];c.push("Expires=Thu, 01 Jan 1970 00:00:01 GMT"),a&&c.push(`Path=${a}`),n&&c.push(`Domain=${n}`),document.cookie=c.join("; ")}const re=e=>JSON.stringify(e??null),ce=e=>{if(!e)return null;try{return JSON.parse(e)}catch{return null}};function j(e={}){const{cookieKey:i=$,serialize:a=re,deserialize:n=ce}=e,c=L({optional:!0}),b=t.ref(!0),p=s=>{t.onMounted(async()=>{const f=n(se(i));if(f&&f.tabs?.length)try{b.value=!0,await s.hydrate(f)}finally{b.value=!1}else try{b.value=!0;const A=e.fallbackRoute??s.options.defaultRoute;await s.reset(A)}finally{b.value=!1}const T=s.snapshot();T.tabs.length?X(i,a(T),e):Q(i,e),b.value=!1}),t.watch(()=>({tabs:s.tabs.map(f=>({to:f.to,title:f.title,tips:f.tips,icon:f.icon,tabClass:f.tabClass,closable:f.closable})),active:s.activeId.value}),()=>{if(b.value)return;const f=s.snapshot();f.tabs.length?X(i,a(f),e):Q(i,e)},{deep:!0})};c?p(c):t.onMounted(()=>{const s=L({optional:!0});s&&p(s)})}const ue=t.defineComponent({name:"RouterTab",components:{RouterView:ee.RouterView},props:{tabs:{type:Array,default:()=>[]},keepAlive:{type:Boolean,default:!0},maxAlive:{type:Number,default:0},keepLastTab:{type:Boolean,default:!0},append:{type:String,default:"last"},defaultPage:{type:[String,Object],default:"/"},tabTransition:{type:[String,Object],default:"router-tab-zoom"},pageTransition:{type:[String,Object],default:()=>({name:"router-tab-swap",mode:"out-in"})},contextmenu:{type:[Boolean,Array],default:!0},cookieKey:{type:String,default:$},persistence:{type:Object,default:null}},setup(e){const i=t.getCurrentInstance();if(!i)throw new Error("[RouterTab] component must be used within a Vue application context.");const a=i.appContext.app.config.globalProperties.$router;if(!a)throw new Error("[RouterTab] Vue Router is required. Make sure to call app.use(router) before RouterTab.");const n=ae(a,{initialTabs:e.tabs,keepAlive:e.keepAlive,maxAlive:e.maxAlive,keepLastTab:e.keepLastTab,appendPosition:e.append,defaultRoute:e.defaultPage});t.provide(_,n),i.appContext.config.globalProperties.$tabs=n;const c=t.computed(()=>!!i?.slots?.default);if(e.cookieKey!==null||e.persistence){const o={...e.persistence??{}};e.cookieKey!==null?o.cookieKey=e.cookieKey||$:o.cookieKey||(o.cookieKey=$),j(o)}const b=t.computed(()=>W(e.tabTransition)),p=t.computed(()=>W(e.pageTransition)),s=t.reactive({visible:!1,target:null,position:{x:0,y:0}}),f=["refresh","refreshAll","close","closeLefts","closeRights","closeOthers"];function T(o){return n.tabs.findIndex(d=>d.id===o)}function A(o){const d=T(o.id);return d>0?n.tabs.slice(0,d):[]}function K(o){const d=T(o.id);return d>-1?n.tabs.slice(d+1):[]}function S(o){return n.tabs.filter(d=>d.id!==o.id)}async function v(o,d){const h=o.filter(g=>g.closable!==!1);if(h.length){for(const g of h)n.activeId.value===g.id?await n.closeTab(g.id,{redirect:d.to,force:!0}):await n.removeTab(g.id,{force:!0});n.activeId.value!==d.id&&await n.openTab(d.to,!0,!1)}}const V={refresh:{label:"Refresh",handler:async({target:o})=>{await n.refreshTab(o.id,!0)}},refreshAll:{label:"Refresh All",handler:async()=>{await n.refreshAll(!0)}},close:{label:"Close",handler:async({target:o})=>{await n.closeTab(o.id)},enable:({target:o})=>x(o)},closeLefts:{label:"Close to the Left",handler:async({target:o})=>{await v(A(o),o)},enable:({target:o})=>A(o).some(d=>d.closable!==!1)},closeRights:{label:"Close to the Right",handler:async({target:o})=>{await v(K(o),o)},enable:({target:o})=>K(o).some(d=>d.closable!==!1)},closeOthers:{label:"Close Others",handler:async({target:o})=>{await v(S(o),o)},enable:({target:o})=>S(o).some(d=>d.closable!==!1)}};function k(){s.visible=!1,s.target=null}function O(o,d){e.contextmenu&&(s.visible=!0,s.target=o,s.position.x=d.clientX,s.position.y=d.clientY,document.addEventListener("click",k,{once:!0}))}function U(o,d){const h=typeof o=="string"?{id:o}:o,g=V[h.id],Ae=h.label??g?.label??String(h.id),G=h.visible??g?.visible??!0;if(!(typeof G=="function"?G(d):G!==!1))return null;const J=h.enable??g?.enable??!0,_e=typeof J=="function"?J(d):J!==!1,Z=h.handler??g?.handler;if(!Z)return null;const ve=async()=>{await Promise.resolve(Z(d))};return{id:String(h.id),label:Ae,disabled:!_e,action:ve}}const P=t.computed(()=>{if(!s.visible||!s.target||e.contextmenu===!1)return[];const o=Array.isArray(e.contextmenu)?e.contextmenu:f,d={target:s.target,controller:n};return o.map(h=>U(h,d)).filter(h=>!!h)});async function F(o){o.disabled||(k(),await o.action())}function q(o){return typeof o.title=="string"?o.title:Array.isArray(o.title)&&o.title.length?String(o.title[0]):o.fullPath}function x(o){return!(o.closable===!1||n.options.keepLastTab&&n.tabs.length<=1)}async function l(o){await n.closeTab(o.id)}function r(o){n.activeId.value!==o.id&&n.openTab(o.to,!1)}function u(o){return["router-tab__item",{"is-active":n.activeId.value===o.id,"is-closable":x(o)},o.tabClass]}function m(o){return n.refreshingKey.value===n.getRouteKey(o)}t.onMounted(()=>{document.addEventListener("keydown",k)}),t.onBeforeUnmount(()=>{document.removeEventListener("keydown",k),i.appContext.config.globalProperties.$tabs=null}),t.watch(()=>e.keepAlive,o=>{n.options.keepAlive=o}),t.watch(()=>n.activeId.value,()=>k()),t.watch(()=>e.contextmenu,o=>{o||k()}),t.watch(()=>P.value.length,o=>{s.visible&&o===0&&k()});const C=n.includeKeys;return{controller:n,tabs:n.tabs,includeKeys:C,tabTransitionProps:b,pageTransitionProps:p,buildTabClass:u,activate:r,close:l,context:s,menuItems:P,handleMenuAction:F,showContextMenu:O,hideContextMenu:k,tabTitle:q,isClosable:x,isRefreshing:m,hasCustomSlot:c}}}),fe=(e,i)=>{const a=e.__vccOpts||e;for(const[n,c]of i)a[n]=c;return a},de={class:"router-tab"},be={class:"router-tab__header"},pe={class:"router-tab__slot-start"},me={class:"router-tab__scroll"},he=["onClick","onAuxclick","onContextmenu"],ye=["title"],ke=["onClick"],ge={class:"router-tab__slot-end"},Te={class:"router-tab__container"},Ce=["aria-disabled","onClick"];function we(e,i,a,n,c,b){const p=t.resolveComponent("RouterView");return t.openBlock(),t.createElementBlock("div",de,[t.createElementVNode("header",be,[t.createElementVNode("div",pe,[t.renderSlot(e.$slots,"start")]),t.createElementVNode("div",me,[t.createVNode(t.TransitionGroup,t.mergeProps({tag:"ul",class:"router-tab__nav"},e.tabTransitionProps),{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.tabs,s=>(t.openBlock(),t.createElementBlock("li",{key:s.id,class:t.normalizeClass(e.buildTabClass(s)),onClick:f=>e.activate(s),onAuxclick:t.withModifiers(f=>e.close(s),["middle","prevent"]),onContextmenu:t.withModifiers(f=>e.showContextMenu(s,f),["prevent"])},[t.createElementVNode("span",{class:"router-tab__item-title",title:e.tabTitle(s)},[s.icon?(t.openBlock(),t.createElementBlock("i",{key:0,class:t.normalizeClass(["router-tab__item-icon",s.icon])},null,2)):t.createCommentVNode("",!0),t.createTextVNode(" "+t.toDisplayString(e.tabTitle(s)),1)],8,ye),e.isClosable(s)?(t.openBlock(),t.createElementBlock("a",{key:0,class:"router-tab__item-close",type:"button",onClick:t.withModifiers(f=>e.close(s),["stop"])},null,8,ke)):t.createCommentVNode("",!0)],42,he))),128))]),_:1},16)]),t.createElementVNode("div",ge,[t.renderSlot(e.$slots,"end")])]),t.createElementVNode("div",Te,[t.createVNode(p,null,{default:t.withCtx(s=>[e.hasCustomSlot?t.renderSlot(e.$slots,"default",t.normalizeProps(t.mergeProps({key:0},{...s,controller:e.controller}))):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createVNode(t.Transition,t.mergeProps(e.pageTransitionProps,{appear:""}),{default:t.withCtx(()=>[e.controller.options.keepAlive?(t.openBlock(),t.createBlock(t.KeepAlive,{key:0,include:e.includeKeys,max:e.controller.options.maxAlive||void 0},[e.isRefreshing(s.route)?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.Component),{key:e.controller.getRouteKey(s.route),class:"router-tab-page"}))],1032,["include","max"])):t.createCommentVNode("",!0)]),_:2},1040),t.createVNode(t.Transition,t.mergeProps(e.pageTransitionProps,{appear:""}),{default:t.withCtx(()=>[!e.controller.options.keepAlive||e.isRefreshing(s.route)?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.Component),{key:e.controller.getRouteKey(s.route)+(e.isRefreshing(s.route)?"-refresh":""),class:"router-tab-page"})):t.createCommentVNode("",!0)]),_:2},1040)],64))]),_:3})]),e.context.visible&&e.context.target?(t.openBlock(),t.createElementBlock("div",{key:0,class:"router-tab__contextmenu",style:t.normalizeStyle({left:e.context.position.x+"px",top:e.context.position.y+"px"})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.menuItems,s=>(t.openBlock(),t.createElementBlock("a",{key:s.id,class:"router-tab__contextmenu-item","aria-disabled":s.disabled,onClick:t.withModifiers(f=>e.handleMenuAction(s),["prevent"])},t.toDisplayString(s.label),9,Ce))),128))],4)):t.createCommentVNode("",!0)])}const z=fe(ue,[["render",we]]),Re={class:"router-tabs","aria-hidden":"true"},E=t.defineComponent({name:"RouterTabs",__name:"RouterTabs",props:{cookieKey:{},expiresInDays:{},path:{},domain:{},secure:{type:Boolean},sameSite:{},serialize:{type:Function},deserialize:{type:Function},fallbackRoute:{}},setup(e){return j(e),(a,n)=>(t.openBlock(),t.createElementBlock("span",Re))}}),D={install(e){if(D._installed)return;D._installed=!0;const i=z.name||"RouterTab",a=E.name||"RouterTabs";e.component(i,z),e.component(a,E),a!=="router-tabs"&&e.component("router-tabs",E),Object.defineProperty(e.config.globalProperties,"$tabs",{configurable:!0,enumerable:!1,get(){return e._context.provides[_]},set(n){n&&e.provide(_,n)}})}};y.RouterTab=z,y.RouterTabs=E,y.default=D,y.routerTabsKey=_,y.useRouterTabs=L,y.useRouterTabsPersistence=j,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/index.d.ts

@@ -0,0 +1,96 @@
+import type { App, Plugin, DefineComponent, PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type {
+  TabRecord,
+  TabInput,
+  RouterTabsOptions,
+  CloseTabOptions,
+  RouterTabsContext,
+  RouterTabsMenuConfig,
+  RouterTabsMenuItem,
+  RouterTabsMenuPreset,
+  RouterTabsSnapshot,
+  RouterTabsSnapshotTab,
+  RouterTabsPersistenceOptions
+} from './lib/core/types'
+
+export type {
+  TabRecord,
+  TabInput,
+  RouterTabsOptions,
+  CloseTabOptions,
+  RouterTabsContext,
+  RouterTabsMenuConfig,
+  RouterTabsMenuItem,
+  RouterTabsMenuPreset,
+  RouterTabsSnapshot,
+  RouterTabsSnapshotTab,
+  RouterTabsPersistenceOptions
+}
+
+export declare const routerTabsKey: import('vue').InjectionKey<RouterTabsContext>
+
+export declare function useRouterTabs(options?: { optional?: boolean }): RouterTabsContext | null
+
+export declare function useRouterTabsPersistence(options?: RouterTabsPersistenceOptions): void
+
+export declare const RouterTabs: DefineComponent<RouterTabsPersistenceOptions, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<RouterTabsPersistenceOptions>, {}>
+
+export declare const RouterTab: DefineComponent<{
+  tabs: {
+    type: PropType<TabInput[]>
+    default: () => TabInput[]
+  }
+  keepAlive: BooleanConstructor
+  maxAlive: NumberConstructor
+  keepLastTab: BooleanConstructor
+  append: PropType<'last' | 'next'>
+  defaultPage: PropType<RouteLocationRaw>
+  tabTransition: PropType<import('./lib/core/types').TransitionLike>
+  pageTransition: PropType<import('./lib/core/types').TransitionLike>
+  contextmenu: PropType<boolean | RouterTabsMenuConfig[]>
+  cookieKey: StringConstructor
+  persistence: PropType<RouterTabsPersistenceOptions | null>
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<{
+  tabs?: TabInput[] | undefined
+  keepAlive?: boolean | undefined
+  maxAlive?: number | undefined
+  keepLastTab?: boolean | undefined
+  append?: 'last' | 'next' | undefined
+  defaultPage?: RouteLocationRaw | undefined
+  tabTransition?: import('./lib/core/types').TransitionLike | undefined
+  pageTransition?: import('./lib/core/types').TransitionLike | undefined
+  contextmenu?: boolean | RouterTabsMenuConfig[] | undefined
+  cookieKey?: string | undefined
+  persistence?: RouterTabsPersistenceOptions | null | undefined
+}> & {
+  tabs?: TabInput[] | undefined
+  keepAlive?: boolean | undefined
+  maxAlive?: number | undefined
+  keepLastTab?: boolean | undefined
+  append?: 'last' | 'next' | undefined
+  defaultPage?: RouteLocationRaw | undefined
+  tabTransition?: import('./lib/core/types').TransitionLike | undefined
+  pageTransition?: import('./lib/core/types').TransitionLike | undefined
+  contextmenu?: boolean | RouterTabsMenuConfig[] | undefined
+  cookieKey?: string | undefined
+  persistence?: RouterTabsPersistenceOptions | null | undefined
+}, {
+  tabs: TabInput[]
+  keepAlive: boolean
+  maxAlive: number
+  keepLastTab: boolean
+  append: 'last' | 'next'
+  defaultPage: RouteLocationRaw
+  tabTransition: import('./lib/core/types').TransitionLike
+  pageTransition: import('./lib/core/types').TransitionLike
+  contextmenu: boolean | RouterTabsMenuConfig[]
+  cookieKey: string
+  persistence: RouterTabsPersistenceOptions | null
+}>
+
+export interface RouterTabPlugin extends Plugin {}
+
+declare const plugin: RouterTabPlugin
+
+export default plugin

package/lib/components/RouterTab.vue

@@ -121,7 +121,7 @@ import type {
   TransitionLike
 } from '../core/types'
 import { getTransOpt } from '../util/index'
-import { routerTabsKey } from '../constants'
+import { routerTabsKey, routerTabsCookie } from '../constants'
 import { useRouterTabsPersistence } from '../persistence'
 
 
@@ -174,7 +174,7 @@ export default defineComponent({
     },
     cookieKey: {
       type: String,
-      default: null
+      default: routerTabsCookie
     },
     persistence: {
       type: Object as PropType<RouterTabsPersistenceOptions | null>,
@@ -206,11 +206,15 @@ export default defineComponent({
 
     const hasCustomSlot = computed(() => Boolean(instance?.slots?.default))
 
-    if (props.cookieKey || props.persistence) {
+    if (props.cookieKey !== null || props.persistence) {
       const options: RouterTabsPersistenceOptions = {
         ...(props.persistence ?? {})
       }
-      if (props.cookieKey) options.cookieKey = props.cookieKey
+      if (props.cookieKey !== null) {
+        options.cookieKey = props.cookieKey || routerTabsCookie
+      } else if (!options.cookieKey) {
+        options.cookieKey = routerTabsCookie
+      }
       useRouterTabsPersistence(options)
     }
 

package/lib/persistence.ts

@@ -98,7 +98,7 @@ export function useRouterTabsPersistence(options: RouterTabsPersistenceOptions =
   } = options
 
   const controller = useRouterTabs({ optional: true })
-  const hydrating = ref(false)
+  const hydrating = ref(true)
 
   const setup = (ctrl: NonNullable<typeof controller>) => {
     onMounted(async () => {
@@ -127,6 +127,8 @@ export function useRouterTabsPersistence(options: RouterTabsPersistenceOptions =
       } else {
         writeCookie(cookieKey, serialize(snapshot), options)
       }
+
+      hydrating.value = false
     })
 
     watch(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-router-tab",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "files": [
     "dist",