Skip to content

Commit f8ff9a9

Browse files
graphierosgraphieros
committed
Improved data tables
1 parent bdcf643 commit f8ff9a9

File tree

7 files changed

+58
-57
lines changed

7 files changed

+58
-57
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "1.9.72",
4+
"version": "1.9.73",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3850,6 +3850,10 @@ const moodRadarConfig = ref({
38503850
<BaseIcon name="moodNeutral" stroke="#42d392" />
38513851
<BaseIcon name="smiley" stroke="#42d392" />
38523852
<BaseIcon name="moodHappy" stroke="#42d392" />
3853+
<BaseIcon name="moodEmbarrassed" stroke="#42d392" />
3854+
<BaseIcon name="moodSurprised" stroke="#42d392" />
3855+
<BaseIcon name="moodWink" stroke="#42d392" />
3856+
<BaseIcon name="moodLaughing" stroke="#42d392" />
38533857
<BaseIcon name="star" stroke="#42d392" />
38543858
<BaseIcon name="chartChestnut" stroke="#42d392" />
38553859
<BaseIcon name="chartAgePyramid" stroke="#42d392" />
@@ -3877,6 +3881,10 @@ const moodRadarConfig = ref({
38773881
<BaseIcon name="arrowBottom" stroke="#42d392" />
38783882
<BaseIcon name="fullscreen" stroke="#42d392" />
38793883
<BaseIcon name="exitFullscreen" stroke="#42d392" />
3884+
<BaseIcon name="circleCancel" stroke="#42d392" />
3885+
<BaseIcon name="circleCheck" stroke="#42d392" />
3886+
<BaseIcon name="circleExclamation" stroke="#42d392" />
3887+
<BaseIcon name="circleQuestion" stroke="#42d392" />
38803888

38813889
</div>
38823890
</template>

‎src/atoms/BaseIcon.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,14 @@ const icons = computed(() => {
8686
arrowBottom: `<path fill="${props.stroke}" stroke="none" stroke-width="none" d="M10 18 1 3C7 6 13 6 19 3L10 18" stroke-linejoin="round" />`,
8787
fullscreen: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M1 6 1 4C1 2 2 1 4 1L6 1M14 1 16 1C18 1 19 2 19 4L19 6M19 14 19 16C19 18 18 19 16 19L14 19M6 19 4 19C2 19 1 18 1 16L1 14M9 9 5 5M11 9 15 5M11 11 15 15M9 11 5 15M5 12 5 15 8 15M12 15 15 15 15 12M15 8 15 5 12 5M8 5 5 5 5 8" />`,
8888
exitFullscreen: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M1 6 1 4C1 2 2 1 4 1L6 1M14 1 16 1C18 1 19 2 19 4L19 6M19 14 19 16C19 18 18 19 16 19L14 19M6 19 4 19C2 19 1 18 1 16L1 14M8 8 4 4M12 8 16 4M12 12 16 16M8 12 4 16M5 12 8 12 8 15M12 15 12 12 15 12M15 8 12 8 12 5M8 5 8 8 5 8" />`,
89+
moodEmbarrassed: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 5 13 C 8 11 11 16 15 13 M 5 7 A 1 1 0 0 0 8 7 A 1 1 0 0 0 5 7 M 12 7 A 1 1 0 0 0 15 7 A 1 1 0 0 0 12 7" />`,
90+
moodSurprised: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 5 7 A 1 1 0 0 0 8 7 A 1 1 0 0 0 5 7 M 12 7 A 1 1 0 0 0 15 7 A 1 1 0 0 0 12 7 M 10 12 A 1 1 0 0 0 10 15 A 1 1 0 0 0 10 12" />`,
91+
moodWink: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 5 11 C 7 15 11 15 15 13 M 12 7 A 1 1 0 0 0 15 7 A 1 1 0 0 0 12 7 M 5 7 L 8 7" />`,
92+
moodLaughing: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 5 10 C 5 17 15 17 15 11 L 5 10 M 12 7 A 1 1 0 0 0 12 7 C 13 6 14 7 15 7 M 5 6 C 6 6 7 5 8 7" />`,
93+
circleCancel: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 6 6 L 14 14 M 14 6 L 6 14" />`,
94+
circleCheck: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 5 10 L 9 14 M 15 7 L 9 14" />`,
95+
circleExclamation: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 10 5 L 10 10 M 10 13 A 1 1 0 0 0 10 15 A 1 1 0 0 0 10 13" />`,
96+
circleQuestion: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 10 5 C 14 5 14 10 10 10 M 10 13 A 1 1 0 0 0 10 15 A 1 1 0 0 0 10 13 M 7 7 C 7 6 8 5 10 5" />`,
8997
9098
}
9199
})

‎src/atoms/DataTable.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@ onMounted(() => {
4242
<template>
4343
<div ref="tableContainer" style="width: 100%; container-type: inline-size;" :class="{'vue-ui-responsive': isResponsive}">
4444
<table data-cy="vue-data-ui-table-data" class="vue-ui-data-table">
45-
<caption :style="{backgroundColor: thbg, color: thc, outline: tho}">
45+
<caption :style="{backgroundColor: thbg, color: thc, outline: tho}" class="vue-ui-data-table__caption">
4646
{{ title }}
4747
</caption>
4848
<thead>
49-
<tr role="row" style="font-variant-numeric: tabular-nums">
50-
<th role="cell" :style="{backgroundColor: thbg, color: thc, outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
49+
<tr role="row" style="font-variant-numeric: tabular-nums" class="vue-ui-data-table__thead-row" :style="{backgroundColor: thbg, color: thc }">
50+
<th role="cell" :style="{outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
5151
<div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px; gap:3px">
5252
<svg height="12" width="12" v-if="th.color" viewBox="0 0 20 20" style="background: none;">
5353
<circle cx="10" cy="10" r="10" :fill="th.color"/>
@@ -59,8 +59,8 @@ onMounted(() => {
5959
</thead>
6060

6161
<tbody>
62-
<tr v-for="(tr, i) in body" role="row" style="font-variant-numeric: tabular-nums;">
63-
<td role="cell" v-for="(td, j) in tr" :data-cell="colNames[j].name || colNames[j]" :style="{backgroundColor: tdbg, color: tdc, outline: tdo}">
62+
<tr v-for="(tr, i) in body" role="row" style="font-variant-numeric: tabular-nums;" :class="{'vue-ui-data-table__tbody__row' : true, 'vue-ui-data-table__tbody__row-even': i % 2 === 0, 'vue-ui-data-table__tbody__row-odd': i % 2 !== 0}" :style="{backgroundColor: tdbg, color: tdc }">
63+
<td role="cell" v-for="(td, j) in tr" :data-cell="colNames[j].name || colNames[j]" :style="{ outline: tdo}" class="vue-ui-data-table__tbody__td">
6464
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
6565
<svg height="12" width="12" v-if="td.color" viewBox="0 0 20 20" style="background: none;overflow: visible">
6666
<Shape
@@ -80,7 +80,7 @@ onMounted(() => {
8080
</template>
8181

8282
<style scoped lang="scss">
83-
.vue-ui-data-table th {
83+
.vue-ui-data-table thead {
8484
position: sticky;
8585
top:0;
8686
font-weight: 400;
@@ -118,7 +118,7 @@ caption {
118118
text-align: left;
119119
}
120120
tr {
121-
outline: 1px solid #CCCCCC;
121+
outline: v-bind(tdo);
122122
}
123123
124124
td:first-child {

‎src/components/vue-ui-age-pyramid.vue‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -652,21 +652,6 @@ defineExpose({
652652
font-variant-numeric: tabular-nums;
653653
}
654654
655-
.vue-ui-age-pyramid table {
656-
width: 100%;
657-
border-collapse:collapse;
658-
}
659-
.vue-ui-age-pyramid table td {
660-
text-align:right;
661-
padding-right: 6px;
662-
font-variant-numeric: tabular-nums;
663-
}
664-
.vue-ui-age-pyramid table th {
665-
position: sticky;
666-
top:0;
667-
font-weight: 400;
668-
user-select: none;
669-
}
670655
.vue-data-ui-fullscreen--on {
671656
height: 90% !important;
672657
margin: 0 auto !important;

‎src/default_configs.json‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -313,12 +313,12 @@
313313
"th": {
314314
"backgroundColor": "#FAFAFA",
315315
"color": "#2D353C",
316-
"outline": "1px solid #e1e5e8"
316+
"outline": "none"
317317
},
318318
"td": {
319319
"backgroundColor": "#FFFFFF",
320320
"color": "#2D353C",
321-
"outline": "1px solid #e1e5e8"
321+
"outline": "none"
322322
}
323323
},
324324
"showTable": false
@@ -448,12 +448,12 @@
448448
"th": {
449449
"backgroundColor": "#FAFAFA",
450450
"color": "#2D353C",
451-
"outline": "1px solid #e1e5e8"
451+
"outline": "none"
452452
},
453453
"td": {
454454
"backgroundColor": "#FFFFFF",
455455
"color": "#2D353C",
456-
"outline": "1px solid #e1e5e8",
456+
"outline": "none",
457457
"roundingValue": 0,
458458
"roundingPercentage": 0
459459
}
@@ -534,12 +534,12 @@
534534
"th": {
535535
"backgroundColor": "#FAFAFA",
536536
"color": "#2D353C",
537-
"outline": "1px solid #e1e5e8"
537+
"outline": "none"
538538
},
539539
"td": {
540540
"backgroundColor": "#FFFFFF",
541541
"color": "#2D353C",
542-
"outline": "1px solid #e1e5e8",
542+
"outline": "none",
543543
"roundingValue": 0,
544544
"roundingPercentage": 0
545545
}
@@ -620,12 +620,12 @@
620620
"th": {
621621
"backgroundColor": "#FAFAFA",
622622
"color": "#2D353C",
623-
"outline": "1px solid #e1e5e8"
623+
"outline": "none"
624624
},
625625
"td": {
626626
"backgroundColor": "#FFFFFF",
627627
"color": "#2D353C",
628-
"outline": "1px solid #e1e5e8",
628+
"outline": "none",
629629
"roundingValue": 0,
630630
"roundingPercentage": 0
631631
}
@@ -770,12 +770,12 @@
770770
"th": {
771771
"backgroundColor": "#FAFAFA",
772772
"color": "#2D353C",
773-
"outline": "1px solid #e1e5e8"
773+
"outline": "none"
774774
},
775775
"td": {
776776
"backgroundColor": "#FFFFFF",
777777
"color": "#2D353C",
778-
"outline": "1px solid #e1e5e8",
778+
"outline": "none",
779779
"roundingValue": 0
780780
}
781781
},
@@ -1009,7 +1009,7 @@
10091009
"th": {
10101010
"backgroundColor": "#FAFAFA",
10111011
"color": "#2D353C",
1012-
"outline": "1px solid #e1e5e8",
1012+
"outline": "none",
10131013
"translations": {
10141014
"rootName": "root name",
10151015
"rootValue": "root value",
@@ -1028,7 +1028,7 @@
10281028
"td": {
10291029
"backgroundColor": "#FFFFFF",
10301030
"color": "#2D353C",
1031-
"outline": "1px solid #e1e5e8",
1031+
"outline": "none",
10321032
"roundingValue": 0,
10331033
"roundingPercentage": 0
10341034
}
@@ -1119,12 +1119,12 @@
11191119
"th": {
11201120
"backgroundColor": "#FAFAFA",
11211121
"color": "#2D353C",
1122-
"outline": "1px solid #e1e5e8"
1122+
"outline": "none"
11231123
},
11241124
"td": {
11251125
"backgroundColor": "#FFFFFF",
11261126
"color": "#2D353C",
1127-
"outline": "1px solid #e1e5e8",
1127+
"outline": "none",
11281128
"roundingValue": 0,
11291129
"roundingPercentage": 0
11301130
},
@@ -1250,12 +1250,12 @@
12501250
"th": {
12511251
"backgroundColor": "#FAFAFA",
12521252
"color": "#2D353C",
1253-
"outline": "1px solid #e1e5e8"
1253+
"outline": "none"
12541254
},
12551255
"td": {
12561256
"backgroundColor": "#FFFFFF",
12571257
"color": "#2D353C",
1258-
"outline": "1px solid #e1e5e8",
1258+
"outline": "none",
12591259
"roundingValue": 0,
12601260
"roundingPercentage": 0,
12611261
"prefix": "",
@@ -1667,12 +1667,12 @@
16671667
"th": {
16681668
"backgroundColor": "#FAFAFA",
16691669
"color": "#2D353C",
1670-
"outline": "1px solid #e1e5e8"
1670+
"outline": "none"
16711671
},
16721672
"td": {
16731673
"backgroundColor": "#FFFFFF",
16741674
"color": "#2D353C",
1675-
"outline": "1px solid #e1e5e8",
1675+
"outline": "none",
16761676
"roundingValue": 0
16771677
}
16781678
}
@@ -1792,12 +1792,12 @@
17921792
"th": {
17931793
"backgroundColor": "#FAFAFA",
17941794
"color": "#2D353C",
1795-
"outline": "1px solid #e1e5e8"
1795+
"outline": "none"
17961796
},
17971797
"td": {
17981798
"backgroundColor": "#FFFFFF",
17991799
"color": "#2D353C",
1800-
"outline": "1px solid #e1e5e8",
1800+
"outline": "none",
18011801
"roundingValue": 2,
18021802
"roundingAverage": 1
18031803
},
@@ -1930,12 +1930,12 @@
19301930
"th": {
19311931
"backgroundColor": "#FAFAFA",
19321932
"color": "#2D353C",
1933-
"outline": "1px solid #e1e5e8"
1933+
"outline": "none"
19341934
},
19351935
"td": {
19361936
"backgroundColor": "#FFFFFF",
19371937
"color": "#2D353C",
1938-
"outline": "1px solid #e1e5e8",
1938+
"outline": "none",
19391939
"roundingValue": 2,
19401940
"prefix": "",
19411941
"suffix": ""
@@ -2052,12 +2052,12 @@
20522052
"th": {
20532053
"backgroundColor": "#FAFAFA",
20542054
"color": "#2D353C",
2055-
"outline": "1px solid #e1e5e8"
2055+
"outline": "none"
20562056
},
20572057
"td": {
20582058
"backgroundColor": "#FFFFFF",
20592059
"color": "#2D353C",
2060-
"outline": "1px solid #e1e5e8"
2060+
"outline": "none"
20612061
}
20622062
}
20632063
},
@@ -2543,12 +2543,12 @@
25432543
"th": {
25442544
"backgroundColor": "#FAFAFA",
25452545
"color": "#2D353C",
2546-
"outline": "1px solid #e1e5e8"
2546+
"outline": "none"
25472547
},
25482548
"td": {
25492549
"backgroundColor": "#FFFFFF",
25502550
"color": "#2D353C",
2551-
"outline": "1px solid #e1e5e8",
2551+
"outline": "none",
25522552
"roundingValue": 0,
25532553
"roundingPercentage": 0
25542554
}
@@ -2757,12 +2757,12 @@
27572757
"th": {
27582758
"backgroundColor": "#FAFAFA",
27592759
"color": "#2D353C",
2760-
"outline": "1px solid #e1e5e8"
2760+
"outline": "none"
27612761
},
27622762
"td": {
27632763
"backgroundColor": "#FFFFFF",
27642764
"color": "#2D353C",
2765-
"outline": "1px solid #e1e5e8",
2765+
"outline": "none",
27662766
"roundingValue": 0,
27672767
"roundingPercentage": 0
27682768
}
@@ -2848,12 +2848,12 @@
28482848
"th": {
28492849
"backgroundColor": "#FAFAFA",
28502850
"color": "#2D353C",
2851-
"outline": "1px solid #e1e5e8"
2851+
"outline": "none"
28522852
},
28532853
"td": {
28542854
"backgroundColor": "#FFFFFF",
28552855
"color": "#2D353C",
2856-
"outline": "1px solid #e1e5e8",
2856+
"outline": "none",
28572857
"roundingValue": 0,
28582858
"roundingPercentage": 0
28592859
}
@@ -2969,12 +2969,12 @@
29692969
"th": {
29702970
"backgroundColor": "#FAFAFA",
29712971
"color": "#2D353C",
2972-
"outline": "1px solid #e1e5e8"
2972+
"outline": "none"
29732973
},
29742974
"td": {
29752975
"backgroundColor": "#FFFFFF",
29762976
"color": "#2D353C",
2977-
"outline": "1px solid #e1e5e8"
2977+
"outline": "none"
29782978
},
29792979
"translations": {
29802980
"nodeName": "Node name",

0 commit comments

Comments
 (0)