@prismicio/vue 5.2.0 → 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/PrismicEmbed.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, unref, openBlock, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
+import { defineComponent, createBlock, createCommentVNode, unref, openBlock, resolveDynamicComponent } from "vue";
 import { isFilled } from "@prismicio/client";
 const defaultWrapper = "div";
 const _sfc_main = /* @__PURE__ */ defineComponent({

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

@@ -1,9 +1,9 @@
-import { defineComponent, watchEffect, computed, openBlock, createElementBlock, createCommentVNode } from "vue";
+import { defineComponent, watchEffect, computed, createElementBlock, createCommentVNode, openBlock } from "vue";
 import { isFilled, asImageWidthSrcSet, asImagePixelDensitySrcSet } from "@prismicio/client";
 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/PrismicLink.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeProps, guardReactiveProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, computed, createBlock, openBlock, resolveDynamicComponent, normalizeProps, guardReactiveProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { asLinkAttrs } from "@prismicio/client";
 import { isInternalURL } from "./lib/isInternalURL.js";
 import { usePrismic } from "./usePrismic.js";

package/dist/PrismicRichText/DeprecatedPrismicRichText.vue.cjs

@@ -11,11 +11,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "DeprecatedPrismicRichText" },
   __name: "DeprecatedPrismicRichText",
   props: {
-    field: {},
-    linkResolver: {},
-    serializer: { type: Function },
-    wrapper: {},
-    fallback: {}
+    field: {
+      type: Array
+    },
+    fallback: {
+      type: String
+    },
+    linkResolver: {
+      type: Function
+    },
+    serializer: {
+      type: [Object, Function]
+    },
+    wrapper: {
+      type: [String, Object, Function]
+    }
   },
   setup(__props) {
     const props = __props;
@@ -77,7 +87,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       removeListeners();
     });
     return (_ctx, _cache) => {
-      return vue.unref(client.isFilled).richText(_ctx.field) || _ctx.fallback ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.wrapper || defaultWrapper), {
+      return vue.unref(client.isFilled).richText(__props.field) || __props.fallback ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.wrapper || defaultWrapper), {
         key: 0,
         ref_key: "root",
         ref: root,

package/dist/PrismicRichText/DeprecatedPrismicRichText.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DeprecatedPrismicRichText.vue.cjs","sources":["../../src/PrismicRichText/DeprecatedPrismicRichText.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// TODO: Remove in v6\nimport { asHTML, isFilled } from \"@prismicio/client\"\nimport { DEV } from \"esm-env\"\nimport type { Component } from \"vue\"\nimport {\n\tcomputed,\n\tinject,\n\tnextTick,\n\tonBeforeUnmount,\n\tonMounted,\n\tref,\n\twatch,\n} from \"vue\"\nimport { routerKey } from \"vue-router\"\n\nimport { devMsg } from \"../lib/devMsg\"\nimport { isInternalURL } from \"../lib/isInternalURL\"\n\nimport { usePrismic } from \"../usePrismic\"\n\nimport type { PrismicRichTextProps } from \"./PrismicRichText.vue\"\n\n/**\n * The default component rendered to wrap the HTML output.\n */\nconst defaultWrapper = \"div\"\n\nconst props = defineProps<\n\tPick<\n\t\tPrismicRichTextProps,\n\t\t\"field\" | \"linkResolver\" | \"serializer\" | \"wrapper\"\n\t> & { fallback?: string }\n>()\ndefineOptions({ name: \"DeprecatedPrismicRichText\" })\n\nconst { options } = usePrismic()\n\nif (DEV) {\n\tonMounted(() => {\n\t\tconsole.warn(\n\t\t\t`[PrismicRichText] You're using the deprecated version of \\`<PrismicRichText>\\` because either the \\`serializer\\` prop or the plugin \\`richTextSerializer\\` option were provided. This API will be removed in a future major. For more details, see ${devMsg(\n\t\t\t\t\"html-serialization-is-deprecated-with-prismic-rich-text\",\n\t\t\t)}`,\n\t\t)\n\t})\n}\n\nconst html = computed(() => {\n\tif (!isFilled.richText(props.field)) {\n\t\treturn props.fallback ?? \"\"\n\t}\n\n\tconst linkResolver = props.linkResolver ?? options.linkResolver\n\tconst serializer = props.serializer ?? options.richTextSerializer\n\n\treturn asHTML(props.field, { linkResolver, serializer })\n})\n\n// Internal links handling\nconst root = ref<HTMLElement | Comment | Component | null>(null)\n\nconst maybeRouter = inject(routerKey, null)\n\ntype InternalLink = {\n\telement: HTMLAnchorElement\n\tlistener: EventListener\n}\n\nlet links: InternalLink[] = []\n\nconst navigate: EventListener = function (\n\tthis: { href: string },\n\tevent: Event,\n) {\n\tevent.preventDefault()\n\tmaybeRouter?.push(this.href)\n}\n\nconst addListeners = () => {\n\tconst node: HTMLElement | Comment | null =\n\t\troot.value && \"$el\" in root.value ? root.value.$el : root.value\n\tif (node && \"querySelectorAll\" in node) {\n\t\t// Get all internal link tags and add listeners on them\n\t\tlinks = Array.from(node.querySelectorAll(\"a\"))\n\t\t\t.map((element) => {\n\t\t\t\tconst href = element.getAttribute(\"href\")\n\n\t\t\t\tif (href && isInternalURL(href)) {\n\t\t\t\t\tconst listener = navigate.bind({ href })\n\t\t\t\t\telement.addEventListener(\"click\", listener)\n\n\t\t\t\t\treturn { element, listener }\n\t\t\t\t} else {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t})\n\t\t\t.filter((link): link is InternalLink => link as boolean)\n\t}\n}\n\nconst removeListeners = () => {\n\tlinks.forEach(({ element, listener }) =>\n\t\telement.removeEventListener(\"click\", listener),\n\t)\n\tlinks = []\n}\n\nonMounted(() => {\n\tremoveListeners()\n\tnextTick(addListeners)\n})\n\nwatch(html, () => {\n\tremoveListeners()\n\tnextTick(addListeners)\n})\n\nonBeforeUnmount(() => {\n\tremoveListeners()\n})\n</script>\n\n<template>\n\t<component\n\t\tv-if=\"isFilled.richText(field) || fallback\"\n\t\tref=\"root\"\n\t\t:is=\"wrapper || defaultWrapper\"\n\t\tv-html=\"html\"\n\t/>\n</template>\n"],"names":["usePrismic","DEV","onMounted","devMsg","computed","isFilled","asHTML","ref","inject","routerKey","isInternalURL","nextTick","watch","onBeforeUnmount"],"mappings":";;;;;;;;AA0BA,MAAM,iBAAiB;;;;;;;;;;;;AAEvB,UAAM,QAAQ;AAQR,UAAA,EAAE,QAAQ,IAAIA,sBAAW;AAE/B,QAAIC,YAAK;AACRC,UAAAA,UAAU,MAAM;AACP,gBAAA;AAAA,UACP,sPAAsPC,OAAA;AAAA,YACrP;AAAA,UAAA,CACA;AAAA,QACF;AAAA,MAAA,CACA;AAAA,IAAA;AAGI,UAAA,OAAOC,IAAAA,SAAS,MAAM;AAC3B,UAAI,CAACC,OAAAA,SAAS,SAAS,MAAM,KAAK,GAAG;AACpC,eAAO,MAAM,YAAY;AAAA,MAAA;AAGpB,YAAA,eAAe,MAAM,gBAAgB,QAAQ;AAC7C,YAAA,aAAa,MAAM,cAAc,QAAQ;AAE/C,aAAOC,OAAAA,OAAO,MAAM,OAAO,EAAE,cAAc,YAAY;AAAA,IAAA,CACvD;AAGK,UAAA,OAAOC,QAA8C,IAAI;AAEzD,UAAA,cAAcC,IAAAA,OAAOC,UAAA,WAAW,IAAI;AAO1C,QAAI,QAAwB,CAAC;AAEvB,UAAA,WAA0B,SAE/B,OACC;AACD,YAAM,eAAe;AACR,iDAAA,KAAK,KAAK;AAAA,IACxB;AAEA,UAAM,eAAe,MAAM;AACpB,YAAA,OACL,KAAK,SAAS,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,KAAK;AACvD,UAAA,QAAQ,sBAAsB,MAAM;AAE/B,gBAAA,MAAM,KAAK,KAAK,iBAAiB,GAAG,CAAC,EAC3C,IAAI,CAAC,YAAY;AACX,gBAAA,OAAO,QAAQ,aAAa,MAAM;AAEpC,cAAA,QAAQC,4BAAc,IAAI,GAAG;AAChC,kBAAM,WAAW,SAAS,KAAK,EAAE,MAAM;AAC/B,oBAAA,iBAAiB,SAAS,QAAQ;AAEnC,mBAAA,EAAE,SAAS,SAAS;AAAA,UAAA,OACrB;AACC,mBAAA;AAAA,UAAA;AAAA,QAER,CAAA,EACA,OAAO,CAAC,SAA+B,IAAe;AAAA,MAAA;AAAA,IAE1D;AAEA,UAAM,kBAAkB,MAAM;AACvB,YAAA;AAAA,QAAQ,CAAC,EAAE,SAAS,SAAA,MACzB,QAAQ,oBAAoB,SAAS,QAAQ;AAAA,MAC9C;AACA,cAAQ,CAAC;AAAA,IACV;AAEAR,QAAAA,UAAU,MAAM;AACC,sBAAA;AAChBS,UAAAA,SAAS,YAAY;AAAA,IAAA,CACrB;AAEDC,QAAA,MAAM,MAAM,MAAM;AACD,sBAAA;AAChBD,UAAAA,SAAS,YAAY;AAAA,IAAA,CACrB;AAEDE,QAAAA,gBAAgB,MAAM;AACL,sBAAA;AAAA,IAAA,CAChB;;;;;;;;;;;;"}
+{"version":3,"file":"DeprecatedPrismicRichText.vue.cjs","sources":["../../src/PrismicRichText/DeprecatedPrismicRichText.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// TODO: Remove in v6\nimport { asHTML, isFilled } from \"@prismicio/client\"\nimport { DEV } from \"esm-env\"\nimport type { Component, PropType } from \"vue\"\nimport {\n\tcomputed,\n\tinject,\n\tnextTick,\n\tonBeforeUnmount,\n\tonMounted,\n\tref,\n\twatch,\n} from \"vue\"\nimport { routerKey } from \"vue-router\"\n\nimport { devMsg } from \"../lib/devMsg\"\nimport { isInternalURL } from \"../lib/isInternalURL\"\n\nimport { usePrismic } from \"../usePrismic\"\n\nimport type { PrismicRichTextProps } from \"./PrismicRichText.vue\"\n\n/**\n * The default component rendered to wrap the HTML output.\n */\nconst defaultWrapper = \"div\"\n\n// We're forced to declare props using the JavaScript syntax because `@vue/compiler-sfc`\n// has limitations for inferring types from complex objects.\nconst props = defineProps({\n\tfield: {\n\t\ttype: Array as unknown as PropType<PrismicRichTextProps[\"field\"]>,\n\t},\n\tfallback: {\n\t\ttype: String as PropType<string>,\n\t},\n\tlinkResolver: {\n\t\ttype: Function as PropType<PrismicRichTextProps[\"linkResolver\"]>,\n\t},\n\tserializer: {\n\t\ttype: [Object, Function] as PropType<PrismicRichTextProps[\"serializer\"]>,\n\t},\n\twrapper: {\n\t\ttype: [String, Object, Function] as PropType<\n\t\t\tPrismicRichTextProps[\"wrapper\"]\n\t\t>,\n\t},\n})\ndefineOptions({ name: \"DeprecatedPrismicRichText\" })\n\nconst { options } = usePrismic()\n\nif (DEV) {\n\tonMounted(() => {\n\t\tconsole.warn(\n\t\t\t`[PrismicRichText] You're using the deprecated version of \\`<PrismicRichText>\\` because either the \\`serializer\\` prop or the plugin \\`richTextSerializer\\` option were provided. This API will be removed in a future major. For more details, see ${devMsg(\n\t\t\t\t\"html-serialization-is-deprecated-with-prismic-rich-text\",\n\t\t\t)}`,\n\t\t)\n\t})\n}\n\nconst html = computed(() => {\n\tif (!isFilled.richText(props.field)) {\n\t\treturn props.fallback ?? \"\"\n\t}\n\n\tconst linkResolver = props.linkResolver ?? options.linkResolver\n\tconst serializer = props.serializer ?? options.richTextSerializer\n\n\treturn asHTML(props.field, { linkResolver, serializer })\n})\n\n// Internal links handling\nconst root = ref<HTMLElement | Comment | Component | null>(null)\n\nconst maybeRouter = inject(routerKey, null)\n\ntype InternalLink = {\n\telement: HTMLAnchorElement\n\tlistener: EventListener\n}\n\nlet links: InternalLink[] = []\n\nconst navigate: EventListener = function (\n\tthis: { href: string },\n\tevent: Event,\n) {\n\tevent.preventDefault()\n\tmaybeRouter?.push(this.href)\n}\n\nconst addListeners = () => {\n\tconst node: HTMLElement | Comment | null =\n\t\troot.value && \"$el\" in root.value ? root.value.$el : root.value\n\tif (node && \"querySelectorAll\" in node) {\n\t\t// Get all internal link tags and add listeners on them\n\t\tlinks = Array.from(node.querySelectorAll(\"a\"))\n\t\t\t.map((element) => {\n\t\t\t\tconst href = element.getAttribute(\"href\")\n\n\t\t\t\tif (href && isInternalURL(href)) {\n\t\t\t\t\tconst listener = navigate.bind({ href })\n\t\t\t\t\telement.addEventListener(\"click\", listener)\n\n\t\t\t\t\treturn { element, listener }\n\t\t\t\t} else {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t})\n\t\t\t.filter((link): link is InternalLink => link as boolean)\n\t}\n}\n\nconst removeListeners = () => {\n\tlinks.forEach(({ element, listener }) =>\n\t\telement.removeEventListener(\"click\", listener),\n\t)\n\tlinks = []\n}\n\nonMounted(() => {\n\tremoveListeners()\n\tnextTick(addListeners)\n})\n\nwatch(html, () => {\n\tremoveListeners()\n\tnextTick(addListeners)\n})\n\nonBeforeUnmount(() => {\n\tremoveListeners()\n})\n</script>\n\n<template>\n\t<component\n\t\tv-if=\"isFilled.richText(field) || fallback\"\n\t\tref=\"root\"\n\t\t:is=\"wrapper || defaultWrapper\"\n\t\tv-html=\"html\"\n\t/>\n</template>\n"],"names":["usePrismic","DEV","onMounted","devMsg","computed","isFilled","asHTML","ref","inject","routerKey","isInternalURL","nextTick","watch","onBeforeUnmount"],"mappings":";;;;;;;;AA0BA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;AAIvB,UAAM,QAAQ;AAqBR,UAAA,EAAE,QAAQ,IAAIA,sBAAW;AAE/B,QAAIC,YAAK;AACRC,UAAAA,UAAU,MAAM;AACP,gBAAA;AAAA,UACP,sPAAsPC,OAAA;AAAA,YACrP;AAAA,UAAA,CACA;AAAA,QACF;AAAA,MAAA,CACA;AAAA,IAAA;AAGI,UAAA,OAAOC,IAAAA,SAAS,MAAM;AAC3B,UAAI,CAACC,OAAAA,SAAS,SAAS,MAAM,KAAK,GAAG;AACpC,eAAO,MAAM,YAAY;AAAA,MAAA;AAGpB,YAAA,eAAe,MAAM,gBAAgB,QAAQ;AAC7C,YAAA,aAAa,MAAM,cAAc,QAAQ;AAE/C,aAAOC,OAAAA,OAAO,MAAM,OAAO,EAAE,cAAc,YAAY;AAAA,IAAA,CACvD;AAGK,UAAA,OAAOC,QAA8C,IAAI;AAEzD,UAAA,cAAcC,IAAAA,OAAOC,UAAA,WAAW,IAAI;AAO1C,QAAI,QAAwB,CAAC;AAEvB,UAAA,WAA0B,SAE/B,OACC;AACD,YAAM,eAAe;AACR,iDAAA,KAAK,KAAK;AAAA,IACxB;AAEA,UAAM,eAAe,MAAM;AACpB,YAAA,OACL,KAAK,SAAS,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,KAAK;AACvD,UAAA,QAAQ,sBAAsB,MAAM;AAE/B,gBAAA,MAAM,KAAK,KAAK,iBAAiB,GAAG,CAAC,EAC3C,IAAI,CAAC,YAAY;AACX,gBAAA,OAAO,QAAQ,aAAa,MAAM;AAEpC,cAAA,QAAQC,4BAAc,IAAI,GAAG;AAChC,kBAAM,WAAW,SAAS,KAAK,EAAE,MAAM;AAC/B,oBAAA,iBAAiB,SAAS,QAAQ;AAEnC,mBAAA,EAAE,SAAS,SAAS;AAAA,UAAA,OACrB;AACC,mBAAA;AAAA,UAAA;AAAA,QAER,CAAA,EACA,OAAO,CAAC,SAA+B,IAAe;AAAA,MAAA;AAAA,IAE1D;AAEA,UAAM,kBAAkB,MAAM;AACvB,YAAA;AAAA,QAAQ,CAAC,EAAE,SAAS,SAAA,MACzB,QAAQ,oBAAoB,SAAS,QAAQ;AAAA,MAC9C;AACA,cAAQ,CAAC;AAAA,IACV;AAEAR,QAAAA,UAAU,MAAM;AACC,sBAAA;AAChBS,UAAAA,SAAS,YAAY;AAAA,IAAA,CACrB;AAEDC,QAAA,MAAM,MAAM,MAAM;AACD,sBAAA;AAChBD,UAAAA,SAAS,YAAY;AAAA,IAAA,CACrB;AAEDE,QAAAA,gBAAgB,MAAM;AACL,sBAAA;AAAA,IAAA,CAChB;;;;;;;;;;;;"}

package/dist/PrismicRichText/DeprecatedPrismicRichText.vue.d.ts

@@ -1,8 +1,38 @@
+import { PropType } from 'vue';
 import { PrismicRichTextProps } from './PrismicRichText.vue';
-type __VLS_Props = Pick<PrismicRichTextProps, "field" | "linkResolver" | "serializer" | "wrapper"> & {
-    fallback?: string;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    field: {
+        type: PropType<PrismicRichTextProps["field"]>;
+    };
+    fallback: {
+        type: PropType<string>;
+    };
+    linkResolver: {
+        type: PropType<PrismicRichTextProps["linkResolver"]>;
+    };
+    serializer: {
+        type: PropType<PrismicRichTextProps["serializer"]>;
+    };
+    wrapper: {
+        type: PropType<PrismicRichTextProps["wrapper"]>;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    field: {
+        type: PropType<PrismicRichTextProps["field"]>;
+    };
+    fallback: {
+        type: PropType<string>;
+    };
+    linkResolver: {
+        type: PropType<PrismicRichTextProps["linkResolver"]>;
+    };
+    serializer: {
+        type: PropType<PrismicRichTextProps["serializer"]>;
+    };
+    wrapper: {
+        type: PropType<PrismicRichTextProps["wrapper"]>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     root: unknown;
 }, any>;
 export default _default;

package/dist/PrismicRichText/DeprecatedPrismicRichText.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, computed, ref, inject, nextTick, watch, onBeforeUnmount, unref, openBlock, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
+import { defineComponent, onMounted, computed, ref, inject, nextTick, watch, onBeforeUnmount, createBlock, createCommentVNode, unref, openBlock, resolveDynamicComponent } from "vue";
 import { isFilled, asHTML } from "@prismicio/client";
 import { DEV } from "esm-env";
 import { routerKey } from "vue-router";
@@ -10,11 +10,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "DeprecatedPrismicRichText" },
   __name: "DeprecatedPrismicRichText",
   props: {
-    field: {},
-    linkResolver: {},
-    serializer: { type: Function },
-    wrapper: {},
-    fallback: {}
+    field: {
+      type: Array
+    },
+    fallback: {
+      type: String
+    },
+    linkResolver: {
+      type: Function
+    },
+    serializer: {
+      type: [Object, Function]
+    },
+    wrapper: {
+      type: [String, Object, Function]
+    }
   },
   setup(__props) {
     const props = __props;
@@ -76,7 +86,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       removeListeners();
     });
     return (_ctx, _cache) => {
-      return unref(isFilled).richText(_ctx.field) || _ctx.fallback ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.wrapper || defaultWrapper), {
+      return unref(isFilled).richText(__props.field) || __props.fallback ? (openBlock(), createBlock(resolveDynamicComponent(__props.wrapper || defaultWrapper), {
         key: 0,
         ref_key: "root",
         ref: root,

package/dist/PrismicRichText/DeprecatedPrismicRichText.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeprecatedPrismicRichText.vue.js","sources":["../../src/PrismicRichText/DeprecatedPrismicRichText.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// TODO: Remove in v6\nimport { asHTML, isFilled } from \"@prismicio/client\"\nimport { DEV } from \"esm-env\"\nimport type { Component } from \"vue\"\nimport {\n\tcomputed,\n\tinject,\n\tnextTick,\n\tonBeforeUnmount,\n\tonMounted,\n\tref,\n\twatch,\n} from \"vue\"\nimport { routerKey } from \"vue-router\"\n\nimport { devMsg } from \"../lib/devMsg\"\nimport { isInternalURL } from \"../lib/isInternalURL\"\n\nimport { usePrismic } from \"../usePrismic\"\n\nimport type { PrismicRichTextProps } from \"./PrismicRichText.vue\"\n\n/**\n * The default component rendered to wrap the HTML output.\n */\nconst defaultWrapper = \"div\"\n\nconst props = defineProps<\n\tPick<\n\t\tPrismicRichTextProps,\n\t\t\"field\" | \"linkResolver\" | \"serializer\" | \"wrapper\"\n\t> & { fallback?: string }\n>()\ndefineOptions({ name: \"DeprecatedPrismicRichText\" })\n\nconst { options } = usePrismic()\n\nif (DEV) {\n\tonMounted(() => {\n\t\tconsole.warn(\n\t\t\t`[PrismicRichText] You're using the deprecated version of \\`<PrismicRichText>\\` because either the \\`serializer\\` prop or the plugin \\`richTextSerializer\\` option were provided. This API will be removed in a future major. For more details, see ${devMsg(\n\t\t\t\t\"html-serialization-is-deprecated-with-prismic-rich-text\",\n\t\t\t)}`,\n\t\t)\n\t})\n}\n\nconst html = computed(() => {\n\tif (!isFilled.richText(props.field)) {\n\t\treturn props.fallback ?? \"\"\n\t}\n\n\tconst linkResolver = props.linkResolver ?? options.linkResolver\n\tconst serializer = props.serializer ?? options.richTextSerializer\n\n\treturn asHTML(props.field, { linkResolver, serializer })\n})\n\n// Internal links handling\nconst root = ref<HTMLElement | Comment | Component | null>(null)\n\nconst maybeRouter = inject(routerKey, null)\n\ntype InternalLink = {\n\telement: HTMLAnchorElement\n\tlistener: EventListener\n}\n\nlet links: InternalLink[] = []\n\nconst navigate: EventListener = function (\n\tthis: { href: string },\n\tevent: Event,\n) {\n\tevent.preventDefault()\n\tmaybeRouter?.push(this.href)\n}\n\nconst addListeners = () => {\n\tconst node: HTMLElement | Comment | null =\n\t\troot.value && \"$el\" in root.value ? root.value.$el : root.value\n\tif (node && \"querySelectorAll\" in node) {\n\t\t// Get all internal link tags and add listeners on them\n\t\tlinks = Array.from(node.querySelectorAll(\"a\"))\n\t\t\t.map((element) => {\n\t\t\t\tconst href = element.getAttribute(\"href\")\n\n\t\t\t\tif (href && isInternalURL(href)) {\n\t\t\t\t\tconst listener = navigate.bind({ href })\n\t\t\t\t\telement.addEventListener(\"click\", listener)\n\n\t\t\t\t\treturn { element, listener }\n\t\t\t\t} else {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t})\n\t\t\t.filter((link): link is InternalLink => link as boolean)\n\t}\n}\n\nconst removeListeners = () => {\n\tlinks.forEach(({ element, listener }) =>\n\t\telement.removeEventListener(\"click\", listener),\n\t)\n\tlinks = []\n}\n\nonMounted(() => {\n\tremoveListeners()\n\tnextTick(addListeners)\n})\n\nwatch(html, () => {\n\tremoveListeners()\n\tnextTick(addListeners)\n})\n\nonBeforeUnmount(() => {\n\tremoveListeners()\n})\n</script>\n\n<template>\n\t<component\n\t\tv-if=\"isFilled.richText(field) || fallback\"\n\t\tref=\"root\"\n\t\t:is=\"wrapper || defaultWrapper\"\n\t\tv-html=\"html\"\n\t/>\n</template>\n"],"names":[],"mappings":";;;;;;;AA0BA,MAAM,iBAAiB;;;;;;;;;;;;AAEvB,UAAM,QAAQ;AAQR,UAAA,EAAE,QAAQ,IAAI,WAAW;AAE/B,QAAI,KAAK;AACR,gBAAU,MAAM;AACP,gBAAA;AAAA,UACP,sPAAsP;AAAA,YACrP;AAAA,UAAA,CACA;AAAA,QACF;AAAA,MAAA,CACA;AAAA,IAAA;AAGI,UAAA,OAAO,SAAS,MAAM;AAC3B,UAAI,CAAC,SAAS,SAAS,MAAM,KAAK,GAAG;AACpC,eAAO,MAAM,YAAY;AAAA,MAAA;AAGpB,YAAA,eAAe,MAAM,gBAAgB,QAAQ;AAC7C,YAAA,aAAa,MAAM,cAAc,QAAQ;AAE/C,aAAO,OAAO,MAAM,OAAO,EAAE,cAAc,YAAY;AAAA,IAAA,CACvD;AAGK,UAAA,OAAO,IAA8C,IAAI;AAEzD,UAAA,cAAc,OAAO,WAAW,IAAI;AAO1C,QAAI,QAAwB,CAAC;AAEvB,UAAA,WAA0B,SAE/B,OACC;AACD,YAAM,eAAe;AACR,iDAAA,KAAK,KAAK;AAAA,IACxB;AAEA,UAAM,eAAe,MAAM;AACpB,YAAA,OACL,KAAK,SAAS,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,KAAK;AACvD,UAAA,QAAQ,sBAAsB,MAAM;AAE/B,gBAAA,MAAM,KAAK,KAAK,iBAAiB,GAAG,CAAC,EAC3C,IAAI,CAAC,YAAY;AACX,gBAAA,OAAO,QAAQ,aAAa,MAAM;AAEpC,cAAA,QAAQ,cAAc,IAAI,GAAG;AAChC,kBAAM,WAAW,SAAS,KAAK,EAAE,MAAM;AAC/B,oBAAA,iBAAiB,SAAS,QAAQ;AAEnC,mBAAA,EAAE,SAAS,SAAS;AAAA,UAAA,OACrB;AACC,mBAAA;AAAA,UAAA;AAAA,QAER,CAAA,EACA,OAAO,CAAC,SAA+B,IAAe;AAAA,MAAA;AAAA,IAE1D;AAEA,UAAM,kBAAkB,MAAM;AACvB,YAAA;AAAA,QAAQ,CAAC,EAAE,SAAS,SAAA,MACzB,QAAQ,oBAAoB,SAAS,QAAQ;AAAA,MAC9C;AACA,cAAQ,CAAC;AAAA,IACV;AAEA,cAAU,MAAM;AACC,sBAAA;AAChB,eAAS,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,MAAM,MAAM;AACD,sBAAA;AAChB,eAAS,YAAY;AAAA,IAAA,CACrB;AAED,oBAAgB,MAAM;AACL,sBAAA;AAAA,IAAA,CAChB;;;;;;;;;;;"}
+{"version":3,"file":"DeprecatedPrismicRichText.vue.js","sources":["../../src/PrismicRichText/DeprecatedPrismicRichText.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// TODO: Remove in v6\nimport { asHTML, isFilled } from \"@prismicio/client\"\nimport { DEV } from \"esm-env\"\nimport type { Component, PropType } from \"vue\"\nimport {\n\tcomputed,\n\tinject,\n\tnextTick,\n\tonBeforeUnmount,\n\tonMounted,\n\tref,\n\twatch,\n} from \"vue\"\nimport { routerKey } from \"vue-router\"\n\nimport { devMsg } from \"../lib/devMsg\"\nimport { isInternalURL } from \"../lib/isInternalURL\"\n\nimport { usePrismic } from \"../usePrismic\"\n\nimport type { PrismicRichTextProps } from \"./PrismicRichText.vue\"\n\n/**\n * The default component rendered to wrap the HTML output.\n */\nconst defaultWrapper = \"div\"\n\n// We're forced to declare props using the JavaScript syntax because `@vue/compiler-sfc`\n// has limitations for inferring types from complex objects.\nconst props = defineProps({\n\tfield: {\n\t\ttype: Array as unknown as PropType<PrismicRichTextProps[\"field\"]>,\n\t},\n\tfallback: {\n\t\ttype: String as PropType<string>,\n\t},\n\tlinkResolver: {\n\t\ttype: Function as PropType<PrismicRichTextProps[\"linkResolver\"]>,\n\t},\n\tserializer: {\n\t\ttype: [Object, Function] as PropType<PrismicRichTextProps[\"serializer\"]>,\n\t},\n\twrapper: {\n\t\ttype: [String, Object, Function] as PropType<\n\t\t\tPrismicRichTextProps[\"wrapper\"]\n\t\t>,\n\t},\n})\ndefineOptions({ name: \"DeprecatedPrismicRichText\" })\n\nconst { options } = usePrismic()\n\nif (DEV) {\n\tonMounted(() => {\n\t\tconsole.warn(\n\t\t\t`[PrismicRichText] You're using the deprecated version of \\`<PrismicRichText>\\` because either the \\`serializer\\` prop or the plugin \\`richTextSerializer\\` option were provided. This API will be removed in a future major. For more details, see ${devMsg(\n\t\t\t\t\"html-serialization-is-deprecated-with-prismic-rich-text\",\n\t\t\t)}`,\n\t\t)\n\t})\n}\n\nconst html = computed(() => {\n\tif (!isFilled.richText(props.field)) {\n\t\treturn props.fallback ?? \"\"\n\t}\n\n\tconst linkResolver = props.linkResolver ?? options.linkResolver\n\tconst serializer = props.serializer ?? options.richTextSerializer\n\n\treturn asHTML(props.field, { linkResolver, serializer })\n})\n\n// Internal links handling\nconst root = ref<HTMLElement | Comment | Component | null>(null)\n\nconst maybeRouter = inject(routerKey, null)\n\ntype InternalLink = {\n\telement: HTMLAnchorElement\n\tlistener: EventListener\n}\n\nlet links: InternalLink[] = []\n\nconst navigate: EventListener = function (\n\tthis: { href: string },\n\tevent: Event,\n) {\n\tevent.preventDefault()\n\tmaybeRouter?.push(this.href)\n}\n\nconst addListeners = () => {\n\tconst node: HTMLElement | Comment | null =\n\t\troot.value && \"$el\" in root.value ? root.value.$el : root.value\n\tif (node && \"querySelectorAll\" in node) {\n\t\t// Get all internal link tags and add listeners on them\n\t\tlinks = Array.from(node.querySelectorAll(\"a\"))\n\t\t\t.map((element) => {\n\t\t\t\tconst href = element.getAttribute(\"href\")\n\n\t\t\t\tif (href && isInternalURL(href)) {\n\t\t\t\t\tconst listener = navigate.bind({ href })\n\t\t\t\t\telement.addEventListener(\"click\", listener)\n\n\t\t\t\t\treturn { element, listener }\n\t\t\t\t} else {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t})\n\t\t\t.filter((link): link is InternalLink => link as boolean)\n\t}\n}\n\nconst removeListeners = () => {\n\tlinks.forEach(({ element, listener }) =>\n\t\telement.removeEventListener(\"click\", listener),\n\t)\n\tlinks = []\n}\n\nonMounted(() => {\n\tremoveListeners()\n\tnextTick(addListeners)\n})\n\nwatch(html, () => {\n\tremoveListeners()\n\tnextTick(addListeners)\n})\n\nonBeforeUnmount(() => {\n\tremoveListeners()\n})\n</script>\n\n<template>\n\t<component\n\t\tv-if=\"isFilled.richText(field) || fallback\"\n\t\tref=\"root\"\n\t\t:is=\"wrapper || defaultWrapper\"\n\t\tv-html=\"html\"\n\t/>\n</template>\n"],"names":[],"mappings":";;;;;;;AA0BA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;AAIvB,UAAM,QAAQ;AAqBR,UAAA,EAAE,QAAQ,IAAI,WAAW;AAE/B,QAAI,KAAK;AACR,gBAAU,MAAM;AACP,gBAAA;AAAA,UACP,sPAAsP;AAAA,YACrP;AAAA,UAAA,CACA;AAAA,QACF;AAAA,MAAA,CACA;AAAA,IAAA;AAGI,UAAA,OAAO,SAAS,MAAM;AAC3B,UAAI,CAAC,SAAS,SAAS,MAAM,KAAK,GAAG;AACpC,eAAO,MAAM,YAAY;AAAA,MAAA;AAGpB,YAAA,eAAe,MAAM,gBAAgB,QAAQ;AAC7C,YAAA,aAAa,MAAM,cAAc,QAAQ;AAE/C,aAAO,OAAO,MAAM,OAAO,EAAE,cAAc,YAAY;AAAA,IAAA,CACvD;AAGK,UAAA,OAAO,IAA8C,IAAI;AAEzD,UAAA,cAAc,OAAO,WAAW,IAAI;AAO1C,QAAI,QAAwB,CAAC;AAEvB,UAAA,WAA0B,SAE/B,OACC;AACD,YAAM,eAAe;AACR,iDAAA,KAAK,KAAK;AAAA,IACxB;AAEA,UAAM,eAAe,MAAM;AACpB,YAAA,OACL,KAAK,SAAS,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM,KAAK;AACvD,UAAA,QAAQ,sBAAsB,MAAM;AAE/B,gBAAA,MAAM,KAAK,KAAK,iBAAiB,GAAG,CAAC,EAC3C,IAAI,CAAC,YAAY;AACX,gBAAA,OAAO,QAAQ,aAAa,MAAM;AAEpC,cAAA,QAAQ,cAAc,IAAI,GAAG;AAChC,kBAAM,WAAW,SAAS,KAAK,EAAE,MAAM;AAC/B,oBAAA,iBAAiB,SAAS,QAAQ;AAEnC,mBAAA,EAAE,SAAS,SAAS;AAAA,UAAA,OACrB;AACC,mBAAA;AAAA,UAAA;AAAA,QAER,CAAA,EACA,OAAO,CAAC,SAA+B,IAAe;AAAA,MAAA;AAAA,IAE1D;AAEA,UAAM,kBAAkB,MAAM;AACvB,YAAA;AAAA,QAAQ,CAAC,EAAE,SAAS,SAAA,MACzB,QAAQ,oBAAoB,SAAS,QAAQ;AAAA,MAC9C;AACA,cAAQ,CAAC;AAAA,IACV;AAEA,cAAU,MAAM;AACC,sBAAA;AAChB,eAAS,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,MAAM,MAAM;AACD,sBAAA;AAChB,eAAS,YAAY;AAAA,IAAA,CACrB;AAED,oBAAgB,MAAM;AACL,sBAAA;AAAA,IAAA,CAChB;;;;;;;;;;;"}

package/dist/PrismicRichText/PrismicRichText.vue.cjs

@@ -11,12 +11,24 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "PrismicRichText" },
   __name: "PrismicRichText",
   props: {
-    field: {},
-    fallback: {},
-    components: {},
-    linkResolver: {},
-    serializer: { type: Function },
-    wrapper: {}
+    field: {
+      type: Array
+    },
+    fallback: {
+      type: [String, Object, Function]
+    },
+    components: {
+      type: Object
+    },
+    linkResolver: {
+      type: Function
+    },
+    serializer: {
+      type: [Object, Function]
+    },
+    wrapper: {
+      type: [String, Object, Function]
+    }
   },
   setup(__props) {
     const props = __props;
@@ -57,9 +69,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
     }
     return (_ctx, _cache) => {
-      return isModern.value && (vue.unref(client.isFilled).richText(_ctx.field) || _ctx.fallback) ? (vue.openBlock(), vue.createBlock(Wrapper_vue_vue_type_script_setup_true_lang, {
+      return isModern.value && (vue.unref(client.isFilled).richText(__props.field) || __props.fallback) ? (vue.openBlock(), vue.createBlock(Wrapper_vue_vue_type_script_setup_true_lang, {
         key: 0,
-        wrapper: _ctx.wrapper
+        wrapper: __props.wrapper
       }, {
         default: vue.withCtx(() => [
           children.value.length ? (vue.openBlock(), vue.createBlock(PrismicRichTextSerialize_vue_vue_type_script_setup_true_lang, {
@@ -67,16 +79,16 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             children: children.value,
             components: resolvedComponents.value,
             "link-resolver": resolvedLinkResolver.value
-          }, null, 8, ["children", "components", "link-resolver"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.fallback), { key: 1 }))
+          }, null, 8, ["children", "components", "link-resolver"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.fallback), { key: 1 }))
         ]),
         _: 1
       }, 8, ["wrapper"])) : !isModern.value ? (vue.openBlock(), vue.createBlock(DeprecatedPrismicRichText_vue_vue_type_script_setup_true_lang, {
         key: 1,
-        field: _ctx.field,
-        fallback: typeof _ctx.fallback === "string" ? _ctx.fallback : void 0,
-        "link-resolver": _ctx.linkResolver,
-        serializer: _ctx.serializer,
-        wrapper: _ctx.wrapper
+        field: __props.field,
+        fallback: typeof __props.fallback === "string" ? __props.fallback : void 0,
+        "link-resolver": __props.linkResolver,
+        serializer: __props.serializer,
+        wrapper: __props.wrapper
       }, null, 8, ["field", "fallback", "link-resolver", "serializer", "wrapper"])) : vue.createCommentVNode("", true);
     };
   }

package/dist/PrismicRichText/PrismicRichText.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicRichText.vue.cjs","sources":["../../src/PrismicRichText/PrismicRichText.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n\ttype HTMLRichTextFunctionSerializer,\n\ttype HTMLRichTextMapSerializer,\n\ttype LinkResolverFunction,\n\ttype RichTextField,\n\tisFilled,\n} from \"@prismicio/client\"\nimport { asTree } from \"@prismicio/client/richtext\"\nimport { DEV } from \"esm-env\"\nimport { computed, watchEffect } from \"vue\"\n\nimport Wrapper from \"../lib/Wrapper.vue\"\n\nimport type { ComponentOrTagName } from \"../types\"\nimport type { VueRichTextSerializer } from \"./types\"\n\nimport { usePrismic } from \"../usePrismic\"\n\nimport DeprecatedPrismicRichText from \"./DeprecatedPrismicRichText.vue\"\nimport PrismicRichTextSerialize from \"./PrismicRichTextSerialize.vue\"\n\n/**\n * Props for `<PrismicRichText />`.\n */\nexport type PrismicRichTextProps = {\n\t/**\n\t * The Prismic rich text or title field to render.\n\t */\n\tfield: RichTextField | null | undefined\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` (nothing) will be rendered.\n\t */\n\tfallback?: ComponentOrTagName\n\n\t/**\n\t * An object that maps a rich text block type to a Vue component.\n\t *\n\t * @example\n\t *\n\t * ```javascript\n\t * {\n\t *   heading1: Heading1,\n\t * }\n\t * ```\n\t */\n\tcomponents?: VueRichTextSerializer\n\n\t/**\n\t * A link resolver function used to resolve link when not using the route\n\t * resolver parameter with `@prismicio/client`.\n\t *\n\t * @defaultValue The link resolver provided to `@prismicio/vue` plugin if configured.\n\t *\n\t * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}\n\t */\n\tlinkResolver?: LinkResolverFunction\n\n\t/**\n\t * An HTML serializer to customize the way rich text fields are rendered.\n\t *\n\t * @deprecated Use `components` instead.\n\t *\n\t * @defaultValue The HTML serializer provided to `@prismicio/vue` plugin if configured.\n\t *\n\t * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}\n\t */\n\t// TODO: Remove in v6\n\tserializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer\n\n\t/**\n\t * An HTML tag name or a component used to wrap the output. `<PrismicText />`\n\t * is not wrapped by default.\n\t *\n\t * @defaultValue `\"template\"` (no wrapper)\n\t */\n\twrapper?: ComponentOrTagName\n}\n\nconst props = defineProps<PrismicRichTextProps>()\ndefineOptions({ name: \"PrismicRichText\" })\n\nconst { options } = usePrismic()\n\nconst resolvedComponents = computed(() => {\n\treturn props.components || options.components?.richTextComponents\n})\n\nconst resolvedLinkResolver = computed(() => {\n\treturn props.linkResolver || options.linkResolver\n})\n\nconst children = computed(() => {\n\treturn asTree(props.field || []).children\n})\n\nconst isModern = computed(() => {\n\t// Explicit components prop\n\tif (props.components) {\n\t\treturn true\n\t}\n\n\t// Explicit serializer prop\n\tif (props.serializer) {\n\t\treturn false\n\t}\n\n\t// Global components option\n\tif (options.components?.richTextComponents) {\n\t\treturn true\n\t}\n\n\t// Global serializer option\n\tif (options.richTextSerializer) {\n\t\treturn false\n\t}\n\n\t// Default to modern\n\treturn true\n})\n\nif (DEV) {\n\twatchEffect(() => {\n\t\t// TODO: Remove in v6\n\t\tif (props.components && props.serializer) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicRichText] Only one of \"components\" or \"serializer\" (deprecated) props can be provided. You can resolve this warning by removing either the \"components\" or \"serializer\" prop. \"components\" will be used in this case.`,\n\t\t\t)\n\t\t}\n\t})\n}\n</script>\n\n<template>\n\t<Wrapper\n\t\tv-if=\"isModern && (isFilled.richText(field) || fallback)\"\n\t\t:wrapper=\"wrapper\"\n\t>\n\t\t<PrismicRichTextSerialize\n\t\t\tv-if=\"children.length\"\n\t\t\t:children=\"children\"\n\t\t\t:components=\"resolvedComponents\"\n\t\t\t:link-resolver=\"resolvedLinkResolver\"\n\t\t/>\n\t\t<component v-else :is=\"fallback\" />\n\t</Wrapper>\n\t<DeprecatedPrismicRichText\n\t\tv-else-if=\"!isModern\"\n\t\t:field=\"field\"\n\t\t:fallback=\"typeof fallback === 'string' ? fallback : undefined\"\n\t\t:link-resolver=\"linkResolver\"\n\t\t:serializer=\"serializer\"\n\t\t:wrapper=\"wrapper\"\n\t/>\n</template>\n"],"names":["usePrismic","computed","asTree","DEV","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiFA,UAAM,QAAQ;AAGR,UAAA,EAAE,QAAQ,IAAIA,sBAAW;AAEzB,UAAA,qBAAqBC,IAAAA,SAAS,MAAM;;AAClC,aAAA,MAAM,gBAAc,aAAQ,eAAR,mBAAoB;AAAA,IAAA,CAC/C;AAEK,UAAA,uBAAuBA,IAAAA,SAAS,MAAM;AACpC,aAAA,MAAM,gBAAgB,QAAQ;AAAA,IAAA,CACrC;AAEK,UAAA,WAAWA,IAAAA,SAAS,MAAM;AAC/B,aAAOC,SAAO,OAAA,MAAM,SAAS,CAAA,CAAE,EAAE;AAAA,IAAA,CACjC;AAEK,UAAA,WAAWD,IAAAA,SAAS,MAAM;;AAE/B,UAAI,MAAM,YAAY;AACd,eAAA;AAAA,MAAA;AAIR,UAAI,MAAM,YAAY;AACd,eAAA;AAAA,MAAA;AAIJ,WAAA,aAAQ,eAAR,mBAAoB,oBAAoB;AACpC,eAAA;AAAA,MAAA;AAIR,UAAI,QAAQ,oBAAoB;AACxB,eAAA;AAAA,MAAA;AAID,aAAA;AAAA,IAAA,CACP;AAED,QAAIE,YAAK;AACRC,UAAAA,YAAY,MAAM;AAEb,YAAA,MAAM,cAAc,MAAM,YAAY;AACjC,kBAAA;AAAA,YACP;AAAA,UACD;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PrismicRichText.vue.cjs","sources":["../../src/PrismicRichText/PrismicRichText.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n\ttype HTMLRichTextFunctionSerializer,\n\ttype HTMLRichTextMapSerializer,\n\ttype LinkResolverFunction,\n\ttype RichTextField,\n\tisFilled,\n} from \"@prismicio/client\"\nimport { asTree } from \"@prismicio/client/richtext\"\nimport { DEV } from \"esm-env\"\nimport type { PropType } from \"vue\"\nimport { computed, watchEffect } from \"vue\"\n\nimport Wrapper from \"../lib/Wrapper.vue\"\n\nimport type { ComponentOrTagName } from \"../types\"\nimport type { VueRichTextSerializer } from \"./types\"\n\nimport { usePrismic } from \"../usePrismic\"\n\nimport DeprecatedPrismicRichText from \"./DeprecatedPrismicRichText.vue\"\nimport PrismicRichTextSerialize from \"./PrismicRichTextSerialize.vue\"\n\n/**\n * Props for `<PrismicRichText />`.\n */\nexport type PrismicRichTextProps = {\n\t/**\n\t * The Prismic rich text or title field to render.\n\t */\n\tfield: RichTextField | null | undefined\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` (nothing) will be rendered.\n\t */\n\tfallback?: ComponentOrTagName\n\n\t/**\n\t * An object that maps a rich text block type to a Vue component.\n\t *\n\t * @example\n\t *\n\t * ```javascript\n\t * {\n\t *   heading1: Heading1,\n\t * }\n\t * ```\n\t */\n\tcomponents?: VueRichTextSerializer\n\n\t/**\n\t * A link resolver function used to resolve link when not using the route\n\t * resolver parameter with `@prismicio/client`.\n\t *\n\t * @defaultValue The link resolver provided to `@prismicio/vue` plugin if configured.\n\t *\n\t * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}\n\t */\n\tlinkResolver?: LinkResolverFunction\n\n\t/**\n\t * An HTML serializer to customize the way rich text fields are rendered.\n\t *\n\t * @deprecated Use `components` instead.\n\t *\n\t * @defaultValue The HTML serializer provided to `@prismicio/vue` plugin if configured.\n\t *\n\t * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}\n\t */\n\t// TODO: Remove in v6\n\tserializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer\n\n\t/**\n\t * An HTML tag name or a component used to wrap the output. `<PrismicText />`\n\t * is not wrapped by default.\n\t *\n\t * @defaultValue `\"template\"` (no wrapper)\n\t */\n\twrapper?: ComponentOrTagName\n}\n\n// We're forced to declare props using the JavaScript syntax because `@vue/compiler-sfc`\n// has limitations for inferring types from complex objects.\nconst props = defineProps({\n\tfield: {\n\t\ttype: Array as unknown as PropType<PrismicRichTextProps[\"field\"]>,\n\t},\n\tfallback: {\n\t\ttype: [String, Object, Function] as PropType<\n\t\t\tPrismicRichTextProps[\"fallback\"]\n\t\t>,\n\t},\n\tcomponents: {\n\t\ttype: Object as PropType<PrismicRichTextProps[\"components\"]>,\n\t},\n\tlinkResolver: {\n\t\ttype: Function as PropType<PrismicRichTextProps[\"linkResolver\"]>,\n\t},\n\tserializer: {\n\t\ttype: [Object, Function] as PropType<PrismicRichTextProps[\"serializer\"]>,\n\t},\n\twrapper: {\n\t\ttype: [String, Object, Function] as PropType<\n\t\t\tPrismicRichTextProps[\"wrapper\"]\n\t\t>,\n\t},\n})\ndefineOptions({ name: \"PrismicRichText\" })\n\nconst { options } = usePrismic()\n\nconst resolvedComponents = computed(() => {\n\treturn props.components || options.components?.richTextComponents\n})\n\nconst resolvedLinkResolver = computed(() => {\n\treturn props.linkResolver || options.linkResolver\n})\n\nconst children = computed(() => {\n\treturn asTree(props.field || []).children\n})\n\nconst isModern = computed(() => {\n\t// Explicit components prop\n\tif (props.components) {\n\t\treturn true\n\t}\n\n\t// Explicit serializer prop\n\tif (props.serializer) {\n\t\treturn false\n\t}\n\n\t// Global components option\n\tif (options.components?.richTextComponents) {\n\t\treturn true\n\t}\n\n\t// Global serializer option\n\tif (options.richTextSerializer) {\n\t\treturn false\n\t}\n\n\t// Default to modern\n\treturn true\n})\n\nif (DEV) {\n\twatchEffect(() => {\n\t\t// TODO: Remove in v6\n\t\tif (props.components && props.serializer) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicRichText] Only one of \"components\" or \"serializer\" (deprecated) props can be provided. You can resolve this warning by removing either the \"components\" or \"serializer\" prop. \"components\" will be used in this case.`,\n\t\t\t)\n\t\t}\n\t})\n}\n</script>\n\n<template>\n\t<Wrapper\n\t\tv-if=\"isModern && (isFilled.richText(field) || fallback)\"\n\t\t:wrapper=\"wrapper\"\n\t>\n\t\t<PrismicRichTextSerialize\n\t\t\tv-if=\"children.length\"\n\t\t\t:children=\"children\"\n\t\t\t:components=\"resolvedComponents\"\n\t\t\t:link-resolver=\"resolvedLinkResolver\"\n\t\t/>\n\t\t<component v-else :is=\"fallback\" />\n\t</Wrapper>\n\t<DeprecatedPrismicRichText\n\t\tv-else-if=\"!isModern\"\n\t\t:field=\"field\"\n\t\t:fallback=\"typeof fallback === 'string' ? fallback : undefined\"\n\t\t:link-resolver=\"linkResolver\"\n\t\t:serializer=\"serializer\"\n\t\t:wrapper=\"wrapper\"\n\t/>\n</template>\n"],"names":["usePrismic","computed","asTree","DEV","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFA,UAAM,QAAQ;AA0BR,UAAA,EAAE,QAAQ,IAAIA,sBAAW;AAEzB,UAAA,qBAAqBC,IAAAA,SAAS,MAAM;;AAClC,aAAA,MAAM,gBAAc,aAAQ,eAAR,mBAAoB;AAAA,IAAA,CAC/C;AAEK,UAAA,uBAAuBA,IAAAA,SAAS,MAAM;AACpC,aAAA,MAAM,gBAAgB,QAAQ;AAAA,IAAA,CACrC;AAEK,UAAA,WAAWA,IAAAA,SAAS,MAAM;AAC/B,aAAOC,SAAO,OAAA,MAAM,SAAS,CAAA,CAAE,EAAE;AAAA,IAAA,CACjC;AAEK,UAAA,WAAWD,IAAAA,SAAS,MAAM;;AAE/B,UAAI,MAAM,YAAY;AACd,eAAA;AAAA,MAAA;AAIR,UAAI,MAAM,YAAY;AACd,eAAA;AAAA,MAAA;AAIJ,WAAA,aAAQ,eAAR,mBAAoB,oBAAoB;AACpC,eAAA;AAAA,MAAA;AAIR,UAAI,QAAQ,oBAAoB;AACxB,eAAA;AAAA,MAAA;AAID,aAAA;AAAA,IAAA,CACP;AAED,QAAIE,YAAK;AACRC,UAAAA,YAAY,MAAM;AAEb,YAAA,MAAM,cAAc,MAAM,YAAY;AACjC,kBAAA;AAAA,YACP;AAAA,UACD;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PrismicRichText/PrismicRichText.vue.d.ts

@@ -1,4 +1,5 @@
 import { HTMLRichTextFunctionSerializer, HTMLRichTextMapSerializer, LinkResolverFunction, RichTextField } from '@prismicio/client';
+import { PropType } from 'vue';
 import { ComponentOrTagName } from '../types';
 import { VueRichTextSerializer } from './types';
 /**
@@ -53,5 +54,43 @@ export type PrismicRichTextProps = {
      */
     wrapper?: ComponentOrTagName;
 };
-declare const _default: import('vue').DefineComponent<PrismicRichTextProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PrismicRichTextProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    field: {
+        type: PropType<PrismicRichTextProps["field"]>;
+    };
+    fallback: {
+        type: PropType<PrismicRichTextProps["fallback"]>;
+    };
+    components: {
+        type: PropType<PrismicRichTextProps["components"]>;
+    };
+    linkResolver: {
+        type: PropType<PrismicRichTextProps["linkResolver"]>;
+    };
+    serializer: {
+        type: PropType<PrismicRichTextProps["serializer"]>;
+    };
+    wrapper: {
+        type: PropType<PrismicRichTextProps["wrapper"]>;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    field: {
+        type: PropType<PrismicRichTextProps["field"]>;
+    };
+    fallback: {
+        type: PropType<PrismicRichTextProps["fallback"]>;
+    };
+    components: {
+        type: PropType<PrismicRichTextProps["components"]>;
+    };
+    linkResolver: {
+        type: PropType<PrismicRichTextProps["linkResolver"]>;
+    };
+    serializer: {
+        type: PropType<PrismicRichTextProps["serializer"]>;
+    };
+    wrapper: {
+        type: PropType<PrismicRichTextProps["wrapper"]>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/PrismicRichText/PrismicRichText.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, watchEffect, unref, openBlock, createBlock, withCtx, resolveDynamicComponent, createCommentVNode } from "vue";
+import { defineComponent, computed, watchEffect, createBlock, createCommentVNode, unref, openBlock, withCtx, resolveDynamicComponent } from "vue";
 import { isFilled } from "@prismicio/client";
 import { asTree } from "@prismicio/client/richtext";
 import { DEV } from "esm-env";
@@ -10,12 +10,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "PrismicRichText" },
   __name: "PrismicRichText",
   props: {
-    field: {},
-    fallback: {},
-    components: {},
-    linkResolver: {},
-    serializer: { type: Function },
-    wrapper: {}
+    field: {
+      type: Array
+    },
+    fallback: {
+      type: [String, Object, Function]
+    },
+    components: {
+      type: Object
+    },
+    linkResolver: {
+      type: Function
+    },
+    serializer: {
+      type: [Object, Function]
+    },
+    wrapper: {
+      type: [String, Object, Function]
+    }
   },
   setup(__props) {
     const props = __props;
@@ -56,9 +68,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     }
     return (_ctx, _cache) => {
-      return isModern.value && (unref(isFilled).richText(_ctx.field) || _ctx.fallback) ? (openBlock(), createBlock(_sfc_main$1, {
+      return isModern.value && (unref(isFilled).richText(__props.field) || __props.fallback) ? (openBlock(), createBlock(_sfc_main$1, {
         key: 0,
-        wrapper: _ctx.wrapper
+        wrapper: __props.wrapper
       }, {
         default: withCtx(() => [
           children.value.length ? (openBlock(), createBlock(_sfc_main$2, {
@@ -66,16 +78,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             children: children.value,
             components: resolvedComponents.value,
             "link-resolver": resolvedLinkResolver.value
-          }, null, 8, ["children", "components", "link-resolver"])) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.fallback), { key: 1 }))
+          }, null, 8, ["children", "components", "link-resolver"])) : (openBlock(), createBlock(resolveDynamicComponent(__props.fallback), { key: 1 }))
         ]),
         _: 1
       }, 8, ["wrapper"])) : !isModern.value ? (openBlock(), createBlock(_sfc_main$3, {
         key: 1,
-        field: _ctx.field,
-        fallback: typeof _ctx.fallback === "string" ? _ctx.fallback : void 0,
-        "link-resolver": _ctx.linkResolver,
-        serializer: _ctx.serializer,
-        wrapper: _ctx.wrapper
+        field: __props.field,
+        fallback: typeof __props.fallback === "string" ? __props.fallback : void 0,
+        "link-resolver": __props.linkResolver,
+        serializer: __props.serializer,
+        wrapper: __props.wrapper
       }, null, 8, ["field", "fallback", "link-resolver", "serializer", "wrapper"])) : createCommentVNode("", true);
     };
   }

