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

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

@@ -3,9 +3,11 @@
 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');
 
@@ -15,19 +17,20 @@ const __default__ = vue.defineComponent({
 var _sfc_main = /* @__PURE__ */ vue.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 },
@@ -35,12 +38,14 @@ 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 },
+    uploadText: { default: "" }
   },
   emits: ["start", "success", "error", "clear", "change", "progress", "remove", "download"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -48,13 +53,32 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     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;
     });
+    vue.watch(
+      () => props.files,
+      (val) => {
+        fileList.value = val;
+      },
+      {
+        deep: true
+      }
+    );
     const setClass = vue.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;
     });
@@ -72,16 +96,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,15 +149,11 @@ 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) {
+        uploadList.value = Array.from(e.target.files);
         emit("change", newFileList);
         if (props.duplicatable) {
           e.target.value = "";
@@ -121,7 +172,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           });
         } else {
           fileList.value = [...fileList.value, ...newFileList];
-          if (newFileList.length && (props.auto || props.type === "button")) {
+          if (newFileList.length && props.auto) {
             vue.nextTick(() => {
               newFileList.forEach((file) => {
                 handleUpload(file);
@@ -130,24 +181,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 +220,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,16 +237,19 @@ 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 setFilePropertyByUid(uid, key, value) {
@@ -222,156 +279,309 @@ 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 _directive_tip = vue.resolveDirective("tip");
+      const _directive_color = vue.resolveDirective("color");
       return vue.openBlock(), vue.createElementBlock("div", {
-        id: _ctx.id,
+        id: __props.id,
+        key: vue.unref(index.langKey),
+        flex: __props.flex ? __props.flex : null,
         class: vue.normalizeClass(["to-upload", setClass.value]),
         style: vue.normalizeStyle(setStyle.value)
       }, [
+        __props.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,
+          accept: __props.accept,
+          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,
+        __props.type === "input" ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ToInput), {
+          key: 1,
           readonly: "",
-          width: "20",
-          placeholder: _ctx.placeholder
+          disabled: props.disabled,
+          width: props.width,
+          placeholder: __props.placeholder || vue.unref(index.t)("to.common.placeholder.select"),
+          verifiable: false
         }, {
           suffix: vue.withCtx(() => [
-            vue.createVNode(vue.unref(index$1.ToIcon), {
+            vue.createVNode(vue.unref(index$2.ToIcon), {
               value: "browse",
               link: "",
               onClick: handleFile
             })
           ]),
           _: 1
-        }, 8, ["placeholder"])) : vue.createCommentVNode("", true),
-        _ctx.type === "button" ? (vue.openBlock(), vue.createBlock(_component_to_button, {
-          key: 1,
+          /* STABLE */
+        }, 8, ["disabled", "width", "placeholder"])) : vue.createCommentVNode("v-if", true),
+        __props.type === "button" ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ToButton), {
+          key: 2,
+          disabled: props.disabled,
           icon: "upload",
           "icon-position": "left",
           onClick: handleFile
         }, {
           default: vue.withCtx(() => [
-            vue.createTextVNode("\u4E0A\u4F20")
+            vue.createTextVNode(
+              vue.toDisplayString(props.uploadText || vue.unref(index.t)("to.upload.button")),
+              1
+              /* TEXT */
+            )
           ]),
           _: 1
-        })) : vue.createCommentVNode("", true),
-        _ctx.type === "img" && _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 2,
-          class: vue.normalizeClass(["to-upload-img", setPicClass.value])
-        }, [
-          vue.createElementVNode("div", {
-            class: "to-upload-add",
-            onClick: handleFile
-          }, [
-            vue.createVNode(vue.unref(index$1.ToIcon), {
-              value: "add",
-              mode: "upload-add"
-            })
-          ])
-        ], 2)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
+          /* STABLE */
+        }, 8, ["disabled"])) : vue.createCommentVNode("v-if", true),
+        __props.type === "img" && _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock(
+          "div",
+          {
+            key: 3,
+            class: vue.normalizeClass(["to-upload-img", setPicClass.value])
+          },
+          [
+            vue.createElementVNode("div", {
+              class: "to-upload-add",
+              onClick: handleFile
+            }, [
+              vue.createVNode(vue.unref(index$2.ToIcon), {
+                value: "add",
+                mode: "upload-add"
+              })
+            ])
+          ],
+          2
+          /* CLASS */
+        )) : vue.createCommentVNode("v-if", true),
+        __props.showList ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 4,
           class: "to-upload-list",
           style: { "width": "100%" }
         }, [
           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", {
+            __props.type === "img" ? (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", {
+                class: vue.normalizeClass(["to-upload-img", setPicClass.value])
+              },
+              [
+                fileList.value.length ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 0,
-                  class: "upload-progress"
+                  class: "to-upload-img-list"
                 }, [
-                  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), {
+                  (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$2.ToIcon), {
+                          value: "delete",
+                          mode: "icon-remove",
+                          link: "",
+                          onClick: ($event) => handleDelete(index, item)
+                        }, 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
+                            /* STYLE */
+                          )
+                        ])) : vue.createCommentVNode("v-if", true)
+                      ]);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ])) : vue.createCommentVNode("v-if", true),
+                !_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", {
                   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))
+                  class: "to-upload-add",
+                  onClick: handleFile
+                }, [
+                  vue.createVNode(vue.unref(index$2.ToIcon), {
+                    value: "add",
+                    mode: "upload-add"
+                  })
+                ])) : vue.createCommentVNode("v-if", true)
+              ],
+              2
+              /* CLASS */
+            )) : (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$2.ToIcon), { value: "img" }),
+                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { class: "file-name" }, [
+                    vue.createTextVNode(
+                      vue.toDisplayString(item.name),
+                      1
+                      /* TEXT */
+                    )
+                  ])), [
+                    [_directive_tip, item.name, "click"]
+                  ]),
+                  vue.createElementVNode(
+                    "span",
+                    null,
+                    vue.toDisplayString(item.status),
+                    1
+                    /* TEXT */
+                  ),
+                  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
+                      /* STYLE */
+                    )
+                  ])) : vue.createCommentVNode("v-if", true),
+                  item[__props.fileIdText] && __props.downloadable ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ToIcon), {
+                    key: 1,
+                    value: "download",
+                    mode: "color",
+                    link: "",
+                    onClick: ($event) => handleDownload(item[__props.fileIdText])
+                  }, null, 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
+                  vue.createVNode(vue.unref(index$2.ToIcon), {
+                    value: "delete",
+                    mode: "color",
+                    link: "",
+                    onClick: ($event) => handleDelete(index, item)
+                  }, null, 8, ["onClick"])
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
           ])
-        ])
-      ], 14, ["id"]);
+        ])) : 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"]);
     };
   }
 });