@gradio/dataframe 0.11.0-beta.7 → 0.11.0-beta.8

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @gradio/dataframe
 
+## 0.11.0-beta.8
+
+### Features
+
+- [#9601](https://github.com/gradio-app/gradio/pull/9601) [`c078892`](https://github.com/gradio-app/gradio/commit/c07889223cb64661b17560b707b977248809470a) - Tweak gr.Dataframe menu UX.  Thanks @hannahblair!
+- [#9575](https://github.com/gradio-app/gradio/pull/9575) [`4ec2feb`](https://github.com/gradio-app/gradio/commit/4ec2feb04e452d2c77482c09543c59948567be67) - Update gr.Dataframe UI with action popover.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/button@0.3.0-beta.7
+- @gradio/markdown@0.10.0-beta.5
+
 ## 0.11.0-beta.7
 
 ### Dependency updates

package/Dataframe.stories.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
 	import Table from "./shared/Table.svelte";
+	import { within } from "@testing-library/dom";
+	import { userEvent } from "@storybook/test";
+	import { get } from "svelte/store";
+	import { format } from "svelte-i18n";
 </script>
 
 <Meta
@@ -17,7 +21,7 @@
 />
 
 <Template let:args>
-	<Table {...args} i18n={(s) => s} />
+	<Table {...args} i18n={get(format)} />
 </Template>
 
 <Story
@@ -161,3 +165,28 @@
 		editable: false
 	}}
 />
+
+<Story
+	name="Dataframe with dialog interactions"
+	args={{
+		values: [
+			[800, 100, 400],
+			[200, 800, 700]
+		],
+		col_count: [3, "dynamic"],
+		row_count: [2, "dynamic"],
+		headers: ["Math", "Reading", "Writing"],
+		editable: true
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const cell = canvas.getByText("200");
+		userEvent.click(cell);
+		const open_dialog_btn = canvas.getAllByText("⋮");
+		await userEvent.click(open_dialog_btn[0]);
+
+		const add_row_btn = canvas.getByText("Add row above");
+		await userEvent.click(add_row_btn);
+	}}
+/>

package/dist/shared/Arrow.svelte

@@ -0,0 +1,9 @@
+<script>export let transform;
+</script>
+
+<svg viewBox="0 0 24 24" width="16" height="16">
+	<path
+		d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+		{transform}
+	/>
+</svg>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        transform: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ArrowProps = typeof __propDef.props;
+export type ArrowEvents = typeof __propDef.events;
+export type ArrowSlots = typeof __propDef.slots;
+export default class Arrow extends SvelteComponent<ArrowProps, ArrowEvents, ArrowSlots> {
+}
+export {};

package/dist/shared/CellMenu.svelte

@@ -0,0 +1,101 @@
+<script>import { onMount } from "svelte";
+import Arrow from "./Arrow.svelte";
+export let x;
+export let y;
+export let on_add_row_above;
+export let on_add_row_below;
+export let on_add_column_left;
+export let on_add_column_right;
+export let row;
+export let i18n;
+let menu_element;
+$:
+  is_header = row === -1;
+onMount(() => {
+  position_menu();
+});
+function position_menu() {
+  if (!menu_element)
+    return;
+  const viewport_width = window.innerWidth;
+  const viewport_height = window.innerHeight;
+  const menu_rect = menu_element.getBoundingClientRect();
+  let new_x = x - 30;
+  let new_y = y - 20;
+  if (new_x + menu_rect.width > viewport_width) {
+    new_x = x - menu_rect.width + 10;
+  }
+  if (new_y + menu_rect.height > viewport_height) {
+    new_y = y - menu_rect.height + 10;
+  }
+  menu_element.style.left = `${new_x}px`;
+  menu_element.style.top = `${new_y}px`;
+}
+</script>
+
+<div bind:this={menu_element} class="cell-menu">
+	{#if !is_header}
+		<button on:click={() => on_add_row_above()}>
+			<Arrow transform="rotate(-90 12 12)" />
+			{i18n("dataframe.add_row_above")}
+		</button>
+		<button on:click={() => on_add_row_below()}>
+			<Arrow transform="rotate(90 12 12)" />
+			{i18n("dataframe.add_row_below")}
+		</button>
+	{/if}
+	<button on:click={() => on_add_column_left()}>
+		<Arrow transform="rotate(180 12 12)" />
+		{i18n("dataframe.add_column_left")}
+	</button>
+	<button on:click={() => on_add_column_right()}>
+		<Arrow transform="rotate(0 12 12)" />
+		{i18n("dataframe.add_column_right")}
+	</button>
+</div>
+
+<style>
+	.cell-menu {
+		position: fixed;
+		z-index: var(--layer-2);
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		padding: var(--size-1);
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-1);
+		box-shadow: var(--shadow-drop-lg);
+		min-width: 150px;
+	}
+
+	.cell-menu button {
+		background: none;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		padding: var(--size-1) var(--size-2);
+		border-radius: var(--radius-sm);
+		color: var(--body-text-color);
+		font-size: var(--text-sm);
+		transition:
+			background-color 0.2s,
+			color 0.2s;
+		display: flex;
+		align-items: center;
+		gap: var(--size-2);
+	}
+
+	.cell-menu button:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.cell-menu button :global(svg) {
+		fill: currentColor;
+		transition: fill 0.2s;
+	}
+
+	.cell-menu button:hover :global(svg) {
+		fill: var(--color-accent);
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { I18nFormatter } from "js/utils/src";
+declare const __propDef: {
+    props: {
+        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;
+        i18n: I18nFormatter;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CellMenuProps = typeof __propDef.props;
+export type CellMenuEvents = typeof __propDef.events;
+export type CellMenuSlots = typeof __propDef.slots;
+export default class CellMenu extends SvelteComponent<CellMenuProps, CellMenuEvents, CellMenuSlots> {
+}
+export {};