package/dist/PrismicRichText/PrismicRichText.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicRichText.vue.js","sources":["../../src/PrismicRichText/PrismicRichText.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n\ttype HTMLRichTextFunctionSerializer,\n\ttype HTMLRichTextMapSerializer,\n\ttype LinkResolverFunction,\n\ttype RichTextField,\n\tisFilled,\n} from \"@prismicio/client\"\nimport { asTree } from \"@prismicio/client/richtext\"\nimport { DEV } from \"esm-env\"\nimport { computed, watchEffect } from \"vue\"\n\nimport Wrapper from \"../lib/Wrapper.vue\"\n\nimport type { ComponentOrTagName } from \"../types\"\nimport type { VueRichTextSerializer } from \"./types\"\n\nimport { usePrismic } from \"../usePrismic\"\n\nimport DeprecatedPrismicRichText from \"./DeprecatedPrismicRichText.vue\"\nimport PrismicRichTextSerialize from \"./PrismicRichTextSerialize.vue\"\n\n/**\n * Props for `<PrismicRichText />`.\n */\nexport type PrismicRichTextProps = {\n\t/**\n\t * The Prismic rich text or title field to render.\n\t */\n\tfield: RichTextField | null | undefined\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` (nothing) will be rendered.\n\t */\n\tfallback?: ComponentOrTagName\n\n\t/**\n\t * An object that maps a rich text block type to a Vue component.\n\t *\n\t * @example\n\t *\n\t * ```javascript\n\t * {\n\t *   heading1: Heading1,\n\t * }\n\t * ```\n\t */\n\tcomponents?: VueRichTextSerializer\n\n\t/**\n\t * A link resolver function used to resolve link when not using the route\n\t * resolver parameter with `@prismicio/client`.\n\t *\n\t * @defaultValue The link resolver provided to `@prismicio/vue` plugin if configured.\n\t *\n\t * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}\n\t */\n\tlinkResolver?: LinkResolverFunction\n\n\t/**\n\t * An HTML serializer to customize the way rich text fields are rendered.\n\t *\n\t * @deprecated Use `components` instead.\n\t *\n\t * @defaultValue The HTML serializer provided to `@prismicio/vue` plugin if configured.\n\t *\n\t * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}\n\t */\n\t// TODO: Remove in v6\n\tserializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer\n\n\t/**\n\t * An HTML tag name or a component used to wrap the output. `<PrismicText />`\n\t * is not wrapped by default.\n\t *\n\t * @defaultValue `\"template\"` (no wrapper)\n\t */\n\twrapper?: ComponentOrTagName\n}\n\nconst props = defineProps<PrismicRichTextProps>()\ndefineOptions({ name: \"PrismicRichText\" })\n\nconst { options } = usePrismic()\n\nconst resolvedComponents = computed(() => {\n\treturn props.components || options.components?.richTextComponents\n})\n\nconst resolvedLinkResolver = computed(() => {\n\treturn props.linkResolver || options.linkResolver\n})\n\nconst children = computed(() => {\n\treturn asTree(props.field || []).children\n})\n\nconst isModern = computed(() => {\n\t// Explicit components prop\n\tif (props.components) {\n\t\treturn true\n\t}\n\n\t// Explicit serializer prop\n\tif (props.serializer) {\n\t\treturn false\n\t}\n\n\t// Global components option\n\tif (options.components?.richTextComponents) {\n\t\treturn true\n\t}\n\n\t// Global serializer option\n\tif (options.richTextSerializer) {\n\t\treturn false\n\t}\n\n\t// Default to modern\n\treturn true\n})\n\nif (DEV) {\n\twatchEffect(() => {\n\t\t// TODO: Remove in v6\n\t\tif (props.components && props.serializer) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicRichText] Only one of \"components\" or \"serializer\" (deprecated) props can be provided. You can resolve this warning by removing either the \"components\" or \"serializer\" prop. \"components\" will be used in this case.`,\n\t\t\t)\n\t\t}\n\t})\n}\n</script>\n\n<template>\n\t<Wrapper\n\t\tv-if=\"isModern && (isFilled.richText(field) || fallback)\"\n\t\t:wrapper=\"wrapper\"\n\t>\n\t\t<PrismicRichTextSerialize\n\t\t\tv-if=\"children.length\"\n\t\t\t:children=\"children\"\n\t\t\t:components=\"resolvedComponents\"\n\t\t\t:link-resolver=\"resolvedLinkResolver\"\n\t\t/>\n\t\t<component v-else :is=\"fallback\" />\n\t</Wrapper>\n\t<DeprecatedPrismicRichText\n\t\tv-else-if=\"!isModern\"\n\t\t:field=\"field\"\n\t\t:fallback=\"typeof fallback === 'string' ? fallback : undefined\"\n\t\t:link-resolver=\"linkResolver\"\n\t\t:serializer=\"serializer\"\n\t\t:wrapper=\"wrapper\"\n\t/>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAiFA,UAAM,QAAQ;AAGR,UAAA,EAAE,QAAQ,IAAI,WAAW;AAEzB,UAAA,qBAAqB,SAAS,MAAM;;AAClC,aAAA,MAAM,gBAAc,aAAQ,eAAR,mBAAoB;AAAA,IAAA,CAC/C;AAEK,UAAA,uBAAuB,SAAS,MAAM;AACpC,aAAA,MAAM,gBAAgB,QAAQ;AAAA,IAAA,CACrC;AAEK,UAAA,WAAW,SAAS,MAAM;AAC/B,aAAO,OAAO,MAAM,SAAS,CAAA,CAAE,EAAE;AAAA,IAAA,CACjC;AAEK,UAAA,WAAW,SAAS,MAAM;;AAE/B,UAAI,MAAM,YAAY;AACd,eAAA;AAAA,MAAA;AAIR,UAAI,MAAM,YAAY;AACd,eAAA;AAAA,MAAA;AAIJ,WAAA,aAAQ,eAAR,mBAAoB,oBAAoB;AACpC,eAAA;AAAA,MAAA;AAIR,UAAI,QAAQ,oBAAoB;AACxB,eAAA;AAAA,MAAA;AAID,aAAA;AAAA,IAAA,CACP;AAED,QAAI,KAAK;AACR,kBAAY,MAAM;AAEb,YAAA,MAAM,cAAc,MAAM,YAAY;AACjC,kBAAA;AAAA,YACP;AAAA,UACD;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PrismicRichText.vue.js","sources":["../../src/PrismicRichText/PrismicRichText.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n\ttype HTMLRichTextFunctionSerializer,\n\ttype HTMLRichTextMapSerializer,\n\ttype LinkResolverFunction,\n\ttype RichTextField,\n\tisFilled,\n} from \"@prismicio/client\"\nimport { asTree } from \"@prismicio/client/richtext\"\nimport { DEV } from \"esm-env\"\nimport type { PropType } from \"vue\"\nimport { computed, watchEffect } from \"vue\"\n\nimport Wrapper from \"../lib/Wrapper.vue\"\n\nimport type { ComponentOrTagName } from \"../types\"\nimport type { VueRichTextSerializer } from \"./types\"\n\nimport { usePrismic } from \"../usePrismic\"\n\nimport DeprecatedPrismicRichText from \"./DeprecatedPrismicRichText.vue\"\nimport PrismicRichTextSerialize from \"./PrismicRichTextSerialize.vue\"\n\n/**\n * Props for `<PrismicRichText />`.\n */\nexport type PrismicRichTextProps = {\n\t/**\n\t * The Prismic rich text or title field to render.\n\t */\n\tfield: RichTextField | null | undefined\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` (nothing) will be rendered.\n\t */\n\tfallback?: ComponentOrTagName\n\n\t/**\n\t * An object that maps a rich text block type to a Vue component.\n\t *\n\t * @example\n\t *\n\t * ```javascript\n\t * {\n\t *   heading1: Heading1,\n\t * }\n\t * ```\n\t */\n\tcomponents?: VueRichTextSerializer\n\n\t/**\n\t * A link resolver function used to resolve link when not using the route\n\t * resolver parameter with `@prismicio/client`.\n\t *\n\t * @defaultValue The link resolver provided to `@prismicio/vue` plugin if configured.\n\t *\n\t * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}\n\t */\n\tlinkResolver?: LinkResolverFunction\n\n\t/**\n\t * An HTML serializer to customize the way rich text fields are rendered.\n\t *\n\t * @deprecated Use `components` instead.\n\t *\n\t * @defaultValue The HTML serializer provided to `@prismicio/vue` plugin if configured.\n\t *\n\t * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}\n\t */\n\t// TODO: Remove in v6\n\tserializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer\n\n\t/**\n\t * An HTML tag name or a component used to wrap the output. `<PrismicText />`\n\t * is not wrapped by default.\n\t *\n\t * @defaultValue `\"template\"` (no wrapper)\n\t */\n\twrapper?: ComponentOrTagName\n}\n\n// We're forced to declare props using the JavaScript syntax because `@vue/compiler-sfc`\n// has limitations for inferring types from complex objects.\nconst props = defineProps({\n\tfield: {\n\t\ttype: Array as unknown as PropType<PrismicRichTextProps[\"field\"]>,\n\t},\n\tfallback: {\n\t\ttype: [String, Object, Function] as PropType<\n\t\t\tPrismicRichTextProps[\"fallback\"]\n\t\t>,\n\t},\n\tcomponents: {\n\t\ttype: Object as PropType<PrismicRichTextProps[\"components\"]>,\n\t},\n\tlinkResolver: {\n\t\ttype: Function as PropType<PrismicRichTextProps[\"linkResolver\"]>,\n\t},\n\tserializer: {\n\t\ttype: [Object, Function] as PropType<PrismicRichTextProps[\"serializer\"]>,\n\t},\n\twrapper: {\n\t\ttype: [String, Object, Function] as PropType<\n\t\t\tPrismicRichTextProps[\"wrapper\"]\n\t\t>,\n\t},\n})\ndefineOptions({ name: \"PrismicRichText\" })\n\nconst { options } = usePrismic()\n\nconst resolvedComponents = computed(() => {\n\treturn props.components || options.components?.richTextComponents\n})\n\nconst resolvedLinkResolver = computed(() => {\n\treturn props.linkResolver || options.linkResolver\n})\n\nconst children = computed(() => {\n\treturn asTree(props.field || []).children\n})\n\nconst isModern = computed(() => {\n\t// Explicit components prop\n\tif (props.components) {\n\t\treturn true\n\t}\n\n\t// Explicit serializer prop\n\tif (props.serializer) {\n\t\treturn false\n\t}\n\n\t// Global components option\n\tif (options.components?.richTextComponents) {\n\t\treturn true\n\t}\n\n\t// Global serializer option\n\tif (options.richTextSerializer) {\n\t\treturn false\n\t}\n\n\t// Default to modern\n\treturn true\n})\n\nif (DEV) {\n\twatchEffect(() => {\n\t\t// TODO: Remove in v6\n\t\tif (props.components && props.serializer) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicRichText] Only one of \"components\" or \"serializer\" (deprecated) props can be provided. You can resolve this warning by removing either the \"components\" or \"serializer\" prop. \"components\" will be used in this case.`,\n\t\t\t)\n\t\t}\n\t})\n}\n</script>\n\n<template>\n\t<Wrapper\n\t\tv-if=\"isModern && (isFilled.richText(field) || fallback)\"\n\t\t:wrapper=\"wrapper\"\n\t>\n\t\t<PrismicRichTextSerialize\n\t\t\tv-if=\"children.length\"\n\t\t\t:children=\"children\"\n\t\t\t:components=\"resolvedComponents\"\n\t\t\t:link-resolver=\"resolvedLinkResolver\"\n\t\t/>\n\t\t<component v-else :is=\"fallback\" />\n\t</Wrapper>\n\t<DeprecatedPrismicRichText\n\t\tv-else-if=\"!isModern\"\n\t\t:field=\"field\"\n\t\t:fallback=\"typeof fallback === 'string' ? fallback : undefined\"\n\t\t:link-resolver=\"linkResolver\"\n\t\t:serializer=\"serializer\"\n\t\t:wrapper=\"wrapper\"\n\t/>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFA,UAAM,QAAQ;AA0BR,UAAA,EAAE,QAAQ,IAAI,WAAW;AAEzB,UAAA,qBAAqB,SAAS,MAAM;;AAClC,aAAA,MAAM,gBAAc,aAAQ,eAAR,mBAAoB;AAAA,IAAA,CAC/C;AAEK,UAAA,uBAAuB,SAAS,MAAM;AACpC,aAAA,MAAM,gBAAgB,QAAQ;AAAA,IAAA,CACrC;AAEK,UAAA,WAAW,SAAS,MAAM;AAC/B,aAAO,OAAO,MAAM,SAAS,CAAA,CAAE,EAAE;AAAA,IAAA,CACjC;AAEK,UAAA,WAAW,SAAS,MAAM;;AAE/B,UAAI,MAAM,YAAY;AACd,eAAA;AAAA,MAAA;AAIR,UAAI,MAAM,YAAY;AACd,eAAA;AAAA,MAAA;AAIJ,WAAA,aAAQ,eAAR,mBAAoB,oBAAoB;AACpC,eAAA;AAAA,MAAA;AAIR,UAAI,QAAQ,oBAAoB;AACxB,eAAA;AAAA,MAAA;AAID,aAAA;AAAA,IAAA,CACP;AAED,QAAI,KAAK;AACR,kBAAY,MAAM;AAEb,YAAA,MAAM,cAAc,MAAM,YAAY;AACjC,kBAAA;AAAA,YACP;AAAA,UACD;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PrismicRichText/PrismicRichTextDefaultComponent.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createElementBlock, renderSlot, createBlock, withCtx, createVNode, normalizeClass, Fragment, renderList, createCommentVNode, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, computed, createElementBlock, createBlock, openBlock, renderSlot, withCtx, createVNode, normalizeClass, Fragment, renderList, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import _sfc_main$3 from "../PrismicEmbed.vue.js";
 import _sfc_main$2 from "../PrismicImage.vue.js";
 import _sfc_main$1 from "../PrismicLink.vue.js";

package/dist/PrismicRichText/PrismicRichTextSerialize.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, resolveDynamicComponent, withCtx, createCommentVNode } from "vue";
+import { defineComponent, resolveComponent, createElementBlock, openBlock, Fragment, renderList, createBlock, resolveDynamicComponent, withCtx, createCommentVNode } from "vue";
 import _sfc_main$1 from "./PrismicRichTextDefaultComponent.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "PrismicRichTextSerialize" },

