@adyen/bento-vue3 1.89.2 → 1.90.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/components.d.ts +2 -0
- package/dist/@types/index.d.ts +403 -298
- 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/anchor-scroller.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/date-range-picker.css +1 -1
- package/dist/assets/dialog-page.css +1 -1
- package/dist/assets/file-uploader.css +1 -1
- package/dist/assets/input-time.css +1 -0
- package/dist/assets/inspector.css +1 -1
- package/dist/assets/modal-fullscreen.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/chip.js +1 -1
- package/dist/chunks/accordion-item.CZIxxSsH.js +141 -0
- package/dist/chunks/{accordion-item.BX1KrLMl.js.map → accordion-item.CZIxxSsH.js.map} +1 -1
- package/dist/chunks/action-bar.Pe_hvtja.js +336 -0
- package/dist/chunks/{action-bar.DLMaIUWW.js.map → action-bar.Pe_hvtja.js.map} +1 -1
- package/dist/chunks/ai-tag.BSlc78DU.js +137 -0
- package/dist/chunks/{ai-tag.DK63ExDc.js.map → ai-tag.BSlc78DU.js.map} +1 -1
- package/dist/chunks/{alert.C_8-VNi_.js → alert.CFWN2E0b.js} +86 -79
- package/dist/chunks/{alert.C_8-VNi_.js.map → alert.CFWN2E0b.js.map} +1 -1
- package/dist/chunks/anchor-scroller.DSfXK6vK.js +214 -0
- package/dist/chunks/{anchor-scroller.NhjLDBZI.js.map → anchor-scroller.DSfXK6vK.js.map} +1 -1
- package/dist/chunks/{base-modal.C2-JyHC_.js → base-modal.BjjDrx0z.js} +132 -125
- package/dist/chunks/{base-modal.C2-JyHC_.js.map → base-modal.BjjDrx0z.js.map} +1 -1
- package/dist/chunks/{button-actions-with-menu.BQFAgAI2.js → button-actions-with-menu.DvkS16ur.js} +2 -2
- package/dist/chunks/{button-actions-with-menu.BQFAgAI2.js.map → button-actions-with-menu.DvkS16ur.js.map} +1 -1
- package/dist/chunks/{button-actions.cMQWyZne.js → button-actions.Bh_PZ_fV.js} +202 -188
- package/dist/chunks/{button-actions.cMQWyZne.js.map → button-actions.Bh_PZ_fV.js.map} +1 -1
- package/dist/chunks/{calendar.DcCqkSNJ.js → calendar.CH-1Vgeb.js} +343 -329
- package/dist/chunks/{calendar.DcCqkSNJ.js.map → calendar.CH-1Vgeb.js.map} +1 -1
- package/dist/chunks/card.BzCGCCzH.js +223 -0
- package/dist/chunks/{card.CoxQ_L0w.js.map → card.BzCGCCzH.js.map} +1 -1
- package/dist/chunks/{checkbox-group.96n9Cc3W.js → checkbox-group.D_fN6Glu.js} +4 -4
- package/dist/chunks/{checkbox-group.96n9Cc3W.js.map → checkbox-group.D_fN6Glu.js.map} +1 -1
- package/dist/chunks/{checkbox.C6ATh8f5.js → checkbox.BlAhQl9N.js} +78 -71
- package/dist/chunks/{checkbox.C6ATh8f5.js.map → checkbox.BlAhQl9N.js.map} +1 -1
- package/dist/chunks/chip.DFldnqfz.js +72 -0
- package/dist/chunks/{chip.CdgpQyXN.js.map → chip.DFldnqfz.js.map} +1 -1
- package/dist/chunks/{code-snippet.DgAuuZF5.js → code-snippet.BePxxR3q.js} +113 -106
- package/dist/chunks/{code-snippet.DgAuuZF5.js.map → code-snippet.BePxxR3q.js.map} +1 -1
- package/dist/chunks/{controls-group.C7hOE1F4.js → controls-group.Cxk-0fCy.js} +2 -2
- package/dist/chunks/{controls-group.C7hOE1F4.js.map → controls-group.Cxk-0fCy.js.map} +1 -1
- package/dist/chunks/copy.CL893i9-.js +114 -0
- package/dist/chunks/{copy.C2kQ1PbI.js.map → copy.CL893i9-.js.map} +1 -1
- package/dist/chunks/{country.CaGc08Ps.js → country.15m_ATbO.js} +3 -3
- package/dist/chunks/{country.CaGc08Ps.js.map → country.15m_ATbO.js.map} +1 -1
- package/dist/chunks/country.types.6a7xxZIR.js +26 -0
- package/dist/chunks/{country.types.DjpMGz7a.js.map → country.types.6a7xxZIR.js.map} +1 -1
- package/dist/chunks/{dashboard-section.UafHRkMa.js → dashboard-section.CiNDItU2.js} +3 -3
- package/dist/chunks/{dashboard-section.UafHRkMa.js.map → dashboard-section.CiNDItU2.js.map} +1 -1
- package/dist/chunks/{dashed-underline.CcDV2Aks.js → dashed-underline.CwdpUz76.js} +3 -3
- package/dist/chunks/{dashed-underline.CcDV2Aks.js.map → dashed-underline.CwdpUz76.js.map} +1 -1
- package/dist/chunks/{data-grid-template.CnC4TQvk.js → data-grid-template.nXn1dLCw.js} +4 -4
- package/dist/chunks/{data-grid-template.CnC4TQvk.js.map → data-grid-template.nXn1dLCw.js.map} +1 -1
- package/dist/chunks/data-grid.CXWaoqzi.js +4242 -0
- package/dist/chunks/data-grid.CXWaoqzi.js.map +1 -0
- package/dist/chunks/date-picker.DPjCROIP.js +238 -0
- package/dist/chunks/{date-picker.dlzZ_-5f.js.map → date-picker.DPjCROIP.js.map} +1 -1
- package/dist/chunks/date-range-picker.fyrfFd04.js +998 -0
- package/dist/chunks/date-range-picker.fyrfFd04.js.map +1 -0
- package/dist/chunks/dialog-page.Bh-7RAwX.js +163 -0
- package/dist/chunks/{dialog-page.COfKqjT-.js.map → dialog-page.Bh-7RAwX.js.map} +1 -1
- package/dist/chunks/{dropdown-default-textbox.bq9AlGzJ.js → dropdown-default-textbox.aYsTZDZ7.js} +69 -62
- package/dist/chunks/{dropdown-default-textbox.bq9AlGzJ.js.map → dropdown-default-textbox.aYsTZDZ7.js.map} +1 -1
- package/dist/chunks/{dropdown-tag.Ysrac5GN.js → dropdown-tag.B7OA_Yv9.js} +5 -5
- package/dist/chunks/{dropdown-tag.Ysrac5GN.js.map → dropdown-tag.B7OA_Yv9.js.map} +1 -1
- package/dist/chunks/{dropdown.MhmX1P9o.js → dropdown.Do-mZiI6.js} +285 -271
- package/dist/chunks/{dropdown.MhmX1P9o.js.map → dropdown.Do-mZiI6.js.map} +1 -1
- package/dist/chunks/error-message.849uzpkq.js +157 -0
- package/dist/chunks/{error-message.DCgo8q20.js.map → error-message.849uzpkq.js.map} +1 -1
- package/dist/chunks/{file-uploader.Bfd1uUMe.js → file-uploader.BUvDU_cn.js} +604 -583
- package/dist/chunks/{file-uploader.Bfd1uUMe.js.map → file-uploader.BUvDU_cn.js.map} +1 -1
- package/dist/chunks/{filter-bar.CkAjLQol.js → filter-bar.fowl40RS.js} +998 -928
- package/dist/chunks/{filter-bar.CkAjLQol.js.map → filter-bar.fowl40RS.js.map} +1 -1
- package/dist/chunks/fixed-scroller.yVsaQzy5.js +157 -0
- package/dist/chunks/{fixed-scroller.DtkaGyMD.js.map → fixed-scroller.yVsaQzy5.js.map} +1 -1
- package/dist/chunks/{footer-actions.BcYSsoUg.js → footer-actions.uoNbOGAQ.js} +2 -2
- package/dist/chunks/{footer-actions.BcYSsoUg.js.map → footer-actions.uoNbOGAQ.js.map} +1 -1
- package/dist/chunks/form-layout-title.Cr3wdpK_.js +239 -0
- package/dist/chunks/{form-layout-title.DW5Kg1rh.js.map → form-layout-title.Cr3wdpK_.js.map} +1 -1
- package/dist/chunks/{header-meta.Bym9AlQm.js → header-meta.CmH6SnjE.js} +98 -84
- package/dist/chunks/{header-meta.Bym9AlQm.js.map → header-meta.CmH6SnjE.js.map} +1 -1
- package/dist/chunks/{header-with-views.Djba6iol.js → header-with-views.B2pPBcTf.js} +1091 -1070
- package/dist/chunks/{header-with-views.Djba6iol.js.map → header-with-views.B2pPBcTf.js.map} +1 -1
- package/dist/chunks/{header.o-7SyHtU.js → header.BVM8Usdi.js} +3 -3
- package/dist/chunks/{header.o-7SyHtU.js.map → header.BVM8Usdi.js.map} +1 -1
- package/dist/chunks/{info-icon.BUala_wq.js → info-icon.B3MDsjMu.js} +2 -2
- package/dist/chunks/{info-icon.BUala_wq.js.map → info-icon.B3MDsjMu.js.map} +1 -1
- package/dist/chunks/input-field-password.CHb2Ros_.js +353 -0
- package/dist/chunks/{input-field-password.DZytmp_p.js.map → input-field-password.CHb2Ros_.js.map} +1 -1
- package/dist/chunks/{input-field-phone-number.CxblrmaU.js → input-field-phone-number.DM2rmZkQ.js} +12 -5
- package/dist/chunks/{input-field-phone-number.CxblrmaU.js.map → input-field-phone-number.DM2rmZkQ.js.map} +1 -1
- package/dist/chunks/{input-field.CfU0ZKtL.js → input-field.DnYjM6yy.js} +118 -111
- package/dist/chunks/{input-field.CfU0ZKtL.js.map → input-field.DnYjM6yy.js.map} +1 -1
- package/dist/chunks/input-time.DeJ8lDio.js +103 -0
- package/dist/chunks/input-time.DeJ8lDio.js.map +1 -0
- package/dist/chunks/{inspector.B9k4tJWe.js → inspector.DMhKNW1K.js} +70 -63
- package/dist/chunks/{inspector.B9k4tJWe.js.map → inspector.DMhKNW1K.js.map} +1 -1
- package/dist/chunks/{list-item.DO5uULke.js → list-item.BHvXpqaS.js} +2 -2
- package/dist/chunks/{list-item.DO5uULke.js.map → list-item.BHvXpqaS.js.map} +1 -1
- package/dist/chunks/{listbox-option-tag.Cvplth7d.js → listbox-option-tag.CVxaZqbc.js} +2 -2
- package/dist/chunks/{listbox-option-tag.Cvplth7d.js.map → listbox-option-tag.CVxaZqbc.js.map} +1 -1
- package/dist/chunks/{modal-fullscreen.CuKVyTWb.js → modal-fullscreen.9CSTqFQc.js} +54 -47
- package/dist/chunks/{modal-fullscreen.CuKVyTWb.js.map → modal-fullscreen.9CSTqFQc.js.map} +1 -1
- package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.DmPw0l5Y.js → modal.vue_vue_type_script_setup_true_lang.BAxTkaQM.js} +48 -41
- package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.DmPw0l5Y.js.map → modal.vue_vue_type_script_setup_true_lang.BAxTkaQM.js.map} +1 -1
- package/dist/chunks/pagination.DL-h8OLF.js +413 -0
- package/dist/chunks/{pagination.dpVc6Yt0.js.map → pagination.DL-h8OLF.js.map} +1 -1
- package/dist/chunks/{promo-banner.BzveHNOI.js → promo-banner.-H4r_cwj.js} +39 -32
- package/dist/chunks/{promo-banner.BzveHNOI.js.map → promo-banner.-H4r_cwj.js.map} +1 -1
- package/dist/chunks/{radio-group.Cuiq4mxy.js → radio-group.DzhQgXv9.js} +4 -4
- package/dist/chunks/{radio-group.Cuiq4mxy.js.map → radio-group.DzhQgXv9.js.map} +1 -1
- package/dist/chunks/{rich-text-editor.DLMiT4f5.js → rich-text-editor.Ij2t4pyI.js} +418 -411
- package/dist/chunks/{rich-text-editor.DLMiT4f5.js.map → rich-text-editor.Ij2t4pyI.js.map} +1 -1
- package/dist/chunks/search-bar.DfNwnjes.js +114 -0
- package/dist/chunks/{search-bar.CsFyP0_I.js.map → search-bar.DfNwnjes.js.map} +1 -1
- package/dist/chunks/secondary-nav.CvipTDRh.js +285 -0
- package/dist/chunks/secondary-nav.CvipTDRh.js.map +1 -0
- package/dist/chunks/{segmented-control.KeQ5kuR1.js → segmented-control.CQWOO1-J.js} +2 -2
- package/dist/chunks/{segmented-control.KeQ5kuR1.js.map → segmented-control.CQWOO1-J.js.map} +1 -1
- package/dist/chunks/{selection-card-group.XM11Kk-4.js → selection-card-group.CcOWQAUC.js} +11 -11
- package/dist/chunks/{selection-card-group.XM11Kk-4.js.map → selection-card-group.CcOWQAUC.js.map} +1 -1
- package/dist/chunks/{sidepanel.b2QZ1Jsx.js → sidepanel.BObSv8UU.js} +56 -49
- package/dist/chunks/{sidepanel.b2QZ1Jsx.js.map → sidepanel.BObSv8UU.js.map} +1 -1
- package/dist/chunks/step.AsX2jAeL.js +268 -0
- package/dist/chunks/{step.BlwoLfdw.js.map → step.AsX2jAeL.js.map} +1 -1
- package/dist/chunks/structured-list-item.CgJR_ufh.js +112 -0
- package/dist/chunks/{structured-list-item.e-8kRleh.js.map → structured-list-item.CgJR_ufh.js.map} +1 -1
- package/dist/chunks/{summary-grid.types.CcvOC03H.js → summary-grid.types.DKPhtHw3.js} +5 -5
- package/dist/chunks/{summary-grid.types.CcvOC03H.js.map → summary-grid.types.DKPhtHw3.js.map} +1 -1
- package/dist/chunks/{tab.mR5uUSdp.js → tab.9nyNZiGw.js} +2 -2
- package/dist/chunks/{tab.mR5uUSdp.js.map → tab.9nyNZiGw.js.map} +1 -1
- package/dist/chunks/{tag.DujMVFh-.js → tag.YN2r-Pp3.js} +2 -2
- package/dist/chunks/{tag.DujMVFh-.js.map → tag.YN2r-Pp3.js.map} +1 -1
- package/dist/chunks/textarea.C-sBemuo.js +256 -0
- package/dist/chunks/{textarea.CHV6Z8nt.js.map → textarea.C-sBemuo.js.map} +1 -1
- package/dist/chunks/timeline-item.CHk8wXeT.js +433 -0
- package/dist/chunks/{timeline-item.CaGcRZbt.js.map → timeline-item.CHk8wXeT.js.map} +1 -1
- package/dist/chunks/{toast.C2oehk9P.js → toast.De4MTkiH.js} +64 -57
- package/dist/chunks/{toast.C2oehk9P.js.map → toast.De4MTkiH.js.map} +1 -1
- package/dist/chunks/{tooltip.CbADa_4p.js → tooltip.DHfG2aRt.js} +40 -38
- package/dist/chunks/tooltip.DHfG2aRt.js.map +1 -0
- package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.BOruzlTt.js → tutorial.vue_vue_type_script_setup_true_lang.CUDeriBU.js} +120 -113
- package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.BOruzlTt.js.map → tutorial.vue_vue_type_script_setup_true_lang.CUDeriBU.js.map} +1 -1
- package/dist/chunks/{use-cached-selected-values.ClEJRFAd.js → use-cached-selected-values.DIbfa5F1.js} +381 -360
- package/dist/chunks/{use-cached-selected-values.ClEJRFAd.js.map → use-cached-selected-values.DIbfa5F1.js.map} +1 -1
- package/dist/chunks/{use-country-items.D_3LBe2I.js → use-country-items.Dp7X1r2e.js} +3 -3
- package/dist/chunks/{use-country-items.D_3LBe2I.js.map → use-country-items.Dp7X1r2e.js.map} +1 -1
- package/dist/chunks/{use-country-phon-code.DoqTGkNr.js → use-country-phon-code.BzcawGpE.js} +107 -104
- package/dist/chunks/{use-country-phon-code.DoqTGkNr.js.map → use-country-phon-code.BzcawGpE.js.map} +1 -1
- package/dist/chunks/{use-date-input-formatter.CDRzd-hW.js → use-date-input-formatter.BiIraXZZ.js} +2 -2
- package/dist/chunks/{use-date-input-formatter.CDRzd-hW.js.map → use-date-input-formatter.BiIraXZZ.js.map} +1 -1
- package/dist/code-snippet.js +1 -1
- package/dist/country.js +3 -3
- 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/draggable-handle.js +51 -44
- package/dist/draggable-handle.js.map +1 -1
- package/dist/dropdown.js +4 -4
- package/dist/file-uploader.js +1 -1
- package/dist/filter-bar.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 +205 -203
- package/dist/index.js.map +1 -1
- 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 +5 -0
- package/dist/input-time.js.map +1 -0
- package/dist/inspector.js +1 -1
- package/dist/internal.js +12 -12
- 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/pagination.js +1 -1
- package/dist/popover.js +1 -1
- package/dist/promo-banner.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/stepper.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/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/accordion-item.BX1KrLMl.js +0 -134
- package/dist/chunks/action-bar.DLMaIUWW.js +0 -329
- package/dist/chunks/ai-tag.DK63ExDc.js +0 -130
- package/dist/chunks/anchor-scroller.NhjLDBZI.js +0 -207
- package/dist/chunks/card.CoxQ_L0w.js +0 -216
- package/dist/chunks/chip.CdgpQyXN.js +0 -65
- package/dist/chunks/copy.C2kQ1PbI.js +0 -107
- package/dist/chunks/country.types.DjpMGz7a.js +0 -19
- package/dist/chunks/data-grid.BSIXLRm7.js +0 -4014
- package/dist/chunks/data-grid.BSIXLRm7.js.map +0 -1
- package/dist/chunks/date-picker.dlzZ_-5f.js +0 -231
- package/dist/chunks/date-range-picker.DC6CK0As.js +0 -995
- package/dist/chunks/date-range-picker.DC6CK0As.js.map +0 -1
- package/dist/chunks/dialog-page.COfKqjT-.js +0 -156
- package/dist/chunks/error-message.DCgo8q20.js +0 -143
- package/dist/chunks/fixed-scroller.DtkaGyMD.js +0 -150
- package/dist/chunks/form-layout-title.DW5Kg1rh.js +0 -230
- package/dist/chunks/input-field-password.DZytmp_p.js +0 -346
- package/dist/chunks/pagination.dpVc6Yt0.js +0 -401
- package/dist/chunks/search-bar.CsFyP0_I.js +0 -107
- package/dist/chunks/secondary-nav.CLBdq98c.js +0 -138
- package/dist/chunks/secondary-nav.CLBdq98c.js.map +0 -1
- package/dist/chunks/step.BlwoLfdw.js +0 -259
- package/dist/chunks/structured-list-item.e-8kRleh.js +0 -105
- package/dist/chunks/textarea.CHV6Z8nt.js +0 -247
- package/dist/chunks/timeline-item.CaGcRZbt.js +0 -419
- package/dist/chunks/tooltip.CbADa_4p.js.map +0 -1
|
@@ -1,30 +1,37 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as Y, toRefs as V, computed as a, ref as D, onMounted as Q, useAttrs as W, resolveComponent as b, openBlock as t, createElementBlock as _, mergeProps as v, createVNode as Z, createBlock as n, withCtx as i, createElementVNode as ee, renderSlot as g, createTextVNode as M, toDisplayString as ae, createCommentVNode as s } from "vue";
|
|
2
2
|
import { B as oe } from "./typography.B3J6_tYk.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { u as le } from "./use-has-slot.CyMiImRQ.js";
|
|
7
|
-
import { g as M } from "./generate-uid.DBWe4g6T.js";
|
|
3
|
+
import { u as te } from "./use-default-slot-validator.BzHcrgmy.js";
|
|
4
|
+
import { u as re } from "./use-has-slot.CyMiImRQ.js";
|
|
5
|
+
import { g as N } from "./generate-uid.DBWe4g6T.js";
|
|
8
6
|
import { g as S } from "./get-slot-text.8Fbl1GOr.js";
|
|
9
|
-
import { u as
|
|
10
|
-
import { u as
|
|
11
|
-
import { B as
|
|
12
|
-
import { E as
|
|
13
|
-
import {
|
|
7
|
+
import { u as le } from "./index.B875RXHM.js";
|
|
8
|
+
import { u as ne } from "./aria-label.CaUURpnB.js";
|
|
9
|
+
import { B as se } from "./tag.YN2r-Pp3.js";
|
|
10
|
+
import { E as ie } from "./error-message.849uzpkq.js";
|
|
11
|
+
import { C as de } from "./checkbox-input.CVFQCfZM.js";
|
|
12
|
+
import { C as U } from "./minus-small.CnYLTuSv.js";
|
|
13
|
+
import { _ as ce } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
14
14
|
import "../assets/checkbox.css";
|
|
15
15
|
var d = /* @__PURE__ */ ((e) => (e.UPDATE = "update:model-value", e.INPUT = "input", e))(d || {});
|
|
16
|
-
const
|
|
16
|
+
const L = {
|
|
17
|
+
"de-DE": { checkbox: "Kontrollkästchen", optional: "optional" },
|
|
18
|
+
"en-GB": { checkbox: "Tick box", optional: "optional" },
|
|
17
19
|
"en-US": { checkbox: "Checkbox", optional: "optional" },
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
|
|
20
|
+
"es-ES": { checkbox: "Casilla de verificación", optional: "opcional" },
|
|
21
|
+
"es-MX": { checkbox: "Casilla de verificación", optional: "opcional" },
|
|
22
|
+
"fr-FR": { checkbox: "Case à cocher", optional: "facultatif" },
|
|
23
|
+
"it-IT": { checkbox: "Casella", optional: "opzionale" },
|
|
24
|
+
"ja-JP": { checkbox: "チェックボックス", optional: "オプション" },
|
|
25
|
+
"pt-BR": { checkbox: "Caixa de seleção", optional: "opcional" },
|
|
26
|
+
"zh-CN": { checkbox: "复选框", optional: "可选" }
|
|
27
|
+
}, ue = Y({
|
|
21
28
|
name: "bento-checkbox",
|
|
22
|
-
i18n: { messages:
|
|
29
|
+
i18n: { messages: L },
|
|
23
30
|
components: {
|
|
24
|
-
BentoTag:
|
|
31
|
+
BentoTag: se,
|
|
25
32
|
BentoTypography: oe,
|
|
26
|
-
CheckboxInput:
|
|
27
|
-
ErrorMessage:
|
|
33
|
+
CheckboxInput: de,
|
|
34
|
+
ErrorMessage: ie
|
|
28
35
|
},
|
|
29
36
|
inheritAttrs: !1,
|
|
30
37
|
model: { prop: "modelValue" },
|
|
@@ -92,72 +99,72 @@ const N = {
|
|
|
92
99
|
value: { type: [String, Number], default: null }
|
|
93
100
|
},
|
|
94
101
|
emits: [d.UPDATE, d.INPUT],
|
|
95
|
-
setup(e, { attrs:
|
|
96
|
-
const { t:
|
|
97
|
-
|
|
98
|
-
const
|
|
102
|
+
setup(e, { attrs: c, emit: m, slots: l }) {
|
|
103
|
+
const { t: h } = le({ messages: L }), f = N("description"), u = N("error"), o = re(l), { disabled: p, indeterminate: k, modelValue: y, readonly: P, value: q } = V(e), C = S(l)("default"), A = S(l)("description");
|
|
104
|
+
te("bento-checkbox", l.default, l.description);
|
|
105
|
+
const B = a(() => Array.isArray(y.value)), x = a(() => B.value ? y.value.some((r) => r === q.value) : y.value), E = a(() => k.value), w = a(
|
|
99
106
|
() => !e.disabled && !e.readonly && (e.hasError || !!e.errorMessage)
|
|
100
|
-
), I = a(() => !e.disabled && !e.readonly && !!e.errorMessage),
|
|
101
|
-
() =>
|
|
102
|
-
),
|
|
103
|
-
() => `${I.value ?
|
|
104
|
-
),
|
|
105
|
-
|
|
106
|
-
|
|
107
|
+
), I = a(() => !e.disabled && !e.readonly && !!e.errorMessage), T = a(() => o("content")), R = a(() => E?.value || x?.value), H = a(
|
|
108
|
+
() => T?.value && B?.value && R?.value
|
|
109
|
+
), O = a(
|
|
110
|
+
() => `${I.value ? u : ""} ${C && A ? f : ""}`.trim() || null
|
|
111
|
+
), j = D(c["aria-label"]), { ariaLabel: z } = V(e), $ = D();
|
|
112
|
+
Q(() => {
|
|
113
|
+
$.value = h("checkbox");
|
|
107
114
|
});
|
|
108
|
-
const
|
|
109
|
-
() =>
|
|
110
|
-
ariaLabel:
|
|
115
|
+
const F = a(
|
|
116
|
+
() => ne({
|
|
117
|
+
ariaLabel: j.value,
|
|
111
118
|
// TODO: take this line away when the aria-label props is removed
|
|
112
|
-
label:
|
|
113
|
-
defaultFallback: o("default") ? S(l)("default") :
|
|
119
|
+
label: z,
|
|
120
|
+
defaultFallback: o("default") ? S(l)("default") : $.value
|
|
114
121
|
}).value
|
|
115
|
-
),
|
|
116
|
-
const { style: r, class:
|
|
122
|
+
), G = (r) => r?.["aria-hidden"], J = a(() => {
|
|
123
|
+
const { style: r, class: X } = W();
|
|
117
124
|
return {
|
|
118
|
-
class:
|
|
125
|
+
class: X,
|
|
119
126
|
style: r
|
|
120
127
|
};
|
|
121
128
|
}), K = a(() => ({
|
|
122
|
-
[`b-checkbox--${
|
|
123
|
-
[`b-checkbox--${
|
|
129
|
+
[`b-checkbox--${U.DISABLED}`]: p.value,
|
|
130
|
+
[`b-checkbox--${U.READONLY}`]: P.value
|
|
124
131
|
}));
|
|
125
132
|
return {
|
|
126
133
|
// Values
|
|
127
|
-
descriptionId:
|
|
128
|
-
errorId:
|
|
129
|
-
ariaDescribedBy:
|
|
130
|
-
computedAriaLabel:
|
|
134
|
+
descriptionId: f,
|
|
135
|
+
errorId: u,
|
|
136
|
+
ariaDescribedBy: O,
|
|
137
|
+
computedAriaLabel: F,
|
|
131
138
|
conditionalClass: K,
|
|
132
|
-
defaultSlotValue:
|
|
133
|
-
descriptionSlotValue:
|
|
139
|
+
defaultSlotValue: C,
|
|
140
|
+
descriptionSlotValue: A,
|
|
134
141
|
isIndeterminate: E,
|
|
135
|
-
shouldShowError:
|
|
142
|
+
shouldShowError: w,
|
|
136
143
|
shouldShowErrorMessage: I,
|
|
137
|
-
contentSlotAvailable:
|
|
138
|
-
hasContentSlot:
|
|
139
|
-
styleAttrs:
|
|
144
|
+
contentSlotAvailable: H,
|
|
145
|
+
hasContentSlot: T,
|
|
146
|
+
styleAttrs: J,
|
|
140
147
|
// Methods
|
|
141
148
|
hasSlot: o,
|
|
142
149
|
onChange: (r) => {
|
|
143
|
-
|
|
150
|
+
p.value || (m(d.UPDATE, r), m(d.INPUT, r));
|
|
144
151
|
},
|
|
145
|
-
getAriaHidden:
|
|
146
|
-
t:
|
|
152
|
+
getAriaHidden: G,
|
|
153
|
+
t: h
|
|
147
154
|
};
|
|
148
155
|
}
|
|
149
|
-
}),
|
|
156
|
+
}), pe = ["aria-hidden"], be = {
|
|
150
157
|
key: 0,
|
|
151
158
|
class: "b-checkbox__text"
|
|
152
159
|
};
|
|
153
|
-
function me(e,
|
|
154
|
-
const
|
|
155
|
-
return t(),
|
|
160
|
+
function me(e, c, m, l, h, f) {
|
|
161
|
+
const u = b("checkbox-input"), o = b("bento-typography"), p = b("bento-tag"), k = b("error-message");
|
|
162
|
+
return t(), _("label", v({
|
|
156
163
|
class: ["b-checkbox", e.conditionalClass]
|
|
157
164
|
}, e.styleAttrs, {
|
|
158
165
|
"aria-hidden": e.getAriaHidden(e.$attrs)
|
|
159
166
|
}), [
|
|
160
|
-
|
|
167
|
+
Z(u, v(e.$attrs, {
|
|
161
168
|
ref: "input",
|
|
162
169
|
"aria-label": e.computedAriaLabel,
|
|
163
170
|
"aria-describedby": e.ariaDescribedBy,
|
|
@@ -170,7 +177,7 @@ function me(e, u, m, l, f, h) {
|
|
|
170
177
|
readonly: e.readonly,
|
|
171
178
|
"onUpdate:modelValue": e.onChange
|
|
172
179
|
}), null, 16, ["aria-label", "aria-describedby", "aria-required", "disabled", "has-error", "indeterminate", "value", "model-value", "readonly", "onUpdate:modelValue"]),
|
|
173
|
-
e.hasSlot("default") || e.shouldShowErrorMessage ? (t(),
|
|
180
|
+
e.hasSlot("default") || e.shouldShowErrorMessage ? (t(), _("span", be, [
|
|
174
181
|
e.hasSlot("default") ? (t(), n(o, {
|
|
175
182
|
key: 0,
|
|
176
183
|
class: "b-checkbox__label",
|
|
@@ -179,7 +186,7 @@ function me(e, u, m, l, f, h) {
|
|
|
179
186
|
}, {
|
|
180
187
|
default: i(() => [
|
|
181
188
|
ee("span", null, [
|
|
182
|
-
|
|
189
|
+
g(e.$slots, "default", {}, void 0, !0)
|
|
183
190
|
]),
|
|
184
191
|
e.optional ? (t(), n(o, {
|
|
185
192
|
key: 0,
|
|
@@ -187,7 +194,7 @@ function me(e, u, m, l, f, h) {
|
|
|
187
194
|
el: "span"
|
|
188
195
|
}, {
|
|
189
196
|
default: i(() => [
|
|
190
|
-
|
|
197
|
+
M("(" + ae(e.t("optional")) + ")", 1)
|
|
191
198
|
]),
|
|
192
199
|
_: 1
|
|
193
200
|
})) : e.required ? (t(), n(o, {
|
|
@@ -195,12 +202,12 @@ function me(e, u, m, l, f, h) {
|
|
|
195
202
|
class: "b-checkbox__label-requirement",
|
|
196
203
|
el: "span"
|
|
197
204
|
}, {
|
|
198
|
-
default: i(() =>
|
|
199
|
-
|
|
205
|
+
default: i(() => c[0] || (c[0] = [
|
|
206
|
+
M("*")
|
|
200
207
|
])),
|
|
201
208
|
_: 1
|
|
202
209
|
})) : s("", !0),
|
|
203
|
-
e.tag ? (t(), n(
|
|
210
|
+
e.tag ? (t(), n(p, v({
|
|
204
211
|
key: 2,
|
|
205
212
|
class: "b-checkbox__label-tag"
|
|
206
213
|
}, e.tag), null, 16)) : s("", !0)
|
|
@@ -215,11 +222,11 @@ function me(e, u, m, l, f, h) {
|
|
|
215
222
|
variant: "body"
|
|
216
223
|
}, {
|
|
217
224
|
default: i(() => [
|
|
218
|
-
|
|
225
|
+
g(e.$slots, "description", {}, void 0, !0)
|
|
219
226
|
]),
|
|
220
227
|
_: 3
|
|
221
228
|
}, 8, ["id"])) : s("", !0),
|
|
222
|
-
e.shouldShowErrorMessage ? (t(), n(
|
|
229
|
+
e.shouldShowErrorMessage ? (t(), n(k, {
|
|
223
230
|
key: 2,
|
|
224
231
|
id: e.errorId,
|
|
225
232
|
"error-message": e.errorMessage
|
|
@@ -231,16 +238,16 @@ function me(e, u, m, l, f, h) {
|
|
|
231
238
|
variant: "body"
|
|
232
239
|
}, {
|
|
233
240
|
default: i(() => [
|
|
234
|
-
|
|
241
|
+
g(e.$slots, "content", {}, void 0, !0)
|
|
235
242
|
]),
|
|
236
243
|
_: 3
|
|
237
244
|
})) : s("", !0)
|
|
238
245
|
])) : s("", !0)
|
|
239
|
-
], 16,
|
|
246
|
+
], 16, pe);
|
|
240
247
|
}
|
|
241
|
-
const
|
|
248
|
+
const Ve = /* @__PURE__ */ ce(ue, [["render", me], ["__scopeId", "data-v-5824079e"]]);
|
|
242
249
|
export {
|
|
243
|
-
|
|
250
|
+
Ve as B,
|
|
244
251
|
d as a
|
|
245
252
|
};
|
|
246
|
-
//# sourceMappingURL=checkbox.
|
|
253
|
+
//# sourceMappingURL=checkbox.BlAhQl9N.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.C6ATh8f5.js","sources":["../../../vue2/src/components/checkbox/checkbox.types.ts","../../../vue2/src/components/checkbox/checkbox.vue"],"sourcesContent":["import type { BentoTagProps } from '../tag/tag.types';\nimport {\n CheckboxInputState as BentoCheckboxState,\n type CheckboxInputType as BentoCheckboxType,\n type MultiCheckboxInputType as BentoMultiCheckboxType,\n} from '@/internal/checkbox-input/checkbox-input.types';\n\nexport { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType };\n\nexport enum BentoCheckboxEvent {\n UPDATE = 'update:model-value',\n INPUT = 'input',\n}\n\nexport type BentoCheckboxTag = BentoTagProps;\n","<template>\n <label class=\"b-checkbox\" :class=\"conditionalClass\" v-bind=\"styleAttrs\" :aria-hidden=\"getAriaHidden($attrs)\">\n <checkbox-input\n v-bind=\"$attrs\"\n ref=\"input\"\n :aria-label=\"computedAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"required\"\n :disabled=\"disabled\"\n :has-error=\"shouldShowError\"\n :indeterminate=\"isIndeterminate\"\n :value=\"value\"\n :model-value=\"modelValue\"\n :readonly=\"readonly\"\n @update:model-value=\"onChange\"\n />\n <span v-if=\"hasSlot('default') || shouldShowErrorMessage\" class=\"b-checkbox__text\">\n <bento-typography v-if=\"hasSlot('default')\" class=\"b-checkbox__label\" el=\"span\" variant=\"body\">\n <span><slot /></span>\n <bento-typography v-if=\"optional\" class=\"b-checkbox__label-requirement\" el=\"span\"\n >({{ t('optional') }})</bento-typography\n >\n <bento-typography v-else-if=\"required\" class=\"b-checkbox__label-requirement\" el=\"span\"\n >*</bento-typography\n >\n <bento-tag v-if=\"tag\" class=\"b-checkbox__label-tag\" v-bind=\"tag\" />\n </bento-typography>\n <bento-typography\n v-if=\"hasSlot('default') && hasSlot('description')\"\n :id=\"descriptionId\"\n class=\"b-checkbox__description\"\n el=\"span\"\n variant=\"body\"\n >\n <slot name=\"description\"></slot>\n </bento-typography>\n <error-message v-if=\"shouldShowErrorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\n\n <bento-typography v-if=\"contentSlotAvailable\" class=\"b-checkbox__content\" el=\"span\" variant=\"body\">\n <slot name=\"content\"></slot>\n </bento-typography>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\">\n import {\n computed,\n defineComponent,\n type HTMLAttributes,\n onMounted,\n type PropType,\n ref,\n toRefs,\n useAttrs,\n } from 'vue';\n import {\n BentoCheckboxEvent,\n BentoCheckboxState,\n type BentoCheckboxTag,\n type BentoCheckboxType,\n type BentoMultiCheckboxType,\n } from './checkbox.types';\n import { BentoTypography } from '@/components/typography';\n import { CheckboxInput } from '@/components/internal/checkbox-input';\n import { ErrorMessage } from '@/components/internal/error-message';\n import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n import { generateUid } from '@/core/utils/ts';\n import { getSlotText } from '@/utils/ts/get-slot-text';\n import { useI18n } from '@/utils/ts/i18n';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { BentoTag } from '@/components/tag';\n import { type BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n /**\n * Checkboxes are used to make a binary choice about an option.\n * The label tag area is also clickable.\n *\n * @usage\n * import { BentoCheckbox } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoCheckbox },\n * template: `\n * <bento-checkbox>\n * Label text\n * <template #description>Sub label text</template>\n * </bento-checkbox>\n * `,\n * }\n */\n export default defineComponent({\n name: 'bento-checkbox',\n i18n: { messages },\n components: {\n BentoTag,\n BentoTypography,\n CheckboxInput,\n ErrorMessage,\n },\n inheritAttrs: false,\n model: { prop: 'modelValue' },\n props: {\n /**\n * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n */\n /**\n * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.\n */\n ariaLabel: { type: String, default: null },\n\n /**\n * Setting this property to true will disable the checkbox in your form.\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Renders the checkbox in an error state with an error message.\n */\n errorMessage: { type: String, default: null },\n\n /**\n * Setting this property to true will show the checkbox in error state.\n */\n hasError: { type: Boolean, default: false },\n\n /**\n * The :indeterminate CSS pseudo-class represents any form element\n * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n * This property lets you control the input.indeterminate native property.\n */\n indeterminate: { type: Boolean, default: false },\n\n /**\n * When handling a single checkbox with a singular state, use a boolean.\n *\n * When handling multiple checkboxes, use an array of keys.\n * These keys exist as a set \"value\" prop for each checkbox.\n */\n modelValue: {\n type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>,\n default: false,\n },\n\n /**\n * Highlights the checkbox is optional.\n */\n optional: { type: Boolean, default: false },\n\n /**\n * Setting this property to true will set the checkbox to read only state.\n */\n readonly: { type: Boolean, default: false },\n\n /**\n * Highlights the checkbox is required.\n */\n required: { type: Boolean, default: false },\n\n /**\n * Sets the properties of the BentoTag component that is placed next to the label.\n * {@see BentoTag}\n */\n tag: { type: Object as PropType<BentoCheckboxTag>, default: undefined },\n\n /**\n * The value of the component. The DOM API casts this to a string.\n * The browser uses \"on\" as the default value.\n *\n * In the case of multiple checkboxes this value is used as a unique key.\n */\n value: { type: [String, Number], default: null },\n },\n emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n setup(props, { attrs, emit, slots }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const descriptionId = generateUid('description');\n const errorId = generateUid('error');\n const hasSlot = useHasSlot(slots);\n\n const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n const defaultSlotValue = getSlotText(slots)('default');\n const descriptionSlotValue = getSlotText(slots)('description');\n\n useDefaultSlotValidator('bento-checkbox', slots.default, slots.description);\n\n const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n const isChecked = computed(() => {\n if (!isCheckboxGroup.value) {\n return modelValue.value as boolean;\n }\n\n return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value);\n });\n const isIndeterminate = computed(() => indeterminate.value);\n\n const shouldShowError = computed(\n () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage)\n );\n const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n // Content slot logic\n const hasContentSlot = computed(() => hasSlot('content'));\n const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value);\n const contentSlotAvailable = computed(\n () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value\n );\n\n // ARIA fields\n const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>(\n () =>\n `${shouldShowErrorMessage.value ? errorId : ''} ${\n defaultSlotValue && descriptionSlotValue ? descriptionId : ''\n }`.trim() || null\n );\n\n const ariaLabelAttribute = ref(attrs['aria-label']);\n const { ariaLabel } = toRefs(props);\n const checkboxTranslation = ref();\n // Translations used in the script tag need to be inside onMounted otherwise they fail in Vue 3\n onMounted(() => {\n checkboxTranslation.value = t('checkbox');\n });\n // Only add aria-label if no label slot is present\n const computedAriaLabel = computed(\n () =>\n useAriaLabel({\n ariaLabel: ariaLabelAttribute.value as string,\n // TODO: take this line away when the aria-label props is removed\n label: ariaLabel,\n defaultFallback: hasSlot('default')\n ? (getSlotText(slots)('default') as string)\n : checkboxTranslation.value,\n }).value\n );\n const getAriaHidden = (attributes: HTMLAttributes) => attributes?.['aria-hidden'];\n\n const styleAttrs = computed(() => {\n const { style, class: cls } = useAttrs();\n return {\n class: cls as HTMLAttributes['class'],\n style: style as HTMLAttributes['style'],\n };\n });\n\n const conditionalClass = computed(() => ({\n [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value,\n [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value,\n }));\n\n const onChange = (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => {\n if (disabled.value) {\n return;\n }\n emit(BentoCheckboxEvent.UPDATE, newValue);\n emit(BentoCheckboxEvent.INPUT, newValue);\n };\n\n return {\n // Values\n descriptionId,\n errorId,\n ariaDescribedBy,\n computedAriaLabel,\n conditionalClass,\n defaultSlotValue,\n descriptionSlotValue,\n isIndeterminate,\n shouldShowError,\n shouldShowErrorMessage,\n contentSlotAvailable,\n hasContentSlot,\n styleAttrs,\n\n // Methods\n hasSlot,\n onChange,\n getAriaHidden,\n\n t,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox.scss\" />\n"],"names":["BentoCheckboxEvent","BentoCheckboxEvent2","_sfc_main","defineComponent","messages","BentoTag","BentoTypography","CheckboxInput","ErrorMessage","props","attrs","emit","slots","t","useI18n","descriptionId","generateUid","errorId","hasSlot","useHasSlot","disabled","indeterminate","modelValue","readonly","value","toRefs","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","isCheckboxGroup","computed","isChecked","item","isIndeterminate","shouldShowError","shouldShowErrorMessage","hasContentSlot","isCheckedOrIntermediate","contentSlotAvailable","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","checkboxTranslation","onMounted","computedAriaLabel","useAriaLabel","getAriaHidden","attributes","styleAttrs","style","cls","useAttrs","conditionalClass","CheckboxInputState","newValue","_hoisted_1","_ctx","$attrs","createVNode","_component_checkbox_input","mergeProps","required","openBlock","createElementBlock","_hoisted_2","createBlock","_component_bento_typography","createElementVNode","createTextVNode","toDisplayString","createCommentVNode","_component_bento_tag","tag","renderSlot","_component_error_message"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"checkbox.BlAhQl9N.js","sources":["../../../vue2/src/components/checkbox/checkbox.types.ts","../../../vue2/src/components/checkbox/checkbox.vue"],"sourcesContent":["import type { BentoTagProps } from '../tag/tag.types';\nimport {\n CheckboxInputState as BentoCheckboxState,\n type CheckboxInputType as BentoCheckboxType,\n type MultiCheckboxInputType as BentoMultiCheckboxType,\n} from '@/internal/checkbox-input/checkbox-input.types';\n\nexport { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType };\n\nexport enum BentoCheckboxEvent {\n UPDATE = 'update:model-value',\n INPUT = 'input',\n}\n\nexport type BentoCheckboxTag = BentoTagProps;\n","<template>\n <label class=\"b-checkbox\" :class=\"conditionalClass\" v-bind=\"styleAttrs\" :aria-hidden=\"getAriaHidden($attrs)\">\n <checkbox-input\n v-bind=\"$attrs\"\n ref=\"input\"\n :aria-label=\"computedAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"required\"\n :disabled=\"disabled\"\n :has-error=\"shouldShowError\"\n :indeterminate=\"isIndeterminate\"\n :value=\"value\"\n :model-value=\"modelValue\"\n :readonly=\"readonly\"\n @update:model-value=\"onChange\"\n />\n <span v-if=\"hasSlot('default') || shouldShowErrorMessage\" class=\"b-checkbox__text\">\n <bento-typography v-if=\"hasSlot('default')\" class=\"b-checkbox__label\" el=\"span\" variant=\"body\">\n <span><slot /></span>\n <bento-typography v-if=\"optional\" class=\"b-checkbox__label-requirement\" el=\"span\"\n >({{ t('optional') }})</bento-typography\n >\n <bento-typography v-else-if=\"required\" class=\"b-checkbox__label-requirement\" el=\"span\"\n >*</bento-typography\n >\n <bento-tag v-if=\"tag\" class=\"b-checkbox__label-tag\" v-bind=\"tag\" />\n </bento-typography>\n <bento-typography\n v-if=\"hasSlot('default') && hasSlot('description')\"\n :id=\"descriptionId\"\n class=\"b-checkbox__description\"\n el=\"span\"\n variant=\"body\"\n >\n <slot name=\"description\"></slot>\n </bento-typography>\n <error-message v-if=\"shouldShowErrorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\n\n <bento-typography v-if=\"contentSlotAvailable\" class=\"b-checkbox__content\" el=\"span\" variant=\"body\">\n <slot name=\"content\"></slot>\n </bento-typography>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\">\n import {\n computed,\n defineComponent,\n type HTMLAttributes,\n onMounted,\n type PropType,\n ref,\n toRefs,\n useAttrs,\n } from 'vue';\n import {\n BentoCheckboxEvent,\n BentoCheckboxState,\n type BentoCheckboxTag,\n type BentoCheckboxType,\n type BentoMultiCheckboxType,\n } from './checkbox.types';\n import { BentoTypography } from '@/components/typography';\n import { CheckboxInput } from '@/components/internal/checkbox-input';\n import { ErrorMessage } from '@/components/internal/error-message';\n import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n import { generateUid } from '@/core/utils/ts';\n import { getSlotText } from '@/utils/ts/get-slot-text';\n import { useI18n } from '@/utils/ts/i18n';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { BentoTag } from '@/components/tag';\n import { type BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n /**\n * Checkboxes are used to make a binary choice about an option.\n * The label tag area is also clickable.\n *\n * @usage\n * import { BentoCheckbox } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoCheckbox },\n * template: `\n * <bento-checkbox>\n * Label text\n * <template #description>Sub label text</template>\n * </bento-checkbox>\n * `,\n * }\n */\n export default defineComponent({\n name: 'bento-checkbox',\n i18n: { messages },\n components: {\n BentoTag,\n BentoTypography,\n CheckboxInput,\n ErrorMessage,\n },\n inheritAttrs: false,\n model: { prop: 'modelValue' },\n props: {\n /**\n * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n */\n /**\n * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.\n */\n ariaLabel: { type: String, default: null },\n\n /**\n * Setting this property to true will disable the checkbox in your form.\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Renders the checkbox in an error state with an error message.\n */\n errorMessage: { type: String, default: null },\n\n /**\n * Setting this property to true will show the checkbox in error state.\n */\n hasError: { type: Boolean, default: false },\n\n /**\n * The :indeterminate CSS pseudo-class represents any form element\n * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n * This property lets you control the input.indeterminate native property.\n */\n indeterminate: { type: Boolean, default: false },\n\n /**\n * When handling a single checkbox with a singular state, use a boolean.\n *\n * When handling multiple checkboxes, use an array of keys.\n * These keys exist as a set \"value\" prop for each checkbox.\n */\n modelValue: {\n type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>,\n default: false,\n },\n\n /**\n * Highlights the checkbox is optional.\n */\n optional: { type: Boolean, default: false },\n\n /**\n * Setting this property to true will set the checkbox to read only state.\n */\n readonly: { type: Boolean, default: false },\n\n /**\n * Highlights the checkbox is required.\n */\n required: { type: Boolean, default: false },\n\n /**\n * Sets the properties of the BentoTag component that is placed next to the label.\n * {@see BentoTag}\n */\n tag: { type: Object as PropType<BentoCheckboxTag>, default: undefined },\n\n /**\n * The value of the component. The DOM API casts this to a string.\n * The browser uses \"on\" as the default value.\n *\n * In the case of multiple checkboxes this value is used as a unique key.\n */\n value: { type: [String, Number], default: null },\n },\n emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n setup(props, { attrs, emit, slots }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const descriptionId = generateUid('description');\n const errorId = generateUid('error');\n const hasSlot = useHasSlot(slots);\n\n const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n const defaultSlotValue = getSlotText(slots)('default');\n const descriptionSlotValue = getSlotText(slots)('description');\n\n useDefaultSlotValidator('bento-checkbox', slots.default, slots.description);\n\n const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n const isChecked = computed(() => {\n if (!isCheckboxGroup.value) {\n return modelValue.value as boolean;\n }\n\n return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value);\n });\n const isIndeterminate = computed(() => indeterminate.value);\n\n const shouldShowError = computed(\n () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage)\n );\n const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n // Content slot logic\n const hasContentSlot = computed(() => hasSlot('content'));\n const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value);\n const contentSlotAvailable = computed(\n () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value\n );\n\n // ARIA fields\n const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>(\n () =>\n `${shouldShowErrorMessage.value ? errorId : ''} ${\n defaultSlotValue && descriptionSlotValue ? descriptionId : ''\n }`.trim() || null\n );\n\n const ariaLabelAttribute = ref(attrs['aria-label']);\n const { ariaLabel } = toRefs(props);\n const checkboxTranslation = ref();\n // Translations used in the script tag need to be inside onMounted otherwise they fail in Vue 3\n onMounted(() => {\n checkboxTranslation.value = t('checkbox');\n });\n // Only add aria-label if no label slot is present\n const computedAriaLabel = computed(\n () =>\n useAriaLabel({\n ariaLabel: ariaLabelAttribute.value as string,\n // TODO: take this line away when the aria-label props is removed\n label: ariaLabel,\n defaultFallback: hasSlot('default')\n ? (getSlotText(slots)('default') as string)\n : checkboxTranslation.value,\n }).value\n );\n const getAriaHidden = (attributes: HTMLAttributes) => attributes?.['aria-hidden'];\n\n const styleAttrs = computed(() => {\n const { style, class: cls } = useAttrs();\n return {\n class: cls as HTMLAttributes['class'],\n style: style as HTMLAttributes['style'],\n };\n });\n\n const conditionalClass = computed(() => ({\n [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value,\n [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value,\n }));\n\n const onChange = (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => {\n if (disabled.value) {\n return;\n }\n emit(BentoCheckboxEvent.UPDATE, newValue);\n emit(BentoCheckboxEvent.INPUT, newValue);\n };\n\n return {\n // Values\n descriptionId,\n errorId,\n ariaDescribedBy,\n computedAriaLabel,\n conditionalClass,\n defaultSlotValue,\n descriptionSlotValue,\n isIndeterminate,\n shouldShowError,\n shouldShowErrorMessage,\n contentSlotAvailable,\n hasContentSlot,\n styleAttrs,\n\n // Methods\n hasSlot,\n onChange,\n getAriaHidden,\n\n t,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./checkbox.scss\" />\n"],"names":["BentoCheckboxEvent","BentoCheckboxEvent2","_sfc_main","defineComponent","messages","BentoTag","BentoTypography","CheckboxInput","ErrorMessage","props","attrs","emit","slots","t","useI18n","descriptionId","generateUid","errorId","hasSlot","useHasSlot","disabled","indeterminate","modelValue","readonly","value","toRefs","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","isCheckboxGroup","computed","isChecked","item","isIndeterminate","shouldShowError","shouldShowErrorMessage","hasContentSlot","isCheckedOrIntermediate","contentSlotAvailable","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","checkboxTranslation","onMounted","computedAriaLabel","useAriaLabel","getAriaHidden","attributes","styleAttrs","style","cls","useAttrs","conditionalClass","CheckboxInputState","newValue","_hoisted_1","_ctx","$attrs","createVNode","_component_checkbox_input","mergeProps","required","openBlock","createElementBlock","_hoisted_2","createBlock","_component_bento_typography","createElementVNode","createTextVNode","toDisplayString","createCommentVNode","_component_bento_tag","tag","renderSlot","_component_error_message"],"mappings":"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"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { defineComponent as v, computed as t, openBlock as _, createBlock as b, unref as o, normalizeClass as h, withCtx as a, createVNode as n, createTextVNode as B, toDisplayString as y } from "vue";
|
|
2
|
+
import { B as C } from "./base-button.CvHl36Ue.js";
|
|
3
|
+
import { B as g } from "./typography.B3J6_tYk.js";
|
|
4
|
+
import { C as R } from "./cross-small.Bjq2Gqvh.js";
|
|
5
|
+
import { u as k } from "./index.B875RXHM.js";
|
|
6
|
+
import { t as x } from "./truncate.DmCXQmeb.js";
|
|
7
|
+
import { _ as E } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
8
|
+
import "../assets/chip.css";
|
|
9
|
+
const s = {
|
|
10
|
+
"de-DE": { remove: "Entfernen" },
|
|
11
|
+
"en-GB": { remove: "Remove" },
|
|
12
|
+
"en-US": { remove: "Remove" },
|
|
13
|
+
"es-ES": { remove: "Eliminar" },
|
|
14
|
+
"es-MX": { remove: "Eliminar" },
|
|
15
|
+
"fr-FR": { remove: "Supprimer" },
|
|
16
|
+
"it-IT": { remove: "Rimuovi" },
|
|
17
|
+
"ja-JP": { remove: "削除" },
|
|
18
|
+
"pt-BR": { remove: "Retirar" },
|
|
19
|
+
"zh-CN": { remove: "移除" }
|
|
20
|
+
}, I = { i18n: { messages: s } }, L = /* @__PURE__ */ v({
|
|
21
|
+
...I,
|
|
22
|
+
__name: "chip",
|
|
23
|
+
props: {
|
|
24
|
+
label: {},
|
|
25
|
+
disabled: { type: Boolean, default: !1 },
|
|
26
|
+
readonly: { type: Boolean, default: !1 },
|
|
27
|
+
error: { type: Boolean, default: !1 },
|
|
28
|
+
condensed: { type: Boolean, default: !1 },
|
|
29
|
+
characterLimit: { default: null }
|
|
30
|
+
},
|
|
31
|
+
emits: ["click"],
|
|
32
|
+
setup(i, { emit: l }) {
|
|
33
|
+
const e = i, c = l, { t: m } = k({ messages: s }), d = t(
|
|
34
|
+
() => e.characterLimit ? x(e.label, e.characterLimit) : e.label
|
|
35
|
+
), p = t(
|
|
36
|
+
() => e.condensed ? "caption" : "body"
|
|
37
|
+
), u = t(() => ({
|
|
38
|
+
"b-chip--condensed": e.condensed,
|
|
39
|
+
"b-chip--readonly": e.readonly && !e.disabled,
|
|
40
|
+
"b-chip--error": e.error
|
|
41
|
+
}));
|
|
42
|
+
return (f, r) => (_(), b(o(C), {
|
|
43
|
+
class: h(["b-chip", u.value]),
|
|
44
|
+
disabled: f.disabled,
|
|
45
|
+
onClick: r[0] || (r[0] = (S) => c("click"))
|
|
46
|
+
}, {
|
|
47
|
+
iconRight: a(() => [
|
|
48
|
+
n(o(R), {
|
|
49
|
+
"svg-title": o(m)("remove"),
|
|
50
|
+
class: "b-chip__icon"
|
|
51
|
+
}, null, 8, ["svg-title"])
|
|
52
|
+
]),
|
|
53
|
+
default: a(() => [
|
|
54
|
+
n(o(g), {
|
|
55
|
+
el: "span",
|
|
56
|
+
variant: p.value,
|
|
57
|
+
class: "b-chip__text"
|
|
58
|
+
}, {
|
|
59
|
+
default: a(() => [
|
|
60
|
+
B(y(d.value), 1)
|
|
61
|
+
]),
|
|
62
|
+
_: 1
|
|
63
|
+
}, 8, ["variant"])
|
|
64
|
+
]),
|
|
65
|
+
_: 1
|
|
66
|
+
}, 8, ["disabled", "class"]));
|
|
67
|
+
}
|
|
68
|
+
}), F = /* @__PURE__ */ E(L, [["__scopeId", "data-v-c5b0d9dd"]]);
|
|
69
|
+
export {
|
|
70
|
+
F as B
|
|
71
|
+
};
|
|
72
|
+
//# sourceMappingURL=chip.DFldnqfz.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.
|
|
1
|
+
{"version":3,"file":"chip.DFldnqfz.js","sources":["../../../vue2/src/components/chip/chip.vue"],"sourcesContent":["<template>\n <base-button class=\"b-chip\" :disabled=\"disabled\" :class=\"conditionalClasses\" @click=\"emit('click')\">\n <bento-typography el=\"span\" :variant=\"computedTypographyVariant\" class=\"b-chip__text\">\n {{ computedLabel }}\n </bento-typography>\n <template #iconRight><cross-small-icon :svg-title=\"t('remove')\" class=\"b-chip__icon\" /></template>\n </base-button>\n</template>\n\n<script setup lang=\"ts\">\n import { BaseButton } from '@/components/internal/base-button';\n import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n import CrossSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n\n import { useI18n } from '@/utils/ts/i18n';\n import { truncate } from '@/utils/ts/truncate';\n\n import type { BentoChipProps } from './chip.types';\n\n import messages from './messages.json';\n import { computed } from 'vue';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = withDefaults(defineProps<BentoChipProps>(), {\n disabled: false,\n readonly: false,\n error: false,\n condensed: false,\n characterLimit: null,\n });\n\n const emit = defineEmits<{\n /**\n * Emits when chip is clicked\n */\n (e: 'click'): void;\n }>();\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const computedLabel = computed(() =>\n props.characterLimit ? truncate(props.label, props.characterLimit) : props.label\n );\n\n const computedTypographyVariant = computed<`${BentoTypographyVariant}`>(() =>\n props.condensed ? 'caption' : 'body'\n );\n\n const conditionalClasses = computed(() => ({\n 'b-chip--condensed': props.condensed,\n 'b-chip--readonly': props.readonly && !props.disabled,\n 'b-chip--error': props.error,\n }));\n</script>\n\n<script lang=\"ts\">\n /**\n * Chip is a dismissible tag-like component that can be used to display selected items, which may need to be removed by the user.\n *\n * @example\n * import { BentoChip } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoChip },\n * template: `\n * <bento-chip\n * label=\"Label\"\n * :character-limit=\"20\"\n * condensed\n * @click=\"removeChip()\"\n *\n * />\n * `\n * }\n */\n export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./chip.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","useI18n","computedLabel","computed","truncate","computedTypographyVariant","conditionalClasses"],"mappings":";;;;;;;;;;;;;;;;;;;GA4EIA,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;AApDA,UAAAC,IAAAC,GAQAC,IAAAC,GAOA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAEAO,IAAAC;AAAA,MAAsB,MAAAP,EAAA,iBAAAQ,EAAAR,EAAA,OAAAA,EAAA,cAAA,IAAAA,EAAA;AAAA,IACyD,GAG/ES,IAAAF;AAAA,MAAkC,MAAAP,EAAA,YAAA,YAAA;AAAA,IACA,GAGlCU,IAAAH,EAAA,OAAA;AAAA,MAA2C,qBAAAP,EAAA;AAAA,MACZ,oBAAAA,EAAA,YAAA,CAAAA,EAAA;AAAA,MACkB,iBAAAA,EAAA;AAAA,IACtB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|