@adyen/bento-vue3 1.25.0 → 1.27.0

package/dist/@types/components.d.ts

@@ -18,6 +18,8 @@ import {
     BentoCodeSnippet,
     BentoCountry,
     BentoCurrency,
+    BentoDashboardSection,
+    BentoDashboardTemplate,
     BentoDataGrid,
     BentoDataGridTemplate,
     BentoDate,
@@ -105,6 +107,8 @@ declare module 'vue' {
         BentoCountry: typeof BentoCountry;
         BentoCodeSnippet: typeof BentoCodeSnippet;
         BentoCurrency: typeof BentoCurrency;
+        BentoDashboardSection: typeof BentoDashboardSection;
+        BentoDashboardTemplate: typeof BentoDashboardTemplate;
         BentoDataGrid: typeof BentoDataGrid;
         BentoDataGridTemplate: typeof BentoDataGridTemplate;
         BentoDate: typeof BentoDate;

package/dist/@types/packages/core/src/utils/ts/storybook.d.ts

@@ -0,0 +1,12 @@
+export declare const storybookDocsParameter: (codeSource: string, language?: string) => {
+    docs: {
+        source: {
+            code: string;
+            language: string;
+        };
+    };
+};
+export declare const getPokemonFromApi: (pokemonName?: string) => Promise<{
+    label: any;
+    value: any;
+}[]>;

package/dist/@types/packages/vue2/src/components/button/components/button-actions/button-actions.types.d.ts

@@ -7,6 +7,7 @@ export interface BentoButtonActionObject extends BentoButtonProps {
     iconLeft?: VueNodeElement;
     iconRight?: VueNodeElement;
     state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;
+    iconOnly?: boolean;
 }
 export type BentoButtonActionsList = Array<BentoButtonActionObject>;
 export declare enum BentoButtonActionsLayoutBasic {

package/dist/@types/packages/vue2/src/components/button/components/button-actions/button-actions.vue.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
 import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';
 /**
- * ButtonActions component component manages a set of actions a user can choose from by displaying a group of buttons.
+ * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons.
  *
  * @example
  * import { BentoButtonActions } from '@adyen/bento-vue2';

package/dist/@types/packages/vue2/src/components/code-snippet/code-snippet.types.d.ts

@@ -13,7 +13,8 @@ export declare enum BentoCodeSnippetSupportedLanguage {
     JSON = "json",
     XML = "xml",
     JAVA = "java",
-    JAVASCRIPT = "javascript"
+    JAVASCRIPT = "javascript",
+    PYTHON = "python"
 }
 export declare enum BentoCodeSnippetEvent {
     ACTION = "action",

package/dist/@types/packages/vue2/src/components/code-snippet/code-snippet.vue.d.ts

@@ -28,7 +28,7 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
      * Language name for syntax highlighting rules
      */
     lang: {
-        type: PropType<"json" | "xml" | "java" | "javascript" | BentoCodeSnippetSupportedLanguage>;
+        type: PropType<"json" | "xml" | "java" | "javascript" | "python" | BentoCodeSnippetSupportedLanguage>;
         default: BentoCodeSnippetSupportedLanguage;
         validator: (value: BentoCodeSnippetSupportedLanguage) => boolean;
     };
@@ -117,7 +117,7 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
      * Language name for syntax highlighting rules
      */
     lang: {
-        type: PropType<"json" | "xml" | "java" | "javascript" | BentoCodeSnippetSupportedLanguage>;
+        type: PropType<"json" | "xml" | "java" | "javascript" | "python" | BentoCodeSnippetSupportedLanguage>;
         default: BentoCodeSnippetSupportedLanguage;
         validator: (value: BentoCodeSnippetSupportedLanguage) => boolean;
     };
@@ -181,7 +181,7 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     content: string;
     loading: boolean;
     expandable: boolean;
-    lang: "json" | "xml" | "java" | "javascript" | BentoCodeSnippetSupportedLanguage;
+    lang: "json" | "xml" | "java" | "javascript" | "python" | BentoCodeSnippetSupportedLanguage;
     langLabel: string;
     editable: boolean;
     actionable: boolean;

package/dist/@types/packages/vue2/src/components/code-snippet/utils/get-lang-loader.d.ts

@@ -3,6 +3,7 @@ import { json } from '@codemirror/lang-json';
 import { xml } from '@codemirror/lang-xml';
 import { javascript } from '@codemirror/lang-javascript';
 import { java } from '@codemirror/lang-java';
+import { python } from '@codemirror/lang-python';
 /**
  * Returns a language loder for `CodeMirror`.
  * Supported languages: json, xml, javascript & java
@@ -10,4 +11,4 @@ import { java } from '@codemirror/lang-java';
  * @param language Language to be used
  * @returns Language configuration loader to be used in codemirror
  */
-export declare const getLangLoader: (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => () => Promise<typeof json | typeof xml | typeof javascript | typeof java>;
+export declare const getLangLoader: (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => () => Promise<typeof json | typeof xml | typeof javascript | typeof java | typeof python>;

package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-cell/data-grid-cell.vue.d.ts

@@ -197,9 +197,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
 }, {
     condensed: boolean;
     draggingColumns: any;
+    isMeasuringColumnWidths: boolean;
     getDataItemId: BentoDatagridGetDataItemIdFn;
     isDataItemDisabled: BentoDatagridIsDataItemDisabledFn;
-    isMeasuringColumnWidths: boolean;
 }>, Record<string, (_: {
     item: BentoDatagridDataItem;
 }) => any>>;

package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.types.d.ts

@@ -3,12 +3,20 @@ import type { BentoMenuItem } from "../../../menu/components";
 import type { BentoDatagridDataItem } from "../..";
 import { OmitStrict } from "../../../../types";
 export type BentoColumnCellActionVariant = 'copy' | 'edit' | 'open' | 'more';
+export type BentoColumnCellActionEvent = (rowDataItem: BentoDatagridDataItem, columnKey: string) => void;
+export type BentoColumnCellActionMenuItem = {
+    /**
+     * @deprecated This property will be removed in version 2.0, please use `event` instead.
+     */
+    handler?: BentoMenuItem['handler'];
+    event?: BentoColumnCellActionEvent;
+} & OmitStrict<BentoMenuItem, 'handler'>;
 export type BentoColumnCellAction = OmitStrict<BentoButtonActionObject, 'variant' | 'event' | 'title' | 'icon' | 'state'> & {
     title?: string;
-    event?: (rowDataItem: BentoDatagridDataItem, columnKey: string) => void;
+    event?: BentoColumnCellActionEvent;
     isShort?: true;
     variant?: BentoColumnCellActionVariant;
-    menuData?: BentoMenuItem[];
+    menuData?: BentoColumnCellActionMenuItem[];
     getCopyData?: (rowDataItem: BentoDatagridDataItem, columnKey: string) => string;
 };
 export type BentoColumnCellActions = BentoColumnCellAction[];

package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-columns/data-grid-columns.types.d.ts

@@ -18,6 +18,9 @@ export declare enum DatagridColumnsEvent {
     COLUMN_DRAG_END = "column-dragend",
     COLUMN_DROP = "column-drop"
 }
+export interface DatagridColumnsHeaderReferences {
+    [key: string]: HTMLDivElement | null;
+}
 /**
  * The Datagrid column dragging state.
  * @interface BentoDatagridDraggingColumnState

package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-columns/data-grid-columns.vue.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
 import { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridAllItemsSelectedState, BentoDatagridSortByColumn } from '../../data-grid.types';
-import { BentoDatagridDraggingColumnState } from './data-grid-columns.types';
-import { DatagridColumnHoveringState } from "../../composables/use-column-hovering";
+import { BentoDatagridDraggingColumnState, DatagridColumnsHeaderReferences } from './data-grid-columns.types';
+import type { DatagridColumnHoveringState } from "../../composables/use-column-hovering";
 /**
  * A component to display the BentoDataGrid columns
  *
@@ -103,7 +103,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     /**
      * Toggled to true when the DataGrid has auto width columns and is measuring the
      */
-    isMeasuringColunWidths: {
+    isMeasuringColumnWidths: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -157,7 +157,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
+}, {
+    columnHeaderRefs: import("../../../../../../vue3/node_modules/vue").Ref<DatagridColumnsHeaderReferences>;
+}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
     "column-resize": (column: {
         field: string;
         width: number;
@@ -248,7 +250,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     /**
      * Toggled to true when the DataGrid has auto width columns and is measuring the
      */
-    isMeasuringColunWidths: {
+    isMeasuringColumnWidths: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -328,7 +330,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     hasColumnPanel: boolean;
     hasFirstColumnPanelRightAligned: boolean;
     hasLeftOverflow: boolean;
-    isMeasuringColunWidths: boolean;
+    isMeasuringColumnWidths: boolean;
     isOnlyOneVisibleColumn: boolean;
     showFrozenColumnsSeparator: boolean;
     allItemsSelectedState: BentoDatagridAllItemsSelectedState;

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-calculate-column-width/use-calculate-column-width.d.ts

@@ -1,12 +1,15 @@
-import { Ref } from "../../../../../../vue3/node_modules/vue";
-import { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridData } from '../../data-grid.types';
-import { CalculateColumnWidthOptions } from './use-calculate-column-width.types';
-import { MaybeRef } from "../../../../types";
+import { type Ref } from "../../../../../../vue3/node_modules/vue";
+import type { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridData } from '../../data-grid.types';
+import type { CalculateColumnWidthOptions } from './use-calculate-column-width.types';
+import type { MaybeRef } from "../../../../types";
+import type { DatagridColumnsHeaderReferences } from '../../components/data-grid-columns/data-grid-columns.types';
 export declare const DEFAULT_COLUMN_WIDTH = 100;
 export declare const DEFAULT_COLUMN_MIN_WIDTH = 50;
 export declare const DATAGRID_SELECT_FIELD_NAME = "b-select";
 export declare const DATAGRID_SELECT_WIDTH = 32;
 export declare const DATAGRID_SELECT_WIDTH_WITH_SELECT_ALL_PAGES_ENABLED = 56;
+export declare const DATAGRID_CELL_OFFSET_INITIAL = 4;
+export declare const DATAGRID_CELL_OFFSET_PADDING = 16;
 /**
  * Calculates the width of the columns using width, minWidth and/or a fluid number.
  *
@@ -16,7 +19,7 @@ export declare const DATAGRID_SELECT_WIDTH_WITH_SELECT_ALL_PAGES_ENABLED = 56;
  * @param gridCellRefs An array of Ref for each one of the cells available by Column
  * @param options Optional options for the calculator to be aware of.
  */
-export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, newData: MaybeRef<BentoDatagridData>, bodyRef: MaybeRef<HTMLDivElement | undefined>, gridCellRefs: MaybeRef<{
+export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, newData: MaybeRef<BentoDatagridData>, bodyRef: MaybeRef<HTMLDivElement | undefined>, gridColumnsComponentRefs: MaybeRef<DatagridColumnsHeaderReferences>, gridCellRefs: MaybeRef<{
     [key: string]: HTMLDivElement[];
 }>, options?: CalculateColumnWidthOptions) => {
     columnDefs: import("../../../../../../vue3/node_modules/vue").ComputedRef<{
@@ -72,19 +75,32 @@ export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, n
             inverse?: boolean;
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
+            iconOnly?: boolean;
             title?: string;
-            event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-calculate-column-width/use-calculate-column-width.types.d.ts

@@ -6,6 +6,7 @@ export type FlexColumnLookup = Record<BentoColumn['field'], {
     frozen: boolean;
 }>;
 export interface CalculateColumnWidthOptions {
+    hasColumnPanel?: Ref<boolean>;
     hasSelectableColumn?: Ref<boolean>;
     hasSelectableAcrossPages?: Ref<boolean>;
 }

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-column-hovering/use-column-hovering.d.ts

@@ -29,19 +29,32 @@ export declare const useColumnHovering: (columnSets: Ref<DatagridConfigSettingsC
             inverse?: boolean;
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
+            iconOnly?: boolean;
             title?: string;
-            event?: (rowDataItem: import("../..").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-column-reorderer/use-column-reorderer.d.ts

@@ -37,19 +37,32 @@ export declare const useColumnReorderer: (columnsRef: MaybeRef<BentoColumn[]>, h
                 inverse?: boolean;
                 iconLeft?: object | Element | (object | Element)[];
                 iconRight?: object | Element | (object | Element)[];
+                iconOnly?: boolean;
                 title?: string;
-                event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 isShort?: true;
                 variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
                 menuData?: {
+                    handler?: () => void;
+                    event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                     text: string;
-                    handler: () => void;
-                    secondaryText?: string;
-                    items?: any[];
+                    critical?: boolean;
                     disabled?: boolean;
-                    chevron?: boolean;
                     icon?: object | Element | (object | Element)[];
-                    critical?: boolean;
+                    items?: {
+                        text: string;
+                        handler: () => void;
+                        secondaryText?: string;
+                        items?: any[];
+                        disabled?: boolean;
+                        chevron?: boolean;
+                        icon?: object | Element | (object | Element)[];
+                        critical?: boolean;
+                        indent?: boolean;
+                        addDivider?: boolean;
+                    }[];
+                    secondaryText?: string;
+                    chevron?: boolean;
                     indent?: boolean;
                     addDivider?: boolean;
                 }[];
@@ -84,19 +97,32 @@ export declare const useColumnReorderer: (columnsRef: MaybeRef<BentoColumn[]>, h
                 inverse?: boolean;
                 iconLeft?: object | Element | (object | Element)[];
                 iconRight?: object | Element | (object | Element)[];
+                iconOnly?: boolean;
                 title?: string;
-                event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 isShort?: true;
                 variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
                 menuData?: {
+                    handler?: () => void;
+                    event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                     text: string;
-                    handler: () => void;
-                    secondaryText?: string;
-                    items?: any[];
+                    critical?: boolean;
                     disabled?: boolean;
-                    chevron?: boolean;
                     icon?: object | Element | (object | Element)[];
-                    critical?: boolean;
+                    items?: {
+                        text: string;
+                        handler: () => void;
+                        secondaryText?: string;
+                        items?: any[];
+                        disabled?: boolean;
+                        chevron?: boolean;
+                        icon?: object | Element | (object | Element)[];
+                        critical?: boolean;
+                        indent?: boolean;
+                        addDivider?: boolean;
+                    }[];
+                    secondaryText?: string;
+                    chevron?: boolean;
                     indent?: boolean;
                     addDivider?: boolean;
                 }[];

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-config-settings/use-config-settings.d.ts

@@ -43,19 +43,32 @@ export declare const useConfigSettings: (columnsRef: MaybeRef<BentoColumn[]>, em
             inverse?: boolean;
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
+            iconOnly?: boolean;
             title?: string;
-            event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-resizer.d.ts

@@ -46,19 +46,32 @@ export declare const useResizer: (columns: Ref<BentoColumn[]>, emit: (event: Dat
             inverse?: boolean;
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
+            iconOnly?: boolean;
             title?: string;
-            event?: (rowDataItem: import("../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

package/dist/@types/packages/vue2/src/components/data-grid/data-grid.types.d.ts

@@ -30,7 +30,8 @@ export declare enum BentoDatagridStyleState {
     SCROLL = "scroll",
     STICKY_FILTERS = "sticky-filters",
     OVERFLOW_SHADOW_LEFT = "overflow-shadow-left",
-    OVERFLOW_SHADOW_RIGHT = "overflow-shadow-right"
+    OVERFLOW_SHADOW_RIGHT = "overflow-shadow-right",
+    NO_SPACING_TOP = "no-spacing-top"
 }
 export declare enum BentoDatagridSortDirection {
     ASCENDING = "asc",

package/dist/@types/packages/vue2/src/components/data-grid/data-grid.vue.d.ts

@@ -102,8 +102,14 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             description: {
                 type: StringConstructor;
                 default: any;
-            };
+            }; /**
+             * If resize is enabled
+             */
             headingEl: {
+                /**
+                 * A customisable method to determine if a row is not selectable.
+                 * The default is that every row is selectable.
+                 */
                 type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">;
                 default: any;
                 validator: (value: import("../typography").BentoTypographyElement) => boolean;
@@ -222,29 +228,6 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             };
             hasNext: {
                 type: BooleanConstructor;
-                /**
-                 * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
-                 *
-                 * @example
-                 * import { BentoDataGrid } from '@adyen/bento-vue2';
-                 *
-                 * export default {
-                 *     components: { BentoDataGrid },
-                 *     template: `
-                 *          <bento-data-grid
-                 *               :data="[
-                 *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
-                 *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
-                 *               ]"
-                 *               :columns="[
-                 *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
-                 *                  { field: 'company', label: 'Reference' },
-                 *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
-                 *                ]"
-                 *          />
-                 *     `
-                 * }
-                 */
                 default: any;
             };
             hidePageSize: {
@@ -321,6 +304,13 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
         type: PropType<BentoDatagridDataItemId[]>;
         default: () => any[];
     };
+    /**
+     * Renders the data grid with no top spacing, to render inside containers that already have spacing
+     */
+    noSpacingTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.
      * It does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.
@@ -422,8 +412,14 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             description: {
                 type: StringConstructor;
                 default: any;
-            };
+            }; /**
+             * If resize is enabled
+             */
             headingEl: {
+                /**
+                 * A customisable method to determine if a row is not selectable.
+                 * The default is that every row is selectable.
+                 */
                 type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">;
                 default: any;
                 validator: (value: import("../typography").BentoTypographyElement) => boolean;
@@ -542,29 +538,6 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             };
             hasNext: {
                 type: BooleanConstructor;
-                /**
-                 * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
-                 *
-                 * @example
-                 * import { BentoDataGrid } from '@adyen/bento-vue2';
-                 *
-                 * export default {
-                 *     components: { BentoDataGrid },
-                 *     template: `
-                 *          <bento-data-grid
-                 *               :data="[
-                 *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
-                 *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
-                 *               ]"
-                 *               :columns="[
-                 *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
-                 *                  { field: 'company', label: 'Reference' },
-                 *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
-                 *                ]"
-                 *          />
-                 *     `
-                 * }
-                 */
                 default: any;
             };
             hidePageSize: {
@@ -641,6 +614,13 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
         type: PropType<BentoDatagridDataItemId[]>;
         default: () => any[];
     };
+    /**
+     * Renders the data grid with no top spacing, to render inside containers that already have spacing
+     */
+    noSpacingTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.
      * It does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.
@@ -709,6 +689,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
     selectable: boolean;
     selection: BentoDatagridDataItemId[];
     highlightedRows: BentoDatagridDataItemId[];
+    noSpacingTop: boolean;
     tabTitle: string;
 }>, Record<NonNullable<string | number>, (_: any) => any> & Record<NonNullable<string | number>, (_: any) => any> & {
     header: (_: {}) => any;