@adyen/bento-mcp 0.10.0 → 0.12.0

package/dist/assets/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue

@@ -1 +1 @@
-<template> <component :is="popperContainerOrPopoverComponent" v-if="isDropdownOpen" class="b-dropdown-options-container" :class="conditionalClasses" v-bind="popperContainerOrPopoverProps" > <div @keydown.stop @keydown.esc="onEscapeKey"> <bento-listbox :id="id" ref="dropdownOptionsListboxRef" :active-descendant-id="activeDescendantId" :aria-label="ariaLabel" class="b-dropdown-options-container__listbox" :class="conditionalListboxClasses" :component-loading="componentLoading" :empty-state="emptyState" :is-option-disabled="isOptionDisabled" :items="items" :selected-value="internalSelectedValue" :multiple="multiple" :static-categories="staticCategories" :no-results-message="noResultsMessage" :searching="searching" :loading="loading" :lazy-load-type="lazyLoadType" :has-more-items="hasMoreItems" :virtual-scroll="virtualScroll" v-on="listeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox> </div> </component> </template> <script setup lang="ts"> import { computed, defineComponent, type PropType, ref, toRefs, useSlots } from 'vue'; import { BentoListbox } from '@/internal/listbox'; import { type BentoListboxEvent, type BentoListboxIsOptionDisabled, type BentoListboxOptions, } from '@/types/listbox'; import { PopperContainer } from '@/components/popper-container'; import { type BentoDropdownEmptyStateProps, type BentoDropdownEvent, BentoDropdownLazyLoadType, type BentoDropdownVirtulisationOptions, } from '../../dropdown.types'; import { useI18n } from '@/utils/ts/i18n'; import { BentoPopover } from '@/components/popover'; import { useDropdownOptionsListbox } from './composables/use-dropdown-options-listbox'; import { generateUid } from '@/core/utils/ts'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const slots = useSlots(); const emit = defineEmits<{ /** * Emitted when the dropdown is closing. */ (e: BentoDropdownEvent.CLOSE_DROPDOWN); /** * Emitted when the `ENTER` key is pressed */ (e: BentoListboxEvent.ENTER, newSelectedValue: BentoListboxOptions); /** * Emitted when the `ESCAPE` key is pressed */ (e: BentoListboxEvent.ESCAPE); /** * Emitted when an item is selected */ (e: BentoListboxEvent.SELECT, newSelectedValue: BentoListboxOptions); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: BentoDropdownEvent.SHOW_MORE); /** * Emitted when the `SPACE` key is pressed */ (e: BentoListboxEvent.SPACE, newSelectedValue: BentoListboxOptions); /** * Emitted when the `TAB` key is pressed */ (e: BentoListboxEvent.TAB, newSelectedValue: BentoListboxOptions); }>(); const props = defineProps({ /** * Defines a string value that labels an interactive element. */ ariaLabel: { type: String, default: null }, /** * Identifies the currently active option in the listbox. */ activeDescendantId: { type: String, default: null }, /** * Indicates that dropdown items are loading */ componentLoading: { type: Boolean, default: false }, /** * Empty state props used with the inner empty state component which is displayed when no search results are found. */ emptyState: { type: Object as PropType<BentoDropdownEmptyStateProps>, default: undefined, }, /** * Disables dropdown functionality */ disabled: { type: Boolean, default: false }, /** * Indicates whether there are more items to load */ hasMoreItems: { type: Boolean, default: false }, /** * Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set. */ id: { type: String, required: true }, /** * Function that allows the options to be disabled * * @type {BentoDropdownIsOptionDisabled} * @param {BentoDropdownOptionItem} option - Dropdown option object * @param {string} option.label - Option's label text * @param {string|number} option.value - Option's value * @param {unknown} option.data - Option's extra data to be passed to the default slot */ isOptionDisabled: { type: Function as PropType<BentoListboxIsOptionDisabled>, default: undefined, }, /** * The option elements to populate the dropdown with. * It must be an array of {@see BentoDropdownOptionItem } * * @property {string} value.label - Text to be displayed in the option * * @property {string,number} value.value - Value of the option */ items: { type: Array as PropType<BentoListboxOptions>, required: true, }, /** * The type of `Lazy Load`. * Type "automatic" will enable infinite scrolling * Type "button" will enable lazy loading with "Show more" button */ lazyLoadType: { type: String as PropType<BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`>, default: BentoDropdownLazyLoadType.AUTOMATIC, validator: (value: BentoDropdownLazyLoadType) => Object.values(BentoDropdownLazyLoadType).includes(value), }, /** * Indicates if new options are lazy loading. */ loading: { type: Boolean, default: false }, /** * If enabled, the user will be able to select multiple items. */ multiple: { type: Boolean, default: false }, /** * Indicates if the dropdown is open so that * the container can be displayed. */ open: { type: Boolean, required: true }, /** * The `input` value. * Providing an empty string or empty array will select no options. * Set to an empty string `''` if you don't want any of the available options to be selected for single select */ selectedValue: { type: Array as PropType<BentoListboxOptions>, default: null, }, /** * Flag that indicates that an external search it's being made * to filter out the items inside the the multi-select listbox * * If enabled, hides the "Select all" checkbox in "multiple" mode. */ searching: BentoListbox.props.searching, /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories: { type: Boolean, default: false }, /** * Reference to the DOM element or Vue component for positioning * the Dropdown container. */ targetElement: { type: PopperContainer.props.targetElement.type, required: true }, /** * Enables virtual scrolling if set to true or by providing an object with itemHeight function. * The itemHeight function is used to calculate the height of rendered item given it's index. */ virtualScroll: { type: [Boolean, Object] as PropType<BentoDropdownVirtulisationOptions>, default: false, }, }); const { selectedValue, multiple } = toRefs(props); const dropdownOptionsListboxRef = ref(null); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isDropdownOpen = computed(() => props.open && !props.disabled); const noResultsMessage = computed(() => t('noOptionsMatchThisSearch') as string); const conditionalClasses = computed(() => ({ 'b-dropdown-options-container--single': !props?.multiple, })); const conditionalListboxClasses = computed(() => ({ 'b-dropdown-options-container__listbox--single': !props?.multiple, })); const { actions, internalSelectedValue, listeners, onEscapeKey, onOutsideDropdownClick } = useDropdownOptionsListbox(selectedValue, multiple, isDropdownOpen, emit); // Use different components depending on if the dropdown is a single or multi-select const popperContainerOrPopoverComponent = computed(() => (props?.multiple ? BentoPopover : PopperContainer)); const popperContainerOrPopoverProps = computed(() => { const containerMinAndMaxWidth = { 'min-width': `${(props?.targetElement as HTMLElement)?.clientWidth}px`, 'max-width': 'min(500px, 95%)', }; return props?.multiple ? ({ actionsLayout: 'space-between', ariaLabel: props.ariaLabel, actions: actions.value, divider: true, fallbackPosition: ['top-start'], id: generateUid(`dropdown-options-${props.id}`), open: props.open, position: 'bottom-start', style: { width: 'auto', ...containerMinAndMaxWidth, }, targetElement: props.targetElement, } as InstanceType<typeof BentoPopover>['$props']) : ({ fallbackPosition: ['top-start'], offset: [0, 8], position: 'bottom-start', style: { display: isDropdownOpen.value ? 'block' : 'none', ...containerMinAndMaxWidth, }, targetElement: props.targetElement, } as InstanceType<typeof PopperContainer>['$props']); }); defineExpose({ onOutsideDropdownClick, dropdownOptionsListboxRef, }); </script> <script lang="ts"> /** * Dropdown options container. * It lists all the available options. * * @example * <bento-dropdown-options-container * v-if="inputContainerRef" <!-- Ref to the input to match the width --> * :id="dropdownOptionsContainerId" * :target-element="inputContainerRef" * :aria-label="ariaLabel" * :open="isDropdownOpen" * :disabled="disabled" * :multiple="multiple" * :selected="value" * :isOptionDisabled="option => option.value === 2" * :items="[{ * { label: 'Option 1', value: 1 }, * { label: 'Option 2', value: 2 }, * }]" * @select="onOptionSelected" * /> */ export default defineComponent({ i18n: { messages }, name: 'bento-dropdown-options-container', }); </script> <style lang="scss" scoped src="./dropdown-options-container.scss" /> 
+<template> <component :is="popperContainerOrPopoverComponent" v-if="isDropdownOpen" class="b-dropdown-options-container" :class="conditionalClasses" v-bind="popperContainerOrPopoverProps" > <div @keydown.stop @keydown.esc="onEscapeKey"> <bento-listbox :id="id" ref="dropdownOptionsListboxRef" :active-descendant-id="activeDescendantId" :aria-label="ariaLabel" class="b-dropdown-options-container__listbox" :class="conditionalListboxClasses" :component-loading="componentLoading" :empty-state="emptyState" :is-option-disabled="isOptionDisabled" :items="items" :selected-value="internalSelectedValue" :multiple="multiple" :static-categories="staticCategories" :no-results-message="noResultsMessage" :searching="searching" :loading="loading" :lazy-load-type="lazyLoadType" :has-more-items="hasMoreItems" :virtual-scroll="virtualScroll" v-on="listeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox> </div> </component> </template> <script setup lang="ts"> import { computed, defineComponent, type PropType, ref, toRefs, useSlots } from 'vue'; import { BentoListbox } from '@/internal/listbox'; import { type BentoListboxEvent, type BentoListboxIsOptionDisabled, type BentoListboxOptions, } from '@/types/listbox'; import { PopperContainer } from '@/components/popper-container'; import { type BentoDropdownEmptyStateProps, type BentoDropdownEvent, BentoDropdownLazyLoadType, type BentoDropdownVirtulisationOptions, } from '../../dropdown.types'; import { useI18n } from '@/utils/ts/i18n'; import { BentoPopover } from '@/components/popover'; import { useDropdownOptionsListbox } from './composables/use-dropdown-options-listbox'; import { generateUid } from '@/utils/ts/generate-uid'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const slots = useSlots(); const emit = defineEmits<{ /** * Emitted when the dropdown is closing. */ (e: BentoDropdownEvent.CLOSE_DROPDOWN); /** * Emitted when the `ENTER` key is pressed */ (e: BentoListboxEvent.ENTER, newSelectedValue: BentoListboxOptions); /** * Emitted when the `ESCAPE` key is pressed */ (e: BentoListboxEvent.ESCAPE); /** * Emitted when an item is selected */ (e: BentoListboxEvent.SELECT, newSelectedValue: BentoListboxOptions); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: BentoDropdownEvent.SHOW_MORE); /** * Emitted when the `SPACE` key is pressed */ (e: BentoListboxEvent.SPACE, newSelectedValue: BentoListboxOptions); /** * Emitted when the `TAB` key is pressed */ (e: BentoListboxEvent.TAB, newSelectedValue: BentoListboxOptions); }>(); const props = defineProps({ /** * Defines a string value that labels an interactive element. */ ariaLabel: { type: String, default: null }, /** * Identifies the currently active option in the listbox. */ activeDescendantId: { type: String, default: null }, /** * Indicates that dropdown items are loading */ componentLoading: { type: Boolean, default: false }, /** * Empty state props used with the inner empty state component which is displayed when no search results are found. */ emptyState: { type: Object as PropType<BentoDropdownEmptyStateProps>, default: undefined, }, /** * Disables dropdown functionality */ disabled: { type: Boolean, default: false }, /** * Indicates whether there are more items to load */ hasMoreItems: { type: Boolean, default: false }, /** * Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set. */ id: { type: String, required: true }, /** * Function that allows the options to be disabled * * @type {BentoDropdownIsOptionDisabled} * @param {BentoDropdownOptionItem} option - Dropdown option object * @param {string} option.label - Option's label text * @param {string|number} option.value - Option's value * @param {unknown} option.data - Option's extra data to be passed to the default slot */ isOptionDisabled: { type: Function as PropType<BentoListboxIsOptionDisabled>, default: undefined, }, /** * The option elements to populate the dropdown with. * It must be an array of {@see BentoDropdownOptionItem } * * @property {string} value.label - Text to be displayed in the option * * @property {string,number} value.value - Value of the option */ items: { type: Array as PropType<BentoListboxOptions>, required: true, }, /** * The type of `Lazy Load`. * Type "automatic" will enable infinite scrolling * Type "button" will enable lazy loading with "Show more" button */ lazyLoadType: { type: String as PropType<BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`>, default: BentoDropdownLazyLoadType.AUTOMATIC, validator: (value: BentoDropdownLazyLoadType) => Object.values(BentoDropdownLazyLoadType).includes(value), }, /** * Indicates if new options are lazy loading. */ loading: { type: Boolean, default: false }, /** * If enabled, the user will be able to select multiple items. */ multiple: { type: Boolean, default: false }, /** * Indicates if the dropdown is open so that * the container can be displayed. */ open: { type: Boolean, required: true }, /** * The `input` value. * Providing an empty string or empty array will select no options. * Set to an empty string `''` if you don't want any of the available options to be selected for single select */ selectedValue: { type: Array as PropType<BentoListboxOptions>, default: null, }, /** * Flag that indicates that an external search it's being made * to filter out the items inside the the multi-select listbox * * If enabled, hides the "Select all" checkbox in "multiple" mode. */ searching: BentoListbox.props.searching, /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories: { type: Boolean, default: false }, /** * Reference to the DOM element or Vue component for positioning * the Dropdown container. */ targetElement: { type: PopperContainer.props.targetElement.type, required: true }, /** * Enables virtual scrolling if set to true or by providing an object with itemHeight function. * The itemHeight function is used to calculate the height of rendered item given it's index. */ virtualScroll: { type: [Boolean, Object] as PropType<BentoDropdownVirtulisationOptions>, default: false, }, }); const { selectedValue, multiple } = toRefs(props); const dropdownOptionsListboxRef = ref(null); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isDropdownOpen = computed(() => props.open && !props.disabled); const noResultsMessage = computed(() => t('noOptionsMatchThisSearch') as string); const conditionalClasses = computed(() => ({ 'b-dropdown-options-container--single': !props?.multiple, })); const conditionalListboxClasses = computed(() => ({ 'b-dropdown-options-container__listbox--single': !props?.multiple, })); const { actions, internalSelectedValue, listeners, onEscapeKey, onOutsideDropdownClick } = useDropdownOptionsListbox(selectedValue, multiple, isDropdownOpen, emit); // Use different components depending on if the dropdown is a single or multi-select const popperContainerOrPopoverComponent = computed(() => (props?.multiple ? BentoPopover : PopperContainer)); const popperContainerOrPopoverProps = computed(() => { const containerMinAndMaxWidth = { 'min-width': `${(props?.targetElement as HTMLElement)?.clientWidth}px`, 'max-width': 'min(500px, 95%)', }; return props?.multiple ? ({ actionsLayout: 'space-between', ariaLabel: props.ariaLabel, actions: actions.value, divider: true, fallbackPosition: ['top-start'], id: generateUid(`dropdown-options-${props.id}`), open: props.open, position: 'bottom-start', style: { width: 'auto', ...containerMinAndMaxWidth, }, targetElement: props.targetElement, } as InstanceType<typeof BentoPopover>['$props']) : ({ fallbackPosition: ['top-start'], offset: [0, 8], position: 'bottom-start', style: { display: isDropdownOpen.value ? 'block' : 'none', ...containerMinAndMaxWidth, }, targetElement: props.targetElement, } as InstanceType<typeof PopperContainer>['$props']); }); defineExpose({ onOutsideDropdownClick, dropdownOptionsListboxRef, }); </script> <script lang="ts"> /** * Dropdown options container. * It lists all the available options. * * @example * <bento-dropdown-options-container * v-if="inputContainerRef" <!-- Ref to the input to match the width --> * :id="dropdownOptionsContainerId" * :target-element="inputContainerRef" * :aria-label="ariaLabel" * :open="isDropdownOpen" * :disabled="disabled" * :multiple="multiple" * :selected="value" * :isOptionDisabled="option => option.value === 2" * :items="[{ * { label: 'Option 1', value: 1 }, * { label: 'Option 2', value: 2 }, * }]" * @select="onOptionSelected" * /> */ export default defineComponent({ i18n: { messages }, name: 'bento-dropdown-options-container', }); </script> <style lang="scss" scoped src="./dropdown-options-container.scss" /> 

