@adyen/bento-vue3 1.27.0 → 1.28.0

package/dist/@types/packages/vue2/src/components/segmented-control/segmented-control.vue.d.ts

@@ -1,5 +1,4 @@
-import { PropType } from "../../../../vue3/node_modules/vue";
-import { BentoSegmentedControlEvent, BentoSegmentedControlItem } from './segmented-control.types';
+import { BentoSegmentedControlItem } from './segmented-control.types';
 /**
  * @example
  * import { BentoSegmentedControl } from '@adyen/bento-vue2';
@@ -15,110 +14,79 @@ import { BentoSegmentedControlEvent, BentoSegmentedControlItem } from './segment
  *     `
  * }
  */
-declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
-    /**
-     * Items that will populate the segmented control.
-     */
-    items: {
-        type: PropType<BentoSegmentedControlItem[]>;
-        required: true;
-        validator: (arr: Array<BentoSegmentedControlItem[]>) => boolean;
-    };
-    /**
-     * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.
-     */
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        required: true;
-    };
-    /**
-     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
-     */
+declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Accessible name describing the segmented control.
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
      */
-    ariaLabel: {
-        type: StringConstructor;
-        default: any;
-    };
+    ariaLabel?: string;
     /**
      * If set to true, renders the component full width.
      */
-    fullWidth: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.
-     */
-    wrap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {
-    computedAriaLabel: import("../../../../vue3/node_modules/vue").ComputedRef<string>;
-    inputValue: import("../../../../vue3/node_modules/vue").Ref<string | number>;
-    segmentedControlRef: import("../../../../vue3/node_modules/vue").Ref<any>;
-    segmentedControlButtonRef: import("../../../../vue3/node_modules/vue").Ref<any>;
-    computedItems: import("../../../../vue3/node_modules/vue").ComputedRef<{
-        tooltipText: string;
-        label: string;
-        value: string | number;
-        disabled?: boolean;
-    }[]>;
-    truncate: import("../../../../vue3/node_modules/vue").ComputedRef<boolean>;
-    conditionalClasses: import("../../../../vue3/node_modules/vue").ComputedRef<{
-        'b-segmented-control--hug': boolean;
-        'b-segmented-control--full-width': boolean;
-        'b-segmented-control--truncate': boolean;
-        'b-segmented-control--wrap': boolean;
-    }>;
-    onInput: (value: any) => void;
-}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, BentoSegmentedControlEvent[], BentoSegmentedControlEvent, 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<{
+    fullWidth?: boolean;
     /**
      * Items that will populate the segmented control.
      */
-    items: {
-        type: PropType<BentoSegmentedControlItem[]>;
-        required: true;
-        validator: (arr: Array<BentoSegmentedControlItem[]>) => boolean;
-    };
+    items: BentoSegmentedControlItem[];
     /**
      * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.
      */
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        required: true;
-    };
+    modelValue: string | number;
     /**
-     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.
      */
+    wrap?: boolean;
+}>, {
+    ariaLabel: any;
+    fullWidth: boolean;
+    wrap: boolean;
+}>, {}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
+    "update:model-value": (value: string | number) => 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<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Accessible name describing the segmented control.
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
      */
-    ariaLabel: {
-        type: StringConstructor;
-        default: any;
-    };
+    ariaLabel?: string;
     /**
      * If set to true, renders the component full width.
      */
-    fullWidth: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    fullWidth?: boolean;
+    /**
+     * Items that will populate the segmented control.
+     */
+    items: BentoSegmentedControlItem[];
+    /**
+     * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.
+     */
+    modelValue: string | number;
     /**
      * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.
      */
