bkui-vue 2.0.1-beta.34.scrollbar.2 → 2.0.1-beta.35

package/lib/scrollbar/scrollbar.variable.css

@@ -388,113 +388,97 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-scrollbar {
-  overflow: hidden !important;
-  overflow-anchor: none;
-  touch-action: auto;
-  /*
- * Scrollbar rail styles
- */
-  /*
- * Scrollbar thumb styles
- */
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
 }
-.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 .bk__rail-x {
-  display: none;
-  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  height: 10px;
-  bottom: 0px;
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
   position: absolute;
-  margin-bottom: 2px;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-x.bk-size-small {
-  height: 8px;
-}
-.bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
-  height: 6px;
-}
-.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.track-small.bk-scrollbar-vertical {
+  width: 6px;
 }
-.bk-scrollbar .bk__rail-y.bk-size-small {
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
   width: 8px;
 }
-.bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
-  width: 6px;
-}
-.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-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
+  height: 6px;
 }
-.bk-scrollbar .bk__thumb-x {
-  background-color: #dcdee5;
-  border-radius: 8px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
   height: 8px;
-  bottom: 0px;
-  position: absolute;
 }
-.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-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
+  background-color: #f0f1f5;
+  cursor: pointer;
 }
-.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 {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
   background-color: #979ba5;
-  height: 10px;
 }
-.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;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  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-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
   height: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
 }
-.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-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+  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-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-wrapper .bk-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
-/* MS supports */
-@supports (-ms-overflow-style: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.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;
 }
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.9;
+  transition-delay: 0s;
+  transition-duration: 0s;
 }

package/lib/styles/index.d.ts

@@ -56,4 +56,3 @@ import '../pop-confirm/pop-confirm.less';
 import '../image/image.less';
 import '../image/image-viewer.less';
 import '../overflow-title/overflow-title.less';
-import '../scrollbar/scrollbar.less';

package/lib/table/hooks/use-pagination.d.ts

@@ -9,7 +9,7 @@ declare const usePagination: (props: TablePropTypes) => {
         layout: string[];
     };
     isShowPagination: import("vue").ComputedRef<boolean>;
-    setPagination: (option: Record<string, any>) => void;
+    setPagination: (option: Record<string, unknown>) => void;
     disabledPagination: (disable?: boolean) => void;
 };
 export type UsePagination = ReturnType<typeof usePagination>;

package/lib/table/index.js

