@gradio/dataframe 0.20.2-dev.0 → 0.21.0-dev.3

package/dist/shared/Toolbar.svelte

@@ -1,42 +1,52 @@
-<script>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";
-export let fullscreen = false;
-export let on_copy;
-export let on_commit_filter;
-const dispatch = createEventDispatcher();
-let copied = false;
-let timer;
-export let current_search_query = null;
-let input_value = "";
-function handle_search_input(e) {
-  const target = e.target;
-  input_value = target.value;
-  const new_query = input_value || null;
-  if (current_search_query !== new_query) {
-    current_search_query = new_query;
-    dispatch("search", current_search_query);
-  }
-}
-function copy_feedback() {
-  copied = true;
-  if (timer) clearTimeout(timer);
-  timer = setTimeout(() => {
-    copied = false;
-  }, 2e3);
-}
-async function handle_copy() {
-  await on_copy();
-  copy_feedback();
-}
-onDestroy(() => {
-  if (timer) clearTimeout(timer);
-});
+<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 timer: ReturnType<typeof setTimeout>;
+	export let current_search_query: string | null = null;
+	let input_value = "";
+
+	function handle_search_input(e: Event): void {
+		const target = e.target as HTMLTextAreaElement;
+		input_value = target.value;
+		const new_query = input_value || null;
+		if (current_search_query !== new_query) {
+			current_search_query = new_query;
+			dispatch("search", current_search_query);
+		}
+	}
+
+	function copy_feedback(): void {
+		copied = true;
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => {
+			copied = false;
+		}, 2000);
+	}
+
+	async function handle_copy(): Promise<void> {
+		await on_copy();
+		copy_feedback();
+	}
+
+	onDestroy(() => {
+		if (timer) clearTimeout(timer);
+	});
 </script>
 
 <div class="toolbar" role="toolbar" aria-label="Table actions">

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

