@adyen/bento-vue3 1.21.1 → 1.22.0

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

@@ -1,28 +1,149 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
 import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';
+/**
+ * ButtonActions component component manages a set of actions a user can choose from by displaying a group of buttons.
+ *
+ * @example
+ * import { BentoButtonActions } from '@adyen/bento-vue2';
+ * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';
+ *
+ * const clickedAction = () => { //your action here }
+ *
+ * <template>
+ *     <bento-button-actions
+ *         :actions="[{
+ *             title: 'Primary',
+ *             event: clickedAction,
+ *             icon: MachineLearningIcon,
+ *         }, {
+ *             title: 'Secondary',
+ *             event: clickedAction,
+ *         }, {
+ *             title: 'Tertiary',
+ *             event: clickedAction,
+ *         }]"
+ *     />
+ * </template>
+ */
 declare const _default: import("../../../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon,
+     *   link: {
+     *           variant: 'default',
+     *           external: true,
+     *           to: 'https://www.adyen.com/'
+     *       },
+     *  }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     *   disabled: true,
+     *   variant: 'secondary',
+     *   critical: true
+     * }]
+     * ```
+     */
     actions: {
         type: PropType<BentoButtonActionsList>;
         required: true;
     };
+    /**
+     * Sets the Button Actions to color scheme inverse
+     */
     inverse: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Defines the layout in which the button actions is presented.
+     * It can be one of:
+     *
+     * @values BUTTONS_START
+     * @values BUTTONS_END
+     * @values FILL_CONTAINER
+     * @values SPACE_BETWEEN
+     * @values VERTICAL_STACK
+     */
     layout: {
         type: PropType<"space-between" | BentoButtonActionsLayout | "buttons-end" | "fill-container" | "vertical-stack" | "buttons-start">;
         default: import("./button-actions.types").BentoButtonActionsLayoutBasic;
         validator: (layout: BentoButtonActionsLayout) => 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<{
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon,
+     *   link: {
+     *           variant: 'default',
+     *           external: true,
+     *           to: 'https://www.adyen.com/'
+     *       },
+     *  }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     *   disabled: true,
+     *   variant: 'secondary',
+     *   critical: true
+     * }]
+     * ```
+     */
     actions: {
         type: PropType<BentoButtonActionsList>;
         required: true;
     };
+    /**
+     * Sets the Button Actions to color scheme inverse
+     */
     inverse: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Defines the layout in which the button actions is presented.
+     * It can be one of:
+     *
+     * @values BUTTONS_START
+     * @values BUTTONS_END
+     * @values FILL_CONTAINER
+     * @values SPACE_BETWEEN
+     * @values VERTICAL_STACK
+     */
     layout: {
         type: PropType<"space-between" | BentoButtonActionsLayout | "buttons-end" | "fill-container" | "vertical-stack" | "buttons-start">;
         default: import("./button-actions.types").BentoButtonActionsLayoutBasic;

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

@@ -1,27 +1,62 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
 import { BentoLoadingButtonState } from './loading-button.types';
+/**
+ * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g.  when you have any sort of asynchronous action and are waiting for a response
+ *
+ * @example
+ * import { BentoLoadingButton } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoLoadingButton },
+ *     template: `
+ *          <bento-loading-button state="loading" variant="secondary">
+ *              Loading
+ *          </bento-loading button>
+ *     `
+ * }
+ */
 declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Reduces sizing of button
+     */
     condensed: {
         type: any;
         default: boolean;
     };
+    /**
+     * Displays loading-button as critical
+     */
     critical: {
         type: any;
         default: boolean;
     };
+    /**
+     * Disables button functonality
+     */
     disabled: {
         type: any;
         default: boolean;
     };
+    /**
+     * Sets color set to inverse
+     */
     inverse: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * State of the button.
+     * @values start, loading, success, fail
+     */
     state: {
         type: PropType<"start" | "success" | BentoLoadingButtonState | "loading" | "fail">;
         default: BentoLoadingButtonState;
         validator: (value: BentoLoadingButtonState) => boolean;
     };
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary
+     */
     variant: {
         type: any;
         default: string;
@@ -30,27 +65,47 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
 }, {}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
     click: (event: MouseEvent) => 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: any;
         default: boolean;
     };
+    /**
+     * Displays loading-button as critical
+     */
     critical: {
         type: any;
         default: boolean;
     };
+    /**
+     * Disables button functonality
+     */
     disabled: {
         type: any;
         default: boolean;
     };
+    /**
+     * Sets color set to inverse
+     */
     inverse: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * State of the button.
