@prismicio/vue 5.3.0-canary.5d9ea4c → 5.3.0-canary.87748cc

package/src/PrismicTable/PrismicTableDefaultComponents.ts

@@ -1,44 +1,69 @@
 import { defineComponent, h } from "vue"
+import type { PropType } from "vue"
 
-import type { VueTableComponents } from "./types"
+import type { DefaultVueTableComponents } from "./types"
 
 import * as getTableComponentProps from "./getTableComponentProps"
 
-export const defaultTableComponents: Required<VueTableComponents> = {
+export const defaultTableComponents: DefaultVueTableComponents = {
 	table: defineComponent({
-		props: getTableComponentProps.table(),
-		setup(props, { slots }) {
-			return () => h("table", slots.default ? slots.default() : [])
+		props: {
+			...getTableComponentProps.table(),
+			as: { type: String as PropType<string | undefined> },
+		},
+		setup(props, { attrs, slots }) {
+			return () =>
+				h(props.as ?? "table", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	thead: defineComponent({
-		props: getTableComponentProps.thead(),
-		setup(props, { slots }) {
-			return () => h("thead", slots.default ? slots.default() : [])
+		props: {
+			...getTableComponentProps.thead(),
+			as: { type: String as PropType<string | undefined> },
+		},
+		setup(props, { attrs, slots }) {
+			return () =>
+				h(props.as ?? "thead", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	tbody: defineComponent({
-		props: getTableComponentProps.tbody(),
-		setup(props, { slots }) {
-			return () => h("tbody", slots.default ? slots.default() : [])
+		props: {
+			...getTableComponentProps.tbody(),
+			as: { type: String as PropType<string | undefined> },
+		},
+		setup(props, { attrs, slots }) {
+			return () =>
+				h(props.as ?? "tbody", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	tr: defineComponent({
-		props: getTableComponentProps.tr(),
-		setup(props, { slots }) {
-			return () => h("tr", slots.default ? slots.default() : [])
+		props: {
+			...getTableComponentProps.tr(),
+			as: { type: String as PropType<string | undefined> },
+		},
+		setup(props, { attrs, slots }) {
+			return () =>
+				h(props.as ?? "tr", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	th: defineComponent({
-		props: getTableComponentProps.th(),
-		setup(props, { slots }) {
-			return () => h("th", slots.default ? slots.default() : [])
+		props: {
+			...getTableComponentProps.th(),
+			as: { type: String as PropType<string | undefined> },
+		},
+		setup(props, { attrs, slots }) {
+			return () =>
+				h(props.as ?? "th", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	td: defineComponent({
-		props: getTableComponentProps.td(),
-		setup(props, { slots }) {
-			return () => h("td", slots.default ? slots.default() : [])
+		props: {
+			...getTableComponentProps.td(),
+			as: { type: String as PropType<string | undefined> },
+		},
+		setup(props, { attrs, slots }) {
+			return () =>
+				h(props.as ?? "td", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 }

package/src/PrismicTable/PrismicTableRow.vue

@@ -1,32 +1,15 @@
 <script lang="ts" setup>
 import type { TableFieldBodyRow, TableFieldHeadRow } from "@prismicio/client"
 
-import type { VueTableComponents } from "./types"
+import type { InternalVueTableComponents } from "./types"
 
 import type { VueRichTextSerializer } from "../PrismicRichText"
 import PrismicRichText from "../PrismicRichText/PrismicRichText.vue"
 
-/**
- * Props for `<PrismicRowTable />`.
- */
 export type PrismicTableRowProps = {
-	/**
-	 * The Prismic table row to render.
-	 */
 	row: TableFieldHeadRow | TableFieldBodyRow
-
-	/**
-	 * An object that maps a table block type to a Vue component.
-	 *
-	 * @example
-	 *
-	 * ```javascript
-	 * {
-	 *   tr: TableRow,
-	 * }
-	 * ```
-	 */
-	components: VueTableComponents & VueRichTextSerializer
+	internalTableComponents: InternalVueTableComponents
+	components?: VueRichTextSerializer
 }
 
 const props = defineProps<PrismicTableRowProps>()
@@ -34,17 +17,27 @@ defineOptions({ name: "PrismicTableRow" })
 </script>
 
 <template>
-	<component :is="props.components.tr" :row="row">
+	<component
+		:is="internalTableComponents.tr.is"
+		:row="row"
+		v-bind="internalTableComponents.tr.shorthand"
+	>
 		<template v-for="cell in row.cells" :key="cell.key">
 			<component
 				v-if="cell.type === 'header'"
-				:is="props.components.th"
+				:is="internalTableComponents.th.is"
 				:cell="cell"
+				v-bind="internalTableComponents.th.shorthand"
 			>
 				<PrismicRichText :field="cell.content" :components="components" />
 			</component>
-			<component v-else :is="props.components.td" :cell="cell">
-				<PrismicRichText :field="cell.content" :components="props.components" />
+			<component
+				v-else
+				:is="internalTableComponents.td.is"
+				:cell="cell"
+				v-bind="internalTableComponents.td.shorthand"
+			>
+				<PrismicRichText :field="cell.content" :components="components" />
 			</component>
 		</template>
 	</component>

package/src/PrismicTable/types.ts

@@ -7,11 +7,9 @@ import type {
 	TableFieldHeadRow,
 	TableFieldHeaderCell,
 } from "@prismicio/client"
-import type {
-	DefineComponent,
-	FunctionalComponent,
-	defineAsyncComponent,
-} from "vue"
+
+import type { VueShorthand } from "../PrismicRichText/types"
+import type { VueComponent } from "../types"
 
 /**
  * A map of Table block types to Vue Components. It is used to render table
@@ -20,15 +18,30 @@ import type {
  * @see Templating Table fields from Prismic {@link https://prismic.io/docs/table}
  */
 export type VueTableComponents = {
-	table?: VueComponent<{ table: TableField<"filled"> }>
-	thead?: VueComponent<{ head: TableFieldHead }>
-	tbody?: VueComponent<{ body: TableFieldBody }>
-	tr?: VueComponent<{ row: TableFieldBodyRow | TableFieldHeadRow }>
-	th?: VueComponent<{ cell: TableFieldHeaderCell }>
-	td?: VueComponent<{ cell: TableFieldDataCell }>
+	table?: VueComponent<{ table: TableField<"filled"> }> | VueShorthand
+	thead?: VueComponent<{ head: TableFieldHead }> | VueShorthand
+	tbody?: VueComponent<{ body: TableFieldBody }> | VueShorthand
+	tr?:
+		| VueComponent<{ row: TableFieldBodyRow | TableFieldHeadRow }>
+		| VueShorthand
+	th?: VueComponent<{ cell: TableFieldHeaderCell }> | VueShorthand
+	td?: VueComponent<{ cell: TableFieldDataCell }> | VueShorthand
 }
 
-type VueComponent<TProps> =
-	| ReturnType<typeof defineAsyncComponent>
-	| DefineComponent<TProps>
-	| FunctionalComponent<TProps>
+export type DefaultVueTableComponents = {
+	table: VueComponent<{ table: TableField<"filled">; as?: string }>
+	thead: VueComponent<{ head: TableFieldHead; as?: string }>
+	tbody: VueComponent<{ body: TableFieldBody; as?: string }>
+	tr: VueComponent<{ row: TableFieldBodyRow | TableFieldHeadRow; as?: string }>
+	th: VueComponent<{ cell: TableFieldHeaderCell; as?: string }>
+	td: VueComponent<{ cell: TableFieldDataCell; as?: string }>
+}
+
+export type InternalVueTableComponents = {
+	table: { is: VueTableComponents["table"]; shorthand?: VueShorthand }
+	thead: { is: VueTableComponents["thead"]; shorthand?: VueShorthand }
+	tbody: { is: VueTableComponents["tbody"]; shorthand?: VueShorthand }
+	tr: { is: VueTableComponents["tr"]; shorthand?: VueShorthand }
+	th: { is: VueTableComponents["th"]; shorthand?: VueShorthand }
+	td: { is: VueTableComponents["td"]; shorthand?: VueShorthand }
+}

package/src/PrismicText.vue

@@ -1,21 +1,16 @@
 <script lang="ts" setup>
 import type { RichTextField } from "@prismicio/client"
-import { asText, isFilled } from "@prismicio/client"
+import { asText } from "@prismicio/client"
 import { DEV } from "esm-env"
 import { watchEffect } from "vue"
 
-import Wrapper from "./lib/Wrapper.vue"
 import { devMsg } from "./lib/devMsg"
 
-import type { ComponentOrTagName } from "./types"
-
 /**
  * Props for `<PrismicText />`.
  */
 export type PrismicTextProps = {
-	/**
-	 * The Prismic rich text field to render.
-	 */
+	/** The Prismic rich text field to render. */
 	field: RichTextField | null | undefined
 
 	/**
@@ -30,14 +25,6 @@ export type PrismicTextProps = {
 	 * @defaultValue `" "` (a whitespace)
 	 */
 	separator?: string
-
-	/**
-	 * An HTML tag name or a component used to wrap the output. `<PrismicText />`
-	 * is not wrapped by default.
-	 *
-	 * @defaultValue `"template"` (no wrapper)
-	 */
-	wrapper?: ComponentOrTagName
 }
 
 const props = defineProps<PrismicTextProps>()
@@ -57,7 +44,5 @@ if (DEV) {
 </script>
 
 <template>
-	<Wrapper v-if="isFilled.richText(field) || fallback" :wrapper="wrapper">
-		{{ asText(field) || fallback }}
-	</Wrapper>
+	{{ asText(field) || fallback || "" }}
 </template>

package/src/SliceZone/SliceZone.vue

@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import { computed } from "vue"
 
-import Wrapper from "../lib/Wrapper.vue"
-
-import type { ComponentOrTagName } from "../types"
 import type {
 	SliceComponentType,
 	SliceLike,
@@ -11,8 +8,6 @@ import type {
 	SliceZoneLike,
 } from "./types"
 
-import { usePrismic } from "../usePrismic"
-
 import { TODOSliceComponent } from "./TODOSliceComponent"
 
 /**
@@ -21,48 +16,29 @@ import { TODOSliceComponent } from "./TODOSliceComponent"
  * @typeParam TContext - Arbitrary data made available to all Slice components
  */
 export type SliceZoneProps<TContext = unknown> = {
-	/**
-	 * List of Slice data from the Slice Zone.
-	 */
+	/** List of slice data from the slice zone. */
 	slices: SliceZoneLike<SliceLike | (SliceLike & Record<string, unknown>)>
 
-	/**
-	 * A record mapping Slice types to Vue components.
-	 */
+	/** A record mapping slice types to React components. */
 	components?: SliceZoneComponents
 
 	/**
 	 * The Vue component rendered if a component mapping from the `components`
 	 * prop cannot be found.
-	 *
-	 * @remarks
-	 * Components will be rendered using the {@link SliceComponentProps} interface.
-	 *
-	 * @defaultValue The Slice Zone default component provided to `@prismicio/vue` plugin if configured, otherwise `null` when `process.env.NODE_ENV === "production"` else {@link TODOSliceComponent}.
 	 */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	defaultComponent?: SliceComponentType<any, TContext>
 
-	/**
-	 * Arbitrary data made available to all Slice components.
-	 */
+	/** Arbitrary data made available to all slice components. */
 	context?: TContext
-
-	/**
-	 * An HTML tag name or a component used to wrap the output. `<SliceZone />` is
-	 * not wrapped by default.
-	 *
-	 * @defaultValue `"template"` (no wrapper)
-	 */
-	wrapper?: ComponentOrTagName
 }
 
 const props = defineProps<SliceZoneProps>()
 defineOptions({ name: "SliceZone" })
 
-const { options } = usePrismic()
-
 const renderedSlices = computed(() => {
+	if (!props.slices) return []
+
 	return props.slices.map((slice, index) => {
 		const type =
 			"slice_type" in slice ? (slice.slice_type as string) : slice.type
@@ -72,10 +48,7 @@ const renderedSlices = computed(() => {
 				? slice.id
 				: `${index}-${JSON.stringify(slice)}`
 
-		const is =
-			props.components?.[type] ||
-			props.defaultComponent ||
-			options.components?.sliceZoneDefaultComponent
+		const is = props.components?.[type] || props.defaultComponent
 
 		if (!is) {
 			return { is: TODOSliceComponent, key, props: { slice } }
@@ -102,12 +75,10 @@ const renderedSlices = computed(() => {
 </script>
 
 <template>
-	<Wrapper v-if="slices" :wrapper="wrapper">
-		<component
-			v-for="renderedSlice in renderedSlices"
-			:is="renderedSlice.is"
-			:key="renderedSlice.key"
-			v-bind="renderedSlice.props"
-		/>
-	</Wrapper>
+	<component
+		v-for="renderedSlice in renderedSlices"
+		:is="renderedSlice.is"
+		:key="renderedSlice.key"
+		v-bind="renderedSlice.props"
+	/>
 </template>

package/src/index.ts

@@ -1,29 +1,26 @@
 export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.vue"
-export { default as PrismicTable } from "./PrismicTable/PrismicTable.vue"
-export { default as SliceZone } from "./SliceZone/SliceZone.vue"
-
-export { default as PrismicEmbed } from "./PrismicEmbed.vue"
-export { default as PrismicImage } from "./PrismicImage.vue"
-export { default as PrismicLink } from "./PrismicLink.vue"
-export { default as PrismicText } from "./PrismicText.vue"
-
-export type { SliceZoneProps } from "./SliceZone/SliceZone.vue"
 export type { PrismicRichTextProps } from "./PrismicRichText/PrismicRichText.vue"
-export type { PrismicTableProps } from "./PrismicTable/PrismicTable.vue"
-
-export type { PrismicEmbedProps } from "./PrismicEmbed.vue"
-export type { PrismicImageProps } from "./PrismicImage.vue"
-export type { PrismicLinkProps } from "./PrismicLink.vue"
-export type { PrismicTextProps } from "./PrismicText.vue"
-
 export { getRichTextComponentProps } from "./PrismicRichText"
 export type {
 	VueRichTextSerializer,
 	RichTextComponentProps,
 } from "./PrismicRichText"
 
+export { default as PrismicTable } from "./PrismicTable/PrismicTable.vue"
+export type { PrismicTableProps } from "./PrismicTable/PrismicTable.vue"
 export { getTableComponentProps } from "./PrismicTable"
 
+export { default as PrismicImage } from "./PrismicImage.vue"
+export type { PrismicImageProps } from "./PrismicImage.vue"
+
+export { default as PrismicLink } from "./PrismicLink.vue"
+export type { PrismicLinkProps } from "./PrismicLink.vue"
+
+export { default as PrismicText } from "./PrismicText.vue"
+export type { PrismicTextProps } from "./PrismicText.vue"
+
+export { default as SliceZone } from "./SliceZone/SliceZone.vue"
+export type { SliceZoneProps } from "./SliceZone/SliceZone.vue"
 export {
 	TODOSliceComponent,
 	defineSliceZoneComponents,
@@ -38,8 +35,3 @@ export type {
 	SliceZoneComponents,
 	SliceZoneLike,
 } from "./SliceZone"
-
-export type { PrismicPluginOptions, PrismicPlugin } from "./types"
-
-export { createPrismic } from "./createPrismic"
-export { usePrismic, prismicKey } from "./usePrismic"