@gradio/dataframe 0.21.2 → 0.21.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @gradio/dataframe
 
+## 0.21.3
+
+### Fixes
+
+- [#12779](https://github.com/gradio-app/gradio/pull/12779) [`ea2d3e9`](https://github.com/gradio-app/gradio/commit/ea2d3e985a8b42d188e551f517c5825c00790628) - Migrate Audio + Upload + Atoms to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/button@0.6.3
+- @gradio/statustracker@0.12.2
+- @gradio/atoms@0.20.1
+- @gradio/utils@0.11.2
+- @gradio/icons@0.15.1
+- @gradio/upload@0.17.4
+- @gradio/client@2.0.3
+- @gradio/markdown-code@0.6.1
+- @gradio/checkbox@0.6.1
+
+## 0.21.2
+
+### Dependency updates
+
+- @gradio/utils@0.11.1
+- @gradio/button@0.6.2
+- @gradio/client@2.0.2
+
 ## 0.21.2
 
 ### Fixes

package/Dataframe.stories.svelte

@@ -1,45 +1,41 @@
-<script lang="ts">
+<script module lang="ts">
 	// @ts-nocheck
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Table from "./shared/Table.svelte";
 	import { within } from "@testing-library/dom";
-	import { userEvent } from "@storybook/test";
+	import { userEvent } from "storybook/test";
 	import { get } from "svelte/store";
 	import { format } from "svelte-i18n";
 	import Image from "@gradio/image";
-</script>
 
-<Meta
-	title="Components/DataFrame"
-	component={Table}
-	parameters={{
-		test: {
-			dangerouslyIgnoreUnhandledErrors: true // ignore fullscreen permission error
-		}
-	}}
-	argTypes={{
-		editable: {
-			control: [true, false],
-			description: "Whether the DataFrame is editable",
-			name: "interactive",
-			value: true
+	const { Story } = defineMeta({
+		title: "Components/DataFrame",
+		component: Table,
+		parameters: {
+			test: {
+				dangerouslyIgnoreUnhandledErrors: true // ignore fullscreen permission error
+			}
 		},
-		wrap: {
-			control: "boolean",
-			description: "Whether text should wrap or truncate with ellipsis",
-			defaultValue: false
-		},
-		column_widths: {
-			control: "object",
-			description: "Width of each column (px, %, or auto)",
-			defaultValue: ["200px", "200px", "200px"]
+		argTypes: {
+			editable: {
+				control: [true, false],
+				description: "Whether the DataFrame is editable",
+				name: "interactive",
+				value: true
+			},
+			wrap: {
+				control: "boolean",
+				description: "Whether text should wrap or truncate with ellipsis",
+				defaultValue: false
+			},
+			column_widths: {
+				control: "object",
+				description: "Width of each column (px, %, or auto)",
+				defaultValue: ["200px", "200px", "200px"]
+			}
 		}
-	}}
-/>
-
-<Template let:args>
-	<Table {...args} i18n={get(format)} />
-</Template>
+	});
+</script>
 
 <Story
 	name="Interactive dataframe"
@@ -54,7 +50,11 @@
 		col_count: [2, "dynamic"],
 		row_count: [3, "dynamic"]
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Interactive dataframe with label"
@@ -71,7 +71,11 @@
 		col_count: [2, "dynamic"],
 		row_count: [3, "dynamic"]
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Interactive dataframe no label"
@@ -88,7 +92,11 @@
 		col_count: [2, "dynamic"],
 		row_count: [3, "dynamic"]
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Static dataframe"
@@ -107,7 +115,6 @@
 	}}
 	play={async ({ canvasElement }) => {
 		// tests that the cell is not editable
-
 		const canvas = within(canvasElement);
 		const cells = canvas.getAllByRole("cell");
 		const initial_value = cells[0].textContent;
@@ -124,7 +131,11 @@
 			throw new Error("Input field appeared when table should be non-editable");
 		}
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with different precisions"
@@ -143,7 +154,11 @@
 		row_count: [2, "dynamic"],
 		editable: false
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with markdown and math"
@@ -161,7 +176,11 @@
 		row_count: [3, "dynamic"],
 		editable: false
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe without a label"
@@ -176,7 +195,11 @@
 		row_count: [2, "dynamic"],
 		editable: false
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with different colors"
@@ -186,7 +209,6 @@
 			[200, 800, 700]
 		],
 		headers: ["Math", "Reading", "Writing"],
-
 		styling: [
 			[
 				"background-color:teal; color: white",
@@ -200,7 +222,11 @@
 		row_count: [2, "dynamic"],
 		editable: false
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with column widths"
@@ -216,7 +242,11 @@
 		column_widths: ["20%", "30%", "50%"],
 		editable: false
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with zero row count"
@@ -228,7 +258,11 @@
 		row_count: [0, "dynamic"],
 		editable: false
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Interactive dataframe with zero row count"
@@ -240,7 +274,11 @@
 		row_count: [0, "dynamic"],
 		editable: true
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with link"
@@ -252,7 +290,11 @@
 		col_count: [1, "dynamic"],
 		row_count: [1, "dynamic"]
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with dialog interactions"
@@ -282,7 +324,11 @@
 		const new_cell = canvas.getAllByRole("cell")[9];
 		userEvent.click(new_cell);
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with fullscreen button and label and search"
@@ -300,7 +346,11 @@
 		show_search: "search",
 		label: "Test scores"
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with multiple selection interactions"
@@ -340,7 +390,11 @@
 		// verify cells were cleared by clicking one
 		await user.click(cells[2]);
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe toolbar interactions"
@@ -370,7 +424,11 @@
 
 		await userEvent.click(fullscreen_button);
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with row numbers"
@@ -389,7 +447,11 @@
 		show_row_numbers: true,
 		editable: false
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with truncated text"
@@ -417,7 +479,11 @@
 		col_count: [3, "dynamic"],
 		row_count: [3, "dynamic"]
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with multiline headers"
@@ -437,7 +503,11 @@
 		row_count: [3, "dynamic"],
 		editable: false
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with row and column selection"
@@ -477,7 +547,11 @@
 
 		await user.keyboard("{Delete}");
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with lots of values"
@@ -513,7 +587,11 @@
 		row_count: [10, "dynamic"],
 		max_height: 700
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with search and filter"
@@ -548,7 +626,11 @@
 
 		await new Promise((resolve) => setTimeout(resolve, 100));
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with pinned columns"
@@ -569,7 +651,11 @@
 		show_row_numbers: true,
 		editable: false
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with pixel and percentage column widths set"
@@ -583,7 +669,11 @@
 		row_count: [2, "dynamic"],
 		column_widths: ["10%", "50%", "40%", "100px", "100px"]
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with drag selection"
@@ -658,7 +748,11 @@
 
 		await new Promise((resolve) => setTimeout(resolve, 500));
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Non-interactive dataframe with sorting by multiple columns"
@@ -725,7 +819,11 @@
 		await userEvent.click(cell_menu_button_3);
 		await userEvent.click(canvas.getByText("Clear sort"));
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with display values"
@@ -753,7 +851,11 @@
 		show_row_numbers: true,
 		editable: false
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe with text wrapping, no max chars"
@@ -782,7 +884,11 @@
 		wrap: true,
 		column_widths: ["33%", "33%", "33%"]
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe text truncation and wrapping"
@@ -813,7 +919,11 @@
 		editable: false,
 		column_widths: ["200px", "200px", "200px"]
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Dataframe column addition test"
@@ -847,4 +957,8 @@
 		await user.type(input, "New Column");
 		await user.keyboard("{Enter}");
 	}}
-/>
+>
+	{#snippet template(args)}
+		<Table {...args} i18n={get(format)} />
+	{/snippet}
+</Story>

package/Standalone.stories.svelte

@@ -1,77 +1,71 @@
-<script lang="ts">
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import StandaloneDataframe from "./standalone/Index.svelte";
-</script>
 
-<Meta
-	title="Components/Standalone Dataframe"
-	component={StandaloneDataframe}
-	parameters={{
-		test: {
-			dangerouslyIgnoreUnhandledErrors: true
-		},
-		docs: {
-			description: {
-				component:
-					"Standalone DataFrame component that can be used independently outside of Gradio apps. Includes comprehensive CSS variables for theming and dark mode support. Use the dark mode toggle in the toolbar to test dark mode variables."
+	const { Story } = defineMeta({
+		title: "Components/Standalone Dataframe",
+		component: StandaloneDataframe,
+		parameters: {
+			test: {
+				dangerouslyIgnoreUnhandledErrors: true
+			},
+			docs: {
+				description: {
+					component:
+						"Standalone DataFrame component that can be used independently outside of Gradio apps. Includes comprehensive CSS variables for theming and dark mode support. Use the dark mode toggle in the toolbar to test dark mode variables."
+				}
 			}
-		}
-	}}
-	argTypes={{
-		interactive: {
-			control: "boolean",
-			description: "Whether the DataFrame is editable",
-			defaultValue: true
-		},
-		show_label: {
-			control: "boolean",
-			description: "Whether to show the label",
-			defaultValue: true
-		},
-		label: {
-			control: "text",
-			description: "Label for the DataFrame",
-			defaultValue: "DataFrame"
-		},
-		max_height: {
-			control: "number",
-			description: "Maximum height in pixels",
-			defaultValue: 500
-		},
-		show_search: {
-			control: "select",
-			options: ["none", "search", "filter"],
-			description: "Type of search/filter to show",
-			defaultValue: "none"
 		},
-		show_copy_button: {
-			control: "boolean",
-			description: "Whether to show the copy button",
-			defaultValue: false
-		},
-		show_fullscreen_button: {
-			control: "boolean",
-			description: "Whether to show the fullscreen button",
-			defaultValue: false
-		},
-		show_row_numbers: {
-			control: "boolean",
-			description: "Whether to show row numbers",
-			defaultValue: false
-		},
-		wrap: {
-			control: "boolean",
-			description: "Whether text should wrap or truncate with ellipsis",
-			defaultValue: false
+		argTypes: {
+			interactive: {
+				control: "boolean",
+				description: "Whether the DataFrame is editable",
+				defaultValue: true
+			},
+			show_label: {
+				control: "boolean",
+				description: "Whether to show the label",
+				defaultValue: true
+			},
+			label: {
+				control: "text",
+				description: "Label for the DataFrame",
+				defaultValue: "DataFrame"
+			},
+			max_height: {
+				control: "number",
+				description: "Maximum height in pixels",
+				defaultValue: 500
+			},
+			show_search: {
+				control: "select",
+				options: ["none", "search", "filter"],
+				description: "Type of search/filter to show",
+				defaultValue: "none"
+			},
+			show_copy_button: {
+				control: "boolean",
+				description: "Whether to show the copy button",
+				defaultValue: false
+			},
+			show_fullscreen_button: {
+				control: "boolean",
+				description: "Whether to show the fullscreen button",
+				defaultValue: false
+			},
+			show_row_numbers: {
+				control: "boolean",
+				description: "Whether to show row numbers",
+				defaultValue: false
+			},
+			wrap: {
+				control: "boolean",
+				description: "Whether text should wrap or truncate with ellipsis",
+				defaultValue: false
+			}
 		}
-	}}
-/>
-
-<Template let:args>
-	<div class="standalone-container">
-		<StandaloneDataframe {...args} />
-	</div>
-</Template>
+	});
+</script>
 
 <Story
 	name="Basic Standalone"
@@ -96,7 +90,13 @@
 		show_copy_button: true,
 		show_fullscreen_button: true
 	}}
-/>
+>
+	{#snippet template(args)}
+		<div class="standalone-container">
+			<StandaloneDataframe {...args} />
+		</div>
+	{/snippet}
+</Story>
 
 <Story
 	name="Large Dataset Performance"
@@ -124,7 +124,13 @@
 		show_row_numbers: true,
 		column_widths: ["120px", "60px", "100px", "80px", "70px", "100px", "70px"]
 	}}
-/>
+>
+	{#snippet template(args)}
+		<div class="standalone-container">
+			<StandaloneDataframe {...args} />
+		</div>
+	{/snippet}
+</Story>
 
 <Story
 	name="Styled with Custom Colors"
@@ -165,4 +171,10 @@
 		max_height: 250,
 		show_row_numbers: true
 	}}
-/>
+>
+	{#snippet template(args)}
+		<div class="standalone-container">
+			<StandaloneDataframe {...args} />
+		</div>
+	{/snippet}
+</Story>

package/dist/shared/Table.svelte.d.ts

@@ -51,7 +51,7 @@ declare const Table: $$__sveltets_2_IsomorphicComponent<{
     styling?: string[][] | null;
     reset_sort_state?: () => void;
 }, {
-    fullscreen: CustomEvent<boolean>;
+    fullscreen: any;
     change: CustomEvent<DataframeValue>;
     input: CustomEvent<undefined>;
     select: CustomEvent<SelectData>;

package/dist/shared/Toolbar.svelte

@@ -78,7 +78,7 @@
 			<IconButton
 				Icon={copied ? Check : Copy}
 				label={copied ? "Copied to clipboard" : "Copy table data"}
-				on:click={handle_copy}
+				onclick={handle_copy}
 			/>
 		{/if}
 		{#if show_fullscreen_button}

package/dist/shared/Toolbar.svelte.d.ts

@@ -20,7 +20,7 @@ declare const Toolbar: $$__sveltets_2_IsomorphicComponent<{
     on_commit_filter: () => void;
     current_search_query?: string | null;
 }, {
-    fullscreen: CustomEvent<boolean>;
+    fullscreen: any;
     search: CustomEvent<string | null>;
 } & {
     [evt: string]: CustomEvent<any>;

package/dist/shared/icons/SortIcon.svelte

@@ -23,7 +23,7 @@
 		label={i18n("dataframe.sort_ascending")}
 		Icon={SortButtonUp}
 		highlight={direction === "asc"}
-		on:click={(event) => {
+		onclick={(event) => {
 			event.stopPropagation();
 			dispatch("sort", "asc");
 		}}
@@ -33,7 +33,7 @@
 		label={i18n("dataframe.sort_descending")}
 		Icon={SortButtonDown}
 		highlight={direction === "desc"}
-		on:click={(event) => {
+		onclick={(event) => {
 			event.stopPropagation();
 			dispatch("sort", "desc");
 		}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.21.2",
+  "version": "0.21.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -13,15 +13,15 @@
     "@types/katex": "^0.16.7",
     "d3-dsv": "^3.0.1",
     "dequal": "^2.0.3",
-    "@gradio/atoms": "^0.20.0",
-    "@gradio/checkbox": "^0.6.0",
-    "@gradio/button": "^0.6.1",
-    "@gradio/client": "^2.0.1",
-    "@gradio/icons": "^0.15.0",
-    "@gradio/statustracker": "^0.12.1",
-    "@gradio/markdown-code": "^0.6.0",
-    "@gradio/upload": "^0.17.3",
-    "@gradio/utils": "^0.11.0"
+    "@gradio/atoms": "^0.20.1",
+    "@gradio/checkbox": "^0.6.1",
+    "@gradio/button": "^0.6.3",
+    "@gradio/client": "^2.0.3",
+    "@gradio/icons": "^0.15.1",
+    "@gradio/markdown-code": "^0.6.1",
+    "@gradio/statustracker": "^0.12.2",
+    "@gradio/upload": "^0.17.4",
+    "@gradio/utils": "^0.11.2"
   },
   "exports": {
     ".": {
@@ -40,8 +40,8 @@
     "svelte": ">=5.0.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.15.1",
-    "@gradio/dataframe-interim": "^0.21.0"
+    "@gradio/dataframe-interim": "^0.21.0",
+    "@gradio/preview": "^0.15.2"
   },
   "repository": {
     "type": "git",

package/shared/Toolbar.svelte

@@ -78,7 +78,7 @@
 			<IconButton
 				Icon={copied ? Check : Copy}
 				label={copied ? "Copied to clipboard" : "Copy table data"}
-				on:click={handle_copy}
+				onclick={handle_copy}
 			/>
 		{/if}
 		{#if show_fullscreen_button}

package/shared/icons/SortIcon.svelte

@@ -23,7 +23,7 @@
 		label={i18n("dataframe.sort_ascending")}
 		Icon={SortButtonUp}
 		highlight={direction === "asc"}
-		on:click={(event) => {
+		onclick={(event) => {
 			event.stopPropagation();
 			dispatch("sort", "asc");
 		}}
@@ -33,7 +33,7 @@
 		label={i18n("dataframe.sort_descending")}
 		Icon={SortButtonDown}
 		highlight={direction === "desc"}
-		on:click={(event) => {
+		onclick={(event) => {
 			event.stopPropagation();
 			dispatch("sort", "desc");
 		}}