bkui-vue 2.0.1-beta.5 → 2.0.1-beta.50

package/lib/table/table.less

@@ -13,32 +13,45 @@
 .@{bk-prefix}-table {
   position: relative;
   width: 100%;
-  height: auto;
+  height: 100%;
   overflow: hidden;
+  border-spacing: 0;
+  display: flex;
+  flex-direction: column;
+  max-height: fit-content;
 
-  &-flex {
-    display: flex;
-    flex-direction: column;
-    max-height: fit-content;
-    .@{bk-prefix}-table-body {
-      flex: 1;
-      overflow: auto;
+  .@{bk-prefix}-table-body {
+    position: relative;
+    overflow: auto;
+    flex: 1;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
     }
-  }
 
-  &.has-scroll-y {
-    .@{bk-prefix}-table-head {
-      padding-right: 4px;
+    &::-webkit-scrollbar-thumb {
+      background: #ddd;
+      border-radius: 20px;
+      box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
     }
-  }
 
-  .@{bk-prefix}-table-body {
-    position: relative;
-    overflow: hidden;
-    border-bottom: 1px solid @table-border-color;
+    &.is-bk-scrollbar {
+      overflow: hidden;
+    }
 
     .prepend-row {
-      transform: translateX(var(--prepend-left));
+      transform: translate(var(--translate-x), 0);
+    }
+
+    .resize-column {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 1px;
+      background-color: #3785ff;
+      transform: translate(var(--drag-offset-x), var(--translate-y));
     }
   }
 
@@ -49,7 +62,7 @@
           tr {
             &:nth-child(even) {
               td {
-                background-color: #fafbfd;
+                background-color: @table-strip-color;
               }
             }
 
@@ -62,20 +75,6 @@
     }
   }
 
-  .@{bk-prefix}-fixed-bottom-border {
-    position: sticky;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    border-top: 1px solid @table-border-color;
-    transform: translateX(var(--scroll-head-left));
-
-    &._is-empty {
-      display: none;
-    }
-  }
-
   .@{bk-prefix}-table-head,
   .@{bk-prefix}-table-body {
     background: @table-bg-color;
@@ -94,16 +93,22 @@
         height: 100%;
         padding-bottom: 20px;
       }
-
     }
 
     table {
       width: 100%;
-      border-collapse: collapse;
+      border-collapse: separate;
+
       transform: translateZ(0);
       table-layout: fixed;
       align-self: flex-start;
 
+      &.@{bk-prefix}-table-col-resizing {
+        th {
+          cursor: col-resize !important;
+        }
+      }
+
       th,
       td {
         height: var(--row-height);
@@ -147,6 +152,10 @@
           &.selection {
             padding: 0;
             text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
           }
 
           &.expand-cell {
@@ -158,7 +167,6 @@
           }
         }
 
-
         .expand-btn-action {
           display: flex;
           padding: 0 16px;
@@ -169,14 +177,6 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
-
-          &.column_fixed_left {
-            left: 0;
-          }
-
-          &.column_fixed_right {
-            right: 0;
-          }
         }
 
         &.row_expend {
@@ -191,6 +191,7 @@
 
         .cell {
           justify-content: start;
+          text-align: left;
         }
       }
 
@@ -199,6 +200,7 @@
 
         .cell {
           justify-content: center;
+          text-align: center;
         }
       }
 
@@ -207,6 +209,7 @@
 
         .cell {
           justify-content: end;
+          text-align: right;
         }
       }
 
@@ -218,18 +221,32 @@
           font-weight: 400;
           background-color: var(--background-color);
 
-          &.col-resize-hover {
-            &::after {
-              position: absolute;
-              top: 0;
-              right: 0;
-              bottom: 0;
-              z-index: 1;
-              width: 6px;
-              pointer-events: none;
-              background-color: #3785ff;
-              content: '';
-              transform: translateX(50%);
+          &.col-pointer-hover {
+            &.poiner-right {
+              &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: 0;
+                width: 3px;
+                background-color: #3785ff;
+                transform: translateX(1px);
+                pointer-events: none;
+              }
+            }
+            &.poiner-left {
+              &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                width: 3px;
+                transform: translateX(-1px);
+                background-color: #3785ff;
+                pointer-events: none;
+              }
             }
           }
 
@@ -238,16 +255,26 @@
             align-items: center;
             height: calc(var(--row-height) - 2px);
             color: @table-head-font-color;
-          }
 
-          &.active,
-          &:hover {
-            cursor: pointer;
-            background: @table-row-active-bg-color;
+            &.cell-resize {
+              cursor: col-resize;
+            }
           }
 
           &.column_fixed {
-            transform: translateX(var(--scroll-left));
+            transform: translateX(var(--translate-x));
+          }
+        }
+      }
+
+      &:not(.col-resize-hover) {
+        thead {
+          th {
+            &.active,
+            &:hover {
+              cursor: pointer;
+              background: @table-row-active-bg-color;
+            }
           }
         }
       }