package/dist/assets/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue

@@ -1 +1 @@
-<template> <div class="b-dropdown-small-textbox" :class="conditionalClasses"> <dropdown-base-textbox ref="baseTextbox" v-bind="{ ...$attrs, ...$props }" class="b-dropdown-small-textbox__textbox" :size="BentoDropdownSize.SMALL" v-on="listeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope ?? {}" /> </template> <template #icon> <div class="b-dropdown-small-textbox__chevron"> <chevron-up-small-icon v-show="isDropdownOpen" svg-title="opened" /> <chevron-down-small-icon v-show="!isDropdownOpen" svg-title="closed" /> </div> </template> </dropdown-base-textbox> </div> </template> <script setup lang="ts"> import { computed, defineComponent, inject, type PropType, ref, useSlots } from 'vue'; import { DropdownBaseTextboxEvent, DropdownBaseTextboxState, } from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types'; import { BentoDropdownSize } from '@/components/dropdown/dropdown.types'; import { type Booleanish } from '@/types/prop-types'; import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue'; import ChevronDownSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-down-small'; import ChevronUpSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-up-small'; import { stopEventPropagation } from '@/utils/ts/events'; import { DROPDOWN_UNDERLINE_STYLE_INJECTION_KEY } from '../../dropdown.keys'; const emit = defineEmits<{ /** * Emitted on clearing the input. */ (e: 'clear'); /** * Emitted on click, space and enter user events. It will open the dropdown. */ (e: 'close'); /** * Emitted on input event. */ (e: 'input', newInput: string); /** * Emitted on keydown event. */ (e: 'keydown', keydownEvent: KeyboardEvent); /** * Emitted on click, space, enter and esc user events. It will close the dropdown. */ (e: 'open'); }>(); const slots = useSlots(); const props = defineProps({ /** * The number of additional items that have been selected in the dropdown. */ additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 }, /** * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers. */ ariaControls: { type: String, required: true }, /** * Identifies the currently active option in the listbox. */ ariaActiveDescendant: { type: String, default: null }, /** * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden. */ ariaExpanded: { type: [String, Boolean] as PropType<Booleanish>, required: true, }, /** * If no label element is used then the aria-label is be set should be set. */ ariaLabel: { type: String, default: null }, /** * Corresponds to the label's id that labels the textbox element. */ ariaLabelledby: { type: String, default: null }, /** * Disables any textbox functionality */ disabled: { type: Boolean, default: false }, /** * Selected option's label */ displayValue: { type: String, default: null }, /** * Sets the possibility to type into the textbox */ dynamicFiltering: { type: Boolean, default: false }, /** * Marks the textbox as invalid, rendering an error state */ isInvalid: { type: Boolean, default: false }, /** * Indicates if the dropdown is open so that * the respective event can be emitted */ open: { type: Boolean, default: false }, /** * Sets the dropdown to readonly state */ readonly: { type: Boolean, default: false }, /** * The input value */ value: { type: String, default: '' }, }); const baseTextbox = ref(null); // Inject underline style key to change the dropdown layout const isUnderlineStyle = inject(DROPDOWN_UNDERLINE_STYLE_INJECTION_KEY, false); const conditionalClasses = computed(() => ({ [`b-dropdown-small-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled, [`b-dropdown-small-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly, [`b-dropdown-small-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open, 'b-dropdown-small-textbox--underline': isUnderlineStyle, })); const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly); const onInput = (newInput: string) => { emit('input', newInput); }; const onKeyDown = (e: KeyboardEvent) => { emit('keydown', e); }; const openDropdown = (e: Event) => { stopEventPropagation(e); emit('open'); }; const closeDropdown = (e: Event) => { stopEventPropagation(e); emit('close'); }; const clearValue = (e: Event) => { stopEventPropagation(e); emit('clear'); }; const listeners = { [DropdownBaseTextboxEvent.INPUT]: onInput, [DropdownBaseTextboxEvent.OPEN]: openDropdown, [DropdownBaseTextboxEvent.CLOSE]: closeDropdown, [DropdownBaseTextboxEvent.CLEAR]: clearValue, [DropdownBaseTextboxEvent.KEYDOWN]: onKeyDown, }; const focus = () => { baseTextbox.value.focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * For internal use only, textbox component in its small variant used in the dropdown component. */ export default defineComponent({ name: 'dropdown-small-textbox', inheritAttrs: false, }); </script> <style lang="scss" scoped src="./dropdown-small-textbox.scss" /> 
+<template> <div class="b-dropdown-small-textbox" :class="conditionalClasses"> <dropdown-base-textbox ref="baseTextbox" v-bind="{ ...$attrs, ...$props }" class="b-dropdown-small-textbox__textbox" :size="BentoDropdownSize.SMALL" v-on="listeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope ?? {}" /> </template> <template #icon> <div class="b-dropdown-small-textbox__chevron"> <chevron-up-small-icon v-show="isDropdownOpen" svg-title="opened" /> <chevron-down-small-icon v-show="!isDropdownOpen" svg-title="closed" /> </div> </template> </dropdown-base-textbox> </div> </template> <script setup lang="ts"> import { computed, defineComponent, inject, type PropType, ref, useSlots } from 'vue'; import { DropdownBaseTextboxEvent } from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.internal.types'; import { DropdownBaseTextboxState } from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types'; import { BentoDropdownSize } from '@/components/dropdown/dropdown.internal.types'; import { type Booleanish } from '@/types/prop-types'; import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue'; import ChevronDownSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-down-small'; import ChevronUpSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-up-small'; import { stopEventPropagation } from '@/utils/ts/events'; import { DROPDOWN_UNDERLINE_STYLE_INJECTION_KEY } from '../../dropdown.keys'; const emit = defineEmits<{ /** * Emitted on clearing the input. */ (e: 'clear'); /** * Emitted on click, space and enter user events. It will open the dropdown. */ (e: 'close'); /** * Emitted on input event. */ (e: 'input', newInput: string); /** * Emitted on keydown event. */ (e: 'keydown', keydownEvent: KeyboardEvent); /** * Emitted on click, space, enter and esc user events. It will close the dropdown. */ (e: 'open'); }>(); const slots = useSlots(); const props = defineProps({ /** * The number of additional items that have been selected in the dropdown. */ additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 }, /** * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers. */ ariaControls: { type: String, required: true }, /** * Identifies the currently active option in the listbox. */ ariaActiveDescendant: { type: String, default: null }, /** * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden. */ ariaExpanded: { type: [String, Boolean] as PropType<Booleanish>, required: true, }, /** * If no label element is used then the aria-label is be set should be set. */ ariaLabel: { type: String, default: null }, /** * Corresponds to the label's id that labels the textbox element. */ ariaLabelledby: { type: String, default: null }, /** * Disables any textbox functionality */ disabled: { type: Boolean, default: false }, /** * Selected option's label */ displayValue: { type: String, default: null }, /** * Sets the possibility to type into the textbox */ dynamicFiltering: { type: Boolean, default: false }, /** * Marks the textbox as invalid, rendering an error state */ isInvalid: { type: Boolean, default: false }, /** * Indicates if the dropdown is open so that * the respective event can be emitted */ open: { type: Boolean, default: false }, /** * Sets the dropdown to readonly state */ readonly: { type: Boolean, default: false }, /** * The input value */ value: { type: String, default: '' }, }); const baseTextbox = ref(null); // Inject underline style key to change the dropdown layout const isUnderlineStyle = inject(DROPDOWN_UNDERLINE_STYLE_INJECTION_KEY, false); const conditionalClasses = computed(() => ({ [`b-dropdown-small-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled, [`b-dropdown-small-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly, [`b-dropdown-small-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open, 'b-dropdown-small-textbox--underline': isUnderlineStyle, })); const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly); const onInput = (newInput: string) => { emit('input', newInput); }; const onKeyDown = (e: KeyboardEvent) => { emit('keydown', e); }; const openDropdown = (e: Event) => { stopEventPropagation(e); emit('open'); }; const closeDropdown = (e: Event) => { stopEventPropagation(e); emit('close'); }; const clearValue = (e: Event) => { stopEventPropagation(e); emit('clear'); }; const listeners = { [DropdownBaseTextboxEvent.INPUT]: onInput, [DropdownBaseTextboxEvent.OPEN]: openDropdown, [DropdownBaseTextboxEvent.CLOSE]: closeDropdown, [DropdownBaseTextboxEvent.CLEAR]: clearValue, [DropdownBaseTextboxEvent.KEYDOWN]: onKeyDown, }; const focus = () => { baseTextbox.value.focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * For internal use only, textbox component in its small variant used in the dropdown component. */ export default defineComponent({ name: 'dropdown-small-textbox', inheritAttrs: false, }); </script> <style lang="scss" scoped src="./dropdown-small-textbox.scss" /> 

