vue-devui/image-preview/index.umd.js

DevUI components based on Vite and Vue3

(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("clipboard")):typeof define=="function"&&define.amd?define(["exports","vue","clipboard"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue))})(this,function(s,e){"use strict";const g={url:{type:String,default:"",required:!0},previewUrlList:{type:Array,default:()=>[],required:!0},zIndex:{type:Number,required:!1},backDropZIndex:{type:Number,required:!1}};class I{constructor(t,r={}){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=t,this.transformX=r.transformX||this.TRANSFORMX,this.transformY=r.transformY||this.TRANSFORMY,this.zoom=r.zoom||this.ZOOM,this.rotate=r.rotate||this.ROTATE,this.handleDefaultDraggable(),this.onDraggable(),this.onMouseWheel()}handleDefaultDraggable(){document.body.ondragstart=()=>(window.event.returnValue=!1,!1)}onDraggable(){this.el.onmousedown=t=>{const r=t.clientX,n=t.clientY;document.onmousemove=i=>{const a=i.clientX-r,u=i.clientY-n;this.transformX=this.oTransformX+a,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 t=this.throttle(this.setMouseWheel,100);this.el.onmousewheel=r=>{const n=-r.wheelDelta||r.deltaY||r.detail;t(n)}}throttle(t,r){let n=null;return(...i)=>{n||setTimeout(()=>{n=null,t.apply(this,i)},r)}}setMouseWheel(t){if(t<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(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.oTransformX=this.transformX,this.oTransformY=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(o,t,r){let n=o;return t&&(n+=`__${t}`),r&&(n+=`--${r}`),n}function k(o,t=!1){const r=t?`.devui-${o}`:`devui-${o}`;return{b:()=>h(r),e:l=>l?h(r,l):"",m:l=>l?h(r,"",l):"",em:(l,f)=>l&&f?h(r,l,f):""}}var O="",Z=e.defineComponent({name:"DImagePreview",props:g,emits:[],setup(o){const t=k("image-preview");let r=null;const n=e.ref(0),i=e.computed(()=>o.previewUrlList[n.value]),a=o.zIndex?{zIndex:o.zIndex}:{},u=o.backDropZIndex?{zIndex:o.backDropZIndex}:{};function l(){const c=document.querySelector(`.${t.e("main-image")}`);r=new I(c)}function f(){n.value=o.previewUrlList.findIndex(c=>c===o.url)}function L(){n.value=n.value<=0?o.previewUrlList.length-1:n.value-1}function w(){n.value=n.value>=o.previewUrlList.length-1?0:n.value+1}function y(){d.close()}function z(){r.setZoomIn()}function T(){r.setZoomOut()}function $(){r.setRotate()}function D(){r.setZoomBest()}function S(){r.setZoomOriginal()}function V(c){c.defaultPrevented||(c.code==="Escape"?y():c.code==="ArrowLeft"?L():c.code==="ArrowRight"&&w())}function A(){document.addEventListener("keydown",V,!1)}function E(){document.removeEventListener("keydown",V,!1)}return e.onMounted(()=>{f(),l(),A()}),e.onUnmounted(()=>{E()}),()=>e.createVNode(e.Fragment,null,[e.createVNode("div",{class:t.b(),style:a},[e.createVNode("img",{class:t.e("main-image"),src:i.value},null),e.createVNode("button",{class:t.e("close-btn"),onClick:y},[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:t.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:t.e("arrow-right"),onClick:w},[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:t.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:t.e("index")},[n.value+1,e.createTextVNode(":"),o.previewUrlList.length]),e.createVNode("button",{onClick:w},[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:t.e("bg"),style:u},null)])}});function b(o){return e.createApp(Z,o)}class d{static open(t){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),b(t).mount(this.$div),this.$body.style.setProperty("overflow","hidden","important")}static close(){var t,r;(t=this.$body)==null||t.style.setProperty("overflow",this.$overflow),this.$overflow=null,this.$div&&((r=this.$body)==null||r.removeChild(this.$div)),this.$body=null,this.$div=null}}d.$body=null,d.$div=null,d.$overflow="";function p(o){d.open({url:o.url,previewUrlList:o.previewUrlList,zIndex:o.zIndex,backDropZIndex:o.backDropZIndex})}function v(){d.close()}function x(o){return[...o.querySelectorAll("img")].map(r=>r.getAttribute("src"))}function N(o){var n;const t=o.currentTarget,r=o.target;if(((n=r==null?void 0:r.nodeName)==null?void 0:n.toLowerCase())==="img"){const i=x(t),a=r.getAttribute("src");if(!a)return console.error("attribute is not exist");p({url:a,previewUrlList:i,zIndex:t==null?void 0:t.zIndex,backDropZIndex:t==null?void 0:t.backDropZIndex})}}function m(o){o.addEventListener("click",N)}function M(o){o.removeEventListener("click",N)}var C={mounted(o,t){if(!(t!=null&&t.value))return m(o);const{custom:r,disableDefault:n}=t.value;r instanceof Object&&(r.open=()=>{const i=x(o);p({url:i==null?void 0:i[0],previewUrlList:i,zIndex:o==null?void 0:o.zIndex,backDropZIndex:o==null?void 0:o.backDropZIndex})},r.close=()=>v()),!n&&m(o)},unmounted(){v()},updated(o,t){var r,n;if(o.zIndex=(r=t==null?void 0:t.value)==null?void 0:r.zIndex,o.backDropZIndex=(n=t==null?void 0:t.value)==null?void 0:n.backDropZIndex,t!=null&&t.value){const{value:{disableDefault:i},oldValue:{disableDefault:a}}=t;i!==a&&(i?M(o):m(o))}}},P={title:"ImagePreview \u56FE\u7247\u9884\u89C8",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(o){o.directive("d-image-preview",C),o.config.globalProperties.$imagePreviewService=d}};s.ImagePreviewDirective=C,s.ImagePreviewService=d,s.default=P,s.imagePreviewProps=g,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});