@prismicio/vue 3.0.0-alpha.5 → 3.0.0-beta.2

package/src/composables.ts

@@ -22,10 +22,13 @@ import {
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.get}
  */
 export const usePrismicDocuments = <TDocument extends PrismicDocument>(
@@ -41,10 +44,13 @@ export const usePrismicDocuments = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of the Prismic document returned
+ *
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getFirst}
  */
 export const useFirstPrismicDocument = <TDocument extends PrismicDocument>(
@@ -59,11 +65,14 @@ export const useFirstPrismicDocument = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of the Prismic document returned
+ *
  * @param id - ID of the document
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getByID}
  */
 export const usePrismicDocumentByID = <TDocument extends PrismicDocument>(
@@ -79,11 +88,14 @@ export const usePrismicDocumentByID = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param ids - A list of document IDs
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getByIDs}
  */
 export const usePrismicDocumentsByIDs = <TDocument extends PrismicDocument>(
@@ -99,11 +111,14 @@ export const usePrismicDocumentsByIDs = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param ids - A list of document IDs
  * @param params - Parameters to filter and sort results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getAllByIDs}
  */
 export const useAllPrismicDocumentsByIDs = <TDocument extends PrismicDocument>(
@@ -121,12 +136,15 @@ export const useAllPrismicDocumentsByIDs = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of the Prismic document returned
+ *
  * @param documentType - The API ID of the document's Custom Type
  * @param uid - UID of the document
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getByUID}
  */
 export const usePrismicDocumentByUID = <TDocument extends PrismicDocument>(
@@ -143,12 +161,15 @@ export const usePrismicDocumentByUID = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param documentType - The API ID of the document's Custom Type
  * @param uids - A list of document UIDs
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getByIDs}
  */
 export const usePrismicDocumentsByUIDs = <TDocument extends PrismicDocument>(
@@ -165,12 +186,15 @@ export const usePrismicDocumentsByUIDs = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param documentType - The API ID of the document's Custom Type
  * @param uids - A list of document UIDs
  * @param params - Parameters to filter and sort results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getAllByIDs}
  */
 export const useAllPrismicDocumentsByUIDs = <TDocument extends PrismicDocument>(
@@ -189,11 +213,14 @@ export const useAllPrismicDocumentsByUIDs = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of the Prismic document returned
+ *
  * @param documentType - The API ID of the singleton Custom Type
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getSingle}
  */
 export const useSinglePrismicDocument = <TDocument extends PrismicDocument>(
@@ -210,11 +237,14 @@ export const useSinglePrismicDocument = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param documentType - The API ID of the Custom Type
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getByType}
  */
 export const usePrismicDocumentsByType = <TDocument extends PrismicDocument>(
@@ -231,11 +261,14 @@ export const usePrismicDocumentsByType = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param documentType - The API ID of the Custom Type
  * @param params - Parameters to filter and sort results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getAllByType}
  */
 export const useAllPrismicDocumentsByType = <TDocument extends PrismicDocument>(
@@ -252,11 +285,14 @@ export const useAllPrismicDocumentsByType = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param tag - The tag that must be included on a document
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getByTag}
  */
 export const usePrismicDocumentsByTag = <TDocument extends PrismicDocument>(
@@ -273,11 +309,14 @@ export const usePrismicDocumentsByTag = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param tag - The tag that must be included on a document
  * @param params - Parameters to filter and sort results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getAllByTag}
  */
 export const useAllPrismicDocumentsByTag = <TDocument extends PrismicDocument>(
@@ -295,11 +334,14 @@ export const useAllPrismicDocumentsByTag = <TDocument extends PrismicDocument>(
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param tags - A list of tags that must be included on a document
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getByTags}
  */
 export const usePrismicDocumentsByEveryTag = <
@@ -319,11 +361,14 @@ export const usePrismicDocumentsByEveryTag = <
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param tags - A list of tags that must be included on a document
  * @param params - Parameters to filter and sort results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getAllByTags}
  */
 export const useAllPrismicDocumentsByEveryTag = <
@@ -343,11 +388,14 @@ export const useAllPrismicDocumentsByEveryTag = <
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param tags - A list of tags that must be included on a document
  * @param params - Parameters to filter, sort, and paginate results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getByTags}
  */
 export const usePrismicDocumentsBySomeTags = <
@@ -368,11 +416,14 @@ export const usePrismicDocumentsBySomeTags = <
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param tags - A list of tags that must be included on a document
  * @param params - Parameters to filter and sort results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getAllByTags}
  */
 export const useAllPrismicDocumentsBySomeTags = <
@@ -396,10 +447,13 @@ export const useAllPrismicDocumentsBySomeTags = <
  *
  * @remarks
  * An additional `@prismicio/client` instance can be provided at `params.client`.
+ *
  * @typeParam TDocument - Type of Prismic documents returned
+ *
  * @param params - Parameters to filter and sort results
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @see Underlying `@prismicio/client` method {@link Client.getAll}
  */
 export const dangerouslyUseAllPrismicDocuments = <

package/src/createPrismic.ts

@@ -9,10 +9,13 @@ import {
 	FetchLike,
 } from "@prismicio/client";
 import {
-	asDate,
+	asText,
 	asHTML,
 	asLink,
-	asText,
+	asDate,
+	asImageSrc,
+	asImageWidthSrcSet,
+	asImagePixelDensitySrcSet,
 	documentToLinkField,
 } from "@prismicio/helpers";
 
