@web-utils/component 2.0.9 → 2.0.11

package/dist/components/chunk-file-uploader-file/index.js

@@ -1,104 +1,109 @@
-import n from "simple-uploader.js";
-import { s as p } from "../../chunks/97652d86.js";
-import { n as f } from "../../chunks/5d4282fb.js";
-const o = ["fileProgress", "fileSuccess", "fileComplete", "fileError"];
-var u = function() {
-  var e = this, i = e.$createElement, s = e._self._c || i;
-  return s("div", {
+import Uploader from "simple-uploader.js";
+import { s as secondsToStr } from "../../chunks/a8891d2c.js";
+import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
+const events = ["fileProgress", "fileSuccess", "fileComplete", "fileError"];
+const events$1 = events;
+var render = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "chunk-file-uploader-file",
     attrs: {
-      status: e.status
+      "status": _vm.status
     }
-  }, [e._t("default", function() {
-    return [s("div", {
+  }, [_vm._t("default", function() {
+    return [_c("div", {
       staticClass: "chunk-file-uploader-file-info"
-    }, [s("div", {
+    }, [_c("div", {
       staticClass: "chunk-file-uploader-file-name",
       attrs: {
-        title: e.file.name
+        "title": _vm.file.name
       }
-    }, [s("i", {
+    }, [_c("i", {
       staticClass: "chunk-file-uploader-file-icon",
       attrs: {
-        icon: e.fileCategory
+        "icon": _vm.fileCategory
       }
-    }), e._v(e._s(e.file.name) + " ")]), s("div", {
+    }), _vm._v(_vm._s(_vm.file.name) + " ")]), _c("div", {
       staticClass: "chunk-file-uploader-file-size"
-    }, [e._v(" " + e._s(e.formatedSize) + " ")]), s("div", {
+    }, [_vm._v(" " + _vm._s(_vm.formatedSize) + " ")]), _c("div", {
       staticClass: "chunk-file-uploader-file-status"
-    }, [s("span", {
+    }, [_c("span", {
       directives: [{
         name: "show",
         rawName: "v-show",
-        value: !["uploading", "md5"].includes(e.status),
+        value: !["uploading", "md5"].includes(_vm.status),
         expression: "!['uploading', 'md5'].includes(status)"
       }]
-    }, [e._v(e._s(e.statusText))]), s("span", {
+    }, [_vm._v(_vm._s(_vm.statusText))]), _c("span", {
       directives: [{
         name: "show",
         rawName: "v-show",
-        value: e.status === "md5",
+        value: _vm.status === "md5",
         expression: "status === 'md5'"
       }]
-    }, [e._v(e._s(e.file.md5Progress))]), s("span", {
+    }, [_vm._v(_vm._s(_vm.file.md5Progress))]), _c("span", {
       directives: [{
         name: "show",
         rawName: "v-show",
-        value: e.status === "uploading",
+        value: _vm.status === "uploading",
         expression: "status === 'uploading'"
       }],
       staticStyle: {
         "padding-left": "4px"
       }
-    }, [s("span", [e._v(e._s(e.progressStyle.progress))]), e._v(" | "), s("em", [e._v(e._s(e.formatedAverageSpeed))]), e._v(" | "), s("i", [e._v(e._s(e.formatedTimeRemaining))])])]), s("div", {
+    }, [_c("span", [_vm._v(_vm._s(_vm.progressStyle.progress))]), _vm._v(" | "), _c("em", [_vm._v(_vm._s(_vm.formatedAverageSpeed))]), _vm._v(" | "), _c("i", [_vm._v(_vm._s(_vm.formatedTimeRemaining))])])]), _c("div", {
       staticClass: "chunk-file-uploader-file-actions"
-    }, [s("span", {
+    }, [_c("span", {
       staticClass: "chunk-file-uploader-file-pause",
       on: {
-        click: e.pause
+        "click": _vm.pause
       }
-    }), s("span", {
+    }), _c("span", {
       staticClass: "chunk-file-uploader-file-resume",
       on: {
-        click: e.resume
+        "click": _vm.resume
       }
-    }, [e._v("️")]), s("span", {
+    }, [_vm._v("️")]), _c("span", {
       staticClass: "chunk-file-uploader-file-retry",
       on: {
-        click: e.retry
+        "click": _vm.retry
       }
-    }), s("span", {
+    }), _c("span", {
       staticClass: "chunk-file-uploader-file-remove",
       on: {
-        click: e.remove
+        "click": _vm.remove
       }
     })])])];
   }, {
-    file: e.file,
-    list: e.list,
-    status: e.status,
-    paused: e.paused,
-    error: e.error,
-    response: e.response,
-    averageSpeed: e.averageSpeed,
-    formatedAverageSpeed: e.formatedAverageSpeed,
-    currentSpeed: e.currentSpeed,
-    isComplete: e.isComplete,
-    isUploading: e.isUploading,
-    size: e.size,
-    formatedSize: e.formatedSize,
-    uploadedSize: e.uploadedSize,
-    progress: e.progress,
-    progressStyle: e.progressStyle,
-    progressingClass: e.progressingClass,
-    timeRemaining: e.timeRemaining,
-    formatedTimeRemaining: e.formatedTimeRemaining,
-    type: e.type,
-    extension: e.extension,
-    fileCategory: e.fileCategory
+    "file": _vm.file,
+    "list": _vm.list,
+    "status": _vm.status,
+    "paused": _vm.paused,
+    "error": _vm.error,
+    "response": _vm.response,
+    "averageSpeed": _vm.averageSpeed,
+    "formatedAverageSpeed": _vm.formatedAverageSpeed,
+    "currentSpeed": _vm.currentSpeed,
+    "isComplete": _vm.isComplete,
+    "isUploading": _vm.isUploading,
+    "size": _vm.size,
+    "formatedSize": _vm.formatedSize,
+    "uploadedSize": _vm.uploadedSize,
+    "progress": _vm.progress,
+    "progressStyle": _vm.progressStyle,
+    "progressingClass": _vm.progressingClass,
+    "timeRemaining": _vm.timeRemaining,
+    "formatedTimeRemaining": _vm.formatedTimeRemaining,
+    "type": _vm.type,
+    "extension": _vm.extension,
+    "fileCategory": _vm.fileCategory
   })], 2);
-}, d = [];
-const c = {
+};
+var staticRenderFns = [];
+const ChunkFileUploaderFile_vue_vue_type_style_index_0_lang = "";
+const __vue2_script = {
   name: "ChunkFileUploaderFile",
   props: {
     file: {
@@ -109,18 +114,18 @@ const c = {
     },
     list: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   data() {
     return {
       response: null,
-      paused: !1,
-      error: !1,
+      paused: false,
+      error: false,
       averageSpeed: 0,
       currentSpeed: 0,
-      isComplete: !1,
-      isUploading: !1,
+      isComplete: false,
+      isUploading: false,
       size: 0,
       formatedSize: "",
       uploadedSize: 0,
@@ -133,9 +138,11 @@ const c = {
   },
   computed: {
     fileCategory() {
-      const e = this.extension;
-      let s = this.file.isFolder ? "folder" : "unknown";
-      const t = this.file.uploader.opts.categoryMap || {
+      const extension = this.extension;
+      const isFolder = this.file.isFolder;
+      let type = isFolder ? "folder" : "unknown";
+      const categoryMap = this.file.uploader.opts.categoryMap;
+      const typeMap = categoryMap || {
         image: ["gif", "jpg", "jpeg", "png", "bmp", "webp"],
         video: ["mp4", "m3u8", "rmvb", "avi", "swf", "3gp", "mkv", "flv"],
         audio: ["mp3", "wav", "wma", "ogg", "aac", "flac"],
@@ -155,50 +162,85 @@ const c = {
           "pptx"
         ]
       };
-      return Object.keys(t).forEach((a) => {
-        t[a].indexOf(e) > -1 && (s = a);
-      }), s;
+      Object.keys(typeMap).forEach((_type) => {
+        const extensions = typeMap[_type];
+        if (extensions.indexOf(extension) > -1) {
+          type = _type;
+        }
+      });
+      return type;
     },
     progressStyle() {
-      const e = Math.floor(this.progress * 100), i = `translateX(${Math.floor(e - 100)}%)`;
+      const progress = Math.floor(this.progress * 100);
+      const style = `translateX(${Math.floor(progress - 100)}%)`;
       return {
-        progress: `${e}%`,
-        webkitTransform: i,
-        mozTransform: i,
-        msTransform: i,
-        transform: i
+        progress: `${progress}%`,
+        webkitTransform: style,
+        mozTransform: style,
+        msTransform: style,
+        transform: style
       };
     },
     formatedAverageSpeed() {
-      return `${n.utils.formatSize(this.averageSpeed)} / s`;
+      return `${Uploader.utils.formatSize(this.averageSpeed)} / s`;
     },
     status() {
-      const { isUploading: e, isComplete: i, isError: s, paused: r } = this, { md5Computing: t } = this.file;
-      return t ? "md5" : i ? "success" : s ? "error" : e ? "uploading" : r ? "paused" : "waiting";
+      const { isUploading, isComplete, isError, paused } = this;
+      const { md5Computing } = this.file;
+      if (md5Computing) {
+        return "md5";
+      } else if (isComplete) {
+        return "success";
+      } else if (isError) {
+        return "error";
+      } else if (isUploading) {
+        return "uploading";
+      } else if (paused) {
+        return "paused";
+      } else {
+        return "waiting";
+      }
     },
     statusText() {
-      const e = this.status, i = this.file.uploader.fileStatusText;
-      let s = e;
-      return typeof i == "function" ? s = i(e, this.response) : s = i[e], s || "";
+      const status = this.status;
+      const fileStatusText = this.file.uploader.fileStatusText;
+      let txt = status;
+      if (typeof fileStatusText === "function") {
+        txt = fileStatusText(status, this.response);
+      } else {
+        txt = fileStatusText[status];
+      }
+      return txt || "";
     },
     formatedTimeRemaining() {
-      const e = this.timeRemaining, i = this.file;
-      if (e === Number.POSITIVE_INFINITY || e === 0)
+      const timeRemaining = this.timeRemaining;
+      const file = this.file;
+      if (timeRemaining === Number.POSITIVE_INFINITY || timeRemaining === 0) {
         return "";
-      let s = p(e);
-      const r = i.uploader.opts.parseTimeRemaining;
-      return r && (s = r(e, s)), s;
+      }
+      let parsedTimeRemaining = secondsToStr(timeRemaining);
+      const parseTimeRemaining = file.uploader.opts.parseTimeRemaining;
+      if (parseTimeRemaining) {
+        parsedTimeRemaining = parseTimeRemaining(timeRemaining, parsedTimeRemaining);
+      }
+      return parsedTimeRemaining;
     }
   },
   watch: {
-    status(e, i) {
-      i && e === "uploading" && i !== "uploading" ? this.tid = setTimeout(() => {
-        this.progressingClass = "uploader-file-progressing";
-      }, 200) : (clearTimeout(this.tid), this.progressingClass = "");
+    status(newStatus, oldStatus) {
+      if (oldStatus && newStatus === "uploading" && oldStatus !== "uploading") {
+        this.tid = setTimeout(() => {
+          this.progressingClass = "uploader-file-progressing";
+        }, 200);
+      } else {
+        clearTimeout(this.tid);
+        this.progressingClass = "";
+      }
     }
   },
   mounted() {
-    const e = ["paused", "error", "averageSpeed", "currentSpeed"], i = [
+    const staticProps = ["paused", "error", "averageSpeed", "currentSpeed"];
+    const fnProps = [
       "isComplete",
       "isUploading",
       {
@@ -224,88 +266,124 @@ const c = {
         fn: "getExtension"
       }
     ];
-    e.forEach((t) => {
-      this[t] = this.file[t];
-    }), i.forEach((t) => {
-      typeof t == "string" ? this[t] = this.file[t]() : this[t.key] = this.file[t.fn]();
+    staticProps.forEach((prop) => {
+      this[prop] = this.file[prop];
     });
-    const s = this._handlers = {}, r = (t) => (s[t] = (...a) => {
-      this.fileEventsHandler(t, a);
-    }, s[t]);
-    o.forEach((t) => {
-      this.file.uploader.on(t, r(t));
+    fnProps.forEach((fnProp) => {
+      if (typeof fnProp === "string") {
+        this[fnProp] = this.file[fnProp]();
+      } else {
+        this[fnProp.key] = this.file[fnProp.fn]();
+      }
+    });
+    const handlers = this._handlers = {};
+    const eventHandler = (event) => {
+      handlers[event] = (...args) => {
+        this.fileEventsHandler(event, args);
+      };
+      return handlers[event];
+    };
+    events$1.forEach((event) => {
+      this.file.uploader.on(event, eventHandler(event));
     });
   },
   destroyed() {
-    o.forEach((e) => {
-      this.file.uploader.off(e, this._handlers[e]);
-    }), this._handlers = null;
+    events$1.forEach((event) => {
+      this.file.uploader.off(event, this._handlers[event]);
+    });
+    this._handlers = null;
   },
   methods: {
     _actionCheck() {
-      this.paused = this.file.paused, this.error = this.file.error, this.isUploading = this.file.isUploading();
+      this.paused = this.file.paused;
+      this.error = this.file.error;
+      this.isUploading = this.file.isUploading();
     },
     pause() {
-      this.file.pause(), this._actionCheck(), this._fileProgress();
+      this.file.pause();
+      this._actionCheck();
+      this._fileProgress();
     },
     resume() {
-      this.file.resume(), this._actionCheck();
+      this.file.resume();
+      this._actionCheck();
     },
     remove() {
-      this.$set(this.file, "canceled", !0), this.file.cancel();
+      this.$set(this.file, "canceled", true);
+      this.file.cancel();
     },
     retry() {
-      this.file.retry(), this._actionCheck();
+      this.file.retry();
+      this._actionCheck();
     },
-    processResponse(e) {
-      let i = e;
+    processResponse(message) {
+      let res = message;
       try {
-        i = JSON.parse(e);
-      } catch {
+        res = JSON.parse(message);
+      } catch (e) {
       }
-      this.response = i;
+      this.response = res;
     },
-    fileEventsHandler(e, i) {
-      const s = i[0], r = i[1], t = this.list ? s : r;
-      if (this.file === t) {
-        if (this.list && e === "fileSuccess") {
-          this.processResponse(i[2]);
+    fileEventsHandler(event, args) {
+      const rootFile = args[0];
+      const file = args[1];
+      const target = this.list ? rootFile : file;
+      if (this.file === target) {
+        if (this.list && event === "fileSuccess") {
+          this.processResponse(args[2]);
           return;
         }
-        this[`_${e}`].apply(this, i);
+        this[`_${event}`].apply(this, args);
       }
     },
     _fileProgress() {
-      this.progress = this.file.progress(), this.averageSpeed = this.file.averageSpeed, this.currentSpeed = this.file.currentSpeed, this.timeRemaining = this.file.timeRemaining(), this.uploadedSize = this.file.sizeUploaded(), this._actionCheck();
+      this.progress = this.file.progress();
+      this.averageSpeed = this.file.averageSpeed;
+      this.currentSpeed = this.file.currentSpeed;
+      this.timeRemaining = this.file.timeRemaining();
+      this.uploadedSize = this.file.sizeUploaded();
+      this._actionCheck();
     },
-    _fileSuccess(e, i, s) {
-      e && this.processResponse(s), this._fileProgress(), this.error = !1, this.isComplete = !0, this.isUploading = !1;
+    _fileSuccess(rootFile, file, message) {
+      if (rootFile) {
+        this.processResponse(message);
+      }
+      this._fileProgress();
+      this.error = false;
+      this.isComplete = true;
+      this.isUploading = false;
     },
     _fileComplete() {
       this._fileSuccess();
     },
-    _fileError(e, i, s) {
-      this._fileProgress(), this.processResponse(s), this.error = !0, this.isComplete = !1, this.isUploading = !1;
+    _fileError(rootFile, file, message) {
+      this._fileProgress();
+      this.processResponse(message);
+      this.error = true;
+      this.isComplete = false;
+      this.isUploading = false;
     }
   }
-}, l = {};
-var h = /* @__PURE__ */ f(
-  c,
-  u,
-  d,
-  !1,
-  m,
+};
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
+  false,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function m(e) {
-  for (let i in l)
-    this[i] = l[i];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
 }
-const y = /* @__PURE__ */ function() {
-  return h.exports;
+const ChunkFileUploaderFile = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  y as default
+  ChunkFileUploaderFile as default
 };

package/dist/components/chunk-file-uploader-file/style.css

@@ -1 +1,125 @@
-.chunk-file-uploader-file{position:relative;height:49px;overflow:hidden;line-height:49px;border-bottom:1px solid #cdcdcd}.chunk-file-uploader-file[status=waiting] .chunk-file-uploader-file-pause,.chunk-file-uploader-file[status=uploading] .chunk-file-uploader-file-pause,.chunk-file-uploader-file[status=paused] .chunk-file-uploader-file-resume,.chunk-file-uploader-file[status=error] .chunk-file-uploader-file-retry{display:block}.chunk-file-uploader-file[status=success] .chunk-file-uploader-file-remove{display:none}.chunk-file-uploader-file[status=error] .chunk-file-uploader-file-progress{background:#ffe0e0}.chunk-file-uploader-file-progress{position:absolute;width:100%;height:100%;background:#e2eeff;transform:translate(-100%)}.chunk-file-uploader-file-progressing{transition:all .4s linear}.chunk-file-uploader-file-info{position:relative;z-index:1;height:100%;overflow:hidden;display:flex;flex-direction:row}.chunk-file-uploader-file-info:hover{background-color:#f0f0f033}.chunk-file-uploader-file-info i,.chunk-file-uploader-file-info em{font-style:normal}.chunk-file-uploader-file-name,.chunk-file-uploader-file-size,.chunk-file-uploader-file-meta,.chunk-file-uploader-file-status,.chunk-file-uploader-file-actions{position:relative;height:100%;padding:0 10px}.chunk-file-uploader-file-size,.chunk-file-uploader-file-meta,.chunk-file-uploader-file-status,.chunk-file-uploader-file-actions{flex-shrink:0}.chunk-file-uploader-file-name{overflow:hidden;white-space:nowrap;text-indent:14px;text-overflow:ellipsis;flex:1 1 auto}.chunk-file-uploader-file-icon{display:inline-block;width:24px;height:24px;margin-top:13px;margin-right:8px;vertical-align:top}.chunk-file-uploader-file-icon:before{display:block;height:100%;color:gray;font-size:24px;line-height:1;text-indent:0;content:"\1f4c3"}.chunk-file-uploader-file-icon[icon=folder]:before{content:"\1f4c2"}.chunk-file-uploader-file-icon[icon=image]:before{content:"\1f4ca"}.chunk-file-uploader-file-icon[icon=video]:before{content:"\1f4f9"}.chunk-file-uploader-file-icon[icon=audio]:before{content:"\1f3b5"}.chunk-file-uploader-file-icon[icon=document]:before{content:"\1f4cb"}.chunk-file-uploader-file-actions>span{display:none;float:left;width:16px;height:16px;margin-top:16px;margin-right:10px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAJcEhZcwAACxMAAAsTAQCanBgAAARkSURBVGje7ZnfS1NRHMAH4ptPkvQSuAdBkCxD8FUQJMEULUgzy1KyyPVQ4JMiiP4Bvg6EwUQQfMmwhwRDshwaKUjDVCgoSdDNHkzTJZ6+Z37Purve8+PeTb2TM/ggu+ew89l33x8H9BBCPG7GowXTJej3+wnDvEm0JuLC04+EYWftVAUv+fiCvDUdQR1BHUEdQR3BTIygvixoQS14XgTtthLVdpNWwXRLqvQ724LplFRtyrYF0yVpFLQrKRVMh6RZ0I6kkmCqklaCqpKZH0FX56Crq9jVfdDVk0RfFrSgFsxkQVmLcdKCVrKySCrryhPEyYShhzOcrFtG0EoilfHHk1CRU5rF6ZjNZhlVOW6RnMSVyyilKies4pO41diVy8wIujoHXV3FGdMHXTtJKLFYTLhZtq4vC1rwXApCZTIqgR6g1PBMCO9DL3bMMSqBHqDU8EyISDAHiGKvWwcCQG2KgjlAFCDAOhAAap0K5gKLphk8mqJgLrCIgoxRJ4J5wKpJ7gAoMkn5EBXBPGDVJHcAFJmkfIhQcAql1oBpTvTol9gG9pm4RHAKpdaAaU706JfYBvaZuJVgPQrt4sFlnOh5MC/p3lmJYD0K7eLBZZzoeTAv6d5ZnuAYHjpgEOnk5F0ufhG6v1ggOIaHDhhEOjl5l4tfhO4vthLcwAMrFNvLJO5vEwhu4IEViu1lEve3WQmyoihQFBzG/V0CQVYUBYqCw7i/SxTBcpsRbFeIYLnNCLZbCY5b5KAnxRwct8hBj9McZFVMW0ihRNBuFdMWUigRlFaxuQ9WWYjRMTiIe5z0wSoLMToGB3GPsA9aTZIJoB+nRgBnM1tzOkkmgH6cGgGczWzNpzqLx3n/aULJJgezeNw07oxQySbVywKjBOgFRnDs+VEsx8FlgVEC9AIjOPb8KJYjvSzoG7UW1IJaUAtqQS14toLNM5fN5APdwBJA8G83Pk/aK/rgzVvXzeQD3cASQPBvNz5P2ssTzAaGUIrHEO6zI5gNDKEUjyHcxxWkh4Ylcowwk1QQpIeGJXKMMJO0EgwqyjGCioJBJvDrxRMSuVOTJEXfbz1/bHwWtBL0yoQehK6RucgE+bGzanzulQh6E3IgQV+xpc8kcrfuSO7eTfJ3ZYmQw0Oy9azVKOk1C/bJ5D5F38YPeLfx0rjWJxHsS0SqsSYuxySjj5qO5Oj7xQWy2VBtFOwzCy6ryH3YfE3uh64Y1xckgstJPydEjkkeHv07Iy4Xaao15+KCWTBx6M/db+T9xivSErqaJDdzXI6yLRE8Vgg0coex/SPJvT0SbWu0KpZtbgSpCH3NRt7I5OxHkObc6heU+/M/J5vrpBFM5GBLqCQux14COXs5CNXK5OjPGm1tSMrJSOMNYQ4mVTGV/L6zTL7+DovkbFUxbSW0Wo05l8hJWsU+cRWfSh+Mt5Lb1ck/J1TvVsdDaR/MiEni+llsdZuZp62EViu+96bpNjNPWwmtVnzvFd5m9IVVC54x/wA7gNvqFG9vXQAAAABJRU5ErkJggg==) no-repeat 0 0;cursor:pointer}.chunk-file-uploader-file-actions>span:hover{background-position-x:-21px}.chunk-file-uploader-file-actions .chunk-file-uploader-file-pause{background-position-y:0}.chunk-file-uploader-file-actions .chunk-file-uploader-file-resume{background-position-y:-17px}.chunk-file-uploader-file-actions .chunk-file-uploader-file-retry{background-position-y:-53px}.chunk-file-uploader-file-actions .chunk-file-uploader-file-remove{display:block;background-position-y:-34px}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.chunk-file-uploader-file {
+  position: relative;
+  height: 49px;
+  overflow: hidden;
+  line-height: 49px;
+  border-bottom: 1px solid #cdcdcd;
+}
+.chunk-file-uploader-file[status=waiting] .chunk-file-uploader-file-pause, .chunk-file-uploader-file[status=uploading] .chunk-file-uploader-file-pause {
+  display: block;
+}
+.chunk-file-uploader-file[status=paused] .chunk-file-uploader-file-resume {
+  display: block;
+}
+.chunk-file-uploader-file[status=error] .chunk-file-uploader-file-retry {
+  display: block;
+}
+.chunk-file-uploader-file[status=success] .chunk-file-uploader-file-remove {
+  display: none;
+}
+.chunk-file-uploader-file[status=error] .chunk-file-uploader-file-progress {
+  background: #ffe0e0;
+}
+.chunk-file-uploader-file-progress {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #e2eeff;
+  transform: translateX(-100%);
+}
+.chunk-file-uploader-file-progressing {
+  transition: all 0.4s linear;
+}
+.chunk-file-uploader-file-info {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+}
+.chunk-file-uploader-file-info:hover {
+  background-color: rgba(240, 240, 240, 0.2);
+}
+.chunk-file-uploader-file-info i, .chunk-file-uploader-file-info em {
+  font-style: normal;
+}
+.chunk-file-uploader-file-name, .chunk-file-uploader-file-size, .chunk-file-uploader-file-meta, .chunk-file-uploader-file-status, .chunk-file-uploader-file-actions {
+  position: relative;
+  height: 100%;
+  padding: 0 10px;
+}
+.chunk-file-uploader-file-size, .chunk-file-uploader-file-meta, .chunk-file-uploader-file-status, .chunk-file-uploader-file-actions {
+  flex-shrink: 0;
+}
+.chunk-file-uploader-file-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-indent: 14px;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+}
+.chunk-file-uploader-file-icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-top: 13px;
+  margin-right: 8px;
+  vertical-align: top;
+}
+.chunk-file-uploader-file-icon::before {
+  display: block;
+  height: 100%;
+  color: #808080;
+  font-size: 24px;
+  line-height: 1;
+  text-indent: 0;
+  content: "📃";
+}
+.chunk-file-uploader-file-icon[icon=folder]::before {
+  content: "📂";
+}
+.chunk-file-uploader-file-icon[icon=image]::before {
+  content: "📊";
+}
+.chunk-file-uploader-file-icon[icon=video]::before {
+  content: "📹";
+}
+.chunk-file-uploader-file-icon[icon=audio]::before {
+  content: "🎵";
+}
+.chunk-file-uploader-file-icon[icon=document]::before {
+  content: "📋";
+}
+.chunk-file-uploader-file-actions > span {
+  display: none;
+  float: left;
+  width: 16px;
+  height: 16px;
+  margin-top: 16px;
+  margin-right: 10px;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAJcEhZcwAACxMAAAsTAQCanBgAAARkSURBVGje7ZnfS1NRHMAH4ptPkvQSuAdBkCxD8FUQJMEULUgzy1KyyPVQ4JMiiP4Bvg6EwUQQfMmwhwRDshwaKUjDVCgoSdDNHkzTJZ6+Z37Purve8+PeTb2TM/ggu+ew89l33x8H9BBCPG7GowXTJej3+wnDvEm0JuLC04+EYWftVAUv+fiCvDUdQR1BHUEdQR3BTIygvixoQS14XgTtthLVdpNWwXRLqvQ724LplFRtyrYF0yVpFLQrKRVMh6RZ0I6kkmCqklaCqpKZH0FX56Crq9jVfdDVk0RfFrSgFsxkQVmLcdKCVrKySCrryhPEyYShhzOcrFtG0EoilfHHk1CRU5rF6ZjNZhlVOW6RnMSVyyilKies4pO41diVy8wIujoHXV3FGdMHXTtJKLFYTLhZtq4vC1rwXApCZTIqgR6g1PBMCO9DL3bMMSqBHqDU8EyISDAHiGKvWwcCQG2KgjlAFCDAOhAAap0K5gKLphk8mqJgLrCIgoxRJ4J5wKpJ7gAoMkn5EBXBPGDVJHcAFJmkfIhQcAql1oBpTvTol9gG9pm4RHAKpdaAaU706JfYBvaZuJVgPQrt4sFlnOh5MC/p3lmJYD0K7eLBZZzoeTAv6d5ZnuAYHjpgEOnk5F0ufhG6v1ggOIaHDhhEOjl5l4tfhO4vthLcwAMrFNvLJO5vEwhu4IEViu1lEve3WQmyoihQFBzG/V0CQVYUBYqCw7i/SxTBcpsRbFeIYLnNCLZbCY5b5KAnxRwct8hBj9McZFVMW0ihRNBuFdMWUigRlFaxuQ9WWYjRMTiIe5z0wSoLMToGB3GPsA9aTZIJoB+nRgBnM1tzOkkmgH6cGgGczWzNpzqLx3n/aULJJgezeNw07oxQySbVywKjBOgFRnDs+VEsx8FlgVEC9AIjOPb8KJYjvSzoG7UW1IJaUAtqQS14toLNM5fN5APdwBJA8G83Pk/aK/rgzVvXzeQD3cASQPBvNz5P2ssTzAaGUIrHEO6zI5gNDKEUjyHcxxWkh4Ylcowwk1QQpIeGJXKMMJO0EgwqyjGCioJBJvDrxRMSuVOTJEXfbz1/bHwWtBL0yoQehK6RucgE+bGzanzulQh6E3IgQV+xpc8kcrfuSO7eTfJ3ZYmQw0Oy9azVKOk1C/bJ5D5F38YPeLfx0rjWJxHsS0SqsSYuxySjj5qO5Oj7xQWy2VBtFOwzCy6ryH3YfE3uh64Y1xckgstJPydEjkkeHv07Iy4Xaao15+KCWTBx6M/db+T9xivSErqaJDdzXI6yLRE8Vgg0coex/SPJvT0SbWu0KpZtbgSpCH3NRt7I5OxHkObc6heU+/M/J5vrpBFM5GBLqCQux14COXs5CNXK5OjPGm1tSMrJSOMNYQ4mVTGV/L6zTL7+DovkbFUxbSW0Wo05l8hJWsU+cRWfSh+Mt5Lb1ck/J1TvVsdDaR/MiEni+llsdZuZp62EViu+96bpNjNPWwmtVnzvFd5m9IVVC54x/wA7gNvqFG9vXQAAAABJRU5ErkJggg==") no-repeat 0 0;
+  cursor: pointer;
+}
+.chunk-file-uploader-file-actions > span:hover {
+  background-position-x: -21px;
+}
+.chunk-file-uploader-file-actions .chunk-file-uploader-file-pause {
+  background-position-y: 0;
+}
+.chunk-file-uploader-file-actions .chunk-file-uploader-file-resume {
+  background-position-y: -17px;
+}
+.chunk-file-uploader-file-actions .chunk-file-uploader-file-retry {
+  background-position-y: -53px;
+}
+.chunk-file-uploader-file-actions .chunk-file-uploader-file-remove {
+  display: block;
+  background-position-y: -34px;
+}