@adyen/bento-mcp 0.1.1 → 0.1.2

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/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" @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, onMounted, onUnmounted, 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 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); // 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" /> 

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/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/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';