@prismicio/vue 4.3.0 → 5.0.0-alpha.0

package/README.md

@@ -17,7 +17,7 @@ Replace all on all files (README.md, CONTRIBUTING.md, bug_report.md, package.jso
 [![Conventional Commits][conventional-commits-src]][conventional-commits-href]
 [![License][license-src]][license-href]
 
-<!-- TODO: Replacing link to Prismic with [Prismic][prismic] is useful here -->
+<!-- Replacing link to Prismic with [Prismic][prismic] is useful here -->
 
 [Vue][vue] plugin, components, and composables to fetch and present [Prismic][prismic] content.
 
@@ -52,7 +52,7 @@ For more clarity on this project and its structure you can also check out the de
 ## License
 
 ```
-   Copyright 2013-2023 Prismic <contact@prismic.io> (https://prismic.io)
+   Copyright 2013-2024 Prismic <contact@prismic.io> (https://prismic.io)
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -71,7 +71,7 @@ For more clarity on this project and its structure you can also check out the de
 
 [prismic]: https://prismic.io
 
-<!-- TODO: Replace link with a more useful one if available -->
+<!-- Replace link with a more useful one if available -->
 
 [prismic-docs]: https://prismic.io/docs/technologies/vuejs
 [changelog]: ./CHANGELOG.md
@@ -83,7 +83,7 @@ For more clarity on this project and its structure you can also check out the de
 [vue-composition]: https://v3.vuejs.org/guide/composition-api-introduction.html
 [vue-options]: https://v3.vuejs.org/guide/introduction.html
 
-<!-- TODO: Replace link with a more useful one if available -->
+<!-- Replace link with a more useful one if available -->
 
 [forum-question]: https://community.prismic.io/c/kits-and-dev-languages/vue-js/16
 [repo-bug-report]: https://github.com/prismicio/prismic-vue/issues/new?assignees=&labels=bug&template=bug_report.md&title=

package/dist/PrismicEmbed.vue.cjs

@@ -0,0 +1,25 @@
+"use strict";
+const vue = require("vue");
+const client = require("@prismicio/client");
+const defaultWrapper = "div";
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "PrismicEmbed" },
+  __name: "PrismicEmbed",
+  props: {
+    field: {},
+    wrapper: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.unref(client.isFilled).embed(_ctx.field) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.wrapper || defaultWrapper), {
+        key: 0,
+        "data-oembed": _ctx.field.embed_url,
+        "data-oembed-type": _ctx.field.type,
+        "data-oembed-provider": _ctx.field.provider_name,
+        innerHTML: _ctx.field.html
+      }, null, 8, ["data-oembed", "data-oembed-type", "data-oembed-provider", "innerHTML"])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=PrismicEmbed.vue.cjs.map

package/dist/PrismicEmbed.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismicEmbed.vue.cjs","sources":["../src/PrismicEmbed.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { EmbedField } from \"@prismicio/client\"\nimport { isFilled } from \"@prismicio/client\"\n\nimport type { ComponentOrTagName } from \"./types\"\n\n/**\n * The default component rendered to wrap the embed.\n */\nconst defaultWrapper = \"div\"\n\n/**\n * Props for `<PrismicEmbed />`.\n */\nexport type PrismicEmbedProps = {\n\t/**\n\t * The Prismic EMbed field to render.\n\t */\n\tfield: EmbedField\n\n\t/**\n\t * An HTML tag name or a component used to wrap the output.\n\t *\n\t * @defaultValue `\"div\"`\n\t */\n\twrapper?: ComponentOrTagName\n}\n\ndefineProps<PrismicEmbedProps>()\ndefineOptions({ name: \"PrismicEmbed\" })\n</script>\n\n<template>\n\t<component\n\t\tv-if=\"isFilled.embed(field)\"\n\t\t:is=\"wrapper || defaultWrapper\"\n\t\t:data-oembed=\"field.embed_url\"\n\t\t:data-oembed-type=\"field.type\"\n\t\t:data-oembed-provider=\"field.provider_name\"\n\t\tv-html=\"field.html\"\n\t/>\n</template>\n"],"names":[],"mappings":";;;AASA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PrismicEmbed.vue.d.ts

@@ -0,0 +1,19 @@
+import { EmbedField } from '@prismicio/client';
+import { ComponentOrTagName } from './types';
+/**
+ * Props for `<PrismicEmbed />`.
+ */
+export type PrismicEmbedProps = {
+    /**
+     * The Prismic EMbed field to render.
+     */
+    field: EmbedField;
+    /**
+     * An HTML tag name or a component used to wrap the output.
+     *
+     * @defaultValue `"div"`
+     */
+    wrapper?: ComponentOrTagName;
+};
+declare const _default: import('vue').DefineComponent<PrismicEmbedProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PrismicEmbedProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/PrismicEmbed.vue.js

