@gradio/dataframe 0.20.1 → 0.21.0-dev.3

package/dist/standalone/Index.svelte.d.ts

@@ -1,45 +1,45 @@
-import { SvelteComponent } from "svelte";
 import type { Datatype, DataframeValue } from "../shared/utils/utils";
 import type { I18nFormatter } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        i18n?: I18nFormatter | undefined;
-        value?: DataframeValue;
-        datatype?: Datatype | Datatype[];
-        interactive?: boolean;
-        show_row_numbers?: boolean;
-        max_height?: number;
-        show_search?: "none" | "search" | "filter";
-        show_copy_button?: boolean;
-        show_fullscreen_button?: boolean;
-        wrap?: boolean;
-        line_breaks?: boolean;
-        column_widths?: string[];
-        max_chars?: number | undefined;
-        pinned_columns?: number;
-        static_columns?: (string | number)[];
-        fullscreen?: boolean;
-        label?: string | null;
-        show_label?: boolean;
-        latex_delimiters?: any[];
-        col_count?: [number, "fixed" | "dynamic"] | undefined;
-        row_count?: [number, "fixed" | "dynamic"] | undefined;
+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;
     };
-    events: {
-        blur: CustomEvent<any>;
-        keydown: CustomEvent<any>;
-        input: CustomEvent<undefined>;
-        select: CustomEvent<import("@gradio/utils").SelectData>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Index: $$__sveltets_2_IsomorphicComponent<{
+    i18n?: I18nFormatter | undefined;
+    value?: DataframeValue;
+    datatype?: Datatype | Datatype[];
+    interactive?: boolean;
+    show_row_numbers?: boolean;
+    max_height?: number;
+    show_search?: "none" | "search" | "filter";
+    wrap?: boolean;
+    line_breaks?: boolean;
+    column_widths?: string[];
+    max_chars?: number | undefined;
+    pinned_columns?: number;
+    static_columns?: (string | number)[];
+    fullscreen?: boolean;
+    label?: string | null;
+    show_label?: boolean;
+    latex_delimiters?: any[];
+    col_count?: [number, "fixed" | "dynamic"] | undefined;
+    row_count?: [number, "fixed" | "dynamic"] | undefined;
+}, {
+    blur: CustomEvent<any>;
+    keydown: CustomEvent<any>;
+    input: CustomEvent<undefined>;
+    select: CustomEvent<import("@gradio/utils").SelectData>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Index = InstanceType<typeof Index>;
+export default Index;

package/dist/standalone/stubs/Upload.svelte

@@ -1,7 +1,8 @@
-<script>export const aria_label = "";
-export const root = "";
-export const upload = null;
-export const stream_handler = null;
+<script lang="ts">
+	export const aria_label = "";
+	export const root = "";
+	export const upload: any = null;
+	export const stream_handler: any = null;
 </script>
 
 <div>

package/dist/standalone/stubs/Upload.svelte.d.ts

@@ -1,27 +1,37 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        aria_label?: "";
-        root?: "";
-        upload?: any;
-        stream_handler?: any;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type UploadProps = typeof __propDef.props;
-export type UploadEvents = typeof __propDef.events;
-export type UploadSlots = typeof __propDef.slots;
-export default class Upload extends SvelteComponent<UploadProps, UploadEvents, UploadSlots> {
-    get aria_label(): "";
-    get root(): "";
-    get upload(): any;
-    get stream_handler(): any;
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Upload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    aria_label?: "";
+    root?: "";
+    upload?: any;
+    stream_handler?: any;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {
+    aria_label: "";
+    root: "";
+    upload: any;
+    stream_handler: any;
+}, string>;
+type Upload = InstanceType<typeof Upload>;
+export default Upload;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.20.1",
+  "version": "0.21.0-dev.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -9,19 +9,20 @@
   "main_changeset": true,
   "main": "./Index.svelte",
   "dependencies": {
-    "@types/d3-dsv": "^3.0.0",
-    "@types/katex": "^0.16.0",
+    "@types/d3-dsv": "^3.0.7",
+    "@types/katex": "^0.16.7",
     "d3-dsv": "^3.0.1",
-    "dequal": "^2.0.2",
-    "@gradio/atoms": "^0.18.1",
-    "@gradio/button": "^0.5.13",
-    "@gradio/checkbox": "^0.4.30",
+    "dequal": "^2.0.3",
+    "@gradio/atoms": "^0.19.0-dev.1",
+    "@gradio/checkbox": "^0.5.0-dev.1",
+    "@gradio/button": "^0.5.14-dev.2",
+    "@gradio/icons": "^0.15.0-dev.0",
+    "@gradio/client": "^2.0.0-dev.2",
     "@gradio/markdown-code": "^0.5.2",
-    "@gradio/icons": "^0.14.0",
-    "@gradio/client": "^1.19.0",
-    "@gradio/statustracker": "^0.11.1",
-    "@gradio/upload": "^0.17.1",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/statustracker": "^0.12.0-dev.1",
+    "@gradio/upload": "^0.17.2-dev.2",
+    "@gradio/utils": "^0.10.3-dev.0",
+    "@gradio/dataframe-interim": "^0.21.0-dev.3"
   },
   "exports": {
     ".": {
@@ -37,10 +38,10 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "svelte": ">=4.0.0 <6.0.0"
+    "svelte": ">=5.0.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.14.0"
+    "@gradio/preview": "^0.15.0-dev.0"
   },
   "repository": {
     "type": "git",

package/shared/Table.svelte

@@ -76,8 +76,7 @@
 	export let show_row_numbers = false;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
-	export let show_fullscreen_button = false;
-	export let show_copy_button = false;
+	export let buttons: string[] | null = null;
 	export let value_is_output = false;
 	export let max_chars: number | undefined = undefined;
 	export let show_search: "none" | "search" | "filter" = "none";
@@ -86,8 +85,9 @@
 	export let fullscreen = false;
 
 	const df_ctx = create_dataframe_context({
-		show_fullscreen_button,
-		show_copy_button,
+		show_fullscreen_button:
+			buttons === null ? true : buttons.includes("fullscreen"),
+		show_copy_button: buttons === null ? true : buttons.includes("copy"),
 		show_search,
 		show_row_numbers,
 		editable,
@@ -758,7 +758,7 @@
 			if (new_row[col]) {
 				new_row[col] = {
 					...new_row[col],
-					value: checked.toString()
+					value: checked
 				};
 			}
 			return new_row;
@@ -823,7 +823,7 @@
 <svelte:window on:resize={() => set_cell_widths()} />
 
 <div class="table-container">
-	{#if (label && label.length !== 0 && show_label) || show_fullscreen_button || show_copy_button || show_search !== "none"}
+	{#if (label && label.length !== 0 && show_label) || (buttons === null ? true : buttons.includes("fullscreen")) || (buttons === null ? true : buttons.includes("copy")) || show_search !== "none"}
 		<div class="header-row">
 			{#if label && label.length !== 0 && show_label}
 				<div class="label">
@@ -831,10 +831,12 @@
 				</div>
 			{/if}
 			<Toolbar
-				{show_fullscreen_button}
+				show_fullscreen_button={buttons === null
+					? true
+					: buttons.includes("fullscreen")}
 				{fullscreen}
 				on_copy={async () => await copy_table_data(data, null)}
-				{show_copy_button}
+				show_copy_button={buttons === null ? true : buttons.includes("copy")}
 				{show_search}
 				on:search={(e) => df_actions.handle_search(e.detail)}
 				on:fullscreen
@@ -1058,7 +1060,7 @@
 	<CellMenu
 		x={active_cell_menu?.x ?? active_header_menu?.x ?? 0}
 		y={active_cell_menu?.y ?? active_header_menu?.y ?? 0}
-		row={active_header_menu ? -1 : active_cell_menu?.row ?? 0}
+		row={active_header_menu ? -1 : (active_cell_menu?.row ?? 0)}
 		{col_count}
 		{row_count}
 		on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
@@ -1095,9 +1097,9 @@
 				}
 			: undefined}
 		sort_direction={active_header_menu
-			? $df_state.sort_state.sort_columns.find(
+			? ($df_state.sort_state.sort_columns.find(
 					(item) => item.col === (active_header_menu?.col ?? -1)
-				)?.direction ?? null
+				)?.direction ?? null)
 			: null}
 		sort_priority={active_header_menu
 			? $df_state.sort_state.sort_columns.findIndex(

package/shared/VirtualTable.svelte

@@ -42,7 +42,7 @@
 
 	$: {
 		if (mounted && viewport_height && viewport.offsetParent) {
-			sortedItems, raf(refresh_height_map);
+			(sortedItems, raf(refresh_height_map));
 		}
 	}
 

package/standalone/Index.svelte

@@ -24,8 +24,6 @@
 	export let show_row_numbers = false;
 	export let max_height = 500;
 	export let show_search: "none" | "search" | "filter" = "none";
-	export let show_copy_button = false;
-	export let show_fullscreen_button = false;
 	export let wrap = false;
 	export let line_breaks = true;
 	export let column_widths: string[] = [];
@@ -100,8 +98,7 @@
 		{show_row_numbers}
 		{max_height}
 		{show_search}
-		{show_copy_button}
-		{show_fullscreen_button}
+		buttons={null}
 		{wrap}
 		{line_breaks}
 		{column_widths}
@@ -304,8 +301,8 @@
 		--df-body-text-color-subdued: var(--df-neutral-400, #9ca3af);
 		--df-table-text-color: var(--df-body-text-color, #111827);
 		--df-shadow-drop: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-		--df-shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1),
-			0 1px 2px -1px rgb(0 0 0 / 0.1);
+		--df-shadow-drop-lg:
+			0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 		--df-shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
 		--df-shadow-spread: 3px;
 
@@ -313,8 +310,8 @@
 		--df-bw-svt-p-bottom: 0px;
 
 		--df-border-color-secondary: var(--df-border-color-accent, #fdba74);
-		--df-shadow-md: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		--df-shadow-md:
+			0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 
 		--df-checkbox-border-radius: var(--df-radius-sm, 4px);
 		--df-checkbox-shadow: none;
@@ -356,8 +353,8 @@
 		--df-input-placeholder-color: var(--neutral-400, #9ca3af);
 		--df-input-radius: var(--df-radius-sm, 4px);
 		--df-input-shadow: none;
-		--df-input-shadow-focus: 0 0 0 var(--shadow-spread, 3px)
-				var(--secondary-50, #eff6ff),
+		--df-input-shadow-focus:
+			0 0 0 var(--shadow-spread, 3px) var(--secondary-50, #eff6ff),
 			var(--shadow-inset, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset);
 
 		--table-radius: var(--gr-df-table-radius, var(--df-table-radius, 4px));
@@ -543,16 +540,17 @@
 		--line-md: var(--df-line-md, 1.5);
 		--line-lg: var(--df-line-lg, 1.75);
 
-		--shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-		--shadow-sm: 0 4px 6px -2px rgba(0, 0, 0, 0.1),
-			0 2px 4px -2px rgba(0, 0, 0, 0.06);
-		--shadow-md: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
-		--shadow-lg: 0 20px 24px -4px rgba(0, 0, 0, 0.1),
-			0 8px 8px -4px rgba(0, 0, 0, 0.04);
+		--shadow-xs:
+			0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+		--shadow-sm:
+			0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
+		--shadow-md:
+			0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		--shadow-lg:
+			0 20px 24px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04);
 		--shadow-drop: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-		--shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1),
-			0 1px 2px -1px rgb(0 0 0 / 0.1);
+		--shadow-drop-lg:
+			0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 		--shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
 		--shadow-spread: 3px;
 	}