-    wrap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & {
-    "onUpdate:model-value"?: (...args: any[]) => any;
+    wrap?: boolean;
+}>, {
+    ariaLabel: any;
+    fullWidth: boolean;
+    wrap: boolean;
+}>>> & {
+    "onUpdate:model-value"?: (value: string | number) => any;
 }, {
     wrap: boolean;
     ariaLabel: string;
     fullWidth: boolean;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import("../../../../vue3/node_modules/vue").PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import("../../../../vue3/node_modules/vue").PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

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

@@ -1,4 +1,3 @@
-import { PropType } from "../../../../vue3/node_modules/vue";
 import { BentoStatusVariant } from './status.types';
 /**
  * A Status component is used to indicate a
@@ -16,21 +15,25 @@ import { BentoStatusVariant } from './status.types';
  *     `
  * }
  */
-declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
-    variant: {
-        type: PropType<"blue" | "green" | "red" | "yellow" | "grey" | "orange" | BentoStatusVariant>;
+declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_modules/vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    variant: BentoStatusVariant | `${BentoStatusVariant}`;
+}>, {}, 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<__VLS_TypePropsToRuntimeProps<{
+    variant: BentoStatusVariant | `${BentoStatusVariant}`;
+}>>>, {}>, {
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import("../../../../vue3/node_modules/vue").PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import("../../../../vue3/node_modules/vue").PropType<T[K]>;
         required: true;
-        validator: (type: BentoStatusVariant) => boolean;
     };
-}, {
-    conditionalClass: import("../../../../vue3/node_modules/vue").ComputedRef<{
-        [x: string]: boolean;
-    }>;
-}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{
-    variant: {
-        type: PropType<"blue" | "green" | "red" | "yellow" | "grey" | "orange" | BentoStatusVariant>;
-        required: true;
-        validator: (type: BentoStatusVariant) => boolean;
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
     };
-}>>, {}>;
-export default _default;
+};

package/dist/@types/packages/vue2/src/index.d.ts

@@ -3,6 +3,7 @@ export * from './components/accordion';
 export * from './components/action-bar';
 export * from './components/alert';
 export * from './components/button';
+export * from './components/dashed-underline';
 export * from './components/data-grid';
 export * from './components/card';
 export * from './components/date-picker';

package/dist/accordion.js

