@adyen/bento-mcp 0.0.0 → 0.1.0

package/dist/assets/components/click-outside/click-outside.docs.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as ClickOutsideStories from './click-outside.stories';
+
+<Meta of={ClickOutsideStories} />
+
+# Click outside
+
+Listen for clicks outside of an element. Useful for modal or dropdown.
+
+## Use Cases
+
+Here are some examples:
+
+-   Close a dropdown, modal or popover when another element in the page is clicked
+
+## Variations
+
+### Component
+
+Wrapper component that adds a `onClickOutside` listener to the `default` slot allowing to trigger a `handler` event
+every time a click outside of the `default` slot happens.
+
+<Canvas of={ClickOutsideStories.ComponentDefault} />
+
+### Directive
+
+Directive that adds a `onClickOutside` listener to the element allowing to trigger a `handler` event every time a click
+outside of the element happens.
+
+<Canvas of={ClickOutsideStories.Directive} />

package/dist/assets/components/click-outside/click-outside.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { BentoClickOutside } from '@/components/click-outside'; import { BentoClickOutsideDirective } from '@/directives/click-outside'; import { BentoTypography } from '@/components/typography'; import { BentoCard } from '@/components/card'; import { ref } from 'vue'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; export default { title: 'Click outside', component: BentoClickOutside, argTypes: { // Events handler: { name: 'handler', defaultValue: '', description: 'Callback handler function to be called when a click outside the element is triggered.', table: { type: { summary: '(event: FocusEvent | PointerEvent) => void' } }, control: { disable: true }, }, }, } as Meta; type Story = StoryObj<typeof BentoClickOutside>; const DEFAULT_TITLE = 'This text is inside '; const defaultCode = ` <bento-click-outside @handler="clickOutsideHandlerMethod"> <div>Your content goes in here...</div> </bento-click-outside> `; export const ComponentDefault: Story = { render: (_args, { argTypes }) => ({ components: { BentoCard, BentoClickOutside, BentoTypography, }, props: Object.keys(argTypes), setup(props) { const totalClickOutsideCount = ref(0); const clickedAction = () => { totalClickOutsideCount.value += 1; return action('trigger'); }; return { // Values args: isVue2 ? props : _args, totalClickOutsideCount, // Events clickedAction, }; }, template: ` <div> <bento-click-outside @handler="clickedAction"> <bento-card> {{args.title}} </bento-card> </bento-click-outside> <bento-typography>Total click outside events triggered: {{totalClickOutsideCount}} </bento-typography> </div> `, }), args: { title: DEFAULT_TITLE, }, parameters: storybookDocsParameter(defaultCode), }; const directiveCode = ` <div v-bento-click-outside-directive="clickOutsideHandlerMethod"> <div>Your content goes in here...</div> </div> `; export const Directive: Story = { render: (_args, { argTypes }) => ({ components: { BentoCard, BentoTypography }, directives: { BentoClickOutsideDirective }, props: Object.keys(argTypes), setup(props) { const totalClickOutsideCount = ref(0); const clickedAction = () => { totalClickOutsideCount.value += 1; return action('trigger'); }; return { // Values totalClickOutsideCount, args: isVue2 ? props : _args, // Events clickedAction, }; }, template: ` <div> <div v-bento-click-outside-directive="clickedAction"> <bento-card> {{args.title}} </bento-card> </div> <bento-typography>Total click outside events triggered: {{totalClickOutsideCount}} </bento-typography> </div> `, }), args: { title: DEFAULT_TITLE, }, parameters: storybookDocsParameter(directiveCode), }; 

package/dist/assets/components/code-snippet/code-snippet.docs.mdx

@@ -0,0 +1,73 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as CodeSnippetStories from './code-snippet.stories';
+
+<Meta of={CodeSnippetStories} />
+
+# Code Snippet
+
+`BentoCodeSnippet` is used for displaying and editing code snippets with syntax highlighting and additional features
+like
+
+<Canvas of={CodeSnippetStories.Default} />
+
+## Use Cases
+
+-   Use when you need to display code. This could be for multi-line, single line and in-line code snippets
+
+### Do not use
+
+-   Showing elements that are not code and do not need syntax highlighting
+
+## Variations
+
+### Multi-line
+
+Without specifying a `type` the `BentoCodeSnippet` will expect and display multi-line content with standard features.
+
+<Canvas of={CodeSnippetStories.Default} />
+
+### Single-line
+
+The `type="inline"` allows for a more compact version of the `BentoCodeSnippet`, with no line numbers or expansion.
+
+<Canvas of={CodeSnippetStories.SingleLine} />
+
+### Inline
+
+The `type="inline"` creates an inline text to fit withi text without taking extra space or any including extra features.
+
+<Canvas of={CodeSnippetStories.Inline} />
+
+## Modifiers
+
+### Editable
+
+`BentoCodeSnippet` can be made editable with real-time syntax highlighting with the `editable` prop. This is recommended
+only when needed and is disabled by default.
+
+### Actionable
+
+A button can be added to the `BentoCodeSnippet` action bar with the `actionable` prop. Clicking it will emit the event
+'action' containing the contents of the code snippet. The text can be customized with `actionableText`
+
+### Expandable
+
+WIP
+
+## Accessibility
+
+### Keyboard interaction
+
+`BentoCodeSnippet` is reachable through keyboard navigation and follows logical navigation flow of the page. Both its
+button actions and code are interactable via the keyboard as described in the table below.
+
+| Keyboard interaction | Output                                                                                                                                                                                                                                                                      |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab`                | Moves focus to the various buttons in action bar and the text contents of the code snippet.                                                                                                                                                                                 |
+| Various              | The code snippet content can be interacted with all the keys supported by the system, such as arrows to move, shift+arrows to select, etc. If text manipulation is allowed via the `editable` prop, then typing, backspace to delete and enter for newline are also allowed |
+
+### Roles, states and properties
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=9496-20847&mode=design&t=xEZ7kBL87KCfxz0n-0)

package/dist/assets/components/code-snippet/code-snippet.stories.ts

@@ -0,0 +1 @@
+import BentoCodeSnippet from './code-snippet.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { BentoCodeSnippetSupportedLanguage, BentoCodeSnippetVariant } from './code-snippet.types'; import { BentoTypography } from '@/components/typography'; const meta: Meta = { title: 'Code snippet', component: BentoCodeSnippet, argTypes: { variant: { options: Object.values(BentoCodeSnippetVariant), mapping: BentoCodeSnippetVariant, control: { type: 'select', }, }, lang: { options: Object.values(BentoCodeSnippetSupportedLanguage), mapping: BentoCodeSnippetSupportedLanguage, control: { type: 'select', }, defaultValue: BentoCodeSnippetSupportedLanguage.JSON, }, }, }; export default meta; type Story = StoryObj<typeof BentoCodeSnippet>; const DEFAULT_TITLE = 'title'; const CODE_EXAMPLE_JSON_MULTI_LINE = `{ "id" : "good-51774", "amount" : 2, "spicy" : true, "condiments" : { "tomato" : true, "mozzarella" : true, "pineapple" : false } }`; const CODE_EXAMPLE_JSON_SINGLE_LINE = '{ "id": 1234 }'; const CODE_EXAMPLE_XML = `<note> <to>Recipient</to> <from>Sender</from> <heading>Reminder</heading> <body>Do not forget to test xml notes.</body> </note>`; const CODE_EXAMPLE_JAVASCRIPT = `let firstName = 'John'; const helloBento = (name) => { console.log('Hello from the bento team, '+ name); } helloBento(firstName); `; const CODE_EXAMPLE_JAVA = `/** * * * {@snippet class="Bento" region="binary"} */ public class HelloFromBento { public void helloBento() { System.out.println("Hello from the Bento team."); } }`; const CODE_EXAMPLE_PYTHON = `/** from lib_workflow.backend.artifactory import FileSystemArtifactory artifactory = FileSystemArtifactory("{{template-this}}") artifactory.list_artifacts() `; const CODE_EXAMPLE_CSV = `name,age,height john doe,30,178 `; const defaultArgs = { title: DEFAULT_TITLE, editable: true, actionable: true, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoCodeSnippet }, props: Object.keys(argTypes), template: ` <div> <bento-code-snippet v-bind="args"/> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...defaultArgs, expandable: true, content: CODE_EXAMPLE_JSON_MULTI_LINE, }, }; export const Inline: Story = { render: (_args, { argTypes }) => ({ components: { BentoCodeSnippet, BentoTypography }, props: Object.keys(argTypes), template: ` <bento-typography> Some time ago <bento-code-snippet variant='inline' v-bind="args"/> in there </bento-typography> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...defaultArgs, content: CODE_EXAMPLE_JSON_SINGLE_LINE, }, }; export const SingleLine: Story = { render: (_args, { argTypes }) => ({ components: { BentoCodeSnippet }, props: Object.keys(argTypes), template: ` <bento-code-snippet variant='singleline' v-bind="args"/> `, setup(props) { return { singleLineCode: CODE_EXAMPLE_JSON_SINGLE_LINE, args: isVue2 ? props : _args, }; }, }), args: { ...defaultArgs, content: CODE_EXAMPLE_JSON_SINGLE_LINE, }, }; export const XML: Story = { ...Default, args: { ...Default.args, lang: 'xml', content: CODE_EXAMPLE_XML, }, }; export const Javascript: Story = { ...Default, args: { ...Default.args, lang: 'javascript', content: CODE_EXAMPLE_JAVASCRIPT, }, }; export const Java: Story = { ...Default, args: { ...Default.args, lang: 'java', content: CODE_EXAMPLE_JAVA, }, }; export const Python: Story = { ...Default, args: { ...Default.args, lang: 'python', content: CODE_EXAMPLE_PYTHON, }, }; export const CSV: Story = { ...Default, args: { ...Default.args, lang: 'csv', content: CODE_EXAMPLE_CSV, }, }; 

package/dist/assets/components/code-snippet/code-snippet.vue

@@ -0,0 +1 @@
+<template> <div class="b-code-snippet" :class="conditionalClasses"> <section v-if="!isInlineVariant" class="b-code-snippet__action-bar"> <div class="b-code-snippet__action-bar--start"> <bento-dropdown v-if="availableLanguages.length > 0" v-model="selectedLanguage" v-bind="$props" :disabled="availableLanguages.length === 1" :items="availableLanguages" class="b-code-snippet__language-picker" @input="handleChangeLanguage" /> <bento-typography el="span" stronger> {{ displayedLang }} </bento-typography> </div> <div class="b-code-snippet__action-bar--end"> <bento-loading-indicator v-if="loading" /> <copy v-if="currentContents !== null" class="b-structured-list__icon" :text="currentContents" /> <bento-button v-if="expandable" variant="tertiary" condensed :aria-label="t('expand')" @click="showModal = true" > <template #iconLeft> <expand-icon /> </template> </bento-button> <bento-button v-if="actionable" variant="primary" tertiary condensed @click="onActionClicked"> <template #iconLeft> <bento-typography el="span" class="b-code-snippet__action-button"> {{ runText }} </bento-typography> </template> </bento-button> </div> </section> <code v-if="content || editable" class="b-code-snippet__code-area"> <div ref="container" class="b-code-snippet__code-area-content" :class="codeAreaContentConditionalClasses" /> </code> <section v-else> <slot name="empty-state"> <!-- TODO: switch with empty-state component when ready --> <div class="b-code-snippet__empty-state">{{ t('nothingToDisplay') }}</div> </slot> </section> <base-modal v-if="expandable" class="b-code-snippet__modal" :hide-close-button="true" :custom-padding="'0px'" :is-dismissible="true" :is-open="showModal" size="large" @close-modal="showModal = false" > <template #content> <bento-code-snippet v-bind="{ ...$props, expandable: false }" /> </template> </base-modal> </div> </template> <script setup lang="ts"> import { computed, type HTMLAttributes, onMounted, ref, shallowRef, useAttrs, watch, watchEffect } from 'vue'; import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'; import { Compartment, EditorState } from '@codemirror/state'; import { history, indentWithTab } from '@codemirror/commands'; import { lightThemeHighlight } from './highlight'; import { getLangLoader, INDENT_SAME_AS_LINE_BEFORE } from './utils'; import { BentoDropdown } from '@/components/dropdown'; import { BentoButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import { useI18n } from '@/utils/ts/i18n'; import { Copy } from '@/internal'; import { BentoCodeSnippetEvent, type BentoCodeSnippetProps, BentoCodeSnippetSupportedLanguage, BentoCodeSnippetVariant, } from './code-snippet.types'; import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand'; import BaseModal from '@/components/modal/components/base-modal/base-modal.vue'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoCodeSnippetProps>(), { actionable: false, actionableText: null, content: '', editable: false, expandable: false, lang: BentoCodeSnippetSupportedLanguage.JSON, langLabel: null, loading: false, variant: BentoCodeSnippetVariant.MULTILINE, }); const emit = defineEmits([BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE]); const attrs = useAttrs(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); // language const selectedLanguage = ref<string | null>(null); const availableLanguages = []; // TODO: implement // eslint-disable-next-line @typescript-eslint/no-empty-function const handleChangeLanguage = () => {}; const displayedLang = computed(() => props.langLabel ?? props.lang.toUpperCase()); const isInlineVariant = computed(() => props.variant === BentoCodeSnippetVariant.INLINE); const conditionalClasses = computed(() => ({ 'b-code-snippet--inline': isInlineVariant.value, 'b-code-snippet--scrollable': !isInlineVariant.value, })); const codeAreaContentConditionalClasses = computed(() => ({ 'b-code-snippet__code-area-content--editable': props.editable, })); const loadLang = getLangLoader(props.lang); const container = shallowRef<HTMLDivElement>(); const editor = shallowRef<EditorView>(); const languageConf = new Compartment(); const editorTheme = new Compartment(); const editorReadOnly = new Compartment(); const editorAttributes = new Compartment(); const currentContents = ref(null); const contentLength = ref(0); const runText = computed(() => props.actionableText || t('run')); onMounted(async () => { const language = await loadLang(); // alongside the updateListener plugin it acts as a watcher of changes to the editor state currentContents.value = props.content; const updateCurrentContents = ({ state }) => { currentContents.value = state.doc.toString(); }; const extensions = [ highlightActiveLine(), keymap.of([indentWithTab, INDENT_SAME_AS_LINE_BEFORE]), languageConf.of(language()), editorTheme.of(lightThemeHighlight(props.lang)), editorReadOnly.of(EditorState.readOnly.of(!props.editable)), editorAttributes.of( EditorView.contentAttributes.of({ 'aria-label': (attrs['aria-label'] as HTMLAttributes['aria-label']) ?? t('codeSnippet'), ...(!isInlineVariant.value && { tabindex: '0' }), }) ), EditorView.updateListener.of(content => updateCurrentContents(content)), ]; if (props.variant === 'multiline') { extensions.push([lineNumbers(), history()]); } const state = EditorState.create({ doc: props.content, extensions: [...extensions], }); contentLength.value = state.doc.length; editor.value = new EditorView({ state, parent: container.value, }); }); watch( () => props.content, () => { if (props.content !== currentContents.value) { const upcomingContentLength = props.content.length; editor.value.dispatch({ changes: { from: 0, to: contentLength.value, insert: props.content, }, }); contentLength.value = upcomingContentLength; } } ); const onActionClicked = () => { emit(BentoCodeSnippetEvent.ACTION, currentContents.value); }; watchEffect(() => { if (currentContents.value !== null) { emit(BentoCodeSnippetEvent.CHANGE, currentContents.value); } }); const showModal = ref(false); </script> <script lang="ts"> /** * A code-snippet is a container to display code in a readable way. * Come with added functionalities like syntax highlighting, editing and actioning the code * * @example * import { BentoCodeSnippet } from '@adyen/bento-vue2'; * * export default { * components: { BentoCodeSnippet }, * template: ` * <bento-code-snippet :variant="BentoCodeSnippetVariant.MULTILINE" content="{ example: 1234 }" /> * ` * } */ export default { i18n: { messages }, name: 'bento-code-snippet', }; </script> <style lang="scss" scoped src="./code-snippet.scss"></style> 

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

@@ -0,0 +1,61 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ComponentStories from './country.stories';
+
+<Meta of={ComponentStories} />
+
+# Country
+
+A Country component to display the country's label. The label comes in four variates: iso code, country name, phone
+number code or capital city.
+
+<Canvas of={ComponentStories.Default} />
+
+## Use Cases
+
+Use a Country if:
+
+-   You need to display country information in a visual way.
+-   Need to show a list of phone number codes.
+-   Need to show a list of capitals.
+
+### Do not use
+
+In a filter or dropdown, there are components specific for those usages.
+
+## Code
+
+<Canvas of={ComponentStories.Default} />
+
+To determine which country the component should display, the `code` property is used. The value passed to this property
+should translate to a two character country code in
+([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).
+
+## Variations
+
+Use the `variant` prop to change the label of the country. This prop can take the following values:
+
+-   `'iso'`
+-   `'name'`
+-   `'phone_code'`
+-   `'capital'`
+
+### Name (default)
+
+Displays the country's name as the label.
+
+### ISO
+
+Displays the two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2))
+as the label.
+
+### Phone code
+
+Displays ISO code and phone number code as the label, e.g. NL (+31).
+
+### Capital
+
+Displays the country and capital city as the label, e.g. Amsterdam (Netherlands)
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=2882%3A78027&t=0ACEzlBBN6wJNhg1-1)

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

