@gradio/dataframe 0.16.2 → 0.16.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.
- package/CHANGELOG.md +14 -0
- package/dist/shared/Table.svelte +80 -33
- package/package.json +6 -6
- package/shared/Table.svelte +84 -33
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @gradio/dataframe
|
|
2
2
|
|
|
3
|
+
## 0.16.4
|
|
4
|
+
|
|
5
|
+
### Dependency updates
|
|
6
|
+
|
|
7
|
+
- @gradio/upload@0.15.3
|
|
8
|
+
- @gradio/client@1.13.0
|
|
9
|
+
- @gradio/button@0.4.8
|
|
10
|
+
|
|
11
|
+
## 0.16.3
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
- [#10646](https://github.com/gradio-app/gradio/pull/10646) [`b01ce47`](https://github.com/gradio-app/gradio/commit/b01ce47056f5752fbf03e44600bf0f7dab69b64c) - Fixes cell-selection logic in `Table.svelte`. Thanks @abidlabs!
|
|
16
|
+
|
|
3
17
|
## 0.16.2
|
|
4
18
|
|
|
5
19
|
### Fixes
|
package/dist/shared/Table.svelte
CHANGED
|
@@ -177,6 +177,7 @@ async function handle_keydown(event) {
|
|
|
177
177
|
switch (event.key) {
|
|
178
178
|
case "ArrowDown":
|
|
179
179
|
selected = [0, selected_header];
|
|
180
|
+
selected_cells = [[0, selected_header]];
|
|
180
181
|
selected_header = false;
|
|
181
182
|
return;
|
|
182
183
|
case "ArrowLeft":
|
|
@@ -191,6 +192,9 @@ async function handle_keydown(event) {
|
|
|
191
192
|
break;
|
|
192
193
|
case "Enter":
|
|
193
194
|
event.preventDefault();
|
|
195
|
+
if (editable) {
|
|
196
|
+
header_edit = selected_header;
|
|
197
|
+
}
|
|
194
198
|
break;
|
|
195
199
|
}
|
|
196
200
|
}
|
|
@@ -253,15 +257,13 @@ async function handle_keydown(event) {
|
|
|
253
257
|
editing = false;
|
|
254
258
|
} else {
|
|
255
259
|
selected_cells = [next_coords];
|
|
256
|
-
|
|
257
|
-
editing = next_coords;
|
|
258
|
-
clear_on_focus = false;
|
|
259
|
-
}
|
|
260
|
+
editing = false;
|
|
260
261
|
}
|
|
261
262
|
selected = next_coords;
|
|
262
263
|
} else if (next_coords === false && event.key === "ArrowUp" && i === 0) {
|
|
263
264
|
selected_header = j;
|
|
264
265
|
selected = false;
|
|
266
|
+
selected_cells = [];
|
|
265
267
|
editing = false;
|
|
266
268
|
}
|
|
267
269
|
break;
|
|
@@ -337,7 +339,7 @@ function handle_sort(col, direction) {
|
|
|
337
339
|
}
|
|
338
340
|
}
|
|
339
341
|
async function edit_header(i, _select = false) {
|
|
340
|
-
if (!editable ||
|
|
342
|
+
if (!editable || header_edit === i)
|
|
341
343
|
return;
|
|
342
344
|
selected = false;
|
|
343
345
|
selected_cells = [];
|
|
@@ -700,6 +702,23 @@ function commit_filter() {
|
|
|
700
702
|
current_search_query = null;
|
|
701
703
|
}
|
|
702
704
|
}
|
|
705
|
+
function handle_header_click(event, col) {
|
|
706
|
+
if (event.target instanceof HTMLAnchorElement) {
|
|
707
|
+
return;
|
|
708
|
+
}
|
|
709
|
+
event.preventDefault();
|
|
710
|
+
event.stopPropagation();
|
|
711
|
+
if (!editable)
|
|
712
|
+
return;
|
|
713
|
+
clear_on_focus = false;
|
|
714
|
+
active_cell_menu = null;
|
|
715
|
+
active_header_menu = null;
|
|
716
|
+
selected = false;
|
|
717
|
+
selected_cells = [];
|
|
718
|
+
selected_header = col;
|
|
719
|
+
header_edit = col;
|
|
720
|
+
parent.focus();
|
|
721
|
+
}
|
|
703
722
|
</script>
|
|
704
723
|
|
|
705
724
|
<svelte:window on:resize={() => set_cell_widths()} />
|
|
@@ -777,14 +796,11 @@ function commit_filter() {
|
|
|
777
796
|
{#each _headers as { value, id }, i (id)}
|
|
778
797
|
<th
|
|
779
798
|
class:frozen-column={i < actual_pinned_columns}
|
|
780
|
-
class:last-frozen={
|
|
781
|
-
|
|
782
|
-
: i === actual_pinned_columns - 1}
|
|
783
|
-
class:editing={header_edit === i}
|
|
799
|
+
class:last-frozen={i === actual_pinned_columns - 1}
|
|
800
|
+
class:focus={header_edit === i || selected_header === i}
|
|
784
801
|
aria-sort={get_sort_status(value, sort_by, sort_direction)}
|
|
785
|
-
style="width: {
|
|
786
|
-
|
|
787
|
-
: undefined}; left: {i < actual_pinned_columns
|
|
802
|
+
style="width: {get_cell_width(i)}; left: {i <
|
|
803
|
+
actual_pinned_columns
|
|
788
804
|
? i === 0
|
|
789
805
|
? show_row_numbers
|
|
790
806
|
? 'var(--cell-width-row-number)'
|
|
@@ -796,27 +812,56 @@ function commit_filter() {
|
|
|
796
812
|
.map((_, idx) => `var(--cell-width-${idx})`)
|
|
797
813
|
.join(' + ')})`
|
|
798
814
|
: 'auto'};"
|
|
815
|
+
on:click={(event) => handle_header_click(event, i)}
|
|
816
|
+
on:mousedown={(event) => {
|
|
817
|
+
event.preventDefault();
|
|
818
|
+
event.stopPropagation();
|
|
819
|
+
}}
|
|
799
820
|
>
|
|
800
821
|
<div class="cell-wrap">
|
|
801
822
|
<div class="header-content">
|
|
802
823
|
<EditableCell
|
|
803
|
-
{
|
|
824
|
+
{max_chars}
|
|
825
|
+
bind:value={_headers[i].value}
|
|
826
|
+
bind:el={els[id].input}
|
|
804
827
|
{latex_delimiters}
|
|
805
828
|
{line_breaks}
|
|
829
|
+
edit={header_edit === i}
|
|
830
|
+
on:keydown={end_header_edit}
|
|
806
831
|
header
|
|
807
|
-
edit={false}
|
|
808
|
-
el={null}
|
|
809
832
|
{root}
|
|
810
833
|
{editable}
|
|
811
834
|
/>
|
|
812
|
-
|
|
813
|
-
<
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
835
|
+
{#if header_edit !== i}
|
|
836
|
+
<div class="sort-buttons">
|
|
837
|
+
<SortIcon
|
|
838
|
+
direction={sort_by === i ? sort_direction : null}
|
|
839
|
+
on:sort={({ detail }) => handle_sort(i, detail)}
|
|
840
|
+
{i18n}
|
|
841
|
+
/>
|
|
842
|
+
</div>
|
|
843
|
+
{/if}
|
|
819
844
|
</div>
|
|
845
|
+
{#if editable}
|
|
846
|
+
<button
|
|
847
|
+
class="cell-menu-button"
|
|
848
|
+
on:click={(event) => toggle_header_menu(event, i)}
|
|
849
|
+
on:touchstart={(event) => {
|
|
850
|
+
event.preventDefault();
|
|
851
|
+
const touch = event.touches[0];
|
|
852
|
+
const mouseEvent = new MouseEvent("click", {
|
|
853
|
+
clientX: touch.clientX,
|
|
854
|
+
clientY: touch.clientY,
|
|
855
|
+
bubbles: true,
|
|
856
|
+
cancelable: true,
|
|
857
|
+
view: window
|
|
858
|
+
});
|
|
859
|
+
toggle_header_menu(mouseEvent, i);
|
|
860
|
+
}}
|
|
861
|
+
>
|
|
862
|
+
⋮
|
|
863
|
+
</button>
|
|
864
|
+
{/if}
|
|
820
865
|
</div>
|
|
821
866
|
</th>
|
|
822
867
|
{/each}
|
|
@@ -914,8 +959,10 @@ function commit_filter() {
|
|
|
914
959
|
.map((_, idx) => `var(--cell-width-${idx})`)
|
|
915
960
|
.join(' + ')})`
|
|
916
961
|
: 'auto'};"
|
|
917
|
-
on:click={() =>
|
|
918
|
-
|
|
962
|
+
on:click={(event) => handle_header_click(event, i)}
|
|
963
|
+
on:mousedown={(event) => {
|
|
964
|
+
event.preventDefault();
|
|
965
|
+
event.stopPropagation();
|
|
919
966
|
}}
|
|
920
967
|
>
|
|
921
968
|
<div class="cell-wrap">
|
|
@@ -927,19 +974,19 @@ function commit_filter() {
|
|
|
927
974
|
{latex_delimiters}
|
|
928
975
|
{line_breaks}
|
|
929
976
|
edit={header_edit === i}
|
|
930
|
-
on:keydown={end_header_edit}
|
|
931
|
-
on:dblclick={() => edit_header(i)}
|
|
932
977
|
header
|
|
933
978
|
{root}
|
|
934
979
|
{editable}
|
|
935
980
|
/>
|
|
936
|
-
|
|
937
|
-
<
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
981
|
+
{#if header_edit !== i}
|
|
982
|
+
<div class="sort-buttons">
|
|
983
|
+
<SortIcon
|
|
984
|
+
direction={sort_by === i ? sort_direction : null}
|
|
985
|
+
on:sort={({ detail }) => handle_sort(i, detail)}
|
|
986
|
+
{i18n}
|
|
987
|
+
/>
|
|
988
|
+
</div>
|
|
989
|
+
{/if}
|
|
943
990
|
</div>
|
|
944
991
|
{#if editable}
|
|
945
992
|
<button
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/dataframe",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.4",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
"katex": "^0.16.7",
|
|
19
19
|
"marked": "^12.0.0",
|
|
20
20
|
"@gradio/atoms": "^0.13.3",
|
|
21
|
-
"@gradio/button": "^0.4.
|
|
22
|
-
"@gradio/client": "^1.
|
|
23
|
-
"@gradio/markdown-code": "^0.4.0",
|
|
21
|
+
"@gradio/button": "^0.4.8",
|
|
22
|
+
"@gradio/client": "^1.13.0",
|
|
24
23
|
"@gradio/icons": "^0.10.0",
|
|
25
|
-
"@gradio/utils": "^0.10.1",
|
|
26
24
|
"@gradio/statustracker": "^0.10.4",
|
|
27
|
-
"@gradio/upload": "^0.15.
|
|
25
|
+
"@gradio/upload": "^0.15.3",
|
|
26
|
+
"@gradio/markdown-code": "^0.4.0",
|
|
27
|
+
"@gradio/utils": "^0.10.1"
|
|
28
28
|
},
|
|
29
29
|
"exports": {
|
|
30
30
|
".": {
|
package/shared/Table.svelte
CHANGED
|
@@ -263,6 +263,7 @@
|
|
|
263
263
|
switch (event.key) {
|
|
264
264
|
case "ArrowDown":
|
|
265
265
|
selected = [0, selected_header];
|
|
266
|
+
selected_cells = [[0, selected_header]];
|
|
266
267
|
selected_header = false;
|
|
267
268
|
return;
|
|
268
269
|
case "ArrowLeft":
|
|
@@ -281,6 +282,9 @@
|
|
|
281
282
|
break;
|
|
282
283
|
case "Enter":
|
|
283
284
|
event.preventDefault();
|
|
285
|
+
if (editable) {
|
|
286
|
+
header_edit = selected_header;
|
|
287
|
+
}
|
|
284
288
|
break;
|
|
285
289
|
}
|
|
286
290
|
}
|
|
@@ -351,10 +355,7 @@
|
|
|
351
355
|
editing = false;
|
|
352
356
|
} else {
|
|
353
357
|
selected_cells = [next_coords];
|
|
354
|
-
|
|
355
|
-
editing = next_coords;
|
|
356
|
-
clear_on_focus = false;
|
|
357
|
-
}
|
|
358
|
+
editing = false;
|
|
358
359
|
}
|
|
359
360
|
selected = next_coords;
|
|
360
361
|
} else if (
|
|
@@ -364,6 +365,7 @@
|
|
|
364
365
|
) {
|
|
365
366
|
selected_header = j;
|
|
366
367
|
selected = false;
|
|
368
|
+
selected_cells = [];
|
|
367
369
|
editing = false;
|
|
368
370
|
}
|
|
369
371
|
break;
|
|
@@ -445,7 +447,7 @@
|
|
|
445
447
|
}
|
|
446
448
|
|
|
447
449
|
async function edit_header(i: number, _select = false): Promise<void> {
|
|
448
|
-
if (!editable ||
|
|
450
|
+
if (!editable || header_edit === i) return;
|
|
449
451
|
selected = false;
|
|
450
452
|
selected_cells = [];
|
|
451
453
|
selected_header = i;
|
|
@@ -896,6 +898,27 @@
|
|
|
896
898
|
current_search_query = null;
|
|
897
899
|
}
|
|
898
900
|
}
|
|
901
|
+
|
|
902
|
+
function handle_header_click(event: MouseEvent, col: number): void {
|
|
903
|
+
if (event.target instanceof HTMLAnchorElement) {
|
|
904
|
+
return;
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
event.preventDefault();
|
|
908
|
+
event.stopPropagation();
|
|
909
|
+
|
|
910
|
+
if (!editable) return;
|
|
911
|
+
|
|
912
|
+
clear_on_focus = false;
|
|
913
|
+
active_cell_menu = null;
|
|
914
|
+
active_header_menu = null;
|
|
915
|
+
selected = false;
|
|
916
|
+
selected_cells = [];
|
|
917
|
+
selected_header = col;
|
|
918
|
+
header_edit = col;
|
|
919
|
+
|
|
920
|
+
parent.focus();
|
|
921
|
+
}
|
|
899
922
|
</script>
|
|
900
923
|
|
|
901
924
|
<svelte:window on:resize={() => set_cell_widths()} />
|
|
@@ -973,14 +996,11 @@
|
|
|
973
996
|
{#each _headers as { value, id }, i (id)}
|
|
974
997
|
<th
|
|
975
998
|
class:frozen-column={i < actual_pinned_columns}
|
|
976
|
-
class:last-frozen={
|
|
977
|
-
|
|
978
|
-
: i === actual_pinned_columns - 1}
|
|
979
|
-
class:editing={header_edit === i}
|
|
999
|
+
class:last-frozen={i === actual_pinned_columns - 1}
|
|
1000
|
+
class:focus={header_edit === i || selected_header === i}
|
|
980
1001
|
aria-sort={get_sort_status(value, sort_by, sort_direction)}
|
|
981
|
-
style="width: {
|
|
982
|
-
|
|
983
|
-
: undefined}; left: {i < actual_pinned_columns
|
|
1002
|
+
style="width: {get_cell_width(i)}; left: {i <
|
|
1003
|
+
actual_pinned_columns
|
|
984
1004
|
? i === 0
|
|
985
1005
|
? show_row_numbers
|
|
986
1006
|
? 'var(--cell-width-row-number)'
|
|
@@ -992,27 +1012,56 @@
|
|
|
992
1012
|
.map((_, idx) => `var(--cell-width-${idx})`)
|
|
993
1013
|
.join(' + ')})`
|
|
994
1014
|
: 'auto'};"
|
|
1015
|
+
on:click={(event) => handle_header_click(event, i)}
|
|
1016
|
+
on:mousedown={(event) => {
|
|
1017
|
+
event.preventDefault();
|
|
1018
|
+
event.stopPropagation();
|
|
1019
|
+
}}
|
|
995
1020
|
>
|
|
996
1021
|
<div class="cell-wrap">
|
|
997
1022
|
<div class="header-content">
|
|
998
1023
|
<EditableCell
|
|
999
|
-
{
|
|
1024
|
+
{max_chars}
|
|
1025
|
+
bind:value={_headers[i].value}
|
|
1026
|
+
bind:el={els[id].input}
|
|
1000
1027
|
{latex_delimiters}
|
|
1001
1028
|
{line_breaks}
|
|
1029
|
+
edit={header_edit === i}
|
|
1030
|
+
on:keydown={end_header_edit}
|
|
1002
1031
|
header
|
|
1003
|
-
edit={false}
|
|
1004
|
-
el={null}
|
|
1005
1032
|
{root}
|
|
1006
1033
|
{editable}
|
|
1007
1034
|
/>
|
|
1008
|
-
|
|
1009
|
-
<
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1035
|
+
{#if header_edit !== i}
|
|
1036
|
+
<div class="sort-buttons">
|
|
1037
|
+
<SortIcon
|
|
1038
|
+
direction={sort_by === i ? sort_direction : null}
|
|
1039
|
+
on:sort={({ detail }) => handle_sort(i, detail)}
|
|
1040
|
+
{i18n}
|
|
1041
|
+
/>
|
|
1042
|
+
</div>
|
|
1043
|
+
{/if}
|
|
1015
1044
|
</div>
|
|
1045
|
+
{#if editable}
|
|
1046
|
+
<button
|
|
1047
|
+
class="cell-menu-button"
|
|
1048
|
+
on:click={(event) => toggle_header_menu(event, i)}
|
|
1049
|
+
on:touchstart={(event) => {
|
|
1050
|
+
event.preventDefault();
|
|
1051
|
+
const touch = event.touches[0];
|
|
1052
|
+
const mouseEvent = new MouseEvent("click", {
|
|
1053
|
+
clientX: touch.clientX,
|
|
1054
|
+
clientY: touch.clientY,
|
|
1055
|
+
bubbles: true,
|
|
1056
|
+
cancelable: true,
|
|
1057
|
+
view: window
|
|
1058
|
+
});
|
|
1059
|
+
toggle_header_menu(mouseEvent, i);
|
|
1060
|
+
}}
|
|
1061
|
+
>
|
|
1062
|
+
⋮
|
|
1063
|
+
</button>
|
|
1064
|
+
{/if}
|
|
1016
1065
|
</div>
|
|
1017
1066
|
</th>
|
|
1018
1067
|
{/each}
|
|
@@ -1110,8 +1159,10 @@
|
|
|
1110
1159
|
.map((_, idx) => `var(--cell-width-${idx})`)
|
|
1111
1160
|
.join(' + ')})`
|
|
1112
1161
|
: 'auto'};"
|
|
1113
|
-
on:click={() =>
|
|
1114
|
-
|
|
1162
|
+
on:click={(event) => handle_header_click(event, i)}
|
|
1163
|
+
on:mousedown={(event) => {
|
|
1164
|
+
event.preventDefault();
|
|
1165
|
+
event.stopPropagation();
|
|
1115
1166
|
}}
|
|
1116
1167
|
>
|
|
1117
1168
|
<div class="cell-wrap">
|
|
@@ -1123,19 +1174,19 @@
|
|
|
1123
1174
|
{latex_delimiters}
|
|
1124
1175
|
{line_breaks}
|
|
1125
1176
|
edit={header_edit === i}
|
|
1126
|
-
on:keydown={end_header_edit}
|
|
1127
|
-
on:dblclick={() => edit_header(i)}
|
|
1128
1177
|
header
|
|
1129
1178
|
{root}
|
|
1130
1179
|
{editable}
|
|
1131
1180
|
/>
|
|
1132
|
-
|
|
1133
|
-
<
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1181
|
+
{#if header_edit !== i}
|
|
1182
|
+
<div class="sort-buttons">
|
|
1183
|
+
<SortIcon
|
|
1184
|
+
direction={sort_by === i ? sort_direction : null}
|
|
1185
|
+
on:sort={({ detail }) => handle_sort(i, detail)}
|
|
1186
|
+
{i18n}
|
|
1187
|
+
/>
|
|
1188
|
+
</div>
|
|
1189
|
+
{/if}
|
|
1139
1190
|
</div>
|
|
1140
1191
|
{#if editable}
|
|
1141
1192
|
<button
|