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

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 {
@@ -221,19 +221,64 @@
           font-weight: 400;
           background-color: var(--background-color);
 
-          &.col-resize-hover {
-            &::after {
+          &.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;
               position: absolute;
-              top: 0;
+              width: 16px;
+              height: 16px;
+              top: 50%;
               right: 0;
-              bottom: 0;
-              z-index: 1;
-              width: 6px;
-              pointer-events: none;
-              background-color: #3785ff;
-              content: '';
-              transform: translateX(50%);
+              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: '';
+              }
             }
+
           }
 
           .cell {
@@ -241,27 +286,45 @@
             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;
+            }
           }
         }
       }
 
       tbody {
         tr {
+
+          &.stripe-row {
+            background: #fafbfd;
+            td {
+              background-color: #fafbfd;
+            }
+          }
+
           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;
 
@@ -272,7 +335,7 @@
             .cell {
               display: block;
               width: 100%;
-              line-height: calc(var(--row-height) - 2px);
+              line-height: calc(var(--row-height) - 4px);
               box-sizing: border-box;
 
               &.drag {
@@ -287,6 +350,7 @@
               td {
                 &:not(.empty-cell) {
                   background: @table-row-hover-bg-color;
+                  border-right-color: @table-row-hover-bg-color;
                 }
               }
             }
@@ -294,7 +358,7 @@
 
           &.--drag-start {
             td {
-              background: #fff!important;
+              background: #fff !important;
             }
           }
         }
@@ -307,20 +371,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 {
@@ -352,6 +437,7 @@
     display: flex;
     width: 100%;
     height: var(--footer-height);
+    min-height: var(--footer-height);
     align-items: center;
     padding: 0 16px 0 22px;
 
@@ -384,15 +470,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,
@@ -405,6 +487,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;
 
@@ -413,32 +501,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;
     }
@@ -448,32 +546,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;
-
-        &.shadow {
-          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
-        }
-      }
+    &.has-virtual-scroll {
+      transform: translate(var(--translate-x), 0);
+    }
 
-      &.column_fixed_right {
-        top: 0;
-        right: 0;
+    .column_fixed_right {
+      box-shadow: var(--shadow-right);
+    }
 
+    .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 {
@@ -489,6 +583,13 @@
     }
   }
 
+  .@{bk-prefix}-table-fixed-bottom {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+  }
   colgroup {
     col {
       background: @table-bg-color;
@@ -505,8 +606,34 @@
       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;
 
-  .stripe-row {
-    background: #fafbfd;
+      &:hover {
+        background-color: #f5f7fa;
+      }
+    }
   }
-}
+}