@adyen/bento-vue3 1.21.1 → 1.22.0

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

@@ -1,43 +1,101 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
 import { BentoCheckboxEvent, BentoCheckboxType } from './checkbox.types';
 import { BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types';
+/**
+ * Checkboxes are used to make a binary choice about an option.
+ * The label tag area is also clickable.
+ *
+ * @usage
+ * import { BentoCheckbox } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoCheckbox },
+ *     template: `
+ *         <bento-checkbox>
+ *             Label text
+ *             <template #description>Sub label text</template>
+ *         </bento-checkbox>
+ *     `,
+ * }
+ */
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
+    /**
+     * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.
+     */
     ariaLabel: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Setting this property to true will disable the checkbox in your form.
+     */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Renders the checkbox in an error state with an error message.
+     */
     errorMessage: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Setting this property to true will show the checkbox in error state.
+     */
     hasError: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The :indeterminate CSS pseudo-class represents any form element
+     * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute
+     * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,
+     * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
+     * This property lets you control the input.indeterminate native property.
+     */
     indeterminate: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * When handling a single checkbox with a singular state, use a boolean.
+     *
+     * When handling multiple checkboxes, use an array of keys.
+     * These keys exist as a set "value" prop for each checkbox.
+     */
     modelValue: {
         type: PropType<BentoCheckboxType | BentoCheckboxGroupItems>;
         default: boolean;
     };
+    /**
+     * Highlights the checkbox is optional.
+     */
     optional: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Setting this property to true will set the checkbox to read only state.
+     */
     readonly: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Highlights the checkbox is required.
+     */
     required: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Sets the properties of the BentoTag component that is placed next to the label.
+     * {@see BentoTag}
+     */
     tag: {
         type: PropType<Partial<{
             label: string;
@@ -60,6 +118,12 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         }>> & import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, "label" | "variant" | "truncate">>;
         default: any;
     };
+    /**
+     * The value of the component. The DOM API casts this to a string.
+     * The browser uses "on" as the default value.
+     *
+     * In the case of multiple checkboxes this value is used as a unique key.
+     */
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: any;
@@ -87,42 +151,83 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     onChange: (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => void;
     t: (key: "required" | "optional" | "ariaLabelFallback", values?: import("vue-i18n").default.Values) => string;
 }, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, BentoCheckboxEvent[], BentoCheckboxEvent, 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<{
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
+    /**
+     * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.
+     */
     ariaLabel: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Setting this property to true will disable the checkbox in your form.
+     */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Renders the checkbox in an error state with an error message.
+     */
     errorMessage: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * Setting this property to true will show the checkbox in error state.
+     */
     hasError: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The :indeterminate CSS pseudo-class represents any form element
+     * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute
+     * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,
+     * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
+     * This property lets you control the input.indeterminate native property.
+     */
     indeterminate: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * When handling a single checkbox with a singular state, use a boolean.
+     *
+     * When handling multiple checkboxes, use an array of keys.
+     * These keys exist as a set "value" prop for each checkbox.
+     */
     modelValue: {
         type: PropType<BentoCheckboxType | BentoCheckboxGroupItems>;
         default: boolean;
     };
+    /**
+     * Highlights the checkbox is optional.
+     */
     optional: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Setting this property to true will set the checkbox to read only state.
+     */
     readonly: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Highlights the checkbox is required.
+     */
     required: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Sets the properties of the BentoTag component that is placed next to the label.
+     * {@see BentoTag}
+     */
     tag: {
         type: PropType<Partial<{
             label: string;
@@ -145,6 +250,12 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         }>> & import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, "label" | "variant" | "truncate">>;
         default: any;
     };
+    /**
+     * The value of the component. The DOM API casts this to a string.
+     * The browser uses "on" as the default value.
+     *
+     * In the case of multiple checkboxes this value is used as a unique key.
+     */
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: any;

package/dist/@types/packages/vue2/src/components/checkbox/components/checkbox-group/checkbox-group.types.d.ts

@@ -1,4 +1,7 @@
 import type { BentoCheckboxTag } from "../..";
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare enum BentoCheckboxGroupVariant {
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical"

package/dist/@types/packages/vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue.d.ts

@@ -1,39 +1,88 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
 import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';
 import { BentoCheckboxEvent } from '../../checkbox.types';
+/**
+ * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together
+ * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/
+ *
+ * import { BentoCheckboxGroup } from '@adyen/bento-vue2/';
+ *
+ * export default {
+ *     components: { BentoCheckboxGroup },
+ *     template: `
+ *             <bento-checkbox-group
+ *                label="Your group label"
+ *                :items="[
+ *                    { value: 1, label: 'Your label' },
+ *                    { value: 2, label: 'Another label', description: 'Your sub label' },
+ *                 ]"
+ *              />
+ *     `
+ * };
+ */
 declare const _default: import("../../../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Descriptive supporting text visbile underneath the label.
+     */
     description: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * If set to true, renders all checkboxes in the group in a disabled state.
+     */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Renders all checkboxes in an error state with an error message.
+     */
     errorMessage: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.
+     */
     formId: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * If set to true, renders all checkboxes in the group in an error state.
+     *
+     * @deprecated Use "errorMessage" prop instead
+     */
     hasError: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Shows/hides the group label.
+     */
     hideLabel: {
         type: BooleanConstructor;
         default: any;
     };
+    /**
+     * The checkbox group's items.
+     */
     items: {
         type: PropType<BentoCheckboxGroupItems>;
         required: true;
     };
+    /**
+     * The name associated with the group. Required for accessibility purposes.
+     */
     label: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.
+     * Defaults to no value selected.
+     */
     modelValue: {
         type: {
             (arrayLength: number): (string | number)[];
@@ -46,27 +95,44 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
             from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
             from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
             from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
-            of<T_4>(...items: T_4[]): T_4[];
+            of<T_4>(...items: T_4[]): T_4[]; /**
+             * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
+             */
             readonly [Symbol.species]: ArrayConstructor;
         };
         default: () => any[];
     };
+    /**
+     * Indicates the field is optional.
+     */
     optional: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * If set to true, renders all checkboxes in the group in a readonly state.
+     */
     readonly: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Indicates the field is required.
+     */
     required: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Tooltip message.
+     */
     tooltipText: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
+     */
     variant: {
         type: PropType<"horizontal" | "vertical" | BentoCheckboxGroupVariant>;
         default: BentoCheckboxGroupVariant;
@@ -85,38 +151,68 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
     hasContentSlot: (name: any) => boolean;
     onInput: (value: any) => void;
 }, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, BentoCheckboxEvent[], BentoCheckboxEvent, 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<{
+    /**
+     * Descriptive supporting text visbile underneath the label.
+     */
     description: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * If set to true, renders all checkboxes in the group in a disabled state.
+     */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Renders all checkboxes in an error state with an error message.
+     */
     errorMessage: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone.
+     */
     formId: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * If set to true, renders all checkboxes in the group in an error state.
+     *
+     * @deprecated Use "errorMessage" prop instead
+     */
     hasError: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Shows/hides the group label.
+     */
     hideLabel: {
         type: BooleanConstructor;
         default: any;
     };
+    /**
+     * The checkbox group's items.
+     */
     items: {
         type: PropType<BentoCheckboxGroupItems>;
         required: true;
     };
+    /**
+     * The name associated with the group. Required for accessibility purposes.
+     */
     label: {
         type: StringConstructor;
         required: true;
     };
+    /**
+     * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value.
+     * Defaults to no value selected.
+     */
     modelValue: {
         type: {
             (arrayLength: number): (string | number)[];
@@ -129,27 +225,44 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
             from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
             from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
             from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
-            of<T_4>(...items: T_4[]): T_4[];
+            of<T_4>(...items: T_4[]): T_4[]; /**
+             * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
+             */
             readonly [Symbol.species]: ArrayConstructor;
         };
         default: () => any[];
     };
+    /**
+     * Indicates the field is optional.
+     */
     optional: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * If set to true, renders all checkboxes in the group in a readonly state.
+     */
     readonly: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Indicates the field is required.
+     */
     required: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Tooltip message.
+     */
     tooltipText: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical.
+     */
     variant: {
         type: PropType<"horizontal" | "vertical" | BentoCheckboxGroupVariant>;
         default: BentoCheckboxGroupVariant;

package/dist/@types/packages/vue2/src/components/click-outside/click-outside.d.ts

@@ -1,4 +1,7 @@
 export declare const BentoClickOutside: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Sets the HTML DOM element.
+     */
     el: {
         type: StringConstructor;
         default: string;
@@ -6,6 +9,9 @@ export declare const BentoClickOutside: import("../../../../vue3/node_modules/vu
 }, () => import("../../../../vue3/node_modules/vue").VNode<import("../../../../vue3/node_modules/vue").RendererNode, import("../../../../vue3/node_modules/vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, "handler"[], "handler", 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 HTML DOM element.
+     */
     el: {
         type: StringConstructor;
         default: string;

package/dist/@types/packages/vue2/src/components/code-snippet/code-snippet.types.d.ts

@@ -1,8 +1,14 @@
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare enum BentoCodeSnippetVariant {
     INLINE = "inline",
     SINGLELINE = "singleline",
     MULTILINE = "multiline"
 }
+/**
+ * @deprecated for usage with properties since version 2.0. Use the string literal instead.
+ */
 export declare enum BentoCodeSnippetSupportedLanguage {
     JSON = "json",
     XML = "xml",

package/dist/@types/packages/vue2/src/components/code-snippet/code-snippet.vue.d.ts

@@ -1,41 +1,85 @@
 import { PropType } from "../../../../vue3/node_modules/vue";
 import { EditorView } from '@codemirror/view';
 import { BentoCodeSnippetEvent, BentoCodeSnippetSupportedLanguage, BentoCodeSnippetVariant } from "./code-snippet.types";
+/**
+ * A code-snippet is a container to display code in a readable way.
+ * Come with added functionalities like syntax highlighting, editing and actioning the code
+ *
+ * @example
+ * import { BentoCodeSnippet } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoCodeSnippet },
+ *     template: `
+ *          <bento-code-snippet :variant="BentoCodeSnippetVariant.MULTILINE" content="{ example: 1234 }" />
+ *     `
+ * }
+ */
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    /**
+     * Defines the variant of code-snippet
+     */
     variant: {
         type: PropType<"inline" | "singleline" | "multiline" | BentoCodeSnippetVariant>;
         default: BentoCodeSnippetVariant;
         validator: (value: BentoCodeSnippetVariant) => boolean;
     };
+    /**
+     * Language name for syntax highlighting rules
+     */
     lang: {
         type: PropType<"json" | "xml" | "java" | "javascript" | BentoCodeSnippetSupportedLanguage>;
         default: BentoCodeSnippetSupportedLanguage;
         validator: (value: BentoCodeSnippetSupportedLanguage) => boolean;
     };
+    /**
+     * Label to show in the action-bar, describing the language
+     */
     langLabel: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * The code content
+     */
     content: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Allows editing of the code-snippet content by the user
+     */
     editable: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Displays a button that when clicked will emit an action event
+     * Leaves to the parent component the logic of what to do with it
+     */
     actionable: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Displays a button that can expand the codeblock into a modal to easily
+     * view large blocks of code.
+     */
     expandable: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Displays a button that when clicked will emit a run event
+     * Leaves to the parent component the logic of what to do with it
+     */
     actionableText: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Toggles the loading indicator within the action bar
+     */
     loading: {
         type: BooleanConstructor;
         default: boolean;
@@ -61,40 +105,70 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     runText: import("../../../../vue3/node_modules/vue").ComputedRef<string>;
     t: (key: "expand" | "run", values?: import("vue-i18n").default.Values) => string;
 }, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, BentoCodeSnippetEvent[], BentoCodeSnippetEvent, 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 variant of code-snippet
+     */
     variant: {
         type: PropType<"inline" | "singleline" | "multiline" | BentoCodeSnippetVariant>;
         default: BentoCodeSnippetVariant;
         validator: (value: BentoCodeSnippetVariant) => boolean;
     };
+    /**
+     * Language name for syntax highlighting rules
+     */
     lang: {
         type: PropType<"json" | "xml" | "java" | "javascript" | BentoCodeSnippetSupportedLanguage>;
         default: BentoCodeSnippetSupportedLanguage;
         validator: (value: BentoCodeSnippetSupportedLanguage) => boolean;
     };
+    /**
+     * Label to show in the action-bar, describing the language
+     */
     langLabel: {
         type: StringConstructor;
         default: any;
     };
+    /**
+     * The code content
+     */
     content: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Allows editing of the code-snippet content by the user
+     */
     editable: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Displays a button that when clicked will emit an action event
+     * Leaves to the parent component the logic of what to do with it
+     */
     actionable: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Displays a button that can expand the codeblock into a modal to easily
+     * view large blocks of code.
+     */
     expandable: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Displays a button that when clicked will emit a run event
+     * Leaves to the parent component the logic of what to do with it
+     */
     actionableText: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Toggles the loading indicator within the action bar
+     */
     loading: {
         type: BooleanConstructor;
         default: boolean;

package/dist/@types/packages/vue2/src/components/code-snippet/utils/get-lang-loader.d.ts

@@ -3,4 +3,11 @@ import { json } from '@codemirror/lang-json';
 import { xml } from '@codemirror/lang-xml';
 import { javascript } from '@codemirror/lang-javascript';
 import { java } from '@codemirror/lang-java';
+/**
+ * Returns a language loder for `CodeMirror`.
+ * Supported languages: json, xml, javascript & java
+ *
+ * @param language Language to be used
+ * @returns Language configuration loader to be used in codemirror
+ */
 export declare const getLangLoader: (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => () => Promise<typeof json | typeof xml | typeof javascript | typeof java>;

package/dist/@types/packages/vue2/src/components/code-snippet/utils/indent-same-as-line-before-extension.d.ts

@@ -1,3 +1,7 @@
+/**
+ * This extension to codemirror will, upon pressing the 'Enter' key, indent the new line
+ * the same as the line before it.
+ */
 export declare const INDENT_SAME_AS_LINE_BEFORE: {
     key: string;
     run: ({ state, dispatch }: {