@adyen/bento-mcp 0.10.0 → 0.12.0

package/dist/assets/tailwind/README.md

@@ -24,7 +24,7 @@ Think of these utilities as tools for:
 For implementing standard interface patterns (buttons, inputs, cards, etc.), using the pre-built components from the
 main Bento library is generally recommended for consistency and accessibility.
 
-### What's customized?
+## What's customized?
 
 This preset removes default Tailwind values for categories that are fully managed by Bento:
 
@@ -58,7 +58,7 @@ npm install @adyen/bento-tailwind
 
 ## Usage
 
-### 1. Import the Bento styles
+### Import the Bento styles
 
 For Adyen's consistent look and feel, you'll need to import CSS variables for Bento's foundational design rules for
 colors, fonts, and spacing.
@@ -82,7 +82,7 @@ Add the following lines to your project's main CSS file:
 @import '@adyen/bento-design-tokens/dist/css/bento/variables-dark.css';
 ```
 
-### 2. Install Tailwind Bento theme
+### Install Tailwind Bento theme
 
 To integrate Bento styles and design tokens using the `@adyen/bento-tailwind` package.
 

package/dist/assets/templates/dashboard-template/components/dashboard-section/dashboard-section.stories.ts

@@ -1 +1 @@
-import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoDropdown } from '@/components/dropdown'; import { BentoDataGrid } from '@/components/data-grid'; import { BentoSegmentedControl } from '@/components/segmented-control'; import { LumeLineChart } from '@adyen/lume'; import BentoDashboardSection from './dashboard-section.vue'; import { type BentoDashboardTemplateHeader } from '../../dashboard-template.types'; import { type BentoListboxOptions } from '@/types/listbox'; const meta: Meta = { title: 'Dashboard template/Dashboard section', component: BentoDashboardSection, }; export default meta; type Story = StoryObj<typeof BentoDashboardSection>; const HEADER_PROPS: BentoDashboardTemplateHeader = { title: 'Section', infoIconTooltipText: 'Info', }; const SEGMENTED_CONTROL_ITEMS = [ { label: 'Count', value: 'count' }, { label: 'Amount', value: 'amount' }, ]; const DROPDOWN_OPTIONS: BentoListboxOptions = [ { label: 'Monthly', value: 'monthly' }, { label: 'Yearly', value: 'yearly' }, ]; const LUME_DATA = { data: [ { label: 'Skyblue', color: 'skyblue', values: [10, 30, 20, 50, 40], }, { label: 'Green', color: 'green', values: [50, 60, 90, 30, 10], }, ], labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], options: { yAxisOptions: { gridLines: true, title: 'Y-label', }, }, }; const GRID_DATA = [ { id: 1, paymentMethods: 'Visa', amount: '1,234 USD', numeric: '54,213' }, { id: 2, paymentMethods: 'MasterCard', amount: '1,234 USD', numeric: '54,213' }, { id: 3, paymentMethods: 'iDeal', amount: '1,234 USD', numeric: '54,213' }, { id: 4, paymentMethods: 'Klarna', amount: '1,234 USD', numeric: '54,213' }, { id: 5, paymentMethods: 'Apple Pay', amount: '1,234 USD', numeric: '54,213' }, ]; const GRID_COLUMNS = [ { field: 'paymentMethods', label: 'Payment methods', minWidth: 300, mandatory: true }, { field: 'amount', label: 'Amount', numeric: true, minWidth: 300 }, { field: 'numeric', label: 'Numeric', numeric: true, minWidth: 300 }, ]; const graphCode = ` <template> <bento-dashboard-template :header="{ title: "Dashboard" }"> <bento-dashboard-section :header="dashboardSectionHeader"> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='dropdownOptions' /> <bento-segmented-control :items="segmentedControlItems" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <lume-line-chart v-bind="lumeData" /> </bento-dashboard-section> </bento-dashboard-section> </template> <script setup lang="ts"> import { BentoDashboardTemplate, BentoDashboardSection, BentoDropdown, BentoSegmentedControl } from '@adyen/bento-vue2' import { LumeLineChart } from '@adyen/lume'; const dashboardSectionHeader = ${JSON.stringify(HEADER_PROPS, null, 4)}; const dropdownOptions = ${JSON.stringify(DROPDOWN_OPTIONS, null, 4)}; const segmentedControlItems = ${JSON.stringify(SEGMENTED_CONTROL_ITEMS, null, 4)}; const lumeData = ${JSON.stringify(LUME_DATA, null, 4)}; const segmentedControlValue = ref('count'); const dropdownValue = ref('monthly'); </script> `; export const Graph: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardSection, BentoDropdown, BentoSegmentedControl, LumeLineChart }, props: Object.keys(argTypes), template: ` <bento-dashboard-section v-bind="args"> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> `, setup(props) { const segmentedControlValue = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue = ref(DROPDOWN_OPTIONS[0].value); return { // Values args: isVue2 ? props : _args, segmentedControlValue, dropdownValue, // Contants LUME_DATA, SEGMENTED_CONTROL_ITEMS, DROPDOWN_OPTIONS, }; }, }), args: { header: HEADER_PROPS, }, parameters: storybookDocsParameter(graphCode), }; const dataGridCode = ` <template> <bento-dashboard-template :header="{ title: "Dashboard" }"> <bento-dashboard-section :header="dashboardSectionHeader"> <bento-data-grid :data="gridData" :columns="gridColumns" /> </bento-dashboard-section> </bento-dashboard-section> </template> <script setup lang="ts"> import { BentoDashboardTemplate, BentoDashboardSection, BentoDataGrid, } from '@adyen/bento-vue2' import { LumeLineChart } from '@adyen/lume'; const dashboardSectionHeader = ${JSON.stringify(HEADER_PROPS, null, 4)}; const gridData = ${JSON.stringify(GRID_DATA, null, 4)}; const gridColumns = ${JSON.stringify(GRID_COLUMNS, null, 4)}; </script> `; export const DataGrid: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardSection, BentoDataGrid }, props: Object.keys(argTypes), template: ` <bento-dashboard-section v-bind="args"> <bento-data-grid :data="GRID_DATA" :columns="GRID_COLUMNS" /> </bento-dashboard-section> `, setup(props) { return { // Values args: isVue2 ? props : _args, // Contants GRID_COLUMNS, GRID_DATA, }; }, }), args: { header: HEADER_PROPS, }, parameters: storybookDocsParameter(dataGridCode), }; const twoColumnsCode = ` <template> <bento-dashboard-template :header="{ title: "Dashboard" }"> <bento-dashboard-section :header="dashboardSectionHeader"> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='dropdownOptions' /> <bento-segmented-control :items="segmentedControlItems" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <template #content-col-1><lume-line-chart v-bind="lumeData" /></template> <template #content-col-2><lume-line-chart v-bind="lumeData" /></template> </bento-dashboard-section> </template> <script setup lang="ts"> import { BentoDashboardTemplate, BentoDashboardSection, BentoDropdown, BentoSegmentedControl } from '@adyen/bento-vue2' import { LumeLineChart } from '@adyen/lume'; const dashboardSectionHeader = ${JSON.stringify(HEADER_PROPS, null, 4)}; const dropdownOptions = ${JSON.stringify(DROPDOWN_OPTIONS, null, 4)}; const segmentedControlItems = ${JSON.stringify(SEGMENTED_CONTROL_ITEMS, null, 4)}; const lumeData = ${JSON.stringify(LUME_DATA, null, 4)}; const segmentedControlValue = ref('count'); const dropdownValue = ref('monthly'); </script> `; export const TwoColumns: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardSection, BentoDropdown, BentoSegmentedControl, LumeLineChart }, props: Object.keys(argTypes), template: ` <bento-dashboard-section v-bind="args"> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <template #content-col-1><lume-line-chart v-bind="LUME_DATA" /></template> <template #content-col-2><lume-line-chart v-bind="LUME_DATA" /></template> </bento-dashboard-section> `, setup(props) { const segmentedControlValue = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue = ref(DROPDOWN_OPTIONS[0].value); return { // Values args: isVue2 ? props : _args, segmentedControlValue, dropdownValue, // Contants LUME_DATA, SEGMENTED_CONTROL_ITEMS, DROPDOWN_OPTIONS, }; }, }), args: { header: HEADER_PROPS, }, parameters: storybookDocsParameter(twoColumnsCode), }; 
+import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoDropdown } from '@/components/dropdown'; import { BentoDataGrid } from '@/components/data-grid'; import { BentoSegmentedControl } from '@/components/segmented-control'; import { LumeLineChart } from '@adyen/lume'; import BentoDashboardSection from './dashboard-section.vue'; import { type BentoDashboardTemplateHeader } from '../../dashboard-template.types'; import { type BentoListboxOptions } from '@/types/listbox'; const dashboardSectionDataGrid = "<template>\n <bento-dashboard-template :header=\"dashboardHeader\">\n <bento-dashboard-section :header=\"sectionHeader\">\n <bento-data-grid :columns=\"gridColumns\" :data=\"gridData\" />\n </bento-dashboard-section>\n </bento-dashboard-template>\n</template>\n\n<script setup lang=\"ts\">\n import {\n type BentoColumn,\n BentoDashboardSection,\n BentoDashboardTemplate,\n type BentoDashboardTemplateHeader,\n BentoDataGrid,\n type BentoDatagridData,\n } from '@adyen/bento-vue2';\n\n const dashboardHeader: BentoDashboardTemplateHeader = { title: 'Dashboard' };\n const sectionHeader: BentoDashboardTemplateHeader = { title: 'Section' };\n const gridData: BentoDatagridData = [\n { id: 1, paymentMethods: 'Visa', amount: '1,234 USD', numeric: '54,213' },\n { id: 2, paymentMethods: 'MasterCard', amount: '2,345 USD', numeric: '63,124' },\n ];\n const gridColumns: Array<BentoColumn> = [\n { field: 'paymentMethods', label: 'Payment methods', mandatory: true },\n { field: 'amount', label: 'Amount', numeric: true },\n { field: 'numeric', label: 'Numeric', numeric: true },\n ];\n</script>\n"; const dashboardSectionGraph = "<template>\n <bento-dashboard-template :header=\"dashboardHeader\">\n <bento-dashboard-section :header=\"sectionHeader\">\n <template #controls>\n <bento-dropdown v-model=\"dropdownValue\" :items=\"dropdownOptions\" />\n <bento-segmented-control v-model=\"segmentedControlValue\" :items=\"segmentedControlItems\" />\n </template>\n <lume-line-chart v-bind=\"lumeData\" />\n </bento-dashboard-section>\n </bento-dashboard-template>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoDashboardSection,\n BentoDashboardTemplate,\n type BentoDashboardTemplateHeader,\n BentoDropdown,\n type BentoListboxOptions,\n type BentoListboxSelectedValue,\n BentoSegmentedControl,\n type BentoSegmentedControlItem,\n type BentoSegmentedControlValue,\n } from '@adyen/bento-vue2';\n import { LumeLineChart } from '@adyen/lume';\n\n const dashboardHeader: BentoDashboardTemplateHeader = { title: 'Dashboard' };\n const sectionHeader: BentoDashboardTemplateHeader = { title: 'Section' };\n const dropdownOptions: BentoListboxOptions = [\n { label: 'Monthly', value: 'monthly' },\n { label: 'Yearly', value: 'yearly' },\n ];\n const segmentedControlItems: Array<BentoSegmentedControlItem> = [\n { label: 'Count', value: 'count' },\n { label: 'Amount', value: 'amount' },\n ];\n const dropdownValue = ref<BentoListboxSelectedValue>('monthly');\n const segmentedControlValue = ref<BentoSegmentedControlValue>('count');\n const lumeData = {\n data: [{ label: 'Volume', values: [10, 30, 20] }],\n labels: ['Jan', 'Feb', 'Mar'],\n };\n</script>\n"; const dashboardSectionTwoColumns = "<template>\n <bento-dashboard-template :header=\"dashboardHeader\">\n <bento-dashboard-section :header=\"sectionHeader\">\n <template #controls>\n <bento-dropdown v-model=\"dropdownValue\" :items=\"dropdownOptions\" />\n <bento-segmented-control v-model=\"segmentedControlValue\" :items=\"segmentedControlItems\" />\n </template>\n <template #content-col-1><lume-line-chart v-bind=\"lumeData\" /></template>\n <template #content-col-2><lume-line-chart v-bind=\"lumeData\" /></template>\n </bento-dashboard-section>\n </bento-dashboard-template>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoDashboardSection,\n BentoDashboardTemplate,\n type BentoDashboardTemplateHeader,\n BentoDropdown,\n type BentoListboxOptions,\n type BentoListboxSelectedValue,\n BentoSegmentedControl,\n type BentoSegmentedControlItem,\n type BentoSegmentedControlValue,\n } from '@adyen/bento-vue2';\n import { LumeLineChart } from '@adyen/lume';\n\n const dashboardHeader: BentoDashboardTemplateHeader = { title: 'Dashboard' };\n const sectionHeader: BentoDashboardTemplateHeader = { title: 'Section' };\n const dropdownOptions: BentoListboxOptions = [\n { label: 'Monthly', value: 'monthly' },\n { label: 'Yearly', value: 'yearly' },\n ];\n const segmentedControlItems: Array<BentoSegmentedControlItem> = [\n { label: 'Count', value: 'count' },\n { label: 'Amount', value: 'amount' },\n ];\n const dropdownValue = ref<BentoListboxSelectedValue>('monthly');\n const segmentedControlValue = ref<BentoSegmentedControlValue>('count');\n const lumeData = {\n data: [{ label: 'Volume', values: [10, 30, 20] }],\n labels: ['Jan', 'Feb', 'Mar'],\n };\n</script>\n"; const meta: Meta = { title: 'Dashboard template/Dashboard section', component: BentoDashboardSection, }; export default meta; type Story = StoryObj<typeof BentoDashboardSection>; const HEADER_PROPS: BentoDashboardTemplateHeader = { title: 'Section', infoIconTooltipText: 'Info', }; const SEGMENTED_CONTROL_ITEMS = [ { label: 'Count', value: 'count' }, { label: 'Amount', value: 'amount' }, ]; const DROPDOWN_OPTIONS: BentoListboxOptions = [ { label: 'Monthly', value: 'monthly' }, { label: 'Yearly', value: 'yearly' }, ]; const LUME_DATA = { data: [ { label: 'Skyblue', color: 'skyblue', values: [10, 30, 20, 50, 40], }, { label: 'Green', color: 'green', values: [50, 60, 90, 30, 10], }, ], labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], options: { yAxisOptions: { gridLines: true, title: 'Y-label', }, }, }; const GRID_DATA = [ { id: 1, paymentMethods: 'Visa', amount: '1,234 USD', numeric: '54,213' }, { id: 2, paymentMethods: 'MasterCard', amount: '1,234 USD', numeric: '54,213' }, { id: 3, paymentMethods: 'iDeal', amount: '1,234 USD', numeric: '54,213' }, { id: 4, paymentMethods: 'Klarna', amount: '1,234 USD', numeric: '54,213' }, { id: 5, paymentMethods: 'Apple Pay', amount: '1,234 USD', numeric: '54,213' }, ]; const GRID_COLUMNS = [ { field: 'paymentMethods', label: 'Payment methods', minWidth: 300, mandatory: true }, { field: 'amount', label: 'Amount', numeric: true, minWidth: 300 }, { field: 'numeric', label: 'Numeric', numeric: true, minWidth: 300 }, ]; export const Graph: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardSection, BentoDropdown, BentoSegmentedControl, LumeLineChart }, props: Object.keys(argTypes), template: ` <bento-dashboard-section v-bind="args"> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> `, setup(props) { const segmentedControlValue = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue = ref(DROPDOWN_OPTIONS[0].value); return { // Values args: isVue2 ? props : _args, segmentedControlValue, dropdownValue, // Contants LUME_DATA, SEGMENTED_CONTROL_ITEMS, DROPDOWN_OPTIONS, }; }, }), args: { header: HEADER_PROPS, }, parameters: storybookDocsParameter(dashboardSectionGraph), }; export const DataGrid: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardSection, BentoDataGrid }, props: Object.keys(argTypes), template: ` <bento-dashboard-section v-bind="args"> <bento-data-grid :data="GRID_DATA" :columns="GRID_COLUMNS" /> </bento-dashboard-section> `, setup(props) { return { // Values args: isVue2 ? props : _args, // Contants GRID_COLUMNS, GRID_DATA, }; }, }), args: { header: HEADER_PROPS, }, parameters: storybookDocsParameter(dashboardSectionDataGrid), }; export const TwoColumns: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardSection, BentoDropdown, BentoSegmentedControl, LumeLineChart }, props: Object.keys(argTypes), template: ` <bento-dashboard-section v-bind="args"> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <template #content-col-1><lume-line-chart v-bind="LUME_DATA" /></template> <template #content-col-2><lume-line-chart v-bind="LUME_DATA" /></template> </bento-dashboard-section> `, setup(props) { const segmentedControlValue = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue = ref(DROPDOWN_OPTIONS[0].value); return { // Values args: isVue2 ? props : _args, segmentedControlValue, dropdownValue, // Contants LUME_DATA, SEGMENTED_CONTROL_ITEMS, DROPDOWN_OPTIONS, }; }, }), args: { header: HEADER_PROPS, }, parameters: storybookDocsParameter(dashboardSectionTwoColumns), }; 

package/dist/assets/templates/dashboard-template/dashboard-template.stories.ts

@@ -1 +1 @@
-import { isVue2 } from 'vue-demi'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@/components/summary-grid'; import { BentoDataGrid } from '@/components/data-grid'; import { type BentoDateRangeFilterOptions, BentoFilterBar, type BentoFilterBarModel, BentoFilterItemType, type BentoFilterValues, } from '@/components/filter-bar'; import { BentoDropdown } from '@/components/dropdown'; import { BentoSegmentedControl } from '@/components/segmented-control'; import { LumeLineChart } from '@adyen/lume'; import BentoDashboardTemplate from './dashboard-template.vue'; import BentoDashboardSection from './components/dashboard-section/dashboard-section.vue'; import InfoIcon from '@adyen/ui-assets-icons-16/vue/info'; import Settings from '@adyen/ui-assets-icons-16/vue/settings'; import Download from '@adyen/ui-assets-icons-16/vue/download'; import Share from '@adyen/ui-assets-icons-16/vue/share-2'; import { subDays } from 'date-fns'; import { type BentoDashboardTemplateHeader, type BentoDashboardTemplateTabs } from './dashboard-template.types'; import { type BentoListboxOptions } from '@/types/listbox'; const meta: Meta = { title: 'Dashboard template', component: BentoDashboardTemplate, parameters: { layout: 'fullscreen', }, }; export default meta; type Story = StoryObj<typeof BentoDashboardTemplate>; const HEADER_PROPS: BentoDashboardTemplateHeader = { title: 'Dashboard', lastUpdated: Date.now(), actions: [ { title: 'Glossary', variant: 'secondary', event: () => undefined, icon: InfoIcon }, { title: 'Settings', variant: 'secondary', event: () => undefined, icon: Settings }, { title: 'Download', variant: 'secondary', event: () => undefined, icon: Download }, { title: 'Share', variant: 'secondary', event: () => undefined, icon: Share }, ], infoIconTooltipText: 'Info', }; const TABS_ARGS: BentoDashboardTemplateTabs = { tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }], }; const HEADER_SECTION_PROPS: BentoDashboardTemplateHeader = { title: 'Section', infoIconTooltipText: 'Extra info about this section', }; const FILTERS_CONFIG: BentoFilterBarModel = [ { field: 'date-range', label: 'Date range', options: { allowTimeInput: true, numberOfMonths: 1, } as BentoDateRangeFilterOptions, type: BentoFilterItemType.DATE_RANGE, visible: true, }, { field: 'company', label: 'Company', options: { listboxItems: [ { label: 'Adyen', value: 'adyen' }, { label: 'Bento', value: 'bento' }, ], multiple: true, }, type: BentoFilterItemType.SELECT, visible: true, }, ]; const FILTER_VALUES: BentoFilterValues = [ { field: 'date-range', value: { startDate: subDays(new Date(), 7), endDate: new Date() }, }, { field: 'company', value: [], }, ]; const SEGMENTED_CONTROL_ITEMS = [ { label: 'Count', value: 'count' }, { label: 'Amount', value: 'amount' }, ]; const DROPDOWN_OPTIONS: BentoListboxOptions = [ { label: 'Monthly', value: 'monthly' }, { label: 'Yearly', value: 'yearly' }, ]; const LUME_DATA = { data: [ { label: 'Skyblue', color: 'skyblue', values: [10, 30, 20, 50, 40], }, { label: 'Green', color: 'green', values: [50, 60, 90, 30, 10], }, ], labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], options: { yAxisOptions: { gridLines: true, title: 'Y-label', }, }, }; const GRID_DATA = [ { id: 1, paymentMethods: 'Visa', amount: '1,234 USD', numeric: '54,213' }, { id: 2, paymentMethods: 'MasterCard', amount: '1,234 USD', numeric: '54,213' }, { id: 3, paymentMethods: 'iDeal', amount: '1,234 USD', numeric: '54,213' }, { id: 4, paymentMethods: 'Klarna', amount: '1,234 USD', numeric: '54,213' }, { id: 5, paymentMethods: 'Apple Pay', amount: '1,234 USD', numeric: '54,213' }, ]; const GRID_COLUMNS = [ { field: 'paymentMethods', label: 'Payment methods', minWidth: 300, mandatory: true }, { field: 'amount', label: 'Amount', numeric: true, minWidth: 300 }, { field: 'numeric', label: 'Numeric', numeric: true, minWidth: 300 }, ]; const DEFAULT_PROPS = { header: HEADER_PROPS, tabs: TABS_ARGS, stickyFilters: true, stickyTabs: true, }; const defaultCode = ` <template> <bento-dashboard-template :header="header" sticky-filters> <template #filters> <bento-filter-bar :config="filterConfig" :filter-values="filterValues" @update:filter-values="filterValues = $event" /> </template> <bento-summary-grid> <template #cell-1-1> <bento-summary-grid-item-amount title="Title" label="€ 220.00" /> </template> <template #cell-1-2> <bento-summary-grid-item-amount title="Title" label="€ 220.00" /> </template> <template #cell-1-3> <bento-summary-grid-item-amount title="Title" label="€ 220.00" /> </template> </bento-summary-grid> <bento-dashboard-section :header="dashboardSectionHeader" half-width> <template #controls> <bento-dropdown :model-value="dropdownValue1" @update:model-value="dropdownValue1 = $event" :items='dropdownOptions' /> <bento-segmented-control :items="segmentedControlItems" :model-value="segmentedControlValue1" @update:model-value="segmentedControlValue1 = $event"/> </template> <lume-line-chart v-bind="lumeData" /> <lume-line-chart v-bind="lumeData" /> </bento-dashboard-section> <bento-dashboard-section :header="dashboardSectionHeader" half-width> <template #controls> <bento-dropdown :model-value="dropdownValue2" @update:model-value="dropdownValue2 = $event" :items='dropdownOptions' /> <bento-segmented-control :items="segmentedControlItems" :model-value="segmentedControlValue2" @update:model-value="segmentedControlValue2 = $event"/> </template> <lume-line-chart v-bind="lumeData" /> <lume-line-chart v-bind="lumeData" /> </bento-dashboard-section> <bento-dashboard-section :header="dashboardSectionHeader"> <lume-line-chart v-bind="lumeData" /> </bento-dashboard-section> <bento-dashboard-section :header="dashboardSectionHeader"> <bento-data-grid :data="gridData" :columns="gridColumns" /> </bento-dashboard-section> </bento-dashboard-template> </template> <script setup lang="ts"> import { BentoDashboardTemplate, BentoDashboardSection, BentoFilterBar, BentoFilterValues, BentoSummaryGrid, BentoSummaryGridItemAmount, BentoDropdown, BentoSegmentedControl, BentoDataGrid } from '@adyen/bento-vue2' import { LumeLineChart } from '@adyen/lume'; import InfoIcon from '@adyen/ui-assets-icons-16/vue/info'; import Settings from '@adyen/ui-assets-icons-16/vue/settings'; import Download from '@adyen/ui-assets-icons-16/vue/download'; const header = { title: 'Dashboard', lastUpdated: Date.now(), actions: [ { title: 'Glossary', variant: 'secondary', event: () => {}, icon: InfoIcon }, { title: 'Settings', variant: 'secondary', event: () => {}, icon: Settings }, { title: 'Download', variant: 'secondary', event: () => {}, icon: Download }, { title: 'Share', variant: 'secondary', event: () => {}, icon: Share }, ], infoIconTooltipText: 'Info', }; const filterConfig = ${JSON.stringify(FILTERS_CONFIG, null, 4)}; const dashboardSectionHeader = ${JSON.stringify(HEADER_SECTION_PROPS, null, 4)}; const dropdownOptions = ${JSON.stringify(DROPDOWN_OPTIONS, null, 4)}; const segmentedControlItems = ${JSON.stringify(SEGMENTED_CONTROL_ITEMS, null, 4)}; const lumeData = ${JSON.stringify(LUME_DATA, null, 4)}; const filterValues = ref<BentoFilterValues>([ { field: 'date-range', value: { startDate: subDays(new Date(), 7), endDate: new Date() }, }, { field: 'company', value: [], }, ]); const gridData = ${JSON.stringify(GRID_DATA, null, 4)}; const gridColumns = ${JSON.stringify(GRID_COLUMNS, null, 4)}; const segmentedControlValue1 = ref('count'); const dropdownValue1 = ref('monthly'); const segmentedControlValue2 = ref('count'); const dropdownValue2 = ref('monthly'); </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardTemplate, BentoDashboardSection, BentoFilterBar, BentoSummaryGrid, BentoSummaryGridItemAmount, BentoDropdown, BentoSegmentedControl, BentoDataGrid, LumeLineChart, }, props: Object.keys(argTypes), template: ` <bento-dashboard-template v-bind="args"> <template #filters> <bento-filter-bar :config="FILTERS_CONFIG" :filter-values="filterValues" @update:filter-values="filterValues = $event" /> </template> <bento-summary-grid> <template #cell-1-1> <bento-summary-grid-item-amount title="Title" label="€ 220.00" /> </template> <template #cell-1-2> <bento-summary-grid-item-amount title="Title" label="€ 220.00" /> </template> <template #cell-1-3> <bento-summary-grid-item-amount title="Title" label="€ 220.00" /> </template> </bento-summary-grid> <bento-dashboard-section :header="HEADER_SECTION_PROPS" half-width> <template #controls> <bento-dropdown :model-value="dropdownValue1" @update:model-value="dropdownValue1 = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue1" @update:model-value="segmentedControlValue1 = $event"/> </template> <lume-line-chart v-bind="LUME_DATA" /> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> <bento-dashboard-section :header="HEADER_SECTION_PROPS" half-width> <template #controls> <bento-dropdown :model-value="dropdownValue2" @update:model-value="dropdownValue2 = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue2" @update:model-value="segmentedControlValue2 = $event"/> </template> <lume-line-chart v-bind="LUME_DATA" /> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> <bento-dashboard-section :header="HEADER_SECTION_PROPS"> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> <bento-dashboard-section :header="HEADER_SECTION_PROPS"> <bento-data-grid :data="GRID_DATA" :columns="GRID_COLUMNS" /> </bento-dashboard-section> </bento-dashboard-template> `, setup(props) { const args = isVue2 ? props : _args; const filterValues = ref<BentoFilterValues>(FILTER_VALUES); const segmentedControlValue1 = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue1 = ref(DROPDOWN_OPTIONS[0].value); const segmentedControlValue2 = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue2 = ref(DROPDOWN_OPTIONS[0].value); return { args, // Values filterValues, segmentedControlValue1, dropdownValue1, segmentedControlValue2, dropdownValue2, // Constants HEADER_SECTION_PROPS, FILTERS_CONFIG, DROPDOWN_OPTIONS, SEGMENTED_CONTROL_ITEMS, LUME_DATA, GRID_DATA, GRID_COLUMNS, }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(defaultCode), }; const withTabsCode = ` <template> <bento-dashboard-template :header="header" :tabs="tabs" sticky-filters sticky-tabs> <template #filters> <bento-filter-bar :config="filterConfig" :filter-values="filterValues" @update:filter-values="filterValues = $event" /> </template> <template #tab-1> <bento-dashboard-section :header="dashboardSectionHeader"> <template #controls> <bento-dropdown :model-value="dropdownValue1" @update:model-value="dropdownValue1 = $event" :items='dropdownOptions' /> <bento-segmented-control :items="segmentedControlItems" :model-value="segmentedControlValue1" @update:model-value="segmentedControlValue1 = $event"/> </template> <template #content-col-1> <lume-line-chart v-bind="lumeData" /> <lume-line-chart v-bind="lumeData" /> </template> <template #content-col-2> <lume-line-chart v-bind="lumeData" /> <lume-line-chart v-bind="lumeData" /> </template> </bento-dashboard-section> </template> <template #tab-2> <bento-dashboard-section :header="dashboardSectionHeader"> <template #controls> <bento-dropdown :model-value="dropdownValue2" @update:model-value="dropdownValue2 = $event" :items='dropdownOptions' /> <bento-segmented-control :items="segmentedControlItems" :model-value="segmentedControlValue2" @update:model-value="segmentedControlValue2 = $event"/> </template> <template #content-col-1><lume-line-chart v-bind="lumeData" /></template> <template #content-col-2><lume-line-chart v-bind="lumeData" /></template> </bento-dashboard-section> </template> </bento-dashboard-template> </template> <script setup lang="ts"> import { BentoDashboardTemplate, BentoDashboardSection, BentoFilterBar, BentoFilterValues, BentoDropdown, BentoSegmentedControl } from '@adyen/bento-vue2' import { LumeLineChart } from '@adyen/lume'; import InfoIcon from '@adyen/ui-assets-icons-16/vue/info'; import Settings from '@adyen/ui-assets-icons-16/vue/settings'; import Download from '@adyen/ui-assets-icons-16/vue/download'; const header = { title: 'Dashboard', lastUpdated: Date.now(), actions: [ { title: 'Glossary', variant: 'secondary', event: () => {}, icon: InfoIcon }, { title: 'Settings', variant: 'secondary', event: () => {}, icon: Settings }, { title: 'Download', variant: 'secondary', event: () => {}, icon: Download }, { title: 'Share', variant: 'secondary', event: () => {}, icon: Share }, ], infoIconTooltipText: 'Info', }; const tabs = ${JSON.stringify(TABS_ARGS, null, 4)}; const filterConfig = ${JSON.stringify(FILTERS_CONFIG, null, 4)}; const dashboardSectionHeader = ${JSON.stringify(HEADER_SECTION_PROPS, null, 4)}; const dropdownOptions = ${JSON.stringify(DROPDOWN_OPTIONS, null, 4)}; const segmentedControlItems = ${JSON.stringify(SEGMENTED_CONTROL_ITEMS, null, 4)}; const lumeData = ${JSON.stringify(LUME_DATA, null, 4)}; const filterValues = ref<BentoFilterValues>([ { field: 'date-range', value: { startDate: subDays(new Date(), 7), endDate: new Date() }, }, { field: 'company', value: [], }, ]); const segmentedControlValue1 = ref('count'); const dropdownValue1 = ref('monthly'); const segmentedControlValue2 = ref('count'); const dropdownValue2 = ref('monthly'); </script> `; export const WithTabs: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardTemplate, BentoDashboardSection, BentoFilterBar, BentoDropdown, BentoSegmentedControl, LumeLineChart, }, props: Object.keys(argTypes), template: ` <bento-dashboard-template v-bind="args"> <template #filters> <bento-filter-bar :config="FILTERS_CONFIG" :filter-values="filterValues" @update:filter-values="filterValues = $event" /> </template> <template #tab-1> <bento-dashboard-section :header="HEADER_SECTION_PROPS"> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <template #content-col-1> <lume-line-chart v-bind="LUME_DATA" /> <lume-line-chart v-bind="LUME_DATA" /> </template> <template #content-col-2> <lume-line-chart v-bind="LUME_DATA" /> <lume-line-chart v-bind="LUME_DATA" /> </template> </bento-dashboard-section> </template> <template #tab-2> <bento-dashboard-section :header="HEADER_SECTION_PROPS"> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <template #content-col-1><lume-line-chart v-bind="LUME_DATA" /></template> <template #content-col-2><lume-line-chart v-bind="LUME_DATA" /></template> </bento-dashboard-section> </template> </bento-dashboard-template> `, setup(props) { const args = isVue2 ? props : _args; const filterValues = ref<BentoFilterValues>(FILTER_VALUES); const segmentedControlValue = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue = ref(DROPDOWN_OPTIONS[0].value); return { args, // Values filterValues, segmentedControlValue, dropdownValue, // Constants HEADER_SECTION_PROPS, FILTERS_CONFIG, SEGMENTED_CONTROL_ITEMS, DROPDOWN_OPTIONS, LUME_DATA, }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(withTabsCode), }; const halfWidthCode = ` <template> <bento-dashboard-template :header="header"> <bento-dashboard-section :header="{ title: 'Section 1'}" half-width> <template #controls> <bento-segmented-control :items="segmentedControlItems" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <lume-line-chart v-bind="lumeData" /> </bento-dashboard-section> <bento-dashboard-section :header="{ title: 'Section 2'}" half-width> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='dropdownOptions' /> </template> <lume-line-chart v-bind="lumeData" /> </bento-dashboard-section> </bento-dashboard-template> </template> <script setup lang="ts"> import { BentoDashboardTemplate, BentoDashboardSection, BentoDropdown, BentoSegmentedControl, } from '@adyen/bento-vue2' import { LumeLineChart } from '@adyen/lume'; import InfoIcon from '@adyen/ui-assets-icons-16/vue/info'; import Settings from '@adyen/ui-assets-icons-16/vue/settings'; import Download from '@adyen/ui-assets-icons-16/vue/download'; const header = { title: 'Dashboard', lastUpdated: Date.now(), actions: [ { title: 'Glossary', variant: 'secondary', event: () => {}, icon: InfoIcon }, { title: 'Settings', variant: 'secondary', event: () => {}, icon: Settings }, { title: 'Download', variant: 'secondary', event: () => {}, icon: Download }, { title: 'Share', variant: 'secondary', event: () => {}, icon: Share }, ], infoIconTooltipText: 'Info', }; const dropdownOptions = ${JSON.stringify(DROPDOWN_OPTIONS, null, 4)}; const segmentedControlItems = ${JSON.stringify(SEGMENTED_CONTROL_ITEMS, null, 4)}; const lumeData = ${JSON.stringify(LUME_DATA, null, 4)}; const segmentedControlValue = ref('count'); const dropdownValue = ref('monthly'); </script> `; export const HalfWidth: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardTemplate, BentoDashboardSection, BentoDropdown, BentoSegmentedControl, LumeLineChart, }, props: Object.keys(argTypes), template: ` <bento-dashboard-template v-bind="args"> <bento-dashboard-section :header="{ title: 'Section 1' }" half-width> <template #controls> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> <bento-dashboard-section :header="{ title: 'Section 2' }" half-width> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='DROPDOWN_OPTIONS' /> </template> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> </bento-dashboard-template> `, setup(props) { const segmentedControlValue = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue = ref(DROPDOWN_OPTIONS[0].value); return { // Values args: isVue2 ? props : _args, segmentedControlValue, dropdownValue, // Contants LUME_DATA, SEGMENTED_CONTROL_ITEMS, DROPDOWN_OPTIONS, }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(halfWidthCode), }; 
+import { isVue2 } from 'vue-demi'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { subDays } from 'date-fns/subDays'; import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@/components/summary-grid'; import { BentoDataGrid } from '@/components/data-grid'; import { type BentoDateRangeFilterOptions, BentoFilterBar, type BentoFilterBarModel, BentoFilterItemType, type BentoFilterValues, } from '@/components/filter-bar'; import { BentoDropdown } from '@/components/dropdown'; import { BentoSegmentedControl } from '@/components/segmented-control'; import { LumeLineChart } from '@adyen/lume'; import BentoDashboardTemplate from './dashboard-template.vue'; import BentoDashboardSection from './components/dashboard-section/dashboard-section.vue'; import InfoIcon from '@adyen/ui-assets-icons-16/vue/info'; import Settings from '@adyen/ui-assets-icons-16/vue/settings'; import Download from '@adyen/ui-assets-icons-16/vue/download'; import Share from '@adyen/ui-assets-icons-16/vue/share-2'; const DashboardTemplateDefault = "<template>\n <bento-dashboard-template :header=\"header\" sticky-filters>\n <template #filters>\n <bento-filter-bar\n :config=\"filterConfig\"\n :filter-values=\"filterValues\"\n @update:filter-values=\"filterValues = $event\"\n />\n </template>\n\n <bento-summary-grid>\n <template #cell-1-1>\n <bento-summary-grid-item-amount title=\"Title\" label=\"€ 220.00\" />\n </template>\n <template #cell-1-2>\n <bento-summary-grid-item-amount title=\"Title\" label=\"€ 220.00\" />\n </template>\n <template #cell-1-3>\n <bento-summary-grid-item-amount title=\"Title\" label=\"€ 220.00\" />\n </template>\n </bento-summary-grid>\n\n <bento-dashboard-section :header=\"sectionHeader\" half-width>\n <template #controls>\n <bento-dropdown v-model=\"dropdownValue1\" :items=\"dropdownOptions\" />\n <bento-segmented-control v-model=\"segmentedControlValue1\" :items=\"segmentedControlItems\" />\n </template>\n <lume-line-chart v-bind=\"lumeData\" />\n <lume-line-chart v-bind=\"lumeData\" />\n </bento-dashboard-section>\n\n <bento-dashboard-section :header=\"sectionHeader\" half-width>\n <template #controls>\n <bento-dropdown v-model=\"dropdownValue2\" :items=\"dropdownOptions\" />\n <bento-segmented-control v-model=\"segmentedControlValue2\" :items=\"segmentedControlItems\" />\n </template>\n <lume-line-chart v-bind=\"lumeData\" />\n <lume-line-chart v-bind=\"lumeData\" />\n </bento-dashboard-section>\n\n <bento-dashboard-section :header=\"sectionHeader\">\n <lume-line-chart v-bind=\"lumeData\" />\n </bento-dashboard-section>\n\n <bento-dashboard-section :header=\"sectionHeader\">\n <bento-data-grid :data=\"gridData\" :columns=\"gridColumns\" />\n </bento-dashboard-section>\n </bento-dashboard-template>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { subDays } from 'date-fns/subDays';\n import {\n type BentoColumn,\n BentoDashboardSection,\n BentoDashboardTemplate,\n type BentoDashboardTemplateHeader,\n BentoDataGrid,\n type BentoDatagridData,\n type BentoDateRangeFilterOptions,\n BentoDropdown,\n BentoFilterBar,\n type BentoFilterBarModel,\n BentoFilterItemType,\n type BentoFilterValues,\n type BentoListboxOptions,\n type BentoListboxSelectedValue,\n BentoSegmentedControl,\n type BentoSegmentedControlItem,\n type BentoSegmentedControlValue,\n BentoSummaryGrid,\n BentoSummaryGridItemAmount,\n } from '@adyen/bento-vue2';\n import { LumeLineChart } from '@adyen/lume';\n import DownloadIcon from '@adyen/ui-assets-icons-16/vue/download';\n import InfoIcon from '@adyen/ui-assets-icons-16/vue/info';\n import SettingsIcon from '@adyen/ui-assets-icons-16/vue/settings';\n import ShareIcon from '@adyen/ui-assets-icons-16/vue/share-2';\n\n const header: BentoDashboardTemplateHeader = {\n title: 'Dashboard',\n lastUpdated: Date.now(),\n actions: [\n { title: 'Glossary', variant: 'secondary', event: () => undefined, icon: InfoIcon },\n { title: 'Settings', variant: 'secondary', event: () => undefined, icon: SettingsIcon },\n { title: 'Download', variant: 'secondary', event: () => undefined, icon: DownloadIcon },\n { title: 'Share', variant: 'secondary', event: () => undefined, icon: ShareIcon },\n ],\n infoIconTooltipText: 'Info',\n };\n const sectionHeader: BentoDashboardTemplateHeader = {\n title: 'Section',\n infoIconTooltipText: 'Extra info about this section',\n };\n const filterConfig: BentoFilterBarModel = [\n {\n field: 'date-range',\n label: 'Date range',\n options: {\n allowTimeInput: true,\n numberOfMonths: 1,\n } as BentoDateRangeFilterOptions,\n type: BentoFilterItemType.DATE_RANGE,\n visible: true,\n },\n {\n field: 'company',\n label: 'Company',\n options: {\n listboxItems: [\n { label: 'Adyen', value: 'adyen' },\n { label: 'Bento', value: 'bento' },\n ],\n multiple: true,\n },\n type: BentoFilterItemType.SELECT,\n visible: true,\n },\n ];\n const filterValues = ref<BentoFilterValues>([\n {\n field: 'date-range',\n value: { startDate: subDays(new Date(), 7), endDate: new Date() },\n },\n { field: 'company', value: [] },\n ]);\n const dropdownOptions: BentoListboxOptions = [\n { label: 'Monthly', value: 'monthly' },\n { label: 'Yearly', value: 'yearly' },\n ];\n const segmentedControlItems: Array<BentoSegmentedControlItem> = [\n { label: 'Count', value: 'count' },\n { label: 'Amount', value: 'amount' },\n ];\n const lumeData = {\n data: [\n { label: 'Skyblue', color: 'skyblue', values: [10, 30, 20, 50, 40] },\n { label: 'Green', color: 'green', values: [50, 60, 90, 30, 10] },\n ],\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],\n options: {\n yAxisOptions: {\n gridLines: true,\n title: 'Y-label',\n },\n },\n };\n const gridData: BentoDatagridData = [\n { id: 1, paymentMethods: 'Visa', amount: '1,234 USD', numeric: '54,213' },\n { id: 2, paymentMethods: 'MasterCard', amount: '1,234 USD', numeric: '54,213' },\n { id: 3, paymentMethods: 'iDeal', amount: '1,234 USD', numeric: '54,213' },\n { id: 4, paymentMethods: 'Klarna', amount: '1,234 USD', numeric: '54,213' },\n { id: 5, paymentMethods: 'Apple Pay', amount: '1,234 USD', numeric: '54,213' },\n ];\n const gridColumns: Array<BentoColumn> = [\n { field: 'paymentMethods', label: 'Payment methods', minWidth: 300, mandatory: true },\n { field: 'amount', label: 'Amount', numeric: true, minWidth: 300 },\n { field: 'numeric', label: 'Numeric', numeric: true, minWidth: 300 },\n ];\n const segmentedControlValue1 = ref<BentoSegmentedControlValue>('count');\n const dropdownValue1 = ref<BentoListboxSelectedValue>('monthly');\n const segmentedControlValue2 = ref<BentoSegmentedControlValue>('count');\n const dropdownValue2 = ref<BentoListboxSelectedValue>('monthly');\n</script>\n"; const DashboardTemplateHalfWidth = "<template>\n <bento-dashboard-template :header=\"header\">\n <bento-dashboard-section half-width :header=\"sectionOneHeader\">\n <template #controls>\n <bento-segmented-control v-model=\"segmentedControlValue\" :items=\"segmentedControlItems\" />\n </template>\n <lume-line-chart v-bind=\"lumeData\" />\n </bento-dashboard-section>\n\n <bento-dashboard-section :header=\"sectionTwoHeader\" half-width>\n <template #controls>\n <bento-dropdown v-model=\"dropdownValue\" :items=\"dropdownOptions\" />\n </template>\n <lume-line-chart v-bind=\"lumeData\" />\n </bento-dashboard-section>\n </bento-dashboard-template>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoDashboardSection,\n BentoDashboardTemplate,\n type BentoDashboardTemplateHeader,\n BentoDropdown,\n type BentoListboxOptions,\n type BentoListboxSelectedValue,\n BentoSegmentedControl,\n type BentoSegmentedControlItem,\n type BentoSegmentedControlValue,\n } from '@adyen/bento-vue2';\n import { LumeLineChart } from '@adyen/lume';\n\n const header: BentoDashboardTemplateHeader = { title: 'Dashboard' };\n const sectionOneHeader: BentoDashboardTemplateHeader = { title: 'Section 1' };\n const sectionTwoHeader: BentoDashboardTemplateHeader = { title: 'Section 2' };\n const dropdownOptions: BentoListboxOptions = [\n { label: 'Monthly', value: 'monthly' },\n { label: 'Yearly', value: 'yearly' },\n ];\n const segmentedControlItems: Array<BentoSegmentedControlItem> = [\n { label: 'Count', value: 'count' },\n { label: 'Amount', value: 'amount' },\n ];\n const dropdownValue = ref<BentoListboxSelectedValue>('monthly');\n const segmentedControlValue = ref<BentoSegmentedControlValue>('count');\n const lumeData = {\n data: [{ label: 'Volume', values: [10, 30, 20] }],\n labels: ['Jan', 'Feb', 'Mar'],\n };\n</script>\n"; const DashboardTemplateWithTabs = "<template>\n <bento-dashboard-template :header=\"header\" sticky-filters sticky-tabs :tabs=\"tabs\">\n <template #filters>\n <bento-filter-bar\n :config=\"filterConfig\"\n :filter-values=\"filterValues\"\n @update:filter-values=\"filterValues = $event\"\n />\n </template>\n\n <template #tab-1>\n <bento-dashboard-section :header=\"sectionHeader\">\n <template #controls>\n <bento-dropdown v-model=\"dropdownValue\" :items=\"dropdownOptions\" />\n <bento-segmented-control v-model=\"segmentedControlValue\" :items=\"segmentedControlItems\" />\n </template>\n <template #content-col-1><lume-line-chart v-bind=\"lumeData\" /></template>\n <template #content-col-2><lume-line-chart v-bind=\"lumeData\" /></template>\n </bento-dashboard-section>\n </template>\n\n <template #tab-2>\n <bento-dashboard-section :header=\"sectionHeader\">\n <lume-line-chart v-bind=\"lumeData\" />\n </bento-dashboard-section>\n </template>\n </bento-dashboard-template>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoDashboardSection,\n BentoDashboardTemplate,\n type BentoDashboardTemplateHeader,\n type BentoDashboardTemplateTabs,\n BentoDropdown,\n BentoFilterBar,\n type BentoFilterBarModel,\n BentoFilterItemType,\n type BentoFilterValues,\n type BentoListboxOptions,\n type BentoListboxSelectedValue,\n BentoSegmentedControl,\n type BentoSegmentedControlItem,\n type BentoSegmentedControlValue,\n } from '@adyen/bento-vue2';\n import { LumeLineChart } from '@adyen/lume';\n\n const header: BentoDashboardTemplateHeader = { title: 'Dashboard' };\n const sectionHeader: BentoDashboardTemplateHeader = { title: 'Section' };\n const tabs: BentoDashboardTemplateTabs = { tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }] };\n const filterConfig: BentoFilterBarModel = [\n {\n field: 'company',\n label: 'Company',\n options: { listboxItems: [{ label: 'Adyen', value: 'adyen' }], multiple: true },\n type: BentoFilterItemType.SELECT,\n visible: true,\n },\n ];\n const filterValues = ref<BentoFilterValues>([{ field: 'company', value: [] }]);\n const dropdownOptions: BentoListboxOptions = [\n { label: 'Monthly', value: 'monthly' },\n { label: 'Yearly', value: 'yearly' },\n ];\n const segmentedControlItems: Array<BentoSegmentedControlItem> = [\n { label: 'Count', value: 'count' },\n { label: 'Amount', value: 'amount' },\n ];\n const dropdownValue = ref<BentoListboxSelectedValue>('monthly');\n const segmentedControlValue = ref<BentoSegmentedControlValue>('count');\n const lumeData = {\n data: [{ label: 'Volume', values: [10, 30, 20] }],\n labels: ['Jan', 'Feb', 'Mar'],\n };\n</script>\n"; import { type BentoDashboardTemplateHeader, type BentoDashboardTemplateTabs } from './dashboard-template.types'; import { type BentoListboxOptions } from '@/types/listbox'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'Dashboard template', component: BentoDashboardTemplate, parameters: { layout: 'fullscreen', }, }; export default meta; type Story = StoryObj<typeof BentoDashboardTemplate>; const HEADER_PROPS: BentoDashboardTemplateHeader = { title: 'Dashboard', lastUpdated: Date.now(), actions: [ { title: 'Glossary', variant: 'secondary', event: () => undefined, icon: InfoIcon }, { title: 'Settings', variant: 'secondary', event: () => undefined, icon: Settings }, { title: 'Download', variant: 'secondary', event: () => undefined, icon: Download }, { title: 'Share', variant: 'secondary', event: () => undefined, icon: Share }, ], infoIconTooltipText: 'Info', }; const TABS_ARGS: BentoDashboardTemplateTabs = { tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }], }; const HEADER_SECTION_PROPS: BentoDashboardTemplateHeader = { title: 'Section', infoIconTooltipText: 'Extra info about this section', }; const FILTERS_CONFIG: BentoFilterBarModel = [ { field: 'date-range', label: 'Date range', options: { allowTimeInput: true, numberOfMonths: 1, } as BentoDateRangeFilterOptions, type: BentoFilterItemType.DATE_RANGE, visible: true, }, { field: 'company', label: 'Company', options: { listboxItems: [ { label: 'Adyen', value: 'adyen' }, { label: 'Bento', value: 'bento' }, ], multiple: true, }, type: BentoFilterItemType.SELECT, visible: true, }, ]; const FILTER_VALUES: BentoFilterValues = [ { field: 'date-range', value: { startDate: subDays(new Date(), 7), endDate: new Date() }, }, { field: 'company', value: [], }, ]; const SEGMENTED_CONTROL_ITEMS = [ { label: 'Count', value: 'count' }, { label: 'Amount', value: 'amount' }, ]; const DROPDOWN_OPTIONS: BentoListboxOptions = [ { label: 'Monthly', value: 'monthly' }, { label: 'Yearly', value: 'yearly' }, ]; const LUME_DATA = { data: [ { label: 'Skyblue', color: 'skyblue', values: [10, 30, 20, 50, 40], }, { label: 'Green', color: 'green', values: [50, 60, 90, 30, 10], }, ], labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], options: { yAxisOptions: { gridLines: true, title: 'Y-label', }, }, }; const GRID_DATA = [ { id: 1, paymentMethods: 'Visa', amount: '1,234 USD', numeric: '54,213' }, { id: 2, paymentMethods: 'MasterCard', amount: '1,234 USD', numeric: '54,213' }, { id: 3, paymentMethods: 'iDeal', amount: '1,234 USD', numeric: '54,213' }, { id: 4, paymentMethods: 'Klarna', amount: '1,234 USD', numeric: '54,213' }, { id: 5, paymentMethods: 'Apple Pay', amount: '1,234 USD', numeric: '54,213' }, ]; const GRID_COLUMNS = [ { field: 'paymentMethods', label: 'Payment methods', minWidth: 300, mandatory: true }, { field: 'amount', label: 'Amount', numeric: true, minWidth: 300 }, { field: 'numeric', label: 'Numeric', numeric: true, minWidth: 300 }, ]; const DEFAULT_PROPS = { header: HEADER_PROPS, tabs: TABS_ARGS, stickyFilters: true, stickyTabs: true, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardTemplate, BentoDashboardSection, BentoFilterBar, BentoSummaryGrid, BentoSummaryGridItemAmount, BentoDropdown, BentoSegmentedControl, BentoDataGrid, LumeLineChart, }, props: Object.keys(argTypes), template: ` <bento-dashboard-template v-bind="args"> <template #filters> <bento-filter-bar :config="FILTERS_CONFIG" :filter-values="filterValues" @update:filter-values="filterValues = $event" /> </template> <bento-summary-grid> <template #cell-1-1> <bento-summary-grid-item-amount title="Title" label="€ 220.00" /> </template> <template #cell-1-2> <bento-summary-grid-item-amount title="Title" label="€ 220.00" /> </template> <template #cell-1-3> <bento-summary-grid-item-amount title="Title" label="€ 220.00" /> </template> </bento-summary-grid> <bento-dashboard-section :header="HEADER_SECTION_PROPS" half-width> <template #controls> <bento-dropdown :model-value="dropdownValue1" @update:model-value="dropdownValue1 = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue1" @update:model-value="segmentedControlValue1 = $event"/> </template> <lume-line-chart v-bind="LUME_DATA" /> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> <bento-dashboard-section :header="HEADER_SECTION_PROPS" half-width> <template #controls> <bento-dropdown :model-value="dropdownValue2" @update:model-value="dropdownValue2 = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue2" @update:model-value="segmentedControlValue2 = $event"/> </template> <lume-line-chart v-bind="LUME_DATA" /> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> <bento-dashboard-section :header="HEADER_SECTION_PROPS"> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> <bento-dashboard-section :header="HEADER_SECTION_PROPS"> <bento-data-grid :data="GRID_DATA" :columns="GRID_COLUMNS" /> </bento-dashboard-section> </bento-dashboard-template> `, setup(props) { const args = isVue2 ? props : _args; const filterValues = ref<BentoFilterValues>(FILTER_VALUES); const segmentedControlValue1 = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue1 = ref(DROPDOWN_OPTIONS[0].value); const segmentedControlValue2 = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue2 = ref(DROPDOWN_OPTIONS[0].value); return { args, // Values filterValues, segmentedControlValue1, dropdownValue1, segmentedControlValue2, dropdownValue2, // Constants HEADER_SECTION_PROPS, FILTERS_CONFIG, DROPDOWN_OPTIONS, SEGMENTED_CONTROL_ITEMS, LUME_DATA, GRID_DATA, GRID_COLUMNS, }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(DashboardTemplateDefault), }; export const WithTabs: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardTemplate, BentoDashboardSection, BentoFilterBar, BentoDropdown, BentoSegmentedControl, LumeLineChart, }, props: Object.keys(argTypes), template: ` <bento-dashboard-template v-bind="args"> <template #filters> <bento-filter-bar :config="FILTERS_CONFIG" :filter-values="filterValues" @update:filter-values="filterValues = $event" /> </template> <template #tab-1> <bento-dashboard-section :header="HEADER_SECTION_PROPS"> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <template #content-col-1> <lume-line-chart v-bind="LUME_DATA" /> <lume-line-chart v-bind="LUME_DATA" /> </template> <template #content-col-2> <lume-line-chart v-bind="LUME_DATA" /> <lume-line-chart v-bind="LUME_DATA" /> </template> </bento-dashboard-section> </template> <template #tab-2> <bento-dashboard-section :header="HEADER_SECTION_PROPS"> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='DROPDOWN_OPTIONS' /> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <template #content-col-1><lume-line-chart v-bind="LUME_DATA" /></template> <template #content-col-2><lume-line-chart v-bind="LUME_DATA" /></template> </bento-dashboard-section> </template> </bento-dashboard-template> `, setup(props) { const args = isVue2 ? props : _args; const filterValues = ref<BentoFilterValues>(FILTER_VALUES); const segmentedControlValue = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue = ref(DROPDOWN_OPTIONS[0].value); return { args, // Values filterValues, segmentedControlValue, dropdownValue, // Constants HEADER_SECTION_PROPS, FILTERS_CONFIG, SEGMENTED_CONTROL_ITEMS, DROPDOWN_OPTIONS, LUME_DATA, }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(DashboardTemplateWithTabs), }; export const HalfWidth: Story = { render: (_args, { argTypes }) => ({ components: { BentoDashboardTemplate, BentoDashboardSection, BentoDropdown, BentoSegmentedControl, LumeLineChart, }, props: Object.keys(argTypes), template: ` <bento-dashboard-template v-bind="args"> <bento-dashboard-section :header="{ title: 'Section 1' }" half-width> <template #controls> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="segmentedControlValue" @update:model-value="segmentedControlValue = $event"/> </template> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> <bento-dashboard-section :header="{ title: 'Section 2' }" half-width> <template #controls> <bento-dropdown :model-value="dropdownValue" @update:model-value="dropdownValue = $event" :items='DROPDOWN_OPTIONS' /> </template> <lume-line-chart v-bind="LUME_DATA" /> </bento-dashboard-section> </bento-dashboard-template> `, setup(props) { const segmentedControlValue = ref(SEGMENTED_CONTROL_ITEMS[0].value); const dropdownValue = ref(DROPDOWN_OPTIONS[0].value); return { // Values args: isVue2 ? props : _args, segmentedControlValue, dropdownValue, // Contants LUME_DATA, SEGMENTED_CONTROL_ITEMS, DROPDOWN_OPTIONS, }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(DashboardTemplateHalfWidth), }; 

package/dist/assets/templates/data-grid-template/data-grid-template.stories.ts

@@ -1 +1 @@
-import { BentoButton } from '@/components/button'; import { BentoCountry, BentoCountryCode } from '@/components/country'; import { type BentoColumn, BentoDataGrid, type BentoDatagridData } from '@/components/data-grid'; import { type BentoFilterBarModel, BentoFilterItemType, type BentoFilterValues } from '@/components/filter-bar'; import { BentoHeaderWithViews, type BentoHeaderWithViewsItem } from '@/components/header-with-views'; import { type BentoInspectorProps } from '@/components/inspector'; import { BentoStatus } from '@/components/status'; import { BentoSummaryGrid, BentoSummaryGridItemAmount, BentoSummaryGridItemCustom } from '@/components/summary-grid'; import { BentoTypography } from '@/components/typography'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { computed, onMounted, ref } from 'vue'; import { isVue2 } from 'vue-demi'; import DataGridTemplateWithHeaderWithViews from './__tests__/data-grid-template-with-header-with-views.vue?raw'; import './data-grid-template.stories.scss?module'; import { type BentoDataGridTemplateTabs } from './data-grid-template.types'; import BentoDataGridTemplate from './data-grid-template.vue'; const meta: Meta = { title: 'Data grid template', component: BentoDataGridTemplate, parameters: { layout: 'fullscreen', }, }; const HEADER_PROPS = { title: 'Payments', actions: [ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', event: () => undefined }, { title: 'Tetiary action', event: () => undefined }, ], infoIconTooltipText: 'Title Tooltip Text', }; const HEADER_PROPS_DOCS = { title: 'Payments', actions: [ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', event: () => undefined }, { title: 'Tetiary action', event: () => undefined }, ], infoIconTooltipText: 'Title Tooltip Text', }; const PAGINATION_DOCS = { description: 'datagrid navigation', hasNext: true, size: 10 }; const DEFAULT_COLUMNS: Array<BentoColumn> = [ { field: 'name', label: 'Name', minWidth: 300, mandatory: true }, { field: 'company', label: 'Reference', minWidth: 150 }, { field: 'payment', label: 'Payment', width: 200, minWidth: 150 }, ]; const DATA_GRID_1_DATA: BentoDatagridData = Array.from({ length: 50 }, (_, index) => ({ name: `Name ${index + 1}`, company: `Company ${index + 1}`, payment: `Payment ${index + 1}`, id: `${index + 1}`, })); const FILTERS: BentoFilterBarModel = [ { field: 'name', label: 'Name', type: BentoFilterItemType.INPUT, }, { field: 'company', label: 'Company', type: BentoFilterItemType.INPUT, }, ]; const FILTER_VALUES: BentoFilterValues = [ { field: 'company', value: 'Company 1', }, ]; const FILTERS_DOCS = `[ { field: 'name', label: 'Name', type: BentoFilterItemType.INPUT, }, { field: 'company', label: 'Company', type: BentoFilterItemType.INPUT, }, ]`; const FILTER_VALUES_DOCS = `[ { field: 'company', value: 'Company 1' }, ]`; const TABS_ARGS: BentoDataGridTemplateTabs = { tabs: [{ title: 'Data grid title 1' }, { title: 'Data grid title 2' }], }; const INSPECTOR_ARGS: BentoInspectorProps = { title: 'Title', size: 'large', isOpen: false, activePage: '', expandable: true, }; const BULK_ACTIONS = [ { title: 'Edit', event: () => undefined, }, { title: 'Delete', critical: true, event: () => undefined, }, ]; const DATA_GRID_1_ARGS = { data: DATA_GRID_1_DATA, columns: DEFAULT_COLUMNS, allowColumnDragAndDrop: false, pagination: {}, filterSearchTerm: '', highlightedRows: [DATA_GRID_1_DATA[0].id], selectable: true, selection: [DATA_GRID_1_DATA[2].id], bulkActions: BULK_ACTIONS, stickyPagination: true, }; const DATA_GRID_2_DATA: BentoDatagridData = Array.from({ length: 30 }, (_, index) => ({ name: `Name ${index + 1}`, company: `Company ${index + 1}`, payment: `Payment ${index + 1}`, })); const DATA_GRID_2_ARGS = { data: DATA_GRID_2_DATA, columns: DEFAULT_COLUMNS, allowColumnDragAndDrop: false, pagination: {}, }; export default meta; type Story = StoryObj<typeof BentoDataGridTemplate>; const defaultCode = ` <template> <bento-data-grid-template :header="header" :tabs="tabs" sticky-tabs> <template #tab-1> <bento-data-grid :columns="columns" :data="dataArray" :pagination.sync="pagination" :selection.sync="selection" :bulk-actions="bulkActions" selectable sticky-pagination @navigate="clickNavigate" /> </template> <template #tab-2> <bento-data-grid :columns="columns" :data="dataArray" :filter-search-term.sync="searchTerm" :filters="filtersConfig" :filter-values.sync="filterValues" :sort-by.sync="sortBy" /> </template> </bento-data-grid-template> </template> <script setup lang="ts"> import { BentoCountryCode, type BentoColumn, type BentoDatagridSortByColumn, type BentoDatagridDataItem, BentoDataGridTemplate, BentoDataGrid, type BentoDataGridTemplateHeader, type BentoDatagridPaginationProps, type BentoFilterBarModel, BentoFilterItemType, } from '@adyen/bento-vue2'; import messages from './messages.json'; const { t } = useI18n({ messages }); const header: BentoDataGridTemplateHeader = { title: 'Payments', actions: [ { title: 'Primary action', event: () => {} }, { title: 'Secondary action', event: () => {} }, { title: 'Tetiary action', event: () => {} }, ], infoIconTooltipText: 'Title Tooltip Text', }; const tabs: BentoDataGridTemplateTabs = { tabs: [{ title: 'Data grid title 1' }, { title: 'Data grid title 2' }], }; const columns = computed<BentoColumn[]>(() => [ { field: 'name', label: t('Name'), minWidth: 300, mandatory: true, frozen: true, autoWidth: true, sortable: true, }, { field: 'company', label: t('Reference') }, { field: 'payment', label: t('Payment'), width: 200, minWidth: 150 }, ]); const filtersConfig = computed<BentoFilterBarModel>(() => [ { field: 'company', label: t('Company'), type: BentoFilterItemType.INPUT, }, { field: 'countryCode', label: t('Country'), options: { listboxItems: [ { value: BentoCountryCode.NL, }, { value: BentoCountryCode.BE, }, ], variant: 'name', }, type: BentoFilterItemType.SELECT_COUNTRY, }, ]); // Watch this to keep track if the user filters data const filterValues = ref(); // Watch this to keep track if the user sorts data const sortBy = ref<BentoDatagridSortByColumn[]>([]); // Watch this to keep track if the user searches for data const searchTerm = ref(''); // Watch this to keep track if the user pages through the data const pagination = ref<BentoDatagridPaginationProps>({ description: 'datagrid 1 navigation', hasNext: true, size: 10 }); const selection = ref([]); const bulkActions = [ { title: 'Edit', event: () => undefined, }, { title: 'Delete', critical: true, event: () => undefined, }, ]; // This is a contrived example of the dataArray as this will normally be retried via an API const dataArray = ref<BentoDatagridDataItem[]>([ { id: '03c0a799-1ced-4017-aea3-0cebb0106335', name: 'Shepherd Kane', payment: 160405, company: 'VURBO', registered: '2023-06-30T13:56:09.498Z', tags: ['deserunt', 'et', 'esse'], reference: 'UnbQaUncf3eR1D8XUBqn_UnbQaUncf3eR1D8XUBqn_UnbQaUncf3eR1D8XUBqn', paymentStatus: 1, countryCode: BentoCountryCode.NL, }, { id: 'b6d4f1fd-b1f6-40a6-a443-f785c89604ef', name: 'Santos Palmer', payment: 163500, company: 'POLARAX', registered: '2023-04-28T13:11:09.498Z', tags: ['et', 'Lorem', 'sint'], reference: 'IxUZ9FsEPCZ9dFFPpI9C', paymentStatus: 2, countryCode: BentoCountryCode.BE, }, ]); </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDataGrid, BentoDataGridTemplate, }, props: Object.keys(argTypes), template: ` <bento-data-grid-template v-bind="args"> <template #infoIconTooltipContent>Test</template> <template #tab-1><bento-data-grid v-bind="dataGrid1Props" :filters="filters" :filter-values.sync="filterValues" :selection.sync="selection" column-panel /></template> <template #tab-2><bento-data-grid v-bind="dataGrid2Props" /></template> <template #inspector-content>Hello</template> </bento-data-grid-template> `, setup(props) { const args = isVue2 ? props : _args; const filters = ref<BentoFilterBarModel>(args?.filters ?? FILTERS); const filterValues = ref<BentoFilterValues>(args?.filterValues ?? FILTER_VALUES); const selection = ref(DATA_GRID_1_ARGS.selection); const dataGrid1Props = DATA_GRID_1_ARGS; const dataGrid2Props = DATA_GRID_2_ARGS; return { // Values args, dataGrid1Props, dataGrid2Props, filters, filterValues, selection, }; }, }), args: { header: HEADER_PROPS, tabs: TABS_ARGS, inspector: INSPECTOR_ARGS, }, parameters: storybookDocsParameter(defaultCode), }; const additionalContentCode = ` <bento-data-grid-template :header="${JSON.stringify(HEADER_PROPS_DOCS)}" :tabs="${JSON.stringify( TABS_ARGS )}" sticky-tabs> <template #additionalContent> Your additional content/component here </template> <template #tab-1> <bento-data-grid :columns="${JSON.stringify(DEFAULT_COLUMNS)}" :data="dataArray" :pagination="${JSON.stringify(PAGINATION_DOCS)}" @navigate="clickNavigate" /> </template> <template #tab-2> <bento-data-grid :columns="${JSON.stringify(DEFAULT_COLUMNS)}" :data="dataArray" :filter-search-term.sync="searchTerm" :filters="${FILTERS_DOCS}" :filter-values.sync="${FILTER_VALUES_DOCS}" @filter-search-clear="onSearchCleared" @filter-search-input="onSearchInput" /> </template> </bento-data-grid-template> `; export const withAdditionalContent: Story = { render: (_args, { argTypes }) => ({ components: { BentoCountry, BentoDataGrid, BentoDataGridTemplate, BentoStatus, BentoSummaryGrid, BentoSummaryGridItemAmount, BentoSummaryGridItemCustom, }, props: Object.keys(argTypes), template: ` <bento-data-grid-template v-bind="args"> <template #additionalContent> <bento-summary-grid> <template #cell-1-1> <bento-summary-grid-item-custom title="Title" info-icon-tooltip-text="Text for icon" > <bento-status variant="green"> Status </bento-status> </bento-summary-grid-item-custom> </template> <template #cell-1-2> <bento-summary-grid-item-amount title="Title" label="€200.00" secondary-label="/ day" info-icon-tooltip-text="Text for icon" copy="Copy this to clipboard" /> </template> <template #cell-1-3> <bento-summary-grid-item-custom title="Title" info-icon-tooltip-text="Text for icon" > <bento-country :code="BentoCountryCode.NL" /> </bento-summary-grid-item-custom> </template> </bento-summary-grid> </template> <template #tab-1><bento-data-grid v-bind="dataGrid1Props" :filters="filters" :filter-values.sync="filterValues" /></template> <template #tab-2><bento-data-grid v-bind="dataGrid2Props" /></template> </bento-data-grid-template> `, setup(props) { const args = isVue2 ? props : _args; const filters = ref<BentoFilterBarModel>(args?.filters ?? FILTERS); const filterValues = ref<BentoFilterValues>(args?.filterValues ?? FILTER_VALUES); const dataGrid1Props = DATA_GRID_1_ARGS; const dataGrid2Props = DATA_GRID_2_ARGS; return { // Values args, dataGrid1Props, dataGrid2Props, filters, filterValues, // Enums BentoCountryCode, }; }, }), args: { header: HEADER_PROPS, tabs: TABS_ARGS, }, parameters: storybookDocsParameter(additionalContentCode), }; const singularDataGridCode = ` <bento-data-grid-template :header="${JSON.stringify(HEADER_PROPS)}" sticky-tabs> <bento-data-grid :columns="${JSON.stringify(DEFAULT_COLUMNS)}" :data="dataArray" :pagination="${JSON.stringify(PAGINATION_DOCS)}" @navigate="clickNavigate" :filter-search-term.sync="searchTerm" :filters="${FILTERS_DOCS}" :filter-values.sync="${FILTER_VALUES_DOCS}" @filter-search-clear="onSearchCleared" @filter-search-input="onSearchInput" /> </bento-data-grid-template> `; export const singularDataGrid: Story = { render: (_args, { argTypes }) => ({ components: { BentoDataGrid, BentoDataGridTemplate }, props: Object.keys(argTypes), template: ` <bento-data-grid-template v-bind="args"> <bento-data-grid v-bind="dataGridProps" :filters="filters" :filter-values.sync="filterValues" /> </bento-data-grid-template> `, setup(props) { const args = isVue2 ? props : _args; const filters = ref<BentoFilterBarModel>(args?.filters ?? FILTERS); const filterValues = ref<BentoFilterValues>(args?.filterValues ?? FILTER_VALUES); const dataGridProps = DATA_GRID_1_ARGS; return { // Values args, dataGridProps, filters, filterValues, }; }, }), args: { header: HEADER_PROPS, }, parameters: storybookDocsParameter(singularDataGridCode), }; const inspectorCode = ` <template> <bento-data-grid-template :header="header" :inspector="computedInspectorProps" @update:is-open:inspector="isInspectorOpen = $event" @update:active-page:inspector="inspectorActivePage = $event" > <template #default> <bento-data-grid :columns="columns" :data="dataArray" /> </template> <template #inspector-content> <div style="padding: 1rem;"> <bento-typography variant="title" el="h3"> Details for: {{ inspectorTitle }} </bento-typography> </div> </template> </bento-data-grid-template> </template> <script setup lang="ts"> import { ref, computed, onMounted } from 'vue'; import { BentoDataGridTemplate, BentoDataGrid, BentoTypography, } from '@adyen/bento-vue2'; import type { BentoDataGridTemplateHeader, BentoColumn, BentoDatagridDataItem } from '@adyen/bento-vue3'; const isInspectorOpen = ref(true); const inspectorTitle = ref('Shepherd Kane'); const inspectorActivePage = ref('id-1'); const pageFocusAnchorRef = ref<HTMLElement | null>(null); const dataArray = ref([ { id: '1', name: 'Shepherd Kane', company: 'Company 1', payment: 1604.05 }, { id: '2', name: 'Santos Palmer', company: 'Company 2', payment: 1635.00 }, ]); const openInspector = (item) => { inspectorTitle.value = item.name as string; isInspectorOpen.value = true; inspectorActivePage.value = item.id as string; const row = document.querySelector(\`[role="row"][aria-rowindex="\${item.rowIndex + 1}"]\`); pageFocusAnchorRef.value = row?.querySelector('[role="gridcell"]') as HTMLElement; }; const columns = computed<BentoColumn[]>(() => [ { field: 'name', label: 'Name', cellActions: [{ variant: 'open', event: openInspector }], }, { field: 'payment', label: 'Payment (€)', width: 200, }, ]); const header = ref<BentoDataGridTemplateHeader>({ title: 'Payments', infoIconTooltipText: 'Click the > icon on a row to open the inspector.', }); const computedInspectorProps = computed(() => ({ isOpen: isInspectorOpen.value, title: inspectorTitle.value, activePage: inspectorActivePage.value, pageFocusAnchor: pageFocusAnchorRef.value, })); <script> `; export const withInspector: Story = { render: (_args, { argTypes }) => ({ components: { BentoDataGrid, BentoDataGridTemplate, BentoTypography, BentoButton, }, props: Object.keys(argTypes), template: ` <bento-data-grid-template v-bind="args" :inspector="computedInspectorProps" @update:is-open:inspector="isInspectorOpen = $event" @update:active-page:inspector="inspectorActivePage = $event" > <template #default> <bento-data-grid v-bind="dataGridProps" :filters="dataGridFilters" :filter-values.sync="dataGridFilterValues" /> </template> <template #inspector-content> <bento-typography v-for="i in 10" :key="i" style="padding: 5px"> {{ inspectorContent }} </bento-typography> </template> </bento-data-grid-template> `, setup(props) { const args = isVue2 ? props : _args; const isInspectorOpen = ref(args.inspector.isOpen); const inspectorTitle = ref(args.inspector.title); const inspectorActivePage = ref(''); const dataGridFilters = ref<BentoFilterBarModel>(args?.filters ?? FILTERS); const dataGridFilterValues = ref<BentoFilterValues>(args?.filterValues ?? []); const inspectorContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; const cellWithActions = { ...DEFAULT_COLUMNS[0], cellActions: [{ variant: 'open', event: item => openInspector(item) }], } satisfies BentoColumn; const columnsWithActions: Array<BentoColumn> = [cellWithActions, ...DEFAULT_COLUMNS.slice(1, 2)]; const dataGridProps = { ...DATA_GRID_1_ARGS, columns: columnsWithActions }; const pageFocusAnchorRef = ref<HTMLElement | null>(null); // Find the element after the component has mounted in the browser onMounted(() => { pageFocusAnchorRef.value = document.body .querySelector('[role="row"][aria-rowindex="1"]') .querySelectorAll('[role="gridcell"]')[0] as HTMLElement; }); const openInspector = item => { inspectorTitle.value = item.name; isInspectorOpen.value = true; inspectorActivePage.value = item.name; pageFocusAnchorRef.value = document.body .querySelector(`[role="row"][aria-rowindex="${item.id}"]`) .querySelectorAll('[role="gridcell"]')[0] as HTMLElement; }; const computedInspectorProps = computed(() => ({ ...args.inspector, isOpen: isInspectorOpen.value, title: inspectorTitle.value, activePage: inspectorActivePage.value, pageFocusAnchor: pageFocusAnchorRef.value, })); return { args, dataGridProps, dataGridFilters, dataGridFilterValues, isInspectorOpen, inspectorActivePage, computedInspectorProps, inspectorContent, openInspector, }; }, }), args: { header: HEADER_PROPS, inspector: { title: DATA_GRID_1_DATA[0].name, isOpen: true, activePage: DATA_GRID_1_DATA[0].name, }, }, parameters: storybookDocsParameter(inspectorCode), }; export const withHeaderWithViews: Story = { render: (_args, { argTypes }) => ({ components: { BentoDataGrid, BentoDataGridTemplate, BentoHeaderWithViews, }, props: Object.keys(argTypes), template: ` <bento-data-grid-template v-bind="args"> <template #header> <bento-header-with-views :actions="headerActions" description="Description" title="Page Title" :hasChanges="false" skipUnsavedChangesText="Don’t show this message again" :views="headerViews" /> </template> <template #infoIconTooltipContent>Test</template> <template #tab-1><bento-data-grid v-bind="dataGrid1Props" :filters="filters" :filter-values.sync="filterValues" column-panel /></template> <template #tab-2><bento-data-grid v-bind="dataGrid2Props" /></template> <template #inspector-content>Hello</template> </bento-data-grid-template> `, setup(props) { const args = isVue2 ? props : _args; const filters = ref<BentoFilterBarModel>(args?.filters ?? FILTERS); const filterValues = ref<BentoFilterValues>(args?.filterValues ?? FILTER_VALUES); const dataGrid1Props = DATA_GRID_1_ARGS; const dataGrid2Props = DATA_GRID_2_ARGS; const headerViews: Array<BentoHeaderWithViewsItem> = [ { icon: 'stack', iconColor: 'primary', label: 'View 1', }, { icon: 'stack', iconColor: 'primary', label: 'View 2', }, ]; const headerActions = [ { title: 'Primary action', }, { title: 'Secondary action', }, ]; return { // Values args, dataGrid1Props, dataGrid2Props, filters, filterValues, headerActions, headerViews, }; }, }), args: { tabs: TABS_ARGS, inspector: INSPECTOR_ARGS, }, parameters: storybookDocsParameter(DataGridTemplateWithHeaderWithViews), }; 
+import { BentoButton } from '@/components/button'; import { BentoCountry, BentoCountryCode } from '@/components/country'; import { type BentoColumn, BentoDataGrid, type BentoDatagridData } from '@/components/data-grid'; import { type BentoFilterBarModel, BentoFilterItemType, type BentoFilterValues } from '@/components/filter-bar'; import { BentoHeaderWithViews, type BentoHeaderWithViewsItem } from '@/components/header-with-views'; import { type BentoInspectorProps } from '@/components/inspector'; import { BentoStatus } from '@/components/status'; import { BentoSummaryGrid, BentoSummaryGridItemAmount, BentoSummaryGridItemCustom } from '@/components/summary-grid'; import { BentoTypography } from '@/components/typography'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { computed, onMounted, ref } from 'vue'; import { isVue2 } from 'vue-demi'; const DataGridTemplateWithHeaderWithViews = "<template>\n <bento-data-grid-template :tabs=\"tabs\">\n <template #header>\n <bento-header-with-views\n title=\"Page Title\"\n info-icon-tooltip-text=\"Description\"\n :has-changes=\"false\"\n skip-unsaved-changes-text=\"Don’t show this message again\"\n :actions=\"headerActions\"\n :views=\"headerViews\"\n />\n </template>\n\n <template #infoIconTooltipContent>Test</template>\n\n <template #tab-1>\n <bento-data-grid v-bind=\"dataGrid1Props\" column-panel />\n </template>\n\n <template #tab-2>\n <bento-data-grid v-bind=\"dataGrid2Props\" />\n </template>\n\n <template #inspector-content>Hello</template>\n </bento-data-grid-template>\n</template>\n\n<script setup lang=\"ts\">\n import type { BentoColumn, BentoDatagridData } from '@/components/data-grid';\n import { BentoDataGrid } from '@/components/data-grid';\n import type { BentoHeaderWithViewsItem } from '@/components/header-with-views';\n import { BentoHeaderWithViews } from '@/components/header-with-views';\n import type { BentoDataGridTemplateTabs } from '@/templates/data-grid-template';\n import { BentoDataGridTemplate } from '@/templates/data-grid-template';\n import { ref } from 'vue';\n\n const tabs = ref<BentoDataGridTemplateTabs>({\n tabs: [{ title: 'Data grid title 1' }, { title: 'Data grid title 2' }],\n });\n\n const defaultColumns: Array<BentoColumn> = [\n { field: 'name', label: 'Name', minWidth: 300, mandatory: true },\n { field: 'company', label: 'Reference', minWidth: 150 },\n { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },\n ];\n\n const dataGrid1Data: BentoDatagridData = Array.from({ length: 50 }, (_, i) => ({\n id: `${i + 1}`,\n name: `Name ${i + 1}`,\n company: `Company ${i + 1}`,\n payment: `Payment ${i + 1}`,\n }));\n\n const dataGrid2Data: BentoDatagridData = Array.from({ length: 30 }, (_, i) => ({\n name: `Name ${i + 1}`,\n company: `Company ${i + 1}`,\n payment: `Payment ${i + 1}`,\n }));\n\n const dataGrid1Props = ref({\n data: dataGrid1Data,\n columns: defaultColumns,\n });\n\n const dataGrid2Props = ref({\n data: dataGrid2Data,\n columns: defaultColumns,\n });\n\n const headerViews: Array<BentoHeaderWithViewsItem> = [\n { icon: 'stack', iconColor: 'primary', label: 'View 1' },\n { icon: 'stack', iconColor: 'primary', label: 'View 2' },\n ];\n\n const headerActions = [{ title: 'Primary action' }, { title: 'Secondary action' }];\n</script>\n"; import './data-grid-template.stories.scss?module'; import { type BentoDataGridTemplateTabs } from './data-grid-template.types'; import BentoDataGridTemplate from './data-grid-template.vue'; const meta: Meta = { title: 'Data grid template', component: BentoDataGridTemplate, parameters: { layout: 'fullscreen', }, }; const HEADER_PROPS = { title: 'Payments', actions: [ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', event: () => undefined }, { title: 'Tetiary action', event: () => undefined }, ], infoIconTooltipText: 'Title Tooltip Text', }; const HEADER_PROPS_DOCS = { title: 'Payments', actions: [ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', event: () => undefined }, { title: 'Tetiary action', event: () => undefined }, ], infoIconTooltipText: 'Title Tooltip Text', }; const PAGINATION_DOCS = { description: 'datagrid navigation', hasNext: true, size: 10 }; const DEFAULT_COLUMNS: Array<BentoColumn> = [ { field: 'name', label: 'Name', minWidth: 300, mandatory: true }, { field: 'company', label: 'Reference', minWidth: 150 }, { field: 'payment', label: 'Payment', width: 200, minWidth: 150 }, ]; const DATA_GRID_1_DATA: BentoDatagridData = Array.from({ length: 50 }, (_, index) => ({ name: `Name ${index + 1}`, company: `Company ${index + 1}`, payment: `Payment ${index + 1}`, id: `${index + 1}`, })); const FILTERS: BentoFilterBarModel = [ { field: 'name', label: 'Name', type: BentoFilterItemType.INPUT, }, { field: 'company', label: 'Company', type: BentoFilterItemType.INPUT, }, ]; const FILTER_VALUES: BentoFilterValues = [ { field: 'company', value: 'Company 1', }, ]; const FILTERS_DOCS = `[ { field: 'name', label: 'Name', type: BentoFilterItemType.INPUT, }, { field: 'company', label: 'Company', type: BentoFilterItemType.INPUT, }, ]`; const FILTER_VALUES_DOCS = `[ { field: 'company', value: 'Company 1' }, ]`; const TABS_ARGS: BentoDataGridTemplateTabs = { tabs: [{ title: 'Data grid title 1' }, { title: 'Data grid title 2' }], }; const INSPECTOR_ARGS: BentoInspectorProps = { title: 'Title', size: 'large', isOpen: false, activePage: '', expandable: true, }; const BULK_ACTIONS = [ { title: 'Edit', event: () => undefined, }, { title: 'Delete', critical: true, event: () => undefined, }, ]; const DATA_GRID_1_ARGS = { data: DATA_GRID_1_DATA, columns: DEFAULT_COLUMNS, allowColumnDragAndDrop: false, pagination: {}, filterSearchTerm: '', highlightedRows: [DATA_GRID_1_DATA[0].id], selectable: true, selection: [DATA_GRID_1_DATA[2].id], bulkActions: BULK_ACTIONS, stickyPagination: true, }; const DATA_GRID_2_DATA: BentoDatagridData = Array.from({ length: 30 }, (_, index) => ({ name: `Name ${index + 1}`, company: `Company ${index + 1}`, payment: `Payment ${index + 1}`, })); const DATA_GRID_2_ARGS = { data: DATA_GRID_2_DATA, columns: DEFAULT_COLUMNS, allowColumnDragAndDrop: false, pagination: {}, }; export default meta; type Story = StoryObj<typeof BentoDataGridTemplate>; const defaultCode = ` <template> <bento-data-grid-template :header="header" :tabs="tabs" sticky-tabs> <template #tab-1> <bento-data-grid :columns="columns" :data="dataArray" :pagination.sync="pagination" :selection.sync="selection" :bulk-actions="bulkActions" selectable sticky-pagination @navigate="clickNavigate" /> </template> <template #tab-2> <bento-data-grid :columns="columns" :data="dataArray" :filter-search-term.sync="searchTerm" :filters="filtersConfig" :filter-values.sync="filterValues" :sort-by.sync="sortBy" /> </template> </bento-data-grid-template> </template> <script setup lang="ts"> import { BentoCountryCode, type BentoColumn, type BentoDatagridSortByColumn, type BentoDatagridDataItem, BentoDataGridTemplate, BentoDataGrid, type BentoDataGridTemplateHeader, type BentoDatagridPaginationProps, type BentoFilterBarModel, BentoFilterItemType, } from '@adyen/bento-vue2'; import messages from './messages.json'; const { t } = useI18n({ messages }); const header: BentoDataGridTemplateHeader = { title: 'Payments', actions: [ { title: 'Primary action', event: () => {} }, { title: 'Secondary action', event: () => {} }, { title: 'Tetiary action', event: () => {} }, ], infoIconTooltipText: 'Title Tooltip Text', }; const tabs: BentoDataGridTemplateTabs = { tabs: [{ title: 'Data grid title 1' }, { title: 'Data grid title 2' }], }; const columns = computed<BentoColumn[]>(() => [ { field: 'name', label: t('Name'), minWidth: 300, mandatory: true, frozen: true, autoWidth: true, sortable: true, }, { field: 'company', label: t('Reference') }, { field: 'payment', label: t('Payment'), width: 200, minWidth: 150 }, ]); const filtersConfig = computed<BentoFilterBarModel>(() => [ { field: 'company', label: t('Company'), type: BentoFilterItemType.INPUT, }, { field: 'countryCode', label: t('Country'), options: { listboxItems: [ { value: BentoCountryCode.NL, }, { value: BentoCountryCode.BE, }, ], variant: 'name', }, type: BentoFilterItemType.SELECT_COUNTRY, }, ]); // Watch this to keep track if the user filters data const filterValues = ref(); // Watch this to keep track if the user sorts data const sortBy = ref<BentoDatagridSortByColumn[]>([]); // Watch this to keep track if the user searches for data const searchTerm = ref(''); // Watch this to keep track if the user pages through the data const pagination = ref<BentoDatagridPaginationProps>({ description: 'datagrid 1 navigation', hasNext: true, size: 10 }); const selection = ref([]); const bulkActions = [ { title: 'Edit', event: () => undefined, }, { title: 'Delete', critical: true, event: () => undefined, }, ]; // This is a contrived example of the dataArray as this will normally be retried via an API const dataArray = ref<BentoDatagridDataItem[]>([ { id: '03c0a799-1ced-4017-aea3-0cebb0106335', name: 'Shepherd Kane', payment: 160405, company: 'VURBO', registered: '2023-06-30T13:56:09.498Z', tags: ['deserunt', 'et', 'esse'], reference: 'UnbQaUncf3eR1D8XUBqn_UnbQaUncf3eR1D8XUBqn_UnbQaUncf3eR1D8XUBqn', paymentStatus: 1, countryCode: BentoCountryCode.NL, }, { id: 'b6d4f1fd-b1f6-40a6-a443-f785c89604ef', name: 'Santos Palmer', payment: 163500, company: 'POLARAX', registered: '2023-04-28T13:11:09.498Z', tags: ['et', 'Lorem', 'sint'], reference: 'IxUZ9FsEPCZ9dFFPpI9C', paymentStatus: 2, countryCode: BentoCountryCode.BE, }, ]); </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDataGrid, BentoDataGridTemplate, }, props: Object.keys(argTypes), template: ` <bento-data-grid-template v-bind="args"> <template #infoIconTooltipContent>Test</template> <template #tab-1><bento-data-grid v-bind="dataGrid1Props" :filters="filters" :filter-values.sync="filterValues" :selection.sync="selection" column-panel /></template> <template #tab-2><bento-data-grid v-bind="dataGrid2Props" /></template> <template #inspector-content>Hello</template> </bento-data-grid-template> `, setup(props) { const args = isVue2 ? props : _args; const filters = ref<BentoFilterBarModel>(args?.filters ?? FILTERS); const filterValues = ref<BentoFilterValues>(args?.filterValues ?? FILTER_VALUES); const selection = ref(DATA_GRID_1_ARGS.selection); const dataGrid1Props = DATA_GRID_1_ARGS; const dataGrid2Props = DATA_GRID_2_ARGS; return { // Values args, dataGrid1Props, dataGrid2Props, filters, filterValues, selection, }; }, }), args: { header: HEADER_PROPS, tabs: TABS_ARGS, inspector: INSPECTOR_ARGS, }, parameters: storybookDocsParameter(defaultCode), }; const additionalContentCode = ` <bento-data-grid-template :header="${JSON.stringify(HEADER_PROPS_DOCS)}" :tabs="${JSON.stringify( TABS_ARGS )}" sticky-tabs> <template #additionalContent> Your additional content/component here </template> <template #tab-1> <bento-data-grid :columns="${JSON.stringify(DEFAULT_COLUMNS)}" :data="dataArray" :pagination="${JSON.stringify(PAGINATION_DOCS)}" @navigate="clickNavigate" /> </template> <template #tab-2> <bento-data-grid :columns="${JSON.stringify(DEFAULT_COLUMNS)}" :data="dataArray" :filter-search-term.sync="searchTerm" :filters="${FILTERS_DOCS}" :filter-values.sync="${FILTER_VALUES_DOCS}" @filter-search-clear="onSearchCleared" @filter-search-input="onSearchInput" /> </template> </bento-data-grid-template> `; export const withAdditionalContent: Story = { render: (_args, { argTypes }) => ({ components: { BentoCountry, BentoDataGrid, BentoDataGridTemplate, BentoStatus, BentoSummaryGrid, BentoSummaryGridItemAmount, BentoSummaryGridItemCustom, }, props: Object.keys(argTypes), template: ` <bento-data-grid-template v-bind="args"> <template #additionalContent> <bento-summary-grid> <template #cell-1-1> <bento-summary-grid-item-custom title="Title" info-icon-tooltip-text="Text for icon" > <bento-status variant="green"> Status </bento-status> </bento-summary-grid-item-custom> </template> <template #cell-1-2> <bento-summary-grid-item-amount title="Title" label="€200.00" secondary-label="/ day" info-icon-tooltip-text="Text for icon" copy="Copy this to clipboard" /> </template> <template #cell-1-3> <bento-summary-grid-item-custom title="Title" info-icon-tooltip-text="Text for icon" > <bento-country :code="BentoCountryCode.NL" /> </bento-summary-grid-item-custom> </template> </bento-summary-grid> </template> <template #tab-1><bento-data-grid v-bind="dataGrid1Props" :filters="filters" :filter-values.sync="filterValues" /></template> <template #tab-2><bento-data-grid v-bind="dataGrid2Props" /></template> </bento-data-grid-template> `, setup(props) { const args = isVue2 ? props : _args; const filters = ref<BentoFilterBarModel>(args?.filters ?? FILTERS); const filterValues = ref<BentoFilterValues>(args?.filterValues ?? FILTER_VALUES); const dataGrid1Props = DATA_GRID_1_ARGS; const dataGrid2Props = DATA_GRID_2_ARGS; return { // Values args, dataGrid1Props, dataGrid2Props, filters, filterValues, // Enums BentoCountryCode, }; }, }), args: { header: HEADER_PROPS, tabs: TABS_ARGS, }, parameters: storybookDocsParameter(additionalContentCode), }; const singularDataGridCode = ` <bento-data-grid-template :header="${JSON.stringify(HEADER_PROPS)}" sticky-tabs> <bento-data-grid :columns="${JSON.stringify(DEFAULT_COLUMNS)}" :data="dataArray" :pagination="${JSON.stringify(PAGINATION_DOCS)}" @navigate="clickNavigate" :filter-search-term.sync="searchTerm" :filters="${FILTERS_DOCS}" :filter-values.sync="${FILTER_VALUES_DOCS}" @filter-search-clear="onSearchCleared" @filter-search-input="onSearchInput" /> </bento-data-grid-template> `; export const singularDataGrid: Story = { render: (_args, { argTypes }) => ({ components: { BentoDataGrid, BentoDataGridTemplate }, props: Object.keys(argTypes), template: ` <bento-data-grid-template v-bind="args"> <bento-data-grid v-bind="dataGridProps" :filters="filters" :filter-values.sync="filterValues" /> </bento-data-grid-template> `, setup(props) { const args = isVue2 ? props : _args; const filters = ref<BentoFilterBarModel>(args?.filters ?? FILTERS); const filterValues = ref<BentoFilterValues>(args?.filterValues ?? FILTER_VALUES); const dataGridProps = DATA_GRID_1_ARGS; return { // Values args, dataGridProps, filters, filterValues, }; }, }), args: { header: HEADER_PROPS, }, parameters: storybookDocsParameter(singularDataGridCode), }; const inspectorCode = ` <template> <bento-data-grid-template :header="header" :inspector="computedInspectorProps" @update:is-open:inspector="isInspectorOpen = $event" @update:active-page:inspector="inspectorActivePage = $event" > <template #default> <bento-data-grid :columns="columns" :data="dataArray" /> </template> <template #inspector-content> <div style="padding: 1rem;"> <bento-typography variant="title" el="h3"> Details for: {{ inspectorTitle }} </bento-typography> </div> </template> </bento-data-grid-template> </template> <script setup lang="ts"> import { ref, computed, onMounted } from 'vue'; import { BentoDataGridTemplate, BentoDataGrid, BentoTypography, } from '@adyen/bento-vue2'; import type { BentoDataGridTemplateHeader, BentoColumn, BentoDatagridDataItem } from '@adyen/bento-vue3'; const isInspectorOpen = ref(true); const inspectorTitle = ref('Shepherd Kane'); const inspectorActivePage = ref('id-1'); const pageFocusAnchorRef = ref<HTMLElement | null>(null); const dataArray = ref([ { id: '1', name: 'Shepherd Kane', company: 'Company 1', payment: 1604.05 }, { id: '2', name: 'Santos Palmer', company: 'Company 2', payment: 1635.00 }, ]); const openInspector = (item) => { inspectorTitle.value = item.name as string; isInspectorOpen.value = true; inspectorActivePage.value = item.id as string; const row = document.querySelector(\`[role="row"][aria-rowindex="\${item.rowIndex + 1}"]\`); pageFocusAnchorRef.value = row?.querySelector('[role="gridcell"]') as HTMLElement; }; const columns = computed<BentoColumn[]>(() => [ { field: 'name', label: 'Name', cellActions: [{ variant: 'open', event: openInspector }], }, { field: 'payment', label: 'Payment (€)', width: 200, }, ]); const header = ref<BentoDataGridTemplateHeader>({ title: 'Payments', infoIconTooltipText: 'Click the > icon on a row to open the inspector.', }); const computedInspectorProps = computed(() => ({ isOpen: isInspectorOpen.value, title: inspectorTitle.value, activePage: inspectorActivePage.value, pageFocusAnchor: pageFocusAnchorRef.value, })); <script> `; export const withInspector: Story = { render: (_args, { argTypes }) => ({ components: { BentoDataGrid, BentoDataGridTemplate, BentoTypography, BentoButton, }, props: Object.keys(argTypes), template: ` <bento-data-grid-template v-bind="args" :inspector="computedInspectorProps" @update:is-open:inspector="isInspectorOpen = $event" @update:active-page:inspector="inspectorActivePage = $event" > <template #default> <bento-data-grid v-bind="dataGridProps" :filters="dataGridFilters" :filter-values.sync="dataGridFilterValues" /> </template> <template #inspector-content> <bento-typography v-for="i in 10" :key="i" style="padding: 5px"> {{ inspectorContent }} </bento-typography> </template> </bento-data-grid-template> `, setup(props) { const args = isVue2 ? props : _args; const isInspectorOpen = ref(args.inspector.isOpen); const inspectorTitle = ref(args.inspector.title); const inspectorActivePage = ref(''); const dataGridFilters = ref<BentoFilterBarModel>(args?.filters ?? FILTERS); const dataGridFilterValues = ref<BentoFilterValues>(args?.filterValues ?? []); const inspectorContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; const cellWithActions = { ...DEFAULT_COLUMNS[0], cellActions: [{ variant: 'open', event: item => openInspector(item) }], } satisfies BentoColumn; const columnsWithActions: Array<BentoColumn> = [cellWithActions, ...DEFAULT_COLUMNS.slice(1, 2)]; const dataGridProps = { ...DATA_GRID_1_ARGS, columns: columnsWithActions }; const pageFocusAnchorRef = ref<HTMLElement | null>(null); // Find the element after the component has mounted in the browser onMounted(() => { pageFocusAnchorRef.value = document.body .querySelector('[role="row"][aria-rowindex="1"]') .querySelectorAll('[role="gridcell"]')[0] as HTMLElement; }); const openInspector = item => { inspectorTitle.value = item.name; isInspectorOpen.value = true; inspectorActivePage.value = item.name; pageFocusAnchorRef.value = document.body .querySelector(`[role="row"][aria-rowindex="${item.id}"]`) .querySelectorAll('[role="gridcell"]')[0] as HTMLElement; }; const computedInspectorProps = computed(() => ({ ...args.inspector, isOpen: isInspectorOpen.value, title: inspectorTitle.value, activePage: inspectorActivePage.value, pageFocusAnchor: pageFocusAnchorRef.value, })); return { args, dataGridProps, dataGridFilters, dataGridFilterValues, isInspectorOpen, inspectorActivePage, computedInspectorProps, inspectorContent, openInspector, }; }, }), args: { header: HEADER_PROPS, inspector: { title: DATA_GRID_1_DATA[0].name, isOpen: true, activePage: DATA_GRID_1_DATA[0].name, }, }, parameters: storybookDocsParameter(inspectorCode), }; export const withHeaderWithViews: Story = { render: (_args, { argTypes }) => ({ components: { BentoDataGrid, BentoDataGridTemplate, BentoHeaderWithViews, }, props: Object.keys(argTypes), template: ` <bento-data-grid-template v-bind="args"> <template #header> <bento-header-with-views :actions="headerActions" description="Description" title="Page Title" :hasChanges="false" skipUnsavedChangesText="Don’t show this message again" :views="headerViews" /> </template> <template #infoIconTooltipContent>Test</template> <template #tab-1><bento-data-grid v-bind="dataGrid1Props" :filters="filters" :filter-values.sync="filterValues" column-panel /></template> <template #tab-2><bento-data-grid v-bind="dataGrid2Props" /></template> <template #inspector-content>Hello</template> </bento-data-grid-template> `, setup(props) { const args = isVue2 ? props : _args; const filters = ref<BentoFilterBarModel>(args?.filters ?? FILTERS); const filterValues = ref<BentoFilterValues>(args?.filterValues ?? FILTER_VALUES); const dataGrid1Props = DATA_GRID_1_ARGS; const dataGrid2Props = DATA_GRID_2_ARGS; const headerViews: Array<BentoHeaderWithViewsItem> = [ { icon: 'stack', iconColor: 'primary', label: 'View 1', }, { icon: 'stack', iconColor: 'primary', label: 'View 2', }, ]; const headerActions = [ { title: 'Primary action', }, { title: 'Secondary action', }, ]; return { // Values args, dataGrid1Props, dataGrid2Props, filters, filterValues, headerActions, headerViews, }; }, }), args: { tabs: TABS_ARGS, inspector: INSPECTOR_ARGS, }, parameters: storybookDocsParameter(DataGridTemplateWithHeaderWithViews), };