@gradio/dataframe 0.16.5 → 0.17.1

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        on_click: (event: MouseEvent) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/shared/CellMenuIcons.svelte

@@ -109,4 +109,83 @@
 			stroke-linecap="round"
 		/>
 	</svg>
+{:else if icon == "sort-asc"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M8 16L12 12L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M12 12V19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 7H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "sort-desc"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M8 12L12 16L16 12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M12 16V9"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 5H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "clear-sort"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<path
+			d="M5 5H19"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 9H15"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 13H11"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M5 17H7"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M17 17L21 21M21 17L17 21"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
 {/if}

package/dist/shared/EditableCell.svelte

@@ -1,5 +1,6 @@
 <script>import { createEventDispatcher } from "svelte";
 import { MarkdownCode } from "@gradio/markdown-code";
+import SelectionButtons from "./icons/SelectionButtons.svelte";
 export let edit;
 export let value = "";
 export let display_value = null;
@@ -10,21 +11,37 @@ export let latex_delimiters;
 export let clear_on_focus = false;
 export let line_breaks = true;
 export let editable = true;
+export let is_static = false;
 export let root;
 export let max_chars = null;
+export let components = {};
+export let i18n;
+export let is_dragging = false;
+export let show_selection_buttons = false;
+export let coords = null;
+export let on_select_column = null;
+export let on_select_row = null;
 const dispatch = createEventDispatcher();
 let is_expanded = false;
 export let el;
 $:
   _value = value;
-function truncate_text(text, max_length = null) {
+function truncate_text(text, max_length = null, is_image = false) {
+  if (is_image)
+    return String(text);
   const str = String(text);
-  if (!max_length || str.length <= max_length)
+  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 ? value : truncate_text(display_value || value, max_chars);
+  should_truncate = !edit && !is_expanded && 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) {
   if (clear_on_focus) {
     _value = "";
@@ -60,7 +77,10 @@ function handle_click() {
 
 {#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
@@ -75,6 +95,7 @@ function handle_click() {
 {/if}
 
 <span
+	class:dragging={is_dragging}
 	on:click={handle_click}
 	on:keydown={handle_keydown}
 	tabindex="0"
@@ -85,9 +106,22 @@ function handle_click() {
 	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
@@ -98,23 +132,36 @@ function handle_click() {
 			{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 {
@@ -129,25 +176,37 @@ function handle_click() {
 		cursor: text;
 		width: 100%;
 		height: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	span.text:not(.expanded) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
-	span.expanded {
+	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);
 	}
 
@@ -155,4 +214,14 @@ function handle_click() {
 		opacity: 0;
 		pointer-events: none;
 	}
+
+	span :global(img) {
+		max-height: 100px;
+		width: auto;
+		object-fit: contain;
+	}
+
+	input:read-only {
+		cursor: not-allowed;
+	}
 </style>

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

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { I18nFormatter } from "@gradio/utils";
 declare const __propDef: {
     props: {
         edit: boolean;
@@ -6,7 +7,7 @@ declare const __propDef: {
         display_value?: (string | null) | undefined;
         styling?: string | undefined;
         header?: boolean | undefined;
-        datatype?: ("str" | "markdown" | "html" | "number" | "bool" | "date") | undefined;
+        datatype?: ("str" | "markdown" | "html" | "number" | "bool" | "date" | "image") | undefined;
         latex_delimiters: {
             left: string;
             right: string;
@@ -15,8 +16,16 @@ declare const __propDef: {
         clear_on_focus?: boolean | undefined;
         line_breaks?: boolean | undefined;
         editable?: boolean | undefined;
+        is_static?: boolean | undefined;
         root: string;
         max_chars?: (number | null) | undefined;
+        components?: Record<string, any> | undefined;
+        i18n: I18nFormatter;
+        is_dragging?: boolean | undefined;
+        show_selection_buttons?: boolean | undefined;
+        coords?: ([number, number] | null) | undefined;
+        on_select_column?: (((col: number) => void) | null) | undefined;
+        on_select_row?: (((row: number) => void) | null) | undefined;
         el: HTMLInputElement | null;
     };
     events: {
@@ -24,8 +33,8 @@ declare const __propDef: {
         mouseup: MouseEvent;
         click: MouseEvent;
         focus: FocusEvent;
-        blur: CustomEvent<any>;
-        keydown: CustomEvent<any>;
+        blur: CustomEvent<void>;
+        keydown: CustomEvent<KeyboardEvent>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/EmptyRowButton.svelte

@@ -0,0 +1,28 @@
+<script>export let on_click;
+</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/dist/shared/EmptyRowButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        on_click: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/shared/RowNumber.svelte

@@ -0,0 +1,40 @@
+<script>export let index = 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>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        index?: (number | null) | undefined;
+        is_header?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RowNumberProps = typeof __propDef.props;
+export type RowNumberEvents = typeof __propDef.events;
+export type RowNumberSlots = typeof __propDef.slots;
+export default class RowNumber extends SvelteComponent<RowNumberProps, RowNumberEvents, RowNumberSlots> {
+}
+export {};