@prismicio/vue 5.0.3 → 5.1.1

package/src/PrismicTable/PrismicTableRow.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { TableFieldBodyRow, TableFieldHeadRow } from "@prismicio/client"
+
+import type { VueTableComponents } 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
+}
+
+const props = defineProps<PrismicTableRowProps>()
+defineOptions({ name: "PrismicTableRow" })
+</script>
+
+<template>
+	<component :is="props.components.tr" :row="row">
+		<template v-for="cell in row.cells" :key="JSON.stringify(cell)">
+			<component
+				v-if="cell.type === 'header'"
+				:is="props.components.th"
+				:cell="cell"
+			>
+				<PrismicRichText :field="cell.content" :components="components" />
+			</component>
+			<component v-else :is="props.components.td" :cell="cell">
+				<PrismicRichText :field="cell.content" :components="props.components" />
+			</component>
+		</template>
+	</component>
+</template>

package/src/PrismicTable/getTableComponentProps.ts

@@ -0,0 +1,142 @@
+import type {
+	TableField,
+	TableFieldBody,
+	TableFieldBodyRow,
+	TableFieldDataCell,
+	TableFieldHead,
+	TableFieldHeadRow,
+	TableFieldHeaderCell,
+} from "@prismicio/client"
+import type { PropType } from "vue"
+
+/**
+ * Gets native Vue props for a component rendering `table` elements from a
+ * Prismic table field with `<PrismicTable />`.
+ *
+ * Props are: `["table"]`
+ *
+ * @example
+ *
+ * ```javascript
+ * // Defining a new rich text component
+ * import { getTableComponentProps } from "@prismicio/vue"
+ *
+ * defineProps(getTableComponentProps.table())
+ * ```
+ */
+export const table = (): {
+	table: { type: PropType<TableField<"filled">>; required: true }
+} => ({
+	table: { type: Object as PropType<TableField<"filled">>, required: true },
+})
+
+/**
+ * Gets native Vue props for a component rendering `thead` elements from a
+ * Prismic table field with `<PrismicTable />`.
+ *
+ * Props are: `["head"]`
+ *
+ * @example
+ *
+ * ```javascript
+ * // Defining a new rich text component
+ * import { getTableComponentProps } from "@prismicio/vue"
+ *
+ * defineProps(getTableComponentProps.thead())
+ * ```
+ */
+export const thead = (): {
+	head: { type: PropType<TableFieldHead>; required: true }
+} => ({
+	head: { type: Object as PropType<TableFieldHead>, required: true },
+})
+
+/**
+ * Gets native Vue props for a component rendering `tbody` elements from a
+ * Prismic table field with `<PrismicTable />`.
+ *
+ * Props are: `["body"]`
+ *
+ * @example
+ *
+ * ```javascript
+ * // Defining a new rich text component
+ * import { getTableComponentProps } from "@prismicio/vue"
+ *
+ * defineProps(getTableComponentProps.body())
+ * ```
+ */
+export const tbody = (): {
+	body: { type: PropType<TableFieldBody>; required: true }
+} => ({
+	body: { type: Object as PropType<TableFieldBody>, required: true },
+})
+
+/**
+ * Gets native Vue props for a component rendering `tr` elements from a Prismic
+ * table field with `<PrismicTable />`.
+ *
+ * Props are: `["row"]`
+ *
+ * @example
+ *
+ * ```javascript
+ * // Defining a new rich text component
+ * import { getTableComponentProps } from "@prismicio/vue"
+ *
+ * defineProps(getTableComponentProps.tr())
+ * ```
+ */
+export const tr = (): {
+	row: {
+		type: PropType<TableFieldHeadRow | TableFieldBodyRow>
+		required: true
+	}
+} => ({
+	row: {
+		type: Object as PropType<TableFieldHeadRow | TableFieldBodyRow>,
+		required: true,
+	},
+})
+
+/**
+ * Gets native Vue props for a component rendering `th` elements from a Prismic
+ * table field with `<PrismicTable />`.
+ *
+ * Props are: `["cell"]`
+ *
+ * @example
+ *
+ * ```javascript
+ * // Defining a new rich text component
+ * import { getTableComponentProps } from "@prismicio/vue"
+ *
+ * defineProps(getTableComponentProps.th())
+ * ```
+ */
+export const th = (): {
+	cell: { type: PropType<TableFieldHeaderCell>; required: true }
+} => ({
+	cell: { type: Object as PropType<TableFieldHeaderCell>, required: true },
+})
+
+/**
+ * Gets native Vue props for a component rendering `td` elements from a Prismic
+ * table field with `<PrismicTable />`.
+ *
+ * Props are: `["cell"]`
+ *
+ * @example
+ *
+ * ```javascript
+ * // Defining a new rich text component
+ * import { getTableComponentProps } from "@prismicio/vue"
+ *
+ * defineProps(getTableComponentProps.td())
+ * ```
+ */
+export const td = (): {
+	cell: { type: PropType<TableFieldDataCell>; required: true }
+} => ({
+	cell: { type: Object as PropType<TableFieldDataCell>, required: true },
+})

