vue-devui 1.0.0-alpha.6 → 1.0.0-beta.12

package/image-preview/index.es.js

@@ -1 +1,498 @@
-var t=Object.defineProperty,e=("undefined"!=typeof require&&require,(e,o,i)=>(((e,o,i)=>{o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[o]=i})(e,"symbol"!=typeof o?o+"":o,i),i));import{defineComponent as o,ref as i,computed as s,onMounted as l,createVNode as n,createTextVNode as r,createApp as h}from"vue";const a={url:{type:String,default:""},previewUrlList:{type:Array,default:()=>[]}};class u{constructor(t,o={}){e(this,"el"),e(this,"oTransformX",0),e(this,"oTransformY",0),e(this,"transformX"),e(this,"transformY"),e(this,"zoom"),e(this,"rotate"),e(this,"STEP",.25),e(this,"MIN_SCALE",.2),e(this,"MAX_SCALE",2.5),e(this,"TRANSFORMX",0),e(this,"TRANSFORMY",0),e(this,"ZOOM",1),e(this,"ROTATE",0),this.el=t,this.transformX=o.transformX||this.TRANSFORMX,this.transformY=o.transformY||this.TRANSFORMY,this.zoom=o.zoom||this.ZOOM,this.rotate=o.rotate||this.ROTATE,this.handleDefaultDraggable(),this.onDraggable(),this.onMouseWheel()}handleDefaultDraggable(){document.body.ondragstart=()=>(window.event.returnValue=!1,!1)}onDraggable(){this.el.onmousedown=t=>{const e=t.clientX,o=t.clientY;document.onmousemove=t=>{const i=t.clientX-e,s=t.clientY-o;this.transformX=this.oTransformX+i,this.transformY=this.oTransformY+s,this.el.style.cursor="grabbing",this.setPosition()}},document.onmouseup=()=>{document.onmousemove=null,this.oTransformX=this.transformX,this.oTransformY=this.transformY,this.el.style.cursor="grab"}}onMouseWheel(){const t=this.throttle(this.setMouseWheel,100);this.el.onmousewheel=e=>{const o=-e.wheelDelta||e.deltaY||e.detail;t(o)}}throttle(t,e){let o=null;return(...i)=>{o||setTimeout((()=>{o=null,t.apply(this,i)}),e)}}setMouseWheel(t){if(t<0){if(this.zoom>=this.MAX_SCALE)return void(this.el.style.cursor="not-allowed");this.el.style.cursor="zoom-in",this.setZoomIn(this.STEP)}else{if(this.zoom<=this.MIN_SCALE)return void(this.el.style.cursor="not-allowed");this.el.style.cursor="zoom-out",this.setZoomOut(this.STEP)}this.setPosition()}setZoomIn(t=this.STEP){this.zoom=Math.min(this.MAX_SCALE,this.zoom+t),this.setPosition()}setZoomOut(t=this.STEP){this.zoom=Math.max(this.MIN_SCALE,this.zoom-t),this.setPosition()}setZoomBest(){this.reset(),this.setPosition()}setZoomOriginal(){this.reset(),this.setPosition()}setRotate(){this.rotate+=.25,this.setPosition()}reset(){this.transformX=this.TRANSFORMX,this.transformY=this.TRANSFORMY,this.zoom=this.ZOOM}setPosition(){this.el.style.transform=`translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`}}var d=o({name:"DImagePreview",props:a,emits:[],setup(t){let e=null;const o=i(0),h=s((()=>t.previewUrlList[o.value]));function a(){o.value=o.value<=0?t.previewUrlList.length-1:o.value-1}function d(){o.value=o.value>=t.previewUrlList.length-1?0:o.value+1}function f(){v.close()}function m(){e.setZoomIn()}function c(){e.setZoomOut()}function L(){e.setRotate()}function g(){e.setZoomBest()}function p(){e.setZoomOriginal()}return l((()=>{o.value=t.previewUrlList.findIndex((e=>e===t.url)),function(){const t=document.querySelector(".devui-image-preview-main-image");e=new u(t)}()})),()=>n("div",{class:"devui-image-preview"},[n("img",{class:"devui-image-preview-main-image",src:h.value},null),n("button",{class:"devui-image-preview-close-btn",onClick:f},[n("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[n("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[n("polygon",{fill:"#293040","fill-rule":"nonzero",points:"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"},null)])])]),n("button",{class:"devui-image-preview-arrow-left",onClick:a},[n("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[n("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[n("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),n("button",{class:"devui-image-preview-arrow-right",onClick:d},[n("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[n("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[n("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),n("div",{class:"devui-image-preview-toolbar"},[n("button",{onClick:m},[n("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[n("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[n("g",{fill:"#293040","fill-rule":"nonzero"},[n("path",{d:"M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z"},null)])])])]),n("button",{onClick:c},[n("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[n("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[n("g",{fill:"#293040","fill-rule":"nonzero"},[n("path",{d:"M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z"},null)])])])]),n("button",{onClick:L},[n("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[n("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[n("path",{d:"M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468 7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356 12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355 0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289 2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661 13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151 Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6 10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712 9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712 7.17157288,10 8,10 Z",fill:"#293040"},null)])])]),n("button",{onClick:a},[n("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[n("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[n("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),n("span",{class:"devui-image-preview-index"},[o.value+1,r(":"),t.previewUrlList.length]),n("button",{class:"devui-next",onClick:d},[n("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[n("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[n("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),n("button",{onClick:g},[n("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[n("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[n("path",{d:"M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275 L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914 L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16 L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994 L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914 L1.578,0.914 L5.011,4.348 L4.365,4.994 Z",fill:"#293040","fill-rule":"nonzero"},null)])])]),n("button",{onClick:p},[n("span",null,[r("1:1")])])])])}});class v{static open(t){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),function(t){return h(d,t)}(t).mount(this.$div),this.$body.style.setProperty("overflow","hidden","important")}static close(){var t;null==(t=this.$body)||t.style.setProperty("overflow",this.$overflow),this.$overflow=null,this.$div&&this.$body.removeChild(this.$div),this.$body=null,this.$div=null}}function f(t,e){v.open({url:t,previewUrlList:e})}function m(){v.close()}function c(t){return[...t.querySelectorAll("img")].map((t=>t.getAttribute("src")))}function L(t){t.addEventListener("click",(e=>{var o;e.stopPropagation();const i=e.target;if("img"===(null==(o=null==i?void 0:i.nodeName)?void 0:o.toLowerCase())){const e=c(t);f(i.getAttribute("src"),e)}}))}e(v,"$body",null),e(v,"$div",null),e(v,"$overflow","");var g={mounted(t,e){if(!e.value)return L(t);const{custom:o,disableDefault:i}=e.value;o instanceof Object&&(o.open=()=>{const e=c(t);f(null==e?void 0:e[0],e)},o.close=()=>m()),i||L(t)},unmounted(){m()}},p={title:"ImagePreview 图片预览",category:"数据展示",status:"已完成",install(t){t.directive("d-image-preview",g),t.config.globalProperties.$imagePreviewService=v}};export{g as ImagePreviewDirective,v as ImagePreviewService,p as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineComponent, ref, computed, onMounted, onUnmounted, createVNode, Fragment, createTextVNode, createApp } from "vue";
+var imagePreview$1 = "";
+const imagePreviewProps = {
+  url: {
+    type: String,
+    default: "",
+    required: true
+  },
+  previewUrlList: {
+    type: Array,
+    default: () => [],
+    required: true
+  },
+  zIndex: {
+    type: Number,
+    required: false
+  },
+  backDropZIndex: {
+    type: Number,
+    required: false
+  }
+};
+class Transform {
+  constructor(el, options = {}) {
+    __publicField(this, "el");
+    __publicField(this, "oTransformX", 0);
+    __publicField(this, "oTransformY", 0);
+    __publicField(this, "transformX");
+    __publicField(this, "transformY");
+    __publicField(this, "zoom");
+    __publicField(this, "rotate");
+    __publicField(this, "STEP", 0.25);
+    __publicField(this, "MIN_SCALE", 0.2);
+    __publicField(this, "MAX_SCALE", 2.5);
+    __publicField(this, "TRANSFORMX", 0);
+    __publicField(this, "TRANSFORMY", 0);
+    __publicField(this, "ZOOM", 1);
+    __publicField(this, "ROTATE", 0);
+    this.el = el;
+    this.transformX = options.transformX || this.TRANSFORMX;
+    this.transformY = options.transformY || this.TRANSFORMY;
+    this.zoom = options.zoom || this.ZOOM;
+    this.rotate = options.rotate || this.ROTATE;
+    this.handleDefaultDraggable();
+    this.onDraggable();
+    this.onMouseWheel();
+  }
+  handleDefaultDraggable() {
+    document.body.ondragstart = () => {
+      window.event.returnValue = false;
+      return false;
+    };
+  }
+  onDraggable() {
+    this.el.onmousedown = (e) => {
+      const ox = e.clientX;
+      const oy = e.clientY;
+      document.onmousemove = (e1) => {
+        const disX = e1.clientX - ox;
+        const disY = e1.clientY - oy;
+        this.transformX = this.oTransformX + disX;
+        this.transformY = this.oTransformY + disY;
+        this.el.style.cursor = "grabbing";
+        this.setPosition();
+      };
+    };
+    document.onmouseup = () => {
+      document.onmousemove = null;
+      this.oTransformX = this.transformX;
+      this.oTransformY = this.transformY;
+      this.el.style.cursor = "grab";
+    };
+  }
+  onMouseWheel() {
+    const handleWheel = this.throttle(this.setMouseWheel, 100);
+    this.el.onmousewheel = (e) => {
+      const value = -e.wheelDelta || e.deltaY || e.detail;
+      handleWheel(value);
+    };
+  }
+  throttle(fn, t) {
+    let timer = null;
+    return (...args) => {
+      if (!timer) {
+        setTimeout(() => {
+          timer = null;
+          fn.apply(this, args);
+        }, t);
+      }
+    };
+  }
+  setMouseWheel(value) {
+    if (value < 0) {
+      if (this.zoom >= this.MAX_SCALE) {
+        this.el.style.cursor = "not-allowed";
+        return;
+      }
+      this.el.style.cursor = "zoom-in";
+      this.setZoomIn(this.STEP);
+    } else {
+      if (this.zoom <= this.MIN_SCALE) {
+        this.el.style.cursor = "not-allowed";
+        return;
+      }
+      this.el.style.cursor = "zoom-out";
+      this.setZoomOut(this.STEP);
+    }
+    this.setPosition();
+  }
+  setZoomIn(step = this.STEP) {
+    this.zoom = Math.min(this.MAX_SCALE, this.zoom + step);
+    this.setPosition();
+  }
+  setZoomOut(step = this.STEP) {
+    this.zoom = Math.max(this.MIN_SCALE, this.zoom - step);
+    this.setPosition();
+  }
+  setZoomBest() {
+    this.reset();
+    this.setPosition();
+  }
+  setZoomOriginal() {
+    this.reset();
+    this.setPosition();
+  }
+  setRotate() {
+    this.rotate += 0.25;
+    this.setPosition();
+  }
+  reset() {
+    this.transformX = this.TRANSFORMX;
+    this.transformY = this.TRANSFORMY;
+    this.zoom = this.ZOOM;
+  }
+  setPosition() {
+    this.el.style.transform = `translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`;
+  }
+}
+var imagePreview = defineComponent({
+  name: "DImagePreview",
+  props: imagePreviewProps,
+  emits: [],
+  setup(props) {
+    let transform = null;
+    const index2 = ref(0);
+    const url = computed(() => props.previewUrlList[index2.value]);
+    const imageStyle = props.zIndex ? {
+      zIndex: props.zIndex
+    } : {};
+    const bgStyle = props.backDropZIndex ? {
+      zIndex: props.backDropZIndex
+    } : {};
+    function initTransform() {
+      const imageElement = document.querySelector(".devui-image-preview-main-image");
+      transform = new Transform(imageElement);
+    }
+    function initIndex() {
+      index2.value = props.previewUrlList.findIndex((curUrl) => curUrl === props.url);
+    }
+    function onPrev() {
+      index2.value = index2.value <= 0 ? props.previewUrlList.length - 1 : index2.value - 1;
+    }
+    function onNext() {
+      index2.value = index2.value >= props.previewUrlList.length - 1 ? 0 : index2.value + 1;
+    }
+    function onClose() {
+      ImagePreviewService.close();
+    }
+    function onZoomIn() {
+      transform.setZoomIn();
+    }
+    function onZoomOut() {
+      transform.setZoomOut();
+    }
+    function onRotate() {
+      transform.setRotate();
+    }
+    function onZoomBest() {
+      transform.setZoomBest();
+    }
+    function onZoomOriginal() {
+      transform.setZoomOriginal();
+    }
+    function onKeyDown(event) {
+      if (event.defaultPrevented)
+        return;
+      if (event.code == "Escape") {
+        onClose();
+      } else if (event.code == "ArrowLeft") {
+        onPrev();
+      } else if (event.code == "ArrowRight") {
+        onNext();
+      }
+    }
+    function initKeyboard() {
+      document.addEventListener("keydown", onKeyDown, false);
+    }
+    function unKeyBoard() {
+      document.removeEventListener("keydown", onKeyDown, false);
+    }
+    onMounted(() => {
+      initIndex();
+      initTransform();
+      initKeyboard();
+    });
+    onUnmounted(() => {
+      unKeyBoard();
+    });
+    return () => {
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": "devui-image-preview",
+        "style": imageStyle
+      }, [createVNode("img", {
+        "class": "devui-image-preview-main-image",
+        "src": url.value
+      }, null), createVNode("button", {
+        "class": "devui-image-preview-close-btn",
+        "onClick": onClose
+      }, [createVNode("svg", {
+        "width": "16px",
+        "height": "16px",
+        "viewBox": "0 0 16 16",
+        "version": "1.1"
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("polygon", {
+        "fill": "#293040",
+        "fill-rule": "nonzero",
+        "points": "8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"
+      }, null)])])]), createVNode("button", {
+        "class": "devui-image-preview-arrow-left",
+        "onClick": onPrev
+      }, [createVNode("svg", {
+        "width": "18px",
+        "height": "18px",
+        "viewBox": "0 0 16 16",
+        "version": "1.1"
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("polygon", {
+        "fill": "#293040",
+        "fill-rule": "nonzero",
+        "points": "10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"
+      }, null)])])]), createVNode("button", {
+        "class": "devui-image-preview-arrow-right",
+        "onClick": onNext
+      }, [createVNode("svg", {
+        "width": "18px",
+        "height": "18px",
+        "viewBox": "0 0 16 16",
+        "version": "1.1"
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("polygon", {
+        "fill": "#293040",
+        "fill-rule": "nonzero",
+        "transform": "translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",
+        "points": "11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
+      }, null)])])]), createVNode("div", {
+        "class": "devui-image-preview-toolbar"
+      }, [createVNode("button", {
+        "onClick": onZoomIn
+      }, [createVNode("svg", {
+        "width": "18px",
+        "height": "18px",
+        "viewBox": "0 0 16 16"
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("g", {
+        "fill": "#293040",
+        "fill-rule": "nonzero"
+      }, [createVNode("path", {
+        "d": "M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z"
+      }, null)])])])]), createVNode("button", {
+        "onClick": onZoomOut
+      }, [createVNode("svg", {
+        "width": "18px",
+        "height": "18px",
+        "viewBox": "0 0 16 16"
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("g", {
+        "fill": "#293040",
+        "fill-rule": "nonzero"
+      }, [createVNode("path", {
+        "d": "M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z"
+      }, null)])])])]), createVNode("button", {
+        "onClick": onRotate
+      }, [createVNode("svg", {
+        "width": "18px",
+        "height": "18px",
+        "viewBox": "0 0 16 16",
+        "version": "1.1"
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("path", {
+        "d": "M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468 7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356 12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355 0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289 2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661 13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151 Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6 10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712 9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712 7.17157288,10 8,10 Z",
+        "fill": "#293040"
+      }, null)])])]), createVNode("button", {
+        "onClick": onPrev
+      }, [createVNode("svg", {
+        "width": "16px",
+        "height": "16px",
+        "viewBox": "0 0 16 16",
+        "version": "1.1"
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("polygon", {
+        "fill": "#293040",
+        "fill-rule": "nonzero",
+        "points": "10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"
+      }, null)])])]), createVNode("span", {
+        "class": "devui-image-preview-index"
+      }, [index2.value + 1, createTextVNode(":"), props.previewUrlList.length]), createVNode("button", {
+        "class": "devui-next",
+        "onClick": onNext
+      }, [createVNode("svg", {
+        "width": "16px",
+        "height": "16px",
+        "viewBox": "0 0 16 16",
+        "version": "1.1"
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("polygon", {
+        "fill": "#293040",
+        "fill-rule": "nonzero",
+        "transform": "translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",
+        "points": "11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
+      }, null)])])]), createVNode("button", {
+        "onClick": onZoomBest
+      }, [createVNode("svg", {
+        "width": "18px",
+        "height": "18px",
+        "viewBox": "0 0 16 16"
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("path", {
+        "d": "M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275 L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914 L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16 L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994 L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914 L1.578,0.914 L5.011,4.348 L4.365,4.994 Z",
+        "fill": "#293040",
+        "fill-rule": "nonzero"
+      }, null)])])]), createVNode("button", {
+        "onClick": onZoomOriginal
+      }, [createVNode("span", null, [createTextVNode("1:1")])])])]), createVNode("div", {
+        "class": "devui-image-preview-bg",
+        "style": bgStyle
+      }, null)]);
+    };
+  }
+});
+function createComponent(props) {
+  return createApp(imagePreview, props);
+}
+class ImagePreviewService {
+  static open(props) {
+    this.$body = document.body;
+    this.$div = document.createElement("div");
+    this.$overflow = this.$body.style.overflow;
+    this.$body.appendChild(this.$div);
+    createComponent(props).mount(this.$div);
+    this.$body.style.setProperty("overflow", "hidden", "important");
+  }
+  static close() {
+    var _a;
+    (_a = this.$body) == null ? void 0 : _a.style.setProperty("overflow", this.$overflow);
+    this.$overflow = null;
+    this.$div && this.$body.removeChild(this.$div);
+    this.$body = null;
+    this.$div = null;
+  }
+}
+__publicField(ImagePreviewService, "$body", null);
+__publicField(ImagePreviewService, "$div", null);
+__publicField(ImagePreviewService, "$overflow", "");
+function mountedPreviewImages(props) {
+  ImagePreviewService.open({
+    url: props.url,
+    previewUrlList: props.previewUrlList,
+    zIndex: props.zIndex,
+    backDropZIndex: props.backDropZIndex
+  });
+}
+function unmountedPreviewImages() {
+  ImagePreviewService.close();
+}
+function getImgByEl(el) {
+  const urlList = [...el.querySelectorAll("img")].map((item) => item.getAttribute("src"));
+  return urlList;
+}
+function handleImgByEl(el) {
+  el.addEventListener("click", handleImg);
+}
+function removeHandle(el) {
+  el.removeEventListener("click", handleImg);
+}
+function handleImg(e) {
+  var _a;
+  e.stopPropagation();
+  const el = e.currentTarget;
+  const target = e.target;
+  if (((_a = target == null ? void 0 : target.nodeName) == null ? void 0 : _a.toLowerCase()) === "img") {
+    const urlList = getImgByEl(el);
+    const url = target.getAttribute("src");
+    mountedPreviewImages({
+      url,
+      previewUrlList: urlList,
+      zIndex: el == null ? void 0 : el.zIndex,
+      backDropZIndex: el == null ? void 0 : el.backDropZIndex
+    });
+  }
+}
+var ImagePreviewDirective = {
+  mounted(el, binding) {
+    if (!binding.value) {
+      return handleImgByEl(el);
+    }
+    const { custom, disableDefault } = binding.value;
+    if (custom instanceof Object) {
+      custom.open = () => {
+        const urlList = getImgByEl(el);
+        mountedPreviewImages({
+          url: urlList == null ? void 0 : urlList[0],
+          previewUrlList: urlList,
+          zIndex: el == null ? void 0 : el.zIndex,
+          backDropZIndex: el == null ? void 0 : el.backDropZIndex
+        });
+      };
+      custom.close = () => unmountedPreviewImages();
+    }
+    if (disableDefault) {
+      return;
+    }
+    handleImgByEl(el);
+  },
+  unmounted() {
+    unmountedPreviewImages();
+  },
+  updated(el, binding) {
+    var _a, _b;
+    el.zIndex = (_a = binding.value) == null ? void 0 : _a.zIndex;
+    el.backDropZIndex = (_b = binding.value) == null ? void 0 : _b.backDropZIndex;
+    if (binding.value) {
+      const {
+        value: { disableDefault },
+        oldValue: { disableDefault: oldDisableDefault }
+      } = binding;
+      if (disableDefault !== oldDisableDefault) {
+        if (disableDefault) {
+          removeHandle(el);
+        } else {
+          handleImgByEl(el);
+        }
+      }
+    }
+  }
+};
+var index = {
+  title: "ImagePreview \u56FE\u7247\u9884\u89C8",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.directive("d-image-preview", ImagePreviewDirective);
+    app.config.globalProperties.$imagePreviewService = ImagePreviewService;
+  }
+};
+export { ImagePreviewDirective, ImagePreviewService, index as default };

