@gradio/dataframe 0.22.0 → 0.23.0

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

@@ -1,26 +1,13 @@
 import type { SelectData } from "@gradio/utils";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import { type Client } from "@gradio/client";
-import type { Headers, DataframeValue, Datatype, EditData } from "./utils/utils";
+import type { Datatype, DataframeValue, EditData } from "./utils/utils";
 import type { CellValue } from "./types";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Table: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     datatype: Datatype | Datatype[];
     label?: string | null;
     show_label?: boolean;
-    headers?: Headers;
+    headers?: (string | null)[];
     values?: CellValue[][];
     col_count: [number, "fixed" | "dynamic"];
     row_count: [number, "fixed" | "dynamic"];
@@ -49,18 +36,13 @@ declare const Table: $$__sveltets_2_IsomorphicComponent<{
     fullscreen?: boolean;
     display_value?: string[][] | null;
     styling?: string[][] | null;
-    reset_sort_state?: () => void;
-}, {
-    fullscreen: any;
-    change: CustomEvent<DataframeValue>;
-    input: CustomEvent<undefined>;
-    select: CustomEvent<SelectData>;
-    search: CustomEvent<string | null>;
-    edit: CustomEvent<EditData>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    reset_sort_state: () => void;
-}, string>;
-type Table = InstanceType<typeof Table>;
+    onchange?: (detail: DataframeValue) => void;
+    oninput?: () => void;
+    onselect?: (detail: SelectData) => void;
+    onedit?: (detail: EditData) => void;
+    onsearch?: (detail: string | null) => void;
+    onfullscreen?: () => void;
+};
+declare const Table: import("svelte").Component<$$ComponentProps, {}, "headers" | "values" | "value_is_output">;
+type Table = ReturnType<typeof Table>;
 export default Table;

package/dist/shared/Toolbar.svelte

@@ -1,25 +1,33 @@
 <script lang="ts">
 	import { Copy, Check } from "@gradio/icons";
 	import { FullscreenButton } from "@gradio/atoms";
-	import { onDestroy } from "svelte";
-	import { createEventDispatcher } from "svelte";
 	import { IconButton } from "@gradio/atoms";
 
-	export let show_fullscreen_button = false;
-	export let show_copy_button = false;
-	export let show_search: "none" | "search" | "filter" = "none";
-	export let fullscreen = false;
-	export let on_copy: () => Promise<void>;
-	export let on_commit_filter: () => void;
-
-	const dispatch = createEventDispatcher<{
-		search: string | null;
-	}>();
-
-	let copied = false;
+	let {
+		show_fullscreen_button = false,
+		show_copy_button = false,
+		show_search = "none",
+		fullscreen = false,
+		on_copy,
+		on_commit_filter,
+		current_search_query = null,
+		onsearch,
+		onfullscreen
+	}: {
+		show_fullscreen_button?: boolean;
+		show_copy_button?: boolean;
+		show_search?: "none" | "search" | "filter";
+		fullscreen?: boolean;
+		on_copy: () => Promise<void>;
+		on_commit_filter: () => void;
+		current_search_query?: string | null;
+		onsearch?: (query: string | null) => void;
+		onfullscreen?: () => void;
+	} = $props();
+
+	let copied = $state(false);
 	let timer: ReturnType<typeof setTimeout>;
-	export let current_search_query: string | null = null;
-	let input_value = "";
+	let input_value = $state("");
 
 	function handle_search_input(e: Event): void {
 		const target = e.target as HTMLTextAreaElement;
@@ -27,7 +35,7 @@
 		const new_query = input_value || null;
 		if (current_search_query !== new_query) {
 			current_search_query = new_query;
-			dispatch("search", current_search_query);
+			onsearch?.(current_search_query);
 		}
 	}
 
@@ -44,8 +52,10 @@
 		copy_feedback();
 	}
 
