@adyen/bento-mcp 0.10.0 → 0.12.0

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

@@ -1 +1 @@
-import { BentoButtonActions } from '@/components/button'; import { BentoHeaderVariant } from './header.types'; import { reactive, ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoLink } from '@/components/link'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoHeader from './header.vue'; import PlusIcon from '@adyen/ui-assets-icons-16/vue/plus'; const meta: Meta = { title: 'Header', component: BentoHeader, argTypes: { variant: { options: Object.values(BentoHeaderVariant), mapping: BentoHeaderVariant, defaultValue: BentoHeaderVariant.PAGE, control: { type: 'radio', }, }, lastUpdated: { control: { type: 'date', }, }, withReloadButton: { control: { type: 'boolean', }, }, unsetDate: { table: { category: 'Storybook controls', }, description: 'Control to hide date, because date control cannot be unset in Storybook. Not a prop.', control: { type: 'boolean', }, }, // Slots description: { control: { disable: true }, description: 'Slot for the description, displayed below the title. Use this slot for rich content like links or formatted text.', table: { type: { summary: 'VNode[]' }, }, }, }, }; const HEADER_DESCRIPTION = "This page shows how Adyen's AI boosts your payment performance and revenue. Monitor your authorization rate uplift and discover data-driven opportunities for further optimization."; const DEFAULT_HEADER_PROPS = { title: 'Title', variant: 'page', }; const EVERYTHING_HEADER_PROPS = { ...DEFAULT_HEADER_PROPS, description: HEADER_DESCRIPTION, actions: [ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', icon: PlusIcon, event: () => undefined }, { title: 'Tertiary action', icon: PlusIcon, event: () => undefined }, { title: 'Another action', event: () => undefined }, ], lastUpdated: new Date(), infoIconTooltipText: 'Title Tooltip Text', }; export default meta; type Story = StoryObj<typeof BentoHeader>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoHeader, BentoButtonActions }, props: Object.keys(argTypes), setup(props) { const date = ref(null); const reloadButtonText = ref('Reload'); const reloadButtonState = ref('start'); const reloadButton = reactive({ title: reloadButtonText, state: reloadButtonState, event: async () => { if (reloadButtonState.value === 'start') { reloadButtonText.value = 'Loading'; reloadButtonState.value = 'loading'; setTimeout(() => { reloadButtonText.value = 'Reload'; reloadButtonState.value = 'start'; }, 2000); } }, }); watch( () => props.unsetDate, (val: boolean) => { date.value = val ? null : props.lastUpdated; }, { immediate: true } ); watch( () => props.lastUpdated, val => { date.value = props.unsetDate !== true && val; }, { immediate: true } ); return { args: isVue2 ? props : _args, date, reloadButton, }; }, template: ` <bento-header v-bind="args" :reloadButton="reloadButton" :last-updated="date" /> `, }), args: DEFAULT_HEADER_PROPS, argTypes: { icon: { table: { disable: true } } }, }; const everythingBagelCode = ` <bento-header title="Title" variant="page" :actions="[ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', icon: PlusIcon, event: () => undefined }, { title: 'Tertiary action', icon: PlusIcon, event: () => undefined }, { title: 'Another action', event: () => undefined }, ]" description="${HEADER_DESCRIPTION}" :lastUpdated="new Date()" infoIconTooltipText="Title Tooltip Text" :reloadButton="{ title: 'Reload', state: 'start', event: async () => { // Your loading button logic }, }" /> `; export const EverythingBagel: Story = { ...Default, args: EVERYTHING_HEADER_PROPS, parameters: storybookDocsParameter(everythingBagelCode), }; const withInfoIconSlotCode = ` <bento-header> <template #infoIconTooltipContent> Description and/or <bento-link to="/">link</bento-link> </template> </bento-header> `; export const WithInfoIconSlot: Story = { ...Default, render: (_args, { argTypes }) => ({ components: { BentoHeader, BentoButtonActions, BentoLink }, props: Object.keys(argTypes), setup(props) { const date = new Date(); return { args: isVue2 ? props : _args, date, }; }, template: ` <bento-header v-bind="args" :last-updated="date"> <template #infoIconTooltipContent> Description and/or <bento-link to="/">link</bento-link> </template> </bento-header> `, }), args: { ...Default.args, }, parameters: storybookDocsParameter(withInfoIconSlotCode), }; 
+import { BentoButtonActions } from '@/components/button'; import { BentoHeaderVariant } from './header.types'; import { reactive, ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoLink } from '@/components/link'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoHeader from './header.vue'; import PlusIcon from '@adyen/ui-assets-icons-16/vue/plus'; const HeaderEverythingBagel = "<template>\n <bento-header\n :actions=\"actions\"\n :description=\"description\"\n info-icon-tooltip-text=\"Title Tooltip Text\"\n :last-updated=\"lastUpdated\"\n :reload-button=\"reloadButton\"\n title=\"Title\"\n />\n</template>\n\n<script setup lang=\"ts\">\n import { type BentoButtonActionsList, BentoHeader, type BentoHeaderReloadButton } from '@adyen/bento-vue2';\n import PlusIcon from '@adyen/ui-assets-icons-16/vue/plus';\n\n const actions: BentoButtonActionsList = [\n { title: 'Primary action', event: () => undefined },\n { title: 'Secondary action', icon: PlusIcon, event: () => undefined },\n { title: 'Tertiary action', icon: PlusIcon, event: () => undefined },\n { title: 'Another action', event: () => undefined },\n ];\n const description =\n \"This page shows how Adyen's AI boosts your payment performance and revenue. Monitor your authorization rate uplift and discover data-driven opportunities for further optimization.\";\n const lastUpdated = new Date();\n const reloadButton: BentoHeaderReloadButton = {\n title: 'Reload',\n state: 'start',\n event: async () => {\n // Add your loading button logic here.\n },\n };\n</script>\n"; const HeaderWithInfoIconSlot = "<template>\n <bento-header :last-updated=\"lastUpdated\" title=\"Title\">\n <template #infoIconTooltipContent> Description and/or <bento-link to=\"/\">link</bento-link> </template>\n </bento-header>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoHeader, BentoLink } from '@adyen/bento-vue2';\n\n const lastUpdated = new Date();\n</script>\n"; const meta: Meta = { title: 'Header', component: BentoHeader, argTypes: { variant: { options: Object.values(BentoHeaderVariant), mapping: BentoHeaderVariant, defaultValue: BentoHeaderVariant.PAGE, control: { type: 'radio', }, }, lastUpdated: { control: { type: 'date', }, }, withReloadButton: { control: { type: 'boolean', }, }, unsetDate: { table: { category: 'Storybook controls', }, description: 'Control to hide date, because date control cannot be unset in Storybook. Not a prop.', control: { type: 'boolean', }, }, // Slots description: { control: { disable: true }, description: 'Slot for the description, displayed below the title. Use this slot for rich content like links or formatted text.', table: { type: { summary: 'VNode[]' }, }, }, }, }; const HEADER_DESCRIPTION = "This page shows how Adyen's AI boosts your payment performance and revenue. Monitor your authorization rate uplift and discover data-driven opportunities for further optimization."; const DEFAULT_HEADER_PROPS = { title: 'Title', variant: 'page', }; const EVERYTHING_HEADER_PROPS = { ...DEFAULT_HEADER_PROPS, description: HEADER_DESCRIPTION, actions: [ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', icon: PlusIcon, event: () => undefined }, { title: 'Tertiary action', icon: PlusIcon, event: () => undefined }, { title: 'Another action', event: () => undefined }, ], lastUpdated: new Date(), infoIconTooltipText: 'Title Tooltip Text', }; export default meta; type Story = StoryObj<typeof BentoHeader>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoHeader, BentoButtonActions }, props: Object.keys(argTypes), setup(props) { const date = ref(null); const reloadButtonText = ref('Reload'); const reloadButtonState = ref('start'); const reloadButton = reactive({ title: reloadButtonText, state: reloadButtonState, event: async () => { if (reloadButtonState.value === 'start') { reloadButtonText.value = 'Loading'; reloadButtonState.value = 'loading'; setTimeout(() => { reloadButtonText.value = 'Reload'; reloadButtonState.value = 'start'; }, 2000); } }, }); watch( () => props.unsetDate, (val: boolean) => { date.value = val ? null : props.lastUpdated; }, { immediate: true } ); watch( () => props.lastUpdated, val => { date.value = props.unsetDate !== true && val; }, { immediate: true } ); return { args: isVue2 ? props : _args, date, reloadButton, }; }, template: ` <bento-header v-bind="args" :reloadButton="reloadButton" :last-updated="date" /> `, }), args: DEFAULT_HEADER_PROPS, argTypes: { icon: { table: { disable: true } } }, }; export const EverythingBagel: Story = { ...Default, args: EVERYTHING_HEADER_PROPS, parameters: storybookDocsParameter(HeaderEverythingBagel), }; export const WithInfoIconSlot: Story = { ...Default, render: (_args, { argTypes }) => ({ components: { BentoHeader, BentoButtonActions, BentoLink }, props: Object.keys(argTypes), setup(props) { const date = new Date(); return { args: isVue2 ? props : _args, date, }; }, template: ` <bento-header v-bind="args" :last-updated="date"> <template #infoIconTooltipContent> Description and/or <bento-link to="/">link</bento-link> </template> </bento-header> `, }), args: { ...Default.args, }, parameters: storybookDocsParameter(HeaderWithInfoIconSlot), }; 

package/dist/assets/components/header/header.types.ts

@@ -1 +1 @@
-import { type BentoLoadingButtonState } from '../button/components/loading-button/loading-button.types'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoHeaderVariant { PAGE = 'page', COMPONENT = 'component', } export interface BentoHeaderReloadButton { title: string; event?: (event: Event) => void; state?: `${BentoLoadingButtonState}`; } 
+import { type TitleDetailsReloadButton } from '../internal/title-details/title-details.types'; /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoHeaderVariant { PAGE = 'page', COMPONENT = 'component', } export type BentoHeaderReloadButton = TitleDetailsReloadButton; 

package/dist/assets/components/header/header.vue

@@ -1 +1 @@
-<template> <header class="b-header" :class="conditionalClasses"> <div class="b-header__wrapper"> <div class="b-header__title"> <div> <bento-typography v-bind="typography" class="b-header__text">{{ title }}</bento-typography> <info-icon-with-popover v-if="infoIconTooltipText || hasSlot('infoIconTooltipContent')" class="b-header__tooltip" :popover-text="infoIconTooltipText" > <template v-if="hasSlot('infoIconTooltipContent')" #default ><slot name="infoIconTooltipContent" /></template> </info-icon-with-popover> </div> </div> <header-meta v-if="description || hasSlot('description') || lastUpdated" class="b-header__meta-container" :description="description" :last-updated="lastUpdated" :reload-button="reloadButton" > <template v-if="hasSlot('description')" #description><slot name="description" /></template> </header-meta> <button-actions-with-menu v-if="actions" :actions="actions" :displayed-actions="2" class="b-header__actions" /> </div> </header> </template> <script lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import { InfoIconWithPopover } from '@/internal'; import { type BentoButtonActionsList } from '@/components/button'; import { useHasSlot } from '@/composables'; import { type BentoHeaderReloadButton, BentoHeaderVariant } from './header.types'; import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography'; import { HeaderMeta } from '@/internal/header-meta'; import ButtonActionsWithMenu from '../internal/button-actions-with-menu/button-actions-with-menu.vue'; export default defineComponent({ name: 'bento-header', components: { BentoTypography, ButtonActionsWithMenu, InfoIconWithPopover, HeaderMeta, }, props: { /** * Array of BentoButtonActionsList to show to the right of the title */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * Text showed under the title */ description: { type: String, default: null }, /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText: { type: InfoIconWithPopover.props.popoverText.type, default: null }, /** * Popover position of the info icon text. */ infoIconPopoverPosition: { type: InfoIconWithPopover.props.popoverPosition.type, default: InfoIconWithPopover.props.popoverPosition.default, validator: InfoIconWithPopover.props.popoverPosition.validator, }, /** * JavaScript "Date" object for when the content was last updated */ lastUpdated: { type: [Date, Number], default: null }, /** * Variant represents type of Header * @values page, component */ variant: { type: String as PropType<BentoHeaderVariant | `${BentoHeaderVariant}`>, default: BentoHeaderVariant.PAGE, validator: (value: BentoHeaderVariant) => Object.values(BentoHeaderVariant).includes(value), }, /** * Text used as a title */ title: { type: String, required: true }, /** * Reload button which shows next to the header's timestamp * {@see BentoHeaderReloadButton} */ reloadButton: { type: Object as PropType<BentoHeaderReloadButton>, default: null, }, }, emits: ['reload'], setup(props, { slots }) { const conditionalClasses = computed(() => ({ 'b-header--component': props.variant === BentoHeaderVariant.COMPONENT, })); const typography = computed(() => ({ el: props.variant === BentoHeaderVariant.PAGE ? BentoTypographyElement.H1 : BentoTypographyElement.H2, variant: BentoTypographyVariant.TITLE, medium: props.variant === BentoHeaderVariant.COMPONENT, large: props.variant === BentoHeaderVariant.PAGE, })); return { hasSlot: useHasSlot(slots), conditionalClasses, typography, }; }, }); </script> <style lang="scss" scoped src="./header.scss" /> 
+<template> <header class="b-header" :class="conditionalClasses"> <div class="b-header__wrapper"> <div class="b-header__title"> <div> <bento-typography v-bind="typography" class="b-header__text">{{ title }}</bento-typography> <info-icon-with-popover v-if="infoIconTooltipText || hasSlot('infoIconTooltipContent')" class="b-header__tooltip" :popover-text="infoIconTooltipText" > <template v-if="hasSlot('infoIconTooltipContent')" #default ><slot name="infoIconTooltipContent" /></template> </info-icon-with-popover> </div> </div> <title-details v-if="description || hasSlot('description') || lastUpdated" class="b-header__meta-container" :description="description" :last-updated="lastUpdated" :reload-button="reloadButton" > <template v-if="hasSlot('description')" #description><slot name="description" /></template> </title-details> <button-actions-with-menu v-if="actions" :actions="actions" :displayed-actions="2" class="b-header__actions" /> </div> </header> </template> <script lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import { InfoIconWithPopover } from '@/internal'; import { type BentoButtonActionsList } from '@/components/button'; import { useHasSlot } from '@/composables'; import { type BentoHeaderReloadButton, BentoHeaderVariant } from './header.types'; import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography'; import { TitleDetails } from '@/internal/title-details'; import ButtonActionsWithMenu from '../internal/button-actions-with-menu/button-actions-with-menu.vue'; export default defineComponent({ name: 'bento-header', components: { BentoTypography, ButtonActionsWithMenu, InfoIconWithPopover, TitleDetails, }, props: { /** * Array of BentoButtonActionsList to show to the right of the title */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * Text showed under the title */ description: { type: String, default: null }, /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText: { type: InfoIconWithPopover.props.popoverText.type, default: null }, /** * Popover position of the info icon text. */ infoIconPopoverPosition: { type: InfoIconWithPopover.props.popoverPosition.type, default: InfoIconWithPopover.props.popoverPosition.default, validator: InfoIconWithPopover.props.popoverPosition.validator, }, /** * JavaScript "Date" object for when the content was last updated */ lastUpdated: { type: [Date, Number], default: null }, /** * Variant represents type of Header * @values page, component */ variant: { type: String as PropType<BentoHeaderVariant | `${BentoHeaderVariant}`>, default: BentoHeaderVariant.PAGE, validator: (value: BentoHeaderVariant) => Object.values(BentoHeaderVariant).includes(value), }, /** * Text used as a title */ title: { type: String, required: true }, /** * Reload button which shows next to the header's timestamp * {@see BentoHeaderReloadButton} */ reloadButton: { type: Object as PropType<BentoHeaderReloadButton>, default: null, }, }, emits: ['reload'], setup(props, { slots }) { const conditionalClasses = computed(() => ({ 'b-header--component': props.variant === BentoHeaderVariant.COMPONENT, })); const typography = computed(() => ({ el: props.variant === BentoHeaderVariant.PAGE ? BentoTypographyElement.H1 : BentoTypographyElement.H2, variant: BentoTypographyVariant.TITLE, medium: props.variant === BentoHeaderVariant.COMPONENT, large: props.variant === BentoHeaderVariant.PAGE, })); return { hasSlot: useHasSlot(slots), conditionalClasses, typography, }; }, }); </script> <style lang="scss" scoped src="./header.scss" /> 

package/dist/assets/components/header-with-views/components/header-with-views-all-views/header-with-views-all-views.vue

@@ -1 +1 @@
-<template> <div ref="allViewsRef" class="b-header-with-views-all-views" data-testid="header-with-views-all-views" @keydown.esc.stop.prevent="closeMenu" > <bento-toggle-button ref="allViewsMenuToggleRef" aria-haspopup="true" :aria-expanded="showMenu" :aria-controls="showMenu ? menuPopoverId : null" variant="tertiary" :toggled="showMenu" @click="toggleShowMenu" > <template #iconLeft> <menu-icon :svg-title="t('toggleAllViews')" /> </template> </bento-toggle-button> <bento-popover v-if="allViewsMenuToggleRef" :id="menuPopoverId" ref="allViewsMenuPopoverRef" class="b-header-with-views-all-views__popover" :open="showMenu" :target-element="allViewsMenuToggleRef" :fixed-positioning="true" :overflow-visible="true" position="bottom-end" without-space > <output v-if="draggedViewIndex !== null && draggingOverViewIndex !== null" class="b-header-with-views-all-views__popover-status" > {{ t('movingDraggedToPosition', { dragged: menuItems[draggedViewIndex].label, draggingOver: menuItems[draggingOverViewIndex].label, }) }} </output> <ul ref="menuRef" class="b-header-with-views-all-views__popover-menu"> <li v-for="(item, index) in menuItems" ref="menuItemRefs" :key="index" data-drag-item class="b-header-with-views-all-views__popover-menu-item" :class="conditionalDraggableItemClass(index)" @pointerdown="handleDragStart(index, $event)" > <div class="b-header-with-views-all-views__popover-menu-item-content"> <bento-button data-drag-trigger class="b-header-with-views-all-views__popover-menu-item-button b-header-with-views-all-views__popover-menu-item-button-reorder" variant="tertiary" :aria-pressed="isItemDragged(index)" @keydown.enter.native="handleDragKeyboardToggle(index, $event)" @keydown.space.native="handleDragKeyboardToggle(index, $event)" @keydown.down.native="handleDragKeyboardMove(UseDragAndDropViewsDirectionEnum.DOWN, $event)" @keydown.up.native="handleDragKeyboardMove(UseDragAndDropViewsDirectionEnum.UP, $event)" @keydown.esc.native="handleDragStop" > <template #iconLeft> <grab-icon :svg-title="t('reorderView', { label: item.label })" /> </template> </bento-button> <bento-button data-view-select class="b-header-with-views-all-views__popover-menu-item-button b-header-with-views-all-views__popover-menu-item-button-select" variant="tertiary" @click="emit('select:view', index)" > <template #iconLeft> <span class="b-header-with-views-all-views__popover-menu-item-button-icon" :class="`b-header-with-views-all-views__popover-menu-item-button-icon--${item.iconColor}`" aria-hidden="true" > <component :is="BentoHeaderWithViewsItemIconElement[item.icon]" /> </span> </template> <bento-typography el="span" variant="body" class="b-header-with-views-all-views__popover-menu-item-button-text" > {{ item.label }} </bento-typography> </bento-button> <bento-menu ref="editViewMenuRefs" data-view-menu class="b-header-with-views-all-views__popover-menu-item-button" :button="{ variant: 'tertiary', condensed: true }" :close-on-click-outside-options="menuCloseOnClickOutsideOptions" :data="menuItemsActions" menu-position="right-start" @open="emit('open:view-menu', index)" @close="emit('close:view-menu', index)" @keydown.tab.native.capture="closeViewMenuNatively(index)" > <template #iconLeft> <options-horizontal-icon :svg-title="t('openViewOptions', { label: item.label })" /> </template> </bento-menu> </div> </li> </ul> </bento-popover> </div> </template> <script setup lang="ts"> import { BentoButton, BentoToggleButton } from '@/components/button'; import { BentoHeaderWithViewsItemIconElement } from '@/components/header-with-views/header-with-views.types'; import { BentoMenu } from '@/components/menu'; import { BentoPopover } from '@/components/popover'; import { BentoTypography } from '@/components/typography'; import { useClickOutside } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import GrabIcon from '@adyen/ui-assets-icons-16/vue/grab'; import MenuIcon from '@adyen/ui-assets-icons-16/vue/menu'; import OptionsHorizontalIcon from '@adyen/ui-assets-icons-16/vue/options-horizontal'; import { nextTick, ref, toRef } from 'vue'; import { useDragAndDropViews, UseDragAndDropViewsDirectionEnum } from '../../composables'; import { type HeaderWithViewsAllViewsProps } from './header-with-views-all-views.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<HeaderWithViewsAllViewsProps>(), {}); const emit = defineEmits<{ /** * Emitted when the "all views" menu is requested to be closed. */ (e: 'close:all-views'): void; /** * Emitted when a specific view's action menu is requested to be closed. */ (e: 'close:view-menu', index: number): void; /** * Emitted when the "all views" menu is requested to be opened. */ (e: 'open:all-views'): void; /** * Emitted when a specific view's action menu is requested to be opened. */ (e: 'open:view-menu', index: number): void; /** * Emitted when a view item is selected from the "all views" menu. */ (e: 'select:view', index: number): void; /** * Emitted when the order of views has been changed due to drag and drop. */ (e: 'reorder:view', newViews: HeaderWithViewsAllViewsProps['menuItems']): void; }>(); const showMenu = ref(false); const allViewsMenuToggleRef = ref(null); const allViewsMenuPopoverRef = ref(null); const allViewsRef = ref(null); const menuRef = ref(null); const menuItemRefs = ref<Array<HTMLElement>>(null); const editViewMenuRefs = ref(null); const menuPopoverId = generateUid('menu-popover'); const { t } = useI18n<{ message: MessageSchema }>({ messages }); useClickOutside(allViewsMenuPopoverRef, () => closeMenu(), { ignore: [allViewsMenuToggleRef, ...(props.menuCloseOnClickOutsideOptions?.ignore ?? [])], }); const openMenu = () => { showMenu.value = true; emit('open:all-views'); }; const closeMenu = async () => { if (!showMenu.value) { return; } showMenu.value = false; emit('close:all-views'); await nextTick(); allViewsMenuToggleRef.value.$el.focus(); }; const toggleShowMenu = (e: MouseEvent) => { e.stopPropagation(); if (!showMenu.value) { openMenu(); } else { closeMenu(); } }; const { draggedViewIndex, draggingOverViewIndex, isItemDragged, handleDragKeyboardMove, handleDragKeyboardToggle, handleDragStart, handleDragStop, } = useDragAndDropViews({ items: toRef(props, 'menuItems'), itemRefs: menuItemRefs, onDrop: value => emit('reorder:view', value), }); const conditionalDraggableItemClass = (index: number) => ({ ['b-header-with-views-all-views__popover-menu-item--dragging']: isItemDragged(index), }); const closeViewMenuNatively = (index: number) => { // skip built-in refocus on the menu button when menu is closed // enables tab to flow as intended by HTML spec editViewMenuRefs.value[index].closeMenu(false); }; </script> <script lang="ts"> /** * Internal component to handle the logic for the list of all views available. */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./header-with-views-all-views.scss" /> 
+<template> <div ref="allViewsRef" class="b-header-with-views-all-views" data-testid="header-with-views-all-views" @keydown.esc.stop.prevent="closeMenu" > <bento-toggle-button ref="allViewsMenuToggleRef" aria-haspopup="true" :aria-expanded="showMenu" :aria-controls="showMenu ? menuPopoverId : null" variant="tertiary" :toggled="showMenu" @click="toggleShowMenu" > <template #iconLeft> <menu-icon :svg-title="t('toggleAllViews')" /> </template> </bento-toggle-button> <bento-popover v-if="allViewsMenuToggleRef" :id="menuPopoverId" ref="allViewsMenuPopoverRef" class="b-header-with-views-all-views__popover" :open="showMenu" :target-element="allViewsMenuToggleRef" :fixed-positioning="true" :overflow-visible="true" position="bottom-end" without-space > <output v-if="draggedViewIndex !== null && draggingOverViewIndex !== null" class="b-header-with-views-all-views__popover-status" > {{ t('movingDraggedToPosition', { dragged: menuItems[draggedViewIndex].label, draggingOver: menuItems[draggingOverViewIndex].label, }) }} </output> <ul ref="menuRef" class="b-header-with-views-all-views__popover-menu"> <li v-for="(item, index) in menuItems" ref="menuItemRefs" :key="index" data-drag-item class="b-header-with-views-all-views__popover-menu-item" :class="conditionalDraggableItemClass(index)" @pointerdown="handleDragStart(index, $event)" > <div class="b-header-with-views-all-views__popover-menu-item-content"> <bento-button data-drag-trigger class="b-header-with-views-all-views__popover-menu-item-button b-header-with-views-all-views__popover-menu-item-button-reorder" variant="tertiary" :aria-pressed="isItemDragged(index)" @keydown.enter.native="handleDragKeyboardToggle(index, $event)" @keydown.space.native="handleDragKeyboardToggle(index, $event)" @keydown.down.native="handleDragKeyboardMove(UseDragAndDropViewsDirectionEnum.DOWN, $event)" @keydown.up.native="handleDragKeyboardMove(UseDragAndDropViewsDirectionEnum.UP, $event)" @keydown.esc.native="handleDragStop" > <template #iconLeft> <grab-icon :svg-title="t('reorderView', { label: item.label })" /> </template> </bento-button> <bento-button data-view-select class="b-header-with-views-all-views__popover-menu-item-button b-header-with-views-all-views__popover-menu-item-button-select" variant="tertiary" @click="emit('select:view', index)" > <template #iconLeft> <span class="b-header-with-views-all-views__popover-menu-item-button-icon" :class="`b-header-with-views-all-views__popover-menu-item-button-icon--${item.iconColor}`" aria-hidden="true" > <component :is="BentoHeaderWithViewsItemIconElement[item.icon]" /> </span> </template> <bento-typography el="span" variant="body" class="b-header-with-views-all-views__popover-menu-item-button-text" > {{ item.label }} </bento-typography> </bento-button> <bento-menu ref="editViewMenuRefs" data-view-menu class="b-header-with-views-all-views__popover-menu-item-button" :button="{ variant: 'tertiary', condensed: true, 'aria-label': t('openViewOptions', { label: item.label }), }" :close-on-click-outside-options="menuCloseOnClickOutsideOptions" :data="menuItemsActions" menu-position="right-start" @open="emit('open:view-menu', index)" @close="emit('close:view-menu', index)" @keydown.tab.native.capture="closeViewMenuNatively(index)" > <template #iconLeft> <options-horizontal-icon :aria-hidden="true" /> </template> </bento-menu> </div> </li> </ul> </bento-popover> </div> </template> <script setup lang="ts"> import { BentoButton, BentoToggleButton } from '@/components/button'; import { BentoHeaderWithViewsItemIconElement } from '@/components/header-with-views/header-with-views.internal.types'; import { BentoMenu } from '@/components/menu'; import { BentoPopover } from '@/components/popover'; import { BentoTypography } from '@/components/typography'; import { useClickOutside } from '@/composables'; import { generateUid } from '@/utils/ts/generate-uid'; import { useI18n } from '@/utils/ts/i18n'; import GrabIcon from '@adyen/ui-assets-icons-16/vue/grab'; import MenuIcon from '@adyen/ui-assets-icons-16/vue/menu'; import OptionsHorizontalIcon from '@adyen/ui-assets-icons-16/vue/options-horizontal'; import { nextTick, ref, toRef } from 'vue'; import { useDragAndDropViews, UseDragAndDropViewsDirectionEnum } from '../../composables'; import { type HeaderWithViewsAllViewsProps } from './header-with-views-all-views.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<HeaderWithViewsAllViewsProps>(), {}); const emit = defineEmits<{ /** * Emitted when the "all views" menu is requested to be closed. */ (e: 'close:all-views'): void; /** * Emitted when a specific view's action menu is requested to be closed. */ (e: 'close:view-menu', index: number): void; /** * Emitted when the "all views" menu is requested to be opened. */ (e: 'open:all-views'): void; /** * Emitted when a specific view's action menu is requested to be opened. */ (e: 'open:view-menu', index: number): void; /** * Emitted when a view item is selected from the "all views" menu. */ (e: 'select:view', index: number): void; /** * Emitted when the order of views has been changed due to drag and drop. */ (e: 'reorder:view', newViews: HeaderWithViewsAllViewsProps['menuItems']): void; }>(); const showMenu = ref(false); const allViewsMenuToggleRef = ref(null); const allViewsMenuPopoverRef = ref(null); const allViewsRef = ref(null); const menuRef = ref(null); const menuItemRefs = ref<Array<HTMLElement>>(null); const editViewMenuRefs = ref(null); const menuPopoverId = generateUid('menu-popover'); const { t } = useI18n<{ message: MessageSchema }>({ messages }); useClickOutside(allViewsMenuPopoverRef, () => closeMenu(), { ignore: [allViewsMenuToggleRef, ...(props.menuCloseOnClickOutsideOptions?.ignore ?? [])], }); const openMenu = () => { showMenu.value = true; emit('open:all-views'); }; const closeMenu = async () => { if (!showMenu.value) { return; } showMenu.value = false; emit('close:all-views'); await nextTick(); allViewsMenuToggleRef.value.$el.focus(); }; const toggleShowMenu = (e: MouseEvent) => { e.stopPropagation(); if (!showMenu.value) { openMenu(); } else { closeMenu(); } }; const { draggedViewIndex, draggingOverViewIndex, isItemDragged, handleDragKeyboardMove, handleDragKeyboardToggle, handleDragStart, handleDragStop, } = useDragAndDropViews({ items: toRef(props, 'menuItems'), itemRefs: menuItemRefs, onDrop: value => emit('reorder:view', value), }); const conditionalDraggableItemClass = (index: number) => ({ ['b-header-with-views-all-views__popover-menu-item--dragging']: isItemDragged(index), }); const closeViewMenuNatively = (index: number) => { // skip built-in refocus on the menu button when menu is closed // enables tab to flow as intended by HTML spec editViewMenuRefs.value[index].closeMenu(false); }; </script> <script lang="ts"> /** * Internal component to handle the logic for the list of all views available. */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./header-with-views-all-views.scss" /> 

package/dist/assets/components/header-with-views/components/header-with-views-item-edit-form/header-with-views-edit-form.types.ts

@@ -1 +1 @@
-import { type BentoHeaderWithViewsItemAdditionalConfig, type BentoHeaderWithViewsItemErrors, type BentoHeaderWithViewsItemIcon, type BentoHeaderWithViewsItemIconColor, } from '../../header-with-views.types'; type HeaderWithViewsEditFormContext = `${HeaderWithViewsEditFormContextEnum}`; export enum HeaderWithViewsEditFormContextEnum { EDIT = 'edit', CREATE = 'create', } export interface HeaderWithViewsEditFormProps { additionalFormItem?: BentoHeaderWithViewsItemAdditionalConfig; context?: HeaderWithViewsEditFormContext; disableCustomization?: boolean; errors?: BentoHeaderWithViewsItemErrors; icon?: BentoHeaderWithViewsItemIcon; iconColor?: BentoHeaderWithViewsItemIconColor; label?: string; } 
+import { type BentoHeaderWithViewsItemAdditionalConfig, type BentoHeaderWithViewsItemIcon, type BentoHeaderWithViewsItemIconColor, } from '../../header-with-views.types'; import { type BentoHeaderWithViewsItemErrors } from '../../header-with-views.internal.types'; type HeaderWithViewsEditFormContext = `${HeaderWithViewsEditFormContextEnum}`; export enum HeaderWithViewsEditFormContextEnum { EDIT = 'edit', CREATE = 'create', } export interface HeaderWithViewsEditFormProps { additionalFormItem?: BentoHeaderWithViewsItemAdditionalConfig; context?: HeaderWithViewsEditFormContext; disableCustomization?: boolean; errors?: BentoHeaderWithViewsItemErrors; icon?: BentoHeaderWithViewsItemIcon; iconColor?: BentoHeaderWithViewsItemIconColor; label?: string; } 

package/dist/assets/components/header-with-views/components/header-with-views-item-edit-form/header-with-views-edit-form.vue

@@ -1 +1 @@
-<template> <form class="b-header-with-views-edit-form"> <field-label>{{ t('title') }}</field-label> <div class="b-header-with-views-edit-form__icon-choice-alert" role="alert">{{ computedAlert }}</div> <div class="b-header-with-views-edit-form__icon-selector"> <bento-toggle-button ref="iconSelectorButtonRef" variant="secondary" :aria-expanded="showIconSelectorPopover" :aria-controls="showIconSelectorPopover ? iconPopoverId : null" :disabled="props.disableCustomization" :toggled="showIconSelectorPopover" @click="showIconSelectorPopover = !showIconSelectorPopover" > <template #iconLeft> <component :is="BentoHeaderWithViewsItemIconElement[iconValue]" :class="conditionalIconClass" :svg-title="t('viewIcons')" /> </template> </bento-toggle-button> <bento-popover v-if="iconSelectorButtonRef && !props.disableCustomization" :id="iconPopoverId" ref="iconPopoverRef" class="b-header-with-views-edit-form__icon-selector-popover" :target-element="iconSelectorButtonRef" :open="showIconSelectorPopover" :fallback-position="['bottom-end']" :fixed-positioning="true" :overflow-visible="true" position="bottom-end" @dismiss="showIconSelectorPopover = false" @keydown.escape.native.capture.stop.prevent="showIconSelectorPopover = false" > <div class="b-header-with-views-edit-form__icon-panel"> <div class="b-header-with-views-edit-form__icon-color-options"> <div v-for="(color, index) in iconColorOptions" :key="index" class="b-header-with-views-edit-form__icon-options-wrapper" > <bento-button class="b-header-with-views-edit-form__icon-color-options-button" :class="`b-header-with-views-edit-form__icon-color--${color}`" :aria-selected="iconColorValue === color" variant="tertiary" @click="iconColorValue = color" > <template #iconLeft> <circle-filled-icon :svg-title="t('selectIconColor', { color })" ></circle-filled-icon> </template> </bento-button> </div> </div> <bento-divider /> <div class="b-header-with-views-edit-form__icon-options"> <bento-button v-for="(icon, index) in iconOptions" :key="index" class="b-header-with-views-edit-form__icon-options-button" :aria-selected="iconValue === icon" variant="tertiary" @click="iconValue = icon" > <template #iconLeft> <component :is="BentoHeaderWithViewsItemIconElement[icon]" :svg-title="t('selectIcon', { icon })" /> </template> </bento-button> </div> </div> </bento-popover> <bento-input-field ref="inputFieldRef" class="b-header-with-views-edit-form__icon-selector-input" :aria-label="t('viewLabel')" :error-message="errors.label" :model-value="labelValue" @keydown.enter.prevent="emit('keydown:enter', computedFormValues)" @update:model-value="handleInput" @blur="emit('blur:label', labelValue)" ></bento-input-field> </div> <bento-checkbox v-if="additionalFormItem" :model-value="additionalFormItemValue" class="b-header-with-views-edit-form__additional-config" @update:model-value="handleAdditionalFormItemChange" > {{ additionalFormItem.label }} </bento-checkbox> <bento-button-actions class="b-header-with-views-edit-form__actions" :actions="computedActions" layout="buttons-end" /> </form> </template> <script setup lang="ts"> import { BentoButton, BentoButtonActions, type BentoButtonActionsList, BentoToggleButton, } from '@/components/button'; import { BentoCheckbox } from '@/components/checkbox'; import { BentoDivider } from '@/components/divider'; import { BentoInputField } from '@/components/input-field'; import { BentoPopover } from '@/components/popover'; import { useClickOutside } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { FieldLabel } from '@/internal'; import { debounce } from '@/utils/ts/debounce'; import { useI18n } from '@/utils/ts/i18n'; import CircleFilledIcon from '@adyen/ui-assets-icons-16/vue/circle-filled'; import { onKeyStroke } from '@vueuse/core'; import { computed, nextTick, onMounted, ref, watch } from 'vue'; import { type BentoHeaderWithViewsItem, BentoHeaderWithViewsItemIconColorEnum, BentoHeaderWithViewsItemIconElement, BentoHeaderWithViewsItemIconEnum, } from '../../header-with-views.types'; import { HeaderWithViewsEditFormContextEnum, type HeaderWithViewsEditFormProps, } from './header-with-views-edit-form.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<HeaderWithViewsEditFormProps>(), { additionalFormItem: null, context: HeaderWithViewsEditFormContextEnum.CREATE, disableCustomization: false, errors: null, label: '', icon: BentoHeaderWithViewsItemIconEnum.STACK, iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, }); const emit = defineEmits<{ /** * Emitted when form is canceled. */ (e: 'cancel'): void; /** * Emitted when the item is updated. * Typically used to sync changes to the parent component. */ (e: 'update', value: BentoHeaderWithViewsItem): void; /** * Emitted when the item is requested to be deleted. */ (e: 'delete', value: BentoHeaderWithViewsItem): void; /** * Emitted when the label of the item is modified via input. */ (e: 'input:label', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when the label input loses focus (blur event). */ (e: 'blur:label', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when the Enter key is pressed while interacting with the item. */ (e: 'keydown:enter', value: BentoHeaderWithViewsItem): void; }>(); // form inputs const labelValue = ref(props.label); const iconValue = ref(props.icon); const iconColorValue = ref(props.iconColor); const additionalFormItemValue = ref<boolean>(props.additionalFormItem?.value ?? false); const isFormDirty = ref(false); // refs const iconSelectorButtonRef = ref(null); const iconPopoverRef = ref(null); const inputFieldRef = ref(null); const iconPopoverId = generateUid('iconPopover'); // view controls const showIconSelectorPopover = ref(false); const iconOptions = computed(() => Object.values(BentoHeaderWithViewsItemIconEnum)); const iconColorOptions = computed(() => Object.values(BentoHeaderWithViewsItemIconColorEnum)); const hasErrors = computed(() => Object.values(props.errors).some(error => error.length > 0)); const computedAlert = computed( () => `${t('selected')}: ${iconValue.value} ${t('icon')}, ${t('color')} ${iconColorValue.value}` ); const computedActions = computed<BentoButtonActionsList>(() => [ ...(props.context === HeaderWithViewsEditFormContextEnum.EDIT ? // edit mode [ { title: t('save'), type: 'submit', event: () => { if (hasErrors.value) { return; } updateView(); }, }, ] : // create mode [ { title: t('create'), type: 'submit', event: () => { if (!isFormDirty.value || hasErrors.value) { return; } updateView(); }, }, ]), { title: t('cancel'), event: resetView, }, ]); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const computedFormValues = computed(() => ({ iconColor: iconColorValue.value, icon: iconValue.value, label: labelValue.value, ...(props.additionalFormItem ? { additionalViewSetting: { label: props.additionalFormItem.label, value: additionalFormItemValue.value, }, } : []), })); const conditionalIconClass = computed(() => props.disableCustomization ? '' : `b-header-with-views-edit-form__icon-color--${iconColorValue.value}` ); const hideIconSelectorPopover = () => { showIconSelectorPopover.value = false; }; const updateView = () => { emit('update', computedFormValues.value); }; const resetView = () => { iconValue.value = props.icon; iconColorValue.value = props.iconColor; labelValue.value = props.label; emit('cancel'); }; const handleInput = debounce((value: string) => { labelValue.value = value; isFormDirty.value = true; }, 200); const handleAdditionalFormItemChange = (value: boolean) => { additionalFormItemValue.value = value; isFormDirty.value = true; }; useClickOutside(iconPopoverRef, hideIconSelectorPopover, { ignore: [iconSelectorButtonRef], }); onKeyStroke('Escape', hideIconSelectorPopover, { target: iconPopoverRef, eventName: 'keydown', }); watch(labelValue, value => emit('input:label', value)); onMounted(async () => { // force focus to start from the input field await nextTick(); inputFieldRef.value.$refs.inputFieldElement.focus(); }); </script> <script lang="ts"> /** * Internal component to which presents a form for handling the logic of editing and creating a view. */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./header-with-views-edit-form.scss" /> 
+<template> <form class="b-header-with-views-edit-form"> <field-label>{{ t('title') }}</field-label> <div class="b-header-with-views-edit-form__icon-choice-alert" role="alert">{{ computedAlert }}</div> <div class="b-header-with-views-edit-form__icon-selector"> <bento-toggle-button ref="iconSelectorButtonRef" variant="secondary" :aria-expanded="showIconSelectorPopover" :aria-controls="showIconSelectorPopover ? iconPopoverId : null" :disabled="props.disableCustomization" :toggled="showIconSelectorPopover" @click="showIconSelectorPopover = !showIconSelectorPopover" > <template #iconLeft> <component :is="BentoHeaderWithViewsItemIconElement[iconValue]" :class="conditionalIconClass" :svg-title="t('viewIcons')" /> </template> </bento-toggle-button> <bento-popover v-if="iconSelectorButtonRef && !props.disableCustomization" :id="iconPopoverId" ref="iconPopoverRef" class="b-header-with-views-edit-form__icon-selector-popover" :target-element="iconSelectorButtonRef" :open="showIconSelectorPopover" :fallback-position="['bottom-end']" :fixed-positioning="true" :overflow-visible="true" position="bottom-end" @dismiss="showIconSelectorPopover = false" @keydown.escape.native.capture.stop.prevent="showIconSelectorPopover = false" > <div class="b-header-with-views-edit-form__icon-panel"> <div class="b-header-with-views-edit-form__icon-color-options"> <div v-for="(color, index) in iconColorOptions" :key="index" class="b-header-with-views-edit-form__icon-options-wrapper" > <bento-button class="b-header-with-views-edit-form__icon-color-options-button" :class="`b-header-with-views-edit-form__icon-color--${color}`" :aria-selected="iconColorValue === color" variant="tertiary" @click="iconColorValue = color" > <template #iconLeft> <circle-filled-icon :svg-title="t('selectIconColor', { color })" ></circle-filled-icon> </template> </bento-button> </div> </div> <bento-divider /> <div class="b-header-with-views-edit-form__icon-options"> <bento-button v-for="(icon, index) in iconOptions" :key="index" class="b-header-with-views-edit-form__icon-options-button" :aria-selected="iconValue === icon" variant="tertiary" @click="iconValue = icon" > <template #iconLeft> <component :is="BentoHeaderWithViewsItemIconElement[icon]" :svg-title="t('selectIcon', { icon })" /> </template> </bento-button> </div> </div> </bento-popover> <bento-input-field ref="inputFieldRef" class="b-header-with-views-edit-form__icon-selector-input" :aria-label="t('viewLabel')" :error-message="errors.label" :model-value="labelValue" @keydown.enter.prevent="handleKeydownEnter" @update:model-value="handleInput" @blur="emit('blur:label', labelValue)" ></bento-input-field> </div> <bento-checkbox v-if="additionalFormItem" :model-value="additionalFormItemValue" class="b-header-with-views-edit-form__additional-config" @update:model-value="handleAdditionalFormItemChange" > {{ additionalFormItem.label }} </bento-checkbox> <bento-button-actions class="b-header-with-views-edit-form__actions" :actions="computedActions" layout="buttons-end" /> </form> </template> <script setup lang="ts"> import { BentoButton, BentoButtonActions, type BentoButtonActionsList, BentoToggleButton, } from '@/components/button'; import { BentoCheckbox } from '@/components/checkbox'; import { BentoDivider } from '@/components/divider'; import { BentoInputField } from '@/components/input-field'; import { BentoPopover } from '@/components/popover'; import { useClickOutside } from '@/composables'; import { generateUid } from '@/utils/ts/generate-uid'; import { FieldLabel } from '@/internal'; import { debounce } from '@/utils/ts/debounce'; import { useI18n } from '@/utils/ts/i18n'; import CircleFilledIcon from '@adyen/ui-assets-icons-16/vue/circle-filled'; import { onKeyStroke } from '@vueuse/core'; import { computed, nextTick, onMounted, ref, watch } from 'vue'; import { BentoHeaderWithViewsItemIconColorEnum, BentoHeaderWithViewsItemIconElement, BentoHeaderWithViewsItemIconEnum, } from '../../header-with-views.internal.types'; import { type BentoHeaderWithViewsItem } from '../../header-with-views.types'; import { HeaderWithViewsEditFormContextEnum, type HeaderWithViewsEditFormProps, } from './header-with-views-edit-form.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<HeaderWithViewsEditFormProps>(), { additionalFormItem: null, context: HeaderWithViewsEditFormContextEnum.CREATE, disableCustomization: false, errors: null, label: '', icon: BentoHeaderWithViewsItemIconEnum.STACK, iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, }); const emit = defineEmits<{ /** * Emitted when form is canceled. */ (e: 'cancel'): void; /** * Emitted when the item is updated. * Typically used to sync changes to the parent component. */ (e: 'update', value: BentoHeaderWithViewsItem): void; /** * Emitted when the item is requested to be deleted. */ (e: 'delete', value: BentoHeaderWithViewsItem): void; /** * Emitted when the label of the item is modified via input. */ (e: 'input:label', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when the label input loses focus (blur event). */ (e: 'blur:label', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when the Enter key is pressed while interacting with the item. */ (e: 'keydown:enter', value: BentoHeaderWithViewsItem): void; }>(); // form inputs const labelValue = ref(props.label); const iconValue = ref(props.icon); const iconColorValue = ref(props.iconColor); const additionalFormItemValue = ref<boolean>(props.additionalFormItem?.value ?? false); const isFormDirty = ref(false); // refs const iconSelectorButtonRef = ref(null); const iconPopoverRef = ref(null); const inputFieldRef = ref(null); const iconPopoverId = generateUid('iconPopover'); // view controls const showIconSelectorPopover = ref(false); const iconOptions = computed(() => Object.values(BentoHeaderWithViewsItemIconEnum)); const iconColorOptions = computed(() => Object.values(BentoHeaderWithViewsItemIconColorEnum)); const hasErrors = computed(() => Object.values(props.errors).some(error => error.length > 0)); const computedAlert = computed( () => `${t('selected')}: ${iconValue.value} ${t('icon')}, ${t('color')} ${iconColorValue.value}` ); const computedActions = computed<BentoButtonActionsList>(() => [ ...(props.context === HeaderWithViewsEditFormContextEnum.EDIT ? // edit mode [ { title: t('save'), type: 'submit', event: () => { if (hasErrors.value) { return; } updateView(); }, }, ] : // create mode [ { title: t('create'), type: 'submit', event: () => { if (!isFormDirty.value || hasErrors.value) { return; } updateView(); }, }, ]), { title: t('cancel'), event: resetView, }, ]); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const computedFormValues = computed(() => ({ iconColor: iconColorValue.value, icon: iconValue.value, label: labelValue.value, ...(props.additionalFormItem ? { additionalViewSetting: { label: props.additionalFormItem.label, value: additionalFormItemValue.value, }, } : []), })); const conditionalIconClass = computed(() => props.disableCustomization ? '' : `b-header-with-views-edit-form__icon-color--${iconColorValue.value}` ); const hideIconSelectorPopover = () => { showIconSelectorPopover.value = false; }; const updateView = () => { emit('update', computedFormValues.value); }; const resetView = () => { iconValue.value = props.icon; iconColorValue.value = props.iconColor; labelValue.value = props.label; emit('cancel'); }; const handleInput = debounce((value: string) => { labelValue.value = value; isFormDirty.value = true; }, 200); const handleKeydownEnter = (event: KeyboardEvent) => { labelValue.value = (event.target as HTMLInputElement).value; isFormDirty.value = true; emit('keydown:enter', computedFormValues.value); }; const handleAdditionalFormItemChange = (value: boolean) => { additionalFormItemValue.value = value; isFormDirty.value = true; }; useClickOutside(iconPopoverRef, hideIconSelectorPopover, { ignore: [iconSelectorButtonRef], }); onKeyStroke('Escape', hideIconSelectorPopover, { target: iconPopoverRef, eventName: 'keydown', }); watch(labelValue, value => emit('input:label', value)); onMounted(async () => { // force focus to start from the input field await nextTick(); inputFieldRef.value.$refs.inputFieldElement.focus(); }); </script> <script lang="ts"> /** * Internal component to which presents a form for handling the logic of editing and creating a view. */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./header-with-views-edit-form.scss" /> 

package/dist/assets/components/header-with-views/header-with-views.internal.types.ts

@@ -0,0 +1 @@
+import { type VueNodeElement } from '@/types/elements'; import BagIcon from '@adyen/ui-assets-icons-16/vue/bag'; import CarIcon from '@adyen/ui-assets-icons-16/vue/car'; import CashStackIcon from '@adyen/ui-assets-icons-16/vue/cash-stack'; import CloudIcon from '@adyen/ui-assets-icons-16/vue/cloud'; import DiamondIcon from '@adyen/ui-assets-icons-16/vue/diamond'; import EducationIcon from '@adyen/ui-assets-icons-16/vue/education'; import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; import HotelIcon from '@adyen/ui-assets-icons-16/vue/gambling'; import GamingIcon from '@adyen/ui-assets-icons-16/vue/gaming'; import GiftIcon from '@adyen/ui-assets-icons-16/vue/gift'; import HandRockIcon from '@adyen/ui-assets-icons-16/vue/hand-rock'; import HashtagIcon from '@adyen/ui-assets-icons-16/vue/hashtag'; import HeartIcon from '@adyen/ui-assets-icons-16/vue/heart'; import HospitalityIcon from '@adyen/ui-assets-icons-16/vue/hospitality'; import HourglassIcon from '@adyen/ui-assets-icons-16/vue/hourglass'; import LeafIcon from '@adyen/ui-assets-icons-16/vue/leaf'; import LightningIcon from '@adyen/ui-assets-icons-16/vue/lightning'; import LockIcon from '@adyen/ui-assets-icons-16/vue/lock'; import NewsIcon from '@adyen/ui-assets-icons-16/vue/news'; import NotificationIcon from '@adyen/ui-assets-icons-16/vue/notification'; import PrizeIcon from '@adyen/ui-assets-icons-16/vue/prize'; import RetailIcon from '@adyen/ui-assets-icons-16/vue/retail'; import ShoppingCartIcon from '@adyen/ui-assets-icons-16/vue/shopping-cart'; import SleepIcon from '@adyen/ui-assets-icons-16/vue/sleep'; import StackIcon from '@adyen/ui-assets-icons-16/vue/stack'; import StarIcon from '@adyen/ui-assets-icons-16/vue/star'; import SupportIcon from '@adyen/ui-assets-icons-16/vue/support'; import TargetIcon from '@adyen/ui-assets-icons-16/vue/target'; import ThumbsDownIcon from '@adyen/ui-assets-icons-16/vue/thumb-down'; import ThumbsUpIcon from '@adyen/ui-assets-icons-16/vue/thumb-up'; import TravelBagIcon from '@adyen/ui-assets-icons-16/vue/travel-bag'; import WarningDiamondIcon from '@adyen/ui-assets-icons-16/vue/warning-diamond'; import WorldIcon from '@adyen/ui-assets-icons-16/vue/world'; export enum BentoHeaderWithViewsItemIconColorEnum { BLUE = 'blue', GREEN = 'green', ORANGE = 'orange', PRIMARY = 'primary', RED = 'red', YELLOW = 'yellow', } export enum BentoHeaderWithViewsItemIconEnum { STACK = 'stack', LEAF = 'leaf', HAND_ROCK = 'hand-rock', CAR = 'car', EDUCATION = 'education', HOTEL = 'hotel', TRAVEL_BAG = 'travel-bag', LIGHTNING = 'lightning', NEWS = 'news', PRIZE = 'prize', LOCK = 'lock', BAG = 'bag', DIAMOND = 'diamond', TARGET = 'target', GIFT = 'gift', CASH_STACK = 'cash-stack', HASHTAG = 'hashtag', CLOUD = 'cloud', HOSPITALITY = 'hospitality', SHOPPING_CART = 'shopping-cart', SLEEP = 'sleep', NOTIFICATION = 'notification', THUMBS_UP = 'thumb-up', THUMBS_DOWN = 'thumb-down', STAR = 'star', WARNING_DIAMOND = 'warning-diamond', RETAIL = 'retail', EMOTICON_HAPPY = 'emoticon-happy', GAMING = 'gaming', SUPPORT = 'support', HEART = 'heart', HOURGLASS = 'hourglass', WORLD = 'world', } export type BentoHeaderWithViewsItemIconColor = `${BentoHeaderWithViewsItemIconColorEnum}`; export type BentoHeaderWithViewsItemIcon = `${BentoHeaderWithViewsItemIconEnum}`; export interface BentoHeaderWithViewsItemAdditionalConfig { /** * Label for an additional view setting (e.g. a checkbox or toggle). */ label: string; /** * Boolean value indicating the state of the additional view setting (e.g., checked or toggled). */ value: boolean; } export interface BentoHeaderWithViewsItem { /** * Optional icon to display for the view item. */ icon?: BentoHeaderWithViewsItemIcon; /** * Optional color of the icon for the view item. */ iconColor?: BentoHeaderWithViewsItemIconColor; /** * Text label for the view item. */ label: string; /** * Optional boolean indicating if this view item is the default or currently active view. */ isDefault?: boolean; /** * Optional configuration for an additional view setting, such as a filter or option. */ additionalViewSetting?: BentoHeaderWithViewsItemAdditionalConfig; /** * Optional boolean indicating if this view can be edited or deleted. */ isFixed?: boolean; } export interface BentoHeaderWithViewsItemUpdate { newViews: Array<BentoHeaderWithViewsItem>; oldViews: Array<BentoHeaderWithViewsItem>; targetViewLabel: BentoHeaderWithViewsItem['label']; } export const BentoHeaderWithViewsItemIconElement: Record<BentoHeaderWithViewsItemIcon, VueNodeElement> = { [BentoHeaderWithViewsItemIconEnum.STACK]: StackIcon, [BentoHeaderWithViewsItemIconEnum.LEAF]: LeafIcon, [BentoHeaderWithViewsItemIconEnum.HAND_ROCK]: HandRockIcon, [BentoHeaderWithViewsItemIconEnum.CAR]: CarIcon, [BentoHeaderWithViewsItemIconEnum.EDUCATION]: EducationIcon, [BentoHeaderWithViewsItemIconEnum.HOTEL]: HotelIcon, [BentoHeaderWithViewsItemIconEnum.TRAVEL_BAG]: TravelBagIcon, [BentoHeaderWithViewsItemIconEnum.LIGHTNING]: LightningIcon, [BentoHeaderWithViewsItemIconEnum.NEWS]: NewsIcon, [BentoHeaderWithViewsItemIconEnum.PRIZE]: PrizeIcon, [BentoHeaderWithViewsItemIconEnum.LOCK]: LockIcon, [BentoHeaderWithViewsItemIconEnum.BAG]: BagIcon, [BentoHeaderWithViewsItemIconEnum.DIAMOND]: DiamondIcon, [BentoHeaderWithViewsItemIconEnum.TARGET]: TargetIcon, [BentoHeaderWithViewsItemIconEnum.GIFT]: GiftIcon, [BentoHeaderWithViewsItemIconEnum.CASH_STACK]: CashStackIcon, [BentoHeaderWithViewsItemIconEnum.HASHTAG]: HashtagIcon, [BentoHeaderWithViewsItemIconEnum.CLOUD]: CloudIcon, [BentoHeaderWithViewsItemIconEnum.HOSPITALITY]: HospitalityIcon, [BentoHeaderWithViewsItemIconEnum.SHOPPING_CART]: ShoppingCartIcon, [BentoHeaderWithViewsItemIconEnum.SLEEP]: SleepIcon, [BentoHeaderWithViewsItemIconEnum.NOTIFICATION]: NotificationIcon, [BentoHeaderWithViewsItemIconEnum.THUMBS_UP]: ThumbsUpIcon, [BentoHeaderWithViewsItemIconEnum.THUMBS_DOWN]: ThumbsDownIcon, [BentoHeaderWithViewsItemIconEnum.STAR]: StarIcon, [BentoHeaderWithViewsItemIconEnum.WARNING_DIAMOND]: WarningDiamondIcon, [BentoHeaderWithViewsItemIconEnum.RETAIL]: RetailIcon, [BentoHeaderWithViewsItemIconEnum.EMOTICON_HAPPY]: EmoticonHappyIcon, [BentoHeaderWithViewsItemIconEnum.GAMING]: GamingIcon, [BentoHeaderWithViewsItemIconEnum.SUPPORT]: SupportIcon, [BentoHeaderWithViewsItemIconEnum.HEART]: HeartIcon, [BentoHeaderWithViewsItemIconEnum.HOURGLASS]: HourglassIcon, [BentoHeaderWithViewsItemIconEnum.WORLD]: WorldIcon, }; export interface BentoHeaderWithViewsEmits { /** * Emitted when a new view is added to the list of views. */ (e: 'add:view', value: BentoHeaderWithViewsItemUpdate): void; /** * Emitted when a view is deleted from the list of views. */ (e: 'delete:view', value: BentoHeaderWithViewsItemUpdate): void; /** * Emitted when a view is duplicated. */ (e: 'duplicate:view', value: BentoHeaderWithViewsItemUpdate): void; /** * Emitted when the user reorganizes the order of the views. * No `targetViewLabel` is emitted as the views are reordered as a whole. */ (e: 'reorder:view', value: Omit<BentoHeaderWithViewsItemUpdate, 'targetViewLabel'>): void; /** * Emitted when the user requests to restore a previously saved or default view. */ (e: 'restore:view', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when the user requests to save the current view. */ (e: 'save:view', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when the user selects a different view from the available options. */ (e: 'select:view', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when a property of a view is updated. */ (e: 'update:view', value: BentoHeaderWithViewsItemUpdate): void; /** * Emitted when the user selects the prompt checkbox and closes the modal with a valid button action. * Only works when a string is pass into the `skipUnsavedChangesText` prop. */ (e: 'update:skip-unsaved-changes', value: boolean): void; /** * Emitted when the active view index changes. Used for two-way binding with v-model:active-view-index. */ (e: 'update:active-view-index', value: number | null): void; } export type BentoHeaderWithViewsItemErrors = { /** * Object where the keys correspond to the properties of `BentoHeaderWithViewsItem`, * and the values are strings representing any validation errors for that property. */ [K in keyof BentoHeaderWithViewsItem]: string; }; 

package/dist/assets/components/header-with-views/header-with-views.stories.ts

@@ -1 +1 @@
-import { storybookDocsParameter, withToastDecorator } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { ref, watch } from 'vue'; import { BentoHeaderWithViewsItemIconColorEnum } from './header-with-views.types'; import BentoHeaderWithViews from './header-with-views.vue'; import { BentoInputField } from '@/components/input-field'; import HeaderWithViewsControlledActiveViewExample from './__tests__/header-with-views-controlled-active-view-example.vue?raw'; const meta: Meta = { title: 'Header with views', component: BentoHeaderWithViews, decorators: [withToastDecorator], argTypes: { // Events 'add:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'delete:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'duplicate:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'reorder:view': { table: { type: { summary: '(value: Omit<BentoHeaderWithViewsItemUpdate, "targetViewLabel">) => void' }, }, control: { disable: true }, }, 'restore:view': { table: { type: { summary: '(value: string) => void' }, }, control: { disable: true }, }, 'save:view': { table: { type: { summary: '(value: string) => void' }, }, control: { disable: true }, }, 'select:view': { table: { type: { summary: '(value: string) => void' }, }, control: { disable: true }, }, 'update:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'update:active-view-index': { table: { type: { summary: '(value: number | null) => void' }, }, control: { disable: true }, }, // Slots infoIconTooltipContent: { description: 'Content to be displayed as a tooltip next to the header. This replaces the description property if present', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoHeaderWithViews>; const defaultCode = ` <template> <bento-header-with-views :actions="actions" description="Description" title="Page Title" :views="views" :additionalViewSetting='{ "label":"Include date filter (relative)", "value":false }' hasChanges skipUnsavedChangesText="Don’t show this message again" @add:view="handleViews" @delete:view="handleViews" @duplicate:view="handleViews" @reorder:view="handleViews" @restore:view="handleView" @save:view="handleView" @select:view="handleView" @update:view="handleViews" @update:skip-unsaved-changes="handleSkipUnsavedChanges" @update:active-view-index="handleActiveViewIndex" /> </template> <script setup lang="ts"> import { BentoHeaderWithViews } from '@adyen/bento-vue2' const handleViews = ({ newViews }) => void; const handleView = (label) => void; const handleSkipUnsavedChanges = (value) => void; const handleActiveViewIndex = (index) => void; const views = [ { icon: 'stack', iconColor: 'primary', label: 'A very long value' }, { icon: 'stack', iconColor: 'primary', label: 'Fixed view', isFixed: true, }, { icon: 'stack', iconColor: 'primary', label: 'View', } ]; const actions = [ {"title":"Primary action"}, {"title":"Secondary action"}, {"title":"Tertiary action"}, {"title":"Another action"} ] </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoHeaderWithViews }, props: Object.keys(argTypes), template: ` <bento-header-with-views v-bind="args" @add:view="addView" @delete:view="deleteView" @duplicate:view="duplicateView" @reorder:view="reorderView" @restore:view="restoreView" @save:view="saveView" @select:view="selectView" @update:view="updateView" @update:skip-unsaved-changes="updateSkipUnsavedChanges" @update:active-view-index="updateActiveViewIndex" /> `, setup(props) { const addView = value => action('add:view')(value); const deleteView = value => action('delete:view')(value); const duplicateView = value => action('duplicate:view')(value); const reorderView = value => action('reorder:view')(value); const restoreView = value => action('restore:view')(value); const saveView = value => action('save:view')(value); const selectView = value => action('select:view')(value); const updateView = value => action('update:view')(value); const updateSkipUnsavedChanges = value => action('update:skip-unsaved-changes')(value); const updateActiveViewIndex = value => action('update:active-view-index')(value); return { args: isVue2 ? props : _args, addView, deleteView, duplicateView, reorderView, restoreView, saveView, selectView, updateView, updateSkipUnsavedChanges, updateActiveViewIndex, }; }, }), args: { hasChanges: true, skipUnsavedChangesText: 'Don’t show this message again', actions: [ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', event: () => undefined }, { title: 'Tertiary action', event: () => undefined }, { title: 'Another action', event: () => undefined }, ], additionalViewSetting: { label: 'Include date filter (relative)', value: false, }, title: 'Page Title', views: [ { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, label: 'A very long value', }, { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, label: 'Fixed view', isFixed: true, }, { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, label: 'View', }, ], infoIconTooltipText: 'Info icon tooltip text', lastUpdated: new Date(), description: "This page shows how Adyen's AI boosts your payment performance and revenue. Monitor your authorization rate uplift and discover data-driven opportunities for further optimization.", reloadButton: { title: 'Reload', state: 'start', event: action('reloadButtonEvent'), }, }, parameters: storybookDocsParameter(defaultCode), }; export const ControlledActiveView: Story = { render: (_args, { argTypes }) => ({ components: { BentoHeaderWithViews, BentoInputField }, props: Object.keys(argTypes), template: ` <div> <bento-header-with-views v-bind="args" :active-view-index="activeViewIndex" @update:active-view-index="onActiveViewIndexChange" /> <div style="margin-top: var(--b-spacer-080); max-width: 200px;"> <bento-input-field :model-value="activeViewIndex" @update:model-value="onInputChange" type="number" label="Active view index" /> </div> </div> `, setup(props) { const activeViewIndex = ref(props.activeViewIndex); const onActiveViewIndexChange = (value: number) => { activeViewIndex.value = value; action('update:active-view-index')(value); }; const onInputChange = (value: string) => { const numValue = Number.parseInt(value, 10); activeViewIndex.value = numValue; }; watch( () => props.activeViewIndex, index => { activeViewIndex.value = index; } ); return { args: isVue2 ? props : _args, activeViewIndex, onActiveViewIndexChange, onInputChange, }; }, }), args: { hasChanges: false, skipUnsavedChangesText: null, title: 'Page Title', views: [ { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.BLUE, label: 'First View', }, { icon: 'leaf', iconColor: BentoHeaderWithViewsItemIconColorEnum.GREEN, label: 'Second View', }, { icon: 'star', iconColor: BentoHeaderWithViewsItemIconColorEnum.YELLOW, label: 'Third View', }, ], }, parameters: storybookDocsParameter(HeaderWithViewsControlledActiveViewExample), }; 
+import { storybookDocsParameter, withToastDecorator } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { ref, watch } from 'vue'; import { BentoHeaderWithViewsItemIconColorEnum } from './header-with-views.internal.types'; import BentoHeaderWithViews from './header-with-views.vue'; import { BentoInputField } from '@/components/input-field'; const HeaderWithViewsControlledActiveViewExample = "<template>\n <div>\n <bento-header-with-views\n :active-view-index=\"activeViewIndex\"\n :views=\"views\"\n :has-changes=\"false\"\n :skip-unsaved-changes-text=\"null\"\n title=\"Page Title\"\n @update:active-view-index=\"activeViewIndex = $event\"\n />\n <div style=\"margin-top: var(--b-spacer-080); max-width: 200px\">\n <bento-input-field v-model=\"activeViewIndex\" type=\"number\" label=\"Active view index\" />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoHeaderWithViews, type BentoHeaderWithViewsItem, BentoInputField } from '@adyen/bento-vue2';\n\n const activeViewIndex = ref(0);\n\n const views: Array<BentoHeaderWithViewsItem> = [\n { icon: 'stack', iconColor: 'blue', label: 'First View' },\n { icon: 'leaf', iconColor: 'green', label: 'Second View' },\n { icon: 'star', iconColor: 'yellow', label: 'Third View' },\n ];\n</script>\n"; const HeaderWithViewsDefault = "<template>\n <bento-header-with-views\n :actions=\"actions\"\n :additional-view-setting=\"additionalViewSetting\"\n :description=\"description\"\n has-changes\n info-icon-tooltip-text=\"Info icon tooltip text\"\n :last-updated=\"lastUpdated\"\n :reload-button=\"reloadButton\"\n skip-unsaved-changes-text=\"Don’t show this message again\"\n title=\"Page Title\"\n :views=\"views\"\n @add:view=\"handleViews\"\n @delete:view=\"handleViews\"\n @duplicate:view=\"handleViews\"\n @reorder:view=\"handleViews\"\n @restore:view=\"handleView\"\n @save:view=\"handleView\"\n @select:view=\"handleView\"\n @update:active-view-index=\"handleActiveViewIndex\"\n @update:skip-unsaved-changes=\"handleSkipUnsavedChanges\"\n @update:view=\"handleViews\"\n />\n</template>\n\n<script setup lang=\"ts\">\n import {\n type BentoButtonActionsList,\n BentoHeaderWithViews,\n type BentoHeaderWithViewsItem,\n } from '@adyen/bento-vue2';\n\n const actions: BentoButtonActionsList = [\n { title: 'Primary action', event: () => undefined },\n { title: 'Secondary action', event: () => undefined },\n { title: 'Tertiary action', event: () => undefined },\n { title: 'Another action', event: () => undefined },\n ];\n const additionalViewSetting = {\n label: 'Include date filter (relative)',\n value: false,\n };\n const description =\n \"This page shows how Adyen's AI boosts your payment performance and revenue. Monitor your authorization rate uplift and discover data-driven opportunities for further optimization.\";\n const lastUpdated = new Date();\n const reloadButton = {\n title: 'Reload',\n state: 'start' as const,\n event: () => undefined,\n };\n const views: Array<BentoHeaderWithViewsItem> = [\n { icon: 'stack', iconColor: 'primary', label: 'A very long value' },\n { icon: 'stack', iconColor: 'primary', isFixed: true, label: 'Fixed view' },\n { icon: 'stack', iconColor: 'primary', label: 'View' },\n ];\n\n const handleViews = () => undefined;\n const handleView = () => undefined;\n const handleSkipUnsavedChanges = () => undefined;\n const handleActiveViewIndex = () => undefined;\n</script>\n"; const meta: Meta = { title: 'Header with views', component: BentoHeaderWithViews, decorators: [withToastDecorator], argTypes: { // Events 'add:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'delete:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'duplicate:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'reorder:view': { table: { type: { summary: '(value: Omit<BentoHeaderWithViewsItemUpdate, "targetViewLabel">) => void' }, }, control: { disable: true }, }, 'restore:view': { table: { type: { summary: '(value: string) => void' }, }, control: { disable: true }, }, 'save:view': { table: { type: { summary: '(value: string) => void' }, }, control: { disable: true }, }, 'select:view': { table: { type: { summary: '(value: string) => void' }, }, control: { disable: true }, }, 'update:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'update:active-view-index': { table: { type: { summary: '(value: number | null) => void' }, }, control: { disable: true }, }, // Slots infoIconTooltipContent: { description: 'Content to be displayed as a tooltip next to the header. This replaces the description property if present', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoHeaderWithViews>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoHeaderWithViews }, props: Object.keys(argTypes), template: ` <bento-header-with-views v-bind="args" @add:view="addView" @delete:view="deleteView" @duplicate:view="duplicateView" @reorder:view="reorderView" @restore:view="restoreView" @save:view="saveView" @select:view="selectView" @update:view="updateView" @update:skip-unsaved-changes="updateSkipUnsavedChanges" @update:active-view-index="updateActiveViewIndex" /> `, setup(props) { const addView = value => action('add:view')(value); const deleteView = value => action('delete:view')(value); const duplicateView = value => action('duplicate:view')(value); const reorderView = value => action('reorder:view')(value); const restoreView = value => action('restore:view')(value); const saveView = value => action('save:view')(value); const selectView = value => action('select:view')(value); const updateView = value => action('update:view')(value); const updateSkipUnsavedChanges = value => action('update:skip-unsaved-changes')(value); const updateActiveViewIndex = value => action('update:active-view-index')(value); return { args: isVue2 ? props : _args, addView, deleteView, duplicateView, reorderView, restoreView, saveView, selectView, updateView, updateSkipUnsavedChanges, updateActiveViewIndex, }; }, }), args: { hasChanges: true, skipUnsavedChangesText: 'Don’t show this message again', actions: [ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', event: () => undefined }, { title: 'Tertiary action', event: () => undefined }, { title: 'Another action', event: () => undefined }, ], additionalViewSetting: { label: 'Include date filter (relative)', value: false, }, title: 'Page Title', views: [ { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, label: 'A very long value', }, { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, label: 'Fixed view', isFixed: true, }, { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, label: 'View', }, ], infoIconTooltipText: 'Info icon tooltip text', lastUpdated: new Date(), description: "This page shows how Adyen's AI boosts your payment performance and revenue. Monitor your authorization rate uplift and discover data-driven opportunities for further optimization.", reloadButton: { title: 'Reload', state: 'start', event: action('reloadButtonEvent'), }, }, parameters: storybookDocsParameter(HeaderWithViewsDefault), }; export const ControlledActiveView: Story = { render: (_args, { argTypes }) => ({ components: { BentoHeaderWithViews, BentoInputField }, props: Object.keys(argTypes), template: ` <div> <bento-header-with-views v-bind="args" :active-view-index="activeViewIndex" @update:active-view-index="onActiveViewIndexChange" /> <div style="margin-top: var(--b-spacer-080); max-width: 200px;"> <bento-input-field :model-value="activeViewIndex" @update:model-value="onInputChange" type="number" label="Active view index" /> </div> </div> `, setup(props) { const activeViewIndex = ref(props.activeViewIndex); const onActiveViewIndexChange = (value: number) => { activeViewIndex.value = value; action('update:active-view-index')(value); }; const onInputChange = (value: string) => { const numValue = Number.parseInt(value, 10); activeViewIndex.value = numValue; }; watch( () => props.activeViewIndex, index => { activeViewIndex.value = index; } ); return { args: isVue2 ? props : _args, activeViewIndex, onActiveViewIndexChange, onInputChange, }; }, }), args: { hasChanges: false, skipUnsavedChangesText: null, title: 'Page Title', views: [ { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.BLUE, label: 'First View', }, { icon: 'leaf', iconColor: BentoHeaderWithViewsItemIconColorEnum.GREEN, label: 'Second View', }, { icon: 'star', iconColor: BentoHeaderWithViewsItemIconColorEnum.YELLOW, label: 'Third View', }, ], }, parameters: storybookDocsParameter(HeaderWithViewsControlledActiveViewExample), }; 

package/dist/assets/components/header-with-views/header-with-views.types.ts

@@ -1 +1 @@
-import { type BentoButtonActionsList } from '@/components/button'; import { type VueNodeElement } from '@/types/elements'; import type { HeaderMetaProps } from '@/internal'; import BagIcon from '@adyen/ui-assets-icons-16/vue/bag'; import CarIcon from '@adyen/ui-assets-icons-16/vue/car'; import CashStackIcon from '@adyen/ui-assets-icons-16/vue/cash-stack'; import CloudIcon from '@adyen/ui-assets-icons-16/vue/cloud'; import DiamondIcon from '@adyen/ui-assets-icons-16/vue/diamond'; import EducationIcon from '@adyen/ui-assets-icons-16/vue/education'; import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; import HotelIcon from '@adyen/ui-assets-icons-16/vue/gambling'; import GamingIcon from '@adyen/ui-assets-icons-16/vue/gaming'; import GiftIcon from '@adyen/ui-assets-icons-16/vue/gift'; import HandRockIcon from '@adyen/ui-assets-icons-16/vue/hand-rock'; import HashtagIcon from '@adyen/ui-assets-icons-16/vue/hashtag'; import HeartIcon from '@adyen/ui-assets-icons-16/vue/heart'; import HospitalityIcon from '@adyen/ui-assets-icons-16/vue/hospitality'; import HourglassIcon from '@adyen/ui-assets-icons-16/vue/hourglass'; import LeafIcon from '@adyen/ui-assets-icons-16/vue/leaf'; import LightningIcon from '@adyen/ui-assets-icons-16/vue/lightning'; import LockIcon from '@adyen/ui-assets-icons-16/vue/lock'; import NewsIcon from '@adyen/ui-assets-icons-16/vue/news'; import NotificationIcon from '@adyen/ui-assets-icons-16/vue/notification'; import PrizeIcon from '@adyen/ui-assets-icons-16/vue/prize'; import RetailIcon from '@adyen/ui-assets-icons-16/vue/retail'; import ShoppingCartIcon from '@adyen/ui-assets-icons-16/vue/shopping-cart'; import SleepIcon from '@adyen/ui-assets-icons-16/vue/sleep'; import StackIcon from '@adyen/ui-assets-icons-16/vue/stack'; import StarIcon from '@adyen/ui-assets-icons-16/vue/star'; import SupportIcon from '@adyen/ui-assets-icons-16/vue/support'; import TargetIcon from '@adyen/ui-assets-icons-16/vue/target'; import ThumbsDownIcon from '@adyen/ui-assets-icons-16/vue/thumb-down'; import ThumbsUpIcon from '@adyen/ui-assets-icons-16/vue/thumb-up'; import TravelBagIcon from '@adyen/ui-assets-icons-16/vue/travel-bag'; import WarningDiamondIcon from '@adyen/ui-assets-icons-16/vue/warning-diamond'; import WorldIcon from '@adyen/ui-assets-icons-16/vue/world'; /* Public */ export type BentoHeaderWithViewsItemIconColor = `${BentoHeaderWithViewsItemIconColorEnum}`; export type BentoHeaderWithViewsItemIcon = `${BentoHeaderWithViewsItemIconEnum}`; export interface BentoHeaderWithViewsItemAdditionalConfig { /** * Label for an additional view setting (e.g. a checkbox or toggle). */ label: string; /** * Boolean value indicating the state of the additional view setting (e.g. checked or toggled). */ value: boolean; } export interface BentoHeaderWithViewsItem { /** * Optional icon to display for the view item. */ icon?: BentoHeaderWithViewsItemIcon; /** * Optional color of the icon for the view item. */ iconColor?: BentoHeaderWithViewsItemIconColor; /** * Text label for the view item. */ label: string; /** * Optional boolean indicating if this view item is the default or currently active view. */ isDefault?: boolean; /** * Optional configuration for an additional view setting, such as a filter or option. */ additionalViewSetting?: BentoHeaderWithViewsItemAdditionalConfig; /** * Optional boolean indicating if this view can be edited or deleted. */ isFixed?: boolean; } export interface BentoHeaderWithViewsProps { /** * Optional list of actions (buttons) to display in the header. * The structure of each action is defined by the `BentoButtonActionsList` type. * * {@link [BentoButtonActionsList](https://adyen-bento.netlify.app/?path=/docs/components-button-button-actions--docs#variations)} */ actions?: BentoButtonActionsList; /** * Main title text for the header. This prop is required. */ title: string; /** * Optional array of view items to display as selectable views or tabs. * * Each view should have the following property: * - `icon` (BentoHeaderWithViewsItemIcon, optional): Optional icon to display. * - `iconColor` (BentoHeaderWithViewsItemIconColor, optional): Optional color of the icon. * - `label` (string): Text label for the view item. * - `isDefault` (boolean, optional): Indicates if this view item is the default or currently active view. * - `additionalViewSetting` (BentoHeaderWithViewsItemAdditionalConfig, optional): Optional configuration for an additional view setting. * - `isFixed` (boolean, optional): Indicates if this view can be edited or deleted. * @see {@link BentoHeaderWithViewsItem} */ views?: Array<BentoHeaderWithViewsItem>; /** * Optional configuration for an additional view setting, such as a filter or option. * Defined by the `BentoHeaderWithViewsItemAdditionalConfig` interface. * * @see {@link BentoHeaderWithViewsItemAdditionalConfig} */ additionalViewSetting?: BentoHeaderWithViewsItemAdditionalConfig; /** * Boolean indicating whether there are unsaved changes on the page. * This might be used to visually indicate to the user that they need to save their work. */ hasChanges: boolean; /** * String indicating whether to display a prompt, reminding the user to save their changes whenever they switch view tabs. * If null, no prompt is shown and changes will always be restored to it's previous settings on view tab change. */ skipUnsavedChangesText: string | null; /** * Boolean indicating whether icon and icon selection is allowed on view creation and edit. */ disableCustomization?: boolean; /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText?: string; /** * Meta description for the header component */ description?: string; /** * JavaScript "Date" object for when the content was last updated */ lastUpdated?: Date | number; /** * Reload button which shows next to the header's timestamp * @see HeaderMetaProps['reloadButton'] */ reloadButton?: HeaderMetaProps['reloadButton']; /** * Whether or not to automatically select a view on mount */ disableAutoSelect?: boolean; /** * The active view index. Supports two-way binding via v-model:active-view-index. * When provided, this takes precedence over `isDefault` on individual views for initial selection. * Changes from outside the component will update the active view. * Has no effect when `disableAutoSelect` is true. */ activeViewIndex?: number; } export interface BentoHeaderWithViewsItemUpdate { newViews: Array<BentoHeaderWithViewsItem>; oldViews: Array<BentoHeaderWithViewsItem>; targetViewLabel: BentoHeaderWithViewsItem['label']; } /* Private */ export enum BentoHeaderWithViewsItemIconColorEnum { BLUE = 'blue', GREEN = 'green', ORANGE = 'orange', PRIMARY = 'primary', RED = 'red', YELLOW = 'yellow', } export enum BentoHeaderWithViewsItemIconEnum { STACK = 'stack', LEAF = 'leaf', HAND_ROCK = 'hand-rock', CAR = 'car', EDUCATION = 'education', HOTEL = 'hotel', TRAVEL_BAG = 'travel-bag', LIGHTNING = 'lightning', NEWS = 'news', PRIZE = 'prize', LOCK = 'lock', BAG = 'bag', DIAMOND = 'diamond', TARGET = 'target', GIFT = 'gift', CASH_STACK = 'cash-stack', HASHTAG = 'hashtag', CLOUD = 'cloud', HOSPITALITY = 'hospitality', SHOPPING_CART = 'shopping-cart', SLEEP = 'sleep', NOTIFICATION = 'notification', THUMBS_UP = 'thumb-up', THUMBS_DOWN = 'thumb-down', STAR = 'star', WARNING_DIAMOND = 'warning-diamond', RETAIL = 'retail', EMOTICON_HAPPY = 'emoticon-happy', GAMING = 'gaming', SUPPORT = 'support', HEART = 'heart', HOURGLASS = 'hourglass', WORLD = 'world', } export const BentoHeaderWithViewsItemIconElement: Record<BentoHeaderWithViewsItemIcon, VueNodeElement> = { [BentoHeaderWithViewsItemIconEnum.STACK]: StackIcon, [BentoHeaderWithViewsItemIconEnum.LEAF]: LeafIcon, [BentoHeaderWithViewsItemIconEnum.HAND_ROCK]: HandRockIcon, [BentoHeaderWithViewsItemIconEnum.CAR]: CarIcon, [BentoHeaderWithViewsItemIconEnum.EDUCATION]: EducationIcon, [BentoHeaderWithViewsItemIconEnum.HOTEL]: HotelIcon, [BentoHeaderWithViewsItemIconEnum.TRAVEL_BAG]: TravelBagIcon, [BentoHeaderWithViewsItemIconEnum.LIGHTNING]: LightningIcon, [BentoHeaderWithViewsItemIconEnum.NEWS]: NewsIcon, [BentoHeaderWithViewsItemIconEnum.PRIZE]: PrizeIcon, [BentoHeaderWithViewsItemIconEnum.LOCK]: LockIcon, [BentoHeaderWithViewsItemIconEnum.BAG]: BagIcon, [BentoHeaderWithViewsItemIconEnum.DIAMOND]: DiamondIcon, [BentoHeaderWithViewsItemIconEnum.TARGET]: TargetIcon, [BentoHeaderWithViewsItemIconEnum.GIFT]: GiftIcon, [BentoHeaderWithViewsItemIconEnum.CASH_STACK]: CashStackIcon, [BentoHeaderWithViewsItemIconEnum.HASHTAG]: HashtagIcon, [BentoHeaderWithViewsItemIconEnum.CLOUD]: CloudIcon, [BentoHeaderWithViewsItemIconEnum.HOSPITALITY]: HospitalityIcon, [BentoHeaderWithViewsItemIconEnum.SHOPPING_CART]: ShoppingCartIcon, [BentoHeaderWithViewsItemIconEnum.SLEEP]: SleepIcon, [BentoHeaderWithViewsItemIconEnum.NOTIFICATION]: NotificationIcon, [BentoHeaderWithViewsItemIconEnum.THUMBS_UP]: ThumbsUpIcon, [BentoHeaderWithViewsItemIconEnum.THUMBS_DOWN]: ThumbsDownIcon, [BentoHeaderWithViewsItemIconEnum.STAR]: StarIcon, [BentoHeaderWithViewsItemIconEnum.WARNING_DIAMOND]: WarningDiamondIcon, [BentoHeaderWithViewsItemIconEnum.RETAIL]: RetailIcon, [BentoHeaderWithViewsItemIconEnum.EMOTICON_HAPPY]: EmoticonHappyIcon, [BentoHeaderWithViewsItemIconEnum.GAMING]: GamingIcon, [BentoHeaderWithViewsItemIconEnum.SUPPORT]: SupportIcon, [BentoHeaderWithViewsItemIconEnum.HEART]: HeartIcon, [BentoHeaderWithViewsItemIconEnum.HOURGLASS]: HourglassIcon, [BentoHeaderWithViewsItemIconEnum.WORLD]: WorldIcon, }; export interface BentoHeaderWithViewsEmits { /** * Emitted when a new view is added to the list of views. */ (e: 'add:view', value: BentoHeaderWithViewsItemUpdate): void; /** * Emitted when a view is deleted from the list of views. */ (e: 'delete:view', value: BentoHeaderWithViewsItemUpdate): void; /** * Emitted when a view is duplicated. */ (e: 'duplicate:view', value: BentoHeaderWithViewsItemUpdate): void; /** * Emitted when the user reorganizes the order of the views. * No `targetViewLabel` is emitted as the views are reordered as a whole. */ (e: 'reorder:view', value: Omit<BentoHeaderWithViewsItemUpdate, 'targetViewLabel'>): void; /** * Emitted when the user requests to restore a previously saved or default view. */ (e: 'restore:view', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when the user requests to save the current view. */ (e: 'save:view', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when the user selects a different view from the available options. */ (e: 'select:view', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when a property of a view is updated. */ (e: 'update:view', value: BentoHeaderWithViewsItemUpdate): void; /** * Emitted when the user selects the prompt checkbox and closes the modal with a valid button action. * Only works when a string is pass into the `skipUnsavedChangesText` prop. */ (e: 'update:skip-unsaved-changes', value: boolean): void; /** * Emitted when the active view index changes. Used for two-way binding with v-model:active-view-index. */ (e: 'update:active-view-index', value: number | null): void; } export type BentoHeaderWithViewsItemErrors = { /** * Object where the keys correspond to the properties of `BentoHeaderWithViewsItem`, * and the values are strings representing any validation errors for that property. */ [K in keyof BentoHeaderWithViewsItem]: string; }; 
+import { type BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types'; import type { TitleDetailsProps } from '@/internal/title-details/title-details.types'; import type { BentoHeaderWithViewsItem, BentoHeaderWithViewsItemAdditionalConfig, BentoHeaderWithViewsItemIcon, BentoHeaderWithViewsItemIconColor, BentoHeaderWithViewsItemUpdate, } from './header-with-views.internal.types'; export { BentoHeaderWithViewsItem, BentoHeaderWithViewsItemAdditionalConfig, BentoHeaderWithViewsItemIcon, BentoHeaderWithViewsItemIconColor, BentoHeaderWithViewsItemUpdate, }; export interface BentoHeaderWithViewsProps { /** * Optional list of actions (buttons) to display in the header. * The structure of each action is defined by the `BentoButtonActionsList` type. * * {@link [BentoButtonActionsList](https://adyen-bento.netlify.app/?path=/docs/components-button-button-actions--docs#variations)} */ actions?: BentoButtonActionsList; /** * Main title text for the header. This prop is required. */ title: string; /** * Optional array of view items to display as selectable views or tabs. * * Each view should have the following property: * - `icon` (BentoHeaderWithViewsItemIcon, optional): Optional icon to display. * - `iconColor` (BentoHeaderWithViewsItemIconColor, optional): Optional color of the icon. * - `label` (string): Text label for the view item. * - `isDefault` (boolean, optional): Indicates if this view item is the default or currently active view. * - `additionalViewSetting` (BentoHeaderWithViewsItemAdditionalConfig, optional): Optional configuration for an additional view setting. * - `isFixed` (boolean, optional): Indicates if this view can be edited or deleted. * @see {@link BentoHeaderWithViewsItem} */ views?: Array<BentoHeaderWithViewsItem>; /** * Optional configuration for an additional view setting, such as a filter or option. * Defined by the `BentoHeaderWithViewsItemAdditionalConfig` interface. * * @see {@link BentoHeaderWithViewsItemAdditionalConfig} */ additionalViewSetting?: BentoHeaderWithViewsItemAdditionalConfig; /** * Boolean indicating whether there are unsaved changes on the page. * This might be used to visually indicate to the user that they need to save their work. */ hasChanges: boolean; /** * String indicating whether to display a prompt, reminding the user to save their changes whenever they switch view tabs. * If null, no prompt is shown and changes will always be restored to it's previous settings on view tab change. */ skipUnsavedChangesText: string | null; /** * Boolean indicating whether icon and icon selection is allowed on view creation and edit. */ disableCustomization?: boolean; /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText?: string; /** * Meta description for the header component */ description?: string; /** * JavaScript "Date" object for when the content was last updated */ lastUpdated?: Date | number; /** * Reload button which shows next to the header's timestamp * @see TitleDetailsProps['reloadButton'] */ reloadButton?: TitleDetailsProps['reloadButton']; /** * Whether or not to automatically select a view on mount */ disableAutoSelect?: boolean; /** * The active view index. Supports two-way binding via v-model:active-view-index. * When provided, this takes precedence over `isDefault` on individual views for initial selection. * Changes from outside the component will update the active view. * Has no effect when `disableAutoSelect` is true. */ activeViewIndex?: number; } 

package/dist/assets/components/header-with-views/header-with-views.vue

@@ -1 +1 @@
-<template> <div ref="hostRef" class="b-header-with-views"> <div class="b-header-with-views__container" :class="conditionalContainerClass"> <div class="b-header-with-views__title"> <bento-typography el="h2" variant="title">{{ title }}</bento-typography> <info-icon-with-popover v-if="infoIconTooltipText || hasSlot('infoIconTooltipContent')" :popover-text="infoIconTooltipText" class="b-header-with-views__title-icon" > <template v-if="hasSlot('infoIconTooltipContent')" #default> <slot name="infoIconTooltipContent" /> </template> </info-icon-with-popover> </div> <fieldset ref="viewsRef" class="b-header-with-views__bar" :aria-label="t('viewListLabel')"> <div v-for="(view, index) in computedViews" :key="index" ref="viewRefs" class="b-header-with-views__bar-tab" :class="isViewActive(index) ? 'b-header-with-views__bar-tab--active' : null" > <bento-button class="b-header-with-views__bar-tab-button" variant="tertiary-with-background" :aria-current="currentActiveView === index ? 'true' : 'false'" @click="handleViewSelect(index)" @keydown.enter.native="handleViewSelect(index)" @keydown.space.native="handleViewSelect(index)" > <template #iconLeft> <span class="b-header-with-views__bar-tab-button-icon" :class="`b-header-with-views__bar-tab-button-icon--${view.iconColor}`" aria-hidden="true" > <component :is="BentoHeaderWithViewsItemIconElement[view.icon]" /> </span> </template> <bento-typography el="span" variant="body" stronger class="b-header-with-views__bar-tab-button-text" > {{ view.label }} </bento-typography> <template v-if="isViewUnsaved(index)" #iconRight> <span class="b-header-with-views__bar-tab-button--unsaved"> <dot-icon :svg-title="t('withUnsavedChanges')" /> </span> </template> </bento-button> <bento-menu v-if="currentActiveView === index" ref="editViewMenuRefs" class="b-header-with-views__bar-tab-menu" :button="{ variant: 'tertiary' }" :data="getViewMenuData(index)" :close-on-click-outside-options="{ ignore: [`#${editViewPopoverId}`], }" :menu-fixed-positioning="true" @open="showViewMenuPopover(index)" @close="hideViewMenuPopover()" @keydown.tab.native.capture="handleTabEditViewPopover" > <template #iconLeft> <options-horizontal-icon :svg-title="t('openViewOptions', { label: view.label })" /> </template> </bento-menu> </div> <div ref="viewControlRef" class="b-header-with-views__bar-control"> <!-- All views --> <header-with-views-all-views v-if="computedViews.length" ref="viewControlAllViewsRef" :menu-items="computedViews" :menu-items-actions="getViewMenuData(activeViewMenuPopover)" :menu-close-on-click-outside-options="{ ignore: [`#${editViewPopoverId}`] }" @close:view-menu="hideViewMenuPopover()" @close:all-views="showAllViewsPopover = false" @open:all-views="showAllViewsPopover = true" @open:view-menu="index => showViewMenuPopover(index)" @reorder:view="views => handleReorder(views)" @select:view="index => handleViewSelect(index)" /> <bento-toggle-button ref="createViewButtonRef" :aria-expanded="showCreateViewPopover" :aria-controls="showCreateViewPopover ? createViewPopoverId : null" :toggled="showCreateViewPopover" variant="tertiary" @click="showCreateViewPopover = !showCreateViewPopover" > <template #iconLeft> <plus-icon :svg-title="t('createView')" :aria-hidden="computedViews.length === 0" /> </template> <template v-if="computedViews.length === 0" #default>{{ t('createView') }}</template> </bento-toggle-button> </div> </fieldset> <header-meta v-if="hasMetaSection" class="b-header-with-views__meta-container" :description="description" :last-updated="lastUpdated" :reload-button="reloadButton" > <template v-if="hasSlot('description')" #description><slot name="description" /></template> </header-meta> <button-actions-with-menu v-if="actions" :actions="actions" :actions-layout="isCompact ? 'buttons-start' : 'buttons-end'" :displayed-actions="2" :disable-responsive-behavior="true" :hide-displayed-actions-breakpoint="STACKED_LAYOUT_BREAKPOINT" class="b-header-with-views__actions" /> </div> <!-- Create view --> <bento-popover v-if="activeViewMenuPopover === null && createViewButtonRef" :id="createViewPopoverId" ref="createViewPopoverRef" :dismissible="true" :fixed-positioning="true" :target-element="createViewButtonRef" :title="t('createView')" :open="showCreateViewPopover" :overflow-visible="true" position="bottom-start" @dismiss="hideCreateViewPopover" @keydown.esc.native.capture.stop.prevent="hideCreateViewPopover" > <header-with-views-edit-form context="create" :errors="errors" :additional-form-item="additionalViewSetting" :disable-customization="disableCustomization" @blur:label="value => validateLabel(value, activeViewMenuPopover)" @input:label="value => validateLabel(value, activeViewMenuPopover)" @keydown:enter="handleKeydownEnterViewItem" @update="handleCreateViewItem" @cancel="hideCreateViewPopover" > </header-with-views-edit-form> </bento-popover> <!-- Edit view --> <bento-popover v-if="activeViewMenuPopover !== null && editViewTargetElementRef" :id="editViewPopoverId" ref="editViewPopoverRef" :disable-focus-trap="false" :dismissible="true" :fixed-positioning="true" :target-element="editViewTargetElementRef" :title="t('editDetails')" :open="activeEditViewPopover !== null" :overflow-visible="true" position="right-start" @dismiss="setActiveEditViewPopover()" @keydown.esc.native.capture.stop.prevent="setActiveEditViewPopover()" > <header-with-views-edit-form v-if="computedViews[activeEditViewPopover]" context="edit" :additional-form-item="computedViews[activeEditViewPopover].additionalViewSetting" :errors="errors" :icon="computedViews[activeEditViewPopover].icon" :icon-color="computedViews[activeEditViewPopover].iconColor" :label="computedViews[activeEditViewPopover].label" :disable-customization="disableCustomization" @blur:label="value => validateLabel(value, activeViewMenuPopover)" @input:label="value => validateLabel(value, activeViewMenuPopover)" @keydown:enter="handleKeydownEnterViewItem" @update="handleUpdateViewItem" @cancel="hideEditViewPopover" > </header-with-views-edit-form> </bento-popover> <!-- Unsaved views prompt --> <bento-modal v-if="showUnsavedModalWarning" :actions="computedUnsavedViewModalActions" :is-dismissible="false" :is-open="showUnsavedModalWarning" @close-modal="showUnsavedModalWarning = false" > <template #default>{{ t('unsavedChangesTitle', { label: computedViews[currentActiveView].label }) }}</template> <template #content> <div class="b-header-with-views__modal-description"> <bento-typography>{{ t('unsavedChangesDescription') }}</bento-typography> <bento-checkbox v-if="skipUnsavedChangesText" :model-value="skipUnsavedChangesReminder" @update:model-value="value => (skipUnsavedChangesReminder = value)" > {{ skipUnsavedChangesText }} </bento-checkbox> </div> </template> </bento-modal> <!-- Delete views prompt --> <bento-modal v-if="showDeleteModalWarning" :actions="computedDeleteViewModalActions" :is-open="showDeleteModalWarning" :is-dismissible="false" destructive-actions @click.native.capture="handleClickModal" @close-modal="showDeleteModalWarning = false" > <template #default> {{ t('deleteViewTitle', { label: computedViewToBeDeletedLabel }) }} </template> <template #content> <div class="b-header-with-views__modal-description"> <bento-typography>{{ t('deleteViewDescription', { label: computedViewToBeDeletedLabel }) }}</bento-typography> </div> </template> </bento-modal> </div> </template> <script setup lang="ts"> import { BentoButton, BentoToggleButton } from '@/components/button'; import { BentoCheckbox } from '@/components/checkbox'; import { BentoMenu, type BentoMenuItem } from '@/components/menu'; import BentoModal from '@/components/modal/modal.vue'; import { BentoPopover } from '@/components/popover'; import { BentoTypography } from '@/components/typography'; import { HeaderMeta } from '@/internal'; import { useBentoToastController, useClickOutside, useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import ButtonActionsWithMenu from '@/internal/button-actions-with-menu/button-actions-with-menu.vue'; import { InfoIconWithPopover } from '@/internal/info-icon-with-popover'; import { useI18n } from '@/utils/ts/i18n'; import BinIcon from '@adyen/ui-assets-icons-16/vue/bin'; import DotIcon from '@adyen/ui-assets-icons-16/vue/dot'; import DownloadIcon from '@adyen/ui-assets-icons-16/vue/download'; import EditIcon from '@adyen/ui-assets-icons-16/vue/edit-2'; import HeartIcon from '@adyen/ui-assets-icons-16/vue/heart'; import OptionsHorizontalIcon from '@adyen/ui-assets-icons-16/vue/options-horizontal'; import PlusIcon from '@adyen/ui-assets-icons-16/vue/plus'; import PlusMultipleIcon from '@adyen/ui-assets-icons-16/vue/plus-multiple'; import RefreshIcon from '@adyen/ui-assets-icons-16/vue/refresh'; import { useElementSize } from '@vueuse/core'; import { computed, nextTick, onMounted, ref, useSlots, watch } from 'vue'; import { HeaderWithViewsAllViews, HeaderWithViewsEditForm } from './components'; import { useEditViews, useResponsiveViews } from './composables'; import { type BentoHeaderWithViewsEmits, type BentoHeaderWithViewsItem, BentoHeaderWithViewsItemIconElement, type BentoHeaderWithViewsProps, } from './header-with-views.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoHeaderWithViewsProps>(), { actions: () => [], additionalViewSetting: null, title: null, description: null, disableCustomization: false, lastUpdated: null, reloadButton: null, infoIconTooltipText: null, views: () => [], disableAutoSelect: false, activeViewIndex: undefined, }); const emit = defineEmits<BentoHeaderWithViewsEmits>(); const STACKED_LAYOUT_BREAKPOINT = 573; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); // refs const createViewButtonRef = ref(null); const createViewPopoverRef = ref(null); const editViewPopoverRef = ref(null); const editViewMenuRefs = ref([]); const editViewTargetElementRef = ref(null); // used as a mount for the edit form popover const hostRef = ref(null); const viewsRef = ref<HTMLElement>(null); // container for all views const viewRefs = ref<Array<HTMLDivElement>>([]); // individual view const viewControlRef = ref(null); // all views menu and create view button container const viewControlAllViewsRef = ref(null); // all views menu // controls const showCreateViewPopover = ref<boolean>(false); // control the create view popover const showAllViewsPopover = ref<boolean>(false); // control when menu button is shown const showUnsavedModalWarning = ref<boolean>(false); const showDeleteModalWarning = ref<boolean>(false); const activeEditViewPopover = ref<number>(null); // control the edit view popover const activeViewMenuPopover = ref<number>(null); // control when menu items are shown const internalActiveView = ref<number>(null); // control which view the user is currently on const nextActiveView = ref<number>(null); // control which view is does the user want to navigate to, used for caching unsaved view navigation const viewToBeDeleted = ref<number>(null); // cache which view is marked for deletion // Computed property to handle two-way binding for activeViewIndex const currentActiveView = computed({ get: () => internalActiveView.value, set: (value: number | null) => { internalActiveView.value = value; emit('update:active-view-index', value); }, }); // models const skipUnsavedChangesReminder = ref<boolean>(false); const createViewPopoverId = generateUid('createViewPopover'); const editViewPopoverId = generateUid('editViewPopover'); useResponsiveViews({ container: viewsRef, children: viewRefs, offset: viewControlRef, activeViewIndex: currentActiveView, }); const { computedViews, clearError, duplicateView, errors, setViews, updateView, validateLabel } = useEditViews({ additionalViewSetting: props.additionalViewSetting, views: props.views, }); const hideCreateViewPopover = async (updateFocus = true) => { showCreateViewPopover.value = false; if (updateFocus) { await nextTick(); createViewButtonRef.value.$el.focus(); } clearError(); }; const hideEditViewPopover = () => { const currentMenuRef = showAllViewsPopover.value ? viewControlAllViewsRef.value.$refs.editViewMenuRefs[activeEditViewPopover.value] : editViewMenuRefs.value[0]; currentMenuRef?.closeMenu(); }; useClickOutside(createViewPopoverRef, () => hideCreateViewPopover(false), { ignore: [createViewButtonRef], }); useClickOutside(editViewPopoverRef, () => setActiveEditViewPopover(), { ignore: [editViewTargetElementRef], }); const { width: hostWidth } = useElementSize(hostRef); const { addToast } = useBentoToastController(); const computedUnsavedViewModalActions = computed(() => [ { title: t('saveChanges'), event: handleSaveChanges, }, { title: t('leave'), event: handleRestoreChanges, }, ]); const computedDeleteViewModalActions = computed(() => [ { title: t('deleteViewAction'), event: async () => { showDeleteModalWarning.value = false; const updatedViewObj = updateView(null, viewToBeDeleted.value); emit('delete:view', updatedViewObj); hideViewMenuPopover(); // if a view that is placed higher in the order is deleted, ignore if (currentActiveView.value < viewToBeDeleted.value) { return; } // if a view that is placed lower in the order is deleted, // we need to shift the index to maintain the current view if (currentActiveView.value > viewToBeDeleted.value) { currentActiveView.value -= 1; } else if (currentActiveView.value === viewToBeDeleted.value) { if (updatedViewObj.newViews.length === 0) { // there are no more views currentActiveView.value = null; } else if (currentActiveView.value >= updatedViewObj.newViews.length) { // shift it to the left currentActiveView.value -= 1; } // else, keep it at the same index } viewToBeDeleted.value = null; }, }, { title: t('cancel'), event: () => { showDeleteModalWarning.value = false; }, }, ]); const computedViewToBeDeletedLabel = computed(() => computedViews.value[viewToBeDeleted.value]?.label); const hasMetaSection = computed(() => props.description || hasSlot('description') || props.lastUpdated); const isCompact = computed(() => hostWidth.value <= STACKED_LAYOUT_BREAKPOINT); const conditionalContainerClass = computed(() => ({ 'b-header-with-views__container--is-compact': isCompact.value, 'b-header-with-views__container--has-meta': hasMetaSection.value, })); watch([currentActiveView, computedViews], ([newIndex, newViews], [oldIndex, oldViews]) => { // skip if the labels are the same or no active view const isViewUpdated = newIndex === oldIndex && newViews.length === oldViews.length; const isViewDeletedWithChangedIndex = newViews[newIndex]?.label === oldViews[oldIndex]?.label; if (isViewUpdated || isViewDeletedWithChangedIndex) { return; } // allow empty label // occurs when the user removes all views emit('select:view', newViews[newIndex]?.label ?? null); }); // whenever the view menu popover changes, we reset the edit popover because it is never opened by default watch(activeViewMenuPopover, () => { setActiveEditViewPopover(); }); watch(showAllViewsPopover, value => { if (value) { return; } // if show all view popover is closed, close children as well hideViewMenuPopover(); }); // set the popover to open next to the edit button watch(activeEditViewPopover, value => { const editButtonIndex = isViewUnsaved(value) ? 2 : 0; // EDGE CASE: // Since edit button can be clicked while in all views popover or while it is in the bar, // we will not support the case where edit popover is opened and the screen is resize until the view menu is hidden. // Edit popover will still be displayed but the position does not have to follow the edit button as it is hidden. if (showAllViewsPopover.value) { const menuListItemRef = viewControlAllViewsRef.value.$refs.editViewMenuRefs[activeViewMenuPopover.value]?.$refs ?.menuItemListRef; editViewTargetElementRef.value = viewControlAllViewsRef.value.$refs.editViewMenuRefs[activeViewMenuPopover.value]?.$refs?.menuItemListRef ?.$refs?.menuItemRef?.[editButtonIndex] ?? null; if (!value) { menuListItemRef?.focusItem(); clearError(); } return; } const menuListItemRef = editViewMenuRefs.value.find(ref => ref.$refs.menuItemListRef)?.$refs?.menuItemListRef; editViewTargetElementRef.value = menuListItemRef?.$refs?.menuItemRef?.[editButtonIndex] ?? null; if (!value) { menuListItemRef?.focusItem(); clearError(); } }); // Watch for external changes to the activeViewIndex prop watch( () => props.activeViewIndex, newValue => { if (newValue !== undefined && newValue >= 0 && newValue < computedViews.value.length) { currentActiveView.value = newValue; } } ); onMounted(() => { if ( props.activeViewIndex !== undefined && props.activeViewIndex >= 0 && props.activeViewIndex < computedViews.value.length ) { currentActiveView.value = props.activeViewIndex; } else if (!props.disableAutoSelect) { const defaultView = computedViews.value.findIndex(view => view.isDefault); currentActiveView.value = defaultView >= 0 ? defaultView : 0; } }); const getViewMenuData = (index: number): Array<BentoMenuItem> => [ ...(isViewUnsaved(index) ? [ { text: t('saveChanges'), handler: handleSaveChanges, icon: DownloadIcon, }, { addDivider: true, text: t('restoreChanges'), handler: handleRestoreChanges, icon: RefreshIcon, }, ] : []), ...(!computedViews.value[index]?.isFixed ? [ { text: t('edit'), handler: () => { setActiveEditViewPopover(activeViewMenuPopover.value); }, icon: EditIcon, skipClose: true, }, ] : []), { text: t('setAsDefault'), handler: () => { const updatedViewObj = updateView({ isDefault: true }, activeViewMenuPopover.value); emit('update:view', updatedViewObj); addToast({ text: t('setAsDefaultToast', { label: updatedViewObj.targetViewLabel }), }); hideViewMenuPopover(); }, icon: HeartIcon, }, { text: t('duplicate'), handler: () => { const updatedViewObj = duplicateView(activeViewMenuPopover.value); emit('duplicate:view', updatedViewObj); hideViewMenuPopover(); // switch to newly duplicated view handleViewSelect(updatedViewObj.newViews.length - 1); }, icon: PlusMultipleIcon, }, ...(!computedViews.value[index]?.isFixed ? [ { text: t('delete'), handler: () => { viewToBeDeleted.value = activeViewMenuPopover.value; showDeleteModalWarning.value = true; }, critical: true, icon: BinIcon, }, ] : []), ]; const showViewMenuPopover = (index: number) => { activeViewMenuPopover.value = index; }; const hideViewMenuPopover = () => { activeViewMenuPopover.value = null; setActiveEditViewPopover(); }; const setActiveEditViewPopover = (index?: number) => { if (index === activeEditViewPopover.value) { activeEditViewPopover.value = null; } else { activeEditViewPopover.value = index ?? null; } }; const handleCreateViewItem = (value: BentoHeaderWithViewsItem) => { const updatedViewObj = updateView(value); emit('add:view', updatedViewObj); hideCreateViewPopover(); // switch to new view on add handleViewSelect(updatedViewObj.newViews.findIndex(view => updatedViewObj.targetViewLabel === view.label)); addToast({ text: t('createViewToast', { label: updatedViewObj.targetViewLabel }), }); }; const handleUpdateViewItem = (value: BentoHeaderWithViewsItem) => { emit('update:view', updateView(value, activeEditViewPopover.value)); hideEditViewPopover(); }; const handleKeydownEnterViewItem = (value: BentoHeaderWithViewsItem) => { validateLabel(value.label, activeViewMenuPopover.value); if (Object.values(errors).some(error => error.length > 0)) { return; } if (activeEditViewPopover.value) { handleUpdateViewItem(value); return; } handleCreateViewItem(value); }; const handleViewSelect = (index: number) => { // If there's no currently active view, or if there are no unsaved changes, // just switch to the new view. if (currentActiveView.value === null || !props.hasChanges || props.skipUnsavedChangesText === null) { // If switching from an existing view, emit restore event. if (currentActiveView.value !== null) { emit('restore:view', computedViews.value[currentActiveView.value].label); } currentActiveView.value = index; return; } nextActiveView.value = index; showUnsavedModalWarning.value = true; }; const handleReorder = (reorderedViews: Array<BentoHeaderWithViewsItem>) => { const currentActiveLabel = currentActiveView.value !== null ? computedViews.value[currentActiveView.value]?.label : null; const result = setViews(reorderedViews); if (currentActiveLabel) { const newIndex = result.newViews.findIndex(view => view.label === currentActiveLabel); if (newIndex !== -1) { currentActiveView.value = newIndex; } } emit('reorder:view', result); }; const handleClickModal = (event: MouseEvent) => { if ((event.target as HTMLElement).closest('button')) { return; } event.stopPropagation(); event.preventDefault(); }; const handleTabEditViewPopover = () => { // skip built-in refocus on the menu button when menu is closed // enables tab to flow as intended by HTML spec editViewMenuRefs.value[0].closeMenu(false); }; const handleSaveChanges = () => { const label = computedViews.value[currentActiveView.value].label; emit('save:view', label); if (showUnsavedModalWarning.value) { emit('update:skip-unsaved-changes', skipUnsavedChangesReminder.value); // fired when user saves the view while navigating to a different tab currentActiveView.value = nextActiveView.value; nextActiveView.value = null; showUnsavedModalWarning.value = false; } else { // fired when user saves the view via the menu hideViewMenuPopover(); } addToast({ text: t('saveChangesToast', { label }), action: { handler: () => emit('restore:view', label), text: t('undo'), }, }); }; const handleRestoreChanges = () => { emit('restore:view', computedViews.value[currentActiveView.value].label); if (showUnsavedModalWarning.value) { emit('update:skip-unsaved-changes', skipUnsavedChangesReminder.value); // fired when user restore the view while navigating to a different tab currentActiveView.value = nextActiveView.value; nextActiveView.value = null; showUnsavedModalWarning.value = false; } else { // fired when user restore the view via the menu hideViewMenuPopover(); } }; const isViewActive = (index: number) => currentActiveView.value === index; const isViewUnsaved = (index: number) => isViewActive(index) && props.hasChanges; </script> <script lang="ts"> /** * Header with views allow users to save and quickly retrieve configurations tailored to specific tasks. * For example, managing daily transactions, auditing, or analyzing specific data sets. * It also allows the user to define the columns, filters, and search queries they need. * * @example * import { BentoHeaderWithViews } from '@adyen/bento-vue2'; * * export default { * components: { BentoHeaderWithViews }, * template: ` * <bento-header-with-views * :actions="[ * { title: 'Primary action', event: () => undefined }, * { title: 'Secondary action', event: () => undefined }, * { title: 'Tertiary action', event: () => undefined }, * { title: 'Another action', event: () => undefined } * ]" * description="Page Description" * title="Page Title" * :views="[ * { icon: 'stack', iconColor: 'blue', label: 'A very long value' }, * { icon: 'stack', iconColor: 'primary', label: 'Title 1' }, * { icon: 'stack', iconColor: 'primary', label: 'Title 2' } * ]" * :additionalViewSetting="{ * label: 'Include date filter (relative)', * value: false * }" * hasChanges * /> * ` * }; */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./header-with-views.scss" /> 
+<template> <div ref="hostRef" class="b-header-with-views"> <div class="b-header-with-views__container" :class="conditionalContainerClass"> <div class="b-header-with-views__title"> <bento-typography el="h2" variant="title">{{ title }}</bento-typography> <info-icon-with-popover v-if="infoIconTooltipText || hasSlot('infoIconTooltipContent')" :popover-text="infoIconTooltipText" class="b-header-with-views__title-icon" > <template v-if="hasSlot('infoIconTooltipContent')" #default> <slot name="infoIconTooltipContent" /> </template> </info-icon-with-popover> </div> <fieldset ref="viewsRef" class="b-header-with-views__bar" :aria-label="t('viewListLabel')"> <div v-for="(view, index) in computedViews" :key="index" ref="viewRefs" class="b-header-with-views__bar-tab" :class="isViewActive(index) ? 'b-header-with-views__bar-tab--active' : null" > <bento-button class="b-header-with-views__bar-tab-button" variant="tertiary-with-background" :aria-current="currentActiveView === index ? 'true' : 'false'" @click="handleViewSelect(index)" @keydown.enter.native="handleViewSelect(index)" @keydown.space.native="handleViewSelect(index)" > <template #iconLeft> <span class="b-header-with-views__bar-tab-button-icon" :class="`b-header-with-views__bar-tab-button-icon--${view.iconColor}`" aria-hidden="true" > <component :is="BentoHeaderWithViewsItemIconElement[view.icon]" /> </span> </template> <bento-typography el="span" variant="body" stronger class="b-header-with-views__bar-tab-button-text" > {{ view.label }} </bento-typography> <template v-if="isViewUnsaved(index)" #iconRight> <span class="b-header-with-views__bar-tab-button--unsaved"> <dot-icon :svg-title="t('withUnsavedChanges')" /> </span> </template> </bento-button> <bento-menu v-if="currentActiveView === index" ref="editViewMenuRefs" class="b-header-with-views__bar-tab-menu" :button="{ variant: 'tertiary', 'aria-label': t('openViewOptions', { label: view.label }) }" :data="getViewMenuData(index)" :close-on-click-outside-options="{ ignore: [`#${editViewPopoverId}`], }" :menu-fixed-positioning="true" @open="showViewMenuPopover(index)" @close="hideViewMenuPopover()" @keydown.tab.native.capture="handleTabEditViewPopover" > <template #iconLeft> <options-horizontal-icon :aria-hidden="true" /> </template> </bento-menu> </div> <div ref="viewControlRef" class="b-header-with-views__bar-control"> <!-- All views --> <header-with-views-all-views v-if="computedViews.length" ref="viewControlAllViewsRef" :menu-items="computedViews" :menu-items-actions="getViewMenuData(activeViewMenuPopover)" :menu-close-on-click-outside-options="{ ignore: [`#${editViewPopoverId}`] }" @close:view-menu="hideViewMenuPopover()" @close:all-views="showAllViewsPopover = false" @open:all-views="showAllViewsPopover = true" @open:view-menu="index => showViewMenuPopover(index)" @reorder:view="views => handleReorder(views)" @select:view="index => handleViewSelect(index)" /> <bento-toggle-button ref="createViewButtonRef" :aria-expanded="showCreateViewPopover" :aria-controls="showCreateViewPopover ? createViewPopoverId : null" :toggled="showCreateViewPopover" variant="tertiary" @click="showCreateViewPopover = !showCreateViewPopover" > <template #iconLeft> <plus-icon :svg-title="t('createView')" :aria-hidden="computedViews.length === 0" /> </template> <template v-if="computedViews.length === 0" #default>{{ t('createView') }}</template> </bento-toggle-button> </div> </fieldset> <title-details v-if="hasMetaSection" class="b-header-with-views__meta-container" :description="description" :last-updated="lastUpdated" :reload-button="reloadButton" > <template v-if="hasSlot('description')" #description><slot name="description" /></template> </title-details> <button-actions-with-menu v-if="actions" :actions="actions" :actions-layout="isCompact ? 'buttons-start' : 'buttons-end'" :displayed-actions="2" :disable-responsive-behavior="true" :hide-displayed-actions-breakpoint="STACKED_LAYOUT_BREAKPOINT" class="b-header-with-views__actions" /> </div> <!-- Create view --> <bento-popover v-if="activeViewMenuPopover === null && createViewButtonRef" :id="createViewPopoverId" ref="createViewPopoverRef" :dismissible="true" :fixed-positioning="true" :target-element="createViewButtonRef" :title="t('createView')" :open="showCreateViewPopover" :overflow-visible="true" position="bottom-start" @dismiss="hideCreateViewPopover" @keydown.esc.native.capture.stop.prevent="hideCreateViewPopover" > <header-with-views-edit-form context="create" :errors="errors" :additional-form-item="additionalViewSetting" :disable-customization="disableCustomization" @blur:label="value => validateLabel(value, activeViewMenuPopover)" @input:label="value => validateLabel(value, activeViewMenuPopover)" @keydown:enter="handleKeydownEnterViewItem" @update="handleCreateViewItem" @cancel="hideCreateViewPopover" > </header-with-views-edit-form> </bento-popover> <!-- Edit view --> <bento-popover v-if="activeViewMenuPopover !== null && editViewTargetElementRef" :id="editViewPopoverId" ref="editViewPopoverRef" :disable-focus-trap="false" :dismissible="true" :fixed-positioning="true" :target-element="editViewTargetElementRef" :title="t('editDetails')" :open="activeEditViewPopover !== null" :overflow-visible="true" position="right-start" @dismiss="setActiveEditViewPopover()" @keydown.esc.native.capture.stop.prevent="setActiveEditViewPopover()" > <header-with-views-edit-form v-if="computedViews[activeEditViewPopover]" context="edit" :additional-form-item="computedViews[activeEditViewPopover].additionalViewSetting" :errors="errors" :icon="computedViews[activeEditViewPopover].icon" :icon-color="computedViews[activeEditViewPopover].iconColor" :label="computedViews[activeEditViewPopover].label" :disable-customization="disableCustomization" @blur:label="value => validateLabel(value, activeViewMenuPopover)" @input:label="value => validateLabel(value, activeViewMenuPopover)" @keydown:enter="handleKeydownEnterViewItem" @update="handleUpdateViewItem" @cancel="hideEditViewPopover" > </header-with-views-edit-form> </bento-popover> <!-- Unsaved views prompt --> <bento-modal :actions="computedUnsavedViewModalActions" :is-dismissible="false" :is-open="showUnsavedModalWarning" @close-modal="showUnsavedModalWarning = false" > <template #default>{{ t('leaveView') }}</template> <template #content> <div class="b-header-with-views__modal-description"> <bento-typography> <component :is="i18nComponent" v-bind="getI18nProps('leaveViewDescription')" tag="span"> <template #label> <bento-typography strongest el="span">{{ computedViews[currentActiveView]?.label }}</bento-typography> </template> </component> </bento-typography> <bento-checkbox v-if="skipUnsavedChangesText" :model-value="skipUnsavedChangesReminder" @update:model-value="value => (skipUnsavedChangesReminder = value)" > {{ skipUnsavedChangesText }} </bento-checkbox> </div> </template> </bento-modal> <!-- Delete views prompt --> <bento-modal :actions="computedDeleteViewModalActions" :is-open="showDeleteModalWarning" :is-dismissible="false" destructive-actions @click.native.capture="handleClickModal" @close-modal="showDeleteModalWarning = false" > <template #default> {{ t('deleteView') }} </template> <template #content> <div class="b-header-with-views__modal-description"> <bento-typography> <component :is="i18nComponent" v-bind="getI18nProps('deleteViewDescription')" tag="span"> <template #label> <bento-typography strongest el="span">{{ computedViewToBeDeletedLabel }}</bento-typography> </template> </component> </bento-typography> </div> </template> </bento-modal> </div> </template> <script setup lang="ts"> import { BentoButton, BentoToggleButton } from '@/components/button'; import { BentoCheckbox } from '@/components/checkbox'; import { BentoMenu, type BentoMenuItem } from '@/components/menu'; import BentoModal from '@/components/modal/modal.vue'; import { BentoPopover } from '@/components/popover'; import { BentoTypography } from '@/components/typography'; import { TitleDetails } from '@/internal'; import { useBentoToastController, useClickOutside, useHasSlot } from '@/composables'; import { generateUid } from '@/utils/ts/generate-uid'; import ButtonActionsWithMenu from '@/internal/button-actions-with-menu/button-actions-with-menu.vue'; import { InfoIconWithPopover } from '@/internal/info-icon-with-popover'; import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n'; import BinIcon from '@adyen/ui-assets-icons-16/vue/bin'; import DotIcon from '@adyen/ui-assets-icons-16/vue/dot'; import DownloadIcon from '@adyen/ui-assets-icons-16/vue/download'; import EditIcon from '@adyen/ui-assets-icons-16/vue/edit-2'; import HeartIcon from '@adyen/ui-assets-icons-16/vue/heart'; import OptionsHorizontalIcon from '@adyen/ui-assets-icons-16/vue/options-horizontal'; import PlusIcon from '@adyen/ui-assets-icons-16/vue/plus'; import PlusMultipleIcon from '@adyen/ui-assets-icons-16/vue/plus-multiple'; import RefreshIcon from '@adyen/ui-assets-icons-16/vue/refresh'; import { useElementSize } from '@vueuse/core'; import { computed, nextTick, onMounted, ref, useSlots, watch } from 'vue'; import { HeaderWithViewsAllViews, HeaderWithViewsEditForm } from './components'; import { useEditViews, useResponsiveViews } from './composables'; import { type BentoHeaderWithViewsEmits, BentoHeaderWithViewsItemIconElement, } from './header-with-views.internal.types'; import { type BentoHeaderWithViewsItem, type BentoHeaderWithViewsProps } from './header-with-views.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoHeaderWithViewsProps>(), { actions: () => [], additionalViewSetting: null, title: null, description: null, disableCustomization: false, lastUpdated: null, reloadButton: null, infoIconTooltipText: null, views: () => [], disableAutoSelect: false, activeViewIndex: undefined, }); const emit = defineEmits<BentoHeaderWithViewsEmits>(); const STACKED_LAYOUT_BREAKPOINT = 573; const i18nComponent = getI18nComponent(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); // refs const createViewButtonRef = ref(null); const createViewPopoverRef = ref(null); const editViewPopoverRef = ref(null); const editViewMenuRefs = ref([]); const editViewTargetElementRef = ref(null); // used as a mount for the edit form popover const hostRef = ref(null); const viewsRef = ref<HTMLElement>(null); // container for all views const viewRefs = ref<Array<HTMLDivElement>>([]); // individual view const viewControlRef = ref(null); // all views menu and create view button container const viewControlAllViewsRef = ref(null); // all views menu // controls const showCreateViewPopover = ref<boolean>(false); // control the create view popover const showAllViewsPopover = ref<boolean>(false); // control when menu button is shown const showUnsavedModalWarning = ref<boolean>(false); const showDeleteModalWarning = ref<boolean>(false); const activeEditViewPopover = ref<number>(null); // control the edit view popover const activeViewMenuPopover = ref<number>(null); // control when menu items are shown const internalActiveView = ref<number>(null); // control which view the user is currently on const nextActiveView = ref<number>(null); // control which view is does the user want to navigate to, used for caching unsaved view navigation const viewToBeDeleted = ref<number>(null); // cache which view is marked for deletion // Computed property to handle two-way binding for activeViewIndex const currentActiveView = computed({ get: () => internalActiveView.value, set: (value: number | null) => { internalActiveView.value = value; emit('update:active-view-index', value); }, }); // models const skipUnsavedChangesReminder = ref<boolean>(false); const createViewPopoverId = generateUid('createViewPopover'); const editViewPopoverId = generateUid('editViewPopover'); useResponsiveViews({ container: viewsRef, children: viewRefs, offset: viewControlRef, activeViewIndex: currentActiveView, }); const { computedViews, clearError, duplicateView, errors, setViews, updateView, validateLabel } = useEditViews({ additionalViewSetting: props.additionalViewSetting, views: props.views, }); const hideCreateViewPopover = async (updateFocus = true) => { showCreateViewPopover.value = false; if (updateFocus) { await nextTick(); createViewButtonRef.value.$el.focus(); } clearError(); }; const hideEditViewPopover = () => { const currentMenuRef = showAllViewsPopover.value ? viewControlAllViewsRef.value.$refs.editViewMenuRefs[activeEditViewPopover.value] : editViewMenuRefs.value[0]; currentMenuRef?.closeMenu(); }; useClickOutside(createViewPopoverRef, () => hideCreateViewPopover(false), { ignore: [createViewButtonRef], }); useClickOutside(editViewPopoverRef, () => setActiveEditViewPopover(), { ignore: [editViewTargetElementRef], }); const { width: hostWidth } = useElementSize(hostRef); const { addToast } = useBentoToastController(); const computedUnsavedViewModalActions = computed(() => [ { title: t('leave'), event: handleRestoreChanges, }, { title: t('saveChanges'), event: handleSaveChanges, }, ]); const computedDeleteViewModalActions = computed(() => [ { title: t('delete'), event: async () => { showDeleteModalWarning.value = false; const updatedViewObj = updateView(null, viewToBeDeleted.value); emit('delete:view', updatedViewObj); hideViewMenuPopover(); // if a view that is placed higher in the order is deleted, ignore if (currentActiveView.value < viewToBeDeleted.value) { return; } // if a view that is placed lower in the order is deleted, // we need to shift the index to maintain the current view if (currentActiveView.value > viewToBeDeleted.value) { currentActiveView.value -= 1; } else if (currentActiveView.value === viewToBeDeleted.value) { if (updatedViewObj.newViews.length === 0) { // there are no more views currentActiveView.value = null; } else if (currentActiveView.value >= updatedViewObj.newViews.length) { // shift it to the left currentActiveView.value -= 1; } // else, keep it at the same index } viewToBeDeleted.value = null; }, }, { title: t('cancel'), event: () => { showDeleteModalWarning.value = false; }, }, ]); const computedViewToBeDeletedLabel = computed(() => computedViews.value[viewToBeDeleted.value]?.label); const hasMetaSection = computed(() => props.description || hasSlot('description') || props.lastUpdated); const isCompact = computed(() => hostWidth.value <= STACKED_LAYOUT_BREAKPOINT); const conditionalContainerClass = computed(() => ({ 'b-header-with-views__container--is-compact': isCompact.value, 'b-header-with-views__container--has-meta': hasMetaSection.value, })); watch([currentActiveView, computedViews], ([newIndex, newViews], [oldIndex, oldViews]) => { // skip if the labels are the same or no active view const isViewUpdated = newIndex === oldIndex && newViews.length === oldViews.length; const isViewDeletedWithChangedIndex = newViews[newIndex]?.label === oldViews[oldIndex]?.label; if (isViewUpdated || isViewDeletedWithChangedIndex) { return; } // allow empty label // occurs when the user removes all views emit('select:view', newViews[newIndex]?.label ?? null); }); // whenever the view menu popover changes, we reset the edit popover because it is never opened by default watch(activeViewMenuPopover, () => { setActiveEditViewPopover(); }); watch(showAllViewsPopover, value => { if (value) { return; } // if show all view popover is closed, close children as well hideViewMenuPopover(); }); // set the popover to open next to the edit button watch(activeEditViewPopover, value => { const editButtonIndex = isViewUnsaved(value) ? 2 : 0; // EDGE CASE: // Since edit button can be clicked while in all views popover or while it is in the bar, // we will not support the case where edit popover is opened and the screen is resize until the view menu is hidden. // Edit popover will still be displayed but the position does not have to follow the edit button as it is hidden. if (showAllViewsPopover.value) { const menuListItemRef = viewControlAllViewsRef.value.$refs.editViewMenuRefs[activeViewMenuPopover.value]?.$refs ?.menuItemListRef; editViewTargetElementRef.value = viewControlAllViewsRef.value.$refs.editViewMenuRefs[activeViewMenuPopover.value]?.$refs?.menuItemListRef ?.$refs?.menuItemRef?.[editButtonIndex] ?? null; if (!value) { menuListItemRef?.focusItem(); clearError(); } return; } const menuListItemRef = editViewMenuRefs.value.find(ref => ref.$refs.menuItemListRef)?.$refs?.menuItemListRef; editViewTargetElementRef.value = menuListItemRef?.$refs?.menuItemRef?.[editButtonIndex] ?? null; if (!value) { menuListItemRef?.focusItem(); clearError(); } }); // Watch for external changes to the activeViewIndex prop watch( () => props.activeViewIndex, newValue => { if (newValue !== undefined && newValue >= 0 && newValue < computedViews.value.length) { currentActiveView.value = newValue; } } ); onMounted(() => { if ( props.activeViewIndex !== undefined && props.activeViewIndex >= 0 && props.activeViewIndex < computedViews.value.length ) { currentActiveView.value = props.activeViewIndex; } else if (!props.disableAutoSelect) { const defaultView = computedViews.value.findIndex(view => view.isDefault); currentActiveView.value = defaultView >= 0 ? defaultView : 0; } }); const getViewMenuData = (index: number): Array<BentoMenuItem> => [ ...(isViewUnsaved(index) ? [ { text: t('saveChanges'), handler: handleSaveChanges, icon: DownloadIcon, }, { addDivider: true, text: t('restoreChanges'), handler: handleRestoreChanges, icon: RefreshIcon, }, ] : []), ...(!computedViews.value[index]?.isFixed ? [ { text: t('edit'), handler: () => { setActiveEditViewPopover(activeViewMenuPopover.value); }, icon: EditIcon, skipClose: true, }, ] : []), { text: t('setAsDefault'), handler: () => { const updatedViewObj = updateView({ isDefault: true }, activeViewMenuPopover.value); emit('update:view', updatedViewObj); addToast({ text: t('setAsDefaultToast', { label: updatedViewObj.targetViewLabel }), }); hideViewMenuPopover(); }, icon: HeartIcon, }, { text: t('duplicate'), handler: () => { const updatedViewObj = duplicateView(activeViewMenuPopover.value); emit('duplicate:view', updatedViewObj); hideViewMenuPopover(); // switch to newly duplicated view handleViewSelect(updatedViewObj.newViews.length - 1); }, icon: PlusMultipleIcon, }, ...(!computedViews.value[index]?.isFixed ? [ { text: t('delete'), handler: () => { viewToBeDeleted.value = activeViewMenuPopover.value; showDeleteModalWarning.value = true; }, critical: true, icon: BinIcon, }, ] : []), ]; const showViewMenuPopover = (index: number) => { activeViewMenuPopover.value = index; }; const hideViewMenuPopover = () => { activeViewMenuPopover.value = null; setActiveEditViewPopover(); }; const setActiveEditViewPopover = (index?: number) => { if (index === activeEditViewPopover.value) { activeEditViewPopover.value = null; } else { activeEditViewPopover.value = index ?? null; } }; const handleCreateViewItem = (value: BentoHeaderWithViewsItem) => { const updatedViewObj = updateView(value); emit('add:view', updatedViewObj); hideCreateViewPopover(); // switch to new view on add handleViewSelect(updatedViewObj.newViews.findIndex(view => updatedViewObj.targetViewLabel === view.label)); addToast({ text: t('createViewToast', { label: updatedViewObj.targetViewLabel }), }); }; const handleUpdateViewItem = (value: BentoHeaderWithViewsItem) => { emit('update:view', updateView(value, activeEditViewPopover.value)); hideEditViewPopover(); }; const handleKeydownEnterViewItem = (value: BentoHeaderWithViewsItem) => { validateLabel(value.label, activeViewMenuPopover.value); if (Object.values(errors).some(error => error.length > 0)) { return; } if (activeEditViewPopover.value) { handleUpdateViewItem(value); return; } handleCreateViewItem(value); }; const handleViewSelect = (index: number) => { // If there's no currently active view, or if there are no unsaved changes, // just switch to the new view. if (currentActiveView.value === null || !props.hasChanges || props.skipUnsavedChangesText === null) { // If switching from an existing view, emit restore event. if (currentActiveView.value !== null) { emit('restore:view', computedViews.value[currentActiveView.value].label); } currentActiveView.value = index; return; } nextActiveView.value = index; showUnsavedModalWarning.value = true; }; const handleReorder = (reorderedViews: Array<BentoHeaderWithViewsItem>) => { const currentActiveLabel = currentActiveView.value !== null ? computedViews.value[currentActiveView.value]?.label : null; const result = setViews(reorderedViews); if (currentActiveLabel) { const newIndex = result.newViews.findIndex(view => view.label === currentActiveLabel); if (newIndex !== -1) { currentActiveView.value = newIndex; } } emit('reorder:view', result); }; const handleClickModal = (event: MouseEvent) => { if ((event.target as HTMLElement).closest('button')) { return; } event.stopPropagation(); event.preventDefault(); }; const handleTabEditViewPopover = () => { // skip built-in refocus on the menu button when menu is closed // enables tab to flow as intended by HTML spec editViewMenuRefs.value[0].closeMenu(false); }; const handleSaveChanges = () => { const label = computedViews.value[currentActiveView.value].label; emit('save:view', label); if (showUnsavedModalWarning.value) { emit('update:skip-unsaved-changes', skipUnsavedChangesReminder.value); // fired when user saves the view while navigating to a different tab currentActiveView.value = nextActiveView.value; nextActiveView.value = null; showUnsavedModalWarning.value = false; } else { // fired when user saves the view via the menu hideViewMenuPopover(); } addToast({ text: t('saveChangesToast', { label }), action: { handler: () => emit('restore:view', label), text: t('undo'), }, }); }; const handleRestoreChanges = () => { emit('restore:view', computedViews.value[currentActiveView.value].label); if (showUnsavedModalWarning.value) { emit('update:skip-unsaved-changes', skipUnsavedChangesReminder.value); // fired when user restore the view while navigating to a different tab currentActiveView.value = nextActiveView.value; nextActiveView.value = null; showUnsavedModalWarning.value = false; } else { // fired when user restore the view via the menu hideViewMenuPopover(); } }; const isViewActive = (index: number) => currentActiveView.value === index; const isViewUnsaved = (index: number) => isViewActive(index) && props.hasChanges; </script> <script lang="ts"> /** * Header with views allow users to save and quickly retrieve configurations tailored to specific tasks. * For example, managing daily transactions, auditing, or analyzing specific data sets. * It also allows the user to define the columns, filters, and search queries they need. * * @example * import { BentoHeaderWithViews } from '@adyen/bento-vue2'; * * export default { * components: { BentoHeaderWithViews }, * template: ` * <bento-header-with-views * :actions="[ * { title: 'Primary action', event: () => undefined }, * { title: 'Secondary action', event: () => undefined }, * { title: 'Tertiary action', event: () => undefined }, * { title: 'Another action', event: () => undefined } * ]" * description="Page Description" * title="Page Title" * :views="[ * { icon: 'stack', iconColor: 'blue', label: 'A very long value' }, * { icon: 'stack', iconColor: 'primary', label: 'Title 1' }, * { icon: 'stack', iconColor: 'primary', label: 'Title 2' } * ]" * :additionalViewSetting="{ * label: 'Include date filter (relative)', * value: false * }" * hasChanges * /> * ` * }; */ export default { i18n: { messages }, name: 'bento-header-with-views', }; </script> <style lang="scss" scoped src="./header-with-views.scss" /> 

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

@@ -1 +1 @@
-import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { StoryObj } from '@storybook/vue'; import BentoImage from './image.vue'; import { mockImage } from './const'; import { BentoImageAspectRatio, BentoImageObjectFit } from './image.types'; import { isVue2 } from 'vue-demi'; export default { title: 'Image', component: BentoImage, argTypes: { aspectRatio: { options: Object.values(BentoImageAspectRatio), mapping: BentoImageAspectRatio, control: { type: 'select', }, }, objectFit: { options: Object.values(BentoImageObjectFit), mapping: BentoImageObjectFit, control: { type: 'select', }, }, }, }; type Story = StoryObj<typeof BentoImage>; const DEFAULT_IMAGE_PROPS = { src: mockImage, alt: 'Mock image', aspectRatio: 'landscape', objectFit: 'cover', }; const DefaultTemplate: Story = { render: (_args, { argTypes }) => ({ components: { BentoImage }, props: Object.keys(argTypes), template: ` <bento-image v-bind="args" style="width:200px" /> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), }; const defaultCode = ` <bento-image src="${DEFAULT_IMAGE_PROPS.src}" alt="${DEFAULT_IMAGE_PROPS.alt}" aspect-ratio="${DEFAULT_IMAGE_PROPS.aspectRatio}" object-fit="${DEFAULT_IMAGE_PROPS.objectFit}" /> `; export const Default = { ...DefaultTemplate, args: { ...DEFAULT_IMAGE_PROPS, }, parameters: storybookDocsParameter(defaultCode), }; Default.argTypes = { icon: { table: { disable: true } } }; 
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { StoryObj } from '@storybook/vue'; import BentoImage from './image.vue'; import { mockImage } from './const'; import { BentoImageAspectRatio, BentoImageObjectFit } from './image.types'; import { isVue2 } from 'vue-demi'; const ImageDefault = "<template>\n <bento-image alt=\"Example image\" aspect-ratio=\"landscape\" object-fit=\"cover\" src=\"/images/example.jpg\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoImage } from '@adyen/bento-vue2';\n</script>\n"; export default { title: 'Image', component: BentoImage, argTypes: { aspectRatio: { options: Object.values(BentoImageAspectRatio), mapping: BentoImageAspectRatio, control: { type: 'select', }, }, objectFit: { options: Object.values(BentoImageObjectFit), mapping: BentoImageObjectFit, control: { type: 'select', }, }, }, }; type Story = StoryObj<typeof BentoImage>; const DEFAULT_IMAGE_PROPS = { src: mockImage, alt: 'Mock image', aspectRatio: 'landscape', objectFit: 'cover', }; const DefaultTemplate: Story = { render: (_args, { argTypes }) => ({ components: { BentoImage }, props: Object.keys(argTypes), template: ` <bento-image v-bind="args" style="width:200px" /> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), }; export const Default = { ...DefaultTemplate, args: { ...DEFAULT_IMAGE_PROPS, }, parameters: storybookDocsParameter(ImageDefault), }; Default.argTypes = { icon: { table: { disable: true } } }; 

package/dist/assets/components/info-icon/info-icon.stories.ts

@@ -1 +1 @@
-import BentoInfoIcon from './info-icon.vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import { PopperContainerPosition } from '@/components/popper-container'; export default { title: 'Info Icon', component: BentoInfoIcon, argTypes: { tooltipPosition: { options: Object.values(PopperContainerPosition), mapping: PopperContainerPosition, defaultValue: PopperContainerPosition.AUTO, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoInfoIcon>; const DEFAULT_INFO_ICON_PROPS = { tooltipText: 'Default Icon Tooltip Text', }; const defaultCode = ` <template> <bento-info-icon tooltip-text="${DEFAULT_INFO_ICON_PROPS.tooltipText}" /> </template> <script setup lang="ts"> import { BentoInfoIcon } from '@adyen/bento-vue2'; </scrip> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoInfoIcon }, props: Object.keys(argTypes), template: ` <bento-info-icon v-bind="args"/> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_INFO_ICON_PROPS }, parameters: storybookDocsParameter(defaultCode), }; 
+import BentoInfoIcon from './info-icon.vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import { PopperContainerPosition } from '@/components/popper-container'; const InfoIconDefault = "<template>\n <bento-info-icon tooltip-text=\"Default Icon Tooltip Text\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoInfoIcon } from '@adyen/bento-vue2';\n</script>\n"; export default { title: 'Info Icon', component: BentoInfoIcon, argTypes: { tooltipPosition: { options: Object.values(PopperContainerPosition), mapping: PopperContainerPosition, defaultValue: PopperContainerPosition.AUTO, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoInfoIcon>; const DEFAULT_INFO_ICON_PROPS = { tooltipText: 'Default Icon Tooltip Text', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoInfoIcon }, props: Object.keys(argTypes), template: ` <bento-info-icon v-bind="args"/> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_INFO_ICON_PROPS }, parameters: storybookDocsParameter(InfoIconDefault), }; 

package/dist/assets/components/input-field/input-field.docs.mdx

@@ -13,13 +13,6 @@ It's a complete form control including a label, input, icons and description tex
     <Story of={InputFieldStories.Default} />
 </Canvas>
 
-- [Input field](#input-field)
-- [Variants](#variants)
-- [Icons](#icons)
-- [Modifiers](#modifiers)
-- [Accessibility](#accessibility)
-- [Focus](#focus)
-
 ## Variants
 
 There are available 3 variants, which can be set by passing one of the listed string value to the `variant` prop:
@@ -110,12 +103,7 @@ copy the data in them.
 
 ### Error
 
-There are two properties which control the error state of `input-field`:
-
-- `errorMessage`: renders the component in an error state with an error message below the input field
-- `error`: toggles the error state
-
-`error` is deprecated and will be removed in the near future, so please use `errorMessage`.
+Set `errorMessage` to render `input-field` in an error state with an error message below the field.
 
 ### Slashed zero
 

package/dist/assets/components/input-field/input-field.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type BentoInputDropdownProps, BentoInputFieldElementPosition, BentoInputFieldType, BentoInputFieldVariant, } from './input-field.types'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { ref, watch } from 'vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoInputField from './input-field.vue'; import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import PaymentMethodTypes from '@adyen/ui-assets-icons-16/vue/payment-method-types'; import './input-field.stories.scss?module'; const meta: Meta = { title: 'Input field', component: BentoInputField, argTypes: { variant: { options: Object.values(BentoInputFieldVariant), mapping: BentoInputFieldVariant, defaultValue: BentoInputFieldVariant.DEFAULT, control: { type: 'select', }, }, type: { options: Object.values(BentoInputFieldType), mapping: BentoInputFieldType, defaultValue: BentoInputFieldType.TEXT, control: { type: 'select', }, }, default: { name: 'default', defaultValue: '', description: 'Label for the input field', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, description: { name: 'description', description: 'If set, displays a description text for the input.', table: { category: 'props', type: { summary: 'string' }, }, control: { type: 'text', }, }, 'slot:description': { name: 'description', defaultValue: '', description: 'If set, displays a description text for the input. Overrides the `description` prop when provided.', table: { type: { summary: 'VNode[]' }, category: 'slots', }, control: { type: 'text', }, }, dropdownPosition: { options: Object.values(BentoInputFieldElementPosition), mapping: BentoInputFieldElementPosition, defaultValue: BentoInputFieldElementPosition.START, control: { type: 'select', }, }, staticValue: { name: 'staticValue', defaultValue: '', description: 'Static text that displayed before or after input value', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, staticValuePosition: { options: Object.values(BentoInputFieldElementPosition), mapping: BentoInputFieldElementPosition, defaultValue: BentoInputFieldElementPosition.START, control: { type: 'select', }, }, defaultIconBefore: { name: 'defaultIconBefore', defaultValue: '', description: 'Optional `icon` at the left side', table: { type: { summary: 'VNode[]' }, category: 'Deprecated', }, control: { disable: true, }, }, iconBefore: { name: 'iconBefore', defaultValue: '', description: 'Optional `icon` at the left side', table: { type: { summary: 'VNode[]' }, }, control: { disable: true, }, }, iconAfter: { name: 'iconAfter', defaultValue: '', description: 'Optional `icon` at the right side', table: { type: { summary: 'VNode[]' }, }, control: { disable: true, }, }, error: { control: { type: 'boolean' }, table: { category: 'Deprecated' }, }, value: { control: { type: 'text' }, table: { category: 'Deprecated' }, description: 'Deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` property instead', }, // Events input: { table: { type: { summary: '(value: BentoInputFieldValue) => void' }, category: 'Deprecated', }, control: { disable: true }, description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', }, 'update:model-value': { table: { type: { summary: '(value: BentoInputFieldValue) => void' }, }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoInputField>; const INPUT_FIELD_DEFAULT_LABEL = 'Label above'; const INPUT_FIELD_DEFAULT_VALUE = 'Entered Text'; const INPUT_FIELD_DEFAULT_DESCRIPTION = 'Description below'; const DEFAULT_INPUT_FIELD_PROPS = { disabled: false, variant: 'default', description: INPUT_FIELD_DEFAULT_DESCRIPTION, modelValue: INPUT_FIELD_DEFAULT_VALUE, staticValue: 'EUR', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoInputField }, props: Object.keys(argTypes), template: ` <bento-input-field class="b-input-field-story" v-bind="args" :model-value="inputValue" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > <template #default v-if="args.default">{{ args.default }}</template> <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-input-field> `, setup(props) { const args = isVue2 ? props : _args; const inputValue = ref(args.modelValue); const inputAction = (value: string) => { inputValue.value = value; action('input')(value); }; const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const blurAction = (value: string) => action('blur')(value); watch( () => args.modelValue, () => { inputValue.value = args.modelValue; } ); return { args, inputValue, inputAction, changeAction, focusAction, blurAction, }; }, }), args: { ...DEFAULT_INPUT_FIELD_PROPS, default: INPUT_FIELD_DEFAULT_LABEL, }, parameters: storybookDocsParameter(` <bento-input-field variant="default" :model-value="inputValue" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > ${INPUT_FIELD_DEFAULT_LABEL} <template #description> ${INPUT_FIELD_DEFAULT_DESCRIPTION} </template> </bento-input-field> `), }; export const DefaultWithIcons = { render: (_args, { argTypes }) => ({ components: { BentoInputField, CheckmarkCircleFill }, props: Object.keys(argTypes), template: ` <bento-input-field class="b-input-field-story" v-bind="args" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > <template #default v-if="args.default">{{ args.default }}</template> <template #iconBefore> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> <template #iconAfter> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-input-field> `, setup(props) { const inputAction = (value: string) => action('input')(value); const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const blurAction = (value: string) => action('blur')(value); return { args: isVue2 ? props : _args, inputAction, changeAction, focusAction, blurAction, }; }, }), args: { ...DEFAULT_INPUT_FIELD_PROPS, default: 'With Icons', }, parameters: storybookDocsParameter(` <bento-input-field variant="default" :model-value="inputValue" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > ${INPUT_FIELD_DEFAULT_LABEL} <template #description> ${INPUT_FIELD_DEFAULT_DESCRIPTION} </template> <template #iconBefore> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> <template #iconAfter> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> </bento-input-field> `), }; export const PaymentsMethod = { render: (_args, { argTypes }) => ({ components: { BentoInputField, CheckmarkCircleFill, PaymentMethodTypes }, props: Object.keys(argTypes), template: ` <bento-input-field class="b-input-field-story" v-bind="args" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > <template #default v-if="args.default">{{ args.default }}</template> <template #paymentMethod> <payment-method-types svg-title="payment-method-types" /> </template> <template #iconAfter> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> <template #staticValue> EUR </template> </bento-input-field> `, setup(props) { const inputAction = (value: string) => action('input')(value); const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const blurAction = (value: string) => action('blur')(value); return { args: isVue2 ? props : _args, inputAction, changeAction, focusAction, blurAction, }; }, }), args: { ...DEFAULT_INPUT_FIELD_PROPS, default: 'Payment Method Variant', variant: 'payment-method', }, parameters: storybookDocsParameter(` <bento-input-field variant="payment-method" :model-value="inputValue" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > ${INPUT_FIELD_DEFAULT_LABEL} <template #description> ${INPUT_FIELD_DEFAULT_DESCRIPTION} </template> <template #paymentMethod> <bento-payment-method svg-title="payment-method" /> </template> <template #iconAfter> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> </bento-input-field> `), }; export const StaticValue = { ...PaymentsMethod, args: { ...DEFAULT_INPUT_FIELD_PROPS, default: 'Static Value Variant', variant: 'static-value', }, parameters: storybookDocsParameter(` <bento-input-field variant="static-value" :model-value="inputValue" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > ${INPUT_FIELD_DEFAULT_LABEL} <template #description> ${INPUT_FIELD_DEFAULT_DESCRIPTION} </template> <template #staticValue> EUR </template> <template #iconAfter> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> </bento-input-field> `), }; const DROPDOWN_DEFAULT_OPTIONS = [ { label: 'EUR', value: 'EUR' }, { label: 'USD', value: 'USD' }, ]; export const Dropdown: Story = { render: (_args, { argTypes }) => ({ components: { BentoInputField, CheckmarkCircleFill, PaymentMethodTypes }, props: Object.keys(argTypes), template: ` <bento-input-field class="b-input-field-story" v-bind="args" :dropdown.sync="dropdownProps" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > <template #default v-if="args.default">{{ args.default }}</template> <template #paymentMethod> <payment-method-types svg-title="payment-method-types" /> </template> <template #iconAfter> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-input-field> `, setup(props) { const args = isVue2 ? props : _args; const dropdownProps = ref({ ...args?.dropdown }); const inputAction = (value: string) => action('input')(value); const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const blurAction = (value: string) => action('blur')(value); const dropdownInputAction = (value: BentoListboxSelectedValue) => { action('dropdown-input')(value); }; watch( () => args.dropdown, () => { Object.assign(dropdownProps.value, args.dropdown); } ); return { args, inputAction, changeAction, focusAction, blurAction, dropdownInputAction, dropdownProps, }; }, }), args: { default: 'Dropdown Variant', description: INPUT_FIELD_DEFAULT_DESCRIPTION, modelValue: INPUT_FIELD_DEFAULT_VALUE, variant: 'dropdown', dropdown: { items: DROPDOWN_DEFAULT_OPTIONS, modelValue: DROPDOWN_DEFAULT_OPTIONS[0].value, readonly: false, 'aria-label': 'Dropdown aria label', dynamicFiltering: false, } satisfies BentoInputDropdownProps, }, }; 
+import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type BentoInputDropdownProps, BentoInputFieldElementPosition, BentoInputFieldType, BentoInputFieldVariant, } from './input-field.types'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { ref, watch } from 'vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoInputField from './input-field.vue'; import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import PaymentMethodTypes from '@adyen/ui-assets-icons-16/vue/payment-method-types'; import './input-field.stories.scss?module'; const InputFieldDefault = "<template>\n <bento-input-field v-model=\"inputValue\" @blur=\"handleBlur\" @change=\"handleChange\" @focus=\"handleFocus\">\n Label above\n <template #description>Description below</template>\n </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoInputField } from '@adyen/bento-vue2';\n import { ref } from 'vue';\n\n const inputValue = ref('Entered Text');\n const handleBlur = () => undefined;\n const handleChange = () => undefined;\n const handleFocus = () => undefined;\n</script>\n"; const InputFieldPaymentMethod = "<template>\n <bento-input-field\n v-model=\"inputValue\"\n static-value=\"EUR\"\n variant=\"payment-method\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n >\n Payment Method Variant\n <template #description>Description below</template>\n <template #paymentMethod>\n <payment-method-types svg-title=\"payment-method-types\" />\n </template>\n <template #iconAfter>\n <checkmark-circle-fill svg-title=\"checkmark-circle-fill\" />\n </template>\n </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoInputField } from '@adyen/bento-vue2';\n import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n import PaymentMethodTypes from '@adyen/ui-assets-icons-16/vue/payment-method-types';\n import { ref } from 'vue';\n\n const inputValue = ref('Entered Text');\n const handleBlur = () => undefined;\n const handleChange = () => undefined;\n const handleFocus = () => undefined;\n</script>\n"; const InputFieldStaticValue = "<template>\n <bento-input-field\n v-model=\"inputValue\"\n variant=\"static-value\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n >\n Static Value Variant\n <template #description>Description below</template>\n <template #staticValue>EUR</template>\n <template #iconAfter>\n <checkmark-circle-fill svg-title=\"checkmark-circle-fill\" />\n </template>\n </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoInputField } from '@adyen/bento-vue2';\n import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n import { ref } from 'vue';\n\n const inputValue = ref('Entered Text');\n const handleBlur = () => undefined;\n const handleChange = () => undefined;\n const handleFocus = () => undefined;\n</script>\n"; const InputFieldWithIcons = "<template>\n <bento-input-field v-model=\"inputValue\" @blur=\"handleBlur\" @change=\"handleChange\" @focus=\"handleFocus\">\n With Icons\n <template #description>Description below</template>\n <template #iconBefore>\n <checkmark-circle-fill svg-title=\"checkmark-circle-fill\" />\n </template>\n <template #iconAfter>\n <checkmark-circle-fill svg-title=\"checkmark-circle-fill\" />\n </template>\n </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoInputField } from '@adyen/bento-vue2';\n import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n import { ref } from 'vue';\n\n const inputValue = ref('Entered Text');\n const handleBlur = () => undefined;\n const handleChange = () => undefined;\n const handleFocus = () => undefined;\n</script>\n"; const meta: Meta = { title: 'Input field', component: BentoInputField, argTypes: { variant: { options: Object.values(BentoInputFieldVariant), mapping: BentoInputFieldVariant, defaultValue: BentoInputFieldVariant.DEFAULT, control: { type: 'select', }, }, type: { options: Object.values(BentoInputFieldType), mapping: BentoInputFieldType, defaultValue: BentoInputFieldType.TEXT, control: { type: 'select', }, }, default: { name: 'default', defaultValue: '', description: 'Label for the input field', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, description: { name: 'description', description: 'If set, displays a description text for the input.', table: { category: 'props', type: { summary: 'string' }, }, control: { type: 'text', }, }, 'slot:description': { name: 'description', defaultValue: '', description: 'If set, displays a description text for the input. Overrides the `description` prop when provided.', table: { type: { summary: 'VNode[]' }, category: 'slots', }, control: { type: 'text', }, }, dropdownPosition: { options: Object.values(BentoInputFieldElementPosition), mapping: BentoInputFieldElementPosition, defaultValue: BentoInputFieldElementPosition.START, control: { type: 'select', }, }, staticValue: { name: 'staticValue', defaultValue: '', description: 'Static text that displayed before or after input value', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, staticValuePosition: { options: Object.values(BentoInputFieldElementPosition), mapping: BentoInputFieldElementPosition, defaultValue: BentoInputFieldElementPosition.START, control: { type: 'select', }, }, defaultIconBefore: { name: 'defaultIconBefore', defaultValue: '', description: 'Optional `icon` at the left side', table: { type: { summary: 'VNode[]' }, category: 'Deprecated', }, control: { disable: true, }, }, iconBefore: { name: 'iconBefore', defaultValue: '', description: 'Optional `icon` at the left side', table: { type: { summary: 'VNode[]' }, }, control: { disable: true, }, }, iconAfter: { name: 'iconAfter', defaultValue: '', description: 'Optional `icon` at the right side', table: { type: { summary: 'VNode[]' }, }, control: { disable: true, }, }, // Events 'update:model-value': { table: { type: { summary: '(value: BentoInputFieldValue) => void' }, }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoInputField>; const INPUT_FIELD_DEFAULT_LABEL = 'Label above'; const INPUT_FIELD_DEFAULT_VALUE = 'Entered Text'; const INPUT_FIELD_DEFAULT_DESCRIPTION = 'Description below'; const DEFAULT_INPUT_FIELD_PROPS = { disabled: false, variant: 'default', description: INPUT_FIELD_DEFAULT_DESCRIPTION, modelValue: INPUT_FIELD_DEFAULT_VALUE, staticValue: 'EUR', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoInputField }, props: Object.keys(argTypes), template: ` <bento-input-field class="b-input-field-story" v-bind="args" :model-value="inputValue" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > <template #default v-if="args.default">{{ args.default }}</template> <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-input-field> `, setup(props) { const args = isVue2 ? props : _args; const inputValue = ref(args.modelValue); const inputAction = (value: string) => { inputValue.value = value; action('update:model-value')(value); }; const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const blurAction = (value: string) => action('blur')(value); watch( () => args.modelValue, () => { inputValue.value = args.modelValue; } ); return { args, inputValue, inputAction, changeAction, focusAction, blurAction, }; }, }), args: { ...DEFAULT_INPUT_FIELD_PROPS, default: INPUT_FIELD_DEFAULT_LABEL, }, parameters: storybookDocsParameter(InputFieldDefault), }; export const DefaultWithIcons = { render: (_args, { argTypes }) => ({ components: { BentoInputField, CheckmarkCircleFill }, props: Object.keys(argTypes), template: ` <bento-input-field class="b-input-field-story" v-bind="args" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > <template #default v-if="args.default">{{ args.default }}</template> <template #iconBefore> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> <template #iconAfter> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-input-field> `, setup(props) { const inputAction = (value: string) => action('update:model-value')(value); const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const blurAction = (value: string) => action('blur')(value); return { args: isVue2 ? props : _args, inputAction, changeAction, focusAction, blurAction, }; }, }), args: { ...DEFAULT_INPUT_FIELD_PROPS, default: 'With Icons', }, parameters: storybookDocsParameter(InputFieldWithIcons), }; export const PaymentsMethod = { render: (_args, { argTypes }) => ({ components: { BentoInputField, CheckmarkCircleFill, PaymentMethodTypes }, props: Object.keys(argTypes), template: ` <bento-input-field class="b-input-field-story" v-bind="args" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > <template #default v-if="args.default">{{ args.default }}</template> <template #paymentMethod> <payment-method-types svg-title="payment-method-types" /> </template> <template #iconAfter> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> <template #staticValue> EUR </template> </bento-input-field> `, setup(props) { const inputAction = (value: string) => action('update:model-value')(value); const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const blurAction = (value: string) => action('blur')(value); return { args: isVue2 ? props : _args, inputAction, changeAction, focusAction, blurAction, }; }, }), args: { ...DEFAULT_INPUT_FIELD_PROPS, default: 'Payment Method Variant', variant: 'payment-method', }, parameters: storybookDocsParameter(InputFieldPaymentMethod), }; export const StaticValue = { ...PaymentsMethod, args: { ...DEFAULT_INPUT_FIELD_PROPS, default: 'Static Value Variant', variant: 'static-value', }, parameters: storybookDocsParameter(InputFieldStaticValue), }; const DROPDOWN_DEFAULT_OPTIONS = [ { label: 'EUR', value: 'EUR' }, { label: 'USD', value: 'USD' }, ]; export const Dropdown: Story = { render: (_args, { argTypes }) => ({ components: { BentoInputField, CheckmarkCircleFill, PaymentMethodTypes }, props: Object.keys(argTypes), template: ` <bento-input-field class="b-input-field-story" v-bind="args" :dropdown.sync="dropdownProps" @update:model-value="inputAction" @change="changeAction" @focus="focusAction" @blur="blurAction" > <template #default v-if="args.default">{{ args.default }}</template> <template #paymentMethod> <payment-method-types svg-title="payment-method-types" /> </template> <template #iconAfter> <checkmark-circle-fill svg-title="checkmark-circle-fill" /> </template> <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-input-field> `, setup(props) { const args = isVue2 ? props : _args; const dropdownProps = ref({ ...args?.dropdown }); const inputAction = (value: string) => action('update:model-value')(value); const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const blurAction = (value: string) => action('blur')(value); const dropdownInputAction = (value: BentoListboxSelectedValue) => { action('dropdown-input')(value); }; watch( () => args.dropdown, () => { Object.assign(dropdownProps.value, args.dropdown); } ); return { args, inputAction, changeAction, focusAction, blurAction, dropdownInputAction, dropdownProps, }; }, }), args: { default: 'Dropdown Variant', description: INPUT_FIELD_DEFAULT_DESCRIPTION, modelValue: INPUT_FIELD_DEFAULT_VALUE, variant: 'dropdown', dropdown: { items: DROPDOWN_DEFAULT_OPTIONS, modelValue: DROPDOWN_DEFAULT_OPTIONS[0].value, readonly: false, 'aria-label': 'Dropdown aria label', dynamicFiltering: false, } satisfies BentoInputDropdownProps, }, }; 

package/dist/assets/components/input-field/input-field.types.ts

@@ -1 +1 @@
-import { type BentoDropdownProps } from '../dropdown/dropdown.types'; import { type FormField } from '../../types/form-field'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoInputFieldVariant { DEFAULT = 'default', PAYMENT_METHOD = 'payment-method', STATIC_VALUE = 'static-value', DROPDOWN = 'dropdown', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoInputFieldElementPosition { START = 'start', END = 'end', } export enum BentoInputFieldStateClass { CONDENSED = 'condensed', DISABLED = 'disabled', READONLY = 'readonly', ERROR = 'error', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoInputFieldType { SEARCH = 'search', TEXT = 'text', NUMBER = 'number', } export type BentoInputFieldValue = string | number; export interface BentoInputDropdownProps { /** * Text that labels the dropdown element */ 'aria-label'?: string; /** * Indicates that dropdown items are loading (shows a loading skeleton) */ componentLoading?: BentoDropdownProps['componentLoading']; /** * Enables dynamic filtering */ dynamicFiltering?: BentoDropdownProps['dynamicFiltering']; /** * Empty state displayed when no search results are found */ emptyState?: BentoDropdownProps['emptyState']; /** * Enables value/label pair handling for selected values */ enableValueLabelPair?: BentoDropdownProps['enableValueLabelPair']; /** * Indicates whether there are more items to load */ hasMoreItems?: BentoDropdownProps['hasMoreItems']; /** * Function that determines which options are disabled from interaction */ isOptionDisabled?: BentoDropdownProps['isOptionDisabled']; /** * List of available items */ items: BentoDropdownProps['items']; /** * The type of lazy load: "automatic" for infinite scrolling, "button" for a show-more button */ lazyLoadType?: BentoDropdownProps['lazyLoadType']; /** * Indicates if new options are lazy loading */ loading?: BentoDropdownProps['loading']; /** * Selected value of the dropdown */ modelValue?: BentoDropdownProps['modelValue']; /** * Sets the dropdown in read-only mode */ readonly?: BentoDropdownProps['readonly']; /** * Dropdown search options including debounce time and placeholder */ search?: BentoDropdownProps['search']; /** * Displays non-selectable, static categories in the dropdown */ staticCategories?: BentoDropdownProps['staticCategories']; /** * Selected value of the dropdown * @deprecated Since v2.0.0. Use `model-value` instead. */ value?: BentoDropdownProps['value']; /** * Enables virtual scrolling for large lists of items */ virtualScroll?: BentoDropdownProps['virtualScroll']; } /** * @deprecated Since v2.0.0. Use `@<emit name>` instead. */ export enum BentoInputFieldEvent { INPUT = 'input', ESCAPE_PRESSED = 'escape-pressed', UPDATE_DROPDOWN = 'update:dropdown', DROPDOWN_INPUT = 'dropdown-input', FOCUS = 'focus', CHANGE = 'change', BLUR = 'blur', KEYDOWN = 'keydown', } export interface BentoInputFieldProps extends FormField { /** * Indicates whether the element is exposed to an accessibility API. */ ariaHidden?: boolean; /** * Text that labels an the input element * * @deprecated Since v2.0.0. Use `aria-label` instead. */ ariaLabel?: string; /** * Reduces height of the input */ condensed?: boolean; /** * Dropdown props for the single-select dropdown menu embedded in the input field. * Only a subset of `BentoDropdownProps` is supported (multi-select is not available). * * @see {@link BentoInputDropdownProps} */ dropdown?: BentoInputDropdownProps; /** * Position of the dropdown before or after input value */ dropdownPosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`; /** * Adds error validation class for outlining input-field. * * @deprecated Since v2.0.0. Use `errorMessage` instead. */ error?: boolean; /** * Text displayed as the value of the input-field */ modelValue?: BentoInputFieldValue; /** * Renders a font numeric style with slashed zeros instead of normal ones. */ slashedZero?: boolean; /** * Static text that displayed before or after input value * Applicable to the Static Value variant */ staticValue?: string; /** * Position of Static Value before or after input value */ staticValuePosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`; /** * A string specifying the type of control to render. * All `input` types are available but only `search`, `text` and `number` are fully supported. * * If `type` is `search`, use `bento-search-bar` instead. */ type?: BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type']; /** * Text displayed as the value of the input-field * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead. */ value?: BentoInputFieldValue; /** * Describes the different variants for the input element */ variant?: BentoInputFieldVariant | `${BentoInputFieldVariant}`; } 
+import { type BentoDropdownProps } from '../dropdown/dropdown.types'; import { type FormField } from '../../types/form-field'; /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoInputFieldVariant { DEFAULT = 'default', PAYMENT_METHOD = 'payment-method', STATIC_VALUE = 'static-value', DROPDOWN = 'dropdown', } /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoInputFieldElementPosition { START = 'start', END = 'end', } export enum BentoInputFieldStateClass { CONDENSED = 'condensed', DISABLED = 'disabled', READONLY = 'readonly', ERROR = 'error', } /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoInputFieldType { SEARCH = 'search', TEXT = 'text', NUMBER = 'number', } export type BentoInputFieldValue = string | number; export interface BentoInputDropdownProps { /** * Text that labels the dropdown element */ 'aria-label'?: string; /** * Indicates that dropdown items are loading (shows a loading skeleton) */ componentLoading?: BentoDropdownProps['componentLoading']; /** * Enables dynamic filtering */ dynamicFiltering?: BentoDropdownProps['dynamicFiltering']; /** * Empty state displayed when no search results are found */ emptyState?: BentoDropdownProps['emptyState']; /** * Enables value/label pair handling for selected values */ enableValueLabelPair?: BentoDropdownProps['enableValueLabelPair']; /** * Indicates whether there are more items to load */ hasMoreItems?: BentoDropdownProps['hasMoreItems']; /** * Function that determines which options are disabled from interaction */ isOptionDisabled?: BentoDropdownProps['isOptionDisabled']; /** * List of available items */ items: BentoDropdownProps['items']; /** * The type of lazy load: "automatic" for infinite scrolling, "button" for a show-more button */ lazyLoadType?: BentoDropdownProps['lazyLoadType']; /** * Indicates if new options are lazy loading */ loading?: BentoDropdownProps['loading']; /** * Selected value of the dropdown */ modelValue?: BentoDropdownProps['modelValue']; /** * Sets the dropdown in read-only mode */ readonly?: BentoDropdownProps['readonly']; /** * Dropdown search options including debounce time and placeholder */ search?: BentoDropdownProps['search']; /** * Displays non-selectable, static categories in the dropdown */ staticCategories?: BentoDropdownProps['staticCategories']; /** * Enables virtual scrolling for large lists of items */ virtualScroll?: BentoDropdownProps['virtualScroll']; } /** * @deprecated Since v3.0.0. Use `@<emit name>` instead. */ export enum BentoInputFieldEvent { INPUT = 'input', ESCAPE_PRESSED = 'escape-pressed', UPDATE_DROPDOWN = 'update:dropdown', DROPDOWN_INPUT = 'dropdown-input', FOCUS = 'focus', CHANGE = 'change', BLUR = 'blur', KEYDOWN = 'keydown', } export interface BentoInputFieldProps extends FormField { /** * Indicates whether the element is exposed to an accessibility API. */ ariaHidden?: boolean; /** * Reduces height of the input */ condensed?: boolean; /** * Dropdown props for the single-select dropdown menu embedded in the input field. * Only a subset of `BentoDropdownProps` is supported (multi-select is not available). * * @see {@link BentoInputDropdownProps} */ dropdown?: BentoInputDropdownProps; /** * Position of the dropdown before or after input value */ dropdownPosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`; /** * Text displayed as the value of the input-field */ modelValue?: BentoInputFieldValue; /** * Renders a font numeric style with slashed zeros instead of normal ones. */ slashedZero?: boolean; /** * Static text that displayed before or after input value * Applicable to the Static Value variant */ staticValue?: string; /** * Position of Static Value before or after input value */ staticValuePosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`; /** * A string specifying the type of control to render. * All `input` types are available but only `search`, `text` and `number` are fully supported. * * If `type` is `search`, use `bento-search-bar` instead. */ type?: BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type']; /** * Describes the different variants for the input element */ variant?: BentoInputFieldVariant | `${BentoInputFieldVariant}`; }