@adyen/bento-vue3 2.0.1-rc.0 → 2.0.1
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/accordion.js +1 -1
- package/dist/action-bar.js +1 -1
- package/dist/ai-tag.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-actions.css +1 -1
- package/dist/assets/card.css +1 -1
- package/dist/assets/data-grid.css +1 -1
- package/dist/assets/dialog-page.css +1 -1
- package/dist/assets/file-uploader.css +1 -1
- package/dist/assets/filter-bar.css +1 -1
- package/dist/assets/inspector.css +1 -1
- package/dist/assets/modal-fullscreen.css +1 -1
- package/dist/assets/navigation-menu-group.css +1 -1
- package/dist/assets/secondary-nav.css +1 -1
- package/dist/assets/sidepanel.css +1 -1
- package/dist/button.js +1 -1
- package/dist/card.js +1 -1
- package/dist/checkbox.js +2 -2
- package/dist/chunks/{accordion-item.l88yjGPT.js → accordion-item.BMxeTYDy.js} +2 -2
- package/dist/chunks/{accordion-item.l88yjGPT.js.map → accordion-item.BMxeTYDy.js.map} +1 -1
- package/dist/chunks/{action-bar.CDkRNAoE.js → action-bar.CWjLoeOU.js} +3 -3
- package/dist/chunks/{action-bar.CDkRNAoE.js.map → action-bar.CWjLoeOU.js.map} +1 -1
- package/dist/chunks/{ai-tag.BijlneJD.js → ai-tag.CjrOE5yl.js} +2 -2
- package/dist/chunks/{ai-tag.BijlneJD.js.map → ai-tag.CjrOE5yl.js.map} +1 -1
- package/dist/chunks/{alert.Bplzzgm3.js → alert.C8Pe1-OO.js} +98 -80
- package/dist/chunks/alert.C8Pe1-OO.js.map +1 -0
- package/dist/chunks/{base-modal.DKCKkQDy.js → base-modal.Bn4ZXwv6.js} +4 -4
- package/dist/chunks/{base-modal.DKCKkQDy.js.map → base-modal.Bn4ZXwv6.js.map} +1 -1
- package/dist/chunks/{button-actions-with-menu.CqFhtqhV.js → button-actions-with-menu.CrbF2BSQ.js} +2 -2
- package/dist/chunks/{button-actions-with-menu.CqFhtqhV.js.map → button-actions-with-menu.CrbF2BSQ.js.map} +1 -1
- package/dist/chunks/{button-actions.796MVzQq.js → button-actions.uIjzze43.js} +2 -2
- package/dist/chunks/{button-actions.796MVzQq.js.map → button-actions.uIjzze43.js.map} +1 -1
- package/dist/chunks/{calendar.C60WoNOM.js → calendar.Dtba7fcs.js} +18 -18
- package/dist/chunks/{calendar.C60WoNOM.js.map → calendar.Dtba7fcs.js.map} +1 -1
- package/dist/chunks/{card.Dvp16GwX.js → card.a8QL14dy.js} +4 -4
- package/dist/chunks/{card.Dvp16GwX.js.map → card.a8QL14dy.js.map} +1 -1
- package/dist/chunks/{checkbox-group.DTGifncj.js → checkbox-group.BCzNXT1-.js} +3 -3
- package/dist/chunks/{checkbox-group.DTGifncj.js.map → checkbox-group.BCzNXT1-.js.map} +1 -1
- package/dist/chunks/{checkbox.X1EMa3FW.js → checkbox.0RmIkniU.js} +14 -14
- package/dist/chunks/{checkbox.X1EMa3FW.js.map → checkbox.0RmIkniU.js.map} +1 -1
- package/dist/chunks/{code-snippet.DEsJSJVK.js → code-snippet.BbswO6TU.js} +4 -4
- package/dist/chunks/{code-snippet.DEsJSJVK.js.map → code-snippet.BbswO6TU.js.map} +1 -1
- package/dist/chunks/{controls-group.DerSnhym.js → controls-group.KarFHKUT.js} +2 -2
- package/dist/chunks/{controls-group.DerSnhym.js.map → controls-group.KarFHKUT.js.map} +1 -1
- package/dist/chunks/{copy.DNczgREu.js → copy.C92qFRaR.js} +3 -3
- package/dist/chunks/{copy.DNczgREu.js.map → copy.C92qFRaR.js.map} +1 -1
- package/dist/chunks/{dashboard-section.l2FpRDRL.js → dashboard-section.Bv-SveGN.js} +3 -3
- package/dist/chunks/{dashboard-section.l2FpRDRL.js.map → dashboard-section.Bv-SveGN.js.map} +1 -1
- package/dist/chunks/{dashed-underline.BCAYJqCs.js → dashed-underline.C3lSC1_R.js} +3 -3
- package/dist/chunks/{dashed-underline.BCAYJqCs.js.map → dashed-underline.C3lSC1_R.js.map} +1 -1
- package/dist/chunks/{data-grid-template.8nSTkhta.js → data-grid-template.DqZmPeze.js} +4 -4
- package/dist/chunks/{data-grid-template.8nSTkhta.js.map → data-grid-template.DqZmPeze.js.map} +1 -1
- package/dist/chunks/{data-grid.CjR--S7q.js → data-grid.vBDlLHOW.js} +19 -19
- package/dist/chunks/{data-grid.CjR--S7q.js.map → data-grid.vBDlLHOW.js.map} +1 -1
- package/dist/chunks/{date-picker.kX0OtzF-.js → date-picker.Dnr2HuxA.js} +7 -7
- package/dist/chunks/{date-picker.kX0OtzF-.js.map → date-picker.Dnr2HuxA.js.map} +1 -1
- package/dist/chunks/{date-range-picker.BiCTjOGe.js → date-range-picker.CuBygd3O.js} +32 -32
- package/dist/chunks/{date-range-picker.BiCTjOGe.js.map → date-range-picker.CuBygd3O.js.map} +1 -1
- package/dist/chunks/{draggable-handle.C4CTHXxX.js → draggable-handle.Cvc8gHzx.js} +2 -2
- package/dist/chunks/{draggable-handle.C4CTHXxX.js.map → draggable-handle.Cvc8gHzx.js.map} +1 -1
- package/dist/chunks/{draggable.GtQJVBaG.js → draggable.BZsgR26I.js} +2 -2
- package/dist/chunks/{draggable.GtQJVBaG.js.map → draggable.BZsgR26I.js.map} +1 -1
- package/dist/chunks/{dropdown-tag.ChTtNLjy.js → dropdown-tag.Bn5FPeEL.js} +3 -3
- package/dist/chunks/{dropdown-tag.ChTtNLjy.js.map → dropdown-tag.Bn5FPeEL.js.map} +1 -1
- package/dist/chunks/{dropdown.D_mKfQ6f.js → dropdown.D_jkFrMd.js} +5 -5
- package/dist/chunks/{dropdown.D_mKfQ6f.js.map → dropdown.D_jkFrMd.js.map} +1 -1
- package/dist/chunks/{empty-state.Ds2tRTWX.js → empty-state.DpUC-3wv.js} +2 -2
- package/dist/chunks/{empty-state.Ds2tRTWX.js.map → empty-state.DpUC-3wv.js.map} +1 -1
- package/dist/chunks/{field-label.2cXs_CZy.js → field-label.Cz11fn_F.js} +2 -2
- package/dist/chunks/{field-label.2cXs_CZy.js.map → field-label.Cz11fn_F.js.map} +1 -1
- package/dist/chunks/{file-uploader.AlkcCFhN.js → file-uploader.BglImnqw.js} +6 -7
- package/dist/chunks/{file-uploader.AlkcCFhN.js.map → file-uploader.BglImnqw.js.map} +1 -1
- package/dist/chunks/filter-bar.DG4GTi8L.js +3971 -0
- package/dist/chunks/filter-bar.DG4GTi8L.js.map +1 -0
- package/dist/chunks/{focus-trap.BgyHTR_3.js → focus-trap.Co-S6goa.js} +2 -1
- package/dist/chunks/{focus-trap.BgyHTR_3.js.map → focus-trap.Co-S6goa.js.map} +1 -1
- package/dist/chunks/{footer-actions.CjiK4krX.js → footer-actions.Dl20Q1WX.js} +2 -2
- package/dist/chunks/{footer-actions.CjiK4krX.js.map → footer-actions.Dl20Q1WX.js.map} +1 -1
- package/dist/chunks/{form-layout-title.BB-65dko.js → form-layout-title.BZFh_nGD.js} +2 -2
- package/dist/chunks/{form-layout-title.BB-65dko.js.map → form-layout-title.BZFh_nGD.js.map} +1 -1
- package/dist/chunks/{header-with-views.DncSeESj.js → header-with-views.WJlXgGI5.js} +10 -10
- package/dist/chunks/{header-with-views.DncSeESj.js.map → header-with-views.WJlXgGI5.js.map} +1 -1
- package/dist/chunks/{header.CcbbavgV.js → header.Bi3MPZKE.js} +4 -4
- package/dist/chunks/{header.CcbbavgV.js.map → header.Bi3MPZKE.js.map} +1 -1
- package/dist/chunks/{info-icon-with-popover.i_J-4snn.js → info-icon-with-popover.uSr6-jzR.js} +3 -3
- package/dist/chunks/{info-icon-with-popover.i_J-4snn.js.map → info-icon-with-popover.uSr6-jzR.js.map} +1 -1
- package/dist/chunks/{info-icon.Bs4_4xiO.js → info-icon.Zlg6Sgz0.js} +3 -3
- package/dist/chunks/{info-icon.Bs4_4xiO.js.map → info-icon.Zlg6Sgz0.js.map} +1 -1
- package/dist/chunks/{input-field-password.DJJWboYN.js → input-field-password.CJZxudne.js} +4 -4
- package/dist/chunks/{input-field-password.DJJWboYN.js.map → input-field-password.CJZxudne.js.map} +1 -1
- package/dist/chunks/{input-field-phone-number.s6e7fRXS.js → input-field-phone-number.OJ4MG9Gf.js} +2 -2
- package/dist/chunks/{input-field-phone-number.s6e7fRXS.js.map → input-field-phone-number.OJ4MG9Gf.js.map} +1 -1
- package/dist/chunks/{input-field.D-9DhR3q.js → input-field.IyNujUZt.js} +3 -3
- package/dist/chunks/{input-field.D-9DhR3q.js.map → input-field.IyNujUZt.js.map} +1 -1
- package/dist/chunks/{input-time.B8CjTnFN.js → input-time.BJ6YqkFi.js} +3 -3
- package/dist/chunks/{input-time.B8CjTnFN.js.map → input-time.BJ6YqkFi.js.map} +1 -1
- package/dist/chunks/{inspector-page.ddc8uxW0.js → inspector-page.D42_PXHM.js} +2 -2
- package/dist/chunks/{inspector-page.ddc8uxW0.js.map → inspector-page.D42_PXHM.js.map} +1 -1
- package/dist/chunks/{inspector.M8CDE070.js → inspector.BBgrupfO.js} +2 -2
- package/dist/chunks/{inspector.M8CDE070.js.map → inspector.BBgrupfO.js.map} +1 -1
- package/dist/chunks/{list-item.H7_fNTdv.js → list-item.CT7dyMQH.js} +3 -3
- package/dist/chunks/{list-item.H7_fNTdv.js.map → list-item.CT7dyMQH.js.map} +1 -1
- package/dist/chunks/{listbox-option-tag.D4dI6JjW.js → listbox-option-tag.CwrFdsY1.js} +2 -2
- package/dist/chunks/{listbox-option-tag.D4dI6JjW.js.map → listbox-option-tag.CwrFdsY1.js.map} +1 -1
- package/dist/chunks/{modal-fullscreen.xBCeCfKq.js → modal-fullscreen.I5bjqzfd.js} +3 -3
- package/dist/chunks/{modal-fullscreen.xBCeCfKq.js.map → modal-fullscreen.I5bjqzfd.js.map} +1 -1
- package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.DI5FvZCo.js → modal.vue_vue_type_script_setup_true_lang.CrsIyU7A.js} +4 -4
- package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.DI5FvZCo.js.map → modal.vue_vue_type_script_setup_true_lang.CrsIyU7A.js.map} +1 -1
- package/dist/chunks/{navigation-menu-group.C3PlLAW0.js → navigation-menu-group.BJ9ZsXEn.js} +3 -3
- package/dist/chunks/{navigation-menu-group.C3PlLAW0.js.map → navigation-menu-group.BJ9ZsXEn.js.map} +1 -1
- package/dist/chunks/{pagination.BDWvQSLE.js → pagination.C5gZxtZY.js} +2 -2
- package/dist/chunks/{pagination.BDWvQSLE.js.map → pagination.C5gZxtZY.js.map} +1 -1
- package/dist/chunks/popover.types.dhllh3NP.js +6 -0
- package/dist/chunks/{popover.types.CXIAfp1m.js.map → popover.types.dhllh3NP.js.map} +1 -1
- package/dist/chunks/{popper-container.lfk_dyZi.js → popper-container.Rfj8UdMD.js} +2 -2
- package/dist/chunks/{popper-container.lfk_dyZi.js.map → popper-container.Rfj8UdMD.js.map} +1 -1
- package/dist/chunks/{radio-group.BCSEk7bG.js → radio-group.XmRPh03c.js} +3 -3
- package/dist/chunks/{radio-group.BCSEk7bG.js.map → radio-group.XmRPh03c.js.map} +1 -1
- package/dist/chunks/{rich-text-editor.-rhl_Odb.js → rich-text-editor.Cv_Vwt-6.js} +5 -5
- package/dist/chunks/{rich-text-editor.-rhl_Odb.js.map → rich-text-editor.Cv_Vwt-6.js.map} +1 -1
- package/dist/chunks/{search-bar.9OVo47s4.js → search-bar.5tObtLfW.js} +3 -3
- package/dist/chunks/{search-bar.9OVo47s4.js.map → search-bar.5tObtLfW.js.map} +1 -1
- package/dist/chunks/{secondary-nav.DLIwusR0.js → secondary-nav.DApIImQ0.js} +4 -4
- package/dist/chunks/{secondary-nav.DLIwusR0.js.map → secondary-nav.DApIImQ0.js.map} +1 -1
- package/dist/chunks/{segmented-control.CVGuMpfp.js → segmented-control.CEt2dz4n.js} +2 -2
- package/dist/chunks/{segmented-control.CVGuMpfp.js.map → segmented-control.CEt2dz4n.js.map} +1 -1
- package/dist/chunks/{selection-card-group.BdPFzMeI.js → selection-card-group.DHXtJpoB.js} +10 -10
- package/dist/chunks/{selection-card-group.BdPFzMeI.js.map → selection-card-group.DHXtJpoB.js.map} +1 -1
- package/dist/chunks/{sidepanel.DAJe9Vze.js → sidepanel._30g8POM.js} +4 -4
- package/dist/chunks/{sidepanel.DAJe9Vze.js.map → sidepanel._30g8POM.js.map} +1 -1
- package/dist/chunks/{structured-list-item.DHhqoy1c.js → structured-list-item.CBzznwcF.js} +4 -4
- package/dist/chunks/{structured-list-item.DHhqoy1c.js.map → structured-list-item.CBzznwcF.js.map} +1 -1
- package/dist/chunks/{summary-grid.types.q3UovoFz.js → summary-grid.types.BR_EGvRg.js} +5 -5
- package/dist/chunks/{summary-grid.types.q3UovoFz.js.map → summary-grid.types.BR_EGvRg.js.map} +1 -1
- package/dist/chunks/{tab.BnQFECsk.js → tab.D_k5AVHk.js} +2 -2
- package/dist/chunks/{tab.BnQFECsk.js.map → tab.D_k5AVHk.js.map} +1 -1
- package/dist/chunks/{tag.CYht36pa.js → tag.BE1j0Oid.js} +2 -2
- package/dist/chunks/{tag.CYht36pa.js.map → tag.BE1j0Oid.js.map} +1 -1
- package/dist/chunks/{textarea.Co2I-8Xo.js → textarea.BYshPd98.js} +2 -2
- package/dist/chunks/{textarea.Co2I-8Xo.js.map → textarea.BYshPd98.js.map} +1 -1
- package/dist/chunks/{timeline-item.cWOsHLlm.js → timeline-item.Sy_DSw6p.js} +6 -6
- package/dist/chunks/{timeline-item.cWOsHLlm.js.map → timeline-item.Sy_DSw6p.js.map} +1 -1
- package/dist/chunks/{title-details.BoXlSA06.js → title-details.C4ZvxPMu.js} +2 -2
- package/dist/chunks/{title-details.BoXlSA06.js.map → title-details.C4ZvxPMu.js.map} +1 -1
- package/dist/chunks/{tooltip.870vHAR2.js → tooltip.TFOGHOO0.js} +3 -3
- package/dist/chunks/{tooltip.870vHAR2.js.map → tooltip.TFOGHOO0.js.map} +1 -1
- package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.ddox1H1m.js → tutorial.vue_vue_type_script_setup_true_lang.BIP-heAH.js} +4 -4
- package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.ddox1H1m.js.map → tutorial.vue_vue_type_script_setup_true_lang.BIP-heAH.js.map} +1 -1
- package/dist/chunks/{use-date-input-formatter.C3Dpcve8.js → use-date-input-formatter._ik1DYYV.js} +2 -2
- package/dist/chunks/{use-date-input-formatter.C3Dpcve8.js.map → use-date-input-formatter._ik1DYYV.js.map} +1 -1
- package/dist/chunks/use-expandable-content-height.DmFeas9-.js +36 -0
- package/dist/chunks/use-expandable-content-height.DmFeas9-.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/date-time-picker.js +4 -4
- package/dist/draggable.js +2 -2
- package/dist/dropdown.js +2 -2
- 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 +55 -55
- 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/input-time.js +1 -1
- package/dist/inspector.js +2 -2
- package/dist/internal.js +11 -11
- package/dist/list.js +1 -1
- package/dist/menu.js +1 -1
- package/dist/modal-fullscreen.js +1 -1
- package/dist/modal.js +2 -2
- package/dist/navigation-menu.js +1 -1
- package/dist/pagination.js +1 -1
- package/dist/popover.js +2 -2
- package/dist/popper-container.js +1 -1
- package/dist/progress-bar.js +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/rich-text-editor.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/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/tutorial.js +1 -1
- package/dist/web-types.json +1 -1
- package/package.json +3 -3
- package/dist/assets/date-filter.css +0 -1
- package/dist/assets/date-range-filter.css +0 -1
- package/dist/assets/input-with-dropdown-filter.css +0 -1
- package/dist/chunks/alert.Bplzzgm3.js.map +0 -1
- package/dist/chunks/date-filter.75o-NSBz.js +0 -156
- package/dist/chunks/date-filter.75o-NSBz.js.map +0 -1
- package/dist/chunks/date-range-filter.J5p9ECm7.js +0 -946
- package/dist/chunks/date-range-filter.J5p9ECm7.js.map +0 -1
- package/dist/chunks/filter-bar.CdUM6KUq.js +0 -2554
- package/dist/chunks/filter-bar.CdUM6KUq.js.map +0 -1
- package/dist/chunks/input-with-dropdown-filter.BBQAFXkw.js +0 -100
- package/dist/chunks/input-with-dropdown-filter.BBQAFXkw.js.map +0 -1
- package/dist/chunks/popover.types.CXIAfp1m.js +0 -6
- package/dist/chunks/select-avatar-filter.BcvevMzz.js +0 -55
- package/dist/chunks/select-avatar-filter.BcvevMzz.js.map +0 -1
- package/dist/chunks/select-country-filter.D9sGjia8.js +0 -56
- package/dist/chunks/select-country-filter.D9sGjia8.js.map +0 -1
- package/dist/chunks/select-currency-filter.oeGe4-X4.js +0 -91
- package/dist/chunks/select-currency-filter.oeGe4-X4.js.map +0 -1
- package/dist/chunks/select-payment-method-filter.uSfKXqOm.js +0 -55
- package/dist/chunks/select-payment-method-filter.uSfKXqOm.js.map +0 -1
- package/dist/chunks/select-tag-filter.BuKVAYC6.js +0 -63
- package/dist/chunks/select-tag-filter.BuKVAYC6.js.map +0 -1
- package/dist/chunks/use-expandable-content-height.Bdd9hQwq.js +0 -34
- package/dist/chunks/use-expandable-content-height.Bdd9hQwq.js.map +0 -1
- package/dist/chunks/warning-filled.Bzh3ib0x.js +0 -25
- package/dist/chunks/warning-filled.Bzh3ib0x.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-actions-with-menu.CqFhtqhV.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, ref, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n breakpoint?: number;\n container: Ref<HTMLElement>;\n defaultActionsCount: Ref<number>;\n offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n const { breakpoint, container, defaultActionsCount, offset } = props;\n\n const { width: windowWidth } = useWindowSize();\n\n const displayedActionsCount = ref(defaultActionsCount.value);\n\n const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n const showActions = async () => {\n await nextTick();\n\n const availableSpace = container.value.clientWidth;\n const totalActionWidth =\n AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n (offset?.value?.offsetWidth ?? 0) +\n AVERAGE_BUTTON_WIDTH;\n\n // Only add actions if there's enough space and we haven't reached max\n if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount.value) {\n displayedActionsCount.value += 1;\n\n await showActions(); // keep trying to show more\n }\n };\n\n const hideActions = async () => {\n await nextTick();\n\n const availableSpace = container.value.clientWidth;\n const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n // Hide actions if they overflow the container\n if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n displayedActionsCount.value -= 1;\n\n await hideActions(); // keep hiding until it fits\n }\n };\n\n watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n return;\n }\n\n await nextTick();\n\n const isIncreasing = newWidth > oldWidth;\n\n if (isIncreasing) {\n await showActions();\n } else {\n await hideActions();\n }\n });\n\n watch(defaultActionsCount, async count => {\n displayedActionsCount.value = count;\n\n if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n await hideActions();\n }\n });\n\n return {\n displayedActionsCount,\n };\n};\n","<template>\n <div class=\"b-button-actions-with-menu\">\n <div\n ref=\"buttonActionsWithMenu\"\n role=\"group\"\n class=\"b-button-actions-with-menu__container-wrapper\"\n :class=\"conditionalClasses\"\n >\n <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n <bento-menu\n v-if=\"computedMenuActions.length\"\n ref=\"menu\"\n :data=\"computedMenuActions\"\n :menu-position=\"menuPosition\"\n />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButtonActions } from '@/components/button';\n import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n import BentoMenu from '@/components/menu/menu.vue';\n import { computed, provide, ref, toRef } from 'vue';\n import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n import { useResponsiveActions } from './composables/use-responsive-actions';\n\n const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), {\n actionsLayout: 'buttons-end',\n disableResponsiveBehavior: false,\n displayedActions: undefined,\n inverse: false,\n hideDisplayedActionsBreakpoint: 0,\n menuPosition: 'bottom-start',\n });\n\n const inverseRef = toRef(props, 'inverse');\n const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n const menu = ref(null);\n const stackButtons = ref(false);\n\n const computedActions = computed(() => {\n const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n ? displayedActionsCount.value\n : props.displayedActions;\n\n return props.actions.slice(0, displayedActionsLimit);\n });\n const computedMenuRef = computed(() => menu?.value?.$el);\n\n const { displayedActionsCount } = useResponsiveActions({\n breakpoint: props.hideDisplayedActionsBreakpoint,\n container: buttonActionsWithMenu,\n defaultActionsCount: toRef(props, 'displayedActions'),\n offset: computedMenuRef,\n });\n\n provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n if (!props.disableResponsiveBehavior) {\n provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n }\n\n const conditionalClasses = computed(() => ({\n [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end',\n [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start',\n [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n }));\n\n const computedMenuActions = computed(() => {\n if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) {\n return [];\n }\n\n const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n return actionsToProcess.flatMap<BentoMenuItem>(action => {\n if (!action.data) {\n return {\n text: action.title,\n handler: () => action.event?.({} as Event),\n icon: action.icon,\n critical: action.critical,\n disabled: action.disabled,\n };\n }\n\n return action.data;\n });\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * An internal button actions component with the option to display some of the actions in a menu.\n *\n * @example\n * <button-actions-with-menu\n * :actions=\"[\n * {\n * title: 'Primary',\n * event: () => { ... },\n * icon: FourPeopleIcon,\n * link: {\n * variant: 'default',\n * external: true,\n * to: 'https://www.adyen.com/'\n * },\n * },\n * {\n * title: 'Secondary',\n * event: () => { ... }\n * disabled: true,\n * variant: BentoButtonVariant.PRIMARY,\n * critical: true\n * }]\"\n * :displayedActions=\"2\"\n * />\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","hideActions","watch","newWidth","containerEl","oldWidth","count","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":";;;;;AAUO,MAAAA,IAAA,CAAAC,MAAA;AACH,QAAA,EAAA,YAAAC,GAAA,WAAAC,GAAA,qBAAAC,GAAA,QAAAC,EAAA,IAAAJ,GAEA,EAAA,OAAAK,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAL,EAAA,KAAA,GAEAM,IAAA,KAEAC,IAAA,YAAA;AACI,UAAAC,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA,KAAAK;AAMA,IAAAG,KAAAC,KAAAN,EAAA,QAAAJ,EAAA,UACII,EAAA,SAAA,GAEA,MAAAG,EAAA;AAAA,EACJ,GAGJI,IAAA,YAAA;AACI,UAAAH,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA;AAGA,IAAAQ,IAAAC,KAAAN,EAAA,QAAA,MACIA,EAAA,SAAA,GAEA,MAAAO,EAAA;AAAA,EACJ;AAGJ,SAAAC,EAAA,CAAAV,GAAAH,CAAA,GAAA,OAAA,CAAAc,GAAAC,CAAA,GAAA,CAAAC,CAAA,MAAA;AACI,QAAA,CAAAD,KAAA,CAAAd,KAAAa,IAAAf;AACI;AAGJ,UAAAU,EAAA,GAEAK,IAAAE,IAGI,MAAAR,EAAA,IAEA,MAAAI,EAAA;AAAA,EACJ,CAAA,GAGJC,EAAAZ,GAAA,OAAAgB,MAAA;AACI,IAAAZ,EAAA,QAAAY,GAEAlB,KAAAI,EAAA,SAAAJ,KAAAC,EAAA,SACI,MAAAY,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,uBAAAP;AAAA,EACH;AAER,gDC4CIa,IAAA,CAAA;;;;;;;;;;;;;AA5FA,UAAApB,IAAAqB,GASAC,IAAAC,EAAAvB,GAAA,SAAA,GACAwB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,IAAA,GACAkB,IAAAlB,EAAA,EAAA,GAEAmB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA7B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA6B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAAH,GAAA,OAAA,GAAA,GAEA,EAAA,uBAAAlB,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAwB;AAAA,MACP,qBAAAD,EAAAvB,GAAA,kBAAA;AAAA,MACyC,QAAA8B;AAAA,IAC5C,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEAtB,EAAA,6BACI+B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA5B,EAAA,kBAAA;AAAA,MACiD,gEAAAA,EAAA,kBAAA;AAAA,MACE,kEAAA0B,EAAA;AAAA,IACT,EAAA,GAGrFS,IAAAP,EAAA,MACIrB,EAAA,UAAA,UAAAA,EAAA,SAAAP,EAAA,QAAA,SACI,CAAA,IAGJA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAEA,QAAA,CAAAoC,MACIA,EAAA,OAUAA,EAAA,OATI;AAAA,MAAO,MAAAA,EAAA;AAAA,MACU,SAAA,MAAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MAC4B,MAAAA,EAAA;AAAA,MAC5B,UAAAA,EAAA;AAAA,MACI,UAAAA,EAAA;AAAA,IACA,CAIX,CACjB;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"button-actions-with-menu.CrbF2BSQ.js","sources":["../../../vue2/src/components/internal/button-actions-with-menu/composables/use-responsive-actions.ts","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["import { useWindowSize } from '@vueuse/core';\nimport { nextTick, ref, type Ref, watch } from 'vue';\n\ninterface UseResponsiveActionsProps {\n breakpoint?: number;\n container: Ref<HTMLElement>;\n defaultActionsCount: Ref<number>;\n offset?: Ref<HTMLElement>;\n}\n\nexport const useResponsiveActions = (props: UseResponsiveActionsProps) => {\n const { breakpoint, container, defaultActionsCount, offset } = props;\n\n const { width: windowWidth } = useWindowSize();\n\n const displayedActionsCount = ref(defaultActionsCount.value);\n\n const AVERAGE_BUTTON_WIDTH = 150; // button size + gap\n\n const showActions = async () => {\n await nextTick();\n\n const availableSpace = container.value.clientWidth;\n const totalActionWidth =\n AVERAGE_BUTTON_WIDTH * displayedActionsCount.value +\n (offset?.value?.offsetWidth ?? 0) +\n AVERAGE_BUTTON_WIDTH;\n\n // Only add actions if there's enough space and we haven't reached max\n if (availableSpace >= totalActionWidth && displayedActionsCount.value < defaultActionsCount.value) {\n displayedActionsCount.value += 1;\n\n await showActions(); // keep trying to show more\n }\n };\n\n const hideActions = async () => {\n await nextTick();\n\n const availableSpace = container.value.clientWidth;\n const totalActionWidth = AVERAGE_BUTTON_WIDTH * displayedActionsCount.value + (offset?.value?.offsetWidth ?? 0);\n\n // Hide actions if they overflow the container\n if (availableSpace < totalActionWidth && displayedActionsCount.value > 0) {\n displayedActionsCount.value -= 1;\n\n await hideActions(); // keep hiding until it fits\n }\n };\n\n watch([windowWidth, container], async ([newWidth, containerEl], [oldWidth]) => {\n if (!containerEl || !defaultActionsCount || newWidth > breakpoint) {\n return;\n }\n\n await nextTick();\n\n const isIncreasing = newWidth > oldWidth;\n\n if (isIncreasing) {\n await showActions();\n } else {\n await hideActions();\n }\n });\n\n watch(defaultActionsCount, async count => {\n displayedActionsCount.value = count;\n\n if (breakpoint && windowWidth.value <= breakpoint && container.value) {\n await hideActions();\n }\n });\n\n return {\n displayedActionsCount,\n };\n};\n","<template>\n <div class=\"b-button-actions-with-menu\">\n <div\n ref=\"buttonActionsWithMenu\"\n role=\"group\"\n class=\"b-button-actions-with-menu__container-wrapper\"\n :class=\"conditionalClasses\"\n >\n <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" :layout=\"actionsLayout\" />\n <bento-menu\n v-if=\"computedMenuActions.length\"\n ref=\"menu\"\n :data=\"computedMenuActions\"\n :menu-position=\"menuPosition\"\n />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButtonActions } from '@/components/button';\n import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n import BentoMenu from '@/components/menu/menu.vue';\n import { computed, provide, ref, toRef } from 'vue';\n import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types';\n import { useResponsiveActions } from './composables/use-responsive-actions';\n\n const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), {\n actionsLayout: 'buttons-end',\n disableResponsiveBehavior: false,\n displayedActions: undefined,\n inverse: false,\n hideDisplayedActionsBreakpoint: 0,\n menuPosition: 'bottom-start',\n });\n\n const inverseRef = toRef(props, 'inverse');\n const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n const menu = ref(null);\n const stackButtons = ref(false);\n\n const computedActions = computed(() => {\n const displayedActionsLimit = props.hideDisplayedActionsBreakpoint\n ? displayedActionsCount.value\n : props.displayedActions;\n\n return props.actions.slice(0, displayedActionsLimit);\n });\n const computedMenuRef = computed(() => menu?.value?.$el);\n\n const { displayedActionsCount } = useResponsiveActions({\n breakpoint: props.hideDisplayedActionsBreakpoint,\n container: buttonActionsWithMenu,\n defaultActionsCount: toRef(props, 'displayedActions'),\n offset: computedMenuRef,\n });\n\n provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n if (!props.disableResponsiveBehavior) {\n provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n }\n\n const conditionalClasses = computed(() => ({\n [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end',\n [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start',\n [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n }));\n\n const computedMenuActions = computed(() => {\n if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) {\n return [];\n }\n\n const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length);\n\n return actionsToProcess.flatMap<BentoMenuItem>(action => {\n if (!action.data) {\n return {\n text: action.title,\n handler: () => action.event?.({} as Event),\n icon: action.icon,\n critical: action.critical,\n disabled: action.disabled,\n };\n }\n\n return action.data;\n });\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * An internal button actions component with the option to display some of the actions in a menu.\n *\n * @example\n * <button-actions-with-menu\n * :actions=\"[\n * {\n * title: 'Primary',\n * event: () => { ... },\n * icon: FourPeopleIcon,\n * link: {\n * variant: 'default',\n * external: true,\n * to: 'https://www.adyen.com/'\n * },\n * },\n * {\n * title: 'Secondary',\n * event: () => { ... }\n * disabled: true,\n * variant: BentoButtonVariant.PRIMARY,\n * critical: true\n * }]\"\n * :displayedActions=\"2\"\n * />\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["useResponsiveActions","props","breakpoint","container","defaultActionsCount","offset","windowWidth","useWindowSize","displayedActionsCount","ref","AVERAGE_BUTTON_WIDTH","showActions","nextTick","availableSpace","totalActionWidth","hideActions","watch","newWidth","containerEl","oldWidth","count","__default__","__props","inverseRef","toRef","buttonActionsWithMenu","menu","stackButtons","computedActions","computed","displayedActionsLimit","computedMenuRef","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","action"],"mappings":";;;;;AAUO,MAAAA,IAAA,CAAAC,MAAA;AACH,QAAA,EAAA,YAAAC,GAAA,WAAAC,GAAA,qBAAAC,GAAA,QAAAC,EAAA,IAAAJ,GAEA,EAAA,OAAAK,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAAL,EAAA,KAAA,GAEAM,IAAA,KAEAC,IAAA,YAAA;AACI,UAAAC,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA,KAAAK;AAMA,IAAAG,KAAAC,KAAAN,EAAA,QAAAJ,EAAA,UACII,EAAA,SAAA,GAEA,MAAAG,EAAA;AAAA,EACJ,GAGJI,IAAA,YAAA;AACI,UAAAH,EAAA;AAEA,UAAAC,IAAAV,EAAA,MAAA,aACAW,IAAAJ,IAAAF,EAAA,SAAAH,GAAA,OAAA,eAAA;AAGA,IAAAQ,IAAAC,KAAAN,EAAA,QAAA,MACIA,EAAA,SAAA,GAEA,MAAAO,EAAA;AAAA,EACJ;AAGJ,SAAAC,EAAA,CAAAV,GAAAH,CAAA,GAAA,OAAA,CAAAc,GAAAC,CAAA,GAAA,CAAAC,CAAA,MAAA;AACI,QAAA,CAAAD,KAAA,CAAAd,KAAAa,IAAAf;AACI;AAGJ,UAAAU,EAAA,GAEAK,IAAAE,IAGI,MAAAR,EAAA,IAEA,MAAAI,EAAA;AAAA,EACJ,CAAA,GAGJC,EAAAZ,GAAA,OAAAgB,MAAA;AACI,IAAAZ,EAAA,QAAAY,GAEAlB,KAAAI,EAAA,SAAAJ,KAAAC,EAAA,SACI,MAAAY,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,uBAAAP;AAAA,EACH;AAER,gDC4CIa,IAAA,CAAA;;;;;;;;;;;;;AA5FA,UAAApB,IAAAqB,GASAC,IAAAC,EAAAvB,GAAA,SAAA,GACAwB,IAAAhB,EAAA,IAAA,GACAiB,IAAAjB,EAAA,IAAA,GACAkB,IAAAlB,EAAA,EAAA,GAEAmB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAA7B,EAAA,iCAAAO,EAAA,QAAAP,EAAA;AAIA,aAAAA,EAAA,QAAA,MAAA,GAAA6B,CAAA;AAAA,IAAmD,CAAA,GAEvDC,IAAAF,EAAA,MAAAH,GAAA,OAAA,GAAA,GAEA,EAAA,uBAAAlB,EAAA,IAAAR,EAAA;AAAA,MAAuD,YAAAC,EAAA;AAAA,MACjC,WAAAwB;AAAA,MACP,qBAAAD,EAAAvB,GAAA,kBAAA;AAAA,MACyC,QAAA8B;AAAA,IAC5C,CAAA;AAGZ,IAAAC,EAAAC,GAAAV,CAAA,GAEAtB,EAAA,6BACI+B,EAAAE,GAAA,EAAA,uBAAAT,GAAA,MAAAC,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAQ,IAAAN,EAAA,OAAA;AAAA,MAA2C,8DAAA5B,EAAA,kBAAA;AAAA,MACiD,gEAAAA,EAAA,kBAAA;AAAA,MACE,kEAAA0B,EAAA;AAAA,IACT,EAAA,GAGrFS,IAAAP,EAAA,MACIrB,EAAA,UAAA,UAAAA,EAAA,SAAAP,EAAA,QAAA,SACI,CAAA,IAGJA,EAAA,QAAA,MAAAO,EAAA,OAAAP,EAAA,QAAA,MAAA,EAEA,QAAA,CAAAoC,MACIA,EAAA,OAUAA,EAAA,OATI;AAAA,MAAO,MAAAA,EAAA;AAAA,MACU,SAAA,MAAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MAC4B,MAAAA,EAAA;AAAA,MAC5B,UAAAA,EAAA;AAAA,MACI,UAAAA,EAAA;AAAA,IACA,CAIX,CACjB;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,7 +9,7 @@ import { _ as L } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
|
9
9
|
import { B as he, D as We } from "./divider.BlxQCxkM.js";
|
|
10
10
|
import { _ as Ke, i as ge } from "./cross.Daa8LxjC.js";
|
|
11
11
|
import { B as _e, c as le, p as Ve } from "./typography.wIM07Hbl.js";
|
|
12
|
-
import { a as Ue, P as je, b as Ge } from "./popper-container.
|
|
12
|
+
import { a as Ue, P as je, b as Ge } from "./popper-container.Rfj8UdMD.js";
|
|
13
13
|
import { o as Ye } from "./on-click-outside.BgIzQ2G1.js";
|
|
14
14
|
import { g as He } from "./generate-uid.DBWe4g6T.js";
|
|
15
15
|
import { _ as Je } from "./chevron-down.DDkuHzKj.js";
|
|
@@ -1411,4 +1411,4 @@ export {
|
|
|
1411
1411
|
Ce as l,
|
|
1412
1412
|
ft as u
|
|
1413
1413
|
};
|
|
1414
|
-
//# sourceMappingURL=button-actions.
|
|
1414
|
+
//# sourceMappingURL=button-actions.uIjzze43.js.map
|