@adyen/bento-vue3 1.9.0 → 1.11.0

package/dist/chunks/index.cf561336.js

@@ -0,0 +1,622 @@
+import { openBlock as c, createElementBlock as L, mergeProps as q, toDisplayString as P, createCommentVNode as E, createElementVNode as R, defineComponent as N, computed as k, resolveComponent as _, createBlock as B, normalizeClass as U, createSlots as j, withCtx as h, createVNode as S, createTextVNode as D, resolveDynamicComponent as se, renderSlot as T, ref as f, onMounted as ie, Transition as ue, withKeys as C, withModifiers as K, Fragment as Z, renderList as z, normalizeStyle as J, inject as ae, provide as le, resolveDirective as re, withDirectives as de } from "vue";
+import { _ as O } from "./_plugin-vue_export-helper.dad06003.js";
+import { g as F } from "./unique-id.a2a2b458.js";
+import { B as ce } from "./directive.0408e565.js";
+import { a as me } from "./button.623a46d2.js";
+import { a as pe, B as V } from "./index.03605cb0.js";
+import { B as Y, D as fe } from "./index.113137fb.js";
+import { u as ve } from "./use-has-slot.4d98bf29.js";
+import { a as _e, C as H } from "./chevron-left.4ee92950.js";
+import { B as be, a as W } from "./base-button.39fae75f.js";
+import { B as ye } from "./index.09f7f1b5.js";
+import "../assets/index27.css";
+let A = 0;
+const Ce = {
+  beforeCreate() {
+    this.uuid = A.toString(), A += 1;
+  }
+}, he = { key: 0 }, ge = /* @__PURE__ */ R("path", {
+  fill: "#00112C",
+  d: "M8 4C8.29667 4 8.58668 3.91203 8.83335 3.74721C9.08003 3.58238 9.27229 3.34811 9.38582 3.07403C9.49935 2.79994 9.52906 2.49834 9.47118 2.20737C9.4133 1.91639 9.27044 1.64912 9.06066 1.43934C8.85088 1.22956 8.58361 1.0867 8.29264 1.02882C8.00167 0.970945 7.70006 1.00065 7.42598 1.11418C7.15189 1.22771 6.91762 1.41997 6.7528 1.66665C6.58797 1.91332 6.5 2.20333 6.5 2.5C6.5 2.89783 6.65803 3.27936 6.93934 3.56066C7.22064 3.84197 7.60218 4 8 4Z"
+}, null, -1), Ie = /* @__PURE__ */ R("path", {
+  fill: "#00112C",
+  d: "M8 15C8.29667 15 8.58668 14.912 8.83335 14.7472C9.08003 14.5824 9.27229 14.3481 9.38582 14.074C9.49935 13.7999 9.52906 13.4983 9.47118 13.2074C9.4133 12.9164 9.27044 12.6491 9.06066 12.4393C8.85088 12.2296 8.58361 12.0867 8.29264 12.0288C8.00167 11.9709 7.70006 12.0007 7.42598 12.1142C7.15189 12.2277 6.91762 12.42 6.7528 12.6666C6.58797 12.9133 6.5 13.2033 6.5 13.5C6.5 13.8978 6.65803 14.2794 6.93934 14.5607C7.22064 14.842 7.60218 15 8 15Z"
+}, null, -1), $e = /* @__PURE__ */ R("path", {
+  fill: "#00112C",
+  d: "M8.83335 9.24721C8.58668 9.41203 8.29667 9.5 8 9.5C7.60218 9.5 7.22064 9.34197 6.93934 9.06066C6.65803 8.77936 6.5 8.39783 6.5 8C6.5 7.70333 6.58797 7.41332 6.7528 7.16665C6.91762 6.91997 7.15189 6.72771 7.42598 6.61418C7.70006 6.50065 8.00167 6.47094 8.29264 6.52882C8.58361 6.5867 8.85088 6.72956 9.06066 6.93934C9.27044 7.14912 9.4133 7.41639 9.47118 7.70737C9.52906 7.99834 9.49935 8.29994 9.38582 8.57403C9.27229 8.84811 9.08003 9.08238 8.83335 9.24721Z"
+}, null, -1);
+function Be(e, n, v, u, r, l) {
+  return c(), L("svg", q({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    e.$attrs["svg-title"] ? (c(), L("title", he, P(e.$attrs["svg-title"]), 1)) : E("", !0),
+    ge,
+    Ie,
+    $e
+  ], 16);
+}
+const Me = /* @__PURE__ */ O(Ce, [["render", Be]]), ke = N({
+  name: "menu-item",
+  components: { BaseButton: be, BentoTypography: ye, ChevronRightIcon: _e },
+  props: {
+    /**
+     * menu-item text that gets displayed as the main label
+     */
+    text: {
+      type: String,
+      required: !0
+    },
+    /**
+     * menu-item action that gets executed when the MeniItem is clicked
+     */
+    handler: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * menu-item text that gets displayed as the secondary label
+     */
+    secondaryText: {
+      type: String,
+      default: null
+    },
+    /**
+     * Optional chevron icon displayed to the right of the menu-item
+     */
+    chevron: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Optional icon displayed to the left of the menu-item
+     */
+    icon: {
+      // Types for Vue2 (Object) and Vue3 (Function)
+      // TODO: Remove Object when fully migrated to Vue3
+      type: [Object, Function],
+      default: null
+    },
+    /**
+     * Disables menu-item button functionality
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays an indent variant od the menu-item
+     */
+    indent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays menu-item button as critical
+     */
+    critical: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Renders the text in a bold variant
+     */
+    isTitle: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [W.CLICK],
+  setup(e, { emit: n }) {
+    return {
+      // Values
+      conditionalClasses: k(() => ({
+        "b-menu-item--critical": e.critical,
+        "b-menu-item--indent": e.indent
+      })),
+      // Methods
+      onClick: (r) => {
+        r.stopPropagation(), e.handler(), n(W.CLICK);
+      }
+    };
+  }
+});
+function Se(e, n, v, u, r, l) {
+  const a = _("bento-typography"), i = _("chevron-right-icon"), d = _("base-button");
+  return c(), B(d, {
+    class: U(["b-menu-item", e.conditionalClasses]),
+    role: "menuitem",
+    disabled: e.disabled,
+    tabindex: "-1",
+    onClick: e.onClick
+  }, j({
+    default: h(() => [
+      S(a, {
+        el: "span",
+        variant: "body",
+        stronger: e.isTitle,
+        class: "b-menu-item__primary-text"
+      }, {
+        default: h(() => [
+          D(P(e.text), 1)
+        ]),
+        _: 1
+      }, 8, ["stronger"]),
+      e.secondaryText ? (c(), B(a, {
+        key: 0,
+        el: "span",
+        variant: "body",
+        class: "b-menu-item__secondary-text"
+      }, {
+        default: h(() => [
+          D(P(e.secondaryText), 1)
+        ]),
+        _: 1
+      })) : E("", !0)
+    ]),
+    _: 2
+  }, [
+    e.icon ? {
+      name: "iconLeft",
+      fn: h(() => [
+        (c(), B(se(e.icon), {
+          class: "b-menu-item__icon-left",
+          "aria-hidden": "true"
+        }))
+      ]),
+      key: "0"
+    } : void 0,
+    e.chevron ? {
+      name: "iconRight",
+      fn: h(() => [
+        S(i, { "aria-hidden": "true" })
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1032, ["class", "disabled", "onClick"]);
+}
+const G = /* @__PURE__ */ O(ke, [["render", Se], ["__scopeId", "data-v-9e8afd9c"]]);
+var g = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(g || {});
+const Le = N({
+  name: "bento-menu-list-container"
+});
+const we = { class: "b-menu-list-container" };
+function Ee(e, n, v, u, r, l) {
+  return c(), L("div", we, [
+    T(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const Q = /* @__PURE__ */ O(Le, [["render", Ee], ["__scopeId", "data-v-ea0113ba"]]), X = {
+  "en-US": {
+    menuButton: "Open menu",
+    backButton: "Go back"
+  }
+}, Oe = N({
+  i18n: { messages: X },
+  name: "sub-menu-item-list",
+  components: { BentoDivider: Y, MenuItem: G, MenuListContainer: Q },
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: [g.CLOSE, g.BACK],
+  setup(e, { emit: n }) {
+    const v = f(null), u = f(0), r = f(e.items.length), l = () => n(g.CLOSE), a = () => n(g.BACK), i = k(() => {
+      var p;
+      const s = (p = e.items) == null ? void 0 : p.map((b) => ({
+        ...b,
+        indent: !b.icon,
+        isTitle: !1,
+        clickHandler: l
+      }));
+      return [
+        {
+          text: e.title,
+          secondaryText: null,
+          critical: !1,
+          icon: H,
+          isTitle: !0,
+          disabled: !1,
+          indent: !1,
+          handler: a,
+          clickHandler: a,
+          addDivider: !0
+        },
+        ...s
+      ];
+    }), d = async () => {
+      var s, p, b, $, I;
+      (I = ($ = (b = (p = (s = v.value) == null ? void 0 : s.children) == null ? void 0 : p[u.value]) == null ? void 0 : b.children) == null ? void 0 : $[0]) == null || I.focus();
+    };
+    ie(async () => {
+      setTimeout(() => d(), 150);
+    });
+    const o = () => {
+      u.value > 0 ? (u.value -= 1, i.value[u.value].disabled && o()) : u.value = r.value, d();
+    }, t = () => {
+      u.value < r.value ? (u.value += 1, i.value[u.value].disabled && t()) : u.value = 0, d();
+    };
+    return {
+      // Enums
+      BentoMenuEvent: g,
+      // Values
+      subMenuItemListRefLocal: v,
+      subMenuFocusedIndex: u,
+      ChevronLeftIcon: H,
+      computedItems: i,
+      // Methods
+      closeMenu: l,
+      onBackButton: a,
+      focusPrevious: o,
+      focusNext: t
+    };
+  }
+});
+function Re(e, n, v, u, r, l) {
+  const a = _("menu-item"), i = _("bento-divider"), d = _("menu-list-container");
+  return c(), B(ue, {
+    name: "b-sub-menu-item-list__transition",
+    appear: ""
+  }, {
+    default: h(() => [
+      S(d, { class: "b-sub-menu-item-list" }, {
+        default: h(() => [
+          R("ul", {
+            ref: "subMenuItemListRefLocal",
+            role: "menu",
+            class: "b-sub-menu-item-list__list",
+            onKeydown: [
+              n[0] || (n[0] = C(K((...o) => e.focusNext && e.focusNext(...o), ["stop"]), ["down"])),
+              n[1] || (n[1] = C(K((...o) => e.focusPrevious && e.focusPrevious(...o), ["stop"]), ["up"])),
+              n[2] || (n[2] = C(K((...o) => e.onBackButton && e.onBackButton(...o), ["stop"]), ["esc"]))
+            ]
+          }, [
+            (c(!0), L(Z, null, z(e.computedItems, (o, t) => (c(), L("li", {
+              key: `sub-menu-item-list-item-${t}`,
+              role: "none"
+            }, [
+              S(a, {
+                text: o.text,
+                handler: o.handler,
+                "secondary-text": o.secondaryText,
+                icon: o.icon,
+                "is-title": o.isTitle,
+                disabled: o.disabled,
+                critical: o.critical,
+                indent: o.indent,
+                tabindex: t === e.subMenuFocusedIndex ? "0" : "-1",
+                onClick: o.clickHandler
+              }, null, 8, ["text", "handler", "secondary-text", "icon", "is-title", "disabled", "critical", "indent", "tabindex", "onClick"]),
+              o.addDivider ? (c(), B(i, {
+                key: 0,
+                class: "b-sub-menu-item-list__divider"
+              })) : E("", !0)
+            ]))), 128))
+          ], 544)
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const Ne = /* @__PURE__ */ O(Oe, [["render", Re], ["__scopeId", "data-v-621db243"]]), Te = N({
+  name: "menu-item-list",
+  components: { BentoDivider: Y, MenuItem: G, MenuListContainer: Q, SubMenuItemList: Ne },
+  props: {
+    /**
+     * The data to be displayed in the list
+     */
+    data: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Displays the menu-items of the list in the indent variant. Only applies to elements that don't have an icon to their left.
+     */
+    indentItems: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If set to true, focuses the last item on the list instead of the first. Used for accessibility purposes when the menu is opened with the 'up' arrow key.
+     */
+    focusLastElement: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [g.CLOSE],
+  setup(e, { emit: n }) {
+    const v = f(null), u = f(null), r = f(null), l = f(!1), a = f(null), i = f(e.focusLastElement ? e.data.length - 1 : 0), d = f(0), o = f(e.data.length - 1), t = k(() => e.data.some((m) => m.icon)), s = k(() => e.indentItems || t.value ? e.data.map((m) => {
+      let y = !1;
+      return m.icon || (y = !0), {
+        ...m,
+        // eslint-disable-next-line no-param-reassign
+        indent: y
+      };
+    }) : e.data), p = () => {
+      var m, y, M;
+      return (M = (y = (m = v.value) == null ? void 0 : m.children[i.value]) == null ? void 0 : y.children[0]) == null ? void 0 : M.focus();
+    }, b = () => n(g.CLOSE), $ = async (m, y) => {
+      m.items ? (a.value = y, l.value = !0) : (a.value = y, l.value = !1, b());
+    }, I = () => {
+      i.value > 0 ? (i.value -= 1, s.value[i.value].disabled && I()) : i.value = o.value, p();
+    }, w = () => {
+      i.value < o.value ? (i.value += 1, s.value[i.value].disabled && w()) : i.value = 0, p();
+    }, x = (m, y) => {
+      var M;
+      (M = m == null ? void 0 : m.items) != null && M.length && (a.value = y, l.value = !0);
+    }, ee = () => {
+      a.value && l.value && (a.value = null, l.value = !1);
+    }, ne = () => {
+      l.value = !1, a.value = null, p();
+    }, te = k(() => {
+      var m, y, M;
+      return (M = (y = (m = r.value) == null ? void 0 : m[0]) == null ? void 0 : y.$el) == null ? void 0 : M.offsetHeight;
+    }), oe = k(() => l.value ? `${te.value}px` : "");
+    return {
+      // Values
+      menuItemListRef: v,
+      menuItemListWrapperRef: u,
+      subMenuItemListRef: r,
+      computedData: s,
+      computedHeight: oe,
+      focusedIndex: i,
+      subMenuFocusedIndex: d,
+      showSubMenu: l,
+      visibleSubMenuIndex: a,
+      // Methods
+      toggleMenu: $,
+      closeMenu: b,
+      focusPrevious: I,
+      focusNext: w,
+      focusRight: x,
+      focusLeft: ee,
+      onBackButton: ne
+    };
+  }
+});
+const Ke = ["onKeydown"];
+function Pe(e, n, v, u, r, l) {
+  const a = _("menu-item"), i = _("bento-divider"), d = _("sub-menu-item-list"), o = _("menu-list-container");
+  return c(), B(o, {
+    ref: "menuItemListWrapperRef",
+    style: J({ height: e.computedHeight })
+  }, {
+    default: h(() => [
+      R("ul", {
+        ref: "menuItemListRef",
+        class: "b-menu-item-list",
+        role: "menu",
+        onKeydown: [
+          n[1] || (n[1] = C((...t) => e.focusNext && e.focusNext(...t), ["down"])),
+          n[2] || (n[2] = C((...t) => e.focusPrevious && e.focusPrevious(...t), ["up"])),
+          n[3] || (n[3] = C((...t) => e.closeMenu && e.closeMenu(...t), ["esc"])),
+          n[4] || (n[4] = C((...t) => e.closeMenu && e.closeMenu(...t), ["tab"]))
+        ]
+      }, [
+        (c(!0), L(Z, null, z(e.computedData, (t, s) => {
+          var p, b, $, I;
+          return c(), L("li", {
+            key: `menu-item-${s}`,
+            class: "b-menu-item-list__item",
+            role: "none",
+            onKeydown: [
+              C((w) => e.focusRight(t, s), ["right"]),
+              n[0] || (n[0] = C((w) => e.focusLeft(), ["left"]))
+            ]
+          }, [
+            S(a, {
+              text: t.text,
+              handler: (p = t.items) != null && p.length ? () => null : t.handler,
+              "secondary-text": t.secondaryText,
+              icon: t.icon,
+              chevron: !!((b = t.items) != null && b.length),
+              disabled: t.disabled,
+              critical: t.critical,
+              indent: t.indent,
+              tabindex: s === e.subMenuFocusedIndex ? "0" : "-1",
+              "aria-haspopup": !!(($ = t.items) != null && $.length),
+              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === s,
+              onClick: (w) => e.toggleMenu(t, s)
+            }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
+            t.addDivider ? (c(), B(i, {
+              key: 0,
+              class: "b-menu-item-list__divider"
+            })) : E("", !0),
+            (I = t.items) != null && I.length && e.showSubMenu && e.visibleSubMenuIndex === s ? (c(), B(d, {
+              key: 1,
+              ref_for: !0,
+              ref: "subMenuItemListRef",
+              items: t.items,
+              title: t.text,
+              onBack: e.onBackButton,
+              onClose: e.closeMenu
+            }, null, 8, ["items", "title", "onBack", "onClose"])) : E("", !0)
+          ], 40, Ke);
+        }), 128))
+      ], 544)
+    ]),
+    _: 1
+  }, 8, ["style"]);
+}
+const De = /* @__PURE__ */ O(Te, [["render", Pe], ["__scopeId", "data-v-f1d94ee8"]]), Fe = Symbol("menu inverse style injection key"), Ve = N({
+  i18n: { messages: X },
+  name: "bento-menu",
+  components: { BentoButton: me, BentoPopover: pe, MenuItemList: De, OptionsVerticalIcon: Me },
+  directives: { BentoClickOutsideDirective: ce },
+  props: {
+    /**
+     * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.
+     */
+    button: {
+      type: Object,
+      default: () => ({
+        variant: "secondary"
+      })
+    },
+    /**
+     * The data to be displayed in the list
+     */
+    data: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * The position of where the menu should open.
+     */
+    menuPosition: {
+      type: String,
+      default: V.BOTTOM_START,
+      validator: (e) => Object.values(V).includes(e)
+    },
+    /**
+     * Instructs the menu popover to be visible outside of the containing container.
+     * @see {@link https://floating-ui.com/docs/usefloating#strategy}
+     */
+    menuFixedPositioning: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets a custom width for the menu popover.
+     */
+    menuWidth: {
+      type: Number,
+      default: null
+    }
+  },
+  emits: [g.CLOSE, g.OPEN],
+  setup(e, { emit: n, slots: v }) {
+    const u = f(null), r = f(!1), l = f(!1), a = F("menu"), i = F("menu-popover"), d = ae(Fe, f(!1));
+    le(fe, d);
+    const o = k(() => ({
+      "b-menu--inverse": d.value
+    })), t = k(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), s = () => {
+      r.value = !0, n(g.OPEN);
+    }, p = () => {
+      r.value && (r.value = !1, u.value.$el.focus(), n(g.CLOSE));
+    }, b = (w) => {
+      w.stopPropagation(), r.value ? p() : s();
+    }, $ = () => {
+      l.value = !1, s();
+    }, I = () => {
+      l.value = !0, s();
+    };
+    return {
+      // Values
+      menuButtonRef: u,
+      menuId: a,
+      popoverId: i,
+      showMenu: r,
+      computedMenuWidth: t,
+      isLastElementFocused: l,
+      // Classes
+      computedClasses: o,
+      isInverseColorSet: d,
+      // Methods
+      hasSlot: ve(v),
+      onKeyDown: $,
+      onKeyUp: I,
+      closeMenu: p,
+      toggleShowMenu: b
+    };
+  }
+});
+function He(e, n, v, u, r, l) {
+  const a = _("options-vertical-icon"), i = _("bento-button"), d = _("menu-item-list"), o = _("bento-popover"), t = re("bento-click-outside-directive");
+  return de((c(), L("div", {
+    class: U([e.computedClasses, "b-menu"]),
+    onKeydown: [
+      n[0] || (n[0] = C((...s) => e.onKeyDown && e.onKeyDown(...s), ["down"])),
+      n[1] || (n[1] = C((...s) => e.onKeyUp && e.onKeyUp(...s), ["up"])),
+      n[2] || (n[2] = C((...s) => e.closeMenu && e.closeMenu(...s), ["esc"]))
+    ]
+  }, [
+    S(i, q({
+      ref: "menuButtonRef",
+      "aria-haspopup": "true"
+    }, e.button, {
+      "aria-expanded": `${e.showMenu}`,
+      "aria-controls": e.showMenu ? e.menuId : null,
+      inverse: e.isInverseColorSet,
+      onClick: e.toggleShowMenu
+    }), j({ _: 2 }, [
+      !e.hasSlot("default") || e.hasSlot("iconLeft") ? {
+        name: "iconLeft",
+        fn: h(() => [
+          T(e.$slots, "iconLeft", {}, () => [
+            S(a, {
+              title: e.$t("menuButton")
+            }, null, 8, ["title"])
+          ], !0)
+        ]),
+        key: "0"
+      } : void 0,
+      e.hasSlot("default") ? {
+        name: "default",
+        fn: h(() => [
+          T(e.$slots, "default", {}, void 0, !0)
+        ]),
+        key: "1"
+      } : void 0,
+      e.hasSlot("iconRight") ? {
+        name: "iconRight",
+        fn: h(() => [
+          T(e.$slots, "iconRight", {}, void 0, !0)
+        ]),
+        key: "2"
+      } : void 0
+    ]), 1040, ["aria-expanded", "aria-controls", "inverse", "onClick"]),
+    e.menuButtonRef ? (c(), B(o, {
+      key: 0,
+      id: e.menuId,
+      open: e.showMenu,
+      class: "b-menu__popover",
+      style: J(e.computedMenuWidth),
+      "target-element": e.menuButtonRef,
+      position: e.menuPosition,
+      "fixed-positioning": e.menuFixedPositioning,
+      "fallback-position": [
+        "bottom-start",
+        "bottom-end",
+        "top-start",
+        "top-end",
+        "right-start",
+        "right-end",
+        "left-start",
+        "left-end"
+      ],
+      "without-space": ""
+    }, {
+      default: h(() => [
+        S(d, {
+          data: e.data,
+          "focus-last-element": e.isLastElementFocused,
+          onClose: e.closeMenu
+        }, null, 8, ["data", "focus-last-element", "onClose"])
+      ]),
+      _: 1
+    }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning"])) : E("", !0)
+  ], 34)), [
+    [t, e.closeMenu]
+  ]);
+}
+const Xe = /* @__PURE__ */ O(Ve, [["render", He], ["__scopeId", "data-v-d1b63c73"]]);
+export {
+  Xe as B,
+  Fe as M,
+  Me as O,
+  g as a
+};
+//# sourceMappingURL=index.cf561336.js.map