@gradio/tabs 0.3.0-beta.3 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @gradio/tabs
 
+## 0.3.1
+
+### Fixes
+
+- [#9728](https://github.com/gradio-app/gradio/pull/9728) [`d0b2ce8`](https://github.com/gradio-app/gradio/commit/d0b2ce8c0f150f0b636ad7d2226f7c8c61401996) - Ensure tabs render in SSR mode and reduce time it takes for them to render.  Thanks @pngwn!
+
+## 0.3.0
+
+### Features
+
+- [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Playground requirements tab
+- [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Redesign `gr.Tabs()`
+- [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - UI theme fixes
+- [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Ssr part 2
+
+### Dependencies
+
+- @gradio/utils@0.7.0
+
 ## 0.3.0-beta.3
 
 ### Features

package/Index.svelte

@@ -9,10 +9,19 @@
 
 	const dispatch = createEventDispatcher();
 
+	interface Tab {
+		name: string;
+		id: string | number;
+		elem_id: string | undefined;
+		visible: boolean;
+		interactive: boolean;
+	}
+
 	export let visible = true;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let selected: number | string;
+	export let inital_tabs: Tab[];
 	export let gradio: Gradio<{
 		change: never;
 		select: SelectData;
@@ -28,6 +37,7 @@
 	bind:selected
 	on:change={() => gradio.dispatch("change")}
 	on:select={(e) => gradio.dispatch("select", e.detail)}
+	{inital_tabs}
 >
 	<slot />
 </Tabs>

package/dist/Index.svelte

@@ -8,6 +8,7 @@ export let visible = true;
 export let elem_id = "";
 export let elem_classes = [];
 export let selected;
+export let inital_tabs;
 export let gradio;
 $:
   dispatch("prop_change", { selected });
@@ -20,6 +21,7 @@ $:
 	bind:selected
 	on:change={() => gradio.dispatch("change")}
 	on:select={(e) => gradio.dispatch("select", e.detail)}
+	{inital_tabs}
 >
 	<slot />
 </Tabs>

package/dist/Index.svelte.d.ts

@@ -7,6 +7,13 @@ declare const __propDef: {
         elem_id?: string | undefined;
         elem_classes?: string[] | undefined;
         selected: number | string;
+        inital_tabs: {
+            name: string;
+            id: string | number;
+            elem_id: string | undefined;
+            visible: boolean;
+            interactive: boolean;
+        }[];
         gradio: Gradio<{
             change: never;
             select: SelectData;

package/dist/shared/Tabs.svelte

@@ -6,7 +6,8 @@
   setContext,
   createEventDispatcher,
   onMount,
-  onDestroy
+  onDestroy,
+  tick
 } from "svelte";
 import OverflowIcon from "./OverflowIcon.svelte";
 import { writable } from "svelte/store";
@@ -14,15 +15,20 @@ export let visible = true;
 export let elem_id = "";
 export let elem_classes = [];
 export let selected;
-let tabs = [];
+export let inital_tabs;
+let tabs = inital_tabs;
 let overflow_menu_open = false;
 let overflow_menu;
 $:
   has_tabs = tabs.length > 0;
 let tab_nav_el;
 let overflow_nav;
-const selected_tab = writable(false);
-const selected_tab_index = writable(0);
+const selected_tab = writable(
+  selected || tabs[0]?.id || false
+);
+const selected_tab_index = writable(
+  tabs.findIndex((t) => t.id === selected) || 0
+);
 const dispatch = createEventDispatcher();
 let is_overflowing = false;
 let overflow_has_selected_tab = false;
@@ -54,14 +60,12 @@ setContext(TABS, {
 });
 function change_tab(id) {
   const tab_to_activate = tabs.find((t) => t.id === id);
-  if (tab_to_activate && tab_to_activate.interactive && tab_to_activate.visible) {
+  if (tab_to_activate && tab_to_activate.interactive && tab_to_activate.visible && $selected_tab !== tab_to_activate.id) {
     selected = id;
     $selected_tab = id;
     $selected_tab_index = tabs.findIndex((t) => t.id === id);
     dispatch("change");
     overflow_menu_open = false;
-  } else {
-    console.warn("Attempted to select a non-interactive or hidden tab.");
   }
 }
 $:
@@ -108,8 +112,15 @@ function handle_menu_overflow() {
   });
   nav_items.forEach((item) => tab_nav_el.appendChild(item));
   overflow_items.forEach((item) => overflow_nav.appendChild(item));
-  overflow_has_selected_tab = tabs.some(
-    (t) => t.id === $selected_tab && overflow_nav.contains(document.querySelector(`[data-tab-id="${t.id}"]`))
+  overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
+}
+$:
+  overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
+function handle_overflow_has_selected_tab(selected_tab2) {
+  if (selected_tab2 === false || !overflow_nav)
+    return false;
+  return tabs.some(
+    (t) => t.id === selected_tab2 && overflow_nav.contains(document.querySelector(`[data-tab-id="${t.id}"]`))
   );
 }
 </script>

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

@@ -6,7 +6,14 @@ declare const __propDef: {
         visible?: boolean | undefined;
         elem_id?: string | undefined;
         elem_classes?: string[] | undefined;
-        selected: number | string | object;
+        selected: number | string;
+        inital_tabs: {
+            name: string;
+            id: string | number;
+            elem_id: string | undefined;
+            visible: boolean;
+            interactive: boolean;
+        }[];
     };
     events: {
         change: CustomEvent<undefined>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabs",
-  "version": "0.3.0-beta.3",
+  "version": "0.3.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,10 +17,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/utils": "^0.7.0-beta.2"
+    "@gradio/utils": "^0.7.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.2-beta.0"
+    "@gradio/preview": "^0.12.0"
   },
   "peerDependencies": {
     "svelte": "^4.0.0"

package/shared/Tabs.svelte

@@ -7,7 +7,8 @@
 		setContext,
 		createEventDispatcher,
 		onMount,
-		onDestroy
+		onDestroy,
+		tick
 	} from "svelte";
 	import OverflowIcon from "./OverflowIcon.svelte";
 	import { writable } from "svelte/store";
@@ -15,7 +16,7 @@
 
 	interface Tab {
 		name: string;
-		id: object;
+		id: string | number;
 		elem_id: string | undefined;
 		visible: boolean;
 		interactive: boolean;
@@ -24,9 +25,10 @@
 	export let visible = true;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
-	export let selected: number | string | object;
+	export let selected: number | string;
+	export let inital_tabs: Tab[];
 
-	let tabs: Tab[] = [];
+	let tabs: Tab[] = inital_tabs;
 	let overflow_menu_open = false;
 	let overflow_menu: HTMLElement;
 
@@ -35,8 +37,12 @@
 	let tab_nav_el: HTMLElement;
 	let overflow_nav: HTMLElement;
 
-	const selected_tab = writable<false | object | number | string>(false);
-	const selected_tab_index = writable<number>(0);
+	const selected_tab = writable<false | number | string>(
+		selected || tabs[0]?.id || false
+	);
+	const selected_tab_index = writable<number>(
+		tabs.findIndex((t) => t.id === selected) || 0
+	);
 	const dispatch = createEventDispatcher<{
 		change: undefined;
 		select: SelectData;
@@ -72,20 +78,19 @@
 		selected_tab_index
 	});
 
-	function change_tab(id: object | string | number): void {
+	function change_tab(id: string | number): void {
 		const tab_to_activate = tabs.find((t) => t.id === id);
 		if (
 			tab_to_activate &&
 			tab_to_activate.interactive &&
-			tab_to_activate.visible
+			tab_to_activate.visible &&
+			$selected_tab !== tab_to_activate.id
 		) {
 			selected = id;
 			$selected_tab = id;
 			$selected_tab_index = tabs.findIndex((t) => t.id === id);
 			dispatch("change");
 			overflow_menu_open = false;
-		} else {
-			console.warn("Attempted to select a non-interactive or hidden tab.");
 		}
 	}
 
@@ -149,10 +154,19 @@
 
 		nav_items.forEach((item) => tab_nav_el.appendChild(item));
 		overflow_items.forEach((item) => overflow_nav.appendChild(item));
+		overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
+	}
+
+	$: overflow_has_selected_tab =
+		handle_overflow_has_selected_tab($selected_tab);
 
-		overflow_has_selected_tab = tabs.some(
+	function handle_overflow_has_selected_tab(
+		selected_tab: number | string | false
+	): boolean {
+		if (selected_tab === false || !overflow_nav) return false;
+		return tabs.some(
 			(t) =>
-				t.id === $selected_tab &&
+				t.id === selected_tab &&
 				overflow_nav.contains(document.querySelector(`[data-tab-id="${t.id}"]`))
 		);
 	}