@prismicio/vue 5.3.0 → 6.0.0-canary.331d154

package/src/types.ts

@@ -1,444 +1,33 @@
-import type {
-	AsLinkAttrsConfig,
-	ClientConfig,
-	CreateClient,
-	HTMLRichTextFunctionSerializer,
-	HTMLRichTextMapSerializer,
-	LinkResolverFunction,
-	asDate,
-	asHTML,
-	asImagePixelDensitySrcSet,
-	asImageSrc,
-	asImageWidthSrcSet,
-	asLink,
-	asLinkAttrs,
-	asText,
-	cookie,
-	documentToLinkField,
-	filter,
-	isFilled,
-} from "@prismicio/client"
-import type { App, ConcreteComponent, DefineComponent, Raw, Ref } from "vue"
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// Imports for @link references:
-import type { RouterLink } from "vue-router"
+import type { Component as _Component } from "vue"
 
-import type { VueRichTextSerializer } from "./PrismicRichText/types"
+export type ComponentOrTagName = string | _Component
 
-import type {
-	SliceComponentProps,
-	SliceComponentType,
-	TODOSliceComponent,
-} from "./SliceZone"
-
-/* eslint-enable @typescript-eslint/no-unused-vars */
+// For reference within TypeScript files when `*.vue` type cannot be inferred
+export type Component<TProps> = _Component | _Component<TProps>
 
 /**
- * Options used by `@prismicio/vue` components.
+ * A shorthand definition for `<PrismicRichText />` and `<PrismicTable />`
+ * component types.
  */
