@adyen/bento-mcp 0.0.0 → 0.1.0

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

@@ -0,0 +1 @@
+import { computed, onMounted, ref } from 'vue'; import { action } from '@storybook/addon-actions'; import { type BentoDateRangeFilterOptions, type BentoFilterBarContainerSizeLayout, type BentoFilterBarModel, type BentoFilterBarSearchBarProps, type BentoFilterBarValue, BentoFilterItemType, type BentoFilterValueObject, type BentoFilterValues, } from './filter-bar.types'; import { getPokemonFromApi, storybookDocsParameter, withToastDecorator } from '@/utils/ts/storybook'; import { type BentoListboxOptions } from '@/types/listbox'; import { BentoCountryCode } from '@/components/country/country.types'; import { BentoCurrencyISOCode } from '@/components/currency/currency.types'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import { BentoToggle } from '@/components/toggle'; import BentoFilterBar from './filter-bar.vue'; import { endOfWeek } from 'date-fns/endOfWeek'; import { startOfWeek } from 'date-fns/startOfWeek'; import { subDays } from 'date-fns/subDays'; import { subWeeks } from 'date-fns/subWeeks'; import { subMonths } from 'date-fns/subMonths'; import { startOfMonth } from 'date-fns/startOfMonth'; import { endOfDay, startOfDay, subHours, subMinutes } from 'date-fns'; // Examples import FilterBarCustomFilterSubComponentSingleValueExample from './__tests__/filter-bar-custom-filter-sub-component-single-value-example.vue'; import FilterBarCustomFilterSubComponentMultiValueExample from './__tests__/filter-bar-custom-filter-sub-component-multiple-value-example.vue'; import FilterBarCustomFilterSubComponentWithPopoverExample from './__tests__/filter-bar-custom-filter-sub-component-with-popover-example.vue'; import FilterBarCustomFiltersExample from './__tests__/filter-bar-custom-filters-example.vue?raw'; // Generate array from 1 to # // { label: 'Option #', value: # }, const DEFAULT_OPTIONS: BentoListboxOptions = new Array(10) .fill(0) .map((_, index) => ({ label: `Option ${index + 1}`, value: index + 1 })); // To be used by as the current time across all date filters const CURRENT_DATE_AND_TIME = new Date(); const meta: Meta = { title: 'Filter bar', component: BentoFilterBar, decorators: [withToastDecorator], argTypes: { // Props searchTerm: { name: 'searchTerm', defaultValue: undefined, description: "Search term useful to filter all the data by text. If the value is non-existant (`null` or `undefined`) the search bar won't be enabled.", control: { type: 'text', }, }, // Events input: { name: 'input', defaultValue: '', description: 'Triggered whenever the filters are updated.', table: { type: { summary: '([{ field, label, value, type }]) => void' } }, control: { disable: true }, }, // Search Events 'search-input': { name: 'search-input', defaultValue: '', description: "Triggered whenever the filter's search is updated.", table: { type: { summary: '(newSearchTerm) => void' } }, control: { disable: true }, }, 'search-clear': { name: 'search-clear', defaultValue: '', description: "Triggered whenever the filter's search is cleared.", table: { type: { summary: '() => void' } }, control: { disable: true }, }, 'update:search-term': { name: 'update:search-term', defaultValue: '', description: "Triggered whenever the filter's search is updated to sync the model.", table: { type: { summary: '(newSearchTerm) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoFilterBar>; const FILTER_VALUES: BentoFilterValues = [ { field: 'input', value: undefined, }, { field: 'boolean', value: 'yes', }, { field: 'input-with-dropdown', value: undefined, }, { field: 'hidden-input', value: 'Active value of a hidden filter', }, { field: 'merchant', value: 2, }, { field: 'company', value: [1, 3, 5], }, { field: 'nested-select', value: ['amsterdam', 'den-haag'], }, { field: 'currency', value: [], }, { field: 'range', value: ['', ''], }, { field: 'date', value: CURRENT_DATE_AND_TIME, }, { field: 'date-range', value: { startDate: subDays(startOfDay(CURRENT_DATE_AND_TIME), 2), endDate: endOfDay(CURRENT_DATE_AND_TIME) }, }, { field: 'granular-date-range', value: { startDate: subDays(CURRENT_DATE_AND_TIME, 2), endDate: CURRENT_DATE_AND_TIME }, }, { field: 'date-range-month', value: { startDate: startOfMonth(subMonths(CURRENT_DATE_AND_TIME, 2)), endDate: startOfMonth(CURRENT_DATE_AND_TIME), }, }, { field: 'paymentMethod', value: undefined, }, { field: 'checkbox-group', value: [], }, { field: 'toggle', value: true, }, ]; const FILTERS: BentoFilterBarModel = [ { field: 'input', label: 'Input filter', type: BentoFilterItemType.INPUT, options: { placeholder: 'Input filter placeholder', tooltipPosition: 'bottom', tooltipText: 'Input filter tooltip text', }, visible: true, }, { field: 'input-with-dropdown', label: 'Input with dropdown filter', type: BentoFilterItemType.INPUT_DROPDOWN, visible: true, options: { dropdown: { items: [ { label: 'EUR', value: 'EUR' }, { label: 'USD', value: 'USD' }, ], modelValue: 'EUR', dynamicFiltering: true, }, }, }, { field: 'hidden-input', label: 'Hidden input filter', description: 'This is a hidden input filter only visible through the modal', type: BentoFilterItemType.INPUT, }, { field: 'country', label: 'Country/Region', options: { listboxItems: [ { label: 'Option 1', value: BentoCountryCode.NL, }, { label: 'Option 2', value: BentoCountryCode.BE, }, ], multiple: true, variant: 'capital', }, type: BentoFilterItemType.SELECT_COUNTRY, }, { field: 'avatar', label: 'Avatar', options: { listboxItems: [ { label: 'Avatar 1', value: 'avatar-1', }, { label: 'Avatar 2', value: 'avatar-2', }, ], }, type: BentoFilterItemType.SELECT_AVATAR, }, { field: 'merchant', label: 'Merchant', options: { listboxItems: DEFAULT_OPTIONS, enableValueLabelPair: true, isOptionDisabled: option => option.value === 3, }, type: BentoFilterItemType.SELECT, visible: true, }, { field: 'company', label: 'Company', options: { listboxItems: DEFAULT_OPTIONS, enableValueLabelPair: true, isOptionDisabled: option => option.value === 5, multiple: true, }, type: BentoFilterItemType.SELECT, visible: true, }, { field: 'nested-select', label: 'Nested select', options: { listboxItems: [ { label: 'Belgium', description: 'Country/Region', value: 'belgium', }, { label: 'Netherlands', description: 'Country/Region', value: 'netherlands', items: [ { label: 'Amsterdam', description: 'City', value: 'amsterdam', }, { label: 'Den Haag', description: 'City', value: 'den-haag', }, ], }, ], multiple: true, }, type: BentoFilterItemType.SELECT, visible: true, }, { field: 'currency', label: 'Currency select', options: { listboxItems: [ { label: 'Euro', value: BentoCurrencyISOCode.EUR, }, { label: 'US Dollars', value: BentoCurrencyISOCode.USD, }, ], multiple: true, }, type: BentoFilterItemType.SELECT_CURRENCY, }, { field: 'range', label: 'Range', type: BentoFilterItemType.RANGE, visible: true, }, { field: 'date', label: 'Date', type: BentoFilterItemType.DATE, visible: true, }, { field: 'date-range', label: 'Date range', options: { allowTimeInput: true, numberOfMonths: 1, 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 three days', value: 'lastThreeDays', data: { startDate: subDays(startOfDay(CURRENT_DATE_AND_TIME), 2), }, }, { label: 'Last week', value: 'lastWeek', data: { startDate: subWeeks(startOfDay(CURRENT_DATE_AND_TIME), 1), }, }, ], } as BentoDateRangeFilterOptions, type: BentoFilterItemType.DATE_RANGE, visible: true, }, { field: 'granular-date-range', label: 'Granular date range', options: { allowTimeInput: true, numberOfMonths: 2, granularities: [{ type: 'daily' }, { type: 'weekly' }, { type: 'monthly', disabled: true }], min: subWeeks(startOfWeek(CURRENT_DATE_AND_TIME, { weekStartsOn: 1 }), 12), max: endOfWeek(CURRENT_DATE_AND_TIME, { weekStartsOn: 1 }), } as BentoDateRangeFilterOptions, type: BentoFilterItemType.DATE_RANGE, visible: true, }, { field: 'date-range-month', label: 'Date range (month)', options: { numberOfMonths: 2, variant: 'month', } as BentoDateRangeFilterOptions, type: BentoFilterItemType.DATE_RANGE, visible: true, }, { field: 'paymentMethod', label: 'Payment method', options: { listboxItems: [ { label: 'iDEAL', value: 'ideal' }, { label: 'Visa', value: 'visa' }, ], multiple: true, }, type: BentoFilterItemType.SELECT_PAYMENT_METHOD, }, { 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', value: 'unique-id-4', variant: 'blue' }, ], multiple: true, }, type: BentoFilterItemType.SELECT_TAG, }, { field: 'radio-group', label: 'Radio group', options: { items: [ { label: 'Option 1', value: 'option-1' }, { label: 'Option 2', value: 'option-2' }, { label: 'Option 3', value: 'option-3' }, ], }, visible: false, type: BentoFilterItemType.RADIO_GROUP, }, { field: 'checkbox-group', label: 'Checkbox group', options: { checkboxItems: [ { label: 'Item 1', value: 'unique-id-1' }, { label: 'Item 2', value: 'unique-id-2' }, { label: 'Item 3', value: 'unique-id-3' }, { label: 'Item with a very long name', value: 'unique-id-4' }, ], }, type: BentoFilterItemType.CHECKBOX_GROUP, visible: true, }, { field: 'toggle', label: 'Toggle', type: BentoFilterItemType.TOGGLE, visible: true, description: 'Optional description for the toggle filter', options: { tooltipPosition: 'bottom', tooltipText: 'Toggle filter tooltip text', }, }, ]; const FILTERS_WITH_DEFAULTS: BentoFilterBarModel = [ { field: 'input', label: 'Input filter', defaultValue: 'hello', type: BentoFilterItemType.INPUT, }, { field: 'input-with-dropdown', label: 'Input with dropdown filter', type: BentoFilterItemType.INPUT_DROPDOWN, visible: true, defaultValue: { inputValue: 'Peristent input filter', dropdownValue: 'EUR', }, options: { dropdown: { items: [ { label: 'EUR', value: 'EUR' }, { label: 'USD', value: 'USD' }, ], }, }, }, { field: 'range', label: 'Range', defaultValue: ['1', '4'], type: BentoFilterItemType.RANGE, }, { field: 'merchant', label: 'Merchants', defaultValue: ['merchant_1'], options: { listboxItems: [ { label: 'Merchant 1', value: 'merchant_1', }, { label: 'Merchant 2', value: 'merchant_2', }, { label: 'Merchant 3', value: 'merchant_3', }, ], multiple: true, enableValueLabelPair: true, }, type: BentoFilterItemType.SELECT, }, { field: 'thing', label: 'Things', defaultValue: 'merchant_1', options: { listboxItems: [ { label: 'Thing 1', value: 'merchant_1', }, { label: 'Thing 2', value: 'merchant_2', }, { label: 'Thing 3', value: 'merchant_3', }, ], }, type: BentoFilterItemType.SELECT, }, { field: 'country', label: 'Country/Region', options: { listboxItems: [ { label: 'Option 1', value: BentoCountryCode.NL, }, { label: 'Option 2', value: BentoCountryCode.BE, }, ], multiple: true, variant: 'capital', }, type: BentoFilterItemType.SELECT_COUNTRY, }, { field: 'radio-group', label: 'Radio group', defaultValue: 'option-1', options: { items: [ { label: 'Option 1', value: 'option-1' }, { label: 'Option 2', value: 'option-2' }, { label: 'Option 3', value: 'option-3' }, ], }, visible: false, type: BentoFilterItemType.RADIO_GROUP, }, { field: 'checkbox-group', label: 'Checkbox group', defaultValue: ['unique-id-1'], options: { checkboxItems: [ { label: 'Item 1', value: 'unique-id-1' }, { label: 'Item 2', value: 'unique-id-2' }, { label: 'Item 3', value: 'unique-id-3' }, { label: 'Item 4', value: 'unique-id-4' }, ], }, type: BentoFilterItemType.CHECKBOX_GROUP, }, ]; const defaultFilterTemplate = storybookDocsParameter(` <template> <bento-filter-bar :config="config" :filter-values="filterValues" :search-term.sync="searchTerm" @input="onFilter" @search-input="onSearchInput" @search-clear="onSearchClear" /> </template> <script setup lang="ts"> import { BentoFilterBar, BentoFilterItemType } from '@adyen/bento-vue2' import type { BentoFilterBarModel, BentoFilterValues } from '@adyen/bento-vue2' const searchTerm = ref<string>(undefined) const config = [{ field: 'name', label: 'Name', type: BentoFilterItemType.INPUT, visible: true, }, { field: 'merchant', label: 'Merchant', options: { listboxItems: DEFAULT_OPTIONS, }, type: BentoFilterItemType.SELECT, }, { field: 'company', label: 'Company', options: { listboxItems: DEFAULT_OPTIONS, isOptionDisabled: (option) => option.value === 5, multiple: true, }, type: BentoFilterItemType.SELECT, }] const filterValues = ref<BentoFilterValues>([{ field: 'merchant', value: 2, }, { field: 'company', value: [1, 3, 5], }]) const onFilter = (newFilters: BentoFilterBarModel) => { } const onSearchInput = (newTerm: string) => { } const onSearchClear = () => { } </script> `); export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoFilterBar }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const filtersConfig = ref<BentoFilterBarModel>(args.config); const filterValues = ref<BentoFilterValues>(args.filterValues); const filterValuesUpdate = (newFilterValues: BentoFilterValues) => { filterValues.value = newFilterValues; action('update:filter-values')(newFilterValues); }; const filterValuesChanged = (newFilterValues: BentoFilterValues) => { action('input')(newFilterValues); }; const searchTermField = computed(() => args.searchTerm); const searchInput = (newSearchTerm: string) => action('search-input')(newSearchTerm); const searchClear = () => action('search-clear')(); const searchTermSync = (newSearchTerm: string) => action('update:search-term')(newSearchTerm); return { // Props args, // Values filtersConfig, filterValues, searchTermField, // Events filterValuesChanged, filterValuesUpdate, searchInput, searchClear, searchTermSync, }; }, template: ` <div style="padding-top: 24px"> <bento-filter-bar v-bind="args" :config="filtersConfig" :searchTerm="searchTermField" :filter-values="filterValues" @input="filterValuesChanged" @update:filter-values="filterValuesUpdate" @update:search-term="searchTermSync" @search-input="searchInput" @search-clear="searchClear" /> </div> `, }), args: { config: FILTERS, filterValues: FILTER_VALUES, containerSizeLayout: { medium: 'multi-line', small: 'one-line', } satisfies BentoFilterBarContainerSizeLayout, search: { inputFieldAriaLabel: 'Input field aria label', debounceTime: 500, hint: 'Hint', placeholder: 'Placeholder content', } satisfies BentoFilterBarSearchBarProps, searchTerm: 'something', }, parameters: defaultFilterTemplate, }; const persistentFilterTemplate = storybookDocsParameter(` <bento-filter-bar :config="[ { field: 'input', label: 'Input filter', defaultValue: 'hello', type: BentoFilterItemType.INPUT, }, { field: 'range', label: 'Range', defaultValue: ['1', '4'], type: BentoFilterItemType.RANGE, }, { field: 'merchant', label: 'Merchants', defaultValue: ['merchant_1'], options: { listboxItems: [ { label: 'Merchant 1', value: 'merchant_1', }, { label: 'Merchant 2', value: 'merchant_2', }, { label: 'Merchant 3', value: 'merchant_3', }, ], multiple: true, }, type: BentoFilterItemType.SELECT, }, { field: 'thing', label: 'Things', defaultValue: 'merchant_1', options: { listboxItems: [ { label: 'Thing 1', value: 'merchant_1', }, { label: 'Thing 2', value: 'merchant_2', }, { label: 'Thing 3', value: 'merchant_3', }, ], }, type: BentoFilterItemType.SELECT, }, { field: 'country', label: 'Country/Region', options: { listboxItems: [ { label: 'Option 1', value: BentoCountryCode.NL, }, { label: 'Option 2', value: BentoCountryCode.BE, }, ], multiple: true, variant: 'capital', }, type: BentoFilterItemType.SELECT_COUNTRY, }, ]" :filter-values="[ { field: 'input', value: 'non-default value', }, ]" :search="{ inputFieldAriaLabel: 'Input field aria label', debounceTime: 500, hint: 'Hint', placeholder: 'Placeholder content', }" :search-term.sync="searchTerm" @input="onFilter" @search-input="onSearchInput" @search-clear="onSearchClear" /> `); export const Persistent: Story = { ...Default, args: { config: FILTERS_WITH_DEFAULTS, filterValues: [ { field: 'input', value: 'non-default value', }, { field: 'checkbox-group', value: ['unique-id-2'], }, ], searchTerm: null, }, parameters: persistentFilterTemplate, }; const externalFilteringTemplate = storybookDocsParameter(` <template> <bento-filter-bar :config="filtersConfig" :filter-values.sync="filterValues" /> </template> <script setup lang="ts"> import { ref, computed, onMounted } from 'vue'; import { BentoFilterBar, BentoFilterItemType, BentoFilterBarModel, BentoFilterValues, BentoSelectFilterOptions, } from '@adyen/bento-vue2'; // --- Mock API for demonstration --- const getPokemonFromApi = async (searchTerm?: string) => { // In a real application, this would be an API call. // We're mocking it with a timeout and static data. console.log(\`Searching for: \${searchTerm}\`); await new Promise(resolve => setTimeout(resolve, 1000)); const allPokemon = [ { label: 'Bulbasaur', value: 'bulbasaur' }, { label: 'Ivysaur', value: 'ivysaur' }, { label: 'Venusaur', value: 'venusaur' }, { label: 'Charmander', value: 'charmander' }, { label: 'Charmeleon', value: 'charmeleon' }, { label: 'Charizard', value: 'charizard' }, ]; const items = searchTerm ? allPokemon.filter(p => p.label.toLowerCase().includes(searchTerm.toLowerCase())) : allPokemon; return { items }; }; // --- End Mock API --- const filterValues = ref<BentoFilterValues>([{ field: 'pokemon', value: 'bulbasaur' }]); const apiItems = ref([]); const isLoading = ref(false); const getAndSetPokemonFromApi = async (val?: string) => { isLoading.value = true; const { items } = await getPokemonFromApi(val); apiItems.value = items; isLoading.value = false; }; onMounted(() => { getAndSetPokemonFromApi(); }); const filtersConfig = computed<BentoFilterBarModel>(() => [ { field: 'name', label: 'Name', type: BentoFilterItemType.INPUT }, { field: 'pokemon', label: 'Pokemon', options: { isOptionDisabled: option => ['ivysaur', 'charmeleon'].includes(option.value as string), listboxItems: apiItems.value, search: { debounceTime: 500, searchEvent: getAndSetPokemonFromApi }, loading: isLoading.value, }, type: BentoFilterItemType.SELECT, }, ]); </script> `); export const ExternalFilteringSelectFilter: Story = { render: (_args, { argTypes }) => ({ components: { BentoFilterBar, }, props: Object.keys(argTypes), setup(props) { const apiItems = ref([]); const filterValues = ref<BentoFilterValues>([{ field: 'pokemon', value: 'bulbasaur' }]); const isLoading = ref(false); const getAndSetPokemonFromApi = async (val?: string) => { isLoading.value = true; await new Promise(resolve => setTimeout(resolve, 1000)); const { items } = await getPokemonFromApi(val); apiItems.value = items; isLoading.value = false; }; const search = { debounceTime: 500, searchEvent: getAndSetPokemonFromApi, }; onMounted(() => { getAndSetPokemonFromApi(); }); const filtersConfig = computed(() => [ { field: 'name', label: 'Name', type: BentoFilterItemType.INPUT, }, { field: 'pokemon', label: 'Pokemon', options: { isOptionDisabled: option => ['ivysaur', 'charmeleon'].includes(option.value as string), listboxItems: apiItems.value, search, loading: isLoading.value, }, type: BentoFilterItemType.SELECT, visible: false, }, ]); return { args: isVue2 ? props : _args, // Values filtersConfig, filterValues, }; }, template: ` <div style="padding-top: 24px"> <bento-filter-bar v-bind="args" :config="filtersConfig" :filter-values.sync="filterValues" /> </div> `, }), args: { config: FILTERS, searchTerm: null }, parameters: externalFilteringTemplate, }; const SearchAndLazyLoadTemplate = storybookDocsParameter(` <template> <bento-filter-bar :config="filtersConfig" :filter-values.sync="filterValues" /> </template> <script setup lang="ts"> import { ref, computed, onMounted } from 'vue'; import { BentoFilterBar, BentoFilterItemType, BentoFilterBarModel, BentoFilterValues, BentoSelectFilterOptions, BentoListboxOptions, } from '@adyen/bento-vue2'; // --- Mock API for demonstration --- const ALL_ITEMS = Array.from({ length: 100 }, (_, i) => ({ label: \`Item \${i + 1}\`, value: i + 1, })); const fetchItems = (searchTerm: string, page: number, pageSize: number = 20) => { console.log(\`Fetching items with searchTerm: "\${searchTerm}", page: \${page}\`); return new Promise<{ items: BentoListboxOptions; hasMore: boolean }>(resolve => { setTimeout(() => { const filtered = ALL_ITEMS.filter(item => item.label.toLowerCase().includes(searchTerm.toLowerCase()) ); const start = (page - 1) * pageSize; const end = start + pageSize; const pageItems = filtered.slice(start, end); resolve({ items: pageItems, hasMore: end < filtered.length, }); }, 500); }); }; // --- End Mock API --- const filterValues = ref<BentoFilterValues>([]); // State for the select filter const listboxItems = ref<BentoListboxOptions>([]); const isLoading = ref(false); const hasMoreItems = ref(true); const currentPage = ref(1); const currentSearchTerm = ref(''); /** * Handles the search event from the filter. * This should reset pagination and fetch a new list of items. */ const onSearch = async (searchTerm: string) => { currentSearchTerm.value = searchTerm; currentPage.value = 1; isLoading.value = true; const { items, hasMore } = await fetchItems(searchTerm, currentPage.value); listboxItems.value = items; hasMoreItems.value = hasMore; isLoading.value = false; }; /** * Handles the lazy load event. * This should fetch the next page of items and append them. */ const onLazyLoad = async () => { if (isLoading.value || !hasMoreItems.value) { return; } currentPage.value++; isLoading.value = true; const { items, hasMore } = await fetchItems(currentSearchTerm.value, currentPage.value); // Append new items to the existing list listboxItems.value = [...listboxItems.value, ...items]; hasMoreItems.value = hasMore; isLoading.value = false; }; // Load initial data when the component mounts onMounted(() => { onSearch(''); }); const filtersConfig = computed<BentoFilterBarModel>(() => [ { field: 'lazy-select', label: 'Lazy Load Select', type: BentoFilterItemType.SELECT, options: { listboxItems: listboxItems.value, multiple: true, // External filtering configuration search: { searchEvent: onSearch, }, // Lazy loading configuration lazy: { hasMoreItems: hasMoreItems.value, lazyLoadType: 'automatic', // or 'button' loading: isLoading.value, showMoreEvent: onLazyLoad, }, }, }, ]); </script> `); export const ExternalFilteringAndLazyLoadingSelectFilter: Story = { ...ExternalFilteringSelectFilter, render: (_args, { argTypes }) => ({ components: { BentoFilterBar, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const filterValues = ref<BentoFilterValues>([]); const lazyLoadingPageSize = 20; // State for the select filter const listboxItems = ref<BentoListboxOptions>([]); const isSearchLoading = ref(false); const isLazyLoading = ref(false); const hasMoreItems = ref(true); const currentPage = ref(1); const currentSearchTerm = ref(''); /** * Handles the search event from the filter. * This should reset pagination and fetch a new list of items. */ const onSearch = async (searchTerm: string) => { currentSearchTerm.value = searchTerm; currentPage.value = 1; isSearchLoading.value = true; const { items, hasMore } = await getPokemonFromApi(searchTerm, currentPage.value, lazyLoadingPageSize); listboxItems.value = items; hasMoreItems.value = hasMore; isSearchLoading.value = false; }; /** * Handles the lazy load event. * This should fetch the next page of items and append them. */ const onLazyLoad = async () => { if (isLazyLoading.value || !hasMoreItems.value) { return; } currentPage.value++; isLazyLoading.value = true; const { items, hasMore } = await getPokemonFromApi( currentSearchTerm.value, currentPage.value, lazyLoadingPageSize ); // Append new items to the existing list listboxItems.value = [...listboxItems.value, ...items]; hasMoreItems.value = hasMore; isLazyLoading.value = false; }; // Load initial data when the component mounts onMounted(() => { onSearch(''); }); const filtersConfig = computed<BentoFilterBarModel>(() => [ { field: 'lazy-select', label: 'External filtering and lazy loading', type: BentoFilterItemType.SELECT, options: { listboxItems: listboxItems.value, multiple: true, loading: isSearchLoading.value, // External filtering configuration search: { searchEvent: onSearch, }, // Lazy loading configuration lazy: { hasMoreItems: hasMoreItems.value, lazyLoadType: 'automatic', // or 'button' loading: isLazyLoading.value, showMoreEvent: onLazyLoad, }, }, }, ]); return { args, filtersConfig, filterValues, }; }, template: ` <div style="padding-top: 24px"> <bento-filter-bar v-bind="args" :config="filtersConfig" :filter-values.sync="filterValues" /> </div> `, }), args: { ...ExternalFilteringSelectFilter.args, }, parameters: SearchAndLazyLoadTemplate, }; export const CustomFilters: Story = { render: (_args, { argTypes }) => ({ components: { BentoFilterBar, BentoToggle, FilterBarCustomFilterSubComponentSingleValueExample, FilterBarCustomFilterSubComponentMultiValueExample, }, props: Object.keys(argTypes), template: ` <div style="padding-top: 24px"> <bento-filter-bar :config="filtersConfig" :filter-values-object="filterValues" @update:filter-values-object="filterValuesChanged" /> </div> `, setup() { interface CustomFilterOptions { required?: boolean; optional?: boolean; disabled?: boolean; } const filtersConfig: BentoFilterBarModel<CustomFilterOptions> = [ { field: 'input', label: 'Input filter', type: BentoFilterItemType.INPUT, options: { placeholder: 'Input filter placeholder', }, visible: true, }, { field: 'custom-single', label: 'Custom single value filter', type: FilterBarCustomFilterSubComponentSingleValueExample, visible: true, }, { field: 'custom-multi', label: 'Custom multi value filter', type: FilterBarCustomFilterSubComponentMultiValueExample, options: { // ICustomFilterOptions disabled: false, optional: false, required: false, }, visible: false, }, { field: 'custom-popover', label: 'Custom filter with popover', type: FilterBarCustomFilterSubComponentWithPopoverExample, visible: true, }, ]; /** * Custom filter values */ type FilterKeys = 'input' | 'custom-single' | 'custom-multi' | 'custom-popover'; type CustomFilterValues = | BentoFilterBarValue | boolean | { // ICustomFilterValues first: boolean; second: boolean; } | undefined; const filterValues = ref<BentoFilterValueObject<FilterKeys, CustomFilterValues>>({ input: undefined, 'custom-single': undefined, 'custom-multi': { first: false, second: false, }, 'custom-popover': undefined, }); const filterValuesChanged = (newFilterValues: BentoFilterValueObject<FilterKeys, CustomFilterValues>) => { filterValues.value = newFilterValues; action('input')(newFilterValues); }; return { filtersConfig, filterValues, filterValuesChanged, }; }, }), args: false, parameters: storybookDocsParameter(FilterBarCustomFiltersExample), }; 

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

