@gradio/tabitem 0.8.3 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @gradio/tabitem
 
+## 0.10.0
+
+### Features
+
+- [`3111c06`](https://github.com/gradio-app/gradio/commit/3111c069d59ccd4ed5b4d2118baa8ada62569bfd) - Add height/max_height to gr.Accordion and gr.Tab, fix gr.Code max_lines.  Thanks @dawoodkhan82!
+
+## 0.9.0
+
+### Features
+
+- [#13851](https://github.com/gradio-app/gradio/pull/13851) [`afffecc`](https://github.com/gradio-app/gradio/commit/afffeccf69262a8070a091b50206c1e33b8c06c4) - Add configurable tab overflow and alignment.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/utils@0.14.2
+- @gradio/tabs@0.11.0
+
+## 0.8.3
+
+### Dependency updates
+
+- @gradio/utils@0.14.1
+
 ## 0.8.3
 
 ### Fixes

package/Index.svelte

@@ -1,9 +1,9 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	export { default as BaseTabItem } from "./shared/TabItem.svelte";
 </script>
 
 <script lang="ts">
-	import { Gradio } from "@gradio/utils";
+	import { Gradio, css_units } from "@gradio/utils";
 	import TabItem from "./shared/TabItem.svelte";
 	import type { TabItemProps, TabItemEvents } from "./types";
 
@@ -20,9 +20,16 @@
 	interactive={gradio.shared.interactive}
 	id={gradio.props.id}
 	order={gradio.props.order}
+	alignment={gradio.props.alignment}
 	scale={gradio.shared.scale}
+	height={gradio.props.height != null
+		? css_units(gradio.props.height)
+		: undefined}
+	max_height={gradio.props.max_height != null
+		? css_units(gradio.props.max_height)
+		: undefined}
 	component_id={gradio.props.component_id}
 	onselect={(data) => gradio.dispatch("select", data)}
 >
-	<slot />
+	{@render props.children?.()}
 </TabItem>

package/TabItem.test.ts

@@ -15,6 +15,27 @@ describe("TabItem", () => {
 		expect(getByTestId("tab-content")).toHaveTextContent("tab panel content");
 	});
 
+	test("max_height caps the panel height and makes it scrollable", async () => {
+		const { getByRole } = await render(TabItemHarness, {
+			tab_selected: "t1",
+			tab_max_height: "100px"
+		});
+
+		const panel = getByRole("tabpanel", { hidden: true });
+		expect(panel.style.maxHeight).toBe("100px");
+		expect(getComputedStyle(panel).overflowY).toBe("auto");
+	});
+
+	test("panel is not scrollable when no height is set", async () => {
+		const { getByRole } = await render(TabItemHarness, {
+			tab_selected: "t1"
+		});
+
+		const panel = getByRole("tabpanel", { hidden: true });
+		expect(panel.style.maxHeight).toBe("");
+		expect(getComputedStyle(panel).overflowY).toBe("visible");
+	});
+
 	test("content is visible when this tab is the selected tab", async () => {
 		const { getByTestId } = await render(TabItemHarness, {
 			tab_selected: "t1"
@@ -87,6 +108,20 @@ describe("TabItem", () => {
 			);
 		});
 	});
+
+	test("registers its alignment with the parent tabs", async () => {
+		const on_register = vi.fn();
+		await render(TabItemHarness, {
+			tab_alignment: "right",
+			on_register
+		});
+
+		await waitFor(() => {
+			expect(on_register).toHaveBeenCalledWith(
+				expect.objectContaining({ alignment: "right" })
+			);
+		});
+	});
 });
 
 describe("Events: select", () => {

package/TabItemHarness.svelte

@@ -29,7 +29,10 @@
 	order={0}
 	visible={cfg.tab_visible ?? true}
 	interactive={true}
+	alignment={cfg.tab_alignment ?? "left"}
 	scale={0}
+	height={cfg.tab_height}
+	max_height={cfg.tab_max_height}
 	component_id={1}
 	onselect={(data) => cfg.on_tab_select?.(data)}
 >

package/dist/Index.svelte

@@ -1,9 +1,9 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	export { default as BaseTabItem } from "./shared/TabItem.svelte";
 </script>
 
 <script lang="ts">
-	import { Gradio } from "@gradio/utils";
+	import { Gradio, css_units } from "@gradio/utils";
 	import TabItem from "./shared/TabItem.svelte";
 	import type { TabItemProps, TabItemEvents } from "./types";
 
@@ -20,9 +20,16 @@
 	interactive={gradio.shared.interactive}
 	id={gradio.props.id}
 	order={gradio.props.order}
+	alignment={gradio.props.alignment}
 	scale={gradio.shared.scale}
+	height={gradio.props.height != null
+		? css_units(gradio.props.height)
+		: undefined}
+	max_height={gradio.props.max_height != null
+		? css_units(gradio.props.max_height)
+		: undefined}
 	component_id={gradio.props.component_id}
 	onselect={(data) => gradio.dispatch("select", data)}
 >
-	<slot />
+	{@render props.children?.()}
 </TabItem>

package/dist/Index.svelte.d.ts

@@ -1,21 +1,4 @@
 export { default as BaseTabItem } from "./shared/TabItem.svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Index: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, "">;
-type Index = InstanceType<typeof Index>;
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/TabItemHarness.svelte

@@ -29,7 +29,10 @@
 	order={0}
 	visible={cfg.tab_visible ?? true}
 	interactive={true}
+	alignment={cfg.tab_alignment ?? "left"}
 	scale={0}
+	height={cfg.tab_height}
+	max_height={cfg.tab_max_height}
 	component_id={1}
 	onselect={(data) => cfg.on_tab_select?.(data)}
 >

package/dist/shared/TabItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, tick, untrack } from "svelte";
+	import { getContext, tick, untrack, type Snippet } from "svelte";
 	import { TABS } from "@gradio/tabs";
 	import { BaseColumn } from "@gradio/column";
 	import type { SelectData } from "@gradio/utils";
@@ -12,9 +12,13 @@
 		visible,
 		interactive,
 		order,
+		alignment = "left",
 		scale,
+		height,
+		max_height,
 		component_id,
-		onselect
+		onselect,
+		children
 	}: {
 		elem_id?: string;
 		elem_classes?: string[];
@@ -23,9 +27,13 @@
 		visible: boolean | "hidden";
 		interactive: boolean;
 		order: number;
+		alignment?: "left" | "right";
 		scale: number;
+		height?: string;
+		max_height?: string;
 		component_id: number;
 		onselect?: (data: SelectData) => void;
+		children?: Snippet;
 	} = $props();
 
 	const { register_tab, unregister_tab, selected_tab, selected_tab_index } =
@@ -47,6 +55,7 @@
 			elem_id,
 			visible,
 			interactive,
+			alignment,
 			scale,
 			component_id
 		})