package/dist/PrismicTable/PrismicTable.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, unref, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, createElementBlock, Fragment, renderList, createCommentVNode } from "vue";
+import { defineComponent, computed, createBlock, unref, openBlock, resolveDynamicComponent, mergeProps, withCtx, createCommentVNode, createElementBlock, Fragment, renderList } from "vue";
 import { isFilled } from "@prismicio/client";
 import { defaultTableComponents } from "./PrismicTableDefaultComponents.js";
 import _sfc_main$1 from "./PrismicTableRow.vue.js";

package/dist/PrismicTable/PrismicTableDefaultComponents.js

@@ -1,5 +1,5 @@
 import { defineComponent, h } from "vue";
-import { table, thead, tbody, tr, th, td } from "./getTableComponentProps.js";
+import { td, th, tr, tbody, thead, table } from "./getTableComponentProps.js";
 const defaultTableComponents = {
   table: defineComponent({
     props: table(),

package/dist/PrismicTable/PrismicTableRow.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createVNode } from "vue";
+import { defineComponent, createBlock, openBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createVNode } from "vue";
 import _sfc_main$1 from "../PrismicRichText/PrismicRichText.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "PrismicTableRow" },

package/dist/PrismicText.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, watchEffect, unref, openBlock, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, watchEffect, createBlock, createCommentVNode, unref, openBlock, withCtx, createTextVNode, toDisplayString } from "vue";
 import { isFilled, asText } from "@prismicio/client";
 import { DEV } from "esm-env";
 import _sfc_main$1 from "./lib/Wrapper.vue.js";

package/dist/SliceZone/SliceZone.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, resolveDynamicComponent, mergeProps, createCommentVNode } from "vue";
+import { defineComponent, computed, createBlock, createCommentVNode, openBlock, withCtx, createElementBlock, Fragment, renderList, resolveDynamicComponent, mergeProps } from "vue";
 import _sfc_main$1 from "../lib/Wrapper.vue.js";
 import { usePrismic } from "../usePrismic.js";
 import { TODOSliceComponent } from "./TODOSliceComponent.js";