@@ -0,0 +1 @@
+<template> <div ref="filterBarRef" class="b-filter-bar"> <div v-if="!showSearchbarInsideContainer && isSearchBarEnabled" class="b-filter-bar__search-external-container"> <bento-search-bar class="b-filter-bar__search-bar" v-bind="searchBarProps" :input-field-aria-label="searchBarAriaLabel" :value="searchTerm" condensed @input="onSearchbarInput" @clear="onSearchbarClear" /> </div> <component :is="screenLayoutComponent" :class="containerConditionalClasses" condensed> <div :class="contentConditionalClasses"> <div v-if="showSearchbarInsideContainer && isSearchBarEnabled"> <bento-search-bar class="b-filter-bar__search-bar" v-bind="searchBarProps" :input-field-aria-label="searchBarAriaLabel" :value="searchTerm" condensed @input="onSearchbarInput" @clear="onSearchbarClear" /> </div> <template v-if="persistentFilters.length"> <component :is="filter.type" v-for="filter in persistentFilters" :key="filter.field" :field="filter.field" :label="filter.label" :disabled="filter?.disabled" :options="filter.options" :value="filter.value" :default-value="filter.defaultValue" @update="updateFilterHandler" /> </template> <component :is="filter.type" v-for="filter in regularFilters" :key="filter.field" :field="filter.field" :label="filter.label" :disabled="filter?.disabled" :options="filter.options" :value="filter.value" @update="updateFilterHandler" /> <!-- All filters button --> <all-filters-modal v-if="hasHiddenFilters" class="b-filter-bar__all-filters-modal" :value="valueAndFilterValuesPropsMerged" @input="updateAllFilters" /> <!-- Clear all filters button --> <filter-bar-button v-if="isClearAllVisible" class="b-filter-bar__clear-all" @click="clearAllFilters"> {{ t('clearFilters') }} <template #iconLeft> <refresh-icon aria-hidden="true" /> </template> </filter-bar-button> <!-- Reset all filters button --> <filter-bar-button v-if="isResetAllVisible" class="b-filter-bar__reset-all" @click="resetAllFilters"> {{ t('resetFilters') }} <template #iconLeft> <refresh-icon aria-hidden="true" /> </template> </filter-bar-button> </div> </component> </div> </template> <script setup lang="ts" generic=""> import { computed, ref, toRef } from 'vue'; import { FilterBarButton } from './components/filter-bar-button'; import { BentoFilterBarEvent, type BentoFilterBarModel, type BentoFilterBarProps, type BentoFilterModel, } from './filter-bar.types'; import BentoSearchBar from '@/components/search-bar/search-bar.vue'; import { BentoSearchBarEvent } from '@/components/search-bar/search-bar.types'; import { useBentoToastController } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import { useContainerSizeOptionsLayout } from './composables/use-container-size-options-layout/use-container-size-options-layout'; import AllFiltersModal from './components/all-filters-modal/all-filters-modal.vue'; import RefreshIcon from '@adyen/ui-assets-icons-16/vue/refresh'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; // TODO: setup Vue3 generics in Bento 2.0.0 const props = withDefaults(defineProps<BentoFilterBarProps>(), { config: () => [], filterValues: () => [], containerSizeLayout: () => ({ medium: 'one-line', small: 'multi-line', }), search: undefined, searchTerm: undefined, value: () => [], showAppliedHiddenFilters: false, filterValuesObject: undefined, }); const emit = defineEmits([ BentoFilterBarEvent.INPUT, BentoFilterBarEvent.UPDATE_FILTER_VALUES_OBJECT, BentoFilterBarEvent.UPDATE_FILTER_VALUES_ARRAY, BentoSearchBarEvent.CLEAR, BentoSearchBarEvent.INPUT, BentoSearchBarEvent.UPDATE, ]); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const filterBarRef = ref<HTMLDivElement>(null); const valueAndFilterValuesPropsMerged = computed<BentoFilterBarModel>(() => (props.config?.length > 0 ? props.config : props.value)?.map(filterModel => { let filterValue = props.filterValues.find(({ field }) => field === filterModel.field)?.value; if (props.filterValuesObject && filterModel.field in props.filterValuesObject) { filterValue = props.filterValuesObject[filterModel.field]; } if (filterValue === undefined) { // If the filter is using the deprecated `config` value prop use that // But if that is also not set then check if a default value exists set it to that if it is defined. filterValue = filterModel?.value === undefined && filterModel?.defaultValue !== undefined ? filterModel?.defaultValue : filterModel?.value; } return { ...filterModel, value: filterValue !== undefined ? filterValue : filterModel?.value }; }) ); const { addToast } = useBentoToastController(); /** * Container size layout. * Allows to change the layout from multi-line to one-line for each container size type: * - large: >=700 * - medium: >=430 & <700 * - small: <430 */ const { screenLayoutComponent, showSearchbarInsideContainer, isOneLineLayout } = useContainerSizeOptionsLayout( filterBarRef, toRef(props, 'containerSizeLayout') ); /** * Classes */ /** * Handles the classes of the swappable component ('div' or 'fixed-scroller) */ const containerConditionalClasses = computed(() => ({ 'b-filter-bar__fixed-scroller': isOneLineLayout.value, 'b-filter-bar__container': !isOneLineLayout.value, // Multi-line })); /** * Handles the classes of the container inside the swappable component. */ const contentConditionalClasses = computed(() => ({ 'b-filter-bar__scroller-content': isOneLineLayout.value, 'b-filter-bar__filters': !isOneLineLayout.value, // Multi-line })); /** * Search bar pops */ const searchBarAriaLabel = computed(() => props.search?.inputFieldAriaLabel || (t('searchBar') as string)); const searchBarProps = computed(() => { if (!props.search) { return undefined; } const { debounceTime, disabled, inputFieldAriaLabel, hint, placeholder } = props.search; return { debounceTime, disabled, inputFieldAriaLabel, hint, placeholder }; }); const hasHiddenFilters = computed(() => { // Has props with visible set const hasVisibleSet = valueAndFilterValuesPropsMerged.value.some( ({ visible }) => visible !== undefined && visible !== null ); return hasVisibleSet ? valueAndFilterValuesPropsMerged.value.some(({ visible }) => !visible) : false; }); // Persistent filters i.e. filters with default value const persistentFilters = computed(() => valueAndFilterValuesPropsMerged.value.filter(({ defaultValue }) => defaultValue !== undefined) ); // Show non-persistent & visible filters const regularFilters = computed(() => { const hasVisibleSet = valueAndFilterValuesPropsMerged.value.some( ({ visible }) => visible !== undefined && visible !== null ); // If no filter has the `visible` prop set then all are visible, otherwise search for the "visible: true" elements return hasVisibleSet ? valueAndFilterValuesPropsMerged.value.filter( ({ defaultValue, visible, value }) => // eslint-disable-next-line eqeqeq (defaultValue === undefined && visible) || (props.showAppliedHiddenFilters && value != undefined) ) : valueAndFilterValuesPropsMerged.value.filter( ({ defaultValue, value }) => // eslint-disable-next-line eqeqeq defaultValue === undefined || (props.showAppliedHiddenFilters && value != undefined) ); }); // Enable search bar. // Soft equality to check for "null" and "undefined" // eslint-disable-next-line eqeqeq const isSearchBarEnabled = computed(() => props.searchTerm != undefined); const hasActiveFilters = computed(() => valueAndFilterValuesPropsMerged.value .filter(({ defaultValue }) => defaultValue === undefined || defaultValue === null) // Disabling strict equality to check for both undefined and null // eslint-disable-next-line eqeqeq .some(({ value }) => value != undefined) ); // Show the "Clear all" button (true) if at least one filter is active (contains a value) // and there are not persistent filters present. const isClearAllVisible = computed(() => persistentFilters.value.length === 0 && hasActiveFilters.value); const isResetAllVisible = computed(() => { if (persistentFilters.value.length === 0) { return false; } const areAllValuesEqualToDefaults = valueAndFilterValuesPropsMerged.value .filter(({ defaultValue }) => defaultValue !== undefined || defaultValue !== null) .every(({ value, defaultValue }) => JSON.stringify(value) === JSON.stringify(defaultValue)); return !areAllValuesEqualToDefaults || hasActiveFilters.value; }); const updateAllFilters = (newFilters: BentoFilterBarModel) => { emit(BentoFilterBarEvent.INPUT, newFilters); emit( BentoFilterBarEvent.UPDATE_FILTER_VALUES_ARRAY, newFilters ?.filter(({ value }) => value !== null || value !== undefined) .map(({ field, value }) => ({ field, value })) ); emit( BentoFilterBarEvent.UPDATE_FILTER_VALUES_OBJECT, newFilters ?.filter(({ value }) => value !== null || value !== undefined) .reduce((acc, filter) => { acc[filter.field] = filter.value; return acc; }, {}) ); }; const updateFilterHandler = (updatedFilter: BentoFilterModel) => { const filterIndex = valueAndFilterValuesPropsMerged.value.findIndex( filter => filter.field === updatedFilter.field ); const newFilters = valueAndFilterValuesPropsMerged.value.slice(); newFilters[filterIndex].value = updatedFilter.value; updateAllFilters(newFilters); }; const clearAllFilters = () => { const previousFilters = valueAndFilterValuesPropsMerged.value.slice(); const clearedFilters = valueAndFilterValuesPropsMerged.value.map(({ value, ...otherFields }) => ({ ...otherFields, value: undefined, })); addToast({ text: t('filtersHaveBeenCleared') as string, action: { handler: () => updateAllFilters(previousFilters), text: t('undo') as string, }, }); updateAllFilters(clearedFilters); }; const resetAllFilters = () => { const previousFilters = valueAndFilterValuesPropsMerged.value.slice(); const resetFilters = valueAndFilterValuesPropsMerged.value.map(({ defaultValue, ...otherFields }) => ({ ...otherFields, defaultValue, value: defaultValue, })); addToast({ text: t('filtersHaveBeenReset') as string, action: { handler: () => updateAllFilters(previousFilters), text: t('undo') as string, }, }); updateAllFilters(resetFilters); }; const onSearchbarInput = (newSearchTerm: string) => { emit(BentoSearchBarEvent.INPUT, newSearchTerm); emit(BentoSearchBarEvent.UPDATE, newSearchTerm); }; const onSearchbarClear = () => { emit(BentoSearchBarEvent.CLEAR); }; // Expose methods for BentoDataGrid to access defineExpose({ isClearAllVisible, clearAllFilters, isResetAllVisible, resetAllFilters }); </script> <script lang="ts"> import { BentoBooleanFilter, BentoCheckboxGroupFilter, BentoDateFilter, BentoDateRangeFilter, BentoInputFilter, BentoInputWithDropdownFilter, BentoRadioGroupFilter, BentoRangeFilter, BentoSelectAvatarFilter, BentoSelectCountryFilter, BentoSelectCurrencyFilter, BentoSelectFilter, BentoSelectPaymentMethodFilter, BentoSelectTagFilter, BentoToggleFilter, } from './components'; import { BentoTeleport, FixedScroller } from '@/internal'; /** * The filter bar filters item lists and tables according to various filter criteria. * * @example * import { BentoFilterBar } from '@adyen/bento-vue2' * * export default { * components: { BentoFilterBar }, * data: () => ({ * filters: [{ * field: 'name', * label: 'Name', * value: null, * options: { ... }, * type: FilterType.TEXT, * }] * }), * template: ` * <bento-filter-bar * v-model="filter" * /> * ` * } */ export default { i18n: { messages }, name: 'bento-filter-bar', components: { BentoBooleanFilter, BentoCheckboxGroupFilter, BentoDateFilter, BentoDateRangeFilter, BentoInputFilter, BentoInputWithDropdownFilter, BentoRadioGroupFilter, BentoRangeFilter, BentoSelectAvatarFilter, BentoSelectCountryFilter, BentoSelectCurrencyFilter, BentoSelectFilter, BentoSelectPaymentMethodFilter, BentoSelectTagFilter, BentoTeleport, BentoToggleFilter, FixedScroller, }, }; </script> <style lang="scss" scoped src="./filter-bar.scss" /> 

