@gradio/dataframe 0.18.7 → 0.19.0

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

@@ -1,13 +1,13 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        show_fullscreen_button?: boolean | undefined;
-        show_copy_button?: boolean | undefined;
-        show_search?: ("none" | "search" | "filter") | undefined;
-        fullscreen?: boolean | undefined;
+        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) | undefined;
+        current_search_query?: string | null;
     };
     events: {
         fullscreen: CustomEvent<boolean>;
@@ -16,6 +16,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ToolbarProps = typeof __propDef.props;
 export type ToolbarEvents = typeof __propDef.events;

package/dist/shared/VirtualTable.svelte

@@ -1,5 +1,4 @@
 <script>import { onMount, tick, createEventDispatcher } from "svelte";
-import { _ } from "svelte-i18n";
 export let items = [];
 export let max_height;
 export let actual_height;
@@ -10,6 +9,7 @@ export let selected;
 export let disable_scroll = false;
 export let show_scroll_button = false;
 export let viewport;
+export let label = null;
 const dispatch = createEventDispatcher();
 let height = "100%";
 let average_height = 30;
@@ -24,8 +24,7 @@ let top = 0;
 let viewport_height = 200;
 let visible = [];
 let viewport_box;
-$:
-  viewport_height = viewport_box?.height || 200;
+$: viewport_height = viewport_box?.height || 200;
 const is_browser = typeof window !== "undefined";
 const raf = is_browser ? window.requestAnimationFrame : (cb) => cb();
 $: {
@@ -34,6 +33,9 @@ $: {
   }
 }
 async function refresh_height_map() {
+  if (!viewport) {
+    return;
+  }
   if (sortedItems.length < start) {
     await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
   }
@@ -87,12 +89,10 @@ async function refresh_height_map() {
     actual_height = content_height;
   }
 }
-$:
-  scroll_and_render(selected);
+$: scroll_and_render(selected);
 async function scroll_and_render(n) {
   raf(async () => {
-    if (typeof n !== "number")
-      return;
+    if (typeof n !== "number") return;
     const direction = typeof n !== "number" ? false : is_in_view(n);
     if (direction === true) {
       return;
@@ -141,14 +141,12 @@ export async function scroll_to_index(index, opts, align_end = false) {
   };
   viewport.scrollTo(_opts);
 }
-$:
-  sortedItems = items;
-$:
-  visible = is_browser ? sortedItems.slice(start, end).map((data, i) => {
-    return { index: i + start, data };
-  }) : sortedItems.slice(0, max_height / sortedItems.length * average_height + 1).map((data, i) => {
-    return { index: i + start, data };
-  });
+$: sortedItems = items;
+$: visible = is_browser ? sortedItems.slice(start, end).map((data, i) => {
+  return { index: i + start, data };
+}) : sortedItems.slice(0, max_height / sortedItems.length * average_height + 1).map((data, i) => {
+  return { index: i + start, data };
+});
 onMount(() => {
   rows = contents.children;
   mounted = true;
@@ -165,6 +163,9 @@ onMount(() => {
 			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>
@@ -172,7 +173,9 @@ onMount(() => {
 				{#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/dist/shared/VirtualTable.svelte.d.ts

@@ -1,17 +1,18 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        items?: any[][] | undefined;
+        items?: any[][];
         max_height: number;
         actual_height: number;
         table_scrollbar_width: number;
-        start?: number | undefined;
-        end?: number | undefined;
+        start?: number;
+        end?: number;
         selected: number | false;
-        disable_scroll?: boolean | undefined;
-        show_scroll_button?: boolean | undefined;
+        disable_scroll?: boolean;
+        show_scroll_button?: boolean;
         viewport: HTMLTableElement;
-        scroll_to_index?: ((index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>) | undefined;
+        label?: string | null;
+        scroll_to_index?: (index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>;
     };
     events: {
         scroll_top: CustomEvent<number>;
@@ -26,6 +27,8 @@ declare const __propDef: {
         };
         tfoot: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type VirtualTableProps = typeof __propDef.props;
 export type VirtualTableEvents = typeof __propDef.events;

package/dist/shared/context/dataframe_context.d.ts

@@ -1,5 +1,5 @@
 import { writable } from "svelte/store";
-import { get_next_cell_coordinates, get_range_selection, move_cursor } from "../selection_utils";
+import { get_next_cell_coordinates, get_range_selection, move_cursor } from "../utils/selection_utils";
 export declare const DATAFRAME_KEY: unique symbol;
 export type SortDirection = "asc" | "desc";
 export type FilterDatatype = "string" | "number";

package/dist/shared/context/dataframe_context.js

@@ -3,7 +3,7 @@ import { dequal } from "dequal";
 import { writable, get } from "svelte/store";
 import { sort_table_data } from "../utils/table_utils";
 import { tick } from "svelte";
-import { handle_selection, get_next_cell_coordinates, get_range_selection, move_cursor } from "../selection_utils";
+import { handle_selection, get_next_cell_coordinates, get_range_selection, move_cursor } from "../utils/selection_utils";
 export const DATAFRAME_KEY = Symbol("dataframe");
 function create_actions(state, context) {
     const update_state = (updater) => state.update((s) => ({ ...s, ...updater(s) }));

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

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type FilterIconProps = typeof __propDef.props;
 export type FilterIconEvents = typeof __propDef.events;

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

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/shared/icons/SelectionButtons.svelte

@@ -1,10 +1,8 @@
 <script>export let position;
 export let coords;
 export let on_click = null;
-$:
-  is_first_position = position === "column" ? coords[0] === 0 : coords[1] === 0;
-$:
-  direction = position === "column" ? is_first_position ? "down" : "up" : is_first_position ? "right" : "left";
+$: is_first_position = position === "column" ? coords[0] === 0 : coords[1] === 0;
+$: direction = position === "column" ? is_first_position ? "down" : "up" : is_first_position ? "right" : "left";
 </script>
 
 <button

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

@@ -3,12 +3,14 @@ declare const __propDef: {
     props: {
         position: "column" | "row";
         coords: [number, number];
-        on_click?: ((() => void) | null) | undefined;
+        on_click?: (() => void) | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SelectionButtonsProps = typeof __propDef.props;
 export type SelectionButtonsEvents = typeof __propDef.events;

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

@@ -1,12 +1,14 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        size?: number | undefined;
+        size?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SortArrowDownProps = typeof __propDef.props;
 export type SortArrowDownEvents = typeof __propDef.events;

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

@@ -1,12 +1,14 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        size?: number | undefined;
+        size?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SortArrowUpProps = typeof __propDef.props;
 export type SortArrowUpEvents = typeof __propDef.events;

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

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -2,8 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
 declare const __propDef: {
     props: {
-        direction?: (("asc" | "desc") | null) | undefined;
-        priority?: (number | null) | undefined;
+        direction?: ("asc" | "desc") | null;
+        priority?: number | null;
         i18n: I18nFormatter;
     };
     events: {
@@ -12,6 +12,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SortIconProps = typeof __propDef.props;
 export type SortIconEvents = typeof __propDef.events;

package/dist/shared/utils/data_processing.d.ts

@@ -1,4 +1,4 @@
-import type { Headers, HeadersWithIDs } from "../utils";
+import type { Headers, HeadersWithIDs } from "./utils";
 export declare function make_headers(_head: Headers, col_count: [number, "fixed" | "dynamic"], els: Record<string, {
     cell: null | HTMLTableCellElement;
     input: null | HTMLTextAreaElement;

package/dist/shared/utils/drag_utils.js

@@ -1,4 +1,4 @@
-import { get_range_selection } from "../selection_utils";
+import { get_range_selection } from "../utils/selection_utils";
 export function create_drag_handlers(state, set_is_dragging, set_selected_cells, set_selected, handle_cell_click, show_row_numbers, parent_element) {
     const start_drag = (event, row, col) => {
         const target = event.target;

package/dist/shared/utils/keyboard_utils.js

@@ -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 { tick } from "svelte";
 import { get } from "svelte/store";
 import { copy_table_data } from "./table_utils";
@@ -8,6 +8,9 @@ async function save_cell_value(input_value, ctx, row, col) {
         return;
     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", {
             data: ctx.data.map((row) => row.map((cell) => cell.value)),
@@ -173,8 +176,7 @@ function handle_default_key(event, ctx, i, j) {
     if (!state.config.editable)
         return false;
     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/dist/shared/{selection_utils.d.ts → utils/selection_utils.d.ts}

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

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

@@ -1,6 +1,6 @@
 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;
@@ -11,7 +11,7 @@ export type HeadersWithIDs = {
 export type DataframeValue = {
     data: Data;
     headers: Headers;
-    metadata: Metadata;
+    metadata?: Metadata;
 };
 /**
  * Coerce a value to a given type.