@topvisor/ui 0.9.5 → 0.9.7

package/tabsView/tabsView.js

@@ -1,13 +1,13 @@
 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 { provide as B, inject as C, watch as L, 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 { b as P, _ as R } from "../.chunks/listItem.vue_vue_type_script_setup_true_lang-qWOlkuQ3.es.js";
+import { _ as b, C as U } from "../.chunks/forms-dneLtREE.es.js";
 import "../popup/worker.js";
 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);
+  const e = C(t);
   if (!e)
     throw Error("Попытка использовать tabsView state до его инициализации");
   return e;
@@ -25,7 +25,7 @@ const q = (t, e) => (B(t, e), e), G = (t) => {
   if (!e.key)
     return;
   const o = k(t, e.key);
-  C(D(e, t), () => {
+  L(D(e, t), () => {
     localStorage.setItem(o, JSON.stringify(e[t]));
   }, { immediate: !0 });
 }, f = {
@@ -75,7 +75,7 @@ const q = (t, e) => (B(t, e), e), G = (t) => {
       href: a.href,
       "data-top-icon": a.icon || void 0,
       disabled: a.disabled || void 0,
-      onClick: l[0] || (l[0] = (p) => a.name ? s(n).activeItemName = a.name : null)
+      onClick: l[0] || (l[0] = (r) => a.name ? s(n).activeItemName = a.name : null)
     }, {
       default: _(() => [
         s(n).showMenuInPopup ? u(a.$slots, "default", { key: 0 }) : a.$slots.default && !s(n).isShort ? (i(), c("span", Y, [
@@ -96,31 +96,31 @@ const q = (t, e) => (B(t, e), e), G = (t) => {
 }, 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), ae = { class: "top-tabsView_menuList" }, ie = { class: "top-tabsView_menuFooter" }, pe = /* @__PURE__ */ w({
+}, null, -1), ae = { class: "top-tabsView_menuList" }, ie = { class: "top-tabsView_menuFooter" }, re = /* @__PURE__ */ w({
   __name: "menu",
   props: {
     isShortable: { type: Boolean }
   },
   setup(t) {
     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);
+      let r = n.get(e.activeItemName);
+      return r || (l(), n.get(e.activeItemName) || null);
     }), l = () => {
       if (!o.default)
         return;
-      const p = o.default().find((r) => r.key === "_menu");
-      p && p.children.forEach((r) => {
+      const r = o.default().find((p) => p.key === "_menu");
+      r && r.children.forEach((p) => {
         var v, $;
-        if (r.type.__name !== g.__name || !r.props.name)
+        if (p.type.__name !== g.__name || !p.props.name)
           return;
         const I = {
-          title: (($ = (v = r.children).default) == null ? void 0 : $.call(v)[0].children).trim(),
-          icon: r.props.icon
+          title: (($ = (v = p.children).default) == null ? void 0 : $.call(v)[0].children).trim(),
+          icon: p.props.icon
         };
-        n.set(r.props.name, I);
+        n.set(p.props.name, I);
       });
     };
-    return (p, r) => (i(), c("div", {
+    return (r, p) => (i(), c("div", {
       class: h({
         "top-tabsView_menu": !0,
         "top-tabsView_menu-inPopup_0": !s(e).showMenuInPopup,
@@ -142,21 +142,21 @@ const q = (t, e) => (B(t, e), e), G = (t) => {
           ])
         ]),
         contentList: _(() => [
-          u(p.$slots, "default")
+          u(r.$slots, "default")
         ]),
         _: 3
       })) : (i(), c(j, { key: 1 }, [
         m("div", ae, [
-          u(p.$slots, "default")
+          u(r.$slots, "default")
         ]),
         m("div", ie, [
-          p.isShortable ? (i(), d(g, {
+          r.isShortable ? (i(), d(g, {
             key: 0,
             icon: s(e).isShort ? "" : "",
-            onClick: r[0] || (r[0] = (I) => s(e).isShort = !s(e).isShort)
+            onClick: p[0] || (p[0] = (I) => s(e).isShort = !s(e).isShort)
           }, {
             default: _(() => [
-              A(M(s(e).isShort ? "" : "Свернуть") + " ", 1)
+              A(M(s(e).isShort ? "" : "Свернуть"), 1)
             ]),
             _: 1
           }, 8, ["icon"])) : V("", !0)
@@ -164,7 +164,7 @@ const q = (t, e) => (B(t, e), e), G = (t) => {
       ], 64))
     ], 2));
   }
-}), re = {
+}), pe = {
   "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",
@@ -176,8 +176,8 @@ const q = (t, e) => (B(t, e), e), G = (t) => {
   "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({
+  $style: pe
+}, le = /* @__PURE__ */ b(re, [["__cssModules", ue]]), ce = { class: "top-tabsView_contents" }, me = /* @__PURE__ */ w({
   __name: "tabsView",
   props: {
     modelValue: {},
@@ -190,7 +190,7 @@ const q = (t, e) => (B(t, e), e), G = (t) => {
     const o = t, a = W(o, e);
     return J(() => {
       a.showMenuInPopup = o.showMenuInPopup ?? U.state.isMobile;
-    }), (l, p) => (i(), c("div", {
+    }), (l, r) => (i(), c("div", {
       class: h({
         "top-tabsView": !0,
         "top-tabsView-inPopup": s(a).showMenuInPopup
@@ -254,7 +254,7 @@ const he = {
 }, Be = /* @__PURE__ */ b(ye, [["__cssModules", ve]]), $e = {
   key: 0,
   class: "top-tabsView_content"
-}, Le = /* @__PURE__ */ w({
+}, Ce = /* @__PURE__ */ w({
   __name: "content",
   props: {
     name: {}
@@ -268,7 +268,7 @@ const he = {
 });
 export {
   Oe as TabsView,
-  Le as TabsViewContent,
+  Ce as TabsViewContent,
   g as TabsViewMenuItem,
   Be as TabsViewMenuTitle
 };

package/tabsView/tabsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabsView.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","provide","use","inject","genStorageKey","stateName","stateKey","loadLocalStorge","localStorageKey","localStorageValue","addSaverLocalStorge","watch","toRef","stateManager","injectionKey","initState","props","emit","reactive","computed","value","initLocalStorge","useState","__props","componentName","_sfc_main$6","slots","useSlots","menuItemByName","activeMenuItem","menuItem","genMenuItemByName","component","item","subComponent","TabsViewMenuItem","_b","_a","__emit","watchEffect","Core","_sfc_render","_ctx","_cache"],"mappings":"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"}
+{"version":3,"file":"tabsView.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","provide","use","inject","genStorageKey","stateName","stateKey","loadLocalStorge","localStorageKey","localStorageValue","addSaverLocalStorge","watch","toRef","stateManager","injectionKey","initState","props","emit","reactive","computed","value","initLocalStorge","useState","__props","componentName","_sfc_main$6","slots","useSlots","menuItemByName","activeMenuItem","menuItem","genMenuItemByName","component","item","subComponent","TabsViewMenuItem","_b","_a","__emit","watchEffect","Core","_sfc_render","_ctx","_cache"],"mappings":"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"}

package/utils/css.amd.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.amd.js","sources":["../../src/core/utils/css.ts"],"sourcesContent":["/**\r\n * Вставить css стили на страницу с автоматическим определением media\r\n * @param fileNames - список ссылок на css файлы\r\n */\r\nexport const insertToPage = async (fileNames: Array<string>) => {\r\n\tconst cssFilesByOptions = new Map();\r\n\tcssFilesByOptions.set('::', []);\r\n\r\n\tfileNames.forEach(filename => {\r\n\t\tlet m = false;\r\n\t\tlet pc = false;\r\n\r\n\t\tif (filename.match(/\\.m\\./)) {\r\n\t\t\tm = true;\r\n\t\t}\r\n\t\tif (filename.match(/\\.pc\\./)) {\r\n\t\t\tpc = true;\r\n\t\t}\r\n\r\n\t\tconst key = `${m}:${pc}`;\r\n\t\tif (!cssFilesByOptions.has(key)) {\r\n\t\t\tcssFilesByOptions.set(`${m}:${pc}`, []);\r\n\t\t}\r\n\t\tcssFilesByOptions.get(`${m}:${pc}`).push(filename);\r\n\t});\r\n\r\n\tconst promises = [];\r\n\r\n\tcssFilesByOptions.forEach((fileNames, options: string) => {\r\n\t\tif (!fileNames.length) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst [m, pc] = options.split(':').map(item => item === 'true');\r\n\r\n\t\tlet media = 'all';\r\n\t\tif (m) {\r\n\t\t\tmedia = '(max-width: 900px)';\r\n\t\t}\r\n\t\tif (pc) {\r\n\t\t\tmedia = '(min-width: 900px)';\r\n\t\t}\r\n\r\n\t\tconst promisesI = _insertToPage(fileNames, media);\r\n\t\tpromisesI.forEach(promise => promises.push(promise));\r\n\t});\r\n\r\n\treturn await Promise.all(promises);\r\n};\r\n\r\nconst _insertToPage = (fileNames: Array<string>, media: string): Array<Promise<void>> => {\r\n\tconst promises = [];\r\n\r\n\tfileNames.forEach(fileName => {\r\n\t\tconst id = 'topCSSLink-' + fileName.replace(/\\W/g, '-');\r\n\r\n\t\t// стиль уже загружен\r\n\t\tif (window[id]) return;\r\n\r\n\t\tlet resolve: Function;\r\n\t\tlet reject: Function;\r\n\t\tconst promise = new Promise((_resolve, _reject) => {\r\n\t\t\tresolve = _resolve;\r\n\t\t\treject = _reject;\r\n\t\t});\r\n\t\tpromises.push(promise);\r\n\r\n\t\tconst elLink = document.createElement('link');\r\n\t\telLink.id = id;\r\n\t\telLink.rel = 'stylesheet';\r\n\t\telLink.media = media;\r\n\t\telLink.href = fileName;\r\n\t\telLink.onload = () => resolve();\r\n\t\telLink.onerror = () => reject();\r\n\r\n\t\tdocument.head.append(elLink);\r\n\t});\r\n\r\n\treturn promises;\r\n};"],"names":["insertToPage","fileNames","cssFilesByOptions","filename","m","pc","key","promises","fileNames2","media","promise","_insertToPage","fileName","id","elLink","resolve","reject"],"mappings":"yFAIa,MAAAA,EAAA,MAAAC,GAAA,CACZ,MAAAC,EAAA,IAAA,mBAGAD,EAAA,QAAAE,GAAA,CACC,IAAAC,EAAA,GACAC,EAAA,GAEAF,EAAA,MAAA,OAAA,UAGAA,EAAA,MAAA,QAAA,UAIA,MAAAG,EAAA,GAAAF,CAAA,IAAAC,CAAA,aAECH,EAAA,IAAA,GAAAE,CAAA,IAAAC,CAAA,GAAA,CAAA,CAAA,EAEDH,EAAA,IAAA,GAAAE,CAAA,IAAAC,CAAA,EAAA,EAAA,KAAAF,CAAA,CAAiD,CAAA,EAGlD,MAAAI,EAAA,CAAA,2BAGC,GAAA,CAAAC,EAAA,OACC,kDAKD,IAAAC,EAAA,qEASA,QAAAC,GAAAH,EAAA,KAAAG,CAAA,CAAA,CAAmD,CAAA,wBAMrDC,EAAA,CAAAV,EAAAQ,IAAA,CACC,MAAAF,EAAA,CAAA,EAEA,OAAAN,EAAA,QAAAW,GAAA,CACC,MAAAC,EAAA,cAAAD,EAAA,QAAA,MAAA,GAAA,EAGA,GAAA,OAAAC,CAAA,EAAgB,kDAMN,CAAA,EAEVN,EAAA,KAAAG,CAAA,yCAGAI,EAAA,GAAAD,EACAC,EAAA,IAAA,aACAA,EAAA,MAAAL,EACAK,EAAA,KAAAF,EACAE,EAAA,OAAA,IAAAC,EAAA,EACAD,EAAA,QAAA,IAAAE,EAAA,yBAE2B,CAAA"}
+{"version":3,"file":"css.amd.js","sources":["../../src/core/utils/css.ts"],"sourcesContent":["/**\n * Вставить css стили на страницу с автоматическим определением media\n * @param fileNames - список ссылок на css файлы\n */\nexport const insertToPage = async (fileNames: Array<string>) => {\n\tconst cssFilesByOptions = new Map();\n\tcssFilesByOptions.set('::', []);\n\n\tfileNames.forEach(filename => {\n\t\tlet m = false;\n\t\tlet pc = false;\n\n\t\tif (filename.match(/\\.m\\./)) {\n\t\t\tm = true;\n\t\t}\n\t\tif (filename.match(/\\.pc\\./)) {\n\t\t\tpc = true;\n\t\t}\n\n\t\tconst key = `${m}:${pc}`;\n\t\tif (!cssFilesByOptions.has(key)) {\n\t\t\tcssFilesByOptions.set(`${m}:${pc}`, []);\n\t\t}\n\t\tcssFilesByOptions.get(`${m}:${pc}`).push(filename);\n\t});\n\n\tconst promises = [];\n\n\tcssFilesByOptions.forEach((fileNames, options: string) => {\n\t\tif (!fileNames.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst [m, pc] = options.split(':').map(item => item === 'true');\n\n\t\tlet media = 'all';\n\t\tif (m) {\n\t\t\tmedia = '(max-width: 900px)';\n\t\t}\n\t\tif (pc) {\n\t\t\tmedia = '(min-width: 900px)';\n\t\t}\n\n\t\tconst promisesI = _insertToPage(fileNames, media);\n\t\tpromisesI.forEach(promise => promises.push(promise));\n\t});\n\n\treturn await Promise.all(promises);\n};\n\nconst _insertToPage = (fileNames: Array<string>, media: string): Array<Promise<void>> => {\n\tconst promises = [];\n\n\tfileNames.forEach(fileName => {\n\t\tconst id = 'topCSSLink-' + fileName.replace(/\\W/g, '-');\n\n\t\t// стиль уже загружен\n\t\tif (window[id]) return;\n\n\t\tlet resolve: Function;\n\t\tlet reject: Function;\n\t\tconst promise = new Promise((_resolve, _reject) => {\n\t\t\tresolve = _resolve;\n\t\t\treject = _reject;\n\t\t});\n\t\tpromises.push(promise);\n\n\t\tconst elLink = document.createElement('link');\n\t\telLink.id = id;\n\t\telLink.rel = 'stylesheet';\n\t\telLink.media = media;\n\t\telLink.href = fileName;\n\t\telLink.onload = () => resolve();\n\t\telLink.onerror = () => reject();\n\n\t\tdocument.head.append(elLink);\n\t});\n\n\treturn promises;\n};"],"names":["insertToPage","fileNames","cssFilesByOptions","filename","m","pc","key","promises","fileNames2","media","promise","_insertToPage","fileName","id","elLink","resolve","reject"],"mappings":"yFAIa,MAAAA,EAAA,MAAAC,GAAA,CACZ,MAAAC,EAAA,IAAA,mBAGAD,EAAA,QAAAE,GAAA,CACC,IAAAC,EAAA,GACAC,EAAA,GAEAF,EAAA,MAAA,OAAA,UAGAA,EAAA,MAAA,QAAA,UAIA,MAAAG,EAAA,GAAAF,CAAA,IAAAC,CAAA,aAECH,EAAA,IAAA,GAAAE,CAAA,IAAAC,CAAA,GAAA,CAAA,CAAA,EAEDH,EAAA,IAAA,GAAAE,CAAA,IAAAC,CAAA,EAAA,EAAA,KAAAF,CAAA,CAAiD,CAAA,EAGlD,MAAAI,EAAA,CAAA,2BAGC,GAAA,CAAAC,EAAA,OACC,kDAKD,IAAAC,EAAA,qEASA,QAAAC,GAAAH,EAAA,KAAAG,CAAA,CAAA,CAAmD,CAAA,wBAMrDC,EAAA,CAAAV,EAAAQ,IAAA,CACC,MAAAF,EAAA,CAAA,EAEA,OAAAN,EAAA,QAAAW,GAAA,CACC,MAAAC,EAAA,cAAAD,EAAA,QAAA,MAAA,GAAA,EAGA,GAAA,OAAAC,CAAA,EAAgB,kDAMN,CAAA,EAEVN,EAAA,KAAAG,CAAA,yCAGAI,EAAA,GAAAD,EACAC,EAAA,IAAA,aACAA,EAAA,MAAAL,EACAK,EAAA,KAAAF,EACAE,EAAA,OAAA,IAAAC,EAAA,EACAD,EAAA,QAAA,IAAAE,EAAA,yBAE2B,CAAA"}

package/utils/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sources":["../../src/core/utils/css.ts"],"sourcesContent":["/**\r\n * Вставить css стили на страницу с автоматическим определением media\r\n * @param fileNames - список ссылок на css файлы\r\n */\r\nexport const insertToPage = async (fileNames: Array<string>) => {\r\n\tconst cssFilesByOptions = new Map();\r\n\tcssFilesByOptions.set('::', []);\r\n\r\n\tfileNames.forEach(filename => {\r\n\t\tlet m = false;\r\n\t\tlet pc = false;\r\n\r\n\t\tif (filename.match(/\\.m\\./)) {\r\n\t\t\tm = true;\r\n\t\t}\r\n\t\tif (filename.match(/\\.pc\\./)) {\r\n\t\t\tpc = true;\r\n\t\t}\r\n\r\n\t\tconst key = `${m}:${pc}`;\r\n\t\tif (!cssFilesByOptions.has(key)) {\r\n\t\t\tcssFilesByOptions.set(`${m}:${pc}`, []);\r\n\t\t}\r\n\t\tcssFilesByOptions.get(`${m}:${pc}`).push(filename);\r\n\t});\r\n\r\n\tconst promises = [];\r\n\r\n\tcssFilesByOptions.forEach((fileNames, options: string) => {\r\n\t\tif (!fileNames.length) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst [m, pc] = options.split(':').map(item => item === 'true');\r\n\r\n\t\tlet media = 'all';\r\n\t\tif (m) {\r\n\t\t\tmedia = '(max-width: 900px)';\r\n\t\t}\r\n\t\tif (pc) {\r\n\t\t\tmedia = '(min-width: 900px)';\r\n\t\t}\r\n\r\n\t\tconst promisesI = _insertToPage(fileNames, media);\r\n\t\tpromisesI.forEach(promise => promises.push(promise));\r\n\t});\r\n\r\n\treturn await Promise.all(promises);\r\n};\r\n\r\nconst _insertToPage = (fileNames: Array<string>, media: string): Array<Promise<void>> => {\r\n\tconst promises = [];\r\n\r\n\tfileNames.forEach(fileName => {\r\n\t\tconst id = 'topCSSLink-' + fileName.replace(/\\W/g, '-');\r\n\r\n\t\t// стиль уже загружен\r\n\t\tif (window[id]) return;\r\n\r\n\t\tlet resolve: Function;\r\n\t\tlet reject: Function;\r\n\t\tconst promise = new Promise((_resolve, _reject) => {\r\n\t\t\tresolve = _resolve;\r\n\t\t\treject = _reject;\r\n\t\t});\r\n\t\tpromises.push(promise);\r\n\r\n\t\tconst elLink = document.createElement('link');\r\n\t\telLink.id = id;\r\n\t\telLink.rel = 'stylesheet';\r\n\t\telLink.media = media;\r\n\t\telLink.href = fileName;\r\n\t\telLink.onload = () => resolve();\r\n\t\telLink.onerror = () => reject();\r\n\r\n\t\tdocument.head.append(elLink);\r\n\t});\r\n\r\n\treturn promises;\r\n};"],"names":["insertToPage","fileNames","cssFilesByOptions","filename","m","pc","key","promises","options","item","media","_insertToPage","promise","fileName","id","resolve","reject","_resolve","_reject","elLink"],"mappings":"AAIa,MAAAA,IAAe,OAAOC,MAA6B;AACzD,QAAAC,wBAAwB;AACZ,EAAAA,EAAA,IAAI,MAAM,CAAA,CAAE,GAE9BD,EAAU,QAAQ,CAAYE,MAAA;AAC7B,QAAIC,IAAI,IACJC,IAAK;AAEL,IAAAF,EAAS,MAAM,OAAO,MACrBC,IAAA,KAEDD,EAAS,MAAM,QAAQ,MACrBE,IAAA;AAGN,UAAMC,IAAM,GAAGF,CAAC,IAAIC,CAAE;AACtB,IAAKH,EAAkB,IAAII,CAAG,KAC7BJ,EAAkB,IAAI,GAAGE,CAAC,IAAIC,CAAE,IAAI,CAAA,CAAE,GAErBH,EAAA,IAAI,GAAGE,CAAC,IAAIC,CAAE,EAAE,EAAE,KAAKF,CAAQ;AAAA,EAAA,CACjD;AAED,QAAMI,IAAW,CAAA;AAEC,SAAAL,EAAA,QAAQ,CAACD,GAAWO,MAAoB;AACrD,QAAA,CAACP,EAAU;AACd;AAGK,UAAA,CAACG,GAAGC,CAAE,IAAIG,EAAQ,MAAM,GAAG,EAAE,IAAI,CAAQC,MAAAA,MAAS,MAAM;AAE9D,QAAIC,IAAQ;AACZ,IAAIN,MACKM,IAAA,uBAELL,MACKK,IAAA,uBAGSC,EAAcV,GAAWS,CAAK,EACtC,QAAQ,CAAAE,MAAWL,EAAS,KAAKK,CAAO,CAAC;AAAA,EAAA,CACnD,GAEM,MAAM,QAAQ,IAAIL,CAAQ;AAClC,GAEMI,IAAgB,CAACV,GAA0BS,MAAwC;AACxF,QAAMH,IAAW,CAAA;AAEjB,SAAAN,EAAU,QAAQ,CAAYY,MAAA;AAC7B,UAAMC,IAAK,gBAAgBD,EAAS,QAAQ,OAAO,GAAG;AAGtD,QAAI,OAAOC,CAAE;AAAG;AAEZ,QAAAC,GACAC;AACJ,UAAMJ,IAAU,IAAI,QAAQ,CAACK,GAAUC,MAAY;AACxC,MAAAH,IAAAE,GACDD,IAAAE;AAAA,IAAA,CACT;AACD,IAAAX,EAAS,KAAKK,CAAO;AAEf,UAAAO,IAAS,SAAS,cAAc,MAAM;AAC5C,IAAAA,EAAO,KAAKL,GACZK,EAAO,MAAM,cACbA,EAAO,QAAQT,GACfS,EAAO,OAAON,GACPM,EAAA,SAAS,MAAMJ,KACfI,EAAA,UAAU,MAAMH,KAEd,SAAA,KAAK,OAAOG,CAAM;AAAA,EAAA,CAC3B,GAEMZ;AACR;"}
+{"version":3,"file":"css.js","sources":["../../src/core/utils/css.ts"],"sourcesContent":["/**\n * Вставить css стили на страницу с автоматическим определением media\n * @param fileNames - список ссылок на css файлы\n */\nexport const insertToPage = async (fileNames: Array<string>) => {\n\tconst cssFilesByOptions = new Map();\n\tcssFilesByOptions.set('::', []);\n\n\tfileNames.forEach(filename => {\n\t\tlet m = false;\n\t\tlet pc = false;\n\n\t\tif (filename.match(/\\.m\\./)) {\n\t\t\tm = true;\n\t\t}\n\t\tif (filename.match(/\\.pc\\./)) {\n\t\t\tpc = true;\n\t\t}\n\n\t\tconst key = `${m}:${pc}`;\n\t\tif (!cssFilesByOptions.has(key)) {\n\t\t\tcssFilesByOptions.set(`${m}:${pc}`, []);\n\t\t}\n\t\tcssFilesByOptions.get(`${m}:${pc}`).push(filename);\n\t});\n\n\tconst promises = [];\n\n\tcssFilesByOptions.forEach((fileNames, options: string) => {\n\t\tif (!fileNames.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst [m, pc] = options.split(':').map(item => item === 'true');\n\n\t\tlet media = 'all';\n\t\tif (m) {\n\t\t\tmedia = '(max-width: 900px)';\n\t\t}\n\t\tif (pc) {\n\t\t\tmedia = '(min-width: 900px)';\n\t\t}\n\n\t\tconst promisesI = _insertToPage(fileNames, media);\n\t\tpromisesI.forEach(promise => promises.push(promise));\n\t});\n\n\treturn await Promise.all(promises);\n};\n\nconst _insertToPage = (fileNames: Array<string>, media: string): Array<Promise<void>> => {\n\tconst promises = [];\n\n\tfileNames.forEach(fileName => {\n\t\tconst id = 'topCSSLink-' + fileName.replace(/\\W/g, '-');\n\n\t\t// стиль уже загружен\n\t\tif (window[id]) return;\n\n\t\tlet resolve: Function;\n\t\tlet reject: Function;\n\t\tconst promise = new Promise((_resolve, _reject) => {\n\t\t\tresolve = _resolve;\n\t\t\treject = _reject;\n\t\t});\n\t\tpromises.push(promise);\n\n\t\tconst elLink = document.createElement('link');\n\t\telLink.id = id;\n\t\telLink.rel = 'stylesheet';\n\t\telLink.media = media;\n\t\telLink.href = fileName;\n\t\telLink.onload = () => resolve();\n\t\telLink.onerror = () => reject();\n\n\t\tdocument.head.append(elLink);\n\t});\n\n\treturn promises;\n};"],"names":["insertToPage","fileNames","cssFilesByOptions","filename","m","pc","key","promises","options","item","media","_insertToPage","promise","fileName","id","resolve","reject","_resolve","_reject","elLink"],"mappings":"AAIa,MAAAA,IAAe,OAAOC,MAA6B;AACzD,QAAAC,wBAAwB;AACZ,EAAAA,EAAA,IAAI,MAAM,CAAA,CAAE,GAE9BD,EAAU,QAAQ,CAAYE,MAAA;AAC7B,QAAIC,IAAI,IACJC,IAAK;AAEL,IAAAF,EAAS,MAAM,OAAO,MACrBC,IAAA,KAEDD,EAAS,MAAM,QAAQ,MACrBE,IAAA;AAGN,UAAMC,IAAM,GAAGF,CAAC,IAAIC,CAAE;AACtB,IAAKH,EAAkB,IAAII,CAAG,KAC7BJ,EAAkB,IAAI,GAAGE,CAAC,IAAIC,CAAE,IAAI,CAAA,CAAE,GAErBH,EAAA,IAAI,GAAGE,CAAC,IAAIC,CAAE,EAAE,EAAE,KAAKF,CAAQ;AAAA,EAAA,CACjD;AAED,QAAMI,IAAW,CAAA;AAEC,SAAAL,EAAA,QAAQ,CAACD,GAAWO,MAAoB;AACrD,QAAA,CAACP,EAAU;AACd;AAGK,UAAA,CAACG,GAAGC,CAAE,IAAIG,EAAQ,MAAM,GAAG,EAAE,IAAI,CAAQC,MAAAA,MAAS,MAAM;AAE9D,QAAIC,IAAQ;AACZ,IAAIN,MACKM,IAAA,uBAELL,MACKK,IAAA,uBAGSC,EAAcV,GAAWS,CAAK,EACtC,QAAQ,CAAAE,MAAWL,EAAS,KAAKK,CAAO,CAAC;AAAA,EAAA,CACnD,GAEM,MAAM,QAAQ,IAAIL,CAAQ;AAClC,GAEMI,IAAgB,CAACV,GAA0BS,MAAwC;AACxF,QAAMH,IAAW,CAAA;AAEjB,SAAAN,EAAU,QAAQ,CAAYY,MAAA;AAC7B,UAAMC,IAAK,gBAAgBD,EAAS,QAAQ,OAAO,GAAG;AAGtD,QAAI,OAAOC,CAAE;AAAG;AAEZ,QAAAC,GACAC;AACJ,UAAMJ,IAAU,IAAI,QAAQ,CAACK,GAAUC,MAAY;AACxC,MAAAH,IAAAE,GACDD,IAAAE;AAAA,IAAA,CACT;AACD,IAAAX,EAAS,KAAKK,CAAO;AAEf,UAAAO,IAAS,SAAS,cAAc,MAAM;AAC5C,IAAAA,EAAO,KAAKL,GACZK,EAAO,MAAM,cACbA,EAAO,QAAQT,GACfS,EAAO,OAAON,GACPM,EAAA,SAAS,MAAMJ,KACfI,EAAA,UAAU,MAAMH,KAEd,SAAA,KAAK,OAAOG,CAAM;AAAA,EAAA,CAC3B,GAEMZ;AACR;"}

package/utils/date.amd.js

@@ -1,2 +1,2 @@
-define(["require","exports","../.chunks/forms-9972aba2.amd","vue"],function(n,e,t,a){"use strict";if(typeof a>"u")var a=window.Vue;e.dateFormat=t.dateFormat,e.dateUnformat=t.dateUnformat,e.genDate=t.genDate,e.stringToDate=t.stringToDate,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+define(["require","exports","../.chunks/forms-hIalWiGK.amd","vue"],function(n,e,t,a){"use strict";if(typeof a>"u")var a=window.Vue;e.dateFormat=t.dateFormat,e.dateUnformat=t.dateUnformat,e.genDate=t.genDate,e.stringToDate=t.stringToDate,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=date.amd.js.map

package/utils/date.js

@@ -1,4 +1,4 @@
-import { d as o, h as r, f as s, s as m } from "../.chunks/forms-9516aa6c.es.js";
+import { d as o, h as r, f as s, s as m } from "../.chunks/forms-dneLtREE.es.js";
 import "vue";
 export {
   o as dateFormat,

package/utils/device.amd.js

@@ -1,2 +1,2 @@
-define(["require","exports","../.chunks/forms-9972aba2.amd","vue"],function(n,i,e,a){"use strict";if(typeof a>"u")var a=window.Vue;i.getCommandKeyLabel=e.getCommandKeyLabel,i.isApp=e.isApp,i.isMacOS=e.isMacOS,i.isMobile=e.isMobile,i.isRetina=e.isRetina,i.isSafari=e.isSafari,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+define(["require","exports","../.chunks/forms-hIalWiGK.amd","vue"],function(n,i,e,a){"use strict";if(typeof a>"u")var a=window.Vue;i.getCommandKeyLabel=e.getCommandKeyLabel,i.isApp=e.isApp,i.isMacOS=e.isMacOS,i.isMobile=e.isMobile,i.isRetina=e.isRetina,i.isSafari=e.isSafari,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=device.amd.js.map

package/utils/device.js

@@ -1,4 +1,4 @@
-import { g as e, b as o, c as m, a as p, i as r, e as t } from "../.chunks/forms-9516aa6c.es.js";
+import { g as e, b as o, c as m, a as p, i as r, e as t } from "../.chunks/forms-dneLtREE.es.js";
 import "vue";
 export {
   e as getCommandKeyLabel,

package/utils/dom.amd.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.amd.js","sources":["../../src/core/utils/dom.ts"],"sourcesContent":["/**\r\n * Функции для работы с работы с Document Object Model (DOM)\r\n */\r\n\r\n/**\r\n * Создать элемент\r\n * @param {string} tagName\r\n * @param {any} attrs - атрибуты\r\n * @param {Element[]} elsChildrens\r\n * @returns {Element} - созданный элемент\r\n */\r\nfunction genEl (tagName: string, attrs: any, ...elsChildrens: Element[]): Element {\r\n\tconst el: any = document.createElement(tagName);\r\n\r\n\tfor (const name in attrs) {\r\n\t\tif (name.indexOf('on') === 0) {\r\n\t\t\t// events\r\n\t\t\tel[name] = attrs[name];\r\n\t\t} else {\r\n\t\t\tel.setAttribute(name, attrs[name]);\r\n\t\t}\r\n\t}\r\n\r\n\telsChildrens.forEach((elChildren) => {\r\n\t\tif (typeof (elChildren) === 'string') {\r\n\t\t\tel.insertAdjacentHTML('beforeend', elChildren);\r\n\t\t} else {\r\n\t\t\tel.append(elChildren);\r\n\t\t}\r\n\t});\r\n\r\n\treturn el;\r\n}\r\n\r\n/**\r\n * Проверить видимость элемента\r\n * @param {?Element} el\r\n * @returns boolean - вернет true, если элемент считается видимым\r\n */\r\nfunction isVisible (el?: Element) {\r\n\tif (!el) {\r\n\t\treturn false;\r\n\t}\r\n\r\n\tconst boundingClientRect = el.getBoundingClientRect();\r\n\treturn !!(boundingClientRect.width || boundingClientRect.height);\r\n}\r\n\r\n/**\r\n * Получить координаты элемента относительно документа\r\n * @param {Element} el\r\n * @returns {{top: number, left: number}} - координаты элемента относительно документа\r\n */\r\nfunction offset (el: Element): { top: number, left: number } {\r\n\tconst boundingClientRect = el.getBoundingClientRect();\r\n\r\n\treturn {\r\n\t\ttop: boundingClientRect.top + window.scrollY,\r\n\t\tleft: boundingClientRect.left + window.scrollX,\r\n\t};\r\n}\r\n\r\n/**\r\n * Получить значение css свойства элемента\r\n * @param {Element} el\r\n * @param {string} property - имя свойства\r\n * @return {string} - значение css стиля\r\n */\r\nfunction css (el: Element, property: string): string {\r\n\treturn window.getComputedStyle(el).getPropertyValue(property);\r\n}\r\n\r\n/**\r\n * Обернуть элемент и вернуть только что созданный элемент\r\n * @param {Element} el - элемент, который требуется обернуть\r\n * @param {string} tagName - имя тега элемента, в который треубется обернуть элемент\r\n * @returns {Element}\r\n */\r\nfunction wrap (el: Element, tagName: string): Element {\r\n\tconst elWrapper = document.createElement(tagName);\r\n\tel.after(elWrapper);\r\n\r\n\telWrapper.append(el);\r\n\r\n\treturn elWrapper;\r\n}\r\n\r\n/**\r\n * Найти и вернуть первый видимый элемент\r\n * @param {?Document|Element} el - корневой элемент поиска\r\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\r\n * @returns {Element|null}\r\n */\r\nfunction querySelectorVisible (el: Element, selectors: string): Element | null {\r\n\treturn querySelectorAllArray(el, selectors).find(isVisible) || null;\r\n}\r\n\r\n/**\r\n * Найти и вернуть последний видимый элемент\r\n * @param {?Document|Element} el - корневой элемент поиска\r\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\r\n * @returns {Element|null}\r\n */\r\nfunction querySelectorVisibleLast (el: Element, selectors: string): Element | null {\r\n\treturn querySelectorAllArray(el, selectors).findLast(isVisible) || null;\r\n}\r\n\r\n/**\r\n * Найти видимые элементы\r\n * @param {?Document|Element} el - корневой элемент поиска\r\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\r\n * @returns {Element[]} - обратите внимание, возвращается не NodeList[], а Element[]\r\n */\r\nfunction querySelectorAllVisible (el: Element, selectors: string): Element[] {\r\n\treturn querySelectorAllArray(el, selectors).filter(isVisible);\r\n}\r\n\r\n/**\r\n * Найти элементы и вернуть в виде массива\r\n * @param {?Document|Element} el - корневой элемент поиска\r\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\r\n * @returns {Element[]}\r\n */\r\nfunction querySelectorAllArray (el: Element, selectors: string): Element[] {\r\n\tif (!el) {\r\n\t\treturn [];\r\n\t}\r\n\r\n\treturn [...el.querySelectorAll(selectors)];\r\n}\r\n\r\n/**\r\n * Хранилище данных элемента\r\n * @param {Element} el\r\n * @param {string} contextName - контекст, обычно используется имя компонента\r\n * @param {?object | null} contextData - установить объект с данными, предыдущие данные будут заменены, установите null для удаления данных\r\n * @returns {?object} - вернет объект контекста или undefined, если данные контекста не найдены\r\n */\r\nfunction storage (\r\n\tel?: Element & { topData?: any },\r\n\tcontextName: string = 'common', contextData: object | null | undefined = undefined,\r\n): object | undefined {\r\n\tif (!el) {\r\n\t\treturn;\r\n\t}\r\n\r\n\tif (!el.topData) {\r\n\t\tel.topData = {};\r\n\t}\r\n\r\n\tif (contextData) {\r\n\t\tel.topData[contextName] = contextData;\r\n\t}\r\n\r\n\tif (contextData === null) {\r\n\t\tdelete el.topData[contextName];\r\n\t}\r\n\r\n\treturn el.topData[contextName];\r\n}\r\n\r\n/**\r\n * Очистить хранилище элемента\r\n */\r\nfunction storageClear (el?: Element & { topData?: any }) {\r\n\tif (!el) {\r\n\t\treturn;\r\n\t}\r\n\r\n\tdelete el.topData;\r\n}\r\n\r\nexport default {\r\n\tgenEl,\r\n\tisVisible,\r\n\toffset,\r\n\tcss,\r\n\twrap,\r\n\tquerySelectorVisible,\r\n\tquerySelectorVisibleLast,\r\n\tquerySelectorAllVisible,\r\n\tquerySelectorAllArray,\r\n\tstorage,\r\n\tstorageClear,\r\n};\r\n"],"names":["name","attrs","elsChildrens","elChildren","el","boundingClientRect","css","property","wrap","tagName","elWrapper","querySelectorVisible","selectors","querySelectorAllArray","isVisible","querySelectorVisibleLast","querySelectorAllVisible","storage","contextName","contextData","DOM","genEl","offset","storageClear"],"mappings":"gJAcC,UAAAA,KAAAC,uDASA,OAAAC,EAAA,QAAAC,GAAA,CACC,OAAAA,GAAA,6CAGCC,EAAA,OAAAD,CAAA,CACD,CAAA,iCAgBD,MAAAE,EAAAD,EAAA,sBAAA,4CAUA,MAAAC,EAAAD,EAAA,sBAAA,EAEA,MAAA,oDAEwC,EAUzC,SAAAE,EAAAF,EAAAG,EAAA,CACC,OAAA,OAAA,iBAAAH,CAAA,EAAA,iBAAAG,CAAA,EASD,SAAAC,EAAAJ,EAAAK,EAAA,mCAEC,OAAAL,EAAA,MAAAM,CAAA,EAEAA,EAAA,OAAAN,CAAA,IAWD,SAAAO,EAAAP,EAAAQ,EAAA,CACC,OAAAC,EAAAT,EAAAQ,CAAA,EAAA,KAAAE,CAAA,GAAA,KASD,SAAAC,EAAAX,EAAAQ,EAAA,CACC,OAAAC,EAAAT,EAAAQ,CAAA,EAAA,SAAAE,CAAA,GAAA,KASD,SAAAE,EAAAZ,EAAAQ,EAAA,CACC,OAAAC,EAAAT,EAAAQ,CAAA,EAAA,OAAAE,CAAA,EASD,SAAAD,EAAAT,EAAAQ,EAAA,wCAeA,SAAAK,EAAAb,EAAAc,EAAA,SAAAC,EAAA,OAAA,MAQC,OAAAf,EAAA,UACCA,EAAA,QAAA,CAAA,uBAODe,IAAA,MACC,OAAAf,EAAA,QAAAc,CAAA,EAGDd,EAAA,QAAAc,CAAA,mBAWA,OAAAd,EAAA,QAGD,MAAAgB,EAAA,CAAe,MAAAC,EACd,UAAAP,EACA,OAAAQ,EACA,IAAAhB,EACA,KAAAE,EACA,qBAAAG,EACA,yBAAAI,EACA,wBAAAC,EACA,sBAAAH,EACA,QAAAI,EACA,aAAAM"}
+{"version":3,"file":"dom.amd.js","sources":["../../src/core/utils/dom.ts"],"sourcesContent":["/**\n * Функции для работы с работы с Document Object Model (DOM)\n */\n\n/**\n * Создать элемент\n * @param {string} tagName\n * @param {any} attrs - атрибуты\n * @param {Element[]} elsChildrens\n * @returns {Element} - созданный элемент\n */\nfunction genEl (tagName: string, attrs: any, ...elsChildrens: Element[]): Element {\n\tconst el: any = document.createElement(tagName);\n\n\tfor (const name in attrs) {\n\t\tif (name.indexOf('on') === 0) {\n\t\t\t// events\n\t\t\tel[name] = attrs[name];\n\t\t} else {\n\t\t\tel.setAttribute(name, attrs[name]);\n\t\t}\n\t}\n\n\telsChildrens.forEach((elChildren) => {\n\t\tif (typeof (elChildren) === 'string') {\n\t\t\tel.insertAdjacentHTML('beforeend', elChildren);\n\t\t} else {\n\t\t\tel.append(elChildren);\n\t\t}\n\t});\n\n\treturn el;\n}\n\n/**\n * Проверить видимость элемента\n * @param {?Element} el\n * @returns boolean - вернет true, если элемент считается видимым\n */\nfunction isVisible (el?: Element) {\n\tif (!el) {\n\t\treturn false;\n\t}\n\n\tconst boundingClientRect = el.getBoundingClientRect();\n\treturn !!(boundingClientRect.width || boundingClientRect.height);\n}\n\n/**\n * Получить координаты элемента относительно документа\n * @param {Element} el\n * @returns {{top: number, left: number}} - координаты элемента относительно документа\n */\nfunction offset (el: Element): { top: number, left: number } {\n\tconst boundingClientRect = el.getBoundingClientRect();\n\n\treturn {\n\t\ttop: boundingClientRect.top + window.scrollY,\n\t\tleft: boundingClientRect.left + window.scrollX,\n\t};\n}\n\n/**\n * Получить значение css свойства элемента\n * @param {Element} el\n * @param {string} property - имя свойства\n * @return {string} - значение css стиля\n */\nfunction css (el: Element, property: string): string {\n\treturn window.getComputedStyle(el).getPropertyValue(property);\n}\n\n/**\n * Обернуть элемент и вернуть только что созданный элемент\n * @param {Element} el - элемент, который требуется обернуть\n * @param {string} tagName - имя тега элемента, в который треубется обернуть элемент\n * @returns {Element}\n */\nfunction wrap (el: Element, tagName: string): Element {\n\tconst elWrapper = document.createElement(tagName);\n\tel.after(elWrapper);\n\n\telWrapper.append(el);\n\n\treturn elWrapper;\n}\n\n/**\n * Найти и вернуть первый видимый элемент\n * @param {?Document|Element} el - корневой элемент поиска\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\n * @returns {Element|null}\n */\nfunction querySelectorVisible (el: Element, selectors: string): Element | null {\n\treturn querySelectorAllArray(el, selectors).find(isVisible) || null;\n}\n\n/**\n * Найти и вернуть последний видимый элемент\n * @param {?Document|Element} el - корневой элемент поиска\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\n * @returns {Element|null}\n */\nfunction querySelectorVisibleLast (el: Element, selectors: string): Element | null {\n\treturn querySelectorAllArray(el, selectors).findLast(isVisible) || null;\n}\n\n/**\n * Найти видимые элементы\n * @param {?Document|Element} el - корневой элемент поиска\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\n * @returns {Element[]} - обратите внимание, возвращается не NodeList[], а Element[]\n */\nfunction querySelectorAllVisible (el: Element, selectors: string): Element[] {\n\treturn querySelectorAllArray(el, selectors).filter(isVisible);\n}\n\n/**\n * Найти элементы и вернуть в виде массива\n * @param {?Document|Element} el - корневой элемент поиска\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\n * @returns {Element[]}\n */\nfunction querySelectorAllArray (el: Element, selectors: string): Element[] {\n\tif (!el) {\n\t\treturn [];\n\t}\n\n\treturn [...el.querySelectorAll(selectors)];\n}\n\n/**\n * Хранилище данных элемента\n * @param {Element} el\n * @param {string} contextName - контекст, обычно используется имя компонента\n * @param {?object | null} contextData - установить объект с данными, предыдущие данные будут заменены, установите null для удаления данных\n * @returns {?object} - вернет объект контекста или undefined, если данные контекста не найдены\n */\nfunction storage (\n\tel?: Element & { topData?: any },\n\tcontextName: string = 'common', contextData: object | null | undefined = undefined,\n): object | undefined {\n\tif (!el) {\n\t\treturn;\n\t}\n\n\tif (!el.topData) {\n\t\tel.topData = {};\n\t}\n\n\tif (contextData) {\n\t\tel.topData[contextName] = contextData;\n\t}\n\n\tif (contextData === null) {\n\t\tdelete el.topData[contextName];\n\t}\n\n\treturn el.topData[contextName];\n}\n\n/**\n * Очистить хранилище элемента\n */\nfunction storageClear (el?: Element & { topData?: any }) {\n\tif (!el) {\n\t\treturn;\n\t}\n\n\tdelete el.topData;\n}\n\nexport default {\n\tgenEl,\n\tisVisible,\n\toffset,\n\tcss,\n\twrap,\n\tquerySelectorVisible,\n\tquerySelectorVisibleLast,\n\tquerySelectorAllVisible,\n\tquerySelectorAllArray,\n\tstorage,\n\tstorageClear,\n};\n"],"names":["name","attrs","elsChildrens","elChildren","el","boundingClientRect","css","property","wrap","tagName","elWrapper","querySelectorVisible","selectors","querySelectorAllArray","isVisible","querySelectorVisibleLast","querySelectorAllVisible","storage","contextName","contextData","DOM","genEl","offset","storageClear"],"mappings":"gJAcC,UAAAA,KAAAC,uDASA,OAAAC,EAAA,QAAAC,GAAA,CACC,OAAAA,GAAA,6CAGCC,EAAA,OAAAD,CAAA,CACD,CAAA,iCAgBD,MAAAE,EAAAD,EAAA,sBAAA,4CAUA,MAAAC,EAAAD,EAAA,sBAAA,EAEA,MAAA,oDAEwC,EAUzC,SAAAE,EAAAF,EAAAG,EAAA,CACC,OAAA,OAAA,iBAAAH,CAAA,EAAA,iBAAAG,CAAA,EASD,SAAAC,EAAAJ,EAAAK,EAAA,mCAEC,OAAAL,EAAA,MAAAM,CAAA,EAEAA,EAAA,OAAAN,CAAA,IAWD,SAAAO,EAAAP,EAAAQ,EAAA,CACC,OAAAC,EAAAT,EAAAQ,CAAA,EAAA,KAAAE,CAAA,GAAA,KASD,SAAAC,EAAAX,EAAAQ,EAAA,CACC,OAAAC,EAAAT,EAAAQ,CAAA,EAAA,SAAAE,CAAA,GAAA,KASD,SAAAE,EAAAZ,EAAAQ,EAAA,CACC,OAAAC,EAAAT,EAAAQ,CAAA,EAAA,OAAAE,CAAA,EASD,SAAAD,EAAAT,EAAAQ,EAAA,wCAeA,SAAAK,EAAAb,EAAAc,EAAA,SAAAC,EAAA,OAAA,MAQC,OAAAf,EAAA,UACCA,EAAA,QAAA,CAAA,uBAODe,IAAA,MACC,OAAAf,EAAA,QAAAc,CAAA,EAGDd,EAAA,QAAAc,CAAA,mBAWA,OAAAd,EAAA,QAGD,MAAAgB,EAAA,CAAe,MAAAC,EACd,UAAAP,EACA,OAAAQ,EACA,IAAAhB,EACA,KAAAE,EACA,qBAAAG,EACA,yBAAAI,EACA,wBAAAC,EACA,sBAAAH,EACA,QAAAI,EACA,aAAAM"}

package/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sources":["../../src/core/utils/dom.ts"],"sourcesContent":["/**\r\n * Функции для работы с работы с Document Object Model (DOM)\r\n */\r\n\r\n/**\r\n * Создать элемент\r\n * @param {string} tagName\r\n * @param {any} attrs - атрибуты\r\n * @param {Element[]} elsChildrens\r\n * @returns {Element} - созданный элемент\r\n */\r\nfunction genEl (tagName: string, attrs: any, ...elsChildrens: Element[]): Element {\r\n\tconst el: any = document.createElement(tagName);\r\n\r\n\tfor (const name in attrs) {\r\n\t\tif (name.indexOf('on') === 0) {\r\n\t\t\t// events\r\n\t\t\tel[name] = attrs[name];\r\n\t\t} else {\r\n\t\t\tel.setAttribute(name, attrs[name]);\r\n\t\t}\r\n\t}\r\n\r\n\telsChildrens.forEach((elChildren) => {\r\n\t\tif (typeof (elChildren) === 'string') {\r\n\t\t\tel.insertAdjacentHTML('beforeend', elChildren);\r\n\t\t} else {\r\n\t\t\tel.append(elChildren);\r\n\t\t}\r\n\t});\r\n\r\n\treturn el;\r\n}\r\n\r\n/**\r\n * Проверить видимость элемента\r\n * @param {?Element} el\r\n * @returns boolean - вернет true, если элемент считается видимым\r\n */\r\nfunction isVisible (el?: Element) {\r\n\tif (!el) {\r\n\t\treturn false;\r\n\t}\r\n\r\n\tconst boundingClientRect = el.getBoundingClientRect();\r\n\treturn !!(boundingClientRect.width || boundingClientRect.height);\r\n}\r\n\r\n/**\r\n * Получить координаты элемента относительно документа\r\n * @param {Element} el\r\n * @returns {{top: number, left: number}} - координаты элемента относительно документа\r\n */\r\nfunction offset (el: Element): { top: number, left: number } {\r\n\tconst boundingClientRect = el.getBoundingClientRect();\r\n\r\n\treturn {\r\n\t\ttop: boundingClientRect.top + window.scrollY,\r\n\t\tleft: boundingClientRect.left + window.scrollX,\r\n\t};\r\n}\r\n\r\n/**\r\n * Получить значение css свойства элемента\r\n * @param {Element} el\r\n * @param {string} property - имя свойства\r\n * @return {string} - значение css стиля\r\n */\r\nfunction css (el: Element, property: string): string {\r\n\treturn window.getComputedStyle(el).getPropertyValue(property);\r\n}\r\n\r\n/**\r\n * Обернуть элемент и вернуть только что созданный элемент\r\n * @param {Element} el - элемент, который требуется обернуть\r\n * @param {string} tagName - имя тега элемента, в который треубется обернуть элемент\r\n * @returns {Element}\r\n */\r\nfunction wrap (el: Element, tagName: string): Element {\r\n\tconst elWrapper = document.createElement(tagName);\r\n\tel.after(elWrapper);\r\n\r\n\telWrapper.append(el);\r\n\r\n\treturn elWrapper;\r\n}\r\n\r\n/**\r\n * Найти и вернуть первый видимый элемент\r\n * @param {?Document|Element} el - корневой элемент поиска\r\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\r\n * @returns {Element|null}\r\n */\r\nfunction querySelectorVisible (el: Element, selectors: string): Element | null {\r\n\treturn querySelectorAllArray(el, selectors).find(isVisible) || null;\r\n}\r\n\r\n/**\r\n * Найти и вернуть последний видимый элемент\r\n * @param {?Document|Element} el - корневой элемент поиска\r\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\r\n * @returns {Element|null}\r\n */\r\nfunction querySelectorVisibleLast (el: Element, selectors: string): Element | null {\r\n\treturn querySelectorAllArray(el, selectors).findLast(isVisible) || null;\r\n}\r\n\r\n/**\r\n * Найти видимые элементы\r\n * @param {?Document|Element} el - корневой элемент поиска\r\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\r\n * @returns {Element[]} - обратите внимание, возвращается не NodeList[], а Element[]\r\n */\r\nfunction querySelectorAllVisible (el: Element, selectors: string): Element[] {\r\n\treturn querySelectorAllArray(el, selectors).filter(isVisible);\r\n}\r\n\r\n/**\r\n * Найти элементы и вернуть в виде массива\r\n * @param {?Document|Element} el - корневой элемент поиска\r\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\r\n * @returns {Element[]}\r\n */\r\nfunction querySelectorAllArray (el: Element, selectors: string): Element[] {\r\n\tif (!el) {\r\n\t\treturn [];\r\n\t}\r\n\r\n\treturn [...el.querySelectorAll(selectors)];\r\n}\r\n\r\n/**\r\n * Хранилище данных элемента\r\n * @param {Element} el\r\n * @param {string} contextName - контекст, обычно используется имя компонента\r\n * @param {?object | null} contextData - установить объект с данными, предыдущие данные будут заменены, установите null для удаления данных\r\n * @returns {?object} - вернет объект контекста или undefined, если данные контекста не найдены\r\n */\r\nfunction storage (\r\n\tel?: Element & { topData?: any },\r\n\tcontextName: string = 'common', contextData: object | null | undefined = undefined,\r\n): object | undefined {\r\n\tif (!el) {\r\n\t\treturn;\r\n\t}\r\n\r\n\tif (!el.topData) {\r\n\t\tel.topData = {};\r\n\t}\r\n\r\n\tif (contextData) {\r\n\t\tel.topData[contextName] = contextData;\r\n\t}\r\n\r\n\tif (contextData === null) {\r\n\t\tdelete el.topData[contextName];\r\n\t}\r\n\r\n\treturn el.topData[contextName];\r\n}\r\n\r\n/**\r\n * Очистить хранилище элемента\r\n */\r\nfunction storageClear (el?: Element & { topData?: any }) {\r\n\tif (!el) {\r\n\t\treturn;\r\n\t}\r\n\r\n\tdelete el.topData;\r\n}\r\n\r\nexport default {\r\n\tgenEl,\r\n\tisVisible,\r\n\toffset,\r\n\tcss,\r\n\twrap,\r\n\tquerySelectorVisible,\r\n\tquerySelectorVisibleLast,\r\n\tquerySelectorAllVisible,\r\n\tquerySelectorAllArray,\r\n\tstorage,\r\n\tstorageClear,\r\n};\r\n"],"names":["genEl","tagName","attrs","elsChildrens","el","name","elChildren","isVisible","boundingClientRect","offset","css","property","wrap","elWrapper","querySelectorVisible","selectors","querySelectorAllArray","querySelectorVisibleLast","querySelectorAllVisible","storage","contextName","contextData","storageClear","DOM"],"mappings":"AAWA,SAASA,EAAOC,GAAiBC,MAAeC,GAAkC;AAC3E,QAAAC,IAAU,SAAS,cAAcH,CAAO;AAE9C,aAAWI,KAAQH;AAClB,IAAIG,EAAK,QAAQ,IAAI,MAAM,IAEvBD,EAAAC,CAAI,IAAIH,EAAMG,CAAI,IAErBD,EAAG,aAAaC,GAAMH,EAAMG,CAAI,CAAC;AAItB,SAAAF,EAAA,QAAQ,CAACG,MAAe;AAChC,IAAA,OAAQA,KAAgB,WACxBF,EAAA,mBAAmB,aAAaE,CAAU,IAE7CF,EAAG,OAAOE,CAAU;AAAA,EACrB,CACA,GAEMF;AACR;AAOA,SAASG,EAAWH,GAAc;AACjC,MAAI,CAACA;AACG,WAAA;AAGF,QAAAI,IAAqBJ,EAAG;AAC9B,SAAO,CAAC,EAAEI,EAAmB,SAASA,EAAmB;AAC1D;AAOA,SAASC,EAAQL,GAA4C;AACtD,QAAAI,IAAqBJ,EAAG;AAEvB,SAAA;AAAA,IACN,KAAKI,EAAmB,MAAM,OAAO;AAAA,IACrC,MAAMA,EAAmB,OAAO,OAAO;AAAA,EAAA;AAEzC;AAQA,SAASE,EAAKN,GAAaO,GAA0B;AACpD,SAAO,OAAO,iBAAiBP,CAAE,EAAE,iBAAiBO,CAAQ;AAC7D;AAQA,SAASC,EAAMR,GAAaH,GAA0B;AAC/C,QAAAY,IAAY,SAAS,cAAcZ,CAAO;AAChD,SAAAG,EAAG,MAAMS,CAAS,GAElBA,EAAU,OAAOT,CAAE,GAEZS;AACR;AAQA,SAASC,EAAsBV,GAAaW,GAAmC;AAC9E,SAAOC,EAAsBZ,GAAIW,CAAS,EAAE,KAAKR,CAAS,KAAK;AAChE;AAQA,SAASU,EAA0Bb,GAAaW,GAAmC;AAClF,SAAOC,EAAsBZ,GAAIW,CAAS,EAAE,SAASR,CAAS,KAAK;AACpE;AAQA,SAASW,EAAyBd,GAAaW,GAA8B;AAC5E,SAAOC,EAAsBZ,GAAIW,CAAS,EAAE,OAAOR,CAAS;AAC7D;AAQA,SAASS,EAAuBZ,GAAaW,GAA8B;AAC1E,SAAKX,IAIE,CAAC,GAAGA,EAAG,iBAAiBW,CAAS,CAAC,IAHjC;AAIT;AASA,SAASI,EACRf,GACAgB,IAAsB,UAAUC,IAAyC,QACpD;AACrB,MAAKjB;AAID,WAACA,EAAG,YACPA,EAAG,UAAU,KAGViB,MACAjB,EAAA,QAAQgB,CAAW,IAAIC,IAGvBA,MAAgB,QACZ,OAAAjB,EAAG,QAAQgB,CAAW,GAGvBhB,EAAG,QAAQgB,CAAW;AAC9B;AAKA,SAASE,EAAclB,GAAkC;AACxD,EAAKA,KAIL,OAAOA,EAAG;AACX;AAEA,MAAemB,IAAA;AAAA,EACd,OAAAvB;AAAA,EACA,WAAAO;AAAA,EACA,QAAAE;AAAA,EACA,KAAAC;AAAA,EACA,MAAAE;AAAA,EACA,sBAAAE;AAAA,EACA,0BAAAG;AAAA,EACA,yBAAAC;AAAA,EACA,uBAAAF;AAAA,EACA,SAAAG;AAAA,EACA,cAAAG;AACD;"}
+{"version":3,"file":"dom.js","sources":["../../src/core/utils/dom.ts"],"sourcesContent":["/**\n * Функции для работы с работы с Document Object Model (DOM)\n */\n\n/**\n * Создать элемент\n * @param {string} tagName\n * @param {any} attrs - атрибуты\n * @param {Element[]} elsChildrens\n * @returns {Element} - созданный элемент\n */\nfunction genEl (tagName: string, attrs: any, ...elsChildrens: Element[]): Element {\n\tconst el: any = document.createElement(tagName);\n\n\tfor (const name in attrs) {\n\t\tif (name.indexOf('on') === 0) {\n\t\t\t// events\n\t\t\tel[name] = attrs[name];\n\t\t} else {\n\t\t\tel.setAttribute(name, attrs[name]);\n\t\t}\n\t}\n\n\telsChildrens.forEach((elChildren) => {\n\t\tif (typeof (elChildren) === 'string') {\n\t\t\tel.insertAdjacentHTML('beforeend', elChildren);\n\t\t} else {\n\t\t\tel.append(elChildren);\n\t\t}\n\t});\n\n\treturn el;\n}\n\n/**\n * Проверить видимость элемента\n * @param {?Element} el\n * @returns boolean - вернет true, если элемент считается видимым\n */\nfunction isVisible (el?: Element) {\n\tif (!el) {\n\t\treturn false;\n\t}\n\n\tconst boundingClientRect = el.getBoundingClientRect();\n\treturn !!(boundingClientRect.width || boundingClientRect.height);\n}\n\n/**\n * Получить координаты элемента относительно документа\n * @param {Element} el\n * @returns {{top: number, left: number}} - координаты элемента относительно документа\n */\nfunction offset (el: Element): { top: number, left: number } {\n\tconst boundingClientRect = el.getBoundingClientRect();\n\n\treturn {\n\t\ttop: boundingClientRect.top + window.scrollY,\n\t\tleft: boundingClientRect.left + window.scrollX,\n\t};\n}\n\n/**\n * Получить значение css свойства элемента\n * @param {Element} el\n * @param {string} property - имя свойства\n * @return {string} - значение css стиля\n */\nfunction css (el: Element, property: string): string {\n\treturn window.getComputedStyle(el).getPropertyValue(property);\n}\n\n/**\n * Обернуть элемент и вернуть только что созданный элемент\n * @param {Element} el - элемент, который требуется обернуть\n * @param {string} tagName - имя тега элемента, в который треубется обернуть элемент\n * @returns {Element}\n */\nfunction wrap (el: Element, tagName: string): Element {\n\tconst elWrapper = document.createElement(tagName);\n\tel.after(elWrapper);\n\n\telWrapper.append(el);\n\n\treturn elWrapper;\n}\n\n/**\n * Найти и вернуть первый видимый элемент\n * @param {?Document|Element} el - корневой элемент поиска\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\n * @returns {Element|null}\n */\nfunction querySelectorVisible (el: Element, selectors: string): Element | null {\n\treturn querySelectorAllArray(el, selectors).find(isVisible) || null;\n}\n\n/**\n * Найти и вернуть последний видимый элемент\n * @param {?Document|Element} el - корневой элемент поиска\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\n * @returns {Element|null}\n */\nfunction querySelectorVisibleLast (el: Element, selectors: string): Element | null {\n\treturn querySelectorAllArray(el, selectors).findLast(isVisible) || null;\n}\n\n/**\n * Найти видимые элементы\n * @param {?Document|Element} el - корневой элемент поиска\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\n * @returns {Element[]} - обратите внимание, возвращается не NodeList[], а Element[]\n */\nfunction querySelectorAllVisible (el: Element, selectors: string): Element[] {\n\treturn querySelectorAllArray(el, selectors).filter(isVisible);\n}\n\n/**\n * Найти элементы и вернуть в виде массива\n * @param {?Document|Element} el - корневой элемент поиска\n * @param selectors - см. параметр selectors в Document.querySelectorAll()\n * @returns {Element[]}\n */\nfunction querySelectorAllArray (el: Element, selectors: string): Element[] {\n\tif (!el) {\n\t\treturn [];\n\t}\n\n\treturn [...el.querySelectorAll(selectors)];\n}\n\n/**\n * Хранилище данных элемента\n * @param {Element} el\n * @param {string} contextName - контекст, обычно используется имя компонента\n * @param {?object | null} contextData - установить объект с данными, предыдущие данные будут заменены, установите null для удаления данных\n * @returns {?object} - вернет объект контекста или undefined, если данные контекста не найдены\n */\nfunction storage (\n\tel?: Element & { topData?: any },\n\tcontextName: string = 'common', contextData: object | null | undefined = undefined,\n): object | undefined {\n\tif (!el) {\n\t\treturn;\n\t}\n\n\tif (!el.topData) {\n\t\tel.topData = {};\n\t}\n\n\tif (contextData) {\n\t\tel.topData[contextName] = contextData;\n\t}\n\n\tif (contextData === null) {\n\t\tdelete el.topData[contextName];\n\t}\n\n\treturn el.topData[contextName];\n}\n\n/**\n * Очистить хранилище элемента\n */\nfunction storageClear (el?: Element & { topData?: any }) {\n\tif (!el) {\n\t\treturn;\n\t}\n\n\tdelete el.topData;\n}\n\nexport default {\n\tgenEl,\n\tisVisible,\n\toffset,\n\tcss,\n\twrap,\n\tquerySelectorVisible,\n\tquerySelectorVisibleLast,\n\tquerySelectorAllVisible,\n\tquerySelectorAllArray,\n\tstorage,\n\tstorageClear,\n};\n"],"names":["genEl","tagName","attrs","elsChildrens","el","name","elChildren","isVisible","boundingClientRect","offset","css","property","wrap","elWrapper","querySelectorVisible","selectors","querySelectorAllArray","querySelectorVisibleLast","querySelectorAllVisible","storage","contextName","contextData","storageClear","DOM"],"mappings":"AAWA,SAASA,EAAOC,GAAiBC,MAAeC,GAAkC;AAC3E,QAAAC,IAAU,SAAS,cAAcH,CAAO;AAE9C,aAAWI,KAAQH;AAClB,IAAIG,EAAK,QAAQ,IAAI,MAAM,IAEvBD,EAAAC,CAAI,IAAIH,EAAMG,CAAI,IAErBD,EAAG,aAAaC,GAAMH,EAAMG,CAAI,CAAC;AAItB,SAAAF,EAAA,QAAQ,CAACG,MAAe;AAChC,IAAA,OAAQA,KAAgB,WACxBF,EAAA,mBAAmB,aAAaE,CAAU,IAE7CF,EAAG,OAAOE,CAAU;AAAA,EACrB,CACA,GAEMF;AACR;AAOA,SAASG,EAAWH,GAAc;AACjC,MAAI,CAACA;AACG,WAAA;AAGF,QAAAI,IAAqBJ,EAAG;AAC9B,SAAO,CAAC,EAAEI,EAAmB,SAASA,EAAmB;AAC1D;AAOA,SAASC,EAAQL,GAA4C;AACtD,QAAAI,IAAqBJ,EAAG;AAEvB,SAAA;AAAA,IACN,KAAKI,EAAmB,MAAM,OAAO;AAAA,IACrC,MAAMA,EAAmB,OAAO,OAAO;AAAA,EAAA;AAEzC;AAQA,SAASE,EAAKN,GAAaO,GAA0B;AACpD,SAAO,OAAO,iBAAiBP,CAAE,EAAE,iBAAiBO,CAAQ;AAC7D;AAQA,SAASC,EAAMR,GAAaH,GAA0B;AAC/C,QAAAY,IAAY,SAAS,cAAcZ,CAAO;AAChD,SAAAG,EAAG,MAAMS,CAAS,GAElBA,EAAU,OAAOT,CAAE,GAEZS;AACR;AAQA,SAASC,EAAsBV,GAAaW,GAAmC;AAC9E,SAAOC,EAAsBZ,GAAIW,CAAS,EAAE,KAAKR,CAAS,KAAK;AAChE;AAQA,SAASU,EAA0Bb,GAAaW,GAAmC;AAClF,SAAOC,EAAsBZ,GAAIW,CAAS,EAAE,SAASR,CAAS,KAAK;AACpE;AAQA,SAASW,EAAyBd,GAAaW,GAA8B;AAC5E,SAAOC,EAAsBZ,GAAIW,CAAS,EAAE,OAAOR,CAAS;AAC7D;AAQA,SAASS,EAAuBZ,GAAaW,GAA8B;AAC1E,SAAKX,IAIE,CAAC,GAAGA,EAAG,iBAAiBW,CAAS,CAAC,IAHjC;AAIT;AASA,SAASI,EACRf,GACAgB,IAAsB,UAAUC,IAAyC,QACpD;AACrB,MAAKjB;AAID,WAACA,EAAG,YACPA,EAAG,UAAU,KAGViB,MACAjB,EAAA,QAAQgB,CAAW,IAAIC,IAGvBA,MAAgB,QACZ,OAAAjB,EAAG,QAAQgB,CAAW,GAGvBhB,EAAG,QAAQgB,CAAW;AAC9B;AAKA,SAASE,EAAclB,GAAkC;AACxD,EAAKA,KAIL,OAAOA,EAAG;AACX;AAEA,MAAemB,IAAA;AAAA,EACd,OAAAvB;AAAA,EACA,WAAAO;AAAA,EACA,QAAAE;AAAA,EACA,KAAAC;AAAA,EACA,MAAAE;AAAA,EACA,sBAAAE;AAAA,EACA,0BAAAG;AAAA,EACA,yBAAAC;AAAA,EACA,uBAAAF;AAAA,EACA,SAAAG;AAAA,EACA,cAAAG;AACD;"}