package/dist/assets/components/focus-trap/focus-trap.docs.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ComponentStories from './focus-trap.stories';
+
+<Meta of={ComponentStories} />
+
+# FocusTrap
+
+A FocusTrap represents a component. Use a FocusTrap when you want users to...
+
+<Canvas of={ComponentStories.Default} />

package/dist/assets/components/focus-trap/focus-trap.stories.ts

@@ -0,0 +1 @@
+import { BentoButton } from '@/components/button'; import { BentoCard } from '@/components/card'; import { BentoFocusTrapArrowNavigationDirection } from './focus-trap.types'; import { BentoFocusTrap } from './index'; export default { title: 'Focus trap', component: BentoFocusTrap, argTypes: { enableArrowNavigation: { name: 'Enable arrow navigation', control: 'boolean', description: 'Arrow navigation', }, arrowNavigation: { options: Object.values(BentoFocusTrapArrowNavigationDirection), mapping: BentoFocusTrapArrowNavigationDirection, control: { type: 'inline-radio', }, }, default: { name: 'default', defaultValue: '', description: 'Trapped focus content', table: { type: { summary: 'VNode[]' }, }, control: { type: null }, }, }, }; export const Default = (_args, { argTypes }) => ({ components: { BentoFocusTrap, BentoButton, BentoCard }, props: Object.keys(argTypes), data: () => ({ isOpened: false, }), computed: { arrowNavigationValue() { return this.enableArrowNavigation && this.arrowNavigation; }, }, template: ` <div> <bento-button @click="isOpened = true">Open content</bento-button> <div style="margin-top: 24px"> <bento-focus-trap v-if="isOpened" :arrow-navigation="arrowNavigationValue" :disabled="disabled"> <bento-card> Focus will be trapped inside this card <template #actions> <bento-button @click="isOpened = false">Close</bento-button> </template> <div> <bento-button>Button 1</bento-button> <bento-button>Button 2</bento-button> <bento-button>Button 3</bento-button> <bento-button>Button 4</bento-button> <div v-if="arrowNavigationValue"> <span contenteditable tabindex="0"> Arrow navigation doesn't work when element is content editable </span> </div> </div> </bento-card> </bento-focus-trap> </div> </div> `, }); 

