@adyen/bento-vue2 1.28.0 → 1.29.0

package/dist/image.js

@@ -1,7 +1,84 @@
-import { B as t, a as o, b as m } from "./chunks/image.B3uqhFjl.js";
+import { defineComponent as u, computed as a } from "vue";
+import { n as c } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+var e = /* @__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))(e || {}), _ = /* @__PURE__ */ ((r) => (r.COVER = "cover", r.FILL = "fill", r.CONTAIN = "contain", r))(_ || {});
+const i = u({
+  name: "bento-image",
+  props: {
+    /**
+     * Url to image, same as src attribute of `<img>` tag
+     */
+    src: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Accessible text describing the image, same as alt attribute of `<img>` tag
+     */
+    alt: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Aspect ratio of the image, maps to css aspect-ratio
+     */
+    aspectRatio: {
+      type: String,
+      default: null,
+      validator: (r) => Object.values(e).includes(r)
+    },
+    /**
+     * Object fitting strategy, maps to css object-fit
+     */
+    objectFit: {
+      type: String,
+      default: null,
+      validator: (r) => Object.values(_).includes(r)
+    }
+  },
+  setup(r) {
+    const l = (s) => {
+      let t = e.P16_9;
+      switch (s) {
+        case e.LANDSCAPE:
+          t = e.P16_9;
+          break;
+        case e.PORTRAIT:
+          t = e.P3_4;
+          break;
+        case e.SQUARE:
+          t = e.P1_1;
+          break;
+        default:
+          t = s;
+          break;
+      }
+      return `${t}`.replace(":", "/");
+    };
+    return {
+      imageStyles: a(() => ({
+        aspectRatio: l(r.aspectRatio),
+        objectFit: r.objectFit
+      }))
+    };
+  }
+});
+var P = function() {
+  var l = this, n = l._self._c;
+  return l._self._setupProxy, n("img", { style: l.imageStyles, attrs: { src: l.src, alt: l.alt } });
+}, d = [], f = /* @__PURE__ */ c(
+  i,
+  P,
+  d,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const p = f.exports;
 export {
-  t as BentoImage,
-  o as BentoImageAspectRatio,
-  m as BentoImageObjectFit
+  p as BentoImage,
+  e as BentoImageAspectRatio,
+  _ as BentoImageObjectFit
 };
 //# sourceMappingURL=image.js.map

package/dist/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"image.js","sources":["../src/components/image/image.types.ts","../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","<template>\n    <img :src=\"src\" :alt=\"alt\" :style=\"imageStyles\" />\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoImageAspectRatio, BentoImageObjectFit } from './image.types';\n\n    export default defineComponent({\n        name: 'bento-image',\n        props: {\n            /**\n             * Url to image, same as src attribute of `<img>` tag\n             */\n            src: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Accessible text describing the image, same as alt attribute of `<img>` tag\n             */\n            alt: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Aspect ratio of the image, maps to css aspect-ratio\n             */\n            aspectRatio: {\n                type: String as PropType<BentoImageAspectRatio | `${BentoImageAspectRatio}`>,\n                default: null,\n                validator: (value: BentoImageAspectRatio) => Object.values(BentoImageAspectRatio).includes(value),\n            },\n            /**\n             * Object fitting strategy, maps to css object-fit\n             */\n            objectFit: {\n                type: String as PropType<BentoImageObjectFit | `${BentoImageObjectFit}`>,\n                default: null,\n                validator: (value: BentoImageObjectFit) => Object.values(BentoImageObjectFit).includes(value),\n            },\n        },\n        setup(props) {\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\n            return {\n                imageStyles,\n            };\n        },\n    });\n</script>\n"],"names":["BentoImageAspectRatio","BentoImageObjectFit","_sfc_main","defineComponent","value","props","convertAspectRatio","aspectRatio","parsedAspectRatio","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;ACRZ,MAAAC,IAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAA,MAAA,OAAA,OAAAH,CAAA,EAAA,SAAAG,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AACA,UAAAC,IAAA,CAAAC,MAAA;AACA,UAAAC,IAAAR,EAAA;AACA,cAAAO,GAAA;AAAA,QACA,KAAAP,EAAA;AACA,UAAAQ,IAAAR,EAAA;AACA;AAAA,QACA,KAAAA,EAAA;AACA,UAAAQ,IAAAR,EAAA;AACA;AAAA,QACA,KAAAA,EAAA;AACA,UAAAQ,IAAAR,EAAA;AACA;AAAA,QACA;AACA,UAAAQ,IAAAD;AACA;AAAA,MACA;AACA,aAAA,GAAAC,IAAA,QAAA,KAAA,GAAA;AAAA,IAAA;AAQA,WAAA;AAAA,MACA,aANAC,EAAA,OAAA;AAAA,QACA,aAAAH,EAAAD,EAAA,WAAA;AAAA,QACA,WAAAA,EAAA;AAAA,MACA,EAAA;AAAA,IAGA;AAAA,EAEA;AACA,CAAA;;;;;;;;;;;;;;;"}