@@ -0,0 +1,26 @@
+import { defineComponent, unref, openBlock, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
+import { isFilled } from "@prismicio/client";
+const defaultWrapper = "div";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "PrismicEmbed" },
+  __name: "PrismicEmbed",
+  props: {
+    field: {},
+    wrapper: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return unref(isFilled).embed(_ctx.field) ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.wrapper || defaultWrapper), {
+        key: 0,
+        "data-oembed": _ctx.field.embed_url,
+        "data-oembed-type": _ctx.field.type,
+        "data-oembed-provider": _ctx.field.provider_name,
+        innerHTML: _ctx.field.html
+      }, null, 8, ["data-oembed", "data-oembed-type", "data-oembed-provider", "innerHTML"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=PrismicEmbed.vue.js.map

package/dist/PrismicEmbed.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismicEmbed.vue.js","sources":["../src/PrismicEmbed.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { EmbedField } from \"@prismicio/client\"\nimport { isFilled } from \"@prismicio/client\"\n\nimport type { ComponentOrTagName } from \"./types\"\n\n/**\n * The default component rendered to wrap the embed.\n */\nconst defaultWrapper = \"div\"\n\n/**\n * Props for `<PrismicEmbed />`.\n */\nexport type PrismicEmbedProps = {\n\t/**\n\t * The Prismic EMbed field to render.\n\t */\n\tfield: EmbedField\n\n\t/**\n\t * An HTML tag name or a component used to wrap the output.\n\t *\n\t * @defaultValue `\"div\"`\n\t */\n\twrapper?: ComponentOrTagName\n}\n\ndefineProps<PrismicEmbedProps>()\ndefineOptions({ name: \"PrismicEmbed\" })\n</script>\n\n<template>\n\t<component\n\t\tv-if=\"isFilled.embed(field)\"\n\t\t:is=\"wrapper || defaultWrapper\"\n\t\t:data-oembed=\"field.embed_url\"\n\t\t:data-oembed-type=\"field.type\"\n\t\t:data-oembed-provider=\"field.provider_name\"\n\t\tv-html=\"field.html\"\n\t/>\n</template>\n"],"names":[],"mappings":";;AASA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;"}

package/dist/PrismicEmbed.vue2.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const PrismicEmbed_vue_vue_type_script_setup_true_lang = require("./PrismicEmbed.vue.cjs");
+module.exports = PrismicEmbed_vue_vue_type_script_setup_true_lang;
+//# sourceMappingURL=PrismicEmbed.vue2.cjs.map

package/dist/PrismicEmbed.vue2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismicEmbed.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/PrismicEmbed.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./PrismicEmbed.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=PrismicEmbed.vue2.js.map

package/dist/PrismicEmbed.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismicEmbed.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/PrismicImage.vue.cjs

