vue-tab-page/dist/vue-tab-page.js

vue tab page

import { inject as P, onMounted as d, onActivated as g, onDeactivated as _, onBeforeUnmount as f, reactive as T, markRaw as k, defineComponent as w, h as y, createElementBlock as u, openBlock as l, Fragment as B, renderList as U, unref as p, renderSlot as x, resolveComponent as C, createVNode as A, withCtx as D, createBlock as m, KeepAlive as M, resolveDynamicComponent as q } from "vue";
const v = Symbol("");
class I {
  constructor(e) {
    this.name = e.name, this.href = e.href, this.fullPath = e.fullPath, this.path = e.path, this.params = { ...e.params }, this.query = { ...e.query }, this.hash = e.hash, this.matched = [], this.meta = { ...e.meta }, this.title = e.meta.title || "";
  }
  // route
  name = "";
  href = "";
  fullPath = "";
  path = "";
  params = {};
  query = {};
  hash = "";
  matched = [];
  meta = {};
  // prop
  tabPage = null;
  title = "";
  component = null;
  // private
  // event
  onMounted = null;
  onActivated = null;
  onDeactivated = null;
  onBeforeUnmount = null;
  mounted() {
    return this.onMounted?.();
  }
  activated() {
    return this.onActivated?.();
  }
  deactivated() {
    return this.onDeactivated?.();
  }
  beforeUnmount() {
    return this.onBeforeUnmount?.();
  }
  // method
  active(...e) {
    return this.tabPage?.active(this, ...e);
  }
  refresh(...e) {
    return this.tabPage?.refresh(this, ...e);
  }
  close(...e) {
    return this.tabPage?.close(this, ...e);
  }
}
class V {
  blank = null;
  router = null;
  items = [];
  incrid = 0;
  constructor({ router: e, blank: i = null }) {
    this.router = e, this.blank = i, this.items = T([]), this.router.afterEach((s, n, a) => this.add(s, n, a));
  }
  enable() {
    this.items.splice(0, this.items.length - 1);
  }
  disable() {
    this.items.splice(0);
  }
  add(e, i, s) {
    if (s)
      return;
    let n = this.items.findIndex((o) => o.fullPath == e.fullPath), a = this.items[n];
    if (n == -1)
      if (a = new I(e), a.tabPage = this, a.component = k(w({ name: "TabPageComponent" + ++this.incrid, props: { component: null }, setup: (o, { attrs: r, slots: b }) => () => y(o.component, r, b) })), history.state.replaced) {
        let o = this.items.findIndex((r) => r.fullPath == i.fullPath);
        o == -1 ? this.items.push(a) : this.items.splice(o, 1, a);
      } else
        this.items.push(a);
    e.component = a.component;
  }
  active(e) {
    this.router.push(e);
  }
  async refresh(e) {
    await e.deactivated(), await e.beforeUnmount(), await e.mounted(), await e.activated();
  }
  close(e, i = !1) {
    const s = this.items.findIndex((n) => n.fullPath == e.fullPath);
    if (s != -1) {
      if (this.items.splice(s, 1), i == "back")
        this.router.back();
      else if (i == "forward")
        this.router.forward();
      else if (i == "left") {
        const n = this.items[s - 1] ?? this.items[s] ?? this.blank;
        n && this.router.push(n);
      } else if (i == "right") {
        const n = this.items[s] ?? this.items[s - 1] ?? this.blank;
        n && this.router.push(n);
      }
    }
  }
}
const c = () => P(v), h = () => {
  const t = c();
  return t.items.find((e) => e.fullPath == t.router.currentRoute.value?.fullPath);
}, j = (t, e = h()) => {
  e && (e.onMounted = t, d(() => e.mounted()));
}, F = (t, e = h()) => {
  e && (e.onActivated = t, g(() => e.activated()));
}, L = (t, e = h()) => {
  e && (e.onDeactivated = t, _(() => e.deactivated()));
}, N = (t, e = h()) => {
  e && (e.onBeforeUnmount = t, f(() => e.beforeUnmount()));
}, $ = { class: "vue-tab-page-bar" }, E = {
  __name: "TabPageBar",
  setup(t) {
    const e = c();
    return d(() => e.enable()), f(() => e.disable()), (i, s) => (l(), u("div", $, [
      (l(!0), u(B, null, U(p(e).items, (n, a) => x(i.$slots, "default", {
        key: n.fullPath,
        tab: n,
        index: a
      })), 128))
    ]));
  }
}, K = { class: "vue-tab-page-content" }, R = {
  __name: "TabPageContent",
  setup(t) {
    const e = c();
    return (i, s) => {
      const n = C("router-view");
      return l(), u("div", K, [
        A(n, null, {
          default: D(({ route: a, Component: o }) => [
            (l(), m(M, {
              include: p(e).items.map((r) => r.component.name)
            }, [
              (l(), m(q(a.component), {
                component: o,
                key: a.fullPath
              }, null, 8, ["component"]))
            ], 1032, ["include"]))
          ]),
          _: 1
        })
      ]);
    };
  }
}, z = () => ({
  install: (t, e = null) => {
    t.provide(v, new V(e)), t.component("VueTabPageBar", E), t.component("VueTabPageContent", R);
  }
});
export {
  z as createTabPage,
  F as onTabActivated,
  N as onTabBeforeUnmount,
  L as onTabDeactivated,
  j as onTabMounted,
  h as useTab,
  c as useTabPage
};