@gradio/dataframe 0.20.1 → 0.21.0-dev.3

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

@@ -1,41 +1,43 @@
-import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
 import type { SortDirection, FilterDatatype } from "./context/dataframe_context";
-declare const __propDef: {
-    props: {
-        x: number;
-        y: number;
-        on_add_row_above: () => void;
-        on_add_row_below: () => void;
-        on_add_column_left: () => void;
-        on_add_column_right: () => void;
-        row: number;
-        col_count: [number, "fixed" | "dynamic"];
-        row_count: [number, "fixed" | "dynamic"];
-        on_delete_row: () => void;
-        on_delete_col: () => void;
-        can_delete_rows: boolean;
-        can_delete_cols: boolean;
-        on_sort?: (direction: SortDirection) => void;
-        on_clear_sort?: () => void;
-        sort_direction?: SortDirection | null;
-        sort_priority?: number | null;
-        on_filter?: (datatype: FilterDatatype, selected_filter: string, value: string) => void;
-        on_clear_filter?: () => void;
-        filter_active?: boolean | null;
-        editable?: boolean;
-        i18n: I18nFormatter;
+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 CellMenuProps = typeof __propDef.props;
-export type CellMenuEvents = typeof __propDef.events;
-export type CellMenuSlots = typeof __propDef.slots;
-export default class CellMenu extends SvelteComponent<CellMenuProps, CellMenuEvents, CellMenuSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CellMenu: $$__sveltets_2_IsomorphicComponent<{
+    x: number;
+    y: number;
+    on_add_row_above: () => void;
+    on_add_row_below: () => void;
+    on_add_column_left: () => void;
+    on_add_column_right: () => void;
+    row: number;
+    col_count: [number, "fixed" | "dynamic"];
+    row_count: [number, "fixed" | "dynamic"];
+    on_delete_row: () => void;
+    on_delete_col: () => void;
+    can_delete_rows: boolean;
+    can_delete_cols: boolean;
+    on_sort?: (direction: SortDirection) => void;
+    on_clear_sort?: () => void;
+    sort_direction?: SortDirection | null;
+    sort_priority?: number | null;
+    on_filter?: (datatype: FilterDatatype, selected_filter: string, value: string) => void;
+    on_clear_filter?: () => void;
+    filter_active?: boolean | null;
+    editable?: boolean;
+    i18n: I18nFormatter;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CellMenu = InstanceType<typeof CellMenu>;
+export default CellMenu;

package/dist/shared/CellMenuButton.svelte

@@ -1,4 +1,5 @@
-<script>export let on_click;
+<script lang="ts">
+	export let on_click: (event: MouseEvent) => void;
 </script>
 
 <button

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

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        on_click: (event: MouseEvent) => 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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CellMenuButtonProps = typeof __propDef.props;
-export type CellMenuButtonEvents = typeof __propDef.events;
-export type CellMenuButtonSlots = typeof __propDef.slots;
-export default class CellMenuButton extends SvelteComponent<CellMenuButtonProps, CellMenuButtonEvents, CellMenuButtonSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CellMenuButton: $$__sveltets_2_IsomorphicComponent<{
+    on_click: (event: MouseEvent) => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CellMenuButton = InstanceType<typeof CellMenuButton>;
+export default CellMenuButton;

package/dist/shared/CellMenuIcons.svelte

@@ -1,4 +1,5 @@
-<script>export let icon;
+<script lang="ts">
+	export let icon: string;
 </script>
 
 {#if icon == "add-column-right"}

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

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        icon: string;
+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 CellMenuIconsProps = typeof __propDef.props;
-export type CellMenuIconsEvents = typeof __propDef.events;
-export type CellMenuIconsSlots = typeof __propDef.slots;
-export default class CellMenuIcons extends SvelteComponent<CellMenuIconsProps, CellMenuIconsEvents, CellMenuIconsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CellMenuIcons: $$__sveltets_2_IsomorphicComponent<{
+    icon: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CellMenuIcons = InstanceType<typeof CellMenuIcons>;
+export default CellMenuIcons;

package/dist/shared/EditableCell.svelte

@@ -1,59 +1,100 @@
-<script>import { createEventDispatcher } from "svelte";
-import { MarkdownCode } from "@gradio/markdown-code";
-import SelectionButtons from "./icons/SelectionButtons.svelte";
-import BooleanCell from "./BooleanCell.svelte";
-export let edit;
-export let value = "";
-export let display_value = null;
-export let styling = "";
-export let header = false;
-export let datatype = "str";
-export let latex_delimiters;
-export let line_breaks = true;
-export let editable = true;
-export let is_static = false;
-export let max_chars = null;
-export let components = {};
-export let i18n;
-export let is_dragging = false;
-export let wrap_text = false;
-export let show_selection_buttons = false;
-export let coords;
-export let on_select_column = null;
-export let on_select_row = null;
-export let el;
-const dispatch = createEventDispatcher();
-function truncate_text(text, max_length = null, is_image = false) {
-  if (is_image) return String(text);
-  const str = String(text);
-  if (!max_length || max_length <= 0) return str;
-  if (str.length <= max_length) return str;
-  return str.slice(0, max_length) + "...";
-}
-$: should_truncate = !edit && max_chars !== null && max_chars > 0;
-$: display_content = editable ? value : display_value !== null ? display_value : value;
-$: display_text = should_truncate ? truncate_text(display_content, max_chars, datatype === "image") : display_content;
-function use_focus(node) {
-  requestAnimationFrame(() => {
-    node.focus();
-  });
-  return {};
-}
-function handle_blur(event) {
-  dispatch("blur", {
-    blur_event: event,
-    coords
-  });
-}
-function handle_keydown(event) {
-  dispatch("keydown", event);
-}
-function commit_change(checked) {
-  handle_blur({ target: { value } });
-}
-$: if (!edit) {
-  handle_blur({ target: { value } });
-}
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { MarkdownCode } from "@gradio/markdown-code";
+	import type { I18nFormatter } from "@gradio/utils";
+	import type { CellValue } from "./types";
+	import SelectionButtons from "./icons/SelectionButtons.svelte";
+	import BooleanCell from "./BooleanCell.svelte";
+
+	export let edit: boolean;
+	export let value: CellValue = "";
+	export let display_value: string | null = null;
+	export let styling = "";
+	export let header = false;
+	export let datatype:
+		| "str"
+		| "markdown"
+		| "html"
+		| "number"
+		| "bool"
+		| "date"
+		| "image" = "str";
+	export let latex_delimiters: {
+		left: string;
+		right: string;
+		display: boolean;
+	}[];
+	export let line_breaks = true;
+	export let editable = true;
+	export let is_static = false;
+	export let max_chars: number | null = null;
+	export let components: Record<string, any> = {};
+	export let i18n: I18nFormatter;
+	export let is_dragging = false;
+	export let wrap_text = false;
+
+	export let show_selection_buttons = false;
+	export let coords: [number, number];
+	export let on_select_column: ((col: number) => void) | null = null;
+	export let on_select_row: ((row: number) => void) | null = null;
+	export let el: HTMLTextAreaElement | null;
+
+	const dispatch = createEventDispatcher<{
+		blur: { blur_event: FocusEvent; coords: [number, number] };
+		keydown: KeyboardEvent;
+	}>();
+
+	function truncate_text(
+		text: CellValue,
+		max_length: number | null = null,
+		is_image = false
+	): string {
+		if (is_image) return String(text);
+		const str = String(text);
+		if (!max_length || max_length <= 0) return str;
+		if (str.length <= max_length) return str;
+		return str.slice(0, max_length) + "...";
+	}
+
+	$: should_truncate = !edit && max_chars !== null && max_chars > 0;
+
+	$: display_content = editable
+		? value
+		: display_value !== null
+			? display_value
+			: value;
+
+	$: display_text = should_truncate
+		? truncate_text(display_content, max_chars, datatype === "image")
+		: display_content;
+
+	function use_focus(node: HTMLTextAreaElement): any {
+		requestAnimationFrame(() => {
+			node.focus();
+		});
+
+		return {};
+	}
+
+	function handle_blur(event: FocusEvent): void {
+		dispatch("blur", {
+			blur_event: event,
+			coords: coords
+		});
+	}
+
+	function handle_keydown(event: KeyboardEvent): void {
+		dispatch("keydown", event);
+	}
+
+	function commit_change(checked: boolean): void {
+		handle_blur({ target: { value } } as unknown as FocusEvent);
+	}
+
+	$: if (!edit) {
+		// Shim blur on removal for Safari and Firefox
+		handle_blur({ target: { value } } as unknown as FocusEvent);
+	}
 </script>
 
 {#if edit && datatype !== "bool"}

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

@@ -1,52 +1,54 @@
-import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
 import type { CellValue } from "./types";
-declare const __propDef: {
-    props: {
-        edit: boolean;
-        value?: CellValue;
-        display_value?: string | null;
-        styling?: string;
-        header?: boolean;
-        datatype?: "str" | "markdown" | "html" | "number" | "bool" | "date" | "image";
-        latex_delimiters: {
-            left: string;
-            right: string;
-            display: boolean;
-        }[];
-        line_breaks?: boolean;
-        editable?: boolean;
-        is_static?: boolean;
-        max_chars?: number | null;
-        components?: Record<string, any>;
-        i18n: I18nFormatter;
-        is_dragging?: boolean;
-        wrap_text?: boolean;
-        show_selection_buttons?: boolean;
-        coords: [number, number];
-        on_select_column?: ((col: number) => void) | null;
-        on_select_row?: ((row: number) => void) | null;
-        el: HTMLTextAreaElement | null;
-    };
-    events: {
-        mousedown: MouseEvent;
-        click: MouseEvent;
-        focus: FocusEvent;
-        blur: CustomEvent<{
-            blur_event: FocusEvent;
-            coords: [number, number];
-        }>;
-        keydown: CustomEvent<KeyboardEvent>;
-    } & {
-        [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 EditableCellProps = typeof __propDef.props;
-export type EditableCellEvents = typeof __propDef.events;
-export type EditableCellSlots = typeof __propDef.slots;
-export default class EditableCell extends SvelteComponent<EditableCellProps, EditableCellEvents, EditableCellSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const EditableCell: $$__sveltets_2_IsomorphicComponent<{
+    edit: boolean;
+    value?: CellValue;
+    display_value?: string | null;
+    styling?: string;
+    header?: boolean;
+    datatype?: "str" | "markdown" | "html" | "number" | "bool" | "date" | "image";
+    latex_delimiters: {
+        left: string;
+        right: string;
+        display: boolean;
+    }[];
+    line_breaks?: boolean;
+    editable?: boolean;
+    is_static?: boolean;
+    max_chars?: number | null;
+    components?: Record<string, any>;
+    i18n: I18nFormatter;
+    is_dragging?: boolean;
+    wrap_text?: boolean;
+    show_selection_buttons?: boolean;
+    coords: [number, number];
+    on_select_column?: ((col: number) => void) | null;
+    on_select_row?: ((row: number) => void) | null;
+    el: HTMLTextAreaElement | null;
+}, {
+    mousedown: MouseEvent;
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: CustomEvent<{
+        blur_event: FocusEvent;
+        coords: [number, number];
+    }>;
+    keydown: CustomEvent<KeyboardEvent>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type EditableCell = InstanceType<typeof EditableCell>;
+export default EditableCell;

package/dist/shared/EmptyRowButton.svelte

@@ -1,4 +1,5 @@
-<script>export let on_click;
+<script lang="ts">
+	export let on_click: () => void;
 </script>
 
 <button class="add-row-button" on:click={on_click} aria-label="Add row">

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

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        on_click: () => 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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type EmptyRowButtonProps = typeof __propDef.props;
-export type EmptyRowButtonEvents = typeof __propDef.events;
-export type EmptyRowButtonSlots = typeof __propDef.slots;
-export default class EmptyRowButton extends SvelteComponent<EmptyRowButtonProps, EmptyRowButtonEvents, EmptyRowButtonSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const EmptyRowButton: $$__sveltets_2_IsomorphicComponent<{
+    on_click: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type EmptyRowButton = InstanceType<typeof EmptyRowButton>;
+export default EmptyRowButton;

package/dist/shared/Example.svelte

@@ -1,4 +1,5 @@
-<script>export let value;
+<script lang="ts">
+	export let value: (string | number)[][];
 </script>
 
 <table class="input-dataframe-example">

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

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value: (string | number)[][];
+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 ExampleProps = typeof __propDef.props;
-export type ExampleEvents = typeof __propDef.events;
-export type ExampleSlots = typeof __propDef.slots;
-export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Example: $$__sveltets_2_IsomorphicComponent<{
+    value: (string | number)[][];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Example = InstanceType<typeof Example>;
+export default Example;

package/dist/shared/FilterMenu.svelte

@@ -1,42 +1,56 @@
-<script>import { onMount } from "svelte";
-import { Check, DropdownArrow } from "@gradio/icons";
-export let on_filter = () => {
-};
-let menu_element;
-let datatype = "string";
-let current_filter = "Contains";
-let filter_dropdown_open = false;
-let filter_input_value = "";
-const filter_options = {
-  string: [
-    "Contains",
-    "Does not contain",
-    "Starts with",
-    "Ends with",
-    "Is",
-    "Is not",
-    "Is empty",
-    "Is not empty"
-  ],
-  number: ["=", "\u2260", ">", "<", "\u2265", "\u2264", "Is empty", "Is not empty"]
-};
-onMount(() => {
-  position_menu();
-});
-function position_menu() {
-  if (!menu_element) return;
-  const viewport_width = window.innerWidth;
-  const viewport_height = window.innerHeight;
-  const menu_rect = menu_element.getBoundingClientRect();
-  const x = (viewport_width - menu_rect.width) / 2;
-  const y = (viewport_height - menu_rect.height) / 2;
-  menu_element.style.left = `${x}px`;
-  menu_element.style.top = `${y}px`;
-}
-function handle_filter_input(e) {
-  const target = e.target;
-  filter_input_value = target.value;
-}
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { Check, DropdownArrow } from "@gradio/icons";
+	import type { FilterDatatype } from "./context/dataframe_context";
+
+	export let on_filter: (
+		datatype: FilterDatatype,
+		selected_filter: string,
+		value: string
+	) => void = () => {};
+
+	let menu_element: HTMLDivElement;
+	let datatype: "string" | "number" = "string";
+	let current_filter = "Contains";
+	let filter_dropdown_open = false;
+	let filter_input_value = "";
+
+	const filter_options = {
+		string: [
+			"Contains",
+			"Does not contain",
+			"Starts with",
+			"Ends with",
+			"Is",
+			"Is not",
+			"Is empty",
+			"Is not empty"
+		],
+		number: ["=", "≠", ">", "<", "≥", "≤", "Is empty", "Is not empty"]
+	};
+
+	onMount(() => {
+		position_menu();
+	});
+
+	function position_menu(): void {
+		if (!menu_element) return;
+
+		const viewport_width = window.innerWidth;
+		const viewport_height = window.innerHeight;
+		const menu_rect = menu_element.getBoundingClientRect();
+
+		const x = (viewport_width - menu_rect.width) / 2;
+		const y = (viewport_height - menu_rect.height) / 2;
+
+		menu_element.style.left = `${x}px`;
+		menu_element.style.top = `${y}px`;
+	}
+
+	function handle_filter_input(e: Event): void {
+		const target = e.target as HTMLInputElement;
+		filter_input_value = target.value;
+	}
 </script>
 
 <div>