npm - @adyen/bento-vue2 - Versions diffs - 2.0.1 → 2.1.0 - Mend

@adyen/bento-vue2 2.0.1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (320) hide show

package/dist/chunks/{draggable.DYKdXdbj.js → draggable.BczXedk7.js} RENAMED Viewed

@@ -1,36 +1,36 @@
-import { ref as v, defineComponent as O, computed as D, watch as B, nextTick as I } from "vue";
-import { u as C, a as U } from "./draggable-handle.DgVdGC1V.js";
-import { u as A } from "./index.CPOlyau9.js";
-import { e as z, f as g } from "./index.CL3TXc0a.js";
-import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { ref as c, defineComponent as O, computed as B, watch as C, nextTick as L } from "vue";
+import { u as U, a as A } from "./draggable-handle.BM07OVdH.js";
+import { u as z } from "./index.CPOlyau9.js";
+import { e as k, f as g } from "./index.CL3TXc0a.js";
+import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/draggable.css";
-const N = z(() => {
-  const r = v(!1);
+const K = k(() => {
+  const l = c(!1);
   return typeof window < "u" && (g(
     window,
     "keydown",
-    (i) => {
-      i.key === "Tab" && (r.value = !0);
+    (a) => {
+      a.key === "Tab" && (l.value = !0);
     },
     { capture: !0 }
   ), g(
     window,
     "mousedown",
     () => {
-      r.value = !1;
+      l.value = !1;
     },
     { capture: !0 }
   ), g(
     window,
     "touchstart",
     () => {
-      r.value = !1;
+      l.value = !1;
     },
     { capture: !0, passive: !0 }
   ), g(window, "blur", () => {
-    r.value = !1;
-  })), { isKeyboardUser: r };
-}), K = {
+    l.value = !1;
+  })), { isKeyboardUser: l };
+}), G = {
   "de-DE": { youHaveMovedFromPositionToPosition: "Sie haben {itemLabel} von Position {indexOrigin} an Position {indexTarget} von {total} verschoben." },
   "en-GB": { youHaveMovedFromPositionToPosition: "You have moved {itemLabel} from position {indexOrigin} to position {indexTarget} of {total}." },
   "en-US": { youHaveMovedFromPositionToPosition: "You have moved {itemLabel} from position {indexOrigin} to position {indexTarget} of {total}." },
@@ -42,12 +42,12 @@ const N = z(() => {
   "ja-JP": { youHaveMovedFromPositionToPosition: "{itemLabel} を {indexOrigin} の位置から {total} の {indexTarget} の位置に移動しました。" },
   "pt-BR": { youHaveMovedFromPositionToPosition: "Você moveu {itemLabel} da posição {indexOrigin} para a posição {indexTarget} de {total}." },
   "zh-CN": { youHaveMovedFromPositionToPosition: "您已将 {itemLabel} 从 {indexOrigin} 位置移动到 {indexTarget} 位置（共 {total} 个位置）。" }
-}, G = {
+}, V = {
   name: "bento-draggable",
   model: { prop: "items", event: "update:items" },
-  i18n: { messages: K }
-}, V = /* @__PURE__ */ O({
-  ...G,
+  i18n: { messages: G }
+}, X = /* @__PURE__ */ O({
+  ...V,
   props: {
     announcement: { default: "" },
     disableAutoSort: { type: Boolean, default: !1 },
@@ -56,10 +56,10 @@ const N = z(() => {
     options: { default: () => ({}) }
   },
   emits: ["update:items"],
-  setup(r, { expose: i, emit: m }) {
-    const o = r, c = ">:not(.b-draggable__announcement)", t = v(null), p = v(!1), u = v([]), d = v(null), T = D(() => t.value ? {
+  setup(l, { expose: a, emit: m }) {
+    const o = l, v = ">:not(.b-draggable__announcement)", n = c(null), p = c(!1), u = c([]), d = c(null), P = B(() => n.value ? {
       ...o.options,
-      draggable: o.options?.draggable ?? c,
+      draggable: o.options?.draggable ?? v,
       onStart: (e) => {
         p.value = !0, o.options?.onStart && o.options?.onStart(e);
       },
@@ -74,28 +74,31 @@ const N = z(() => {
           return;
         }
         if (!o.disableAutoSort) {
-          const { oldIndex: n, newIndex: a, from: l, to: _ } = e;
-          l === _ && l === t.value && n !== void 0 && a !== void 0 && s(n, a);
+          const { oldIndex: t, newIndex: i, from: r, to: _ } = e;
+          r === _ && r === n.value && t !== void 0 && i !== void 0 && (y(e), s(t, i));
         }
       }
-    } : {}), { announcementMessage: L, announce: b } = C(), { t: P } = A(), { draggableElement: y } = U(t, T), { isKeyboardUser: h } = N(), f = async (e) => {
-      if (await I(), e !== -1 && t.value) {
-        const a = t.value.children[e]?.querySelector(".b-draggable-handle button");
-        await I(), a?.focus();
+    } : {}), { announcementMessage: M, announce: b } = U(), { t: T } = z(), { draggableElement: h } = A(n, P), y = (e) => {
+      const { from: t, item: i, oldIndex: r } = e;
+      !i || r === void 0 || (i.remove(), t.insertBefore(i, t.children[r] ?? null));
+    }, { isKeyboardUser: I } = K(), f = async (e) => {
+      if (await L(), e !== -1 && n.value) {
+        const i = n.value.children[e]?.querySelector(".b-draggable-handle button");
+        await L(), i?.focus();
       }
-    }, s = async (e, n) => {
-      if (e < 0 || n < 0 || e >= o.items.length || n >= o.items.length || e === n)
+    }, s = async (e, t) => {
+      if (e < 0 || t < 0 || e >= o.items.length || t >= o.items.length || e === t)
         return;
-      const a = Array.from(o.items), [l] = a.splice(e, 1);
-      a.splice(n, 0, l), d.value = l, m("update:items", a.filter(Boolean));
-      const _ = l.label, R = o?.announcement || P("youHaveMovedFromPositionToPosition", {
+      const i = Array.from(o.items), [r] = i.splice(e, 1);
+      i.splice(t, 0, r), d.value = r, m("update:items", i.filter(Boolean));
+      const _ = r.label, D = o?.announcement || T("youHaveMovedFromPositionToPosition", {
         itemLabel: _,
         indexOrigin: e + 1,
-        indexTarget: n + 1,
+        indexTarget: t + 1,
         total: o.items.length
       });
-      o.announcement !== "disabled" && b(R);
-    }, M = (e) => s(e, e - 1), w = (e) => s(e, e + 1), E = (e) => s(e, e - 1), H = (e) => s(e, e + 1), S = (e) => s(e, 0), F = (e) => s(e, o.items.length - 1), x = (e) => ({
+      o.announcement !== "disabled" && b(D);
+    }, w = (e) => s(e, e - 1), E = (e) => s(e, e + 1), H = (e) => s(e, e - 1), S = (e) => s(e, e + 1), F = (e) => s(e, 0), x = (e) => s(e, o.items.length - 1), R = (e) => ({
       up: e === 0,
       top: e === 0,
       down: e === o.items.length - 1,
@@ -103,32 +106,32 @@ const N = z(() => {
       left: !0,
       right: !0
     });
-    return B(
+    return C(
       () => o.items,
       async (e) => {
         if (e) {
-          if (h.value && e.length > 0 && u.value.length > 0) {
+          if (I.value && e.length > 0 && u.value.length > 0) {
             if (d.value) {
-              const n = e.indexOf(d.value);
-              n !== -1 && await f(n), d.value = null;
+              const t = e.indexOf(d.value);
+              t !== -1 && await f(t), d.value = null;
             } else if (e.length > u.value.length) {
-              const n = e.findIndex((a) => !u.value.includes(a));
-              n !== -1 && await f(n);
+              const t = e.findIndex((i) => !u.value.includes(i));
+              t !== -1 && await f(t);
             }
           }
           u.value = [...e];
         }
       },
       { deep: !0, immediate: !0 }
-    ), i({
+    ), a({
       /**
        * A ref to the container DOM element.
        */
-      containerRef: t,
+      containerRef: n,
       /**
        * The underlying SortableJS instance, which provides methods like `toArray()`, `sort()`, and `destroy()`.
        */
-      draggableElement: y,
+      draggableElement: h,
       /**
        * A boolean ref that is `true` when an item is being dragged.
        */
@@ -145,24 +148,24 @@ const N = z(() => {
        * Programmatically focuses the draggable handle button at the given index.
        */
       focus: f
-    }), { __sfc: !0, ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS: c, props: o, emit: m, containerRef: t, isDragging: p, internalItems: u, lastMovedItem: d, computedOptions: T, announcementMessage: L, announce: b, t: P, draggableElement: y, isKeyboardUser: h, focus: f, moveItem: s, moveItemUp: M, moveItemDown: w, moveItemLeft: E, moveItemRight: H, moveItemTop: S, moveItemBottom: F, disabledMenuItems: x };
+    }), { __sfc: !0, ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS: v, props: o, emit: m, containerRef: n, isDragging: p, internalItems: u, lastMovedItem: d, computedOptions: P, announcementMessage: M, announce: b, t: T, draggableElement: h, restoreItemDomPosition: y, isKeyboardUser: I, focus: f, moveItem: s, moveItemUp: w, moveItemDown: E, moveItemLeft: H, moveItemRight: S, moveItemTop: F, moveItemBottom: x, disabledMenuItems: R };
   }
 });
-var X = function() {
-  var i = this, m = i._self._c, o = i._self._setupProxy;
-  return m(i.el, { ref: "containerRef", tag: "component" }, [i._l(i.items, function(c, t) {
-    return i._t("default", null, { item: c, index: t, moveUp: () => o.moveItemUp(t), moveRight: () => o.moveItemRight(t), moveDown: () => o.moveItemDown(t), moveLeft: () => o.moveItemLeft(t), moveTop: () => o.moveItemTop(t), moveBottom: () => o.moveItemBottom(t), disabledMenus: o.disabledMenuItems(t) });
-  }), m("div", { staticClass: "b-draggable__announcement", attrs: { role: "status", "aria-live": "polite" } }, [i._v(" " + i._s(o.announcementMessage) + " ")])], 2);
-}, Y = [], j = /* @__PURE__ */ k(
-  V,
+var Y = function() {
+  var a = this, m = a._self._c, o = a._self._setupProxy;
+  return m(a.el, { ref: "containerRef", tag: "component" }, [a._l(a.items, function(v, n) {
+    return a._t("default", null, { item: v, index: n, moveUp: () => o.moveItemUp(n), moveRight: () => o.moveItemRight(n), moveDown: () => o.moveItemDown(n), moveLeft: () => o.moveItemLeft(n), moveTop: () => o.moveItemTop(n), moveBottom: () => o.moveItemBottom(n), disabledMenus: o.disabledMenuItems(n) });
+  }), m("div", { staticClass: "b-draggable__announcement", attrs: { role: "status", "aria-live": "polite" } }, [a._v(" " + a._s(o.announcementMessage) + " ")])], 2);
+}, j = [], q = /* @__PURE__ */ N(
   X,
   Y,
+  j,
   !1,
   null,
-  "72c4db16"
+  "fb418dc3"
 );
-const $ = j.exports;
+const ee = q.exports;
 export {
-  $ as d
+  ee as d
 };
-//# sourceMappingURL=draggable.DYKdXdbj.js.map
+//# sourceMappingURL=draggable.BczXedk7.js.map

package/dist/chunks/draggable.BczXedk7.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"draggable.BczXedk7.js","sources":["../../src/components/draggable/composables/use-track-keyboard-user/use-track-keyboard-user.ts","../../src/components/draggable/draggable.vue"],"sourcesContent":["import { createGlobalState, useEventListener } from '@vueuse/core';\nimport { ref } from 'vue';\n\nexport const useTrackKeyboardUser = createGlobalState(() => {\n // 1. Define this OUTSIDE the setup function so it acts as a global singleton\n const isKeyboardUser = ref(false);\n\n if (typeof window !== 'undefined') {\n // Switch to keyboard mode on Tab\n useEventListener(\n window,\n 'keydown',\n e => {\n if (e.key === 'Tab') {\n isKeyboardUser.value = true;\n }\n },\n { capture: true }\n );\n\n // Switch back to mouse mode on click/touch\n useEventListener(\n window,\n 'mousedown',\n () => {\n isKeyboardUser.value = false;\n },\n { capture: true }\n );\n\n useEventListener(\n window,\n 'touchstart',\n () => {\n isKeyboardUser.value = false;\n },\n { capture: true, passive: true }\n );\n\n useEventListener(window, 'blur', () => {\n isKeyboardUser.value = false;\n });\n }\n\n return { isKeyboardUser };\n});\n","<template>\n <component :is=\"el\" ref=\"containerRef\">\n <slot\n v-for=\"(item, index) of items\"\n :item=\"item\"\n :index=\"index\"\n :move-up=\"() => moveItemUp(index)\"\n :move-right=\"() => moveItemRight(index)\"\n :move-down=\"() => moveItemDown(index)\"\n :move-left=\"() => moveItemLeft(index)\"\n :move-top=\"() => moveItemTop(index)\"\n :move-bottom=\"() => moveItemBottom(index)\"\n :disabled-menus=\"disabledMenuItems(index)\"\n name=\"default\"\n ></slot>\n <div class=\"b-draggable__announcement\" role=\"status\" aria-live=\"polite\">\n {{ announcementMessage }}\n </div>\n </component>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref, watch } from 'vue';\n import type {\n BentoDraggableEmits,\n BentoDraggableItems,\n BentoDraggableOptions,\n BentoDraggableProps,\n BentoDraggableSortableEvent,\n } from './draggable.types';\n import { useBentoDraggable } from './composables/use-bento-draggable/use-bento-draggable';\n import { useDraggableAnnouncement } from './composables/use-draggable-announcement';\n import { useTrackKeyboardUser } from './composables/use-track-keyboard-user';\n import { useI18n } from '@/utils/ts/i18n';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS = '>:not(.b-draggable__announcement)';\n\n const props = defineProps({\n announcement: { default: '' },\n disableAutoSort: { type: Boolean, default: false },\n el: { default: 'div' },\n items: { default: () => [] },\n options: { default: () => ({}) }\n});\n\n const emit = defineEmits([\"update:items\"]);\n\n /**\n * Reference to the container of the draggable elements.\n */\n const containerRef = ref<HTMLElement | null>(null);\n /**\n * Indicates if there is an element being dragged inside the container.\n */\n const isDragging = ref<boolean>(false);\n\n /**\n * Internal copy of items used to track position changes for focus restoration.\n */\n const internalItems = ref<BentoDraggableItems>([]);\n\n /**\n * Tracks the item being moved via keyboard so focus can be restored to the correct element.\n */\n const lastMovedItem = ref<BentoDraggableItems[number] | null>(null);\n\n const computedOptions = computed<BentoDraggableOptions>(() => {\n if (!containerRef.value) {\n return {};\n }\n\n return {\n ...props.options,\n draggable: props.options?.draggable ?? ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS,\n onStart: (event: BentoDraggableSortableEvent) => {\n isDragging.value = true;\n\n if (props.options?.onStart) {\n props.options?.onStart(event);\n }\n },\n onEnd: (event: BentoDraggableSortableEvent) => {\n // This is a hack to move the event to the end of the event queue.\n // cf this issue: https://github.com/SortableJS/Sortable/issues/1184\n setTimeout(() => {\n isDragging.value = false;\n\n if (props.options?.onEnd) {\n props.options?.onEnd(event);\n }\n });\n },\n onSort: (event: BentoDraggableSortableEvent) => {\n // Always execute the user's custom onSort callback if provided\n if (props.options?.onSort) {\n props.options.onSort(event);\n return;\n }\n\n // Automatically sync the v-model unless the user explicitly disabled it\n if (!props.disableAutoSort) {\n const { oldIndex, newIndex, from, to } = event;\n\n if (\n from === to &&\n from === containerRef.value &&\n oldIndex !== undefined &&\n newIndex !== undefined\n ) {\n restoreItemDomPosition(event);\n moveItem(oldIndex, newIndex);\n }\n }\n },\n };\n });\n\n /**\n * Handle reordering announcements for screen readers.\n */\n const { announcementMessage, announce } = useDraggableAnnouncement();\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const { draggableElement } = useBentoDraggable(containerRef, computedOptions);\n\n /**\n * Restores the item that SortableJS moved directly in the DOM before updating the reactive items.\n * This keeps Vue responsible for rendering the final order and prevents the move from being applied twice.\n *\n * @param event SortableJS event containing the moved item and its original index.\n */\n const restoreItemDomPosition = (event: BentoDraggableSortableEvent) => {\n const { from, item, oldIndex } = event;\n\n if (!item || oldIndex === undefined) {\n return;\n }\n\n item.remove();\n from.insertBefore(item, from.children[oldIndex] ?? null);\n };\n\n // When moving items between sibling `bento-draggable`, the item may be removed, causing the DOM to be destroyed and temporarily lose focus\n // This is an alternative to query element `:focus-within` as the `:focus-within` will be gone until the other `bento-draggable` adds it into the list\n const { isKeyboardUser } = useTrackKeyboardUser();\n\n /**\n * Focuses the draggable handle button at the given index.\n * Waits for the next tick to ensure the DOM has been updated before focusing.\n *\n * @param index - The index of the item whose handle should receive focus.\n */\n const focus = async (index: number) => {\n await nextTick();\n\n if (index !== -1 && containerRef.value) {\n const itemElement = containerRef.value.children[index] as HTMLElement;\n const button = itemElement?.querySelector<HTMLButtonElement>('.b-draggable-handle button');\n await nextTick();\n button?.focus();\n }\n };\n\n /**\n * Moves an item from one position to another within the list,\n * emits the updated list, and announces the change for screen readers.\n *\n * @param indexOrigin - The current index of the item to move.\n * @param indexTarget - The desired index to move the item to.\n */\n const moveItem = async (indexOrigin: number, indexTarget: number) => {\n if (\n indexOrigin < 0 ||\n indexTarget < 0 ||\n indexOrigin >= props.items.length ||\n indexTarget >= props.items.length ||\n indexOrigin === indexTarget\n ) {\n return;\n }\n\n const newList = Array.from(props.items as BentoDraggableItems);\n const [removed] = newList.splice(indexOrigin, 1);\n newList.splice(indexTarget, 0, removed);\n\n lastMovedItem.value = removed;\n\n // Occasionally, there may be race conditions where the index is out-of-date due to the fast drag-and-drop or\n // other async operations like onEnd > setTimeout.\n // Filtering out null/undefined values ensures the list remains valid.\n emit('update:items', newList.filter(Boolean));\n\n const itemLabel = removed.label;\n\n const message =\n props?.announcement ||\n t('youHaveMovedFromPositionToPosition', {\n itemLabel,\n indexOrigin: indexOrigin + 1,\n indexTarget: indexTarget + 1,\n total: props.items.length,\n });\n\n if (props.announcement !== 'disabled') {\n announce(message);\n }\n };\n\n const moveItemUp = (index: number) => moveItem(index, index - 1);\n\n const moveItemDown = (index: number) => moveItem(index, index + 1);\n\n const moveItemLeft = (index: number) => moveItem(index, index - 1);\n\n const moveItemRight = (index: number) => moveItem(index, index + 1);\n\n const moveItemTop = (index: number) => moveItem(index, 0);\n\n const moveItemBottom = (index: number) => moveItem(index, props.items.length - 1);\n\n /**\n * Returns a pre-calculated disabled menus object for the current item.\n */\n const disabledMenuItems = (index: number) => {\n return {\n up: index === 0,\n top: index === 0,\n down: index === props.items.length - 1,\n bottom: index === props.items.length - 1,\n left: true,\n right: true,\n };\n };\n\n /**\n * Watch for items changes and restore focus automatically\n */\n watch(\n () => props.items,\n async newItems => {\n if (!newItems) {\n return;\n }\n\n if (isKeyboardUser.value && newItems.length > 0 && internalItems.value.length > 0) {\n if (lastMovedItem.value) {\n // Within-list reorder: focus the moved item at its new position\n const movedItemIndex = newItems.indexOf(lastMovedItem.value);\n\n if (movedItemIndex !== -1) {\n await focus(movedItemIndex);\n }\n\n lastMovedItem.value = null;\n } else if (newItems.length > internalItems.value.length) {\n // Cross-list addition: focus the newly added item\n const newItemIndex = newItems.findIndex(item => !internalItems.value.includes(item));\n\n if (newItemIndex !== -1) {\n await focus(newItemIndex);\n }\n }\n }\n\n internalItems.value = [...newItems];\n },\n { deep: true, immediate: true }\n );\n\n defineExpose({\n /**\n * A ref to the container DOM element.\n */\n containerRef,\n /**\n * The underlying SortableJS instance, which provides methods like `toArray()`, `sort()`, and `destroy()`.\n */\n draggableElement,\n /**\n * A boolean ref that is `true` when an item is being dragged.\n */\n isDragging,\n /**\n * Announces a message to screen reader users via the live region.\n */\n announce,\n /**\n * Moves an item from one index to another and emits the updated list.\n */\n moveItem,\n /**\n * Programmatically focuses the draggable handle button at the given index.\n */\n focus,\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * Drag and drop container that transforms a list of items into draggable elements.\n * The library is based on SortableJS.\n * @see {@link https://github.com/SortableJS/Sortable#readme | SortableJS documentation}\n *\n * @example\n * import { BentoDraggable, BentoDraggableHandle, type BentoDraggableEvents } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoDraggable, BentoDraggableHandle },\n * template: `\n * <bento-draggable\n * v-model=\"items\"\n * condensed\n * :options=\"{\n * group: 'nested',\n * animation: 150\n * }\"\n * >\n * <template #default=\"{ item, index, moveUp, moveDown }\">\n * <div :key=\"item.id\">\n * <bento-draggable-handle\n * :label=\"item.label\"\n * @move-up=\"moveUp\"\n * @move-down=\"moveDown\"\n * />\n * </div>\n * </template>\n * </bento-draggable>\n * `,\n * setup () {\n * const items = ref([\n * { id: '1', label: 'Item 1' },\n * { id: '2', label: 'Item 2' }\n * ]);\n * return {\n * items,\n * }\n * }\n * }\n */\n\n export default {\n name: 'bento-draggable',\n model: { prop: 'items', event: 'update:items' },\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./draggable.scss\" />\n"],"names":["useTrackKeyboardUser","createGlobalState","isKeyboardUser","ref","useEventListener","e","__default__","messages","ALL_CHILDREN_EXCEPT_SCREEN_READER_ELEMENTS","containerRef","isDragging","internalItems","lastMovedItem","computedOptions","computed","props","event","oldIndex","newIndex","from","to","restoreItemDomPosition","moveItem","announcementMessage","announce","useDraggableAnnouncement","t","useI18n","draggableElement","useBentoDraggable","item","focus","index","nextTick","button","indexOrigin","indexTarget","newList","removed","emit","itemLabel","message","moveItemUp","moveItemDown","moveItemLeft","moveItemRight","moveItemTop","moveItemBottom","disabledMenuItems","watch","newItems","movedItemIndex","newItemIndex","expose"],"mappings":"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"}

package/dist/chunks/{dropdown-tag.Dk7SooVv.js → dropdown-tag.BmUNKoNw.js} RENAMED Viewed

@@ -1,14 +1,14 @@
 import { defineComponent as c, computed as h, toRefs as $, ref as b, watch as g } from "vue";
 import "./index.Cl4_42j5.js";
-import { B as O } from "./avatar.CxPKc8Gy.js";
-import { B as u, f as V } from "./dropdown.Bnq4kP7k.js";
+import { B as O } from "./avatar.BN4MI-42.js";
+import { B as u, f as V } from "./dropdown.CpZQYisR.js";
 import { u as _ } from "./form-field.B60VsF8d.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as L } from "./typography.D1OZJbEa.js";
+import { B as L } from "./typography.Cd386LC_.js";
 import { u as B } from "./use-country-items.CM_xQV9g.js";
 import { a as y } from "./country.types.BCOrkmVK.js";
-import { L as w } from "./listbox-option-tag.DhNxvqRO.js";
-import { B as j } from "./payment-method.DcAITDcK.js";
+import { L as w } from "./listbox-option-tag.Cp_W_p4z.js";
+import { B as j } from "./payment-method.meF6XN_X.js";
 import "../assets/dropdown-tag.css";
 const M = c({
   name: "bento-dropdown-avatar",
@@ -66,7 +66,7 @@ const ue = S.exports, C = c({
     /**
      * The option elements to populate the country dropdown with.
      * It must be an array of {@see BentoCountryListboxOptions }
-     * @deprecated Since v2.0.0. Use `BentoDropdown` instead.
+     * @deprecated Since v3.0.0. Use `BentoDropdown` instead.
      * @property {BentoCountryCode | string} value.value - Country code of the option
      */
     items: {
@@ -269,4 +269,4 @@ export {
   ue as d,
   fe as e
 };
-//# sourceMappingURL=dropdown-tag.Dk7SooVv.js.map
+//# sourceMappingURL=dropdown-tag.BmUNKoNw.js.map

package/dist/chunks/{dropdown-tag.Dk7SooVv.js.map → dropdown-tag.BmUNKoNw.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-tag.Dk7SooVv.js","sources":["../../src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n <bento-dropdown\n v-slot=\"{ label, data }\"\n v-bind=\"{ ...$props, ariaLabel: undefined }\"\n :aria-label=\"getAriaLabel($attrs)\"\n :items=\"dropdownItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <bento-avatar :username=\"label\" :src=\"data\" />\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, type PropType } from 'vue';\n import { isVue2 } from 'vue-demi';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n import { BentoAvatar } from '@/components/avatar';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /*\n @deprecated Since v3.0.0. Use `aria-label` instead.\n * Defines a string value that labels an interactive element.\n /\n ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n /\n The option elements to populate the avatar dropdown with.\n * It must be an array of {@see BentoAvatarListboxOptions }\n * @property {string} value.label - Text to be displayed in the option.\n * @property {string \| number} value.value - Value of the option.\n * @property {string} value.src - Image source of the avatar image.\n /\n items: {\n type: Array as PropType<BentoAvatarListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const getAriaLabel = (attributes: Record<string, unknown>) =>\n Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n ? attributes['aria-label']\n : (attributes.ariaLabel ?? props.ariaLabel);\n const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n</script>\n\n<script lang=\"ts\">\n /\n A Avatar Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownAvatar },\n * template: `\n * <bento-dropdown-avatar\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('user-id-1') // Default value\n * const options: BentoAvatarListboxOptions = [\n * { label: 'User 1', value: 'user-id-1' },\n * { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-avatar',\n inheritAttrs: false,\n model: { prop: 'modelValue', event: 'update:model-value' },\n });\n</script>\n","<template>\n <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n <bento-dropdown\n v-slot=\"{ label }\"\n v-bind=\"{ ...$props, ariaLabel: undefined }\"\n :aria-label=\"getAriaLabel($attrs)\"\n :items=\"countryItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <bento-typography el=\"span\">{{ label }}</bento-typography>\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType, toRefs } from 'vue';\n import { isVue2 } from 'vue-demi';\n import { type BentoCountryListboxOptions } from './dropdown-country.types';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { BentoTypography } from '@/components/typography';\n import { useCountryItems } from './composables/use-country-items';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { BentoCountryVariant } from '@/components/country';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n @deprecated Since v3.0.0. Use `aria-label` instead.\n * Defines a string value that labels an interactive element.\n /\n ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n /\n The option elements to populate the country dropdown with.\n * It must be an array of {@see BentoCountryListboxOptions }\n * @deprecated Since v2.0.0. Use `BentoDropdown` instead.\n * @property {BentoCountryCode \| string} value.value - Country code of the option\n /\n items: {\n type: Array as PropType<BentoCountryListboxOptions>,\n default: () => [],\n },\n\n /\n Which label variant to display.\n * @values iso, name, phone_code, capital\n /\n variant: {\n type: String as PropType<BentoCountryVariant \| `${BentoCountryVariant}`>,\n default: BentoCountryVariant.NAME,\n validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n },\n });\n\n const emit = defineEmits([\"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const getAriaLabel = (attributes: Record<string, unknown>) =>\n Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n ? attributes['aria-label']\n : (attributes.ariaLabel ?? props.ariaLabel);\n const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const { variant, items } = toRefs(props);\n const countryItems = useCountryItems(variant, items);\n</script>\n\n<script lang=\"ts\">\n /\n A Country Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdown },\n * template: `\n * <bento-dropdown-country\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(BentoCountryCode.NL) // Default value\n * const options: BentoCountryListboxOptions = [\n * { value: BentoCountryCode.NL },\n * { value: BentoCountryCode.BE },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'b-dropdown-country',\n inheritAttrs: false,\n model: { prop: 'modelValue', event: 'update:model-value' },\n });\n</script>\n","<template>\n <bento-dropdown\n v-slot=\"slotProps\"\n v-bind=\"{ ...getNonAriaLabelAttributes($attrs), ...$props, ariaLabel: undefined }\"\n :aria-label=\"getAriaLabel($attrs)\"\n :search=\"search\"\n :items=\"filteredItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <listbox-option-tag :option=\"slotProps\" />\n </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType, ref, watch } from 'vue';\n import { isVue2 } from 'vue-demi';\n import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n import type { BentoListboxSelectedValue } from '@/types/listbox';\n import { ListboxOptionTag } from '@/internal/listbox/';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n @deprecated Since v3.0.0. Use `aria-label` instead.\n * Defines a string value that labels an interactive element.\n /\n ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n /\n The option elements to populate the currency dropdown with.\n * It must be an array of {@see BentoCurrencyListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n /\n items: {\n type: Array as PropType<BentoCurrencyListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const getAriaLabel = (attributes: Record<string, unknown>) =>\n Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n ? attributes['aria-label']\n : (attributes.ariaLabel ?? props.ariaLabel);\n const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n watch(\n () => props.items,\n () => (filteredItems.value = props.items),\n { immediate: true }\n );\n\n const search = props.search\n ? props.search\n : {\n debounceTime: 500,\n searchEvent: async (searchTerm: string) => {\n // Combine value and label to be able to search by the currency code\n const searchableItems = props.items.map(item => ({\n ...item,\n label: `${item.value} ${item.label}`,\n }));\n\n const searchResults = useSearchBarFilter(\n ref(searchTerm),\n ref<BentoCurrencyListboxOptions>(searchableItems),\n props?.search?.searchEvent,\n ref(false)\n ).value;\n\n // Restore original labels by removing the prepended value\n const normalizedResults = searchResults?.map(result => ({\n ...result,\n label: result.label.substring(result.value.length + 1),\n }));\n\n filteredItems.value = normalizedResults;\n },\n };\n</script>\n\n<script lang=\"ts\">\n /\n A Currency Dropdown showing a selectable list of currencies.\n \n @example\n * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdown },\n * template: `\n * <bento-dropdown-currency\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(BentoCountryCode.NL) // Default value\n * const options: BentoCountryListboxOptions = [\n * { label: 'Option 1', value: BentoCountryCode.NL },\n * { label: 'Option 2', value: BentoCountryCode.BE },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'b-dropdown-currency',\n inheritAttrs: false,\n model: { prop: 'modelValue', event: 'update:model-value' },\n });\n</script>\n","<template>\n <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n <bento-dropdown\n class=\"b-dropdown-payment-method\"\n v-bind=\"{ ...$props, ariaLabel: undefined }\"\n :aria-label=\"getAriaLabel($attrs)\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <template #display-value=\"{ label, value }\">\n <bento-payment-method :type=\"value\" :label=\"label\" />\n </template>\n\n <template #default=\"{ value, label, description }\">\n <div class=\"b-dropdown-payment-method__item\">\n <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n <bento-typography el=\"span\">{{ label }}</bento-typography>\n <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n description\n }}</bento-typography>\n </div>\n </div>\n </template>\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType } from 'vue';\n import { isVue2 } from 'vue-demi';\n import { BentoPaymentMethod } from '@/components/payment-method';\n import { BentoTypography } from '@/components/typography';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n @deprecated Since v3.0.0. Use `aria-label` instead.\n * Defines a string value that labels an interactive element.\n /\n ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n /\n The option elements to populate the payment method dropdown with.\n * It must be an array of {@see BentoPaymentMethodListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n /\n items: {\n type: Array as PropType<BentoPaymentMethodListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const getAriaLabel = (attributes: Record<string, unknown>) =>\n Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n ? attributes['aria-label']\n : (attributes.ariaLabel ?? props.ariaLabel);\n const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n</script>\n\n<script lang=\"ts\">\n /\n A Payment method Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownPaymentMethod },\n * template: `\n * <bento-dropdown-payment-method\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 'Visa'\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('ideal') // Default value\n * const options: BentoPaymentMethodListboxOptions = [\n * { label: 'Option 1', value: 'ideal' },\n * { label: 'Option 2', value: 'visa' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-payment-method',\n inheritAttrs: false,\n model: { prop: 'modelValue', event: 'update:model-value' },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\n","<template>\n <bento-dropdown\n v-slot=\"{ label, data }\"\n v-bind=\"{ ...getNonAriaLabelAttributes($attrs), ...$props, ariaLabel: undefined }\"\n class=\"b-dropdown-tag\"\n :aria-label=\"getAriaLabel($attrs)\"\n :items=\"tagItems\"\n show-slot-content-in-multiple\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, type PropType } from 'vue';\n import { isVue2 } from 'vue-demi';\n import type { BentoTagListboxOptions } from './dropdown-tag.types';\n import type { BentoListboxSelectedValue } from '@/types/listbox';\n import { ListboxOptionTag } from '../../../../internal';\n import BentoDropdown from '../../../dropdown.vue';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n @deprecated Since v3.0.0. Use `aria-label` instead.\n * Defines a string value that labels an interactive element.\n /\n ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n /\n The option elements to populate the tag dropdown with.\n * It must be an array of {@see BentoTagListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string \| number} value.value - Value of the option\n * @property {string} value.variant - The BentTag variant shown for the option.\n /\n items: {\n type: Array as PropType<BentoTagListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const getAriaLabel = (attributes: Record<string, unknown>) =>\n Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n ? attributes['aria-label']\n : (attributes.ariaLabel ?? props.ariaLabel);\n const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n</script>\n\n<script lang=\"ts\">\n /\n A Tag Dropdown showing a selectable list of tags.\n \n @example\n * import { BentoDropdownTag } from '@adyen/bento-vue2';\n * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownTag },\n * template: `\n * <bento-dropdown-tag\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('unique-id-1') // Default value\n * const options: BentoTagListboxOptions = [\n * { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n * { label: 'Online', value: 'unique-id-2', variant: 'green' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n */\n export default defineComponent({\n name: 'bento-dropdown-tag',\n inheritAttrs: false,\n model: { prop: 'modelValue', event: 'update:model-value' },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","emitValue","useFormFieldEmits","emit","getAriaLabel","attributes","props","getNonAriaLabelAttributes","key","onUpdateModelValue","selectedValue","dropdownItems","computed","value","label","src","__default__$3","variant","items","toRefs","countryItems","useCountryItems","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","item","normalizedResults","useSearchBarFilter","result","__default__$1","__default__","tagItems"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown-tag.BmUNKoNw.js","sources":["../../src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n <bento-dropdown\n v-slot=\"{ label, data }\"\n v-bind=\"{ ...$props, ariaLabel: undefined }\"\n :aria-label=\"getAriaLabel($attrs)\"\n :items=\"dropdownItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <bento-avatar :username=\"label\" :src=\"data\" />\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, type PropType } from 'vue';\n import { isVue2 } from 'vue-demi';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n import { BentoAvatar } from '@/components/avatar';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /*\n @deprecated Since v3.0.0. Use `aria-label` instead.\n * Defines a string value that labels an interactive element.\n /\n ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n /\n The option elements to populate the avatar dropdown with.\n * It must be an array of {@see BentoAvatarListboxOptions }\n * @property {string} value.label - Text to be displayed in the option.\n * @property {string \| number} value.value - Value of the option.\n * @property {string} value.src - Image source of the avatar image.\n /\n items: {\n type: Array as PropType<BentoAvatarListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const getAriaLabel = (attributes: Record<string, unknown>) =>\n Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n ? attributes['aria-label']\n : (attributes.ariaLabel ?? props.ariaLabel);\n const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n</script>\n\n<script lang=\"ts\">\n /\n A Avatar Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownAvatar },\n * template: `\n * <bento-dropdown-avatar\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('user-id-1') // Default value\n * const options: BentoAvatarListboxOptions = [\n * { label: 'User 1', value: 'user-id-1' },\n * { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-avatar',\n inheritAttrs: false,\n model: { prop: 'modelValue', event: 'update:model-value' },\n });\n</script>\n","<template>\n <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n <bento-dropdown\n v-slot=\"{ label }\"\n v-bind=\"{ ...$props, ariaLabel: undefined }\"\n :aria-label=\"getAriaLabel($attrs)\"\n :items=\"countryItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <bento-typography el=\"span\">{{ label }}</bento-typography>\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType, toRefs } from 'vue';\n import { isVue2 } from 'vue-demi';\n import { type BentoCountryListboxOptions } from './dropdown-country.types';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { BentoTypography } from '@/components/typography';\n import { useCountryItems } from './composables/use-country-items';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { BentoCountryVariant } from '@/components/country';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n @deprecated Since v3.0.0. Use `aria-label` instead.\n * Defines a string value that labels an interactive element.\n /\n ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n /\n The option elements to populate the country dropdown with.\n * It must be an array of {@see BentoCountryListboxOptions }\n * @deprecated Since v3.0.0. Use `BentoDropdown` instead.\n * @property {BentoCountryCode \| string} value.value - Country code of the option\n /\n items: {\n type: Array as PropType<BentoCountryListboxOptions>,\n default: () => [],\n },\n\n /\n Which label variant to display.\n * @values iso, name, phone_code, capital\n /\n variant: {\n type: String as PropType<BentoCountryVariant \| `${BentoCountryVariant}`>,\n default: BentoCountryVariant.NAME,\n validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n },\n });\n\n const emit = defineEmits([\"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const getAriaLabel = (attributes: Record<string, unknown>) =>\n Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n ? attributes['aria-label']\n : (attributes.ariaLabel ?? props.ariaLabel);\n const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const { variant, items } = toRefs(props);\n const countryItems = useCountryItems(variant, items);\n</script>\n\n<script lang=\"ts\">\n /\n A Country Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdown },\n * template: `\n * <bento-dropdown-country\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(BentoCountryCode.NL) // Default value\n * const options: BentoCountryListboxOptions = [\n * { value: BentoCountryCode.NL },\n * { value: BentoCountryCode.BE },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'b-dropdown-country',\n inheritAttrs: false,\n model: { prop: 'modelValue', event: 'update:model-value' },\n });\n</script>\n","<template>\n <bento-dropdown\n v-slot=\"slotProps\"\n v-bind=\"{ ...getNonAriaLabelAttributes($attrs), ...$props, ariaLabel: undefined }\"\n :aria-label=\"getAriaLabel($attrs)\"\n :search=\"search\"\n :items=\"filteredItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <listbox-option-tag :option=\"slotProps\" />\n </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType, ref, watch } from 'vue';\n import { isVue2 } from 'vue-demi';\n import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n import type { BentoListboxSelectedValue } from '@/types/listbox';\n import { ListboxOptionTag } from '@/internal/listbox/';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n @deprecated Since v3.0.0. Use `aria-label` instead.\n * Defines a string value that labels an interactive element.\n /\n ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n /\n The option elements to populate the currency dropdown with.\n * It must be an array of {@see BentoCurrencyListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n /\n items: {\n type: Array as PropType<BentoCurrencyListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const getAriaLabel = (attributes: Record<string, unknown>) =>\n Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n ? attributes['aria-label']\n : (attributes.ariaLabel ?? props.ariaLabel);\n const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n watch(\n () => props.items,\n () => (filteredItems.value = props.items),\n { immediate: true }\n );\n\n const search = props.search\n ? props.search\n : {\n debounceTime: 500,\n searchEvent: async (searchTerm: string) => {\n // Combine value and label to be able to search by the currency code\n const searchableItems = props.items.map(item => ({\n ...item,\n label: `${item.value} ${item.label}`,\n }));\n\n const searchResults = useSearchBarFilter(\n ref(searchTerm),\n ref<BentoCurrencyListboxOptions>(searchableItems),\n props?.search?.searchEvent,\n ref(false)\n ).value;\n\n // Restore original labels by removing the prepended value\n const normalizedResults = searchResults?.map(result => ({\n ...result,\n label: result.label.substring(result.value.length + 1),\n }));\n\n filteredItems.value = normalizedResults;\n },\n };\n</script>\n\n<script lang=\"ts\">\n /\n A Currency Dropdown showing a selectable list of currencies.\n \n @example\n * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdown },\n * template: `\n * <bento-dropdown-currency\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(BentoCountryCode.NL) // Default value\n * const options: BentoCountryListboxOptions = [\n * { label: 'Option 1', value: BentoCountryCode.NL },\n * { label: 'Option 2', value: BentoCountryCode.BE },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'b-dropdown-currency',\n inheritAttrs: false,\n model: { prop: 'modelValue', event: 'update:model-value' },\n });\n</script>\n","<template>\n <div v-bind=\"getNonAriaLabelAttributes($attrs)\">\n <bento-dropdown\n class=\"b-dropdown-payment-method\"\n v-bind=\"{ ...$props, ariaLabel: undefined }\"\n :aria-label=\"getAriaLabel($attrs)\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <template #display-value=\"{ label, value }\">\n <bento-payment-method :type=\"value\" :label=\"label\" />\n </template>\n\n <template #default=\"{ value, label, description }\">\n <div class=\"b-dropdown-payment-method__item\">\n <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n <bento-typography el=\"span\">{{ label }}</bento-typography>\n <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n description\n }}</bento-typography>\n </div>\n </div>\n </template>\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType } from 'vue';\n import { isVue2 } from 'vue-demi';\n import { BentoPaymentMethod } from '@/components/payment-method';\n import { BentoTypography } from '@/components/typography';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n @deprecated Since v3.0.0. Use `aria-label` instead.\n * Defines a string value that labels an interactive element.\n /\n ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n /\n The option elements to populate the payment method dropdown with.\n * It must be an array of {@see BentoPaymentMethodListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n /\n items: {\n type: Array as PropType<BentoPaymentMethodListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const getAriaLabel = (attributes: Record<string, unknown>) =>\n Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n ? attributes['aria-label']\n : (attributes.ariaLabel ?? props.ariaLabel);\n const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n</script>\n\n<script lang=\"ts\">\n /\n A Payment method Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownPaymentMethod },\n * template: `\n * <bento-dropdown-payment-method\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 'Visa'\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('ideal') // Default value\n * const options: BentoPaymentMethodListboxOptions = [\n * { label: 'Option 1', value: 'ideal' },\n * { label: 'Option 2', value: 'visa' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-payment-method',\n inheritAttrs: false,\n model: { prop: 'modelValue', event: 'update:model-value' },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\n","<template>\n <bento-dropdown\n v-slot=\"{ label, data }\"\n v-bind=\"{ ...getNonAriaLabelAttributes($attrs), ...$props, ariaLabel: undefined }\"\n class=\"b-dropdown-tag\"\n :aria-label=\"getAriaLabel($attrs)\"\n :items=\"tagItems\"\n show-slot-content-in-multiple\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, type PropType } from 'vue';\n import { isVue2 } from 'vue-demi';\n import type { BentoTagListboxOptions } from './dropdown-tag.types';\n import type { BentoListboxSelectedValue } from '@/types/listbox';\n import { ListboxOptionTag } from '../../../../internal';\n import BentoDropdown from '../../../dropdown.vue';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n @deprecated Since v3.0.0. Use `aria-label` instead.\n * Defines a string value that labels an interactive element.\n /\n ...(isVue2 ? { ariaLabel: { type: String, default: null } } : {}),\n /\n The option elements to populate the tag dropdown with.\n * It must be an array of {@see BentoTagListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string \| number} value.value - Value of the option\n * @property {string} value.variant - The BentTag variant shown for the option.\n /\n items: {\n type: Array as PropType<BentoTagListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const getAriaLabel = (attributes: Record<string, unknown>) =>\n Object.prototype.hasOwnProperty.call(attributes, 'aria-label')\n ? attributes['aria-label']\n : (attributes.ariaLabel ?? props.ariaLabel);\n const getNonAriaLabelAttributes = (attributes: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== 'aria-label' && key !== 'ariaLabel'));\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n</script>\n\n<script lang=\"ts\">\n /\n A Tag Dropdown showing a selectable list of tags.\n \n @example\n * import { BentoDropdownTag } from '@adyen/bento-vue2';\n * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownTag },\n * template: `\n * <bento-dropdown-tag\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('unique-id-1') // Default value\n * const options: BentoTagListboxOptions = [\n * { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n * { label: 'Online', value: 'unique-id-2', variant: 'green' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n */\n export default defineComponent({\n name: 'bento-dropdown-tag',\n inheritAttrs: false,\n model: { prop: 'modelValue', event: 'update:model-value' },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","emitValue","useFormFieldEmits","emit","getAriaLabel","attributes","props","getNonAriaLabelAttributes","key","onUpdateModelValue","selectedValue","dropdownItems","computed","value","label","src","__default__$3","variant","items","toRefs","countryItems","useCountryItems","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","item","normalizedResults","useSearchBarFilter","result","__default__$1","__default__","tagItems"],"mappings":"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"}

package/dist/chunks/{dropdown.Bnq4kP7k.js → dropdown.CpZQYisR.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { computed as n, ref as x, onMounted as ut, onUnmounted as dt, watch as Q, defineComponent as V, getCurrentInstance as Me, nextTick as Z, toRef as H, useSlots as Se, useAttrs as ze, toRefs as pt, inject as Ge } from "vue";
-import { B as ue } from "./typography.D1OZJbEa.js";
+import { B as ue } from "./typography.Cd386LC_.js";
 import { g as ce } from "./generate-uid.DBWe4g6T.js";
 import { u as de } from "./index.CPOlyau9.js";
 import { s as be } from "./events.BQOQSSb7.js";
@@ -14,16 +14,16 @@ import { u as vt } from "./form-field.B60VsF8d.js";
 import { u as mt } from "./use-form-layout-loading.CWbjZiwP.js";
 import { B as U, a as Ne } from "./keyboard-navigation.DWmhelVv.js";
 import { B as Ze } from "./loading-indicator.PxbRzshH.js";
-import { B as Qe } from "./empty-state.C2wjdE3y.js";
+import { B as Qe } from "./empty-state.L3DTfiY7.js";
 import { o as _t } from "./resize.Bqks3WUm.js";
 import "./index.Cl4_42j5.js";
 import { B as Be, N as yt } from "./minus-small.CAycYt5H.js";
 import { C as gt } from "./checkmark-small.BlvuuCsU.js";
-import { B as ht } from "./chip.DRsJylWl.js";
-import { b as Re, a as St, h as xt, e as Ct } from "./button-actions.bkcLUE1G.js";
+import { B as ht } from "./chip.Cc4f2vws.js";
+import { b as Re, a as St, h as xt, e as Ct } from "./button-actions.CdetBz3J.js";
 import { B as It } from "./directive.D1-d-C2K.js";
-import { F as Ot } from "./field-label.C7BCsofY.js";
-import { E as Lt } from "./error-message.DKnoUezI.js";
+import { F as Ot } from "./field-label.BQaDr37D.js";
+import { E as Lt } from "./error-message.B-n8wzFo.js";
 import { P as Ye } from "./popper-container.Cj3AWXSd.js";
 import "../assets/dropdown.css";
 const et = (a, e, l, t) => {
@@ -2430,7 +2430,7 @@ const Ba = {
   "zh-CN": { all: "全部", ariaLabelFallback: "下拉菜单", clearSearch: "清除筛选器" }
 }, Ra = V({
   i18n: { messages: Ba },
-  name: "b-dropdown",
+  name: "bento-dropdown",
   components: {
     DropdownInputDefault: da,
     DropdownInputSmall: Ea
@@ -2626,7 +2626,7 @@ var Na = function() {
   $a,
   !1,
   null,
-  "8185a0b2"
+  "041b1436"
 );
 const ps = Pa.exports;
 export {
@@ -2645,4 +2645,4 @@ export {
   We as j,
   Wl as u
 };
-//# sourceMappingURL=dropdown.Bnq4kP7k.js.map
+//# sourceMappingURL=dropdown.CpZQYisR.js.map