@adyen/bento-mcp 0.1.1 → 0.1.3

package/dist/assets/components/internal/fixed-scroller/fixed-scroller.vue

@@ -1 +1 @@
-<template> <div ref="fixedScrollerRef" class="b-fixed-scroller"> <div class="b-fixed-scroller__container"> <div ref="contentRef" class="b-fixed-scroller__content" :style="{ transform: `translateX(${offset}px)`, paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null, }" > <slot></slot> </div> </div> <div v-if="shouldShowLeftButton" ref="leftButtonRef" class="b-fixed-scroller__left"> <bento-button variant="secondary" :aria-label="t('scrollLeft')" :condensed="condensed" @click="scrollLeft"> <template #iconLeft> <chevron-left-icon svg-title="checked" aria-hidden="true" /> </template> </bento-button> </div> <div v-if="shouldShowRightButton" ref="rightButtonRef" class="b-fixed-scroller__right"> <bento-button variant="secondary" :aria-label="t('scrollRight')" :condensed="condensed" @click="scrollRight" > <template #iconLeft> <chevron-right-icon svg-title="checked" aria-hidden="true" /> </template> </bento-button> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { BentoButton } from '@/components/button'; import { useFixedScroller } from './composables'; import { useI18n } from '@/utils/ts/i18n'; import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left'; import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const contentRef = ref(null); const fixedScrollerRef = ref(null); const leftButtonRef = ref(null); const rightButtonRef = ref(null); defineProps({ /** * Applies the condensed style to the buttons */ condensed: { type: Boolean, default: false }, /** * Padding to be applied to the top of the scroller container */ extraPaddingTop: { type: Number, default: 0 }, }); const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({ contentRef, containerRef: fixedScrollerRef, leftButtonRef, rightButtonRef, }); </script> <script lang="ts"> /** * Allows to horizontally scroll content by one view at a time. * * @example * import { FixedScroller } from '@/internal'; * * export default { * components: { FixedScroller }, * template: ` * <fixed-scroller> * <div style="display: flex; gap: 8px;"> * {{ Content here }} * </div> * </fixed-scroller> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./fixed-scroller.scss" /> 
+<template> <div ref="fixedScrollerRef" class="b-fixed-scroller"> <div class="b-fixed-scroller__container"> <div ref="contentRef" class="b-fixed-scroller__content" :style="{ transform: `translateX(${offset}px)`, paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null, }" > <slot></slot> </div> </div> <div v-if="shouldShowLeftButton" ref="leftButtonRef" class="b-fixed-scroller__left b-fixed-scroller__button" :class="buttonConditionalClasses" > <bento-button variant="secondary" :aria-label="t('scrollLeft')" :condensed="condensed" @click="scrollLeft"> <template #iconLeft> <chevron-left-icon svg-title="checked" aria-hidden="true" /> </template> </bento-button> </div> <div v-if="shouldShowRightButton" ref="rightButtonRef" class="b-fixed-scroller__right b-fixed-scroller__button" :class="buttonConditionalClasses" > <bento-button variant="secondary" :aria-label="t('scrollRight')" :condensed="condensed" @click="scrollRight" > <template #iconLeft> <chevron-right-icon svg-title="checked" aria-hidden="true" /> </template> </bento-button> </div> </div> </template> <script setup lang="ts"> import { computed, ref } from 'vue'; import { BentoButton } from '@/components/button'; import { useFixedScroller } from './composables'; import { useI18n } from '@/utils/ts/i18n'; import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left'; import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const contentRef = ref(null); const fixedScrollerRef = ref(null); const leftButtonRef = ref(null); const rightButtonRef = ref(null); const props = defineProps({ /** * Applies the condensed style to the buttons */ condensed: { type: Boolean, default: false }, /** * Padding to be applied to the top of the scroller container */ extraPaddingTop: { type: Number, default: 0 }, /** * Padding to be applied to the top of the scroller container */ centered: { type: Boolean, default: false }, }); const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({ contentRef, containerRef: fixedScrollerRef, leftButtonRef, rightButtonRef, }); const buttonConditionalClasses = computed(() => ({ 'b-fixed-scroller__button--centered': props.centered, })); </script> <script lang="ts"> /** * Allows to horizontally scroll content by one view at a time. * * @example * import { FixedScroller } from '@/internal'; * * export default { * components: { FixedScroller }, * template: ` * <fixed-scroller> * <div style="display: flex; gap: 8px;"> * {{ Content here }} * </div> * </fixed-scroller> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./fixed-scroller.scss" /> 

package/dist/assets/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/listbox-multi-select-options.vue

