@adyen/bento-mcp 0.0.0 → 0.1.1

package/dist/assets/components/date-range-picker/date-range-picker.docs.mdx

@@ -0,0 +1,168 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as DateRangePickerStories from './date-range-picker.stories';
+
+<Meta of={DateRangePickerStories} />
+
+# Date picker
+
+A date picker is a type of dropdown that allows users select either a singular date or a date range in a visual way.
+
+<Canvas withSource="closed">
+    <Story of={DateRangePickerStories.Default} />
+</Canvas>
+
+## Use Cases
+
+Use a DatePicker if:
+
+- You want the user to input a custom date
+
+### Do not use
+
+Don't use the `bento-date-picker` if:
+
+- You want to display a date. Use `bento-date` instead.
+
+## Variations
+
+### Singlar calendar
+
+Single date calendar. Only shows one calendar and allows for a single date to be selected or typed in when the date
+picker is opened.
+
+### Range calendar
+
+Range of dates calendar. Can show multiple calendars at the same time and allows to select a range of dates either
+through the form or by clicking over the desired range.
+
+### Month variant
+
+Shows calendar(s) by month/year instead of day/month. Useful for full month range selection, where days are trivial.
+
+## Modifiers
+
+### Quick select ranges
+
+<Canvas withSource="closed">
+    <Story of={DateRangePickerStories.RangeSelector} />
+</Canvas>
+
+When passing an array of dropdown items to the this property, a dropdown will appear that allows users to select a
+pre-selected range. Upon selection this will update the calendar range selected.
+
+If the user manually inputs a range, the range selector will be reset back to `Custom range` in the dropdown.
+
+There are two ways to configure dynamic "quick select" date ranges that update relative to the current time.
+
+1. Open-Ended Day-Based Ranges
+
+To create a dynamic range that spans full days (e.g., "Last three days," "Last week"), simply omit the `endDate` value
+in the `data` object. The range will automatically be calculated from your provided `startDate` up to the current
+moment.
+
+It's important that the startDate for these ranges is calculated from the beginning of the day (e.g., using a
+`startOfDay()` helper from the `date-fns` NPM package) to ensure full-day increments are selected.
+
+Example:
+
+```ts
+{
+    label: 'Last three days',
+    value: 'lastThreeDays',
+    data: {
+        // The range will be from the start of the day, 2 days ago, until NOW.
+        startDate: subDays(startOfDay(new Date()), 2),
+    },
+},
+{
+    label: 'Last week',
+    value: 'lastWeek',
+    data: {
+        startDate: subWeeks(startOfDay(CURRENT_DATE_AND_TIME), 1),
+    },
+},
+```
+
+2. Live, Time-Sensitive Ranges
+
+For more precise ranges that need to be current to the exact hour or minute (e.g., "Last 15 minutes," "Last 24 hours"),
+add the `isRelativeToNow: true` prop to the `data` object.
+
+When a user selects an option with this prop, the `startDate`is recalculated relative to the exact moment of the click.
+This "moves the start time up" to ensure the time window is perfectly accurate when selected. This is the preferred
+method for any time-based (non-full-day) ranges.
+
+Example:
+
+```typescript
+{
+    label: 'Last 15 min',
+    value: 'lastFifteenMin',
+    data: {
+        startDate: subMinutes(new Date(), 15),
+        isRelativeToNow: true, // Recalculates the start time on clicking the range dropdown item
+    },
+},
+{
+    label: 'Last 24 hours',
+    value: 'lastTwentyFourHours',
+    data: {
+        startDate: subHours(new Date(), 24),
+        isRelativeToNow: true, // Recalculates the start time on clicking the range dropdown item
+    },
+},
+```
+
+### Granularities
+
+<Canvas withSource="closed">
+    <Story of={DateRangePickerStories.Granularities} />
+</Canvas>
+
+By providing an array of granularity configurations, a segmented control will appear that allows users to select how
+granular should the date range be.
+
+The following granularity types are available:
+
+- `daily` - selection by days, the default granularity
+- `weekly` - selection by **full** weeks
+- `monthly` - selection by **full** months
+
+Selecting a different granularity will adjust the `min`/`max` calendar limits (if present).
+
+### Action buttons
+
+When you set `hasActions` to `true`, the date picker will display the `Apply` and `Cancel` buttons. This gives users the
+flexibility to select dates without immediately applying any changes. The behavior is as follows:
+
+- `Selecting Dates`: Users can choose dates freely, but no changes will be saved or applied until the `Apply` button is
+  pressed.
+- `No Automatic Updates`: Errors will not be applied, and no input events will be triggered until the `Apply` button is
+  clicked.
+- `Canceling Changes`: If the date picker is closed by clicking outside, pressing `Escape`, or selecting `Cancel`, none
+  of the selected dates will be applied.
+
+> ⚠️ **Deprecation Notice**: This modifier is deprecated as of its introduction and will be removed in release
+> **2.0.0**. However, starting with **2.0.0**, this behavior will become the default, meaning that `hasActions` will
+> always be set to `true`.
+
+### Tooltip
+
+A tooltip with extra information for the field can be rendered by passing the desired information to the `tooltipText`
+prop.
+
+### Error Message
+
+Renders the date range picker in an error state and displays the error message beneath the input field.
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                         | fallback used                              | manual override |
+| -------------- | ------------------------------------- | ------------------------------------------ | --------------- |
+| label          | Yes, label property                   | If no label then a generate label is added | -               |
+| role           | Yes, `combobox` and `dialog` are used | -                                          | -               |
+| describedby    | Yes, `description` and `error`s       | -                                          | -               |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=5046%3A73755)

package/dist/assets/components/date-range-picker/date-range-picker.stories.ts

