bkui-vue 0.0.3-beta.1 → 0.0.3-beta.3

package/lib/table/index.js

@@ -614,7 +614,11 @@ var tableProps = {
   /**
    * 是否采用flex布局表格
    */
-  isFlex: external_shared_namespaceObject.PropTypes.bool.def(true)
+  isFlex: external_shared_namespaceObject.PropTypes.bool.def(true),
+  /**
+   * 是否支持行拖拽排序
+   */
+  rowDraggable: external_shared_namespaceObject.PropTypes.oneOfType([external_shared_namespaceObject.PropTypes.func, external_shared_namespaceObject.PropTypes.bool, external_shared_namespaceObject.PropTypes.object]).def(false)
 };
 ;// CONCATENATED MODULE: ../../packages/table/src/components/table-column.tsx
 
@@ -916,6 +920,7 @@ var EMIT_EVENTS;
   EMIT_EVENTS["CELL_DBL_CLICK"] = "cellDblclick";
   EMIT_EVENTS["NATIVE_CLICK"] = "click";
   EMIT_EVENTS["NATIVE_DBL_CLICK"] = "dblclick";
+  EMIT_EVENTS["DRAG_END"] = "dragend";
 })(EMIT_EVENTS || (EMIT_EVENTS = {}));
 var EVENT_COL_PICK = function EVENT_COL_PICK(_cols) {
   return true;
@@ -956,7 +961,10 @@ var EVENT_CELL_FN = function EVENT_CELL_FN(_args) {
 var EVENT_SCROLL_FN = function EVENT_SCROLL_FN(_args) {
   return true;
 };
-var EMIT_EVENT_TYPES = (_EMIT_EVENT_TYPES = {}, defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.COLUMN_PICK, EVENT_COL_PICK), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.COLUMN_FILTER, EVENT_COL_FILTER), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.COLUMN_SORT, EVENT_COL_SORT), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.COLUMN_FILTER_SAVE, EVENT_COL_FILTER_SAVE), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_CLICK, EVENT_MOUSE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_DBL_CLICK, EVENT_MOUSE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_EXPAND_CLICK, EVENT_EXPAND_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_SELECT, EVENT_ROW_SELECT_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_SELECT_ALL, EVENT_ROW_SELECT_ALL_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_SELECT_CHANGE, EVENT_ROW_SELECT_CHANGE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.PAGE_LIMIT_CHANGE, EVENT_PAGE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.PAGE_VALUE_CHANGE, EVENT_PAGE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.SETTING_CHANGE, EVENT_SETTING_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.SCROLL_BOTTOM, EVENT_SCROLL_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.CELL_CLICK, EVENT_CELL_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.CELL_DBL_CLICK, EVENT_CELL_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_MOUSE_ENTER, EVENT_MOUSE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_MOUSE_LEAVE, EVENT_MOUSE_FN), _EMIT_EVENT_TYPES);
+var EVENT_DRAGEND_FN = function EVENT_DRAGEND_FN(_args) {
+  return true;
+};
+var EMIT_EVENT_TYPES = (_EMIT_EVENT_TYPES = {}, defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.COLUMN_PICK, EVENT_COL_PICK), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.COLUMN_FILTER, EVENT_COL_FILTER), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.COLUMN_SORT, EVENT_COL_SORT), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.COLUMN_FILTER_SAVE, EVENT_COL_FILTER_SAVE), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_CLICK, EVENT_MOUSE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_DBL_CLICK, EVENT_MOUSE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_EXPAND_CLICK, EVENT_EXPAND_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_SELECT, EVENT_ROW_SELECT_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_SELECT_ALL, EVENT_ROW_SELECT_ALL_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_SELECT_CHANGE, EVENT_ROW_SELECT_CHANGE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.PAGE_LIMIT_CHANGE, EVENT_PAGE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.PAGE_VALUE_CHANGE, EVENT_PAGE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.SETTING_CHANGE, EVENT_SETTING_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.SCROLL_BOTTOM, EVENT_SCROLL_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.CELL_CLICK, EVENT_CELL_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.CELL_DBL_CLICK, EVENT_CELL_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_MOUSE_ENTER, EVENT_MOUSE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.ROW_MOUSE_LEAVE, EVENT_MOUSE_FN), defineProperty_defineProperty(_EMIT_EVENT_TYPES, EMIT_EVENTS.DRAG_END, EVENT_DRAGEND_FN), _EMIT_EVENT_TYPES);
 var CELL_EVENT_TYPES = (_CELL_EVENT_TYPES = {}, defineProperty_defineProperty(_CELL_EVENT_TYPES, EMIT_EVENTS.NATIVE_CLICK, EVENT_MOUSE_FN), defineProperty_defineProperty(_CELL_EVENT_TYPES, EMIT_EVENTS.NATIVE_DBL_CLICK, EVENT_MOUSE_FN), _CELL_EVENT_TYPES);
 ;// CONCATENATED MODULE: external "lodash/isElement"
 var isElement_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
