vue-devui 1.0.0-rc.9 → 1.0.0

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, computed, createVNode, resolveDynamicComponent, mergeProps, watch, Transition, reactive, createApp, onUnmounted, 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,9 +43,6 @@ const notificationProps = {
     type: Function
   }
 };
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
-}
 const DEFAULT_PREFIX = "icon";
 const iconProps = {
   name: {
@@ -68,6 +65,17 @@ const iconProps = {
   classPrefix: {
     type: String,
     default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
   }
 };
 const svgIconProps = {
@@ -138,51 +146,107 @@ var svgIcon = defineComponent({
     };
   }
 });
+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)`,
+        verticalAlign: "middle"
+      }
+    }, 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,
-  setup(props, {
-    attrs
-  }) {
+  emits: ["click"],
+  setup(props, ctx) {
     const {
-      component,
-      name,
-      size,
-      color,
-      classPrefix
+      disabled,
+      operable
     } = toRefs(props);
-    const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
-    const iconSize = computed(() => {
-      return typeof size.value === "number" ? `${size.value}px` : size.value;
-    });
-    const svgIconDom = () => {
-      return createVNode(IconComponent, mergeProps({
-        "name": name.value,
-        "color": color.value,
-        "size": iconSize.value
-      }, attrs), null);
-    };
-    const imgIconDom = () => {
-      return createVNode("img", mergeProps({
-        "src": name.value,
-        "alt": name.value.split("/")[name.value.split("/").length - 1],
-        "style": {
-          width: iconSize.value || ""
-        }
-      }, attrs), null);
+    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);
     };
-    const fontIconDom = () => {
-      const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
-      return createVNode("i", mergeProps({
-        "class": [classPrefix.value, fontIconClass],
-        "style": {
-          fontSize: iconSize.value,
-          color: color.value
-        }
-      }, attrs), null);
+    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 () => {
-      return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns2.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
 });
@@ -202,15 +266,20 @@ var Close = defineComponent({
   }
 });
 const ns = useNamespace("notification");
+const XLINK = {
+  "xmlns:xlink": "http://www.w3.org/1999/xlink"
+};
+const XLINK_HREF = {
+  "xlink:href": "#path-s"
+};
 function SuccessIcon() {
-  return createVNode("svg", {
+  return createVNode("svg", mergeProps({
     "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", {
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, 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", {
@@ -222,30 +291,26 @@ function SuccessIcon() {
   }, [createVNode("mask", {
     "id": "mask-2",
     "fill": "white"
-  }, [createVNode("use", {
-    "xlink:href": "#path-s"
-  }, null)]), createVNode("use", {
+  }, [createVNode("use", XLINK_HREF, null)]), createVNode("use", mergeProps({
     "id": "Mask",
-    "class": ns.e("image-success-path"),
-    "xlink:href": "#path-s"
-  }, null)])]);
+    "class": ns.e("image-success-path")
+  }, XLINK_HREF), null)])]);
 }
 function WarningIcon() {
-  return createVNode("svg", {
+  return createVNode("svg", mergeProps({
     "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", {
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, 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"
+    "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",
@@ -254,14 +319,13 @@ function WarningIcon() {
   }, null)])]);
 }
 function InfoIcon() {
-  return createVNode("svg", {
+  return createVNode("svg", mergeProps({
     "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", {
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, XLINK), [createVNode("g", {
     "id": "info",
     "stroke": "none",
     "stroke-width": "1",
@@ -274,14 +338,13 @@ function InfoIcon() {
   }, null)])]);
 }
 function ErrorIcon() {
-  return createVNode("svg", {
+  return createVNode("svg", mergeProps({
     "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", {
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, 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", {
@@ -293,13 +356,10 @@ function ErrorIcon() {
   }, [createVNode("mask", {
     "id": "mask-2",
     "fill": "white"
-  }, [createVNode("use", {
-    "xlink:href": "#path-e"
-  }, null)]), createVNode("use", {
+  }, [createVNode("use", XLINK_HREF, null)]), createVNode("use", mergeProps({
     "id": "Mask",
-    "class": ns.e("image-error-path"),
-    "xlink:href": "#path-e"
-  }, null)])]);
+    "class": ns.e("image-error-path")
+  }, XLINK_HREF), null)])]);
 }
 var TypeIcon = defineComponent({
   props: {
@@ -334,7 +394,7 @@ function useEvent(props, emit) {
   let timestamp;
   const close2 = () => {
     var _a;
-    clearTimeout(timer);
+    timer && clearTimeout(timer);
     timer = null;
     (_a = props.onClose) == null ? void 0 : _a.call(props);
     emit("update:modelValue", false);
@@ -427,13 +487,24 @@ const defaultOptions = {
 };
 function initInstance(props, content) {
   const container = document.createElement("div");
+  container.classList.add("notification__warpper");
+  const lastChild = document.body.lastElementChild;
+  let offset_Top = 50;
+  if (lastChild == null ? void 0 : lastChild.classList.contains("notification__warpper")) {
+    const notification2 = lastChild.lastElementChild;
+    const rects = notification2.getBoundingClientRect();
+    const height = rects.height;
+    const top = rects.top;
+    offset_Top = height + top;
+  }
   const app = createApp({
     setup() {
       onUnmounted(() => {
         document.body.removeChild(container);
       });
       return () => createVNode(Notification, mergeProps(props, {
-        "onDestroy": app.unmount
+        "onDestroy": app.unmount,
+        "style": [`top: ${offset_Top}px`]
       }), _isSlot(content) ? content : {
         default: () => [content]
       });
@@ -461,7 +532,7 @@ class NotificationService {
     initInstance(props, content);
     props.modelValue = true;
     clearTimeout(timer);
-    if (options.duration) {
+    if (options.duration && props.onClose) {
       timer = setTimeout(props.onClose, options.duration);
     }
   }
@@ -516,7 +587,7 @@ const uploadProps = {
   },
   placeholder: {
     type: String,
-    default: "\u9009\u62E9\u6587\u4EF6"
+    default: ""
   },
   modelValue: {
     type: Array,
@@ -555,30 +626,40 @@ const uploadProps = {
     type: Function,
     default: void 0
   },
-  "on-error": {
+  onError: {
+    type: Function,
+    default: void 0
+  },
+  onSuccess: {
+    type: Function,
+    default: void 0
+  },
+  onExceed: {
+    type: Function,
+    default: void 0
+  },
+  onProgress: {
     type: Function,
     default: void 0
   },
-  "on-success": {
+  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");
@@ -639,13 +720,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 || 0)
+        errorMsg: t("getBeyondMaximalFileSizeMsg")(file.name, uploadOptions.maximumSize || 0)
       };
     }
     return { checkError: false, errorMsg: void 0 };
@@ -659,7 +740,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 };
     }
   };
@@ -865,11 +946,181 @@ const useUpload = () => {
   };
 };
 var upload = "";
+function deepAssign(...objects) {
+  const isObject = (obj) => obj && typeof obj === "object";
+  return objects.reduce((prev, from) => {
+    Object.keys(from).forEach((key) => {
+      const pVal = prev[key];
+      const oVal = from[key];
+      if (Array.isArray(pVal) && Array.isArray(oVal)) {
+        prev[key] = Array.from(/* @__PURE__ */ new Set([...oVal, ...pVal]));
+      } else if (isObject(pVal) && isObject(oVal)) {
+        prev[key] = deepAssign(pVal, oVal);
+      } else {
+        prev[key] = oVal;
+      }
+    });
+    return prev;
+  }, {});
+}
+var zhCN = {
+  pagination: {
+    totalItemText: "\u6240\u6709\u6761\u76EE",
+    goToText: "\u8DF3\u81F3"
+  },
+  accordion: {
+    loading: "\u52A0\u8F7D\u4E2D",
+    noData: "\u6CA1\u6709\u6570\u636E"
+  },
+  autoCompleteDropdown: {
+    latestInput: "\u6700\u8FD1\u8F93\u5165"
+  },
+  cascaderList: {
+    noData: "\u6CA1\u6709\u6570\u636E"
+  },
+  colorPicker: {
+    foundationPanel: "\u57FA\u7840\u9762\u677F",
+    advancedPanel: "\u9AD8\u7EA7\u9762\u677F"
+  },
+  datePickerPro: {
+    ok: "\u786E\u5B9A",
+    placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F",
+    month1: "1\u6708",
+    month2: "2\u6708",
+    month3: "3\u6708",
+    month4: "4\u6708",
+    month5: "5\u6708",
+    month6: "6\u6708",
+    month7: "7\u6708",
+    month8: "8\u6708",
+    month9: "9\u6708",
+    month10: "10\u6708",
+    month11: "11\u6708",
+    month12: "12\u6708",
+    year: "\u5E74",
+    startPlaceholder: "\u8BF7\u9009\u62E9\u5F00\u59CB\u65E5\u671F",
+    endPlaceholder: "\u8BF7\u9009\u62E9\u7ED3\u675F\u65E5\u671F",
+    getWeekDays() {
+      return ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
+    },
+    getTimeArr() {
+      return ["\u65F6", "\u5206", "\u79D2"];
+    },
+    getYearMonthStr(year, month) {
+      return `${year}\u5E74${month}\u6708`;
+    }
+  },
+  editableSelect: {
+    noRelatedRecords: "\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55",
+    noData: "\u6CA1\u6709\u6570\u636E"
+  },
+  input: {
+    placeholder: "\u8BF7\u8F93\u5165"
+  },
+  splitterBar: {
+    collapse: "\u6536\u8D77",
+    expand: "\u5C55\u5F00"
+  },
+  stepsGuide: {
+    previous: "\u4E0A\u4E00\u6B65",
+    continue: "\u6211\u77E5\u9053\u5566\uFF0C\u7EE7\u7EED",
+    ok: "\u6211\u77E5\u9053\u5566"
+  },
+  table: {
+    selectAll: "\u5168\u9009",
+    ok: "\u786E\u5B9A"
+  },
+  timePopup: {
+    ok: "\u786E\u5B9A"
+  },
+  transfer: {
+    unit: "\u9879",
+    panelUnit: "\u9879",
+    headerUnit: "\u9879",
+    noData: "\u6682\u65E0\u6570\u636E",
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u641C\u7D22"
+  },
+  tree: {
+    loading: "\u52A0\u8F7D\u4E2D",
+    newNode: "\u65B0\u8282\u70B9",
+    selectPlaceholder: "\u8BF7\u9009\u62E9"
+  },
+  upload: {
+    placeholder: "\u9009\u62E9\u6587\u4EF6",
+    getExistSameNameFilesMsg(sameNames) {
+      return `\u60A8\u4E0A\u4F20\u7684 "${sameNames}" \u5B58\u5728\u91CD\u540D\u6587\u4EF6, \u8BF7\u91CD\u65B0\u9009\u62E9\u6587\u4EF6`;
+    },
+    getAllFilesBeyondMaximalFileSizeMsg(maximalSize) {
+      return `\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`;
+    },
+    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`;
+    },
+    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`;
+    }
+  },
+  search: {
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57"
+  },
+  select: {
+    placeholder: "\u8BF7\u9009\u62E9",
+    noDataText: "\u65E0\u6570\u636E",
+    noMatchText: "\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55",
+    loadingText: "\u52A0\u8F7D\u4E2D..."
+  },
+  tagInput: {
+    maxTagsText: "\u5DF2\u8FBE\u5230\u6700\u5927\u4E2A\u6570\uFF1A"
+  },
+  timeSelect: {
+    placeholder: "\u8BF7\u9009\u62E9\u65F6\u95F4"
+  }
+};
+const lang = ref("zh-CN");
+let langMessages = reactive({
+  [lang.value]: zhCN
+});
+const Locale = {
+  messages() {
+    return langMessages[lang.value];
+  },
+  lang() {
+    return lang.value;
+  },
+  use(newLang, newMessages) {
+    lang.value = newLang;
+    this.add({ [newLang]: newMessages });
+  },
+  add(newMessages = {}) {
+    langMessages = deepAssign(langMessages, newMessages);
+  }
+};
+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) => {
+    var _a;
+    const messages = ((_a = app == null ? void 0 : app.appContext.config.globalProperties.langMessages) == null ? void 0 : _a.value) || Locale.messages();
+    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,
@@ -881,7 +1132,9 @@ var Upload = defineComponent({
       modelValue,
       multiple,
       accept,
-      webkitdirectory
+      webkitdirectory,
+      limit,
+      httpRequest
     } = toRefs(props);
     const ns2 = useNamespace("upload");
     const inputGroupNs = useNamespace("input-group");
@@ -892,7 +1145,7 @@ var Upload = defineComponent({
       _validateFiles,
       triggerDropFiles,
       checkAllFilesSize
-    } = useSelectFiles();
+    } = useSelectFiles(t);
     const {
       fileUploaders,
       addFile,
@@ -904,7 +1157,8 @@ var Upload = defineComponent({
       _oneTimeUpload,
       getSameNameFiles
     } = useUpload();
-    const isDropOVer = ref(false);
+    const isDropOver = ref(false);
+    const selectedFiles = ref([]);
     const alertMsg = (errorMsg) => {
       NotificationService.open({
         type: "warning",
@@ -932,7 +1186,7 @@ var Upload = defineComponent({
       }
     };
     const onFileOver = (event) => {
-      isDropOVer.value = event;
+      isDropOver.value = event;
       ctx.emit("fileOver", event);
     };
     const deleteUploadedFile = (file) => {
@@ -943,7 +1197,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);
       }
@@ -972,20 +1226,33 @@ 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);
+        props.onProgress && props.onProgress(selectedFiles.value, modelValue.value);
         uploadObservable == null ? void 0 : uploadObservable.then((results) => {
-          props["on-success"] && props["on-success"](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();
@@ -995,10 +1262,10 @@ var Upload = defineComponent({
         checkValid();
         const sameNameFiles = getSameNameFiles();
         if ((uploadOptions == null ? void 0 : uploadOptions.value) && uploadOptions.value.checkSameName && sameNameFiles.length) {
-          alertMsg(getExistSameNameFilesMsg(sameNameFiles));
+          alertMsg(t("getExistSameNameFilesMsg")(sameNameFiles));
         }
-        const selectedFiles = fileUploaders.value.filter((fileUploader) => fileUploader.status === UploadStatus.preLoad).map((fileUploader) => fileUploader.file);
-        ctx.emit("fileSelect", selectedFiles);
+        selectedFiles.value = fileUploaders.value.filter((fileUploader) => fileUploader.status === UploadStatus.preLoad).map((fileUploader) => fileUploader.file);
+        ctx.emit("fileSelect", selectedFiles.value);
         if (autoUpload.value) {
           fileUpload();
         }
@@ -1017,15 +1284,31 @@ var Upload = defineComponent({
       }));
     };
     const onFileDrop = (files) => {
-      isDropOVer.value = false;
+      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": ns2.b(),
-        "style": `border: ${isDropOVer.value ? "1px solid #15bf15" : "0"}`
+        "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", {
@@ -1033,13 +1316,14 @@ var Upload = defineComponent({
         "onClick": handleClick
       }, [fileUploaders.value.length === 0 && createVNode("div", {
         "class": [formControlNs.b(), ns2.e("placeholder")]
-      }, [placeholder.value]), fileUploaders.value.length > 0 && createVNode("ul", {
+      }, [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": [ns2.e("file-item"), ns2.e("file-tag")],
-        "style": "display: inline-block; margin: 0 2px 2px 0",
-        "title": fileUploader.file.name
+        "style": "display: inline-block;",
+        "title": fileUploader.file.name,
+        "onClick": (event) => clickSelectedFile(event, fileUploader.file)
       }, [createVNode("span", {
         "class": [ns2.e("filename"), fileUploader.status === UploadStatus.failed ? ns2.m("failed-color") : ""]
       }, [fileUploader.file.name]), createVNode(resolveComponent("d-icon"), {