@adyen/bento-vue3 1.4.1 → 1.5.0

package/dist/menu.js

@@ -1,12 +1,12 @@
-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 ue, withCtx as g, createVNode as I, createTextVNode as D, resolveDynamicComponent as ie, 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 de, withDirectives as ce } from "vue";
+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.7d09c245.js";
+import { a as pe } from "./chunks/button.7072457f.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.c4ac1ad1.js";
-import { B as be } from "./chunks/index.77c651df.js";
+import { B as _e, a as q } from "./chunks/base-button.9740f320.js";
+import { B as be } from "./chunks/index.32ed68b7.js";
 import "./assets/index41.css";
 let U = 0;
 const ye = {
@@ -29,7 +29,7 @@ const ye = {
   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, t, c, s, i, a) {
+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",
@@ -111,7 +111,7 @@ const Be = /* @__PURE__ */ S(ye, [["render", Me], ["__scopeId", "data-v-c663a42e
     }
   },
   emits: [q.CLICK],
-  setup(e, { emit: t }) {
+  setup(e, { emit: n }) {
     return {
       // Values
       conditionalClasses: B(() => ({
@@ -119,23 +119,23 @@ const Be = /* @__PURE__ */ S(ye, [["render", Me], ["__scopeId", "data-v-c663a42e
         "b-menu-item--indent": e.indent
       })),
       // Methods
-      onClick: (i) => {
-        i.stopPropagation(), e.handler(), t(q.CLICK);
+      onClick: (u) => {
+        u.stopPropagation(), e.handler(), n(q.CLICK);
       }
     };
   }
 });
-function ke(e, t, c, s, i, a) {
-  const u = h("bento-typography"), l = h("chevron-right-icon"), o = h("base-button");
+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
-  }, ue({
+  }, ie({
     default: g(() => [
-      I(u, {
+      I(i, {
         el: "span",
         variant: "body",
         stronger: e.isTitle,
@@ -146,7 +146,7 @@ function ke(e, t, c, s, i, a) {
         ]),
         _: 1
       }, 8, ["stronger"]),
-      e.secondaryText ? (m(), L(u, {
+      e.secondaryText ? (m(), L(i, {
         key: 0,
         el: "span",
         variant: "body",
@@ -163,7 +163,7 @@ function ke(e, t, c, s, i, a) {
     e.icon ? {
       name: "iconLeft",
       fn: g(() => [
-        (m(), L(ie(e.icon), {
+        (m(), L(ue(e.icon), {
           class: "b-menu-item__icon-left",
           "aria-hidden": "true"
         }))
@@ -185,7 +185,7 @@ const we = K({
   name: "bento-menu-list-container"
 });
 const Le = { class: "b-menu-list-container" };
-function Se(e, t, c, s, i, a) {
+function Se(e, n, d, s, u, a) {
   return m(), k("div", Le, [
     j(e.$slots, "default", {}, void 0, !0)
   ]);
@@ -210,10 +210,10 @@ const Q = /* @__PURE__ */ S(we, [["render", Se], ["__scopeId", "data-v-ea0113ba"
     }
   },
   emits: [C.CLOSE, C.BACK],
-  setup(e, { emit: t }) {
-    const c = f(null), s = f(0), i = f(e.items.length), a = () => t(C.CLOSE), u = () => t(C.BACK), l = B(() => {
+  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 d = (v = e.items) == null ? void 0 : v.map((_) => ({
+      const c = (v = e.items) == null ? void 0 : v.map((_) => ({
         ..._,
         indent: !_.icon,
         isTitle: !1,
@@ -228,41 +228,41 @@ const Q = /* @__PURE__ */ S(we, [["render", Se], ["__scopeId", "data-v-ea0113ba"
           isTitle: !0,
           disabled: !1,
           indent: !1,
-          handler: u,
-          clickHandler: u
+          handler: i,
+          clickHandler: i
         },
-        ...d
+        ...c
       ];
     }), o = async () => {
-      var d, v, _, w, $;
-      ($ = (w = (_ = (v = (d = c.value) == null ? void 0 : d.children) == null ? void 0 : v[s.value]) == null ? void 0 : _.children) == null ? void 0 : w[0]) == null || $.focus();
+      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 n = () => {
-      s.value > 0 ? (s.value -= 1, l.value[s.value].disabled && n()) : s.value = i.value, o();
+    const t = () => {
+      s.value > 0 ? (s.value -= 1, l.value[s.value].disabled && t()) : s.value = u.value, o();
     }, p = () => {
-      s.value < i.value ? (s.value += 1, l.value[s.value].disabled && p()) : s.value = 0, o();
+      s.value < u.value ? (s.value += 1, l.value[s.value].disabled && p()) : s.value = 0, o();
     };
     return {
       // Enums
       BentoMenuEvent: C,
       // Values
-      subMenuItemListRefLocal: c,
+      subMenuItemListRefLocal: d,
       subMenuFocusedIndex: s,
       ChevronLeftIcon: A,
       computedItems: l,
       // Methods
       closeMenu: a,
-      onBackButton: u,
-      focusPrevious: n,
+      onBackButton: i,
+      focusPrevious: t,
       focusNext: p
     };
   }
 });
-function Ke(e, t, c, s, i, a) {
-  const u = h("menu-item"), l = h("menu-list-container");
+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: ""
@@ -275,20 +275,20 @@ function Ke(e, t, c, s, i, a) {
             role: "menu",
             class: "b-sub-menu-item-list__list",
             onKeydown: [
-              t[0] || (t[0] = y(T((...o) => e.focusNext && e.focusNext(...o), ["stop"]), ["down"])),
-              t[1] || (t[1] = y(T((...o) => e.focusPrevious && e.focusPrevious(...o), ["stop"]), ["up"])),
-              t[2] || (t[2] = y(T((...o) => e.onBackButton && e.onBackButton(...o), ["stop"]), ["esc"]))
+              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, n) => (m(), k("li", {
-              key: `sub-menu-item-list-item-${n}`,
+            (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": n === 0 },
-                { "b-sub-menu-item-list__first-item": n == 1 }
+                { "b-sub-menu-item-list__back-button": t === 0 },
+                { "b-sub-menu-item-list__first-item": t == 1 }
               ]),
               role: "none"
             }, [
-              I(u, {
+              I(i, {
                 text: o.text,
                 handler: o.handler,
                 "secondary-text": o.secondaryText,
@@ -297,7 +297,7 @@ function Ke(e, t, c, s, i, a) {
                 disabled: o.disabled,
                 critical: o.critical,
                 indent: o.indent,
-                tabindex: n === e.subMenuFocusedIndex ? "0" : "-1",
+                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))
@@ -336,8 +336,8 @@ const Pe = /* @__PURE__ */ S(Oe, [["render", Ke], ["__scopeId", "data-v-67456329
     }
   },
   emits: [C.CLOSE],
-  setup(e, { emit: t }) {
-    const c = f(null), s = f(null), i = f(null), a = f(!1), u = f(null), l = f(e.focusLastElement ? e.data.length - 1 : 0), o = f(0), n = f(e.data.length - 1), p = B(() => e.data.some((r) => r.icon)), d = B(() => e.indentItems || p.value ? e.data.map((r) => {
+  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,
@@ -346,38 +346,38 @@ const Pe = /* @__PURE__ */ S(Oe, [["render", Ke], ["__scopeId", "data-v-67456329
       };
     }) : e.data), v = () => {
       var r, b, M;
-      return (M = (b = (r = c.value) == null ? void 0 : r.children[l.value]) == null ? void 0 : b.children[0]) == null ? void 0 : M.focus();
-    }, _ = () => t(C.CLOSE), w = async (r, b) => {
-      r.items ? (u.value = b, a.value = !0) : (u.value = b, a.value = !1, _());
+      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, d.value[l.value].disabled && $()) : l.value = n.value, v();
+      l.value > 0 ? (l.value -= 1, c.value[l.value].disabled && $()) : l.value = t.value, v();
     }, R = () => {
-      l.value < n.value ? (l.value += 1, d.value[l.value].disabled && R()) : l.value = 0, v();
+      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 && (u.value = b, a.value = !0);
+      (M = r == null ? void 0 : r.items) != null && M.length && (i.value = b, a.value = !0);
     }, x = () => {
-      u.value && a.value && (u.value = null, a.value = !1);
+      i.value && a.value && (i.value = null, a.value = !1);
     }, ee = () => {
-      a.value = !1, u.value = null, v();
-    }, ne = B(() => {
+      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;
-    }), te = B(() => {
+    }), ne = B(() => {
       var r, b, M;
-      return (M = (b = (r = i == null ? void 0 : i.value) == null ? void 0 : r[0]) == null ? void 0 : b.$el) == null ? void 0 : M.offsetHeight;
-    }), oe = B(() => a.value ? `${te.value}px` : `${ne.value}px`);
+      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: c,
+      menuItemListRef: d,
       menuItemListWrapperRef: s,
-      subMenuItemListRef: i,
-      computedData: d,
+      subMenuItemListRef: u,
+      computedData: c,
       computedHeight: oe,
       focusedIndex: l,
       subMenuFocusedIndex: o,
       showSubMenu: a,
-      visibleSubMenuIndex: u,
+      visibleSubMenuIndex: i,
       // Methods
       toggleMenu: w,
       closeMenu: _,
@@ -390,8 +390,8 @@ const Pe = /* @__PURE__ */ S(Oe, [["render", Ke], ["__scopeId", "data-v-67456329
   }
 });
 const Ee = ["onKeydown"];
-function Ne(e, t, c, s, i, a) {
-  const u = h("menu-item"), l = h("sub-menu-item-list"), o = h("menu-list-container");
+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 })
@@ -402,43 +402,43 @@ function Ne(e, t, c, s, i, a) {
         class: "b-menu-item-list",
         role: "menu",
         onKeydown: [
-          t[1] || (t[1] = y((...n) => e.focusNext && e.focusNext(...n), ["down"])),
-          t[2] || (t[2] = y((...n) => e.focusPrevious && e.focusPrevious(...n), ["up"])),
-          t[3] || (t[3] = y((...n) => e.closeMenu && e.closeMenu(...n), ["esc"])),
-          t[4] || (t[4] = y((...n) => e.closeMenu && e.closeMenu(...n), ["tab"]))
+          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, (n, p) => {
-          var d, v, _, w;
+        (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(n, p), ["right"]),
-              t[0] || (t[0] = y(($) => e.focusLeft(), ["left"]))
+              y(($) => e.focusRight(t, p), ["right"]),
+              n[0] || (n[0] = y(($) => e.focusLeft(), ["left"]))
             ]
           }, [
-            I(u, {
-              text: n.text,
-              handler: (d = n.items) != null && d.length ? () => null : n.handler,
-              "secondary-text": n.secondaryText,
-              icon: n.icon,
-              chevron: !!((v = n.items) != null && v.length),
-              disabled: n.disabled,
-              critical: n.critical,
-              indent: n.indent,
+            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": !!((_ = n.items) != null && _.length),
+              "aria-haspopup": !!((_ = t.items) != null && _.length),
               "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === p,
-              onClick: ($) => e.toggleMenu(n, p)
+              onClick: ($) => e.toggleMenu(t, p)
             }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
-            (w = n.items) != null && w.length && e.showSubMenu && e.visibleSubMenuIndex === p ? (m(), L(l, {
+            (w = t.items) != null && w.length && e.showSubMenu && e.visibleSubMenuIndex === p ? (m(), L(l, {
               key: 0,
               ref_for: !0,
               ref: "subMenuItemListRef",
-              items: n.items,
-              title: n.text,
+              items: t.items,
+              title: t.text,
               onBack: e.onBackButton,
               onClose: e.closeMenu
             }, null, 8, ["items", "title", "onBack", "onClose"])) : P("", !0)
@@ -472,7 +472,7 @@ const Re = /* @__PURE__ */ S(Te, [["render", Ne], ["__scopeId", "data-v-a917040d
     },
     /**
      * Instructs the menu popover to be visible outside of the containing container.
-     * https://popper.js.org/docs/v2/constructors/#strategy
+     * @see {@link https://floating-ui.com/docs/usefloating#strategy}
      */
     menuFixedPositioning: {
       type: Boolean,
@@ -496,42 +496,42 @@ const Re = /* @__PURE__ */ S(Te, [["render", Ne], ["__scopeId", "data-v-a917040d
     }
   },
   emits: [C.CLOSE, C.OPEN],
-  setup(e, { emit: t }) {
-    const c = f(null), s = f(!1), i = f(!1), a = F("menu"), u = F("menu-popover"), l = B(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), o = () => {
-      s.value = !0, t(C.OPEN);
-    }, n = () => {
-      s.value && (s.value = !1, c.value.$el.focus(), t(C.CLOSE));
+  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: c,
+      menuButtonRef: d,
       menuId: a,
-      popoverId: u,
+      popoverId: i,
       showMenu: s,
       computedMenuWidth: l,
-      isLastElementFocused: i,
+      isLastElementFocused: u,
       // Methods
       onKeyDown: () => {
-        i.value = !1, o();
+        u.value = !1, o();
       },
       onKeyUp: () => {
-        i.value = !0, o();
+        u.value = !0, o();
       },
-      closeMenu: n,
+      closeMenu: t,
       toggleShowMenu: (_) => {
-        _.stopPropagation(), s.value ? n() : o();
+        _.stopPropagation(), s.value ? t() : o();
       }
     };
   }
 });
-function Fe(e, t, c, s, i, a) {
-  const u = h("options-vertical-icon"), l = h("bento-button"), o = h("menu-item-list"), n = h("bento-popover"), p = de("bento-click-outside-directive");
-  return ce((m(), k("div", {
+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: [
-      t[0] || (t[0] = y((...d) => e.onKeyDown && e.onKeyDown(...d), ["down"])),
-      t[1] || (t[1] = y((...d) => e.onKeyUp && e.onKeyUp(...d), ["up"])),
-      t[2] || (t[2] = y((...d) => e.closeMenu && e.closeMenu(...d), ["esc"]))
+      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({
@@ -544,14 +544,14 @@ function Fe(e, t, c, s, i, a) {
     }), {
       iconLeft: g(() => [
         j(e.$slots, "default", {}, () => [
-          I(u, {
+          I(i, {
             title: e.$t("menuButton")
           }, null, 8, ["title"])
         ], !0)
       ]),
       _: 3
     }, 16, ["aria-expanded", "aria-controls", "onClick"]),
-    e.menuButtonRef ? (m(), L(n, {
+    e.menuButtonRef ? (m(), L(t, {
       key: 0,
       id: e.menuId,
       open: e.showMenu,
@@ -560,6 +560,16 @@ function Fe(e, t, c, s, i, a) {
       "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(() => [
@@ -575,7 +585,7 @@ function Fe(e, t, c, s, i, a) {
     [p, e.closeMenu]
   ]);
 }
-const Ge = /* @__PURE__ */ S(De, [["render", Fe], ["__scopeId", "data-v-487dd6cd"]]);
+const Ge = /* @__PURE__ */ S(De, [["render", Fe], ["__scopeId", "data-v-2ccaed5c"]]);
 export {
   Ge as BentoMenu,
   C as BentoMenuEvent