@adyen/bento-vue3 1.24.0 → 1.25.0

package/dist/@types/packages/vue2/src/components/date-range-picker/date-range-picker.vue.d.ts

@@ -282,14 +282,14 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     max: any;
     min: any;
     description: string;
-    optional: boolean;
-    readonly: boolean;
     isDateDisabled: any;
     firstDayOfWeek: any;
     maxRange: any;
     numberOfMonths: any;
     tooltipText: string;
+    optional: boolean;
     errorMessage: string;
+    readonly: boolean;
     allowTimeInput: boolean;
     granularities: any;
     quickSelectRanges: DateRangePickerCalendarRangeSelectorItems;

package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue.d.ts

@@ -259,9 +259,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     value: string;
     disabled: boolean;
     multiple: boolean;
-    readonly: boolean;
     open: boolean;
     ariaLabel: string;
+    readonly: boolean;
     additionalItemsSelected: string | number;
     alwaysComboboxIsInput: boolean;
     ariaLabelledby: string;

package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue.d.ts

@@ -260,9 +260,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     condensed: boolean;
     disabled: boolean;
     multiple: boolean;
-    readonly: boolean;
     open: boolean;
     ariaLabel: string;
+    readonly: boolean;
     additionalItemsSelected: string | number;
     ariaLabelledby: string;
     debounceTime: number;

package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-options-container/composables/use-dropdown-options-listbox.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from "../../../../../../../vue3/node_modules/vue";
-import { BentoListboxEvent, BentoListboxSelectedValue } from "../../../../../types";
+import { BentoListboxEvent, BentoListboxOptions } from "../../../../../types";
 import { BentoDropdownEvent } from '../../../dropdown.types';
 /**
  * A composable that handles all dropdown options option selecting logic & listeners.
@@ -11,7 +11,7 @@ import { BentoDropdownEvent } from '../../../dropdown.types';
  * @param isOpen The isOpen property passed into the dropdown options container component.
  * @param emit The emit function for the dropdown options container component.
  */
