vue3-router-tab 0.0.1 → 1.0.0

package/dist/vue3-router-tab.es.js

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