@adyen/bento-vue2 1.30.0 → 1.31.0-rc.1-3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Adyen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -24,12 +24,15 @@ Bento Vue contains foundational Vue 2.x (and Vue 3.x) UI components for shipping
                 -   [Vue 2](#vue-2-2)
                 -   [Vue 3](#vue-3-2)
                 -   [Using our CDN directly](#using-our-cdn-directly)
-            -   [Initialize `vue-i18n`](#initialize-vue-i18n)
+            -   [Import CSS variables](#import-css-variables)
                 -   [Vue 2](#vue-2-3)
                 -   [Vue 3](#vue-3-3)
-            -   [Use the components](#use-the-components)
+            -   [Initialize `vue-i18n`](#initialize-vue-i18n)
                 -   [Vue 2](#vue-2-4)
                 -   [Vue 3](#vue-3-4)
+            -   [Use the components](#use-the-components)
+                -   [Vue 2](#vue-2-5)
+                -   [Vue 3](#vue-3-5)
         -   [Bundlers](#bundlers)
             -   [Webpack](#webpack)
             -   [Vite](#vite)
@@ -74,9 +77,10 @@ In order to use the compoents via the `BentoVue` plugin, the following steps mus
 
 1. Load the plugin globally in **Vue** (and optional enable certain features).
 2. Import the `font.css` file.
-3. Initialize `vue-i18n`.
-4. Add changes to your [bundler](#Bundlers) configuration e.g. [webpack](#webpack) or [vite](#vite).
-5. Use the library defined components in your application
+3. Import the variables CSS file.
+4. Initialize `vue-i18n`.
+5. Add changes to your [bundler](#Bundlers) configuration e.g. [webpack](#webpack) or [vite](#vite).
+6. Use the library defined components in your application
 
 #### Load plugin and register components
 
@@ -85,8 +89,11 @@ allow the components to use the Design Token CSS variables.
 
 You can enable the following feature by passing them the second argument to in the `.use` function.
 
+-   `withDesignTokensCSSInjection`: Setting this to false, will disable CSS injection of styles. We recommend you do
+    this and [import the styles manually](#import-css-variables) instead.
 -   `withToast`: Will enable all toast functionality required by the `BentoToast` component.
--   `withUtilityClasses`: Will inject the utility classes into the page.
+-   `withUtilityClasses` (deprecated): Will inject the utility classes into the page. We recommend you not use this
+    property but [import the styles manually](#import-css-variables) instead.
 
 ##### Vue 2
 
@@ -98,7 +105,7 @@ Vue.use(BentoVue);
 // or, if you want to make use of the toast component we provide
 Vue.use(BentoVue, {
     withToast: true, // this line installs Bento and includes the toast component
-    withUtilityClasses: true, // this line injects the utility classes into the page
+    withDesignTokensCSSInjection: false, // this line disables the CSS injection
 });
 ```
 
@@ -111,7 +118,6 @@ import BentoVue from '@adyen/bento-vue3';
 const app = createApp()
     .use(BentoVue, {
         withToast: true, // this line installs Bento and includes the toast component
-        withUtilityClasses: true, // this line injects the utility classes into the page
     })
     .mount('#app');
 ```
@@ -144,6 +150,54 @@ You can also directly use our CDN which have variations for test and live enviro
 <link href="https://bae81f955b.cdn.adyen.com/bento/fonts/fonts.min.css" rel="stylesheet" />
 ```
 
+#### Import CSS variables
+
+We highly advise you to disable the CSS injection in the `BentoVue` plugin options via the
+`withDesignTokensCSSInjection` option and manually import the correct CSS style sheet for the theme you are using. The
+default value of `withDesignTokensCSSInjection` in the next major version of Bento will be `false`.
+
+We currently export the following styles:
+
+-   Bento (default): `@adyen/bento-vue2/styles/bento`
+-   Legacy i.e. ADL (deprecated): `@adyen/bento-vue2/styles/legacy`
+-   Utility classes: `@adyen/bento-vue2/styles/utility`
+
+NOTE: This way of importing bento styles will be mandatory in Bento 2.X
+
+###### Vue 2
+
+```javascript
+import Vue from 'vue';
+import BentoVue from '@adyen/bento-vue2';
+
+// CSS variables for the bento theme
+import '@adyen/bento-vue2/styles/bento';
+// Optionally import utility class styles if you need them
+import '@adyen/bento-vue2/styles/utility';
+
+Vue.use(BentoVue, {
+    withDesignTokensCSSInjection: false, // this line disables the CSS injection
+});
+```
+
+###### Vue 3
+
+```javascript
+import { createApp } from 'vue';
+import BentoVue from '@adyen/bento-vue3';
+
+// CSS variables for the bento theme
+import '@adyen/bento-vue2/styles/bento';
+// Optionally import utility class styles if you need them
+import '@adyen/bento-vue2/styles/utility';
+
+const app = createApp()
+    .use(BentoVue, {
+        withDesignTokensCSSInjection: false, // this line disables the CSS injection
+    })
+    .mount('#app');
+```
+
 #### Initialize `vue-i18n`
 
 Some Bento components require translations to work, for which the `vue-i18n` package was used. This means at time of

package/dist/@types/index.d.ts

@@ -1,8 +1,7 @@
 import type { ButtonHTMLAttributes } from 'vue/types/jsx';
 import { ComponentCustomProperties } from 'vue';
-import { ComponentOptionsBase } from 'vue/types/v3-component-options';
-import { ComponentOptionsMixin } from 'vue/types/v3-component-options';
-import { ComponentOptionsMixin as ComponentOptionsMixin_2 } from 'vue/types/v3-component-options.js';
+import { ComponentOptionsBase } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
 import type { ComponentPublicInstance } from 'vue';
 import { ComputedRef } from 'vue';
 import { DeepReadonly } from 'vue';
@@ -22,7 +21,6 @@ import { RouterLinkProps } from 'vue-router/types/router';
 import { ShallowRef } from 'vue';
 import { ShallowUnwrapRef } from 'vue';
 import type { typeToFlattenedError } from 'zod';
-import { UnwrapRef } from 'vue';
 import { VNode } from 'vue';
 import { Vue3Instance } from 'vue/types/v3-component-public-instance';
 import * as z from 'zod';
@@ -1162,8 +1160,8 @@ export declare const BentoButton: __VLS_WithTemplateSlots_4<
         {},
         {},
         {},
-        ComponentOptionsMixin_2,
-        ComponentOptionsMixin_2,
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
         {
             blur: () => void;
         } & {
@@ -2956,7 +2954,7 @@ export declare const BentoCountry: DefineComponent<
             | 'ZZ'
             | BentoCountryCode;
         label: string;
-        variant: 'name' | 'custom' | 'iso' | 'phone_code' | 'capital' | BentoCountryVariant;
+        variant: 'name' | 'iso' | 'phone_code' | 'capital' | 'custom' | BentoCountryVariant;
     }
 >;
 
@@ -3278,8 +3276,8 @@ export declare const BentoCurrency: DefineComponent<
     {},
     {},
     {},
-    ComponentOptionsMixin_2,
-    ComponentOptionsMixin_2,
+    ComponentOptionsMixin,
+    ComponentOptionsMixin,
     {},
     string,
     Readonly<
@@ -3906,8 +3904,8 @@ export declare const BentoDashedUnderline: __VLS_WithTemplateSlots_7<
         {},
         {},
         {},
-        ComponentOptionsMixin_2,
-        ComponentOptionsMixin_2,
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
         {},
         string,
         Readonly<
@@ -4779,8 +4777,8 @@ export declare const BentoDate: DefineComponent<
     {},
     {},
     {},
-    ComponentOptionsMixin_2,
-    ComponentOptionsMixin_2,
+    ComponentOptionsMixin,
+    ComponentOptionsMixin,
     {},
     string,
     Readonly<
@@ -5146,6 +5144,7 @@ export declare interface BentoDateRangeFilterOptions {
     min?: Date;
     max?: Date;
     numberOfMonths?: number;
+    showEndDateOnOpen?: boolean;
     quickSelectRanges?: DateRangePickerCalendarRangeSelectorItems | boolean;
 }
 
@@ -5238,6 +5237,13 @@ export declare const BentoDateRangePicker: DefineComponent<
             type: StringConstructor;
             default: any;
         };
+        /**
+         * Upon opening date range picker, end date's month will be pre-selected.
+         */
+        showEndDateOnOpen: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         /**
          * Highlights the dropdown is optional.
          */
@@ -5417,6 +5423,13 @@ export declare const BentoDateRangePicker: DefineComponent<
                 type: StringConstructor;
                 default: any;
             };
+            /**
+             * Upon opening date range picker, end date's month will be pre-selected.
+             */
+            showEndDateOnOpen: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
             /**
              * Highlights the dropdown is optional.
              */
@@ -5507,6 +5520,7 @@ export declare const BentoDateRangePicker: DefineComponent<
         max: Date;
         maxRange: number;
         numberOfMonths: number;
+        showEndDateOnOpen: boolean;
         tooltipText: string;
         optional: boolean;
         errorMessage: string;
@@ -6641,7 +6655,7 @@ export declare const BentoDropdownCountry: DefineComponent<
         value: BentoListboxSelectedValue;
         description: string;
         label: string;
-        variant: 'name' | 'custom' | 'iso' | 'phone_code' | 'capital' | BentoCountryVariant;
+        variant: 'name' | 'iso' | 'phone_code' | 'capital' | 'custom' | BentoCountryVariant;
         required: boolean;
         condensed: boolean;
         disabled: boolean;
@@ -7873,6 +7887,13 @@ export declare const BentoFilterBar: DefineComponent<
             type: PropType<BentoFilterValues>;
             default: () => any[];
         };
+        /**
+         * Will show all applied filters even if their visibility is set to false.
+         */
+        showAppliedHiddenFilters: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     },
     {
         hasHiddenFilters: ComputedRef<boolean>;
@@ -7975,6 +7996,13 @@ export declare const BentoFilterBar: DefineComponent<
                 type: PropType<BentoFilterValues>;
                 default: () => any[];
             };
+            /**
+             * Will show all applied filters even if their visibility is set to false.
+             */
+            showAppliedHiddenFilters: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>
     >,
     {
@@ -7982,6 +8010,7 @@ export declare const BentoFilterBar: DefineComponent<
         config: BentoFilterBarModel;
         searchTerm: string;
         filterValues: BentoFilterValues;
+        showAppliedHiddenFilters: boolean;
     }
 >;
 
@@ -8362,8 +8391,8 @@ export declare const BentoFormLayoutTitle: __VLS_WithTemplateSlots_14<
         {},
         {},
         {},
-        ComponentOptionsMixin_2,
-        ComponentOptionsMixin_2,
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
         {},
         string,
         Readonly<
@@ -8421,11 +8450,11 @@ export declare const BentoHeader: DefineComponent<
          */
         infoIconPopoverPosition: {
             type: PropType<
-                | 'auto'
-                | 'left'
+                | 'top'
                 | 'right'
                 | 'bottom'
-                | 'top'
+                | 'left'
+                | 'auto'
                 | 'auto-start'
                 | 'auto-end'
                 | 'top-start'
@@ -8464,6 +8493,14 @@ export declare const BentoHeader: DefineComponent<
             type: StringConstructor;
             required: true;
         };
+        /**
+         * Reload button which shows next to the header's timestamp
+         * {@see BentoHeaderReloadButton}
+         */
+        reloadButton: {
+            type: PropType<BentoHeaderReloadButton>;
+            default: any;
+        };
     },
     {
         hasSlot: (name: string) => boolean;
@@ -8483,7 +8520,7 @@ export declare const BentoHeader: DefineComponent<
     {},
     ComponentOptionsMixin,
     ComponentOptionsMixin,
-    {},
+    'reload'[],
     string,
     Readonly<
         ExtractPropTypes<{
@@ -8506,11 +8543,11 @@ export declare const BentoHeader: DefineComponent<
              */
             infoIconPopoverPosition: {
                 type: PropType<
-                    | 'auto'
-                    | 'left'
+                    | 'top'
                     | 'right'
                     | 'bottom'
-                    | 'top'
+                    | 'left'
+                    | 'auto'
                     | 'auto-start'
                     | 'auto-end'
                     | 'top-start'
@@ -8549,19 +8586,26 @@ export declare const BentoHeader: DefineComponent<
                 type: StringConstructor;
                 required: true;
             };
+            /**
+             * Reload button which shows next to the header's timestamp
+             * {@see BentoHeaderReloadButton}
+             */
+            reloadButton: {
+                type: PropType<BentoHeaderReloadButton>;
+                default: any;
+            };
         }>
     >,
     {
         variant: 'component' | 'page' | BentoHeaderVariant;
         actions: BentoButtonActionsList;
         infoIconTooltipText: string;
-        lastUpdated: number | Date;
         infoIconPopoverPosition:
-            | 'auto'
-            | 'left'
+            | 'top'
             | 'right'
             | 'bottom'
-            | 'top'
+            | 'left'
+            | 'auto'
             | 'auto-start'
             | 'auto-end'
             | 'top-start'
@@ -8573,9 +8617,17 @@ export declare const BentoHeader: DefineComponent<
             | 'left-start'
             | 'left-end'
             | PopperContainerPosition;
+        lastUpdated: number | Date;
+        reloadButton: BentoHeaderReloadButton;
     }
 >;
 
+declare interface BentoHeaderReloadButton {
+    title: string;
+    event?: (event: Event) => void;
+    state?: `${BentoLoadingButtonState}`;
+}
+
 /**
  * @deprecated for usage with properties since version 2.0. Use the string literal instead.
  */
@@ -8737,8 +8789,8 @@ export declare const BentoInfoIcon: DefineComponent<
     {},
     {},
     {},
-    ComponentOptionsMixin_2,
-    ComponentOptionsMixin_2,
+    ComponentOptionsMixin,
+    ComponentOptionsMixin,
     {},
     string,
     Readonly<
@@ -8762,11 +8814,11 @@ export declare const BentoInfoIcon: DefineComponent<
     >,
     {
         tooltipPosition:
-            | 'auto'
-            | 'left'
+            | 'top'
             | 'right'
             | 'bottom'
-            | 'top'
+            | 'left'
+            | 'auto'
             | 'auto-start'
             | 'auto-end'
             | 'top-start'
@@ -9409,8 +9461,8 @@ export declare const BentoLink: __VLS_WithTemplateSlots_18<
         {},
         {},
         {},
-        ComponentOptionsMixin_2,
-        ComponentOptionsMixin_2,
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
         {
             click: (clickEvent: MouseEvent) => void;
         },
@@ -9582,8 +9634,8 @@ export declare const BentoLoadingButton: __VLS_WithTemplateSlots_5<
         {},
         {},
         {},
-        ComponentOptionsMixin_2,
-        ComponentOptionsMixin_2,
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
         {
             click: (event: MouseEvent) => void;
         },
@@ -9888,11 +9940,11 @@ export declare const BentoMenu: DefineComponent<
         button: BentoMenuButtonProps;
         teleport: boolean;
         menuPosition:
-            | 'auto'
-            | 'left'
+            | 'top'
             | 'right'
             | 'bottom'
-            | 'top'
+            | 'left'
+            | 'auto'
             | 'auto-start'
             | 'auto-end'
             | 'top-start'
@@ -10522,8 +10574,8 @@ export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_22<
         {},
         {},
         {},
-        ComponentOptionsMixin_2,
-        ComponentOptionsMixin_2,
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
         {},
         string,
         Readonly<
@@ -12583,11 +12635,11 @@ export declare const BentoPopover: __VLS_WithTemplateSlots_23<
             actions: BentoButtonActionsList;
             modifiers: unknown[];
             position:
-                | 'auto'
-                | 'left'
+                | 'top'
                 | 'right'
                 | 'bottom'
-                | 'top'
+                | 'left'
+                | 'auto'
                 | 'auto-start'
                 | 'auto-end'
                 | 'top-start'
@@ -12628,21 +12680,21 @@ export declare const BentoPopover: __VLS_WithTemplateSlots_23<
  * @deprecated for usage with properties since version 2.0. Use the string literal instead.
  */
 export declare const BentoPopoverPositions: {
-    AUTO: import('../popper-container').PopperContainerPositionExtended.AUTO;
-    AUTO_START: import('../popper-container').PopperContainerPositionExtended.AUTO_START;
-    AUTO_END: import('../popper-container').PopperContainerPositionExtended.AUTO_END;
-    TOP_START: import('../popper-container').PopperContainerPositionExtended.TOP_START;
-    TOP_END: import('../popper-container').PopperContainerPositionExtended.TOP_END;
-    RIGHT_START: import('../popper-container').PopperContainerPositionExtended.RIGHT_START;
-    RIGHT_END: import('../popper-container').PopperContainerPositionExtended.RIGHT_END;
-    BOTTOM_START: import('../popper-container').PopperContainerPositionExtended.BOTTOM_START;
-    BOTTOM_END: import('../popper-container').PopperContainerPositionExtended.BOTTOM_END;
-    LEFT_START: import('../popper-container').PopperContainerPositionExtended.LEFT_START;
-    LEFT_END: import('../popper-container').PopperContainerPositionExtended.LEFT_END;
-    TOP: import('../popper-container').PopperContainerPositionBasic.TOP;
-    RIGHT: import('../popper-container').PopperContainerPositionBasic.RIGHT;
-    BOTTOM: import('../popper-container').PopperContainerPositionBasic.BOTTOM;
-    LEFT: import('../popper-container').PopperContainerPositionBasic.LEFT;
+    AUTO: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.AUTO;
+    AUTO_START: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.AUTO_START;
+    AUTO_END: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.AUTO_END;
+    TOP_START: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.TOP_START;
+    TOP_END: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.TOP_END;
+    RIGHT_START: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.RIGHT_START;
+    RIGHT_END: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.RIGHT_END;
+    BOTTOM_START: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.BOTTOM_START;
+    BOTTOM_END: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.BOTTOM_END;
+    LEFT_START: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.LEFT_START;
+    LEFT_END: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionExtended.LEFT_END;
+    TOP: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionBasic.TOP;
+    RIGHT: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionBasic.RIGHT;
+    BOTTOM: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionBasic.BOTTOM;
+    LEFT: import('../../../../core/src/components/popper-container/popper-container.types').PopperContainerPositionBasic.LEFT;
 };
 
 export declare type BentoPopoverPositions = PopperContainerPosition;
@@ -14304,8 +14356,8 @@ export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_28<
         {},
         {},
         {},
-        ComponentOptionsMixin_2,
-        ComponentOptionsMixin_2,
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
         {},
         string,
         Readonly<
@@ -16996,8 +17048,8 @@ export declare const BentoToggleButton: __VLS_WithTemplateSlots_6<
         {},
         {},
         {},
-        ComponentOptionsMixin_2,
-        ComponentOptionsMixin_2,
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
         {
             click: (event: MouseEvent) => void;
         } & {
@@ -17320,8 +17372,8 @@ export declare const BentoTypography: __VLS_WithTemplateSlots_35<
         {},
         {},
         {},
-        ComponentOptionsMixin_2,
-        ComponentOptionsMixin_2,
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
         {},
         string,
         Readonly<
@@ -17429,8 +17481,10 @@ export declare enum BentoTypographyVariant {
 }
 
 declare interface BentoVuePlugin {
-    theme: BentoTheme;
-    withToast: boolean;
+    theme?: BentoTheme;
+    withToast?: boolean;
+    withUtilityClasses?: boolean;
+    withDesignTokensCSSInjection?: boolean;
 }
 
 export declare type Binding<V> = DirectiveBinding<V> & KeyboardNavigation;
@@ -17881,14 +17935,8 @@ export declare function useForm<T extends ZodSchema>({
     validationSchema,
 }: UseForm<T>): {
     errorBag: Ref<ErrorBag<z.TypeOf<T>>>;
-    errors: z.TypeOf<T> extends infer T_1
-        ? T_1 extends z.TypeOf<T>
-            ? T_1 extends Ref<any>
-                ? T_1
-                : ShallowRef<T_1>
-            : never
-        : never;
-    values: [z.TypeOf<T>] extends [Ref<any>] ? z.TypeOf<T> : Ref<UnwrapRef<z.TypeOf<T>>>;
+    errors: Ref<z.TypeOf<T>> | ShallowRef<z.TypeOf<T>>;
+    values: Ref<z.TypeOf<T>>;
     handleReset: () => void;
     submitForm: (submitted: any) => () => void;
 };