@adyen/bento-vue3 1.21.1 → 1.22.0

package/dist/@types/packages/vue2/src/components/country/composables/use-country-capital/use-country-capital.d.ts

@@ -1,3 +1,8 @@
 import { MaybeRef } from "../../../../types";
+/**
+ * Maps an ISO code to the country's translated capital city.
+ *
+ * @returns a translated country name
+ */
 export declare const useCountryCapital: (code: MaybeRef<string>, locale: MaybeRef<string>, useFallback?: boolean) => import("../../../../../../vue3/node_modules/vue").ComputedRef<string>;
 export default useCountryCapital;

package/dist/@types/packages/vue2/src/components/country/composables/use-country-name/use-country-name.d.ts

@@ -1,2 +1,7 @@
 import { MaybeRef } from "../../../../types";
+/**
+ * Maps an ISO code to it's translated country name.
+ *
+ * @returns a translated country name
+ */
 export declare const useCountryName: (code: MaybeRef<string>, locale: MaybeRef<string>, useFallback?: boolean) => import("../../../../../../vue3/node_modules/vue").ComputedRef<string>;

package/dist/@types/packages/vue2/src/components/country/composables/use-country-phone-code/use-country-phon-code.d.ts

@@ -1,3 +1,9 @@
 import { MaybeRef } from "../../../../types";
+/**
+ * Retrieves a country's phone number code.
+ *
+ * @param countryCode 2 character code in ISO 3166-1 alpha-2 format
+ * @returns Country's phone code
+ */
 export declare const useCountryPhoneCode: (countryCode: MaybeRef<string>) => import("../../../../../../vue3/node_modules/vue").ComputedRef<string>;
 export default useCountryPhoneCode;

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

@@ -1,8 +1,12 @@
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare enum BentoCountryVariant {
     ISO = "iso",
     NAME = "name",
     PHONE_CODE = "phone_code",
     CAPITAL = "capital",
+    /** deprecated Use any of the other BentoCountry variants instead OR BentoTypography component for custom text */
     CUSTOM = "custom"
 }
 export declare enum BentoCountryCode {

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

@@ -1,15 +1,39 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
 import { BentoCountryCode, BentoCountryVariant } from './country.types';
+/**
+ * A component to display a country's label.
+ * The label comes in four variates: iso code, country name, phone number code or capital city.
+ *
+ * @example
+ * import { BentoCountry, BentoCountryCode } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoCountry },
+ *     template: `
+ *          <bento-country :code="BentoCountryCode.NL" />
+ *     `
+ * }
+ */
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).
+     */
     code: {
         type: PropType<"MM" | "BD" | "BE" | "BF" | "BG" | "BA" | "BB" | "WF" | "BL" | "BM" | "BN" | "BO" | "BH" | "BI" | "BJ" | "BT" | "JM" | "BV" | "BW" | "WS" | "BQ" | "BR" | "BS" | "JE" | "BY" | "BZ" | "RU" | "RW" | "RS" | "TL" | "RE" | "TM" | "TJ" | "RO" | "TK" | "GW" | "GU" | "GT" | "GS" | "GR" | "GQ" | "GP" | "JP" | "GY" | "GG" | "GF" | "GE" | "GD" | "GB" | "GA" | "SV" | "GN" | "GM" | "GL" | "GI" | "GH" | "OM" | "TN" | "JO" | "HR" | "HT" | "HU" | "HK" | "HN" | "HM" | "VE" | "PR" | "PS" | "PW" | "PT" | "SJ" | "PY" | "IQ" | "PA" | "PF" | "PG" | "PE" | "PK" | "PH" | "PN" | "PL" | "PM" | "ZM" | "EH" | "EE" | "EG" | "ZA" | "EC" | "IT" | "VN" | "SB" | "ET" | "SO" | "ZW" | "SA" | "ES" | "ER" | "ME" | "MD" | "MG" | "MF" | "MA" | "MC" | "UZ" | "ML" | "MO" | "MN" | "MH" | "MK" | "MU" | "MT" | "MW" | "MV" | "MQ" | "MP" | "MS" | "MR" | "IM" | "UG" | "TZ" | "MY" | "MX" | "IL" | "FR" | "IO" | "SH" | "FI" | "FJ" | "FK" | "FM" | "FO" | "NI" | "NL" | "NO" | "NA" | "VU" | "NC" | "NE" | "NF" | "NG" | "NZ" | "NP" | "NR" | "NU" | "CK" | "XK" | "CI" | "CH" | "CO" | "CN" | "CM" | "CL" | "CC" | "CA" | "CG" | "CF" | "CD" | "CZ" | "CY" | "CX" | "CR" | "CW" | "CV" | "CU" | "SZ" | "SY" | "SX" | "KG" | "KE" | "SS" | "SR" | "KI" | "KH" | "KN" | "KM" | "ST" | "SK" | "KR" | "SI" | "KP" | "KW" | "SN" | "SM" | "SL" | "SC" | "KZ" | "KY" | "SG" | "SE" | "SD" | "DO" | "DM" | "DJ" | "DK" | "VG" | "DE" | "YE" | "DZ" | "US" | "UY" | "YT" | "UM" | "LB" | "LC" | "LA" | "TV" | "TW" | "TT" | "TR" | "LK" | "LI" | "LV" | "TO" | "LT" | "LU" | "LR" | "LS" | "TH" | "TF" | "TG" | "TD" | "TC" | "LY" | "VA" | "VC" | "AE" | "AD" | "AG" | "AF" | "AI" | "VI" | "IS" | "IR" | "AM" | "AL" | "AO" | "AQ" | "AS" | "AR" | "AU" | "AT" | "AW" | "IN" | "AX" | "AZ" | "IE" | "ID" | "UA" | "QA" | "MZ" | "ZZ" | BentoCountryCode>;
         default: BentoCountryCode;
         validator: (value: BentoCountryCode) => boolean;
     };
