vxe-pc-ui 3.3.35 → 3.3.37

package/lib/index.umd.js

@@ -10355,7 +10355,7 @@ __webpack_require__.d(__webpack_exports__, {
   GLOBAL_EVENT_KEYS: function() { return /* reexport */ GLOBAL_EVENT_KEYS; },
   Icon: function() { return /* reexport */ Icon; },
   IconPicker: function() { return /* reexport */ IconPicker; },
-  Image: function() { return /* reexport */ Image; },
+  Image: function() { return /* reexport */ image_Image; },
   ImageGroup: function() { return /* reexport */ ImageGroup; },
   ImagePreview: function() { return /* reexport */ ImagePreview; },
   Input: function() { return /* reexport */ Input; },
@@ -10564,7 +10564,7 @@ __webpack_require__.d(components_namespaceObject, {
   GLOBAL_EVENT_KEYS: function() { return GLOBAL_EVENT_KEYS; },
   Icon: function() { return Icon; },
   IconPicker: function() { return IconPicker; },
-  Image: function() { return Image; },
+  Image: function() { return image_Image; },
   ImageGroup: function() { return ImageGroup; },
   ImagePreview: function() { return ImagePreview; },
   Input: function() { return Input; },
@@ -12859,7 +12859,7 @@ function handleBooleanDefaultValue(value) {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-var log_version = "ui v".concat("3.3.35");
+var log_version = "ui v".concat("3.3.37");
 var warnLog = log.create('warn', log_version);
 var errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
@@ -12867,7 +12867,7 @@ var errLog = log.create('error', log_version);
 
 
 
-var ui_version = "3.3.35";
+var ui_version = "3.3.37";
 index_esm_VxeUI.version = ui_version;
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.tableVersion = '';
@@ -13534,6 +13534,7 @@ var es_string_match = __webpack_require__(1761);
 
 
 var dom_browse = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
+var tpImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 var reClsMap = {};
 function getClsRE(cls) {
   if (!reClsMap[cls]) {
@@ -27197,7 +27198,7 @@ var VxeImage = Object.assign({}, src_image, {
 });
 dynamicApp.use(VxeImage);
 index_esm_VxeUI.component(src_image);
-var Image = VxeImage;
+var image_Image = VxeImage;
 /* harmony default export */ var packages_image = (VxeImage);
 ;// CONCATENATED MODULE: ./packages/image/src/group.ts
 
@@ -38434,6 +38435,9 @@ var Print = VxePrint;
             }, 40);
           }, 10);
           $xePulldown.updateZindex();
+          $xePulldown.dispatchEvent('visible-change', {
+            visible: true
+          }, null);
         } else {
           $xePulldown.$nextTick(function () {
             resolve();
@@ -38449,6 +38453,9 @@ var Print = VxePrint;
       var reactData = $xePulldown.reactData;
       var internalData = $xePulldown.internalData;
       reactData.visiblePanel = false;
+      $xePulldown.dispatchEvent('visible-change', {
+        visible: false
+      }, null);
       $xePulldown.emitModel(false);
       return new Promise(function (resolve) {
         if (reactData.isAniVisible) {
@@ -45353,6 +45360,7 @@ var saveLocalFile = function saveLocalFile(options) {
 
 
 
+
 
 
 function getUniqueKey() {
@@ -45368,6 +45376,39 @@ function handleTransferFiles(items) {
   });
   return files;
 }
+function showDropTip($xeUpload, evnt, dragEl, dragPos) {
+  var xID = $xeUpload.xID;
+  var reactData = $xeUpload.reactData;
+  var el = $xeUpload.$refs.refElem;
+  if (!el) {
+    return;
+  }
+  var showMorePopup = reactData.showMorePopup;
+  var wrapperRect = el.getBoundingClientRect();
+  var ddLineEl = $xeUpload.$refs.refDragLineElem;
+  var mdLineEl = document.getElementById("refModalDragLineElem".concat(xID));
+  var currDLineEl = showMorePopup ? mdLineEl : ddLineEl;
+  if (currDLineEl) {
+    var dragRect = dragEl.getBoundingClientRect();
+    currDLineEl.style.display = 'block';
+    currDLineEl.style.top = "".concat(Math.max(1, dragRect.y - wrapperRect.y), "px");
+    currDLineEl.style.left = "".concat(Math.max(1, dragRect.x - wrapperRect.x), "px");
+    currDLineEl.style.height = "".concat(dragRect.height, "px");
+    currDLineEl.style.width = "".concat(dragRect.width - 1, "px");
+    currDLineEl.setAttribute('drag-pos', dragPos);
+  }
+}
+function hideDropTip($xeUpload) {
+  var xID = $xeUpload.xID;
+  var ddLineEl = $xeUpload.$refs.refDragLineElem;
+  var mdLineEl = document.getElementById("refModalDragLineElem".concat(xID));
+  if (ddLineEl) {
+    ddLineEl.style.display = '';
+  }
+  if (mdLineEl) {
+    mdLineEl.style.display = '';
+  }
+}
 /* harmony default export */ var upload = (defineVxeComponent({
   name: 'VxeUpload',
   model: {
@@ -45426,6 +45467,7 @@ function handleTransferFiles(items) {
         return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().clone(getConfig().upload.fileTypes, true);
       }
     },
+    dragSort: Boolean,
     dragToUpload: {
       type: Boolean,
       default: function _default() {
@@ -45579,14 +45621,19 @@ function handleTransferFiles(items) {
   data: function data() {
     var xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
     var reactData = {
-      isDrag: false,
+      isDragUploadStatus: false,
       showMorePopup: false,
       isActivated: false,
       fileList: [],
-      fileCacheMaps: {}
+      fileCacheMaps: {},
+      isDragMove: false,
+      dragIndex: -1,
+      dragTipText: ''
     };
     var internalData = {
-      imagePreviewTypes: ['jpg', 'jpeg', 'png', 'gif']
+      imagePreviewTypes: ['jpg', 'jpeg', 'png', 'gif'],
+      prevDragIndex: -1
+      // prevDragPos: ''
     };
     return {
       xID: xID,
@@ -46224,7 +46271,7 @@ function handleTransferFiles(items) {
         }
       });
     },
-    handleDragleaveEvent: function handleDragleaveEvent(evnt) {
+    handleUploadDragleaveEvent: function handleUploadDragleaveEvent(evnt) {
       var $xeUpload = this;
       var reactData = $xeUpload.reactData;
       var targetElem = evnt.currentTarget;
@@ -46237,11 +46284,11 @@ function handleTransferFiles(items) {
           targetHeight = _targetElem$getBoundi.height,
           targetWidth = _targetElem$getBoundi.width;
         if (clientX < targetX || clientX > targetX + targetWidth || clientY < targetY || clientY > targetY + targetHeight) {
-          reactData.isDrag = false;
+          reactData.isDragUploadStatus = false;
         }
       }
     },
-    handleDragoverEvent: function handleDragoverEvent(evnt) {
+    handleUploadDragoverEvent: function handleUploadDragoverEvent(evnt) {
       var $xeUpload = this;
       var reactData = $xeUpload.reactData;
       var dataTransfer = evnt.dataTransfer;
@@ -46249,7 +46296,7 @@ function handleTransferFiles(items) {
         var items = dataTransfer.items;
         if (items && items.length) {
           evnt.preventDefault();
-          reactData.isDrag = true;
+          reactData.isDragUploadStatus = true;
         }
       }
     },
@@ -46285,7 +46332,7 @@ function handleTransferFiles(items) {
       }
       $xeUpload.uploadFile(files, evnt);
     },
-    handleDropEvent: function handleDropEvent(evnt) {
+    handleUploadDropEvent: function handleUploadDropEvent(evnt) {
       var $xeUpload = this;
       var reactData = $xeUpload.reactData;
       var dataTransfer = evnt.dataTransfer;
@@ -46299,12 +46346,13 @@ function handleTransferFiles(items) {
           }
         }
       }
-      reactData.isDrag = false;
+      reactData.isDragUploadStatus = false;
     },
     handleMoreEvent: function handleMoreEvent() {
       var $xeUpload = this;
       var props = $xeUpload;
       var reactData = $xeUpload.reactData;
+      var xID = $xeUpload.xID;
       var formReadonly = $xeUpload.computeFormReadonly;
       var isImage = $xeUpload.computeIsImage;
       if (index_esm_VxeUI.modal) {
@@ -46319,44 +46367,151 @@ function handleTransferFiles(items) {
           slots: {
             default: function _default(params, h) {
               var showErrorStatus = props.showErrorStatus,
-                dragToUpload = props.dragToUpload;
-              var isDrag = reactData.isDrag;
-              var isDisabled = $xeUpload.computeIsDisabled;
+                dragToUpload = props.dragToUpload,
+                dragSort = props.dragSort;
+              var isDragMove = reactData.isDragMove,
+                isDragUploadStatus = reactData.isDragUploadStatus,
+                dragIndex = reactData.dragIndex;
               var fileList = reactData.fileList;
+              var isDisabled = $xeUpload.computeIsDisabled;
               var ons = {};
-              if (dragToUpload) {
-                ons.dragover = $xeUpload.handleDragoverEvent;
-                ons.dragleave = $xeUpload.handleDragleaveEvent;
-                ons.drop = $xeUpload.handleDropEvent;
+              if (dragToUpload && dragIndex === -1) {
+                ons.dragover = $xeUpload.handleUploadDragoverEvent;
+                ons.dragleave = $xeUpload.handleUploadDragleaveEvent;
+                ons.drop = $xeUpload.handleUploadDropEvent;
               }
               return h('div', {
                 class: ['vxe-upload--more-popup', {
                   'is--readonly': formReadonly,
                   'is--disabled': isDisabled,
                   'show--error': showErrorStatus,
-                  'is--drag': isDrag
+                  'is--drag': isDragUploadStatus
                 }],
                 on: ons
-              }, [isImage ? h('div', {
+              }, [isImage ? dragSort ? h('transition-group', {
+                props: {
+                  name: "vxe-upload--drag-list".concat(isDragMove ? '' : '-disabled'),
+                  tag: 'div'
+                },
+                class: 'vxe-upload--image-more-list'
+              }, $xeUpload.renderImageItemList(h, fileList, true).concat($xeUpload.renderImageAction(h, true))) : h('div', {
                 class: 'vxe-upload--image-more-list'
               }, $xeUpload.renderImageItemList(h, fileList, true).concat($xeUpload.renderImageAction(h, true))) : h('div', {
                 class: 'vxe-upload--file-more-list'
-              }, [$xeUpload.renderFileAction(h, true), h('div', {
+              }, [$xeUpload.renderFileAction(h, true), dragSort ? h('transition-group', {
+                props: {
+                  name: "vxe-upload--drag-list".concat(isDragMove ? '' : '-disabled'),
+                  tag: 'div'
+                },
+                class: 'vxe-upload--file-list'
+              }, $xeUpload.renderFileItemList(h, fileList, true)) : h('div', {
                 class: 'vxe-upload--file-list'
-              }, $xeUpload.renderFileItemList(h, fileList, true))]), isDrag ? h('div', {
+              }, $xeUpload.renderFileItemList(h, fileList, true))]), dragSort ? h('div', {
+                attrs: {
+                  id: "refModalDragLineElem".concat(xID)
+                },
+                class: 'vxe-upload--drag-line'
+              }) : renderEmptyElement($xeUpload), isDragUploadStatus ? h('div', {
                 class: 'vxe-upload--drag-placeholder'
               }, getI18n('vxe.upload.dragPlaceholder')) : renderEmptyElement($xeUpload)]);
             }
           },
-          onShow: function onShow() {
-            reactData.showMorePopup = true;
-          },
-          onHide: function onHide() {
-            reactData.showMorePopup = false;
+          events: {
+            show: function show() {
+              reactData.showMorePopup = true;
+            },
+            hide: function hide() {
+              reactData.showMorePopup = false;
+            }
           }
         });
       }
     },
+    // 拖拽
+    handleDragSortDragstartEvent: function handleDragSortDragstartEvent(evnt) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      if (evnt.dataTransfer) {
+        var img = new Image();
+        img.src = tpImg;
+        evnt.dataTransfer.setDragImage(img, 0, 0);
+      }
+      var dragEl = evnt.currentTarget;
+      var parentEl = dragEl.parentElement;
+      var dragIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(Array.from(parentEl.children), function (item) {
+        return dragEl === item;
+      });
+      reactData.isDragMove = true;
+      reactData.dragIndex = dragIndex;
+      setTimeout(function () {
+        reactData.isDragMove = false;
+      }, 500);
+    },
+    handleDragSortDragoverEvent: function handleDragSortDragoverEvent(evnt) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      var internalData = $xeUpload.internalData;
+      evnt.preventDefault();
+      var dragIndex = reactData.dragIndex;
+      if (dragIndex === -1) {
+        return;
+      }
+      var isImage = $xeUpload.computeIsImage;
+      var dragEl = evnt.currentTarget;
+      var parentEl = dragEl.parentElement;
+      var currIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(Array.from(parentEl.children), function (item) {
+        return dragEl === item;
+      });
+      var dragPos = '';
+      if (isImage) {
+        var offsetX = evnt.clientX - dragEl.getBoundingClientRect().x;
+        dragPos = offsetX < dragEl.clientWidth / 2 ? 'left' : 'right';
+      } else {
+        var offsetY = evnt.clientY - dragEl.getBoundingClientRect().y;
+        dragPos = offsetY < dragEl.clientHeight / 2 ? 'top' : 'bottom';
+      }
+      if (dragIndex === currIndex) {
+        showDropTip($xeUpload, evnt, dragEl, dragPos);
+        return;
+      }
+      showDropTip($xeUpload, evnt, dragEl, dragPos);
+      internalData.prevDragIndex = currIndex;
+      internalData.prevDragPos = dragPos;
+    },
+    handleDragSortDragendEvent: function handleDragSortDragendEvent(evnt) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      var internalData = $xeUpload.internalData;
+      var fileList = reactData.fileList,
+        dragIndex = reactData.dragIndex;
+      var prevDragIndex = internalData.prevDragIndex,
+        prevDragPos = internalData.prevDragPos;
+      var oldIndex = dragIndex;
+      var targetIndex = prevDragIndex;
+      var dragOffsetIndex = prevDragPos === 'bottom' || prevDragPos === 'right' ? 1 : 0;
+      var oldItem = fileList[oldIndex];
+      var newItem = fileList[targetIndex];
+      if (oldItem && newItem) {
+        fileList.splice(oldIndex, 1);
+        var ptfIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(fileList, function (item) {
+          return newItem === item;
+        });
+        var nIndex = ptfIndex + dragOffsetIndex;
+        fileList.splice(nIndex, 0, oldItem);
+        $xeUpload.dispatchEvent('sort-dragend', {
+          oldItem: oldItem,
+          newItem: newItem,
+          dragPos: prevDragPos,
+          offsetIndex: dragOffsetIndex,
+          _index: {
+            newIndex: nIndex,
+            oldIndex: oldIndex
+          }
+        }, evnt);
+      }
+      hideDropTip($xeUpload);
+      reactData.dragIndex = -1;
+    },
     handleGlobalPasteEvent: function handleGlobalPasteEvent(evnt) {
       var $xeUpload = this;
       var props = $xeUpload;
@@ -46405,25 +46560,37 @@ function handleTransferFiles(items) {
         showProgress = props.showProgress,
         progressText = props.progressText,
         showPreview = props.showPreview,
-        showErrorStatus = props.showErrorStatus;
+        showErrorStatus = props.showErrorStatus,
+        dragSort = props.dragSort;
       var fileCacheMaps = reactData.fileCacheMaps;
       var isDisabled = $xeUpload.computeIsDisabled;
       var formReadonly = $xeUpload.computeFormReadonly;
       var nameProp = $xeUpload.computeNameProp;
       var typeProp = $xeUpload.computeTypeProp;
       var cornerSlot = slots.corner;
+      var ons = {};
+      if (dragSort) {
+        ons.dragstart = $xeUpload.handleDragSortDragstartEvent;
+        ons.dragover = $xeUpload.handleDragSortDragoverEvent;
+        ons.dragend = $xeUpload.handleDragSortDragendEvent;
+      }
       return currList.map(function (item, index) {
         var fileKey = $xeUpload.getFieldKey(item);
         var cacheItem = fileCacheMaps[fileKey];
         var isLoading = cacheItem && cacheItem.loading;
         var isError = cacheItem && cacheItem.status === 'error';
         return h('div', {
-          key: index,
+          key: dragSort ? fileKey : index,
           class: ['vxe-upload--file-item', {
             'is--preview': showPreview,
             'is--loading': isLoading,
             'is--error': isError
-          }]
+          }],
+          attrs: {
+            fileid: fileKey,
+            draggable: dragSort ? true : null
+          },
+          on: ons
         }, [h('div', {
           class: 'vxe-upload--file-item-icon'
         }, [h('i', {
@@ -46533,8 +46700,10 @@ function handleTransferFiles(items) {
       var $xeUpload = this;
       var props = $xeUpload;
       var reactData = $xeUpload.reactData;
-      var moreConfig = props.moreConfig;
-      var fileList = reactData.fileList;
+      var moreConfig = props.moreConfig,
+        dragSort = props.dragSort;
+      var fileList = reactData.fileList,
+        isDragMove = reactData.isDragMove;
       var moreOpts = $xeUpload.computeMoreOpts;
       var maxCount = moreOpts.maxCount,
         showMoreButton = moreOpts.showMoreButton,
@@ -46553,7 +46722,13 @@ function handleTransferFiles(items) {
         class: ['vxe-upload--file-list-wrapper', {
           'is--horizontal': isHorizontal
         }]
-      }, [currList.length ? h('div', {
+      }, [currList.length ? dragSort ? h('transition-group', {
+        attrs: {
+          name: "vxe-upload--drag-list".concat(isDragMove ? '' : '-disabled'),
+          tag: 'div'
+        },
+        class: 'vxe-upload--file-list'
+      }, $xeUpload.renderFileItemList(h, currList, false)) : h('div', {
         class: 'vxe-upload--file-list'
       }, $xeUpload.renderFileItemList(h, currList, false)) : renderEmptyElement($xeUpload), showMoreButton && overMaxNum ? h('div', {
         class: 'vxe-upload--file-over-more'
@@ -46577,26 +46752,38 @@ function handleTransferFiles(items) {
         showProgress = props.showProgress,
         progressText = props.progressText,
         showPreview = props.showPreview,
-        showErrorStatus = props.showErrorStatus;
+        showErrorStatus = props.showErrorStatus,
+        dragSort = props.dragSort;
       var fileCacheMaps = reactData.fileCacheMaps;
       var isDisabled = $xeUpload.computeIsDisabled;
       var formReadonly = $xeUpload.computeFormReadonly;
       var imageOpts = $xeUpload.computeImageOpts;
       var imgStyle = $xeUpload.computeImgStyle;
       var cornerSlot = slots.corner;
+      var ons = {};
+      if (dragSort) {
+        ons.dragstart = $xeUpload.handleDragSortDragstartEvent;
+        ons.dragover = $xeUpload.handleDragSortDragoverEvent;
+        ons.dragend = $xeUpload.handleDragSortDragendEvent;
+      }
       return currList.map(function (item, index) {
         var fileKey = $xeUpload.getFieldKey(item);
         var cacheItem = fileCacheMaps[fileKey];
         var isLoading = cacheItem && cacheItem.loading;
         var isError = cacheItem && cacheItem.status === 'error';
         return h('div', {
-          key: index,
+          key: dragSort ? fileKey : index,
           class: ['vxe-upload--image-item', {
             'is--preview': showPreview,
             'is--circle': imageOpts.circle,
             'is--loading': isLoading,
             'is--error': isError
-          }]
+          }],
+          attrs: {
+            fileid: fileKey,
+            draggable: dragSort ? true : null
+          },
+          on: ons
         }, [h('div', {
           class: 'vxe-upload--image-item-box',
           style: isMoreView ? {} : imgStyle,
@@ -46713,8 +46900,11 @@ function handleTransferFiles(items) {
     },
     renderImageMode: function renderImageMode(h) {
       var $xeUpload = this;
+      var props = $xeUpload;
       var reactData = $xeUpload.reactData;
-      var fileList = reactData.fileList;
+      var dragSort = props.dragSort;
+      var fileList = reactData.fileList,
+        isDragMove = reactData.isDragMove;
       var moreOpts = $xeUpload.computeMoreOpts;
       var maxCount = moreOpts.maxCount,
         showMoreButton = moreOpts.showMoreButton;
@@ -46727,7 +46917,25 @@ function handleTransferFiles(items) {
       return h('div', {
         key: 'image',
         class: 'vxe-upload--image-wrapper'
-      }, [h('div', {
+      }, [dragSort ? h('transition-group', {
+        attrs: {
+          name: "vxe-upload--drag-list".concat(isDragMove ? '' : '-disabled'),
+          tag: 'div'
+        },
+        class: 'vxe-upload--image-list'
+      }, $xeUpload.renderImageItemList(h, currList, false).concat([showMoreButton && overMaxNum ? h('div', {
+        key: 'om',
+        class: 'vxe-upload--image-over-more'
+      }, [h(src_button, {
+        props: {
+          mode: 'text',
+          content: getI18n('vxe.upload.moreBtnText', [fileList.length]),
+          status: 'primary'
+        },
+        on: {
+          click: $xeUpload.handleMoreEvent
+        }
+      })]) : renderEmptyElement($xeUpload), $xeUpload.renderImageAction(h, false)])) : h('div', {
         class: 'vxe-upload--image-list'
       }, $xeUpload.renderImageItemList(h, currList, false).concat([showMoreButton && overMaxNum ? h('div', {
         class: 'vxe-upload--image-over-more'
@@ -46748,25 +46956,30 @@ function handleTransferFiles(items) {
       var reactData = $xeUpload.reactData;
       var showErrorStatus = props.showErrorStatus,
         dragToUpload = props.dragToUpload,
-        pasteToUpload = props.pasteToUpload;
-      var isDrag = reactData.isDrag,
+        pasteToUpload = props.pasteToUpload,
+        dragSort = props.dragSort;
+      var isDragUploadStatus = reactData.isDragUploadStatus,
         showMorePopup = reactData.showMorePopup,
-        isActivated = reactData.isActivated;
+        isActivated = reactData.isActivated,
+        dragIndex = reactData.dragIndex;
       var vSize = $xeUpload.computeSize;
       var isDisabled = $xeUpload.computeIsDisabled;
       var formReadonly = $xeUpload.computeFormReadonly;
       var isImage = $xeUpload.computeIsImage;
       var ons = {};
-      if (dragToUpload) {
-        ons.dragover = $xeUpload.handleDragoverEvent;
-        ons.dragleave = $xeUpload.handleDragleaveEvent;
-        ons.drop = $xeUpload.handleDropEvent;
+      if (dragToUpload && dragIndex === -1) {
+        ons.dragover = $xeUpload.handleUploadDragoverEvent;
+        ons.dragleave = $xeUpload.handleUploadDragleaveEvent;
+        ons.drop = $xeUpload.handleUploadDropEvent;
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-upload', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--active', isActivated), 'is--readonly', formReadonly), 'is--disabled', isDisabled), 'is--paste', pasteToUpload), 'show--error', showErrorStatus), 'is--drag', isDrag)],
+        class: ['vxe-upload', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--active', isActivated), 'is--readonly', formReadonly), 'is--disabled', isDisabled), 'is--paste', pasteToUpload), 'show--error', showErrorStatus), 'is--drag', isDragUploadStatus)],
         on: ons
-      }, [isImage ? $xeUpload.renderImageMode(h) : $xeUpload.renderAllMode(h), isDrag && !showMorePopup ? h('div', {
+      }, [isImage ? $xeUpload.renderImageMode(h) : $xeUpload.renderAllMode(h), dragSort ? h('div', {
+        ref: 'refDragLineElem',
+        class: 'vxe-upload--drag-line'
+      }) : renderEmptyElement($xeUpload), isDragUploadStatus && !showMorePopup ? h('div', {
         class: 'vxe-upload--drag-placeholder'
       }, getI18n('vxe.upload.dragPlaceholder')) : renderEmptyElement($xeUpload)]);
     }
@@ -46782,6 +46995,9 @@ function handleTransferFiles(items) {
       if (props.multiple && props.singleMode) {
         errLog('vxe.error.errConflicts', ['multiple', 'single-mode']);
       }
+      if (props.imageStyle) {
+        errLog('vxe.error.delProp', ['image-style', 'image-config']);
+      }
     }
     globalEvents.on($xeUpload, 'paste', $xeUpload.handleGlobalPasteEvent);
     globalEvents.on($xeUpload, 'mousedown', $xeUpload.handleGlobalMousedownEvent);
@@ -46790,7 +47006,7 @@ function handleTransferFiles(items) {
   beforeDestroy: function beforeDestroy() {
     var $xeUpload = this;
     var reactData = $xeUpload.reactData;
-    reactData.isDrag = false;
+    reactData.isDragUploadStatus = false;
     globalEvents.off($xeUpload, 'paste');
     globalEvents.off($xeUpload, 'mousedown');
     globalEvents.off($xeUpload, 'blur');