@adyen/bento-vue3 1.38.1 → 1.40.0

package/dist/@types/packages/core/src/components/link/link.types.d.ts

@@ -5,3 +5,34 @@ export declare enum BentoLinkVariant {
     DEFAULT = "default",
     QUIET = "quiet"
 }
+export interface LinkProps {
+    /**
+     * Disable the default typography for the component. Only use this when the component is inside another typography component.
+     */
+    disableTypography?: boolean;
+    /**
+     * Set the rendered link to a regular external anchor link and renders an external link icon.
+     */
+    external?: boolean;
+    /**
+     * Set to true if used inside a `BentoButton` component.
+     */
+    isButton?: boolean;
+    /**
+     * Set the rendered link to a regular external anchor link.
+     */
+    isNotRouting?: boolean;
+    /**
+     * Sets the target of the rendered link.
+     */
+    target?: string;
+    /**
+     * Set to true to truncate link. Doesn't work with disableTypography.
+     */
+    truncate?: boolean;
+    /**
+     * Link variant type affecting visual style.
+     * @values default, quiet
+     */
+    variant?: BentoLinkVariant | `${BentoLinkVariant}`;
+}

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

@@ -1,6 +1,9 @@
 import type { BentoColumn } from '../../data-grid.types';
 import type { Ref, UnwrapRef } from "../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue";
 export declare enum DataGridCellPropClass {
+    ACTION_COL_NESTED_CONTENT_AND_SELECTION_ENABLED = "action-col-nested-content-and-selection-enabled",
+    ACTION_COL_NESTED_CONTENT_ENABLED = "action-col-nested-content-enabled",
+    ACTION_COL_SELECTION_ENABLED = "action-col-selection-enabled",
     COLUMN_HOVERED = "column-hovered",
     COLUMN_HOVERED_NO_BORDER_LEFT = "column-hovered-no-border-left",
     COLUMN_HOVERED_NO_BORDER_RIGHT = "column-hovered-no-border-right",
@@ -10,6 +13,7 @@ export declare enum DataGridCellPropClass {
     IS_COLUMN_REORDERING_TARGET_LEFT = "is-column-re-order-target-left",
     IS_COLUMN_REORDERING_TARGET_RIGHT = "is-column-re-order-target-right",
     LAST_FROZEN_COLUMN_CELL = "last-frozen-column-cell",
+    NESTED_CONTENT_ENABLED = "nested-content-toggle-enabled",
     NUMERIC = "numeric",
     OVERFLOW_ELLIPSIS = "overflow-ellipsis",
     PADDING_LEFT_UNSET = "padding-left-unset",

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

@@ -81,6 +81,27 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../../nod
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Determines if the nested content is visible.
+     */
+    isNestedContentExpanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Determines if the nest content slot is enabled for this data row.
+     */
+    nestedContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The IDs of the rows this cell controls to show / hide them.
+     */
+    nestedRowsElementIds: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
     /**
      * The row data object
      */
@@ -113,6 +134,8 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../../nod
     "register-row-cell-element": (el: Element, field: string, rowIndex: number) => void;
 } & {
     "cell-hovered": (value: number) => void;
+} & {
+    "nested-content-toggled": () => void;
 }, string, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PublicProps, Readonly<import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{
     draggingEventsForRowCell: {
         type: PropType<DataGridCellDragEventsForColumn>;
@@ -181,6 +204,27 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../../nod
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Determines if the nested content is visible.
+     */
+    isNestedContentExpanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Determines if the nest content slot is enabled for this data row.
+     */
+    nestedContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The IDs of the rows this cell controls to show / hide them.
+     */
+    nestedRowsElementIds: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
     /**
      * The row data object
      */
@@ -208,6 +252,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../../nod
     "onSelect-row"?: (value: BentoDatagridDataItemId[]) => any;
     "onRegister-row-cell-element"?: (el: Element, field: string, rowIndex: number) => any;
     "onCell-hovered"?: (value: number) => any;
+    "onNested-content-toggled"?: () => any;
 }>, {
     condensed: boolean;
     draggingColumns: BentoDatagridDraggingColumnState;
@@ -215,6 +260,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../../nod
     selectable: boolean;
     getDataItemId: BentoDatagridGetDataItemIdFn;
     isDataItemDisabled: BentoDatagridIsDataItemDisabledFn;
+    isNestedContentExpanded: boolean;
+    nestedContent: boolean;
+    nestedRowsElementIds: string[];
 }, {}, {}, {}, string, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentProvideOptions, true, {}, any>, Record<string, (_: {
     item: BentoDatagridDataItem;
 }) => any>>;

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

@@ -919,6 +919,10 @@ declare const _default: import("../../../../../../../node_modules/.pnpm/vue@3.5.
             type: NumberConstructor;
             default: number;
         };
+        hint: {
+            type: StringConstructor;
+            default: string;
+        };
         placeholder: {
             type: StringConstructor;
             default: string;
@@ -952,6 +956,10 @@ declare const _default: import("../../../../../../../node_modules/.pnpm/vue@3.5.
             type: NumberConstructor;
             default: number;
         };
+        hint: {
+            type: StringConstructor;
+            default: string;
+        };
         placeholder: {
             type: StringConstructor;
             default: string;
@@ -971,6 +979,7 @@ declare const _default: import("../../../../../../../node_modules/.pnpm/vue@3.5.
         condensed: boolean;
         debounceTime: number;
         placeholder: string;
+        hint: string;
     }, {}, {}, {}, string, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentProvideOptions, true, {}, any>;
     BentoSearchIcon: any;
     BentoToggle: import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").DefineComponent<import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{

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

@@ -0,0 +1,390 @@
+import { PropType } from "../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue";
+import { BentoDatagridDataItem, BentoDatagridDataItemId, BentoDatagridGetDataItemIdFn, BentoDatagridIsDataItemDisabledFn, BentoDatagridShouldShowNestedContentFn } from "../../data-grid.types";
+import type { DataGridCellColumnSet, DataGridCellDragEventsForColumn } from '../data-grid-cell/data-grid-cell.types';
+import type { BentoDatagridDraggingColumnState } from '../data-grid-columns/data-grid-columns.types';
+import type { DatagridColumnHoveringState } from "../../composables/use-column-hovering";
+/**
+ * Internal component to display the BentoDataGrid data rows containig the data row cells.
+ *
+ * @example
+ *
+ * export default {
+ *     components: { DataGridRow },
+ *     template: `
+ *          <data-grid-row
+ *              :ref="el => registerRowCellRefs(el, rowIndex)"
+ *              :style="gridColumnWidthStyle"
+ *              :allow-row-clicks="allowRowClicks"
+ *              :column-sets="columnSets"
+ *              :condensed="condensed"
+ *              :dragging-columns="draggingColumns"
+ *              :dragging-events-for-row-cell="draggingEventsForRowCell"
+ *              :get-data-item-id="getDataItemId"
+ *              :has-left-overflow="hasLeftOverflow"
+ *              :highlighted-rows="highlightedRows"
+ *              :hovered-row-index="hoveredRowIndex"
+ *              :hovered-over-column-state="hoveredOverColumnState"
+ *              :is-data-item-disabled="isDataItemDisabled"
+ *              :is-measuring-column-widths="isMeasuringColumnWidths"
+ *              :row-data="rowData"
+ *              :row-index="rowIndex"
+ *              :show-frozen-columns-separator="showFrozenColumnsSeparator"
+ *              :selectable="selectable"
+ *              :selected-items="selectedItems"
+ *              @cell-hovered="onCellHover"
+ *              @row-click="onRowClick"
+ *              @on-frozen-columns-key-press="updateScrollPositionOnFrozenColumnsNavigation"
+ *              @select-row="onRowSelect"
+ *          >
+ *              <template v-for="(_, innerSlot) of slots" #[innerSlot]="scope">
+ *                  <slot :name="innerSlot" v-bind="scope" />
+ *              </template>
+ *          </data-grid-row>
+ *     `
+ */
+declare const _default: __VLS_WithTemplateSlots<import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").DefineComponent<import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{
+    /**
+     * When true, will emit a 'rowClick' event when a row is clicked. Will add cursor: pointer to rows.
+     */
+    allowRowClicks: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The columns sets including
+     */
+    columnSets: {
+        type: PropType<DataGridCellColumnSet[]>;
+        required: true;
+    };
+    /**
+     * Sets the row cells to the condensed padding state.
+     */
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Columns being dragged, contains dragging column and a target column
+     */
+    draggingColumns: {
+        type: PropType<BentoDatagridDraggingColumnState>;
+        default: any;
+    };
+    /**
+     * Dragging event handlers for each row cell
+     */
+    draggingEventsForRowCell: {
+        type: PropType<DataGridCellDragEventsForColumn>;
+        required: true;
+    };
+    /**
+     * A customisable method to retrieve a unique identifier for a data item in the array of data supplied.
+     * This is used selecting and performance reasons and must exist in each data item.
+     */
+    getDataItemId: {
+        type: PropType<BentoDatagridGetDataItemIdFn>;
+        default: (item: BentoDatagridDataItem) => BentoDatagridDataItemId;
+    };
+    /**
+     * Set to true if the datagrid has been scrolled and the left side has overflowing space.
+     */
+    hasLeftOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Enables the nested content slot functionality.
+     */
+    hasNestedContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Highlighted row IDs.
+     */
+    highlightedRows: {
+        type: PropType<BentoDatagridDataItemId[]>;
+        default: () => any[];
+    };
+    /**
+     * The row index of a currently hovered row.
+     */
+    hoveredRowIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 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.
+     */
+    isDataItemDisabled: {
+        type: PropType<BentoDatagridIsDataItemDisabledFn>;
+        default: () => boolean;
+    };
+    /**
+     * If the row is the last child in it's parent container.
+     */
+    isRowLastChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If columns are being measured for the autoWidth functionality.
+     */
+    isMeasuringColumnWidths: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The row data object
+     */
+    rowData: {
+        type: PropType<BentoDatagridDataItem>;
+        required: true;
+    };
+    /**
+     * The row index.
+     */
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /**
+     * The number of rows that this row is within.
+     */
+    rowSetSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Determines whether to render frozen seperator on the row.
+     */
+    showFrozenColumnsSeparator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Determines if the row selection is enabled.
+     */
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The array of IDs for the selected rows.
+     */
+    selectedItems: {
+        type: PropType<BentoDatagridDataItemId[]>;
+        required: true;
+    };
+    /**
+     * Enables / Disables the nested-content slot
+     */
+    shouldShowNestedContent: {
+        type: PropType<BentoDatagridShouldShowNestedContentFn>;
+        default: (_item: BentoDatagridDataItem) => true;
+    };
+}>, {
+    gridcellRefs: import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").Ref<{
+        [key: string]: HTMLDivElement;
+    }, {
+        [key: string]: HTMLDivElement;
+    }>;
+}, {}, {}, {}, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentOptionsMixin, {
+    "cell-hovered": (value: number) => void;
+} & {
+    "on-frozen-columns-key-press": (event: Event) => void;
+} & {
+    "select-row": (value: BentoDatagridDataItemId[]) => void;
+} & {
+    "row-click": (rowData: BentoDatagridDataItem, event: MouseEvent) => void;
+}, string, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").PublicProps, Readonly<import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ExtractPropTypes<{
+    /**
+     * When true, will emit a 'rowClick' event when a row is clicked. Will add cursor: pointer to rows.
+     */
+    allowRowClicks: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The columns sets including
+     */
+    columnSets: {
+        type: PropType<DataGridCellColumnSet[]>;
+        required: true;
+    };
+    /**
+     * Sets the row cells to the condensed padding state.
+     */
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Columns being dragged, contains dragging column and a target column
+     */
+    draggingColumns: {
+        type: PropType<BentoDatagridDraggingColumnState>;
+        default: any;
+    };
+    /**
+     * Dragging event handlers for each row cell
+     */
+    draggingEventsForRowCell: {
+        type: PropType<DataGridCellDragEventsForColumn>;
+        required: true;
+    };
+    /**
+     * A customisable method to retrieve a unique identifier for a data item in the array of data supplied.
+     * This is used selecting and performance reasons and must exist in each data item.
+     */
+    getDataItemId: {
+        type: PropType<BentoDatagridGetDataItemIdFn>;
+        default: (item: BentoDatagridDataItem) => BentoDatagridDataItemId;
+    };
+    /**
+     * Set to true if the datagrid has been scrolled and the left side has overflowing space.
+     */
+    hasLeftOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Enables the nested content slot functionality.
+     */
+    hasNestedContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Highlighted row IDs.
+     */
+    highlightedRows: {
+        type: PropType<BentoDatagridDataItemId[]>;
+        default: () => any[];
+    };
+    /**
+     * The row index of a currently hovered row.
+     */
+    hoveredRowIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 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.
+     */
+    isDataItemDisabled: {
+        type: PropType<BentoDatagridIsDataItemDisabledFn>;
+        default: () => boolean;
+    };
+    /**
+     * If the row is the last child in it's parent container.
+     */
+    isRowLastChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If columns are being measured for the autoWidth functionality.
+     */
+    isMeasuringColumnWidths: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The row data object
+     */
+    rowData: {
+        type: PropType<BentoDatagridDataItem>;
+        required: true;
+    };
+    /**
+     * The row index.
+     */
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /**
+     * The number of rows that this row is within.
+     */
+    rowSetSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Determines whether to render frozen seperator on the row.
+     */
+    showFrozenColumnsSeparator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Determines if the row selection is enabled.
+     */
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The array of IDs for the selected rows.
+     */
+    selectedItems: {
+        type: PropType<BentoDatagridDataItemId[]>;
+        required: true;
+    };
+    /**
+     * Enables / Disables the nested-content slot
+     */
+    shouldShowNestedContent: {
+        type: PropType<BentoDatagridShouldShowNestedContentFn>;
+        default: (_item: BentoDatagridDataItem) => true;
+    };
+}>> & Readonly<{
+    "onOn-frozen-columns-key-press"?: (event: Event) => any;
+    "onSelect-row"?: (value: BentoDatagridDataItemId[]) => any;
+    "onCell-hovered"?: (value: number) => any;
+    "onRow-click"?: (rowData: BentoDatagridDataItem, event: MouseEvent) => any;
+}>, {
+    condensed: boolean;
+    draggingColumns: BentoDatagridDraggingColumnState;
+    hasLeftOverflow: boolean;
+    isMeasuringColumnWidths: boolean;
+    showFrozenColumnsSeparator: boolean;
+    selectable: boolean;
+    getDataItemId: BentoDatagridGetDataItemIdFn;
+    isDataItemDisabled: BentoDatagridIsDataItemDisabledFn;
+    allowRowClicks: boolean;
+    hasNestedContent: boolean;
+    highlightedRows: BentoDatagridDataItemId[];
+    hoveredRowIndex: number;
+    isRowLastChild: boolean;
+    rowSetSize: number;
+    shouldShowNestedContent: BentoDatagridShouldShowNestedContentFn;
+}, {}, {}, {}, string, import("../../../../../../../node_modules/.pnpm/vue@3.5.13_typescript@5.6.3/node_modules/vue").ComponentProvideOptions, true, {}, any>, Record<NonNullable<string | number>, (_: any) => any> & {
+    'nested-slot': (_: {
+        item: BentoDatagridDataItem;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -3,4 +3,5 @@ export { default as BentoDataGridConfigSettings } from './data-grid-config-setti
 export { default as DataGridLazyLoad } from './data-grid-lazy-load/data-grid-lazy-load.vue';
 export { default as DataGridCell } from './data-grid-cell/data-grid-cell.vue';
 export { default as DataGridCellActions } from './data-grid-cell-actions/data-grid-cell-actions.vue';
+export { default as DataGridRow } from './data-grid-row/data-grid-row.vue';
 export { default as BentoDataGridStaticIcon } from './data-grid-static-icon/data-grid-static-icon.vue';

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

@@ -8,9 +8,18 @@ export declare const DEFAULT_COLUMN_MIN_WIDTH = 50;
 export declare const DATAGRID_ACTIONS_COLUMN_FIELD_NAME = "b-actions-column";
 export declare const DATAGRID_SELECT_WIDTH = 32;
 export declare const DATAGRID_SELECT_WIDTH_WITH_SELECT_ALL_PAGES_ENABLED = 56;
+export declare const DATAGRID_SELECT_WIDTH_AND_NESTED_ROWS_ENABLED = 56;
+export declare const DATAGRID_SELECT_WIDTH_AND_SELECT_ALL_PAGES_AND_NESTED_ROWS_ENABLED = 80;
+export declare const DATAGRID_NESTED_ROWS_ENABLED = 36;
 export declare const DATAGRID_CELL_OFFSET_INITIAL = 1;
 export declare const DATAGRID_CELL_OFFSET_PADDING = 16;
 export declare const DATAGRID_TEMPLATE_EXTRA_PADDING = 20;
+/**
+ * Generates the column width for the actions column which contains actions like row selection or nested rows toggle button.
+ * @param options - the datagrid calculation options.
+ * @returns a column definition used in the column and cell components.
+ */
+export declare const getActionsColumnWidth: (options: CalculateColumnWidthOptions) => 36 | 32 | 56 | 80;
 /**
  * Calculates the width of the columns using width, minWidth and/or a fluid number.
  *

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

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

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

@@ -87,3 +87,4 @@ export declare enum BentoDatagridAriaSortValue {
     NONE = "none"
 }
 export type BentoDatagridEmptyStateProps = InstanceType<typeof BentoEmptyState>['$props'];
+export type BentoDatagridShouldShowNestedContentFn = (item: BentoDatagridDataItem) => boolean;