@@ -0,0 +1 @@
+import { BentoCountryCode, BentoCountryVariant } from './country.types'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoCountry from './country.vue'; import { isVue2 } from 'vue-demi'; const COUNTRY_CODES_LIST = Object.values(BentoCountryCode); const ALPHABETICALLY_ORDERED_COUNTRY_CODES = COUNTRY_CODES_LIST.sort(); export default { title: 'Country', component: BentoCountry, argTypes: { code: { options: ALPHABETICALLY_ORDERED_COUNTRY_CODES, mapping: BentoCountryCode, control: { type: 'select', }, }, variant: { options: Object.values(BentoCountryVariant), mapping: BentoCountryVariant, control: { type: 'select', labels: { custom: 'DEPRECATED: custom', }, }, }, }, }; export const Default = (_args, { argTypes }) => ({ components: { BentoCountry }, props: Object.keys(argTypes), template: ` <bento-country v-bind="args"/> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }); Default.args = { code: BentoCountryCode.NL, }; Default.parameters = storybookDocsParameter(` <bento-country :code="BentoCountryCode.NL"/> `); 

package/dist/assets/components/country/country.vue

@@ -0,0 +1 @@
+<template> <div class="b-country"> <div class="b-country__label"> <span v-if="isSummaryGridLayout">{{ countryLabel }}</span> <bento-typography v-else el="span">{{ countryLabel }}</bento-typography> </div> </div> </template> <script setup lang="ts"> import { inject, ref, toRefs, watch } from 'vue'; import { BentoTypography } from '@/components/typography'; import { useCountryCapital, useCountryName, useCountryPhoneCode } from './composables'; import { BentoCountryCode, type BentoCountryProps, BentoCountryVariant } from './country.types'; import { useI18n } from '@/utils/ts/i18n'; import { deprecate } from '@/utils/ts/deprecate'; import { type BentoSummaryGridLayout } from '@/components/summary-grid'; import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys'; const props = withDefaults(defineProps<BentoCountryProps>(), { code: BentoCountryCode.UNKNOWN, label: undefined, variant: BentoCountryVariant.NAME, }); const { code, variant, label: customLabel } = toRefs(props); const { locale } = useI18n(undefined, true); const countryName = useCountryName(code, locale); const countryLabel = ref(''); const getLabel = () => { switch (variant.value) { case BentoCountryVariant.ISO: return code.value; case BentoCountryVariant.PHONE_CODE: return `${code.value} (${useCountryPhoneCode(code).value})`; case BentoCountryVariant.CAPITAL: // TODO: do we need an API OR get a longer translations list??? // Need to be able TRANSLATE as well as map... return `${useCountryCapital(code, locale).value} (${countryName.value})`; case BentoCountryVariant.CUSTOM: return customLabel.value; case BentoCountryVariant.NAME: default: return countryName.value; } }; // Update label if variant prop changes watch( [variant, locale, code], () => { countryLabel.value = getLabel(); }, { immediate: true } ); if (variant.value === 'custom' || props.label) { deprecate( 'BentoCountry "custom" variant and "label" prop', 'Use any of the other BentoCountry variants instead OR BentoTypography component for custom text', '2.0.0' ); } /* == Summary-grid styles == */ const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject( SUMMARY_GRID_LAYOUT_INJECTION_KEY, () => ({ isSummaryGridLayout: false, }) ); const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid(); </script> <script lang="ts"> /** * A component to display a country's label. * The label comes in four variates: iso code, country name, phone number code or capital city. * * @usage * import { BentoCountry, BentoCountryCode } from '@adyen/bento-vue2'; * * export default { * components: { BentoCountry }, * template: ` * <bento-country :code="BentoCountryCode.NL" /> * ` * } */ export default { name: 'bento-country', }; </script> <style lang="scss" scoped src="./country.scss" /> 

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

@@ -0,0 +1,38 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as CurrencyStories from './currency.stories';
+
+<Meta of={CurrencyStories} />
+
+# Currency
+
+A currency component is used to display a formatted currency value. It renders the formatted currency value with the
+numeric amount and currency ISO code appended.
+
+<Canvas of={CurrencyStories.Default} />
+
+## Use Cases
+
+Use currency component for:
+
+-   displaying payment amounts in data-grid
+
+## Variations
+
+### Major Units
+
+`bento-currency` component uses minor currency units by default (e.g. cents for Euro).
+
+If you want to use major units, then `majorUnits` property should be added to `bento-currency` component
+
+<Canvas of={CurrencyStories.MajorUnits} />
+
+## Accessibility
+
+### Keyboard Interaction
+
+The currency component is not reachable through keyboard navigation since it's a non-interactive element that displays a
+readonly currency information
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=2882-78027&t=ZR8lRIGw62b0oKKO-0)

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

@@ -0,0 +1 @@
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoCurrencyISOCode, type BentoCurrencyProps } from '@/components/currency/currency.types'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoCurrency from './currency.vue'; export default { title: 'Currency', component: BentoCurrency, argTypes: { default: { name: 'default (deprecated)', defaultValue: '', description: 'Amount value. Use `value` property instead', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', disable: true, }, }, currency: { options: Object.values(BentoCurrencyISOCode), mapping: BentoCurrencyISOCode, control: { type: 'select', }, }, currencySign: { options: ['standard', 'accounting'], mapping: BentoCurrencyISOCode, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoCurrency>; const DEFAULT_CURRENCY_PROPS: BentoCurrencyProps = { currency: BentoCurrencyISOCode.EUR, currencySign: 'standard', majorUnits: false, value: 123423, }; const DefaultTemplate: Story = { render: (_args, { argTypes }) => ({ components: { BentoCurrency }, props: Object.keys(argTypes), template: ` <bento-currency v-bind="args" /> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), }; const defaultCode = ` <bento-currency :currency="BentoCurrencyISOCode.EUR" :value="${DEFAULT_CURRENCY_PROPS.value}" :major-units="false" /> `; export const Default = { ...DefaultTemplate, args: { ...DEFAULT_CURRENCY_PROPS, }, parameters: storybookDocsParameter(defaultCode), }; const majorUnitsCode = ` <bento-currency :currency="BentoCurrencyISOCode.EUR" :value="${DEFAULT_CURRENCY_PROPS.value}" major-units /> `; export const MajorUnits = { ...DefaultTemplate, args: { ...DEFAULT_CURRENCY_PROPS, majorUnits: true, }, parameters: storybookDocsParameter(majorUnitsCode), }; 

package/dist/assets/components/currency/currency.vue