package/dist/createPrismic.js

@@ -1,4 +1,4 @@
-import { createClient, filter, cookie, asText, asHTML, asLink, asLinkAttrs, asDate, asImageSrc, asImageWidthSrcSet, asImagePixelDensitySrcSet, isFilled, documentToLinkField } from "@prismicio/client";
+import { createClient, documentToLinkField, isFilled, asImagePixelDensitySrcSet, asImageWidthSrcSet, asImageSrc, asDate, asText, cookie, filter, asLinkAttrs, asLink, asHTML } from "@prismicio/client";
 import _sfc_main$5 from "./PrismicRichText/PrismicRichText.vue.js";
 import _sfc_main$3 from "./PrismicTable/PrismicTable.vue.js";
 import _sfc_main$6 from "./SliceZone/SliceZone.vue.js";

package/dist/lib/Wrapper.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, resolveDynamicComponent, normalizeProps, mergeProps, withCtx, renderSlot } from "vue";
+import { defineComponent, createBlock, renderSlot, openBlock, resolveDynamicComponent, normalizeProps, mergeProps, withCtx } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Wrapper",
   props: {

package/dist/package.json.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const version = "5.2.0";
+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.0";
+const version = "5.3.0";
 export {
   version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/vue",
-	"version": "5.2.0",
+	"version": "5.3.0",
 	"description": "Vue plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -57,39 +57,39 @@
 		"test": "npm run lint && npm run types && npm run unit && npm run build && npm run size"
 	},
 	"dependencies": {
-		"@prismicio/client": "^7.17.0",
+		"@prismicio/client": "^7.17.1",
 		"esm-env": "^1.2.2",
 		"vue-router": "^4.5.0"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.18.0",
+		"@eslint/js": "^9.23.0",
 		"@prismicio/mock": "^0.7.1",
-		"@size-limit/preset-small-lib": "^11.1.6",
-		"@trivago/prettier-plugin-sort-imports": "^5.2.1",
+		"@size-limit/preset-small-lib": "^11.2.0",
+		"@trivago/prettier-plugin-sort-imports": "^5.2.2",
 		"@types/jsdom-global": "^3.0.7",
-		"@vitejs/plugin-vue": "^5.2.1",
-		"@vitest/coverage-v8": "^3.0.2",
-		"@vue/eslint-config-typescript": "^14.2.0",
+		"@vitejs/plugin-vue": "^5.2.3",
+		"@vitest/coverage-v8": "^3.0.9",
+		"@vue/eslint-config-typescript": "^14.5.0",
 		"@vue/test-utils": "^2.4.6",
-		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-prettier": "^5.2.3",
+		"eslint": "^9.23.0",
+		"eslint-config-prettier": "^10.1.1",
+		"eslint-plugin-prettier": "^5.2.5",
 		"eslint-plugin-tsdoc": "^0.4.0",
-		"eslint-plugin-vue": "^9.32.0",
+		"eslint-plugin-vue": "^10.0.0",
 		"jsdom": "^26.0.0",
 		"jsdom-global": "^3.0.2",
-		"prettier": "^3.4.2",
+		"prettier": "^3.5.3",
 		"prettier-plugin-jsdoc": "^1.3.2",
-		"size-limit": "^11.1.6",
+		"size-limit": "^11.2.0",
 		"standard-version": "^9.5.0",
-		"typescript": "~5.7.3",
-		"typescript-eslint": "^8.21.0",
-		"vite": "^6.0.9",
-		"vite-plugin-dts": "^4.5.0",
+		"typescript": "^5.8.2",
+		"typescript-eslint": "^8.28.0",
+		"vite": "^6.2.3",
+		"vite-plugin-dts": "^4.5.3",
 		"vite-plugin-sdk": "^0.1.3",
-		"vitest": "^3.0.2",
+		"vitest": "^3.0.9",
 		"vue": "^3.5.13",
-		"vue-tsc": "^2.2.0"
+		"vue-tsc": "^2.2.8"
 	},
 	"peerDependencies": {
 		"vue": "^3.0.0"

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>

package/src/PrismicRichText/DeprecatedPrismicRichText.vue

@@ -2,7 +2,7 @@
 // TODO: Remove in v6
 import { asHTML, isFilled } from "@prismicio/client"
 import { DEV } from "esm-env"
-import type { Component } from "vue"
+import type { Component, PropType } from "vue"
 import {
 	computed,
 	inject,
@@ -26,12 +26,27 @@ import type { PrismicRichTextProps } from "./PrismicRichText.vue"
  */
 const defaultWrapper = "div"
 
-const props = defineProps<
-	Pick<
-		PrismicRichTextProps,
-		"field" | "linkResolver" | "serializer" | "wrapper"
-	> & { fallback?: string }
->()
+// We're forced to declare props using the JavaScript syntax because `@vue/compiler-sfc`
+// has limitations for inferring types from complex objects.
+const props = defineProps({
+	field: {
+		type: Array as unknown as PropType<PrismicRichTextProps["field"]>,
+	},
+	fallback: {
+		type: String as PropType<string>,
+	},
+	linkResolver: {
+		type: Function as PropType<PrismicRichTextProps["linkResolver"]>,
+	},
+	serializer: {
+		type: [Object, Function] as PropType<PrismicRichTextProps["serializer"]>,
+	},
+	wrapper: {
+		type: [String, Object, Function] as PropType<
+			PrismicRichTextProps["wrapper"]
+		>,
+	},
+})
 defineOptions({ name: "DeprecatedPrismicRichText" })
 
 const { options } = usePrismic()

package/src/PrismicRichText/PrismicRichText.vue

@@ -8,6 +8,7 @@ import {
 } from "@prismicio/client"
 import { asTree } from "@prismicio/client/richtext"
 import { DEV } from "esm-env"
+import type { PropType } from "vue"
 import { computed, watchEffect } from "vue"
 
 import Wrapper from "../lib/Wrapper.vue"
@@ -79,7 +80,32 @@ export type PrismicRichTextProps = {
 	wrapper?: ComponentOrTagName
 }
 
-const props = defineProps<PrismicRichTextProps>()
+// We're forced to declare props using the JavaScript syntax because `@vue/compiler-sfc`
+// has limitations for inferring types from complex objects.
+const props = defineProps({
+	field: {
+		type: Array as unknown as PropType<PrismicRichTextProps["field"]>,
+	},
+	fallback: {
+		type: [String, Object, Function] as PropType<
+			PrismicRichTextProps["fallback"]
+		>,
+	},
+	components: {
+		type: Object as PropType<PrismicRichTextProps["components"]>,
+	},
+	linkResolver: {
+		type: Function as PropType<PrismicRichTextProps["linkResolver"]>,
+	},
+	serializer: {
+		type: [Object, Function] as PropType<PrismicRichTextProps["serializer"]>,
+	},
+	wrapper: {
+		type: [String, Object, Function] as PropType<
+			PrismicRichTextProps["wrapper"]
+		>,
+	},
+})
 defineOptions({ name: "PrismicRichText" })
 
 const { options } = usePrismic()