@topvisor/ui 0.9.2 → 0.9.3

package/tabs/tabs.js

@@ -1,41 +1,40 @@
-import { defineComponent as l, openBlock as o, createElementBlock as n, renderSlot as s, createCommentVNode as c, createElementVNode as b, normalizeClass as p, Fragment as r } from "vue";
-import { _ as d } from "../.chunks/forms-64632f73.es.js";
-import("../core/core.js").then((e) => {
-  const t = ["../assets/tabs.css"].map((a) => import.meta.resolve(a));
-  e.default.Page.addCss(t);
-});
-const _ = {
-  class: /* @__PURE__ */ p({
+import { insertToPage as c } from "../utils/css.js";
+import { defineComponent as b, openBlock as a, createElementBlock as o, renderSlot as s, createCommentVNode as _, createElementVNode as n, normalizeClass as l, Fragment as i } from "vue";
+import { _ as p } from "../.chunks/forms-9516aa6c.es.js";
+const r = ["../assets/tabs.css"].map((e) => import.meta.resolve(e));
+await c(r);
+const u = {
+  class: /* @__PURE__ */ l({
     "top-tabs": !0
   })
-}, i = {
+}, m = {
   key: 0,
   class: "top-tabs_header"
-}, u = { class: "top-tabs_contents" }, m = /* @__PURE__ */ l({
+}, $ = { class: "top-tabs_contents" }, h = /* @__PURE__ */ b({
   __name: "tabs",
   props: {
     id: {}
   },
   setup(e) {
-    return (t, a) => (o(), n("div", _, [
+    return (t, d) => (a(), o("div", u, [
       s(t.$slots, "buttons"),
-      t.$slots.header ? (o(), n("div", i, [
+      t.$slots.header ? (a(), o("div", m, [
         s(t.$slots, "header")
-      ])) : c("", !0),
-      b("div", u, [
+      ])) : _("", !0),
+      n("div", $, [
         s(t.$slots, "contents")
       ])
     ]));
   }
-}), $ = {
+}), f = {
   "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"
-}, h = {
-  $style: $
-}, g = /* @__PURE__ */ d(m, [["__cssModules", h]]), f = ["id", "name", "value", "checked", "disabled"], v = ["for"], y = /* @__PURE__ */ l({
+}, v = {
+  $style: f
+}, P = /* @__PURE__ */ p(h, [["__cssModules", v]]), y = ["id", "name", "value", "checked", "disabled"], I = ["for"], M = /* @__PURE__ */ b({
   __name: "tab",
   props: {
     tabsId: {},
@@ -45,8 +44,8 @@ const _ = {
     disabled: { type: Boolean }
   },
   setup(e) {
-    return (t, a) => (o(), n(r, null, [
-      b("input", {
+    return (t, d) => (a(), o(i, null, [
+      n("input", {
         type: "radio",
         class: "top-tabs_tabInput top-unvisible",
         id: t.tabsId + t.name,
@@ -54,9 +53,9 @@ const _ = {
         value: t.name,
         checked: t.active,
         disabled: t.disabled
-      }, null, 8, f),
-      b("label", {
-        class: p({
+      }, null, 8, y),
+      n("label", {
+        class: l({
           "top-tabs_tabLabel": !0,
           "top-forms-focusable": !0,
           "top-disabled": t.disabled
@@ -64,38 +63,38 @@ const _ = {
         for: t.tabsId + t.name
       }, [
         s(t.$slots, "default")
-      ], 10, v)
+      ], 10, I)
     ], 64));
   }
-}), I = {
+}), T = {
   "top-tabs_tabLabel": "top-tabs_tabLabel",
   "top-tabs_tabInput": "top-tabs_tabInput",
   "top-disabled": "top-disabled"
-}, M = {
-  $style: I
-}, E = /* @__PURE__ */ d(y, [["__cssModules", M]]), k = ["data-tabs-name"], C = /* @__PURE__ */ l({
+}, k = {
+  $style: T
+}, V = /* @__PURE__ */ p(M, [["__cssModules", k]]), C = ["data-tabs-name"], B = /* @__PURE__ */ b({
   __name: "content",
   props: {
     name: {}
   },
   setup(e) {
-    return (t, a) => (o(), n("div", {
-      class: p({
+    return (t, d) => (a(), o("div", {
+      class: l({
         "top-tabs_content": !0
       }),
       "data-tabs-name": t.name
     }, [
       s(t.$slots, "default")
-    ], 8, k));
+    ], 8, C));
   }
-}), B = {
+}), g = {
   "top-tabs_content": "top-tabs_content"
-}, T = {
-  $style: B
-}, V = /* @__PURE__ */ d(C, [["__cssModules", T]]);
+}, L = {
+  $style: g
+}, w = /* @__PURE__ */ p(B, [["__cssModules", L]]);
 export {
-  g as Tabs,
-  V as TabsContent,
-  E as TabsTab
+  P as Tabs,
+  w as TabsContent,
+  V as TabsTab
 };
 //# sourceMappingURL=tabs.js.map

package/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/tabsView/tabsView.amd.js

@@ -1,2 +1,2 @@
-define(["require","exports","vue","../popup/popup.amd","../.chunks/forms-30d68077.amd","../popup/worker.amd"],function(w,p,e,u,c,Z){"use strict";w(["../core/core.amd"],o=>{const t=["../assets/tabsView.css"].map(n=>w.toUrl(n));o.Page.addCss(t)});const y=(o,t)=>(e.provide(o,t),t),k=o=>{const t=e.inject(o);if(!t)throw Error("Попытка использовать tabsView state до его инициализации");return t},f=(o,t)=>`top:tabsView:${String(o)}:${t}`,m={init:y,use:k,loadLocalStorge:(o,t)=>{if(!t.key)return;const n=f(o,t.key);try{const s=JSON.parse(localStorage.getItem(n));typeof s==typeof t[o]&&(t[o]=s)}catch{console.warn(new Error(`В localStorage[${n}] не корректный json`))}},addSaverLocalStorge:(o,t)=>{if(!t.key)return;const n=f(o,t.key);e.watch(e.toRef(t,o),()=>{localStorage.setItem(n,JSON.stringify(t[o]))},{immediate:!0})}},b=Symbol(),I=(o,t)=>{const n=e.reactive({key:o.keyForSaveState,showMenuInPopup:o.showMenuInPopup,isShort:!1,activeItemName:e.computed({get(){return o.modelValue},set(s){t("update:modelValue",s)}})});return $(o,n),m.init(b,n)},d=()=>m.use(b),$=(o,t)=>{if(o.isShortable){const n="isShort";m.loadLocalStorge(n,t),m.addSaverLocalStorge(n,t)}},M={key:1,class:"top-ellipsis"},B=e.defineComponent({__name:"menuItem",props:{name:{},href:{},icon:{},disabled:{type:Boolean}},setup(o){const t=o,n=e.computed(()=>s.showMenuInPopup?u.PopupListItem:t.href?"a":"button"),s=d();return(a,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.value),{class:e.normalizeClass({"top-tabsView_menuItem":!e.unref(s).showMenuInPopup,"top-active":a.name&&e.unref(s).activeItemName===a.name,"top-disabled":a.disabled}),href:a.href,"data-top-icon":a.icon||void 0,disabled:a.disabled||void 0,onClick:l[0]||(l[0]=i=>a.name?e.unref(s).activeItemName=a.name:null)},{default:e.withCtx(()=>[e.unref(s).showMenuInPopup?e.renderSlot(a.$slots,"default",{key:0}):a.$slots.default&&!e.unref(s).isShort?(e.openBlock(),e.createElementBlock("span",M,[e.renderSlot(a.$slots,"default")])):e.createCommentVNode("",!0)]),_:3},8,["class","href","data-top-icon","disabled"]))}}),g={$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"}},_=c._export_sfc(B,[["__cssModules",g]]),P={class:"top-tabsView_menuOpener"},C=["data-top-icon"],N={class:"top-ellipsis"},T=e.createElementVNode("div",{class:"top-tabsView_menuOpenerIcon","data-top-icon":""},null,-1),E={class:"top-tabsView_menuList"},L=e.defineComponent({__name:"menu",props:{isShortable:{type:Boolean}},setup(o){const t=d(),n=e.useSlots(),s=new Map,a=e.computed(()=>{let i=s.get(t.activeItemName);return i||(l(),s.get(t.activeItemName)||null)}),l=()=>{if(!n.default)return;const i=n.default().find(r=>r.key==="_menu");i&&i.children.forEach(r=>{var h,S;if(r.type.__name!==_.__name||!r.props.name)return;const V={title:((S=(h=r.children).default)==null?void 0:S.call(h)[0].children).trim(),icon:r.props.icon};s.set(r.props.name,V)})};return(i,r)=>(e.openBlock(),e.createElementBlock("div",{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(u.Popup),{key:0},{opener:e.withCtx(()=>[e.createElementVNode("div",P,[a.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"top-tabsView_menuOpenerActiveItem","data-top-icon":a.value.icon},[e.createElementVNode("span",N,e.toDisplayString(a.value.title),1)],8,C)):e.createCommentVNode("",!0),T])]),contentList:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",E,[e.renderSlot(i.$slots,"default")]),i.isShortable?(e.openBlock(),e.createBlock(_,{key:0,icon:e.unref(t).isShort?"":"",onClick:r[0]||(r[0]=V=>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)],64))],2))}}),O={$style:{"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_menu":"top-tabsView_menu","top-tabsView_menuOpener":"top-tabsView_menuOpener","top-tabsView_menuOpenerIcon":"top-tabsView_menuOpenerIcon","top-tabsView_menuOpenerActiveItem":"top-tabsView_menuOpenerActiveItem","top-tabsView_menuList":"top-tabsView_menuList"}},D=c._export_sfc(L,[["__cssModules",O]]),j={class:"top-tabsView_contents"},z=e.defineComponent({__name:"tabsView",props:{modelValue:{},showMenuInPopup:{type:Boolean},isShortable:{type:Boolean,default:!1},keyForSaveState:{}},emits:["update:modelValue"],setup(o,{emit:t}){const n=o,a=I(n,t);return e.watchEffect(()=>{a.showMenuInPopup=n.showMenuInPopup??c.Core.state.isMobile}),(l,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-tabsView":!0,"top-tabsView-inPopup":e.unref(a).showMenuInPopup})},[e.createVNode(D,{isShortable:l.isShortable},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"menu")]),_:3},8,["isShortable"]),e.createElementVNode("div",j,[e.renderSlot(l.$slots,"contents")])],2))}}),K={$style:{"top-tabsView":"top-tabsView","top-tabsView-inPopup":"top-tabsView-inPopup","top-tabsView_contents":"top-tabsView_contents"}},A=c._export_sfc(z,[["__cssModules",K]]),F={"top-tabsView_menuDelimeter":"top-tabsView_menuDelimeter"},J={},R={class:"top-tabsView_menuDelimeter"};function U(o,t){return e.openBlock(),e.createElementBlock("div",R)}const q={$style:F},G=c._export_sfc(J,[["render",U],["__cssModules",q]]),H=e.defineComponent({__name:"menuTitle",props:{isSubtitle:{type:Boolean}},setup(o){const t=d();return(n,s)=>e.unref(t).showMenuInPopup?(e.openBlock(),e.createBlock(e.unref(u.PopupListItem),{key:0,type:"title"},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3})):e.unref(t).isShort?(e.openBlock(),e.createBlock(G,{key:1})):(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass({"top-tabsView_menuTitle":!0,"top-tabsView_menuTitle-subtitle":n.isSubtitle})},[e.renderSlot(n.$slots,"default")],2))}}),Q={$style:{"top-tabsView_menuTitle":"top-tabsView_menuTitle","top-tabsView_menuTitle-subtitle":"top-tabsView_menuTitle-subtitle"}},W=c._export_sfc(H,[["__cssModules",Q]]),X={key:0,class:"top-tabsView_content"},Y=e.defineComponent({__name:"content",props:{name:{}},setup(o){const t=d();return(n,s)=>e.unref(t).activeItemName===n.name?(e.openBlock(),e.createElementBlock("div",X,[e.renderSlot(n.$slots,"default")])):e.createCommentVNode("",!0)}});p.TabsView=A,p.TabsViewContent=Y,p.TabsViewMenuItem=_,p.TabsViewMenuTitle=W,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
+define(["require","exports","vue","../popup/popup.amd","../.chunks/forms-9284b6d9.amd","../popup/worker.amd","../utils/dom.amd"],function(w,p,e,u,c,x,v){"use strict";w(["../utils/css.amd"],({insertToPage:o})=>{const t=["../assets/tabsView.css"].map(n=>w.toUrl(n));o(t)});const y=(o,t)=>(e.provide(o,t),t),k=o=>{const t=e.inject(o);if(!t)throw Error("Попытка использовать tabsView state до его инициализации");return t},b=(o,t)=>`top:tabsView:${String(o)}:${t}`,m={init:y,use:k,loadLocalStorge:(o,t)=>{if(!t.key)return;const n=b(o,t.key);try{const s=JSON.parse(localStorage.getItem(n));typeof s==typeof t[o]&&(t[o]=s)}catch{console.warn(new Error(`В localStorage[${n}] не корректный json`))}},addSaverLocalStorge:(o,t)=>{if(!t.key)return;const n=b(o,t.key);e.watch(e.toRef(t,o),()=>{localStorage.setItem(n,JSON.stringify(t[o]))},{immediate:!0})}},f=Symbol(),I=(o,t)=>{const n=e.reactive({key:o.keyForSaveState,showMenuInPopup:o.showMenuInPopup,isShort:!1,activeItemName:e.computed({get(){return o.modelValue},set(s){t("update:modelValue",s)}})});return $(o,n),m.init(f,n)},d=()=>m.use(f),$=(o,t)=>{if(o.isShortable){const n="isShort";m.loadLocalStorge(n,t),m.addSaverLocalStorge(n,t)}},M={key:1,class:"top-ellipsis"},B=e.defineComponent({__name:"menuItem",props:{name:{},href:{},icon:{},disabled:{type:Boolean}},setup(o){const t=o,n=e.computed(()=>s.showMenuInPopup?u.PopupListItem:t.href?"a":"button"),s=d();return(a,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.value),{class:e.normalizeClass({"top-tabsView_menuItem":!e.unref(s).showMenuInPopup,"top-active":a.name&&e.unref(s).activeItemName===a.name,"top-disabled":a.disabled}),href:a.href,"data-top-icon":a.icon||void 0,disabled:a.disabled||void 0,onClick:l[0]||(l[0]=i=>a.name?e.unref(s).activeItemName=a.name:null)},{default:e.withCtx(()=>[e.unref(s).showMenuInPopup?e.renderSlot(a.$slots,"default",{key:0}):a.$slots.default&&!e.unref(s).isShort?(e.openBlock(),e.createElementBlock("span",M,[e.renderSlot(a.$slots,"default")])):e.createCommentVNode("",!0)]),_:3},8,["class","href","data-top-icon","disabled"]))}}),g={$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"}},_=c._export_sfc(B,[["__cssModules",g]]),P={class:"top-tabsView_menuOpener"},N=["data-top-icon"],C={class:"top-ellipsis"},E=e.createElementVNode("div",{class:"top-tabsView_menuOpenerIcon","data-top-icon":""},null,-1),T={class:"top-tabsView_menuList"},L={class:"top-tabsView_menuFooter"},O=e.defineComponent({__name:"menu",props:{isShortable:{type:Boolean}},setup(o){const t=d(),n=e.useSlots(),s=new Map,a=e.computed(()=>{let i=s.get(t.activeItemName);return i||(l(),s.get(t.activeItemName)||null)}),l=()=>{if(!n.default)return;const i=n.default().find(r=>r.key==="_menu");i&&i.children.forEach(r=>{var h,S;if(r.type.__name!==_.__name||!r.props.name)return;const V={title:((S=(h=r.children).default)==null?void 0:S.call(h)[0].children).trim(),icon:r.props.icon};s.set(r.props.name,V)})};return(i,r)=>(e.openBlock(),e.createElementBlock("div",{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(u.Popup),{key:0},{opener:e.withCtx(()=>[e.createElementVNode("div",P,[a.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"top-tabsView_menuOpenerActiveItem","data-top-icon":a.value.icon},[e.createElementVNode("span",C,e.toDisplayString(a.value.title),1)],8,N)):e.createCommentVNode("",!0),E])]),contentList:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",T,[e.renderSlot(i.$slots,"default")]),e.createElementVNode("div",L,[i.isShortable?(e.openBlock(),e.createBlock(_,{key:0,icon:e.unref(t).isShort?"":"",onClick:r[0]||(r[0]=V=>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)])],64))],2))}}),D={$style:{"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_menu":"top-tabsView_menu","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=c._export_sfc(O,[["__cssModules",D]]),j={class:"top-tabsView_contents"},z=e.defineComponent({__name:"tabsView",props:{modelValue:{},showMenuInPopup:{type:Boolean},isShortable:{type:Boolean,default:!1},keyForSaveState:{}},emits:["update:modelValue"],setup(o,{emit:t}){const n=o,a=I(n,t);return e.watchEffect(()=>{a.showMenuInPopup=n.showMenuInPopup??c.Core.state.isMobile}),(l,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-tabsView":!0,"top-tabsView-inPopup":e.unref(a).showMenuInPopup})},[e.createVNode(F,{isShortable:l.isShortable},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"menu")]),_:3},8,["isShortable"]),e.createElementVNode("div",j,[e.renderSlot(l.$slots,"contents")])],2))}}),K={$style:{"top-tabsView":"top-tabsView","top-tabsView-inPopup":"top-tabsView-inPopup","top-tabsView_contents":"top-tabsView_contents"}},A=c._export_sfc(z,[["__cssModules",K]]),J={"top-tabsView_menuDelimeter":"top-tabsView_menuDelimeter"},R={},U={class:"top-tabsView_menuDelimeter"};function q(o,t){return e.openBlock(),e.createElementBlock("div",U)}const G={$style:J},H=c._export_sfc(R,[["render",q],["__cssModules",G]]),Q=e.defineComponent({__name:"menuTitle",props:{isSubtitle:{type:Boolean}},setup(o){const t=d();return(n,s)=>e.unref(t).showMenuInPopup?(e.openBlock(),e.createBlock(e.unref(u.PopupListItem),{key:0,type:"title"},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3})):e.unref(t).isShort?(e.openBlock(),e.createBlock(H,{key:1})):(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass({"top-tabsView_menuTitle":!0,"top-tabsView_menuTitle-subtitle":n.isSubtitle})},[e.renderSlot(n.$slots,"default")],2))}}),W={$style:{"top-tabsView_menuTitle":"top-tabsView_menuTitle","top-tabsView_menuTitle-subtitle":"top-tabsView_menuTitle-subtitle"}},X=c._export_sfc(Q,[["__cssModules",W]]),Y={key:0,class:"top-tabsView_content"},Z=e.defineComponent({__name:"content",props:{name:{}},setup(o){const t=d();return(n,s)=>e.unref(t).activeItemName===n.name?(e.openBlock(),e.createElementBlock("div",Y,[e.renderSlot(n.$slots,"default")])):e.createCommentVNode("",!0)}});p.TabsView=A,p.TabsViewContent=Z,p.TabsViewMenuItem=_,p.TabsViewMenuTitle=X,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=tabsView.amd.js.map

