@web-utils/component 2.7.29 → 2.7.31

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

@@ -1,38 +1,28 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b))
-      __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);
-  return a;
-};
-import { i as isMediaType } from "../../chunks/util.89913643.js";
+import { i as isMediaType } from "../../chunks/util.b0d0b0ad.js";
 import { setPx } from "@web-utils/core";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
-import Vue from "vue";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  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
+      "click": _vm.close
     }
   }) : _vm._e(), _c("span", {
     staticClass: "el-image-viewer__btn el-image-viewer__close",
     on: {
-      click: _vm.close
+      "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) {
+      "click": function($event) {
         return _vm.handlePrev();
       }
     }
@@ -41,7 +31,7 @@ var render = function() {
   })]) : _vm._e(), _vm.isRrrow ? _c("span", {
     staticClass: "el-image-viewer__btn el-image-viewer__next",
     on: {
-      click: function($event) {
+      "click": function($event) {
         return _vm.handleNext();
       }
     }
@@ -53,51 +43,51 @@ var render = function() {
   }, [_c("ElCarousel", {
     ref: "carousel",
     attrs: {
-      "show-indicators": !1,
+      "show-indicators": false,
       "initial-index": _vm.index,
       "initial-swipe": _vm.index,
-      interval: 0,
-      arrow: "never",
+      "interval": 0,
+      "arrow": "never",
       "indicator-position": "none"
     },
     on: {
-      change: _vm.handleChange
+      "change": _vm.handleChange
     }
   }, _vm._l(_vm.datas, function(item, indexs) {
     return _c("ElCarouselItem", {
       key: indexs,
       nativeOn: {
-        click: function($event) {
+        "click": function($event) {
           if ($event.target !== $event.currentTarget)
             return null;
-          _vm.ops.closeOnClickModal && _vm.close();
+          _vm.ops.closeOnClickModal ? _vm.close() : "";
         }
       }
     }, [_vm.isMediaType(item) ? _c(_vm.isMediaType(item), {
       ref: "item",
-      refInFor: !0,
+      refInFor: true,
       tag: "Component",
       style: [_vm.styleName, _vm.styleBoxName],
       attrs: {
-        id: `avue-image-preview__${indexs}`,
-        src: item.url,
-        controls: "controls",
-        ondragstart: "return false"
+        "id": `avue-image-preview__${indexs}`,
+        "src": item.url,
+        "controls": "controls",
+        "ondragstart": "return false"
       },
       on: {
-        click: function($event) {
+        "click": function($event) {
           return _vm.handleClick(item, indexs);
         },
-        mousedown: _vm.move
+        "mousedown": _vm.move
       }
     }) : _c("div", {
       staticClass: "avue-image-preview__file",
       attrs: {
-        id: `avue-image-preview__${indexs}`
+        "id": `avue-image-preview__${indexs}`
       },
       on: {
-        click: function($event) {
-          return _vm.handleClick(item, indexs, !0);
+        "click": function($event) {
+          return _vm.handleClick(item, indexs, true);
         }
       }
     }, [_c("span", [_c("i", {
@@ -110,41 +100,43 @@ var render = function() {
   }, [_c("i", {
     staticClass: "el-icon-zoom-out",
     on: {
-      click: _vm.subScale
+      "click": _vm.subScale
     }
   }), _c("i", {
     staticClass: "el-icon-zoom-in",
     on: {
-      click: _vm.addScale
+      "click": _vm.addScale
     }
   }), _c("i", {
     staticClass: "el-image-viewer__actions__divider"
   }), _c("i", {
     staticClass: "el-icon-printer",
     on: {
-      click: _vm.handlePrint
+      "click": _vm.handlePrint
     }
   }), _c("i", {
     staticClass: "el-image-viewer__actions__divider"
   }), _c("i", {
     staticClass: "el-icon-refresh-left",
     on: {
-      click: function($event) {
+      "click": function($event) {
         _vm.rotate = _vm.rotate - 90;
       }
     }
   }), _c("i", {
     staticClass: "el-icon-refresh-right",
     on: {
-      click: function($event) {
+      "click": function($event) {
         _vm.rotate = _vm.rotate + 90;
       }
     }
   })])])]) : _vm._e();
-}, staticRenderFns = [];
-const __vue2_script$1 = {
+};
+var staticRenderFns = [];
+const ImagePreview_vue_vue_type_style_index_0_lang = "";
+const __vue2_script = {
   name: "ImagePreview",
-  imagePreview,
+  // imagePreview,
   data() {
     return {
       left: 0,
@@ -152,7 +144,7 @@ const __vue2_script$1 = {
       scale: 1,
       datas: [],
       rotate: 0,
-      isShow: !1,
+      isShow: false,
       index: 0,
       ops: {}
     };
@@ -183,13 +175,19 @@ const __vue2_script$1 = {
       this.$Print(`#avue-image-preview__${this.index}`);
     },
     handlePrev() {
-      this.$refs.carousel.prev(), this.index = this.$refs.carousel.activeIndex, this.stopItem();
+      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();
+      this.$refs.carousel.next();
+      this.index = this.$refs.carousel.activeIndex;
+      this.stopItem();
     },
     stopItem() {
-      this.left = 0, this.top = 0, this.$refs.item.forEach((ele) => {
+      this.left = 0;
+      this.top = 0;
+      this.$refs.item.forEach((ele) => {
         ele.pause && ele.pause();
       });
     },
@@ -197,156 +195,66 @@ const __vue2_script$1 = {
       return isMediaType(item.url, item.type);
     },
     subScale() {
-      this.scale !== 0.2 && (this.scale = parseFloat((this.scale - 0.2).toFixed(2)));
+      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;
+      this.scale = 1;
+      this.rotate = 0;
     },
     move(e) {
-      let disX = e.clientX, disY = e.clientY;
+      let disX = e.clientX;
+      let 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;
+        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;
       };
-    },
-    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();
-    }
-  }
-}, __cssModules$1 = {};
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$1,
-  render,
-  staticRenderFns,
-  !1,
-  __vue2_injectStyles$1,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles$1(context) {
-  for (let o in __cssModules$1)
-    this[o] = __cssModules$1[o];
-}
-const ImagePreview$1 = /* @__PURE__ */ function() {
-  return __component__$1.exports;
-}(), imagePreview = (datas = [], index = 0, ops = {}) => {
-  const ImagePreviewConstructor = Vue.extend(ImagePreview$1), options = {
-    datas,
-    index,
-    ops: __spreadValues({
-      closeOnClickModal: !1,
-      beforeClose: null,
-      click: null,
-      modal: !0
-    }, ops)
-  }, instance = new ImagePreviewConstructor({
-    data: options
-  }).$mount();
-  return document.body.appendChild(instance.$el), instance.isShow = !0, instance;
-}, __vue2_script = {
-  name: "ImagePreview",
-  imagePreview,
-  data() {
-    return {
-      left: 0,
-      top: 0,
-      scale: 1,
-      datas: [],
-      rotate: 0,
-      isShow: !1,
-      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%"
+      document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
       };
     },
-    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() {
-      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, 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(item, index, df = !1) {
-      typeof this.ops.click == "function" ? this.ops.click(item, index) : df && window.open(item.url);
+    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 = !1, typeof this.ops.beforeClose == "function" && this.ops.beforeClose(this.datas, this.index), this.$destroy(), this.$el.remove();
+      this.isShow = false;
+      if (typeof this.ops.beforeClose === "function") {
+        this.ops.beforeClose(this.datas, this.index);
+      }
+      this.$destroy();
+      this.$el.remove();
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const ImagePreview = /* @__PURE__ */ function() {
   return __component__.exports;

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

@@ -1 +1,72 @@
-.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 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,8 +1,10 @@
 import Viewer from "viewerjs";
 import "viewerjs/dist/viewer.css";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     directives: [{
       name: "show",
@@ -22,12 +24,14 @@ var render = function() {
         },
         attrs: {
           "data-src": item.src,
-          alt: item.alt
+          "alt": item.alt
         }
       });
     });
   })], 2);
-}, staticRenderFns = [];
+};
+var staticRenderFns = [];
+const ImageViewer_vue_vue_type_style_index_0_lang = "";
 const __vue2_script = {
   name: "ImageViewer",
   props: {
@@ -39,53 +43,67 @@ const __vue2_script = {
     lazy: Boolean
   },
   mounted() {
-    this.lazy || this.init({
-      container: this.$refs.wrapper,
-      options: {
-        navbar: !1,
-        backdrop: "static",
-        url: this.url
-      }
-    });
+    if (!this.lazy) {
+      this.init({
+        container: this.$refs.wrapper,
+        options: {
+          navbar: false,
+          backdrop: "static",
+          url: this.url
+        }
+      });
+    }
   },
   updated() {
     var _a;
-    this.lazy || (_a = this.gallery) == null || _a.update();
+    if (!this.lazy) {
+      (_a = this.gallery) == null ? void 0 : _a.update();
+    }
   },
   beforeDestroy() {
-    this.lazy || this.gallery.destroy();
+    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: !1,
+      container = container || this.$refs.wrapper;
+      options = options || {
+        navbar: false,
         backdrop: "static",
         url: this.url,
-        loop: !1,
+        loop: false,
         initialViewIndex: index || 0,
         hidden: () => {
-          this.gallery.destroy(), this.gallery = null;
+          this.gallery.destroy();
+          this.gallery = null;
         }
-      }, this.gallery || (this.init({ container, options }), this.gallery.show());
+      };
+      if (!this.gallery) {
+        this.init({ container, options });
+        this.gallery.show();
+      }
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const ImageViewer = /* @__PURE__ */ function() {
   return __component__.exports;

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

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