@prismicio/vue 5.3.0-canary.4c3e4ab → 5.3.0-canary.553482e

package/dist/src/types.d.ts

@@ -3,6 +3,16 @@ import { ConcreteComponent, DefineComponent, FunctionalComponent, Raw, defineAsy
 //#region src/types.d.ts
 type ComponentOrTagName = string | ConcreteComponent | Raw<DefineComponent>;
 type VueComponent<TProps> = DefineComponent<{}, {}, any> | ReturnType<typeof defineAsyncComponent> | DefineComponent<TProps> | FunctionalComponent<TProps>;
+/**
+ * A shorthand definition for `<PrismicRichText />` and `<PrismicTable />`
+ * component types.
+ */
+type VueComponentShorthand = {
+  /** The HTML element type rendered for this node type. */
+  as?: string;
+  /** Other attributes to apply to the element type. */
+  [Attribute: string]: string | boolean | null | undefined;
+};
 //#endregion
-export { ComponentOrTagName, VueComponent };
+export { ComponentOrTagName, VueComponent, VueComponentShorthand };
 //# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/types.ts"],"sourcesContent":[],"mappings":";;;KAQY,kBAAA,YAET,oBACA,IAAI;KAEK,uBAGT,+BAEA,kBAAkB,wBAClB,gBAAgB,UAChB,oBAAoB"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/types.ts"],"sourcesContent":[],"mappings":";;;KAQY,kBAAA,YAET,oBACA,IAAI;KAEK,uBAGT,+BAEA,kBAAkB,wBAClB,gBAAgB,UAChB,oBAAoB;AAZvB;;;;AAGM,KAeM,qBAAA,GAfN;EAEM;EAGT,EAAA,CAAA,EAAA,MAAA;EAEkB;EAAlB,CAAA,SAAA,EAAA,MAAA,CAAA,EAAA,MAAA,GAAA,OAAA,GAAA,IAAA,GAAA,SAAA;CACgB"}

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n\tConcreteComponent,\n\tDefineComponent,\n\tFunctionalComponent,\n\tRaw,\n\tdefineAsyncComponent,\n} from \"vue\"\n\nexport type ComponentOrTagName =\n\t| string\n\t| ConcreteComponent\n\t| Raw<DefineComponent>\n\nexport type VueComponent<TProps> =\n\t// For reference within TypeScript files when `*.vue` type cannot be inferred\n\t// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-explicit-any\n\t| DefineComponent<{}, {}, any>\n\t// Likewise, for reference with TypeScript files.\n\t| ReturnType<typeof defineAsyncComponent>\n\t| DefineComponent<TProps>\n\t| FunctionalComponent<TProps>\n\nexport const isVueComponent = <T>(\n\tcomponent: VueComponent<T> | unknown,\n): component is VueComponent<T> => {\n\treturn (\n\t\t!!component &&\n\t\t(typeof component === \"function\" ||\n\t\t\t(typeof component === \"object\" &&\n\t\t\t\t((\"render\" in component && typeof component.render === \"function\") ||\n\t\t\t\t\t(\"setup\" in component && typeof component.setup === \"function\") ||\n\t\t\t\t\t(\"__file\" in component && !!component.__file) ||\n\t\t\t\t\t(\"__name\" in component && !!component.__name) ||\n\t\t\t\t\t(\"props\" in component && typeof component.props === \"object\"))))\n\t)\n}\n"],"mappings":";AAsBA,MAAa,kBACZ,cACkC;AAClC,QACC,CAAC,CAAC,cACD,OAAO,cAAc,cACpB,OAAO,cAAc,aACnB,YAAY,aAAa,OAAO,UAAU,WAAW,cACrD,WAAW,aAAa,OAAO,UAAU,UAAU,cACnD,YAAY,aAAa,CAAC,CAAC,UAAU,UACrC,YAAY,aAAa,CAAC,CAAC,UAAU,UACrC,WAAW,aAAa,OAAO,UAAU,UAAU"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n\tConcreteComponent,\n\tDefineComponent,\n\tFunctionalComponent,\n\tRaw,\n\tdefineAsyncComponent,\n} from \"vue\"\n\nexport type ComponentOrTagName =\n\t| string\n\t| ConcreteComponent\n\t| Raw<DefineComponent>\n\nexport type VueComponent<TProps> =\n\t// For reference within TypeScript files when `*.vue` type cannot be inferred\n\t// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-explicit-any\n\t| DefineComponent<{}, {}, any>\n\t// Likewise, for reference with TypeScript files.\n\t| ReturnType<typeof defineAsyncComponent>\n\t| DefineComponent<TProps>\n\t| FunctionalComponent<TProps>\n\n/**\n * A shorthand definition for `<PrismicRichText />` and `<PrismicTable />`\n * component types.\n */\nexport type VueComponentShorthand = {\n\t/** The HTML element type rendered for this node type. */\n\tas?: string\n\n\t/** Other attributes to apply to the element type. */\n\t[Attribute: string]: string | boolean | null | undefined\n}\n\nexport const isVueComponent = <T>(\n\tcomponent: VueComponent<T> | VueComponentShorthand | undefined,\n): component is VueComponent<T> => {\n\treturn (\n\t\t!!component &&\n\t\t(typeof component === \"function\" ||\n\t\t\t(typeof component === \"object\" &&\n\t\t\t\t((\"render\" in component && typeof component.render === \"function\") ||\n\t\t\t\t\t(\"setup\" in component && typeof component.setup === \"function\") ||\n\t\t\t\t\t(\"__file\" in component && !!component.__file) ||\n\t\t\t\t\t(\"__name\" in component && !!component.__name) ||\n\t\t\t\t\t(\"props\" in component && typeof component.props === \"object\"))))\n\t)\n}\n"],"mappings":";AAkCA,MAAa,kBACZ,cACkC;AAClC,QACC,CAAC,CAAC,cACD,OAAO,cAAc,cACpB,OAAO,cAAc,aACnB,YAAY,aAAa,OAAO,UAAU,WAAW,cACrD,WAAW,aAAa,OAAO,UAAU,UAAU,cACnD,YAAY,aAAa,CAAC,CAAC,UAAU,UACrC,YAAY,aAAa,CAAC,CAAC,UAAU,UACrC,WAAW,aAAa,OAAO,UAAU,UAAU"}

