@topvisor/ui 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.chunks/datepicker-CWual081.es.js +290 -0
- package/.chunks/datepicker-CWual081.es.js.map +1 -0
- package/.chunks/datepicker-bFjXj_3j.amd.js +248 -0
- package/.chunks/datepicker-bFjXj_3j.amd.js.map +1 -0
- package/.chunks/forms-856ctwwh.amd.js +3 -0
- package/.chunks/forms-856ctwwh.amd.js.map +1 -0
- package/.chunks/forms-uLDC7Bui.es.js +1963 -0
- package/.chunks/forms-uLDC7Bui.es.js.map +1 -0
- package/.chunks/i18n-C_OH9IT3.amd.js.map +1 -1
- package/.chunks/i18n-DuTvft1T.es.js.map +1 -1
- package/.chunks/{listItem.vue_vue_type_script_setup_true_lang-B3E-SDdg.es.js → listItem.vue_vue_type_script_setup_true_lang-CNRoF_6f.es.js} +2 -2
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-CNRoF_6f.es.js.map +1 -0
- package/.chunks/{listItem.vue_vue_type_script_setup_true_lang-uKhci19t.amd.js → listItem.vue_vue_type_script_setup_true_lang-DbaCM0v_.amd.js} +2 -2
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-DbaCM0v_.amd.js.map +1 -0
- package/.chunks/{menu-CcyqVSfg.es.js → menu-ByHMHZAv.es.js} +2 -2
- package/.chunks/menu-ByHMHZAv.es.js.map +1 -0
- package/.chunks/{menu-DTbsTDGK.amd.js → menu-C_PVuMIc.amd.js} +2 -2
- package/.chunks/menu-C_PVuMIc.amd.js.map +1 -0
- package/.chunks/{popup-C5yk4q8p.es.js → popup-9IIJ1BzB.es.js} +495 -495
- package/.chunks/popup-9IIJ1BzB.es.js.map +1 -0
- package/.chunks/{popup-DAruCfQv.amd.js → popup-CUkj5veJ.amd.js} +447 -447
- package/.chunks/popup-CUkj5veJ.amd.js.map +1 -0
- package/.chunks/store-CX_6ZXhO.es.js.map +1 -1
- package/.chunks/store-esTid5oI.amd.js.map +1 -1
- package/README.md +86 -86
- package/assets/core.css +1 -1
- package/assets/forms.css +1 -1
- package/assets/formsExt.css +1 -1
- package/assets/menu.css +1 -1
- package/assets/popup.css +1 -1
- package/assets/tabs.css +1 -1
- package/assets/tabsView.css +1 -1
- package/assets/themes/dark.css +1 -0
- package/assets/themes/light.css +1 -0
- package/components/forms/select/select.d.ts +1 -2
- package/components/tabsView/tabsView/store.d.ts +1 -1
- package/core/app.amd.js +1 -1
- package/core/app.amd.js.map +1 -1
- package/core/app.js +14 -15
- package/core/app.js.map +1 -1
- package/core/core/core.d.ts +4 -4
- package/core/core/events/resize.d.ts +16 -0
- package/core/core/events.d.ts +12 -17
- package/core/core.amd.js +1 -1
- package/core/core.js +1 -1
- package/forms/forms.amd.js +1 -1
- package/forms/forms.js +1 -1
- package/forms/helpers.amd.js.map +1 -1
- package/forms/helpers.js.map +1 -1
- package/formsExt/formsExt.amd.js +1 -1
- package/formsExt/formsExt.amd.js.map +1 -1
- package/formsExt/formsExt.js +17 -18
- package/formsExt/formsExt.js.map +1 -1
- package/icomoon/Read Me.txt +7 -7
- package/icomoon/demo-files/demo.css +161 -161
- package/icomoon/demo-files/demo.js +30 -30
- package/icomoon/demo.html +3379 -3379
- package/icomoon/fonts/Topvisor-2.svg +263 -263
- package/icomoon/style.css +740 -740
- package/package.json +37 -36
- package/popup/popup.amd.js +1 -1
- package/popup/popup.amd.js.map +1 -1
- package/popup/popup.js +18 -18
- package/popup/popup.js.map +1 -1
- package/popup/worker.amd.js +1 -1
- package/popup/worker.amd.js.map +1 -1
- package/popup/worker.js +2 -2
- package/popup/worker.js.map +1 -1
- package/project/project.amd.js +1 -1
- package/project/project.amd.js.map +1 -1
- package/project/project.js +3 -3
- package/project/project.js.map +1 -1
- package/require/css.amd.js +12 -12
- package/tabs/tabs.amd.js +1 -1
- package/tabs/tabs.amd.js.map +1 -1
- package/tabs/tabs.js +7 -8
- package/tabs/tabs.js.map +1 -1
- package/tabsView/tabsView.amd.js +1 -1
- package/tabsView/tabsView.amd.js.map +1 -1
- package/tabsView/tabsView.js +101 -91
- package/tabsView/tabsView.js.map +1 -1
- package/test/themes/themes/dark-positions.amd.js +2 -0
- package/test/themes/themes/dark-positions.amd.js.map +1 -0
- package/test/themes/themes/dark-positions.d.ts +1 -0
- package/test/themes/themes/dark-positions.js +2 -0
- package/test/themes/themes/dark-positions.js.map +1 -0
- package/test/themes/themes/dark.amd.js +2 -0
- package/test/themes/themes/dark.amd.js.map +1 -0
- package/test/themes/themes/dark.d.ts +1 -0
- package/test/themes/themes/dark.js +4 -0
- package/test/themes/themes/dark.js.map +1 -0
- package/test/themes/themes/light-positions.amd.js +2 -0
- package/test/themes/themes/light-positions.amd.js.map +1 -0
- package/test/themes/themes/light-positions.d.ts +1 -0
- package/test/themes/themes/light-positions.js +2 -0
- package/test/themes/themes/light-positions.js.map +1 -0
- package/test/themes/themes/light.amd.js +2 -0
- package/test/themes/themes/light.amd.js.map +1 -0
- package/test/themes/themes/light.d.ts +1 -0
- package/test/themes/themes/light.js +4 -0
- package/test/themes/themes/light.js.map +1 -0
- package/utils/check.amd.js.map +1 -1
- package/utils/check.js.map +1 -1
- package/utils/clipboard.amd.js.map +1 -1
- package/utils/clipboard.js.map +1 -1
- package/utils/date.amd.js +1 -1
- package/utils/date.js +1 -1
- package/utils/device.amd.js +1 -1
- package/utils/device.js +3 -3
- package/utils/dom.amd.js.map +1 -1
- package/utils/dom.js.map +1 -1
- package/utils/image.amd.js.map +1 -1
- package/utils/image.js.map +1 -1
- package/utils/keyboard.amd.js.map +1 -1
- package/utils/keyboard.js.map +1 -1
- package/utils/lodash.amd.js +1 -1
- package/utils/lodash.amd.js.map +1 -1
- package/utils/lodash.js +6 -703
- package/utils/lodash.js.map +1 -1
- package/utils/number.amd.js.map +1 -1
- package/utils/number.js.map +1 -1
- package/utils/price.amd.js +1 -1
- package/utils/price.amd.js.map +1 -1
- package/utils/price.js +1 -1
- package/utils/price.js.map +1 -1
- package/utils/route.amd.js.map +1 -1
- package/utils/route.js.map +1 -1
- package/utils/scroll.amd.js.map +1 -1
- package/utils/scroll.js.map +1 -1
- package/utils/string.amd.js.map +1 -1
- package/utils/string.js.map +1 -1
- package/utils/system.amd.js.map +1 -1
- package/utils/system.js.map +1 -1
- package/utils/url.amd.js.map +1 -1
- package/utils/url.js.map +1 -1
- package/web-types.json +72 -72
- package/.chunks/datepicker-CS24dmLk.es.js +0 -290
- package/.chunks/datepicker-CS24dmLk.es.js.map +0 -1
- package/.chunks/datepicker-DsMs2YKL.amd.js +0 -248
- package/.chunks/datepicker-DsMs2YKL.amd.js.map +0 -1
- package/.chunks/debounce-4ipCj607.amd.js +0 -2
- package/.chunks/debounce-4ipCj607.amd.js.map +0 -1
- package/.chunks/debounce-BISRz08p.es.js +0 -116
- package/.chunks/debounce-BISRz08p.es.js.map +0 -1
- package/.chunks/forms-DKL0e9tp.amd.js +0 -3
- package/.chunks/forms-DKL0e9tp.amd.js.map +0 -1
- package/.chunks/forms-DT_fsN6V.es.js +0 -1161
- package/.chunks/forms-DT_fsN6V.es.js.map +0 -1
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-B3E-SDdg.es.js.map +0 -1
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-uKhci19t.amd.js.map +0 -1
- package/.chunks/menu-CcyqVSfg.es.js.map +0 -1
- package/.chunks/menu-DTbsTDGK.amd.js.map +0 -1
- package/.chunks/popup-C5yk4q8p.es.js.map +0 -1
- package/.chunks/popup-DAruCfQv.amd.js.map +0 -1
- package/assets/dark.css +0 -1
- package/assets/light.css +0 -1
package/tabsView/tabsView.js
CHANGED
|
@@ -1,51 +1,61 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { watch as $, computed as M, ref as b, defineComponent as I, openBlock as l, createBlock as
|
|
3
|
-
import {
|
|
4
|
-
import { C as
|
|
5
|
-
import { d as
|
|
6
|
-
import { TopPopupListItem as A, TopPopup as
|
|
7
|
-
import { sleepWhile as
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
const
|
|
1
|
+
import W from "../core/core.js";
|
|
2
|
+
import { watch as $, computed as M, ref as b, defineComponent as I, openBlock as l, createBlock as m, resolveDynamicComponent as B, normalizeClass as y, unref as n, withCtx as w, renderSlot as f, createElementBlock as d, createCommentVNode as h, mergeModels as O, useModel as R, useSlots as J, onMounted as U, onUnmounted as D, createElementVNode as g, toDisplayString as N, Fragment as q, createTextVNode as G, markRaw as Q, createVNode as X, KeepAlive as Y } from "vue";
|
|
3
|
+
import { getHash as E, genHash as Z, setHash as x, delHash as ee } from "../utils/route.js";
|
|
4
|
+
import { C as te, _ as S, t as oe } from "../.chunks/forms-uLDC7Bui.es.js";
|
|
5
|
+
import { d as se, u as ae } from "../.chunks/store-CX_6ZXhO.es.js";
|
|
6
|
+
import { TopPopupListItem as A, TopPopup as ne } from "../popup/popup.js";
|
|
7
|
+
import { sleepWhile as ie } from "../utils/system.js";
|
|
8
|
+
const j = ["../assets/tabsView.css"].map((t) => import.meta.resolve(t));
|
|
9
|
+
W.insertCSSLinkToPage(j, !0);
|
|
10
|
+
const z = (t, o) => `top:${String(t)}:${o}`, le = (t, o) => {
|
|
11
11
|
if (!o.$id) return;
|
|
12
|
-
const e =
|
|
12
|
+
const e = z(t, o.$id);
|
|
13
13
|
try {
|
|
14
14
|
const a = JSON.parse(localStorage.getItem(e));
|
|
15
15
|
typeof a == typeof o[t] && (o[t] = a);
|
|
16
16
|
} catch {
|
|
17
17
|
console.warn(new Error(`В localStorage[${e}] не корректный json`));
|
|
18
18
|
}
|
|
19
|
-
},
|
|
19
|
+
}, re = (t, o) => {
|
|
20
20
|
if (!o.$id) return;
|
|
21
|
-
const e =
|
|
21
|
+
const e = z(t, o.$id);
|
|
22
22
|
$(() => o[t], () => {
|
|
23
23
|
localStorage.setItem(e, JSON.stringify(o[t]));
|
|
24
24
|
}, { immediate: !0 });
|
|
25
|
-
},
|
|
26
|
-
loadLocalStorge:
|
|
27
|
-
addSaverLocalStorge:
|
|
28
|
-
},
|
|
29
|
-
|
|
30
|
-
|
|
25
|
+
}, C = {
|
|
26
|
+
loadLocalStorge: le,
|
|
27
|
+
addSaverLocalStorge: re
|
|
28
|
+
}, H = /* @__PURE__ */ new Set();
|
|
29
|
+
addEventListener("popstate", (t) => {
|
|
30
|
+
H.forEach((o) => o(t));
|
|
31
|
+
});
|
|
32
|
+
const K = Symbol(), pe = (t, o) => {
|
|
33
|
+
const e = se(K, () => {
|
|
34
|
+
const a = M(() => t.showMenuInPopup ?? te.state.isMobile), r = M(() => t.pageMod), c = b(!1), s = b(void 0), p = b(!0);
|
|
31
35
|
return {
|
|
32
36
|
showMenuInPopup: a,
|
|
33
37
|
pageMod: r,
|
|
34
38
|
isShort: c,
|
|
35
39
|
activeItemName: o,
|
|
36
40
|
component: s,
|
|
37
|
-
scrollable:
|
|
41
|
+
scrollable: p
|
|
38
42
|
};
|
|
39
43
|
}, t.idState);
|
|
40
44
|
if (t.isShortable) {
|
|
41
45
|
const a = "isShort";
|
|
42
|
-
|
|
46
|
+
C.loadLocalStorge(a, e), C.addSaverLocalStorge(a, e);
|
|
47
|
+
}
|
|
48
|
+
if (e.$id) {
|
|
49
|
+
const a = (r) => {
|
|
50
|
+
o.value = E(e.$id);
|
|
51
|
+
};
|
|
52
|
+
H.add(a);
|
|
43
53
|
}
|
|
44
54
|
return e;
|
|
45
|
-
}, L = () =>
|
|
55
|
+
}, L = () => ae(K), ue = {
|
|
46
56
|
key: 1,
|
|
47
57
|
class: "top-ellipsis"
|
|
48
|
-
},
|
|
58
|
+
}, ce = /* @__PURE__ */ I({
|
|
49
59
|
__name: "menuItem",
|
|
50
60
|
props: {
|
|
51
61
|
name: {},
|
|
@@ -56,10 +66,10 @@ const E = (t, o) => `top:${String(t)}:${o}`, ie = (t, o) => {
|
|
|
56
66
|
scrollable: { type: Boolean, default: !0 }
|
|
57
67
|
},
|
|
58
68
|
setup(t) {
|
|
59
|
-
const o = t, e = L(), a = M(() => o.name && e.$id ?
|
|
69
|
+
const o = t, e = L(), a = M(() => o.name && e.$id ? Z(e.$id, o.name) : o.href), r = M(() => e.showMenuInPopup ? A : a ? "a" : "button"), c = (s) => {
|
|
60
70
|
!o.href && a.value && s.preventDefault(), o.name && (e.activeItemName = o.name);
|
|
61
71
|
};
|
|
62
|
-
return (s,
|
|
72
|
+
return (s, p) => (l(), m(B(r.value), {
|
|
63
73
|
target: "_self",
|
|
64
74
|
class: y({
|
|
65
75
|
"top-tabsView_menuItem": !n(e).showMenuInPopup,
|
|
@@ -73,32 +83,32 @@ const E = (t, o) => `top:${String(t)}:${o}`, ie = (t, o) => {
|
|
|
73
83
|
onClick: c
|
|
74
84
|
}, {
|
|
75
85
|
default: w(() => [
|
|
76
|
-
n(e).showMenuInPopup ? f(s.$slots, "default", { key: 0 }) : s.$slots.default && !n(e).isShort ? (l(),
|
|
86
|
+
n(e).showMenuInPopup ? f(s.$slots, "default", { key: 0 }) : s.$slots.default && !n(e).isShort ? (l(), d("span", ue, [
|
|
77
87
|
f(s.$slots, "default")
|
|
78
88
|
])) : h("", !0)
|
|
79
89
|
]),
|
|
80
90
|
_: 3
|
|
81
91
|
}, 8, ["class", "href", "data-top-icon", "disabled"]));
|
|
82
92
|
}
|
|
83
|
-
}),
|
|
93
|
+
}), de = {
|
|
84
94
|
"top-tabsView_menuItem": "top-tabsView_menuItem",
|
|
85
95
|
"top-active": "top-active",
|
|
86
96
|
"top-forms-option": "top-forms-option",
|
|
87
97
|
"top-formsCaption": "top-formsCaption",
|
|
88
98
|
"top-disabled": "top-disabled"
|
|
89
99
|
}, me = {
|
|
90
|
-
$style:
|
|
91
|
-
}, v = /* @__PURE__ */ S(
|
|
92
|
-
(t == null ? void 0 : t.name) === "AsyncComponentWrapper" && (t != null && t.__asyncResolved || (t.__asyncLoader(), await
|
|
93
|
-
},
|
|
100
|
+
$style: de
|
|
101
|
+
}, v = /* @__PURE__ */ S(ce, [["__cssModules", me]]), F = (t) => (t == null ? void 0 : t.name) === "AsyncComponentWrapper" && !(t != null && t.__asyncResolved), _e = async (t, o) => {
|
|
102
|
+
(t == null ? void 0 : t.name) === "AsyncComponentWrapper" && (t != null && t.__asyncResolved || (t.__asyncLoader(), await ie(() => o() && F(t), 200)));
|
|
103
|
+
}, be = { class: "top-tabsView_menuOpener" }, fe = ["data-top-icon"], we = { class: "top-ellipsis" }, Ve = /* @__PURE__ */ g("div", {
|
|
94
104
|
class: "top-tabsView_menuOpenerIcon",
|
|
95
105
|
"data-top-icon": ""
|
|
96
|
-
}, null, -1),
|
|
106
|
+
}, null, -1), ve = { class: "top-tabsView_menuList" }, he = {
|
|
97
107
|
key: 0,
|
|
98
108
|
class: "top-tabsView_menuFooter"
|
|
99
|
-
},
|
|
109
|
+
}, ge = /* @__PURE__ */ I({
|
|
100
110
|
__name: "menu",
|
|
101
|
-
props: /* @__PURE__ */
|
|
111
|
+
props: /* @__PURE__ */ O({
|
|
102
112
|
isShortable: { type: Boolean },
|
|
103
113
|
isLoading: { type: Boolean }
|
|
104
114
|
}, {
|
|
@@ -107,32 +117,32 @@ const E = (t, o) => `top:${String(t)}:${o}`, ie = (t, o) => {
|
|
|
107
117
|
}),
|
|
108
118
|
emits: ["update:isLoading"],
|
|
109
119
|
setup(t) {
|
|
110
|
-
const o = R(t, "isLoading"), e = L(), a =
|
|
120
|
+
const o = R(t, "isLoading"), e = L(), a = J(), r = /* @__PURE__ */ new Map(), c = () => {
|
|
111
121
|
if (!a.default) return;
|
|
112
|
-
const
|
|
113
|
-
|
|
122
|
+
const u = a.default().find((i) => i.key === "_menu");
|
|
123
|
+
u && u.children.forEach((i) => {
|
|
114
124
|
var P, k;
|
|
115
125
|
if (i.type.__name !== v.__name || !i.props.name || i.props.disabled) return;
|
|
116
126
|
const T = {
|
|
117
127
|
title: ((k = (P = i.children).default) == null ? void 0 : k.call(P)[0].children).trim(),
|
|
118
128
|
icon: i.props.icon,
|
|
119
|
-
component: i.props.component ?
|
|
129
|
+
component: i.props.component ? Q(i.props.component) : v.props.component.default,
|
|
120
130
|
scrollable: i.props.scrollable ?? v.props.scrollable.default
|
|
121
131
|
};
|
|
122
132
|
r.set(i.props.name, T);
|
|
123
133
|
});
|
|
124
134
|
}, s = b(null);
|
|
125
|
-
let
|
|
135
|
+
let p = 0;
|
|
126
136
|
$(
|
|
127
137
|
() => e.activeItemName,
|
|
128
138
|
async () => {
|
|
129
|
-
const
|
|
139
|
+
const u = ++p;
|
|
130
140
|
if (r.size === 0 && c(), r.size === 0) {
|
|
131
141
|
e.activeItemName = "";
|
|
132
142
|
return;
|
|
133
143
|
}
|
|
134
144
|
if (s.value = r.get(e.activeItemName) ?? null, !s.value && e.$id) {
|
|
135
|
-
const i =
|
|
145
|
+
const i = E(e.$id);
|
|
136
146
|
if (s.value = r.get(i) ?? null, s.value) {
|
|
137
147
|
e.activeItemName = i;
|
|
138
148
|
return;
|
|
@@ -146,19 +156,19 @@ const E = (t, o) => `top:${String(t)}:${o}`, ie = (t, o) => {
|
|
|
146
156
|
o.value = !1;
|
|
147
157
|
return;
|
|
148
158
|
}
|
|
149
|
-
e.$id &&
|
|
159
|
+
e.$id && x(e.$id, e.activeItemName, !1), o.value = !0, await _e(s.value.component, () => u === p), u === p && (e.scrollable = s.value.scrollable, e.component = s.value.component, s.value && !e.component && console.warn(`Компонент вкладки ${e.activeItemName} не найден. Добавьте props.component для пункта меню ${e.activeItemName}.`));
|
|
150
160
|
},
|
|
151
161
|
{ immediate: !0 }
|
|
152
162
|
);
|
|
153
163
|
const _ = b();
|
|
154
164
|
let V;
|
|
155
|
-
return
|
|
165
|
+
return U(() => {
|
|
156
166
|
V = new ResizeObserver(() => {
|
|
157
167
|
_.value.parentElement.style.setProperty("--top-tabsView-contents-offset-top", _.value.offsetHeight + "px");
|
|
158
168
|
}), V.observe(_.value);
|
|
159
169
|
}), D(() => {
|
|
160
170
|
V.disconnect();
|
|
161
|
-
}), (
|
|
171
|
+
}), (u, i) => (l(), d("div", {
|
|
162
172
|
ref_key: "elRef",
|
|
163
173
|
ref: _,
|
|
164
174
|
class: y({
|
|
@@ -168,35 +178,35 @@ const E = (t, o) => `top:${String(t)}:${o}`, ie = (t, o) => {
|
|
|
168
178
|
"top-tabsView_menu-short": n(e).isShort && !n(e).showMenuInPopup
|
|
169
179
|
})
|
|
170
180
|
}, [
|
|
171
|
-
n(e).showMenuInPopup ? (l(),
|
|
181
|
+
n(e).showMenuInPopup ? (l(), m(n(ne), { key: 0 }, {
|
|
172
182
|
opener: w(() => [
|
|
173
|
-
g("div",
|
|
174
|
-
s.value ? (l(),
|
|
183
|
+
g("div", be, [
|
|
184
|
+
s.value ? (l(), d("div", {
|
|
175
185
|
key: 0,
|
|
176
186
|
class: "top-tabsView_menuOpenerActiveItem",
|
|
177
187
|
"data-top-icon": s.value.icon
|
|
178
188
|
}, [
|
|
179
|
-
g("span",
|
|
180
|
-
], 8,
|
|
181
|
-
|
|
189
|
+
g("span", we, N(s.value.title), 1)
|
|
190
|
+
], 8, fe)) : h("", !0),
|
|
191
|
+
Ve
|
|
182
192
|
])
|
|
183
193
|
]),
|
|
184
194
|
contentList: w(() => [
|
|
185
|
-
f(
|
|
195
|
+
f(u.$slots, "default")
|
|
186
196
|
]),
|
|
187
197
|
_: 3
|
|
188
|
-
})) : (l(),
|
|
189
|
-
g("div",
|
|
190
|
-
f(
|
|
198
|
+
})) : (l(), d(q, { key: 1 }, [
|
|
199
|
+
g("div", ve, [
|
|
200
|
+
f(u.$slots, "default")
|
|
191
201
|
]),
|
|
192
|
-
|
|
193
|
-
|
|
202
|
+
u.isShortable ? (l(), d("div", he, [
|
|
203
|
+
u.isShortable ? (l(), m(v, {
|
|
194
204
|
key: 0,
|
|
195
205
|
icon: n(e).isShort ? "" : "",
|
|
196
206
|
onClick: i[0] || (i[0] = (T) => n(e).isShort = !n(e).isShort)
|
|
197
207
|
}, {
|
|
198
208
|
default: w(() => [
|
|
199
|
-
|
|
209
|
+
G(N(n(e).isShort ? "" : "Свернуть"), 1)
|
|
200
210
|
]),
|
|
201
211
|
_: 1
|
|
202
212
|
}, 8, ["icon"])) : h("", !0)
|
|
@@ -204,7 +214,7 @@ const E = (t, o) => `top:${String(t)}:${o}`, ie = (t, o) => {
|
|
|
204
214
|
], 64))
|
|
205
215
|
], 2));
|
|
206
216
|
}
|
|
207
|
-
}),
|
|
217
|
+
}), ye = {
|
|
208
218
|
"top-tabsView-pageMod": "top-tabsView-pageMod",
|
|
209
219
|
"top-tabsView_menu": "top-tabsView_menu",
|
|
210
220
|
"top-tabsView_menu-inPopup_0": "top-tabsView_menu-inPopup_0",
|
|
@@ -216,11 +226,11 @@ const E = (t, o) => `top:${String(t)}:${o}`, ie = (t, o) => {
|
|
|
216
226
|
"top-tabsView_menuList": "top-tabsView_menuList",
|
|
217
227
|
"top-tabsView_menuFooter": "top-tabsView_menuFooter",
|
|
218
228
|
"top-tabsView_menuItem": "top-tabsView_menuItem"
|
|
219
|
-
},
|
|
220
|
-
$style:
|
|
221
|
-
},
|
|
229
|
+
}, Se = {
|
|
230
|
+
$style: ye
|
|
231
|
+
}, Me = /* @__PURE__ */ S(ge, [["__cssModules", Se]]), Ie = /* @__PURE__ */ I({
|
|
222
232
|
__name: "tabsView",
|
|
223
|
-
props: /* @__PURE__ */
|
|
233
|
+
props: /* @__PURE__ */ O({
|
|
224
234
|
modelValue: {},
|
|
225
235
|
pageMod: { type: Boolean },
|
|
226
236
|
showMenuInPopup: { type: Boolean, default: void 0 },
|
|
@@ -232,29 +242,29 @@ const E = (t, o) => `top:${String(t)}:${o}`, ie = (t, o) => {
|
|
|
232
242
|
}),
|
|
233
243
|
emits: ["update:modelValue"],
|
|
234
244
|
setup(t) {
|
|
235
|
-
const o = t, e = R(t, "modelValue"), a =
|
|
236
|
-
document.documentElement.classList.toggle("top-hasTabsViewPageMod",
|
|
245
|
+
const o = t, e = R(t, "modelValue"), a = pe(o, e), r = (p) => {
|
|
246
|
+
document.documentElement.classList.toggle("top-hasTabsViewPageMod", p);
|
|
237
247
|
};
|
|
238
248
|
o.pageMod && r(!0), D(() => {
|
|
239
|
-
o.pageMod && r(!1), a.$id &&
|
|
249
|
+
o.pageMod && r(!1), a.$id && ee(a.$id, a.activeItemName, !0);
|
|
240
250
|
});
|
|
241
251
|
const c = b(), s = b(!1);
|
|
242
252
|
return $([c, () => a.component], () => {
|
|
243
|
-
s.value =
|
|
244
|
-
}, { immediate: !0 }), (
|
|
253
|
+
s.value = F(a.component);
|
|
254
|
+
}, { immediate: !0 }), (p, _) => (l(), d("div", {
|
|
245
255
|
class: y({
|
|
246
256
|
"top-tabsView": !0,
|
|
247
257
|
"top-tabsView-pageMod": o.pageMod,
|
|
248
258
|
"top-tabsView-inPopup": n(a).showMenuInPopup
|
|
249
259
|
})
|
|
250
260
|
}, [
|
|
251
|
-
|
|
252
|
-
isShortable:
|
|
261
|
+
X(Me, {
|
|
262
|
+
isShortable: p.isShortable,
|
|
253
263
|
isLoading: s.value,
|
|
254
264
|
"onUpdate:isLoading": _[0] || (_[0] = (V) => s.value = V)
|
|
255
265
|
}, {
|
|
256
266
|
default: w(() => [
|
|
257
|
-
f(
|
|
267
|
+
f(p.$slots, "menu")
|
|
258
268
|
]),
|
|
259
269
|
_: 3
|
|
260
270
|
}, 8, ["isShortable", "isLoading"]),
|
|
@@ -265,9 +275,9 @@ const E = (t, o) => `top:${String(t)}:${o}`, ie = (t, o) => {
|
|
|
265
275
|
"top-tabsView_contents-noScrollable": !n(a).scrollable
|
|
266
276
|
})
|
|
267
277
|
}, [
|
|
268
|
-
s.value ? (l(),
|
|
269
|
-
(l(),
|
|
270
|
-
(l(),
|
|
278
|
+
s.value ? (l(), m(oe, { key: 0 })) : h("", !0),
|
|
279
|
+
(l(), m(Y, null, [
|
|
280
|
+
(l(), m(B(n(a).component), {
|
|
271
281
|
ref_key: "componentRef",
|
|
272
282
|
ref: c
|
|
273
283
|
}, null, 512))
|
|
@@ -275,30 +285,30 @@ const E = (t, o) => `top:${String(t)}:${o}`, ie = (t, o) => {
|
|
|
275
285
|
], 2)
|
|
276
286
|
], 2));
|
|
277
287
|
}
|
|
278
|
-
}),
|
|
288
|
+
}), $e = {
|
|
279
289
|
"top-tabsView": "top-tabsView",
|
|
280
290
|
"top-tabsView_contents": "top-tabsView_contents",
|
|
281
291
|
"top-tabsView_contents-isLoading": "top-tabsView_contents-isLoading",
|
|
282
292
|
"top-tabsView_contents-noScrollable": "top-tabsView_contents-noScrollable",
|
|
283
293
|
"top-tabsView-inPopup": "top-tabsView-inPopup"
|
|
284
|
-
},
|
|
285
|
-
$style:
|
|
286
|
-
},
|
|
294
|
+
}, Le = {
|
|
295
|
+
$style: $e
|
|
296
|
+
}, Te = /* @__PURE__ */ S(Ie, [["__cssModules", Le]]), Pe = {
|
|
287
297
|
"top-tabsView_menuDelimeter": "top-tabsView_menuDelimeter"
|
|
288
|
-
},
|
|
289
|
-
function
|
|
290
|
-
return l(),
|
|
298
|
+
}, ke = {}, Ne = { class: "top-tabsView_menuDelimeter" };
|
|
299
|
+
function Ce(t, o) {
|
|
300
|
+
return l(), d("div", Ne);
|
|
291
301
|
}
|
|
292
302
|
const Be = {
|
|
293
|
-
$style:
|
|
294
|
-
}, Oe = /* @__PURE__ */ S(
|
|
303
|
+
$style: Pe
|
|
304
|
+
}, Oe = /* @__PURE__ */ S(ke, [["render", Ce], ["__cssModules", Be]]), Re = /* @__PURE__ */ I({
|
|
295
305
|
__name: "menuTitle",
|
|
296
306
|
props: {
|
|
297
307
|
isSubtitle: { type: Boolean }
|
|
298
308
|
},
|
|
299
309
|
setup(t) {
|
|
300
310
|
const o = L();
|
|
301
|
-
return (e, a) => n(o).showMenuInPopup ? (l(),
|
|
311
|
+
return (e, a) => n(o).showMenuInPopup ? (l(), m(n(A), {
|
|
302
312
|
key: 0,
|
|
303
313
|
type: "title"
|
|
304
314
|
}, {
|
|
@@ -306,7 +316,7 @@ const Be = {
|
|
|
306
316
|
f(e.$slots, "default")
|
|
307
317
|
]),
|
|
308
318
|
_: 3
|
|
309
|
-
})) : n(o).isShort ? (l(),
|
|
319
|
+
})) : n(o).isShort ? (l(), m(Oe, { key: 1 })) : (l(), d("div", {
|
|
310
320
|
key: 2,
|
|
311
321
|
class: y({
|
|
312
322
|
"top-tabsView_menuTitle": !0,
|
|
@@ -316,15 +326,15 @@ const Be = {
|
|
|
316
326
|
f(e.$slots, "default")
|
|
317
327
|
], 2));
|
|
318
328
|
}
|
|
319
|
-
}),
|
|
329
|
+
}), De = {
|
|
320
330
|
"top-tabsView_menuTitle": "top-tabsView_menuTitle",
|
|
321
331
|
"top-tabsView_menuTitle-subtitle": "top-tabsView_menuTitle-subtitle"
|
|
322
|
-
},
|
|
323
|
-
$style:
|
|
324
|
-
}, Ae = /* @__PURE__ */ S(
|
|
332
|
+
}, Ee = {
|
|
333
|
+
$style: De
|
|
334
|
+
}, Ae = /* @__PURE__ */ S(Re, [["__cssModules", Ee]]), Ue = Te, qe = v, Ge = Ae;
|
|
325
335
|
export {
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
336
|
+
Ue as TopTabsView,
|
|
337
|
+
qe as TopTabsViewMenuItem,
|
|
338
|
+
Ge as TopTabsViewMenuTitle
|
|
329
339
|
};
|
|
330
340
|
//# sourceMappingURL=tabsView.js.map
|
package/tabsView/tabsView.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabsView.js","sources":["../../src/core/utils/store/localStorage.ts","../../src/components/tabsView/tabsView/store.ts","../../src/components/tabsView/tabsView/menuItem.vue","../../src/components/tabsView/tabsView/utils.ts","../../src/components/tabsView/tabsView/menu.vue","../../src/components/tabsView/tabsView/tabsView.vue","../../src/components/tabsView/tabsView/menuDelimeter.vue","../../src/components/tabsView/tabsView/menuTitle.vue","../../src/components/tabsView/tabsView.ts"],"sourcesContent":["import { watch } from 'vue';\nimport type { Store } from './store';\n\n/**\n * Сгенерировать имя для сохранения данных в localStorage\n * @param stateName - имя свойства состояния\n * @param stateKey - ключ состояния, разные компоненты могут использовать одинаковый ключ\n */\nconst genStorageKey = <T extends Store>(stateName: keyof T, stateKey: string): string => {\n\tconst stateNameString = String(stateName);\n\n\treturn `top:${stateNameString}:${stateKey}`;\n};\n\n/**\n * Загрузить состояние\n * @param stateName - имя свойства состояния\n * @param store\n */\nconst loadLocalStorge = <T extends Store>(stateName: keyof T, store: T) => {\n\t// если Store.key не знадан, значит сохранение состояния в компоненте отключено\n\tif (!store.$id) return;\n\n\tconst localStorageKey = genStorageKey(stateName, store.$id);\n\n\ttry {\n\t\tconst localStorageValue: typeof store[keyof typeof store] = JSON.parse(localStorage.getItem(localStorageKey) as string);\n\n\t\tif (typeof localStorageValue === typeof store[stateName]) {\n\t\t\tstore[stateName] = localStorageValue;\n\t\t}\n\t} catch (e) {\n\t\tconsole.warn(new Error(`В localStorage[${localStorageKey}] не корректный json`));\n\t}\n};\n\n/**\n * Добавить автосохранение состояние при его изменении\n * @param stateName - имя свойства состояния\n * @param store\n */\nconst addSaverLocalStorge = <T extends Store>(stateName: keyof T, store: T) => {\n\t// если store.$id не знадан, значит сохранение состояния в компоненте отключено\n\tif (!store.$id) return;\n\n\tconst localStorageKey = genStorageKey(stateName, store.$id);\n\n\twatch(() => store[stateName], () => {\n\t\tlocalStorage.setItem(localStorageKey, JSON.stringify(store[stateName]));\n\t}, { immediate: true });\n};\n\nexport default {\n\tloadLocalStorge,\n\taddSaverLocalStorge,\n};","import type { ModelRef, InjectionKey } from 'vue';\nimport { ref, computed } from 'vue';\nimport Core from '@/core/core/core';\nimport { defineStore, useStore } from '@/core/utils/store';\nimport StoreLocalStorage from '@/core/utils/store/localStorage';\nimport type { Props, Store } from './tabsView';\n\nexport const injectionKey = Symbol() as InjectionKey<Store>;\n\n/**\n * Инициировать Store компонента\n */\nexport const defineTabsStore = (props: Props, model: ModelRef<string | undefined>) => {\n\tconst store = defineStore(injectionKey, () => {\n\t\tconst showMenuInPopup = computed(() => props.showMenuInPopup ?? Core.state.isMobile);\n\t\tconst pageMod = computed(() => props.pageMod);\n\t\tconst isShort = ref(false);\n\n\t\tconst component = ref(undefined);\n\t\tconst scrollable = ref(true);\n\n\t\treturn {\n\t\t\tshowMenuInPopup,\n\t\t\tpageMod,\n\t\t\tisShort,\n\t\t\tactiveItemName: model,\n\t\t\tcomponent,\n\t\t\tscrollable,\n\t\t};\n\t}, props.idState);\n\n\tif (props.isShortable) {\n\t\tconst stateName = 'isShort';\n\n\t\tStoreLocalStorage.loadLocalStorge(stateName, store);\n\t\tStoreLocalStorage.addSaverLocalStorge(stateName, store);\n\t}\n\n\treturn store;\n};\n\n/**\n * Получить Store компонента\n */\nexport const useTabsStore = () => useStore(injectionKey);\n","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { genHash } from '@/core/utils/route';\nimport { TopPopupListItem } from '@/components/popup/popup';\nimport { useTabsStore } from './store';\nimport type { PropsMenuItem } from './tabsView';\n\nconst props = withDefaults(defineProps<PropsMenuItem>(), {\n\tscrollable: true,\n\tcomponent: undefined,\n});\n\nconst store = useTabsStore();\n\nconst href = computed(() => {\n\t// это внутренняя хеш навигация, ссылка на вкладку\n\tif (props.name && store.$id) {\n\t\treturn genHash(store.$id, props.name);\n\t}\n\n\treturn props.href;\n});\n\nconst tagName = computed(() => {\n\tif (store.showMenuInPopup) {\n\t\treturn TopPopupListItem;\n\t}\n\n\treturn href ? 'a' : 'button';\n});\n\n/**\n * Клик по элементу меню\n */\nconst onClick = (e: MouseEvent) => {\n\t// это внутренняя хеш навигация, ссылка на вкладку\n\tif (!props.href && href.value) {\n\t\te.preventDefault();\n\t}\n\n\tif (props.name) {\n\t\tstore.activeItemName = props.name;\n\t}\n};\n</script>\n\n<template>\n\t<component\n\t\t:is=\"tagName\"\n\t\ttarget=\"_self\"\n\t\t:class=\"{\n\t\t\t['top-tabsView_menuItem']: !store.showMenuInPopup,\n\t\t\t['top-active']: name && store.activeItemName === name,\n\t\t\t['top-disabled']: disabled,\n\t\t\t['top-spa-disabled']: true,\n\t\t}\"\n\t\t:href=\"href\"\n\t\t:data-top-icon=\"icon || undefined\"\n\t\t:disabled=\"disabled || undefined\"\n\t\t@click=\"onClick\"\n\t>\n\t\t<slot v-if=\"store.showMenuInPopup\"></slot>\n\n\t\t<span\n\t\t\tv-else-if=\"$slots.default && !store.isShort\"\n\t\t\tclass=\"top-ellipsis\"\n\t\t>\n\t\t\t<slot></slot>\n\t\t</span>\n\t</component>\n</template>\n\n<style module>\n.top-tabsView_menuItem {\n\t--top-icon-color: var(--color-icon-2);\n\t--top-icon-width: calc(var(--top-icon-size));\n\n\tcursor: pointer;\n\tbox-sizing: border-box;\n\n\tborder: none;\n\tborder-radius: var(--top-radius-2);\n\tpadding: var(--top-padding-2);\n\tbackground: transparent;\n\theight: 40px;\n\n\tcolor: var(--color-text-1);\n\ttext-decoration: none;\n\twhite-space: nowrap;\n\n\tdisplay: flex;\n\tgap: var(--top-gap-2);\n\talign-items: center;\n\tjustify-content: flex-start;\n\ttransition: background var(--transition);\n}\n\n.top-tabsView_menuItem:hover {\n\tbackground: var(--color-layer-secondary-2);\n\t--top-icon-color: var(--color-icon-1);\n\ttext-decoration: none;\n}\n\n.top-tabsView_menuItem.top-active {\n\tcursor: unset;\n\tbackground: var(--color-bg-3);\n}\n\n.top-tabsView_menuItem:disabled:not(option):not(optgroup):not(.top-forms-option),\n.top-tabsView_menuItem:disabled ~ .top-formsCaption,\n.top-tabsView_menuItem.top-disabled[data-top-icon]:before,\n.top-tabsView_menuItem.top-disabled[data-top-icon2]:after {\n\topacity: unset;\n\tfilter: unset;\n}\n\n.top-tabsView_menuItem.top-disabled {\n\t--top-icon-color: var(--color-text-4);\n\n\tcolor: var(--color-text-4);\n}\n</style>\n","// TODO: Эту функцию можно вынести в глобальный utils\n\nimport { sleepWhile } from '@/core/utils/system';\n\n/**\n * Проверка нахождения компонента в состояние загрузки\n * @param component\n */\nexport const checkComponentIsLoading = (component: any) => {\n\treturn component?.name === 'AsyncComponentWrapper' && !component?.__asyncResolved;\n};\n\n/**\n * Презагрузить компонент\n *\n * Некоторое время ожидает загрузку компонента, прежде чем завершит работу\n */\nexport const preResolveComponent = async (component: any, condition: Function) => {\n\tif (component?.name !== 'AsyncComponentWrapper') return;\n\tif (component?.__asyncResolved) return;\n\n\tcomponent.__asyncLoader();\n\n\tawait sleepWhile(() => {\n\t\treturn condition() && checkComponentIsLoading(component);\n\t}, 200);\n};\n","<script setup lang=\"ts\">\nimport type { Ref } from 'vue';\nimport { markRaw, onMounted, onUnmounted, ref, useSlots, watch } from 'vue';\nimport { TopPopup } from '../../popup/popup';\nimport { getHash, setHash } from '@/core/utils/route';\n\nimport type { PropsMenu, PropsMenuItem, MenuItem } from './tabsView';\nimport { useTabsStore } from './store';\nimport TabsViewMenuItem from './menuItem.vue';\nimport { preResolveComponent } from './utils';\n\ndefineProps<PropsMenu>();\n\nconst isLoading = defineModel('isLoading');\n\nconst store = useTabsStore();\n\nconst slots = useSlots();\n\n// словарь используется для оптимизации получения нужного menuItem\nconst menuItemByName: Map<PropsMenuItem['name'], MenuItem> = new Map();\n\n// сгенерировать словарь с menuItem, по элементам в slot\nconst genMenuItemByName = () => {\n\tif (!slots.default) return;\n\n\tconst component: any = slots.default().find(item => item.key === '_menu');\n\tif (!component) return;\n\n\tcomponent.children.forEach((subComponent: any) => {\n\t\tif (subComponent.type.__name !== TabsViewMenuItem.__name) return;\n\t\tif (!subComponent.props.name || subComponent.props.disabled) return;\n\n\t\tconst menuItem: MenuItem = {\n\t\t\ttitle: (subComponent.children.default?.()[0].children as string).trim(),\n\t\t\ticon: subComponent.props.icon,\n\t\t\tcomponent: subComponent.props.component ? markRaw(subComponent.props.component) : TabsViewMenuItem.props.component.default,\n\t\t\tscrollable: subComponent.props.scrollable ?? TabsViewMenuItem.props.scrollable.default,\n\t\t};\n\n\t\tmenuItemByName.set(subComponent.props.name, menuItem);\n\t});\n};\n\n/**\n * activeMenuItem нужен:\n * - для вывода текста активной вкладки в меню с popup\n * - для вывода компонента активной вкладки (store.component)\n * - для установки store.scrollable\n */\nconst activeMenuItem: Ref<MenuItem | null> = ref(null);\n\n/**\n * Кол-во изменений активной вкладки\n */\nlet countChanged = 0;\n\n/**\n * Смена активной вкладки\n *\n * TODO: смена slot, например смена языка, требует повторного выполнения genMenuItemByName()\n */\nwatch(\n\t() => store.activeItemName,\n\tasync () => {\n\t\tconst numberChanged = ++countChanged; // порядковый номер текущего изменения\n\n\t\tif (menuItemByName.size === 0) {\n\t\t\tgenMenuItemByName();\n\t\t}\n\n\t\tif (menuItemByName.size === 0) {\n\t\t\tstore.activeItemName = '';\n\n\t\t\treturn;\n\t\t}\n\n\t\tactiveMenuItem.value = menuItemByName.get(store.activeItemName) ?? null;\n\n\t\t// элемент не найден, установить из хеша страницы\n\t\tif (!activeMenuItem.value && store.$id) {\n\t\t\tconst activeItemName = getHash(store.$id);\n\n\t\t\tactiveMenuItem.value = menuItemByName.get(activeItemName) ?? null;\n\n\t\t\tif (activeMenuItem.value) {\n\t\t\t\tstore.activeItemName = activeItemName;\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// элемент не найден, установить первый доступный\n\t\tif (!activeMenuItem.value) {\n\t\t\tstore.activeItemName = menuItemByName.keys().next().value;\n\n\t\t\treturn;\n\t\t}\n\n\t\t// запрошена смена на уже активный элемент\n\t\tif (activeMenuItem.value.component === store.component) {\n\t\t\tisLoading.value = false;\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (store.$id) setHash(store.$id, store.activeItemName, true);\n\n\t\t// флаг загрузки будет сброшен при инициализации компонента\n\t\tisLoading.value = true;\n\n\t\t/**\n\t\t * Презагрузить компонент\n\t\t *\n\t\t * Нужно для того, чтобы минимизировать скачки интерфейса при ожидании загрузки асинхронного компонента\n\t\t */\n\t\tawait preResolveComponent(activeMenuItem.value.component, () => numberChanged === countChanged);\n\n\t\t// влкадка была сменена еще раз во время sleepWhile\n\t\tif (numberChanged !== countChanged) {\n\t\t\treturn;\n\t\t}\n\n\t\tstore.scrollable = activeMenuItem.value.scrollable;\n\t\tstore.component = activeMenuItem.value.component;\n\n\t\tif (activeMenuItem.value && !store.component) {\n\t\t\tconsole.warn(`Компонент вкладки ${store.activeItemName} не найден. Добавьте props.component для пункта меню ${store.activeItemName}.`);\n\t\t}\n\t},\n\t{ immediate: true },\n);\n\nconst elRef = ref();\nlet resizeObserver: ResizeObserver;\n\nonMounted(() => {\n\tresizeObserver = new ResizeObserver(() => {\n\t\telRef.value.parentElement.style.setProperty('--top-tabsView-contents-offset-top', elRef.value.offsetHeight + 'px');\n\t});\n\n\tresizeObserver.observe(elRef.value);\n});\n\nonUnmounted(() => {\n\tresizeObserver.disconnect();\n});\n</script>\n\n<template>\n\t<div\n\t\tref=\"elRef\"\n\t\t:class=\"{\n\t\t\t'top-tabsView_menu': true,\n\t\t\t'top-tabsView_menu-inPopup_0': !store.showMenuInPopup,\n\t\t\t'top-tabsView_menu-inPopup_1': store.showMenuInPopup,\n\t\t\t'top-tabsView_menu-short': store.isShort && !store.showMenuInPopup,\n\t\t}\"\n\t>\n\t\t<!-- Спрятать меню под кнопку в popup -->\n\t\t<TopPopup v-if=\"store.showMenuInPopup\">\n\t\t\t<template #opener>\n\t\t\t\t<div class=\"top-tabsView_menuOpener\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-if=\"activeMenuItem\"\n\t\t\t\t\t\tclass=\"top-tabsView_menuOpenerActiveItem\"\n\t\t\t\t\t\t:data-top-icon=\"activeMenuItem.icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"top-ellipsis\">\n\t\t\t\t\t\t\t{{ activeMenuItem.title }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"top-tabsView_menuOpenerIcon\" data-top-icon=\"\"></div>\n\t\t\t\t</div>\n\t\t\t</template>\n\n\t\t\t<template #contentList>\n\t\t\t\t<slot></slot>\n\t\t\t</template>\n\t\t</TopPopup>\n\n\t\t<!-- Отобразить меню на странице -->\n\t\t<template v-else>\n\t\t\t<div class=\"top-tabsView_menuList\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tv-if=\"isShortable\"\n\t\t\t\tclass=\"top-tabsView_menuFooter\"\n\t\t\t>\n\t\t\t\t<TabsViewMenuItem\n\t\t\t\t\tv-if=\"isShortable\"\n\t\t\t\t\t:icon=\"store.isShort ? '' : ''\"\n\t\t\t\t\t@click=\"store.isShort = !store.isShort\"\n\t\t\t\t>\n\t\t\t\t\t{{ store.isShort ? '' : 'Свернуть' }} <!--TODO: translate-->\n\t\t\t\t</TabsViewMenuItem>\n\t\t\t</div>\n\t\t</template>\n\t</div>\n</template>\n\n<style module>\n/* режим отображение табов в основной области документа */\n.top-tabsView-pageMod .top-tabsView_menu {\n\tbox-sizing: border-box;\n\tposition: sticky;\n\ttop: var(--top-tabsView-top);\n\tz-index: 10;\n}\n\n/* режим отображение табов в основной области документа без popup */\n.top-tabsView-pageMod .top-tabsView_menu-inPopup_0 {\n\theight: calc(var(--100vh) - var(--top-tabsView-top));\n}\n\n/* стантартный режим */\n.top-tabsView_menu-inPopup_0 {\n\tbox-sizing: border-box;\n\twidth: var(--top-tabsView-menu-width);\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n}\n\n/* режим вывода в popup */\n.top-tabsView_menu-inPopup_1 {\n\tborder-bottom: 1px solid var(--color-line-2-opacity);\n}\n\n.top-tabsView_menu-short {\n\twidth: auto;\n}\n\n.top-tabsView_menu > .top-tabsView_menuOpener {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n}\n\n.top-tabsView_menu > .top-tabsView_menuOpener:hover {\n\tbackground: var(--color-layer-secondary-1);\n}\n\n.top-tabsView_menuOpenerIcon { display: flex; }\n\n.top-tabsView_menuOpenerActiveItem {\n\t--top-forms-padding: 0px;\n\n\tbox-sizing: border-box;\n\tpadding: var(--top-padding-2);\n\tmax-width: calc(100% - var(--top-forms-base-height));\n\twhite-space: nowrap;\n\tflex-grow: 1;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--top-padding-2);\n}\n\n.top-tabsView_menuList,\n.top-tabsView_menuFooter {\n\tpadding: var(--top-padding-2);\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--top-gap-2);\n}\n\n.top-tabsView_menuList {\n\toverflow-y: auto;\n}\n\n.top-tabsView_menu-short .top-tabsView_menuFooter > .top-tabsView_menuItem {\n\t--top-icon-width: 100%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { defineModel, onUnmounted, ref, watch } from 'vue';\nimport { delHash } from '@/core/utils/route';\nimport type { Props } from './tabsView';\nimport { defineTabsStore } from './store';\nimport TabsViewMenu from './menu.vue';\nimport TopLoadbar from '@/components/forms/loadbar/loadbar.vue';\nimport { checkComponentIsLoading } from './utils';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tshowMenuInPopup: undefined,\n\tisShortable: false,\n});\n\nconst model = defineModel<string>();\n\nconst store = defineTabsStore(props, model);\n\n/**\n * Установка или снятие глобального модификатора\n * @see props.pageMod\n */\nconst setDocumentPageModModificator = (pageMod: boolean) => {\n\tdocument.documentElement.classList.toggle('top-hasTabsViewPageMod', pageMod);\n};\n\nif (props.pageMod) setDocumentPageModModificator(true);\n\nonUnmounted(() => {\n\tif (props.pageMod) setDocumentPageModModificator(false);\n\n\tif (store.$id) delHash(store.$id, store.activeItemName, true);\n});\n\nconst componentRef = ref();\nconst isLoading = ref(false);\n\nwatch([componentRef, () => store.component], () => {\n\tisLoading.value = checkComponentIsLoading(store.component);\n}, { immediate: true });\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t'top-tabsView': true,\n\t\t\t'top-tabsView-pageMod': props.pageMod,\n\t\t\t'top-tabsView-inPopup': store.showMenuInPopup,\n\t\t}\"\n\t>\n\t\t<TabsViewMenu\n\t\t\t:isShortable=\"isShortable\"\n\t\t\tv-model:isLoading=\"isLoading\"\n\t\t>\n\t\t\t<!-- @slot Меню, ожидает передачу компонентов TabsViewMenuItem и TabsViewMenuTitle -->\n\t\t\t<slot name=\"menu\"></slot>\n\t\t</TabsViewMenu>\n\n\t\t<div\n\t\t\t:class=\"{\n\t\t\t\t'top-tabsView_contents': true,\n\t\t\t\t'top-tabsView_contents-isLoading': isLoading,\n\t\t\t\t'top-tabsView_contents-noScrollable': !store.scrollable,\n\t\t\t}\"\n\t\t>\n\t\t\t<TopLoadbar v-if=\"isLoading\"/>\n\n\t\t\t<keep-alive>\n\t\t\t\t<component\n\t\t\t\t\tref=\"componentRef\"\n\t\t\t\t\t:is=\"store.component\"\n\t\t\t\t/>\n\t\t\t</keep-alive>\n\t\t</div>\n\t</div>\n</template>\n\n<style module>\n:root {\n\t--top-tabsView-top: 0px;\n\t--top-tabsView-menu-width: 220px;\n\t--top-tabsView-contents-offset-top: 0px;\n}\n\n.top-tabsView {\n\tbackground: var(--color-bg-2);\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.top-tabsView_contents {\n\tborder-radius: var(--top-radius-4);\n\tbackground: var(--color-bg-3);\n\tpadding: var(--top-padding-4);\n\tflex-grow: 1;\n\toverflow: auto;\n\tposition: relative;\n}\n\n.top-tabsView_contents-isLoading {\n\tpointer-events: none;\n}\n\n.top-tabsView_contents-noScrollable {\n\twidth: calc(100% - var(--top-tabsView-menu-width));\n\tpadding: 0;\n\toverflow: visible;\n}\n\n/* top-tabsView-inPopup */\n.top-tabsView-inPopup {\n\tbackground: var(--color-bg-3);\n\tflex-direction: column;\n}\n\n.top-tabsView-inPopup > .top-tabsView_contents {\n\tborder-radius: 0;\n}\n\n.top-tabsView-inPopup > .top-tabsView_contents-noScrollable {\n\twidth: auto;\n}\n</style>\n","<script setup lang=\"ts\">\n\n</script>\n\n<template>\n\t<div class=\"top-tabsView_menuDelimeter\"></div>\n</template>\n\n<style module>\n.top-tabsView_menuDelimeter {\n\tpadding: var(--top-padding-1) 0;\n\tdisplay: flex;\n}\n\n.top-tabsView_menuDelimeter:before {\n\tcontent: \"\";\n\theight: 2px;\n\tbackground: var(--color-line-2);\n\tflex-grow: 1;\n}\n\n.top-tabsView_menuDelimeter:first-child,\n.top-tabsView_menuDelimeter + .top-tabsView_menuDelimeter {\n\tdisplay: none;\n}\n</style>","<script setup lang=\"ts\">\nimport { useTabsStore } from './store';\nimport type { PropsMenuTitle } from './tabsView';\nimport TabsViewMenuDelimeter from './menuDelimeter.vue';\nimport { TopPopupListItem } from '../../popup/popup';\n\ndefineProps<PropsMenuTitle>();\n\nconst store = useTabsStore();\n</script>\n\n<template>\n\t<TopPopupListItem\n\t\tv-if=\"store.showMenuInPopup\"\n\t\ttype=\"title\"\n\t>\n\t\t<slot></slot>\n\t</TopPopupListItem>\n\n\t<TabsViewMenuDelimeter v-else-if=\"store.isShort\"/>\n\n\t<div\n\t\tv-else\n\t\t:class=\"{\n\t\t\t'top-tabsView_menuTitle': true,\n\t\t\t'top-tabsView_menuTitle-subtitle': isSubtitle,\n\t\t}\"\n\t>\n\t\t<slot></slot>\n\t</div>\n</template>\n\n<style module>\n.top-tabsView_menuTitle {\n\tpadding: var(--top-padding-4) var(--top-padding-2) var(--top-padding-1);\n\tfont-weight: 600;\n\tcolor: var(--color-text-1);\n}\n\n.top-tabsView_menuTitle-subtitle {\n\tpadding-top: var(--top-padding-1);\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tcolor: var(--color-text-2);\n}\n</style>\n","import type { ComponentCustomProps } from 'vue';\n\nimport TabsView from './tabsView/tabsView.vue';\nimport TabsViewMenuItem from './tabsView/menuItem.vue';\nimport TabsViewMenuTitle from './tabsView/menuTitle.vue';\n\nexport const TopTabsView = TabsView as typeof TabsView & ComponentCustomProps;\nexport const TopTabsViewMenuItem = TabsViewMenuItem as typeof TabsViewMenuItem & ComponentCustomProps;\nexport const TopTabsViewMenuTitle = TabsViewMenuTitle as typeof TabsViewMenuTitle & ComponentCustomProps;\n"],"names":["genStorageKey","stateName","stateKey","loadLocalStorge","store","localStorageKey","localStorageValue","addSaverLocalStorge","watch","StoreLocalStorage","injectionKey","defineTabsStore","props","model","defineStore","showMenuInPopup","computed","Core","pageMod","isShort","ref","component","scrollable","useTabsStore","useStore","__props","href","genHash","tagName","TopPopupListItem","onClick","e","checkComponentIsLoading","preResolveComponent","condition","sleepWhile","isLoading","useModel","slots","useSlots","menuItemByName","genMenuItemByName","item","subComponent","TabsViewMenuItem","menuItem","_b","_a","markRaw","activeMenuItem","countChanged","numberChanged","activeItemName","getHash","setHash","elRef","resizeObserver","onMounted","onUnmounted","setDocumentPageModModificator","delHash","componentRef","_sfc_render","_ctx","_cache","TopTabsView","TabsView","TopTabsViewMenuItem","TopTabsViewMenuTitle","TabsViewMenuTitle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabsView.js","sources":["../../src/core/utils/store/localStorage.ts","../../src/components/tabsView/tabsView/store.ts","../../src/components/tabsView/tabsView/menuItem.vue","../../src/components/tabsView/tabsView/utils.ts","../../src/components/tabsView/tabsView/menu.vue","../../src/components/tabsView/tabsView/tabsView.vue","../../src/components/tabsView/tabsView/menuDelimeter.vue","../../src/components/tabsView/tabsView/menuTitle.vue","../../src/components/tabsView/tabsView.ts"],"sourcesContent":["import { watch } from 'vue';\r\nimport type { Store } from './store';\r\n\r\n/**\r\n * Сгенерировать имя для сохранения данных в localStorage\r\n * @param stateName - имя свойства состояния\r\n * @param stateKey - ключ состояния, разные компоненты могут использовать одинаковый ключ\r\n */\r\nconst genStorageKey = <T extends Store>(stateName: keyof T, stateKey: string): string => {\r\n\tconst stateNameString = String(stateName);\r\n\r\n\treturn `top:${stateNameString}:${stateKey}`;\r\n};\r\n\r\n/**\r\n * Загрузить состояние\r\n * @param stateName - имя свойства состояния\r\n * @param store\r\n */\r\nconst loadLocalStorge = <T extends Store>(stateName: keyof T, store: T) => {\r\n\t// если Store.key не знадан, значит сохранение состояния в компоненте отключено\r\n\tif (!store.$id) return;\r\n\r\n\tconst localStorageKey = genStorageKey(stateName, store.$id);\r\n\r\n\ttry {\r\n\t\tconst localStorageValue: typeof store[keyof typeof store] = JSON.parse(localStorage.getItem(localStorageKey) as string);\r\n\r\n\t\tif (typeof localStorageValue === typeof store[stateName]) {\r\n\t\t\tstore[stateName] = localStorageValue;\r\n\t\t}\r\n\t} catch (e) {\r\n\t\tconsole.warn(new Error(`В localStorage[${localStorageKey}] не корректный json`));\r\n\t}\r\n};\r\n\r\n/**\r\n * Добавить автосохранение состояние при его изменении\r\n * @param stateName - имя свойства состояния\r\n * @param store\r\n */\r\nconst addSaverLocalStorge = <T extends Store>(stateName: keyof T, store: T) => {\r\n\t// если store.$id не знадан, значит сохранение состояния в компоненте отключено\r\n\tif (!store.$id) return;\r\n\r\n\tconst localStorageKey = genStorageKey(stateName, store.$id);\r\n\r\n\twatch(() => store[stateName], () => {\r\n\t\tlocalStorage.setItem(localStorageKey, JSON.stringify(store[stateName]));\r\n\t}, { immediate: true });\r\n};\r\n\r\nexport default {\r\n\tloadLocalStorge,\r\n\taddSaverLocalStorge,\r\n};","import type { InjectionKey, ModelRef } from 'vue';\r\nimport { computed, ref } from 'vue';\r\nimport Core from '@/core/core/core';\r\nimport { defineStore, useStore } from '@/core/utils/store';\r\nimport StoreLocalStorage from '@/core/utils/store/localStorage';\r\nimport type { Props, Store } from './tabsView';\r\nimport { getHash } from '@/core/utils/route';\r\n\r\nconst popstateCallbacks = new Set<(e: PopStateEvent) => void>();\r\n\r\naddEventListener('popstate', (e) => {\r\n\tpopstateCallbacks.forEach(popstateCallback => popstateCallback(e));\r\n});\r\n\r\nexport const injectionKey = Symbol() as InjectionKey<Store>;\r\n\r\n/**\r\n * Инициировать Store компонента\r\n */\r\nexport const defineTabsStore = (props: Props, model: ModelRef<string | undefined>) => {\r\n\tconst store = defineStore(injectionKey, () => {\r\n\t\tconst showMenuInPopup = computed(() => props.showMenuInPopup ?? Core.state.isMobile);\r\n\t\tconst pageMod = computed(() => props.pageMod);\r\n\t\tconst isShort = ref(false);\r\n\r\n\t\tconst component = ref(undefined);\r\n\t\tconst scrollable = ref(true);\r\n\r\n\t\treturn {\r\n\t\t\tshowMenuInPopup,\r\n\t\t\tpageMod,\r\n\t\t\tisShort,\r\n\t\t\tactiveItemName: model,\r\n\t\t\tcomponent,\r\n\t\t\tscrollable,\r\n\t\t};\r\n\t}, props.idState);\r\n\r\n\tif (props.isShortable) {\r\n\t\tconst stateName = 'isShort';\r\n\r\n\t\tStoreLocalStorage.loadLocalStorge(stateName, store);\r\n\t\tStoreLocalStorage.addSaverLocalStorge(stateName, store);\r\n\t}\r\n\r\n\tif (store.$id) {\r\n\t\tconst popstateCallback = (e: PopStateEvent) => {\r\n\t\t\tmodel.value = getHash(store.$id!);\r\n\t\t};\r\n\r\n\t\tpopstateCallbacks.add(popstateCallback);\r\n\t}\r\n\r\n\treturn store;\r\n};\r\n\r\n/**\r\n * Получить Store компонента\r\n */\r\nexport const useTabsStore = () => useStore(injectionKey);\r\n","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport { genHash } from '@/core/utils/route';\r\nimport { TopPopupListItem } from '@/components/popup/popup';\r\nimport { useTabsStore } from './store';\r\nimport type { PropsMenuItem } from './tabsView';\r\n\r\nconst props = withDefaults(defineProps<PropsMenuItem>(), {\r\n\tscrollable: true,\r\n\tcomponent: undefined,\r\n});\r\n\r\nconst store = useTabsStore();\r\n\r\nconst href = computed(() => {\r\n\t// это внутренняя хеш навигация, ссылка на вкладку\r\n\tif (props.name && store.$id) {\r\n\t\treturn genHash(store.$id, props.name);\r\n\t}\r\n\r\n\treturn props.href;\r\n});\r\n\r\nconst tagName = computed(() => {\r\n\tif (store.showMenuInPopup) {\r\n\t\treturn TopPopupListItem;\r\n\t}\r\n\r\n\treturn href ? 'a' : 'button';\r\n});\r\n\r\n/**\r\n * Клик по элементу меню\r\n */\r\nconst onClick = (e: MouseEvent) => {\r\n\t// это внутренняя хеш навигация, ссылка на вкладку\r\n\tif (!props.href && href.value) {\r\n\t\te.preventDefault();\r\n\t}\r\n\r\n\tif (props.name) {\r\n\t\tstore.activeItemName = props.name;\r\n\t}\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\ttarget=\"_self\"\r\n\t\t:class=\"{\r\n\t\t\t['top-tabsView_menuItem']: !store.showMenuInPopup,\r\n\t\t\t['top-active']: name && store.activeItemName === name,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-spa-disabled']: true,\r\n\t\t}\"\r\n\t\t:href=\"href\"\r\n\t\t:data-top-icon=\"icon || undefined\"\r\n\t\t:disabled=\"disabled || undefined\"\r\n\t\t@click=\"onClick\"\r\n\t>\r\n\t\t<slot v-if=\"store.showMenuInPopup\"></slot>\r\n\r\n\t\t<span\r\n\t\t\tv-else-if=\"$slots.default && !store.isShort\"\r\n\t\t\tclass=\"top-ellipsis\"\r\n\t\t>\r\n\t\t\t<slot></slot>\r\n\t\t</span>\r\n\t</component>\r\n</template>\r\n\r\n<style module>\r\n.top-tabsView_menuItem {\r\n\t--top-icon-color: var(--color-text-2);\r\n\t--top-icon-width: calc(var(--top-icon-size));\r\n\r\n\tcursor: pointer;\r\n\tbox-sizing: border-box;\r\n\r\n\tborder: none;\r\n\tborder-radius: var(--top-radius-2);\r\n\tpadding: var(--top-padding-2);\r\n\tbackground: transparent;\r\n\theight: 40px;\r\n\r\n\tcolor: var(--color-text-1);\r\n\ttext-decoration: none;\r\n\twhite-space: nowrap;\r\n\r\n\tdisplay: flex;\r\n\tgap: var(--top-gap-2);\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n\ttransition: background var(--transition);\r\n}\r\n\r\n.top-tabsView_menuItem:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\r\n\tbackground: var(--color-bg-shading-3);\r\n\ttext-decoration: none;\r\n}\r\n\r\n.top-tabsView_menuItem.top-active {\r\n\tcursor: unset;\r\n\tbackground: var(--color-layout-front-1);\r\n}\r\n\r\n.top-tabsView_menuItem:disabled:not(option):not(optgroup):not(.top-forms-option),\r\n.top-tabsView_menuItem:disabled ~ .top-formsCaption,\r\n.top-tabsView_menuItem.top-disabled[data-top-icon]:before,\r\n.top-tabsView_menuItem.top-disabled[data-top-icon2]:after {\r\n\topacity: unset;\r\n\tfilter: unset;\r\n}\r\n\r\n.top-tabsView_menuItem.top-disabled {\r\n\t--top-icon-color: var(--color-text-4);\r\n\r\n\tcolor: var(--color-text-4);\r\n}\r\n</style>\r\n","// TODO: Эту функцию можно вынести в глобальный utils\r\n\r\nimport { sleepWhile } from '@/core/utils/system';\r\n\r\n/**\r\n * Проверка нахождения компонента в состояние загрузки\r\n * @param component\r\n */\r\nexport const checkComponentIsLoading = (component: any) => {\r\n\treturn component?.name === 'AsyncComponentWrapper' && !component?.__asyncResolved;\r\n};\r\n\r\n/**\r\n * Презагрузить компонент\r\n *\r\n * Некоторое время ожидает загрузку компонента, прежде чем завершит работу\r\n */\r\nexport const preResolveComponent = async (component: any, condition: Function) => {\r\n\tif (component?.name !== 'AsyncComponentWrapper') return;\r\n\tif (component?.__asyncResolved) return;\r\n\r\n\tcomponent.__asyncLoader();\r\n\r\n\tawait sleepWhile(() => {\r\n\t\treturn condition() && checkComponentIsLoading(component);\r\n\t}, 200);\r\n};\r\n","<script setup lang=\"ts\">\r\nimport type { Ref } from 'vue';\r\nimport { markRaw, onMounted, onUnmounted, ref, useSlots, watch } from 'vue';\r\nimport { TopPopup } from '../../popup/popup';\r\nimport { getHash, setHash } from '@/core/utils/route';\r\n\r\nimport type { MenuItem, PropsMenu, PropsMenuItem } from './tabsView';\r\nimport { useTabsStore } from './store';\r\nimport TabsViewMenuItem from './menuItem.vue';\r\nimport { preResolveComponent } from './utils';\r\n\r\ndefineProps<PropsMenu>();\r\n\r\nconst isLoading = defineModel('isLoading');\r\n\r\nconst store = useTabsStore();\r\n\r\nconst slots = useSlots();\r\n\r\n// словарь используется для оптимизации получения нужного menuItem\r\nconst menuItemByName: Map<PropsMenuItem['name'], MenuItem> = new Map();\r\n\r\n// сгенерировать словарь с menuItem, по элементам в slot\r\nconst genMenuItemByName = () => {\r\n\tif (!slots.default) return;\r\n\r\n\tconst component: any = slots.default().find(item => item.key === '_menu');\r\n\tif (!component) return;\r\n\r\n\tcomponent.children.forEach((subComponent: any) => {\r\n\t\tif (subComponent.type.__name !== TabsViewMenuItem.__name) return;\r\n\t\tif (!subComponent.props.name || subComponent.props.disabled) return;\r\n\r\n\t\tconst menuItem: MenuItem = {\r\n\t\t\ttitle: (subComponent.children.default?.()[0].children as string).trim(),\r\n\t\t\ticon: subComponent.props.icon,\r\n\t\t\tcomponent: subComponent.props.component ? markRaw(subComponent.props.component) : TabsViewMenuItem.props.component.default,\r\n\t\t\tscrollable: subComponent.props.scrollable ?? TabsViewMenuItem.props.scrollable.default,\r\n\t\t};\r\n\r\n\t\tmenuItemByName.set(subComponent.props.name, menuItem);\r\n\t});\r\n};\r\n\r\n/**\r\n * activeMenuItem нужен:\r\n * - для вывода текста активной вкладки в меню с popup\r\n * - для вывода компонента активной вкладки (store.component)\r\n * - для установки store.scrollable\r\n */\r\nconst activeMenuItem: Ref<MenuItem | null> = ref(null);\r\n\r\n/**\r\n * Кол-во изменений активной вкладки\r\n */\r\nlet countChanged = 0;\r\n\r\n/**\r\n * Смена активной вкладки\r\n *\r\n * TODO: смена slot, например смена языка, требует повторного выполнения genMenuItemByName()\r\n */\r\nwatch(\r\n\t() => store.activeItemName,\r\n\tasync () => {\r\n\t\tconst numberChanged = ++countChanged; // порядковый номер текущего изменения\r\n\r\n\t\tif (menuItemByName.size === 0) {\r\n\t\t\tgenMenuItemByName();\r\n\t\t}\r\n\r\n\t\tif (menuItemByName.size === 0) {\r\n\t\t\tstore.activeItemName = '';\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tactiveMenuItem.value = menuItemByName.get(store.activeItemName) ?? null;\r\n\r\n\t\t// элемент не найден, установить из хеша страницы\r\n\t\tif (!activeMenuItem.value && store.$id) {\r\n\t\t\tconst activeItemName = getHash(store.$id);\r\n\r\n\t\t\tactiveMenuItem.value = menuItemByName.get(activeItemName) ?? null;\r\n\r\n\t\t\tif (activeMenuItem.value) {\r\n\t\t\t\tstore.activeItemName = activeItemName;\r\n\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// элемент не найден, установить первый доступный\r\n\t\tif (!activeMenuItem.value) {\r\n\t\t\tstore.activeItemName = menuItemByName.keys().next().value;\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// запрошена смена на уже активный элемент\r\n\t\tif (activeMenuItem.value.component === store.component) {\r\n\t\t\tisLoading.value = false;\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (store.$id) setHash(store.$id, store.activeItemName, false);\r\n\r\n\t\t// флаг загрузки будет сброшен при инициализации компонента\r\n\t\tisLoading.value = true;\r\n\r\n\t\t/**\r\n\t\t * Презагрузить компонент\r\n\t\t *\r\n\t\t * Нужно для того, чтобы минимизировать скачки интерфейса при ожидании загрузки асинхронного компонента\r\n\t\t */\r\n\t\tawait preResolveComponent(activeMenuItem.value.component, () => numberChanged === countChanged);\r\n\r\n\t\t// влкадка была сменена еще раз во время sleepWhile\r\n\t\tif (numberChanged !== countChanged) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tstore.scrollable = activeMenuItem.value.scrollable;\r\n\t\tstore.component = activeMenuItem.value.component;\r\n\r\n\t\tif (activeMenuItem.value && !store.component) {\r\n\t\t\tconsole.warn(`Компонент вкладки ${store.activeItemName} не найден. Добавьте props.component для пункта меню ${store.activeItemName}.`);\r\n\t\t}\r\n\t},\r\n\t{ immediate: true },\r\n);\r\n\r\nconst elRef = ref();\r\nlet resizeObserver: ResizeObserver;\r\n\r\nonMounted(() => {\r\n\tresizeObserver = new ResizeObserver(() => {\r\n\t\telRef.value.parentElement.style.setProperty('--top-tabsView-contents-offset-top', elRef.value.offsetHeight + 'px');\r\n\t});\r\n\r\n\tresizeObserver.observe(elRef.value);\r\n});\r\n\r\nonUnmounted(() => {\r\n\tresizeObserver.disconnect();\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tref=\"elRef\"\r\n\t\t:class=\"{\r\n\t\t\t'top-tabsView_menu': true,\r\n\t\t\t'top-tabsView_menu-inPopup_0': !store.showMenuInPopup,\r\n\t\t\t'top-tabsView_menu-inPopup_1': store.showMenuInPopup,\r\n\t\t\t'top-tabsView_menu-short': store.isShort && !store.showMenuInPopup,\r\n\t\t}\"\r\n\t>\r\n\t\t<!-- Спрятать меню под кнопку в popup -->\r\n\t\t<TopPopup v-if=\"store.showMenuInPopup\">\r\n\t\t\t<template #opener>\r\n\t\t\t\t<div class=\"top-tabsView_menuOpener\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tv-if=\"activeMenuItem\"\r\n\t\t\t\t\t\tclass=\"top-tabsView_menuOpenerActiveItem\"\r\n\t\t\t\t\t\t:data-top-icon=\"activeMenuItem.icon\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span class=\"top-ellipsis\">\r\n\t\t\t\t\t\t\t{{ activeMenuItem.title }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div class=\"top-tabsView_menuOpenerIcon\" data-top-icon=\"\"></div>\r\n\t\t\t\t</div>\r\n\t\t\t</template>\r\n\r\n\t\t\t<template #contentList>\r\n\t\t\t\t<slot></slot>\r\n\t\t\t</template>\r\n\t\t</TopPopup>\r\n\r\n\t\t<!-- Отобразить меню на странице -->\r\n\t\t<template v-else>\r\n\t\t\t<div class=\"top-tabsView_menuList\">\r\n\t\t\t\t<slot></slot>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div\r\n\t\t\t\tv-if=\"isShortable\"\r\n\t\t\t\tclass=\"top-tabsView_menuFooter\"\r\n\t\t\t>\r\n\t\t\t\t<TabsViewMenuItem\r\n\t\t\t\t\tv-if=\"isShortable\"\r\n\t\t\t\t\t:icon=\"store.isShort ? '' : ''\"\r\n\t\t\t\t\t@click=\"store.isShort = !store.isShort\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ store.isShort ? '' : 'Свернуть' }} <!--TODO: translate-->\r\n\t\t\t\t</TabsViewMenuItem>\r\n\t\t\t</div>\r\n\t\t</template>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n/* режим отображение табов в основной области документа */\r\n.top-tabsView-pageMod .top-tabsView_menu {\r\n\tbox-sizing: border-box;\r\n\tposition: sticky;\r\n\ttop: var(--top-tabsView-top);\r\n\tz-index: 10;\r\n}\r\n\r\n/* режим отображение табов в основной области документа без popup */\r\n.top-tabsView-pageMod .top-tabsView_menu-inPopup_0 {\r\n\theight: calc(var(--100vh) - var(--top-tabsView-top));\r\n}\r\n\r\n/* стантартный режим */\r\n.top-tabsView_menu-inPopup_0 {\r\n\tbox-sizing: border-box;\r\n\twidth: var(--top-tabsView-menu-width);\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: space-between;\r\n}\r\n\r\n/* режим вывода в popup */\r\n.top-tabsView_menu-inPopup_1 {\r\n\tborder-bottom: 1px solid var(--color-line-2-opacity);\r\n}\r\n\r\n.top-tabsView_menu-short {\r\n\twidth: auto;\r\n}\r\n\r\n.top-tabsView_menu > .top-tabsView_menuOpener {\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n}\r\n\r\n.top-tabsView_menu > .top-tabsView_menuOpener:hover {\r\n\tbackground: var(--color-layer-1);\r\n}\r\n\r\n.top-tabsView_menuOpenerIcon { display: flex; }\r\n\r\n.top-tabsView_menuOpenerActiveItem {\r\n\t--top-forms-padding: 0px;\r\n\r\n\tbox-sizing: border-box;\r\n\tpadding: var(--top-padding-2);\r\n\tmax-width: calc(100% - var(--top-forms-base-height));\r\n\twhite-space: nowrap;\r\n\tflex-grow: 1;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: var(--top-padding-2);\r\n}\r\n\r\n.top-tabsView_menuList,\r\n.top-tabsView_menuFooter {\r\n\tpadding: var(--top-padding-2);\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: var(--top-gap-2);\r\n}\r\n\r\n.top-tabsView_menuList {\r\n\toverflow-y: auto;\r\n}\r\n\r\n.top-tabsView_menu-short .top-tabsView_menuFooter > .top-tabsView_menuItem {\r\n\t--top-icon-width: 100%;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { defineModel, onUnmounted, ref, watch } from 'vue';\r\nimport { delHash } from '@/core/utils/route';\r\nimport type { Props } from './tabsView';\r\nimport { defineTabsStore } from './store';\r\nimport TabsViewMenu from './menu.vue';\r\nimport TopLoadbar from '@/components/forms/loadbar/loadbar.vue';\r\nimport { checkComponentIsLoading } from './utils';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tshowMenuInPopup: undefined,\r\n\tisShortable: false,\r\n});\r\n\r\nconst model = defineModel<string>();\r\n\r\nconst store = defineTabsStore(props, model);\r\n\r\n/**\r\n * Установка или снятие глобального модификатора\r\n * @see props.pageMod\r\n */\r\nconst setDocumentPageModModificator = (pageMod: boolean) => {\r\n\tdocument.documentElement.classList.toggle('top-hasTabsViewPageMod', pageMod);\r\n};\r\n\r\nif (props.pageMod) setDocumentPageModModificator(true);\r\n\r\nonUnmounted(() => {\r\n\tif (props.pageMod) setDocumentPageModModificator(false);\r\n\r\n\tif (store.$id) delHash(store.$id, store.activeItemName, true);\r\n});\r\n\r\nconst componentRef = ref();\r\nconst isLoading = ref(false);\r\n\r\nwatch([componentRef, () => store.component], () => {\r\n\tisLoading.value = checkComponentIsLoading(store.component);\r\n}, { immediate: true });\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t'top-tabsView': true,\r\n\t\t\t'top-tabsView-pageMod': props.pageMod,\r\n\t\t\t'top-tabsView-inPopup': store.showMenuInPopup,\r\n\t\t}\"\r\n\t>\r\n\t\t<TabsViewMenu\r\n\t\t\t:isShortable=\"isShortable\"\r\n\t\t\tv-model:isLoading=\"isLoading\"\r\n\t\t>\r\n\t\t\t<!-- @slot Меню, ожидает передачу компонентов TabsViewMenuItem и TabsViewMenuTitle -->\r\n\t\t\t<slot name=\"menu\"></slot>\r\n\t\t</TabsViewMenu>\r\n\r\n\t\t<div\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-tabsView_contents': true,\r\n\t\t\t\t'top-tabsView_contents-isLoading': isLoading,\r\n\t\t\t\t'top-tabsView_contents-noScrollable': !store.scrollable,\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<TopLoadbar v-if=\"isLoading\"/>\r\n\r\n\t\t\t<keep-alive>\r\n\t\t\t\t<component\r\n\t\t\t\t\tref=\"componentRef\"\r\n\t\t\t\t\t:is=\"store.component\"\r\n\t\t\t\t/>\r\n\t\t\t</keep-alive>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n:root {\r\n\t--top-tabsView-top: 0px;\r\n\t--top-tabsView-menu-width: 220px;\r\n\t--top-tabsView-contents-offset-top: 0px;\r\n}\r\n\r\n.top-tabsView {\r\n\tbackground: var(--color-layout-middle);\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n}\r\n\r\n.top-tabsView_contents {\r\n\tborder-radius: var(--top-radius-4);\r\n\tbackground: var(--color-layout-front-1);\r\n\tpadding: var(--top-padding-4);\r\n\tflex-grow: 1;\r\n\toverflow: auto;\r\n\tposition: relative;\r\n}\r\n\r\n.top-tabsView_contents-isLoading {\r\n\tpointer-events: none;\r\n}\r\n\r\n.top-tabsView_contents-noScrollable {\r\n\twidth: calc(100% - var(--top-tabsView-menu-width));\r\n\tpadding: 0;\r\n\toverflow: visible;\r\n}\r\n\r\n/* top-tabsView-inPopup */\r\n.top-tabsView-inPopup {\r\n\tbackground: var(--color-layout-front-1);\r\n\tflex-direction: column;\r\n}\r\n\r\n.top-tabsView-inPopup > .top-tabsView_contents {\r\n\tborder-radius: 0;\r\n}\r\n\r\n.top-tabsView-inPopup > .top-tabsView_contents-noScrollable {\r\n\twidth: auto;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div class=\"top-tabsView_menuDelimeter\"></div>\r\n</template>\r\n\r\n<style module>\r\n.top-tabsView_menuDelimeter {\r\n\tpadding: var(--top-padding-1) 0;\r\n\tdisplay: flex;\r\n}\r\n\r\n.top-tabsView_menuDelimeter:before {\r\n\tcontent: \"\";\r\n\theight: 2px;\r\n\tbackground: var(--color-line-2);\r\n\tflex-grow: 1;\r\n}\r\n\r\n.top-tabsView_menuDelimeter:first-child,\r\n.top-tabsView_menuDelimeter + .top-tabsView_menuDelimeter {\r\n\tdisplay: none;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { useTabsStore } from './store';\r\nimport type { PropsMenuTitle } from './tabsView';\r\nimport TabsViewMenuDelimeter from './menuDelimeter.vue';\r\nimport { TopPopupListItem } from '../../popup/popup';\r\n\r\ndefineProps<PropsMenuTitle>();\r\n\r\nconst store = useTabsStore();\r\n</script>\r\n\r\n<template>\r\n\t<TopPopupListItem\r\n\t\tv-if=\"store.showMenuInPopup\"\r\n\t\ttype=\"title\"\r\n\t>\r\n\t\t<slot></slot>\r\n\t</TopPopupListItem>\r\n\r\n\t<TabsViewMenuDelimeter v-else-if=\"store.isShort\"/>\r\n\r\n\t<div\r\n\t\tv-else\r\n\t\t:class=\"{\r\n\t\t\t'top-tabsView_menuTitle': true,\r\n\t\t\t'top-tabsView_menuTitle-subtitle': isSubtitle,\r\n\t\t}\"\r\n\t>\r\n\t\t<slot></slot>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-tabsView_menuTitle {\r\n\tpadding: var(--top-padding-4) var(--top-padding-2) var(--top-padding-1);\r\n\tfont-weight: 600;\r\n\tcolor: var(--color-text-1);\r\n}\r\n\r\n.top-tabsView_menuTitle-subtitle {\r\n\tpadding-top: var(--top-padding-1);\r\n\tfont-size: 12px;\r\n\tfont-weight: 400;\r\n\tcolor: var(--color-text-2);\r\n}\r\n</style>\r\n","import type { ComponentCustomProps } from 'vue';\r\n\r\nimport TabsView from './tabsView/tabsView.vue';\r\nimport TabsViewMenuItem from './tabsView/menuItem.vue';\r\nimport TabsViewMenuTitle from './tabsView/menuTitle.vue';\r\n\r\nexport const TopTabsView = TabsView as typeof TabsView & ComponentCustomProps;\r\nexport const TopTabsViewMenuItem = TabsViewMenuItem as typeof TabsViewMenuItem & ComponentCustomProps;\r\nexport const TopTabsViewMenuTitle = TabsViewMenuTitle as typeof TabsViewMenuTitle & ComponentCustomProps;\r\n"],"names":["genStorageKey","stateName","stateKey","loadLocalStorge","store","localStorageKey","localStorageValue","addSaverLocalStorge","watch","StoreLocalStorage","popstateCallbacks","e","popstateCallback","injectionKey","defineTabsStore","props","model","defineStore","showMenuInPopup","computed","Core","pageMod","isShort","ref","component","scrollable","getHash","useTabsStore","useStore","__props","href","genHash","tagName","TopPopupListItem","onClick","checkComponentIsLoading","preResolveComponent","condition","sleepWhile","isLoading","useModel","slots","useSlots","menuItemByName","genMenuItemByName","item","subComponent","TabsViewMenuItem","menuItem","_b","_a","markRaw","activeMenuItem","countChanged","numberChanged","activeItemName","setHash","elRef","resizeObserver","onMounted","onUnmounted","setDocumentPageModModificator","delHash","componentRef","_sfc_render","_ctx","_cache","TopTabsView","TabsView","TopTabsViewMenuItem","TopTabsViewMenuTitle","TabsViewMenuTitle"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dark-positions.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dark-positions.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dark.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dark.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"light-positions.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"light-positions.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"light.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"light.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|