bkui-vue 0.0.1-beta.60 → 0.0.1-beta.63

package/lib/table/table.css

@@ -199,14 +199,19 @@
   align-items: center;
 }
 .bk-table {
+  position: relative;
   height: auto;
   overflow: hidden;
   border-top: 1px solid #dcdee5;
   border-bottom: 1px solid #dcdee5;
 }
 .bk-table .bk-table-body {
+  position: relative;
   overflow: auto;
 }
+.bk-table .bk-table-body::-webkit-scrollbar {
+  height: 6px;
+}
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
@@ -222,6 +227,8 @@
 .bk-table .bk-table-head table td,
 .bk-table .bk-table-body table td {
   min-width: 80px;
+  padding: 0 15px;
+  clear: both;
 }
 .bk-table .bk-table-head table th .cell,
 .bk-table .bk-table-body table th .cell,
@@ -229,7 +236,6 @@
 .bk-table .bk-table-body table td .cell {
   display: flex;
   align-items: center;
-  padding: 0 15px;
   overflow: hidden;
   line-height: var(--row-height);
   color: #575961;
@@ -237,8 +243,28 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-table .bk-table-head table th.column_fixed,
+.bk-table .bk-table-body table th.column_fixed,
+.bk-table .bk-table-head table td.column_fixed,
+.bk-table .bk-table-body table td.column_fixed {
+  position: sticky;
+  background: #fff;
+}
+.bk-table .bk-table-head table th.column_fixed.column_fixed_left,
+.bk-table .bk-table-body table th.column_fixed.column_fixed_left,
+.bk-table .bk-table-head table td.column_fixed.column_fixed_left,
+.bk-table .bk-table-body table td.column_fixed.column_fixed_left {
+  left: 0;
+}
+.bk-table .bk-table-head table th.column_fixed.column_fixed_right,
+.bk-table .bk-table-body table th.column_fixed.column_fixed_right,
+.bk-table .bk-table-head table td.column_fixed.column_fixed_right,
+.bk-table .bk-table-body table td.column_fixed.column_fixed_right {
+  right: 0;
+}
 .bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
+  font-weight: 400;
   color: #313238;
   background-color: #fafbfd;
 }
@@ -248,9 +274,13 @@
 .bk-table .bk-table-body table thead th:hover {
   background: #f0f1f5;
 }
+.bk-table .bk-table-head table thead th.column_fixed,
+.bk-table .bk-table-body table thead th.column_fixed {
+  transform: translateX(var(--scroll-left));
+}
 .bk-table .bk-table-head table tbody tr td .cell,
 .bk-table .bk-table-body table tbody tr td .cell {
-  display: inline-block;
+  display: block;
   width: 100%;
 }
 .bk-table .bk-table-head table tbody tr:hover td:not(.empty-cell),