-export declare const useDropdownOptionsListbox: (selectedValue: Ref<BentoListboxSelectedValue>, multiple: Ref<boolean>, isOpen: Ref<boolean>, emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxSelectedValue) => void) => {
+export declare const useDropdownOptionsListbox: (selectedValue: Ref<BentoListboxOptions>, multiple: Ref<boolean>, isOpen: Ref<boolean>, emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxOptions) => void) => {
     actions: import("../../../../../../../vue3/node_modules/vue").ComputedRef<({
         title: string;
         event: () => void;
@@ -21,13 +21,19 @@ export declare const useDropdownOptionsListbox: (selectedValue: Ref<BentoListbox
         event: () => void;
         disabled?: undefined;
     })[]>;
-    internalSelectedValue: Ref<import("../../../../../types").BentoListboxValue | import("../../../../../types").BentoListboxValue[]>;
+    internalSelectedValue: Ref<{
+        data?: unknown;
+        description?: string;
+        value: import("../../../../../types").BentoListboxValue;
+        items?: any[];
+        label: string;
+    }[]>;
     listeners: {
-        select: (newSelectedValue: BentoListboxSelectedValue) => void;
+        select: (newSelectedValue: BentoListboxOptions) => void;
         "show-more": () => void;
-        "tab-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
-        "space-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
-        "enter-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
+        "tab-pressed": (newSelectedValue: BentoListboxOptions) => void;
+        "space-pressed": (newSelectedValue: BentoListboxOptions) => void;
+        "enter-pressed": (newSelectedValue: BentoListboxOptions) => void;
     };
     onEscapeKey: () => void;
     onOutsideDropdownClick: () => void;

package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
-import { BentoListboxOptions, BentoListboxSelectedValue } from "../../../../types";
+import { BentoListboxOptions } from "../../../../types";
 import { BentoDropdownEmptyStateProps, BentoDropdownLazyLoadType, BentoDropdownSize, BentoDropdownVirtulisationOptions } from '../../dropdown.types';
 /**
  * Dropdown options container.
@@ -128,7 +128,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
      * Set to an empty string `''` if you don't want any of the available options to be selected for single select
      */
     selectedValue: {
-        type: PropType<BentoListboxSelectedValue>;
+        type: PropType<BentoListboxOptions>;
         default: any;
     };
     /**
@@ -166,17 +166,17 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
 }, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
     "close-dropdown": () => void;
 } & {
-    "enter-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
+    "enter-pressed": (newSelectedValue: BentoListboxOptions) => void;
 } & {
     "escape-pressed": () => void;
 } & {
-    select: (newSelectedValue: BentoListboxSelectedValue) => void;
+    select: (newSelectedValue: BentoListboxOptions) => void;
 } & {
     "show-more": () => void;
 } & {
-    "space-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
+    "space-pressed": (newSelectedValue: BentoListboxOptions) => void;
 } & {
-    "tab-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
+    "tab-pressed": (newSelectedValue: BentoListboxOptions) => 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<{
     /**
      * Defines a string value that labels an interactive element.
@@ -282,7 +282,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
      * Set to an empty string `''` if you don't want any of the available options to be selected for single select
      */
     selectedValue: {
-        type: PropType<BentoListboxSelectedValue>;
+        type: PropType<BentoListboxOptions>;
         default: any;
     };
     /**
@@ -316,10 +316,10 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         default: boolean;
     };
 }>> & {
-    onSelect?: (newSelectedValue: BentoListboxSelectedValue) => any;
-    "onEnter-pressed"?: (newSelectedValue: BentoListboxSelectedValue) => any;
-    "onSpace-pressed"?: (newSelectedValue: BentoListboxSelectedValue) => any;
-    "onTab-pressed"?: (newSelectedValue: BentoListboxSelectedValue) => any;
+    onSelect?: (newSelectedValue: BentoListboxOptions) => any;
+    "onEnter-pressed"?: (newSelectedValue: BentoListboxOptions) => any;
+    "onSpace-pressed"?: (newSelectedValue: BentoListboxOptions) => any;
+    "onTab-pressed"?: (newSelectedValue: BentoListboxOptions) => any;
     "onShow-more"?: () => any;
     "onEscape-pressed"?: () => any;
     "onClose-dropdown"?: () => any;
@@ -327,14 +327,14 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     disabled: boolean;
     multiple: boolean;
     isOptionDisabled: (optionValue: import("../../../../types").BentoListboxOptionItem) => boolean;
-    selectedValue: BentoListboxSelectedValue;
+    selectedValue: BentoListboxOptions;
     staticCategories: boolean;
     ariaLabel: string;
     searching: any;
-    loading: boolean;
-    emptyState: BentoDropdownEmptyStateProps;
     hasMoreItems: boolean;
     lazyLoadType: "button" | "none" | "automatic" | BentoDropdownLazyLoadType;
+    loading: boolean;
+    emptyState: BentoDropdownEmptyStateProps;
     virtualScroll: BentoDropdownVirtulisationOptions;
     inputSize: "DropdownInputDefault" | "DropdownInputSmall" | BentoDropdownSize;
 }>, Record<NonNullable<string | number>, (_: any) => any>>;

package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue.d.ts

@@ -199,9 +199,9 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
 }, {
     value: string;
     disabled: boolean;
-    readonly: boolean;
     open: boolean;
     ariaLabel: string;
+    readonly: boolean;
     additionalItemsSelected: string | number;
     ariaLabelledby: string;
     debounceTime: number;

package/dist/@types/packages/vue2/src/components/dropdown/composables/use-display-value.d.ts

@@ -1,4 +1,4 @@
-import { UseDisplayValue } from './use-display-value.types';
+import { UseDisplayValueOptions } from './use-display-value.types';
 /**
  * Generates the `displayValue` for the Dropdown based on
  * the selection, the placeholder or it can be empty if there's nothing to show.
@@ -9,4 +9,4 @@ import { UseDisplayValue } from './use-display-value.types';
  * @param options Options needed to calculate the display value based on the type of Dropdown (single, multi, category)
  * @returns The text to be displayed by the dropdown
  */
-export declare const useDisplayValue: UseDisplayValue;
+export declare const useDisplayValue: ({ items, placeholder, selectedValues }: UseDisplayValueOptions) => import("../../../../../vue3/node_modules/vue").ComputedRef<string>;

package/dist/@types/packages/vue2/src/components/dropdown/composables/use-display-value.types.d.ts

@@ -1,28 +1,7 @@
-import { BentoListboxOptions, BentoListboxSelectedValue } from "../../../types";
+import { BentoListboxOptions } from "../../../types";
 import { Ref } from "../../../../../vue3/node_modules/vue";
-import type { ComputedRef } from "../../../../../vue3/node_modules/vue";
-export interface SingleSelectOptions {
+export interface UseDisplayValueOptions {
     items: Ref<BentoListboxOptions>;
     placeholder: Ref<string>;
-    selectedValue: Ref<BentoListboxSelectedValue>;
-    staticCategories: boolean;
+    selectedValues: Ref<BentoListboxOptions>;
 }
-export interface MultiSelectOptions {
-    items: Ref<BentoListboxOptions>;
-    placeholder: Ref<string>;
-    selectedValues: Ref<BentoListboxSelectedValue>;
-}
-export interface CategoryMultiSelectOptions {
-    items: Ref<BentoListboxOptions>;
-    placeholder: Ref<string>;
-    selectedValues: Ref<BentoListboxSelectedValue>;
-}
-interface UseDisplayValueOptions {
-    items: Ref<BentoListboxOptions>;
-    placeholder: Ref<string>;
-    value: Ref<BentoListboxSelectedValue>;
-    multiple: Ref<boolean>;
-    staticCategories: Ref<boolean>;
-}
-export type UseDisplayValue = (options: UseDisplayValueOptions) => ComputedRef<string>;
-export {};

package/dist/@types/packages/vue2/src/components/dropdown/dropdown.vue.d.ts

@@ -454,18 +454,18 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
     placeholder: string;
     size: "DropdownInputDefault" | "DropdownInputSmall" | BentoDropdownSize;
     description: string;
-    optional: boolean;
-    readonly: boolean;
     tooltipText: string;
+    optional: boolean;
     errorMessage: string;
     items: BentoListboxOptions;
     isOptionDisabled: (optionValue: import("../../types").BentoListboxOptionItem) => boolean;
     staticCategories: boolean;
     ariaLabel: string;
-    loading: boolean;
-    emptyState: BentoDropdownEmptyStateProps;
+    readonly: boolean;
     hasMoreItems: boolean;
     lazyLoadType: "button" | "none" | "automatic" | BentoDropdownLazyLoadType;
+    loading: boolean;
+    emptyState: BentoDropdownEmptyStateProps;
     virtualScroll: BentoDropdownVirtulisationOptions;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;

package/dist/@types/packages/vue2/src/components/empty-state/empty-state.vue.d.ts

@@ -134,8 +134,8 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
     title: string;
     image: "1-generic-use" | "2-generic-use" | "3-generic-use" | "4-generic-use" | "adding-payment-methods" | "adyen-giving" | "internal-error" | "no-results-found" | "notifications-cleared" | "page-not-found" | "planned-maintenance" | "referrals" | "success" | "upload-files" | "wrong-environment";
     variant: "condensed" | "full-page" | "embedded" | "basic";
-    description: string;
     action: BentoButtonActionObject;
+    description: string;
     headingEl: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
 }>, {
     title: (_: {}) => any;

package/dist/@types/packages/vue2/src/components/filter-bar/components/range-filter/index.d.ts

@@ -0,0 +1 @@
+export { default as BentoRangeFilter } from './range-filter.vue';

package/dist/@types/packages/vue2/src/components/filter-bar/components/select-filter/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectFilterButton } from './select-filter-button/select-filter-button.vue';
+export { default as SelectFilterDropdown } from './select-filter-dropdown/select-filter-dropdown.vue';

package/dist/@types/packages/vue2/src/components/filter-bar/components/select-filter/components/select-filter-button/select-filter-button.vue.d.ts

@@ -0,0 +1,148 @@
+import { PropType } from "../../../../../../../../vue3/node_modules/vue";
+import { BentoListboxSelectedValue } from "../../../../../../types";
+import { BentoSelectFilterOptions } from '../../../../filter-bar.types';
+/**
+ * The Listbox filter displays a listbox of items
+ * passed in the "options.listboxItems" property.
+ *
+ * @example
+ * import { BentoSelectFilter } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoSelectFilter },
+ *     template: `
+ *          <bento-select-filter
+ *              :field="filter.field"
+ *              :label="filter.label"
+ *              :options="filter.options"
+ *              :value="filter.value"
+ *              @update="updateFilterHandler"
+ *          >
+ *     `
+ * }
+ */
+declare const _default: __VLS_WithTemplateSlots<import("../../../../../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Default value of the filter to reset to.
+     *
+     */
+    defaultValue: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label text to be displayed
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     */
+    onlySlot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with.
+     *
+     * @default undefined
+     */
+    options: {
+        type: PropType<BentoSelectFilterOptions>;
+        default: any;
+    };
+    /**
+     * Current value of the filter
+     *
+     * @default undefined
+     */
+    value: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+}, {}, unknown, {}, {}, import("../../../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
+    input: (value: any) => void;
+} & {
+    update: (value: any) => 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<{
+    /**
+     * Default value of the filter to reset to.
+     *
+     */
+    defaultValue: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label text to be displayed
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     */
+    onlySlot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with.
+     *
+     * @default undefined
+     */
+    options: {
+        type: PropType<BentoSelectFilterOptions>;
+        default: any;
+    };
+    /**
+     * Current value of the filter
+     *
+     * @default undefined
+     */
+    value: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+}>> & {
+    onInput?: (value: any) => any;
+    onUpdate?: (value: any) => any;
+}, {
+    value: BentoListboxSelectedValue;
+    defaultValue: BentoListboxSelectedValue;
+    options: BentoSelectFilterOptions;
+    onlySlot: boolean;
+}>, Record<NonNullable<string | number>, (_: any) => any>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/components/filter-bar/components/select-filter/components/select-filter-dropdown/select-filter-dropdown.vue.d.ts

@@ -0,0 +1,150 @@
+import { PropType } from "../../../../../../../../vue3/node_modules/vue";
+import { BentoListboxSelectedValue } from "../../../../../../types";
+import { BentoSelectFilterOptions } from '../../../../filter-bar.types';
+/**
+ * The Listbox filter displays a listbox of items
+ * passed in the "options.listboxItems" property.
+ *
+ * @example
+ * import { BentoSelectFilter } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoSelectFilter },
+ *     template: `
+ *          <bento-select-filter
+ *              :field="filter.field"
+ *              :label="filter.label"
+ *              :options="filter.options"
+ *              :value="filter.value"
+ *              @update="updateFilterHandler"
+ *          >
+ *     `
+ * }
+ */
+declare const _default: __VLS_WithTemplateSlots<import("../../../../../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Default value of the filter to reset to.
+     *
+     */
+    defaultValue: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label text to be displayed
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     *
+     */
+    onlySlot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with.
+     *
+     * @default undefined
+     */
+    options: {
+        type: PropType<BentoSelectFilterOptions>;
+        default: any;
+    };
+    /**
+     * Current value of the filter
+     *
+     * @default undefined
+     */
+    value: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+}, {}, unknown, {}, {}, import("../../../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
+    input: (updatedProps: any) => void;
+} & {
+    update: (updatedProps: any) => 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<{
+    /**
+     * Default value of the filter to reset to.
+     *
+     */
+    defaultValue: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Label text to be displayed
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     *
+     */
+    onlySlot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with.
+     *
+     * @default undefined
+     */
+    options: {
+        type: PropType<BentoSelectFilterOptions>;
+        default: any;
+    };
+    /**
+     * Current value of the filter
+     *
+     * @default undefined
+     */
+    value: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+}>> & {
+    onInput?: (updatedProps: any) => any;
+    onUpdate?: (updatedProps: any) => any;
+}, {
+    value: BentoListboxSelectedValue;
+    defaultValue: BentoListboxSelectedValue;
+    options: BentoSelectFilterOptions;
+    onlySlot: boolean;
+}>, Record<NonNullable<string | number>, (_: any) => any>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};