@gradio/dataframe 0.21.7 → 0.23.0

package/dist/shared/CellMenu.svelte

@@ -3,44 +3,66 @@
 	import CellMenuIcons from "./CellMenuIcons.svelte";
 	import FilterMenu from "./FilterMenu.svelte";
 	import type { I18nFormatter } from "@gradio/utils";
-	import type {
-		SortDirection,
-		FilterDatatype
-	} from "./context/dataframe_context";
-
-	export let x: number;
-	export let y: number;
-	export let on_add_row_above: () => void;
-	export let on_add_row_below: () => void;
-	export let on_add_column_left: () => void;
-	export let on_add_column_right: () => void;
-	export let row: number;
-	export let col_count: [number, "fixed" | "dynamic"];
-	export let row_count: [number, "fixed" | "dynamic"];
-	export let on_delete_row: () => void;
-	export let on_delete_col: () => void;
-	export let can_delete_rows: boolean;
-	export let can_delete_cols: boolean;
-	export let on_sort: (direction: SortDirection) => void = () => {};
-	export let on_clear_sort: () => void = () => {};
-	export let sort_direction: SortDirection | null = null;
-	export let sort_priority: number | null = null;
-	export let on_filter: (
-		datatype: FilterDatatype,
-		selected_filter: string,
-		value: string
-	) => void = () => {};
-	export let on_clear_filter: () => void = () => {};
-	export let filter_active: boolean | null = null;
-	export let editable = true;
-
-	export let i18n: I18nFormatter;
+	import type { SortDirection, FilterDatatype } from "./types";
+
+	let {
+		x,
+		y,
+		on_add_row_above,
+		on_add_row_below,
+		on_add_column_left,
+		on_add_column_right,
+		row,
+		col_count,
+		row_count,
+		on_delete_row,
+		on_delete_col,
+		can_delete_rows,
+		can_delete_cols,
+		on_sort = () => {},
+		on_clear_sort = () => {},
+		sort_direction = null,
+		sort_priority = null,
+		on_filter = () => {},
+		on_clear_filter = () => {},
+		filter_active = null,
+		editable = true,
+		i18n
+	}: {
+		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;
+	} = $props();
+
 	let menu_element: HTMLDivElement;
-	let active_filter_menu: { x: number; y: number } | null = null;
+	let active_filter_menu: { x: number; y: number } | null = $state(null);
 
