bkui-vue 2.0.1-beta.60 → 2.0.1-beta.60.fix.1

package/lib/table/table.less

@@ -13,45 +13,32 @@
 .@{bk-prefix}-table {
   position: relative;
   width: 100%;
-  height: 100%;
+  height: auto;
   overflow: hidden;
-  border-spacing: 0;
-  display: flex;
-  flex-direction: column;
-  max-height: fit-content;
 
-  .@{bk-prefix}-table-body {
-    position: relative;
-    overflow: auto;
-    flex: 1;
-
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
+  &-flex {
+    display: flex;
+    flex-direction: column;
+    max-height: fit-content;
+    .@{bk-prefix}-table-body {
+      flex: 1;
+      overflow: auto;
     }
+  }
 
-    &::-webkit-scrollbar-thumb {
-      background: #ddd;
-      border-radius: 20px;
-      box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
+  &.has-scroll-y {
+    .@{bk-prefix}-table-head {
+      padding-right: 4px;
     }
+  }
 
-    &.is-bk-scrollbar {
-      overflow: hidden;
-    }
+  .@{bk-prefix}-table-body {
+    position: relative;
+    overflow: hidden;
+    border-bottom: 1px solid @table-border-color;
 
     .prepend-row {
-      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));
+      transform: translateX(var(--prepend-left));
     }
   }
 
@@ -62,7 +49,7 @@
           tr {
             &:nth-child(even) {
               td {
-                background-color: @table-strip-color;
+                background-color: #fafbfd;
               }
             }
 
@@ -75,6 +62,20 @@
     }
   }
 
+  .@{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;
@@ -93,22 +94,16 @@
         height: 100%;
         padding-bottom: 20px;
       }
+
     }
 
     table {
       width: 100%;
-      border-collapse: separate;
-
+      border-collapse: collapse;
       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);
@@ -152,10 +147,6 @@
           &.selection {
             padding: 0;
             text-align: center;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
           }
 
           &.expand-cell {
@@ -167,6 +158,7 @@
           }
         }
 