package/dist/assets/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { type BentoListboxOptionItem, type BentoListboxSelectedValue } from '@/types/listbox'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type BentoAvatarListboxOptions } from './dropdown-avatar.types'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoDropdownAvatar from './dropdown-avatar.vue'; export default { title: 'Dropdown/variants/Avatar', component: BentoDropdownAvatar, argTypes: { input: { description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', table: { category: 'Deprecated' }, control: { disable: true }, }, 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', }, }, } as Meta; type Story = StoryObj<typeof BentoDropdownAvatar>; const AVATAR_OPTIONS: BentoAvatarListboxOptions = [ { label: 'User 1', value: 'user-id-1' }, { label: 'User 2', value: 'user-id-2' }, ]; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownAvatar }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { action('input')(selectedOption); }; const isOptionDisabled = (option: BentoListboxOptionItem) => option.value === 3; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, isOptionDisabled, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-avatar v-model="selectedValue" v-bind="args" :items="args.items" :isOptionDisabled="isOptionDisabled" label="User" description="Choose a user" @input="clickedAction" /> </div> `, }), args: { items: AVATAR_OPTIONS, multiple: false, modelValue: AVATAR_OPTIONS[0].value, }, parameters: storybookDocsParameter(` <bento-dropdown-avatar v-model="selectedValue" :items="[ { label: 'User 1', value: 'user-id-1' }, { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' }, ]" label="User" description="Choose a user" /> `), }; 
+import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { type BentoListboxOptionItem, type BentoListboxSelectedValue } from '@/types/listbox'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type BentoAvatarListboxOptions } from './dropdown-avatar.types'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoDropdownAvatar from './dropdown-avatar.vue'; const DropdownAvatarDefault = "<template>\n <bento-dropdown-avatar v-model=\"selectedValue\" description=\"Choose a user\" :items=\"items\" label=\"User\" />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n type BentoAvatarListboxOptions,\n BentoDropdownAvatar,\n type BentoListboxSelectedValue,\n } from '@adyen/bento-vue2';\n\n const items: BentoAvatarListboxOptions = [\n { label: 'User 1', value: 'user-id-1' },\n { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n ];\n const selectedValue = ref<BentoListboxSelectedValue>('user-id-1');\n</script>\n"; export default { title: 'Dropdown/variants/Avatar', component: BentoDropdownAvatar, } as Meta; type Story = StoryObj<typeof BentoDropdownAvatar>; const AVATAR_OPTIONS: BentoAvatarListboxOptions = [ { label: 'User 1', value: 'user-id-1' }, { label: 'User 2', value: 'user-id-2' }, ]; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownAvatar }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { action('update:model-value')(selectedOption); }; const isOptionDisabled = (option: BentoListboxOptionItem) => option.value === 3; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, isOptionDisabled, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-avatar v-model="selectedValue" v-bind="args" :items="args.items" :isOptionDisabled="isOptionDisabled" label="User" description="Choose a user" @update:model-value="clickedAction" /> </div> `, }), args: { items: AVATAR_OPTIONS, multiple: false, modelValue: AVATAR_OPTIONS[0].value, }, parameters: storybookDocsParameter(DropdownAvatarDefault), }; 

package/dist/assets/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.types.ts

@@ -1 +1 @@
-import { type BentoListboxOptionItem } from '@/types/listbox'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoAvatarListboxOptionItem = Omit<BentoListboxOptionItem, 'data'> & { src?: string; }; export type BentoAvatarListboxOptions = Array<BentoAvatarListboxOptionItem>; export interface BentoDropdownAvatarProps extends BentoDropdownProps { /** * The option elements to populate the avatar dropdown with. * It must be an array of {@see BentoAvatarListboxOptions } * @property {string} value.label - Text to be displayed in the option. * @property {string | number} value.value - Value of the option. * @property {string} value.src - Image source of the avatar image. */ items?: BentoAvatarListboxOptions; } 
+import { type BentoListboxOptionItem } from '@/types/listbox'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoAvatarListboxOptionItem = Omit<BentoListboxOptionItem, 'data'> & { src?: string; }; export type BentoAvatarListboxOptions = Array<BentoAvatarListboxOptionItem>; export interface BentoDropdownAvatarProps extends BentoDropdownProps { /** * @deprecated Since v3.0.0. Use `aria-label` instead. * Defines a string value that labels an interactive element. */ ariaLabel?: string; /** * The option elements to populate the avatar dropdown with. * It must be an array of {@see BentoAvatarListboxOptions } * @property {string} value.label - Text to be displayed in the option. * @property {string | number} value.value - Value of the option. * @property {string} value.src - Image source of the avatar image. */ items?: BentoAvatarListboxOptions; } 

package/dist/assets/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue

@@ -1 +1 @@
-<template> <div> <bento-dropdown v-slot="{ label, data }" v-bind="$props" :items="dropdownItems" @update:model-value="onUpdateModelValue" @show-more="emit('show-more')" @open="emit('open')" > <bento-avatar :username="label" :src="data" /> </bento-dropdown> </div> </template> <script setup lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { type BentoAvatarListboxOptions } from './dropdown-avatar.types'; import { BentoAvatar } from '@/components/avatar'; import BentoDropdown from '@/components/dropdown/dropdown.vue'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { deprecate } from '@/utils/ts/deprecate'; const props = defineProps({ ...BentoDropdown.props, /** * The option elements to populate the avatar dropdown with. * It must be an array of {@see BentoAvatarListboxOptions } * @property {string} value.label - Text to be displayed in the option. * @property {string | number} value.value - Value of the option. * @property {string} value.src - Image source of the avatar image. */ items: { type: Array as PropType<BentoAvatarListboxOptions>, default: () => [], }, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "value" property linked to the v-model. * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead. */ (e: 'input', selectedValue: BentoListboxSelectedValue); /** * Emitted when an option is clicked. Updates the selected option from the "modelValue" property linked to the v-model. */ (e: 'update:model-value', selectedValue: BentoListboxSelectedValue); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: 'show-more'); /** * Emitted when the dropdown is opened. */ (e: 'open'); }>(); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue); const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src }))); if (props.value) { deprecate( 'BentoDropdownAvatar "value" property', `The use of "value" prop in "BentoDropdownAvatar" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } </script> <script lang="ts"> /** * A Avatar Dropdown showing a selectable list of countries. * * @example * import { BentoDropdownAvatar } from '@adyen/bento-vue2'; * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdownAvatar }, * template: ` * <bento-dropdown-avatar * v-model="selectedValue" * :disabled="false" * :multiple="true" * :isOptionsDisabled="option => option.value === 2" * :items="options" * /> * `, * setup() { * const selectedValue = ref('user-id-1') // Default value * const options: BentoAvatarListboxOptions = [ * { label: 'User 1', value: 'user-id-1' }, * { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ name: 'bento-dropdown-avatar', model: { prop: 'modelValue' }, }); </script> 
+<template> <div v-bind="getNonAriaLabelAttributes($attrs)"> <bento-dropdown v-slot="{ label, data }" v-bind="{ ...$props, ariaLabel: undefined }" :aria-label="getAriaLabel($attrs)" :items="dropdownItems" @update:model-value="onUpdateModelValue" @show-more="emit('show-more')" @open="emit('open')" > <bento-avatar :username="label" :src="data" /> </bento-dropdown> </div> </template> <script setup lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import { isVue2 } from 'vue-demi'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { type BentoAvatarListboxOptions } from './dropdown-avatar.types'; import { BentoAvatar } from '@/components/avatar'; import BentoDropdown from '@/components/dropdown/dropdown.vue'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = defineProps({ ...BentoDropdown.props, /** * @deprecated Since v3.0.0. Use `aria-label` instead. * Defines a string value that labels an interactive element. */ ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}), /** * The option elements to populate the avatar dropdown with. * It must be an array of {@see BentoAvatarListboxOptions } * @property {string} value.label - Text to be displayed in the option. * @property {string | number} value.value - Value of the option. * @property {string} value.src - Image source of the avatar image. */ items: { type: Array as PropType<BentoAvatarListboxOptions>, default: () => [], }, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "modelValue" property linked to the v-model. */ (e: 'update:model-value', selectedValue: BentoListboxSelectedValue); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: 'show-more'); /** * Emitted when the dropdown is opened. */ (e: 'open'); }>(); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const getAriaLabel = (attributes: Record<string, unknown>) => Object.prototype.hasOwnProperty.call(attributes, 'aria-label') ? attributes['aria-label'] : (attributes.ariaLabel ?? props.ariaLabel); const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) => Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel')); const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue); const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src }))); </script> <script lang="ts"> /** * A Avatar Dropdown showing a selectable list of countries. * * @example * import { BentoDropdownAvatar } from '@adyen/bento-vue2'; * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdownAvatar }, * template: ` * <bento-dropdown-avatar * v-model="selectedValue" * :disabled="false" * :multiple="true" * :isOptionsDisabled="option => option.value === 2" * :items="options" * /> * `, * setup() { * const selectedValue = ref('user-id-1') // Default value * const options: BentoAvatarListboxOptions = [ * { label: 'User 1', value: 'user-id-1' }, * { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ name: 'bento-dropdown-avatar', inheritAttrs: false, model: { prop: 'modelValue', event: 'update:model-value' }, }); </script> 

package/dist/assets/components/dropdown/components/variants/dropdown-country/dropdown-country.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { type BentoListboxOptionItem, type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoCountryCode, BentoCountryVariant } from '@/components/country'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoDropdownCountry from './dropdown-country.vue'; export default { title: 'Dropdown/variants/Country', component: BentoDropdownCountry, argTypes: { // Props condensed: { defaultValue: 'false', description: 'If enabled, the user will be able to select multiple items.', table: { category: 'props', defaultValue: { summary: 'false' }, }, control: { type: 'boolean', }, }, multiple: { defaultValue: 'false', description: 'If enabled, the user will be able to select multiple items.', table: { category: 'props', defaultValue: { summary: 'false' }, }, control: { type: 'boolean', }, }, readonly: { defaultValue: 'false', description: 'If enabled, dropdown will display as readonly', table: { category: 'props', defaultValue: { summary: 'false' }, }, control: { type: 'boolean', }, }, variant: { options: Object.values(BentoCountryVariant), mapping: BentoCountryVariant, control: { type: 'select', labels: { custom: 'DEPRECATED: custom', }, }, }, input: { description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', table: { category: 'Deprecated' }, control: { disable: true }, }, 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', }, }, } as Meta; type Story = StoryObj<typeof BentoDropdownCountry>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownCountry }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { action('input')(selectedOption); }; const isOptionDisabled = (option: BentoListboxOptionItem) => option.value === 3; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, isOptionDisabled, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-country v-model="selectedValue" v-bind="args" :items="args.items" :isOptionDisabled="isOptionDisabled" label="Country/Region" description="Choose a country/region" @input="clickedAction" /> </div> `, }), args: { items: [ { value: BentoCountryCode.NL, }, { value: BentoCountryCode.BE, }, ], variant: 'name', multiple: false, modelValue: BentoCountryCode.NL, }, parameters: storybookDocsParameter(` <bento-dropdown-country v-model="selectedValue" :items="[ { label: 'Option 1', value: BentoCountryCode.NL, }, { label: 'Option 2', value: BentoCountryCode.BE, }, ]" variant="name" label="Country/Region" description="Choose a country/region" /> `), }; 
+import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { type BentoListboxOptionItem, type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoCountryCode, BentoCountryVariant } from '@/components/country'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoDropdownCountry from './dropdown-country.vue'; const DropdownCountryDefault = "<template>\n <bento-dropdown-country\n v-model=\"selectedValue\"\n description=\"Choose a country/region\"\n :items=\"items\"\n label=\"Country/Region\"\n variant=\"name\"\n />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n type BentoCountryListboxOptions,\n BentoDropdownCountry,\n type BentoListboxSelectedValue,\n } from '@adyen/bento-vue2';\n\n const items: BentoCountryListboxOptions = [{ value: 'NL' }, { value: 'BE' }];\n const selectedValue = ref<BentoListboxSelectedValue>('NL');\n</script>\n"; export default { title: 'Dropdown/variants/Country', component: BentoDropdownCountry, argTypes: { // Props condensed: { defaultValue: 'false', description: 'If enabled, the user will be able to select multiple items.', table: { category: 'props', defaultValue: { summary: 'false' }, }, control: { type: 'boolean', }, }, multiple: { defaultValue: 'false', description: 'If enabled, the user will be able to select multiple items.', table: { category: 'props', defaultValue: { summary: 'false' }, }, control: { type: 'boolean', }, }, readonly: { defaultValue: 'false', description: 'If enabled, dropdown will display as readonly', table: { category: 'props', defaultValue: { summary: 'false' }, }, control: { type: 'boolean', }, }, variant: { options: Object.values(BentoCountryVariant), mapping: BentoCountryVariant, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoDropdownCountry>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownCountry }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { action('update:model-value')(selectedOption); }; const isOptionDisabled = (option: BentoListboxOptionItem) => option.value === 3; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, isOptionDisabled, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-country v-model="selectedValue" v-bind="args" :items="args.items" :isOptionDisabled="isOptionDisabled" label="Country/Region" description="Choose a country/region" @update:model-value="clickedAction" /> </div> `, }), args: { items: [ { value: BentoCountryCode.NL, }, { value: BentoCountryCode.BE, }, ], variant: 'name', multiple: false, modelValue: BentoCountryCode.NL, }, parameters: storybookDocsParameter(DropdownCountryDefault), }; 

package/dist/assets/components/dropdown/components/variants/dropdown-country/dropdown-country.types.ts

@@ -1 +1 @@
-import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoCountryCode } from '@/components/country/country.types'; export type BentoCountryListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'value' | 'label'> & { value: BentoCountryCode | `${BentoCountryCode}`; /** deprecated Use BentoDropdown component for custom labels */ label?: string; }; export type BentoCountryListboxOptions = Array<BentoCountryListboxOptionItem>; 
+import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoCountryCode } from '@/components/country/country.types'; export type BentoCountryListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'value' | 'label'> & { value: BentoCountryCode | `${BentoCountryCode}`; }; export type BentoCountryListboxOptions = Array<BentoCountryListboxOptionItem>; 

package/dist/assets/components/dropdown/components/variants/dropdown-country/dropdown-country.vue

