@gradio/dataframe 0.20.2-dev.0 → 0.21.0

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

@@ -1,63 +1,66 @@
-import { SvelteComponent } from "svelte";
 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 { CellValue } from "./types";
-declare const __propDef: {
-    props: {
-        datatype: Datatype | Datatype[];
-        label?: string | null;
-        show_label?: boolean;
-        headers?: Headers;
-        values?: CellValue[][];
-        col_count: [number, "fixed" | "dynamic"];
-        row_count: [number, "fixed" | "dynamic"];
-        latex_delimiters: {
-            left: string;
-            right: string;
-            display: boolean;
-        }[];
-        components?: Record<string, any>;
-        editable?: boolean;
-        wrap?: boolean;
-        root: string;
-        i18n: I18nFormatter;
-        max_height?: number;
-        line_breaks?: boolean;
-        column_widths?: string[];
-        show_row_numbers?: boolean;
-        upload: Client["upload"];
-        stream_handler: Client["stream"];
-        buttons?: string[] | null;
-        value_is_output?: boolean;
-        max_chars?: number | undefined;
-        show_search?: "none" | "search" | "filter";
-        pinned_columns?: number;
-        static_columns?: (string | number)[];
-        fullscreen?: boolean;
-        display_value?: string[][] | null;
-        styling?: string[][] | null;
-        reset_sort_state?: () => 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: {
-        fullscreen: CustomEvent<boolean>;
-        change: CustomEvent<DataframeValue>;
-        input: CustomEvent<undefined>;
-        select: CustomEvent<SelectData>;
-        search: CustomEvent<string | null>;
-        edit: CustomEvent<EditData>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
-    get reset_sort_state(): () => void;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Table: $$__sveltets_2_IsomorphicComponent<{
+    datatype: Datatype | Datatype[];
+    label?: string | null;
+    show_label?: boolean;
+    headers?: Headers;
+    values?: CellValue[][];
+    col_count: [number, "fixed" | "dynamic"];
+    row_count: [number, "fixed" | "dynamic"];
+    latex_delimiters: {
+        left: string;
+        right: string;
+        display: boolean;
+    }[];
+    components?: Record<string, any>;
+    editable?: boolean;
+    wrap?: boolean;
+    root: string;
+    i18n: I18nFormatter;
+    max_height?: number;
+    line_breaks?: boolean;
+    column_widths?: string[];
+    show_row_numbers?: boolean;
+    upload: Client["upload"];
+    stream_handler: Client["stream"];
+    buttons?: string[] | null;
+    value_is_output?: boolean;
+    max_chars?: number | undefined;
+    show_search?: "none" | "search" | "filter";
+    pinned_columns?: number;
+    static_columns?: (string | number)[];
+    fullscreen?: boolean;
+    display_value?: string[][] | null;
+    styling?: string[][] | null;
+    reset_sort_state?: () => void;
+}, {
+    fullscreen: CustomEvent<boolean>;
+    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>;
+export default Table;

package/dist/shared/TableCell.svelte

@@ -1,53 +1,98 @@
-<script>import EditableCell from "./EditableCell.svelte";
-import CellMenuButton from "./CellMenuButton.svelte";
-import { is_cell_in_selection } from "./utils/selection_utils";
-export let value;
-export let index;
-export let j;
-export let actual_pinned_columns;
-export let get_cell_width;
-export let handle_cell_click;
-export let handle_blur;
-export let toggle_cell_menu;
-export let is_cell_selected;
-export let should_show_cell_menu;
-export let selected_cells;
-export let copy_flash;
-export let active_cell_menu;
-export let styling;
-export let latex_delimiters;
-export let line_breaks;
-export let datatype;
-export let editing;
-export let max_chars;
-export let editable;
-export let is_static = false;
-export let i18n;
-export let components = {};
-export let el;
-export let handle_select_column;
-export let handle_select_row;
-export let is_dragging;
-export let display_value;
-export let wrap = false;
-function get_cell_position(col_index) {
-  if (col_index >= actual_pinned_columns) {
-    return "auto";
-  }
-  if (col_index === 0) {
-    return "0";
-  }
-  const previous_widths = Array(col_index).fill(0).map((_, idx) => {
-    return get_cell_width(idx);
-  }).join(" + ");
-  return `calc(${previous_widths})`;
-}
-$: cell_classes = is_cell_selected([index, j], selected_cells || []);
-$: is_in_selection = is_cell_in_selection([index, j], selected_cells);
-$: has_no_top = cell_classes.includes("no-top");
-$: has_no_bottom = cell_classes.includes("no-bottom");
-$: has_no_left = cell_classes.includes("no-left");
-$: has_no_right = cell_classes.includes("no-right");
+<script lang="ts">
+	import EditableCell from "./EditableCell.svelte";
+	import CellMenuButton from "./CellMenuButton.svelte";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import type { Datatype } from "./utils/utils";
+	import type { CellValue } from "./types";
+	import { is_cell_in_selection } from "./utils/selection_utils";
+
+	export let value: CellValue;
+	export let index: number;
+	export let j: number;
+	export let actual_pinned_columns: number;
+	export let get_cell_width: (index: number) => string;
+	export let handle_cell_click: (
+		event: MouseEvent,
+		row: number,
+		col: number
+	) => void;
+	export let handle_blur: (
+		event: CustomEvent<{
+			blur_event: FocusEvent;
+			coords: [number, number];
+		}>
+	) => void;
+	export let toggle_cell_menu: (
+		event: MouseEvent,
+		row: number,
+		col: number
+	) => void;
+	export let is_cell_selected: (
+		coords: [number, number],
+		selected_cells: [number, number][]
+	) => string;
+	export let should_show_cell_menu: (
+		coords: [number, number],
+		selected_cells: [number, number][],
+		editable: boolean
+	) => boolean;
+	export let selected_cells: [number, number][];
+	export let copy_flash: boolean;
+	export let active_cell_menu: {
+		row: number;
+		col: number;
+		x: number;
+		y: number;
+	} | null;
+	export let styling: string | undefined;
+	export let latex_delimiters: {
+		left: string;
+		right: string;
+		display: boolean;
+	}[];
+	export let line_breaks: boolean;
+	export let datatype: Datatype;
+	export let editing: [number, number] | false;
+	export let max_chars: number | undefined;
+	export let editable: boolean;
+	export let is_static = false;
+	export let i18n: I18nFormatter;
+	export let components: Record<string, any> = {};
+	export let el: {
+		cell: HTMLTableCellElement | null;
+		input: HTMLTextAreaElement | null;
+	};
+	export let handle_select_column: (col: number) => void;
+	export let handle_select_row: (row: number) => void;
+	export let is_dragging: boolean;
+	export let display_value: string | undefined;
+	export let wrap = false;
+
+	function get_cell_position(col_index: number): string {
+		if (col_index >= actual_pinned_columns) {
+			return "auto";
+		}
+
+		if (col_index === 0) {
+			return "0";
+		}
+
+		const previous_widths = Array(col_index)
+			.fill(0)
+			.map((_, idx) => {
+				return get_cell_width(idx);
+			})
+			.join(" + ");
+
+		return `calc(${previous_widths})`;
+	}
+
+	$: cell_classes = is_cell_selected([index, j], selected_cells || []);
+	$: is_in_selection = is_cell_in_selection([index, j], selected_cells);
+	$: has_no_top = cell_classes.includes("no-top");
+	$: has_no_bottom = cell_classes.includes("no-bottom");
+	$: has_no_left = cell_classes.includes("no-left");
+	$: has_no_right = cell_classes.includes("no-right");
 </script>
 
 <td

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

@@ -1,64 +1,66 @@
-import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import type { Datatype } from "./utils/utils";
 import type { CellValue } from "./types";
-declare const __propDef: {
-    props: {
-        value: CellValue;
-        index: number;
-        j: number;
-        actual_pinned_columns: number;
-        get_cell_width: (index: number) => string;
-        handle_cell_click: (event: MouseEvent, row: number, col: number) => void;
-        handle_blur: (event: CustomEvent<{
-            blur_event: FocusEvent;
-            coords: [number, number];
-        }>) => void;
-        toggle_cell_menu: (event: MouseEvent, row: number, col: number) => void;
-        is_cell_selected: (coords: [number, number], selected_cells: [number, number][]) => string;
-        should_show_cell_menu: (coords: [number, number], selected_cells: [number, number][], editable: boolean) => boolean;
-        selected_cells: [number, number][];
-        copy_flash: boolean;
-        active_cell_menu: {
-            row: number;
-            col: number;
-            x: number;
-            y: number;
-        } | null;
-        styling: string | undefined;
-        latex_delimiters: {
-            left: string;
-            right: string;
-            display: boolean;
-        }[];
-        line_breaks: boolean;
-        datatype: Datatype;
-        editing: [number, number] | false;
-        max_chars: number | undefined;
-        editable: boolean;
-        is_static?: boolean;
-        i18n: I18nFormatter;
-        components?: Record<string, any>;
-        el: {
-            cell: HTMLTableCellElement | null;
-            input: HTMLTextAreaElement | null;
-        };
-        handle_select_column: (col: number) => void;
-        handle_select_row: (row: number) => void;
-        is_dragging: boolean;
-        display_value: string | undefined;
-        wrap?: boolean;
+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: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TableCellProps = typeof __propDef.props;
-export type TableCellEvents = typeof __propDef.events;
-export type TableCellSlots = typeof __propDef.slots;
-export default class TableCell extends SvelteComponent<TableCellProps, TableCellEvents, TableCellSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const TableCell: $$__sveltets_2_IsomorphicComponent<{
+    value: CellValue;
+    index: number;
+    j: number;
+    actual_pinned_columns: number;
+    get_cell_width: (index: number) => string;
+    handle_cell_click: (event: MouseEvent, row: number, col: number) => void;
+    handle_blur: (event: CustomEvent<{
+        blur_event: FocusEvent;
+        coords: [number, number];
+    }>) => void;
+    toggle_cell_menu: (event: MouseEvent, row: number, col: number) => void;
+    is_cell_selected: (coords: [number, number], selected_cells: [number, number][]) => string;
+    should_show_cell_menu: (coords: [number, number], selected_cells: [number, number][], editable: boolean) => boolean;
+    selected_cells: [number, number][];
+    copy_flash: boolean;
+    active_cell_menu: {
+        row: number;
+        col: number;
+        x: number;
+        y: number;
+    } | null;
+    styling: string | undefined;
+    latex_delimiters: {
+        left: string;
+        right: string;
+        display: boolean;
+    }[];
+    line_breaks: boolean;
+    datatype: Datatype;
+    editing: [number, number] | false;
+    max_chars: number | undefined;
+    editable: boolean;
+    is_static?: boolean;
+    i18n: I18nFormatter;
+    components?: Record<string, any>;
+    el: {
+        cell: HTMLTableCellElement | null;
+        input: HTMLTextAreaElement | null;
+    };
+    handle_select_column: (col: number) => void;
+    handle_select_row: (row: number) => void;
+    is_dragging: boolean;
+    display_value: string | undefined;
+    wrap?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TableCell = InstanceType<typeof TableCell>;
+export default TableCell;

package/dist/shared/TableHeader.svelte

@@ -1,61 +1,89 @@
-<script>import EditableCell from "./EditableCell.svelte";
-import CellMenuButton from "./CellMenuButton.svelte";
-import { get_sort_status } from "./utils/sort_utils";
-import Padlock from "./icons/Padlock.svelte";
-import SortArrowUp from "./icons/SortArrowUp.svelte";
-import SortArrowDown from "./icons/SortArrowDown.svelte";
-import CellMenuIcons from "./CellMenuIcons.svelte";
-import { BaseCheckbox } from "@gradio/checkbox";
-export let value;
-export let i;
-export let datatype = "str";
-export let actual_pinned_columns;
-export let header_edit;
-export let selected_header;
-export let headers;
-export let get_cell_width;
-export let handle_header_click;
-export let toggle_header_menu;
-export let end_header_edit;
-export let sort_columns = [];
-export let filter_columns = [];
-export let latex_delimiters;
-export let line_breaks;
-export let max_chars;
-export let editable;
-export let i18n;
-export let el;
-export let is_static;
-export let col_count;
-export let data = [];
-export let on_select_all = void 0;
-$: can_add_columns = col_count && col_count[1] === "dynamic";
-$: is_bool_column = datatype === "bool";
-$: select_all_state = (() => {
-  if (!is_bool_column || data.length === 0) return "unchecked";
-  const true_count = data.filter(
-    (row) => row[i]?.value === true || row[i]?.value === "true"
-  ).length;
-  if (true_count === 0) return "unchecked";
-  if (true_count === data.length) return "checked";
-  return "indeterminate";
-})();
-$: sort_index = sort_columns.findIndex((item) => item.col === i);
-$: filter_index = filter_columns.findIndex((item) => item.col === i);
-$: sort_priority = sort_index !== -1 ? sort_index + 1 : null;
-$: current_direction = sort_index !== -1 ? sort_columns[sort_index].direction : null;
-function get_header_position(col_index) {
-  if (col_index >= actual_pinned_columns) {
-    return "auto";
-  }
-  if (col_index === 0) {
-    return "0";
-  }
-  const previous_widths = Array(col_index).fill(0).map((_, idx) => {
-    return get_cell_width(idx);
-  }).join(" + ");
-  return `calc(${previous_widths})`;
-}
+<script lang="ts">
+	import EditableCell from "./EditableCell.svelte";
+	import CellMenuButton from "./CellMenuButton.svelte";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import { get_sort_status } from "./utils/sort_utils";
+	import Padlock from "./icons/Padlock.svelte";
+	import SortArrowUp from "./icons/SortArrowUp.svelte";
+	import SortArrowDown from "./icons/SortArrowDown.svelte";
+	import type { SortDirection } from "./context/dataframe_context";
+	import CellMenuIcons from "./CellMenuIcons.svelte";
+	import type { FilterDatatype } from "./context/dataframe_context";
+	import type { Datatype } from "./utils/utils";
+	import { BaseCheckbox } from "@gradio/checkbox";
+	export let value: string;
+	export let i: number;
+	export let datatype: Datatype = "str";
+	export let actual_pinned_columns: number;
+	export let header_edit: number | false;
+	export let selected_header: number | false;
+	export let headers: string[];
+	export let get_cell_width: (index: number) => string;
+	export let handle_header_click: (event: MouseEvent, col: number) => void;
+	export let toggle_header_menu: (event: MouseEvent, col: number) => void;
+	export let end_header_edit: (event: CustomEvent<KeyboardEvent>) => void;
+	export let sort_columns: { col: number; direction: SortDirection }[] = [];
+	export let filter_columns: {
+		col: number;
+		datatype: FilterDatatype;
+		filter: string;
+		value: string;
+	}[] = [];
+
+	export let latex_delimiters: {
+		left: string;
+		right: string;
+		display: boolean;
+	}[];
+	export let line_breaks: boolean;
+	export let max_chars: number | undefined;
+	export let editable: boolean;
+	export let i18n: I18nFormatter;
+	export let el: HTMLTextAreaElement | null;
+	export let is_static: boolean;
+	export let col_count: [number, "fixed" | "dynamic"];
+	export let data: any[] = [];
+	export let on_select_all:
+		| ((col: number, checked: boolean) => void)
+		| undefined = undefined;
+
+	$: can_add_columns = col_count && col_count[1] === "dynamic";
+	$: is_bool_column = datatype === "bool";
+
+	$: select_all_state = (() => {
+		if (!is_bool_column || data.length === 0) return "unchecked";
+		const true_count = data.filter(
+			(row) => row[i]?.value === true || row[i]?.value === "true"
+		).length;
+		if (true_count === 0) return "unchecked";
+		if (true_count === data.length) return "checked";
+		return "indeterminate";
+	})();
+
+	$: sort_index = sort_columns.findIndex((item) => item.col === i);
+	$: filter_index = filter_columns.findIndex((item) => item.col === i);
+	$: sort_priority = sort_index !== -1 ? sort_index + 1 : null;
+	$: current_direction =
+		sort_index !== -1 ? sort_columns[sort_index].direction : null;
+
+	function get_header_position(col_index: number): string {
+		if (col_index >= actual_pinned_columns) {
+			return "auto";
+		}
+
+		if (col_index === 0) {
+			return "0";
+		}
+
+		const previous_widths = Array(col_index)
+			.fill(0)
+			.map((_, idx) => {
+				return get_cell_width(idx);
+			})
+			.join(" + ");
+
+		return `calc(${previous_widths})`;
+	}
 </script>
 
 <th

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

@@ -1,59 +1,61 @@
-import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import type { SortDirection } from "./context/dataframe_context";
 import type { FilterDatatype } from "./context/dataframe_context";
 import type { Datatype } from "./utils/utils";
-declare const __propDef: {
-    props: {
-        value: string;
-        i: number;
-        datatype?: Datatype;
-        actual_pinned_columns: number;
-        header_edit: number | false;
-        selected_header: number | false;
-        headers: string[];
-        get_cell_width: (index: number) => string;
-        handle_header_click: (event: MouseEvent, col: number) => void;
-        toggle_header_menu: (event: MouseEvent, col: number) => void;
-        end_header_edit: (event: CustomEvent<KeyboardEvent>) => void;
-        sort_columns?: {
-            col: number;
-            direction: SortDirection;
-        }[];
-        filter_columns?: {
-            col: number;
-            datatype: FilterDatatype;
-            filter: string;
-            value: string;
-        }[];
-        latex_delimiters: {
-            left: string;
-            right: string;
-            display: boolean;
-        }[];
-        line_breaks: boolean;
-        max_chars: number | undefined;
-        editable: boolean;
-        i18n: I18nFormatter;
-        el: HTMLTextAreaElement | null;
-        is_static: boolean;
-        col_count: [number, "fixed" | "dynamic"];
-        data?: any[];
-        on_select_all?: ((col: number, checked: boolean) => void) | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        mousedown: MouseEvent;
-    } & {
-        [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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TableHeaderProps = typeof __propDef.props;
-export type TableHeaderEvents = typeof __propDef.events;
-export type TableHeaderSlots = typeof __propDef.slots;
-export default class TableHeader extends SvelteComponent<TableHeaderProps, TableHeaderEvents, TableHeaderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const TableHeader: $$__sveltets_2_IsomorphicComponent<{
+    value: string;
+    i: number;
+    datatype?: Datatype;
+    actual_pinned_columns: number;
+    header_edit: number | false;
+    selected_header: number | false;
+    headers: string[];
+    get_cell_width: (index: number) => string;
+    handle_header_click: (event: MouseEvent, col: number) => void;
+    toggle_header_menu: (event: MouseEvent, col: number) => void;
+    end_header_edit: (event: CustomEvent<KeyboardEvent>) => void;
+    sort_columns?: {
+        col: number;
+        direction: SortDirection;
+    }[];
+    filter_columns?: {
+        col: number;
+        datatype: FilterDatatype;
+        filter: string;
+        value: string;
+    }[];
+    latex_delimiters: {
+        left: string;
+        right: string;
+        display: boolean;
+    }[];
+    line_breaks: boolean;
+    max_chars: number | undefined;
+    editable: boolean;
+    i18n: I18nFormatter;
+    el: HTMLTextAreaElement | null;
+    is_static: boolean;
+    col_count: [number, "fixed" | "dynamic"];
+    data?: any[];
+    on_select_all?: ((col: number, checked: boolean) => void) | undefined;
+}, {
+    click: PointerEvent;
+    mousedown: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TableHeader = InstanceType<typeof TableHeader>;
+export default TableHeader;