-type PrismicPluginComponentsOptions = {
-	/**
-	 * The `rel` attribute to apply on links. This prop can be provided a function
-	 * to use the link's metadata to determine the `rel` value.
-	 *
-	 * @defaultValue `"noreferrer"` for external links.
-	 */
-	linkRel?: AsLinkAttrsConfig["rel"]
-
-	/**
-	 * An HTML tag name or a component used to render internal links.
-	 *
-	 * @remarks
-	 * HTML tag names will be rendered using the anchor tag interface (`href`,
-	 * `target`, and `rel` attributes).
-	 * @remarks
-	 * Components will be rendered using Vue Router {@link RouterLink} interface
-	 * (`to` props).
-	 *
-	 * @defaultValue {@link RouterLink}
-	 */
-	linkInternalComponent?: ComponentOrTagName
-
-	/**
-	 * An HTML tag name or a component used to render external links.
-	 *
-	 * @remarks
-	 * HTML tag names will be rendered using the anchor tag interface (`href`,
-	 * `target`, and `rel` attributes).
-	 * @remarks
-	 * Components will be rendered using Vue Router {@link RouterLink} interface
-	 * (`to` props).
-	 *
-	 * @defaultValue `"a"`
-	 */
-	linkExternalComponent?: ComponentOrTagName
-
-	/**
-	 * Default widths to use when rendering an image with `widths="defaults"`
-	 *
-	 * @remarks
-	 * Consider configuring image widths within your content type definition and
-	 * using `widths="auto"` instead to give content writers the ability to crop
-	 * images in the editor.
-	 *
-	 * @defaultValue `@prismicio/client` defaults
-	 */
-	imageWidthSrcSetDefaults?: number[]
+export type ComponentShorthand = {
+	/** The HTML element type rendered for this node type. */
+	as?: string
 
-	/**
-	 * Default pixel densities to use when rendering an image with
-	 * `pixel-densities="defaults"`
-	 *
-	 * @defaultValue `@prismicio/client` defaults
-	 */
-	imagePixelDensitySrcSetDefaults?: number[]
-
-	/**
-	 * An optional map of Rich Text block types to Vue Components. It is used to
-	 * render rich text or title fields.
-	 *
-	 * @see Templating Rich Text and title fields from Prismic {@link https://prismic.io/docs/rich-text}
-	 */
-	richTextComponents?: VueRichTextSerializer
-
-	/**
-	 * A component or a functional component rendered if a component mapping from
-	 * the `components` prop cannot be found.
-	 *
-	 * @remarks
-	 * Components will be rendered using the {@link SliceComponentProps} interface.
-	 *
-	 * @defaultValue `null` when `process.env.NODE_ENV === "production"` else {@link TODOSliceComponent}
-	 */
-	sliceZoneDefaultComponent?: SliceComponentType
+	/** Other attributes to apply to the element type. */
+	[Attribute: string]: string | boolean | null | undefined
 }
 
-/**
- * Common options supported by `@prismicio/vue` plugin.
- */
-type PrismicPluginOptionsBase = {
-	/**
-	 * An optional link resolver function used to resolve links to Prismic
-	 * documents when not using the route resolver parameter with
-	 * `@prismicio/client`.
-	 *
-	 * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}
-	 */
-	linkResolver?: LinkResolverFunction
-
-	/**
-	 * An optional HTML serializer to customize the way rich text fields are
-	 * rendered.
-	 *
-	 * @remarks
-	 * To provide global components for the `<PrismicRichText />` component, use
-	 * the `components.richTextComponents` option instead.
-	 *
-	 * @deprecated Use `components.richTextComponents` instead.
-	 *
-	 * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
-	 */
-	richTextSerializer?:
-		| HTMLRichTextFunctionSerializer
-		| HTMLRichTextMapSerializer
-
-	/**
-	 * Whether or not to inject components globally.
-	 *
-	 * @defaultValue `true`
-	 */
-	injectComponents?: boolean
-
-	/**
-	 * Options used by Prismic Vue components.
-	 *
-	 * @see Components options {@link PrismicPluginComponentsOptions}
-	 */
-	components?: PrismicPluginComponentsOptions
+export const isComponent = <T>(
+	component: Component<T> | ComponentShorthand | undefined,
+): component is Component<T> => {
+	return (
+		!!component &&
+		(typeof component === "function" ||
+			(typeof component === "object" &&
+				(("render" in component && typeof component.render === "function") ||
+					("setup" in component && typeof component.setup === "function") ||
+					("__file" in component && !!component.__file) ||
+					("__name" in component && !!component.__name) ||
+					("props" in component && typeof component.props === "object"))))
+	)
 }
-
-/**
- * Options to init `@prismicio/vue` plugin with a client instance.
- *
- * @see {@link PrismicPluginOptionsBase} for shared options
- */
-type PrismicPluginOptionsWithClient = PrismicPluginOptionsBase & {
-	/**
-	 * A `@prismicio/client` instance used to fetch content from a Prismic
-	 * repository to configure the plugin with.
-	 *
-	 * @remarks
-	 * The client will be used by `@prismicio/vue` composables, such as
-	 * {@link usePrismicDocuments} and exposed through `this.$prismic.client` and
-	 * `usePrismic().client`.
-	 *
-	 * @see Prismic client documentation {@link https://prismic.io/docs/technologies/javascript}
-	 */
-	client: ReturnType<CreateClient>
-
-	/**
-	 * Ensures type union is a strict or.
-	 *
-	 * @internal
-	 */
-	endpoint?: never
-
-	/**
-	 * Ensures type union is a strict or.
-	 *
-	 * @internal
-	 */
-	clientConfig?: never
-}
-
-/**
- * Options to init `@prismicio/vue` plugin with a repository ID or API endpoint.
- *
- * @see {@link PrismicPluginOptionsBase} for shared options
- */
-type PrismicPluginOptionsWithEndpoint = PrismicPluginOptionsBase & {
-	/**
-	 * A Prismic repository endpoint to init the plugin's `@prismicio/client`
-	 * instance used to fetch content from a Prismic repository with.
-	 *
-	 * @remarks
-	 * Said client will be used by `@prismicio/vue` composables, such as
-	 * {@link usePrismicDocuments} and exposed through `this.$prismic.client` and
-	 * `usePrismic().client`.
-	 *
-	 * @example
-	 *
-	 * ```javascript
-	 * // A repository ID
-	 * "my-repo"
-	 *
-	 * //A full repository endpoint
-	 * "https://my-repo.cdn.prismic.io/api/v2"
-	 * ```
-	 *
-	 * @see Prismic client documentation {@link https://prismic.io/docs/technologies/javascript}
-	 */
-	endpoint: string
-
-	/**
-	 * An optional object to configure `@prismicio/client` instance further.
-	 *
-	 * @example
-	 *
-	 * ```javascript
-	 * // Accessing a private private repository
-	 * {
-	 * 	"accessToken": "abc"
-	 * }
-	 * ```
-	 *
-	 * @example
-	 *
-	 * ```javascript
-	 * // Using a route resolver
-	 * {
-	 * 	"defaultParams": {
-	 * 		"routes": [
-	 * 			{
-	 * 				"type": "page",
-	 * 				"path": "/:uid"
-	 * 			},
-	 * 			{
-	 * 				"type": "post",
-	 * 				"path": "/blog/:uid"
-	 * 			}
-	 * 		]
-	 * 	}
-	 * }
-	 * ```
-	 *
-	 * @see Prismic client documentation {@link https://prismic.io/docs/technologies/javascript}
-	 * @see Route resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#route-resolver}
-	 */
-	clientConfig?: ClientConfig
-
-	/**
-	 * Ensures type union is a strict or.
-	 *
-	 * @internal
-	 */
-	client?: never
-}
-
-/**
- * `@prismicio/vue` plugin options.
- *
- * @see Prismic Official Vue.js documentation: {@link https://prismic.io/docs/technologies/vuejs}
- * @see Plugin repository: {@link https://github.com/prismicio/prismic-vue}
- */
-export type PrismicPluginOptions =
-	| PrismicPluginOptionsWithClient
-	| PrismicPluginOptionsWithEndpoint
-
-/**
- * `@prismicio/client` related methods and properties exposed by
- * `@prismicio/vue` plugin and accessible through `this.$prismic` and
- * `usePrismic()`.
- */
-export type PrismicPluginClient = {
-	/**
-	 * A `@prismicio/client` instance.
-	 */
-	client: ReturnType<CreateClient>
-
-	/**
-	 * Query filters from `@prismicio/client`.
-	 */
-	filter: typeof filter
-
-	/**
-	 * Prismic cookies from `@prismicio/client`.
-	 */
-	cookie: typeof cookie
-}
-
-/**
- * `@prismicio/client` related methods exposed by `@prismicio/vue` plugin and
- * accessible through `this.$prismic` and `usePrismic()`.
- */
-export type PrismicPluginHelpers = {
-	/**
-	 * Serializes a rich text or title field to a plain text string. This is
-	 * `@prismicio/client` {@link asText} function.
-	 *
-	 * @see Templating rich text and title fields {@link https://prismic.io/docs/technologies/vue-template-content#rich-text-and-titles}
-	 */
-	asText: typeof asText
-
-	/**
-	 * Serializes a rich text or title field to an HTML string. This is
-	 * `@prismicio/client` {@link asHTML} function.
-	 *
-	 * @remarks
-	 * If no `linkResolver` is provided the function will use the one provided to
-	 * the plugin at {@link PrismicPluginOptions.linkResolver} if available.
-	 * @remarks
-	 * If no `htmlSerializer` is provided the function will use the one provided
-	 * to the plugin at {@link PrismicPluginOptions.htmlSerializer} if available.
-	 *
-	 * @see Templating rich text and title fields {@link https://prismic.io/docs/technologies/vue-template-content#rich-text-and-titles}
-	 */
-	asHTML: typeof asHTML
-
-	/**
-	 * Resolves any type of link field or document to a URL. This is
-	 * `@prismicio/client` {@link asLink} function.
-	 *
-	 * @remarks
-	 * If no `linkResolver` is provided the function will use the one provided to
-	 * the plugin at {@link PrismicPluginOptions.linkResolver} if available.
-	 *
-	 * @see Templating link fields {@link https://prismic.io/docs/technologies/vue-template-content#links-and-content-relationships}
-	 */
-	asLink: typeof asLink
-
-	/**
-	 * Resolves any type of link field or document to a set of link attributes.
-	 * This is `@prismicio/client` {@link asLinkAttrs} function.
-	 *
-	 * @remarks
-	 * If no `linkResolver` is provided the function will use the one provided to
-	 * the plugin at {@link PrismicPluginOptions.linkResolver} if available.
-	 *
-	 * @see Templating link fields {@link https://prismic.io/docs/technologies/vue-template-content#links-and-content-relationships}
-	 */
-	asLinkAttrs: typeof asLinkAttrs
-
-	/**
-	 * Transforms a date or timestamp field into a JavaScript Date object. This is
-	 * `@prismicio/client` {@link asDate} function.
-	 */
-	asDate: typeof asDate
-
-	/**
-	 * Returns the URL of an image field with optional image transformations (via
-	 * Imgix URL parameters). This is `@prismicio/client` {@link asImageSrc}
-	 * function.
-	 */
-	asImageSrc: typeof asImageSrc
-
-	/**
-	 * Creates a width-based `srcset` from an image field with optional image
-	 * transformations (via Imgix URL parameters). This is `@prismicio/client`
-	 * {@link asImageWidthSrcSet} function.
-	 */
-	asImageWidthSrcSet: typeof asImageWidthSrcSet
-
-	/**
-	 * Creates a pixel-density-based `srcset` from an image field with optional
-	 * image transformations (via Imgix URL parameters). This is
-	 * `@prismicio/client` {@link asImagePixelDensitySrcSet} function.
-	 */
-	asImagePixelDensitySrcSet: typeof asImagePixelDensitySrcSet
-
-	/**
-	 * Helpers to determine if a field is filled. This is `@prismicio/client`
-	 * {@link isFilled} object.
-	 */
-	isFilled: typeof isFilled
-
-	/**
-	 * Converts a document into a link field. This is `@prismicio/client`
-	 * {@link documentToLinkField} function.
-	 *
-	 * @internal
-	 */
-	documentToLinkField: typeof documentToLinkField
-}
-
-/**
- * Methods and properties exposed by `@prismicio/vue` plugin and accessible
- * through `this.$prismic` and `usePrismic()`.
- */
-export type PrismicPlugin = {
-	/**
-	 * Options uses to initialize the plugin.
-	 *
-	 * @see `@prismicio/vue` plugin options {@link PrismicPluginOptions}
-	 */
-	readonly options: PrismicPluginOptions
-
-	/**
-	 * `@prismicio/vue` plugin install function used by Vue.
-	 *
-	 * @internal
-	 */
-	install: (app: App) => void
-} & PrismicPluginClient &
-	PrismicPluginHelpers
-
-// Helpers
-
-/**
- * Type to transform a static object into one that allows passing Refs as
- * values.
- *
- * @internal
- */
-export type VueUseOptions<T> = {
-	[K in keyof T]: Ref<T[K]> | T[K]
-}
-
-/**
- * Type to transform a static tuple into one that allows passing Refs as values.
- *
- * @internal
- */
-export type VueUseParameters<T> = {
-	[K in keyof T]: T extends number ? Ref<T[K]> | T[K] : T[K]
-}
-
-/**
- * A component or a tag name to be used as props.
- *
- * @internal
- */
-export type ComponentOrTagName =
-	| string
-	| ConcreteComponent
-	| Raw<DefineComponent>

package/dist/PrismicEmbed.vue.cjs

@@ -1,25 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,19 +0,0 @@
-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

@@ -1,26 +0,0 @@
-import { defineComponent, createBlock, createCommentVNode, unref, openBlock, resolveDynamicComponent } 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

@@ -1 +0,0 @@
-{"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

@@ -1,4 +0,0 @@
-"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

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

package/dist/PrismicEmbed.vue2.js

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

package/dist/PrismicEmbed.vue2.js.map

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

package/dist/PrismicImage.vue.cjs

@@ -1,112 +0,0 @@
-"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", "width", "height"];
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{ name: "PrismicImage" },
-  __name: "PrismicImage",
-  props: {
-    field: {},
-    imgixParams: {},
-    alt: {},
-    fallbackAlt: {},
-    width: {},
-    height: {},
-    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 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)) {
-        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;
-      }
-      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)
-      };
-    });
-    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,
-        width: image.value.width,
-        height: image.value.height
-      }, null, 8, _hoisted_1)) : vue.createCommentVNode("", true);
-    };
-  }
-});
-module.exports = _sfc_main;
-//# sourceMappingURL=PrismicImage.vue.cjs.map