@prismicio/vue 4.2.3 → 4.3.1

package/src/components/PrismicImage.ts

@@ -1,11 +1,11 @@
+import type { ImageField } from "@prismicio/client"
 import {
-	ImageField,
 	asImagePixelDensitySrcSet,
 	asImageSrc,
 	asImageWidthSrcSet,
 	isFilled,
-} from "@prismicio/client";
-import {
+} from "@prismicio/client"
+import type {
 	AllowedComponentProps,
 	ComponentCustomProps,
 	ComputedRef,
@@ -14,23 +14,20 @@ import {
 	PropType,
 	Raw,
 	VNodeProps,
-	computed,
-	defineComponent,
-	h,
-	unref,
-} from "vue";
+} from "vue"
+import { computed, defineComponent, h, unref } from "vue"
 
-import { __PRODUCTION__ } from "../lib/__PRODUCTION__";
-import { simplyResolveComponent } from "../lib/simplyResolveComponent";
+import { __PRODUCTION__ } from "../lib/__PRODUCTION__"
+import { simplyResolveComponent } from "../lib/simplyResolveComponent"
 
-import { VueUseOptions } from "../types";
+import type { VueUseOptions } from "../types"
 
-import { usePrismic } from "../usePrismic";
+import { usePrismic } from "../usePrismic"
 
 /**
  * The default component rendered for images.
  */
-const defaultImageComponent = "img";
+const defaultImageComponent = "img"
 
 /**
  * Props for `<PrismicImage />`.
@@ -39,7 +36,7 @@ export type PrismicImageProps = {
 	/**
 	 * The Prismic image field to render.
 	 */
-	field: ImageField | ImageField<string>;
+	field: ImageField | ImageField<string>
 
 	/**
 	 * An HTML tag name, a component, or a functional component used to render
@@ -49,16 +46,17 @@ export type PrismicImageProps = {
 	 * HTML tag names and components will be rendered using the `img` tag
 	 * interface (`src`, `srcset`, and `alt` attribute). Components will also
 	 * receive an additional `copyright` props.
+	 *
 	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, `"img"` otherwise.
 	 */
-	imageComponent?: string | ConcreteComponent | Raw<DefineComponent>;
+	imageComponent?: string | ConcreteComponent | Raw<DefineComponent>
 
 	/**
 	 * An object of Imgix URL API parameters.
 	 *
 	 * @see Imgix URL parameters reference: https://docs.imgix.com/apis/rendering
 	 */
-	imgixParams?: Parameters<typeof asImageSrc>[1];
+	imgixParams?: Parameters<typeof asImageSrc>[1]
 
 	/**
 	 * Adds an additional `srcset` attribute to the image following given widths.
@@ -76,7 +74,7 @@ export type PrismicImageProps = {
 	widths?:
 		| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
 		| "thumbnails"
-		| "defaults";
+		| "defaults"
 
 	/**
 	 * Adds an additional `srcset` attribute to the image following giving pixel
@@ -93,15 +91,15 @@ export type PrismicImageProps = {
 		| NonNullable<
 				Parameters<typeof asImagePixelDensitySrcSet>[1]
 		  >["pixelDensities"]
-		| "defaults";
-};
+		| "defaults"
+}
 
 /**
  * Options for {@link usePrismicImage}.
  */
 export type UsePrismicImageOptions = VueUseOptions<
 	Omit<PrismicImageProps, "imageComponent">
->;
+>
 
 /**
  * Return type of {@link usePrismicImage}.
@@ -110,23 +108,23 @@ export type UsePrismicImageReturnType = {
 	/**
 	 * Resolved image `src` value.
 	 */
-	src: ComputedRef<string | null>;
+	src: ComputedRef<string | null>
 
 	/**
 	 * Resolved image `srcset` value.
 	 */
-	srcset: ComputedRef<string | null>;
+	srcset: ComputedRef<string | null>
 
 	/**
 	 * Resolved image `alt` value.
 	 */
-	alt: ComputedRef<string>;
+	alt: ComputedRef<string>
 
 	/**
 	 * Resolved image `copyright` value.
 	 */
