@adyen/bento-vue3 1.84.2 → 1.86.0

package/dist/draggable-handle.js

@@ -0,0 +1,179 @@
+import { openBlock as s, createElementBlock as d, mergeProps as f, toDisplayString as g, createCommentVNode as w, createElementVNode as l, defineComponent as M, computed as p, createBlock as T, unref as v, withCtx as $, createVNode as B } from "vue";
+import { f as x } from "./chunks/button-actions.BH-J7dux.js";
+import { u as D } from "./chunks/index.B875RXHM.js";
+import { G as R } from "./chunks/grab.DJYL4kBq.js";
+/* empty css                     */
+import { _ as m } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import { A as I } from "./chunks/arrow-left.C6UiqO-c.js";
+import { A } from "./chunks/arrow-right.fSdLV_ho.js";
+import "./assets/draggable-handle.css";
+let u = 0;
+const C = {
+  beforeCreate() {
+    this.uuid = u.toString(), u += 1;
+  }
+}, U = { key: 0 };
+function k(t, n, a, e, r, i) {
+  return s(), d("svg", f({ role: "img" }, t.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    t.$attrs["svg-title"] ? (s(), d("title", U, g(t.$attrs["svg-title"]), 1)) : w("", !0),
+    n[0] || (n[0] = l("path", {
+      fill: "#001222",
+      d: "M8.75023 3.81089L13.0001 8.06077L14.0608 7.00011L8.00011 0.939453L1.93945 7.00011L3.00011 8.06077L7.25023 3.81066V14.7502H8.75023V3.81089Z"
+    }, null, -1))
+  ], 16);
+}
+const c = /* @__PURE__ */ m(C, [["render", k]]);
+let b = 0;
+const y = {
+  beforeCreate() {
+    this.uuid = b.toString(), b += 1;
+  }
+}, S = { key: 0 };
+function V(t, n, a, e, r, i) {
+  return s(), d("svg", f({ role: "img" }, t.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    t.$attrs["svg-title"] ? (s(), d("title", S, g(t.$attrs["svg-title"]), 1)) : w("", !0),
+    n[0] || (n[0] = l("path", {
+      fill: "#001222",
+      d: "M7.25434 12.1937L3.00011 7.93952L1.93945 9.00018L8.00011 15.0608L14.0608 9.00018L13.0001 7.93952L8.75433 12.1853L8.74316 1.24951L7.24316 1.25104L7.25434 12.1937Z"
+    }, null, -1))
+  ], 16);
+}
+const h = /* @__PURE__ */ m(y, [["render", V]]), L = {
+  "en-US": {
+    moveDown: "Move down",
+    moveLeft: "Move left",
+    moveRight: "Move right",
+    moveToTheBottom: "Move to the bottom",
+    moveToTheTop: "Move to the top",
+    moveUp: "Move up",
+    reorderLabel: "Reorder {label}"
+  },
+  "ja-JP": {
+    moveDown: "下に移動",
+    moveLeft: "左に移動",
+    moveRight: "右に移動",
+    moveToTheBottom: "一番下に移動",
+    moveToTheTop: "一番上に移動",
+    moveUp: "上に移動",
+    reorderLabel: "{label}を並べ替え"
+  },
+  "pt-BR": {
+    moveDown: "Mover para baixo",
+    moveLeft: "Mover para a esquerda",
+    moveRight: "Mover para a direita",
+    moveToTheBottom: "Mover para embaixo",
+    moveToTheTop: "Mover para o topo",
+    moveUp: "Mover para cima",
+    reorderLabel: "Reordenar {label}"
+  }
+}, N = { class: "b-draggable-handle__icon" }, E = {
+  i18n: { messages: L },
+  name: "bento-draggable-handle"
+}, H = /* @__PURE__ */ M({
+  ...E,
+  props: {
+    condensed: { type: Boolean, default: !1 },
+    disabledMenus: { default: () => ({}) },
+    label: {},
+    variant: { default: "up-and-down" }
+  },
+  emits: ["move-bottom", "move-down", "move-left", "move-right", "move-top", "move-up"],
+  setup(t, { emit: n }) {
+    const { t: a } = D({ messages: L }), e = t, r = n, i = p(
+      () => ({
+        "aria-label": a("reorderLabel", { label: e.label }),
+        condensed: e.condensed,
+        variant: "tertiary"
+      })
+    ), _ = p(() => {
+      const o = {
+        up: {
+          text: a("moveUp"),
+          handler: () => r("move-up"),
+          disabled: e.disabledMenus.up,
+          icon: c
+        },
+        down: {
+          text: a("moveDown"),
+          handler: () => r("move-down"),
+          disabled: e.disabledMenus.down,
+          icon: h
+        },
+        left: {
+          text: a("moveLeft"),
+          handler: () => r("move-left"),
+          disabled: e.disabledMenus.left,
+          icon: I
+        },
+        right: {
+          text: a("moveRight"),
+          handler: () => r("move-right"),
+          disabled: e.disabledMenus.right,
+          icon: A
+        },
+        top: {
+          text: a("moveToTheTop"),
+          handler: () => r("move-top"),
+          disabled: e.disabledMenus.top,
+          icon: c
+        },
+        bottom: {
+          text: a("moveToTheBottom"),
+          handler: () => r("move-bottom"),
+          disabled: e.disabledMenus.bottom,
+          icon: h
+        }
+      };
+      return e.variant === "up-and-down" ? [
+        o.up,
+        // Divider added after "Move down"
+        {
+          ...o.down,
+          addDivider: !0
+        },
+        o.top,
+        o.bottom
+      ] : [
+        o.up,
+        o.down,
+        o.left,
+        // Divider added after "Move right"
+        {
+          ...o.right,
+          addDivider: !0
+        },
+        o.top,
+        o.bottom
+      ];
+    });
+    return (o, P) => (s(), T(v(x), {
+      class: "b-draggable-handle",
+      data: _.value,
+      "menu-width": 250,
+      button: i.value
+    }, {
+      iconLeft: $(() => [
+        l("span", N, [
+          B(v(R), { "aria-hidden": "true" })
+        ])
+      ]),
+      _: 1
+    }, 8, ["data", "button"]));
+  }
+}), O = /* @__PURE__ */ m(H, [["__scopeId", "data-v-5e65c9c5"]]);
+export {
+  O as BentoDraggableHandle
+};
+//# sourceMappingURL=draggable-handle.js.map

