@adyen/bento-mcp 0.0.0 → 0.1.0

package/dist/assets/components/filter-bar/components/input-filter/input-filter.vue

@@ -0,0 +1 @@
+<template> <bento-base-filter v-bind="$props" :button-label="buttonLabel" :button-secondary-label="buttonSecondaryLabel" :disable-apply-button="isApplyButtonDisabled" :disable-secondary-button="isSecondaryButtonDisabled" :only-slot="onlySlot" :popover-overflow-visible="isDropdownVariant" :tooltip-position="options?.tooltipPosition" :tooltip-text="options?.tooltipText" @apply="updateFilter" @clear="clearFilter" @open="openFilter" @reset="resetFilter" > <div class="b-input-filter" :class="conditionalClasses" @keydown.enter="updateFilter" @input="onInput"> <bento-input-field ref="inputTextRef" :dropdown="dropdownProp" :dropdown-position="options?.dropdownPosition" :placeholder="options?.placeholder" :variant="inputVariant" :model-value="internalFilterValue" :disabled="disabled" @update:model-value="setInternalFilterValue" @dropdown-input="onDropdownInput" /> </div> </bento-base-filter> </template> <script setup lang="ts"> import { computed, onBeforeUpdate, provide, ref, toRef, watch } from 'vue'; import { BentoBaseFilter, useBaseFilter } from '../base-filter'; import { type BentoInputFilterInputAndDropdownValues, type BentoInputFilterValue, } from '@/components/filter-bar/filter-bar.types'; import { BentoInputField } from '@/components/input-field'; import { truncate } from '@/utils/ts/truncate'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { INPUT_FILTER_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-filter/input-filter.keys'; import { deprecate } from '@/utils/ts/deprecate'; import { type BentoInputFilterProps } from './input-filter.types'; const props = withDefaults(defineProps<BentoInputFilterProps>(), { defaultValue: null, disabled: false, onlySlot: false, options: undefined, value: null, }); const emit = defineEmits<{ /** * Fires upon the user interacting with the filter */ (e: 'input', props: BentoInputFilterProps): void; /** * Fires on the (new) filter values being applied */ (e: 'update', props: BentoInputFilterProps): void; }>(); const inputTextRef = ref(null); // Dropdown const dropdownValue = ref<BentoListboxSelectedValue>(props?.options?.dropdown?.value); const isDropdownVariant = computed( () => props?.options?.variant === 'dropdown' && props?.options?.dropdown !== undefined ); const dropdownProp = computed(() => isDropdownVariant.value ? { ...props?.options?.dropdown, value: dropdownValue.value } : undefined ); // For now we only allow the dropdown or the default variant for the input field. const inputVariant = computed(() => (props?.options?.variant === 'dropdown' ? 'dropdown' : 'default')); // Computed value as the input value location will be different if it is a dropdown variant const valueProp = computed(() => isDropdownVariant.value ? (props.value as BentoInputFilterInputAndDropdownValues)?.inputValue : (props?.value as string) ); const { internalFilterValue, isSecondaryButtonDisabled, isApplyButtonDisabled } = useBaseFilter<string>( valueProp, toRef(props, 'defaultValue') ); const buttonLabel = computed(() => props.label); const buttonSecondaryLabel = computed(() => truncate(valueProp.value, 12)); const conditionalClasses = computed(() => ({ [`b-input-filter--only-slot`]: props.onlySlot, })); onBeforeUpdate(() => { // Set value to null when the string is empty if (internalFilterValue.value === '') { internalFilterValue.value = null; } }); watch(inputTextRef, () => { // Focus on the input when it's opened inputTextRef.value?.focusInput(); }); const openFilter = () => { internalFilterValue.value = valueProp.value; }; const updateFilter = () => { if (!internalFilterValue.value && props.defaultValue !== null) { // If value set to empty, reset back to default value internalFilterValue.value = props.defaultValue; } emit('update', { ...props, value: isDropdownVariant.value ? ({ inputValue: internalFilterValue.value, dropdownValue: dropdownValue.value, } as BentoInputFilterValue) : internalFilterValue.value, }); }; const resetFilter = () => emit('update', { ...props, value: props.defaultValue }); const clearFilter = () => { internalFilterValue.value = null; updateFilter(); }; const onInput = () => { emit('input', { ...props, value: internalFilterValue.value }); }; const setInternalFilterValue = (event: string) => { internalFilterValue.value = event; }; const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => { dropdownValue.value = selectedValue; }; // We need to change the base filter's popover to have overflow visible so the dropdown options is // not hidden inside the filter when opened. provide(INPUT_FILTER_POPOVER_INJECTION_KEY, isDropdownVariant.value); // Verify that no unsopported attributes are passed to the component watch( () => props.options, () => { if (props.options?.dropdown || props.options?.dropdownPosition || props.options?.variant) { deprecate( 'BentoInputFilter "options" property', `BentoInputFilter "options" no longer supports "dropdown", "dropdownPosition" or "variant" attributes. Use the "BentoFilterItemType.INPUT_DROPDOWN" instead of "BentoFilterItemType.INPUT" <bento-filter-bar :config="[{ field: 'name', label: 'Name', type: BentoFilterItemType.INPUT_DROPDOWN, options: [...], }]" />`, '2.0.0' ); } }, { immediate: true } ); </script> <script lang="ts"> export default { name: 'bento-input-filter', }; </script> <style lang="scss" scoped src="./input-filter.scss" /> 

package/dist/assets/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.docs.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/blocks';
+import * as BentoInputWithDropdwnFilterStories from './input-with-dropdown-filter.stories';
+
+<Meta of={BentoInputWithDropdwnFilterStories} />
+
+# Input with dropdown filter
+
+A **TextFilter** component provides a filter text input and allows you to filter and render a list of data based on the
+entered filter text.
+
+<Canvas>
+    <Story of={BentoInputWithDropdwnFilterStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgTypes of={BentoInputWithDropdwnFilterStories} />

package/dist/assets/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { type Meta, type StoryObj } from '@storybook/vue'; import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import BentoInputWithDropdownFilter from './input-with-dropdown-filter.vue'; import { type BentoInputWithDropdownFilterOptions } from '../../filter-bar.types'; export default { title: 'Filter bar/Input with dropdown filter', component: BentoInputWithDropdownFilter, argTypes: { dismiss: { name: 'dismiss', defaultValue: '', description: '`dismiss` event handler. Called whenever the "X" (dismiss) button is clicked or the value is set to empty (null)', table: { type: { summary: '({ field, label, value }) => void' } }, control: { disable: true }, }, update: { name: 'update', defaultValue: '', description: '`update` event handler. Called whenever the "Apply" button is clicked.', table: { type: { summary: '({ field, label, value }) => void' } }, control: { disable: true }, }, }, } satisfies Meta; type Story = StoryObj<typeof BentoInputWithDropdownFilter>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoInputWithDropdownFilter }, props: Object.keys(argTypes), template: ` <div style="padding-top: 24px"> <bento-input-with-dropdown-filter v-bind="args" :value="value" @update="updateFilter" @dismiss="dismissFilter" /> </div> `, setup(props) { const value = ref(null); const updateFilter = newFilterValue => { action('update')(newFilterValue); value.value = newFilterValue.value; }; const dismissFilter = newFilterValue => { action('dismiss')(newFilterValue); value.value = null; }; return { args: isVue2 ? props : _args, value, updateFilter, dismissFilter, }; }, }), args: { label: 'Input with dropdown', field: 'input', options: { dropdown: { items: [ { label: 'EUR', value: 'EUR' }, { label: 'USD', value: 'USD' }, ], value: 'EUR', }, } satisfies BentoInputWithDropdownFilterOptions, }, }; 

package/dist/assets/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.vue

