vue-devui 1.0.0-beta.1 → 1.0.0-beta.13

package/upload/index.es.js

@@ -21,7 +21,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, createVNode, Fragment, getCurrentInstance, ref, computed, watch, nextTick, onUnmounted, mergeProps, createApp, toRefs, withDirectives, resolveComponent, createTextVNode, resolveDirective, isVNode } from "vue";
+import { defineComponent, createVNode, getCurrentInstance, ref, computed, watch, nextTick, onUnmounted, mergeProps, createApp, toRefs, withDirectives, resolveComponent, isVNode, resolveDirective } from "vue";
 var toast = "";
 const toastProps = {
   value: {
@@ -85,11 +85,12 @@ var Icon = defineComponent({
       color,
       classPrefix
     } = this;
-    return createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
       "src": name,
       "alt": name.split("/")[name.split("/").length - 1],
       "style": {
-        width: size
+        width: size,
+        verticalAlign: "text-bottom"
       }
     }, null) : createVNode("i", {
       "class": `${classPrefix} ${classPrefix}-${name}`,
@@ -97,7 +98,7 @@ var Icon = defineComponent({
         fontSize: size,
         color
       }
-    }, null)]);
+    }, null);
   }
 });
 Icon.install = function(app) {
@@ -140,7 +141,7 @@ var ToastImage = defineComponent({
     const severityIconMap = {
       info: "info-o",
       success: "right-o",
-      warn: "warning-o",
+      warning: "warning-o",
       error: "error-o"
     };
     const showIcon = () => severity !== "common";
@@ -148,7 +149,7 @@ var ToastImage = defineComponent({
       "class": wrapperCls
     }, [showIcon() ? createVNode(Icon, {
       "name": severityIconMap[severity],
-      "size": "14px"
+      "size": "16px"
     }, null) : null]);
   }
 });
