@adyen/bento-vue3 1.44.0 → 1.45.0

package/dist/chunks/image.vue_vue_type_script_setup_true_lang.DQT2oNEF.js

@@ -0,0 +1,47 @@
+import { defineComponent as u, computed as e, createElementBlock as n, openBlock as t, normalizeStyle as d } from "vue";
+var l = /* @__PURE__ */ ((r) => (r.LANDSCAPE = "landscape", r.P4_3 = "4:3", r.P3_3 = "3:3", r.P16_9 = "16:9", r.P2_1 = "2:1", r.PORTRAIT = "portrait", r.P3_4 = "3:4", r.P2_3 = "2:3", r.P9_16 = "9:16", r.P1_2 = "1:2", r.SQUARE = "square", r.P1_1 = "1:1", r))(l || {}), f = /* @__PURE__ */ ((r) => (r.COVER = "cover", r.FILL = "fill", r.CONTAIN = "contain", r))(f || {});
+const o = ["src", "alt"], p = {
+  name: "bento-image"
+}, i = /* @__PURE__ */ u({
+  ...p,
+  props: {
+    src: {},
+    alt: {},
+    aspectRatio: { default: null },
+    objectFit: { default: null }
+  },
+  setup(r) {
+    const c = r, a = (s) => {
+      let _ = l.P16_9;
+      switch (s) {
+        case l.LANDSCAPE:
+          _ = l.P16_9;
+          break;
+        case l.PORTRAIT:
+          _ = l.P3_4;
+          break;
+        case l.SQUARE:
+          _ = l.P1_1;
+          break;
+        default:
+          _ = s;
+          break;
+      }
+      return `${_}`.replace(":", "/");
+    }, P = e(() => ({
+      aspectRatio: a(c.aspectRatio),
+      objectFit: c.objectFit
+    }));
+    return (s, _) => (t(), n("img", {
+      src: s.src,
+      alt: s.alt,
+      style: d(P.value)
+    }, null, 12, o));
+  }
+});
+export {
+  l as B,
+  i as _,
+  f as a
+};
+//# sourceMappingURL=image.vue_vue_type_script_setup_true_lang.DQT2oNEF.js.map

