@gradio/dataframe 0.20.0 → 0.20.2-dev.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 +25 -0
- package/Dataframe.stories.svelte +0 -25
- package/Index.svelte +2 -4
- package/Standalone.stories.svelte +168 -0
- package/dist/Index.svelte +2 -4
- package/dist/Index.svelte.d.ts +3 -7
- package/dist/shared/Table.svelte +8 -7
- package/dist/shared/Table.svelte.d.ts +1 -2
- package/dist/shared/Toolbar.svelte +19 -11
- package/dist/standalone/Index.svelte +31 -4
- package/dist/standalone/Index.svelte.d.ts +0 -2
- package/package.json +8 -8
- package/shared/Table.svelte +9 -7
- package/shared/Toolbar.svelte +19 -11
- package/standalone/Index.svelte +31 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @gradio/dataframe
|
|
2
2
|
|
|
3
|
+
## 0.20.2-dev.0
|
|
4
|
+
|
|
5
|
+
### Dependency updates
|
|
6
|
+
|
|
7
|
+
- @gradio/upload@0.17.2-dev.0
|
|
8
|
+
- @gradio/client@2.0.0-dev.0
|
|
9
|
+
- @gradio/button@0.5.14-dev.0
|
|
10
|
+
|
|
11
|
+
## 0.20.1
|
|
12
|
+
|
|
13
|
+
### Dependency updates
|
|
14
|
+
|
|
15
|
+
- @gradio/client@1.19.1
|
|
16
|
+
|
|
17
|
+
## 0.20.1
|
|
18
|
+
|
|
19
|
+
### Fixes
|
|
20
|
+
|
|
21
|
+
- [#11964](https://github.com/gradio-app/gradio/pull/11964) [`86e6176`](https://github.com/gradio-app/gradio/commit/86e61763a14c745f7eb0ce35b861ea2be2336a15) - Add dark mode to storybook. Thanks @hannahblair!
|
|
22
|
+
|
|
23
|
+
### Dependency updates
|
|
24
|
+
|
|
25
|
+
- @gradio/upload@0.17.1
|
|
26
|
+
- @gradio/atoms@0.18.1
|
|
27
|
+
|
|
3
28
|
## 0.20.0
|
|
4
29
|
|
|
5
30
|
### Features
|
package/Dataframe.stories.svelte
CHANGED
|
@@ -439,31 +439,6 @@
|
|
|
439
439
|
}}
|
|
440
440
|
/>
|
|
441
441
|
|
|
442
|
-
<Story
|
|
443
|
-
name="Dataframe with custom components"
|
|
444
|
-
args={{
|
|
445
|
-
values: [
|
|
446
|
-
[
|
|
447
|
-
"Absol G",
|
|
448
|
-
70,
|
|
449
|
-
"https://images.pokemontcg.io/pl3/1_hires.png",
|
|
450
|
-
"pl3-1",
|
|
451
|
-
"Supreme Victors"
|
|
452
|
-
]
|
|
453
|
-
],
|
|
454
|
-
datatype: ["str", "number", "image", "str", "str"],
|
|
455
|
-
headers: ["Pokemon", "HP", "Image", "ID", "Set"],
|
|
456
|
-
label: "Pokemon Cards",
|
|
457
|
-
col_count: [5, "fixed"],
|
|
458
|
-
row_count: [1, "dynamic"],
|
|
459
|
-
editable: true,
|
|
460
|
-
editable: true,
|
|
461
|
-
components: {
|
|
462
|
-
image: Image
|
|
463
|
-
}
|
|
464
|
-
}}
|
|
465
|
-
/>
|
|
466
|
-
|
|
467
442
|
<Story
|
|
468
443
|
name="Dataframe with row and column selection"
|
|
469
444
|
args={{
|
package/Index.svelte
CHANGED
|
@@ -51,9 +51,8 @@
|
|
|
51
51
|
export let max_height: number | undefined = undefined;
|
|
52
52
|
export let loading_status: LoadingStatus;
|
|
53
53
|
export let interactive: boolean;
|
|
54
|
-
export let
|
|
54
|
+
export let buttons: string[] | null = null;
|
|
55
55
|
export let max_chars: number | undefined = undefined;
|
|
56
|
-
export let show_copy_button = false;
|
|
57
56
|
export let show_row_numbers = false;
|
|
58
57
|
export let show_search: "none" | "search" | "filter" = "none";
|
|
59
58
|
export let pinned_columns = 0;
|
|
@@ -111,9 +110,8 @@
|
|
|
111
110
|
upload={(...args) => gradio.client.upload(...args)}
|
|
112
111
|
stream_handler={(...args) => gradio.client.stream(...args)}
|
|
113
112
|
bind:value_is_output
|
|
114
|
-
{
|
|
113
|
+
{buttons}
|
|
115
114
|
{max_chars}
|
|
116
|
-
{show_copy_button}
|
|
117
115
|
{show_row_numbers}
|
|
118
116
|
{show_search}
|
|
119
117
|
{pinned_columns}
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import StandaloneDataframe from "./standalone/Index.svelte";
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<Meta
|
|
7
|
+
title="Components/Standalone Dataframe"
|
|
8
|
+
component={StandaloneDataframe}
|
|
9
|
+
parameters={{
|
|
10
|
+
test: {
|
|
11
|
+
dangerouslyIgnoreUnhandledErrors: true
|
|
12
|
+
},
|
|
13
|
+
docs: {
|
|
14
|
+
description: {
|
|
15
|
+
component:
|
|
16
|
+
"Standalone DataFrame component that can be used independently outside of Gradio apps. Includes comprehensive CSS variables for theming and dark mode support. Use the dark mode toggle in the toolbar to test dark mode variables."
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}}
|
|
20
|
+
argTypes={{
|
|
21
|
+
interactive: {
|
|
22
|
+
control: "boolean",
|
|
23
|
+
description: "Whether the DataFrame is editable",
|
|
24
|
+
defaultValue: true
|
|
25
|
+
},
|
|
26
|
+
show_label: {
|
|
27
|
+
control: "boolean",
|
|
28
|
+
description: "Whether to show the label",
|
|
29
|
+
defaultValue: true
|
|
30
|
+
},
|
|
31
|
+
label: {
|
|
32
|
+
control: "text",
|
|
33
|
+
description: "Label for the DataFrame",
|
|
34
|
+
defaultValue: "DataFrame"
|
|
35
|
+
},
|
|
36
|
+
max_height: {
|
|
37
|
+
control: "number",
|
|
38
|
+
description: "Maximum height in pixels",
|
|
39
|
+
defaultValue: 500
|
|
40
|
+
},
|
|
41
|
+
show_search: {
|
|
42
|
+
control: "select",
|
|
43
|
+
options: ["none", "search", "filter"],
|
|
44
|
+
description: "Type of search/filter to show",
|
|
45
|
+
defaultValue: "none"
|
|
46
|
+
},
|
|
47
|
+
show_copy_button: {
|
|
48
|
+
control: "boolean",
|
|
49
|
+
description: "Whether to show the copy button",
|
|
50
|
+
defaultValue: false
|
|
51
|
+
},
|
|
52
|
+
show_fullscreen_button: {
|
|
53
|
+
control: "boolean",
|
|
54
|
+
description: "Whether to show the fullscreen button",
|
|
55
|
+
defaultValue: false
|
|
56
|
+
},
|
|
57
|
+
show_row_numbers: {
|
|
58
|
+
control: "boolean",
|
|
59
|
+
description: "Whether to show row numbers",
|
|
60
|
+
defaultValue: false
|
|
61
|
+
},
|
|
62
|
+
wrap: {
|
|
63
|
+
control: "boolean",
|
|
64
|
+
description: "Whether text should wrap or truncate with ellipsis",
|
|
65
|
+
defaultValue: false
|
|
66
|
+
}
|
|
67
|
+
}}
|
|
68
|
+
/>
|
|
69
|
+
|
|
70
|
+
<Template let:args>
|
|
71
|
+
<div class="standalone-container">
|
|
72
|
+
<StandaloneDataframe {...args} />
|
|
73
|
+
</div>
|
|
74
|
+
</Template>
|
|
75
|
+
|
|
76
|
+
<Story
|
|
77
|
+
name="Basic Standalone"
|
|
78
|
+
args={{
|
|
79
|
+
value: {
|
|
80
|
+
data: [
|
|
81
|
+
["Alice Johnson", 28, "Engineer", 75000, true],
|
|
82
|
+
["Bob Smith", 35, "Designer", 65000, false],
|
|
83
|
+
["Carol Wilson", 42, "Manager", 85000, true],
|
|
84
|
+
["David Brown", 31, "Developer", 70000, true],
|
|
85
|
+
["Eva Davis", 29, "Analyst", 60000, false]
|
|
86
|
+
],
|
|
87
|
+
headers: ["Name", "Age", "Role", "Salary", "Remote"],
|
|
88
|
+
metadata: null
|
|
89
|
+
},
|
|
90
|
+
datatype: ["str", "number", "str", "number", "bool"],
|
|
91
|
+
interactive: true,
|
|
92
|
+
show_label: true,
|
|
93
|
+
label: "Employee Data",
|
|
94
|
+
max_height: 400,
|
|
95
|
+
show_search: "search",
|
|
96
|
+
show_copy_button: true,
|
|
97
|
+
show_fullscreen_button: true
|
|
98
|
+
}}
|
|
99
|
+
/>
|
|
100
|
+
|
|
101
|
+
<Story
|
|
102
|
+
name="Large Dataset Performance"
|
|
103
|
+
args={{
|
|
104
|
+
value: {
|
|
105
|
+
data: Array.from({ length: 100 }, (_, i) => [
|
|
106
|
+
`User ${i + 1}`,
|
|
107
|
+
Math.floor(Math.random() * 50) + 20,
|
|
108
|
+
["Engineer", "Designer", "Manager", "Developer", "Analyst"][
|
|
109
|
+
Math.floor(Math.random() * 5)
|
|
110
|
+
],
|
|
111
|
+
Math.floor(Math.random() * 50000) + 50000,
|
|
112
|
+
Math.random() > 0.5,
|
|
113
|
+
`City ${Math.floor(Math.random() * 20) + 1}`,
|
|
114
|
+
Math.floor(Math.random() * 100)
|
|
115
|
+
]),
|
|
116
|
+
headers: ["Name", "Age", "Role", "Salary", "Remote", "Location", "Score"],
|
|
117
|
+
metadata: null
|
|
118
|
+
},
|
|
119
|
+
datatype: ["str", "number", "str", "number", "bool", "str", "number"],
|
|
120
|
+
interactive: false,
|
|
121
|
+
show_label: true,
|
|
122
|
+
label: "Large Dataset (100 rows)",
|
|
123
|
+
max_height: 400,
|
|
124
|
+
show_row_numbers: true,
|
|
125
|
+
column_widths: ["120px", "60px", "100px", "80px", "70px", "100px", "70px"]
|
|
126
|
+
}}
|
|
127
|
+
/>
|
|
128
|
+
|
|
129
|
+
<Story
|
|
130
|
+
name="Styled with Custom Colors"
|
|
131
|
+
args={{
|
|
132
|
+
value: {
|
|
133
|
+
data: [
|
|
134
|
+
[95, 87, 92],
|
|
135
|
+
[78, 94, 89],
|
|
136
|
+
[88, 91, 85],
|
|
137
|
+
[92, 76, 94]
|
|
138
|
+
],
|
|
139
|
+
headers: ["Math", "Science", "English"],
|
|
140
|
+
metadata: {
|
|
141
|
+
styling: [
|
|
142
|
+
[
|
|
143
|
+
"background-color: #dcfce7; color: #166534;",
|
|
144
|
+
"",
|
|
145
|
+
"background-color: #dbeafe; color: #1e40af;"
|
|
146
|
+
],
|
|
147
|
+
["", "background-color: #dcfce7; color: #166534;", ""],
|
|
148
|
+
[
|
|
149
|
+
"background-color: #fef3c7; color: #92400e;",
|
|
150
|
+
"",
|
|
151
|
+
"background-color: #fef3c7; color: #92400e;"
|
|
152
|
+
],
|
|
153
|
+
[
|
|
154
|
+
"background-color: #dcfce7; color: #166534;",
|
|
155
|
+
"",
|
|
156
|
+
"background-color: #dcfce7; color: #166534;"
|
|
157
|
+
]
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
datatype: ["number", "number", "number"],
|
|
162
|
+
interactive: false,
|
|
163
|
+
show_label: true,
|
|
164
|
+
label: "Test Scores with Custom Styling",
|
|
165
|
+
max_height: 250,
|
|
166
|
+
show_row_numbers: true
|
|
167
|
+
}}
|
|
168
|
+
/>
|
package/dist/Index.svelte
CHANGED
|
@@ -33,9 +33,8 @@ export let latex_delimiters;
|
|
|
33
33
|
export let max_height = void 0;
|
|
34
34
|
export let loading_status;
|
|
35
35
|
export let interactive;
|
|
36
|
-
export let
|
|
36
|
+
export let buttons = null;
|
|
37
37
|
export let max_chars = void 0;
|
|
38
|
-
export let show_copy_button = false;
|
|
39
38
|
export let show_row_numbers = false;
|
|
40
39
|
export let show_search = "none";
|
|
41
40
|
export let pinned_columns = 0;
|
|
@@ -93,9 +92,8 @@ export let fullscreen = false;
|
|
|
93
92
|
upload={(...args) => gradio.client.upload(...args)}
|
|
94
93
|
stream_handler={(...args) => gradio.client.stream(...args)}
|
|
95
94
|
bind:value_is_output
|
|
96
|
-
{
|
|
95
|
+
{buttons}
|
|
97
96
|
{max_chars}
|
|
98
|
-
{show_copy_button}
|
|
99
97
|
{show_row_numbers}
|
|
100
98
|
{show_search}
|
|
101
99
|
{pinned_columns}
|
package/dist/Index.svelte.d.ts
CHANGED
|
@@ -38,9 +38,8 @@ declare const __propDef: {
|
|
|
38
38
|
max_height?: number | undefined;
|
|
39
39
|
loading_status: LoadingStatus;
|
|
40
40
|
interactive: boolean;
|
|
41
|
-
|
|
41
|
+
buttons?: string[] | null;
|
|
42
42
|
max_chars?: number | undefined;
|
|
43
|
-
show_copy_button?: boolean;
|
|
44
43
|
show_row_numbers?: boolean;
|
|
45
44
|
show_search?: "none" | "search" | "filter";
|
|
46
45
|
pinned_columns?: number;
|
|
@@ -143,15 +142,12 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
|
|
|
143
142
|
get interactive(): boolean;
|
|
144
143
|
/**accessor*/
|
|
145
144
|
set interactive(_: boolean);
|
|
146
|
-
get
|
|
145
|
+
get buttons(): string[] | null | undefined;
|
|
147
146
|
/**accessor*/
|
|
148
|
-
set
|
|
147
|
+
set buttons(_: string[] | null | undefined);
|
|
149
148
|
get max_chars(): number | undefined;
|
|
150
149
|
/**accessor*/
|
|
151
150
|
set max_chars(_: number | undefined);
|
|
152
|
-
get show_copy_button(): boolean | undefined;
|
|
153
|
-
/**accessor*/
|
|
154
|
-
set show_copy_button(_: boolean | undefined);
|
|
155
151
|
get show_row_numbers(): boolean | undefined;
|
|
156
152
|
/**accessor*/
|
|
157
153
|
set show_row_numbers(_: boolean | undefined);
|
package/dist/shared/Table.svelte
CHANGED
|
@@ -53,8 +53,7 @@ export let column_widths = [];
|
|
|
53
53
|
export let show_row_numbers = false;
|
|
54
54
|
export let upload;
|
|
55
55
|
export let stream_handler;
|
|
56
|
-
export let
|
|
57
|
-
export let show_copy_button = false;
|
|
56
|
+
export let buttons = null;
|
|
58
57
|
export let value_is_output = false;
|
|
59
58
|
export let max_chars = void 0;
|
|
60
59
|
export let show_search = "none";
|
|
@@ -62,8 +61,8 @@ export let pinned_columns = 0;
|
|
|
62
61
|
export let static_columns = [];
|
|
63
62
|
export let fullscreen = false;
|
|
64
63
|
const df_ctx = create_dataframe_context({
|
|
65
|
-
show_fullscreen_button,
|
|
66
|
-
show_copy_button,
|
|
64
|
+
show_fullscreen_button: buttons === null ? true : buttons.includes("fullscreen"),
|
|
65
|
+
show_copy_button: buttons === null ? true : buttons.includes("copy"),
|
|
67
66
|
show_search,
|
|
68
67
|
show_row_numbers,
|
|
69
68
|
editable,
|
|
@@ -623,7 +622,7 @@ function get_cell_display_value(row, col) {
|
|
|
623
622
|
<svelte:window on:resize={() => set_cell_widths()} />
|
|
624
623
|
|
|
625
624
|
<div class="table-container">
|
|
626
|
-
{#if (label && label.length !== 0 && show_label) ||
|
|
625
|
+
{#if (label && label.length !== 0 && show_label) || (buttons === null ? true : buttons.includes("fullscreen")) || (buttons === null ? true : buttons.includes("copy")) || show_search !== "none"}
|
|
627
626
|
<div class="header-row">
|
|
628
627
|
{#if label && label.length !== 0 && show_label}
|
|
629
628
|
<div class="label">
|
|
@@ -631,10 +630,12 @@ function get_cell_display_value(row, col) {
|
|
|
631
630
|
</div>
|
|
632
631
|
{/if}
|
|
633
632
|
<Toolbar
|
|
634
|
-
{
|
|
633
|
+
show_fullscreen_button={buttons === null
|
|
634
|
+
? true
|
|
635
|
+
: buttons.includes("fullscreen")}
|
|
635
636
|
{fullscreen}
|
|
636
637
|
on_copy={async () => await copy_table_data(data, null)}
|
|
637
|
-
{
|
|
638
|
+
show_copy_button={buttons === null ? true : buttons.includes("copy")}
|
|
638
639
|
{show_search}
|
|
639
640
|
on:search={(e) => df_actions.handle_search(e.detail)}
|
|
640
641
|
on:fullscreen
|
|
@@ -29,8 +29,7 @@ declare const __propDef: {
|
|
|
29
29
|
show_row_numbers?: boolean;
|
|
30
30
|
upload: Client["upload"];
|
|
31
31
|
stream_handler: Client["stream"];
|
|
32
|
-
|
|
33
|
-
show_copy_button?: boolean;
|
|
32
|
+
buttons?: string[] | null;
|
|
34
33
|
value_is_output?: boolean;
|
|
35
34
|
max_chars?: number | undefined;
|
|
36
35
|
show_search?: "none" | "search" | "filter";
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { FullscreenButton } from "@gradio/atoms";
|
|
3
3
|
import { onDestroy } from "svelte";
|
|
4
4
|
import { createEventDispatcher } from "svelte";
|
|
5
|
+
import { IconButton } from "@gradio/atoms";
|
|
5
6
|
export let show_fullscreen_button = false;
|
|
6
7
|
export let show_copy_button = false;
|
|
7
8
|
export let show_search = "none";
|
|
@@ -64,18 +65,11 @@ onDestroy(() => {
|
|
|
64
65
|
</div>
|
|
65
66
|
{/if}
|
|
66
67
|
{#if show_copy_button}
|
|
67
|
-
<
|
|
68
|
-
|
|
68
|
+
<IconButton
|
|
69
|
+
Icon={copied ? Check : Copy}
|
|
70
|
+
label={copied ? "Copied to clipboard" : "Copy table data"}
|
|
69
71
|
on:click={handle_copy}
|
|
70
|
-
|
|
71
|
-
title={copied ? "Copied to clipboard" : "Copy table data"}
|
|
72
|
-
>
|
|
73
|
-
{#if copied}
|
|
74
|
-
<Check />
|
|
75
|
-
{:else}
|
|
76
|
-
<Copy />
|
|
77
|
-
{/if}
|
|
78
|
-
</button>
|
|
72
|
+
/>
|
|
79
73
|
{/if}
|
|
80
74
|
{#if show_fullscreen_button}
|
|
81
75
|
<FullscreenButton {fullscreen} on:fullscreen />
|
|
@@ -96,6 +90,7 @@ onDestroy(() => {
|
|
|
96
90
|
display: flex;
|
|
97
91
|
gap: var(--size-1);
|
|
98
92
|
flex-wrap: nowrap;
|
|
93
|
+
align-items: center;
|
|
99
94
|
}
|
|
100
95
|
|
|
101
96
|
.toolbar-button {
|
|
@@ -177,4 +172,17 @@ onDestroy(() => {
|
|
|
177
172
|
.check-button:hover {
|
|
178
173
|
background: var(--color-accent-soft);
|
|
179
174
|
}
|
|
175
|
+
|
|
176
|
+
.toolbar-buttons :global(.icon-button) {
|
|
177
|
+
background: transparent !important;
|
|
178
|
+
height: var(--size-6);
|
|
179
|
+
width: var(--size-6);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.toolbar-buttons :global(.icon-button:hover) {
|
|
183
|
+
background: var(--background-fill-secondary) !important;
|
|
184
|
+
color: var(--body-text-color) !important;
|
|
185
|
+
border: 1px solid var(--border-color-primary);
|
|
186
|
+
border-radius: var(--radius-sm) !important;
|
|
187
|
+
}
|
|
180
188
|
</style>
|
|
@@ -19,8 +19,6 @@ export let interactive = true;
|
|
|
19
19
|
export let show_row_numbers = false;
|
|
20
20
|
export let max_height = 500;
|
|
21
21
|
export let show_search = "none";
|
|
22
|
-
export let show_copy_button = false;
|
|
23
|
-
export let show_fullscreen_button = false;
|
|
24
22
|
export let wrap = false;
|
|
25
23
|
export let line_breaks = true;
|
|
26
24
|
export let column_widths = [];
|
|
@@ -72,8 +70,7 @@ onMount(() => {
|
|
|
72
70
|
{show_row_numbers}
|
|
73
71
|
{max_height}
|
|
74
72
|
{show_search}
|
|
75
|
-
{
|
|
76
|
-
{show_fullscreen_button}
|
|
73
|
+
buttons={null}
|
|
77
74
|
{wrap}
|
|
78
75
|
{line_breaks}
|
|
79
76
|
{column_widths}
|
|
@@ -158,6 +155,16 @@ onMount(() => {
|
|
|
158
155
|
--df-block-radius: var(--df-radius-sm, 4px);
|
|
159
156
|
--df-table-even-background-fill: #ffffff;
|
|
160
157
|
--df-table-odd-background-fill: #f9fafb;
|
|
158
|
+
|
|
159
|
+
--df-background-fill-primary-dark: var(--df-neutral-950, #0f0f11);
|
|
160
|
+
--df-background-fill-secondary-dark: var(--df-neutral-900, #18181b);
|
|
161
|
+
--df-body-text-color-dark: var(--df-neutral-100, #f4f4f5);
|
|
162
|
+
--df-block-background-fill-dark: var(--df-neutral-800, #27272a);
|
|
163
|
+
--df-table-even-background-fill-dark: var(--df-neutral-950, #0f0f11);
|
|
164
|
+
--df-table-odd-background-fill-dark: var(--df-neutral-900, #18181b);
|
|
165
|
+
--df-border-color-primary-dark: var(--df-neutral-700, #3f3f46);
|
|
166
|
+
--df-color-accent-dark: var(--df-primary-600, #ea580c);
|
|
167
|
+
--df-color-accent-soft-dark: var(--df-neutral-700, #3f3f46);
|
|
161
168
|
--df-radius-sm: 4px;
|
|
162
169
|
--df-size-1: 4px;
|
|
163
170
|
--df-size-2: 8px;
|
|
@@ -327,7 +334,15 @@ onMount(() => {
|
|
|
327
334
|
--cell-padding: var(--gr-df-cell-padding, var(--size-2));
|
|
328
335
|
--df-font-size: var(--gr-df-font-size, var(--text-md));
|
|
329
336
|
--background-fill-primary: var(--df-background-fill-primary, #ffffff);
|
|
337
|
+
--background-fill-primary-dark: var(
|
|
338
|
+
--df-background-fill-primary-dark,
|
|
339
|
+
var(--neutral-950, #0f0f11)
|
|
340
|
+
);
|
|
330
341
|
--background-fill-secondary: var(--df-background-fill-secondary, #f8fafc);
|
|
342
|
+
--background-fill-secondary-dark: var(
|
|
343
|
+
--df-background-fill-secondary-dark,
|
|
344
|
+
var(--neutral-900, #18181b)
|
|
345
|
+
);
|
|
331
346
|
--color-accent: var(--gr-df-accent, var(--df-color-accent, #7c3aed));
|
|
332
347
|
--color-accent-soft: var(
|
|
333
348
|
--gr-df-accent-soft,
|
|
@@ -523,6 +538,18 @@ onMount(() => {
|
|
|
523
538
|
background-color: var(--block-background-fill);
|
|
524
539
|
}
|
|
525
540
|
|
|
541
|
+
:global(.dark) .gradio-dataframe-standalone {
|
|
542
|
+
--df-background-fill-primary: var(--df-background-fill-primary-dark);
|
|
543
|
+
--df-background-fill-secondary: var(--df-background-fill-secondary-dark);
|
|
544
|
+
--df-body-text-color: var(--df-body-text-color-dark);
|
|
545
|
+
--df-block-background-fill: var(--df-block-background-fill-dark);
|
|
546
|
+
--df-table-even-background-fill: var(--df-table-even-background-fill-dark);
|
|
547
|
+
--df-table-odd-background-fill: var(--df-table-odd-background-fill-dark);
|
|
548
|
+
--df-border-color-primary: var(--df-border-color-primary-dark);
|
|
549
|
+
--df-color-accent: var(--df-color-accent-dark);
|
|
550
|
+
--df-color-accent-soft: var(--df-color-accent-soft-dark);
|
|
551
|
+
}
|
|
552
|
+
|
|
526
553
|
:global(.gradio-container),
|
|
527
554
|
:global(*),
|
|
528
555
|
:global(::before),
|
|
@@ -10,8 +10,6 @@ declare const __propDef: {
|
|
|
10
10
|
show_row_numbers?: boolean;
|
|
11
11
|
max_height?: number;
|
|
12
12
|
show_search?: "none" | "search" | "filter";
|
|
13
|
-
show_copy_button?: boolean;
|
|
14
|
-
show_fullscreen_button?: boolean;
|
|
15
13
|
wrap?: boolean;
|
|
16
14
|
line_breaks?: boolean;
|
|
17
15
|
column_widths?: string[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/dataframe",
|
|
3
|
-
"version": "0.20.0",
|
|
3
|
+
"version": "0.20.2-dev.0",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -13,15 +13,15 @@
|
|
|
13
13
|
"@types/katex": "^0.16.0",
|
|
14
14
|
"d3-dsv": "^3.0.1",
|
|
15
15
|
"dequal": "^2.0.2",
|
|
16
|
-
"@gradio/
|
|
17
|
-
"@gradio/
|
|
16
|
+
"@gradio/button": "^0.5.14-dev.0",
|
|
17
|
+
"@gradio/atoms": "^0.18.1",
|
|
18
|
+
"@gradio/checkbox": "^0.4.31",
|
|
18
19
|
"@gradio/icons": "^0.14.0",
|
|
19
|
-
"@gradio/markdown-code": "^0.5.2",
|
|
20
|
-
"@gradio/checkbox": "^0.4.30",
|
|
21
20
|
"@gradio/statustracker": "^0.11.1",
|
|
22
|
-
"@gradio/upload": "^0.17.0",
|
|
23
|
-
"@gradio/
|
|
24
|
-
"@gradio/client": "^
|
|
21
|
+
"@gradio/upload": "^0.17.2-dev.0",
|
|
22
|
+
"@gradio/markdown-code": "^0.5.2",
|
|
23
|
+
"@gradio/client": "^2.0.0-dev.0",
|
|
24
|
+
"@gradio/utils": "^0.10.2"
|
|
25
25
|
},
|
|
26
26
|
"exports": {
|
|
27
27
|
".": {
|
package/shared/Table.svelte
CHANGED
|
@@ -76,8 +76,7 @@
|
|
|
76
76
|
export let show_row_numbers = false;
|
|
77
77
|
export let upload: Client["upload"];
|
|
78
78
|
export let stream_handler: Client["stream"];
|
|
79
|
-
export let
|
|
80
|
-
export let show_copy_button = false;
|
|
79
|
+
export let buttons: string[] | null = null;
|
|
81
80
|
export let value_is_output = false;
|
|
82
81
|
export let max_chars: number | undefined = undefined;
|
|
83
82
|
export let show_search: "none" | "search" | "filter" = "none";
|
|
@@ -86,8 +85,9 @@
|
|
|
86
85
|
export let fullscreen = false;
|
|
87
86
|
|
|
88
87
|
const df_ctx = create_dataframe_context({
|
|
89
|
-
show_fullscreen_button
|
|
90
|
-
|
|
88
|
+
show_fullscreen_button:
|
|
89
|
+
buttons === null ? true : buttons.includes("fullscreen"),
|
|
90
|
+
show_copy_button: buttons === null ? true : buttons.includes("copy"),
|
|
91
91
|
show_search,
|
|
92
92
|
show_row_numbers,
|
|
93
93
|
editable,
|
|
@@ -823,7 +823,7 @@
|
|
|
823
823
|
<svelte:window on:resize={() => set_cell_widths()} />
|
|
824
824
|
|
|
825
825
|
<div class="table-container">
|
|
826
|
-
{#if (label && label.length !== 0 && show_label) ||
|
|
826
|
+
{#if (label && label.length !== 0 && show_label) || (buttons === null ? true : buttons.includes("fullscreen")) || (buttons === null ? true : buttons.includes("copy")) || show_search !== "none"}
|
|
827
827
|
<div class="header-row">
|
|
828
828
|
{#if label && label.length !== 0 && show_label}
|
|
829
829
|
<div class="label">
|
|
@@ -831,10 +831,12 @@
|
|
|
831
831
|
</div>
|
|
832
832
|
{/if}
|
|
833
833
|
<Toolbar
|
|
834
|
-
{
|
|
834
|
+
show_fullscreen_button={buttons === null
|
|
835
|
+
? true
|
|
836
|
+
: buttons.includes("fullscreen")}
|
|
835
837
|
{fullscreen}
|
|
836
838
|
on_copy={async () => await copy_table_data(data, null)}
|
|
837
|
-
{
|
|
839
|
+
show_copy_button={buttons === null ? true : buttons.includes("copy")}
|
|
838
840
|
{show_search}
|
|
839
841
|
on:search={(e) => df_actions.handle_search(e.detail)}
|
|
840
842
|
on:fullscreen
|
package/shared/Toolbar.svelte
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { FullscreenButton } from "@gradio/atoms";
|
|
4
4
|
import { onDestroy } from "svelte";
|
|
5
5
|
import { createEventDispatcher } from "svelte";
|
|
6
|
+
import { IconButton } from "@gradio/atoms";
|
|
6
7
|
|
|
7
8
|
export let show_fullscreen_button = false;
|
|
8
9
|
export let show_copy_button = false;
|
|
@@ -74,18 +75,11 @@
|
|
|
74
75
|
</div>
|
|
75
76
|
{/if}
|
|
76
77
|
{#if show_copy_button}
|
|
77
|
-
<
|
|
78
|
-
|
|
78
|
+
<IconButton
|
|
79
|
+
Icon={copied ? Check : Copy}
|
|
80
|
+
label={copied ? "Copied to clipboard" : "Copy table data"}
|
|
79
81
|
on:click={handle_copy}
|
|
80
|
-
|
|
81
|
-
title={copied ? "Copied to clipboard" : "Copy table data"}
|
|
82
|
-
>
|
|
83
|
-
{#if copied}
|
|
84
|
-
<Check />
|
|
85
|
-
{:else}
|
|
86
|
-
<Copy />
|
|
87
|
-
{/if}
|
|
88
|
-
</button>
|
|
82
|
+
/>
|
|
89
83
|
{/if}
|
|
90
84
|
{#if show_fullscreen_button}
|
|
91
85
|
<FullscreenButton {fullscreen} on:fullscreen />
|
|
@@ -106,6 +100,7 @@
|
|
|
106
100
|
display: flex;
|
|
107
101
|
gap: var(--size-1);
|
|
108
102
|
flex-wrap: nowrap;
|
|
103
|
+
align-items: center;
|
|
109
104
|
}
|
|
110
105
|
|
|
111
106
|
.toolbar-button {
|
|
@@ -187,4 +182,17 @@
|
|
|
187
182
|
.check-button:hover {
|
|
188
183
|
background: var(--color-accent-soft);
|
|
189
184
|
}
|
|
185
|
+
|
|
186
|
+
.toolbar-buttons :global(.icon-button) {
|
|
187
|
+
background: transparent !important;
|
|
188
|
+
height: var(--size-6);
|
|
189
|
+
width: var(--size-6);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.toolbar-buttons :global(.icon-button:hover) {
|
|
193
|
+
background: var(--background-fill-secondary) !important;
|
|
194
|
+
color: var(--body-text-color) !important;
|
|
195
|
+
border: 1px solid var(--border-color-primary);
|
|
196
|
+
border-radius: var(--radius-sm) !important;
|
|
197
|
+
}
|
|
190
198
|
</style>
|
package/standalone/Index.svelte
CHANGED
|
@@ -24,8 +24,6 @@
|
|
|
24
24
|
export let show_row_numbers = false;
|
|
25
25
|
export let max_height = 500;
|
|
26
26
|
export let show_search: "none" | "search" | "filter" = "none";
|
|
27
|
-
export let show_copy_button = false;
|
|
28
|
-
export let show_fullscreen_button = false;
|
|
29
27
|
export let wrap = false;
|
|
30
28
|
export let line_breaks = true;
|
|
31
29
|
export let column_widths: string[] = [];
|
|
@@ -100,8 +98,7 @@
|
|
|
100
98
|
{show_row_numbers}
|
|
101
99
|
{max_height}
|
|
102
100
|
{show_search}
|
|
103
|
-
{
|
|
104
|
-
{show_fullscreen_button}
|
|
101
|
+
buttons={null}
|
|
105
102
|
{wrap}
|
|
106
103
|
{line_breaks}
|
|
107
104
|
{column_widths}
|
|
@@ -186,6 +183,16 @@
|
|
|
186
183
|
--df-block-radius: var(--df-radius-sm, 4px);
|
|
187
184
|
--df-table-even-background-fill: #ffffff;
|
|
188
185
|
--df-table-odd-background-fill: #f9fafb;
|
|
186
|
+
|
|
187
|
+
--df-background-fill-primary-dark: var(--df-neutral-950, #0f0f11);
|
|
188
|
+
--df-background-fill-secondary-dark: var(--df-neutral-900, #18181b);
|
|
189
|
+
--df-body-text-color-dark: var(--df-neutral-100, #f4f4f5);
|
|
190
|
+
--df-block-background-fill-dark: var(--df-neutral-800, #27272a);
|
|
191
|
+
--df-table-even-background-fill-dark: var(--df-neutral-950, #0f0f11);
|
|
192
|
+
--df-table-odd-background-fill-dark: var(--df-neutral-900, #18181b);
|
|
193
|
+
--df-border-color-primary-dark: var(--df-neutral-700, #3f3f46);
|
|
194
|
+
--df-color-accent-dark: var(--df-primary-600, #ea580c);
|
|
195
|
+
--df-color-accent-soft-dark: var(--df-neutral-700, #3f3f46);
|
|
189
196
|
--df-radius-sm: 4px;
|
|
190
197
|
--df-size-1: 4px;
|
|
191
198
|
--df-size-2: 8px;
|
|
@@ -355,7 +362,15 @@
|
|
|
355
362
|
--cell-padding: var(--gr-df-cell-padding, var(--size-2));
|
|
356
363
|
--df-font-size: var(--gr-df-font-size, var(--text-md));
|
|
357
364
|
--background-fill-primary: var(--df-background-fill-primary, #ffffff);
|
|
365
|
+
--background-fill-primary-dark: var(
|
|
366
|
+
--df-background-fill-primary-dark,
|
|
367
|
+
var(--neutral-950, #0f0f11)
|
|
368
|
+
);
|
|
358
369
|
--background-fill-secondary: var(--df-background-fill-secondary, #f8fafc);
|
|
370
|
+
--background-fill-secondary-dark: var(
|
|
371
|
+
--df-background-fill-secondary-dark,
|
|
372
|
+
var(--neutral-900, #18181b)
|
|
373
|
+
);
|
|
359
374
|
--color-accent: var(--gr-df-accent, var(--df-color-accent, #7c3aed));
|
|
360
375
|
--color-accent-soft: var(
|
|
361
376
|
--gr-df-accent-soft,
|
|
@@ -551,6 +566,18 @@
|
|
|
551
566
|
background-color: var(--block-background-fill);
|
|
552
567
|
}
|
|
553
568
|
|
|
569
|
+
:global(.dark) .gradio-dataframe-standalone {
|
|
570
|
+
--df-background-fill-primary: var(--df-background-fill-primary-dark);
|
|
571
|
+
--df-background-fill-secondary: var(--df-background-fill-secondary-dark);
|
|
572
|
+
--df-body-text-color: var(--df-body-text-color-dark);
|
|
573
|
+
--df-block-background-fill: var(--df-block-background-fill-dark);
|
|
574
|
+
--df-table-even-background-fill: var(--df-table-even-background-fill-dark);
|
|
575
|
+
--df-table-odd-background-fill: var(--df-table-odd-background-fill-dark);
|
|
576
|
+
--df-border-color-primary: var(--df-border-color-primary-dark);
|
|
577
|
+
--df-color-accent: var(--df-color-accent-dark);
|
|
578
|
+
--df-color-accent-soft: var(--df-color-accent-soft-dark);
|
|
579
|
+
}
|
|
580
|
+
|
|
554
581
|
:global(.gradio-container),
|
|
555
582
|
:global(*),
|
|
556
583
|
:global(::before),
|