package/dist/assets/components/focus-trap/focus-trap.vue

@@ -0,0 +1 @@
+<template> <div v-if="hasSlot('default')" ref="root" class="b-focus-trap" data-testid="focus-trap" tabindex="-1" v-on="arrowNavigation ? { keydown: onKeyDown } : {}" @focusout="onBlur" @keydown.esc="handleKeydownEscape" > <slot></slot> </div> </template> <script lang="ts" setup> import { computed, type PropType, ref, toRef, useSlots } from 'vue'; import { useHasSlot } from '@/composables'; import { useHandleLayers } from './composables/use-handle-layers'; import { type BentoFocusTrapOptions, useTrapAll } from './composables/use-trap-all'; import { useTrapArrowKeys } from './composables/use-trap-arrow-keys'; import { BentoFocusTrapArrowNavigationDirection } from './focus-trap.types'; const props = defineProps({ /** * Enables / Disables arrow navigation as well can determine the type of arrow navigation. * The types of arrow navigation are horizontal and vertical. */ arrowNavigation: { type: String as PropType<BentoFocusTrapArrowNavigationDirection>, default: undefined, validator: (value: BentoFocusTrapArrowNavigationDirection) => Object.values(BentoFocusTrapArrowNavigationDirection).includes(value), }, /** * Enables / disables the focus trap. */ disabled: { type: Boolean, default: false, }, /** * Enables / disables the focus trap for all keys. */ trapAll: { type: Boolean, default: false, }, /** * Configurations for the focus-trap when trap-all is active. */ trapAllOptions: { type: Object as PropType<BentoFocusTrapOptions>, default: undefined, }, }); const root = ref<HTMLElement | null>(null); const slots = useSlots(); const hasSlot = useHasSlot(slots); const activateTrapAll = computed(() => { return props.trapAll && !props.disabled && !props.arrowNavigation; }); const activateTrapArrowKeysOnly = computed(() => { return !props.disabled && !props.trapAll; }); useTrapAll(root, activateTrapAll, toRef(props, 'trapAllOptions')); const { handleKeydownEscape } = useHandleLayers(root); const { onKeyDown, onBlur } = useTrapArrowKeys(root, activateTrapArrowKeysOnly, props.arrowNavigation); </script> <script lang="ts"> /** * Locks the focus inside an element for a11y navigation. * Useful for things like modals, popovers, etc... * * @example * import { BentoFocusTrap, BentoButton } from '@adyen/bento-vue2'; * * export default { * components: { BentoFocusTrap, BentoButton }, * template: ` * <div id="import-choice"> * <bento-focus-trap> * Make a choice to proceed further! * <bento-button>Yes</bento-button> * <bento-button>No</bento-button> * </bento-focus-trap> * </div> * ` * }; */ export default { name: 'bento-focus-trap', }; </script> <style lang="scss" scoped> .b-focus-trap { outline: none; } </style> 

