@adyen/bento-mcp 0.0.0 → 0.1.0

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

@@ -0,0 +1,420 @@
+import { Canvas, Story, Source, Meta } from '@storybook/blocks';
+import * as DropdownStories from './dropdown.stories';
+import * as DropdownAvatarStories from './components/variants/dropdown-avatar/dropdown-avatar.stories.ts';
+import * as DropdownCountryStories from './components/variants/dropdown-country/dropdown-country.stories.ts';
+import * as DropdownCurrencyStories from './components/variants/dropdown-currency/dropdown-currency.stories.ts';
+import * as DropdownPaymentMethodStories from './components/variants/dropdown-payment-method/dropdown-payment-method.stories.ts';
+import * as DropdownTagStories from './components/variants/dropdown-tag/dropdown-tag.stories.ts';
+
+<Meta title="Dropdown" of={DropdownStories} />
+
+# Dropdown
+
+A dropdown shows a selected option or multiple options. Use a dropdown when you want users to select from a pre-defined
+list of options.
+
+<Canvas sourceState="hidden">
+    <Story of={DropdownStories.Default} />
+</Canvas>
+
+## Table of contents
+
+- [Use Cases](#use-cases)
+- [Variants](#variants)
+    - [Avatar](#avatar)
+    - [Country](#country)
+    - [Currency](#currency)
+    - [Payment method](#payment-method)
+    - [Tag](#tag)
+    - [Custom slots](#custom-slots)
+- [Modifiers](#modifiers)
+    - [Display value](#display-value)
+    - [Condensed](#condensed)
+    - [Disabling options](#disabling-options)
+    - [Dynamic filtering](#dynamic-filtering)
+    - [Empty state](#empty-state)
+    - [Error state](#error-state)
+    - [Items with description](#items-with-description)
+    - [External filtering](#external-filtering)
+    - [Lazy loading](#lazy-loading)
+    - [External filtering and Lazy loading simultaneously](#external-filtering-and-lazy-loading-simultaneously)
+    - [Multi select](#multi-select)
+    - [Nested multi-select](#nested-multi-select)
+    - [Static categories](#static-categories)
+    - [Readonly](#readonly)
+    - [Tooltip](#tooltip)
+- [Accessibility](#accessibility)
+- [Resources](#resources)
+
+## Use Cases
+
+Use a Dropdown if you need to:
+
+- Allow the user to select a country of residence.
+- Select multiple payment methods.
+
+### Do not use
+
+If there are less than 4 options - use a group of radio buttons or checkboxes instead.
+
+## Variants
+
+All the variants listed below accept all the same properties as the default `bento-dropdown` plus the properties listed
+in the description of the variant.
+
+### Avatar
+
+<Canvas of={DropdownAvatarStories.Default} />
+
+NOTE: this uses the `bento-dropdown-avatar` component, so you can pass a `src` string with each item in the `items`
+array.
+
+### Country
+
+<Canvas of={DropdownCountryStories.Default} />
+
+NOTE: this uses the `bento-dropdown-country` component, so alongside all other `bento-dropdown` props it additionally
+accepts a country `variant` property which prepopulates the dropdown item labels.
+
+e.g. when `variant` is set to `'name'`, then the dropdown will display a list of country names.
+
+### Currency
+
+<Canvas of={DropdownCurrencyStories.Default} />
+
+NOTE: this uses the `bento-dropdown-country` component.
+
+The `value` property within each option in `items` property array should translate to a currency code in
+([ISO 4217 format](https://en.wikipedia.org/wiki/ISO_4217)).
+
+### Payment method
+
+<Canvas of={DropdownPaymentMethodStories.Default} />
+
+NOTE: this uses the `bento-dropdown-payment-method` component, so the `value` property within each option in `items`
+property array can take one of the values listed in the exported `IconsEnum` enum from the
+`@adyen/ui-assets-payment-method-icons` passed as a string.
+
+### Tag
+
+<Canvas of={DropdownTagStories.Default} />
+
+### Custom slots
+
+If your dropdown items don't match any of the variants listed above, you can pass custom slots as the dropdown's options
+via the default slot.
+
+<Canvas of={DropdownStories.Slots} />
+
+## Modifiers
+
+### Display value
+
+Each item in the dropdown can optionally be customized in the way it display when selected. To enable this feature, pass
+a `display-value` property to the item's object in the items array.
+
+<Canvas sourceState="hidden">
+    <Story of={DropdownStories.CustomDisplayValue} />
+</Canvas>
+
+### Condensed
+
+Condensed variant is meant to be used in places where regular variant is too big, for example, in small areas (i.e.
+filter bar search) or condensed versions (i.e. condensed b-data-grid) of other components. It should not be used in
+normal page content, for example in forms or settings - use regular variant in those instead. To use this variant, pass
+the `condensed` prop to the `bento-dropdown` when using it.
+
+### Disabling options
+
+The prop `isOptionDisabled` allows you to specify which options of the `items` array you want to render in a disabled
+state. This prop takes in a function which runs over each dropdown option to dertermine if option should be disabled
+from interaction. An example of usage would be:
+
+```html
+<template>
+    <bento-dropdown v-model="selectedValue" :items="apiItems" :is-option-disabled="isOptionDisabled" />
+</template>
+<script setup lang="ts">
+    const apiItems = ref(props.items);
+    const selectedValue = ref(props.value);
+
+    const clickedAction = (selectedOption: BentoListboxSelectedValue) => {
+        action('input')(selectedOption);
+    };
+
+    const isOptionDisabled = (option: BentoListboxOptionItem) => [3, 5, 7].includes(option.value as number);
+</script>
+```
+
+### Dynamic filtering
+
+This option can be enabled to allow the user to filter the dropdown options by typing into a value.
+
+### Empty state
+
+It's possible to customise the empty state message by using the `emptyState` property.
+
+Here's an example:
+
+```html
+<template>
+    <bento-dropdown v-model="selectedValue" :items="apiItems" :search="search" :empty-state="emptyState" />
+</template>
+<script setup lang="ts">
+    const apiItems = ref(props.items);
+    const selectedValue = ref(props.value);
+
+    const emptyState = computed<BentoDropdownEmptyStateProps>(() => ({
+        title: 'Unable to retrieve items',
+        action: {
+            title: 'Refresh the page to try again',
+            event: () => {
+                // Refresh page logic
+            },
+        },
+    }));
+
+    const search = {
+        debounceTime: 2000,
+        searchEvent: async (val: string) => {
+            const { data } = await fetch('dropdown-items-api');
+            apiItems.value = data;
+        },
+    };
+</script>
+```
+
+### Error state
+
+There are two properties that control the error state of `dropdown`:
+
+- `errorMessage`: renders `dropdown` in an error state and displays an error message beneath the field
+- `error`: renders `dropdown` with an error state
+
+`error` is deprecated and will be removed in the near future, so please use `errorMessage`.
+
+### Items with description
+
+Each item in the droepdown can optionally dispay a description. To enable this feature, pass a `description` field to
+the item's object in the `items` array.
+
+<Canvas sourceState="hidden">
+    <Story of={DropdownStories.WithDescription} />
+</Canvas>
+
+### External filtering
+
+<Canvas sourceState="hidden">
+    <Story of={DropdownStories.externalFiltering} />
+</Canvas>
+
+Instead of relying on client-side filtering, you can configure the dropdown to fetch filtered results from an external
+source, such as an API, as the user types. This is particularly useful for large datasets.
+
+To implement external filtering, you'll use a combination of props:
+
+- **`dynamic-filtering`**: This must be set to `true` to enable the user to type into the dropdown.
+- **`search`**: This object configures the external search behavior. It has two properties:
+    - `searchEvent`: A function that is triggered with the search term as its argument. This is where you should place
+      your logic to call an external API.
+    - `debounceTime` (optional): The delay in milliseconds after the user stops typing before the `searchEvent` is
+      triggered. The default is `300ms`.
+- **`items`**: This is the array of options displayed in the dropdown. You should dynamically update this prop with the
+  data you receive from your API call.
+- **`component-loading`**: Set this boolean prop to `true` while waiting for the API response. This will display a
+  loading indicator inside the dropdown, providing feedback to the user.
+
+The typical flow is as follows:
+
+1.  A user starts typing in the dropdown.
+2.  After the `debounceTime` has passed, the `searchEvent` function is called with the current search term.
+3.  In your `searchEvent` implementation, you set a loading state variable (bound to `component-loading`) to `true`.
+4.  You make your API request using the search term.
+5.  Once the request is complete, you update your `items` array with the results from the API.
+6.  Finally, you set the loading state variable back to `false`.
+
+### Lazy loading
+
+<Canvas sourceState="hidden">
+    <Story of={DropdownStories.LazyLoading} />
+</Canvas>
+
+The `bento-dropdown` component supports lazy loading, which is useful for handling large datasets by loading items in
+batches as the user interacts with the dropdown. This can be done either automatically on scroll or by clicking a
+button.
+
+To enable lazy loading, you need to configure the following props:
+
+- **`lazy-load-type`**: This determines how new items are loaded.
+    - `'automatic'`: The `show-more` event is emitted when the user scrolls to the bottom of the options list.
+    - `'button'`: A "Show more" button is displayed at the bottom of the list. Clicking it emits the `show-more` event.
+    - `'none'` (default): Lazy loading is disabled.
+- **`has-more-items`**: A boolean that you should set to `true` as long as there are more items to be loaded from your
+  data source. Once all items are loaded, set it to `false` to hide the loader/button.
+- **`loading`**: A boolean that should be set to `true` while you are fetching the next batch of items. This will
+  display a loading indicator to the user.
+- **`@show-more`**: An event that is emitted when the user triggers the lazy load (either by scrolling or clicking the
+  button). You should listen for this event to fetch and append the next set of items to your `items` array.
+
+### External filtering and Lazy loading simultaneously
+
+<Canvas sourceState="hidden">
+    <Story of={DropdownStories.ExternalFilteringAndLazyLoading} />
+</Canvas>
+
+You can combine external filtering with lazy loading to create a powerful and efficient search experience for very large
+datasets. This allows users to search for a specific term and then lazy-load more results that match that term.
+
+To achieve this, you'll combine the props from both features. The key is to manage the state for both searching and lazy
+loading.
+
+- Use `component-loading` for the initial search loading state.
+- Use `loading` for the subsequent lazy-loading state.
+- When a new search is performed, you must reset your pagination and load the first page of results for the new search
+  term.
+
+#### Pre-set values that are not in the initial loaded list.
+
+Some times the `bento-dropdown` field comes with pre-selected values that are not present on the initial load. This can
+be done in three ways:
+
+- (**Recommended**) By **always** setting a `value` / `label` pair as selected value and setting the prop
+  `enable-value-label-pair` as `true`:
+
+<Source
+    format={'html'}
+    dark
+    code={`
+<bento-dropdown
+    :value="[{ label: 'Option 1', value: 1}]"
+    :items="[]"
+    enable-value-label-pair
+/>
+    `}
+/>
+
+- By only providing the `value` of the selected options and all selected options in the _initial load_. The value will
+  be used as `label`
+
+<Source
+    format={'html'}
+    dark
+    code={`
+<bento-dropdown
+    :value="[100]"
+    :items="[{ value: 1, label: 'Option 1'}]"
+/>
+    `}
+/>
+
+- By providing the `value` and appending the selected options as part of the `item` property after the _initial load_.
+
+<Source
+    format={'html'}
+    dark
+    code={`
+<bento-dropdown
+    :value="[100]"
+    :items="[
+        { value: 1, label: 'Option 1'}, 
+        { value: 100, label: 'Option 100'}
+    ]"
+/>
+    `}
+/>
+
+### Multi-select
+
+To allow the user to select more than one item at a time, set the `multiple` property. This property will add checkboxes
+to the items and allow to select multiple items at the same time.
+
+<Canvas sourceState="hidden">
+    <Story of={DropdownStories.MultiSelect} />
+</Canvas>
+
+### Nested multi-select
+
+The `bento-dropdown` multi-select variant comes with a nested functionality, which allows to group multiple child
+options under a selectable parent category. This allows to create categories of options and select all the items inside
+the category or the options of the category individually.
+
+To enable this feature, pass a data structure in which each item in the `items` array which has a category will contain
+an `items` array itself.
+
+Categories and their options _must_ contain a 'description' that helps identifying the options and categories when
+searching for values in `dynamicFiltering` mode.
+
+<Canvas sourceState="hidden">
+    <Story of={DropdownStories.NestedMultiSelect} />
+</Canvas>
+
+### Static categories
+
+Static categories (not to be confused with the Nested options categories) add an additional level of organisation to the
+dropdown list. They're static, meaning they cannot be interacted with or searched for. They also don't appear in
+selected section.
+
+To display them the data structure must have 1 level of nested options (same as in Nested Options) and use the property
+`static-categories`. Static categories can be used along with `multiple` to enable multi selection.
+
+<Canvas sourceState="hidden">
+    <Story of={DropdownStories.StaticCategories} />
+</Canvas>
+
+### Readonly
+
+Setting the `readonly` property renders the `dropdown` component in a readonly state. In terms of functionality, read
+only states are focusable and submittable in a form. They're considered to be 'active' from an application's point of
+view.
+
+### Tooltip
+
+A tooltip with extra information for the field can be rendered by passing the desired information to the `tooltipText`
+prop.
+
+## Accessibility
+
+### Keyboard interaction
+
+Being an interactive element, the dropdown is reachable through keyboard navigation in the logical navigation flow of
+the page. The following keys trigger the following actions:
+
+Dropdown `combobox` in focus:
+
+| Keyboard interaction | Action                                                |
+| -------------------- | ----------------------------------------------------- |
+| `Tab`                | Moves focus to the dropdown selector or away from it. |
+| `Space`              | Opens / closes dropdown                               |
+| `Enter`              | Opens / closes dropdown                               |
+| `Escape`             | Closes dropdown                                       |
+| `Arrow down`         | Move down the dropdown options list                   |
+
+Dropdown `listbox` in focus:
+
+| Keyboard interaction | Action                                                                                                                                 |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `Escape`             | Closes popup.                                                                                                                          |
+| `Enter`              | Select option in dropdown and cloes popup.                                                                                             |
+| `Down Arrow`         | Moves focus to and selects the next option. If focus is on the last option, either returns focus to the combobox or does nothing.      |
+| `Up Arrow`           | Moves focus to and selects the previous option. If focus is on the first option, either returns focus to the combobox or does nothing. |
+| `Up Arrow`           | Moves focus to and selects the previous option. If focus is on the first option, either returns focus to the combobox or does nothing. |
+
+### Roles, states and properties
+
+Adhering to the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) standard we follow the
+[combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#wai-ariaroles,states,andproperties) documentation
+provided.
+
+### Roles, states and properties
+
+| Role     | Attribute              | Element         | Usage                                                                                           |
+| -------- | ---------------------- | --------------- | ----------------------------------------------------------------------------------------------- |
+| combobox |                        | `input` / `div` | Indicates the element has an associated popup. The popup may be a `listbox` or `tree`           |
+|          | `aria-label`           |                 | The input requires an accessible name that will be assigned to it                               |
+|          | `aria-readonly="true"` |                 | Set only when `readonly` is set to `true`                                                       |
+| listbox  |                        |                 | Allows the user to select one or more items from a list of choices (single and multi select)    |
+| tree     |                        |                 | Allows the user to select one or more items from a hierarchically organised collection (nested) |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=964-18157&t=VN4tRotGCnkexZI4-0)

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

@@ -0,0 +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: { description: 'Custom slot for the description', 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" /> </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" /> </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" v-slot="{label, value}" @show-more="showMoreOptions" > <bento-tag :variant="value" :label="label" /> </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" /> </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" /> </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" /> </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" /> </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" /> </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" /> </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.vue

@@ -0,0 +1 @@
+<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts --> <!-- eslint-disable vue/attribute-hyphenation --> <template> <div v-bento-click-outside-directive="clickOutsideDropdown" class="b-dropdown" :class="conditionalClasses"> <field-label v-if="label" :id="labelId" :condensed="condensed" :label="label" :tooltip-text="tooltipText" :optional="optional" :required="required" /> <div ref="inputContainerRefWrapper" v-bento-keyboard-navigation-directive v-on="textboxKeyboardNavigationListeners" > <component :is="computedSize" ref="inputContainerRef" :condensed="condensed" :value="searchTerm" :additional-items-selected="additionalItemsSelected" :aria-controls="dropdownOptionsContainerId" :ariaExpanded="isDropdownOpen" :aria-labelledby="label ? labelId : null" :aria-describedby="ariaDescribedBy" :aria-label="computedAriaLabel" :aria-readonly="isReadOnly" :readonly="isReadOnly" :required="required" :disabled="disabled" :display-value="displayValue" :dynamic-filtering="dynamicFiltering" :is-invalid="!!errorMessage || error" :multiple="multiple" :open="isDropdownOpen" :selected-value-item="!isInputComponent ? selectedValueItem : undefined" :show-slot-content-in-multiple="showSlotContentInMultiple" @input="searchTerm = $event" @open="toggleDropdown" @close="toggleDropdown" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </component> </div> <bento-dropdown-options-container v-if="inputContainerRef" :id="dropdownOptionsContainerId" ref="optionsContainerRef" :aria-label="computedAriaLabel" :component-loading="componentLoading" :empty-state="emptyState" :debounce-time="search?.debounceTime" :disabled="disabled" :is-option-disabled="isOptionDisabled" :items="filteredItems" :multiple="multiple" :static-categories="staticCategories" :open="isDropdownOpen" :selected-value="cachedSelectedListboxOptions" :searching="isSearching" :target-element="inputContainerRefWrapper" :loading="loading" :has-more-items="hasMoreItems" :lazy-load-type="lazyLoadType" :virtual-scroll="virtualScroll" v-on="listboxListeners" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-dropdown-options-container> <error-message v-if="!!errorMessage" :id="errorId" :error-message="errorMessage" class="b-dropdown__error-message" /> <bento-typography v-if="description || hasSlot('description')" :id="descriptionId" class="b-dropdown__description" :class="descriptionConditionalClasses" el="span" > <slot name="description"> {{ description }} </slot> </bento-typography> </div> </template> <script setup lang="ts"> import { computed, defineComponent, inject, nextTick, type Ref, ref, toRef, toRefs, useAttrs, useSlots, watch, } from 'vue'; // Components import { BentoDropdownOptionsContainer } from './components/dropdown-options-container'; import { BentoTypography } from '@/components/typography'; import { DropdownInputDefault, DropdownInputSmall } from './components'; import { BentoListbox, ErrorMessage, FieldLabel, useCachedSelectedValues, useMultiLevelItems } from '@/internal'; // Utils import { deprecate } from '@/utils/ts/deprecate'; import { generateUid } from '@/core/utils/ts'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useI18n } from '@/utils/ts/i18n'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; // Composables import { useDisplayValue, useListboxKeyboardNavigation, useTextboxKeyboardNavigation } from './composables'; import { useVisibleDomOptions } from '@/internal/listbox/composables/use-visible-dom-options/use-visible-dom-options'; import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter'; // Directives import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives'; // Types import { BentoDropdownEvent, type BentoDropdownProps, BentoDropdownSize } from './dropdown.types'; import { BentoListboxEvent, type BentoListboxItemRole, type BentoListboxMultiSelectValue, type BentoListboxOptions, type BentoListboxSelectedValue, type BentoListboxSelectedValueLabelPair, } from '@/types/listbox'; import messages from './messages.json'; import { useHasSlot } from '@/composables'; import { INPUT_FIELD_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys'; type MessageSchema = (typeof messages)['en-US']; const attrs = useAttrs(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const props = withDefaults(defineProps<BentoDropdownProps>(), { ariaLabel: null, condensed: false, emptyState: undefined, disabled: false, dynamicFiltering: false, error: false, errorMessage: null, description: null, hasMoreItems: false, isOptionDisabled: undefined, items: () => [], label: null, loading: false, componentLoading: false, lazyLoadType: BentoListbox.props.lazyLoadType.default, multiple: false, optional: false, placeholder: null, readonly: false, required: false, search: undefined, showSlotContentInMultiple: false, size: null, staticCategories: false, tooltipText: null, value: null, modelValue: null, virtualScroll: false, enableValueLabelPair: false, }); const emit = defineEmits<{ /** * Emitted when an option is clicked. Updates the selected option from the "value" property linked to the v-model. * @deprecated since version 2.0. Use `v-model` or `update:model-value instead. */ (e: 'input', selectedValue: BentoListboxSelectedValue | any); // eslint-disable-line @typescript-eslint/no-explicit-any /** * 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 | any); // eslint-disable-line @typescript-eslint/no-explicit-any /** * 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 { t } = useI18n<{ message: MessageSchema }>({ messages }); const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit); const inputContainerRef = ref(null); const inputContainerRefWrapper = ref(null); const optionsContainerRef: Ref<InstanceType<typeof BentoDropdownOptionsContainer>> = ref(null); const isDropdownOpen = ref(false); const dropdownOptionsContainerId = generateUid('bento-dropdown-options-container'); const labelId = generateUid('dropdown-label'); const descriptionId = generateUid('dropdown-description'); const errorId = generateUid('dropdown-error'); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const dropdownValue = computed(() => props.modelValue ?? props.value); const { cachedSelectedListboxOptions, cachedListboxSelectedValues, setCachedValues } = useCachedSelectedValues( toRef(props, 'items'), dropdownValue, toRef(props, 'multiple'), toRef(props, 'enableValueLabelPair') ); const ariaLabelAttribute = ref(attrs['aria-label']); const ariaDescribedByAttribute = ref(attrs['aria-describedby']); const { ariaLabel, label } = toRefs(props); // vue-i18n issue with t() used in script - direct usage in template works // requires either createI18n({ legacy: false }) or to be wrapped in computed() const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback')); const computedAriaLabel = useAriaLabel({ // TODO: take ariaLabel ref away when aria-label prop is removed ariaLabel: ariaLabel.value || (ariaLabelAttribute as Ref<string>), label, defaultFallback: computedAriaLabelFallbackMessage, }); // Inject input field component key to change the dropdown size const isInputComponent = props.size === BentoDropdownSize.SMALL || inject(INPUT_FIELD_COMPONENT_INJECTION_KEY, false); const computedSize = computed(() => (isInputComponent ? BentoDropdownSize.SMALL : BentoDropdownSize.DEFAULT)); const conditionalClasses = computed(() => ({ 'b-dropdown--condensed': props.condensed, })); // Description styles const descriptionConditionalClasses = computed(() => ({ 'b-dropdown__description--error': !!props.errorMessage, })); // Filtering const searchTerm = ref(''); const items = toRef(props, 'items'); const staticCategories = toRef(props, 'staticCategories'); const filteredItems = useSearchBarFilter(searchTerm, items, props?.search?.searchEvent, staticCategories); const isSearching = computed(() => props.dynamicFiltering && !!searchTerm.value); const displayValue = useDisplayValue({ items, placeholder: toRef(props, 'placeholder'), isMultiSelect: toRef(props, 'multiple'), selectedValues: cachedSelectedListboxOptions, }); const selectedValueItem = computed(() => { if (props?.multiple && Array.isArray(dropdownValue.value)) { return props.items.filter( ({ value }) => props?.value && (props?.value as BentoListboxMultiSelectValue).includes(value) ); } if (!props.multiple && props.staticCategories) { // Find the category that holds the selected value const category = props.items.find(categoryItem => categoryItem.items.some(item => item.value === dropdownValue.value) ); // Find the specific item within the category const selectedCategoryItem = category ? category.items.find(item => item.value === dropdownValue.value) : null; return selectedCategoryItem; } return props.items.find(({ value }) => value === dropdownValue.value); }); const selectedValueIndex = computed(() => { const index = filteredItems.value.findIndex(({ value }) => { return props.enableValueLabelPair ? (dropdownValue.value as BentoListboxSelectedValueLabelPair).value === value : dropdownValue.value === value; }); return index > -1 ? index : 0; }); const { isMultiLevelSelect, flattenedItemsList } = useMultiLevelItems(items); const isTreePattern = computed(() => isMultiLevelSelect.value && !props.staticCategories); const computedOptionRole = computed<BentoListboxItemRole>(() => (isTreePattern.value ? 'treeitem' : 'option')); const additionalItemsSelected = computed(() => { if (props.multiple) { const selectedItemsCount = Array.isArray(dropdownValue.value) ? dropdownValue.value.length : 0; const total = isMultiLevelSelect.value ? flattenedItemsList.value.length : items.value.length; if (selectedItemsCount === 0) { return null; } // Display count always - show "all" only when is not external filtering (hasMoreItems = true) if (!props.hasMoreItems && total > 0 && total === selectedItemsCount) { return t('all'); } return selectedItemsCount; } return null; }); // ARIA const ariaDescribedBy = computed( () => [ props.description ? descriptionId : null, ariaDescribedByAttribute.value, props.errorMessage ? errorId : null, ] .filter(Boolean) .join(' ') || null ); const listboxRef = computed(() => optionsContainerRef.value?.$el as HTMLDivElement); const { visibleDomOptions, updateVisibleDomOptions } = useVisibleDomOptions( listboxRef, filteredItems, computedOptionRole ); const openDropdown = () => { if (isReadOnly.value) { return; } isDropdownOpen.value = true; nextTick(() => { updateVisibleDomOptions(); }); }; const closeDropdown = () => { isDropdownOpen.value = false; }; const toggleDropdown = () => { if (isReadOnly.value) { return; } isDropdownOpen.value = !isDropdownOpen.value; nextTick(() => { updateVisibleDomOptions(); }); // Clear search if (isSearching.value) { searchTerm.value = ''; } }; const clickOutsideDropdown = () => { if (isSearching.value) { searchTerm.value = ''; } if (isDropdownOpen.value) { isDropdownOpen.value = false; // Reset the internal dropdown options state optionsContainerRef.value.onOutsideDropdownClick(); } }; const onOptionSelected = (selectedValue: BentoListboxOptions) => { // Clear and close the dropdown on single selection if (!props.multiple) { searchTerm.value = ''; isDropdownOpen.value = false; focus(); } setCachedValues(selectedValue); /** * Emit the value/label pair objects if enableValueLabelPair is enabled, * otherwise just emit the list of selected values (number or string) */ emitValue(cachedListboxSelectedValues.value); }; const emitShowMoreEvent = () => { emit(BentoDropdownEvent.SHOW_MORE); }; const textboxKeyboardNavigationListeners = useTextboxKeyboardNavigation( { inputContainerRef, optionsContainerRef, selectedValueIndex, isDropdownOpen, isDynamicFltering: toRef(props, 'dynamicFiltering'), items: visibleDomOptions, isMultiple: props.multiple, }, toggleDropdown, openDropdown, closeDropdown ); const listboxKeyboardNavigationListeners = useListboxKeyboardNavigation( { inputContainerRef, isDropdownOpen, }, closeDropdown ); const listboxListeners = { [BentoListboxEvent.CLOSE_DROPDOWN]: closeDropdown, [BentoListboxEvent.SELECT]: onOptionSelected, [BentoListboxEvent.SHOW_MORE]: emitShowMoreEvent, ...listboxKeyboardNavigationListeners, }; if (props.error) { deprecate( 'BentoDropdown "error" property', `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error. Having the field as "undefined" will hide/remove the error. <bento-dropdown errorMessage="Error message text" />`, '2.0.0' ); } if (props.size) { deprecate('BentoDropdown "size" property', `Do not use. Only 'default' size should be used.`, '2.0.0'); } if (props.value) { deprecate( 'BentoDropdown "value" property', `The use of "value" prop in "BentoDropdown" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } const focus = () => { inputContainerRef.value.focus(); }; watch( () => isDropdownOpen.value, (isOpen: boolean) => { if (isOpen) { emit('open'); } } ); defineExpose({ focus, }); </script> <script lang="ts"> /** * A Dropdown shows a selected option's. * Use a dropdown when you want users to select options * from a list of pre-defined options. * * @example * import { BentoDropdown } from '@adyen/bento-vue2'; * import type { BentoDropdownOptions } from '@adyen/bento-vue2' * * export default { * components: { BentoDropdown }, * template: ` * <bento-dropdown * v-model="selectedValue" * :disabled="false" * :multiple="true" * :isOptionsDisabled="option => option.value === 2" * :items="options" * /> * `, * setup() { * const selectedValue = ref(2) // Default value * const options: BentoDropdownOptions = [ * { label: 'Option 1', value: 1 }, * { label: 'Option 2', value: 2 }, * ]; * return { options, selectedValue }; * } * } */ export default defineComponent({ i18n: { messages }, name: 'b-dropdown', components: { DropdownInputDefault, DropdownInputSmall, }, model: { prop: 'modelValue' }, }); </script> <style lang="scss" scoped src="./dropdown.scss" /> 

package/dist/assets/components/empty-state/empty-state.docs.mdx

@@ -0,0 +1,115 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as EmptyStateStories from './empty-state.stories';
+
+<Meta of={EmptyStateStories} />
+
+# Empty state
+
+Empty states are moments in the user experience when there is nothing to display.
+
+This component can be used to provide:
+
+-   Information about system status
+-   Contextual learning cues
+-   Direct pathways for key tasks
+
+<Canvas of={EmptyStateStories.Default} />
+
+## Use Cases
+
+There are seven empty state types commonly used in our interface:
+
+-   **First touch**: When the user is onboarding or starting to use a product area for the first time.
+
+-   **No results found**: When the user’s search request does not deliver any results, either due to search parameters
+    or because the information doesn’t exist.
+
+-   **Page not available (access restricted)**: When the user’s role does not allow them access to an area in the
+    interface.
+
+-   **Wrong environment**: When the user can access multiple environments and clicks into an area that is not available
+    on one of those environments.
+
+-   **All done**: When the user has read, removed, or completed all items and there is nothing more to do.
+
+-   **Planned maintenance**: A static page displayed when the website or system is temporarily unavailable.
+
+## Variations
+
+### Full-page
+
+To be used in scenarios where the empty state is the primary focus of the page.
+
+_Examples: First touch, maintenance and page access._
+
+### Embedded
+
+To be used only when the page contains one large component (multiple components will use the basic variant).
+
+_Examples: Within the data grid when there are no filter results._
+
+### Basic
+
+To be used when multiple empty states can occur in a single page because the information is collected from different
+backend calls.
+
+_Example: dashboards, temporarily unavailable or broken._
+
+### Condensed
+
+To be used in components with limited space.
+
+_Example: When there are no results to show when searching within filters._
+
+## Modifiers
+
+### Image
+
+The illustration shown by the empty state `full-page` / `embedded` variants. You can refer to
+[this list of illustrations](https://www.figma.com/file/qSUFsdW9fjMev5nHHBfToj/Bento---Illustrations---Empty-states),
+which is mapped to following values:
+
+-   `1-generic-use`
+-   `2-generic-use`
+-   `3-generic-use`
+-   `4-generic-use`
+-   `adding-payment-methods`
+-   `adyen-giving`
+-   `internal-error`
+-   `no-results-found`
+-   `notifications-cleared`
+-   `page-not-found`
+-   `planned-maintenance`
+-   `referrals`
+-   `upload-files`
+-   `wrong-environment`
+
+## Accessibility
+
+Illustrations are considered decorative, they should be skipped by screen readers. Users should be able to:
+
+-   hear the component's label and description, and the purpose is clear;
+-   identify the component's role as an empty state.
+
+### Keyboard interaction
+
+A list of keyboard interactions is provided in the table below:
+
+| Keyboard interaction | Output                     |
+| -------------------- | -------------------------- |
+| `Tab`                | Moves focus to the action. |
+| `Space`/`Enter`      | Activates the action.      |
+
+### Roles, states and properties
+
+| ARIA attribute   | is automatic?                                             | fallback used | manual override                                                 |
+| ---------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------- |
+| `alt`            | Yes, set to `""` since the image is only decorative.      | -             | -                                                               |
+| `role="heading"` | Yes, through the semantic heading elements.               | -             | The user can pass a different element through `headingEl` prop. |
+| `role="button"`  | Yes, through the semantic `button` element in the action. | -             | -                                                               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=16462-6288&mode=design&t=q79EnMp4k59VirFh-0)
+-   [Illustrations](https://www.figma.com/file/qSUFsdW9fjMev5nHHBfToj/Bento---Illustrations---Empty-states)
+-   [WAI Images (decorative)](https://www.w3.org/WAI/tutorials/images/decorative/)

package/dist/assets/components/empty-state/empty-state.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoEmptyState from './empty-state.vue'; import { BentoEmptyStateImage, BentoEmptyStateVariant } from './empty-state.types'; const meta: Meta = { title: 'Empty state', component: BentoEmptyState, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'Default slot content', control: 'text', table: { type: { summary: 'VNode[]' } }, }, // Enum props variant: { options: Object.values(BentoEmptyStateVariant), mapping: BentoEmptyStateVariant, }, image: { options: Object.values(BentoEmptyStateImage), mapping: BentoEmptyStateImage, }, }, }; export default meta; type Story = StoryObj<typeof BentoEmptyState>; const DEFAULT_BUTTON_PROPS = { title: 'No results were found', default: 'Try a different term or reset search filters', // content slot variant: 'full-page', image: 'no-results-found', action: { title: 'Reset filters', event: () => action('action clicked')(), }, }; const defaultCode = ` <bento-empty-state title="No results were found" image="no-results-found" variant="full-page" :action="{ title: 'Reset filters', event: () => {} }" > Try a different term or reset search filters </bento-empty-state> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoEmptyState }, props: Object.keys(argTypes), template: ` <bento-empty-state v-bind="args"> {{ args.default }} </bento-empty-state> `, setup(props) { return { args: isVue2 ? props : _args }; }, }), args: DEFAULT_BUTTON_PROPS, parameters: storybookDocsParameter(defaultCode), };