@adyen/bento-mcp 0.1.4 → 0.2.1

package/dist/assets/icons.json

@@ -0,0 +1,415 @@
+[
+  "4-people",
+  "accessibility",
+  "account-switch",
+  "accounts",
+  "adyen-a-filled",
+  "adyen-giving",
+  "airplane",
+  "alternative",
+  "android",
+  "angle-right",
+  "angled-left",
+  "antenna",
+  "api-explorer",
+  "apple",
+  "arrow-bottom",
+  "arrow-bottom-small",
+  "arrow-circle-down",
+  "arrow-circle-down-filled",
+  "arrow-circle-left",
+  "arrow-circle-left-filled",
+  "arrow-circle-right",
+  "arrow-circle-right-filled",
+  "arrow-circle-up",
+  "arrow-circle-up-filled",
+  "arrow-diagonal-down",
+  "arrow-diagonal-down-small",
+  "arrow-down-up",
+  "arrow-left",
+  "arrow-left-right",
+  "arrow-left-small",
+  "arrow-right",
+  "arrow-right-small",
+  "arrow-top",
+  "arrow-top-small",
+  "arrow-up-down-sort",
+  "artificial-intelligence-ai",
+  "artificial-intelligence-ai-filled",
+  "attachment",
+  "backspace",
+  "backspace-filled",
+  "bag",
+  "balance-account",
+  "balance-platform",
+  "bank",
+  "bank-in",
+  "bank-in-up",
+  "bank-out",
+  "bank-out-up",
+  "battery-1",
+  "battery-2",
+  "battery-3",
+  "battery-empty",
+  "bin",
+  "bin-filled",
+  "biometric-thumb",
+  "blocked",
+  "blog",
+  "book",
+  "book-open",
+  "box-code",
+  "breadcrumb",
+  "browser",
+  "bucket",
+  "calendar",
+  "calendar-7",
+  "capital",
+  "capslock",
+  "car",
+  "card-lock",
+  "card-stack",
+  "cash",
+  "cash-stack",
+  "certificate",
+  "chain-1",
+  "chain-2",
+  "channels",
+  "checklist",
+  "checkmark",
+  "checkmark-circle",
+  "checkmark-circle-fill",
+  "checkmark-circle-small",
+  "checkmark-circle-small-fill",
+  "checkmark-small",
+  "checkmark-square",
+  "checkmark-square-fill",
+  "chevron-down",
+  "chevron-down-small",
+  "chevron-left",
+  "chevron-left-small",
+  "chevron-right",
+  "chevron-right-small",
+  "chevron-up",
+  "chevron-up-small",
+  "chevrons-down",
+  "chevrons-left",
+  "chevrons-right",
+  "chevrons-up",
+  "chip",
+  "chip-2",
+  "circle",
+  "circle-filled",
+  "circle-small",
+  "circle-small-filled",
+  "click",
+  "clock",
+  "cloud",
+  "code-1",
+  "code-2",
+  "code-3",
+  "coins",
+  "collapse",
+  "collection",
+  "contract",
+  "copy",
+  "creditcard",
+  "creditcard-chip",
+  "cross",
+  "cross-circle",
+  "cross-circle-fill",
+  "cross-circle-fill-small",
+  "cross-circle-small",
+  "cross-small",
+  "currency-dollar",
+  "customer-insights",
+  "dashboard",
+  "debit-card",
+  "diamond",
+  "direct-debit",
+  "discount",
+  "diversity",
+  "dna",
+  "document-1",
+  "document-lines",
+  "document-minus",
+  "document-person",
+  "document-plus",
+  "document-stack",
+  "dot",
+  "dot-small",
+  "dot-tiny",
+  "double-checkmark-small",
+  "down-up",
+  "download",
+  "edit-1",
+  "edit-2",
+  "edited",
+  "education",
+  "embedded-finance",
+  "emoticon-happy",
+  "enter-key",
+  "exit",
+  "expand",
+  "expand-vertically",
+  "experiments-1",
+  "experiments-2",
+  "external-link",
+  "external-link-small",
+  "facebook-small",
+  "filter",
+  "finance-monitoring",
+  "folder",
+  "folder-fill",
+  "food",
+  "food-beverage",
+  "food-beverage-filled",
+  "freeze",
+  "gambling",
+  "gaming",
+  "gift",
+  "gift-card",
+  "gift-card-activate",
+  "gift-card-cash-out",
+  "gift-card-error",
+  "gift-card-load",
+  "gift-card-reversed",
+  "global-acquiring",
+  "globe",
+  "globe-2",
+  "globe-small",
+  "grab",
+  "graph",
+  "graph-dots",
+  "graph-up",
+  "gym",
+  "hand-rock",
+  "hashtag",
+  "headquarter",
+  "heart",
+  "heart-fill",
+  "help-center",
+  "hide",
+  "history",
+  "hospitality",
+  "hotel",
+  "hourglass",
+  "idea",
+  "image",
+  "info",
+  "info-filled",
+  "inheritence",
+  "intelligent-money-movement",
+  "key",
+  "laptop",
+  "leaf",
+  "letter-i",
+  "letter-t",
+  "library",
+  "lightning",
+  "lightning-filled",
+  "line-height",
+  "linkedin-small",
+  "loading-lines",
+  "loading-small",
+  "local-payment-methods",
+  "location",
+  "location-2",
+  "location-2-filled",
+  "lock",
+  "lock-2",
+  "lock-3",
+  "lock-4",
+  "lock-5",
+  "lock-small",
+  "machine-learning",
+  "magnetic-swipe",
+  "mail",
+  "managed-risk",
+  "marketplace-laptop",
+  "menu",
+  "menu-2",
+  "message",
+  "microphone",
+  "minus",
+  "minus-circle",
+  "minus-circle-filled",
+  "minus-multiple",
+  "minus-small",
+  "minus-square",
+  "minus-square-filled",
+  "mobile",
+  "monitor",
+  "monitoring",
+  "monitoring-filled",
+  "move",
+  "navigation-collapse",
+  "navigation-expand",
+  "new-tab-link",
+  "news",
+  "notification",
+  "number-1",
+  "number-1-filled",
+  "number-2",
+  "number-2-filled",
+  "number-3",
+  "number-3-filled",
+  "nyc1",
+  "omnichannel-experiences",
+  "on-demand-monitor",
+  "options-horizontal",
+  "options-vertical",
+  "paint-roller",
+  "paper-bag",
+  "partner",
+  "pauze",
+  "pay-by-link",
+  "pay-by-link-plane",
+  "pay-later",
+  "payment-method-types",
+  "payment-methods",
+  "payout",
+  "person",
+  "person-circle",
+  "pie-chart",
+  "pin",
+  "platform-business-structure",
+  "platforms",
+  "play",
+  "play-circle",
+  "play-circle-filled",
+  "play-filled",
+  "plugins",
+  "plus",
+  "plus-circle",
+  "plus-circle-filled",
+  "plus-multiple",
+  "plus-small",
+  "plus-square",
+  "plus-square-filled",
+  "podcast",
+  "printer",
+  "printer-filled",
+  "prize",
+  "product-adyen",
+  "prohibited",
+  "prohibited-fill",
+  "radar",
+  "reconciliation",
+  "recurring",
+  "redo",
+  "refresh",
+  "refresh-small",
+  "refresh-small-square",
+  "refresh-small-square-filled",
+  "refund",
+  "restricted",
+  "restricted-fill",
+  "retail",
+  "revenue-accelerate",
+  "revenue-protect",
+  "revert-small-square",
+  "revert-small-square-filled",
+  "rocket",
+  "rules",
+  "save",
+  "scalability",
+  "search",
+  "search-list",
+  "search-small",
+  "section",
+  "settings",
+  "settings-filled",
+  "share",
+  "share-2",
+  "shield",
+  "shield-checkmark",
+  "shopping-cart",
+  "show",
+  "side-peak-left",
+  "side-peak-right",
+  "size",
+  "skip-down",
+  "skip-left",
+  "skip-right",
+  "skip-up",
+  "sleep",
+  "sliders-1",
+  "sliders-2",
+  "solution-data",
+  "solution-payments",
+  "solution-platform-engineering",
+  "solution-platforms-financial-services",
+  "sort-ascending",
+  "sort-descending",
+  "sound",
+  "square",
+  "square-6-fill",
+  "square-8-fill",
+  "square-fill",
+  "square-small",
+  "square-small-fill",
+  "stack",
+  "star",
+  "star-filled",
+  "star-half-filled",
+  "stop",
+  "store",
+  "striketrough",
+  "sun",
+  "support",
+  "table",
+  "tablet",
+  "tag",
+  "target",
+  "terminal-1",
+  "terminal-2",
+  "terminal-3",
+  "text-bold",
+  "text-bulet-list",
+  "text-italic",
+  "text-numbered-list",
+  "text-underline",
+  "thumb-down",
+  "thumb-up",
+  "timer",
+  "tools",
+  "tooltip",
+  "tooltip-filled",
+  "topic",
+  "touch",
+  "translation",
+  "travel-bag",
+  "triangle",
+  "triangle-down",
+  "triangle-fill",
+  "triangle-left",
+  "triangle-right",
+  "triangle-up",
+  "turn-left",
+  "turn-right",
+  "twitter-small",
+  "undo",
+  "unified-commerce",
+  "unlock",
+  "up-down",
+  "uplift",
+  "upload",
+  "virtual-card",
+  "wallet",
+  "warning",
+  "warning-circle",
+  "warning-circle-fill",
+  "warning-diamond",
+  "warning-diamond-filled",
+  "warning-filled",
+  "webcam",
+  "webinar",
+  "weight",
+  "wireless",
+  "world",
+  "wrench",
+  "wrench-filled",
+  "zoom-in",
+  "zoom-out"
+]