@@ -3193,7 +3201,9 @@ function use_attributes_objectSpread(target) { for (var i = 1; i < arguments.len
 
 
 
+
 /* harmony default export */ const use_attributes = (function (props) {
+  var t = (0,external_config_provider_namespaceObject.useLocale)('table');
   var getDefaultSettings = function getDefaultSettings() {
     var _ref, _SETTING_SIZE$size;
     var _props$settings = props.settings,
@@ -3265,6 +3275,17 @@ function use_attributes_objectSpread(target) { for (var i = 1; i < arguments.len
     }
     return minWidth;
   };
+  var resolveDraggableColumn = function resolveDraggableColumn() {
+    if (props.rowDraggable) {
+      var _props$rowDraggable$w, _props$rowDraggable, _props$rowDraggable$l, _props$rowDraggable2;
+      formatData.columns.unshift({
+        minWidth: 50,
+        width: (_props$rowDraggable$w = (_props$rowDraggable = props.rowDraggable) === null || _props$rowDraggable === void 0 ? void 0 : _props$rowDraggable.width) !== null && _props$rowDraggable$w !== void 0 ? _props$rowDraggable$w : 60,
+        label: (_props$rowDraggable$l = (_props$rowDraggable2 = props.rowDraggable) === null || _props$rowDraggable2 === void 0 ? void 0 : _props$rowDraggable2.label) !== null && _props$rowDraggable$l !== void 0 ? _props$rowDraggable$l : t.value.sort,
+        type: 'drag'
+      });
+    }
+  };
   /**
    * Format columns
    * @param columns
@@ -3273,9 +3294,10 @@ function use_attributes_objectSpread(target) { for (var i = 1; i < arguments.len
     var _formatData$columns;
     formatData.columns.length = 0;
     (_formatData$columns = formatData.columns).push.apply(_formatData$columns, _toConsumableArray(columns));
+    resolveDraggableColumn();
     var skipColNum = 0;
     var needColSpan = neepColspanOrRowspan(['colspan']);
-    (columns || []).forEach(function (col, index) {
+    (formatData.columns || []).forEach(function (col, index) {
       var _Object$assign;
       var _ref4 = needColSpan ? getColumnSpanConfig(col, index, skipColNum) : {
           skipCol: false,
@@ -3788,6 +3810,12 @@ function use_attributes_objectSpread(target) { for (var i = 1; i < arguments.len
     });
     resolvePageDataBySortList(multiSortColumns);
   };
+  var changePageRowIndex = function changePageRowIndex(sourceIndex, targetIndex) {
+    var copy = pageData[sourceIndex];
+    pageData.splice(targetIndex, 0, copy);
+    var resolvedIndex = sourceIndex < targetIndex ? sourceIndex : sourceIndex + 1;
+    pageData.splice(resolvedIndex, 1);
+  };
   return {
     formatColumns: formatColumns,
     formatDataSchema: formatDataSchema,
@@ -3821,6 +3849,7 @@ function use_attributes_objectSpread(target) { for (var i = 1; i < arguments.len
     isCheckedAll: isCheckedAll,
     hasCheckedRow: hasCheckedRow,
     updateSettings: updateSettings,
+    changePageRowIndex: changePageRowIndex,
     pageData: pageData,
     localPagination: localPagination,
     formatData: formatData
@@ -4235,7 +4264,7 @@ const external_checkbox_namespaceObject = external_checkbox_x({ ["BkCheckboxGrou
 ;// CONCATENATED MODULE: external "../icon"
 var external_icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_icon_y = x => () => x
-const external_icon_namespaceObject = external_icon_x({ ["DownShape"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.DownShape, ["Funnel"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Funnel, ["RightShape"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.RightShape });
+const external_icon_namespaceObject = external_icon_x({ ["DownShape"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.DownShape, ["Funnel"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Funnel, ["GragFill"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.GragFill, ["RightShape"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.RightShape });
 ;// CONCATENATED MODULE: external "../pagination"
 var external_pagination_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_pagination_y = x => () => x
@@ -4885,6 +4914,115 @@ function _isSlot(s) {
     };
   }
 }));
+;// CONCATENATED MODULE: ../../packages/table/src/plugins/use-draggable.tsx
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* harmony default export */ const use_draggable = (function (props, resp, ctx) {
+  if (!props.rowDraggable) {
+    return {};
+  }
+  var beforeEventFire = function beforeEventFire(fn) {
+    if (props.rowDraggable) {
+      fn === null || fn === void 0 ? void 0 : fn();
+    }
+  };
+  var getTargetRow = function getTargetRow(event) {
+    return event.target.closest('tr');
+  };
+  var setTargetRowPlacement = function setTargetRowPlacement(target, event) {
+    var y = event.y;
+    var _target$getBoundingCl = target.getBoundingClientRect(),
+      top = _target$getBoundingCl.top,
+      bottom = _target$getBoundingCl.bottom;
+    var position = y - top > bottom - y ? '--bottom' : '--top';
+    removeDragClass(target);
+    target.classList.add(position);
+  };
+  var removeDragClass = function removeDragClass(target) {
+    var classList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['--bottom', '--top'];
+    classList.forEach(function (pos) {
+      return target.classList.remove(pos);
+    });
+  };
+  var onDragstart = function onDragstart(event) {
+    beforeEventFire(function () {
+      var target = getTargetRow(event);
+      target.classList.add('--drag-start');
+      event.dataTransfer.setData('text/plain', null);
+      event.dataTransfer.dropEffect = 'copy';
+      var rowIndex = event.target.dataset.rowIndex;
+      event.dataTransfer.setData('data-row-index', rowIndex);
+    });
+  };
+  var onDragenter = function onDragenter(event) {
+    beforeEventFire(function () {
+      event.dataTransfer.dropEffect = 'move';
+      var target = getTargetRow(event);
+      target.classList.add('--drag-enter');
+      setTargetRowPlacement(target, event);
+    });
+  };
+  var onDragleave = function onDragleave(event) {
+    beforeEventFire(function () {
+      var target = getTargetRow(event);
+      removeDragClass(target, ['--drag-enter', '--bottom', '--top']);
+    });
+  };
+  var onDragover = function onDragover(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    var target = getTargetRow(event);
+    setTargetRowPlacement(target, event);
+  };
+  var onDrop = function onDrop(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var target = getTargetRow(event);
+    var rowIndex = target.dataset.rowIndex;
+    var targetIndex = Number(rowIndex);
+    var sourceIndex = event.dataTransfer.getData('data-row-index');
+    if (target.classList.contains('--bottom')) {
+      targetIndex = targetIndex + 1;
+    }
+    resp.changePageRowIndex(Number(sourceIndex), targetIndex);
+    removeDragClass(target, ['--drag-enter', '--bottom', '--top']);
+    ctx.emit(EMIT_EVENTS.DRAG_END, {
+      sourceEvent: event,
+      data: resp.pageData
+    });
+  };
+  return {
+    onDragenter: onDragenter,
+    onDragleave: onDragleave,
+    onDragstart: onDragstart,
+    onDragover: onDragover,
+    onDrop: onDrop
+  };
+});
 ;// CONCATENATED MODULE: ../../packages/table/src/plugins/head-filter.tsx
 
 
@@ -5645,6 +5783,7 @@ function use_render_objectSpread(target) { for (var i = 1; i < arguments.length;
 
 
 
+
 function use_render_isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0,external_vue_namespaceObject.isVNode)(s);
 }
@@ -5788,20 +5927,6 @@ function use_render_isSlot(s) {
     };
     var _useFixedColumn = use_fixed_column(props, tableResp, head),
       resolveFixedColumnStyle = _useFixedColumn.resolveFixedColumnStyle;
-    // const getScrollFix = () => {
-    //   if (styleRef.value.hasScrollY) {
-    //     const fixStyle = {
-    //       width: `${SCROLLY_WIDTH + 2}px`,
-    //       right: '-1px',
-    //     };
-    //     return (
-    //       <th
-    //         style={fixStyle}
-    //         class='column_fixed'
-    //       ></th>
-    //     );
-    //   }
-    // };
     return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)("thead", {
       "style": rowStyle
     }, [(0,external_vue_namespaceObject.createVNode)(table_row, null, {
@@ -5871,6 +5996,7 @@ function use_render_isSlot(s) {
       skipRow: skipRow
     };
   };
+  var dragEvents = use_draggable(props, tableResp, context);
   /**
    * 渲染Table Body
    * @returns
@@ -5894,12 +6020,16 @@ function use_render_isSlot(s) {
       '--row-height': "".concat(getRowHeight(row, rowIndex), "px")
     }]);
     var rowClass = [].concat(_toConsumableArray(formatPropAsArray(props.rowClass, [row, rowIndex])), ["hover-".concat(props.rowHover), rowIndex % 2 === 1 && props.stripe ? 'stripe-row' : '']);
-    return [(0,external_vue_namespaceObject.createVNode)(table_row, null, {
+    var rowId = tableResp.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_UID);
+    return [(0,external_vue_namespaceObject.createVNode)(table_row, {
+      "key": rowId
+    }, {
       "default": function _default() {
-        return [(0,external_vue_namespaceObject.createVNode)("tr", {
+        return [(0,external_vue_namespaceObject.createVNode)("tr", (0,external_vue_namespaceObject.mergeProps)({
           "style": rowStyle,
           "class": rowClass,
           "key": getRowKeyNull(row, props, rowIndex),
+          "data-row-index": rowIndex,
           "onClick": function onClick(e) {
             return handleRowClick(e, row, rowIndex, rows);
           },
@@ -5911,8 +6041,9 @@ function use_render_isSlot(s) {
           },
           "onMouseleave": function onMouseleave(e) {
             return handleRowLeave(e, row, rowIndex, rows);
-          }
-        }, [filterColGroups.value.map(function (column, index) {
+          },
+          "draggable": !!props.rowDraggable
+        }, dragEvents), [filterColGroups.value.map(function (column, index) {
           var cellStyle = [resolveFixedColumnStyle(column)].concat(_toConsumableArray(formatPropAsArray(props.cellStyle, [column, index, row, rowIndex])));
           var _resolveCellSpan = resolveCellSpan(column, index, row, rowIndex),
             colspan = _resolveCellSpan.colspan,
@@ -6125,6 +6256,19 @@ function use_render_isSlot(s) {
       }
     }, [renderExpandSlot()]);
   };
+  var renderDraggableCell = function renderDraggableCell(row, column, index, rows) {
+    var _props$rowDraggable$r, _props$rowDraggable, _props$rowDraggable$f, _props$rowDraggable2, _props$rowDraggable$i, _props$rowDraggable3;
+    var renderFn = (_props$rowDraggable$r = (_props$rowDraggable = props.rowDraggable) === null || _props$rowDraggable === void 0 ? void 0 : _props$rowDraggable.render) !== null && _props$rowDraggable$r !== void 0 ? _props$rowDraggable$r : props.rowDraggable;
+    if (typeof renderFn === 'function') {
+      return renderFn(row, column, index, rows);
+    }
+    var fontSize = (_props$rowDraggable$f = (_props$rowDraggable2 = props.rowDraggable) === null || _props$rowDraggable2 === void 0 ? void 0 : _props$rowDraggable2.fontSize) !== null && _props$rowDraggable$f !== void 0 ? _props$rowDraggable$f : '14px';
+    var fontIcon = (_props$rowDraggable$i = (_props$rowDraggable3 = props.rowDraggable) === null || _props$rowDraggable3 === void 0 ? void 0 : _props$rowDraggable3.icon) !== null && _props$rowDraggable$i !== void 0 ? _props$rowDraggable$i : (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.GragFill, {
+      "class": "drag-cell",
+      "style": "'--font-size: ".concat(fontSize, ";'")
+    }, null);
+    return fontIcon;
+  };
   /**
    * 渲染表格Cell内容
    * @param row 当前行
@@ -6169,7 +6313,8 @@ function use_render_isSlot(s) {
       },
       selection: function selection(row, _column, index, _rows) {
         return renderCheckboxColumn(row, index);
-      }
+      },
+      drag: renderDraggableCell
     };
     return (_renderFn$column$type = (_renderFn$column$type2 = renderFn[column.type]) === null || _renderFn$column$type2 === void 0 ? void 0 : _renderFn$column$type2.call(renderFn, row, column, index, rows)) !== null && _renderFn$column$type !== void 0 ? _renderFn$column$type : defaultFn();
   };

package/lib/table/plugins/use-draggable.d.ts

@@ -0,0 +1,17 @@
+import { SetupContext } from 'vue';
+import { TablePropTypes } from '../props';
+import { ITableResponse } from '../use-attributes';
+declare const _default: (props: TablePropTypes, resp: ITableResponse, ctx: SetupContext<any>) => {
+    onDragenter?: undefined;
+    onDragleave?: undefined;
+    onDragstart?: undefined;
+    onDragover?: undefined;
+    onDrop?: undefined;
+} | {
+    onDragenter: (event: DragEvent) => void;
+    onDragleave: (event: DragEvent) => void;
+    onDragstart: (event: DragEvent) => void;
+    onDragover: (event: DragEvent) => void;
+    onDrop: (event: DragEvent) => void;
+};
+export default _default;

package/lib/table/props.d.ts

@@ -147,6 +147,13 @@ export type IColumnExplain = {
     content: LabelFunctionString;
     head: LabelFunctionString | boolean;
 } | boolean;
+export type IDraggableRowOption = {
+    label: (() => string) | string;
+    render?: () => HTMLElement | JSX.Element;
+    fontSize?: number;
+    icon?: JSX.Element;
+    width?: number;
+};
 export type Column = {
     label: LabelFunctionString;
     field?: LabelFunctionString;
@@ -535,5 +542,11 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 是否支持行拖拽排序
+     */
+    rowDraggable: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
 };
 export {};

package/lib/table/table.css

@@ -1109,6 +1109,13 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-table .bk-table-head table th .cell .drag-cell,
+.bk-table .bk-table-body table th .cell .drag-cell,
+.bk-table .bk-table-head table td .cell .drag-cell,
+.bk-table .bk-table-body table td .cell .drag-cell {
+  font-size: 14px;
+  height: 100%;
+}
 .bk-table .bk-table-head table th .cell.has-sort,
 .bk-table .bk-table-body table th .cell.has-sort,
 .bk-table .bk-table-head table td .cell.has-sort,
@@ -1267,10 +1274,27 @@
   box-sizing: border-box;
   align-items: center;
 }
+.bk-table .bk-table-head table tbody tr td .cell.drag,
+.bk-table .bk-table-body table tbody tr td .cell.drag {
+  cursor: move;
+  text-align: center;
+}
 .bk-table .bk-table-head table tbody tr:hover.hover-highlight td:not(.empty-cell),
 .bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
   background: #f5f7fa;
 }
+.bk-table .bk-table-head table tbody tr.--drag-enter.--bottom,
+.bk-table .bk-table-body table tbody tr.--drag-enter.--bottom {
+  border-bottom: solid 1px #3785ff;
+}
+.bk-table .bk-table-head table tbody tr.--drag-enter.--top,
+.bk-table .bk-table-body table tbody tr.--drag-enter.--top {
+  border-top: solid 1px #3785ff;
+}
+.bk-table .bk-table-head table tbody tr.--drag-start,
+.bk-table .bk-table-body table tbody tr.--drag-start {
+  background: #fff;
+}
 .bk-table .bk-table-head {
   position: relative;
   z-index: 2;

package/lib/table/table.d.ts

@@ -151,6 +151,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    rowDraggable: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     columnPick: (_cols: import("./props").IColumnActive[]) => boolean;
     columnFilter: (_args: {
@@ -230,6 +233,10 @@ declare const _default: import("vue").DefineComponent<{
     }) => boolean;
     rowMouseEnter: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => boolean;
     rowMouseLeave: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => boolean;
+    dragend: (_args: {
+        sourceEvent: DragEvent;
+        data: any[];
+    }) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: import("vue-types").VueTypeDef<any[]> & {
         default: () => any[];
@@ -382,7 +389,14 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    rowDraggable: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
 }>> & {
+    onDragend?: (_args: {
+        sourceEvent: DragEvent;
+        data: any[];
+    }) => any;
     onSelect?: (_args: {
         row: any;
         index: Number;
@@ -502,5 +516,6 @@ declare const _default: import("vue").DefineComponent<{
     observerResize: boolean;
     prependStyle: import("vue").CSSProperties;
     isFlex: boolean;
+    rowDraggable: any;
 }, {}>;
 export default _default;

package/lib/table/table.less

@@ -145,6 +145,11 @@
           text-overflow: ellipsis;
           white-space: nowrap;
 
+          .drag-cell {
+            font-size: 14px;
+            height: 100%;
+          }
+
           &.has-sort {
             cursor: pointer;
           }
@@ -288,6 +293,11 @@
               line-height: calc(var(--row-height) - 1px);
               box-sizing: border-box;
               align-items: center;
+
+              &.drag {
+                cursor: move;
+                text-align: center;
+              }
             }
           }
 
@@ -300,6 +310,20 @@
               }
             }
           }
+
+          &.--drag-enter {
+            &.--bottom {
+              border-bottom: solid 1px #3785ff;
+            }
+
+            &.--top {
+              border-top: solid 1px #3785ff;
+            }
+          }
+
+          &.--drag-start {
+            background: #fff;
+          }
         }
       }
     }

package/lib/table/table.variable.css

@@ -1235,6 +1235,13 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-table .bk-table-head table th .cell .drag-cell,
+.bk-table .bk-table-body table th .cell .drag-cell,
+.bk-table .bk-table-head table td .cell .drag-cell,
+.bk-table .bk-table-body table td .cell .drag-cell {
+  font-size: 14px;
+  height: 100%;
+}
 .bk-table .bk-table-head table th .cell.has-sort,
 .bk-table .bk-table-body table th .cell.has-sort,
 .bk-table .bk-table-head table td .cell.has-sort,
@@ -1393,10 +1400,27 @@
   box-sizing: border-box;
   align-items: center;
 }
