bkui-vue 2.0.1-beta.40 → 2.0.1-beta.42

package/lib/table/table.variable.css

@@ -535,111 +535,118 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.bk-scrollbar-wrapper {
-  position: relative;
-  overflow: hidden;
+.bk-scrollbar {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  touch-action: auto;
+  /*
+ * Scrollbar rail styles
+ */
+  /*
+ * Scrollbar thumb styles
+ */
+}
+.bk-scrollbar.bk--active-x > .bk__rail-x,
+.bk-scrollbar.bk--active-y > .bk__rail-y {
+  display: block;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-content-el {
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
+.bk-scrollbar .bk__rail-x:hover,
+.bk-scrollbar .bk__rail-y:hover,
+.bk-scrollbar .bk__rail-x:focus,
+.bk-scrollbar .bk__rail-y:focus,
+.bk-scrollbar .bk__rail-x.bk--clicking,
+.bk-scrollbar .bk__rail-y.bk--clicking {
+  background-color: #f0f1f5;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track {
-  z-index: 1;
+.bk-scrollbar .bk__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  height: 10px;
+  bottom: 0px;
   position: absolute;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
-  width: 6px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
-  height: 6px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.bk-scrollbar .bk__rail-x.bk-size-small {
   height: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
-  background-color: #f0f1f5;
-  cursor: pointer;
+.bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
+  height: 6px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
-  background-color: #979ba5;
+.bk-scrollbar .bk__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  width: 10px;
+  right: 0px;
+  position: absolute;
+  margin-right: 2px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
-  top: 0;
+.bk-scrollbar .bk__rail-y.bk-size-small {
   width: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 10px;
+.bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
+  width: 6px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
-  left: 0;
+.bk-scrollbar:hover > .bk__rail-x,
+.bk-scrollbar:hover > .bk__rail-y,
+.bk-scrollbar.bk--focus > .bk__rail-x,
+.bk-scrollbar.bk--focus > .bk__rail-y,
+.bk-scrollbar.bk--scrolling-x > .bk__rail-x,
+.bk-scrollbar.bk--scrolling-y > .bk__rail-y {
+  opacity: 0.9;
+}
+.bk-scrollbar .bk__thumb-x {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
   height: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+  bottom: 0px;
+  position: absolute;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.bk-scrollbar .bk__thumb-y {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  width: 8px;
+  right: 0px;
+  position: absolute;
+}
+.bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
+.bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
+.bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
+  background-color: #979ba5;
   height: 10px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
-  right: auto;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  min-height: 0;
-  min-width: 8px;
-  width: auto;
+.bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
+.bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
+.bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
+  background-color: #979ba5;
+  width: 10px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-dragging {
-  pointer-events: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.bk-scrollbar .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
+  height: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+.bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
+.bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
+  width: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar::before {
-  position: absolute;
-  content: '';
-  background: #dcdee5;
-  border-radius: 6px;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  opacity: 0;
-  transition: opacity 0.2s 0.9s linear;
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }
-.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
-  opacity: 0.9;
-  transition-delay: 0s;
-  transition-duration: 0s;
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }
 .bk-virtual-render {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
 .bk-virtual-render .bk-virtual-section {
   width: 1px;
   background: transparent;
@@ -1641,7 +1648,7 @@
   overflow: hidden;
 }
 .bk-table .bk-table-body .prepend-row {
-  transform: translate3d(var(--translate-x), 0, 0);
+  transform: translate(var(--translate-x), 0);
 }
 .bk-table .bk-table-body .resize-column {
   position: absolute;
@@ -1650,7 +1657,7 @@
   left: 0;
   width: 1px;
   background-color: #3785ff;
-  transform: translate3d(var(--drag-offset-x), var(--translate-y), 0);
+  transform: translate(var(--drag-offset-x), var(--translate-y));
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
   background-color: var(--table-strip-color);
@@ -1819,23 +1826,29 @@
   font-weight: 400;
   background-color: var(--background-color);
 }
-.bk-table .bk-table-head table thead th.col-resize-hover::after,
-.bk-table .bk-table-body table thead th.col-resize-hover::after {
+.bk-table .bk-table-head table thead th.col-pointer-hover.poiner-right::after,
+.bk-table .bk-table-body table thead th.col-pointer-hover.poiner-right::after {
+  content: '';
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
-  z-index: 1;
-  width: 6px;
-  pointer-events: none;
+  right: 0;
+  width: 3px;
   background-color: #3785ff;
-  content: '';
-  transform: translateX(50%);
-  cursor: col-resize;
+  transform: translateX(1px);
+  pointer-events: none;
 }
-.bk-table .bk-table-head table thead th.col-resize-hover .cell,
-.bk-table .bk-table-body table thead th.col-resize-hover .cell {
-  cursor: col-resize;
+.bk-table .bk-table-head table thead th.col-pointer-hover.poiner-left::after,
+.bk-table .bk-table-body table thead th.col-pointer-hover.poiner-left::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 3px;
+  transform: translateX(-1px);
+  background-color: #3785ff;
+  pointer-events: none;
 }
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
@@ -1844,17 +1857,21 @@
   height: calc(var(--row-height) - 2px);
   color: var(--table-head-font-color);
 }
-.bk-table .bk-table-head table thead th.active,
-.bk-table .bk-table-body table thead th.active,
-.bk-table .bk-table-head table thead th:hover,
-.bk-table .bk-table-body table thead th:hover {
-  cursor: pointer;
-  background: var(--table-row-active-bg-color);
+.bk-table .bk-table-head table thead th .cell.cell-resize,
+.bk-table .bk-table-body table thead th .cell.cell-resize {
+  cursor: col-resize;
 }
 .bk-table .bk-table-head table thead th.column_fixed,
 .bk-table .bk-table-body table thead th.column_fixed {
   transform: translateX(var(--translate-x));
 }
+.bk-table .bk-table-head table:not(.col-resize-hover) thead th.active,
+.bk-table .bk-table-body table:not(.col-resize-hover) thead th.active,
+.bk-table .bk-table-head table:not(.col-resize-hover) thead th:hover,
+.bk-table .bk-table-body table:not(.col-resize-hover) thead th:hover {
+  cursor: pointer;
+  background: var(--table-row-active-bg-color);
+}
 .bk-table .bk-table-head table tbody tr td,
 .bk-table .bk-table-body table tbody tr td {
   background-color: #fff;
@@ -1894,6 +1911,7 @@
   overflow: hidden;
   background-color: var(--background-color);
   height: var(--row-height);
+  min-height: var(--row-height);
 }
 .bk-table .bk-table-head.has-group .is-head-group {
   border-bottom: 1px solid var(--table-border-color);
@@ -1912,16 +1930,14 @@
   z-index: 1;
   width: 6px;
   background-color: #3785ff;
-  transform: translate3d(var(--drag-offset-h-x), 0, 0);
-}
-.bk-table .bk-table-head .col-resize-drag:hover {
-  cursor: ew-resize !important;
+  transform: translate(var(--drag-offset-h-x), 0);
+  pointer-events: none;
 }
 .bk-table .bk-table-head .bk-table-fixed {
-  transform: translate3d(0, 0, 0);
+  transform: translate(0, 0);
 }
 .bk-table .bk-table-head thead {
-  transform: translate3d(var(--translate-x-1), 0, 0);
+  transform: translate(var(--translate-x-1), 0);
 }
 .bk-table .bk-table-head .table-head-settings {
   position: absolute;
@@ -1948,6 +1964,7 @@
   display: flex;
   width: 100%;
   height: var(--footer-height);
+  min-height: var(--footer-height);
   align-items: center;
   padding: 0 16px 0 22px;
 }
@@ -2018,7 +2035,7 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
-  transform: translate3d(var(--translate-x), var(--translate-y), 0);
+  transform: translate(var(--translate-x), var(--translate-y));
 }
 .bk-table .bk-table-fixed .column_fixed_right {
   box-shadow: var(--shadow-right);

package/lib/table/utils.d.ts

@@ -1,4 +1,4 @@
-import { Column, GroupColumn, ISortPropShape, TablePropTypes } from './props';
+import { Column, GroupColumn, ISortPropShape, ISortShape, TablePropTypes } from './props';
 /**
  * 解析Prop值 | 可能为多种类型 & 函数返回的场景
  * @param prop 当前Prop
@@ -80,24 +80,24 @@ export declare const resolveHeadConfig: (props: TablePropTypes) => {
  * @param index 当前行Index
  * @returns
  */
-export declare const getRowText: (row: any, key: string, format?: (() => boolean | number | string)[] | string[]) => any;
+export declare const getRowText: (row: Record<string, unknown>, key: string, format?: (() => boolean | number | string)[] | string[]) => any;
 /**
  * 获取当前行指定列的值
  * @param row 当前行
  * @param key 指定列名
  * @returns
  */
-export declare const getRowValue: (row: any, key: string) => any;
+export declare const getRowValue: (row: Record<string, unknown>, key: string) => unknown;
 /**
  * 格式化prop配置为标准数组格式
  * @param prop prop对象值
  * @param args 如果是function参数
  * @returns
  */
-export declare const formatPropAsArray: (prop: (() => any) | object | string, args: any[]) => any;
+export declare const formatPropAsArray: (prop: (() => unknown) | object | string, args: unknown[]) => any;
 export declare const isRenderScrollBottomLoading: (props: TablePropTypes) => boolean;
-export declare const getRowKey: (item: any, props: TablePropTypes, index: number) => any;
-export declare const getRowKeyNull: (item: any, props: TablePropTypes, index: number) => unknown;
+export declare const getRowKey: (item: Record<string, unknown>, props: TablePropTypes, index: number) => any;
+export declare const getRowKeyNull: (item: Record<string, unknown>, props: TablePropTypes, index: number) => unknown;
 export declare const hasRootScrollY: (root: any, querySelector: string, offsetHeight?: number) => boolean;
 export declare const getColumnClass: (column: Column, colIndex?: number, uuid?: string) => {
     column_fixed: boolean;
@@ -106,30 +106,30 @@ export declare const getColumnClass: (column: Column, colIndex?: number, uuid?:
 };
 export declare const getElementTextWidth: (element: HTMLElement, text?: string) => any;
 export declare const isColumnHidden: (settingFields: any, column: any, checked: any) => boolean;
-export declare const resolveColumnSpan: (column: Column, colIndex: number, row: any, rowIndex: number, key: string) => any;
-export declare const resolveCellSpan: (column: Column, colIndex: number, row: any, rowIndex: number) => {
+export declare const resolveColumnSpan: (column: Column, colIndex: number, row: Record<string, unknown>, rowIndex: number, key: string) => any;
+export declare const resolveCellSpan: (column: Column, colIndex: number, row: Record<string, unknown>, rowIndex: number) => {
     colspan: any;
     rowspan: any;
 };
-export declare const skipThisColumn: (columns: Column[], colIndex: number, row: any, rowIndex: number) => number | false;
-export declare const getSortFn: (column: any, sortType: any, format?: any[]) => ((_a: any, _b: any) => boolean) | ((_a: any, _b: any, index0: any, index1: any) => number);
+export declare const skipThisColumn: (columns: Column[], colIndex: number, row: Record<string, unknown>, rowIndex: number) => number | false;
+export declare const getSortFn: (column: any, sortType: any, format?: any[]) => ((_a: any, _b: any) => boolean) | ((a: Record<string, unknown>, b: Record<string, unknown>, index0: number, index1: number) => number);
 export declare const getNextSortType: (sortType: string) => string;
 export declare const resolveSort: (sort: ISortPropShape, column: any, format?: any[]) => ({
-    sortFn: ((_a: any, _b: any) => boolean) | ((_a: any, _b: any, index0: any, index1: any) => number);
-} & import("./props").ISortShape) | {
-    sortFn?: (...args: any[]) => boolean;
+    sortFn: ((_a: any, _b: any) => boolean) | ((a: Record<string, unknown>, b: Record<string, unknown>, index0: number, index1: number) => number);
+} & ISortShape) | {
+    sortFn?: (...args: any[]) => number;
     sortScope?: import("./props").SortScope;
     value: string;
 };
 export declare const isRowSelectEnable: (props: any, { row, index, isCheckAll }: {
-    row: any;
+    row: Record<string, unknown>;
     index?: number;
     isCheckAll?: boolean;
 }) => any;
 export declare const getRowId: (row: any, defVal: any, props: any) => any;
 export declare const resolveColumnSortProp: (col: Column, props: TablePropTypes) => {
     type: string;
-    fn: ((...args: any[]) => boolean) | ((((_a: any, _b: any) => boolean) | ((_a: any, _b: any, index0: any, index1: any) => number)) & ((...args: any[]) => boolean));
+    fn: ((...args: any[]) => number) | ((((_a: any, _b: any) => boolean) | ((a: Record<string, unknown>, b: Record<string, unknown>, index0: number, index1: number) => number)) & ((...args: any[]) => number));
     scope: import("./props").SortScope;
     active: boolean;
     enabled: boolean;

package/lib/table-column/index.js

@@ -17636,6 +17636,9 @@ var IColSortBehavior;
    */
   IColSortBehavior["interdependent"] = "interdependent";
 })(IColSortBehavior || (IColSortBehavior = {}));
+// export enum BkScrollBehavior {
+//   AUTO = 'auto',
+// };
 var tableProps = {
   /**
    * 渲染列表
@@ -17851,6 +17854,10 @@ var tableProps = {
    * 是否监表格尺寸变化而响应式重新计算渲染
    */
   observerResize: shared_namespaceObject.PropTypes.bool.def(true),
+  /**
+   * 是否使用IntersectionObserver监听表格Cell进如有可视区域再渲染
+   */
+  intersectionObserver: shared_namespaceObject.PropTypes.bool.def(false),
   // 对齐方式
   align: TableAlign,
   headerAlign: TableAlign,
@@ -17885,6 +17892,7 @@ var tableProps = {
    * 启用Scrollbar
    */
   scrollbar: shared_namespaceObject.PropTypes.bool.def(true),
+  // scrollbehavior: toType<`${ScrollBehavior}`>('ScrollBehavior', {
   /**
    * 固定在底部的配置项
    */

package/lib/tree/index.d.ts

@@ -295,6 +295,7 @@ declare const BkTree: {
         children: string;
         lineHeight: number;
         offsetLeft: number;
+        intersectionObserver: boolean | import("./props").IIntersectionObserver;
         nodeKey: string;
         indent: number;
         levelLine: any;
@@ -312,7 +313,6 @@ declare const BkTree: {
         nodeContentAction: any;
         keepSlotData: boolean;
         checkStrictly: boolean;
-        intersectionObserver: boolean | import("./props").IIntersectionObserver;
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -468,6 +468,7 @@ declare const BkTree: {
         children: string;
         lineHeight: number;
         offsetLeft: number;
+        intersectionObserver: boolean | import("./props").IIntersectionObserver;
         nodeKey: string;
         indent: number;
         levelLine: any;
@@ -485,7 +486,6 @@ declare const BkTree: {
         nodeContentAction: any;
         keepSlotData: boolean;
         checkStrictly: boolean;
-        intersectionObserver: boolean | import("./props").IIntersectionObserver;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -649,6 +649,7 @@ declare const BkTree: {
     children: string;
     lineHeight: number;
     offsetLeft: number;
+    intersectionObserver: boolean | import("./props").IIntersectionObserver;
     nodeKey: string;
     indent: number;
     levelLine: any;
@@ -666,6 +667,5 @@ declare const BkTree: {
     nodeContentAction: any;
     keepSlotData: boolean;
     checkStrictly: boolean;
-    intersectionObserver: boolean | import("./props").IIntersectionObserver;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]>;
 export default BkTree;