@@ -259,6 +289,10 @@
 }
 .bk-table .bk-table-head {
   position: relative;
+  transform: translateX(var(--scroll-head-left));
+}
+.bk-table .bk-table-head .table-head-settings {
+  display: block;
 }
 .bk-table .bk-table-head .table-head-settings .bk-popover-reference {
   position: absolute;
@@ -310,7 +344,26 @@
   border-left: none;
 }
 .bk-table .bk-table-fixed {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
+  pointer-events: none;
+}
+.bk-table .bk-table-fixed .column_fixed {
+  position: absolute;
+}
+.bk-table .bk-table-fixed .column_fixed.column_fixed_left {
+  top: 0;
+  left: 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
+}
+.bk-table .bk-table-fixed .column_fixed.column_fixed_right {
+  top: 0;
+  right: 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
 }
 .bk-table colgroup col {
   background: white;

package/lib/table/table.d.ts

@@ -125,8 +125,8 @@ declare const _default: import("vue").DefineComponent<{
     onRowClick?: (...args: any[]) => any;
     onRowDblClick?: (...args: any[]) => any;
 }, {
-    height: string | number;
     data: any[];
+    height: string | number;
     maxHeight: string | number;
     minHeight: string | number;
     border: string[];

package/lib/table/table.less

@@ -4,12 +4,19 @@
 @import './plugins/settings.less';
 
 .@{bk-prefix}-table {
+  position: relative;
   height: auto;
   overflow: hidden;
   border-top: 1px solid @table-border-color;
   border-bottom: 1px solid @table-border-color;
+
   .@{bk-prefix}-table-body {
+    position: relative;
     overflow: auto;
+
+    &::-webkit-scrollbar {
+      height: 6px;
+    }
   }
 
   .@{bk-prefix}-table-head,
@@ -24,11 +31,12 @@
       th,
       td {
         min-width: 80px;
+        padding: 0 15px;
+        clear: both;
 
         .cell {
           display: flex;
           align-items: center;
-          padding: 0 15px;
           overflow: hidden;
           line-height: var(--row-height);
           color: @table-body-font-color;
@@ -36,10 +44,24 @@
           text-overflow: ellipsis;
           white-space: nowrap;
         }
+
+        &.column_fixed {
+          position: sticky;
+          background: #fff;
+
+          &.column_fixed_left {
+            left: 0;
+          }
+
+          &.column_fixed_right {
+            right: 0;
+          }
+        }
       }
 
       thead {
         th {
+          font-weight: 400;
           color: @table-head-font-color;
           background-color: @table-head-bg-color;
 
@@ -47,6 +69,10 @@
           &:hover {
             background: @table-row-active-bg-color;
           }
+
+          &.column_fixed {
+            transform: translateX(var(--scroll-left));
+          }
         }
       }
 
@@ -54,7 +80,7 @@
         tr {
           td {
             .cell {
-              display: inline-block;
+              display: block;
               width: 100%;
             }
           }
@@ -73,8 +99,11 @@
 
   .@{bk-prefix}-table-head {
     position: relative;
+    transform: translateX(var(--scroll-head-left));
 
     .table-head-settings {
+      display: block;
+
       .bk-popover-reference {
         position: absolute;
         top: 0;
@@ -148,7 +177,29 @@
   }
 
   .@{bk-prefix}-table-fixed {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     width: 100%;
+    pointer-events: none;
+
+    .column_fixed {
+      position: absolute;
+
+      &.column_fixed_left {
+        top: 0;
+        left: 0;
+        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%);
+      }
+    }
   }
 
   colgroup {

package/lib/table/table.variable.css

@@ -9,6 +9,7 @@
   --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
+  --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
@@ -91,6 +92,10 @@
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #eaf3ff;
+  --cascader-panel-active: #f4f6fa;
+  --cascader-panel-disabled-bg: #fff;
 }
 .bk-table-head-action {
   display: flex;
@@ -293,14 +298,19 @@
   align-items: center;
 }
 .bk-table {
+  position: relative;
   height: auto;
   overflow: hidden;
   border-top: 1px solid #dcdee5;
   border-bottom: 1px solid #dcdee5;
 }
 .bk-table .bk-table-body {
+  position: relative;
   overflow: auto;
 }
+.bk-table .bk-table-body::-webkit-scrollbar {
+  height: 6px;
+}
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
@@ -316,6 +326,8 @@
 .bk-table .bk-table-head table td,
 .bk-table .bk-table-body table td {
   min-width: 80px;
+  padding: 0 15px;
+  clear: both;
 }
 .bk-table .bk-table-head table th .cell,
 .bk-table .bk-table-body table th .cell,
@@ -323,7 +335,6 @@
 .bk-table .bk-table-body table td .cell {
   display: flex;
   align-items: center;
-  padding: 0 15px;
   overflow: hidden;
   line-height: var(--row-height);
   color: #575961;
@@ -331,8 +342,28 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-table .bk-table-head table th.column_fixed,
+.bk-table .bk-table-body table th.column_fixed,
+.bk-table .bk-table-head table td.column_fixed,
+.bk-table .bk-table-body table td.column_fixed {
+  position: sticky;
+  background: #fff;
+}
+.bk-table .bk-table-head table th.column_fixed.column_fixed_left,
+.bk-table .bk-table-body table th.column_fixed.column_fixed_left,
+.bk-table .bk-table-head table td.column_fixed.column_fixed_left,
+.bk-table .bk-table-body table td.column_fixed.column_fixed_left {
+  left: 0;
+}
+.bk-table .bk-table-head table th.column_fixed.column_fixed_right,
+.bk-table .bk-table-body table th.column_fixed.column_fixed_right,
+.bk-table .bk-table-head table td.column_fixed.column_fixed_right,
+.bk-table .bk-table-body table td.column_fixed.column_fixed_right {
+  right: 0;
+}
 .bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
+  font-weight: 400;
   color: #313238;
   background-color: #fafbfd;
 }
@@ -342,9 +373,13 @@
 .bk-table .bk-table-body table thead th:hover {
   background: #f0f1f5;
 }
+.bk-table .bk-table-head table thead th.column_fixed,
+.bk-table .bk-table-body table thead th.column_fixed {
+  transform: translateX(var(--scroll-left));
+}
 .bk-table .bk-table-head table tbody tr td .cell,
 .bk-table .bk-table-body table tbody tr td .cell {
-  display: inline-block;
+  display: block;
   width: 100%;
 }
 .bk-table .bk-table-head table tbody tr:hover td:not(.empty-cell),
@@ -353,6 +388,10 @@
 }
 .bk-table .bk-table-head {
   position: relative;
+  transform: translateX(var(--scroll-head-left));
+}
+.bk-table .bk-table-head .table-head-settings {
+  display: block;
 }
 .bk-table .bk-table-head .table-head-settings .bk-popover-reference {
   position: absolute;
@@ -404,7 +443,26 @@
   border-left: none;
 }
 .bk-table .bk-table-fixed {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
+  pointer-events: none;
+}
+.bk-table .bk-table-fixed .column_fixed {
+  position: absolute;
+}
+.bk-table .bk-table-fixed .column_fixed.column_fixed_left {
+  top: 0;
+  left: 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
+}
+.bk-table .bk-table-fixed .column_fixed.column_fixed_right {
+  top: 0;
+  right: 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
 }
 .bk-table colgroup col {
   background: white;

package/lib/table/use-common.d.ts

@@ -1,5 +1,5 @@
 import { TablePropTypes } from './props';
-export declare const useClass: (props: TablePropTypes, root?: any) => {
+export declare const useClass: (props: TablePropTypes, root?: any, reactiveProp?: any) => {
     tableClass: import("vue").ComputedRef<string>;
     headClass: string;
     contentClass: string;
@@ -13,8 +13,10 @@ export declare const useClass: (props: TablePropTypes, root?: any) => {
         'min-height': string;
         height: string;
     }>;
-    headStyle: {
+    headStyle: import("vue").ComputedRef<{
         '--row-height': string;
-    };
+        '--scroll-head-left': string;
+        '--scroll-left': string;
+    }>;
     resetTableHeight: (rootEl: HTMLElement) => void;
 };

package/lib/table/utils.d.ts

@@ -34,6 +34,16 @@ export declare const resolveNumberOrStringToPix: (val: string | number, defaultV
  * @returns
  */
 export declare const resolvePropBorderToClassStr: (val: string | string[]) => string;
+/**
+ * 获取当前列实际宽度
+ * width props中设置的默认宽度
+ * calcWidth 计算后的宽度
+ * resizeWidth 拖拽重置之后的宽度
+ * @param colmun 当前列配置
+ * @param orders 获取宽度顺序
+ * @returns
+ */
+export declare const getColumnReactWidth: (colmun: GroupColumn, orders?: string[]) => any;
 /**
  * 根据Props Column配置计算并设置列宽度
  * @param root 当前根元素

package/lib/tag/index.d.ts

@@ -57,7 +57,7 @@ declare const BkTag: {
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
-        $emit: (event: "close" | "change", ...args: any[]) => void;
+        $emit: (event: "change" | "close", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             theme: import("vue-types").VueTypeDef<string> & {
@@ -101,7 +101,7 @@ declare const BkTag: {
             }>;
             handleClose: (e: Event) => void;
             handleClick: (e: Event) => void;
-        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "change")[], string, {
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], string, {
             type: string;
             theme: string;
             closable: boolean;
@@ -217,7 +217,7 @@ declare const BkTag: {
     }>;
     handleClose: (e: Event) => void;
     handleClick: (e: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "change")[], "close" | "change", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], "change" | "close", {
     type: string;
     theme: string;
     closable: boolean;

package/lib/tag/tag.d.ts

@@ -37,7 +37,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     handleClose: (e: Event) => void;
     handleClick: (e: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "change")[], "close" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], "change" | "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     theme: import("vue-types").VueTypeDef<string> & {
         default: string;
     };

package/lib/tag/tag.variable.css

@@ -9,6 +9,7 @@
   --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
+  --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
@@ -91,6 +92,10 @@
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #eaf3ff;
+  --cascader-panel-active: #f4f6fa;
+  --cascader-panel-disabled-bg: #fff;
 }
 .bk-tag {
   display: inline-flex;