@@ -0,0 +1 @@
+<template> <div class="b-currency"> <bento-typography v-if="!disableTypography" class="b-currency__amount" el="span" variant="body" strong> {{ formattedCurrency }} </bento-typography> <template v-else>{{ formattedCurrency }}</template> </div> </template> <script setup lang="ts"> import { computed, onMounted, useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import { useBentoCurrency } from '@/composables/use-bento-currency/use-bento-currency'; import { deprecate } from '@/utils/ts/deprecate'; import { getSlotText } from '@/utils/ts/get-slot-text'; import { BentoCurrencyISOCode, type BentoCurrencyProps } from './currency.types'; const slots = useSlots(); const props = withDefaults(defineProps<BentoCurrencyProps>(), { currency: BentoCurrencyISOCode.EUR, disableTypography: false, majorUnits: false, value: undefined, currencySign: 'standard', }); const { formatCurrency } = useBentoCurrency(); const formattedCurrency = computed(() => { const rawCurrencyValue = props.value ?? getSlotText(slots)('default'); return formatCurrency(rawCurrencyValue, { currency: props.currency, currencySign: props.currencySign, majorUnits: props.majorUnits, }); }); onMounted(() => { if (getSlotText(slots)('default')) { deprecate( 'BentoCurrency "default" slot', `The use of "default" slot in "BentoCurrency" is no longer supported as it causes issues with dynamic content. Use the "value" property instead. <bento-currency :value="12345.67" currency="USD" major-units="false" />`, '2.0.0' ); } }); </script> <script lang="ts"> /** * A Currency component is used to display a formatted currency value. * * @example * import { BentoCurrency, BentoCurrencyISOCode } from '@adyen/bento-vue2'; * * export default { * components: { BentoCurrency }, * template: ` * <bento-currency * :currency="BentoCurrencyISOCode.USD" * :value="76.33" * /> * ` * } */ export default { name: 'bento-currency', i18n: {}, // required to enable E2E to run as they do not have vue-i18n set up }; </script> <style lang="scss" scoped src="./currency.scss" /> 

package/dist/assets/components/dashed-underline/dashed-underline.docs.mdx

@@ -0,0 +1,57 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as DashedUnderlineStories from './dashed-underline.stories';
+
+<Meta of={DashedUnderlineStories} />
+
+# Dashed underline
+
+The dashed underline serves as a visual cue to indicate that additional information is available for a specific word or
+phrase without adding an icon. When users hover over the underlined text, a tooltip or popover will appear, providing
+further explanation or context related to that specific term.
+
+<Canvas of={DashedUnderlineStories.WithTooltip} />
+
+## Use Cases
+
+Use a dashed underline if:
+
+-   You need to offer contextual guidance for one or two words within a sentence, or a single term
+-   There is limited space (e.g.: data-grid column headers)
+-   There are multiple instances of contextual guidance on a single page, to declutter the page
+
+### Do not use
+
+-   If there's a single contextual guidance item in the page with enough space - you should use an info icon instead.
+
+## Variations
+
+### With tooltip
+
+For more concise and single-purpose extra information, use the dashed underline with a tooltip:
+
+<Canvas of={DashedUnderlineStories.WithTooltip} />
+
+### With popover
+
+For larger and/or more complex extra information, including links to other pages/sections, use the dashed underline with
+a popover:
+
+<Canvas of={DashedUnderlineStories.WithPopover} />
+
+In both tooltip and popover variations, you can configure the position of the attached element using the respective
+properties.
+
+## Accessibility
+
+### Keyboard interaction
+
+`BentoDashedUnderline` is reachable through keyboard navigation as a focusable element. This allows for triggering the
+attached tooltip/popover/clickable action via keyboard only.
+
+| Keyboard interaction | Output                             |
+| -------------------- | ---------------------------------- |
+| `Tab`                | Moves focus to the annotated text. |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=30676-14818&t=qCTheTgk60Jf4Rfj-4)

package/dist/assets/components/dashed-underline/dashed-underline.stories.ts

@@ -0,0 +1 @@
+import { isVue2 } from 'vue-demi'; import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoLink } from '@/components/link'; import { BentoPopoverPositions } from '@/components/popover'; import { BentoTooltipPosition } from '@/directives'; import { BentoTypography } from '@/components/typography'; import BentoDashedUnderline from './dashed-underline.vue'; const TELEPORT_DEFAULT = { disabled: true, }; const meta: Meta = { title: 'Dashed underline', component: BentoDashedUnderline, argTypes: { // Enums tooltipPosition: { options: Object.values(BentoTooltipPosition), mapping: BentoTooltipPosition, control: { type: 'select', }, }, popoverPosition: { options: Object.values(BentoPopoverPositions), mapping: BentoPopoverPositions, control: { type: 'select', }, }, // Slots default: { defaultValue: 'annotated text', description: 'Dashed underline content', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, }, }; export default meta; type Story = StoryObj<typeof BentoDashedUnderline>; const withTooltipCode = ` <bento-dashed-underline tooltip-text="Some extra info">annotated text</bento-dashed-underline> `; export const WithTooltip: Story = { render: (_args, { argTypes }) => ({ components: { BentoTypography, BentoDashedUnderline }, props: Object.keys(argTypes), template: ` <bento-typography> This is an example of some <bento-dashed-underline v-bind="args">{{args.default}}</bento-dashed-underline>. </bento-typography> `, setup(props) { return { // Values args: isVue2 ? props : _args, }; }, }), args: { default: 'annotated text with tooltip', tooltipText: 'Some extra info', }, parameters: storybookDocsParameter(withTooltipCode), }; const withPopoverCode = ` <bento-dashed-underline> annotated text <template #popover-content> Some extra info. <bento-link>Learn more here</bento-link> </template> </bento-dashed-underline> `; export const WithPopover: Story = { render: (_args, { argTypes }) => ({ components: { BentoTypography, BentoDashedUnderline, BentoLink }, props: Object.keys(argTypes), template: ` <bento-typography> This is an example of some <bento-dashed-underline v-bind="args"> {{ args.default }} <template v-if="!args.popoverText" #popover-content> Some extra info. <bento-link to="https://www.adyen.com/" external> Learn more here </bento-link> </template> </bento-dashed-underline> </bento-typography> `, setup(props) { return { // Values args: isVue2 ? props : _args, }; }, }), args: { default: 'annotated text with popover', teleport: { ...TELEPORT_DEFAULT }, }, parameters: storybookDocsParameter(withPopoverCode), }; 

package/dist/assets/components/dashed-underline/dashed-underline.vue

@@ -0,0 +1 @@
+<template> <span ref="element" v-bento-tooltip-directive:[tooltipPosition]="tooltipText" class="b-dashed-underline" tabindex="0" @mouseenter="openPopover" @mouseleave="closePopover" @focus="dashedUnderlineOnFocus" @focusout="dashedUnderlineOnFocusOut" > <span class="b-dashed-underline__content"> <slot></slot> </span> <bento-teleport v-if="element && hasPopover" :disabled="teleport?.disabled" :to="teleport?.to"> <span v-on="computedPopoverContainerEvents"> <bento-popover :open="isOpen" :target-element="element" :position="popoverPosition" role="tooltip" :fit-content="popoverSize === 'fit-content' || undefined" :large="popoverSize === 'large' || undefined" :small="popoverSize === 'small' || undefined" :title="popoverTitle" disable-focus-trap > <slot name="popover-content"> <bento-typography> {{ popoverText }} </bento-typography> </slot> </bento-popover> </span> </bento-teleport> </span> </template> <script lang="ts" setup> import { computed, ref, useSlots, watch } from 'vue'; import { BentoPopover } from '@/components/popover'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip/index'; import { BentoTypography } from '@/components/typography'; import { useHasSlot } from '@/composables'; import { BentoTeleport } from '@/internal'; import { type BentoDashedUnderlineProps } from './dashed-underline.types'; const CLOSING_POPOVER_DELAY_MS = 200; const props = withDefaults(defineProps<BentoDashedUnderlineProps>(), { popoverText: null, popoverTitle: null, popoverPosition: 'top', popoverSize: 'fit-content', teleport: () => ({ disabled: true, }), tooltipText: null, tooltipPosition: 'top', }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const element = ref<HTMLSpanElement>(null); const isOpen = ref(false); const closingTimeOutId = ref(); const openPopover = () => { isOpen.value = true; if (closingTimeOutId.value) { clearTimeout(closingTimeOutId.value); } }; const closePopover = () => { // We want to delay closing for a couple of seconds so // it doesn't flicker if a user hovers over the icon and then inside the popover. const timeOutId = setTimeout(() => { isOpen.value = false; }, CLOSING_POPOVER_DELAY_MS); closingTimeOutId.value = timeOutId; }; const dashedUnderlineOnFocus = () => { openPopover(); }; /** * Only close popover on blur if the newly focus element is not a child of this element * @param e - the event that contains the newly focused element */ const dashedUnderlineOnFocusOut = (e: FocusEvent) => { if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) { closePopover(); } }; const hasPopover = computed(() => props.popoverText || hasSlot('popover-content')); const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value); watch( shouldShowTooltipPopoverError, value => { if (value) { throw new Error( 'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.' ); } }, { immediate: true } ); /** * When the popover is teleported, it is no longer a DOM descendant of the trigger element. * We add these event listeners to the popover's container to keep the popover open when * the user moves their mouse or focuses out from the trigger to the popover BUT then mouses over * or focuses on the popover content. */ const computedPopoverContainerEvents = computed(() => props.teleport?.disabled === false ? { mouseenter: openPopover, mouseleave: closePopover, focus: dashedUnderlineOnFocus, focusout: dashedUnderlineOnFocusOut, } : {} ); </script> <script lang="ts"> /** * Provides a dashed underline to text, indicating that more information is available on * hover or focus. The additional information is displayed in a tooltip or a popover. * * @example * import { BentoDashedUnderline } from '@adyen/bento-vue2'; * * export default { * components: { BentoDashedUnderline }, * template: ` * <p> * This is some <bento-dashed-underline tooltip-text="A short explanation">annotated text</bento-dashed-underline>. * </p> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./dashed-underline.scss" /> 

package/dist/assets/components/data-grid/components/data-grid-cell/data-grid-cell.vue

@@ -0,0 +1 @@
+<template> <div :key="`cell-${column.field}`" ref="gridcellRef" :aria-hidden="ariaHidden" :data-testid="`cell-${column.field}`" :data-cellindex="getCellIndex(rowIndex, colIndex, columnSetIndex)" class="b-data-grid-cell" :class="conditionalRowCellClasses(column)" role="gridcell" :tabindex="tabIndex" :aria-colindex="getColIndex(colIndex, columnSetIndex) + 1" :style="{ width: column.autoWidth && isMeasuringColumnWidths ? 'auto' : `${column.width}px`, }" v-on="getGridcellEvents(column)" > <template v-if="column.field === DATAGRID_ACTIONS_COLUMN_FIELD_NAME"> <template v-if="selectable"> <bento-checkbox class="b-data-grid-cell__select-cell" :aria-label="t('selectRow')" :disabled="isDataItemDisabled(rowData)" :indeterminate="selectionIsIndeterminate" :model-value="selectedItems" :value="getDataItemId(rowData)" :tabindex="isFocused ? 0 : -1" @update:model-value="$emit('select-row', $event)" /> </template> <template v-if="nestedContent"> <bento-toggle-button ref="menuButtonRef" aria-haspopup="true" :aria-controls="controlledNestedRowElementIds" condensed variant="tertiary" :toggled="isNestedContentExpanded" @click="toggleNestedContent" > <template #iconLeft> <chevron-up-icon v-if="isNestedContentExpanded" class="b-accordion-item__icon" :svg-title="t('collapseNestedContent')" /> <chevron-down-icon v-else class="b-accordion-item__icon" :svg-title="t('expandNestedContent')" /> </template> </bento-toggle-button> </template> </template> <template v-else> <bento-typography el="div" class="b-data-grid-cell__cell-content" :class="computedCellContentClasses" data-testid="cell-content" > <slot :item="rowData" :row-index="rowIndex" :name="`item-${column.field}`"> <span :title="conditionalTitleAttribute(column, rowData[column.field])">{{ getRowData(rowData[column.field]) }}</span> </slot> </bento-typography> <div v-if="column.cellActions?.length > 0" class="b-data-grid-cell__cell-actions"> <data-grid-cell-actions v-if="(shouldShowCellActions || isTouchDevice) && (hasRowData || hasSlot(`item-${column.field}`))" ref="cellActionsRef" :cell-actions="column.cellActions" :column-key="column.field" :row-data-item="rowData" :has-zebra-background="hasZebraBackground" :is-highlighted="isHighlighted" :is-selected="isSelected" teleport-menu @menu-item-click="onMenuClose" /> </div> </template> </div> </template> <script setup lang="ts"> import { computed, type ComputedRef, inject, nextTick, onMounted, type PropType, provide, type Ref, ref, type UnwrapRef, useSlots, watch, } from 'vue'; import { focusOnInteractiveChild, makeAllInteractiveChildrenFocusable, makeAllInteractiveChildrenUnFocusable, } from '../../utils'; import { DATAGRID_ACTIONS_COLUMN_FIELD_NAME } from '../../composables/use-calculate-column-width'; import { BentoCheckbox } from '@/components/checkbox'; import { BentoTypography } from '@/components/typography'; import { BentoToggleButton } from '@/components/button'; import DataGridCellActions from '../data-grid-cell-actions/data-grid-cell-actions.vue'; import { DATA_GRID_SLASHED_ZERO, DATA_GRID_SMALL_CONTAINER, DATA_GRID_TOUCH_DEVICE } from '../../data-grid.keys'; import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down'; import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up'; import { DATA_GRID_CELL_MENU_REGISTERING_INJECTION_KEY } from '@/components/data-grid/components/data-grid-cell/data-grid-cell.keys'; // Types and enums import { type BentoColumn, BentoColumnOverflow, type BentoDatagridDataItem, type BentoDatagridDataItemId, type BentoDatagridGetDataItemIdFn, type BentoDatagridIsDataItemDisabledFn, } from '@/components/data-grid/data-grid.types'; import { type DataGridCellColumnSet, type DataGridCellDragEventsForColumn, type DataGridCellEvents, type DataGridCellEventsForColumn, DataGridCellPropClass, } from './data-grid-cell.types'; import type { BentoDatagridDraggingColumnState } from '../data-grid-columns/data-grid-columns.types'; import type { DatagridColumnHoveringState } from '@/components/data-grid/composables/use-column-hovering/use-column-hovering.types'; // Utils import { useHasSlot } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import { isFocusVisible } from '@/utils/ts/focus-visible'; import { EventKey } from '@/types/utils-events'; // Translations import messages from './messages.json'; const slots = useSlots(); const hasSlot = useHasSlot(slots); type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = defineProps({ draggingEventsForRowCell: { type: Function as PropType<DataGridCellDragEventsForColumn>, required: true, }, /** * The columns sets including */ columnSets: { type: Array as PropType<Array<DataGridCellColumnSet>>, required: true, }, /** * The columns set we are iterating over */ column: { type: Object as PropType<BentoColumn>, required: true, }, colIndex: { type: Number, required: true, }, columnSetIndex: { type: Number, required: true, }, /** * Sets the row cells to the condensed padding state. */ condensed: { type: Boolean, default: false, }, /** * Columns being dragged, contains dragging column and a target column */ draggingColumns: { type: Object as PropType<BentoDatagridDraggingColumnState>, default: undefined, }, /** * A customisable method to retrieve a unique identifier for a data item in the array of data supplied. * This is used selecting and performance reasons and must exist in each data item. */ getDataItemId: { type: Function as PropType<BentoDatagridGetDataItemIdFn>, default: (item: BentoDatagridDataItem) => item.id, }, /** * Set to true if the cell has a darker background when zebra rows is enabled. */ hasZebraBackground: { type: Boolean, default: false, }, /** * Set to true if the row is selected. */ isSelected: { type: Boolean, default: false, }, /** * Set to true if the row is highlighted. */ isHighlighted: { type: Boolean, default: false, }, /** * The column hovered over state and whether the hovered over column should show a border right or left. */ hoveredOverColumnState: { type: Object as PropType<DatagridColumnHoveringState>, required: true, }, /** * A customisable method to determine if a row is not selectable. * The default is that every row is selectable. */ isDataItemDisabled: { type: Function as PropType<BentoDatagridIsDataItemDisabledFn>, default: () => false, }, isMeasuringColumnWidths: { type: Boolean, default: false, }, /** * Determines if the nested content is visible. */ isNestedContentExpanded: { type: Boolean, default: false, }, /** * Determines if the nest content slot is enabled for this data row. */ nestedContent: { type: Boolean, default: false, }, /** * The IDs of the rows this cell controls to show / hide them. */ nestedRowsElementIds: { type: Array as PropType<Array<string>>, default: () => [], }, /** * The row data object */ rowData: { type: Object as PropType<BentoDatagridDataItem>, required: true, }, rowIndex: { type: Number, required: true, }, /** * The row selection checkbox indeterminate state. */ selectionIsIndeterminate: { type: Boolean, default: false, }, /** * Determines if the row selection is enabled. */ selectable: { type: Boolean, default: false, }, selectedItems: { type: Array as PropType<Array<BentoDatagridDataItemId>>, required: true, }, }); const emit = defineEmits<{ /** * Emitted when an a frozen column cell fires a key up or down event. */ (e: 'on-frozen-columns-key-press', event: Event); /** * Emitted when a row has been selected. */ (e: 'select-row', value: Array<BentoDatagridDataItemId>); /** * Emitted when a row has been selected. */ (e: 'register-row-cell-element', el: Element, field: string, rowIndex: number); /** * Emitted when a cell has been hovered over. This is used to keep the row in a hovered state when hovering over a menu. */ (e: 'cell-hovered', value: number); /** * Emitted when nested content is being toggled. */ (e: 'nested-content-toggled'); /** * Emitted when a cell gains focus. */ ( e: 'cell-focus', value: { rowData: BentoDatagridDataItem; column: BentoColumn; rowIndex: number; colIndex: number } ); }>(); // References const gridcellRef = ref<HTMLDivElement | null>(null); const cellActionsRef = ref<InstanceType<typeof DataGridCellActions>>(null); const shouldShowCellActions = ref(false); const childrenMenuContainerElements = ref<Array<Ref<UnwrapRef<HTMLDivElement>>>>([]); const isFocused = ref(false); const focusableItems = ref<Array<{ node: HTMLElement }>>(); const hasEverBeenFocused = ref(false); // Computed const hasRowData = computed(() => !!props.rowData?.[props.column.field]); const controlledNestedRowElementIds = computed(() => props.column.field === DATAGRID_ACTIONS_COLUMN_FIELD_NAME && props.nestedRowsElementIds?.length > 0 ? props.nestedRowsElementIds.join(' ') : undefined ); const ariaHidden = computed( () => props.column.field === DATAGRID_ACTIONS_COLUMN_FIELD_NAME && !props.selectable && !props.nestedContent ); const tabIndex = computed(() => { if (!ariaHidden.value) { // The first cell of the grid should be tabbable on initial render to allow keyboard navigation into the grid. if (getCellIndex(props.rowIndex, props.colIndex, props.columnSetIndex) === 0 && !hasEverBeenFocused.value) { return '0'; } // A cell becomes part of the tab order only when it is focused. if (isFocused.value) { return '0'; } } // Action cells are not directly tabbable; they are accessed via cell navigation. if (props.column.field === DATAGRID_ACTIONS_COLUMN_FIELD_NAME) { return '-1'; } // By default, cells are not in the tab order. return '-1'; }); // Row data retrieval methods const conditionalTitleAttribute = (column: BentoColumn, content: unknown) => column?.overflow === BentoColumnOverflow.ELLIPSIS ? `${content}` : undefined; const getRowData = (rowData: unknown) => rowData ?? '-'; // Cell and Columns index calculation const sumColumnAmountsInColumnSets = (limitIndex?: number) => props.columnSets.slice(0, limitIndex).reduce((total, { columnSet }) => total + columnSet.length, 0); // Sums the amount of columns on every previous column set to find // the absolute column index (useful for frozen columns use case) const getColIndex = (colIndex: number, colSetIndex: number) => colIndex + sumColumnAmountsInColumnSets(colSetIndex); const getCellIndex = (rowIndex: number, colIndex: number, colSetIndex: number) => sumColumnAmountsInColumnSets() * rowIndex + getColIndex(colIndex, colSetIndex); /** * We check here if we are leaving the cell but mouse into a child menu * If this is the case we don't want to hide the cell actions. * @param relatedTarget */ const isLeavingCellFocus = (relatedTarget: EventTarget) => { if ( relatedTarget === null || (!gridcellRef.value.contains(relatedTarget as Node) && !childrenMenuContainerElements.value ?.map(registeredMenuRef => registeredMenuRef.value) .some(menuElement => menuElement === relatedTarget || menuElement?.contains(relatedTarget as Node))) ) { shouldShowCellActions.value = false; } }; /** * Hides the cell actions when a menu item is clicked. This is necessary as relying solely on * focus-out events is not reliable, especially when the menu is teleported or an action * causes focus to leave the window. */ const onMenuClose = () => { shouldShowCellActions.value = false; }; // Events const hasInteractiveElFocusedInside = ref(false); const getGridcellEvents: DataGridCellEventsForColumn = (column: BentoColumn) => { const defaultEvents: DataGridCellEvents = { ...props.draggingEventsForRowCell(column), // Focus on the first interactive child in the grid cell if one exists focus: async () => { if (!isFocusVisible()) { return; } isFocused.value = true; hasEverBeenFocused.value = true; emit('cell-focus', { rowData: props.rowData, column: props.column, rowIndex: props.rowIndex, colIndex: getColIndex(props.colIndex, props.columnSetIndex), }); makeAllInteractiveChildrenFocusable(focusableItems.value); await nextTick(); const hasFocusedOnInteractiveChild = focusOnInteractiveChild(gridcellRef.value); if (hasFocusedOnInteractiveChild) { hasInteractiveElFocusedInside.value = true; } }, focusout: () => { if (!isFocusVisible()) { return; } hasInteractiveElFocusedInside.value = false; }, keydown: (event: KeyboardEvent) => { if (event.key !== EventKey.TAB) { hasInteractiveElFocusedInside.value = false; isFocused.value = false; makeAllInteractiveChildrenUnFocusable(gridcellRef.value); } }, }; const gridCellEvents: DataGridCellEvents = { ...defaultEvents }; if (column.frozen) { gridCellEvents.keyup = (event: Event) => emit('on-frozen-columns-key-press', event); gridCellEvents.keydown = (event: KeyboardEvent) => { defaultEvents.keydown(event); emit('on-frozen-columns-key-press', event); }; } if (column.cellActions) { gridCellEvents.mouseenter = () => { shouldShowCellActions.value = true; }; gridCellEvents.mouseleave = (e: MouseEvent) => { isLeavingCellFocus(e?.relatedTarget); }; gridCellEvents.focus = async (e: FocusEvent) => { defaultEvents.focus(e); await nextTick(); shouldShowCellActions.value = true; }; gridCellEvents.focusout = (e: FocusEvent) => { defaultEvents.focusout(e); isLeavingCellFocus(e?.relatedTarget); }; } return gridCellEvents; }; onMounted(() => { focusableItems.value = makeAllInteractiveChildrenUnFocusable(gridcellRef.value); }); const toggleNestedContent = () => { emit('nested-content-toggled'); }; // Each cell knows it's on hover state but this state needs to be emitted up // in order for the DataGrid to know which row to set the hovered state on. watch( () => shouldShowCellActions.value, () => { if (shouldShowCellActions.value === true) { emit('cell-hovered', props.rowIndex); } else { emit('cell-hovered', -1); } } ); const registerMenuContainerElement = (menuContainerElement: Ref<UnwrapRef<HTMLDivElement>>) => { childrenMenuContainerElements.value.push(menuContainerElement); }; const menuMouseLeave = (e: MouseEvent) => { if (!gridcellRef.value.contains(e?.relatedTarget as Node)) { shouldShowCellActions.value = false; } }; provide<{ registerMenuContainerElement: (menuContainerElement: Ref<UnwrapRef<HTMLDivElement>>) => void; menuMouseLeave: (e: MouseEvent) => void; }>(DATA_GRID_CELL_MENU_REGISTERING_INJECTION_KEY, { registerMenuContainerElement, menuMouseLeave, }); const hasSlashedZero = inject(DATA_GRID_SLASHED_ZERO, ref(false)); const isSmallContainer: ComputedRef<boolean> = inject( DATA_GRID_SMALL_CONTAINER, computed(() => false) ); const isTouchDevice: Ref<boolean> = inject(DATA_GRID_TOUCH_DEVICE, ref(false)); // Styling const conditionalRowCellClasses = (column: BentoColumn) => ({ [`b-data-grid-cell--${DataGridCellPropClass.COLUMN_HOVERED}`]: column?.field === props.hoveredOverColumnState.hoveredOverColumnField, [`b-data-grid-cell--${DataGridCellPropClass.COLUMN_HOVERED_NO_BORDER_LEFT}`]: column?.field === props.hoveredOverColumnState.hoveredOverColumnField && props.hoveredOverColumnState.noBorderLeft, [`b-data-grid-cell--${DataGridCellPropClass.COLUMN_HOVERED_NO_BORDER_RIGHT}`]: column?.field === props.hoveredOverColumnState.hoveredOverColumnField && props.hoveredOverColumnState.noBorderRight, [`b-data-grid-cell--${DataGridCellPropClass.PADDING_LEFT_UNSET}`]: column?.padding?.left === false, [`b-data-grid-cell--${DataGridCellPropClass.PADDING_RIGHT_UNSET}`]: column?.padding?.right === false, [`b-data-grid-cell--${DataGridCellPropClass.NUMERIC}`]: column?.numeric, [`b-data-grid-cell--${DataGridCellPropClass.CONDENSED}`]: props.condensed, [`b-data-grid-cell--${DataGridCellPropClass.OVERFLOW_ELLIPSIS}`]: column?.overflow === BentoColumnOverflow.ELLIPSIS, [`b-data-grid-cell--${DataGridCellPropClass.IS_COLUMN_REORDERING}`]: props.draggingColumns.dragging?.field === column.field, [`b-data-grid-cell--${DataGridCellPropClass.IS_COLUMN_REORDERING_TARGET_LEFT}`]: props.draggingColumns.target?.field === column.field && props.draggingColumns?.dragToLeft, [`b-data-grid-cell--${DataGridCellPropClass.IS_COLUMN_REORDERING_TARGET_RIGHT}`]: props.draggingColumns.target?.field === column.field && !props.draggingColumns?.dragToLeft, [`b-data-grid-cell--${DataGridCellPropClass.FROZEN}`]: column?.frozen, [`b-data-grid-cell--${DataGridCellPropClass.NESTED_CONTENT_ENABLED}`]: props.nestedContent, [`b-data-grid-cell--${DataGridCellPropClass.ACTION_COL_NESTED_CONTENT_ENABLED}`]: props.nestedContent && !props.selectable && column.field === DATAGRID_ACTIONS_COLUMN_FIELD_NAME, [`b-data-grid-cell--${DataGridCellPropClass.ACTION_COL_NESTED_CONTENT_AND_SELECTION_ENABLED}`]: props.nestedContent && props.selectable && column.field === DATAGRID_ACTIONS_COLUMN_FIELD_NAME, [`b-data-grid-cell--${DataGridCellPropClass.ACTION_COL_SELECTION_ENABLED}`]: column.field === DATAGRID_ACTIONS_COLUMN_FIELD_NAME && props.selectable, [`b-data-grid-cell--${DataGridCellPropClass.SLASHED_ZERO}`]: hasSlashedZero.value, 'b-data-grid-cell--small-container': isSmallContainer.value, }); const computedCellContentClasses = computed(() => ({ 'b-data-grid-cell__cell-content--is-focused-on-inside-interactive-element': hasInteractiveElFocusedInside.value, })); // Exposed refs defineExpose({ gridcellRef, }); </script> <script lang="ts"> /** * Internal component to display the BentoDataGrid cells. * * The component can also render the selecting row checkbox as well as cell actions. * * @example * <data-grid-cell * * /> */ export default { i18n: { messages }, name: 'data-grid-cell', }; </script> <style lang="scss" scoped src="./data-grid-cell.scss" /> 

