@touchvue/ui 1.0.0-beta.5 → 1.0.0-beta.50

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

@@ -1,7 +1,9 @@
-import { defineComponent, ref, onMounted, computed, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, unref, withCtx, createVNode, createCommentVNode, createTextVNode, renderSlot, Fragment, renderList, withDirectives, toDisplayString, nextTick } from 'vue';
+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 { ToButton } from '../../button/index.mjs';
 import { ToIcon } from '../../icon/index.mjs';
 import { ToInput } from '../../input/index.mjs';
 import { $tip } from '../../tip/index.mjs';
+import { langKey, t } from '../../../locale/index.mjs';
 import { fileAjax } from '../../../utils/fileAjax.mjs';
 import { md5 } from '../../../utils/md5.mjs';
 
@@ -11,19 +13,20 @@ const __default__ = defineComponent({
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
+    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 },
+    maxLength: { default: Infinity },
     accept: { default: (props) => props.type === "img" ? ".jpg,.jpeg,.png,.gif" : "" },
     maxSize: { default: "" },
     duplicatable: { type: Boolean, default: false },
@@ -31,12 +34,14 @@ var _sfc_main = /* @__PURE__ */ 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 },
+    uploadText: { default: "" }
   },
   emits: ["start", "success", "error", "clear", "change", "progress", "remove", "download"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -44,13 +49,32 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const fileInput = ref(null);
     const fileList = ref([]);
+    const errorTip = ref("");
+    const errorType = ref("rule");
+    const ToFormItem = inject("ToFormItem", {});
+    const uploadList = ref([]);
     onMounted(() => {
       fileList.value = props.files;
     });
+    watch(
+      () => props.files,
+      (val) => {
+        fileList.value = val;
+      },
+      {
+        deep: true
+      }
+    );
     const setClass = computed(() => {
-      const arr = [];
-      if (props.mode) {
-        arr.push(`mode-${props.mode}`);
+      const arr = ["to-form-readonly"];
+      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(`mode-${props.mode}`);
+        }
       }
       return arr;
     });
@@ -68,16 +92,47 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return style;
     });