package/src/PrismicTable/index.ts

@@ -0,0 +1 @@
+export * as getTableComponentProps from "./getTableComponentProps"

package/src/PrismicTable/types.ts

@@ -0,0 +1,34 @@
+import type {
+	TableField,
+	TableFieldBody,
+	TableFieldBodyRow,
+	TableFieldDataCell,
+	TableFieldHead,
+	TableFieldHeadRow,
+	TableFieldHeaderCell,
+} from "@prismicio/client"
+import type {
+	DefineComponent,
+	FunctionalComponent,
+	defineAsyncComponent,
+} from "vue"
+
+/**
+ * A map of Table block types to Vue Components. It is used to render table
+ * fields.
+ *
+ * @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 }>
+}
+
+type VueComponent<TProps> =
+	| ReturnType<typeof defineAsyncComponent>
+	| DefineComponent<TProps>
+	| FunctionalComponent<TProps>

package/src/createPrismic.ts

@@ -29,6 +29,7 @@ import type {
 } from "./types"
 
 import PrismicRichText from "./PrismicRichText/PrismicRichText.vue"
+import PrismicTable from "./PrismicTable/PrismicTable.vue"
 import SliceZone from "./SliceZone/SliceZone.vue"
 
 import PrismicEmbed from "./PrismicEmbed.vue"
@@ -130,6 +131,7 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 				app.component(PrismicLink.name!, PrismicLink)
 				app.component(PrismicEmbed.name!, PrismicEmbed)
 				app.component(PrismicImage.name!, PrismicImage)
+				app.component(PrismicTable.name!, PrismicTable)
 				app.component(PrismicText.name!, PrismicText)
 				app.component(PrismicRichText.name!, PrismicRichText)
 				app.component(SliceZone.name!, SliceZone)

package/src/index.ts

@@ -1,4 +1,5 @@
 import PrismicRichText from "./PrismicRichText/PrismicRichText.vue"
+import PrismicTable from "./PrismicTable/PrismicTable.vue"
 import SliceZone from "./SliceZone/SliceZone.vue"
 
 import PrismicEmbed from "./PrismicEmbed.vue"
@@ -8,6 +9,7 @@ import PrismicText from "./PrismicText.vue"
 
 export type { SliceZoneProps } from "./SliceZone/SliceZone.vue"
 export type { PrismicRichTextProps } from "./PrismicRichText/PrismicRichText.vue"
+export type { PrismicTableProps } from "./PrismicTable/PrismicTable.vue"
 
 export type { PrismicEmbedProps } from "./PrismicEmbed.vue"
 export type { PrismicImageProps } from "./PrismicImage.vue"
@@ -19,6 +21,7 @@ export {
 	PrismicEmbed,
 	PrismicImage,
 	PrismicLink,
+	PrismicTable,
 	PrismicText,
 	PrismicRichText,
 }
@@ -29,6 +32,8 @@ export type {
 	RichTextComponentProps,
 } from "./PrismicRichText"
 
+export { getTableComponentProps } from "./PrismicTable"
+
 export {
 	TODOSliceComponent,
 	defineSliceZoneComponents,