package/dist/assets/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.vue

@@ -0,0 +1 @@
+<template> <Transition name="b-data-grid-cell-actions__animation" appear> <div class="b-data-grid-cell-actions"> <div v-if="showGradientElement && !isTouchDevice" class="b-data-grid-cell-actions__background-gradient" :class="conditionalCellActionsBackgroundGradientClasses" ></div> <div class="b-data-grid-cell-actions__actions" :class="conditionalCellActionsClasses" role="group"> <div v-for="(button, index) in computedCellActions" :key="index" class="b-data-grid-cell-actions__action" > <bento-menu v-if="button.menuData" :data="transformMenuEvents(button.menuData)" :button="{ condensed: true, variant: 'secondary', disabled: button.disabled, }" :disable-arrow-down-opening-menu="disableArrowDownOpeningMenu" :teleport="teleportMenu" @open="emit('menu-open')" @close="emit('menu-close')" @menu-item-click="emit('menu-item-click')" > <template v-if="shouldShowMenuIconLeft(button)" #iconLeft> <options-vertical-icon v-if="button?.variant === 'more'" :svg-title="getButtonTitle(button, true)" /> <component :is="button.iconLeft" v-else :svg-title="getButtonTitle(button, true)" /> </template> <template v-if="!button?.isShort" #default> {{ getButtonTitle(button) }} </template> </bento-menu> <copy v-else-if="button.variant === 'copy'" :text="getCopyText(button)" :button-text="getButtonTitle(button)" :button="{ condensed: true, variant: 'secondary', }" /> <bento-button v-else condensed variant="secondary" :critical="button.critical" :disabled="button.disabled" :link="button.link" v-on="generateButtonEvents(button)" > <template v-if="button.iconLeft || button.variant === 'edit'" #iconLeft> <edit1-icon v-if="button?.variant === 'edit'" :svg-title="getButtonTitle(button, true)" /> <component :is="button.iconLeft" v-else :svg-title="button.title" /> </template> <template v-if="!button?.isShort" #default> {{ getButtonTitle(button) }} </template> <template v-if="button.iconRight || button.variant === 'open'" #iconRight> <external-link-icon v-if="button?.variant === 'open'" :svg-title="getButtonTitle(button, true)" /> <component :is="button.iconRight" v-else :svg-title="button.title" /> </template> </bento-button> </div> </div> </div> </Transition> </template> <script setup lang="ts"> import { computed, inject, type PropType, ref, type Ref } from 'vue'; import { BentoButton } from '@/components/button'; import { BentoMenu, type BentoMenuItem } from '@/components/menu'; import { Copy } from '@/internal/copy'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; import { type BentoDatagridDataItem } from '@/components/data-grid/data-grid.types'; import { DATA_GRID_TOUCH_DEVICE } from '@/components/data-grid/data-grid.keys'; import Edit1Icon from '@adyen/ui-assets-icons-16/vue/edit-1'; import ExternalLinkIcon from '@adyen/ui-assets-icons-16/vue/external-link'; import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical'; // Types import type { BentoColumnCellAction, BentoColumnCellActionMenuItem, BentoColumnCellActions, BentoColumnCellActionsByCellDataFn, BentoColumnCellActionsProp, BentoDataGridRowActionsProp, } from './data-grid-cell-actions.types'; // Translations import messages from './messages.json'; import { useI18n } from '@/utils/ts/i18n'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = defineProps({ /** * Column definitions using 'key' to relate to data object. */ cellActions: { type: [Array, Function] as PropType<BentoColumnCellActionsProp | BentoDataGridRowActionsProp>, required: true, validator: (value: BentoColumnCellActions) => value?.length <= 2, }, /** * The column field key. */ columnKey: { type: String, default: undefined, }, /** * Disables any opening of the cell actions menus using the down arrow key. */ disableArrowDownOpeningMenu: { type: Boolean, default: false, }, /** * Set to true if the datagrid has been scrolled and the right side has overflowing space. */ hasRightOverflow: { type: Boolean, default: false, }, /** * Set to true if the row has a darker background when zebra rows is enabled. */ hasZebraBackground: { type: Boolean, default: false, }, /** * Set to true if the row is selected. */ isSelected: { type: Boolean, default: false, }, /** * Set to true if the row is highlighted. */ isHighlighted: { type: Boolean, default: false, }, /** * Set if set to true will teleport the action menu component */ teleportMenu: { type: Boolean, default: false, }, /** * The row data item object. */ rowDataItem: { type: Object as PropType<BentoDatagridDataItem>, required: true, }, }); const emit = defineEmits<{ /** * Emits when a cell actions menu is opened */ (e: 'menu-open'): void; /** * Emits when a cell actions menu is closed */ (e: 'menu-close'): void; /** * Emits when a cell actions menu button closes due to a menu item click */ (e: 'menu-item-click'): void; }>(); const isTouchDevice: Ref<boolean> = inject(DATA_GRID_TOUCH_DEVICE, ref(false)); // Helper to get text for menu items, always returning a string const getMenuItemText = (action: BentoColumnCellAction | BentoColumnCellActionMenuItem) => { // If it's already a menu item with a text property, use it if ('text' in action && action.text !== undefined) { return action.text; } // Otherwise, derive from variant or title switch ((action as BentoColumnCellAction).variant) { case 'copy': return t('copy'); case 'edit': return t('edit'); case 'open': return t('open'); case 'more': return t('more'); default: return (action as BentoColumnCellAction).title; } }; const getMenuItemIcon = (action: BentoColumnCellAction) => { switch (action.variant) { case 'copy': return Copy; case 'edit': return Edit1Icon; case 'open': return ExternalLinkIcon; default: return undefined; } }; const isRowActions = computed(() => props.columnKey === undefined); const conditionalCellActionsBackgroundGradientClasses = computed(() => ({ 'b-data-grid-cell-actions__background-gradient--with-row-actions-and-overflow': isRowActions.value && props.hasRightOverflow, 'b-data-grid-cell-actions__background-gradient--zebra': props.hasZebraBackground, 'b-data-grid-cell-actions__background-gradient--highlighted': props.isHighlighted, 'b-data-grid-cell-actions__background-gradient--selected': props.isSelected, })); const conditionalCellActionsClasses = computed(() => ({ 'b-data-grid-cell-actions__actions--with-row-actions': isRowActions.value, 'b-data-grid-cell-actions__actions--zebra': props.hasZebraBackground, 'b-data-grid-cell-actions__actions--highlighted': props.isHighlighted, 'b-data-grid-cell-actions__actions--selected': props.isSelected, })); const showGradientElement = computed(() => !isRowActions.value || (isRowActions.value && props.hasRightOverflow)); /** * Checks if the passed object is a cell actions function that returns an cell actions array. * @param cellActions - a cell actions array or function */ function isBentoColumnCellActionsByCellValueDataFn( cellActions: BentoColumnCellActionsProp ): cellActions is BentoColumnCellActionsByCellDataFn { return typeof cellActions === 'function'; } const computedCellActions = computed(() => { const cellActions = isBentoColumnCellActionsByCellValueDataFn(props.cellActions) ? props.cellActions?.(props.rowDataItem, props.columnKey) : props.cellActions; if (isTouchDevice.value && !isRowActions.value && cellActions) { const flattenedMenuItems: Array<BentoColumnCellActionMenuItem> = []; cellActions.forEach(action => { if (action.menuData) { action.menuData.forEach(subMenuItem => { flattenedMenuItems.push(subMenuItem); }); } else { flattenedMenuItems.push({ text: getMenuItemText(action), event: action.event, critical: action.critical, disabled: action.disabled, icon: getMenuItemIcon(action), }); } }); return [ { variant: 'more', isShort: true, iconLeft: OptionsVerticalIcon, menuData: transformMenuEvents(flattenedMenuItems), }, ] as BentoColumnCellActions; } // Do not allow users to provide more than 2 cell action buttons if (!isTouchDevice.value && cellActions?.length > 2) { printDevelopmentWarning( 'WARNING: BentoDataGrid Cell actions can only have a maximum of 2 actions, if you need more consider using the menuData property instead.' ); } return cellActions?.slice(0, 2); }); const getButtonTitle = computed(() => (button: BentoColumnCellAction, isForSvgTitle?: boolean) => { if ((!isForSvgTitle && button.isShort) || (isForSvgTitle && !button.isShort)) { return undefined; } switch (button.variant) { case 'copy': return t('copy'); case 'edit': return t('edit'); case 'open': return t('open'); case 'more': return t('more'); default: return button.title; } }); const generateButtonEvents = (button: BentoColumnCellAction) => button?.event !== undefined ? { click: (event: MouseEvent) => { event.stopPropagation(); button.event(props.rowDataItem, props.columnKey); }, } : {}; const generateMenuEvents = (menuDataItem: BentoColumnCellActionMenuItem): BentoMenuItem => ({ ...menuDataItem, handler: () => { if (menuDataItem?.handler && typeof menuDataItem.handler === 'function') { menuDataItem?.handler(); } if (menuDataItem?.event && typeof menuDataItem.event === 'function') { menuDataItem?.event(props.rowDataItem, props.columnKey); } }, }); const transformMenuEvents = (menuData: Array<BentoColumnCellActionMenuItem>) => menuData.map(menuDataItem => { const transformedMenuData = menuDataItem; if (transformedMenuData?.items) { transformedMenuData.items = transformMenuEvents(transformedMenuData.items); } return { ...generateMenuEvents(transformedMenuData) }; }); const getCopyText = (button: BentoColumnCellAction) => button?.getCopyData !== undefined ? button.getCopyData(props.rowDataItem, props.columnKey) : props.columnKey ? (props.rowDataItem?.[props.columnKey]?.toString() as string) : ''; const shouldShowMenuIconLeft = (button: BentoColumnCellAction) => button.iconLeft || button?.variant === 'more'; </script> <script lang="ts"> /** * Internal component to display the data-grid actions. * There are 4 different pre-defined buttons that can be used by using the `variant` property. * * The component renders buttons or a menu depending on the actions provided. * * @example * <data-grid-cell-actions * :cell-actions="[ * { variant: 'edit', event: () => {} }, * { * variant: 'more', * isShort: true, * menuData: [ * { * text: 'Cancel payment', * handler: () => {}), * critical: true, * }, * { * text: 'Transfer payment', * handler: () => {}, * }, * { * text: 'Delete payment', * handler: () => {}, * disabled: true, * }, * ], * }, * ]" * column-key="payment" * :row-data-item="rowData" * /> */ export default { i18n: { messages }, name: 'data-grid-cell-actions', }; </script> <style lang="scss" scoped src="./data-grid-cell-actions.scss" /> 

