@touchvue/ui 1.0.0-beta.55 → 1.0.0-beta.56

package/es/packages/components/upload/src/upload.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, inject, onMounted, watch, computed, resolveDirective, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, withDirectives, vShow, createCommentVNode, createElementVNode, createBlock, withCtx, createVNode, createTextVNode, toDisplayString, renderSlot, Fragment, renderList, nextTick } from 'vue';
+import { defineComponent, ref, inject, onMounted, watch, computed, resolveComponent, resolveDirective, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, withDirectives, vShow, createCommentVNode, createElementVNode, createVNode, withCtx, createBlock, withModifiers, createTextVNode, toDisplayString, renderSlot, Fragment, renderList, nextTick } from 'vue';
 import { ToButton } from '../../button/index.mjs';
 import { ToIcon } from '../../icon/index.mjs';
 import { ToInput } from '../../input/index.mjs';
@@ -13,6 +13,7 @@ const __default__ = defineComponent({
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
+    tip: { default: "" },
     flex: { type: Boolean, default: false },
     mode: { default: "default" },
     multiple: { type: Boolean, default: false },
@@ -25,7 +26,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     required: { type: Boolean, default: false },
     type: { default: "input" },
     picSize: { default: "" },
-    width: { default: 20 },
+    width: { default: "auto" },
     maxLength: { default: Infinity },
     accept: { default: (props) => props.type === "img" ? ".jpg,.jpeg,.png,.gif" : "" },
     maxSize: { default: "" },
@@ -41,12 +42,38 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     beforeStart: { type: [Function, null], default: null },
     verifiable: { type: Boolean, default: true },
     showList: { type: Boolean, default: true },
-    uploadText: { default: "" }
+    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 = ref(null);
     const fileList = ref([]);
     const errorTip = ref("");
@@ -54,12 +81,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const ToFormItem = inject("ToFormItem", {});
     const uploadList = ref([]);
     onMounted(() => {
-      fileList.value = props.files;
+      fileList.value = [...props.files];
     });
     watch(
       () => props.files,
       (val) => {
-        fileList.value = val;
+        fileList.value = [...val];
       },
       {
         deep: true
@@ -75,13 +102,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         if (props.mode) {
           arr.push(`mode-${props.mode}`);
         }
-      }
-      return arr;
-    });
-    const setPicClass = computed(() => {
-      const arr = [];
-      if (props.picSize) {
-        arr.push(`pic-size-${props.picSize}`);
+        if (props.type) {
+          arr.push(`type-${props.type}`);
+        }
       }
       return arr;
     });
@@ -148,18 +171,22 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       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);
               }
