@web-utils/component 2.7.36 → 2.8.0

package/dist/components/image-cropper/index.js

@@ -1,217 +0,0 @@
-import { z as dataURLtoFile } from "../../chunks/util.b0d0b0ad.js";
-import { VueCropper } from "vue-cropper";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("ElementDialog", {
-    staticClass: "avue-cropper",
-    attrs: {
-      "visible": _vm.visible,
-      "before-close": _vm.cancel,
-      "title": "图片剪裁",
-      "close-on-press-escape": false,
-      "close-on-click-modal": false,
-      "modal-append-to-body": _vm.$AVUE.modalAppendToBody,
-      "append-to-body": _vm.$AVUE.appendToBody,
-      "width": "1000px"
-    },
-    on: {
-      "update:visible": function($event) {
-        _vm.visible = $event;
-      }
-    },
-    scopedSlots: _vm._u([{
-      key: "footer",
-      fn: function() {
-        return [_c("ElButton", {
-          attrs: {
-            "size": "small",
-            "type": "primary"
-          },
-          on: {
-            "click": _vm.submit
-          }
-        }, [_vm._v(" 确 定 ")]), _c("ElButton", {
-          attrs: {
-            "size": "small"
-          },
-          on: {
-            "click": function($event) {
-              return _vm.cancel();
-            }
-          }
-        }, [_vm._v(" 取 消 ")])];
-      },
-      proxy: true
-    }])
-  }, [_c("div", {
-    staticClass: "cropper-content"
-  }, [_c("div", {
-    staticClass: "cropper-box"
-  }, [_c("div", {
-    staticClass: "cropper"
-  }, [_c("VueCropper", {
-    ref: "cropper",
-    attrs: {
-      "img": _vm.option.img,
-      "output-size": _vm.option.outputSize,
-      "output-type": _vm.option.outputType,
-      "info": _vm.option.info,
-      "can-scale": _vm.option.canScale,
-      "auto-crop": _vm.option.autoCrop,
-      "auto-crop-width": _vm.option.autoCropWidth,
-      "auto-crop-height": _vm.option.autoCropHeight,
-      "fixed": _vm.option.fixed,
-      "fixed-number": _vm.option.fixedNumber,
-      "full": _vm.option.full,
-      "fixed-box": _vm.option.fixedBox,
-      "can-move": _vm.option.canMove,
-      "can-move-box": _vm.option.canMoveBox,
-      "original": _vm.option.original,
-      "center-box": _vm.option.centerBox,
-      "height": _vm.option.height,
-      "info-true": _vm.option.infoTrue,
-      "max-img-size": _vm.option.maxImgSize,
-      "enlarge": _vm.option.enlarge,
-      "mode": _vm.option.mode
-    },
-    on: {
-      "realTime": _vm.realTime
-    }
-  })], 1), _c("div", {
-    staticClass: "footer-btn"
-  }, [_c("ElButton", {
-    attrs: {
-      "size": "mini",
-      "type": "danger",
-      "icon": "el-icon-zoom-in"
-    },
-    on: {
-      "click": function($event) {
-        return _vm.changeScale(1);
-      }
-    }
-  }), _c("ElButton", {
-    attrs: {
-      "size": "mini",
-      "type": "danger",
-      "icon": "el-icon-zoom-out"
-    },
-    on: {
-      "click": function($event) {
-        return _vm.changeScale(-1);
-      }
-    }
-  }), _c("ElButton", {
-    attrs: {
-      "size": "mini",
-      "icon": "el-icon-back",
-      "type": "danger"
-    },
-    on: {
-      "click": _vm.rotateLeft
-    }
-  }), _c("ElButton", {
-    attrs: {
-      "size": "mini",
-      "type": "danger",
-      "icon": "el-icon-right"
-    },
-    on: {
-      "click": _vm.rotateRight
-    }
-  })], 1)]), _c("div", {
-    staticClass: "show-preview"
-  }, [_c("div", {
-    staticClass: "preview",
-    style: _vm.previews.div
-  }, [_c("img", {
-    style: _vm.previews.img,
-    attrs: {
-      "src": _vm.previews.url,
-      "alt": ""
-    }
-  })])])])]);
-};
-var staticRenderFns = [];
-const ImageCropper_vue_vue_type_style_index_0_lang = "";
-const __vue2_script = {
-  name: "ImageCropper",
-  // imageCropper,
-  components: {
-    VueCropper
-  },
-  data() {
-    return {
-      visible: false,
-      previews: {},
-      option: {}
-    };
-  },
-  methods: {
-    show() {
-      this.visible = true;
-    },
-    // 图片缩放
-    changeScale(num) {
-      num = num || 1;
-      this.$refs.cropper.changeScale(num);
-    },
-    // 向左旋转
-    rotateLeft() {
-      this.$refs.cropper.rotateLeft();
-    },
-    // 向右旋转
-    rotateRight() {
-      this.$refs.cropper.rotateRight();
-    },
-    // 实时预览函数
-    realTime(data) {
-      this.previews = data;
-    },
-    submit() {
-      this.visible = false;
-      this.$refs.cropper.getCropData((data) => {
-        let result = data;
-        if (this.option.type === "file") {
-          result = dataURLtoFile(data, `${new Date().getTime()}.${this.option.outputType}`);
-        }
-        this.option.callback && this.option.callback(result);
-      });
-    },
-    cancel(done) {
-      done && done();
-      this.visible = false;
-      this.option.cancel && this.option.cancel();
-      if (typeof this.option.beforeClose === "function") {
-        this.option.beforeClose();
-      }
-      this.$destroy();
-      this.$el.remove();
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const ImageCropper = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  ImageCropper as default
-};

package/dist/components/image-cropper/style.css

@@ -1,34 +0,0 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.avue-cropper .cropper-content {
-  display: flex;
-  justify-content: flex-end;
-}
-.avue-cropper .cropper-content .cropper-box {
-  flex: 1;
-  width: 100%;
-}
-.avue-cropper .cropper-content .cropper-box .cropper {
-  width: auto;
-  height: 300px;
-}
-.avue-cropper .cropper-content .show-preview {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-.avue-cropper .cropper-content .show-preview .preview {
-  overflow: hidden;
-  border: 1px solid #67c23a;
-  background: #cccccc;
-}
-.avue-cropper .cropper-content .footer-btn {
-  margin-top: 30px;
-  display: flex;
-  justify-content: center;
-  padding-right: 10px;
-}

package/dist/components/image-preview/index.js

@@ -1,264 +0,0 @@
-import { i as isMediaType } from "../../chunks/util.b0d0b0ad.js";
-import { setPx } from "@web-utils/core";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.isShow ? _c("div", {
-    staticClass: "avue-image-preview"
-  }, [_vm.ops.modal ? _c("div", {
-    staticClass: "avue-image-preview__mask",
-    on: {
-      "click": _vm.close
-    }
-  }) : _vm._e(), _c("span", {
-    staticClass: "el-image-viewer__btn el-image-viewer__close",
-    on: {
-      "click": _vm.close
-    }
-  }, [_c("i", {
-    staticClass: "el-icon-circle-close"
-  })]), _vm.isRrrow ? _c("span", {
-    staticClass: "el-image-viewer__btn el-image-viewer__prev",
-    on: {
-      "click": function($event) {
-        return _vm.handlePrev();
-      }
-    }
-  }, [_c("i", {
-    staticClass: "el-icon-arrow-left"
-  })]) : _vm._e(), _vm.isRrrow ? _c("span", {
-    staticClass: "el-image-viewer__btn el-image-viewer__next",
-    on: {
-      "click": function($event) {
-        return _vm.handleNext();
-      }
-    }
-  }, [_c("i", {
-    staticClass: "el-icon-arrow-right"
-  })]) : _vm._e(), _c("div", {
-    ref: "box",
-    staticClass: "avue-image-preview__box"
-  }, [_c("ElCarousel", {
-    ref: "carousel",
-    attrs: {
-      "show-indicators": false,
-      "initial-index": _vm.index,
-      "initial-swipe": _vm.index,
-      "interval": 0,
-      "arrow": "never",
-      "indicator-position": "none"
-    },
-    on: {
-      "change": _vm.handleChange
-    }
-  }, _vm._l(_vm.datas, function(item, indexs) {
-    return _c("ElCarouselItem", {
-      key: indexs,
-      nativeOn: {
-        "click": function($event) {
-          if ($event.target !== $event.currentTarget)
-            return null;
-          _vm.ops.closeOnClickModal ? _vm.close() : "";
-        }
-      }
-    }, [_vm.isMediaType(item) ? _c(_vm.isMediaType(item), {
-      ref: "item",
-      refInFor: true,
-      tag: "Component",
-      style: [_vm.styleName, _vm.styleBoxName],
-      attrs: {
-        "id": `avue-image-preview__${indexs}`,
-        "src": item.url,
-        "controls": "controls",
-        "ondragstart": "return false"
-      },
-      on: {
-        "click": function($event) {
-          return _vm.handleClick(item, indexs);
-        },
-        "mousedown": _vm.move
-      }
-    }) : _c("div", {
-      staticClass: "avue-image-preview__file",
-      attrs: {
-        "id": `avue-image-preview__${indexs}`
-      },
-      on: {
-        "click": function($event) {
-          return _vm.handleClick(item, indexs, true);
-        }
-      }
-    }, [_c("span", [_c("i", {
-      staticClass: "el-icon-document"
-    }), _c("p", [_vm._v(_vm._s(item.name || _vm.getName(item.url)))])])])], 1);
-  }), 1)], 1), _c("div", {
-    staticClass: "el-image-viewer__btn el-image-viewer__actions"
-  }, [_c("div", {
-    staticClass: "el-image-viewer__actions__inner"
-  }, [_c("i", {
-    staticClass: "el-icon-zoom-out",
-    on: {
-      "click": _vm.subScale
-    }
-  }), _c("i", {
-    staticClass: "el-icon-zoom-in",
-    on: {
-      "click": _vm.addScale
-    }
-  }), _c("i", {
-    staticClass: "el-image-viewer__actions__divider"
-  }), _c("i", {
-    staticClass: "el-icon-printer",
-    on: {
-      "click": _vm.handlePrint
-    }
-  }), _c("i", {
-    staticClass: "el-image-viewer__actions__divider"
-  }), _c("i", {
-    staticClass: "el-icon-refresh-left",
-    on: {
-      "click": function($event) {
-        _vm.rotate = _vm.rotate - 90;
-      }
-    }
-  }), _c("i", {
-    staticClass: "el-icon-refresh-right",
-    on: {
-      "click": function($event) {
-        _vm.rotate = _vm.rotate + 90;
-      }
-    }
-  })])])]) : _vm._e();
-};
-var staticRenderFns = [];
-const ImagePreview_vue_vue_type_style_index_0_lang = "";
-const __vue2_script = {
-  name: "ImagePreview",
-  // imagePreview,
-  data() {
-    return {
-      left: 0,
-      top: 0,
-      scale: 1,
-      datas: [],
-      rotate: 0,
-      isShow: false,
-      index: 0,
-      ops: {}
-    };
-  },
-  computed: {
-    styleBoxName() {
-      return {
-        marginLeft: setPx(this.left),
-        marginTop: setPx(this.top)
-      };
-    },
-    styleName() {
-      return {
-        transform: `scale(${this.scale}) rotate(${this.rotate}deg)`,
-        maxWidth: "100%",
-        maxHeight: "100%"
-      };
-    },
-    isRrrow() {
-      return this.datas.length > 1;
-    }
-  },
-  methods: {
-    getName(url) {
-      return url.substring(url.lastIndexOf("/") + 1);
-    },
-    handlePrint() {
-      this.$Print(`#avue-image-preview__${this.index}`);
-    },
-    handlePrev() {
-      this.$refs.carousel.prev();
-      this.index = this.$refs.carousel.activeIndex;
-      this.stopItem();
-    },
-    handleNext() {
-      this.$refs.carousel.next();
-      this.index = this.$refs.carousel.activeIndex;
-      this.stopItem();
-    },
-    stopItem() {
-      this.left = 0;
-      this.top = 0;
-      this.$refs.item.forEach((ele) => {
-        ele.pause && ele.pause();
-      });
-    },
-    isMediaType(item) {
-      return isMediaType(item.url, item.type);
-    },
-    subScale() {
-      if (this.scale !== 0.2) {
-        this.scale = parseFloat((this.scale - 0.2).toFixed(2));
-      }
-    },
-    addScale() {
-      this.scale = parseFloat((this.scale + 0.2).toFixed(2));
-    },
-    handleChange() {
-      this.scale = 1;
-      this.rotate = 0;
-    },
-    move(e) {
-      let disX = e.clientX;
-      let disY = e.clientY;
-      const scale = 2;
-      document.onmousemove = (e2) => {
-        const left = e2.clientX - disX;
-        const top = e2.clientY - disY;
-        disX = e2.clientX;
-        disY = e2.clientY;
-        this.left = this.left + left * scale;
-        this.top = this.top + top * scale;
-      };
-      document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-      };
-    },
-    handleClick(item, index, df = false) {
-      if (typeof this.ops.click === "function") {
-        this.ops.click(item, index);
-      } else if (df) {
-        window.open(item.url);
-      }
-    },
-    close() {
-      this.isShow = false;
-      if (typeof this.ops.beforeClose === "function") {
-        this.ops.beforeClose(this.datas, this.index);
-      }
-      this.$destroy();
-      this.$el.remove();
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const ImagePreview = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  ImagePreview as default
-};

package/dist/components/image-preview/style.css

@@ -1,72 +0,0 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.avue-img--center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.avue-img--fullscreen .el-dialog__body {
-  height: 100%;
-}
-.avue-image-preview {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: all 0.5s;
-  z-index: 9998;
-}
-.avue-image-preview .el-image-viewer__close i {
-  color: #fff;
-}
-.avue-image-preview .el-image-viewer__btn {
-  z-index: 1024;
-}
-.avue-image-preview img {
-  transition: all 0.5s;
-  cursor: pointer;
-}
-.avue-image-preview__file {
-  text-align: center;
-}
-.avue-image-preview__file a {
-  color: #fff;
-}
-.avue-image-preview__file i {
-  cursor: pointer;
-  font-size: 80px;
-}
-.avue-image-preview__mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-}
-.avue-image-preview__box {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.avue-image-preview__box .el-carousel {
-  width: 90%;
-  height: 100%;
-}
-.avue-image-preview__box .el-carousel__container {
-  height: 100%;
-}
-.avue-image-preview__box .el-carousel__item {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

package/dist/components/image-viewer/index.js

@@ -1,113 +0,0 @@
-import Viewer from "viewerjs";
-import "viewerjs/dist/viewer.css";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: !_vm.lazy,
-      expression: "!lazy"
-    }],
-    ref: "wrapper",
-    staticClass: "image-viewer"
-  }, [_vm._t("default", function() {
-    return _vm._l(_vm.images, function(item) {
-      return _c("img", {
-        key: item.src,
-        staticClass: "image-item",
-        style: {
-          backgroundImage: `url('${item.src}')`
-        },
-        attrs: {
-          "data-src": item.src,
-          "alt": item.alt
-        }
-      });
-    });
-  })], 2);
-};
-var staticRenderFns = [];
-const ImageViewer_vue_vue_type_style_index_0_lang = "";
-const __vue2_script = {
-  name: "ImageViewer",
-  props: {
-    images: Array,
-    url: {
-      type: String,
-      default: "data-src"
-    },
-    lazy: Boolean
-  },
-  mounted() {
-    if (!this.lazy) {
-      this.init({
-        container: this.$refs.wrapper,
-        options: {
-          navbar: false,
-          backdrop: "static",
-          url: this.url
-        }
-      });
-    }
-  },
-  updated() {
-    var _a;
-    if (!this.lazy) {
-      (_a = this.gallery) == null ? void 0 : _a.update();
-    }
-  },
-  beforeDestroy() {
-    if (!this.lazy) {
-      this.gallery.destroy();
-    }
-  },
-  methods: {
-    init({ container, options }) {
-      this.gallery = new Viewer(container, options);
-    },
-    show({ container, options, index } = {}) {
-      container = container || this.$refs.wrapper;
-      options = options || {
-        navbar: false,
-        backdrop: "static",
-        url: this.url,
-        loop: false,
-        initialViewIndex: index || 0,
-        hidden: () => {
-          this.gallery.destroy();
-          this.gallery = null;
-        }
-      };
-      if (!this.gallery) {
-        this.init({ container, options });
-        this.gallery.show();
-      }
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const ImageViewer = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  ImageViewer as default
-};

package/dist/components/image-viewer/style.css

@@ -1,21 +0,0 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.image-viewer .image-item {
-  display: inline-block;
-  width: 100px;
-  height: 100px;
-  cursor: pointer;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  border: none;
-  background-color: transparent;
-  outline: none;
-}
-.viewer-backdrop {
-  background-color: #5e5e5e;
-}