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

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

@@ -1,7 +1,8 @@
 import type { ButtonHTMLAttributes } from 'vue/types/jsx';
 import { ComponentCustomProperties } from 'vue';
-import { ComponentOptionsBase } from 'vue';
-import { ComponentOptionsMixin } 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 type { ComponentPublicInstance } from 'vue';
 import { ComputedRef } from 'vue';
 import { DeepReadonly } from 'vue';
@@ -21,6 +22,7 @@ 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';
@@ -1160,8 +1162,8 @@ export declare const BentoButton: __VLS_WithTemplateSlots_4<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {
             blur: () => void;
         } & {
@@ -2954,7 +2956,7 @@ export declare const BentoCountry: DefineComponent<
             | 'ZZ'
             | BentoCountryCode;
         label: string;
-        variant: 'name' | 'iso' | 'phone_code' | 'capital' | 'custom' | BentoCountryVariant;
+        variant: 'name' | 'custom' | 'iso' | 'phone_code' | 'capital' | BentoCountryVariant;
     }
 >;
 
@@ -3276,8 +3278,8 @@ export declare const BentoCurrency: DefineComponent<
     {},
     {},
     {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
+    ComponentOptionsMixin_2,
+    ComponentOptionsMixin_2,
     {},
     string,
     Readonly<
@@ -3904,8 +3906,8 @@ export declare const BentoDashedUnderline: __VLS_WithTemplateSlots_7<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {},
         string,
         Readonly<
@@ -4777,8 +4779,8 @@ export declare const BentoDate: DefineComponent<
     {},
     {},
     {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
+    ComponentOptionsMixin_2,
+    ComponentOptionsMixin_2,
     {},
     string,
     Readonly<
@@ -6639,7 +6641,7 @@ export declare const BentoDropdownCountry: DefineComponent<
         value: BentoListboxSelectedValue;
         description: string;
         label: string;
-        variant: 'name' | 'iso' | 'phone_code' | 'capital' | 'custom' | BentoCountryVariant;
+        variant: 'name' | 'custom' | 'iso' | 'phone_code' | 'capital' | BentoCountryVariant;
         required: boolean;
         condensed: boolean;
         disabled: boolean;
@@ -8360,8 +8362,8 @@ export declare const BentoFormLayoutTitle: __VLS_WithTemplateSlots_14<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {},
         string,
         Readonly<
@@ -8419,11 +8421,11 @@ export declare const BentoHeader: DefineComponent<
          */
         infoIconPopoverPosition: {
             type: PropType<
-                | 'top'
+                | 'auto'
+                | 'left'
                 | 'right'
                 | 'bottom'
-                | 'left'
-                | 'auto'
+                | 'top'
                 | 'auto-start'
                 | 'auto-end'
                 | 'top-start'
@@ -8504,11 +8506,11 @@ export declare const BentoHeader: DefineComponent<
              */
             infoIconPopoverPosition: {
                 type: PropType<
-                    | 'top'
+                    | 'auto'
+                    | 'left'
                     | 'right'
                     | 'bottom'
-                    | 'left'
-                    | 'auto'
+                    | 'top'
                     | 'auto-start'
                     | 'auto-end'
                     | 'top-start'
@@ -8555,11 +8557,11 @@ export declare const BentoHeader: DefineComponent<
         infoIconTooltipText: string;
         lastUpdated: number | Date;
         infoIconPopoverPosition:
-            | 'top'
+            | 'auto'
+            | 'left'
             | 'right'
             | 'bottom'
-            | 'left'
-            | 'auto'
+            | 'top'
             | 'auto-start'
             | 'auto-end'
             | 'top-start'
@@ -8735,8 +8737,8 @@ export declare const BentoInfoIcon: DefineComponent<
     {},
     {},
     {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
+    ComponentOptionsMixin_2,
+    ComponentOptionsMixin_2,
     {},
     string,
     Readonly<
@@ -8760,11 +8762,11 @@ export declare const BentoInfoIcon: DefineComponent<
     >,
     {
         tooltipPosition:
-            | 'top'
+            | 'auto'
+            | 'left'
             | 'right'
             | 'bottom'
-            | 'left'
-            | 'auto'
+            | 'top'
             | 'auto-start'
             | 'auto-end'
             | 'top-start'
@@ -9407,8 +9409,8 @@ export declare const BentoLink: __VLS_WithTemplateSlots_18<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {
             click: (clickEvent: MouseEvent) => void;
         },
@@ -9580,8 +9582,8 @@ export declare const BentoLoadingButton: __VLS_WithTemplateSlots_5<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {
             click: (event: MouseEvent) => void;
         },
@@ -9886,11 +9888,11 @@ export declare const BentoMenu: DefineComponent<
         button: BentoMenuButtonProps;
         teleport: boolean;
         menuPosition:
-            | 'top'
+            | 'auto'
+            | 'left'
             | 'right'
             | 'bottom'
-            | 'left'
-            | 'auto'
+            | 'top'
             | 'auto-start'
             | 'auto-end'
             | 'top-start'
@@ -10520,8 +10522,8 @@ export declare const BentoModalFullscreenPage: __VLS_WithTemplateSlots_22<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {},
         string,
         Readonly<
@@ -12581,11 +12583,11 @@ export declare const BentoPopover: __VLS_WithTemplateSlots_23<
             actions: BentoButtonActionsList;
             modifiers: unknown[];
             position:
-                | 'top'
+                | 'auto'
+                | 'left'
                 | 'right'
                 | 'bottom'
-                | 'left'
-                | 'auto'
+                | 'top'
                 | 'auto-start'
                 | 'auto-end'
                 | 'top-start'
@@ -14302,8 +14304,8 @@ export declare const BentoSidepanelPage: __VLS_WithTemplateSlots_28<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {},
         string,
         Readonly<
@@ -16994,8 +16996,8 @@ export declare const BentoToggleButton: __VLS_WithTemplateSlots_6<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {
             click: (event: MouseEvent) => void;
         } & {
@@ -17318,8 +17320,8 @@ export declare const BentoTypography: __VLS_WithTemplateSlots_35<
         {},
         {},
         {},
-        ComponentOptionsMixin,
-        ComponentOptionsMixin,
+        ComponentOptionsMixin_2,
+        ComponentOptionsMixin_2,
         {},
         string,
         Readonly<
@@ -17879,8 +17881,14 @@ export declare function useForm<T extends ZodSchema>({
     validationSchema,
 }: UseForm<T>): {
     errorBag: Ref<ErrorBag<z.TypeOf<T>>>;
-    errors: Ref<z.TypeOf<T>> | ShallowRef<z.TypeOf<T>>;
-    values: Ref<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>>>;
     handleReset: () => void;
     submitForm: (submitted: any) => () => void;
 };

package/dist/accordion.js

@@ -1,6 +1,104 @@
-import { a as e, b as n } from "./chunks/accordion-item.DmnrjNzw.js";
+import { defineComponent as p, provide as C, toRef as h, ref as l, inject as y, computed as g, watch as _ } from "vue";
+import { n as u } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as x } from "./chunks/index.0c46bc04.js";
+import { C as O, a as T } from "./chunks/chevron-up.81185563.js";
+import { g as d } from "./chunks/unique-id.a2a2b458.js";
+import { o as E } from "./chunks/resize.a041304d.js";
+import { u as N } from "./chunks/use-expandable-content-height.62fc84e5.js";
+import "./assets/index35.css";
+const m = Symbol("accordion title size injection key"), S = {}, z = /* @__PURE__ */ p({
+  ...S,
+  __name: "accordion",
+  props: {
+    /**
+     * Controls accordion title size.
+     * @values default, small
+     */
+    titleSize: {
+      type: String,
+      default: "default"
+    }
+  },
+  setup(i) {
+    const e = i;
+    return C(m, h(e, "titleSize")), { __sfc: !0, props: e };
+  }
+});
+var A = function() {
+  var e = this, n = e._self._c;
+  return e._self._setupProxy, n("div", { staticClass: "b-accordion" }, [e._t("default")], 2);
+}, B = [], $ = /* @__PURE__ */ u(
+  z,
+  A,
+  B,
+  !1,
+  null,
+  "fb182a1c",
+  null,
+  null
+);
+const K = $.exports, R = {}, D = /* @__PURE__ */ p({
+  ...R,
+  __name: "accordion-item",
+  props: {
+    /**
+     * Sets the title of the accordion item.
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Controls if the content is visible or hidden.
+     */
+    isExpanded: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:is-expanded"],
+  setup(i, { emit: e }) {
+    const n = i, t = "b-accordion-item__animation--content", o = l(null), s = l(n.isExpanded), f = d("accordionItemButton"), v = d("accordionItemContent"), I = y(m, "default"), { updateContentHeight: c, contentHeight: r } = N(o, s), b = g(() => r.value ? { "max-height": r.value } : {});
+    return _(
+      () => n.isExpanded,
+      (a) => {
+        s.value = a;
+      }
+    ), _(
+      () => o.value,
+      () => {
+        let a = null;
+        !a && o.value && (a = E(o.value, () => {
+          o.value && c();
+        }));
+      }
+    ), _(
+      s,
+      (a) => {
+        e("update:is-expanded", a), c();
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, CONTENT_TRANSITION_NAME: t, props: n, emit: e, contentDiv: o, isOpen: s, buttonId: f, contentId: v, titleSize: I, updateContentHeight: c, contentHeight: r, contentMaxHeight: b, BentoTypography: x, ChevronDownIcon: O, ChevronUpIcon: T };
+  }
+});
+var H = function() {
+  var e = this, n = e._self._c, t = e._self._setupProxy;
+  return n("div", { staticClass: "b-accordion-item" }, [n(t.BentoTypography, { attrs: { el: "h3", variant: t.titleSize === "small" ? "body" : "title", strongest: t.titleSize === "small" } }, [n("button", { staticClass: "b-accordion-item__button", attrs: { id: t.buttonId, "aria-controls": t.contentId, "aria-expanded": `${t.isOpen}`, type: "button" }, on: { click: function(o) {
+    t.isOpen = !t.isOpen;
+  } } }, [t.isOpen ? n(t.ChevronUpIcon, { staticClass: "b-accordion-item__icon", attrs: { "svg-title": "collapse", "aria-hidden": "true" } }) : n(t.ChevronDownIcon, { staticClass: "b-accordion-item__icon", attrs: { "svg-title": "expand", "aria-hidden": "true" } }), e._v(" " + e._s(e.title) + " ")], 1)]), n("Transition", { attrs: { name: t.CONTENT_TRANSITION_NAME } }, [t.isOpen ? n("div", { style: t.contentMaxHeight, attrs: { id: t.contentId, "aria-labelledby": t.buttonId, role: "region" } }, [n("div", { ref: "contentDiv", staticClass: "b-accordion-item__content" }, [e._t("default")], 2)]) : e._e()])], 1);
+}, M = [], w = /* @__PURE__ */ u(
+  D,
+  H,
+  M,
+  !1,
+  null,
+  "01c3158a",
+  null,
+  null
+);
+const L = w.exports;
 export {
-  e as BentoAccordion,
-  n as BentoAccordionItem
+  K as BentoAccordion,
+  L as BentoAccordionItem
 };
 //# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"accordion.js","sources":["../src/components/accordion/accordion.keys.ts","../src/components/accordion/accordion.vue","../src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon v-if=\"isOpen\" class=\"b-accordion-item__icon\" svg-title=\"collapse\" aria-hidden=\"true\" />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" svg-title=\"expand\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content';\n\n    const props = defineProps({\n        /**\n         * Sets the title of the accordion item.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n        /**\n         * Controls if the content is visible or hidden.\n         */\n        isExpanded: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion item is an interactive header used to reveal or hide a\n     * section of content associated with this header.\n     *\n     * This component must always be wrapped by a `BentoAccordion` component.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","__default__","CONTENT_TRANSITION_NAME","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","observer","observeSizeOfElement","emit"],"mappings":";;;;;;;;AAAa,MAAAA,IAAA,OAAA,oCAAA,GCqDTC,IAAA,CAAA;;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,WAAA,CAAA;;;;;;;;;;;;;;;;qBCyHAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;iBAnGAC,IAAA,wCA2BAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAJ,EAAA,UAAA,GAGAM,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAd,GAAA,SAAA,GAGA,EAAA,qBAAAe,GAAA,eAAAC,EAAA,IAAAC,EAAAV,GAAAE,CAAA,GAEAS,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAhB,EAAA;AAAA,MACgB,CAAAiB,MAAA;AAER,QAAAZ,EAAA,QAAAY;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAA,MAAAb,EAAA;AAAA,MACqB,MAAA;AAEb,YAAAe,IAAA;AACA,QAAA,CAAAA,KAAAf,EAAA,UACIe,IAAAC,EAAAhB,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIQ,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJK;AAAA,MAAAX;AAAA,MACI,CAAAY,MAAA;AAGI,QAAAG,EAAA,sBAAAH,CAAA,GAEAN,EAAA;AAAA,MAAoB;AAAA,MACxB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/action-bar.js

@@ -1,5 +1,149 @@
-import { B as t } from "./chunks/action-bar.D2CCraKp.js";
+import { defineComponent as w, computed as c, ref as b, toRefs as O, watch as g, provide as V, nextTick as B } from "vue";
+import { a as P } from "./chunks/button.f115843a.js";
+import { B as R } from "./chunks/index.0c46bc04.js";
+import { B as F } from "./chunks/button-actions-with-menu.9b40f365.js";
+import { C as W } from "./chunks/cross.04678d81.js";
+import { u as L } from "./chunks/i18n.eb5b985b.js";
+import { u as k } from "./chunks/index.6584f75e.js";
+import { P as M } from "./chunks/index.6f2870b1.js";
+import { B as U } from "./chunks/button-actions.fc53b2ea.js";
+import { n as z } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index39.css";
+const D = {
+  "en-US": {
+    actionBar: "Action bar",
+    cancel: "Cancel",
+    close: "Close",
+    save: "Save",
+    selected: "selected",
+    unsavedChanges: "unsaved change | unsaved changes"
+  }
+}, G = {
+  i18n: { messages: D }
+}, K = /* @__PURE__ */ w({
+  ...G,
+  __name: "action-bar",
+  props: {
+    /**
+     * 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: Array,
+      default: () => []
+    },
+    /**
+     * How many actions should be visible outside the menu, cannot be more than 4
+     */
+    visibleActions: {
+      type: Number,
+      default: 4,
+      validator: (o) => o > 0 && o <= 4
+    },
+    /**
+     * Use when there are sticky elements at the bottom, like sticky pagination
+     */
+    extraBottomSpacing: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show how many items are selected
+     */
+    itemCounter: {
+      type: Number,
+      required: !0
+    },
+    /**
+     * Label for the selection, e.g. 'selected'/'changed'
+     */
+    selectionLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Variant for the action bar
+     * @values default, confirmation
+     */
+    variant: {
+      type: String,
+      default: "default"
+    }
+  },
+  emits: ["close", "cancel", "save"],
+  setup(o, { emit: a }) {
+    const n = o, t = 100, _ = 7, C = 500, m = 32, { t: r, tc: S } = L(), E = c(() => n.selectionLabel ? n.selectionLabel : r("selected")), l = b(null), { extraBottomSpacing: y, visibleActions: A } = O(n), { width: i } = k(), e = b(null), u = b(null), h = c(() => n.variant === "confirmation");
+    g(
+      () => A.value,
+      (s) => {
+        u.value = s <= 4 ? s : 4, e.value = u.value;
+      },
+      { immediate: !0 }
+    );
+    const I = c(() => ({
+      "b-action-bar--extra-spacing": y.value,
+      "b-action-bar--confirmation": h.value
+    }));
+    V(M, _);
+    const T = c(() => {
+      const s = n.actions.map((N) => ({
+        ...N,
+        variant: "secondary"
+      })), p = s.slice(0, e.value).reverse(), d = s.slice(e.value);
+      return [...p, ...d];
+    }), x = c(() => [
+      {
+        title: r("save"),
+        event: () => a("save")
+      },
+      {
+        title: r("cancel"),
+        variant: "secondary",
+        event: () => a("cancel")
+      }
+    ]), v = async () => {
+      await B(), i.value > l.value.clientWidth + m + t && e.value < u.value && (e.value += 1, v());
+    }, f = async () => {
+      await B(), i.value < l.value.clientWidth + m && e.value > 0 && (e.value -= 1, f());
+    };
+    return g(
+      () => i.value,
+      async (s, p) => {
+        if (await B(), !l.value)
+          return;
+        const d = s > p;
+        i.value < C ? e.value = 0 : d ? v() : f();
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: t, MENU_OFFSET: _, RESPONSIVE_BREAKPOINT: C, SPACING: m, props: n, emit: a, t: r, tc: S, label: E, actionBar: l, extraBottomSpacing: y, visibleActions: A, width: i, internalDisplayedActions: e, internalVisibleActions: u, isConfirmationVariant: h, conditionalClasses: I, actionsInternal: T, confirmationActions: x, showActions: v, hideActions: f, BentoButton: P, BentoButtonActions: U, BentoTypography: R, ButtonActionsWithMenu: F, CrossIcon: W };
+  }
+});
+var q = function() {
+  var a = this, n = a._self._c, t = a._self._setupProxy;
+  return n("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [n("section", { staticClass: "b-action-bar", class: t.conditionalClasses, attrs: { "aria-label": t.t("actionBar") } }, [n("div", { ref: "actionBar", staticClass: "b-action-bar__container" }, [t.isConfirmationVariant ? a._e() : n("div", { staticClass: "b-action-bar__close-button" }, [n(t.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": t.t("close") }, on: { click: function(_) {
+    return t.emit("close");
+  } }, scopedSlots: a._u([{ key: "iconLeft", fn: function() {
+    return [n(t.CrossIcon, { attrs: { "aria-hidden": !0 } })];
+  }, proxy: !0 }], null, !1, 4214210411) })], 1), n(t.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [a._v(" " + a._s(a.itemCounter) + " " + a._s(t.isConfirmationVariant ? t.tc("unsavedChanges", a.itemCounter) : t.label) + " ")]), t.isConfirmationVariant ? n(t.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: t.confirmationActions, inverse: "" } }) : n(t.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: t.actionsInternal, "displayed-actions": t.internalDisplayedActions, "menu-position": "top-end", inverse: "" } })], 1)])]);
+}, J = [], Y = /* @__PURE__ */ z(
+  K,
+  q,
+  J,
+  !1,
+  null,
+  "f42b2c8c",
+  null,
+  null
+);
+const st = Y.exports;
 export {
-  t as BentoActionBar
+  st as BentoActionBar
 };
 //# sourceMappingURL=action-bar.js.map

package/dist/action-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"action-bar.js","sources":["../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                    <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                        <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                    </bento-button>\n                </div>\n                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    {{ itemCounter }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\n                />\n                <button-actions-with-menu\n                    v-else\n                    :actions=\"actionsInternal\"\n                    class=\"b-action-bar__actions\"\n                    :displayed-actions=\"internalDisplayedActions\"\n                    menu-position=\"top-end\"\n                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected\n         */\n        itemCounter: {\n            type: Number,\n            required: true,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        (e: 'cancel'): void;\n        (e: 'save'): void;\n    }>();\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;GAqPIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtMAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IAkEA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAL,EAAA,UAAA,CAAA,GAGAM,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAvB,CAAA;AAGA,UAAAwB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA2B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA3B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA2B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,IAAAH,KAAAiB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,KAAAc,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAb,IACIe,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;"}