@gradio/tabitem 0.3.5 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @gradio/tabitem
 
+## 0.4.1
+
+### Fixes
+
+- [#10372](https://github.com/gradio-app/gradio/pull/10372) [`96bbde2`](https://github.com/gradio-app/gradio/commit/96bbde277e059f79bb2c9898576050e84dab147a) - Allow propogation of fill_height through Rows and Tabs, via scale.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/tabs@0.4.1
+- @gradio/column@0.2.0
+
+## 0.4.0
+
+### Dependency updates
+
+- @gradio/column@0.2.0
+
+## 0.4.0
+
+### Features
+
+- [#10192](https://github.com/gradio-app/gradio/pull/10192) [`4fc7fb7`](https://github.com/gradio-app/gradio/commit/4fc7fb777c42af537e4af612423fa44029657d41) - Ensure components can be remounted with their previous data.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.10.0
+- @gradio/tabs@0.4.0
+- @gradio/column@0.2.0
+
+## 0.3.5
+
+### Dependency updates
+
+- @gradio/column@0.2.0
+
 ## 0.3.5
 
 ### Dependency updates

package/Index.svelte

@@ -17,6 +17,8 @@
 		| undefined;
 	export let visible = true;
 	export let interactive = true;
+	export let order: number;
+	export let scale: number;
 </script>
 
 <TabItem
@@ -26,6 +28,8 @@
 	{visible}
 	{interactive}
 	{id}
+	{order}
+	{scale}
 	on:select={({ detail }) => gradio?.dispatch("select", detail)}
 >
 	<slot />

package/dist/Index.svelte

@@ -9,6 +9,8 @@ export let id;
 export let gradio;
 export let visible = true;
 export let interactive = true;
+export let order;
+export let scale;
 </script>
 
 <TabItem
@@ -18,6 +20,8 @@ export let interactive = true;
 	{visible}
 	{interactive}
 	{id}
+	{order}
+	{scale}
 	on:select={({ detail }) => gradio?.dispatch("select", detail)}
 >
 	<slot />

package/dist/Index.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
         }> | undefined;
         visible?: boolean | undefined;
         interactive?: boolean | undefined;
+        order: number;
+        scale: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/shared/TabItem.svelte

@@ -7,32 +7,43 @@ 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 });
+  tab_index = register_tab(
+    { label, id, elem_id, visible, interactive, scale },
+    order
+  );
 onMount(() => {
-  return () => unregister_tab({ label, id, elem_id });
+  return () => 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(' ')}"
-	style:display={$selected_tab === id && visible ? "block" : "none"}
+	class:grow-children={scale >= 1}
+	style:display={$selected_tab === id && visible ? "flex" : "none"}
+	style:flex-grow={scale}
 	role="tabpanel"
 >
-	<Column>
+	<Column scale={scale >= 1 ? scale : null}>
 		<slot />
 	</Column>
 </div>
 
+<!-- {/if} -->
+
 <style>
 	div {
 		display: flex;
+		flex-direction: column;
 		position: relative;
 		border: none;
 		border-radius: var(--radius-sm);
@@ -40,4 +51,7 @@ $:
 		width: 100%;
 		box-sizing: border-box;
 	}
+	.grow-children > :global(.column > .column) {
+		flex-grow: 1;
+	}
 </style>

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

@@ -8,6 +8,8 @@ declare const __propDef: {
         id?: (string | number | object) | undefined;
         visible: boolean;
         interactive: boolean;
+        order: number;
+        scale: number;
     };
     events: {
         select: CustomEvent<SelectData>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabitem",
-  "version": "0.3.5",
+  "version": "0.4.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@gradio/column": "^0.2.0",
-    "@gradio/tabs": "^0.3.5",
-    "@gradio/utils": "^0.9.0"
+    "@gradio/tabs": "^0.4.1",
+    "@gradio/utils": "^0.10.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/TabItem.svelte

@@ -10,6 +10,8 @@
 	export let id: string | number | object = {};
 	export let visible: boolean;
 	export let interactive: boolean;
+	export let order: number;
+	export let scale: number;
 
 	const dispatch = createEventDispatcher<{ select: SelectData }>();
 
@@ -18,30 +20,39 @@
 
 	let tab_index: number;
 
-	$: tab_index = register_tab({ label, id, elem_id, visible, interactive });
+	$: tab_index = register_tab(
+		{ label, id, elem_id, visible, interactive, scale },
+		order
+	);
 
 	onMount(() => {
-		return (): void => unregister_tab({ label, id, elem_id });
+		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(' ')}"
-	style:display={$selected_tab === id && visible ? "block" : "none"}
+	class:grow-children={scale >= 1}
+	style:display={$selected_tab === id && visible ? "flex" : "none"}
+	style:flex-grow={scale}
 	role="tabpanel"
 >
-	<Column>
+	<Column scale={scale >= 1 ? scale : null}>
 		<slot />
 	</Column>
 </div>
 
+<!-- {/if} -->
+
 <style>
 	div {
 		display: flex;
+		flex-direction: column;
 		position: relative;
 		border: none;
 		border-radius: var(--radius-sm);
@@ -49,4 +60,7 @@
 		width: 100%;
 		box-sizing: border-box;
 	}
+	.grow-children > :global(.column > .column) {
+		flex-grow: 1;
+	}
 </style>