@adyen/bento-vue3 1.21.1 → 1.22.0

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

@@ -1,3 +1,6 @@
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare enum BentoButtonVariant {
     PRIMARY = "primary",
     SECONDARY = "secondary",

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

@@ -1,3 +1,6 @@
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare enum BentoLinkVariant {
     DEFAULT = "default",
     QUIET = "quiet"

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

@@ -1,11 +1,44 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
 import type { BentoAccordionTitleSize } from './accordion.types';
+/**
+ * An accordion is a vertical stack of interactive headers used to reveal or hide
+ * sections of content associated with these headers.
+ *
+ * This component must only have `BentoAccordionItem` components in its default slot.
+ *
+ * Accordion items should be collapsed by default.
+ *
+ * @example
+ * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoAccordion, BentoAccordionItem },
+ *     template: `
+ *          <bento-accordion>
+ *              <bento-accordion-item title="Item 1">
+ *                  Content for item 1
+ *              </bento-accordion-item>
+ *              <bento-accordion-item title="Item 2">
+ *                  Content for item 2
+ *              </bento-accordion-item>
+ *          </bento-accordion>
+ *     `
+ * }
+ */
 declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Controls accordion title size.
+     * @values default, small
+     */
     titleSize: {
         type: PropType<BentoAccordionTitleSize>;
         default: string;
     };
 }, {}, 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<{
+    /**
+     * Controls accordion title size.
+     * @values default, small
+     */
     titleSize: {
         type: PropType<BentoAccordionTitleSize>;
         default: string;

package/dist/@types/packages/vue2/src/components/accordion/components/accordion-item.vue.d.ts

@@ -1,8 +1,37 @@
+/**
+ * An accordion item is an interactive header used to reveal or hide a
+ * section of content associated with this header.
+ *
+ * This component must always be wrapped by a `BentoAccordion` component.
+ *
+ * @example
+ * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoAccordion, BentoAccordionItem },
+ *     template: `
+ *          <bento-accordion>
+ *              <bento-accordion-item title="Item 1">
+ *                  Content for item 1
+ *              </bento-accordion-item>
+ *              <bento-accordion-item title="Item 2">
+ *                  Content for item 2
+ *              </bento-accordion-item>
+ *          </bento-accordion>
+ *     `
+ * }
+ */
 declare const _default: __VLS_WithTemplateSlots<import("../../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Sets the title of the accordion item.
+     */
     title: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * Controls if the content is visible or hidden.
+     */
     isExpanded: {
         type: BooleanConstructor;
         default: boolean;
@@ -10,10 +39,16 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../vue3/node
 }, {}, unknown, {}, {}, import("../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
     "update:is-expanded": (value: boolean) => 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<{
+    /**
+     * Sets the title of the accordion item.
+     */
     title: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * Controls if the content is visible or hidden.
+     */
     isExpanded: {
         type: BooleanConstructor;
         default: boolean;

package/dist/@types/packages/vue2/src/components/action-bar/action-bar.vue.d.ts

@@ -1,28 +1,84 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
 import { BentoButtonActionsList } from "../button";
 import { type BentoActionBarVariant } from "./action-bar.types";
+/**
+ * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.
+ *
+ * @example
+ * import { BentoActionBar } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoActionBar },
+ *     template: `
+ *          <bento-action-bar
+ *               :actions='[
+ *                   {
+ *                       title: 'Delete',
+ *                       critical: true,
+ *                       icon: BinIcon,
+ *                       event: () => true,
+ *                   },
+ *                   {
+ *                       title: 'Edit',
+ *                       icon: EditIcon,
+ *                       event: () => true,
+ *                   }
+ *               ]'
+ *               @close="closeAction"
+ *               :item-counter="5"
+ *           />
+ *     `
+ * }
+ */
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * List of actions that will be used to render the buttons.
+     * Required and used for the `default` variant.
+     *
+     * Each object in the list should have a `title`, an `event` and,
+     * optionally, an `icon`.
+     *
+     * The component will display 4 actions and the hide the rest inside a menu.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     */
     actions: {
         type: PropType<BentoButtonActionsList>;
         default: () => any[];
     };
+    /**
+     * How many actions should be visible outside the menu, cannot be more than 4
+     */
     visibleActions: {
         type: NumberConstructor;
         default: number;
         validator: (value: number) => boolean;
     };
+    /**
+     * Use when there are sticky elements at the bottom, like sticky pagination
+     */
     extraBottomSpacing: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Show how many items are selected
+     */
     itemCounter: {
         type: NumberConstructor;
         required: true;
     };
+    /**
+     * Label for the selection, e.g. 'selected'/'changed'
+     */
     selectionLabel: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Variant for the action bar
+     * @values default, confirmation
+     */
     variant: {
         type: PropType<BentoActionBarVariant>;
         default: string;
@@ -34,27 +90,54 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
 } & {
     save: () => 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<{
+    /**
+     * List of actions that will be used to render the buttons.
+     * Required and used for the `default` variant.
+     *
+     * Each object in the list should have a `title`, an `event` and,
+     * optionally, an `icon`.
+     *
+     * The component will display 4 actions and the hide the rest inside a menu.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     */
     actions: {
         type: PropType<BentoButtonActionsList>;
         default: () => any[];
     };
+    /**
+     * How many actions should be visible outside the menu, cannot be more than 4
+     */
     visibleActions: {
         type: NumberConstructor;
         default: number;
         validator: (value: number) => boolean;
     };
+    /**
+     * Use when there are sticky elements at the bottom, like sticky pagination
+     */
     extraBottomSpacing: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Show how many items are selected
+     */
     itemCounter: {
         type: NumberConstructor;
         required: true;
     };
+    /**
+     * Label for the selection, e.g. 'selected'/'changed'
+     */
     selectionLabel: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Variant for the action bar
+     * @values default, confirmation
+     */
     variant: {
         type: PropType<BentoActionBarVariant>;
         default: string;

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

@@ -1,7 +1,13 @@
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare enum BentoAlertVariant {
     DEFAULT = "default",
     TIP = "tip"
 }
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare enum BentoAlertTypeOption {
     WARNING = "warning",
     CRITICAL = "critical",

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

@@ -1,16 +1,43 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
 import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from "./alert.types";
 import { BentoTypographyElement, BentoTypographyVariant } from "../typography";
+/**
+ * An Alert component is used to display a persistent
+ * notification containing information important to the user
+ *
+ * @example
+ * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoAlert },
+ *     template: `
+ *          <bento-alert type="highlight">
+ *              Title of the Alert
+ *          </bento-alert>
+ *     `
+ * }
+ */
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Adds a close button on the right side of the alert
+     */
     closeButton: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Type of a alert; set a distinctive icon and color. Defaults to highlight.
+     * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING
+     */
     type: {
         type: PropType<"critical" | "success" | "warning" | "highlight" | BentoAlertTypeOption>;
         default: BentoAlertTypeOption;
         validator: (value: BentoAlertTypeOption) => boolean;
     };
+    /**
+     * Variant for the alert
+     * @values DEFAULT, TIP
+     */
     variant: {
         type: PropType<"default" | "tip" | BentoAlertVariant>;
         default: BentoAlertVariant;
@@ -34,15 +61,26 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     t: (key: "close" | "highlightIcon" | "successIcon" | "criticalIcon" | "warningIcon", values?: import("vue-i18n").default.Values) => string;
     BentoTypographyVariant: typeof BentoTypographyVariant;
 }, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, BentoAlertEvent[], BentoAlertEvent, 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<{
+    /**
+     * Adds a close button on the right side of the alert
+     */
     closeButton: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Type of a alert; set a distinctive icon and color. Defaults to highlight.
+     * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING
+     */
     type: {
         type: PropType<"critical" | "success" | "warning" | "highlight" | BentoAlertTypeOption>;
         default: BentoAlertTypeOption;
         validator: (value: BentoAlertTypeOption) => boolean;
     };
+    /**
+     * Variant for the alert
+     * @values DEFAULT, TIP
+     */
     variant: {
         type: PropType<"default" | "tip" | BentoAlertVariant>;
         default: BentoAlertVariant;

package/dist/@types/packages/vue2/src/components/avatar-image/avatar-image.vue.d.ts

@@ -1,19 +1,36 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
 import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Image src to load the profile picture.
+     */
     src: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Name of the user that will be used to extract initials to display default value.
+     * John => J
+     * John Smith => JS
+     * John Smith Doe => JD
+     * John Smith Doe Holly => JH
+     */
     username: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Variants supported for small and large.
+     * Default - large
+     */
     variant: {
         type: PropType<BentoAvatarImageVariant>;
         default: BentoAvatarImageVariant;
         validator: (value: BentoAvatarImageVariant) => boolean;
     };
+    /**
+     * Avatar color. Defaults to yellow.
+     */
     color: {
         type: PropType<BentoAvatarImageColor>;
         default: BentoAvatarImageColor;
@@ -25,19 +42,36 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     }>;
     initials: import("../../../../vue3/node_modules/vue").ComputedRef<string>;
 }, 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<{
+    /**
+     * Image src to load the profile picture.
+     */
     src: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Name of the user that will be used to extract initials to display default value.
+     * John => J
+     * John Smith => JS
+     * John Smith Doe => JD
+     * John Smith Doe Holly => JH
+     */
     username: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Variants supported for small and large.
+     * Default - large
+     */
     variant: {
         type: PropType<BentoAvatarImageVariant>;
         default: BentoAvatarImageVariant;
         validator: (value: BentoAvatarImageVariant) => boolean;
     };
+    /**
+     * Avatar color. Defaults to yellow.
+     */
     color: {
         type: PropType<BentoAvatarImageColor>;
         default: BentoAvatarImageColor;

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

@@ -1,11 +1,18 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
 import { AdlBadgeVariant } from './badge.types';
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Types of flavour of Badge
+     * @values default, attention, warning, critical, success
+     */
     variant: {
         type: PropType<AdlBadgeVariant>;
         default: AdlBadgeVariant;
         validator: (value: AdlBadgeVariant) => boolean;
     };
+    /**
+     * For testing purposes you can decide which testId your adl-badge instance will have
+     */
     testId: {
         type: StringConstructor;
         default: string;
@@ -16,11 +23,18 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         [x: string]: 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<{
+    /**
+     * Types of flavour of Badge
+     * @values default, attention, warning, critical, success
+     */
     variant: {
         type: PropType<AdlBadgeVariant>;
         default: AdlBadgeVariant;
         validator: (value: AdlBadgeVariant) => boolean;
     };
+    /**
+     * For testing purposes you can decide which testId your adl-badge instance will have
+     */
     testId: {
         type: StringConstructor;
         default: string;

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

@@ -6,33 +6,86 @@ export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {
     args?: {
         props: RouterLinkProps;
     };
+    /**
+     * Set the rendered link to a regular external anchor link.
+     */
     external: boolean;
 }
+/**
+ * Button component for all the various types of bento buttons.
+ *
+ * @example
+ * import { BentoButton } from '@adyen/bento-vue2';
+ * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';
+ *
+ * export default {
+ *     components: { BentoButton },
+ *     template: `
+ *         <bento-button
+ *             disabled
+ *             variant="secondary"
+ *         >
+ *              <template #iconLeft>
+ *                  <check-mark svg-title="checked" />
+ *              </template>
+ *
+ *              Button text
+ *
+ *              <template #iconRight>
+ *                  <check-mark svg-title="checked" />
+ *              </template>
+ *         </bento-button>
+ *     `,
+ * }
+ */
 declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Reduces sizing of button
+     */
     condensed: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Displays button as critical
+     */
     critical: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disables button functionality
+     */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Sets color set to inverse
+     */
     inverse: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.
+     */
     link: {
         type: ObjectConstructor;
         default: any;
     };
+    /**
+     * The default behavior of the button.
+     * Possible values are: 'button', 'reset', 'submit'
+     */
     type: {
         type: PropType<"button" | "submit" | "reset">;
         default: string;
     };
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary, tertiary-with-background
+     */
     variant: {
         type: PropType<"primary" | "secondary" | "tertiary" | "tertiary-with-background" | BentoButtonVariant>;
         default: BentoButtonVariant;
@@ -47,30 +100,53 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
 } & {
     "keydown.esc": () => 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<{
+    /**
+     * Reduces sizing of button
+     */
     condensed: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Displays button as critical
+     */
     critical: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disables button functionality
+     */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Sets color set to inverse
+     */
     inverse: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.
+     */
     link: {
         type: ObjectConstructor;
         default: any;
     };
+    /**
+     * The default behavior of the button.
+     * Possible values are: 'button', 'reset', 'submit'
+     */
     type: {
         type: PropType<"button" | "submit" | "reset">;
         default: string;
     };
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary, tertiary-with-background
+     */
     variant: {
         type: PropType<"primary" | "secondary" | "tertiary" | "tertiary-with-background" | BentoButtonVariant>;
         default: BentoButtonVariant;

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

@@ -18,6 +18,9 @@ export declare enum BentoButtonActionsLayoutBasic {
 export declare enum BentoButtonActionsLayoutExtended {
     BUTTONS_START = "buttons-start"
 }
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare const BentoButtonActionsLayout: {
     BUTTONS_START: BentoButtonActionsLayoutExtended.BUTTONS_START;
     BUTTONS_END: BentoButtonActionsLayoutBasic.BUTTONS_END;