@adyen/bento-vue2 0.4.0 → 0.5.0

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

@@ -0,0 +1,6 @@
+import BentoButton from './button.vue';
+import type { Meta, StoryObj } from '@storybook/vue';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof BentoButton>;
+export declare const Secondary: Story;

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

@@ -28,6 +28,7 @@ declare const _default: import("vue").DefineComponent<{
     BentoTypographyElement: typeof BentoTypographyElement;
     BentoTypographyVariant: typeof BentoTypographyVariant;
     ariaAttributes: import("vue").ComputedRef<{
+        'aria-controls': string;
         'aria-expanded': Booleanish;
     }>;
     conditionalClasses: import("vue").ComputedRef<{

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { BentoButtonVariant } from '@/components/button';
+import { BentoButtonVariant } from '../../button.types';
 import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';
 declare const _default: import("vue").DefineComponent<{
     actions: {
@@ -8,14 +8,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     layout: {
         type: PropType<BentoButtonActionsLayout>;
-        default: import("@/components/button").BentoButtonActionsLayoutBasic;
+        default: import("./button-actions.types").BentoButtonActionsLayoutBasic;
         validator: (layout: BentoButtonActionsLayout) => boolean;
     };
 }, {
     conditionalClasses: import("vue").ComputedRef<{
         [x: string]: boolean;
     }>;
-    reversedActionsList: import("vue").ComputedRef<import("@/components/button").BentoButtonActionObject[]>;
+    reversedActionsList: import("vue").ComputedRef<import("./button-actions.types").BentoButtonActionObject[]>;
     generateButtonVariantByIndex: (actionIndex: any) => BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
     actions: {
@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     layout: {
         type: PropType<BentoButtonActionsLayout>;
-        default: import("@/components/button").BentoButtonActionsLayoutBasic;
+        default: import("./button-actions.types").BentoButtonActionsLayoutBasic;
         validator: (layout: BentoButtonActionsLayout) => boolean;
     };
 }>>, {

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

@@ -49,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     cardActionsConditionalClasses: import("vue").ComputedRef<{
         'b-card__actions--without-content': boolean;
+        'b-card__actions--without-content-and-with-header': boolean;
     }>;
     showCardBody: import("vue").ComputedRef<boolean>;
     showContent: import("vue").Ref<boolean>;

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

@@ -11,6 +11,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    majorUnits: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     formattedCurrency: import("vue").ComputedRef<string>;
     BentoTypographyVariant: typeof BentoTypographyVariant;
@@ -25,8 +29,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    majorUnits: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     currency: BentoCurrencyISOCode;
     shorthand: boolean;
+    majorUnits: boolean;
 }>;
 export default _default;

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

@@ -0,0 +1,15 @@
+import { BentoColumn } from '../../data-grid.types';
+export declare enum DatagridColumnsEvent {
+    COLUMN_RESIZE = "column-resize",
+    COLUMN_RESIZING = "column-resizing",
+    SORT = "sort",
+    SELECT_ALL_ROWS = "select-all-rows",
+    COLUMN_DRAG_START = "column-dragstart",
+    COLUMN_DRAG_ENTER = "column-dragenter",
+    COLUMN_DRAG_END = "column-dragend",
+    COLUMN_DROP = "column-drop"
+}
+export interface BentoDatagridDraggingColumnState {
+    dragging?: BentoColumn;
+    target?: BentoColumn;
+}

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

@@ -1,15 +1,28 @@
 import { PropType } from 'vue';
 import { BentoColumn, BentoDatagridAllItemsSelectedState, BentoDatagridSortByColumn, BentoDatagridSortDirection } from '../../data-grid.types';
 import { BentoTypographyElement } from '@/components/typography';
+import { BentoDatagridDraggingColumnState, DatagridColumnsEvent } from './data-grid-columns-types';
 declare const _default: import("vue").DefineComponent<{
     columns: {
         type: PropType<BentoColumn[]>;
         required: true;
     };
+    draggingColumns: {
+        type: PropType<BentoDatagridDraggingColumnState>;
+        default: any;
+    };
+    hasDraggableColumns: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hasResizableColumns: {
         type: BooleanConstructor;
         default: boolean;
     };
+    isFrozenColumns: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     allItemsSelectedState: {
         type: PropType<BentoDatagridAllItemsSelectedState>;
         default: any;
@@ -18,10 +31,6 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDatagridSortByColumn[]>;
         default: () => any[];
     };
-    gridColumnWidthStyle: {
-        type: ObjectConstructor;
-        required: true;
-    };
 }, {
     DATAGRID_SELECT_FIELD_NAME: string;
     conditionalColumnClasses: (column: BentoColumn) => {
@@ -29,9 +38,19 @@ declare const _default: import("vue").DefineComponent<{
         'b-data-grid-columns__column--padding-left-unset': boolean;
         'b-data-grid-columns__column--padding-right-unset': boolean;
         'b-data-grid-columns__column--numeric': boolean;
+        'b-data-grid-columns__column--frozen': boolean;
+        'b-data-grid-columns__column--is-re-ordering': boolean;
+        'b-data-grid-columns__column--is-re-ordering-target': boolean;
     };
-    conditionalColumnSeperatorClasses: import("vue").ComputedRef<{
-        'b-data-grid-columns__column-seperator-container--is-resizeable': boolean;
+    conditionalColumnSeparatorClasses: import("vue").ComputedRef<{
+        'b-data-grid-columns__column-separator-container--is-resizeable': boolean;
+    }>;
+    conditionalColumnsClasses: import("vue").ComputedRef<{
+        'b-data-grid-columns--frozen': boolean;
+        'b-data-grid-columns--unfrozen'?: undefined;
+    } | {
+        'b-data-grid-columns--unfrozen': boolean;
+        'b-data-grid-columns--frozen'?: undefined;
     }>;
     allItemsSelectedCheckboxState: import("vue").Ref<{
         allItemsSelected: boolean;
@@ -43,17 +62,43 @@ declare const _default: import("vue").DefineComponent<{
     };
     sortByColumnField: (field: string) => void;
     startResize: (hasResizableColumns: boolean, field: string, event: MouseEvent) => void;
+    isResizing: import("vue").Ref<boolean>;
+    draggingEventsForColumn: import("vue").ComputedRef<(column: BentoColumn) => {
+        dragstart?: undefined;
+        dragover?: undefined;
+        dragenter?: undefined;
+        drop?: undefined;
+        dragend?: undefined;
+    } | {
+        dragstart: (e: DragEvent & Event) => void;
+        dragover: (e: DragEvent) => void;
+        dragenter: (e: DragEvent) => void;
+        drop: () => void;
+        dragend: () => void;
+    }>;
     BentoDatagridSortDirection: typeof BentoDatagridSortDirection;
     BentoTypographyElement: typeof BentoTypographyElement;
-}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("sort" | "column-resize" | "select-all-rows")[], string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, (DatagridColumnsEvent.COLUMN_RESIZE | DatagridColumnsEvent.SORT | DatagridColumnsEvent.SELECT_ALL_ROWS | DatagridColumnsEvent.COLUMN_DRAG_START | DatagridColumnsEvent.COLUMN_DRAG_ENTER | DatagridColumnsEvent.COLUMN_DRAG_END | DatagridColumnsEvent.COLUMN_DROP)[], string, Readonly<import("vue").ExtractPropTypes<{
     columns: {
         type: PropType<BentoColumn[]>;
         required: true;
     };
+    draggingColumns: {
+        type: PropType<BentoDatagridDraggingColumnState>;
+        default: any;
+    };
+    hasDraggableColumns: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hasResizableColumns: {
         type: BooleanConstructor;
         default: boolean;
     };
+    isFrozenColumns: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     allItemsSelectedState: {
         type: PropType<BentoDatagridAllItemsSelectedState>;
         default: any;
@@ -62,11 +107,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDatagridSortByColumn[]>;
         default: () => any[];
     };
-    gridColumnWidthStyle: {
-        type: ObjectConstructor;
-        required: true;
-    };
 }>>, {
+    isFrozenColumns: boolean;
+    draggingColumns: any;
+    hasDraggableColumns: boolean;
     hasResizableColumns: boolean;
     allItemsSelectedState: BentoDatagridAllItemsSelectedState;
     sortBy: BentoDatagridSortByColumn[];

package/dist/@types/components/data-grid/components/data-grid-config-settings/components/data-grid-config-settings-column-row/data-grid-config-settings-column-row.vue.d.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
+import { AdlLabelPosition } from '@/types';
+import { BentoColumn } from '@/components/data-grid';
+declare const _default: import("vue").DefineComponent<{
+    isColumnVisibilityToggleDisabled: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    column: {
+        type: PropType<BentoColumn>;
+        required: true;
+    };
+}, {
+    isFreezeIconOptionShown: import("vue").Ref<boolean>;
+    isColumnFrozen: import("vue").ComputedRef<boolean>;
+    freezeIconConditionalClasses: import("vue").ComputedRef<{
+        "b-data-grid-config-settings-column-row__freeze-icon--frozen": boolean;
+    }>;
+    isColumnVisible: import("vue").ComputedRef<boolean>;
+    toggleColumnVisibility: () => void;
+    showFreezeIcon: () => void;
+    hideFreezeIcon: () => void;
+    toggleColumnFreeze: () => void;
+    AdlLabelPosition: typeof AdlLabelPosition;
+    BentoTypographyElement: typeof BentoTypographyElement;
+    BentoTypographyVariant: typeof BentoTypographyVariant;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("visible-column" | "updated-column")[], string, Readonly<import("vue").ExtractPropTypes<{
+    isColumnVisibilityToggleDisabled: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    column: {
+        type: PropType<BentoColumn>;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/dist/@types/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum DatagridConfigSettingsEvent {
+    CONFIG_SETTINGS = "config-settings",
+    UPDATE_COLUMNS = "update:columns"
+}

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

@@ -3,6 +3,7 @@ import { BentoButtonVariant } from '@/components/button';
 import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
 import { AdlLabelPosition } from '@/types';
 import { BentoColumn } from '../../data-grid.types';
+import { DatagridConfigSettingsEvent } from './data-grid-config-settings.types';
 declare const _default: import("vue").DefineComponent<{
     columns: {
         type: PropType<BentoColumn[]>;
@@ -15,19 +16,20 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     configSettingsButtonRef: any;
     isConfigSettingsPanelOpen: import("vue").Ref<boolean>;
-    isColumnVisibilityToggleDisabled: (fieldName: string, isMandatory: boolean) => boolean;
     allColumnsVisbilityToggleState: import("vue").Ref<boolean>;
     filteredColumnVisibilityColumns: import("vue").ComputedRef<BentoColumn[]>;
     searchTerm: import("vue").Ref<string>;
     isColumnVisibilityFilterShown: import("vue").Ref<boolean>;
     searchBarRef: any;
-    toggleConfigSettingsPanelVisibility: () => void;
+    setConfigSettingsPanelVisibility: (isVisible: boolean) => void;
     emitCondensedToggle: (isCompactView: boolean) => void;
-    isColumnVisible: (fieldName: string) => boolean;
-    toggleColumnVisiblity: (fieldName: string) => void;
     toggleAllColumnVisibility: (toggleState: boolean) => void;
     clearAction: () => void;
     toggleColumnFilter: () => void;
+    emitVisibleColumns: (updatedColumn: BentoColumn) => void;
+    emitFrozenColumns: (updatedColumn: BentoColumn) => void;
+    onClickOutside: () => void;
+    isColumnVisibilityToggleDisabled: (column: BentoColumn) => boolean;
     AdlLabelPosition: typeof AdlLabelPosition;
     BentoTypographyElement: typeof BentoTypographyElement;
     BentoTypographyVariant: typeof BentoTypographyVariant;
@@ -49,7 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         BOTTOM: import("../../../popper-container").PopperContainerPositionBasic.BOTTOM;
         LEFT: import("../../../popper-container").PopperContainerPositionBasic.LEFT;
     };
-}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("config-settings" | "visible-columns")[], string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, DatagridConfigSettingsEvent[], string, Readonly<import("vue").ExtractPropTypes<{
     columns: {
         type: PropType<BentoColumn[]>;
         required: true;

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

@@ -1,2 +1,2 @@
-export { default as BentoDataGridColumns } from './data-grid-columns/data-grid-columns.vue';
+export { default as DataGridColumns } from './data-grid-columns/data-grid-columns.vue';
 export { default as BentoDataGridConfigSettings } from './data-grid-config-settings/data-grid-config-settings.vue';

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

@@ -2,4 +2,5 @@ export { default as useResizer } from './useResizer';
 export { default as useCalculateColumnWidth, DATAGRID_SELECT_FIELD_NAME, } from './useCalculateColumnWidth/useCalculateColumnWidth';
 export { useSorter } from './useSorter';
 export { useSelector } from './useSelector';
-export { useConfigSettings } from './useConfigSettings';
+export { useColumnReorderer } from './useColumnReorderer/useColumnReorderer';
+export { useConfigSettings } from './useConfigSettings/useConfigSettings';

package/dist/@types/components/data-grid/composables/useCalculateColumnWidth/useCalculateColumnWidth.d.ts

@@ -21,6 +21,7 @@ export declare const useCalculateColumnWidth: (newColumns: MaybeRef<BentoColumn[
         overflow?: import("../../data-grid.types").BentoColumnOverflow;
         visible?: boolean;
         mandatory?: boolean;
+        frozen?: boolean;
     }[]>;
     gridColumnWidthStyle: import("vue").ComputedRef<{
         gridTemplateColumns: string;

package/dist/@types/components/data-grid/composables/useColumnReorderer/useColumnReorderer.d.ts

@@ -0,0 +1,64 @@
+import { MaybeRef } from '@/types';
+import { BentoColumn } from '../../data-grid.types';
+import type { EmitFn } from 'vue/types/v3-setup-context';
+export declare const useColumnReorderer: (columnsRef: MaybeRef<BentoColumn[]>, hasDraggableColumnsRef: MaybeRef<boolean>, emit: EmitFn) => {
+    draggingColumns: {
+        dragging?: {
+            field: string;
+            label: string;
+            width?: number;
+            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;
+        };
+        target?: {
+            field: string;
+            label: string;
+            width?: number;
+            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;
+        };
+    };
+    draggingEventsForColumns: import("vue").ComputedRef<{
+        "column-dragstart"?: undefined;
+        "column-dragenter"?: undefined;
+        "column-drop"?: undefined;
+        "column-dragend"?: undefined;
+    } | {
+        "column-dragstart": (column: BentoColumn, e: DragEvent & Event) => void;
+        "column-dragenter": (column: BentoColumn) => void;
+        "column-drop": (column: BentoColumn) => void;
+        "column-dragend": () => void;
+    }>;
+    draggingEventsForRowCell: import("vue").ComputedRef<(column: BentoColumn) => {
+        dragenter?: undefined;
+        drop?: undefined;
+        dragover?: undefined;
+    } | {
+        dragenter: (e: DragEvent) => void;
+        drop: () => void;
+        dragover: (e: DragEvent) => void;
+    }>;
+    moveColumnToColumn: (moveColumnField: BentoColumn['field'], toColumnField: BentoColumn['field']) => void;
+};

package/dist/@types/components/data-grid/composables/useConfigSettings/useConfigSettings.d.ts

@@ -0,0 +1,68 @@
+import { MaybeRef } from '@/types';
+import { BentoColumn } from '../../data-grid.types';
+import type { EmitFn } from 'vue/types/v3-setup-context';
+export declare const useConfigSettings: (columnsRef: MaybeRef<BentoColumn[]>, emit: EmitFn) => {
+    onConfigSettingsUpdate: (isCompactView: boolean) => void;
+    onConfigSettingsColumnsUpdate: (newColumns: BentoColumn[]) => void;
+    columnSets: import("vue").ComputedRef<({
+        columnSet: (BentoColumn | {
+            field: string;
+            label: string;
+            width?: number;
+            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;
+        })[];
+        id: string;
+        isFrozenColumns: boolean;
+    } | {
+        columnSet: (BentoColumn | {
+            field: string;
+            label: string;
+            width?: number;
+            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;
+        })[];
+        id: string;
+        isFrozenColumns?: undefined;
+    })[]>;
+    sortedColumns: import("vue").ComputedRef<(BentoColumn | {
+        field: string;
+        label: string;
+        width?: number;
+        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;
+    })[]>;
+};

package/dist/@types/components/data-grid/composables/useResizer.d.ts

@@ -1,8 +1,10 @@
 import { Ref } from 'vue';
 import { BentoColumn, BentoColumnWidthOverridesLookup } from '../data-grid.types';
-export declare const useResizer: (columns: Ref<BentoColumn[]>, emit: (event: string, ...args: unknown[]) => void) => {
+import { DatagridColumnsEvent } from '../components/data-grid-columns/data-grid-columns-types';
+export declare const useResizer: (columns: Ref<BentoColumn[]>, emit: (event: DatagridColumnsEvent, ...args: unknown[]) => void) => {
     resizeData: Ref<BentoColumnWidthOverridesLookup>;
     allColumnRefs: import("vue").ToRefs<{}>;
     startResize: (hasResizableColumns: boolean, field: BentoColumn['field'], event: MouseEvent) => void;
+    isResizing: Ref<boolean>;
 };
 export default useResizer;

package/dist/@types/components/data-grid/composables/useSorter.d.ts

@@ -1,6 +1,7 @@
 import { Ref } from 'vue';
 import { BentoColumn, BentoDatagridSortByColumn, BentoDatagridSortDirection } from '../data-grid.types';
-export declare const useSorter: (sortBy: Ref<BentoDatagridSortByColumn[]>, columns: Ref<BentoColumn[]>, emit: (event: string, updatedSortBy: BentoDatagridSortByColumn[]) => void) => {
+import { DatagridColumnsEvent } from '../components/data-grid-columns/data-grid-columns-types';
+export declare const useSorter: (sortBy: Ref<BentoDatagridSortByColumn[]>, columns: Ref<BentoColumn[]>, emit: (event: DatagridColumnsEvent, updatedSortBy: BentoDatagridSortByColumn[]) => void) => {
     conditionalSortDirectionClasses: (field: string, direction: BentoDatagridSortDirection) => {
         'b-data-grid-columns__column-sort-icon--sorted': boolean;
     };

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

@@ -19,6 +19,7 @@ export interface BentoColumn {
     overflow?: BentoColumnOverflow;
     visible?: boolean;
     mandatory?: boolean;
+    frozen?: boolean;
 }
 export declare enum BentoDatagridStyleState {
     OUTLINE = "outline"