@topvisor/ui 0.9.7 → 0.9.8

package/src/components/tabsView/tabsView/tabsView.stories.d.ts

@@ -7,11 +7,15 @@ declare const meta: {
             };
             showMenuInPopup: {
                 type: import("vue").PropType<boolean>;
+                default: undefined;
             };
             isShortable: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            pageMod: {
+                type: import("vue").PropType<boolean>;
+            };
             keyForSaveState: {
                 type: import("vue").PropType<string>;
             };
@@ -26,17 +30,22 @@ declare const meta: {
             };
             showMenuInPopup: {
                 type: import("vue").PropType<boolean>;
+                default: undefined;
             };
             isShortable: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            pageMod: {
+                type: import("vue").PropType<boolean>;
+            };
             keyForSaveState: {
                 type: import("vue").PropType<string>;
             };
         }>> & {
             "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         }, {
+            showMenuInPopup: boolean;
             isShortable: boolean;
         }, true, {}, {}, {
             P: {};
@@ -52,17 +61,22 @@ declare const meta: {
             };
             showMenuInPopup: {
                 type: import("vue").PropType<boolean>;
+                default: undefined;
             };
             isShortable: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            pageMod: {
+                type: import("vue").PropType<boolean>;
+            };
             keyForSaveState: {
                 type: import("vue").PropType<string>;
             };
         }>> & {
             "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         }, {}, {}, {}, {}, {
+            showMenuInPopup: boolean;
             isShortable: boolean;
         }>;
         __isFragment?: undefined;
@@ -75,11 +89,15 @@ declare const meta: {
         };
         showMenuInPopup: {
             type: import("vue").PropType<boolean>;
+            default: undefined;
         };
         isShortable: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        pageMod: {
+            type: import("vue").PropType<boolean>;
+        };
         keyForSaveState: {
             type: import("vue").PropType<string>;
         };
@@ -88,11 +106,11 @@ declare const meta: {
     }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         "update:modelValue": (value: string) => void;
     }, string, {
+        showMenuInPopup: boolean;
         isShortable: boolean;
     }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             menu?(_: {}): any;
-            contents?(_: {}): any;
         };
     });
     tags: string[];
@@ -121,11 +139,15 @@ export declare const Overview: {
                     };
                     showMenuInPopup: {
                         type: import("vue").PropType<boolean>;
+                        default: undefined;
                     };
                     isShortable: {
                         type: import("vue").PropType<boolean>;
                         default: boolean;
                     };
+                    pageMod: {
+                        type: import("vue").PropType<boolean>;
+                    };
                     keyForSaveState: {
                         type: import("vue").PropType<string>;
                     };
@@ -140,17 +162,22 @@ export declare const Overview: {
                     };
                     showMenuInPopup: {
                         type: import("vue").PropType<boolean>;
+                        default: undefined;
                     };
                     isShortable: {
                         type: import("vue").PropType<boolean>;
                         default: boolean;
                     };
+                    pageMod: {
+                        type: import("vue").PropType<boolean>;
+                    };
                     keyForSaveState: {
                         type: import("vue").PropType<string>;
                     };
                 }>> & {
                     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
                 }, {
+                    showMenuInPopup: boolean;
                     isShortable: boolean;
                 }, true, {}, {}, {
                     P: {};
@@ -166,17 +193,22 @@ export declare const Overview: {
                     };
                     showMenuInPopup: {
                         type: import("vue").PropType<boolean>;
+                        default: undefined;
                     };
                     isShortable: {
                         type: import("vue").PropType<boolean>;
                         default: boolean;
                     };
+                    pageMod: {
+                        type: import("vue").PropType<boolean>;
+                    };
                     keyForSaveState: {
                         type: import("vue").PropType<string>;
                     };
                 }>> & {
                     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
                 }, {}, {}, {}, {}, {
+                    showMenuInPopup: boolean;
                     isShortable: boolean;
                 }>;
                 __isFragment?: undefined;
