@web-utils/component 2.7.37 → 2.8.0

package/{dist/components/image-preview → image-preview}/index.mjs

@@ -1,8 +1,20 @@
-import { i as c } from "../../chunks/util.eca708b6.mjs";
-import { setPx as o } from "@web-utils/core";
-import { n as u } from "../../chunks/vueComponentNormalizer.446f5dc4.mjs";
-var _ = function() {
-  var e = this, a = e.$createElement, t = e._self._c || a;
+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", {
@@ -20,7 +32,7 @@ var _ = function() {
   })]), e.isRrrow ? t("span", {
     staticClass: "el-image-viewer__btn el-image-viewer__prev",
     on: {
-      click: function(i) {
+      click: function(s) {
         return e.handlePrev();
       }
     }
@@ -29,7 +41,7 @@ var _ = function() {
   })]) : e._e(), e.isRrrow ? t("span", {
     staticClass: "el-image-viewer__btn el-image-viewer__next",
     on: {
-      click: function(i) {
+      click: function(s) {
         return e.handleNext();
       }
     }
@@ -51,9 +63,9 @@ var _ = function() {
     on: {
       change: e.handleChange
     }
-  }, e._l(e.datas, function(i, s) {
+  }, e._l(e.datas, function(s, a) {
     return t("ElCarouselItem", {
-      key: s,
+      key: a,
       nativeOn: {
         click: function(n) {
           if (n.target !== n.currentTarget)
@@ -61,36 +73,36 @@ var _ = function() {
           e.ops.closeOnClickModal && e.close();
         }
       }
-    }, [e.isMediaType(i) ? t(e.isMediaType(i), {
+    }, [e.isMediaType(s) ? t(e.isMediaType(s), {
       ref: "item",
       refInFor: !0,
       tag: "Component",
       style: [e.styleName, e.styleBoxName],
       attrs: {
-        id: `avue-image-preview__${s}`,
-        src: i.url,
+        id: `avue-image-preview__${a}`,
+        src: s.url,
         controls: "controls",
         ondragstart: "return false"
       },
       on: {
         click: function(n) {
-          return e.handleClick(i, s);
+          return e.handleClick(s, a);
         },
         mousedown: e.move
       }
     }) : t("div", {
       staticClass: "avue-image-preview__file",
       attrs: {
-        id: `avue-image-preview__${s}`
+        id: `avue-image-preview__${a}`
       },
       on: {
         click: function(n) {
-          return e.handleClick(i, s, !0);
+          return e.handleClick(s, a, !0);
         }
       }
     }, [t("span", [t("i", {
       staticClass: "el-icon-document"
-    }), t("p", [e._v(e._s(i.name || e.getName(i.url)))])])])], 1);
+    }), 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", {
@@ -117,22 +129,21 @@ var _ = function() {
   }), t("i", {
     staticClass: "el-icon-refresh-left",
     on: {
-      click: function(i) {
+      click: function(s) {
         e.rotate = e.rotate - 90;
       }
     }
   }), t("i", {
     staticClass: "el-icon-refresh-right",
     on: {
-      click: function(i) {
+      click: function(s) {
         e.rotate = e.rotate + 90;
       }
     }
   })])])]) : e._e();
-}, d = [];
-const h = {
+}, C = [];
+const o = {
   name: "ImagePreview",
-  // imagePreview,
   data() {
     return {
       left: 0,
@@ -148,8 +159,8 @@ const h = {
   computed: {
     styleBoxName() {
       return {
-        marginLeft: o(this.left),
-        marginTop: o(this.top)
+        marginLeft: u(this.left),
+        marginTop: u(this.top)
       };
     },
     styleName() {
@@ -182,7 +193,7 @@ const h = {
       });
     },
     isMediaType(e) {
-      return c(e.url, e.type);
+      return p(e.url, e.type);
     },
     subScale() {
       this.scale !== 0.2 && (this.scale = parseFloat((this.scale - 0.2).toFixed(2)));
@@ -194,40 +205,56 @@ const h = {
       this.scale = 1, this.rotate = 0;
     },
     move(e) {
-      let a = e.clientX, t = e.clientY;
-      const i = 2;
-      document.onmousemove = (s) => {
-        const n = s.clientX - a, r = s.clientY - t;
-        a = s.clientX, t = s.clientY, this.left = this.left + n * i, this.top = this.top + r * i;
+      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, a, t = !1) {
-      typeof this.ops.click == "function" ? this.ops.click(e, a) : t && window.open(e.url);
+    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();
     }
   }
-}, l = {};
-var v = /* @__PURE__ */ u(
-  h,
-  _,
-  d,
+}, 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,
-  m,
+  y,
   null,
   null,
   null
 );
-function m(e) {
-  for (let a in l)
-    this[a] = l[a];
+function y(e) {
+  for (let i in d)
+    this[i] = d[i];
 }
-const w = /* @__PURE__ */ function() {
-  return v.exports;
+const M = /* @__PURE__ */ function() {
+  return $.exports;
 }();
 export {
-  w as default
+  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/{dist/components/image-viewer → image-viewer}/index.mjs

@@ -1,6 +1,6 @@
 import i from "viewerjs";
 import "viewerjs/dist/viewer.css";
-import { n as l } from "../../chunks/vueComponentNormalizer.446f5dc4.mjs";
+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", {

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}