-	copyright: ComputedRef<string | null>;
-};
+	copyright: ComputedRef<string | null>
+}
 
 /**
  * A low level composable that returns a resolved information about a Prismic
@@ -139,28 +137,28 @@ export type UsePrismicImageReturnType = {
 export const usePrismicImage = (
 	props: UsePrismicImageOptions,
 ): UsePrismicImageReturnType => {
-	const { options } = usePrismic();
+	const { options } = usePrismic()
 
 	const asImage = computed(() => {
-		const field = unref(props.field);
+		const field = unref(props.field)
 
 		if (!isFilled.image(field)) {
 			return {
 				src: null,
 				srcset: null,
-			};
+			}
 		}
 
-		const imgixParams = unref(props.imgixParams);
-		const widths = unref(props.widths);
-		const pixelDensities = unref(props.pixelDensities);
+		const imgixParams = unref(props.imgixParams)
+		const widths = unref(props.widths)
+		const pixelDensities = unref(props.pixelDensities)
 
 		if (widths) {
 			if (!__PRODUCTION__ && 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.",
 					props,
-				);
+				)
 			}
 
 			return asImageWidthSrcSet(field, {
@@ -169,7 +167,7 @@ export const usePrismicImage = (
 					widths === "defaults"
 						? options.components?.imageWidthSrcSetDefaults
 						: widths,
-			});
+			})
 		} else if (pixelDensities) {
 			return asImagePixelDensitySrcSet(field, {
 				...imgixParams,
@@ -177,35 +175,35 @@ export const usePrismicImage = (
 					pixelDensities === "defaults"
 						? options.components?.imagePixelDensitySrcSetDefaults
 						: pixelDensities,
-			});
+			})
 		} else {
 			return {
 				src: asImageSrc(field, imgixParams),
 				srcset: null,
-			};
+			}
 		}
-	});
+	})
 
 	const src = computed(() => {
-		return asImage.value.src;
-	});
+		return asImage.value.src
+	})
 	const srcset = computed(() => {
-		return asImage.value.srcset;
-	});
+		return asImage.value.srcset
+	})
 	const alt = computed(() => {
-		return unref(props.field).alt || "";
-	});
+		return unref(props.field).alt || ""
+	})
 	const copyright = computed(() => {
-		return unref(props.field).copyright || null;
-	});
+		return unref(props.field).copyright || null
+	})
 
 	return {
 		src,
 		srcset,
 		alt,
 		copyright,
-	};
-};
+	}
+}
 
 /**
  * `<PrismicImage />` implementation.
@@ -254,42 +252,42 @@ export const PrismicImageImpl = /*#__PURE__*/ defineComponent({
 	setup(props) {
 		// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
 		if (!props.field) {
-			return () => null;
+			return () => null
 		}
 
-		const { options } = usePrismic();
+		const { options } = usePrismic()
 
 		const type = computed(() => {
 			return (
 				props.imageComponent ||
 				options.components?.imageComponent ||
 				defaultImageComponent
-			);
-		});
+			)
+		})
 
-		const { src, srcset, alt, copyright } = usePrismicImage(props);
+		const { src, srcset, alt, copyright } = usePrismicImage(props)
 
 		return () => {
 			const attributes = {
 				src: src.value,
 				srcset: srcset.value,
 				alt: alt.value,
-			};
+			}
 
 			switch (type.value) {
 				case "img":
 					// Fitting img tag interface
-					return h("img", attributes);
+					return h("img", attributes)
 
 				default:
 					return h(simplyResolveComponent(type.value), {
 						...attributes,
 						copyright: copyright.value,
-					});
+					})
 			}
-		};
+		}
 	},
-});
+})
 
 // export the public type for h/tsx inference
 // also to avoid inline import() in generated d.ts files
@@ -304,6 +302,6 @@ export const PrismicImage = PrismicImageImpl as unknown as {
 		$props: AllowedComponentProps &
 			ComponentCustomProps &
 			VNodeProps &
-			PrismicImageProps;
-	};
-};
+			PrismicImageProps
+	}
+}

package/src/components/PrismicLink.ts

