@gradio/dataframe 0.16.5 → 0.17.1

package/shared/EditableCell.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { MarkdownCode } from "@gradio/markdown-code";
-
+	import type { I18nFormatter } from "@gradio/utils";
+	import SelectionButtons from "./icons/SelectionButtons.svelte";
 	export let edit: boolean;
 	export let value: string | number = "";
 	export let display_value: string | null = null;
@@ -13,7 +14,8 @@
 		| "html"
 		| "number"
 		| "bool"
-		| "date" = "str";
+		| "date"
+		| "image" = "str";
 	export let latex_delimiters: {
 		left: string;
 		right: string;
@@ -22,10 +24,23 @@
 	export let clear_on_focus = false;
 	export let line_breaks = true;
 	export let editable = true;
+	export let is_static = false;
 	export let root: string;
 	export let max_chars: number | null = null;
+	export let components: Record<string, any> = {};
+	export let i18n: I18nFormatter;
+	export let is_dragging = false;
+
+	export let show_selection_buttons = false;
+	export let coords: [number, number] | null = null;
+	export let on_select_column: ((col: number) => void) | null = null;
+	export let on_select_row: ((row: number) => void) | null = null;
+
+	const dispatch = createEventDispatcher<{
+		blur: void;
+		keydown: KeyboardEvent;
+	}>();
 
-	const dispatch = createEventDispatcher();
 	let is_expanded = false;
 
 	export let el: HTMLInputElement | null;
@@ -33,16 +48,28 @@
 
 	function truncate_text(
 		text: string | number,
-		max_length: number | null = null
+		max_length: number | null = null,
+		is_image = false
 	): string {
+		if (is_image) return String(text);
 		const str = String(text);
-		if (!max_length || str.length <= max_length) return str;
+		if (!max_length || max_length <= 0) return str;
+		if (str.length <= max_length) return str;
 		return str.slice(0, max_length) + "...";
 	}
 
-	$: display_text = is_expanded
+	$: should_truncate =
+		!edit && !is_expanded && max_chars !== null && max_chars > 0;
+
+	$: display_content = editable
 		? value
-		: truncate_text(display_value || value, max_chars);
+		: display_value !== null
+			? display_value
+			: value;
+
+	$: display_text = should_truncate
+		? truncate_text(display_content, max_chars, datatype === "image")
+		: display_content;
 
 	function use_focus(node: HTMLInputElement): any {
 		if (clear_on_focus) {
@@ -86,7 +113,10 @@
 
 {#if edit}
 	<input
+		readonly={is_static}
+		aria-readonly={is_static}
 		role="textbox"
+		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
 		bind:this={el}
 		bind:value={_value}
 		class:header
@@ -101,6 +131,7 @@
 {/if}
 
 <span
+	class:dragging={is_dragging}
 	on:click={handle_click}
 	on:keydown={handle_keydown}
 	tabindex="0"
@@ -111,9 +142,22 @@
 	on:focus|preventDefault
 	style={styling}
 	data-editable={editable}
+	data-max-chars={max_chars}
+	data-expanded={is_expanded}
 	placeholder=" "
+	class:text={datatype === "str"}
 >
-	{#if datatype === "html"}
+	{#if datatype === "image" && components.image}
+		<svelte:component
+			this={components.image}
+			value={{ url: display_text }}
+			show_label={false}
+			label="cell-image"
+			show_download_button={false}
+			{i18n}
+			gradio={{ dispatch: () => {} }}
+		/>
+	{:else if datatype === "html"}
 		{@html display_text}
 	{:else if datatype === "markdown"}
 		<MarkdownCode
@@ -124,23 +168,36 @@
 			{root}
 		/>
 	{:else}
-		{editable ? display_text : display_value || display_text}
+		{display_text}
 	{/if}
 </span>
+{#if show_selection_buttons && coords && on_select_column && on_select_row}
+	<SelectionButtons
+		position="column"
+		{coords}
+		on_click={() => on_select_column(coords[1])}
+	/>
+	<SelectionButtons
+		position="row"
+		{coords}
+		on_click={() => on_select_row(coords[0])}
+	/>
+{/if}
 
 <style>
+	.dragging {
+		cursor: crosshair !important;
+	}
+
 	input {
 		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-		bottom: var(--size-2);
-		left: var(--size-2);
 		flex: 1 1 0%;
 		transform: translateX(-0.1px);
 		outline: none;
 		border: none;
 		background: transparent;
 		cursor: text;
+		width: calc(100% - var(--size-2));
 	}
 
 	span {
@@ -155,25 +212,37 @@
 		cursor: text;
 		width: 100%;
 		height: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
-	span.expanded {
+	span.text:not(.expanded) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	span.text.expanded {
 		height: auto;
 		min-height: 100%;
 		white-space: pre-wrap;
 		word-break: break-word;
-		white-space: normal;
+		overflow: visible;
 	}
 
 	.multiline {
-		white-space: pre-line;
+		white-space: pre;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.header {
 		transform: translateX(0);
 		font-weight: var(--weight-bold);
-		white-space: normal;
-		word-break: break-word;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 		margin-left: var(--size-1);
 	}
 
@@ -181,4 +250,14 @@
 		opacity: 0;
 		pointer-events: none;
 	}
+
+	span :global(img) {
+		max-height: 100px;
+		width: auto;
+		object-fit: contain;
+	}
+
+	input:read-only {
+		cursor: not-allowed;
+	}
 </style>

package/shared/EmptyRowButton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	export let on_click: () => void;
+</script>
+
+<button class="add-row-button" on:click={on_click} aria-label="Add row">
+	+
+</button>
+
+<style>
+	.add-row-button {
+		width: 100%;
+		padding: var(--size-1);
+		background: transparent;
+		border: 1px dashed var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		color: var(--body-text-color);
+		cursor: pointer;
+		transition: all 150ms;
+		margin-top: var(--size-2);
+		z-index: 10;
+		position: relative;
+		pointer-events: auto;
+	}
+
+	.add-row-button:hover {
+		background: var(--background-fill-secondary);
+		border-style: solid;
+	}
+</style>

package/shared/RowNumber.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	export let index: number | null = null;
+	export let is_header = false;
+</script>
+
+{#if is_header}
+	<th tabindex="-1" class="row-number">
+		<div class="cell-wrap">
+			<div class="header-content">
+				<div class="header-text"></div>
+			</div>
+		</div>
+	</th>
+{:else}
+	<td class="row-number" tabindex="-1" data-row={index} data-col="row-number">
+		{index !== null ? index + 1 : ""}
+	</td>
+{/if}
+
+<style>
+	.row-number {
+		text-align: center;
+		padding: var(--size-1);
+		min-width: var(--size-12);
+		width: var(--size-12);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: var(--weight-semibold);
+		background: var(--table-even-background-fill);
+		border-right: 1px solid var(--border-color-primary);
+	}
+
+	:global(tr:nth-child(odd)) .row-number {
+		background: var(--table-odd-background-fill);
+	}
+
+	:global(tr:nth-child(even)) .row-number {
+		background: var(--table-even-background-fill);
+	}
+</style>