@gradio/tabs 0.4.0 → 0.4.1
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.
- package/CHANGELOG.md +6 -0
- package/Tabs.stories.svelte +3 -0
- package/dist/shared/Tabs.svelte +9 -1
- package/dist/shared/Tabs.svelte.d.ts +1 -0
- package/package.json +1 -1
- package/shared/Tabs.svelte +11 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @gradio/tabs
|
|
2
2
|
|
|
3
|
+
## 0.4.1
|
|
4
|
+
|
|
5
|
+
### Fixes
|
|
6
|
+
|
|
7
|
+
- [#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!
|
|
8
|
+
|
|
3
9
|
## 0.4.0
|
|
4
10
|
|
|
5
11
|
### Features
|
package/Tabs.stories.svelte
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
visible
|
|
17
17
|
interactive
|
|
18
18
|
elem_classes={["editor-tabitem"]}
|
|
19
|
+
scale={0}
|
|
19
20
|
>
|
|
20
21
|
<img
|
|
21
22
|
style="width: 200px;"
|
|
@@ -31,6 +32,7 @@
|
|
|
31
32
|
visible={false}
|
|
32
33
|
interactive
|
|
33
34
|
elem_classes={["editor-tabitem"]}
|
|
35
|
+
scale={0}
|
|
34
36
|
>
|
|
35
37
|
Secret Tab
|
|
36
38
|
</TabItem>
|
|
@@ -42,6 +44,7 @@
|
|
|
42
44
|
visible
|
|
43
45
|
interactive
|
|
44
46
|
elem_classes={["editor-tabitem"]}
|
|
47
|
+
scale={0}
|
|
45
48
|
>
|
|
46
49
|
Visible Tab
|
|
47
50
|
</TabItem>
|
package/dist/shared/Tabs.svelte
CHANGED
|
@@ -38,6 +38,7 @@ setContext(TABS, {
|
|
|
38
38
|
tabs[order] = tab;
|
|
39
39
|
if ($selected_tab === false && tab.visible && tab.interactive) {
|
|
40
40
|
$selected_tab = tab.id;
|
|
41
|
+
$selected_tab_index = order;
|
|
41
42
|
}
|
|
42
43
|
return order;
|
|
43
44
|
},
|
|
@@ -111,6 +112,8 @@ function get_tab_sizes(tabs2, tab_els2) {
|
|
|
111
112
|
});
|
|
112
113
|
return tab_sizes;
|
|
113
114
|
}
|
|
115
|
+
$:
|
|
116
|
+
tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
|
|
114
117
|
</script>
|
|
115
118
|
|
|
116
119
|
<svelte:window
|
|
@@ -118,7 +121,12 @@ function get_tab_sizes(tabs2, tab_els2) {
|
|
|
118
121
|
on:click={handle_outside_click}
|
|
119
122
|
/>
|
|
120
123
|
|
|
121
|
-
<div
|
|
124
|
+
<div
|
|
125
|
+
class="tabs {elem_classes.join(' ')}"
|
|
126
|
+
class:hide={!visible}
|
|
127
|
+
id={elem_id}
|
|
128
|
+
style:flex-grow={tab_scale}
|
|
129
|
+
>
|
|
122
130
|
{#if has_tabs}
|
|
123
131
|
<div class="tab-wrapper">
|
|
124
132
|
<div class="tab-container visually-hidden" aria-hidden="true">
|
package/package.json
CHANGED
package/shared/Tabs.svelte
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
elem_id: string | undefined;
|
|
8
8
|
visible: boolean;
|
|
9
9
|
interactive: boolean;
|
|
10
|
+
scale: number | null;
|
|
10
11
|
}
|
|
11
12
|
</script>
|
|
12
13
|
|
|
@@ -60,6 +61,7 @@
|
|
|
60
61
|
|
|
61
62
|
if ($selected_tab === false && tab.visible && tab.interactive) {
|
|
62
63
|
$selected_tab = tab.id;
|
|
64
|
+
$selected_tab_index = order;
|
|
63
65
|
}
|
|
64
66
|
return order;
|
|
65
67
|
},
|
|
@@ -153,6 +155,9 @@
|
|
|
153
155
|
});
|
|
154
156
|
return tab_sizes;
|
|
155
157
|
}
|
|
158
|
+
|
|
159
|
+
$: tab_scale =
|
|
160
|
+
tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
|
|
156
161
|
</script>
|
|
157
162
|
|
|
158
163
|
<svelte:window
|
|
@@ -160,7 +165,12 @@
|
|
|
160
165
|
on:click={handle_outside_click}
|
|
161
166
|
/>
|
|
162
167
|
|
|
163
|
-
<div
|
|
168
|
+
<div
|
|
169
|
+
class="tabs {elem_classes.join(' ')}"
|
|
170
|
+
class:hide={!visible}
|
|
171
|
+
id={elem_id}
|
|
172
|
+
style:flex-grow={tab_scale}
|
|
173
|
+
>
|
|
164
174
|
{#if has_tabs}
|
|
165
175
|
<div class="tab-wrapper">
|
|
166
176
|
<div class="tab-container visually-hidden" aria-hidden="true">
|