tanxin-ui 0.2.0

package/es/upload/src/upload.js

@@ -0,0 +1,684 @@
+import { defineComponent, ref, computed, watch, createVNode, mergeProps, TransitionGroup, resolveComponent, Transition, isVNode, Fragment, createTextVNode } from "vue";
+import { PropTypes } from "../../utils/type.js";
+import { useConfig } from "../../utils/hooks/useConfig.js";
+import { getLength, formatFileSize } from "../../utils/common.js";
+import upload from "./request.js";
+import { TMessage } from "../../message/index.js";
+import { nanoid } from "nanoid";
+import "../../utils/components/icons/Checkmark.js";
+import "../../utils/components/icons/CheckmarkCircle.js";
+import "../../utils/components/icons/CheckmarkSharp.js";
+import "../../utils/components/icons/CheckmarkCircleOutline.js";
+import "../../utils/components/icons/AlertCircle.js";
+import "../../utils/components/icons/AlertCircleOutline.js";
+import "../../utils/components/icons/InformationCircle.js";
+import "../../utils/components/icons/InformationCircleOutline.js";
+import "../../utils/components/icons/CloseCircle.js";
+import "../../utils/components/icons/CloseCircleOutline.js";
+import "../../utils/components/icons/HelpCircleSharp.js";
+import EyeOffOutline from "../../utils/components/icons/EyeOffOutline.js";
+import "../../utils/components/icons/EyeOutline.js";
+import "../../utils/components/icons/LoadingOutlined.js";
+import "../../utils/components/icons/Close.js";
+import CloseOutline from "../../utils/components/icons/CloseOutline.js";
+import "../../utils/components/icons/ArrowsMaximize.js";
+import "../../utils/components/icons/ArrowsMinimize.js";
+import AddOutline from "../../utils/components/icons/AddOutline.js";
+import "../../utils/components/icons/RemoveOutline.js";
+import "../../utils/components/icons/ChevronUp.js";
+import "../../utils/components/icons/ChevronDown.js";
+import "../../utils/components/icons/ChevronForward.js";
+import "../../utils/components/icons/ChevronLeft24Filled.js";
+import "../../utils/components/icons/ChevronRight24Filled.js";
+import "../../utils/components/icons/ChevronDoubleLeft16Filled.js";
+import "../../utils/components/icons/ChevronDoubleRight16Filled.js";
+import "../../utils/components/icons/CheckmarkOutline.js";
+import "../../utils/components/icons/IosCheckmark.js";
+import "../../utils/components/icons/Empty.js";
+import "../../utils/components/icons/Bars.js";
+import "../../utils/components/icons/ArrowUpCircle.js";
+import "../../utils/components/icons/ArrowUp.js";
+import "../../utils/components/icons/ArrowForward.js";
+import "../../utils/components/icons/TimeOutline.js";
+import "../../utils/components/icons/CalendarClearOutline.js";
+import "../../utils/components/icons/KeyboardArrowLeftRound.js";
+import "../../utils/components/icons/KeyboardArrowRightRound.js";
+import "../../utils/components/icons/KeyboardDoubleArrowLeftRound.js";
+import "../../utils/components/icons/KeyboardDoubleArrowRightRound.js";
+import "../../utils/components/icons/MenuFoldOutlined.js";
+import "../../utils/components/icons/IosArrowDown.js";
+import "../../utils/components/icons/IosArrowBack.js";
+import "../../utils/components/icons/IosArrowForward.js";
+import "../../utils/components/icons/ImageSharp.js";
+import Pause from "../../utils/components/icons/Pause.js";
+import Refresh from "../../utils/components/icons/Refresh.js";
+import "../../utils/components/icons/QuestionCircle24Regular.js";
+import CloudUploadOutline from "../../utils/components/icons/CloudUploadOutline.js";
+import UploadFileFilled from "../../utils/components/icons/UploadFileFilled.js";
+import "../../utils/components/icons/EllipsisHorizontal.js";
+import "../../utils/components/icons/ArrowNext24Filled.js";
+import "../../utils/components/icons/ArrowPrevious24Filled.js";
+import "../../utils/components/icons/ArrowDropDownSharp.js";
+import "../../utils/components/icons/ArrowDropUpSharp.js";
+import "../../utils/components/icons/ArrowForwardIosFilled.js";
+import { getTransitionGroupProps } from "../../utils/transition.js";
+import cloneDeep from "lodash-es/cloneDeep";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const cardProps = {
+  accept: PropTypes.string,
+  action: PropTypes.string,
+  listType: PropTypes.oneOf(["text", "picture", "picture-card", "pic", "pic-card"]).def("text"),
+  multiple: PropTypes.bool.def(false),
+  drag: PropTypes.bool.def(false),
+  paste: PropTypes.bool.def(false),
+  pictureHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  buttonType: PropTypes.oneOf(["primary", "success", "warning", "danger", "info", "default"]).def("default"),
+  limit: PropTypes.number.def(1),
+  fileList: {
+    type: Array,
+    default: () => []
+  },
+  data: Object,
+  headers: Object,
+  method: PropTypes.string.def("post"),
+  beforeUpload: Function,
+  format: {
+    type: Array
+  },
+  maxSize: PropTypes.number,
+  httpRequest: {
+    type: Function,
+    default: upload
+  },
+  withCredentials: PropTypes.bool.def(false),
+  disabled: PropTypes.bool.def(false),
+  directory: PropTypes.bool.def(false),
+  showFileList: PropTypes.bool.def(true),
+  name: PropTypes.string.def("file"),
+  onStart: {
+    type: Function
+  },
+  onExceedSize: {
+    type: Function
+  },
+  onFormatError: {
+    type: Function
+  },
+  onExceedCount: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  },
+  onRemove: {
+    type: Function
+  },
+  onProgress: {
+    type: Function
+  },
+  onSuccess: {
+    type: Function
+  },
+  onError: {
+    type: Function
+  },
+  clickMethod: {
+    type: Function
+  }
+};
+var Upload = defineComponent({
+  name: "TUpload",
+  props: cardProps,
+  emits: ["update:fileList"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      prefixCls
+    } = useConfig("upload", props);
+    const reqs = ref({});
+    const pictureHeight = computed(() => {
+      if (props.pictureHeight)
+        return props.pictureHeight;
+      if (props.listType.indexOf("-card") > 0)
+        return 120;
+      else
+        return 48;
+    });
+    const previewVisible = ref(false);
+    const previewImageUrl = ref("");
+    const initFileList = () => {
+      fileList.value.forEach((item) => {
+        if (!item.uid) {
+          item.uid = nanoid(10);
+        }
+      });
+    };
+    const fileList = ref(props.fileList);
+    initFileList();
+    const refInput = ref();
+    const classes = computed(() => {
+      return [prefixCls.value, {
+        [`type-picture-card`]: props.listType.indexOf("-card") > 0,
+        [`type-picture`]: ["pic", "picture"].includes(props.listType),
+        [`${prefixCls.value}-drag`]: props.drag,
+        [`is-disabled`]: props.disabled
+      }];
+    });
+    const styles = computed(() => {
+      const style = {};
+      return style;
+    });
+    const itemStyles = computed(() => {
+      const size = getLength(pictureHeight.value);
+      const style = {
+        width: size,
+        height: size
+      };
+      return style;
+    });
+    const handleClick = () => {
+      if (!props.disabled) {
+        if (props.clickMethod)
+          props.clickMethod();
+        else
+          refInput.value.click();
+      }
+    };
+    watch(() => props.fileList, () => {
+      fileList.value = props.fileList;
+      initFileList();
+    }, {
+      deep: true
+    });
+    function handleStart(rawFile) {
+      const file = {
+        name: rawFile.name,
+        percent: 0,
+        status: "ready",
+        size: rawFile.size,
+        raw: rawFile,
+        uid: rawFile.uid
+      };
+      if (props.listType.indexOf("pic") >= 0) {
+        try {
+          file.url = URL.createObjectURL(rawFile);
+        } catch (err) {
+          props.onError(err, rawFile);
+        }
+      }
+      const index = fileList.value.findIndex((item) => item.uid === file.uid);
+      if (index < 0)
+        fileList.value.push(file);
+      else
+        fileList.value[index] = file;
+      if (props.onChange)
+        props.onChange(file, fileList.value);
+    }
+    const showForm = computed(() => {
+      return fileList.value.length < props.limit;
+    });
+    const uploadFiles = (files) => {
+      if (props.multiple && props.limit && props.fileList.length + files.length > props.limit) {
+        if (props.onExceedCount)
+          props.onExceedCount(files);
+        else
+          TMessage.warning(`\u6587\u4EF6\u6570\u91CF\u8D85\u8FC7\u6700\u5927\u503C\uFF1A${props.limit}`);
+        return;
+      }
+      let postFiles = Array.prototype.slice.call(files);
+      if (!props.multiple) {
+        postFiles = postFiles.slice(0, 1);
+        fileList.value = [];
+      }
+      if (postFiles.length === 0)
+        return;
+      postFiles.forEach((file) => {
+        file["uid"] = nanoid(10);
+        uploadOne(file);
+      });
+    };
+    const uploadOne = (rawFile) => {
+      if (props.onStart)
+        props.onStart(rawFile);
+      else
+        handleStart(rawFile);
+      if (!props.beforeUpload) {
+        return sendFile(rawFile);
+      }
+      const before = props.beforeUpload(rawFile);
+      if (before instanceof Promise) {
+        before.then((processedFile) => {
+          const processedFileType = Object.prototype.toString.call(processedFile);
+          if (processedFileType === "[object File]" || processedFileType === "[object Blob]") {
+            return sendFile(processedFile);
+          }
+          return sendFile(rawFile);
+        }).catch((e) => {
+          console && console.log(e);
+        });
+      } else if (before !== false) {
+        sendFile(rawFile);
+      }
+    };
+    const checkFormat = (rawFile) => {
+      if (!props.format)
+        return true;
+      const fileSuffix = "." + rawFile.name.split(".").pop().toLocaleLowerCase();
+      const exists = props.format.some((suffix) => ["." + suffix.toLocaleLowerCase(), suffix.toLocaleLowerCase()].includes(fileSuffix));
+      if (!exists) {
+        if (props.onFormatError)
+          props.onFormatError(rawFile);
+        else
+          TMessage.warning(`\u6587\u4EF6\u683C\u5F0F\u4E0D\u7B26\u8981\u6C42 [${props.format.join(",")}]`);
+      }
+      return exists;
+    };
+    const getFile = (rawFile) => {
+      return fileList.value.find((file) => {
+        return file.uid == rawFile.uid;
+      });
+    };
+    const checkSize = (rawFile) => {
+      if (!props.maxSize)
+        return true;
+      if (rawFile.size > props.maxSize) {
+        if (props.onExceedSize)
+          props.onExceedSize(rawFile);
+        else
+          TMessage.warning(`\u6587\u4EF6\u957F\u5EA6\u4E0D\u5F97\u5927\u4E8E ${formatFileSize(props.maxSize)}`);
+        return false;
+      }
+      return true;
+    };
+    const handleOnProgress = (event, rawFile) => {
+      const file = getFile(rawFile);
+      file.status = "uploading";
+      file.percent = event.percent || 0;
+      if (props.onProgress)
+        props.onProgress(event, rawFile);
+    };
+    const handleOnSuccess = (res, rawFile) => {
+      const file = getFile(rawFile);
+      if (file)
+        file.status = "success";
+      if (props.onSuccess)
+        props.onSuccess(res, rawFile);
+      emit("update:fileList", rawFile, fileList.value);
+    };
+    const handleOnError = (err, rawFile) => {
+      const file = getFile(rawFile);
+      if (file)
+        file.status = "fail";
+      if (props.onError)
+        props.onError(err, rawFile);
+      else
+        TMessage.danger(`\u6587\u4EF6 ${rawFile.name} \u4E0A\u4F20\u5931\u8D25`);
+    };
+    const sendFile = (rawFile) => {
+      if (!checkFormat(rawFile))
+        return;
+      if (!checkSize(rawFile))
+        return;
+      const {
+        uid
+      } = rawFile;
+      const options = {
+        headers: props.headers,
+        withCredentials: props.withCredentials,
+        file: rawFile,
+        data: props.data,
+        method: props.method,
+        filename: props.name,
+        action: props.action,
+        onProgress: (e) => {
+          console.log("onProgress");
+          handleOnProgress(e, rawFile);
+        },
+        onSuccess: (res) => {
+          console.log("onSuccess");
+          handleOnSuccess(res, rawFile);
+          delete reqs.value[uid];
+        },
+        onError: (err) => {
+          console.log("onError");
+          handleOnError(err, rawFile);
+          delete reqs.value[uid];
+        }
+      };
+      const req = props.httpRequest(options);
+      reqs.value[uid] = req;
+      if (req instanceof Promise) {
+        req.then(options.onSuccess, options.onError);
+      }
+    };
+    const handleChange = (e) => {
+      const files = e.target.files;
+      if (!files) {
+        return;
+      }
+      uploadFiles(files);
+      refInput.value.value = null;
+    };
+    const handleAbort = (uid) => {
+      if (reqs.value.hasOwnProperty(uid)) {
+        reqs.value[uid].abort();
+        delete reqs.value[uid];
+      }
+      const index = fileList.value.findIndex((file) => file.uid === uid);
+      if (index >= 0) {
+        URL.revokeObjectURL(fileList.value[index].url);
+        fileList.value[index].status = "abort";
+      }
+    };
+    const handleRemove = (uid) => {
+      if (reqs.value.hasOwnProperty(uid)) {
+        reqs.value[uid].abort();
+        delete reqs.value[uid];
+      }
+      const index = fileList.value.findIndex((file) => file.uid === uid);
+      if (index >= 0) {
+        const removeFile = cloneDeep(fileList.value[index]);
+        URL.revokeObjectURL(fileList.value[index].url);
+        fileList.value.splice(index, 1);
+        if (props.onRemove) {
+          props.onRemove(removeFile, fileList.value);
+        }
+      }
+    };
+    const handleRetry = (rawFile) => {
+      uploadOne(rawFile);
+    };
+    const dragOver = ref(false);
+    const onDrop = (e) => {
+      console.log("onDrop");
+      e.stopPropagation();
+      e.preventDefault();
+      dragOver.value = false;
+      uploadFiles(e.dataTransfer.files);
+    };
+    const onDragover = (e) => {
+      console.log("onDragover");
+      e.stopPropagation();
+      e.preventDefault();
+      if (!props.disabled)
+        dragOver.value = true;
+    };
+    const onDragleave = (e) => {
+      console.log("onDragleave");
+      e.stopPropagation();
+      e.preventDefault();
+      dragOver.value = false;
+    };
+    const handlePaste = (e) => {
+      if (props.disabled)
+        return;
+      if (props.paste) {
+        uploadFiles(e.clipboardData.files);
+      }
+    };
+    const render = () => {
+      let _slot, _slot2;
+      const inputProps = props.directory ? {
+        webkitdirectory: true
+      } : null;
+      const inputElement = createVNode("input", mergeProps({
+        "ref": "refInput",
+        "type": "file",
+        "accept": props.accept,
+        "onChange": handleChange,
+        "multiple": props.multiple
+      }, inputProps), null);
+      const maskTransitionProps = getTransitionGroupProps("fade");
+      const transitionProps = getTransitionGroupProps("move-up");
+      const fileListElement = createVNode("div", {
+        "class": `${prefixCls.value}-file-list`
+      }, [createVNode(TransitionGroup, transitionProps, _isSlot(_slot = fileList.value.map((file) => {
+        return createVNode("div", {
+          "class": [`${prefixCls.value}-file`, {
+            [`is-fail`]: file.status == "fail"
+          }],
+          "key": file.uid
+        }, [createVNode("div", {
+          "class": `${prefixCls.value}-file-info`
+        }, [createVNode("span", {
+          "class": `${prefixCls.value}-file-info-title`
+        }, [createVNode(resolveComponent("t-icon"), null, {
+          default: () => [createVNode(UploadFileFilled, null, null)]
+        }), " ", file.name]), createVNode("div", {
+          "class": `${prefixCls.value}-file-info-actions`
+        }, [file.status === "uploading" ? createVNode(resolveComponent("t-popconfirm"), {
+          "content": "\u8BF7\u786E\u8BA4\u662F\u5426\u53D6\u6D88\u4E0A\u4F20?",
+          "onConfirm": () => handleAbort(file.uid)
+        }, {
+          default: () => [createVNode(resolveComponent("t-icon"), {
+            "class": "small"
+          }, {
+            default: () => [createVNode(Pause, null, null)]
+          })]
+        }) : file.status === "abort" && file.raw ? createVNode(resolveComponent("t-icon"), {
+          "onClick": () => handleRetry(file.raw)
+        }, {
+          default: () => [createVNode(Refresh, null, null)]
+        }) : null, createVNode(resolveComponent("t-popconfirm"), {
+          "content": "\u8BF7\u786E\u8BA4\u662F\u5426\u5220\u9664?",
+          "onConfirm": () => handleRemove(file.uid)
+        }, {
+          default: () => [createVNode(resolveComponent("t-icon"), {
+            "class": "is-big"
+          }, {
+            default: () => [createVNode(CloseOutline, null, null)]
+          })]
+        })])]), createVNode(Transition, maskTransitionProps, {
+          default: () => [["ready", "uploading"].includes(file.status) ? createVNode("div", {
+            "class": `${prefixCls.value}-file-progress`
+          }, [createVNode(resolveComponent("t-progress"), {
+            "percent": file.percent,
+            "stroke-width": 2,
+            "size": "xs"
+          }, null)]) : null]
+        })]);
+      })) ? _slot : {
+        default: () => [_slot]
+      })]);
+      const fileListPictureElement = createVNode("div", {
+        "class": `${prefixCls.value}-file-list`
+      }, [createVNode(TransitionGroup, transitionProps, _isSlot(_slot2 = fileList.value.map((file) => {
+        return createVNode("div", {
+          "class": [`${prefixCls.value}-file`, {
+            [`is-fail`]: file.status == "fail"
+          }],
+          "key": file.uid
+        }, [createVNode("div", {
+          "class": `${prefixCls.value}-file-avatar`,
+          "onClick": () => {
+            previewImage(file.url);
+          }
+        }, [createVNode("img", {
+          "src": file.url
+        }, null)]), createVNode("div", {
+          "class": `${prefixCls.value}-file-main`
+        }, [createVNode("div", {
+          "class": `${prefixCls.value}-file-info`
+        }, [createVNode("div", {
+          "class": `${prefixCls.value}-file-name`
+        }, [file.name]), createVNode("div", {
+          "class": `${prefixCls.value}-file-info-actions`
+        }, [file.status === "uploading" ? createVNode(resolveComponent("t-popconfirm"), {
+          "content": "\u8BF7\u786E\u8BA4\u662F\u5426\u53D6\u6D88\u4E0A\u4F20?",
+          "onConfirm": () => handleAbort(file.uid)
+        }, {
+          default: () => [createVNode(resolveComponent("t-icon"), {
+            "class": "small"
+          }, {
+            default: () => [createVNode(Pause, null, null)]
+          })]
+        }) : file.status === "abort" ? createVNode(resolveComponent("t-icon"), {
+          "onClick": () => handleRetry(file.raw)
+        }, {
+          default: () => [createVNode(Refresh, null, null)]
+        }) : null, createVNode(resolveComponent("t-popconfirm"), {
+          "content": "\u8BF7\u786E\u8BA4\u662F\u5426\u5220\u9664?",
+          "onConfirm": () => handleRemove(file.uid)
+        }, {
+          default: () => [createVNode(resolveComponent("t-icon"), {
+            "class": "is-big"
+          }, {
+            default: () => [createVNode(CloseOutline, null, null)]
+          })]
+        })])]), createVNode(Transition, maskTransitionProps, {
+          default: () => [["ready", "uploading"].includes(file.status) ? createVNode("div", {
+            "class": `${prefixCls.value}-file-progress`
+          }, [createVNode(resolveComponent("t-progress"), {
+            "percent": file.percent,
+            "stroke-width": 2,
+            "size": "xs"
+          }, null)]) : null]
+        })])]);
+      })) ? _slot2 : {
+        default: () => [_slot2]
+      })]);
+      const previewImage = (url) => {
+        previewImageUrl.value = url;
+        previewVisible.value = true;
+      };
+      const fileListCardElement = createVNode("div", {
+        "class": `${prefixCls.value}-file-list`
+      }, [createVNode(TransitionGroup, transitionProps, {
+        default: () => [props.showFileList ? fileList.value.map((file) => {
+          return createVNode("div", {
+            "class": [`${prefixCls.value}-file`, {
+              [`is-fail`]: file.status == "fail"
+            }],
+            "key": file.uid,
+            "style": itemStyles.value
+          }, [["ready", "uploading", "abort", "fail"].includes(file.status) ? createVNode("div", {
+            "class": `${prefixCls.value}-file-uploading`
+          }, [file.status == "abort" ? "\u4E0A\u4F20\u5DF2\u53D6\u6D88" : file.status == "fail" ? "\u4E0A\u4F20\u5931\u8D25" : "\u56FE\u7247\u4E0A\u4F20\u4E2D", file.status == "uploading" ? createVNode(Transition, maskTransitionProps, {
+            default: () => [createVNode(resolveComponent("t-progress"), {
+              "percent": file.percent,
+              "stroke-width": 2,
+              "size": "xs",
+              "show-info": false
+            }, null)]
+          }) : createVNode("div", {
+            "class": `${prefixCls.value}-file-name`
+          }, [file.name]), createVNode("div", {
+            "class": `${prefixCls.value}-file-info-actions`
+          }, [file.status === "uploading" ? createVNode(resolveComponent("t-popconfirm"), {
+            "content": "\u8BF7\u786E\u8BA4\u662F\u5426\u53D6\u6D88\u4E0A\u4F20?",
+            "onConfirm": () => handleAbort(file.uid)
+          }, {
+            default: () => [createVNode(resolveComponent("t-icon"), {
+              "class": "small"
+            }, {
+              default: () => [createVNode(Pause, null, null)]
+            })]
+          }) : ["abort", "fail"].includes(file.status) && file.raw ? createVNode(resolveComponent("t-icon"), {
+            "onClick": () => handleRetry(file.raw)
+          }, {
+            default: () => [createVNode(Refresh, null, null)]
+          }) : null, createVNode(resolveComponent("t-popconfirm"), {
+            "content": "\u8BF7\u786E\u8BA4\u662F\u5426\u5220\u9664?",
+            "onConfirm": () => handleRemove(file.uid)
+          }, {
+            default: () => [createVNode(resolveComponent("t-icon"), {
+              "class": "is-big"
+            }, {
+              default: () => [createVNode(CloseOutline, null, null)]
+            })]
+          })])]) : createVNode(Fragment, null, [createVNode("div", {
+            "class": `${prefixCls.value}-file-img`
+          }, [createVNode("img", {
+            "src": file.url
+          }, null)]), createVNode("div", {
+            "class": `${prefixCls.value}-file-actions`
+          }, [createVNode(resolveComponent("t-icon"), {
+            "onClick": () => {
+              previewImage(file.url);
+            }
+          }, {
+            default: () => [createVNode(EyeOffOutline, null, null)]
+          }), createVNode(resolveComponent("t-popconfirm"), {
+            "content": "\u8BF7\u786E\u8BA4\u662F\u5426\u5220\u9664?",
+            "onConfirm": () => handleRemove(file.uid)
+          }, {
+            default: () => [createVNode(resolveComponent("t-icon"), null, {
+              default: () => [createVNode(CloseOutline, null, null)]
+            })]
+          })])])]);
+        }) : null, showForm.value ? createVNode("div", {
+          "class": `${prefixCls.value}-trigger`,
+          "key": "trigger",
+          "style": itemStyles.value,
+          "onClick": handleClick
+        }, [slots.default ? slots.default() : createVNode(Fragment, null, [createVNode(resolveComponent("t-icon"), null, {
+          default: () => [createVNode(AddOutline, null, null)]
+        }), createVNode("span", null, [createTextVNode("\u4E0A\u4F20\u56FE\u7247")])])]) : null]
+      })]);
+      if (props.listType == "pic-card" || props.listType == "picture-card") {
+        return createVNode(Fragment, null, [createVNode("div", {
+          "class": classes.value,
+          "style": styles.value
+        }, [inputElement, fileListCardElement]), createVNode(resolveComponent("t-modal"), {
+          "visible": previewVisible.value,
+          "onUpdate:visible": ($event) => previewVisible.value = $event,
+          "title": "\u56FE\u7247\u9884\u89C8",
+          "show-footer": false
+        }, {
+          default: () => [createVNode("div", {
+            "class": `${prefixCls.value}-preview`
+          }, [createVNode("img", {
+            "src": previewImageUrl.value,
+            "style": "max-width: 100%"
+          }, null)])]
+        })]);
+      }
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": classes.value,
+        "style": styles.value
+      }, [showForm.value ? createVNode("div", {
+        "class": `${prefixCls.value}-trigger`,
+        "onClick": handleClick,
+        "onPaste": handlePaste,
+        "onDrop": onDrop,
+        "onDragover": onDragover,
+        "onDragleave": onDragleave
+      }, [slots.default ? slots.default() : props.drag ? createVNode(Fragment, null, [createVNode(resolveComponent("t-icon"), {
+        "class": "t-mg-b-8"
+      }, {
+        default: () => [createVNode(CloudUploadOutline, null, null)]
+      }), createTextVNode("\u5355\u51FB\u6216\u628A\u6587\u4EF6\u62D6\u62C9\u5230\u6B64\u5904\u4E0A\u4F20")]) : createVNode(resolveComponent("t-button"), {
+        "type": props.buttonType,
+        "disabled": props.disabled
+      }, {
+        default: () => [createVNode(resolveComponent("t-icon"), {
+          "class": "t-mg-r"
+        }, {
+          default: () => [createVNode(CloudUploadOutline, null, null)]
+        }), createTextVNode("\u56FE\u7247\u4E0A\u4F20")]
+      })]) : null, inputElement, props.showFileList ? ["pic", "picture"].includes(props.listType) ? fileListPictureElement : fileListElement : null]), createVNode(resolveComponent("t-modal"), {
+        "visible": previewVisible.value,
+        "onUpdate:visible": ($event) => previewVisible.value = $event,
+        "title": "\u56FE\u7247\u9884\u89C8",
+        "show-footer": false
+      }, {
+        default: () => [createVNode("img", {
+          "src": previewImageUrl.value,
+          "style": "width: 100%"
+        }, null)]
+      })]);
+    };
+    return {
+      refInput,
+      render
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+export { Upload as default };