@@ -1,128 +1,6 @@
-import { defineComponent as C, provide as k, toRef as B, openBlock as a, createElementBlock as r, renderSlot as E, ref as b, inject as O, computed as $, watch as s, createVNode as y, unref as e, withCtx as g, createElementVNode as h, createBlock as I, createTextVNode as z, toDisplayString as A, Transition as D, normalizeStyle as H, createCommentVNode as V } from "vue";
-import { _ as N } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as w } from "./chunks/index.ee15db35.js";
-import { C as R, a as j } from "./chunks/chevron-up.638a9f34.js";
-import { g as x } from "./chunks/unique-id.a2a2b458.js";
-import { o as M } from "./chunks/resize.a041304d.js";
-import { u as U } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import "./assets/index2.css";
-const S = Symbol("accordion title size injection key"), q = { class: "b-accordion" }, J = {}, K = /* @__PURE__ */ C({
-  ...J,
-  __name: "accordion",
-  props: {
-    /**
-     * Controls accordion title size.
-     * @values default, small
-     */
-    titleSize: {
-      type: String,
-      default: "default"
-    }
-  },
-  setup(i) {
-    return k(S, B(i, "titleSize")), (c, l) => (a(), r("div", q, [
-      E(c.$slots, "default", {}, void 0, !0)
-    ]));
-  }
-});
-const ae = /* @__PURE__ */ N(K, [["__scopeId", "data-v-9fccc066"]]), L = { class: "b-accordion-item" }, Y = ["id", "aria-controls", "aria-expanded"], Z = ["id", "aria-labelledby"], F = {}, G = /* @__PURE__ */ C({
-  ...F,
-  __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: d }) {
-    const c = i, l = "b-accordion-item__animation--content", n = b(null), t = b(c.isExpanded), _ = x("accordionItemButton"), p = x("accordionItemContent"), u = O(S, "default"), { updateContentHeight: m, contentHeight: v } = U(n, t), T = $(() => v.value ? { "max-height": v.value } : {});
-    return s(
-      () => c.isExpanded,
-      (o) => {
-        t.value = o;
-      }
-    ), s(
-      () => n.value,
-      () => {
-        let o = null;
-        !o && n.value && (o = M(n.value, () => {
-          n.value && m();
-        }));
-      }
-    ), s(
-      t,
-      (o) => {
-        d("update:is-expanded", o), m();
-      },
-      { immediate: !0 }
-    ), (o, f) => (a(), r("div", L, [
-      y(e(w), {
-        el: "h3",
-        variant: e(u) === "small" ? "body" : "title",
-        strongest: e(u) === "small"
-      }, {
-        default: g(() => [
-          h("button", {
-            id: e(_),
-            "aria-controls": e(p),
-            "aria-expanded": `${t.value}`,
-            type: "button",
-            class: "b-accordion-item__button",
-            onClick: f[0] || (f[0] = (P) => t.value = !t.value)
-          }, [
-            t.value ? (a(), I(e(R), {
-              key: 0,
-              class: "b-accordion-item__icon",
-              "svg-title": "collapse",
-              "aria-hidden": "true"
-            })) : (a(), I(e(j), {
-              key: 1,
-              class: "b-accordion-item__icon",
-              "svg-title": "expand",
-              "aria-hidden": "true"
-            })),
-            z(" " + A(i.title), 1)
-          ], 8, Y)
-        ]),
-        _: 1
-      }, 8, ["variant", "strongest"]),
-      y(D, { name: l }, {
-        default: g(() => [
-          t.value ? (a(), r("div", {
-            key: 0,
-            id: e(p),
-            "aria-labelledby": e(_),
-            role: "region",
-            style: H(e(T))
-          }, [
-            h("div", {
-              ref_key: "contentDiv",
-              ref: n,
-              class: "b-accordion-item__content"
-            }, [
-              E(o.$slots, "default", {}, void 0, !0)
-            ], 512)
-          ], 12, Z)) : V("", !0)
-        ]),
-        _: 3
-      })
-    ]));
-  }
-});
-const ie = /* @__PURE__ */ N(G, [["__scopeId", "data-v-b1de8d3a"]]);
+import { a as e, b as n } from "./chunks/accordion-item.BcfGYvjn.js";
 export {
-  ae as BentoAccordion,
-  ie as BentoAccordionItem
+  e as BentoAccordion,
+  n as BentoAccordionItem
 };
 //# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../vue2/src/components/accordion/accordion.keys.ts","../../vue2/src/components/accordion/accordion.vue","../../vue2/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","__default__","CONTENT_TRANSITION_NAME","contentDiv","ref","isOpen","props","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","observer","observeSizeOfElement","emit"],"mappings":";;;;;;;;AAAa,MAAAA,IAAA,OAAA,oCAAA,iCCqDTC,IAAA,CAAA;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,KAAA,WAAA,CAAA;;;;;qLCyHAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;iBAnGAC,IAAA,wCA2BAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAE,EAAA,UAAA,GAGAC,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAd,GAAA,SAAA,GAGA,EAAA,qBAAAe,GAAA,eAAAC,EAAA,IAAAC,EAAAX,GAAAE,CAAA,GAEAU,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAX,EAAA;AAAA,MACgB,CAAAY,MAAA;AAER,QAAAb,EAAA,QAAAa;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAA,MAAAd,EAAA;AAAA,MACqB,MAAA;AAEb,YAAAgB,IAAA;AACA,QAAA,CAAAA,KAAAhB,EAAA,UACIgB,IAAAC,EAAAjB,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIS,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJK;AAAA,MAAAZ;AAAA,MACI,CAAAa,MAAA;AAGI,QAAAG,EAAA,sBAAAH,CAAA,GAEAN,EAAA;AAAA,MAAoB;AAAA,MACxB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"accordion.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/action-bar.js

