@adyen/bento-vue2 0.3.0 → 0.4.1

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

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     BentoAlertSeverityOption: typeof BentoAlertSeverityOption;
     BentoTypographyVariant: typeof BentoTypographyVariant;
     BentoTypographyElement: typeof BentoTypographyElement;
-}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "close-alert"[], string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, "close-alert"[], string, Readonly<import("vue").ExtractPropTypes<{
     severity: {
         type: PropType<BentoAlertSeverityOption>;
         default: BentoAlertSeverityOption;

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

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { BentoButtonVariant } from './button.types';
 import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
-import { Booleanish } from '../../types';
+import { Booleanish } from '@/types';
 declare const _default: import("vue").DefineComponent<{
     disabled: {
         type: BooleanConstructor;

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

@@ -1,4 +1,4 @@
-import type { VueNodeElement } from '../../../../types';
+import type { VueNodeElement } from '@/types';
 export interface BentoButtonActionObject {
     title: string;
     event: (event: Event) => void;

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

@@ -11,6 +11,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    closed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -33,13 +37,24 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     cardBodyConditionalClasses: import("vue").ComputedRef<{
         'b-card__body--expandable': boolean;
+        'b-card__body--without-header': boolean;
     }>;
     cardHeaderConditionalClasses: import("vue").ComputedRef<{
-        'b-card__header--with-body': boolean;
+        'b-card__header--expandable': boolean;
+        'b-card__header--without-body': boolean;
+    }>;
+    cardContentConditionalClasses: import("vue").ComputedRef<{
+        'b-card__content--without-header': boolean;
+        'b-card__content--expandable': boolean;
+    }>;
+    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>;
     tabIndex: import("vue").ComputedRef<0 | -1>;
+    showHeader: import("vue").ComputedRef<boolean>;
     onClick: () => void;
     toggleExpansion: () => void;
     hasSlot: (name: string) => boolean;
@@ -54,6 +69,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    closed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -68,6 +87,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: (value: BentoButtonActionsLayout) => boolean;
     };
 }>>, {
+    closed: boolean;
     background: BentoCardBackground;
     disabled: boolean;
     actions: BentoButtonActionsList;

package/dist/@types/components/country/composables/useCountryCapital/useCountryCapital.d.ts

@@ -1,4 +1,4 @@
-import { MaybeRef } from '../../../../types';
+import { MaybeRef } from '@/types';
 import VueI18n from 'vue-i18n';
 export declare const useCountryCapital: (code: MaybeRef<string>, locale: MaybeRef<string>, useFallback?: boolean) => import("vue").ComputedRef<VueI18n.TranslateResult>;
 export default useCountryCapital;

package/dist/@types/components/country/composables/useCountryName/useCountryName.d.ts

@@ -1,2 +1,2 @@
-import { MaybeRef } from '../../../../types';
+import { MaybeRef } from '@/types';
 export declare const useCountryName: (code: MaybeRef<string>, locale: MaybeRef<string>, useFallback?: boolean) => import("vue").ComputedRef<string>;

package/dist/@types/components/country/composables/useCountryPhoneCode/useCountryPhoneCode.d.ts

@@ -1,3 +1,3 @@
-import { MaybeRef } from '../../../../types';
+import { MaybeRef } from '@/types';
 export declare const useCountryPhoneCode: (countryCode: MaybeRef<string>) => import("vue").ComputedRef<any>;
 export default useCountryPhoneCode;

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { BentoTypographyElement } from '../typography';
+import { BentoTypographyElement } from '@/components/typography';
 import { BentoCountryCode, BentoCountryVariant } from './country.types';
 declare const _default: import("vue").DefineComponent<{
     code: {

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--draggable'?: undefined;
+    } | {
+        'b-data-grid-columns--draggable': 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,12 +107,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDatagridSortByColumn[]>;
         default: () => any[];
     };
-    gridColumnWidthStyle: {
-        type: ObjectConstructor;
-        required: true;
-    };
 }>>, {
+    draggingColumns: any;
+    hasDraggableColumns: boolean;
     hasResizableColumns: boolean;
+    isFrozenColumns: 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,39 @@
+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<{
+    visibleColumns: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    column: {
+        type: PropType<BentoColumn>;
+        required: true;
+    };
+}, {
+    isColumnVisibilityToggleDisabled: (fieldName: string, isMandatory: boolean) => boolean;
+    isFreezeIconOptionShown: import("vue").Ref<boolean>;
+    isColumnFrozen: import("vue").Ref<boolean>;
+    freezeIconConditionalClasses: import("vue").ComputedRef<{
+        "b-data-grid-config-settings-column-row__freeze-icon--frozen": boolean;
+    }>;
+    isColumnVisible: (fieldName: string) => boolean;
+    toggleColumnVisibility: (fieldName: string) => 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-columns" | "updated-column")[], string, Readonly<import("vue").ExtractPropTypes<{
+    visibleColumns: {
+        type: PropType<string[]>;
+        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.vue.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
-import { BentoButtonVariant } from '../../../button';
-import { BentoTypographyElement, BentoTypographyVariant } from '../../../typography';
-import { AdlLabelPosition } from '../../../../types';
+import { BentoButtonVariant } from '@/components/button';
+import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
+import { AdlLabelPosition } from '@/types';
 import { BentoColumn } from '../../data-grid.types';
 declare const _default: import("vue").DefineComponent<{
     columns: {
@@ -15,19 +15,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;
+    columnVisibility: import("vue").ComputedRef<string[]>;
+    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: (visibleColumns: string[]) => void;
+    emitFrozenColumns: (updatedColumn: BentoColumn) => void;
+    onClickOutside: () => void;
     AdlLabelPosition: typeof AdlLabelPosition;
     BentoTypographyElement: typeof BentoTypographyElement;
     BentoTypographyVariant: typeof BentoTypographyVariant;
@@ -49,7 +50,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, ("visible-columns" | "config-settings" | "frozen-columns")[], 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

@@ -1,6 +1,6 @@
 import { BentoColumn, BentoColumnWidthOverridesLookup } from '../../data-grid.types';
 import { CalculateColumnWidthOptions } from './useCalculateColumnWidth.types';
-import { MaybeRef } from '../../../../types';
+import { MaybeRef } from '@/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";
@@ -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,63 @@
+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;
+    }>;
+};

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

@@ -0,0 +1,8 @@
+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;
+    onColumnVisibilityChange: (columnIndexes: string[]) => void;
+    onColumnFreezeChange: (frozenColumnFields: string[]) => void;
+};

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

@@ -1,4 +1,4 @@
-import { BentoPagination } from '../pagination';
+import { BentoPagination } from '@/components/pagination';
 export declare enum BentoColumnOverflow {
     WRAP = "wrap",
     ELLIPSIS = "ellipsis"
@@ -19,6 +19,7 @@ export interface BentoColumn {
     overflow?: BentoColumnOverflow;
     visible?: boolean;
     mandatory?: boolean;
+    frozen?: boolean;
 }
 export declare enum BentoDatagridStyleState {
     OUTLINE = "outline"
@@ -62,5 +63,6 @@ export declare enum BentoDatagridEvent {
     FILTER_SEARCH_CLEAR = "filter-search-clear",
     COLUMNS = "columns",
     UPDATE_COLUMNS = "update:columns",
-    ROW_CLICK = "row-click"
+    ROW_CLICK = "row-click",
+    UPDATE_CONDENSED = "update:condensed"
 }