add select event for tabitems

demo/blocks_xray/run.py

@@ -27,7 +27,7 @@ def ct_model(diseases, img):
     )
 
     with gr.Tabs():
-        with gr.TabItem("X-ray"):
+        with gr.TabItem("X-ray") as x_tab:
             with gr.Row():
                 xray_scan = gr.Image()
                 xray_results = gr.JSON()

gradio/blocks.py

@@ -202,15 +202,15 @@ def __init__(
     def get_template_context(self):
         return {"label": self.label, **super().get_template_context()}
 
-    def change(self, fn: Callable, inputs: List[Component], outputs: List[Component]):
+    def select(self, fn: Callable, inputs: List[Component], outputs: List[Component]):
         """
         Parameters:
             fn: Callable function
             inputs: List of inputs
             outputs: List of outputs
         Returns: None
         """
-        self.set_event_trigger("change", fn, inputs, outputs)
+        self.set_event_trigger("select", fn, inputs, outputs)
 
 
 class BlockFunction:

ui/packages/app/src/components/TabItem/Tabs.svelte

@@ -4,6 +4,6 @@
 	export let label: string;
 </script>
 
-<TabItem name={label}>
+<TabItem name={label} on:select>
 	<slot />
 </TabItem>

ui/packages/tabs/src/TabItem.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
-	import { getContext, onDestroy } from "svelte";
+	import { getContext, onMount, createEventDispatcher, tick } from "svelte";
 	import { TABS } from "./Tabs.svelte";
 
 	export let name: string;
+
+	const dispatch = createEventDispatcher<{ select: undefined }>();
 	const id = {};
 
 	const { register_tab, unregister_tab, selected_tab } = getContext(TABS);
 
 	register_tab({ name, id });
 
-	onDestroy(() => {
-		unregister_tab({ name, id });
+	onMount(() => {
+		return () => unregister_tab({ name, id });
 	});
+
+	$: $selected_tab === id && tick().then(() => dispatch("select"));
 </script>
 
 {#if $selected_tab === id}

ui/packages/workbench/src/routes/tabs.svelte

@@ -3,15 +3,15 @@
 </script>
 
 <Tabs>
-	<TabItem name="tab 1">
+	<TabItem name="tab 1" on:select={() => console.log("tab 1")}>
 		<h1>HELLO FROM TAB 1</h1>
 	</TabItem>
 
-	<TabItem name="tab 2">
+	<TabItem name="tab 2" on:select={() => console.log("tab 2")}>
 		<h1>HELLO FROM TAB 2</h1>
 	</TabItem>
 
-	<TabItem name="tab 3">
+	<TabItem name="tab 3" on:select={() => console.log("tab 3")}>
 		<h1>HELLO FROM TAB 2</h1>
 		<p>I am text</p>
 		<blockquote>I am a quote</blockquote>