@@ -1,10 +1,10 @@
-import {
+import type {
 	LinkField,
 	LinkResolverFunction,
 	PrismicDocument,
-	asLink,
-} from "@prismicio/client";
-import {
+} from "@prismicio/client"
+import { asLink } from "@prismicio/client"
+import type {
 	AllowedComponentProps,
 	ComponentCustomProps,
 	ComputedRef,
@@ -13,35 +13,31 @@ import {
 	PropType,
 	Raw,
 	VNodeProps,
-	computed,
-	defineComponent,
-	h,
-	reactive,
-	unref,
-} from "vue";
+} from "vue"
+import { computed, defineComponent, h, reactive, unref } from "vue"
 
-import { getSlots } from "../lib/getSlots";
-import { isInternalURL } from "../lib/isInternalURL";
-import { simplyResolveComponent } from "../lib/simplyResolveComponent";
+import { getSlots } from "../lib/getSlots"
+import { isInternalURL } from "../lib/isInternalURL"
+import { simplyResolveComponent } from "../lib/simplyResolveComponent"
 
-import { VueUseOptions } from "../types";
+import type { VueUseOptions } from "../types"
 
-import { usePrismic } from "../usePrismic";
+import { usePrismic } from "../usePrismic"
 
 /**
  * The default component rendered for internal URLs.
  */
-const defaultInternalComponent = "router-link";
+const defaultInternalComponent = "router-link"
 
 /**
  * The default component rendered for external URLs.
  */
-const defaultExternalComponent = "a";
+const defaultExternalComponent = "a"
 
 /**
  * The default rel attribute rendered for blank target URLs.
  */
-const defaultBlankTargetRelAttribute = "noopener noreferrer";
+const defaultBlankTargetRelAttribute = "noopener noreferrer"
 
 /**
  * Props for `<PrismicLink />`.
@@ -50,7 +46,7 @@ export type PrismicLinkProps = {
 	/**
 	 * The Prismic link field or document to render.
 	 */
-	field: LinkField | PrismicDocument;
+	field: LinkField | PrismicDocument
 
 	/**
 	 * A link resolver function used to resolve links when not using the route
@@ -60,17 +56,17 @@ export type PrismicLinkProps = {
 	 *
 	 * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}
 	 */
-	linkResolver?: LinkResolverFunction;
+	linkResolver?: LinkResolverFunction
 
 	/**
 	 * An explicit `target` attribute to apply to the rendered link.
 	 */
-	target?: string | null;
+	target?: string | null
 
 	/**
 	 * An explicit `rel` attribute to apply to the rendered link.
 	 */
-	rel?: string | null;
+	rel?: string | null
 
 	/**
 	 * Value of the `rel` attribute to use on links rendered with
@@ -78,7 +74,7 @@ export type PrismicLinkProps = {
 	 *
 	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, `"noopener noreferrer"` otherwise.
 	 */
-	blankTargetRelAttribute?: string | null;
+	blankTargetRelAttribute?: string | null
 
 	/**
 	 * An HTML tag name, a component, or a functional component used to render
@@ -90,9 +86,10 @@ export type PrismicLinkProps = {
 	 * @remarks
 	 * Components will be rendered using Vue Router {@link RouterLink} interface
 	 * (`to` props).
+	 *
 	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, {@link RouterLink} otherwise.
 	 */
-	internalComponent?: string | ConcreteComponent | Raw<DefineComponent>;
+	internalComponent?: string | ConcreteComponent | Raw<DefineComponent>
 
 	/**
 	 * An HTML tag name, a component, or a functional component used to render
@@ -104,15 +101,16 @@ export type PrismicLinkProps = {
 	 * @remarks
 	 * Components will be rendered using Vue Router {@link RouterLink} interface
 	 * (`to` props).
+	 *
 	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, `"a"` otherwise.
 	 */
-	externalComponent?: string | ConcreteComponent | Raw<DefineComponent>;
-};
+	externalComponent?: string | ConcreteComponent | Raw<DefineComponent>
+}
 
 /**
  * Options for {@link usePrismicLink}.
  */
-export type UsePrismicLinkOptions = VueUseOptions<PrismicLinkProps>;
+export type UsePrismicLinkOptions = VueUseOptions<PrismicLinkProps>
 
 /**
  * Return type of {@link usePrismicLink}.
@@ -121,23 +119,28 @@ export type UsePrismicLinkReturnType = {
 	/**
 	 * Suggested component to render for provided link field.
 	 */
-	type: ComputedRef<string | ConcreteComponent | Raw<DefineComponent>>;
+	type: ComputedRef<string | ConcreteComponent | Raw<DefineComponent>>
 
 	/**
 	 * Resolved anchor `href` value.
 	 */
-	href: ComputedRef<string>;
+	href: ComputedRef<string>
 
 	/**
 	 * Resolved anchor `target` value.
 	 */
-	target: ComputedRef<string | null>;
+	target: ComputedRef<string | null>
 
 	/**
 	 * Resolved anchor `rel` value.
 	 */
