bkui-vue 0.0.3-beta.2-8 → 0.0.3-beta.2-10

package/lib/table/index.js

@@ -4392,14 +4392,21 @@ const external_directives_namespaceObject = external_directives_x({ ["bkEllipsis
     });
     var resolveSetting = function resolveSetting() {
       if (/boolean|object/.test(typeof_typeof(props.column.showOverflowTooltip)) && props.column.showOverflowTooltip !== null) {
+        var _props$column$showOve = props.column.showOverflowTooltip,
+          _props$column$showOve2 = _props$column$showOve.content,
+          content = _props$column$showOve2 === void 0 ? '' : _props$column$showOve2,
+          _props$column$showOve3 = _props$column$showOve.mode,
+          mode = _props$column$showOve3 === void 0 ? undefined : _props$column$showOve3,
+          _props$column$showOve4 = _props$column$showOve.popoverOption,
+          popoverOption = _props$column$showOve4 === void 0 ? {} : _props$column$showOve4;
         var result = {
           showOverflowTooltip: {
-            content: '',
+            content: content,
             disabled: !props.column.showOverflowTooltip,
-            mode: undefined,
+            mode: mode,
             resizerWay: undefined,
             watchCellResize: undefined,
-            popoverOption: {}
+            popoverOption: popoverOption
           }
         };
         if (props.parentSetting !== null && typeof_typeof(props.parentSetting) === 'object') {
@@ -4417,11 +4424,11 @@ const external_directives_namespaceObject = external_directives_x({ ["bkEllipsis
         showOverflowTooltip: props.parentSetting
       };
     };
-    var _resolveSetting = resolveSetting(),
-      _resolveSetting$showO = _resolveSetting.showOverflowTooltip,
-      showOverflowTooltip = _resolveSetting$showO === void 0 ? false : _resolveSetting$showO;
     var bkEllipsisIns = null;
     var resolveTooltipOption = function resolveTooltipOption() {
+      var _resolveSetting = resolveSetting(),
+        _resolveSetting$showO = _resolveSetting.showOverflowTooltip,
+        showOverflowTooltip = _resolveSetting$showO === void 0 ? false : _resolveSetting$showO;
       var disabled = true;
       var resizerWay = props.resizerWay;
       var content = function content() {
@@ -4464,8 +4471,8 @@ const external_directives_namespaceObject = external_directives_x({ ["bkEllipsis
         }
       }
       if (props.isHead) {
-        var _props$column$showOve, _props$column;
-        disabled = !((_props$column$showOve = (_props$column = props.column) === null || _props$column === void 0 || (_props$column = _props$column.showOverflowTooltip) === null || _props$column === void 0 ? void 0 : _props$column.showHead) !== null && _props$column$showOve !== void 0 ? _props$column$showOve : true);
+        var _props$column$showOve5, _props$column;
+        disabled = !((_props$column$showOve5 = (_props$column = props.column) === null || _props$column === void 0 || (_props$column = _props$column.showOverflowTooltip) === null || _props$column === void 0 ? void 0 : _props$column.showHead) !== null && _props$column$showOve5 !== void 0 ? _props$column$showOve5 : true);
         mode = 'auto';
         content = function content() {
           var _getEllipsisTarget;
@@ -5004,6 +5011,31 @@ function _isSlot(s) {
   if (!props.rowDraggable) {
     return {};
   }
+  var placeDiv = document.createElement('div');
+  placeDiv.style.setProperty('height', '20px');
+  placeDiv.style.setProperty('width', '100%');
+  placeDiv.style.setProperty('background', '#E2EDFF');
+  placeDiv.style.setProperty('cursor', 'move');
+  ['dragenter', 'dragover'].forEach(function (type) {
+    placeDiv.addEventListener(type, function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = 'move';
+    });
+  });
+  var lastDragRow = null;
+  var lastDragRowClass = '';
+  var insertPlaceDiv = function insertPlaceDiv(target, placement) {
+    if (placement === '--top') {
+      target.parentNode.insertBefore(placeDiv, target);
+      return;
+    }
+    if (target.nextElementSibling === null) {
+      target.parentNode.append(placeDiv);
+      return;
+    }
+    target.parentNode.insertBefore(placeDiv, target.nextElementSibling);
+  };
   var beforeEventFire = function beforeEventFire(fn) {
     if (props.rowDraggable) {
       fn === null || fn === void 0 || fn();
@@ -5017,9 +5049,10 @@ function _isSlot(s) {
     var _target$getBoundingCl = target.getBoundingClientRect(),
       top = _target$getBoundingCl.top,
       bottom = _target$getBoundingCl.bottom;
-    var position = y - top > bottom - y ? '--bottom' : '--top';
+    var placement = y - top > bottom - y ? '--bottom' : '--top';
     removeDragClass(target);
-    target.classList.add(position);
+    target.classList.add(placement);
+    insertPlaceDiv(target, placement);
   };
   var removeDragClass = function removeDragClass(target) {
     var classList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['--bottom', '--top'];
@@ -5030,45 +5063,59 @@ function _isSlot(s) {
   var onDragstart = function onDragstart(event) {
     beforeEventFire(function () {
       var target = getTargetRow(event);
+      placeDiv.style.setProperty('height', "".concat(target.offsetHeight, "px"));
+      placeDiv.style.setProperty('width', "".concat(target.offsetWidth, "px"));
       target.classList.add('--drag-start');
+      event.dataTransfer.setDragImage(target, 0, 0);
       event.dataTransfer.setData('text/plain', null);
-      event.dataTransfer.dropEffect = 'copy';
+      event.dataTransfer.dropEffect = 'move';
       var rowIndex = event.target.dataset.rowIndex;
       event.dataTransfer.setData('data-row-index', rowIndex);
     });
   };
   var onDragenter = function onDragenter(event) {
+    var target = getTargetRow(event);
+    event.preventDefault();
+    event.stopPropagation();
     beforeEventFire(function () {
       event.dataTransfer.dropEffect = 'move';
-      var target = getTargetRow(event);
       target.classList.add('--drag-enter');
       setTargetRowPlacement(target, event);
+      lastDragRow = target;
     });
   };
   var onDragleave = function onDragleave(event) {
     beforeEventFire(function () {
       var target = getTargetRow(event);
+      lastDragRowClass = target.classList.contains('--bottom') ? '--bottom' : '--top';
       removeDragClass(target, ['--drag-enter', '--bottom', '--top']);
     });
   };
   var onDragover = function onDragover(event) {
     event.preventDefault();
+    event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
     var target = getTargetRow(event);
     setTargetRowPlacement(target, event);
   };
-  var onDrop = function onDrop(event) {
+  var onDragend = function onDragend(event) {
+    var _event$target$dataset;
     event.preventDefault();
     event.stopPropagation();
-    var target = getTargetRow(event);
+    placeDiv.remove();
+    if (!lastDragRow) {
+      return;
+    }
+    var target = lastDragRow;
     var rowIndex = target.dataset.rowIndex;
     var targetIndex = Number(rowIndex);
-    var sourceIndex = event.dataTransfer.getData('data-row-index');
-    if (target.classList.contains('--bottom')) {
+    var sourceIndex = (_event$target$dataset = event.target.dataset) === null || _event$target$dataset === void 0 ? void 0 : _event$target$dataset.rowIndex;
+    if (lastDragRowClass === '--bottom') {
       targetIndex = targetIndex + 1;
     }
     resp.changePageRowIndex(Number(sourceIndex), targetIndex);
-    removeDragClass(target, ['--drag-enter', '--bottom', '--top']);
+    lastDragRow = null;
+    lastDragRowClass = '';
     ctx.emit(EMIT_EVENTS.DRAG_END, {
       sourceEvent: event,
       data: resp.pageData
@@ -5079,7 +5126,7 @@ function _isSlot(s) {
     onDragleave: onDragleave,
     onDragstart: onDragstart,
     onDragover: onDragover,
-    onDrop: onDrop
+    onDragend: onDragend
   };
 });
 ;// CONCATENATED MODULE: external "../input"

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

@@ -6,12 +6,12 @@ declare const _default: (props: TablePropTypes, resp: ITableResponse, ctx: Setup
     onDragleave?: undefined;
     onDragstart?: undefined;
     onDragover?: undefined;
-    onDrop?: undefined;
+    onDragend?: undefined;
 } | {
     onDragenter: (event: DragEvent) => void;
     onDragleave: (event: DragEvent) => void;
     onDragstart: (event: DragEvent) => void;
     onDragover: (event: DragEvent) => void;
-    onDrop: (event: DragEvent) => void;
+    onDragend: (event: DragEvent) => void;
 };
 export default _default;

package/lib/table/props.d.ts

@@ -43,7 +43,7 @@ export declare enum FixedEnum {
     RIGHT = "right"
 }
 export declare const fixedType: import("vue-types").VueTypeValidableDef<"right" | "left">;
-export type IOverflowTooltipProp = {
+export type IOverflowTooltipOption = {
     content: string | Function;
     disabled?: (col: Column, row: any) => boolean | boolean;
     watchCellResize?: boolean;
@@ -51,7 +51,8 @@ export type IOverflowTooltipProp = {
     popoverOption?: any;
     resizerWay?: ResizerWay;
     showHead?: boolean;
-} | boolean;
+};
+export type IOverflowTooltipProp = IOverflowTooltipOption | boolean;
 export type IOverflowTooltip = IOverflowTooltipProp;
 export declare const IOverflowTooltipPropType: import("vue-types").VueTypeDef<IOverflowTooltipProp>;
 export type ISortOption = {

package/lib/table/table.css

@@ -1285,17 +1285,9 @@
 .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 table tbody tr.--drag-start td,
+.bk-table .bk-table-body table tbody tr.--drag-start td {
+  background: #fff !important;
 }
 .bk-table .bk-table-head {
   position: relative;

package/lib/table/table.less

@@ -313,18 +313,21 @@
             }
           }
 
-          &.--drag-enter {
-            &.--bottom {
-              border-bottom: solid 1px #3785ff;
-            }
+          // &.--drag-enter {
+          //   &.--bottom {
+          //     border-bottom: solid 1px #3785ff;
+          //   }
 
-            &.--top {
-              border-top: solid 1px #3785ff;
-            }
-          }
+          //   &.--top {
+          //     border-top: solid 1px #3785ff;
+          //   }
+          // }
 
           &.--drag-start {
-            background: #fff;
+
+            td {
+              background: #fff!important;
+            }
           }
         }
       }

package/lib/table/table.variable.css

@@ -1411,17 +1411,9 @@
 .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 table tbody tr.--drag-start td,
+.bk-table .bk-table-body table tbody tr.--drag-start td {
+  background: #fff !important;
 }
 .bk-table .bk-table-head {
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "0.0.3-beta.2-8",
+  "version": "0.0.3-beta.2-10",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",