@@ -1 +1 @@
-<template> <div> <bento-dropdown v-slot="{ label }" v-bind="$props" :items="countryItems" @update:model-value="onUpdateModelValue" @show-more="emit('show-more')" @open="emit('open')" > <bento-typography el="span">{{ label }}</bento-typography> </bento-dropdown> </div> </template> <script setup lang="ts"> import { defineComponent, type PropType, toRefs } from 'vue'; import { type BentoCountryListboxOptions } from './dropdown-country.types'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoTypography } from '@/components/typography'; import { useCountryItems } from './composables/use-country-items'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { deprecate } from '@/utils/ts/deprecate'; import { BentoCountryVariant } from '@/components/country'; import BentoDropdown from '@/components/dropdown/dropdown.vue'; const props = defineProps({ ...BentoDropdown.props, /** * The option elements to populate the country dropdown with. * It must be an array of {@see BentoCountryListboxOptions } * @deprecated Since v2.0.0. Use `BentoDropdown` instead. * @property {BentoCountryCode | string} value.value - Country code of the option */ items: { type: Array as PropType<BentoCountryListboxOptions>, default: () => [], }, /** * Which label variant to display. * @values iso, name, phone_code, capital */ variant: { type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>, default: BentoCountryVariant.CUSTOM, validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value), }, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "value" property linked to the v-model. * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead. */ (e: 'input', selectedValue: BentoListboxSelectedValue); /** * Emitted when an option is clicked. Updates the selected option from the "modelValue" property linked to the v-model. */ (e: 'update:model-value', selectedValue: BentoListboxSelectedValue); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: 'show-more'); /** * Emitted when the dropdown is opened. */ (e: 'open'); }>(); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue); const { variant, items } = toRefs(props); const countryItems = useCountryItems(variant, items); if (variant.value === 'custom' || items.value.some(item => item.label)) { deprecate( 'BentoDropdownCountry "custom" variant and "items" prop "label" key', 'Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels', '2.0.0' ); } if (props.value) { deprecate( 'BentoDropdownCountry "value" property', `The use of "value" prop in "BentoDropdownCountry" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } </script> <script lang="ts"> /** * A Country Dropdown showing a selectable list of countries. * * @example * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2'; * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdown }, * template: ` * <bento-dropdown-country * v-model="selectedValue" * :disabled="false" * :multiple="true" * :isOptionsDisabled="option => option.value === 2" * :items="options" * /> * `, * setup() { * const selectedValue = ref(BentoCountryCode.NL) // Default value * const options: BentoCountryListboxOptions = [ * { label: 'Option 1', value: BentoCountryCode.NL }, * { label: 'Option 2', value: BentoCountryCode.BE }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ name: 'b-dropdown-country', model: { prop: 'modelValue' }, }); </script> 
+<template> <div v-bind="getNonAriaLabelAttributes($attrs)"> <bento-dropdown v-slot="{ label }" v-bind="{ ...$props, ariaLabel: undefined }" :aria-label="getAriaLabel($attrs)" :items="countryItems" @update:model-value="onUpdateModelValue" @show-more="emit('show-more')" @open="emit('open')" > <bento-typography el="span">{{ label }}</bento-typography> </bento-dropdown> </div> </template> <script setup lang="ts"> import { defineComponent, type PropType, toRefs } from 'vue'; import { isVue2 } from 'vue-demi'; import { type BentoCountryListboxOptions } from './dropdown-country.types'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoTypography } from '@/components/typography'; import { useCountryItems } from './composables/use-country-items'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { BentoCountryVariant } from '@/components/country'; import BentoDropdown from '@/components/dropdown/dropdown.vue'; const props = defineProps({ ...BentoDropdown.props, /** * @deprecated Since v3.0.0. Use `aria-label` instead. * Defines a string value that labels an interactive element. */ ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}), /** * The option elements to populate the country dropdown with. * It must be an array of {@see BentoCountryListboxOptions } * @deprecated Since v3.0.0. Use `BentoDropdown` instead. * @property {BentoCountryCode | string} value.value - Country code of the option */ items: { type: Array as PropType<BentoCountryListboxOptions>, default: () => [], }, /** * Which label variant to display. * @values iso, name, phone_code, capital */ variant: { type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>, default: BentoCountryVariant.NAME, validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value), }, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "modelValue" property linked to the v-model. */ (e: 'update:model-value', selectedValue: BentoListboxSelectedValue); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: 'show-more'); /** * Emitted when the dropdown is opened. */ (e: 'open'); }>(); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const getAriaLabel = (attributes: Record<string, unknown>) => Object.prototype.hasOwnProperty.call(attributes, 'aria-label') ? attributes['aria-label'] : (attributes.ariaLabel ?? props.ariaLabel); const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) => Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel')); const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue); const { variant, items } = toRefs(props); const countryItems = useCountryItems(variant, items); </script> <script lang="ts"> /** * A Country Dropdown showing a selectable list of countries. * * @example * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2'; * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdown }, * template: ` * <bento-dropdown-country * v-model="selectedValue" * :disabled="false" * :multiple="true" * :isOptionsDisabled="option => option.value === 2" * :items="options" * /> * `, * setup() { * const selectedValue = ref(BentoCountryCode.NL) // Default value * const options: BentoCountryListboxOptions = [ * { value: BentoCountryCode.NL }, * { value: BentoCountryCode.BE }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ name: 'b-dropdown-country', inheritAttrs: false, model: { prop: 'modelValue', event: 'update:model-value' }, }); </script> 

package/dist/assets/components/dropdown/components/variants/dropdown-currency/dropdown-currency.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoCurrencyISOCode } from '@/components/currency'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoDropdownCurrency from './dropdown-currency.vue'; export default { title: 'Dropdown/variants/Currency', component: BentoDropdownCurrency, argTypes: { input: { description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', table: { category: 'Deprecated' }, control: { disable: true }, }, 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', }, }, } as Meta; type Story = StoryObj<typeof BentoDropdownCurrency>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownCurrency }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { action('input')(selectedOption); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-currency v-model="selectedValue" v-bind="args" :items="args.items" label="Currency" description="Choose a currency" @input="clickedAction" /> </div> `, }), args: { items: [ { label: 'Australian Dollars', value: BentoCurrencyISOCode.AUD, }, { label: 'Euro', value: BentoCurrencyISOCode.EUR, }, { label: 'US Dollars', value: BentoCurrencyISOCode.USD, }, { label: 'Japanese Yen', value: BentoCurrencyISOCode.JPY, }, ], multiple: false, dynamicFiltering: false, modelValue: BentoCurrencyISOCode.EUR, }, parameters: storybookDocsParameter(` <bento-dropdown-currency v-model="selectedValue" :items=" { label: 'Australian Dollars', value: BentoCurrencyISOCode.AUD, }, { label: 'Euro', value: BentoCurrencyISOCode.EUR, }, { label: 'US Dollars', value: BentoCurrencyISOCode.USD, }, { label: 'Japanese Yen', value: BentoCurrencyISOCode.JPY, }, ]" label="Currency" description="Choose a currency" /> `), }; 
+import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoCurrencyISOCode } from '@/components/currency'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoDropdownCurrency from './dropdown-currency.vue'; const DropdownCurrencyDefault = "<template>\n <bento-dropdown-currency v-model=\"selectedValue\" description=\"Choose a currency\" :items=\"items\" label=\"Currency\" />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n type BentoCurrencyListboxOptions,\n BentoDropdownCurrency,\n type BentoListboxSelectedValue,\n } from '@adyen/bento-vue2';\n\n const items: BentoCurrencyListboxOptions = [\n { label: 'Australian Dollars', value: 'AUD' },\n { label: 'Euro', value: 'EUR' },\n { label: 'US Dollars', value: 'USD' },\n { label: 'Japanese Yen', value: 'JPY' },\n ];\n const selectedValue = ref<BentoListboxSelectedValue>('EUR');\n</script>\n"; export default { title: 'Dropdown/variants/Currency', component: BentoDropdownCurrency, } as Meta; type Story = StoryObj<typeof BentoDropdownCurrency>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownCurrency }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { action('update:model-value')(selectedOption); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-currency v-model="selectedValue" v-bind="args" :items="args.items" label="Currency" description="Choose a currency" @update:model-value="clickedAction" /> </div> `, }), args: { items: [ { label: 'Australian Dollars', value: BentoCurrencyISOCode.AUD, }, { label: 'Euro', value: BentoCurrencyISOCode.EUR, }, { label: 'US Dollars', value: BentoCurrencyISOCode.USD, }, { label: 'Japanese Yen', value: BentoCurrencyISOCode.JPY, }, ], multiple: false, dynamicFiltering: false, modelValue: BentoCurrencyISOCode.EUR, }, parameters: storybookDocsParameter(DropdownCurrencyDefault), }; 

package/dist/assets/components/dropdown/components/variants/dropdown-currency/dropdown-currency.types.ts

@@ -1 +1 @@
-import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoCurrencyISOCode } from '@/components/currency'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoCurrencyListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'value'> & { value: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`; }; export type BentoCurrencyListboxOptions = Array<BentoCurrencyListboxOptionItem>; export interface BentoDropdownCurrencyProps extends BentoDropdownProps { /** * The option elements to populate the currency dropdown with. * It must be an array of {@see BentoCurrencyListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option */ items?: BentoCurrencyListboxOptions; } 
+import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoCurrencyISOCode } from '@/components/currency'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoCurrencyListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'value'> & { value: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`; }; export type BentoCurrencyListboxOptions = Array<BentoCurrencyListboxOptionItem>; export interface BentoDropdownCurrencyProps extends BentoDropdownProps { /** * @deprecated Since v3.0.0. Use `aria-label` instead. * Defines a string value that labels an interactive element. */ ariaLabel?: string; /** * The option elements to populate the currency dropdown with. * It must be an array of {@see BentoCurrencyListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option */ items?: BentoCurrencyListboxOptions; } 

package/dist/assets/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue

@@ -1 +1 @@
-<template> <bento-dropdown v-slot="slotProps" v-bind="$props" :search="search" :items="filteredItems" @update:model-value="onUpdateModelValue" @show-more="emit('show-more')" @open="emit('open')" > <listbox-option-tag :option="slotProps" /> </bento-dropdown> </template> <script setup lang="ts"> import { defineComponent, type PropType, ref, watch } from 'vue'; import type { BentoCurrencyListboxOptions } from './dropdown-currency.types'; import type { BentoListboxSelectedValue } from '@/types/listbox'; import { ListboxOptionTag } from '@/internal/listbox/'; import BentoDropdown from '@/components/dropdown/dropdown.vue'; import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { deprecate } from '@/utils/ts/deprecate'; const props = defineProps({ ...BentoDropdown.props, /** * The option elements to populate the currency dropdown with. * It must be an array of {@see BentoCurrencyListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option */ items: { type: Array as PropType<BentoCurrencyListboxOptions>, default: () => [], }, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "value" property linked to the v-model. * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead. */ (e: 'input', selectedValue: BentoListboxSelectedValue); /** * Emitted when an option is clicked. Updates the selected option from the "modelValue" property linked to the v-model. */ (e: 'update:model-value', selectedValue: BentoListboxSelectedValue); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: 'show-more'); /** * Emitted when the dropdown is opened. */ (e: 'open'); }>(); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue); const filteredItems = ref<BentoCurrencyListboxOptions>([]); watch( () => props.items, () => (filteredItems.value = props.items), { immediate: true } ); const search = props.search ? props.search : { debounceTime: 500, searchEvent: async (searchTerm: string) => { // Combine value and label to be able to search by the currency code const searchableItems = props.items.map(item => ({ ...item, label: `${item.value} ${item.label}`, })); const searchResults = useSearchBarFilter( ref(searchTerm), ref<BentoCurrencyListboxOptions>(searchableItems), props?.search?.searchEvent, ref(false) ).value; // Restore original labels by removing the prepended value const normalizedResults = searchResults?.map(result => ({ ...result, label: result.label.substring(result.value.length + 1), })); filteredItems.value = normalizedResults; }, }; if (props.value) { deprecate( 'BentoDropdownCurrency "value" property', `The use of "value" prop in "BentoDropdownCurrency" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } </script> <script lang="ts"> /** * A Currency Dropdown showing a selectable list of currencies. * * @example * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2'; * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdown }, * template: ` * <bento-dropdown-currency * v-model="selectedValue" * :disabled="false" * :multiple="true" * :isOptionsDisabled="option => option.value === 2" * :items="options" * /> * `, * setup() { * const selectedValue = ref(BentoCountryCode.NL) // Default value * const options: BentoCountryListboxOptions = [ * { label: 'Option 1', value: BentoCountryCode.NL }, * { label: 'Option 2', value: BentoCountryCode.BE }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ name: 'b-dropdown-currency', model: { prop: 'modelValue' }, }); </script> 
+<template> <bento-dropdown v-slot="slotProps" v-bind="{ ...getNonAriaLabelAttributes($attrs), ...$props, ariaLabel: undefined }" :aria-label="getAriaLabel($attrs)" :search="search" :items="filteredItems" @update:model-value="onUpdateModelValue" @show-more="emit('show-more')" @open="emit('open')" > <listbox-option-tag :option="slotProps" /> </bento-dropdown> </template> <script setup lang="ts"> import { defineComponent, type PropType, ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import type { BentoCurrencyListboxOptions } from './dropdown-currency.types'; import type { BentoListboxSelectedValue } from '@/types/listbox'; import { ListboxOptionTag } from '@/internal/listbox/'; import BentoDropdown from '@/components/dropdown/dropdown.vue'; import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = defineProps({ ...BentoDropdown.props, /** * @deprecated Since v3.0.0. Use `aria-label` instead. * Defines a string value that labels an interactive element. */ ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}), /** * The option elements to populate the currency dropdown with. * It must be an array of {@see BentoCurrencyListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option */ items: { type: Array as PropType<BentoCurrencyListboxOptions>, default: () => [], }, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "modelValue" property linked to the v-model. */ (e: 'update:model-value', selectedValue: BentoListboxSelectedValue); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: 'show-more'); /** * Emitted when the dropdown is opened. */ (e: 'open'); }>(); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const getAriaLabel = (attributes: Record<string, unknown>) => Object.prototype.hasOwnProperty.call(attributes, 'aria-label') ? attributes['aria-label'] : (attributes.ariaLabel ?? props.ariaLabel); const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) => Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel')); const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue); const filteredItems = ref<BentoCurrencyListboxOptions>([]); watch( () => props.items, () => (filteredItems.value = props.items), { immediate: true } ); const search = props.search ? props.search : { debounceTime: 500, searchEvent: async (searchTerm: string) => { // Combine value and label to be able to search by the currency code const searchableItems = props.items.map(item => ({ ...item, label: `${item.value} ${item.label}`, })); const searchResults = useSearchBarFilter( ref(searchTerm), ref<BentoCurrencyListboxOptions>(searchableItems), props?.search?.searchEvent, ref(false) ).value; // Restore original labels by removing the prepended value const normalizedResults = searchResults?.map(result => ({ ...result, label: result.label.substring(result.value.length + 1), })); filteredItems.value = normalizedResults; }, }; </script> <script lang="ts"> /** * A Currency Dropdown showing a selectable list of currencies. * * @example * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2'; * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdown }, * template: ` * <bento-dropdown-currency * v-model="selectedValue" * :disabled="false" * :multiple="true" * :isOptionsDisabled="option => option.value === 2" * :items="options" * /> * `, * setup() { * const selectedValue = ref(BentoCountryCode.NL) // Default value * const options: BentoCountryListboxOptions = [ * { label: 'Option 1', value: BentoCountryCode.NL }, * { label: 'Option 2', value: BentoCountryCode.BE }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ name: 'b-dropdown-currency', inheritAttrs: false, model: { prop: 'modelValue', event: 'update:model-value' }, }); </script> 

package/dist/assets/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import BentoDropdownPaymentMethod from './dropdown-payment-method.vue'; import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types'; import { type Meta, type StoryObj } from '@storybook/vue'; import DropdownPaymentMethodDefaultExample from './__tests__/dropdown-payment-method-default-example.vue?raw'; import DropdownPaymentMethodWithDescriptionExample from './__tests__/dropdown-payment-method-with-description-example.vue?raw'; export default { title: 'Dropdown/variants/Payment Method', component: BentoDropdownPaymentMethod, argTypes: { input: { description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', table: { category: 'Deprecated' }, control: { disable: true }, }, 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', }, }, } as Meta; type Story = StoryObj<typeof BentoDropdownPaymentMethod>; const ITEMS: BentoPaymentMethodListboxOptions = [ { label: 'iDEAL', value: 'ideal', description: 'Dutch online payment system', }, { label: 'Visa', value: 'visa', description: 'Global network for transactions', }, { label: 'Maestro', value: 'maestro', description: 'Global payment network', }, { label: 'Apple Pay', value: 'applepay', description: 'Digital wallet and payment service', }, ]; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownPaymentMethod }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { selectedValue.value = selectedOption; action('input')(selectedOption); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-payment-method :value="selectedValue" v-bind="args" :items="args.items" label="Payment Method" description="Choose a payment method" @input="clickedAction" /> </div> `, }), args: { items: ITEMS.map(({ description, ...item }) => ({ ...item })), // Remove descriptions multiple: false, }, parameters: storybookDocsParameter(DropdownPaymentMethodDefaultExample), }; export const WithDescription: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownPaymentMethod }, props: Object.keys(argTypes), setup(props) { const selectedValue = ref<BentoListboxSelectedValue>(''); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { selectedValue.value = selectedOption; action('input')(selectedOption); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-payment-method :value="selectedValue" v-bind="args" :items="args.items" label="Payment Method" description="Choose a payment method" @input="clickedAction" /> </div> `, }), args: { items: ITEMS, multiple: false, }, parameters: storybookDocsParameter(DropdownPaymentMethodWithDescriptionExample), }; 
+import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import BentoDropdownPaymentMethod from './dropdown-payment-method.vue'; import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types'; import { type Meta, type StoryObj } from '@storybook/vue'; const DropdownPaymentMethodDefaultExample = "<template>\n <bento-dropdown-payment-method\n v-model=\"selectedValue\"\n :items=\"items\"\n label=\"Payment Method\"\n description=\"Choose a payment method\"\n />\n</template>\n\n<script setup lang=\"ts\">\n import {\n BentoDropdownPaymentMethod,\n type BentoListboxSelectedValue,\n type BentoPaymentMethodListboxOptions,\n } from '@adyen/bento-vue2';\n import { ref } from 'vue';\n\n const selectedValue = ref<BentoListboxSelectedValue>();\n\n const items: BentoPaymentMethodListboxOptions = [\n { label: 'iDEAL', value: 'ideal' },\n { label: 'Visa', value: 'visa' },\n { label: 'Maestro', value: 'maestro' },\n { label: 'Apple Pay', value: 'applepay' },\n ];\n</script>\n"; const DropdownPaymentMethodWithDescriptionExample = "<template>\n <bento-dropdown-payment-method\n v-model=\"selectedValue\"\n :items=\"items\"\n label=\"Payment Method\"\n description=\"Choose a payment method\"\n />\n</template>\n\n<script setup lang=\"ts\">\n import {\n BentoDropdownPaymentMethod,\n type BentoListboxSelectedValue,\n type BentoPaymentMethodListboxOptions,\n } from '@adyen/bento-vue2';\n import { ref } from 'vue';\n\n const selectedValue = ref<BentoListboxSelectedValue>();\n const items: BentoPaymentMethodListboxOptions = [\n {\n label: 'iDEAL',\n value: 'ideal',\n description: 'Dutch online payment system',\n },\n {\n label: 'Visa',\n value: 'visa',\n description: 'Global network for transactions',\n },\n {\n label: 'Maestro',\n value: 'maestro',\n description: 'Global payment network',\n },\n {\n label: 'Apple Pay',\n value: 'applepay',\n description: 'Digital wallet and payment service',\n },\n ];\n</script>\n"; export default { title: 'Dropdown/variants/Payment Method', component: BentoDropdownPaymentMethod, } as Meta; type Story = StoryObj<typeof BentoDropdownPaymentMethod>; const ITEMS: BentoPaymentMethodListboxOptions = [ { label: 'iDEAL', value: 'ideal', description: 'Dutch online payment system', }, { label: 'Visa', value: 'visa', description: 'Global network for transactions', }, { label: 'Maestro', value: 'maestro', description: 'Global payment network', }, { label: 'Apple Pay', value: 'applepay', description: 'Digital wallet and payment service', }, ]; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownPaymentMethod }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { selectedValue.value = selectedOption; action('update:model-value')(selectedOption); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-payment-method :model-value="selectedValue" v-bind="args" :items="args.items" label="Payment Method" description="Choose a payment method" @update:model-value="clickedAction" /> </div> `, }), args: { items: ITEMS.map(({ description, ...item }) => ({ ...item })), // Remove descriptions multiple: false, }, parameters: storybookDocsParameter(DropdownPaymentMethodDefaultExample), }; export const WithDescription: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownPaymentMethod }, props: Object.keys(argTypes), setup(props) { const selectedValue = ref<BentoListboxSelectedValue>(''); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { selectedValue.value = selectedOption; action('update:model-value')(selectedOption); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-payment-method :model-value="selectedValue" v-bind="args" :items="args.items" label="Payment Method" description="Choose a payment method" @update:model-value="clickedAction" /> </div> `, }), args: { items: ITEMS, multiple: false, }, parameters: storybookDocsParameter(DropdownPaymentMethodWithDescriptionExample), }; 

