zartui 0.1.113 → 3.0.1

package/es/uploader/index.js

@@ -1,559 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-// Utils
-import { createNamespace, addUnit, noop, isPromise, isDef } from '../utils';
-import { toArray, readFile as _readFile, isOversize, isImageFile } from './utils'; // Mixins
-
-import { FieldMixin } from '../mixins/field'; // Components
-
-import Icon from '../icon';
-import Image from '../image';
-import Loading from '../loading';
-import ImagePreview from '../image-preview';
-
-var _createNamespace = createNamespace('uploader'),
-    createComponent = _createNamespace[0],
-    bem = _createNamespace[1];
-
-import { ImageProcessor, ResizeOptions, WatermarkOptions, WatermarkContext, CompressOptions, checkWatermarkConfigSupported } from '@egova/media';
-import { formatDate, FORMAT } from '../utils/format/date-util';
-export default createComponent({
-  inheritAttrs: false,
-  mixins: [FieldMixin],
-  model: {
-    prop: 'fileList'
-  },
-  props: {
-    disabled: Boolean,
-    readonly: Boolean,
-    lazyLoad: Boolean,
-    uploadText: String,
-    afterRead: Function,
-    beforeRead: Function,
-    beforeDelete: Function,
-    previewSize: [Number, String],
-    previewOptions: Object,
-    name: {
-      type: [Number, String],
-      default: ''
-    },
-    accept: {
-      type: String,
-      default: 'image/*'
-    },
-    fileList: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    },
-    maxSize: {
-      type: [Number, String, Function],
-      default: Number.MAX_VALUE
-    },
-    maxCount: {
-      type: [Number, String],
-      default: Number.MAX_VALUE
-    },
-    deletable: {
-      type: Boolean,
-      default: true
-    },
-    showUpload: {
-      type: Boolean,
-      default: true
-    },
-    previewImage: {
-      type: Boolean,
-      default: true
-    },
-    previewFullImage: {
-      type: Boolean,
-      default: true
-    },
-    imageFit: {
-      type: String,
-      default: 'cover'
-    },
-    resultType: {
-      type: String,
-      default: 'dataUrl'
-    },
-    uploadIcon: {
-      type: String,
-      default: 'photograph'
-    },
-
-    /**
-     * {
-     *  maxImageSideLength,
-     *  address,
-     *  humanName,
-     *  projectName,
-     *  watermarkConfigString
-     * (http://faq.egova.com.cn:7777/redmine/projects/redmine/wiki/%E6%8B%8D%E7%85%A7%E6%B0%B4%E5%8D%B0%E9%85%8D%E7%BD%AE)
-     * }
-     */
-    watermarkOptions: {
-      type: Object,
-      default: function _default() {
-        return null;
-      }
-    }
-  },
-  computed: {
-    previewSizeWithUnit: function previewSizeWithUnit() {
-      return addUnit(this.previewSize);
-    },
-    // for form
-    value: function value() {
-      return this.fileList;
-    }
-  },
-  methods: {
-    getDetail: function getDetail(index) {
-      if (index === void 0) {
-        index = this.fileList.length;
-      }
-
-      return {
-        name: this.name,
-        index: index
-      };
-    },
-    getNewFileName: function getNewFileName(file) {
-      var index = file.name.lastIndexOf(".");
-      var suffix = file.name.substr(index + 1);
-      return formatDate(new Date(), FORMAT.FORMAT_YMDHMSMS).replace(/[^\w]/ig, '') + Math.ceil(Math.random() * 10000) + '.' + suffix;
-    },
-    addWatermark: function addWatermark(files) {
-      var _this = this;
-
-      // files = Array.from(files)
-      var arr = [];
-
-      for (var i = 0; i < files.length; i++) {
-        arr.push(files[i]);
-      }
-
-      files = arr;
-      return new Promise(function (resolve) {
-        if (!_this.watermarkOptions || _this.watermarkOptions && !checkWatermarkConfigSupported(_this.watermarkOptions.watermarkConfigString)) {
-          resolve(files);
-        }
-
-        var processImagePromises = [];
-        files.forEach(function (file, index) {
-          if (file.type.indexOf('image') === 0) {
-            var resizeOptions = new ResizeOptions(_this.watermarkOptions.maxImageSideLength || 640);
-            var compressOptions = new CompressOptions(_this.maxSize);
-            var watermarkContext = new WatermarkContext({
-              address: _this.watermarkOptions.address || "",
-              watermarkTime: new Date(),
-              humanName: _this.watermarkOptions.humanName || "",
-              projectName: _this.watermarkOptions.projectName || ""
-            });
-            var watermarkOptions = new WatermarkOptions({
-              enabled: true,
-              watermarkConfigString: _this.watermarkOptions.watermarkConfigString,
-              context: watermarkContext
-            });
-            var processor = new ImageProcessor(file, resizeOptions, watermarkOptions, compressOptions);
-            var proc = processor.process().then(function (file) {
-              var uniqueFileName = _this.getNewFileName(file);
-
-              var newFile = new File([file], uniqueFileName, {
-                lastModified: file.lastModified,
-                type: file.type
-              });
-              newFile.index = index;
-              return Promise.resolve(newFile);
-            });
-            processImagePromises.push(proc);
-          }
-        });
-
-        if (!processImagePromises || processImagePromises && processImagePromises.length === 0) {
-          resolve(files);
-        }
-
-        return Promise.all(processImagePromises).then(function (watermarkFiles) {
-          files.forEach(function (file, i) {
-            watermarkFiles.forEach(function (f) {
-              if (f.index === i) {
-                files[i] = f;
-              }
-            });
-          });
-          resolve(files);
-        }).catch(function (err) {
-          console.log("添加水印失败：" + err);
-          resolve(files);
-        });
-      });
-    },
-    onChange: function onChange(event) {
-      var _this2 = this;
-
-      var files = event.target.files;
-
-      if (this.disabled || !files.length) {
-        return;
-      }
-
-      this.addWatermark(files).then(function (files) {
-        files = files.length === 1 ? files[0] : [].slice.call(files);
-
-        if (_this2.beforeRead) {
-          var response = _this2.beforeRead(files, _this2.getDetail());
-
-          if (!response) {
-            _this2.resetInput();
-
-            return;
-          }
-
-          if (isPromise(response)) {
-            response.then(function (data) {
-              if (data) {
-                _this2.readFile(data);
-              } else {
-                _this2.readFile(files);
-              }
-            }).catch(_this2.resetInput);
-            return;
-          }
-        }
-
-        _this2.readFile(files);
-      });
-    },
-    readFile: function readFile(files) {
-      var _this3 = this;
-
-      var oversize = isOversize(files, this.maxSize);
-
-      if (Array.isArray(files)) {
-        var maxCount = this.maxCount - this.fileList.length;
-
-        if (files.length > maxCount) {
-          files = files.slice(0, maxCount);
-        }
-
-        Promise.all(files.map(function (file) {
-          return _readFile(file, _this3.resultType);
-        })).then(function (contents) {
-          var fileList = files.map(function (file, index) {
-            var result = {
-              file: file,
-              status: '',
-              message: ''
-            };
-
-            if (contents[index]) {
-              result.content = contents[index];
-            }
-
-            return result;
-          });
-
-          _this3.onAfterRead(fileList, oversize);
-        });
-      } else {
-        _readFile(files, this.resultType).then(function (content) {
-          var result = {
-            file: files,
-            status: '',
-            message: ''
-          };
-
-          if (content) {
-            result.content = content;
-          }
-
-          _this3.onAfterRead(result, oversize);
-        });
-      }
-    },
-    onAfterRead: function onAfterRead(files, oversize) {
-      var _this4 = this;
-
-      this.resetInput();
-      var validFiles = files;
-
-      if (oversize) {
-        var oversizeFiles = files;
-
-        if (Array.isArray(files)) {
-          oversizeFiles = [];
-          validFiles = [];
-          files.forEach(function (item) {
-            if (item.file) {
-              if (isOversize(item.file, _this4.maxSize)) {
-                oversizeFiles.push(item);
-              } else {
-                validFiles.push(item);
-              }
-            }
-          });
-        } else {
-          validFiles = null;
-        }
-
-        this.$emit('oversize', oversizeFiles, this.getDetail());
-      }
-
-      var isValidFiles = Array.isArray(validFiles) ? Boolean(validFiles.length) : Boolean(validFiles);
-
-      if (isValidFiles) {
-        this.$emit('input', [].concat(this.fileList, toArray(validFiles)));
-
-        if (this.afterRead) {
-          this.afterRead(validFiles, this.getDetail());
-        }
-      }
-    },
-    onDelete: function onDelete(file, index) {
-      var _file$beforeDelete,
-          _this5 = this;
-
-      var beforeDelete = (_file$beforeDelete = file.beforeDelete) != null ? _file$beforeDelete : this.beforeDelete;
-
-      if (beforeDelete) {
-        var response = beforeDelete(file, this.getDetail(index));
-
-        if (!response) {
-          return;
-        }
-
-        if (isPromise(response)) {
-          response.then(function () {
-            _this5.deleteFile(file, index);
-          }).catch(noop);
-          return;
-        }
-      }
-
-      this.deleteFile(file, index);
-    },
-    deleteFile: function deleteFile(file, index) {
-      var fileList = this.fileList.slice(0);
-      fileList.splice(index, 1);
-      this.$emit('input', fileList);
-      this.$emit('delete', file, this.getDetail(index));
-    },
-    resetInput: function resetInput() {
-      /* istanbul ignore else */
-      if (this.$refs.input) {
-        this.$refs.input.value = '';
-      }
-    },
-    onClickUpload: function onClickUpload(event) {
-      this.$emit('click-upload', event);
-    },
-    onPreviewImage: function onPreviewImage(item) {
-      var _this6 = this;
-
-      if (!this.previewFullImage) {
-        return;
-      }
-
-      var imageFiles = this.fileList.filter(function (item) {
-        return isImageFile(item);
-      });
-      var imageContents = imageFiles.map(function (item) {
-        return {
-          url: item.content || item.url
-        };
-      });
-      this.imagePreview = ImagePreview(_extends({
-        images: imageContents,
-        startPosition: imageFiles.indexOf(item),
-        onClose: function onClose() {
-          _this6.$emit('close-preview');
-        }
-      }, this.previewOptions));
-    },
-    // @exposed-api
-    closeImagePreview: function closeImagePreview() {
-      if (this.imagePreview) {
-        this.imagePreview.close();
-      }
-    },
-    // @exposed-api
-    chooseFile: function chooseFile() {
-      if (this.disabled) {
-        return;
-      }
-      /* istanbul ignore else */
-
-
-      if (this.$refs.input) {
-        this.$refs.input.click();
-      }
-    },
-    genPreviewMask: function genPreviewMask(item) {
-      var h = this.$createElement;
-      var status = item.status,
-          message = item.message;
-
-      if (status === 'uploading' || status === 'failed') {
-        var MaskIcon = status === 'failed' ? h(Icon, {
-          "attrs": {
-            "name": "close"
-          },
-          "class": bem('mask-icon')
-        }) : h(Loading, {
-          "class": bem('loading')
-        });
-        var showMessage = isDef(message) && message !== '';
-        return h("div", {
-          "class": bem('mask')
-        }, [MaskIcon, showMessage && h("div", {
-          "class": bem('mask-message')
-        }, [message])]);
-      }
-    },
-    genPreviewItem: function genPreviewItem(item, index) {
-      var _item$deletable,
-          _this7 = this,
-          _item$previewSize,
-          _item$imageFit;
-
-      var h = this.$createElement;
-      var deleteAble = (_item$deletable = item.deletable) != null ? _item$deletable : this.deletable;
-      var showDelete = item.status !== 'uploading' && deleteAble;
-      var DeleteIcon = showDelete && h("div", {
-        "class": bem('preview-delete'),
-        "on": {
-          "click": function click(event) {
-            event.stopPropagation();
-
-            _this7.onDelete(item, index);
-          }
-        }
-      }, [h(Icon, {
-        "attrs": {
-          "name": "cross"
-        },
-        "class": bem('preview-delete-icon')
-      })]);
-      var PreviewCoverContent = this.slots('preview-cover', _extends({
-        index: index
-      }, item));
-      var PreviewCover = PreviewCoverContent && h("div", {
-        "class": bem('preview-cover')
-      }, [PreviewCoverContent]);
-      var previewSize = (_item$previewSize = item.previewSize) != null ? _item$previewSize : this.previewSize;
-      var imageFit = (_item$imageFit = item.imageFit) != null ? _item$imageFit : this.imageFit;
-      var Preview = isImageFile(item) ? h(Image, {
-        "attrs": {
-          "fit": imageFit,
-          "src": item.content || item.url,
-          "width": previewSize,
-          "height": previewSize,
-          "lazyLoad": this.lazyLoad
-        },
-        "class": bem('preview-image'),
-        "on": {
-          "click": function click() {
-            _this7.onPreviewImage(item);
-          }
-        }
-      }, [PreviewCover]) : h("div", {
-        "class": bem('file'),
-        "style": {
-          width: this.previewSizeWithUnit,
-          height: this.previewSizeWithUnit
-        }
-      }, [h(Icon, {
-        "class": bem('file-icon'),
-        "attrs": {
-          "name": "description"
-        }
-      }), h("div", {
-        "class": [bem('file-name'), 'zt-ellipsis']
-      }, [item.file ? item.file.name : item.url]), PreviewCover]);
-      return h("div", {
-        "class": bem('preview'),
-        "on": {
-          "click": function click() {
-            _this7.$emit('click-preview', item, _this7.getDetail(index));
-          }
-        }
-      }, [Preview, this.genPreviewMask(item), DeleteIcon]);
-    },
-    genPreviewList: function genPreviewList() {
-      if (this.previewImage) {
-        return this.fileList.map(this.genPreviewItem);
-      }
-    },
-    genUpload: function genUpload() {
-      var h = this.$createElement;
-
-      if (this.fileList.length >= this.maxCount || !this.showUpload) {
-        return;
-      }
-
-      var slot = this.slots();
-      var Input = this.readonly ? null : h("input", {
-        "attrs": _extends({}, this.$attrs, {
-          "type": "file",
-          "accept": this.accept,
-          "disabled": this.disabled
-        }),
-        "ref": "input",
-        "class": bem('input'),
-        "on": {
-          "change": this.onChange
-        }
-      });
-
-      if (slot) {
-        return h("div", {
-          "class": bem('input-wrapper'),
-          "key": "input-wrapper",
-          "on": {
-            "click": this.onClickUpload
-          }
-        }, [slot, Input]);
-      }
-
-      var style;
-
-      if (this.previewSize) {
-        var size = this.previewSizeWithUnit;
-        style = {
-          width: size,
-          height: size
-        };
-      }
-
-      return h("div", {
-        "class": bem('upload', {
-          readonly: this.readonly
-        }),
-        "style": style,
-        "on": {
-          "click": this.onClickUpload
-        }
-      }, [h(Icon, {
-        "attrs": {
-          "name": this.uploadIcon
-        },
-        "class": bem('upload-icon')
-      }), this.uploadText && h("span", {
-        "class": bem('upload-text')
-      }, [this.uploadText]), Input]);
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    return h("div", {
-      "class": bem()
-    }, [h("div", {
-      "class": bem('wrapper', {
-        disabled: this.disabled
-      })
-    }, [this.genPreviewList(), this.genUpload()])]);
-  }
-});

