@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.
Files changed (60) hide show
  1. package/.chunks/{datepicker-Ri3BN3-Y.es.js → datepicker-CDFryb2R.es.js} +2 -2
  2. package/.chunks/{datepicker-Ri3BN3-Y.es.js.map → datepicker-CDFryb2R.es.js.map} +1 -1
  3. package/.chunks/{forms-CHyoeELv.es.js → forms-DmpPuKKh.es.js} +6 -6
  4. package/.chunks/{forms-CHyoeELv.es.js.map → forms-DmpPuKKh.es.js.map} +1 -1
  5. 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
  6. 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
  7. 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
  8. 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
  9. package/.chunks/menu.vue_vue_type_style_index_0_lang-Chd1ygyG.amd.js.map +1 -1
  10. package/.chunks/{notice-Bh-LvHpR.es.js → notice-BNik2ZIo.es.js} +2 -2
  11. package/.chunks/{notice-Bh-LvHpR.es.js.map → notice-BNik2ZIo.es.js.map} +1 -1
  12. package/.chunks/{popup-0nFCdjiM.es.js → popup-BxLi2sMk.es.js} +46 -46
  13. package/.chunks/{popup-0nFCdjiM.es.js.map → popup-BxLi2sMk.es.js.map} +1 -1
  14. package/.chunks/{popup-B285SUGc.amd.js → popup-Dm9xIxVU.amd.js} +2 -2
  15. package/.chunks/{popup-B285SUGc.amd.js.map → popup-Dm9xIxVU.amd.js.map} +1 -1
  16. package/.chunks/{utils-B3neE-vU.es.js → utils-CKpKCxOO.es.js} +2 -2
  17. package/.chunks/{utils-B3neE-vU.es.js.map → utils-CKpKCxOO.es.js.map} +1 -1
  18. package/.chunks/{utils-tB3V9IWe.es.js → utils-DFwHp4q7.es.js} +3 -3
  19. package/.chunks/{utils-tB3V9IWe.es.js.map → utils-DFwHp4q7.es.js.map} +1 -1
  20. package/assets/menu.css +1 -1
  21. package/assets/themes/dark-th.css +1 -0
  22. package/assets/themes/dark.css +1 -1
  23. package/charts/charts.js +1 -1
  24. package/components/charts/miniChart/miniChart.d.ts +1 -1
  25. package/components/popup/lib/popup.d.ts +1 -1
  26. package/core/app.amd.js +1 -1
  27. package/core/app.amd.js.map +1 -1
  28. package/core/app.js +61 -67
  29. package/core/app.js.map +1 -1
  30. package/core/utils/clipboard.d.ts +5 -3
  31. package/dialog/dialog.js +2 -2
  32. package/forms/forms.js +1 -1
  33. package/formsExt/formsExt.js +2 -2
  34. package/icomoon/Topvisor icons.json +269 -198
  35. package/icomoon/demo.html +530 -488
  36. package/icomoon/fonts/Topvisor-2.eot +0 -0
  37. package/icomoon/fonts/Topvisor-2.svg +3 -0
  38. package/icomoon/fonts/Topvisor-2.ttf +0 -0
  39. package/icomoon/fonts/Topvisor-2.woff +0 -0
  40. package/icomoon/selection.json +1 -1
  41. package/icomoon/style.css +258 -249
  42. package/layout/layout.js +1 -1
  43. package/package.json +3 -3
  44. package/popup/popup.js +2 -2
  45. package/popup/worker.amd.js +1 -1
  46. package/popup/worker.js +2 -2
  47. package/project/project.amd.js +1 -1
  48. package/project/project.amd.js.map +1 -1
  49. package/project/project.js +167 -167
  50. package/project/project.js.map +1 -1
  51. package/tabsView/tabsView.js +1 -1
  52. package/utils/clipboard.amd.js +5 -1
  53. package/utils/clipboard.amd.js.map +1 -1
  54. package/utils/clipboard.js +29 -6
  55. package/utils/clipboard.js.map +1 -1
  56. package/utils/date.js +1 -1
  57. package/utils/device.js +1 -1
  58. package/utils/lodash.js +1 -1
  59. package/utils/price.js +1 -1
  60. package/utils/string.js +1 -1
