bkui-vue 0.0.1-beta.99 → 0.0.2-beta.1

package/lib/table/table.less

@@ -1,4 +1,11 @@
 @import '../styles/themes/themes.less';
+@import '../styles/mixins/scroll.less';
+@import '../virtual-render/virtual-render.less';
+@import '../checkbox/checkbox.less';
+@import '../button/button.less';
+@import '../exception/exception.less';
+@import '../pagination/pagination.less';
+@import '../popover/popover.less';
 @import './plugins/head-filter.less';
 @import './plugins/head-sort.less';
 @import './plugins/settings.less';
@@ -7,18 +14,12 @@
   position: relative;
   height: auto;
   overflow: hidden;
-  border-top: 1px solid @table-border-color;
+  // border-bottom: 1px solid @table-border-color;
 
   &.has-scroll-y {
-    border-bottom: 1px solid @table-border-color;
-
     .@{bk-prefix}-table-head {
       padding-right: 4px;
     }
-
-    &.is-scroll-bottom {
-      border-bottom: 1px solid transparent;
-    }
   }
 
   .@{bk-prefix}-table-body {
@@ -26,14 +27,50 @@
     overflow: auto;
 
     &::-webkit-scrollbar {
+      width: 6px;
       height: 6px;
     }
+
+    &::-webkit-scrollbar-thumb {
+      background: #dcdee5;
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px rgba(204, 204, 204, .3);
+    }
+
+    .prepend-row {
+      transform: translateX(var(--prepend-left));
+    }
+  }
+
+  .@{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;
 
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    &::-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%;
@@ -42,8 +79,11 @@
 
       .@{bk-prefix}-table-body-content {
         display: flex;
+        width: 100%;
         height: 100%;
+        padding-bottom: 20px;
       }
+
     }
 
     table {
@@ -51,36 +91,62 @@
       border-collapse: collapse;
       table-layout: fixed;
       align-self: flex-start;
-      
+
       th,
       td {
-        min-width: 80px;
+        height: var(--row-height);
+        min-width: 30px;
         clear: both;
 
+        &.expand-row {
+          .expand-btn-action {
+            color: #575961;
+          }
+        }
+
         .cell {
-          height: var(--row-height);
-          padding: 0 15px;
+          padding: 0 16px;
           overflow: hidden;
-          line-height: var(--row-height);
+          font-size: 12px;
           color: @table-body-font-color;
-          text-align: left;
           text-overflow: ellipsis;
           white-space: nowrap;
 
-          &.expand-cell {
+          &.has-sort {
+            cursor: pointer;
+          }
+
+          .head-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &.selection {
             padding: 0;
-            text-overflow: unset;
+            text-align: center;
           }
 
-          .expand-btn-action {
+          &.expand-cell {
             display: flex;
-            padding: 0 15px;
-            cursor: pointer;
+            padding: 0;
+            text-overflow: unset;
+            align-items: center;
+            justify-content: center;
           }
         }
 
+
+        .expand-btn-action {
+          display: flex;
+          padding: 0 16px;
+          color: #c4c6cc;
+          cursor: pointer;
+        }
+
         &.column_fixed {
           position: sticky;
+          z-index: 1;
           background: #fff;
 
           &.column_fixed_left {
@@ -99,15 +165,41 @@
         }
       }
 
+      .left {
+        text-align: left;
+
+        .cell {
+          justify-content: start;
+        }
+      }
+
+      .center {
+        text-align: center;
+
+        .cell {
+          justify-content: center;
+        }
+      }
+
+      .right {
+        text-align: right;
+
+        .cell {
+          justify-content: end;
+        }
+      }
+
       thead {
+        background-color: @table-head-bg-color;
+
         th {
           font-weight: 400;
-          color: @table-head-font-color;
-          background-color: @table-head-bg-color;
 
           .cell {
             display: flex;
             align-items: center;
+            height: calc(var(--row-height) - 1px);
+            color: @table-head-font-color;
           }
 
           &.active,
@@ -128,18 +220,26 @@
               padding-bottom: 30px;
             }
 
+            &.is-last {
+              border-bottom: none;
+            }
+
             .cell {
               display: block;
               width: 100%;
-              align-items: center;
+              height: 100%;
+              line-height: calc(var(--row-height) - 1px);
               box-sizing: border-box;
+              align-items: center;
             }
           }
 
           &:hover {
-            td {
-              &:not(.empty-cell) {
-                background: @table-row-hover-bg-color;
+            &.hover-highlight {
+              td {
+                &:not(.empty-cell) {
+                  background: @table-row-hover-bg-color;
+                }
               }
             }
           }
@@ -153,34 +253,37 @@
     transform: translateX(var(--scroll-head-left));
 
     .table-head-settings {
-      display: block;
-
-      .bk-popover-reference {
-        position: absolute;
-        top: 0;
-        right: 1px;
-        bottom: 1px;
+      position: absolute;
+      top: 0;
+      right: 1px;
+      bottom: 0;
+      z-index: 2;
+      display: flex;
+      width: calc(var(--row-height));
+      font-size: 14px;
+      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;
 
+      > span {
         display: flex;
-        width: calc(var(--row-height));
-        font-size: 18px;
-        cursor: pointer;     
-        
-        background: #f0f1f5;
-        border-right: 1px solid #dcdee5;
-        border-left: 1px solid #dcdee5;
-        border-radius: 0px 2px 0px 0px;
-        justify-content: center;
-        align-items: center;
+        width: 1rem;
+        height: 1rem;
       }
     }
   }
 
   .@{bk-prefix}-table-footer {
-    line-height: 40px;
-    border-top: 1px solid @table-border-color;
-    border-bottom: 1px solid @table-border-color;
-    
+    height: var(--footer-height);
+    line-height: var(--footer-height);
+
     &.is-hidden {
       display: none;
     }
@@ -188,32 +291,45 @@
 
   &.bordered-row {
     td,
-    th { 
-      .cell {
-        border-bottom: 1px solid @table-border-color;
-      }
+    th {
+      border-bottom: 1px solid @table-border-color;
     }
 
-    &.has-footer {
-      border-bottom: none;
-
-      &.has-scroll-y {
-        tr {
-          &:last-child {
-            td {
-              .cell {
-                border-bottom: none;
-              }
-            }
-          }
+    tr {
+      &:last-child {
+        td {
+          border-bottom: none;
         }
       }
     }
   }
 
   &.bordered-outer {
+    border-top: 1px solid @table-border-color;
     border-right: 1px solid @table-border-color;
     border-left: 1px solid @table-border-color;
+
+    .@{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;
+    }
+  }
+
+  &.bordered-outer,
+  &.bordered-horizontal {
+    .__is-empty {
+      .@{bk-prefix}-table-body-content {
+        border-bottom: 1px solid @table-border-color;
+      }
+    }
   }
 
   &.bordered-col {
@@ -233,11 +349,8 @@
     td {
       border-top: none;
       border-right: none;
+      border-bottom: none;
       border-left: none;
-
-      .cell {
-        border-bottom: none;
-      }
     }
   }
 
@@ -245,9 +358,9 @@
     position: absolute;
     top: 0;
     right: 0;
-    bottom: 0;
+    bottom: var(--footer-height);
     left: 0;
-    width: 100%;
+    // width: 100%;
     pointer-events: none;
 
     .column_fixed {
@@ -256,13 +369,20 @@
       &.column_fixed_left {
         top: 0;
         left: 0;
-        box-shadow: 0 0 10px rgb(0 0 0 / 12%);
+
+        &.shadow {
+          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
+        }
       }
 
       &.column_fixed_right {
         top: 0;
         right: 0;
-        box-shadow: 0 0 10px rgb(0 0 0 / 12%);
+        z-index: 1;
+
+        &.shadow {
+          box-shadow: 0 0 10px rgb(0 0 0 / 12%);
+        }
       }
     }
 
@@ -289,4 +409,10 @@
       }
     }
   }
+
+  .@{bk-prefix}-pagination {
+    .is-last {
+      margin-left: auto;
+    }
+  }
 }