@nutui/nutui 3.1.22 → 3.1.23-beta.0

package/dist/packages/_es/Uploader.js

@@ -1,131 +1,482 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.0 Mon Jun 27 2022 17:55:50 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive as e, computed as t, resolveComponent as a, openBlock as l, createElementBlock as s, normalizeClass as i, renderSlot as n, Fragment as o, createCommentVNode as r, renderList as u, createElementVNode as p, toDisplayString as c, createVNode as d, createBlock as m, createTextVNode as f } from "vue";
-import { c as g } from "./component.js";
-import { _ as h } from "./plugin-vue_export-helper.js";
+import { reactive, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, Fragment, createCommentVNode, renderList, createElementVNode, toDisplayString, createVNode, createBlock, createTextVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-class y {
+class UploadOptions {
   constructor() {
-    this.url = "", this.name = "file", this.fileType = "image", this.method = "post", this.xhrState = 200, this.timeout = 3e4, this.headers = {}, this.withCredentials = false;
+    this.url = "";
+    this.name = "file";
+    this.fileType = "image";
+    this.method = "post";
+    this.xhrState = 200;
+    this.timeout = 30 * 1e3;
+    this.headers = {};
+    this.withCredentials = false;
   }
 }
-class _ {
-  constructor(e2) {
-    this.options = e2;
+class Uploader {
+  constructor(options) {
+    this.options = options;
   }
   upload() {
     var _a;
-    const e2 = this.options, t2 = new XMLHttpRequest();
-    if (t2.timeout = e2.timeout, t2.upload) {
-      t2.upload.addEventListener("progress", (t3) => {
+    const options = this.options;
+    const xhr = new XMLHttpRequest();
+    xhr.timeout = options.timeout;
+    if (xhr.upload) {
+      xhr.upload.addEventListener("progress", (e) => {
         var _a2;
-        (_a2 = e2.onProgress) == null ? void 0 : _a2.call(e2, t3, e2);
-      }, false), t2.onreadystatechange = () => {
+        (_a2 = options.onProgress) == null ? void 0 : _a2.call(options, e, options);
+      }, false);
+      xhr.onreadystatechange = () => {
         var _a2, _b;
-        t2.readyState === 4 && (t2.status == e2.xhrState ? (_a2 = e2.onSuccess) == null ? void 0 : _a2.call(e2, t2.responseText, e2) : (_b = e2.onFailure) == null ? void 0 : _b.call(e2, t2.responseText, e2));
-      }, t2.withCredentials = e2.withCredentials, t2.open(e2.method, e2.url, true);
-      for (const [a2, l2] of Object.entries(e2.headers))
-        t2.setRequestHeader(a2, l2);
-      (_a = e2.onStart) == null ? void 0 : _a.call(e2, e2), t2.send(e2.formData);
+        if (xhr.readyState === 4) {
+          if (xhr.status == options.xhrState) {
+            (_a2 = options.onSuccess) == null ? void 0 : _a2.call(options, xhr.responseText, options);
+          } else {
+            (_b = options.onFailure) == null ? void 0 : _b.call(options, xhr.responseText, options);
+          }
+        }
+      };
+      xhr.withCredentials = options.withCredentials;
+      xhr.open(options.method, options.url, true);
+      for (const [key, value] of Object.entries(options.headers)) {
+        xhr.setRequestHeader(key, value);
+      }
+      (_a = options.onStart) == null ? void 0 : _a.call(options, options);
+      xhr.send(options.formData);
+    } else {
+      console.warn("\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 XMLHttpRequest");
     }
   }
-  uploadTaro(e2, t2) {
+  uploadTaro(uploadFile, env) {
     var _a;
-    const a2 = this.options;
-    if (t2 === "WEB")
+    const options = this.options;
+    if (env === "WEB") {
       this.upload();
-    else {
-      const t3 = e2({ url: a2.url, filePath: a2.taroFilePath, fileType: a2.fileType, header: { "Content-Type": "multipart/form-data", ...a2.headers }, formData: a2.formData, name: a2.name, success(e3) {
-        var _a2, _b;
-        a2.xhrState == e3.statusCode ? (_a2 = a2.onSuccess) == null ? void 0 : _a2.call(a2, e3, a2) : (_b = a2.onFailure) == null ? void 0 : _b.call(a2, e3, a2);
-      }, fail(e3) {
-        var _a2;
-        (_a2 = a2.onFailure) == null ? void 0 : _a2.call(a2, e3, a2);
-      } });
-      (_a = a2.onStart) == null ? void 0 : _a.call(a2, a2), t3.progress((e3) => {
+    } else {
+      const uploadTask = uploadFile({
+        url: options.url,
+        filePath: options.taroFilePath,
+        fileType: options.fileType,
+        header: {
+          "Content-Type": "multipart/form-data",
+          ...options.headers
+        },
+        formData: options.formData,
+        name: options.name,
+        success(response) {
+          var _a2, _b;
+          if (options.xhrState == response.statusCode) {
+            (_a2 = options.onSuccess) == null ? void 0 : _a2.call(options, response, options);
+          } else {
+            (_b = options.onFailure) == null ? void 0 : _b.call(options, response, options);
+          }
+        },
+        fail(e) {
+          var _a2;
+          (_a2 = options.onFailure) == null ? void 0 : _a2.call(options, e, options);
+        }
+      });
+      (_a = options.onStart) == null ? void 0 : _a.call(options, options);
+      uploadTask.progress((res) => {
         var _a2;
-        (_a2 = a2.onProgress) == null ? void 0 : _a2.call(a2, e3, a2);
+        (_a2 = options.onProgress) == null ? void 0 : _a2.call(options, res, options);
       });
     }
   }
 }
-const { translate: w } = g("uploader");
-class v {
+const { translate: translate$1 } = createComponent("uploader");
+class FileItem {
   constructor() {
-    this.status = "ready", this.message = w("ready"), this.uid = new Date().getTime().toString(), this.percentage = 0, this.formData = {};
+    this.status = "ready";
+    this.message = translate$1("ready");
+    this.uid = new Date().getTime().toString();
+    this.percentage = 0;
+    this.formData = {};
   }
 }
-const { componentName: b, create: C, translate: k } = g("uploader"), S = C({ props: { name: { type: String, default: "file" }, url: { type: String, default: "" }, timeout: { type: [Number, String], default: 3e4 }, fileList: { type: Array, default: () => [] }, isPreview: { type: Boolean, default: true }, listType: { type: String, default: "picture" }, isDeletable: { type: Boolean, default: true }, method: { type: String, default: "post" }, capture: { type: Boolean, default: false }, maximize: { type: [Number, String], default: Number.MAX_VALUE }, maximum: { type: [Number, String], default: 1 }, clearInput: { type: Boolean, default: true }, accept: { type: String, default: "*" }, headers: { type: Object, default: {} }, data: { type: Object, default: {} }, uploadIcon: { type: String, default: "photograph" }, uploadIconSize: { type: [String, Number], default: "" }, xhrState: { type: [Number, String], default: 200 }, withCredentials: { type: Boolean, default: false }, multiple: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, autoUpload: { type: Boolean, default: true }, beforeUpload: { type: Function, default: null }, beforeDelete: { type: Function, default: (e2, t2) => true }, onChange: { type: Function } }, emits: ["start", "progress", "oversize", "success", "failure", "change", "delete", "update:fileList", "file-item-click"], setup(a2, { emit: l2 }) {
-  const s2 = e(a2.fileList);
-  let i2 = [];
-  const n2 = t(() => ({ [b]: true })), o2 = (e2 = -1) => {
-    e2 > -1 ? i2.splice(e2, 1) : i2 = [];
-  }, r2 = (t2) => {
-    t2.forEach((t3, n3) => {
-      const r3 = new FormData();
-      for (const [e2, t4] of Object.entries(a2.data))
-        r3.append(e2, t4);
-      r3.append(a2.name, t3);
-      const u3 = e(new v());
-      if (u3.name = t3.name, u3.status = "ready", u3.type = t3.type, u3.formData = r3, u3.message = k("waitingUpload"), ((e2, t4) => {
-        const n4 = new y();
-        n4.url = a2.url, n4.formData = e2.formData, n4.timeout = 1 * a2.timeout, n4.method = a2.method, n4.xhrState = a2.xhrState, n4.headers = a2.headers, n4.withCredentials = a2.withCredentials, n4.onStart = (a3) => {
-          e2.status = "ready", e2.message = k("readyUpload"), o2(t4), l2("start", a3);
-        }, n4.onProgress = (t5, a3) => {
-          e2.status = "uploading", e2.message = k("uploading"), e2.percentage = (t5.loaded / t5.total * 100).toFixed(0), l2("progress", { event: t5, option: a3, percentage: e2.percentage });
-        }, n4.onSuccess = (t5, a3) => {
-          e2.status = "success", e2.message = k("success"), l2("success", { responseText: t5, option: a3, fileItem: e2 }), l2("update:fileList", s2);
-        }, n4.onFailure = (t5, a3) => {
-          e2.status = "error", e2.message = k("error"), l2("failure", { responseText: t5, option: a3, fileItem: e2 });
-        };
-        let r4 = new _(n4);
-        a2.autoUpload ? r4.upload() : i2.push(new Promise((e3, t5) => {
-          e3(r4);
-        }));
-      })(u3, n3), a2.isPreview && t3.type.includes("image")) {
-        const e2 = new FileReader();
-        e2.onload = (e3) => {
-          u3.url = e3.target.result, s2.push(u3);
-        }, e2.readAsDataURL(t3);
-      } else
-        s2.push(u3);
+const { componentName, create, translate } = createComponent("uploader");
+const _sfc_main = create({
+  props: {
+    name: { type: String, default: "file" },
+    url: { type: String, default: "" },
+    timeout: { type: [Number, String], default: 1e3 * 30 },
+    fileList: { type: Array, default: () => [] },
+    isPreview: { type: Boolean, default: true },
+    listType: { type: String, default: "picture" },
+    isDeletable: { type: Boolean, default: true },
+    method: { type: String, default: "post" },
+    capture: { type: Boolean, default: false },
+    maximize: { type: [Number, String], default: Number.MAX_VALUE },
+    maximum: { type: [Number, String], default: 1 },
+    clearInput: { type: Boolean, default: true },
+    accept: { type: String, default: "*" },
+    headers: { type: Object, default: {} },
+    data: { type: Object, default: {} },
+    uploadIcon: { type: String, default: "photograph" },
+    uploadIconSize: { type: [String, Number], default: "" },
+    xhrState: { type: [Number, String], default: 200 },
+    withCredentials: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    autoUpload: { type: Boolean, default: true },
+    beforeUpload: {
+      type: Function,
+      default: null
+    },
+    beforeDelete: {
+      type: Function,
+      default: (file, files) => {
+        return true;
+      }
+    },
+    onChange: { type: Function }
+  },
+  emits: [
+    "start",
+    "progress",
+    "oversize",
+    "success",
+    "failure",
+    "change",
+    "delete",
+    "update:fileList",
+    "file-item-click"
+  ],
+  setup(props, { emit }) {
+    const fileList = reactive(props.fileList);
+    let uploadQueue = [];
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
     });
-  }, u2 = (e2) => {
-    const t2 = 1 * a2.maximum, i3 = 1 * a2.maximize, n3 = new Array();
-    e2 = e2.filter((e3) => !(e3.size > i3) || (n3.push(e3), false)), n3.length && l2("oversize", n3);
-    let o3 = e2.length + s2.length;
-    return o3 > t2 && e2.splice(e2.length - (o3 - t2)), e2;
-  };
-  return { onChange: (e2) => {
-    if (a2.disabled)
-      return;
-    const t2 = e2.target;
-    let { files: i3 } = t2;
-    if (a2.beforeUpload)
-      a2.beforeUpload(i3).then((e3) => {
-        const t3 = u2(new Array().slice.call(e3));
-        r2(t3);
+    const clearInput = (el) => {
+      el.value = "";
+    };
+    const fileItemClick = (fileItem) => {
+      emit("file-item-click", { fileItem });
+    };
+    const executeUpload = (fileItem, index2) => {
+      const uploadOption = new UploadOptions();
+      uploadOption.url = props.url;
+      uploadOption.formData = fileItem.formData;
+      uploadOption.timeout = props.timeout * 1;
+      uploadOption.method = props.method;
+      uploadOption.xhrState = props.xhrState;
+      uploadOption.headers = props.headers;
+      uploadOption.withCredentials = props.withCredentials;
+      uploadOption.onStart = (option) => {
+        fileItem.status = "ready";
+        fileItem.message = translate("readyUpload");
+        clearUploadQueue(index2);
+        emit("start", option);
+      };
+      uploadOption.onProgress = (event, option) => {
+        fileItem.status = "uploading";
+        fileItem.message = translate("uploading");
+        fileItem.percentage = (event.loaded / event.total * 100).toFixed(0);
+        emit("progress", { event, option, percentage: fileItem.percentage });
+      };
+      uploadOption.onSuccess = (responseText, option) => {
+        fileItem.status = "success";
+        fileItem.message = translate("success");
+        emit("success", {
+          responseText,
+          option,
+          fileItem
+        });
+        emit("update:fileList", fileList);
+      };
+      uploadOption.onFailure = (responseText, option) => {
+        fileItem.status = "error";
+        fileItem.message = translate("error");
+        emit("failure", {
+          responseText,
+          option,
+          fileItem
+        });
+      };
+      let task = new Uploader(uploadOption);
+      if (props.autoUpload) {
+        task.upload();
+      } else {
+        uploadQueue.push(new Promise((resolve, reject) => {
+          resolve(task);
+        }));
+      }
+    };
+    const clearUploadQueue = (index2 = -1) => {
+      if (index2 > -1) {
+        uploadQueue.splice(index2, 1);
+      } else {
+        uploadQueue = [];
+      }
+    };
+    const submit = () => {
+      Promise.all(uploadQueue).then((res) => {
+        res.forEach((i) => i.upload());
       });
-    else {
-      const e3 = u2(new Array().slice.call(i3));
-      r2(e3);
-    }
-    l2("change", { fileList: s2, event: e2 }), a2.clearInput && (t2.value = "");
-  }, onDelete: (e2, t2) => {
-    o2(t2), a2.beforeDelete(e2, s2) && (s2.splice(t2, 1), l2("delete", { file: e2, fileList: s2, index: t2 }));
-  }, fileList: s2, classes: n2, fileItemClick: (e2) => {
-    l2("file-item-click", { fileItem: e2 });
-  }, clearUploadQueue: o2, submit: () => {
-    Promise.all(i2).then((e2) => {
-      e2.forEach((e3) => e3.upload());
-    });
-  } };
-} }), x = { key: 0, class: "nut-uploader__slot" }, D = ["accept", "multiple", "name", "disabled"], T = ["accept", "multiple", "name", "disabled"], L = { key: 0, class: "nut-uploader__preview-img" }, I = { key: 0, class: "nut-uploader__preview__progress" }, F = { class: "nut-uploader__preview__progress__msg" }, z = { key: 1, class: "nut-uploader__preview__progress" }, U = { class: "nut-uploader__preview__progress__msg" }, B = ["onClick", "src"], P = { key: 4, class: "nut-uploader__preview-img__file" }, A = ["onClick"], N = { class: "tips" }, j = { key: 1, class: "nut-uploader__preview-list" }, E = ["onClick"], O = ["accept", "multiple", "name", "disabled"], R = ["accept", "multiple", "name", "disabled"];
-var $ = h(S, [["render", function(e2, t2, g2, h2, y2, _2) {
-  const w2 = a("nut-icon"), v2 = a("nut-progress");
-  return l(), s("view", { class: i(e2.classes) }, [e2.$slots.default ? (l(), s("view", x, [n(e2.$slots, "default"), e2.maximum - e2.fileList.length ? (l(), s(o, { key: 0 }, [e2.capture ? (l(), s("input", { key: 0, class: "nut-uploader__input", type: "file", capture: "camera", accept: e2.accept, multiple: e2.multiple, name: e2.name, disabled: e2.disabled, onChange: t2[0] || (t2[0] = (...t3) => e2.onChange && e2.onChange(...t3)) }, null, 40, D)) : (l(), s("input", { key: 1, class: "nut-uploader__input", type: "file", accept: e2.accept, multiple: e2.multiple, name: e2.name, disabled: e2.disabled, onChange: t2[1] || (t2[1] = (...t3) => e2.onChange && e2.onChange(...t3)) }, null, 40, T))], 64)) : r("", true)])) : r("", true), (l(true), s(o, null, u(e2.fileList, (t3, a2) => (l(), s("view", { class: i(["nut-uploader__preview", [e2.listType]]), key: t3.uid }, [e2.listType != "picture" || e2.$slots.default ? e2.listType == "list" ? (l(), s("view", j, [p("view", { onClick: (a3) => e2.fileItemClick(t3), class: i(["nut-uploader__preview-img__file__name", [t3.status]]) }, [d(w2, { name: "link" }), f("\xA0" + c(t3.name), 1)], 10, E), d(w2, { class: "nut-uploader__preview-img__file__del", onClick: (l2) => e2.onDelete(t3, a2), color: "#808080", name: "del" }, null, 8, ["onClick"]), t3.status == "uploading" ? (l(), m(v2, { key: 0, size: "small", percentage: t3.percentage, "stroke-color": "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)", "show-text": false }, null, 8, ["percentage"])) : r("", true)])) : r("", true) : (l(), s("view", L, [t3.status == "ready" ? (l(), s("view", I, [p("view", F, c(t3.message), 1)])) : t3.status != "success" ? (l(), s("view", z, [d(w2, { color: "#fff", name: t3.status == "error" ? "failure" : "loading" }, null, 8, ["name"]), p("view", U, c(t3.message), 1)])) : r("", true), e2.isDeletable ? (l(), m(w2, { key: 2, color: "rgba(0,0,0,0.6)", onClick: (l2) => e2.onDelete(t3, a2), class: "close", name: "failure" }, null, 8, ["onClick"])) : r("", true), t3.type.includes("image") && t3.url ? (l(), s("img", { key: 3, class: "nut-uploader__preview-img__c", onClick: (a3) => e2.fileItemClick(t3), src: t3.url }, null, 8, B)) : (l(), s("view", P, [p("view", { onClick: (a3) => e2.fileItemClick(t3), class: "nut-uploader__preview-img__file__name" }, [d(w2, { color: "#808080", name: "link" }), f("\xA0" + c(t3.name), 1)], 8, A)])), p("view", N, c(t3.name), 1)]))], 2))), 128)), e2.listType == "picture" && !e2.$slots.default && e2.maximum - e2.fileList.length ? (l(), s("view", { key: 1, class: i(["nut-uploader__upload", [e2.listType]]) }, [d(w2, { size: e2.uploadIconSize, color: "#808080", name: e2.uploadIcon }, null, 8, ["size", "name"]), e2.capture ? (l(), s("input", { key: 0, class: "nut-uploader__input", type: "file", capture: "camera", accept: e2.accept, multiple: e2.multiple, name: e2.name, disabled: e2.disabled, onChange: t2[2] || (t2[2] = (...t3) => e2.onChange && e2.onChange(...t3)) }, null, 40, O)) : (l(), s("input", { key: 1, class: "nut-uploader__input", type: "file", accept: e2.accept, multiple: e2.multiple, name: e2.name, disabled: e2.disabled, onChange: t2[3] || (t2[3] = (...t3) => e2.onChange && e2.onChange(...t3)) }, null, 40, R))], 2)) : r("", true)], 2);
-}]]);
-export { $ as default };
+    };
+    const readFile = (files) => {
+      files.forEach((file, index2) => {
+        const formData = new FormData();
+        for (const [key, value] of Object.entries(props.data)) {
+          formData.append(key, value);
+        }
+        formData.append(props.name, file);
+        const fileItem = reactive(new FileItem());
+        fileItem.name = file.name;
+        fileItem.status = "ready";
+        fileItem.type = file.type;
+        fileItem.formData = formData;
+        fileItem.message = translate("waitingUpload");
+        executeUpload(fileItem, index2);
+        if (props.isPreview && file.type.includes("image")) {
+          const reader = new FileReader();
+          reader.onload = (event) => {
+            fileItem.url = event.target.result;
+            fileList.push(fileItem);
+          };
+          reader.readAsDataURL(file);
+        } else {
+          fileList.push(fileItem);
+        }
+      });
+    };
+    const filterFiles = (files) => {
+      const maximum = props.maximum * 1;
+      const maximize = props.maximize * 1;
+      const oversizes = new Array();
+      files = files.filter((file) => {
+        if (file.size > maximize) {
+          oversizes.push(file);
+          return false;
+        } else {
+          return true;
+        }
+      });
+      if (oversizes.length) {
+        emit("oversize", oversizes);
+      }
+      let currentFileLength = files.length + fileList.length;
+      if (currentFileLength > maximum) {
+        files.splice(files.length - (currentFileLength - maximum));
+      }
+      return files;
+    };
+    const onDelete = (file, index2) => {
+      clearUploadQueue(index2);
+      if (props.beforeDelete(file, fileList)) {
+        fileList.splice(index2, 1);
+        emit("delete", {
+          file,
+          fileList,
+          index: index2
+        });
+      }
+    };
+    const onChange = (event) => {
+      if (props.disabled) {
+        return;
+      }
+      const $el = event.target;
+      let { files } = $el;
+      if (props.beforeUpload) {
+        props.beforeUpload(files).then((f) => {
+          const _files = filterFiles(new Array().slice.call(f));
+          readFile(_files);
+        });
+      } else {
+        const _files = filterFiles(new Array().slice.call(files));
+        readFile(_files);
+      }
+      emit("change", {
+        fileList,
+        event
+      });
+      if (props.clearInput) {
+        clearInput($el);
+      }
+    };
+    return {
+      onChange,
+      onDelete,
+      fileList,
+      classes,
+      fileItemClick,
+      clearUploadQueue,
+      submit
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "nut-uploader__slot"
+};
+const _hoisted_2 = ["accept", "multiple", "name", "disabled"];
+const _hoisted_3 = ["accept", "multiple", "name", "disabled"];
+const _hoisted_4 = {
+  key: 0,
+  class: "nut-uploader__preview-img"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "nut-uploader__preview__progress"
+};
+const _hoisted_6 = { class: "nut-uploader__preview__progress__msg" };
+const _hoisted_7 = {
+  key: 1,
+  class: "nut-uploader__preview__progress"
+};
+const _hoisted_8 = { class: "nut-uploader__preview__progress__msg" };
+const _hoisted_9 = ["onClick", "src"];
+const _hoisted_10 = {
+  key: 4,
+  class: "nut-uploader__preview-img__file"
+};
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = { class: "tips" };
+const _hoisted_13 = {
+  key: 1,
+  class: "nut-uploader__preview-list"
+};
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = ["accept", "multiple", "name", "disabled"];
+const _hoisted_16 = ["accept", "multiple", "name", "disabled"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_nut_progress = resolveComponent("nut-progress");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    _ctx.$slots.default ? (openBlock(), createElementBlock("view", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default"),
+      _ctx.maximum - _ctx.fileList.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        _ctx.capture ? (openBlock(), createElementBlock("input", {
+          key: 0,
+          class: "nut-uploader__input",
+          type: "file",
+          capture: "camera",
+          accept: _ctx.accept,
+          multiple: _ctx.multiple,
+          name: _ctx.name,
+          disabled: _ctx.disabled,
+          onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+        }, null, 40, _hoisted_2)) : (openBlock(), createElementBlock("input", {
+          key: 1,
+          class: "nut-uploader__input",
+          type: "file",
+          accept: _ctx.accept,
+          multiple: _ctx.multiple,
+          name: _ctx.name,
+          disabled: _ctx.disabled,
+          onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+        }, null, 40, _hoisted_3))
+      ], 64)) : createCommentVNode("", true)
+    ])) : createCommentVNode("", true),
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fileList, (item, index2) => {
+      return openBlock(), createElementBlock("view", {
+        class: normalizeClass(["nut-uploader__preview", [_ctx.listType]]),
+        key: item.uid
+      }, [
+        _ctx.listType == "picture" && !_ctx.$slots.default ? (openBlock(), createElementBlock("view", _hoisted_4, [
+          item.status == "ready" ? (openBlock(), createElementBlock("view", _hoisted_5, [
+            createElementVNode("view", _hoisted_6, toDisplayString(item.message), 1)
+          ])) : item.status != "success" ? (openBlock(), createElementBlock("view", _hoisted_7, [
+            createVNode(_component_nut_icon, {
+              color: "#fff",
+              name: item.status == "error" ? "failure" : "loading"
+            }, null, 8, ["name"]),
+            createElementVNode("view", _hoisted_8, toDisplayString(item.message), 1)
+          ])) : createCommentVNode("", true),
+          _ctx.isDeletable ? (openBlock(), createBlock(_component_nut_icon, {
+            key: 2,
+            color: "rgba(0,0,0,0.6)",
+            onClick: ($event) => _ctx.onDelete(item, index2),
+            class: "close",
+            name: "failure"
+          }, null, 8, ["onClick"])) : createCommentVNode("", true),
+          item.type.includes("image") && item.url ? (openBlock(), createElementBlock("img", {
+            key: 3,
+            class: "nut-uploader__preview-img__c",
+            onClick: ($event) => _ctx.fileItemClick(item),
+            src: item.url
+          }, null, 8, _hoisted_9)) : (openBlock(), createElementBlock("view", _hoisted_10, [
+            createElementVNode("view", {
+              onClick: ($event) => _ctx.fileItemClick(item),
+              class: "nut-uploader__preview-img__file__name"
+            }, [
+              createVNode(_component_nut_icon, {
+                color: "#808080",
+                name: "link"
+              }),
+              createTextVNode("\xA0" + toDisplayString(item.name), 1)
+            ], 8, _hoisted_11)
+          ])),
+          createElementVNode("view", _hoisted_12, toDisplayString(item.name), 1)
+        ])) : _ctx.listType == "list" ? (openBlock(), createElementBlock("view", _hoisted_13, [
+          createElementVNode("view", {
+            onClick: ($event) => _ctx.fileItemClick(item),
+            class: normalizeClass(["nut-uploader__preview-img__file__name", [item.status]])
+          }, [
+            createVNode(_component_nut_icon, { name: "link" }),
+            createTextVNode("\xA0" + toDisplayString(item.name), 1)
+          ], 10, _hoisted_14),
+          createVNode(_component_nut_icon, {
+            class: "nut-uploader__preview-img__file__del",
+            onClick: ($event) => _ctx.onDelete(item, index2),
+            color: "#808080",
+            name: "del"
+          }, null, 8, ["onClick"]),
+          item.status == "uploading" ? (openBlock(), createBlock(_component_nut_progress, {
+            key: 0,
+            size: "small",
+            percentage: item.percentage,
+            "stroke-color": "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
+            "show-text": false
+          }, null, 8, ["percentage"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ], 2);
+    }), 128)),
+    _ctx.listType == "picture" && !_ctx.$slots.default && _ctx.maximum - _ctx.fileList.length ? (openBlock(), createElementBlock("view", {
+      key: 1,
+      class: normalizeClass(["nut-uploader__upload", [_ctx.listType]])
+    }, [
+      createVNode(_component_nut_icon, {
+        size: _ctx.uploadIconSize,
+        color: "#808080",
+        name: _ctx.uploadIcon
+      }, null, 8, ["size", "name"]),
+      _ctx.capture ? (openBlock(), createElementBlock("input", {
+        key: 0,
+        class: "nut-uploader__input",
+        type: "file",
+        capture: "camera",
+        accept: _ctx.accept,
+        multiple: _ctx.multiple,
+        name: _ctx.name,
+        disabled: _ctx.disabled,
+        onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+      }, null, 40, _hoisted_15)) : (openBlock(), createElementBlock("input", {
+        key: 1,
+        class: "nut-uploader__input",
+        type: "file",
+        accept: _ctx.accept,
+        multiple: _ctx.multiple,
+        name: _ctx.name,
+        disabled: _ctx.disabled,
+        onChange: _cache[3] || (_cache[3] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+      }, null, 40, _hoisted_16))
+    ], 2)) : createCommentVNode("", true)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };