@prismicio/vue 5.3.0-pr.86.915aa0e → 5.3.0-pr.88.72388e2

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"
 
@@ -14,19 +15,19 @@ import PrismicTableRow from "./PrismicTableRow.vue"
  * Props for `<PrismicTable />`.
  */
 export type PrismicTableProps = {
-	/**
-	 * The Prismic table field to render.
-	 */
+	/** The Prismic table field to render. */
 	field: TableField | undefined
 
 	/**
-	 * 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' },
 	 * }
 	 * ```
 	 */
@@ -42,39 +43,65 @@ 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>
-	<component v-else-if="fallback" :is="fallback" />
+	<component v-else-if="fallback" :is="fallback" v-bind="$attrs" />
 </template>

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/PrismicText.vue

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

package/src/SliceZone/SliceZone.vue

@@ -16,31 +16,20 @@ 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
 }
 

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>