@gradio/tabitem 0.6.0 → 0.6.2-dev.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @gradio/tabitem
 
+## 0.6.2-dev.0
+
+### Dependency updates
+
+- @gradio/tabs@0.5.2-dev.0
+- @gradio/column@0.2.2
+
+## 0.6.2-dev.0
+
+### Dependency updates
+
+- @gradio/utils@0.10.3-dev.0
+- @gradio/column@0.2.2
+- @gradio/tabs@0.5.2-dev.0
+
+## 0.6.1
+
+### Fixes
+
+- [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/tabs@0.5.1
+- @gradio/column@0.2.2
+
 ## 0.6.0
 
 ### Features

package/Index.svelte

@@ -3,36 +3,25 @@
 </script>
 
 <script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
+	import { Gradio } from "@gradio/utils";
 	import TabItem from "./shared/TabItem.svelte";
+	import type { TabItemProps, TabItemEvents } from "./types";
 
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let label: string;
-	export let id: string | number;
-	export let gradio:
-		| Gradio<{
-				select: SelectData;
-		  }>
-		| undefined;
-	export let visible = true;
-	export let interactive = true;
-	export let order: number;
-	export let scale: number;
+	let props = $props();
+
+	const gradio = new Gradio<TabItemEvents, TabItemProps>(props);
 </script>
 
 <TabItem
-	{elem_id}
-	{elem_classes}
-	{label}
-	{visible}
-	{interactive}
-	{id}
-	{order}
-	{scale}
-	on:select={({ detail }) => gradio?.dispatch("select", detail)}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	label={gradio.shared.label}
+	visible={gradio.shared.visible}
+	interactive={gradio.shared.interactive}
+	id={gradio.props.id}
+	order={gradio.props.order}
+	scale={gradio.props.scale}
+	on:select={({ detail }) => gradio.dispatch("select", detail)}
 >
-	{#if visible}
-		<slot />
-	{/if}
+	<slot />
 </TabItem>

package/dist/Index.svelte

@@ -1,30 +1,27 @@
-<script context="module">export { default as BaseTabItem } from "./shared/TabItem.svelte";
+<script context="module" lang="ts">
+	export { default as BaseTabItem } from "./shared/TabItem.svelte";
 </script>
 
-<script>import TabItem from "./shared/TabItem.svelte";
-export let elem_id = "";
-export let elem_classes = [];
-export let label;
-export let id;
-export let gradio;
-export let visible = true;
-export let interactive = true;
-export let order;
-export let scale;
+<script lang="ts">
+	import { Gradio } from "@gradio/utils";
+	import TabItem from "./shared/TabItem.svelte";
+	import type { TabItemProps, TabItemEvents } from "./types";
+
+	let props = $props();
+
+	const gradio = new Gradio<TabItemEvents, TabItemProps>(props);
 </script>
 
 <TabItem
-	{elem_id}
-	{elem_classes}
-	{label}
-	{visible}
-	{interactive}
-	{id}
-	{order}
-	{scale}
-	on:select={({ detail }) => gradio?.dispatch("select", detail)}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	label={gradio.shared.label}
+	visible={gradio.shared.visible}
+	interactive={gradio.shared.interactive}
+	id={gradio.props.id}
+	order={gradio.props.order}
+	scale={gradio.props.scale}
+	on:select={({ detail }) => gradio.dispatch("select", detail)}
 >
-	{#if visible}
-		<slot />
-	{/if}
+	<slot />
 </TabItem>

package/dist/Index.svelte.d.ts

@@ -1,31 +1,21 @@
-import { SvelteComponent } from "svelte";
 export { default as BaseTabItem } from "./shared/TabItem.svelte";
-import type { Gradio, SelectData } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        elem_id?: string;
-        elem_classes?: string[];
-        label: string;
-        id: string | number;
-        gradio: Gradio<{
-            select: SelectData;
-        }> | undefined;
-        visible?: boolean;
-        interactive?: boolean;
-        order: number;
-        scale: number;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-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> {
+    z_$$bindings?: Bindings;
 }
+declare const Index: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Index = InstanceType<typeof Index>;
+export default Index;

package/dist/shared/TabItem.svelte

@@ -1,41 +1,61 @@
-<script>import { getContext, onMount, createEventDispatcher, tick } from "svelte";
-import { TABS } from "@gradio/tabs";
-import Column from "@gradio/column";
-export let elem_id = "";
-export let elem_classes = [];
-export let label;
-export let id = {};
-export let visible;
-export let interactive;
-export let order;
-export let scale;
-const dispatch = createEventDispatcher();
-const { register_tab, unregister_tab, selected_tab, selected_tab_index } = getContext(TABS);
-let tab_index;
-$: tab_index = register_tab(
-  { label, id, elem_id, visible, interactive, scale },
-  order
-);
-onMount(() => {
-  return () => unregister_tab({ label, id, elem_id }, order);
-});
-$: $selected_tab_index === tab_index && tick().then(() => dispatch("select", { value: label, index: tab_index }));
+<script lang="ts">
+	import { getContext, onMount, createEventDispatcher, tick } from "svelte";
+	import { TABS } from "@gradio/tabs";
+	import { BaseColumn } from "@gradio/column";
+	import type { SelectData } from "@gradio/utils";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let label: string;
+	export let id: string | number | object = {};
+	export let visible: boolean | "hidden";
+	export let interactive: boolean;
+	export let order: number;
+	export let scale: number;
+
+	const dispatch = createEventDispatcher<{ select: SelectData }>();
+
+	const { register_tab, unregister_tab, selected_tab, selected_tab_index } =
+		getContext(TABS) as any;
+
+	let tab_index: number;
+
+	function _register_tab(obj: string, order: number): number {
+		obj = JSON.parse(obj);
+		return register_tab(obj, order);
+	}
+
+	$: props_json = JSON.stringify({
+		label,
+		id,
+		elem_id,
+		visible,
+		interactive,
+		scale
+	});
+
+	$: tab_index = _register_tab(props_json, order);
+
+	onMount(() => {
+		return (): void => unregister_tab({ label, id, elem_id }, order);
+	});
+
+	$: $selected_tab_index === tab_index &&
+		tick().then(() => dispatch("select", { value: label, index: tab_index }));
 </script>
 
-{#if $selected_tab === id && visible}
-	<div
-		id={elem_id}
-		class="tabitem {elem_classes.join(' ')}"
-		class:grow-children={scale >= 1}
-		style:display={$selected_tab === id && visible ? "flex" : "none"}
-		style:flex-grow={scale}
-		role="tabpanel"
-	>
-		<Column scale={scale >= 1 ? scale : null}>
-			<slot />
-		</Column>
-	</div>
-{/if}
+<div
+	id={elem_id}
+	class="tabitem {elem_classes.join(' ')}"
+	class:grow-children={scale >= 1}
+	style:display={$selected_tab === id && visible !== false ? "flex" : "none"}
+	style:flex-grow={scale}
+	role="tabpanel"
+>
+	<BaseColumn scale={scale >= 1 ? scale : null}>
+		<slot />
+	</BaseColumn>
+</div>
 
 <style>
 	div {

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

@@ -1,30 +1,39 @@
-import { SvelteComponent } from "svelte";
 import type { SelectData } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        elem_id?: string;
-        elem_classes?: string[];
-        label: string;
-        id?: string | number | object;
-        visible: boolean;
-        interactive: boolean;
-        order: number;
-        scale: number;
+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;
     };
-    events: {
-        select: CustomEvent<SelectData>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TabItemProps = typeof __propDef.props;
-export type TabItemEvents = typeof __propDef.events;
-export type TabItemSlots = typeof __propDef.slots;
-export default class TabItem extends SvelteComponent<TabItemProps, TabItemEvents, TabItemSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+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<{
+    elem_id?: string;
+    elem_classes?: string[];
+    label: string;
+    id?: string | number | object;
+    visible: boolean | "hidden";
+    interactive: boolean;
+    order: number;
+    scale: number;
+}, {
+    default: {};
+}>, {
+    select: CustomEvent<SelectData>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type TabItem = InstanceType<typeof TabItem>;
+export default TabItem;

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+import type { SelectData } from "@gradio/utils";
+export interface TabItemProps {
+    elem_id: string;
+    elem_classes: string[];
+    label: string;
+    id: string | number;
+    visible: boolean | "hidden";
+    interactive: boolean;
+    order: number;
+    scale: number;
+}
+export interface TabItemEvents {
+    select: SelectData;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabitem",
-  "version": "0.6.0",
+  "version": "0.6.2-dev.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,15 +16,15 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/column": "^0.2.1",
-    "@gradio/tabs": "^0.5.0",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/column": "^0.2.2",
+    "@gradio/utils": "^0.10.3-dev.0",
+    "@gradio/tabs": "^0.5.2-dev.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.14.0"
+    "@gradio/preview": "^0.15.0-dev.0"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.43.4"
   },
   "repository": {
     "type": "git",

package/shared/TabItem.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { getContext, onMount, createEventDispatcher, tick } from "svelte";
 	import { TABS } from "@gradio/tabs";
-	import Column from "@gradio/column";
+	import { BaseColumn } from "@gradio/column";
 	import type { SelectData } from "@gradio/utils";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let label: string;
 	export let id: string | number | object = {};
-	export let visible: boolean;
+	export let visible: boolean | "hidden";
 	export let interactive: boolean;
 	export let order: number;
 	export let scale: number;
@@ -20,10 +20,21 @@
 
 	let tab_index: number;
 
-	$: tab_index = register_tab(
-		{ label, id, elem_id, visible, interactive, scale },
-		order
-	);
+	function _register_tab(obj: string, order: number): number {
+		obj = JSON.parse(obj);
+		return register_tab(obj, order);
+	}
+
+	$: props_json = JSON.stringify({
+		label,
+		id,
+		elem_id,
+		visible,
+		interactive,
+		scale
+	});
+
+	$: tab_index = _register_tab(props_json, order);
 
 	onMount(() => {
 		return (): void => unregister_tab({ label, id, elem_id }, order);
@@ -33,20 +44,18 @@
 		tick().then(() => dispatch("select", { value: label, index: tab_index }));
 </script>
 
-{#if $selected_tab === id && visible}
-	<div
-		id={elem_id}
-		class="tabitem {elem_classes.join(' ')}"
-		class:grow-children={scale >= 1}
-		style:display={$selected_tab === id && visible ? "flex" : "none"}
-		style:flex-grow={scale}
-		role="tabpanel"
-	>
-		<Column scale={scale >= 1 ? scale : null}>
-			<slot />
-		</Column>
-	</div>
-{/if}
+<div
+	id={elem_id}
+	class="tabitem {elem_classes.join(' ')}"
+	class:grow-children={scale >= 1}
+	style:display={$selected_tab === id && visible !== false ? "flex" : "none"}
+	style:flex-grow={scale}
+	role="tabpanel"
+>
+	<BaseColumn scale={scale >= 1 ? scale : null}>
+		<slot />
+	</BaseColumn>
+</div>
 
 <style>
 	div {

package/types.ts

@@ -0,0 +1,16 @@
+import type { SelectData } from "@gradio/utils";
+
+export interface TabItemProps {
+	elem_id: string;
+	elem_classes: string[];
+	label: string;
+	id: string | number;
+	visible: boolean | "hidden";
+	interactive: boolean;
+	order: number;
+	scale: number;
+}
+
+export interface TabItemEvents {
+	select: SelectData;
+}