package/dist/chunks/image.vue_vue_type_script_setup_true_lang.DQT2oNEF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.vue_vue_type_script_setup_true_lang.DQT2oNEF.js","sources":["../../../core/src/components/image/image.types.ts","../../../vue2/src/components/image/image.vue"],"sourcesContent":["export enum BentoImageAspectRatio {\n    LANDSCAPE = 'landscape',\n    P4_3 = '4:3',\n    P3_3 = '3:3',\n    P16_9 = '16:9',\n    P2_1 = '2:1',\n    PORTRAIT = 'portrait',\n    P3_4 = '3:4',\n    P2_3 = '2:3',\n    P9_16 = '9:16',\n    P1_2 = '1:2',\n    SQUARE = 'square',\n    P1_1 = '1:1',\n}\n\nexport enum BentoImageObjectFit {\n    COVER = 'cover',\n    FILL = 'fill',\n    CONTAIN = 'contain',\n}\n\nexport interface BentoImageProps {\n    /** Url to image, same as src attribute of `<img>` tag */\n    src: string;\n\n    /** Accessible text describing the image, same as alt attribute of `<img>` tag */\n    alt: string;\n\n    /** Aspect ratio of the image, maps to css aspect-ratio */\n    aspectRatio?: BentoImageAspectRatio | `${BentoImageAspectRatio}` | null;\n\n    /** Object fitting strategy, maps to css object-fit */\n    objectFit?: BentoImageObjectFit | `${BentoImageObjectFit}` | null;\n}\n","<template>\n    <img :src=\"src\" :alt=\"alt\" :style=\"imageStyles\" />\n</template>\n<script lang=\"ts\" setup>\n    import { computed } from 'vue';\n    import { BentoImageAspectRatio, BentoImageProps } from '@adyen/bento-core/src/components/image/image.types';\n\n    const props = withDefaults(defineProps<BentoImageProps>(), {\n        aspectRatio: null,\n        objectFit: null,\n    });\n\n    const convertAspectRatio = (aspectRatio: BentoImageAspectRatio | `${BentoImageAspectRatio}`) => {\n        let parsedAspectRatio: BentoImageAspectRatio | `${BentoImageAspectRatio}` = BentoImageAspectRatio.P16_9;\n        switch (aspectRatio) {\n            case BentoImageAspectRatio.LANDSCAPE:\n                parsedAspectRatio = BentoImageAspectRatio.P16_9;\n                break;\n            case BentoImageAspectRatio.PORTRAIT:\n                parsedAspectRatio = BentoImageAspectRatio.P3_4;\n                break;\n            case BentoImageAspectRatio.SQUARE:\n                parsedAspectRatio = BentoImageAspectRatio.P1_1;\n                break;\n            default:\n                parsedAspectRatio = aspectRatio;\n                break;\n        }\n        return `${parsedAspectRatio}`.replace(':', '/');\n    };\n\n    const imageStyles = computed(() => ({\n        aspectRatio: convertAspectRatio(props.aspectRatio),\n        objectFit: props.objectFit,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Image component used for resizing images to certain aspect ratios and fit strategies.\n     *\n     * @example\n     * import { BentoImage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoImage },\n     *     template: `\n     *       <bento-image\n     *           :src=\"imageSrc\"\n     *           alt=\"alternative text\"\n     *           aspect-ratio=\"landscape\"\n     *           object-fit=\"cover\"\n     *\n     *       />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-image',\n    };\n</script>\n"],"names":["BentoImageAspectRatio","BentoImageObjectFit","__default__","props","__props","convertAspectRatio","aspectRatio","parsedAspectRatio","imageStyles","computed"],"mappings":";AAAY,IAAAA,sBAAAA,OACRA,EAAA,YAAY,aACZA,EAAA,OAAO,OACPA,EAAA,OAAO,OACPA,EAAA,QAAQ,QACRA,EAAA,OAAO,OACPA,EAAA,WAAW,YACXA,EAAA,OAAO,OACPA,EAAA,OAAO,OACPA,EAAA,QAAQ,QACRA,EAAA,OAAO,OACPA,EAAA,SAAS,UACTA,EAAA,OAAO,OAZCA,IAAAA,KAAA,CAAA,CAAA,GAeAC,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,UAAU,WAHFA,IAAAA,KAAA,CAAA,CAAA;0BC0COC,IAAA;AAAA,EACX,MAAM;AACV;;;;;;;;;AApDA,UAAMC,IAAQC,GAKRC,IAAqB,CAACC,MAAoE;AAC5F,UAAIC,IAAwEP,EAAsB;AAClG,cAAQM,GAAa;AAAA,QACjB,KAAKN,EAAsB;AACvB,UAAAO,IAAoBP,EAAsB;AAC1C;AAAA,QACJ,KAAKA,EAAsB;AACvB,UAAAO,IAAoBP,EAAsB;AAC1C;AAAA,QACJ,KAAKA,EAAsB;AACvB,UAAAO,IAAoBP,EAAsB;AAC1C;AAAA,QACJ;AACwB,UAAAO,IAAAD;AACpB;AAAA,MAAA;AAER,aAAO,GAAGC,CAAiB,GAAG,QAAQ,KAAK,GAAG;AAAA,IAClD,GAEMC,IAAcC,EAAS,OAAO;AAAA,MAChC,aAAaJ,EAAmBF,EAAM,WAAW;AAAA,MACjD,WAAWA,EAAM;AAAA,IAAA,EACnB;;;;;;;;"}

package/dist/chunks/index.BMkVmbZj.js