package/dist/assets/index.ts

@@ -1 +1 @@
-import BentoVue from './install'; export * from './components/accordion'; export * from './components/action-bar'; export * from './components/ai-tag'; export * from './components/alert'; export * from './components/anchor-scroller'; export * from './components/avatar'; export * from './components/button'; export * from './components/dashed-underline'; export * from './components/data-grid'; export * from './components/card'; export * from './components/date-picker'; export * from './components/date-range-picker'; export * from './components/dropdown'; export * from './components/checkbox'; export * from './components/chip'; export * from './components/click-outside'; export * from './components/code-snippet'; export * from './components/country'; export * from './components/currency'; export * from './components/date'; export * from './components/divider'; export * from './components/empty-state'; export * from './components/file-uploader'; export * from './components/filter-bar'; export * from './components/form-layout'; export * from './components/header-with-views'; export * from './components/image'; export * from './components/info-icon'; export * from './components/input-field'; export * from './components/input-field-password'; export * from './components/input-field-phone-number'; export * from './components/inspector'; export * from './components/layout'; export * from './components/loading-indicator'; export * from './components/link'; export * from './components/menu'; export * from './components/modal'; export * from './components/modal-fullscreen'; export * from './components/header'; export * from './components/pagination'; export * from './components/payment-method'; export * from './components/popover'; export * from './components/promo-banner'; export * from './components/radio-group'; export * from './components/rich-text-editor'; export * from './components/search-bar'; export * from './components/secondary-nav'; export * from './components/selection-card'; export * from './components/segmented-control'; export * from './components/sidepanel'; export * from './components/status'; export * from './components/stepper'; export * from './components/structured-list'; export * from './components/summary-grid'; export * from './components/tabs'; export * from './components/tag'; export * from './components/textarea'; export * from './components/timeline'; export * from './components/toast'; export * from './components/toggle'; export * from './components/tutorial'; export * from './components/typography'; // Export Composables export * from './composables/use-bento-base-filter'; export * from './composables/use-bento-currency'; export * from './composables/use-bento-theme'; export * from './composables/use-bento-toast-controller'; export * from './composables/use-click-outside'; export * from './composables/use-form-validate'; // Export Templates export * from './templates/dashboard-template'; export * from './templates/data-grid-template'; // Export Types export * from './types'; // Export Directives export * from './directives'; // AdlVue Plugin export default BentoVue; export { BentoTheme } from './install'; 
+import BentoVue from './install'; export * from './components/accordion'; export * from './components/action-bar'; export * from './components/ai-tag'; export * from './components/alert'; export * from './components/anchor-scroller'; export * from './components/avatar'; export * from './components/button'; export * from './components/dashed-underline'; export * from './components/data-grid'; export * from './components/card'; export * from './components/date-picker'; export * from './components/date-range-picker'; export * from './components/dropdown'; export * from './components/checkbox'; export * from './components/chip'; export * from './components/click-outside'; export * from './components/code-snippet'; export * from './components/country'; export * from './components/currency'; export * from './components/date'; export * from './components/divider'; export * from './components/empty-state'; export * from './components/file-uploader'; export * from './components/filter-bar'; export * from './components/form-layout'; export * from './components/header-with-views'; export * from './components/image'; export * from './components/info-icon'; export * from './components/input-field'; export * from './components/input-field-password'; export * from './components/input-field-phone-number'; export * from './components/inspector'; export * from './components/layout'; export * from './components/list'; export * from './components/loading-indicator'; export * from './components/link'; export * from './components/menu'; export * from './components/modal'; export * from './components/modal-fullscreen'; export * from './components/header'; export * from './components/pagination'; export * from './components/payment-method'; export * from './components/popover'; export * from './components/promo-banner'; export * from './components/radio-group'; export * from './components/rich-text-editor'; export * from './components/search-bar'; export * from './components/secondary-nav'; export * from './components/selection-card'; export * from './components/segmented-control'; export * from './components/sidepanel'; export * from './components/status'; export * from './components/stepper'; export * from './components/structured-list'; export * from './components/summary-grid'; export * from './components/tabs'; export * from './components/tag'; export * from './components/textarea'; export * from './components/timeline'; export * from './components/toast'; export * from './components/toggle'; export * from './components/tutorial'; export * from './components/typography'; // Export Composables export * from './composables/use-bento-base-filter'; export * from './composables/use-bento-currency'; export * from './composables/use-bento-theme'; export * from './composables/use-bento-toast-controller'; export * from './composables/use-click-outside'; export * from './composables/use-form-validate'; // Export Templates export * from './templates/dashboard-template'; export * from './templates/data-grid-template'; // Export Types export * from './types'; // Export Directives export * from './directives'; // AdlVue Plugin export default BentoVue; export { BentoTheme } from './install'; 

