@touchvue/ui 1.0.0-beta.6 → 1.0.0-beta.60

package/lib/packages/components/upload/src/upload.vue2.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var index$1 = require('../../icon/index.js');
-var index = require('../../input/index.js');
-var index$2 = require('../../tip/index.js');
+var index$3 = require('../../button/index.js');
+var index$2 = require('../../icon/index.js');
+var index$1 = require('../../input/index.js');
+var index$4 = require('../../tip/index.js');
+var index = require('../../../locale/index.js');
 var fileAjax = require('../../../utils/fileAjax.js');
 var md5 = require('../../../utils/md5.js');
+var useSetClass = require('../../../hooks/useSetClass.js');
 
 const __default__ = vue.defineComponent({
   name: "ToUpload"
@@ -15,19 +18,21 @@ const __default__ = vue.defineComponent({
 var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...__default__,
   props: {
+    tip: { default: "" },
+    flex: { type: Boolean, default: false },
     mode: { default: "default" },
     multiple: { type: Boolean, default: false },
     auto: { type: Boolean, default: false },
-    action: { default: "http://localhost:3000/users/upTest" },
+    action: { default: "" },
     headers: { default: () => ({}) },
-    placeholder: { default: "\u8BF7\u9009\u62E9" },
+    placeholder: { default: "" },
     desc: { default: "" },
     id: { default: "upload" + (/* @__PURE__ */ new Date()).getTime() },
     required: { type: Boolean, default: false },
     type: { default: "input" },
     picSize: { default: "" },
-    width: { default: 20 },
-    maxLength: { default: 1 },
+    width: { default: "auto" },
+    maxLength: { default: Infinity },
     accept: { default: (props) => props.type === "img" ? ".jpg,.jpeg,.png,.gif" : "" },
     maxSize: { default: "" },
     duplicatable: { type: Boolean, default: false },
@@ -35,33 +40,76 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     disabled: { type: Boolean, default: false },
     downloadable: { type: Boolean, default: false },
     name: { default: "uploadfile" },
-    credentialsable: { type: Boolean, default: false },
+    withCredentials: { type: Boolean, default: false },
     files: { default: () => [] },
     data: { default: () => ({}) },
     beforeSelect: { type: [Function, null], default: null },
     beforeStart: { type: [Function, null], default: null },
-    verifiable: { type: Boolean, default: false }
+    verifiable: { type: Boolean, default: true },
+    showList: { type: Boolean, default: true },
+    text: { default: "" }
   },
   emits: ["start", "success", "error", "clear", "change", "progress", "remove", "download"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const props = __props;
+    const fileTypeIcons = {
+      img: [".png", ".jpg", ".jpeg", ".gif", ".apng", ".webp", ".bmp", ".svg", ".ico"],
+      word: [".doc", ".docx"],
+      excel: [".xls", ".xlsx", ".csv"],
+      ppt: [".ppt", ".pptx", ".ppsx"],
+      pdf: [".pdf"],
+      video: [".rm", ".rmvb", ".avi", ".mkv", ".mp4", ".wmv", ".mov", ".movie", ".mpeg", ".mpg", ".qt", ".flv"],
+      voice: [".mp2", ".mp3", ".wma", ".midi", ".wav", ".aac", ".ogg"],
+      rar: [".rar", ".zip", ".tar", ".gz", ".tgz", ".bz2", ".7z"]
+    };
+    function getFileIcon(name) {
+      if (!name || typeof name !== "string") {
+        return "file";
+      }
+      const lastDotIndex = name.lastIndexOf(".");
+      if (lastDotIndex === -1) {
+        return "file";
+      }
+      const ext = name.slice(lastDotIndex).toLowerCase();
+      for (const [iconType, extList] of Object.entries(fileTypeIcons)) {
+        if (extList.includes(ext)) {
+          return iconType;
+        }
+      }
+      return "file";
+    }
     const fileInput = vue.ref(null);
     const fileList = vue.ref([]);
+    const errorTip = vue.ref("");
+    const errorType = vue.ref("rule");
+    const ToFormItem = vue.inject("ToFormItem", {});
+    const uploadList = vue.ref([]);
     vue.onMounted(() => {
-      fileList.value = props.files;
+      fileList.value = [...props.files];
     });
-    const setClass = vue.computed(() => {
-      const arr = [];
-      if (props.mode) {
-        arr.push(`mode-${props.mode}`);
+    vue.watch(
+      () => props.files,
+      (val) => {
+        fileList.value = [...val];
+      },
+      {
+        deep: true
       }
-      return arr;
-    });
-    const setPicClass = vue.computed(() => {
-      const arr = [];
-      if (props.picSize) {
-        arr.push(`pic-size-${props.picSize}`);
+    );
+    const setClass = vue.computed(() => {
+      const arr = ["to-disable-target"];
+      if (errorTip.value) {
+        arr.push("to-upload-mode-line");
+        arr.push("to-upload-color-danger");
+        arr.push("to-upload-tip-show");
+      } else {
+        if (props.mode) {
+          arr.push(...useSetClass.getModeClasses(props.mode));
+        }
+        if (props.type) {
+          arr.push(`type-${props.type}`);
+        }
       }
       return arr;
     });
@@ -72,16 +120,47 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       return style;
     });
-    async function handleFile() {
+    const validateRequired = vue.computed(() => {
+      if (props.required) {
+        return "true";
+      } else if (ToFormItem && ToFormItem.required) {
+        return "true";
+      } else {
+        return "false";
+      }
+    });
+    const validateDesc = vue.computed(() => {
+      if (props.desc) {
+        return props.desc;
+      } else if (ToFormItem && ToFormItem.label) {
+        return ToFormItem.label;
+      } else {
+        return "";
+      }
+    });
+    const validateValue = vue.computed(() => {
+      if (Object.keys(fileList.value).length > 0) {
+        return "true";
+      } else {
+        return "";
+      }
+    });
+    function handleFile() {
       if (props.disabled)
         return false;
+      fileInput.value.click();
+    }
+    async function handleChange(e) {
+      let newFileList = [];
+      newFileList = Array.from(e.target.files);
+      errorTip.value = "";
       let flag = true;
       if (typeof props.beforeSelect === "boolean") {
         flag = props.beforeSelect;
       } else {
         if (props.beforeSelect) {
           if (typeof props.beforeSelect === "function") {
-            const result = props.beforeSelect();
+            const result = props.beforeSelect(newFileList);
             if (result && typeof result.then === "function") {
               flag = await result;
             } else {
@@ -94,25 +173,25 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       if (!flag)
         return false;
-      fileInput.value.click();
-    }
-    function handleChange(e) {
-      let newFileList = [];
-      newFileList = Array.from(e.target.files);
       newFileList.forEach((item) => {
         item.uid = getFileUid(item);
       });
-      if (fileList.value.length + newFileList.length <= props.maxLength) {
+      const addedCount = newFileList.filter((item) => !fileList.value.some((f) => f.name === item.name)).length;
+      const willAddCount = props.duplicatable ? newFileList.length : addedCount;
+      if (fileList.value.length + willAddCount <= props.maxLength) {
+        uploadList.value = Array.from(e.target.files);
         emit("change", newFileList);
-        if (props.duplicatable) {
-          e.target.value = "";
-        }
+        e.target.value = "";
         if (props.type === "img") {
           newFileList.forEach((item) => {
             let reader = new FileReader();
             reader.addEventListener("load", () => {
               item.src = reader.result;
-              fileList.value.push(item);
+              if (props.duplicatable) {
+                fileList.value.push(item);
+              } else {
+                replaceOrAddToFileList(item);
+              }
               if (props.auto) {
                 handleUpload(item);
               }
@@ -120,8 +199,12 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             reader.readAsDataURL(item);
           });
         } else {
-          fileList.value = [...fileList.value, ...newFileList];
-          if (newFileList.length && (props.auto || props.type === "button")) {
+          if (props.duplicatable) {
+            fileList.value = [...fileList.value, ...newFileList];
+          } else {
+            newFileList.forEach((item) => replaceOrAddToFileList(item));
+          }
+          if (newFileList.length && props.auto) {
             vue.nextTick(() => {
               newFileList.forEach((file) => {
                 handleUpload(file);
@@ -130,24 +213,27 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }
         }
       } else {
-        index$2.$tip.danger(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxLength}\u4E2A\u6587\u4EF6`);
+        index$4.$tip.danger(index.t("to.upload.tip.error.count", props.maxLength)).catch(() => {
+        });
       }
     }
     async function handleUpload(file) {
+      if (!props.action)
+        return false;
       let flag = true;
-      if (typeof props.beforeSelect === "boolean") {
-        flag = props.beforeSelect;
+      if (typeof props.beforeStart === "boolean") {
+        flag = props.beforeStart;
       } else {
-        if (props.beforeSelect) {
-          if (typeof props.beforeSelect === "function") {
-            const result = props.beforeSelect();
+        if (props.beforeStart) {
+          if (typeof props.beforeStart === "function") {
+            const result = props.beforeStart(file);
             if (result && typeof result.then === "function") {
               flag = await result;
             } else {
               flag = !!result;
             }
           } else {
-            flag = !!props.beforeSelect;
+            flag = !!props.beforeStart;
           }
         }
       }
@@ -166,7 +252,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         action: props.action,
         data: formData,
         headers: props.headers,
-        withCredentials: props.credentialsable,
+        withCredentials: props.withCredentials,
         onError: (err, status) => {
           setFilePropertyByUid(file.uid, "status", "error");
           emit("error", err, status, file);
@@ -183,18 +269,29 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       });
     }
-    function handleDelete(index) {
+    function handleDelete(index, item) {
       if (props.disabled)
         return false;
       let file = fileList.value.splice(index, 1);
+      if (fileInput.value.value.includes(item.name)) {
+        fileInput.value.value = "";
+      }
       emit("remove", file[0]);
     }
     function getFileUid(fileObj) {
       if (!fileObj)
         return;
-      let str = (fileObj.lastModifiedDate ? fileObj.lastModifiedDate.valueOf() : fileObj.modificationdate) + fileObj.name + fileObj.size;
+      let str = (fileObj.lastModifiedDate ? (/* @__PURE__ */ new Date()).getTime() : fileObj.modificationdate) + fileObj.name + fileObj.size;
       return md5.md5(str);
     }
+    function replaceOrAddToFileList(file) {
+      const idx = fileList.value.findIndex((item) => item.name === file.name);
+      if (idx !== -1) {
+        fileList.value.splice(idx, 1, file);
+      } else {
+        fileList.value.push(file);
+      }
+    }
     function setFilePropertyByUid(uid, key, value) {
       let idx = fileList.value.findIndex((item) => item.uid === uid);
       if (idx === -1)
@@ -222,156 +319,320 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       let tem = fileList.value.filter((item) => item[props.fileIdText]);
       fileList.value = tem;
     }
+    async function submit() {
+      errorTip.value = "";
+      let flag = true;
+      if (typeof props.beforeSelect === "boolean") {
+        flag = props.beforeSelect;
+      } else {
+        if (props.beforeSelect) {
+          if (typeof props.beforeSelect === "function") {
+            const result = props.beforeSelect(uploadList.value);
+            if (result && typeof result.then === "function") {
+              flag = await result;
+            } else {
+              flag = !!result;
+            }
+          } else {
+            flag = !!props.beforeSelect;
+          }
+        }
+      }
+      if (!flag)
+        return false;
+      uploadList.value.forEach((item) => {
+        item.uid = getFileUid(item);
+      });
+      if (uploadList.value.length <= props.maxLength) {
+        uploadList.value.forEach((file) => {
+          handleUpload(file);
+        });
+      } else {
+        index$4.$tip.danger(index.t("to.upload.tip.error.count", props.maxLength)).catch(() => {
+        });
+      }
+    }
     __expose({
-      clear
+      clear,
+      errorTip,
+      errorType,
+      submit
     });
     return (_ctx, _cache) => {
-      const _component_to_button = vue.resolveComponent("to-button");
+      const _component_to_progress = vue.resolveComponent("to-progress");
       const _directive_tip = vue.resolveDirective("tip");
+      const _directive_color = vue.resolveDirective("color");
       return vue.openBlock(), vue.createElementBlock("div", {
         id: _ctx.id,
+        key: vue.unref(index.langKey),
+        flex: _ctx.flex ? _ctx.flex : null,
         class: vue.normalizeClass(["to-upload", setClass.value]),
         style: vue.normalizeStyle(setStyle.value)
       }, [
+        _ctx.verifiable && validateRequired.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+          key: 0,
+          class: "to-validate",
+          req: validateRequired.value,
+          desc: validateDesc.value,
+          value: validateValue.value
+        }, null, 8, ["req", "desc", "value"])), [
+          [vue.vShow, false]
+        ]) : vue.createCommentVNode("v-if", true),
         vue.createElementVNode("input", {
           ref_key: "fileInput",
           ref: fileInput,
           type: "file",
           accept: _ctx.accept,
-          multiple: _ctx.multiple,
+          multiple: props.multiple,
           style: { "display": "none" },
           onChange: handleChange
         }, null, 40, ["accept", "multiple"]),
-        _ctx.type === "input" ? (vue.openBlock(), vue.createBlock(vue.unref(index.ToInput), {
-          key: 0,
-          readonly: "",
-          width: "20",
-          placeholder: _ctx.placeholder
-        }, {
-          suffix: vue.withCtx(() => [
-            vue.createVNode(vue.unref(index$1.ToIcon), {
-              value: "browse",
-              link: "",
-              onClick: handleFile
-            })
-          ]),
-          _: 1
-        }, 8, ["placeholder"])) : vue.createCommentVNode("", true),
-        _ctx.type === "button" ? (vue.openBlock(), vue.createBlock(_component_to_button, {
+        _ctx.type === "input" ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
-          icon: "upload",
-          "icon-position": "left",
-          onClick: handleFile
-        }, {
-          default: vue.withCtx(() => [
-            vue.createTextVNode("\u4E0A\u4F20")
-          ]),
-          _: 1
-        })) : vue.createCommentVNode("", true),
-        _ctx.type === "img" && _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", {
+          class: "to-upload-content"
+        }, [
+          vue.createVNode(vue.unref(index$1.ToInput), {
+            class: "to-upload-input",
+            link: "",
+            disabled: "",
+            width: "full",
+            placeholder: _ctx.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
+            verifiable: false,
+            onClick: handleFile
+          }, {
+            suffix: vue.withCtx(() => [
+              vue.createVNode(vue.unref(index$2.ToIcon), { value: "browse" })
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["placeholder"]),
+          !_ctx.auto && fileList.value.length - _ctx.files.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ToButton), {
+            key: 0,
+            icon: "upload",
+            class: "to-upload-upload-button",
+            onClick: vue.withModifiers(submit, ["stop"])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode("\u4E0A\u4F20")
+            ]),
+            _: 1
+            /* STABLE */
+          })) : vue.createCommentVNode("v-if", true),
+          _ctx.tip ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "to-upload-tip"
+          }, [
+            vue.createElementVNode(
+              "div",
+              { class: "to-upload-tip-text" },
+              vue.toDisplayString(_ctx.tip),
+              1
+              /* TEXT */
+            )
+          ])) : vue.createCommentVNode("v-if", true)
+        ])) : vue.createCommentVNode("v-if", true),
+        _ctx.type === "button" ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 2,
-          class: vue.normalizeClass(["to-upload-img", setPicClass.value])
+          class: "to-upload-content"
         }, [
-          vue.createElementVNode("div", {
-            class: "to-upload-add",
+          vue.createVNode(vue.unref(index$3.ToButton), {
+            class: "to-upload-button",
+            disabled: props.disabled,
+            icon: "upload",
+            "icon-position": "left",
             onClick: handleFile
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(
+                vue.toDisplayString(props.text || vue.unref(index.t)("to.upload.button")),
+                1
+                /* TEXT */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["disabled"]),
+          _ctx.tip ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "to-upload-tip"
           }, [
-            vue.createVNode(vue.unref(index$1.ToIcon), {
-              value: "add",
-              mode: "upload-add"
-            })
-          ])
-        ], 2)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
-          class: "to-upload-list",
-          style: { "width": "100%" }
+            vue.createElementVNode(
+              "div",
+              { class: "to-upload-tip-text" },
+              vue.toDisplayString(_ctx.tip),
+              1
+              /* TEXT */
+            )
+          ])) : vue.createCommentVNode("v-if", true)
+        ])) : vue.createCommentVNode("v-if", true),
+        _ctx.showList ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 3,
+          class: "to-upload-list"
         }, [
           vue.renderSlot(_ctx.$slots, "default", { fileList: fileList.value }, () => [
-            _ctx.type === "img" ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: vue.normalizeClass(["to-upload-img", setPicClass.value])
-            }, [
-              fileList.value.length ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 0,
-                class: "to-upload-img-list"
-              }, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fileList.value, (item, index) => {
-                  return vue.openBlock(), vue.createElementBlock("div", {
-                    key: index,
-                    class: "to-upload-img-list-item"
-                  }, [
-                    vue.createElementVNode("img", {
-                      src: item.src,
-                      class: "to-upload-pic",
-                      alt: ""
-                    }, null, 8, ["src"]),
-                    vue.createVNode(vue.unref(index$1.ToIcon), {
-                      value: "delete",
-                      mode: "icon-remove",
-                      link: "",
-                      onClick: ($event) => handleDelete(index)
-                    }, null, 8, ["onClick"]),
-                    item.progress ? (vue.openBlock(), vue.createElementBlock("div", {
-                      key: 0,
-                      class: "upload-progress"
-                    }, [
-                      vue.createElementVNode("div", {
-                        class: "upload-progress-bar",
-                        style: vue.normalizeStyle({ width: item.progress + "%" })
-                      }, null, 4)
-                    ])) : vue.createCommentVNode("", true)
-                  ]);
-                }), 128))
-              ])) : vue.createCommentVNode("", true),
-              !_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 1,
-                class: "to-upload-add",
-                onClick: handleFile
-              }, [
-                vue.createVNode(vue.unref(index$1.ToIcon), {
-                  value: "add",
-                  mode: "upload-add"
-                })
-              ])) : vue.createCommentVNode("", true)
-            ], 2)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(fileList.value, (item, index) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                key: index,
-                class: "to-upload-list-item"
-              }, [
-                vue.createVNode(vue.unref(index$1.ToIcon), { value: "img" }),
-                vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { class: "file-name" }, [
-                  vue.createTextVNode(vue.toDisplayString(item.name), 1)
-                ])), [
-                  [_directive_tip, item.name, "click"]
-                ]),
-                vue.createElementVNode("span", null, vue.toDisplayString(item.status), 1),
-                item.progress ? (vue.openBlock(), vue.createElementBlock("div", {
-                  key: 0,
-                  class: "upload-progress"
+            _ctx.type === "img" ? (vue.openBlock(), vue.createElementBlock(
+              vue.Fragment,
+              { key: 0 },
+              [
+                (vue.openBlock(true), vue.createElementBlock(
+                  vue.Fragment,
+                  null,
+                  vue.renderList(fileList.value, (item, index) => {
+                    return vue.openBlock(), vue.createElementBlock(
+                      "div",
+                      {
+                        key: index,
+                        style: vue.normalizeStyle({ backgroundImage: `url(${item.src})` }),
+                        class: "to-upload-item"
+                      },
+                      [
+                        vue.createVNode(vue.unref(index$2.ToIcon), {
+                          value: "close",
+                          class: "to-upload-item-remove",
+                          link: "",
+                          onClick: ($event) => handleDelete(index, item)
+                        }, null, 8, ["onClick"]),
+                        item.progress ? (vue.openBlock(), vue.createBlock(_component_to_progress, {
+                          key: 0,
+                          class: "to-upload-item-progress",
+                          "text-position": "none",
+                          value: item.progress
+                        }, null, 8, ["value"])) : vue.createCommentVNode("v-if", true)
+                      ],
+                      4
+                      /* STYLE */
+                    );
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                )),
+                vue.createElementVNode("div", {
+                  class: "to-upload-add",
+                  onClick: handleFile
+                }, [
+                  vue.createVNode(vue.unref(index$2.ToIcon), {
+                    value: "add",
+                    class: "to-upload-add-icon"
+                  })
+                ])
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            )) : (vue.openBlock(true), vue.createElementBlock(
+              vue.Fragment,
+              { key: 1 },
+              vue.renderList(fileList.value, (item, index) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: index,
+                  class: "to-upload-item"
                 }, [
-                  vue.createElementVNode("div", {
-                    class: "upload-progress-bar",
-                    style: vue.normalizeStyle({ width: item.progress + "%" })
-                  }, null, 4)
-                ])) : vue.createCommentVNode("", true),
-                item[_ctx.fileIdText] && _ctx.downloadable ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToIcon), {
-                  key: 1,
-                  value: "download",
-                  mode: "color",
-                  link: "",
-                  onClick: ($event) => handleDownload(item[_ctx.fileIdText])
-                }, null, 8, ["onClick"])) : vue.createCommentVNode("", true),
-                vue.createVNode(vue.unref(index$1.ToIcon), {
-                  value: "delete",
-                  mode: "color",
-                  link: "",
-                  onClick: ($event) => handleDelete(index)
-                }, null, 8, ["onClick"])
-              ]);
-            }), 128))
+                  vue.createVNode(vue.unref(index$2.ToIcon), {
+                    value: getFileIcon(item.name),
+                    class: "to-upload-item-icon"
+                  }, null, 8, ["value"]),
+                  vue.createElementVNode(
+                    "div",
+                    { class: "to-upload-item-name" },
+                    vue.toDisplayString(item.name),
+                    1
+                    /* TEXT */
+                  ),
+                  vue.createElementVNode(
+                    "div",
+                    { class: "to-upload-item-state" },
+                    vue.toDisplayString(item.status),
+                    1
+                    /* TEXT */
+                  ),
+                  item[_ctx.fileIdText] && _ctx.downloadable ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ToIcon), {
+                    key: 0,
+                    class: "to-upload-item-download",
+                    value: "download",
+                    link: "",
+                    onClick: ($event) => handleDownload(item[_ctx.fileIdText])
+                  }, null, 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
+                  vue.createVNode(vue.unref(index$2.ToIcon), {
+                    value: "close",
+                    class: "to-upload-item-remove",
+                    link: "",
+                    onClick: ($event) => handleDelete(index, item)
+                  }, null, 8, ["onClick"]),
+                  item.progress ? (vue.openBlock(), vue.createBlock(_component_to_progress, {
+                    key: 1,
+                    class: "to-upload-item-progress",
+                    "text-position": "none",
+                    value: item.progress
+                  }, null, 8, ["value"])) : vue.createCommentVNode("v-if", true)
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
           ])
-        ])
-      ], 14, ["id"]);
+        ])) : vue.createCommentVNode("v-if", true),
+        _ctx.tip && _ctx.type === "img" ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 4,
+          class: "to-upload-tip"
+        }, [
+          vue.createElementVNode(
+            "div",
+            { class: "to-upload-tip-text" },
+            vue.toDisplayString(_ctx.tip),
+            1
+            /* TEXT */
+          )
+        ])) : vue.createCommentVNode("v-if", true),
+        errorTip.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+          key: 5,
+          class: "to-box-tip"
+        }, [
+          errorType.value === "rule" ? (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 0 },
+            [
+              vue.createTextVNode(
+                vue.toDisplayString(vue.unref(index.t)("to.upload.selectError")) + " ",
+                1
+                /* TEXT */
+              ),
+              vue.withDirectives(vue.createVNode(
+                vue.unref(index$2.ToIcon),
+                {
+                  value: "help",
+                  color: "danger",
+                  mode: "toast"
+                },
+                null,
+                512
+                /* NEED_PATCH */
+              ), [
+                [
+                  _directive_tip,
+                  errorTip.value,
+                  void 0,
+                  { danger: true }
+                ]
+              ])
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 1 },
+            [
+              vue.createTextVNode(
+                vue.toDisplayString(vue.unref(index.t)("to.upload.required")),
+                1
+                /* TEXT */
+              )
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))
+        ])), [
+          [_directive_color, "danger"]
+        ]) : vue.createCommentVNode("v-if", true)
+      ], 14, ["id", "flex"]);
     };
   }
 });