@opentinyvue/vue-file-upload 2.21.0

package/lib/mobile.js

@@ -0,0 +1,177 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/file-upload/vue';
+import { defineComponent, props, setup } from '@opentinyvue/vue-common';
+import UploadList from '@opentinyvue/vue-upload-list';
+import Upload from '@opentinyvue/vue-upload';
+import Progress from '@opentinyvue/vue-progress';
+import Modal from '@opentinyvue/vue-modal';
+import { iconUpload } from '@opentinyvue/vue-icon';
+import '@opentinyvue/vue-theme-mobile/file-upload/index.css';
+import '@opentinyvue/vue-theme-mobile/upload-list/index.css';
+import '@opentinyvue/vue-theme-mobile/upload-dragger/index.css';
+import '@opentinyvue/vue-theme-mobile/upload/index.css';
+
+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 __vue2_script = defineComponent({
+  inheritAttrs: false,
+  props: [].concat(props, ["size", "action", "drag", "headers", "data", "multiple", "name", "withCredentials", "showFileList", "accept", "type", "beforeUpload", "beforeRemove", "fileList", "autoUpload", "listType", "httpRequest", "disabled", "limit", "fileIconList", "display", "fileTitle", "headerShow", "successStatistics", "uploadIcon", "edm"]),
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api,
+      extendOptions: {
+        Modal
+      }
+    });
+  },
+  components: {
+    Progress,
+    UploadList,
+    Upload,
+    IconUpload: iconUpload()
+  },
+  render: function render() {
+    var _this = this;
+    var h = arguments[0];
+    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 ? function() {
+    } : _this$state$listeners3;
+    var fileTitle = this.fileTitle, headerShow = this.headerShow, successStatistics = this.successStatistics, uploadIcon = this.uploadIcon;
+    var uploadList;
+    var uploaArr = this.state.uploadFiles;
+    var successNum = 0;
+    var pictureArr = [];
+    uploaArr && uploaArr.map(function(item) {
+      if (_this.listType === "picture-card" && item.url) {
+        pictureArr.push(item.url);
+      }
+      if (item.status === "success") {
+        successNum += 1;
+      }
+    });
+    if (this.showFileList) {
+      var listData = {
+        props: {
+          disabled: this.state.uploadDisabled,
+          listType: this.listType,
+          files: this.state.uploadFiles,
+          filesIcon: this.fileIconList,
+          display: this.display,
+          srcList: pictureArr,
+          handlePreview: preview
+        },
+        on: {
+          remove: this.handleRemove
+        }
+      };
+      uploadList = h(UploadList, _extends({}, listData), function(props2) {
+        if (_this.slots.file) {
+          return _this.slots.file({
+            file: props2.file
+          });
+        }
+      });
+    }
+    var uploadData = {
+      props: {
+        type: this.type,
+        drag: this.drag,
+        action: this.state.url,
+        multiple: this.multiple,
+        withCredentials: this.withCredentials,
+        headers: this.headers,
+        name: this.name,
+        data: this.data,
+        accept: this.accept,
+        fileList: this.state.uploadFiles,
+        autoUpload: this.autoUpload,
+        listType: this.listType,
+        disabled: this.state.uploadDisabled,
+        limit: this.limit,
+        onExceed: exceed,
+        onStart: this.handleStart,
+        onProgress: this.handleProgress,
+        onSuccess: this.handleSuccess,
+        onError: this.handleError,
+        onPreview: preview,
+        httpRequest: this.state.httpRequest,
+        size: this.size
+      },
+      ref: "upload-inner"
+    };
+    var trigger = this.slots.trigger && this.slots.trigger() || this.slots.default();
+    var uploadComponent = !headerShow || this.listType === "picture-card" ? h(Upload, _extends({}, uploadData), trigger) : "";
+    var header = h("div", {
+      "class": "tiny-mobile-file-upload__header"
+    }, [h("div", {
+      "class": "tiny-mobile-file-upload__header-title"
+    }, [fileTitle]), h("div", {
+      "class": "tiny-mobile-file-upload__header-upload"
+    }, [successStatistics ? h("span", {
+      "class": "upload-status"
+    }, [successNum, "/", uploaArr.length]) : "", this.listType !== "picture-card" && uploadIcon ? h("span", {
+      "class": "upload-icon"
+    }, [h(Upload, _extends({}, uploadData), trigger || h("icon-upload"))]) : ""])]);
+    return h("div", {
+      "class": ["tiny-mobile-file-upload", this.$attrs.class],
+      "ref": "fileUpload"
+    }, [headerShow ? header : "", h("div", {
+      "class": {
+        "tiny-mobile-file-upload__wrap": true,
+        "is-card": this.listType === "picture-card"
+      }
+    }, [this.listType === "picture-card" ? uploadList : "", this.slots.trigger ? [uploadComponent, this.slots.default && this.slots.default()] : uploadComponent, this.slots.tip && this.slots.tip(), this.listType !== "picture-card" ? uploadList : ""])]);
+  }
+});
+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 mobile = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobile as default };