package/dist/assets/components/data-grid/components/data-grid-columns/data-grid-columns.vue

@@ -0,0 +1 @@
+<template> <div ref="allColumnsRef" class="b-data-grid-columns" :class="conditionalColumnsClasses" data-testid="data-grid-columns" > <div v-for="(column, index) in columns" :key="column.field" :ref="el => registerColumnsRefs(el, column.field)" :aria-colindex="index + 1" :aria-label="column.label" :aria-sort="getSortingColumnDirection(column)" :class="conditionalColumnClasses(column, index)" :data-testid="`${column.field}-column-header`" :draggable="hasDraggableColumns && !isResizing && !isActionsColumn(column)" class="b-data-grid-columns__column" role="columnheader" :tabindex="column.sortable || hasColumnPanel || column.infoIconTooltip ? '0' : '-1'" :style="{ width: column.autoWidth && isMeasuringColumnWidths ? 'auto' : `${column.width}px` }" v-on="dataGridColumnEvents(column)" > <div v-if="isActionsColumn(column) && selectable" class="b-data-grid-columns__select-column" :class="conditionalSelectColumnClasses" > <bento-checkbox v-if="!selectableAcrossPages" :aria-label="t('selectAll')" :model-value="allItemsSelectedState.allItemsSelected" data-testid="checkbox-select-all" :indeterminate="allItemsSelectedState.isIndeterminate" value="data-grid-select-all" @update:model-value="onAllRowSelect" /> <template v-if="selectableAcrossPages"> <bento-menu :button="{ variant: 'tertiary', condensed: true, 'aria-label': t('selectAllMenu') }" :data="selectAllMenu" class="b-data-grid-columns__select-column-menu" disable-arrow-down-opening-menu menu-fixed-positioning menu-position="bottom-start" > <template #iconLeft> <div class="b-data-grid-columns__select-column-menu-button"> <decorative-checkbox :indeterminate="allItemsSelectedState.isIndeterminate" :checked="allItemsSelectedState.allItemsSelected" :all-selected="isAllSelectionState" class="b-data-grid-columns__select-column-menu-checkbox" data-testid="checkbox-select-all" /> <triangle-down :svg-title="t('selectionMenu')" aria-hidden="true" /> </div> </template> </bento-menu> </template> </div> <template v-else> <div :aria-label="t('columnActions', { name: column.label })" aria-live="polite" role="region" class="b-data-grid-columns__column-header-and-actions" :class="conditionalColumnHeaderAndActionsClasses(column)" > <bento-typography el="div" strongest class="b-data-grid-columns__column-header" :class="conditionalColumnHeaderClasses" > <slot :column="column" :name="`head-${column.field}`"> <span class="b-data-grid-columns__label">{{ column.label }}</span> </slot> </bento-typography> <div v-if="hasColumnActions(column)" class="b-data-grid-columns__column-actions" :class="conditionalColumnActionsClasses(column)" > <div v-if="column.infoIconTooltip" class="b-data-grid-columns__column-info-icon"> <bento-info-icon :tooltip-text="column.infoIconTooltip" /> </div> <div v-if="column.sortable" class="b-data-grid-columns__column-sort"> <bento-toggle-button condensed :toggled="isSorting(column.field)" variant="tertiary" @click="sortByColumnField(column.field)" > <template #iconLeft> <arrow-up-and-down-sort-icon v-if="!getSortingDirection(column.field)" :svg-title="t('sortColumn', { name: column.label })" /> <sort-ascending-icon v-else-if=" getSortingDirection(column.field) === BentoDatagridSortDirection.ASCENDING " :svg-title="t('sortColumnInDescendingOrder', { name: column.label })" /> <sort-descending-icon v-else-if=" getSortingDirection(column.field) === BentoDatagridSortDirection.DESCENDING " :svg-title="t('sortColumnInAscendingOrder', { name: column.label })" /> </template> </bento-toggle-button> </div> <bento-menu v-if="hasColumnPanel" :ref="el => (contextMenuRef[column.field] = el)" class="b-data-grid-columns__menu" :class="conditionalColumnMenuClasses(column)" disable-arrow-down-opening-menu :data="contextualMenuData(column)" :menu-position="computeMenuPosition(hasFirstColumnPanelRightAligned, index)" :menu-fixed-positioning="true" :button="{ variant: 'tertiary', condensed: true }" @open="$emit(DatagridColumnsEvent.COLUMN_MENU_OPEN)" @close="$emit(DatagridColumnsEvent.COLUMN_MENU_CLOSE)" /> </div> </div> <div :data-testid="`data-grid-column-${column.field}`" class="b-data-grid-columns__column-separator-container" :class="conditionalColumnSeparatorClasses(column)" role="presentation" @mousedown="startResize(hasResizableColumns, column.field, $event)" @click.stop > <div v-if="!isFrozenColumns || (isFrozenColumns && index !== columns.length - 1)" class="b-data-grid-columns__column-separator" ></div> </div> </template> </div> <template v-if="rowActionsMaximumWidth && !isFrozenColumns"> <div role="presentation" class="b-data-grid-columns__row-actions-filler"></div> <div :ref="el => registerColumnsRefs(el, DATAGRID_ROW_ACTIONS_COLUMN_FIELD_NAME)" :aria-label="t('rowActionsColumn')" :aria-colindex="columns.length + 1" class="b-data-grid-columns__column" role="columnheader" tabindex="0" :style="{ minWidth: `${rowActionsMaximumWidth}px` }" ></div> </template> </div> </template> <script lang="ts" setup> import { computed, type ComputedRef, inject, type PropType, type Ref, ref, toRefs } from 'vue'; import { BentoCheckbox } from '@/components/checkbox'; import { type BentoColumn, type BentoColumnWidthOverridesLookup, type BentoDatagridAllItemsSelectedState, BentoDatagridAriaSortValue, type BentoDatagridSortByColumn, BentoDatagridSortDirection, type BentoDataGridVisibleRowsState, } from '../../data-grid.types'; import { BentoTypography } from '@/components/typography'; import { DATAGRID_ACTIONS_COLUMN_FIELD_NAME, DATAGRID_ROW_ACTIONS_COLUMN_FIELD_NAME, useResizer, useSorter, } from '../../composables'; import { focusOnInteractiveChild } from '../../utils'; import { BentoInfoIcon } from '@/components/info-icon'; import { type BentoDatagridColumnSelectionState, type BentoDatagridDraggingColumnState, DatagridColumnsEvent, type DatagridColumnsHeaderReferences, } from './data-grid-columns.types'; import { BentoMenu } from '@/components/menu'; import { BentoToggleButton } from '@/components/button'; import { DecorativeCheckbox } from '@/internal/decorative-checkbox'; import { useI18n } from '@/utils/ts/i18n'; import type { BentoMenuItem } from '@/components/menu/components'; import type { DatagridColumnHoveringState } from '@/components/data-grid/composables/use-column-hovering/use-column-hovering.types'; import { BentoPopoverPositions } from '@/components/popover/popover.types'; import ArrowUpAndDownSortIcon from '@adyen/ui-assets-icons-16/vue/arrow-up-down-sort'; import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left'; import ArrowRightIcon from '@adyen/ui-assets-icons-16/vue/arrow-right'; import FreezeIcon from '@adyen/ui-assets-icons-16/vue/freeze'; import HideIcon from '@adyen/ui-assets-icons-16/vue/hide'; import SortAscendingIcon from '@adyen/ui-assets-icons-16/vue/sort-ascending'; import SortDescendingIcon from '@adyen/ui-assets-icons-16/vue/sort-descending'; import ShowIcon from '@adyen/ui-assets-icons-16/vue/show'; import TriangleDown from '@adyen/ui-assets-icons-16/vue/triangle-down'; import messages from './messages.json'; import { DATA_GRID_SMALL_CONTAINER, DATA_GRID_TOUCH_DEVICE } from '@/components/data-grid/data-grid.keys'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * Column definitions using 'key' to relate to data object. */ columns: { type: Array as PropType<Array<BentoColumn>>, required: true, }, /** * Columns being dragged, contains dragging column and a target column */ draggingColumns: { type: Object as PropType<BentoDatagridDraggingColumnState>, default: undefined, }, /** * Determines the state of the current results: { filtered: boolean, allItemsVisible: boolean } to render the correct select all menu options */ visibleRowsState: { type: Object as PropType<BentoDataGridVisibleRowsState>, default: undefined, }, /** * Toggle the columns draggable events. */ hasDraggableColumns: { type: Boolean, default: true, }, /** * If resize is enabled */ hasResizableColumns: { type: Boolean, default: true, }, /** * Signifies if the column panel is enabled. */ hasColumnPanel: { type: Boolean, default: false, }, /** * If set to true, aligns the first column panel to the right of its button. */ hasFirstColumnPanelRightAligned: { type: Boolean, default: false, }, /** * If the data grid has overflow on the left side */ hasLeftOverflow: { type: Boolean, default: false, }, /** * The column hovered over state and whether the hovered over column should show a border right or left. */ hoveredOverColumnState: { type: Object as PropType<DatagridColumnHoveringState>, required: true, }, /** * Toggled to true when the DataGrid has auto width columns and is measuring the */ isMeasuringColumnWidths: { type: Boolean, default: false, }, /** * Used to disable hiding the last visible column. */ isOnlyOneVisibleColumn: { type: Boolean, default: false, }, /** * If these columns are frozen (pinned) columns */ isFrozenColumns: { type: Boolean, default: false, }, /** * Show frozen columns separator */ showFrozenColumnsSeparator: { type: Boolean, default: false, }, /** * The column all items selected state */ allItemsSelectedState: { type: Object as PropType<BentoDatagridAllItemsSelectedState>, default: undefined, }, /** * Determines if the user has enabled row selection */ selectable: { type: Boolean, default: false, }, /** * Adds an extra option when selecting all, to select items in other pages too */ selectableAcrossPages: { type: Boolean, default: false, }, /** * Determines which state of row selection is currently active. Used to display the "Select all" menu options. */ selectionState: { type: String as PropType<BentoDatagridColumnSelectionState>, default: undefined, }, /** * Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side. * It does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction. */ sortBy: { type: Array as PropType<Array<BentoDatagridSortByColumn>>, // NOTE: is an array to allow multi-sorting in the future default: () => [], }, /** * Truncates all data grid column headers */ truncateColumnHeaders: { type: Boolean, default: false, }, /** * The maximum width of the row actions in all rows */ rowActionsMaximumWidth: { type: Number, default: 0, }, }); const emit = defineEmits<{ /** * Emitted when a user manually resizes a column width. */ ( e: DatagridColumnsEvent.COLUMN_RESIZE, column: { field: string; width: number; } ); /** * Triggered when a column is resized. */ (e: DatagridColumnsEvent.COLUMN_RESIZING, value: BentoColumnWidthOverridesLookup); /** * Triggered when a column is sorted. */ (e: 'sort', updatedSortBy: Array<BentoDatagridSortByColumn>); /** * Triggered when selecting all rows. */ (e: DatagridColumnsEvent.SELECT_ALL_ROWS, areAllItemsSelected: boolean); /** * Triggered when all rows across all pages are selected. */ (e: DatagridColumnsEvent.SELECT_ALL_ACROSS_PAGES); /** * Triggered when all filtered rows are selected. */ (e: DatagridColumnsEvent.SELECT_ALL_CURRENT_RESULTS); /** * Triggered when deselecting all rows. */ (e: DatagridColumnsEvent.DESELECT_ALL); /** * Triggered when all filtered rows are deselected. */ (e: DatagridColumnsEvent.DESELECT_ALL_CURRENT_RESULTS); /** * Triggered when a columns started to be dragged. */ (e: DatagridColumnsEvent.COLUMN_DRAG_START, column: BentoColumn, event: DragEvent & Event); /** * Triggered when a column is being dragged over another DOM element. */ (e: DatagridColumnsEvent.COLUMN_DRAG_ENTER, column: BentoColumn, event: DragEvent & Event); /** * Triggered when a column is being dragged and is dropped over another DOM element. */ (e: DatagridColumnsEvent.COLUMN_DROP, column: BentoColumn); /** * Triggered when a column drag operation has ended. */ (e: DatagridColumnsEvent.COLUMN_DRAG_END); /** * Triggered when a column is being moved by a certain offset. */ (e: DatagridColumnsEvent.COLUMN_MOVE, movingColumn: BentoColumn, offset: number); /** * Triggered when a column is updated. */ (e: DatagridColumnsEvent.COLUMN_UPDATE, column: BentoColumn); /** * Triggered when the column contextual menu is opened. */ (e: DatagridColumnsEvent.COLUMN_MENU_OPEN); /** * Triggered when the column contextual menu is closed. */ (e: DatagridColumnsEvent.COLUMN_MENU_CLOSE); /** * Emitted when a column header is hovered over. */ (e: 'column-hover', columnKey: BentoColumn); }>(); const CLOSING_CONTEXTUAL_MENU_DELAY_MS = 100; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const { columns, sortBy } = toRefs(props); const allColumnsRef = ref<HTMLDivElement>(); const columnHeaderRefs = ref<DatagridColumnsHeaderReferences>({}); const contextMenuRef = ref({}); const hoveredColumnField = ref(); const closingTimeOutId = ref(); // Selecting const onAllRowSelect = (areAllItemsSelected: boolean) => emit(DatagridColumnsEvent.SELECT_ALL_ROWS, areAllItemsSelected); const isActionsColumn = (column: BentoColumn) => column.field === DATAGRID_ACTIONS_COLUMN_FIELD_NAME; const isAllSelectionState = computed(() => props.selectionState === 'all'); // Select all menu const selectAllMenu = computed(() => [ { text: t('selectPage') as string, handler: () => onAllRowSelect(true), disabled: props.selectionState === 'page' || props.selectionState === 'all', }, props.visibleRowsState?.filtered ? { text: t('selectAllCurrentResults') as string, handler: () => emit(DatagridColumnsEvent.SELECT_ALL_CURRENT_RESULTS), addDivider: props.selectionState !== 'none', disabled: props.selectionState === 'all', } : { text: t('selectAll') as string, handler: () => emit(DatagridColumnsEvent.SELECT_ALL_ACROSS_PAGES), addDivider: props.selectionState !== 'none', disabled: props.selectionState === 'all', }, props.selectionState !== 'none' && { text: t('deselectPage') as string, handler: () => onAllRowSelect(false), addDivider: !props.visibleRowsState?.filtered, // otherwise divider shown in deselect all in current results disabled: props.selectionState === 'unselected-page', }, props.visibleRowsState?.filtered && props.selectionState !== 'none' && { text: t('deselectAllCurrentResults') as string, handler: () => emit(DatagridColumnsEvent.DESELECT_ALL_CURRENT_RESULTS), addDivider: true, disabled: props.selectionState === 'unselected-page' && props.visibleRowsState.allRowsVisible, }, props.selectionState !== 'none' && { text: t('deselectAll') as string, handler: () => emit(DatagridColumnsEvent.DESELECT_ALL), }, ].filter(Boolean) ); // Resizing const { startResize, isResizing, columnHoverEventToEmitAfterResizing } = useResizer(columns, emit); // Sorting const { isSorting, getSortingDirection, sortByColumnField } = useSorter(sortBy, columns, emit); const getSortingColumnDirection = (column: BentoColumn): BentoDatagridAriaSortValue => { if (!column.sortable) { return null; } const sortingDirection = props.sortBy.find(({ field }) => field === column.field)?.direction; if (!sortingDirection) { return BentoDatagridAriaSortValue.NONE; } const ariaSortingDirectionMap: { [key in BentoDatagridSortDirection]: BentoDatagridAriaSortValue } = { [BentoDatagridSortDirection.ASCENDING]: BentoDatagridAriaSortValue.ASCENDING, [BentoDatagridSortDirection.DESCENDING]: BentoDatagridAriaSortValue.DESCENDING, }; return ariaSortingDirectionMap[sortingDirection]; }; // Dragging emit events and methods const draggingEventsForColumn = computed(() => (column: BentoColumn) => { if (!props.hasDraggableColumns) { return {}; } return { dragstart: (e: DragEvent & Event) => { emit(DatagridColumnsEvent.COLUMN_DRAG_START, column, e); }, dragover: (e: DragEvent) => { e.preventDefault(); }, dragenter: (e: DragEvent) => { e.preventDefault(); emit(DatagridColumnsEvent.COLUMN_DRAG_ENTER, column, e); }, drop: () => { emit(DatagridColumnsEvent.COLUMN_DROP, column); }, dragend: () => { emit(DatagridColumnsEvent.COLUMN_DRAG_END); }, }; }); // Contextual menu (moving, visiblity and freezing) const contextualMenuData = computed<(col: BentoColumn) => Array<BentoMenuItem>>( () => (column: BentoColumn) => [ { text: t('moveColumnLeft') as string, handler: () => emit(DatagridColumnsEvent.COLUMN_MOVE, column, -1), icon: ArrowLeftIcon, disabled: props.columns[0].field === column.field, }, { text: t('moveColumnRight') as string, handler: () => emit(DatagridColumnsEvent.COLUMN_MOVE, column, 1), icon: ArrowRightIcon, disabled: props.columns[props.columns.length - 1].field === column.field, }, !isSmallContainer.value && { text: (column?.frozen ? t('unfreezeColumn') : t('freezeColumn')) as string, handler: () => emit(DatagridColumnsEvent.COLUMN_UPDATE, { ...column, frozen: !column?.frozen }), icon: FreezeIcon, }, { text: (column?.visible !== false ? t('hideColumn') : t('showColumn')) as string, handler: () => { emit(DatagridColumnsEvent.COLUMN_UPDATE, { ...column, visible: !(column?.visible !== false), }); }, icon: column?.visible !== false ? HideIcon : ShowIcon, disabled: column?.mandatory || (column?.visible !== false && props.isOnlyOneVisibleColumn), }, ].filter(Boolean) ); const showContextualMenu = (column: BentoColumn) => { hoveredColumnField.value = column.field; if (closingTimeOutId.value) { clearTimeout(closingTimeOutId.value); } }; const hideContextualMenu = (column: BentoColumn) => { // We want to delay closing for a couple of seconds so // it doesn't flicker if a user hovers over the icon and then inside the popover. const timeOutId = setTimeout(() => { if (column.field === hoveredColumnField.value) { hoveredColumnField.value = ''; } }, CLOSING_CONTEXTUAL_MENU_DELAY_MS); closingTimeOutId.value = timeOutId; }; /** * Generates events for a Datagrid Column. * @param column - the BentoColumn we are attaching events onto. */ const dataGridColumnEvents = (column: BentoColumn) => { let events: { [eventName: string]: (e: Event) => void } = { mouseenter: () => { showContextualMenu(column); if (!isResizing.value) { emit('column-hover', column); } else { columnHoverEventToEmitAfterResizing.value = column; } }, mouseleave: () => { hideContextualMenu(column); if (!isResizing.value) { emit('column-hover', null); } else { columnHoverEventToEmitAfterResizing.value = null; } }, focus: () => { showContextualMenu(column); if (isActionsColumn(column)) { focusOnInteractiveChild(columnHeaderRefs.value[column.field]); } }, focusout: (e: FocusEvent) => { if (!allColumnsRef.value?.contains(e?.relatedTarget as Node)) { hideContextualMenu(column); } }, }; if (!isActionsColumn(column)) { events = { ...events, ...draggingEventsForColumn.value(column), }; } return events; }; const hasColumnActions = (column: BentoColumn) => column.infoIconTooltip || column.sortable || props.hasColumnPanel; const registerColumnsRefs = (el: unknown, field: string) => { if (columnHeaderRefs.value?.[field] === undefined) { columnHeaderRefs.value = { ...columnHeaderRefs.value, [field]: null }; } if (el !== null) { columnHeaderRefs.value[field] = el as HTMLDivElement; } }; const isSmallContainer: ComputedRef<boolean> = inject( DATA_GRID_SMALL_CONTAINER, computed(() => false) ); const isTouchDevice: Ref<boolean> = inject(DATA_GRID_TOUCH_DEVICE, ref(false)); // Conditional column styles // Conditional styles const conditionalColumnsClasses = computed(() => { const defaultConditionalClasses = { 'b-data-grid-columns--is-measuring': props.isMeasuringColumnWidths, }; return columns.value[0]?.frozen && !isSmallContainer.value ? { ...defaultConditionalClasses, 'b-data-grid-columns--frozen': true, 'b-data-grid-columns--frozen-separator': props.showFrozenColumnsSeparator, 'b-data-grid-columns--overflow-shadow-left': props.hasLeftOverflow, } : { ...defaultConditionalClasses, 'b-data-grid-columns--unfrozen': true, }; }); const conditionalSelectColumnClasses = computed(() => ({ 'b-data-grid-columns__select-column--all': props.selectableAcrossPages, })); const computeMenuPosition = (hasFirstColumnPanelRightAligned, index) => hasFirstColumnPanelRightAligned && index === 0 ? BentoPopoverPositions.BOTTOM_START : BentoPopoverPositions.BOTTOM_END; const conditionalColumnClasses = (column: BentoColumn, columnIndex: number) => ({ 'b-data-grid-columns__column--column-hovered': column.field === props.hoveredOverColumnState.hoveredOverColumnField, 'b-data-grid-columns__column--column-hovered-no-border-left': column.field === props.hoveredOverColumnState.hoveredOverColumnField && props.hoveredOverColumnState.noBorderLeft, 'b-data-grid-columns__column--column-hovered-no-border-right': column.field === props.hoveredOverColumnState.hoveredOverColumnField && props.hoveredOverColumnState.noBorderRight, 'b-data-grid-columns__column--last-frozen-frozen-column': props.isFrozenColumns && columnIndex === columns.value.length - 1, 'b-data-grid-columns__column--sortable': column.sortable, 'b-data-grid-columns__column--padding-left-unset': column?.padding?.left === false, 'b-data-grid-columns__column--padding-right-unset': column?.padding?.right === false, 'b-data-grid-columns__column--numeric': column?.numeric, 'b-data-grid-columns__column--frozen': column?.frozen, 'b-data-grid-columns__column--is-re-ordering': column?.field === props.draggingColumns?.dragging?.field, 'b-data-grid-columns__column--is-re-ordering-target-left': column?.field === props.draggingColumns?.target?.field && props.draggingColumns?.dragToLeft, 'b-data-grid-columns__column--is-re-ordering-target-right': column?.field === props.draggingColumns?.target?.field && !props.draggingColumns?.dragToLeft, 'b-data-grid-columns__column--with-sorting-or-column-panel': column.sortable || column.infoIconTooltip || props.hasColumnPanel || props.selectableAcrossPages, 'b-data-grid-columns--small-container': isSmallContainer.value, }); const conditionalColumnHeaderAndActionsClasses = (column: BentoColumn) => ({ 'b-data-grid-columns__column-header-and-actions--numeric': column?.numeric, }); const conditionalColumnActionsClasses = (column: BentoColumn) => ({ 'b-data-grid-columns__column-actions--numeric': column?.numeric, }); const conditionalColumnSeparatorClasses = (column: BentoColumn) => ({ 'b-data-grid-columns__column-separator-container--is-resizeable': props.hasResizableColumns, 'b-data-grid-columns__column-separator-container--is-offset': props.hoveredOverColumnState.hoveredOverColumnField === column.field && props.hoveredOverColumnState.isSeparatorOffset, }); const conditionalColumnHeaderClasses = computed(() => ({ 'b-data-grid-columns__column-header--truncated': props.truncateColumnHeaders, })); const conditionalColumnMenuClasses = (column: BentoColumn) => ({ 'b-data-grid-columns__menu--hovered': hoveredColumnField.value === column.field || isTouchDevice.value, }); // Exposed refs defineExpose({ columnHeaderRefs, }); </script> <script lang="ts"> /** * A component to display the BentoDataGrid columns * * @example * * export default { * components: { DataGridColumns }, * template: ` * <data-grid-columns * v-if="columnSet?.length" * :key="`data-grid-columns-${id}`" * :columns="columnSet" * :has-resizable-columns="hasResizableColumns" * :sort-by="sortBy" * :all-items-selected-state="allItemsSelectedState" * :is-frozen-columns="isFrozenColumns" * :show-frozen-columns-separator="showFrozenColumnsSeparator" * :dragging-columns="draggingColumns" * :has-draggable-columns="allowColumnDragAndDrop" * :has-column-panel="columnPanel" * :has-left-overflow="hasLeftOverflow" * :has-first-column-panel-right-aligned="index === computedColumnPanelAlignment" * :is-only-one-visible-column="isOnlyOneVisibleColumn" * :selectable="selectable" * :selectable-across-pages="selectableAcrossPagesComputed" * :truncate-column-headers="truncateColumnHeaders" * v-on="draggingEventsForColumns" * @column-move="onMoveColumnByOffset" * @column-update="onConfigSettingsColumnUpdate" * @column-resize="onColumnResized" * @column-resizing="onColumnWidthOverride" * @select-all-rows="onAllRowSelect" * @select-all-across-pages="emit(BentoDatagridEvent.SELECT_ALL_ACROSS_PAGES)" * @sort="onSort" * > * <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope"> * <slot :name="innerSlot" v-bind="scope" /> * </template> * </data-grid-columns> * ` * } */ export default { i18n: { messages }, name: 'data-grid-columns', }; </script> <style lang="scss" scoped src="./data-grid-columns.scss" /> 