@@ -1,27 +1,29 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        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;
+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: {
-        fullscreen: CustomEvent<boolean>;
-        search: CustomEvent<string | null>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ToolbarProps = typeof __propDef.props;
-export type ToolbarEvents = typeof __propDef.events;
-export type ToolbarSlots = typeof __propDef.slots;
-export default class Toolbar extends SvelteComponent<ToolbarProps, ToolbarEvents, ToolbarSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Toolbar: $$__sveltets_2_IsomorphicComponent<{
+    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;
+}, {
+    fullscreen: CustomEvent<boolean>;
+    search: CustomEvent<string | null>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toolbar = InstanceType<typeof Toolbar>;
+export default Toolbar;

package/dist/shared/VirtualTable.svelte

@@ -1,156 +1,209 @@
-<script>import { onMount, tick, createEventDispatcher } from "svelte";
-export let items = [];
-export let max_height;
-export let actual_height;
-export let table_scrollbar_width;
-export let start = 0;
-export let end = 20;
-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;
-let bottom = 0;
-let contents;
-let head_height = 0;
-let foot_height = 0;
-let height_map = [];
-let mounted;
-let rows;
-let top = 0;
-let viewport_height = 200;
-let visible = [];
-let viewport_box;
-$: viewport_height = viewport_box?.height || 200;
-const is_browser = typeof window !== "undefined";
-const raf = is_browser ? window.requestAnimationFrame : (cb) => cb();
-$: {
-  if (mounted && viewport_height && viewport.offsetParent) {
-    sortedItems, raf(refresh_height_map);
-  }
-}
-async function refresh_height_map() {
-  if (!viewport) {
-    return;
-  }
-  if (sortedItems.length < start) {
-    await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
-  }
-  const scrollTop = Math.max(0, viewport.scrollTop);
-  show_scroll_button = scrollTop > 100;
-  table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
-  for (let v = 0; v < rows.length; v += 1) {
-    height_map[start + v] = rows[v].getBoundingClientRect().height;
-  }
-  let i = 0;
-  let y = head_height;
-  while (i < sortedItems.length) {
-    const row_height = height_map[i] || average_height;
-    if (y + row_height > scrollTop - max_height) {
-      start = i;
-      top = y - head_height;
-      break;
-    }
-    y += row_height;
-    i += 1;
-  }
-  let content_height = head_height;
-  while (i < sortedItems.length) {
-    const row_height = height_map[i] || average_height;
-    content_height += row_height;
-    i += 1;
-    if (content_height - head_height > 3 * max_height) {
-      break;
-    }
-  }
-  end = i;
-  const remaining = sortedItems.length - end;
-  const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
-  if (scrollbar_height > 0) {
-    content_height += scrollbar_height;
-  }
-  let filtered_height_map = height_map.filter((v) => typeof v === "number");
-  average_height = filtered_height_map.reduce((a, b) => a + b, 0) / filtered_height_map.length || 30;
-  bottom = remaining * average_height;
-  if (!isFinite(bottom)) {
-    bottom = 2e5;
-  }
-  height_map.length = sortedItems.length;
-  while (i < sortedItems.length) {
-    i += 1;
-    height_map[i] = average_height;
-  }
-  if (max_height && content_height > max_height) {
-    actual_height = max_height;
-  } else {
-    actual_height = content_height;
-  }
-}
-$: scroll_and_render(selected);
-async function scroll_and_render(n) {
-  raf(async () => {
-    if (typeof n !== "number") return;
-    const direction = typeof n !== "number" ? false : is_in_view(n);
-    if (direction === true) {
-      return;
-    }
-    if (direction === "back") {
-      await scroll_to_index(n, { behavior: "instant" });
-    }
-    if (direction === "forwards") {
-      await scroll_to_index(n, { behavior: "instant" }, true);
-    }
-  });
-}
-function is_in_view(n) {
-  const current = rows && rows[n - start];
-  if (!current && n < start) {
-    return "back";
-  }
-  if (!current && n >= end - 1) {
-    return "forwards";
-  }
-  const { top: viewport_top } = viewport.getBoundingClientRect();
-  const { top: top2, bottom: bottom2 } = current.getBoundingClientRect();
-  if (top2 - viewport_top < 37) {
-    return "back";
-  }
-  if (bottom2 - viewport_top > viewport_height) {
-    return "forwards";
-  }
-  return true;
-}
-export async function scroll_to_index(index, opts, align_end = false) {
-  await tick();
-  const _itemHeight = average_height;
-  let distance = index * _itemHeight;
-  if (align_end) {
-    distance = distance - viewport_height + _itemHeight + head_height;
-  }
-  const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
-  if (scrollbar_height > 0) {
-    distance += scrollbar_height;
-  }
-  const _opts = {
-    top: distance,
-    behavior: "smooth",
-    ...opts
-  };
-  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 };
-});
-onMount(() => {
-  rows = contents.children;
-  mounted = true;
-});
+<script lang="ts">
+	import { onMount, tick, createEventDispatcher } from "svelte";
+
+	export let items: any[][] = [];
+
+	export let max_height: number;
+	export let actual_height: number;
+	export let table_scrollbar_width: number;
+	export let start = 0;
+	export let end = 20;
+	export let selected: number | false;
+	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;
+	}>();
+
+	let height = "100%";
+
+	let average_height = 30;
+	let bottom = 0;
+	let contents: HTMLTableSectionElement;
+	let head_height = 0;
+	let foot_height = 0;
+	let height_map: number[] = [];
+	let mounted: boolean;
+	let rows: HTMLCollectionOf<HTMLTableRowElement>;
+	let top = 0;
+	let viewport_height = 200;
+	let visible: { index: number; data: any[] }[] = [];
+	let viewport_box: DOMRectReadOnly;
+
+	$: viewport_height = viewport_box?.height || 200;
+
+	const is_browser = typeof window !== "undefined";
+	const raf = is_browser
+		? window.requestAnimationFrame
+		: (cb: (...args: any[]) => void) => cb();
+
+	$: {
+		if (mounted && viewport_height && viewport.offsetParent) {
+			(sortedItems, raf(refresh_height_map));
+		}
+	}
+
+	async function refresh_height_map(): Promise<void> {
+		if (!viewport) {
+			return;
+		}
+
+		if (sortedItems.length < start) {
+			await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
+		}
+
+		const scrollTop = Math.max(0, viewport.scrollTop);
+		show_scroll_button = scrollTop > 100;
+		table_scrollbar_width = viewport.offsetWidth - viewport.clientWidth;
+
+		// acquire height map for currently visible rows
+		for (let v = 0; v < rows.length; v += 1) {
+			height_map[start + v] = rows[v].getBoundingClientRect().height;
+		}
+		let i = 0;
+		let y = head_height;
+		// loop items to find new start
+		while (i < sortedItems.length) {
+			const row_height = height_map[i] || average_height;
+			// keep a page of rows buffered above
+			if (y + row_height > scrollTop - max_height) {
+				start = i;
+				top = y - head_height;
+				break;
+			}
+			y += row_height;
+			i += 1;
+		}
+
+		let content_height = head_height;
+		while (i < sortedItems.length) {
+			const row_height = height_map[i] || average_height;
+			content_height += row_height;
+			i += 1;
+			// keep a page of rows buffered below
+			if (content_height - head_height > 3 * max_height) {
+				break;
+			}
+		}
+
+		end = i;
+		const remaining = sortedItems.length - end;
+
+		const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
+		if (scrollbar_height > 0) {
+			content_height += scrollbar_height;
+		}
+
+		let filtered_height_map = height_map.filter((v) => typeof v === "number");
+		average_height =
+			filtered_height_map.reduce((a, b) => a + b, 0) /
+				filtered_height_map.length || 30;
+
+		bottom = remaining * average_height;
+		if (!isFinite(bottom)) {
+			bottom = 200000;
+		}
+		height_map.length = sortedItems.length;
+		while (i < sortedItems.length) {
+			i += 1;
+			height_map[i] = average_height;
+		}
+		if (max_height && content_height > max_height) {
+			actual_height = max_height;
+		} else {
+			actual_height = content_height;
+		}
+	}
+
+	$: scroll_and_render(selected);
+
+	async function scroll_and_render(n: number | false): Promise<void> {
+		raf(async () => {
+			if (typeof n !== "number") return;
+			const direction = typeof n !== "number" ? false : is_in_view(n);
+			if (direction === true) {
+				return;
+			}
+			if (direction === "back") {
+				await scroll_to_index(n, { behavior: "instant" });
+			}
+
+			if (direction === "forwards") {
+				await scroll_to_index(n, { behavior: "instant" }, true);
+			}
+		});
+	}
+
+	function is_in_view(n: number): "back" | "forwards" | true {
+		const current = rows && rows[n - start];
+		if (!current && n < start) {
+			return "back";
+		}
+		if (!current && n >= end - 1) {
+			return "forwards";
+		}
+
+		const { top: viewport_top } = viewport.getBoundingClientRect();
+		const { top, bottom } = current.getBoundingClientRect();
+
+		if (top - viewport_top < 37) {
+			return "back";
+		}
+
+		if (bottom - viewport_top > viewport_height) {
+			return "forwards";
+		}
+
+		return true;
+	}
+
+	export async function scroll_to_index(
+		index: number,
+		opts: ScrollToOptions,
+		align_end = false
+	): Promise<void> {
+		await tick();
+
+		const _itemHeight = average_height;
+
+		let distance = index * _itemHeight;
+		if (align_end) {
+			distance = distance - viewport_height + _itemHeight + head_height;
+		}
+
+		const scrollbar_height = viewport.offsetHeight - viewport.clientHeight;
+		if (scrollbar_height > 0) {
+			distance += scrollbar_height;
+		}
+
+		const _opts = {
+			top: distance,
+			behavior: "smooth" as ScrollBehavior,
+			...opts
+		};
+
+		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 };
+				});
+
+	onMount(() => {
+		rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
+		mounted = true;
+	});
 </script>
 
 <svelte-virtual-table-viewport>
