Improved data tables

graphieros · Feb 1, 2024 · f8ff9a9 · f8ff9a9
1 parent bdcf643
commit f8ff9a9
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.72",
+  "version": "1.9.73",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git a/src/App.vue b/src/App.vue
@@ -3850,6 +3850,10 @@ const moodRadarConfig = ref({
           <BaseIcon name="moodNeutral" stroke="#42d392" />
           <BaseIcon name="smiley" stroke="#42d392" />
           <BaseIcon name="moodHappy" stroke="#42d392" />
+          <BaseIcon name="moodEmbarrassed" stroke="#42d392" />
+          <BaseIcon name="moodSurprised" stroke="#42d392" />
+          <BaseIcon name="moodWink" stroke="#42d392" />
+          <BaseIcon name="moodLaughing" stroke="#42d392" />
           <BaseIcon name="star" stroke="#42d392" />
           <BaseIcon name="chartChestnut" stroke="#42d392" />
           <BaseIcon name="chartAgePyramid" stroke="#42d392" />
@@ -3877,6 +3881,10 @@ const moodRadarConfig = ref({
           <BaseIcon name="arrowBottom" stroke="#42d392" />
           <BaseIcon name="fullscreen" stroke="#42d392" />
           <BaseIcon name="exitFullscreen" stroke="#42d392" />
+          <BaseIcon name="circleCancel" stroke="#42d392" />
+          <BaseIcon name="circleCheck" stroke="#42d392" />
+          <BaseIcon name="circleExclamation" stroke="#42d392" />
+          <BaseIcon name="circleQuestion" stroke="#42d392" />
 
         </div>
       </template>

diff --git a/src/atoms/BaseIcon.vue b/src/atoms/BaseIcon.vue
@@ -86,6 +86,14 @@ const icons = computed(() => {
         arrowBottom: `<path fill="${props.stroke}" stroke="none" stroke-width="none" d="M10 18 1 3C7 6 13 6 19 3L10 18" stroke-linejoin="round" />`,
         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" />`,
         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" />`,
+        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" />`,
+        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" />`,
+        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" />`,
+        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" />`,
+        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" />`,
+        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" />`,
+        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" />`,
+        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" />`,
         
     }
 })

diff --git a/src/atoms/DataTable.vue b/src/atoms/DataTable.vue
@@ -42,12 +42,12 @@ onMounted(() => {
 <template>
     <div ref="tableContainer" style="width: 100%; container-type: inline-size;" :class="{'vue-ui-responsive': isResponsive}"> 
         <table data-cy="vue-data-ui-table-data" class="vue-ui-data-table">
-        <caption :style="{backgroundColor: thbg, color: thc, outline: tho}">
+        <caption :style="{backgroundColor: thbg, color: thc, outline: tho}" class="vue-ui-data-table__caption">
             {{  title }}
         </caption>
             <thead>
-                <tr role="row" style="font-variant-numeric: tabular-nums">
-                    <th role="cell" :style="{backgroundColor: thbg, color: thc, outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
+                <tr role="row" style="font-variant-numeric: tabular-nums" class="vue-ui-data-table__thead-row" :style="{backgroundColor: thbg, color: thc }">
+                    <th role="cell" :style="{outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
                         <div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px; gap:3px">
                             <svg height="12" width="12" v-if="th.color" viewBox="0 0 20 20" style="background: none;">
                                 <circle cx="10" cy="10" r="10" :fill="th.color"/>
@@ -59,8 +59,8 @@ onMounted(() => {
             </thead>
 
             <tbody>
-                <tr v-for="(tr, i) in body" role="row" style="font-variant-numeric: tabular-nums;">
-                    <td role="cell" v-for="(td, j) in tr" :data-cell="colNames[j].name || colNames[j]" :style="{backgroundColor: tdbg, color: tdc, outline: tdo}">
+                <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 }">
+                    <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">
                         <div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
                             <svg height="12" width="12" v-if="td.color" viewBox="0 0 20 20" style="background: none;overflow: visible">
                                 <Shape
@@ -80,7 +80,7 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-.vue-ui-data-table th {
+.vue-ui-data-table thead {
     position: sticky;
     top:0;
     font-weight: 400;
@@ -118,7 +118,7 @@ caption {
         text-align: left;
     }
     tr {
-        outline: 1px solid #CCCCCC;
+        outline: v-bind(tdo);
     }
 
     td:first-child {

diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
@@ -652,21 +652,6 @@ defineExpose({
     font-variant-numeric: tabular-nums;
 }
 
-.vue-ui-age-pyramid table {
-    width: 100%;
-    border-collapse:collapse;
-}
-.vue-ui-age-pyramid table td {
-    text-align:right;
-    padding-right: 6px;
-    font-variant-numeric: tabular-nums;
-}
-.vue-ui-age-pyramid table th {
-    position: sticky;
-    top:0;
-    font-weight: 400;
-    user-select: none;
-}
 .vue-data-ui-fullscreen--on {
     height: 90% !important;
     margin: 0 auto !important;

diff --git a/src/default_configs.json b/src/default_configs.json
@@ -313,12 +313,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             }
         },
         "showTable": false
@@ -448,12 +448,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0,
                 "roundingPercentage": 0
             }
@@ -534,12 +534,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0,
                 "roundingPercentage": 0
             }
@@ -620,12 +620,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0,
                 "roundingPercentage": 0
             }
@@ -770,12 +770,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0
             }
         },
@@ -1009,7 +1009,7 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "translations": {
                     "rootName": "root name",
                     "rootValue": "root value",
@@ -1028,7 +1028,7 @@
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0,
                 "roundingPercentage": 0
             }
@@ -1119,12 +1119,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0,
                 "roundingPercentage": 0
             },
@@ -1250,12 +1250,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0,
                 "roundingPercentage": 0,
                 "prefix": "",
@@ -1667,12 +1667,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0
             }
         }
@@ -1792,12 +1792,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 2,
                 "roundingAverage": 1
             },
@@ -1930,12 +1930,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 2,
                 "prefix": "",
                 "suffix": ""
@@ -2052,12 +2052,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             }
         }
     },
@@ -2543,12 +2543,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0,
                 "roundingPercentage": 0
             }
@@ -2757,12 +2757,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0,
                 "roundingPercentage": 0
             }
@@ -2848,12 +2848,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8",
+                "outline": "none",
                 "roundingValue": 0,
                 "roundingPercentage": 0
             }
@@ -2969,12 +2969,12 @@
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "td": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "outline": "1px solid #e1e5e8"
+                "outline": "none"
             },
             "translations": {
                 "nodeName": "Node name",