@@ -0,0 +1,84 @@
+"use strict";
+const vue = require("vue");
+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 _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "PrismicImage" },
+  __name: "PrismicImage",
+  props: {
+    field: {},
+    imgixParams: {},
+    alt: {},
+    fallbackAlt: {},
+    widths: {},
+    pixelDensities: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { options } = usePrismic.usePrismic();
+    if (esmEnv.DEV) {
+      vue.watchEffect(() => {
+        if (typeof props.alt === "string" && props.alt !== "") {
+          console.warn(
+            `[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.devMsg(
+              "alt-must-be-an-empty-string"
+            )}`
+          );
+        }
+        if (typeof props.fallbackAlt === "string" && props.fallbackAlt !== "") {
+          console.warn(
+            `[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.devMsg(
+              "alt-must-be-an-empty-string"
+            )}`
+          );
+        }
+        if (props.widths && props.pixelDensities) {
+          console.warn(
+            `[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.`
+          );
+        }
+      });
+    }
+    const image = vue.computed(() => {
+      var _a, _b;
+      if (!client.isFilled.imageThumbnail(props.field)) {
+        return;
+      }
+      let src;
+      let srcSet;
+      if (props.widths || !props.pixelDensities) {
+        const res = client.asImageWidthSrcSet(props.field, {
+          ...props.imgixParams,
+          widths: props.widths === "defaults" ? (_a = options.components) == null ? void 0 : _a.imageWidthSrcSetDefaults : props.widths
+        });
+        src = res.src;
+        srcSet = res.srcset;
+      } else if (props.pixelDensities) {
+        const res = client.asImagePixelDensitySrcSet(props.field, {
+          ...props.imgixParams,
+          pixelDensities: props.pixelDensities === "defaults" ? (_b = options.components) == null ? void 0 : _b.imagePixelDensitySrcSetDefaults : props.pixelDensities
+        });
+        src = res.src;
+        srcSet = res.srcset;
+      }
+      return {
+        src,
+        srcSet,
+        alt: props.alt ?? (props.field.alt || props.fallbackAlt)
+      };
+    });
+    return (_ctx, _cache) => {
+      return image.value ? (vue.openBlock(), vue.createElementBlock("img", {
+        key: 0,
+        src: image.value.src,
+        srcset: image.value.srcSet,
+        alt: image.value.alt
+      }, null, 8, _hoisted_1)) : vue.createCommentVNode("", true);
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=PrismicImage.vue.cjs.map

package/dist/PrismicImage.vue.cjs.map

@@ -0,0 +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;;;;;;;;;;;;"}

package/dist/PrismicImage.vue.d.ts

@@ -0,0 +1,224 @@
+import { ImageField, asImageSrc, asImagePixelDensitySrcSet, asImageWidthSrcSet } from '@prismicio/client';
+/**
+ * Props for `<PrismicImage />`.
+ */
+export type PrismicImageProps = {
+    /**
+     * The Prismic image field or thumbnail to render.
+     */
+    field: ImageField | ImageField<string>;
+    /**
+     * An object of Imgix URL API parameters to transform the image.
+     *
+     * See: https://docs.imgix.com/apis/rendering
+     */
+    imgixParams?: Parameters<typeof asImageSrc>[1];
+    /**
+     * Declare an image as decorative by providing `alt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    alt?: "";
+    /**
+     * Declare an image as decorative only if the image field does not have
+     * alternative text by providing `fallbackAlt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    fallbackAlt?: "";
+} & ({
+    /**
+     * Widths used to build a `srcset` value for the image field.
+     *
+     * If a `widths` prop is not given or `"defaults"` is passed, the
+     * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,
+     * 3840.
+     *
+     * If the image field contains responsive views, each responsive view can
+     * be used as a width in the resulting `srcset` by passing `"thumbnails"`
+     * as the `widths` prop.
+     */
+    widths?: NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"] | "thumbnails" | "defaults";
+    /**
+     * Not used when the `widths` prop is used.
+     */
+    pixelDensities?: never;
+} | {
+    /**
+     * Not used when the `widths` prop is used.
+     */
+    widths?: never;
+    /**
+     * Pixel densities used to build a `srcset` value for the image field.
+     *
+     * If a `pixelDensities` prop is passed `"defaults"`, the following pixel
+     * densities will be used: 1, 2, 3.
+     */
+    pixelDensities: NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>["pixelDensities"] | "defaults";
+});
+declare const _default: import('vue').DefineComponent<({
+    /**
+     * The Prismic image field or thumbnail to render.
+     */
+    field: ImageField | ImageField<string>;
+    /**
+     * An object of Imgix URL API parameters to transform the image.
+     *
+     * See: https://docs.imgix.com/apis/rendering
+     */
+    imgixParams?: Parameters<typeof asImageSrc>[1];
+    /**
+     * Declare an image as decorative by providing `alt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    alt?: "";
+    /**
+     * Declare an image as decorative only if the image field does not have
+     * alternative text by providing `fallbackAlt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    fallbackAlt?: "";
+} & {
+    /**
+     * Widths used to build a `srcset` value for the image field.
+     *
+     * If a `widths` prop is not given or `"defaults"` is passed, the
+     * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,
+     * 3840.
+     *
+     * If the image field contains responsive views, each responsive view can
+     * be used as a width in the resulting `srcset` by passing `"thumbnails"`
+     * as the `widths` prop.
+     */
+    widths?: NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"] | "thumbnails" | "defaults";
+    /**
+     * Not used when the `widths` prop is used.
+     */
+    pixelDensities?: never;
+}) | ({
+    /**
+     * The Prismic image field or thumbnail to render.
+     */
+    field: ImageField | ImageField<string>;
+    /**
+     * An object of Imgix URL API parameters to transform the image.
+     *
+     * See: https://docs.imgix.com/apis/rendering
+     */
+    imgixParams?: Parameters<typeof asImageSrc>[1];
+    /**
+     * Declare an image as decorative by providing `alt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    alt?: "";
+    /**
+     * Declare an image as decorative only if the image field does not have
+     * alternative text by providing `fallbackAlt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    fallbackAlt?: "";
+} & {
+    /**
+     * Not used when the `widths` prop is used.
+     */
+    widths?: never;
+    /**
+     * Pixel densities used to build a `srcset` value for the image field.
+     *
+     * If a `pixelDensities` prop is passed `"defaults"`, the following pixel
+     * densities will be used: 1, 2, 3.
+     */
+    pixelDensities: NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>["pixelDensities"] | "defaults";
+}), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<({
+    /**
+     * The Prismic image field or thumbnail to render.
+     */
+    field: ImageField | ImageField<string>;
+    /**
+     * An object of Imgix URL API parameters to transform the image.
+     *
+     * See: https://docs.imgix.com/apis/rendering
+     */
+    imgixParams?: Parameters<typeof asImageSrc>[1];
+    /**
+     * Declare an image as decorative by providing `alt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    alt?: "";
+    /**
+     * Declare an image as decorative only if the image field does not have
+     * alternative text by providing `fallbackAlt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    fallbackAlt?: "";
+} & {
+    /**
+     * Widths used to build a `srcset` value for the image field.
+     *
+     * If a `widths` prop is not given or `"defaults"` is passed, the
+     * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,
+     * 3840.
+     *
+     * If the image field contains responsive views, each responsive view can
+     * be used as a width in the resulting `srcset` by passing `"thumbnails"`
+     * as the `widths` prop.
+     */
+    widths?: NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"] | "thumbnails" | "defaults";
+    /**
+     * Not used when the `widths` prop is used.
+     */
+    pixelDensities?: never;
+}) | ({
+    /**
+     * The Prismic image field or thumbnail to render.
+     */
+    field: ImageField | ImageField<string>;
+    /**
+     * An object of Imgix URL API parameters to transform the image.
+     *
+     * See: https://docs.imgix.com/apis/rendering
+     */
+    imgixParams?: Parameters<typeof asImageSrc>[1];
+    /**
+     * Declare an image as decorative by providing `alt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    alt?: "";
+    /**
+     * Declare an image as decorative only if the image field does not have
+     * alternative text by providing `fallbackAlt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    fallbackAlt?: "";
+} & {
+    /**
+     * Not used when the `widths` prop is used.
+     */
+    widths?: never;
+    /**
+     * Pixel densities used to build a `srcset` value for the image field.
+     *
+     * If a `pixelDensities` prop is passed `"defaults"`, the following pixel
+     * densities will be used: 1, 2, 3.
+     */
+    pixelDensities: NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>["pixelDensities"] | "defaults";
+})> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/PrismicImage.vue.js

@@ -0,0 +1,85 @@
+import { defineComponent, watchEffect, computed, openBlock, createElementBlock, createCommentVNode } 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 _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "PrismicImage" },
+  __name: "PrismicImage",
+  props: {
+    field: {},
+    imgixParams: {},
+    alt: {},
+    fallbackAlt: {},
+    widths: {},
+    pixelDensities: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { options } = usePrismic();
+    if (DEV) {
+      watchEffect(() => {
+        if (typeof props.alt === "string" && props.alt !== "") {
+          console.warn(
+            `[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(
+              "alt-must-be-an-empty-string"
+            )}`
+          );
+        }
+        if (typeof props.fallbackAlt === "string" && props.fallbackAlt !== "") {
+          console.warn(
+            `[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(
+              "alt-must-be-an-empty-string"
+            )}`
+          );
+        }
+        if (props.widths && props.pixelDensities) {
+          console.warn(
+            `[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.`
+          );
+        }
+      });
+    }
+    const image = computed(() => {
+      var _a, _b;
+      if (!isFilled.imageThumbnail(props.field)) {
+        return;
+      }
+      let src;
+      let srcSet;
+      if (props.widths || !props.pixelDensities) {
+        const res = asImageWidthSrcSet(props.field, {
+          ...props.imgixParams,
+          widths: props.widths === "defaults" ? (_a = options.components) == null ? void 0 : _a.imageWidthSrcSetDefaults : props.widths
+        });
+        src = res.src;
+        srcSet = res.srcset;
+      } else if (props.pixelDensities) {
+        const res = asImagePixelDensitySrcSet(props.field, {
+          ...props.imgixParams,
+          pixelDensities: props.pixelDensities === "defaults" ? (_b = options.components) == null ? void 0 : _b.imagePixelDensitySrcSetDefaults : props.pixelDensities
+        });
+        src = res.src;
+        srcSet = res.srcset;
+      }
+      return {
+        src,
+        srcSet,
+        alt: props.alt ?? (props.field.alt || props.fallbackAlt)
+      };
+    });
+    return (_ctx, _cache) => {
+      return image.value ? (openBlock(), createElementBlock("img", {
+        key: 0,
+        src: image.value.src,
+        srcset: image.value.srcSet,
+        alt: image.value.alt
+      }, null, 8, _hoisted_1)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=PrismicImage.vue.js.map

package/dist/PrismicImage.vue.js.map

@@ -0,0 +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;;;;;;;;;;;"}

package/dist/PrismicImage.vue2.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const PrismicImage_vue_vue_type_script_setup_true_lang = require("./PrismicImage.vue.cjs");
+module.exports = PrismicImage_vue_vue_type_script_setup_true_lang;
+//# sourceMappingURL=PrismicImage.vue2.cjs.map

package/dist/PrismicImage.vue2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismicImage.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/PrismicImage.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./PrismicImage.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=PrismicImage.vue2.js.map

package/dist/PrismicImage.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismicImage.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}