@adyen/bento-mcp 0.3.0 → 0.5.0

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

@@ -0,0 +1,178 @@
+import { Canvas, Meta, Story, Source } from '@storybook/blocks';
+import * as DraggableStories from './draggable.stories';
+
+<Meta title="Docs" of={DraggableStories} />
+
+# Draggable
+
+The `bento-draggable` component allows you to create lists of items that can be reordered by dragging and dropping. It
+is a wrapper around the popular [SortableJS](https://github.com/SortableJS/Sortable) library.
+
+## Usage
+
+To create a draggable list, you provide a list of `items` to the component. You can then use the `default` slot to
+define how each item in the list should be rendered.
+
+For accessibility and to provide a handle for dragging, each draggable item should include a `bento-draggable-handle`
+component. This handle provides a grab icon and a menu with actions for reordering items using a keyboard.
+
+<Canvas withSource="closed">
+    <Story of={DraggableStories.Default} />
+</Canvas>
+
+## Customization
+
+You can render any custom component or HTML structure within the default slot. The slot provides the `item` and its
+`index` from the `items` array, allowing you to build complex draggable elements.
+
+## Nested Draggable Lists
+
+You can create nested draggable lists by recursively rendering `bento-draggable` components. This is useful for
+tree-like structures. To enable dragging between different levels, all `bento-draggable` components must share the same
+`group` name in their `options` prop.
+
+The component itself does not handle the `children` prop directly. Instead, you should handle the rendering of nested
+items within the default slot, as shown in this example.
+
+<Canvas withSource="closed">
+    <Story of={DraggableStories.Nested} />
+</Canvas>
+
+## Grid Layout
+
+The component can also be used to create draggable grids. To do this, you can style the draggable container with CSS
+Flexbox or Grid.
+
+For the `bento-draggable-handle` to display all movement options (including left and right), set its `variant` prop to
+`all-directions`.
+
+<Canvas withSource="closed">
+    <Story of={DraggableStories.Grid} />
+</Canvas>
+
+## Exposed Methods
+
+You can get a `ref` to the Draggable component to access the underlying SortableJS instance and other properties.
+
+<Source
+    dark
+    language="html"
+    code={`
+<template>
+    <bento-draggable ref="draggableRef" :items="items" />
+</template>
+
+<script setup lang="ts">
+    import { ref, onMounted } from 'vue';
+
+    const draggableRef = ref(null);
+
+    onMounted(() => {
+        // Access the SortableJS instance
+        const sortableInstance = draggableRef.value?.draggableElement;
+
+        // Example: get the order of items
+        const order = sortableInstance.toArray();
+        console.log(order);
+    });
+</script>
+
+`} />
+
+The following methods and properties are available on the component's `ref`:
+
+| Name               | Type                        | Description                                                                                             |
+| ------------------ | --------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `isDragging`       | `ref<boolean>`              | A boolean ref that is `true` when an item is being dragged.                                             |
+| `containerRef`     | `ref<HTMLElement>`          | A ref to the container DOM element.                                                                     |
+| `draggableElement` | `Sortable`                  | The underlying SortableJS instance, which provides methods like `toArray()`, `sort()`, and `destroy()`. |
+| `announce`         | `(message: string) => void` | Used to announce reordering or movement actions to screen reader users.                                 |
+
+### SortableJS Methods (`draggableElement`)
+
+| Method                | Description                                                                       |
+| --------------------- | --------------------------------------------------------------------------------- |
+| `option(name, value)` | Get or set a SortableJS option.                                                   |
+| `destroy()`           | Removes the sortable functionality completely.                                    |
+| `toArray()`           | Returns an array of the `data-id` attributes of the items in their current order. |
+| `sort(order)`         | Sorts the items according to a specified array of `data-id`s.                     |
+
+## Accessibility
+
+The `bento-draggable-handle` is essential for accessibility. It provides keyboard-accessible controls to reorder items,
+ensuring that users who cannot use a mouse can still interact with the list. The handle includes a menu with "Move up",
+"Move down", "Move to top", and "Move to bottom" actions.
+
+### Screen Reader Announcements
+
+To provide a fully accessible experience, it is **strongly recommended** to announce reordering or movement actions to
+screen reader users. The `bento-draggable` component exposes an `announce` function that can be used to provide these
+updates.
+
+**Note:** The component does not automatically announce movements. It is your responsibility to call this function
+whenever the list order changes or an item is moved:
+
+- **After dragging with the mouse:** When an item is dropped and the list is reordered within the same list, or
+  moved/cloned to another list.
+- **After using keyboard controls:** When a user selects a reordering action from the `bento-draggable-handle` menu.
+
+These announcements help users who rely on assistive technologies to understand the result of their actions and the
+current state of the list.
+
+<Source
+    dark
+    language="html"
+    code={`
+<template>
+    <bento-draggable
+        ref="draggableRef"
+        :items="items"
+        :options="{ onSort }"
+    >
+        <template #default="{ item, index }">
+            <bento-draggable-handle
+                :label="item.label"
+                @move-up="moveUp(index)"
+                @move-down="moveDown(index)"
+            />
+            <span>{{ item.label }}</span>
+        </template>
+    </bento-draggable>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue';
+
+    const draggableRef = ref(null);
+    const items = ref([
+        { id: '1', label: 'Item 1' },
+        { id: '2', label: 'Item 2' },
+        { id: '3', label: 'Item 3' },
+    ]);
+
+    const announceMove = (itemLabel: string, fromIndex: number, toIndex: number) => {
+        draggableRef.value?.announce(
+            \`Moved \${itemLabel} from position \${fromIndex + 1} to position \${toIndex + 1} of \${items.value.length}.\`
+        );
+    };
+
+    const onSort = (event) => {
+        const { oldIndex, newIndex } = event;
+        const item = items.value[oldIndex];
+        // ... update the items list ...
+        announceMove(item.label, oldIndex, newIndex);
+    };
+
+    const moveUp = (index) => {
+        const item = items.value[index];
+        // ... update the items list ...
+        announceMove(item.label, index, index - 1);
+    };
+</script>
+
+`} />
+
+## Resources
+
+- [SortableJS Documentation](https://github.com/SortableJS/Sortable#readme)
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=43548-4717&p=f)

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

@@ -0,0 +1 @@
+import type { Meta, StoryObj } from '@storybook/vue'; import { type BentoDraggableItems, type BentoDraggableOptions, type BentoDraggableProps, type BentoDraggableSortableEvent, } from './draggable.types'; import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoDraggableHandle } from './components/draggable-handle'; import { BentoTypography } from '../typography'; import { BentoButton } from '@/components/button'; import BinIcon from '@adyen/ui-assets-icons-16/vue/bin'; import BentoDraggable from './draggable.vue'; import BentoDraggableDefaultExample from './__tests__/bento-draggable-default-example.vue?raw'; import BentoDraggableNestedExample from './__tests__/bento-draggable-nested-example.vue?raw'; import BentoDraggableGridExample from './__tests__/bento-draggable-grid-example.vue?raw'; import './draggable.stories.scss?module'; const meta: Meta = { title: 'Draggable', component: BentoDraggable, }; export default meta; type Story = StoryObj<typeof BentoDraggable>; const ITEMS: BentoDraggableItems = [ { id: '1', label: 'Item 1' }, { id: '2', label: 'Item 2' }, { id: '3', label: 'Item 3' }, { id: '4', label: 'Item 4' }, { id: '5', label: 'Item 5' }, { id: '6', label: 'Item 6' }, ]; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDraggable, BentoDraggableHandle, BentoTypography }, props: Object.keys(argTypes), template: ` <bento-draggable v-bind="args" ref="draggableElementRef" :items="itemsList" class="b-draggable-default__container" :options="options" > <template #default="{item, index}"> <div class="b-draggable-default__item" :key="item.id"> <div :style="{ display: 'flex', alignItems: 'center'}"> <bento-draggable-handle :label="item.label" condensed :disabled="item.label === 'Item 2'" :disabled-menus="{ up: index === 0, top: index === 0, down: index === itemsList.length - 1, bottom: index === itemsList.length - 1, }" variant="up-and-down" @move-up="() => moveUp(index)" @move-down="() => moveDown(index)" @move-top="() => moveTop(index)" @move-bottom="() => moveBottom(index)" /> <bento-typography>{{ item.label }}</bento-typography> </div> </div> </template> </bento-draggable> `, setup(props) { const args = isVue2 ? props : _args; const itemsList = ref(args.items); const draggableElementRef = ref<typeof BentoDraggable>(null); const shiftList = (indexOrigin: number, indexTarget: number) => { if (indexOrigin === -1 || indexTarget === -1) { return Array.from(itemsList.value); } const newList = Array.from(itemsList.value as BentoDraggableItems); const [removed] = newList.splice(indexOrigin, 1); newList.splice(indexTarget, 0, removed); const itemLabel = removed.label; draggableElementRef.value.announce( `You've moved ${itemLabel} from position ${indexOrigin + 1} to position ${indexTarget + 1} of ${itemsList.value.length}.` ); return newList; }; const moveUp = (index: number) => { itemsList.value = shiftList(index, index - 1); action('move-up')(itemsList.value); }; const moveDown = (index: number) => { itemsList.value = shiftList(index, index + 1); action('move-down')(itemsList.value); }; const moveTop = (index: number) => { itemsList.value = shiftList(index, 0); action('move-top')(itemsList.value); }; const moveBottom = (index: number) => { itemsList.value = shiftList(index, itemsList.value.length - 1); action('move-bottom')(itemsList.value); }; const onSort = (event: BentoDraggableSortableEvent) => { itemsList.value = shiftList(event.oldIndex, event.newIndex); action('sort')(event, itemsList.value); }; const options: BentoDraggableOptions = { onAdd: action('add'), onChange: () => action('change'), onChoose: action('choose'), onClone: action('clone'), onEnd: action('end'), onFilter: action('filter'), onMove: action('move'), onRemove: action('remove'), onStart: action('start'), onSort, onUnchoose: action('unchoose'), onUpdate: action('update'), }; return { // Values args: isVue2 ? props : _args, itemsList, draggableElementRef, // Events options, moveUp, moveDown, moveTop, moveBottom, }; }, }), args: { items: ITEMS, options: { group: 'nested', animation: 150, multiDrag: true, } as BentoDraggableProps, }, parameters: storybookDocsParameter(BentoDraggableDefaultExample), }; const NESTED_ITEMS: BentoDraggableItems = [ { id: '1.1', label: 'Item 1.1', children: [ { id: '2.1', label: 'Item 2.1' }, { id: '2.2', label: 'Item 2.2', children: [ { id: '3.1', label: 'Item 3.1' }, { id: '3.2', label: 'Item 3.2' }, ], }, { id: '2.3', label: 'Item 2.3' }, ], }, { id: '1.2', label: 'Item 1.2' }, { id: '1.3', label: 'Item 1.3' }, ]; export const Nested: Story = { render: (_args, { argTypes }) => ({ components: { BentoDraggable, BentoDraggableHandle, BentoTypography }, props: Object.keys(argTypes), template: ` <bento-draggable v-bind="args" class="b-draggable-default__container" v-on="listeners" > <template #default="{item, index}"> <div class="b-draggable-default__item" :key="item.id"> <div :style="{ display: 'flex', alignItems: 'center'}"> <bento-draggable-handle :label="item.label" condensed variant="up-and-down" /> <bento-typography>{{ item.label }}</bento-typography> </div> <!-- Children --> <template v-if="item.children"> <bento-draggable class="b-draggable-default__container" :options="args.options" :items="item.children" v-on="listeners" > <template v-slot:default="{item: childItem, index: childIndex}"> <div class="b-draggable-default__item" :key="childItem.id"> <div :style="{ display: 'flex', alignItems: 'center'}"> <bento-draggable-handle :label="childItem.label" condensed variant="up-and-down" /> <bento-typography>{{ childItem.label }}</bento-typography> </div> </div> </template> </bento-draggable> </template> </div> </template> </bento-draggable> `, setup(props) { const clickedAction = (eventName: string) => (event: BentoDraggableSortableEvent) => action(eventName)(event); const listeners = { add: clickedAction('add'), change: clickedAction('change'), choose: clickedAction('choose'), clone: clickedAction('clone'), end: clickedAction('end'), filter: clickedAction('filter'), move: clickedAction('move'), remove: clickedAction('remove'), start: clickedAction('start'), sort: clickedAction('sort'), unchoose: clickedAction('unchoose'), update: clickedAction('update'), }; return { // Values args: isVue2 ? props : _args, // Events listeners, }; }, }), args: { items: NESTED_ITEMS, options: { group: 'nested', animation: 150, }, } as BentoDraggableProps, parameters: storybookDocsParameter(BentoDraggableNestedExample), }; export const Grid: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoDraggable, BentoDraggableHandle, BentoTypography, BinIcon }, props: Object.keys(argTypes), template: ` <bento-draggable v-bind="args" :style="{ padding: 'var(--b-spacer-050)', width: '670px', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: 'var(--b-spacer-050)', }" v-on="listeners" > <template #default="{item, index}"> <div :key="item.id" :style="{ width: '160px' }"> <div :style="{ display: 'flex', background: 'var(--b-color-background-tertiary)', borderTopLeftRadius: 'var(--b-border-radius-m)', borderTopRightRadius: 'var(--b-border-radius-m)', justifyContent: 'space-between', padding: 'var(--b-spacer-010) var(--b-spacer-020)', }" > <bento-draggable-handle :label="item.label" :disabled-menus="{ up: index <= 3, top: index <= 3, down: index > 3, bottom: index > 3, left: index === 0 || index === 4, right: index === 3 || index === 5, }" condensed variant="all-directions" /> <bento-button condensed variant="secondary"> <template #iconLeft> <bin-icon svg-title="remove" /> </template> </bento-button> </div> <div :style="{ backgroundColor: 'var(--b-color-background-secondary)', display: 'flex', flexDirection: 'column', borderBottomLeftRadius: 'var(--b-border-radius-m)', borderBottomRightRadius: 'var(--b-border-radius-m)', gap: 'var(--b-spacer-060)', padding: 'var(--b-spacer-040)', }" > <bento-typography>Card {{ index + 1 }}</bento-typography> </div> </div> </template> </bento-draggable> `, setup(props) { const clickedAction = (eventName: string) => (event: BentoDraggableSortableEvent) => action(eventName)(event); const listeners = { add: clickedAction('add'), change: clickedAction('change'), choose: clickedAction('choose'), clone: clickedAction('clone'), end: clickedAction('end'), filter: clickedAction('filter'), move: clickedAction('move'), remove: clickedAction('remove'), start: clickedAction('start'), sort: clickedAction('sort'), unchoose: clickedAction('unchoose'), update: clickedAction('update'), }; return { // Values args: isVue2 ? props : _args, // Events listeners, }; }, }), args: { items: ITEMS, options: { group: 'nested', animation: 150, } as BentoDraggableProps, }, parameters: storybookDocsParameter(BentoDraggableGridExample), }; 

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

@@ -0,0 +1 @@
+import { type SortableOptions } from 'sortablejs'; import { type MoveEvent, type SortableEvent } from 'sortablejs'; /** * Event instances generated by each of the events * emitted by the draggable component. */ export type BentoDraggableSortableEvent = SortableEvent; /** * Event emitted by the draggable move event */ export type BentoDraggableMoveEvent = MoveEvent; /** * Options to be passed to SortableJS. * @see {@link https://github.com/SortableJS/Sortable#readme | SortableJS documentation} for all the details of the options available */ export type BentoDraggableOptions = Omit<SortableOptions, 'handle' | 'filter'>; /** * Events to hook on to the draggable component through the options */ export type BentoDraggableEvents = Pick< BentoDraggableOptions, | 'onUnchoose' | 'onChoose' | 'onStart' | 'onEnd' | 'onAdd' | 'onUpdate' | 'onSort' | 'onRemove' | 'onFilter' | 'onMove' | 'onClone' | 'onChange' >; /** * Item data of the items to be rendered as draggable elements */ export interface BentoDraggableItem { label: string; [x: string]: any; children?: Array<BentoDraggableItem>; } /** * List of items to be rendered as draggable elements */ export type BentoDraggableItems = Array<BentoDraggableItem>; export interface BentoDraggableProps { /** * Element that will contain the draggable elements. * @default 'div' */ el?: keyof HTMLElementTagNameMap; /** * List of items to be rendered as draggable elements * @default [] */ items?: Array<BentoDraggableItem>; /** * Options to be passed to SortableJS. * @see {@link https://github.com/SortableJS/Sortable#readme | SortableJS documentation} for all the details of the options available * @default {} */ options?: BentoDraggableOptions; } 

package/dist/assets/components/draggable/draggable.vue

@@ -0,0 +1 @@
+<template> <component :is="el" ref="containerRef"> <slot v-for="(item, index) of items" :item="item" :index="index" name="default"></slot> </component> </template> <script setup lang="ts"> import { computed, onUnmounted, ref } from 'vue'; import type { BentoDraggableOptions, BentoDraggableProps, BentoDraggableSortableEvent } from './draggable.types'; import { useBentoDraggable } from './composables/use-bento-draggable/use-bento-draggable'; import { announce, cleanup } from './components/live-region/live-region'; const props = withDefaults(defineProps<BentoDraggableProps>(), { el: 'div', items: () => [], options: () => ({}), }); /** * Reference to the container of the draggable elements. */ const containerRef = ref<HTMLElement>(null); /** * Indicates if there is an element being dragged inside the container. */ const isDragging = ref<boolean>(false); /** * Computed options to be passed to SortableJS */ const computedOptions = computed<BentoDraggableOptions>(() => { if (!containerRef.value) { return {}; } return { ...props.options, onStart: (event: BentoDraggableSortableEvent) => { isDragging.value = true; if (props.options?.onStart) { props.options?.onStart(event); } }, onEnd: (event: BentoDraggableSortableEvent) => { // This is a hack to move the event to the end of the event queue. // cf this issue: https://github.com/SortableJS/Sortable/issues/1184 setTimeout(() => { isDragging.value = false; if (props.options?.onEnd) { props.options?.onEnd(event); } }); }, }; }); /** * Generate the draggable instance with SortableJS */ const { draggableElement } = useBentoDraggable(containerRef, computedOptions); onUnmounted(() => { // Remove the a11y live-region cleanup(); }); defineExpose({ /** * A ref to the container DOM element. */ containerRef, /** * The underlying SortableJS instance, which provides methods like `toArray()`, `sort()`, and `destroy()`. */ draggableElement, /** * A boolean ref that is `true` when an item is being dragged. */ isDragging, /** * Used to announce reordering or movement actions to screen reader users. */ announce, }); </script> <script lang="ts"> /** * Drag and drop container that transforms a list of items into draggable elements. * Th library is based on SortableJS. * @see {@link https://github.com/SortableJS/Sortable#readme | SortableJS documentation} * * @example * import { BentoDraggable, BentoDraggableHandle, type BentoDraggableEvents } from '@adyen/bento-vue2'; * * export default { * components: { BentoDraggable, BentoDraggableHandle }, * template: ` * <bento-draggable * :items="[ * { id: '1', label: 'Item 1' }, * { id: '2', label: 'Item 2' } * ]" * condensed * :options="{ * group: 'nested', * animation: 150, * ...listeners * }" * > * <template #default="{ item, index }"> * <div :key="item.id"> * <bento-draggable-handle :label="item.label" /> * </div> * </template> * </bento-draggable> * `, * setup () { * const listeners: BentoDraggableEvents = { * onAdd: () => {}, * onChange: () => {}, * onChoose: () => {}, * onClone: () => {}, * onEnd: () => {}, * onFilter: () => {}, * onMove: () => {}, * onRemove: () => {}, * onStart: () => {}, * onSort: () => {}, * onUnchoose: () => {}, * onUpdate: () => {}, * }; * return { * listeners, * } * } * } */ export default { name: 'bento-draggable', }; </script> 

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 from version 2.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> <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> 

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 {string} value.label - Use BentoDropdown instead of custom labels * * @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 from version 2.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> <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> 

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 from version 2.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="$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> 

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 from version 2.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> <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" /> 

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 from version 2.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="$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" /> 

package/dist/assets/components/dropdown/composables/use-keyboard-navigation.types.ts

@@ -1 +1 @@
-import { type ComputedRef, type Ref } from 'vue'; export interface UseTextboxKeyboardNavigationOptions { inputContainerRef: Ref; optionsContainerRef: Ref; selectedValueIndex: ComputedRef<number>; isDropdownOpen: Ref<boolean>; isDynamicFltering: Ref<boolean>; items: Ref<Array<HTMLDivElement>>; isMultiple: boolean; } export interface UseListboxKeyboardNavigationOptions { isDropdownOpen: Ref<boolean>; inputContainerRef: Ref; } 
+import { type ComputedRef, type Ref } from 'vue'; export interface UseTextboxKeyboardNavigationOptions { inputContainerRef: Ref; optionsContainerRef: Ref; selectedValueIndex: ComputedRef<number>; isDropdownOpen: Ref<boolean>; isDynamicFltering: Ref<boolean>; items: Ref<Array<HTMLDivElement>>; isMultiple: boolean; totalItemCount: ComputedRef<number>; isVirtualScroll: boolean; } export interface UseListboxKeyboardNavigationOptions { isDropdownOpen: Ref<boolean>; inputContainerRef: Ref; } 

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

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { computed, onMounted, ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { type BentoListboxOptionItem, type BentoListboxOptions, type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoDropdownEvent, BentoDropdownLazyLoadType, type BentoDropdownSearchOptions, } from '@/components/dropdown/dropdown.types'; import { BentoTag, BentoTagVariant } from '@/components/tag'; import { useCountryName, useCountryPhoneCode } from '@/components/country'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoDropdown from './dropdown.vue'; import DropdownWithDescriptionExample from './__tests__/dropdown-with-description-example.vue?raw'; import DropdownWithCustomSlotsExample from './__tests__/dropdown-with-custom-slots-example.vue?raw'; // Generate array from 1 to # // { label: 'Option #', value: # }, const DEFAULT_OPTIONS: BentoListboxOptions = new Array(10) .fill(0) .map((_, index) => ({ label: `Option ${index + 1}`, value: index + 1 })); const DEFAULT_DESCRIPTION = 'Choose an option'; const DEFAULT_LABEL = 'Label'; const DEFAULT_PLACEHOLDER = 'Select an option'; const DEFAULT_PROPS = { label: DEFAULT_LABEL, description: DEFAULT_DESCRIPTION, placeholder: DEFAULT_PLACEHOLDER, lazyLoadType: 'none', enableValueLabelPair: false, }; const COUNTRY_OPTIONS = ['NL', 'BE', 'DE'].map(code => ({ label: `${useCountryName(code, 'en-US').value} ${useCountryPhoneCode(code).value}`, value: code, displayValue: `${code} (${useCountryPhoneCode(code).value})`, })); const showMoreOptions = () => action(BentoDropdownEvent.SHOW_MORE)(); const meta: Meta = { title: 'Dropdown', component: BentoDropdown, argTypes: { 'show-more': { name: 'show-more', table: { type: { summary: '() => void' }, }, control: { disable: true }, }, size: { table: { disable: true } }, // Slots default: { description: 'Custom slots for the items and display value', table: { category: 'Slots', type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, description: { name: 'description', description: 'If set, displays a description text for the input.', table: { category: 'props', type: { summary: 'string' }, }, control: { type: 'text' }, }, 'slot:description': { name: 'description', defaultValue: '', description: 'If set, displays a description text for the input. Overrides the `description` prop when provided.', table: { category: 'Slots', type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, 'display-value': { description: 'Custom slot for the display value when the display value is different than the items', table: { category: 'Slots', type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, innerSlot: { // Hide non-existent slot inaccurately created by storybook table: { disable: true }, }, // Values lazyLoadType: { options: Object.values(BentoDropdownLazyLoadType), mapping: BentoDropdownLazyLoadType, control: { type: 'select', }, }, error: { control: { type: 'boolean' }, table: { category: 'Deprecated' }, }, 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', }, }, }; export default meta; type Story = StoryObj<typeof BentoDropdown>; const defaultDocs = ` <template> <bento-dropdown v-model="modelValue" aria-label="Descriptive definition of what the dropdown is for" description="Description of the field" :condensed="false" :disabled="false" :empty-state="emptyState" dynamic-filtering error-message="This is an error message" :multiple="false" :items="items" :is-option-disabled="isOptionDisabled" label="Dropdown input label" :optional="!isRequired" tooltip-text="Label tooltip text" placeholder="Dropdown placeholder text" :required="isRequired" enable-value-label-pair /> </template> <script setup lang="ts"> import { BentoDropdown, BentoDropdownEmptyStateProps, BentoListboxOptionItem, BentoListboxOptions, BentoListboxSelectedValue, } from '@adyen/bento-vue2'; import { computed, ref } from 'vue'; const modelValue = ref<BentoListboxSelectedValue>({ label: 'Option 1', value: 1 }); const items: BentoListboxOptions = new Array(10) .fill(0) .map((_, index) => ({ label: \`Option \${index + 1}\`, value: index + 1 })); // "required" and "optional" are mutually exclusive const isRequired = ref(false); const emptyState = computed<BentoDropdownEmptyStateProps>(() => ({ title: 'Unable to retrieve items', action: { title: 'Refresh the page to try again', event: () => { // Refresh page logic }, }, })); // Disable individual options const isOptionDisabled = (option: BentoListboxOptionItem) => option.value === 3; </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const isOptionDisabled = (option: BentoListboxOptionItem) => option.value === 3; const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values args, selectedValue, // Methods isOptionDisabled, onUpdateModelValue, showMoreOptions, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" :isOptionDisabled="isOptionDisabled" @show-more="showMoreOptions" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, modelValue: DEFAULT_OPTIONS[0].value, items: DEFAULT_OPTIONS, }, parameters: storybookDocsParameter(defaultDocs), }; export const MultiSelect: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const isOptionDisabled = (option: BentoListboxOptionItem) => [3, 5, 7, 9].includes(option.value as number); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values selectedValue, args, // Methods isOptionDisabled, onUpdateModelValue, showMoreOptions, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" :isOptionDisabled="isOptionDisabled" @show-more="showMoreOptions" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, description: 'Choose one or more options', modelValue: [1, 3, 100], multiple: true, items: DEFAULT_OPTIONS, }, parameters: storybookDocsParameter(` <template> <bento-dropdown v-model="modelValue" aria-label="Descriptive definition of what the dropdown is for" description="Description of the field" :condensed="false" :disabled="false" :empty-state="emptyState" dynamic-filtering error-message="This is an error message" :multiple="true" :items="items" :is-option-disabled="isOptionDisabled" label="Dropdown input label" :optional="!isRequired" tooltip-text="Label tooltip text" placeholder="Dropdown placeholder text" :required="isRequired" enable-value-label-pair @update:model-value="onUpdateModelValue" /> </template> <script setup lang="ts"> import { BentoDropdown, BentoDropdownEmptyStateProps, BentoListboxOptionItem, BentoListboxOptions, BentoListboxSelectedValue, } from '@adyen/bento-vue2'; import { computed, ref } from 'vue'; const modelValue = ref<BentoListboxSelectedValue>([ { label: 'Option 1', value: 1 } ]); const items: BentoListboxOptions = new Array(10) .fill(0) .map((_, index) => ({ label: \`Option \${index + 1}\`, value: index + 1 })); // "required" and "optional" are mutually exclusive const isRequired = ref(false); const emptyState = computed<BentoDropdownEmptyStateProps>(() => ({ title: 'Unable to retrieve items', action: { title: 'Refresh the page to try again', event: () => { // Refresh page logic }, }, })); // Disable individual options const isOptionDisabled = (option: BentoListboxOptionItem) => option.value === 3; const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { modelValue.value = newSelectedValue; }; </script> `), }; const TAG_LIST = Object.values(BentoTagVariant); const TAG_OPTIONS: BentoListboxOptions = new Array(TAG_LIST.length) .fill(0) .map((_, index) => ({ label: `Option ${index + 1}`, value: TAG_LIST[index] })); export const Slots: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown, BentoTag }, props: Object.keys(argTypes), setup(props) { const selectedValue = ref(props.value); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Methods onUpdateModelValue, showMoreOptions, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" @show-more="showMoreOptions" > <template #default="{ label, value }"> <bento-tag :variant="value" :label="label" /> </template> <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, modelValue: TAG_OPTIONS[1].value, items: TAG_OPTIONS, }, parameters: storybookDocsParameter(DropdownWithCustomSlotsExample), }; export const WithDescription: Story = { ...Default, args: { ...DEFAULT_PROPS, modelValue: [1, 2, 3], multiple: true, items: DEFAULT_OPTIONS.map(item => ({ ...item, description: `Description ${item.value}`, })), }, parameters: storybookDocsParameter(DropdownWithDescriptionExample), }; export const NestedMultiSelect: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const isOptionDisabled = (option: BentoListboxOptionItem) => [4, 5].includes(option.value as number); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values args, selectedValue, // Methods isOptionDisabled, onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" :isOptionDisabled="isOptionDisabled" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, description: 'Choose one or more options', modelValue: [2, 3, 100], multiple: true, items: [ { label: 'Option 1', description: 'Uncategorized', value: 1, }, { label: 'Category 1', description: 'C1', value: 'c1', items: [ { label: 'Option 2', description: 'C1-O2', value: 2, }, { label: 'Option 3', description: 'C1-O3', value: 3, }, ], }, { label: 'Category 2', description: 'C2', value: 'c2', items: [ { label: 'Option 4', description: 'C2-O4', value: 4, }, { label: 'Option 5', description: 'C2-O5', value: 5, }, ], }, ] as BentoListboxOptions, }, }; const externalFilteringTemplate = storybookDocsParameter(` <template> <bento-dropdown v-model="selectedValue" :items="internalList" :search="search" :component-loading="isSearching" dynamic-filtering multiple has-more-items lazy-load-type="automatic" label="Dropdown with external filtering" enable-value-label-pair /> </template> <script setup lang="ts"> import { ref, computed } from 'vue'; import { BentoDropdown, BentoListboxOptions, BentoListboxSelectedValueLabelPair, BentoDropdownSearchOptions, } from '@adyen/bento-vue2'; const initialItems: BentoListboxOptions = [ { label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 }, { label: 'Option 3', value: 3 }, { label: 'Option 4', value: 4 }, { label: 'Option 5', value: 5 }, ]; const selectedValue = ref<Array<BentoListboxSelectedValueLabelPair>>([]); const internalList = ref<BentoListboxOptions>(initialItems); const isSearching = ref(false); const searchForValue = (searchString: string) => { // This is where you would typically make an API call // to fetch data based on the searchString. // For this example, we'll simulate it. if (!searchString) { internalList.value = initialItems; return; } const newItems = new Array(5).fill(0).map((_, index) => ({ label: \`\${searchString} \${index + 1}\`, value: \`\${searchString}-\${index + 1}\`, })); internalList.value = newItems; }; const search = computed<BentoDropdownSearchOptions>(() => ({ debounceTime: 500, searchEvent: async (value: string) => { isSearching.value = true; // Simulate API call delay await new Promise(resolve => setTimeout(resolve, 1000)); searchForValue(value); isSearching.value = false; }, })); </script> `); export const externalFiltering: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const internalList = ref<BentoListboxOptions>(args.items); const isSearching = ref(false); const searchForValue = (searchString: string) => { // This is where you would typically make an API call // to fetch data based on the searchString. // For this example, we'll simulate it. if (!searchString) { internalList.value = args.items; return; } const newItems = new Array(5).fill(0).map((_, index) => ({ label: `${searchString} ${index + 1}`, value: `${searchString}-${index + 1}`, })); internalList.value = newItems; }; const search = computed<BentoDropdownSearchOptions>(() => ({ debounceTime: args.search.debounceTime, searchEvent: async value => { isSearching.value = true; await new Promise(resolve => setTimeout(resolve, 1000)); searchForValue(value); action('searchEvent')(value); isSearching.value = false; }, })); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { args, selectedValue, internalList, isSearching, search, onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" :items="internalList" :search="search" :component-loading="isSearching" @update:model-value="onUpdateModelValue" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, items: DEFAULT_OPTIONS, label: 'Dropdown with external filtering', description: 'Type to simulate fetching new items.', dynamicFiltering: true, multiple: true, modelValue: [], search: { debounceTime: 500, }, }, parameters: externalFilteringTemplate, }; const lazyLoadingTemplate = storybookDocsParameter(` <template> <bento-dropdown v-model="selectedValue" :items="listboxItems" :loading="isLoading" :has-more-items="hasMoreItems" :lazy-load-type="lazyLoadType" label="Lazy Loading Dropdown" multiple enable-value-label-pair @show-more="onLazyLoad" /> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import { BentoDropdown, BentoListboxOptions, BentoListboxSelectedValueLabelPair, BentoDropdownLazyLoadType, } from '@adyen/bento-vue2'; // --- Mock API for demonstration --- const ALL_ITEMS = Array.from({ length: 100 }, (_, i) => ({ label: \`Item \${i + 1}\`, value: i + 1, })); const PAGE_SIZE = 20; const fetchItems = (page: number) => { console.log(\`Fetching page: \${page}\`); return new Promise<{ items: BentoListboxOptions; hasMore: boolean }>(resolve => { setTimeout(() => { const start = (page - 1) * PAGE_SIZE; const end = start + PAGE_SIZE; const pageItems = ALL_ITEMS.slice(start, end); resolve({ items: pageItems, hasMore: end < ALL_ITEMS.length, }); }, 500); }); }; // --- End Mock API --- const selectedValue = ref<Array<BentoListboxSelectedValueLabelPair>>([]); const listboxItems = ref<BentoListboxOptions>([]); const isLoading = ref(false); const hasMoreItems = ref(true); const currentPage = ref(1); const lazyLoadType = ref<BentoDropdownLazyLoadType>('automatic'); // or 'button' const onLazyLoad = async () => { if (isLoading.value || !hasMoreItems.value) { return; } currentPage.value++; isLoading.value = true; const { items, hasMore } = await fetchItems(currentPage.value); // Append new items to the existing list listboxItems.value = [...listboxItems.value, ...items]; hasMoreItems.value = hasMore; isLoading.value = false; }; // Load initial data when the component mounts onMounted(async () => { isLoading.value = true; const { items, hasMore } = await fetchItems(currentPage.value); listboxItems.value = items; hasMoreItems.value = hasMore; isLoading.value = false; }); </script> `); export const LazyLoading: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref<BentoListboxSelectedValue>([]); const listboxItems = ref<BentoListboxOptions>([]); const isLoading = ref(false); const hasMoreItems = ref(true); const currentPage = ref(1); const allItems = Array.from({ length: 100 }, (_, i) => ({ label: `Item ${i + 1}`, value: i + 1, })); const pageSize = 20; const fetchItems = (page: number) => { return new Promise<{ items: BentoListboxOptions; hasMore: boolean }>(resolve => { setTimeout(() => { const start = (page - 1) * pageSize; const end = start + pageSize; const pageItems = allItems.slice(start, end); resolve({ items: pageItems, hasMore: end < allItems.length, }); }, 500); }); }; const onLazyLoad = async () => { if (isLoading.value || !hasMoreItems.value) { return; } currentPage.value++; isLoading.value = true; const { items, hasMore } = await fetchItems(currentPage.value); listboxItems.value = [...listboxItems.value, ...items]; hasMoreItems.value = hasMore; isLoading.value = false; action('show-more')(); }; const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; const loadInitial = async () => { currentPage.value = 1; isLoading.value = true; const { items, hasMore } = await fetchItems(currentPage.value); listboxItems.value = items; hasMoreItems.value = hasMore; isLoading.value = false; }; watch(() => args.lazyLoadType, loadInitial, { immediate: true }); return { args, selectedValue, listboxItems, isLoading, hasMoreItems, onLazyLoad, onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :items="listboxItems" :model-value="selectedValue" :loading="isLoading" :has-more-items="hasMoreItems" @update:model-value="onUpdateModelValue" @show-more="onLazyLoad" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, label: 'Lazy Loading', description: 'Scroll down or click the button to load more items.', multiple: true, lazyLoadType: 'automatic', }, parameters: lazyLoadingTemplate, }; const externalFilteringAndLazyLoadingTemplate = storybookDocsParameter(` <template> <bento-dropdown v-model="selectedValue" :items="listboxItems" :component-loading="isComponentLoading" :loading="isLazyLoading" :has-more-items="hasMoreItems" :search="search" :lazy-load-type="lazyLoadType" label="External Filtering & Lazy Loading" dynamic-filtering multiple enable-value-label-pair @show-more="onLazyLoad" /> </template> <script setup lang="ts"> import { ref, computed, onMounted } from 'vue'; import { BentoDropdown, BentoListboxOptions, BentoListboxSelectedValueLabelPair, BentoDropdownSearchOptions, BentoDropdownLazyLoadType, } from '@adyen/bento-vue2'; // --- Mock API for demonstration --- const ALL_ITEMS = Array.from({ length: 1000 }, (_, i) => ({ label: \`Item \${i + 1}\`, value: i + 1, })); const PAGE_SIZE = 20; const fetchItems = (searchTerm: string, page: number) => { console.log(\`Fetching items with searchTerm: "\${searchTerm}", page: \${page}\`); return new Promise<{ items: BentoListboxOptions; hasMore: boolean }>(resolve => { setTimeout(() => { const filtered = ALL_ITEMS.filter(item => item.label.toLowerCase().includes(searchTerm.toLowerCase()) ); const start = (page - 1) * PAGE_SIZE; const end = start + PAGE_SIZE; const pageItems = filtered.slice(start, end); resolve({ items: pageItems, hasMore: end < filtered.length, }); }, 500); }); }; // --- End Mock API --- const selectedValue = ref<Array<BentoListboxSelectedValueLabelPair>>([]); const listboxItems = ref<BentoListboxOptions>([]); const isComponentLoading = ref(false); const isLazyLoading = ref(false); const hasMoreItems = ref(true); const currentPage = ref(1); const currentSearchTerm = ref(''); const lazyLoadType = ref<BentoDropdownLazyLoadType>('automatic'); const onSearch = async (searchTerm: string) => { currentSearchTerm.value = searchTerm; currentPage.value = 1; isComponentLoading.value = true; const { items, hasMore } = await fetchItems(searchTerm, currentPage.value); listboxItems.value = items; hasMoreItems.value = hasMore; isComponentLoading.value = false; }; const onLazyLoad = async () => { if (isLazyLoading.value || !hasMoreItems.value) { return; } currentPage.value++; isLazyLoading.value = true; const { items, hasMore } = await fetchItems(currentSearchTerm.value, currentPage.value); listboxItems.value = [...listboxItems.value, ...items]; hasMoreItems.value = hasMore; isLazyLoading.value = false; }; const search = computed<BentoDropdownSearchOptions>(() => ({ searchEvent: onSearch, })); onMounted(() => { onSearch(''); }); </script> `); export const ExternalFilteringAndLazyLoading: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref<BentoListboxSelectedValue>([{ label: 'Item 2000', value: 2000 }]); const listboxItems = ref<BentoListboxOptions>([]); const isComponentLoading = ref(false); const isLazyLoading = ref(false); const hasMoreItems = ref(true); const currentPage = ref(1); const currentSearchTerm = ref(''); const allItems = Array.from({ length: 1000 }, (_, i) => ({ label: `Item ${i + 1}`, value: i + 1, })); const pageSize = 20; const fetchItems = (searchTerm: string, page: number) => { return new Promise<{ items: BentoListboxOptions; hasMore: boolean }>(resolve => { setTimeout(() => { const filtered = allItems.filter(item => item.label.toLowerCase().includes(searchTerm.toLowerCase()) ); const start = (page - 1) * pageSize; const end = start + pageSize; const pageItems = filtered.slice(start, end); resolve({ items: pageItems, hasMore: end < filtered.length, }); }, 500); }); }; const onSearch = async (searchTerm: string) => { action('searchEvent')(searchTerm); currentSearchTerm.value = searchTerm; currentPage.value = 1; isComponentLoading.value = true; const { items, hasMore } = await fetchItems(searchTerm, currentPage.value); listboxItems.value = items; hasMoreItems.value = hasMore; isComponentLoading.value = false; }; const onLazyLoad = async () => { if (isLazyLoading.value || !hasMoreItems.value) { return; } currentPage.value++; isLazyLoading.value = true; const { items, hasMore } = await fetchItems(currentSearchTerm.value, currentPage.value); listboxItems.value = [...listboxItems.value, ...items]; hasMoreItems.value = hasMore; isLazyLoading.value = false; action('show-more')(); }; const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; const search = computed<BentoDropdownSearchOptions>(() => ({ searchEvent: onSearch, debounceTime: args.search?.debounceTime, })); onMounted(() => { onSearch(''); }); return { args, selectedValue, listboxItems, isComponentLoading, isLazyLoading, hasMoreItems, search, onLazyLoad, onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :items="listboxItems" :model-value="selectedValue" :component-loading="isComponentLoading" :loading="isLazyLoading" :has-more-items="hasMoreItems" :search="search" @update:model-value="onUpdateModelValue" @show-more="onLazyLoad" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, label: 'External Filtering & Lazy Loading', description: 'Search for items and scroll to load more results.', dynamicFiltering: true, multiple: true, lazyLoadType: 'automatic', search: { debounceTime: 500, }, }, parameters: externalFilteringAndLazyLoadingTemplate, }; export const StaticCategories: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const selectedValue = ref(props.value); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, description: 'Select an option from a category', modelValue: '', multiple: false, staticCategories: true, items: [ { label: 'Carnivores', value: 'carnivores', items: [ { label: 'T-Rex', value: 'trex', }, { label: 'Velociraptor', value: 'velociraptor', }, ], }, { label: 'Herbivores', value: 'herbivores', items: [ { label: 'Iguanodon', value: 'iguanodon', }, { label: 'Barney', value: 'barney', }, ], }, { label: 'Aquatic', value: 'aquatic', items: [ { label: 'Mosasaurus', value: 'mosasaurus', }, { label: 'Nessie', value: 'nessie', }, ], }, ] as BentoListboxOptions, }, }; export const VirtualScrolling: Story = { ...Default, args: { ...Default.args, items: new Array(1000).fill(0).map((_, index) => ({ label: `Option ${index + 1}`, value: index + 1 })), virtualScroll: true, }, }; export const CustomDisplayValue: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values args, selectedValue, // Methods onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, modelValue: COUNTRY_OPTIONS[0].value, items: COUNTRY_OPTIONS, }, parameters: storybookDocsParameter(` <bento-dropdown :items="[ {label: "Netherlands +31", displayValue: "NL +31", value: "NL"}, {label: "Belgium +32", displayValue: "BE +32", value: "BE"}, {label: "Germany +49", displayValue: "DE +49", value: "DE"}, ]" :model-value="selectedValue" @update:model-value="onUpdateModelValue" /> `), }; 
+import { action } from '@storybook/addon-actions'; import { computed, onMounted, ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { type BentoListboxOptionItem, type BentoListboxOptions, type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoDropdownEvent, BentoDropdownLazyLoadType, type BentoDropdownSearchOptions, } from '@/components/dropdown/dropdown.types'; import { BentoTag, BentoTagVariant } from '@/components/tag'; import { useCountryName, useCountryPhoneCode } from '@/components/country'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoDropdown from './dropdown.vue'; import DropdownWithDescriptionExample from './__tests__/dropdown-with-description-example.vue?raw'; import DropdownWithCustomSlotsExample from './__tests__/dropdown-with-custom-slots-example.vue?raw'; // Generate array from 1 to # // { label: 'Option #', value: # }, const DEFAULT_OPTIONS: BentoListboxOptions = new Array(10) .fill(0) .map((_, index) => ({ label: `Option ${index + 1}`, value: index + 1 })); const DEFAULT_DESCRIPTION = 'Choose an option'; const DEFAULT_LABEL = 'Label'; const DEFAULT_PLACEHOLDER = 'Select an option'; const DEFAULT_PROPS = { label: DEFAULT_LABEL, description: DEFAULT_DESCRIPTION, placeholder: DEFAULT_PLACEHOLDER, lazyLoadType: 'none', enableValueLabelPair: false, }; const COUNTRY_OPTIONS = ['NL', 'BE', 'DE'].map(code => ({ label: `${useCountryName(code, 'en-US').value} ${useCountryPhoneCode(code).value}`, value: code, displayValue: `${code} (${useCountryPhoneCode(code).value})`, })); const showMoreOptions = () => action(BentoDropdownEvent.SHOW_MORE)(); const meta: Meta = { title: 'Dropdown', component: BentoDropdown, argTypes: { 'show-more': { name: 'show-more', table: { type: { summary: '() => void' }, }, control: { disable: true }, }, size: { table: { disable: true } }, // Slots default: { description: 'Custom slots for the items and display value', table: { category: 'Slots', type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, description: { name: 'description', description: 'If set, displays a description text for the input.', table: { category: 'props', type: { summary: 'string' }, }, control: { type: 'text' }, }, 'slot:description': { name: 'description', defaultValue: '', description: 'If set, displays a description text for the input. Overrides the `description` prop when provided.', table: { category: 'Slots', type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, 'display-value': { description: 'Custom slot for the display value when the display value is different than the items', table: { category: 'Slots', type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, innerSlot: { // Hide non-existent slot inaccurately created by storybook table: { disable: true }, }, // Values lazyLoadType: { options: Object.values(BentoDropdownLazyLoadType), mapping: BentoDropdownLazyLoadType, control: { type: 'select', }, }, error: { control: { type: 'boolean' }, table: { category: 'Deprecated' }, }, 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', }, }, }; export default meta; type Story = StoryObj<typeof BentoDropdown>; const defaultDocs = ` <template> <bento-dropdown v-model="modelValue" aria-label="Descriptive definition of what the dropdown is for" description="Description of the field" :condensed="false" :disabled="false" :empty-state="emptyState" dynamic-filtering error-message="This is an error message" :multiple="false" :items="items" :is-option-disabled="isOptionDisabled" label="Dropdown input label" :optional="!isRequired" tooltip-text="Label tooltip text" placeholder="Dropdown placeholder text" :required="isRequired" enable-value-label-pair /> </template> <script setup lang="ts"> import { BentoDropdown, BentoDropdownEmptyStateProps, BentoListboxOptionItem, BentoListboxOptions, BentoListboxSelectedValue, } from '@adyen/bento-vue2'; import { computed, ref } from 'vue'; const modelValue = ref<BentoListboxSelectedValue>({ label: 'Option 1', value: 1 }); const items: BentoListboxOptions = new Array(10) .fill(0) .map((_, index) => ({ label: \`Option \${index + 1}\`, value: index + 1 })); // "required" and "optional" are mutually exclusive const isRequired = ref(false); const emptyState = computed<BentoDropdownEmptyStateProps>(() => ({ title: 'Unable to retrieve items', action: { title: 'Refresh the page to try again', event: () => { // Refresh page logic }, }, })); // Disable individual options const isOptionDisabled = (option: BentoListboxOptionItem) => option.value === 3; </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const isOptionDisabled = (option: BentoListboxOptionItem) => option.value === 3; const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values args, selectedValue, // Methods isOptionDisabled, onUpdateModelValue, showMoreOptions, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" :isOptionDisabled="isOptionDisabled" @show-more="showMoreOptions" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, modelValue: DEFAULT_OPTIONS[0].value, items: DEFAULT_OPTIONS, }, parameters: storybookDocsParameter(defaultDocs), }; export const MultiSelect: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const isOptionDisabled = (option: BentoListboxOptionItem) => [3, 5, 7, 9].includes(option.value as number); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values selectedValue, args, // Methods isOptionDisabled, onUpdateModelValue, showMoreOptions, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" :isOptionDisabled="isOptionDisabled" @show-more="showMoreOptions" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, description: 'Choose one or more options', modelValue: [1, 3, 100], multiple: true, items: DEFAULT_OPTIONS, }, parameters: storybookDocsParameter(` <template> <bento-dropdown v-model="modelValue" aria-label="Descriptive definition of what the dropdown is for" description="Description of the field" :condensed="false" :disabled="false" :empty-state="emptyState" dynamic-filtering error-message="This is an error message" :multiple="true" :items="items" :is-option-disabled="isOptionDisabled" label="Dropdown input label" :optional="!isRequired" tooltip-text="Label tooltip text" placeholder="Dropdown placeholder text" :required="isRequired" enable-value-label-pair @update:model-value="onUpdateModelValue" /> </template> <script setup lang="ts"> import { BentoDropdown, BentoDropdownEmptyStateProps, BentoListboxOptionItem, BentoListboxOptions, BentoListboxSelectedValue, } from '@adyen/bento-vue2'; import { computed, ref } from 'vue'; const modelValue = ref<BentoListboxSelectedValue>([ { label: 'Option 1', value: 1 } ]); const items: BentoListboxOptions = new Array(10) .fill(0) .map((_, index) => ({ label: \`Option \${index + 1}\`, value: index + 1 })); // "required" and "optional" are mutually exclusive const isRequired = ref(false); const emptyState = computed<BentoDropdownEmptyStateProps>(() => ({ title: 'Unable to retrieve items', action: { title: 'Refresh the page to try again', event: () => { // Refresh page logic }, }, })); // Disable individual options const isOptionDisabled = (option: BentoListboxOptionItem) => option.value === 3; const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { modelValue.value = newSelectedValue; }; </script> `), }; const TAG_LIST = Object.values(BentoTagVariant); const TAG_OPTIONS: BentoListboxOptions = new Array(TAG_LIST.length) .fill(0) .map((_, index) => ({ label: `Option ${index + 1}`, value: TAG_LIST[index] })); export const Slots: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown, BentoTag }, props: Object.keys(argTypes), setup(props) { const selectedValue = ref(props.value); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Methods onUpdateModelValue, showMoreOptions, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" @show-more="showMoreOptions" > <template #default="{ label, value }"> <bento-tag :variant="value" :label="label" /> </template> <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, modelValue: TAG_OPTIONS[1].value, items: TAG_OPTIONS, }, parameters: storybookDocsParameter(DropdownWithCustomSlotsExample), }; export const WithDescription: Story = { ...Default, args: { ...DEFAULT_PROPS, modelValue: [1, 2, 3], multiple: true, items: DEFAULT_OPTIONS.map(item => ({ ...item, description: `Description ${item.value}`, })), }, parameters: storybookDocsParameter(DropdownWithDescriptionExample), }; export const NestedMultiSelect: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const isOptionDisabled = (option: BentoListboxOptionItem) => [4, 5].includes(option.value as number); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values args, selectedValue, // Methods isOptionDisabled, onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" :isOptionDisabled="isOptionDisabled" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, description: 'Choose one or more options', modelValue: [2, 3, 100], multiple: true, items: [ { label: 'Option 1', description: 'Uncategorized', value: 1, }, { label: 'Category 1', description: 'C1', value: 'c1', items: [ { label: 'Option 2', description: 'C1-O2', value: 2, }, { label: 'Option 3', description: 'C1-O3', value: 3, }, ], }, { label: 'Category 2', description: 'C2', value: 'c2', items: [ { label: 'Option 4', description: 'C2-O4', value: 4, }, { label: 'Option 5', description: 'C2-O5', value: 5, }, ], }, ] as BentoListboxOptions, }, }; const externalFilteringTemplate = storybookDocsParameter(` <template> <bento-dropdown v-model="selectedValue" :items="internalList" :search="search" :component-loading="isSearching" dynamic-filtering multiple has-more-items lazy-load-type="automatic" label="Dropdown with external filtering" enable-value-label-pair /> </template> <script setup lang="ts"> import { ref, computed } from 'vue'; import { BentoDropdown, BentoListboxOptions, BentoListboxSelectedValueLabelPair, BentoDropdownSearchOptions, } from '@adyen/bento-vue2'; const initialItems: BentoListboxOptions = [ { label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 }, { label: 'Option 3', value: 3 }, { label: 'Option 4', value: 4 }, { label: 'Option 5', value: 5 }, ]; const selectedValue = ref<Array<BentoListboxSelectedValueLabelPair>>([]); const internalList = ref<BentoListboxOptions>(initialItems); const isSearching = ref(false); const searchForValue = (searchString: string) => { // This is where you would typically make an API call // to fetch data based on the searchString. // For this example, we'll simulate it. if (!searchString) { internalList.value = initialItems; return; } const newItems = new Array(5).fill(0).map((_, index) => ({ label: \`\${searchString} \${index + 1}\`, value: \`\${searchString}-\${index + 1}\`, })); internalList.value = newItems; }; const search = computed<BentoDropdownSearchOptions>(() => ({ debounceTime: 500, searchEvent: async (value: string) => { isSearching.value = true; // Simulate API call delay await new Promise(resolve => setTimeout(resolve, 1000)); searchForValue(value); isSearching.value = false; }, })); </script> `); export const externalFiltering: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const internalList = ref<BentoListboxOptions>(args.items); const isSearching = ref(false); const searchForValue = (searchString: string) => { // This is where you would typically make an API call // to fetch data based on the searchString. // For this example, we'll simulate it. if (!searchString) { internalList.value = args.items; return; } const newItems = new Array(5).fill(0).map((_, index) => ({ label: `${searchString} ${index + 1}`, value: `${searchString}-${index + 1}`, })); internalList.value = newItems; }; const search = computed<BentoDropdownSearchOptions>(() => ({ debounceTime: args.search.debounceTime, searchEvent: async value => { isSearching.value = true; await new Promise(resolve => setTimeout(resolve, 1000)); searchForValue(value); action('searchEvent')(value); isSearching.value = false; }, })); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { args, selectedValue, internalList, isSearching, search, onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" :items="internalList" :search="search" :component-loading="isSearching" @update:model-value="onUpdateModelValue" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, items: DEFAULT_OPTIONS, label: 'Dropdown with external filtering', description: 'Type to simulate fetching new items.', dynamicFiltering: true, multiple: true, modelValue: [], search: { debounceTime: 500, }, }, parameters: externalFilteringTemplate, }; const lazyLoadingTemplate = storybookDocsParameter(` <template> <bento-dropdown v-model="selectedValue" :items="listboxItems" :loading="isLoading" :has-more-items="hasMoreItems" :lazy-load-type="lazyLoadType" label="Lazy Loading Dropdown" multiple enable-value-label-pair @show-more="onLazyLoad" /> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import { BentoDropdown, BentoListboxOptions, BentoListboxSelectedValueLabelPair, BentoDropdownLazyLoadType, } from '@adyen/bento-vue2'; // --- Mock API for demonstration --- const ALL_ITEMS = Array.from({ length: 100 }, (_, i) => ({ label: \`Item \${i + 1}\`, value: i + 1, })); const PAGE_SIZE = 20; const fetchItems = (page: number) => { console.log(\`Fetching page: \${page}\`); return new Promise<{ items: BentoListboxOptions; hasMore: boolean }>(resolve => { setTimeout(() => { const start = (page - 1) * PAGE_SIZE; const end = start + PAGE_SIZE; const pageItems = ALL_ITEMS.slice(start, end); resolve({ items: pageItems, hasMore: end < ALL_ITEMS.length, }); }, 500); }); }; // --- End Mock API --- const selectedValue = ref<Array<BentoListboxSelectedValueLabelPair>>([]); const listboxItems = ref<BentoListboxOptions>([]); const isLoading = ref(false); const hasMoreItems = ref(true); const currentPage = ref(1); const lazyLoadType = ref<BentoDropdownLazyLoadType>('automatic'); // or 'button' const onLazyLoad = async () => { if (isLoading.value || !hasMoreItems.value) { return; } currentPage.value++; isLoading.value = true; const { items, hasMore } = await fetchItems(currentPage.value); // Append new items to the existing list listboxItems.value = [...listboxItems.value, ...items]; hasMoreItems.value = hasMore; isLoading.value = false; }; // Load initial data when the component mounts onMounted(async () => { isLoading.value = true; const { items, hasMore } = await fetchItems(currentPage.value); listboxItems.value = items; hasMoreItems.value = hasMore; isLoading.value = false; }); </script> `); export const LazyLoading: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref<BentoListboxSelectedValue>([]); const listboxItems = ref<BentoListboxOptions>([]); const isLoading = ref(false); const hasMoreItems = ref(true); const currentPage = ref(1); const allItems = Array.from({ length: 100 }, (_, i) => ({ label: `Item ${i + 1}`, value: i + 1, })); const pageSize = 20; const fetchItems = (page: number) => { return new Promise<{ items: BentoListboxOptions; hasMore: boolean }>(resolve => { setTimeout(() => { const start = (page - 1) * pageSize; const end = start + pageSize; const pageItems = allItems.slice(start, end); resolve({ items: pageItems, hasMore: end < allItems.length, }); }, 500); }); }; const onLazyLoad = async () => { if (isLoading.value || !hasMoreItems.value) { return; } currentPage.value++; isLoading.value = true; const { items, hasMore } = await fetchItems(currentPage.value); listboxItems.value = [...listboxItems.value, ...items]; hasMoreItems.value = hasMore; isLoading.value = false; action('show-more')(); }; const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; const loadInitial = async () => { currentPage.value = 1; isLoading.value = true; const { items, hasMore } = await fetchItems(currentPage.value); listboxItems.value = items; hasMoreItems.value = hasMore; isLoading.value = false; }; watch(() => args.lazyLoadType, loadInitial, { immediate: true }); return { args, selectedValue, listboxItems, isLoading, hasMoreItems, onLazyLoad, onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :items="listboxItems" :model-value="selectedValue" :loading="isLoading" :has-more-items="hasMoreItems" @update:model-value="onUpdateModelValue" @show-more="onLazyLoad" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, label: 'Lazy Loading', description: 'Scroll down or click the button to load more items.', multiple: true, lazyLoadType: 'automatic', }, parameters: lazyLoadingTemplate, }; const externalFilteringAndLazyLoadingTemplate = storybookDocsParameter(` <template> <bento-dropdown v-model="selectedValue" :items="listboxItems" :component-loading="isComponentLoading" :loading="isLazyLoading" :has-more-items="hasMoreItems" :search="search" :lazy-load-type="lazyLoadType" label="External Filtering & Lazy Loading" dynamic-filtering multiple enable-value-label-pair @show-more="onLazyLoad" /> </template> <script setup lang="ts"> import { ref, computed, onMounted } from 'vue'; import { BentoDropdown, BentoListboxOptions, BentoListboxSelectedValueLabelPair, BentoDropdownSearchOptions, BentoDropdownLazyLoadType, } from '@adyen/bento-vue2'; // --- Mock API for demonstration --- const ALL_ITEMS = Array.from({ length: 1000 }, (_, i) => ({ label: \`Item \${i + 1}\`, value: i + 1, })); const PAGE_SIZE = 20; const fetchItems = (searchTerm: string, page: number) => { console.log(\`Fetching items with searchTerm: "\${searchTerm}", page: \${page}\`); return new Promise<{ items: BentoListboxOptions; hasMore: boolean }>(resolve => { setTimeout(() => { const filtered = ALL_ITEMS.filter(item => item.label.toLowerCase().includes(searchTerm.toLowerCase()) ); const start = (page - 1) * PAGE_SIZE; const end = start + PAGE_SIZE; const pageItems = filtered.slice(start, end); resolve({ items: pageItems, hasMore: end < filtered.length, }); }, 500); }); }; // --- End Mock API --- const selectedValue = ref<Array<BentoListboxSelectedValueLabelPair>>([]); const listboxItems = ref<BentoListboxOptions>([]); const isComponentLoading = ref(false); const isLazyLoading = ref(false); const hasMoreItems = ref(true); const currentPage = ref(1); const currentSearchTerm = ref(''); const lazyLoadType = ref<BentoDropdownLazyLoadType>('automatic'); const onSearch = async (searchTerm: string) => { currentSearchTerm.value = searchTerm; currentPage.value = 1; isComponentLoading.value = true; const { items, hasMore } = await fetchItems(searchTerm, currentPage.value); listboxItems.value = items; hasMoreItems.value = hasMore; isComponentLoading.value = false; }; const onLazyLoad = async () => { if (isLazyLoading.value || !hasMoreItems.value) { return; } currentPage.value++; isLazyLoading.value = true; const { items, hasMore } = await fetchItems(currentSearchTerm.value, currentPage.value); listboxItems.value = [...listboxItems.value, ...items]; hasMoreItems.value = hasMore; isLazyLoading.value = false; }; const search = computed<BentoDropdownSearchOptions>(() => ({ searchEvent: onSearch, })); onMounted(() => { onSearch(''); }); </script> `); export const ExternalFilteringAndLazyLoading: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref<BentoListboxSelectedValue>([{ label: 'Item 2000', value: 2000 }]); const listboxItems = ref<BentoListboxOptions>([]); const isComponentLoading = ref(false); const isLazyLoading = ref(false); const hasMoreItems = ref(true); const currentPage = ref(1); const currentSearchTerm = ref(''); const allItems = Array.from({ length: 1000 }, (_, i) => ({ label: `Item ${i + 1}`, value: i + 1, })); const pageSize = 20; const fetchItems = (searchTerm: string, page: number) => { return new Promise<{ items: BentoListboxOptions; hasMore: boolean }>(resolve => { setTimeout(() => { const filtered = allItems.filter(item => item.label.toLowerCase().includes(searchTerm.toLowerCase()) ); const start = (page - 1) * pageSize; const end = start + pageSize; const pageItems = filtered.slice(start, end); resolve({ items: pageItems, hasMore: end < filtered.length, }); }, 500); }); }; const onSearch = async (searchTerm: string) => { action('searchEvent')(searchTerm); currentSearchTerm.value = searchTerm; currentPage.value = 1; isComponentLoading.value = true; const { items, hasMore } = await fetchItems(searchTerm, currentPage.value); listboxItems.value = items; hasMoreItems.value = hasMore; isComponentLoading.value = false; }; const onLazyLoad = async () => { if (isLazyLoading.value || !hasMoreItems.value) { return; } currentPage.value++; isLazyLoading.value = true; const { items, hasMore } = await fetchItems(currentSearchTerm.value, currentPage.value); listboxItems.value = [...listboxItems.value, ...items]; hasMoreItems.value = hasMore; isLazyLoading.value = false; action('show-more')(); }; const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; const search = computed<BentoDropdownSearchOptions>(() => ({ searchEvent: onSearch, debounceTime: args.search?.debounceTime, })); onMounted(() => { onSearch(''); }); return { args, selectedValue, listboxItems, isComponentLoading, isLazyLoading, hasMoreItems, search, onLazyLoad, onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :items="listboxItems" :model-value="selectedValue" :component-loading="isComponentLoading" :loading="isLazyLoading" :has-more-items="hasMoreItems" :search="search" @update:model-value="onUpdateModelValue" @show-more="onLazyLoad" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, label: 'External Filtering & Lazy Loading', description: 'Search for items and scroll to load more results.', dynamicFiltering: true, multiple: true, lazyLoadType: 'automatic', search: { debounceTime: 500, }, }, parameters: externalFilteringAndLazyLoadingTemplate, }; export const StaticCategories: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const selectedValue = ref(props.value); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, description: 'Select an option from a category', modelValue: '', multiple: false, staticCategories: true, items: [ { label: 'All animals', value: 'all', }, { label: 'Carnivores', value: 'carnivores', items: [ { label: 'T-Rex', value: 'trex', }, { label: 'Velociraptor', value: 'velociraptor', }, ], }, { label: 'Herbivores', value: 'herbivores', items: [ { label: 'Iguanodon', value: 'iguanodon', }, { label: 'Barney', value: 'barney', }, ], }, { label: 'Aquatic', value: 'aquatic', items: [ { label: 'Mosasaurus', value: 'mosasaurus', }, { label: 'Nessie', value: 'nessie', }, ], }, ] as BentoListboxOptions, }, }; export const VirtualScrolling: Story = { ...Default, args: { ...Default.args, items: new Array(1000).fill(0).map((_, index) => ({ label: `Option ${index + 1}`, value: index + 1 })), virtualScroll: true, }, }; export const CustomDisplayValue: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const onUpdateModelValue = (newSelectedValue: BentoListboxSelectedValue) => { selectedValue.value = newSelectedValue; action('update:model-value')(newSelectedValue); }; return { // Values args, selectedValue, // Methods onUpdateModelValue, }; }, template: ` <div style="max-width: 300px"> <bento-dropdown v-bind="args" :model-value="selectedValue" @update:model-value="onUpdateModelValue" > <template #description v-if="args['slot:description']">{{ args['slot:description'] }}</template> </bento-dropdown> </div> `, }), args: { ...DEFAULT_PROPS, modelValue: COUNTRY_OPTIONS[0].value, items: COUNTRY_OPTIONS, }, parameters: storybookDocsParameter(` <bento-dropdown :items="[ {label: "Netherlands +31", displayValue: "NL +31", value: "NL"}, {label: "Belgium +32", displayValue: "BE +32", value: "BE"}, {label: "Germany +49", displayValue: "DE +49", value: "DE"}, ]" :model-value="selectedValue" @update:model-value="onUpdateModelValue" /> `), }; 

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

@@ -1 +1 @@
-import type { BentoListboxEmptyStateProps as BentoDropdownEmptyStateProps, BentoListboxSearchOptions as BentoDropdownSearchOptions, BentoListboxVirtulisationOptions as BentoDropdownVirtulisationOptions, BentoListboxIsOptionDisabled, BentoListboxLazyLoadType, BentoListboxOptions, BentoListboxSelectedValue, } from '../../types/listbox'; import { type FormField } from '../../types/form-field'; export type { BentoDropdownSearchOptions, BentoDropdownEmptyStateProps, BentoDropdownVirtulisationOptions }; export interface BentoDropdownProps extends FormField { /** * @deprecated from version 2.0.0. Use the aria-label attribute instead. * Defines a string value that labels an interactive element. */ ariaLabel?: string; /** * Renders the dropdown with a condensed style. */ condensed?: boolean; /** * Empty state props used with the inner empty state component which is displayed when no search results are found. */ emptyState?: BentoDropdownEmptyStateProps; /** * Sets the possibility to type into the textbox. */ dynamicFiltering?: boolean; /** * Highlights the dropdown in an erroneous state. * @deprecated Use "errorMessage" prop instead */ error?: boolean; /** * Indicates whether there are more items to load */ hasMoreItems?: boolean; /** * Function that dertermines which options are disabled from interaction. * @type {BentoListboxIsOptionDisabled} * @param {BentoListboxOptionItem} 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?: BentoListboxIsOptionDisabled; /** * The option elements to populate the dropdown with. * It must be an array of {@see BentoListboxOptionItem } * @property value.label - Text to be displayed in the option * @property value.value - Value of the option */ items?: BentoListboxOptions; /** * Indicates if new options are lazy loading. */ loading?: boolean; /** * Indicates that dropdown items are loading */ componentLoading?: boolean; /** * The type of `Lazy Load`. * Type "automatic" will enable infinite scrolling * Type "button" will enable lazy loading with "Show more" button */ lazyLoadType?: BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`; /** * If enabled, the user will be able to select multiple items. */ multiple?: boolean; /** * Dropdown search options and events. * @see BentoDropdownSearchOptions */ search?: BentoDropdownSearchOptions; /** * Toggles whether to use the slot content select items shown in the textbox in multiple mode. */ showSlotContentInMultiple?: boolean; /** * @deprecated Do not use. Only 'default' size should be used. */ size?: BentoDropdownSize | `${BentoDropdownSize}`; /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories?: boolean; /** * The `input` value. * Providing an empty string will select no options. * Set to an empty string `''` if you don't want any of the available options to be selected. * @deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` instead. */ value?: BentoListboxSelectedValue; /** * The `input` value. * Providing an empty string will select no options. * Set to an empty string `''` if you don't want any of the available options to be selected. */ modelValue?: BentoListboxSelectedValue; /** * 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?: BentoDropdownVirtulisationOptions; /** * Enables value/label value handling. When `true`, the component expects and emits value/label * pair objects instead of primitive values. * * This affects both the `value` prop and the `input` event payload. * * - **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select). * - **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection. * * This is particularly useful when a selected item's label is not available in the `items` prop, * allowing the component to display the correct label for values loaded from external sources. * @default false */ enableValueLabelPair?: boolean; } /** * @deprecated Do not use. Only 'default' size should be used. */ export enum BentoDropdownSize { DEFAULT = 'DropdownInputDefault', SMALL = 'DropdownInputSmall', } export { /** * @deprecated since version 2.0. Use the string literal instead. */ BentoListboxLazyLoadType as BentoDropdownLazyLoadType, BentoListboxEvent as BentoDropdownEvent, } from '@/types/listbox'; 
+import type { BentoListboxEmptyStateProps as BentoDropdownEmptyStateProps, BentoListboxSearchOptions as BentoDropdownSearchOptions, BentoListboxVirtulisationOptions as BentoDropdownVirtulisationOptions, BentoListboxIsOptionDisabled, BentoListboxLazyLoadType, BentoListboxOptions, BentoListboxSelectedValue, } from '../../types/listbox'; import { type FormField } from '../../types/form-field'; export type { BentoDropdownSearchOptions, BentoDropdownEmptyStateProps, BentoDropdownVirtulisationOptions }; export interface BentoDropdownProps extends FormField { /** * @deprecated Since v2.0.0. Use `aria-label` instead. * Defines a string value that labels an interactive element. */ ariaLabel?: string; /** * Renders the dropdown with a condensed style. */ condensed?: boolean; /** * Empty state props used with the inner empty state component which is displayed when no search results are found. */ emptyState?: BentoDropdownEmptyStateProps; /** * Sets the possibility to type into the textbox. */ dynamicFiltering?: boolean; /** * Highlights the dropdown in an erroneous state. * @deprecated Since v2.0.0. Use `errorMessage` instead. */ error?: boolean; /** * Indicates whether there are more items to load */ hasMoreItems?: boolean; /** * Function that dertermines which options are disabled from interaction. * @type {BentoListboxIsOptionDisabled} * @param {BentoListboxOptionItem} 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?: BentoListboxIsOptionDisabled; /** * The option elements to populate the dropdown with. * It must be an array of {@see BentoListboxOptionItem } * @property value.label - Text to be displayed in the option * @property value.value - Value of the option */ items?: BentoListboxOptions; /** * Indicates if new options are lazy loading. */ loading?: boolean; /** * Indicates that dropdown items are loading */ componentLoading?: boolean; /** * The type of `Lazy Load`. * Type "automatic" will enable infinite scrolling * Type "button" will enable lazy loading with "Show more" button */ lazyLoadType?: BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`; /** * If enabled, the user will be able to select multiple items. */ multiple?: boolean; /** * Dropdown search options and events. * @see BentoDropdownSearchOptions */ search?: BentoDropdownSearchOptions; /** * Toggles whether to use the slot content select items shown in the textbox in multiple mode. */ showSlotContentInMultiple?: boolean; /** * @deprecated Since v2.0.0. Do not use. Only the `default` size is supported. */ size?: BentoDropdownSize | `${BentoDropdownSize}`; /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories?: boolean; /** * The `input` value. * Providing an empty string will select no options. * Set to an empty string `''` if you don't want any of the available options to be selected. * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead. */ value?: BentoListboxSelectedValue; /** * The `input` value. * Providing an empty string will select no options. * Set to an empty string `''` if you don't want any of the available options to be selected. */ modelValue?: BentoListboxSelectedValue; /** * 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?: BentoDropdownVirtulisationOptions; /** * Enables value/label value handling. When `true`, the component expects and emits value/label * pair objects instead of primitive values. * * This affects both the `value` prop and the `input` event payload. * * - **Input (`value` prop):** Expects a `{ value: string | number, label: string }` object (or an array of them for multi-select). * - **Output (`input` event):** Emits a `{ value: string | number, label: string }` object (or an array of them) upon selection. * * This is particularly useful when a selected item's label is not available in the `items` prop, * allowing the component to display the correct label for values loaded from external sources. * @default false */ enableValueLabelPair?: boolean; } /** * @deprecated Since v2.0.0. Do not use. Only the `default` size is supported. */ export enum BentoDropdownSize { DEFAULT = 'DropdownInputDefault', SMALL = 'DropdownInputSmall', } export { /** * @deprecated Since v2.0.0. Use string literal instead. */ BentoListboxLazyLoadType as BentoDropdownLazyLoadType, BentoListboxEvent as BentoDropdownEvent, } from '@/types/listbox';