@gradio/dataframe 0.18.8 → 0.19.0

package/dist/standalone/default_i18n.js

@@ -0,0 +1,32 @@
+export const default_i18n = {
+    "dataframe.add_row_above": "Add row above",
+    "dataframe.add_row_below": "Add row below",
+    "dataframe.delete_row": "Delete row",
+    "dataframe.add_column_left": "Add column left",
+    "dataframe.add_column_right": "Add column right",
+    "dataframe.delete_column": "Delete column",
+    "dataframe.sort_asc": "Sort ascending",
+    "dataframe.sort_desc": "Sort descending",
+    "dataframe.sort_ascending": "Sort ascending",
+    "dataframe.sort_descending": "Sort descending",
+    "dataframe.clear_sort": "Clear sort",
+    "dataframe.filter": "Filter",
+    "dataframe.clear_filter": "Clear filter",
+    "dataframe.copy": "Copy",
+    "dataframe.paste": "Paste",
+    "dataframe.cut": "Cut",
+    "dataframe.select_all": "Select all",
+    "dataframe.fullscreen": "Fullscreen",
+    "dataframe.exit_fullscreen": "Exit fullscreen",
+    "dataframe.search": "Search",
+    "dataframe.export": "Export",
+    "dataframe.import": "Import",
+    "dataframe.edit": "Edit",
+    "dataframe.save": "Save",
+    "dataframe.cancel": "Cancel",
+    "dataframe.confirm": "Confirm",
+    "dataframe.reset": "Reset",
+    "dataframe.clear": "Clear",
+    "dataframe.undo": "Undo",
+    "dataframe.redo": "Redo"
+};

package/dist/standalone/stubs/Upload.svelte

@@ -0,0 +1,18 @@
+<script>export const aria_label = "";
+export const root = "";
+export const upload = null;
+export const stream_handler = null;
+</script>
+
+<div>
+	<slot />
+</div>
+
+<style>
+	div {
+		width: 100%;
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--table-radius);
+		overflow: hidden;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        aria_label?: "";
+        root?: "";
+        upload?: any;
+        stream_handler?: 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;
+}
+export {};

package/dist/standalone/stubs/upload.d.ts

@@ -0,0 +1 @@
+export { default as Upload } from "./Upload.svelte";

package/dist/standalone/stubs/upload.js

@@ -0,0 +1 @@
+export { default as Upload } from "./Upload.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.18.8",
+  "version": "0.19.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -14,24 +14,21 @@
     "@types/katex": "^0.16.0",
     "d3-dsv": "^3.0.1",
     "dequal": "^2.0.2",
-    "dompurify": "^3.0.3",
-    "katex": "^0.16.7",
-    "marked": "^12.0.0",
-    "@gradio/button": "^0.5.11",
     "@gradio/atoms": "^0.16.5",
+    "@gradio/button": "^0.5.11",
     "@gradio/checkbox": "^0.4.28",
-    "@gradio/client": "^1.17.1",
-    "@gradio/icons": "^0.13.0",
+    "@gradio/icons": "^0.13.1",
     "@gradio/markdown-code": "^0.5.0",
     "@gradio/statustracker": "^0.10.17",
