@gradio/tabs 0.3.4 → 0.4.0
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 +16 -0
- package/Tabs.stories.svelte +3 -0
- package/dist/shared/Tabs.svelte +24 -29
- package/package.json +2 -2
- package/shared/Tabs.svelte +28 -33
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @gradio/tabs
|
|
2
2
|
|
|
3
|
+
## 0.4.0
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#10192](https://github.com/gradio-app/gradio/pull/10192) [`4fc7fb7`](https://github.com/gradio-app/gradio/commit/4fc7fb777c42af537e4af612423fa44029657d41) - Ensure components can be remounted with their previous data. Thanks @pngwn!
|
|
8
|
+
|
|
9
|
+
### Dependency updates
|
|
10
|
+
|
|
11
|
+
- @gradio/utils@0.10.0
|
|
12
|
+
|
|
13
|
+
## 0.3.5
|
|
14
|
+
|
|
15
|
+
### Dependency updates
|
|
16
|
+
|
|
17
|
+
- @gradio/utils@0.9.0
|
|
18
|
+
|
|
3
19
|
## 0.3.4
|
|
4
20
|
|
|
5
21
|
### Dependency updates
|
package/Tabs.stories.svelte
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
<Template let:args>
|
|
10
10
|
<Tabs {...args}>
|
|
11
11
|
<TabItem
|
|
12
|
+
order={0}
|
|
12
13
|
id="tab-1"
|
|
13
14
|
label="Image Tab"
|
|
14
15
|
gradio={undefined}
|
|
@@ -23,6 +24,7 @@
|
|
|
23
24
|
/>
|
|
24
25
|
</TabItem>
|
|
25
26
|
<TabItem
|
|
27
|
+
order={1}
|
|
26
28
|
id="tab-2"
|
|
27
29
|
label="Hidden Tab"
|
|
28
30
|
gradio={undefined}
|
|
@@ -33,6 +35,7 @@
|
|
|
33
35
|
Secret Tab
|
|
34
36
|
</TabItem>
|
|
35
37
|
<TabItem
|
|
38
|
+
order={2}
|
|
36
39
|
id="tab-3"
|
|
37
40
|
label="Visible Tab"
|
|
38
41
|
gradio={undefined}
|
package/dist/shared/Tabs.svelte
CHANGED
|
@@ -21,7 +21,7 @@ const selected_tab = writable(
|
|
|
21
21
|
selected || tabs[0]?.id || false
|
|
22
22
|
);
|
|
23
23
|
const selected_tab_index = writable(
|
|
24
|
-
tabs.findIndex((t) => t
|
|
24
|
+
tabs.findIndex((t) => t?.id === selected) || 0
|
|
25
25
|
);
|
|
26
26
|
const dispatch = createEventDispatcher();
|
|
27
27
|
let is_overflowing = false;
|
|
@@ -34,37 +34,28 @@ onMount(() => {
|
|
|
34
34
|
observer.observe(tab_nav_el);
|
|
35
35
|
});
|
|
36
36
|
setContext(TABS, {
|
|
37
|
-
register_tab: (tab) => {
|
|
38
|
-
|
|
39
|
-
if (index !== -1) {
|
|
40
|
-
tabs[index] = { ...tabs[index], ...tab };
|
|
41
|
-
} else {
|
|
42
|
-
tabs = [...tabs, tab];
|
|
43
|
-
index = tabs.length - 1;
|
|
44
|
-
}
|
|
37
|
+
register_tab: (tab, order) => {
|
|
38
|
+
tabs[order] = tab;
|
|
45
39
|
if ($selected_tab === false && tab.visible && tab.interactive) {
|
|
46
40
|
$selected_tab = tab.id;
|
|
47
41
|
}
|
|
48
|
-
return
|
|
42
|
+
return order;
|
|
49
43
|
},
|
|
50
|
-
unregister_tab: (tab) => {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
tabs = tabs.filter((t) => t.id !== tab.id);
|
|
54
|
-
if ($selected_tab === tab.id) {
|
|
55
|
-
$selected_tab = tabs[0]?.id || false;
|
|
56
|
-
}
|
|
44
|
+
unregister_tab: (tab, order) => {
|
|
45
|
+
if ($selected_tab === tab.id) {
|
|
46
|
+
$selected_tab = tabs[0]?.id || false;
|
|
57
47
|
}
|
|
48
|
+
tabs[order] = null;
|
|
58
49
|
},
|
|
59
50
|
selected_tab,
|
|
60
51
|
selected_tab_index
|
|
61
52
|
});
|
|
62
53
|
function change_tab(id) {
|
|
63
|
-
const tab_to_activate = tabs.find((t) => t
|
|
64
|
-
if (tab_to_activate && tab_to_activate.interactive && tab_to_activate.visible && $selected_tab !== tab_to_activate.id) {
|
|
54
|
+
const tab_to_activate = tabs.find((t) => t?.id === id);
|
|
55
|
+
if (id !== void 0 && tab_to_activate && tab_to_activate.interactive && tab_to_activate.visible && $selected_tab !== tab_to_activate.id) {
|
|
65
56
|
selected = id;
|
|
66
57
|
$selected_tab = id;
|
|
67
|
-
$selected_tab_index = tabs.findIndex((t) => t
|
|
58
|
+
$selected_tab_index = tabs.findIndex((t) => t?.id === id);
|
|
68
59
|
dispatch("change");
|
|
69
60
|
overflow_menu_open = false;
|
|
70
61
|
}
|
|
@@ -89,6 +80,8 @@ async function handle_menu_overflow() {
|
|
|
89
80
|
const offset = tab_nav_size.left;
|
|
90
81
|
for (let i = tabs.length - 1; i >= 0; i--) {
|
|
91
82
|
const tab = tabs[i];
|
|
83
|
+
if (!tab)
|
|
84
|
+
continue;
|
|
92
85
|
const tab_rect = tab_sizes[tab.id];
|
|
93
86
|
if (!tab_rect)
|
|
94
87
|
continue;
|
|
@@ -107,11 +100,13 @@ $:
|
|
|
107
100
|
function handle_overflow_has_selected_tab(selected_tab2) {
|
|
108
101
|
if (selected_tab2 === false)
|
|
109
102
|
return false;
|
|
110
|
-
return overflow_tabs.some((t) => t
|
|
103
|
+
return overflow_tabs.some((t) => t?.id === selected_tab2);
|
|
111
104
|
}
|
|
112
105
|
function get_tab_sizes(tabs2, tab_els2) {
|
|
113
106
|
const tab_sizes = {};
|
|
114
107
|
tabs2.forEach((tab) => {
|
|
108
|
+
if (!tab)
|
|
109
|
+
return;
|
|
115
110
|
tab_sizes[tab.id] = tab_els2[tab.id]?.getBoundingClientRect();
|
|
116
111
|
});
|
|
117
112
|
return tab_sizes;
|
|
@@ -127,17 +122,17 @@ function get_tab_sizes(tabs2, tab_els2) {
|
|
|
127
122
|
{#if has_tabs}
|
|
128
123
|
<div class="tab-wrapper">
|
|
129
124
|
<div class="tab-container visually-hidden" aria-hidden="true">
|
|
130
|
-
{#each tabs as t, i
|
|
131
|
-
{#if t
|
|
125
|
+
{#each tabs as t, i}
|
|
126
|
+
{#if t?.visible}
|
|
132
127
|
<button bind:this={tab_els[t.id]}>
|
|
133
|
-
{t
|
|
128
|
+
{t?.label}
|
|
134
129
|
</button>
|
|
135
130
|
{/if}
|
|
136
131
|
{/each}
|
|
137
132
|
</div>
|
|
138
133
|
<div class="tab-container" bind:this={tab_nav_el} role="tablist">
|
|
139
|
-
{#each visible_tabs as t, i
|
|
140
|
-
{#if t
|
|
134
|
+
{#each visible_tabs as t, i}
|
|
135
|
+
{#if t?.visible}
|
|
141
136
|
<button
|
|
142
137
|
role="tab"
|
|
143
138
|
class:selected={t.id === $selected_tab}
|
|
@@ -174,10 +169,10 @@ function get_tab_sizes(tabs2, tab_els2) {
|
|
|
174
169
|
<div class="overflow-dropdown" class:hide={!overflow_menu_open}>
|
|
175
170
|
{#each overflow_tabs as t}
|
|
176
171
|
<button
|
|
177
|
-
on:click={() => change_tab(t
|
|
178
|
-
class:selected={t
|
|
172
|
+
on:click={() => change_tab(t?.id)}
|
|
173
|
+
class:selected={t?.id === $selected_tab}
|
|
179
174
|
>
|
|
180
|
-
{t
|
|
175
|
+
{t?.label}
|
|
181
176
|
</button>
|
|
182
177
|
{/each}
|
|
183
178
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/tabs",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"./package.json": "./package.json"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@gradio/utils": "^0.
|
|
20
|
+
"@gradio/utils": "^0.10.0"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@gradio/preview": "^0.13.0"
|
package/shared/Tabs.svelte
CHANGED
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
export let selected: number | string;
|
|
23
23
|
export let initial_tabs: Tab[];
|
|
24
24
|
|
|
25
|
-
let tabs: Tab[] = [...initial_tabs];
|
|
26
|
-
let visible_tabs: Tab[] = [...initial_tabs];
|
|
27
|
-
let overflow_tabs: Tab[] = [];
|
|
25
|
+
let tabs: (Tab | null)[] = [...initial_tabs];
|
|
26
|
+
let visible_tabs: (Tab | null)[] = [...initial_tabs];
|
|
27
|
+
let overflow_tabs: (Tab | null)[] = [];
|
|
28
28
|
let overflow_menu_open = false;
|
|
29
29
|
let overflow_menu: HTMLElement;
|
|
30
30
|
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
selected || tabs[0]?.id || false
|
|
37
37
|
);
|
|
38
38
|
const selected_tab_index = writable<number>(
|
|
39
|
-
tabs.findIndex((t) => t
|
|
39
|
+
tabs.findIndex((t) => t?.id === selected) || 0
|
|
40
40
|
);
|
|
41
41
|
const dispatch = createEventDispatcher<{
|
|
42
42
|
change: undefined;
|
|
@@ -55,35 +55,28 @@
|
|
|
55
55
|
});
|
|
56
56
|
|
|
57
57
|
setContext(TABS, {
|
|
58
|
-
register_tab: (tab: Tab) => {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
tabs[index] = { ...tabs[index], ...tab };
|
|
62
|
-
} else {
|
|
63
|
-
tabs = [...tabs, tab];
|
|
64
|
-
index = tabs.length - 1;
|
|
65
|
-
}
|
|
58
|
+
register_tab: (tab: Tab, order: number) => {
|
|
59
|
+
tabs[order] = tab;
|
|
60
|
+
|
|
66
61
|
if ($selected_tab === false && tab.visible && tab.interactive) {
|
|
67
62
|
$selected_tab = tab.id;
|
|
68
63
|
}
|
|
69
|
-
return
|
|
64
|
+
return order;
|
|
70
65
|
},
|
|
71
|
-
unregister_tab: (tab: Tab) => {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
tabs = tabs.filter((t) => t.id !== tab.id);
|
|
75
|
-
if ($selected_tab === tab.id) {
|
|
76
|
-
$selected_tab = tabs[0]?.id || false;
|
|
77
|
-
}
|
|
66
|
+
unregister_tab: (tab: Tab, order: number) => {
|
|
67
|
+
if ($selected_tab === tab.id) {
|
|
68
|
+
$selected_tab = tabs[0]?.id || false;
|
|
78
69
|
}
|
|
70
|
+
tabs[order] = null;
|
|
79
71
|
},
|
|
80
72
|
selected_tab,
|
|
81
73
|
selected_tab_index
|
|
82
74
|
});
|
|
83
75
|
|
|
84
|
-
function change_tab(id: string | number): void {
|
|
85
|
-
const tab_to_activate = tabs.find((t) => t
|
|
76
|
+
function change_tab(id: string | number | undefined): void {
|
|
77
|
+
const tab_to_activate = tabs.find((t) => t?.id === id);
|
|
86
78
|
if (
|
|
79
|
+
id !== undefined &&
|
|
87
80
|
tab_to_activate &&
|
|
88
81
|
tab_to_activate.interactive &&
|
|
89
82
|
tab_to_activate.visible &&
|
|
@@ -91,7 +84,7 @@
|
|
|
91
84
|
) {
|
|
92
85
|
selected = id;
|
|
93
86
|
$selected_tab = id;
|
|
94
|
-
$selected_tab_index = tabs.findIndex((t) => t
|
|
87
|
+
$selected_tab_index = tabs.findIndex((t) => t?.id === id);
|
|
95
88
|
dispatch("change");
|
|
96
89
|
overflow_menu_open = false;
|
|
97
90
|
}
|
|
@@ -123,6 +116,7 @@
|
|
|
123
116
|
|
|
124
117
|
for (let i = tabs.length - 1; i >= 0; i--) {
|
|
125
118
|
const tab = tabs[i];
|
|
119
|
+
if (!tab) continue;
|
|
126
120
|
const tab_rect = tab_sizes[tab.id];
|
|
127
121
|
if (!tab_rect) continue;
|
|
128
122
|
if (tab_rect.right - offset < max_width) {
|
|
@@ -145,15 +139,16 @@
|
|
|
145
139
|
selected_tab: number | string | false
|
|
146
140
|
): boolean {
|
|
147
141
|
if (selected_tab === false) return false;
|
|
148
|
-
return overflow_tabs.some((t) => t
|
|
142
|
+
return overflow_tabs.some((t) => t?.id === selected_tab);
|
|
149
143
|
}
|
|
150
144
|
|
|
151
145
|
function get_tab_sizes(
|
|
152
|
-
tabs: Tab[],
|
|
146
|
+
tabs: (Tab | null)[],
|
|
153
147
|
tab_els: Record<string | number, HTMLElement>
|
|
154
148
|
): Record<string | number, DOMRect> {
|
|
155
149
|
const tab_sizes: Record<string | number, DOMRect> = {};
|
|
156
150
|
tabs.forEach((tab) => {
|
|
151
|
+
if (!tab) return;
|
|
157
152
|
tab_sizes[tab.id] = tab_els[tab.id]?.getBoundingClientRect();
|
|
158
153
|
});
|
|
159
154
|
return tab_sizes;
|
|
@@ -169,17 +164,17 @@
|
|
|
169
164
|
{#if has_tabs}
|
|
170
165
|
<div class="tab-wrapper">
|
|
171
166
|
<div class="tab-container visually-hidden" aria-hidden="true">
|
|
172
|
-
{#each tabs as t, i
|
|
173
|
-
{#if t
|
|
167
|
+
{#each tabs as t, i}
|
|
168
|
+
{#if t?.visible}
|
|
174
169
|
<button bind:this={tab_els[t.id]}>
|
|
175
|
-
{t
|
|
170
|
+
{t?.label}
|
|
176
171
|
</button>
|
|
177
172
|
{/if}
|
|
178
173
|
{/each}
|
|
179
174
|
</div>
|
|
180
175
|
<div class="tab-container" bind:this={tab_nav_el} role="tablist">
|
|
181
|
-
{#each visible_tabs as t, i
|
|
182
|
-
{#if t
|
|
176
|
+
{#each visible_tabs as t, i}
|
|
177
|
+
{#if t?.visible}
|
|
183
178
|
<button
|
|
184
179
|
role="tab"
|
|
185
180
|
class:selected={t.id === $selected_tab}
|
|
@@ -216,10 +211,10 @@
|
|
|
216
211
|
<div class="overflow-dropdown" class:hide={!overflow_menu_open}>
|
|
217
212
|
{#each overflow_tabs as t}
|
|
218
213
|
<button
|
|
219
|
-
on:click={() => change_tab(t
|
|
220
|
-
class:selected={t
|
|
214
|
+
on:click={() => change_tab(t?.id)}
|
|
215
|
+
class:selected={t?.id === $selected_tab}
|
|
221
216
|
>
|
|
222
|
-
{t
|
|
217
|
+
{t?.label}
|
|
223
218
|
</button>
|
|
224
219
|
{/each}
|
|
225
220
|
</div>
|