@prismicio/svelte 1.3.0 → 1.4.0

package/dist/PrismicRichText/DefaultComponent.svelte

@@ -2,22 +2,24 @@
 import PrismicImage from "../PrismicImage.svelte";
 import PrismicLink from "../PrismicLink.svelte";
 export let node;
+$:
+  dir = "direction" in node && node.direction === "rtl" ? "rtl" : void 0;
 </script>
 
 {#if node.type === "heading1"}
-	<h1><slot /></h1>
+	<h1 {dir}><slot /></h1>
 {:else if node.type === "heading2"}
-	<h2><slot /></h2>
+	<h2 {dir}><slot /></h2>
 {:else if node.type === "heading3"}
-	<h3><slot /></h3>
+	<h3 {dir}><slot /></h3>
 {:else if node.type === "heading4"}
-	<h4><slot /></h4>
+	<h4 {dir}><slot /></h4>
 {:else if node.type === "heading5"}
-	<h5><slot /></h5>
+	<h5 {dir}><slot /></h5>
 {:else if node.type === "heading6"}
-	<h6><slot /></h6>
+	<h6 {dir}><slot /></h6>
 {:else if node.type === "paragraph"}
-	<p><slot /></p>
+	<p {dir}><slot /></p>
 {:else if node.type === "preformatted"}
 	<pre><slot /></pre>
 {:else if node.type === "strong"}
@@ -25,9 +27,9 @@ export let node;
 {:else if node.type === "em"}
 	<em><slot /></em>
 {:else if node.type === "list-item"}
-	<li><slot /></li>
+	<li {dir}><slot /></li>
 {:else if node.type === "o-list-item"}
-	<li><slot /></li>
+	<li {dir}><slot /></li>
 {:else if node.type === "group-list-item"}
 	<ul><slot /></ul>
 {:else if node.type === "group-o-list-item"}

package/dist/PrismicTable/DefaultComponent.svelte

@@ -0,0 +1,5 @@
+<script>import { TableComponents } from "../types";
+export let type;
+</script>
+
+<svelte:element this={type}><slot /></svelte:element>

package/dist/PrismicTable/DefaultComponent.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { TableComponents } from "../types";
+declare const __propDef: {
+    props: {
+        type: keyof TableComponents;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DefaultComponentProps = typeof __propDef.props;
+export type DefaultComponentEvents = typeof __propDef.events;
+export type DefaultComponentSlots = typeof __propDef.slots;
+export default class DefaultComponent extends SvelteComponent<DefaultComponentProps, DefaultComponentEvents, DefaultComponentSlots> {
+}
+export {};

package/dist/PrismicTable/PrismicTable.svelte

@@ -0,0 +1,52 @@
+<script>import { isFilled } from "@prismicio/client";
+import {} from "svelte";
+import PrismicRichText from "../PrismicRichText/PrismicRichText.svelte";
+import { SvelteRichTextSerializer } from "../types";
+import DefaultComponent from "./DefaultComponent.svelte";
+export let field;
+export let components = {};
+export let fallback = void 0;
+const createComponent = (type) => {
+  const Component = components[type] ?? DefaultComponent;
+  return {
+    Component,
+    props: Component === DefaultComponent ? { type } : {}
+  };
+};
+const { Component: Table, props: tableProps } = createComponent("table");
+const { Component: Thead, props: theadProps } = createComponent("thead");
+const { Component: Tbody, props: tbodyProps } = createComponent("tbody");
+const { Component: Tr, props: trProps } = createComponent("tr");
+const { Component: Th, props: thProps } = createComponent("th");
+const { Component: Td, props: tdProps } = createComponent("td");
+</script>
+
+<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
+{#if isFilled.table(field)}
+	<Table {...tableProps} table={field}>
+		{#if field?.head}
+			<Thead {...theadProps} head={field.head}>
+				{#each field.head.rows as row}
+					<Tr {...trProps} {row}>
+						{#each row.cells as cell}
+							<Th {...thProps} {cell}>
+								<PrismicRichText field={cell.content} {components} /></Th
+							>{/each}</Tr
+					>{/each}</Thead
+			>{/if}<Tbody {...tbodyProps} body={field.body}>
+			{#each field.body.rows as row}
+				<Tr {...trProps} {row}>
+					{#each row.cells as cell}
+						{#if cell.type === "header"}
+							<Th {...thProps} {cell}>
+								<PrismicRichText field={cell.content} {components} /></Th
+							>{:else}<Td {...tdProps} {cell}>
+								<PrismicRichText field={cell.content} {components} /></Td
+							>{/if}{/each}</Tr
+				>
+			{/each}
+		</Tbody>
+	</Table>
+{:else if fallback !== undefined}
+	<svelte:component this={fallback} />
+{/if}

package/dist/PrismicTable/PrismicTable.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import { type TableField } from "@prismicio/client";
+import { type ComponentType } from "svelte";
+import { type TableComponents } from "../types";
+declare const __propDef: {
+    props: {
+        /**
+             * The Prismic table field to render.
+             */ field: TableField;
+        /**
+             * An object that maps a rich text block type to a Svelte component.
+             */ components?: (TableComponents & Partial<Record<"heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "paragraph" | "preformatted" | "strong" | "em" | "listItem" | "oListItem" | "list" | "oList" | "image" | "embed" | "hyperlink" | "label" | "span", new (...args: any[]) => SvelteComponent<Partial<{
+            /**
+             * An object that maps a rich text block type to a Svelte component.
+             */
+            node: import("@prismicio/client").RTAnyNode;
+        }>, any, any>>>) | undefined;
+        /**
+             * The component rendered when the field is empty. If a fallback is not given,
+             * `null` will be rendered.
+             */ fallback?: ComponentType | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PrismicTableProps = typeof __propDef.props;
+export type PrismicTableEvents = typeof __propDef.events;
+export type PrismicTableSlots = typeof __propDef.slots;
+export default class PrismicTable extends SvelteComponent<PrismicTableProps, PrismicTableEvents, PrismicTableSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
 export { default as PrismicImage } from "./PrismicImage.svelte";
 export { default as PrismicLink } from "./PrismicLink.svelte";
 export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
+export { default as PrismicTable } from "./PrismicTable/PrismicTable.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
 export type { SvelteRichTextSerializer } from "./types";

package/dist/index.js

@@ -2,5 +2,6 @@ export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
 export { default as PrismicImage } from "./PrismicImage.svelte";
 export { default as PrismicLink } from "./PrismicLink.svelte";
 export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
+export { default as PrismicTable } from "./PrismicTable/PrismicTable.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";

package/dist/types.d.ts

@@ -1,7 +1,27 @@
-import type { RTAnyNode, RichTextNodeType } from "@prismicio/client";
-import type { SvelteComponent } from "svelte";
+import type { RTAnyNode, RichTextNodeType, TableField, TableFieldBody, TableFieldBodyRow, TableFieldDataCell, TableFieldHead, TableFieldHeadRow, TableFieldHeaderCell } from "@prismicio/client";
+import type { ComponentType, SvelteComponent } from "svelte";
 export type SvelteRichTextSerializer = Partial<Record<keyof typeof RichTextNodeType, SvelteRichTextComponent>>;
 type SvelteRichTextComponent = new (...args: any[]) => SvelteComponent<Partial<{
     node: RTAnyNode;
 }>>;
+export type TableComponents = {
+    table?: ComponentType<SvelteComponent<{
+        table: TableField<"filled">;
+    }>>;
+    thead?: ComponentType<SvelteComponent<{
+        head: TableFieldHead;
+    }>>;
+    tbody?: ComponentType<SvelteComponent<{
+        body: TableFieldBody;
+    }>>;
+    tr?: ComponentType<SvelteComponent<{
+        row: TableFieldHeadRow | TableFieldBodyRow;
+    }>>;
+    th?: ComponentType<SvelteComponent<{
+        table: TableFieldHeaderCell;
+    }>>;
+    td?: ComponentType<SvelteComponent<{
+        table: TableFieldDataCell;
+    }>>;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"typescript",
@@ -65,8 +65,8 @@
 		"esm-env": "^1.0.0"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.11.0",
-		"@prismicio/mock": "^0.4.0",
+		"@prismicio/client": "^7.16.1",
+		"@prismicio/mock": "^0.7.1",
 		"@size-limit/preset-small-lib": "^11.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.2.3",

package/src/PrismicRichText/DefaultComponent.svelte

@@ -6,22 +6,24 @@
 	import PrismicLink from "../PrismicLink.svelte";
 
 	export let node: RTAnyNode;
+
+	$: dir = "direction" in node && node.direction === "rtl" ? "rtl" : undefined
 </script>
 
 {#if node.type === "heading1"}
-	<h1><slot /></h1>
+	<h1 {dir}><slot /></h1>
 {:else if node.type === "heading2"}
-	<h2><slot /></h2>
+	<h2 {dir}><slot /></h2>
 {:else if node.type === "heading3"}
-	<h3><slot /></h3>
+	<h3 {dir}><slot /></h3>
 {:else if node.type === "heading4"}
-	<h4><slot /></h4>
+	<h4 {dir}><slot /></h4>
 {:else if node.type === "heading5"}
-	<h5><slot /></h5>
+	<h5 {dir}><slot /></h5>
 {:else if node.type === "heading6"}
-	<h6><slot /></h6>
+	<h6 {dir}><slot /></h6>
 {:else if node.type === "paragraph"}
-	<p><slot /></p>
+	<p {dir}><slot /></p>
 {:else if node.type === "preformatted"}
 	<pre><slot /></pre>
 {:else if node.type === "strong"}
@@ -29,9 +31,9 @@
 {:else if node.type === "em"}
 	<em><slot /></em>
 {:else if node.type === "list-item"}
-	<li><slot /></li>
+	<li {dir}><slot /></li>
 {:else if node.type === "o-list-item"}
-	<li><slot /></li>
+	<li {dir}><slot /></li>
 {:else if node.type === "group-list-item"}
 	<ul><slot /></ul>
 {:else if node.type === "group-o-list-item"}

package/src/PrismicTable/DefaultComponent.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { TableComponents } from "../types";
+	export let type: keyof TableComponents;
+</script>
+
+<svelte:element this={type}><slot /></svelte:element>

package/src/PrismicTable/PrismicTable.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { isFilled, type TableField } from "@prismicio/client";
+	import { type ComponentType } from "svelte";
+
+	import PrismicRichText from "../PrismicRichText/PrismicRichText.svelte";
+	import { SvelteRichTextSerializer, type TableComponents } from "../types";
+	import DefaultComponent from "./DefaultComponent.svelte";
+
+	/**
+	 * The Prismic table field to render.
+	 */
+	export let field: TableField;
+
+	/**
+	 * An object that maps a rich text block type to a Svelte component.
+	 */
+	export let components: TableComponents & SvelteRichTextSerializer = {};
+
+	/**
+	 * The component rendered when the field is empty. If a fallback is not given,
+	 * `null` will be rendered.
+	 */
+	export let fallback: ComponentType | undefined = undefined;
+
+	/**
+	 * This function creates the needed table components, prioritizing any user
+	 * provided custom components and falling back to the default components.
+	 */
+	const createComponent = (type: keyof TableComponents) => {
+		const Component: ComponentType = components[type] ?? DefaultComponent;
+		return {
+			Component,
+			props: Component === DefaultComponent ? { type } : {},
+		};
+	};
+
+	const { Component: Table, props: tableProps } = createComponent("table");
+	const { Component: Thead, props: theadProps } = createComponent("thead");
+	const { Component: Tbody, props: tbodyProps } = createComponent("tbody");
+	const { Component: Tr, props: trProps } = createComponent("tr");
+	const { Component: Th, props: thProps } = createComponent("th");
+	const { Component: Td, props: tdProps } = createComponent("td");
+</script>
+
+<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
+{#if isFilled.table(field)}
+	<Table {...tableProps} table={field}>
+		{#if field?.head}
+			<Thead {...theadProps} head={field.head}>
+				{#each field.head.rows as row}
+					<Tr {...trProps} {row}>
+						{#each row.cells as cell}
+							<Th {...thProps} {cell}>
+								<PrismicRichText field={cell.content} {components} /></Th
+							>{/each}</Tr
+					>{/each}</Thead
+			>{/if}<Tbody {...tbodyProps} body={field.body}>
+			{#each field.body.rows as row}
+				<Tr {...trProps} {row}>
+					{#each row.cells as cell}
+						{#if cell.type === "header"}
+							<Th {...thProps} {cell}>
+								<PrismicRichText field={cell.content} {components} /></Th
+							>{:else}<Td {...tdProps} {cell}>
+								<PrismicRichText field={cell.content} {components} /></Td
+							>{/if}{/each}</Tr
+				>
+			{/each}
+		</Tbody>
+	</Table>
+{:else if fallback !== undefined}
+	<svelte:component this={fallback} />
+{/if}

package/src/index.ts

@@ -2,6 +2,7 @@ export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
 export { default as PrismicImage } from "./PrismicImage.svelte";
 export { default as PrismicLink } from "./PrismicLink.svelte";
 export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
+export { default as PrismicTable } from "./PrismicTable/PrismicTable.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
 

package/src/types.ts

@@ -1,5 +1,15 @@
-import type { RTAnyNode, RichTextNodeType } from "@prismicio/client";
-import type { SvelteComponent } from "svelte";
+import type {
+	RTAnyNode,
+	RichTextNodeType,
+	TableField,
+	TableFieldBody,
+	TableFieldBodyRow,
+	TableFieldDataCell,
+	TableFieldHead,
+	TableFieldHeadRow,
+	TableFieldHeaderCell,
+} from "@prismicio/client";
+import type { ComponentType, SvelteComponent } from "svelte";
 
 export type SvelteRichTextSerializer = Partial<
 	Record<keyof typeof RichTextNodeType, SvelteRichTextComponent>
@@ -13,3 +23,15 @@ type SvelteRichTextComponent = new (
 		node: RTAnyNode;
 	}>
 >;
+
+// Define the type for the components prop
+export type TableComponents = {
+	table?: ComponentType<SvelteComponent<{ table: TableField<"filled"> }>>;
+	thead?: ComponentType<SvelteComponent<{ head: TableFieldHead }>>;
+	tbody?: ComponentType<SvelteComponent<{ body: TableFieldBody }>>;
+	tr?: ComponentType<
+		SvelteComponent<{ row: TableFieldHeadRow | TableFieldBodyRow }>
+	>;
+	th?: ComponentType<SvelteComponent<{ table: TableFieldHeaderCell }>>;
+	td?: ComponentType<SvelteComponent<{ table: TableFieldDataCell }>>;
+};