bkui-vue 0.0.2-beta.99 → 0.0.2-modal-refactor.2

package/lib/table/table.d.ts

@@ -473,6 +473,7 @@ declare const _default: import("vue").DefineComponent<{
     minHeight: string | number;
     columns: Column[];
     checked: unknown[];
+    emptyText: string;
     cellClass: any;
     headHeight: number;
     rowKey: any;
@@ -487,7 +488,6 @@ declare const _default: import("vue").DefineComponent<{
     paginationHeight: number;
     remotePagination: boolean;
     acrossAll: boolean;
-    emptyText: string;
     emptyCellText: any;
     rowClass: any;
     rowStyle: any;

package/lib/table/table.less

@@ -34,6 +34,7 @@
   .@{bk-prefix}-table-body {
     position: relative;
     overflow: auto;
+    scrollbar-gutter: stable;
 
     &::-webkit-scrollbar {
       width: 5px;
@@ -58,7 +59,7 @@
           tr {
             &:nth-child(even) {
               td {
-                background-color: #FAFBFD;
+                background-color: #fafbfd;
               }
             }
 
@@ -108,11 +109,11 @@
       align-items: center;
 
       .@{bk-prefix}-table-body-content {
+        position: relative;
         display: flex;
         width: 100%;
         height: 100%;
         padding-bottom: 20px;
-        position: relative;
       }
 
     }
@@ -120,9 +121,9 @@
     table {
       width: 100%;
       border-collapse: collapse;
+      transform: translateZ(0);
       table-layout: fixed;
       align-self: flex-start;
-      transform: translateZ(0);
 
       th,
       td {
@@ -229,24 +230,25 @@
         background-color: @table-head-bg-color;
 
         th {
+          position: relative;
           font-weight: 400;
           background-color: var(--background-color);
-          position: relative;
 
           &.col-resize-hover {
             &::after {
-              content: '';
               position: absolute;
-              right: 0;
               top: 0;
+              right: 0;
               bottom: 0;
-              width: 6px;
-              transform: translateX(50%);
-              background-color: #3785FF;
               z-index: 1;
+              width: 6px;
               pointer-events: none;
+              background-color: #3785ff;
+              content: '';
+              transform: translateX(50%);
             }
           }
+
           .cell {
             display: flex;
             align-items: center;
@@ -256,8 +258,8 @@
 
           &.active,
           &:hover {
-            background: @table-row-active-bg-color;
             cursor: pointer;
+            background: @table-row-active-bg-color;
           }
 
           &.column_fixed {
@@ -305,18 +307,23 @@
 
   .@{bk-prefix}-table-head {
     position: relative;
-    transform: translateX(var(--scroll-head-left));
     z-index: 2;
+    scrollbar-gutter: stable;
+    overflow: hidden;
 
     .col-resize-drag {
       position: absolute;
-      right: 0;
       top: 0;
+      right: 0;
       bottom: 0;
+      z-index: 1;
       width: 6px;
+      background-color: #3785ff;
       transform: translateX(-50%);
-      background-color: #3785FF;
-      z-index: 1;
+    }
+
+    thead {
+      transform: translateX(var(--scroll-head-left));
     }
 
     .table-head-settings {
@@ -341,16 +348,16 @@
 
       > span {
         display: flex;
-        width: 1rem;
-        height: 1rem;
+        width: 1em;
+        height: 1em;
       }
     }
   }
 
   .@{bk-prefix}-table-footer {
-    height: var(--footer-height);
-    width: 100%;
     display: flex;
+    width: 100%;
+    height: var(--footer-height);
     align-items: center;
 
     &.is-hidden {
@@ -428,9 +435,8 @@
     top: 0;
     right: 0;
     bottom: var(--footer-height);
-    max-height: var(--fix-max-height);
     left: 0;
-    height: var(--fix-height);
+    // height: var(--fix-height);
     pointer-events: none;
 
     .column_fixed {
@@ -487,6 +493,6 @@
   }
 
   .stripe-row {
-    background: #FAFBFD;
+    background: #fafbfd;
   }
 }