@@ -1,9 +1,9 @@
1
- import { Core as b } from "../core/app.js";
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 { a as W } from "./forms-CHyoeELv.es.js";
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
- b.insertCSSLinkToPage(g, !0);
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((L) => !v.includes(L));
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-Dvz76-gx.es.js.map
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-Dvz76-gx.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
+ {"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-CHyoeELv.es.js";
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-Rex3a5_T.es.js.map
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-CHyoeELv.es.js";
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-Bh-LvHpR.es.js.map
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, '&nbsp;');\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, '&nbsp;');\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, '&nbsp;');\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, '&nbsp;');\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, c as P } from "./forms-CHyoeELv.es.js";
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 w {
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 c = i.querySelectorVisible(p, ".top-popup_footer .go, .top-popup_footer [data-action]");
139
- if (c instanceof HTMLElement) {
140
- c.click();
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 u = p.querySelector("li > .top-active");
150
- u instanceof HTMLElement && u.click();
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 l = (e = p.querySelector("ul.top-popup_content > li:not(.top-popup_liNoSelectable) > .top-active")) == null ? void 0 : e.parentElement;
163
- if (t.key === "ArrowRight" && l) {
164
- const c = l.querySelector(".top-active > .top-popup_listMore");
165
- if (c instanceof HTMLElement)
166
- return c.click();
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 d = i.querySelectorAllVisible(p, "ul.top-popup_content > li:not(.top-popup_liNoSelectable)"), h = d.length;
169
- if (!h)
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 a = -1;
172
- if (l && (a = d.indexOf(l)), t.key === "ArrowUp" || t.key === "ArrowLeft" ? a-- : a++, t.key === "ArrowLeft" && a === -1)
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" && a === h)
174
+ if (t.key === "ArrowRight" && l === d)
175
175
  return;
176
- a < 0 && (a = h - 1), a > h - 1 && (a = 0), p.querySelectorAll("ul.top-popup_content > li > .top-active").forEach((c) => c.classList.remove("top-active")), (n = d[a].querySelector(":scope > a, :scope > .a")) == null || n.classList.add("top-active"), s.scrollToActive(p);
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(y);
183
- f.insertStyleToPage(_, "m");
184
- f.insertStyleToPage(L, "pc");
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 = P();
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, u;
325
- (e = this.elPopup) != null && e.contains(o) || ((n = this.popupParent) == null ? void 0 : n.elPopup) === o || ((u = (r = this.popupParent) == null ? void 0 : r.popupParent) == null ? void 0 : u.elPopup) === o || s.close(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 m, b;
348
+ recalcPosition(t) {
349
+ var b, P;
350
350
  if (!(this.elPopup instanceof HTMLElement)) return;
351
- let t = this.options.p, p;
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" + t), this.options.posBy) {
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
- p = this.el.offsetLeft + parseInt(this.el.style["margin-left"] || "0"), p += this.shift.left, this.elPopup.style.left = p + "px";
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
- p = this.el.offsetLeft + parseInt(this.el.style["margin-left"] || "0"), this.elPopup.style.right = this.el.offsetParent.offsetWidth - this.el.offsetWidth - p + "px";
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
- (m = this.options.posBy) == null || m.append(this.elPopup);
365
+ (b = this.options.posBy) == null || b.append(this.elPopup);
366
366
  }
367
- const o = this.elPopup.getBoundingClientRect();
368
- this.elPopup.style.setProperty("--top-popup-height", this.elPopup.offsetHeight + "px"), this.elPopup.style.setProperty("--top-popup-right-bounding", o.right + "px"), this.elPopup.style.setProperty("--top-popup-bottom-bounding", o.bottom + "px"), this.elPopup.style.setProperty("--top-popup-top", o.top + "px"), this.elPopup.style.setProperty("--top-popup-left", o.left + "px"), this.elPopupInner instanceof HTMLElement && (this.elPopupInner.style.maxWidth = "unset", this.elPopupInner.style.maxHeight = "unset");
369
- let e = !1, n = !1, r = !1, u = !1, l = o.left > window.innerWidth / 2, d = o.top > window.innerHeight / 2;
370
- t === 4 && (l = !l), t === 1 && (d = !d);
371
- const h = (b = this.elPopupInner) == null ? void 0 : b.getBoundingClientRect();
372
- let a, c;
373
- if (h) {
374
- a = window.innerWidth - h.right, c = window.innerHeight - h.bottom;
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
- h.top < g && (e = !0), a < g && (n = !0), c < g && (r = !0), h.left < g && (u = !0);
376
+ l.top < g && (n = !0), u < g && (r = !0), m < g && (a = !0), l.left < g && (c = !0);
377
377
  }
378
- e && (t === 0 || t === 1) && d && (t = 3), r && t === 3 && d && (t = 1), n && t === 2 && l && (t = 4), u && t === 4 && l && (t = 2), n && (t === 0 || t === 1 || t === 3) && this.elPopup.classList.add("invert-x"), r && (t === 2 || t === 4) && d && (t === 2 && !l && this.elPopup.classList.add("invert-y"), t === 4 && !l && this.elPopup.classList.add("invert-x"), this.elPopup.matches(".invert-y") || (t = 1)), this.elPopup.classList.remove("p0", "p1", "p2", "p3", "p4"), this.elPopup.classList.add("p" + t), this.elPopupInner instanceof HTMLElement && (this.elPopupInner.style.maxWidth = "", this.elPopupInner.style.maxHeight = ""), s.scrollToActive(this.elPopup);
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, u, l;
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(), (u = this.elPopup.querySelector(".notch")) == null || u.remove(), (l = this.elPopupInner) == null || l.replaceWith(...this.elPopupInner.childNodes), i.storageClear(this.elPopup)) : (i.storageClear(this.elPopup), this.elPopup.remove(), delete this.elPopup);
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
- w.init();
411
+ y.init();
412
412
  export {
413
413
  v as Popup,
414
414
  v as default
415
415
  };
416
- //# sourceMappingURL=popup-0nFCdjiM.es.js.map
416
+ //# sourceMappingURL=popup-BxLi2sMk.es.js.map