@prismicio/vue 3.0.0-beta.4 → 3.0.0-beta.7

package/src/components/PrismicImage.ts

@@ -19,9 +19,10 @@ import {
 	isFilled,
 } from "@prismicio/helpers";
 
+import { simplyResolveComponent } from "../lib/simplyResolveComponent";
+import { __PRODUCTION__ } from "../lib/__PRODUCTION__";
 import { usePrismic } from "../usePrismic";
 import { VueUseOptions } from "../types";
-import { simplyResolveComponent } from "../lib/simplyResolveComponent";
 
 /**
  * The default component rendered for images.
@@ -59,8 +60,8 @@ export type PrismicImageProps = {
 	 * Adds an additional `srcset` attribute to the image following given widths.
 	 *
 	 * @remarks
-	 * A special value of `"auto"` is accepted to automatically use image widths
-	 * coming from the API.
+	 * A special value of `"thumbnails"` is accepted to automatically use image
+	 * widths coming from the API.
 	 * @remarks
 	 * A special value of `"defaults"` is accepted to automatically use image
 	 * widths coming from the plugin configuration.
@@ -70,7 +71,7 @@ export type PrismicImageProps = {
 	 */
 	widths?:
 		| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
-		| "auto"
+		| "thumbnails"
 		| "defaults";
 
 	/**
@@ -149,30 +150,20 @@ export const usePrismicImage = (
 		const pixelDensities = unref(props.pixelDensities);
 
 		if (widths) {
-			if (pixelDensities) {
+			if (!__PRODUCTION__ && pixelDensities) {
 				console.warn(
-					"[PrismicImage] `widths` and `pixelDensities` props should not be use alongside each others, only `widths` will be applied",
+					"[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,
 				);
 			}
 
-			if (widths === "auto") {
-				return asImageWidthSrcSet(field, imgixParams);
-			} else {
-				// Remove potential thumbnails when using manual widths
-				const { url, dimensions, alt, copyright } = field;
-
-				return asImageWidthSrcSet(
-					{ url, dimensions, alt, copyright },
-					{
-						...imgixParams,
-						widths:
-							widths === "defaults"
-								? options.components?.imageWidthSrcSetDefaults
-								: widths,
-					},
-				);
-			}
+			return asImageWidthSrcSet(field, {
+				...imgixParams,
+				widths:
+					widths === "defaults"
+						? options.components?.imageWidthSrcSetDefaults
+						: widths,
+			});
 		} else if (pixelDensities) {
 			return asImagePixelDensitySrcSet(field, {
 				...imgixParams,
@@ -235,7 +226,7 @@ export const PrismicImageImpl = /*#__PURE__*/ defineComponent({
 		widths: {
 			type: [String, Object] as PropType<
 				| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
-				| "auto"
+				| "thumbnails"
 				| "defaults"
 			>,
 			default: undefined,

package/src/components/PrismicRichText.ts

@@ -22,6 +22,7 @@ import {
 	asHTML,
 	HTMLFunctionSerializer,
 	HTMLMapSerializer,
+	isFilled,
 	LinkResolverFunction,
 } from "@prismicio/helpers";
 import { RichTextField } from "@prismicio/types";
@@ -43,7 +44,7 @@ export type PrismicRichTextProps = {
 	/**
 	 * The Prismic rich text or title field to render.
 	 */
-	field: RichTextField;
+	field: RichTextField | null | undefined;
 
 	/**
 	 * A link resolver function used to resolve link when not using the route
@@ -70,6 +71,12 @@ export type PrismicRichTextProps = {
 	 * @defaultValue `"div"`
 	 */
 	wrapper?: string | ConcreteComponent;
+
+	/**
+	 * The HTML value to be rendered when the field is empty. If a fallback is not
+	 * given, `""` (nothing) will be rendered.
+	 */
+	fallback?: string;
 };
 
 /**
@@ -102,12 +109,17 @@ export const usePrismicRichText = (
 	const { options } = usePrismic();
 
 	const html = computed(() => {
+		const field = unref(props.field);
+
+		if (!isFilled.richText(field)) {
+			return unref(props.fallback) ?? "";
+		}
+
 		const linkResolver = unref(props.linkResolver) ?? options.linkResolver;
 		const htmlSerializer =
 			unref(props.htmlSerializer) ?? options.htmlSerializer;
 
-		// TODO: Update after https://github.com/prismicio/prismic-helpers/pull/43
-		return asHTML(unref(props.field), linkResolver, htmlSerializer) || "";
+		return asHTML(unref(field), linkResolver, htmlSerializer);
 	});
 
 	return {
@@ -124,7 +136,7 @@ export const PrismicRichTextImpl = /*#__PURE__*/ defineComponent({
 	name: "PrismicRichText",
 	props: {
 		field: {
-			type: Array as unknown as PropType<RichTextField>,
+			type: Array as unknown as PropType<RichTextField | null | undefined>,
 			required: true,
 		},
 		linkResolver: {
@@ -144,19 +156,19 @@ export const PrismicRichTextImpl = /*#__PURE__*/ defineComponent({
 			default: undefined,
 			required: false,
 		},
+		fallback: {
+			type: String as PropType<string>,
+			default: undefined,
+			required: false,
+		},
 	},
 	setup(props) {
-		// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
-		if (!props.field) {
-			return () => null;
-		}
-
 		const { html } = usePrismicRichText(props);
 
 		const root = ref<HTMLElement | Comment | Component | null>(null);
 
 		const maybeRouter = inject(routerKey, null);
-		if (maybeRouter) {
+		if (maybeRouter && html.value) {
 			type InternalLink = {
 				element: HTMLAnchorElement;
 				listener: EventListener;

package/src/components/PrismicText.ts

@@ -12,7 +12,7 @@ import {
 	VNodeProps,
 } from "vue";
 
-import { asText } from "@prismicio/helpers";
+import { asText, isFilled } from "@prismicio/helpers";
 import { RichTextField } from "@prismicio/types";
 
 import { VueUseOptions } from "../types";
@@ -29,7 +29,7 @@ export type PrismicTextProps = {
 	/**
 	 * The Prismic rich text or title field to render.
 	 */
-	field: RichTextField;
+	field: RichTextField | null | undefined;
 
 	/**
 	 * Separator used to join each element.
@@ -44,6 +44,12 @@ export type PrismicTextProps = {
 	 * @defaultValue `"div"`
 	 */
 	wrapper?: string | ConcreteComponent;
+
+	/**
+	 * The string value to be rendered when the field is empty. If a fallback is
+	 * not given, `""` (nothing) will be rendered.
+	 */
+	fallback?: string;
 };
 
 /**
@@ -74,8 +80,13 @@ export const usePrismicText = (
 	props: UsePrismicTextOptions,
 ): UsePrismicTextReturnType => {
 	const text = computed(() => {
-		// TODO: Update after https://github.com/prismicio/prismic-helpers/pull/43
-		return asText(unref(props.field), unref(props.separator)) || "";
+		const field = unref(props.field);
+
+		if (!isFilled.richText(field)) {
+			return unref(props.fallback) ?? "";
+		}
+
+		return asText(unref(field), unref(props.separator));
 	});
 
 	return {
@@ -92,7 +103,7 @@ export const PrismicTextImpl = /*#__PURE__*/ defineComponent({
 	name: "PrismicText",
 	props: {
 		field: {
-			type: Array as unknown as PropType<RichTextField>,
+			type: Array as unknown as PropType<RichTextField | null | undefined>,
 			required: true,
 		},
 		separator: {
@@ -105,13 +116,13 @@ export const PrismicTextImpl = /*#__PURE__*/ defineComponent({
 			default: undefined,
 			required: false,
 		},
+		fallback: {
+			type: String as PropType<string>,
+			default: undefined,
+			required: false,
+		},
 	},
 	setup(props) {
-		// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
-		if (!props.field) {
-			return () => null;
-		}
-
 		const { text } = usePrismicText(props);
 
 		return () => {

package/src/components/SliceZone.ts

@@ -19,6 +19,40 @@ import { simplyResolveComponent } from "../lib/simplyResolveComponent";
 import { __PRODUCTION__ } from "../lib/__PRODUCTION__";
 import { usePrismic } from "../usePrismic";
 
+/**
+ * Returns the type of a `SliceLike` type.
+ *
+ * @typeParam TSlice - The Slice from which the type will be extracted.
+ */
+type ExtractSliceType<TSlice extends SliceLike> = TSlice extends SliceLikeRestV2
+	? TSlice["slice_type"]
+	: TSlice extends SliceLikeGraphQL
+	? TSlice["type"]
+	: never;
+
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * Rest API V2 for the `<SliceZone>` component.
+ *
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
+ *
+ * @typeParam TSliceType - Type name of the Slice.
+ */
+export type SliceLikeRestV2<TSliceType extends string = string> = {
+	slice_type: Slice<TSliceType>["slice_type"];
+};
+
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * GraphQL API for the `<SliceZone>` component.
+ *
+ * @typeParam TSliceType - Type name of the Slice.
+ */
+export type SliceLikeGraphQL<TSliceType extends string = string> = {
+	type: Slice<TSliceType>["slice_type"];
+};
+
 /**
  * The minimum required properties to represent a Prismic Slice for the
  * `<SliceZone />` component.
@@ -28,10 +62,9 @@ import { usePrismic } from "../usePrismic";
  *
  * @typeParam TSliceType - Type name of the Slice
  */
-export type SliceLike<TSliceType extends string = string> = Pick<
-	Slice<TSliceType>,
-	"slice_type"
->;
+export type SliceLike<TSliceType extends string = string> =
+	| SliceLikeRestV2<TSliceType>
+	| SliceLikeGraphQL<TSliceType>;
 
 /**
  * A looser version of the `SliceZone` type from `@prismicio/types` using `SliceLike`.
@@ -41,7 +74,8 @@ export type SliceLike<TSliceType extends string = string> = Pick<
  *
  * @typeParam TSlice - The type(s) of slices in the Slice Zone
  */
-export type SliceZoneLike<TSlice extends SliceLike> = readonly TSlice[];
+export type SliceZoneLike<TSlice extends SliceLike = SliceLike> =
+	readonly TSlice[];
 
 /**
  * Vue props for a component rendering content from a Prismic Slice using the
@@ -52,7 +86,8 @@ export type SliceZoneLike<TSlice extends SliceLike> = readonly TSlice[];
  *   available to all Slice components
  */
 export type SliceComponentProps<
-	TSlice extends SliceLike = SliceLike,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	TSlice extends SliceLike = any,
 	TContext = unknown,
 > = {
 	/**
@@ -178,7 +213,8 @@ export const getSliceComponentProps = <
  * @typeParam TContext - Arbitrary data made available to all Slice components
  */
 export type SliceComponentType<
-	TSlice extends SliceLike = SliceLike,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	TSlice extends SliceLike = any,
 	TContext = unknown,
 > =
 	| DefineComponent<SliceComponentProps<TSlice, TContext>>
@@ -196,9 +232,15 @@ export const TODOSliceComponent = __PRODUCTION__
 			name: "TODOSliceComponent",
 			props: getSliceComponentProps(),
 			setup(props) {
+				const type = computed(() =>
+					"slice_type" in props.slice
+						? props.slice.slice_type
+						: props.slice.type,
+				);
+
 				watchEffect(() => {
 					console.warn(
-						`[SliceZone] Could not find a component for Slice type "${props.slice.slice_type}"`,
+						`[SliceZone] Could not find a component for Slice type "${type.value}"`,
 						props.slice,
 					);
 				});
@@ -208,11 +250,9 @@ export const TODOSliceComponent = __PRODUCTION__
 						"section",
 						{
 							"data-slice-zone-todo-component": "",
-							"data-slice-type": props.slice.slice_type,
+							"data-slice-type": type.value,
 						},
-						[
-							`Could not find a component for Slice type "${props.slice.slice_type}"`,
-						],
+						[`Could not find a component for Slice type "${type.value}"`],
 					);
 				};
 			},
@@ -239,7 +279,7 @@ export type SliceZoneComponents<
 	// signals to future developers that it is a placeholder and should be
 	// implemented.
 	{
-		[SliceType in keyof Record<TSlice["slice_type"], never>]:
+		[SliceType in ExtractSliceType<TSlice>]:
 			| SliceComponentType<Extract<TSlice, SliceLike<SliceType>>, TContext>
 			| string;
 	};
@@ -313,7 +353,7 @@ export type SliceZoneResolverArgs<TSlice extends SliceLike = SliceLike> = {
 	/**
 	 * The name of the Slice.
 	 */
-	sliceName: TSlice["slice_type"];
+	sliceName: ExtractSliceType<TSlice>;
 
 	/**
 	 * The index of the Slice in the Slice Zone.
@@ -333,26 +373,24 @@ export type SliceZoneResolverArgs<TSlice extends SliceLike = SliceLike> = {
  * @returns The Vue component to render for a Slice.
  */
 export type SliceZoneResolver<
-	TSlice extends SliceLike = SliceLike,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	TSlice extends SliceLike = any,
 	TContext = unknown,
 > = (
 	args: SliceZoneResolverArgs<TSlice>,
-) => SliceComponentType<TSlice, TContext> | string | undefined | null;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => SliceComponentType<any, TContext> | string | undefined | null;
 
 /**
  * Props for `<SliceZone />`.
  *
- * @typeParam TSlice - The type(s) of slices in the Slice Zone
  * @typeParam TContext - Arbitrary data made available to all Slice components
  */
-export type SliceZoneProps<
-	TSlice extends SliceLike = SliceLike,
-	TContext = unknown,
-> = {
+export type SliceZoneProps<TContext = unknown> = {
 	/**
 	 * List of Slice data from the Slice Zone.
 	 */
-	slices: SliceZoneLike<TSlice>;
+	slices: SliceZoneLike;
 
 	/**
 	 * A record mapping Slice types to Vue components.
@@ -369,7 +407,8 @@ export type SliceZoneProps<
 	 *
 	 * @returns The Vue component to render for a Slice.
 	 */
-	resolver?: SliceZoneResolver<TSlice, TContext>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	resolver?: SliceZoneResolver<any, TContext>;
 
 	/**
 	 * Arbitrary data made available to all Slice components.
@@ -385,7 +424,8 @@ export type SliceZoneProps<
 	 *
 	 * @defaultValue The Slice Zone default component provided to `@prismicio/vue` plugin if configured, otherwise `null` when `process.env.NODE_ENV === "production"` else {@link TODOSliceComponent}.
 	 */
-	defaultComponent?: SliceComponentType<TSlice, TContext>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	defaultComponent?: SliceComponentType<any, TContext>;
 
 	/**
 	 * An HTML tag name, a component, or a functional component used to wrap the
@@ -403,7 +443,7 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 	name: "SliceZone",
 	props: {
 		slices: {
-			type: Array as PropType<SliceZoneLike<SliceLike>>,
+			type: Array as PropType<SliceZoneLike>,
 			required: true,
 		},
 		components: {
@@ -442,9 +482,11 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 
 		const renderedSlices = computed(() => {
 			return props.slices.map((slice, index) => {
+				const type = "slice_type" in slice ? slice.slice_type : slice.type;
+
 				let component =
-					props.components && slice.slice_type in props.components
-						? props.components[slice.slice_type]
+					props.components && type in props.components
+						? props.components[type]
 						: props.defaultComponent ||
 						  options.components?.sliceZoneDefaultComponent ||
 						  TODOSliceComponent;
@@ -453,7 +495,7 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 				if (props.resolver) {
 					const resolvedComponent = props.resolver({
 						slice,
-						sliceName: slice.slice_type,
+						sliceName: type,
 						i: index,
 					});
 
@@ -463,7 +505,7 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 				}
 
 				const p = {
-					key: `${slice.slice_type}-${index}`,
+					key: `${index}-${JSON.stringify(slice)}`,
 					slice,
 					index,
 					context: props.context,

package/src/components/index.ts

@@ -35,6 +35,8 @@ export type {
 	DefineComponentSliceComponentProps,
 	SliceComponentProps,
 	SliceComponentType,
+	SliceLikeRestV2,
+	SliceLikeGraphQL,
 	SliceLike,
 	SliceZoneComponents,
 	SliceZoneResolverArgs,

package/src/index.ts

@@ -35,6 +35,8 @@ export type {
 	DefineComponentSliceComponentProps,
 	SliceComponentProps,
 	SliceComponentType,
+	SliceLikeRestV2,
+	SliceLikeGraphQL,
 	SliceLike,
 	SliceZoneComponents,
 	SliceZoneResolver,

package/vetur/attributes.json

@@ -74,6 +74,10 @@
 		"type": "string | object | function",
 		"description": "An HTML tag name, a component, or a functional component used to wrap the output. Defaults to `\"div\"`."
 	},
+	"prismic-rich-text/fallback": {
+		"type": "string",
+		"description": "The HTML value to be rendered when the field is empty. If a fallback is not given, `\"\"` (nothing) will be rendered."
+	},
 
 	"prismic-text/field": {
 		"type": "array",
@@ -87,6 +91,10 @@
 		"type": "string | object | function",
 		"description": "An HTML tag name, a component, or a functional component used to wrap the output. Defaults to `\"div\"`."
 	},
+	"prismic-text/fallback": {
+		"type": "string",
+		"description": "The string value to be rendered when the field is empty. If a fallback is not given, `\"\"` (nothing) will be rendered."
+	},
 
 	"slice-zone/slices": {
 		"type": "array",

package/vetur/tags.json

@@ -26,11 +26,11 @@
 		"description": "Component to render a Prismic link field."
 	},
 	"prismic-rich-text": {
-		"attributes": ["field", "link-resolver", "html-serializer", "wrapper"],
+		"attributes": ["field", "link-resolver", "html-serializer", "wrapper", "fallback"],
 		"description": "Component to render a Prismic rich text field as HTML."
 	},
 	"prismic-text": {
-		"attributes": ["field", "separator", "wrapper"],
+		"attributes": ["field", "separator", "wrapper", "fallback"],
 		"description": "Component to render a Prismic rich text field as plain text."
 	},
 	"slice-zone": {