@@ -0,0 +1 @@
+<template> <bento-base-filter v-bind="$props" :button-label="buttonLabel" :button-secondary-label="buttonSecondaryLabel" :disable-apply-button="shouldDisableApply" :disable-secondary-button="isSecondaryButtonDisabled" :only-slot="onlySlot" :tooltip-position="options?.tooltipPosition" :tooltip-text="options?.tooltipText" @apply="updateFilter" @clear="clearFilter" @open="openFilter" @reset="resetFilter" > <div class="b-input-with-dropdown-filter" :class="conditionalClasses" @keydown.enter="updateFilter" @input="onInput" > <bento-input-field ref="inputTextRef" :dropdown="dropdownOptions" :dropdown-position="options?.dropdownPosition" variant="dropdown" :model-value="internalFilterValue?.inputValue" :disabled="disabled" @update:model-value="setInternalFilterValue" @dropdown-input="onDropdownInput" /> </div> </bento-base-filter> </template> <script setup lang="ts"> import { computed, onBeforeUpdate, provide, ref, toRef, watch } from 'vue'; import { BentoBaseFilter, useBaseFilter } from '../base-filter'; import { BentoFilterEvent, type BentoInputWithDropdownFilterOptions, type BentoInpuWithDropdowntFilterValue, } from '../../filter-bar.types'; import { type BentoInputDropdownProps, BentoInputField } from '@/components/input-field'; import { truncate } from '@/utils/ts/truncate'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys'; const props = withDefaults( defineProps<{ /** * Disables the filter from being interacted with. */ disabled?: boolean; /** * Default value of the filter to reset to. */ defaultValue?: BentoInpuWithDropdowntFilterValue; /** * Filter name/key referencing the actual property name in the data set. * Should be unique per filter bar. */ field: string; /** * Label text to be displayed */ label: string; /** * Renders the base filter's slot content only - leaving out the button and the popover. * Used for the allFiltersModal component. */ onlySlot?: boolean; /** * List of options that are needed to setup the filter * Available options: * - dropdown: all the dropdown properties that can be set in the inner dropdown of the input field. @see BentoDropdown for more info. * - dropdownPosition: allow the user to set the dropdown on the left or right side. Accepts the `start` or `end` values. * - tooltipPosition: The position of the tooltip attached to the filter button * - tooltipText: The content of the tooltip attached to the filter button */ options?: BentoInputWithDropdownFilterOptions; /** * Current value of the filter. * If the options.variant is equal to 'dropdown', the value should be of type should be `{ inputValue: string | null; dropdownValue?: string }`. */ value?: BentoInpuWithDropdowntFilterValue; }>(), { defaultValue: undefined, onlySlot: false, options: undefined, value: undefined, } ); const emit = defineEmits([BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE]); const inputTextRef = ref(null); const { internalFilterValue, isSecondaryButtonDisabled, isApplyButtonDisabled } = useBaseFilter<BentoInpuWithDropdowntFilterValue>(toRef(props, 'value'), toRef(props, 'defaultValue')); const buttonLabel = computed(() => props.label); const buttonSecondaryLabel = computed(() => truncate(props.value?.inputValue, 12)); const dropdownSelection = computed( () => internalFilterValue.value?.dropdownValue ?? props.options?.dropdown?.modelValue ?? props.options?.dropdown?.value ); const dropdownOptions = computed<BentoInputDropdownProps>(() => ({ ...((props.options?.dropdown || {}) as BentoInputDropdownProps), modelValue: dropdownSelection.value, })); const conditionalClasses = computed(() => ({ [`b-input-with-dropdown-filter--only-slot`]: props.onlySlot, })); const shouldDisableApply = computed(() => { const allFieldsAreSet = !!internalFilterValue.value?.inputValue && !!dropdownSelection.value; return !allFieldsAreSet || isApplyButtonDisabled.value; }); onBeforeUpdate(() => { // Set value to null when the string is empty if (internalFilterValue.value?.inputValue === '') { internalFilterValue.value = { ...internalFilterValue.value, inputValue: undefined }; } }); watch(inputTextRef, () => { // Focus on the input when it's opened inputTextRef.value?.focusInput(); }); const openFilter = () => { internalFilterValue.value = props.value; }; const updateFilter = () => { if (!internalFilterValue.value?.inputValue && props.defaultValue !== null) { // If value set to empty, reset back to default value internalFilterValue.value = { ...props.defaultValue }; } emit(BentoFilterEvent.UPDATE, { ...props, value: internalFilterValue.value, }); }; const resetFilter = () => emit(BentoFilterEvent.UPDATE, { ...props, value: props.defaultValue }); const clearFilter = () => { internalFilterValue.value = null; updateFilter(); }; const onInput = () => { emit(BentoFilterEvent.INPUT, { ...props, value: internalFilterValue.value }); }; const setInternalFilterValue = (event: string) => { internalFilterValue.value = { dropdownValue: dropdownSelection.value, inputValue: event }; }; const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => { internalFilterValue.value = { ...internalFilterValue.value, dropdownValue: selectedValue }; }; // We need to change the base filter's popover to have overflow visible so the dropdown options is // not hidden inside the filter when opened. provide(INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY, true); </script> <script lang="ts"> /** * */ export default { name: 'bento-input-with-dropdown-filter', }; </script> <style lang="scss" scoped src="./input-with-dropdown-filter.scss" /> 

package/dist/assets/components/filter-bar/components/radio-group-filter/radio-group-filter.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { type BentoRadioGroupFilterProps, type BentoRadioGroupFilterValue } from './radio-group-filter.types'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoRadioGroupFilter from './radio-group-filter.vue'; const meta: Meta = { title: 'Filter bar/Radio group filter', component: BentoRadioGroupFilter, }; export default meta; type Story = StoryObj<typeof BentoRadioGroupFilter>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoRadioGroupFilter }, props: Object.keys(argTypes), template: ` <bento-radio-group-filter v-bind="args" :value="value" @input="selectOption" @update="applyOption" /> `, setup(props) { const value = ref<BentoRadioGroupFilterValue>(); const selectOption = (newOptionValue: BentoRadioGroupFilterProps) => { action('input')(newOptionValue); }; const applyOption = (newOptionValue: BentoRadioGroupFilterProps) => { value.value = newOptionValue.value; action('update')(newOptionValue); }; return { // Values args: isVue2 ? props : _args, value, // Events applyOption, selectOption, }; }, }), args: { label: 'Radio group filter', field: 'radio-group-filter', options: { items: [ { value: 1, label: 'First option' }, { value: 2, label: 'Second option with very long label that cascades' }, { value: 3, label: 'Last option' }, ], }, } satisfies BentoRadioGroupFilterProps, }; export const Persistent: Story = { render: (_args, { argTypes }) => ({ components: { BentoRadioGroupFilter }, props: Object.keys(argTypes), template: ` <bento-radio-group-filter v-bind="args" :value="value" :defaultValue="defaultValue" @input="selectOption" @update="applyOption" /> `, setup(props) { const args = isVue2 ? props : _args; const defaultValue: BentoRadioGroupFilterValue = args.options.items[0].value; const value = ref<BentoRadioGroupFilterValue>(defaultValue); const selectOption = (newOptionValue: BentoRadioGroupFilterProps) => { action('input')(newOptionValue); }; const applyOption = (newOptionValue: BentoRadioGroupFilterProps) => { value.value = newOptionValue.value; action('update')(newOptionValue); }; return { // Values args, value, defaultValue, // Events applyOption, selectOption, }; }, }), args: { label: 'Radio group filter', field: 'radio-group-filter', options: { items: [ { value: 1, label: 'First option' }, { value: 2, label: 'Second option' }, { value: 3, label: 'Last option' }, ], }, } satisfies BentoRadioGroupFilterProps, }; 

package/dist/assets/components/filter-bar/components/radio-group-filter/radio-group-filter.vue

@@ -0,0 +1 @@
+<template> <bento-base-filter v-bind="$props" :button-label="label" :button-secondary-label="buttonSecondaryLabel" :disable-apply-button="isApplyButtonDisabled" :disable-secondary-button="isSecondaryButtonDisabled" :only-slot="onlySlot" @apply="updateFilter" @clear="clearFilter(updateFilter)" @open="openFilter" @reset="resetFilter(updateFilter)" > <div class="b-radio-group-filter" :class="conditionalClasses"> <bento-radio-group v-model="internalFilterValue" :items="options?.items" :label="label" :disabled="disabled" hide-label variant="vertical" @update:model-value="onInput" /> </div> </bento-base-filter> </template> <script setup lang="ts"> import { BentoRadioGroup } from '@/components/radio-group'; import { BentoBaseFilter } from '../base-filter'; import { computed, toRef } from 'vue'; import { useBentoBaseFilter } from '@/composables/use-bento-base-filter'; import { truncate } from '@/utils/ts/truncate'; import { type BentoRadioGroupFilterProps, type BentoRadioGroupFilterValue } from './radio-group-filter.types'; const props = withDefaults(defineProps<BentoRadioGroupFilterProps>(), { defaultValue: undefined, value: undefined, options: () => ({ items: [], }), }); const emit = defineEmits<{ /** * Used in the All filters modal */ (e: 'input', newFilterValue: BentoRadioGroupFilterProps): void; /** * Used in the Filter Bar */ (e: 'update', newFilterValue: BentoRadioGroupFilterProps): void; }>(); const { // Fields internalFilterValue, isSecondaryButtonDisabled, isApplyButtonDisabled, // Methods clearFilter, openFilter, resetFilter, } = useBentoBaseFilter<BentoRadioGroupFilterValue>(toRef(props, 'value'), toRef(props, 'defaultValue')); // Used to truncate the label of the selected option const buttonSecondaryLabel = computed(() => { const selectedValueLabel = props.options.items.find(item => item.value === props.value)?.label || ''; return truncate(selectedValueLabel, 12); }); const conditionalClasses = computed(() => ({ [`b-radio-group-filter--only-slot`]: props.onlySlot, })); function onInput(newValue: BentoRadioGroupFilterValue) { internalFilterValue.value = newValue; // Emitted for the filter bar all filters modal emit('input', { ...props, value: internalFilterValue.value }); } function updateFilter() { // Emitted for the filter bar emit('update', { ...props, value: internalFilterValue.value }); } </script> <script lang="ts"> /** * Radio group filter component * * @example * import { BentoRadioGroupFilter } from '@adyen/bento-vue2'; * * export default { * components: { BentoRadioGroupFilter }, * template: ` * <bento-radio-group-filter * :label="label" * :options="{ * items: [ * { value: 'value1', label: 'Label 1' }, * { value: 'value2', label: 'Label 2' }, * ], * }" * value="value1" * defaultValue="value2" * /> * ` * } */ export default { name: 'bento-radio-group-filter', }; </script> <style lang="scss" scoped src="./radio-group-filter.scss" /> 

package/dist/assets/components/filter-bar/components/range-filter/range-filter.vue

@@ -0,0 +1 @@
+<template> <bento-base-filter v-bind="$props" :disable-apply-button="isApplyButtonDisabled" :disable-secondary-button="isSecondaryButtonDisabled" :button-label="buttonLabel" :button-secondary-label="buttonSecondaryLabel" :only-slot="onlySlot" :tooltip-position="options?.tooltipPosition" :tooltip-text="options?.tooltipText" @apply="updateFilter" @clear="clearFilter" @open="openFilter" @reset="resetFilter" > <div class="b-range-filter" :class="conditionalClasses" @keydown.enter="updateFilter"> <bento-input-field ref="inputTextRef" :model-value="internalFilterValue ? internalFilterValue[0] : ''" type="number" :aria-label="t('from').toString()" :disabled="disabled" @update:model-value="updateFrom" > {{ t('from') }} </bento-input-field> <bento-input-field class="b-range-filter__input-field" :model-value="internalFilterValue ? internalFilterValue[1] : ''" type="number" :aria-label="t('to')" :disabled="disabled" @update:model-value="updateTo" > {{ t('to') }} </bento-input-field> </div> </bento-base-filter> </template> <script lang="ts"> import { computed, defineComponent, nextTick, type PropType, ref, toRef } from 'vue'; import { BentoFilterEvent, type BentoRangeFilterOptions } from '../../filter-bar.types'; import { BentoBaseFilter, useBaseFilter } from '@/components/filter-bar/components/base-filter'; import { BentoInputField } from '@/components/input-field'; import { truncate } from '@/utils/ts/truncate'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; /** * Range filter used in the filter-bar component. * * @example * import { BentoRangeFilter } from '@adyen/bento-vue2'; * * export default { * components: { BentoRangeFilter }, * template: ` * <bento-range-filter field="filter-field" label="Filter label" value="['0', '1']"/> * ` * } */ export default defineComponent({ name: 'bento-range-filter', i18n: { messages }, components: { BentoBaseFilter, BentoInputField }, props: { /** * Disables the filter from being interacted with. */ disabled: { type: Boolean, default: false }, /** * Default value of the filter to reset to. */ defaultValue: { type: Array as PropType<Array<string>>, default: null }, /** * Filter name/key referencing the actual property name in the data set. * Should be unique per filter bar. */ field: { type: String, required: true }, /** * Label text to be displayed */ label: { type: String, required: true }, /** * Current value of the filter */ value: { type: Array as PropType<Array<string>>, default: () => ['', ''] }, /** * Renders the base filter's slot content only - leaving out the button and the popover. * Used for the allFiltersModal component. */ onlySlot: { type: Boolean, default: false }, /** * List of options that are needed to setup the filter * Available options: * - tooltipPosition: The position of the tooltip attached to the filter button * - tooltipText: The content of the tooltip attached to the filter button */ options: { type: Object as PropType<BentoRangeFilterOptions>, default: undefined }, }, emits: [BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE], setup(props, { emit }) { const { t } = useI18n<{ message: MessageSchema }>({ messages }); const inputTextRef = ref(null); const { internalFilterValue, isSecondaryButtonDisabled, isApplyButtonDisabled } = useBaseFilter( toRef(props, 'value'), toRef(props, 'defaultValue') ); const truncatedRangeValues = computed(() => { if (!props.value?.[0] && !props.value?.[1]) { return null; } // Set prefix is one range value is not set let prefix = ''; if (!props.value?.[0]) { prefix = '≤'; } else if (!props.value?.[1]) { prefix = '≥'; } const rangeFromLabel = props.value?.[0] ? `${truncate(props.value[0], 5)}` : ''; const seperator = props.value?.[0] && props.value?.[1] ? ' - ' : ''; const rangeToLabel = props.value?.[1] ? `${truncate(props.value[1], 5)}` : ''; return `${prefix}${rangeFromLabel}${seperator}${rangeToLabel}`; }); const buttonLabel = computed(() => props.label); const buttonSecondaryLabel = computed(() => truncatedRangeValues.value); const conditionalClasses = computed(() => ({ [`b-range-filter--only-slot`]: props.onlySlot, })); const openFilter = () => { internalFilterValue.value = props.value; nextTick(() => inputTextRef.value.focusInput()); }; const onInput = () => { emit(BentoFilterEvent.INPUT, { ...props, value: internalFilterValue.value }); }; const updateFrom = newValue => { internalFilterValue.value = [newValue, internalFilterValue.value[1]]; onInput(); }; const updateTo = newValue => { internalFilterValue.value = [internalFilterValue.value[0], newValue]; onInput(); }; const updateFilter = () => { if (!internalFilterValue.value.some(x => x)) { // If both range values are empty, // If persistent filter, reset back to default value, else reset back to undefined internalFilterValue.value = props.defaultValue !== null ? props.defaultValue : undefined; } emit(BentoFilterEvent.UPDATE, { ...props, value: internalFilterValue.value, }); }; const resetFilter = () => emit(BentoFilterEvent.UPDATE, { ...props, value: props.defaultValue }); const clearFilter = () => { internalFilterValue.value = ['', '']; updateFilter(); }; return { // Values inputTextRef, conditionalClasses, internalFilterValue, isApplyButtonDisabled, isSecondaryButtonDisabled, buttonLabel, buttonSecondaryLabel, // Events updateFrom, updateTo, updateFilter, clearFilter, openFilter, resetFilter, // Translations t, }; }, }); </script> <style lang="scss" scoped src="./range-filter.scss" /> 

package/dist/assets/components/filter-bar/components/select-filter/components/select-filter-button/select-filter-button.vue

@@ -0,0 +1 @@
+<template> <bento-base-filter :applied-filters-count="appliedFiltersCount" :button-label="buttonLabel" :button-secondary-label="buttonSecondaryLabel" :disabled="disabled" :disable-apply-button="isApplyButtonDisabled" :disable-secondary-button="isSecondaryButtonDisabled" :default-value="defaultValue" :label="label" :field="field" :only-slot="false" :tooltip-position="options?.tooltipPosition" :tooltip-text="options?.tooltipText" :value="value" @apply="updateFilter" @clear="clearFilter" @reset="resetFilter" @open="openFilter" @close="closeFilter" > <div class="b-select-filter-button__search-bar-wrapper"> <div v-if="options?.dynamicFiltering ?? true" class="b-select-filter-button__search-bar"> <bento-search-bar :debounce-time="options?.search?.debounceTime" :value="searchTerm" :input-field-aria-label="t('searchFilter', { filter: label.toLocaleLowerCase() })" @input="searchTerm = $event" /> </div> <div class="b-select-filter-button__divider"> <bento-divider /> </div> </div> <bento-listbox :id="listboxFilterId" :aria-label="label" class="b-select-filter-button__wrapper" :component-loading="options?.loading" :empty-state="options?.emptyState" :has-more-items="options?.lazy?.hasMoreItems" :items="filteredItems" :is-option-disabled="options?.isOptionDisabled" :lazy-load-type="options?.lazy?.lazyLoadType" :loading="options?.lazy?.loading" :multiple="options?.multiple" :static-categories="options?.staticCategories" :no-results-message="noResultsMessage" :searching="!!searchTerm" :selected-value="internalFilterValue" :virtual-scroll="options?.virtualScroll" @select="onOptionSelected" @space-pressed="onOptionSelected" @enter-pressed="onOptionSelected" @show-more="options?.lazy?.showMoreEvent()" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-listbox> </bento-base-filter> </template> <script setup lang="ts"> import { computed, type PropType, ref, toRef, useSlots, watch } from 'vue'; // Components import BentoSearchBar from '@/components/search-bar/search-bar.vue'; import { BentoDivider } from '@/components/divider'; import { BentoListbox, useCachedSelectedValues } from '@/internal'; import { type BentoListboxMultiSelectValue, type BentoListboxOptionItem, type BentoListboxOptions, type BentoListboxSelectedValue, type BentoListboxSelectedValueLabelPair, type BentoListboxValue, } from '@/types/listbox'; import { BentoBaseFilter, useBaseFilter } from '../../../base-filter'; // Types import { BentoFilterEvent, type BentoSelectFilterOptions } from '../../../../filter-bar.types'; // Utilities import { useSearchBarFilter } from '@/components/search-bar'; import { generateUid } from '@/core/utils/ts'; import { truncate } from '@/utils/ts/truncate'; import { useI18n } from '@/utils/ts/i18n'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const slots = useSlots(); const emit = defineEmits<{ (e: 'input', value: any); (e: 'update', value: any); }>(); const props = defineProps({ /** * Disables the filter from being interacted with. */ disabled: { type: Boolean, default: false }, /** * Default value of the filter to reset to. * */ defaultValue: { type: [String, Number, Array] as PropType<BentoListboxSelectedValue>, default: null, }, /** * Filter name/key referencing the actual property name in the data set. * Should be unique per filter bar. */ field: { type: String, required: true }, /** * Label text to be displayed */ label: { type: String, required: true }, /** * Renders the base filter's slot content only - leaving out the button and the popover. * Used for the allFiltersModal component. */ onlySlot: { type: Boolean, default: false }, /** * List of options that are needed to setup the filter * Available options: * - multiple: If "true", the user will be able to select multiple items. * - listboxItems: The option elements to populate the filter with. * * @default undefined */ options: { type: Object as PropType<BentoSelectFilterOptions>, default: undefined, }, /** * Current value of the filter * * @default undefined */ value: { type: [String, Number, Array, Object] as PropType<BentoListboxSelectedValue>, default: undefined, }, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const searchTerm = ref(''); const optionsRef = toRef(props, 'options'); const itemsRef = ref(props.options.listboxItems ?? []); const { cachedSelectedListboxOptions, setCachedValues, resetCache } = useCachedSelectedValues( itemsRef, toRef(props, 'value'), toRef(optionsRef.value, 'multiple') ); const { cachedSelectedListboxOptions: cachedDefaultSelectedListboxOptions } = useCachedSelectedValues( itemsRef, toRef(props, 'defaultValue'), toRef(optionsRef.value, 'multiple') ); const { internalFilterValue, isSecondaryButtonDisabled, isApplyButtonDisabled } = useBaseFilter<BentoListboxOptions>(cachedSelectedListboxOptions, cachedDefaultSelectedListboxOptions); // We need to make sure to update the items if the consumer updates them manually watch(optionsRef, () => { itemsRef.value = optionsRef.value.listboxItems ?? []; }); const filteredItems = useSearchBarFilter<BentoListboxOptionItem>( searchTerm, itemsRef, props.options?.search?.searchEvent ); const noResultsMessage = computed(() => t('noFiltersMatchThisSearch') as string); const buttonLabel = computed(() => props.label); const buttonSecondaryLabel = computed(() => { const isSingleSelectAndOneItemSelected = !props?.options?.multiple && props.value != null; const isMultiSelectedAndOneItemSelected = props?.options?.multiple && Array.isArray(props.value) && props.value.length === 1; // When only 1 item is selected: Display the Label of the selected value or use value as Label if (isSingleSelectAndOneItemSelected || isMultiSelectedAndOneItemSelected) { // If enableValueLabelPair is enabled then "value" has the label, no need to search for it. if (props.options?.enableValueLabelPair) { let displayValue = (props.value as Array<BentoListboxSelectedValueLabelPair>)?.length > 0 ? (props.value[0] as BentoListboxSelectedValueLabelPair).label : (props.value as BentoListboxSelectedValueLabelPair).label; if (!displayValue) { displayValue = props.value as string; printDevelopmentWarning( 'BentoFilterBar Select filter (single & multi): The "value" provided is incorrect. The "value" must be of type "BentoListboxSelectedValueLabelPair" or "Array<BentoListboxSelectedValueLabelPair>" when "enableValueLabelPair" is set to true' ); } return truncate(displayValue as string, 12); } const flatListboxItems = props.options.listboxItems.flatMap(x => (x.items ? x.items : x)); // If the value is not in the list of Items set the value as secondary label. // This happens on external filtering let displayValue = flatListboxItems.find(({ value }) => Array.isArray(props.value) ? (props?.value as BentoListboxMultiSelectValue)?.includes(value as BentoListboxValue) : value === props.value )?.label; if (!displayValue && props.value) { displayValue = (props.value as BentoListboxMultiSelectValue)[0] as string; } return truncate(displayValue, 12); } return null; }); const listboxFilterId = computed(() => generateUid(`filter-listbox-${props.field}`)); const onOptionSelected = (selectedValue: BentoListboxOptions) => { internalFilterValue.value = selectedValue; const { onlySlot, ...cleanedProps } = props; // Return null if there are no selected values if (props.options?.multiple) { let value: BentoListboxSelectedValue; if (props.options?.enableValueLabelPair) { value = selectedValue.length ? internalFilterValue.value : null; } else { value = selectedValue.length ? internalFilterValue.value.map(({ value }) => value) : null; } emit(BentoFilterEvent.INPUT, { ...cleanedProps, value }); return; } let value: BentoListboxSelectedValue; if (props.options?.enableValueLabelPair) { value = selectedValue.length ? selectedValue[0] : null; } else { value = selectedValue.length ? selectedValue[0].value : null; } emit(BentoFilterEvent.INPUT, { ...cleanedProps, value }); }; const updateFilter = () => { // Omit the onlySlot prop as it is not needed const { onlySlot, ...cleanedProps } = props; if (props.options.multiple) { // If multi select filter and all items unchecked, // If persistent filter, reset back to default value, else reset back to undefined if (internalFilterValue.value && (internalFilterValue.value as Array<unknown>)?.length === 0) { internalFilterValue.value = props.defaultValue !== null ? cachedDefaultSelectedListboxOptions.value : undefined; } let value: BentoListboxSelectedValue; if (props.options?.enableValueLabelPair) { value = internalFilterValue.value?.length ? internalFilterValue.value : null; } else { value = internalFilterValue.value?.length ? internalFilterValue.value?.map(({ value }) => value) : null; } emit(BentoFilterEvent.UPDATE, { ...cleanedProps, value, }); return; } let value: BentoListboxSelectedValue; if (props.options?.enableValueLabelPair) { value = internalFilterValue.value.length ? internalFilterValue.value[0] : undefined; } else { value = internalFilterValue.value.length ? internalFilterValue.value[0].value : undefined; } emit(BentoFilterEvent.UPDATE, { ...cleanedProps, value }); }; const openFilter = () => { internalFilterValue.value = cachedSelectedListboxOptions.value; props.options?.onOpen?.(); }; const closeFilter = () => { // If the search term is set, reset it to "empty" if (searchTerm.value) { searchTerm.value = ''; } }; const resetFilter = () => { setCachedValues(cachedDefaultSelectedListboxOptions.value); internalFilterValue.value = cachedDefaultSelectedListboxOptions.value; updateFilter(); }; const clearFilter = () => { resetCache(); internalFilterValue.value = []; updateFilter(); }; const appliedFiltersCount = computed(() => { // Don't show if no filter applied or peristent filter or not multiple select if (props.value == null || !props.options.multiple) { return null; } /* * Show amount of items selceted (props.value) or 'All' if all items selected */ // If nested we need to get the correct count const allSelectableItemsCount = props.options.listboxItems?.reduce((acc, item) => { // eslint-disable-next-line no-param-reassign acc += item?.items?.length ? item.items.length : 1; return acc; }, 0); const selectedAmount = (props.value as Array<string | number>)?.length; if (selectedAmount === 1) { return null; } return selectedAmount === allSelectableItemsCount ? t('all') : selectedAmount; }); </script> <script lang="ts"> /** * The Listbox filter displays a listbox of items * passed in the "options.listboxItems" property. * * @example * import { BentoSelectFilter } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectFilter }, * template: ` * <bento-select-filter * :field="filter.field" * :label="filter.label" * :options="filter.options" * :value="filter.value" * @update="updateFilterHandler" * > * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./select-filter-button.scss" /> 

package/dist/assets/components/filter-bar/components/select-filter/components/select-filter-dropdown/select-filter-dropdown.vue

@@ -0,0 +1 @@
+<template> <bento-dropdown :model-value="internalFilterValue" :items="options.listboxItems" :search="options?.search" :multiple="options?.multiple" :static-categories="options?.staticCategories" :no-results-message="noResultsMessage" :is-option-disabled="options.isOptionDisabled" :dynamic-filtering="options?.dynamicFiltering ?? true" :component-loading="options?.loading" :empty-state="options?.emptyState" :disabled="disabled" :enable-value-label-pair="options?.enableValueLabelPair" @update:model-value="onOptionSelected" @open="() => options?.onOpen?.()" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </bento-dropdown> </template> <script setup lang="ts"> import { computed, type PropType, ref, toRef, useSlots, watch } from 'vue'; // Components import { BentoDropdown } from '@/components/dropdown'; // Composables import { useBaseFilter } from '../../../base-filter'; // Types import { type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoFilterEvent, type BentoSelectFilterOptions } from '../../../../filter-bar.types'; // Utils import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const emit = defineEmits<{ (e: 'input', updatedProps: any): void; (e: 'update', updatedProps: any): void; }>(); const props = defineProps({ /** * Disables the filter from being interacted with. */ disabled: { type: Boolean, default: false }, /** * Default value of the filter to reset to. * */ defaultValue: { type: [String, Number, Array] as PropType<BentoListboxSelectedValue>, default: null, }, /** * Filter name/key referencing the actual property name in the data set. * Should be unique per filter bar. */ field: { type: String, required: true }, /** * Label text to be displayed */ label: { type: String, required: true }, /** * Renders the base filter's slot content only - leaving out the button and the popover. * Used for the allFiltersModal component. * */ onlySlot: { type: Boolean, default: false }, /** * List of options that are needed to setup the filter * Available options: * - multiple: If "true", the user will be able to select multiple items. * - listboxItems: The option elements to populate the filter with. * * @default undefined */ options: { type: Object as PropType<BentoSelectFilterOptions>, default: undefined, }, /** * Current value of the filter * * @default undefined */ value: { type: [String, Number, Array] as PropType<BentoListboxSelectedValue>, default: undefined, }, }); const { internalFilterValue } = useBaseFilter(toRef(props, 'value'), toRef(props, 'defaultValue')); const optionsRef = toRef(props, 'options'); const itemsRef = ref(props.options.listboxItems); // We need to make sure to update the items if the consumer updates them manually watch(optionsRef, () => { itemsRef.value = optionsRef.value.listboxItems; }); const noResultsMessage = computed(() => t('noFiltersMatchThisSearch') as string); const onOptionSelected = (selectedValue: BentoListboxSelectedValue) => { internalFilterValue.value = selectedValue; const { onlySlot, ...cleanedProps } = props; emit(BentoFilterEvent.INPUT, { ...cleanedProps, value: internalFilterValue.value }); }; </script> <script lang="ts"> /** * The Listbox filter displays a listbox of items * passed in the "options.listboxItems" property. * * @example * import { BentoSelectFilter } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectFilter }, * template: ` * <bento-select-filter * :field="filter.field" * :label="filter.label" * :options="filter.options" * :value="filter.value" * @update="updateFilterHandler" * > * ` * } */ export default { i18n: { messages }, name: 'select-filter-dropdown', }; </script> 

package/dist/assets/components/filter-bar/components/select-filter/select-filter.stories.ts

@@ -0,0 +1 @@
+import { computed, ref } from 'vue'; import { action } from '@storybook/addon-actions'; import { type BentoListboxOptions } from '@/types/listbox'; import { BentoTypography } from '@/components/typography'; import { isVue2 } from 'vue-demi'; import { type BentoSelectFilterOptions, type BentoSelectFilterValue } from '../../filter-bar.types'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoSelectFilter from './select-filter.vue'; // Generate array from 1 to # // { label: 'Option #', value: # }, const DEFAULT_OPTIONS: BentoListboxOptions = new Array(10) .fill(0) .map((_, index) => ({ label: `Option ${index + 1}`, value: index + 1 })); const meta: Meta = { title: 'Filter bar/Select filter', component: BentoSelectFilter, argTypes: { update: { name: 'update', defaultValue: '', description: '`update` event handler. Called whenever the "Apply" button is clicked.', table: { type: { summary: '({ field, label, value }) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoSelectFilter>; const Template: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectFilter }, props: Object.keys(argTypes), setup(props) { const selectedValues = ref(props.selectedValue); const onInput = newFilterValue => { action('input')(newFilterValue); }; const updateFilter = newFilterValue => { action('update')(newFilterValue); selectedValues.value = newFilterValue.value; }; return { args: isVue2 ? props : _args, selectedValues, updateFilter, onInput, }; }, template: ` <div style="padding-top: 24px"> <bento-select-filter v-bind="args" :value="selectedValues" @input="onInput" @update="updateFilter" /> </div> `, }), }; export const SingleSelect: Story = { ...Template, args: { label: 'Company', field: 'company', selectedValue: undefined, options: { isOptionDisabled: option => [3, 5].includes(option), listboxItems: DEFAULT_OPTIONS, lazy: { lazyLoadType: 'button', hasMoreItems: true, showMoreEvent: action('showMoreEvent'), loading: true, }, }, }, }; export const MultiSelect: Story = { ...Template, args: { label: 'Company', field: 'company', selectedValue: [3, 1, 10], options: { isOptionDisabled: option => [3, 5].includes(option.value), listboxItems: DEFAULT_OPTIONS, multiple: true, lazy: { lazyLoadType: 'none', hasMoreItems: false, }, }, }, }; export const StaticCategoriesSingleSelect: Story = { ...Template, args: { label: 'Company', field: 'company', selectedValue: undefined, options: { listboxItems: [ { label: 'Category 1', value: 1, items: [ { label: 'Option 1', value: 10 }, { label: 'Option 2', value: 20 }, ], }, { label: 'Category 2', value: 2, items: [ { label: 'Option 3', value: 30 }, { label: 'Option 4', value: 40 }, ], }, ], staticCategories: true, }, }, }; export const StaticCategoriesMultiSelect: Story = { ...Template, args: { label: 'Company', field: 'company', selectedValue: undefined, options: { listboxItems: [ { label: 'Category 1', value: 1, items: [ { label: 'Option 1', value: 10 }, { label: 'Option 2', value: 20 }, ], }, { label: 'Category 2', value: 2, items: [ { label: 'Option 3', value: 30 }, { label: 'Option 4', value: 40 }, ], }, ], staticCategories: true, multiple: true, }, }, }; export const NestedMultiSelect: Story = { ...Template, args: { label: 'Company', field: 'company', selectedValue: [10], options: { isOptionDisabled: option => [3, 5].includes(option.value), listboxItems: [ { label: 'Category 1', value: 1, items: [ { label: 'Option 1', value: 10 }, { label: 'Option 2', value: 20 }, ], }, { label: 'Category 2', value: 2, items: [ { label: 'Option 3', value: 30 }, { label: 'Option 4', value: 40 }, ], }, ], multiple: true, lazy: { lazyLoadType: 'none', hasMoreItems: false, }, }, }, }; export const SearchAPI: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectFilter }, props: Object.keys(argTypes), setup(props) { const apiItems = ref(DEFAULT_OPTIONS); const selectedValues = ref(props.selectedValue); const search = { debounceTime: 2000, searchEvent: (val: string) => { action('searchEvent')(val); if (val) { apiItems.value = []; } else { apiItems.value = DEFAULT_OPTIONS; } }, }; const options = computed(() => ({ isOptionDisabled: option => [3, 5].includes(option), listboxItems: apiItems.value, search, })); const updateFilter = newFilterValue => { action('update')(newFilterValue); selectedValues.value = newFilterValue.value; }; return { selectedValues, updateFilter, options, }; }, template: ` <div style="padding-top: 24px"> <bento-select-filter :value="selectedValues" :options="options" label="hello" field="company" @update="updateFilter" /> </div> `, }), }; export const SingleSelectWithDefault: Story = { ...Template, args: { label: 'Company', field: 'company', selectedValue: 1, defaultValue: 1, options: { isOptionDisabled: option => [3, 5].includes(option), listboxItems: DEFAULT_OPTIONS, lazy: { lazyLoadType: 'button', hasMoreItems: true, showMoreEvent: action('showMoreEvent'), loading: true, }, }, }, }; export const SelectOnlySlot: Story = { ...Template, args: { label: 'Company', field: 'company', selectedValue: 1, defaultValue: 1, onlySlot: true, options: { listboxItems: DEFAULT_OPTIONS, multiple: false, }, }, }; export const ExternalFiltering: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectFilter, BentoTypography }, props: Object.keys(argTypes), template: ` <bento-typography> <span>This story showcases how you can hook your own handler into the dropdown's search event. Check the 'actions' section as you're searching to see what event is being emitted!</span> <div style="margin-top: 20px; max-width: 300px"> <bento-select-filter v-bind="args" :options="selectOptions" :value="selectedValue" @input="onInput" @update="updateFilter" /> </div> </bento-typography> `, setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref<BentoSelectFilterValue>(null); const internalList = ref<BentoListboxOptions>(args.options.listboxItems); const setList = (items: BentoListboxOptions) => { internalList.value = items; }; const searchForValue = (searchString: string) => { if (!searchString || !searchString.length) { setList(args.options.listboxItems); return; } const currentId = parseInt(searchString, 10); if (isNaN(currentId)) { setList([]); return; } const repeatValue = (value, times) => String(value).repeat(times); setList( new Array(10).fill(0).map((_, index) => ({ value: repeatValue(currentId, index + 1), label: `Option ${repeatValue(currentId, index + 1)}`, })) ); }; const selectOptions = computed<BentoSelectFilterOptions>(() => ({ listboxItems: internalList.value, search: { searchEvent: value => { searchForValue(value); }, }, })); const onInput = newFilterValue => { action('input')(newFilterValue); }; const updateFilter = newSelectedValue => { selectedValue.value = newSelectedValue.value; action('update')(newSelectedValue); }; return { // Values args, selectedValue, selectOptions, // Methods onInput, updateFilter, }; }, }), args: { label: 'Company', field: 'company', selectedValue: 1, defaultValue: 1, options: { listboxItems: DEFAULT_OPTIONS, }, }, }; export const ExternalValues: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectFilter, BentoTypography }, props: Object.keys(argTypes), template: ` <bento-select-filter v-bind="args" :options="args.options" :value="selectedValue" @update="updateValues" /> `, setup(props) { // Value not in list from external data const selectedValue = ref<BentoSelectFilterValue>(['four']); const updateValues = options => { selectedValue.value = options.value; }; return { args: isVue2 ? props : _args, selectedValue, selectedOptions: props.options, updateValues, }; }, }), args: { label: 'Company', field: 'company', options: { multiple: true, listboxItems: [ { value: 'one', label: 'One' }, { value: 'two', label: 'Two' }, { value: 'three', label: 'Three' }, ], }, }, }; 

package/dist/assets/components/filter-bar/components/select-filter/select-filter.vue

@@ -0,0 +1 @@
+<template> <select-filter-dropdown v-if="onlySlot" :disabled="disabled" :default-value="defaultValue" :field="field" :label="label" :options="options" :value="value" @input="onInput" @update="onUpdate" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </select-filter-dropdown> <select-filter-button v-else :disabled="disabled" :default-value="defaultValue" :field="field" :label="label" :options="options" :value="value" @input="onInput" @update="onUpdate" > <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> <slot :name="innerSlot" v-bind="scope" /> </template> </select-filter-button> </template> <script setup lang="ts"> import { SelectFilterButton, SelectFilterDropdown } from './components'; import { onMounted, useSlots } from 'vue'; import { deprecate } from '@/utils/ts/deprecate'; import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props'; const slots = useSlots(); const emit = defineEmits<{ (e: 'input', updatedProps: any): void; (e: 'update', updatedProps: any): void; }>(); const props = defineProps(SelectFilterProps); const onInput = (updatedProps: any) => emit('input', updatedProps); const onUpdate = (updatedProps: any) => emit('update', updatedProps); onMounted(() => { if (props?.options?.messages) { deprecate( 'BentoFilterBar filter of type "BentoFilterItemType.SELECT" options message property', `Please remove the "options.messages" property from this filter, it is not required any more for persistent filters. This will be the default behavior in the v2 and "options.messages" will be removed.`, '2.0.0' ); } }); </script> <script lang="ts"> /** * The Listbox filter displays a listbox of items * passed in the "options.listboxItems" property. * * @example * import { BentoSelectFilter } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectFilter }, * template: ` * <bento-select-filter * :field="filter.field" * :label="filter.label" * :options="filter.options" * :value="filter.value" * @update="updateFilterHandler" * > * ` * } */ export default {}; </script> 

package/dist/assets/components/filter-bar/components/select-filter/variants/select-avatar-filter/select-avatar-filter.stories.ts

@@ -0,0 +1 @@
+import { ref } from 'vue'; import { action } from '@storybook/addon-actions'; import { type BentoSelectAvatarFilterOptions } from '../../../../filter-bar.types'; import { storybookDocsParameter } from '../../../../../../utils/ts/storybook'; import { BentoSelectAvatarFilter } from './index'; import { isVue2 } from 'vue-demi'; const OPTIONS: BentoSelectAvatarFilterOptions = { listboxItems: [ { label: 'Avatar 1', value: 'avatar-1', }, { label: 'Avatar 2', value: 'avatar-2', }, ], }; export default { title: 'Filter bar/Select avatar filter', component: BentoSelectAvatarFilter, argTypes: { // Slots field: { name: 'field', type: { name: 'string', required: false }, description: 'Filter name/key referencing the actual property name in the data set. Should be unique per filter bar.', control: 'text', table: { type: { summary: 'string' }, }, }, label: { name: 'label', type: { name: 'string', required: false }, description: 'Label text to be displayed', control: 'text', table: { type: { summary: 'string' }, }, }, value: { name: 'value', type: { name: 'string', required: true }, description: 'Current value of the filter', control: { disable: true }, table: { type: { summary: 'string, number, Array<string, number>' }, }, }, // Events eventName: { name: 'update', defaultValue: '', description: 'Description waht the event is for', table: { type: { summary: '() => void' } }, control: { disable: true }, }, }, }; export const Default = (_args, { argTypes }) => ({ components: { BentoSelectAvatarFilter }, props: Object.keys(argTypes), template: ` <bento-select-avatar-filter v-bind="args" :value="valueRef" @update="onSelected"/> `, setup(props) { const valueRef = ref(); const onSelected = selectedValue => { valueRef.value = selectedValue.value; action('update')(selectedValue); }; return { // Values args: isVue2 ? props : _args, valueRef, // Events onSelected, }; }, }); Default.args = { field: 'Avatar', label: 'Avatar', options: OPTIONS, }; Default.parameters = storybookDocsParameter(` <bento-select-avatar-filter v-model="selectedValue" :options="{ listboxOptions: [ { label: 'Avatar 1', value: 'avatar-id-1' }, { label: 'Avatar 2', value: 'avatar-id-2', src: 'image-source.jpeg' }, ]" }", label="Avatar" field="avatar" /> `); 

package/dist/assets/components/filter-bar/components/select-filter/variants/select-avatar-filter/select-avatar-filter.vue

@@ -0,0 +1 @@
+<template> <bento-select-filter v-slot="{ label: slotLabel, data }" v-bind="$props" :field="field" :label="label" @update="onUpdate" @input="e => $emit(BentoFilterEvent.INPUT, e)" > <bento-avatar :username="slotLabel" :src="data" /> </bento-select-filter> </template> <script lang="ts"> import { defineComponent, type PropType } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoSelectFilter } from '../../index'; import { BentoFilterEvent, type BentoSelectAvatarFilterOptions } from '@/components/filter-bar/filter-bar.types'; import { BentoAvatar } from '@/components/avatar'; import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props'; /** * The Select Avatar filter displays a listbox of avatar items * passed in the "options.listboxItems" property. * * @example * import { BentoSelectAvatarFilter } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectAvatarFilter }, * template: ` * <bento-select-avatar-filter * :field="avatar" * :label="Avatar" * :options="{ * listboxItems: [{ * label: 'Avatar 1', * value: 'avatar-2' * }, { * label: 'Avatar 2', * value: 'avatar-2' * }], * :multiple="false" * }" * value="avatar-2" * @update="updateFilterHandler" * > * ` * } */ export default defineComponent({ name: 'bento-select-avatar-filter', components: { BentoSelectFilter, BentoAvatar, }, props: { ...SelectFilterProps, /** * List of options that are needed to setup the country filter * Available options: * - multiple: If "true", the user will be able to select multiple items. * - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions} */ options: { type: Object as PropType<BentoSelectAvatarFilterOptions>, default: undefined, }, }, emits: [BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE], setup(_, { emit }) { const onUpdate = (selectedValue: BentoListboxSelectedValue) => emit(BentoFilterEvent.UPDATE, selectedValue); return { // Enums BentoFilterEvent, // Methods onUpdate, }; }, }); </script> 

package/dist/assets/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.stories.ts

@@ -0,0 +1 @@
+import { ref } from 'vue'; import { action } from '@storybook/addon-actions'; import { BentoCountryCode } from '@/components/country/country.types'; import { type BentoSelectCountryFilterOptions } from '../../../../filter-bar.types'; import BentoSelectCountryFilter from './select-country-filter.vue'; import { isVue2 } from 'vue-demi'; const OPTIONS: BentoSelectCountryFilterOptions = { listboxItems: [ { label: 'Netherlands', value: BentoCountryCode.NL, }, { label: 'Belgium', value: BentoCountryCode.BE, }, ], variant: 'capital', }; export default { title: 'Filter bar/Select country filter', component: BentoSelectCountryFilter, argTypes: { // Slots field: { name: 'field', type: { name: 'string', required: false }, description: 'Filter name/key referencing the actual property name in the data set. Should be unique per filter bar.', control: 'text', table: { type: { summary: 'string' }, }, }, label: { name: 'label', type: { name: 'string', required: false }, description: 'Label text to be displayed', control: 'text', table: { type: { summary: 'string' }, }, }, value: { name: 'value', type: { name: 'string', required: true }, description: 'Current value of the filter', control: { disable: true }, table: { type: { summary: 'string, number, Array<string, number>' }, }, }, // Events eventName: { name: 'update', defaultValue: '', description: 'Description waht the event is for', table: { type: { summary: '() => void' } }, control: { disable: true }, }, }, }; const Template = (_args, { argTypes }) => ({ components: { BentoSelectCountryFilter }, props: Object.keys(argTypes), template: ` <bento-select-country-filter v-bind="args" :value="valueRef" @update="onSelected"/> `, setup(props) { const valueRef = ref(); const onSelected = selectedValue => { valueRef.value = selectedValue.value; action('update')(selectedValue); }; return { // Values args: isVue2 ? props : _args, valueRef, // Events onSelected, }; }, }); export const SingleSelect = Template.bind({}); SingleSelect.args = { field: 'country', label: 'Country/Region', options: OPTIONS, }; export const MultiSelect = Template.bind({}); MultiSelect.args = { field: 'country', label: 'Country/Region', multiple: true, options: { ...OPTIONS, multiple: true }, }; 

package/dist/assets/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue

@@ -0,0 +1 @@
+<template> <bento-select-filter v-slot="{ label: slotLabel }" v-bind="props" :field="field" :label="label" :options="countryOptions" @update="onUpdate" @input="e => $emit(BentoFilterEvent.INPUT, e)" > <bento-typography el="span">{{ slotLabel }}</bento-typography> </bento-select-filter> </template> <script setup lang="ts"> import { computed, type PropType, ref, watch } from 'vue'; import { useCountryItems } from '@/components/dropdown/components/variants/dropdown-country/composables/use-country-items'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoFilterEvent, type BentoSelectCountryFilterOptions } from '@/components/filter-bar/filter-bar.types'; import { deprecate } from '@/utils/ts/deprecate'; import { BentoTypography } from '@/components/typography'; import BentoSelectFilter from '../../select-filter.vue'; import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props'; const props = defineProps({ ...SelectFilterProps, /** * List of options that are needed to setup the country filter * Available options: * - multiple: If "true", the user will be able to select multiple items. * - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions} * - variant: Which label variant to display for the option item. */ options: { type: Object as PropType<BentoSelectCountryFilterOptions>, default: undefined, }, }); const emit = defineEmits([BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE]); const variant = ref(props.options.variant); const listboxItems = ref(props.options.listboxItems); watch([() => props.options.variant, () => props.options.listboxItems], () => { variant.value = props.options.variant; listboxItems.value = props.options.listboxItems; }); const onUpdate = (selectedValue: BentoListboxSelectedValue) => emit(BentoFilterEvent.UPDATE, selectedValue); const countryItems = useCountryItems(variant, listboxItems); const countryOptions = computed(() => { return { ...(props?.options ? props.options : {}), listboxItems: countryItems.value, }; }); if (!variant.value || variant.value === 'custom') { deprecate( 'BentoSelectCountryFilter type with `options.variant==="custom"`', 'Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels', '2.0.0' ); } </script> <script lang="ts"> /** * The Select Country filter displays a listbox of country items * passed in the "options.listboxItems" property. * * @example * import { BentoSelectCountryFilter } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectCountryFilter }, * template: ` * <bento-select-country-filter * :field="country" * :label="Country" * :options="{ * listboxItems: [{ * value: "NL", * }, { * value: "BE", * }], * variant: 'capital' * }" * :value="BE" * @update="updateFilterHandler" * > * ` * } */ export default { name: 'bento-select-country-filter', }; </script> 

package/dist/assets/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { type BentoSelectCurrencyFilterOptions } from '@/components/filter-bar/filter-bar.types'; import { ref } from 'vue'; import { BentoCurrencyISOCode } from '@/components/currency/currency.types'; import BentoSelectCurrencyFilter from './select-currency-filter.vue'; import { isVue2 } from 'vue-demi'; const OPTIONS: BentoSelectCurrencyFilterOptions = { listboxItems: [ { label: 'Euro', value: BentoCurrencyISOCode.EUR, }, { label: 'US Dollars', value: BentoCurrencyISOCode.USD, }, ], }; export default { title: 'Filter bar/Select currency filter', component: BentoSelectCurrencyFilter, // Slots field: { name: 'field', type: { name: 'string', required: false }, description: 'Filter name/key referencing the actual property name in the data set. Should be unique per filter bar.', control: 'text', table: { type: { summary: 'string' }, }, }, label: { name: 'label', type: { name: 'string', required: false }, description: 'Label text to be displayed', control: 'text', table: { type: { summary: 'string' }, }, }, value: { name: 'value', type: { name: 'string', required: true }, description: 'Current value of the filter', control: { disable: true }, table: { type: { summary: 'string, number, Array<string, number>' }, }, }, // Events eventName: { name: 'update', defaultValue: '', description: 'Triggered whenever the filter is updated by applying the selection.', table: { type: { summary: '() => void' } }, control: { disable: true }, }, }; export const Default = (_args, { argTypes }) => ({ components: { BentoSelectCurrencyFilter }, props: Object.keys(argTypes), template: ` <bento-select-currency-filter v-bind="args" :value="valueRef" @update="clickedAction"/> `, setup(props) { const valueRef = ref(); const clickedAction = selectedValue => { valueRef.value = selectedValue.value; action('input')(selectedValue); }; return { // Values args: isVue2 ? props : _args, valueRef, // Events clickedAction, }; }, }); Default.args = { field: 'currency', label: 'Currency', options: OPTIONS, }; 

package/dist/assets/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue

@@ -0,0 +1 @@
+<template> <bento-select-filter v-slot="slotProps" v-bind="$props" :field="field" :label="label" :options="internalOptions" @update="onUpdate" @input="e => $emit(BentoFilterEvent.INPUT, e)" > <listbox-option-tag :option="slotProps" /> </bento-select-filter> </template> <script lang="ts"> import { computed, defineComponent, type PropType, ref, watch } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoSelectFilter } from '../../index'; import { ListboxOptionTag } from '@/internal'; import { BentoFilterEvent, type BentoSelectCurrencyFilterOptions } from '@/components/filter-bar/filter-bar.types'; import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props'; import { useSearchBarFilter } from '@/components/search-bar'; import { type BentoCurrencyListboxOptions } from '@/components/dropdown'; /** * The Select Country filter displays a listbox of country items * passed in the "options.listboxItems" property. * * @example * import { BentoCurrencyISOCode, BentoSelectCurrencyFilter } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectCurrencyFilter }, * template: ` * <bento-select-currency-filter * :field="currency" * :label="Currency" * :options="{ * listboxItems: [{ * label: 'Euro', * value: BentoCurrencyISOCode.EUR, * }, { * label: 'US Dollars', * value: BentoCurrencyISOCode.USD, * }], * multiple="false", * isOptionsDisabled="option => option.value === BentoCurrencyISOCode.USD" * }" * :value="BentoCurrencyISOCode.EUR" * @update="updateFilterHandler" * > * ` * } */ export default defineComponent({ name: 'bento-select-currency-filter', components: { BentoSelectFilter, ListboxOptionTag, }, props: { ...SelectFilterProps, /** * List of options that are needed to setup the country filter * Available options: * - multiple: If "true", the user will be able to select multiple items. * - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions} */ options: { type: Object as PropType<BentoSelectCurrencyFilterOptions>, default: undefined, }, }, emits: [BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE], setup(props, { emit }) { const onUpdate = (selectedValue: BentoListboxSelectedValue) => { emit(BentoFilterEvent.UPDATE, selectedValue); }; // If the parent updates the list, the local reference needs to be updated so the UI isn't empty on load const filteredItems = ref<BentoCurrencyListboxOptions>([]); watch( () => props.options?.listboxItems, newList => { filteredItems.value = newList || []; }, { immediate: true } ); const search = props.options?.search ? props.options.search : { debounceTime: 500, searchEvent: async (searchTerm: string) => { // Combine value and label to be able to search by the currency code // If searchTerm is empty, reset to the full list if (!searchTerm) { filteredItems.value = props.options?.listboxItems || []; return; } const searchableItems = (props.options?.listboxItems || []).map(item => ({ ...item, label: `${item.value} ${item.label}`, })); const searchResults = useSearchBarFilter( ref(searchTerm), ref<BentoCurrencyListboxOptions>(searchableItems), props.options?.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; }, }; const internalOptions = computed(() => ({ ...props.options, search: search, listboxItems: filteredItems.value, })); return { // Enums BentoFilterEvent, // Methods onUpdate, internalOptions, }; }, }); </script> 

package/dist/assets/components/filter-bar/components/select-filter/variants/select-payment-method-filter/select-payment-method-filter.stories.ts

@@ -0,0 +1 @@
+import { ref } from 'vue'; import { action } from '@storybook/addon-actions'; import { type BentoSelectPaymentMethodFilterOptions } from '@/components/filter-bar/filter-bar.types'; import BentoSelectPaymentMethodFilter from './select-payment-method-filter.vue'; import { isVue2 } from 'vue-demi'; const OPTIONS: BentoSelectPaymentMethodFilterOptions = { listboxItems: [ { label: 'iDEAL', value: 'ideal' }, { label: 'Visa', value: 'visa' }, ], }; export default { title: 'Filter bar/Select payment method filter', component: BentoSelectPaymentMethodFilter, argTypes: { // Slots field: { name: 'field', type: { name: 'string', required: false }, description: 'Filter name/key referencing the actual property name in the data set. Should be unique per filter bar.', control: 'text', table: { type: { summary: 'string' }, }, }, label: { name: 'label', type: { name: 'string', required: false }, description: 'Label text to be displayed', control: 'text', table: { type: { summary: 'string' }, }, }, value: { name: 'value', type: { name: 'string', required: true }, description: 'Current value of the filter', control: { disable: true }, table: { type: { summary: 'string, number, Array<string, number>' }, }, }, // Events eventName: { name: 'update', defaultValue: '', description: 'Description waht the event is for', table: { type: { summary: '() => void' } }, control: { disable: true }, }, }, }; const Template = (_args, { argTypes }) => ({ components: { BentoSelectPaymentMethodFilter }, props: Object.keys(argTypes), template: ` <bento-select-payment-method-filter v-bind="args" :value="valueRef" @update="onSelected"/> `, setup(props) { const valueRef = ref(); const onSelected = selectedValue => { valueRef.value = selectedValue.value; action('update')(selectedValue); }; return { // Values args: isVue2 ? props : _args, valueRef, // Events onSelected, }; }, }); export const SingleSelect = Template.bind({}); SingleSelect.args = { field: 'paymentMethod', label: 'Payment method', options: OPTIONS, }; export const MultiSelect = Template.bind({}); MultiSelect.args = { field: 'paymentMethod', label: 'Payment method', multiple: true, options: { ...OPTIONS, multiple: true }, }; 

package/dist/assets/components/filter-bar/components/select-filter/variants/select-payment-method-filter/select-payment-method-filter.vue

@@ -0,0 +1 @@
+<template> <bento-select-filter v-slot="{ value, label: slotLabel }" v-bind="$props" :field="field" :label="label" @update="onUpdate" @input="e => $emit(BentoFilterEvent.INPUT, e)" > <bento-payment-method :type="value" :label="slotLabel" /> </bento-select-filter> </template> <script lang="ts"> import { defineComponent, type PropType } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoSelectFilter } from '../../index'; import { BentoFilterEvent, type BentoSelectPaymentMethodFilterOptions, } from '@/components/filter-bar/filter-bar.types'; import { BentoPaymentMethod } from '@/components/payment-method'; import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props'; /** * The Select Payment Method filter displays a listbox of country items * passed in the "options.listboxItems" property to be used in the FilterBar component. * * @example * import { BentoSelectPaymentMethodFilter } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectPaymentMethodFilter }, * template: ` * <bento-select-paymnent-method-filter * :field="paymentMethod" * :label="Payment method" * :options="{ * listboxItems: [ * { label: 'Option 1', value: 'ideal' }, * { label: 'Option 2', value: 'visa' }, * ], * }" * value="ideal" * @update="updateFilterHandler" * > * ` * } */ export default defineComponent({ name: 'bento-select-payment-method-filter', components: { BentoSelectFilter, BentoPaymentMethod, }, props: { ...SelectFilterProps, /** * List of options that are needed to setup the payment method filter * Available options: * - multiple: If "true", the user will be able to select multiple items. * - listboxItems: The option elements to populate the filter with {@see BentoSelectPaymentMethodFilterOptions} */ options: { type: Object as PropType<BentoSelectPaymentMethodFilterOptions>, default: undefined, }, }, emits: [BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE], setup(_props, { emit }) { const onUpdate = (selectedValue: BentoListboxSelectedValue) => emit(BentoFilterEvent.UPDATE, selectedValue); return { // Enums BentoFilterEvent, // Methods onUpdate, }; }, }); </script> 

package/dist/assets/components/filter-bar/components/select-filter/variants/select-tag-filter/select-tag-filter.stories.ts

@@ -0,0 +1 @@
+import { ref } from 'vue'; import { action } from '@storybook/addon-actions'; import { type BentoSelectTagFilterOptions } from '@/components/filter-bar/filter-bar.types'; import BentoSelectTagFilter from './select-tag-filter.vue'; import { isVue2 } from 'vue-demi'; const OPTIONS: BentoSelectTagFilterOptions = { listboxItems: [ { 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', value: 'unique-id-4', variant: 'blue' }, ], }; export default { title: 'Filter bar/Select tag filter', component: BentoSelectTagFilter, argTypes: { // Slots field: { name: 'field', type: { name: 'string', required: false }, description: 'Filter name/key referencing the actual property name in the data set. Should be unique per filter bar.', control: 'text', table: { type: { summary: 'string' }, }, }, label: { name: 'label', type: { name: 'string', required: false }, description: 'Label text to be displayed', control: 'text', table: { type: { summary: 'string' }, }, }, value: { name: 'value', type: { name: 'string', required: true }, description: 'Current value of the filter', control: { disable: true }, table: { type: { summary: 'string, number, Array<string, number>' }, }, }, // Events eventName: { name: 'update', defaultValue: '', description: 'Description waht the event is for', table: { type: { summary: '() => void' } }, control: { disable: true }, }, }, }; const Template = (_args, { argTypes }) => ({ components: { BentoSelectTagFilter }, props: Object.keys(argTypes), template: ` <bento-select-tag-filter v-bind="args" :value="valueRef" @update="onSelected"/> `, setup(props) { const valueRef = ref(); const onSelected = selectedValue => { valueRef.value = selectedValue.value; action('update')(selectedValue); }; return { // Values args: isVue2 ? props : _args, valueRef, // Events onSelected, }; }, }); export const SingleSelect = Template.bind({}); SingleSelect.args = { field: 'tag', label: 'Tag', options: OPTIONS, }; export const MultiSelect = Template.bind({}); MultiSelect.args = { field: 'tag', label: 'Tag', multiple: true, options: { ...OPTIONS, multiple: true }, }; 

package/dist/assets/components/filter-bar/components/select-filter/variants/select-tag-filter/select-tag-filter.vue

@@ -0,0 +1 @@
+<template> <bento-select-filter v-slot="{ label: slotLabel, data }" v-bind="$props" :field="field" :label="label" :options="countryOptions" @update="onUpdate" @input="e => $emit(BentoFilterEvent.INPUT, e)" > <listbox-option-tag :option="{ value: slotLabel, data, label: '' }" /> </bento-select-filter> </template> <script lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import { type BentoListboxSelectedValue } from '@/types/listbox'; import { BentoSelectFilter } from '../../index'; import { BentoFilterEvent, type BentoSelectTagFilterOptions } from '@/components/filter-bar/filter-bar.types'; import { ListboxOptionTag } from '@/internal'; import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props'; /** * The Select Tag filter displays a listbox of tag items * passed in the "options.listboxItems" property. * * @example * import { BentoSelectTagFilter } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectTagFilter }, * template: ` * <bento-select-tag-filter * :field="tag" * :label="Tag" * :options="{ * listboxItems: [ * { 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' }, * ] * }" * :value="'unique-id-4'" * @update="updateFilterHandler" * > * ` * } */ export default defineComponent({ name: 'bento-select-country-filter', components: { BentoSelectFilter, ListboxOptionTag, }, props: { ...SelectFilterProps, /** * List of options that are needed to setup the tag filter * Available options: * - multiple: If "true", the user will be able to select multiple items. * - listboxItems: The option elements to populate the filter with {@see BentoSelectTagFilterOptions} */ options: { type: Object as PropType<BentoSelectTagFilterOptions>, default: undefined, }, }, emits: [BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE], setup(props, { emit }) { const onUpdate = (selectedValue: BentoListboxSelectedValue) => emit(BentoFilterEvent.UPDATE, selectedValue); const tagItems = computed(() => props?.options?.listboxItems?.map(({ label, value, variant }) => ({ label, value, data: variant })) ); const countryOptions = computed(() => ({ ...props.options, listboxItems: tagItems.value, })); return { // Values countryOptions, // Methods onUpdate, // Enums BentoFilterEvent, }; }, }); </script> 

package/dist/assets/components/filter-bar/components/toggle-filter/toggle-filter.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import BentoToggleFilter from './toggle-filter.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { type BentoToggleFilterProps } from './toggle-filter.types'; const meta: Meta = { title: 'Filter bar/Toggle filter', component: BentoToggleFilter, }; export default meta; type Story = StoryObj<typeof BentoToggleFilter>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoToggleFilter }, props: Object.keys(argTypes), template: ` <bento-toggle-filter v-bind="args" @input="onInput" @update="onUpdate"/> `, setup(props) { const onInput = action('input'); const onUpdate = action('update'); return { args: isVue2 ? props : _args, onInput, onUpdate, }; }, }), args: { label: 'Filter name', field: 'filter-name', disabled: false, onlySlot: false, description: 'Optional short filter description goes here. Some filters may not be self-explanatory just from the name itself.', options: { tooltipPosition: 'bottom', tooltipText: 'Tooltip text', }, } satisfies BentoToggleFilterProps, }; 

package/dist/assets/components/filter-bar/components/toggle-filter/toggle-filter.vue

@@ -0,0 +1 @@
+<template> <filter-bar-button-group v-if="!onlySlot" v-bento-tooltip-directive:[options?.tooltipPosition]="options?.tooltipText" :skip-grouping="!internalValue" > <filter-bar-button :aria-pressed="internalValue ? 'true' : 'false'" :active="internalValue" :disabled="disabled" @click="toggleFilter" > <div class="b-toggle-filter"> {{ label }} <checkmark-icon v-show="internalValue" aria-hidden="true" class="b-toggle-filter__checkmark" /> </div> </filter-bar-button> <filter-bar-button v-if="internalValue" :aria-label="t('resetFilter', { filterName: label })" :disabled="disabled" :active="internalValue" @click="resetFilter" > <template #iconLeft> <cross-small-icon aria-hidden="true" /> </template> </filter-bar-button> </filter-bar-button-group> <label v-else class="b-toggle-filter__only-slot" :class="onlySlotConditionalClasses"> <checkbox-input :aria-labelledby="checkboxLabelId" :aria-describedby="checkboxDescriptionId" :disabled="disabled" class="b-toggle-filter__checkbox" :model-value="internalValue" @update:model-value="onInput" ></checkbox-input> <div class="b-toggle-filter__content"> <bento-typography :id="checkboxLabelId" variant="title" medium>{{ label }}</bento-typography> <bento-typography v-if="description" :id="checkboxDescriptionId">{{ description }}</bento-typography> </div> </label> </template> <script setup lang="ts"> import { computed, ref, watch } from 'vue'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip/tooltip'; import { FilterBarButtonGroup } from '../filter-bar-button-group'; import { FilterBarButton } from '../filter-bar-button'; import { type BentoToggleFilterProps, type BentoToggleFilterValue } from './toggle-filter.types'; import { CheckboxInput } from '@/internal/checkbox-input'; import { BentoTypography } from '@/components/typography'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import CheckmarkIcon from '@adyen/ui-assets-icons-16/vue/checkmark'; import CrossSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-small'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); /** * IDs used for the checkbox a11y */ const checkboxLabelId = generateUid('toggle-filter-checkbox-label'); const checkboxDescriptionId = generateUid('toggle-filter-checkbox-description'); const props = withDefaults(defineProps<BentoToggleFilterProps>(), { disabled: false, onlySlot: false, options: undefined, value: false, }); const emit = defineEmits<{ /** * Used in the All filters modal */ (e: 'input', updatedProps: BentoToggleFilterProps): void; /** * Used in the Filter Bar */ (e: 'update', updatedProps: BentoToggleFilterProps): void; }>(); /** * Toggle internal field in sync with props.value */ const internalValue = ref<BentoToggleFilterValue>(props.value); watch( () => props.value, value => { internalValue.value = value; } ); const onlySlotConditionalClasses = computed(() => ({ 'b-toggle-filter__only-slot--disabled': props.disabled, })); /** * Used only for the checkbox. * Input emitted for the `all filters` modal * @param value new checkbox value */ const onInput = (value: BentoToggleFilterValue) => { internalValue.value = value; emit('input', { ...props, value }); }; /** * Applies the filter. * Update emitted for the filter bar. Updates all props */ const updateProps = () => { emit('update', { ...props, value: internalValue.value }); }; /** * Toggles filter with the main part (left side button) */ const toggleFilter = () => { internalValue.value = !internalValue.value; updateProps(); }; /** * Resets filter with the main part (left side button). * Has no persistent filter functionality. */ const resetFilter = () => { internalValue.value = false; updateProps(); }; </script> <script lang="ts"> /** * Toggle filter. * * @example * import { BentoToggleFilter } from './toggle-filter'; * * export default { * components: { BentoToggleFilter }, * template: ` * <bento-toggle-filter * label="Toggle filter" * field="toggle-filter" * only-slot * disabled * :value="true" * :tooltip-text="Tooltip text" * tooltip-position="top" * /> * ` * } */ export default { i18n: { messages }, name: 'bento-toggle-filter', }; </script> <style lang="scss" scoped src="./toggle-filter.scss" />