package/dist/assets/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.types.ts

@@ -1 +1 @@
-import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoPaymentMethodListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'value'> & { value: string; }; export type BentoPaymentMethodListboxOptions = Array<BentoPaymentMethodListboxOptionItem>; export interface BentoDropdownPaymentMethodProps extends BentoDropdownProps { /** * The option elements to populate the payment method dropdown with. * It must be an array of {@see BentoPaymentMethodListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons} */ items?: BentoPaymentMethodListboxOptions; } 
+import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoPaymentMethodListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'value'> & { value: string; }; export type BentoPaymentMethodListboxOptions = Array<BentoPaymentMethodListboxOptionItem>; export interface BentoDropdownPaymentMethodProps extends BentoDropdownProps { /** * @deprecated Since v3.0.0. Use `aria-label` instead. * Defines a string value that labels an interactive element. */ ariaLabel?: string; /** * The option elements to populate the payment method dropdown with. * It must be an array of {@see BentoPaymentMethodListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons} */ items?: BentoPaymentMethodListboxOptions; } 

package/dist/assets/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue

@@ -1 +1 @@
-<template> <div> <bento-dropdown class="b-dropdown-payment-method" v-bind="$props" @update:model-value="onUpdateModelValue" @show-more="emit('show-more')" @open="emit('open')" > <template #display-value="{ label, value }"> <bento-payment-method :type="value" :label="label" /> </template> <template #default="{ value, label, description }"> <div class="b-dropdown-payment-method__item"> <bento-payment-method :type="value" :label="description ? undefined : label" /> <div v-if="description" class="b-dropdown-payment-method__text"> <bento-typography el="span">{{ label }}</bento-typography> <bento-typography el="span" class="b-dropdown-payment-method__description">{{ description }}</bento-typography> </div> </div> </template> </bento-dropdown> </div> </template> <script setup lang="ts"> import { defineComponent, type PropType } from 'vue'; import { BentoPaymentMethod } from '@/components/payment-method'; import { BentoTypography } from '@/components/typography'; import BentoDropdown from '@/components/dropdown/dropdown.vue'; import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { deprecate } from '@/utils/ts/deprecate'; const props = defineProps({ ...BentoDropdown.props, /** * The option elements to populate the payment method dropdown with. * It must be an array of {@see BentoPaymentMethodListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons} */ items: { type: Array as PropType<BentoPaymentMethodListboxOptions>, default: () => [], }, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "value" property linked to the v-model. * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead. */ (e: 'input', selectedValue: BentoListboxSelectedValue); /** * Emitted when an option is clicked. Updates the selected option from the "modelValue" property linked to the v-model. */ (e: 'update:model-value', selectedValue: BentoListboxSelectedValue); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: 'show-more'); /** * Emitted when the dropdown is opened. */ (e: 'open'); }>(); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue); if (props.value) { deprecate( 'BentoDropdownPaymentMethod "value" property', `The use of "value" prop in "BentoDropdownPaymentMethod" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } </script> <script lang="ts"> /** * A Payment method Dropdown showing a selectable list of countries. * * @example * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2'; * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdownPaymentMethod }, * template: ` * <bento-dropdown-payment-method * v-model="selectedValue" * :disabled="false" * :multiple="true" * :isOptionsDisabled="option => option.value === 'Visa'" * :items="options" * /> * `, * setup() { * const selectedValue = ref('ideal') // Default value * const options: BentoPaymentMethodListboxOptions = [ * { label: 'Option 1', value: 'ideal' }, * { label: 'Option 2', value: 'visa' }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ name: 'bento-dropdown-payment-method', model: { prop: 'modelValue' }, }); </script> <style lang="scss" scoped src="./dropdown-payment-method.scss" /> 
+<template> <div v-bind="getNonAriaLabelAttributes($attrs)"> <bento-dropdown class="b-dropdown-payment-method" v-bind="{ ...$props, ariaLabel: undefined }" :aria-label="getAriaLabel($attrs)" @update:model-value="onUpdateModelValue" @show-more="emit('show-more')" @open="emit('open')" > <template #display-value="{ label, value }"> <bento-payment-method :type="value" :label="label" /> </template> <template #default="{ value, label, description }"> <div class="b-dropdown-payment-method__item"> <bento-payment-method :type="value" :label="description ? undefined : label" /> <div v-if="description" class="b-dropdown-payment-method__text"> <bento-typography el="span">{{ label }}</bento-typography> <bento-typography el="span" class="b-dropdown-payment-method__description">{{ description }}</bento-typography> </div> </div> </template> </bento-dropdown> </div> </template> <script setup lang="ts"> import { defineComponent, type PropType } from 'vue'; import { isVue2 } from 'vue-demi'; import { BentoPaymentMethod } from '@/components/payment-method'; import { BentoTypography } from '@/components/typography'; import BentoDropdown from '@/components/dropdown/dropdown.vue'; import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = defineProps({ ...BentoDropdown.props, /** * @deprecated Since v3.0.0. Use `aria-label` instead. * Defines a string value that labels an interactive element. */ ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}), /** * The option elements to populate the payment method dropdown with. * It must be an array of {@see BentoPaymentMethodListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons} */ items: { type: Array as PropType<BentoPaymentMethodListboxOptions>, default: () => [], }, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "modelValue" property linked to the v-model. */ (e: 'update:model-value', selectedValue: BentoListboxSelectedValue); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: 'show-more'); /** * Emitted when the dropdown is opened. */ (e: 'open'); }>(); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const getAriaLabel = (attributes: Record<string, unknown>) => Object.prototype.hasOwnProperty.call(attributes, 'aria-label') ? attributes['aria-label'] : (attributes.ariaLabel ?? props.ariaLabel); const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) => Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel')); const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue); </script> <script lang="ts"> /** * A Payment method Dropdown showing a selectable list of countries. * * @example * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2'; * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdownPaymentMethod }, * template: ` * <bento-dropdown-payment-method * v-model="selectedValue" * :disabled="false" * :multiple="true" * :isOptionsDisabled="option => option.value === 'Visa'" * :items="options" * /> * `, * setup() { * const selectedValue = ref('ideal') // Default value * const options: BentoPaymentMethodListboxOptions = [ * { label: 'Option 1', value: 'ideal' }, * { label: 'Option 2', value: 'visa' }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ name: 'bento-dropdown-payment-method', inheritAttrs: false, model: { prop: 'modelValue', event: 'update:model-value' }, }); </script> <style lang="scss" scoped src="./dropdown-payment-method.scss" /> 

