@gradio/tabs 0.5.2-dev.0 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/Index.svelte +17 -2
  3. package/dist/Index.svelte +17 -2
  4. package/dist/shared/Tabs.svelte +17 -3
  5. package/dist/shared/Tabs.svelte.d.ts +1 -0
  6. package/package.json +3 -3
  7. package/shared/Tabs.svelte +17 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @gradio/tabs
2
2
 
3
+ ## 0.5.3
4
+
5
+ ### Fixes
6
+
7
+ - [#12491](https://github.com/gradio-app/gradio/pull/12491) [`4f6327b`](https://github.com/gradio-app/gradio/commit/4f6327be6815fc8d574b60272b02915c75359ace) - Load visible components in 6.0. Thanks @freddyaboulton!
8
+
9
+ ## 0.5.2
10
+
11
+ ### Dependency updates
12
+
13
+ - @gradio/utils@0.10.4
14
+
15
+ ## 0.5.2
16
+
17
+ ### Features
18
+
19
+ - [#12438](https://github.com/gradio-app/gradio/pull/12438) [`25ffc03`](https://github.com/gradio-app/gradio/commit/25ffc0398f8feb43d817c02b2ab970c16de6d797) - Svelte5 migration and bugfix
20
+
21
+ ### Dependencies
22
+
23
+ - @gradio/utils@0.10.3
24
+
3
25
  ## 0.5.2-dev.0
4
26
 
5
27
  ### Dependency updates
package/Index.svelte CHANGED
@@ -15,6 +15,15 @@
15
15
 
16
16
  $effect(() => {
17
17
  if (old_selected !== gradio.props.selected) {
18
+ const i = gradio.props.initial_tabs.findIndex(
19
+ (t) => t.id === gradio.props.selected
20
+ );
21
+ gradio.dispatch("gradio_tab_select", {
22
+ value: gradio.props.initial_tabs[i].label,
23
+ index: i,
24
+ id: gradio.props.initial_tabs[i].id,
25
+ component_id: gradio.props.initial_tabs[i].component_id
26
+ });
18
27
  old_selected = gradio.props.selected;
19
28
  }
20
29
  });
@@ -27,7 +36,10 @@
27
36
  elem_classes={gradio.shared.elem_classes}
28
37
  bind:selected={gradio.props.selected}
29
38
  on:change={() => gradio.dispatch("change")}
30
- on:select={(e) => gradio.dispatch("select", e.detail)}
39
+ on:select={(e) => {
40
+ gradio.dispatch("select", e.detail);
41
+ gradio.dispatch("gradio_tab_select", e.detail);
42
+ }}
31
43
  initial_tabs={gradio.props.initial_tabs}
32
44
  >
33
45
  <slot />
@@ -39,7 +51,10 @@
39
51
  elem_classes={gradio.shared.elem_classes}
40
52
  bind:selected={gradio.props.selected}
41
53
  on:change={() => gradio.dispatch("change")}
42
- on:select={(e) => gradio.dispatch("select", e.detail)}
54
+ on:select={(e) => {
55
+ gradio.dispatch("select", e.detail);
56
+ gradio.dispatch("gradio_tab_select", e.detail);
57
+ }}
43
58
  initial_tabs={gradio.props.initial_tabs}
44
59
  >
45
60
  <slot />
package/dist/Index.svelte CHANGED
@@ -15,6 +15,15 @@
15
15
 
16
16
  $effect(() => {
17
17
  if (old_selected !== gradio.props.selected) {
18
+ const i = gradio.props.initial_tabs.findIndex(
19
+ (t) => t.id === gradio.props.selected
20
+ );
21
+ gradio.dispatch("gradio_tab_select", {
22
+ value: gradio.props.initial_tabs[i].label,
23
+ index: i,
24
+ id: gradio.props.initial_tabs[i].id,
25
+ component_id: gradio.props.initial_tabs[i].component_id
26
+ });
18
27
  old_selected = gradio.props.selected;
19
28
  }
20
29
  });
@@ -27,7 +36,10 @@
27
36
  elem_classes={gradio.shared.elem_classes}
28
37
  bind:selected={gradio.props.selected}
29
38
  on:change={() => gradio.dispatch("change")}
30
- on:select={(e) => gradio.dispatch("select", e.detail)}
39
+ on:select={(e) => {
40
+ gradio.dispatch("select", e.detail);
41
+ gradio.dispatch("gradio_tab_select", e.detail);
42
+ }}
31
43
  initial_tabs={gradio.props.initial_tabs}
32
44
  >
33
45
  <slot />
@@ -39,7 +51,10 @@
39
51
  elem_classes={gradio.shared.elem_classes}
40
52
  bind:selected={gradio.props.selected}
41
53
  on:change={() => gradio.dispatch("change")}
42
- on:select={(e) => gradio.dispatch("select", e.detail)}
54
+ on:select={(e) => {
55
+ gradio.dispatch("select", e.detail);
56
+ gradio.dispatch("gradio_tab_select", e.detail);
57
+ }}
43
58
  initial_tabs={gradio.props.initial_tabs}
44
59
  >
45
60
  <slot />
package/dist/shared/Tabs.svelte CHANGED
@@ -8,6 +8,7 @@
8
8
  visible: boolean | "hidden";
9
9
  interactive: boolean;
10
10
  scale: number | null;
11
+ component_id: number;
11
12
  }
12
13
  </script>
13
14
 
@@ -199,7 +200,12 @@
199
200
  on:click={() => {
200
201
  if (t.id !== $selected_tab) {
201
202
  change_tab(t.id);
202
- dispatch("select", { value: t.label, index: i, id: t.id });
203
+ dispatch("select", {
204
+ value: t.label,
205
+ index: i,
206
+ id: t.id,
207
+ component_id: t.component_id
208
+ });
203
209
  }
204
210
  }}
205
211
  >
@@ -222,10 +228,18 @@
222
228
  <OverflowIcon />
223
229
  </button>
224
230
  <div class="overflow-dropdown" class:hide={!overflow_menu_open}>
225
- {#each overflow_tabs as t}
231
+ {#each overflow_tabs as t, i}
226
232
  {#if t?.visible !== false}
227
233
  <button
228
- on:click={() => change_tab(t?.id)}
234
+ on:click={() => {
235
+ change_tab(t?.id);
236
+ dispatch("select", {
237
+ value: t.label,
238
+ index: i,
239
+ id: t.id,
240
+ component_id: t.component_id
241
+ });
242
+ }}
229
243
  class:selected={t?.id === $selected_tab}
230
244
  >
231
245
  {t?.label}
package/dist/shared/Tabs.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface Tab {
6
6
  visible: boolean | "hidden";
7
7
  interactive: boolean;
8
8
  scale: number | null;
9
+ component_id: number;
9
10
  }
10
11
  import type { SelectData } from "@gradio/utils";
11
12
  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> {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/tabs",
3
- "version": "0.5.2-dev.0",
3
+ "version": "0.5.3",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -17,10 +17,10 @@
17
17
  "./package.json": "./package.json"
18
18
  },
19
19
  "dependencies": {
20
- "@gradio/utils": "^0.10.3-dev.0"
20
+ "@gradio/utils": "^0.10.4"
21
21
  },
22
22
  "devDependencies": {
23
- "@gradio/preview": "^0.15.0-dev.0"
23
+ "@gradio/preview": "^0.15.1"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "svelte": "^5.43.4"
package/shared/Tabs.svelte CHANGED
@@ -8,6 +8,7 @@
8
8
  visible: boolean | "hidden";
9
9
  interactive: boolean;
10
10
  scale: number | null;
11
+ component_id: number;
11
12
  }
12
13
  </script>
13
14
 
@@ -199,7 +200,12 @@
199
200
  on:click={() => {
200
201
  if (t.id !== $selected_tab) {
201
202
  change_tab(t.id);
202
- dispatch("select", { value: t.label, index: i, id: t.id });
203
+ dispatch("select", {
204
+ value: t.label,
205
+ index: i,
206
+ id: t.id,
207
+ component_id: t.component_id
208
+ });
203
209
  }
204
210
  }}
205
211
  >
@@ -222,10 +228,18 @@
222
228
  <OverflowIcon />
223
229
  </button>
224
230
  <div class="overflow-dropdown" class:hide={!overflow_menu_open}>
225
- {#each overflow_tabs as t}
231
+ {#each overflow_tabs as t, i}
226
232
  {#if t?.visible !== false}
227
233
  <button
228
- on:click={() => change_tab(t?.id)}
234
+ on:click={() => {
235
+ change_tab(t?.id);
236
+ dispatch("select", {
237
+ value: t.label,
238
+ index: i,
239
+ id: t.id,
240
+ component_id: t.component_id
241
+ });
242
+ }}
229
243
  class:selected={t?.id === $selected_tab}
230
244
  >
231
245
  {t?.label}