vue-devui 1.0.0-alpha.1 → 1.0.0-alpha.10

package/image-preview/index.es.js

@@ -1 +1,511 @@
-var e=Object.defineProperty,t=("undefined"!=typeof require&&require,(t,o,i)=>(((t,o,i)=>{o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[o]=i})(t,"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(e,o={}){t(this,"el"),t(this,"oTransformX",0),t(this,"oTransformY",0),t(this,"transformX"),t(this,"transformY"),t(this,"zoom"),t(this,"rotate"),t(this,"STEP",.25),t(this,"MIN_SCALE",.2),t(this,"MAX_SCALE",2.5),t(this,"TRANSFORMX",0),t(this,"TRANSFORMY",0),t(this,"ZOOM",1),t(this,"ROTATE",0),this.el=e,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=e=>{const t=e.clientX,o=e.clientY;document.onmousemove=e=>{const i=e.clientX-t,s=e.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 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 d=o({name:"DImagePreview",props:a,emits:[],setup(e){let t=null;const o=i(0),h=s((()=>e.previewUrlList[o.value]));function a(){o.value=o.value<=0?e.previewUrlList.length-1:o.value-1}function d(){o.value=o.value>=e.previewUrlList.length-1?0:o.value+1}function f(){v.close()}function m(){t.setZoomIn()}function c(){t.setZoomOut()}function L(){t.setRotate()}function g(){t.setZoomBest()}function p(){t.setZoomOriginal()}return l((()=>{o.value=e.previewUrlList.findIndex((t=>t===e.url)),function(){const e=document.querySelector(".devui-image-preview-main-image");t=new u(e)}()})),()=>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(":"),e.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(e){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),function(e){return h(d,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 f(e,t){v.open({url:e,previewUrlList:t})}function m(){v.close()}function c(e){return[...e.querySelectorAll("img")].map((e=>e.getAttribute("src")))}function L(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=c(e);f(i.getAttribute("src"),t)}}))}t(v,"$body",null),t(v,"$div",null),t(v,"$overflow","");var g={mounted(e,t){if(!t.value)return L(e);const{custom:o,disableDefault:i}=t.value;o instanceof Object&&(o.open=()=>{const t=c(e);f(null==t?void 0:t[0],t)},o.close=()=>m()),i||L(e)},unmounted(){m()}},p={title:"ImagePreview 图片预览",category:"数据展示",install(e){e.directive("d-image-preview",g),e.config.globalProperties.$imagePreviewService=v}};export{g as ImagePreviewDirective,v as ImagePreviewService,p as default};
+import { defineComponent, ref, computed, onMounted, onUnmounted, createVNode, Fragment, createTextVNode, createApp } from "vue";
+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 = {}) {
+    this.oTransformX = 0;
+    this.oTransformY = 0;
+    this.STEP = 0.25;
+    this.MIN_SCALE = 0.2;
+    this.MAX_SCALE = 2.5;
+    this.TRANSFORMX = 0;
+    this.TRANSFORMY = 0;
+    this.ZOOM = 1;
+    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)`;
+  }
+}
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var imagePreview$1 = "";
+var imagePreview = defineComponent({
+  name: "DImagePreview",
+  props: imagePreviewProps,
+  emits: [],
+  setup(props) {
+    const ns = useNamespace("image-preview");
+    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(`.${ns.e("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": ns.b(),
+        "style": imageStyle
+      }, [createVNode("img", {
+        "class": ns.e("main-image"),
+        "src": url.value
+      }, null), createVNode("button", {
+        "class": ns.e("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": ns.e("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": ns.e("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": ns.e("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": ns.e("index")
+      }, [index2.value + 1, createTextVNode(":"), props.previewUrlList.length]), createVNode("button", {
+        "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": ns.e("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;
+  }
+}
+ImagePreviewService.$body = null;
+ImagePreviewService.$div = null;
+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 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
+    });
+  }
+}
+function handleImgByEl(el) {
+  el.addEventListener("click", handleImg);
+}
+function removeHandle(el) {
+  el.removeEventListener("click", handleImg);
+}
+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, imagePreviewProps };

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:"数据展示",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"}));
+(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue))})(this,function(s,e){"use strict";const w={url:{type:String,default:"",required:!0},previewUrlList:{type:Array,default:()=>[],required:!0},zIndex:{type:Number,required:!1},backDropZIndex:{type:Number,required:!1}};class V{constructor(o,n={}){this.oTransformX=0,this.oTransformY=0,this.STEP=.25,this.MIN_SCALE=.2,this.MAX_SCALE=2.5,this.TRANSFORMX=0,this.TRANSFORMY=0,this.ZOOM=1,this.ROTATE=0,this.el=o,this.transformX=n.transformX||this.TRANSFORMX,this.transformY=n.transformY||this.TRANSFORMY,this.zoom=n.zoom||this.ZOOM,this.rotate=n.rotate||this.ROTATE,this.handleDefaultDraggable(),this.onDraggable(),this.onMouseWheel()}handleDefaultDraggable(){document.body.ondragstart=()=>(window.event.returnValue=!1,!1)}onDraggable(){this.el.onmousedown=o=>{const n=o.clientX,i=o.clientY;document.onmousemove=r=>{const d=r.clientX-n,u=r.clientY-i;this.transformX=this.oTransformX+d,this.transformY=this.oTransformY+u,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=n=>{const i=-n.wheelDelta||n.deltaY||n.detail;o(i)}}throttle(o,n){let i=null;return(...r)=>{i||setTimeout(()=>{i=null,o.apply(this,r)},n)}}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)`}}function h(t,o,n){let i=t;return o&&(i+=`__${o}`),n&&(i+=`--${n}`),i}function I(t,o=!1){const n=o?`.devui-${t}`:`devui-${t}`;return{b:()=>h(n),e:l=>l?h(n,l):"",m:l=>l?h(n,"",l):"",em:(l,f)=>l&&f?h(n,l,f):""}}var O="",k=e.defineComponent({name:"DImagePreview",props:w,emits:[],setup(t){const o=I("image-preview");let n=null;const i=e.ref(0),r=e.computed(()=>t.previewUrlList[i.value]),d=t.zIndex?{zIndex:t.zIndex}:{},u=t.backDropZIndex?{zIndex:t.backDropZIndex}:{};function l(){const c=document.querySelector(`.${o.e("main-image")}`);n=new V(c)}function f(){i.value=t.previewUrlList.findIndex(c=>c===t.url)}function L(){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 b(){a.close()}function z(){n.setZoomIn()}function T(){n.setZoomOut()}function $(){n.setRotate()}function D(){n.setZoomBest()}function S(){n.setZoomOriginal()}function y(c){c.defaultPrevented||(c.code==="Escape"?b():c.code==="ArrowLeft"?L():c.code==="ArrowRight"&&g())}function A(){document.addEventListener("keydown",y,!1)}function E(){document.removeEventListener("keydown",y,!1)}return e.onMounted(()=>{f(),l(),A()}),e.onUnmounted(()=>{E()}),()=>e.createVNode(e.Fragment,null,[e.createVNode("div",{class:o.b(),style:d},[e.createVNode("img",{class:o.e("main-image"),src:r.value},null),e.createVNode("button",{class:o.e("close-btn"),onClick:b},[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:o.e("arrow-left"),onClick:L},[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:o.e("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:o.e("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:T},[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:$},[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:L},[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:o.e("index")},[i.value+1,e.createTextVNode(":"),t.previewUrlList.length]),e.createVNode("button",{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:S},[e.createVNode("span",null,[e.createTextVNode("1:1")])])])]),e.createVNode("div",{class:o.e("bg"),style:u},null)])}});function Z(t){return e.createApp(k,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),Z(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}}a.$body=null,a.$div=null,a.$overflow="";function p(t){a.open({url:t.url,previewUrlList:t.previewUrlList,zIndex:t.zIndex,backDropZIndex:t.backDropZIndex})}function v(){a.close()}function x(t){return[...t.querySelectorAll("img")].map(n=>n.getAttribute("src"))}function N(t){var i;t.stopPropagation();const o=t.currentTarget,n=t.target;if(((i=n==null?void 0:n.nodeName)==null?void 0:i.toLowerCase())==="img"){const r=x(o),d=n.getAttribute("src");p({url:d,previewUrlList:r,zIndex:o==null?void 0:o.zIndex,backDropZIndex:o==null?void 0:o.backDropZIndex})}}function m(t){t.addEventListener("click",N)}function M(t){t.removeEventListener("click",N)}var C={mounted(t,o){if(!o.value)return m(t);const{custom:n,disableDefault:i}=o.value;n instanceof Object&&(n.open=()=>{const r=x(t);p({url:r==null?void 0:r[0],previewUrlList:r,zIndex:t==null?void 0:t.zIndex,backDropZIndex:t==null?void 0:t.backDropZIndex})},n.close=()=>v()),!i&&m(t)},unmounted(){v()},updated(t,o){var n,i;if(t.zIndex=(n=o.value)==null?void 0:n.zIndex,t.backDropZIndex=(i=o.value)==null?void 0:i.backDropZIndex,o.value){const{value:{disableDefault:r},oldValue:{disableDefault:d}}=o;r!==d&&(r?M(t):m(t))}}},P={title:"ImagePreview \u56FE\u7247\u9884\u89C8",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.directive("d-image-preview",C),t.config.globalProperties.$imagePreviewService=a}};s.ImagePreviewDirective=C,s.ImagePreviewService=a,s.default=P,s.imagePreviewProps=w,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"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, #71757f)}.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%;border:none;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(37, 43, 58, .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%;border:none;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(37, 43, 58, .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%;border:none;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(37, 43, 58, .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-length-fullscreen-overlay, 0 12px 24px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1))}.devui-image-preview__toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #252b3a);border:none;background-color:transparent;cursor:pointer;outline:0;padding:0}.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(37, 43, 58, .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;