@topvisor/ui 1.0.1-colors-6 → 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-4RuNRybD.es.js → datepicker-CWual081.es.js} +2 -2
- package/.chunks/{datepicker-4RuNRybD.es.js.map → datepicker-CWual081.es.js.map} +1 -1
- package/.chunks/{datepicker-C3wu_PG5.amd.js → datepicker-bFjXj_3j.amd.js} +2 -2
- package/.chunks/{datepicker-C3wu_PG5.amd.js.map → datepicker-bFjXj_3j.amd.js.map} +1 -1
- 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/{listItem.vue_vue_type_script_setup_true_lang-COocGSB0.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-COocGSB0.es.js.map → listItem.vue_vue_type_script_setup_true_lang-CNRoF_6f.es.js.map} +1 -1
- package/.chunks/{listItem.vue_vue_type_script_setup_true_lang-C1sXQtkO.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-C1sXQtkO.amd.js.map → listItem.vue_vue_type_script_setup_true_lang-DbaCM0v_.amd.js.map} +1 -1
- package/.chunks/{menu-nSnO6cQU.es.js → menu-ByHMHZAv.es.js} +2 -2
- package/.chunks/{menu-nSnO6cQU.es.js.map → menu-ByHMHZAv.es.js.map} +1 -1
- package/.chunks/{menu-B9yZumi2.amd.js → menu-C_PVuMIc.amd.js} +2 -2
- package/.chunks/{menu-B9yZumi2.amd.js.map → menu-C_PVuMIc.amd.js.map} +1 -1
- package/.chunks/{popup-B5ioftXA.es.js → popup-9IIJ1BzB.es.js} +2 -2
- package/.chunks/{popup-B5ioftXA.es.js.map → popup-9IIJ1BzB.es.js.map} +1 -1
- package/.chunks/{popup-MFiUttQQ.amd.js → popup-CUkj5veJ.amd.js} +2 -2
- package/.chunks/{popup-MFiUttQQ.amd.js.map → popup-CUkj5veJ.amd.js.map} +1 -1
- package/assets/themes/dark.css +1 -1
- package/assets/themes/light.css +1 -1
- 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/formsExt/formsExt.amd.js +1 -1
- package/formsExt/formsExt.amd.js.map +1 -1
- package/formsExt/formsExt.js +15 -16
- package/formsExt/formsExt.js.map +1 -1
- package/package.json +1 -1
- package/popup/popup.amd.js +1 -1
- package/popup/popup.js +18 -18
- package/popup/worker.amd.js +1 -1
- package/popup/worker.js +2 -2
- package/project/project.amd.js +1 -1
- package/project/project.js +3 -3
- package/tabs/tabs.amd.js +1 -1
- package/tabs/tabs.js +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/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/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/price.amd.js +1 -1
- package/utils/price.js +1 -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-Ba0z_w3d.amd.js +0 -3
- package/.chunks/forms-Ba0z_w3d.amd.js.map +0 -1
- package/.chunks/forms-DFdkeBCT.es.js +0 -1161
- package/.chunks/forms-DFdkeBCT.es.js.map +0 -1
package/popup/popup.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import k from "../core/core.js";
|
|
2
|
-
import { P as v, a as I, _ as M } from "../.chunks/listItem.vue_vue_type_script_setup_true_lang-
|
|
2
|
+
import { P as v, a as I, _ as M } from "../.chunks/listItem.vue_vue_type_script_setup_true_lang-CNRoF_6f.es.js";
|
|
3
3
|
import { defineComponent as y, mergeModels as O, useModel as D, openBlock as b, createBlock as B, mergeProps as V, createSlots as S, withCtx as o, renderSlot as l, createVNode as c, createTextVNode as $, toDisplayString as T, ref as P, watch as w } from "vue";
|
|
4
|
-
import {
|
|
4
|
+
import { r as H, _ as N, T as C } from "../.chunks/forms-uLDC7Bui.es.js";
|
|
5
5
|
const W = ["../assets/popup.css"].map((i) => import.meta.resolve(i));
|
|
6
6
|
k.insertCSSLinkToPage(W, !0);
|
|
7
7
|
const h = /* @__PURE__ */ y({
|
|
@@ -28,11 +28,11 @@ const h = /* @__PURE__ */ y({
|
|
|
28
28
|
}),
|
|
29
29
|
emits: ["update:modelValue"],
|
|
30
30
|
setup(i) {
|
|
31
|
-
const
|
|
31
|
+
const u = D(i, "modelValue");
|
|
32
32
|
return (p, e) => (b(), B(H, V(p.$props, {
|
|
33
33
|
modificator: "popupWidgetInput",
|
|
34
|
-
modelValue:
|
|
35
|
-
"onUpdate:modelValue": e[0] || (e[0] = (t) =>
|
|
34
|
+
modelValue: u.value,
|
|
35
|
+
"onUpdate:modelValue": e[0] || (e[0] = (t) => u.value = t)
|
|
36
36
|
}), null, 16, ["modelValue"]));
|
|
37
37
|
}
|
|
38
38
|
}), A = {
|
|
@@ -40,7 +40,7 @@ const h = /* @__PURE__ */ y({
|
|
|
40
40
|
"top-input_input-popupWidgetInput": "top-input_input-popupWidgetInput"
|
|
41
41
|
}, U = {
|
|
42
42
|
$style: A
|
|
43
|
-
}, L = /* @__PURE__ */ N(h, [["__cssModules", U]]),
|
|
43
|
+
}, L = /* @__PURE__ */ N(h, [["__cssModules", U]]), z = /* @__PURE__ */ y({
|
|
44
44
|
__name: "alert",
|
|
45
45
|
props: {
|
|
46
46
|
submitText: {},
|
|
@@ -91,7 +91,7 @@ const h = /* @__PURE__ */ y({
|
|
|
91
91
|
} : void 0
|
|
92
92
|
]), 1040));
|
|
93
93
|
}
|
|
94
|
-
}),
|
|
94
|
+
}), E = /* @__PURE__ */ y({
|
|
95
95
|
__name: "confirm",
|
|
96
96
|
props: {
|
|
97
97
|
cancelText: {},
|
|
@@ -107,8 +107,8 @@ const h = /* @__PURE__ */ y({
|
|
|
107
107
|
posBy: {}
|
|
108
108
|
},
|
|
109
109
|
emits: ["open", "close", "scrollContentList", "submit"],
|
|
110
|
-
setup(i, { emit:
|
|
111
|
-
const p = i, e =
|
|
110
|
+
setup(i, { emit: u }) {
|
|
111
|
+
const p = i, e = u, t = P(!1), a = () => {
|
|
112
112
|
t.value = !0, e("submit");
|
|
113
113
|
}, m = () => {
|
|
114
114
|
if (t.value) {
|
|
@@ -117,10 +117,10 @@ const h = /* @__PURE__ */ y({
|
|
|
117
117
|
}
|
|
118
118
|
e("close");
|
|
119
119
|
}, d = { ...p, submitText: void 0, cancelText: void 0, isWarning: void 0 };
|
|
120
|
-
return delete d.submitText, delete d.cancelText, delete d.isWarning, (n,
|
|
121
|
-
onOpen:
|
|
120
|
+
return delete d.submitText, delete d.cancelText, delete d.isWarning, (n, r) => (b(), B(v, V({ class: "top-popupConfirm" }, d, {
|
|
121
|
+
onOpen: r[0] || (r[0] = () => n.$emit("open")),
|
|
122
122
|
onClose: m,
|
|
123
|
-
onScrollContentList:
|
|
123
|
+
onScrollContentList: r[1] || (r[1] = (...s) => n.$emit("scrollContentList", ...s))
|
|
124
124
|
}), S({
|
|
125
125
|
opener: o(() => [
|
|
126
126
|
l(n.$slots, "opener")
|
|
@@ -161,7 +161,7 @@ const h = /* @__PURE__ */ y({
|
|
|
161
161
|
} : void 0
|
|
162
162
|
]), 1040));
|
|
163
163
|
}
|
|
164
|
-
}),
|
|
164
|
+
}), K = /* @__PURE__ */ y({
|
|
165
165
|
__name: "prompt",
|
|
166
166
|
props: {
|
|
167
167
|
submitText: {},
|
|
@@ -177,8 +177,8 @@ const h = /* @__PURE__ */ y({
|
|
|
177
177
|
posBy: {}
|
|
178
178
|
},
|
|
179
179
|
emits: ["open", "close", "scrollContentList", "submit"],
|
|
180
|
-
setup(i, { emit:
|
|
181
|
-
const p = i, e =
|
|
180
|
+
setup(i, { emit: u }) {
|
|
181
|
+
const p = i, e = u, t = () => m.value = p.defaultValue ?? "", a = P(!1), m = P();
|
|
182
182
|
w(() => p.defaultValue, () => t(), { immediate: !0 });
|
|
183
183
|
const d = () => {
|
|
184
184
|
a.value = !0;
|
|
@@ -188,8 +188,8 @@ const h = /* @__PURE__ */ y({
|
|
|
188
188
|
return;
|
|
189
189
|
}
|
|
190
190
|
t(), e("close");
|
|
191
|
-
},
|
|
192
|
-
return delete
|
|
191
|
+
}, r = { ...p, submitText: void 0, cancelText: void 0, defaultValue: void 0 };
|
|
192
|
+
return delete r.submitText, delete r.cancelText, delete r.defaultValue, (s, f) => (b(), B(v, V({ class: "top-popupPrompt" }, r, {
|
|
193
193
|
onOpen: f[1] || (f[1] = () => s.$emit("open")),
|
|
194
194
|
onClose: n,
|
|
195
195
|
onScrollContentList: f[2] || (f[2] = (...g) => s.$emit("scrollContentList", ...g))
|
|
@@ -235,7 +235,7 @@ const h = /* @__PURE__ */ y({
|
|
|
235
235
|
} : void 0
|
|
236
236
|
]), 1040));
|
|
237
237
|
}
|
|
238
|
-
}), J = v, Q = I, R = M, X = L, Y =
|
|
238
|
+
}), J = v, Q = I, R = M, X = L, Y = z, Z = E, x = K;
|
|
239
239
|
export {
|
|
240
240
|
J as TopPopup,
|
|
241
241
|
Y as TopPopupAlert,
|
package/popup/worker.amd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(["require","exports","../.chunks/forms-
|
|
1
|
+
define(["require","exports","../.chunks/forms-856ctwwh.amd","../utils/dom.amd","../utils/scroll.amd"],function(require,exports,forms,utils_dom,utils_scroll){"use strict";if(typeof vue>"u")var vue=window.Vue;class Worker{static noClose=!1;static vueConnectors=new Map;static options={};static getPopup(t){return utils_dom.default.storage(t,"TopPopup")}static getAll(){return utils_dom.default.querySelectorAllArray(document,".top-popup-wrapper")}static getAllVisible(){return utils_dom.default.querySelectorAllVisible(document,".top-popup-wrapper")}static async openByOpener(t){if(!(t instanceof HTMLElement))return;const o={};return o.popup=t.dataset.topPopup,o.id=t.dataset.topPopupId,t.dataset.topPopupP&&(o.p=parseInt(t.dataset.topPopupP)),t.dataset.topPopupPos&&(o.p=parseInt(t.dataset.topPopupPos)),t.dataset.topPopupNotch&&(o.notch=t.dataset.topPopupNotch==="true"||t.dataset.topPopupNotch==="1"),t.dataset.topPopupClass&&(o.class=t.dataset.topPopupClass),t.dataset.topPopupPosBy&&(o.posBy=t.dataset.topPopupPosBy),t.dataset.topPopupFront&&(o.frontSelector=t.dataset.topPopupFront),t.dataset.topPopupInvertX&&(o.invertX=t.dataset.topPopupInvertX==="true"||t.dataset.topPopupInvertX==="1"),t.dataset.topPopupOpenByHover&&(o.openByHover=t.dataset.topPopupOpenByHover==="true"||t.dataset.topPopupOpenByHover==="1"),t.dataset.topPopupUseOriginal&&(o.useOriginal=t.dataset.topPopupUseOriginal==="true"||t.dataset.topPopupUseOriginal==="1"),await Worker.open(t,o)}static async open(elOpener,options){elOpener instanceof HTMLElement&&(elOpener.dataset.topPopupOpened="opened");const{default:Popup}=await new Promise((t,o)=>require(["../.chunks/popup-CUkj5veJ.amd"],t,o));if(forms.Core.$){const $elOpener=forms.Core.$(elOpener);if($elOpener.data("aftershow")){let afterShow=$elOpener.data("aftershow");typeof afterShow=="string"&&(afterShow=eval(afterShow.replace(/\W/g,""))),$elOpener.one("aftershow.top-menu-popup",afterShow)}if($elOpener.data("afterclose")){let afterclose=$elOpener.data("afterclose");typeof afterclose=="string"&&(afterclose=eval(afterclose.replace(/\W/g,""))),$elOpener.one("afterclose.top-menu-popup",afterclose)}}return options.isFullScreen=forms.Core.state.isMobile,new Popup(elOpener,options)}static close(t){const o=Worker.getPopup(t);o&&o.close()}static recalcPosition(t){const o=Worker.getPopup(t);o&&o.elPopupBody instanceof HTMLElement&&(o.recalcPosition(),utils_scroll.genHasScroll(o.elPopupBody))}static scrollToActive(t){if(!utils_dom.default.querySelectorVisible(t,"ul.top-popup_content > li > .top-active"))return;const s=t.querySelector("ul.top-popup_content"),a=utils_dom.default.querySelectorAllVisible(t,"ul.top-popup_content > li");t.classList.add("top-popup-wrapper-no_animate"),setTimeout(()=>t.classList.remove("top-popup-wrapper-no_animate"),100);let p=100;for(const e of a){if(e.querySelector(":scope > .top-active"))break;e instanceof HTMLElement&&(p+=e.offsetHeight)}if(s instanceof HTMLElement){const e=s.offsetHeight;p>e?s.scrollTop=p-e:s.scrollTop=0}}static decoratorBeforeOpen(t){this.options.decoratorBeforeOpen&&this.options.decoratorBeforeOpen(t)}static decoratorAfterOpen(t){this.options.decoratorAfterOpen&&this.options.decoratorAfterOpen(t)}static decoratorIsIgnoreOuterClick(t){return this.options.decoratorIsIgnoreOuterClick?this.options.decoratorIsIgnoreOuterClick(t):!1}static regVueComponent(t,o){if(Worker.vueConnectors.get(t))throw"Vue component Popup use duplicated id: "+t;Worker.vueConnectors.set(t,o)}static unregVueComponent(t){Worker.vueConnectors.delete(t)}static genElPopupOpener(t,o,...s){const a=utils_dom.default.genEl(t,{},...s);a.dataset.topPopup="#"+o.id;for(let p in o){const e="topPopup"+p.charAt(0).toUpperCase()+p.slice(1);a.dataset[e]=o[p]}return a}}exports.TopPopupWorker=Worker,exports.default=Worker,Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
2
2
|
//# sourceMappingURL=worker.amd.js.map
|
package/popup/worker.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { C as Core } from "../.chunks/forms-
|
|
1
|
+
import { C as Core } from "../.chunks/forms-uLDC7Bui.es.js";
|
|
2
2
|
import DOM from "../utils/dom.js";
|
|
3
3
|
import { genHasScroll } from "../utils/scroll.js";
|
|
4
4
|
class Worker {
|
|
@@ -45,7 +45,7 @@ class Worker {
|
|
|
45
45
|
*/
|
|
46
46
|
static async open(elOpener, options) {
|
|
47
47
|
elOpener instanceof HTMLElement && (elOpener.dataset.topPopupOpened = "opened");
|
|
48
|
-
const { default: Popup } = await import("../.chunks/popup-
|
|
48
|
+
const { default: Popup } = await import("../.chunks/popup-9IIJ1BzB.es.js");
|
|
49
49
|
if (Core.$) {
|
|
50
50
|
const $elOpener = Core.$(elOpener);
|
|
51
51
|
if ($elOpener.data("aftershow")) {
|
package/project/project.amd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(["require","exports","vue","../.chunks/forms-
|
|
1
|
+
define(["require","exports","vue","../.chunks/forms-856ctwwh.amd","../.chunks/listItem.vue_vue_type_script_setup_true_lang-DbaCM0v_.amd","../.chunks/menu-C_PVuMIc.amd","../.chunks/i18n-C_OH9IT3.amd","../require/css.amd!../assets/project.css"],function(B,c,e,s,i,p,m){"use strict";if(typeof e>"u")var e=window.Vue;const d={class:"top-selectorCompetitors"},C={class:"top-ellipsis1"},k=e.defineComponent({__name:"selectorCompetitors",props:e.mergeModels({modelValue:{},items:{},showSelectAllItem:{type:Boolean,default:!0}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(r){const _=r,o=e.useModel(r,"modelValue"),y=e.computed(()=>{if(_.showSelectAllItem)return{icon:"",title:m.useI18n().Common.Select_all,value:"all",content:""}});return(n,a)=>(e.openBlock(),e.createElementBlock("div",d,[e.unref(s.Core).state.isMobile?(e.openBlock(),e.createBlock(i.Popup,{key:0},{opener:e.withCtx(()=>[e.createVNode(s.TopButton,{class:"top-selectorCompetitors_opener",color:"theme",icon:"",icon2:""},{default:e.withCtx(()=>{var t;return[e.createTextVNode(e.toDisplayString((t=n.items.find(u=>{var l;return u.value===((l=o.value)==null?void 0:l[0])}))==null?void 0:t.content),1)]}),_:1})]),contentList:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.items,(t,u)=>{var l;return e.openBlock(),e.createBlock(i._sfc_main,{class:e.normalizeClass({"top-active":(l=o.value)==null?void 0:l.includes(t.value)}),"data-top-icon":t.icon,title:t.title,onClick:()=>o.value=[t.value]},{default:e.withCtx(()=>[e.createElementVNode("span",C,e.toDisplayString(t.content),1)]),_:2},1032,["class","data-top-icon","title","onClick"])}),256))]),_:1})):(e.openBlock(),e.createBlock(p.Menu,{key:1,modelValue:o.value,"onUpdate:modelValue":a[0]||(a[0]=t=>o.value=t),items:n.items,isMultiple:!0,styling:"bar",canBeEmptyMultiple:!1,selectAllItem:y.value},null,8,["modelValue","items","selectAllItem"]))]))}}),f={$style:{"top-selectorCompetitors_opener":"top-selectorCompetitors_opener","top-button":"top-button"}},v=s._export_sfc(k,[["__cssModules",f]]);c.TopSelectorCompetitors=v,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
|
|
2
2
|
//# sourceMappingURL=project.amd.js.map
|
package/project/project.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import f from "../core/core.js";
|
|
2
2
|
import { defineComponent as C, mergeModels as v, useModel as M, computed as S, openBlock as l, createElementBlock as m, unref as V, createBlock as r, withCtx as n, createVNode as k, createTextVNode as y, toDisplayString as p, Fragment as B, renderList as I, normalizeClass as g, createElementVNode as h } from "vue";
|
|
3
|
-
import { C as A, T, _ as b } from "../.chunks/forms-
|
|
4
|
-
import { P as N, _ as w } from "../.chunks/listItem.vue_vue_type_script_setup_true_lang-
|
|
5
|
-
import { M as x } from "../.chunks/menu-
|
|
3
|
+
import { C as A, T, _ as b } from "../.chunks/forms-uLDC7Bui.es.js";
|
|
4
|
+
import { P as N, _ as w } from "../.chunks/listItem.vue_vue_type_script_setup_true_lang-CNRoF_6f.es.js";
|
|
5
|
+
import { M as x } from "../.chunks/menu-ByHMHZAv.es.js";
|
|
6
6
|
import { a as E } from "../.chunks/i18n-DuTvft1T.es.js";
|
|
7
7
|
const _ = ["../assets/project.css"].map((s) => import.meta.resolve(s));
|
|
8
8
|
f.insertCSSLinkToPage(_, !0);
|
package/tabs/tabs.amd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(["require","exports","vue","../.chunks/forms-
|
|
1
|
+
define(["require","exports","vue","../.chunks/forms-856ctwwh.amd","../require/css.amd!../assets/tabs.css"],function(C,s,e,o){"use strict";if(typeof e>"u")var e=window.Vue;const l={class:e.normalizeClass({"top-tabs":!0})},c={key:0,class:"top-tabs_header"},d={class:"top-tabs_contents"},b=e.defineComponent({__name:"tabs",props:{id:{}},setup(a){return(t,n)=>(e.openBlock(),e.createElementBlock("div",l,[e.renderSlot(t.$slots,"buttons"),t.$slots.header?(e.openBlock(),e.createElementBlock("div",c,[e.renderSlot(t.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",d,[e.renderSlot(t.$slots,"contents")])]))}}),p={$style:{"top-tabs":"top-tabs","top-tabs_header":"top-tabs_header","top-tabs_contents":"top-tabs_contents","top-tabs_tabInput":"top-tabs_tabInput","top-tabs_content":"top-tabs_content"}},r=o._export_sfc(b,[["__cssModules",p]]),_=["id","name","value","checked","disabled"],u=["for"],i=e.defineComponent({__name:"tab",props:{tabsId:{},name:{},title:{},active:{type:Boolean},disabled:{type:Boolean}},setup(a){return(t,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("input",{type:"radio",class:"top-tabs_tabInput top-unvisible",id:t.tabsId+t.name,name:t.tabsId,value:t.name,checked:t.active,disabled:t.disabled},null,8,_),e.createElementVNode("label",{class:e.normalizeClass({"top-tabs_tabLabel":!0,"top-forms-focusable":!0,"top-disabled":t.disabled}),for:t.tabsId+t.name},[e.renderSlot(t.$slots,"default")],10,u)],64))}}),m={$style:{"top-tabs_tabLabel":"top-tabs_tabLabel","top-tabs_tabInput":"top-tabs_tabInput"}},f=o._export_sfc(i,[["__cssModules",m]]),$=["data-tabs-name"],T=e.defineComponent({__name:"content",props:{name:{}},setup(a){return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-tabs_content":!0}),"data-tabs-name":t.name},[e.renderSlot(t.$slots,"default")],8,$))}}),h={$style:{"top-tabs_content":"top-tabs_content"}},y=o._export_sfc(T,[["__cssModules",h]]),v=r,k=f,B=y;s.TopTabs=v,s.TopTabsContent=B,s.TopTabsTab=k,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
|
|
2
2
|
//# sourceMappingURL=tabs.amd.js.map
|
package/tabs/tabs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import d from "../core/core.js";
|
|
2
2
|
import { defineComponent as p, openBlock as o, createElementBlock as a, renderSlot as s, createCommentVNode as _, createElementVNode as n, normalizeClass as b, Fragment as i } from "vue";
|
|
3
|
-
import { _ as l } from "../.chunks/forms-
|
|
3
|
+
import { _ as l } from "../.chunks/forms-uLDC7Bui.es.js";
|
|
4
4
|
const r = ["../assets/tabs.css"].map((e) => import.meta.resolve(e));
|
|
5
5
|
d.insertCSSLinkToPage(r, !0);
|
|
6
6
|
const u = {
|
package/tabsView/tabsView.amd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(["require","exports","vue","../utils/route.amd","../.chunks/forms-
|
|
1
|
+
define(["require","exports","vue","../utils/route.amd","../.chunks/forms-856ctwwh.amd","../.chunks/store-esTid5oI.amd","../popup/popup.amd","../utils/system.amd","../require/css.amd!../assets/tabsView.css"],function(se,_,e,m,p,v,w,B){"use strict";if(typeof e>"u")var e=window.Vue;const h=(o,n)=>`top:${String(o)}:${n}`,y={loadLocalStorge:(o,n)=>{if(!n.$id)return;const t=h(o,n.$id);try{const a=JSON.parse(localStorage.getItem(t));typeof a==typeof n[o]&&(n[o]=a)}catch{console.warn(new Error(`В localStorage[${t}] не корректный json`))}},addSaverLocalStorge:(o,n)=>{if(!n.$id)return;const t=h(o,n.$id);e.watch(()=>n[o],()=>{localStorage.setItem(t,JSON.stringify(n[o]))},{immediate:!0})}},g=new Set;addEventListener("popstate",o=>{g.forEach(n=>n(o))});const S=Symbol(),T=(o,n)=>{const t=v.defineStore(S,()=>{const a=e.computed(()=>o.showMenuInPopup??p.Core.state.isMobile),l=e.computed(()=>o.pageMod),u=e.ref(!1),s=e.ref(void 0),r=e.ref(!0);return{showMenuInPopup:a,pageMod:l,isShort:u,activeItemName:n,component:s,scrollable:r}},o.idState);if(o.isShortable){const a="isShort";y.loadLocalStorge(a,t),y.addSaverLocalStorge(a,t)}if(t.$id){const a=l=>{n.value=m.getHash(t.$id)};g.add(a)}return t},V=()=>v.useStore(S),L={key:1,class:"top-ellipsis"},N=e.defineComponent({__name:"menuItem",props:{name:{},href:{},icon:{},disabled:{type:Boolean},component:{default:void 0},scrollable:{type:Boolean,default:!0}},setup(o){const n=o,t=V(),a=e.computed(()=>n.name&&t.$id?m.genHash(t.$id,n.name):n.href),l=e.computed(()=>t.showMenuInPopup?w.TopPopupListItem:a?"a":"button"),u=s=>{!n.href&&a.value&&s.preventDefault(),n.name&&(t.activeItemName=n.name)};return(s,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value),{target:"_self",class:e.normalizeClass({"top-tabsView_menuItem":!e.unref(t).showMenuInPopup,"top-active":s.name&&e.unref(t).activeItemName===s.name,"top-disabled":s.disabled,"top-spa-disabled":!0}),href:a.value,"data-top-icon":s.icon||void 0,disabled:s.disabled||void 0,onClick:u},{default:e.withCtx(()=>[e.unref(t).showMenuInPopup?e.renderSlot(s.$slots,"default",{key:0}):s.$slots.default&&!e.unref(t).isShort?(e.openBlock(),e.createElementBlock("span",L,[e.renderSlot(s.$slots,"default")])):e.createCommentVNode("",!0)]),_:3},8,["class","href","data-top-icon","disabled"]))}}),P={$style:{"top-tabsView_menuItem":"top-tabsView_menuItem","top-active":"top-active","top-forms-option":"top-forms-option","top-formsCaption":"top-formsCaption","top-disabled":"top-disabled"}},f=p._export_sfc(N,[["__cssModules",P]]),k=o=>(o==null?void 0:o.name)==="AsyncComponentWrapper"&&!(o!=null&&o.__asyncResolved),C=async(o,n)=>{(o==null?void 0:o.name)==="AsyncComponentWrapper"&&(o!=null&&o.__asyncResolved||(o.__asyncLoader(),await B.sleepWhile(()=>n()&&k(o),200)))},E={class:"top-tabsView_menuOpener"},O=["data-top-icon"],D={class:"top-ellipsis"},z=e.createElementVNode("div",{class:"top-tabsView_menuOpenerIcon","data-top-icon":""},null,-1),R={class:"top-tabsView_menuList"},A={key:0,class:"top-tabsView_menuFooter"},H=e.defineComponent({__name:"menu",props:e.mergeModels({isShortable:{type:Boolean},isLoading:{type:Boolean}},{isLoading:{},isLoadingModifiers:{}}),emits:["update:isLoading"],setup(o){const n=e.useModel(o,"isLoading"),t=V(),a=e.useSlots(),l=new Map,u=()=>{if(!a.default)return;const c=a.default().find(i=>i.key==="_menu");c&&c.children.forEach(i=>{var $,I;if(i.type.__name!==f.__name||!i.props.name||i.props.disabled)return;const M={title:((I=($=i.children).default)==null?void 0:I.call($)[0].children).trim(),icon:i.props.icon,component:i.props.component?e.markRaw(i.props.component):f.props.component.default,scrollable:i.props.scrollable??f.props.scrollable.default};l.set(i.props.name,M)})},s=e.ref(null);let r=0;e.watch(()=>t.activeItemName,async()=>{const c=++r;if(l.size===0&&u(),l.size===0){t.activeItemName="";return}if(s.value=l.get(t.activeItemName)??null,!s.value&&t.$id){const i=m.getHash(t.$id);if(s.value=l.get(i)??null,s.value){t.activeItemName=i;return}}if(!s.value){t.activeItemName=l.keys().next().value;return}if(s.value.component===t.component){n.value=!1;return}t.$id&&m.setHash(t.$id,t.activeItemName,!1),n.value=!0,await C(s.value.component,()=>c===r),c===r&&(t.scrollable=s.value.scrollable,t.component=s.value.component,s.value&&!t.component&&console.warn(`Компонент вкладки ${t.activeItemName} не найден. Добавьте props.component для пункта меню ${t.activeItemName}.`))},{immediate:!0});const d=e.ref();let b;return e.onMounted(()=>{b=new ResizeObserver(()=>{d.value.parentElement.style.setProperty("--top-tabsView-contents-offset-top",d.value.offsetHeight+"px")}),b.observe(d.value)}),e.onUnmounted(()=>{b.disconnect()}),(c,i)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"elRef",ref:d,class:e.normalizeClass({"top-tabsView_menu":!0,"top-tabsView_menu-inPopup_0":!e.unref(t).showMenuInPopup,"top-tabsView_menu-inPopup_1":e.unref(t).showMenuInPopup,"top-tabsView_menu-short":e.unref(t).isShort&&!e.unref(t).showMenuInPopup})},[e.unref(t).showMenuInPopup?(e.openBlock(),e.createBlock(e.unref(w.TopPopup),{key:0},{opener:e.withCtx(()=>[e.createElementVNode("div",E,[s.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"top-tabsView_menuOpenerActiveItem","data-top-icon":s.value.icon},[e.createElementVNode("span",D,e.toDisplayString(s.value.title),1)],8,O)):e.createCommentVNode("",!0),z])]),contentList:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",R,[e.renderSlot(c.$slots,"default")]),c.isShortable?(e.openBlock(),e.createElementBlock("div",A,[c.isShortable?(e.openBlock(),e.createBlock(f,{key:0,icon:e.unref(t).isShort?"":"",onClick:i[0]||(i[0]=M=>e.unref(t).isShort=!e.unref(t).isShort)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(t).isShort?"":"Свернуть"),1)]),_:1},8,["icon"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],64))],2))}}),K={$style:{"top-tabsView-pageMod":"top-tabsView-pageMod","top-tabsView_menu":"top-tabsView_menu","top-tabsView_menu-inPopup_0":"top-tabsView_menu-inPopup_0","top-tabsView_menu-inPopup_1":"top-tabsView_menu-inPopup_1","top-tabsView_menu-short":"top-tabsView_menu-short","top-tabsView_menuOpener":"top-tabsView_menuOpener","top-tabsView_menuOpenerIcon":"top-tabsView_menuOpenerIcon","top-tabsView_menuOpenerActiveItem":"top-tabsView_menuOpenerActiveItem","top-tabsView_menuList":"top-tabsView_menuList","top-tabsView_menuFooter":"top-tabsView_menuFooter","top-tabsView_menuItem":"top-tabsView_menuItem"}},F=p._export_sfc(H,[["__cssModules",K]]),j=e.defineComponent({__name:"tabsView",props:e.mergeModels({modelValue:{},pageMod:{type:Boolean},showMenuInPopup:{type:Boolean,default:void 0},isShortable:{type:Boolean,default:!1},idState:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(o){const n=o,t=e.useModel(o,"modelValue"),a=T(n,t),l=r=>{document.documentElement.classList.toggle("top-hasTabsViewPageMod",r)};n.pageMod&&l(!0),e.onUnmounted(()=>{n.pageMod&&l(!1),a.$id&&m.delHash(a.$id,a.activeItemName,!0)});const u=e.ref(),s=e.ref(!1);return e.watch([u,()=>a.component],()=>{s.value=k(a.component)},{immediate:!0}),(r,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-tabsView":!0,"top-tabsView-pageMod":n.pageMod,"top-tabsView-inPopup":e.unref(a).showMenuInPopup})},[e.createVNode(F,{isShortable:r.isShortable,isLoading:s.value,"onUpdate:isLoading":d[0]||(d[0]=b=>s.value=b)},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"menu")]),_:3},8,["isShortable","isLoading"]),e.createElementVNode("div",{class:e.normalizeClass({"top-tabsView_contents":!0,"top-tabsView_contents-isLoading":s.value,"top-tabsView_contents-noScrollable":!e.unref(a).scrollable})},[s.value?(e.openBlock(),e.createBlock(p.TopLoadbar$1,{key:0})):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.KeepAlive,null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a).component),{ref_key:"componentRef",ref:u},null,512))],1024))],2)],2))}}),q={$style:{"top-tabsView":"top-tabsView","top-tabsView_contents":"top-tabsView_contents","top-tabsView_contents-isLoading":"top-tabsView_contents-isLoading","top-tabsView_contents-noScrollable":"top-tabsView_contents-noScrollable","top-tabsView-inPopup":"top-tabsView-inPopup"}},U=p._export_sfc(j,[["__cssModules",q]]),W={"top-tabsView_menuDelimeter":"top-tabsView_menuDelimeter"},J={},x={class:"top-tabsView_menuDelimeter"};function G(o,n){return e.openBlock(),e.createElementBlock("div",x)}const Q={$style:W},X=p._export_sfc(J,[["render",G],["__cssModules",Q]]),Y=e.defineComponent({__name:"menuTitle",props:{isSubtitle:{type:Boolean}},setup(o){const n=V();return(t,a)=>e.unref(n).showMenuInPopup?(e.openBlock(),e.createBlock(e.unref(w.TopPopupListItem),{key:0,type:"title"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3})):e.unref(n).isShort?(e.openBlock(),e.createBlock(X,{key:1})):(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass({"top-tabsView_menuTitle":!0,"top-tabsView_menuTitle-subtitle":t.isSubtitle})},[e.renderSlot(t.$slots,"default")],2))}}),Z={$style:{"top-tabsView_menuTitle":"top-tabsView_menuTitle","top-tabsView_menuTitle-subtitle":"top-tabsView_menuTitle-subtitle"}},ee=p._export_sfc(Y,[["__cssModules",Z]]),te=U,oe=f,ne=ee;_.TopTabsView=te,_.TopTabsViewMenuItem=oe,_.TopTabsViewMenuTitle=ne,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})});
|
|
2
2
|
//# sourceMappingURL=tabsView.amd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabsView.amd.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 { ModelRef, InjectionKey } from 'vue';\r\nimport { ref, computed } 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\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\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 { PropsMenu, PropsMenuItem, MenuItem } 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, true);\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","StoreLocalStorage","store","localStorageValue","localStorageKey","injectionKey","defineTabsStore","props","model","store$1","showMenuInPopup","vue","forms","isShort","scrollable","pageMod","component","useTabsStore","__props","href","tagName","onClick","e","checkComponentIsLoading","preResolveComponent","condition","slots","menuItemByName","item","subComponent","_b","_a","TabsViewMenuItem","menuItem","activeMenuItem","countChanged","numberChanged","activeItemName","isLoading","utils_route","elRef","resizeObserver","setDocumentPageModModificator","componentRef","_sfc_render","_ctx","_cache","TopTabsView","TabsView","TopTabsViewMenuItem","TopTabsViewMenuTitle","TabsViewMenuTitle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabsView.amd.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","StoreLocalStorage","store","localStorageValue","localStorageKey","popstateCallbacks","e","popstateCallback","injectionKey","defineTabsStore","props","model","store$1","showMenuInPopup","vue","forms","isShort","scrollable","pageMod","component","useTabsStore","__props","href","tagName","onClick","checkComponentIsLoading","preResolveComponent","condition","slots","menuItemByName","item","subComponent","_b","_a","TabsViewMenuItem","menuItem","activeMenuItem","countChanged","numberChanged","activeItemName","isLoading","utils_route","elRef","resizeObserver","setDocumentPageModModificator","componentRef","_sfc_render","_ctx","_cache","TopTabsView","TabsView","TopTabsViewMenuItem","TopTabsViewMenuTitle","TabsViewMenuTitle"],"mappings":"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"}
|