@topvisor/ui 1.4.3-updateVue.1 → 1.5.0-updates.1

package/tabsView/tabsView.js

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