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

vue tab page

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