package/es/uploader/index.less

@@ -1,163 +0,0 @@
-@import '../style/var';
-
-.zt-uploader {
-  position: relative;
-  display: inline-block;
-
-  &__wrapper {
-    display: flex;
-    flex-wrap: wrap;
-
-    &--disabled {
-      opacity: @uploader-disabled-opacity;
-    }
-  }
-
-  &__input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden; // to clip file-upload-button
-    cursor: pointer;
-    opacity: 0;
-
-    &-wrapper {
-      position: relative;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  &__upload {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: @uploader-size;
-    height: @uploader-size;
-    margin: 0 @padding-xs @padding-xs 0;
-    background-color: @uploader-upload-background-color;
-
-    &:active {
-      background-color: @uploader-upload-active-color;
-    }
-
-    &--readonly:active {
-      background-color: @uploader-upload-background-color;
-    }
-
-    &-icon {
-      color: @uploader-icon-color;
-      font-size: @uploader-icon-size;
-    }
-
-    &-text {
-      margin-top: @padding-xs;
-      color: @uploader-text-color;
-      font-size: @uploader-text-font-size;
-    }
-  }
-
-  &__preview {
-    position: relative;
-    margin: 0 @padding-xs @padding-xs 0;
-    cursor: pointer;
-
-    &-image {
-      display: block;
-      width: @uploader-size;
-      height: @uploader-size;
-      overflow: hidden;
-    }
-
-    &-delete {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: @uploader-delete-icon-size;
-      height: @uploader-delete-icon-size;
-      background-color: @uploader-delete-background-color;
-      border-radius: 0 0 0 12px;
-
-      &-icon {
-        position: absolute;
-        top: -2px;
-        right: -2px;
-        color: #fff;
-        color: @uploader-delete-color;
-        font-size: 16px;
-        transform: scale(0.5);
-      }
-    }
-
-    &-cover {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  &__mask {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: @white;
-    background-color: @uploader-mask-background-color;
-
-    &-icon {
-      font-size: @uploader-mask-icon-size;
-    }
-
-    &-message {
-      margin-top: 6px;
-      padding: 0 @padding-base;
-      font-size: @uploader-mask-message-font-size;
-      line-height: @uploader-mask-message-line-height;
-    }
-  }
-
-  &__loading {
-    width: @uploader-loading-icon-size;
-    height: @uploader-loading-icon-size;
-    color: @uploader-loading-icon-color;
-  }
-
-  &__file {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: @uploader-size;
-    height: @uploader-size;
-    background-color: @uploader-file-background-color;
-
-    &-icon {
-      color: @uploader-file-icon-color;
-      font-size: @uploader-file-icon-size;
-    }
-
-    &-name {
-      box-sizing: border-box;
-      width: 100%;
-      margin-top: @uploader-file-name-margin-top;
-      padding: @uploader-file-name-padding;
-      color: @uploader-file-name-text-color;
-      font-size: @uploader-file-name-font-size;
-      text-align: center;
-    }
-  }
-}