@prismicio/vue 5.3.0-pr.86.915aa0e → 5.3.0-pr.88.ee9acb6

package/src/PrismicRichText/PrismicRichText.vue

@@ -1,15 +1,21 @@
 <script lang="ts" setup>
-import {
-	type LinkResolverFunction,
-	type RichTextField,
+import type {
+	LinkResolverFunction,
+	RichTextField,
+	RichTextNodeType,
 } from "@prismicio/client"
 import { asTree } from "@prismicio/client/richtext"
 import type { PropType } from "vue"
 import { computed } from "vue"
 
-import type { ComponentOrTagName } from "../types"
-import type { VueRichTextSerializer } from "./types"
+import { type ComponentOrTagName, isVueComponent } from "../types"
+import type {
+	InternalVueRichTextComponent,
+	VueRichTextSerializer,
+	VueShorthand,
+} from "./types"
 
+import PrismicRichTextDefaultComponent from "./PrismicRichTextDefaultComponent.vue"
 import PrismicRichTextSerialize from "./PrismicRichTextSerialize.vue"
 
 /**
@@ -21,19 +27,6 @@ export type PrismicRichTextProps = {
 	 */
 	field: RichTextField | null | undefined
 
-	/**
-	 * An object that maps a rich text block type to a Vue component.
-	 *
-	 * @example
-	 *
-	 * ```javascript
-	 * {
-	 *   heading1: Heading1,
-	 * }
-	 * ```
-	 */
-	components?: VueRichTextSerializer
-
 	/**
 	 * A link resolver function used to resolve link when not using the route
 	 * resolver parameter with `@prismicio/client`.
@@ -45,18 +38,17 @@ export type PrismicRichTextProps = {
 	linkResolver?: LinkResolverFunction
 
 	/**
-	 * The Vue component rendered for links when the URL is internal.
+	 * An object that maps a rich text block type to a Vue component.
 	 *
-	 * @defaultValue `<RouterLink>`
-	 */
-	internalLinkComponent?: ComponentOrTagName
-
-	/**
-	 * The Vue component rendered for links when the URL is external.
+	 * @example
 	 *
-	 * @defaultValue `<a>`
+	 * ```javascript
+	 * {
+	 *   heading1: Heading1,
+	 * }
+	 * ```
 	 */
-	externalLinkComponent?: ComponentOrTagName
+	components?: VueRichTextSerializer
 
 	/**
 	 * The value to be rendered when the field is empty. If a fallback is not
@@ -71,21 +63,11 @@ const props = defineProps({
 	field: {
 		type: Array as unknown as PropType<PrismicRichTextProps["field"]>,
 	},
-	components: {
-		type: Object as PropType<PrismicRichTextProps["components"]>,
-	},
 	linkResolver: {
 		type: Function as PropType<PrismicRichTextProps["linkResolver"]>,
 	},
-	internalLinkComponent: {
-		type: [String, Object, Function] as PropType<
-			PrismicRichTextProps["internalLinkComponent"]
-		>,
-	},
-	externalLinkComponent: {
-		type: [String, Object, Function] as PropType<
-			PrismicRichTextProps["externalLinkComponent"]
-		>,
+	components: {
+		type: Object as PropType<PrismicRichTextProps["components"]>,
 	},
 	fallback: {
 		type: [String, Object, Function] as PropType<
@@ -98,16 +80,53 @@ defineOptions({ name: "PrismicRichText" })
 const children = computed(() => {
 	return asTree(props.field || []).children
 })
+
+function getInternalComponent(type: keyof typeof RichTextNodeType) {
+	const maybeComponentOrShorthand = props.components?.[type]
+
+	if (isVueComponent(maybeComponentOrShorthand)) {
+		return { is: maybeComponentOrShorthand }
+	}
+
+	return {
+		is: PrismicRichTextDefaultComponent,
+		props: {
+			linkResolver: props.linkResolver,
+			shorthand: maybeComponentOrShorthand as VueShorthand,
+		},
+	}
+}
+
+const internalComponents = computed<InternalVueRichTextComponent>(() => {
+	return {
+		heading1: getInternalComponent("heading1"),
+		heading2: getInternalComponent("heading2"),
+		heading3: getInternalComponent("heading3"),
+		heading4: getInternalComponent("heading4"),
+		heading5: getInternalComponent("heading5"),
+		heading6: getInternalComponent("heading6"),
+		paragraph: getInternalComponent("paragraph"),
+		preformatted: getInternalComponent("preformatted"),
+		strong: getInternalComponent("strong"),
+		em: getInternalComponent("em"),
+		"list-item": getInternalComponent("listItem"),
+		"o-list-item": getInternalComponent("oListItem"),
+		"group-list-item": getInternalComponent("list"),
+		"group-o-list-item": getInternalComponent("oList"),
+		image: getInternalComponent("image"),
+		embed: getInternalComponent("embed"),
+		hyperlink: getInternalComponent("hyperlink"),
+		label: getInternalComponent("label"),
+		span: getInternalComponent("span"),
+	}
+})
 </script>
 
 <template>
 	<PrismicRichTextSerialize
 		v-if="children.length"
 		:children="children"
-		:components="components"
-		:link-resolver="linkResolver"
-		:internal-link-component="internalLinkComponent"
-		:external-link-component="externalLinkComponent"
+		:internal-components="internalComponents"
 	/>
 	<component v-else-if="fallback" :is="fallback" />
 </template>

package/src/PrismicRichText/PrismicRichTextDefaultComponent.vue

@@ -2,7 +2,6 @@
 import type { LinkResolverFunction } from "@prismicio/client"
 import { computed } from "vue"
 
-import type { ComponentOrTagName } from "../types"
 import type { RichTextComponentProps, VueShorthand } from "./types"
 
 import PrismicImage from "../PrismicImage.vue"
@@ -11,19 +10,21 @@ import PrismicLink from "../PrismicLink.vue"
 const props = defineProps<
 	RichTextComponentProps & {
 		linkResolver?: LinkResolverFunction
-		internalLinkComponent?: ComponentOrTagName
-		externalLinkComponent?: ComponentOrTagName
 		shorthand?: VueShorthand
 	}
 >()
 defineOptions({ name: "PrismicRichTextDefaultComponent" })
 
 const as = computed(() => {
-	return props.node.type !== "image" && props.node.type !== "span" ? props.shorthand?.as : undefined
+	return props.node.type !== "image" && props.node.type !== "span"
+		? props.shorthand?.as
+		: undefined
 })
 
 const attrs = computed(() => {
-	return props.shorthand?.attrs ?? {}
+	const { as, ...attrs } = props.shorthand ?? {}
+
+	return attrs
 })
 
 const dir = computed(() => {
@@ -35,18 +36,36 @@ const dir = computed(() => {
 
 <template>
 	<component v-if="as" :is="as" :dir="dir" v-bind="attrs"><slot /></component>
-	<h1 v-else-if="node.type === 'heading1'" :dir="dir" v-bind="attrs"><slot /></h1>
-	<h2 v-else-if="node.type === 'heading2'" :dir="dir" v-bind="attrs"><slot /></h2>
-	<h3 v-else-if="node.type === 'heading3'" :dir="dir" v-bind="attrs"><slot /></h3>
-	<h4 v-else-if="node.type === 'heading4'" :dir="dir" v-bind="attrs"><slot /></h4>
-	<h5 v-else-if="node.type === 'heading5'" :dir="dir" v-bind="attrs"><slot /></h5>
-	<h6 v-else-if="node.type === 'heading6'" :dir="dir" v-bind="attrs"><slot /></h6>
-	<p v-else-if="node.type === 'paragraph'" :dir="dir" v-bind="attrs"><slot /></p>
+	<h1 v-else-if="node.type === 'heading1'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h1>
+	<h2 v-else-if="node.type === 'heading2'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h2>
+	<h3 v-else-if="node.type === 'heading3'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h3>
+	<h4 v-else-if="node.type === 'heading4'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h4>
+	<h5 v-else-if="node.type === 'heading5'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h5>
+	<h6 v-else-if="node.type === 'heading6'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h6>
+	<p v-else-if="node.type === 'paragraph'" :dir="dir" v-bind="attrs">
+		<slot />
+	</p>
 	<pre v-else-if="node.type === 'preformatted'" v-bind="attrs"><slot /></pre>
 	<strong v-else-if="node.type === 'strong'" v-bind="attrs"><slot /></strong>
 	<em v-else-if="node.type === 'em'" v-bind="attrs"><slot /></em>
-	<li v-else-if="node.type === 'list-item'" :dir="dir" v-bind="attrs"><slot /></li>
-	<li v-else-if="node.type === 'o-list-item'" :dir="dir" v-bind="attrs"><slot /></li>
+	<li v-else-if="node.type === 'list-item'" :dir="dir" v-bind="attrs">
+		<slot />
+	</li>
+	<li v-else-if="node.type === 'o-list-item'" :dir="dir" v-bind="attrs">
+		<slot />
+	</li>
 	<ul v-else-if="node.type === 'group-list-item'" v-bind="attrs">
 		<slot />
 	</ul>
@@ -54,11 +73,7 @@ const dir = computed(() => {
 		<slot />
 	</ol>
 	<p class="block-img" v-else-if="node.type === 'image'">
-		<PrismicLink
-			v-if="node.linkTo"
-			:field="node.linkTo"
-			:internal-component="internalLinkComponent"
-			:external-component="externalLinkComponent"
+		<PrismicLink v-if="node.linkTo" :field="node.linkTo"
 			><PrismicImage :field="node"
 		/></PrismicLink>
 		<PrismicImage v-else :field="node" v-bind="attrs" />
@@ -75,12 +90,13 @@ const dir = computed(() => {
 		v-else-if="node.type === 'hyperlink'"
 		:field="node.data"
 		:link-resolver="linkResolver"
-		:internal-component="internalLinkComponent"
-		:external-component="externalLinkComponent"
 		v-bind="attrs"
 		><slot
 	/></PrismicLink>
-	<span v-else-if="node.type === 'label'" :class="node.data.label" v-bind="attrs"
+	<span
+		v-else-if="node.type === 'label'"
+		:class="node.data.label"
+		v-bind="attrs"
 		><slot
 	/></span>
 	<template v-else v-for="(line, index) in node.text.split('\n')" :key="line"

package/src/PrismicRichText/PrismicRichTextSerialize.vue

@@ -1,73 +1,27 @@
 <script lang="ts" setup>
-import type { LinkResolverFunction } from "@prismicio/client"
 import type { asTree } from "@prismicio/client/richtext"
 
-import type { ComponentOrTagName } from "../types"
-import type { VueRichTextSerializer, VueShorthand } from "./types"
-
-import PrismicRichTextDefaultComponent from "./PrismicRichTextDefaultComponent.vue"
-
-const CHILD_TYPE_RENAMES = {
-	"list-item": "listItem",
-	"o-list-item": "oListItem",
-	"group-list-item": "list",
-	"group-o-list-item": "oList",
-} as const
+import type { InternalVueRichTextComponent } from "./types"
 
 type PrismicRichTextSerializeProps = {
-	components?: VueRichTextSerializer
 	children: ReturnType<typeof asTree>["children"]
-	linkResolver?: LinkResolverFunction
-	internalLinkComponent?: ComponentOrTagName
-	externalLinkComponent?: ComponentOrTagName
+	internalComponents: InternalVueRichTextComponent
 }
 
 const props = defineProps<PrismicRichTextSerializeProps>()
 defineOptions({ name: "PrismicRichTextSerialize" })
-
-function getComponent(child: ReturnType<typeof asTree>["children"][number]) {
-	const maybeComponentOrShorthand =
-		props.components?.[
-			CHILD_TYPE_RENAMES[child.type as keyof typeof CHILD_TYPE_RENAMES] ||
-				(child.type as keyof typeof props.components)
-		]
-
-	if (
-		typeof maybeComponentOrShorthand === "function" ||
-		(typeof maybeComponentOrShorthand === "object" &&
-			(typeof maybeComponentOrShorthand.render === "function" ||
-				typeof maybeComponentOrShorthand.setup === "function" ||
-				!!maybeComponentOrShorthand.__file ||
-				!!maybeComponentOrShorthand.__name) || typeof maybeComponentOrShorthand?.props === "object")
-	) {
-		return { is: maybeComponentOrShorthand }
-	}
-
-	return {
-		is: PrismicRichTextDefaultComponent,
-		props: {
-			linkResolver: props.linkResolver,
-			internalLinkComponent: props.internalLinkComponent,
-			externalLinkComponent: props.externalLinkComponent,
-			shorthand: maybeComponentOrShorthand,
-		},
-	}
-}
 </script>
 
 <template>
 	<component
 		v-for="child in props.children"
 		:key="JSON.stringify(child)"
-		:is="getComponent(child).is"
+		:is="internalComponents[child.type].is"
 		:node="child.node"
-		v-bind="getComponent(child).props"
+		v-bind="internalComponents[child.type].props"
 		><PrismicRichTextSerialize
 			v-if="child.children.length"
 			:children="child.children"
-			:components="components"
-			:link-resolver="linkResolver"
-			:internal-link-component="internalLinkComponent"
-			:external-link-component="externalLinkComponent"
+			:internal-components="internalComponents"
 	/></component>
 </template>

package/src/PrismicRichText/types.ts

@@ -1,9 +1,10 @@
-import type { RTAnyNode, RichTextNodeType } from "@prismicio/client"
 import type {
-	DefineComponent,
-	FunctionalComponent,
-	defineAsyncComponent,
-} from "vue"
+	LinkResolverFunction,
+	RTAnyNode,
+	RichTextNodeType,
+} from "@prismicio/client"
+
+import type { VueComponent } from "../types"
 
 /**
  * A map of Rich Text block types to Vue Components. It is used to render Rich
@@ -27,14 +28,9 @@ export type RichTextComponentProps<TRTNode extends RTAnyNode = RTAnyNode> = {
  *
  * @typeParam TRTNode - The type of rich text node(s) this component handles
  */
-type VueRichTextComponent<TRTNode extends RTAnyNode = RTAnyNode> =
-	// 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<RichTextComponentProps<TRTNode>>
-	| FunctionalComponent<RichTextComponentProps<TRTNode>>
+type VueRichTextComponent<TRTNode extends RTAnyNode = RTAnyNode> = VueComponent<
+	RichTextComponentProps<TRTNode>
+>
 
 /**
  * A shorthand definition for {@link VueRichTextSerializer} component types.
@@ -50,3 +46,11 @@ export type VueShorthand = {
 	 */
 	[Attribute: string]: string | boolean | null | undefined
 }
+
+export type InternalVueRichTextComponent = Record<
+	(typeof RichTextNodeType)[keyof typeof RichTextNodeType],
+	{
+		is: VueRichTextComponent
+		props?: { linkResolver?: LinkResolverFunction; shorthand?: VueShorthand }
+	}
+>

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 }
+}