package/dist/draggable-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable-handle.js","sources":["../../ui-assets/icons-16/dist/vue/arrow-top.vue","../../ui-assets/icons-16/dist/vue/arrow-bottom.vue","../../vue2/src/components/draggable-handle/draggable-handle.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M8.75023 3.81089L13.0001 8.06077L14.0608 7.00011L8.00011 0.939453L1.93945 7.00011L3.00011 8.06077L7.25023 3.81066V14.7502H8.75023V3.81089Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M7.25434 12.1937L3.00011 7.93952L1.93945 9.00018L8.00011 15.0608L14.0608 9.00018L13.0001 7.93952L8.75433 12.1853L8.74316 1.24951L7.24316 1.25104L7.25434 12.1937Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <bento-menu class=\"b-draggable-handle\" :data=\"menuData\" :menu-width=\"250\" :button=\"buttonComputedProps\">\n        <template #iconLeft>\n            <span class=\"b-draggable-handle__icon\">\n                <grab-icon aria-hidden=\"true\" />\n            </span>\n        </template>\n    </bento-menu>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoMenu, type BentoMenuItem, type BentoMenuProps } from '@/components/menu';\n    import { type BentoDraggableHandleProps } from './draggable-handle.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import GrabIcon from '@adyen/ui-assets-icons-16/vue/grab';\n    import ArrowTopIcon from '@adyen/ui-assets-icons-16/vue/arrow-top';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n    import ArrowRightIcon from '@adyen/ui-assets-icons-16/vue/arrow-right';\n    import ArrowBottomIcon from '@adyen/ui-assets-icons-16/vue/arrow-bottom';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = withDefaults(defineProps<BentoDraggableHandleProps>(), {\n        condensed: false,\n        disabledMenus: () => ({}),\n        variant: 'up-and-down',\n    });\n    const emit = defineEmits<{\n        /**\n         * Emitted when the \"Move to bottom\" action is fired.\n         */\n        (e: 'move-bottom'): void;\n        /**\n         * Emitted when the \"Move down\" action is fired.\n         */\n        (e: 'move-down'): void;\n        /**\n         * Emitted when the \"Move left\" action is fired. (Only in `all-directions` variant)\n         */\n        (e: 'move-left'): void;\n        /**\n         * Emitted when the \"Move right\" action is fired. (Only in `all-directions` variant)\n         */\n        (e: 'move-right'): void;\n        /**\n         * Emitted when the \"Move to top\" action is fired.\n         */\n        (e: 'move-top'): void;\n        /**\n         * Emitted when the \"Move up\" action is fired.\n         */\n        (e: 'move-up'): void;\n    }>();\n\n    const buttonComputedProps = computed(\n        () =>\n            ({\n                'aria-label': t('reorderLabel', { label: props.label }),\n                condensed: props.condensed,\n                variant: 'tertiary',\n            }) as BentoMenuProps['button']\n    );\n\n    /**\n     * Renders the menus for the draggable handle.\n     */\n    const menuData = computed(() => {\n        const MENUS: {\n            [key: string]: BentoMenuItem;\n        } = {\n            up: {\n                text: t('moveUp'),\n                handler: () => emit('move-up'),\n                disabled: props.disabledMenus.up,\n                icon: ArrowTopIcon,\n            },\n            down: {\n                text: t('moveDown'),\n                handler: () => emit('move-down'),\n                disabled: props.disabledMenus.down,\n                icon: ArrowBottomIcon,\n            },\n            left: {\n                text: t('moveLeft'),\n                handler: () => emit('move-left'),\n                disabled: props.disabledMenus.left,\n                icon: ArrowLeftIcon,\n            },\n            right: {\n                text: t('moveRight'),\n                handler: () => emit('move-right'),\n                disabled: props.disabledMenus.right,\n                icon: ArrowRightIcon,\n            },\n            top: {\n                text: t('moveToTheTop'),\n                handler: () => emit('move-top'),\n                disabled: props.disabledMenus.top,\n                icon: ArrowTopIcon,\n            },\n            bottom: {\n                text: t('moveToTheBottom'),\n                handler: () => emit('move-bottom'),\n                disabled: props.disabledMenus.bottom,\n                icon: ArrowBottomIcon,\n            },\n        };\n\n        // Render the menus and dividers according to the variant\n        return props.variant === 'up-and-down'\n            ? [\n                  MENUS.up,\n                  // Divider added after \"Move down\"\n                  {\n                      ...MENUS.down,\n                      addDivider: true,\n                  },\n                  MENUS.top,\n                  MENUS.bottom,\n              ]\n            : [\n                  MENUS.up,\n                  MENUS.down,\n                  MENUS.left,\n                  // Divider added after \"Move right\"\n                  {\n                      ...MENUS.right,\n                      addDivider: true,\n                  },\n                  MENUS.top,\n                  MENUS.bottom,\n              ];\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Bento drag and drop handle component.\n     *\n     * @example\n     * import { BentoDraggableHandle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDraggableHandle },\n     *     template: `\n     *          <bento-draggable-handle\n     *              bottom\n     *              condensed\n     *              down\n     *              left\n     *              right\n     *              top\n     *              up\n     *              \\@move-bottom=\"moveBottom(index)\"\n     *              \\@move-down=\"moveDown(index)\"\n     *              \\@move-left=\"moveLeft(index)\"\n     *              \\@move-right=\"moveRight(index)\"\n     *              \\@move-top=\"moveTop(index)\"\n     *              \\@move-up=\"moveUp(index)\"\n     *          />\n     *     `,\n     *     setup() {\n     *          const moveBottom = () => {}\n     *          const moveDown = () => {}\n     *          const moveLeft = () => {}\n     *          const moveRight = () => {}\n     *          const moveTop = () => {}\n     *          const moveUp = () => {}\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-draggable-handle',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./draggable-handle.scss\" />\n"],"names":["uuid$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","uuid","__default__","messages","t","useI18n","props","__props","emit","__emit","buttonComputedProps","computed","menuData","MENUS","ArrowTopIcon","ArrowBottomIcon","ArrowLeftIcon","ArrowRightIcon"],"mappings":";;;;;;;;;AAOI,IAAAA,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AAVR,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;;;ACKzN,IAAAC,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AAVR,SAAAL,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CC6KzNE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;AA1JA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAG,IAAAC,GAKAC,IAAAC,GA2BAC,IAAAC;AAAA,MAA4B,OAAA;AAAA,QAEnB,cAAAP,EAAA,gBAAA,EAAA,OAAAE,EAAA,MAAA,CAAA;AAAA,QACyD,WAAAA,EAAA;AAAA,QACrC,SAAA;AAAA,MACR;AAAA,IACb,GAMRM,IAAAD,EAAA,MAAA;AACI,YAAAE,IAAA;AAAA,QAEI,IAAA;AAAA,UACI,MAAAT,EAAA,QAAA;AAAA,UACgB,SAAA,MAAAI,EAAA,SAAA;AAAA,UACa,UAAAF,EAAA,cAAA;AAAA,UACC,MAAAQ;AAAA,QACxB;AAAA,QACV,MAAA;AAAA,UACM,MAAAV,EAAA,UAAA;AAAA,UACgB,SAAA,MAAAI,EAAA,WAAA;AAAA,UACa,UAAAF,EAAA,cAAA;AAAA,UACD,MAAAS;AAAA,QACxB;AAAA,QACV,MAAA;AAAA,UACM,MAAAX,EAAA,UAAA;AAAA,UACgB,SAAA,MAAAI,EAAA,WAAA;AAAA,UACa,UAAAF,EAAA,cAAA;AAAA,UACD,MAAAU;AAAA,QACxB;AAAA,QACV,OAAA;AAAA,UACO,MAAAZ,EAAA,WAAA;AAAA,UACgB,SAAA,MAAAI,EAAA,YAAA;AAAA,UACa,UAAAF,EAAA,cAAA;AAAA,UACF,MAAAW;AAAA,QACxB;AAAA,QACV,KAAA;AAAA,UACK,MAAAb,EAAA,cAAA;AAAA,UACqB,SAAA,MAAAI,EAAA,UAAA;AAAA,UACQ,UAAAF,EAAA,cAAA;AAAA,UACA,MAAAQ;AAAA,QACxB;AAAA,QACV,QAAA;AAAA,UACQ,MAAAV,EAAA,iBAAA;AAAA,UACqB,SAAA,MAAAI,EAAA,aAAA;AAAA,UACQ,UAAAF,EAAA,cAAA;AAAA,UACH,MAAAS;AAAA,QACxB;AAAA,MACV;AAIJ,aAAAT,EAAA,YAAA,gBAAA;AAAA,QACMO,EAAA;AAAA;AAAA,QACU;AAAA,UAEN,GAAAA,EAAA;AAAA,UACa,YAAA;AAAA,QACG;AAAA,QAChBA,EAAA;AAAA,QACMA,EAAA;AAAA,MACA,IAAA;AAAA,QAEVA,EAAA;AAAA,QACUA,EAAA;AAAA,QACAA,EAAA;AAAA;AAAA,QACA;AAAA,UAEN,GAAAA,EAAA;AAAA,UACa,YAAA;AAAA,QACG;AAAA,QAChBA,EAAA;AAAA,QACMA,EAAA;AAAA,MACA;AAAA,IACV,CAAA;;;;;;;;;;;;;;;;"}