@@ -189,11 +221,15 @@ export declare const Overview: {
                 };
                 showMenuInPopup: {
                     type: import("vue").PropType<boolean>;
+                    default: undefined;
                 };
                 isShortable: {
                     type: import("vue").PropType<boolean>;
                     default: boolean;
                 };
+                pageMod: {
+                    type: import("vue").PropType<boolean>;
+                };
                 keyForSaveState: {
                     type: import("vue").PropType<string>;
                 };
@@ -202,41 +238,60 @@ export declare const Overview: {
             }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                 "update:modelValue": (value: string) => void;
             }, string, {
+                showMenuInPopup: boolean;
                 isShortable: boolean;
             }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
                 $slots: {
                     menu?(_: {}): any;
-                    contents?(_: {}): any;
                 };
             });
             TabsViewMenuItem: {
                 new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
-                    name: {
+                    icon: {
                         type: import("vue").PropType<string>;
                     };
-                    href: {
+                    component: {
+                        type: import("vue").PropType<import("vue").Component>;
+                        default: undefined;
+                    };
+                    name: {
                         type: import("vue").PropType<string>;
                     };
-                    icon: {
+                    href: {
                         type: import("vue").PropType<string>;
                     };
                     disabled: {
                         type: import("vue").PropType<boolean>;
                     };
+                    scrollable: {
+                        type: import("vue").PropType<boolean>;
+                        default: boolean;
+                    };
                 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-                    name: {
+                    icon: {
                         type: import("vue").PropType<string>;
                     };
-                    href: {
+                    component: {
+                        type: import("vue").PropType<import("vue").Component>;
+                        default: undefined;
+                    };
+                    name: {
                         type: import("vue").PropType<string>;
                     };
-                    icon: {
+                    href: {
                         type: import("vue").PropType<string>;
                     };
                     disabled: {
                         type: import("vue").PropType<boolean>;
                     };
-                }>>, {}, true, {}, {}, {
+                    scrollable: {
+                        type: import("vue").PropType<boolean>;
+                        default: boolean;
+                    };
+                }>>, {
+                    component: import("vue").Component;
+                    scrollable: boolean;
+                }, true, {}, {}, {
                     P: {};
                     B: {};
                     D: {};
@@ -244,36 +299,58 @@ export declare const Overview: {
                     M: {};
                     Defaults: {};
                 }, Readonly<import("vue").ExtractPropTypes<{
-                    name: {
+                    icon: {
                         type: import("vue").PropType<string>;
                     };
-                    href: {
+                    component: {
+                        type: import("vue").PropType<import("vue").Component>;
+                        default: undefined;
+                    };
+                    name: {
                         type: import("vue").PropType<string>;
                     };
-                    icon: {
+                    href: {
                         type: import("vue").PropType<string>;
                     };
                     disabled: {
                         type: import("vue").PropType<boolean>;
                     };
-                }>>, {}, {}, {}, {}, {}>;
+                    scrollable: {
+                        type: import("vue").PropType<boolean>;
+                        default: boolean;
+                    };
+                }>>, {}, {}, {}, {}, {
+                    component: import("vue").Component;
+                    scrollable: boolean;
+                }>;
                 __isFragment?: undefined;
                 __isTeleport?: undefined;
                 __isSuspense?: undefined;
             } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-                name: {
+                icon: {
                     type: import("vue").PropType<string>;
                 };
-                href: {
+                component: {
+                    type: import("vue").PropType<import("vue").Component>;
+                    default: undefined;
+                };
+                name: {
                     type: import("vue").PropType<string>;
                 };
-                icon: {
+                href: {
                     type: import("vue").PropType<string>;
                 };
                 disabled: {
                     type: import("vue").PropType<boolean>;
                 };
-            }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                scrollable: {
+                    type: import("vue").PropType<boolean>;
+                    default: boolean;
+                };
+            }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+                component: import("vue").Component;
+                scrollable: boolean;
+            }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
                 $slots: {
                     default?(_: {}): any;
                 };
@@ -311,46 +388,10 @@ export declare const Overview: {
                     default?(_: {}): any;
                 };
             });
-            TabsViewContent: {
-                new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
-                    name: {
-                        type: import("vue").PropType<string>;
-                        required: true;
-                    };
-                }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-                    name: {
-                        type: import("vue").PropType<string>;
-                        required: true;
-                    };
-                }>>, {}, true, {}, {}, {
-                    P: {};
-                    B: {};
-                    D: {};
-                    C: {};
-                    M: {};
-                    Defaults: {};
-                }, Readonly<import("vue").ExtractPropTypes<{
-                    name: {
-                        type: import("vue").PropType<string>;
-                        required: true;
-                    };
-                }>>, {}, {}, {}, {}, {}>;
-                __isFragment?: undefined;
-                __isTeleport?: undefined;
-                __isSuspense?: undefined;
-            } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-                name: {
-                    type: import("vue").PropType<string>;
-                    required: true;
-                };
-            }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-                $slots: {
-                    default?(_: {}): any;
-                };
-            });
         };
         setup(this: void): {
             args: any;
+            componentByName: Map<any, any>;
         };
         template: string;
     };

