@web-utils/component 2.7.20 → 2.7.21

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

@@ -1,139 +1,139 @@
-import { x as u } from "../../chunks/util.23fe58fb.js";
-import { setPx as n } from "@web-utils/core";
-import { n as h } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-import f from "vue";
-var d = function() {
-  var e = this, s = e.$createElement, t = e._self._c || s;
-  return e.isShow ? t("div", {
+import { i as isMediaType } from "../../chunks/util.89913643.js";
+import { setPx } from "@web-utils/core";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+import Vue from "vue";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _vm.isShow ? _c("div", {
     staticClass: "avue-image-preview"
-  }, [e.ops.modal ? t("div", {
+  }, [_vm.ops.modal ? _c("div", {
     staticClass: "avue-image-preview__mask",
     on: {
-      click: e.close
+      click: _vm.close
     }
-  }) : e._e(), t("span", {
+  }) : _vm._e(), _c("span", {
     staticClass: "el-image-viewer__btn el-image-viewer__close",
     on: {
-      click: e.close
+      click: _vm.close
     }
-  }, [t("i", {
+  }, [_c("i", {
     staticClass: "el-icon-circle-close"
-  })]), e.isRrrow ? t("span", {
+  })]), _vm.isRrrow ? _c("span", {
     staticClass: "el-image-viewer__btn el-image-viewer__prev",
     on: {
-      click: function(i) {
-        return e.handlePrev();
+      click: function($event) {
+        return _vm.handlePrev();
       }
     }
-  }, [t("i", {
+  }, [_c("i", {
     staticClass: "el-icon-arrow-left"
-  })]) : e._e(), e.isRrrow ? t("span", {
+  })]) : _vm._e(), _vm.isRrrow ? _c("span", {
     staticClass: "el-image-viewer__btn el-image-viewer__next",
     on: {
-      click: function(i) {
-        return e.handleNext();
+      click: function($event) {
+        return _vm.handleNext();
       }
     }
-  }, [t("i", {
+  }, [_c("i", {
     staticClass: "el-icon-arrow-right"
-  })]) : e._e(), t("div", {
+  })]) : _vm._e(), _c("div", {
     ref: "box",
     staticClass: "avue-image-preview__box"
-  }, [t("ElCarousel", {
+  }, [_c("ElCarousel", {
     ref: "carousel",
     attrs: {
       "show-indicators": !1,
-      "initial-index": e.index,
-      "initial-swipe": e.index,
+      "initial-index": _vm.index,
+      "initial-swipe": _vm.index,
       interval: 0,
       arrow: "never",
       "indicator-position": "none"
     },
     on: {
-      change: e.handleChange
+      change: _vm.handleChange
     }
-  }, e._l(e.datas, function(i, a) {
-    return t("ElCarouselItem", {
-      key: a,
+  }, _vm._l(_vm.datas, function(item, indexs) {
+    return _c("ElCarouselItem", {
+      key: indexs,
       nativeOn: {
-        click: function(o) {
-          if (o.target !== o.currentTarget)
+        click: function($event) {
+          if ($event.target !== $event.currentTarget)
             return null;
-          e.ops.closeOnClickModal && e.close();
+          _vm.ops.closeOnClickModal && _vm.close();
         }
       }
-    }, [e.isMediaType(i) ? t(e.isMediaType(i), {
+    }, [_vm.isMediaType(item) ? _c(_vm.isMediaType(item), {
       ref: "item",
       refInFor: !0,
       tag: "Component",
-      style: [e.styleName, e.styleBoxName],
+      style: [_vm.styleName, _vm.styleBoxName],
       attrs: {
-        id: `avue-image-preview__${a}`,
-        src: i.url,
+        id: `avue-image-preview__${indexs}`,
+        src: item.url,
         controls: "controls",
         ondragstart: "return false"
       },
       on: {
-        click: function(o) {
-          return e.handleClick(i, a);
+        click: function($event) {
+          return _vm.handleClick(item, indexs);
         },
-        mousedown: e.move
+        mousedown: _vm.move
       }
-    }) : t("div", {
+    }) : _c("div", {
       staticClass: "avue-image-preview__file",
       attrs: {
-        id: `avue-image-preview__${a}`
+        id: `avue-image-preview__${indexs}`
       },
       on: {
-        click: function(o) {
-          return e.handleClick(i, a, !0);
+        click: function($event) {
+          return _vm.handleClick(item, indexs, !0);
         }
       }
-    }, [t("span", [t("i", {
+    }, [_c("span", [_c("i", {
       staticClass: "el-icon-document"
-    }), t("p", [e._v(e._s(i.name || e.getName(i.url)))])])])], 1);
-  }), 1)], 1), t("div", {
+    }), _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"
-  }, [t("div", {
+  }, [_c("div", {
     staticClass: "el-image-viewer__actions__inner"
-  }, [t("i", {
+  }, [_c("i", {
     staticClass: "el-icon-zoom-out",
     on: {
-      click: e.subScale
+      click: _vm.subScale
     }
-  }), t("i", {
+  }), _c("i", {
     staticClass: "el-icon-zoom-in",
     on: {
-      click: e.addScale
+      click: _vm.addScale
     }
-  }), t("i", {
+  }), _c("i", {
     staticClass: "el-image-viewer__actions__divider"
-  }), t("i", {
+  }), _c("i", {
     staticClass: "el-icon-printer",
     on: {
-      click: e.handlePrint
+      click: _vm.handlePrint
     }
-  }), t("i", {
+  }), _c("i", {
     staticClass: "el-image-viewer__actions__divider"
-  }), t("i", {
+  }), _c("i", {
     staticClass: "el-icon-refresh-left",
     on: {
-      click: function(i) {
-        e.rotate = e.rotate - 90;
+      click: function($event) {
+        _vm.rotate = _vm.rotate - 90;
       }
     }
-  }), t("i", {
+  }), _c("i", {
     staticClass: "el-icon-refresh-right",
     on: {
-      click: function(i) {
-        e.rotate = e.rotate + 90;
+      click: function($event) {
+        _vm.rotate = _vm.rotate + 90;
       }
     }
-  })])])]) : e._e();
-}, m = [];
-const _ = {
+  })])])]) : _vm._e();
+}, staticRenderFns = [];
+const __vue2_script$1 = {
   name: "ImagePreview",
-  imagePreview: p,
+  imagePreview,
   data() {
     return {
       left: 0,
@@ -149,8 +149,8 @@ const _ = {
   computed: {
     styleBoxName() {
       return {
-        marginLeft: n(this.left),
-        marginTop: n(this.top)
+        marginLeft: setPx(this.left),
+        marginTop: setPx(this.top)
       };
     },
     styleName() {
@@ -165,8 +165,8 @@ const _ = {
     }
   },
   methods: {
-    getName(e) {
-      return e.substring(e.lastIndexOf("/") + 1);
+    getName(url) {
+      return url.substring(url.lastIndexOf("/") + 1);
     },
     handlePrint() {
       this.$Print(`#avue-image-preview__${this.index}`);
@@ -178,12 +178,12 @@ const _ = {
       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();
+      this.left = 0, this.top = 0, this.$refs.item.forEach((ele) => {
+        ele.pause && ele.pause();
       });
     },
-    isMediaType(e) {
-      return u(e.url, e.type);
+    isMediaType(item) {
+      return isMediaType(item.url, item.type);
     },
     subScale() {
       this.scale !== 0.2 && (this.scale = parseFloat((this.scale - 0.2).toFixed(2)));
@@ -195,57 +195,57 @@ const _ = {
       this.scale = 1, this.rotate = 0;
     },
     move(e) {
-      let s = e.clientX, t = e.clientY;
-      const i = 2;
-      document.onmousemove = (a) => {
-        const o = a.clientX - s, l = a.clientY - t;
-        s = a.clientX, t = a.clientY, this.left = this.left + o * i, this.top = this.top + l * i;
+      let disX = e.clientX, disY = e.clientY;
+      const scale = 2;
+      document.onmousemove = (e2) => {
+        const left = e2.clientX - disX, 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(e, s, t = !1) {
-      typeof this.ops.click == "function" ? this.ops.click(e, s) : t && window.open(e.url);
+    handleClick(item, index, df = !1) {
+      typeof this.ops.click == "function" ? this.ops.click(item, index) : df && window.open(item.url);
     },
     close() {
       this.isShow = !1, typeof this.ops.beforeClose == "function" && this.ops.beforeClose(this.datas, this.index), this.$destroy(), this.$el.remove();
     }
   }
-}, r = {};
-var v = /* @__PURE__ */ h(
-  _,
-  d,
-  m,
+}, __cssModules$1 = {};
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$1,
+  render,
+  staticRenderFns,
   !1,
-  g,
+  __vue2_injectStyles$1,
   null,
   null,
   null
 );
-function g(e) {
-  for (let s in r)
-    this[s] = r[s];
+function __vue2_injectStyles$1(context) {
+  for (let o in __cssModules$1)
+    this[o] = __cssModules$1[o];
 }
-const w = /* @__PURE__ */ function() {
-  return v.exports;
-}(), p = (e = [], s = 0, t = {}) => {
-  const i = f.extend(w), a = {
-    datas: e,
-    index: s,
+const ImagePreview$1 = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}(), imagePreview = (datas = [], index = 0, ops = {}) => {
+  const ImagePreviewConstructor = Vue.extend(ImagePreview$1), options = {
+    datas,
+    index,
     ops: {
       closeOnClickModal: !1,
       beforeClose: null,
       click: null,
       modal: !0,
-      ...t
+      ...ops
     }
-  }, o = new i({
-    data: a
+  }, instance = new ImagePreviewConstructor({
+    data: options
   }).$mount();
-  return document.body.appendChild(o.$el), o.isShow = !0, o;
-}, x = {
+  return document.body.appendChild(instance.$el), instance.isShow = !0, instance;
+}, __vue2_script = {
   name: "ImagePreview",
-  imagePreview: p,
+  imagePreview,
   data() {
     return {
       left: 0,
@@ -261,8 +261,8 @@ const w = /* @__PURE__ */ function() {
   computed: {
     styleBoxName() {
       return {
-        marginLeft: n(this.left),
-        marginTop: n(this.top)
+        marginLeft: setPx(this.left),
+        marginTop: setPx(this.top)
       };
     },
     styleName() {
@@ -277,8 +277,8 @@ const w = /* @__PURE__ */ function() {
     }
   },
   methods: {
-    getName(e) {
-      return e.substring(e.lastIndexOf("/") + 1);
+    getName(url) {
+      return url.substring(url.lastIndexOf("/") + 1);
     },
     handlePrint() {
       this.$Print(`#avue-image-preview__${this.index}`);
@@ -290,12 +290,12 @@ const w = /* @__PURE__ */ function() {
       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();
+      this.left = 0, this.top = 0, this.$refs.item.forEach((ele) => {
+        ele.pause && ele.pause();
       });
     },
-    isMediaType(e) {
-      return u(e.url, e.type);
+    isMediaType(item) {
+      return isMediaType(item.url, item.type);
     },
     subScale() {
       this.scale !== 0.2 && (this.scale = parseFloat((this.scale - 0.2).toFixed(2)));
@@ -307,40 +307,40 @@ const w = /* @__PURE__ */ function() {
       this.scale = 1, this.rotate = 0;
     },
     move(e) {
-      let s = e.clientX, t = e.clientY;
-      const i = 2;
-      document.onmousemove = (a) => {
-        const o = a.clientX - s, l = a.clientY - t;
-        s = a.clientX, t = a.clientY, this.left = this.left + o * i, this.top = this.top + l * i;
+      let disX = e.clientX, disY = e.clientY;
+      const scale = 2;
+      document.onmousemove = (e2) => {
+        const left = e2.clientX - disX, 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(e, s, t = !1) {
-      typeof this.ops.click == "function" ? this.ops.click(e, s) : t && window.open(e.url);
+    handleClick(item, index, df = !1) {
+      typeof this.ops.click == "function" ? this.ops.click(item, index) : df && window.open(item.url);
     },
     close() {
       this.isShow = !1, typeof this.ops.beforeClose == "function" && this.ops.beforeClose(this.datas, this.index), this.$destroy(), this.$el.remove();
     }
   }
-}, c = {};
-var C = /* @__PURE__ */ h(
-  x,
-  d,
-  m,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  $,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function $(e) {
-  for (let s in c)
-    this[s] = c[s];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const P = /* @__PURE__ */ function() {
-  return C.exports;
+const ImagePreview = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  P as default
+  ImagePreview as default
 };

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

@@ -1 +1,66 @@
-.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 .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 .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,.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}
+.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 .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 .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, .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,34 +1,34 @@
-import i from "viewerjs";
+import Viewer from "viewerjs";
 import "viewerjs/dist/viewer.css";
-import { n as l } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var n = function() {
-  var e = this, t = e.$createElement, r = e._self._c || t;
-  return r("div", {
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: !e.lazy,
+      value: !_vm.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,
+  }, [_vm._t("default", function() {
+    return _vm._l(_vm.images, function(item) {
+      return _c("img", {
+        key: item.src,
         staticClass: "image-item",
         style: {
-          backgroundImage: `url('${a.src}')`
+          backgroundImage: `url('${item.src}')`
         },
         attrs: {
-          "data-src": a.src,
-          alt: a.alt
+          "data-src": item.src,
+          alt: item.alt
         }
       });
     });
   })], 2);
-}, o = [];
-const u = {
+}, staticRenderFns = [];
+const __vue2_script = {
   name: "ImageViewer",
   props: {
     images: Array,
@@ -49,47 +49,47 @@ const u = {
     });
   },
   updated() {
-    var e;
-    this.lazy || (e = this.gallery) == null || e.update();
+    var _a;
+    this.lazy || (_a = this.gallery) == null || _a.update();
   },
   beforeDestroy() {
     this.lazy || this.gallery.destroy();
   },
   methods: {
-    init({ container: e, options: t }) {
-      this.gallery = new i(e, t);
+    init({ container, options }) {
+      this.gallery = new Viewer(container, options);
     },
-    show({ container: e, options: t, index: r } = {}) {
-      e = e || this.$refs.wrapper, t = t || {
+    show({ container, options, index } = {}) {
+      container = container || this.$refs.wrapper, options = options || {
         navbar: !1,
         backdrop: "static",
         url: this.url,
         loop: !1,
-        initialViewIndex: r || 0,
+        initialViewIndex: index || 0,
         hidden: () => {
           this.gallery.destroy(), this.gallery = null;
         }
-      }, this.gallery || (this.init({ container: e, options: t }), this.gallery.show());
+      }, this.gallery || (this.init({ container, options }), this.gallery.show());
     }
   }
-}, s = {};
-var c = /* @__PURE__ */ l(
-  u,
-  n,
-  o,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  _,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function _(e) {
-  for (let t in s)
-    this[t] = s[t];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const p = /* @__PURE__ */ function() {
-  return c.exports;
+const ImageViewer = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  p as default
+  ImageViewer as default
 };

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

@@ -1 +1,15 @@
-.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}
+.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;
+}