@@ -75,12 +84,15 @@
 	id={elem_id}
 	class="tabitem {elem_classes.join(' ')}"
 	class:grow-children={scale >= 1}
+	class:scrollable={height || max_height}
 	style:display={$selected_tab === tab_id && is_visible ? "flex" : "none"}
 	style:flex-grow={scale}
+	style:height
+	style:max-height={max_height}
 	role="tabpanel"
 >
 	<BaseColumn scale={scale >= 1 ? scale : null}>
-		<slot />
+		{@render children?.()}
 	</BaseColumn>
 </div>
 
@@ -94,6 +106,9 @@
 		width: 100%;
 		box-sizing: border-box;
 	}
+	.scrollable {
+		overflow-y: auto;
+	}
 	.grow-children > :global(.column > .column) {
 		flex-grow: 1;
 	}

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

@@ -1,3 +1,4 @@
+import { type Snippet } from "svelte";
 import type { SelectData } from "@gradio/utils";
 type $$ComponentProps = {
     elem_id?: string;
@@ -7,34 +8,14 @@ type $$ComponentProps = {
     visible: boolean | "hidden";
     interactive: boolean;
     order: number;
+    alignment?: "left" | "right";
     scale: number;
+    height?: string;
+    max_height?: string;
     component_id: number;
     onselect?: (data: SelectData) => void;
+    children?: Snippet;
 };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const TabItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<$$ComponentProps, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, "">;
-type TabItem = InstanceType<typeof TabItem>;
+declare const TabItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabItem = ReturnType<typeof TabItem>;
 export default TabItem;

package/dist/types.d.ts

@@ -7,6 +7,9 @@ export interface TabItemProps {
     visible: boolean | "hidden";
     interactive: boolean;
     order: number;
+    alignment?: "left" | "right";
+    height?: number | string | null;
+    max_height?: number | string | null;
     component_id: number;
 }
 export interface TabItemEvents {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabitem",
-  "version": "0.8.3",
+  "version": "0.10.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,12 +16,12 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
+    "@gradio/tabs": "^0.11.0",
     "@gradio/column": "^0.4.1",
-    "@gradio/tabs": "^0.10.0",
-    "@gradio/utils": "^0.14.0"
+    "@gradio/utils": "^0.14.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.17.0"
+    "@gradio/preview": "^0.17.1"
   },
   "peerDependencies": {
     "svelte": "^5.48.0"

package/shared/TabItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, tick, untrack } from "svelte";
+	import { getContext, tick, untrack, type Snippet } from "svelte";
 	import { TABS } from "@gradio/tabs";
 	import { BaseColumn } from "@gradio/column";
 	import type { SelectData } from "@gradio/utils";
@@ -12,9 +12,13 @@
 		visible,
 		interactive,
 		order,
+		alignment = "left",
 		scale,
+		height,
+		max_height,
 		component_id,
-		onselect
+		onselect,
+		children
 	}: {
 		elem_id?: string;
 		elem_classes?: string[];
@@ -23,9 +27,13 @@
 		visible: boolean | "hidden";
 		interactive: boolean;
 		order: number;
+		alignment?: "left" | "right";
 		scale: number;
+		height?: string;
+		max_height?: string;
 		component_id: number;
 		onselect?: (data: SelectData) => void;
+		children?: Snippet;
 	} = $props();
 
 	const { register_tab, unregister_tab, selected_tab, selected_tab_index } =
@@ -47,6 +55,7 @@
 			elem_id,
 			visible,
 			interactive,
+			alignment,
 			scale,
 			component_id
 		})
@@ -75,12 +84,15 @@
 	id={elem_id}
 	class="tabitem {elem_classes.join(' ')}"
 	class:grow-children={scale >= 1}
+	class:scrollable={height || max_height}
 	style:display={$selected_tab === tab_id && is_visible ? "flex" : "none"}
 	style:flex-grow={scale}
+	style:height
+	style:max-height={max_height}
 	role="tabpanel"
 >
 	<BaseColumn scale={scale >= 1 ? scale : null}>
-		<slot />
+		{@render children?.()}
 	</BaseColumn>
 </div>
 
@@ -94,6 +106,9 @@
 		width: 100%;
 		box-sizing: border-box;
 	}
+	.scrollable {
+		overflow-y: auto;
+	}
 	.grow-children > :global(.column > .column) {
 		flex-grow: 1;
 	}

package/types.ts

@@ -8,6 +8,9 @@ export interface TabItemProps {
 	visible: boolean | "hidden";
 	interactive: boolean;
 	order: number;
+	alignment?: "left" | "right";
+	height?: number | string | null;
+	max_height?: number | string | null;
 	component_id: number;
 }