@web-utils/component 2.7.36 → 2.8.0

package/iframe-window/index.mjs

@@ -0,0 +1,61 @@
+import { n as l } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var s = function() {
+  var e = this, t = e.$createElement, r = e._self._c || t;
+  return r("ElementDialog", e._g(e._b({
+    attrs: {
+      "custom-class": "iframe-window",
+      embed: "",
+      height: "60vh",
+      title: e.title,
+      "show-full-screen": "",
+      visible: e.visible
+    },
+    scopedSlots: e._u([{
+      key: "default",
+      fn: function() {
+        return [r("iframe", {
+          staticClass: "iframe-window-iframe",
+          attrs: {
+            src: e.url,
+            frameborder: "0"
+          }
+        })];
+      },
+      proxy: !0
+    }])
+  }, "ElementDialog", e.$attrs, !1), e.$listeners));
+}, a = [];
+const i = {
+  name: "IframeWindow",
+  props: {
+    title: {
+      type: String,
+      default: "iframe窗口"
+    },
+    url: {
+      type: String,
+      default: "http://192.168.0.107:31221/wallboard"
+    },
+    visible: Boolean
+  }
+}, n = {};
+var o = /* @__PURE__ */ l(
+  i,
+  s,
+  a,
+  !1,
+  _,
+  null,
+  null,
+  null
+);
+function _(e) {
+  for (let t in n)
+    this[t] = n[t];
+}
+const f = /* @__PURE__ */ function() {
+  return o.exports;
+}();
+export {
+  f as default
+};

package/iframe-window/style.css

@@ -0,0 +1 @@
+.iframe-window.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__body{position:relative;padding:0}.iframe-window .iframe-window-iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

package/image-cropper/index.mjs

