bkui-vue 2.0.1-beta.70 → 2.0.1-beta.70.search.1

package/lib/table/table.less

@@ -12,46 +12,45 @@
 
 .@{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;
+  width: 100%;
+
+  &-flex {
+    display: flex;
+    flex-direction: column;
+    max-height: fit-content;
+    .@{bk-prefix}-table-body {
+      flex: 1;
+      overflow: auto;
+    }
+  }
+
+  &.has-scroll-y {
+    .@{bk-prefix}-table-head {
+      padding-right: 4px;
+    }
+  }
 
   .@{bk-prefix}-table-body {
     position: relative;
     overflow: auto;
-    flex: 1;
+    scrollbar-gutter: stable;
+    border-bottom: 1px solid @table-border-color;
 
     &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
+      width: 5px;
+      height: 6px;
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #ddd;
-      border-radius: 20px;
-      box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
-    }
-
-    &.is-bk-scrollbar {
-      overflow: hidden;
+      background: #dcdee5;
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px rgba(204, 204, 204, .3);
     }
 
     .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 +61,7 @@
           tr {
             &:nth-child(even) {
               td {
-                background-color: @table-strip-color;
+                background-color: #fafbfd;
               }
             }
 
@@ -75,11 +74,36 @@
     }
   }
 
+  .@{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;
     transform: translateZ(0);
 
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #ddd;
+      border-radius: 20px;
+      box-shadow: inset 0 0 6px rgba(204, 204, 204, .3);
+    }
+
     &.__is-empty {
       display: flex;
       height: 100%;
@@ -93,22 +117,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);
@@ -130,8 +148,8 @@
           white-space: nowrap;
 
           .drag-cell {
-            height: 100%;
             font-size: 14px;
+            height: 100%;
           }
 
           &.has-sort {
@@ -152,10 +170,6 @@
           &.selection {
             padding: 0;
             text-align: center;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
           }
 
           &.expand-cell {
@@ -167,6 +181,7 @@
           }
         }
 
+
         .expand-btn-action {
           display: flex;
           padding: 0 16px;
@@ -177,6 +192,14 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
+
+          &.column_fixed_left {
+            left: 0;
+          }
+
+          &.column_fixed_right {
+            right: 0;
+          }
         }
 
         &.row_expend {
@@ -191,7 +214,6 @@
 
         .cell {
           justify-content: start;
-          text-align: left;
         }
       }
 
@@ -200,7 +222,6 @@
 
         .cell {
           justify-content: center;
-          text-align: center;
         }
       }
 
@@ -209,7 +230,6 @@
 
         .cell {
           justify-content: end;
-          text-align: right;
         }
       }
 
@@ -221,126 +241,64 @@
           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 {
             display: flex;
             align-items: center;
-            height: calc(var(--row-height) - 2px);
+            height: calc(var(--row-height) - 1px);
             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;
-
-            box-sizing: border-box;
 
             &.empty-cell {
               padding-bottom: 30px;
             }
 
+            &.is-last {
+              border-bottom: none;
+            }
+
             .cell {
               display: block;
               width: 100%;
-              line-height: calc(var(--row-height) - 4px);
+              height: 100%;
+              line-height: calc(var(--row-height) - 1px);
               box-sizing: border-box;
+              align-items: center;
 
               &.drag {
-                text-align: center;
                 cursor: move;
+                text-align: center;
               }
             }
           }
@@ -350,15 +308,25 @@
               td {
                 &:not(.empty-cell) {
                   background: @table-row-hover-bg-color;
-                  border-right-color: @table-row-hover-bg-color;
                 }
               }
             }
           }
 
+          // &.--drag-enter {
+          //   &.--bottom {
+          //     border-bottom: solid 1px #3785ff;
+          //   }
+
+          //   &.--top {
+          //     border-top: solid 1px #3785ff;
+          //   }
+          // }
+
           &.--drag-start {
+
             td {
-              background: #fff !important;
+              background: #fff!important;
             }
           }
         }
@@ -369,43 +337,23 @@
   .@{bk-prefix}-table-head {
     position: relative;
     z-index: 2;
+    scrollbar-gutter: stable;
     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 {
@@ -420,8 +368,11 @@
       cursor: pointer;
 
       background: @table-head-bg-color;
+      //border-right: 1px solid @table-border-color;
+      // border-bottom: 1px solid @table-border-color;
       border-left: 1px solid @table-border-color;
       border-radius: 0 2px 0 0;
+      // transform: translateX(var(--scroll-left));
       justify-content: center;
       align-items: center;
 
@@ -437,9 +388,7 @@
     display: flex;
     width: 100%;
     height: var(--footer-height);
-    min-height: var(--footer-height);
     align-items: center;
-    padding: 0 16px 0 22px;
 
     &.is-hidden {
       display: none;
@@ -451,12 +400,14 @@
       border-bottom: 1px solid @table-border-color;
     }
 
-    .bk-table-body {
-      tbody {
-        tr {
-          td {
-            border-bottom-color: @table-border-color;
-          }
+    td {
+      border-bottom: 1px solid @table-border-color;
+    }
+
+    tr {
+      &:last-child {
+        td {
+          border-bottom: none;
         }
       }
     }
@@ -470,11 +421,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,13 +442,8 @@
   }
 
   &.bordered-col {
-    .@{bk-prefix}-table-head {
-      border-right: 1px solid @table-border-color;
-      .is-head-group {
-        border-bottom: 1px solid @table-border-color;
-      }
-    }
-    th {
+    th,
+    td {
       border-right: 1px solid @table-border-color;
 
       &:last-child {
@@ -501,87 +451,52 @@
       }
     }
 
-    .@{bk-prefix}-table-body {
-      border-right: 1px solid @table-border-color;
-      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;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
   }
 
-  th,
-  td {
-    border-right: 1px solid @table-bg-color;
+  th, td {
+    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;
     }
-    .@{bk-prefix}-table-body {
-      table {
-        tbody {
-          tr {
-            td {
-              border-top: none;
-              border-right: 1px solid @table-bg-color;
-              border-bottom: none;
-              border-left: none;
-            }
-          }
-        }
-      }
-    }
   }
 
   .@{bk-prefix}-table-fixed {
     position: absolute;
     top: 0;
     right: 0;
-    bottom: 0;
+    bottom: var(--footer-height);
     left: 0;
+    // height: var(--fix-height);
     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 {
@@ -597,13 +512,6 @@
     }
   }
 
-  .@{bk-prefix}-table-fixed-bottom {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    text-align: center;
-  }
   colgroup {
     col {
       background: @table-bg-color;
@@ -620,34 +528,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;
   }
 }