@web-utils/component 2.0.13 → 2.2.0

package/image-preview/index.mjs

@@ -0,0 +1,260 @@
+var h = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var v = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var r = (e, i, t) => i in e ? h(e, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[i] = t, c = (e, i) => {
+  for (var t in i || (i = {}))
+    v.call(i, t) && r(e, t, i[t]);
+  if (l)
+    for (var t of l(i))
+      _.call(i, t) && r(e, t, i[t]);
+  return e;
+};
+import { i as p } from "../chunks/util.C2Bhx22L.mjs";
+import { setPx as u } from "@web-utils/core";
+import f from "vue";
+import { n as g } from "../chunks/vueComponentNormalizer.JwmUNtgn.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{justify-content:center;align-items:center;display:flex}.avue-img--fullscreen .el-dialog__body{height:100%}.avue-image-preview{z-index:9998;width:100%;height:100%;transition:all .5s;position:fixed;top:0;left:0}.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{cursor:pointer;font-size:80px}.avue-image-preview__mask{background:rgba(0,0,0,.5);width:100%;height:100%;position:absolute;top:0;left:0}.avue-image-preview__box{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.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{justify-content:center;align-items:center;width:100%;height:100%;display:flex}

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.JwmUNtgn.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,
+  h,
+  null,
+  null,
+  null
+);
+function h(e) {
+  for (let t in s)
+    this[t] = s[t];
+}
+const m = /* @__PURE__ */ function() {
+  return c.exports;
+}();
+export {
+  m as default
+};

package/image-viewer/style.css

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