@prismicio/vue 5.2.1 → 5.3.0

package/README.md

@@ -73,7 +73,7 @@ For more clarity on this project and its structure you can also check out the de
 
 <!-- Replace link with a more useful one if available -->
 
-[prismic-docs]: https://prismic.io/docs/technologies/vuejs
+[prismic-docs]: https://prismic.io/docs/technical-reference/prismicio-vue/v5
 [changelog]: ./CHANGELOG.md
 [contributing]: ./CONTRIBUTING.md
 [vue]: https://v3.vuejs.org

package/dist/PrismicImage.vue.cjs

@@ -4,7 +4,7 @@ const client = require("@prismicio/client");
 const esmEnv = require("esm-env");
 const devMsg = require("./lib/devMsg.cjs");
 const usePrismic = require("./usePrismic.cjs");
-const _hoisted_1 = ["src", "srcset", "alt"];
+const _hoisted_1 = ["src", "srcset", "alt", "width", "height"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "PrismicImage" },
   __name: "PrismicImage",
@@ -13,6 +13,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     imgixParams: {},
     alt: {},
     fallbackAlt: {},
+    width: {},
+    height: {},
     widths: {},
     pixelDensities: {}
   },
@@ -42,6 +44,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       });
     }
+    const castInt = (input) => {
+      if (typeof input === "number" || typeof input === "undefined") {
+        return input;
+      } else {
+        const parsed = Number.parseInt(input);
+        if (Number.isNaN(parsed)) {
+          return void 0;
+        } else {
+          return parsed;
+        }
+      }
+    };
     const image = vue.computed(() => {
       var _a, _b;
       if (!client.isFilled.imageThumbnail(props.field)) {
@@ -64,10 +78,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         src = res.src;
         srcSet = res.srcset;
       }
+      const ar = props.field.dimensions.width / props.field.dimensions.height;
+      const castedWidth = castInt(props.width);
+      const castedHeight = castInt(props.height);
+      let resolvedWidth = castedWidth ?? props.field.dimensions.width;
+      let resolvedHeight = castedHeight ?? props.field.dimensions.height;
+      if (castedWidth != null && castedHeight == null) {
+        resolvedHeight = castedWidth / ar;
+      } else if (castedWidth == null && castedHeight != null) {
+        resolvedWidth = castedHeight * ar;
+      }
       return {
         src,
         srcSet,
-        alt: props.alt ?? (props.field.alt || props.fallbackAlt)
+        alt: props.alt ?? (props.field.alt || props.fallbackAlt),
+        width: Math.round(resolvedWidth),
+        height: Math.round(resolvedHeight)
       };
     });
     return (_ctx, _cache) => {
@@ -75,7 +101,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         key: 0,
         src: image.value.src,
         srcset: image.value.srcSet,
-        alt: image.value.alt
+        alt: image.value.alt,
+        width: image.value.width,
+        height: image.value.height
       }, null, 8, _hoisted_1)) : vue.createCommentVNode("", true);
     };
   }

