@topvisor/ui 1.0.14 → 1.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.chunks/{datepicker-Ri3BN3-Y.es.js → datepicker-CDFryb2R.es.js} +2 -2
- package/.chunks/{datepicker-Ri3BN3-Y.es.js.map → datepicker-CDFryb2R.es.js.map} +1 -1
- package/.chunks/{forms-CHyoeELv.es.js → forms-DmpPuKKh.es.js} +6 -6
- package/.chunks/{forms-CHyoeELv.es.js.map → forms-DmpPuKKh.es.js.map} +1 -1
- package/.chunks/{listItem.vue_vue_type_script_setup_true_lang-Dvz76-gx.es.js → listItem.vue_vue_type_script_setup_true_lang-Cry_LWLq.es.js} +5 -5
- package/.chunks/{listItem.vue_vue_type_script_setup_true_lang-Dvz76-gx.es.js.map → listItem.vue_vue_type_script_setup_true_lang-Cry_LWLq.es.js.map} +1 -1
- package/.chunks/{menu.vue_vue_type_style_index_0_lang-Rex3a5_T.es.js → menu.vue_vue_type_style_index_0_lang-BQFq184r.es.js} +2 -2
- package/.chunks/{menu.vue_vue_type_style_index_0_lang-Rex3a5_T.es.js.map → menu.vue_vue_type_style_index_0_lang-BQFq184r.es.js.map} +1 -1
- package/.chunks/menu.vue_vue_type_style_index_0_lang-Chd1ygyG.amd.js.map +1 -1
- package/.chunks/{notice-Bh-LvHpR.es.js → notice-BNik2ZIo.es.js} +2 -2
- package/.chunks/{notice-Bh-LvHpR.es.js.map → notice-BNik2ZIo.es.js.map} +1 -1
- package/.chunks/{popup-0nFCdjiM.es.js → popup-BxLi2sMk.es.js} +46 -46
- package/.chunks/{popup-0nFCdjiM.es.js.map → popup-BxLi2sMk.es.js.map} +1 -1
- package/.chunks/{popup-B285SUGc.amd.js → popup-Dm9xIxVU.amd.js} +2 -2
- package/.chunks/{popup-B285SUGc.amd.js.map → popup-Dm9xIxVU.amd.js.map} +1 -1
- package/.chunks/{utils-B3neE-vU.es.js → utils-CKpKCxOO.es.js} +2 -2
- package/.chunks/{utils-B3neE-vU.es.js.map → utils-CKpKCxOO.es.js.map} +1 -1
- package/.chunks/{utils-tB3V9IWe.es.js → utils-DFwHp4q7.es.js} +3 -3
- package/.chunks/{utils-tB3V9IWe.es.js.map → utils-DFwHp4q7.es.js.map} +1 -1
- package/assets/menu.css +1 -1
- package/assets/themes/dark-th.css +1 -0
- package/assets/themes/dark.css +1 -1
- package/charts/charts.js +1 -1
- package/components/charts/miniChart/miniChart.d.ts +1 -1
- package/components/popup/lib/popup.d.ts +1 -1
- package/core/app.amd.js +1 -1
- package/core/app.amd.js.map +1 -1
- package/core/app.js +61 -67
- package/core/app.js.map +1 -1
- package/core/utils/clipboard.d.ts +5 -3
- package/dialog/dialog.js +2 -2
- package/forms/forms.js +1 -1
- package/formsExt/formsExt.js +2 -2
- package/icomoon/Topvisor icons.json +269 -198
- package/icomoon/demo.html +530 -488
- package/icomoon/fonts/Topvisor-2.eot +0 -0
- package/icomoon/fonts/Topvisor-2.svg +3 -0
- package/icomoon/fonts/Topvisor-2.ttf +0 -0
- package/icomoon/fonts/Topvisor-2.woff +0 -0
- package/icomoon/selection.json +1 -1
- package/icomoon/style.css +258 -249
- package/layout/layout.js +1 -1
- package/package.json +3 -3
- package/popup/popup.js +2 -2
- package/popup/worker.amd.js +1 -1
- package/popup/worker.js +2 -2
- package/project/project.amd.js +1 -1
- package/project/project.amd.js.map +1 -1
- package/project/project.js +167 -167
- package/project/project.js.map +1 -1
- package/tabsView/tabsView.js +1 -1
- package/utils/clipboard.amd.js +5 -1
- package/utils/clipboard.amd.js.map +1 -1
- package/utils/clipboard.js +29 -6
- package/utils/clipboard.js.map +1 -1
- package/utils/date.js +1 -1
- package/utils/device.js +1 -1
- package/utils/lodash.js +1 -1
- package/utils/price.js +1 -1
- package/utils/string.js +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { Core as
|
|
1
|
+
import { Core as L } from "../core/app.js";
|
|
2
2
|
import { defineComponent as C, onUpdated as I, openBlock as s, createElementBlock as n, Fragment as $, createElementVNode as H, renderSlot as a, ref as B, toRef as P, watch as N, onUnmounted as D, createBlock as h, unref as R, withCtx as _, createCommentVNode as l, Teleport as T, toDisplayString as M, createVNode as E, normalizeClass as w, resolveDynamicComponent as O, mergeProps as U } from "vue";
|
|
3
|
-
import {
|
|
3
|
+
import { b as W } from "./forms-DmpPuKKh.es.js";
|
|
4
4
|
import { TopPopupWorker as k } from "../popup/worker.js";
|
|
5
5
|
const g = ["../assets/listItem.css"].map((i) => import.meta.resolve(i));
|
|
6
|
-
|
|
6
|
+
L.insertCSSLinkToPage(g, !0);
|
|
7
7
|
const z = /* @__PURE__ */ C({
|
|
8
8
|
__name: "opener",
|
|
9
9
|
props: {
|
|
@@ -79,7 +79,7 @@ const z = /* @__PURE__ */ C({
|
|
|
79
79
|
};
|
|
80
80
|
return N(() => p.class, (e, u) => {
|
|
81
81
|
if (!c.value) return;
|
|
82
|
-
const v = (e == null ? void 0 : e.split(" ")) ?? [], S = ((u == null ? void 0 : u.split(" ")) ?? []).filter((
|
|
82
|
+
const v = (e == null ? void 0 : e.split(" ")) ?? [], S = ((u == null ? void 0 : u.split(" ")) ?? []).filter((b) => !v.includes(b));
|
|
83
83
|
c.value.classList.remove(...S), c.value.classList.add(...v);
|
|
84
84
|
}), k.regVueComponent(o, f), D(() => {
|
|
85
85
|
k.unregVueComponent(o);
|
|
@@ -171,4 +171,4 @@ export {
|
|
|
171
171
|
z as a,
|
|
172
172
|
oe as b
|
|
173
173
|
};
|
|
174
|
-
//# sourceMappingURL=listItem.vue_vue_type_script_setup_true_lang-
|
|
174
|
+
//# sourceMappingURL=listItem.vue_vue_type_script_setup_true_lang-Cry_LWLq.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listItem.vue_vue_type_script_setup_true_lang-
|
|
1
|
+
{"version":3,"file":"listItem.vue_vue_type_script_setup_true_lang-Cry_LWLq.es.js","sources":["../../src/components/popup/popup/opener.vue","../../src/components/popup/popup/popup.vue","../../src/components/popup/popup/listItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { onUpdated } from 'vue';\r\nimport type { OpenerProps } from './popup';\r\n\r\nconst props = withDefaults(defineProps<OpenerProps>(), {\r\n\tpos: '3',\r\n\tnotch: true,\r\n\tposBy: 'fixed',\r\n});\r\n\r\nconst id = props.id || Math.random() + '';\r\n\r\nlet elOpener: Element;\r\n\r\n/**\r\n * Необычная функция для проброски props внтурь элемента слота\r\n *\r\n * @param el - вспомогательрный элемент для доступа к элементам слота\r\n */\r\nfunction render(el: any) {\r\n\tsetTimeout(() => {\r\n\t\telOpener = el.nextElementSibling;\r\n\r\n\t\tif (elOpener) {\r\n\t\t\trenderOpener(elOpener);\r\n\t\t}\r\n\t});\r\n}\r\n\r\nonUpdated(() => {\r\n\tif (elOpener) {\r\n\t\trenderOpener(elOpener);\r\n\t}\r\n});\r\n\r\nfunction renderOpener(elOpener: any) {\r\n\t/**\r\n\t * topPopup - необходимый атрибут для всез Popup\r\n\t *\r\n\t * Для Vue вместо него используется атрибут topPopupId\r\n\t */\r\n\telOpener.dataset.topPopup = '#' + id;\r\n\r\n\telOpener.dataset.topPopupId = id;\r\n\telOpener.dataset.topPopupPos = props.pos;\r\n\telOpener.dataset.topPopupPosBy = props.posBy;\r\n\telOpener.dataset.topPopupNotch = props.notch ? 'true' : '';\r\n\telOpener.dataset.topPopupOpenByHover = props.openByHover ? 'true' : '';\r\n}\r\n</script>\r\n\r\n<template>\r\n\t<template :ref=\"render\"></template>\r\n\r\n\t<!-- @slot элемент для открытия Popup -->\r\n\t<slot></slot>\r\n</template>\r\n\r\n<!-- Использует общий deprecated класс .btn -->\r\n<style>\r\nh3[data-top-popup],\r\ndiv[data-top-popup],\r\ni[data-top-popup]:not(.btn),\r\nb[data-top-popup]:not(.btn) {\r\n\tcursor: pointer;\r\n\tuser-select: none;\r\n\tfont-style: normal;\r\n\ttext-decoration: none;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n}\r\n\r\n[data-top-popup][data-top-popup-disabled] {\r\n\tpointer-events: none;\r\n\tcursor: auto !important;\r\n}\r\n\r\ni[contenteditable] {\r\n\tcursor: text !important;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { onUnmounted, ref, toRef, watch } from 'vue';\r\nimport TopHint from '@/components/forms/hint/hint.vue';\r\nimport type PopupClass from '@/components/popup/lib/popup';\r\nimport type { Emits, Props } from './popup';\r\nimport Opener from './opener.vue';\r\nimport Worker from '@/components/popup/lib/worker';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tid: '',\r\n\tpos: '3',\r\n\tnotch: true,\r\n\tposBy: 'fixed',\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst expose = {\r\n\tpopup: undefined as PopupClass | undefined,\r\n};\r\ndefineExpose(expose);\r\n\r\nconst id = props.id || 'top-popup-id-' + Math.random() + '';\r\n\r\nconst elPopupRef = ref<HTMLElement | null>(null);\r\nconst elPopupInnerRef = ref<HTMLElement | null>(null);\r\n\r\n// см. lib/popup\r\nconst onOpen = async (popup: PopupClass) => {\r\n\tif (popup.elPopup) elPopupRef.value = popup.elPopup;\r\n\r\n\tif (popup.elPopupInner) {\r\n\t\tpopup.elPopupInner.innerText = '';\r\n\r\n\t\telPopupInnerRef.value = popup.elPopupInner;\r\n\t}\r\n\r\n\tvueConnector.opened = true;\r\n\tvueConnector.popup = popup;\r\n\r\n\texpose.popup = popup;\r\n\r\n\temit('open', { elPopup: popup.elPopup!, elPopupOpener: popup.el });\r\n};\r\n\r\n// см. lib/popup\r\nconst onClose = (popup: PopupClass) => {\r\n\telPopupInnerRef.value = null;\r\n\r\n\tvueConnector.opened = false;\r\n\tvueConnector.popup = undefined;\r\n\r\n\temit('close', { elPopup: popup.elPopup!, elPopupOpener: popup.el });\r\n};\r\n\r\nconst vueConnector = {\r\n\tonOpen,\r\n\tonClose,\r\n\tclassRef: toRef(props, 'class'),\r\n\topened: false,\r\n\tpopup: undefined as PopupClass | undefined,\r\n\ttransitionDurationRef: toRef(props, 'transitionDuration'),\r\n};\r\n\r\nwatch(() => props.class, (newValue, oldValue) => {\r\n\tif (!elPopupRef.value) return;\r\n\r\n\tconst newClasses = newValue?.split(' ') ?? [];\r\n\tconst oldClasses = oldValue?.split(' ') ?? [];\r\n\r\n\tconst delClasses = oldClasses.filter((oldClass) => !newClasses.includes(oldClass));\r\n\r\n\telPopupRef.value.classList.remove(...delClasses);\r\n\telPopupRef.value.classList.add(...newClasses);\r\n});\r\n\r\nWorker.regVueComponent(id, vueConnector);\r\n\r\nonUnmounted(() => {\r\n\tWorker.unregVueComponent(id);\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<Opener\r\n\t\tv-if=\"$slots.opener\"\r\n\t\t:id=\"id\"\r\n\t\t:pos=\"pos\"\r\n\t\t:posBy=\"posBy\"\r\n\t\t:notch=\"notch\"\r\n\t\t:openByHover=\"openByHover\"\r\n\t>\r\n\t\t<!-- @slot элемент для открытия Popup -->\r\n\t\t<slot name=\"opener\"></slot>\r\n\t</Opener>\r\n\r\n\t<!-- Это шаблон для компонента Popup, сам Popup генерируется в js и может находиться где угодно -->\r\n\t<!-- elPopupInnerRef будет установлен только после открытия и будет сброшен сразу после закрытия Popup -->\r\n\t<teleport\r\n\t\tv-if=\"elPopupInnerRef\"\r\n\t\t:to=\"elPopupInnerRef\"\r\n\t>\r\n\t\t<div v-if=\"$slots.header || $core.state.isMobile\" class=\"top-popup_header\">\r\n\t\t\t<span\r\n\t\t\t\tv-if=\"$core.state.isMobile\"\r\n\t\t\t\tclass=\"top-as-a closer\"\r\n\t\t\t>\r\n\t\t\t\t{{ $i18n.Common.Close }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<!-- @slot Шапка -->\r\n\t\t\t<slot name=\"header\"></slot>\r\n\t\t</div>\r\n\r\n\t\t<div v-if=\"$slots.widget\" class=\"top-popup_widget\">\r\n\t\t\t<!-- @slot Виджет -->\r\n\t\t\t<slot name=\"widget\"></slot>\r\n\t\t</div>\r\n\r\n\t\t<div v-if=\"$slots.content\" class=\"top-popup_content\">\r\n\t\t\t<!-- @slot Контент в свободной форме -->\r\n\t\t\t<slot name=\"content\"></slot>\r\n\t\t</div>\r\n\r\n\t\t<ul\r\n\t\t\tv-if=\"$slots.contentList\"\r\n\t\t\tclass=\"top-popup_content\"\r\n\t\t\t@scroll=\"$emit('scrollContentList', $event)\"\r\n\t\t>\r\n\t\t\t<!-- @slot Контент в виде списка, для вставки элементов списка используйте компонент popup/listItem -->\r\n\t\t\t<slot name=\"contentList\"></slot>\r\n\t\t</ul>\r\n\r\n\t\t<div v-if=\"$slots.footer || footerSupportLink\" class=\"top-popup_footer\">\r\n\t\t\t<a\r\n\t\t\t\tv-if=\"footerSupportLink\"\r\n\t\t\t\tclass=\"top-popup_footerSupportLink\"\r\n\t\t\t\t:href=\"footerSupportLink\"\r\n\t\t\t\ttarget=\"_blank\"\r\n\t\t\t>\r\n\t\t\t\t<TopHint hint=\"\"/>\r\n\t\t\t</a>\r\n\r\n\t\t\t<!-- @slot Футер -->\r\n\t\t\t<slot name=\"footer\"></slot>\r\n\t\t</div>\r\n\t</teleport>\r\n</template>\r\n\r\n<style>\r\n.top-popup_footerSupportLink {\r\n\tmargin-right: auto;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type { ListItemProps } from './popup';\r\n\r\ndefineOptions({\r\n\tinheritAttrs: false,\r\n});\r\n\r\nconst props = withDefaults(defineProps<ListItemProps>(), {\r\n\ttype: 'button',\r\n\tcloseByClick: true,\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<li\r\n\t\t:class=\"{\r\n\t\t'top-popup_liNoSelectable': props.type !== 'button'\r\n\t}\"\r\n\t>\r\n\t\t<component\r\n\t\t\t:is=\"$attrs.href ? 'a' : 'div'\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-popup_listItem': true,\r\n\t\t\t\t'top-popup_listItem-button': props.type === 'button', // оформления кнопки\r\n\t\t\t\t'a': props.type === 'button', // оформления кнопки, deprecated\r\n\t\t\t\t'top-popup_listItem-title': props.type === 'title',\r\n\t\t\t\t'top-popup_listItem-delimiter': props.type === 'delimiter',\r\n\t\t\t\t'top-popup-noCloser': !closeByClick\r\n\t\t\t}\"\r\n\t\t\t:=$attrs\r\n\t\t>\r\n\t\t\t<slot></slot>\r\n\t\t</component>\r\n\t</li>\r\n</template>\r\n"],"names":["props","__props","id","elOpener","render","el","renderOpener","onUpdated","elOpener2","emit","__emit","expose","__expose","elPopupRef","ref","elPopupInnerRef","vueConnector","popup","toRef","watch","newValue","oldValue","newClasses","delClasses","oldClass","Worker","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;AAIA,UAAAA,IAAAC,GAMAC,IAAAF,EAAA,MAAA,KAAA,OAAA,IAAA;AAEA,QAAAG;AAOA,aAAAC,EAAAC,GAAA;AACC,iBAAA,MAAA;AACC,QAAAF,IAAAE,EAAA,oBAEAF,KACCG,EAAAH,CAAA;AAAA,MACD,CAAA;AAAA,IACA;AAGF,IAAAI,EAAA,MAAA;AACC,MAAAJ,KACCG,EAAAH,CAAA;AAAA,IACD,CAAA;AAGD,aAAAG,EAAAE,GAAA;AAMC,MAAAA,EAAA,QAAA,WAAA,MAAAN,GAEAM,EAAA,QAAA,aAAAN,GACAM,EAAA,QAAA,cAAAR,EAAA,KACAQ,EAAA,QAAA,gBAAAR,EAAA,OACAQ,EAAA,QAAA,gBAAAR,EAAA,QAAA,SAAA,IACAQ,EAAA,QAAA,sBAAAR,EAAA,cAAA,SAAA;AAAA,IAAoE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACvCrE,UAAAA,IAAAC,GAOAQ,IAAAC,GAEAC,IAAA;AAAA,MAAe,OAAA;AAAA,IACP;AAER,IAAAC,EAAAD,CAAA;AAEA,UAAAT,IAAAF,EAAA,MAAA,kBAAA,KAAA,OAAA,GAEAa,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GA8BAE,IAAA;AAAA,MAAqB,QA3BrB,OAAAC,MAAA;AACC,QAAAA,EAAA,YAAAJ,EAAA,QAAAI,EAAA,UAEAA,EAAA,iBACCA,EAAA,aAAA,YAAA,IAEAF,EAAA,QAAAE,EAAA,eAGDD,EAAA,SAAA,IACAA,EAAA,QAAAC,GAEAN,EAAA,QAAAM,GAEAR,EAAA,QAAA,EAAA,SAAAQ,EAAA,SAAA,eAAAA,EAAA,GAAA,CAAA;AAAA,MAAiE;AAAA,MAcjE,SAVD,CAAAA,MAAA;AACC,QAAAF,EAAA,QAAA,MAEAC,EAAA,SAAA,IACAA,EAAA,QAAA,QAEAP,EAAA,SAAA,EAAA,SAAAQ,EAAA,SAAA,eAAAA,EAAA,GAAA,CAAA;AAAA,MAAkE;AAAA,MAKlE,UAAAC,EAAAlB,GAAA,OAAA;AAAA,MAC8B,QAAA;AAAA,MACtB,OAAA;AAAA,MACD,uBAAAkB,EAAAlB,GAAA,oBAAA;AAAA,IACiD;AAGzD,WAAAmB,EAAA,MAAAnB,EAAA,OAAA,CAAAoB,GAAAC,MAAA;AACC,UAAA,CAAAR,EAAA,MAAA;AAEA,YAAAS,KAAAF,KAAA,gBAAAA,EAAA,MAAA,SAAA,CAAA,GAGAG,MAFAF,KAAA,gBAAAA,EAAA,MAAA,SAAA,CAAA,GAEA,OAAA,CAAAG,MAAA,CAAAF,EAAA,SAAAE,CAAA,CAAA;AAEA,MAAAX,EAAA,MAAA,UAAA,OAAA,GAAAU,CAAA,GACAV,EAAA,MAAA,UAAA,IAAA,GAAAS,CAAA;AAAA,IAA4C,CAAA,GAG7CG,EAAA,gBAAAvB,GAAAc,CAAA,GAEAU,EAAA,MAAA;AACC,MAAAD,EAAA,kBAAAvB,CAAA;AAAA,IAA2B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxE5B,UAAAF,IAAAC;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Core as S } from "../core/app.js";
|
|
2
2
|
import { defineComponent as E, mergeModels as W, useModel as w, ref as N, onMounted as T, onUpdated as P, openBlock as c, createElementBlock as f, normalizeClass as $, Fragment as b, renderList as q, createBlock as D, mergeProps as d, createSlots as y, withCtx as h, createTextVNode as g, toDisplayString as A, createVNode as K, createCommentVNode as Y } from "vue";
|
|
3
|
-
import { _ as M, i as x, C as z } from "./forms-
|
|
3
|
+
import { _ as M, i as x, C as z } from "./forms-DmpPuKKh.es.js";
|
|
4
4
|
const I = ["../assets/menu.css"].map((n) => import.meta.resolve(n));
|
|
5
5
|
S.insertCSSLinkToPage(I, !0);
|
|
6
6
|
const F = {
|
|
@@ -106,4 +106,4 @@ const F = {
|
|
|
106
106
|
export {
|
|
107
107
|
G as _
|
|
108
108
|
};
|
|
109
|
-
//# sourceMappingURL=menu.vue_vue_type_style_index_0_lang-
|
|
109
|
+
//# sourceMappingURL=menu.vue_vue_type_style_index_0_lang-BQFq184r.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.vue_vue_type_style_index_0_lang-Rex3a5_T.es.js","sources":["../../src/components/formsExt/menu/menu.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { onMounted, onUpdated, ref } from 'vue';\r\nimport type { Item, Props } from './menu';\r\nimport Core from '@/core/core/core';\r\nimport { isSafari } from '@/core/utils/device';\r\nimport TopButton from '@/components/forms/button/button.vue';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tstyling: 'default',\r\n});\r\n\r\nconst model = defineModel({\r\n\trequired: true,\r\n});\r\n\r\nconst el = ref();\r\n\r\n// валидация типа modelValue без возможности выбора нескольких значений (ожидается строка)\r\nif (!props.isMultiple && !(typeof (model.value) === 'string' || model.value instanceof String)) {\r\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected String: ' + typeof (model.value));\r\n}\r\n\r\n// валидация типа modelValue с возможностью выбора нескольких значений (ожидается массив)\r\nif (props.isMultiple && !Array.isArray(model.value)) {\r\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected Array: ' + typeof (model.value));\r\n}\r\n\r\n// для множественного выбора без пустого множества\r\n// если ничего не выбрано, присваиваем 1-ое значение\r\nif (props.isMultiple && !props.canBeEmptyMultiple && Array.isArray(model.value) && !model.value.length) {\r\n\tmodel.value = [props.items[0].href ?? props.items[0].value];\r\n}\r\n\r\nconst itemIsActive = (item: Item) => {\r\n\tif (!Array.isArray(model.value)) {\r\n\t\treturn item.value === model.value;\r\n\t}\r\n\r\n\treturn model.value.includes(item.value);\r\n};\r\n\r\n/**\r\n * Выбрать элемент\r\n * @param item\r\n * @param toggle - добавить или исключить элемент, для isMultiple\r\n */\r\nconst select = (item: Item, toggle = false) => {\r\n\tif (Array.isArray(model.value)) {\r\n\t\tlet modelNew = model.value.slice();\r\n\r\n\t\tif (toggle) {\r\n\t\t\tif (!modelNew.length) modelNew = props.items.map(item => item.value);\r\n\r\n\t\t\tconst index = modelNew.indexOf(item.value);\r\n\t\t\tif (index === -1) {\r\n\t\t\t\tmodelNew.push(item.value);\r\n\t\t\t} else {\r\n\t\t\t\tmodelNew.splice(index, 1);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (modelNew.length === 1 && modelNew[0] === item.value) {\r\n\t\t\t\tmodelNew = [];\r\n\t\t\t} else {\r\n\t\t\t\tmodelNew = [item.value];\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (!props.canBeEmptyMultiple && !modelNew.length) modelNew = [item.value];\r\n\r\n\t\tmodel.value = modelNew;\r\n\r\n\t\treturn;\r\n\t}\r\n\r\n\tmodel.value = item.value;\r\n};\r\n\r\n// вертикальный скролл в горизонтальный скролл\r\nconst onWheel = (event: WheelEvent) => {\r\n\tif (el.value.scrollWidth <= el.value.offsetWidth) return;\r\n\tif (event.shiftKey) return;\r\n\tif (Math.abs(event.deltaY) < 50) return; // устройство с высокой точностью, например тачпад\r\n\r\n\tevent.preventDefault();\r\n\r\n\tconst delta = event.deltaY > 0 ? 30 : -30;\r\n\tel.value.scrollLeft = el.value.scrollLeft + delta;\r\n};\r\n\r\n/**\r\n * Замена стандартному scrollIntoView, который меняет скролл документа\r\n *\r\n * Выравнивание по ближнему краю элемента\r\n *\r\n * Выравнивается таким образом, чтобы был виден соседний элемент\r\n */\r\nconst scrollIntoView = (isSmooth = true) => {\r\n\tconst elBtn = el.value.querySelector('.top-active');\r\n\tif (!elBtn) return;\r\n\r\n\tconst gap = 24;\r\n\r\n\t// левая и правая координаты элемента\r\n\tconst leftMargin = elBtn.offsetLeft - el.value.offsetLeft - gap;\r\n\tconst rightMargin = elBtn.offsetLeft - el.value.offsetLeft + elBtn.clientWidth + gap;\r\n\r\n\t// левая и правая границы видимой части меню\r\n\tconst leftMarginParent = el.value.scrollLeft;\r\n\tconst rightMarginParent = el.value.clientWidth + el.value.scrollLeft;\r\n\r\n\tlet scrollLeft: number | undefined = undefined;\r\n\r\n\t// левую границу элемента к левой границе меню\r\n\tif (leftMargin < leftMarginParent) scrollLeft = leftMargin;\r\n\r\n\t// правую границу элемента к правой границе меню\r\n\tif (rightMargin > rightMarginParent) scrollLeft = rightMargin - el.value.clientWidth;\r\n\r\n\tif (scrollLeft !== undefined) {\r\n\t\tif (isSafari()) {\r\n\t\t\tCore.$?.(el.value).animate({ scrollLeft: scrollLeft }, isSmooth ? 200 : 0);\r\n\t\t} else {\r\n\t\t\tel.value.scrollTo({ left: scrollLeft, behavior: isSmooth ? 'smooth' : 'auto' });\r\n\t\t}\r\n\t}\r\n};\r\n\r\n/**\r\n * Выбрать все элементы в меню\r\n */\r\nconst selectAll = () => {\r\n\tif (!Array.isArray(model.value)) return;\r\n\r\n\tif (model.value.length === props.items.length) {\r\n\t\tmodel.value = [props.items[0].href ?? props.items[0].value];\r\n\t\treturn;\r\n\t}\r\n\r\n\tmodel.value = props.items.map(item => item.href ?? item.value);\r\n};\r\n\r\nonMounted(() => scrollIntoView(false));\r\nonUpdated(() => scrollIntoView(true));\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tref=\"el\"\r\n\t\t:class=\"{\r\n\t\t\t'top-menu': true,\r\n\t\t\t['top-style_' + styling]: true,\r\n\t\t\t// ['top-unwrap-x']: styling === 'default',\r\n\t\t}\"\r\n\t\t@wheel=\"onWheel\"\r\n\t>\r\n\t\t<TopButton\r\n\t\t\tv-for=\"item in items\"\r\n\t\t\t:=\"item\"\r\n\t\t\tclass=\"top-menu_item\"\r\n\t\t\tcolor=\"theme\"\r\n\t\t\t@click=\"select(item, $event.ctrlKey)\"\r\n\t\t\t:isActive=\"itemIsActive(item)\"\r\n\t\t>\r\n\t\t\t<template #default v-if=\"item.content\">\r\n\t\t\t\t{{ item.content }}\r\n\t\t\t</template>\r\n\t\t</TopButton>\r\n\r\n\t\t<div\r\n\t\t\tv-if=\"Array.isArray(model) && selectAllItem\"\r\n\t\t\tclass=\"top-menu_selectAll\"\r\n\t\t>\r\n\t\t\t<TopButton\r\n\t\t\t\t:=\"selectAllItem\"\r\n\t\t\t\tclass=\"top-menu_item\"\r\n\t\t\t\tcolor=\"theme\"\r\n\t\t\t\tstyling=\"\"\r\n\t\t\t\t@click=\"selectAll()\"\r\n\t\t\t\t:isActive=\"model.length === items.length\"\r\n\t\t\t>\r\n\t\t\t\t<template #default v-if=\"selectAllItem.content\">\r\n\t\t\t\t\t{{ selectAllItem.content }}\r\n\t\t\t\t</template>\r\n\t\t\t</TopButton>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style>\r\n.top-menu {\r\n\t--scroll-thumb-color: var(--color-line-1);\r\n\t--scroll-thumb-color-hover: var(--color-line-2);\r\n\t--scroll-thumb-color-active: var(--color-line-3);\r\n\r\n\tmax-width: 100%;\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n\tgap: var(--top-gap-2);\r\n\toverflow-x: auto;\r\n\tscrollbar-width: none; /* firefox */\r\n\r\n\t/* предотвратить натинвые события браузера (назад / вперед) */\r\n\toverscroll-behavior-x: contain;\r\n}\r\n\r\n.top-menu::-webkit-scrollbar { display: none; }\r\n\r\n.top-menu .top-menu_item {\r\n\t--top-button-color: var(--color-text-2);\r\n\r\n\toutline-offset: -2px !important;\r\n\tmin-width: 0;\r\n\tmargin: 0;\r\n\tflex-shrink: 0;\r\n}\r\n\r\n.top-menu .top-menu_item[data-top-icon] {\r\n\t--top-icon-color: var(--color-text-2);\r\n}\r\n\r\n.top-menu_selectAll {\r\n\tposition: sticky;\r\n\tright: 0;\r\n\tbackground: var(--color-layout-front-1);\r\n\tborder-left: 1px solid var(--color-line-1);\r\n\tpadding-left: var(--top-padding-1);\r\n\tbox-shadow: var(--color-layout-front-1) var(--top-padding-2) 0px;\r\n}\r\n\r\n/* style default */\r\n.top-menu.top-style_default .top-menu_item {\r\n\t--top-forms-radius: 0;\r\n\t--top-forms-border-color: transparent;\r\n\t--top-forms-border-width: 2px;\r\n\r\n\tfilter: none;\r\n\tbox-shadow: none;\r\n\tborder: none;\r\n\tborder-bottom: var(--top-forms-border-width) solid var(--top-forms-border-color);\r\n\tbackground: none;\r\n}\r\n\r\n.top-style_default > .top-menu_item > [data-top-badge] {\r\n\tmargin-top: 0;\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_item:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\t--top-button-color: var(--color-text-1);\r\n\t--top-forms-border-color: var(--color-line-2);\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_item:active,\r\n.top-menu.top-style_default .top-menu_item.top-active {\r\n\t--top-icon-color: var(--color-text-primary);\r\n\t--top-button-color: var(--color-text-1);\r\n\t--top-forms-border-color: var(--color-line-primary-1);\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_selectAll {\r\n\tpadding-left: var(--top-padding-2);\r\n}\r\n\r\n/* style bar */\r\n.top-menu.top-style_bar {\r\n\tborder-radius: var(--top-radius-3);\r\n\tborder: 1px solid var(--color-line-2);\r\n\tpadding: var(--top-padding-1);\r\n\tgap: 3px;\r\n}\r\n.top-menu.top-style_bar .top-menu_item {\r\n\t--top-button-background-color-hover: var(--color-layer-1);\r\n\t--top-button-background-color-active: var(--color-layer-2);\r\n\t--top-button-background-color-selected: var(--color-layer-primary-1);\r\n\r\n\tposition: relative;\r\n}\r\n\r\n.top-menu.top-style_bar .top-menu_item:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\t--top-button-color: var(--color-text-1);\r\n}\r\n\r\n.top-menu.top-style_bar .top-menu_item.top-active {\r\n\t--top-icon-color: var(--color-text-primary);\r\n\t--top-button-color: var(--color-text-primary);\r\n}\r\n\r\n/* разделители кнопок в баре */\r\n.top-menu.top-style_bar .top-menu_item:not(:first-child):not(.top-active):not(:hover):after {\r\n\tcontent: \"\";\r\n\tbackground: var(--color-line-1-opacity);\r\n\twidth: 1px;\r\n\theight: 60%;\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\tleft: -2px;\r\n}\r\n.top-menu.top-style_bar .top-menu_item.top-active + .top-menu_item:after,\r\n.top-menu.top-style_bar .top-menu_item:hover + .top-menu_item:after {\r\n\tcontent: none !important;\r\n}\r\n\r\n/*\r\n.top-style_bar > .top-menu_item > [data-top-badge] {\r\n\tmargin-top: -3px;\r\n}\r\n*/\r\n\r\n/** TODO: .top-unwrap-x надо вынести глобально в UI или добавить в стили для storybook */\r\n/*\r\n.top-menu.top-unwrap-x {\r\n\tpadding-right: var(--top-unwrap-x);\r\n\tpadding-left: var(--top-unwrap-x);\r\n\tmargin-right: calc(0px - var(--top-unwrap-x));\r\n\tmargin-left: calc(0px - var(--top-unwrap-x));\r\n}\r\n*/\r\n</style>\r\n"],"names":["props","__props","model","useModel","el","ref","itemIsActive","item","select","toggle","modelNew","item2","index","onWheel","event","delta","scrollIntoView","isSmooth","elBtn","gap","leftMargin","rightMargin","leftMarginParent","rightMarginParent","scrollLeft","isSafari","_b","_a","Core","selectAll","onMounted","onUpdated"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"menu.vue_vue_type_style_index_0_lang-BQFq184r.es.js","sources":["../../src/components/formsExt/menu/menu.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { onMounted, onUpdated, ref } from 'vue';\r\nimport type { Item, Props } from './menu';\r\nimport Core from '@/core/core/core';\r\nimport { isSafari } from '@/core/utils/device';\r\nimport TopButton from '@/components/forms/button/button.vue';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tstyling: 'default',\r\n});\r\n\r\nconst model = defineModel({\r\n\trequired: true,\r\n});\r\n\r\nconst el = ref();\r\n\r\n// валидация типа modelValue без возможности выбора нескольких значений (ожидается строка)\r\nif (!props.isMultiple && !(typeof (model.value) === 'string' || model.value instanceof String)) {\r\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected String: ' + typeof (model.value));\r\n}\r\n\r\n// валидация типа modelValue с возможностью выбора нескольких значений (ожидается массив)\r\nif (props.isMultiple && !Array.isArray(model.value)) {\r\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected Array: ' + typeof (model.value));\r\n}\r\n\r\n// для множественного выбора без пустого множества\r\n// если ничего не выбрано, присваиваем 1-ое значение\r\nif (props.isMultiple && !props.canBeEmptyMultiple && Array.isArray(model.value) && !model.value.length) {\r\n\tmodel.value = [props.items[0].href ?? props.items[0].value];\r\n}\r\n\r\nconst itemIsActive = (item: Item) => {\r\n\tif (!Array.isArray(model.value)) {\r\n\t\treturn item.value === model.value;\r\n\t}\r\n\r\n\treturn model.value.includes(item.value);\r\n};\r\n\r\n/**\r\n * Выбрать элемент\r\n * @param item\r\n * @param toggle - добавить или исключить элемент, для isMultiple\r\n */\r\nconst select = (item: Item, toggle = false) => {\r\n\tif (Array.isArray(model.value)) {\r\n\t\tlet modelNew = model.value.slice();\r\n\r\n\t\tif (toggle) {\r\n\t\t\tif (!modelNew.length) modelNew = props.items.map(item => item.value);\r\n\r\n\t\t\tconst index = modelNew.indexOf(item.value);\r\n\t\t\tif (index === -1) {\r\n\t\t\t\tmodelNew.push(item.value);\r\n\t\t\t} else {\r\n\t\t\t\tmodelNew.splice(index, 1);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (modelNew.length === 1 && modelNew[0] === item.value) {\r\n\t\t\t\tmodelNew = [];\r\n\t\t\t} else {\r\n\t\t\t\tmodelNew = [item.value];\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (!props.canBeEmptyMultiple && !modelNew.length) modelNew = [item.value];\r\n\r\n\t\tmodel.value = modelNew;\r\n\r\n\t\treturn;\r\n\t}\r\n\r\n\tmodel.value = item.value;\r\n};\r\n\r\n// вертикальный скролл в горизонтальный скролл\r\nconst onWheel = (event: WheelEvent) => {\r\n\tif (el.value.scrollWidth <= el.value.offsetWidth) return;\r\n\tif (event.shiftKey) return;\r\n\tif (Math.abs(event.deltaY) < 50) return; // устройство с высокой точностью, например тачпад\r\n\r\n\tevent.preventDefault();\r\n\r\n\tconst delta = event.deltaY > 0 ? 30 : -30;\r\n\tel.value.scrollLeft = el.value.scrollLeft + delta;\r\n};\r\n\r\n/**\r\n * Замена стандартному scrollIntoView, который меняет скролл документа\r\n *\r\n * Выравнивание по ближнему краю элемента\r\n *\r\n * Выравнивается таким образом, чтобы был виден соседний элемент\r\n */\r\nconst scrollIntoView = (isSmooth = true) => {\r\n\tconst elBtn = el.value.querySelector('.top-active');\r\n\tif (!elBtn) return;\r\n\r\n\tconst gap = 24;\r\n\r\n\t// левая и правая координаты элемента\r\n\tconst leftMargin = elBtn.offsetLeft - el.value.offsetLeft - gap;\r\n\tconst rightMargin = elBtn.offsetLeft - el.value.offsetLeft + elBtn.clientWidth + gap;\r\n\r\n\t// левая и правая границы видимой части меню\r\n\tconst leftMarginParent = el.value.scrollLeft;\r\n\tconst rightMarginParent = el.value.clientWidth + el.value.scrollLeft;\r\n\r\n\tlet scrollLeft: number | undefined = undefined;\r\n\r\n\t// левую границу элемента к левой границе меню\r\n\tif (leftMargin < leftMarginParent) scrollLeft = leftMargin;\r\n\r\n\t// правую границу элемента к правой границе меню\r\n\tif (rightMargin > rightMarginParent) scrollLeft = rightMargin - el.value.clientWidth;\r\n\r\n\tif (scrollLeft !== undefined) {\r\n\t\tif (isSafari()) {\r\n\t\t\tCore.$?.(el.value).animate({ scrollLeft: scrollLeft }, isSmooth ? 200 : 0);\r\n\t\t} else {\r\n\t\t\tel.value.scrollTo({ left: scrollLeft, behavior: isSmooth ? 'smooth' : 'auto' });\r\n\t\t}\r\n\t}\r\n};\r\n\r\n/**\r\n * Выбрать все элементы в меню\r\n */\r\nconst selectAll = () => {\r\n\tif (!Array.isArray(model.value)) return;\r\n\r\n\tif (model.value.length === props.items.length) {\r\n\t\tmodel.value = [props.items[0].href ?? props.items[0].value];\r\n\t\treturn;\r\n\t}\r\n\r\n\tmodel.value = props.items.map(item => item.href ?? item.value);\r\n};\r\n\r\nonMounted(() => scrollIntoView(false));\r\nonUpdated(() => scrollIntoView(true));\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tref=\"el\"\r\n\t\t:class=\"{\r\n\t\t\t'top-menu': true,\r\n\t\t\t['top-style_' + styling]: true,\r\n\t\t\t// ['top-unwrap-x']: styling === 'default',\r\n\t\t}\"\r\n\t\t@wheel=\"onWheel\"\r\n\t>\r\n\t\t<TopButton\r\n\t\t\tv-for=\"item in items\"\r\n\t\t\t:=\"item\"\r\n\t\t\tclass=\"top-menu_item\"\r\n\t\t\tcolor=\"theme\"\r\n\t\t\t@click=\"select(item, $event.ctrlKey)\"\r\n\t\t\t:isActive=\"itemIsActive(item)\"\r\n\t\t>\r\n\t\t\t<template #default v-if=\"item.content\">\r\n\t\t\t\t{{ item.content }}\r\n\t\t\t</template>\r\n\t\t</TopButton>\r\n\r\n\t\t<div\r\n\t\t\tv-if=\"Array.isArray(model) && selectAllItem\"\r\n\t\t\tclass=\"top-menu_selectAll\"\r\n\t\t>\r\n\t\t\t<TopButton\r\n\t\t\t\t:=\"selectAllItem\"\r\n\t\t\t\tclass=\"top-menu_item\"\r\n\t\t\t\tcolor=\"theme\"\r\n\t\t\t\tstyling=\"\"\r\n\t\t\t\t@click=\"selectAll()\"\r\n\t\t\t\t:isActive=\"model.length === items.length\"\r\n\t\t\t>\r\n\t\t\t\t<template #default v-if=\"selectAllItem.content\">\r\n\t\t\t\t\t{{ selectAllItem.content }}\r\n\t\t\t\t</template>\r\n\t\t\t</TopButton>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style>\r\n.top-menu {\r\n\t--scroll-thumb-color: var(--color-line-1);\r\n\t--scroll-thumb-color-hover: var(--color-line-2);\r\n\t--scroll-thumb-color-active: var(--color-line-3);\r\n\r\n\tmax-width: 100%;\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n\tgap: var(--top-gap-2);\r\n\toverflow-x: auto;\r\n\tscrollbar-width: none; /* firefox */\r\n\r\n\t/* предотвратить натинвые события браузера (назад / вперед) */\r\n\toverscroll-behavior-x: contain;\r\n}\r\n\r\n.top-menu::-webkit-scrollbar { display: none; }\r\n\r\n.top-menu .top-menu_item {\r\n\t--top-button-color: var(--color-text-2);\r\n\r\n\toutline-offset: -2px !important;\r\n\tmin-width: 0;\r\n\tmax-width: 200px;\r\n\tmargin: 0;\r\n\tflex-shrink: 0;\r\n}\r\n\r\n.top-menu .top-menu_item[data-top-icon] {\r\n\t--top-icon-color: var(--color-text-2);\r\n}\r\n\r\n.top-menu_selectAll {\r\n\tposition: sticky;\r\n\tright: 0;\r\n\tbackground: var(--color-layout-front-1);\r\n\tborder-left: 1px solid var(--color-line-1);\r\n\tpadding-left: var(--top-padding-1);\r\n\tbox-shadow: var(--color-layout-front-1) var(--top-padding-2) 0px;\r\n}\r\n\r\n/* style default */\r\n.top-menu.top-style_default .top-menu_item {\r\n\t--top-forms-radius: 0;\r\n\t--top-forms-border-color: transparent;\r\n\t--top-forms-border-width: 2px;\r\n\r\n\tfilter: none;\r\n\tbox-shadow: none;\r\n\tborder: none;\r\n\tborder-bottom: var(--top-forms-border-width) solid var(--top-forms-border-color);\r\n\tbackground: none;\r\n}\r\n\r\n.top-style_default > .top-menu_item > [data-top-badge] {\r\n\tmargin-top: 0;\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_item:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\t--top-button-color: var(--color-text-1);\r\n\t--top-forms-border-color: var(--color-line-2);\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_item:active,\r\n.top-menu.top-style_default .top-menu_item.top-active {\r\n\t--top-icon-color: var(--color-text-primary);\r\n\t--top-button-color: var(--color-text-1);\r\n\t--top-forms-border-color: var(--color-line-primary-1);\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_selectAll {\r\n\tpadding-left: var(--top-padding-2);\r\n}\r\n\r\n/* style bar */\r\n.top-menu.top-style_bar {\r\n\tborder-radius: var(--top-radius-3);\r\n\tborder: 1px solid var(--color-line-2);\r\n\tpadding: var(--top-padding-1);\r\n\tgap: 3px;\r\n}\r\n.top-menu.top-style_bar .top-menu_item {\r\n\t--top-button-background-color-hover: var(--color-layer-1);\r\n\t--top-button-background-color-active: var(--color-layer-2);\r\n\t--top-button-background-color-selected: var(--color-layer-primary-1);\r\n\r\n\tposition: relative;\r\n}\r\n\r\n.top-menu.top-style_bar .top-menu_item:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\t--top-button-color: var(--color-text-1);\r\n}\r\n\r\n.top-menu.top-style_bar .top-menu_item.top-active {\r\n\t--top-icon-color: var(--color-text-primary);\r\n\t--top-button-color: var(--color-text-primary);\r\n}\r\n\r\n/* разделители кнопок в баре */\r\n.top-menu.top-style_bar .top-menu_item:not(:first-child):not(.top-active):not(:hover):after {\r\n\tcontent: \"\";\r\n\tbackground: var(--color-line-1-opacity);\r\n\twidth: 1px;\r\n\theight: 60%;\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\tleft: -2px;\r\n}\r\n.top-menu.top-style_bar .top-menu_item.top-active + .top-menu_item:after,\r\n.top-menu.top-style_bar .top-menu_item:hover + .top-menu_item:after {\r\n\tcontent: none !important;\r\n}\r\n\r\n/*\r\n.top-style_bar > .top-menu_item > [data-top-badge] {\r\n\tmargin-top: -3px;\r\n}\r\n*/\r\n\r\n/** TODO: .top-unwrap-x надо вынести глобально в UI или добавить в стили для storybook */\r\n/*\r\n.top-menu.top-unwrap-x {\r\n\tpadding-right: var(--top-unwrap-x);\r\n\tpadding-left: var(--top-unwrap-x);\r\n\tmargin-right: calc(0px - var(--top-unwrap-x));\r\n\tmargin-left: calc(0px - var(--top-unwrap-x));\r\n}\r\n*/\r\n</style>\r\n"],"names":["props","__props","model","useModel","el","ref","itemIsActive","item","select","toggle","modelNew","item2","index","onWheel","event","delta","scrollIntoView","isSmooth","elBtn","gap","leftMargin","rightMargin","leftMarginParent","rightMarginParent","scrollLeft","isSafari","_b","_a","Core","selectAll","onMounted","onUpdated"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.vue_vue_type_style_index_0_lang-Chd1ygyG.amd.js","sources":["../../src/components/formsExt/menu/menu.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { onMounted, onUpdated, ref } from 'vue';\r\nimport type { Item, Props } from './menu';\r\nimport Core from '@/core/core/core';\r\nimport { isSafari } from '@/core/utils/device';\r\nimport TopButton from '@/components/forms/button/button.vue';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tstyling: 'default',\r\n});\r\n\r\nconst model = defineModel({\r\n\trequired: true,\r\n});\r\n\r\nconst el = ref();\r\n\r\n// валидация типа modelValue без возможности выбора нескольких значений (ожидается строка)\r\nif (!props.isMultiple && !(typeof (model.value) === 'string' || model.value instanceof String)) {\r\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected String: ' + typeof (model.value));\r\n}\r\n\r\n// валидация типа modelValue с возможностью выбора нескольких значений (ожидается массив)\r\nif (props.isMultiple && !Array.isArray(model.value)) {\r\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected Array: ' + typeof (model.value));\r\n}\r\n\r\n// для множественного выбора без пустого множества\r\n// если ничего не выбрано, присваиваем 1-ое значение\r\nif (props.isMultiple && !props.canBeEmptyMultiple && Array.isArray(model.value) && !model.value.length) {\r\n\tmodel.value = [props.items[0].href ?? props.items[0].value];\r\n}\r\n\r\nconst itemIsActive = (item: Item) => {\r\n\tif (!Array.isArray(model.value)) {\r\n\t\treturn item.value === model.value;\r\n\t}\r\n\r\n\treturn model.value.includes(item.value);\r\n};\r\n\r\n/**\r\n * Выбрать элемент\r\n * @param item\r\n * @param toggle - добавить или исключить элемент, для isMultiple\r\n */\r\nconst select = (item: Item, toggle = false) => {\r\n\tif (Array.isArray(model.value)) {\r\n\t\tlet modelNew = model.value.slice();\r\n\r\n\t\tif (toggle) {\r\n\t\t\tif (!modelNew.length) modelNew = props.items.map(item => item.value);\r\n\r\n\t\t\tconst index = modelNew.indexOf(item.value);\r\n\t\t\tif (index === -1) {\r\n\t\t\t\tmodelNew.push(item.value);\r\n\t\t\t} else {\r\n\t\t\t\tmodelNew.splice(index, 1);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (modelNew.length === 1 && modelNew[0] === item.value) {\r\n\t\t\t\tmodelNew = [];\r\n\t\t\t} else {\r\n\t\t\t\tmodelNew = [item.value];\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (!props.canBeEmptyMultiple && !modelNew.length) modelNew = [item.value];\r\n\r\n\t\tmodel.value = modelNew;\r\n\r\n\t\treturn;\r\n\t}\r\n\r\n\tmodel.value = item.value;\r\n};\r\n\r\n// вертикальный скролл в горизонтальный скролл\r\nconst onWheel = (event: WheelEvent) => {\r\n\tif (el.value.scrollWidth <= el.value.offsetWidth) return;\r\n\tif (event.shiftKey) return;\r\n\tif (Math.abs(event.deltaY) < 50) return; // устройство с высокой точностью, например тачпад\r\n\r\n\tevent.preventDefault();\r\n\r\n\tconst delta = event.deltaY > 0 ? 30 : -30;\r\n\tel.value.scrollLeft = el.value.scrollLeft + delta;\r\n};\r\n\r\n/**\r\n * Замена стандартному scrollIntoView, который меняет скролл документа\r\n *\r\n * Выравнивание по ближнему краю элемента\r\n *\r\n * Выравнивается таким образом, чтобы был виден соседний элемент\r\n */\r\nconst scrollIntoView = (isSmooth = true) => {\r\n\tconst elBtn = el.value.querySelector('.top-active');\r\n\tif (!elBtn) return;\r\n\r\n\tconst gap = 24;\r\n\r\n\t// левая и правая координаты элемента\r\n\tconst leftMargin = elBtn.offsetLeft - el.value.offsetLeft - gap;\r\n\tconst rightMargin = elBtn.offsetLeft - el.value.offsetLeft + elBtn.clientWidth + gap;\r\n\r\n\t// левая и правая границы видимой части меню\r\n\tconst leftMarginParent = el.value.scrollLeft;\r\n\tconst rightMarginParent = el.value.clientWidth + el.value.scrollLeft;\r\n\r\n\tlet scrollLeft: number | undefined = undefined;\r\n\r\n\t// левую границу элемента к левой границе меню\r\n\tif (leftMargin < leftMarginParent) scrollLeft = leftMargin;\r\n\r\n\t// правую границу элемента к правой границе меню\r\n\tif (rightMargin > rightMarginParent) scrollLeft = rightMargin - el.value.clientWidth;\r\n\r\n\tif (scrollLeft !== undefined) {\r\n\t\tif (isSafari()) {\r\n\t\t\tCore.$?.(el.value).animate({ scrollLeft: scrollLeft }, isSmooth ? 200 : 0);\r\n\t\t} else {\r\n\t\t\tel.value.scrollTo({ left: scrollLeft, behavior: isSmooth ? 'smooth' : 'auto' });\r\n\t\t}\r\n\t}\r\n};\r\n\r\n/**\r\n * Выбрать все элементы в меню\r\n */\r\nconst selectAll = () => {\r\n\tif (!Array.isArray(model.value)) return;\r\n\r\n\tif (model.value.length === props.items.length) {\r\n\t\tmodel.value = [props.items[0].href ?? props.items[0].value];\r\n\t\treturn;\r\n\t}\r\n\r\n\tmodel.value = props.items.map(item => item.href ?? item.value);\r\n};\r\n\r\nonMounted(() => scrollIntoView(false));\r\nonUpdated(() => scrollIntoView(true));\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tref=\"el\"\r\n\t\t:class=\"{\r\n\t\t\t'top-menu': true,\r\n\t\t\t['top-style_' + styling]: true,\r\n\t\t\t// ['top-unwrap-x']: styling === 'default',\r\n\t\t}\"\r\n\t\t@wheel=\"onWheel\"\r\n\t>\r\n\t\t<TopButton\r\n\t\t\tv-for=\"item in items\"\r\n\t\t\t:=\"item\"\r\n\t\t\tclass=\"top-menu_item\"\r\n\t\t\tcolor=\"theme\"\r\n\t\t\t@click=\"select(item, $event.ctrlKey)\"\r\n\t\t\t:isActive=\"itemIsActive(item)\"\r\n\t\t>\r\n\t\t\t<template #default v-if=\"item.content\">\r\n\t\t\t\t{{ item.content }}\r\n\t\t\t</template>\r\n\t\t</TopButton>\r\n\r\n\t\t<div\r\n\t\t\tv-if=\"Array.isArray(model) && selectAllItem\"\r\n\t\t\tclass=\"top-menu_selectAll\"\r\n\t\t>\r\n\t\t\t<TopButton\r\n\t\t\t\t:=\"selectAllItem\"\r\n\t\t\t\tclass=\"top-menu_item\"\r\n\t\t\t\tcolor=\"theme\"\r\n\t\t\t\tstyling=\"\"\r\n\t\t\t\t@click=\"selectAll()\"\r\n\t\t\t\t:isActive=\"model.length === items.length\"\r\n\t\t\t>\r\n\t\t\t\t<template #default v-if=\"selectAllItem.content\">\r\n\t\t\t\t\t{{ selectAllItem.content }}\r\n\t\t\t\t</template>\r\n\t\t\t</TopButton>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style>\r\n.top-menu {\r\n\t--scroll-thumb-color: var(--color-line-1);\r\n\t--scroll-thumb-color-hover: var(--color-line-2);\r\n\t--scroll-thumb-color-active: var(--color-line-3);\r\n\r\n\tmax-width: 100%;\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n\tgap: var(--top-gap-2);\r\n\toverflow-x: auto;\r\n\tscrollbar-width: none; /* firefox */\r\n\r\n\t/* предотвратить натинвые события браузера (назад / вперед) */\r\n\toverscroll-behavior-x: contain;\r\n}\r\n\r\n.top-menu::-webkit-scrollbar { display: none; }\r\n\r\n.top-menu .top-menu_item {\r\n\t--top-button-color: var(--color-text-2);\r\n\r\n\toutline-offset: -2px !important;\r\n\tmin-width: 0;\r\n\tmargin: 0;\r\n\tflex-shrink: 0;\r\n}\r\n\r\n.top-menu .top-menu_item[data-top-icon] {\r\n\t--top-icon-color: var(--color-text-2);\r\n}\r\n\r\n.top-menu_selectAll {\r\n\tposition: sticky;\r\n\tright: 0;\r\n\tbackground: var(--color-layout-front-1);\r\n\tborder-left: 1px solid var(--color-line-1);\r\n\tpadding-left: var(--top-padding-1);\r\n\tbox-shadow: var(--color-layout-front-1) var(--top-padding-2) 0px;\r\n}\r\n\r\n/* style default */\r\n.top-menu.top-style_default .top-menu_item {\r\n\t--top-forms-radius: 0;\r\n\t--top-forms-border-color: transparent;\r\n\t--top-forms-border-width: 2px;\r\n\r\n\tfilter: none;\r\n\tbox-shadow: none;\r\n\tborder: none;\r\n\tborder-bottom: var(--top-forms-border-width) solid var(--top-forms-border-color);\r\n\tbackground: none;\r\n}\r\n\r\n.top-style_default > .top-menu_item > [data-top-badge] {\r\n\tmargin-top: 0;\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_item:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\t--top-button-color: var(--color-text-1);\r\n\t--top-forms-border-color: var(--color-line-2);\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_item:active,\r\n.top-menu.top-style_default .top-menu_item.top-active {\r\n\t--top-icon-color: var(--color-text-primary);\r\n\t--top-button-color: var(--color-text-1);\r\n\t--top-forms-border-color: var(--color-line-primary-1);\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_selectAll {\r\n\tpadding-left: var(--top-padding-2);\r\n}\r\n\r\n/* style bar */\r\n.top-menu.top-style_bar {\r\n\tborder-radius: var(--top-radius-3);\r\n\tborder: 1px solid var(--color-line-2);\r\n\tpadding: var(--top-padding-1);\r\n\tgap: 3px;\r\n}\r\n.top-menu.top-style_bar .top-menu_item {\r\n\t--top-button-background-color-hover: var(--color-layer-1);\r\n\t--top-button-background-color-active: var(--color-layer-2);\r\n\t--top-button-background-color-selected: var(--color-layer-primary-1);\r\n\r\n\tposition: relative;\r\n}\r\n\r\n.top-menu.top-style_bar .top-menu_item:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\t--top-button-color: var(--color-text-1);\r\n}\r\n\r\n.top-menu.top-style_bar .top-menu_item.top-active {\r\n\t--top-icon-color: var(--color-text-primary);\r\n\t--top-button-color: var(--color-text-primary);\r\n}\r\n\r\n/* разделители кнопок в баре */\r\n.top-menu.top-style_bar .top-menu_item:not(:first-child):not(.top-active):not(:hover):after {\r\n\tcontent: \"\";\r\n\tbackground: var(--color-line-1-opacity);\r\n\twidth: 1px;\r\n\theight: 60%;\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\tleft: -2px;\r\n}\r\n.top-menu.top-style_bar .top-menu_item.top-active + .top-menu_item:after,\r\n.top-menu.top-style_bar .top-menu_item:hover + .top-menu_item:after {\r\n\tcontent: none !important;\r\n}\r\n\r\n/*\r\n.top-style_bar > .top-menu_item > [data-top-badge] {\r\n\tmargin-top: -3px;\r\n}\r\n*/\r\n\r\n/** TODO: .top-unwrap-x надо вынести глобально в UI или добавить в стили для storybook */\r\n/*\r\n.top-menu.top-unwrap-x {\r\n\tpadding-right: var(--top-unwrap-x);\r\n\tpadding-left: var(--top-unwrap-x);\r\n\tmargin-right: calc(0px - var(--top-unwrap-x));\r\n\tmargin-left: calc(0px - var(--top-unwrap-x));\r\n}\r\n*/\r\n</style>\r\n"],"names":["props","__props","el","vue","model","itemIsActive","item","index","modelNew","onWheel","event","delta","scrollIntoView","isSmooth","elBtn","gap","leftMargin","rightMargin","rightMarginParent","scrollLeft"],"mappings":"ydAOA,MAAAA,EAAAC,+BAQAC,EAAAC,EAAA,IAAA,mKAQAH,EAAA,YAAA,CAAA,MAAA,QAAAI,EAAA,KAAA,wNAUA,MAAAC,EAAAC,2MAqBGC,IAAA,gCAIA,MAEAC,EAAA,SAAA,GAAAA,EAAA,CAAA,IAAAF,EAAA,WAGCE,EAAA,CAAAF,EAAA,KAAA,EAIF,CAAAN,EAAA,oBAAA,CAAAQ,EAAA,SAAAA,EAAA,CAAAF,EAAA,KAAA,GAEAF,EAAA,MAAAI,EAEA,OAGDJ,EAAA,MAAAE,EAAA,KAAmB,EAIpBG,EAAAC,GAAA,CAGC,GAFAR,EAAA,MAAA,aAAAA,EAAA,MAAA,aACAQ,EAAA,UACA,KAAA,IAAAA,EAAA,MAAA,EAAA,GAAA,OAEAA,EAAA,eAAA,EAEA,MAAAC,EAAAD,EAAA,OAAA,EAAA,GAAA,IACAR,EAAA,MAAA,WAAAA,EAAA,MAAA,WAAAS,CAA4C,EAU7CC,EAAA,CAAAC,EAAA,KAAA,sDAEC,GAAA,CAAAC,EAAA,OAEA,MAAAC,EAAA,GAGAC,EAAAF,EAAA,WAAAZ,EAAA,MAAA,WAAAa,EACAE,EAAAH,EAAA,WAAAZ,EAAA,MAAA,WAAAY,EAAA,YAAAC,uBAIAG,EAAAhB,EAAA,MAAA,YAAAA,EAAA,MAAA,WAEA,IAAAiB,aAMAF,EAAAC,IAAAC,EAAAF,EAAAf,EAAA,MAAA,aAEAiB,IAAA,sJAMA,mCASA,IAAAf,EAAA,MAAA,SAAAJ,EAAA,MAAA,OAAA,6CAEC,+CAG4D"}
|
|
1
|
+
{"version":3,"file":"menu.vue_vue_type_style_index_0_lang-Chd1ygyG.amd.js","sources":["../../src/components/formsExt/menu/menu.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { onMounted, onUpdated, ref } from 'vue';\r\nimport type { Item, Props } from './menu';\r\nimport Core from '@/core/core/core';\r\nimport { isSafari } from '@/core/utils/device';\r\nimport TopButton from '@/components/forms/button/button.vue';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tstyling: 'default',\r\n});\r\n\r\nconst model = defineModel({\r\n\trequired: true,\r\n});\r\n\r\nconst el = ref();\r\n\r\n// валидация типа modelValue без возможности выбора нескольких значений (ожидается строка)\r\nif (!props.isMultiple && !(typeof (model.value) === 'string' || model.value instanceof String)) {\r\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected String: ' + typeof (model.value));\r\n}\r\n\r\n// валидация типа modelValue с возможностью выбора нескольких значений (ожидается массив)\r\nif (props.isMultiple && !Array.isArray(model.value)) {\r\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected Array: ' + typeof (model.value));\r\n}\r\n\r\n// для множественного выбора без пустого множества\r\n// если ничего не выбрано, присваиваем 1-ое значение\r\nif (props.isMultiple && !props.canBeEmptyMultiple && Array.isArray(model.value) && !model.value.length) {\r\n\tmodel.value = [props.items[0].href ?? props.items[0].value];\r\n}\r\n\r\nconst itemIsActive = (item: Item) => {\r\n\tif (!Array.isArray(model.value)) {\r\n\t\treturn item.value === model.value;\r\n\t}\r\n\r\n\treturn model.value.includes(item.value);\r\n};\r\n\r\n/**\r\n * Выбрать элемент\r\n * @param item\r\n * @param toggle - добавить или исключить элемент, для isMultiple\r\n */\r\nconst select = (item: Item, toggle = false) => {\r\n\tif (Array.isArray(model.value)) {\r\n\t\tlet modelNew = model.value.slice();\r\n\r\n\t\tif (toggle) {\r\n\t\t\tif (!modelNew.length) modelNew = props.items.map(item => item.value);\r\n\r\n\t\t\tconst index = modelNew.indexOf(item.value);\r\n\t\t\tif (index === -1) {\r\n\t\t\t\tmodelNew.push(item.value);\r\n\t\t\t} else {\r\n\t\t\t\tmodelNew.splice(index, 1);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (modelNew.length === 1 && modelNew[0] === item.value) {\r\n\t\t\t\tmodelNew = [];\r\n\t\t\t} else {\r\n\t\t\t\tmodelNew = [item.value];\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (!props.canBeEmptyMultiple && !modelNew.length) modelNew = [item.value];\r\n\r\n\t\tmodel.value = modelNew;\r\n\r\n\t\treturn;\r\n\t}\r\n\r\n\tmodel.value = item.value;\r\n};\r\n\r\n// вертикальный скролл в горизонтальный скролл\r\nconst onWheel = (event: WheelEvent) => {\r\n\tif (el.value.scrollWidth <= el.value.offsetWidth) return;\r\n\tif (event.shiftKey) return;\r\n\tif (Math.abs(event.deltaY) < 50) return; // устройство с высокой точностью, например тачпад\r\n\r\n\tevent.preventDefault();\r\n\r\n\tconst delta = event.deltaY > 0 ? 30 : -30;\r\n\tel.value.scrollLeft = el.value.scrollLeft + delta;\r\n};\r\n\r\n/**\r\n * Замена стандартному scrollIntoView, который меняет скролл документа\r\n *\r\n * Выравнивание по ближнему краю элемента\r\n *\r\n * Выравнивается таким образом, чтобы был виден соседний элемент\r\n */\r\nconst scrollIntoView = (isSmooth = true) => {\r\n\tconst elBtn = el.value.querySelector('.top-active');\r\n\tif (!elBtn) return;\r\n\r\n\tconst gap = 24;\r\n\r\n\t// левая и правая координаты элемента\r\n\tconst leftMargin = elBtn.offsetLeft - el.value.offsetLeft - gap;\r\n\tconst rightMargin = elBtn.offsetLeft - el.value.offsetLeft + elBtn.clientWidth + gap;\r\n\r\n\t// левая и правая границы видимой части меню\r\n\tconst leftMarginParent = el.value.scrollLeft;\r\n\tconst rightMarginParent = el.value.clientWidth + el.value.scrollLeft;\r\n\r\n\tlet scrollLeft: number | undefined = undefined;\r\n\r\n\t// левую границу элемента к левой границе меню\r\n\tif (leftMargin < leftMarginParent) scrollLeft = leftMargin;\r\n\r\n\t// правую границу элемента к правой границе меню\r\n\tif (rightMargin > rightMarginParent) scrollLeft = rightMargin - el.value.clientWidth;\r\n\r\n\tif (scrollLeft !== undefined) {\r\n\t\tif (isSafari()) {\r\n\t\t\tCore.$?.(el.value).animate({ scrollLeft: scrollLeft }, isSmooth ? 200 : 0);\r\n\t\t} else {\r\n\t\t\tel.value.scrollTo({ left: scrollLeft, behavior: isSmooth ? 'smooth' : 'auto' });\r\n\t\t}\r\n\t}\r\n};\r\n\r\n/**\r\n * Выбрать все элементы в меню\r\n */\r\nconst selectAll = () => {\r\n\tif (!Array.isArray(model.value)) return;\r\n\r\n\tif (model.value.length === props.items.length) {\r\n\t\tmodel.value = [props.items[0].href ?? props.items[0].value];\r\n\t\treturn;\r\n\t}\r\n\r\n\tmodel.value = props.items.map(item => item.href ?? item.value);\r\n};\r\n\r\nonMounted(() => scrollIntoView(false));\r\nonUpdated(() => scrollIntoView(true));\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tref=\"el\"\r\n\t\t:class=\"{\r\n\t\t\t'top-menu': true,\r\n\t\t\t['top-style_' + styling]: true,\r\n\t\t\t// ['top-unwrap-x']: styling === 'default',\r\n\t\t}\"\r\n\t\t@wheel=\"onWheel\"\r\n\t>\r\n\t\t<TopButton\r\n\t\t\tv-for=\"item in items\"\r\n\t\t\t:=\"item\"\r\n\t\t\tclass=\"top-menu_item\"\r\n\t\t\tcolor=\"theme\"\r\n\t\t\t@click=\"select(item, $event.ctrlKey)\"\r\n\t\t\t:isActive=\"itemIsActive(item)\"\r\n\t\t>\r\n\t\t\t<template #default v-if=\"item.content\">\r\n\t\t\t\t{{ item.content }}\r\n\t\t\t</template>\r\n\t\t</TopButton>\r\n\r\n\t\t<div\r\n\t\t\tv-if=\"Array.isArray(model) && selectAllItem\"\r\n\t\t\tclass=\"top-menu_selectAll\"\r\n\t\t>\r\n\t\t\t<TopButton\r\n\t\t\t\t:=\"selectAllItem\"\r\n\t\t\t\tclass=\"top-menu_item\"\r\n\t\t\t\tcolor=\"theme\"\r\n\t\t\t\tstyling=\"\"\r\n\t\t\t\t@click=\"selectAll()\"\r\n\t\t\t\t:isActive=\"model.length === items.length\"\r\n\t\t\t>\r\n\t\t\t\t<template #default v-if=\"selectAllItem.content\">\r\n\t\t\t\t\t{{ selectAllItem.content }}\r\n\t\t\t\t</template>\r\n\t\t\t</TopButton>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style>\r\n.top-menu {\r\n\t--scroll-thumb-color: var(--color-line-1);\r\n\t--scroll-thumb-color-hover: var(--color-line-2);\r\n\t--scroll-thumb-color-active: var(--color-line-3);\r\n\r\n\tmax-width: 100%;\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n\tgap: var(--top-gap-2);\r\n\toverflow-x: auto;\r\n\tscrollbar-width: none; /* firefox */\r\n\r\n\t/* предотвратить натинвые события браузера (назад / вперед) */\r\n\toverscroll-behavior-x: contain;\r\n}\r\n\r\n.top-menu::-webkit-scrollbar { display: none; }\r\n\r\n.top-menu .top-menu_item {\r\n\t--top-button-color: var(--color-text-2);\r\n\r\n\toutline-offset: -2px !important;\r\n\tmin-width: 0;\r\n\tmax-width: 200px;\r\n\tmargin: 0;\r\n\tflex-shrink: 0;\r\n}\r\n\r\n.top-menu .top-menu_item[data-top-icon] {\r\n\t--top-icon-color: var(--color-text-2);\r\n}\r\n\r\n.top-menu_selectAll {\r\n\tposition: sticky;\r\n\tright: 0;\r\n\tbackground: var(--color-layout-front-1);\r\n\tborder-left: 1px solid var(--color-line-1);\r\n\tpadding-left: var(--top-padding-1);\r\n\tbox-shadow: var(--color-layout-front-1) var(--top-padding-2) 0px;\r\n}\r\n\r\n/* style default */\r\n.top-menu.top-style_default .top-menu_item {\r\n\t--top-forms-radius: 0;\r\n\t--top-forms-border-color: transparent;\r\n\t--top-forms-border-width: 2px;\r\n\r\n\tfilter: none;\r\n\tbox-shadow: none;\r\n\tborder: none;\r\n\tborder-bottom: var(--top-forms-border-width) solid var(--top-forms-border-color);\r\n\tbackground: none;\r\n}\r\n\r\n.top-style_default > .top-menu_item > [data-top-badge] {\r\n\tmargin-top: 0;\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_item:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\t--top-button-color: var(--color-text-1);\r\n\t--top-forms-border-color: var(--color-line-2);\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_item:active,\r\n.top-menu.top-style_default .top-menu_item.top-active {\r\n\t--top-icon-color: var(--color-text-primary);\r\n\t--top-button-color: var(--color-text-1);\r\n\t--top-forms-border-color: var(--color-line-primary-1);\r\n}\r\n\r\n.top-menu.top-style_default .top-menu_selectAll {\r\n\tpadding-left: var(--top-padding-2);\r\n}\r\n\r\n/* style bar */\r\n.top-menu.top-style_bar {\r\n\tborder-radius: var(--top-radius-3);\r\n\tborder: 1px solid var(--color-line-2);\r\n\tpadding: var(--top-padding-1);\r\n\tgap: 3px;\r\n}\r\n.top-menu.top-style_bar .top-menu_item {\r\n\t--top-button-background-color-hover: var(--color-layer-1);\r\n\t--top-button-background-color-active: var(--color-layer-2);\r\n\t--top-button-background-color-selected: var(--color-layer-primary-1);\r\n\r\n\tposition: relative;\r\n}\r\n\r\n.top-menu.top-style_bar .top-menu_item:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\t--top-button-color: var(--color-text-1);\r\n}\r\n\r\n.top-menu.top-style_bar .top-menu_item.top-active {\r\n\t--top-icon-color: var(--color-text-primary);\r\n\t--top-button-color: var(--color-text-primary);\r\n}\r\n\r\n/* разделители кнопок в баре */\r\n.top-menu.top-style_bar .top-menu_item:not(:first-child):not(.top-active):not(:hover):after {\r\n\tcontent: \"\";\r\n\tbackground: var(--color-line-1-opacity);\r\n\twidth: 1px;\r\n\theight: 60%;\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\tleft: -2px;\r\n}\r\n.top-menu.top-style_bar .top-menu_item.top-active + .top-menu_item:after,\r\n.top-menu.top-style_bar .top-menu_item:hover + .top-menu_item:after {\r\n\tcontent: none !important;\r\n}\r\n\r\n/*\r\n.top-style_bar > .top-menu_item > [data-top-badge] {\r\n\tmargin-top: -3px;\r\n}\r\n*/\r\n\r\n/** TODO: .top-unwrap-x надо вынести глобально в UI или добавить в стили для storybook */\r\n/*\r\n.top-menu.top-unwrap-x {\r\n\tpadding-right: var(--top-unwrap-x);\r\n\tpadding-left: var(--top-unwrap-x);\r\n\tmargin-right: calc(0px - var(--top-unwrap-x));\r\n\tmargin-left: calc(0px - var(--top-unwrap-x));\r\n}\r\n*/\r\n</style>\r\n"],"names":["props","__props","el","vue","model","itemIsActive","item","index","modelNew","onWheel","event","delta","scrollIntoView","isSmooth","elBtn","gap","leftMargin","rightMargin","rightMarginParent","scrollLeft"],"mappings":"ydAOA,MAAAA,EAAAC,+BAQAC,EAAAC,EAAA,IAAA,mKAQAH,EAAA,YAAA,CAAA,MAAA,QAAAI,EAAA,KAAA,wNAUA,MAAAC,EAAAC,2MAqBGC,IAAA,gCAIA,MAEAC,EAAA,SAAA,GAAAA,EAAA,CAAA,IAAAF,EAAA,WAGCE,EAAA,CAAAF,EAAA,KAAA,EAIF,CAAAN,EAAA,oBAAA,CAAAQ,EAAA,SAAAA,EAAA,CAAAF,EAAA,KAAA,GAEAF,EAAA,MAAAI,EAEA,OAGDJ,EAAA,MAAAE,EAAA,KAAmB,EAIpBG,EAAAC,GAAA,CAGC,GAFAR,EAAA,MAAA,aAAAA,EAAA,MAAA,aACAQ,EAAA,UACA,KAAA,IAAAA,EAAA,MAAA,EAAA,GAAA,OAEAA,EAAA,eAAA,EAEA,MAAAC,EAAAD,EAAA,OAAA,EAAA,GAAA,IACAR,EAAA,MAAA,WAAAA,EAAA,MAAA,WAAAS,CAA4C,EAU7CC,EAAA,CAAAC,EAAA,KAAA,sDAEC,GAAA,CAAAC,EAAA,OAEA,MAAAC,EAAA,GAGAC,EAAAF,EAAA,WAAAZ,EAAA,MAAA,WAAAa,EACAE,EAAAH,EAAA,WAAAZ,EAAA,MAAA,WAAAY,EAAA,YAAAC,uBAIAG,EAAAhB,EAAA,MAAA,YAAAA,EAAA,MAAA,WAEA,IAAAiB,aAMAF,EAAAC,IAAAC,EAAAF,EAAAf,EAAA,MAAA,aAEAiB,IAAA,sJAMA,mCASA,IAAAf,EAAA,MAAA,SAAAJ,EAAA,MAAA,OAAA,6CAEC,+CAG4D"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Core as w } from "../core/app.js";
|
|
2
2
|
import { reactive as N, defineComponent as k, ref as T, computed as L, resolveComponent as z, withDirectives as D, openBlock as r, createElementBlock as m, normalizeClass as E, createElementVNode as _, createCommentVNode as p, createBlock as C, mergeProps as j, Teleport as x, Fragment as O, renderList as V, unref as A, normalizeStyle as F } from "vue";
|
|
3
|
-
import { C as h } from "./forms-
|
|
3
|
+
import { C as h } from "./forms-DmpPuKKh.es.js";
|
|
4
4
|
import { genIntHash as J, nl2br as U } from "../utils/string.js";
|
|
5
5
|
const I = ["../assets/notice.css"].map((e) => import.meta.resolve(e));
|
|
6
6
|
w.insertCSSLinkToPage(I, !0);
|
|
@@ -172,4 +172,4 @@ export {
|
|
|
172
172
|
ne as default,
|
|
173
173
|
se as show
|
|
174
174
|
};
|
|
175
|
-
//# sourceMappingURL=notice-
|
|
175
|
+
//# sourceMappingURL=notice-BNik2ZIo.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notice-Bh-LvHpR.es.js","sources":["../../src/components/core/notice/utils.ts","../../src/components/core/notice/item/item.vue","../../src/components/core/notice/notice.vue"],"sourcesContent":["import { reactive } from 'vue';\r\nimport type { Props as ItemProps, Props, Style } from '@/components/core/notice/item/types';\r\nimport Core from '@/core/core/core';\r\nimport { genIntHash } from '@/core/utils/string';\r\n\r\nexport const transitionDuration = 300;\r\n\r\nexport type Item = Props & { onClose?: Function };\r\n\r\nexport const itemById = reactive(new Map<string, Item>());\r\n\r\nconst genItemId = (text: ItemProps['text'], style: ItemProps['style'], options?: Options) => {\r\n\treturn 'top-notice_' + genIntHash(text + style + JSON.stringify(options));\r\n};\r\n\r\nexport type Options = {\r\n\ttitle?: ItemProps['title'],\r\n\tmetaText?: ItemProps['metaText'],\r\n\tbuttonProps?: ItemProps['buttonProps'],\r\n\tisSafeHTML?: ItemProps['isSafeHTML'],\r\n\tselectToClose?: ItemProps['selectToClose'],\r\n\tonClose?: Function\r\n}\r\n\r\n/**\r\n * Показать сообщением в стиле push уведомления\r\n *\r\n * title будет получен из первой строки text\r\n *\r\n * Если в options указан title, он будет взят оттуда\r\n */\r\nexport const show = (text: string, style: Style = 'info', options?: Options) => {\r\n\tlet title = '';\r\n\r\n\ttext = String(text);\r\n\r\n\tconst id = genItemId(text, style, options);\r\n\r\n\tif (options?.title) {\r\n\t\ttitle = options.title;\r\n\t} else {\r\n\t\tconst chunks = text.split('\\n');\r\n\r\n\t\tif (chunks.length) {\r\n\t\t\ttitle = String(chunks.shift());\r\n\t\t\ttext = chunks.join('\\n');\r\n\t\t}\r\n\t}\r\n\r\n\tconst itemExists = itemById.get(id);\r\n\tif (itemExists) {\r\n\t\thightlight(itemExists);\r\n\r\n\t\treturn;\r\n\t}\r\n\r\n\tconst item: Item = {\r\n\t\tid,\r\n\t\ttitle,\r\n\t\ttext,\r\n\t\tstyle,\r\n\t\tbuttonProps: options?.buttonProps,\r\n\t\tmetaText: options?.metaText,\r\n\t\tisSafeHTML: options?.isSafeHTML,\r\n\t\tselectToClose: options?.selectToClose,\r\n\t\tonClose: options?.onClose,\r\n\t};\r\n\r\n\titemById.set(item.id, item);\r\n\r\n\tif (itemById.size > 5) {\r\n\t\tconst [_firstId, firstItem] = [...itemById].at(0) || [];\r\n\t\tif (firstItem) close(firstItem);\r\n\t}\r\n\r\n\t/**\r\n\t * Автозакрытие ошибок форм\r\n\t *\r\n\t * Добавляет\r\n\t */\r\n\tif (Core.state.isMobile) {\r\n\t\t$('input').one('click', () => close(item));\r\n\t}\r\n};\r\n\r\nconst hightlight = (item: Item) => {\r\n\titem.hightlight = true;\r\n\r\n\tsetTimeout(() => item.hightlight = false, transitionDuration);\r\n};\r\n\r\nconst close = (item: Item) => {\r\n\titem.forceClosed = true;\r\n\r\n\tsetTimeout(() => {\r\n\t\titem.onClose?.();\r\n\r\n\t\titemById.delete(item.id);\r\n\t}, transitionDuration);\r\n};\r\n\r\n/**\r\n * Убрать подозрительный html код\r\n */\r\nexport const prepareText = (text: string) => {\r\n\tconst textNoSafety = 'hacking was detected';\r\n\r\n\ttext = text.replace(/<script/g, textNoSafety);\r\n\ttext = text.replace(/<img/g, textNoSafety);\r\n\ttext = text.replace(/<iframe/g, textNoSafety);\r\n\ttext = text.replace(/javascript:/g, textNoSafety);\r\n\ttext = text.replace(/<[^>]+ (@|on)\\w+=[^>]+>?/g, textNoSafety);\r\n\r\n\treturn text;\r\n};\r\n","<script setup lang=\"ts\">\r\nimport { computed, ref, withDefaults } from 'vue';\r\n\r\nimport Core from '@/core/core/core';\r\nimport { nl2br } from '@/core/utils/string';\r\n\r\nimport type { Emits, Props } from './types';\r\nimport { prepareText, transitionDuration } from '@/components/core/notice/utils';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tselectToClose: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\n// анимация появления\r\nconst showed = ref(false);\r\nsetTimeout(() => showed.value = true, 10);\r\n\r\n// анимация закрытия\r\nconst closed = ref(false);\r\nconst closedDirection = ref<'top' | 'right' | 'bottom' | 'left'>('right');\r\n\r\nconst title = computed(() => {\r\n\tlet res = props.title.replace(/ {2}/g, ' ');\r\n\r\n\tif (!props.isSafeHTML) res = prepareText(res);\r\n\r\n\treturn res;\r\n});\r\n\r\nconst text = computed(() => {\r\n\tlet res = nl2br(props.text);\r\n\r\n\tres = res.replace(/ {2}/g, ' ');\r\n\r\n\tif (!props.isSafeHTML) res = prepareText(res);\r\n\r\n\treturn res;\r\n});\r\n\r\nconst close = (direction?: typeof closedDirection.value) => {\r\n\tclosed.value = true;\r\n\r\n\tif (direction) {\r\n\t\tclosedDirection.value = direction;\r\n\t}\r\n\r\n\tsetTimeout(() => emit('close'), transitionDuration);\r\n};\r\n\r\nconst onClick = (e: MouseEvent) => {\r\n\tif (!props.selectToClose) return;\r\n\r\n\tconst { tagName } = e.target as HTMLElement;\r\n\r\n\tif (tagName === 'A') close();\r\n\tif (tagName === 'BUTTON') close();\r\n};\r\n\r\nconst vSwipe = {\r\n\tmounted: (el: HTMLElement) => {\r\n\t\tif (!Core.state.isMobile) return;\r\n\r\n\t\tif (!Core.$ || !Core.$.ui['draggable']) return;\r\n\r\n\t\tlet direction: typeof closedDirection.value = 'right';\r\n\r\n\t\tlet axis = 'x';\r\n\t\t// if (getOS() === 'iOS') axis = 'y';\r\n\r\n\t\tCore.$(el).draggable({\r\n\t\t\trevert: false,\r\n\t\t\taxis,\r\n\t\t\tdrag: (_e, ui) => {\r\n\t\t\t\tif (axis == 'x') {\r\n\t\t\t\t\tdirection = ui.position.left > 0 ? 'right' : 'left';\r\n\t\t\t\t} else {\r\n\t\t\t\t\tdirection = ui.position.top > 0 ? 'bottom' : 'top';\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tstop: (_e, _ui) => {\r\n\t\t\t\tclose(direction);\r\n\t\t\t},\r\n\t\t});\r\n\t},\r\n};\r\n\r\n// const vSwipe = {\r\n// \tmounted: (el: HTMLElement) => {\r\n// \t\tconst { distanceX, direction } = usePointerSwipe(el, {\r\n// \t\t\tdisableTextSelect: true,\r\n// \t\t\tonSwipe(e: PointerEvent) {\r\n// \t\t\t\tleft.value = -distanceX.value + 'px';\r\n// \t\t\t},\r\n// \t\t\tonSwipeEnd: (_e, direction) => {\r\n// \t\t\t\tclose(direction);\r\n// \t\t\t},\r\n// \t\t});\r\n// \t},\r\n// };\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tclass=\"top-notice_item\"\r\n\t\t:class=\"{\r\n\t\t\t['top-notice_item-' + style]: true,\r\n\t\t\t'top-notice_item-hightlight': hightlight,\r\n\t\t\t'top-notice_item-showed': showed,\r\n\t\t\t'top-notice_item-closed': closed || forceClosed,\r\n\t\t\t['top-notice_item-closed_' + closedDirection]: closed,\r\n\t\t}\"\r\n\t\t@click=\"onClick\"\r\n\t\tv-swipe\r\n\t>\r\n\t\t<div class=\"top-notice_itemTextWrapper\">\r\n\t\t\t<div v-if=\"title\" class=\"top-notice_itemTitle\" v-html=\"title\"></div>\r\n\t\t\t<div v-if=\"text\" class=\"top-notice_itemText\" v-html=\"text\"></div>\r\n\t\t</div>\r\n\r\n\t\t<TopButton\r\n\t\t\tv-if=\"buttonProps\"\r\n\t\t\tclass=\"top-notice_itemButton\"\r\n\t\t\tsize=\"s\"\r\n\t\t\t:=\"buttonProps\"\r\n\t\t\t:title=\"buttonProps.title\"\r\n\t\t\tv-html=\"buttonProps.default\"\r\n\t\t\t@click=\"close()\"\r\n\t\t/>\r\n\r\n\t\t<div v-if=\"metaText\" class=\"top-notice_itemMetaText\" v-html=\"metaText\"></div>\r\n\r\n\t\t<div\r\n\t\t\tclass=\"top-notice_itemClose\"\r\n\t\t\tdata-top-icon=\"\"\r\n\t\t\t:title=\"$i18n.Common.Close\"\r\n\t\t\t@click=\"() => close()\"\r\n\t\t></div>\r\n\t</div>\r\n</template>\r\n\r\n<style>\r\n@import \"style.css\";\r\n</style>\r\n","<!-- performance all in one file component, для Core.notice() -->\r\n<script lang=\"ts\">\r\nexport { show } from './utils';\r\n</script>\r\n\r\n<script setup lang=\"ts\">\r\nimport type { Item } from './utils';\r\nimport { itemById } from './utils';\r\n\r\nimport type { Props } from './types';\r\nimport TopNoticeItem from './item/item.vue';\r\n\r\ndefineProps<Props>();\r\n\r\nconst onCloseItem = (item: Item) => {\r\n\titem.onClose?.();\r\n\r\n\titemById.delete(item.id);\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<teleport to=\"body\">\r\n\t\t<div class=\"top-notice\">\r\n\t\t\t<TopNoticeItem\r\n\t\t\t\tv-for=\"[_index, item] in itemById\"\r\n\t\t\t\t:key=\"item.id\"\r\n\t\t\t\t:id=\"item.id\"\r\n\t\t\t\t:title=\"item.title\"\r\n\t\t\t\t:text=\"item.text\"\r\n\t\t\t\t:style=\"item.style\"\r\n\t\t\t\t:buttonProps=\"item.buttonProps\"\r\n\t\t\t\t:metaText=\"item.metaText\"\r\n\t\t\t\t:isSafeHTML=\"item.isSafeHTML\"\r\n\t\t\t\t:forceClosed=\"item.forceClosed\"\r\n\t\t\t\t:hightlight=\"item.hightlight\"\r\n\t\t\t\t@close=\"onCloseItem(item)\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</teleport>\r\n</template>\r\n\r\n<style>\r\n:root {\r\n\t--top-notice-top: var(--top-padding-4);\r\n\t--top-notice-right: var(--top-padding-4);\r\n}\r\n\r\n.top-notice {\r\n\twidth: 400px;\r\n\tfont-size: 14px;\r\n\tposition: fixed; top: var(--top-notice-top); right: var(--top-notice-right);\r\n\tz-index: 1000010;\r\n\tdisplay: flex; flex-direction: column-reverse; gap: var(--top-gap-2);\r\n}\r\n\r\n.top-notice ul {\r\n\tpadding: 0 0 0 var(--top-padding-5);\r\n}\r\n\r\n@media only screen and (max-width: 600px) {\r\n\t:root {\r\n\t\t--top-notice-top: var(--top-padding-4);\r\n\t\t--top-notice-right: var(--top-padding-4);\r\n\t}\r\n\r\n\t.top-notice { width: auto; left: var(--top-notice-right); }\r\n}\r\n</style>\r\n"],"names":["transitionDuration","itemById","reactive","genItemId","text","style","options","genIntHash","show","title","id","chunks","itemExists","hightlight","item","_firstId","firstItem","close","Core","_a","prepareText","textNoSafety","props","__props","emit","__emit","showed","ref","closed","closedDirection","computed","res","nl2br","direction","onClick","e","tagName","vSwipe","el","_e","ui","_ui","onCloseItem"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"notice-BNik2ZIo.es.js","sources":["../../src/components/core/notice/utils.ts","../../src/components/core/notice/item/item.vue","../../src/components/core/notice/notice.vue"],"sourcesContent":["import { reactive } from 'vue';\r\nimport type { Props as ItemProps, Props, Style } from '@/components/core/notice/item/types';\r\nimport Core from '@/core/core/core';\r\nimport { genIntHash } from '@/core/utils/string';\r\n\r\nexport const transitionDuration = 300;\r\n\r\nexport type Item = Props & { onClose?: Function };\r\n\r\nexport const itemById = reactive(new Map<string, Item>());\r\n\r\nconst genItemId = (text: ItemProps['text'], style: ItemProps['style'], options?: Options) => {\r\n\treturn 'top-notice_' + genIntHash(text + style + JSON.stringify(options));\r\n};\r\n\r\nexport type Options = {\r\n\ttitle?: ItemProps['title'],\r\n\tmetaText?: ItemProps['metaText'],\r\n\tbuttonProps?: ItemProps['buttonProps'],\r\n\tisSafeHTML?: ItemProps['isSafeHTML'],\r\n\tselectToClose?: ItemProps['selectToClose'],\r\n\tonClose?: Function\r\n}\r\n\r\n/**\r\n * Показать сообщением в стиле push уведомления\r\n *\r\n * title будет получен из первой строки text\r\n *\r\n * Если в options указан title, он будет взят оттуда\r\n */\r\nexport const show = (text: string, style: Style = 'info', options?: Options) => {\r\n\tlet title = '';\r\n\r\n\ttext = String(text);\r\n\r\n\tconst id = genItemId(text, style, options);\r\n\r\n\tif (options?.title) {\r\n\t\ttitle = options.title;\r\n\t} else {\r\n\t\tconst chunks = text.split('\\n');\r\n\r\n\t\tif (chunks.length) {\r\n\t\t\ttitle = String(chunks.shift());\r\n\t\t\ttext = chunks.join('\\n');\r\n\t\t}\r\n\t}\r\n\r\n\tconst itemExists = itemById.get(id);\r\n\tif (itemExists) {\r\n\t\thightlight(itemExists);\r\n\r\n\t\treturn;\r\n\t}\r\n\r\n\tconst item: Item = {\r\n\t\tid,\r\n\t\ttitle,\r\n\t\ttext,\r\n\t\tstyle,\r\n\t\tbuttonProps: options?.buttonProps,\r\n\t\tmetaText: options?.metaText,\r\n\t\tisSafeHTML: options?.isSafeHTML,\r\n\t\tselectToClose: options?.selectToClose,\r\n\t\tonClose: options?.onClose,\r\n\t};\r\n\r\n\titemById.set(item.id, item);\r\n\r\n\tif (itemById.size > 5) {\r\n\t\tconst [_firstId, firstItem] = [...itemById].at(0) || [];\r\n\t\tif (firstItem) close(firstItem);\r\n\t}\r\n\r\n\t/**\r\n\t * Автозакрытие ошибок форм\r\n\t *\r\n\t * Добавляет\r\n\t */\r\n\tif (Core.state.isMobile) {\r\n\t\t$('input').one('click', () => close(item));\r\n\t}\r\n};\r\n\r\nconst hightlight = (item: Item) => {\r\n\titem.hightlight = true;\r\n\r\n\tsetTimeout(() => item.hightlight = false, transitionDuration);\r\n};\r\n\r\nconst close = (item: Item) => {\r\n\titem.forceClosed = true;\r\n\r\n\tsetTimeout(() => {\r\n\t\titem.onClose?.();\r\n\r\n\t\titemById.delete(item.id);\r\n\t}, transitionDuration);\r\n};\r\n\r\n/**\r\n * Убрать подозрительный html код\r\n */\r\nexport const prepareText = (text: string) => {\r\n\tconst textNoSafety = 'hacking was detected';\r\n\r\n\ttext = text.replace(/<script/g, textNoSafety);\r\n\ttext = text.replace(/<img/g, textNoSafety);\r\n\ttext = text.replace(/<iframe/g, textNoSafety);\r\n\ttext = text.replace(/javascript:/g, textNoSafety);\r\n\ttext = text.replace(/<[^>]+ (@|on)\\w+=[^>]+>?/g, textNoSafety);\r\n\r\n\treturn text;\r\n};\r\n","<script setup lang=\"ts\">\r\nimport { computed, ref, withDefaults } from 'vue';\r\n\r\nimport Core from '@/core/core/core';\r\nimport { nl2br } from '@/core/utils/string';\r\n\r\nimport type { Emits, Props } from './types';\r\nimport { prepareText, transitionDuration } from '@/components/core/notice/utils';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tselectToClose: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\n// анимация появления\r\nconst showed = ref(false);\r\nsetTimeout(() => showed.value = true, 10);\r\n\r\n// анимация закрытия\r\nconst closed = ref(false);\r\nconst closedDirection = ref<'top' | 'right' | 'bottom' | 'left'>('right');\r\n\r\nconst title = computed(() => {\r\n\tlet res = props.title.replace(/ {2}/g, ' ');\r\n\r\n\tif (!props.isSafeHTML) res = prepareText(res);\r\n\r\n\treturn res;\r\n});\r\n\r\nconst text = computed(() => {\r\n\tlet res = nl2br(props.text);\r\n\r\n\tres = res.replace(/ {2}/g, ' ');\r\n\r\n\tif (!props.isSafeHTML) res = prepareText(res);\r\n\r\n\treturn res;\r\n});\r\n\r\nconst close = (direction?: typeof closedDirection.value) => {\r\n\tclosed.value = true;\r\n\r\n\tif (direction) {\r\n\t\tclosedDirection.value = direction;\r\n\t}\r\n\r\n\tsetTimeout(() => emit('close'), transitionDuration);\r\n};\r\n\r\nconst onClick = (e: MouseEvent) => {\r\n\tif (!props.selectToClose) return;\r\n\r\n\tconst { tagName } = e.target as HTMLElement;\r\n\r\n\tif (tagName === 'A') close();\r\n\tif (tagName === 'BUTTON') close();\r\n};\r\n\r\nconst vSwipe = {\r\n\tmounted: (el: HTMLElement) => {\r\n\t\tif (!Core.state.isMobile) return;\r\n\r\n\t\tif (!Core.$ || !Core.$.ui['draggable']) return;\r\n\r\n\t\tlet direction: typeof closedDirection.value = 'right';\r\n\r\n\t\tlet axis = 'x';\r\n\t\t// if (getOS() === 'iOS') axis = 'y';\r\n\r\n\t\tCore.$(el).draggable({\r\n\t\t\trevert: false,\r\n\t\t\taxis,\r\n\t\t\tdrag: (_e, ui) => {\r\n\t\t\t\tif (axis == 'x') {\r\n\t\t\t\t\tdirection = ui.position.left > 0 ? 'right' : 'left';\r\n\t\t\t\t} else {\r\n\t\t\t\t\tdirection = ui.position.top > 0 ? 'bottom' : 'top';\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tstop: (_e, _ui) => {\r\n\t\t\t\tclose(direction);\r\n\t\t\t},\r\n\t\t});\r\n\t},\r\n};\r\n\r\n// const vSwipe = {\r\n// \tmounted: (el: HTMLElement) => {\r\n// \t\tconst { distanceX, direction } = usePointerSwipe(el, {\r\n// \t\t\tdisableTextSelect: true,\r\n// \t\t\tonSwipe(e: PointerEvent) {\r\n// \t\t\t\tleft.value = -distanceX.value + 'px';\r\n// \t\t\t},\r\n// \t\t\tonSwipeEnd: (_e, direction) => {\r\n// \t\t\t\tclose(direction);\r\n// \t\t\t},\r\n// \t\t});\r\n// \t},\r\n// };\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tclass=\"top-notice_item\"\r\n\t\t:class=\"{\r\n\t\t\t['top-notice_item-' + style]: true,\r\n\t\t\t'top-notice_item-hightlight': hightlight,\r\n\t\t\t'top-notice_item-showed': showed,\r\n\t\t\t'top-notice_item-closed': closed || forceClosed,\r\n\t\t\t['top-notice_item-closed_' + closedDirection]: closed,\r\n\t\t}\"\r\n\t\t@click=\"onClick\"\r\n\t\tv-swipe\r\n\t>\r\n\t\t<div class=\"top-notice_itemTextWrapper\">\r\n\t\t\t<div v-if=\"title\" class=\"top-notice_itemTitle\" v-html=\"title\"></div>\r\n\t\t\t<div v-if=\"text\" class=\"top-notice_itemText\" v-html=\"text\"></div>\r\n\t\t</div>\r\n\r\n\t\t<TopButton\r\n\t\t\tv-if=\"buttonProps\"\r\n\t\t\tclass=\"top-notice_itemButton\"\r\n\t\t\tsize=\"s\"\r\n\t\t\t:=\"buttonProps\"\r\n\t\t\t:title=\"buttonProps.title\"\r\n\t\t\tv-html=\"buttonProps.default\"\r\n\t\t\t@click=\"close()\"\r\n\t\t/>\r\n\r\n\t\t<div v-if=\"metaText\" class=\"top-notice_itemMetaText\" v-html=\"metaText\"></div>\r\n\r\n\t\t<div\r\n\t\t\tclass=\"top-notice_itemClose\"\r\n\t\t\tdata-top-icon=\"\"\r\n\t\t\t:title=\"$i18n.Common.Close\"\r\n\t\t\t@click=\"() => close()\"\r\n\t\t></div>\r\n\t</div>\r\n</template>\r\n\r\n<style>\r\n@import \"style.css\";\r\n</style>\r\n","<!-- performance all in one file component, для Core.notice() -->\r\n<script lang=\"ts\">\r\nexport { show } from './utils';\r\n</script>\r\n\r\n<script setup lang=\"ts\">\r\nimport type { Item } from './utils';\r\nimport { itemById } from './utils';\r\n\r\nimport type { Props } from './types';\r\nimport TopNoticeItem from './item/item.vue';\r\n\r\ndefineProps<Props>();\r\n\r\nconst onCloseItem = (item: Item) => {\r\n\titem.onClose?.();\r\n\r\n\titemById.delete(item.id);\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<teleport to=\"body\">\r\n\t\t<div class=\"top-notice\">\r\n\t\t\t<TopNoticeItem\r\n\t\t\t\tv-for=\"[_index, item] in itemById\"\r\n\t\t\t\t:key=\"item.id\"\r\n\t\t\t\t:id=\"item.id\"\r\n\t\t\t\t:title=\"item.title\"\r\n\t\t\t\t:text=\"item.text\"\r\n\t\t\t\t:style=\"item.style\"\r\n\t\t\t\t:buttonProps=\"item.buttonProps\"\r\n\t\t\t\t:metaText=\"item.metaText\"\r\n\t\t\t\t:isSafeHTML=\"item.isSafeHTML\"\r\n\t\t\t\t:forceClosed=\"item.forceClosed\"\r\n\t\t\t\t:hightlight=\"item.hightlight\"\r\n\t\t\t\t@close=\"onCloseItem(item)\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</teleport>\r\n</template>\r\n\r\n<style>\r\n:root {\r\n\t--top-notice-top: var(--top-padding-4);\r\n\t--top-notice-right: var(--top-padding-4);\r\n}\r\n\r\n.top-notice {\r\n\twidth: 400px;\r\n\tfont-size: 14px;\r\n\tposition: fixed; top: var(--top-notice-top); right: var(--top-notice-right);\r\n\tz-index: 1000010;\r\n\tdisplay: flex; flex-direction: column-reverse; gap: var(--top-gap-2);\r\n}\r\n\r\n.top-notice ul {\r\n\tpadding: 0 0 0 var(--top-padding-5);\r\n}\r\n\r\n@media only screen and (max-width: 600px) {\r\n\t:root {\r\n\t\t--top-notice-top: var(--top-padding-4);\r\n\t\t--top-notice-right: var(--top-padding-4);\r\n\t}\r\n\r\n\t.top-notice { width: auto; left: var(--top-notice-right); }\r\n}\r\n</style>\r\n"],"names":["transitionDuration","itemById","reactive","genItemId","text","style","options","genIntHash","show","title","id","chunks","itemExists","hightlight","item","_firstId","firstItem","close","Core","_a","prepareText","textNoSafety","props","__props","emit","__emit","showed","ref","closed","closedDirection","computed","res","nl2br","direction","onClick","e","tagName","vSwipe","el","_e","ui","_ui","onCloseItem"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { C as f,
|
|
1
|
+
import { C as f, a as w } from "./forms-DmpPuKKh.es.js";
|
|
2
2
|
import i from "../utils/dom.js";
|
|
3
3
|
import { TopPopupWorker as s } from "../popup/worker.js";
|
|
4
4
|
class x {
|
|
@@ -82,7 +82,7 @@ class x {
|
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
|
-
class
|
|
85
|
+
class y {
|
|
86
86
|
static isInited = !1;
|
|
87
87
|
/**
|
|
88
88
|
* Добавить глобальные обработчики
|
|
@@ -135,9 +135,9 @@ class w {
|
|
|
135
135
|
if (!o) {
|
|
136
136
|
if (i.querySelectorVisible(p, ".preloader"))
|
|
137
137
|
break;
|
|
138
|
-
const
|
|
139
|
-
if (
|
|
140
|
-
|
|
138
|
+
const u = i.querySelectorVisible(p, ".top-popup_footer .go, .top-popup_footer [data-action]");
|
|
139
|
+
if (u instanceof HTMLElement) {
|
|
140
|
+
u.click();
|
|
141
141
|
break;
|
|
142
142
|
}
|
|
143
143
|
const m = i.querySelectorVisibleLast(p, ".top-popup_footer .top-button");
|
|
@@ -146,8 +146,8 @@ class w {
|
|
|
146
146
|
}
|
|
147
147
|
const r = i.querySelectorVisible(p, "li > a.top-active");
|
|
148
148
|
r && r.getAttribute("href") && (t.preventDefault(), location.href = r.getAttribute("href"));
|
|
149
|
-
const
|
|
150
|
-
|
|
149
|
+
const a = p.querySelector("li > .top-active");
|
|
150
|
+
a instanceof HTMLElement && a.click();
|
|
151
151
|
break;
|
|
152
152
|
case "ArrowUp":
|
|
153
153
|
case "ArrowRight":
|
|
@@ -159,29 +159,29 @@ class w {
|
|
|
159
159
|
p,
|
|
160
160
|
"ul.top-popup_content > li:not(.top-popup_liNoSelectable) > .top-active > .top-popup_listMore"
|
|
161
161
|
) && t.preventDefault() : t.preventDefault();
|
|
162
|
-
const
|
|
163
|
-
if (t.key === "ArrowRight" &&
|
|
164
|
-
const
|
|
165
|
-
if (
|
|
166
|
-
return
|
|
162
|
+
const c = (e = p.querySelector("ul.top-popup_content > li:not(.top-popup_liNoSelectable) > .top-active")) == null ? void 0 : e.parentElement;
|
|
163
|
+
if (t.key === "ArrowRight" && c) {
|
|
164
|
+
const u = c.querySelector(".top-active > .top-popup_listMore");
|
|
165
|
+
if (u instanceof HTMLElement)
|
|
166
|
+
return u.click();
|
|
167
167
|
}
|
|
168
|
-
const
|
|
169
|
-
if (!
|
|
168
|
+
const h = i.querySelectorAllVisible(p, "ul.top-popup_content > li:not(.top-popup_liNoSelectable)"), d = h.length;
|
|
169
|
+
if (!d)
|
|
170
170
|
return;
|
|
171
|
-
let
|
|
172
|
-
if (
|
|
171
|
+
let l = -1;
|
|
172
|
+
if (c && (l = h.indexOf(c)), t.key === "ArrowUp" || t.key === "ArrowLeft" ? l-- : l++, t.key === "ArrowLeft" && l === -1)
|
|
173
173
|
return t.target.matches("input") ? void 0 : s.close(p);
|
|
174
|
-
if (t.key === "ArrowRight" &&
|
|
174
|
+
if (t.key === "ArrowRight" && l === d)
|
|
175
175
|
return;
|
|
176
|
-
|
|
176
|
+
l < 0 && (l = d - 1), l > d - 1 && (l = 0), p.querySelectorAll("ul.top-popup_content > li > .top-active").forEach((u) => u.classList.remove("top-active")), (n = h[l].querySelector(":scope > a, :scope > .a")) == null || n.classList.add("top-active"), s.scrollToActive(p);
|
|
177
177
|
break;
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
|
-
const y = ":root{--top-popup-z-index: 200000;--top-popup-transition-delay: .1s;--top-popup-background-color: var(--color-layout-front-1);--top-popup-background-color-hover: var(--color-layout-front-3);--top-popup-background-color-active: var(--color-layout-front-4);--top-popup-border-color: var(--color-line-2-opacity);--top-popup-title-background-color: var(--color-layer-1);--top-popup-content-padding: calc(var(--top-popup-list-padding) + var(--top-popup-listItem-padding));--top-popup-list-padding: var(--top-padding-2);--top-popup-listItem-radius: var(--top-radius-2);--top-popup-listItem-padding: var(--top-padding-2)}.top-popup-front{position:relative}.top-popup-wrapper{--top-popup-height: 0px;--top-popup-right-bounding: 0px;--top-popup-bottom-bounding: 0px;--top-popup-top: 0px;--top-popup-right: calc(100vw - var(--top-popup-right-bounding));--top-popup-bottom: calc(var(--100vh) - var(--top-popup-bottom-bounding));--top-popup-left: 0px;text-align:initial;white-space:normal;word-break:normal;position:absolute;z-index:200000}.top-popup-wrapper:not(.top-popup-wrapper-shown){overflow:hidden}.top-popupPanel{cursor:default;box-shadow:var(--top-shadow-b);border-radius:14px;background:var(--top-popup-background-color);position:absolute;overflow:hidden;display:flex;flex-direction:column}.top-popup-wrapper>*{opacity:0;transition:opacity var(--top-popup-transition-delay) linear,transform var(--top-popup-transition-delay) linear}.top-popup-wrapper.p0>*{transform:translateY(-8px)}.top-popup-wrapper.p1>*{transform:translateY(8px)}.top-popup-wrapper.p2>*{transform:translate(8px)}.top-popup-wrapper.p3>*{transform:translateY(8px)}.top-popup-wrapper.p4>*{transform:translate(-8px)}.top-popup-wrapper-shown:not(.top-popup-wrapper-closed)>*{opacity:1;transform:translate(0)!important}.top-popup-wrapper.p0>.top-popup{top:-16px;left:-8px}.top-popup-wrapper.p1>.top-popup{bottom:calc(100% + 8px)}.top-popup-wrapper.p2>.top-popup{left:calc(100% + 8px)}.top-popup-wrapper.p3>.top-popup{top:calc(100% + 8px)}.top-popup-wrapper.p4>.top-popup{right:calc(100% + 8px)}.top-popup-wrapper.p2>.top-popup,.top-popup-wrapper.p4>.top-popup{margin-top:-10px}.top-popup-wrapper.p1.with_notch>.top-popup{margin-bottom:5px}.top-popup-wrapper.p2.with_notch>.top-popup{margin-left:5px}.top-popup-wrapper.p3.with_notch>.top-popup{margin-top:5px}.top-popup-wrapper.p4.with_notch>.top-popup{margin-right:5px}.top-popup-wrapper.invert-x>.top-popup{right:0}.top-popup-wrapper.invert-y>.top-popup{bottom:0}.top-popup-wrapper>.notch{border:7.4px solid transparent;position:absolute;display:block}.top-popup-wrapper.p1>.notch{border-bottom:0;border-top:7.4px solid var(--color-layout-front-1);margin:0 0 7.4px -7.4px;bottom:100%;left:50%}.top-popup-wrapper.p2>.notch{border-left:0;border-right:7.4px solid var(--color-layout-front-1);margin:0 0 -7.4px 7.4px;bottom:50%;left:100%}.top-popup-wrapper.p3>.notch{border-top:0;border-bottom:7.4px solid var(--color-layout-front-1);margin:7.4px 0 0 -7.4px;top:100%;left:50%}.top-popup-wrapper.p4>.notch{border-right:0;border-left:7.4px solid var(--color-layout-front-1);margin:0 7.4px -7.4px 0;bottom:50%;right:100%}.top-popup-wrapper.p1>.notch-border{border-top-color:#0000000d;margin-bottom:6px}.top-popup-wrapper.p2>.notch-border{border-right-color:#0000000d;margin-left:6px}.top-popup-wrapper.p3>.notch-border{border-bottom-color:#0000000d;margin-top:6px}.top-popup-wrapper.p4>.notch-border{border-left-color:#0000000d;margin-right:6px}.top-popup_header,.top-popup_content,.top-popup_footer{font-size:14px}.top-popup_header,.top-popup_footer{display:flex;align-items:center;justify-content:space-between}.top-popup_header{color:var(--color-text-1);border-bottom:1px solid var(--top-popup-border-color);padding:var(--top-padding-3);font-weight:600}.top-popup_header>*{font-weight:400}.top-popup_header>.a{cursor:pointer}.top-popup_header>.a:hover{color:var(--color-text-primary)}.top-popup_headerButton{width:60px}.top-popup_widget{padding:var(--top-padding-2) var(--top-padding-2) 0 var(--top-padding-2)}.top-popup_content{margin:0;flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--top-gap-4);-webkit-overflow-scrolling:touch}div.top-popup_content{color:var(--color-text-1);padding:var(--top-popup-content-padding)}div.top-popup_content>*{flex-shrink:0}div.top-popup_content>.top-button{margin:0}div.top-popup_content .top-unwrap{--top-unwrap-x: var(--top-popup-content-padding)}ul.top-popup_content{color:var(--color-text-1);padding:var(--top-popup-list-padding);gap:2px}ul.top-popup_content .top-unwrap{--top-unwrap-x: var(--top-popup-list-padding)}.top-popup_listItem{border-radius:var(--top-popup-listItem-radius);padding:var(--top-popup-listItem-padding);line-height:1!important}ul.top-popup_content li{margin:0;list-style:none;display:flex;position:relative}ul.top-popup_content li>*{flex-grow:1}ul.top-popup_content li>a:not(.top-button),ul.top-popup_content li>.a{cursor:pointer;box-sizing:border-box;border-radius:var(--top-popup-listItem-radius);background:var(--top-popup-background-color);padding:var(--top-popup-listItem-padding);color:var(--color-text-1)!important;font-size:14px;font-weight:400!important;text-decoration:none!important;font-style:normal;line-height:1!important;display:flex;flex:1 1 100%;align-items:center;transition:background-color .1s ease-in-out}.top-popup-wrapper-no_animate ul.top-popup_content li>a:not(.top-button),.top-popup-wrapper-no_animate ul.top-popup_content li>.a{transition:none}ul.top-popup_content li>a:not(.top-button):hover,ul.top-popup_content li>.a:hover{background:var(--top-popup-background-color-hover)}ul.top-popup_content li>a:not(.top-button).top-active,ul.top-popup_content li>.a.top-active{--top-icon-color: var(--color-text-primary) !important;background:var(--top-popup-background-color-active)}.top-popup_content+.top-popup_content{padding-top:0}.top-popup_listItem-title{background:var(--color-layer-1);color:var(--color-text-1);font-size:12px}.top-popup_listItem-delimiter{border-radius:3px;background:var(--top-popup-border-color);height:1px;padding:0;margin:4px}.top-popup_listMore{font-size:20px;margin:calc(0px - var(--top-popup-listItem-padding)) calc(0px - var(--top-popup-listItem-padding) / 2) calc(0px - var(--top-popup-listItem-padding)) 0}.top-popup_listMore.top-button{margin:0}ul.top-popup_content li>.a.top-popup_listMore{text-align:center;flex-basis:10px}ul.top-popup_content li>.a.top-popup_listMore:before{color:var(--color-text-2)}ul.top-popup_content li>*>.top-popup_listMore{margin-left:auto;color:var(--color-layer-4);font-size:14px}ul.top-popup_content li>*>i.top-popup_listMore:hover,ul.top-popup_content li>*>i.top-popup_listMore.top-active{color:var(--color-text-primary)}ul.top-popup_content li>*>i.top-popup_listMore:before{transform:rotate(90deg);display:block}ul.top-popup_content li a.close{background:none!important}.top-popup_content>[data-top-icon]:before{--top-icon-size: 20px}ul.top-popup_content li>[data-top-icon]:not(.top-button){--top-icon-color: var(--color-text-3);--top-icon-size: 20px;--top-icon-width: 20px}ul.top-popup_content li>[data-top-icon]:not(.top-button):before{height:1rem;margin-right:8px;transition:color .1s}ul.top-popup_content li:hover>[data-top-icon]:not(.top-button){--top-icon-color: var(--color-text-2)}.top-popup_footer{padding:var(--top-padding-3);border-top:1px solid var(--top-popup-border-color);display:flex;gap:var(--top-gap-2);justify-content:flex-end}.top-popup_footerSupportLink{margin-right:auto}.top-popup>[data-widget]{padding:0 var(--top-popup-list-padding)}.top-popup>[data-widget]+hr{margin:0 var(--top-popup-list-padding)}.top-popup .placeholder{border:1px solid #E0D9D9!important;border-right:none!important;border-left:none!important;background:#f9f9f9!important;margin:-1px 0;z-index:1;position:relative}.top-popup-wrapper.simple_list>.top-popup{min-width:0;white-space:nowrap}.top-popup_content .top-column{display:flex;flex-direction:column;gap:4px}html .top-popup .top-popup_content li>.top-button{margin:calc(var(--top-popup-listItem-padding) / 2) var(--top-popup-listItem-padding)}.top-popup li .check_all,.top-popup li .clear_all{cursor:pointer;color:var(--color-text-primary);padding:8px;display:inline-block}.top-popup li .check_all:hover,.top-popup li .clear_all:hover{text-decoration:underline}.top-popup li .clear_all{display:none}.top-popup_content table{margin:-9px 0}.top-popup_content table td,.top-popup_content table th{padding:9px var(--top-popup-listItem-padding) 9px 0;vertical-align:top}.top-popup_content table th{width:40%;font-weight:600;white-space:nowrap}ul.top-popup_content .a>[type=checkbox],ul.top-popup_content .a>[type=radio]{margin:-8px 0 -8px auto}ul.top-popup_content a>[class*=icon],ul.top-popup_content i.a>[class*=icon]{transition:.1s}.top-popup .buttons{border-radius:0 0 4px 4px;border-top:1px solid #BDC3C7;background:#ecf0f1;padding:10px 15px;margin:10px -15px -10px;white-space:nowrap}.top-popup_footer [class*=btn]:not(.btn-transparent){min-width:100px;padding:5px 14px;margin-left:10px}.top-popup_footer [class*=btn]:first-child{margin-left:0}.top-popup_footer .btn.full_width{margin:0;flex-grow:1}", _ = ":root{--top-popup-list-padding: 0px;--top-popup-listItem-radius: 0px;--top-popup-listItem-padding: var(--top-padding-4)}html.with_popup{background:gray}.top-popup-wrapper{--top-popup-footer-offset: 25px;width:auto!important;height:auto!important;position:fixed;top:0!important;right:0!important;left:0!important;overflow:hidden;transition:background .3s}.top-popup-wrapper-shown:not(.top-popup-wrapper-closed){background:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.top-popup-wrapper-shown:not(.top-popup-wrapper-closed)>.top-popup{opacity:1!important}.top-popup{border-radius:8px 8px 0 0;width:auto!important;max-height:calc(100% - var(--header-height, 0px) - var(--toolbar-height, 0px) - 12px);margin:0!important;top:auto!important;right:0!important;bottom:var(--toolbar-height, 0px)!important;left:0!important;display:flex;flex-direction:column;transform:translateY(80%);transition:opacity .3s,transform .3s}.top-popup-wrapper.p-from-top{--top-popup-footer-offset: 0px;top:var(--header-height, 0px)!important}.with_dialog .top-popup-wrapper.p-from-top{top:50px!important}.top-popup-wrapper.p-from-top>.top-popup{border-radius:0 0 8px 8px;max-height:calc(100% - 24px);top:0!important;bottom:auto!important;transform:translateY(calc(-100% - 24px))}.top-popup_widget{padding:var(--top-padding-2)}.top-popup_widget:not(.p-from-top){order:10}ul.top-popup_content{gap:0}ul.top-popup_content li:not(:last-child){border-bottom:1px solid var(--top-popup-border-color)}.top-popup-wrapper.top-style_alt>.top-popup>ul>li{border-bottom:none}.top-popup_footer{flex-direction:column-reverse}.top-popup_footer>.top-button{--top-forms-base-height: var(--top-forms-base-height_l);width:100%}ul.top-popup_content .top-popup_listItem-title{--top-popup-padding-v: 12px}ul.top-popup_content .top-popup_listItem-delimiter{background:var(--color-line-1-opacity);height:4px;margin:0}ul.top-popup_content li:first-child>.top-popup_listItem-delimiter{border-top:1px solid var(--top-popup-border-color)}", L = ".top-popup{min-width:250px;max-width:calc(100vw - var(--top-popup-left) - 16px);max-height:calc(var(--top-popup-bottom) + var(--top-popup-height))}.top-popup-wrapper.invert-x>.top-popup{max-width:calc(100vw - var(--top-popup-right) - 16px)}.top-popup-wrapper.invert-y>.top-popup{max-height:calc(100vh - var(--top-popup-bottom) - 16px)}.top-popup-wrapper.p1>.top-popup{max-height:calc(var(--top-popup-top) - var(--header-height, 0px) - 16px)}.top-popup-wrapper.p3>.top-popup{max-height:calc(var(--top-popup-bottom) - 16px)}.top-popup-wrapper.p2>.top-popup{max-width:calc(var(--top-popup-right) - 16px)}.top-popup-wrapper.p4>.top-popup{max-width:calc(var(--top-popup-left) - 16px)}.top-popup-wrapper.p1.with_notch>.top-popup,.top-popup-wrapper.p3.with_notch>.top-popup{margin-left:-16px!important}.top-popup-wrapper.p1.with_notch>.notch,.top-popup-wrapper.p3.with_notch>.notch{margin-left:-8px!important}.top-popup-wrapper.p1.with_notch.invert-x,.top-popup-wrapper.p3.with_notch.invert-x{margin-left:3px!important}.top-popup-wrapper.p1.with_notch.invert-x>.notch,.top-popup-wrapper.p3.with_notch.invert-x>.notch{margin-left:-9px!important}ul.top-popup_content li>*>i.top-popup_listMore{visibility:hidden;transition:none}ul.top-popup_content li:hover>*>i.top-popup_listMore,ul.top-popup_content li>*.top-active>i.top-popup_listMore,ul.top-popup_content li>*>i.top-popup_listMore.top-active{visibility:visible}";
|
|
182
|
-
f.insertStyleToPage(
|
|
183
|
-
f.insertStyleToPage(
|
|
184
|
-
f.insertStyleToPage(
|
|
181
|
+
const _ = ":root{--top-popup-z-index: 200000;--top-popup-transition-delay: .1s;--top-popup-background-color: var(--color-layout-front-1);--top-popup-background-color-hover: var(--color-layout-front-3);--top-popup-background-color-active: var(--color-layout-front-4);--top-popup-border-color: var(--color-line-2-opacity);--top-popup-title-background-color: var(--color-layer-1);--top-popup-content-padding: calc(var(--top-popup-list-padding) + var(--top-popup-listItem-padding));--top-popup-list-padding: var(--top-padding-2);--top-popup-listItem-radius: var(--top-radius-2);--top-popup-listItem-padding: var(--top-padding-2)}.top-popup-front{position:relative}.top-popup-wrapper{--top-popup-height: 0px;--top-popup-right-bounding: 0px;--top-popup-bottom-bounding: 0px;--top-popup-top: 0px;--top-popup-right: calc(100vw - var(--top-popup-right-bounding));--top-popup-bottom: calc(var(--100vh) - var(--top-popup-bottom-bounding));--top-popup-left: 0px;text-align:initial;white-space:normal;word-break:normal;position:absolute;z-index:200000}.top-popup-wrapper:not(.top-popup-wrapper-shown){overflow:hidden}.top-popupPanel{cursor:default;box-shadow:var(--top-shadow-b);border-radius:14px;background:var(--top-popup-background-color);position:absolute;overflow:hidden;display:flex;flex-direction:column}.top-popup-wrapper>*{opacity:0;transition:opacity var(--top-popup-transition-delay) linear,transform var(--top-popup-transition-delay) linear}.top-popup-wrapper.p0>*{transform:translateY(-8px)}.top-popup-wrapper.p1>*{transform:translateY(8px)}.top-popup-wrapper.p2>*{transform:translate(8px)}.top-popup-wrapper.p3>*{transform:translateY(8px)}.top-popup-wrapper.p4>*{transform:translate(-8px)}.top-popup-wrapper-shown:not(.top-popup-wrapper-closed)>*{opacity:1;transform:translate(0)!important}.top-popup-wrapper.p0>.top-popup{top:-16px;left:-8px}.top-popup-wrapper.p1>.top-popup{bottom:calc(100% + 8px)}.top-popup-wrapper.p2>.top-popup{left:calc(100% + 8px)}.top-popup-wrapper.p3>.top-popup{top:calc(100% + 8px)}.top-popup-wrapper.p4>.top-popup{right:calc(100% + 8px)}.top-popup-wrapper.p2>.top-popup,.top-popup-wrapper.p4>.top-popup{margin-top:-10px}.top-popup-wrapper.p1.with_notch>.top-popup{margin-bottom:5px}.top-popup-wrapper.p2.with_notch>.top-popup{margin-left:5px}.top-popup-wrapper.p3.with_notch>.top-popup{margin-top:5px}.top-popup-wrapper.p4.with_notch>.top-popup{margin-right:5px}.top-popup-wrapper.invert-x>.top-popup{right:0}.top-popup-wrapper.invert-y>.top-popup{bottom:0}.top-popup-wrapper>.notch{border:7.4px solid transparent;position:absolute;display:block}.top-popup-wrapper.p1>.notch{border-bottom:0;border-top:7.4px solid var(--color-layout-front-1);margin:0 0 7.4px -7.4px;bottom:100%;left:50%}.top-popup-wrapper.p2>.notch{border-left:0;border-right:7.4px solid var(--color-layout-front-1);margin:0 0 -7.4px 7.4px;bottom:50%;left:100%}.top-popup-wrapper.p3>.notch{border-top:0;border-bottom:7.4px solid var(--color-layout-front-1);margin:7.4px 0 0 -7.4px;top:100%;left:50%}.top-popup-wrapper.p4>.notch{border-right:0;border-left:7.4px solid var(--color-layout-front-1);margin:0 7.4px -7.4px 0;bottom:50%;right:100%}.top-popup-wrapper.p1>.notch-border{border-top-color:#0000000d;margin-bottom:6px}.top-popup-wrapper.p2>.notch-border{border-right-color:#0000000d;margin-left:6px}.top-popup-wrapper.p3>.notch-border{border-bottom-color:#0000000d;margin-top:6px}.top-popup-wrapper.p4>.notch-border{border-left-color:#0000000d;margin-right:6px}.top-popup_header,.top-popup_content,.top-popup_footer{font-size:14px}.top-popup_header,.top-popup_footer{display:flex;align-items:center;justify-content:space-between}.top-popup_header{color:var(--color-text-1);border-bottom:1px solid var(--top-popup-border-color);padding:var(--top-padding-3);font-weight:600}.top-popup_header>*{font-weight:400}.top-popup_header>.a{cursor:pointer}.top-popup_header>.a:hover{color:var(--color-text-primary)}.top-popup_headerButton{width:60px}.top-popup_widget{padding:var(--top-padding-2) var(--top-padding-2) 0 var(--top-padding-2)}.top-popup_content{margin:0;flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--top-gap-4);-webkit-overflow-scrolling:touch}div.top-popup_content{color:var(--color-text-1);padding:var(--top-popup-content-padding)}div.top-popup_content>*{flex-shrink:0}div.top-popup_content>.top-button{margin:0}div.top-popup_content .top-unwrap{--top-unwrap-x: var(--top-popup-content-padding)}ul.top-popup_content{color:var(--color-text-1);padding:var(--top-popup-list-padding);gap:2px}ul.top-popup_content .top-unwrap{--top-unwrap-x: var(--top-popup-list-padding)}.top-popup_listItem{border-radius:var(--top-popup-listItem-radius);padding:var(--top-popup-listItem-padding);line-height:1!important}ul.top-popup_content li{margin:0;list-style:none;display:flex;position:relative}ul.top-popup_content li>*{flex-grow:1}ul.top-popup_content li>a:not(.top-button),ul.top-popup_content li>.a{cursor:pointer;box-sizing:border-box;border-radius:var(--top-popup-listItem-radius);background:var(--top-popup-background-color);padding:var(--top-popup-listItem-padding);color:var(--color-text-1)!important;font-size:14px;font-weight:400!important;text-decoration:none!important;font-style:normal;line-height:1!important;display:flex;flex:1 1 100%;align-items:center;transition:background-color .1s ease-in-out}.top-popup-wrapper-no_animate ul.top-popup_content li>a:not(.top-button),.top-popup-wrapper-no_animate ul.top-popup_content li>.a{transition:none}ul.top-popup_content li>a:not(.top-button):hover,ul.top-popup_content li>.a:hover{background:var(--top-popup-background-color-hover)}ul.top-popup_content li>a:not(.top-button).top-active,ul.top-popup_content li>.a.top-active{--top-icon-color: var(--color-text-primary) !important;background:var(--top-popup-background-color-active)}.top-popup_content+.top-popup_content{padding-top:0}.top-popup_listItem-title{background:var(--color-layer-1);color:var(--color-text-1);font-size:12px}.top-popup_listItem-delimiter{border-radius:3px;background:var(--top-popup-border-color);height:1px;padding:0;margin:4px}.top-popup_listMore{font-size:20px;margin:calc(0px - var(--top-popup-listItem-padding)) calc(0px - var(--top-popup-listItem-padding) / 2) calc(0px - var(--top-popup-listItem-padding)) 0}.top-popup_listMore.top-button{margin:0}ul.top-popup_content li>.a.top-popup_listMore{text-align:center;flex-basis:10px}ul.top-popup_content li>.a.top-popup_listMore:before{color:var(--color-text-2)}ul.top-popup_content li>*>.top-popup_listMore{margin-left:auto;color:var(--color-layer-4);font-size:14px}ul.top-popup_content li>*>i.top-popup_listMore:hover,ul.top-popup_content li>*>i.top-popup_listMore.top-active{color:var(--color-text-primary)}ul.top-popup_content li>*>i.top-popup_listMore:before{transform:rotate(90deg);display:block}ul.top-popup_content li a.close{background:none!important}.top-popup_content>[data-top-icon]:before{--top-icon-size: 20px}ul.top-popup_content li>[data-top-icon]:not(.top-button){--top-icon-color: var(--color-text-3);--top-icon-size: 20px;--top-icon-width: 20px}ul.top-popup_content li>[data-top-icon]:not(.top-button):before{height:1rem;margin-right:8px;transition:color .1s}ul.top-popup_content li:hover>[data-top-icon]:not(.top-button){--top-icon-color: var(--color-text-2)}.top-popup_footer{padding:var(--top-padding-3);border-top:1px solid var(--top-popup-border-color);display:flex;gap:var(--top-gap-2);justify-content:flex-end}.top-popup_footerSupportLink{margin-right:auto}.top-popup>[data-widget]{padding:0 var(--top-popup-list-padding)}.top-popup>[data-widget]+hr{margin:0 var(--top-popup-list-padding)}.top-popup .placeholder{border:1px solid #E0D9D9!important;border-right:none!important;border-left:none!important;background:#f9f9f9!important;margin:-1px 0;z-index:1;position:relative}.top-popup-wrapper.simple_list>.top-popup{min-width:0;white-space:nowrap}.top-popup_content .top-column{display:flex;flex-direction:column;gap:4px}html .top-popup .top-popup_content li>.top-button{margin:calc(var(--top-popup-listItem-padding) / 2) var(--top-popup-listItem-padding)}.top-popup li .check_all,.top-popup li .clear_all{cursor:pointer;color:var(--color-text-primary);padding:8px;display:inline-block}.top-popup li .check_all:hover,.top-popup li .clear_all:hover{text-decoration:underline}.top-popup li .clear_all{display:none}.top-popup_content table{margin:-9px 0}.top-popup_content table td,.top-popup_content table th{padding:9px var(--top-popup-listItem-padding) 9px 0;vertical-align:top}.top-popup_content table th{width:40%;font-weight:600;white-space:nowrap}ul.top-popup_content .a>[type=checkbox],ul.top-popup_content .a>[type=radio]{margin:-8px 0 -8px auto}ul.top-popup_content a>[class*=icon],ul.top-popup_content i.a>[class*=icon]{transition:.1s}.top-popup .buttons{border-radius:0 0 4px 4px;border-top:1px solid #BDC3C7;background:#ecf0f1;padding:10px 15px;margin:10px -15px -10px;white-space:nowrap}.top-popup_footer [class*=btn]:not(.btn-transparent){min-width:100px;padding:5px 14px;margin-left:10px}.top-popup_footer [class*=btn]:first-child{margin-left:0}.top-popup_footer .btn.full_width{margin:0;flex-grow:1}", L = ":root{--top-popup-list-padding: 0px;--top-popup-listItem-radius: 0px;--top-popup-listItem-padding: var(--top-padding-4)}html.with_popup{background:gray}.top-popup-wrapper{--top-popup-footer-offset: 25px;width:auto!important;height:auto!important;position:fixed;top:0!important;right:0!important;left:0!important;overflow:hidden;transition:background .3s}.top-popup-wrapper-shown:not(.top-popup-wrapper-closed){background:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.top-popup-wrapper-shown:not(.top-popup-wrapper-closed)>.top-popup{opacity:1!important}.top-popup{border-radius:8px 8px 0 0;width:auto!important;max-height:calc(100% - var(--header-height, 0px) - var(--toolbar-height, 0px) - 12px);margin:0!important;top:auto!important;right:0!important;bottom:var(--toolbar-height, 0px)!important;left:0!important;display:flex;flex-direction:column;transform:translateY(80%);transition:opacity .3s,transform .3s}.top-popup-wrapper.p-from-top{--top-popup-footer-offset: 0px;top:var(--header-height, 0px)!important}.with_dialog .top-popup-wrapper.p-from-top{top:50px!important}.top-popup-wrapper.p-from-top>.top-popup{border-radius:0 0 8px 8px;max-height:calc(100% - 24px);top:0!important;bottom:auto!important;transform:translateY(calc(-100% - 24px))}.top-popup_widget{padding:var(--top-padding-2)}.top-popup_widget:not(.p-from-top){order:10}ul.top-popup_content{gap:0}ul.top-popup_content li:not(:last-child){border-bottom:1px solid var(--top-popup-border-color)}.top-popup-wrapper.top-style_alt>.top-popup>ul>li{border-bottom:none}.top-popup_footer{flex-direction:column-reverse}.top-popup_footer>.top-button{--top-forms-base-height: var(--top-forms-base-height_l);width:100%}ul.top-popup_content .top-popup_listItem-title{--top-popup-padding-v: 12px}ul.top-popup_content .top-popup_listItem-delimiter{background:var(--color-line-1-opacity);height:4px;margin:0}ul.top-popup_content li:first-child>.top-popup_listItem-delimiter{border-top:1px solid var(--top-popup-border-color)}", E = ".top-popup{min-width:250px;max-width:calc(100vw - var(--top-popup-left) - 16px);max-height:calc(var(--top-popup-bottom) + var(--top-popup-height))}.top-popup-wrapper.invert-x>.top-popup{max-width:calc(100vw - var(--top-popup-right) - 16px)}.top-popup-wrapper.invert-y>.top-popup{max-height:calc(100vh - var(--top-popup-bottom) - 16px)}.top-popup-wrapper.p1>.top-popup{max-height:calc(var(--top-popup-top) - var(--header-height, 0px) - 16px)}.top-popup-wrapper.p3>.top-popup{max-height:calc(var(--top-popup-bottom) - 16px)}.top-popup-wrapper.p2>.top-popup{max-width:calc(var(--top-popup-right) - 16px)}.top-popup-wrapper.p4>.top-popup{max-width:calc(var(--top-popup-left) - 16px)}.top-popup-wrapper.p1.with_notch>.top-popup,.top-popup-wrapper.p3.with_notch>.top-popup{margin-left:-16px!important}.top-popup-wrapper.p1.with_notch>.notch,.top-popup-wrapper.p3.with_notch>.notch{margin-left:-8px!important}.top-popup-wrapper.p1.with_notch.invert-x,.top-popup-wrapper.p3.with_notch.invert-x{margin-left:3px!important}.top-popup-wrapper.p1.with_notch.invert-x>.notch,.top-popup-wrapper.p3.with_notch.invert-x>.notch{margin-left:-9px!important}ul.top-popup_content li>*>i.top-popup_listMore{visibility:hidden;transition:none}ul.top-popup_content li:hover>*>i.top-popup_listMore,ul.top-popup_content li>*.top-active>i.top-popup_listMore,ul.top-popup_content li>*>i.top-popup_listMore.top-active{visibility:visible}";
|
|
182
|
+
f.insertStyleToPage(_);
|
|
183
|
+
f.insertStyleToPage(L, "m");
|
|
184
|
+
f.insertStyleToPage(E, "pc");
|
|
185
185
|
class v extends x {
|
|
186
186
|
static componentName = "TopPopup";
|
|
187
187
|
// элемент, вызвавший открытие Popup
|
|
@@ -280,7 +280,7 @@ class v extends x {
|
|
|
280
280
|
this.options.notch && (this.elPopup.classList.add("with_notch"), this.elPopup.insertAdjacentHTML("beforeend", '<i class="notch notch-border"></i><i class="notch"></i>')), await this.vueOpen(), this.elPopupHeader = this.elPopupInner.querySelector(".top-popup_header"), this.elPopupWidget = this.elPopupInner.querySelector(".top-popup_widget"), this.elPopupBody = this.elPopupInner.querySelector(".top-popup_content"), this.elPopupFooter = this.elPopupInner.querySelector(".top-popup_footer");
|
|
281
281
|
const p = !!this.elPopup.querySelector('[data-widget="search"]');
|
|
282
282
|
if (this.options.isFullScreen && !p) {
|
|
283
|
-
const r =
|
|
283
|
+
const r = w();
|
|
284
284
|
!this.elPopupHeader && r.Common.Close && (this.elPopupHeader = i.genEl("i", { class: "top-popup_header" }), this.elPopupInner.prepend(this.elPopupHeader), this.elPopupHeader.prepend(i.genEl("i", { class: "a closer" }, r.Common.Close)), this.elPopupHeader.append(i.genEl("i", { class: "top-popup_headerButton" })));
|
|
285
285
|
}
|
|
286
286
|
i.storage(this.elPopup, v.componentName, this), this.options.frontSelector && (this.elFront = document.querySelector(this.options.frontSelector)), this.elFront || (this.elFront = this.el.closest(".top-popup-front")), this.elFront || (this.elFront = document.body), this.elPopup instanceof HTMLElement && (this.elPopup.style.width = this.el.offsetWidth + "px", this.elPopup.style.height = this.el.offsetHeight + "px", this.elPopup.style.top = this.el.offsetTop + "px", this.elPopup.style.right = parseInt(this.el.style.right || "0") + "px", this.elPopup.style.bottom = parseInt(this.el.style.bottom || "0") + "px"), (n = this.el.parentElement) == null || n.insertBefore(this.elPopup, this.el), this.elPopup.classList.remove("template"), this.options.invertX && this.elPopup.classList.add("invert-x");
|
|
@@ -321,8 +321,8 @@ class v extends x {
|
|
|
321
321
|
if (t.target instanceof Element && t.target.matches("input") || this.isClosed)
|
|
322
322
|
return;
|
|
323
323
|
s.getAllVisible().forEach((o) => {
|
|
324
|
-
var e, n, r,
|
|
325
|
-
(e = this.elPopup) != null && e.contains(o) || ((n = this.popupParent) == null ? void 0 : n.elPopup) === o || ((
|
|
324
|
+
var e, n, r, a;
|
|
325
|
+
(e = this.elPopup) != null && e.contains(o) || ((n = this.popupParent) == null ? void 0 : n.elPopup) === o || ((a = (r = this.popupParent) == null ? void 0 : r.popupParent) == null ? void 0 : a.elPopup) === o || s.close(o);
|
|
326
326
|
});
|
|
327
327
|
}
|
|
328
328
|
/**
|
|
@@ -345,37 +345,37 @@ class v extends x {
|
|
|
345
345
|
t && (t = t.replace(/position:[^;]*;?/g, ""), this.el.setAttribute("style", t));
|
|
346
346
|
}
|
|
347
347
|
// контроль за положением Popup, чтобы оно не вылезало за пределы документа
|
|
348
|
-
recalcPosition() {
|
|
349
|
-
var
|
|
348
|
+
recalcPosition(t) {
|
|
349
|
+
var b, P;
|
|
350
350
|
if (!(this.elPopup instanceof HTMLElement)) return;
|
|
351
|
-
let
|
|
351
|
+
let p = t ?? this.options.p, o;
|
|
352
352
|
if (this.el instanceof HTMLElement)
|
|
353
|
-
switch (this.elPopup.style.height = this.el.offsetHeight + "px", this.elPopup.classList.remove("p0", "p1", "p2", "p3", "p4"), this.elPopup.classList.add("p" +
|
|
353
|
+
switch (this.elPopup.style.height = this.el.offsetHeight + "px", this.elPopup.classList.remove("p0", "p1", "p2", "p3", "p4"), this.elPopup.classList.add("p" + p), this.options.posBy) {
|
|
354
354
|
case "left":
|
|
355
|
-
|
|
355
|
+
o = this.el.offsetLeft + parseInt(this.el.style["margin-left"] || "0"), o += this.shift.left, this.elPopup.style.left = o + "px";
|
|
356
356
|
break;
|
|
357
357
|
case "right":
|
|
358
358
|
if (!(this.el.offsetParent instanceof HTMLElement)) break;
|
|
359
|
-
|
|
359
|
+
o = this.el.offsetLeft + parseInt(this.el.style["margin-left"] || "0"), this.elPopup.style.right = this.el.offsetParent.offsetWidth - this.el.offsetWidth - o + "px";
|
|
360
360
|
break;
|
|
361
361
|
case "fixed":
|
|
362
362
|
this.addEventListenerWithUnmount(window, "resize", () => this.onResize()), this.onResize();
|
|
363
363
|
break;
|
|
364
364
|
default:
|
|
365
|
-
(
|
|
365
|
+
(b = this.options.posBy) == null || b.append(this.elPopup);
|
|
366
366
|
}
|
|
367
|
-
const
|
|
368
|
-
this.elPopup.style.setProperty("--top-popup-height", this.elPopup.offsetHeight + "px"), this.elPopup.style.setProperty("--top-popup-right-bounding",
|
|
369
|
-
let
|
|
370
|
-
|
|
371
|
-
const
|
|
372
|
-
let
|
|
373
|
-
if (
|
|
374
|
-
|
|
367
|
+
const e = this.elPopup.getBoundingClientRect();
|
|
368
|
+
this.elPopup.style.setProperty("--top-popup-height", this.elPopup.offsetHeight + "px"), this.elPopup.style.setProperty("--top-popup-right-bounding", e.right + "px"), this.elPopup.style.setProperty("--top-popup-bottom-bounding", e.bottom + "px"), this.elPopup.style.setProperty("--top-popup-top", e.top + "px"), this.elPopup.style.setProperty("--top-popup-left", e.left + "px"), this.elPopupInner instanceof HTMLElement && (this.elPopupInner.style.maxWidth = "unset", this.elPopupInner.style.maxHeight = "unset");
|
|
369
|
+
let n = !1, r = !1, a = !1, c = !1, h = e.left > window.innerWidth / 2, d = e.top > window.innerHeight / 2;
|
|
370
|
+
p === 4 && (h = !h), p === 1 && (d = !d);
|
|
371
|
+
const l = (P = this.elPopupInner) == null ? void 0 : P.getBoundingClientRect();
|
|
372
|
+
let u, m;
|
|
373
|
+
if (l) {
|
|
374
|
+
u = window.innerWidth - l.right, m = window.innerHeight - l.bottom;
|
|
375
375
|
const g = 8;
|
|
376
|
-
|
|
376
|
+
l.top < g && (n = !0), u < g && (r = !0), m < g && (a = !0), l.left < g && (c = !0);
|
|
377
377
|
}
|
|
378
|
-
|
|
378
|
+
n && (p === 0 || p === 1) && d && (p = 3), a && p === 3 && d && (p = 1), r && p === 2 && h && (p = 4), c && p === 4 && h && (p = 2), r && (p === 0 || p === 1 || p === 3) && this.elPopup.classList.add("invert-x"), a && (p === 2 || p === 4) && d && (p === 2 && !h && this.elPopup.classList.add("invert-y"), p === 4 && !h && this.elPopup.classList.add("invert-x"), this.elPopup.matches(".invert-y") || (p = 1)), this.elPopup.classList.remove("p0", "p1", "p2", "p3", "p4"), this.elPopup.classList.add("p" + p), this.elPopupInner instanceof HTMLElement && (this.elPopupInner.style.maxWidth = "", this.elPopupInner.style.maxHeight = ""), s.scrollToActive(this.elPopup);
|
|
379
379
|
}
|
|
380
380
|
onTouchmove(t) {
|
|
381
381
|
var p, o, e;
|
|
@@ -388,9 +388,9 @@ class v extends x {
|
|
|
388
388
|
close() {
|
|
389
389
|
var t;
|
|
390
390
|
this.isClosed || (this.isClosed = !0, this.$ && f.$ && this.elPopup && this.$.trigger("afterclose.top-menu-popup", [f.$(this.elPopup)]), !s.noClose && (this.unmount(), (t = this.elPopup) == null || t.classList.add("top-popup-wrapper-closed"), setTimeout(() => {
|
|
391
|
-
var e, n, r,
|
|
391
|
+
var e, n, r, a, c;
|
|
392
392
|
if (this.vueClose(), !this.elPopup) return;
|
|
393
|
-
this.options.useOriginal ? (this.elPopup.removeAttribute("style"), this.elPopup.classList.remove("top-popup-wrapper-shown", "top-popup-wrapper-closed"), this.elPopup.classList.add("template"), (e = this.elStartPosition) == null || e.append(this.elPopup), (n = this.elPopup.querySelector("div.top-popup_content.top-column")) == null || n.classList.remove("top-column"), (r = this.elPopup.querySelector(".notch-border")) == null || r.remove(), (
|
|
393
|
+
this.options.useOriginal ? (this.elPopup.removeAttribute("style"), this.elPopup.classList.remove("top-popup-wrapper-shown", "top-popup-wrapper-closed"), this.elPopup.classList.add("template"), (e = this.elStartPosition) == null || e.append(this.elPopup), (n = this.elPopup.querySelector("div.top-popup_content.top-column")) == null || n.classList.remove("top-column"), (r = this.elPopup.querySelector(".notch-border")) == null || r.remove(), (a = this.elPopup.querySelector(".notch")) == null || a.remove(), (c = this.elPopupInner) == null || c.replaceWith(...this.elPopupInner.childNodes), i.storageClear(this.elPopup)) : (i.storageClear(this.elPopup), this.elPopup.remove(), delete this.elPopup);
|
|
394
394
|
const p = s.getAllVisible(), o = p.length && p[p.length - 1];
|
|
395
395
|
o ? s.getPopup(o).focus() : document.documentElement.classList.remove("with_popup");
|
|
396
396
|
}, this.options.transitionDuration)));
|
|
@@ -408,9 +408,9 @@ class v extends x {
|
|
|
408
408
|
if (this.el instanceof HTMLElement && this.options.id) return s.vueConnectors.get(this.options.id);
|
|
409
409
|
}
|
|
410
410
|
}
|
|
411
|
-
|
|
411
|
+
y.init();
|
|
412
412
|
export {
|
|
413
413
|
v as Popup,
|
|
414
414
|
v as default
|
|
415
415
|
};
|
|
416
|
-
//# sourceMappingURL=popup-
|
|
416
|
+
//# sourceMappingURL=popup-BxLi2sMk.es.js.map
|