package/dist/types.d.cts

@@ -3,6 +3,16 @@ import { ConcreteComponent, DefineComponent, FunctionalComponent, Raw, defineAsy
 //#region src/types.d.ts
 type ComponentOrTagName = string | ConcreteComponent | Raw<DefineComponent>;
 type VueComponent<TProps> = DefineComponent<{}, {}, any> | ReturnType<typeof defineAsyncComponent> | DefineComponent<TProps> | FunctionalComponent<TProps>;
+/**
+ * A shorthand definition for `<PrismicRichText />` and `<PrismicTable />`
+ * component types.
+ */
+type VueComponentShorthand = {
+  /** The HTML element type rendered for this node type. */
+  as?: string;
+  /** Other attributes to apply to the element type. */
+  [Attribute: string]: string | boolean | null | undefined;
+};
 //#endregion
-export { ComponentOrTagName, VueComponent };
+export { ComponentOrTagName, VueComponent, VueComponentShorthand };
 //# sourceMappingURL=types.d.cts.map

package/dist/types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.cts","names":[],"sources":["../src/types.ts"],"sourcesContent":[],"mappings":";;;KAQY,kBAAA,YAET,oBACA,IAAI;KAEK,uBAGT,+BAEA,kBAAkB,wBAClB,gBAAgB,UAChB,oBAAoB"}
+{"version":3,"file":"types.d.cts","names":[],"sources":["../src/types.ts"],"sourcesContent":[],"mappings":";;;KAQY,kBAAA,YAET,oBACA,IAAI;KAEK,uBAGT,+BAEA,kBAAkB,wBAClB,gBAAgB,UAChB,oBAAoB;AAZvB;;;;AAGM,KAeM,qBAAA,GAfN;EAEM;EAGT,EAAA,CAAA,EAAA,MAAA;EAEkB;EAAlB,CAAA,SAAA,EAAA,MAAA,CAAA,EAAA,MAAA,GAAA,OAAA,GAAA,IAAA,GAAA,SAAA;CACgB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/vue",
-	"version": "5.3.0-canary.4c3e4ab",
+	"version": "5.3.0-canary.553482e",
 	"description": "Vue plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -34,8 +34,6 @@
 		"build": "tsdown",
 		"dev": "tsdown --watch",
 		"format": "prettier --write .",
-		"playground:build": "vite build playground",
-		"playground:dev": "vite playground",
 		"prepare": "npm run build",
 		"lint": "oxlint --deny-warnings",
 		"types": "vue-tsc --noEmit",

package/src/PrismicImage.vue

@@ -10,13 +10,9 @@ import { computed, watchEffect } from "vue"
 
 import { devMsg } from "./lib/devMsg"
 
-/**
- * Props for `<PrismicImage />`.
- */
+/** Props for `<PrismicImage />`. */
 export type PrismicImageProps = {
-	/**
-	 * The Prismic image field or thumbnail to render.
-	 */
+	/** The Prismic image field or thumbnail to render. */
 	field: ImageField | ImageField<string>
 
 	/**

package/src/PrismicLink.vue

@@ -12,24 +12,16 @@ import { isInternalURL } from "./lib/isInternalURL"
 
 import type { ComponentOrTagName } from "./types"
 
-/**
- * The default component rendered for internal URLs.
- */
+/** The default component rendered for internal URLs. */
 const defaultInternalComponent = "router-link"
 
-/**
- * The default component rendered for external URLs.
- */
+/** The default component rendered for external URLs. */
 const defaultExternalComponent = "a"
 
-/**
- * The default rel attribute rendered for external URLs.
- */
+/** The default rel attribute rendered for external URLs. */
 const defaultExternalRelAttribute = "noreferrer"
 
-/**
- * Props for `<PrismicLink />`.
- */
+/** Props for `<PrismicLink />`. */
 export type PrismicLinkProps = {
 	/**
 	 * The link resolver used to resolve links.
@@ -67,16 +59,12 @@ export type PrismicLinkProps = {
 	externalComponent?: ComponentOrTagName
 } & (
 	| {
-			/**
-			 * The Prismic link field to render.
-			 */
+			/** The Prismic link field to render. */
 			field: LinkField
 			document?: never
 	  }
 	| {
-			/**
-			 * The Prismic document to render as a link.
-			 */
+			/** The Prismic document to render as a link. */
 			document: PrismicDocument
 			field?: never
 	  }

package/src/PrismicRichText/PrismicRichText.vue

@@ -8,23 +8,20 @@ import { asTree } from "@prismicio/client/richtext"
 import type { PropType } from "vue"
 import { computed } from "vue"
 
-import { type ComponentOrTagName, isVueComponent } from "../types"
+import type { ComponentOrTagName, VueComponentShorthand } from "../types"
+import { isVueComponent } from "../types"
 import type {
-	InternalVueRichTextComponent,
+	InternalVueRichTextComponents,
+	VueRichTextComponent,
 	VueRichTextSerializer,
-	VueShorthand,
 } from "./types"
 
 import PrismicRichTextDefaultComponent from "./PrismicRichTextDefaultComponent.vue"
 import PrismicRichTextSerialize from "./PrismicRichTextSerialize.vue"
 
-/**
- * Props for `<PrismicRichText />`.
- */
+/** Props for `<PrismicRichText />`. */
 export type PrismicRichTextProps = {
-	/**
-	 * The Prismic rich text field to render.
-	 */
+	/** The Prismic rich text field to render. */
 	field: RichTextField | null | undefined
 
 	/**
@@ -86,7 +83,10 @@ const children = computed(() => {
 })
 
 function getInternalComponent(type: keyof typeof RichTextNodeType) {
-	const maybeComponentOrShorthand = props.components?.[type]
+	const maybeComponentOrShorthand = props.components?.[type] as
+		| VueRichTextComponent
+		| VueComponentShorthand
+		| undefined
 
 	if (isVueComponent(maybeComponentOrShorthand)) {
 		return { is: maybeComponentOrShorthand }
@@ -94,14 +94,12 @@ function getInternalComponent(type: keyof typeof RichTextNodeType) {
 
 	return {
 		is: PrismicRichTextDefaultComponent,
-		props: {
-			linkResolver: props.linkResolver,
-			shorthand: maybeComponentOrShorthand as VueShorthand,
-		},
+		linkResolver: props.linkResolver,
+		shorthand: maybeComponentOrShorthand,
 	}
 }
 
-const internalComponents = computed<InternalVueRichTextComponent>(() => {
+const internalComponents = computed<InternalVueRichTextComponents>(() => {
 	return {
 		heading1: getInternalComponent("heading1"),
 		heading2: getInternalComponent("heading2"),

package/src/PrismicRichText/PrismicRichTextDefaultComponent.vue

@@ -2,7 +2,8 @@
 import type { LinkResolverFunction } from "@prismicio/client"
 import { computed } from "vue"
 
-import type { RichTextComponentProps, VueShorthand } from "./types"
+import type { VueComponentShorthand } from "../types"
+import type { RichTextComponentProps } from "./types"
 
 import PrismicImage from "../PrismicImage.vue"
 import PrismicLink from "../PrismicLink.vue"
@@ -10,13 +11,16 @@ import PrismicLink from "../PrismicLink.vue"
 const props = defineProps<
 	RichTextComponentProps & {
 		linkResolver?: LinkResolverFunction
-		shorthand?: VueShorthand
+		shorthand?: VueComponentShorthand
 	}
 >()
 defineOptions({ name: "PrismicRichTextDefaultComponent" })
 
 const as = computed(() => {
-	return props.node.type !== "image" && props.node.type !== "span"
+	return props.node.type !== "image" &&
+		props.node.type !== "hyperlink" &&
+		props.node.type !== "label" &&
+		props.node.type !== "span"
 		? props.shorthand?.as
 		: undefined
 })
@@ -74,7 +78,7 @@ const dir = computed(() => {
 	</ol>
 	<p class="block-img" v-else-if="node.type === 'image'">
 		<PrismicLink v-if="node.linkTo" :field="node.linkTo"
-			><PrismicImage :field="node"
+			><PrismicImage :field="node" v-bind="attrs"
 		/></PrismicLink>
 		<PrismicImage v-else :field="node" v-bind="attrs" />
 	</p>

package/src/PrismicRichText/PrismicRichTextSerialize.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import type { asTree } from "@prismicio/client/richtext"
 
-import type { InternalVueRichTextComponent } from "./types"
+import type { InternalVueRichTextComponents } from "./types"
 
 type PrismicRichTextSerializeProps = {
 	children: ReturnType<typeof asTree>["children"]
-	internalComponents: InternalVueRichTextComponent
+	internalComponents: InternalVueRichTextComponents
 }
 
 const props = defineProps<PrismicRichTextSerializeProps>()
@@ -18,7 +18,8 @@ defineOptions({ name: "PrismicRichTextSerialize" })
 		:key="JSON.stringify(child)"
 		:is="internalComponents[child.type].is"
 		:node="child.node"
-		v-bind="internalComponents[child.type].props"
+		:link-resolver="internalComponents[child.type].linkResolver"
+		:shorthand="internalComponents[child.type].shorthand"
 		><PrismicRichTextSerialize
 			v-if="child.children.length"
 			:children="child.children"

package/src/PrismicRichText/types.ts

@@ -1,10 +1,29 @@
 import type {
 	LinkResolverFunction,
 	RTAnyNode,
-	RichTextNodeType,
+	RTEmNode,
+	RTEmbedNode,
+	RTHeading1Node,
+	RTHeading2Node,
+	RTHeading3Node,
+	RTHeading4Node,
+	RTHeading5Node,
+	RTHeading6Node,
+	RTImageNode,
+	RTLabelNode,
+	RTLinkNode,
+	RTListItemNode,
+	RTListNode,
+	RTOListItemNode,
+	RTOListNode,
+	RTParagraphNode,
+	RTPreformattedNode,
+	RTSpanNode,
+	RTStrongNode,
+	RichTextNodeTypes,
 } from "@prismicio/client"
 
-import type { VueComponent } from "../types"
+import type { VueComponent, VueComponentShorthand } from "../types"
 
 /**
  * A map of Rich Text block types to Vue Components. It is used to render Rich
@@ -12,13 +31,37 @@ import type { VueComponent } from "../types"
  *
  * @see Templating Rich Text and title fields from Prismic {@link https://prismic.io/docs/rich-text}
  */
-export type VueRichTextSerializer = Partial<
-	Record<keyof typeof RichTextNodeType, VueRichTextComponent | VueShorthand>
->
+export type VueRichTextSerializer = {
+	heading1?: RichTextComponentProps<RTHeading1Node> | VueComponentShorthand
+	heading2?: RichTextComponentProps<RTHeading2Node> | VueComponentShorthand
+	heading3?: RichTextComponentProps<RTHeading3Node> | VueComponentShorthand
+	heading4?: RichTextComponentProps<RTHeading4Node> | VueComponentShorthand
+	heading5?: RichTextComponentProps<RTHeading5Node> | VueComponentShorthand
+	heading6?: RichTextComponentProps<RTHeading6Node> | VueComponentShorthand
+	paragraph?: RichTextComponentProps<RTParagraphNode> | VueComponentShorthand
+	preformatted?:
+		| RichTextComponentProps<RTPreformattedNode>
+		| VueComponentShorthand
+	strong?: RichTextComponentProps<RTStrongNode> | VueComponentShorthand
+	em?: RichTextComponentProps<RTEmNode> | VueComponentShorthand
+	listItem?: RichTextComponentProps<RTListItemNode> | VueComponentShorthand
+	oListItem?: RichTextComponentProps<RTOListItemNode> | VueComponentShorthand
+	list?: RichTextComponentProps<RTListNode> | VueComponentShorthand
+	oList?: RichTextComponentProps<RTOListNode> | VueComponentShorthand
+	image?:
+		| RichTextComponentProps<RTImageNode>
+		| Omit<VueComponentShorthand, "as">
+	embed?: RichTextComponentProps<RTEmbedNode> | VueComponentShorthand
+	hyperlink?:
+		| RichTextComponentProps<RTLinkNode>
+		| Omit<VueComponentShorthand, "as">
+	label?:
+		| RichTextComponentProps<RTLabelNode>
+		| Omit<VueComponentShorthand, "as">
+	span?: RichTextComponentProps<RTSpanNode>
+}
 
-/**
- * Props for a component rendering nodes from a Prismic rich text field.
- */
+/** Props for a component rendering nodes from a Prismic rich text field. */
 export type RichTextComponentProps<TRTNode extends RTAnyNode = RTAnyNode> = {
 	node: TRTNode
 }
@@ -28,29 +71,14 @@ 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> = VueComponent<
-	RichTextComponentProps<TRTNode>
->
-
-/**
- * A shorthand definition for {@link VueRichTextSerializer} component types.
- */
-export type VueShorthand = {
-	/**
-	 * The HTML element type rendered for this node type.
-	 */
-	as?: string
-
-	/**
-	 * Other attributes to apply to the element type.
-	 */
-	[Attribute: string]: string | boolean | null | undefined
-}
+export type VueRichTextComponent<TRTNode extends RTAnyNode = RTAnyNode> =
+	VueComponent<RichTextComponentProps<TRTNode>>
 
-export type InternalVueRichTextComponent = Record<
-	(typeof RichTextNodeType)[keyof typeof RichTextNodeType],
+export type InternalVueRichTextComponents = Record<
+	RichTextNodeTypes,
 	{
 		is: VueRichTextComponent
-		props?: { linkResolver?: LinkResolverFunction; shorthand?: VueShorthand }
+		linkResolver?: LinkResolverFunction
+		shorthand?: VueComponentShorthand
 	}
 >

package/src/PrismicTable/PrismicTable.vue

@@ -2,8 +2,8 @@
 import { type TableField, isFilled } from "@prismicio/client"
 import { computed } from "vue"
 
-import type { VueShorthand } from "../PrismicRichText/types"
-import { type ComponentOrTagName, isVueComponent } from "../types"
+import type { ComponentOrTagName, VueComponentShorthand } from "../types"
+import { isVueComponent } from "../types"
 import type { InternalVueTableComponents, VueTableComponents } from "./types"
 
 import type { VueRichTextSerializer } from "../PrismicRichText"
@@ -11,13 +11,9 @@ import type { VueRichTextSerializer } from "../PrismicRichText"
 import { defaultTableComponents } from "./PrismicTableDefaultComponents"
 import PrismicTableRow from "./PrismicTableRow.vue"
 
-/**
- * Props for `<PrismicTable />`.
- */
+/** Props for `<PrismicTable />`. */
 export type PrismicTableProps = {
-	/**
-	 * The Prismic table field to render.
-	 */
+	/** The Prismic table field to render. */
 	field: TableField | undefined
 
 	/**
@@ -55,11 +51,11 @@ function getInternalComponent(type: keyof VueTableComponents) {
 
 	return {
 		is: defaultTableComponents[type],
-		shorthand: maybeComponentOrShorthand as VueShorthand,
+		shorthand: maybeComponentOrShorthand as VueComponentShorthand,
 	}
 }
 
-const tableComponents = computed<InternalVueTableComponents>(() => {
+const internalTableComponents = computed<InternalVueTableComponents>(() => {
 	return {
 		table: getInternalComponent("table"),
 		thead: getInternalComponent("thead"),
@@ -74,34 +70,34 @@ const tableComponents = computed<InternalVueTableComponents>(() => {
 <template>
 	<component
 		v-if="isFilled.table(field)"
-		:is="tableComponents.table.is"
+		:is="internalTableComponents.table.is"
 		:table="field"
-		v-bind="{ ...$attrs, ...tableComponents.table.shorthand }"
+		v-bind="{ ...$attrs, ...internalTableComponents.table.shorthand }"
 	>
 		<component
 			v-if="field.head"
-			:is="tableComponents.thead.is"
+			:is="internalTableComponents.thead.is"
 			:head="field.head"
-			v-bind="tableComponents.thead.shorthand"
+			v-bind="internalTableComponents.thead.shorthand"
 		>
 			<PrismicTableRow
 				v-for="row in field.head.rows"
 				:key="row.key"
 				:row="row"
-				:internalTableComponents="tableComponents"
+				:internalTableComponents="internalTableComponents"
 				:components="components"
 			/>
 		</component>
 		<component
-			:is="tableComponents.tbody.is"
+			:is="internalTableComponents.tbody.is"
 			:body="field.body"
-			v-bind="tableComponents.tbody.shorthand"
+			v-bind="internalTableComponents.tbody.shorthand"
 		>
 			<PrismicTableRow
 				v-for="row in field.body.rows"
 				:key="row.key"
 				:row="row"
-				:internalTableComponents="tableComponents"
+				:internalTableComponents="internalTableComponents"
 				:components="components"
 			/>
 		</component>

package/src/PrismicTable/PrismicTableDefaultComponents.ts

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

package/src/PrismicTable/types.ts

@@ -8,8 +8,7 @@ import type {
 	TableFieldHeaderCell,
 } from "@prismicio/client"
 
-import type { VueShorthand } from "../PrismicRichText/types"
-import type { VueComponent } from "../types"
+import type { VueComponent, VueComponentShorthand } from "../types"
 
 /**
  * A map of Table block types to Vue Components. It is used to render table
@@ -18,30 +17,49 @@ import type { VueComponent } from "../types"
  * @see Templating Table fields from Prismic {@link https://prismic.io/docs/table}
  */
 export type VueTableComponents = {
-	table?: VueComponent<{ table: TableField<"filled"> }> | VueShorthand
-	thead?: VueComponent<{ head: TableFieldHead }> | VueShorthand
-	tbody?: VueComponent<{ body: TableFieldBody }> | VueShorthand
+	table?:
+		| VueComponent<{ table: TableField<"filled"> }>
+		| Omit<VueComponentShorthand, "as">
+	thead?:
+		| VueComponent<{ head: TableFieldHead }>
+		| Omit<VueComponentShorthand, "as">
+	tbody?:
+		| VueComponent<{ body: TableFieldBody }>
+		| Omit<VueComponentShorthand, "as">
 	tr?:
 		| VueComponent<{ row: TableFieldBodyRow | TableFieldHeadRow }>
-		| VueShorthand
-	th?: VueComponent<{ cell: TableFieldHeaderCell }> | VueShorthand
-	td?: VueComponent<{ cell: TableFieldDataCell }> | VueShorthand
-}
-
-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 }>
+		| Omit<VueComponentShorthand, "as">
+	th?:
+		| VueComponent<{ cell: TableFieldHeaderCell }>
+		| Omit<VueComponentShorthand, "as">
+	td?:
+		| VueComponent<{ cell: TableFieldDataCell }>
+		| Omit<VueComponentShorthand, "as">
 }
 
 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 }
+	table: {
+		is: VueTableComponents["table"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
+	thead: {
+		is: VueTableComponents["thead"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
+	tbody: {
+		is: VueTableComponents["tbody"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
+	tr: {
+		is: VueTableComponents["tr"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
+	th: {
+		is: VueTableComponents["th"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
+	td: {
+		is: VueTableComponents["td"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
 }

package/src/PrismicText.vue

@@ -6,13 +6,9 @@ import { watchEffect } from "vue"
 
 import { devMsg } from "./lib/devMsg"
 
-/**
- * Props for `<PrismicText />`.
- */
+/** Props for `<PrismicText />`. */
 export type PrismicTextProps = {
-	/**
-	 * The Prismic rich text field to render.
-	 */
+	/** The Prismic rich text field to render. */
 	field: RichTextField | null | undefined
 
 	/**