package/dist/PrismicImage.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicImage.vue.cjs","sources":["../src/PrismicImage.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ImageField, asImageSrc } from \"@prismicio/client\"\nimport {\n\tasImagePixelDensitySrcSet,\n\tasImageWidthSrcSet,\n\tisFilled,\n} from \"@prismicio/client\"\nimport { DEV } from \"esm-env\"\nimport { computed, watchEffect } from \"vue\"\n\nimport { devMsg } from \"./lib/devMsg\"\n\nimport { usePrismic } from \"./usePrismic\"\n\n/**\n * Props for `<PrismicImage />`.\n */\nexport type PrismicImageProps = {\n\t/**\n\t * The Prismic image field or thumbnail to render.\n\t */\n\tfield: ImageField | ImageField<string>\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: Parameters<typeof asImageSrc>[1]\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\"\n\n\t/**\n\t * Declare an image as decorative only if the image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\"\n} & (\n\t| {\n\t\t\t/**\n\t\t\t * Widths used to build a `srcset` value for the image field.\n\t\t\t *\n\t\t\t * If a `widths` prop is not given or `\"defaults\"` is passed, the\n\t\t\t * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,\n\t\t\t * 3840.\n\t\t\t *\n\t\t\t * If the image field contains responsive views, each responsive view can\n\t\t\t * be used as a width in the resulting `srcset` by passing `\"thumbnails\"`\n\t\t\t * as the `widths` prop.\n\t\t\t */\n\t\t\twidths?:\n\t\t\t\t| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>[\"widths\"]\n\t\t\t\t| \"thumbnails\"\n\t\t\t\t| \"defaults\"\n\t\t\t/**\n\t\t\t * Not used when the `widths` prop is used.\n\t\t\t */\n\t\t\tpixelDensities?: never\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * Not used when the `widths` prop is used.\n\t\t\t */\n\t\t\twidths?: never\n\t\t\t/**\n\t\t\t * Pixel densities used to build a `srcset` value for the image field.\n\t\t\t *\n\t\t\t * If a `pixelDensities` prop is passed `\"defaults\"`, the following pixel\n\t\t\t * densities will be used: 1, 2, 3.\n\t\t\t */\n\t\t\tpixelDensities:\n\t\t\t\t| NonNullable<\n\t\t\t\t\t\tParameters<typeof asImagePixelDensitySrcSet>[1]\n\t\t\t\t  >[\"pixelDensities\"]\n\t\t\t\t| \"defaults\"\n\t  }\n)\n\nconst props = defineProps<PrismicImageProps>()\ndefineOptions({ name: \"PrismicImage\" })\n\nconst { options } = usePrismic()\n\nif (DEV) {\n\twatchEffect(() => {\n\t\tif (typeof props.alt === \"string\" && props.alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"alt\" prop can only be used to declare an image as decorative by passing an empty string (alt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"alt\" prop or changing it to alt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t)\n\t\t}\n\n\t\tif (typeof props.fallbackAlt === \"string\" && props.fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"fallbackAlt\" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"fallbackAlt\" prop or changing it to fallbackAlt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t)\n\t\t}\n\n\t\tif (props.widths && props.pixelDensities) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] Only one of \"widths\" or \"pixelDensities\" props can be provided. You can resolve this warning by removing either the \"widths\" or \"pixelDensities\" prop. \"widths\" will be used in this case.`,\n\t\t\t)\n\t\t}\n\t})\n}\n\nconst image = computed(() => {\n\tif (!isFilled.imageThumbnail(props.field)) {\n\t\treturn\n\t}\n\n\tlet src: string | undefined\n\tlet srcSet: string | undefined\n\tif (props.widths || !props.pixelDensities) {\n\t\tconst res = asImageWidthSrcSet(props.field, {\n\t\t\t...props.imgixParams,\n\t\t\twidths:\n\t\t\t\tprops.widths === \"defaults\"\n\t\t\t\t\t? options.components?.imageWidthSrcSetDefaults\n\t\t\t\t\t: props.widths,\n\t\t})\n\n\t\tsrc = res.src\n\t\tsrcSet = res.srcset\n\t} else if (props.pixelDensities) {\n\t\tconst res = asImagePixelDensitySrcSet(props.field, {\n\t\t\t...props.imgixParams,\n\t\t\tpixelDensities:\n\t\t\t\tprops.pixelDensities === \"defaults\"\n\t\t\t\t\t? options.components?.imagePixelDensitySrcSetDefaults\n\t\t\t\t\t: props.pixelDensities,\n\t\t})\n\n\t\tsrc = res.src\n\t\tsrcSet = res.srcset\n\t}\n\n\treturn {\n\t\tsrc,\n\t\tsrcSet,\n\t\talt: props.alt ?? (props.field.alt || props.fallbackAlt),\n\t}\n})\n</script>\n\n<template>\n\t<img v-if=\"image\" :src=\"image.src\" :srcset=\"image.srcSet\" :alt=\"image.alt\" />\n</template>\n"],"names":["usePrismic","DEV","watchEffect","devMsg","computed","isFilled","asImageWidthSrcSet","asImagePixelDensitySrcSet"],"mappings":";;;;;;;;;;;;;;;;;;;AAuFA,UAAM,QAAQ;AAGR,UAAA,EAAE,QAAQ,IAAIA,sBAAW;AAE/B,QAAIC,YAAK;AACRC,UAAAA,YAAY,MAAM;AACjB,YAAI,OAAO,MAAM,QAAQ,YAAY,MAAM,QAAQ,IAAI;AAC9C,kBAAA;AAAA,YACP,qQAAqQC,OAAA;AAAA,cACpQ;AAAA,YAAA,CACA;AAAA,UACF;AAAA,QAAA;AAGD,YAAI,OAAO,MAAM,gBAAgB,YAAY,MAAM,gBAAgB,IAAI;AAC9D,kBAAA;AAAA,YACP,qSAAqSA,OAAA;AAAA,cACpS;AAAA,YAAA,CACA;AAAA,UACF;AAAA,QAAA;AAGG,YAAA,MAAM,UAAU,MAAM,gBAAgB;AACjC,kBAAA;AAAA,YACP;AAAA,UACD;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA;AAGI,UAAA,QAAQC,IAAAA,SAAS,MAAM;;AAC5B,UAAI,CAACC,OAAAA,SAAS,eAAe,MAAM,KAAK,GAAG;AAC1C;AAAA,MAAA;AAGG,UAAA;AACA,UAAA;AACJ,UAAI,MAAM,UAAU,CAAC,MAAM,gBAAgB;AACpC,cAAA,MAAMC,OAAAA,mBAAmB,MAAM,OAAO;AAAA,UAC3C,GAAG,MAAM;AAAA,UACT,QACC,MAAM,WAAW,cACd,aAAQ,eAAR,mBAAoB,2BACpB,MAAM;AAAA,QAAA,CACV;AAED,cAAM,IAAI;AACV,iBAAS,IAAI;AAAA,MAAA,WACH,MAAM,gBAAgB;AAC1B,cAAA,MAAMC,OAAAA,0BAA0B,MAAM,OAAO;AAAA,UAClD,GAAG,MAAM;AAAA,UACT,gBACC,MAAM,mBAAmB,cACtB,aAAQ,eAAR,mBAAoB,kCACpB,MAAM;AAAA,QAAA,CACV;AAED,cAAM,IAAI;AACV,iBAAS,IAAI;AAAA,MAAA;AAGP,aAAA;AAAA,QACN;AAAA,QACA;AAAA,QACA,KAAK,MAAM,QAAQ,MAAM,MAAM,OAAO,MAAM;AAAA,MAC7C;AAAA,IAAA,CACA;;;;;;;;;;;;"}
+{"version":3,"file":"PrismicImage.vue.cjs","sources":["../src/PrismicImage.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ImageField, asImageSrc } from \"@prismicio/client\"\nimport {\n\tasImagePixelDensitySrcSet,\n\tasImageWidthSrcSet,\n\tisFilled,\n} from \"@prismicio/client\"\nimport { DEV } from \"esm-env\"\nimport { computed, watchEffect } from \"vue\"\n\nimport { devMsg } from \"./lib/devMsg\"\n\nimport { usePrismic } from \"./usePrismic\"\n\n/**\n * Props for `<PrismicImage />`.\n */\nexport type PrismicImageProps = {\n\t/**\n\t * The Prismic image field or thumbnail to render.\n\t */\n\tfield: ImageField | ImageField<string>\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: Parameters<typeof asImageSrc>[1]\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\"\n\n\t/**\n\t * Declare an image as decorative only if the image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\"\n\n\t/**\n\t * The width attribute of the image element.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width\n\t */\n\twidth?: number | string\n\n\t/**\n\t * The height attribute of the image element.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height\n\t */\n\theight?: number | string\n} & (\n\t| {\n\t\t\t/**\n\t\t\t * Widths used to build a `srcset` value for the image field.\n\t\t\t *\n\t\t\t * If a `widths` prop is not given or `\"defaults\"` is passed, the\n\t\t\t * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,\n\t\t\t * 3840.\n\t\t\t *\n\t\t\t * If the image field contains responsive views, each responsive view can\n\t\t\t * be used as a width in the resulting `srcset` by passing `\"thumbnails\"`\n\t\t\t * as the `widths` prop.\n\t\t\t */\n\t\t\twidths?:\n\t\t\t\t| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>[\"widths\"]\n\t\t\t\t| \"thumbnails\"\n\t\t\t\t| \"defaults\"\n\t\t\t/**\n\t\t\t * Not used when the `widths` prop is used.\n\t\t\t */\n\t\t\tpixelDensities?: never\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * Not used when the `widths` prop is used.\n\t\t\t */\n\t\t\twidths?: never\n\t\t\t/**\n\t\t\t * Pixel densities used to build a `srcset` value for the image field.\n\t\t\t *\n\t\t\t * If a `pixelDensities` prop is passed `\"defaults\"`, the following pixel\n\t\t\t * densities will be used: 1, 2, 3.\n\t\t\t */\n\t\t\tpixelDensities:\n\t\t\t\t| NonNullable<\n\t\t\t\t\t\tParameters<typeof asImagePixelDensitySrcSet>[1]\n\t\t\t\t  >[\"pixelDensities\"]\n\t\t\t\t| \"defaults\"\n\t  }\n)\n\nconst props = defineProps<PrismicImageProps>()\ndefineOptions({ name: \"PrismicImage\" })\n\nconst { options } = usePrismic()\n\nif (DEV) {\n\twatchEffect(() => {\n\t\tif (typeof props.alt === \"string\" && props.alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"alt\" prop can only be used to declare an image as decorative by passing an empty string (alt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"alt\" prop or changing it to alt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t)\n\t\t}\n\n\t\tif (typeof props.fallbackAlt === \"string\" && props.fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"fallbackAlt\" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"fallbackAlt\" prop or changing it to fallbackAlt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t)\n\t\t}\n\n\t\tif (props.widths && props.pixelDensities) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] Only one of \"widths\" or \"pixelDensities\" props can be provided. You can resolve this warning by removing either the \"widths\" or \"pixelDensities\" prop. \"widths\" will be used in this case.`,\n\t\t\t)\n\t\t}\n\t})\n}\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input\n\t} else {\n\t\tconst parsed = Number.parseInt(input)\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined\n\t\t} else {\n\t\t\treturn parsed\n\t\t}\n\t}\n}\n\nconst image = computed(() => {\n\tif (!isFilled.imageThumbnail(props.field)) {\n\t\treturn\n\t}\n\n\tlet src: string | undefined\n\tlet srcSet: string | undefined\n\tif (props.widths || !props.pixelDensities) {\n\t\tconst res = asImageWidthSrcSet(props.field, {\n\t\t\t...props.imgixParams,\n\t\t\twidths:\n\t\t\t\tprops.widths === \"defaults\"\n\t\t\t\t\t? options.components?.imageWidthSrcSetDefaults\n\t\t\t\t\t: props.widths,\n\t\t})\n\n\t\tsrc = res.src\n\t\tsrcSet = res.srcset\n\t} else if (props.pixelDensities) {\n\t\tconst res = asImagePixelDensitySrcSet(props.field, {\n\t\t\t...props.imgixParams,\n\t\t\tpixelDensities:\n\t\t\t\tprops.pixelDensities === \"defaults\"\n\t\t\t\t\t? options.components?.imagePixelDensitySrcSetDefaults\n\t\t\t\t\t: props.pixelDensities,\n\t\t})\n\n\t\tsrc = res.src\n\t\tsrcSet = res.srcset\n\t}\n\n\tconst ar = props.field.dimensions.width / props.field.dimensions.height\n\n\tconst castedWidth = castInt(props.width)\n\tconst castedHeight = castInt(props.height)\n\n\tlet resolvedWidth = castedWidth ?? props.field.dimensions.width\n\tlet resolvedHeight = castedHeight ?? props.field.dimensions.height\n\n\tif (castedWidth != null && castedHeight == null) {\n\t\tresolvedHeight = castedWidth / ar\n\t} else if (castedWidth == null && castedHeight != null) {\n\t\tresolvedWidth = castedHeight * ar\n\t}\n\n\treturn {\n\t\tsrc,\n\t\tsrcSet,\n\t\talt: props.alt ?? (props.field.alt || props.fallbackAlt),\n\t\twidth: Math.round(resolvedWidth),\n\t\theight: Math.round(resolvedHeight),\n\t}\n})\n</script>\n\n<template>\n\t<img\n\t\tv-if=\"image\"\n\t\t:src=\"image.src\"\n\t\t:srcset=\"image.srcSet\"\n\t\t:alt=\"image.alt\"\n\t\t:width=\"image.width\"\n\t\t:height=\"image.height\"\n\t/>\n</template>\n"],"names":["usePrismic","DEV","watchEffect","devMsg","computed","isFilled","asImageWidthSrcSet","asImagePixelDensitySrcSet"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuGA,UAAM,QAAQ;AAGR,UAAA,EAAE,QAAQ,IAAIA,sBAAW;AAE/B,QAAIC,YAAK;AACRC,UAAAA,YAAY,MAAM;AACjB,YAAI,OAAO,MAAM,QAAQ,YAAY,MAAM,QAAQ,IAAI;AAC9C,kBAAA;AAAA,YACP,qQAAqQC,OAAA;AAAA,cACpQ;AAAA,YAAA,CACA;AAAA,UACF;AAAA,QAAA;AAGD,YAAI,OAAO,MAAM,gBAAgB,YAAY,MAAM,gBAAgB,IAAI;AAC9D,kBAAA;AAAA,YACP,qSAAqSA,OAAA;AAAA,cACpS;AAAA,YAAA,CACA;AAAA,UACF;AAAA,QAAA;AAGG,YAAA,MAAM,UAAU,MAAM,gBAAgB;AACjC,kBAAA;AAAA,YACP;AAAA,UACD;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA;AAGI,UAAA,UAAU,CAAC,UAA2D;AAC3E,UAAI,OAAO,UAAU,YAAY,OAAO,UAAU,aAAa;AACvD,eAAA;AAAA,MAAA,OACD;AACA,cAAA,SAAS,OAAO,SAAS,KAAK;AAEhC,YAAA,OAAO,MAAM,MAAM,GAAG;AAClB,iBAAA;AAAA,QAAA,OACD;AACC,iBAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAEF;AAEM,UAAA,QAAQC,IAAAA,SAAS,MAAM;;AAC5B,UAAI,CAACC,OAAAA,SAAS,eAAe,MAAM,KAAK,GAAG;AAC1C;AAAA,MAAA;AAGG,UAAA;AACA,UAAA;AACJ,UAAI,MAAM,UAAU,CAAC,MAAM,gBAAgB;AACpC,cAAA,MAAMC,OAAAA,mBAAmB,MAAM,OAAO;AAAA,UAC3C,GAAG,MAAM;AAAA,UACT,QACC,MAAM,WAAW,cACd,aAAQ,eAAR,mBAAoB,2BACpB,MAAM;AAAA,QAAA,CACV;AAED,cAAM,IAAI;AACV,iBAAS,IAAI;AAAA,MAAA,WACH,MAAM,gBAAgB;AAC1B,cAAA,MAAMC,OAAAA,0BAA0B,MAAM,OAAO;AAAA,UAClD,GAAG,MAAM;AAAA,UACT,gBACC,MAAM,mBAAmB,cACtB,aAAQ,eAAR,mBAAoB,kCACpB,MAAM;AAAA,QAAA,CACV;AAED,cAAM,IAAI;AACV,iBAAS,IAAI;AAAA,MAAA;AAGd,YAAM,KAAK,MAAM,MAAM,WAAW,QAAQ,MAAM,MAAM,WAAW;AAE3D,YAAA,cAAc,QAAQ,MAAM,KAAK;AACjC,YAAA,eAAe,QAAQ,MAAM,MAAM;AAEzC,UAAI,gBAAgB,eAAe,MAAM,MAAM,WAAW;AAC1D,UAAI,iBAAiB,gBAAgB,MAAM,MAAM,WAAW;AAExD,UAAA,eAAe,QAAQ,gBAAgB,MAAM;AAChD,yBAAiB,cAAc;AAAA,MACrB,WAAA,eAAe,QAAQ,gBAAgB,MAAM;AACvD,wBAAgB,eAAe;AAAA,MAAA;AAGzB,aAAA;AAAA,QACN;AAAA,QACA;AAAA,QACA,KAAK,MAAM,QAAQ,MAAM,MAAM,OAAO,MAAM;AAAA,QAC5C,OAAO,KAAK,MAAM,aAAa;AAAA,QAC/B,QAAQ,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IAAA,CACA;;;;;;;;;;;;;;"}

package/dist/PrismicImage.vue.d.ts

@@ -28,6 +28,20 @@ export type PrismicImageProps = {
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
      */
     fallbackAlt?: "";
+    /**
+     * The width attribute of the image element.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width
+     */
+    width?: number | string;
+    /**
+     * The height attribute of the image element.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height
+     */
+    height?: number | string;
 } & ({
     /**
      * Widths used to build a `srcset` value for the image field.
@@ -84,6 +98,20 @@ declare const _default: import('vue').DefineComponent<({
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
      */
     fallbackAlt?: "";
+    /**
+     * The width attribute of the image element.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width
+     */
+    width?: number | string;
+    /**
+     * The height attribute of the image element.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height
+     */
+    height?: number | string;
 } & {
     /**
      * Widths used to build a `srcset` value for the image field.
@@ -127,6 +155,20 @@ declare const _default: import('vue').DefineComponent<({
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
      */
     fallbackAlt?: "";
+    /**
+     * The width attribute of the image element.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width
+     */
+    width?: number | string;
+    /**
+     * The height attribute of the image element.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height
+     */
+    height?: number | string;
 } & {
     /**
      * Not used when the `widths` prop is used.
@@ -165,6 +207,20 @@ declare const _default: import('vue').DefineComponent<({
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
      */
     fallbackAlt?: "";
+    /**
+     * The width attribute of the image element.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width
+     */
+    width?: number | string;
+    /**
+     * The height attribute of the image element.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height
+     */
+    height?: number | string;
 } & {
     /**
      * Widths used to build a `srcset` value for the image field.
@@ -208,6 +264,20 @@ declare const _default: import('vue').DefineComponent<({
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
      */
     fallbackAlt?: "";
+    /**
+     * The width attribute of the image element.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width
+     */
+    width?: number | string;
+    /**
+     * The height attribute of the image element.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height
+     */
+    height?: number | string;
 } & {
     /**
      * Not used when the `widths` prop is used.

package/dist/PrismicImage.vue.js

@@ -3,7 +3,7 @@ import { isFilled, asImageWidthSrcSet, asImagePixelDensitySrcSet } from "@prismi
 import { DEV } from "esm-env";
 import { devMsg } from "./lib/devMsg.js";
 import { usePrismic } from "./usePrismic.js";
-const _hoisted_1 = ["src", "srcset", "alt"];
+const _hoisted_1 = ["src", "srcset", "alt", "width", "height"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "PrismicImage" },
   __name: "PrismicImage",
@@ -12,6 +12,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     imgixParams: {},
     alt: {},
     fallbackAlt: {},
+    width: {},
+    height: {},
     widths: {},
     pixelDensities: {}
   },
@@ -41,6 +43,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     }
+    const castInt = (input) => {
+      if (typeof input === "number" || typeof input === "undefined") {
+        return input;
+      } else {
+        const parsed = Number.parseInt(input);
+        if (Number.isNaN(parsed)) {
+          return void 0;
+        } else {
+          return parsed;
+        }
+      }
+    };
     const image = computed(() => {
       var _a, _b;
       if (!isFilled.imageThumbnail(props.field)) {
@@ -63,10 +77,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         src = res.src;
         srcSet = res.srcset;
       }
+      const ar = props.field.dimensions.width / props.field.dimensions.height;
+      const castedWidth = castInt(props.width);
+      const castedHeight = castInt(props.height);
+      let resolvedWidth = castedWidth ?? props.field.dimensions.width;
+      let resolvedHeight = castedHeight ?? props.field.dimensions.height;
+      if (castedWidth != null && castedHeight == null) {
+        resolvedHeight = castedWidth / ar;
+      } else if (castedWidth == null && castedHeight != null) {
+        resolvedWidth = castedHeight * ar;
+      }
       return {
         src,
         srcSet,
-        alt: props.alt ?? (props.field.alt || props.fallbackAlt)
+        alt: props.alt ?? (props.field.alt || props.fallbackAlt),
+        width: Math.round(resolvedWidth),
+        height: Math.round(resolvedHeight)
       };
     });
     return (_ctx, _cache) => {
@@ -74,7 +100,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         key: 0,
         src: image.value.src,
         srcset: image.value.srcSet,
-        alt: image.value.alt
+        alt: image.value.alt,
+        width: image.value.width,
+        height: image.value.height
       }, null, 8, _hoisted_1)) : createCommentVNode("", true);
     };
   }

package/dist/PrismicImage.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicImage.vue.js","sources":["../src/PrismicImage.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ImageField, asImageSrc } from \"@prismicio/client\"\nimport {\n\tasImagePixelDensitySrcSet,\n\tasImageWidthSrcSet,\n\tisFilled,\n} from \"@prismicio/client\"\nimport { DEV } from \"esm-env\"\nimport { computed, watchEffect } from \"vue\"\n\nimport { devMsg } from \"./lib/devMsg\"\n\nimport { usePrismic } from \"./usePrismic\"\n\n/**\n * Props for `<PrismicImage />`.\n */\nexport type PrismicImageProps = {\n\t/**\n\t * The Prismic image field or thumbnail to render.\n\t */\n\tfield: ImageField | ImageField<string>\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: Parameters<typeof asImageSrc>[1]\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\"\n\n\t/**\n\t * Declare an image as decorative only if the image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\"\n} & (\n\t| {\n\t\t\t/**\n\t\t\t * Widths used to build a `srcset` value for the image field.\n\t\t\t *\n\t\t\t * If a `widths` prop is not given or `\"defaults\"` is passed, the\n\t\t\t * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,\n\t\t\t * 3840.\n\t\t\t *\n\t\t\t * If the image field contains responsive views, each responsive view can\n\t\t\t * be used as a width in the resulting `srcset` by passing `\"thumbnails\"`\n\t\t\t * as the `widths` prop.\n\t\t\t */\n\t\t\twidths?:\n\t\t\t\t| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>[\"widths\"]\n\t\t\t\t| \"thumbnails\"\n\t\t\t\t| \"defaults\"\n\t\t\t/**\n\t\t\t * Not used when the `widths` prop is used.\n\t\t\t */\n\t\t\tpixelDensities?: never\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * Not used when the `widths` prop is used.\n\t\t\t */\n\t\t\twidths?: never\n\t\t\t/**\n\t\t\t * Pixel densities used to build a `srcset` value for the image field.\n\t\t\t *\n\t\t\t * If a `pixelDensities` prop is passed `\"defaults\"`, the following pixel\n\t\t\t * densities will be used: 1, 2, 3.\n\t\t\t */\n\t\t\tpixelDensities:\n\t\t\t\t| NonNullable<\n\t\t\t\t\t\tParameters<typeof asImagePixelDensitySrcSet>[1]\n\t\t\t\t  >[\"pixelDensities\"]\n\t\t\t\t| \"defaults\"\n\t  }\n)\n\nconst props = defineProps<PrismicImageProps>()\ndefineOptions({ name: \"PrismicImage\" })\n\nconst { options } = usePrismic()\n\nif (DEV) {\n\twatchEffect(() => {\n\t\tif (typeof props.alt === \"string\" && props.alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"alt\" prop can only be used to declare an image as decorative by passing an empty string (alt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"alt\" prop or changing it to alt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t)\n\t\t}\n\n\t\tif (typeof props.fallbackAlt === \"string\" && props.fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"fallbackAlt\" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"fallbackAlt\" prop or changing it to fallbackAlt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t)\n\t\t}\n\n\t\tif (props.widths && props.pixelDensities) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] Only one of \"widths\" or \"pixelDensities\" props can be provided. You can resolve this warning by removing either the \"widths\" or \"pixelDensities\" prop. \"widths\" will be used in this case.`,\n\t\t\t)\n\t\t}\n\t})\n}\n\nconst image = computed(() => {\n\tif (!isFilled.imageThumbnail(props.field)) {\n\t\treturn\n\t}\n\n\tlet src: string | undefined\n\tlet srcSet: string | undefined\n\tif (props.widths || !props.pixelDensities) {\n\t\tconst res = asImageWidthSrcSet(props.field, {\n\t\t\t...props.imgixParams,\n\t\t\twidths:\n\t\t\t\tprops.widths === \"defaults\"\n\t\t\t\t\t? options.components?.imageWidthSrcSetDefaults\n\t\t\t\t\t: props.widths,\n\t\t})\n\n\t\tsrc = res.src\n\t\tsrcSet = res.srcset\n\t} else if (props.pixelDensities) {\n\t\tconst res = asImagePixelDensitySrcSet(props.field, {\n\t\t\t...props.imgixParams,\n\t\t\tpixelDensities:\n\t\t\t\tprops.pixelDensities === \"defaults\"\n\t\t\t\t\t? options.components?.imagePixelDensitySrcSetDefaults\n\t\t\t\t\t: props.pixelDensities,\n\t\t})\n\n\t\tsrc = res.src\n\t\tsrcSet = res.srcset\n\t}\n\n\treturn {\n\t\tsrc,\n\t\tsrcSet,\n\t\talt: props.alt ?? (props.field.alt || props.fallbackAlt),\n\t}\n})\n</script>\n\n<template>\n\t<img v-if=\"image\" :src=\"image.src\" :srcset=\"image.srcSet\" :alt=\"image.alt\" />\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuFA,UAAM,QAAQ;AAGR,UAAA,EAAE,QAAQ,IAAI,WAAW;AAE/B,QAAI,KAAK;AACR,kBAAY,MAAM;AACjB,YAAI,OAAO,MAAM,QAAQ,YAAY,MAAM,QAAQ,IAAI;AAC9C,kBAAA;AAAA,YACP,qQAAqQ;AAAA,cACpQ;AAAA,YAAA,CACA;AAAA,UACF;AAAA,QAAA;AAGD,YAAI,OAAO,MAAM,gBAAgB,YAAY,MAAM,gBAAgB,IAAI;AAC9D,kBAAA;AAAA,YACP,qSAAqS;AAAA,cACpS;AAAA,YAAA,CACA;AAAA,UACF;AAAA,QAAA;AAGG,YAAA,MAAM,UAAU,MAAM,gBAAgB;AACjC,kBAAA;AAAA,YACP;AAAA,UACD;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA;AAGI,UAAA,QAAQ,SAAS,MAAM;;AAC5B,UAAI,CAAC,SAAS,eAAe,MAAM,KAAK,GAAG;AAC1C;AAAA,MAAA;AAGG,UAAA;AACA,UAAA;AACJ,UAAI,MAAM,UAAU,CAAC,MAAM,gBAAgB;AACpC,cAAA,MAAM,mBAAmB,MAAM,OAAO;AAAA,UAC3C,GAAG,MAAM;AAAA,UACT,QACC,MAAM,WAAW,cACd,aAAQ,eAAR,mBAAoB,2BACpB,MAAM;AAAA,QAAA,CACV;AAED,cAAM,IAAI;AACV,iBAAS,IAAI;AAAA,MAAA,WACH,MAAM,gBAAgB;AAC1B,cAAA,MAAM,0BAA0B,MAAM,OAAO;AAAA,UAClD,GAAG,MAAM;AAAA,UACT,gBACC,MAAM,mBAAmB,cACtB,aAAQ,eAAR,mBAAoB,kCACpB,MAAM;AAAA,QAAA,CACV;AAED,cAAM,IAAI;AACV,iBAAS,IAAI;AAAA,MAAA;AAGP,aAAA;AAAA,QACN;AAAA,QACA;AAAA,QACA,KAAK,MAAM,QAAQ,MAAM,MAAM,OAAO,MAAM;AAAA,MAC7C;AAAA,IAAA,CACA;;;;;;;;;;;"}
+{"version":3,"file":"PrismicImage.vue.js","sources":["../src/PrismicImage.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ImageField, asImageSrc } from \"@prismicio/client\"\nimport {\n\tasImagePixelDensitySrcSet,\n\tasImageWidthSrcSet,\n\tisFilled,\n} from \"@prismicio/client\"\nimport { DEV } from \"esm-env\"\nimport { computed, watchEffect } from \"vue\"\n\nimport { devMsg } from \"./lib/devMsg\"\n\nimport { usePrismic } from \"./usePrismic\"\n\n/**\n * Props for `<PrismicImage />`.\n */\nexport type PrismicImageProps = {\n\t/**\n\t * The Prismic image field or thumbnail to render.\n\t */\n\tfield: ImageField | ImageField<string>\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * See: https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: Parameters<typeof asImageSrc>[1]\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\"\n\n\t/**\n\t * Declare an image as decorative only if the image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\"\n\n\t/**\n\t * The width attribute of the image element.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width\n\t */\n\twidth?: number | string\n\n\t/**\n\t * The height attribute of the image element.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height\n\t */\n\theight?: number | string\n} & (\n\t| {\n\t\t\t/**\n\t\t\t * Widths used to build a `srcset` value for the image field.\n\t\t\t *\n\t\t\t * If a `widths` prop is not given or `\"defaults\"` is passed, the\n\t\t\t * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,\n\t\t\t * 3840.\n\t\t\t *\n\t\t\t * If the image field contains responsive views, each responsive view can\n\t\t\t * be used as a width in the resulting `srcset` by passing `\"thumbnails\"`\n\t\t\t * as the `widths` prop.\n\t\t\t */\n\t\t\twidths?:\n\t\t\t\t| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>[\"widths\"]\n\t\t\t\t| \"thumbnails\"\n\t\t\t\t| \"defaults\"\n\t\t\t/**\n\t\t\t * Not used when the `widths` prop is used.\n\t\t\t */\n\t\t\tpixelDensities?: never\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * Not used when the `widths` prop is used.\n\t\t\t */\n\t\t\twidths?: never\n\t\t\t/**\n\t\t\t * Pixel densities used to build a `srcset` value for the image field.\n\t\t\t *\n\t\t\t * If a `pixelDensities` prop is passed `\"defaults\"`, the following pixel\n\t\t\t * densities will be used: 1, 2, 3.\n\t\t\t */\n\t\t\tpixelDensities:\n\t\t\t\t| NonNullable<\n\t\t\t\t\t\tParameters<typeof asImagePixelDensitySrcSet>[1]\n\t\t\t\t  >[\"pixelDensities\"]\n\t\t\t\t| \"defaults\"\n\t  }\n)\n\nconst props = defineProps<PrismicImageProps>()\ndefineOptions({ name: \"PrismicImage\" })\n\nconst { options } = usePrismic()\n\nif (DEV) {\n\twatchEffect(() => {\n\t\tif (typeof props.alt === \"string\" && props.alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"alt\" prop can only be used to declare an image as decorative by passing an empty string (alt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"alt\" prop or changing it to alt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t)\n\t\t}\n\n\t\tif (typeof props.fallbackAlt === \"string\" && props.fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] The \"fallbackAlt\" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"fallbackAlt\" prop or changing it to fallbackAlt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t)\n\t\t}\n\n\t\tif (props.widths && props.pixelDensities) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicImage] Only one of \"widths\" or \"pixelDensities\" props can be provided. You can resolve this warning by removing either the \"widths\" or \"pixelDensities\" prop. \"widths\" will be used in this case.`,\n\t\t\t)\n\t\t}\n\t})\n}\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input\n\t} else {\n\t\tconst parsed = Number.parseInt(input)\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined\n\t\t} else {\n\t\t\treturn parsed\n\t\t}\n\t}\n}\n\nconst image = computed(() => {\n\tif (!isFilled.imageThumbnail(props.field)) {\n\t\treturn\n\t}\n\n\tlet src: string | undefined\n\tlet srcSet: string | undefined\n\tif (props.widths || !props.pixelDensities) {\n\t\tconst res = asImageWidthSrcSet(props.field, {\n\t\t\t...props.imgixParams,\n\t\t\twidths:\n\t\t\t\tprops.widths === \"defaults\"\n\t\t\t\t\t? options.components?.imageWidthSrcSetDefaults\n\t\t\t\t\t: props.widths,\n\t\t})\n\n\t\tsrc = res.src\n\t\tsrcSet = res.srcset\n\t} else if (props.pixelDensities) {\n\t\tconst res = asImagePixelDensitySrcSet(props.field, {\n\t\t\t...props.imgixParams,\n\t\t\tpixelDensities:\n\t\t\t\tprops.pixelDensities === \"defaults\"\n\t\t\t\t\t? options.components?.imagePixelDensitySrcSetDefaults\n\t\t\t\t\t: props.pixelDensities,\n\t\t})\n\n\t\tsrc = res.src\n\t\tsrcSet = res.srcset\n\t}\n\n\tconst ar = props.field.dimensions.width / props.field.dimensions.height\n\n\tconst castedWidth = castInt(props.width)\n\tconst castedHeight = castInt(props.height)\n\n\tlet resolvedWidth = castedWidth ?? props.field.dimensions.width\n\tlet resolvedHeight = castedHeight ?? props.field.dimensions.height\n\n\tif (castedWidth != null && castedHeight == null) {\n\t\tresolvedHeight = castedWidth / ar\n\t} else if (castedWidth == null && castedHeight != null) {\n\t\tresolvedWidth = castedHeight * ar\n\t}\n\n\treturn {\n\t\tsrc,\n\t\tsrcSet,\n\t\talt: props.alt ?? (props.field.alt || props.fallbackAlt),\n\t\twidth: Math.round(resolvedWidth),\n\t\theight: Math.round(resolvedHeight),\n\t}\n})\n</script>\n\n<template>\n\t<img\n\t\tv-if=\"image\"\n\t\t:src=\"image.src\"\n\t\t:srcset=\"image.srcSet\"\n\t\t:alt=\"image.alt\"\n\t\t:width=\"image.width\"\n\t\t:height=\"image.height\"\n\t/>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAuGA,UAAM,QAAQ;AAGR,UAAA,EAAE,QAAQ,IAAI,WAAW;AAE/B,QAAI,KAAK;AACR,kBAAY,MAAM;AACjB,YAAI,OAAO,MAAM,QAAQ,YAAY,MAAM,QAAQ,IAAI;AAC9C,kBAAA;AAAA,YACP,qQAAqQ;AAAA,cACpQ;AAAA,YAAA,CACA;AAAA,UACF;AAAA,QAAA;AAGD,YAAI,OAAO,MAAM,gBAAgB,YAAY,MAAM,gBAAgB,IAAI;AAC9D,kBAAA;AAAA,YACP,qSAAqS;AAAA,cACpS;AAAA,YAAA,CACA;AAAA,UACF;AAAA,QAAA;AAGG,YAAA,MAAM,UAAU,MAAM,gBAAgB;AACjC,kBAAA;AAAA,YACP;AAAA,UACD;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA;AAGI,UAAA,UAAU,CAAC,UAA2D;AAC3E,UAAI,OAAO,UAAU,YAAY,OAAO,UAAU,aAAa;AACvD,eAAA;AAAA,MAAA,OACD;AACA,cAAA,SAAS,OAAO,SAAS,KAAK;AAEhC,YAAA,OAAO,MAAM,MAAM,GAAG;AAClB,iBAAA;AAAA,QAAA,OACD;AACC,iBAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAEF;AAEM,UAAA,QAAQ,SAAS,MAAM;;AAC5B,UAAI,CAAC,SAAS,eAAe,MAAM,KAAK,GAAG;AAC1C;AAAA,MAAA;AAGG,UAAA;AACA,UAAA;AACJ,UAAI,MAAM,UAAU,CAAC,MAAM,gBAAgB;AACpC,cAAA,MAAM,mBAAmB,MAAM,OAAO;AAAA,UAC3C,GAAG,MAAM;AAAA,UACT,QACC,MAAM,WAAW,cACd,aAAQ,eAAR,mBAAoB,2BACpB,MAAM;AAAA,QAAA,CACV;AAED,cAAM,IAAI;AACV,iBAAS,IAAI;AAAA,MAAA,WACH,MAAM,gBAAgB;AAC1B,cAAA,MAAM,0BAA0B,MAAM,OAAO;AAAA,UAClD,GAAG,MAAM;AAAA,UACT,gBACC,MAAM,mBAAmB,cACtB,aAAQ,eAAR,mBAAoB,kCACpB,MAAM;AAAA,QAAA,CACV;AAED,cAAM,IAAI;AACV,iBAAS,IAAI;AAAA,MAAA;AAGd,YAAM,KAAK,MAAM,MAAM,WAAW,QAAQ,MAAM,MAAM,WAAW;AAE3D,YAAA,cAAc,QAAQ,MAAM,KAAK;AACjC,YAAA,eAAe,QAAQ,MAAM,MAAM;AAEzC,UAAI,gBAAgB,eAAe,MAAM,MAAM,WAAW;AAC1D,UAAI,iBAAiB,gBAAgB,MAAM,MAAM,WAAW;AAExD,UAAA,eAAe,QAAQ,gBAAgB,MAAM;AAChD,yBAAiB,cAAc;AAAA,MACrB,WAAA,eAAe,QAAQ,gBAAgB,MAAM;AACvD,wBAAgB,eAAe;AAAA,MAAA;AAGzB,aAAA;AAAA,QACN;AAAA,QACA;AAAA,QACA,KAAK,MAAM,QAAQ,MAAM,MAAM,OAAO,MAAM;AAAA,QAC5C,OAAO,KAAK,MAAM,aAAa;AAAA,QAC/B,QAAQ,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IAAA,CACA;;;;;;;;;;;;;"}

package/dist/package.json.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const version = "5.2.1";
+const version = "5.3.0";
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.map

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const version = "5.2.1";
+const version = "5.3.0";
 export {
   version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/vue",
-	"version": "5.2.1",
+	"version": "5.3.0",
 	"description": "Vue plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",

package/src/PrismicImage.vue

@@ -44,6 +44,22 @@ export type PrismicImageProps = {
 	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
 	 */
 	fallbackAlt?: ""
+
+	/**
+	 * The width attribute of the image element.
+	 *
+	 * See:
+	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width
+	 */
+	width?: number | string
+
+	/**
+	 * The height attribute of the image element.
+	 *
+	 * See:
+	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height
+	 */
+	height?: number | string
 } & (
 	| {
 			/**
@@ -116,6 +132,20 @@ if (DEV) {
 	})
 }
 
+const castInt = (input: string | number | undefined): number | undefined => {
+	if (typeof input === "number" || typeof input === "undefined") {
+		return input
+	} else {
+		const parsed = Number.parseInt(input)
+
+		if (Number.isNaN(parsed)) {
+			return undefined
+		} else {
+			return parsed
+		}
+	}
+}
+
 const image = computed(() => {
 	if (!isFilled.imageThumbnail(props.field)) {
 		return
@@ -147,14 +177,37 @@ const image = computed(() => {
 		srcSet = res.srcset
 	}
 
+	const ar = props.field.dimensions.width / props.field.dimensions.height
+
+	const castedWidth = castInt(props.width)
+	const castedHeight = castInt(props.height)
+
+	let resolvedWidth = castedWidth ?? props.field.dimensions.width
+	let resolvedHeight = castedHeight ?? props.field.dimensions.height
+
+	if (castedWidth != null && castedHeight == null) {
+		resolvedHeight = castedWidth / ar
+	} else if (castedWidth == null && castedHeight != null) {
+		resolvedWidth = castedHeight * ar
+	}
+
 	return {
 		src,
 		srcSet,
 		alt: props.alt ?? (props.field.alt || props.fallbackAlt),
+		width: Math.round(resolvedWidth),
+		height: Math.round(resolvedHeight),
 	}
 })
 </script>
 
 <template>
-	<img v-if="image" :src="image.src" :srcset="image.srcSet" :alt="image.alt" />
+	<img
+		v-if="image"
+		:src="image.src"
+		:srcset="image.srcSet"
+		:alt="image.alt"
+		:width="image.width"
+		:height="image.height"
+	/>
 </template>