package/dist/assets/components/dropdown/components/variants/dropdown-tag/dropdown-tag.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoDropdownTag from './dropdown-tag.vue'; export default { title: 'Dropdown/variants/Tag', component: BentoDropdownTag, argTypes: { input: { description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', table: { category: 'Deprecated' }, control: { disable: true }, }, 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', }, }, } as Meta; type Story = StoryObj<typeof BentoDropdownTag>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownTag }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { action('input')(selectedOption); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-tag v-model="selectedValue" v-bind="args" :items="args.items" placeholder="Select a Tag" label="Tag" description="Choose a tag" @input="clickedAction" /> </div> `, }), }; Default.args = { items: [ { label: 'Offline', value: 'unique-id-1', variant: 'red' }, { label: 'Online', value: 'unique-id-2', variant: 'green' }, { label: 'Standby', value: 'unique-id-3', variant: 'orange' }, { label: 'Busy with things', value: 'unique-id-4', variant: 'blue' }, { label: 'Extras', value: 'unique-id-5', variant: 'grey' }, ], multiple: false, modelValue: 'unique-id-1', }; Default.parameters = storybookDocsParameter(` <bento-dropdown-tag v-model="selectedValue" :items="[ { label: 'Offline', value: 'unique-id-1', variant: 'red' }, { label: 'Online', value: 'unique-id-2', variant: 'green' }, { label: 'Standby', value: 'unique-id-3', variant: 'orange' }, { label: 'Busy with things', value: 'unique-id-4', variant: 'blue' }, { label: 'Extras', value: 'unique-id-5', variant: 'grey' }, ]" label="Tag" description="Choose a Tag" /> `); 
+import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoDropdownTag from './dropdown-tag.vue'; const DropdownTagDefault = "<template>\n <bento-dropdown-tag v-model=\"selectedValue\" description=\"Choose a tag\" :items=\"items\" label=\"Tag\" />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoDropdownTag, type BentoListboxSelectedValue, type BentoTagListboxOptions } from '@adyen/bento-vue2';\n\n const items: BentoTagListboxOptions = [\n { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n { label: 'Online', value: 'unique-id-2', variant: 'green' },\n { label: 'Standby', value: 'unique-id-3', variant: 'orange' },\n { label: 'Busy with things', value: 'unique-id-4', variant: 'blue' },\n { label: 'Extras', value: 'unique-id-5', variant: 'grey' },\n ];\n const selectedValue = ref<BentoListboxSelectedValue>('unique-id-1');\n</script>\n"; export default { title: 'Dropdown/variants/Tag', component: BentoDropdownTag, } as Meta; type Story = StoryObj<typeof BentoDropdownTag>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdownTag }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const clickedAction = (selectedOption: BentoListboxSelectedValue) => { action('update:model-value')(selectedOption); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods clickedAction, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown-tag v-model="selectedValue" v-bind="args" :items="args.items" placeholder="Select a Tag" label="Tag" description="Choose a tag" @update:model-value="clickedAction" /> </div> `, }), }; Default.args = { items: [ { label: 'Offline', value: 'unique-id-1', variant: 'red' }, { label: 'Online', value: 'unique-id-2', variant: 'green' }, { label: 'Standby', value: 'unique-id-3', variant: 'orange' }, { label: 'Busy with things', value: 'unique-id-4', variant: 'blue' }, { label: 'Extras', value: 'unique-id-5', variant: 'grey' }, ], multiple: false, modelValue: 'unique-id-1', }; Default.parameters = storybookDocsParameter(DropdownTagDefault); 

