@topvisor/ui/tabsView/tabsView.js

Topvisor UI-kit Vue

		import { Core as _autoloadCSSCore } from '../core/app.js';
		const fileNames = ['../assets/tabsView.css', '../assets/popupHint.css'].map(fileName => import.meta.resolve(fileName));
		_autoloadCSSCore.insertCSSLinkToPage(fileNames, true);
	
import { watch as k, computed as I, ref as f, defineComponent as M, createBlock as m, openBlock as l, resolveDynamicComponent as O, normalizeClass as S, unref as i, withCtx as b, renderSlot as v, createElementBlock as p, createCommentVNode as y, mergeModels as z, useModel as D, useSlots as U, onMounted as q, onUnmounted as H, createElementVNode as g, toDisplayString as C, Fragment as G, createTextVNode as Q, markRaw as X, createVNode as Y, KeepAlive as Z } from "vue";
import { C as V, T as x, g as ee } from "../.chunks/forms-EIQ_3SBd.es.js";
import { getHash as K, genHash as te, setHash as oe, delHash as ae } from "../utils/route.js";
import { u as se, d as ne } from "../.chunks/store-CX_6ZXhO.es.js";
import { b as A, _ as ie } from "../.chunks/listItem.vue_vue_type_script_setup_true_lang-CmBz0A7l.es.js";
/* empty css                                                               */
import { sleepWhile as re } from "../utils/system.js";
const j = (t, o) => `top:${String(t)}:${o}`, le = (t, o) => {
  if (!o.$id) return;
  const e = j(t, o.$id);
  try {
    const a = JSON.parse(localStorage.getItem(e));
    typeof a == typeof o[t] && (o[t] = a);
  } catch {
    console.warn(new Error(`В localStorage[${e}] не корректный json`));
  }
}, ue = (t, o) => {
  if (!o.$id) return;
  const e = j(t, o.$id);
  k(() => o[t], () => {
    localStorage.setItem(e, JSON.stringify(o[t]));
  }, { immediate: !0 });
}, E = {
  loadLocalStorge: le,
  addSaverLocalStorge: ue
}, F = /* @__PURE__ */ new Set();
addEventListener("popstate", (t) => {
  F.forEach((o) => o(t));
});
const W = Symbol(), ce = (t, o) => {
  const e = ne(W, () => {
    const a = I(() => t.showMenuInPopup ?? V.state.isMobile), u = I(() => t.pageMod), d = f(!1), n = f(void 0), r = f(!0);
    return {
      showMenuInPopup: a,
      pageMod: u,
      isShort: d,
      activeItemName: o,
      component: n,
      scrollable: r
    };
  }, t.idState);
  if (t.isShortable) {
    const a = "isShort";
    E.loadLocalStorge(a, e), E.addSaverLocalStorge(a, e);
  }
  if (e.$id) {
    const a = (u) => {
      o.value = K(e.$id);
    };
    F.add(a);
  }
  return e;
}, L = () => se(W), de = {
  key: 1,
  class: "top-ellipsis"
}, w = /* @__PURE__ */ M({
  __name: "menuItem",
  props: {
    name: {},
    href: {},
    icon: {},
    disabled: { type: Boolean },
    component: { default: void 0 },
    scrollable: { type: Boolean, default: !0 }
  },
  setup(t) {
    const o = t, e = L(), a = I(() => o.name && e.$id ? te(e.$id, o.name) : o.href), u = I(() => e.showMenuInPopup ? A : a ? "a" : "button"), d = (n) => {
      !o.href && a.value && n.preventDefault(), o.name && (e.activeItemName = o.name);
    };
    return (n, r) => (l(), m(O(u.value), {
      target: "_self",
      class: S({
        "top-tabsView_menuItem": !i(e).showMenuInPopup,
        "top-active": n.name && i(e).activeItemName === n.name,
        "top-disabled": n.disabled,
        "top-spa-disabled": !0
      }),
      href: a.value,
      "data-top-icon": n.icon || void 0,
      disabled: n.disabled || void 0,
      onClick: d
    }, {
      default: b(() => [
        i(e).showMenuInPopup ? v(n.$slots, "default", { key: 0 }) : n.$slots.default && !i(e).isShort ? (l(), p("span", de, [
          v(n.$slots, "default")
        ])) : y("", !0)
      ]),
      _: 3
    }, 8, ["class", "href", "data-top-icon", "disabled"]));
  }
}), J = (t) => (t == null ? void 0 : t.name) === "AsyncComponentWrapper" && !(t != null && t.__asyncResolved), pe = async (t, o) => {
  (t == null ? void 0 : t.name) === "AsyncComponentWrapper" && (t != null && t.__asyncResolved || (t.__asyncLoader(), await re(() => o() && J(t), 200)));
}, me = { class: "top-tabsView_menuOpener" }, fe = ["data-top-icon"], ve = { class: "top-ellipsis" }, _e = { class: "top-tabsView_menuList" }, he = {
  key: 0,
  class: "top-tabsView_menuFooter"
}, be = /* @__PURE__ */ M({
  __name: "menu",
  props: /* @__PURE__ */ z({
    isShortable: { type: Boolean },
    isLoading: { type: Boolean }
  }, {
    isLoading: {},
    isLoadingModifiers: {}
  }),
  emits: ["update:isLoading"],
  setup(t) {
    const o = D(t, "isLoading"), e = L(), a = U(), u = /* @__PURE__ */ new Map(), d = () => {
      if (!a.default) return;
      const c = a.default({}).find((s) => s.key === "_menu");
      c && n(c.children);
    }, n = (c) => {
      c.forEach((s) => {
        var P, T, B, R;
        if (s.type.__name && s.type.__name !== w.__name) return;
        if (!s.type.__name && typeof s.children == "object") {
          n(s.children);
          return;
        }
        if (!((P = s.props) != null && P.name) || (T = s.props) != null && T.disabled) return;
        const N = {
          title: ((R = (B = s.children).default) == null ? void 0 : R.call(B)[0].children).trim(),
          icon: s.props.icon,
          component: s.props.component ? X(s.props.component) : w.props.component.default,
          scrollable: s.props.scrollable ?? w.props.scrollable.default
        };
        u.set(s.props.name, N);
      });
    }, r = f(null);
    let _ = 0;
    k(
      () => e.activeItemName,
      async () => {
        const c = ++_;
        if (u.size === 0 && d(), u.size === 0) {
          e.activeItemName = "";
          return;
        }
        if (r.value = u.get(e.activeItemName) ?? null, !r.value && e.$id) {
          const s = K(e.$id);
          if (r.value = u.get(s) ?? null, r.value) {
            e.activeItemName = s;
            return;
          }
        }
        if (!r.value) {
          e.activeItemName = u.keys().next().value;
          return;
        }
        if (r.value.component === e.component) {
          o.value = !1;
          return;
        }
        e.$id && oe(e.$id, e.activeItemName, !1), o.value = !0, await pe(r.value.component, () => c === _), c === _ && (e.scrollable = r.value.scrollable, e.component = r.value.component, r.value && !e.component && console.warn(`Компонент вкладки ${e.activeItemName} не найден. Добавьте props.component для пункта меню ${e.activeItemName}.`));
      },
      { immediate: !0 }
    );
    const h = f();
    let $;
    return q(() => {
      $ = new ResizeObserver(() => {
        h.value.parentElement.style.setProperty("--top-tabsView-contents-offset-top", h.value.offsetHeight + "px");
      }), $.observe(h.value);
    }), H(() => {
      $.disconnect();
    }), (c, s) => (l(), p("div", {
      ref_key: "elRef",
      ref: h,
      class: S({
        "top-tabsView_menu": !0,
        "top-tabsView_menu-inPopup_0": !i(e).showMenuInPopup,
        "top-tabsView_menu-inPopup_1": i(e).showMenuInPopup,
        "top-tabsView_menu-short": i(e).isShort && !i(e).showMenuInPopup
      })
    }, [
      i(e).showMenuInPopup ? (l(), m(i(ie), { key: 0 }, {
        opener: b(() => [
          g("div", me, [
            r.value ? (l(), p("div", {
              key: 0,
              class: "top-tabsView_menuOpenerActiveItem",
              "data-top-icon": r.value.icon
            }, [
              g("span", ve, C(r.value.title), 1)
            ], 8, fe)) : y("", !0),
            s[1] || (s[1] = g("div", {
              class: "top-tabsView_menuOpenerIcon",
              "data-top-icon": ""
            }, null, -1))
          ])
        ]),
        contentList: b(() => [
          v(c.$slots, "default")
        ]),
        _: 3
      })) : (l(), p(G, { key: 1 }, [
        g("div", _e, [
          v(c.$slots, "default")
        ]),
        c.isShortable ? (l(), p("div", he, [
          c.isShortable ? (l(), m(w, {
            key: 0,
            icon: i(e).isShort ? "" : "",
            onClick: s[0] || (s[0] = (N) => i(e).isShort = !i(e).isShort)
          }, {
            default: b(() => [
              Q(C(i(e).isShort ? "" : "Свернуть"), 1)
            ]),
            _: 1
          }, 8, ["icon"])) : y("", !0)
        ])) : y("", !0)
      ], 64))
    ], 2));
  }
}), Pe = /* @__PURE__ */ M({
  __name: "tabsView",
  props: /* @__PURE__ */ z({
    modelValue: {},
    pageMod: { type: Boolean },
    showMenuInPopup: { type: Boolean, default: void 0 },
    isShortable: { type: Boolean, default: !1 },
    idState: {}
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(t) {
    const o = t, e = D(t, "modelValue"), a = ce(o, e), u = Math.random();
    o.pageMod && V.state.documentClassModificators.set(u, "top-hasTabsViewPageMod"), H(() => {
      o.pageMod && V.state.documentClassModificators.delete(u), a.$id && ae(a.$id, a.activeItemName, !0);
    });
    const d = f(), n = f(!1);
    return k([d, () => a.component], () => {
      n.value = J(a.component);
    }, { immediate: !0 }), (r, _) => (l(), p("div", {
      class: S({
        "top-tabsView": !0,
        "top-tabsView-pageMod": o.pageMod,
        "top-tabsView-inPopup": i(a).showMenuInPopup
      })
    }, [
      Y(be, {
        isShortable: r.isShortable,
        isLoading: n.value,
        "onUpdate:isLoading": _[0] || (_[0] = (h) => n.value = h)
      }, {
        default: b(() => [
          v(r.$slots, "menu")
        ]),
        _: 3
      }, 8, ["isShortable", "isLoading"]),
      g("div", {
        class: S({
          "top-tabsView_contents": !0,
          "top-tabsView_contents-isLoading": n.value,
          "top-tabsView_contents-noScrollable": !i(a).scrollable
        })
      }, [
        n.value ? (l(), m(x, { key: 0 })) : y("", !0),
        (l(), m(Z, null, [
          (l(), m(O(i(a).component), {
            ref_key: "componentRef",
            ref: d
          }, null, 512))
        ], 1024))
      ], 2)
    ], 2));
  }
}), ge = {}, ye = { class: "top-tabsView_menuDelimeter" };
function Se(t, o) {
  return l(), p("div", ye);
}
const we = /* @__PURE__ */ ee(ge, [["render", Se]]), Te = /* @__PURE__ */ M({
  __name: "menuTitle",
  props: {
    isSubtitle: { type: Boolean }
  },
  setup(t) {
    const o = L();
    return (e, a) => i(o).showMenuInPopup ? (l(), m(i(A), {
      key: 0,
      type: "title"
    }, {
      default: b(() => [
        v(e.$slots, "default")
      ]),
      _: 3
    })) : i(o).isShort ? (l(), m(we, { key: 1 })) : (l(), p("div", {
      key: 2,
      class: S({
        "top-tabsView_menuTitle": !0,
        "top-tabsView_menuTitle-subtitle": e.isSubtitle
      })
    }, [
      v(e.$slots, "default")
    ], 2));
  }
});
export {
  Pe as TopTabsView,
  w as TopTabsViewMenuItem,
  Te as TopTabsViewMenuTitle
};
//# sourceMappingURL=tabsView.js.map