@@ -21533,7 +21533,7 @@ var usePagination = function usePagination(props) {
    * 判定条件：启用了分页组件 & 分页总数 > 1
    */
   var isShowPagination = (0,external_vue_namespaceObject.computed)(function () {
-    return pagination.enabled;
+    return pagination.enabled && pagination.count > 0;
   });
   return {
     options: pagination,
@@ -21956,6 +21956,7 @@ const icon_namespaceObject = icon_x({ ["DownShape"]: () => __WEBPACK_EXTERNAL_MO
 
 
 
+
 /* harmony default export */ const use_cell = (function (_ref) {
   var props = _ref.props,
     rows = _ref.rows,
@@ -22075,18 +22076,22 @@ const icon_namespaceObject = icon_x({ ["DownShape"]: () => __WEBPACK_EXTERNAL_MO
       if (typeof cell === 'boolean') {
         return String(cell);
       }
-      if (!cell && typeof cell !== 'number') {
+      if (typeof_typeof(cell) === 'object') {
+        return JSON.stringify((0,external_vue_namespaceObject.unref)(cell));
+      }
+      if ((0,lodash.isEmpty)(cell)) {
         var emptyCellText = props.emptyCellText;
         if (emptyCellText) {
           if (typeof emptyCellText === 'function') {
-            return emptyCellText(row, column, index, rows.tableRowList.value);
+            return emptyCellText({
+              row: row,
+              column: column,
+              index: index
+            });
           }
           return emptyCellText;
         }
       }
-      if (typeof_typeof(cell) === 'object') {
-        return JSON.stringify((0,external_vue_namespaceObject.unref)(cell));
-      }
       return cell;
     };
     var renderFn = {
@@ -22748,7 +22753,10 @@ function use_head_isSlot(s) {
   var cellFn = config.cellFn;
   var getHeadCellText = function getHeadCellText() {
     if (typeof cellFn === 'function') {
-      return cellFn(index);
+      return cellFn({
+        index: index,
+        column: column
+      });
     }
     if (typeof column.renderHead === 'function') {
       return column.renderHead({
@@ -24198,6 +24206,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       }
     };
     var setTableData = (0,lodash.debounce)(function () {
+      var resetScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       var filterOrderList = getFilterAndSortList();
       if (!props.remotePagination) {
         pagination.setPagination({
@@ -24207,9 +24216,11 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       var renderList = getRenderRowList(filterOrderList);
       rows.setPageRowList(renderList);
       (0,external_vue_namespaceObject.nextTick)(function () {
-        var _refBody$value2;
         setOffsetRight();
-        (_refBody$value2 = refBody.value) === null || _refBody$value2 === void 0 || _refBody$value2.scrollTo(0, 0);
+        if (resetScroll) {
+          var _refBody$value2;
+          (_refBody$value2 = refBody.value) === null || _refBody$value2 === void 0 || _refBody$value2.scrollTo(0, 0);
+        }
       });
     }, 64);
     var observerResizing = (0,external_vue_namespaceObject.ref)(false);
@@ -24282,7 +24293,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       return [props.data];
     }, function () {
       rows.setTableRowList(props.data);
-      setTableData();
+      setTableData(false);
     }, {
       immediate: true,
       deep: true

package/lib/table/props.d.ts

@@ -1,4 +1,4 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, VNode } from 'vue';
 import { IHeadColor, ROW_HOVER, SORT_OPTION } from './const';
 export declare enum SortScope {
     ALL = "all",
@@ -199,7 +199,10 @@ export declare const IColumnProp: import("vue-types").VueTypeDef<Column>;
 export type Thead = {
     height?: number;
     isShow?: boolean;
-    cellFn?: (...args: any[]) => void;
+    cellFn?: ({ index, column }: {
+        index: any;
+        column: any;
+    }) => JSX.Element | VNode | string;
     color?: IHeadColor | string;
 };
 export type Columns = ReadonlyArray<Column>;

package/lib/table/table.css

@@ -145,119 +145,111 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.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 {
+  position: relative;
+  overflow: hidden;
 }
-.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-content-el {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
 }
-.bk-scrollbar .bk__rail-x {
-  display: none;
-  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  height: 10px;
-  bottom: 0px;
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
   position: absolute;
-  margin-bottom: 2px;
-}
-.bk-scrollbar .bk__rail-x.bk-size-small {
-  height: 8px;
-}
-.bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
-  height: 6px;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
 }
-.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.track-small.bk-scrollbar-vertical {
+  width: 6px;
 }
-.bk-scrollbar .bk__rail-y.bk-size-small {
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
   width: 8px;
 }
-.bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
-  width: 6px;
-}
-.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-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
+  height: 6px;
 }
-.bk-scrollbar .bk__thumb-x {
-  background-color: #dcdee5;
-  border-radius: 8px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
   height: 8px;
-  bottom: 0px;
-  position: absolute;
 }
-.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-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
+  background-color: #f0f1f5;
+  cursor: pointer;
 }
-.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 {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
   background-color: #979ba5;
-  height: 10px;
 }
-.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;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  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-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
   height: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
 }
-.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-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+  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-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-wrapper .bk-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
-/* MS supports */
-@supports (-ms-overflow-style: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.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;
 }
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.9;
+  transition-delay: 0s;
+  transition-duration: 0s;
 }
 .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;
@@ -1583,6 +1575,9 @@
   border-right: 1px solid var(--table-border-color);
   border-left: 1px solid var(--table-border-color);
 }
+.bk-table.bordered-outer .bk-table-footer {
+  border-bottom: 1px solid var(--table-border-color);
+}
 .bk-table.bordered-horizontal {
   border-top: 1px solid var(--table-border-color);
   border-bottom: 1px solid var(--table-border-color);

package/lib/table/table.less

@@ -402,6 +402,10 @@
     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 {