@prismicio/vue 5.2.0 → 5.3.0-canary.4c3e4ab

package/src/PrismicTable/PrismicTable.vue

@@ -2,8 +2,9 @@
 import { type TableField, isFilled } from "@prismicio/client"
 import { computed } from "vue"
 
-import type { ComponentOrTagName } from "../types"
-import type { VueTableComponents } from "./types"
+import type { VueShorthand } from "../PrismicRichText/types"
+import { type ComponentOrTagName, isVueComponent } from "../types"
+import type { InternalVueTableComponents, VueTableComponents } from "./types"
 
 import type { VueRichTextSerializer } from "../PrismicRichText"
 
@@ -20,61 +21,90 @@ export type PrismicTableProps = {
 	field: TableField | undefined
 
 	/**
-	 * The value to be rendered when the field is empty. If a fallback is not
-	 * given, `null` (nothing) will be rendered.
-	 */
-	fallback?: ComponentOrTagName
-
-	/**
-	 * An object that maps a table block type to a Vue component.
+	 * An object that maps a table block type to a Vue component or a shorthand
+	 * definition.
 	 *
 	 * @example
 	 *
 	 * ```javascript
 	 * {
 	 *   table: Table,
+	 *   thead: { class: 'bg-black text-white' },
+	 *   th: { as: 'td', class: 'font-bold' },
 	 * }
 	 * ```
 	 */
 	components?: VueTableComponents & VueRichTextSerializer
+
+	/**
+	 * The value to be rendered when the field is empty. If a fallback is not
+	 * given, `null` (nothing) will be rendered.
+	 */
+	fallback?: ComponentOrTagName
 }
 
 const props = defineProps<PrismicTableProps>()
 defineOptions({ name: "PrismicTable" })
 
-const mergedComponents = computed(() => ({
-	...defaultTableComponents,
-	...props.components,
-}))
+function getInternalComponent(type: keyof VueTableComponents) {
+	const maybeComponentOrShorthand = props.components?.[type]
+
+	if (isVueComponent(maybeComponentOrShorthand)) {
+		return { is: maybeComponentOrShorthand }
+	}
+
+	return {
+		is: defaultTableComponents[type],
+		shorthand: maybeComponentOrShorthand as VueShorthand,
+	}
+}
+
+const tableComponents = computed<InternalVueTableComponents>(() => {
+	return {
+		table: getInternalComponent("table"),
+		thead: getInternalComponent("thead"),
+		tbody: getInternalComponent("tbody"),
+		tr: getInternalComponent("tr"),
+		th: getInternalComponent("th"),
+		td: getInternalComponent("td"),
+	}
+})
 </script>
 
 <template>
 	<component
 		v-if="isFilled.table(field)"
-		:is="mergedComponents.table"
+		:is="tableComponents.table.is"
 		:table="field"
-		v-bind="$attrs"
+		v-bind="{ ...$attrs, ...tableComponents.table.shorthand }"
 	>
 		<component
 			v-if="field.head"
-			:is="mergedComponents.thead"
+			:is="tableComponents.thead.is"
 			:head="field.head"
+			v-bind="tableComponents.thead.shorthand"
 		>
 			<PrismicTableRow
 				v-for="row in field.head.rows"
 				:key="row.key"
 				:row="row"
-				:components="mergedComponents"
+				:internalTableComponents="tableComponents"
+				:components="components"
 			/>
 		</component>
-		<component :is="mergedComponents.tbody" :body="field.body">
+		<component
+			:is="tableComponents.tbody.is"
+			:body="field.body"
+			v-bind="tableComponents.tbody.shorthand"
+		>
 			<PrismicTableRow
 				v-for="row in field.body.rows"
 				:key="row.key"
 				:row="row"
-				:components="mergedComponents"
+				:internalTableComponents="tableComponents"
+				:components="components"
 			/>
 		</component>
 	</component>
-	<component v-else :is="fallback" />
+	<component v-else-if="fallback" :is="fallback" v-bind="$attrs" />
 </template>

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,14 +1,11 @@
 <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 />`.
  */
@@ -30,14 +27,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 +46,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"
 
 /**
@@ -22,47 +17,34 @@ import { TODOSliceComponent } from "./TODOSliceComponent"
  */
 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 +54,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 +81,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/SliceZone/TODOSliceComponent.ts

@@ -1,6 +1,6 @@
 import { DEV } from "esm-env"
-import type { PropType } from "vue"
 import { computed, defineComponent, h, watchEffect } from "vue"
+import type { PropType } from "vue"
 
 import type { SliceComponentType, SliceLike } from "./types"
 
@@ -11,6 +11,7 @@ import type { SliceComponentType, SliceLike } from "./types"
  * This is also the default Vue component rendered when a component mapping
  * cannot be found in `<SliceZone />`.
  */
+// oxlint-disable-next-line explicit-module-boundary-types
 export const TODOSliceComponent = DEV
 	? /*#__PURE__*/ (defineComponent({
 			name: "TODOSliceComponent",

package/src/index.ts

@@ -1,39 +1,26 @@
-import PrismicRichText from "./PrismicRichText/PrismicRichText.vue"
-import PrismicTable from "./PrismicTable/PrismicTable.vue"
-import SliceZone from "./SliceZone/SliceZone.vue"
-
-import PrismicEmbed from "./PrismicEmbed.vue"
-import PrismicImage from "./PrismicImage.vue"
-import PrismicLink from "./PrismicLink.vue"
-import PrismicText from "./PrismicText.vue"
-
-export type { SliceZoneProps } from "./SliceZone/SliceZone.vue"
+export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.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 {
-	SliceZone,
-	PrismicEmbed,
-	PrismicImage,
-	PrismicLink,
-	PrismicTable,
-	PrismicText,
-	PrismicRichText,
-}
-
 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,
@@ -48,8 +35,3 @@ export type {
 	SliceZoneComponents,
 	SliceZoneLike,
 } from "./SliceZone"
-
-export type { PrismicPluginOptions, PrismicPlugin } from "./types"
-
-export { createPrismic } from "./createPrismic"
-export { usePrismic, prismicKey } from "./usePrismic"