@adyen/bento-vue3 1.88.1 → 1.89.2

package/dist/chunks/base-modal.gZAtk-xP.js

@@ -1,443 +0,0 @@
-import { defineComponent as $, useSlots as ee, ref as g, computed as d, inject as ce, watch as Y, nextTick as re, onUnmounted as me, openBlock as A, createBlock as P, normalizeClass as J, createSlots as te, withCtx as l, createElementVNode as h, normalizeStyle as O, unref as t, renderSlot as c, createCommentVNode as w, createVNode as q, useAttrs as ge, onMounted as ve, provide as G, toRefs as pe, createElementBlock as fe, withKeys as _e, withDirectives as ye } from "vue";
-import { B as be } from "./button.C6t9_lzm.js";
-import { B as Le } from "./focus-trap.BxCwzLqN.js";
-import { u as ae } from "./use-has-slot.B7eQSabc.js";
-import { u as he } from "./index.B875RXHM.js";
-import { l as Ae } from "./button-actions.BYBpjNqy.js";
-import { g as Ce } from "./generate-uid.NJ8tVoha.js";
-import { B as Ee } from "./directive.rXUeDb8p.js";
-import { C as Ie } from "./cross.CCHdi6v3.js";
-import { b as Oe, B as Pe, D as Se, a as ke } from "./dialog-page.C1KUI51V.js";
-import { B as x } from "./typography.B3J6_tYk.js";
-import { F as De } from "./footer-actions.Ck6UztD8.js";
-import { o as Be } from "./resize.Bqks3WUm.js";
-import { G as Te, a as Ne } from "./grid-layout.Vhv1_zFs.js";
-import { _ as oe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/base-modal.css";
-var Ge = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.DIALOG = "dialog", e))(Ge || {}), we = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(we || {}), R = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(R || {}), D = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(D || {}), W = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(W || {}), Re = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(Re || {}), $e = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))($e || {});
-const ne = {
-  "en-US": {
-    ariaLabelFallback: "modal",
-    close: "Close"
-  },
-  "ja-JP": {
-    ariaLabelFallback: "モーダル",
-    close: "閉じる"
-  },
-  "pt-BR": {
-    ariaLabelFallback: "modal",
-    close: "Fechar"
-  }
-}, se = /* @__PURE__ */ Symbol("modal config data injection key"), Fe = { class: "b-modal-page__header" }, Me = {
-  "aria-label": "modal actions",
-  class: "b-modal-page__actions"
-}, ze = $({}), Ue = /* @__PURE__ */ $({
-  ...ze,
-  __name: "modal-page",
-  props: {
-    actions: { default: null },
-    actionsLabel: { default: null },
-    columnsSize: { default: D.SMALLER },
-    customPadding: { default: null },
-    destructiveActions: { type: Boolean, default: !1 },
-    withColumnLayout: { type: Boolean, default: !1 },
-    pageId: { default: void 0 },
-    previousPage: { default: void 0 }
-  },
-  setup(e) {
-    const F = ee(), u = ae(F), f = g(null), s = e, M = d(() => ({
-      "b-modal-page--custom-padding": s.customPadding
-    })), _ = d(() => {
-      var a;
-      return {
-        "b-modal-page__content--with-header": u("default"),
-        "b-modal-page__content--with-actions": u("actions") || ((a = s.actions) == null ? void 0 : a.length)
-      };
-    }), i = d(() => {
-      if (!s.customPadding)
-        return {};
-      const a = {
-        paddingLeft: s.customPadding,
-        paddingRight: s.customPadding
-      }, r = { ...a, paddingTop: void 0, paddingBottom: void 0 };
-      return u("default") || (r.paddingTop = s.customPadding), u("actions") || (r.paddingBottom = s.customPadding), {
-        header: {
-          ...a,
-          paddingTop: s.customPadding,
-          paddingRight: `${parseInt(s.customPadding, 10) + 26}px`,
-          flex: 1
-        },
-        content: r,
-        actions: { ...a, paddingBottom: s.customPadding },
-        backButton: { top: s.customPadding, paddingLeft: s.customPadding }
-      };
-    }), y = d(() => s.withColumnLayout && U.value === R.LARGE), B = d(() => s.columnsSize === D.SMALLER ? [
-      { small: 4, medium: 4, large: 4 },
-      { small: 8, medium: 8, large: 8 }
-    ] : s.columnsSize === D.BIGGER ? [
-      { small: 8, medium: 8, large: 8 },
-      { small: 4, medium: 4, large: 4 }
-    ] : [
-      { small: 6, medium: 6, large: 6 },
-      { small: 6, medium: 6, large: 6 }
-    ]), { activePage: b, height: n, isAnimationActive: S, pageCustomPadding: C, showCloseButton: z, size: U } = ce(se), K = d(() => b.value === s.pageId || !b.value);
-    let L = null;
-    return Y(
-      () => b.value,
-      async (a, r) => {
-        var m, v;
-        K.value && (await re(), n.value = `${(v = (m = f.value) == null ? void 0 : m.$el) == null ? void 0 : v.clientHeight}px`, C.value = s.customPadding, S.value = r !== void 0, L = Be(f.value, () => {
-          var T, E;
-          const k = `${(E = (T = f.value) == null ? void 0 : T.$el) == null ? void 0 : E.clientHeight}px`;
-          k && k !== n.value && (n.value = k);
-        }));
-      },
-      { immediate: !0 }
-    ), me(() => {
-      L == null || L.disconnect();
-    }), (a, r) => {
-      var m;
-      return A(), P(Oe, {
-        ref_key: "page",
-        ref: f,
-        class: J(["b-modal-page", M.value]),
-        "page-id": a.pageId,
-        "always-show-border": y.value,
-        "back-button-styling": (m = i.value) == null ? void 0 : m.backButton,
-        "previous-page": a.previousPage,
-        onAnimationend: r[0] || (r[0] = (v) => S.value = !1)
-      }, te({
-        content: l(() => [
-          h("div", {
-            class: J(["b-modal-page__content", _.value]),
-            style: O(i.value.content)
-          }, [
-            t(u)("content") || t(u)("content-col-1") && t(u)("content-col-2") ? (A(), P(t(x), {
-              key: 0,
-              el: "div"
-            }, {
-              default: l(() => [
-                y.value ? (A(), P(t(Te), {
-                  key: 0,
-                  "column-width": B.value,
-                  "container-type": t(Ne).NORMAL,
-                  "no-gap": "",
-                  class: "b-modal-page__grid"
-                }, {
-                  "col-1": l(() => [
-                    c(a.$slots, "content-col-1", {}, void 0, !0)
-                  ]),
-                  "col-2": l(() => [
-                    c(a.$slots, "content-col-2", {}, void 0, !0)
-                  ]),
-                  _: 3
-                }, 8, ["column-width", "container-type"])) : c(a.$slots, "content", { key: 1 }, void 0, !0)
-              ]),
-              _: 3
-            })) : w("", !0)
-          ], 6)
-        ]),
-        _: 2
-      }, [
-        t(u)("default") || t(z) ? {
-          name: "header",
-          fn: l(() => [
-            h("div", {
-              class: "b-modal-page__header-container",
-              style: O(i.value.header)
-            }, [
-              h("div", Fe, [
-                q(t(x), {
-                  class: "b-modal-page__title",
-                  el: "span",
-                  variant: "title",
-                  stronger: ""
-                }, {
-                  default: l(() => [
-                    t(u)("default") ? c(a.$slots, "default", { key: 0 }, void 0, !0) : w("", !0)
-                  ]),
-                  _: 3
-                })
-              ])
-            ], 4)
-          ]),
-          key: "0"
-        } : void 0,
-        t(u)("actions") ? {
-          name: "footer",
-          fn: l(() => [
-            h("div", {
-              class: "b-modal-page__actions-container",
-              style: O(i.value.actions)
-            }, [
-              h("div", Me, [
-                c(a.$slots, "actions", {}, void 0, !0)
-              ])
-            ], 4)
-          ]),
-          key: "1"
-        } : a.actions && a.actions.length > 0 ? {
-          name: "footer",
-          fn: l(() => [
-            h("div", {
-              class: "b-modal-page__actions-container",
-              style: O(i.value.actions)
-            }, [
-              q(t(De), {
-                actions: a.actions,
-                "actions-label": a.actionsLabel,
-                "destructive-actions": a.destructiveActions
-              }, null, 8, ["actions", "actions-label", "destructive-actions"])
-            ], 4)
-          ]),
-          key: "2"
-        } : void 0
-      ]), 1032, ["class", "page-id", "always-show-border", "back-button-styling", "previous-page"]);
-    };
-  }
-}), Ke = /* @__PURE__ */ oe(Ue, [["__scopeId", "data-v-1e6a91c3"]]), He = { class: "b-modal-base" }, Ye = ["role", "aria-label", "open"], Je = $({
-  i18n: { messages: ne },
-  name: "base-modal"
-}), qe = /* @__PURE__ */ $({
-  ...Je,
-  props: {
-    /**
-     * List of actions that will be used to render the buttons.
-     * First element in the list will be rendered as "primary".
-     * All elements after the first will be rendered as "secondary".
-     * But you may change the color of 1-st action to red with 'critial' key
-     * Not more than 3 action buttons can be provided
-     * Or 2 action buttons and 1 Label for them
-     *
-     * Each object in the list should have a `title`, an `event` and
-     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
-     *
-     * `title`: Button's text.
-     *
-     * `event`: Event triggered when clicking the Button.
-     *
-     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
-     *
-     * ```
-     * [{
-     *   title: 'Primary',2
-     *   event: () => { ... },
-     *   icon: FourPeopleIcon
-     * }, {
-     *   title: 'Secondary',
-     *   event: () => { ... }
-     * }]
-     * ```
-     */
-    actions: {
-      type: Array,
-      default: null
-    },
-    /**
-     * The id of the current active page
-     * Should be the same id as the BentoModalPage to be displayed
-     */
-    activePage: {
-      type: String,
-      default: null
-    },
-    /**
-     * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.
-     */
-    columnsSize: {
-      type: String,
-      default: D.SMALLER
-    },
-    /**
-     * If provided, manages the padding of the whole modal container
-     */
-    customPadding: { type: String, default: null },
-    /**
-     * If passed - sets first button color to red
-     */
-    destructiveActions: { type: Boolean, default: !1 },
-    /**
-     * Hides a cross icon on the right side of the title
-     */
-    hideCloseButton: { type: Boolean, required: !0 },
-    /**
-     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
-     */
-    initiallyOpen: { type: Boolean, default: !1 },
-    /**
-     * If set to true, it allows the modal to be closed by clicking outside of it
-     */
-    isDismissible: { type: Boolean, required: !0 },
-    /**
-     * Controls the modal's state from the outside. Set it to true to open the modal
-     */
-    isOpen: { type: Boolean, required: !0 },
-    /**
-     * Defines whether the modal will be an alert modal
-     */
-    modalRole: { type: String, default: W.DIALOG },
-    /**
-     * Sets the width of the modal
-     */
-    size: {
-      type: String,
-      default: R.SMALL
-    },
-    /**
-     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
-     */
-    withColumnLayout: { type: Boolean, default: !1 }
-  },
-  emits: ["update:active-page", "close-modal"],
-  setup(e, { expose: j, emit: F }) {
-    const { t: f } = he({ messages: ne }), s = ee(), M = ge(), _ = ae(s), i = g(null), y = g(!1), B = Ce("modal"), b = F, n = e, S = d(() => n.isDismissible && !n.hideCloseButton), C = g(n.customPadding), z = d(() => C.value ? { top: C.value, right: C.value } : {}), U = d(() => M["aria-label"] ?? f("ariaLabelFallback")), K = d(() => n.withColumnLayout && n.size === R.LARGE), L = () => {
-      i.value.showModal();
-    }, a = () => {
-      b("close-modal");
-    }, r = () => {
-      y.value && i.value && (i.value.close(), I.value[0] && b("update:active-page", I.value[0]), I.value = [], y.value = !1, a());
-    }, m = () => {
-      i.value.open && (y.value = !0);
-    }, v = (o) => {
-      o && o.preventDefault(), !(!n.isDismissible && n.modalRole === W.DIALOG) && m();
-    }, k = () => {
-      n.isDismissible && v();
-    }, T = d(() => ({
-      [`b-modal-base__container--${n.size}`]: n.size,
-      "b-modal-base__container--hide": y.value,
-      "b-modal-base__container--column-layout": K.value,
-      "b-modal-base__container--animation": Z.value
-    }));
-    Y(
-      () => [n.isOpen, i.value],
-      ([o, p], [, H]) => {
-        if (!p)
-          return;
-        o ? (L(), I.value.length || I.value.push(E.value)) : !H || m();
-      }
-    ), Y(
-      () => n.actions,
-      () => {
-        var o, p;
-        ((p = (o = n.actions) == null ? void 0 : o[0]) == null ? void 0 : p.state) === "success" && setTimeout(m, 500);
-      },
-      { deep: !0 }
-    ), ve(() => {
-      n.isOpen && i.value && L();
-    }), j({
-      internalModalActionClose: v
-    }), G(Ae, B);
-    const { activePage: E, isOpen: Q, size: V } = pe(n), le = g(Pe.TRANSITION_LEVEL_DEEPER), N = g([]), I = g([]), ie = (o) => b("update:active-page", o), ue = (o) => () => {
-      var p;
-      N.value = (p = N.value) == null ? void 0 : p.filter((H) => H !== o);
-    }, de = (o) => (o && N.value.push(o), { unregisterPage: ue(o) }), X = g(""), Z = g(!1);
-    return G(se, {
-      activePage: E,
-      height: X,
-      isAnimationActive: Z,
-      pageCustomPadding: C,
-      showCloseButton: S,
-      size: V
-    }), G(Se, {
-      activePage: E,
-      animation: le,
-      isOpen: Q,
-      pages: N,
-      previousPages: I,
-      updatePage: ie
-    }), G(ke, de), (o, p) => (A(), fe("div", He, [
-      h("dialog", {
-        ref_key: "modal",
-        ref: i,
-        role: e.modalRole,
-        "aria-label": U.value,
-        style: O({ height: X.value }),
-        class: J(["b-modal-base__container", T.value]),
-        open: e.initiallyOpen,
-        onAnimationend: r,
-        onKeydown: _e(v, ["esc"])
-      }, [
-        t(Q) || e.initiallyOpen ? ye((A(), P(t(Le), {
-          key: 0,
-          id: t(B)
-        }, {
-          default: l(() => [
-            S.value ? (A(), P(t(be), {
-              key: 0,
-              class: "b-modal-base__close-button",
-              variant: "tertiary",
-              type: "button",
-              style: O(z.value),
-              onClick: v
-            }, {
-              default: l(() => [
-                q(t(Ie), {
-                  "svg-title": t(f)("close")
-                }, null, 8, ["svg-title"])
-              ]),
-              _: 1
-            }, 8, ["style"])) : w("", !0),
-            n.activePage ? c(o.$slots, "default", { key: 1 }, void 0, !0) : (A(), P(t(Ke), {
-              key: 2,
-              "with-column-layout": e.withColumnLayout,
-              size: t(V),
-              "custom-padding": e.customPadding,
-              "columns-size": e.columnsSize
-            }, te({ _: 2 }, [
-              t(_)("default") ? {
-                name: "default",
-                fn: l(() => [
-                  c(o.$slots, "default", {}, void 0, !0)
-                ]),
-                key: "0"
-              } : void 0,
-              t(_)("content-col-1") ? {
-                name: "content-col-1",
-                fn: l(() => [
-                  c(o.$slots, "content-col-1", {}, void 0, !0)
-                ]),
-                key: "1"
-              } : void 0,
-              t(_)("content-col-2") ? {
-                name: "content-col-2",
-                fn: l(() => [
-                  c(o.$slots, "content-col-2", {}, void 0, !0)
-                ]),
-                key: "2"
-              } : void 0,
-              t(_)("content") ? {
-                name: "content",
-                fn: l(() => [
-                  c(o.$slots, "content", {}, void 0, !0)
-                ]),
-                key: "3"
-              } : void 0,
-              t(_)("actions") ? {
-                name: "actions",
-                fn: l(() => [
-                  c(o.$slots, "actions", {}, void 0, !0)
-                ]),
-                key: "4"
-              } : void 0
-            ]), 1032, ["with-column-layout", "size", "custom-padding", "columns-size"]))
-          ]),
-          _: 3
-        }, 8, ["id"])), [
-          [t(Ee), k]
-        ]) : w("", !0)
-      ], 46, Ye)
-    ]));
-  }
-}), dt = /* @__PURE__ */ oe(qe, [["__scopeId", "data-v-8f2a75a1"]]);
-export {
-  D as B,
-  Re as a,
-  $e as b,
-  Ke as c,
-  W as d,
-  R as e,
-  Ge as f,
-  we as g,
-  dt as h
-};
-//# sourceMappingURL=base-modal.gZAtk-xP.js.map