package/image-preview/index.umd.js

@@ -1 +1 @@
-var __defProp=Object.defineProperty,__defNormalProp=(e,t,o)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,__require="undefined"!=typeof require?require:e=>{throw new Error('Dynamic require of "'+e+'" is not supported')},__publicField=(e,t,o)=>(__defNormalProp(e,"symbol"!=typeof t?t+"":t,o),o);!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).index={},e.Vue)}(this,(function(e,t){"use strict";const o={url:{type:String,default:""},previewUrlList:{type:Array,default:()=>[]}};class i{constructor(e,t={}){__publicField(this,"el"),__publicField(this,"oTransformX",0),__publicField(this,"oTransformY",0),__publicField(this,"transformX"),__publicField(this,"transformY"),__publicField(this,"zoom"),__publicField(this,"rotate"),__publicField(this,"STEP",.25),__publicField(this,"MIN_SCALE",.2),__publicField(this,"MAX_SCALE",2.5),__publicField(this,"TRANSFORMX",0),__publicField(this,"TRANSFORMY",0),__publicField(this,"ZOOM",1),__publicField(this,"ROTATE",0),this.el=e,this.transformX=t.transformX||this.TRANSFORMX,this.transformY=t.transformY||this.TRANSFORMY,this.zoom=t.zoom||this.ZOOM,this.rotate=t.rotate||this.ROTATE,this.handleDefaultDraggable(),this.onDraggable(),this.onMouseWheel()}handleDefaultDraggable(){document.body.ondragstart=()=>(window.event.returnValue=!1,!1)}onDraggable(){this.el.onmousedown=e=>{const t=e.clientX,o=e.clientY;document.onmousemove=e=>{const i=e.clientX-t,l=e.clientY-o;this.transformX=this.oTransformX+i,this.transformY=this.oTransformY+l,this.el.style.cursor="grabbing",this.setPosition()}},document.onmouseup=()=>{document.onmousemove=null,this.oTransformX=this.transformX,this.oTransformY=this.transformY,this.el.style.cursor="grab"}}onMouseWheel(){const e=this.throttle(this.setMouseWheel,100);this.el.onmousewheel=t=>{const o=-t.wheelDelta||t.deltaY||t.detail;e(o)}}throttle(e,t){let o=null;return(...i)=>{o||setTimeout((()=>{o=null,e.apply(this,i)}),t)}}setMouseWheel(e){if(e<0){if(this.zoom>=this.MAX_SCALE)return void(this.el.style.cursor="not-allowed");this.el.style.cursor="zoom-in",this.setZoomIn(this.STEP)}else{if(this.zoom<=this.MIN_SCALE)return void(this.el.style.cursor="not-allowed");this.el.style.cursor="zoom-out",this.setZoomOut(this.STEP)}this.setPosition()}setZoomIn(e=this.STEP){this.zoom=Math.min(this.MAX_SCALE,this.zoom+e),this.setPosition()}setZoomOut(e=this.STEP){this.zoom=Math.max(this.MIN_SCALE,this.zoom-e),this.setPosition()}setZoomBest(){this.reset(),this.setPosition()}setZoomOriginal(){this.reset(),this.setPosition()}setRotate(){this.rotate+=.25,this.setPosition()}reset(){this.transformX=this.TRANSFORMX,this.transformY=this.TRANSFORMY,this.zoom=this.ZOOM}setPosition(){this.el.style.transform=`translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`}}var l=t.defineComponent({name:"DImagePreview",props:o,emits:[],setup(e){let o=null;const l=t.ref(0),s=t.computed((()=>e.previewUrlList[l.value]));function n(){l.value=l.value<=0?e.previewUrlList.length-1:l.value-1}function a(){l.value=l.value>=e.previewUrlList.length-1?0:l.value+1}function d(){r.close()}function u(){o.setZoomIn()}function c(){o.setZoomOut()}function h(){o.setRotate()}function f(){o.setZoomBest()}function v(){o.setZoomOriginal()}return t.onMounted((()=>{l.value=e.previewUrlList.findIndex((t=>t===e.url)),function(){const e=document.querySelector(".devui-image-preview-main-image");o=new i(e)}()})),()=>t.createVNode("div",{class:"devui-image-preview"},[t.createVNode("img",{class:"devui-image-preview-main-image",src:s.value},null),t.createVNode("button",{class:"devui-image-preview-close-btn",onClick:d},[t.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[t.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[t.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"},null)])])]),t.createVNode("button",{class:"devui-image-preview-arrow-left",onClick:n},[t.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[t.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[t.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),t.createVNode("button",{class:"devui-image-preview-arrow-right",onClick:a},[t.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[t.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[t.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),t.createVNode("div",{class:"devui-image-preview-toolbar"},[t.createVNode("button",{onClick:u},[t.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[t.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[t.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[t.createVNode("path",{d:"M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z"},null)])])])]),t.createVNode("button",{onClick:c},[t.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[t.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[t.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[t.createVNode("path",{d:"M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z"},null)])])])]),t.createVNode("button",{onClick:h},[t.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[t.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[t.createVNode("path",{d:"M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468 7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356 12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355 0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289 2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661 13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151 Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6 10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712 9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712 7.17157288,10 8,10 Z",fill:"#293040"},null)])])]),t.createVNode("button",{onClick:n},[t.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[t.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[t.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),t.createVNode("span",{class:"devui-image-preview-index"},[l.value+1,t.createTextVNode(":"),e.previewUrlList.length]),t.createVNode("button",{class:"devui-next",onClick:a},[t.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[t.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[t.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),t.createVNode("button",{onClick:f},[t.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[t.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[t.createVNode("path",{d:"M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275 L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914 L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16 L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994 L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914 L1.578,0.914 L5.011,4.348 L4.365,4.994 Z",fill:"#293040","fill-rule":"nonzero"},null)])])]),t.createVNode("button",{onClick:v},[t.createVNode("span",null,[t.createTextVNode("1:1")])])])])}});class r{static open(e){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),function(e){return t.createApp(l,e)}(e).mount(this.$div),this.$body.style.setProperty("overflow","hidden","important")}static close(){var e;null==(e=this.$body)||e.style.setProperty("overflow",this.$overflow),this.$overflow=null,this.$div&&this.$body.removeChild(this.$div),this.$body=null,this.$div=null}}function s(e,t){r.open({url:e,previewUrlList:t})}function n(){r.close()}function a(e){return[...e.querySelectorAll("img")].map((e=>e.getAttribute("src")))}function d(e){e.addEventListener("click",(t=>{var o;t.stopPropagation();const i=t.target;if("img"===(null==(o=null==i?void 0:i.nodeName)?void 0:o.toLowerCase())){const t=a(e);s(i.getAttribute("src"),t)}}))}__publicField(r,"$body",null),__publicField(r,"$div",null),__publicField(r,"$overflow","");var u={mounted(e,t){if(!t.value)return d(e);const{custom:o,disableDefault:i}=t.value;o instanceof Object&&(o.open=()=>{const t=a(e);s(null==t?void 0:t[0],t)},o.close=()=>n()),i||d(e)},unmounted(){n()}},c={title:"ImagePreview 图片预览",category:"数据展示",status:"已完成",install(e){e.directive("d-image-preview",u),e.config.globalProperties.$imagePreviewService=r}};e.ImagePreviewDirective=u,e.ImagePreviewService=r,e.default=c,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+var S=Object.defineProperty;var O=(r,e,u)=>e in r?S(r,e,{enumerable:!0,configurable:!0,writable:!0,value:u}):r[e]=u;var n=(r,e,u)=>(O(r,typeof e!="symbol"?e+"":e,u),u);(function(r,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis!="undefined"?globalThis:r||self,e(r.index={},r.Vue))})(this,function(r,e){"use strict";var u="";const y={url:{type:String,default:"",required:!0},previewUrlList:{type:Array,default:()=>[],required:!0},zIndex:{type:Number,required:!1},backDropZIndex:{type:Number,required:!1}};class b{constructor(o,i={}){n(this,"el");n(this,"oTransformX",0);n(this,"oTransformY",0);n(this,"transformX");n(this,"transformY");n(this,"zoom");n(this,"rotate");n(this,"STEP",.25);n(this,"MIN_SCALE",.2);n(this,"MAX_SCALE",2.5);n(this,"TRANSFORMX",0);n(this,"TRANSFORMY",0);n(this,"ZOOM",1);n(this,"ROTATE",0);this.el=o,this.transformX=i.transformX||this.TRANSFORMX,this.transformY=i.transformY||this.TRANSFORMY,this.zoom=i.zoom||this.ZOOM,this.rotate=i.rotate||this.ROTATE,this.handleDefaultDraggable(),this.onDraggable(),this.onMouseWheel()}handleDefaultDraggable(){document.body.ondragstart=()=>(window.event.returnValue=!1,!1)}onDraggable(){this.el.onmousedown=o=>{const i=o.clientX,s=o.clientY;document.onmousemove=l=>{const c=l.clientX-i,f=l.clientY-s;this.transformX=this.oTransformX+c,this.transformY=this.oTransformY+f,this.el.style.cursor="grabbing",this.setPosition()}},document.onmouseup=()=>{document.onmousemove=null,this.oTransformX=this.transformX,this.oTransformY=this.transformY,this.el.style.cursor="grab"}}onMouseWheel(){const o=this.throttle(this.setMouseWheel,100);this.el.onmousewheel=i=>{const s=-i.wheelDelta||i.deltaY||i.detail;o(s)}}throttle(o,i){let s=null;return(...l)=>{s||setTimeout(()=>{s=null,o.apply(this,l)},i)}}setMouseWheel(o){if(o<0){if(this.zoom>=this.MAX_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-in",this.setZoomIn(this.STEP)}else{if(this.zoom<=this.MIN_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-out",this.setZoomOut(this.STEP)}this.setPosition()}setZoomIn(o=this.STEP){this.zoom=Math.min(this.MAX_SCALE,this.zoom+o),this.setPosition()}setZoomOut(o=this.STEP){this.zoom=Math.max(this.MIN_SCALE,this.zoom-o),this.setPosition()}setZoomBest(){this.reset(),this.setPosition()}setZoomOriginal(){this.reset(),this.setPosition()}setRotate(){this.rotate+=.25,this.setPosition()}reset(){this.transformX=this.TRANSFORMX,this.transformY=this.TRANSFORMY,this.zoom=this.ZOOM}setPosition(){this.el.style.transform=`translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`}}var V=e.defineComponent({name:"DImagePreview",props:y,emits:[],setup(t){let o=null;const i=e.ref(0),s=e.computed(()=>t.previewUrlList[i.value]),l=t.zIndex?{zIndex:t.zIndex}:{},c=t.backDropZIndex?{zIndex:t.backDropZIndex}:{};function f(){const d=document.querySelector(".devui-image-preview-main-image");o=new b(d)}function M(){i.value=t.previewUrlList.findIndex(d=>d===t.url)}function m(){i.value=i.value<=0?t.previewUrlList.length-1:i.value-1}function g(){i.value=i.value>=t.previewUrlList.length-1?0:i.value+1}function N(){a.close()}function z(){o.setZoomIn()}function P(){o.setZoomOut()}function T(){o.setRotate()}function D(){o.setZoomBest()}function A(){o.setZoomOriginal()}function C(d){d.defaultPrevented||(d.code=="Escape"?N():d.code=="ArrowLeft"?m():d.code=="ArrowRight"&&g())}function $(){document.addEventListener("keydown",C,!1)}function E(){document.removeEventListener("keydown",C,!1)}return e.onMounted(()=>{M(),f(),$()}),e.onUnmounted(()=>{E()}),()=>e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"devui-image-preview",style:l},[e.createVNode("img",{class:"devui-image-preview-main-image",src:s.value},null),e.createVNode("button",{class:"devui-image-preview-close-btn",onClick:N},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"},null)])])]),e.createVNode("button",{class:"devui-image-preview-arrow-left",onClick:m},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("button",{class:"devui-image-preview-arrow-right",onClick:g},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("div",{class:"devui-image-preview-toolbar"},[e.createVNode("button",{onClick:z},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:"M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z"},null)])])])]),e.createVNode("button",{onClick:P},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:"M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z"},null)])])])]),e.createVNode("button",{onClick:T},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468 7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356 12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355 0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289 2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661 13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151 Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6 10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712 9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712 7.17157288,10 8,10 Z",fill:"#293040"},null)])])]),e.createVNode("button",{onClick:m},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("span",{class:"devui-image-preview-index"},[i.value+1,e.createTextVNode(":"),t.previewUrlList.length]),e.createVNode("button",{class:"devui-next",onClick:g},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("button",{onClick:D},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275 L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914 L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16 L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994 L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914 L1.578,0.914 L5.011,4.348 L4.365,4.994 Z",fill:"#293040","fill-rule":"nonzero"},null)])])]),e.createVNode("button",{onClick:A},[e.createVNode("span",null,[e.createTextVNode("1:1")])])])]),e.createVNode("div",{class:"devui-image-preview-bg",style:c},null)])}});function k(t){return e.createApp(V,t)}class a{static open(o){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),k(o).mount(this.$div),this.$body.style.setProperty("overflow","hidden","important")}static close(){var o;(o=this.$body)==null||o.style.setProperty("overflow",this.$overflow),this.$overflow=null,this.$div&&this.$body.removeChild(this.$div),this.$body=null,this.$div=null}}n(a,"$body",null),n(a,"$div",null),n(a,"$overflow","");function L(t){a.open({url:t.url,previewUrlList:t.previewUrlList,zIndex:t.zIndex,backDropZIndex:t.backDropZIndex})}function w(){a.close()}function v(t){return[...t.querySelectorAll("img")].map(i=>i.getAttribute("src"))}function h(t){t.addEventListener("click",p)}function I(t){t.removeEventListener("click",p)}function p(t){var s;t.stopPropagation();const o=t.currentTarget,i=t.target;if(((s=i==null?void 0:i.nodeName)==null?void 0:s.toLowerCase())==="img"){const l=v(o),c=i.getAttribute("src");L({url:c,previewUrlList:l,zIndex:o==null?void 0:o.zIndex,backDropZIndex:o==null?void 0:o.backDropZIndex})}}var x={mounted(t,o){if(!o.value)return h(t);const{custom:i,disableDefault:s}=o.value;i instanceof Object&&(i.open=()=>{const l=v(t);L({url:l==null?void 0:l[0],previewUrlList:l,zIndex:t==null?void 0:t.zIndex,backDropZIndex:t==null?void 0:t.backDropZIndex})},i.close=()=>w()),!s&&h(t)},unmounted(){w()},updated(t,o){var i,s;if(t.zIndex=(i=o.value)==null?void 0:i.zIndex,t.backDropZIndex=(s=o.value)==null?void 0:s.backDropZIndex,o.value){const{value:{disableDefault:l},oldValue:{disableDefault:c}}=o;l!==c&&(l?I(t):h(t))}}},Z={title:"ImagePreview \u56FE\u7247\u9884\u89C8",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.directive("d-image-preview",x),t.config.globalProperties.$imagePreviewService=a}};r.ImagePreviewDirective=x,r.ImagePreviewService=a,r.default=Z,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

package/image-preview/style.css

@@ -1 +1 @@
-.devui-image-preview{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1);background:var(--devui-shadow, rgba(0, 0, 0, .2));border-radius:var(--devui-border-radius, 2px);box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-shadow, rgba(0, 0, 0, .2));display:flex;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview svg,.devui-image-preview polygon,.devui-image-preview g,.devui-image-preview path{fill:var(--devui-icon-text, #252b3a)}.devui-image-preview-main-image{width:auto;height:auto;max-width:90%;max-height:90%;margin-top:-20px;cursor:grab}.devui-image-preview-close-btn{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview-close-btn:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-close-btn svg{width:38px;height:18px}.devui-image-preview-arrow-left{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;left:20px;transform:translateY(-50%)}.devui-image-preview-arrow-left:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-arrow-left svg{width:38px;height:18px}.devui-image-preview-arrow-right{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;right:20px;transform:translateY(-50%)}.devui-image-preview-arrow-right:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-arrow-right svg{width:38px;height:18px}.devui-image-preview-toolbar{position:fixed;bottom:0;left:0;width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1))}.devui-image-preview-toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #252b3a)}.devui-image-preview-toolbar .devui-image-preview-index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview-toolbar>:not(:first-child){margin-left:20px}
+.devui-image-preview{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-modal, 1050));display:flex;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview svg,.devui-image-preview polygon,.devui-image-preview g,.devui-image-preview path{fill:var(--devui-icon-text, #252b3a)}.devui-image-preview-main-image{width:auto;height:auto;max-width:90%;max-height:90%;margin-top:-20px;cursor:grab}.devui-image-preview-close-btn{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview-close-btn:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-close-btn svg{width:38px;height:18px}.devui-image-preview-arrow-left{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;left:20px;transform:translateY(-50%)}.devui-image-preview-arrow-left:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-arrow-left svg{width:38px;height:18px}.devui-image-preview-arrow-right{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;right:20px;transform:translateY(-50%)}.devui-image-preview-arrow-right:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-arrow-right svg{width:38px;height:18px}.devui-image-preview-toolbar{position:fixed;bottom:0;left:0;width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1))}.devui-image-preview-toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #252b3a)}.devui-image-preview-toolbar .devui-image-preview-index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview-toolbar>:not(:first-child){margin-left:20px}.devui-image-preview-bg{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1);background:var(--devui-shadow, rgba(0, 0, 0, .2));border-radius:var(--devui-border-radius, 2px);box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-shadow, rgba(0, 0, 0, .2))}

package/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/input/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;