-    async function handleFile() {
+    const validateRequired = computed(() => {
+      if (props.required) {
+        return "true";
+      } else if (ToFormItem && ToFormItem.required) {
+        return "true";
+      } else {
+        return "false";
+      }
+    });
+    const validateDesc = computed(() => {
+      if (props.desc) {
+        return props.desc;
+      } else if (ToFormItem && ToFormItem.label) {
+        return ToFormItem.label;
+      } else {
+        return "";
+      }
+    });
+    const validateValue = 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 {
@@ -90,15 +145,11 @@ var _sfc_main = /* @__PURE__ */ 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) {
+        uploadList.value = Array.from(e.target.files);
         emit("change", newFileList);
         if (props.duplicatable) {
           e.target.value = "";
@@ -117,7 +168,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           });
         } else {
           fileList.value = [...fileList.value, ...newFileList];
-          if (newFileList.length && (props.auto || props.type === "button")) {
+          if (newFileList.length && props.auto) {
             nextTick(() => {
               newFileList.forEach((file) => {
                 handleUpload(file);
@@ -126,24 +177,27 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
       } else {
-        $tip.danger(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxLength}\u4E2A\u6587\u4EF6`);
+        $tip.danger(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;
           }
         }
       }
@@ -162,7 +216,7 @@ var _sfc_main = /* @__PURE__ */ 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);
@@ -179,16 +233,19 @@ var _sfc_main = /* @__PURE__ */ 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(str);
     }
     function setFilePropertyByUid(uid, key, value) {
@@ -218,31 +275,80 @@ var _sfc_main = /* @__PURE__ */ 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 {
+        $tip.danger(t("to.upload.tip.error.count", props.maxLength)).catch(() => {
+        });
+      }
+    }
     __expose({
-      clear
+      clear,
+      errorTip,
+      errorType,
+      submit
     });
     return (_ctx, _cache) => {
-      const _component_to_button = resolveComponent("to-button");
       const _directive_tip = resolveDirective("tip");
+      const _directive_color = resolveDirective("color");
       return openBlock(), createElementBlock("div", {
         id: _ctx.id,
+        key: unref(langKey),
+        flex: _ctx.flex ? _ctx.flex : null,
         class: normalizeClass(["to-upload", setClass.value]),
         style: normalizeStyle(setStyle.value)
       }, [
+        _ctx.verifiable && validateRequired.value ? withDirectives((openBlock(), createElementBlock("span", {
+          key: 0,
+          class: "to-validate",
+          req: validateRequired.value,
+          desc: validateDesc.value,
+          value: validateValue.value
+        }, null, 8, ["req", "desc", "value"])), [
+          [vShow, false]
+        ]) : createCommentVNode("v-if", true),
         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" ? (openBlock(), createBlock(unref(ToInput), {
-          key: 0,
+          key: 1,
           readonly: "",
-          width: "20",
-          placeholder: _ctx.placeholder
+          disabled: props.disabled,
+          width: props.width,
+          placeholder: _ctx.placeholder || unref(t)("to.common.placeholder.select"),
+          verifiable: false
         }, {
           suffix: withCtx(() => [
             createVNode(unref(ToIcon), {
@@ -252,122 +358,226 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             })
           ]),
           _: 1
-        }, 8, ["placeholder"])) : createCommentVNode("", true),
-        _ctx.type === "button" ? (openBlock(), createBlock(_component_to_button, {
-          key: 1,
+          /* STABLE */
+        }, 8, ["disabled", "width", "placeholder"])) : createCommentVNode("v-if", true),
+        _ctx.type === "button" ? (openBlock(), createBlock(unref(ToButton), {
+          key: 2,
+          disabled: props.disabled,
           icon: "upload",
           "icon-position": "left",
           onClick: handleFile
         }, {
           default: withCtx(() => [
-            createTextVNode("\u4E0A\u4F20")
+            createTextVNode(
+              toDisplayString(props.uploadText || unref(t)("to.upload.button")),
+              1
+              /* TEXT */
+            )
           ]),
           _: 1
-        })) : createCommentVNode("", true),
-        _ctx.type === "img" && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: normalizeClass(["to-upload-img", setPicClass.value])
-        }, [
-          createElementVNode("div", {
-            class: "to-upload-add",
-            onClick: handleFile
-          }, [
-            createVNode(unref(ToIcon), {
-              value: "add",
-              mode: "upload-add"
-            })
-          ])
-        ], 2)) : createCommentVNode("", true),
-        createElementVNode("div", {
+          /* STABLE */
+        }, 8, ["disabled"])) : createCommentVNode("v-if", true),
+        _ctx.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),
+        _ctx.showList ? (openBlock(), createElementBlock("div", {
+          key: 4,
           class: "to-upload-list",
           style: { "width": "100%" }
         }, [
           renderSlot(_ctx.$slots, "default", { fileList: fileList.value }, () => [
-            _ctx.type === "img" ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(["to-upload-img", setPicClass.value])
-            }, [
-              fileList.value.length ? (openBlock(), createElementBlock("div", {
+            _ctx.type === "img" ? (openBlock(), createElementBlock(
+              "div",
+              {
                 key: 0,
-                class: "to-upload-img-list"
-              }, [
-                (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"]),
-                    createVNode(unref(ToIcon), {
-                      value: "delete",
-                      mode: "icon-remove",
-                      link: "",
-                      onClick: ($event) => handleDelete(index)
-                    }, null, 8, ["onClick"]),
-                    item.progress ? (openBlock(), createElementBlock("div", {
-                      key: 0,
-                      class: "upload-progress"
-                    }, [
-                      createElementVNode("div", {
-                        class: "upload-progress-bar",
-                        style: normalizeStyle({ width: item.progress + "%" })
-                      }, null, 4)
-                    ])) : createCommentVNode("", true)
-                  ]);
-                }), 128))
-              ])) : createCommentVNode("", true),
-              !_ctx.$slots.default ? (openBlock(), createElementBlock("div", {
-                key: 1,
-                class: "to-upload-add",
-                onClick: handleFile
-              }, [
-                createVNode(unref(ToIcon), {
-                  value: "add",
-                  mode: "upload-add"
-                })
-              ])) : createCommentVNode("", true)
-            ], 2)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(fileList.value, (item, index) => {
-              return openBlock(), createElementBlock("div", {
-                key: index,
-                class: "to-upload-list-item"
-              }, [
-                createVNode(unref(ToIcon), { value: "img" }),
-                withDirectives((openBlock(), createElementBlock("div", { class: "file-name" }, [
-                  createTextVNode(toDisplayString(item.name), 1)
-                ])), [
-                  [_directive_tip, item.name, "click"]
-                ]),
-                createElementVNode("span", null, toDisplayString(item.status), 1),
-                item.progress ? (openBlock(), createElementBlock("div", {
+                class: normalizeClass(["to-upload-img", setPicClass.value])
+              },
+              [
+                fileList.value.length ? (openBlock(), createElementBlock("div", {
                   key: 0,
-                  class: "upload-progress"
+                  class: "to-upload-img-list"
                 }, [
-                  createElementVNode("div", {
-                    class: "upload-progress-bar",
-                    style: normalizeStyle({ width: item.progress + "%" })
-                  }, null, 4)
-                ])) : createCommentVNode("", true),
-                item[_ctx.fileIdText] && _ctx.downloadable ? (openBlock(), createBlock(unref(ToIcon), {
+                  (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"]),
+                        createVNode(unref(ToIcon), {
+                          value: "delete",
+                          mode: "icon-remove",
+                          link: "",
+                          onClick: ($event) => handleDelete(index, item)
+                        }, null, 8, ["onClick"]),
+                        item.progress ? (openBlock(), createElementBlock("div", {
+                          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,
-                  value: "download",
-                  mode: "color",
-                  link: "",
-                  onClick: ($event) => handleDownload(item[_ctx.fileIdText])
-                }, null, 8, ["onClick"])) : createCommentVNode("", true),
-                createVNode(unref(ToIcon), {
-                  value: "delete",
-                  mode: "color",
-                  link: "",
-                  onClick: ($event) => handleDelete(index)
-                }, null, 8, ["onClick"])
-              ]);
-            }), 128))
+                  class: "to-upload-add",
+                  onClick: handleFile
+                }, [
+                  createVNode(unref(ToIcon), {
+                    value: "add",
+                    mode: "upload-add"
+                  })
+                ])) : createCommentVNode("v-if", true)
+              ],
+              2
+              /* CLASS */
+            )) : (openBlock(true), createElementBlock(
+              Fragment,
+              { key: 1 },
+              renderList(fileList.value, (item, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: "to-upload-list-item"
+                }, [
+                  createVNode(unref(ToIcon), { value: "img" }),
+                  withDirectives((openBlock(), createElementBlock("div", { class: "file-name" }, [
+                    createTextVNode(
+                      toDisplayString(item.name),
+                      1
+                      /* TEXT */
+                    )
+                  ])), [
+                    [_directive_tip, item.name, "click"]
+                  ]),
+                  createElementVNode(
+                    "span",
+                    null,
+                    toDisplayString(item.status),
+                    1
+                    /* TEXT */
+                  ),
+                  item.progress ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: "upload-progress"
+                  }, [
+                    createElementVNode(
+                      "div",
+                      {
+                        class: "upload-progress-bar",
+                        style: normalizeStyle({ width: item.progress + "%" })
+                      },
+                      null,
+                      4
+                      /* STYLE */
+                    )
+                  ])) : createCommentVNode("v-if", true),
+                  item[_ctx.fileIdText] && _ctx.downloadable ? (openBlock(), createBlock(unref(ToIcon), {
+                    key: 1,
+                    value: "download",
+                    mode: "color",
+                    link: "",
+                    onClick: ($event) => handleDownload(item[_ctx.fileIdText])
+                  }, null, 8, ["onClick"])) : createCommentVNode("v-if", true),
+                  createVNode(unref(ToIcon), {
+                    value: "delete",
+                    mode: "color",
+                    link: "",
+                    onClick: ($event) => handleDelete(index, item)
+                  }, null, 8, ["onClick"])
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
           ])
-        ])
-      ], 14, ["id"]);
+        ])) : createCommentVNode("v-if", true),
+        errorTip.value ? withDirectives((openBlock(), createElementBlock("span", {
+          key: 5,
+          class: "to-box-tip"
+        }, [
+          errorType.value === "rule" ? (openBlock(), createElementBlock(
+            Fragment,
+            { key: 0 },
+            [
+              createTextVNode(
+                toDisplayString(unref(t)("to.upload.selectError")) + " ",
+                1
+                /* TEXT */
+              ),
+              withDirectives(createVNode(
+                unref(ToIcon),
+                {
+                  value: "help",
+                  color: "danger",
+                  mode: "toast"
+                },
+                null,
+                512
+                /* NEED_PATCH */
+              ), [
+                [
+                  _directive_tip,
+                  errorTip.value,
+                  void 0,
+                  { danger: true }
+                ]
+              ])
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : (openBlock(), createElementBlock(
+            Fragment,
+            { key: 1 },
+            [
+              createTextVNode(
+                toDisplayString(unref(t)("to.upload.required")),
+                1
+                /* TEXT */
+              )
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))
+        ])), [
+          [_directive_color, "danger"]
+        ]) : createCommentVNode("v-if", true)
+      ], 14, ["id", "flex"]);
     };
   }
 });