package/dist/assets/install.ts

@@ -0,0 +1 @@
+import installToast from './composables/use-bento-toast-controller/install'; import installTheme, { setTheme } from './composables/use-bento-theme/install'; import { deprecate } from './utils/ts/deprecate'; import { BentoTheme } from './composables/use-bento-theme/install.types'; import type { PluginObject } from 'vue'; interface BentoVuePlugin { theme?: BentoTheme; withToast?: boolean; withUtilityClasses?: boolean; withDesignTokensCSSInjection?: boolean; } const plugin: PluginObject<BentoVuePlugin> = { name: 'BentoVue', install: async ( Vue, { theme = BentoTheme.BENTO_LIGHT, withToast = false, withUtilityClasses = false, withDesignTokensCSSInjection = true, }: BentoVuePlugin ) => { installTheme(Vue); if (withToast) { installToast(Vue); } if (withDesignTokensCSSInjection) { deprecate( 'Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin', 'Please disable CSS injection by setting withDesignTokensCSSInjection to false in BentoVue plugin options as highlighted here:\nhttps://adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables', '2.0.0' ); // Make sure to put all awaited CSS imports below this point and not above! if (theme === BentoTheme.STYLEGUIDE) { await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css'); } else { await import('@adyen/bento-design-tokens/dist/css/bento/variables.css'); } if (withUtilityClasses) { await import('@adyen/bento-design-tokens/dist/css/bento/utility.css'); } } if (theme === BentoTheme.STYLEGUIDE) { setTheme(BentoTheme.STYLEGUIDE); } else if (theme === BentoTheme.BENTO_SYSTEM) { setTheme(BentoTheme.BENTO_SYSTEM); } else if (theme === BentoTheme.BENTO_DARK) { setTheme(BentoTheme.BENTO_DARK); } else if (theme === BentoTheme.BENTO) { deprecate('Using `BentoTheme.BENTO`', 'Please use `BentoTheme.BENTO_LIGHT` instead', '2.0.0'); setTheme(BentoTheme.BENTO_LIGHT); } else { setTheme(BentoTheme.BENTO_LIGHT); } }, }; export { BentoTheme }; export default plugin; 

package/dist/assets/tailwind/README.md

@@ -0,0 +1,89 @@
+# @adyen/bento-tailwind
+
+This package provides a convenient [Tailwind CSS](https://tailwindcss.com/) preset designed to seamlessly integrate
+Adyen's Bento design system into your projects through the use of utility classes.
+
+By using this preset, you get the best of both worlds:
+
+1.  **Full Tailwind Power:** Access to **all** the default Tailwind CSS utility classes you know and love. Nothing is
+    removed or fundamentally changed from the standard Tailwind experience.
+2.  **Bento Integration:** Adds utility classes derived from Bento's alias tokens—covering colors, spacing, animations,
+    borders, shadows, and more enabling you to apply Bento's defined styles using familiar Tailwind syntax.
+
+**Important:** This preset is designed to **complement**, not replace, the primary Bento UI component library (e.g.,
+`@adyen/bento-vue2`, `@adyen/bento-vue3`).
+
+Think of these utilities as tools for:
+
+- Applying spacing, layout (margins, padding, flexbox, grid) around standard Bento components.
+- Adding fundamental styles like colors, borders, animations, etc... to your own custom components or standard HTML
+  elements.
+- Rapidly prototyping new, custom UI elements that adhere to the Bento design system's look and feel.
+
+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.
+
+## Installation
+
+Install the package using npm (or your preferred package manager):
+
+```bash
+npm install @adyen/bento-tailwind
+```
+
+## Usage
+
+### 1. 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.
+
+#### Using a components package
+
+Adyen component packages (e.g. `@adyen/bento-vue3`) usually include styles automatically. To set a default theme
+(light/dark), see Adyen's
+[this guide](https://adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#setting-a-default-theme).
+
+#### Building a stand-alone static website
+
+Add the following lines to your project's main CSS file:
+
+```css
+/* This line imports the standard (base/light) theme styles */
+@import '@adyen/bento-design-tokens/dist/css/bento/variables.css';
+/* This line imports the dark theme styles.
+   To actually turn the dark theme on, you also need to add
+   the class "b-dark-theme" to the <body> element of your HTML page. */
+@import '@adyen/bento-design-tokens/dist/css/bento/variables-dark.css';
+```
+
+### 2. Install Tailwind Bento theme
+
+To integrate Bento styles and design tokens using the `@adyen/bento-tailwind` package.
+
+1. Run `npm install @adyen/bento-tailwind`
+
+2. Change your `main.css` to include the following
+
+```css
+/* 1. Define the order of your layers */
+@layer theme, base, components, utilities;
+
+/* 2. Only import utilities */
+@import 'tailwindcss/theme' layer(theme);
+@import 'tailwindcss/utilities' layer(utilities);
+/* 2. Tells tailwind where to look for utility classes */
+@source '../src/**/*.{vue,css,scss}';
+/* 3. Imports the bento tailwind theme configuration */
+@import '@adyen/bento-tailwind';
+```
+
+## Exploring available classes
+
+**Bento Custom Utilities:** To see the full range of custom utility classes added by this preset (e.g., specific Bento
+colors like `bg-secondary-active`, spacing units, etc.), please explore our
+**[Viewer Story](/story/welcome-tailwind--viewer)**.
+
+**Default Tailwind Utilities:** For documentation on the standard utility classes like `flex`, `grid`, `pt-4`,
+`text-center`, `rounded-lg`, etc., which are all included and work as expected, please refer to the official
+**[Tailwind CSS Documentation](https://v3.tailwindcss.com/docs/utility-first)**.

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

@@ -0,0 +1 @@
+import type { BentoTab } from '@/components/tabs'; import type { BentoHeader } from '@/components/header'; export type BentoDashboardTemplateTab = InstanceType<typeof BentoTab>['$props']; export type BentoDashboardTemplateHeader = InstanceType<typeof BentoHeader>['$props']; export interface BentoDashboardTemplateTabs { activeTabIndex?: number; tabs: Array<BentoDashboardTemplateTab>; } 

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 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], }; 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" @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 }); // 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" 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; return { // Values args, dataGrid1Props, dataGrid2Props, filters, filterValues, }; }, }), 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'; 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), }; 

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

@@ -0,0 +1 @@
+import { type Ref, type UnwrapRef } from 'vue'; import type { BentoTab } from '@/components/tabs'; import type { BentoHeader } from '@/components/header'; import { type BentoInspectorProps } from '@/components/inspector'; import { type Expand } from '@/types/prop-types'; export type BentoDataGridTemplateDataGrid = () => { additionalContentSlotRef?: Ref<UnwrapRef<HTMLDivElement>> | null; isDataGridTemplate: boolean; stickyAdditionalContent?: Ref<boolean>; stickyTabs: Ref<boolean>; tabsRef: Ref<UnwrapRef<HTMLDivElement>> | null; }; export type BentoDataGridTemplateTab = InstanceType<typeof BentoTab>['$props']; export type BentoDataGridTemplateHeader = InstanceType<typeof BentoHeader>['$props']; export interface BentoDataGridTemplateTabs { activeTabIndex?: number; tabs: Array<BentoDataGridTemplateTab>; } export type BentoDataGridTemplateInspector = Expand< Omit<BentoInspectorProps, 'activePage'> & { activePage: BentoInspectorProps['activePage']; } >;