-	$: is_header = row === -1;
-	$: can_add_rows = editable && row_count[1] === "dynamic";
-	$: can_add_columns = editable && col_count[1] === "dynamic";
+	let is_header = $derived(row === -1);
+	let can_add_rows = $derived(editable && row_count[1] === "dynamic");
+	let can_add_columns = $derived(editable && col_count[1] === "dynamic");
 
 	onMount(() => {
 		position_menu();
@@ -86,7 +108,7 @@
 	{#if is_header}
 		<button
 			role="menuitem"
-			on:click={() => on_sort("asc")}
+			onclick={() => on_sort("asc")}
 			class:active={sort_direction === "asc"}
 		>
 			<CellMenuIcons icon="sort-asc" />
@@ -97,7 +119,7 @@
 		</button>
 		<button
 			role="menuitem"
-			on:click={() => on_sort("desc")}
+			onclick={() => on_sort("desc")}
 			class:active={sort_direction === "desc"}
 		>
 			<CellMenuIcons icon="sort-desc" />
@@ -106,13 +128,16 @@
 				<span class="priority">{sort_priority}</span>
 			{/if}
 		</button>
-		<button role="menuitem" on:click={on_clear_sort}>
+		<button role="menuitem" onclick={on_clear_sort}>
 			<CellMenuIcons icon="clear-sort" />
 			{i18n("dataframe.clear_sort")}
 		</button>
 		<button
 			role="menuitem"
-			on:click|stopPropagation={toggle_filter_menu}
+			onclick={(e) => {
+				e.stopPropagation();
+				toggle_filter_menu();
+			}}
 			class:active={filter_active || active_filter_menu}
 		>
 			<CellMenuIcons icon="filter" />
@@ -121,7 +146,7 @@
 				<span class="priority">1</span>
 			{/if}
 		</button>
-		<button role="menuitem" on:click={on_clear_filter}>
+		<button role="menuitem" onclick={on_clear_filter}>
 			<CellMenuIcons icon="clear-filter" />
 			{i18n("dataframe.clear_filter")}
 		</button>
@@ -130,7 +155,7 @@
 	{#if !is_header && can_add_rows}
 		<button
 			role="menuitem"
-			on:click={() => on_add_row_above()}
+			onclick={() => on_add_row_above()}
 			aria-label="Add row above"
 		>
 			<CellMenuIcons icon="add-row-above" />
@@ -138,7 +163,7 @@
 		</button>
 		<button
 			role="menuitem"
-			on:click={() => on_add_row_below()}
+			onclick={() => on_add_row_below()}
 			aria-label="Add row below"
 		>
 			<CellMenuIcons icon="add-row-below" />
@@ -147,7 +172,7 @@
 		{#if can_delete_rows}
 			<button
 				role="menuitem"
-				on:click={on_delete_row}
+				onclick={on_delete_row}
 				class="delete"
 				aria-label="Delete row"
 			>
@@ -159,7 +184,7 @@
 	{#if can_add_columns}
 		<button
 			role="menuitem"
-			on:click={() => on_add_column_left()}
+			onclick={() => on_add_column_left()}
 			aria-label="Add column to the left"
 		>
 			<CellMenuIcons icon="add-column-left" />
@@ -167,7 +192,7 @@
 		</button>
 		<button
 			role="menuitem"
-			on:click={() => on_add_column_right()}
+			onclick={() => on_add_column_right()}
 			aria-label="Add column to the right"
 		>
 			<CellMenuIcons icon="add-column-right" />
@@ -176,7 +201,7 @@
 		{#if can_delete_cols}
 			<button
 				role="menuitem"
-				on:click={on_delete_col}
+				onclick={on_delete_col}
 				class="delete"
 				aria-label="Delete column"
 			>
@@ -194,7 +219,7 @@
 <style>
 	.cell-menu {
 		position: fixed;
-		z-index: 9;
+		z-index: var(--layer-1);
 		background: var(--background-fill-primary);
 		border: 1px solid var(--border-color-primary);
 		border-radius: var(--radius-sm);
@@ -204,7 +229,7 @@
 		gap: var(--size-1);
 		box-shadow: var(--shadow-drop-lg);
 		min-width: 150px;
-		z-index: var(--layer-1);
+		width: max-content;
 	}
 
 	.cell-menu button {

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

@@ -1,19 +1,6 @@
 import type { I18nFormatter } from "@gradio/utils";
-import type { SortDirection, FilterDatatype } from "./context/dataframe_context";
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CellMenu: $$__sveltets_2_IsomorphicComponent<{
+import type { SortDirection, FilterDatatype } from "./types";
+type $$ComponentProps = {
     x: number;
     y: number;
     on_add_row_above: () => void;
@@ -36,8 +23,7 @@ declare const CellMenu: $$__sveltets_2_IsomorphicComponent<{
     filter_active?: boolean | null;
     editable?: boolean;
     i18n: I18nFormatter;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CellMenu = InstanceType<typeof CellMenu>;
+};
+declare const CellMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type CellMenu = ReturnType<typeof CellMenu>;
 export default CellMenu;

package/dist/shared/CellMenuButton.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	export let on_click: (event: MouseEvent) => void;
+	let { on_click }: { on_click: (event: MouseEvent) => void } = $props();
 </script>
 
 <button
 	aria-label="Open cell menu"
 	class="cell-menu-button"
 	aria-haspopup="menu"
-	on:click={on_click}
-	on:touchstart={(event) => {
+	onclick={on_click}
+	ontouchstart={(event) => {
 		event.preventDefault();
 		const touch = event.touches[0];
 		const mouseEvent = new MouseEvent("click", {

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

@@ -1,20 +1,6 @@
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CellMenuButton: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     on_click: (event: MouseEvent) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CellMenuButton = InstanceType<typeof CellMenuButton>;
+};
+declare const CellMenuButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type CellMenuButton = ReturnType<typeof CellMenuButton>;
 export default CellMenuButton;

package/dist/shared/CellMenuIcons.svelte

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

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

@@ -1,20 +1,6 @@
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CellMenuIcons: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     icon: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CellMenuIcons = InstanceType<typeof CellMenuIcons>;
+};
+declare const CellMenuIcons: import("svelte").Component<$$ComponentProps, {}, "">;
+type CellMenuIcons = ReturnType<typeof CellMenuIcons>;
 export default CellMenuIcons;

package/dist/shared/DataCell.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import EditableCell from "./EditableCell.svelte";
+	import CellMenuButton from "./CellMenuButton.svelte";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import type { CellValue } from "./types";
+	import type { Datatype } from "./utils/utils";
+
+	let {
+		value,
+		display_value = null,
+		datatype = "str",
+		row_idx,
+		col_idx,
+		col_style = "",
+		cell_style = "",
+		selection_classes = "",
+		is_editing = false,
+		is_flash = false,
+		is_static = false,
+		show_menu_button = false,
+		show_selection_buttons = false,
+		is_first_column = false,
+		latex_delimiters,
+		line_breaks = true,
+		editable = true,
+		max_chars = undefined,
+		i18n,
+		components = {},
+		is_dragging = false,
+		wrap_text = false,
+		onmousedown,
+		ondblclick,
+		oncontextmenu,
+		onblur,
+		on_menu_click,
+		on_select_column,
+		on_select_row
+	}: {
+		value: CellValue;
+		display_value?: string | null;
+		datatype?: Datatype;
+		row_idx: number;
+		col_idx: number;
+		col_style?: string;
+		cell_style?: string;
+		selection_classes?: string;
+		is_editing?: boolean;
+		is_flash?: boolean;
+		is_static?: boolean;
+		show_menu_button?: boolean;
+		show_selection_buttons?: boolean;
+		is_first_column?: boolean;
+		latex_delimiters: { left: string; right: string; display: boolean }[];
+		line_breaks?: boolean;
+		editable?: boolean;
+		max_chars?: number | undefined;
+		i18n: I18nFormatter;
+		components?: Record<string, any>;
+		is_dragging?: boolean;
+		wrap_text?: boolean;
+		onmousedown: (event: MouseEvent) => void;
+		ondblclick: (event: MouseEvent) => void;
+		oncontextmenu: (event: MouseEvent) => void;
+		onblur: (detail: {
+			blur_event: FocusEvent;
+			coords: [number, number];
+		}) => void;
+		on_menu_click: (event: MouseEvent) => void;
+		on_select_column: (col: number) => void;
+		on_select_row: (row: number) => void;
+	} = $props();
+
+	let is_selected = $derived(selection_classes !== "");
+</script>
+
+<div
+	class="body-cell {selection_classes}"
+	class:flash={is_flash}
+	class:first-column={is_first_column}
+	data-row={row_idx}
+	data-col={col_idx}
+	data-testid={`cell-${row_idx}-${col_idx}`}
+	{onmousedown}
+	{ondblclick}
+	{oncontextmenu}
+	style="{col_style} {cell_style}"
+>
+	<div class="cell-wrap">
+		<EditableCell
+			{value}
+			{display_value}
+			{latex_delimiters}
+			{line_breaks}
+			{editable}
+			{is_static}
+			edit={is_editing}
+			{datatype}
+			{onblur}
+			{max_chars}
+			{i18n}
+			{components}
+			{show_selection_buttons}
+			coords={[row_idx, col_idx]}
+			{on_select_column}
+			{on_select_row}
+			{is_dragging}
+			{wrap_text}
+		/>
+		{#if show_menu_button}
+			<CellMenuButton on_click={on_menu_click} />
+		{/if}
+	</div>
+</div>
+
+<style>
+	.body-cell {
+		--ring-color: transparent;
+		outline: none;
+		box-shadow:
+			inset 1px 0 0 var(--border-color-primary),
+			inset 0 0 0 1px var(--ring-color);
+		padding: 0;
+		overflow: visible;
+		box-sizing: border-box;
+	}
+
+	.body-cell.first-column {
+		box-shadow: inset 0 0 0 1px var(--ring-color);
+	}
+
+	.body-cell:hover :global(.cell-menu-button),
+	.body-cell.cell-selected :global(.cell-menu-button) {
+		display: flex;
+	}
+
+	.body-cell.cell-selected {
+		--ring-color: var(--color-accent);
+		--sel-top: inset 0 2px 0 0 var(--ring-color);
+		--sel-bottom: inset 0 -2px 0 0 var(--ring-color);
+		--sel-left: inset 2px 0 0 0 var(--ring-color);
+		--sel-right: inset -2px 0 0 0 var(--ring-color);
+		box-shadow:
+			var(--sel-top), var(--sel-bottom), var(--sel-left), var(--sel-right);
+		z-index: 2;
+		position: relative;
+	}
+
+	.body-cell.cell-selected.no-top {
+		--sel-top: inset 0 0 0 0 transparent;
+	}
+	.body-cell.cell-selected.no-bottom {
+		--sel-bottom: inset 0 0 0 0 transparent;
+	}
+	.body-cell.cell-selected.no-left {
+		--sel-left: inset 0 0 0 0 transparent;
+	}
+	.body-cell.cell-selected.no-right {
+		--sel-right: inset 0 0 0 0 transparent;
+	}
+
+	.body-cell.flash.cell-selected {
+		animation: flash-color 700ms ease-out;
+	}
+
+	@keyframes flash-color {
+		0%,
+		30% {
+			background: var(--color-accent-copied);
+		}
+		100% {
+			background: transparent;
+		}
+	}
+
+	.cell-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		outline: none;
+		min-height: var(--size-9);
+		position: relative;
+		padding: var(--size-2);
+		box-sizing: border-box;
+		gap: var(--size-1);
+		overflow: visible;
+		min-width: 0;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,44 @@
+import type { I18nFormatter } from "js/core/src/gradio_helper";
+import type { CellValue } from "./types";
+import type { Datatype } from "./utils/utils";
+type $$ComponentProps = {
+    value: CellValue;
+    display_value?: string | null;
+    datatype?: Datatype;
+    row_idx: number;
+    col_idx: number;
+    col_style?: string;
+    cell_style?: string;
+    selection_classes?: string;
+    is_editing?: boolean;
+    is_flash?: boolean;
+    is_static?: boolean;
+    show_menu_button?: boolean;
+    show_selection_buttons?: boolean;
+    is_first_column?: boolean;
+    latex_delimiters: {
+        left: string;
+        right: string;
+        display: boolean;
+    }[];
+    line_breaks?: boolean;
+    editable?: boolean;
+    max_chars?: number | undefined;
+    i18n: I18nFormatter;
+    components?: Record<string, any>;
+    is_dragging?: boolean;
+    wrap_text?: boolean;
+    onmousedown: (event: MouseEvent) => void;
+    ondblclick: (event: MouseEvent) => void;
+    oncontextmenu: (event: MouseEvent) => void;
+    onblur: (detail: {
+        blur_event: FocusEvent;
+        coords: [number, number];
+    }) => void;
+    on_menu_click: (event: MouseEvent) => void;
+    on_select_column: (col: number) => void;
+    on_select_row: (row: number) => void;
+};
+declare const DataCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataCell = ReturnType<typeof DataCell>;
+export default DataCell;