-	rel: ComputedRef<string | null>;
-};
+	rel: ComputedRef<string | null>
+
+	/**
+	 * Resolved link text.
+	 */
+	text: ComputedRef<string | undefined>
+}
 
 /**
  * A low level composable that returns resolved information about a Prismic link
@@ -150,67 +153,74 @@ export type UsePrismicLinkReturnType = {
 export const usePrismicLink = (
 	props: UsePrismicLinkOptions,
 ): UsePrismicLinkReturnType => {
-	const { options } = usePrismic();
+	const { options } = usePrismic()
 
 	const type = computed(() => {
 		const internalComponent =
 			unref(props.internalComponent) ||
 			options.components?.linkInternalComponent ||
-			defaultInternalComponent;
+			defaultInternalComponent
 
 		const externalComponent =
 			unref(props.externalComponent) ||
 			options.components?.linkExternalComponent ||
-			defaultExternalComponent;
+			defaultExternalComponent
 
 		return href.value && isInternalURL(href.value) && !target.value
 			? internalComponent
-			: externalComponent;
-	});
+			: externalComponent
+	})
 	const href = computed(() => {
-		const field = unref(props.field);
-		const linkResolver = unref(props.linkResolver) ?? options.linkResolver;
+		const field = unref(props.field)
+		const linkResolver = unref(props.linkResolver) ?? options.linkResolver
 
-		return asLink(field, linkResolver) ?? "";
-	});
+		return asLink(field, linkResolver) ?? ""
+	})
 	const target = computed(() => {
-		const field = unref(props.field);
-		const target = unref(props.target);
+		const field = unref(props.field)
+		const target = unref(props.target)
 
 		if (typeof target !== "undefined") {
-			return target;
+			return target
 		} else {
-			return field && "target" in field && field.target ? field.target : null;
+			return field && "target" in field && field.target ? field.target : null
 		}
-	});
+	})
 	const rel = computed(() => {
-		const rel = unref(props.rel);
+		const rel = unref(props.rel)
 
 		if (typeof rel !== "undefined") {
-			return rel;
+			return rel
 		} else if (target.value === "_blank") {
-			const blankTargetRelAttribute = unref(props.blankTargetRelAttribute);
+			const blankTargetRelAttribute = unref(props.blankTargetRelAttribute)
 
 			if (typeof blankTargetRelAttribute !== "undefined") {
-				return blankTargetRelAttribute;
+				return blankTargetRelAttribute
 			} else {
 				return typeof options.components?.linkBlankTargetRelAttribute !==
 					"undefined"
 					? options.components.linkBlankTargetRelAttribute
-					: defaultBlankTargetRelAttribute;
+					: defaultBlankTargetRelAttribute
 			}
 		} else {
-			return null;
+			return null
 		}
-	});
+	})
+
+	const text = computed(() => {
+		const field = unref(props.field)
+
+		return field && "text" in field ? field.text : undefined
+	})
 
 	return {
 		type,
 		href,
 		target,
 		rel,
-	};
-};
+		text,
+	}
+}
 
 /**
  * `<PrismicLink />` implementation.
@@ -262,19 +272,20 @@ export const PrismicLinkImpl = /*#__PURE__*/ defineComponent({
 	setup(props, { slots }) {
 		// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
 		if (!props.field) {
-			return () => null;
+			return () => null
 		}
 
-		const { type, href, target, rel } = usePrismicLink(props);
+		const { type, href, target, rel, text } = usePrismicLink(props)
 
 		return () => {
 			const parent =
-				type.value === "a" ? "a" : simplyResolveComponent(type.value);
+				type.value === "a" ? "a" : simplyResolveComponent(type.value)
 			const computedSlots = getSlots(
 				parent,
 				slots,
-				reactive({ href: href.value }),
-			);
+				reactive({ href: href.value, text: text.value }),
+				text.value,
+			)
 
 			if (typeof parent === "string") {
 				// Fitting anchor tag interface
@@ -282,18 +293,18 @@ export const PrismicLinkImpl = /*#__PURE__*/ defineComponent({
 					parent,
 					{ href: href.value, target: target.value, rel: rel.value },
 					computedSlots,
-				);
+				)
 			} else {
 				// Fitting Vue Router Link interface
 				return h(
 					parent,
 					{ to: href.value, target: target.value, rel: rel.value },
 					computedSlots,
-				);
+				)
 			}
-		};
+		}
 	},
-});
+})
 
 // export the public type for h/tsx inference
 // also to avoid inline import() in generated d.ts files
@@ -308,6 +319,6 @@ export const PrismicLink = PrismicLinkImpl as unknown as {
 		$props: AllowedComponentProps &
 			ComponentCustomProps &
 			VNodeProps &
-			PrismicLinkProps;
-	};
-};
+			PrismicLinkProps
+	}
+}