package/dist/dropdown.js

@@ -1,7 +1,7 @@
-import { B as r } from "./chunks/dropdown.Dct8gr_q.js";
-import { B as t } from "./chunks/dropdown-default-textbox.DFtFMu5G.js";
-import { _ as p, a as d, b as B, d as s, c as w } from "./chunks/dropdown-tag.Bf6TiNZw.js";
-import { a as m, B as y } from "./chunks/use-cached-selected-values.BZIa5TRx.js";
+import { B as r } from "./chunks/dropdown.CU6nfq3V.js";
+import { B as t } from "./chunks/dropdown-default-textbox.B-_dTUVX.js";
+import { _ as p, a as d, b as B, d as s, c as w } from "./chunks/dropdown-tag.DDNOZhEG.js";
+import { B as m, a as y } from "./chunks/use-cached-selected-values.BiSuG1eX.js";
 export {
   r as BentoDropdown,
   p as BentoDropdownAvatar,

package/dist/empty-state.js

@@ -1,4 +1,4 @@
-import { B as e, b as m, c as n, a as o } from "./chunks/empty-state.D_ifpeU-.js";
+import { B as e, a as m, b as n, c as o } from "./chunks/empty-state.DqdPzU-g.js";
 export {
   e as BentoEmptyState,
   m as BentoEmptyStateImage,

package/dist/file-uploader.js

@@ -1,4 +1,4 @@
-import { f as r } from "./chunks/file-uploader.BmBKLzIx.js";
+import { f as r } from "./chunks/file-uploader.Q2ufNRTY.js";
 export {
   r as BentoFileUploader
 };

package/dist/filter-bar.js

@@ -1,4 +1,4 @@
-import { a, B as r, c as B, b as n, d as o } from "./chunks/filter-bar.DHRuvmx9.js";
+import { B as a, a as r, b as B, c as n, d as o } from "./chunks/filter-bar.BVj9YVv-.js";
 export {
   a as BentoBaseFilter,
   r as BentoFilterBar,

package/dist/focus-trap.js

@@ -1,4 +1,4 @@
-import { B as a } from "./chunks/focus-trap.BaHvK7aT.js";
+import { B as a } from "./chunks/focus-trap.CBvh2H_m.js";
 export {
   a as BentoFocusTrap
 };

package/dist/form-layout.js

@@ -1,4 +1,4 @@
-import { f as a, a as e, c as r, b as m } from "./chunks/form-layout-title.CPsEzRzS.js";
+import { f as a, a as e, b as r, c as m } from "./chunks/form-layout-title.DYmTc6M7.js";
 export {
   a as BentoFormLayout,
   e as BentoFormLayoutFieldTip,

package/dist/header-with-views.js

@@ -1,4 +1,4 @@
-import { h as r } from "./chunks/header-with-views.XzJCg2Ln.js";
+import { h as r } from "./chunks/header-with-views.CJDoE4hw.js";
 export {
   r as BentoHeaderWithViews
 };

package/dist/header.js

@@ -1,4 +1,4 @@
-import { B as r } from "./chunks/header.yMTOq8MR.js";
+import { B as r } from "./chunks/header.BeH8KH_l.js";
 export {
   r as BentoHeader
 };

package/dist/image.js

@@ -1,4 +1,4 @@
-import { _ as t, B as o, a as m } from "./chunks/image.vue_vue_type_script_setup_true_lang.DQT2oNEF.js";
+import { _ as t, B as o, a as m } from "./chunks/image.vue_vue_type_script_setup_true_lang.BMoSMeM-.js";
 export {
   t as BentoImage,
   o as BentoImageAspectRatio,