vue-devui 1.0.0-rc.1 → 1.0.0-rc.12

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, toRefs, createVNode, computed, watch, Transition, reactive, createApp, onUnmounted, mergeProps, isVNode, ref, withDirectives, resolveComponent, resolveDirective } from "vue";
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, watch, Transition, reactive, createApp, onUnmounted, isVNode, ref, getCurrentInstance, withDirectives, resolveComponent, resolveDirective } from "vue";
 const notificationProps = {
   modelValue: {
     type: Boolean,
@@ -43,6 +43,7 @@ const notificationProps = {
     type: Function
   }
 };
+const DEFAULT_PREFIX = "icon";
 const iconProps = {
   name: {
     type: String,
@@ -50,43 +51,201 @@ const iconProps = {
     required: true
   },
   size: {
-    type: String,
+    type: [Number, String],
     default: "inherit"
   },
   color: {
     type: String,
     default: "inherit"
   },
+  component: {
+    type: Object,
+    default: null
+  },
   classPrefix: {
     type: String,
-    default: "icon"
+    default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
   }
 };
-var Icon = defineComponent({
-  name: "DIcon",
-  props: iconProps,
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  }
+};
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
   setup(props) {
     const {
       name,
-      size,
       color,
-      classPrefix
+      size
     } = toRefs(props);
+    const ns2 = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
     return () => {
-      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
-        "src": name.value,
-        "alt": name.value.split("/")[name.value.split("/").length - 1],
-        "style": {
-          width: size.value,
-          verticalAlign: "text-bottom"
-        }
-      }, null) : createVNode("i", {
-        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
-        "style": {
-          fontSize: size.value,
-          color: color.value
-        }
-      }, null);
+      return createVNode("svg", {
+        "class": ns2.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns2 = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
+      "style": {
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
+      "style": {
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
+      "style": {
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+  };
+  return {
+    iconDom
+  };
+}
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const {
+      disabled,
+      operable
+    } = toRefs(props);
+    const {
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns2 = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns2.e("container")]: true,
+      [ns2.m("disabled")]: disabled.value,
+      [ns2.m("operable")]: operable.value
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
+      }
+      ctx.emit("click", e);
+    };
+    return () => {
+      var _a, _b, _c, _d;
+      return createVNode("div", {
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
+    };
+  }
+});
+var iconGroup = "";
+defineComponent({
+  name: "DIconGroup",
+  setup(_, ctx) {
+    const ns2 = useNamespace("icon-group");
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns2.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
 });
@@ -95,8 +254,9 @@ var Close = defineComponent({
   setup(props, {
     emit
   }) {
+    const ns2 = useNamespace("notification");
     return () => createVNode("div", {
-      "class": "devui-notification-icon-close",
+      "class": ns2.e("icon-close"),
       "onClick": (e) => emit("click", e)
     }, [createVNode(Icon, {
       "name": "close",
@@ -104,6 +264,106 @@ var Close = defineComponent({
     }, null)]);
   }
 });
+const ns = useNamespace("notification");
+function SuccessIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("defs", null, [createVNode("polygon", {
+    "id": "path-s",
+    "points": "6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391            6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"
+  }, null)]), createVNode("g", {
+    "id": "correct",
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("mask", {
+    "id": "mask-2",
+    "fill": "white"
+  }, [createVNode("use", {
+    "xlink:href": "#path-s"
+  }, null)]), createVNode("use", {
+    "id": "Mask",
+    "class": ns.e("image-success-path"),
+    "xlink:href": "#path-s"
+  }, null)])]);
+}
+function WarningIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "class": ns.e("warning-outer"),
+    "d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117            15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873            0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
+  }, null), createVNode("path", {
+    "class": ns.e("warning-inner"),
+    "stroke-width": "0.3",
+    "fill-rule": "nonzero",
+    "d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105            L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
+  }, null)])]);
+}
+function InfoIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("g", {
+    "id": "info",
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "class": ns.e("image-info-path"),
+    "d": "M7,13 L7,6 L9,6 L9,13 L7,13 Z M7,5 L7,3 L9,3 L9,5 L7,5 Z",
+    "id": "info"
+  }, null)])]);
+}
+function ErrorIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg",
+    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+  }, [createVNode("defs", null, [createVNode("polygon", {
+    "id": "path-e",
+    "points": "8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085            10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425            8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"
+  }, null)]), createVNode("g", {
+    "id": "error",
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("mask", {
+    "id": "mask-2",
+    "fill": "white"
+  }, [createVNode("use", {
+    "xlink:href": "#path-e"
+  }, null)]), createVNode("use", {
+    "id": "Mask",
+    "class": ns.e("image-error-path"),
+    "xlink:href": "#path-e"
+  }, null)])]);
+}
 var TypeIcon = defineComponent({
   props: {
     type: {
@@ -115,22 +375,14 @@ var TypeIcon = defineComponent({
     const {
       type
     } = toRefs(props);
+    const ns2 = useNamespace("notification");
     const classes = computed(() => ({
-      "devui-notification-image": true,
-      [`devui-notification-image-${type.value}`]: true
+      [ns2.e("image")]: true,
+      [ns2.em("image", type.value)]: true
     }));
-    const severityIconMap = {
-      info: "info-o",
-      success: "right-o",
-      warning: "warning-o",
-      error: "error-o"
-    };
     return () => createVNode("span", {
       "class": classes.value
-    }, [type.value !== "normal" && createVNode(Icon, {
-      "name": severityIconMap[type.value],
-      "size": "16px"
-    }, null)]);
+    }, [type.value && type.value !== "normal" && (type.value === "success" && createVNode(SuccessIcon, null, null) || type.value === "info" && createVNode(InfoIcon, null, null) || type.value === "warning" && createVNode(WarningIcon, null, null) || type.value === "error" && createVNode(ErrorIcon, null, null))]);
   }
 });
 function useNotification(props) {
@@ -198,6 +450,7 @@ var Notification = defineComponent({
       close: close2,
       handleDestroy
     } = useEvent(props, emit);
+    const ns2 = useNamespace("notification");
     return () => createVNode(Transition, {
       "name": "notification-fade",
       "onAfterLeave": handleDestroy
@@ -205,23 +458,23 @@ var Notification = defineComponent({
       default: () => {
         var _a;
         return [modelValue.value && createVNode("div", {
-          "class": "devui-notification"
+          "class": ns2.b()
         }, [createVNode("div", {
           "class": classes.value,
           "onMouseenter": interrupt,
           "onMouseleave": removeReset
         }, [createVNode("div", {
-          "class": "devui-notification-item"
+          "class": ns2.e("item")
         }, [createVNode(Close, {
           "onClick": close2
         }, null), title.value && createVNode(TypeIcon, {
           "type": type.value
         }, null), createVNode("div", {
-          "class": "devui-notification-message"
+          "class": ns2.e("message")
         }, [createVNode("span", {
-          "class": "devui-notification-title"
+          "class": ns2.e("title")
         }, [title.value]), createVNode("span", {
-          "class": "devui-notification-content"
+          "class": ns2.e("content")
         }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])])])])])];
       }
     });
@@ -326,7 +579,7 @@ const uploadProps = {
   },
   placeholder: {
     type: String,
-    default: "\u9009\u62E9\u6587\u4EF6"
+    default: ""
   },
   modelValue: {
     type: Array,
@@ -365,30 +618,40 @@ const uploadProps = {
     type: Function,
     default: void 0
   },
-  "on-error": {
+  onError: {
     type: Function,
     default: void 0
   },
-  "on-success": {
+  onSuccess: {
+    type: Function,
+    default: void 0
+  },
+  onExceed: {
+    type: Function,
+    default: void 0
+  },
+  onProgress: {
+    type: Function,
+    default: void 0
+  },
+  onPreview: {
     type: Function,
     default: void 0
   },
   oneTimeUpload: {
     type: Boolean,
     default: false
+  },
+  limit: {
+    type: Number,
+    default: 0
+  },
+  httpRequest: {
+    type: Function,
+    default: void 0
   }
 };
-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 useSelectFiles = (t) => {
   const BEYOND_MAXIMAL_FILE_SIZE_MSG = ref("");
   const simulateClickEvent = (input) => {
     const evt = document.createEvent("MouseEvents");
@@ -449,13 +712,13 @@ const useSelectFiles = () => {
     if (!isAllowedFileType(accept, file)) {
       return {
         checkError: true,
-        errorMsg: getNotAllowedFileTypeMsg(file.name, accept)
+        errorMsg: t("getNotAllowedFileTypeMsg")(file.name, accept)
       };
     }
     if (uploadOptions && beyondMaximalSize(file.size, uploadOptions.maximumSize)) {
       return {
         checkError: true,
-        errorMsg: getBeyondMaximalFileSizeMsg(file.name, uploadOptions.maximumSize)
+        errorMsg: t("getBeyondMaximalFileSizeMsg")(file.name, uploadOptions.maximumSize || 0)
       };
     }
     return { checkError: false, errorMsg: void 0 };
@@ -469,7 +732,7 @@ const useSelectFiles = () => {
   };
   const checkAllFilesSize = (fileSize, maximumSize) => {
     if (beyondMaximalSize(fileSize, maximumSize)) {
-      BEYOND_MAXIMAL_FILE_SIZE_MSG.value = getAllFilesBeyondMaximalFileSizeMsg(maximumSize);
+      BEYOND_MAXIMAL_FILE_SIZE_MSG.value = t("getAllFilesBeyondMaximalFileSizeMsg")(maximumSize);
       return { checkError: true, errorMsg: BEYOND_MAXIMAL_FILE_SIZE_MSG.value };
     }
   };
@@ -494,11 +757,11 @@ class FileUploader {
   }
   send(uploadFiles) {
     return new Promise((resolve, reject) => {
-      const { uri, method, headers, authToken, authTokenHeader, additionalParameter, fileFieldName, withCredentials, responseType } = this.uploadOptions;
+      const { uri, method, headers, authToken, authTokenHeader, additionalParameter, fileFieldName, withCredentials, responseType } = this.uploadOptions || {};
       const authTokenHeader_ = authTokenHeader || "Authorization";
       const fileFieldName_ = fileFieldName || "file";
       this.xhr = new XMLHttpRequest();
-      this.xhr.open(method || "POST", uri);
+      this.xhr.open(method || "POST", uri || "");
       if (withCredentials) {
         this.xhr.withCredentials = withCredentials;
       }
@@ -510,7 +773,8 @@ class FileUploader {
       }
       if (headers) {
         Object.keys(headers).forEach((key) => {
-          this.xhr.setRequestHeader(key, headers[key]);
+          var _a;
+          (_a = this.xhr) == null ? void 0 : _a.setRequestHeader(key, headers[key]);
         });
       }
       this.xhr.upload.onprogress = (e) => {
@@ -524,19 +788,21 @@ class FileUploader {
         this.xhr = null;
       };
       this.xhr.onerror = () => {
-        this.response = this.xhr.response;
+        var _a, _b;
+        this.response = (_a = this.xhr) == null ? void 0 : _a.response;
         this.status = UploadStatus.failed;
-        reject({ file: this.file, response: this.xhr.response });
+        reject({ file: this.file, response: (_b = this.xhr) == null ? void 0 : _b.response });
       };
       this.xhr.onload = () => {
-        if (this.xhr.readyState === 4 && this.xhr.status >= 200 && this.xhr.status < 300) {
+        var _a, _b, _c;
+        if (((_a = this.xhr) == null ? void 0 : _a.readyState) === 4 && this.xhr.status >= 200 && this.xhr.status < 300) {
           this.response = this.xhr.response;
           this.status = UploadStatus.uploaded;
           resolve({ file: this.file, response: this.xhr.response });
         } else {
-          this.response = this.xhr.response;
+          this.response = (_b = this.xhr) == null ? void 0 : _b.response;
           this.status = UploadStatus.failed;
-          reject({ file: this.file, response: this.xhr.response });
+          reject({ file: this.file, response: (_c = this.xhr) == null ? void 0 : _c.response });
         }
       };
     });
@@ -643,7 +909,7 @@ const useUpload = () => {
   };
   const deleteFile = (file) => {
     const deleteUploadFile = fileUploaders.value.find((fileUploader) => fileUploader.file === file);
-    deleteUploadFile.cancel();
+    deleteUploadFile == null ? void 0 : deleteUploadFile.cancel();
     fileUploaders.value = fileUploaders.value.filter((fileUploader) => {
       return file !== fileUploader.file;
     });
@@ -672,11 +938,31 @@ const useUpload = () => {
   };
 };
 var upload = "";
+const camelize = (name) => name.substring(1).replace(/^\S/, (s) => s.toLocaleLowerCase());
+function get(object, path) {
+  const keys = path.split(".");
+  let result = object;
+  keys.forEach((key) => {
+    var _a;
+    result = (_a = result[key]) != null ? _a : "";
+  });
+  return result;
+}
+function createI18nTranslate(name, app, newPrefix) {
+  const prefix = newPrefix || camelize(name) + ".";
+  return (path) => {
+    const messages = app == null ? void 0 : app.appContext.config.globalProperties.langMessages.value;
+    const message = get(messages, prefix + path) || get(messages, path);
+    return message;
+  };
+}
 var Upload = defineComponent({
   name: "DUpload",
   props: uploadProps,
   emits: ["fileDrop", "fileOver", "fileSelect", "deleteUploadedFile", "update:modelValue"],
   setup(props, ctx) {
+    const app = getCurrentInstance();
+    const t = createI18nTranslate("DUpload", app);
     const {
       uploadOptions,
       placeholder,
@@ -688,14 +974,20 @@ var Upload = defineComponent({
       modelValue,
       multiple,
       accept,
-      webkitdirectory
+      webkitdirectory,
+      limit,
+      httpRequest
     } = toRefs(props);
+    const ns2 = useNamespace("upload");
+    const inputGroupNs = useNamespace("input-group");
+    const formControlNs = useNamespace("form-control");
+    const inputGroupAddOnNs = useNamespace("input-group-addon");
     const {
       triggerSelectFiles,
       _validateFiles,
       triggerDropFiles,
       checkAllFilesSize
-    } = useSelectFiles();
+    } = useSelectFiles(t);
     const {
       fileUploaders,
       addFile,
@@ -707,8 +999,8 @@ var Upload = defineComponent({
       _oneTimeUpload,
       getSameNameFiles
     } = useUpload();
-    const isDropOVer = ref(false);
-    ref("");
+    const isDropOver = ref(false);
+    const selectedFiles = ref([]);
     const alertMsg = (errorMsg) => {
       NotificationService.open({
         type: "warning",
@@ -716,10 +1008,11 @@ var Upload = defineComponent({
       });
     };
     const checkValid = () => {
+      var _a;
       let totalFileSize = 0;
       fileUploaders.value.forEach((fileUploader) => {
         totalFileSize += fileUploader.file.size;
-        const checkResult = _validateFiles(fileUploader.file, accept.value, fileUploader.uploadOptions);
+        const checkResult = _validateFiles(fileUploader.file, (accept == null ? void 0 : accept.value) || "", fileUploader.uploadOptions);
         if (checkResult && checkResult.checkError) {
           deleteFile(fileUploader.file);
           alertMsg(checkResult.errorMsg);
@@ -727,53 +1020,15 @@ var Upload = defineComponent({
         }
       });
       if (oneTimeUpload.value) {
-        const checkResult = checkAllFilesSize(totalFileSize, uploadOptions.value.maximumSize);
+        const checkResult = checkAllFilesSize(totalFileSize, ((_a = uploadOptions == null ? void 0 : uploadOptions.value) == null ? void 0 : _a.maximumSize) || 0);
         if (checkResult && checkResult.checkError) {
           removeFiles();
           alertMsg(checkResult.errorMsg);
         }
       }
     };
-    const _dealFiles = (promise) => {
-      resetSameNameFiles();
-      promise.then((files) => {
-        files.forEach((file) => {
-          if (!multiple.value) {
-            removeFiles();
-          }
-          addFile(file, uploadOptions.value);
-        });
-        checkValid();
-        const sameNameFiles = getSameNameFiles();
-        if (uploadOptions.value && uploadOptions.value.checkSameName && sameNameFiles.length) {
-          alertMsg(getExistSameNameFilesMsg(sameNameFiles));
-        }
-        const selectedFiles = fileUploaders.value.filter((fileUploader) => fileUploader.status === UploadStatus.preLoad).map((fileUploader) => fileUploader.file);
-        ctx.emit("fileSelect", selectedFiles);
-        if (autoUpload.value) {
-          fileUpload();
-        }
-      }).catch((error) => {
-        alertMsg(error.message);
-      });
-    };
-    const handleClick = () => {
-      if (disabled.value) {
-        return;
-      }
-      _dealFiles(triggerSelectFiles({
-        accept: accept.value,
-        multiple: multiple.value,
-        webkitdirectory: webkitdirectory.value
-      }));
-    };
-    const onFileDrop = (files) => {
-      isDropOVer.value = false;
-      _dealFiles(triggerDropFiles(files));
-      ctx.emit("fileDrop", files);
-    };
     const onFileOver = (event) => {
-      isDropOVer.value = event;
+      isDropOver.value = event;
       ctx.emit("fileOver", event);
     };
     const deleteUploadedFile = (file) => {
@@ -784,7 +1039,7 @@ var Upload = defineComponent({
       ctx.emit("update:modelValue", newUploadedFiles);
     };
     const onDeleteFile = (event, file, status) => {
-      event.stopPropagation();
+      event == null ? void 0 : event.stopPropagation();
       if (status === UploadStatus.uploaded) {
         deleteUploadedFile(file);
       }
@@ -792,13 +1047,13 @@ var Upload = defineComponent({
     };
     const canUpload = () => {
       let uploadResult = Promise.resolve(true);
-      if (beforeUpload.value) {
-        const result = beforeUpload.value(getFullFiles());
+      if (beforeUpload == null ? void 0 : beforeUpload.value) {
+        const result = beforeUpload == null ? void 0 : beforeUpload.value(getFullFiles());
         if (typeof result !== "undefined") {
-          if (result.then) {
-            uploadResult = result;
-          } else {
+          if (typeof result === "boolean") {
             uploadResult = Promise.resolve(result);
+          } else {
+            uploadResult = result;
           }
         }
       }
@@ -813,44 +1068,112 @@ var Upload = defineComponent({
           removeFiles();
           return;
         }
+        if (typeof (httpRequest == null ? void 0 : httpRequest.value) === "function") {
+          const files = fileUploaders.value.map((tempFileUploader) => tempFileUploader.file);
+          httpRequest.value(files);
+          return;
+        }
         const uploadObservable = oneTimeUpload.value ? _oneTimeUpload() : upload2(fileUploader);
-        uploadObservable.then((results) => {
-          props["on-success"] && props["on-success"](results);
+        props.onProgress && props.onProgress(selectedFiles.value, modelValue.value);
+        uploadObservable == null ? void 0 : uploadObservable.then((results) => {
+          props.onSuccess && props.onSuccess(results);
           const newFiles = results.map((result) => result.file);
           const newUploadedFiles = [...newFiles, ...modelValue.value];
           ctx.emit("update:modelValue", newUploadedFiles);
+          props.onChange && props.onChange(newFiles, newUploadedFiles);
         }).catch((error) => {
-          props["on-error"] && props["on-error"](error);
+          props.onError && props.onError(error);
+          props.onChange && props.onChange([error.file], modelValue.value);
+        });
+      });
+    };
+    const _dealFiles = (promise) => {
+      resetSameNameFiles();
+      promise.then((files) => {
+        if (limit.value && modelValue.value.length + files.length > limit.value) {
+          props.onExceed && props.onExceed(files, modelValue.value);
+          return;
+        }
+        props.onChange && props.onChange(files, modelValue.value);
+        files.forEach((file) => {
+          if (!multiple.value) {
+            removeFiles();
+          }
+          addFile(file, uploadOptions == null ? void 0 : uploadOptions.value);
         });
+        checkValid();
+        const sameNameFiles = getSameNameFiles();
+        if ((uploadOptions == null ? void 0 : uploadOptions.value) && uploadOptions.value.checkSameName && sameNameFiles.length) {
+          alertMsg(t("getExistSameNameFilesMsg")(sameNameFiles));
+        }
+        selectedFiles.value = fileUploaders.value.filter((fileUploader) => fileUploader.status === UploadStatus.preLoad).map((fileUploader) => fileUploader.file);
+        ctx.emit("fileSelect", selectedFiles.value);
+        if (autoUpload.value) {
+          fileUpload();
+        }
+      }).catch((error) => {
+        alertMsg(error.message);
+      });
+    };
+    const handleClick = () => {
+      if (disabled.value) {
+        return;
+      }
+      _dealFiles(triggerSelectFiles({
+        accept: accept == null ? void 0 : accept.value,
+        multiple: multiple.value,
+        webkitdirectory: webkitdirectory.value
+      }));
+    };
+    const onFileDrop = (files) => {
+      isDropOver.value = false;
+      _dealFiles(triggerDropFiles(files));
+      ctx.emit("fileDrop", files);
+    };
+    const submit = (event, fileUploader) => {
+      fileUpload(event, fileUploader);
+    };
+    const clearFiles = (event) => {
+      fileUploaders.value.forEach((fileUploader) => {
+        onDeleteFile(event, fileUploader.file, fileUploader.status);
       });
     };
+    const clickSelectedFile = (event, file) => {
+      event == null ? void 0 : event.stopPropagation();
+      props.onPreview && props.onPreview(file);
+    };
+    ctx.expose({
+      submit,
+      clearFiles
+    });
     return () => {
       var _a, _b, _c, _d;
       return createVNode("div", null, [withDirectives(createVNode("div", {
-        "class": "devui-upload",
-        "style": `border: ${isDropOVer.value ? "1px solid #15bf15" : "0"}`
+        "class": ns2.b(),
+        "style": `border: ${isDropOver.value ? "1px solid #15bf15" : "0"}`
       }, [((_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)) ? createVNode("div", {
         "onClick": handleClick
       }, [ctx.slots.default()]) : createVNode("div", {
-        "class": `devui-input-group ${disabled.value ? "disabled" : ""}`,
+        "class": [inputGroupNs.b(), disabled.value ? "disabled" : ""],
         "onClick": handleClick
       }, [fileUploaders.value.length === 0 && createVNode("div", {
-        "class": "devui-form-control devui-upload-placeholder"
-      }, [placeholder.value]), fileUploaders.value.length > 0 && createVNode("ul", {
-        "class": "devui-form-control devui-files-list"
+        "class": [formControlNs.b(), ns2.e("placeholder")]
+      }, [placeholder.value || t("placeholder")]), fileUploaders.value.length > 0 && createVNode("ul", {
+        "class": [formControlNs.b(), ns2.e("files-list")]
       }, [fileUploaders.value.map((fileUploader, index2) => createVNode("li", {
         "key": index2,
-        "class": "devui-file-item devui-file-tag",
-        "style": "display: inline-block; margin: 0 2px 2px 0",
-        "title": fileUploader.file.name
+        "class": [ns2.e("file-item"), ns2.e("file-tag")],
+        "style": "display: inline-block;",
+        "title": fileUploader.file.name,
+        "onClick": (event) => clickSelectedFile(event, fileUploader.file)
       }, [createVNode("span", {
-        "class": `devui-filename ${fileUploader.status === UploadStatus.failed ? "devui-failed-color" : ""}`
+        "class": [ns2.e("filename"), fileUploader.status === UploadStatus.failed ? ns2.m("failed-color") : ""]
       }, [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" : ""}`,
+        "class": [(fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.failed ? ns2.e("delete-file-button") : "", (fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.uploading || (fileUploader == null ? void 0 : fileUploader.status) === UploadStatus.uploaded ? ns2.e("delete") : ""],
         "onClick": (event) => onDeleteFile(event, fileUploader.file, fileUploader.status)
       }, null), fileUploader.status === UploadStatus.uploading && createVNode("div", {
-        "class": "icon devui-upload-progress"
+        "class": ["icon", ns2.e("progress")]
       }, [createVNode(resolveComponent("d-progress"), {
         "isCircle": true,
         "percentage": fileUploader.percentage,
@@ -864,7 +1187,7 @@ var Upload = defineComponent({
         "name": "right",
         "color": "#50d4ab"
       }, null)]))]), createVNode("span", {
-        "class": "devui-input-group-addon"
+        "class": inputGroupAddOnNs.b()
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "more-operate",
         "color": "#252b3a"