@gradio/dataframe 0.10.0 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @gradio/dataframe
 
+## 0.10.1
+
+### Features
+
+- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.1
+- @gradio/statustracker@0.7.6
+- @gradio/atoms@0.8.1
+- @gradio/client@1.5.2
+- @gradio/upload@0.12.4
+- @gradio/button@0.2.51
+- @gradio/markdown@0.9.4
+
 ## 0.10.0
 
 ### Features

package/Index.svelte

@@ -66,7 +66,10 @@
 		display_value = _data?.metadata?.display_value
 			? [..._data?.metadata?.display_value]
 			: null;
-		styling = _data?.metadata?.styling ? [..._data?.metadata?.styling] : null;
+		styling =
+			!interactive && _data?.metadata?.styling
+				? [..._data?.metadata?.styling]
+				: null;
 		await tick();
 
 		gradio.dispatch("change");

package/dist/Example.svelte

@@ -0,0 +1,104 @@
+<script>export let value;
+export let type;
+export let selected = false;
+export let index;
+let hovered = false;
+let loaded = Array.isArray(value);
+</script>
+
+{#if loaded}
+	<!-- TODO: fix-->
+	<!-- svelte-ignore a11y-no-static-element-interactions-->
+	<div
+		class:table={type === "table"}
+		class:gallery={type === "gallery"}
+		class:selected
+		on:mouseenter={() => (hovered = true)}
+		on:mouseleave={() => (hovered = false)}
+	>
+		{#if typeof value === "string"}
+			{value}
+		{:else}
+			<table class="">
+				{#each value.slice(0, 3) as row, i}
+					<tr>
+						{#each row.slice(0, 3) as cell, j}
+							<td>{cell}</td>
+						{/each}
+						{#if row.length > 3}
+							<td>…</td>
+						{/if}
+					</tr>
+				{/each}
+				{#if value.length > 3}
+					<div
+						class="overlay"
+						class:odd={index % 2 != 0}
+						class:even={index % 2 == 0}
+						class:button={type === "gallery"}
+					/>
+				{/if}
+			</table>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	table {
+		position: relative;
+	}
+
+	td {
+		border: 1px solid var(--table-border-color);
+		padding: var(--size-2);
+		font-size: var(--text-sm);
+		font-family: var(--font-mono);
+	}
+
+	.selected td {
+		border-color: var(--border-color-accent);
+	}
+
+	.table {
+		display: inline-block;
+		margin: 0 auto;
+	}
+
+	.gallery td:first-child {
+		border-left: none;
+	}
+
+	.gallery tr:first-child td {
+		border-top: none;
+	}
+
+	.gallery td:last-child {
+		border-right: none;
+	}
+
+	.gallery tr:last-child td {
+		border-bottom: none;
+	}
+
+	.overlay {
+		--gradient-to: transparent;
+		position: absolute;
+		bottom: 0;
+		background: linear-gradient(to bottom, transparent, var(--gradient-to));
+		width: var(--size-full);
+		height: 50%;
+	}
+
+	/* i dont know what i've done here but it is what it is */
+	.odd {
+		--gradient-to: var(--table-even-background-fill);
+	}
+
+	.even {
+		--gradient-to: var(--table-odd-background-fill);
+	}
+
+	.button {
+		--gradient-to: var(--background-fill-primary);
+	}
+</style>

package/dist/Example.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: (string | number)[][] | string;
+        type: "gallery" | "table";
+        selected?: boolean | undefined;
+        index: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/Index.svelte

@@ -0,0 +1,117 @@
+<script context="module">export { default as BaseDataFrame } from "./shared/Table.svelte";
+export { default as BaseExample } from "./Example.svelte";
+</script>
+
+<script>import { afterUpdate, tick } from "svelte";
+import { Block } from "@gradio/atoms";
+import Table from "./shared/Table.svelte";
+import { StatusTracker } from "@gradio/statustracker";
+export let headers = [];
+export let elem_id = "";
+export let elem_classes = [];
+export let visible = true;
+export let value = {
+  data: [["", "", ""]],
+  headers: ["1", "2", "3"],
+  metadata: null
+};
+let old_value = "";
+export let value_is_output = false;
+export let col_count;
+export let row_count;
+export let label = null;
+export let show_label = true;
+export let wrap;
+export let datatype;
+export let scale = null;
+export let min_width = void 0;
+export let root;
+export let line_breaks = true;
+export let column_widths = [];
+export let gradio;
+export let latex_delimiters;
+export let height = void 0;
+export let loading_status;
+export let interactive;
+let _headers;
+let display_value;
+let styling;
+let values;
+async function handle_change(data) {
+  let _data = data || value;
+  _headers = [..._data.headers || headers];
+  values = _data.data ? [..._data.data] : [];
+  display_value = _data?.metadata?.display_value ? [..._data?.metadata?.display_value] : null;
+  styling = !interactive && _data?.metadata?.styling ? [..._data?.metadata?.styling] : null;
+  await tick();
+  gradio.dispatch("change");
+  if (!value_is_output) {
+    gradio.dispatch("input");
+  }
+}
+handle_change();
+afterUpdate(() => {
+  value_is_output = false;
+});
+$: {
+  if (old_value && JSON.stringify(value) !== old_value) {
+    old_value = JSON.stringify(value);
+    handle_change();
+  }
+}
+if (Array.isArray(value) && value?.[0]?.length === 0 || value.data?.[0]?.length === 0) {
+  value = {
+    data: [Array(col_count?.[0] || 3).fill("")],
+    headers: Array(col_count?.[0] || 3).fill("").map((_, i) => `${i + 1}`),
+    metadata: null
+  };
+}
+async function handle_value_change(data) {
+  if (JSON.stringify(data) !== old_value) {
+    value = { ...data };
+    old_value = JSON.stringify(value);
+    handle_change(data);
+  }
+}
+</script>
+
+<Block
+	{visible}
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	container={false}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+	/>
+	<Table
+		{root}
+		{label}
+		{show_label}
+		{row_count}
+		{col_count}
+		{values}
+		{display_value}
+		{styling}
+		headers={_headers}
+		on:change={(e) => handle_value_change(e.detail)}
+		on:select={(e) => gradio.dispatch("select", e.detail)}
+		{wrap}
+		{datatype}
+		{latex_delimiters}
+		editable={interactive}
+		{height}
+		i18n={gradio.i18n}
+		{line_breaks}
+		{column_widths}
+		upload={gradio.client.upload}
+		stream_handler={gradio.client.stream}
+	/>
+</Block>

package/dist/Index.svelte.d.ts

@@ -0,0 +1,54 @@
+import { SvelteComponent } from "svelte";
+export { default as BaseDataFrame } from "./shared/Table.svelte";
+export { default as BaseExample } from "./Example.svelte";
+import type { Gradio, SelectData } from "@gradio/utils";
+import type { LoadingStatus } from "@gradio/statustracker";
+import type { Headers, Data, Metadata, Datatype } from "./shared/utils";
+declare const __propDef: {
+    props: {
+        headers?: Headers | undefined;
+        elem_id?: string | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        value?: {
+            data: Data;
+            headers: Headers;
+            metadata: Metadata;
+        } | undefined;
+        value_is_output?: boolean | undefined;
+        col_count: [number, "fixed" | "dynamic"];
+        row_count: [number, "fixed" | "dynamic"];
+        label?: (string | null) | undefined;
+        show_label?: boolean | undefined;
+        wrap: boolean;
+        datatype: Datatype | Datatype[];
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        root: string;
+        line_breaks?: boolean | undefined;
+        column_widths?: string[] | undefined;
+        gradio: Gradio<{
+            change: never;
+            select: SelectData;
+            input: never;
+            clear_status: LoadingStatus;
+        }>;
+        latex_delimiters: {
+            left: string;
+            right: string;
+            display: boolean;
+        }[];
+        height?: number | undefined;
+        loading_status: LoadingStatus;
+        interactive: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+}

package/dist/shared/EditableCell.svelte

@@ -0,0 +1,106 @@
+<script>import { createEventDispatcher } from "svelte";
+import { MarkdownCode } from "@gradio/markdown";
+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 clear_on_focus = false;
+export let select_on_focus = false;
+export let line_breaks = true;
+export let editable = true;
+export let root;
+const dispatch = createEventDispatcher();
+export let el;
+$:
+  _value = value;
+function use_focus(node) {
+  if (clear_on_focus) {
+    _value = "";
+  }
+  if (select_on_focus) {
+    node.select();
+  }
+  node.focus();
+  return {};
+}
+function handle_blur({
+  currentTarget
+}) {
+  value = currentTarget.value;
+  dispatch("blur");
+}
+</script>
+
+{#if edit}
+	<input
+		role="textbox"
+		bind:this={el}
+		bind:value={_value}
+		class:header
+		tabindex="-1"
+		on:blur={handle_blur}
+		use:use_focus
+		on:keydown
+	/>
+{/if}
+
+<span
+	on:dblclick
+	tabindex="-1"
+	role="button"
+	class:edit
+	on:focus|preventDefault
+	style={styling}
+>
+	{#if datatype === "html"}
+		{@html value}
+	{:else if datatype === "markdown"}
+		<MarkdownCode
+			message={value.toLocaleString()}
+			{latex_delimiters}
+			{line_breaks}
+			chatbot={false}
+			{root}
+		/>
+	{:else}
+		{editable ? value : display_value || value}
+	{/if}
+</span>
+
+<style>
+	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;
+	}
+
+	span {
+		flex: 1 1 0%;
+		outline: none;
+		padding: var(--size-2);
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		user-select: text;
+	}
+
+	.header {
+		transform: translateX(0);
+		font: var(--weight-bold);
+	}
+
+	.edit {
+		opacity: 0;
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        edit: boolean;
+        value?: (string | number) | undefined;
+        display_value?: (string | null) | undefined;
+        styling?: string | undefined;
+        header?: boolean | undefined;
+        datatype?: ("str" | "markdown" | "html" | "number" | "bool" | "date") | undefined;
+        latex_delimiters: {
+            left: string;
+            right: string;
+            display: boolean;
+        }[];
+        clear_on_focus?: boolean | undefined;
+        select_on_focus?: boolean | undefined;
+        line_breaks?: boolean | undefined;
+        editable?: boolean | undefined;
+        root: string;
+        el: HTMLInputElement | null;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        blur: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/shared/Example.svelte

@@ -0,0 +1,28 @@
+<script>export let value;
+</script>
+
+<table class="input-dataframe-example">
+	{#each value.slice(0, 3) as row}
+		<tr>
+			{#each row.slice(0, 3) as cell}
+				<td class="p-2">{cell}</td>
+			{/each}
+			{#if row.length > 3}
+				<td class="p-2">...</td>
+			{/if}
+		</tr>
+	{/each}
+	{#if value.length > 3}
+		<tr>
+			{#each Array(Math.min(4, value[0].length)) as _}
+				<td class="p-2">...</td>
+			{/each}
+		</tr>
+	{/if}
+</table>
+
+<style>
+	table {
+		border-collapse: separate;
+	}
+</style>

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

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