@gradio/tabs 0.4.3 → 0.4.4

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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/Tabs.stories.svelte +50 -0
  3. package/dist/shared/Tabs.svelte +9 -7
  4. package/package.json +1 -1
  5. package/shared/Tabs.svelte +9 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @gradio/tabs
2
2
 
3
+ ## 0.4.4
4
+
5
+ ### Fixes
6
+
7
+ - [#11189](https://github.com/gradio-app/gradio/pull/11189) [`88f06c7`](https://github.com/gradio-app/gradio/commit/88f06c7b8126a67edefd3116c764148d0f39c6c7) - Ensure that tabs with `visible=False` don't show up in the overflow menu. Thanks @abidlabs!
8
+
3
9
  ## 0.4.3
4
10
 
5
11
  ### Dependency updates
package/Tabs.stories.svelte CHANGED
@@ -52,3 +52,53 @@
52
52
  </Template>
53
53
 
54
54
  <Story name="Tabs" args={{}} />
55
+
56
+ <Story name="TabsLastInvisible" args={{}}>
57
+ <Tabs selected="tab-1" gradio={undefined}>
58
+ <TabItem
59
+ order={0}
60
+ id="tab-1"
61
+ label="This is visible tab 1"
62
+ gradio={undefined}
63
+ visible
64
+ interactive
65
+ scale={0}
66
+ ></TabItem>
67
+ <TabItem
68
+ order={1}
69
+ id="tab-2"
70
+ label="This is visible tab 2"
71
+ gradio={undefined}
72
+ visible
73
+ interactive
74
+ scale={0}
75
+ ></TabItem>
76
+ <TabItem
77
+ order={2}
78
+ id="tab-3"
79
+ label="This is visible tab 3"
80
+ gradio={undefined}
81
+ visible
82
+ interactive
83
+ scale={0}
84
+ ></TabItem>
85
+ <TabItem
86
+ order={3}
87
+ id="tab-4"
88
+ label="This is invisible tab 4"
89
+ gradio={undefined}
90
+ visible={false}
91
+ interactive
92
+ scale={0}
93
+ ></TabItem>
94
+ <TabItem
95
+ order={4}
96
+ id="tab-5"
97
+ label="This is invisible tab 5"
98
+ gradio={undefined}
99
+ visible={false}
100
+ interactive
101
+ scale={0}
102
+ ></TabItem>
103
+ </Tabs>
104
+ </Story>
package/dist/shared/Tabs.svelte CHANGED
@@ -164,7 +164,7 @@ $:
164
164
  </div>
165
165
  <span
166
166
  class="overflow-menu"
167
- class:hide={!is_overflowing}
167
+ class:hide={!is_overflowing || !overflow_tabs.some((t) => t?.visible)}
168
168
  bind:this={overflow_menu}
169
169
  >
170
170
  <button
@@ -176,12 +176,14 @@ $:
176
176
  </button>
177
177
  <div class="overflow-dropdown" class:hide={!overflow_menu_open}>
178
178
  {#each overflow_tabs as t}
179
- <button
180
- on:click={() => change_tab(t?.id)}
181
- class:selected={t?.id === $selected_tab}
182
- >
183
- {t?.label}
184
- </button>
179
+ {#if t?.visible}
180
+ <button
181
+ on:click={() => change_tab(t?.id)}
182
+ class:selected={t?.id === $selected_tab}
183
+ >
184
+ {t?.label}
185
+ </button>
186
+ {/if}
185
187
  {/each}
186
188
  </div>
187
189
  </span>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/tabs",
3
- "version": "0.4.3",
3
+ "version": "0.4.4",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
package/shared/Tabs.svelte CHANGED
@@ -208,7 +208,7 @@
208
208
  </div>
209
209
  <span
210
210
  class="overflow-menu"
211
- class:hide={!is_overflowing}
211
+ class:hide={!is_overflowing || !overflow_tabs.some((t) => t?.visible)}
212
212
  bind:this={overflow_menu}
213
213
  >
214
214
  <button
@@ -220,12 +220,14 @@
220
220
  </button>
221
221
  <div class="overflow-dropdown" class:hide={!overflow_menu_open}>
222
222
  {#each overflow_tabs as t}
223
- <button
224
- on:click={() => change_tab(t?.id)}
225
- class:selected={t?.id === $selected_tab}
226
- >
227
- {t?.label}
228
- </button>
223
+ {#if t?.visible}
224
+ <button
225
+ on:click={() => change_tab(t?.id)}
226
+ class:selected={t?.id === $selected_tab}
227
+ >
228
+ {t?.label}
229
+ </button>
230
+ {/if}
229
231
  {/each}
230
232
  </div>
231
233
  </span>