@@ -0,0 +1,249 @@
+var c = Object.defineProperty;
+var r = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var a = (e, o, t) => o in e ? c(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, s = (e, o) => {
+  for (var t in o || (o = {}))
+    l.call(o, t) && a(e, t, o[t]);
+  if (r)
+    for (var t of r(o))
+      u.call(o, t) && a(e, t, o[t]);
+  return e;
+};
+import { z as f } from "../chunks/util.17330567.mjs";
+import { VueCropper as m } from "vue-cropper";
+import d from "vue";
+import { n as h } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var v = function() {
+  var e = this, o = e.$createElement, t = e._self._c || o;
+  return t("ElementDialog", {
+    staticClass: "avue-cropper",
+    attrs: {
+      visible: e.visible,
+      "before-close": e.cancel,
+      title: "图片剪裁",
+      "close-on-press-escape": !1,
+      "close-on-click-modal": !1,
+      "modal-append-to-body": e.$AVUE.modalAppendToBody,
+      "append-to-body": e.$AVUE.appendToBody,
+      width: "1000px"
+    },
+    on: {
+      "update:visible": function(i) {
+        e.visible = i;
+      }
+    },
+    scopedSlots: e._u([{
+      key: "footer",
+      fn: function() {
+        return [t("ElButton", {
+          attrs: {
+            size: "small",
+            type: "primary"
+          },
+          on: {
+            click: e.submit
+          }
+        }, [e._v(" 确 定 ")]), t("ElButton", {
+          attrs: {
+            size: "small"
+          },
+          on: {
+            click: function(i) {
+              return e.cancel();
+            }
+          }
+        }, [e._v(" 取 消 ")])];
+      },
+      proxy: !0
+    }])
+  }, [t("div", {
+    staticClass: "cropper-content"
+  }, [t("div", {
+    staticClass: "cropper-box"
+  }, [t("div", {
+    staticClass: "cropper"
+  }, [t("VueCropper", {
+    ref: "cropper",
+    attrs: {
+      img: e.option.img,
+      "output-size": e.option.outputSize,
+      "output-type": e.option.outputType,
+      info: e.option.info,
+      "can-scale": e.option.canScale,
+      "auto-crop": e.option.autoCrop,
+      "auto-crop-width": e.option.autoCropWidth,
+      "auto-crop-height": e.option.autoCropHeight,
+      fixed: e.option.fixed,
+      "fixed-number": e.option.fixedNumber,
+      full: e.option.full,
+      "fixed-box": e.option.fixedBox,
+      "can-move": e.option.canMove,
+      "can-move-box": e.option.canMoveBox,
+      original: e.option.original,
+      "center-box": e.option.centerBox,
+      height: e.option.height,
+      "info-true": e.option.infoTrue,
+      "max-img-size": e.option.maxImgSize,
+      enlarge: e.option.enlarge,
+      mode: e.option.mode
+    },
+    on: {
+      realTime: e.realTime
+    }
+  })], 1), t("div", {
+    staticClass: "footer-btn"
+  }, [t("ElButton", {
+    attrs: {
+      size: "mini",
+      type: "danger",
+      icon: "el-icon-zoom-in"
+    },
+    on: {
+      click: function(i) {
+        return e.changeScale(1);
+      }
+    }
+  }), t("ElButton", {
+    attrs: {
+      size: "mini",
+      type: "danger",
+      icon: "el-icon-zoom-out"
+    },
+    on: {
+      click: function(i) {
+        return e.changeScale(-1);
+      }
+    }
+  }), t("ElButton", {
+    attrs: {
+      size: "mini",
+      icon: "el-icon-back",
+      type: "danger"
+    },
+    on: {
+      click: e.rotateLeft
+    }
+  }), t("ElButton", {
+    attrs: {
+      size: "mini",
+      type: "danger",
+      icon: "el-icon-right"
+    },
+    on: {
+      click: e.rotateRight
+    }
+  })], 1)]), t("div", {
+    staticClass: "show-preview"
+  }, [t("div", {
+    staticClass: "preview",
+    style: e.previews.div
+  }, [t("img", {
+    style: e.previews.img,
+    attrs: {
+      src: e.previews.url,
+      alt: ""
+    }
+  })])])])]);
+}, g = [];
+const n = {
+  name: "ImageCropper",
+  components: {
+    VueCropper: m
+  },
+  data() {
+    return {
+      visible: !1,
+      previews: {},
+      option: {}
+    };
+  },
+  methods: {
+    show() {
+      this.visible = !0;
+    },
+    // 图片缩放
+    changeScale(e) {
+      e = e || 1, this.$refs.cropper.changeScale(e);
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 实时预览函数
+    realTime(e) {
+      this.previews = e;
+    },
+    submit() {
+      this.visible = !1, this.$refs.cropper.getCropData((e) => {
+        let o = e;
+        this.option.type === "file" && (o = f(e, `${new Date().getTime()}.${this.option.outputType}`)), this.option.callback && this.option.callback(o);
+      });
+    },
+    cancel(e) {
+      e && e(), this.visible = !1, this.option.cancel && this.option.cancel(), typeof this.option.beforeClose == "function" && this.option.beforeClose(), this.$destroy(), this.$el.remove();
+    }
+  }
+}, x = (e = {}) => {
+  const o = d.extend(n), t = s({
+    outputSize: 1,
+    // 裁剪生成图片的质量(可选0.1 - 1)
+    outputType: "jpeg",
+    // 裁剪生成图片的格式（jpeg || png || webp）
+    info: !0,
+    // 图片大小信息
+    canScale: !0,
+    // 图片是否允许滚轮缩放
+    autoCrop: !0,
+    // 是否默认生成截图框
+    fixed: !1,
+    // 是否开启截图框宽高固定比例
+    full: !1,
+    // false按原比例裁切图片，不失真
+    fixedBox: !1,
+    // 固定截图框大小，不允许改变
+    canMove: !0,
+    // 上传图片是否可以移动
+    canMoveBox: !0,
+    // 截图框能否拖动
+    original: !1,
+    // 上传图片按照原始比例渲染
+    centerBox: !1,
+    // 截图框是否被限制在图片里面
+    height: !0,
+    // 是否按照设备的dpr 输出等比例图片
+    infoTrue: !1,
+    // true为展示真实输出图片宽高，false展示看到的截图框宽高
+    enlarge: 1
+  }, e), i = new o({
+    data: {
+      option: t
+    }
+  }).$mount();
+  return document.body.appendChild(i.$el), i.show(), i;
+};
+n.imageCropper = x;
+const _ = n, p = {};
+var b = /* @__PURE__ */ h(
+  _,
+  v,
+  g,
+  !1,
+  C,
+  null,
+  null,
+  null
+);
+function C(e) {
+  for (let o in p)
+    this[o] = p[o];
+}
+const k = /* @__PURE__ */ function() {
+  return b.exports;
+}();
+export {
+  k as default
+};

package/image-cropper/style.css

@@ -0,0 +1 @@
+.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{display:flex;flex:1;justify-content:center}.avue-cropper .cropper-content .show-preview .preview{overflow:hidden;background:#ccc;border:1px solid #67c23a}.avue-cropper .cropper-content .footer-btn{display:flex;justify-content:center;margin-top:30px;padding-right:10px}

package/image-preview/index.mjs

@@ -0,0 +1,260 @@
+var v = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var _ = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
+var r = (e, i, t) => i in e ? v(e, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[i] = t, c = (e, i) => {
+  for (var t in i || (i = {}))
+    _.call(i, t) && r(e, t, i[t]);
+  if (l)
+    for (var t of l(i))
+      h.call(i, t) && r(e, t, i[t]);
+  return e;
+};
+import { i as p } from "../chunks/util.17330567.mjs";
+import { setPx as u } from "@web-utils/core";
+import f from "vue";
+import { n as g } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var w = function() {
+  var e = this, i = e.$createElement, t = e._self._c || i;
+  return e.isShow ? t("div", {
+    staticClass: "avue-image-preview"
+  }, [e.ops.modal ? t("div", {
+    staticClass: "avue-image-preview__mask",
+    on: {
+      click: e.close
+    }
+  }) : e._e(), t("span", {
+    staticClass: "el-image-viewer__btn el-image-viewer__close",
+    on: {
+      click: e.close
+    }
+  }, [t("i", {
+    staticClass: "el-icon-circle-close"
+  })]), e.isRrrow ? t("span", {
+    staticClass: "el-image-viewer__btn el-image-viewer__prev",
+    on: {
+      click: function(s) {
+        return e.handlePrev();
+      }
+    }
+  }, [t("i", {
+    staticClass: "el-icon-arrow-left"
+  })]) : e._e(), e.isRrrow ? t("span", {
+    staticClass: "el-image-viewer__btn el-image-viewer__next",
+    on: {
+      click: function(s) {
+        return e.handleNext();
+      }
+    }
+  }, [t("i", {
+    staticClass: "el-icon-arrow-right"
+  })]) : e._e(), t("div", {
+    ref: "box",
+    staticClass: "avue-image-preview__box"
+  }, [t("ElCarousel", {
+    ref: "carousel",
+    attrs: {
+      "show-indicators": !1,
+      "initial-index": e.index,
+      "initial-swipe": e.index,
+      interval: 0,
+      arrow: "never",
+      "indicator-position": "none"
+    },
+    on: {
+      change: e.handleChange
+    }
+  }, e._l(e.datas, function(s, a) {
+    return t("ElCarouselItem", {
+      key: a,
+      nativeOn: {
+        click: function(n) {
+          if (n.target !== n.currentTarget)
+            return null;
+          e.ops.closeOnClickModal && e.close();
+        }
+      }
+    }, [e.isMediaType(s) ? t(e.isMediaType(s), {
+      ref: "item",
+      refInFor: !0,
+      tag: "Component",
+      style: [e.styleName, e.styleBoxName],
+      attrs: {
+        id: `avue-image-preview__${a}`,
+        src: s.url,
+        controls: "controls",
+        ondragstart: "return false"
+      },
+      on: {
+        click: function(n) {
+          return e.handleClick(s, a);
+        },
+        mousedown: e.move
+      }
+    }) : t("div", {
+      staticClass: "avue-image-preview__file",
+      attrs: {
+        id: `avue-image-preview__${a}`
+      },
+      on: {
+        click: function(n) {
+          return e.handleClick(s, a, !0);
+        }
+      }
+    }, [t("span", [t("i", {
+      staticClass: "el-icon-document"
+    }), t("p", [e._v(e._s(s.name || e.getName(s.url)))])])])], 1);
+  }), 1)], 1), t("div", {
+    staticClass: "el-image-viewer__btn el-image-viewer__actions"
+  }, [t("div", {
+    staticClass: "el-image-viewer__actions__inner"
+  }, [t("i", {
+    staticClass: "el-icon-zoom-out",
+    on: {
+      click: e.subScale
+    }
+  }), t("i", {
+    staticClass: "el-icon-zoom-in",
+    on: {
+      click: e.addScale
+    }
+  }), t("i", {
+    staticClass: "el-image-viewer__actions__divider"
+  }), t("i", {
+    staticClass: "el-icon-printer",
+    on: {
+      click: e.handlePrint
+    }
+  }), t("i", {
+    staticClass: "el-image-viewer__actions__divider"
+  }), t("i", {
+    staticClass: "el-icon-refresh-left",
+    on: {
+      click: function(s) {
+        e.rotate = e.rotate - 90;
+      }
+    }
+  }), t("i", {
+    staticClass: "el-icon-refresh-right",
+    on: {
+      click: function(s) {
+        e.rotate = e.rotate + 90;
+      }
+    }
+  })])])]) : e._e();
+}, C = [];
+const o = {
+  name: "ImagePreview",
+  data() {
+    return {
+      left: 0,
+      top: 0,
+      scale: 1,
+      datas: [],
+      rotate: 0,
+      isShow: !1,
+      index: 0,
+      ops: {}
+    };
+  },
+  computed: {
+    styleBoxName() {
+      return {
+        marginLeft: u(this.left),
+        marginTop: u(this.top)
+      };
+    },
+    styleName() {
+      return {
+        transform: `scale(${this.scale}) rotate(${this.rotate}deg)`,
+        maxWidth: "100%",
+        maxHeight: "100%"
+      };
+    },
+    isRrrow() {
+      return this.datas.length > 1;
+    }
+  },
+  methods: {
+    getName(e) {
+      return e.substring(e.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((e) => {
+        e.pause && e.pause();
+      });
+    },
+    isMediaType(e) {
+      return p(e.url, e.type);
+    },
+    subScale() {
+      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 i = e.clientX, t = e.clientY;
+      const s = 2;
+      document.onmousemove = (a) => {
+        const n = a.clientX - i, m = a.clientY - t;
+        i = a.clientX, t = a.clientY, this.left = this.left + n * s, this.top = this.top + m * s;
+      }, document.onmouseup = () => {
+        document.onmousemove = null, document.onmouseup = null;
+      };
+    },
+    handleClick(e, i, t = !1) {
+      typeof this.ops.click == "function" ? this.ops.click(e, i) : t && window.open(e.url);
+    },
+    close() {
+      this.isShow = !1, typeof this.ops.beforeClose == "function" && this.ops.beforeClose(this.datas, this.index), this.$destroy(), this.$el.remove();
+    }
+  }
+}, x = (e = [], i = 0, t = {}) => {
+  const s = f.extend(o), a = {
+    datas: e,
+    index: i,
+    ops: c({
+      closeOnClickModal: !1,
+      beforeClose: null,
+      click: null,
+      modal: !0
+    }, t)
+  }, n = new s({
+    data: a
+  }).$mount();
+  return document.body.appendChild(n.$el), n.isShow = !0, n;
+};
+o.imagePreview = x;
+const k = o, d = {};
+var $ = /* @__PURE__ */ g(
+  k,
+  w,
+  C,
+  !1,
+  y,
+  null,
+  null,
+  null
+);
+function y(e) {
+  for (let i in d)
+    this[i] = d[i];
+}
+const M = /* @__PURE__ */ function() {
+  return $.exports;
+}();
+export {
+  M as default
+};

package/image-preview/style.css

@@ -0,0 +1 @@
+.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;z-index:9998;width:100%;height:100%;transition:all .5s}.avue-image-preview .el-image-viewer__close i{color:#fff}.avue-image-preview .el-image-viewer__btn{z-index:1024}.avue-image-preview img{cursor:pointer;transition:all .5s}.avue-image-preview__file{text-align:center}.avue-image-preview__file a{color:#fff}.avue-image-preview__file i{font-size:80px;cursor:pointer}.avue-image-preview__mask{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5)}.avue-image-preview__box{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.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{display:flex;align-items:center;justify-content:center;width:100%;height:100%}

package/image-viewer/index.mjs

@@ -0,0 +1,95 @@
+import i from "viewerjs";
+import "viewerjs/dist/viewer.css";
+import { n as l } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var n = function() {
+  var e = this, t = e.$createElement, r = e._self._c || t;
+  return r("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !e.lazy,
+      expression: "!lazy"
+    }],
+    ref: "wrapper",
+    staticClass: "image-viewer"
+  }, [e._t("default", function() {
+    return e._l(e.images, function(a) {
+      return r("img", {
+        key: a.src,
+        staticClass: "image-item",
+        style: {
+          backgroundImage: `url('${a.src}')`
+        },
+        attrs: {
+          "data-src": a.src,
+          alt: a.alt
+        }
+      });
+    });
+  })], 2);
+}, o = [];
+const u = {
+  name: "ImageViewer",
+  props: {
+    images: Array,
+    url: {
+      type: String,
+      default: "data-src"
+    },
+    lazy: Boolean
+  },
+  mounted() {
+    this.lazy || this.init({
+      container: this.$refs.wrapper,
+      options: {
+        navbar: !1,
+        backdrop: "static",
+        url: this.url
+      }
+    });
+  },
+  updated() {
+    var e;
+    this.lazy || (e = this.gallery) == null || e.update();
+  },
+  beforeDestroy() {
+    this.lazy || this.gallery.destroy();
+  },
+  methods: {
+    init({ container: e, options: t }) {
+      this.gallery = new i(e, t);
+    },
+    show({ container: e, options: t, index: r } = {}) {
+      e = e || this.$refs.wrapper, t = t || {
+        navbar: !1,
+        backdrop: "static",
+        url: this.url,
+        loop: !1,
+        initialViewIndex: r || 0,
+        hidden: () => {
+          this.gallery.destroy(), this.gallery = null;
+        }
+      }, this.gallery || (this.init({ container: e, options: t }), this.gallery.show());
+    }
+  }
+}, s = {};
+var c = /* @__PURE__ */ l(
+  u,
+  n,
+  o,
+  !1,
+  _,
+  null,
+  null,
+  null
+);
+function _(e) {
+  for (let t in s)
+    this[t] = s[t];
+}
+const p = /* @__PURE__ */ function() {
+  return c.exports;
+}();
+export {
+  p as default
+};

package/image-viewer/style.css

@@ -0,0 +1 @@
+.image-viewer .image-item{display:inline-block;width:100px;height:100px;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:cover;border:none;outline:none;cursor:pointer}.viewer-backdrop{background-color:#5e5e5e}