package/src/components/tabsView/tabsView/tabsView.vue.d.ts

@@ -1,17 +1,19 @@
 import type { Props } from './tabsView';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    showMenuInPopup: undefined;
     isShortable: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    showMenuInPopup: undefined;
     isShortable: boolean;
 }>>> & {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }, {
+    showMenuInPopup: boolean;
     isShortable: boolean;
 }, {}>, {
     menu?(_: {}): any;
-    contents?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/src/components/tabsView/tabsView.d.ts

@@ -1,4 +1,3 @@
 export { default as TabsView } from './tabsView/tabsView.vue';
 export { default as TabsViewMenuItem } from './tabsView/menuItem.vue';
 export { default as TabsViewMenuTitle } from './tabsView/menuTitle.vue';
-export { default as TabsViewContent } from './tabsView/content.vue';

package/tabs/tabs.amd.js

@@ -1,2 +1,2 @@
-define(["require","exports","vue","../.chunks/forms-hIalWiGK.amd","../require/css.amd!../assets/tabs.css"],function(k,s,e,o){"use strict";if(typeof e>"u")var e=window.Vue;const l={class:e.normalizeClass({"top-tabs":!0})},d={key:0,class:"top-tabs_header"},c={class:"top-tabs_contents"},r=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",d,[e.renderSlot(t.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",c,[e.renderSlot(t.$slots,"contents")])]))}}),b={$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"}},p=o._export_sfc(r,[["__cssModules",b]]),_=["id","name","value","checked","disabled"],i=["for"],u=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,i)],64))}}),m={$style:{"top-tabs_tabLabel":"top-tabs_tabLabel","top-tabs_tabInput":"top-tabs_tabInput","top-disabled":"top-disabled"}},f=o._export_sfc(u,[["__cssModules",m]]),$=["data-tabs-name"],h=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,$))}}),y={$style:{"top-tabs_content":"top-tabs_content"}},v=o._export_sfc(h,[["__cssModules",y]]);s.Tabs=p,s.TabsContent=v,s.TabsTab=f,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+define(["require","exports","vue","../.chunks/forms-AZXCfF-R.amd","../require/css.amd!../assets/tabs.css"],function(k,s,e,o){"use strict";if(typeof e>"u")var e=window.Vue;const l={class:e.normalizeClass({"top-tabs":!0})},d={key:0,class:"top-tabs_header"},c={class:"top-tabs_contents"},r=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",d,[e.renderSlot(t.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",c,[e.renderSlot(t.$slots,"contents")])]))}}),b={$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"}},p=o._export_sfc(r,[["__cssModules",b]]),_=["id","name","value","checked","disabled"],i=["for"],u=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,i)],64))}}),m={$style:{"top-tabs_tabLabel":"top-tabs_tabLabel","top-tabs_tabInput":"top-tabs_tabInput","top-disabled":"top-disabled"}},f=o._export_sfc(u,[["__cssModules",m]]),$=["data-tabs-name"],h=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,$))}}),y={$style:{"top-tabs_content":"top-tabs_content"}},v=o._export_sfc(h,[["__cssModules",y]]);s.Tabs=p,s.TabsContent=v,s.TabsTab=f,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=tabs.amd.js.map

