bkui-vue 2.0.1-beta.39 → 2.0.1-beta.39.table.2

package/lib/scrollbar/process-scroll-diff.d.ts

@@ -0,0 +1 @@
+export default function (i: any, axis: any, diff: any, useScrollingClass?: boolean, forceFireReachEvent?: boolean): void;

package/lib/scrollbar/update-geometry.d.ts

@@ -0,0 +1,8 @@
+import BkScrollbar from '.';
+export type Placement = {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+};
+export default function (i: BkScrollbar): void;

package/lib/styles/index.d.ts

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

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

@@ -37,8 +37,11 @@ declare const useColumns: (props: TablePropTypes) => {
     getColumnRefAttribute: (col: Column | IEmptyObject, attributeName: string) => any;
     getColumnCalcWidth: (column: Column) => any;
     getColumnWidth: (column: Column) => any;
+    getLeftColumnsWidth: (col: Column, includingSelf?: boolean) => number;
     getGroupAttribute: (group: Column) => IHeadGroup;
-    resolveEventListener: (col: Column) => Record<string, (...args: any[]) => void> & {
+    getPreColumn: (col: Column) => Column;
+    getColumnIndex: (col: Column) => number;
+    resolveEventListener: (col: Column, index: number) => Record<string, (...args: any[]) => void> & {
         [x: string]: (e: MouseEvent) => void;
     };
     setColumnIsHidden: (column: Column, value?: boolean) => void;

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

@@ -7,6 +7,7 @@ declare const _default: (props: TablePropTypes, ctx: any) => {
     renderFooter: (childrend?: any) => JSX.Element;
     renderFixedBottom: () => JSX.Element;
     setBodyHeight: (height: number) => void;
+    setVirtualBodyHeight: (height: number) => void;
     setFootHeight: (height: number) => void;
     setTranslateX: (val: number) => void;
     setDragOffsetX: (val: number) => void;

package/lib/table/index.js

@@ -17661,6 +17661,9 @@ var IColSortBehavior;
    */
   IColSortBehavior["interdependent"] = "interdependent";
 })(IColSortBehavior || (IColSortBehavior = {}));
+// export enum BkScrollBehavior {
+//   AUTO = 'auto',
+// };
 var tableProps = {
   /**
    * 渲染列表
@@ -17910,6 +17913,7 @@ var tableProps = {
    * 启用Scrollbar
    */
   scrollbar: shared_namespaceObject.PropTypes.bool.def(true),
+  // scrollbehavior: toType<`${ScrollBehavior}`>('ScrollBehavior', {
   /**
    * 固定在底部的配置项
    */
@@ -18126,13 +18130,14 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
 
 
 
-
 /* harmony default export */ const use_column_resize = (function (columns, _ref) {
   var afterResize = _ref.afterResize;
   var getColumnAttribute = columns.getColumnAttribute,
     getColumnOrderWidth = columns.getColumnOrderWidth,
     setColumnAttribute = columns.setColumnAttribute,
-    setNextColumnWidth = columns.setNextColumnWidth;
+    setNextColumnWidth = columns.setNextColumnWidth,
+    getPreColumn = columns.getPreColumn,
+    getLeftColumnsWidth = columns.getLeftColumnsWidth;
   var getColListener = function getColListener(col) {
     return getColumnAttribute(col, COLUMN_ATTRIBUTE.LISTENERS);
   };
@@ -18148,7 +18153,11 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
   var isDraging = false;
   var startX = 0;
   var dragColumn = null;
-  var dragStartOffsetX = 0;
+  var poinerPlacement = 'right';
+  var headTable = null;
+  var mouseMoveColumn = null;
+  var dragWidth = 0;
+  var cellCursorStore = new WeakMap();
   var dragOffsetX = (0,external_vue_namespaceObject.ref)(-1000);
   var ORDER_LIST = [COLUMN_ATTRIBUTE.WIDTH];
   var stopDefaultEvent = function stopDefaultEvent(e) {
@@ -18157,93 +18166,100 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
     e.preventDefault();
   };
   var handleMouseUp = function handleMouseUp(e) {
-    stopDefaultEvent(e);
     isMouseDown = false;
     isDraging = false;
-    var diff = e.clientX - startX;
-    var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
+    var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + dragWidth;
     var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
     var calcWidth = resolveWidth > minWidth ? resolveWidth : minWidth;
     setNextColumnWidth(dragColumn, calcWidth);
     setColumnAttribute(dragColumn, COLUMN_ATTRIBUTE.WIDTH, calcWidth);
     document.removeEventListener('mouseup', handleMouseUp);
-    document.removeEventListener('mousemove', handleMouseMove);
-    startX = 0;
     dragOffsetX.value = -1000;
-    dragColumn = null;
-    var target = e.target.closest('th');
-    removeCursor(target);
+    dragWidth = 0;
+    removeCursor(headTable);
     afterResize === null || afterResize === void 0 || afterResize();
+    headTable = null;
+    var target = e.target;
+    handleMouseoutDragSection(target);
+    dragColumn = null;
   };
-  var updateOffsetX = function updateOffsetX(e) {
-    return (0,shared_namespaceObject.throttle)(function () {
-      var diff = e.clientX - startX;
-      var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
-      var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
-      if (minWidth < resolveWidth) {
-        dragOffsetX.value = e.clientX - startX + dragStartOffsetX;
-      }
-    });
-  };
-  var handleMouseMove = function handleMouseMove(e) {
+  var handleMouseDragMove = function handleMouseDragMove(e) {
+    document.body.style.setProperty('user-select', 'none');
     stopDefaultEvent(e);
-    updateOffsetX(e)();
+    var diff = e.clientX - startX;
+    dragWidth = dragWidth + diff;
+    startX = e.clientX;
+    var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
+    var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
+    if (minWidth < resolveWidth) {
+      dragOffsetX.value = dragOffsetX.value + diff;
+    }
   };
   var setNodeCursor = function () {
     return (0,lodash.debounce)(function (target) {
-      var _target$style;
-      target === null || target === void 0 || (_target$style = target.style) === null || _target$style === void 0 || _target$style.setProperty('cursor', 'col-resize');
+      document.body.style.setProperty('user-select', 'none');
       target === null || target === void 0 || target.classList.add('col-resize-hover');
     });
   }();
   var removeCursor = function removeCursor(target) {
-    var _target$style2;
     setNodeCursor.cancel();
-    target === null || target === void 0 || (_target$style2 = target.style) === null || _target$style2 === void 0 || _target$style2.removeProperty('cursor');
+    document.body.style.removeProperty('user-select');
     target === null || target === void 0 || target.classList.remove('col-resize-hover');
   };
-  var handler = defineProperty_defineProperty(defineProperty_defineProperty(defineProperty_defineProperty({}, EVENTS.MOUSE_DOWN, function (e, column) {
+  var handlemouseDownEvent = function handlemouseDownEvent(e) {
     if (!isInDragSection) {
       return;
     }
-    isMouseDown = true;
-    var target = e.target.closest('th');
+    startX = e.clientX;
+    var column = poinerPlacement === 'left' ? getPreColumn(mouseMoveColumn) : mouseMoveColumn;
     setColumnAttribute(column, COLUMN_ATTRIBUTE.COL_IS_DRAG, true);
-    setNodeCursor(target);
     dragColumn = column;
-    startX = e.clientX;
-    var targetTable = e.target.closest('table');
-    dragStartOffsetX = startX - targetTable.getBoundingClientRect().left;
-    updateOffsetX(e)();
-    document.addEventListener('mouseup', handleMouseUp);
-    document.addEventListener('mousemove', handleMouseMove);
-    target === null || target === void 0 || target.classList.remove('col-resize-hover');
-  }), EVENTS.MOUSE_MOVE, function (e, _column) {
-    if (isMouseDown && !isDraging) {
-      isDraging = true;
+    headTable = e.target.closest('table');
+    setNodeCursor(headTable);
+    isMouseDown = true;
+  };
+  var handleMouseoutDragSection = function handleMouseoutDragSection(target) {
+    if (!isDraging) {
+      dragOffsetX.value = -1000;
+      target.classList.remove('cell-resize');
+      cellCursorStore.set(target, false);
+      document.removeEventListener('mousedown', handlemouseDownEvent);
     }
-    var target = e.target.closest('th');
-    if (isDraging) {
-      target.style.setProperty('user-select', 'none');
+  };
+  var handler = defineProperty_defineProperty(defineProperty_defineProperty({}, EVENTS.MOUSE_MOVE, function (e, column, index) {
+    if (isMouseDown) {
+      isDraging = true;
+      handleMouseDragMove(e);
+      return;
     }
+    var target = e.target;
     if (!isDraging) {
       if (!target) {
         return;
       }
-      var rect = target.getBoundingClientRect();
-      if (rect.width > 12 && rect.right - e.pageX < 12) {
+      var offsetWidth = target.offsetWidth;
+      var mouseOffsetX = e.offsetX;
+      if (offsetWidth > 12 && (offsetWidth - mouseOffsetX < 8 || mouseOffsetX < 8 && index > 0)) {
         isInDragSection = true;
-        setNodeCursor(target);
+        poinerPlacement = mouseOffsetX < 8 ? 'left' : 'right';
+        if (!cellCursorStore.get(target)) {
+          cellCursorStore.set(target, true);
+          target.classList.add('cell-resize');
+          var offsetLeft = getLeftColumnsWidth(column, poinerPlacement === 'right');
+          console.log('-set offset');
+          dragOffsetX.value = offsetLeft;
+          mouseMoveColumn = column;
+          document.addEventListener('mousedown', handlemouseDownEvent);
+          document.addEventListener('mouseup', handleMouseUp);
+        }
       } else {
-        removeCursor(target);
         isInDragSection = false;
+        handleMouseoutDragSection(target);
       }
     }
-  }), EVENTS.MOUSE_OUT, function (e, _column) {
-    var target = e.target.closest('th');
-    if (!isDraging) {
-      removeCursor(target);
-    }
+  }), EVENTS.MOUSE_OUT, function (e, _column, _index) {
+    var target = e.target;
+    handleMouseoutDragSection(target);
   });
   var getEventName = function getEventName(event) {
     return "".concat(pluginName, "_").concat(event);
@@ -20238,7 +20254,7 @@ var useColumns = function useColumns(props) {
     }
     return minWidth;
   };
-  var resolveEventListener = function resolveEventListener(col) {
+  var resolveEventListener = function resolveEventListener(col, index) {
     var listeners = getColumnAttribute(col, COLUMN_ATTRIBUTE.LISTENERS);
     if (!listeners) {
       return {};
@@ -20247,7 +20263,7 @@ var useColumns = function useColumns(props) {
       var eventName = key.split('_').slice(-1)[0];
       return Object.assign(handle, defineProperty_defineProperty({}, eventName, function (e) {
         listeners.get(key).forEach(function (fn) {
-          return Reflect.apply(fn, use_columns_this, [e, col]);
+          return Reflect.apply(fn, use_columns_this, [e, col, index]);
         });
       }));
     }, {});
@@ -20621,6 +20637,35 @@ var useColumns = function useColumns(props) {
       setColumnAttribute(col, COLUMN_ATTRIBUTE.SELECTION_INDETERMINATE, false);
     }
   };
+  var getPreColumn = function getPreColumn(col) {
+    var index = visibleColumns.findIndex(function (item) {
+      return item === col;
+    });
+    var preIndex = index - 1;
+    return visibleColumns[preIndex];
+  };
+  var getColumnIndex = function getColumnIndex(col) {
+    return visibleColumns.findIndex(function (item) {
+      return item === col;
+    });
+  };
+  var getLeftColumnsWidth = function getLeftColumnsWidth(col) {
+    var includingSelf = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var isContinue = true;
+    var width = 0;
+    var index = 0;
+    while (isContinue) {
+      width = width + getColumnWidth(visibleColumns[index]);
+      index = index + 1;
+      if (col === visibleColumns[index]) {
+        if (includingSelf) {
+          width = width + getColumnWidth(visibleColumns[index]);
+        }
+        isContinue = false;
+      }
+    }
+    return width;
+  };
   return {
     needColSpan: needColSpan,
     needRowSpan: needRowSpan,
@@ -20648,7 +20693,10 @@ var useColumns = function useColumns(props) {
     getColumnRefAttribute: getColumnRefAttribute,
     getColumnCalcWidth: getColumnCalcWidth,
     getColumnWidth: getColumnWidth,
+    getLeftColumnsWidth: getLeftColumnsWidth,
     getGroupAttribute: getGroupAttribute,
+    getPreColumn: getPreColumn,
+    getColumnIndex: getColumnIndex,
     resolveEventListener: resolveEventListener,
     setColumnIsHidden: setColumnIsHidden,
     setColumnResizeWidth: setColumnResizeWidth,
@@ -21016,8 +21064,9 @@ const loading_less_namespaceObject = loading_less_x({  });
   var refScrollLoading = (0,external_vue_namespaceObject.toRef)(props, 'scrollLoading');
   var getLoadingOption = function getLoadingOption() {
     if (typeof refScrollLoading.value === 'boolean') {
+      var _props$fixedBottom$lo, _props$fixedBottom;
       return {
-        loading: !!refScrollLoading.value,
+        loading: !!refScrollLoading.value || ((_props$fixedBottom$lo = (_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.loading) !== null && _props$fixedBottom$lo !== void 0 ? _props$fixedBottom$lo : false),
         inline: true,
         title: '',
         size: loading_namespaceObject.BkLoadingSize.Normal,
@@ -21028,7 +21077,8 @@ const loading_less_namespaceObject = loading_less_x({  });
     return refScrollLoading.value;
   };
   var isRender = (0,external_vue_namespaceObject.computed)(function () {
-    return refScrollLoading.value !== null && (typeof refScrollLoading.value === 'boolean' && refScrollLoading.value || typeof_typeof(refScrollLoading.value) === 'object');
+    var _props$fixedBottom$lo2, _props$fixedBottom2;
+    return refScrollLoading.value !== null && (typeof refScrollLoading.value === 'boolean' && refScrollLoading.value || typeof_typeof(refScrollLoading.value) === 'object') || ((_props$fixedBottom$lo2 = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.loading) !== null && _props$fixedBottom$lo2 !== void 0 ? _props$fixedBottom$lo2 : false);
   });
   var renderScrollLoading = function renderScrollLoading() {
     var _ctx$slots$fixedBotto3, _ctx$slots$fixedBotto4, _ctx$slots2;
@@ -21114,8 +21164,12 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var lineHeight = (0,external_vue_namespaceObject.ref)((_props$rowHeight = props.rowHeight) !== null && _props$rowHeight !== void 0 ? _props$rowHeight : LINE_HEIGHT);
   var headerRowCount = (0,external_vue_namespaceObject.ref)(1);
   var fixedBottomHeight = (0,external_vue_namespaceObject.computed)(function () {
-    var _props$fixedBottom, _props$fixedBottom$he, _props$fixedBottom2, _props$fixedBottom$he2, _props$fixedBottom3;
-    return ((_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.position) === 'relative' ? (_props$fixedBottom$he = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.height) !== null && _props$fixedBottom$he !== void 0 ? _props$fixedBottom$he : LINE_HEIGHT : (_props$fixedBottom$he2 = (_props$fixedBottom3 = props.fixedBottom) === null || _props$fixedBottom3 === void 0 ? void 0 : _props$fixedBottom3.height) !== null && _props$fixedBottom$he2 !== void 0 ? _props$fixedBottom$he2 : 0;
+    var _ctx$slots;
+    if ((_ctx$slots = ctx.slots) !== null && _ctx$slots !== void 0 && _ctx$slots.fixedBottom) {
+      var _props$fixedBottom, _props$fixedBottom$he, _props$fixedBottom2;
+      return ((_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.position) === 'relative' ? (_props$fixedBottom$he = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.height) !== null && _props$fixedBottom$he !== void 0 ? _props$fixedBottom$he : LINE_HEIGHT : 0;
+    }
+    return 0;
   });
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
@@ -21190,14 +21244,14 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     return (0,shared_namespaceObject.classes)(defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-footer'), true), 'is-hidden', footHeight.value === 0));
   });
   var renderContainer = function renderContainer(childrend) {
-    var _ctx$slots$default, _ctx$slots;
+    var _ctx$slots$default, _ctx$slots2;
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "ref": refRoot,
       "style": tableStyle.value,
       "class": tableClass.value
     }, [childrend, (0,external_vue_namespaceObject.createVNode)(ghost_body, null, {
       "default": function _default() {
-        return [(_ctx$slots$default = (_ctx$slots = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots)];
+        return [(_ctx$slots$default = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots2)];
       }
     })]);
   };
@@ -21240,6 +21294,9 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var setBodyHeight = function setBodyHeight(height) {
     bodyHeight.value = height - headHeight.value - fixedBottomHeight.value - footHeight.value;
   };
+  var setVirtualBodyHeight = function setVirtualBodyHeight(height) {
+    bodyHeight.value = height;
+  };
   var footHeight = (0,external_vue_namespaceObject.ref)(0);
   var footerStyle = (0,external_vue_namespaceObject.computed)(function () {
     return {
@@ -21299,11 +21356,11 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var fixedWrapperClass = resolveClassName('table-fixed');
   var fixedBottomRow = resolveClassName('table-fixed-bottom');
   var fixedBottomLoadingStyle = (0,external_vue_namespaceObject.computed)(function () {
-    var _props$fixedBottom$po, _props$fixedBottom4, _props$fixedBottom$he3, _props$fixedBottom5;
+    var _props$fixedBottom$po, _props$fixedBottom3, _props$fixedBottom$he2, _props$fixedBottom4;
     return {
       minHeight: "".concat(lineHeight.value, "px"),
-      position: (_props$fixedBottom$po = (_props$fixedBottom4 = props.fixedBottom) === null || _props$fixedBottom4 === void 0 ? void 0 : _props$fixedBottom4.position) !== null && _props$fixedBottom$po !== void 0 ? _props$fixedBottom$po : 'absolute',
-      height: (_props$fixedBottom$he3 = (_props$fixedBottom5 = props.fixedBottom) === null || _props$fixedBottom5 === void 0 ? void 0 : _props$fixedBottom5.height) !== null && _props$fixedBottom$he3 !== void 0 ? _props$fixedBottom$he3 : null
+      position: (_props$fixedBottom$po = (_props$fixedBottom3 = props.fixedBottom) === null || _props$fixedBottom3 === void 0 ? void 0 : _props$fixedBottom3.position) !== null && _props$fixedBottom$po !== void 0 ? _props$fixedBottom$po : 'absolute',
+      height: (_props$fixedBottom$he2 = (_props$fixedBottom4 = props.fixedBottom) === null || _props$fixedBottom4 === void 0 ? void 0 : _props$fixedBottom4.height) !== null && _props$fixedBottom$he2 !== void 0 ? _props$fixedBottom$he2 : null
     };
   });
   (0,external_vue_namespaceObject.onMounted)(function () {
@@ -21375,6 +21432,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     renderFooter: renderFooter,
     renderFixedBottom: renderFixedBottom,
     setBodyHeight: setBodyHeight,
+    setVirtualBodyHeight: setVirtualBodyHeight,
     setFootHeight: setFootHeight,
     setTranslateX: setTranslateX,
     setDragOffsetX: setDragOffsetX,
@@ -22913,7 +22971,7 @@ function use_head_isSlot(s) {
       "onClick": function onClick() {
         return handleColumnHeadClick();
       }
-    }, columns.resolveEventListener(column)), [renderHeadCell()]);
+    }, columns.resolveEventListener(column, index)), [renderHeadCell()]);
   };
   return {
     getTH: getTH
@@ -23129,6 +23187,22 @@ function use_render_isSlot(s) {
     }, [renderColgroup(), renderHeader()]);
   };
   /** **************************************** Rows Render ******************************* **/
+  var renderAppendLastRow = function renderAppendLastRow() {
+    if (ctx.slots.appendLastRow) {
+      var rowId = 'append-last-row';
+      return (0,external_vue_namespaceObject.createVNode)(table_row, {
+        "key": rowId
+      }, {
+        "default": function _default() {
+          return [(0,external_vue_namespaceObject.createVNode)("tr", {
+            "key": rowId
+          }, [(0,external_vue_namespaceObject.createVNode)("td", {
+            "colspan": columns.visibleColumns.length
+          }, [ctx.slots.appendLastRow()])])];
+        }
+      });
+    }
+  };
   /**
    * 渲染Table Body
    * @returns
@@ -23141,7 +23215,7 @@ function use_render_isSlot(s) {
       var result = getRowRender(row, rowIndex, preRow, dataList, rowSpanMap, needRowSpan);
       preRow = row;
       return result;
-    })]);
+    }), renderAppendLastRow()]);
   };
   var getRowHeight = function getRowHeight(row, rowIndex) {
     if (typeof props.rowHeight === 'function' || /^\d+/.test("".concat(props.rowHeight))) {