@@ -1 +1 @@
-<template> <div> <div v-for="option in items" :key="`selected-${option.value}`"> <template v-if="searching && isMultiLevel"> <bento-listbox-option class="b-listbox-multi-select-options" :class="conditionalClasses" :disabled="isOptionDisabled ? isOptionDisabled(option) : null" :tabindex="computedTabindex(option.value)" :aria-selected="`${isOptionSelected(option)}`" :aria-checked="`${isOptionSelected(option)}`" :aria-disabled="isOptionDisabled ? isOptionDisabled(option) : null" :role="$attrs['role']" @click="toggleSearchOption(option)" @enter-pressed="toggleSearchOption(option)" @space-pressed.prevent="toggleSearchOption(option)" > <decorative-checkbox :disabled="isOptionDisabled ? isOptionDisabled(option) : null" :checked="isOptionSelected(option)" /> <slot v-bind="option"> <span class="b-listbox-multi-select__option-text"> <bento-typography el="span">{{ option.label }}</bento-typography> <bento-typography v-if="shouldShowDescription(option)" class="b-listbox-multi-select__option-description" el="span" > {{ option.description }} </bento-typography> </span> </slot> </bento-listbox-option> </template> <template v-else> <!-- Category --> <template v-if="option.items"> <listbox-multi-select-category :category="option" :static-categories="staticCategories" :is-option-disabled="isOptionDisabled" :selected-items-list="selectedItemsList" :tabindex="computedTabindex(option.value)" @select-category="$emit(ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, option)" @unselect-category="$emit(ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, option)" @toggle-category-visibility=" $emit(ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, $event) " > <listbox-multi-select-options category-items :items="option.items" :is-option-disabled="isOptionDisabled" :items-index="itemsIndex" :focused-index="focusedIndex" :is-multi-level="isMultiLevel" :static-categories="staticCategories" :selected-items-list="selectedItemsList" :searching="searching" :role="$attrs['role']" @toggle-checkbox-selection="value => toggleCheckboxSelection(value)" /> </listbox-multi-select-category> </template> <!-- Option --> <bento-listbox-option v-else class="b-listbox-multi-select-options" :class="conditionalClasses" :disabled="isOptionDisabled ? isOptionDisabled(option) : null" :tabindex="computedTabindex(option.value)" :aria-selected="`${isOptionSelected(option)}`" :aria-checked="`${isOptionSelected(option)}`" :aria-disabled="isOptionDisabled ? isOptionDisabled(option) : null" :role="$attrs['role']" @click="toggleCheckboxSelection(option)" @enter-pressed="toggleCheckboxSelection(option)" @space-pressed.prevent="toggleCheckboxSelection(option)" > <decorative-checkbox :disabled="isOptionDisabled ? isOptionDisabled(option) : null" :checked="isOptionSelected(option)" /> <slot v-bind="option"> <span class="b-listbox-multi-select__option-text"> <bento-typography el="span">{{ option.label }}</bento-typography> <bento-typography v-if="shouldShowDescription(option)" class="b-listbox-multi-select__option-description" el="span" > {{ option.description }} </bento-typography> </span> </slot> </bento-listbox-option> </template> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import { BentoListboxOption } from '../../../listbox-option'; import { BentoTypography } from '@/components/typography'; import { ListboxMultiSelectCategory } from './components/listbox-multi-select-category'; import { DecorativeCheckbox } from '@/internal/decorative-checkbox'; import { BentoListboxEvent, type BentoListboxIsOptionDisabled, type BentoListboxOptionItem, type BentoListboxOptions, type BentoListboxValue, } from '@/types/listbox'; import { ListboxMultiSelectOptionsEvent } from './listbox-multi-select-options.types'; /** * Listbox multi-select options list * * @example * import { ListboxMultiSelectOptions } from './components/listbox-multi-select-options'; * * export default { * components: { ListboxMultiSelect }, * template: ` * <listbox-multi-select * :items="[{ label: 'Option 1', value: 'option-1' }]" * :selected-values="['option-1']" * /> * ` * } */ export default defineComponent({ name: 'listbox-multi-select-options', components: { BentoListboxOption, BentoTypography, ListboxMultiSelectCategory, DecorativeCheckbox, }, inheritAttrs: false, props: { /** * Indicates if the items listed are inside a category * so they can be padded to right by one level in recursion. * Items of categories are automatically defined as "categoryItems" */ categoryItems: { type: Boolean, default: false }, /** * Current focused option index */ focusedIndex: { type: Number, default: 0 }, /** * Function that allows the options to be disabled * * @type {BentoListboxIsOptionDisabled} * @param {BentoListboxOptionItem} option - listbox option object * @param {string} option.label - Option's label text * @param {string|number} option.value - Option's value * @param {unknown} option.data - Option's extra data to be passed to the default slot */ isOptionDisabled: { type: Function as PropType<BentoListboxIsOptionDisabled>, default: () => false, }, /** * The option elements to populate the listbox with. * It must be an array of {@see BentoListboxOptionItem }. * * @property {string} value.label - Text to be displayed in the option * @property {string,number} value.value - Value of the option */ items: { type: Array as PropType<BentoListboxOptions>, required: true, }, /** * Indicates if the elements options are inside a multi-level category */ isMultiLevel: { type: Boolean, default: false }, /** * Flag that indicates that an external search it's being made * to filter out the items inside the the multi-select listbox * * If enabled, hides the "Select all" checkbox in "multiple" mode. */ searching: { type: Boolean, default: false }, /** * List of selected items. * Providing an empty array will select no options. */ selectedItemsList: { type: Array as PropType<Array<BentoListboxValue>>, default: () => [], }, /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories: { type: Boolean, default: false }, /** * Object with the index of each item. */ itemsIndex: { type: Object as PropType<Record<string, number>>, default: () => ({}), }, }, emits: [ ListboxMultiSelectOptionsEvent.TOGGLE_CHECKBOX_SELECTION, ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, ], setup(props, { emit }) { const toggleCheckboxSelection = (option: BentoListboxOptionItem) => { if (props.isOptionDisabled(option)) { return; } emit(ListboxMultiSelectOptionsEvent.TOGGLE_CHECKBOX_SELECTION, option); }; const isCategory = (option: BentoListboxOptionItem) => !!option.items; const shouldShowDescription = (option: BentoListboxOptionItem) => { const isSearchingMultiLevel = props.isMultiLevel && props.searching; return option.description && (!props.isMultiLevel || isSearchingMultiLevel); }; const isOptionSelected = option => { if (option.items) { return !!option.items.find(item => props.selectedItemsList.includes(item.value)); } return props.selectedItemsList.includes(option.value); }; const toggleSearchOption = option => { if (isCategory(option)) { const event = isOptionSelected(option) ? ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY : ListboxMultiSelectOptionsEvent.SELECT_CATEGORY; emit(event, option); } else { toggleCheckboxSelection(option); } }; const conditionalClasses = computed(() => ({ 'b-listbox-multi-select-options__static-category-option': props.staticCategories, 'b-listbox-multi-select-options__category-option': props.categoryItems, })); const computedTabindex = value => (props.itemsIndex[value] === props.focusedIndex ? 0 : -1); return { // Values conditionalClasses, // Methods isOptionSelected, shouldShowDescription, toggleCheckboxSelection, toggleSearchOption, computedTabindex, // Enums BentoListboxEvent, ListboxMultiSelectOptionsEvent, }; }, }); </script> <style lang="scss" scoped src="./listbox-multi-select-options.scss" /> 
+<template> <div> <div v-for="option in items" :key="`selected-${option.value}`"> <template v-if="searching && isMultiLevel"> <bento-listbox-option class="b-listbox-multi-select-options" :class="conditionalClasses" :disabled="isOptionDisabled ? isOptionDisabled(option) : null" :tabindex="computedTabindex(option.value)" :aria-selected="`${isOptionSelected(option)}`" :aria-checked="`${isOptionSelected(option)}`" :aria-disabled="isOptionDisabled ? isOptionDisabled(option) : null" :role="$attrs['role'] || 'option'" @click="toggleSearchOption(option)" @enter-pressed="toggleSearchOption(option)" @space-pressed.prevent="toggleSearchOption(option)" > <decorative-checkbox :disabled="isOptionDisabled ? isOptionDisabled(option) : null" :checked="isOptionSelected(option)" /> <slot v-bind="option"> <span class="b-listbox-multi-select__option-text"> <bento-typography el="span">{{ option.label }}</bento-typography> <bento-typography v-if="shouldShowDescription(option)" class="b-listbox-multi-select__option-description" el="span" > {{ option.description }} </bento-typography> </span> </slot> </bento-listbox-option> </template> <template v-else> <!-- Category --> <template v-if="option.items"> <listbox-multi-select-category :category="option" :static-categories="staticCategories" :is-option-disabled="isOptionDisabled" :selected-items-list="selectedItemsList" :tabindex="computedTabindex(option.value)" @select-category="$emit(ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, option)" @unselect-category="$emit(ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, option)" @toggle-category-visibility=" $emit(ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, $event) " > <listbox-multi-select-options category-items :items="option.items" :is-option-disabled="isOptionDisabled" :items-index="itemsIndex" :focused-index="focusedIndex" :is-multi-level="isMultiLevel" :static-categories="staticCategories" :selected-items-list="selectedItemsList" :searching="searching" :role="$attrs['role'] || 'option'" @toggle-checkbox-selection="value => toggleCheckboxSelection(value)" /> </listbox-multi-select-category> </template> <!-- Option --> <bento-listbox-option v-else class="b-listbox-multi-select-options" :class="conditionalClasses" :disabled="isOptionDisabled ? isOptionDisabled(option) : null" :tabindex="computedTabindex(option.value)" :aria-selected="`${isOptionSelected(option)}`" :aria-checked="`${isOptionSelected(option)}`" :aria-disabled="isOptionDisabled ? isOptionDisabled(option) : null" :role="$attrs['role'] || 'option'" @click="toggleCheckboxSelection(option)" @enter-pressed="toggleCheckboxSelection(option)" @space-pressed.prevent="toggleCheckboxSelection(option)" > <decorative-checkbox :disabled="isOptionDisabled ? isOptionDisabled(option) : null" :checked="isOptionSelected(option)" /> <slot v-bind="option"> <span class="b-listbox-multi-select__option-text"> <bento-typography el="span">{{ option.label }}</bento-typography> <bento-typography v-if="shouldShowDescription(option)" class="b-listbox-multi-select__option-description" el="span" > {{ option.description }} </bento-typography> </span> </slot> </bento-listbox-option> </template> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import { BentoListboxOption } from '../../../listbox-option'; import { BentoTypography } from '@/components/typography'; import { ListboxMultiSelectCategory } from './components/listbox-multi-select-category'; import { DecorativeCheckbox } from '@/internal/decorative-checkbox'; import { BentoListboxEvent, type BentoListboxIsOptionDisabled, type BentoListboxOptionItem, type BentoListboxOptions, type BentoListboxValue, } from '@/types/listbox'; import { ListboxMultiSelectOptionsEvent } from './listbox-multi-select-options.types'; /** * Listbox multi-select options list * * @example * import { ListboxMultiSelectOptions } from './components/listbox-multi-select-options'; * * export default { * components: { ListboxMultiSelect }, * template: ` * <listbox-multi-select * :items="[{ label: 'Option 1', value: 'option-1' }]" * :selected-values="['option-1']" * /> * ` * } */ export default defineComponent({ name: 'listbox-multi-select-options', components: { BentoListboxOption, BentoTypography, ListboxMultiSelectCategory, DecorativeCheckbox, }, inheritAttrs: false, props: { /** * Indicates if the items listed are inside a category * so they can be padded to right by one level in recursion. * Items of categories are automatically defined as "categoryItems" */ categoryItems: { type: Boolean, default: false }, /** * Current focused option index */ focusedIndex: { type: Number, default: 0 }, /** * Function that allows the options to be disabled * * @type {BentoListboxIsOptionDisabled} * @param {BentoListboxOptionItem} option - listbox option object * @param {string} option.label - Option's label text * @param {string|number} option.value - Option's value * @param {unknown} option.data - Option's extra data to be passed to the default slot */ isOptionDisabled: { type: Function as PropType<BentoListboxIsOptionDisabled>, default: () => false, }, /** * The option elements to populate the listbox with. * It must be an array of {@see BentoListboxOptionItem }. * * @property {string} value.label - Text to be displayed in the option * @property {string,number} value.value - Value of the option */ items: { type: Array as PropType<BentoListboxOptions>, required: true, }, /** * Indicates if the elements options are inside a multi-level category */ isMultiLevel: { type: Boolean, default: false }, /** * Flag that indicates that an external search it's being made * to filter out the items inside the the multi-select listbox * * If enabled, hides the "Select all" checkbox in "multiple" mode. */ searching: { type: Boolean, default: false }, /** * List of selected items. * Providing an empty array will select no options. */ selectedItemsList: { type: Array as PropType<Array<BentoListboxValue>>, default: () => [], }, /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories: { type: Boolean, default: false }, /** * Object with the index of each item. */ itemsIndex: { type: Object as PropType<Record<string, number>>, default: () => ({}), }, }, emits: [ ListboxMultiSelectOptionsEvent.TOGGLE_CHECKBOX_SELECTION, ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, ], setup(props, { emit }) { const toggleCheckboxSelection = (option: BentoListboxOptionItem) => { if (props.isOptionDisabled(option)) { return; } emit(ListboxMultiSelectOptionsEvent.TOGGLE_CHECKBOX_SELECTION, option); }; const isCategory = (option: BentoListboxOptionItem) => !!option.items; const shouldShowDescription = (option: BentoListboxOptionItem) => { const isSearchingMultiLevel = props.isMultiLevel && props.searching; return option.description && (!props.isMultiLevel || isSearchingMultiLevel); }; const isOptionSelected = option => { if (option.items) { return !!option.items.find(item => props.selectedItemsList.includes(item.value)); } return props.selectedItemsList.includes(option.value); }; const toggleSearchOption = option => { if (isCategory(option)) { const event = isOptionSelected(option) ? ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY : ListboxMultiSelectOptionsEvent.SELECT_CATEGORY; emit(event, option); } else { toggleCheckboxSelection(option); } }; const conditionalClasses = computed(() => ({ 'b-listbox-multi-select-options__static-category-option': props.staticCategories, 'b-listbox-multi-select-options__category-option': props.categoryItems, })); const computedTabindex = value => (props.itemsIndex[value] === props.focusedIndex ? 0 : -1); return { // Values conditionalClasses, // Methods isOptionSelected, shouldShowDescription, toggleCheckboxSelection, toggleSearchOption, computedTabindex, // Enums BentoListboxEvent, ListboxMultiSelectOptionsEvent, }; }, }); </script> <style lang="scss" scoped src="./listbox-multi-select-options.scss" /> 

package/dist/assets/components/modal/components/base-modal/base-modal.vue

@@ -1 +1 @@
-<template> <div class="b-modal-base"> <dialog ref="modal" :role="modalRole" :aria-label="computedAriaLabel" :style="{ height: height }" class="b-modal-base__container" :class="modalConditionalClasses" :open="initiallyOpen" @animationend="closeModalAfterAnimation" @keydown.esc="internalModalActionClose" > <bento-focus-trap v-if="isOpen || initiallyOpen" :id="modalId" v-bento-click-outside-directive="closeModalOnClickOutside" > <bento-button v-if="showCloseButton" class="b-modal-base__close-button" variant="tertiary" type="button" :style="customPaddingStyles" @click="internalModalActionClose" > <cross-icon :svg-title="t('close')" /> </bento-button> <template v-if="props.activePage"> <slot /> </template> <bento-modal-page v-else :with-column-layout="withColumnLayout" :size="size" :custom-padding="customPadding" :columns-size="columnsSize" > <template v-if="hasSlot('default')" #default> <slot></slot> </template> <template v-if="hasSlot('content-col-1')" #content-col-1 ><slot name="content-col-1"></slot ></template> <template v-if="hasSlot('content-col-2')" #content-col-2 ><slot name="content-col-2"></slot ></template> <template v-if="hasSlot('content')" #content><slot name="content"></slot></template> <template v-if="hasSlot('actions')" #actions><slot name="actions"></slot></template> </bento-modal-page> </bento-focus-trap> </dialog> </div> </template> <script setup lang="ts"> import { computed, defineComponent, onMounted, type PropType, provide, ref, toRefs, useAttrs, useSlots, watch, } from 'vue'; import { BentoModalColumnLayoutVariant, type BentoModalConfigData, BentoModalRole, BentoModalSize, } from '@/components/modal/modal.types'; import { BentoButton, type BentoButtonActionsList } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import { useHasSlot } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys'; import { generateUid } from '@/core/utils/ts'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import messages from './messages.json'; import { BentoModalPage } from '@/components/modal/components/modal-page'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; type MessageSchema = (typeof messages)['en-US']; const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const attrs = useAttrs(); const hasSlot = useHasSlot(slots); const modal = ref<HTMLDialogElement>(null); const isClosing = ref(false); const modalId = generateUid('modal'); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emitted when the modal is closed. */ (e: 'close-modal'); }>(); const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * But you may change the color of 1-st action to red with 'critial' key * Not more than 3 action buttons can be provided * Or 2 action buttons and 1 Label for them * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary',2 * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same id as the BentoModalPage to be displayed */ activePage: { type: String, default: null, }, /** * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column. */ columnsSize: { type: String as PropType<BentoModalColumnLayoutVariant>, default: BentoModalColumnLayoutVariant.SMALLER, }, /** * If provided, manages the padding of the whole modal container */ customPadding: { type: String, default: null }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false }, /** * Hides a cross icon on the right side of the title */ hideCloseButton: { type: Boolean, required: true }, /** * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility. */ initiallyOpen: { type: Boolean, default: false }, /** * If set to true, it allows the modal to be closed by clicking outside of it */ isDismissible: { type: Boolean, required: true }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, required: true }, /** * Defines whether the modal will be an alert modal */ modalRole: { type: String, default: BentoModalRole.DIALOG }, /** * Sets the width of the modal */ size: { type: String as PropType<BentoModalSize | `${BentoModalSize}`>, default: BentoModalSize.SMALL, }, /** * If provided, renders the modal's content in a two-column layout an wth dividers separating its content */ withColumnLayout: { type: Boolean, default: false }, }); const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton); const pageCustomPadding = ref(props.customPadding); const customPaddingStyles = computed(() => { if (!pageCustomPadding.value) { return {}; } return { top: pageCustomPadding.value, right: pageCustomPadding.value }; }); const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)); const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE); const openModal = (): void => { modal.value.showModal(); }; const emitCloseEvent = (): void => { emit('close-modal'); }; // Handle closing and closing animation for dialog element const closeModalAfterAnimation = () => { if (isClosing.value) { modal.value.close(); if (previousPages.value[0]) { emit('update:active-page', previousPages.value[0]); } previousPages.value = []; isClosing.value = false; emitCloseEvent(); } }; const startCloseModalAnimation = () => { if (!modal.value.open) { return; } isClosing.value = true; }; /** * If the user has pressed escape, clicked outside or clicked the close icon. * Needs to be called from outside, following the "dialog.close()" pattern, * when the closing event is triggered outside of the "base-modal" * component (e.g. from a closing action). */ const internalModalActionClose = (event?: Event) => { if (event) { event.preventDefault(); } if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) { return; } startCloseModalAnimation(); }; const closeModalOnClickOutside = () => { if (props.isDismissible) { internalModalActionClose(); } }; const modalConditionalClasses = computed(() => ({ [`b-modal-base__container--${props.size}`]: props.size, 'b-modal-base__container--hide': isClosing.value, 'b-modal-base__container--column-layout': hasColumnLayout.value, 'b-modal-base__container--animation': isAnimationActive.value, })); watch( () => [props.isOpen, modal.value], ([newIsOpen, newModalValue], [, oldModalValue]): void => { if (!newModalValue) { return; } const isFirstMutation = !oldModalValue; if (newIsOpen) { openModal(); // add the first page to the array when the modal opens if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (!isFirstMutation) { startCloseModalAnimation(); } } ); // If the first button is a loading button then close the modal have 0.5 seconds // if the state is changed to 'success'. watch( () => props.actions, () => { if (props.actions?.[0]?.state === 'success') { setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME); } }, { deep: true } ); onMounted(() => { if (props.isOpen && modal.value) { openModal(); } }); /** * Expose methods through its 'ref' */ defineExpose({ internalModalActionClose, }); // Let's Children components know they are inside a Modal (dialog element) provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId); // Modal pagination const { activePage, isOpen, size } = toRefs(props); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const pages = ref<Array<string>>([]); const previousPages = ref([]); const updatePage = page => emit('update:active-page', page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { if (pageId) { pages.value.push(pageId); } return { unregisterPage: unregisterPage(pageId) }; }; const height = ref(''); const isAnimationActive = ref(false); provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size, }); provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); </script> <script lang="ts"> /** * Dialog container. It creates a dialog HTML element for the modal to use. * * @example * import BaseModal from './components/base-modal/base-modal.vue'; * * export default { * components: { BaseModal }, * template: ` * <base-modal * :hide-close-button="true" * :is-dismissible="false" * :is-open="isOpen" * @close-modal="isOpen = false" * > * <template #content-col-1> * // Content on the left side column * </template> * * <template #content-col-2> * // Content on the right side column * </template> * * <template v-if="actions" #actions> * <footer-actions :actions="actions" /> * </template> * </base-modal> * `, * setup() { * const isOpen = ref(true) * const footerActions = [{ * title: 'Primary action', * event: () => { ... } * }] * } * } */ export default defineComponent({ i18n: { messages }, name: 'base-modal', }); </script> <style lang="scss" scoped src="./base-modal.scss" /> 
+<template> <div class="b-modal-base"> <dialog ref="modal" :role="modalRole" :aria-label="computedAriaLabel" :style="{ height: height }" class="b-modal-base__container" :class="modalConditionalClasses" :open="initiallyOpen" @animationend="closeModalAfterAnimation" @keydown.esc="internalModalActionClose" > <bento-focus-trap v-if="isOpen || initiallyOpen" :id="modalId" v-bento-click-outside-directive="closeModalOnClickOutside" > <bento-button v-if="showCloseButton" class="b-modal-base__close-button" variant="tertiary" type="button" :style="customPaddingStyles" @click="internalModalActionClose" > <cross-icon :svg-title="t('close')" /> </bento-button> <template v-if="props.activePage"> <slot /> </template> <bento-modal-page v-else :with-column-layout="withColumnLayout" :size="size" :custom-padding="customPadding" :columns-size="columnsSize" > <template v-if="hasSlot('default')" #default> <slot></slot> </template> <template v-if="hasSlot('content-col-1')" #content-col-1 ><slot name="content-col-1"></slot ></template> <template v-if="hasSlot('content-col-2')" #content-col-2 ><slot name="content-col-2"></slot ></template> <template v-if="hasSlot('content')" #content><slot name="content"></slot></template> <template v-if="hasSlot('actions')" #actions><slot name="actions"></slot></template> </bento-modal-page> </bento-focus-trap> </dialog> </div> </template> <script setup lang="ts"> import { computed, defineComponent, onMounted, type PropType, provide, ref, toRefs, useAttrs, useSlots, watch, } from 'vue'; import { BentoModalColumnLayoutVariant, type BentoModalConfigData, BentoModalRole, BentoModalSize, } from '@/components/modal/modal.types'; import { BentoButton, type BentoButtonActionsList } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import { useHasSlot } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys'; import { generateUid } from '@/core/utils/ts'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import messages from './messages.json'; import { BentoModalPage } from '@/components/modal/components/modal-page'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; type MessageSchema = (typeof messages)['en-US']; const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const attrs = useAttrs(); const hasSlot = useHasSlot(slots); const modal = ref<HTMLDialogElement>(null); const isClosing = ref(false); const modalId = generateUid('modal'); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emitted when the modal is closed. */ (e: 'close-modal'); }>(); const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * But you may change the color of 1-st action to red with 'critial' key * Not more than 3 action buttons can be provided * Or 2 action buttons and 1 Label for them * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary',2 * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same id as the BentoModalPage to be displayed */ activePage: { type: String, default: null, }, /** * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column. */ columnsSize: { type: String as PropType<BentoModalColumnLayoutVariant>, default: BentoModalColumnLayoutVariant.SMALLER, }, /** * If provided, manages the padding of the whole modal container */ customPadding: { type: String, default: null }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false }, /** * Hides a cross icon on the right side of the title */ hideCloseButton: { type: Boolean, required: true }, /** * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility. */ initiallyOpen: { type: Boolean, default: false }, /** * If set to true, it allows the modal to be closed by clicking outside of it */ isDismissible: { type: Boolean, required: true }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, required: true }, /** * Defines whether the modal will be an alert modal */ modalRole: { type: String, default: BentoModalRole.DIALOG }, /** * Sets the width of the modal */ size: { type: String as PropType<BentoModalSize | `${BentoModalSize}`>, default: BentoModalSize.SMALL, }, /** * If provided, renders the modal's content in a two-column layout an wth dividers separating its content */ withColumnLayout: { type: Boolean, default: false }, }); const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton); const pageCustomPadding = ref(props.customPadding); const customPaddingStyles = computed(() => { if (!pageCustomPadding.value) { return {}; } return { top: pageCustomPadding.value, right: pageCustomPadding.value }; }); const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)); const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE); const openModal = (): void => { modal.value.showModal(); }; const emitCloseEvent = (): void => { emit('close-modal'); }; // Handle closing and closing animation for dialog element const closeModalAfterAnimation = () => { if (isClosing.value && modal.value) { modal.value.close(); if (previousPages.value[0]) { emit('update:active-page', previousPages.value[0]); } previousPages.value = []; isClosing.value = false; emitCloseEvent(); } }; const startCloseModalAnimation = () => { if (!modal.value.open) { return; } isClosing.value = true; }; /** * If the user has pressed escape, clicked outside or clicked the close icon. * Needs to be called from outside, following the "dialog.close()" pattern, * when the closing event is triggered outside of the "base-modal" * component (e.g. from a closing action). */ const internalModalActionClose = (event?: Event) => { if (event) { event.preventDefault(); } if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) { return; } startCloseModalAnimation(); }; const closeModalOnClickOutside = () => { if (props.isDismissible) { internalModalActionClose(); } }; const modalConditionalClasses = computed(() => ({ [`b-modal-base__container--${props.size}`]: props.size, 'b-modal-base__container--hide': isClosing.value, 'b-modal-base__container--column-layout': hasColumnLayout.value, 'b-modal-base__container--animation': isAnimationActive.value, })); watch( () => [props.isOpen, modal.value], ([newIsOpen, newModalValue], [, oldModalValue]): void => { if (!newModalValue) { return; } const isFirstMutation = !oldModalValue; if (newIsOpen) { openModal(); // add the first page to the array when the modal opens if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (!isFirstMutation) { startCloseModalAnimation(); } } ); // If the first button is a loading button then close the modal have 0.5 seconds // if the state is changed to 'success'. watch( () => props.actions, () => { if (props.actions?.[0]?.state === 'success') { setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME); } }, { deep: true } ); onMounted(() => { if (props.isOpen && modal.value) { openModal(); } }); /** * Expose methods through its 'ref' */ defineExpose({ internalModalActionClose, }); // Let's Children components know they are inside a Modal (dialog element) provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId); // Modal pagination const { activePage, isOpen, size } = toRefs(props); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const pages = ref<Array<string>>([]); const previousPages = ref([]); const updatePage = page => emit('update:active-page', page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { if (pageId) { pages.value.push(pageId); } return { unregisterPage: unregisterPage(pageId) }; }; const height = ref(''); const isAnimationActive = ref(false); provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size, }); provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); </script> <script lang="ts"> /** * Dialog container. It creates a dialog HTML element for the modal to use. * * @example * import BaseModal from './components/base-modal/base-modal.vue'; * * export default { * components: { BaseModal }, * template: ` * <base-modal * :hide-close-button="true" * :is-dismissible="false" * :is-open="isOpen" * @close-modal="isOpen = false" * > * <template #content-col-1> * // Content on the left side column * </template> * * <template #content-col-2> * // Content on the right side column * </template> * * <template v-if="actions" #actions> * <footer-actions :actions="actions" /> * </template> * </base-modal> * `, * setup() { * const isOpen = ref(true) * const footerActions = [{ * title: 'Primary action', * event: () => { ... } * }] * } * } */ export default defineComponent({ i18n: { messages }, name: 'base-modal', }); </script> <style lang="scss" scoped src="./base-modal.scss" /> 

package/dist/assets/components/modal-fullscreen/components/modal-fullscreen-page.vue

@@ -1 +1 @@
-<template> <dialog-page class="b-modal-fullscreen-page" :page-id="pageId" :previous-page="previousPage" always-show-border> <template #header> <div class="b-modal-fullscreen-page__header"> <div class="b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--title"> <bento-typography v-if="title" el="h2" variant="title" class="b-modal-fullscreen-page__title" :title="title" >{{ title }}</bento-typography > </div> <div v-if="hasSlot('header')" class="b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--slot" > <slot name="header" /> </div> <div class="b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--actions"> <bento-typography v-if="contextualLabel" class="b-modal-fullscreen-page__contextual-label" el="span" :title="contextualLabel" >{{ contextualLabel }}</bento-typography > <bento-button-actions v-if="actions" class="b-modal-fullscreen-page__actions" :actions="actions" /> <div class="b-modal-fullscreen-page__separator"></div> </div> </div> </template> <template #content> <div class="b-modal-fullscreen-page__content"> <slot /> </div> </template> </dialog-page> </template> <script setup lang="ts"> import { onMounted, type PropType, useSlots } from 'vue'; import { BentoButtonActions, type BentoButtonActionsList } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { DialogPage } from '@/internal'; import { useHasSlot } from '@/composables'; const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * Label shown next to the modal actions */ contextualLabel: { type: String, default: null, }, /** * Identifier of the page, used with activePage prop to handle sidepanel navigation */ pageId: { type: String, default: undefined, }, /** * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior * Used when the back button should not take the user to the natural previous page * Set to `null` to hide back button in the page */ previousPage: { type: String, default: undefined, }, /** * Title of the modal */ title: { type: String, default: null, }, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); onMounted(() => { if (props.actions && props.actions.length > 2) { throw new Error('Not more than 2 action buttons may be provided in Bento Modal Fullscreen'); } }); </script> <script lang="ts"> /** * ModalFullscreenPage is used to render different pages of ModalFullscreen component * * @example * import { BentoModalFullscreen, BentoModalFullscreenPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoModalFullscreen, BentoModalFullscreenPage }, * template: ` * <bento-modal-fullscreen active-page='page1' is-open='true'> * <bento-modal-fullscreen-page * title='Page 1' * pageId='page1' * contextual-label='Move to next page' * :actions="[ * { * title: 'Next page', * event: () => { * activePage.value = 'page2'; * }, * }]"> * Page 1 info * </bento-modal-fullscreen-page> * <bento-modal-fullscreen-page * title='Page 2' * pageId='page2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Page 2 info * </bento-modal-fullscreen-page> * </bento-modal-fullscreen> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./modal-fullscreen-page.scss" /> 
+<template> <dialog-page class="b-modal-fullscreen-page" :page-id="pageId" :previous-page="previousPage" always-show-border> <template #header> <div class="b-modal-fullscreen-page__header"> <div class="b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--title"> <bento-typography v-if="title" :id="computedTitleId" el="h2" variant="title" class="b-modal-fullscreen-page__title" :title="title" >{{ title }}</bento-typography > </div> <div v-if="hasSlot('header')" class="b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--slot" > <slot name="header" /> </div> <div class="b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--actions"> <bento-typography v-if="contextualLabel" class="b-modal-fullscreen-page__contextual-label" el="span" :title="contextualLabel" >{{ contextualLabel }}</bento-typography > <bento-button-actions v-if="actions" class="b-modal-fullscreen-page__actions" :actions="actions" /> <div class="b-modal-fullscreen-page__separator"></div> <div class="b-modal-fullscreen-page__close-button"> <bento-button variant="tertiary" :aria-label="t('close')" @click="handleClose"> <template #iconLeft><cross-icon :aria-hidden="true" /></template> </bento-button> </div> </div> </div> </template> <template #content> <slot /> </template> </dialog-page> </template> <script setup lang="ts"> import { inject, onMounted, type PropType, useSlots } from 'vue'; import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { DialogPage } from '@/internal'; import { useHasSlot } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import { MODAL_FULLSCREEN_CLOSE_INJECTION_KEY, MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY, } from '@/components/modal-fullscreen/modal-fullscreen.keys'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * Label shown next to the modal actions */ contextualLabel: { type: String, default: null, }, /** * Identifier of the page, used with activePage prop to handle sidepanel navigation */ pageId: { type: String, default: undefined, }, /** * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior * Used when the back button should not take the user to the natural previous page * Set to `null` to hide back button in the page */ previousPage: { type: String, default: undefined, }, /** * Title of the modal */ title: { type: String, default: null, }, /** * ID to be applied to the title to be used with aria-labelledby */ titleId: { type: String, default: undefined, }, }); const emit = defineEmits<{ /** * Emits event when close button is clicked */ (e: 'close'); }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const injectedTitleId = inject(MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY, undefined); const computedTitleId = props.titleId ?? injectedTitleId; const closeModal = inject(MODAL_FULLSCREEN_CLOSE_INJECTION_KEY, undefined); const handleClose = () => { emit('close'); closeModal?.(); }; onMounted(() => { if (props.actions && props.actions.length > 2) { throw new Error('Not more than 2 action buttons may be provided in Bento Modal Fullscreen'); } }); </script> <script lang="ts"> /** * ModalFullscreenPage is used to render different pages of ModalFullscreen component * * @example * import { BentoModalFullscreen, BentoModalFullscreenPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoModalFullscreen, BentoModalFullscreenPage }, * template: ` * <bento-modal-fullscreen active-page='page1' is-open='true'> * <bento-modal-fullscreen-page * title='Page 1' * pageId='page1' * contextual-label='Move to next page' * :actions="[ * { * title: 'Next page', * event: () => { * activePage.value = 'page2'; * }, * }]"> * Page 1 info * </bento-modal-fullscreen-page> * <bento-modal-fullscreen-page * title='Page 2' * pageId='page2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Page 2 info * </bento-modal-fullscreen-page> * </bento-modal-fullscreen> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./modal-fullscreen-page.scss" /> 

package/dist/assets/components/modal-fullscreen/modal-fullscreen.vue

@@ -1 +1 @@
-<template> <dialog :id="modalFullscreenId" ref="modal" class="b-modal-fullscreen" :class="conditionalClasses" data-dialog-element="modal-fullscreen" @animationend="closeModalAfterAnimation" @keydown.esc.prevent="closeModal" > <bento-focus-trap v-if="internalIsOpen" class="b-modal-fullscreen__wrapper"> <template v-if="props.activePage"> <slot /> </template> <bento-modal-fullscreen-page v-else :actions="actions" :contextual-label="contextualLabel" :title="title"> <template v-if="hasSlot('default')" #default> <slot name="default"></slot> </template> <template v-if="hasSlot('header')" #header> <slot name="header"></slot> </template> </bento-modal-fullscreen-page> <div class="b-modal-fullscreen__close-button"> <bento-button variant="tertiary" :aria-label="t('close')" @click="closeModal"> <template #iconLeft><cross-icon :aria-hidden="true" /></template> </bento-button> </div> </bento-focus-trap> <!-- Enable the toast inside the fullscreen-modal --> <template v-if="isOpen"> <bento-toast /> </template> </dialog> </template> <script setup lang="ts"> import { computed, nextTick, type PropType, provide, ref, toRefs, useSlots, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { BentoToast } from '@/components/toast'; import { BentoButton, type BentoButtonActionsList } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import BentoModalFullscreenPage from './components/modal-fullscreen-page.vue'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import { useHasSlot } from '@/composables'; import { useListeners } from '@/composables/use-listeners'; import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys'; import messages from './messages.json'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same as the pageId of the BentoModalFullscreenPage to be displayed */ activePage: { type: String, default: null, }, /** * Label shown next to the modal actions */ contextualLabel: { type: String, default: null, }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, default: null, }, /** * Title of the modal */ title: { type: String, default: null, }, }); const emit = defineEmits<{ /** * Handles closing the modal. The behavior changes depending on whether a `before-close` event listener is present. * * - **When listening for the `before-close` event:** * The `before-close` event is emitted immediately, skipping the animation. This allows for logic to run before the modal closes. * The `isOpen` prop must then be set to `false` to trigger the closing animation. * * - **When not listening for the `before-close` event:** * The closing animation plays, then `update:is-open` is emitted with `false`. * This is the default behavior, compatible with `v-model` or `.sync` on the `isOpen` prop. */ (e: 'before-close'): void; /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emits 'update:is-open' event when the modal is closed */ (e: 'update:is-open', isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const modal = ref(null); const isClosing = ref(false); const modalFullscreenId = generateUid('modal-fullscreen'); const internalIsOpen = ref(false); const listeners = useListeners(); const slots = useSlots(); const hasSlot = useHasSlot(slots); // Animation styling const conditionalClasses = computed(() => ({ 'b-modal-fullscreen--hide': isClosing.value, })); // Handle closing and closing animation for dialog element const closeModalAfterAnimation = () => { if (isClosing.value) { modal.value.close(); if (previousPages.value[0]) { emit('update:active-page', previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit('update:is-open', false); } }; /** * Emits the `beforeClose` event, if it is being listened to, * before closing the modal and omits the closing animation. * The animation will be triggered by the change of the `isOpen` prop instead. * * If no listener for the `before-close`, then the animation will be triggered, * which will close the modal and emit the `update:is-open` event instead, after it was closed. */ function closeModal() { /** * Vue3 appends the prefix "on" and changes to camelCase */ const eventName = isVue2 ? 'before-close' : 'onBeforeClose'; if (listeners[eventName]) { emit('before-close'); return; } startCloseModalAnimation(); } const startCloseModalAnimation = () => { if (!modal.value.open) { return; } isClosing.value = true; }; // Watching isOpen prop to toggle open/close the dialog element watch( () => isOpen.value, async () => { // Wait for modal ref to be created await nextTick(); if (!modal.value) { return; } if (isOpen.value) { internalIsOpen.value = true; modal.value.showModal(); if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (modal.value.open) { startCloseModalAnimation(); } }, { immediate: true } ); // lets children components know they are inside a Modal (dialog element) provide(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, modalFullscreenId); // Pages const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const pages = ref<Array<string>>([]); const previousPages = ref([]); const updatePage = page => emit('update:active-page', page); provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isOpen: internalIsOpen, pages, previousPages, updatePage, }); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { if (pageId) { pages.value.push(pageId); } return { unregisterPage: unregisterPage(pageId) }; }; provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); </script> <script lang="ts"> /** * Fullscreen modal takes full available space (no content underneath is visible) and focuses the user's attention exclusively on one complex task or piece of complex information. * * @example * import { BentoModalFullscreen } from '@adyen/bento-vue2'; * * export default { * components: { BentoModalFullscreen }, * template: ` * <bento-modal-fullscreen * :is-open="isOpen" * @update:is-open="isOpen = $event" * title='Fullscreen modal title' * contextual-label='Contextual label' * :actions="[{ title: 'Action', event: () => {}]" * > * <template #header>{{ header slot }}</template> * {{ content }} * </bento-modal-fullscreen> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./modal-fullscreen.scss" /> 
+<template> <dialog :id="modalFullscreenId" ref="modal" class="b-modal-fullscreen" :class="conditionalClasses" data-dialog-element="modal-fullscreen" :aria-labelledby="titleId" @animationend="closeModalAfterAnimation" @keydown.esc.prevent="closeModal" > <bento-focus-trap v-if="internalIsOpen" class="b-modal-fullscreen__wrapper"> <template v-if="props.activePage"> <slot /> </template> <bento-modal-fullscreen-page v-else :actions="actions" :contextual-label="contextualLabel" :title="title" :title-id="titleId" @close="closeModal" > <template v-if="hasSlot('default')" #default> <slot name="default"></slot> </template> <template v-if="hasSlot('header')" #header> <slot name="header"></slot> </template> </bento-modal-fullscreen-page> </bento-focus-trap> <!-- Enable the toast inside the fullscreen-modal --> <template v-if="isOpen"> <bento-toast /> </template> </dialog> </template> <script setup lang="ts"> import { computed, onMounted, onUnmounted, type PropType, provide, ref, toRefs, useSlots, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { BentoToast } from '@/components/toast'; import { type BentoButtonActionsList } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import BentoModalFullscreenPage from './components/modal-fullscreen-page.vue'; import { generateUid } from '@/core/utils/ts'; import { useHasSlot } from '@/composables'; import { useListeners } from '@/composables/use-listeners'; import { MODAL_FULLSCREEN_CLOSE_INJECTION_KEY, MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY, } from '@/components/modal-fullscreen/modal-fullscreen.keys'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same as the pageId of the BentoModalFullscreenPage to be displayed */ activePage: { type: String, default: null, }, /** * Label shown next to the modal actions */ contextualLabel: { type: String, default: null, }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, default: null, }, /** * Title of the modal */ title: { type: String, default: null, }, }); const emit = defineEmits<{ /** * Handles closing the modal. The behavior changes depending on whether a `before-close` event listener is present. * * - **When listening for the `before-close` event:** * The `before-close` event is emitted immediately, skipping the animation. This allows for logic to run before the modal closes. * The `isOpen` prop must then be set to `false` to trigger the closing animation. * * - **When not listening for the `before-close` event:** * The closing animation plays, then `update:is-open` is emitted with `false`. * This is the default behavior, compatible with `v-model` or `.sync` on the `isOpen` prop. */ (e: 'before-close'): void; /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emits 'update:is-open' event when the modal is closed */ (e: 'update:is-open', isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const modal = ref(null); const isClosing = ref(false); const modalFullscreenId = generateUid('modal-fullscreen'); const titleId = generateUid('modal-fullscreen-title'); const internalIsOpen = ref(false); const isMounted = ref(false); const listeners = useListeners(); const slots = useSlots(); const hasSlot = useHasSlot(slots); // Animation styling const conditionalClasses = computed(() => ({ 'b-modal-fullscreen--hide': isClosing.value, })); // Handle closing and closing animation for dialog element const closeModalAfterAnimation = () => { if (isClosing.value && modal.value) { modal.value.close(); if (previousPages.value[0]) { emit('update:active-page', previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit('update:is-open', false); } }; /** * Emits the `beforeClose` event, if it is being listened to, * before closing the modal and omits the closing animation. * The animation will be triggered by the change of the `isOpen` prop instead. * * If no listener for the `before-close`, then the animation will be triggered, * which will close the modal and emit the `update:is-open` event instead, after it was closed. */ function closeModal() { /** * Vue3 appends the prefix "on" and changes to camelCase */ const eventName = isVue2 ? 'before-close' : 'onBeforeClose'; if (listeners[eventName]) { emit('before-close'); return; } startCloseModalAnimation(); } const startCloseModalAnimation = () => { if (!modal.value || !modal.value.open) { return; } isClosing.value = true; }; onMounted(() => { isMounted.value = true; }); onUnmounted(() => { isMounted.value = false; }); // Watching isOpen prop to toggle open/close the dialog element watch( [() => isOpen.value, modal], ([newIsOpen, newModalValue]) => { if (!isMounted.value || !newModalValue) { return; } if (newIsOpen) { internalIsOpen.value = true; if (!newModalValue.open) { newModalValue.showModal(); } if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (newModalValue.open) { startCloseModalAnimation(); } }, { immediate: true, flush: 'post' } ); // lets children components know they are inside a Modal (dialog element) provide(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, modalFullscreenId); provide(MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY, titleId); provide(MODAL_FULLSCREEN_CLOSE_INJECTION_KEY, closeModal); // Pages const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const pages = ref<Array<string>>([]); const previousPages = ref([]); const updatePage = page => emit('update:active-page', page); provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isOpen: internalIsOpen, pages, previousPages, updatePage, }); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { if (pageId) { pages.value.push(pageId); } return { unregisterPage: unregisterPage(pageId) }; }; provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); </script> <script lang="ts"> /** * Fullscreen modal takes full available space (no content underneath is visible) and focuses the user's attention exclusively on one complex task or piece of complex information. * * @example * import { BentoModalFullscreen } from '@adyen/bento-vue2'; * * export default { * components: { BentoModalFullscreen }, * template: ` * <bento-modal-fullscreen * :is-open="isOpen" * @update:is-open="isOpen = $event" * title='Fullscreen modal title' * contextual-label='Contextual label' * :actions="[{ title: 'Action', event: () => {}]" * > * <template #header>{{ header slot }}</template> * {{ content }} * </bento-modal-fullscreen> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./modal-fullscreen.scss" /> 

package/dist/assets/components/pagination/components/pagination-context/pagination-context.vue

@@ -1 +1 @@
-<template> <div class="b-pagination-context"> <bento-typography v-if="totalPages > 1" el="div"> <component :is="i18nComponent" v-bind="getI18nProps('pageNumber')" tag="div"> <template #page> <bento-dropdown :id="dropdownId" :aria-label="t('pageNumber', { page: n(page) })" class="b-pagination-context__dropdown" condensed :items="listOfAvailablePages" :model-value="page" :virtual-scroll="virtualScroll" @update:model-value="onPageSelectChange" /> </template> </component> </bento-typography> <bento-typography v-else-if="totalPages === 1" el="span"> {{ t('pageOneOfOne') }} </bento-typography> <bento-typography v-else el="span"> {{ t('pageNumber', { page: n(page) }) }} </bento-typography> </div> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { BentoDropdown } from '@/components/dropdown'; import { type BentoListboxOptionItem } from '@/types/listbox'; import { generateUid } from '@/core/utils/ts'; import messages from './messages.json'; import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults( defineProps<{ /** * The current page number of the pager. */ page?: number; /** * The total number of items the pager is paging through. */ totalPages?: number; /** * Enables virtual scrolling on all dropdowns if set to true. */ virtualScroll?: boolean; }>(), { page: 1, totalPages: null, virtualScroll: false, } ); const emit = defineEmits<{ (e: 'page-selected', value: string | number); }>(); const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const dropdownId = generateUid('bento-pagination-context-current-page'); const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage); const i18nComponent = getI18nComponent(); // Generate a list of pages from 1 to "totalPages" const transformIntoOption = (value: number): BentoListboxOptionItem => ({ label: n(value), value, }); const transformToPageNumber = (_, index) => index + 1; const listOfAvailablePages = computed(() => Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption) ); </script> <script lang="ts"> export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./pagination-context.scss" /> 
+<template> <div class="b-pagination-context"> <bento-typography v-if="totalPages > 1 && !hidePageSelection" el="div"> <component :is="i18nComponent" v-bind="getI18nProps('pageNumber')" tag="div"> <template #page> <bento-dropdown :id="dropdownId" :aria-label="t('pageNumber', { page: n(page) })" class="b-pagination-context__dropdown" condensed :items="listOfAvailablePages" :model-value="page" :virtual-scroll="virtualScroll" @update:model-value="onPageSelectChange" /> </template> </component> </bento-typography> <bento-typography v-else-if="showPageNumberOfTotal" el="span"> {{ t('pageNumberOfTotal', { page: n(page), totalPages: n(totalPages) }) }} </bento-typography> <bento-typography v-else el="span"> {{ t('pageNumber', { page: n(page) }) }} </bento-typography> </div> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { BentoDropdown } from '@/components/dropdown'; import { type BentoListboxOptionItem } from '@/types/listbox'; import { generateUid } from '@/core/utils/ts'; import messages from './messages.json'; import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults( defineProps<{ /** * Hides the page selection dropdown and displays a static "Page X of Y" text instead. * Useful for very large datasets where rendering all page options would cause performance issues. */ hidePageSelection?: boolean; /** * The current page number of the pager. */ page?: number; /** * The total number of items the pager is paging through. */ totalPages?: number; /** * Enables virtual scrolling on all dropdowns if set to true. */ virtualScroll?: boolean; }>(), { hidePageSelection: false, page: 1, totalPages: null, virtualScroll: false, } ); const emit = defineEmits<{ (e: 'page-selected', value: string | number); }>(); const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const dropdownId = generateUid('bento-pagination-context-current-page'); const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage); const i18nComponent = getI18nComponent(); // Generate a list of pages from 1 to "totalPages" const transformIntoOption = (value: number): BentoListboxOptionItem => ({ label: n(value), value, }); const transformToPageNumber = (_, index) => index + 1; const listOfAvailablePages = computed(() => Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption) ); const showPageNumberOfTotal = computed( () => props.totalPages === 1 || (props.hidePageSelection && props.page <= props.totalPages) ); </script> <script lang="ts"> export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./pagination-context.scss" /> 

package/dist/assets/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue

@@ -1 +1 @@
-<template> <div class="b-pagination-results-per-page"> <bento-typography el="div"> <component :is="i18nComponent" v-bind="getI18nProps(translationPathKey)" class="b-pagination-results-per-page__dropdown-container" tag="div" :plural="totalCount" > <template #itemCount> <bento-dropdown :id="dropdownId" :aria-label="t(translationPathKey, { itemCount: itemsPerPage, totalCount })" class="b-pagination-results-per-page__dropdown" condensed :items="predefinedDropdownOptions" :model-value="itemsPerPage" @update:model-value="onSelectChange" /> </template> <template v-if="!!totalCount" #totalCount>{{ totalCount }}</template> </component> </bento-typography> </div> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { BentoDropdown } from '@/components/dropdown'; import { generateUid } from '@/core/utils/ts'; import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults( defineProps<{ /** * The amount of items the pager is paging through. */ itemsPerPage?: number; /** * The total number of items the pager is paging through. */ totalCount?: number; }>(), { itemsPerPage: 50, totalCount: null, } ); const emit = defineEmits<{ (e: 'select', value: number); }>(); const dropdownId = generateUid('b-pagination-context-number-elements'); const predefinedDropdownOptions = computed(() => [ { label: n(10), value: 10 }, { label: n(20), value: 20 }, { label: n(50), value: 50 }, { label: n(75), value: 75 }, { label: n(100), value: 100 }, ]); const i18nComponent = getI18nComponent(); const onSelectChange = (selectedNumberOfResults: number) => { emit('select', selectedNumberOfResults); }; const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems')); </script> <script lang="ts"> export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./pagination-results-per-page.scss" /> 
+<template> <div class="b-pagination-results-per-page"> <bento-typography el="div"> <component :is="i18nComponent" v-bind="getI18nProps(translationPathKey)" class="b-pagination-results-per-page__dropdown-container" tag="div" :plural="totalCount" > <template v-if="hidePageSizeSelection" #itemCount>{{ itemsPerPage }}</template> <template v-else #itemCount> <bento-dropdown :id="dropdownId" :aria-label="t(translationPathKey, { itemCount: itemsPerPage, totalCount })" class="b-pagination-results-per-page__dropdown" condensed :items="predefinedDropdownOptions" :model-value="itemsPerPage" @update:model-value="onSelectChange" /> </template> <template v-if="!!totalCount" #totalCount>{{ totalCount }}</template> </component> </bento-typography> </div> </template> <script setup lang="ts"> import { computed, watch } from 'vue'; import { BentoTypography } from '@/components/typography'; import { BentoDropdown } from '@/components/dropdown'; import { generateUid } from '@/core/utils/ts'; import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults( defineProps<{ /** * Determines whether to hide the dropdown that allows users to change the number of results per page. * When set to `true`, the current `itemsPerPage` value is displayed as plain static text. */ hidePageSizeSelection?: boolean; /** * The amount of items the pager is paging through. */ itemsPerPage?: number; /** * The total number of items the pager is paging through. */ totalCount?: number; /** * The predefined options for the results per page dropdown. */ pageSizeItems?: Array<number>; }>(), { hidePageSizeSelection: false, itemsPerPage: 50, totalCount: null, pageSizeItems: () => [10, 20, 50, 75, 100], } ); const emit = defineEmits<{ (e: 'select', value: number); }>(); const isValid = computed( () => Array.isArray(props.pageSizeItems) && props.pageSizeItems.every(option => Number.isInteger(option)) ); watch( isValid, valid => { if (!valid) { printDevelopmentWarning('BentoPagination: pageSizeItems must be an array of integers.'); } }, { immediate: true } ); const dropdownId = generateUid('b-pagination-context-number-elements'); const predefinedDropdownOptions = computed(() => props.pageSizeItems.map(option => ({ label: n(option), value: option, })) ); const i18nComponent = getI18nComponent(); const onSelectChange = (selectedNumberOfResults: number) => { emit('select', selectedNumberOfResults); }; const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems')); </script> <script lang="ts"> export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./pagination-results-per-page.scss" /> 

package/dist/assets/components/pagination/pagination.vue

@@ -1 +1 @@
-<template> <div class="b-pagination"> <nav :aria-label="computedAriaLabel" class="b-pagination__navigation" :class="navigationConditionalClasses()"> <bento-pagination-results-per-page v-if="!hidePageSize" class="b-pagination__results-per-page" :items-per-page="size" :total-count="totalCount" @select="onItemsPerPageChange" /> <bento-typography v-else-if="hasSlot('default')"><slot /></bento-typography> <div class="b-pagination__page-navigator"> <bento-pagination-context class="b-pagination__context" :total-pages="totalPages" :page="page" :total-count="totalCount" :virtual-scroll="virtualScroll" @page-selected="onPageSelected" /> <div class="b-pagination__divider"></div> <bento-pagination-controls class="b-pagination__controls" :has-next="hasNext" :page="page" :total-pages="totalPages" @navigate="navigate" /> </div> </nav> </div> </template> <script setup lang="ts"> import { computed, ref, toRefs, useAttrs, useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue'; import BentoPaginationContext from './components/pagination-context/pagination-context.vue'; import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useHasSlot } from '@/composables'; import type { BentoPaginationProps } from './pagination.types'; const props = withDefaults(defineProps<BentoPaginationProps>(), { ariaLabel: null, hasNext: null, hidePageSize: false, page: 1, size: 20, totalCount: null, virtualScroll: false, }); const emit = defineEmits<{ /** * Triggered when the navigation controls are clicked or the items per page is changed (i.e. when the arrow buttons to the * rightmost of the screen or either dropdown is updated). It indicates to which page it should go next and also the page size. */ (e: 'navigate', page: number, items?: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. */ (e: 'items-page', size: number): void; /** * Triggered when the navigation controls are clicked, whether the arrow buttons to the * right most of the screen or the dropdown on the right hand is updated. * It indicates to which page it should go next * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:page.sync="currentPage"` */ (e: 'update:page', page: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:size.sync="itemsPerPage"` */ (e: 'update:size', size: number): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const attrs = useAttrs(); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, }); const totalPages = computed(() => !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size) ); const navigate = (pageArg: number, itemsPerPage?: number) => { if (props.hidePageSize) { emit('navigate', pageArg); } else { emit('navigate', pageArg, itemsPerPage ?? props?.size); } emit('update:page', pageArg); }; const onPageSelected = (pageNumber: number) => { navigate(pageNumber); }; const onItemsPerPageChange = (elements: number) => { emit('items-page', elements); emit('update:size', elements); // Always go to first page when the // number of items page changes navigate(1, elements); }; const navigationConditionalClasses = () => ({ 'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize, }); </script> <script lang="ts"> /** * Paginiation component to help users page through data sets. * * There are two ways of doing navigation in this component: * 1. (Basic) You tell the component if there is a next page (hasNext) * 2. (Enhanced) You tell the component: * - How many total items exist (totalCount) * - The max number of items that you show/fetch per page (size) * - In this case you should not set the hasNext props * * If you have the data available and opt to use the Enhanced way you get extra controls: * - Page dropdown selector * - Last page button * - "Showing 10 of 200 items" text * * @usage * import { BentoPagination } from '@adyen/bento-vue2'; * * export default { * components: { BentoPagination }, * template: ` * <bento-pagination :has-next="isNextPage" /> * `, * } */ export default {}; </script> <style lang="scss" scoped src="./pagination.scss" /> 
+<template> <div class="b-pagination"> <nav :aria-label="computedAriaLabel" class="b-pagination__navigation" :class="navigationConditionalClasses()"> <bento-pagination-results-per-page v-if="!hidePageSize" class="b-pagination__results-per-page" :hide-page-size-selection="hidePageSizeSelection" :items-per-page="size" :total-count="totalCount" :page-size-items="pageSizeItems" @select="onItemsPerPageChange" /> <bento-typography v-else-if="hasSlot('default')"><slot /></bento-typography> <div class="b-pagination__page-navigator"> <bento-pagination-context class="b-pagination__context" :total-pages="totalPages" :page="page" :virtual-scroll="virtualScroll" :hide-page-selection="hidePageSelection" @page-selected="onPageSelected" /> <div class="b-pagination__divider"></div> <bento-pagination-controls class="b-pagination__controls" :has-next="hasNext" :page="page" :total-pages="totalPages" @navigate="navigate" /> </div> </nav> </div> </template> <script setup lang="ts"> import { computed, ref, toRefs, useAttrs, useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue'; import BentoPaginationContext from './components/pagination-context/pagination-context.vue'; import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useHasSlot } from '@/composables'; import type { BentoPaginationProps } from './pagination.types'; const props = withDefaults(defineProps<BentoPaginationProps>(), { ariaLabel: null, hasNext: null, hidePageSize: false, hidePageSelection: false, hidePageSizeSelection: false, page: 1, pageSizeItems: undefined, size: 20, totalCount: null, virtualScroll: false, }); const emit = defineEmits<{ /** * Triggered when the navigation controls are clicked or the items per page is changed (i.e. when the arrow buttons to the * rightmost of the screen or either dropdown is updated). It indicates to which page it should go next and also the page size. */ (e: 'navigate', page: number, items?: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. */ (e: 'items-page', size: number): void; /** * Triggered when the navigation controls are clicked, whether the arrow buttons to the * right most of the screen or the dropdown on the right hand is updated. * It indicates to which page it should go next * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:page.sync="currentPage"` */ (e: 'update:page', page: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:size.sync="itemsPerPage"` */ (e: 'update:size', size: number): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const attrs = useAttrs(); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, }); const totalPages = computed(() => !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size) ); const navigate = (pageArg: number, itemsPerPage?: number) => { if (props.hidePageSize) { emit('navigate', pageArg); } else { emit('navigate', pageArg, itemsPerPage ?? props?.size); } emit('update:page', pageArg); }; const onPageSelected = (pageNumber: number) => { navigate(pageNumber); }; const onItemsPerPageChange = (elements: number) => { emit('items-page', elements); emit('update:size', elements); // Always go to first page when the // number of items page changes navigate(1, elements); }; const navigationConditionalClasses = () => ({ 'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize, }); </script> <script lang="ts"> /** * Paginiation component to help users page through data sets. * * There are two ways of doing navigation in this component: * 1. (Basic) You tell the component if there is a next page (hasNext) * 2. (Enhanced) You tell the component: * - How many total items exist (totalCount) * - The max number of items that you show/fetch per page (size) * - In this case you should not set the hasNext props * * If you have the data available and opt to use the Enhanced way you get extra controls: * - Page dropdown selector * - Last page button * - "Showing 10 of 200 items" text * * @usage * import { BentoPagination } from '@adyen/bento-vue2'; * * export default { * components: { BentoPagination }, * template: ` * <bento-pagination :has-next="isNextPage" /> * `, * } */ export default {}; </script> <style lang="scss" scoped src="./pagination.scss" /> 

package/dist/assets/components/radio-group/radio-group.vue

@@ -1 +1 @@
-<template> <div class="b-radio-group"> <controls-group class="b-radio-group__buttons" :aria-describedby="shouldShowErrorMessage ? errorId : ''" :component-name="COMPONENT_NAME" :class="conditionalClasses" :description="description" :disabled="disabled" :form="formId" :label="label" :optional="optional" :required="required" :hide-label="hideLabel" :tooltip-text="tooltipText" role="radiogroup" :aria-readonly="isReadOnly" > <bento-radio-button v-for="item in items" ref="radioButton" :key="item.value" :model-value="inputValue" :value="item.value" :disabled="disabled || item.disabled" :readonly="isReadOnly || item.readonly" :has-error="shouldShowError || item.hasError" :tag="item.tag" :name="formId || label" @update:model-value="onUpdateModelValue" > <template #default>{{ item.label }}</template> <template v-if="item.description" #description>{{ item.description }}</template> <template v-if="hasSlot('content') && isVertical" #content> <slot name="content"></slot> </template> </bento-radio-button> <template v-if="hasSlot('description')" #description> <slot name="description" /> </template> </controls-group> <error-message v-if="shouldShowErrorMessage" :id="errorId" :error-message="errorMessage" class="b-radio-group__error-message" /> </div> </template> <script setup lang="ts"> import { computed, ref, toRef, useSlots, watch } from 'vue'; import { ControlsGroup, ErrorMessage } from '@/components/internal'; import { BentoRadioButton } from './components/radio-button'; import { useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { type BentoRadioGroupEmits, type BentoRadioGroupProps, BentoRadioGroupVariant } from './radio-group.types'; import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; /** * The name of the component to be used in the Vue devtools and console warnings. */ const COMPONENT_NAME = 'bento-radio-group'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const emit = defineEmits<BentoRadioGroupEmits>(); const props = withDefaults(defineProps<BentoRadioGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hasError: false, hideLabel: null, modelValue: null, optional: false, readonly: false, required: false, tooltipText: null, variant: BentoRadioGroupVariant.VERTICAL, }); const inputValue = toRef(props, 'modelValue'); const errorId = generateUid('error'); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits(emit); const radioButton = ref(null); const shouldShowError = computed( () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError) ); const shouldShowErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage); const conditionalClasses = computed(() => ({ 'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL, })); // Content slot logic const isVertical = computed(() => props.variant === 'vertical'); const shouldShowSlotError = computed(() => hasSlot('content') && !isVertical?.value); const onUpdateModelValue = value => { emitValue(value); }; if (props.hasError) { deprecate( 'BentoRadioGroup "hasError" property', `Use the BentoRadioGroup "errorMessage" property instead to indicate that there is a modifier error. Having the field as "undefined" will hide/remove the error. <bento-radio-group errorMessage="Error message text" />`, '2.0.0' ); } watch( shouldShowSlotError, newVal => { if (newVal) { throw new Error('The content slot is only available for the vertical radio group layout'); } }, { immediate: true, } ); const focus = () => { radioButton.value[0].focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * A radio group component should be used whenever it is necessary to use a set of radio buttons * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/ * * import { BentoRadioGroup } from '@adyen/bento-vue2/'; * * export default { * components: { BentoRadioGroup }, * template: ` * <bento-radio-group * label="Your group label" * :items="[ * { value: 1, label: 'Your label' }, * { value: 2, label: 'Another label', description: 'Your descriptive sub label' }, * ]" * variant="horizontal" * /> * ` * }; */ export default { name: 'bento-radio-group', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./radio-group.scss" /> 
+<template> <div class="b-radio-group"> <controls-group class="b-radio-group__buttons" :aria-describedby="shouldShowErrorMessage ? errorId : ''" :aria-required="required" :component-name="COMPONENT_NAME" :class="conditionalClasses" :description="description" :disabled="disabled" :form="formId" :label="label" :optional="optional" :required="required" :hide-label="hideLabel" :tooltip-text="tooltipText" role="radiogroup" :aria-readonly="isReadOnly" > <bento-radio-button v-for="item in items" ref="radioButton" :key="item.value" :model-value="inputValue" :value="item.value" :disabled="disabled || item.disabled" :readonly="isReadOnly || item.readonly" :has-error="shouldShowError || item.hasError" :tag="item.tag" :name="formId || label" @update:model-value="onUpdateModelValue" > <template #default>{{ item.label }}</template> <template v-if="item.description" #description>{{ item.description }}</template> <template v-if="hasSlot('content') && isVertical" #content> <slot name="content"></slot> </template> </bento-radio-button> <template v-if="hasSlot('description')" #description> <slot name="description" /> </template> </controls-group> <error-message v-if="shouldShowErrorMessage" :id="errorId" :error-message="errorMessage" class="b-radio-group__error-message" /> </div> </template> <script setup lang="ts"> import { computed, ref, toRef, useSlots, watch } from 'vue'; import { ControlsGroup, ErrorMessage } from '@/components/internal'; import { BentoRadioButton } from './components/radio-button'; import { useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { type BentoRadioGroupEmits, type BentoRadioGroupProps, BentoRadioGroupVariant } from './radio-group.types'; import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; /** * The name of the component to be used in the Vue devtools and console warnings. */ const COMPONENT_NAME = 'bento-radio-group'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const emit = defineEmits<BentoRadioGroupEmits>(); const props = withDefaults(defineProps<BentoRadioGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hasError: false, hideLabel: null, modelValue: null, optional: false, readonly: false, required: false, tooltipText: null, variant: BentoRadioGroupVariant.VERTICAL, }); const inputValue = toRef(props, 'modelValue'); const errorId = generateUid('error'); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits(emit); const radioButton = ref(null); const shouldShowError = computed( () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError) ); const shouldShowErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage); const conditionalClasses = computed(() => ({ 'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL, })); // Content slot logic const isVertical = computed(() => props.variant === 'vertical'); const shouldShowSlotError = computed(() => hasSlot('content') && !isVertical?.value); const onUpdateModelValue = value => { emitValue(value); }; if (props.hasError) { deprecate( 'BentoRadioGroup "hasError" property', `Use the BentoRadioGroup "errorMessage" property instead to indicate that there is a modifier error. Having the field as "undefined" will hide/remove the error. <bento-radio-group errorMessage="Error message text" />`, '2.0.0' ); } watch( shouldShowSlotError, newVal => { if (newVal) { throw new Error('The content slot is only available for the vertical radio group layout'); } }, { immediate: true, } ); const focus = () => { radioButton.value[0].focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * A radio group component should be used whenever it is necessary to use a set of radio buttons * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/ * * import { BentoRadioGroup } from '@adyen/bento-vue2/'; * * export default { * components: { BentoRadioGroup }, * template: ` * <bento-radio-group * label="Your group label" * :items="[ * { value: 1, label: 'Your label' }, * { value: 2, label: 'Another label', description: 'Your descriptive sub label' }, * ]" * variant="horizontal" * /> * ` * }; */ export default { name: 'bento-radio-group', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./radio-group.scss" /> 

package/dist/assets/components/rich-text-editor/rich-text-editor.vue

@@ -1 +1 @@
-<template> <bento-typography el="div" class="b-rich-text-editor" rich-text> <field-label v-if="!hideLabel" :label="label" :tooltip-text="tooltipText" :required="required" /> <div v-bind="attrs" class="b-rich-text-editor__container" data-testid="rich-text-editor-container" :aria-disabled="disabled" :class="conditionalClasses" > <div class="b-rich-text-editor__toolbar"> <bento-segmented-control v-model="selectedMode" :items="richTextEditorModeOptions" /> </div> <keep-alive> <rich-text-editor-content-area v-if="selectedMode === 'markdown'" :value="internalValue" role="textbox" aria-multiline="true" :disabled="disabled" :aria-label="computedAriaLabel" :aria-describedby="ariaDescribedBy" @input="onInput" /> <bento-alert v-else-if="error" type="critical"> <template #default> {{ t('errorProcessingMarkdown', { value: error }) }} </template> </bento-alert> <rich-text-editor-renderer v-else :node="node" class="b-rich-text-editor__renderer" :class="rendererConditionalClasses" /> </keep-alive> </div> <error-message v-if="!!errorMessage" :id="errorId" :error-message="errorMessage" class="b-rich-text-editor__error-message" /> <span v-if="description" :id="descriptionId" class="b-rich-text-editor__description"> <bento-typography el="span" variant="body">{{ description }}</bento-typography> </span> </bento-typography> </template> <script setup lang="ts"> import { computed, ref, useAttrs, watch } from 'vue'; import type { Root } from 'mdast'; // Components import BentoTypography from '@/components/typography/typography.vue'; import BentoSegmentedControl from '@/components/segmented-control/segmented-control.vue'; import BentoAlert from '@/components/alert/alert.vue'; import { ErrorMessage, FieldLabel } from '@/internal'; import RichTextEditorContentArea from './components/rich-text-editor-content-area/rich-text-editor-content-area.vue'; import RichTextEditorRenderer from './components/rich-text-editor-renderer/rich-text-editor-renderer'; import type { BentoRichTextEditorMode, BentoRichTextEditorProps } from './rich-text-editor.types'; // Utils import { useI18n } from '@/utils/ts/i18n'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/core/utils/ts'; import { parseMarkdown } from './utils'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const errorId = generateUid('rich-text-editor-error'); const descriptionId = generateUid('rich-text-editor-description'); const attrs = useAttrs(); const props = withDefaults(defineProps<BentoRichTextEditorProps>(), { description: null, disabled: false, errorMessage: null, hideLabel: null, label: null, mode: 'markdown', required: false, tooltipText: null, value: null, }); const emit = defineEmits<{ /** * Emmited when the content of the editor changes */ (e: 'input', value: string): void; }>(); const selectedMode = ref<BentoRichTextEditorMode>(props.mode); const internalValue = ref(props.value); const node = ref<Root>(null); const error = ref<Error>(null); const richTextEditorModeOptions = computed< Array<{ label: string; value: BentoRichTextEditorMode; disabled: boolean; }> >(() => [ { label: t('visual'), value: 'visual', disabled: props.disabled, }, { label: t('markdown'), value: 'markdown', disabled: props.disabled, }, ]); const conditionalClasses = computed(() => ({ 'b-rich-text-editor__container--disabled': props.disabled, 'b-rich-text-editor__container--error': props.errorMessage, })); const rendererConditionalClasses = computed(() => ({ 'b-rich-text-editor__renderer--disabled': props.disabled, })); // ARIA const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback')); const ariaLabelAttribute = ref(attrs['aria-label']); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, defaultFallback: computedAriaLabelFallbackMessage, }); const ariaDescribedBy = computed( () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''}`.trim() || null ); /** * Turns internal value into an AST Node */ function updateNodeValue() { try { node.value = parseMarkdown(internalValue.value); error.value = null; } catch (e) { node.value = null; error.value = e.message.split(':')[1]; } } const onInput = (newContentValue: string) => { internalValue.value = newContentValue; }; watch(internalValue, (newValue: string) => { node.value = null; // Invalidate previously parsed node emit('input', newValue); }); watch( selectedMode, newVal => { if (newVal === 'visual' && !node.value) { updateNodeValue(); } }, { immediate: true } ); </script> <script lang="ts"> /** * An editable content area with additional functionality * that allows to change text styling and add links and tables. * * @example * import { BentoRichTextEditor } from '@adyen/bento-vue2'; * * export default { * components: { BentoRichTextEditor }, * template: ` * <bento-rich-text-editor * v-model="value" * :label="label" * :description="description" * :disabled="false" * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./rich-text-editor.scss" /> 
+<template> <bento-typography el="div" class="b-rich-text-editor" rich-text> <field-label v-if="!hideLabel" :label="label" :tooltip-text="tooltipText" :required="required" /> <div v-bind="attrs" class="b-rich-text-editor__container" data-testid="rich-text-editor-container" :aria-disabled="disabled" :class="conditionalClasses" > <div class="b-rich-text-editor__toolbar"> <bento-segmented-control v-model="selectedMode" :items="richTextEditorModeOptions" /> </div> <keep-alive> <rich-text-editor-content-area v-if="selectedMode === 'markdown'" :value="internalValue" role="textbox" aria-multiline="true" :disabled="disabled" :aria-label="computedAriaLabel" :aria-describedby="ariaDescribedBy" :aria-required="required" @input="onInput" /> <bento-alert v-else-if="error" type="critical"> <template #default> {{ t('errorProcessingMarkdown', { value: error }) }} </template> </bento-alert> <rich-text-editor-renderer v-else :node="node" class="b-rich-text-editor__renderer" :class="rendererConditionalClasses" /> </keep-alive> </div> <error-message v-if="!!errorMessage" :id="errorId" :error-message="errorMessage" class="b-rich-text-editor__error-message" /> <span v-if="description" :id="descriptionId" class="b-rich-text-editor__description"> <bento-typography el="span" variant="body">{{ description }}</bento-typography> </span> </bento-typography> </template> <script setup lang="ts"> import { computed, ref, useAttrs, watch } from 'vue'; import type { Root } from 'mdast'; // Components import BentoTypography from '@/components/typography/typography.vue'; import BentoSegmentedControl from '@/components/segmented-control/segmented-control.vue'; import BentoAlert from '@/components/alert/alert.vue'; import { ErrorMessage, FieldLabel } from '@/internal'; import RichTextEditorContentArea from './components/rich-text-editor-content-area/rich-text-editor-content-area.vue'; import RichTextEditorRenderer from './components/rich-text-editor-renderer/rich-text-editor-renderer'; import type { BentoRichTextEditorMode, BentoRichTextEditorProps } from './rich-text-editor.types'; // Utils import { useI18n } from '@/utils/ts/i18n'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/core/utils/ts'; import { parseMarkdown } from './utils'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const errorId = generateUid('rich-text-editor-error'); const descriptionId = generateUid('rich-text-editor-description'); const attrs = useAttrs(); const props = withDefaults(defineProps<BentoRichTextEditorProps>(), { description: null, disabled: false, errorMessage: null, hideLabel: null, label: null, mode: 'markdown', required: false, tooltipText: null, value: null, }); const emit = defineEmits<{ /** * Emmited when the content of the editor changes */ (e: 'input', value: string): void; }>(); const selectedMode = ref<BentoRichTextEditorMode>(props.mode); const internalValue = ref(props.value); const node = ref<Root>(null); const error = ref<Error>(null); const richTextEditorModeOptions = computed< Array<{ label: string; value: BentoRichTextEditorMode; disabled: boolean; }> >(() => [ { label: t('visual'), value: 'visual', disabled: props.disabled, }, { label: t('markdown'), value: 'markdown', disabled: props.disabled, }, ]); const conditionalClasses = computed(() => ({ 'b-rich-text-editor__container--disabled': props.disabled, 'b-rich-text-editor__container--error': props.errorMessage, })); const rendererConditionalClasses = computed(() => ({ 'b-rich-text-editor__renderer--disabled': props.disabled, })); // ARIA const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback')); const ariaLabelAttribute = ref(attrs['aria-label']); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, defaultFallback: computedAriaLabelFallbackMessage, }); const ariaDescribedBy = computed( () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''}`.trim() || null ); /** * Turns internal value into an AST Node */ function updateNodeValue() { try { node.value = parseMarkdown(internalValue.value); error.value = null; } catch (e) { node.value = null; error.value = e.message.split(':')[1]; } } const onInput = (newContentValue: string) => { internalValue.value = newContentValue; }; watch(internalValue, (newValue: string) => { node.value = null; // Invalidate previously parsed node emit('input', newValue); }); watch( selectedMode, newVal => { if (newVal === 'visual' && !node.value) { updateNodeValue(); } }, { immediate: true } ); </script> <script lang="ts"> /** * An editable content area with additional functionality * that allows to change text styling and add links and tables. * * @example * import { BentoRichTextEditor } from '@adyen/bento-vue2'; * * export default { * components: { BentoRichTextEditor }, * template: ` * <bento-rich-text-editor * v-model="value" * :label="label" * :description="description" * :disabled="false" * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./rich-text-editor.scss" /> 

package/dist/assets/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue

@@ -1 +1 @@
-<template> <button class="b-secondary-nav-item" :class="conditionalClasses" :aria-selected="isItemSelected" @click="onClick"> <bento-typography class="b-secondary-nav-item__title" variant="body" stronger> {{ label }} </bento-typography> </button> </template> <script lang="ts" setup> import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys'; import { BentoTypography } from '@/components/typography'; import { computed, inject } from 'vue'; const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE); const props = defineProps<{ /** * The display name of the navigation item */ label: string; /** * The value of this item. */ value: string; }>(); const isItemSelected = computed(() => activeItemValue.value === props.value); const conditionalClasses = computed(() => ({ 'b-secondary-nav-item--active': isItemSelected.value, })); const emit = defineEmits<{ /** * Event emitted when this element is clicked */ (e: 'click', clickEvent: MouseEvent): void; }>(); const onClick = (e: MouseEvent) => { emit('click', e); updateActiveItemValue(props.value); }; </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default {}; </script> <style lang="scss" scoped src="./secondary-nav-item.scss" /> 
+<template> <button class="b-secondary-nav-item" :class="conditionalClasses" :aria-current="isItemSelected ? 'page' : undefined" @click="onClick" > <bento-typography class="b-secondary-nav-item__title" variant="body" stronger> {{ label }} </bento-typography> </button> </template> <script lang="ts" setup> import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys'; import { BentoTypography } from '@/components/typography'; import { computed, inject } from 'vue'; const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE); const props = defineProps<{ /** * The display name of the navigation item */ label: string; /** * The value of this item. */ value: string; }>(); const isItemSelected = computed(() => activeItemValue.value === props.value); const conditionalClasses = computed(() => ({ 'b-secondary-nav-item--active': isItemSelected.value, })); const emit = defineEmits<{ /** * Event emitted when this element is clicked */ (e: 'click', clickEvent: MouseEvent): void; }>(); const onClick = (e: MouseEvent) => { emit('click', e); updateActiveItemValue(props.value); }; </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default {}; </script> <style lang="scss" scoped src="./secondary-nav-item.scss" /> 

package/dist/assets/components/selection-card/components/selection-card-group/selection-card-group.vue

@@ -1 +1 @@
-<template> <controls-group ref="containerRef" :aria-describedby="shouldShowGroupError ? errorMessageId : null" :label="label" :hide-label="hideLabel" :description="description" :disabled="disabled" :tooltip-text="tooltipText" :readonly="readonly" :required="required" :optional="optional" class="b-selection-card-group" component-name="selection-card-group" > <div v-if="!itemsPerRow || layout === 'vertical'" class="b-selection-card-group__items" :class="conditionalItemsClasses" > <bento-selection-card v-for="item in items" :key="`selection-card-${item.value}`" class="b-selection-card-group__item" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </div> <template v-else> <div :key="`selection-card-group-layout-breakpoint-${currentBreakpoint}`"> <grid-layout v-for="(row, rowIndex) in computedRows" :key="`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`" class="b-selection-card-group__items--wrap" :column-width="computedColumnWidth" > <template v-for="(item, columnIndex) in row" #[`col-${columnIndex+1}`]> <bento-selection-card :key="`selection-card-${item.value}`" class="b-selection-card-group__item b-selection-card-group__item--full-height" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </template> </grid-layout> </div> </template> <error-message v-if="shouldShowGroupError" :id="errorMessageId" :error-message="errorMessage" class="b-selection-card-group__error-message" /> </controls-group> </template> <script setup lang="ts"> import { computed, onMounted, provide, ref, useSlots, watch } from 'vue'; import { useElementSize } from '@vueuse/core'; import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6'; import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types'; import BentoSelectionCard from '../../selection-card.vue'; import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal'; import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys'; import { generateUid } from '@/core/utils/ts'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = withDefaults(defineProps<BentoSelectionCardGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hideLabel: null, label: null, layout: 'vertical', itemsPerRow: undefined, modelValue: null, optional: false, required: false, tooltipText: null, readonly: false, variant: 'checkbox', }); const emit = defineEmits<BentoSelectionCardGroupEmits>(); const { emitValue } = useFormFieldEmits(emit); const slots = useSlots(); // Slots logic // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots // We do the same in bento-checkbox-group const hasSlot = name => !!slots[name]; const conditionalItemsClasses = computed(() => ({ 'b-selection-card-group__items--horizontal': props.layout === 'horizontal', })); const inputValue = ref(props.modelValue); watch( () => props.modelValue, () => { inputValue.value = props.modelValue; } ); // Error message logic const errorMessageId = generateUid('error'); const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage); // itemsPerRow logic const containerRef = ref<HTMLElement | null>(null); const { width } = useElementSize(containerRef); const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]); const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]); const currentBreakpoint = computed(() => { if (width.value < smallBreakpoint.value) { return 'small'; } if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) { return 'medium'; } return 'large'; }); const computedItemsPerRow = computed(() => { return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length; }); const computedRows = computed(() => { if (!props.itemsPerRow) { return []; } const rows = []; for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) { rows.push(props.items.slice(i, i + computedItemsPerRow?.value)); } return rows; }); // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value); /** * Filling the columnWidth array with the same parameters per item to pass * to the `grid-layout` layout so the each card can have * the same width according to the screen size. */ const computedColumnWidth = computed(() => { return computedItemsPerRow?.value ? new Array(computedItemsPerRow?.value).fill({ // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy small: itemColumnWidth.value, medium: itemColumnWidth.value, large: itemColumnWidth.value, }) : []; }); const onInput = value => { inputValue.value = value; emitValue(value); }; const isRadioVariant = computed(() => props.variant === 'radio'); provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant); onMounted(() => { if (props.itemsPerRow) { Object.values(props.itemsPerRow).forEach(el => { if (el && (el < 2 || el > 6)) { throw new Error( 'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.' ); } }); } }); </script> <script lang="ts"> /** * Group of bento-selection-cards. * * @example * import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectionCardGroup }, * template: ` * <bento-selection-card-group * :items="[ * { * title: 'Card 1', * value: 'card-1', * content: 'Slot content 1', * icon: RetailIcon, * }, * { * title: 'Card 2', * value: 'card-2', * content: 'Slot content 2', * icon: LeafIcon, * }, * ]" * > * <template #icon="{ icon }"> * <component :is="icon"/> * </template> * <template #content="{ content }"> * <div>{{ content }}</div> * </template> * </bento-selection-card-group> * `, * } */ export default { model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./selection-card-group.scss" /> 
+<template> <controls-group ref="containerRef" :aria-describedby="shouldShowGroupError ? errorMessageId : null" :aria-required="required" :label="label" :hide-label="hideLabel" :description="description" :disabled="disabled" :tooltip-text="tooltipText" :readonly="readonly" :required="required" :optional="optional" class="b-selection-card-group" component-name="selection-card-group" > <div v-if="!itemsPerRow || layout === 'vertical'" class="b-selection-card-group__items" :class="conditionalItemsClasses" > <bento-selection-card v-for="item in items" :key="`selection-card-${item.value}`" class="b-selection-card-group__item" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </div> <template v-else> <div :key="`selection-card-group-layout-breakpoint-${currentBreakpoint}`"> <grid-layout v-for="(row, rowIndex) in computedRows" :key="`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`" class="b-selection-card-group__items--wrap" :column-width="computedColumnWidth" > <template v-for="(item, columnIndex) in row" #[`col-${Number(columnIndex)+1}`]> <bento-selection-card :key="`selection-card-${item.value}`" class="b-selection-card-group__item b-selection-card-group__item--full-height" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </template> </grid-layout> </div> </template> <error-message v-if="shouldShowGroupError" :id="errorMessageId" :error-message="errorMessage" class="b-selection-card-group__error-message" /> </controls-group> </template> <script setup lang="ts"> import { computed, onMounted, provide, ref, useSlots, watch } from 'vue'; import { useElementSize } from '@vueuse/core'; import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6'; import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types'; import BentoSelectionCard from '../../selection-card.vue'; import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal'; import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys'; import { generateUid } from '@/core/utils/ts'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = withDefaults(defineProps<BentoSelectionCardGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hideLabel: null, label: null, layout: 'vertical', itemsPerRow: undefined, modelValue: null, optional: false, required: false, tooltipText: null, readonly: false, variant: 'checkbox', }); const emit = defineEmits<BentoSelectionCardGroupEmits>(); const { emitValue } = useFormFieldEmits(emit); const slots = useSlots(); // Slots logic // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots // We do the same in bento-checkbox-group const hasSlot = name => !!slots[name]; const conditionalItemsClasses = computed(() => ({ 'b-selection-card-group__items--horizontal': props.layout === 'horizontal', })); const inputValue = ref(props.modelValue); watch( () => props.modelValue, () => { inputValue.value = props.modelValue; } ); // Error message logic const errorMessageId = generateUid('error'); const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage); // itemsPerRow logic const containerRef = ref<HTMLElement | null>(null); const { width } = useElementSize(containerRef); const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]); const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]); const currentBreakpoint = computed(() => { if (width.value < smallBreakpoint.value) { return 'small'; } if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) { return 'medium'; } return 'large'; }); const computedItemsPerRow = computed(() => { return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length; }); const computedRows = computed(() => { if (!props.itemsPerRow) { return []; } const rows = []; for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) { rows.push(props.items.slice(i, i + computedItemsPerRow?.value)); } return rows; }); // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value); /** * Filling the columnWidth array with the same parameters per item to pass * to the `grid-layout` layout so the each card can have * the same width according to the screen size. */ const computedColumnWidth = computed(() => { return computedItemsPerRow?.value ? new Array(computedItemsPerRow?.value).fill({ // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy small: itemColumnWidth.value, medium: itemColumnWidth.value, large: itemColumnWidth.value, }) : []; }); const onInput = value => { inputValue.value = value; emitValue(value); }; const isRadioVariant = computed(() => props.variant === 'radio'); provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant); onMounted(() => { if (props.itemsPerRow) { Object.values(props.itemsPerRow).forEach(el => { if (el && (el < 2 || el > 6)) { throw new Error( 'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.' ); } }); } }); </script> <script lang="ts"> /** * Group of bento-selection-cards. * * @example * import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectionCardGroup }, * template: ` * <bento-selection-card-group * :items="[ * { * title: 'Card 1', * value: 'card-1', * content: 'Slot content 1', * icon: RetailIcon, * }, * { * title: 'Card 2', * value: 'card-2', * content: 'Slot content 2', * icon: LeafIcon, * }, * ]" * > * <template #icon="{ icon }"> * <component :is="icon"/> * </template> * <template #content="{ content }"> * <div>{{ content }}</div> * </template> * </bento-selection-card-group> * `, * } */ export default { model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./selection-card-group.scss" /> 

package/dist/assets/components/sidepanel/sidepanel.vue

@@ -1 +1 @@
-<template> <dialog ref="sidepanel" class="b-sidepanel" :class="conditionalClasses" @animationend="closeSidepanelAfterAnimation" @keydown.esc.prevent="isDismissible && startCloseSidepanelAnimation" > <bento-focus-trap :id="sidepanelId" v-bento-click-outside-directive="closeSidepanelOnClickOutside"> <div v-if="!computedHideCloseButton" class="b-sidepanel__close-button"> <bento-button variant="tertiary" @click="startCloseSidepanelAnimation"> <cross-icon :svg-title="t('close')" /> </bento-button> </div> <slot /> </bento-focus-trap> </dialog> </template> <script setup lang="ts"> import { computed, nextTick, provide, ref, toRefs, watch } from 'vue'; import { BentoButton } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { BentoSidepanelEvent } from './sidepanel.types'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * The id of the current active page * Should be the same id as the BentoSidepanelPage to be displayed * If the component only has one page, it can be left null/undefined. */ activePage: { type: String, default: null, }, /** * If set to true, it allows the sidepanel to be closed. * Shows close button when `true` and hides close button when `false`. * * _Note: This property will not set the visibility of the close button in v2.0.0_ */ isDismissible: { type: Boolean, default: false, }, /** * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel. */ isOpen: { type: Boolean, default: null, }, /** * Controls the visibility of close button on the sidepanel. * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`. * * _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.0.0_ */ hideCloseButton: { type: Boolean, default: null, }, }); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void; /** * Emits close-sidepanel event when the sidepanel is closed */ (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const sidepanel = ref(null); const pages = ref<Array<string>>([]); const previousPages = ref([]); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const isClosing = ref(false); const sidepanelId = generateUid('sidepanel'); const internalIsOpen = ref(false); const isAnimationActive = ref(false); // Animation styling const conditionalClasses = computed(() => ({ 'b-sidepanel--hide': isClosing.value, 'b-sidepanel--animation': isAnimationActive.value, })); // Handle closing and closing animation for dialog element const closeSidepanelAfterAnimation = () => { if (isClosing.value) { sidepanel.value.close(); if (previousPages.value[0]) { emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false); } }; const startCloseSidepanelAnimation = () => { if (!sidepanel.value.open) { return; } isClosing.value = true; }; const closeSidepanelOnClickOutside = () => { if (props.isDismissible) { startCloseSidepanelAnimation(); } }; // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`. const computedHideCloseButton = computed(() => { if (props.hideCloseButton !== null) { return props.hideCloseButton; } return !props.isDismissible; }); // Watching isOpen prop to toggle open/close the dialog element watch( () => isOpen.value, async () => { // Wait for sidepanel ref to be created await nextTick(); if (!sidepanel.value) { return; } if (isOpen.value) { internalIsOpen.value = true; sidepanel.value.showModal(); if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (sidepanel.value.open) { startCloseSidepanelAnimation(); } }, { immediate: true } ); // Pages const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { pages.value.push(pageId); return { unregisterPage: unregisterPage(pageId) }; }; provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isAnimationActive, isOpen: internalIsOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); // Let's Children components know they are inside a SidePanel (dialog element) provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId); if (!props.isDismissible && props.hideCloseButton === null) { deprecate( 'BentoSidepanel "isDismissible" property’s behavior', 'BentoSidepanel "isDismissible" will no longer hide the close button. Use "hideCloseButton=true" instead.', '2.0.0' ); } </script> <script lang="ts"> /** * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen. * * @example * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoSidepanel, BentoSidepanelPage }, * template: ` * <bento-sidepanel active-page='step1' is-open='true'> * <bento-sidepanel-page * title='Step 1' * pageId='step1' * :actions="[ * { * title: 'Next step', * event: () => { * activePage.value = 'step2'; * }, * }]"> * Step 1 info * </bento-sidepanel-page> * <bento-sidepanel-page * title='Step 2' * pageId='step2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Step 2 info * </bento-sidepanel-page> * </bento-sidepanel> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./sidepanel.scss" /> 
+<template> <dialog ref="sidepanel" class="b-sidepanel" :class="conditionalClasses" @animationend="closeSidepanelAfterAnimation" @keydown.esc.prevent="isDismissible && startCloseSidepanelAnimation" > <bento-focus-trap :id="sidepanelId" v-bento-click-outside-directive="closeSidepanelOnClickOutside"> <div v-if="!computedHideCloseButton" class="b-sidepanel__close-button"> <bento-button variant="tertiary" @click="startCloseSidepanelAnimation"> <cross-icon :svg-title="t('close')" /> </bento-button> </div> <slot /> </bento-focus-trap> </dialog> </template> <script setup lang="ts"> import { computed, onMounted, onUnmounted, provide, ref, toRefs, watch } from 'vue'; import { BentoButton } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { BentoSidepanelEvent } from './sidepanel.types'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * The id of the current active page * Should be the same id as the BentoSidepanelPage to be displayed * If the component only has one page, it can be left null/undefined. */ activePage: { type: String, default: null, }, /** * If set to true, it allows the sidepanel to be closed. * Shows close button when `true` and hides close button when `false`. * * _Note: This property will not set the visibility of the close button in v2.0.0_ */ isDismissible: { type: Boolean, default: false, }, /** * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel. */ isOpen: { type: Boolean, default: null, }, /** * Controls the visibility of close button on the sidepanel. * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`. * * _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.0.0_ */ hideCloseButton: { type: Boolean, default: null, }, }); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void; /** * Emits close-sidepanel event when the sidepanel is closed */ (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const sidepanel = ref(null); const pages = ref<Array<string>>([]); const previousPages = ref([]); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const isClosing = ref(false); const sidepanelId = generateUid('sidepanel'); const internalIsOpen = ref(false); const isAnimationActive = ref(false); const isMounted = ref(false); // Animation styling const conditionalClasses = computed(() => ({ 'b-sidepanel--hide': isClosing.value, 'b-sidepanel--animation': isAnimationActive.value, })); // Handle closing and closing animation for dialog element const closeSidepanelAfterAnimation = () => { if (isClosing.value && sidepanel.value) { sidepanel.value.close(); if (previousPages.value[0]) { emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false); } }; const startCloseSidepanelAnimation = () => { if (!sidepanel.value || !sidepanel.value.open) { return; } isClosing.value = true; }; const closeSidepanelOnClickOutside = () => { if (props.isDismissible) { startCloseSidepanelAnimation(); } }; // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`. const computedHideCloseButton = computed(() => { if (props.hideCloseButton !== null) { return props.hideCloseButton; } return !props.isDismissible; }); onMounted(() => { isMounted.value = true; }); onUnmounted(() => { isMounted.value = false; }); // Watching isOpen prop to toggle open/close the dialog element watch( [() => isOpen.value, sidepanel], ([newIsOpen, newSidepanelValue]) => { if (!isMounted.value || !newSidepanelValue) { return; } if (newIsOpen) { internalIsOpen.value = true; if (!newSidepanelValue.open) { newSidepanelValue.showModal(); } if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (newSidepanelValue.open) { startCloseSidepanelAnimation(); } }, { immediate: true, flush: 'post' } ); // Pages const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { pages.value.push(pageId); return { unregisterPage: unregisterPage(pageId) }; }; provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isAnimationActive, isOpen: internalIsOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); // Let's Children components know they are inside a SidePanel (dialog element) provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId); if (!props.isDismissible && props.hideCloseButton === null) { deprecate( 'BentoSidepanel "isDismissible" property’s behavior', 'BentoSidepanel "isDismissible" will no longer hide the close button. Use "hideCloseButton=true" instead.', '2.0.0' ); } </script> <script lang="ts"> /** * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen. * * @example * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoSidepanel, BentoSidepanelPage }, * template: ` * <bento-sidepanel active-page='step1' is-open='true'> * <bento-sidepanel-page * title='Step 1' * pageId='step1' * :actions="[ * { * title: 'Next step', * event: () => { * activePage.value = 'step2'; * }, * }]"> * Step 1 info * </bento-sidepanel-page> * <bento-sidepanel-page * title='Step 2' * pageId='step2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Step 2 info * </bento-sidepanel-page> * </bento-sidepanel> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./sidepanel.scss" /> 

package/dist/assets/components/stepper/stepper.docs.mdx

@@ -37,10 +37,17 @@ There are two ways you can use your stepper:
 This stepper requires users to complete one step in order to move on to the next. Steps always follow a specific order
 and users cannot skip a step.
 
+<Canvas withSource="closed">
+    <Story of={StepperStories.Default} />
+</Canvas>
+
 2. Non-linear steppers
 
-This stepper allow users to complete steps in random order. Users can navigate to any step they wish.
+This stepper allows users to complete steps in random order. Users can navigate to any step they wish.
 
+<Canvas withSource="closed">
+    <Story of={StepperStories.NonLinear} />
+</Canvas>
 #### Using stepper with a loop
 
 If you want to build your stepper from an array of navigation options, you can do so:

package/dist/assets/components/stepper/stepper.stories.ts

@@ -1 +1 @@
-import BentoStepper from './stepper.vue'; import BentoStep from './components/step/step.vue'; import { BentoButton } from '@/components/button'; import { action } from '@storybook/addon-actions'; import { computed, isVue2, ref } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoStepperTypeOption, BentoStepperVariantOption } from './stepper.types'; import './stepper.stories.scss?module'; const meta: Meta = { title: 'Stepper', component: BentoStepper, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoStep components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Enum props type: { options: Object.values(BentoStepperTypeOption), mapping: BentoStepperTypeOption, control: { type: 'select', }, }, variant: { options: Object.values(BentoStepperVariantOption), mapping: BentoStepperVariantOption, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStepper>; export const Default: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper v-bind="args" :key="JSON.stringify(args)" @update:index="updateIndex"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); return { updateIndex, args: isVue2 ? props : _args, }; }, }; }, args: { index: 2, }, }; Default.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const Substeps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const substepAction = (index: number) => action('update:substep-index')(index); return { updateIndex, substepAction, args: isVue2 ? props : _args, }; }, }; }, args: { index: 1, substepIndex: 1, }, }; Substeps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const ConditionalSteps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep, BentoButton }, props: Object.keys(argTypes), template: ` <div class="b-stepper-story" :class="args.variant === 'horizontal' && 'b-stepper-story--horizontal'"> <bento-stepper v-bind="args" :key="JSON.stringify(args)" :style="stepperStyle" @update:index="updateIndex"> <bento-step v-for="(step, index) in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <bento-button @click="toggleSteps">Toggle extra steps</bento-button> </div> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const withMiddleSteps = ref(true); const steps = computed(() => [ 'General config', withMiddleSteps.value && 'Online settings', withMiddleSteps.value && 'Offline settings', 'Summary', withMiddleSteps.value && 'Extra: post config', ].filter(Boolean) ); const toggleSteps = () => { withMiddleSteps.value = !withMiddleSteps.value; }; const stepperStyle = computed(() => ({ width: props.variant === 'horizontal' ? 'unset' : '200px' })); return { updateIndex, args: isVue2 ? props : _args, withMiddleSteps, steps, toggleSteps, stepperStyle, }; }, }; }, args: { index: 1, }, }; ConditionalSteps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step v-for="step in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); 
+import BentoStepper from './stepper.vue'; import BentoStep from './components/step/step.vue'; import { BentoButton } from '@/components/button'; import { action } from '@storybook/addon-actions'; import { computed, isVue2, ref } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoStepperTypeOption, BentoStepperVariantOption } from './stepper.types'; import NonLinearStepperSource from './__tests__/non-linear-stepper-example.vue?raw'; import './stepper.stories.scss?module'; const meta: Meta = { title: 'Stepper', component: BentoStepper, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoStep components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Enum props type: { options: Object.values(BentoStepperTypeOption), mapping: BentoStepperTypeOption, control: { type: 'select', }, }, variant: { options: Object.values(BentoStepperVariantOption), mapping: BentoStepperVariantOption, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStepper>; export const Default: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper v-bind="args" :key="JSON.stringify(args)" @update:index="updateIndex"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); return { updateIndex, args: isVue2 ? props : _args, }; }, }; }, args: { index: 2, }, }; Default.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const Substeps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const substepAction = (index: number) => action('update:substep-index')(index); return { updateIndex, substepAction, args: isVue2 ? props : _args, }; }, }; }, args: { index: 1, substepIndex: 1, }, }; Substeps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const ConditionalSteps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep, BentoButton }, props: Object.keys(argTypes), template: ` <div class="b-stepper-story" :class="args.variant === 'horizontal' && 'b-stepper-story--horizontal'"> <bento-stepper v-bind="args" :key="JSON.stringify(args)" :style="stepperStyle" @update:index="updateIndex"> <bento-step v-for="(step, index) in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <bento-button @click="toggleSteps">Toggle extra steps</bento-button> </div> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const withMiddleSteps = ref(true); const steps = computed(() => [ 'General config', withMiddleSteps.value && 'Online settings', withMiddleSteps.value && 'Offline settings', 'Summary', withMiddleSteps.value && 'Extra: post config', ].filter(Boolean) ); const toggleSteps = () => { withMiddleSteps.value = !withMiddleSteps.value; }; const stepperStyle = computed(() => ({ width: props.variant === 'horizontal' ? 'unset' : '200px' })); return { updateIndex, args: isVue2 ? props : _args, withMiddleSteps, steps, toggleSteps, stepperStyle, }; }, }; }, args: { index: 1, }, }; ConditionalSteps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step v-for="step in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const NonLinear: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="activeStep" non-linear @update:index="index => setStep(index)" > <bento-step v-for="(step, index) in steps" :key="index" :completed="completedSteps[index]" > {{ step.title }} </bento-step> </bento-stepper> `, setup(props) { const steps = [{ title: 'Step 1' }, { title: 'Step 2' }, { title: 'Step 3' }, { title: 'Step 4' }]; const activeStep = ref(1); const completedSteps = ref<Record<number, boolean>>({ 0: true, }); const setStep = (index: number) => { action('update:index')(index); completedSteps.value[activeStep.value] = true; activeStep.value = index; }; return { args: isVue2 ? props : _args, steps, activeStep, completedSteps, setStep, }; }, }; }, args: { index: 1, nonLinear: true, }, parameters: storybookDocsParameter(NonLinearStepperSource), }; 

package/dist/assets/components/textarea/textarea.vue

@@ -1 +1 @@
-<template> <div ref="textareaComponent" class="b-textarea" :class="conditionalClasses"> <div :style="{ width: textareaWrapperWidth }"> <div class="b-textarea__label-box" :class="conditionalClassesLabelBox"> <field-label v-if="label" :for="textareaId" :label="label" :tooltip-text="tooltipText" :optional="optional" :required="required" /> <bento-typography v-if="characterLimit" el="span" class="b-textarea__label-item" :class="conditionalClassesLabelItem" > {{ counter }} </bento-typography> </div> <bento-typography el="div" class="b-textarea__input-box" :aria-disabled="disabled"> <textarea :id="textareaId" ref="textareaElement" :value="textareaValue" class="b-textarea__input" :class="conditionalClassesInput" :aria-label="computedAriaLabel" :aria-invalid="invalidInput" :readonly="isReadOnly" :required="required" :disabled="disabled" :placeholder="placeholder" :style="{ resize: resizable, height: textareaHeight }" @blur="onBlur" @change="onChange" @focus="onFocus" @input="onInput" @keydown.esc="onPressEscape" @keydown="onKeyDown" @keyup="onKeyUp" @mousedown="onMouseDown" @mouseup="onMouseUp" > </textarea> <div v-if="showClearButton" class="b-textarea__clear-button"> <bento-button variant="tertiary" :disabled="disabled" @click="onClear" @keypress.enter="onClear" @keyup.space="onClear" > <template #iconLeft> <cross-circle-fill-small-icon :svg-title="t('clearText')" /> </template> </bento-button> </div> </bento-typography> <error-message v-if="isOverCharacterLimit" :error-message="counterErrorText" /> <error-message v-if="errorMessage" :error-message="errorMessage" /> <bento-typography v-if="description" class="b-textarea__description" el="span"> {{ description }} </bento-typography> </div> </div> </template> <script setup lang="ts"> import { computed, nextTick, onMounted, onUnmounted, ref, toRef, toRefs, useAttrs, watch } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { ErrorMessage, FieldLabel } from '@/internal'; import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small'; // Utils import { generateUid } from '@/core/utils/ts'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useI18n } from '@/utils/ts/i18n'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; // Composables import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; // Constants import { BBorderWidthAttention } from '@adyen/bento-design-tokens/dist/js/bento/es6'; // Types import { BentoTextareaEvent, type BentoTextareaProps, BentoTextareaStateClass } from './textarea.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const attrs = useAttrs(); const props = withDefaults(defineProps<BentoTextareaProps>(), { ariaLabel: undefined, characterLimit: undefined, description: '', disabled: false, clearable: false, errorMessage: '', height: null, label: '', optional: false, placeholder: '', readonly: false, resizable: 'both', required: false, tooltipText: null, value: '', modelValue: '', }); const emit = defineEmits<{ /** * Emitted when the element has lost focus */ (e: BentoTextareaEvent.BLUR): void; /** * Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value */ (e: BentoTextareaEvent.CHANGE): void; /** * Emitted when the "Clear" button was clicked */ (e: BentoTextareaEvent.CLEAR): void; /** * Emitted when the "ESC" key is pressed */ (e: BentoTextareaEvent.ESCAPE_PRESSED): void; /** * Emitted when the element has received focus */ (e: BentoTextareaEvent.FOCUS): void; /** * Emitted when the component's model changes * * @deprecated since version 2.0. Use `v-model` or `update:model-value` instead. * */ (e: BentoTextareaEvent.INPUT, value: string): void; /** * Emitted when the component's model changes */ (e: BentoTextareaEvent.UPDATE_MODEL_VALUE, value: string): void; /** * Emitted when the text area keydown event is fired */ (e: BentoTextareaEvent.KEYDOWN, event: KeyboardEvent): void; /** * Emitted when the text area keyup event is fired */ (e: BentoTextareaEvent.KEYUP, event: KeyboardEvent): void; }>(); const { height } = toRefs(props); const textareaId = generateUid('textarea'); const textareaElement = ref<HTMLTextAreaElement>(null); const textareaComponent = ref<HTMLDivElement>(null); const textareaValue = ref(props.modelValue || props.value); const defaultTextareaHeight = 44; const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`); const userSetHeight = ref<number>(0); const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description const isUserResizing = ref(false); let textareaElementObserver: ResizeObserver | null = null; let textareaComponentObserver: ResizeObserver | null = null; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits<string>(emit); const counter = computed(() => `${n(textareaValue?.value?.length ?? 0)} / ${n(props.characterLimit)}`); const isDynamicHeight = computed(() => !height.value); const isOverCharacterLimit = computed( () => props.characterLimit && textareaValue.value.length > props.characterLimit ); /** * Calculates and sets the height of the textarea. * The height is determined by the maximum of the following values: * * 1. The content's scroll height (with a minimum of `defaultTextareaHeight`) + the border width. * 2. The height set by the user manually resizing the textarea (`userSetHeight`). * 3. The default minimum height (`defaultTextareaHeight`). * * This ensures the textarea grows with content, shrinks when content is removed, * but never goes below the manually set height or the default height. */ const calculateHeight = () => { if (textareaElement.value) { const newHeight = Math.max( textareaElement.value.scrollHeight <= defaultTextareaHeight ? defaultTextareaHeight : textareaElement.value.scrollHeight + TEXTAREA_BORDER_WIDTH * 2, userSetHeight.value, defaultTextareaHeight ); textareaHeight.value = `${newHeight}px`; } }; watch(height, () => { if (isDynamicHeight.value) { calculateHeight(); } else { textareaHeight.value = height.value; } }); watch( () => [props.value, props.modelValue], () => { textareaValue.value = props.modelValue || props.value; }, { immediate: true } ); watch( () => textareaValue.value, async () => { if (isDynamicHeight.value) { // Hack to make the textarea calculate its height properly // Set the textarea back to the original value before calculating the height textareaHeight.value = `${defaultTextareaHeight}px`; if (!textareaValue.value) { return; } await nextTick(); calculateHeight(); } }, { immediate: true } ); const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value); const conditionalClasses = computed(() => ({ [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled, })); const conditionalClassesInput = computed(() => ({ [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable, [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value, [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value, [`b-textarea__input--dynamic-height`]: isDynamicHeight.value, })); const conditionalClassesLabelBox = computed(() => ({ [`b-textarea__label-box--no-label`]: !props.label, })); const conditionalClassesLabelItem = computed(() => ({ [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value, })); const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit })); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel, label } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, defaultFallback: label, }); const showClearButton = computed( () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value ); const onClear = () => { textareaValue.value = ''; emit(BentoTextareaEvent.CLEAR); emitValue(''); }; const onInput = (event: InputEvent) => { event.stopImmediatePropagation(); if (!props.disabled && !isReadOnly.value) { textareaValue.value = (event.target as HTMLInputElement).value; /** * Triggered when input value is changed * * @event input * @property {String} inputValue - the updated textarea value */ emitValue(textareaValue.value); } }; const onBlur = () => { textareaElement.value.scrollTop = 0; emit(BentoTextareaEvent.BLUR); }; const onFocus = () => { textareaElement.value.focus(); emit(BentoTextareaEvent.FOCUS); }; const onChange = () => { emit(BentoTextareaEvent.CHANGE); }; const onPressEscape = () => { emit(BentoTextareaEvent.ESCAPE_PRESSED); }; const onKeyDown = (event: KeyboardEvent) => { event.stopPropagation(); emit(BentoTextareaEvent.KEYDOWN, event); }; const onKeyUp = (event: KeyboardEvent) => { event.stopPropagation(); emit(BentoTextareaEvent.KEYUP, event); }; const onMouseDown = () => { isUserResizing.value = true; }; const onMouseUp = () => { isUserResizing.value = false; }; /** * Updates the textarea width depending if the container or the user update its size. * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element. */ const resizeTextareaWrapper = (isTextareaElement = false) => { // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`. const textareaStyleWidth = textareaElement.value.style.width; // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea if (textareaElement.value.style.height) { if (isUserResizing.value) { userSetHeight.value = parseInt(textareaElement.value.style.height, 10); } textareaHeight.value = textareaElement.value.style.height; } // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet // The component wrapper will handle the resizing logic instead if (isTextareaElement && !textareaStyleWidth) { return; } // Width of the whole bento-textarea component const textareaComponentWidth = textareaComponent?.value?.offsetWidth; // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) { textareaWrapperWidth.value = '100%'; } else { // Else the wrapper should always be as wide as the textarea element itself textareaWrapperWidth.value = textareaStyleWidth; } }; const focus = () => { textareaElement.value.focus(); }; defineExpose({ focus, }); onMounted(() => { textareaElementObserver = observeSizeOfElement(textareaElement.value, () => { resizeTextareaWrapper(true); }); textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => { resizeTextareaWrapper(); }); if (isDynamicHeight.value) { calculateHeight(); } if (props.value) { deprecate( 'BentoTextarea "value" property', `The use of "value" prop in "BentoTextarea" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } }); onUnmounted(() => { textareaElementObserver?.disconnect(); textareaComponentObserver?.disconnect(); }); </script> <script lang="ts"> const TEXTAREA_BORDER_WIDTH = parseFloat(BBorderWidthAttention); export default { i18n: { messages }, name: 'bento-textarea', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./textarea.scss" /> 
+<template> <div ref="textareaComponent" class="b-textarea" :class="conditionalClasses"> <div :style="{ width: textareaWrapperWidth }"> <div class="b-textarea__label-box" :class="conditionalClassesLabelBox"> <field-label v-if="label" :for="textareaId" :label="label" :tooltip-text="tooltipText" :optional="optional" :required="required" /> <bento-typography v-if="characterLimit" el="span" class="b-textarea__label-item" :class="conditionalClassesLabelItem" > {{ counter }} </bento-typography> </div> <bento-typography el="div" class="b-textarea__input-box" :aria-disabled="disabled"> <textarea :id="textareaId" ref="textareaElement" :value="textareaValue" class="b-textarea__input" :class="conditionalClassesInput" :aria-label="computedAriaLabel" :aria-invalid="invalidInput" :readonly="isReadOnly" :required="required" :aria-required="required" :disabled="disabled" :placeholder="placeholder" :style="{ resize: resizable, height: textareaHeight }" @blur="onBlur" @change="onChange" @focus="onFocus" @input="onInput" @keydown.esc="onPressEscape" @keydown="onKeyDown" @keyup="onKeyUp" @mousedown="onMouseDown" @mouseup="onMouseUp" > </textarea> <div v-if="showClearButton" class="b-textarea__clear-button"> <bento-button variant="tertiary" :disabled="disabled" @click="onClear" @keypress.enter="onClear" @keyup.space="onClear" > <template #iconLeft> <cross-circle-fill-small-icon :svg-title="t('clearText')" /> </template> </bento-button> </div> </bento-typography> <error-message v-if="isOverCharacterLimit" :error-message="counterErrorText" /> <error-message v-if="errorMessage" :error-message="errorMessage" /> <bento-typography v-if="description" class="b-textarea__description" el="span"> {{ description }} </bento-typography> </div> </div> </template> <script setup lang="ts"> import { computed, nextTick, onMounted, onUnmounted, ref, toRef, toRefs, useAttrs, watch } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { ErrorMessage, FieldLabel } from '@/internal'; import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small'; // Utils import { generateUid } from '@/core/utils/ts'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useI18n } from '@/utils/ts/i18n'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; // Composables import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; // Constants import { BBorderWidthAttention } from '@adyen/bento-design-tokens/dist/js/bento/es6'; // Types import { BentoTextareaEvent, type BentoTextareaProps, BentoTextareaStateClass } from './textarea.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const attrs = useAttrs(); const props = withDefaults(defineProps<BentoTextareaProps>(), { ariaLabel: undefined, characterLimit: undefined, description: '', disabled: false, clearable: false, errorMessage: '', height: null, label: '', optional: false, placeholder: '', readonly: false, resizable: 'both', required: false, tooltipText: null, value: '', modelValue: '', }); const emit = defineEmits<{ /** * Emitted when the element has lost focus */ (e: BentoTextareaEvent.BLUR): void; /** * Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value */ (e: BentoTextareaEvent.CHANGE): void; /** * Emitted when the "Clear" button was clicked */ (e: BentoTextareaEvent.CLEAR): void; /** * Emitted when the "ESC" key is pressed */ (e: BentoTextareaEvent.ESCAPE_PRESSED): void; /** * Emitted when the element has received focus */ (e: BentoTextareaEvent.FOCUS): void; /** * Emitted when the component's model changes * * @deprecated since version 2.0. Use `v-model` or `update:model-value` instead. * */ (e: BentoTextareaEvent.INPUT, value: string): void; /** * Emitted when the component's model changes */ (e: BentoTextareaEvent.UPDATE_MODEL_VALUE, value: string): void; /** * Emitted when the text area keydown event is fired */ (e: BentoTextareaEvent.KEYDOWN, event: KeyboardEvent): void; /** * Emitted when the text area keyup event is fired */ (e: BentoTextareaEvent.KEYUP, event: KeyboardEvent): void; }>(); const { height } = toRefs(props); const textareaId = generateUid('textarea'); const textareaElement = ref<HTMLTextAreaElement>(null); const textareaComponent = ref<HTMLDivElement>(null); const textareaValue = ref(props.modelValue || props.value); const defaultTextareaHeight = 44; const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`); const userSetHeight = ref<number>(0); const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description const isUserResizing = ref(false); let textareaElementObserver: ResizeObserver | null = null; let textareaComponentObserver: ResizeObserver | null = null; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits<string>(emit); const counter = computed(() => `${n(textareaValue?.value?.length ?? 0)} / ${n(props.characterLimit)}`); const isDynamicHeight = computed(() => !height.value); const isOverCharacterLimit = computed( () => props.characterLimit && textareaValue.value.length > props.characterLimit ); /** * Calculates and sets the height of the textarea. * The height is determined by the maximum of the following values: * * 1. The content's scroll height (with a minimum of `defaultTextareaHeight`) + the border width. * 2. The height set by the user manually resizing the textarea (`userSetHeight`). * 3. The default minimum height (`defaultTextareaHeight`). * * This ensures the textarea grows with content, shrinks when content is removed, * but never goes below the manually set height or the default height. */ const calculateHeight = () => { if (textareaElement.value) { const newHeight = Math.max( textareaElement.value.scrollHeight <= defaultTextareaHeight ? defaultTextareaHeight : textareaElement.value.scrollHeight + TEXTAREA_BORDER_WIDTH * 2, userSetHeight.value, defaultTextareaHeight ); textareaHeight.value = `${newHeight}px`; } }; watch(height, () => { if (isDynamicHeight.value) { calculateHeight(); } else { textareaHeight.value = height.value; } }); watch( () => [props.value, props.modelValue], () => { textareaValue.value = props.modelValue || props.value; }, { immediate: true } ); watch( () => textareaValue.value, async () => { if (isDynamicHeight.value) { // Hack to make the textarea calculate its height properly // Set the textarea back to the original value before calculating the height textareaHeight.value = `${defaultTextareaHeight}px`; if (!textareaValue.value) { return; } await nextTick(); calculateHeight(); } }, { immediate: true } ); const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value); const conditionalClasses = computed(() => ({ [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled, })); const conditionalClassesInput = computed(() => ({ [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable, [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value, [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value, [`b-textarea__input--dynamic-height`]: isDynamicHeight.value, })); const conditionalClassesLabelBox = computed(() => ({ [`b-textarea__label-box--no-label`]: !props.label, })); const conditionalClassesLabelItem = computed(() => ({ [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value, })); const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit })); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel, label } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, defaultFallback: label, }); const showClearButton = computed( () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value ); const onClear = () => { textareaValue.value = ''; emit(BentoTextareaEvent.CLEAR); emitValue(''); }; const onInput = (event: InputEvent) => { event.stopImmediatePropagation(); if (!props.disabled && !isReadOnly.value) { textareaValue.value = (event.target as HTMLInputElement).value; /** * Triggered when input value is changed * * @event input * @property {String} inputValue - the updated textarea value */ emitValue(textareaValue.value); } }; const onBlur = () => { textareaElement.value.scrollTop = 0; emit(BentoTextareaEvent.BLUR); }; const onFocus = () => { textareaElement.value.focus(); emit(BentoTextareaEvent.FOCUS); }; const onChange = () => { emit(BentoTextareaEvent.CHANGE); }; const onPressEscape = () => { emit(BentoTextareaEvent.ESCAPE_PRESSED); }; const onKeyDown = (event: KeyboardEvent) => { event.stopPropagation(); emit(BentoTextareaEvent.KEYDOWN, event); }; const onKeyUp = (event: KeyboardEvent) => { event.stopPropagation(); emit(BentoTextareaEvent.KEYUP, event); }; const onMouseDown = () => { isUserResizing.value = true; }; const onMouseUp = () => { isUserResizing.value = false; }; /** * Updates the textarea width depending if the container or the user update its size. * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element. */ const resizeTextareaWrapper = (isTextareaElement = false) => { // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`. const textareaStyleWidth = textareaElement.value.style.width; // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea if (textareaElement.value.style.height) { if (isUserResizing.value) { userSetHeight.value = parseInt(textareaElement.value.style.height, 10); } textareaHeight.value = textareaElement.value.style.height; } // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet // The component wrapper will handle the resizing logic instead if (isTextareaElement && !textareaStyleWidth) { return; } // Width of the whole bento-textarea component const textareaComponentWidth = textareaComponent?.value?.offsetWidth; // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) { textareaWrapperWidth.value = '100%'; } else { // Else the wrapper should always be as wide as the textarea element itself textareaWrapperWidth.value = textareaStyleWidth; } }; const focus = () => { textareaElement.value.focus(); }; defineExpose({ focus, }); onMounted(() => { textareaElementObserver = observeSizeOfElement(textareaElement.value, () => { resizeTextareaWrapper(true); }); textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => { resizeTextareaWrapper(); }); if (isDynamicHeight.value) { calculateHeight(); } if (props.value) { deprecate( 'BentoTextarea "value" property', `The use of "value" prop in "BentoTextarea" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } }); onUnmounted(() => { textareaElementObserver?.disconnect(); textareaComponentObserver?.disconnect(); }); </script> <script lang="ts"> const TEXTAREA_BORDER_WIDTH = parseFloat(BBorderWidthAttention); export default { i18n: { messages }, name: 'bento-textarea', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./textarea.scss" /> 

package/dist/assets/index.ts

@@ -1 +1 @@
-import BentoVue from './install'; export * from './components/accordion'; export * from './components/action-bar'; export * from './components/ai-tag'; export * from './components/alert'; export * from './components/avatar'; export * from './components/button'; export * from './components/dashed-underline'; export * from './components/data-grid'; export * from './components/card'; export * from './components/date-picker'; export * from './components/date-range-picker'; export * from './components/dropdown'; export * from './components/checkbox'; export * from './components/chip'; export * from './components/click-outside'; export * from './components/code-snippet'; export * from './components/country'; export * from './components/currency'; export * from './components/date'; export * from './components/divider'; export * from './components/empty-state'; export * from './components/file-uploader'; export * from './components/filter-bar'; export * from './components/form-layout'; export * from './components/header-with-views'; export * from './components/image'; export * from './components/info-icon'; export * from './components/input-field'; export * from './components/input-field-password'; export * from './components/input-field-phone-number'; export * from './components/inspector'; export * from './components/layout'; export * from './components/loading-indicator'; export * from './components/link'; export * from './components/menu'; export * from './components/modal'; export * from './components/modal-fullscreen'; export * from './components/header'; export * from './components/pagination'; export * from './components/payment-method'; export * from './components/popover'; export * from './components/promo-banner'; export * from './components/radio-group'; export * from './components/rich-text-editor'; export * from './components/search-bar'; export * from './components/secondary-nav'; export * from './components/selection-card'; export * from './components/segmented-control'; export * from './components/sidepanel'; export * from './components/status'; export * from './components/stepper'; export * from './components/structured-list'; export * from './components/summary-grid'; export * from './components/tabs'; export * from './components/tag'; export * from './components/textarea'; export * from './components/timeline'; export * from './components/toast'; export * from './components/toggle'; export * from './components/tutorial'; export * from './components/typography'; // Export Composables export * from './composables/use-bento-base-filter'; export * from './composables/use-bento-currency'; export * from './composables/use-bento-theme'; export * from './composables/use-bento-toast-controller'; export * from './composables/use-click-outside'; export * from './composables/use-form-validate'; // Export Templates export * from './templates/dashboard-template'; export * from './templates/data-grid-template'; // Export Types export * from './types'; // Export Directives export * from './directives'; // AdlVue Plugin export default BentoVue; export { BentoTheme } from './install'; 
+import BentoVue from './install'; export * from './components/accordion'; export * from './components/action-bar'; export * from './components/ai-tag'; export * from './components/alert'; export * from './components/anchor-scroller'; export * from './components/avatar'; export * from './components/button'; export * from './components/dashed-underline'; export * from './components/data-grid'; export * from './components/card'; export * from './components/date-picker'; export * from './components/date-range-picker'; export * from './components/dropdown'; export * from './components/checkbox'; export * from './components/chip'; export * from './components/click-outside'; export * from './components/code-snippet'; export * from './components/country'; export * from './components/currency'; export * from './components/date'; export * from './components/divider'; export * from './components/empty-state'; export * from './components/file-uploader'; export * from './components/filter-bar'; export * from './components/form-layout'; export * from './components/header-with-views'; export * from './components/image'; export * from './components/info-icon'; export * from './components/input-field'; export * from './components/input-field-password'; export * from './components/input-field-phone-number'; export * from './components/inspector'; export * from './components/layout'; export * from './components/loading-indicator'; export * from './components/link'; export * from './components/menu'; export * from './components/modal'; export * from './components/modal-fullscreen'; export * from './components/header'; export * from './components/pagination'; export * from './components/payment-method'; export * from './components/popover'; export * from './components/promo-banner'; export * from './components/radio-group'; export * from './components/rich-text-editor'; export * from './components/search-bar'; export * from './components/secondary-nav'; export * from './components/selection-card'; export * from './components/segmented-control'; export * from './components/sidepanel'; export * from './components/status'; export * from './components/stepper'; export * from './components/structured-list'; export * from './components/summary-grid'; export * from './components/tabs'; export * from './components/tag'; export * from './components/textarea'; export * from './components/timeline'; export * from './components/toast'; export * from './components/toggle'; export * from './components/tutorial'; export * from './components/typography'; // Export Composables export * from './composables/use-bento-base-filter'; export * from './composables/use-bento-currency'; export * from './composables/use-bento-theme'; export * from './composables/use-bento-toast-controller'; export * from './composables/use-click-outside'; export * from './composables/use-form-validate'; // Export Templates export * from './templates/dashboard-template'; export * from './templates/data-grid-template'; // Export Types export * from './types'; // Export Directives export * from './directives'; // AdlVue Plugin export default BentoVue; export { BentoTheme } from './install';