@adyen/bento-vue3 1.22.0 → 1.23.0

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

@@ -1,14 +1,18 @@
 import type { BentoColumn } from '../../data-grid.types';
 export declare enum DataGridCellPropClass {
-    PADDING_LEFT_UNSET = "padding-left-unset",
-    PADDING_RIGHT_UNSET = "padding-right-unset",
-    NUMERIC = "numeric",
+    COLUMN_HOVERED = "column-hovered",
+    COLUMN_HOVERED_NO_BORDER_LEFT = "column-hovered-no-border-left",
+    COLUMN_HOVERED_NO_BORDER_RIGHT = "column-hovered-no-border-right",
     CONDENSED = "condensed",
     FROZEN = "frozen",
-    OVERFLOW_ELLIPSIS = "overflow-ellipsis",
     IS_COLUMN_REORDERING = "is-column-re-ordering",
     IS_COLUMN_REORDERING_TARGET_LEFT = "is-column-re-order-target-left",
-    IS_COLUMN_REORDERING_TARGET_RIGHT = "is-column-re-order-target-right"
+    IS_COLUMN_REORDERING_TARGET_RIGHT = "is-column-re-order-target-right",
+    LAST_FROZEN_COLUMN_CELL = "last-frozen-column-cell",
+    NUMERIC = "numeric",
+    OVERFLOW_ELLIPSIS = "overflow-ellipsis",
+    PADDING_LEFT_UNSET = "padding-left-unset",
+    PADDING_RIGHT_UNSET = "padding-right-unset"
 }
 export interface DataGridCellDragEvents {
     dragenter?: (e: DragEvent) => void;

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

@@ -2,6 +2,7 @@ import { PropType } from "../../../../../../vue3/node_modules/vue";
 import { BentoColumn, BentoDatagridDataItem, BentoDatagridDataItemId, BentoDatagridGetDataItemIdFn, BentoDatagridIsDataItemDisabledFn } from "../../data-grid.types";
 import { DataGridCellColumnSet, DataGridCellDragEventsForColumn } from './data-grid-cell.types';
 import type { BentoDatagridDraggingColumnState } from '../data-grid-columns/data-grid-columns.types';
+import { DatagridColumnHoveringState } from "../../composables/use-column-hovering";
 /**
  * Internal component to display the BentoDataGrid cells.
  *
@@ -61,6 +62,13 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: PropType<BentoDatagridGetDataItemIdFn>;
         default: (item: BentoDatagridDataItem) => BentoDatagridDataItemId;
     };
+    /**
+     * The column hovered over state and whether the hovered over column should show a border right or left.
+     */
+    hoveredOverColumnState: {
+        type: PropType<DatagridColumnHoveringState>;
+        required: true;
+    };
     /**
      * A customisable method to determine if a row is not selectable.
      * The default is that every row is selectable.
@@ -145,6 +153,13 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: PropType<BentoDatagridGetDataItemIdFn>;
         default: (item: BentoDatagridDataItem) => BentoDatagridDataItemId;
     };
+    /**
+     * The column hovered over state and whether the hovered over column should show a border right or left.
+     */
+    hoveredOverColumnState: {
+        type: PropType<DatagridColumnHoveringState>;
+        required: true;
+    };
     /**
      * A customisable method to determine if a row is not selectable.
      * The default is that every row is selectable.

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

@@ -12,6 +12,7 @@ export declare enum DatagridColumnsEvent {
     COLUMN_UPDATE = "column-update",
     COLUMN_MENU_OPEN = "column-menu-open",
     COLUMN_MENU_CLOSE = "column-menu-close",
+    COLUMN_HOVER = "column-hover",
     COLUMN_DRAG_START = "column-dragstart",
     COLUMN_DRAG_ENTER = "column-dragenter",
     COLUMN_DRAG_END = "column-dragend",

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

@@ -1,6 +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";
 /**
  * A component to display the BentoDataGrid columns
  *
@@ -92,6 +93,13 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The column hovered over state and whether the hovered over column should show a border right or left.
+     */
+    hoveredOverColumnState: {
+        type: PropType<DatagridColumnHoveringState>;
+        required: true;
+    };
     /**
      * Toggled to true when the DataGrid has auto width columns and is measuring the
      */
@@ -178,6 +186,8 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     "column-menu-open": () => void;
 } & {
     "column-menu-close": () => void;
+} & {
+    "column-hover": (columnKey: BentoColumn) => void;
 }, string, import("../../../../../../vue3/node_modules/vue").VNodeProps & import("../../../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../../../vue3/node_modules/vue").ExtractPropTypes<{
     /**
      * Column definitions using 'key' to relate to data object.
@@ -228,6 +238,13 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The column hovered over state and whether the hovered over column should show a border right or left.
+     */
+    hoveredOverColumnState: {
+        type: PropType<DatagridColumnHoveringState>;
+        required: true;
+    };
     /**
      * Toggled to true when the DataGrid has auto width columns and is measuring the
      */
@@ -286,6 +303,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         default: boolean;
     };
 }>> & {
+    "onColumn-hover"?: (columnKey: BentoColumn) => any;
     "onColumn-resize"?: (column: {
         field: string;
         width: number;

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

@@ -8,3 +8,4 @@ export { useColumnReorderer } from './use-column-reorderer/use-column-reorderer'
 export { useConfigSettings } from './use-config-settings/use-config-settings';
 export { useCalculateStickyElementHeight } from './use-calculate-sticky-element-height/use-calculate-sticky-element-height';
 export { useScroller } from './use-scroller/use-scroller';
+export { useColumnHovering } from './use-column-hovering';

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

@@ -44,6 +44,7 @@ export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, n
     }>;
     onColumnWidthOverride: (newColumnWidthOverridesLookup: BentoColumnWidthOverridesLookup) => void;
     isMeasuringColumnWidths: Ref<boolean>;
+    isTotalWidthOfColumnsTakingUpAllAvailableGridWidth: import("../../../../../../vue3/node_modules/vue").ComputedRef<boolean>;
     columns: Ref<{
         field: string;
         label: string;

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

@@ -0,0 +1,2 @@
+export * from './use-column-hovering';
+export * from './use-column-hovering.types';

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

@@ -0,0 +1,53 @@
+import { type Ref } from "../../../../../../vue3/node_modules/vue";
+import type { DatagridConfigSettingsColumnSets } from '../use-config-settings/use-config.settings.types';
+import type { DatagridColumnHoveringState } from './use-column-hovering.types';
+export declare const useColumnHovering: (columnSets: Ref<DatagridConfigSettingsColumnSets>, selectable: Ref<boolean>, outline: Ref<boolean>, isTotalWidthOfColumnsTakingUpAllAvailableGridWidth: Ref<boolean>) => {
+    hoveredOverColumn: Ref<{
+        field: string;
+        label: string;
+        width?: number;
+        autoWidth?: boolean;
+        minWidth?: number;
+        flex?: number;
+        sortable?: boolean;
+        numeric?: boolean;
+        infoIconTooltip?: string;
+        padding?: {
+            left?: boolean;
+            right?: boolean;
+        };
+        overflow?: import("../..").BentoColumnOverflow;
+        visible?: boolean;
+        mandatory?: boolean;
+        frozen?: boolean;
+        cellActions?: {
+            type?: string;
+            link?: object;
+            condensed?: boolean;
+            critical?: boolean;
+            disabled?: boolean;
+            inverse?: boolean;
+            iconLeft?: object | Element | (object | Element)[];
+            iconRight?: object | Element | (object | Element)[];
+            title?: string;
+            event?: (rowDataItem: import("../..").BentoDatagridDataItem, columnKey: string) => void;
+            isShort?: true;
+            variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
+            menuData?: {
+                text: string;
+                handler: () => void;
+                secondaryText?: string;
+                items?: any[];
+                disabled?: boolean;
+                chevron?: boolean;
+                icon?: object | Element | (object | Element)[];
+                critical?: boolean;
+                indent?: boolean;
+                addDivider?: boolean;
+            }[];
+            getCopyData?: (rowDataItem: import("../..").BentoDatagridDataItem, columnKey: string) => string;
+        }[];
+    }>;
+    hoveredOverColumnState: import("../../../../../../vue3/node_modules/vue").ComputedRef<DatagridColumnHoveringState>;
+};
+export default useColumnHovering;

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

@@ -0,0 +1,12 @@
+import type { ComputedRef } from "../../../../../../vue3/node_modules/vue";
+import type { BentoColumn } from '../../data-grid.types';
+export interface DatagridColumnHoveringState {
+    hoveredOverColumnField: string;
+    isSeparatorOffset: boolean;
+    noBorderLeft: boolean;
+    noBorderRight: boolean;
+}
+export interface DatagridColumnHoveringUseColumnHoveringReturnType {
+    hoveredOverColumn: BentoColumn;
+    hoveredOverColumnState: ComputedRef<DatagridColumnHoveringState>;
+}

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

@@ -1,6 +1,7 @@
 import { MaybeRef } from "../../../../types";
 import { BentoColumn } from '../../data-grid.types';
 import type { SetupContext } from "../../../../../../vue3/node_modules/vue";
+import { DatagridConfigSettingsColumnSets } from './use-config.settings.types';
 /**
  * All Datagrid configuration settings logic:
  * - Condensed view toggle
@@ -13,105 +14,7 @@ import type { SetupContext } from "../../../../../../vue3/node_modules/vue";
  * @returns Condensed view data & event handler
  */
 export declare const useConfigSettings: (columnsRef: MaybeRef<BentoColumn[]>, emit: SetupContext['emit']) => {
-    columnSets: import("../../../../../../vue3/node_modules/vue").ComputedRef<({
-        columnSet: (BentoColumn | {
-            field: string;
-            label: string;
-            width?: number;
-            autoWidth?: boolean;
-            minWidth?: number;
-            flex?: number;
-            sortable?: boolean;
-            numeric?: boolean;
-            infoIconTooltip?: string;
-            padding?: {
-                left?: boolean;
-                right?: boolean;
-            };
-            overflow?: import("../../data-grid.types").BentoColumnOverflow;
-            visible?: boolean;
-            mandatory?: boolean;
-            frozen?: boolean;
-            cellActions?: {
-                type?: string;
-                link?: object;
-                condensed?: boolean;
-                critical?: boolean;
-                disabled?: boolean;
-                inverse?: boolean;
-                iconLeft?: object | Element | (object | Element)[];
-                iconRight?: object | Element | (object | Element)[];
-                title?: string;
-                event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
-                isShort?: true;
-                variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
-                menuData?: {
-                    text: string;
-                    handler: () => void;
-                    secondaryText?: string;
-                    items?: any[];
-                    disabled?: boolean;
-                    chevron?: boolean;
-                    icon?: object | Element | (object | Element)[];
-                    critical?: boolean;
-                    indent?: boolean;
-                    addDivider?: boolean;
-                }[];
-                getCopyData?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => string;
-            }[];
-        })[];
-        id: string;
-        isFrozenColumns: boolean;
-    } | {
-        columnSet: (BentoColumn | {
-            field: string;
-            label: string;
-            width?: number;
-            autoWidth?: boolean;
-            minWidth?: number;
-            flex?: number;
-            sortable?: boolean;
-            numeric?: boolean;
-            infoIconTooltip?: string;
-            padding?: {
-                left?: boolean;
-                right?: boolean;
-            };
-            overflow?: import("../../data-grid.types").BentoColumnOverflow;
-            visible?: boolean;
-            mandatory?: boolean;
-            frozen?: boolean;
-            cellActions?: {
-                type?: string;
-                link?: object;
-                condensed?: boolean;
-                critical?: boolean;
-                disabled?: boolean;
-                inverse?: boolean;
-                iconLeft?: object | Element | (object | Element)[];
-                iconRight?: object | Element | (object | Element)[];
-                title?: string;
-                event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
-                isShort?: true;
-                variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
-                menuData?: {
-                    text: string;
-                    handler: () => void;
-                    secondaryText?: string;
-                    items?: any[];
-                    disabled?: boolean;
-                    chevron?: boolean;
-                    icon?: object | Element | (object | Element)[];
-                    critical?: boolean;
-                    indent?: boolean;
-                    addDivider?: boolean;
-                }[];
-                getCopyData?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => string;
-            }[];
-        })[];
-        id: string;
-        isFrozenColumns?: undefined;
-    })[]>;
+    columnSets: import("../../../../../../vue3/node_modules/vue").ComputedRef<DatagridConfigSettingsColumnSets>;
     isOnlyOneVisibleColumn: import("../../../../../../vue3/node_modules/vue").ComputedRef<boolean>;
     sortedColumns: import("../../../../../../vue3/node_modules/vue").ComputedRef<(BentoColumn | {
         field: string;

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

@@ -0,0 +1,7 @@
+import type { BentoColumn } from "../..";
+export interface DatagridConfigSettingsColumnSet {
+    columnSet: BentoColumn[];
+    id: string;
+    isFrozenColumns?: boolean;
+}
+export type DatagridConfigSettingsColumnSets = DatagridConfigSettingsColumnSet[];

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

@@ -1,6 +1,6 @@
 import { Ref } from "../../../../../vue3/node_modules/vue";
-import { BentoColumn, BentoColumnWidthOverridesLookup } from '../data-grid.types';
 import { DatagridColumnsEvent } from '../components/data-grid-columns/data-grid-columns.types';
+import type { BentoColumn, BentoColumnWidthOverridesLookup } from '../data-grid.types';
 /**
  * Contains all the resize methods and logic to allow users to resize column widths.
  * We listen for 3 main events:
@@ -19,4 +19,50 @@ export declare const useResizer: (columns: Ref<BentoColumn[]>, emit: (event: Dat
     allColumnRefs: import("../../../../../vue3/node_modules/vue").ToRefs<{}>;
     startResize: (hasResizableColumns: boolean, field: BentoColumn['field'], event: MouseEvent) => void;
     isResizing: Ref<boolean>;
+    columnHoverEventToEmitAfterResizing: Ref<{
+        field: string;
+        label: string;
+        width?: number;
+        autoWidth?: boolean;
+        minWidth?: number;
+        flex?: number;
+        sortable?: boolean;
+        numeric?: boolean;
+        infoIconTooltip?: string;
+        padding?: {
+            left?: boolean;
+            right?: boolean;
+        };
+        overflow?: import("../data-grid.types").BentoColumnOverflow;
+        visible?: boolean;
+        mandatory?: boolean;
+        frozen?: boolean;
+        cellActions?: {
+            type?: string;
+            link?: object;
+            condensed?: boolean;
+            critical?: boolean;
+            disabled?: boolean;
+            inverse?: boolean;
+            iconLeft?: object | Element | (object | Element)[];
+            iconRight?: object | Element | (object | Element)[];
+            title?: string;
+            event?: (rowDataItem: import("../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+            isShort?: true;
+            variant?: import("../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
+            menuData?: {
+                text: string;
+                handler: () => void;
+                secondaryText?: string;
+                items?: any[];
+                disabled?: boolean;
+                chevron?: boolean;
+                icon?: object | Element | (object | Element)[];
+                critical?: boolean;
+                indent?: boolean;
+                addDivider?: boolean;
+            }[];
+            getCopyData?: (rowDataItem: import("../data-grid.types").BentoDatagridDataItem, columnKey: string) => string;
+        }[];
+    }>;
 };

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

@@ -102,10 +102,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             description: {
                 type: StringConstructor;
                 default: any;
-            }; /**
-             * A customisable method to determine if a row is not selectable.
-             * The default is that every row is selectable.
-             */
+            };
             headingEl: {
                 type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">;
                 default: any;
@@ -225,6 +222,29 @@ 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: {
@@ -402,10 +422,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             description: {
                 type: StringConstructor;
                 default: any;
-            }; /**
-             * A customisable method to determine if a row is not selectable.
-             * The default is that every row is selectable.
-             */
+            };
             headingEl: {
                 type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">;
                 default: any;
@@ -525,6 +542,29 @@ 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: {