@@ -187,7 +240,7 @@ onMount(() => {
 	</div>
 </svelte-virtual-table-viewport>
 
-<style>
+<style type="text/css">
 	table {
 		position: relative;
 		overflow: auto;

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

@@ -1,39 +1,42 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        items?: any[][];
-        max_height: number;
-        actual_height: number;
-        table_scrollbar_width: number;
-        start?: number;
-        end?: number;
-        selected: number | false;
-        disable_scroll?: boolean;
-        show_scroll_button?: boolean;
-        viewport: HTMLTableElement;
-        label?: string | null;
-        scroll_to_index?: (index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>;
+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: {
-        scroll_top: CustomEvent<number>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        thead: {};
-        tbody: {
-            item: any[];
-            index: number;
-        };
-        tfoot: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type VirtualTableProps = typeof __propDef.props;
-export type VirtualTableEvents = typeof __propDef.events;
-export type VirtualTableSlots = typeof __propDef.slots;
-export default class VirtualTable extends SvelteComponent<VirtualTableProps, VirtualTableEvents, VirtualTableSlots> {
-    get scroll_to_index(): (index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const VirtualTable: $$__sveltets_2_IsomorphicComponent<{
+    items?: any[][];
+    max_height: number;
+    actual_height: number;
+    table_scrollbar_width: number;
+    start?: number;
+    end?: number;
+    selected: number | false;
+    disable_scroll?: boolean;
+    show_scroll_button?: boolean;
+    viewport: HTMLTableElement;
+    label?: string | null;
+    scroll_to_index?: (index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>;
+}, {
+    scroll_top: CustomEvent<number>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    thead: {};
+    tbody: {
+        item: any[];
+        index: number;
+    };
+    tfoot: {};
+}, {
+    scroll_to_index: (index: number, opts: ScrollToOptions, align_end?: boolean) => Promise<void>;
+}, string>;
+type VirtualTable = InstanceType<typeof VirtualTable>;
+export default VirtualTable;

package/dist/shared/icons/FilterIcon.svelte

@@ -1,4 +1,5 @@
-<script></script>
+<script lang="ts">
+</script>
 
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path

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

@@ -1,16 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FilterIconProps = typeof __propDef.props;
-export type FilterIconEvents = typeof __propDef.events;
-export type FilterIconSlots = typeof __propDef.slots;
-export default class FilterIcon extends SvelteComponent<FilterIconProps, FilterIconEvents, FilterIconSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const FilterIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FilterIcon = InstanceType<typeof FilterIcon>;
+export default FilterIcon;