@opentinyvue/vue-file-upload 2.21.0

package/lib/pc.js

@@ -0,0 +1,544 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/file-upload/vue';
+import { defineComponent, props, setup, isVue3 } from '@opentinyvue/vue-common';
+import UploadList from '@opentinyvue/vue-upload-list';
+import Upload from '@opentinyvue/vue-upload';
+import Progress from '@opentinyvue/vue-progress';
+import '@opentinyvue/vue-theme/file-upload/index.css';
+import '@opentinyvue/vue-theme/upload-list/index.css';
+import '@opentinyvue/vue-theme/upload-dragger/index.css';
+import '@opentinyvue/vue-theme/upload/index.css';
+import Modal from '@opentinyvue/vue-modal';
+import DialogBox from '@opentinyvue/vue-dialog-box';
+import Popover from '@opentinyvue/vue-popover';
+import Button from '@opentinyvue/vue-button';
+import Input from '@opentinyvue/vue-input';
+import Switch from '@opentinyvue/vue-switch';
+import Tooltip from '@opentinyvue/vue-tooltip';
+import { iconAttachment, iconSuccessful, iconClose, iconDownload, iconFileCloudupload, iconPlus, iconHelpCircle } from '@opentinyvue/vue-icon';
+import Streamsaver from 'streamsaver';
+
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+
+var helper;
+var hasRequiredHelper;
+function requireHelper() {
+  if (hasRequiredHelper) return helper;
+  hasRequiredHelper = 1;
+  function _extends() {
+    return _extends = Object.assign ? Object.assign.bind() : function(a) {
+      for (var b, c = 1; c < arguments.length; c++) for (var d in b = arguments[c], b) Object.prototype.hasOwnProperty.call(b, d) && (a[d] = b[d]);
+      return a;
+    }, _extends.apply(this, arguments);
+  }
+  var normalMerge = ["attrs", "props", "domProps"], toArrayMerge = ["class", "style", "directives"], functionalMerge = ["on", "nativeOn"], mergeJsxProps = function mergeJsxProps2(a) {
+    return a.reduce(function(c, a2) {
+      for (var b in a2) if (!c[b]) c[b] = a2[b];
+      else if (-1 !== normalMerge.indexOf(b)) c[b] = _extends({}, c[b], a2[b]);
+      else if (-1 !== toArrayMerge.indexOf(b)) {
+        var d = c[b] instanceof Array ? c[b] : [c[b]], e = a2[b] instanceof Array ? a2[b] : [a2[b]];
+        c[b] = [].concat(d, e);
+      } else if (-1 !== functionalMerge.indexOf(b)) {
+        for (var f in a2[b]) if (c[b][f]) {
+          var g = c[b][f] instanceof Array ? c[b][f] : [c[b][f]], h = a2[b][f] instanceof Array ? a2[b][f] : [a2[b][f]];
+          c[b][f] = [].concat(g, h);
+        } else c[b][f] = a2[b][f];
+      } else if ("hook" === b) for (var i in a2[b]) c[b][i] = c[b][i] ? mergeFn(c[b][i], a2[b][i]) : a2[b][i];
+      else c[b] = a2[b];
+      return c;
+    }, {});
+  }, mergeFn = function mergeFn2(a, b) {
+    return function() {
+      a && a.apply(this, arguments), b && b.apply(this, arguments);
+    };
+  };
+  helper = mergeJsxProps;
+  return helper;
+}
+var helperExports = requireHelper();
+var _mergeJSXProps5 = /* @__PURE__ */ getDefaultExportFromCjs(helperExports);
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+var TinyIconAttachment = iconAttachment();
+var TinyIconSuccessful = iconSuccessful();
+var TinyIconClose = iconClose();
+var TinyIconDownload = iconDownload();
+var TinyIconFileCloudupload = iconFileCloudupload();
+var TinyIconPlus = iconPlus();
+var TinyIconHelpCircle = iconHelpCircle();
+var __vue2_script = defineComponent({
+  inheritAttrs: false,
+  props: [].concat(props, ["edm", "action", "headers", "data", "multiple", "name", "drag", "dragger", "withCredentials", "showFileList", "accept", "type", "beforeUpload", "beforeRemove", "fileList", "autoUpload", "listType", "httpRequest", "disabled", "limit", "openDownloadFile", "mergeService", "fileSize", "thumbOption", "isFolderTitle", "listOption", "maxNameLength", "isHidden", "sourceType", "cacheToken", "pasteUpload", "reUploadable", "reUploadTip", "encryptConfig", "title", "showTitle", "displayOnly", "compact", "promptTip"]),
+  emits: ["change", "hash-progress", "progress", "success", "error", "remove", "download"],
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api,
+      extendOptions: {
+        Modal,
+        Streamsaver
+      }
+    });
+  },
+  components: {
+    TinyProgress: Progress,
+    UploadList,
+    Upload,
+    TinyDialogBox: DialogBox,
+    Popover,
+    TinyButton: Button,
+    TinyInput: Input,
+    TinySwitch: Switch,
+    TinyTooltip: Tooltip
+  },
+  render: function render() {
+    var _this = this;
+    var h = arguments[0];
+    var uploadList;
+    var _this$state$listeners = this.state.listeners, _this$state$listeners2 = _this$state$listeners.exceed, exceed = _this$state$listeners2 === void 0 ? function() {
+    } : _this$state$listeners2, _this$state$listeners3 = _this$state$listeners.preview, preview = _this$state$listeners3 === void 0 ? void 0 : _this$state$listeners3, downloadAll = _this$state$listeners["download-all"], handleDownloadFile = _this$state$listeners["download-file"], reUpload = _this$state$listeners["re-upload"];
+    var _this$state = this.state, uploadFiles = _this$state.uploadFiles, isEdm = _this$state.isEdm, dialogConfigObj = _this$state.dialogConfigObj, isSuccess = _this$state.isSuccess, uploadDisabled = _this$state.uploadDisabled, url = _this$state.url, accept = _this$state.accept, httpRequest = _this$state.httpRequest, edmToken = _this$state.edmToken, iframeUrl = _this$state.iframeUrl;
+    var downloadFile = this.downloadFile, handleRemove = this.handleRemove, handleReUpload = this.handleReUpload, handleReUploadTotal = this.handleReUploadTotal, updateFile = this.updateFile, slots = this.slots, _this$edm = this.edm, edm = _this$edm === void 0 ? {} : _this$edm, t = this.t, $attrs = this.$attrs, a = this.a, encryptConfig = this.encryptConfig, encryptDialogConfirm = this.encryptDialogConfirm, handleTriggerClick = this.handleTriggerClick, handleClickFileList = this.handleClickFileList, handleFileClick = this.handleFileClick, displayOnly = this.displayOnly, listType = this.listType, compact = this.compact, promptTip = this.promptTip;
+    var isPictureCard = listType === "picture-card";
+    var isSaasType = listType === "saas";
+    var _this$thumbOption = this.thumbOption, showDel = _this$thumbOption.showDel, showDownload = _this$thumbOption.showDownload, showTooltip = _this$thumbOption.showTooltip, showUpdate = _this$thumbOption.showUpdate, icon = _this$thumbOption.icon;
+    var execDownload = this.thumbOption.downloadFile || downloadFile;
+    var isFolder = edm.upload ? edm.upload.isFolder : false;
+    var notice = this.slots.notice && this.slots.notice();
+    var title = this.title || t("ui.fileUpload.attachment");
+    var getDefaultTitle = function getDefaultTitle2(title2, showTitle) {
+      return h("div", {
+        "class": "tiny-upload-title"
+      }, [h("span", {
+        "class": [showTitle ? "title-show" : "title-hide", displayOnly ? "display-only" : ""]
+      }, [title2])]);
+    };
+    var popperConfig = {
+      bubbling: true
+    };
+    var getTriggerContent = function getTriggerContent2(t2, disabled) {
+      return h("div", {
+        "class": "trigger-btn"
+      }, [h("tiny-button", {
+        "attrs": {
+          "disabled": disabled
+        },
+        "on": {
+          "click": handleTriggerClick
+        }
+      }, [h(TinyIconPlus), h("span", [t2("ui.fileUpload.uploadFile")])])]);
+    };
+    var getOperateContent = function getOperateContent2(downloadAll2, uploadFiles2, t2) {
+      return downloadAll2 && isSaasType ? h("div", {
+        "class": "operate-content"
+      }, [h("tiny-button", {
+        "on": {
+          "click": function click() {
+            return downloadAll2(uploadFiles2);
+          }
+        }
+      }, [h("div", {
+        "class": "button-wrap"
+      }, [h(TinyIconDownload), h("span", [t2("ui.fileUpload.downloadAll")])])])]) : null;
+    };
+    var getDefaultTip = function getDefaultTip2(tipMsg2) {
+      if (promptTip) {
+        return slots.tip && slots.tip() || tipMsg2 && promptTip && h("tiny-tooltip", {
+          "attrs": {
+            "effect": "light",
+            "content": slots.tip && slots.tip() || tipMsg2,
+            "placement": "right",
+            "popper-options": popperConfig
+          }
+        }, [h("div", {
+          "class": "prompt-tip"
+        }, [h(TinyIconHelpCircle)])]);
+      } else {
+        return h("div", {
+          "class": "tip-wrap"
+        }, [h("div", {
+          "attrs": {
+            "title": tipMsg2
+          },
+          "class": "tip-content"
+        }, [slots.tip && slots.tip() || tipMsg2])]);
+      }
+    };
+    var getThumIcon = function getThumIcon2(file) {
+      return [showDownload && h("span", {
+        "class": "thumb-icon",
+        "attrs": {
+          "title": t("ui.fileUpload.downloadFile")
+        },
+        "on": {
+          "click": function click() {
+            return execDownload(file);
+          }
+        }
+      }, [h(TinyIconDownload, {
+        "class": "download-icon"
+      })]), isEdm && !isFolder && showUpdate && h("span", {
+        "class": "thumb-icon",
+        "attrs": {
+          "title": t("ui.fileUpload.updateFile")
+        },
+        "on": {
+          "click": function click() {
+            return updateFile(file);
+          }
+        }
+      }, [h(TinyIconFileCloudupload, {
+        "class": "refres-icon"
+      })]), showDel && h("span", {
+        "class": "thumb-icon",
+        "attrs": {
+          "title": t("ui.fileUpload.deleteFile")
+        },
+        "on": {
+          "click": function click() {
+            return handleRemove(file);
+          }
+        }
+      }, [h(TinyIconClose, {
+        "class": "close-icon"
+      })])];
+    };
+    var getThumbList = function getThumbList2(file) {
+      var result = slots.file && slots.file({
+        file
+      });
+      if (result) {
+        return result;
+      } else {
+        return [h(TinyIconSuccessful, {
+          "class": "thumb-success-icon"
+        }), h("span", {
+          "class": ["thumb-item-name", !showDel ? "hide-close-icon" : "", !showDownload ? "hide-download-icon" : ""]
+        }, [file.name]), getThumIcon(file)];
+      }
+    };
+    var getFileSize = function getFileSize2() {
+      return h("span", [uploadFiles.length]);
+    };
+    if (this.showFileList) {
+      if (listType === "thumb") {
+        uploadList = uploadFiles.length === 0 ? "" : h("div", {
+          class: "tiny-upload--thumb__wrap"
+        }, [h("Popover", {
+          props: {
+            trigger: "hover",
+            popperClass: this.thumbOption.popperClass,
+            width: this.thumbOption.width
+          },
+          scopedSlots: {
+            reference: function reference() {
+              return h("div", {
+                class: "tiny-upload--thumb__head"
+              }, [h(icon || TinyIconAttachment, {
+                class: "thumb-icon"
+              }), getFileSize()]);
+            },
+            default: function _default() {
+              return h("div", {
+                class: "tiny-upload--thumb__body"
+              }, [h("div", {
+                class: "tiny-upload--thumb__list"
+              }, [uploadFiles.map(function(item) {
+                return h("Popover", {
+                  props: {
+                    content: item.name,
+                    trigger: showTooltip ? "hover" : "manual",
+                    placement: "top"
+                  },
+                  scopedSlots: {
+                    reference: function reference() {
+                      return h("div", {
+                        class: "thumb-item",
+                        on: {
+                          click: function click() {
+                            handleFileClick(item);
+                          }
+                        }
+                      }, [getThumbList(item)]);
+                    }
+                  }
+                });
+              })])]);
+            }
+          }
+        })]);
+      } else {
+        var uploadListDate = {
+          props: {
+            disabled: uploadDisabled,
+            reUploadable: this.reUploadable,
+            reUploadTip: this.reUploadTip,
+            isFolder,
+            isEdm,
+            edm,
+            displayOnly,
+            listType,
+            files: uploadFiles,
+            isFolderTitle: this.isFolderTitle,
+            listOption: this.listOption,
+            maxNameLength: this.maxNameLength,
+            handlePreview: preview,
+            handleDownloadFile,
+            handleReUpload: reUpload,
+            openDownloadFile: this.openDownloadFile,
+            compact
+          },
+          scopedSlots: {
+            default: function _default(props2) {
+              if (slots.file) {
+                return slots.file({
+                  file: props2.file
+                });
+              }
+            },
+            tip: function tip() {
+              return _tip;
+            },
+            "assist-content": function assistContent(props2) {
+              if (slots["assist-content"]) {
+                return slots["assist-content"]({
+                  file: props2.file
+                });
+              }
+            },
+            operate: function operate(props2) {
+              if (slots.operate) {
+                return slots.operate({
+                  file: props2.file
+                });
+              }
+            }
+          },
+          on: {
+            remove: handleRemove,
+            reUpload: handleReUpload,
+            reUploadTotal: handleReUploadTotal,
+            update: updateFile,
+            start: this.handleStart,
+            "click-file-list": handleClickFileList,
+            "update:visible": function updateVisible(visible) {
+              return _this.state.visible = visible;
+            }
+          },
+          ref: "upload-list-inner"
+        };
+        uploadList = h(UploadList, uploadListDate);
+      }
+    }
+    var uploadData = {
+      props: {
+        type: this.type,
+        drag: this.drag,
+        action: url,
+        multiple: this.multiple,
+        withCredentials: this.withCredentials,
+        headers: this.headers,
+        name: this.name,
+        data: this.data,
+        edm: this.edm,
+        accept: isEdm ? accept : this.accept,
+        fileList: uploadFiles,
+        autoUpload: this.autoUpload,
+        listType,
+        disabled: uploadDisabled,
+        displayOnly,
+        limit: this.limit,
+        onExceed: exceed,
+        onStart: this.handleStart,
+        onProgress: this.handleProgress,
+        onSuccess: this.handleSuccess,
+        onError: this.handleError,
+        onPreview: preview,
+        httpRequest,
+        isFolder,
+        edmToken,
+        pasteUpload: this.pasteUpload,
+        isHidden: this.isHidden
+      },
+      ref: "upload-inner"
+    };
+    var tipMsg = this.getTipMessage({
+      accept: isEdm ? accept : this.accept,
+      fileSize: this.fileSize,
+      limit: this.limit
+    });
+    var _tip = !displayOnly && isSaasType ? getDefaultTip(tipMsg) : null;
+    _tip && _tip.data && (_tip.data.slot = "tip");
+    var _operate = !displayOnly ? getOperateContent(downloadAll, uploadFiles, t) : null;
+    _operate && _operate.data && (_operate.data.slot = "operate");
+    var defaultSlot = slots.default && slots.default();
+    var trigger = slots.trigger ? slots.trigger() : defaultSlot;
+    var getChildren = function getChildren2() {
+      var triggerDom = !trigger && isSaasType && !displayOnly ? getTriggerContent(t, _this.disabled) : trigger;
+      var childNodes = isVue3 ? {
+        default: function _default() {
+          return triggerDom;
+        },
+        tip: function tip() {
+          return _tip;
+        },
+        operate: function operate() {
+          return _operate;
+        }
+      } : [triggerDom, _tip, _operate];
+      return childNodes;
+    };
+    var uploadComponent = h(Upload, uploadData, getChildren());
+    var previewComponent = null;
+    var encryptDialogComponent = null;
+    if (isEdm && isSuccess) {
+      uploadData.props.accept = accept;
+      uploadData.props.edmToken = edmToken;
+    }
+    if (this.edm.preview) {
+      previewComponent = h("tiny-dialog-box", _extends({
+        minHeight: "600px",
+        width: "60%"
+      }, dialogConfigObj, {
+        scopedSlots: {
+          default: function _default() {
+            return h("iframe", {
+              "attrs": {
+                "id": "_iframe",
+                "allowfullscreen": true,
+                "allowtransparency": "true",
+                "frameborder": "0",
+                "border": "0",
+                "marginwidth": "0",
+                "marginheight": "0",
+                "scrolling": "no",
+                "src": iframeUrl
+              },
+              "style": "display: block;width: 100%;height: 500px;display: inline-block;"
+            });
+          }
+        }
+      }));
+    }
+    if (encryptConfig.enabled) {
+      encryptDialogComponent = h("tiny-dialog-box", {
+        class: "encrypt-config-dialog",
+        style: "",
+        props: {
+          lockScroll: true,
+          visible: this.state.encryptDialogConfig.show,
+          dragable: true,
+          title: this.t("ui.fileUpload.encryptDialogTitle"),
+          width: "380px",
+          height: "auto"
+        },
+        on: {
+          "update:visible": function updateVisible(value) {
+            return _this.state.encryptDialogConfig.show = value;
+          }
+        },
+        scopedSlots: {
+          default: function _default() {
+            return h("div", {
+              "class": "encrypt-config-dialog-body"
+            }, [h("div", {
+              "class": "encrypt-item"
+            }, [_this.t("ui.fileUpload.addWatermark")]), h("div", [h("tiny-input", {
+              "model": {
+                value: _this.encryptConfig.watermark,
+                callback: function callback($$v) {
+                  _this.$set(_this.encryptConfig, "watermark", $$v);
+                }
+              }
+            })]), h("p", [" "]), h("div", {
+              "class": "encrypt-item"
+            }, [_this.t("ui.fileUpload.encrypted")]), h("div", [h("tiny-switch", {
+              "model": {
+                value: _this.encryptConfig.encrypt,
+                callback: function callback($$v) {
+                  _this.$set(_this.encryptConfig, "encrypt", $$v);
+                }
+              }
+            })])]);
+          },
+          footer: function footer() {
+            return [h(Button, {
+              "on": {
+                "click": function click() {
+                  return _this.state.encryptDialogConfig.show = false;
+                }
+              }
+            }, [_this.t("ui.base.cancel")]), [h(Button, {
+              "attrs": {
+                "type": "primary"
+              },
+              "on": {
+                "click": function click() {
+                  return encryptDialogConfirm();
+                }
+              }
+            }, [_this.t("ui.popupload.uploadButtonText")])]];
+          }
+        }
+      });
+    }
+    var attrs = a($attrs, ["^on[A-Z]"]);
+    return h("div", _mergeJSXProps5([{
+      "class": "tiny-file-upload"
+    }, attrs]), [isSaasType ? getDefaultTitle(title, this.showTitle) : "", notice, isPictureCard ? uploadList : "", slots.trigger ? [uploadComponent, defaultSlot] : uploadComponent, !isSaasType && slots.tip && slots.tip(), isPictureCard ? "" : uploadList, previewComponent, encryptDialogComponent]);
+  }
+});
+var __vue2_render, __vue2_staticRenderFns;
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, __vue2_render, __vue2_staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var pc = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { pc as default };

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@opentinyvue/vue-file-upload",
+  "version": "2.21.0",
+  "description": "",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "dependencies": {
+    "@opentinyvue/vue-button": "~2.21.0",
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-dialog-box": "~2.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0",
+    "@opentinyvue/vue-input": "~2.21.0",
+    "@opentinyvue/vue-modal": "~2.21.0",
+    "@opentinyvue/vue-popover": "~2.21.0",
+    "@opentinyvue/vue-progress": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0",
+    "@opentinyvue/vue-tooltip": "~2.21.0",
+    "@opentinyvue/vue-upload": "~2.21.0",
+    "@opentinyvue/vue-upload-list": "~2.21.0",
+    "@opentinyvue/vue-switch": "~2.21.0",
+    "@opentinyvue/vue-theme": "~3.21.0",
+    "@opentinyvue/vue-theme-mobile": "~3.21.0",
+    "streamsaver": "2.0.6"
+  },
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}