@@ -256,9 +283,9 @@
         tr {
           td {
             background-color: #fff;
-            border-top: 1px solid transparent;
-            border-bottom: 1px solid transparent;
-            border-right: 1px solid transparent;
+            border-top: 1px solid @table-bg-color;
+            border-bottom: 1px solid @table-bg-color;
+            border-right: 1px solid @table-bg-color;
 
             box-sizing: border-box;
 
@@ -266,17 +293,11 @@
               padding-bottom: 30px;
             }
 
-            &.is-last {
-              // border-bottom: none;
-            }
-
             .cell {
               display: block;
               width: 100%;
-              // height: 100%;
-              line-height: calc(var(--row-height) - 2px);
+              line-height: calc(var(--row-height) - 4px);
               box-sizing: border-box;
-              align-items: center;
 
               &.drag {
                 text-align: center;
@@ -290,6 +311,7 @@
               td {
                 &:not(.empty-cell) {
                   background: @table-row-hover-bg-color;
+                  border-right-color: @table-row-hover-bg-color;
                 }
               }
             }
@@ -297,7 +319,7 @@
 
           &.--drag-start {
             td {
-              background: #fff!important;
+              background: #fff !important;
             }
           }
         }
@@ -310,20 +332,41 @@
     z-index: 2;
     overflow: hidden;
     background-color: var(--background-color);
+    height: var(--row-height);
+    min-height: var(--row-height);
+
+    &.has-group {
+      .is-head-group {
+        border-bottom: 1px solid @table-border-color;
+      }
+
+      th {
+        border-right: 1px solid @table-border-color;
+
+        &.is-last-child {
+          border-right: none;
+        }
+      }
+    }
 
     .col-resize-drag {
       position: absolute;
       top: 0;
-      right: 0;
+      left: 0;
       bottom: 0;
       z-index: 1;
       width: 6px;
       background-color: #3785ff;
-      transform: translateX(-50%);
+      transform: translate3d(var(--drag-offset-h-x), 0, 0);
+      pointer-events: none;
+    }
+
+    .@{bk-prefix}-table-fixed {
+      transform: translate(0, 0);
     }
 
     thead {
-      transform: translateX(var(--scroll-head-left));
+      transform: translate(var(--translate-x-1), 0);
     }
 
     .table-head-settings {
@@ -355,6 +398,7 @@
     display: flex;
     width: 100%;
     height: var(--footer-height);
+    min-height: var(--footer-height);
     align-items: center;
     padding: 0 16px 0 22px;
 
@@ -374,12 +418,6 @@
           td {
             border-bottom-color: @table-border-color;
           }
-
-          &:last-child {
-            td {
-              border-bottom: none;
-            }
-          }
         }
       }
     }
@@ -393,15 +431,11 @@
     .@{bk-prefix}-table-footer {
       border-bottom: 1px solid @table-border-color;
     }
-
   }
 
   &.bordered-horizontal {
     border-top: 1px solid @table-border-color;
-
-    .@{bk-prefix}-table-footer {
-      border-bottom: 1px solid @table-border-color;
-    }
+    border-bottom: 1px solid @table-border-color;
   }
 
   &.bordered-outer,
@@ -414,6 +448,12 @@
   }
 
   &.bordered-col {
+    .@{bk-prefix}-table-head {
+      border-right: 1px solid @table-border-color;
+      .is-head-group {
+        border-bottom: 1px solid @table-border-color;
+      }
+    }
     th {
       border-right: 1px solid @table-border-color;
 
@@ -422,32 +462,42 @@
       }
     }
 
-    .bk-table-body {
+    .@{bk-prefix}-table-body {
+      border-right: 1px solid @table-border-color;
       tbody {
         tr {
           td {
             border-right-color: @table-border-color;
 
             &:last-child {
-              border-right-color: transparent;
+              border-right: none;
+            }
+          }
+
+          &:hover {
+            &.hover-highlight {
+              td {
+                &:not(.empty-cell) {
+                  border-right-color: @table-border-color;
+                }
+              }
             }
           }
         }
       }
     }
-
   }
 
   th,
   td {
-    border-right: 1px solid transparent;
+    border-right: 1px solid @table-bg-color;
   }
 
   &.bordered-none {
     th,
     td {
       border-top: none;
-      border-right: 1px solid transparent;
+      border-right: 1px solid @table-bg-color;
       border-bottom: none;
       border-left: none;
     }
@@ -457,31 +507,28 @@
     position: absolute;
     top: 0;
     right: 0;
-    bottom: var(--footer-height);
+    bottom: 0;
     left: 0;
     pointer-events: none;
+    transform: translate(var(--translate-x), var(--translate-y));
 
-    .column_fixed {
-      position: absolute;
-      z-index: 2;
-
-      &.column_fixed_left {
-        top: 0;
-        left: 0;
+    &.has-virtual-scroll {
+      transform: translate(var(--translate-x), 0);
+    }
 
-        &.shadow {
-          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
-        }
-      }
+    .column_fixed_right {
+      box-shadow: var(--shadow-right);
+    }
 
-      &.column_fixed_right {
-        top: 0;
-        right: 0;
+    .column_fixed_left {
+      box-shadow: var(--shadow-left);
+    }
 
-        &.shadow {
-          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
-        }
-      }
+    .column_fixed {
+      position: absolute;
+      z-index: 2;
+      bottom: 0;
+      top: 0;
     }
 
     .scroll-loading {
@@ -497,6 +544,13 @@
     }
   }
 
+  .@{bk-prefix}-table-fixed-bottom {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+  }
   colgroup {
     col {
       background: @table-bg-color;
@@ -517,4 +571,4 @@
   .stripe-row {
     background: #fafbfd;
   }
-}
+}