-    "@gradio/upload": "^0.16.15",
+    "@gradio/upload": "^0.16.16",
+    "@gradio/client": "^1.17.1",
     "@gradio/utils": "^0.10.2"
   },
   "exports": {
     ".": {
       "gradio": "./Index.svelte",
-      "svelte": "./dist/Index.svelte",
-      "types": "./dist/Index.svelte.d.ts"
+      "svelte": "./dist/standalone/Index.svelte",
+      "types": "./dist/standalone/Index.svelte.d.ts"
     },
     "./example": {
       "gradio": "./Example.svelte",
@@ -41,7 +38,7 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": ">=4.0.0 <6.0.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.14.0"

package/shared/CellMenu.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from "svelte";
 	import CellMenuIcons from "./CellMenuIcons.svelte";
 	import FilterMenu from "./FilterMenu.svelte";
-	import type { I18nFormatter } from "js/utils/src";
+	import type { I18nFormatter } from "@gradio/utils";
 	import type {
 		SortDirection,
 		FilterDatatype

package/shared/FilterMenu.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import { Check } from "@gradio/icons";
-	import DropdownArrow from "../../icons/src/DropdownArrow.svelte";
+	import { Check, DropdownArrow } from "@gradio/icons";
 	import type { FilterDatatype } from "./context/dataframe_context";
 
 	export let on_filter: (

package/shared/Table.svelte

@@ -20,7 +20,7 @@
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import { type Client } from "@gradio/client";
 	import VirtualTable from "./VirtualTable.svelte";
-	import type { Headers, DataframeValue, Datatype } from "./utils";
+	import type { Headers, DataframeValue, Datatype } from "./utils/utils";
 	import CellMenu from "./CellMenu.svelte";
 	import Toolbar from "./Toolbar.svelte";
 	import type { CellCoordinate } from "./types";
@@ -30,14 +30,14 @@
 		get_current_indices,
 		handle_click_outside as handle_click_outside_util,
 		calculate_selection_positions
-	} from "./selection_utils";
+	} from "./utils/selection_utils";
 	import {
 		copy_table_data,
 		get_max,
 		handle_file_upload
 	} from "./utils/table_utils";
 	import { make_headers, process_data } from "./utils/data_processing";
-	import { cast_value_to_type } from "./utils";
+	import { cast_value_to_type } from "./utils/utils";
 	import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
 	import {
 		create_drag_handlers,
@@ -500,6 +500,10 @@
 			return;
 		}
 
+		if (!parent) {
+			return;
+		}
+
 		last_width_data_length = data.length;
 		last_width_column_count = column_count;
 
@@ -834,7 +838,6 @@
 		class="table-wrap"
 		class:dragging={is_dragging}
 		class:no-wrap={!wrap}
-		style="height:{table_height}px;"
 		class:menu-open={active_cell_menu || active_header_menu}
 		on:keydown={(e) => handle_keydown(e, df_ctx)}
 		on:mousemove={handle_mouse_move}
@@ -948,11 +951,9 @@
 						active_header_menu !== null}
 					bind:viewport
 					bind:show_scroll_button
+					{label}
 					on:scroll_top={(_) => {}}
 				>
-					{#if label && label.length !== 0}
-						<caption class="sr-only">{label}</caption>
-					{/if}
 					<tr slot="thead">
 						{#if show_row_numbers}
 							<RowNumber is_header={true} />
@@ -1211,6 +1212,7 @@
 	.header-row .label {
 		flex: 1 1 auto;
 		margin-right: auto;
+		font-family: var(--font-sans);
 	}
 
 	.header-row .label p {

package/shared/TableCell.svelte

@@ -2,8 +2,8 @@
 	import EditableCell from "./EditableCell.svelte";
 	import CellMenuButton from "./CellMenuButton.svelte";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
-	import type { Datatype } from "./utils";
-	import { is_cell_in_selection } from "./selection_utils";
+	import type { Datatype } from "./utils/utils";
+	import { is_cell_in_selection } from "./utils/selection_utils";
 
 	export let value: string | number;
 	export let index: number;

package/shared/Toolbar.svelte

@@ -99,6 +99,7 @@
 		align-items: center;
 		gap: var(--size-2);
 		flex: 0 0 auto;
+		font-family: var(--font-sans);
 	}
 
 	.toolbar-buttons {

package/shared/VirtualTable.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onMount, tick, createEventDispatcher } from "svelte";
-	import { _ } from "svelte-i18n";
 
 	export let items: any[][] = [];
 
@@ -13,6 +12,7 @@
 	export let disable_scroll = false;
 	export let show_scroll_button = false;
 	export let viewport: HTMLTableElement;
+	export let label: string | null = null;
 
 	const dispatch = createEventDispatcher<{
 		scroll_top: number;
@@ -47,6 +47,10 @@
 	}
 
 	async function refresh_height_map(): Promise<void> {
+		if (!viewport) {
+			return;
+		}
+
 		if (sortedItems.length < start) {
 			await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
 		}
@@ -212,6 +216,9 @@
 			on:scroll={refresh_height_map}
 			style="height: {height}; --bw-svt-p-top: {top}px; --bw-svt-p-bottom: {bottom}px; --bw-svt-head-height: {head_height}px; --bw-svt-foot-height: {foot_height}px; --bw-svt-avg-row-height: {average_height}px; --max-height: {max_height}px"
 		>
+			{#if label && label.length !== 0}
+				<caption class="sr-only">{label}</caption>
+			{/if}
 			<thead class="thead" bind:offsetHeight={head_height}>
 				<slot name="thead" />
 			</thead>
@@ -219,7 +226,9 @@
 				{#if visible.length && visible[0].data.length}
 					{#each visible as item (item.data[0].id)}
 						<slot name="tbody" item={item.data} index={item.index}>
-							Missing Table Row
+							<tr>
+								<td>Missing Table Row</td>
+							</tr>
 						</slot>
 					{/each}
 				{/if}

package/shared/context/dataframe_context.ts

@@ -8,7 +8,7 @@ import {
 	get_next_cell_coordinates,
 	get_range_selection,
 	move_cursor
-} from "../selection_utils";
+} from "../utils/selection_utils";
 
 export const DATAFRAME_KEY = Symbol("dataframe");
 

package/shared/utils/data_processing.ts

@@ -1,4 +1,4 @@
-import type { Headers, HeadersWithIDs } from "../utils";
+import type { Headers, HeadersWithIDs } from "./utils";
 
 export function make_headers(
 	_head: Headers,

package/shared/utils/drag_utils.ts

@@ -1,5 +1,5 @@
 import type { CellCoordinate } from "../types";
-import { get_range_selection } from "../selection_utils";
+import { get_range_selection } from "../utils/selection_utils";
 
 export type DragState = {
 	is_dragging: boolean;

package/shared/utils/keyboard_utils.ts

@@ -1,5 +1,5 @@
 import { dequal } from "dequal/lite";
-import { handle_delete_key } from "../selection_utils";
+import { handle_delete_key } from "../utils/selection_utils";
 import type { DataFrameContext } from "../context/dataframe_context";
 import { tick } from "svelte";
 import { get } from "svelte/store";
@@ -15,6 +15,9 @@ async function save_cell_value(
 
 	const old_value = ctx.data[row][col].value;
 	ctx.data[row][col].value = input_value;
+	if (ctx.data[row][col].display_value !== undefined) {
+		ctx.data[row][col].display_value = input_value;
+	}
 
 	if (old_value !== input_value && ctx.dispatch) {
 		ctx.dispatch("change", {
@@ -243,10 +246,7 @@ function handle_default_key(
 
 	const editing = state.ui_state.editing;
 
-	if (
-		(!editing || (editing && dequal(editing, [i, j]))) &&
-		event.key.length === 1
-	) {
+	if (event.key.length === 1 && (!editing || !dequal(editing, [i, j]))) {
 		ctx.actions.set_editing([i, j]);
 		return true;
 	}

package/shared/{selection_utils.ts → utils/selection_utils.ts}

@@ -1,4 +1,4 @@
-import type { CellCoordinate } from "./types";
+import type { CellCoordinate } from "./../types";
 
 export type CellData = { id: string; value: string | number };
 

package/shared/{utils.ts → utils/utils.ts}

@@ -1,6 +1,15 @@
 export type Headers = string[];
 export type Data = (string | number)[][];
-export type Datatype = "str" | "markdown" | "html" | "number" | "bool" | "date";
+
+export type Datatype =
+	| "str"
+	| "number"
+	| "bool"
+	| "date"
+	| "markdown"
+	| "html"
+	| "image";
+
 export type Metadata = {
 	[key: string]: string[][] | null;
 } | null;
@@ -8,7 +17,7 @@ export type HeadersWithIDs = { value: string; id: string }[];
 export type DataframeValue = {
 	data: Data;
 	headers: Headers;
-	metadata: Metadata;
+	metadata?: Metadata;
 };
 
 /**