@@ -1739,7 +1740,7 @@ function useToastEvent() {
 function useToastHelper() {
   function severityDelay(msg) {
     switch (msg.severity) {
-      case "warn":
+      case "warning":
       case "error":
         return 1e4;
       default:
@@ -1840,19 +1841,22 @@ var Toast = defineComponent({
       if (props.lifeMode === "single") {
         setTimeout(() => {
           messages.value.forEach((msg, i) => {
-            timeoutArr[i] = setTimeout(() => singleModeRemove(msg, i), msg.life || severityDelay(msg));
+            timeoutArr[i] = setTimeout(() => singleModeRemove(msg), msg.life || severityDelay(msg));
           });
         });
       } else {
         timeout = setTimeout(() => removeAll(), defaultLife.value);
       }
     }
-    function singleModeRemove(msg, i) {
+    function singleModeRemove(msg) {
       removeMsgAnimation(msg);
       setTimeout(() => {
         onCloseEvent(msg);
         if (hasMsgAnimation()) {
-          messages.value.splice(i, 1);
+          const index2 = messages.value.indexOf(msg);
+          if (index2 !== -1) {
+            messages.value.splice(index2, 1);
+          }
         } else {
           messages.value = [];
         }
@@ -1912,7 +1916,7 @@ var Toast = defineComponent({
       if (props.lifeMode === "single") {
         const msgLife = msg.life || severityDelay(msg);
         const remainTime = msgLife - (Date.now() - timestamp);
-        timeoutArr[i] = setTimeout(() => singleModeRemove(msg, i), remainTime);
+        timeoutArr[i] = setTimeout(() => singleModeRemove(msg), remainTime);
       } else {
         resetDelay(() => removeAll());
       }
@@ -2059,13 +2063,20 @@ var UploadStatus;
   UploadStatus2[UploadStatus2["failed"] = 3] = "failed";
 })(UploadStatus || (UploadStatus = {}));
 const uploadProps = {
+  accept: {
+    type: String
+  },
+  webkitdirectory: {
+    type: Boolean,
+    default: false
+  },
   uploadOptions: {
     type: Object,
     required: true
   },
-  fileOptions: {
-    type: Object,
-    required: true
+  multiple: {
+    type: Boolean,
+    default: false
   },
   autoUpload: {
     type: Boolean,
@@ -2101,10 +2112,6 @@ const uploadProps = {
     type: Boolean,
     default: false
   },
-  showTip: {
-    type: Boolean,
-    default: false
-  },
   onChange: {
     type: Function
   },
@@ -2120,96 +2127,128 @@ const uploadProps = {
     type: Function,
     default: void 0
   },
-  errorEvent: {
+  deleteUploadedFile: {
     type: Function,
     default: void 0
   },
-  successEvent: {
+  "on-error": {
     type: Function,
     default: void 0
   },
-  deleteUploadedFileEvent: {
+  "on-success": {
     type: Function,
     default: void 0
-  }
-};
-const multiUploadProps = {
-  uploadOptions: {
-    type: Object,
-    required: true
-  },
-  fileOptions: {
-    type: Object,
-    required: true
-  },
-  autoUpload: {
-    type: Boolean,
-    default: false
-  },
-  withoutBtn: {
-    type: Boolean,
-    default: false
-  },
-  showTip: {
-    type: Boolean,
-    default: false
-  },
-  uploadedFiles: {
-    type: Array,
-    default: () => []
-  },
-  enableDrop: {
-    type: Boolean,
-    default: false
-  },
-  placeholderText: {
-    type: String,
-    default: "\u9009\u62E9\u6587\u4EF6"
-  },
-  uploadText: {
-    type: String,
-    default: "\u4E0A\u4F20"
   },
   oneTimeUpload: {
     type: Boolean,
     default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  beforeUpload: {
-    type: Function
-  },
-  fileDrop: {
-    type: Function,
-    default: void 0
-  },
-  fileOver: {
-    type: Function,
-    default: void 0
-  },
-  fileSelect: {
-    type: Function,
-    default: void 0
-  },
-  errorEvent: {
-    type: Function,
-    default: void 0
-  },
-  successEvent: {
-    type: Function,
-    default: void 0
-  },
-  deleteUploadedFileEvent: {
-    type: Function,
-    default: void 0
-  },
-  setCustomUploadOptions: {
-    type: Function,
-    default: void 0
   }
 };
+const getFailedFilesCount = (failedCount) => `${failedCount}\u4E2A\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01`;
+const getUploadingFilesCount = (uploadingCount, filesCount) => `${uploadingCount}/${filesCount}\u6B63\u5728\u4E0A\u4F20`;
+const getSelectedFilesCount = (filesCount) => `\u5DF2\u6DFB\u52A0${filesCount}\u4E2A\u6587\u4EF6`;
+const getAllFilesBeyondMaximalFileSizeMsg = (maximalSize) => `\u6700\u5927\u652F\u6301\u4E0A\u4F20${maximalSize}MB\u7684\u6587\u4EF6, \u60A8\u672C\u6B21\u4E0A\u4F20\u7684\u6240\u6709\u6587\u4EF6\u8D85\u8FC7\u53EF\u4E0A\u4F20\u6587\u4EF6\u5927\u5C0F`;
+const getBeyondMaximalFileSizeMsg = (filename, maximalSize) => {
+  return `\u6700\u5927\u652F\u6301\u4E0A\u4F20${maximalSize}MB\u7684\u6587\u4EF6, \u60A8\u4E0A\u4F20\u7684\u6587\u4EF6"${filename}"\u8D85\u8FC7\u53EF\u4E0A\u4F20\u6587\u4EF6\u5927\u5C0F`;
+};
+const getNotAllowedFileTypeMsg = (filename, scope) => {
+  return `\u652F\u6301\u7684\u6587\u4EF6\u7C7B\u578B: "${scope}", \u60A8\u4E0A\u4F20\u7684\u6587\u4EF6"${filename}"\u4E0D\u5728\u5141\u8BB8\u8303\u56F4\u5185\uFF0C\u8BF7\u91CD\u65B0\u9009\u62E9\u6587\u4EF6`;
+};
+const getExistSameNameFilesMsg = (sameNames) => {
+  return `\u60A8\u4E0A\u4F20\u7684 "${sameNames}" \u5B58\u5728\u91CD\u540D\u6587\u4EF6, \u8BF7\u91CD\u65B0\u9009\u62E9\u6587\u4EF6`;
+};
+const useSelectFiles = () => {
+  const BEYOND_MAXIMAL_FILE_SIZE_MSG = ref("");
+  const simulateClickEvent = (input) => {
+    const evt = document.createEvent("MouseEvents");
+    evt.initMouseEvent("click", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
+    input.dispatchEvent(evt);
+  };
+  const selectFiles = ({ multiple, accept, webkitdirectory }) => {
+    return new Promise((resolve) => {
+      const tempNode = document.getElementById("d-upload-temp");
+      if (tempNode) {
+        document.body.removeChild(tempNode);
+      }
+      const input = document.createElement("input");
+      input.style.position = "fixed";
+      input.style.left = "-2000px";
+      input.style.top = "-2000px";
+      input.setAttribute("id", "d-upload-temp");
+      input.setAttribute("type", "file");
+      if (multiple) {
+        input.setAttribute("multiple", "");
+      }
+      if (accept) {
+        input.setAttribute("accept", accept);
+      }
+      if (webkitdirectory) {
+        input.setAttribute("webkitdirectory", "");
+      }
+      input.addEventListener("change", (event) => {
+        resolve(Array.prototype.slice.call(event.target.files));
+      });
+      document.body.appendChild(input);
+      simulateClickEvent(input);
+    });
+  };
+  const isAllowedFileType = (accept, file) => {
+    if (accept) {
+      const acceptArr = accept.split(",");
+      const baseMimeType = file.type.replace(/\/.*$/, "");
+      return acceptArr.some((type) => {
+        const validType = type.trim();
+        if (validType.startsWith(".")) {
+          return file.name.toLowerCase().indexOf(validType.toLowerCase(), file.name.toLowerCase().length - validType.toLowerCase().length) > -1;
+        } else if (/\/\*$/.test(validType)) {
+          return baseMimeType === validType.replace(/\/.*$/, "");
+        }
+        return file.type === validType;
+      });
+    }
+    return true;
+  };
+  const beyondMaximalSize = (fileSize, maximumSize) => {
+    if (maximumSize) {
+      return fileSize > 1024 * 1024 * maximumSize;
+    }
+    return false;
+  };
+  const _validateFiles = (file, accept, uploadOptions) => {
+    if (!isAllowedFileType(accept, file)) {
+      return {
+        checkError: true,
+        errorMsg: getNotAllowedFileTypeMsg(file.name, accept)
+      };
+    }
+    if (uploadOptions && beyondMaximalSize(file.size, uploadOptions.maximumSize)) {
+      return {
+        checkError: true,
+        errorMsg: getBeyondMaximalFileSizeMsg(file.name, uploadOptions.maximumSize)
+      };
+    }
+    return { checkError: false, errorMsg: void 0 };
+  };
+  const triggerSelectFiles = (fileOptions) => {
+    const { multiple, accept, webkitdirectory } = fileOptions;
+    return selectFiles({ multiple, accept, webkitdirectory });
+  };
+  const triggerDropFiles = (files) => {
+    return Promise.resolve(files);
+  };
+  const checkAllFilesSize = (fileSize, maximumSize) => {
+    if (beyondMaximalSize(fileSize, maximumSize)) {
+      BEYOND_MAXIMAL_FILE_SIZE_MSG.value = getAllFilesBeyondMaximalFileSizeMsg(maximumSize);
+      return { checkError: true, errorMsg: BEYOND_MAXIMAL_FILE_SIZE_MSG.value };
+    }
+  };
+  return {
+    triggerSelectFiles,
+    _validateFiles,
+    triggerDropFiles,
+    checkAllFilesSize
+  };
+};
 class FileUploader {
   constructor(file, uploadOptions) {
     __publicField(this, "xhr");
@@ -2411,402 +2450,17 @@ const useUpload = () => {
     _oneTimeUpload
   };
 };
-const i18nText = {
-  warning: "\u63D0\u9192",
-  upload: "\u4E0A\u4F20",
-  chooseFile: "\u9009\u62E9\u6587\u4EF6",
-  chooseFiles: "\u9009\u62E9\u591A\u4E2A\u6587\u4EF6",
-  preload: "\u9884\u52A0\u8F7D",
-  uploading: "\u4E0A\u4F20\u4E2D...",
-  uploaded: "\u5DF2\u4E0A\u4F20",
-  uploadFailed: "\u4E0A\u4F20\u5931\u8D25",
-  uploadSuccess: "\u4E0A\u4F20\u6210\u529F!",
-  delete: "\u5220\u9664",
-  reUpload: "\u91CD\u65B0\u4E0A\u4F20",
-  cancelUpload: "\u53D6\u6D88\u4E0A\u4F20"
-};
-const getFailedFilesCount = (failedCount) => `${failedCount}\u4E2A\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01`;
-const getUploadingFilesCount = (uploadingCount, filesCount) => `${uploadingCount}/${filesCount}\u6B63\u5728\u4E0A\u4F20`;
-const getSelectedFilesCount = (filesCount) => `\u5DF2\u6DFB\u52A0${filesCount}\u4E2A\u6587\u4EF6`;
-const getAllFilesBeyondMaximalFileSizeMsg = (maximalSize) => `\u6700\u5927\u652F\u6301\u4E0A\u4F20${maximalSize}MB\u7684\u6587\u4EF6, \u60A8\u672C\u6B21\u4E0A\u4F20\u7684\u6240\u6709\u6587\u4EF6\u8D85\u8FC7\u53EF\u4E0A\u4F20\u6587\u4EF6\u5927\u5C0F`;
-const getBeyondMaximalFileSizeMsg = (filename, maximalSize) => {
-  return `\u6700\u5927\u652F\u6301\u4E0A\u4F20${maximalSize}MB\u7684\u6587\u4EF6, \u60A8\u4E0A\u4F20\u7684\u6587\u4EF6"${filename}"\u8D85\u8FC7\u53EF\u4E0A\u4F20\u6587\u4EF6\u5927\u5C0F`;
-};
-const getNotAllowedFileTypeMsg = (filename, scope) => {
-  return `\u652F\u6301\u7684\u6587\u4EF6\u7C7B\u578B: "${scope}", \u60A8\u4E0A\u4F20\u7684\u6587\u4EF6"${filename}"\u4E0D\u5728\u5141\u8BB8\u8303\u56F4\u5185\uFF0C\u8BF7\u91CD\u65B0\u9009\u62E9\u6587\u4EF6`;
-};
-const getExistSameNameFilesMsg = (sameNames) => {
-  return `\u60A8\u4E0A\u4F20\u7684 "${sameNames}" \u5B58\u5728\u91CD\u540D\u6587\u4EF6, \u8BF7\u91CD\u65B0\u9009\u62E9\u6587\u4EF6`;
-};
-const useSelectFiles = () => {
-  const BEYOND_MAXIMAL_FILE_SIZE_MSG = ref("");
-  const simulateClickEvent = (input) => {
-    const evt = document.createEvent("MouseEvents");
-    evt.initMouseEvent("click", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
-    input.dispatchEvent(evt);
-  };
-  const selectFiles = ({
-    multiple,
-    accept,
-    webkitdirectory
-  }) => {
-    return new Promise((resolve) => {
-      const tempNode = document.getElementById("d-upload-temp");
-      if (tempNode) {
-        document.body.removeChild(tempNode);
-      }
-      const input = document.createElement("input");
-      input.style.position = "fixed";
-      input.style.left = "-2000px";
-      input.style.top = "-2000px";
-      input.setAttribute("id", "d-upload-temp");
-      input.setAttribute("type", "file");
-      if (multiple) {
-        input.setAttribute("multiple", "");
-      }
-      if (accept) {
-        input.setAttribute("accept", accept);
-      }
-      if (webkitdirectory) {
-        input.setAttribute("webkitdirectory", "");
-      }
-      input.addEventListener("change", (event) => {
-        resolve(Array.prototype.slice.call(event.target.files));
-      });
-      document.body.appendChild(input);
-      simulateClickEvent(input);
-    });
-  };
-  const isAllowedFileType = (accept, file) => {
-    if (accept) {
-      const acceptArr = accept.split(",");
-      const baseMimeType = file.type.replace(/\/.*$/, "");
-      return acceptArr.some((type) => {
-        const validType = type.trim();
-        if (validType.startsWith(".")) {
-          return file.name.toLowerCase().indexOf(validType.toLowerCase(), file.name.toLowerCase().length - validType.toLowerCase().length) > -1;
-        } else if (/\/\*$/.test(validType)) {
-          return baseMimeType === validType.replace(/\/.*$/, "");
-        }
-        return file.type === validType;
-      });
-    }
-    return true;
-  };
-  const beyondMaximalSize = (fileSize, maximumSize) => {
-    if (maximumSize) {
-      return fileSize > 1024 * 1024 * maximumSize;
-    }
-    return false;
-  };
-  const _validateFiles = (file, accept, uploadOptions) => {
-    if (!isAllowedFileType(accept, file)) {
-      return {
-        checkError: true,
-        errorMsg: getNotAllowedFileTypeMsg(file.name, accept)
-      };
-    }
-    if (uploadOptions && beyondMaximalSize(file.size, uploadOptions.maximumSize)) {
-      return {
-        checkError: true,
-        errorMsg: getBeyondMaximalFileSizeMsg(file.name, uploadOptions.maximumSize)
-      };
-    }
-    return { checkError: false, errorMsg: void 0 };
-  };
-  const triggerSelectFiles = (fileOptions) => {
-    const { multiple, accept, webkitdirectory } = fileOptions;
-    return selectFiles({ multiple, accept, webkitdirectory });
-  };
-  const triggerDropFiles = (files) => {
-    return Promise.resolve(files);
-  };
-  const checkAllFilesSize = (fileSize, maximumSize) => {
-    if (beyondMaximalSize(fileSize, maximumSize)) {
-      BEYOND_MAXIMAL_FILE_SIZE_MSG.value = getAllFilesBeyondMaximalFileSizeMsg(maximumSize);
-      return { checkError: true, errorMsg: BEYOND_MAXIMAL_FILE_SIZE_MSG.value };
-    }
-  };
-  return {
-    triggerSelectFiles,
-    _validateFiles,
-    triggerDropFiles,
-    checkAllFilesSize
-  };
-};
 var upload = "";
-var Upload = defineComponent({
-  name: "DSingleUpload",
-  props: uploadProps,
-  emits: ["fileDrop", "fileOver", "fileSelect", "successEvent", "errorEvent", "deleteUploadedFileEvent", "update:uploadedFiles"],
-  setup(props, ctx) {
-    const {
-      uploadOptions,
-      fileOptions,
-      placeholderText,
-      autoUpload,
-      withoutBtn,
-      uploadText,
-      disabled,
-      beforeUpload,
-      enableDrop,
-      showTip,
-      uploadedFiles
-    } = toRefs(props);
-    const isDropOVer = ref(false);
-    const {
-      getFiles,
-      fileUploaders,
-      addFile,
-      getFullFiles,
-      deleteFile,
-      upload: upload2,
-      removeFiles
-    } = useUpload();
-    const {
-      triggerSelectFiles,
-      _validateFiles,
-      triggerDropFiles
-    } = useSelectFiles();
-    const filename = computed(() => (getFiles()[0] || {}).name || "");
-    const alertMsg = (errorMsg) => {
-      ToastService.open({
-        value: [{
-          severity: "warn",
-          content: errorMsg
-        }]
-      });
-    };
-    const canUpload = () => {
-      let uploadResult = Promise.resolve(true);
-      if (beforeUpload.value) {
-        const result = beforeUpload.value(getFullFiles()[0] || {});
-        if (typeof result !== "undefined") {
-          if (result.then) {
-            uploadResult = result;
-          } else {
-            uploadResult = Promise.resolve(result);
-          }
-        }
-      }
-      return uploadResult;
-    };
-    const fileUpload = () => {
-      canUpload().then((canUpload2) => {
-        if (!canUpload2) {
-          return;
-        }
-        upload2().then((results) => {
-          ctx.emit("successEvent", results);
-          const newFiles = results.map((result) => result.file);
-          const newUploadedFiles = [...newFiles, ...uploadedFiles.value];
-          ctx.emit("update:uploadedFiles", newUploadedFiles);
-        }).catch((error) => {
-          console.error(error);
-          if (fileUploaders.value[0]) {
-            fileUploaders.value[0].percentage = 0;
-          }
-          ctx.emit("errorEvent", error);
-        });
-      });
-    };
-    const checkValid = () => {
-      fileUploaders.value.forEach((fileUploader) => {
-        const checkResult = _validateFiles(fileUploader.file, fileOptions.value.accept, fileUploader.uploadOptions);
-        if (checkResult.checkError) {
-          deleteFile(fileUploader.file);
-          alertMsg(checkResult.errorMsg);
-        }
-      });
-    };
-    const _dealFiles = (promise) => {
-      promise.then((files) => {
-        var _a;
-        files.forEach((file2) => {
-          removeFiles();
-          addFile(file2, uploadOptions.value);
-        });
-        checkValid();
-        const file = (_a = fileUploaders.value[0]) == null ? void 0 : _a.file;
-        if (props.onChange) {
-          props.onChange(file);
-        }
-        if (file) {
-          ctx.emit("fileSelect", file);
-        }
-        if (autoUpload.value) {
-          fileUpload();
-        }
-      }).catch((error) => {
-        alertMsg(error.message);
-      });
-    };
-    const handleClick = () => {
-      var _a;
-      if (disabled.value || fileUploaders.value[0] && ((_a = fileUploaders.value[0]) == null ? void 0 : _a.status) === UploadStatus.uploading) {
-        return;
-      }
-      _dealFiles(triggerSelectFiles(fileOptions.value));
-    };
-    const onDeleteFile = (event) => {
-      event.stopPropagation();
-      const files = getFiles();
-      deleteFile(files[0]);
-    };
-    const deleteUploadedFile = (file) => {
-      const newUploadedFiles = uploadedFiles.value.filter((uploadedFile) => {
-        return uploadedFile.name !== file.name;
-      });
-      ctx.emit("deleteUploadedFileEvent", file);
-      ctx.emit("update:uploadedFiles", newUploadedFiles);
-    };
-    const onFileDrop = (files) => {
-      isDropOVer.value = false;
-      _dealFiles(triggerDropFiles(files));
-      ctx.emit("fileDrop", files[0]);
-    };
-    const onFileOver = (event) => {
-      isDropOVer.value = event;
-      ctx.emit("fileOver", event);
-    };
-    return {
-      placeholderText,
-      filename,
-      autoUpload,
-      withoutBtn,
-      fileUploaders,
-      uploadText,
-      handleClick,
-      onDeleteFile,
-      fileUpload,
-      enableDrop,
-      onFileDrop,
-      onFileOver,
-      isDropOVer,
-      showTip,
-      uploadedFiles,
-      deleteUploadedFile
-    };
-  },
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-    const {
-      placeholderText,
-      filename,
-      autoUpload,
-      withoutBtn,
-      fileUploaders,
-      uploadText,
-      handleClick,
-      onDeleteFile,
-      fileUpload,
-      enableDrop,
-      onFileDrop,
-      onFileOver,
-      isDropOVer,
-      disabled,
-      showTip,
-      uploadedFiles,
-      deleteUploadedFile
-    } = this;
-    return createVNode("div", null, [withDirectives(createVNode("div", {
-      "class": "devui-upload",
-      "style": `border: ${isDropOVer ? "1px solid #15bf15" : "0"}`
-    }, [((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) ? createVNode("div", {
-      "onClick": handleClick
-    }, [this.$slots.default()]) : createVNode("div", {
-      "class": `devui-input-group ${disabled || ((_c = fileUploaders[0]) == null ? void 0 : _c.status) === UploadStatus.uploading ? "disabled" : ""}`,
-      "onClick": handleClick
-    }, [createVNode("div", {
-      "class": "devui-form-control devui-files-list"
-    }, [!filename && createVNode("div", {
-      "class": "devui-file-item devui-upload-placeholder"
-    }, [placeholderText]), !!filename && createVNode("div", {
-      "class": "devui-file-tag devui-file-item",
-      "title": filename,
-      "style": "display: inline-block; margin: 0 2px 2px 0"
-    }, [createVNode("span", {
-      "class": `devui-filename ${((_d = fileUploaders[0]) == null ? void 0 : _d.status) === UploadStatus.failed ? "devui-failed-color" : ""}`
-    }, [filename]), createVNode(resolveComponent("d-icon"), {
-      "name": "close",
-      "class": `${((_e = fileUploaders[0]) == null ? void 0 : _e.status) === UploadStatus.failed ? "devui-upload-delete-file-button" : ""} ${((_f = fileUploaders[0]) == null ? void 0 : _f.status) === UploadStatus.uploading || ((_g = fileUploaders[0]) == null ? void 0 : _g.status) === UploadStatus.uploaded ? "devui-uploading-delete" : ""}`,
-      "onClick": (event) => onDeleteFile(event)
-    }, null), ((_h = fileUploaders[0]) == null ? void 0 : _h.status) === UploadStatus.uploading && createVNode("div", {
-      "class": "icon devui-upload-progress"
-    }, [createVNode(resolveComponent("d-progress"), {
-      "isCircle": true,
-      "percentage": fileUploaders[0].percentage,
-      "barbgcolor": "#50D4AB",
-      "strokeWidth": 8,
-      "showContent": false
-    }, null)]), fileUploaders[0].status === UploadStatus.failed && createVNode(resolveComponent("d-icon"), {
-      "name": "running",
-      "onClick": fileUpload
-    }, null), fileUploaders[0].status === UploadStatus.uploaded && createVNode(resolveComponent("d-icon"), {
-      "name": "right",
-      "color": "#50d4ab"
-    }, null)])]), createVNode("span", {
-      "class": "devui-input-group-addon"
-    }, [createVNode(resolveComponent("d-icon"), {
-      "name": "more-operate",
-      "color": "#252b3a"
-    }, null)])]), !autoUpload && !withoutBtn && createVNode(resolveComponent("d-button"), {
-      "style": "marginLeft: 8px",
-      "bsStyle": "common",
-      "onClick": fileUpload,
-      "disabled": disabled || ((_i = fileUploaders[0]) == null ? void 0 : _i.status) === UploadStatus.uploading
-    }, {
-      default: () => {
-        var _a2, _b2, _c2, _d2;
-        return [(!fileUploaders[0] || !((_a2 = fileUploaders[0]) == null ? void 0 : _a2.status)) && createVNode("span", null, [uploadText]), ((_b2 = fileUploaders[0]) == null ? void 0 : _b2.status) === UploadStatus.uploading && createVNode("span", null, [createTextVNode("\u4E0A\u4F20\u4E2D...")]), ((_c2 = fileUploaders[0]) == null ? void 0 : _c2.status) === UploadStatus.uploaded && createVNode("span", null, [createTextVNode("\u5DF2\u4E0A\u4F20")]), ((_d2 = fileUploaders[0]) == null ? void 0 : _d2.status) === UploadStatus.failed && createVNode("span", null, [createTextVNode("\u4E0A\u4F20\u5931\u8D25")])];
-      }
-    })]), [[resolveDirective("file-drop"), {
-      enableDrop,
-      isSingle: true,
-      onFileDrop,
-      onFileOver
-    }]]), showTip && createVNode("div", {
-      "class": "devui-upload-tip"
-    }, [((_j = fileUploaders[0]) == null ? void 0 : _j.status) === UploadStatus.uploading && createVNode("span", {
-      "class": "devui-loading"
-    }, [i18nText.uploading]), ((_k = fileUploaders[0]) == null ? void 0 : _k.status) === UploadStatus.uploaded && createVNode("div", {
-      "class": "devui-loaded"
-    }, [createVNode(resolveComponent("d-icon"), {
-      "name": "right-o",
-      "color": "#50d4ab"
-    }, null), createVNode("span", {
-      "style": "vertical-align: middle"
-    }, [i18nText.uploadSuccess])]), ((_l = fileUploaders[0]) == null ? void 0 : _l.status) === UploadStatus.failed && createVNode("div", {
-      "class": "devui-upload-failed"
-    }, [createVNode(resolveComponent("d-icon"), {
-      "name": "info-o",
-      "color": "#f66f6a"
-    }, null), createVNode("span", {
-      "style": "vertical-align: middle"
-    }, [createVNode("span", {
-      "style": "margin-right: 8px"
-    }, [i18nText.uploadFailed]), createVNode("a", {
-      "onClick": fileUpload
-    }, [i18nText.reUpload])])])]), createVNode("div", null, [(_n = (_m = this.$slots).preloadFiles) == null ? void 0 : _n.call(_m, {
-      fileUploaders,
-      deleteFile: onDeleteFile
-    })]), createVNode("div", null, [(_p = (_o = this.$slots).uploadedFiles) == null ? void 0 : _p.call(_o, {
-      uploadedFiles,
-      deleteFile: deleteUploadedFile
-    })])]);
-  }
-});
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var MultiUpload = defineComponent({
-  name: "DMultipleUpload",
-  props: multiUploadProps,
-  emits: ["fileDrop", "fileOver", "fileSelect", "successEvent", "errorEvent", "deleteUploadedFileEvent", "update:uploadedFiles"],
+var Upload = defineComponent({
+  name: "DUpload",
+  props: uploadProps,
+  emits: ["fileDrop", "fileOver", "fileSelect", "deleteUploadedFile", "update:uploadedFiles"],
   setup(props, ctx) {
     const {
       uploadOptions,
-      fileOptions,
       placeholderText,
       autoUpload,
       withoutBtn,
@@ -2815,8 +2469,10 @@ var MultiUpload = defineComponent({
       beforeUpload,
       enableDrop,
       oneTimeUpload,
-      showTip,
-      uploadedFiles
+      uploadedFiles,
+      multiple,
+      accept,
+      webkitdirectory
     } = toRefs(props);
     const {
       triggerSelectFiles,
@@ -2825,7 +2481,6 @@ var MultiUpload = defineComponent({
       checkAllFilesSize
     } = useSelectFiles();
     const {
-      getFiles,
       fileUploaders,
       addFile,
       getFullFiles,
@@ -2850,7 +2505,7 @@ var MultiUpload = defineComponent({
       let totalFileSize = 0;
       fileUploaders.value.forEach((fileUploader) => {
         totalFileSize += fileUploader.file.size;
-        const checkResult = _validateFiles(fileUploader.file, fileOptions.value.accept, fileUploader.uploadOptions);
+        const checkResult = _validateFiles(fileUploader.file, accept.value, fileUploader.uploadOptions);
         if (checkResult && checkResult.checkError) {
           deleteFile(fileUploader.file);
           alertMsg(checkResult.errorMsg);
@@ -2869,6 +2524,9 @@ var MultiUpload = defineComponent({
       resetSameNameFiles();
       promise.then((files) => {
         files.forEach((file) => {
+          if (!multiple.value) {
+            removeFiles();
+          }
           addFile(file, uploadOptions.value);
         });
         checkValid();
@@ -2879,7 +2537,7 @@ var MultiUpload = defineComponent({
         const selectedFiles = fileUploaders.value.filter((fileUploader) => fileUploader.status === UploadStatus.preLoad).map((fileUploader) => fileUploader.file);
         ctx.emit("fileSelect", selectedFiles);
         if (autoUpload.value) {
-          upload2();
+          fileUpload();
         }
       }).catch((error) => {
         alertMsg(error.message);
@@ -2889,7 +2547,11 @@ var MultiUpload = defineComponent({
       if (disabled.value) {
         return;
       }
-      _dealFiles(triggerSelectFiles(fileOptions.value));
+      _dealFiles(triggerSelectFiles({
+        accept: accept.value,
+        multiple: multiple.value,
+        webkitdirectory: webkitdirectory.value
+      }));
     };
     const onFileDrop = (files) => {
       isDropOVer.value = false;
@@ -2900,17 +2562,20 @@ var MultiUpload = defineComponent({
       isDropOVer.value = event;
       ctx.emit("fileOver", event);
     };
-    const onDeleteFile = (event, file) => {
-      event.stopPropagation();
-      deleteFile(file);
-    };
     const deleteUploadedFile = (file) => {
       const newUploadedFiles = uploadedFiles.value.filter((uploadedFile) => {
         return uploadedFile.name !== file.name;
       });
-      ctx.emit("deleteUploadedFileEvent", file);
+      ctx.emit("deleteUploadedFile", file);
       ctx.emit("update:uploadedFiles", newUploadedFiles);
     };
+    const onDeleteFile = (event, file, status) => {
+      event.stopPropagation();
+      if (status === UploadStatus.uploaded) {
+        deleteUploadedFile(file);
+      }
+      deleteFile(file);
+    };
     const canUpload = () => {
       let uploadResult = Promise.resolve(true);
       if (beforeUpload.value) {
@@ -2936,12 +2601,12 @@ var MultiUpload = defineComponent({
         }
         const uploadObservable = oneTimeUpload.value ? _oneTimeUpload() : upload2(fileUploader);
         uploadObservable.then((results) => {
-          ctx.emit("successEvent", results);
+          props["on-success"] && props["on-success"](results);
           const newFiles = results.map((result) => result.file);
           const newUploadedFiles = [...newFiles, ...uploadedFiles.value];
           ctx.emit("update:uploadedFiles", newUploadedFiles);
         }).catch((error) => {
-          ctx.emit("errorEvent", error);
+          props["on-error"] && props["on-error"](error);
         });
       });
     };
@@ -2986,7 +2651,6 @@ var MultiUpload = defineComponent({
     };
     return {
       uploadOptions,
-      fileOptions,
       placeholderText,
       autoUpload,
       withoutBtn,
@@ -3001,11 +2665,11 @@ var MultiUpload = defineComponent({
       fileUploaders,
       onDeleteFile,
       fileUpload,
-      showTip,
       getStatus,
       uploadTips,
       cancelUpload,
-      deleteUploadedFile
+      deleteUploadedFile,
+      multiple
     };
   },
   render() {
@@ -3016,7 +2680,6 @@ var MultiUpload = defineComponent({
       withoutBtn,
       uploadText,
       disabled,
-      beforeUpload,
       enableDrop,
       isDropOVer,
       onFileDrop,
@@ -3025,14 +2688,11 @@ var MultiUpload = defineComponent({
       fileUploaders,
       onDeleteFile,
       fileUpload,
-      showTip,
-      getStatus,
-      uploadTips,
-      cancelUpload,
       uploadedFiles,
-      deleteUploadedFile
+      deleteUploadedFile,
+      multiple
     } = this;
-    return createVNode(Fragment, null, [withDirectives(createVNode("div", {
+    return createVNode("div", null, [withDirectives(createVNode("div", {
       "class": "devui-upload",
       "style": `border: ${isDropOVer ? "1px solid #15bf15" : "0"}`
     }, [((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) ? createVNode("div", {
@@ -3054,7 +2714,7 @@ var MultiUpload = defineComponent({
     }, [fileUploader.file.name]), createVNode(resolveComponent("d-icon"), {
       "name": "close",
       "class": `${(fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.failed ? "devui-upload-delete-file-button" : ""} ${(fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.uploading || (fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.uploaded ? "devui-uploading-delete" : ""}`,
-      "onClick": (event) => onDeleteFile(event, fileUploader.file)
+      "onClick": (event) => onDeleteFile(event, fileUploader.file, fileUploader.status)
     }, null), fileUploader.status === UploadStatus.uploading && createVNode("div", {
       "class": "icon devui-upload-progress"
     }, [createVNode(resolveComponent("d-progress"), {
@@ -3076,14 +2736,14 @@ var MultiUpload = defineComponent({
       "color": "#252b3a"
     }, null)])]), !autoUpload && !withoutBtn && createVNode(resolveComponent("d-button"), {
       "style": "marginLeft: 8px",
-      "bsStyle": "common",
+      "variant": "common",
       "disabled": disabled,
       "onClick": fileUpload
     }, _isSlot(uploadText) ? uploadText : {
       default: () => [uploadText]
     })]), [[resolveDirective("file-drop"), {
       enableDrop,
-      isSingle: false,
+      isSingle: !multiple,
       onFileDrop,
       onFileOver
     }]]), createVNode("div", null, [(_d = (_c = this.$slots).preloadFiles) == null ? void 0 : _d.call(_c, {
@@ -3147,7 +2807,7 @@ const onDrop = (el, binding) => {
     if (isSingle) {
       onFileDrop && onFileDrop([transfer.files[0]]);
     } else {
-      onFileDrop && onFileDrop(transfer.files);
+      onFileDrop && onFileDrop(Array.from(transfer.files));
     }
   });
 };
@@ -3165,14 +2825,13 @@ const fileDropDirective = {
 Upload.install = function(app) {
   app.directive("file-drop", fileDropDirective);
   app.component(Upload.name, Upload);
-  app.component(MultiUpload.name, MultiUpload);
 };
 var index = {
   title: "Upload \u4E0A\u4F20",
   category: "\u6570\u636E\u5F55\u5165",
-  status: "80%",
+  status: "100%",
   install(app) {
     app.use(Upload);
   }
 };
-export { MultiUpload, Upload, index as default };
+export { Upload, index as default };