@@ -38,6 +41,7 @@ import type {
  * @param options - {@link PrismicPluginOptions}
  *
  * @returns `@prismicio/vue` plugin instance {@link PrismicPlugin}
+ *
  * @see Prismic Official Vue.js documentation: {@link https://prismic.io/docs/technologies/vuejs}
  * @see Plugin repository: {@link https://github.com/prismicio/prismic-vue}
  */
@@ -97,7 +101,9 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 			return asLink(linkField, linkResolver || options.linkResolver);
 		},
 		asDate,
-
+		asImageSrc,
+		asImageWidthSrcSet,
+		asImagePixelDensitySrcSet,
 		documentToLinkField,
 	};
 

package/src/index.ts

@@ -3,6 +3,7 @@ export { usePrismic } from "./usePrismic";
 
 export {
 	// Composables
+	usePrismicImage,
 	usePrismicLink,
 	usePrismicText,
 	usePrismicRichText,
@@ -15,12 +16,13 @@ export {
 	// Slice Zone
 	getSliceComponentProps,
 	TODOSliceComponent,
-	getSliceZoneComponents,
+	defineSliceZoneComponents,
 	SliceZoneImpl,
 	SliceZone,
 } from "./components";
 export type {
 	// Composables
+	UsePrismicImageOptions,
 	UsePrismicLinkOptions,
 	UsePrismicTextOptions,
 	UsePrismicRichTextOptions,
@@ -36,6 +38,7 @@ export type {
 	SliceComponentType,
 	SliceLike,
 	SliceZoneComponents,
+	SliceZoneResolver,
 	SliceZoneLike,
 	SliceZoneProps,
 } from "./components";

package/src/lib/getSlots.ts

@@ -9,6 +9,7 @@ import { ConcreteComponent, Slots, VNode } from "vue";
  * @param defaultParams - The parameters to provide to the default slot
  *
  * @returns The appropriate slots object/array
+ *
  * @internal
  */
 export const getSlots = (

package/src/lib/simplyResolveComponent.ts

@@ -7,6 +7,7 @@ import { ConcreteComponent, resolveDynamicComponent, VNode } from "vue";
  * @param component - An HTML tag name, a component, or a functional component
  *
  * @returns Resolved component as a {@link VNode} or provided `string`.
+ *
  * @internal
  */
 export const simplyResolveComponent = (

package/src/types.ts

@@ -15,6 +15,9 @@ import type {
 	HTMLFunctionSerializer,
 	HTMLMapSerializer,
 	LinkResolverFunction,
+	asImageSrc,
+	asImageWidthSrcSet,
+	asImagePixelDensitySrcSet,
 } from "@prismicio/helpers";
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -25,6 +28,7 @@ import type { RouterLink } from "vue-router";
 
 import type {
 	SliceComponentProps,
+	SliceComponentType,
 	TODOSliceComponent,
 } from "./components/SliceZone";
 
@@ -88,9 +92,10 @@ type PrismicPluginComponentsOptions = {
 	 *
 	 * @remarks
 	 * Components will be rendered using the {@link SliceComponentProps} interface.
+	 *
 	 * @defaultValue `null` when `process.env.NODE_ENV === "production"` else {@link TODOSliceComponent}
 	 */
-	sliceZoneDefaultComponent?: string | ConcreteComponent;
+	sliceZoneDefaultComponent?: SliceComponentType;
 };
 
 /**
@@ -307,6 +312,26 @@ export type PrismicPluginHelpers = {
 	 */
 	asDate: typeof asDate;
 
+	/**
+	 * Returns the URL of an Image field with optional image transformations (via
+	 * Imgix URL parameters). This is `@prismicio/helpers` {@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/helpers`
+	 * {@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/helpers` {@link asImagePixelDensitySrcSet} function.
+	 */
+	asImagePixelDensitySrcSet: typeof asImagePixelDensitySrcSet;
+
 	/**
 	 * Converts a document into a link field. This is `@prismicio/helpers`
 	 * {@link documentToLinkField} function.

package/src/useStatefulPrismicClientMethod.ts

@@ -91,10 +91,12 @@ const isParams = (
  * @typeParam TClientMethodName - A method name from `@prismicio/client`
  * @typeParam TClientMethodArguments - The method expected arguments
  * @typeParam TClientMethodReturnType - The method expected return type
+ *
  * @param method - The `@prismicio/client` method name to use
  * @param args - The arguments to use with requested method
  *
  * @returns The composable payload {@link ClientComposableReturnType}
+ *
  * @internal
  */
 export const useStatefulPrismicClientMethod = <

package/vetur/attributes.json

@@ -16,9 +16,17 @@
 		"type": "string | object | function",
 		"description": "An HTML tag name, a component, or a functional component used to render images. Defaults to the one provided to `@prismicio/vue` plugin if configured, `\"img\"` otherwise."
 	},
-	"prismic-image/image-component-additional-props": {
+	"prismic-image/imgix-params": {
 		"type": "object",
-		"description": "A map of additional props to pass to the component used to render images when using one."
+		"description": "An object of Imgix URL API parameters."
+	},
+	"prismic-image/widths": {
+		"type": "array | string",
+		"description": "Adds an additional `srcset` attribute to the image following given widths."
+	},
+	"prismic-image/pixel-densities": {
+		"type": "array | string",
+		"description": "Adds an additional `srcset` attribute to the image following giving pixel densities."
 	},
 
 	"prismic-link/field": {

package/vetur/tags.json

@@ -7,7 +7,9 @@
 		"attributes": [
 			"field",
 			"image-component",
-			"image-component-additional-props"
+			"imgix-params",
+			"widths",
+			"pixel-densities"
 		],
 		"description": "Component to render a Prismic image field."
 	},