+.bk-table .bk-table-head table tbody tr td .cell.drag,
+.bk-table .bk-table-body table tbody tr td .cell.drag {
+  cursor: move;
+  text-align: center;
+}
 .bk-table .bk-table-head table tbody tr:hover.hover-highlight td:not(.empty-cell),
 .bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
   background: #f5f7fa;
 }
+.bk-table .bk-table-head table tbody tr.--drag-enter.--bottom,
+.bk-table .bk-table-body table tbody tr.--drag-enter.--bottom {
+  border-bottom: solid 1px #3785ff;
+}
+.bk-table .bk-table-head table tbody tr.--drag-enter.--top,
+.bk-table .bk-table-body table tbody tr.--drag-enter.--top {
+  border-top: solid 1px #3785ff;
+}
+.bk-table .bk-table-head table tbody tr.--drag-start,
+.bk-table .bk-table-body table tbody tr.--drag-start {
+  background: #fff;
+}
 .bk-table .bk-table-head {
   position: relative;
   z-index: 2;

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

@@ -51,6 +51,7 @@ export type ITableResponse = {
     setRowSelectionAll: (val: boolean) => void;
     setRowIndeterminate: () => void;
     updateSettings: (settings?: Settings, rowHeight?: number) => void;
+    changePageRowIndex: (sourceIndex: number, targetIndex: number) => void;
     pageData: any[];
     localPagination: any;
     formatData: ITableFormatData;

package/lib/table-column/index.js

@@ -585,7 +585,11 @@ var tableProps = {
   /**
    * 是否采用flex布局表格
    */
-  isFlex: external_shared_namespaceObject.PropTypes.bool.def(true)
+  isFlex: external_shared_namespaceObject.PropTypes.bool.def(true),
+  /**
+   * 是否支持行拖拽排序
+   */
+  rowDraggable: external_shared_namespaceObject.PropTypes.oneOfType([external_shared_namespaceObject.PropTypes.func, external_shared_namespaceObject.PropTypes.bool, external_shared_namespaceObject.PropTypes.object]).def(false)
 };
 ;// CONCATENATED MODULE: ../../packages/table/src/components/table-column.tsx