@@ -0,0 +1 @@
+import { type Meta, type StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { format } from 'date-fns/format'; import { addMonths } from 'date-fns/addMonths'; import { endOfMonth } from 'date-fns/endOfMonth'; import { endOfWeek } from 'date-fns/endOfWeek'; import { lastDayOfQuarter } from 'date-fns/lastDayOfQuarter'; import { startOfQuarter } from 'date-fns/startOfQuarter'; import { startOfWeek } from 'date-fns/startOfWeek'; import { subDays } from 'date-fns/subDays'; import { subMonths } from 'date-fns/subMonths'; import { subQuarters } from 'date-fns/subQuarters'; import { subWeeks } from 'date-fns/subWeeks'; import { BentoDateRangePickerFirstDayOfWeek } from './date-range-picker.types'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoDateRangePicker from './date-range-picker.vue'; import BentoDateRangePickerDefaultExample from './__tests__/date-range-picker-default-example.vue?raw'; import { startOfDay, subHours, subMinutes } from 'date-fns'; const meta: Meta = { title: 'Date picker/Range dates', component: BentoDateRangePicker, argTypes: { // Properties maxRange: { name: 'maxRange', defaultValue: undefined, description: 'Set a maximum number of dates to be selectable by the range.', table: { type: { summary: 'number' } }, control: { type: 'number', }, }, min: { control: { type: 'date' } }, max: { control: { type: 'date' } }, // Funcs isDateDisabled: { name: 'isDateDisabled', defaultValue: '', description: 'Disables the dates that meet the criteria defined in the function.', table: { type: { summary: '(currentDate: Date) => boolean' } }, control: { disable: true }, }, // Enum props firstDayOfWeek: { options: Object.keys(BentoDateRangePickerFirstDayOfWeek) .map(key => BentoDateRangePickerFirstDayOfWeek[key]) .filter(value => typeof value !== 'string') as Array<number>, control: { type: 'select', }, }, // Events input: { name: 'input', defaultValue: '', description: 'Triggered when a date is selected', table: { type: { summary: '(selectedDate: Date) => void' } }, 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 BentoDateRangePicker>; // To be used by as the current time across all date filters const CURRENT_DATE_AND_TIME = new Date(); export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDateRangePicker }, props: Object.keys(argTypes), template: ` <div style="max-width: 380px"> <bento-date-range-picker v-bind="args" :model-value="selectedDate" @update:model-value="onDateChanged" /> </div> `, setup(props) { const selectedDate = ref((isVue2 ? props : _args).modelValue); const onDateChanged = (newSelectedDate: Date) => { selectedDate.value = newSelectedDate; action('input')(selectedDate); action('update:model-value')(selectedDate); }; return { // Values selectedDate, args: isVue2 ? props : _args, // Events onDateChanged, }; }, }), args: { allowTimeInput: true, description: 'Supporting text', label: 'Label', firstDayOfWeek: 1, numberOfMonths: 2, maxRange: 0, optional: true, required: true, isDateDisabled: (date: Date) => date.valueOf() > Date.now(), modelValue: { startDate: subDays(new Date(), 3), endDate: new Date(), range: 'lastFourDays' }, hasActions: false, }, parameters: storybookDocsParameter(BentoDateRangePickerDefaultExample), }; export const RangeSelector = { ...Default, args: { ...Default.args, modelValue: { startDate: subDays(startOfDay(CURRENT_DATE_AND_TIME), 1), endDate: CURRENT_DATE_AND_TIME, range: 'lastTwoDays', }, quickSelectRanges: [ { label: 'Last 15 min', value: 'lastFifteenMin', data: { startDate: subMinutes(CURRENT_DATE_AND_TIME, 15), isRelativeToNow: true, }, }, { label: 'Last 24 hours', value: 'lastTwentyFourHours', data: { startDate: subHours(CURRENT_DATE_AND_TIME, 24), isRelativeToNow: true, }, }, { label: 'Last 2 days', value: 'lastTwoDays', data: { startDate: subDays(startOfDay(CURRENT_DATE_AND_TIME), 1) }, }, { label: 'Last 3 days', value: 'lastThreeDays', data: { startDate: subDays(startOfDay(CURRENT_DATE_AND_TIME), 2) }, }, { label: 'Last 4 days', value: 'lastFourDays', data: { startDate: subDays(startOfDay(CURRENT_DATE_AND_TIME), 3) }, }, { label: 'Last 24 hours', value: 'lastTwentyFourHours', data: { startDate: subHours(CURRENT_DATE_AND_TIME, 24), isRelativeToNow: true, }, }, { label: 'Last 2 days', value: 'lastTwoDays', data: { startDate: subDays(startOfDay(CURRENT_DATE_AND_TIME), 1) }, }, { label: 'Last 3 days', value: 'lastThreeDays', data: { startDate: subDays(startOfDay(CURRENT_DATE_AND_TIME), 2) }, }, { label: 'Last 4 days', value: 'lastFourDays', data: { startDate: subDays(startOfDay(CURRENT_DATE_AND_TIME), 3) }, }, ], }, parameters: storybookDocsParameter(` <bento-date-range-picker v-model="selectedDate" label="Label" description="Supporting text" :first-day-of-week="BentoDateRangePickerFirstDayOfWeek.SUNDAY" isDateDisabled="(currentDate: Date) => boolean" maxRange required optional disabled hasActions :quick-select-ranges="[ { label: 'Last 2 days', value: 'lastTwoDays', data: { startDate: subDays(new Date(), 1) }, }, { label: 'Last 3 days', value: 'lastThreeDays', data: { startDate: subDays(new Date(), 2), endDate: new Date() }, }, { label: 'Last 4 days', value: 'lastFourDays', data: { startDate: subDays(new Date(), 3), endDate: new Date() }, }, ]" /> `), }; const GRANULARITIES_VALUE = { startDate: startOfWeek(subWeeks(new Date(), 1), { weekStartsOn: Default.args.firstDayOfWeek }), endDate: endOfWeek(subWeeks(new Date(), 1), { weekStartsOn: Default.args.firstDayOfWeek }), granularity: 'weekly', }; const granularitiesCode = ` <template> <bento-date-range-picker v-model="selectedDate" label="Label" description="Supporting text" :allow-time-input="false" :first-day-of-week="BentoDateRangePickerFirstDayOfWeek.MONDAY" :granularities="granularities" :max="new Date('${format(subDays(endOfMonth(new Date()), 2), 'yyyy-MM-dd')}')" hasActions /> </template> <script setup lang="ts"> import { BentoDateRangePicker, BentoDateRangePickerFirstDayOfWeek, type BentoDateRangePickerGranularityConfig, type BentoDateRangePickerValue, } from "@adyen/bento-vue2" const selectedDate = ref<BentoDateRangePickerValue>({ startDate: new Date('${format(GRANULARITIES_VALUE.startDate, 'yyyy-MM-dd')}'), endDate: new Date('${format(GRANULARITIES_VALUE.endDate, 'yyyy-MM-dd')}'), granularity: 'monthly', }); const granularities: Array<BentoDateRangePickerGranularityConfig> = [ { type: 'daily' }, { type: 'weekly' }, { type: 'monthly' }, }] </script> `; export const Granularities = { ...Default, args: { allowTimeInput: false, description: 'Supporting text', label: 'Label', numberOfMonths: 2, min: subMonths(endOfMonth(new Date()), 6), max: subDays(endOfMonth(new Date()), 2), granularities: [ { type: 'daily', }, { type: 'weekly', }, { type: 'monthly', }, ], modelValue: GRANULARITIES_VALUE, quickSelectRanges: [ { label: 'Last 2 days', value: 'lastTwoDays', data: { startDate: subDays(new Date(), 1), endDate: new Date(), granularity: 'daily' }, }, { label: 'Last quarter', value: 'lastQuarter', data: { startDate: startOfQuarter(subQuarters(new Date(), 1)), endDate: lastDayOfQuarter(subQuarters(new Date(), 1)), granularity: 'monthly', }, }, ], hasActions: true, }, parameters: storybookDocsParameter(granularitiesCode), }; export const MonthVariant = { ...Default, args: { ...Default.args, allowTimeInput: false, variant: 'month', modelValue: { startDate: subMonths(new Date(), 2), endDate: new Date(), granularity: 'monthly' }, isDateDisabled: null, max: addMonths(new Date(), 6), granularities: [{ type: 'monthly' }, { type: 'quarterly' }], quickSelectRanges: [ { label: 'Last 3 months', value: 'lastTwoMonths', data: { startDate: subMonths(new Date(), 3), endDate: subMonths(new Date(), 1), granularity: 'monthly', }, }, { label: 'Last quarter', value: 'lastQuarter', data: { startDate: startOfQuarter(subQuarters(new Date(), 1)), endDate: lastDayOfQuarter(subQuarters(new Date(), 1)), granularity: 'quarterly', }, }, ], }, parameters: storybookDocsParameter(` <bento-date-range-picker v-model="selectedDate" label="Label" description="Supporting text" isDateDisabled="(currentDate: Date) => boolean" maxRange required optional disabled hasActions variant="month" /> `), }; 

package/dist/assets/components/date-range-picker/date-range-picker.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="closeDateRangePicker" class="b-date-range-picker"> <!-- Label --> <field-label v-if="label" :id="labelId" :label="label" :tooltip-text="tooltipText" :optional="optional" :required="required" /> <!-- Input --> <div @keydown.enter="onEnterPressedOverInput"> <dropdown-input-default ref="inputContainerRef" always-combobox-is-input :ariaControls="datePickerContainerId" :ariaExpanded="isDateRangePickerOpen" :aria-labelledby="label ? labelId : null" :aria-describedby="ariaDescribedBy" :disabled="disabled" :is-invalid="!!errorMessage || shouldDisplayError" :open="isDateRangePickerOpen" :display-value="displayedDateValue" :readonly="isReadOnly" @open="openDateRangePicker" @clear="clearDateRangePickerValue" @close="closeDateRangePicker" /> </div> <!-- Error Messages --> <error-message v-if="shouldDisplayError" :id="dateErrorId" :error-message="t('provideDateInAFormat')" class="b-date-range-picker__error-message" /> <error-message v-if="!!errorMessage" :id="errorId" :error-message="errorMessage" class="b-date-range-picker__error-message" /> <!-- Description --> <bento-typography v-if="description" :id="descriptionId" class="b-date-range-picker__description" :class="descriptionConditionalClasses" el="span" > {{ description }} </bento-typography> <!-- Calendar container --> <bento-popover v-if="inputContainerRef" :id="datePickerContainerId" class="b-date-range-picker__container" :open="isDateRangePickerOpen" :target-element="inputContainerRef" :aria-label="popoverAriaLabel" position="bottom-start" without-space fit-content trap-all overflow-visible @keydown.esc.native="closeDateRangePicker" > <date-range-picker-calendar :allow-time-input="withTimeInput" :quick-select-ranges="adjustedQuickSelectRanges" :value="internalModelValue" :first-day-of-week="firstDayOfWeek" :granularities="granularities" :is-date-disabled="isDateDisabled" :max-range="maxRange" :min="min" :max="max" :number-of-months="computedNumberOfMonths" :show-end-date-on-open="showEndDateOnOpen" :date-form-data="displayedTextInputValue" :variant="variant" @custom-range="onRangeSelectorInput" @input="onDateRangePickerInput" @error="onDateRangePickerError" @form-date="onDateRangePickerFormDateInputUpdate" > <template v-if="hasActions" #actions> <bento-divider /> <div class="b-date-range-picker__footer"> <bento-button-actions :actions="rangePickerButtonActions" :layout="BentoButtonActionsLayout.SPACE_BETWEEN" /> </div> </template> </date-range-picker-calendar> </bento-popover> </div> </template> <script setup lang="ts"> import { computed, onMounted, ref, toRaw, toRef, watch } from 'vue'; import { useBreakpoints } from '@vueuse/core'; // Components import { BentoButtonActions, BentoButtonActionsLayout } from '../button'; import { BentoDivider } from '@/components/divider'; import { BentoPopover } from '@/components/popover'; import { BentoTypography } from '../typography'; import { DateRangePickerCalendar } from './components/date-range-picker-calendar'; import { DropdownInputDefault } from '@/components/dropdown/components'; import { ErrorMessage, FieldLabel } from '@/internal'; // Utils import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import { dateToInputDateString, dateToTimeInputString } from '@/utils/ts/format-date'; // Composables import { useDateRangePickerCalendarText } from './composables/use-date-range-picker-calendar-text'; import { useFormLayoutFieldLoading } from '@/composables'; // Directives import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives'; // Types import { type BentoDateRangePickerEmits, type BentoDateRangePickerProps, type BentoDateRangePickerValue, } from './date-range-picker.types'; import { type DateRangePickerCalendarFormData, type DateRangePickerCalendarRangeSelectorItem, } from './components/date-range-picker-calendar/date-range-picker-calendar.types'; import { deprecate } from '@/utils/ts/deprecate'; import messages from './messages.json'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; type MessageSchema = (typeof messages)['en-US']; const emit = defineEmits<BentoDateRangePickerEmits>(); const props = withDefaults(defineProps<BentoDateRangePickerProps>(), { description: undefined, disabled: false, errorMessage: null, firstDayOfWeek: 1, // Monday hasActions: false, isDateDisabled: undefined, label: undefined, max: null, maxRange: null, min: null, modelValue: null, numberOfMonths: undefined, optional: false, placeholder: null, quickSelectRanges: undefined, readonly: false, required: false, showEndDateOnOpen: false, tooltipText: null, value: null, variant: undefined, // Default will be set by @/internal/calendar }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const datePickerContainerId = generateUid('bento-date-range-picker-container'); const labelId = generateUid('bento-date-range-picker-label'); const descriptionId = generateUid('bento-date-range-picker-description'); const errorId = generateUid('bento-date-range-picker-error'); const dateErrorId = generateUid('bento-date-range-picker-date-error'); const popoverAriaLabel = computed(() => props.label || t('dateRangePicker', { name: datePickerContainerId })); const breakpoints = useBreakpoints({ none: 0, one: 710, // width of date range picker with one panes two: 1030, // width of date range picker with two panes three: 1290, // width of date range picker with three panes }); const computedNumberOfMonths = computed(() => { const activeBreakpoint = breakpoints.active().value; const breakpointToCalendarPanesMap = { none: 0, one: 1, two: 2, }; if (activeBreakpoint in breakpointToCalendarPanesMap) { const maxPanes = breakpointToCalendarPanesMap[activeBreakpoint as keyof typeof breakpointToCalendarPanesMap]; // If numberOfMonths is not provided, use the max panes for the breakpoint. // Otherwise, use the smaller of the two values. return props.numberOfMonths === undefined ? maxPanes : Math.min(props.numberOfMonths, maxPanes); } // Default case for 'three' and larger breakpoints, respect user-provided numberOfMonths. return props.numberOfMonths; }); const adjustedQuickSelectRanges = computed<Array<DateRangePickerCalendarRangeSelectorItem>>(() => { return ( props?.quickSelectRanges && props.quickSelectRanges.map((range: DateRangePickerCalendarRangeSelectorItem) => { const timeDiff = !range.data.endDate ? new Date(Date.now()).getTime() - range.data.startDate.getTime() : undefined; return { ...range, data: { ...range.data, // Adding timeDifference to calculate an up-to-date endDate on range selection timeDifference: timeDiff, }, }; }) ); }); const isDateIncorrect = ref(false); const inputContainerRef = ref(null); const isDateRangePickerOpen = ref(false); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits(emit); watch( () => props.disabled, () => { // Close date picker popover if it's opened when it's disabled if (props.disabled && isDateRangePickerOpen.value) { isDateRangePickerOpen.value = false; } } ); const internalModelValue = computed(() => props.modelValue || props.value); const shouldDisplayError = computed(() => { if (props.hasActions) { return !isApplyDisabled.value && isDateIncorrect.value; } return isDateIncorrect.value; }); const descriptionConditionalClasses = computed(() => ({ 'b-date-range-picker__description--error': !!props.errorMessage || shouldDisplayError.value, })); const isMonthVariant = computed(() => props.variant === 'month'); const withTimeInput = computed(() => props.allowTimeInput && props.variant !== 'month'); const { dateDisplayValue, textInputDisplayValue, formatTextInputDisplayValue } = useDateRangePickerCalendarText({ datePickerValue: internalModelValue, isDateIncorrect, quickSelectRanges: adjustedQuickSelectRanges, isMonthVariant, withTimeInput, placeholder: toRef(props, 'placeholder'), }); const ariaDescribedBy = computed( () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''} ${ isDateIncorrect.value ? dateErrorId : '' }`.trim() || null ); const closeDateRangePicker = () => { isDateRangePickerOpen.value = false; }; const openDateRangePicker = () => { isDateRangePickerOpen.value = true; formatTextInputDisplayValue(); }; /* * Used when `hasActions` is set to true */ const localDateDisplayValue = ref(dateDisplayValue.value); const localTextInputDisplayValue = ref<DateRangePickerCalendarFormData>( // textInputDisplayValue is a reactive object structuredClone(toRaw(textInputDisplayValue)) ); const selectedDate = ref<BentoDateRangePickerValue>(props.modelValue ?? props.value); const isApplyDisabled = ref(true); const displayedTextInputValue = computed(() => props.hasActions ? localTextInputDisplayValue.value : textInputDisplayValue ); const displayedDateValue = computed(() => props.hasActions ? localDateDisplayValue.value : dateDisplayValue.value ); onMounted(() => { if (!props.hasActions) { deprecate( 'BentoDateRangePicker "hasActions" property', `Set the BentoDateRangePicker "hasActions" property true which will display the "Apply" and "Cancel" buttons. This will be the default behavior in the v2 and "hasActions" will be removed.`, '2.0.0' ); } if (props.value) { deprecate( 'BentoDateRangePicker "value" property', 'The use of "value" prop in "BentoDateRangePicker" is no longer supported. Use the "v-model" or "model-value" property instead.', '2.0.0' ); } if ( props.granularities && props.variant !== 'month' && props.granularities.find(({ type }) => type === 'quarterly') ) { throw new Error('Quarterly granularity is only supported by BentoDateRangePicker with variant: "month"'); } }); // On update for the value we need to update all the locally stored data watch([() => props.value, () => props.modelValue], () => { localDateDisplayValue.value = dateDisplayValue.value; localTextInputDisplayValue.value = structuredClone(toRaw(textInputDisplayValue)); }); const rangePickerButtonActions = computed(() => [ { title: t('apply'), event: () => { emitValue(selectedDate.value); closeDateRangePicker(); isApplyDisabled.value = true; }, disabled: isApplyDisabled.value, }, { title: t('cancel'), event: closeDateRangePicker, }, ]); watch(selectedDate, date => { // skip emit until Apply button is clicked if (props.hasActions) { isApplyDisabled.value = isDateIncorrect.value; return; } emitValue(date); }); const onDateRangePickerInput = (selectedRange: BentoDateRangePickerValue) => { // Reset the errors when the date is correct isDateIncorrect.value = false; textInputDisplayValue.startDate = dateToInputDateString(selectedRange.startDate); textInputDisplayValue.endDate = dateToInputDateString(selectedRange.endDate); textInputDisplayValue.startTime = dateToTimeInputString(selectedRange.startDate); textInputDisplayValue.endTime = dateToTimeInputString(selectedRange.endDate); selectedDate.value = selectedRange; }; const clearDateRangePickerValue = async () => { if (isDateIncorrect.value) { isDateIncorrect.value = false; } selectedDate.value = null; }; const onEnterPressedOverInput = () => { // open the datepicker if (!isDateRangePickerOpen.value) { isDateRangePickerOpen.value = true; return; } // Close the date picker if the date is correct and it is open if (!isDateIncorrect.value) { isDateRangePickerOpen.value = false; } }; const onDateRangePickerFormDateInputUpdate = (dateFormDate: DateRangePickerCalendarFormData) => { isDateIncorrect.value = false; if (dateFormDate.startTime) { textInputDisplayValue.startTime = dateFormDate.startTime; } if (dateFormDate.endTime) { textInputDisplayValue.endTime = dateFormDate.endTime; } }; const onDateRangePickerError = dateTextInput => { isDateIncorrect.value = true; textInputDisplayValue.startDate = dateTextInput.startDate; textInputDisplayValue.endDate = dateTextInput.endDate; // Remove current date range selection selectedDate.value = { startDate: null, endDate: null }; }; const onRangeSelectorInput = (quickSelectRanges?: BentoDateRangePickerValue) => { if (quickSelectRanges) { textInputDisplayValue.startDate = dateToInputDateString(quickSelectRanges.startDate); textInputDisplayValue.endDate = dateToInputDateString(quickSelectRanges.endDate); textInputDisplayValue.startTime = dateToTimeInputString(quickSelectRanges.startDate); textInputDisplayValue.endTime = dateToTimeInputString(quickSelectRanges.endDate); selectedDate.value = quickSelectRanges; } }; </script> <script lang="ts"> /** * Date range picker selector. * * @example * import { BentoDateRangePicker } from '@adyen/bento-vue2'; * * export default { * components: { BentoDateRangePicker }, * template: ` * <bento-date-range-picker * label="Label" * description="Supporting text" * required * optional * disabled * @input="onDateChanged" * v-model="selectedDate" * /> * `, * setup() { * const selectedDate = ref(new Date()); // reactive({ startDate: new Date(), endDate: new Date() }) * return { * selectedDate, * } * } * } */ export default { i18n: { messages }, name: 'bento-date-range-picker', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./date-range-picker.scss" /> 

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

@@ -0,0 +1,27 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as DividerStories from './divider.stories';
+
+<Meta of={DividerStories} />
+
+# Divider
+
+Dividers are thin lines that help separate content and group them visually into sections.
+
+<Canvas withSource="closed">
+    <Story of={DividerStories.Default} />
+</Canvas>
+
+## Use Cases
+
+The Divider should be used sparingly to avoid creating unnecessary clutter.
+
+- You can adjust the length according to the content and the sections you want to group.
+- You can adjust to span across an entire section.
+
+## Variant
+
+The `variant` prop changes the orientation of the divider by taking the value `vertical` or `horizontal`.
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=10868-71721&mode=design&t=s6M1Y5NDrkUC5q5Z-0)

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

@@ -0,0 +1 @@
+import BentoDivider from './divider.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoDividerVariant } from './divider.types'; const meta: Meta = { title: 'Divider', component: BentoDivider, argTypes: { variant: { options: Object.values(BentoDividerVariant), mapping: BentoDividerVariant, table: { defaultValue: { summary: BentoDividerVariant.HORIZONTAL }, }, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoDivider>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDivider }, props: Object.keys(argTypes), template: ` <div style="height: 50px;"> <bento-divider v-bind="args" /> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter('<bento-divider variant="horizontal" />'), }; 

package/dist/assets/components/divider/divider.vue

@@ -0,0 +1 @@
+<template> <div class="b-divider"> <div v-if="isVerticalVariant" role="separator" aria-orientation="vertical" class="b-divider__rule b-divider__rule--vertical" :class="conditionalClasses" ></div> <hr v-else class="b-divider__rule b-divider__rule--horizontal" :class="conditionalClasses" /> </div> </template> <script setup lang="ts"> import { computed, inject, ref } from 'vue'; import { DIVIDER_INVERSE_INJECTION_KEY } from './divider.keys'; import { type BentoDividerProps, BentoDividerVariant } from './divider.types'; const props = withDefaults(defineProps<BentoDividerProps>(), { variant: BentoDividerVariant.HORIZONTAL, }); const isInverseColorSet = inject(DIVIDER_INVERSE_INJECTION_KEY, ref(false)); const isVerticalVariant = computed(() => props.variant === BentoDividerVariant.VERTICAL); const conditionalClasses = computed(() => ({ 'b-divider--inverse': isInverseColorSet.value, })); </script> <script lang="ts"> /** * Divider component is a thin line that helps separate content and group them visually into sections. * * @example * import { BentoDivider } from '@adyen/bento-vue2'; * * export default { * components: { BentoDivider }, * template: `<bento-divider />` * } */ export default {}; </script> <style lang="scss" scoped src="./divider.scss" /> 

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

@@ -0,0 +1,61 @@
+import { Canvas, Meta, Story, Source } from '@storybook/blocks';
+import * as DraggableHandleStories from './draggable-handle.stories';
+
+<Meta title="Docs" of={DraggableHandleStories} />
+
+# Draggable Handle
+
+The `bento-draggable-handle` component is an essential part of the `bento-draggable` component. It provides a handle for
+users to grab and drag items, and it includes a menu with actions using a keyboard, ensuring accessibility.
+
+<Canvas withSource="closed">
+    <Story of={DraggableHandleStories.Default} />
+</Canvas>
+
+## Variations
+
+### Up and Down
+
+The default variant, `up-and-down`, provides menu options for vertical reordering: "Move up", "Move down", "Move to
+top", and "Move to bottom". This is suitable for lists.
+
+<Canvas withSource="closed">
+    <Story of={DraggableHandleStories.Default} />
+</Canvas>
+
+### All Directions
+
+The `all-directions` variant provides menu options for both vertical and horizontal reordering, adding "Move left" and
+"Move right" actions. This is suitable for grid layouts.
+
+## Modifiers
+
+### Condensed
+
+The `condensed` modifier reduces the padding of the handle, making it smaller. This is useful in dense interfaces like
+tables.
+
+### Label
+
+The `label` modifier provides an accessible name for the handle, which is announced by screen readers. It is crucial for
+accessibility to provide a meaningful label that identifies the item being moved.
+
+## Events
+
+The component emits events when a user selects a move action from the menu. The parent component should listen for these
+events and implement the logic to reorder the items.
+
+| Event         | Payload | Description                                                                       |
+| ------------- | ------- | --------------------------------------------------------------------------------- |
+| `move-up`     | `void`  | Emitted when the "Move up" action is fired.                                       |
+| `move-down`   | `void`  | Emitted when the "Move down" action is fired.                                     |
+| `move-left`   | `void`  | Emitted when the "Move left" action is fired. (Only in `all-directions` variant)  |
+| `move-right`  | `void`  | Emitted when the "Move right" action is fired. (Only in `all-directions` variant) |
+| `move-top`    | `void`  | Emitted when the "Move to top" action is fired.                                   |
+| `move-bottom` | `void`  | Emitted when the "Move to bottom" action is fired.                                |
+
+## Accessibility
+
+The `bento-draggable-handle` is crucial for making draggable lists accessible. It ensures that users who rely on
+keyboard navigation or screen readers can reorder items. The `label` prop should always be provided to give context to
+screen reader users about which item they are moving.

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

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoDraggableHandle from './draggable-handle.vue'; import DraggableHandleDefaultExample from './__tests__/draggable-handle-default-example.vue?raw'; const meta: Meta = { title: 'Draggable handle', component: BentoDraggableHandle, argTypes: { condensed: { control: 'boolean', }, }, }; export default meta; type Story = StoryObj<typeof BentoDraggableHandle>; const DEFAULT_LABEL = 'Draggable element'; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDraggableHandle }, props: Object.keys(argTypes), template: ` <bento-draggable-handle v-bind="args" @move-up="clickedAction('move-up')" @move-down="clickedAction('move-down')" @move-right="clickedAction('move-right')" @move-left="clickedAction('move-left')" @move-top="clickedAction('move-top')" @move-bottom="clickedAction('move-bottom')" /> `, setup(props) { const clickedAction = (actionName: string) => action(actionName)(); return { // Values args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { label: DEFAULT_LABEL, }, parameters: storybookDocsParameter(DraggableHandleDefaultExample), }; 

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

@@ -0,0 +1 @@
+<template> <bento-menu class="b-draggable-handle" :data="menuData" :menu-width="250" :button="buttonComputedProps"> <template #iconLeft> <span class="b-draggable-handle__icon"> <grab-icon aria-hidden="true" /> </span> </template> </bento-menu> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoMenu, type BentoMenuItem, type BentoMenuProps } from '@/components/menu'; import { type BentoDraggableHandleProps } from './draggable-handle.types'; import { useI18n } from '@/utils/ts/i18n'; import GrabIcon from '@adyen/ui-assets-icons-16/vue/grab'; import ArrowTopIcon from '@adyen/ui-assets-icons-16/vue/arrow-top'; import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left'; import ArrowRightIcon from '@adyen/ui-assets-icons-16/vue/arrow-right'; import ArrowBottomIcon from '@adyen/ui-assets-icons-16/vue/arrow-bottom'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoDraggableHandleProps>(), { condensed: false, disabledMenus: () => ({}), variant: 'up-and-down', }); const emit = defineEmits<{ /** * Emitted when the "Move to bottom" action is fired. */ (e: 'move-bottom'): void; /** * Emitted when the "Move down" action is fired. */ (e: 'move-down'): void; /** * Emitted when the "Move left" action is fired. (Only in `all-directions` variant) */ (e: 'move-left'): void; /** * Emitted when the "Move right" action is fired. (Only in `all-directions` variant) */ (e: 'move-right'): void; /** * Emitted when the "Move to top" action is fired. */ (e: 'move-top'): void; /** * Emitted when the "Move up" action is fired. */ (e: 'move-up'): void; }>(); const buttonComputedProps = computed( () => ({ 'aria-label': t('reorderLabel', { label: props.label }), condensed: props.condensed, variant: 'tertiary', }) as BentoMenuProps['button'] ); /** * Renders the menus for the draggable handle. */ const menuData = computed(() => { const MENUS: { [key: string]: BentoMenuItem; } = { up: { text: t('moveUp'), handler: () => emit('move-up'), disabled: props.disabledMenus.up, icon: ArrowTopIcon, }, down: { text: t('moveDown'), handler: () => emit('move-down'), disabled: props.disabledMenus.down, icon: ArrowBottomIcon, }, left: { text: t('moveLeft'), handler: () => emit('move-left'), disabled: props.disabledMenus.left, icon: ArrowLeftIcon, }, right: { text: t('moveRight'), handler: () => emit('move-right'), disabled: props.disabledMenus.right, icon: ArrowRightIcon, }, top: { text: t('moveToTheTop'), handler: () => emit('move-top'), disabled: props.disabledMenus.top, icon: ArrowTopIcon, }, bottom: { text: t('moveToTheBottom'), handler: () => emit('move-bottom'), disabled: props.disabledMenus.bottom, icon: ArrowBottomIcon, }, }; // Render the menus and dividers according to the variant return props.variant === 'up-and-down' ? [ MENUS.up, // Divider added after "Move down" { ...MENUS.down, addDivider: true, }, MENUS.top, MENUS.bottom, ] : [ MENUS.up, MENUS.down, MENUS.left, // Divider added after "Move right" { ...MENUS.right, addDivider: true, }, MENUS.top, MENUS.bottom, ]; }); </script> <script lang="ts"> /** * Bento drag and drop handle component. * * @example * import { BentoDraggableHandle } from '@adyen/bento-vue2'; * * export default { * components: { BentoDraggableHandle }, * template: ` * <bento-draggable-handle * bottom * condensed * down * left * right * top * up * \@move-bottom="moveBottom(index)" * \@move-down="moveDown(index)" * \@move-left="moveLeft(index)" * \@move-right="moveRight(index)" * \@move-top="moveTop(index)" * \@move-up="moveUp(index)" * /> * `, * setup() { * const moveBottom = () => {} * const moveDown = () => {} * const moveLeft = () => {} * const moveRight = () => {} * const moveTop = () => {} * const moveUp = () => {} * } * } */ export default { i18n: { messages }, name: 'bento-draggable-handle', }; </script> <style lang="scss" scoped src="./draggable-handle.scss" /> 

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

@@ -0,0 +1 @@
+<template> <div :class="$attrs.class" data-testid="textbox-wrapper" @click="onToggleDropdown" @keydown.escape="onCloseDropdown" > <bento-typography class="b-dropdown-base-textbox" :class="conditionalClasses" el="div" data-testid="base-textbox" > <input v-if="shouldShowInput" v-bind="ariaAttributes" :id="textboxId" ref="textbox" class="b-dropdown-base-textbox__input" role="combobox" type="text" aria-autocomplete="list" size="1" :value="open ? value : displayValue" :disabled="disabled ? true : null" :readonly="readonly" :required="isRequired" @keydown="$emit(DropdownBaseTextboxEvent.KEYDOWN, $event)" @keydown.enter="onToggleDropdown" @input="onInputEvent" /> <div v-else :id="textboxId" v-bind="ariaAttributes" ref="textbox" class="b-dropdown-base-textbox__input" :class="comboboxConditionalClasses" :aria-readonly="readonly ? 'true' : null" role="combobox" :tabindex="disabled ? -1 : 0" > <template v-if="shouldShowSingleSelectSlot"> <slot v-if="hasSlot('display-value')" v-bind="selectedValueItem" name="display-value"></slot> <slot v-else v-bind="selectedValueItem"> {{ displayValue }} </slot> </template> <template v-else-if="shouldShowMultipleSlot"> <div class="b-dropdown-base-textbox__input-multiple-selected"> <div v-for="singleItem of selectedValueItems" :key="singleItem.value"> <div class="b-dropdown-base-textbox__input-selected-element"> <slot v-bind="singleItem"> {{ displayValue }} </slot> </div> </div> </div> </template> <template v-else>{{ displayValue }}</template> </div> <span v-if="additionalItemsSelected" class="b-dropdown-base-textbox__additional-items"> {{ additionalItemsSelected }} </span> <span v-if="hasSlot('icon') && !isFiltering" class="b-dropdown-base-textbox__icon" aria-hidden="true"> <slot name="icon"></slot> </span> <span v-if="isFiltering" class="b-dropdown-base-textbox__clear-search" :tabindex="disabled ? -1 : 0" data-testid="clear-search-button" @click.stop="onClearSearch" @keydown.enter.stop="onClearSearch" @keyup.space="onClearSearch" > <cross-circle-fill-small-icon v-if="size === BentoDropdownSize.SMALL" :svg-title="t('clearSearch')" /> <cross-circle-fill-icon v-else :svg-title="t('clearSearch')" /> </span> </bento-typography> </div> </template> <script setup lang="ts"> import { computed, defineComponent, nextTick, type PropType, ref, useAttrs, useSlots, watch } from 'vue'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import { useHasSlot } from '@/composables'; import { BentoTypography } from '@/components/typography'; import { debounce } from '@/utils/ts/debounce'; import { type Booleanish } from '@/types/prop-types'; import { type BentoListboxOptionItem } from '@/types/listbox'; import type { HTMLAttributes } from 'vue/types/jsx.d.ts'; import { DropdownBaseTextboxEvent, DropdownBaseTextboxState } from './dropdown-base-textbox.types'; import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small'; import { BentoDropdownSize } from '@/components/dropdown/dropdown.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const attrs = useAttrs(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const props = defineProps({ /** * The number of additional items that have been selected in the dropdown. */ additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 }, /** * If the combobox DOM element should be an `input` element. */ alwaysComboboxIsInput: { type: Boolean, default: false, }, /** * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers. */ ariaControls: { type: String, required: true }, /** * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden. */ ariaExpanded: { type: [String, Boolean] as PropType<Booleanish>, required: true, }, /** * If no label element is used then the aria-label is be set should be set. */ ariaLabel: { type: String, default: null }, /** * Corresponds to the label's id that labels the textbox element. */ ariaLabelledby: { type: String, default: null }, /** * Custom debounce time for the user type event. */ debounceTime: { type: Number, default: 300 }, /** * Disables any textbox functionality */ disabled: { type: Boolean, default: false }, /** * Selected option's label */ displayValue: { type: String, default: null }, /** * Sets the possibility to type into the textbox. */ dynamicFiltering: { type: Boolean, default: false }, /** * Marks the textbox as invalid, rendering an error state */ isInvalid: { type: Boolean, default: false }, /* * If enabled, the user will be able to select multiple items. */ multiple: { type: Boolean, default: false }, /** * Indicates if the dropdown is open so that * the respective event can be emitted */ open: { type: Boolean, default: false }, /** * Sets the dropdown to readonly state */ readonly: { type: Boolean, default: false }, /** * The input value */ value: { type: String, default: '' }, /** * The selected value's list box item. */ selectedValueItem: { type: [Object, Array] as PropType<BentoListboxOptionItem | Array<BentoListboxOptionItem>>, default: undefined, }, /** * Toggles whether to use the slot content select items shown in the textbox in multiple mode. */ showSlotContentInMultiple: { type: Boolean, default: false }, /** * Dropdown size */ size: { type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>, default: null, }, }); const emit = defineEmits<{ /** * Emitted when the "clear" button is clicked */ (e: DropdownBaseTextboxEvent.CLEAR); /** * Emitted on click, space, enter and esc user events. It will close the dropdown. */ (e: DropdownBaseTextboxEvent.CLOSE); /** * Emitted when `dynamicFiltering` is enabled and a search input is entered */ (e: DropdownBaseTextboxEvent.INPUT, searchValue: string); /** * Emitted when any key is pressed and the focus is on the input field */ (e: DropdownBaseTextboxEvent.KEYDOWN, event: KeyboardEvent); /** * Emitted on click, space and enter user events. It will open the dropdown. */ (e: DropdownBaseTextboxEvent.OPEN); }>(); const textbox = ref(null); const textboxId = generateUid('textbox'); const conditionalClasses = computed(() => ({ [`b-dropdown-base-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled, [`b-dropdown-base-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly, [`b-dropdown-base-textbox--${DropdownBaseTextboxState.HAS_ITEMS}`]: !!props.additionalItemsSelected, })); const isRequired = computed(() => attrs['required'] as Booleanish); const comboboxConditionalClasses = computed(() => ({ [`b-dropdown-base-textbox__input--dynamic-filtering`]: props.dynamicFiltering, })); const isFiltering = computed(() => props.dynamicFiltering && !!props.value && props.open); const ariaAttributes = computed( () => ({ 'aria-haspopup': 'listbox', 'aria-controls': props.ariaControls, 'aria-describedby': attrs['aria-describedby']?.toString() as string, 'aria-expanded': props.ariaExpanded ? 'true' : 'false', 'aria-labelledby': props.ariaLabelledby, 'aria-label': props.ariaLabelledby ? null : props.ariaLabel, 'aria-invalid': props.isInvalid, 'aria-disabled': props.disabled ? true : null, 'aria-required': shouldShowInput.value ? null : isRequired.value, }) as HTMLAttributes ); // Cast selectedValueItem if it is an array of selected items const selectedValueItems = computed(() => props.multiple ? (props.selectedValueItem as Array<BentoListboxOptionItem>) : [] ); const shouldShowInput = computed(() => props.dynamicFiltering && (props.open || props.alwaysComboboxIsInput)); const shouldShowSingleSelectSlot = computed(() => props.selectedValueItem && !props.multiple); const shouldShowMultipleSlot = computed( () => props.multiple && props.selectedValueItem && selectedValueItems.value.length > 0 && props.showSlotContentInMultiple ); watch( () => shouldShowInput.value, () => { if (shouldShowInput.value && !props.alwaysComboboxIsInput) { nextTick(() => { textbox.value.focus(); }); } } ); const onOpenDropdown = async () => { if (!props.disabled && !props.readonly) { emit(DropdownBaseTextboxEvent.OPEN); // wait for popover to open before setting focus await nextTick(); textbox.value.focus(); } }; const onCloseDropdown = () => { if (props.open) { textbox.value.focus(); emit(DropdownBaseTextboxEvent.CLOSE); } }; const onToggleDropdown = (event: Event) => { const isDynamicFilteringInputClickEvent = props.open && (event.target as HTMLDivElement).tagName === 'INPUT'; if (isDynamicFilteringInputClickEvent) { /** * When there's a click even on the input during filtering * and the popover is open, do not toggle the popover. * Allow for click events inside the input field */ return null; } return props.open ? onCloseDropdown() : onOpenDropdown(); }; const onClearSearch = () => { emit(DropdownBaseTextboxEvent.CLEAR); emit(DropdownBaseTextboxEvent.INPUT, ''); textbox.value.focus(); }; const onInputEvent = debounce<(event: Event) => void>((event: Event) => { if (!props.readonly && !props.disabled) { emit(DropdownBaseTextboxEvent.INPUT, (event.target as HTMLInputElement).value); } else { event.preventDefault(); event.stopPropagation(); } }, props.debounceTime); const focus = () => { textbox.value.focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * Only for internal use, implements the logic of the textbox element to be implemented in the combobox. */ export default defineComponent({ i18n: { messages }, name: 'dropdown-base-textbox', inheritAttrs: false, }); </script> <style lang="scss" scoped src="./dropdown-base-textbox.scss" /> 

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

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

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

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

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

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

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

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

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

@@ -0,0 +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> 

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

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

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

@@ -0,0 +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> 

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

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

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

@@ -0,0 +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> 

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

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

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

@@ -0,0 +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" /> 

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

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

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

@@ -0,0 +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" />