@adyen/bento-vue3 1.54.2 → 1.55.0
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/dist/@types/index.d.ts +20 -2
- package/dist/action-bar.js +1 -1
- package/dist/alert.js +1 -1
- package/dist/assets/accordion-item.css +1 -1
- package/dist/assets/action-bar.css +1 -1
- package/dist/assets/base-modal.css +1 -1
- package/dist/assets/button.css +1 -1
- package/dist/assets/card.css +1 -1
- package/dist/assets/copy.css +1 -1
- package/dist/assets/dashboard-section.css +1 -1
- package/dist/assets/data-grid-template.css +1 -1
- package/dist/assets/data-grid.css +1 -1
- package/dist/assets/date-range-picker.css +1 -1
- package/dist/assets/dialog-page.css +1 -1
- package/dist/assets/dropdown-default-textbox.css +1 -1
- package/dist/assets/dropdown.css +1 -1
- package/dist/assets/file-uploader.css +1 -1
- package/dist/assets/filter-bar.css +1 -1
- package/dist/assets/focus-trap.css +1 -1
- package/dist/assets/input-field-phone-number.css +1 -1
- package/dist/assets/inspector.css +1 -1
- package/dist/assets/link.css +1 -1
- package/dist/assets/menu.css +1 -1
- package/dist/assets/modal-fullscreen.css +1 -1
- package/dist/assets/popover.css +1 -1
- package/dist/assets/popper-container.css +1 -1
- package/dist/assets/sidepanel.css +1 -1
- package/dist/assets/tabs.css +1 -1
- package/dist/assets/teleport.css +1 -1
- package/dist/assets/use-cached-selected-values.css +1 -1
- package/dist/button.js +3 -3
- package/dist/card.js +1 -1
- package/dist/checkbox.js +2 -2
- package/dist/chunks/{action-bar.CUDi5Po7.js → action-bar.CDOaDenE.js} +5 -5
- package/dist/chunks/{action-bar.CUDi5Po7.js.map → action-bar.CDOaDenE.js.map} +1 -1
- package/dist/chunks/{alert.DEf0borp.js → alert.4SefwHLO.js} +2 -2
- package/dist/chunks/{alert.DEf0borp.js.map → alert.4SefwHLO.js.map} +1 -1
- package/dist/chunks/{base-modal.BegK8cPb.js → base-modal.DZy1WuJs.js} +5 -5
- package/dist/chunks/{base-modal.BegK8cPb.js.map → base-modal.DZy1WuJs.js.map} +1 -1
- package/dist/chunks/{button-actions-with-menu.CcoKss9T.js → button-actions-with-menu.DQRTu42W.js} +4 -4
- package/dist/chunks/{button-actions-with-menu.CcoKss9T.js.map → button-actions-with-menu.DQRTu42W.js.map} +1 -1
- package/dist/chunks/{button-actions.CdlXZ29B.js → button-actions.N99QthUv.js} +2 -2
- package/dist/chunks/{button-actions.CdlXZ29B.js.map → button-actions.N99QthUv.js.map} +1 -1
- package/dist/chunks/{button.6HMG0xEY.js → button.DEVuqLVT.js} +2 -2
- package/dist/chunks/button.DEVuqLVT.js.map +1 -0
- package/dist/chunks/{calendar.BRsV4rkQ.js → calendar.CNt90BvO.js} +2 -2
- package/dist/chunks/calendar.CNt90BvO.js.map +1 -0
- package/dist/chunks/{card.C5bSqYsB.js → card.E2xhS_6Z.js} +2 -2
- package/dist/chunks/{card.C5bSqYsB.js.map → card.E2xhS_6Z.js.map} +1 -1
- package/dist/chunks/{checkbox-group.D235-2lq.js → checkbox-group.BMzsgOeI.js} +4 -4
- package/dist/chunks/{checkbox-group.D235-2lq.js.map → checkbox-group.BMzsgOeI.js.map} +1 -1
- package/dist/chunks/{checkbox.Dts62P-X.js → checkbox.BIaD03Bg.js} +17 -17
- package/dist/chunks/{checkbox.Dts62P-X.js.map → checkbox.BIaD03Bg.js.map} +1 -1
- package/dist/chunks/{code-snippet.BPZLkv_Z.js → code-snippet.DJgiqDzZ.js} +6 -6
- package/dist/chunks/{code-snippet.BPZLkv_Z.js.map → code-snippet.DJgiqDzZ.js.map} +1 -1
- package/dist/chunks/{controls-group.DcbOWqxA.js → controls-group.DJqvAWte.js} +2 -2
- package/dist/chunks/{controls-group.DcbOWqxA.js.map → controls-group.DJqvAWte.js.map} +1 -1
- package/dist/chunks/{copy.CFhrpASp.js → copy.MId-I684.js} +11 -11
- package/dist/chunks/{copy.CFhrpASp.js.map → copy.MId-I684.js.map} +1 -1
- package/dist/chunks/dashboard-section.CrbSjoA8.js +165 -0
- package/dist/chunks/dashboard-section.CrbSjoA8.js.map +1 -0
- package/dist/chunks/{dashed-underline.BYAXhfnX.js → dashed-underline.DWhGZIhS.js} +3 -3
- package/dist/chunks/{dashed-underline.BYAXhfnX.js.map → dashed-underline.DWhGZIhS.js.map} +1 -1
- package/dist/chunks/data-grid-template.LlK-7o84.js +93 -0
- package/dist/chunks/data-grid-template.LlK-7o84.js.map +1 -0
- package/dist/chunks/data-grid.CsyayKK3.js +3490 -0
- package/dist/chunks/data-grid.CsyayKK3.js.map +1 -0
- package/dist/chunks/{date-picker.DU9L_7lU.js → date-picker.CjwoOQ3B.js} +5 -5
- package/dist/chunks/{date-picker.DU9L_7lU.js.map → date-picker.CjwoOQ3B.js.map} +1 -1
- package/dist/chunks/{date-range-picker.LJJE3q1u.js → date-range-picker.DGY91Rwc.js} +27 -24
- package/dist/chunks/date-range-picker.DGY91Rwc.js.map +1 -0
- package/dist/chunks/{dialog-page.CXQafL9G.js → dialog-page.BRlAYf5w.js} +2 -2
- package/dist/chunks/{dialog-page.CXQafL9G.js.map → dialog-page.BRlAYf5w.js.map} +1 -1
- package/dist/chunks/{dropdown-default-textbox.CwsgzDpx.js → dropdown-default-textbox.CTyt2klK.js} +30 -30
- package/dist/chunks/{dropdown-default-textbox.CwsgzDpx.js.map → dropdown-default-textbox.CTyt2klK.js.map} +1 -1
- package/dist/chunks/{dropdown-tag.Deu1Ekpp.js → dropdown-tag.CJtSH5cZ.js} +3 -3
- package/dist/chunks/{dropdown-tag.Deu1Ekpp.js.map → dropdown-tag.CJtSH5cZ.js.map} +1 -1
- package/dist/chunks/{dropdown.BAwhx8jI.js → dropdown.CQvyjn6d.js} +8 -8
- package/dist/chunks/{dropdown.BAwhx8jI.js.map → dropdown.CQvyjn6d.js.map} +1 -1
- package/dist/chunks/{empty-state.BffIZp3a.js → empty-state.m0U14LVw.js} +2 -2
- package/dist/chunks/{empty-state.BffIZp3a.js.map → empty-state.m0U14LVw.js.map} +1 -1
- package/dist/chunks/{error-message.DH8Er2JS.js → error-message.CMgsMDny.js} +2 -2
- package/dist/chunks/{error-message.DH8Er2JS.js.map → error-message.CMgsMDny.js.map} +1 -1
- package/dist/chunks/es6.BtaxuP0b.js.map +1 -1
- package/dist/chunks/{file-uploader.DkQDzuzC.js → file-uploader.D3KUe-MO.js} +5 -5
- package/dist/chunks/{file-uploader.DkQDzuzC.js.map → file-uploader.D3KUe-MO.js.map} +1 -1
- package/dist/chunks/{filter-bar.CqO88Dv2.js → filter-bar.cRJmUX-v.js} +30 -27
- package/dist/chunks/filter-bar.cRJmUX-v.js.map +1 -0
- package/dist/chunks/{fixed-scroller.Bfk75Nei.js → fixed-scroller.BNP4SR5J.js} +2 -2
- package/dist/chunks/{fixed-scroller.Bfk75Nei.js.map → fixed-scroller.BNP4SR5J.js.map} +1 -1
- package/dist/chunks/{focus-trap.BFCzfiI_.js → focus-trap.D9cfQpl7.js} +6 -6
- package/dist/chunks/{focus-trap.BFCzfiI_.js.map → focus-trap.D9cfQpl7.js.map} +1 -1
- package/dist/chunks/{footer-actions.A9H5F5D-.js → footer-actions.DmGDpPBW.js} +3 -3
- package/dist/chunks/{footer-actions.A9H5F5D-.js.map → footer-actions.DmGDpPBW.js.map} +1 -1
- package/dist/chunks/{form-layout-title.BWCOZyay.js → form-layout-title.P5ajTo4C.js} +2 -2
- package/dist/chunks/{form-layout-title.BWCOZyay.js.map → form-layout-title.P5ajTo4C.js.map} +1 -1
- package/dist/chunks/{header-with-views.f5wHqHsF.js → header-with-views.BJIQZVAq.js} +13 -13
- package/dist/chunks/{header-with-views.f5wHqHsF.js.map → header-with-views.BJIQZVAq.js.map} +1 -1
- package/dist/chunks/{header.CoyUQXFL.js → header.vHSsdURt.js} +4 -4
- package/dist/chunks/{header.CoyUQXFL.js.map → header.vHSsdURt.js.map} +1 -1
- package/dist/chunks/i18n.D9azDLPe.js.map +1 -1
- package/dist/chunks/{info-icon-with-popover.CBi7CmUZ.js → info-icon-with-popover.CXaaxjeT.js} +2 -2
- package/dist/chunks/{info-icon-with-popover.CBi7CmUZ.js.map → info-icon-with-popover.CXaaxjeT.js.map} +1 -1
- package/dist/chunks/{info-icon.Bomzzcc5.js → info-icon.7uhGVIn5.js} +2 -2
- package/dist/chunks/{info-icon.Bomzzcc5.js.map → info-icon.7uhGVIn5.js.map} +1 -1
- package/dist/chunks/{input-field-password.DXIJ0Z3R.js → input-field-password.CWr26esx.js} +6 -6
- package/dist/chunks/{input-field-password.DXIJ0Z3R.js.map → input-field-password.CWr26esx.js.map} +1 -1
- package/dist/chunks/{input-field-phone-number.KS95qk92.js → input-field-phone-number.zf8WxBCn.js} +8 -12
- package/dist/chunks/{input-field-phone-number.KS95qk92.js.map → input-field-phone-number.zf8WxBCn.js.map} +1 -1
- package/dist/chunks/{input-field.DcudjNKs.js → input-field.CR262X1w.js} +3 -3
- package/dist/chunks/{input-field.DcudjNKs.js.map → input-field.CR262X1w.js.map} +1 -1
- package/dist/chunks/{inspector.types.Fs9URmPq.js → inspector.types.YK45k4D_.js} +3 -3
- package/dist/chunks/{inspector.types.Fs9URmPq.js.map → inspector.types.YK45k4D_.js.map} +1 -1
- package/dist/chunks/keyboard-navigation.CqgGzfZQ.js.map +1 -1
- package/dist/chunks/{listbox-option-tag.CqnkZr9x.js → listbox-option-tag.BJh2kEN1.js} +2 -2
- package/dist/chunks/{listbox-option-tag.CqnkZr9x.js.map → listbox-option-tag.BJh2kEN1.js.map} +1 -1
- package/dist/chunks/{menu.P_KG1J8b.js → menu.CVMSGvtb.js} +5 -6
- package/dist/chunks/menu.CVMSGvtb.js.map +1 -0
- package/dist/chunks/{modal-fullscreen.DxuMKagz.js → modal-fullscreen.Cqlf6PWo.js} +5 -5
- package/dist/chunks/{modal-fullscreen.DxuMKagz.js.map → modal-fullscreen.Cqlf6PWo.js.map} +1 -1
- package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.DfzxXSwn.js → modal.vue_vue_type_script_setup_true_lang.dXxru4S9.js} +5 -5
- package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.DfzxXSwn.js.map → modal.vue_vue_type_script_setup_true_lang.dXxru4S9.js.map} +1 -1
- package/dist/chunks/{pagination.DzwiWHUO.js → pagination.C65tc-nX.js} +3 -3
- package/dist/chunks/{pagination.DzwiWHUO.js.map → pagination.C65tc-nX.js.map} +1 -1
- package/dist/chunks/{popover.Csq1gQ6T.js → popover.DjbACET6.js} +4 -4
- package/dist/chunks/{popover.Csq1gQ6T.js.map → popover.DjbACET6.js.map} +1 -1
- package/dist/chunks/{popper-container.DnlxQ9eS.js → popper-container.CDsbQiOS.js} +3 -3
- package/dist/chunks/{popper-container.DnlxQ9eS.js.map → popper-container.CDsbQiOS.js.map} +1 -1
- package/dist/chunks/{promo-banner.CN-TTSov.js → promo-banner.ZCfJQh-S.js} +2 -2
- package/dist/chunks/{promo-banner.CN-TTSov.js.map → promo-banner.ZCfJQh-S.js.map} +1 -1
- package/dist/chunks/{radio-group.Vm-hmL1q.js → radio-group.Tgf3BF5X.js} +4 -4
- package/dist/chunks/{radio-group.Vm-hmL1q.js.map → radio-group.Tgf3BF5X.js.map} +1 -1
- package/dist/chunks/{search-bar.SNqRBGY7.js → search-bar.CTn5DIQZ.js} +3 -3
- package/dist/chunks/{search-bar.SNqRBGY7.js.map → search-bar.CTn5DIQZ.js.map} +1 -1
- package/dist/chunks/{secondary-nav.DKXHuspN.js → secondary-nav.CnE-aV2P.js} +2 -2
- package/dist/chunks/{secondary-nav.DKXHuspN.js.map → secondary-nav.CnE-aV2P.js.map} +1 -1
- package/dist/chunks/{segmented-control.DBy-nbYM.js → segmented-control.Dg_ktsiS.js} +2 -2
- package/dist/chunks/{segmented-control.DBy-nbYM.js.map → segmented-control.Dg_ktsiS.js.map} +1 -1
- package/dist/chunks/{selection-card-group.D9dyC6Z_.js → selection-card-group.C2OFZgKd.js} +11 -11
- package/dist/chunks/{selection-card-group.D9dyC6Z_.js.map → selection-card-group.C2OFZgKd.js.map} +1 -1
- package/dist/chunks/{sidepanel.Ds2CCG9L.js → sidepanel.Drn-lKR3.js} +5 -5
- package/dist/chunks/{sidepanel.Ds2CCG9L.js.map → sidepanel.Drn-lKR3.js.map} +1 -1
- package/dist/chunks/{structured-list-item.CygGTBVl.js → structured-list-item.CWiwoP5F.js} +5 -5
- package/dist/chunks/{structured-list-item.CygGTBVl.js.map → structured-list-item.CWiwoP5F.js.map} +1 -1
- package/dist/chunks/{summary-grid.types.DzvuP-NU.js → summary-grid.types.DOYW579A.js} +5 -5
- package/dist/chunks/{summary-grid.types.DzvuP-NU.js.map → summary-grid.types.DOYW579A.js.map} +1 -1
- package/dist/chunks/tabs.DZk78MLK.js +266 -0
- package/dist/chunks/tabs.DZk78MLK.js.map +1 -0
- package/dist/chunks/{tag.C4SGN5Eb.js → tag.CmYkknFj.js} +2 -2
- package/dist/chunks/{tag.C4SGN5Eb.js.map → tag.CmYkknFj.js.map} +1 -1
- package/dist/chunks/{teleport.DfTpEQBR.js → teleport.zSiKZmRE.js} +5 -5
- package/dist/chunks/teleport.zSiKZmRE.js.map +1 -0
- package/dist/chunks/{textarea.bQwvvIkq.js → textarea.CR7su54i.js} +3 -3
- package/dist/chunks/{textarea.bQwvvIkq.js.map → textarea.CR7su54i.js.map} +1 -1
- package/dist/chunks/{timeline-item.Bxt_pNII.js → timeline-item.BhQp0ICP.js} +6 -6
- package/dist/chunks/{timeline-item.Bxt_pNII.js.map → timeline-item.BhQp0ICP.js.map} +1 -1
- package/dist/chunks/{toast.7D23cICy.js → toast.DxVfamh-.js} +2 -2
- package/dist/chunks/{toast.7D23cICy.js.map → toast.DxVfamh-.js.map} +1 -1
- package/dist/chunks/{toggle-button.7iAfO6Xx.js → toggle-button.D-9TFTy8.js} +2 -2
- package/dist/chunks/{toggle-button.7iAfO6Xx.js.map → toggle-button.D-9TFTy8.js.map} +1 -1
- package/dist/chunks/{tooltip.CyQxprBQ.js → tooltip.BkBDReK0.js} +2 -2
- package/dist/chunks/{tooltip.CyQxprBQ.js.map → tooltip.BkBDReK0.js.map} +1 -1
- package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.BtVT3Ltg.js → tutorial.vue_vue_type_script_setup_true_lang.ENhKvQLv.js} +5 -5
- package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.BtVT3Ltg.js.map → tutorial.vue_vue_type_script_setup_true_lang.ENhKvQLv.js.map} +1 -1
- package/dist/chunks/use-cached-selected-values.CQKeFUJd.js +1475 -0
- package/dist/chunks/use-cached-selected-values.CQKeFUJd.js.map +1 -0
- package/dist/code-snippet.js +1 -1
- package/dist/dashboard-template.js +1 -1
- package/dist/dashed-underline.js +1 -1
- package/dist/data-grid-template.js +1 -1
- package/dist/data-grid.js +1 -1
- package/dist/date-picker.js +2 -2
- package/dist/date-range-picker.js +2 -2
- package/dist/dropdown.js +4 -4
- package/dist/empty-state.js +1 -1
- package/dist/file-uploader.js +1 -1
- package/dist/filter-bar.js +1 -1
- package/dist/focus-trap.js +1 -1
- package/dist/form-layout.js +1 -1
- package/dist/header-with-views.js +1 -1
- package/dist/header.js +1 -1
- package/dist/index.js +54 -54
- package/dist/info-icon.js +1 -1
- package/dist/input-field-password.js +1 -1
- package/dist/input-field-phone-number.js +1 -1
- package/dist/input-field.js +1 -1
- package/dist/inspector.js +1 -1
- package/dist/internal.js +13 -13
- package/dist/menu.js +1 -1
- package/dist/modal-fullscreen.js +1 -1
- package/dist/modal.js +2 -2
- package/dist/pagination.js +1 -1
- package/dist/popover.js +1 -1
- package/dist/popper-container.js +1 -1
- package/dist/promo-banner.js +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/search-bar.js +2 -2
- package/dist/secondary-nav.js +1 -1
- package/dist/segmented-control.js +1 -1
- package/dist/selection-card.js +1 -1
- package/dist/sidepanel.js +1 -1
- package/dist/structured-list.js +1 -1
- package/dist/styles/bento-dark.css +8 -4
- package/dist/styles/bento-light.css +8 -4
- package/dist/styles/bento.css +8 -4
- package/dist/styles/legacy.css +8 -5
- package/dist/styles/styleguide.css +8 -4
- package/dist/summary-grid.js +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tag.js +1 -1
- package/dist/textarea.js +1 -1
- package/dist/timeline.js +1 -1
- package/dist/toast.js +1 -1
- package/dist/tutorial.js +1 -1
- package/dist/web-types.json +1 -1
- package/package.json +4 -4
- package/dist/chunks/button.6HMG0xEY.js.map +0 -1
- package/dist/chunks/calendar.BRsV4rkQ.js.map +0 -1
- package/dist/chunks/dashboard-section.DpL72ax7.js +0 -167
- package/dist/chunks/dashboard-section.DpL72ax7.js.map +0 -1
- package/dist/chunks/data-grid-template.CJxPIu3E.js +0 -93
- package/dist/chunks/data-grid-template.CJxPIu3E.js.map +0 -1
- package/dist/chunks/data-grid.jRydtYyG.js +0 -3380
- package/dist/chunks/data-grid.jRydtYyG.js.map +0 -1
- package/dist/chunks/date-range-picker.LJJE3q1u.js.map +0 -1
- package/dist/chunks/filter-bar.CqO88Dv2.js.map +0 -1
- package/dist/chunks/menu.P_KG1J8b.js.map +0 -1
- package/dist/chunks/tabs.B8BRqQpv.js +0 -272
- package/dist/chunks/tabs.B8BRqQpv.js.map +0 -1
- package/dist/chunks/teleport.DfTpEQBR.js.map +0 -1
- package/dist/chunks/use-cached-selected-values.DGfnlqdi.js +0 -1455
- package/dist/chunks/use-cached-selected-values.DGfnlqdi.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-section.DpL72ax7.js","sources":["../../../vue2/src/templates/dashboard-template/dashboard-template.vue","../../../vue2/src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue"],"sourcesContent":["<template>\n <main class=\"b-dashboard-template\">\n <bento-header v-bind=\"header\" variant=\"page\" class=\"b-dashboard-template__header\">\n <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n <slot name=\"infoIconTooltipContent\" />\n </template>\n </bento-header>\n <div class=\"b-dashboard-template__top-section\" :class=\"dashboardTopSectionConditionalClasses\">\n <div\n v-if=\"hasSlot('filters')\"\n ref=\"filtersRef\"\n class=\"b-dashboard-template__filters\"\n :class=\"dashboardFiltersConditionalClasses\"\n data-testid=\"filters\"\n >\n <slot name=\"filters\" />\n </div>\n\n <bento-tabs\n v-if=\"tabsSlots.length > 1\"\n ref=\"tabsRef\"\n :active-tab-index=\"tabs.activeTabIndex\"\n class=\"b-dashboard-template__tabs\"\n :class=\"dashboardTabsConditionalClasses\"\n data-testid=\"tabs\"\n >\n <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n <div class=\"b-dashboard-template__container b-dashboard-template__container--tabs\">\n <slot :name=\"`tab-${index + 1}`\" />\n </div>\n </bento-tab>\n </bento-tabs>\n <div v-else class=\"b-dashboard-template__container\">\n <slot />\n </div>\n </div>\n </main>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onUnmounted, ref, useSlots, watch } from 'vue';\n import { BentoHeader } from '@/components/header';\n import { BentoTab, BentoTabs } from '@/components/tabs';\n import { useWindowScroll } from '@vueuse/core';\n import { observeSizeOfElement } from '@/utils/ts/resize';\n import { useHasSlot } from '@/composables';\n import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';\n\n const props = withDefaults(\n defineProps<{\n /**\n * The header that goes to the top of the template\n */\n header: BentoDashboardTemplateHeader;\n\n /**\n * All the tab properties that can be set on the inner tab components.\n * - tabs.activeTabIndex: the currently active tab index.\n * - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n */\n tabs?: BentoDashboardTemplateTabs;\n\n /**\n * Renders the tabs with a sticky positioning\n */\n stickyTabs?: boolean;\n\n /**\n * Renders the tabs with a sticky positioning\n */\n stickyFilters?: boolean;\n }>(),\n {\n tabs: undefined,\n stickyTabs: false,\n stickyFilters: false,\n }\n );\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const tabsRef = ref<InstanceType<typeof BentoTabs>>();\n const filtersRef = ref<HTMLDivElement>(null);\n const isFiltersPinned = ref(false);\n let filtersElementObserver: ResizeObserver | null = null;\n const isTabsPinned = ref(false);\n const tabsPosition = ref(0);\n\n const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters);\n const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs);\n\n const dashboardFiltersConditionalClasses = computed(() => ({\n 'b-dashboard-template__filters--sticky': props.stickyFilters,\n 'b-dashboard-template__filters--show-border':\n hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value,\n }));\n\n const dashboardTabsConditionalClasses = computed(() => ({\n 'b-dashboard-template__tabs--sticky': props.stickyTabs,\n 'b-dashboard-template__tabs--show-border': props.stickyTabs && isTabsPinned.value,\n }));\n\n const dashboardTopSectionConditionalClasses = computed(() => ({\n 'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters,\n }));\n\n const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n const { y } = useWindowScroll();\n\n watch(\n () => filtersRef.value,\n () => {\n if (!filtersElementObserver && filtersRef.value) {\n filtersElementObserver = observeSizeOfElement(filtersRef.value, () => {\n if (filtersRef.value && hasStickyTabs.value) {\n const filtersHeight = filtersRef.value.offsetHeight;\n tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0;\n (tabsRef.value.tablistwrapper.$el as HTMLDivElement).style.top = `${tabsPosition.value}px`;\n }\n });\n }\n }\n );\n\n watch(\n () => y.value,\n () => {\n if (hasStickyFilters.value) {\n isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0;\n }\n if (hasStickyTabs.value) {\n isTabsPinned.value =\n (tabsRef.value.tablistwrapper.$el as HTMLDivElement)?.getBoundingClientRect().top ===\n tabsPosition.value;\n }\n }\n );\n\n onUnmounted(() => {\n filtersElementObserver?.disconnect();\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.\n *\n * @example\n * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoDashboardTemplate, BentoDashboardSection },\n * template: `\n * <bento-dashboard-template :header=\"{ title: 'Dashboard'}\" :tabs=\"tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]\" sticky-tabs sticky-filters>\n * <template #tab-1>\n * <bento-dashboard-section :header=\"{ title: 'Section'}\">\n * <template #controls>\n * // Add your controls here\n * </template>\n * // Add your content here\n * </bento-dashboard-section>\n * </template>\n * <template #tab-2>\n * <bento-dashboard-section :header=\"{ title: 'Section'}\">\n * // Add your content here\n * </bento-dashboard-section>\n * </template>\n * </bento-dashboard-template>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-template.scss\" />\n","<template>\n <div class=\"b-dashboard-section\" :class=\"conditionalClasses\">\n <bento-header v-bind=\"header\" variant=\"component\" class=\"b-dashboard-template__header\">\n <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n <slot name=\"infoIconTooltipContent\" />\n </template>\n </bento-header>\n <div v-if=\"hasSlot('controls')\" class=\"b-dashboard-section__controls\">\n <slot name=\"controls\"></slot>\n </div>\n <div v-if=\"!hasSlot('content-col-1') && !hasSlot('content-col-2')\" class=\"b-dashboard-section__content\">\n <slot name=\"default\"></slot>\n </div>\n <div v-else class=\"b-dashboard-section__columns\">\n <div class=\"b-dashboard-section__content\"><slot name=\"content-col-1\"></slot></div>\n <div class=\"b-dashboard-section__content\"><slot name=\"content-col-2\"></slot></div>\n </div>\n <bento-divider class=\"b-dashboard-section__divider\" />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onMounted, useSlots } from 'vue';\n import { BentoHeader } from '@/components/header';\n import { BentoDivider } from '@/components/divider';\n import { useHasSlot } from '@/composables';\n import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';\n\n const props = withDefaults(\n defineProps<{\n /**\n * The header of the section\n */\n header: BentoDashboardTemplateHeader;\n\n /**\n * Renders the section to take only half of the page\n */\n halfWidth?: boolean;\n }>(),\n {\n halfWidth: false,\n }\n );\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const conditionalClasses = computed(() => ({\n 'b-dashboard-section--half-width': props.halfWidth,\n }));\n\n onMounted(() => {\n if ((hasSlot('content-col-1') || hasSlot('content-col-2')) && props.halfWidth) {\n throw new Error('`content-col-1` and `content-col-2` cannot be used with half-width prop');\n }\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.\n *\n * @example\n * import { BentoDashboardSection } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoDashboardSection },\n * template: `\n * <bento-dashboard-section :header=\"{ title: 'Section' }\" half-width>\n * <template #controls>\n * // Add your controls here\n * </template>\n * // You can render content with two cols\n * <template #content-col-1>\n * // Add your content here\n * </template>\n * <template #content-col-2>\n * // Add your content here\n * </template>\n * // Or you can render full width content by using default slot\n * // Add your content here\n * </bento-dashboard-section>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-section.scss\" />\n"],"names":["__default__$1","props","__props","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","isTabsPinned","tabsPosition","hasStickyFilters","computed","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTabsConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;;;;GA+KIA,KAAA,CAAA;;;;;;;;;;AA/HA,UAAAC,IAAAC,GA+BAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,EAAA,GACAK,IAAAL,EAAA,CAAA,GAEAM,IAAAC,EAAA,MAAAN,EAAA,SAAAR,EAAA,aAAA,GACAe,IAAAD,EAAA,MAAAR,EAAA,SAAAN,EAAA,UAAA,GAEAgB,IAAAF,EAAA,OAAA;AAAA,MAA2D,yCAAAd,EAAA;AAAA,MACR,8CAAAa,EAAA,SAAA,CAAAE,EAAA,SAAAN,EAAA;AAAA,IAEuB,EAAA,GAG1EQ,IAAAH,EAAA,OAAA;AAAA,MAAwD,sCAAAd,EAAA;AAAA,MACR,2CAAAA,EAAA,cAAAW,EAAA;AAAA,IACgC,EAAA,GAGhFO,IAAAJ,EAAA,OAAA;AAAA,MAA8D,6CAAAd,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EmB,IAAAL,EAAA,MAAA,OAAA,KAAAZ,CAAA,EAAA,OAAA,CAAAkB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAxB,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAwB,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEA,EAAA,GAAAG,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAkB,EAAApB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAc,IAAArB,EAAA,MAAA;AACA,YAAAI,EAAA,QAAAC,EAAA,QAAAgB,IAAA,GACAvB,EAAA,MAAA,eAAA,IAAA,MAAA,MAAA,GAAAM,EAAA,KAAA;AAAA,UAAsF;AAAA,QAC1F,CAAA;AAAA,MAER;AAAA,IACJ,GAGJe;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAZ,EAAA,UACIJ,EAAA,UAAAe,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,wBAAA,SAAA,IAEJT,EAAA,UACIJ,EAAA,UAAAY,IAAAjB,EAAA,MAAA,eAAA,QAAA,gBAAAiB,EAAA,wBAAA,SAAAX,EAAA;AAAA,MAGJ;AAAA,IACJ,GAGJkB,EAAA,MAAA;AACI,MAAApB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGCzDvCqB,KAAA,CAAA;;;;;;;;AA1DA,UAAA/B,IAAAC,GAiBAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA8B,IAAAlB,EAAA,OAAA;AAAA,MAA2C,mCAAAd,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAiC,EAAA,MAAA;AACI,WAAA7B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAJ,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import { defineComponent as I, useSlots as R, ref as h, computed as f, provide as B, createElementBlock as l, openBlock as o, createVNode as C, createCommentVNode as D, createBlock as T, renderSlot as n, unref as s, mergeProps as $, createSlots as E, withCtx as c, Fragment as G, renderList as S, toRef as N } from "vue";
|
|
2
|
-
import { B as O } from "./header.CoyUQXFL.js";
|
|
3
|
-
import { a as j, B as A } from "./tabs.B8BRqQpv.js";
|
|
4
|
-
import { u as x } from "./use-has-slot.B7eQSabc.js";
|
|
5
|
-
import { D as H } from "./data-grid-template.keys.2_AkxuNT.js";
|
|
6
|
-
import { _ as L } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
7
|
-
import "../assets/data-grid-template.css";
|
|
8
|
-
const P = { class: "b-data-grid-template b-data-grid-template--sticky-tabs" }, V = {
|
|
9
|
-
key: 0,
|
|
10
|
-
class: "b-data-grid-template__additional-content"
|
|
11
|
-
}, q = {}, w = /* @__PURE__ */ I({
|
|
12
|
-
...q,
|
|
13
|
-
__name: "data-grid-template",
|
|
14
|
-
props: {
|
|
15
|
-
/**
|
|
16
|
-
* The header that goes to the top of the template
|
|
17
|
-
*/
|
|
18
|
-
header: {
|
|
19
|
-
type: Object,
|
|
20
|
-
required: !0
|
|
21
|
-
},
|
|
22
|
-
/**
|
|
23
|
-
* All the tab properties that can be set on the inner tab components.
|
|
24
|
-
* - tabs.activeTabIndex: the currently active tab index.
|
|
25
|
-
* - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
|
|
26
|
-
*/
|
|
27
|
-
tabs: {
|
|
28
|
-
type: Object,
|
|
29
|
-
default: void 0
|
|
30
|
-
},
|
|
31
|
-
/**
|
|
32
|
-
* Renders the tabs with a sticky positioning
|
|
33
|
-
*/
|
|
34
|
-
stickyTabs: {
|
|
35
|
-
type: Boolean,
|
|
36
|
-
default: !1
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
emits: ["update:tabs"],
|
|
40
|
-
setup(r, { emit: _ }) {
|
|
41
|
-
const a = r, b = R(), m = x(b), v = _, p = h(null), k = f(() => {
|
|
42
|
-
var t, e;
|
|
43
|
-
return (e = (t = p.value) == null ? void 0 : t.$refs) == null ? void 0 : e.tablist;
|
|
44
|
-
}), u = f(() => Object.keys(b).filter((t) => t == null ? void 0 : t.includes("tab-"))), y = (t) => {
|
|
45
|
-
v("update:tabs", { ...a.tabs, activeTabIndex: t });
|
|
46
|
-
}, g = (t) => {
|
|
47
|
-
var e, i;
|
|
48
|
-
return ((i = (e = a == null ? void 0 : a.tabs.tabs) == null ? void 0 : e[t]) == null ? void 0 : i.title) ?? `Tab ${t + 1}`;
|
|
49
|
-
};
|
|
50
|
-
return B(H, () => ({ isDataGridTemplate: !0, stickyTabs: N(a, "stickyTabs"), tabsRef: k })), (t, e) => (o(), l("main", P, [
|
|
51
|
-
C(s(O), $(r.header, {
|
|
52
|
-
variant: "component",
|
|
53
|
-
class: "b-data-grid-template__header"
|
|
54
|
-
}), E({ _: 2 }, [
|
|
55
|
-
s(m)("infoIconTooltipContent") ? {
|
|
56
|
-
name: "infoIconTooltipContent",
|
|
57
|
-
fn: c(() => [
|
|
58
|
-
n(t.$slots, "infoIconTooltipContent", {}, void 0, !0)
|
|
59
|
-
]),
|
|
60
|
-
key: "0"
|
|
61
|
-
} : void 0
|
|
62
|
-
]), 1040),
|
|
63
|
-
s(m)("additionalContent") ? (o(), l("div", V, [
|
|
64
|
-
n(t.$slots, "additionalContent", {}, void 0, !0)
|
|
65
|
-
])) : D("", !0),
|
|
66
|
-
u.value.length > 1 ? (o(), T(s(j), {
|
|
67
|
-
key: 1,
|
|
68
|
-
ref_key: "tabsRef",
|
|
69
|
-
ref: p,
|
|
70
|
-
"active-tab-index": r.tabs.activeTabIndex,
|
|
71
|
-
class: "b-data-grid-template__tabs",
|
|
72
|
-
"onUpdate:activeTabIndex": y
|
|
73
|
-
}, {
|
|
74
|
-
default: c(() => [
|
|
75
|
-
(o(!0), l(G, null, S(u.value, (i, d) => (o(), T(s(A), {
|
|
76
|
-
key: `tab-${d}`,
|
|
77
|
-
title: g(d)
|
|
78
|
-
}, {
|
|
79
|
-
default: c(() => [
|
|
80
|
-
n(t.$slots, `tab-${d + 1}`, {}, void 0, !0)
|
|
81
|
-
]),
|
|
82
|
-
_: 2
|
|
83
|
-
}, 1032, ["title"]))), 128))
|
|
84
|
-
]),
|
|
85
|
-
_: 3
|
|
86
|
-
}, 8, ["active-tab-index"])) : n(t.$slots, "default", { key: 2 }, void 0, !0)
|
|
87
|
-
]));
|
|
88
|
-
}
|
|
89
|
-
}), Q = /* @__PURE__ */ L(w, [["__scopeId", "data-v-9a4bb945"]]);
|
|
90
|
-
export {
|
|
91
|
-
Q as d
|
|
92
|
-
};
|
|
93
|
-
//# sourceMappingURL=data-grid-template.CJxPIu3E.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid-template.CJxPIu3E.js","sources":["../../../vue2/src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n <main class=\"b-data-grid-template b-data-grid-template--sticky-tabs\">\n <bento-header v-bind=\"header\" variant=\"component\" class=\"b-data-grid-template__header\">\n <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n <slot name=\"infoIconTooltipContent\" />\n </template>\n </bento-header>\n <div v-if=\"hasSlot('additionalContent')\" class=\"b-data-grid-template__additional-content\">\n <slot name=\"additionalContent\" />\n </div>\n <bento-tabs\n v-if=\"tabsSlots.length > 1\"\n ref=\"tabsRef\"\n :active-tab-index=\"tabs.activeTabIndex\"\n class=\"b-data-grid-template__tabs\"\n @update:active-tab-index=\"emitTabs\"\n >\n <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n <slot :name=\"`tab-${index + 1}`\" />\n </bento-tab>\n </bento-tabs>\n <slot v-else />\n </main>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, PropType, provide, Ref, ref, toRef, UnwrapRef, useSlots } from 'vue';\n import { BentoHeader } from '@/components/header';\n import { BentoTab, BentoTabs } from '@/components/tabs';\n import { useHasSlot } from '@/composables';\n import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n import type {\n BentoDataGridTemplateDataGrid,\n BentoDataGridTemplateHeader,\n BentoDataGridTemplateTabs,\n } from './data-grid-template.types';\n\n const props = defineProps({\n /**\n * The header that goes to the top of the template\n */\n header: {\n type: Object as PropType<BentoDataGridTemplateHeader>,\n required: true,\n },\n\n /**\n * All the tab properties that can be set on the inner tab components.\n * - tabs.activeTabIndex: the currently active tab index.\n * - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n */\n tabs: {\n type: Object as PropType<BentoDataGridTemplateTabs>,\n default: undefined,\n },\n\n /**\n * Renders the tabs with a sticky positioning\n */\n stickyTabs: {\n type: Boolean,\n default: false,\n },\n });\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const emit = defineEmits<{\n /**\n * Emits update event when activeTabIndex changes internally\n */\n (e: 'update:tabs', value: BentoDataGridTemplateTabs): void;\n }>();\n\n const tabsRef = ref(null);\n\n const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablist);\n\n const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n const emitTabs = (newActiveTabIndex: number) => {\n emit('update:tabs', { ...props.tabs, activeTabIndex: newActiveTabIndex });\n };\n\n const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n const registerDatagridInDataGridTemplate: BentoDataGridTemplateDataGrid = () => {\n const isDataGridTemplate = true;\n const stickyTabs: Ref<boolean> = toRef(props, 'stickyTabs');\n const tabsRef: Ref<UnwrapRef<HTMLDivElement>> | null = computedTabsRef;\n\n // return values to the Tab component\n return { isDataGridTemplate, stickyTabs, tabsRef };\n };\n\n provide(DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY, registerDatagridInDataGridTemplate);\n</script>\n\n<script lang=\"ts\">\n /**\n * The data grid template is a restrictive, full-page data grid used to display information from a data set.\n * You can use this data grid template when your user needs a clear overview of data or a way of organizing and analyzing the data in their own way.\n * This data grid template shouldn’t be confused with the data grid.\n *\n * @example\n * import { BentoDataGridTemplate } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoDataGridTemplate },\n * template: `\n * // If you want to display multiple data grids in the same page (they will be rendered in different tabs)\n * <bento-data-grid-template>\n * <template #tab-1><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 1\"/></template>\n * <template #tab-2><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 2\"/></template>\n * </bento-data-grid-template>\n * // Alternatively, if you only want to pass one data grid to your template:\n * <bento-data-grid-template>\n * <template #default><bento-data-grid v-bind=\"your-data-grid-args\"/></template>\n * </bento-data-grid-template>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./data-grid-template.scss\" />\n"],"names":["__default__","props","__props","slots","useSlots","hasSlot","useHasSlot","emit","__emit","tabsRef","ref","computedTabsRef","computed","_b","_a","tabsSlots","el","emitTabs","newActiveTabIndex","getTabTitle","index","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY","toRef"],"mappings":";;;;;;;;;;GA0HIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AArFA,UAAAC,IAAAC,GA2BAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MAAA;;AAAA,cAAAC,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAA,UAAA,gBAAAD,EAAA;AAAA,KAAA,GAEAE,IAAAH,EAAA,MAAA,OAAA,KAAAT,CAAA,EAAA,OAAA,CAAAa,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,MAAAX,EAAA,eAAA,EAAA,GAAAN,EAAA,MAAA,gBAAAiB,EAAA,CAAA;AAAA,IAAwE,GAG5EC,IAAA,CAAAC,MAAA;;AAAA,eAAAP,KAAAC,IAAAb,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAa,EAAAM,OAAA,gBAAAP,EAAA,UAAA,OAAAO,IAAA,CAAA;AAAA;AAWA,WAAAC,EAAAC,GATA,OAMI,EAAA,wBAAA,YAJAC,EAAAtB,GAAA,YAAA,GAIA,SAHAU,EAGA,EAGJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|