package/dist/assets/components/dropdown/components/variants/dropdown-tag/dropdown-tag.types.ts

@@ -1 +1 @@
-import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoTagVariant } from '../../../../tag'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoTagListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'data'> & { variant: BentoTagVariant | `${BentoTagVariant}`; }; export type BentoTagListboxOptions = Array<BentoTagListboxOptionItem>; export interface BentoDropdownTagProps extends BentoDropdownProps { /** * The option elements to populate the tag dropdown with. * It must be an array of {@see BentoTagListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {string | number} value.value - Value of the option * @property {string} value.variant - The BentTag variant shown for the option. */ items?: BentoTagListboxOptions; } 
+import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoTagVariant } from '../../../../tag'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoTagListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'data'> & { variant: BentoTagVariant | `${BentoTagVariant}`; }; export type BentoTagListboxOptions = Array<BentoTagListboxOptionItem>; export interface BentoDropdownTagProps extends BentoDropdownProps { /** * @deprecated Since v3.0.0. Use `aria-label` instead. * Defines a string value that labels an interactive element. */ ariaLabel?: string; /** * The option elements to populate the tag dropdown with. * It must be an array of {@see BentoTagListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {string | number} value.value - Value of the option * @property {string} value.variant - The BentTag variant shown for the option. */ items?: BentoTagListboxOptions; } 

package/dist/assets/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue

@@ -1 +1 @@
-<template> <bento-dropdown v-slot="{ label, data }" v-bind="$props" class="b-dropdown-tag" :items="tagItems" show-slot-content-in-multiple @update:model-value="onUpdateModelValue" @show-more="emit('show-more')" @open="emit('open')" > <listbox-option-tag :option="{ value: label, data, label: '' }" /> </bento-dropdown> </template> <script setup lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import type { BentoTagListboxOptions } from './dropdown-tag.types'; import type { BentoListboxSelectedValue } from '@/types/listbox'; import { ListboxOptionTag } from '../../../../internal'; import BentoDropdown from '../../../dropdown.vue'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { deprecate } from '@/utils/ts/deprecate'; const props = defineProps({ ...BentoDropdown.props, /** * The option elements to populate the tag dropdown with. * It must be an array of {@see BentoTagListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {string | number} value.value - Value of the option * @property {string} value.variant - The BentTag variant shown for the option. */ items: { type: Array as PropType<BentoTagListboxOptions>, default: () => [], }, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "value" property linked to the v-model. * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead. */ (e: 'input', selectedValue: BentoListboxSelectedValue); /** * Emitted when an option is clicked. Updates the selected option from the "modelValue" property linked to the v-model. */ (e: 'update:model-value', selectedValue: BentoListboxSelectedValue); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: 'show-more'); /** * Emitted when the dropdown is opened. */ (e: 'open'); }>(); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue); const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant }))); if (props.value) { deprecate( 'BentoDropdownTag "value" property', `The use of "value" prop in "BentoDropdownTag" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } </script> <script lang="ts"> /** * A Tag Dropdown showing a selectable list of tags. * * @example * import { BentoDropdownTag } from '@adyen/bento-vue2'; * import type { BentoTagListboxOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdownTag }, * template: ` * <bento-dropdown-tag * v-model="selectedValue" * :disabled="false" * :items="options" * /> * `, * setup() { * const selectedValue = ref('unique-id-1') // Default value * const options: BentoTagListboxOptions = [ * { label: 'Offline', value: 'unique-id-1', variant: 'red' }, * { label: 'Online', value: 'unique-id-2', variant: 'green' }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ name: 'bento-dropdown-tag', model: { prop: 'modelValue' }, }); </script> <style lang="scss" scoped src="./dropdown-tag.scss" /> 
+<template> <bento-dropdown v-slot="{ label, data }" v-bind="{ ...getNonAriaLabelAttributes($attrs), ...$props, ariaLabel: undefined }" class="b-dropdown-tag" :aria-label="getAriaLabel($attrs)" :items="tagItems" show-slot-content-in-multiple @update:model-value="onUpdateModelValue" @show-more="emit('show-more')" @open="emit('open')" > <listbox-option-tag :option="{ value: label, data, label: '' }" /> </bento-dropdown> </template> <script setup lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import { isVue2 } from 'vue-demi'; import type { BentoTagListboxOptions } from './dropdown-tag.types'; import type { BentoListboxSelectedValue } from '@/types/listbox'; import { ListboxOptionTag } from '../../../../internal'; import BentoDropdown from '../../../dropdown.vue'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = defineProps({ ...BentoDropdown.props, /** * @deprecated Since v3.0.0. Use `aria-label` instead. * Defines a string value that labels an interactive element. */ ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}), /** * The option elements to populate the tag dropdown with. * It must be an array of {@see BentoTagListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {string | number} value.value - Value of the option * @property {string} value.variant - The BentTag variant shown for the option. */ items: { type: Array as PropType<BentoTagListboxOptions>, default: () => [], }, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "modelValue" property linked to the v-model. */ (e: 'update:model-value', selectedValue: BentoListboxSelectedValue); /** * Emitted when: * - `lazyLoad` is `automatic` and the scroll meets the end of the list * - `lazyload` is `button` and the button is clicked */ (e: 'show-more'); /** * Emitted when the dropdown is opened. */ (e: 'open'); }>(); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const getAriaLabel = (attributes: Record<string, unknown>) => Object.prototype.hasOwnProperty.call(attributes, 'aria-label') ? attributes['aria-label'] : (attributes.ariaLabel ?? props.ariaLabel); const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) => Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel')); const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue); const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant }))); </script> <script lang="ts"> /** * A Tag Dropdown showing a selectable list of tags. * * @example * import { BentoDropdownTag } from '@adyen/bento-vue2'; * import type { BentoTagListboxOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdownTag }, * template: ` * <bento-dropdown-tag * v-model="selectedValue" * :disabled="false" * :items="options" * /> * `, * setup() { * const selectedValue = ref('unique-id-1') // Default value * const options: BentoTagListboxOptions = [ * { label: 'Offline', value: 'unique-id-1', variant: 'red' }, * { label: 'Online', value: 'unique-id-2', variant: 'green' }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ name: 'bento-dropdown-tag', inheritAttrs: false, model: { prop: 'modelValue', event: 'update:model-value' }, }); </script> <style lang="scss" scoped src="./dropdown-tag.scss" /> 

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

@@ -17,37 +17,6 @@ list of options.
     <Story of={DropdownStories.Default} />
 </Canvas>
 
-## Table of contents
-
-- [Use Cases](#use-cases)
-- [Variants](#variants)
-    - [Avatar](#avatar)
-    - [Country](#country)
-    - [Currency](#currency)
-    - [Payment method](#payment-method)
-    - [Tag](#tag)
-    - [Custom slots](#custom-slots)
-- [Modifiers](#modifiers)
-    - [Display value](#display-value)
-    - [Condensed](#condensed)
-    - [Disabling options](#disabling-options)
-    - [Dynamic filtering](#dynamic-filtering)
-    - [Empty state](#empty-state)
-    - [Error state](#error-state)
-    - [Items with description](#items-with-description)
-    - [External filtering](#external-filtering)
-    - [Lazy loading](#lazy-loading)
-    - [External filtering and Lazy loading simultaneously](#external-filtering-and-lazy-loading-simultaneously)
-    - [Multi select](#multi-select)
-    - [Nested multi-select](#nested-multi-select)
-    - [Nested multi-select with lazy loading](#nested-multi-select-with-lazy-loading)
-    - [Static categories](#static-categories)
-    - [Nested multi-select with lazy loading](#nested-multi-select-with-lazy-loading)
-    - [Readonly](#readonly)
-    - [Tooltip](#tooltip)
-- [Accessibility](#accessibility)
-- [Resources](#resources)
-
 ## Use Cases
 
 Use a Dropdown if you need to:
@@ -138,10 +107,10 @@ from interaction. An example of usage would be:
 </template>
 <script setup lang="ts">
     const apiItems = ref(props.items);
-    const selectedValue = ref(props.value);
+    const selectedValue = ref(props.modelValue);
 
     const clickedAction = (selectedOption: BentoListboxSelectedValue) => {
-        action('input')(selectedOption);
+        action('update:model-value')(selectedOption);
     };
 
     const isOptionDisabled = (option: BentoListboxOptionItem) => [3, 5, 7].includes(option.value as number);
@@ -164,7 +133,7 @@ Here's an example:
 </template>
 <script setup lang="ts">
     const apiItems = ref(props.items);
-    const selectedValue = ref(props.value);
+    const selectedValue = ref(props.modelValue);
 
     const emptyState = computed<BentoDropdownEmptyStateProps>(() => ({
         title: 'Unable to retrieve items',
@@ -188,12 +157,7 @@ Here's an example:
 
 ### Error state
 
-There are two properties that control the error state of `dropdown`:
-
-- `errorMessage`: renders `dropdown` in an error state and displays an error message beneath the field
-- `error`: renders `dropdown` with an error state
-
-`error` is deprecated and will be removed in the near future, so please use `errorMessage`.
+Set `errorMessage` to render `dropdown` in an error state and display an error message beneath the field.
 
 ### Items with description
 

package/dist/assets/components/dropdown/dropdown.internal.types.ts

@@ -0,0 +1 @@
+export enum BentoDropdownSize { DEFAULT = 'DropdownInputDefault', SMALL = 'DropdownInputSmall', }