@prismicio/vue 5.3.0-canary.5d9ea4c → 5.3.0-canary.aa89de6

package/src/PrismicRichText/PrismicRichText.vue

@@ -1,24 +1,15 @@
 <script lang="ts" setup>
 import {
-	type HTMLRichTextFunctionSerializer,
-	type HTMLRichTextMapSerializer,
 	type LinkResolverFunction,
 	type RichTextField,
-	isFilled,
 } from "@prismicio/client"
 import { asTree } from "@prismicio/client/richtext"
-import { DEV } from "esm-env"
 import type { PropType } from "vue"
-import { computed, watchEffect } from "vue"
-
-import Wrapper from "../lib/Wrapper.vue"
+import { computed } from "vue"
 
 import type { ComponentOrTagName } from "../types"
 import type { VueRichTextSerializer } from "./types"
 
-import { usePrismic } from "../usePrismic"
-
-import DeprecatedPrismicRichText from "./DeprecatedPrismicRichText.vue"
 import PrismicRichTextSerialize from "./PrismicRichTextSerialize.vue"
 
 /**
@@ -30,12 +21,6 @@ export type PrismicRichTextProps = {
 	 */
 	field: RichTextField | null | 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 rich text block type to a Vue component.
 	 *
@@ -60,24 +45,24 @@ export type PrismicRichTextProps = {
 	linkResolver?: LinkResolverFunction
 
 	/**
-	 * An HTML serializer to customize the way rich text fields are rendered.
-	 *
-	 * @deprecated Use `components` instead.
+	 * The Vue component rendered for links when the URL is internal.
 	 *
-	 * @defaultValue The HTML serializer provided to `@prismicio/vue` plugin if configured.
-	 *
-	 * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
+	 * @defaultValue `<RouterLink>`
 	 */
-	// TODO: Remove in v6
-	serializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer
+	internalLinkComponent?: ComponentOrTagName
 
 	/**
-	 * An HTML tag name or a component used to wrap the output. `<PrismicText />`
-	 * is not wrapped by default.
+	 * The Vue component rendered for links when the URL is external.
 	 *
-	 * @defaultValue `"template"` (no wrapper)
+	 * @defaultValue `<a>`
 	 */
-	wrapper?: ComponentOrTagName
+	externalLinkComponent?: ComponentOrTagName
+
+	/**
+	 * The value to be rendered when the field is empty. If a fallback is not
+	 * given, `null` (nothing) will be rendered.
+	 */
+	fallback?: ComponentOrTagName
 }
 
 // We're forced to declare props using the JavaScript syntax because `@vue/compiler-sfc`