+
         .expand-btn-action {
           display: flex;
           padding: 0 16px;
@@ -177,6 +169,14 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
+
+          &.column_fixed_left {
+            left: 0;
+          }
+
+          &.column_fixed_right {
+            right: 0;
+          }
         }
 
         &.row_expend {
@@ -221,64 +221,19 @@
           font-weight: 400;
           background-color: var(--background-color);
 
-          &.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;
-              }
-            }
-          }
-
-
-          .across-page-cell {
-            position: relative;
-
-            .dropwn-icon {
-              display: block;
+          &.col-resize-hover {
+            &::after {
               position: absolute;
-              width: 16px;
-              height: 16px;
-              top: 50%;
+              top: 0;
               right: 0;
-              transform: translate(18px, -50%);
-
-              &::after {
-                position: absolute;
-                top: 50%;
-                right: 0;
-                left: 50%;
-                width: 5px;
-                height: 5px;
-                border: 1px solid #63656e;
-                border-top: 0;
-                border-left: 0;
-                transform: translate(-50%, -100%) scaleY(1) rotate(45deg);
-                transform-origin: center;
-                content: '';
-              }
+              bottom: 0;
+              z-index: 1;
+              width: 6px;
+              pointer-events: none;
+              background-color: #3785ff;
+              content: '';
+              transform: translateX(50%);
             }
-
           }
 
           .cell {
@@ -286,45 +241,27 @@
             align-items: center;
             height: calc(var(--row-height) - 2px);
             color: @table-head-font-color;
-
-            &.cell-resize {
-              cursor: col-resize;
-            }
           }
 
-          &.column_fixed {
-            transform: translateX(var(--translate-x));
+          &.active,
+          &:hover {
+            cursor: pointer;
+            background: @table-row-active-bg-color;
           }
-        }
-      }
 
-      &:not(.col-resize-hover) {
-        thead {
-          th {
-            &.active,
-            &:hover {
-              cursor: pointer;
-              background: @table-row-active-bg-color;
-            }
+          &.column_fixed {
+            transform: translateX(var(--scroll-left));
           }
         }
       }
 
       tbody {
         tr {
-
-          &.stripe-row {
-            background: #fafbfd;
-            td {
-              background-color: #fafbfd;
-            }
-          }
-
           td {
             background-color: #fff;
-            border-top: 1px solid @table-bg-color;
-            border-bottom: 1px solid @table-bg-color;
-            border-right: 1px solid @table-bg-color;
+            border-top: 1px solid transparent;
+            border-bottom: 1px solid transparent;
+            border-right: 1px solid transparent;
 
             box-sizing: border-box;
 
@@ -335,7 +272,7 @@
             .cell {
               display: block;
               width: 100%;
-              line-height: calc(var(--row-height) - 4px);
+              line-height: calc(var(--row-height) - 2px);
               box-sizing: border-box;
 
               &.drag {
@@ -350,7 +287,6 @@
               td {
                 &:not(.empty-cell) {
                   background: @table-row-hover-bg-color;
-                  border-right-color: @table-row-hover-bg-color;
                 }
               }
             }
@@ -358,7 +294,7 @@
 
           &.--drag-start {
             td {
-              background: #fff !important;
+              background: #fff!important;
             }
           }
         }
@@ -371,41 +307,20 @@
     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;
-      left: 0;
+      right: 0;
       bottom: 0;
       z-index: 1;
       width: 6px;
       background-color: #3785ff;
-      transform: translate3d(var(--drag-offset-h-x), 0, 0);
-      pointer-events: none;
-    }
-
-    .@{bk-prefix}-table-fixed {
-      transform: translate(0, 0);
+      transform: translateX(-50%);
     }
 
     thead {
-      transform: translate(var(--translate-x-1), 0);
+      transform: translateX(var(--scroll-head-left));
     }
 
     .table-head-settings {
@@ -437,7 +352,6 @@
     display: flex;
     width: 100%;
     height: var(--footer-height);
-    min-height: var(--footer-height);
     align-items: center;
     padding: 0 16px 0 22px;
 
@@ -470,11 +384,15 @@
     .@{bk-prefix}-table-footer {
       border-bottom: 1px solid @table-border-color;
     }
+
   }
 
   &.bordered-horizontal {
     border-top: 1px solid @table-border-color;
-    border-bottom: 1px solid @table-border-color;
+
+    .@{bk-prefix}-table-footer {
+      border-bottom: 1px solid @table-border-color;
+    }
   }
 
   &.bordered-outer,
@@ -487,12 +405,6 @@
   }
 
   &.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;
 
@@ -501,42 +413,32 @@
       }
     }
 
-    .@{bk-prefix}-table-body {
-      border-right: 1px solid @table-border-color;
+    .bk-table-body {
       tbody {
         tr {
           td {
             border-right-color: @table-border-color;
 
             &:last-child {
-              border-right: none;
-            }
-          }
-
-          &:hover {
-            &.hover-highlight {
-              td {
-                &:not(.empty-cell) {
-                  border-right-color: @table-border-color;
-                }
-              }
+              border-right-color: transparent;
             }
           }
         }
       }
     }
+
   }
 
   th,
   td {
-    border-right: 1px solid @table-bg-color;
+    border-right: 1px solid transparent;
   }
 
   &.bordered-none {
     th,
     td {
       border-top: none;
-      border-right: 1px solid @table-bg-color;
+      border-right: 1px solid transparent;
       border-bottom: none;
       border-left: none;
     }
@@ -546,28 +448,32 @@
     position: absolute;
     top: 0;
     right: 0;
-    bottom: 0;
+    bottom: var(--footer-height);
     left: 0;
     pointer-events: none;
-    transform: translate(var(--translate-x), var(--translate-y));
-
-    &.has-virtual-scroll {
-      transform: translate(var(--translate-x), 0);
-    }
-
-    .column_fixed_right {
-      box-shadow: var(--shadow-right);
-    }
-
-    .column_fixed_left {
-      box-shadow: var(--shadow-left);
-    }
 
     .column_fixed {
       position: absolute;
       z-index: 2;
-      bottom: 0;
-      top: 0;
+
+      &.column_fixed_left {
+        top: 0;
+        left: 0;
+
+        &.shadow {
+          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
+        }
+      }
+
+      &.column_fixed_right {
+        top: 0;
+        right: 0;
+
+
+        &.shadow {
+          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
+        }
+      }
     }
 
     .scroll-loading {
@@ -583,13 +489,6 @@
     }
   }
 
-  .@{bk-prefix}-table-fixed-bottom {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    text-align: center;
-  }
   colgroup {
     col {
       background: @table-bg-color;
@@ -606,34 +505,8 @@
       margin-left: auto;
     }
   }
-}
-
-.@{bk-prefix}-across-page-popover {
-  padding: 0!important;
-
-  .dropwn-content {
-    min-width: 100%;
-    padding: 5px 0;
-    margin: 0;
-    background: #fff;
-    border: 1px solid  #dcdee5;
-    border-radius: 2px;
-    box-sizing: border-box;
-
-    > div {
-      display: block;
-      height: 32px;
-      padding: 0 16px;
-      font-size: 12px;
-      line-height: 33px;
-      color: #63656e;
-      white-space: nowrap;
-      list-style: none;
-      cursor: pointer;
 
-      &:hover {
-        background-color: #f5f7fa;
-      }
-    }
+  .stripe-row {
+    background: #fafbfd;
   }
-}
+}