+     * @values start, loading, success, fail
+     */
     state: {
         type: PropType<"start" | "success" | BentoLoadingButtonState | "loading" | "fail">;
         default: BentoLoadingButtonState;
         validator: (value: BentoLoadingButtonState) => boolean;
     };
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary
+     */
     variant: {
         type: any;
         default: string;

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

@@ -1,21 +1,53 @@
+/**
+ * Toggle button is used to switch between two states (example: menu shown, menu hidden).
+ * It functions as a regular button but retains its state to indicate whether the associated menu or element is active or inactive.
+ *
+ * @example
+ * import { BentoToggleButton } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoToggleButton },
+ *     template: `
+ *          <bento-toggle-button state="toggled" variant="secondary">
+ *              Button that can be toggled
+ *          </bento-toggle-button>
+ *     `
+ * }
+ */
 declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Reduces sizing of button
+     */
     condensed: {
         type: any;
         default: boolean;
     };
+    /**
+     * Disables button functonality
+     */
     disabled: {
         type: any;
         default: boolean;
     };
+    /**
+     * Sets color set to inverse
+     */
     inverse: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary
+     */
     variant: {
         type: any;
         default: string;
         validator: any;
     };
+    /**
+     * The state of the button whether it is toggled or not.
+     */
     toggled: {
         type: BooleanConstructor;
         default: boolean;
@@ -25,23 +57,39 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
 } & {
     "update:toggled": (newToggleState: 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<{
+    /**
+     * Reduces sizing of button
+     */
     condensed: {
         type: any;
         default: boolean;
     };
+    /**
+     * Disables button functonality
+     */
     disabled: {
         type: any;
         default: boolean;
     };
+    /**
+     * Sets color set to inverse
+     */
     inverse: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary
+     */
     variant: {
         type: any;
         default: string;
         validator: any;
     };
+    /**
+     * The state of the button whether it is toggled or not.
+     */
     toggled: {
         type: BooleanConstructor;
         default: boolean;

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

@@ -1,7 +1,13 @@
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare enum BentoCardBackground {
     PRIMARY = "primary",
     SECONDARY = "secondary"
 }
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare enum BentoCardTitleSize {
     DEFAULT = "default",
     SMALL = "small"

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

@@ -1,33 +1,99 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
 import { BentoButtonActionsLayout, BentoButtonActionsList } from "../button";
 import { BentoCardBackground, BentoCardTitleSize } from "./card.types";
+/**
+ * A card is a flexible and composable container.
+ * Use cards to represent a single object or to visually group certain content, like legal information within company settings.
+ *
+ * @example
+ * import { BentoCard } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoCard },
+ *     template: `
+ *         <bento-card>
+ *             Title of the Card
+ *         </bento-card>
+ *     `
+ * };
+ */
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Defines the color of card background
+     */
     background: {
         type: PropType<"primary" | "secondary" | BentoCardBackground>;
         default: BentoCardBackground;
         validator: (value: BentoCardBackground) => boolean;
     };
+    /**
+     * Defines the title size of the card header
+     */
     titleSize: {
         type: PropType<"default" | "small" | BentoCardTitleSize>;
         default: BentoCardTitleSize;
         validator: (value: BentoCardTitleSize) => boolean;
     };
+    /**
+     * The whole content of the card will be expandable in accordion manner
+     */
     expandable: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Sets the expandable card in a closed state
+     */
     closed: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disables the expandable card
+     */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     * }]
+     * ```
+     */
     actions: {
         type: PropType<BentoButtonActionsList>;
         default: any;
     };
+    /**
+     * Defines the layout in which the button actions is presented.
+     * It can be one of:
+     *
+     * @values BUTTONS_START
+     * @values BUTTONS_END
+     * @values FILL_CONTAINER
+     * @values SPACE_BETWEEN
+     * @values VERTICAL_STACK
+     */
     actionsLayout: {
         type: PropType<"space-between" | BentoButtonActionsLayout | "buttons-end" | "fill-container" | "vertical-stack" | "buttons-start">;
         default: import("../button").BentoButtonActionsLayoutBasic;
@@ -118,32 +184,82 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     t: (key: "showCardContent" | "hideCardContent", values?: import("vue-i18n").default.Values) => string;
     toggleExpansion: () => void;
 }, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, ("click" | "expanded")[], "click" | "expanded", 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 the color of card background
+     */
     background: {
         type: PropType<"primary" | "secondary" | BentoCardBackground>;
         default: BentoCardBackground;
         validator: (value: BentoCardBackground) => boolean;
     };
+    /**
+     * Defines the title size of the card header
+     */
     titleSize: {
         type: PropType<"default" | "small" | BentoCardTitleSize>;
         default: BentoCardTitleSize;
         validator: (value: BentoCardTitleSize) => boolean;
     };
+    /**
+     * The whole content of the card will be expandable in accordion manner
+     */
     expandable: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Sets the expandable card in a closed state
+     */
     closed: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disables the expandable card
+     */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     * }]
+     * ```
+     */
     actions: {
         type: PropType<BentoButtonActionsList>;
         default: any;
     };
+    /**
+     * Defines the layout in which the button actions is presented.
+     * It can be one of:
+     *
+     * @values BUTTONS_START
+     * @values BUTTONS_END
+     * @values FILL_CONTAINER
+     * @values SPACE_BETWEEN
+     * @values VERTICAL_STACK
+     */
     actionsLayout: {
         type: PropType<"space-between" | BentoButtonActionsLayout | "buttons-end" | "fill-container" | "vertical-stack" | "buttons-start">;
         default: import("../button").BentoButtonActionsLayoutBasic;