package/tabs/tabs.js

@@ -1,6 +1,6 @@
 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-dneLtREE.es.js";
+import { _ as p } from "../.chunks/forms-iL1swNCF.es.js";
 const r = ["../assets/tabs.css"].map((e) => import.meta.resolve(e));
 await c(r);
 const u = {

package/tabsView/tabsView.amd.js

@@ -1,2 +1,2 @@
-define(["require","exports","vue","../.chunks/listItem.vue_vue_type_script_setup_true_lang-bLJ0dcPn.amd","../.chunks/forms-hIalWiGK.amd","../popup/worker.amd","../utils/dom.amd","../require/css.amd!../assets/tabsView.css"],function(Y,u,e,d,c,Z,x){"use strict";if(typeof e>"u")var e=window.Vue;const S=(o,t)=>(e.provide(o,t),t),y=o=>{const t=e.inject(o);if(!t)throw Error("Попытка использовать tabsView state до его инициализации");return t},w=(o,t)=>`top:tabsView:${String(o)}:${t}`,p={init:S,use:y,loadLocalStorge:(o,t)=>{if(!t.key)return;const n=w(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=w(o,t.key);e.watch(e.toRef(t,o),()=>{localStorage.setItem(n,JSON.stringify(t[o]))},{immediate:!0})}},f=Symbol(),k=(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 v(o,n),p.init(f,n)},m=()=>p.use(f),v=(o,t)=>{if(o.isShortable){const n="isShort";p.loadLocalStorge(n,t),p.addSaverLocalStorge(n,t)}},$={key:1,class:"top-ellipsis"},I=e.defineComponent({__name:"menuItem",props:{name:{},href:{},icon:{},disabled:{type:Boolean}},setup(o){const t=o,n=e.computed(()=>s.showMenuInPopup?d._sfc_main$2:t.href?"a":"button"),s=m();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",$,[e.renderSlot(a.$slots,"default")])):e.createCommentVNode("",!0)]),_:3},8,["class","href","data-top-icon","disabled"]))}}),M={$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(I,[["__cssModules",M]]),B={class:"top-tabsView_menuOpener"},g=["data-top-icon"],P={class:"top-ellipsis"},C=e.createElementVNode("div",{class:"top-tabsView_menuOpenerIcon","data-top-icon":""},null,-1),N={class:"top-tabsView_menuList"},E={class:"top-tabsView_menuFooter"},T=e.defineComponent({__name:"menu",props:{isShortable:{type:Boolean}},setup(o){const t=m(),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 V,h;if(r.type.__name!==_.__name||!r.props.name)return;const b={title:((h=(V=r.children).default)==null?void 0:h.call(V)[0].children).trim(),icon:r.props.icon};s.set(r.props.name,b)})};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(d._sfc_main),{key:0},{opener:e.withCtx(()=>[e.createElementVNode("div",B,[a.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"top-tabsView_menuOpenerActiveItem","data-top-icon":a.value.icon},[e.createElementVNode("span",P,e.toDisplayString(a.value.title),1)],8,g)):e.createCommentVNode("",!0),C])]),contentList:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",N,[e.renderSlot(i.$slots,"default")]),e.createElementVNode("div",E,[i.isShortable?(e.openBlock(),e.createBlock(_,{key:0,icon:e.unref(t).isShort?"":"",onClick:r[0]||(r[0]=b=>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","top-tabsView_menuFooter":"top-tabsView_menuFooter","top-tabsView_menuItem":"top-tabsView_menuItem"}},L=c._export_sfc(T,[["__cssModules",O]]),D={class:"top-tabsView_contents"},F=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=k(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(L,{isShortable:l.isShortable},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"menu")]),_:3},8,["isShortable"]),e.createElementVNode("div",D,[e.renderSlot(l.$slots,"contents")])],2))}}),j={$style:{"top-tabsView":"top-tabsView","top-tabsView-inPopup":"top-tabsView-inPopup","top-tabsView_contents":"top-tabsView_contents"}},z=c._export_sfc(F,[["__cssModules",j]]),K={"top-tabsView_menuDelimeter":"top-tabsView_menuDelimeter"},q={},A={class:"top-tabsView_menuDelimeter"};function J(o,t){return e.openBlock(),e.createElementBlock("div",A)}const R={$style:K},G=c._export_sfc(q,[["render",J],["__cssModules",R]]),H=e.defineComponent({__name:"menuTitle",props:{isSubtitle:{type:Boolean}},setup(o){const t=m();return(n,s)=>e.unref(t).showMenuInPopup?(e.openBlock(),e.createBlock(e.unref(d._sfc_main$2),{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"}},U=c._export_sfc(H,[["__cssModules",Q]]),W={key:0,class:"top-tabsView_content"},X=e.defineComponent({__name:"content",props:{name:{}},setup(o){const t=m();return(n,s)=>e.unref(t).activeItemName===n.name?(e.openBlock(),e.createElementBlock("div",W,[e.renderSlot(n.$slots,"default")])):e.createCommentVNode("",!0)}});u.TabsView=z,u.TabsViewContent=X,u.TabsViewMenuItem=_,u.TabsViewMenuTitle=U,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+define(["require","exports","vue","../.chunks/listItem.vue_vue_type_script_setup_true_lang-cBt2MlyL.amd","../.chunks/forms-AZXCfF-R.amd","../popup/worker.amd","../utils/dom.amd","../require/css.amd!../assets/tabsView.css"],function(Q,u,e,d,c,W,X){"use strict";if(typeof e>"u")var e=window.Vue;const S=(o,t)=>(e.provide(o,t),t),y=o=>{const t=e.inject(o);if(!t)throw Error("Попытка использовать tabsView state до его инициализации");return t},w=(o,t)=>`top:tabsView:${String(o)}:${t}`,m={init:S,use:y,loadLocalStorge:(o,t)=>{if(!t.key)return;const n=w(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=w(o,t.key);e.watch(e.toRef(t,o),()=>{localStorage.setItem(n,JSON.stringify(t[o]))},{immediate:!0})}},f=Symbol(),v=(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)}}),component:void 0,scrollable:!0});return k(o,n),m.init(f,n)},_=()=>m.use(f),k=(o,t)=>{if(o.isShortable){const n="isShort";m.loadLocalStorge(n,t),m.addSaverLocalStorge(n,t)}},M={key:1,class:"top-ellipsis"},I=e.defineComponent({__name:"menuItem",props:{name:{},href:{},icon:{},disabled:{type:Boolean},component:{default:void 0},scrollable:{type:Boolean,default:!0}},setup(o){const t=o,n=e.computed(()=>s.showMenuInPopup?d._sfc_main$2:t.href?"a":"button"),s=_();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]=r=>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"]))}}),$={$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"}},p=c._export_sfc(I,[["__cssModules",$]]),g={class:"top-tabsView_menuOpener"},B=["data-top-icon"],P={class:"top-ellipsis"},N=e.createElementVNode("div",{class:"top-tabsView_menuOpenerIcon","data-top-icon":""},null,-1),E={class:"top-tabsView_menuList"},T={class:"top-tabsView_menuFooter"},C=e.defineComponent({__name:"menu",props:{isShortable:{type:Boolean}},setup(o){const t=_(),n=e.useSlots(),s=new Map,a=()=>{if(!n.default)return;const r=n.default().find(i=>i.key==="_menu");r&&r.children.forEach(i=>{var V,h;if(i.type.__name!==p.__name||!i.props.name||i.props.disabled)return;const b={title:((h=(V=i.children).default)==null?void 0:h.call(V)[0].children).trim(),icon:i.props.icon,component:i.props.component?e.markRaw(i.props.component):p.props.component.default,scrollable:i.props.scrollable??p.props.scrollable.default};s.set(i.props.name,b)})},l=e.ref(null);return e.watch(()=>t.activeItemName,()=>{if(s.size===0&&a(),s.size===0){t.activeItemName="";return}if(l.value=s.get(t.activeItemName)??null,!l.value){t.activeItemName=s.keys().next().value;return}t.scrollable=l.value.scrollable,t.component=l.value.component,l.value&&!t.component&&console.warn(`Компонент вкладки ${t.activeItemName} не найден. Добавьте props.component для пункта меню ${t.activeItemName}.`)},{immediate:!0}),(r,i)=>(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(d._sfc_main),{key:0},{opener:e.withCtx(()=>[e.createElementVNode("div",g,[l.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"top-tabsView_menuOpenerActiveItem","data-top-icon":l.value.icon},[e.createElementVNode("span",P,e.toDisplayString(l.value.title),1)],8,B)):e.createCommentVNode("",!0),N])]),contentList:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",E,[e.renderSlot(r.$slots,"default")]),e.createElementVNode("div",T,[r.isShortable?(e.openBlock(),e.createBlock(p,{key:0,icon:e.unref(t).isShort?"":"",onClick:i[0]||(i[0]=b=>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))}}),L={$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"}},O=c._export_sfc(C,[["__cssModules",L]]),D=e.defineComponent({__name:"tabsView",props:{modelValue:{},pageMod:{type:Boolean},showMenuInPopup:{type:Boolean,default:void 0},isShortable:{type:Boolean,default:!1},keyForSaveState:{}},emits:["update:modelValue"],setup(o,{emit:t}){const n=o,a=v(n,t);e.watchEffect(()=>{a.showMenuInPopup=n.showMenuInPopup??c.Core.state.isMobile});const l=(r=!1)=>{document.documentElement.classList.toggle("top-hasTabsViewPageMod",r)};return e.watch(()=>n.pageMod,()=>l(n.pageMod),{immediate:!0}),e.onUnmounted(()=>{l()}),(r,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-tabsView":!0,"top-tabsView-pageMod":r.pageMod&&!e.unref(a).showMenuInPopup,"top-tabsView-inPopup":e.unref(a).showMenuInPopup})},[e.createVNode(O,{isShortable:r.isShortable},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"menu")]),_:3},8,["isShortable"]),e.createElementVNode("div",{class:e.normalizeClass({"top-tabsView_contents":!0,"top-tabsView_contents-noScrollable":!e.unref(a).scrollable})},[(e.openBlock(),e.createBlock(e.KeepAlive,null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a).component)))],1024))],2)],2))}}),z={$style:{"top-tabsView":"top-tabsView","top-tabsView-inPopup":"top-tabsView-inPopup","top-tabsView_contents":"top-tabsView_contents","top-tabsView_contents-noScrollable":"top-tabsView_contents-noScrollable"}},F=c._export_sfc(D,[["__cssModules",z]]),K={"top-tabsView_menuDelimeter":"top-tabsView_menuDelimeter"},j={},A={class:"top-tabsView_menuDelimeter"};function q(o,t){return e.openBlock(),e.createElementBlock("div",A)}const J={$style:K},R=c._export_sfc(j,[["render",q],["__cssModules",J]]),G=e.defineComponent({__name:"menuTitle",props:{isSubtitle:{type:Boolean}},setup(o){const t=_();return(n,s)=>e.unref(t).showMenuInPopup?(e.openBlock(),e.createBlock(e.unref(d._sfc_main$2),{key:0,type:"title"},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3})):e.unref(t).isShort?(e.openBlock(),e.createBlock(R,{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))}}),U={$style:{"top-tabsView_menuTitle":"top-tabsView_menuTitle","top-tabsView_menuTitle-subtitle":"top-tabsView_menuTitle-subtitle"}},H=c._export_sfc(G,[["__cssModules",U]]);u.TabsView=F,u.TabsViewMenuItem=p,u.TabsViewMenuTitle=H,Object.defineProperty(u,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<div class=\"top-tabsView_menuFooter\">\n\t\t\t\t<TabsViewMenuItem\n\t\t\t\t\tv-if=\"isShortable\"\n\t\t\t\t\t:icon=\"state.isShort ? '' : ''\"\n\t\t\t\t\t@click=\"state.isShort = !state.isShort\"\n\t\t\t\t>\n\t\t\t\t\t{{ state.isShort ? '' : 'Свернуть' }} <!--TODO: translate-->\n\t\t\t\t</TabsViewMenuItem>\n\t\t\t</div>\n\t\t</template>\n\t</div>\n</template>\n\n<style module>\n.top-tabsView_menu-inPopup_0 {\n\tbox-sizing: border-box;\n\twidth: var(--top-tabsView-menu-width);\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n}\n\n.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.top-tabsView_menuFooter{\n\tpadding: var(--top-padding-2);\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--top-gap-2);\n}\n\n.top-tabsView_menuList{\n\toverflow-y: auto;\n}\n\n.top-tabsView_menu-short .top-tabsView_menuFooter > .top-tabsView_menuItem{\n\t--top-icon-width: 100%;\n}\n</style>","<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: 220px;\n}\n\n.top-tabsView {\n\tbackground: var(--color-bg-2);\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.top-tabsView-inPopup {\n\tbackground: var(--color-bg-3);\n\tflex-direction: column;\n}\n\n.top-tabsView_contents {\n\tborder-radius: var(--top-radius-4);\n\tbackground: var(--color-bg-3);\n\tpadding: var(--top-padding-4);\n\tflex-grow: 1;\n\toverflow: auto;\n}\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:first-child,\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":"qSA0BA,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,iDAI0B,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,msBCFA,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"],"sourcesContent":["import { provide, inject, toRef, watch } from 'vue';\r\nimport type { InjectionKey } from 'vue';\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\tcomponent: undefined,\r\n\t\tscrollable: true,\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 } from './tabsView';\r\nimport { PopupListItem } from '../../popup/popup';\r\n\r\nconst props = withDefaults(defineProps<PropsMenuItem>(), {\r\n\tscrollable: true,\r\n\tcomponent: undefined,\r\n});\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 { type Ref, ref, watch, markRaw, useSlots } from 'vue';\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// сгенерировать словарь с 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\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 * - для вывода компонента активной вкладки (state.component)\r\n * - для установки state.scrollable\r\n */\r\nconst activeMenuItem: Ref<MenuItem | null> = ref(null);\r\n\r\n/**\r\n * Смена активной вкладки\r\n *\r\n * TODO: смена slot, например смена языка, требует повторного выполнения genMenuItemByName()\r\n */\r\nwatch(\r\n\t() => state.activeItemName,\r\n\t() => {\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\tstate.activeItemName = '';\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tactiveMenuItem.value = menuItemByName.get(state.activeItemName) ?? null;\r\n\r\n\t\tif (!activeMenuItem.value) {\r\n\t\t\tstate.activeItemName = menuItemByName.keys().next().value;\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tstate.scrollable = activeMenuItem.value.scrollable;\r\n\t\tstate.component = activeMenuItem.value.component;\r\n\r\n\t\tif (activeMenuItem.value && !state.component) {\r\n\t\t\tconsole.warn(`Компонент вкладки ${state.activeItemName} не найден. Добавьте props.component для пункта меню ${state.activeItemName}.`);\r\n\t\t}\r\n\t},\r\n\t{ immediate: true },\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/* режим отображение табов в основной области документа */\r\n.top-tabsView-pageMod .top-tabsView_menu {\r\n\theight: calc(var(--100vh) - var(--top-tabsView-top));\r\n\tposition: sticky;\r\n\ttop: 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-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 { onUnmounted, watch, 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\tshowMenuInPopup: undefined,\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\r\n/**\r\n * Установка или снятие глобального модификатора\r\n * @see props.pageMod\r\n * @param pageMod\r\n */\r\nconst setDocumentGlobalModificator = (pageMod = false) => {\r\n\tdocument.documentElement.classList.toggle('top-hasTabsViewPageMod', pageMod);\r\n};\r\n\r\nwatch(\r\n\t() => props.pageMod,\r\n\t() => setDocumentGlobalModificator(props.pageMod),\r\n\t{ immediate: true },\r\n);\r\n\r\nonUnmounted(() => {\r\n\tsetDocumentGlobalModificator();\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-pageMod': pageMod && !state.showMenuInPopup,\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\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-noScrollable': !state.scrollable,\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<keep-alive>\r\n\t\t\t\t<component :is=\"state.component\"/>\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}\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\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</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>"],"names":["init","injectionKey","state","vue","use","genStorageKey","stateName","stateKey","stateManager","localStorageValue","localStorageKey","initState","props","emit","value","initLocalStorge","__props","componentName","useState","slots","menuItemByName","component","item","subComponent","_b","_a","TabsViewMenuItem","menuItem","activeMenuItem","__emit","forms","setDocumentGlobalModificator","pageMod","_sfc_render","_ctx","_cache"],"mappings":"qSAyBA,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,GCvFOL,EAAA,OAAA,EAOMU,EAAA,CAAAC,EAAAC,IAAA,CACZ,MAAAX,EAAAC,EAAA,SAAA,CAA8B,IAAAS,EAAA,gBAClB,gBAAAA,EAAA,sDAGc,KAAA,CAEvB,OAAAA,EAAA,mBAGAC,EAAA,oBAAAC,CAAA,EACD,CAAA,gCAGW,CAAA,EAGb,OAAAC,EAAAH,EAAAV,CAAA,aAGD,QAMCM,EAAA,IAAAP,CAAA,EAQDc,EAAA,CAAAH,EAAAV,IAAA,CACC,GAAAU,EAAA,YAAA,CACC,MAAAN,EAAA,qQC3CF,MAAAM,EAAAI,EAKAC,EAAAd,EAAA,SAAA,IACCD,EAAA,iDAI0B,EAG3BA,EAAAgB,EAAA,stCCTA,MAAAhB,EAAAgB,EAAA,EAEAC,EAAAhB,EAAA,SAAA,EAGAiB,EAAA,IAAA,WAIC,GAAA,CAAAD,EAAA,QAAoB,OAEpB,MAAAE,EAAAF,EAAA,QAAA,EAAA,KAAAG,GAAAA,EAAA,MAAA,OAAA,oCAKC,6BAAA,CAAAC,EAAA,MAAA,MAAAA,EAAA,MAAA,SAA6D,gBAClC,QAAAC,GAAAC,EAAAF,EAAA,UAAA,UAAA,YAAAC,EAAA,KAAAC,GAAA,GAAA,UAAA,KAAA,EAC4C,KAAAF,EAAA,MAAA,wFAE6C,WAAAA,EAAA,MAAA,YAAAG,EAAA,MAAA,WAAA,OACpC,EAGhFN,EAAA,IAAAG,EAAA,MAAA,KAAAI,CAAA,CAAoD,CAAA,CACpD,EASFC,EAAAzB,EAAA,IAAA,IAAA,EAOA,OAAAA,EAAA,2BACa,IAAA,CAMX,GAJAiB,EAAA,OAAA,OAIAA,EAAA,OAAA,EAAA,CACClB,EAAA,eAAA,GAEA,OAKD,GAFA0B,EAAA,MAAAR,EAAA,IAAAlB,EAAA,cAAA,GAAA,KAEA,CAAA0B,EAAA,MAAA,CACC1B,EAAA,eAAAkB,EAAA,KAAA,EAAA,KAAA,EAAA,MAEA,4NASF,CAAA,UAAA,EAAA,CACkB,whECxEnB,MAAAR,EAAAI,QAKAa,sBAKC3B,EAAA,gBAAAU,EAAA,iBAAAkB,EAAA,KAAA,MAAA,QAA4D,CAAA,EAQ7D,MAAAC,EAAA,CAAAC,EAAA,KAAA,CACC,SAAA,gBAAA,UAAA,OAAA,yBAAAA,CAAA,CAA2E,EAG5E,OAAA7B,EAAA,oBACa,IAAA4B,EAAAnB,EAAA,OAAA,EACoC,CAAA,UAAA,EAAA,CAC9B,wBAIW,CAAA,o9BC/B7B,SAAAqB,EAAAC,EAAAC,EAAA,+MCGD,MAAAjC,EAAAgB,EAAA"}