@topvisor/ui 0.9.36 → 1.0.0-colors-3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.chunks/{datepicker-CMuCkYBj.amd.js → datepicker-CGWwMJRV.amd.js} +10 -10
- package/.chunks/datepicker-CGWwMJRV.amd.js.map +1 -0
- package/.chunks/{datepicker-CtcFJYEp.es.js → datepicker-INKeNnsk.es.js} +22 -22
- package/.chunks/datepicker-INKeNnsk.es.js.map +1 -0
- package/.chunks/debounce-4ipCj607.amd.js +2 -0
- package/.chunks/debounce-4ipCj607.amd.js.map +1 -0
- package/.chunks/debounce-BISRz08p.es.js +116 -0
- package/.chunks/debounce-BISRz08p.es.js.map +1 -0
- package/.chunks/{forms-Cay_sybt.es.js → forms-BDAati-M.es.js} +264 -249
- package/.chunks/forms-BDAati-M.es.js.map +1 -0
- package/.chunks/forms-ZqLh7cu5.amd.js +3 -0
- package/.chunks/forms-ZqLh7cu5.amd.js.map +1 -0
- package/.chunks/i18n-C_OH9IT3.amd.js +2 -0
- package/.chunks/{i18n-eDh3Aaw9.amd.js.map → i18n-C_OH9IT3.amd.js.map} +1 -1
- package/.chunks/i18n-DuTvft1T.es.js +26 -0
- package/.chunks/{i18n-qpB8zyhD.es.js.map → i18n-DuTvft1T.es.js.map} +1 -1
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-B-fUb36w.amd.js +2 -0
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-B-fUb36w.amd.js.map +1 -0
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-CaEDfkda.es.js +174 -0
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-CaEDfkda.es.js.map +1 -0
- package/.chunks/menu-BDD1uC-t.amd.js +2 -0
- package/.chunks/menu-BDD1uC-t.amd.js.map +1 -0
- package/.chunks/{menu-B3Nf7_NC.es.js → menu-DJZI8eh6.es.js} +30 -32
- package/.chunks/menu-DJZI8eh6.es.js.map +1 -0
- package/.chunks/{popup-B7UOyCUj.es.js → popup-C18N-1yr.es.js} +23 -18
- package/.chunks/popup-C18N-1yr.es.js.map +1 -0
- package/.chunks/{popup-BGuc5GyB.amd.js → popup-C497Sl7G.amd.js} +16 -11
- package/.chunks/popup-C497Sl7G.amd.js.map +1 -0
- package/assets/core.css +1 -1
- package/assets/dark.css +1 -1
- package/assets/forms.css +1 -1
- package/assets/formsExt.css +1 -1
- package/assets/light.css +1 -1
- package/assets/listItem.css +1 -1
- package/assets/menu.css +1 -1
- package/assets/popup.css +1 -1
- package/assets/tabs.css +1 -1
- package/assets/tabsView.css +1 -1
- package/common/common.d.ts +1 -1
- package/components/forms/avatar/avatar.vue.d.ts +12 -12
- package/components/forms/button/button.d.ts +14 -2
- package/components/forms/button/button.vue.d.ts +11 -12
- package/components/forms/checkbox/checkbox.vue.d.ts +19 -43
- package/components/forms/controlLabel/controlLabel.vue.d.ts +7 -8
- package/components/forms/forms.d.ts +0 -1
- package/components/forms/hint/hint.vue.d.ts +2 -3
- package/components/forms/input/input.d.ts +0 -1
- package/components/forms/input/input.vue.d.ts +11 -12
- package/components/forms/inputDate/inputDate.d.ts +0 -1
- package/components/forms/inputDate/inputDate.vue.d.ts +11 -12
- package/components/forms/radio/radio.vue.d.ts +8 -9
- package/components/forms/select/select.d.ts +0 -1
- package/components/forms/select/select.vue.d.ts +31 -69
- package/components/forms/select/stories/exampleOptions.d.ts +0 -1
- package/components/forms/switcher/switcher.vue.d.ts +8 -9
- package/components/forms/textarea/textarea.vue.d.ts +11 -12
- package/components/formsExt/editArea/editArea.d.ts +0 -1
- package/components/formsExt/editArea/editArea.vue.d.ts +13 -14
- package/components/formsExt/editInput/editInput.d.ts +0 -1
- package/components/formsExt/editInput/editInput.vue.d.ts +3 -4
- package/components/formsExt/formsExt.d.ts +0 -1
- package/components/formsExt/menu/menu.d.ts +0 -1
- package/components/formsExt/menu/menu.vue.d.ts +32 -48
- package/components/formsExt/menu/stories/items.d.ts +0 -1
- package/components/formsExt/radioGroup/radioGroup.d.ts +0 -1
- package/components/formsExt/radioGroup/radioGroup.vue.d.ts +31 -42
- package/components/formsExt/selector2/api.d.ts +0 -1
- package/components/formsExt/selector2/itemMulti.vue.d.ts +3 -4
- package/components/formsExt/selector2/selector2.d.ts +0 -1
- package/components/formsExt/selector2/selector2.vue.d.ts +37 -117
- package/components/popup/alert/alert.d.ts +8 -0
- package/components/popup/alert/alert.vue.d.ts +33 -0
- package/components/popup/confirm/confirm.d.ts +21 -0
- package/components/popup/confirm/confirm.vue.d.ts +35 -0
- package/components/popup/lib/popup.d.ts +0 -1
- package/components/popup/lib/worker.d.ts +4 -5
- package/components/popup/popup/listItem.vue.d.ts +11 -12
- package/components/popup/popup/opener.vue.d.ts +13 -14
- package/components/popup/popup/popup.d.ts +8 -2
- package/components/popup/popup/popup.vue.d.ts +13 -14
- package/components/popup/popup/widgetInput.vue.d.ts +32 -82
- package/components/popup/popup.d.ts +6 -1
- package/components/popup/prompt/prompt.d.ts +21 -0
- package/components/popup/prompt/prompt.vue.d.ts +35 -0
- package/components/project/project.d.ts +0 -1
- package/components/project/selectorCompetitors/composables.d.ts +0 -1
- package/components/project/selectorCompetitors/selectorCompetitors.d.ts +0 -1
- package/components/project/selectorCompetitors/selectorCompetitors.vue.d.ts +32 -24
- package/components/tabs/tabs/content.vue.d.ts +7 -8
- package/components/tabs/tabs/tab.vue.d.ts +7 -8
- package/components/tabs/tabs/tabs.vue.d.ts +7 -8
- package/components/tabs/tabs.d.ts +0 -1
- package/components/tabsView/tabsView/menu.vue.d.ts +22 -14
- package/components/tabsView/tabsView/menuItem.vue.d.ts +12 -12
- package/components/tabsView/tabsView/menuTitle.vue.d.ts +8 -8
- package/components/tabsView/tabsView/store.d.ts +1 -2
- package/components/tabsView/tabsView/tabsView.d.ts +0 -1
- package/components/tabsView/tabsView/tabsView.vue.d.ts +34 -34
- package/components/tabsView/tabsView.d.ts +0 -1
- package/core/app.amd.js +1 -1
- package/core/app.amd.js.map +1 -1
- package/core/app.d.ts +0 -1
- package/core/app.js +23 -21
- package/core/app.js.map +1 -1
- package/core/core/core.d.ts +14 -0
- package/core/core.amd.js +1 -1
- package/core/core.d.ts +2 -1
- package/core/core.js +1 -1
- package/core/directives/focus.d.ts +0 -1
- package/core/directives/sticky.d.ts +0 -1
- package/core/directives/swimUp.d.ts +0 -1
- package/core/directives/tooltip.d.ts +0 -1
- package/core/plugins/core.d.ts +0 -1
- package/core/plugins/i18n.d.ts +0 -1
- package/core/plugins/piniaTPA.d.ts +0 -1
- package/core/utils/lodash.d.ts +6 -0
- package/core/utils/price.d.ts +0 -1
- package/core/utils/store/localStorage.d.ts +0 -1
- package/core/utils/store/plugin.d.ts +0 -1
- package/core/utils/store/store.d.ts +0 -1
- package/forms/forms.amd.js +1 -1
- package/forms/forms.d.ts +1 -0
- package/forms/forms.js +1 -1
- package/forms/helpers.d.ts +1 -0
- package/formsExt/formsExt.amd.js +1 -1
- package/formsExt/formsExt.amd.js.map +1 -1
- package/formsExt/formsExt.d.ts +1 -0
- package/formsExt/formsExt.js +3 -3
- package/formsExt/formsExt.js.map +1 -1
- package/package.json +1 -2
- package/popup/popup.amd.js +1 -1
- package/popup/popup.amd.js.map +1 -1
- package/popup/popup.d.ts +1 -0
- package/popup/popup.js +219 -21
- package/popup/popup.js.map +1 -1
- package/popup/worker.amd.js +1 -1
- package/popup/worker.amd.js.map +1 -1
- package/popup/worker.d.ts +3 -0
- package/popup/worker.js +2 -2
- package/popup/worker.js.map +1 -1
- package/project/project.amd.js +1 -1
- package/project/project.amd.js.map +1 -1
- package/project/project.d.ts +1 -0
- package/project/project.js +20 -20
- package/tabs/tabs.amd.js +1 -1
- package/tabs/tabs.d.ts +1 -0
- package/tabs/tabs.js +1 -1
- package/tabsView/tabsView.amd.js +1 -1
- package/tabsView/tabsView.amd.js.map +1 -1
- package/tabsView/tabsView.d.ts +1 -0
- package/tabsView/tabsView.js +1 -1
- package/tabsView/tabsView.js.map +1 -1
- package/utils/check.d.ts +1 -0
- package/utils/clipboard.d.ts +1 -0
- package/utils/date.amd.js +1 -1
- package/utils/date.d.ts +1 -0
- package/utils/date.js +2 -2
- package/utils/device.amd.js +1 -1
- package/utils/device.d.ts +1 -0
- package/utils/device.js +1 -1
- package/utils/dom.d.ts +3 -0
- package/utils/image.d.ts +1 -0
- package/utils/keyboard.d.ts +1 -0
- package/utils/lodash.amd.js +2 -0
- package/utils/lodash.amd.js.map +1 -0
- package/utils/lodash.d.ts +2 -0
- package/utils/lodash.js +706 -0
- package/utils/lodash.js.map +1 -0
- package/utils/number.d.ts +1 -0
- package/utils/price.amd.js +1 -1
- package/utils/price.d.ts +1 -0
- package/utils/price.js +2 -2
- package/utils/route.d.ts +1 -0
- package/utils/scroll.d.ts +1 -0
- package/utils/store.d.ts +1 -0
- package/utils/string.amd.js +1 -1
- package/utils/string.d.ts +1 -0
- package/utils/string.js +1 -1
- package/utils/system.d.ts +1 -0
- package/utils/url.d.ts +1 -0
- package/.chunks/datepicker-CMuCkYBj.amd.js.map +0 -1
- package/.chunks/datepicker-CtcFJYEp.es.js.map +0 -1
- package/.chunks/forms-Cay_sybt.es.js.map +0 -1
- package/.chunks/forms-Lm1WM1gO.amd.js +0 -3
- package/.chunks/forms-Lm1WM1gO.amd.js.map +0 -1
- package/.chunks/i18n-eDh3Aaw9.amd.js +0 -2
- package/.chunks/i18n-qpB8zyhD.es.js +0 -20
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-B3TjT92k.es.js +0 -161
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-B3TjT92k.es.js.map +0 -1
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-D1glM0F3.amd.js +0 -2
- package/.chunks/listItem.vue_vue_type_script_setup_true_lang-D1glM0F3.amd.js.map +0 -1
- package/.chunks/menu-B3Nf7_NC.es.js.map +0 -1
- package/.chunks/menu-Dg2EKy3O.amd.js +0 -2
- package/.chunks/menu-Dg2EKy3O.amd.js.map +0 -1
- package/.chunks/popup-B7UOyCUj.es.js.map +0 -1
- package/.chunks/popup-BGuc5GyB.amd.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listItem.vue_vue_type_script_setup_true_lang-B-fUb36w.amd.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\telOpener.dataset.topPopup = 'vue-' + id;\r\n\telOpener.dataset.topPopupId = id;\r\n\telOpener.dataset.topPopupP = 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 type { Ref } from 'vue';\r\nimport { onUnmounted, ref, toRef } from 'vue';\r\nimport TopHint from '@/components/forms/hint/hint.vue';\r\nimport type PopupClass from '@/components/popup/lib/popup';\r\nimport Core from '@/core/core/core';\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 || Math.random() + '';\r\nconst elPopupRef: Ref<null | Element> = ref(null);\r\n\r\n// см. lib/popup\r\nconst onOpen = async (popup: PopupClass) => {\r\n\tif (popup.elPopupInner) {\r\n\t\tpopup.elPopupInner.innerText = '';\r\n\r\n\t\telPopupRef.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');\r\n};\r\n\r\n// см. lib/popup\r\nconst onClose = (_popup: PopupClass) => {\r\n\telPopupRef.value = null;\r\n\r\n\tvueConnector.opened = false;\r\n\tvueConnector.popup = undefined;\r\n\r\n\temit('close');\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\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<!-- elPopupRef будет установлен только после открытия и будет сброшен сразу после закрытия Popup -->\r\n\t<teleport\r\n\t\tv-if=\"elPopupRef\"\r\n\t\t:to=\"elPopupRef\"\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 module>\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","render","el","elOpener","renderOpener","elOpener2","emit","__emit","__expose","expose","elPopupRef","vue","popup","vueConnector","_popup","popup_worker"],"mappings":"qWAIA,MAAAA,EAAAC,EAMAC,EAAAF,EAAA,IAAA,KAAA,OAAA,EAAA,SASA,SAAAG,EAAAC,EAAA,iBAEEC,EAAAD,EAAA,sBAGCE,EAAAD,CAAA,CACD,CAAA,sBAMAC,EAAAD,CAAA,CACD,CAAA,EAGD,SAAAC,EAAAC,EAAA,6BAECA,EAAA,QAAA,WAAAL,4DAGAK,EAAA,QAAA,cAAAP,EAAA,MAAA,OAAA,GACAO,EAAA,QAAA,oBAAAP,EAAA,YAAA,OAAA,6mBC/BD,MAAAA,EAAAC,EAOAO,EAAAC,iBAGQ,EAERC,EAAAC,CAAA,EAEA,MAAAT,EAAAF,EAAA,IAAA,KAAA,OAAA,EAAA,GACAY,EAAAC,EAAA,IAAA,IAAA,KA4BqB,OAzBrB,MAAAC,GAAA,CACCA,EAAA,eACCA,EAAA,aAAA,UAAA,GAEAF,EAAA,MAAAE,EAAA,cAGDC,EAAA,OAAA,GACAA,EAAA,MAAAD,EAEAH,EAAA,MAAAG,EAEAN,EAAA,MAAA,CAAW,EAcX,QAVDQ,GAAA,CACCJ,EAAA,MAAA,KAEAG,EAAA,OAAA,GACAA,EAAA,MAAA,OAEAP,EAAA,OAAA,CAAY,EAKZ,SAAAK,EAAA,MAAAb,EAAA,OAAA,yBAGO,sBAAAa,EAAA,MAAAb,EAAA,oBAAA,CACiD,kEAMxDiB,EAAA,eAAA,kBAAAf,CAAA,CAA2B,CAAA,+yDC1D5B,MAAAF,EAAAC"}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import S from "../core/core.js";
|
|
2
|
+
import { defineComponent as _, onUpdated as g, openBlock as p, createElementBlock as n, Fragment as C, createElementVNode as b, renderSlot as a, ref as I, toRef as k, onUnmounted as H, createBlock as y, unref as m, withCtx as $, createCommentVNode as l, Teleport as M, toDisplayString as N, createVNode as T, normalizeClass as D, resolveDynamicComponent as V, mergeProps as w } from "vue";
|
|
3
|
+
import { C as B, p as R, _ as E } from "./forms-BDAati-M.es.js";
|
|
4
|
+
import { TopPopupWorker as v } from "../popup/worker.js";
|
|
5
|
+
const L = ["../assets/listItem.css"].map((u) => import.meta.resolve(u));
|
|
6
|
+
S.insertCSSLinkToPage(L, !0);
|
|
7
|
+
const U = /* @__PURE__ */ _({
|
|
8
|
+
__name: "opener",
|
|
9
|
+
props: {
|
|
10
|
+
id: {},
|
|
11
|
+
pos: { default: "3" },
|
|
12
|
+
notch: { type: Boolean, default: !0 },
|
|
13
|
+
openByHover: { type: Boolean },
|
|
14
|
+
posBy: { default: "fixed" }
|
|
15
|
+
},
|
|
16
|
+
setup(u) {
|
|
17
|
+
const t = u, r = t.id || Math.random() + "";
|
|
18
|
+
let s;
|
|
19
|
+
function f(e) {
|
|
20
|
+
setTimeout(() => {
|
|
21
|
+
s = e.nextElementSibling, s && i(s);
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
g(() => {
|
|
25
|
+
s && i(s);
|
|
26
|
+
});
|
|
27
|
+
function i(e) {
|
|
28
|
+
e.dataset.topPopup = "vue-" + r, e.dataset.topPopupId = r, e.dataset.topPopupP = t.pos, e.dataset.topPopupPosBy = t.posBy, e.dataset.topPopupNotch = t.notch ? "true" : "", e.dataset.topPopupOpenByHover = t.openByHover ? "true" : "";
|
|
29
|
+
}
|
|
30
|
+
return (e, d) => (p(), n(C, null, [
|
|
31
|
+
b("template", { ref: f }),
|
|
32
|
+
a(e.$slots, "default")
|
|
33
|
+
], 64));
|
|
34
|
+
}
|
|
35
|
+
}), W = {
|
|
36
|
+
key: 0,
|
|
37
|
+
class: "top-popup_header"
|
|
38
|
+
}, z = {
|
|
39
|
+
key: 0,
|
|
40
|
+
class: "top-as-a closer"
|
|
41
|
+
}, A = {
|
|
42
|
+
key: 1,
|
|
43
|
+
class: "top-popup_widget"
|
|
44
|
+
}, F = {
|
|
45
|
+
key: 2,
|
|
46
|
+
class: "top-popup_content"
|
|
47
|
+
}, j = {
|
|
48
|
+
key: 4,
|
|
49
|
+
class: "top-popup_footer"
|
|
50
|
+
}, q = ["href"], G = /* @__PURE__ */ _({
|
|
51
|
+
__name: "popup",
|
|
52
|
+
props: {
|
|
53
|
+
id: { default: "" },
|
|
54
|
+
class: {},
|
|
55
|
+
transitionDuration: {},
|
|
56
|
+
footerSupportLink: {},
|
|
57
|
+
pos: { default: "3" },
|
|
58
|
+
notch: { type: Boolean, default: !0 },
|
|
59
|
+
openByHover: { type: Boolean },
|
|
60
|
+
posBy: { default: "fixed" }
|
|
61
|
+
},
|
|
62
|
+
emits: ["open", "close", "scrollContentList"],
|
|
63
|
+
setup(u, { expose: t, emit: r }) {
|
|
64
|
+
const s = u, f = r, i = {
|
|
65
|
+
popup: void 0
|
|
66
|
+
};
|
|
67
|
+
t(i);
|
|
68
|
+
const e = s.id || Math.random() + "", d = I(null), c = {
|
|
69
|
+
onOpen: async (o) => {
|
|
70
|
+
o.elPopupInner && (o.elPopupInner.innerText = "", d.value = o.elPopupInner), c.opened = !0, c.popup = o, i.popup = o, f("open");
|
|
71
|
+
},
|
|
72
|
+
onClose: (o) => {
|
|
73
|
+
d.value = null, c.opened = !1, c.popup = void 0, f("close");
|
|
74
|
+
},
|
|
75
|
+
classRef: k(s, "class"),
|
|
76
|
+
opened: !1,
|
|
77
|
+
popup: void 0,
|
|
78
|
+
transitionDurationRef: k(s, "transitionDuration")
|
|
79
|
+
};
|
|
80
|
+
return v.regVueComponent(e, c), H(() => {
|
|
81
|
+
v.unregVueComponent(e);
|
|
82
|
+
}), (o, h) => (p(), n(C, null, [
|
|
83
|
+
o.$slots.opener ? (p(), y(U, {
|
|
84
|
+
key: 0,
|
|
85
|
+
id: m(e),
|
|
86
|
+
pos: o.pos,
|
|
87
|
+
posBy: o.posBy,
|
|
88
|
+
notch: o.notch,
|
|
89
|
+
openByHover: o.openByHover
|
|
90
|
+
}, {
|
|
91
|
+
default: $(() => [
|
|
92
|
+
a(o.$slots, "opener")
|
|
93
|
+
]),
|
|
94
|
+
_: 3
|
|
95
|
+
}, 8, ["id", "pos", "posBy", "notch", "openByHover"])) : l("", !0),
|
|
96
|
+
d.value ? (p(), y(M, {
|
|
97
|
+
key: 1,
|
|
98
|
+
to: d.value
|
|
99
|
+
}, [
|
|
100
|
+
o.$slots.header || m(B).state.isMobile ? (p(), n("div", W, [
|
|
101
|
+
m(B).state.isMobile ? (p(), n("span", z, N(o.$i18n.Common.Close), 1)) : l("", !0),
|
|
102
|
+
a(o.$slots, "header")
|
|
103
|
+
])) : l("", !0),
|
|
104
|
+
o.$slots.widget ? (p(), n("div", A, [
|
|
105
|
+
a(o.$slots, "widget")
|
|
106
|
+
])) : l("", !0),
|
|
107
|
+
o.$slots.content ? (p(), n("div", F, [
|
|
108
|
+
a(o.$slots, "content")
|
|
109
|
+
])) : l("", !0),
|
|
110
|
+
o.$slots.contentList ? (p(), n("ul", {
|
|
111
|
+
key: 3,
|
|
112
|
+
class: "top-popup_content",
|
|
113
|
+
onScroll: h[0] || (h[0] = (P) => o.$emit("scrollContentList", P))
|
|
114
|
+
}, [
|
|
115
|
+
a(o.$slots, "contentList")
|
|
116
|
+
], 32)) : l("", !0),
|
|
117
|
+
o.$slots.footer || o.footerSupportLink ? (p(), n("div", j, [
|
|
118
|
+
o.footerSupportLink ? (p(), n("a", {
|
|
119
|
+
key: 0,
|
|
120
|
+
class: "top-popup_footerSupportLink",
|
|
121
|
+
href: o.footerSupportLink,
|
|
122
|
+
target: "_blank"
|
|
123
|
+
}, [
|
|
124
|
+
T(R, { hint: "" })
|
|
125
|
+
], 8, q)) : l("", !0),
|
|
126
|
+
a(o.$slots, "footer")
|
|
127
|
+
])) : l("", !0)
|
|
128
|
+
], 8, ["to"])) : l("", !0)
|
|
129
|
+
], 64));
|
|
130
|
+
}
|
|
131
|
+
}), J = {
|
|
132
|
+
"top-popup_footerSupportLink": "top-popup_footerSupportLink"
|
|
133
|
+
}, K = {
|
|
134
|
+
$style: J
|
|
135
|
+
}, oo = /* @__PURE__ */ E(G, [["__cssModules", K]]), eo = /* @__PURE__ */ _({
|
|
136
|
+
inheritAttrs: !1,
|
|
137
|
+
__name: "listItem",
|
|
138
|
+
props: {
|
|
139
|
+
type: { default: "button" },
|
|
140
|
+
closeByClick: { type: Boolean, default: !0 }
|
|
141
|
+
},
|
|
142
|
+
setup(u) {
|
|
143
|
+
const t = u;
|
|
144
|
+
return (r, s) => (p(), n("li", {
|
|
145
|
+
class: D({
|
|
146
|
+
"top-popup_liNoSelectable": t.type !== "button"
|
|
147
|
+
})
|
|
148
|
+
}, [
|
|
149
|
+
(p(), y(V(r.$attrs.href ? "a" : "div"), w({
|
|
150
|
+
class: {
|
|
151
|
+
"top-popup_listItem": !0,
|
|
152
|
+
"top-popup_listItem-button": t.type === "button",
|
|
153
|
+
// оформления кнопки
|
|
154
|
+
a: t.type === "button",
|
|
155
|
+
// оформления кнопки, deprecated
|
|
156
|
+
"top-popup_listItem-title": t.type === "title",
|
|
157
|
+
"top-popup_listItem-delimiter": t.type === "delimiter",
|
|
158
|
+
"top-popup-noCloser": !r.closeByClick
|
|
159
|
+
}
|
|
160
|
+
}, r.$attrs), {
|
|
161
|
+
default: $(() => [
|
|
162
|
+
a(r.$slots, "default")
|
|
163
|
+
]),
|
|
164
|
+
_: 3
|
|
165
|
+
}, 16, ["class"]))
|
|
166
|
+
], 2));
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
export {
|
|
170
|
+
oo as P,
|
|
171
|
+
eo as _,
|
|
172
|
+
U as a
|
|
173
|
+
};
|
|
174
|
+
//# sourceMappingURL=listItem.vue_vue_type_script_setup_true_lang-CaEDfkda.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listItem.vue_vue_type_script_setup_true_lang-CaEDfkda.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\telOpener.dataset.topPopup = 'vue-' + id;\r\n\telOpener.dataset.topPopupId = id;\r\n\telOpener.dataset.topPopupP = 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 type { Ref } from 'vue';\r\nimport { onUnmounted, ref, toRef } from 'vue';\r\nimport TopHint from '@/components/forms/hint/hint.vue';\r\nimport type PopupClass from '@/components/popup/lib/popup';\r\nimport Core from '@/core/core/core';\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 || Math.random() + '';\r\nconst elPopupRef: Ref<null | Element> = ref(null);\r\n\r\n// см. lib/popup\r\nconst onOpen = async (popup: PopupClass) => {\r\n\tif (popup.elPopupInner) {\r\n\t\tpopup.elPopupInner.innerText = '';\r\n\r\n\t\telPopupRef.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');\r\n};\r\n\r\n// см. lib/popup\r\nconst onClose = (_popup: PopupClass) => {\r\n\telPopupRef.value = null;\r\n\r\n\tvueConnector.opened = false;\r\n\tvueConnector.popup = undefined;\r\n\r\n\temit('close');\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\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<!-- elPopupRef будет установлен только после открытия и будет сброшен сразу после закрытия Popup -->\r\n\t<teleport\r\n\t\tv-if=\"elPopupRef\"\r\n\t\t:to=\"elPopupRef\"\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 module>\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","vueConnector","popup","_popup","toRef","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;AACC,MAAAA,EAAA,QAAA,WAAA,SAAAN,GACAM,EAAA,QAAA,aAAAN,GACAM,EAAA,QAAA,YAAAR,EAAA,KACAQ,EAAA,QAAA,gBAAAR,EAAA,OACAQ,EAAA,QAAA,gBAAAR,EAAA,QAAA,SAAA,IACAQ,EAAA,QAAA,sBAAAR,EAAA,cAAA,SAAA;AAAA,IAAoE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/BrE,UAAAA,IAAAC,GAOAQ,IAAAC,GAEAC,IAAA;AAAA,MAAe,OAAA;AAAA,IACP;AAER,IAAAC,EAAAD,CAAA;AAEA,UAAAT,IAAAF,EAAA,MAAA,KAAA,OAAA,IAAA,IACAa,IAAAC,EAAA,IAAA,GA4BAC,IAAA;AAAA,MAAqB,QAzBrB,OAAAC,MAAA;AACC,QAAAA,EAAA,iBACCA,EAAA,aAAA,YAAA,IAEAH,EAAA,QAAAG,EAAA,eAGDD,EAAA,SAAA,IACAA,EAAA,QAAAC,GAEAL,EAAA,QAAAK,GAEAP,EAAA,MAAA;AAAA,MAAW;AAAA,MAcX,SAVD,CAAAQ,MAAA;AACC,QAAAJ,EAAA,QAAA,MAEAE,EAAA,SAAA,IACAA,EAAA,QAAA,QAEAN,EAAA,OAAA;AAAA,MAAY;AAAA,MAKZ,UAAAS,EAAAlB,GAAA,OAAA;AAAA,MAC8B,QAAA;AAAA,MACtB,OAAA;AAAA,MACD,uBAAAkB,EAAAlB,GAAA,oBAAA;AAAA,IACiD;AAGzD,WAAAmB,EAAA,gBAAAjB,GAAAa,CAAA,GAEAK,EAAA,MAAA;AACC,MAAAD,EAAA,kBAAAjB,CAAA;AAAA,IAA2B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC1D5B,UAAAF,IAAAC;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
define(["require","exports","vue","./forms-ZqLh7cu5.amd","../require/css.amd!../assets/menu.css"],function(C,m,e,u){"use strict";if(typeof e>"u")var e=window.Vue;const y={key:0,class:"top-menu_selectAll"},h=e.defineComponent({__name:"menu",props:e.mergeModels({modelValue:{},items:{},isMultiple:{type:Boolean},canBeEmptyMultiple:{type:Boolean},styling:{default:"default"},selectAllItem:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(f){const s=f,o=e.useModel(f,"modelValue"),a=e.ref();!s.isMultiple&&!(typeof o.value=="string"||o.value instanceof String)&&console.warn('Type check failed for prop "modelValue". Expected String: '+typeof o.value),s.isMultiple&&!Array.isArray(o.value)&&console.warn('Type check failed for prop "modelValue". Expected Array: '+typeof o.value),s.isMultiple&&!s.canBeEmptyMultiple&&Array.isArray(o.value)&&!o.value.length&&(o.value=[s.items[0].href??s.items[0].value]);const M=t=>Array.isArray(o.value)?o.value.includes(t.value):t.value===o.value,k=(t,r=!1)=>{if(Array.isArray(o.value)){let l=o.value.slice();if(r){l.length||(l=s.items.map(c=>c.value));const n=l.indexOf(t.value);n===-1?l.push(t.value):l.splice(n,1)}else l.length===1&&l[0]===t.value?l=[]:l=[t.value];!s.canBeEmptyMultiple&&!l.length&&(l=[t.value]),o.value=l;return}o.value=t.value},_=t=>{if(a.value.scrollWidth<=a.value.offsetWidth||t.shiftKey||Math.abs(t.deltaY)<50)return;t.preventDefault();const r=t.deltaY>0?30:-30;a.value.scrollLeft=a.value.scrollLeft+r},p=(t=!0)=>{var v,d;const r=a.value.querySelector(".top-active");if(!r)return;const l=24,n=r.offsetLeft-a.value.offsetLeft-l,c=r.offsetLeft-a.value.offsetLeft+r.clientWidth+l,V=a.value.scrollLeft,L=a.value.clientWidth+a.value.scrollLeft;let i;n<V&&(i=n),c>L&&(i=c-a.value.clientWidth),i!==void 0&&(u.isSafari()?(d=(v=u.Core).$)==null||d.call(v,a.value).animate({scrollLeft:i},t?200:0):a.value.scrollTo({left:i,behavior:t?"smooth":"auto"}))},B=()=>{if(Array.isArray(o.value)){if(o.value.length===s.items.length){o.value=[s.items[0].href??s.items[0].value];return}o.value=s.items.map(t=>t.href??t.value)}};return e.onMounted(()=>p(!1)),e.onUpdated(()=>p(!0)),(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"el",ref:a,class:e.normalizeClass({"top-menu":!0,["top-style_"+t.styling]:!0}),onWheel:_},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,l=>(e.openBlock(),e.createBlock(u.TopButton,e.mergeProps({ref_for:!0},l,{class:"top-menu_item",color:"theme",onClick:n=>k(l,n.ctrlKey),isActive:M(l)}),e.createSlots({_:2},[l.content?{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.content),1)]),key:"0"}:void 0]),1040,["onClick","isActive"]))),256)),Array.isArray(o.value)&&t.selectAllItem?(e.openBlock(),e.createElementBlock("div",y,[e.createVNode(u.TopButton,e.mergeProps(t.selectAllItem,{class:"top-menu_item",color:"theme",styling:"",onClick:r[0]||(r[0]=l=>B()),isActive:o.value.length===t.items.length}),e.createSlots({_:2},[t.selectAllItem.content?{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.selectAllItem.content),1)]),key:"0"}:void 0]),1040,["isActive"])])):e.createCommentVNode("",!0)],34))}}),g={$style:{"top-menu":"top-menu","top-menu_item":"top-menu_item","top-menu_selectAll":"top-menu_selectAll","top-style_default":"top-style_default","top-active":"top-active","top-style_bar":"top-style_bar"}},A=u._export_sfc(h,[["__cssModules",g]]);m.Menu=A});
|
|
2
|
+
//# sourceMappingURL=menu-BDD1uC-t.amd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-BDD1uC-t.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 module>\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(--content-background-color);\r\n\tborder-left: 1px solid var(--color-line-1);\r\n\tpadding-left: var(--top-padding-1);\r\n\tbox-shadow: var(--content-background-color) 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-hover);\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-secondary-1);\r\n\t--top-button-background-color-active: var(--color-layer-secondary-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,14 +1,14 @@
|
|
|
1
1
|
import S from "../core/core.js";
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
import { T as M, i as Y, C as z, _ as F } from "./forms-
|
|
4
|
-
const
|
|
5
|
-
S.insertCSSLinkToPage(
|
|
2
|
+
import { defineComponent as T, mergeModels as E, useModel as W, ref as w, onMounted as N, onUpdated as b, openBlock as c, createElementBlock as f, normalizeClass as P, Fragment as $, renderList as q, createBlock as x, mergeProps as d, createSlots as y, withCtx as h, createTextVNode as A, toDisplayString as g, createVNode as D, createCommentVNode as K } from "vue";
|
|
3
|
+
import { T as M, i as Y, C as z, _ as F } from "./forms-BDAati-M.es.js";
|
|
4
|
+
const I = ["../assets/menu.css"].map((i) => import.meta.resolve(i));
|
|
5
|
+
S.insertCSSLinkToPage(I, !0);
|
|
6
6
|
const O = {
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "top-menu_selectAll"
|
|
9
|
-
}, U = /* @__PURE__ */
|
|
9
|
+
}, U = /* @__PURE__ */ T({
|
|
10
10
|
__name: "menu",
|
|
11
|
-
props: /* @__PURE__ */
|
|
11
|
+
props: /* @__PURE__ */ E({
|
|
12
12
|
modelValue: {},
|
|
13
13
|
items: {},
|
|
14
14
|
isMultiple: { type: Boolean },
|
|
@@ -22,64 +22,63 @@ const O = {
|
|
|
22
22
|
modelModifiers: {}
|
|
23
23
|
}),
|
|
24
24
|
emits: ["update:modelValue"],
|
|
25
|
-
setup(
|
|
26
|
-
const
|
|
27
|
-
!
|
|
25
|
+
setup(i) {
|
|
26
|
+
const a = i, l = W(i, "modelValue"), o = w();
|
|
27
|
+
!a.isMultiple && !(typeof l.value == "string" || l.value instanceof String) && console.warn('Type check failed for prop "modelValue". Expected String: ' + typeof l.value), a.isMultiple && !Array.isArray(l.value) && console.warn('Type check failed for prop "modelValue". Expected Array: ' + typeof l.value), a.isMultiple && !a.canBeEmptyMultiple && Array.isArray(l.value) && !l.value.length && (l.value = [a.items[0].href ?? a.items[0].value]);
|
|
28
28
|
const _ = (e) => Array.isArray(l.value) ? l.value.includes(e.value) : e.value === l.value, k = (e, s = !1) => {
|
|
29
29
|
if (Array.isArray(l.value)) {
|
|
30
30
|
let t = l.value.slice();
|
|
31
31
|
if (s) {
|
|
32
|
-
t.length || (t =
|
|
32
|
+
t.length || (t = a.items.map((u) => u.value));
|
|
33
33
|
const r = t.indexOf(e.value);
|
|
34
34
|
r === -1 ? t.push(e.value) : t.splice(r, 1);
|
|
35
35
|
} else
|
|
36
36
|
t.length === 1 && t[0] === e.value ? t = [] : t = [e.value];
|
|
37
|
-
!
|
|
37
|
+
!a.canBeEmptyMultiple && !t.length && (t = [e.value]), l.value = t;
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
40
|
l.value = e.value;
|
|
41
41
|
}, C = (e) => {
|
|
42
|
-
if (
|
|
42
|
+
if (o.value.scrollWidth <= o.value.offsetWidth || e.shiftKey || Math.abs(e.deltaY) < 50) return;
|
|
43
43
|
e.preventDefault();
|
|
44
44
|
const s = e.deltaY > 0 ? 30 : -30;
|
|
45
|
-
|
|
45
|
+
o.value.scrollLeft = o.value.scrollLeft + s;
|
|
46
46
|
}, p = (e = !0) => {
|
|
47
47
|
var m, v;
|
|
48
|
-
const s =
|
|
48
|
+
const s = o.value.querySelector(".top-active");
|
|
49
49
|
if (!s) return;
|
|
50
|
-
const t = 24, r = s.offsetLeft -
|
|
50
|
+
const t = 24, r = s.offsetLeft - o.value.offsetLeft - t, u = s.offsetLeft - o.value.offsetLeft + s.clientWidth + t, B = o.value.scrollLeft, V = o.value.clientWidth + o.value.scrollLeft;
|
|
51
51
|
let n;
|
|
52
|
-
r < B && (n = r),
|
|
52
|
+
r < B && (n = r), u > V && (n = u - o.value.clientWidth), n !== void 0 && (Y() ? (v = (m = z).$) == null || v.call(m, o.value).animate({ scrollLeft: n }, e ? 200 : 0) : o.value.scrollTo({ left: n, behavior: e ? "smooth" : "auto" }));
|
|
53
53
|
}, L = () => {
|
|
54
54
|
if (Array.isArray(l.value)) {
|
|
55
|
-
if (l.value.length ===
|
|
56
|
-
l.value = [
|
|
55
|
+
if (l.value.length === a.items.length) {
|
|
56
|
+
l.value = [a.items[0].href ?? a.items[0].value];
|
|
57
57
|
return;
|
|
58
58
|
}
|
|
59
|
-
l.value =
|
|
59
|
+
l.value = a.items.map((e) => e.href ?? e.value);
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
62
|
return N(() => p(!1)), b(() => p(!0)), (e, s) => (c(), f("div", {
|
|
63
63
|
ref_key: "el",
|
|
64
|
-
ref:
|
|
65
|
-
class:
|
|
64
|
+
ref: o,
|
|
65
|
+
class: P({
|
|
66
66
|
"top-menu": !0,
|
|
67
|
-
["top-style_" + e.styling]: !0
|
|
68
|
-
|
|
67
|
+
["top-style_" + e.styling]: !0
|
|
68
|
+
// ['top-unwrap-x']: styling === 'default',
|
|
69
69
|
}),
|
|
70
70
|
onWheel: C
|
|
71
71
|
}, [
|
|
72
|
-
(c(!0), f(
|
|
72
|
+
(c(!0), f($, null, q(e.items, (t) => (c(), x(M, d({ ref_for: !0 }, t, {
|
|
73
73
|
class: "top-menu_item",
|
|
74
74
|
color: "theme",
|
|
75
|
-
styling: "",
|
|
76
75
|
onClick: (r) => k(t, r.ctrlKey),
|
|
77
76
|
isActive: _(t)
|
|
78
77
|
}), y({ _: 2 }, [
|
|
79
78
|
t.content ? {
|
|
80
79
|
name: "default",
|
|
81
|
-
fn:
|
|
82
|
-
|
|
80
|
+
fn: h(() => [
|
|
81
|
+
A(g(t.content), 1)
|
|
83
82
|
]),
|
|
84
83
|
key: "0"
|
|
85
84
|
} : void 0
|
|
@@ -94,8 +93,8 @@ const O = {
|
|
|
94
93
|
}), y({ _: 2 }, [
|
|
95
94
|
e.selectAllItem.content ? {
|
|
96
95
|
name: "default",
|
|
97
|
-
fn:
|
|
98
|
-
|
|
96
|
+
fn: h(() => [
|
|
97
|
+
A(g(e.selectAllItem.content), 1)
|
|
99
98
|
]),
|
|
100
99
|
key: "0"
|
|
101
100
|
} : void 0
|
|
@@ -109,12 +108,11 @@ const O = {
|
|
|
109
108
|
"top-menu_selectAll": "top-menu_selectAll",
|
|
110
109
|
"top-style_default": "top-style_default",
|
|
111
110
|
"top-active": "top-active",
|
|
112
|
-
"top-style_bar": "top-style_bar"
|
|
113
|
-
"top-unwrap-x": "top-unwrap-x"
|
|
111
|
+
"top-style_bar": "top-style_bar"
|
|
114
112
|
}, G = {
|
|
115
113
|
$style: j
|
|
116
114
|
}, R = /* @__PURE__ */ F(U, [["__cssModules", G]]);
|
|
117
115
|
export {
|
|
118
116
|
R as M
|
|
119
117
|
};
|
|
120
|
-
//# sourceMappingURL=menu-
|
|
118
|
+
//# sourceMappingURL=menu-DJZI8eh6.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-DJZI8eh6.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 module>\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(--content-background-color);\r\n\tborder-left: 1px solid var(--color-line-1);\r\n\tpadding-left: var(--top-padding-1);\r\n\tbox-shadow: var(--content-background-color) 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-hover);\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-secondary-1);\r\n\t--top-button-background-color-active: var(--color-layer-secondary-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":";;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAAA,IAAAC,GAIAC,IAAAC,EAAAF,GAAA,YAAA,GAIAG,IAAAC,EAAA;AAGA,IAAA,CAAAL,EAAA,cAAA,EAAA,OAAAE,EAAA,SAAA,YAAAA,EAAA,iBAAA,WACC,QAAA,KAAA,+DAAA,OAAAA,EAAA,KAAA,GAIDF,EAAA,cAAA,CAAA,MAAA,QAAAE,EAAA,KAAA,KACC,QAAA,KAAA,8DAAA,OAAAA,EAAA,KAAA,GAKDF,EAAA,cAAA,CAAAA,EAAA,sBAAA,MAAA,QAAAE,EAAA,KAAA,KAAA,CAAAA,EAAA,MAAA,WACCA,EAAA,QAAA,CAAAF,EAAA,MAAA,CAAA,EAAA,QAAAA,EAAA,MAAA,CAAA,EAAA,KAAA;AAGD,UAAAM,IAAA,CAAAC,MACC,MAAA,QAAAL,EAAA,KAAA,IAIAA,EAAA,MAAA,SAAAK,EAAA,KAAA,IAHCA,EAAA,UAAAL,EAAA,OAWFM,IAAA,CAAAD,GAAAE,IAAA,OAAA;AACC,UAAA,MAAA,QAAAP,EAAA,KAAA,GAAA;AACC,YAAAQ,IAAAR,EAAA,MAAA,MAAA;AAEA,YAAAO,GAAA;AACC,UAAAC,EAAA,WAAAA,IAAAV,EAAA,MAAA,IAAA,CAAAW,MAAAA,EAAA,KAAA;AAEA,gBAAAC,IAAAF,EAAA,QAAAH,EAAA,KAAA;AACA,UAAAK,MAAA,KACCF,EAAA,KAAAH,EAAA,KAAA,IAEAG,EAAA,OAAAE,GAAA,CAAA;AAAA,QACD;AAEA,UAAAF,EAAA,WAAA,KAAAA,EAAA,CAAA,MAAAH,EAAA,QACCG,IAAA,CAAA,IAEAA,IAAA,CAAAH,EAAA,KAAA;AAIF,QAAA,CAAAP,EAAA,sBAAA,CAAAU,EAAA,WAAAA,IAAA,CAAAH,EAAA,KAAA,IAEAL,EAAA,QAAAQ;AAEA;AAAA,MAAA;AAGD,MAAAR,EAAA,QAAAK,EAAA;AAAA,IAAmB,GAIpBM,IAAA,CAAAC,MAAA;AAGC,UAFAV,EAAA,MAAA,eAAAA,EAAA,MAAA,eACAU,EAAA,YACA,KAAA,IAAAA,EAAA,MAAA,IAAA,GAAA;AAEA,MAAAA,EAAA,eAAA;AAEA,YAAAC,IAAAD,EAAA,SAAA,IAAA,KAAA;AACA,MAAAV,EAAA,MAAA,aAAAA,EAAA,MAAA,aAAAW;AAAA,IAA4C,GAU7CC,IAAA,CAAAC,IAAA,OAAA;;AACC,YAAAC,IAAAd,EAAA,MAAA,cAAA,aAAA;AACA,UAAA,CAAAc,EAAA;AAEA,YAAAC,IAAA,IAGAC,IAAAF,EAAA,aAAAd,EAAA,MAAA,aAAAe,GACAE,IAAAH,EAAA,aAAAd,EAAA,MAAA,aAAAc,EAAA,cAAAC,GAGAG,IAAAlB,EAAA,MAAA,YACAmB,IAAAnB,EAAA,MAAA,cAAAA,EAAA,MAAA;AAEA,UAAAoB;AAGA,MAAAJ,IAAAE,MAAAE,IAAAJ,IAGAC,IAAAE,MAAAC,IAAAH,IAAAjB,EAAA,MAAA,cAEAoB,MAAA,WACCC,EAAA,KACCC,KAAAC,IAAAC,GAAA,MAAA,QAAAF,EAAA,KAAAC,GAAAvB,EAAA,OAAA,QAAA,EAAA,YAAAoB,EAAA,GAAAP,IAAA,MAAA,KAEAb,EAAA,MAAA,SAAA,EAAA,MAAAoB,GAAA,UAAAP,IAAA,WAAA,OAAA,CAAA;AAAA,IAEF,GAMDY,IAAA,MAAA;AACC,UAAA,MAAA,QAAA3B,EAAA,KAAA,GAEA;AAAA,YAAAA,EAAA,MAAA,WAAAF,EAAA,MAAA,QAAA;AACC,UAAAE,EAAA,QAAA,CAAAF,EAAA,MAAA,CAAA,EAAA,QAAAA,EAAA,MAAA,CAAA,EAAA,KAAA;AACA;AAAA,QAAA;AAGD,QAAAE,EAAA,QAAAF,EAAA,MAAA,IAAA,CAAAO,MAAAA,EAAA,QAAAA,EAAA,KAAA;AAAA;AAAA,IAA6D;AAG9D,WAAAuB,EAAA,MAAAd,EAAA,EAAA,CAAA,GACAe,EAAA,MAAAf,EAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { C as f } from "./forms-
|
|
1
|
+
import { C as f } from "./forms-BDAati-M.es.js";
|
|
2
2
|
import r from "../utils/dom.js";
|
|
3
3
|
import { TopPopupWorker as s } from "../popup/worker.js";
|
|
4
|
-
import { a as P } from "./i18n-
|
|
4
|
+
import { a as P } from "./i18n-DuTvft1T.es.js";
|
|
5
5
|
class v {
|
|
6
6
|
static componentName = "Top";
|
|
7
7
|
componentName;
|
|
@@ -177,11 +177,11 @@ const y = `:root {\r
|
|
|
177
177
|
--top-popup-transition-delay: 100ms;\r
|
|
178
178
|
\r
|
|
179
179
|
--top-popup-background-color: var(--color-bg-3);\r
|
|
180
|
-
--top-popup-background-color-hover: var(--color-cell-
|
|
180
|
+
--top-popup-background-color-hover: var(--color-cell-secondary-2);\r
|
|
181
181
|
--top-popup-background-color-active: var(--color-layer-primary-1);\r
|
|
182
182
|
\r
|
|
183
183
|
--top-popup-border-color: var(--color-line-2-opacity);\r
|
|
184
|
-
--top-popup-title-background-color: var(--color-layer-secondary-
|
|
184
|
+
--top-popup-title-background-color: var(--color-layer-secondary-1);\r
|
|
185
185
|
\r
|
|
186
186
|
/* суммарный отсуп от каря popup до элемента */\r
|
|
187
187
|
--top-popup-content-padding: calc(var(--top-popup-list-padding) + var(--top-popup-listItem-padding));\r
|
|
@@ -303,7 +303,7 @@ const y = `:root {\r
|
|
|
303
303
|
\r
|
|
304
304
|
.top-popup_header > .a { cursor: pointer;}\r
|
|
305
305
|
\r
|
|
306
|
-
.top-popup_header > .a:hover { color: var(--color-text-primary
|
|
306
|
+
.top-popup_header > .a:hover { color: var(--color-text-primary); }\r
|
|
307
307
|
\r
|
|
308
308
|
.top-popup_headerButton { width: 60px; }\r
|
|
309
309
|
\r
|
|
@@ -378,7 +378,7 @@ ul.top-popup_content li > .a:hover { background: var(--top-popup-background-colo
|
|
|
378
378
|
\r
|
|
379
379
|
ul.top-popup_content li > a:not(.top-button).top-active,\r
|
|
380
380
|
ul.top-popup_content li > .a.top-active {\r
|
|
381
|
-
--top-icon-color: var(--color-
|
|
381
|
+
--top-icon-color: var(--color-text-primary) !important;\r
|
|
382
382
|
\r
|
|
383
383
|
background: var(--top-popup-background-color-active);\r
|
|
384
384
|
}\r
|
|
@@ -413,7 +413,7 @@ ul.top-popup_content li > .a.top-popup_listMore {\r
|
|
|
413
413
|
flex-basis: 10px;\r
|
|
414
414
|
}\r
|
|
415
415
|
\r
|
|
416
|
-
ul.top-popup_content li > .a.top-popup_listMore:before { color: var(--color-
|
|
416
|
+
ul.top-popup_content li > .a.top-popup_listMore:before { color: var(--color-text-2); }\r
|
|
417
417
|
\r
|
|
418
418
|
ul.top-popup_content li > * > .top-popup_listMore {\r
|
|
419
419
|
margin-left: auto;\r
|
|
@@ -422,7 +422,7 @@ ul.top-popup_content li > * > .top-popup_listMore {\r
|
|
|
422
422
|
}\r
|
|
423
423
|
\r
|
|
424
424
|
ul.top-popup_content li > * > i.top-popup_listMore:hover,\r
|
|
425
|
-
ul.top-popup_content li > * > i.top-popup_listMore.top-active { color: var(--color-text-primary-
|
|
425
|
+
ul.top-popup_content li > * > i.top-popup_listMore.top-active { color: var(--color-text-primary-hover); }\r
|
|
426
426
|
\r
|
|
427
427
|
ul.top-popup_content li > * > i.top-popup_listMore:before {\r
|
|
428
428
|
transform: rotate(90deg);\r
|
|
@@ -437,7 +437,7 @@ ul.top-popup_content li a.close { background: none !important; }\r
|
|
|
437
437
|
}\r
|
|
438
438
|
\r
|
|
439
439
|
ul.top-popup_content li > [data-top-icon]:not(.top-button) {\r
|
|
440
|
-
--top-icon-color: var(--color-
|
|
440
|
+
--top-icon-color: var(--color-text-3);\r
|
|
441
441
|
--top-icon-size: 20px;\r
|
|
442
442
|
--top-icon-width: 20px;\r
|
|
443
443
|
}\r
|
|
@@ -447,7 +447,7 @@ ul.top-popup_content li > [data-top-icon]:not(.top-button):before {\r
|
|
|
447
447
|
}\r
|
|
448
448
|
\r
|
|
449
449
|
ul.top-popup_content li:hover > [data-top-icon]:not(.top-button) {\r
|
|
450
|
-
--top-icon-color: var(--color-
|
|
450
|
+
--top-icon-color: var(--color-text-2);\r
|
|
451
451
|
}\r
|
|
452
452
|
\r
|
|
453
453
|
/* footer */\r
|
|
@@ -459,6 +459,11 @@ ul.top-popup_content li:hover > [data-top-icon]:not(.top-button) {\r
|
|
|
459
459
|
justify-content: flex-end;\r
|
|
460
460
|
}\r
|
|
461
461
|
\r
|
|
462
|
+
/* footerSupportLink */\r
|
|
463
|
+
.top-popup_footerSupportLink {\r
|
|
464
|
+
margin-right: auto;\r
|
|
465
|
+
}\r
|
|
466
|
+
\r
|
|
462
467
|
/* Виджеты */\r
|
|
463
468
|
.top-popup > [data-widget] { padding: 0 var(--top-popup-list-padding); }\r
|
|
464
469
|
\r
|
|
@@ -479,7 +484,7 @@ html .top-popup .top-popup_content li > .top-button {\r
|
|
|
479
484
|
}\r
|
|
480
485
|
\r
|
|
481
486
|
.top-popup li .check_all,\r
|
|
482
|
-
.top-popup li .clear_all { cursor: pointer; color: var(--color-text-primary-
|
|
487
|
+
.top-popup li .clear_all { cursor: pointer; color: var(--color-text-primary-hover); padding: 8px; display: inline-block; }\r
|
|
483
488
|
\r
|
|
484
489
|
.top-popup li .check_all:hover,\r
|
|
485
490
|
.top-popup li .clear_all:hover { text-decoration: underline; }\r
|
|
@@ -616,7 +621,7 @@ ul.top-popup_content li > * > i.top-popup_listMore.top-active { visibility: visi
|
|
|
616
621
|
f.insertStyleToPage(y);
|
|
617
622
|
f.insertStyleToPage(_, "m");
|
|
618
623
|
f.insertStyleToPage(L, "pc");
|
|
619
|
-
class
|
|
624
|
+
class b extends v {
|
|
620
625
|
static componentName = "Popup";
|
|
621
626
|
// элемент, вызвавший открытие Popup
|
|
622
627
|
elActiveByDefault;
|
|
@@ -669,7 +674,7 @@ class x extends v {
|
|
|
669
674
|
events = {};
|
|
670
675
|
// el - элемент, открывающий меню
|
|
671
676
|
constructor(t, p) {
|
|
672
|
-
return super(), this.init(
|
|
677
|
+
return super(), this.init(b.componentName, t, p);
|
|
673
678
|
}
|
|
674
679
|
async mount() {
|
|
675
680
|
var e, i;
|
|
@@ -776,7 +781,7 @@ class x extends v {
|
|
|
776
781
|
}
|
|
777
782
|
// контроль за положением Popup, чтобы оно не вылезало за пределы документа
|
|
778
783
|
recalcPosition() {
|
|
779
|
-
var m,
|
|
784
|
+
var m, x;
|
|
780
785
|
if (!(this.elPopup instanceof HTMLElement)) return;
|
|
781
786
|
let t = this.options.p, p;
|
|
782
787
|
if (this.el instanceof HTMLElement)
|
|
@@ -798,7 +803,7 @@ class x extends v {
|
|
|
798
803
|
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");
|
|
799
804
|
let e = !1, i = !1, n = !1, u = !1, l = o.left > window.innerWidth / 2, d = o.top > window.innerHeight / 2;
|
|
800
805
|
t === 4 && (l = !l), t === 1 && (d = !d);
|
|
801
|
-
const h = (
|
|
806
|
+
const h = (x = this.elPopupInner) == null ? void 0 : x.getBoundingClientRect();
|
|
802
807
|
let a, c;
|
|
803
808
|
if (h) {
|
|
804
809
|
a = window.innerWidth - h.right, c = window.innerHeight - h.bottom;
|
|
@@ -840,7 +845,7 @@ class x extends v {
|
|
|
840
845
|
}
|
|
841
846
|
w.init();
|
|
842
847
|
export {
|
|
843
|
-
|
|
844
|
-
|
|
848
|
+
b as Popup,
|
|
849
|
+
b as default
|
|
845
850
|
};
|
|
846
|
-
//# sourceMappingURL=popup-
|
|
851
|
+
//# sourceMappingURL=popup-C18N-1yr.es.js.map
|