package/dist/chunks/button-actions-with-menu.Tba1ME79.js

@@ -1,93 +0,0 @@
-import { ref as v, watch as h, nextTick as m, defineComponent as w, toRef as b, computed as p, provide as A, openBlock as y, createElementBlock as B, createElementVNode as N, normalizeClass as k, createVNode as E, unref as T, createBlock as C, createCommentVNode as I } from "vue";
-import { M as W, d as M, B as R, f as g } from "./button-actions.BYBpjNqy.js";
-import { u as O } from "./index.Dppy4qHk.js";
-import { _ as L } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/button-actions-with-menu.css";
-const S = (f) => {
-  const { breakpoint: e, container: u, defaultActionsCount: i, offset: o } = f, { width: l } = O(), s = v(i.value), r = 150, c = async () => {
-    var t;
-    await m();
-    const a = u.value.clientWidth, n = r * s.value + (((t = o == null ? void 0 : o.value) == null ? void 0 : t.offsetWidth) ?? 0) + r;
-    a >= n && s.value < i.value && (s.value += 1, await c());
-  }, d = async () => {
-    var t;
-    await m();
-    const a = u.value.clientWidth, n = r * s.value + (((t = o == null ? void 0 : o.value) == null ? void 0 : t.offsetWidth) ?? 0);
-    a < n && s.value > 0 && (s.value -= 1, await d());
-  };
-  return h([l, u], async ([a, n], [t]) => {
-    if (!n || !i || a > e)
-      return;
-    await m(), a > t ? await c() : await d();
-  }), h(i, async (a) => {
-    s.value = a, e && l.value <= e && u.value && await d();
-  }), {
-    displayedActionsCount: s
-  };
-}, V = { class: "b-button-actions-with-menu" }, D = {}, P = /* @__PURE__ */ w({
-  ...D,
-  __name: "button-actions-with-menu",
-  props: {
-    actions: {},
-    actionsLayout: { default: "buttons-end" },
-    disableResponsiveBehavior: { type: Boolean, default: !1 },
-    displayedActions: { default: void 0 },
-    inverse: { type: Boolean, default: !1 },
-    hideDisplayedActionsBreakpoint: { default: 0 },
-    menuPosition: { default: "bottom-start" }
-  },
-  setup(f) {
-    const e = f, u = b(e, "inverse"), i = v(null), o = v(null), l = v(!1), s = p(() => {
-      const n = e.hideDisplayedActionsBreakpoint ? c.value : e.displayedActions;
-      return e.actions.slice(0, n);
-    }), r = p(() => {
-      var n;
-      return (n = o == null ? void 0 : o.value) == null ? void 0 : n.$el;
-    }), { displayedActionsCount: c } = S({
-      breakpoint: e.hideDisplayedActionsBreakpoint,
-      container: i,
-      defaultActionsCount: b(e, "displayedActions"),
-      offset: r
-    });
-    A(W, u), e.disableResponsiveBehavior || A(M, { buttonActionsWithMenu: i, menu: o, stackButtons: l });
-    const d = p(() => ({
-      "b-button-actions-with-menu__container-wrapper--buttons-end": e.actionsLayout === "buttons-end",
-      "b-button-actions-with-menu__container-wrapper--buttons-start": e.actionsLayout === "buttons-start",
-      "b-button-actions-with-menu__container-wrapper--stacked-buttons": l.value
-    })), a = p(() => c.value === void 0 || c.value >= e.actions.length ? [] : e.actions.slice(c.value, e.actions.length).flatMap((t) => t.data ? t.data : {
-      text: t.title,
-      handler: () => {
-        var _;
-        return (_ = t.event) == null ? void 0 : _.call(t, {});
-      },
-      icon: t.icon,
-      critical: t.critical,
-      disabled: t.disabled
-    }));
-    return (n, t) => (y(), B("div", V, [
-      N("div", {
-        ref_key: "buttonActionsWithMenu",
-        ref: i,
-        role: "group",
-        class: k(["b-button-actions-with-menu__container-wrapper", d.value])
-      }, [
-        E(T(R), {
-          actions: s.value,
-          inverse: n.inverse,
-          layout: n.actionsLayout
-        }, null, 8, ["actions", "inverse", "layout"]),
-        a.value.length ? (y(), C(g, {
-          key: 0,
-          ref_key: "menu",
-          ref: o,
-          data: a.value,
-          "menu-position": n.menuPosition
-        }, null, 8, ["data", "menu-position"])) : I("", !0)
-      ], 2)
-    ]));
-  }
-}), J = /* @__PURE__ */ L(P, [["__scopeId", "data-v-803aebe6"]]);
-export {
-  J as B
-};
-//# sourceMappingURL=button-actions-with-menu.Tba1ME79.js.map