@gradio/tabs 0.2.12 → 0.2.14
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 +20 -0
- package/dist/Index.svelte +25 -0
- package/dist/Index.svelte.d.ts +28 -0
- package/dist/shared/Tabs.svelte +158 -0
- package/dist/shared/Tabs.svelte.d.ts +26 -0
- package/package.json +16 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @gradio/tabs
|
|
2
2
|
|
|
3
|
+
## 0.2.14
|
|
4
|
+
|
|
5
|
+
### Fixes
|
|
6
|
+
|
|
7
|
+
- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types. Thanks @pngwn!
|
|
8
|
+
|
|
9
|
+
### Dependency updates
|
|
10
|
+
|
|
11
|
+
- @gradio/utils@0.6.1
|
|
12
|
+
|
|
13
|
+
## 0.2.13
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
- [#9118](https://github.com/gradio-app/gradio/pull/9118) [`e1c404d`](https://github.com/gradio-app/gradio/commit/e1c404da1143fb52b659d03e028bdba1badf443d) - setup npm-previews of all packages. Thanks @pngwn!
|
|
18
|
+
|
|
19
|
+
### Dependency updates
|
|
20
|
+
|
|
21
|
+
- @gradio/utils@0.6.0
|
|
22
|
+
|
|
3
23
|
## 0.2.12
|
|
4
24
|
|
|
5
25
|
### Dependency updates
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script context="module">export { TABS } from "./shared/Tabs.svelte";
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<script>import { createEventDispatcher } from "svelte";
|
|
5
|
+
import Tabs from "./shared/Tabs.svelte";
|
|
6
|
+
const dispatch = createEventDispatcher();
|
|
7
|
+
export let visible = true;
|
|
8
|
+
export let elem_id = "";
|
|
9
|
+
export let elem_classes = [];
|
|
10
|
+
export let selected;
|
|
11
|
+
export let gradio;
|
|
12
|
+
$:
|
|
13
|
+
dispatch("prop_change", { selected });
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<Tabs
|
|
17
|
+
{visible}
|
|
18
|
+
{elem_id}
|
|
19
|
+
{elem_classes}
|
|
20
|
+
bind:selected
|
|
21
|
+
on:change={() => gradio.dispatch("change")}
|
|
22
|
+
on:select={(e) => gradio.dispatch("select", e.detail)}
|
|
23
|
+
>
|
|
24
|
+
<slot />
|
|
25
|
+
</Tabs>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
export { TABS } from "./shared/Tabs.svelte";
|
|
3
|
+
import type { Gradio, SelectData } from "@gradio/utils";
|
|
4
|
+
declare const __propDef: {
|
|
5
|
+
props: {
|
|
6
|
+
visible?: boolean | undefined;
|
|
7
|
+
elem_id?: string | undefined;
|
|
8
|
+
elem_classes?: string[] | undefined;
|
|
9
|
+
selected: number | string;
|
|
10
|
+
gradio: Gradio<{
|
|
11
|
+
change: never;
|
|
12
|
+
select: SelectData;
|
|
13
|
+
}>;
|
|
14
|
+
};
|
|
15
|
+
events: {
|
|
16
|
+
prop_change: CustomEvent<any>;
|
|
17
|
+
} & {
|
|
18
|
+
[evt: string]: CustomEvent<any>;
|
|
19
|
+
};
|
|
20
|
+
slots: {
|
|
21
|
+
default: {};
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
export type IndexProps = typeof __propDef.props;
|
|
25
|
+
export type IndexEvents = typeof __propDef.events;
|
|
26
|
+
export type IndexSlots = typeof __propDef.slots;
|
|
27
|
+
export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
|
|
28
|
+
}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
<script context="module">
|
|
2
|
+
export const TABS = {};
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<script>import { setContext, createEventDispatcher } from "svelte";
|
|
6
|
+
import { writable } from "svelte/store";
|
|
7
|
+
export let visible = true;
|
|
8
|
+
export let elem_id = "id";
|
|
9
|
+
export let elem_classes = [];
|
|
10
|
+
export let selected;
|
|
11
|
+
let tabs = [];
|
|
12
|
+
const selected_tab = writable(false);
|
|
13
|
+
const selected_tab_index = writable(0);
|
|
14
|
+
const dispatch = createEventDispatcher();
|
|
15
|
+
setContext(TABS, {
|
|
16
|
+
register_tab: (tab) => {
|
|
17
|
+
let index;
|
|
18
|
+
let existingTab = tabs.find((t) => t.id === tab.id);
|
|
19
|
+
if (existingTab) {
|
|
20
|
+
index = tabs.findIndex((t) => t.id === tab.id);
|
|
21
|
+
tabs[index] = { ...tabs[index], ...tab };
|
|
22
|
+
} else {
|
|
23
|
+
tabs.push({
|
|
24
|
+
name: tab.name,
|
|
25
|
+
id: tab.id,
|
|
26
|
+
elem_id: tab.elem_id,
|
|
27
|
+
visible: tab.visible,
|
|
28
|
+
interactive: tab.interactive
|
|
29
|
+
});
|
|
30
|
+
index = tabs.length - 1;
|
|
31
|
+
}
|
|
32
|
+
selected_tab.update((current) => {
|
|
33
|
+
if (current === false && tab.visible && tab.interactive) {
|
|
34
|
+
return tab.id;
|
|
35
|
+
}
|
|
36
|
+
let nextTab = tabs.find((t) => t.visible && t.interactive);
|
|
37
|
+
return nextTab ? nextTab.id : current;
|
|
38
|
+
});
|
|
39
|
+
tabs = tabs;
|
|
40
|
+
return index;
|
|
41
|
+
},
|
|
42
|
+
unregister_tab: (tab) => {
|
|
43
|
+
const i = tabs.findIndex((t) => t.id === tab.id);
|
|
44
|
+
tabs.splice(i, 1);
|
|
45
|
+
selected_tab.update(
|
|
46
|
+
(current) => current === tab.id ? tabs[i]?.id || tabs[tabs.length - 1]?.id : current
|
|
47
|
+
);
|
|
48
|
+
},
|
|
49
|
+
selected_tab,
|
|
50
|
+
selected_tab_index
|
|
51
|
+
});
|
|
52
|
+
function change_tab(id) {
|
|
53
|
+
const tab_to_activate = tabs.find((t) => t.id === id);
|
|
54
|
+
if (tab_to_activate && tab_to_activate.interactive && tab_to_activate.visible) {
|
|
55
|
+
selected = id;
|
|
56
|
+
$selected_tab = id;
|
|
57
|
+
$selected_tab_index = tabs.findIndex((t) => t.id === id);
|
|
58
|
+
dispatch("change");
|
|
59
|
+
} else {
|
|
60
|
+
console.warn("Attempted to select a non-interactive or hidden tab.");
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
$:
|
|
64
|
+
tabs, selected !== null && change_tab(selected);
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
<div class="tabs {elem_classes.join(' ')}" class:hide={!visible} id={elem_id}>
|
|
68
|
+
<div class="tab-nav scroll-hide" role="tablist">
|
|
69
|
+
{#each tabs as t, i (t.id)}
|
|
70
|
+
{#if t.visible}
|
|
71
|
+
{#if t.id === $selected_tab}
|
|
72
|
+
<button
|
|
73
|
+
role="tab"
|
|
74
|
+
class="selected"
|
|
75
|
+
aria-selected={true}
|
|
76
|
+
aria-controls={t.elem_id}
|
|
77
|
+
id={t.elem_id ? t.elem_id + "-button" : null}
|
|
78
|
+
>
|
|
79
|
+
{t.name}
|
|
80
|
+
</button>
|
|
81
|
+
{:else}
|
|
82
|
+
<button
|
|
83
|
+
role="tab"
|
|
84
|
+
aria-selected={false}
|
|
85
|
+
aria-controls={t.elem_id}
|
|
86
|
+
disabled={!t.interactive}
|
|
87
|
+
aria-disabled={!t.interactive}
|
|
88
|
+
id={t.elem_id ? t.elem_id + "-button" : null}
|
|
89
|
+
on:click={() => {
|
|
90
|
+
change_tab(t.id);
|
|
91
|
+
dispatch("select", { value: t.name, index: i });
|
|
92
|
+
}}
|
|
93
|
+
>
|
|
94
|
+
{t.name}
|
|
95
|
+
</button>
|
|
96
|
+
{/if}
|
|
97
|
+
{/if}
|
|
98
|
+
{/each}
|
|
99
|
+
</div>
|
|
100
|
+
<slot />
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<style>
|
|
104
|
+
.tabs {
|
|
105
|
+
position: relative;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.hide {
|
|
109
|
+
display: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.tab-nav {
|
|
113
|
+
display: flex;
|
|
114
|
+
position: relative;
|
|
115
|
+
flex-wrap: wrap;
|
|
116
|
+
border-bottom: 1px solid var(--border-color-primary);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
button {
|
|
120
|
+
margin-bottom: -1px;
|
|
121
|
+
border: 1px solid transparent;
|
|
122
|
+
border-color: transparent;
|
|
123
|
+
border-bottom: none;
|
|
124
|
+
border-top-right-radius: var(--container-radius);
|
|
125
|
+
border-top-left-radius: var(--container-radius);
|
|
126
|
+
padding: var(--size-1) var(--size-4);
|
|
127
|
+
color: var(--body-text-color-subdued);
|
|
128
|
+
font-weight: var(--section-header-text-weight);
|
|
129
|
+
font-size: var(--section-header-text-size);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
button:disabled {
|
|
133
|
+
color: var(--body-text-color-subdued);
|
|
134
|
+
opacity: 0.5;
|
|
135
|
+
cursor: not-allowed;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
button:hover {
|
|
139
|
+
color: var(--body-text-color);
|
|
140
|
+
}
|
|
141
|
+
.selected {
|
|
142
|
+
border-color: var(--border-color-primary);
|
|
143
|
+
background: var(--background-fill-primary);
|
|
144
|
+
color: var(--body-text-color);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.bar {
|
|
148
|
+
display: block;
|
|
149
|
+
position: absolute;
|
|
150
|
+
bottom: -2px;
|
|
151
|
+
left: 0;
|
|
152
|
+
z-index: 999;
|
|
153
|
+
background: var(--background-fill-primary);
|
|
154
|
+
width: 100%;
|
|
155
|
+
height: 2px;
|
|
156
|
+
content: "";
|
|
157
|
+
}
|
|
158
|
+
</style>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
export declare const TABS: {};
|
|
3
|
+
import type { SelectData } from "@gradio/utils";
|
|
4
|
+
declare const __propDef: {
|
|
5
|
+
props: {
|
|
6
|
+
visible?: boolean | undefined;
|
|
7
|
+
elem_id?: string | undefined;
|
|
8
|
+
elem_classes?: string[] | undefined;
|
|
9
|
+
selected: number | string | object;
|
|
10
|
+
};
|
|
11
|
+
events: {
|
|
12
|
+
change: CustomEvent<undefined>;
|
|
13
|
+
select: CustomEvent<SelectData>;
|
|
14
|
+
} & {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
};
|
|
17
|
+
slots: {
|
|
18
|
+
default: {};
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
export type TabsProps = typeof __propDef.props;
|
|
22
|
+
export type TabsEvents = typeof __propDef.events;
|
|
23
|
+
export type TabsSlots = typeof __propDef.slots;
|
|
24
|
+
export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
|
|
25
|
+
}
|
|
26
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/tabs",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.14",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -9,13 +9,25 @@
|
|
|
9
9
|
"main_changeset": true,
|
|
10
10
|
"main": "Index.svelte",
|
|
11
11
|
"exports": {
|
|
12
|
-
".":
|
|
12
|
+
".": {
|
|
13
|
+
"gradio": "./Index.svelte",
|
|
14
|
+
"svelte": "./dist/Index.svelte",
|
|
15
|
+
"types": "./dist/Index.svelte.d.ts"
|
|
16
|
+
},
|
|
13
17
|
"./package.json": "./package.json"
|
|
14
18
|
},
|
|
15
19
|
"dependencies": {
|
|
16
|
-
"@gradio/utils": "^0.
|
|
20
|
+
"@gradio/utils": "^0.6.1"
|
|
17
21
|
},
|
|
18
22
|
"devDependencies": {
|
|
19
|
-
"@gradio/preview": "^0.
|
|
23
|
+
"@gradio/preview": "^0.11.1"
|
|
24
|
+
},
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"svelte": "^4.0.0"
|
|
27
|
+
},
|
|
28
|
+
"repository": {
|
|
29
|
+
"type": "git",
|
|
30
|
+
"url": "git+https://github.com/gradio-app/gradio.git",
|
|
31
|
+
"directory": "js/tabs"
|
|
20
32
|
}
|
|
21
33
|
}
|