@@ -1,189 +1,5 @@
-import { defineComponent as W, computed as c, ref as p, toRefs as U, watch as g, provide as z, nextTick as f, openBlock as m, createBlock as b, Transition as D, withCtx as y, createElementVNode as E, normalizeClass as G, unref as e, createElementBlock as K, createVNode as B, createCommentVNode as M, createTextVNode as q, toDisplayString as S } from "vue";
-import { a as J } from "./chunks/button.ae4760cd.js";
-import { B as Y } from "./chunks/index.ee15db35.js";
-import { B as Z } from "./chunks/button-actions-with-menu.4f311411.js";
-import { C as $ } from "./chunks/cross.26509efc.js";
-import { u as j } from "./chunks/i18n.f7e6533e.js";
-import { u as H } from "./chunks/index.fedbb4c2.js";
-import { P as Q } from "./chunks/index.a001a0a8.js";
-import { B as X } from "./chunks/button-actions.82163994.js";
-import { _ as ee } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index5.css";
-const N = {
-  "en-US": {
-    actionBar: "Action bar",
-    cancel: "Cancel",
-    close: "Close",
-    save: "Save",
-    selected: "selected",
-    unsavedChanges: "unsaved change | unsaved changes"
-  }
-}, te = ["aria-label"], ae = {
-  key: 0,
-  class: "b-action-bar__close-button"
-}, ne = {
-  i18n: { messages: N }
-}, oe = /* @__PURE__ */ W({
-  ...ne,
-  __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: (n) => n > 0 && n <= 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(n, { emit: v }) {
-    const s = n, I = 100, x = 7, T = 500, A = 32, { t: i, tc: k } = j({ messages: N }), w = c(() => s.selectionLabel ? s.selectionLabel : i("selected")), r = p(null), { extraBottomSpacing: V, visibleActions: O } = U(s), { width: l } = H(), t = p(null), _ = p(null), u = c(() => s.variant === "confirmation");
-    g(
-      () => O.value,
-      (a) => {
-        _.value = a <= 4 ? a : 4, t.value = _.value;
-      },
-      { immediate: !0 }
-    );
-    const P = c(() => ({
-      "b-action-bar--extra-spacing": V.value,
-      "b-action-bar--confirmation": u.value
-    }));
-    z(Q, x);
-    const R = c(() => {
-      const a = s.actions.map((L) => ({
-        ...L,
-        variant: "secondary"
-      })), o = a.slice(0, t.value).reverse(), d = a.slice(t.value);
-      return [...o, ...d];
-    }), F = c(() => [
-      {
-        title: i("save"),
-        event: () => v("save")
-      },
-      {
-        title: i("cancel"),
-        variant: "secondary",
-        event: () => v("cancel")
-      }
-    ]), C = async () => {
-      await f(), l.value > r.value.clientWidth + A + I && t.value < _.value && (t.value += 1, C());
-    }, h = async () => {
-      await f(), l.value < r.value.clientWidth + A && t.value > 0 && (t.value -= 1, h());
-    };
-    return g(
-      () => l.value,
-      async (a, o) => {
-        if (await f(), !r.value)
-          return;
-        const d = a > o;
-        l.value < T ? t.value = 0 : d ? C() : h();
-      },
-      { immediate: !0 }
-    ), (a, o) => (m(), b(D, {
-      name: "b-action-bar__animation",
-      appear: ""
-    }, {
-      default: y(() => [
-        E("section", {
-          class: G(["b-action-bar", e(P)]),
-          "aria-label": e(i)("actionBar")
-        }, [
-          E("div", {
-            ref_key: "actionBar",
-            ref: r,
-            class: "b-action-bar__container"
-          }, [
-            e(u) ? M("", !0) : (m(), K("div", ae, [
-              B(e(J), {
-                variant: "tertiary",
-                inverse: "",
-                "aria-label": e(i)("close"),
-                onClick: o[0] || (o[0] = (d) => v("close"))
-              }, {
-                iconLeft: y(() => [
-                  B(e($), { "aria-hidden": !0 })
-                ]),
-                _: 1
-              }, 8, ["aria-label"])
-            ])),
-            B(e(Y), {
-              el: "span",
-              stronger: "",
-              class: "b-action-bar__selection"
-            }, {
-              default: y(() => [
-                q(S(n.itemCounter) + " " + S(e(u) ? e(k)("unsavedChanges", n.itemCounter) : e(w)), 1)
-              ]),
-              _: 1
-            }),
-            e(u) ? (m(), b(e(X), {
-              key: 1,
-              actions: e(F),
-              class: "b-action-bar__actions",
-              inverse: ""
-            }, null, 8, ["actions"])) : (m(), b(Z, {
-              key: 2,
-              actions: e(R),
-              class: "b-action-bar__actions",
-              "displayed-actions": t.value,
-              "menu-position": "top-end",
-              inverse: ""
-            }, null, 8, ["actions", "displayed-actions"]))
-          ], 512)
-        ], 10, te)
-      ]),
-      _: 1
-    }));
-  }
-});
-const pe = /* @__PURE__ */ ee(oe, [["__scopeId", "data-v-191a2ab0"]]);
+import { B as t } from "./chunks/action-bar.BvAtk-jI.js";
 export {
-  pe as BentoActionBar
+  t as BentoActionBar
 };
 //# sourceMappingURL=action-bar.js.map

package/dist/action-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar.js","sources":["../../vue2/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,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtMAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IAkEA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAP,EAAA,CAAA,GACAQ,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"action-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}