@@ -86,98 +71,43 @@ const props = defineProps({
 	field: {
 		type: Array as unknown as PropType<PrismicRichTextProps["field"]>,
 	},
-	fallback: {
-		type: [String, Object, Function] as PropType<
-			PrismicRichTextProps["fallback"]
-		>,
-	},
 	components: {
 		type: Object as PropType<PrismicRichTextProps["components"]>,
 	},
 	linkResolver: {
 		type: Function as PropType<PrismicRichTextProps["linkResolver"]>,
 	},
-	serializer: {
-		type: [Object, Function] as PropType<PrismicRichTextProps["serializer"]>,
+	internalLinkComponent: {
+		type: [String, Object, Function] as PropType<
+			PrismicRichTextProps["internalLinkComponent"]
+		>,
+	},
+	externalLinkComponent: {
+		type: [String, Object, Function] as PropType<
+			PrismicRichTextProps["externalLinkComponent"]
+		>,
 	},
-	wrapper: {
+	fallback: {
 		type: [String, Object, Function] as PropType<
-			PrismicRichTextProps["wrapper"]
+			PrismicRichTextProps["fallback"]
 		>,
 	},
 })
 defineOptions({ name: "PrismicRichText" })
 
-const { options } = usePrismic()
-
-const resolvedComponents = computed(() => {
-	return props.components || options.components?.richTextComponents
-})
-
-const resolvedLinkResolver = computed(() => {
-	return props.linkResolver || options.linkResolver
-})
-
 const children = computed(() => {
 	return asTree(props.field || []).children
 })
-
-const isModern = computed(() => {
-	// Explicit components prop
-	if (props.components) {
-		return true
-	}
-
-	// Explicit serializer prop
-	if (props.serializer) {
-		return false
-	}
-
-	// Global components option
-	if (options.components?.richTextComponents) {
-		return true
-	}
-
-	// Global serializer option
-	if (options.richTextSerializer) {
-		return false
-	}
-
-	// Default to modern
-	return true
-})
-
-if (DEV) {
-	watchEffect(() => {
-		// TODO: Remove in v6
-		if (props.components && props.serializer) {
-			console.warn(
-				`[PrismicRichText] Only one of "components" or "serializer" (deprecated) props can be provided. You can resolve this warning by removing either the "components" or "serializer" prop. "components" will be used in this case.`,
-			)
-		}
-	})
-}
 </script>
 
 <template>
-	<Wrapper
-		v-if="isModern && (isFilled.richText(field) || fallback)"
-		:wrapper="wrapper"
-	>
-		<PrismicRichTextSerialize
-			v-if="children.length"
-			:children="children"
-			:components="resolvedComponents"
-			:link-resolver="resolvedLinkResolver"
-		/>
-		<component v-else :is="fallback" />
-	</Wrapper>
-	<DeprecatedPrismicRichText
-		v-else-if="!isModern"
-		:field="field"
-		:fallback="typeof fallback === 'string' ? fallback : undefined"
+	<PrismicRichTextSerialize
+		v-if="children.length"
+		:children="children"
+		:components="components"
 		:link-resolver="linkResolver"
-		:serializer="serializer"
-		:wrapper="wrapper"
+		:internal-link-component="internalLinkComponent"
+		:external-link-component="externalLinkComponent"
 	/>
+	<component v-else-if="fallback" :is="fallback" />
 </template>

package/src/PrismicRichText/PrismicRichTextDefaultComponent.vue

@@ -2,19 +2,30 @@
 import type { LinkResolverFunction } from "@prismicio/client"
 import { computed } from "vue"
 
-import type { RichTextComponentProps } from "./types"
+import type { ComponentOrTagName } from "../types"
+import type { RichTextComponentProps, VueShorthand } from "./types"
 
-import PrismicEmbed from "../PrismicEmbed.vue"
 import PrismicImage from "../PrismicImage.vue"
 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
+})
+
+const attrs = computed(() => {
+	return props.shorthand?.attrs ?? {}
+})
+
 const dir = computed(() => {
 	return "direction" in props.node && props.node.direction === "rtl"
 		? "rtl"
@@ -23,38 +34,53 @@ const dir = computed(() => {
 </script>
 
 <template>
-	<h1 v-if="node.type === 'heading1'" :dir="dir"><slot /></h1>
-	<h2 v-else-if="node.type === 'heading2'" :dir="dir"><slot /></h2>
-	<h3 v-else-if="node.type === 'heading3'" :dir="dir"><slot /></h3>
-	<h4 v-else-if="node.type === 'heading4'" :dir="dir"><slot /></h4>
-	<h5 v-else-if="node.type === 'heading5'" :dir="dir"><slot /></h5>
-	<h6 v-else-if="node.type === 'heading6'" :dir="dir"><slot /></h6>
-	<p v-else-if="node.type === 'paragraph'" :dir="dir"><slot /></p>
-	<pre v-else-if="node.type === 'preformatted'"><slot /></pre>
-	<strong v-else-if="node.type === 'strong'"><slot /></strong>
-	<em v-else-if="node.type === 'em'"><slot /></em>
-	<li v-else-if="node.type === 'list-item'" :dir="dir"><slot /></li>
-	<li v-else-if="node.type === 'o-list-item'" :dir="dir"><slot /></li>
-	<ul v-else-if="node.type === 'group-list-item'">
+	<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>
+	<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>
+	<ul v-else-if="node.type === 'group-list-item'" v-bind="attrs">
 		<slot />
 	</ul>
-	<ol v-else-if="node.type === 'group-o-list-item'">
+	<ol v-else-if="node.type === 'group-o-list-item'" v-bind="attrs">
 		<slot />
 	</ol>
 	<p class="block-img" v-else-if="node.type === 'image'">
-		<PrismicLink v-if="node.linkTo" :field="node.linkTo"
+		<PrismicLink
+			v-if="node.linkTo"
+			:field="node.linkTo"
+			:internal-component="internalLinkComponent"
+			:external-component="externalLinkComponent"
 			><PrismicImage :field="node"
 		/></PrismicLink>
-		<PrismicImage v-else :field="node" />
+		<PrismicImage v-else :field="node" v-bind="attrs" />
 	</p>
-	<PrismicEmbed v-else-if="node.type === 'embed'" :field="node.oembed" />
+	<div
+		v-else-if="node.type === 'embed'"
+		:data-oembed="node.oembed.embed_url"
+		:data-oembed-type="node.oembed.type"
+		:data-oembed-provider="node.oembed.provider_name"
+		v-html="node.oembed.html"
+		v-bind="attrs"
+	/>
 	<PrismicLink
 		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"
+	<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

@@ -2,7 +2,8 @@
 import type { LinkResolverFunction } from "@prismicio/client"
 import type { asTree } from "@prismicio/client/richtext"
 
-import type { VueRichTextSerializer } from "./types"
+import type { ComponentOrTagName } from "../types"
+import type { VueRichTextSerializer, VueShorthand } from "./types"
 
 import PrismicRichTextDefaultComponent from "./PrismicRichTextDefaultComponent.vue"
 
@@ -17,18 +18,40 @@ type PrismicRichTextSerializeProps = {
 	components?: VueRichTextSerializer
 	children: ReturnType<typeof asTree>["children"]
 	linkResolver?: LinkResolverFunction
+	internalLinkComponent?: ComponentOrTagName
+	externalLinkComponent?: ComponentOrTagName
 }
 
 const props = defineProps<PrismicRichTextSerializeProps>()
 defineOptions({ name: "PrismicRichTextSerialize" })
 
 function getComponent(child: ReturnType<typeof asTree>["children"][number]) {
-	return (
+	const maybeComponentOrShorthand =
 		props.components?.[
 			CHILD_TYPE_RENAMES[child.type as keyof typeof CHILD_TYPE_RENAMES] ||
 				(child.type as keyof typeof props.components)
-		] || PrismicRichTextDefaultComponent
-	)
+		]
+
+	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>
 
@@ -36,17 +59,15 @@ function getComponent(child: ReturnType<typeof asTree>["children"][number]) {
 	<component
 		v-for="child in props.children"
 		:key="JSON.stringify(child)"
-		:is="getComponent(child)"
+		:is="getComponent(child).is"
 		:node="child.node"
-		:link-resolver="
-			getComponent(child) === PrismicRichTextDefaultComponent
-				? props.linkResolver
-				: undefined
-		"
+		v-bind="getComponent(child).props"
 		><PrismicRichTextSerialize
 			v-if="child.children.length"
 			:children="child.children"
 			:components="components"
 			:link-resolver="linkResolver"
+			:internal-link-component="internalLinkComponent"
+			:external-link-component="externalLinkComponent"
 	/></component>
 </template>

package/src/PrismicRichText/types.ts

@@ -12,7 +12,7 @@ import type {
  * @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>
+	Record<keyof typeof RichTextNodeType, VueRichTextComponent | VueShorthand>
 >
 
 /**
@@ -35,3 +35,18 @@ type VueRichTextComponent<TRTNode extends RTAnyNode = RTAnyNode> =
 	| ReturnType<typeof defineAsyncComponent>
 	| DefineComponent<RichTextComponentProps<TRTNode>>
 	| FunctionalComponent<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
+}

package/src/PrismicTable/PrismicTable.vue

@@ -19,12 +19,6 @@ 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.
 	 *
@@ -37,6 +31,12 @@ export type PrismicTableProps = {
 	 * ```
 	 */
 	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>()
@@ -76,5 +76,5 @@ const mergedComponents = computed(() => ({
 			/>
 		</component>
 	</component>
-	<component v-else :is="fallback" />
+	<component v-else-if="fallback" :is="fallback" />
 </template>

package/src/PrismicTable/PrismicTableDefaultComponents.ts

@@ -1,44 +1,63 @@
 import { defineComponent, h } from "vue"
+import type { PropType } from "vue"
 
-import type { VueTableComponents } from "./types"
+import type { InternalVueTableComponents } from "./types"
 
 import * as getTableComponentProps from "./getTableComponentProps"
 
-export const defaultTableComponents: Required<VueTableComponents> = {
+export const defaultTableComponents: InternalVueTableComponents = {
 	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/types.ts

@@ -12,6 +12,7 @@ import type {
 	FunctionalComponent,
 	defineAsyncComponent,
 } from "vue"
+import type { VueShorthand } from "../PrismicRichText/types"
 
 /**
  * A map of Table block types to Vue Components. It is used to render table
@@ -20,12 +21,21 @@ 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
+}
+
+export type InternalVueTableComponents = {
+	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 }>
 }
 
 type VueComponent<TProps> =

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"
 
 /**
@@ -47,22 +42,14 @@ export type SliceZoneProps<TContext = unknown> = {
 	 * 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 +59,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 +86,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>