-	onDestroy(() => {
-		if (timer) clearTimeout(timer);
+	$effect(() => {
+		return () => {
+			if (timer) clearTimeout(timer);
+		};
 	});
 </script>
 
@@ -56,7 +66,7 @@
 				<input
 					type="text"
 					value={current_search_query || ""}
-					on:input={handle_search_input}
+					oninput={handle_search_input}
 					placeholder={show_search === "filter" ? "Filter..." : "Search..."}
 					class="search-input"
 					class:filter-mode={show_search === "filter"}
@@ -65,7 +75,7 @@
 				{#if current_search_query && show_search === "filter"}
 					<button
 						class="toolbar-button check-button"
-						on:click={on_commit_filter}
+						onclick={on_commit_filter}
 						aria-label="Apply filter and update dataframe values"
 						title="Apply filter and update dataframe values"
 					>
@@ -82,7 +92,7 @@
 			/>
 		{/if}
 		{#if show_fullscreen_button}
-			<FullscreenButton {fullscreen} on:fullscreen />
+			<FullscreenButton {fullscreen} onclick={(_fs) => onfullscreen?.()} />
 		{/if}
 	</div>
 </div>

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

@@ -1,17 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toolbar: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     show_fullscreen_button?: boolean;
     show_copy_button?: boolean;
     show_search?: "none" | "search" | "filter";
@@ -19,11 +6,9 @@ declare const Toolbar: $$__sveltets_2_IsomorphicComponent<{
     on_copy: () => Promise<void>;
     on_commit_filter: () => void;
     current_search_query?: string | null;
-}, {
-    fullscreen: any;
-    search: CustomEvent<string | null>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toolbar = InstanceType<typeof Toolbar>;
+    onsearch?: (query: string | null) => void;
+    onfullscreen?: () => void;
+};
+declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
 export default Toolbar;

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

@@ -0,0 +1,20 @@
+/**
+ * measures header cell positions/widths and provides inline styles
+ * for absolutely-positioned body cells to match.
+ */
+export declare function create_column_measurement(opts: {
+    header_row_el: () => HTMLTableRowElement | undefined;
+    header_table_el: () => HTMLTableElement | undefined;
+    resolved_headers: () => string[];
+    row_data: () => any[];
+    show_row_numbers: () => boolean;
+    column_widths: () => string[];
+    on_resize?: () => void;
+}): {
+    readonly col_widths: number[];
+    readonly col_lefts: number[];
+    readonly total_header_width: number;
+    readonly header_height: number;
+    readonly row_num_width: number;
+    get_col_style: (index: number) => string;
+};

package/dist/shared/column_measurement.svelte.js

@@ -0,0 +1,79 @@
+/**
+ * measures header cell positions/widths and provides inline styles
+ * for absolutely-positioned body cells to match.
+ */
+export function create_column_measurement(opts) {
+    let col_widths = $state([]);
+    let total_header_width = $state(0);
+    let header_height = $state(0);
+    // use offsets (not just widths) avoids accumulated subpixel rounding errors
+    let col_lefts = $state([]);
+    function measure() {
+        const current_row_el = opts.header_row_el();
+        const current_table_el = opts.header_table_el();
+        if (!current_row_el)
+            return;
+        const cells = current_row_el.querySelectorAll(".header-cell");
+        const table_rect = current_table_el?.getBoundingClientRect();
+        const table_left = table_rect?.left ?? 0;
+        col_lefts = Array.from(cells).map((c) => c.getBoundingClientRect().left - table_left);
+        col_widths = Array.from(cells).map((c) => c.getBoundingClientRect().width);
+        if (current_table_el) {
+            total_header_width = table_rect?.width ?? 0;
+            header_height = table_rect?.height ?? 0;
+        }
+        opts.on_resize?.();
+    }
+    $effect(() => {
+        const table_el = opts.header_table_el();
+        const row_el = opts.header_row_el();
+        if (!table_el || !row_el)
+            return;
+        // re-run when columns change so we observe new cells
+        opts.resolved_headers();
+        const ro = new ResizeObserver(measure);
+        ro.observe(table_el);
+        // observe individual header cells so content-driven column
+        // width changes (editing, data updates) trigger a re-measure
+        // even when the overall table dimensions stay the same
+        const cells = row_el.querySelectorAll(".header-cell");
+        cells.forEach((cell) => ro.observe(cell));
+        return () => ro.disconnect();
+    });
+    let row_num_width = $derived.by(() => {
+        if (!opts.show_row_numbers())
+            return 0;
+        const row_el = opts.header_row_el();
+        if (!row_el)
+            return 0;
+        const el = row_el.querySelector(".row-number-header");
+        return el?.getBoundingClientRect().width ?? 48;
+    });
+    function get_col_style(index) {
+        if (col_widths[index] !== undefined) {
+            return `width: ${col_widths[index]}px; flex: 0 0 ${col_widths[index]}px;`;
+        }
+        const user_widths = opts.column_widths();
+        if (user_widths[index])
+            return `width: ${user_widths[index]};`;
+        return "width: 150px;";
+    }
+    return {
+        get col_widths() {
+            return col_widths;
+        },
+        get col_lefts() {
+            return col_lefts;
+        },
+        get total_header_width() {
+            return total_header_width;
+        },
+        get header_height() {
+            return header_height;
+        },
+        get row_num_width() {
+            return row_num_width;
+        },
+        get_col_style
+    };
+}

package/dist/shared/icons/FilterIcon.svelte

@@ -1,12 +1,20 @@
-<script lang="ts">
-</script>
-
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" width="20" height="20">
 	<path
-		d="M4 4h16v2.67l-6.67 6.67v8L9.33 19v-5.66L2.67 6.67V4h1.33z"
+		d="M5 5H19"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+	/>
+	<path
+		d="M8 9H16"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+	/>
+	<path
+		d="M11 13H13"
 		stroke="currentColor"
 		stroke-width="2"
 		stroke-linecap="round"
-		stroke-linejoin="round"
 	/>
 </svg>

package/dist/shared/icons/FilterIcon.svelte.d.ts

@@ -1,5 +1,18 @@
+export default FilterIcon;
+type FilterIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FilterIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -11,8 +24,3 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FilterIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FilterIcon = InstanceType<typeof FilterIcon>;
-export default FilterIcon;

package/dist/shared/icons/Padlock.svelte

@@ -1,8 +1,12 @@
+<script lang="ts">
+	let { size = 16 } = $props();
+</script>
+
 <div class="wrapper" aria-label="Static column">
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="13"
-		height="13"
+		width={size}
+		height={size}
 		viewBox="0 0 24 24"
 		fill="none"
 		stroke="currentColor"

package/dist/shared/icons/Padlock.svelte.d.ts

@@ -1,26 +1,5 @@
+declare const Padlock: import("svelte").Component<{
+    size?: number;
+}, {}, "">;
+type Padlock = ReturnType<typeof Padlock>;
 export default Padlock;
-type Padlock = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Padlock: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/shared/icons/SelectionButtons.svelte

@@ -1,25 +1,36 @@
 <script lang="ts">
-	export let position: "column" | "row";
-	export let coords: [number, number];
-	export let on_click: (() => void) | null = null;
+	let {
+		position,
+		coords,
+		on_click = null
+	}: {
+		position: "column" | "row";
+		coords: [number, number];
+		on_click?: (() => void) | null;
+	} = $props();
 
-	$: is_first_position =
-		position === "column" ? coords[0] === 0 : coords[1] === 0;
-	$: direction =
+	let is_first_position = $derived(
+		position === "column" ? coords[0] === 0 : coords[1] === 0
+	);
+	let direction = $derived(
 		position === "column"
 			? is_first_position
 				? "down"
 				: "up"
 			: is_first_position
 				? "right"
-				: "left";
+				: "left"
+	);
 </script>
 
 <button
 	class="selection-button selection-button-{position} {is_first_position
 		? `move-${direction}`
 		: ''}"
-	on:click|stopPropagation={() => on_click && on_click()}
+	onclick={(e: MouseEvent) => {
+		e.stopPropagation();
+		on_click && on_click();
+	}}
 	aria-label={`Select ${position}`}
 >
 	<span class={direction}>
@@ -50,6 +61,8 @@
 
 	.selection-button-row {
 		left: calc(var(--size-2-5) * -1);
+		top: 50%;
+		transform: translateY(-50%);
 		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 	}
 
@@ -62,6 +75,8 @@
 	.move-right {
 		left: auto;
 		right: calc(var(--size-2-5) * -1);
+		top: 50%;
+		transform: translateY(-50%);
 		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 	}
 

package/dist/shared/icons/SelectionButtons.svelte.d.ts

@@ -1,22 +1,8 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SelectionButtons: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     position: "column" | "row";
     coords: [number, number];
     on_click?: (() => void) | null;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SelectionButtons = InstanceType<typeof SelectionButtons>;
+};
+declare const SelectionButtons: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectionButtons = ReturnType<typeof SelectionButtons>;
 export default SelectionButtons;

package/dist/shared/icons/SortButtonDown.svelte

@@ -1,14 +1,25 @@
+<script lang="ts">
+	let { size = 16 } = $props();
+</script>
+
 <svg
-	viewBox="0 0 24 24"
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
-	focusable="false"
 >
 	<path
-		d="M7 10l5 5 5-5"
+		d="M4 8L8 12L12 8"
 		stroke="currentColor"
-		stroke-width="2"
+		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	/>
+	<path
+		d="M8 12V4"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+	/>
 </svg>

package/dist/shared/icons/SortButtonDown.svelte.d.ts

@@ -1,26 +1,5 @@
+declare const SortButtonDown: import("svelte").Component<{
+    size?: number;
+}, {}, "">;
+type SortButtonDown = ReturnType<typeof SortButtonDown>;
 export default SortButtonDown;
-type SortButtonDown = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const SortButtonDown: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/shared/icons/SortButtonUp.svelte

@@ -1,15 +1,25 @@
+<script lang="ts">
+	let { size = 16 } = $props();
+</script>
+
 <svg
-	viewBox="0 0 24 24"
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
-	aria-hidden="true"
-	focusable="false"
 >
 	<path
-		d="M7 14l5-5 5 5"
+		d="M4 8L8 4L12 8"
 		stroke="currentColor"
-		stroke-width="2"
+		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	/>
+	<path
+		d="M8 4V12"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+	/>
 </svg>

package/dist/shared/icons/SortButtonUp.svelte.d.ts

@@ -1,26 +1,5 @@
+declare const SortButtonUp: import("svelte").Component<{
+    size?: number;
+}, {}, "">;
+type SortButtonUp = ReturnType<typeof SortButtonUp>;
 export default SortButtonUp;
-type SortButtonUp = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const SortButtonUp: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/shared/icons/SortIcon.svelte

@@ -1,15 +1,21 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import type { I18nFormatter } from "@gradio/utils";
 	import SortButtonUp from "./SortButtonUp.svelte";
 	import SortButtonDown from "./SortButtonDown.svelte";
 	import { IconButton } from "@gradio/atoms";
 	type SortDirection = "asc" | "desc";
-	export let direction: SortDirection | null = null;
-	export let priority: number | null = null;
-	export let i18n: I18nFormatter;
 
-	const dispatch = createEventDispatcher<{ sort: SortDirection }>();
+	let {
+		direction = null,
+		priority = null,
+		i18n,
+		onsort
+	}: {
+		direction?: SortDirection | null;
+		priority?: number | null;
+		i18n: I18nFormatter;
+		onsort?: (direction: SortDirection) => void;
+	} = $props();
 </script>
 
 <div class="sort-icons" role="group" aria-label={i18n("dataframe.sort_column")}>
@@ -25,7 +31,7 @@
 		highlight={direction === "asc"}
 		onclick={(event) => {
 			event.stopPropagation();
-			dispatch("sort", "asc");
+			onsort?.("asc");
 		}}
 	></IconButton>
 	<IconButton
@@ -35,7 +41,7 @@
 		highlight={direction === "desc"}
 		onclick={(event) => {
 			event.stopPropagation();
-			dispatch("sort", "desc");
+			onsort?.("desc");
 		}}
 	></IconButton>
 </div>