package/tabsView/tabsView.amd.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabsView.amd.js","sources":["../../src/components/stateManager.ts","../../src/components/tabsView/tabsView/state.ts","../../src/components/tabsView/tabsView/menuItem.vue","../../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/content.vue"],"sourcesContent":["import { provide, inject, toRef, watch } from 'vue';\nimport type { InjectionKey } from 'vue';\nimport { injectionKey } from '@/components/tabsView/tabsView/state';\n\n/**\n * State - интерфейс с общими параметрами для состояния компоента\n */\nexport interface State {\n\t/**\n\t *  Ключ для сохранения состояния\n\t *\n\t *  Может быть одинаковый для разных компонентов\n\t *\n\t *  Не может быть реактивным\n\t *\n\t *  Состояния сохраняются в localStorage с префиксом top\n\t */\n\tkey?: string;\n}\n\n/**\n * Инициировать State компонента\n * @param key - InjectionKey для provide / inject в области компонента\n * @param state\n * @return - State компонента\n */\nconst init = <T>(injectionKey: InjectionKey<T>, state: T): T => {\n\tprovide(injectionKey, state);\n\n\treturn state;\n};\n\n/**\n * Получить State компонента\n * @param key - InjectionKey для provide / inject в области компонента\n * @return - State компонента\n */\nconst use = <T>(injectionKey: InjectionKey<T>): T => {\n\tconst state = inject(injectionKey);\n\n\tif (!state) {\n\t\tthrow Error('Попытка использовать tabsView state до его инициализации');\n\t}\n\n\treturn state;\n};\n\n/**\n * Сгенерировать имя для сохранения данных в localStorage\n * @param stateName - имя свойства состояния\n * @param stateKey - ключ состояния, разные компоненты могут использовать одинаковый ключ\n */\nconst genStorageKey = <T extends State>(stateName: keyof T, stateKey: string): string => {\n\tconst stateNameString = String(stateName);\n\n\treturn `top:tabsView:${stateNameString}:${stateKey}`;\n};\n\n/**\n * Загрузить состояние\n * @param stateName - имя свойства состояния\n * @param state\n */\nconst loadLocalStorge = <T extends State>(stateName: keyof T, state: T) => {\n\t// если state.key не знадан, значит сохранение состояния в компоненте отключено\n\tif (!state.key) return;\n\n\tconst localStorageKey = genStorageKey(stateName, state.key);\n\n\ttry {\n\t\tconst localStorageValue: typeof state[keyof typeof state] = JSON.parse(localStorage.getItem(localStorageKey) as string);\n\n\t\tif (typeof localStorageValue === typeof state[stateName]) {\n\t\t\tstate[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 state\n */\nconst addSaverLocalStorge = <T extends State>(stateName: keyof T, state: T) => {\n\t// если state.key не знадан, значит сохранение состояния в компоненте отключено\n\tif (!state.key) return;\n\n\tconst localStorageKey = genStorageKey(stateName, state.key);\n\n\twatch(toRef(state, stateName), () => {\n\t\tlocalStorage.setItem(localStorageKey, JSON.stringify(state[stateName]));\n\t}, { immediate: true });\n};\n\nexport default {\n\tinit,\n\tuse,\n\tloadLocalStorge,\n\taddSaverLocalStorge,\n};","import { reactive, computed } from 'vue';\nimport type { InjectionKey } from 'vue';\nimport type { State } from './tabsView';\nimport type { Emits, Props } from './tabsView';\nimport stateManager from '@/components/stateManager';\n\nexport const injectionKey = Symbol() as InjectionKey<State>;\n\n/**\n * Инициировать State компонента\n * @param props\n * @param emit\n */\nexport const initState = (props: Props, emit: Emits): State => {\n\tconst state: State = reactive({\n\t\tkey: props.keyForSaveState,\n\t\tshowMenuInPopup: props.showMenuInPopup,\n\t\tisShort: false,\n\t\tactiveItemName: computed({\n\t\t\tget() {\n\t\t\t\treturn props.modelValue;\n\t\t\t},\n\t\t\tset(value) {\n\t\t\t\temit('update:modelValue', value);\n\t\t\t},\n\t\t}),\n\t});\n\n\tinitLocalStorge(props, state);\n\n\treturn stateManager.init(injectionKey, state);\n};\n\n/**\n * Получить State компонента\n */\nexport const useState = () => {\n\treturn stateManager.use(injectionKey);\n};\n\n/**\n * Инициировать работу LocalStorge\n * @param props\n * @param state\n */\nconst initLocalStorge = (props: Props, state: State): void => {\n\tif (props.isShortable) {\n\t\tconst stateName = 'isShort';\n\n\t\tstateManager.loadLocalStorge(stateName, state);\n\t\tstateManager.addSaverLocalStorge(stateName, state);\n\t}\n};","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { useState } from './state';\nimport type { PropsMenuItem, State } from './tabsView';\nimport { PopupListItem } from '../../popup/popup';\n\nconst props = defineProps<PropsMenuItem>();\n\nconst componentName = computed(() => {\n\tif (state.showMenuInPopup) {\n\t\treturn PopupListItem;\n\t}\n\n\treturn props.href ? 'a' : 'button';\n});\n\nconst state = useState();\n</script>\n\n<template>\n\t<component\n\t\t:is=\"componentName\"\n\t\t:class=\"{\n\t\t\t['top-tabsView_menuItem']: !state.showMenuInPopup,\n\t\t\t['top-active']: name && state.activeItemName === name,\n\t\t\t['top-disabled']: disabled,\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=\"name ? state.activeItemName = name : null\"\n\t>\n\t\t<slot v-if=\"state.showMenuInPopup\"></slot>\n\n\t\t<span\n\t\t\tv-else-if=\"$slots.default && !state.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-text-1);\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-align: left;\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-secondary-2-opacity);\n}\n\n.top-tabsView_menuItem.top-active {\n\t--top-icon-color: var(--color-primary);\n\n\tcursor: unset;\n\tbackground: var(--color-bg-3);\n\tcolor: var(--color-primary);\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>","<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue';\nimport type { ComputedRef } from '@vue/reactivity';\nimport { Popup } from '../../popup/popup';\n\nimport type { PropsMenu, PropsMenuItem, MenuItem } from './tabsView';\nimport { useState } from './state';\nimport TabsViewMenuItem from './menuItem.vue';\n\ndefineProps<PropsMenu>();\n\nconst state = useState();\n\nconst slots = useSlots();\n\n// словарь испоьзуется для оптимизации получения нужного menuItem\nconst menuItemByName: Map<PropsMenuItem['name'], MenuItem> = new Map();\n\n// activeMenuItem нужен для вывода текста активной вкладки в меню с popup\n// смена slot, например смена языка, требует повторного выполнения genMenuItemByName()\nconst activeMenuItem: ComputedRef<MenuItem | null> = computed(() => {\n\tlet menuItem = menuItemByName.get(state.activeItemName);\n\tif (menuItem) return menuItem;\n\n\tgenMenuItemByName();\n\n\treturn menuItemByName.get(state.activeItemName) || null;\n});\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) return;\n\n\t\tconst menuItem = {\n\t\t\ttitle: (subComponent.children.default?.()[0].children as string).trim(),\n\t\t\ticon: subComponent.props.icon,\n\t\t};\n\n\t\tmenuItemByName.set(subComponent.props.name, menuItem);\n\t});\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t'top-tabsView_menu': true,\n\t\t\t'top-tabsView_menu-inPopup_0': !state.showMenuInPopup,\n\t\t\t'top-tabsView_menu-inPopup_1': state.showMenuInPopup,\n\t\t\t'top-tabsView_menu-short': state.isShort && !state.showMenuInPopup,\n\t\t}\"\n\t>\n\t\t<!-- Спрятать меню под кнопку в popup -->\n\t\t<Popup v-if=\"state.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</Popup>\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<TabsViewMenuItem\n\t\t\t\tv-if=\"isShortable\"\n\t\t\t\t:icon=\"state.isShort ? '' : ''\"\n\t\t\t\t@click=\"state.isShort = !state.isShort\"\n\t\t\t>\n\t\t\t\t{{ state.isShort ? '' : 'Свернуть' }} <!--TODO: translate-->\n\t\t\t</TabsViewMenuItem>\n\t\t</template>\n\t</div>\n</template>\n\n<style module>\n.top-tabsView_menu-inPopup_0 {\n\tbox-sizing: border-box;\n\tbackground: var(--color-bg-2);\n\twidth: var(--top-tabsView-menu-width);\n\tpadding: var(--top-padding-2);\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n}\n\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-secondary-opacity);\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\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--top-gap-2);\n}\n</style>","<script setup lang=\"ts\">\nimport { watchEffect } from 'vue';\nimport type { Props, Emits } from './tabsView';\nimport { initState } from './state';\nimport TabsViewMenu from './menu.vue';\nimport Core from '@/core/core/core';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tisShortable: false,\n});\n\nconst emit = defineEmits<Emits>();\n\nconst state = initState(props, emit);\n\nwatchEffect(() => {\n\tstate.showMenuInPopup = props.showMenuInPopup ?? Core.state.isMobile;\n});\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-inPopup': state.showMenuInPopup,\n\t\t}\"\n\t>\n\t\t<TabsViewMenu :isShortable=\"isShortable\">\n\t\t\t<!-- @slot Меню, ожидает передачу компонентов TabsViewMenuItem и TabsViewMenuTitle -->\n\t\t\t<slot name=\"menu\"></slot>\n\t\t</TabsViewMenu>\n\n\t\t<div class=\"top-tabsView_contents\">\n\t\t\t<!-- @slot Контент вкладок, ожидает передачу компонентов TabsViewContent, в слоте необходимо предусмотреть вывод неободимого компонента в зависимости от активной вкладки -->\n\t\t\t<slot name=\"contents\"></slot>\n\t\t</div>\n\t</div>\n</template>\n\n<style module>\n:root {\n\t--top-tabsView-menu-width: 190px;\n}\n\n.top-tabsView {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.top-tabsView-inPopup {\n\tflex-direction: column;\n}\n\n.top-tabsView_contents {\n\tpadding: var(--top-padding-4);\n\tflex-grow: 1;\n}\n</style>","<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-opacity);\n\tflex-grow: 1;\n}\n\n.top-tabsView_menuDelimeter + .top-tabsView_menuDelimeter {\n\tdisplay: none;\n}\n</style>","<script setup lang=\"ts\">\nimport { useState } from './state';\nimport type { PropsMenuTitle, State } from './tabsView';\nimport TabsViewMenuDelimeter from './menuDelimeter.vue';\nimport { PopupListItem } from '../../popup/popup';\n\ndefineProps<PropsMenuTitle>();\n\nconst state = useState();\n</script>\n\n<template>\n\t<PopupListItem\n\t\tv-if=\"state.showMenuInPopup\"\n\t\ttype=\"title\"\n\t>\n\t\t<slot></slot>\n\t</PopupListItem>\n\n\t<TabsViewMenuDelimeter v-else-if=\"state.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}\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>","<script setup lang=\"ts\">\nimport { useState } from './state';\nimport type { PropsContent } from './tabsView';\n\ndefineProps<PropsContent>();\n\nconst state = useState();\n</script>\n\n<template>\n\t<div\n\t\tv-if=\"state.activeItemName === name\"\n\t\tclass=\"top-tabsView_content\"\n\t>\n\t\t<slot></slot>\n\t</div>\n</template>\n\n<style module>\n\n</style>"],"names":["init","injectionKey2","state","vue","use","genStorageKey","stateName","stateKey","stateManager","localStorageValue","localStorageKey","injectionKey","initState","props","emit","value","initLocalStorge","__props","componentName","useState","slots","menuItemByName","activeMenuItem","menuItem","component","item","subComponent","_b","_a","__emit","forms","_sfc_render","_ctx","_cache"],"mappings":"qPA0BA,MAAAA,EAAA,CAAAC,EAAAC,KACCC,EAAA,QAAAF,EAAAC,CAAA,KAUDE,EAAAH,GAAA,CACC,MAAAC,EAAAC,EAAA,OAAAF,CAAA,QAGC,MAAA,MAAA,0DAAA,UAIF,EAOAI,EAAA,CAAAC,EAAAC,oBACC,OAAAD,CAAA,SA2CDE,EAAA,CAAe,KAAAR,EACd,IAAAI,EACA,gBAnCD,CAAAE,EAAAJ,IAAA,CAEC,GAAA,CAAAA,EAAA,IAAgB,0BAIhB,GAAA,CACC,MAAAO,EAAA,KAAA,MAAA,aAAA,QAAAC,CAAA,CAAA,0BAGCR,EAAAI,CAAA,EAAAG,SAGD,QAAA,KAAA,IAAA,MAAA,kBAAAC,CAAA,sBAAA,CAAA,EAEF,EAqBC,oBAdD,CAAAJ,EAAAJ,IAAA,CAEC,GAAA,CAAAA,EAAA,IAAgB,oDAKf,aAAA,QAAAQ,EAAA,KAAA,UAAAR,EAAAI,CAAA,CAAA,CAAA,CAAsE,EAAA,CAAA,UAAA,EAAA,CAAA,CAExE,GCxFOK,EAAA,OAAA,EAOMC,EAAA,CAAAC,EAAAC,IAAA,CACZ,MAAAZ,EAAAC,EAAA,SAAA,CAA8B,IAAAU,EAAA,gBAClB,gBAAAA,EAAA,sDAGc,KAAA,CAEvB,OAAAA,EAAA,mBAGAC,EAAA,oBAAAC,CAAA,EACD,CAAA,CACA,CAAA,EAGF,OAAAC,EAAAH,EAAAX,CAAA,aAGD,QAMCM,EAAA,IAAAG,CAAA,EAQDK,EAAA,CAAAH,EAAAX,IAAA,CACC,GAAAW,EAAA,YAAA,CACC,MAAAP,EAAA,qMCzCF,MAAAO,EAAAI,EAEAC,EAAAf,EAAA,SAAA,IACCD,EAAA,mDAI0B,EAG3BA,EAAAiB,EAAA,krCCLA,MAAAjB,EAAAiB,EAAA,EAEAC,EAAAjB,EAAA,SAAA,EAGAkB,EAAA,IAAA,IAIAC,EAAAnB,EAAA,SAAA,IAAA,+BAEC,OAAAoB,sCAImD,CAAA,SAKnD,GAAA,CAAAH,EAAA,QAAoB,OAEpB,MAAAI,EAAAJ,EAAA,QAAA,EAAA,KAAAK,GAAAA,EAAA,MAAA,OAAA,oCAKC,6BAAA,CAAAC,EAAA,MAAA,KAA8B,gBAEb,QAAAC,GAAAC,EAAAF,EAAA,UAAA,UAAA,YAAAC,EAAA,KAAAC,GAAA,GAAA,UAAA,KAAA,EACsD,KAAAF,EAAA,MAAA,IAC7C,EAG1BL,EAAA,IAAAK,EAAA,MAAA,KAAAH,CAAA,CAAoD,CAAA,CACpD,w2DCvCF,MAAAV,EAAAI,QAIAY,6BAKC3B,EAAA,gBAAAW,EAAA,iBAAAiB,EAAA,KAAA,MAAA,QAA4D,CAAA,qnBCX5D,SAAAC,EAAAC,EAAAC,EAAA,+MCGD,MAAA/B,EAAAiB,EAAA,qsBCFA,MAAAjB,EAAAiB,EAAA"}
+{"version":3,"file":"tabsView.amd.js","sources":["../../src/components/stateManager.ts","../../src/components/tabsView/tabsView/state.ts","../../src/components/tabsView/tabsView/menuItem.vue","../../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/content.vue"],"sourcesContent":["import { provide, inject, toRef, watch } from 'vue';\r\nimport type { InjectionKey } from 'vue';\r\nimport { injectionKey } from '@/components/tabsView/tabsView/state';\r\n\r\n/**\r\n * State - интерфейс с общими параметрами для состояния компоента\r\n */\r\nexport interface State {\r\n\t/**\r\n\t *  Ключ для сохранения состояния\r\n\t *\r\n\t *  Может быть одинаковый для разных компонентов\r\n\t *\r\n\t *  Не может быть реактивным\r\n\t *\r\n\t *  Состояния сохраняются в localStorage с префиксом top\r\n\t */\r\n\tkey?: string;\r\n}\r\n\r\n/**\r\n * Инициировать State компонента\r\n * @param key - InjectionKey для provide / inject в области компонента\r\n * @param state\r\n * @return - State компонента\r\n */\r\nconst init = <T>(injectionKey: InjectionKey<T>, state: T): T => {\r\n\tprovide(injectionKey, state);\r\n\r\n\treturn state;\r\n};\r\n\r\n/**\r\n * Получить State компонента\r\n * @param key - InjectionKey для provide / inject в области компонента\r\n * @return - State компонента\r\n */\r\nconst use = <T>(injectionKey: InjectionKey<T>): T => {\r\n\tconst state = inject(injectionKey);\r\n\r\n\tif (!state) {\r\n\t\tthrow Error('Попытка использовать tabsView state до его инициализации');\r\n\t}\r\n\r\n\treturn state;\r\n};\r\n\r\n/**\r\n * Сгенерировать имя для сохранения данных в localStorage\r\n * @param stateName - имя свойства состояния\r\n * @param stateKey - ключ состояния, разные компоненты могут использовать одинаковый ключ\r\n */\r\nconst genStorageKey = <T extends State>(stateName: keyof T, stateKey: string): string => {\r\n\tconst stateNameString = String(stateName);\r\n\r\n\treturn `top:tabsView:${stateNameString}:${stateKey}`;\r\n};\r\n\r\n/**\r\n * Загрузить состояние\r\n * @param stateName - имя свойства состояния\r\n * @param state\r\n */\r\nconst loadLocalStorge = <T extends State>(stateName: keyof T, state: T) => {\r\n\t// если state.key не знадан, значит сохранение состояния в компоненте отключено\r\n\tif (!state.key) return;\r\n\r\n\tconst localStorageKey = genStorageKey(stateName, state.key);\r\n\r\n\ttry {\r\n\t\tconst localStorageValue: typeof state[keyof typeof state] = JSON.parse(localStorage.getItem(localStorageKey) as string);\r\n\r\n\t\tif (typeof localStorageValue === typeof state[stateName]) {\r\n\t\t\tstate[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 state\r\n */\r\nconst addSaverLocalStorge = <T extends State>(stateName: keyof T, state: T) => {\r\n\t// если state.key не знадан, значит сохранение состояния в компоненте отключено\r\n\tif (!state.key) return;\r\n\r\n\tconst localStorageKey = genStorageKey(stateName, state.key);\r\n\r\n\twatch(toRef(state, stateName), () => {\r\n\t\tlocalStorage.setItem(localStorageKey, JSON.stringify(state[stateName]));\r\n\t}, { immediate: true });\r\n};\r\n\r\nexport default {\r\n\tinit,\r\n\tuse,\r\n\tloadLocalStorge,\r\n\taddSaverLocalStorge,\r\n};","import { reactive, computed } from 'vue';\r\nimport type { InjectionKey } from 'vue';\r\nimport type { State } from './tabsView';\r\nimport type { Emits, Props } from './tabsView';\r\nimport stateManager from '@/components/stateManager';\r\n\r\nexport const injectionKey = Symbol() as InjectionKey<State>;\r\n\r\n/**\r\n * Инициировать State компонента\r\n * @param props\r\n * @param emit\r\n */\r\nexport const initState = (props: Props, emit: Emits): State => {\r\n\tconst state: State = reactive({\r\n\t\tkey: props.keyForSaveState,\r\n\t\tshowMenuInPopup: props.showMenuInPopup,\r\n\t\tisShort: false,\r\n\t\tactiveItemName: computed({\r\n\t\t\tget() {\r\n\t\t\t\treturn props.modelValue;\r\n\t\t\t},\r\n\t\t\tset(value) {\r\n\t\t\t\temit('update:modelValue', value);\r\n\t\t\t},\r\n\t\t}),\r\n\t});\r\n\r\n\tinitLocalStorge(props, state);\r\n\r\n\treturn stateManager.init(injectionKey, state);\r\n};\r\n\r\n/**\r\n * Получить State компонента\r\n */\r\nexport const useState = () => {\r\n\treturn stateManager.use(injectionKey);\r\n};\r\n\r\n/**\r\n * Инициировать работу LocalStorge\r\n * @param props\r\n * @param state\r\n */\r\nconst initLocalStorge = (props: Props, state: State): void => {\r\n\tif (props.isShortable) {\r\n\t\tconst stateName = 'isShort';\r\n\r\n\t\tstateManager.loadLocalStorge(stateName, state);\r\n\t\tstateManager.addSaverLocalStorge(stateName, state);\r\n\t}\r\n};","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport { useState } from './state';\r\nimport type { PropsMenuItem, State } from './tabsView';\r\nimport { PopupListItem } from '../../popup/popup';\r\n\r\nconst props = defineProps<PropsMenuItem>();\r\n\r\nconst componentName = computed(() => {\r\n\tif (state.showMenuInPopup) {\r\n\t\treturn PopupListItem;\r\n\t}\r\n\r\n\treturn props.href ? 'a' : 'button';\r\n});\r\n\r\nconst state = useState();\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"componentName\"\r\n\t\t:class=\"{\r\n\t\t\t['top-tabsView_menuItem']: !state.showMenuInPopup,\r\n\t\t\t['top-active']: name && state.activeItemName === name,\r\n\t\t\t['top-disabled']: disabled,\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=\"name ? state.activeItemName = name : null\"\r\n\t>\r\n\t\t<slot v-if=\"state.showMenuInPopup\"></slot>\r\n\r\n\t\t<span\r\n\t\t\tv-else-if=\"$slots.default && !state.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-1);\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-align: left;\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\tbackground: var(--color-secondary-2-opacity);\r\n}\r\n\r\n.top-tabsView_menuItem.top-active {\r\n\t--top-icon-color: var(--color-primary);\r\n\r\n\tcursor: unset;\r\n\tbackground: var(--color-bg-3);\r\n\tcolor: var(--color-primary);\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>","<script setup lang=\"ts\">\r\nimport { computed, useSlots } from 'vue';\r\nimport type { ComputedRef } from '@vue/reactivity';\r\nimport { Popup } from '../../popup/popup';\r\n\r\nimport type { PropsMenu, PropsMenuItem, MenuItem } from './tabsView';\r\nimport { useState } from './state';\r\nimport TabsViewMenuItem from './menuItem.vue';\r\n\r\ndefineProps<PropsMenu>();\r\n\r\nconst state = useState();\r\n\r\nconst slots = useSlots();\r\n\r\n// словарь испоьзуется для оптимизации получения нужного menuItem\r\nconst menuItemByName: Map<PropsMenuItem['name'], MenuItem> = new Map();\r\n\r\n// activeMenuItem нужен для вывода текста активной вкладки в меню с popup\r\n// смена slot, например смена языка, требует повторного выполнения genMenuItemByName()\r\nconst activeMenuItem: ComputedRef<MenuItem | null> = computed(() => {\r\n\tlet menuItem = menuItemByName.get(state.activeItemName);\r\n\tif (menuItem) return menuItem;\r\n\r\n\tgenMenuItemByName();\r\n\r\n\treturn menuItemByName.get(state.activeItemName) || null;\r\n});\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) return;\r\n\r\n\t\tconst 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};\r\n\r\n\t\tmenuItemByName.set(subComponent.props.name, menuItem);\r\n\t});\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t'top-tabsView_menu': true,\r\n\t\t\t'top-tabsView_menu-inPopup_0': !state.showMenuInPopup,\r\n\t\t\t'top-tabsView_menu-inPopup_1': state.showMenuInPopup,\r\n\t\t\t'top-tabsView_menu-short': state.isShort && !state.showMenuInPopup,\r\n\t\t}\"\r\n\t>\r\n\t\t<!-- Спрятать меню под кнопку в popup -->\r\n\t\t<Popup v-if=\"state.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</Popup>\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 class=\"top-tabsView_menuFooter\">\r\n\t\t\t\t<TabsViewMenuItem\r\n\t\t\t\t\tv-if=\"isShortable\"\r\n\t\t\t\t\t:icon=\"state.isShort ? '' : ''\"\r\n\t\t\t\t\t@click=\"state.isShort = !state.isShort\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ state.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.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.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-secondary-opacity);\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>","<script setup lang=\"ts\">\r\nimport { watchEffect } from 'vue';\r\nimport type { Props, Emits } from './tabsView';\r\nimport { initState } from './state';\r\nimport TabsViewMenu from './menu.vue';\r\nimport Core from '@/core/core/core';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tisShortable: false,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst state = initState(props, emit);\r\n\r\nwatchEffect(() => {\r\n\tstate.showMenuInPopup = props.showMenuInPopup ?? Core.state.isMobile;\r\n});\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-inPopup': state.showMenuInPopup,\r\n\t\t}\"\r\n\t>\r\n\t\t<TabsViewMenu :isShortable=\"isShortable\">\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 class=\"top-tabsView_contents\">\r\n\t\t\t<!-- @slot Контент вкладок, ожидает передачу компонентов TabsViewContent, в слоте необходимо предусмотреть вывод неободимого компонента в зависимости от активной вкладки -->\r\n\t\t\t<slot name=\"contents\"></slot>\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-menu-width: 220px;\r\n}\r\n\r\n.top-tabsView {\r\n\tbackground: var(--color-bg-2);\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-inPopup {\r\n\tbackground: var(--color-bg-3);\r\n\tflex-direction: column;\r\n}\r\n\r\n.top-tabsView_contents {\r\n\tborder-radius: var(--top-radius-4);\r\n\tbackground: var(--color-bg-3);\r\n\tpadding: var(--top-padding-4);\r\n\tflex-grow: 1;\r\n\toverflow: auto;\r\n}\r\n</style>","<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-opacity);\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 { useState } from './state';\r\nimport type { PropsMenuTitle, State } from './tabsView';\r\nimport TabsViewMenuDelimeter from './menuDelimeter.vue';\r\nimport { PopupListItem } from '../../popup/popup';\r\n\r\ndefineProps<PropsMenuTitle>();\r\n\r\nconst state = useState();\r\n</script>\r\n\r\n<template>\r\n\t<PopupListItem\r\n\t\tv-if=\"state.showMenuInPopup\"\r\n\t\ttype=\"title\"\r\n\t>\r\n\t\t<slot></slot>\r\n\t</PopupListItem>\r\n\r\n\t<TabsViewMenuDelimeter v-else-if=\"state.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}\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>","<script setup lang=\"ts\">\r\nimport { useState } from './state';\r\nimport type { PropsContent } from './tabsView';\r\n\r\ndefineProps<PropsContent>();\r\n\r\nconst state = useState();\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tv-if=\"state.activeItemName === name\"\r\n\t\tclass=\"top-tabsView_content\"\r\n\t>\r\n\t\t<slot></slot>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n\r\n</style>"],"names":["init","injectionKey2","state","vue","use","genStorageKey","stateName","stateKey","stateManager","localStorageValue","localStorageKey","injectionKey","initState","props","emit","value","initLocalStorge","__props","componentName","useState","slots","menuItemByName","activeMenuItem","menuItem","component","item","subComponent","_b","_a","__emit","forms","_sfc_render","_ctx","_cache"],"mappings":"+QA0BA,MAAAA,EAAA,CAAAC,EAAAC,KACCC,EAAA,QAAAF,EAAAC,CAAA,KAUDE,EAAAH,GAAA,CACC,MAAAC,EAAAC,EAAA,OAAAF,CAAA,QAGC,MAAA,MAAA,0DAAA,UAIF,EAOAI,EAAA,CAAAC,EAAAC,oBACC,OAAAD,CAAA,SA2CDE,EAAA,CAAe,KAAAR,EACd,IAAAI,EACA,gBAnCD,CAAAE,EAAAJ,IAAA,CAEC,GAAA,CAAAA,EAAA,IAAgB,0BAIhB,GAAA,CACC,MAAAO,EAAA,KAAA,MAAA,aAAA,QAAAC,CAAA,CAAA,0BAGCR,EAAAI,CAAA,EAAAG,SAGD,QAAA,KAAA,IAAA,MAAA,kBAAAC,CAAA,sBAAA,CAAA,EAEF,EAqBC,oBAdD,CAAAJ,EAAAJ,IAAA,CAEC,GAAA,CAAAA,EAAA,IAAgB,oDAKf,aAAA,QAAAQ,EAAA,KAAA,UAAAR,EAAAI,CAAA,CAAA,CAAA,CAAsE,EAAA,CAAA,UAAA,EAAA,CAAA,CAExE,GCxFOK,EAAA,OAAA,EAOMC,EAAA,CAAAC,EAAAC,IAAA,CACZ,MAAAZ,EAAAC,EAAA,SAAA,CAA8B,IAAAU,EAAA,gBAClB,gBAAAA,EAAA,sDAGc,KAAA,CAEvB,OAAAA,EAAA,mBAGAC,EAAA,oBAAAC,CAAA,EACD,CAAA,CACA,CAAA,EAGF,OAAAC,EAAAH,EAAAX,CAAA,aAGD,QAMCM,EAAA,IAAAG,CAAA,EAQDK,EAAA,CAAAH,EAAAX,IAAA,CACC,GAAAW,EAAA,YAAA,CACC,MAAAP,EAAA,qMCzCF,MAAAO,EAAAI,EAEAC,EAAAf,EAAA,SAAA,IACCD,EAAA,mDAI0B,EAG3BA,EAAAiB,EAAA,stCCLA,MAAAjB,EAAAiB,EAAA,EAEAC,EAAAjB,EAAA,SAAA,EAGAkB,EAAA,IAAA,IAIAC,EAAAnB,EAAA,SAAA,IAAA,+BAEC,OAAAoB,sCAImD,CAAA,SAKnD,GAAA,CAAAH,EAAA,QAAoB,OAEpB,MAAAI,EAAAJ,EAAA,QAAA,EAAA,KAAAK,GAAAA,EAAA,MAAA,OAAA,oCAKC,6BAAA,CAAAC,EAAA,MAAA,KAA8B,gBAEb,QAAAC,GAAAC,EAAAF,EAAA,UAAA,UAAA,YAAAC,EAAA,KAAAC,GAAA,GAAA,UAAA,KAAA,EACsD,KAAAF,EAAA,MAAA,IAC7C,EAG1BL,EAAA,IAAAK,EAAA,MAAA,KAAAH,CAAA,CAAoD,CAAA,CACpD,4+DCvCF,MAAAV,EAAAI,QAIAY,6BAKC3B,EAAA,gBAAAW,EAAA,iBAAAiB,EAAA,KAAA,MAAA,QAA4D,CAAA,qnBCX5D,SAAAC,EAAAC,EAAAC,EAAA,+MCGD,MAAA/B,EAAAiB,EAAA,qsBCFA,MAAAjB,EAAAiB,EAAA"}

package/tabsView/tabsView.js

@@ -1,17 +1,17 @@
-import { provide as N, inject as O, watch as B, toRef as L, reactive as C, computed as S, defineComponent as w, openBlock as i, createBlock as d, resolveDynamicComponent as D, normalizeClass as h, unref as s, withCtx as m, renderSlot as u, createElementBlock as c, createCommentVNode as V, useSlots as E, createElementVNode as _, toDisplayString as M, Fragment as K, createTextVNode as j, watchEffect as A, createVNode as F } from "vue";
-import { PopupListItem as P, Popup as J } from "../popup/popup.js";
-import { _ as b, C as z } from "../.chunks/forms-64632f73.es.js";
+import { insertToPage as N } from "../utils/css.js";
+import { provide as B, inject as L, watch as C, toRef as D, reactive as E, computed as y, defineComponent as w, openBlock as i, createBlock as d, resolveDynamicComponent as F, normalizeClass as h, unref as s, withCtx as _, renderSlot as u, createElementBlock as c, createCommentVNode as V, useSlots as K, createElementVNode as m, toDisplayString as M, Fragment as j, createTextVNode as A, watchEffect as J, createVNode as z } from "vue";
+import { PopupListItem as P, Popup as R } from "../popup/popup.js";
+import { _ as b, C as U } from "../.chunks/forms-9516aa6c.es.js";
 import "../popup/worker.js";
-import("../core/core.js").then((t) => {
-  const e = ["../assets/tabsView.css"].map((o) => import.meta.resolve(o));
-  t.default.Page.addCss(e);
-});
-const R = (t, e) => (N(t, e), e), q = (t) => {
-  const e = O(t);
+import "../utils/dom.js";
+const O = ["../assets/tabsView.css"].map((t) => import.meta.resolve(t));
+await N(O);
+const q = (t, e) => (B(t, e), e), G = (t) => {
+  const e = L(t);
   if (!e)
     throw Error("Попытка использовать tabsView state до его инициализации");
   return e;
-}, k = (t, e) => `top:tabsView:${String(t)}:${e}`, G = (t, e) => {
+}, k = (t, e) => `top:tabsView:${String(t)}:${e}`, H = (t, e) => {
   if (!e.key)
     return;
   const o = k(t, e.key);
@@ -21,24 +21,24 @@ const R = (t, e) => (N(t, e), e), q = (t) => {
   } catch {
     console.warn(new Error(`В localStorage[${o}] не корректный json`));
   }
-}, H = (t, e) => {
+}, Q = (t, e) => {
   if (!e.key)
     return;
   const o = k(t, e.key);
-  B(L(e, t), () => {
+  C(D(e, t), () => {
     localStorage.setItem(o, JSON.stringify(e[t]));
   }, { immediate: !0 });
 }, f = {
-  init: R,
-  use: q,
-  loadLocalStorge: G,
-  addSaverLocalStorge: H
-}, T = Symbol(), Q = (t, e) => {
-  const o = C({
+  init: q,
+  use: G,
+  loadLocalStorge: H,
+  addSaverLocalStorge: Q
+}, T = Symbol(), W = (t, e) => {
+  const o = E({
     key: t.keyForSaveState,
     showMenuInPopup: t.showMenuInPopup,
     isShort: !1,
-    activeItemName: S({
+    activeItemName: y({
       get() {
         return t.modelValue;
       },
@@ -47,16 +47,16 @@ const R = (t, e) => (N(t, e), e), q = (t) => {
       }
     })
   });
-  return U(t, o), f.init(T, o);
-}, y = () => f.use(T), U = (t, e) => {
+  return X(t, o), f.init(T, o);
+}, S = () => f.use(T), X = (t, e) => {
   if (t.isShortable) {
     const o = "isShort";
     f.loadLocalStorge(o, e), f.addSaverLocalStorge(o, e);
   }
-}, W = {
+}, Y = {
   key: 1,
   class: "top-ellipsis"
-}, X = /* @__PURE__ */ w({
+}, Z = /* @__PURE__ */ w({
   __name: "menuItem",
   props: {
     name: {},
@@ -65,8 +65,8 @@ const R = (t, e) => (N(t, e), e), q = (t) => {
     disabled: { type: Boolean }
   },
   setup(t) {
-    const e = t, o = S(() => n.showMenuInPopup ? P : e.href ? "a" : "button"), n = y();
-    return (a, l) => (i(), d(D(o.value), {
+    const e = t, o = y(() => n.showMenuInPopup ? P : e.href ? "a" : "button"), n = S();
+    return (a, l) => (i(), d(F(o.value), {
       class: h({
         "top-tabsView_menuItem": !s(n).showMenuInPopup,
         "top-active": a.name && s(n).activeItemName === a.name,
@@ -77,32 +77,32 @@ const R = (t, e) => (N(t, e), e), q = (t) => {
       disabled: a.disabled || void 0,
       onClick: l[0] || (l[0] = (p) => a.name ? s(n).activeItemName = a.name : null)
     }, {
-      default: m(() => [
-        s(n).showMenuInPopup ? u(a.$slots, "default", { key: 0 }) : a.$slots.default && !s(n).isShort ? (i(), c("span", W, [
+      default: _(() => [
+        s(n).showMenuInPopup ? u(a.$slots, "default", { key: 0 }) : a.$slots.default && !s(n).isShort ? (i(), c("span", Y, [
           u(a.$slots, "default")
         ])) : V("", !0)
       ]),
       _: 3
     }, 8, ["class", "href", "data-top-icon", "disabled"]));
   }
-}), Y = {
+}), x = {
   "top-tabsView_menuItem": "top-tabsView_menuItem",
   "top-active": "top-active",
   "top-forms-option": "top-forms-option",
   "top-formsCaption": "top-formsCaption",
   "top-disabled": "top-disabled"
-}, Z = {
-  $style: Y
-}, g = /* @__PURE__ */ b(X, [["__cssModules", Z]]), x = { class: "top-tabsView_menuOpener" }, ee = ["data-top-icon"], te = { class: "top-ellipsis" }, oe = /* @__PURE__ */ _("div", {
+}, ee = {
+  $style: x
+}, g = /* @__PURE__ */ b(Z, [["__cssModules", ee]]), te = { class: "top-tabsView_menuOpener" }, oe = ["data-top-icon"], se = { class: "top-ellipsis" }, ne = /* @__PURE__ */ m("div", {
   class: "top-tabsView_menuOpenerIcon",
   "data-top-icon": ""
-}, null, -1), se = { class: "top-tabsView_menuList" }, ne = /* @__PURE__ */ w({
+}, null, -1), ae = { class: "top-tabsView_menuList" }, ie = { class: "top-tabsView_menuFooter" }, pe = /* @__PURE__ */ w({
   __name: "menu",
   props: {
     isShortable: { type: Boolean }
   },
   setup(t) {
-    const e = y(), o = E(), n = /* @__PURE__ */ new Map(), a = S(() => {
+    const e = S(), o = K(), n = /* @__PURE__ */ new Map(), a = y(() => {
       let p = n.get(e.activeItemName);
       return p || (l(), n.get(e.activeItemName) || null);
     }), l = () => {
@@ -110,14 +110,14 @@ const R = (t, e) => (N(t, e), e), q = (t) => {
         return;
       const p = o.default().find((r) => r.key === "_menu");
       p && p.children.forEach((r) => {
-        var I, $;
+        var v, $;
         if (r.type.__name !== g.__name || !r.props.name)
           return;
-        const v = {
-          title: (($ = (I = r.children).default) == null ? void 0 : $.call(I)[0].children).trim(),
+        const I = {
+          title: (($ = (v = r.children).default) == null ? void 0 : $.call(v)[0].children).trim(),
           icon: r.props.icon
         };
-        n.set(r.props.name, v);
+        n.set(r.props.name, I);
       });
     };
     return (p, r) => (i(), c("div", {
@@ -128,41 +128,43 @@ const R = (t, e) => (N(t, e), e), q = (t) => {
         "top-tabsView_menu-short": s(e).isShort && !s(e).showMenuInPopup
       })
     }, [
-      s(e).showMenuInPopup ? (i(), d(s(J), { key: 0 }, {
-        opener: m(() => [
-          _("div", x, [
+      s(e).showMenuInPopup ? (i(), d(s(R), { key: 0 }, {
+        opener: _(() => [
+          m("div", te, [
             a.value ? (i(), c("div", {
               key: 0,
               class: "top-tabsView_menuOpenerActiveItem",
               "data-top-icon": a.value.icon
             }, [
-              _("span", te, M(a.value.title), 1)
-            ], 8, ee)) : V("", !0),
-            oe
+              m("span", se, M(a.value.title), 1)
+            ], 8, oe)) : V("", !0),
+            ne
           ])
         ]),
-        contentList: m(() => [
+        contentList: _(() => [
           u(p.$slots, "default")
         ]),
         _: 3
-      })) : (i(), c(K, { key: 1 }, [
-        _("div", se, [
+      })) : (i(), c(j, { key: 1 }, [
+        m("div", ae, [
           u(p.$slots, "default")
         ]),
-        p.isShortable ? (i(), d(g, {
-          key: 0,
-          icon: s(e).isShort ? "" : "",
-          onClick: r[0] || (r[0] = (v) => s(e).isShort = !s(e).isShort)
-        }, {
-          default: m(() => [
-            j(M(s(e).isShort ? "" : "Свернуть") + " ", 1)
-          ]),
-          _: 1
-        }, 8, ["icon"])) : V("", !0)
+        m("div", ie, [
+          p.isShortable ? (i(), d(g, {
+            key: 0,
+            icon: s(e).isShort ? "" : "",
+            onClick: r[0] || (r[0] = (I) => s(e).isShort = !s(e).isShort)
+          }, {
+            default: _(() => [
+              A(M(s(e).isShort ? "" : "Свернуть") + " ", 1)
+            ]),
+            _: 1
+          }, 8, ["icon"])) : V("", !0)
+        ])
       ], 64))
     ], 2));
   }
-}), ae = {
+}), re = {
   "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",
@@ -170,10 +172,12 @@ const R = (t, e) => (N(t, e), e), q = (t) => {
   "top-tabsView_menuOpener": "top-tabsView_menuOpener",
   "top-tabsView_menuOpenerIcon": "top-tabsView_menuOpenerIcon",
   "top-tabsView_menuOpenerActiveItem": "top-tabsView_menuOpenerActiveItem",
-  "top-tabsView_menuList": "top-tabsView_menuList"
-}, ie = {
-  $style: ae
-}, pe = /* @__PURE__ */ b(ne, [["__cssModules", ie]]), re = { class: "top-tabsView_contents" }, ue = /* @__PURE__ */ w({
+  "top-tabsView_menuList": "top-tabsView_menuList",
+  "top-tabsView_menuFooter": "top-tabsView_menuFooter",
+  "top-tabsView_menuItem": "top-tabsView_menuItem"
+}, ue = {
+  $style: re
+}, le = /* @__PURE__ */ b(pe, [["__cssModules", ue]]), ce = { class: "top-tabsView_contents" }, me = /* @__PURE__ */ w({
   __name: "tabsView",
   props: {
     modelValue: {},
@@ -183,56 +187,56 @@ const R = (t, e) => (N(t, e), e), q = (t) => {
   },
   emits: ["update:modelValue"],
   setup(t, { emit: e }) {
-    const o = t, a = Q(o, e);
-    return A(() => {
-      a.showMenuInPopup = o.showMenuInPopup ?? z.state.isMobile;
+    const o = t, a = W(o, e);
+    return J(() => {
+      a.showMenuInPopup = o.showMenuInPopup ?? U.state.isMobile;
     }), (l, p) => (i(), c("div", {
       class: h({
         "top-tabsView": !0,
         "top-tabsView-inPopup": s(a).showMenuInPopup
       })
     }, [
-      F(pe, { isShortable: l.isShortable }, {
-        default: m(() => [
+      z(le, { isShortable: l.isShortable }, {
+        default: _(() => [
           u(l.$slots, "menu")
         ]),
         _: 3
       }, 8, ["isShortable"]),
-      _("div", re, [
+      m("div", ce, [
         u(l.$slots, "contents")
       ])
     ], 2));
   }
-}), le = {
+}), _e = {
   "top-tabsView": "top-tabsView",
   "top-tabsView-inPopup": "top-tabsView-inPopup",
   "top-tabsView_contents": "top-tabsView_contents"
-}, ce = {
-  $style: le
-}, ge = /* @__PURE__ */ b(ue, [["__cssModules", ce]]), me = {
+}, de = {
+  $style: _e
+}, Oe = /* @__PURE__ */ b(me, [["__cssModules", de]]), we = {
   "top-tabsView_menuDelimeter": "top-tabsView_menuDelimeter"
-}, _e = {}, de = { class: "top-tabsView_menuDelimeter" };
-function we(t, e) {
-  return i(), c("div", de);
+}, be = {}, Ve = { class: "top-tabsView_menuDelimeter" };
+function fe(t, e) {
+  return i(), c("div", Ve);
 }
-const be = {
-  $style: me
-}, Ve = /* @__PURE__ */ b(_e, [["render", we], ["__cssModules", be]]), fe = /* @__PURE__ */ w({
+const he = {
+  $style: we
+}, Se = /* @__PURE__ */ b(be, [["render", fe], ["__cssModules", he]]), ye = /* @__PURE__ */ w({
   __name: "menuTitle",
   props: {
     isSubtitle: { type: Boolean }
   },
   setup(t) {
-    const e = y();
+    const e = S();
     return (o, n) => s(e).showMenuInPopup ? (i(), d(s(P), {
       key: 0,
       type: "title"
     }, {
-      default: m(() => [
+      default: _(() => [
         u(o.$slots, "default")
       ]),
       _: 3
-    })) : s(e).isShort ? (i(), d(Ve, { key: 1 })) : (i(), c("div", {
+    })) : s(e).isShort ? (i(), d(Se, { key: 1 })) : (i(), c("div", {
       key: 2,
       class: h({
         "top-tabsView_menuTitle": !0,
@@ -242,30 +246,30 @@ const be = {
       u(o.$slots, "default")
     ], 2));
   }
-}), he = {
+}), Ie = {
   "top-tabsView_menuTitle": "top-tabsView_menuTitle",
   "top-tabsView_menuTitle-subtitle": "top-tabsView_menuTitle-subtitle"
-}, ye = {
-  $style: he
-}, Pe = /* @__PURE__ */ b(fe, [["__cssModules", ye]]), Se = {
+}, ve = {
+  $style: Ie
+}, Be = /* @__PURE__ */ b(ye, [["__cssModules", ve]]), $e = {
   key: 0,
   class: "top-tabsView_content"
-}, ke = /* @__PURE__ */ w({
+}, Le = /* @__PURE__ */ w({
   __name: "content",
   props: {
     name: {}
   },
   setup(t) {
-    const e = y();
-    return (o, n) => s(e).activeItemName === o.name ? (i(), c("div", Se, [
+    const e = S();
+    return (o, n) => s(e).activeItemName === o.name ? (i(), c("div", $e, [
       u(o.$slots, "default")
     ])) : V("", !0);
   }
 });
 export {
-  ge as TabsView,
-  ke as TabsViewContent,
+  Oe as TabsView,
+  Le as TabsViewContent,
   g as TabsViewMenuItem,
-  Pe as TabsViewMenuTitle
+  Be as TabsViewMenuTitle
 };
 //# sourceMappingURL=tabsView.js.map