@gradio/tabitem 0.8.2 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @gradio/tabitem
 
+## 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
+
+- [#13644](https://github.com/gradio-app/gradio/pull/13644) [`f0abb1e`](https://github.com/gradio-app/gradio/commit/f0abb1ea8e61f4b886296365639b9fe0492012a9) - restore shared props lost during frontend prop partitioning.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/utils@0.14.0
+- @gradio/column@0.4.1
+- @gradio/tabs@0.10.0
+
 ## 0.8.2
 
 ### Dependency updates

package/Index.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	export { default as BaseTabItem } from "./shared/TabItem.svelte";
 </script>
 
@@ -20,9 +20,10 @@
 	interactive={gradio.shared.interactive}
 	id={gradio.props.id}
 	order={gradio.props.order}
-	scale={gradio.props.scale}
+	alignment={gradio.props.alignment}
+	scale={gradio.shared.scale}
 	component_id={gradio.props.component_id}
 	onselect={(data) => gradio.dispatch("select", data)}
 >
-	<slot />
+	{@render props.children?.()}
 </TabItem>

package/TabItem.test.ts

@@ -87,6 +87,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,6 +29,7 @@
 	order={0}
 	visible={cfg.tab_visible ?? true}
 	interactive={true}
+	alignment={cfg.tab_alignment ?? "left"}
 	scale={0}
 	component_id={1}
 	onselect={(data) => cfg.on_tab_select?.(data)}

package/dist/Index.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	export { default as BaseTabItem } from "./shared/TabItem.svelte";
 </script>
 
@@ -20,9 +20,10 @@
 	interactive={gradio.shared.interactive}
 	id={gradio.props.id}
 	order={gradio.props.order}
-	scale={gradio.props.scale}
+	alignment={gradio.props.alignment}
+	scale={gradio.shared.scale}
 	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,6 +29,7 @@
 	order={0}
 	visible={cfg.tab_visible ?? true}
 	interactive={true}
+	alignment={cfg.tab_alignment ?? "left"}
 	scale={0}
 	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,11 @@
 		visible,
 		interactive,
 		order,
+		alignment = "left",
 		scale,
 		component_id,
-		onselect
+		onselect,
+		children
 	}: {
 		elem_id?: string;
 		elem_classes?: string[];
@@ -23,9 +25,11 @@
 		visible: boolean | "hidden";
 		interactive: boolean;
 		order: number;
+		alignment?: "left" | "right";
 		scale: number;
 		component_id: number;
 		onselect?: (data: SelectData) => void;
+		children?: Snippet;
 	} = $props();
 
 	const { register_tab, unregister_tab, selected_tab, selected_tab_index } =
@@ -47,6 +51,7 @@
 			elem_id,
 			visible,
 			interactive,
+			alignment,
 			scale,
 			component_id
 		})
@@ -80,7 +85,7 @@
 	role="tabpanel"
 >
 	<BaseColumn scale={scale >= 1 ? scale : null}>
-		<slot />
+		{@render children?.()}
 	</BaseColumn>
 </div>
 

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,12 @@ type $$ComponentProps = {
     visible: boolean | "hidden";
     interactive: boolean;
     order: number;
+    alignment?: "left" | "right";
     scale: number;
     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,7 +7,7 @@ export interface TabItemProps {
     visible: boolean | "hidden";
     interactive: boolean;
     order: number;
-    scale: number;
+    alignment?: "left" | "right";
     component_id: number;
 }
 export interface TabItemEvents {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabitem",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,12 +16,12 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/column": "^0.4.0",
-    "@gradio/tabs": "^0.9.0",
-    "@gradio/utils": "^0.13.0"
+    "@gradio/column": "^0.4.1",
+    "@gradio/tabs": "^0.11.0",
+    "@gradio/utils": "^0.14.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.2"
+    "@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,11 @@
 		visible,
 		interactive,
 		order,
+		alignment = "left",
 		scale,
 		component_id,
-		onselect
+		onselect,
+		children
 	}: {
 		elem_id?: string;
 		elem_classes?: string[];
@@ -23,9 +25,11 @@
 		visible: boolean | "hidden";
 		interactive: boolean;
 		order: number;
+		alignment?: "left" | "right";
 		scale: number;
 		component_id: number;
 		onselect?: (data: SelectData) => void;
+		children?: Snippet;
 	} = $props();
 
 	const { register_tab, unregister_tab, selected_tab, selected_tab_index } =
@@ -47,6 +51,7 @@
 			elem_id,
 			visible,
 			interactive,
+			alignment,
 			scale,
 			component_id
 		})
@@ -80,7 +85,7 @@
 	role="tabpanel"
 >
 	<BaseColumn scale={scale >= 1 ? scale : null}>
-		<slot />
+		{@render children?.()}
 	</BaseColumn>
 </div>
 

package/types.ts

@@ -8,7 +8,7 @@ export interface TabItemProps {
 	visible: boolean | "hidden";
 	interactive: boolean;
 	order: number;
-	scale: number;
+	alignment?: "left" | "right";
 	component_id: number;
 }