@@ -0,0 +1,367 @@
+import { onMounted as A, nextTick as M, watch as O, unref as $, getCurrentScope as I, onScopeDispose as R, getCurrentInstance as N, ref as m, computed as v, watchEffect as F } from "vue";
+function x(t) {
+  return I() ? (R(t), !0) : !1;
+}
+function b(t) {
+  return typeof t == "function" ? t() : $(t);
+}
+const L = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const j = (t) => t != null, C = Object.prototype.toString, B = (t) => C.call(t) === "[object Object]", W = () => {
+};
+function P(t, e) {
+  function n(...u) {
+    return new Promise((s, i) => {
+      Promise.resolve(t(() => e.apply(this, u), { fn: e, thisArg: this, args: u })).then(s).catch(i);
+    });
+  }
+  return n;
+}
+const z = (t) => t();
+function V(t, e = {}) {
+  let n, u, s = W;
+  const i = (c) => {
+    clearTimeout(c), s(), s = W;
+  };
+  return (c) => {
+    const f = b(t), d = b(e.maxWait);
+    return n && i(n), f <= 0 || d !== void 0 && d <= 0 ? (u && (i(u), u = null), Promise.resolve(c())) : new Promise((r, o) => {
+      s = e.rejectOnCancel ? o : r, d && !u && (u = setTimeout(() => {
+        n && i(n), u = null, r(c());
+      }, d)), n = setTimeout(() => {
+        u && i(u), u = null, r(c());
+      }, f);
+    });
+  };
+}
+function H(t, e) {
+  var n;
+  if (typeof t == "number")
+    return t + e;
+  const u = ((n = t.match(/^-?\d+\.?\d*/)) == null ? void 0 : n[0]) || "", s = t.slice(u.length), i = Number.parseFloat(u) + e;
+  return Number.isNaN(i) ? t : i + s;
+}
+function D(t) {
+  return N();
+}
+function G(t, e, n = {}) {
+  const {
+    eventFilter: u = z,
+    ...s
+  } = n;
+  return O(
+    t,
+    P(
+      u,
+      e
+    ),
+    s
+  );
+}
+function _(t, e = !0, n) {
+  D() ? A(t, n) : e ? t() : M(t);
+}
+function K(t, e, n = {}) {
+  const {
+    debounce: u = 0,
+    maxWait: s = void 0,
+    ...i
+  } = n;
+  return G(
+    t,
+    e,
+    {
+      ...i,
+      eventFilter: V(u, { maxWait: s })
+    }
+  );
+}
+const p = L ? window : void 0;
+function w(t) {
+  var e;
+  const n = b(t);
+  return (e = n == null ? void 0 : n.$el) != null ? e : n;
+}
+function E(...t) {
+  let e, n, u, s;
+  if (typeof t[0] == "string" || Array.isArray(t[0]) ? ([n, u, s] = t, e = p) : [e, n, u, s] = t, !e)
+    return W;
+  Array.isArray(n) || (n = [n]), Array.isArray(u) || (u = [u]);
+  const i = [], a = () => {
+    i.forEach((r) => r()), i.length = 0;
+  }, c = (r, o, l, h) => (r.addEventListener(o, l, h), () => r.removeEventListener(o, l, h)), f = O(
+    () => [w(e), b(s)],
+    ([r, o]) => {
+      if (a(), !r)
+        return;
+      const l = B(o) ? { ...o } : o;
+      i.push(
+        ...n.flatMap((h) => u.map((g) => c(r, h, g, l)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), d = () => {
+    f(), a();
+  };
+  return x(d), d;
+}
+function U() {
+  const t = m(!1), e = N();
+  return e && A(() => {
+    t.value = !0;
+  }, e), t;
+}
+function T(t) {
+  const e = U();
+  return v(() => (e.value, !!t()));
+}
+function Y(t, e, n = {}) {
+  const { window: u = p, ...s } = n;
+  let i;
+  const a = T(() => u && "MutationObserver" in u), c = () => {
+    i && (i.disconnect(), i = void 0);
+  }, f = v(() => {
+    const l = b(t), h = (Array.isArray(l) ? l : [l]).map(w).filter(j);
+    return new Set(h);
+  }), d = O(
+    () => f.value,
+    (l) => {
+      c(), a.value && l.size && (i = new MutationObserver(e), l.forEach((h) => i.observe(h, s)));
+    },
+    { immediate: !0, flush: "post" }
+  ), r = () => i == null ? void 0 : i.takeRecords(), o = () => {
+    d(), c();
+  };
+  return x(o), {
+    isSupported: a,
+    stop: o,
+    takeRecords: r
+  };
+}
+function q(t = {}) {
+  var e;
+  const {
+    window: n = p,
+    deep: u = !0,
+    triggerOnRemoval: s = !1
+  } = t, i = (e = t.document) != null ? e : n == null ? void 0 : n.document, a = () => {
+    var d;
+    let r = i == null ? void 0 : i.activeElement;
+    if (u)
+      for (; r != null && r.shadowRoot; )
+        r = (d = r == null ? void 0 : r.shadowRoot) == null ? void 0 : d.activeElement;
+    return r;
+  }, c = m(), f = () => {
+    c.value = a();
+  };
+  return n && (E(n, "blur", (d) => {
+    d.relatedTarget === null && f();
+  }, !0), E(n, "focus", f, !0)), s && Y(i, (d) => {
+    d.filter((r) => r.removedNodes.length).map((r) => Array.from(r.removedNodes)).flat().forEach((r) => {
+      r === c.value && f();
+    });
+  }, {
+    childList: !0,
+    subtree: !0
+  }), f(), c;
+}
+function y(t, e = {}) {
+  const { window: n = p } = e, u = T(() => n && "matchMedia" in n && typeof n.matchMedia == "function");
+  let s;
+  const i = m(!1), a = (d) => {
+    i.value = d.matches;
+  }, c = () => {
+    s && ("removeEventListener" in s ? s.removeEventListener("change", a) : s.removeListener(a));
+  }, f = F(() => {
+    u.value && (c(), s = n.matchMedia(b(t)), "addEventListener" in s ? s.addEventListener("change", a) : s.addListener(a), i.value = s.matches);
+  });
+  return x(() => {
+    f(), c(), s = void 0;
+  }), i;
+}
+function Z(t, e = {}) {
+  function n(r, o) {
+    let l = b(t[b(r)]);
+    return o != null && (l = H(l, o)), typeof l == "number" && (l = `${l}px`), l;
+  }
+  const { window: u = p, strategy: s = "min-width" } = e;
+  function i(r) {
+    return u ? u.matchMedia(r).matches : !1;
+  }
+  const a = (r) => y(() => `(min-width: ${n(r)})`, e), c = (r) => y(() => `(max-width: ${n(r)})`, e), f = Object.keys(t).reduce((r, o) => (Object.defineProperty(r, o, {
+    get: () => s === "min-width" ? a(o) : c(o),
+    enumerable: !0,
+    configurable: !0
+  }), r), {});
+  function d() {
+    const r = Object.keys(t).map((o) => [o, a(o)]);
+    return v(() => r.filter(([, o]) => o.value).map(([o]) => o));
+  }
+  return Object.assign(f, {
+    greaterOrEqual: a,
+    smallerOrEqual: c,
+    greater(r) {
+      return y(() => `(min-width: ${n(r, 0.1)})`, e);
+    },
+    smaller(r) {
+      return y(() => `(max-width: ${n(r, -0.1)})`, e);
+    },
+    between(r, o) {
+      return y(() => `(min-width: ${n(r)}) and (max-width: ${n(o, -0.1)})`, e);
+    },
+    isGreater(r) {
+      return i(`(min-width: ${n(r, 0.1)})`);
+    },
+    isGreaterOrEqual(r) {
+      return i(`(min-width: ${n(r)})`);
+    },
+    isSmaller(r) {
+      return i(`(max-width: ${n(r, -0.1)})`);
+    },
+    isSmallerOrEqual(r) {
+      return i(`(max-width: ${n(r)})`);
+    },
+    isInBetween(r, o) {
+      return i(`(min-width: ${n(r)}) and (max-width: ${n(o, -0.1)})`);
+    },
+    current: d,
+    active() {
+      const r = d();
+      return v(() => r.value.length === 0 ? "" : r.value.at(-1));
+    }
+  });
+}
+function X(t, e, n = {}) {
+  const { window: u = p, ...s } = n;
+  let i;
+  const a = T(() => u && "ResizeObserver" in u), c = () => {
+    i && (i.disconnect(), i = void 0);
+  }, f = v(() => {
+    const o = b(t);
+    return Array.isArray(o) ? o.map((l) => w(l)) : [w(o)];
+  }), d = O(
+    f,
+    (o) => {
+      if (c(), a.value && u) {
+        i = new ResizeObserver(e);
+        for (const l of o)
+          l && i.observe(l, s);
+      }
+    },
+    { immediate: !0, flush: "post" }
+  ), r = () => {
+    c(), d();
+  };
+  return x(r), {
+    isSupported: a,
+    stop: r
+  };
+}
+function ee(t, e = { width: 0, height: 0 }, n = {}) {
+  const { window: u = p, box: s = "content-box" } = n, i = v(() => {
+    var o, l;
+    return (l = (o = w(t)) == null ? void 0 : o.namespaceURI) == null ? void 0 : l.includes("svg");
+  }), a = m(e.width), c = m(e.height), { stop: f } = X(
+    t,
+    ([o]) => {
+      const l = s === "border-box" ? o.borderBoxSize : s === "content-box" ? o.contentBoxSize : o.devicePixelContentBoxSize;
+      if (u && i.value) {
+        const h = w(t);
+        if (h) {
+          const g = h.getBoundingClientRect();
+          a.value = g.width, c.value = g.height;
+        }
+      } else if (l) {
+        const h = Array.isArray(l) ? l : [l];
+        a.value = h.reduce((g, { inlineSize: S }) => g + S, 0), c.value = h.reduce((g, { blockSize: S }) => g + S, 0);
+      } else
+        a.value = o.contentRect.width, c.value = o.contentRect.height;
+    },
+    n
+  );
+  _(() => {
+    const o = w(t);
+    o && (a.value = "offsetWidth" in o ? o.offsetWidth : e.width, c.value = "offsetHeight" in o ? o.offsetHeight : e.height);
+  });
+  const d = O(
+    () => w(t),
+    (o) => {
+      a.value = o ? e.width : 0, c.value = o ? e.height : 0;
+    }
+  );
+  function r() {
+    f(), d();
+  }
+  return {
+    width: a,
+    height: c,
+    stop: r
+  };
+}
+const k = "focusin", Q = "focusout";
+function te(t, e = {}) {
+  const { window: n = p } = e, u = v(() => w(t)), s = m(!1), i = v(() => s.value), a = q(e);
+  return !n || !a.value ? { focused: i } : (E(u, k, () => s.value = !0), E(u, Q, () => s.value = !1), { focused: i });
+}
+function ne(t = {}) {
+  const { window: e = p, behavior: n = "auto" } = t;
+  if (!e)
+    return {
+      x: m(0),
+      y: m(0)
+    };
+  const u = m(e.scrollX), s = m(e.scrollY), i = v({
+    get() {
+      return u.value;
+    },
+    set(c) {
+      scrollTo({ left: c, behavior: n });
+    }
+  }), a = v({
+    get() {
+      return s.value;
+    },
+    set(c) {
+      scrollTo({ top: c, behavior: n });
+    }
+  });
+  return E(
+    e,
+    "scroll",
+    () => {
+      u.value = e.scrollX, s.value = e.scrollY;
+    },
+    {
+      capture: !1,
+      passive: !0
+    }
+  ), { x: i, y: a };
+}
+function re(t = {}) {
+  const {
+    window: e = p,
+    initialWidth: n = Number.POSITIVE_INFINITY,
+    initialHeight: u = Number.POSITIVE_INFINITY,
+    listenOrientation: s = !0,
+    includeScrollbar: i = !0,
+    type: a = "inner"
+  } = t, c = m(n), f = m(u), d = () => {
+    e && (a === "outer" ? (c.value = e.outerWidth, f.value = e.outerHeight) : i ? (c.value = e.innerWidth, f.value = e.innerHeight) : (c.value = e.document.documentElement.clientWidth, f.value = e.document.documentElement.clientHeight));
+  };
+  if (d(), _(d), E("resize", d, { passive: !0 }), s) {
+    const r = y("(orientation: portrait)");
+    O(r, () => d());
+  }
+  return { width: c, height: f };
+}
+export {
+  ee as a,
+  ne as b,
+  te as c,
+  y as d,
+  Z as e,
+  Y as f,
+  re as u,
+  K as w
+};
+//# sourceMappingURL=index.BMkVmbZj.js.map