+    /**
+     * Custom label text.
+     */
     label: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Which label variant to display.
+     * @values iso, name, phone_code, capital
+     */
     variant: {
         type: PropType<"name" | "custom" | "iso" | "phone_code" | "capital" | BentoCountryVariant>;
         default: BentoCountryVariant;
@@ -20,15 +44,25 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     countryLabel: import("../../../../vue3/node_modules/vue").Ref<string>;
     isSummaryGridLayout: boolean;
 }, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, 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<{
+    /**
+     * Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).
+     */
     code: {
         type: PropType<"MM" | "BD" | "BE" | "BF" | "BG" | "BA" | "BB" | "WF" | "BL" | "BM" | "BN" | "BO" | "BH" | "BI" | "BJ" | "BT" | "JM" | "BV" | "BW" | "WS" | "BQ" | "BR" | "BS" | "JE" | "BY" | "BZ" | "RU" | "RW" | "RS" | "TL" | "RE" | "TM" | "TJ" | "RO" | "TK" | "GW" | "GU" | "GT" | "GS" | "GR" | "GQ" | "GP" | "JP" | "GY" | "GG" | "GF" | "GE" | "GD" | "GB" | "GA" | "SV" | "GN" | "GM" | "GL" | "GI" | "GH" | "OM" | "TN" | "JO" | "HR" | "HT" | "HU" | "HK" | "HN" | "HM" | "VE" | "PR" | "PS" | "PW" | "PT" | "SJ" | "PY" | "IQ" | "PA" | "PF" | "PG" | "PE" | "PK" | "PH" | "PN" | "PL" | "PM" | "ZM" | "EH" | "EE" | "EG" | "ZA" | "EC" | "IT" | "VN" | "SB" | "ET" | "SO" | "ZW" | "SA" | "ES" | "ER" | "ME" | "MD" | "MG" | "MF" | "MA" | "MC" | "UZ" | "ML" | "MO" | "MN" | "MH" | "MK" | "MU" | "MT" | "MW" | "MV" | "MQ" | "MP" | "MS" | "MR" | "IM" | "UG" | "TZ" | "MY" | "MX" | "IL" | "FR" | "IO" | "SH" | "FI" | "FJ" | "FK" | "FM" | "FO" | "NI" | "NL" | "NO" | "NA" | "VU" | "NC" | "NE" | "NF" | "NG" | "NZ" | "NP" | "NR" | "NU" | "CK" | "XK" | "CI" | "CH" | "CO" | "CN" | "CM" | "CL" | "CC" | "CA" | "CG" | "CF" | "CD" | "CZ" | "CY" | "CX" | "CR" | "CW" | "CV" | "CU" | "SZ" | "SY" | "SX" | "KG" | "KE" | "SS" | "SR" | "KI" | "KH" | "KN" | "KM" | "ST" | "SK" | "KR" | "SI" | "KP" | "KW" | "SN" | "SM" | "SL" | "SC" | "KZ" | "KY" | "SG" | "SE" | "SD" | "DO" | "DM" | "DJ" | "DK" | "VG" | "DE" | "YE" | "DZ" | "US" | "UY" | "YT" | "UM" | "LB" | "LC" | "LA" | "TV" | "TW" | "TT" | "TR" | "LK" | "LI" | "LV" | "TO" | "LT" | "LU" | "LR" | "LS" | "TH" | "TF" | "TG" | "TD" | "TC" | "LY" | "VA" | "VC" | "AE" | "AD" | "AG" | "AF" | "AI" | "VI" | "IS" | "IR" | "AM" | "AL" | "AO" | "AQ" | "AS" | "AR" | "AU" | "AT" | "AW" | "IN" | "AX" | "AZ" | "IE" | "ID" | "UA" | "QA" | "MZ" | "ZZ" | BentoCountryCode>;
         default: BentoCountryCode;
         validator: (value: BentoCountryCode) => boolean;
     };
+    /**
+     * Custom label text.
+     */
     label: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Which label variant to display.
+     * @values iso, name, phone_code, capital
+     */
     variant: {
         type: PropType<"name" | "custom" | "iso" | "phone_code" | "capital" | BentoCountryVariant>;
         default: BentoCountryVariant;

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

@@ -1,15 +1,37 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
 import { BentoCurrencyISOCode } from "./currency.types";
+/**
+ * A Currency component is used to display a formatted currency value.
+ *
+ * @example
+ * import { BentoCurrency } from '@adyen/adl-vue-components';
+ * import { BentoCurrency, BentoCurrencyCode } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoCurrency },
+ *     template: `
+ *          <bento-currency :currency="CurrencyCode.USD">
+ *              76.33
+ *          </bento-currency>
+ *     `
+ * }
+ */
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
     currency: {
         type: PropType<"TOP" | "CVE" | "DJF" | "GNF" | "IDR" | "JPY" | "KMF" | "KRW" | "PYG" | "RWF" | "UGX" | "VND" | "VUV" | "XAF" | "XOF" | "XPF" | "MRO" | "BHD" | "IQD" | "JOD" | "KWD" | "LYD" | "OMR" | "TND" | "AFA" | "ALL" | "DZD" | "AOA" | "ARS" | "AMD" | "AWG" | "AUD" | "AZN" | "BSD" | "BDT" | "BBD" | "BYR" | "BEF" | "BZD" | "BMD" | "BTN" | "BTC" | "BOB" | "BAM" | "BWP" | "BRL" | "GBP" | "BND" | "BGN" | "BIF" | "KHR" | "CAD" | "KYD" | "CLP" | "CLF" | "CNY" | "COP" | "CDF" | "CRC" | "HRK" | "CUC" | "CZK" | "DKK" | "DOP" | "XCD" | "EGP" | "ERN" | "EEK" | "ETB" | "EUR" | "FKP" | "FJD" | "GMD" | "GEL" | "DEM" | "GHS" | "GIP" | "GRD" | "GTQ" | "GYD" | "HTG" | "HNL" | "HKD" | "HUF" | "ISK" | "INR" | "IRR" | "ILS" | "ITL" | "JMD" | "KZT" | "KES" | "KGS" | "LAK" | "LVL" | "LBP" | "LSL" | "LRD" | "LTC" | "LTL" | "MOP" | "MKD" | "MGA" | "MWK" | "MYR" | "MVR" | "MUR" | "MXN" | "MDL" | "MNT" | "MAD" | "MZM" | "MMK" | "NAD" | "NPR" | "ANG" | "TWD" | "NZD" | "NIO" | "NGN" | "KPW" | "NOK" | "PKR" | "PAB" | "PGK" | "PEN" | "PHP" | "PLN" | "QAR" | "RON" | "RUB" | "SVC" | "WST" | "STD" | "SAR" | "RSD" | "SCR" | "SLL" | "SGD" | "SKK" | "SBD" | "SOS" | "ZAR" | "SSP" | "XDR" | "LKR" | "SHP" | "SDG" | "SRD" | "SZL" | "SEK" | "CHF" | "SYP" | "TJS" | "TZS" | "THB" | "TTD" | "TRY" | "TMT" | "UAH" | "AED" | "UYU" | "USD" | "UZS" | "VEF" | "YER" | "ZMK" | "ZWL" | BentoCurrencyISOCode>;
         default: BentoCurrencyISOCode;
         validator: (value: BentoCurrencyISOCode) => boolean;
     };
+    /**
+     * Accepts currency value in major units instead of minor ones
+     */
     majorUnits: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable the default typography for the component. Only use this when the component is inside another typography component.
+     */
     disableTypography: {
         type: BooleanConstructor;
         default: boolean;
@@ -22,10 +44,16 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         default: BentoCurrencyISOCode;
         validator: (value: BentoCurrencyISOCode) => boolean;
     };
+    /**
+     * Accepts currency value in major units instead of minor ones
+     */
     majorUnits: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable the default typography for the component. Only use this when the component is inside another typography component.
+     */
     disableTypography: {
         type: BooleanConstructor;
         default: boolean;

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

@@ -2,15 +2,31 @@ import { PropType } from "../../../../../../vue3/node_modules/vue";
 import { BentoColumn, BentoDatagridDataItem, BentoDatagridDataItemId, BentoDatagridGetDataItemIdFn, BentoDatagridIsDataItemDisabledFn } from "../../data-grid.types";
 import { DataGridCellColumnSet, DataGridCellDragEventsForColumn } from './data-grid-cell.types';
 import type { BentoDatagridDraggingColumnState } from '../data-grid-columns/data-grid-columns.types';
+/**
+ * Internal component to display the BentoDataGrid cells.
+ *
+ * The component can also render the selecting row checkbox as well as cell actions.
+ *
+ * @example
+ * <data-grid-cell
+ *
+ * />
+ */
 declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/node_modules/vue").DefineComponent<{
     draggingEventsForRowCell: {
         type: PropType<DataGridCellDragEventsForColumn>;
         required: true;
     };
+    /**
+     * The columns sets including
+     */
     columnSets: {
         type: PropType<DataGridCellColumnSet[]>;
         required: true;
     };
+    /**
+     * The columns set we are iterating over
+     */
     column: {
         type: PropType<BentoColumn>;
         required: true;
@@ -23,18 +39,32 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: NumberConstructor;
         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;
     };
+    /**
+     * 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;
     };
+    /**
+     * 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;
@@ -43,6 +73,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The row data object
+     */
     rowData: {
         type: PropType<BentoDatagridDataItem>;
         required: true;
@@ -68,10 +101,16 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: PropType<DataGridCellDragEventsForColumn>;
         required: true;
     };
+    /**
+     * The columns sets including
+     */
     columnSets: {
         type: PropType<DataGridCellColumnSet[]>;
         required: true;
     };
+    /**
+     * The columns set we are iterating over
+     */
     column: {
         type: PropType<BentoColumn>;
         required: true;
@@ -84,18 +123,32 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: NumberConstructor;
         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;
     };
+    /**
+     * 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;
     };
+    /**
+     * 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;
@@ -104,6 +157,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The row data object
+     */
     rowData: {
         type: PropType<BentoDatagridDataItem>;
         required: true;

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

@@ -1,30 +1,83 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
 import { BentoDatagridDataItem } from "../../data-grid.types";
 import type { BentoColumnCellActions } from './data-grid-cell-actions.types';
+/**
+ * Internal component to display the data-grid actions.
+ * There are 4 different pre-defined buttons that can be used by using the `variant` property.
+ *
+ * The component renders buttons or a menu depending on the actions provided.
+ *
+ * @example
+ * <data-grid-cell-actions
+ *   :cell-actions="[
+ *          { variant: 'edit', event: () => {} },
+ *          {
+ *               variant: 'more',
+ *               isShort: true,
+ *               menuData: [
+ *                   {
+ *                       text: 'Cancel payment',
+ *                       handler: () => {}),
+ *                       critical: true,
+ *                   },
+ *                   {
+ *                       text: 'Transfer payment',
+ *                       handler: () => {},
+ *                   },
+ *                   {
+ *                       text: 'Delete payment',
+ *                       handler: () => {},
+ *                       disabled: true,
+ *                   },
+ *               ],
+ *           },
+ *   ]"
+ *   column-key="payment"
+ *   :row-data-item="rowData"
+ * />
+ */
 declare const _default: import("../../../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Column definitions using 'key' to relate to data object.
+     */
     cellActions: {
         type: PropType<BentoColumnCellActions>;
         required: true;
         validator: (value: BentoColumnCellActions) => boolean;
     };
+    /**
+     * The column field key.
+     */
     columnKey: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * The row data item object.
+     */
     rowDataItem: {
         type: PropType<BentoDatagridDataItem>;
         required: true;
     };
 }, {}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../../../vue3/node_modules/vue").VNodeProps & import("../../../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../../../vue3/node_modules/vue").ExtractPropTypes<{
+    /**
+     * Column definitions using 'key' to relate to data object.
+     */
     cellActions: {
         type: PropType<BentoColumnCellActions>;
         required: true;
         validator: (value: BentoColumnCellActions) => boolean;
     };
+    /**
+     * The column field key.
+     */
     columnKey: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * The row data item object.
+     */
     rowDataItem: {
         type: PropType<BentoDatagridDataItem>;
         required: true;

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

@@ -1,4 +1,7 @@
 import { BentoColumn } from '../../data-grid.types';
+/**
+ * All the emit events provided by the DatagridColumns component
+ */
 export declare enum DatagridColumnsEvent {
     COLUMN_RESIZE = "column-resize",
     COLUMN_RESIZING = "column-resizing",
@@ -14,6 +17,12 @@ export declare enum DatagridColumnsEvent {
     COLUMN_DRAG_END = "column-dragend",
     COLUMN_DROP = "column-drop"
 }
+/**
+ * The Datagrid column dragging state.
+ * @interface BentoDatagridDraggingColumnState
+ * @field dragging - The column currently being dragged.
+ * @field target - The column being dragged over during dragging another column.
+ */
 export interface BentoDatagridDraggingColumnState {
     dragging?: BentoColumn;
     dragToLeft?: boolean;