update components

huntabyte · Sep 25, 2023 · 8c8572c · 8c8572c
1 parent 170db1c
commit 8c8572c
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 85 deletions.
diff --git a/apps/www/src/lib/registry/default/example/cards/data-table.svelte b/apps/www/src/lib/registry/default/example/cards/data-table.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+	export type Payment = {
+		id: string;
+		amount: number;
+		status: "Pending" | "Processing" | "Success" | "Failed";
+		email: string;
+	};
+</script>
+
 <script lang="ts">
 	import {
 		createTable,
@@ -12,7 +21,7 @@
 		addSelectedRows,
 		addHiddenColumns
 	} from "svelte-headless-table/plugins";
-	import { readable } from "svelte/store";
+	import { derived, readable } from "svelte/store";
 	import * as Table from "@/registry/default/ui/table";
 	import Actions from "../data-table/data-table-actions.svelte";
 	import { Button } from "@/registry/default/ui/button";
@@ -23,13 +32,6 @@
 	import { ArrowUpDown, ChevronDown } from "lucide-svelte";
 	import * as Card from "@/registry/default/ui/card";
 
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
-
 	const data: Payment[] = [
 		{
 			id: "m5gr84i9",
@@ -74,18 +76,16 @@
 	});
 
 	const columns = table.createColumns([
-		table.column({
+		table.display({
 			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected } = pluginStates.select;
 				return createRender(DataTableCheckbox, {
 					checked: allPageRowsSelected
 				});
 			},
-			accessor: "id",
 			cell: ({ row }, { pluginStates }) => {
 				const { getRowState } = pluginStates.select;
 				const { isSelected } = getRowState(row);
-
 				return createRender(DataTableCheckbox, {
 					checked: isSelected
 				});
@@ -128,11 +128,13 @@
 				}
 			}
 		}),
-		table.column({
+		table.display({
 			header: "",
-			accessor: ({ id }) => id,
-			cell: (item) => {
-				return createRender(Actions, { id: item.value });
+			cell: ({ row }, { data }) => {
+				const payment = derived(data, ($data) => $data[Number(row.id)]);
+				return createRender(Actions, {
+					payment
+				});
 			},
 			plugins: {
 				sort: {

diff --git a/apps/www/src/lib/registry/default/example/data-table-demo.svelte b/apps/www/src/lib/registry/default/example/data-table-demo.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+	export type Payment = {
+		id: string;
+		amount: number;
+		status: "Pending" | "Processing" | "Success" | "Failed";
+		email: string;
+	};
+</script>
+
 <script lang="ts">
 	import {
 		createTable,
@@ -12,7 +21,7 @@
 		addSelectedRows,
 		addHiddenColumns
 	} from "svelte-headless-table/plugins";
-	import { readable } from "svelte/store";
+	import { derived, readable } from "svelte/store";
 	import * as Table from "@/registry/default/ui/table";
 	import Actions from "./data-table/data-table-actions.svelte";
 	import { Button } from "@/registry/default/ui/button";
@@ -22,13 +31,6 @@
 	import DataTableCheckbox from "./data-table/data-table-checkbox.svelte";
 	import { ArrowUpDown, ChevronDown } from "lucide-svelte";
 
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
-
 	const data: Payment[] = [
 		{
 			id: "m5gr84i9",
@@ -73,18 +75,16 @@
 	});
 
 	const columns = table.createColumns([
-		table.column({
+		table.display({
 			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected } = pluginStates.select;
 				return createRender(DataTableCheckbox, {
 					checked: allPageRowsSelected
 				});
 			},
-			accessor: "id",
 			cell: ({ row }, { pluginStates }) => {
 				const { getRowState } = pluginStates.select;
 				const { isSelected } = getRowState(row);
-
 				return createRender(DataTableCheckbox, {
 					checked: isSelected
 				});
@@ -134,11 +134,13 @@
 				}
 			}
 		}),
-		table.column({
+		table.display({
 			header: "",
-			accessor: ({ id }) => id,
-			cell: (item) => {
-				return createRender(Actions, { id: item.value });
+			cell: ({ row }, { data }) => {
+				const payment = derived(data, ($data) => $data[Number(row.id)]);
+				return createRender(Actions, {
+					payment
+				});
 			},
 			plugins: {
 				sort: {

diff --git a/apps/www/src/lib/registry/default/example/data-table/data-table-actions.svelte b/apps/www/src/lib/registry/default/example/data-table/data-table-actions.svelte
@@ -3,7 +3,9 @@
 	import { Button } from "@/registry/default/ui/button";
 	import { MoreHorizontal } from "lucide-svelte";
 
-	export let id: string;
+	import type { Readable } from "svelte/store";
+	import type { Payment } from "../data-table-demo.svelte";
+	export let payment: Readable<Payment>;
 </script>
 
 <DropdownMenu.Root>
@@ -22,7 +24,7 @@
 		<DropdownMenu.Group>
 			<DropdownMenu.Label>Actions</DropdownMenu.Label>
 			<DropdownMenu.Item
-				on:click={() => navigator.clipboard.writeText(id)}
+				on:click={() => navigator.clipboard.writeText($payment.id)}
 			>
 				Copy payment ID
 			</DropdownMenu.Item>

diff --git a/apps/www/src/lib/registry/new-york/example/cards/data-table.svelte b/apps/www/src/lib/registry/new-york/example/cards/data-table.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+	export type Payment = {
+		id: string;
+		amount: number;
+		status: "Pending" | "Processing" | "Success" | "Failed";
+		email: string;
+	};
+</script>
+
 <script lang="ts">
 	import {
 		createTable,
@@ -12,7 +21,7 @@
 		addSelectedRows,
 		addHiddenColumns
 	} from "svelte-headless-table/plugins";
-	import { readable } from "svelte/store";
+	import { derived, readable } from "svelte/store";
 	import * as Table from "@/registry/new-york/ui/table";
 	import Actions from "../data-table/data-table-actions.svelte";
 	import { Button } from "@/registry/new-york/ui/button";
@@ -23,13 +32,6 @@
 	import { ArrowUpDown, ChevronDown } from "lucide-svelte";
 	import * as Card from "@/registry/new-york/ui/card";
 
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
-
 	const data: Payment[] = [
 		{
 			id: "m5gr84i9",
@@ -74,18 +76,16 @@
 	});
 
 	const columns = table.createColumns([
-		table.column({
+		table.display({
 			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected } = pluginStates.select;
 				return createRender(DataTableCheckbox, {
 					checked: allPageRowsSelected
 				});
 			},
-			accessor: "id",
 			cell: ({ row }, { pluginStates }) => {
 				const { getRowState } = pluginStates.select;
 				const { isSelected } = getRowState(row);
-
 				return createRender(DataTableCheckbox, {
 					checked: isSelected
 				});
@@ -128,11 +128,13 @@
 				}
 			}
 		}),
-		table.column({
+		table.display({
 			header: "",
-			accessor: ({ id }) => id,
-			cell: (item) => {
-				return createRender(Actions, { id: item.value });
+			cell: ({ row }, { data }) => {
+				const payment = derived(data, ($data) => $data[Number(row.id)]);
+				return createRender(Actions, {
+					payment
+				});
 			},
 			plugins: {
 				sort: {

diff --git a/apps/www/src/lib/registry/new-york/example/data-table-demo.svelte b/apps/www/src/lib/registry/new-york/example/data-table-demo.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+	export type Payment = {
+		id: string;
+		amount: number;
+		status: "Pending" | "Processing" | "Success" | "Failed";
+		email: string;
+	};
+</script>
+
 <script lang="ts">
 	import {
 		createTable,
@@ -12,7 +21,7 @@
 		addSelectedRows,
 		addHiddenColumns
 	} from "svelte-headless-table/plugins";
-	import { readable } from "svelte/store";
+	import { derived, readable } from "svelte/store";
 	import * as Table from "@/registry/new-york/ui/table";
 	import Actions from "./data-table/data-table-actions.svelte";
 	import { Button } from "@/registry/new-york/ui/button";
@@ -22,13 +31,6 @@
 	import { Input } from "@/registry/new-york/ui/input";
 	import DataTableCheckbox from "./data-table/data-table-checkbox.svelte";
 
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
-
 	const data: Payment[] = [
 		{
 			id: "m5gr84i9",
@@ -73,18 +75,16 @@
 	});
 
 	const columns = table.createColumns([
-		table.column({
+		table.display({
 			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected } = pluginStates.select;
 				return createRender(DataTableCheckbox, {
 					checked: allPageRowsSelected
 				});
 			},
-			accessor: "id",
 			cell: ({ row }, { pluginStates }) => {
 				const { getRowState } = pluginStates.select;
 				const { isSelected } = getRowState(row);
-
 				return createRender(DataTableCheckbox, {
 					checked: isSelected
 				});
@@ -134,11 +134,13 @@
 				}
 			}
 		}),
-		table.column({
+		table.display({
 			header: "",
-			accessor: ({ id }) => id,
-			cell: (item) => {
-				return createRender(Actions, { id: item.value });
+			cell: ({ row }, { data }) => {
+				const payment = derived(data, ($data) => $data[Number(row.id)]);
+				return createRender(Actions, {
+					payment
+				});
 			},
 			plugins: {
 				sort: {

diff --git a/apps/www/src/lib/registry/new-york/example/data-table/data-table-actions.svelte b/apps/www/src/lib/registry/new-york/example/data-table/data-table-actions.svelte
@@ -2,15 +2,17 @@
 	import * as DropdownMenu from "@/registry/new-york/ui/dropdown-menu";
 	import { Button } from "@/registry/new-york/ui/button";
 	import { DotsHorizontal } from "radix-icons-svelte";
-
-	export let id: string;
+	import type { Readable } from "svelte/store";
+	import type { Payment } from "../data-table-demo.svelte";
+	export let payment: Readable<Payment>;
 </script>
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger asChild let:builder>
 		<Button
 			variant="ghost"
 			builders={[builder]}
+			size="icon"
 			class="relative w-8 h-8 p-0"
 		>
 			<span class="sr-only">Open menu</span>
@@ -21,7 +23,7 @@
 		<DropdownMenu.Group>
 			<DropdownMenu.Label>Actions</DropdownMenu.Label>
 			<DropdownMenu.Item
-				on:click={() => navigator.clipboard.writeText(id)}
+				on:click={() => navigator.clipboard.writeText($payment.id)}
 			>
 				Copy payment ID
 			</DropdownMenu.Item>

diff --git a/apps/www/src/routes/examples/data-table/data-table-actions.svelte b/apps/www/src/routes/examples/data-table/data-table-actions.svelte
@@ -2,16 +2,18 @@
 	import * as DropdownMenu from "@/registry/new-york/ui/dropdown-menu";
 	import { Button } from "@/registry/new-york/ui/button";
 	import { DotsHorizontal } from "radix-icons-svelte";
-
-	export let id: string;
+	import type { Payment } from "./data-table.svelte";
+	import type { Readable } from "svelte/store";
+	export let payment: Readable<Payment>;
 </script>
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger asChild let:builder>
 		<Button
 			variant="ghost"
 			builders={[builder]}
-			class="w-8 h-8 p- relative"
+			size="icon"
+			class="relative w-8 h-8 p-0"
 		>
 			<span class="sr-only">Open menu</span>
 			<DotsHorizontal class="w-4 h-4" />
@@ -21,7 +23,7 @@
 		<DropdownMenu.Group>
 			<DropdownMenu.Label>Actions</DropdownMenu.Label>
 			<DropdownMenu.Item
-				on:click={() => navigator.clipboard.writeText(id)}
+				on:click={() => navigator.clipboard.writeText($payment.id)}
 			>
 				Copy payment ID
 			</DropdownMenu.Item>