@gradio/dataframe 0.21.7 → 0.23.0

package/shared/TableCell.svelte

@@ -1,330 +0,0 @@
-<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
-	class:pinned-column={j < actual_pinned_columns}
-	class:last-pinned={j === actual_pinned_columns - 1}
-	tabindex={j < actual_pinned_columns ? -1 : 0}
-	bind:this={el.cell}
-	data-row={index}
-	data-col={j}
-	data-testid={`cell-${index}-${j}`}
-	on:mousedown={(e) => handle_cell_click(e, index, j)}
-	on:contextmenu|preventDefault={(e) => toggle_cell_menu(e, index, j)}
-	style="width: {get_cell_width(j)}; left: {get_cell_position(j)}; {styling ||
-		''}"
-	class:flash={copy_flash && is_in_selection}
-	class:cell-selected={is_in_selection}
-	class:no-top={has_no_top}
-	class:no-bottom={has_no_bottom}
-	class:no-left={has_no_left}
-	class:no-right={has_no_right}
-	class:menu-active={active_cell_menu &&
-		active_cell_menu.row === index &&
-		active_cell_menu.col === j}
-	class:dragging={is_dragging}
->
-	<div class="cell-wrap">
-		<EditableCell
-			bind:value
-			bind:el={el.input}
-			display_value={display_value !== undefined
-				? display_value
-				: String(value)}
-			{latex_delimiters}
-			{line_breaks}
-			{editable}
-			{is_static}
-			edit={editing && editing[0] === index && editing[1] === j}
-			{datatype}
-			on:focus={() => {
-				const row = index;
-				const col = j;
-				if (!selected_cells.some(([r, c]) => r === row && c === col)) {
-					selected_cells = [[row, col]];
-				}
-			}}
-			on:blur={handle_blur}
-			{max_chars}
-			{i18n}
-			{components}
-			show_selection_buttons={selected_cells.length === 1 &&
-				selected_cells[0][0] === index &&
-				selected_cells[0][1] === j}
-			coords={[index, j]}
-			on_select_column={handle_select_column}
-			on_select_row={handle_select_row}
-			{is_dragging}
-			wrap_text={wrap}
-		/>
-		{#if editable && should_show_cell_menu([index, j], selected_cells, editable)}
-			<CellMenuButton on_click={(event) => toggle_cell_menu(event, index, j)} />
-		{/if}
-	</div>
-</td>
-
-<style>
-	td {
-		--ring-color: transparent;
-		position: relative;
-		outline: none;
-		box-shadow: inset 0 0 0 1px var(--ring-color);
-		padding: 0;
-		border-right-width: 0px;
-		border-left-width: 1px;
-		border-style: solid;
-		border-color: var(--border-color-primary);
-	}
-
-	.cell-wrap {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		outline: none;
-		min-height: var(--size-9);
-		position: relative;
-		height: 100%;
-		padding: var(--size-2);
-		box-sizing: border-box;
-		margin: 0;
-		gap: var(--size-1);
-		overflow: visible;
-		min-width: 0;
-		border-radius: var(--table-radius);
-	}
-
-	.cell-selected {
-		--ring-color: var(--color-accent);
-		box-shadow: inset 0 0 0 2px var(--ring-color);
-		z-index: 2;
-		position: relative;
-	}
-
-	.cell-selected :global(.cell-menu-button) {
-		display: flex;
-	}
-
-	.flash.cell-selected {
-		animation: flash-color 700ms ease-out;
-	}
-
-	@keyframes flash-color {
-		0%,
-		30% {
-			background: var(--color-accent-copied);
-		}
-
-		100% {
-			background: transparent;
-		}
-	}
-
-	.pinned-column {
-		position: sticky;
-		z-index: 3;
-		border-right: none;
-	}
-
-	.pinned-column:nth-child(odd) {
-		background: var(--table-odd-background-fill);
-	}
-
-	.pinned-column:nth-child(even) {
-		background: var(--table-even-background-fill);
-	}
-
-	td:first-child {
-		border-left-width: 0px;
-	}
-
-	:global(tr:last-child) td:first-child {
-		border-bottom-left-radius: var(--table-radius);
-	}
-
-	:global(tr:last-child) td:last-child {
-		border-bottom-right-radius: var(--table-radius);
-	}
-
-	.dragging {
-		cursor: crosshair;
-	}
-
-	/* Add back the cell selection border styles */
-	.cell-selected.no-top {
-		box-shadow:
-			inset 2px 0 0 var(--ring-color),
-			inset -2px 0 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-bottom {
-		box-shadow:
-			inset 2px 0 0 var(--ring-color),
-			inset -2px 0 0 var(--ring-color),
-			inset 0 2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-left {
-		box-shadow:
-			inset 0 2px 0 var(--ring-color),
-			inset -2px 0 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-right {
-		box-shadow:
-			inset 0 2px 0 var(--ring-color),
-			inset 2px 0 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-top.no-left {
-		box-shadow:
-			inset -2px 0 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-top.no-right {
-		box-shadow:
-			inset 2px 0 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-bottom.no-left {
-		box-shadow:
-			inset -2px 0 0 var(--ring-color),
-			inset 0 2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-bottom.no-right {
-		box-shadow:
-			inset 2px 0 0 var(--ring-color),
-			inset 0 2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-top.no-bottom {
-		box-shadow:
-			inset 2px 0 0 var(--ring-color),
-			inset -2px 0 0 var(--ring-color);
-	}
-
-	.cell-selected.no-left.no-right {
-		box-shadow:
-			inset 0 2px 0 var(--ring-color),
-			inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-top.no-left.no-right {
-		box-shadow: inset 0 -2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-bottom.no-left.no-right {
-		box-shadow: inset 0 2px 0 var(--ring-color);
-	}
-
-	.cell-selected.no-left.no-top.no-bottom {
-		box-shadow: inset -2px 0 0 var(--ring-color);
-	}
-
-	.cell-selected.no-right.no-top.no-bottom {
-		box-shadow: inset 2px 0 0 var(--ring-color);
-	}
-
-	.cell-selected.no-top.no-bottom.no-left.no-right {
-		box-shadow: none;
-	}
-</style>

package/shared/TableHeader.svelte

@@ -1,344 +0,0 @@
-<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
-	class:pinned-column={i < actual_pinned_columns}
-	class:last-pinned={i === actual_pinned_columns - 1}
-	class:focus={header_edit === i || selected_header === i}
-	class:sorted={sort_index !== -1}
-	class:filtered={filter_index !== -1}
-	aria-sort={get_sort_status(value, sort_columns, headers) === "none"
-		? "none"
-		: get_sort_status(value, sort_columns, headers) === "asc"
-			? "ascending"
-			: "descending"}
-	style="width: {get_cell_width(i)}; left: {get_header_position(i)};"
-	on:click={(event) => handle_header_click(event, i)}
-	on:mousedown={(event) => {
-		event.preventDefault();
-		event.stopPropagation();
-	}}
-	title={value}
->
-	<div class="cell-wrap">
-		<div class="header-content">
-			{#if is_bool_column && editable && on_select_all}
-				<div
-					class="select-all-checkbox"
-					role="button"
-					tabindex="0"
-					on:click|stopPropagation
-					on:keydown|stopPropagation={(e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-						}
-					}}
-					on:mousedown|stopPropagation
-				>
-					<BaseCheckbox
-						value={select_all_state === "checked"}
-						indeterminate={select_all_state === "indeterminate"}
-						label=""
-						interactive={true}
-						on:select={() => {
-							if (on_select_all) {
-								const new_value = select_all_state !== "checked";
-								on_select_all(i, new_value);
-							}
-						}}
-					/>
-				</div>
-			{/if}
-			<button
-				class="header-button"
-				on:click={(event) => handle_header_click(event, i)}
-				on:mousedown={(event) => {
-					event.preventDefault();
-					event.stopPropagation();
-				}}
-				title={value}
-			>
-				<EditableCell
-					{max_chars}
-					bind:value
-					bind:el
-					{latex_delimiters}
-					{line_breaks}
-					edit={header_edit === i}
-					on:keydown={(event) => {
-						if (
-							event.detail.key === "Enter" ||
-							event.detail.key === "Escape" ||
-							event.detail.key === "Tab"
-						) {
-							end_header_edit(event);
-						}
-					}}
-					header
-					{editable}
-					{is_static}
-					{i18n}
-					coords={[i, 0]}
-				/>
-				{#if sort_index !== -1}
-					<div class="sort-indicators">
-						<span class="sort-arrow">
-							{#if current_direction === "asc"}
-								<SortArrowUp size={12} />
-							{:else}
-								<SortArrowDown size={12} />
-							{/if}
-						</span>
-						{#if sort_columns.length > 1}
-							<span class="sort-priority">
-								{sort_priority}
-							</span>
-						{/if}
-					</div>
-				{/if}
-				{#if filter_index !== -1}
-					<div class="filter-indicators">
-						<span class="filter-icon">
-							<CellMenuIcons icon="filter" />
-						</span>
-					</div>
-				{/if}
-			</button>
-			{#if is_static}
-				<Padlock />
-			{/if}
-		</div>
-		{#if can_add_columns}
-			<CellMenuButton on_click={(event) => toggle_header_menu(event, i)} />
-		{/if}
-	</div>
-</th>
-
-<style>
-	th {
-		--ring-color: transparent;
-		position: relative;
-		outline: none;
-		box-shadow: inset 0 0 0 1px var(--ring-color);
-		padding: 0;
-		background: var(--table-even-background-fill);
-		border-right-width: 0px;
-		border-left-width: 1px;
-		border-style: solid;
-		border-color: var(--border-color-primary);
-	}
-
-	th:first-child {
-		border-top-left-radius: var(--table-radius);
-		border-bottom-left-radius: var(--table-radius);
-		border-left-width: 0px;
-	}
-
-	th:last-child {
-		border-top-right-radius: var(--table-radius);
-		border-bottom-right-radius: var(--table-radius);
-	}
-
-	th.focus {
-		--ring-color: var(--color-accent);
-		box-shadow: inset 0 0 0 2px var(--ring-color);
-		z-index: 4;
-	}
-
-	th.focus :global(.cell-menu-button) {
-		display: flex;
-	}
-
-	th:hover :global(.cell-menu-button) {
-		display: flex;
-	}
-
-	.cell-wrap {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		outline: none;
-		min-height: var(--size-9);
-		position: relative;
-		height: 100%;
-		padding: var(--size-2);
-		box-sizing: border-box;
-		margin: 0;
-		gap: var(--size-1);
-		overflow: visible;
-		min-width: 0;
-		border-radius: var(--table-radius);
-	}
-
-	.header-content {
-		display: flex;
-		align-items: center;
-		overflow: hidden;
-		flex-grow: 1;
-		min-width: 0;
-		white-space: normal;
-		overflow-wrap: break-word;
-		word-break: normal;
-		height: 100%;
-		gap: var(--size-1);
-	}
-
-	.header-button {
-		display: flex;
-		text-align: left;
-		width: 100%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: flex;
-		align-items: center;
-		position: relative;
-	}
-
-	.sort-indicators {
-		display: flex;
-		align-items: center;
-		margin-left: var(--size-1);
-		gap: var(--size-1);
-	}
-
-	.sort-arrow {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--body-text-color);
-	}
-
-	.sort-priority {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: var(--size-2);
-		background-color: var(--button-secondary-background-fill);
-		color: var(--body-text-color);
-		border-radius: var(--radius-sm);
-		width: var(--size-2-5);
-		height: var(--size-2-5);
-		padding: var(--size-1-5);
-	}
-
-	.filter-indicators {
-		display: flex;
-		align-items: center;
-		margin-left: var(--size-1);
-		gap: var(--size-1);
-	}
-
-	.filter-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--body-text-color);
-	}
-
-	.pinned-column {
-		position: sticky;
-		z-index: 5;
-		border-right: none;
-	}
-
-	.select-all-checkbox {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-right: var(--size-1);
-		flex-shrink: 0;
-	}
-
-	.select-all-checkbox :global(label) {
-		margin: 0;
-	}
-
-	.select-all-checkbox :global(span) {
-		display: none;
-	}
-</style>