package/dist/assets/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue

@@ -0,0 +1 @@
+<template> <div class="b-form-layout-field-tip"> <slot /> <bento-alert v-if="hasSlot('message')" :id="id" variant="tip" :type="type"> <template #description> <slot name="message" /> </template> </bento-alert> </div> </template> <script setup lang="ts"> import { type PropType, useSlots } from 'vue'; import { type BentoFormLayoutFieldTipTypeOption, BentoFormLayoutFieldTipTypeOptions, } from './form-layout-tip.types'; import { BentoAlert } from '@/components/alert'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; defineProps({ /** * Type of a alert; set a distinctive icon and color. Defaults to highlight. * @values highlight, success, critical, warning */ type: { type: String as PropType<BentoFormLayoutFieldTipTypeOption>, default: 'highlight', validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value), }, /** * Unique identifier to the form field. Used for accessibility. */ id: { type: String, default: undefined, }, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); </script> <script lang="ts"> /** * You can help users provide accurate and well formatted information * by using various elements that come with an input field. * * Use description/supporting text to add additional context to the * field or guidance how to format the input correctly. * Because description is always visible it should be the first * choice in providing guidance. * * @example * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2'; * * export default { * components: { BentoFormLayoutFieldTip }, * template: ` * <bento-form-layout-field-tip> * <bento-dropdown label="Dropdown" :items="dropdownItems" placeholder="Select an animal" /> * * <template #message>This is a small tip that can be used in small spaces</template> * </bento-form-layout-field-tip> * ` */ export default {}; </script> <style lang="scss" scoped src="./form-layout-field-tip.scss" /> 

