@adyen/bento-vue3 1.6.1 → 1.7.0

package/dist/menu.js

@@ -1,595 +1,6 @@
-import { openBlock as m, createElementBlock as k, mergeProps as V, toDisplayString as E, createCommentVNode as P, pushScopeId as se, popScopeId as le, createElementVNode as O, defineComponent as K, computed as B, resolveComponent as h, createBlock as L, normalizeClass as W, createSlots as ie, withCtx as g, createVNode as I, createTextVNode as D, resolveDynamicComponent as ue, renderSlot as j, ref as f, onMounted as ae, Transition as re, withKeys as y, withModifiers as T, Fragment as Z, renderList as z, normalizeStyle as G, resolveDirective as ce, withDirectives as de } from "vue";
-import { _ as S } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { g as F } from "./chunks/unique-id.a2a2b458.js";
-import { B as me } from "./chunks/directive.0408e565.js";
-import { a as pe } from "./chunks/button.975d0bb8.js";
-import { BentoPopover as fe, BentoPopoverPositions as H } from "./popover.js";
-import { a as ve, C as A } from "./chunks/chevron-right.aef416c6.js";
-import { B as _e, a as q } from "./chunks/base-button.4b5ab17e.js";
-import { B as be } from "./chunks/index.7f24db66.js";
-import "./assets/index36.css";
-let U = 0;
-const ye = {
-  beforeCreate() {
-    this.uuid = U.toString(), U += 1;
-  }
-}, N = (e) => (se("data-v-c663a42e"), e = e(), le(), e), Ce = { key: 0 }, he = /* @__PURE__ */ N(() => /* @__PURE__ */ O("path", {
-  fill: "#00112C",
-  "fill-rule": "evenodd",
-  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.00166 0.970945 7.70006 1.00065 7.42597 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.65804 3.27936 6.93934 3.56066C7.22064 3.84197 7.60218 4 8 4Z",
-  "clip-rule": "evenodd"
-}, null, -1)), ge = /* @__PURE__ */ N(() => /* @__PURE__ */ O("path", {
-  fill: "#00112C",
-  "fill-rule": "evenodd",
-  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.00166 11.9709 7.70006 12.0007 7.42597 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.65804 14.2794 6.93934 14.5607C7.22064 14.842 7.60218 15 8 15Z",
-  "clip-rule": "evenodd"
-}, null, -1)), $e = /* @__PURE__ */ N(() => /* @__PURE__ */ O("path", {
-  fill: "#00112C",
-  "fill-rule": "evenodd",
-  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.65804 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.42597 6.61418C7.70006 6.50065 8.00166 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",
-  "clip-rule": "evenodd"
-}, null, -1));
-function Me(e, n, d, s, u, a) {
-  return m(), k("svg", V({ role: "img" }, e.$attrs, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    e.$attrs["svg-title"] ? (m(), k("title", Ce, E(e.$attrs["svg-title"]), 1)) : P("", !0),
-    he,
-    ge,
-    $e
-  ], 16);
-}
-const Be = /* @__PURE__ */ S(ye, [["render", Me], ["__scopeId", "data-v-c663a42e"]]), Ie = K({
-  name: "menu-item",
-  components: { BaseButton: _e, BentoTypography: be, ChevronRightIcon: ve },
-  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: [q.CLICK],
-  setup(e, { emit: n }) {
-    return {
-      // Values
-      conditionalClasses: B(() => ({
-        "b-menu-item--critical": e.critical,
-        "b-menu-item--indent": e.indent
-      })),
-      // Methods
-      onClick: (u) => {
-        u.stopPropagation(), e.handler(), n(q.CLICK);
-      }
-    };
-  }
-});
-function ke(e, n, d, s, u, a) {
-  const i = h("bento-typography"), l = h("chevron-right-icon"), o = h("base-button");
-  return m(), L(o, {
-    class: W(["b-menu-item", e.conditionalClasses]),
-    role: "menuitem",
-    disabled: e.disabled,
-    tabindex: "-1",
-    onClick: e.onClick
-  }, ie({
-    default: g(() => [
-      I(i, {
-        el: "span",
-        variant: "body",
-        stronger: e.isTitle,
-        class: "b-menu-item__primary-text"
-      }, {
-        default: g(() => [
-          D(E(e.text), 1)
-        ]),
-        _: 1
-      }, 8, ["stronger"]),
-      e.secondaryText ? (m(), L(i, {
-        key: 0,
-        el: "span",
-        variant: "body",
-        class: "b-menu-item__secondary-text"
-      }, {
-        default: g(() => [
-          D(E(e.secondaryText), 1)
-        ]),
-        _: 1
-      })) : P("", !0)
-    ]),
-    _: 2
-  }, [
-    e.icon ? {
-      name: "iconLeft",
-      fn: g(() => [
-        (m(), L(ue(e.icon), {
-          class: "b-menu-item__icon-left",
-          "aria-hidden": "true"
-        }))
-      ]),
-      key: "0"
-    } : void 0,
-    e.chevron ? {
-      name: "iconRight",
-      fn: g(() => [
-        I(l, { "aria-hidden": "true" })
-      ]),
-      key: "1"
-    } : void 0
-  ]), 1032, ["class", "disabled", "onClick"]);
-}
-const J = /* @__PURE__ */ S(Ie, [["render", ke], ["__scopeId", "data-v-9e8afd9c"]]);
-var C = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(C || {});
-const we = K({
-  name: "bento-menu-list-container"
-});
-const Le = { class: "b-menu-list-container" };
-function Se(e, n, d, s, u, a) {
-  return m(), k("div", Le, [
-    j(e.$slots, "default", {}, void 0, !0)
-  ]);
-}
-const Q = /* @__PURE__ */ S(we, [["render", Se], ["__scopeId", "data-v-ea0113ba"]]), X = {
-  "en-US": {
-    menuButton: "Open menu",
-    backButton: "Go back"
-  }
-}, Oe = K({
-  i18n: { messages: X },
-  name: "sub-menu-item-list",
-  components: { MenuItem: J, MenuListContainer: Q },
-  props: {
-    items: {
-      type: Array,
-      required: !0
-    },
-    title: {
-      type: String,
-      required: !0
-    }
-  },
-  emits: [C.CLOSE, C.BACK],
-  setup(e, { emit: n }) {
-    const d = f(null), s = f(0), u = f(e.items.length), a = () => n(C.CLOSE), i = () => n(C.BACK), l = B(() => {
-      var v;
-      const c = (v = e.items) == null ? void 0 : v.map((_) => ({
-        ..._,
-        indent: !_.icon,
-        isTitle: !1,
-        clickHandler: a
-      }));
-      return [
-        {
-          text: e.title,
-          secondaryText: null,
-          critical: !1,
-          icon: A,
-          isTitle: !0,
-          disabled: !1,
-          indent: !1,
-          handler: i,
-          clickHandler: i
-        },
-        ...c
-      ];
-    }), o = async () => {
-      var c, v, _, w, $;
-      ($ = (w = (_ = (v = (c = d.value) == null ? void 0 : c.children) == null ? void 0 : v[s.value]) == null ? void 0 : _.children) == null ? void 0 : w[0]) == null || $.focus();
-    };
-    ae(async () => {
-      setTimeout(() => o(), 150);
-    });
-    const t = () => {
-      s.value > 0 ? (s.value -= 1, l.value[s.value].disabled && t()) : s.value = u.value, o();
-    }, p = () => {
-      s.value < u.value ? (s.value += 1, l.value[s.value].disabled && p()) : s.value = 0, o();
-    };
-    return {
-      // Enums
-      BentoMenuEvent: C,
-      // Values
-      subMenuItemListRefLocal: d,
-      subMenuFocusedIndex: s,
-      ChevronLeftIcon: A,
-      computedItems: l,
-      // Methods
-      closeMenu: a,
-      onBackButton: i,
-      focusPrevious: t,
-      focusNext: p
-    };
-  }
-});
-function Ke(e, n, d, s, u, a) {
-  const i = h("menu-item"), l = h("menu-list-container");
-  return m(), L(re, {
-    name: "b-sub-menu-item-list__transition",
-    appear: ""
-  }, {
-    default: g(() => [
-      I(l, { class: "b-sub-menu-item-list" }, {
-        default: g(() => [
-          O("ul", {
-            ref: "subMenuItemListRefLocal",
-            role: "menu",
-            class: "b-sub-menu-item-list__list",
-            onKeydown: [
-              n[0] || (n[0] = y(T((...o) => e.focusNext && e.focusNext(...o), ["stop"]), ["down"])),
-              n[1] || (n[1] = y(T((...o) => e.focusPrevious && e.focusPrevious(...o), ["stop"]), ["up"])),
-              n[2] || (n[2] = y(T((...o) => e.onBackButton && e.onBackButton(...o), ["stop"]), ["esc"]))
-            ]
-          }, [
-            (m(!0), k(Z, null, z(e.computedItems, (o, t) => (m(), k("li", {
-              key: `sub-menu-item-list-item-${t}`,
-              class: W([
-                { "b-sub-menu-item-list__back-button": t === 0 },
-                { "b-sub-menu-item-list__first-item": t == 1 }
-              ]),
-              role: "none"
-            }, [
-              I(i, {
-                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"])
-            ], 2))), 128))
-          ], 544)
-        ]),
-        _: 1
-      })
-    ]),
-    _: 1
-  });
-}
-const Pe = /* @__PURE__ */ S(Oe, [["render", Ke], ["__scopeId", "data-v-67456329"]]), Te = K({
-  name: "menu-item-list",
-  components: { MenuItem: J, MenuListContainer: Q, SubMenuItemList: Pe },
-  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: [C.CLOSE],
-  setup(e, { emit: n }) {
-    const d = f(null), s = f(null), u = f(null), a = f(!1), i = f(null), l = f(e.focusLastElement ? e.data.length - 1 : 0), o = f(0), t = f(e.data.length - 1), p = B(() => e.data.some((r) => r.icon)), c = B(() => e.indentItems || p.value ? e.data.map((r) => {
-      let b = !1;
-      return r.icon || (b = !0), {
-        ...r,
-        // eslint-disable-next-line no-param-reassign
-        indent: b
-      };
-    }) : e.data), v = () => {
-      var r, b, M;
-      return (M = (b = (r = d.value) == null ? void 0 : r.children[l.value]) == null ? void 0 : b.children[0]) == null ? void 0 : M.focus();
-    }, _ = () => n(C.CLOSE), w = async (r, b) => {
-      r.items ? (i.value = b, a.value = !0) : (i.value = b, a.value = !1, _());
-    }, $ = () => {
-      l.value > 0 ? (l.value -= 1, c.value[l.value].disabled && $()) : l.value = t.value, v();
-    }, R = () => {
-      l.value < t.value ? (l.value += 1, c.value[l.value].disabled && R()) : l.value = 0, v();
-    }, Y = (r, b) => {
-      var M;
-      (M = r == null ? void 0 : r.items) != null && M.length && (i.value = b, a.value = !0);
-    }, x = () => {
-      i.value && a.value && (i.value = null, a.value = !1);
-    }, ee = () => {
-      a.value = !1, i.value = null, v();
-    }, te = B(() => {
-      var r;
-      return (r = s == null ? void 0 : s.value) == null ? void 0 : r.$el.offsetHeight;
-    }), ne = B(() => {
-      var r, b, M;
-      return (M = (b = (r = u == null ? void 0 : u.value) == null ? void 0 : r[0]) == null ? void 0 : b.$el) == null ? void 0 : M.offsetHeight;
-    }), oe = B(() => a.value ? `${ne.value}px` : `${te.value}px`);
-    return {
-      // Values
-      menuItemListRef: d,
-      menuItemListWrapperRef: s,
-      subMenuItemListRef: u,
-      computedData: c,
-      computedHeight: oe,
-      focusedIndex: l,
-      subMenuFocusedIndex: o,
-      showSubMenu: a,
-      visibleSubMenuIndex: i,
-      // Methods
-      toggleMenu: w,
-      closeMenu: _,
-      focusPrevious: $,
-      focusNext: R,
-      focusRight: Y,
-      focusLeft: x,
-      onBackButton: ee
-    };
-  }
-});
-const Ee = ["onKeydown"];
-function Ne(e, n, d, s, u, a) {
-  const i = h("menu-item"), l = h("sub-menu-item-list"), o = h("menu-list-container");
-  return m(), L(o, {
-    ref: "menuItemListWrapperRef",
-    style: G({ height: e.computedHeight })
-  }, {
-    default: g(() => [
-      O("ul", {
-        ref: "menuItemListRef",
-        class: "b-menu-item-list",
-        role: "menu",
-        onKeydown: [
-          n[1] || (n[1] = y((...t) => e.focusNext && e.focusNext(...t), ["down"])),
-          n[2] || (n[2] = y((...t) => e.focusPrevious && e.focusPrevious(...t), ["up"])),
-          n[3] || (n[3] = y((...t) => e.closeMenu && e.closeMenu(...t), ["esc"])),
-          n[4] || (n[4] = y((...t) => e.closeMenu && e.closeMenu(...t), ["tab"]))
-        ]
-      }, [
-        (m(!0), k(Z, null, z(e.computedData, (t, p) => {
-          var c, v, _, w;
-          return m(), k("li", {
-            key: `menu-item-${p}`,
-            class: "b-menu-item-list__item",
-            role: "none",
-            onKeydown: [
-              y(($) => e.focusRight(t, p), ["right"]),
-              n[0] || (n[0] = y(($) => e.focusLeft(), ["left"]))
-            ]
-          }, [
-            I(i, {
-              text: t.text,
-              handler: (c = t.items) != null && c.length ? () => null : t.handler,
-              "secondary-text": t.secondaryText,
-              icon: t.icon,
-              chevron: !!((v = t.items) != null && v.length),
-              disabled: t.disabled,
-              critical: t.critical,
-              indent: t.indent,
-              tabindex: p === e.subMenuFocusedIndex ? "0" : "-1",
-              "aria-haspopup": !!((_ = t.items) != null && _.length),
-              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === p,
-              onClick: ($) => e.toggleMenu(t, p)
-            }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
-            (w = t.items) != null && w.length && e.showSubMenu && e.visibleSubMenuIndex === p ? (m(), L(l, {
-              key: 0,
-              ref_for: !0,
-              ref: "subMenuItemListRef",
-              items: t.items,
-              title: t.text,
-              onBack: e.onBackButton,
-              onClose: e.closeMenu
-            }, null, 8, ["items", "title", "onBack", "onClose"])) : P("", !0)
-          ], 40, Ee);
-        }), 128))
-      ], 544)
-    ]),
-    _: 1
-  }, 8, ["style"]);
-}
-const Re = /* @__PURE__ */ S(Te, [["render", Ne], ["__scopeId", "data-v-a917040d"]]), De = K({
-  i18n: { messages: X },
-  name: "bento-menu",
-  components: { BentoButton: pe, BentoPopover: fe, MenuItemList: Re, OptionsVerticalIcon: Be },
-  directives: { BentoClickOutsideDirective: me },
-  props: {
-    /**
-     * 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: H.BOTTOM_START,
-      validator: (e) => Object.values(H).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
-    },
-    /**
-     * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.
-     */
-    button: {
-      type: Object,
-      default: () => ({
-        variant: "secondary"
-      })
-    }
-  },
-  emits: [C.CLOSE, C.OPEN],
-  setup(e, { emit: n }) {
-    const d = f(null), s = f(!1), u = f(!1), a = F("menu"), i = F("menu-popover"), l = B(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), o = () => {
-      s.value = !0, n(C.OPEN);
-    }, t = () => {
-      s.value && (s.value = !1, d.value.$el.focus(), n(C.CLOSE));
-    };
-    return {
-      // Values
-      menuButtonRef: d,
-      menuId: a,
-      popoverId: i,
-      showMenu: s,
-      computedMenuWidth: l,
-      isLastElementFocused: u,
-      // Methods
-      onKeyDown: () => {
-        u.value = !1, o();
-      },
-      onKeyUp: () => {
-        u.value = !0, o();
-      },
-      closeMenu: t,
-      toggleShowMenu: (_) => {
-        _.stopPropagation(), s.value ? t() : o();
-      }
-    };
-  }
-});
-function Fe(e, n, d, s, u, a) {
-  const i = h("options-vertical-icon"), l = h("bento-button"), o = h("menu-item-list"), t = h("bento-popover"), p = ce("bento-click-outside-directive");
-  return de((m(), k("div", {
-    class: "b-menu",
-    onKeydown: [
-      n[0] || (n[0] = y((...c) => e.onKeyDown && e.onKeyDown(...c), ["down"])),
-      n[1] || (n[1] = y((...c) => e.onKeyUp && e.onKeyUp(...c), ["up"])),
-      n[2] || (n[2] = y((...c) => e.closeMenu && e.closeMenu(...c), ["esc"]))
-    ]
-  }, [
-    I(l, V({
-      ref: "menuButtonRef",
-      "aria-haspopup": "true"
-    }, e.button, {
-      "aria-expanded": `${e.showMenu}`,
-      "aria-controls": e.showMenu ? e.menuId : null,
-      onClick: e.toggleShowMenu
-    }), {
-      iconLeft: g(() => [
-        j(e.$slots, "default", {}, () => [
-          I(i, {
-            title: e.$t("menuButton")
-          }, null, 8, ["title"])
-        ], !0)
-      ]),
-      _: 3
-    }, 16, ["aria-expanded", "aria-controls", "onClick"]),
-    e.menuButtonRef ? (m(), L(t, {
-      key: 0,
-      id: e.menuId,
-      open: e.showMenu,
-      class: "b-menu__popover",
-      style: G(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: g(() => [
-        I(o, {
-          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"])) : P("", !0)
-  ], 32)), [
-    [p, e.closeMenu]
-  ]);
-}
-const Ge = /* @__PURE__ */ S(De, [["render", Fe], ["__scopeId", "data-v-2ccaed5c"]]);
+import { B as o, a as t } from "./chunks/index.c207e9ab.js";
 export {
-  Ge as BentoMenu,
-  C as BentoMenuEvent
+  o as BentoMenu,
+  t as BentoMenuEvent
 };
 //# sourceMappingURL=menu.js.map