Merge pull request #56 from oruga-ui/update-table

feature(table): add sticky variables

Author: mlmoravek

src/assets/scss/components/_table.scss

@@ -1,8 +1,10 @@
 /* @docs */
-$table-head-bg: var(--#{$prefix}body-bg) !default;
+$table-head-bg: initial !default;
 $table-head-color: initial !default;
 $table-head-border-width: var(--#{$prefix}border-width) !default;
 $table-sticky-zindex: 1 !default;
+$table-sticky-bg: initial !default;
+$table-sticky-color: initial !default;
 $table-detail-padding: 0.5rem 0.75rem !default;
 $table-detail-bg: var(--#{$prefix}gray-light) !default;
 $table-sortable-hover-border-color: var(--#{$prefix}secondary) !default;
@@ -55,31 +57,62 @@ $table-card-spacer: $spacer;
   position: relative;
 
   .table-wrapper {
-    --#{$prefix}table-sticky-zindex: #{$table-sticky-zindex};
     --#{$prefix}table-sortable-hover-border-color: #{$table-sortable-hover-border-color};
     --#{$prefix}table-current-sort-bg: #{$table-current-sort-bg};
     --#{$prefix}table-focus-color: #{$table-focus-color};
 
     .table {
+      --#{$prefix}table-head-bg: #{$table-head-bg};
+      --#{$prefix}table-head-color: #{$table-head-color};
+      --#{$prefix}table-head-border-width: #{$table-head-border-width};
+      --#{$prefix}table-sticky-zindex: #{$table-sticky-zindex};
+      --#{$prefix}table-sticky-bg: #{$table-sticky-bg};
+      --#{$prefix}table-sticky-color: #{$table-sticky-color};
+
       th,
       td {
+        vertical-align: middle;
+
         &.sticky {
           position: -webkit-sticky;
           position: sticky;
           left: 0;
           z-index: var(--#{$prefix}table-sticky-zindex);
+          --#{$prefix}table-accent-color: var(--#{$prefix}table-sticky-color);
+          --#{$prefix}table-accent-bg: var(--#{$prefix}table-sticky-bg);
         }
       }
 
-      thead {
-        --#{$prefix}table-head-bg: #{$table-head-bg};
-        --#{$prefix}table-head-color: #{$table-head-color};
-        --#{$prefix}table-head-border-width: #{$table-head-border-width};
+      // override sticky hover values
+      &.table-hover > tbody > tr:hover > .sticky {
+        --#{$prefix}table-color-state: var(
+          --#{$prefix}table-sticky-color,
+          var(--#{$prefix}table-hover-color)
+        );
+        --#{$prefix}table-bg-state: var(
+          --#{$prefix}table-sticky-bg,
+          var(--#{$prefix}table-hover-bg)
+        );
+      }
+
+      // override sticky striped values
+      &.table-striped > tbody > tr:nth-of-type(odd) > .sticky {
+        --#{$prefix}table-color-type: var(
+          --#{$prefix}table-sticky-color,
+          var(--#{$prefix}table-striped-color)
+        );
+        --#{$prefix}table-bg-type: var(
+          --#{$prefix}table-sticky-bg,
+          var(--#{$prefix}table-striped-bg)
+        );
+      }
 
+      thead {
         th {
+          --#{$prefix}table-color-state: var(--#{$prefix}table-head-color);
+          --#{$prefix}table-bg-state: var(--#{$prefix}table-head-bg);
+
           position: relative;
-          color: var(--#{$prefix}table-head-color);
-          background-color: var(--#{$prefix}table-head-bg);
           border-bottom-width: var(--#{$prefix}table-head-border-width);
 
           &.sortable {
@@ -96,7 +129,7 @@ $table-card-spacer: $spacer;
           }
 
           &.current-sort {
-            --#{$prefix}table-bg: var(--#{$prefix}table-current-sort-bg);
+            --#{$prefix}table-bg-type: var(--#{$prefix}table-current-sort-bg);
           }
 
           .sort-icon {
@@ -106,14 +139,17 @@ $table-card-spacer: $spacer;
         }
       }
 
-      tr {
-        &.table-detail {
-          --#{$prefix}table-detail-bg: #{$table-detail-bg};
-          --#{$prefix}table-detail-padding: #{$table-detail-padding};
+      tbody {
+        tr {
+          &.table-detail {
+            --#{$prefix}table-detail-bg: #{$table-detail-bg};
+            --#{$prefix}table-detail-padding: #{$table-detail-padding};
 
-          td {
-            background: var(--#{$prefix}table-detail-bg);
-            padding: var(--#{$prefix}table-detail-padding);
+            td {
+              background-color: var(--#{$prefix}table-detail-bg);
+              padding: var(--#{$prefix}table-detail-padding);
+              box-shadow: unset;
+            }
           }
         }
       }

src/assets/scss/utils/_variables.scss

@@ -19,7 +19,7 @@ $sizes: (
 
 // Adding aditional gray-light color to colors map
 $custom-colors: (
-  "gray-light": $gray-400,
+  "gray-light": $gray-300,
 );
 $colors: map.merge($colors, $custom-colors);
 

src/components/Table.vue

@@ -7,6 +7,7 @@ const columns = ref([
     label: "ID",
     width: "40",
     numeric: true,
+    sticky: "true",
   },
   {
     field: "first_name",