package/dist/assets/components/data-grid/components/data-grid-config-settings/components/data-grid-config-settings-column-row/data-grid-config-settings-column-row.vue

@@ -0,0 +1 @@
+<template> <div class="b-data-grid-config-settings-column-row" @mouseover="showFreezeIcon" @mouseleave="hideFreezeIcon"> <bento-toggle :aria-label="t('toggleColumnVisibility', { label: column.label })" :disabled="isColumnVisibilityToggleDisabled" label-position="after" :value="isColumnVisible" @input="toggleColumnVisibility" > {{ column.label }} </bento-toggle> <bento-freeze-icon v-show="(isColumnFrozen || isFreezeIconOptionShown) && !isSmallContainer" :aria-label="t('toggleColumnFreeze', { label: column.label })" class="b-data-grid-config-settings-column-row__freeze-icon" :class="freezeIconConditionalClasses" @click.native="toggleColumnFreeze" /> </div> </template> <script lang="ts"> import { computed, type ComputedRef, defineComponent, inject, type PropType, ref } from 'vue'; import { BentoToggle } from '@/components/toggle'; import { useI18n } from '@/utils/ts/i18n'; import { DATA_GRID_SMALL_CONTAINER } from '@/components/data-grid/data-grid.keys'; import type { BentoColumn } from '@/components/data-grid/components/data-grid-columns/data-grid-columns.types'; import BentoFreezeIcon from '@adyen/ui-assets-icons-16/vue/freeze'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; export default defineComponent({ i18n: { messages }, name: 'bento-data-grid', components: { BentoFreezeIcon, BentoToggle, }, props: { /** * Is column visibitlity toggle disabled */ isColumnVisibilityToggleDisabled: { type: Boolean, required: true, }, /** * Column definition */ column: { type: Object as PropType<BentoColumn>, required: true, }, }, emits: ['visible-column', 'updated-column'], setup(props, { emit }) { const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isFreezeIconOptionShown = ref(false); const isColumnFrozen = computed(() => props.column?.frozen); const isColumnVisible = computed(() => props.column?.visible !== false); const isSmallContainer: ComputedRef<boolean> = inject( DATA_GRID_SMALL_CONTAINER, computed(() => false) ); const toggleColumnVisibility = () => { emit('visible-column', { ...props.column, visible: !isColumnVisible.value }); }; const toggleColumnFreeze = () => { emit('updated-column', { ...props.column, frozen: !isColumnFrozen.value }); }; const showFreezeIcon = () => { if (!isColumnFrozen.value) { isFreezeIconOptionShown.value = true; } }; const hideFreezeIcon = () => { if (!isColumnFrozen.value) { isFreezeIconOptionShown.value = false; } }; const freezeIconConditionalClasses = computed(() => ({ [`b-data-grid-config-settings-column-row__freeze-icon--frozen`]: isColumnFrozen.value, })); return { // Values isFreezeIconOptionShown, isColumnFrozen, freezeIconConditionalClasses, isColumnVisible, isSmallContainer, // Methods toggleColumnVisibility, showFreezeIcon, hideFreezeIcon, toggleColumnFreeze, // Translations t, }; }, }); </script> <style lang="scss" scoped src="./data-grid-config-settings-column-row.scss" /> 

package/dist/assets/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.vue

@@ -0,0 +1 @@
+<!-- TODO: Remove aria props from search-bar as these name clashes with JSX type /vue/types/jsx.d.ts --> <!-- eslint-disable vue/attribute-hyphenation --> <template> <div v-bento-click-outside-directive="onClickOutside" class="b-data-grid-config-settings"> <div class="b-data-grid-config-settings__button-and-separator"> <div ref="configSettingsButtonRef" class="b-data-grid-config-settings__button-container"> <bento-toggle-button :aria-controls="isConfigSettingsPanelOpen ? popoverId : null" variant="tertiary" condensed :toggled="isConfigSettingsPanelOpen" @click="setConfigSettingsPanelVisibility(!isConfigSettingsPanelOpen)" > <template #iconLeft> <bento-settings-icon :svg-title="t('toggleConfigSettingsPanelVisibility')" /> </template> </bento-toggle-button> </div> </div> <bento-popover v-if="configSettingsButtonRef" :id="popoverId" :open="isConfigSettingsPanelOpen" class="b-data-grid-config-settings__panel" :aria-label="t('configSettingsPanel')" :target-element="configSettingsButtonRef" position="bottom-end" > <div class="b-data-grid-config-settings__panel-header"> <bento-typography el="span" strongest> {{ t('displayOptions') }} </bento-typography> <bento-button variant="tertiary" @click="setConfigSettingsPanelVisibility(false)"> <template #iconLeft> <bento-cross-icon :svg-title="t('closeConfigSettingsPanel')" /> </template> </bento-button> </div> <div class="b-data-grid-config-settings__appearance"> <bento-typography class="b-data-grid-config-settings__appearance-title" el="span" stronger> {{ t('appearance') }} </bento-typography> <div class="b-data-grid-config-settings__appearance-button"> <bento-toggle label-position="after" :aria-label="t('condensedToggle')" :value="condensed" @input="emitCondensedToggle" > {{ t('condensed') }} </bento-toggle> </div> <div class="b-data-grid-config-settings__appearance-button"> <bento-toggle label-position="after" :aria-label="t('zebraRowsToggle')" :value="zebraRows" @input="emitZebraRowsToggle" > {{ t('zebraRows') }} </bento-toggle> </div> </div> <div class="b-data-grid-config-settings__column-visibility-settings"> <div class="b-data-grid-config-settings__column-visibility-header"> <bento-typography class="b-data-grid-config-settings__column-visibility-title" el="span" stronger> {{ t('columns') }} </bento-typography> <bento-button v-if="!isColumnVisibilityFilterShown" ref="searchButtonRef" variant="tertiary" @click="toggleColumnFilter" > <template #iconLeft><bento-search-icon /> </template>{{ t('search') }}</bento-button > <bento-button v-else variant="tertiary" @click="toggleColumnFilter"> <template #iconLeft> <bento-cross-icon /> </template> {{ t('closeSearch') }} </bento-button> </div> <div v-if="isColumnVisibilityFilterShown" class="b-data-grid-config-settings__column-visibility-search"> <bento-search-bar ref="searchBarRef" :value="searchTerm" :input-field-aria-label="t('columnVisibilitySearchFilter').toString()" @input="searchTerm = $event" @clear="clearAction" @escape-pressed="toggleColumnFilter" /> </div> <div v-else class="b-data-grid-config-settings__column-visibility-show-all"> <bento-toggle label-position="after" :value="allColumnsVisbilityToggleState" @input="toggleAllColumnVisibility" > {{ t('showAllColumns', { numberOfColumns: columns.length }) }} </bento-toggle> </div> <div class="b-data-grid-config-settings__column-visibility-toggles"> <div v-for="column of filteredColumnVisibilityColumns" :key="column.field"> <bento-data-grid-config-settings-config-row v-if="column.field !== DATAGRID_ACTIONS_COLUMN_FIELD_NAME" :column="column" :is-column-visibility-toggle-disabled="isColumnVisibilityToggleDisabled(column)" @visible-column="emitVisibleColumns" @updated-column="emitFrozenColumns" /> </div> <bento-typography v-if="filteredColumnVisibilityColumns.length === 0" el="span" class="b-data-grid-config-settings__column-visibility-empty-search-message" > {{ t('noColumnsMatch') }} </bento-typography> </div> </div> </bento-popover> </div> </template> <script lang="ts"> import { computed, defineComponent, nextTick, type PropType, ref, toRef } from 'vue'; import { BentoPopover } from '@/components/popover'; import { BentoButton, BentoToggleButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { BentoToggle } from '@/components/toggle'; import { type BentoColumn } from '../../data-grid.types'; import BentoSearchBar from '@/components/search-bar/search-bar.vue'; import { BentoClickOutsideDirective } from '@/directives'; import { DatagridConfigSettingsEvent } from './data-grid-config-settings.types'; import { useSearchBarFilter } from '@/components/search-bar'; import { generateUid } from '@/core/utils/ts'; import { DATAGRID_ACTIONS_COLUMN_FIELD_NAME } from '../../composables'; import { useI18n } from '@/utils/ts/i18n'; import BentoSettingsIcon from '@adyen/ui-assets-icons-16/vue/settings'; import BentoCrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import BentoSearchIcon from '@adyen/ui-assets-icons-16/vue/search'; import BentoDataGridConfigSettingsConfigRow from './components/data-grid-config-settings-column-row/data-grid-config-settings-column-row.vue'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; export default defineComponent({ i18n: { messages }, name: 'bento-data-grid', components: { BentoButton, BentoCrossIcon, BentoPopover, BentoSettingsIcon, BentoToggleButton, BentoDataGridConfigSettingsConfigRow, BentoSearchBar, BentoSearchIcon, BentoToggle, BentoTypography, }, directives: { BentoClickOutsideDirective }, props: { /** * Column definitions */ columns: { type: Array as PropType<Array<BentoColumn>>, required: true, }, /** * Sets the row cells to the condensed padding state. */ condensed: { type: Boolean, default: false, }, /** * Sets a different background color for even rows. */ zebraRows: { type: Boolean, default: false, }, }, emits: [ DatagridConfigSettingsEvent.UPDATE_CONDENSED, DatagridConfigSettingsEvent.UPDATE_COLUMNS, DatagridConfigSettingsEvent.UPDATE_ZEBRA_ROWS, ], setup(props, { emit }) { const { t } = useI18n<{ message: MessageSchema }>({ messages }); const configSettingsButtonRef = ref(null); const popoverId = generateUid('data-grid-config-settings-popover'); const searchBarRef = ref(null); const isConfigSettingsPanelOpen = ref<boolean>(false); const allColumnsVisbilityToggleState = ref<boolean>(true); const searchButtonRef = ref(null); const searchTerm = ref<string>(''); const columnsRef = toRef(props, 'columns'); const isColumnVisibilityFilterShown = ref<boolean>(false); // Column Visibility Filtering const filteredColumnVisibilityColumns = useSearchBarFilter<BentoColumn>(searchTerm, columnsRef); const clearAction = () => { searchTerm.value = ''; }; const areAllNonMandatoryColumnsHidden = computed( () => !props.columns.some(col => col.visible === false && !col.mandatory) ); const toggleColumnFilter = () => { clearAction(); isColumnVisibilityFilterShown.value = !isColumnVisibilityFilterShown.value; if (isColumnVisibilityFilterShown.value) { nextTick(() => searchBarRef.value.$refs.bentoInputField?.focusInput()); } else { nextTick(() => searchButtonRef?.value?.$el?.focus()); } allColumnsVisbilityToggleState.value = areAllNonMandatoryColumnsHidden.value; }; // Column visibility const isColumnVisibilityToggleDisabled = (column: BentoColumn) => column.mandatory ?? false; const emitVisibleColumns = (updatedColumn: BentoColumn) => { const updatedColumns = props.columns.map(col => ({ ...col, visible: updatedColumn.field === col.field ? updatedColumn.visible : col.visible, })); emit(DatagridConfigSettingsEvent.UPDATE_COLUMNS, updatedColumns); }; const toggleAllColumnVisibility = (toggleState: boolean) => { if (toggleState) { // Show all columns emit( DatagridConfigSettingsEvent.UPDATE_COLUMNS, props.columns.map(col => ({ ...col, visible: true })) ); } else { // Hide all columns except for mandatory columns emit( DatagridConfigSettingsEvent.UPDATE_COLUMNS, props.columns.map(col => ({ ...col, visible: col?.mandatory === true })) ); } }; // Column freeze // TODO to convert this function to 'emitUpdatedColumns', that will emit both: visible and frozen columns const emitFrozenColumns = (updatedColumn: BentoColumn) => { const updatedColumns = props.columns.map(col => ({ ...col, frozen: updatedColumn.field === col.field ? !!updatedColumn?.frozen : !!col?.frozen, })); emit(DatagridConfigSettingsEvent.UPDATE_COLUMNS, updatedColumns); }; // Panel visibility const setConfigSettingsPanelVisibility = (isVisible: boolean) => { isConfigSettingsPanelOpen.value = isVisible; allColumnsVisbilityToggleState.value = areAllNonMandatoryColumnsHidden.value; }; const onClickOutside = () => setConfigSettingsPanelVisibility(false); // Condensed view const emitCondensedToggle = (isCondensedView: boolean) => emit(DatagridConfigSettingsEvent.UPDATE_CONDENSED, isCondensedView); const emitZebraRowsToggle = (isZebraRows: boolean) => emit(DatagridConfigSettingsEvent.UPDATE_ZEBRA_ROWS, isZebraRows); return { // Values configSettingsButtonRef, popoverId, isConfigSettingsPanelOpen, allColumnsVisbilityToggleState, filteredColumnVisibilityColumns, searchTerm, isColumnVisibilityFilterShown, searchBarRef, searchButtonRef, DATAGRID_ACTIONS_COLUMN_FIELD_NAME, // Methods setConfigSettingsPanelVisibility, emitCondensedToggle, toggleAllColumnVisibility, clearAction, toggleColumnFilter, emitVisibleColumns, emitFrozenColumns, onClickOutside, isColumnVisibilityToggleDisabled, emitZebraRowsToggle, // Translations t, }; }, }); </script> <style lang="scss" scoped src="./data-grid-config-settings.scss" /> 

package/dist/assets/components/data-grid/components/data-grid-lazy-load/data-grid-lazy-load.vue

@@ -0,0 +1 @@
+<template> <div class="b-data-grid-lazy-load"> <bento-loading-indicator v-if="loading && isInfiniteScroll" /> <bento-loading-button v-if="loading && !isInfiniteScroll" variant="secondary" :state="BentoLoadingButtonState.LOADING" >{{ t('loading') }}</bento-loading-button > <bento-loading-button v-if="!loading && !isInfiniteScroll" :state="BentoLoadingButtonState.START" variant="secondary" @click="$emit(BentoDatagridEvent.UPDATE_SHOW_MORE)" >{{ t('showMore') }}</bento-loading-button > </div> </template> <script setup lang="ts"> import { BentoLoadingButton, BentoLoadingButtonState } from '@/components/button'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import { BentoDatagridEvent } from '../../data-grid.types'; import { useI18n } from '@/utils/ts/i18n'; import messages from '../../messages.json'; type MessageSchema = (typeof messages)['en-US']; defineProps<{ /** * Indicates whether the component is in a loading state. */ loading: boolean; /** * If set to true, displays a loading indicator. Otherwise displays a loading button. */ isInfiniteScroll: boolean; }>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); </script> <script lang="ts"> /** * Internal component to display the bento-data-grid's lazy loading. * The component can render a 'Show more' loading button or a loading indicator. */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./data-grid-lazy-load.scss" />