package/dist/assets/components/form-layout/components/form-layout-group/form-layout-group.vue

@@ -0,0 +1 @@
+<template> <div class="b-form-layout-group" :class="conditionalClasses"> <slot></slot> </div> </template> <script setup lang="ts"> import { computed, type PropType } from 'vue'; import { BentoLayoutGroupProportions } from './form-layout-group.types'; // Default proportion const DEFAULT_PROPORTION = 100; const props = defineProps({ /** * The layout of the pair group of components. * This will render the components within the width of the proportions. * Only two colums are available. * * If only one value is entered, then it will assume there's only one child in the group. * If two values are entered, the first value will be use for the first child and the second * value for the second child. * * If the value entered is not listed in the example * list below it will use 100% by default. * @example * '33-33-33' * '50-50' * '25-75' * '75-25' * '33-66' * '66-33' * '25' * '33' * '50' * '100' */ layout: { type: String as PropType<BentoLayoutGroupProportions>, default: '100', validator: (value: BentoLayoutGroupProportions) => BentoLayoutGroupProportions.includes(value), }, }); // Sets DEFAULT_PROPORTION by default if `layout` is not in the list const computedLayout = computed(() => BentoLayoutGroupProportions.includes(props.layout) ? props.layout : DEFAULT_PROPORTION ); const conditionalClasses = computed(() => ({ // Transform into column if the layout is unsupported 'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout), // Assings the correct layout class [`b-form-layout-group--${computedLayout.value}`]: true, })); </script> <script lang="ts"> /** * Use to provide horizontal layouts to build forms * with two fields per line. * * These can be used for field combinations, * such as post code and city or title and first name. * * @example * import { BentoFormLayoutGroup } from '@adyen/bento-vue2'; * * export default { * components: { BentoFormLayoutGroup }, * template: ` * <bento-form-layout-group> * <first-element /> * <second-element /> * </bento-form-layout-group> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./form-layout-group.scss" /> 