@@ -167,7 +194,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             reader.readAsDataURL(item);
           });
         } else {
-          fileList.value = [...fileList.value, ...newFileList];
+          if (props.duplicatable) {
+            fileList.value = [...fileList.value, ...newFileList];
+          } else {
+            newFileList.forEach((item) => replaceOrAddToFileList(item));
+          }
           if (newFileList.length && props.auto) {
             nextTick(() => {
               newFileList.forEach((file) => {
@@ -248,6 +279,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       let str = (fileObj.lastModifiedDate ? (/* @__PURE__ */ new Date()).getTime() : fileObj.modificationdate) + fileObj.name + fileObj.size;
       return 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)
@@ -315,16 +354,17 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       submit
     });
     return (_ctx, _cache) => {
+      const _component_to_progress = resolveComponent("to-progress");
       const _directive_tip = resolveDirective("tip");
       const _directive_color = resolveDirective("color");
       return openBlock(), createElementBlock("div", {
-        id: __props.id,
+        id: _ctx.id,
         key: unref(langKey),
-        flex: __props.flex ? __props.flex : null,
+        flex: _ctx.flex ? _ctx.flex : null,
         class: normalizeClass(["to-upload", setClass.value]),
         style: normalizeStyle(setStyle.value)
       }, [
-        __props.verifiable && validateRequired.value ? withDirectives((openBlock(), createElementBlock("span", {
+        _ctx.verifiable && validateRequired.value ? withDirectives((openBlock(), createElementBlock("span", {
           key: 0,
           class: "to-validate",
           req: validateRequired.value,
@@ -337,189 +377,187 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           ref_key: "fileInput",
           ref: fileInput,
           type: "file",
-          accept: __props.accept,
+          accept: _ctx.accept,
           multiple: props.multiple,
           style: { "display": "none" },
           onChange: handleChange
         }, null, 40, ["accept", "multiple"]),
-        __props.type === "input" ? (openBlock(), createBlock(unref(ToInput), {
+        _ctx.type === "input" ? (openBlock(), createElementBlock("div", {
           key: 1,
-          link: "",
-          disabled: props.disabled,
-          width: props.width,
-          placeholder: __props.placeholder || unref(t)("to.common.placeholder.select"),
-          verifiable: false
-        }, {
-          suffix: withCtx(() => [
-            createVNode(unref(ToIcon), {
-              value: "browse",
-              link: "",
-              onClick: handleFile
-            })
-          ]),
-          _: 1
-          /* STABLE */
-        }, 8, ["disabled", "width", "placeholder"])) : createCommentVNode("v-if", true),
-        __props.type === "button" ? (openBlock(), createBlock(unref(ToButton), {
+          class: "to-upload-content"
+        }, [
+          createVNode(unref(ToInput), {
+            class: "to-upload-input",
+            link: "",
+            disabled: "",
+            width: "full",
+            placeholder: _ctx.placeholder || unref(t)("to.common.placeholder.select"),
+            verifiable: false,
+            onClick: handleFile
+          }, {
+            suffix: withCtx(() => [
+              createVNode(unref(ToIcon), { value: "browse" })
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["placeholder"]),
+          !_ctx.auto && fileList.value.length - _ctx.files.length > 0 ? (openBlock(), createBlock(unref(ToButton), {
+            key: 0,
+            icon: "upload",
+            class: "to-upload-upload-button",
+            onClick: withModifiers(submit, ["stop"])
+          }, {
+            default: withCtx(() => [
+              createTextVNode("\u4E0A\u4F20")
+            ]),
+            _: 1
+            /* STABLE */
+          })) : createCommentVNode("v-if", true),
+          _ctx.tip ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "to-upload-tip"
+          }, [
+            createElementVNode(
+              "div",
+              { class: "to-upload-tip-text" },
+              toDisplayString(_ctx.tip),
+              1
+              /* TEXT */
+            )
+          ])) : createCommentVNode("v-if", true)
+        ])) : createCommentVNode("v-if", true),
+        _ctx.type === "button" ? (openBlock(), createElementBlock("div", {
           key: 2,
-          disabled: props.disabled,
-          icon: "upload",
-          "icon-position": "left",
-          onClick: handleFile
-        }, {
-          default: withCtx(() => [
-            createTextVNode(
-              toDisplayString(props.uploadText || unref(t)("to.upload.button")),
+          class: "to-upload-content"
+        }, [
+          createVNode(unref(ToButton), {
+            class: "to-upload-button",
+            disabled: props.disabled,
+            icon: "upload",
+            "icon-position": "left",
+            onClick: handleFile
+          }, {
+            default: withCtx(() => [
+              createTextVNode(
+                toDisplayString(props.text || unref(t)("to.upload.button")),
+                1
+                /* TEXT */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["disabled"]),
+          _ctx.tip ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "to-upload-tip"
+          }, [
+            createElementVNode(
+              "div",
+              { class: "to-upload-tip-text" },
+              toDisplayString(_ctx.tip),
               1
               /* TEXT */
             )
-          ]),
-          _: 1
-          /* STABLE */
-        }, 8, ["disabled"])) : createCommentVNode("v-if", true),
-        __props.type === "img" && _ctx.$slots.default ? (openBlock(), createElementBlock(
-          "div",
-          {
-            key: 3,
-            class: normalizeClass(["to-upload-img", setPicClass.value])
-          },
-          [
-            createElementVNode("div", {
-              class: "to-upload-add",
-              onClick: handleFile
-            }, [
-              createVNode(unref(ToIcon), {
-                value: "add",
-                mode: "upload-add"
-              })
-            ])
-          ],
-          2
-          /* CLASS */
-        )) : createCommentVNode("v-if", true),
-        __props.showList ? (openBlock(), createElementBlock("div", {
-          key: 4,
-          class: "to-upload-list",
-          style: { "width": "100%" }
+          ])) : createCommentVNode("v-if", true)
+        ])) : createCommentVNode("v-if", true),
+        _ctx.showList ? (openBlock(), createElementBlock("div", {
+          key: 3,
+          class: "to-upload-list"
         }, [
           renderSlot(_ctx.$slots, "default", { fileList: fileList.value }, () => [
-            __props.type === "img" ? (openBlock(), createElementBlock(
-              "div",
-              {
-                key: 0,
-                class: normalizeClass(["to-upload-img", setPicClass.value])
-              },
+            _ctx.type === "img" ? (openBlock(), createElementBlock(
+              Fragment,
+              { key: 0 },
               [
-                fileList.value.length ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: "to-upload-img-list"
-                }, [
-                  (openBlock(true), createElementBlock(
-                    Fragment,
-                    null,
-                    renderList(fileList.value, (item, index) => {
-                      return openBlock(), createElementBlock("div", {
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(fileList.value, (item, index) => {
+                    return openBlock(), createElementBlock(
+                      "div",
+                      {
                         key: index,
-                        class: "to-upload-img-list-item"
-                      }, [
-                        createElementVNode("img", {
-                          src: item.src,
-                          class: "to-upload-pic",
-                          alt: ""
-                        }, null, 8, ["src"]),
+                        style: normalizeStyle({ backgroundImage: `url(${item.src})` }),
+                        class: "to-upload-item"
+                      },
+                      [
                         createVNode(unref(ToIcon), {
-                          value: "delete",
-                          mode: "icon-remove",
+                          value: "close",
+                          class: "to-upload-item-remove",
                           link: "",
                           onClick: ($event) => handleDelete(index, item)
                         }, null, 8, ["onClick"]),
-                        item.progress ? (openBlock(), createElementBlock("div", {
+                        item.progress ? (openBlock(), createBlock(_component_to_progress, {
                           key: 0,
-                          class: "upload-progress"
-                        }, [
-                          createElementVNode(
-                            "div",
-                            {
-                              class: "upload-progress-bar",
-                              style: normalizeStyle({ width: item.progress + "%" })
-                            },
-                            null,
-                            4
-                            /* STYLE */
-                          )
-                        ])) : createCommentVNode("v-if", true)
-                      ]);
-                    }),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
-                ])) : createCommentVNode("v-if", true),
-                !_ctx.$slots.default ? (openBlock(), createElementBlock("div", {
-                  key: 1,
+                          class: "to-upload-item-progress",
+                          "text-position": "none",
+                          value: item.progress
+                        }, null, 8, ["value"])) : createCommentVNode("v-if", true)
+                      ],
+                      4
+                      /* STYLE */
+                    );
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                )),
+                createElementVNode("div", {
                   class: "to-upload-add",
                   onClick: handleFile
                 }, [
                   createVNode(unref(ToIcon), {
                     value: "add",
-                    mode: "upload-add"
+                    class: "to-upload-add-icon"
                   })
-                ])) : createCommentVNode("v-if", true)
+                ])
               ],
-              2
-              /* CLASS */
+              64
+              /* STABLE_FRAGMENT */
             )) : (openBlock(true), createElementBlock(
               Fragment,
               { key: 1 },
               renderList(fileList.value, (item, index) => {
                 return openBlock(), createElementBlock("div", {
                   key: index,
-                  class: "to-upload-list-item"
+                  class: "to-upload-item"
                 }, [
-                  createVNode(unref(ToIcon), { value: "img" }),
-                  withDirectives((openBlock(), createElementBlock("div", { class: "file-name" }, [
-                    createTextVNode(
-                      toDisplayString(item.name),
-                      1
-                      /* TEXT */
-                    )
-                  ])), [
-                    [_directive_tip, item.name, "click"]
-                  ]),
+                  createVNode(unref(ToIcon), {
+                    value: getFileIcon(item.name),
+                    class: "to-upload-item-icon"
+                  }, null, 8, ["value"]),
                   createElementVNode(
-                    "span",
-                    null,
+                    "div",
+                    { class: "to-upload-item-name" },
+                    toDisplayString(item.name),
+                    1
+                    /* TEXT */
+                  ),
+                  createElementVNode(
+                    "div",
+                    { class: "to-upload-item-state" },
                     toDisplayString(item.status),
                     1
                     /* TEXT */
                   ),
-                  item.progress ? (openBlock(), createElementBlock("div", {
+                  item[_ctx.fileIdText] && _ctx.downloadable ? (openBlock(), createBlock(unref(ToIcon), {
                     key: 0,
-                    class: "upload-progress"
-                  }, [
-                    createElementVNode(
-                      "div",
-                      {
-                        class: "upload-progress-bar",
-                        style: normalizeStyle({ width: item.progress + "%" })
-                      },
-                      null,
-                      4
-                      /* STYLE */
-                    )
-                  ])) : createCommentVNode("v-if", true),
-                  item[__props.fileIdText] && __props.downloadable ? (openBlock(), createBlock(unref(ToIcon), {
-                    key: 1,
+                    class: "to-upload-item-download",
                     value: "download",
-                    mode: "color",
                     link: "",
-                    onClick: ($event) => handleDownload(item[__props.fileIdText])
+                    onClick: ($event) => handleDownload(item[_ctx.fileIdText])
                   }, null, 8, ["onClick"])) : createCommentVNode("v-if", true),
                   createVNode(unref(ToIcon), {
-                    value: "delete",
-                    mode: "color",
+                    value: "close",
+                    class: "to-upload-item-remove",
                     link: "",
                     onClick: ($event) => handleDelete(index, item)
-                  }, null, 8, ["onClick"])
+                  }, null, 8, ["onClick"]),
+                  item.progress ? (openBlock(), createBlock(_component_to_progress, {
+                    key: 1,
+                    class: "to-upload-item-progress",
+                    "text-position": "none",
+                    value: item.progress
+                  }, null, 8, ["value"])) : createCommentVNode("v-if", true)
                 ]);
               }),
               128
@@ -527,6 +565,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             ))
           ])
         ])) : createCommentVNode("v-if", true),
+        _ctx.tip && _ctx.type === "img" ? (openBlock(), createElementBlock("div", {
+          key: 4,
+          class: "to-upload-tip"
+        }, [
+          createElementVNode(
+            "div",
+            { class: "to-upload-tip-text" },
+            toDisplayString(_ctx.tip),
+            1
+            /* TEXT */
+          )
+        ])) : createCommentVNode("v-if", true),
         errorTip.value ? withDirectives((openBlock(), createElementBlock("span", {
           key: 5,
           class: "to-box-tip"