@adyen/bento-vue3 1.40.0 → 1.41.0

package/dist/chunks/image.vue_vue_type_script_setup_true_lang.BMoSMeM-.js

@@ -0,0 +1,47 @@
+import { defineComponent as u, computed as e, openBlock as n, createElementBlock 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, _) => (n(), t("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.BMoSMeM-.js.map

package/dist/chunks/image.vue_vue_type_script_setup_true_lang.BMoSMeM-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.vue_vue_type_script_setup_true_lang.BMoSMeM-.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.ChdIlujs.js

@@ -0,0 +1,248 @@
+import { getCurrentScope as N, onScopeDispose as A, unref as L, onMounted as E, nextTick as T, getCurrentInstance as $, ref as m, watchEffect as j, computed as y, watch as g } from "vue";
+function S(t) {
+  return N() ? (A(t), !0) : !1;
+}
+function x(t) {
+  return typeof t == "function" ? t() : L(t);
+}
+const B = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const C = Object.prototype.toString, _ = (t) => C.call(t) === "[object Object]", z = () => {
+};
+function R(t, n) {
+  var r;
+  if (typeof t == "number")
+    return t + n;
+  const u = ((r = t.match(/^-?[0-9]+\.?[0-9]*/)) == null ? void 0 : r[0]) || "", o = t.slice(u.length), c = Number.parseFloat(u) + n;
+  return Number.isNaN(c) ? t : c + o;
+}
+function F(t) {
+  return $();
+}
+function W(t, n = !0, r) {
+  F() ? E(t, r) : n ? t() : T(t);
+}
+function p(t) {
+  var n;
+  const r = x(t);
+  return (n = r == null ? void 0 : r.$el) != null ? n : r;
+}
+const w = B ? window : void 0;
+function I(...t) {
+  let n, r, u, o;
+  if (typeof t[0] == "string" || Array.isArray(t[0]) ? ([r, u, o] = t, n = w) : [n, r, u, o] = t, !n)
+    return z;
+  Array.isArray(r) || (r = [r]), Array.isArray(u) || (u = [u]);
+  const c = [], a = () => {
+    c.forEach((f) => f()), c.length = 0;
+  }, e = (f, s, d, h) => (f.addEventListener(s, d, h), () => f.removeEventListener(s, d, h)), i = g(
+    () => [p(n), x(o)],
+    ([f, s]) => {
+      if (a(), !f)
+        return;
+      const d = _(s) ? { ...s } : s;
+      c.push(
+        ...r.flatMap((h) => u.map((v) => e(f, h, v, d)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), l = () => {
+    i(), a();
+  };
+  return S(l), l;
+}
+function G() {
+  const t = m(!1);
+  return $() && E(() => {
+    t.value = !0;
+  }), t;
+}
+function M(t) {
+  const n = G();
+  return y(() => (n.value, !!t()));
+}
+function b(t, n = {}) {
+  const { window: r = w } = n, u = M(() => r && "matchMedia" in r && typeof r.matchMedia == "function");
+  let o;
+  const c = m(!1), a = (l) => {
+    c.value = l.matches;
+  }, e = () => {
+    o && ("removeEventListener" in o ? o.removeEventListener("change", a) : o.removeListener(a));
+  }, i = j(() => {
+    u.value && (e(), o = r.matchMedia(x(t)), "addEventListener" in o ? o.addEventListener("change", a) : o.addListener(a), c.value = o.matches);
+  });
+  return S(() => {
+    i(), e(), o = void 0;
+  }), c;
+}
+function Y(t, n = {}) {
+  function r(e, i) {
+    let l = x(t[e]);
+    return i != null && (l = R(l, i)), typeof l == "number" && (l = `${l}px`), l;
+  }
+  const { window: u = w } = n;
+  function o(e) {
+    return u ? u.matchMedia(e).matches : !1;
+  }
+  const c = (e) => b(() => `(min-width: ${r(e)})`, n), a = Object.keys(t).reduce((e, i) => (Object.defineProperty(e, i, {
+    get: () => c(i),
+    enumerable: !0,
+    configurable: !0
+  }), e), {});
+  return Object.assign(a, {
+    greater(e) {
+      return b(() => `(min-width: ${r(e, 0.1)})`, n);
+    },
+    greaterOrEqual: c,
+    smaller(e) {
+      return b(() => `(max-width: ${r(e, -0.1)})`, n);
+    },
+    smallerOrEqual(e) {
+      return b(() => `(max-width: ${r(e)})`, n);
+    },
+    between(e, i) {
+      return b(() => `(min-width: ${r(e)}) and (max-width: ${r(i, -0.1)})`, n);
+    },
+    isGreater(e) {
+      return o(`(min-width: ${r(e, 0.1)})`);
+    },
+    isGreaterOrEqual(e) {
+      return o(`(min-width: ${r(e)})`);
+    },
+    isSmaller(e) {
+      return o(`(max-width: ${r(e, -0.1)})`);
+    },
+    isSmallerOrEqual(e) {
+      return o(`(max-width: ${r(e)})`);
+    },
+    isInBetween(e, i) {
+      return o(`(min-width: ${r(e)}) and (max-width: ${r(i, -0.1)})`);
+    },
+    current() {
+      const e = Object.keys(t).map((i) => [i, c(i)]);
+      return y(() => e.filter(([, i]) => i.value).map(([i]) => i));
+    }
+  });
+}
+function H(t, n, r = {}) {
+  const { window: u = w, ...o } = r;
+  let c;
+  const a = M(() => u && "ResizeObserver" in u), e = () => {
+    c && (c.disconnect(), c = void 0);
+  }, i = y(() => Array.isArray(t) ? t.map((s) => p(s)) : [p(t)]), l = g(
+    i,
+    (s) => {
+      if (e(), a.value && u) {
+        c = new ResizeObserver(n);
+        for (const d of s)
+          d && c.observe(d, o);
+      }
+    },
+    { immediate: !0, flush: "post", deep: !0 }
+  ), f = () => {
+    e(), l();
+  };
+  return S(f), {
+    isSupported: a,
+    stop: f
+  };
+}
+function q(t, n = { width: 0, height: 0 }, r = {}) {
+  const { window: u = w, box: o = "content-box" } = r, c = y(() => {
+    var s, d;
+    return (d = (s = p(t)) == null ? void 0 : s.namespaceURI) == null ? void 0 : d.includes("svg");
+  }), a = m(n.width), e = m(n.height), { stop: i } = H(
+    t,
+    ([s]) => {
+      const d = o === "border-box" ? s.borderBoxSize : o === "content-box" ? s.contentBoxSize : s.devicePixelContentBoxSize;
+      if (u && c.value) {
+        const h = p(t);
+        if (h) {
+          const v = u.getComputedStyle(h);
+          a.value = Number.parseFloat(v.width), e.value = Number.parseFloat(v.height);
+        }
+      } else if (d) {
+        const h = Array.isArray(d) ? d : [d];
+        a.value = h.reduce((v, { inlineSize: O }) => v + O, 0), e.value = h.reduce((v, { blockSize: O }) => v + O, 0);
+      } else
+        a.value = s.contentRect.width, e.value = s.contentRect.height;
+    },
+    r
+  );
+  W(() => {
+    const s = p(t);
+    s && (a.value = "offsetWidth" in s ? s.offsetWidth : n.width, e.value = "offsetHeight" in s ? s.offsetHeight : n.height);
+  });
+  const l = g(
+    () => p(t),
+    (s) => {
+      a.value = s ? n.width : 0, e.value = s ? n.height : 0;
+    }
+  );
+  function f() {
+    i(), l();
+  }
+  return {
+    width: a,
+    height: e,
+    stop: f
+  };
+}
+function P(t = {}) {
+  const { window: n = w, behavior: r = "auto" } = t;
+  if (!n)
+    return {
+      x: m(0),
+      y: m(0)
+    };
+  const u = m(n.scrollX), o = m(n.scrollY), c = y({
+    get() {
+      return u.value;
+    },
+    set(e) {
+      scrollTo({ left: e, behavior: r });
+    }
+  }), a = y({
+    get() {
+      return o.value;
+    },
+    set(e) {
+      scrollTo({ top: e, behavior: r });
+    }
+  });
+  return I(
+    n,
+    "scroll",
+    () => {
+      u.value = n.scrollX, o.value = n.scrollY;
+    },
+    {
+      capture: !1,
+      passive: !0
+    }
+  ), { x: c, y: a };
+}
+function k(t = {}) {
+  const {
+    window: n = w,
+    initialWidth: r = Number.POSITIVE_INFINITY,
+    initialHeight: u = Number.POSITIVE_INFINITY,
+    listenOrientation: o = !0,
+    includeScrollbar: c = !0
+  } = t, a = m(r), e = m(u), i = () => {
+    n && (c ? (a.value = n.innerWidth, e.value = n.innerHeight) : (a.value = n.document.documentElement.clientWidth, e.value = n.document.documentElement.clientHeight));
+  };
+  if (i(), W(i), I("resize", i, { passive: !0 }), o) {
+    const l = b("(orientation: portrait)");
+    g(l, () => i());
+  }
+  return { width: a, height: e };
+}
+export {
+  q as a,
+  P as b,
+  b as c,
+  Y as d,
+  k as u
+};
+//# sourceMappingURL=index.ChdIlujs.js.map