@prismicio/vue 5.3.0-pr.86.81afa1a → 5.3.0-pr.88.ee9acb6

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"
 
@@ -42,37 +43,63 @@ export type PrismicTableProps = {
 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>

package/src/PrismicTable/PrismicTableDefaultComponents.ts

@@ -1,18 +1,19 @@
 import { defineComponent, h } from "vue"
 import type { PropType } from "vue"
 
-import type { InternalVueTableComponents } from "./types"
+import type { DefaultVueTableComponents } from "./types"
 
 import * as getTableComponentProps from "./getTableComponentProps"
 
-export const defaultTableComponents: InternalVueTableComponents = {
+export const defaultTableComponents: DefaultVueTableComponents = {
 	table: defineComponent({
 		props: {
 			...getTableComponentProps.table(),
 			as: { type: String as PropType<string | undefined> },
 		},
 		setup(props, { attrs, slots }) {
-			return () => h(props.as ?? "table", attrs, slots.default ? slots.default() : [])
+			return () =>
+				h(props.as ?? "table", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	thead: defineComponent({
@@ -21,7 +22,8 @@ export const defaultTableComponents: InternalVueTableComponents = {
 			as: { type: String as PropType<string | undefined> },
 		},
 		setup(props, { attrs, slots }) {
-			return () => h(props.as ?? "thead", attrs, slots.default ? slots.default() : [])
+			return () =>
+				h(props.as ?? "thead", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	tbody: defineComponent({
@@ -30,7 +32,8 @@ export const defaultTableComponents: InternalVueTableComponents = {
 			as: { type: String as PropType<string | undefined> },
 		},
 		setup(props, { attrs, slots }) {
-			return () => h(props.as ?? "tbody", attrs, slots.default ? slots.default() : [])
+			return () =>
+				h(props.as ?? "tbody", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	tr: defineComponent({
@@ -39,7 +42,8 @@ export const defaultTableComponents: InternalVueTableComponents = {
 			as: { type: String as PropType<string | undefined> },
 		},
 		setup(props, { attrs, slots }) {
-			return () => h(props.as ?? "tr", attrs, slots.default ? slots.default() : [])
+			return () =>
+				h(props.as ?? "tr", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	th: defineComponent({
@@ -48,7 +52,8 @@ export const defaultTableComponents: InternalVueTableComponents = {
 			as: { type: String as PropType<string | undefined> },
 		},
 		setup(props, { attrs, slots }) {
-			return () => h(props.as ?? "th", attrs, slots.default ? slots.default() : [])
+			return () =>
+				h(props.as ?? "th", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	td: defineComponent({
@@ -57,7 +62,8 @@ export const defaultTableComponents: InternalVueTableComponents = {
 			as: { type: String as PropType<string | undefined> },
 		},
 		setup(props, { attrs, slots }) {
-			return () => h(props.as ?? "td", attrs, slots.default ? slots.default() : [])
+			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,12 +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
@@ -24,12 +21,14 @@ export type VueTableComponents = {
 	table?: VueComponent<{ table: TableField<"filled"> }> | VueShorthand
 	thead?: VueComponent<{ head: TableFieldHead }> | VueShorthand
 	tbody?: VueComponent<{ body: TableFieldBody }> | VueShorthand
-	tr?: VueComponent<{ row: TableFieldBodyRow | TableFieldHeadRow }> | VueShorthand
+	tr?:
+		| VueComponent<{ row: TableFieldBodyRow | TableFieldHeadRow }>
+		| VueShorthand
 	th?: VueComponent<{ cell: TableFieldHeaderCell }> | VueShorthand
 	td?: VueComponent<{ cell: TableFieldDataCell }> | VueShorthand
 }
 
-export type InternalVueTableComponents = {
+export type DefaultVueTableComponents = {
 	table: VueComponent<{ table: TableField<"filled">; as?: string }>
 	thead: VueComponent<{ head: TableFieldHead; as?: string }>
 	tbody: VueComponent<{ body: TableFieldBody; as?: string }>
@@ -38,7 +37,11 @@ export type InternalVueTableComponents = {
 	td: VueComponent<{ cell: TableFieldDataCell; as?: string }>
 }
 
-type VueComponent<TProps> =
-	| ReturnType<typeof defineAsyncComponent>
-	| DefineComponent<TProps>
-	| FunctionalComponent<TProps>
+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/types.ts

@@ -1,6 +1,36 @@
-import type { ConcreteComponent, DefineComponent, Raw } from "vue"
+import type {
+	ConcreteComponent,
+	DefineComponent,
+	FunctionalComponent,
+	Raw,
+	defineAsyncComponent,
+} from "vue"
 
 export type ComponentOrTagName =
 	| string
 	| ConcreteComponent
 	| Raw<DefineComponent>
+
+export type VueComponent<TProps> =
+	// For reference within TypeScript files when `*.vue` type cannot be inferred
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-explicit-any
+	| DefineComponent<{}, {}, any>
+	// Likewise, for reference with TypeScript files.
+	| ReturnType<typeof defineAsyncComponent>
+	| DefineComponent<TProps>
+	| FunctionalComponent<TProps>
+
+export const isVueComponent = <T>(
+	component: VueComponent<T> | unknown,
+): component is VueComponent<T> => {
+	return (
+		!!component &&
+		(typeof component === "function" ||
+			(typeof component === "object" &&
+				(("render" in component && typeof component.render === "function") ||
+					("setup" in component && typeof component.setup === "function") ||
+					("__file" in component && !!component.__file) ||
+					("__name" in component && !!component.__name) ||
+					("props" in component && typeof component.props === "object"))))
+	)
+}

package/src/lib/Wrapper.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import type { ComponentOrTagName } from "../types"
-
-defineProps<{
-	/**
-	 * An HTML tag name or a component used to wrap the output. Output is not
-	 * wrapped by default.
-	 *
-	 * @defaultValue `"template"` (no wrapper)
-	 */
-	wrapper?: ComponentOrTagName
-}>()
-</script>
-
-<template>
-	<component v-if="wrapper" :is="wrapper" v-bind="$attrs">
-		<slot />
-	</component>
-	<template v-else>
-		<slot />
-	</template>
-</template>