package/dist/assets/components/form-layout/components/form-layout-title/form-layout-title.vue

@@ -0,0 +1 @@
+<template> <div class="b-form-layout-title" :class="conditionalClasses"> <bento-typography :el="el" variant="title" :medium="isSection"> <slot /> </bento-typography> <bento-typography v-if="hasSlot('description')" class="b-form-layout-title__description" el="span" wide> <slot name="description" /> </bento-typography> </div> </template> <script setup lang="ts"> import { computed, useSlots } from 'vue'; import { BentoTypography, BentoTypographyElement } from '@/components/typography'; import { useHasSlot } from '@/composables'; const slots = useSlots(); const props = defineProps({ /** * Defines if the Form Layout title is * a "section" or a "subsection". * Default is "section" (false). Turn into "true" for "subsection" */ subsection: { type: Boolean, default: false, }, /** * Sets the HTML DOM element. * @values h1, h2, h3, h4, h5, h6, div, p, span */ el: { type: BentoTypography.props.el.type, required: true, validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value), }, }); // Uses "medium" typography if it is a section title const isSection = computed(() => !props.subsection); const hasSlot = useHasSlot(slots); const conditionalClasses = computed(() => ({ 'b-form-layout-title--subsection': props.subsection, })); </script> <script lang="ts"> /** * If you’re building a lengthy form, organise related * fields into sections and, if needed, subsections. * * A form can have a "Section Title" and multiple "Subsection titles". * * One of the values provided in @see BentoTypographyElement must always be provided as a string * to define correct HTML sementic from the application's context * * @example * import { BentoFormLayoutTitle } from '@adyen/bento-vue2'; * * export default { * components: { BentoFormLayoutTitle }, * template: ` * <bento-form-layout-title subsection el="h2"> * Title * <template #description>Description text</template> * </bento-form-layout-title> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./form-layout-title.scss" /> 

package/dist/assets/components/form-layout/form-layout.docs.mdx

@@ -0,0 +1,452 @@
+import { Canvas, Meta, Source } from '@storybook/blocks';
+import * as FormLayoutStories from './form-layout.stories';
+
+<Meta of={FormLayoutStories} />
+
+# Form layout
+
+The `bento-form-layout` component is a pre-designed layout that serves as a starting point for creating a form.
+
+Form layout is context agnostic and can be dropped in different places, for example in modals, side panels or pages. For
+page-specific guidance, such as multi-page forms and how to place a form in a page.
+
+## Table of contents
+
+- [Use Cases](#use-cases)
+    - [Do not use](#do-not-use)
+- [Variations](#variations)
+    - [Sections and sub sections](#sections-and-sub-sections)
+        - [Section title](#section-title)
+        - [Subsection title](#subsection-title)
+- [Modifiers](#modifiers)
+    - [Render as an HTML "form"](#render-as-an-html-form)
+    - [Field with tip](#field-with-tip)
+        - [Type](#type)
+    - [Group](#group)
+        - [Dynamic default slot content](#dynamic-default-slot-content)
+- [Form actions](#form-actions)
+    - [Loading](#loading)
+- [Validation](#validation)
+    - [Common use cases](#common-use-cases)
+        - [Field depends on another field or external reactive data](#field-depends-on-another-field-or-external-reactive-data)
+        - [Error message depends on external reactive data](#error-message-depends-on-external-reactive-data)
+- [Migrating from vue 2 to vue 3](#migrating-from-vue-2-to-vue-3)
+
+<Canvas of={FormLayoutStories.Default} />
+
+## Use Cases
+
+Use this component as a base for all kinds of forms or configuration flows that use form components. The form layout can
+be placed within pages, modals, side panels and so on.
+
+### Do not use
+
+If you need just one or two input fields that sit within a bigger component, it's better to use those components
+directly, as spacing here is optimised for larger forms/configuration flows.
+
+## Variations
+
+### Sections and sub sections
+
+If you're building a lengthy form, organise related fields into sections and, if needed, subsections. This adds
+additional context and makes filling it out easier.
+
+An element (`el`) of type string corresponding to one of the values contained in `BentoTypographyElement` must always be
+provided to define correct HTML sementic from the application's context.
+
+#### Section title
+
+<Source
+    dark
+    language="html"
+    code={`
+<BentoFormLayoutTitle el="h1">
+    Section title
+    <template #description>
+        Optional section description
+    </template>
+</BentoFormLayoutTitle>
+`}
+/>
+
+#### Subsection title
+
+<Source
+    dark
+    language="html"
+    code={`
+<BentoFormLayoutTitle el="h2" subsection>
+    Subsection title
+    <template #description>
+        Optional section description
+    </template>
+</BentoFormLayoutTitle>
+`}
+/>
+
+## Modifiers
+
+### Render as an HTML "form"
+
+When rendering an HTML `form` element is necessary, the Form Layout provides a `form` property that will render an HTML
+`form` instead:
+
+<Source
+    dark
+    language="html"
+    code={`
+<BentoFormLayout form>
+    ... Form Content
+</BentoFormLayout>
+`}
+/>
+
+### Field with tip
+
+You can help users provide accurate and well formatted information by using various elements that come with an input
+field.
+
+Use description/supporting text to add additional context to the field or guidance how to format the input correctly.
+Because description is always visible it should be the first choice in providing guidance.
+
+To make sure the field and tip are correctly linked for accessibility purposes. Pass an `id` to
+`bento-form-layout-field-tip` and set `aria-describedby="id"` in your field, as shown in the example below.
+
+<Canvas of={FormLayoutStories.WithTip} />
+
+#### Type
+
+Determines the type of tip that is displayed. By setting the `type` property, the component will render a corresponding
+visual representation of the tip type with predefined icon and background.
+
+It accepts one of the following values, that correspond to the alert's `type` prop:
+
+- `'success'`
+- `'highlight'`
+- `'warning'`
+- `'critical'`
+
+### Group
+
+<Canvas of={FormLayoutStories.Group} />
+
+Use to provide horizontal layouts to build forms with two or three fields per line. These can be used for field
+combinations, such as post code and city or title and first name.
+
+- `25-75`
+- `33-66`
+- `50-50`
+- `66-33`
+- `75-25`
+- `33-33-33`
+
+There are also some shorter field options, such as 25%, 33% and 50% of layout's width. These can be used for cases when
+a single field is needed, but its expected length of input is short, and where a full width field would look awkward.
+
+- `25`
+- `50`
+- `75`
+
+#### Dynamic default slot content
+
+The <code>bento-form-layout-group</code> is not a dynamic component and does not support changing its content/default
+slot. If this functionality is needed:
+
+- set the <code>v-if</code> statement <b>on</b> the component itself
+
+<Source
+    dark
+    language="html"
+    code={`
+<bento-form-layout-group v-if="condition" layout="33-33-33">
+        <bento-input-field>Input field 1</bento-input-field>
+        <bento-input-field>Input field 2</bento-input-field>
+        <bento-input-field>Input field 3</bento-input-field>
+</bento-form-layout-group>
+`}
+/>
+
+- or around/outside it
+
+<Source
+    dark
+    language="html"
+    code={`
+<template v-if="condition">
+    <bento-form-layout-group layout="33-33-33">
+            <bento-input-field>Input field 1</bento-input-field>
+            <bento-input-field>Input field 2</bento-input-field>
+            <bento-input-field>Input field 3</bento-input-field>
+    </bento-form-layout-group>
+</template>
+`}
+/>
+
+### Form actions
+
+The form provides two slots for actions:
+
+    * `actions-left`
+    * `actions-right`
+
+Form actions can be added by either using the `bento-button` or `bento-loading-button` components.
+
+### Loading
+
+If a specific form often takes a bit longer to process, it's possible to create a loading state.
+
+Use the `bento-loading-button` component as primary action and change the state to `loading`.
+
+All form field components inside `bento-form-layout` are changed to `readonly` mode when the prop `loading` and set as
+`true` is passed to `bento-form-layout`
+
+<Canvas of={FormLayoutStories.LoadingForm} />
+
+## Validation
+
+> **IMPORTANT** When errors from the validation appear:
+>
+> - focus must be _manually_ set by the developer using the `bento-form-layout` component to the first field in error so
+>   that the error is announced when the field is focused.
+> - errors should be listed or summarised in the alert so that assistive technologies can identify them
+
+<Canvas of={FormLayoutStories.Validate} />
+
+Given that Vee-Validate v4 has no Vue2 support, Bento provides a _composable_ that helps with **migration** from Vue2 to
+Vue3 that mimics a basic version of
+[Vee-Validate v4](https://vee-validate.logaretm.com/v4/guide/composition-api/typed-schema#zod) with
+[Zod](https://zod.dev/).
+
+> **IMPORTANT** This is only meant to be used as a migration helper, once in Vue3 replace the dependency for
+> [`vee-validate`](https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation/). If already in Vue3
+> `vee-validate` should be preferred over using Bento composable as it is much more feature rich & will have better
+> support.
+
+Bento exposes the `useForm` composable which uses a Zod/v4 schema to validate the data of a form.
+
+This is an over-simplified version of Vee-Validate v4 implemented with Zod to validate a form schema. It returns
+reactive values that can be used directly in form input elements with `v-model` alongside with functions to "reset" the
+data (sets values to default value) and a function to execute the successful form validation process (through a
+callback).
+
+<Source
+    dark
+    language="typescript"
+    code={`
+import { z } from 'zod/v4'
+import { useForm, toTypedSchema } from '@adyen/bento-vue2/use-form-v4';
+const { values, errors, submitForm, handleReset } = useForm({
+    validationSchema: toTypedSchema(
+        z.object({ 
+            // Schema here 
+        })
+    )
+});
+
+const handleSubmit = submitForm(() => { Submit code here }) `} />
+
+- `values`: Provides a reactive values object that allows to set/get the values used in the form fields:
+  `values.<FIELD_NAME>`. Can be used directly with `v-model` in components.
+- `errors`: Provides an errors object generated through zod validation of the values object against the schema.
+    - Contains the first error of each one of the fields.
+    - Interface: `{ [key: string]: string }`, where key is the name of the field that has errors.
+- `errorBag`: Provides an object generated through `zod` validation of the `values` object against the schema.
+    - Contains all the errors found for each one of the fields.
+    - Interface: ` { [key: string]: Array<string> }`, where `key` is the name of the field that has errors and
+      `Array<string>` is the list of all the errors found after validating the values against the schema. The first
+      element of this array will always be the one shown in the `errors` object.
+- `handleReset`: Resets the form values to default (initial values) when it gets called.
+- `submitForm`: Provides a function that verifies the data.
+    - The callback passed receives all the values of the form as parameter.
+    - If no errors were found: Executes the callback function so the user can execute further processes on the form
+      data.
+    - If errors were found: The `errors` and `errorBag` objects are filled with the respective errors, the callback is
+      NOT called.
+
+### Common use cases
+
+#### Field depends on another field or external reactive data
+
+Use `refine` ([docs](https://zod.dev/?id=refine)) or `superRefine` ([docs](https://zod.dev/?id=superrefine)):
+
+<Source
+    dark
+    language="typescript"
+    code={`
+import { z } from 'zod/v4'
+import { useForm, toTypedSchema } from '@adyen/bento-vue2/use-form-v4';
+const { values, errors, submitForm, handleReset } = useForm({
+    validationSchema: toTypedSchema(
+        z.object({ 
+            name: z.string(),
+            lastName: z.string()
+        }).refine(data => data.name === data.lastName, {
+            message: "Name and Last name can't be identical",
+            path: ['role'] // Indicate which field is invalid
+        })
+    )
+});`}
+/>
+
+#### Error message depends on external reactive data
+
+With `Zod/v3` (**deprecated**) use `errorMap`
+([docs](https://zod.dev/ERROR_HANDLING?id=customizing-errors-with-zoderrormap)):
+
+<Source
+    dark
+    language="typescript"
+    code={`
+import { z } from 'zod/v3'
+import { useForm, toTypedSchema } from '@adyen/bento-vue2';
+const externalValue = computed(() => { ... });
+const { values, errors, submitForm, handleReset } = useForm({
+    validationSchema: toTypedSchema(
+        z.object({ 
+            percentage: z
+                .string({
+                    errorMap: (data, ctx) => {
+                        switch (data.code) {
+                            case ZodIssueCode.too_big:
+                                return { message: \`Field needs to be greater than value \`\${externalValue.value\}\` };
+                            case ZodIssueCode.too_small:
+                            case ZodIssueCode.invalid_type:
+                                return { message: 'Value must be positive' };
+                            default:
+                                return {
+                                    message: 'Default error',
+                                };
+                        }
+                    }
+                })
+                .nonnegative()
+                .lte(100),
+        })
+    )
+});`}
+/>
+
+With `Zod/v4` use `error` ([docs](https://zod.dev/v4/changelog?id=drops-errormap)):
+
+<Source
+    dark
+    language="typescript"
+    code={`
+import { z } from 'zod/v4'
+import { useForm, toTypedSchema } from '@adyen/bento-vue2/use-form-v4';
+const externalValue = computed(() => { ... });
+const { values, errors, submitForm, handleReset } = useForm({
+    validationSchema: toTypedSchema(
+        z.object({ 
+            percentage: z
+                .string({
+                    error: issue => 'Default error';
+                })
+                .nonnegative({
+                    error: issue => 'Value must be positive'
+                })
+                .lte(100, {
+                    error: issue => \`Field needs to be greater than value \`\${externalValue.value\}\` 
+                }),
+        })
+    )
+});`}
+/>
+
+### Migrating from vue 2 to vue 3
+
+It's recommended that you should use the
+[`vee-validate`](https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation/) library instead when working
+in Vue 3.
+
+Simply replace the import of `useForm` to `vee-validate` and the import of `toTypedSchema` to `@vee-validate/zod`
+
+Vue2
+
+<Source
+    dark
+    language="typescript"
+    code={` 
+import { useForm, toTypedSchema } from '@adyen/bento-vue2/use-form-v4';
+import { z } from 'zod/v4'
+const { values, errors, submitForm } = useForm({
+    validationSchema: toTypedSchema(
+        z.object({
+            name: z
+                .string({
+                    error: issue => 
+                        issue.input === undefined 
+                            ? 'This field is required' 
+                            : 'Not a string',
+                })
+                .min(3, { 
+                    error: issue => {
+                        if (issue.code === 'too_small') {
+                            return \`Value must be >\${issue.minimum}\`
+                        }
+                    }
+                })
+                .startsWith('Jane')
+                .max(4, { 
+                    error: issue => {
+                        if (issue.code === 'too_big') {
+                            return \`Value must be >\${issue.maximum}\`
+                        }
+                    }
+                })
+                .default('Joe'),
+        })
+    )
+}); 
+const handleSubmit = submitForm(() => { 
+    // Your code here 
+});
+`}
+/>
+
+to Vue 3 using `vee-validate`
+
+<Source
+    dark
+    language="typescript"
+    code={`import { useForm, useField } from 'vee-validate';
+import { toTypedSchema } from '@vee-validate/zod';
+import { z } from 'zod/v4';
+const { values, errors, submitForm } = useForm({
+    validationSchema: toTypedSchema(
+        z.object({
+            name: z
+                .string({
+                    error: issue => 
+                        issue.input === undefined 
+                            ? 'This field is required' 
+                            : 'Not a string',
+                })
+                .min(3, { 
+                    error: issue => {
+                        if (issue.code === 'too_small') {
+                            return \`Value must be >\${issue.minimum}\`
+                        }
+                    }
+                })
+                .startsWith('Jane')
+                .max(4, { 
+                    error: issue => {
+                        if (issue.code === 'too_big') {
+                            return \`Value must be >\${issue.maximum}\`
+                        }
+                    }
+                })
+                .default('Joe'),
+        })
+    ),
+});
+const { value: name } = useField('name');
+const handleSubmit = submitForm(() => {
+    // Your code here
+});`}
+/>
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=18381%3A219174)