| 1 |
- import{t as V,d as J,aB as H,z as F,r as Q,aq as ne,R as O,y as D,Z as X,a0 as le,c as v,a4 as N,aZ as T,aI as ce,L as re,an as ee,bp as j,bq as me,v as z,av as ve,w as M,O as p,u as G,W as ue,$ as ge,aN as de,at as fe,_ as he,E as we,am as Pe,P as xe,au as ye,a5 as Se,aR as Te}from"./index.5f7ffb46.js";import{a as Ce,S as Ie}from"./index.99e0cf1f.js";import{I as Ye}from"./index.276a5d68.js";const K=o=>Math.sqrt((o[0].clientX-o[1].clientX)**2+(o[0].clientY-o[1].clientY)**2),be=o=>({x:(o[0].clientX+o[1].clientX)/2,y:(o[0].clientY+o[1].clientY)/2}),B=V("image-preview")[1],U=2.6;var Xe=J({props:{src:String,show:Boolean,active:Number,minZoom:H(F),maxZoom:H(F),rootWidth:H(Number),rootHeight:H(Number),disableZoom:Boolean,closeOnClickOverlay:Boolean},emits:["scale","close","longPress"],setup(o,{emit:r,slots:f}){const e=Q({scale:1,moveX:0,moveY:0,moving:!1,zooming:!1,initializing:!1,imageRatio:0}),i=ne(),C=O(),R=O(),P=O(!1),u=O(!1);let x=0;const W=D(()=>{const{scale:a,moveX:t,moveY:s,moving:l,zooming:c,initializing:d}=e,k={transitionDuration:c||l||d?"0s":".3s"};return(a!==1||u.value)&&(k.transform=`matrix(${a}, 0, 0, ${a}, ${t}, ${s})`),k}),m=D(()=>{if(e.imageRatio){const{rootWidth:a,rootHeight:t}=o,s=P.value?t/e.imageRatio:a;return Math.max(0,(e.scale*s-a)/2)}return 0}),h=D(()=>{if(e.imageRatio){const{rootWidth:a,rootHeight:t}=o,s=P.value?t:a*e.imageRatio;return Math.max(0,(e.scale*s-t)/2)}return 0}),I=(a,t)=>{var s;if(a=T(a,+o.minZoom,+o.maxZoom+1),a!==e.scale){const l=a/e.scale;if(e.scale=a,t){const c=ee((s=C.value)==null?void 0:s.$el),d={x:c.width*.5,y:c.height*.5},k=e.moveX-(t.x-c.left-d.x)*(l-1),se=e.moveY-(t.y-c.top-d.y)*(l-1);e.moveX=T(k,-m.value,m.value),e.moveY=T(se,-h.value,h.value)}else e.moveX=0,e.moveY=u.value?x:0;r("scale",{scale:a,index:o.active})}},Y=()=>{I(1)},_=()=>{const a=e.scale>1?1:2;I(a,a===2||u.value?{x:i.startX.value,y:i.startY.value}:void 0)};let y,S,n,g,w,$,Z,L,E=!1;const oe=a=>{const{touches:t}=a;if(y=t.length,y===2&&o.disableZoom)return;const{offsetX:s}=i;i.start(a),S=e.moveX,n=e.moveY,L=Date.now(),E=!1,e.moving=y===1&&(e.scale!==1||u.value),e.zooming=y===2&&!s.value,e.zooming&&(g=e.scale,w=K(t))},ae=a=>{const{touches:t}=a;if(i.move(a),e.moving){const{deltaX:s,deltaY:l}=i,c=s.value+S,d=l.value+n;if((c>m.value||c<-m.value)&&!E&&i.isHorizontal()){e.moving=!1;return}E=!0,N(a,!0),e.moveX=T(c,-m.value,m.value),e.moveY=T(d,-h.value,h.value)}if(e.zooming&&(N(a,!0),t.length===2)){const s=K(t),l=g*s/w;$=be(t),I(l,$)}},te=a=>{var t;if(y>1)return;const{offsetX:s,offsetY:l}=i,c=Date.now()-L,d=250;if(s.value<j&&l.value<j)if(c<d)if(Z)clearTimeout(Z),Z=null,_();else{if(!o.closeOnClickOverlay&&a.target===((t=R.value)==null?void 0:t.$el))return;Z=setTimeout(()=>{r("close"),Z=null},d)}else c>me&&r("longPress")},A=a=>{let t=!1;if((e.moving||e.zooming)&&(t=!0,e.moving&&S===e.moveX&&n===e.moveY&&(t=!1),!a.touches.length)){e.zooming&&(e.moveX=T(e.moveX,-m.value,m.value),e.moveY=T(e.moveY,-h.value,h.value),e.zooming=!1),e.moving=!1,S=0,n=0,g=1,e.scale<1&&Y();const s=+o.maxZoom;e.scale>s&&I(s,$)}N(a,t),te(a),i.reset()},q=()=>{const{rootWidth:a,rootHeight:t}=o,s=t/a,{imageRatio:l}=e;P.value=e.imageRatio>s&&l<U,u.value=e.imageRatio>s&&l>=U,u.value&&(x=(l*a-t)/2,e.moveY=x,e.initializing=!0,ce(()=>{e.initializing=!1})),Y()},ie=a=>{const{naturalWidth:t,naturalHeight:s}=a.target;e.imageRatio=s/t,q()};return X(()=>o.active,Y),X(()=>o.show,a=>{a||Y()}),X(()=>[o.rootWidth,o.rootHeight],q),le("touchmove",ae,{target:D(()=>{var a;return(a=R.value)==null?void 0:a.$el})}),()=>{const a={loading:()=>v(re,{type:"spinner"},null)};return v(Ce,{ref:R,class:B("swipe-item"),onTouchstartPassive:oe,onTouchend:A,onTouchcancel:A},{default:()=>[f.image?v("div",{class:B("image-wrap")},[f.image({src:o.src})]):v(Ye,{ref:C,src:o.src,fit:"contain",class:B("image",{vertical:P.value}),style:W.value,onLoad:ie},a)]})}}});const[Re,b]=V("image-preview"),Ze=["show","teleport","transition","overlayStyle","closeOnPopstate"],ze={show:Boolean,loop:z,images:ve(),minZoom:M(1/3),maxZoom:M(3),overlay:z,closeable:Boolean,showIndex:z,className:p,closeIcon:G("clear"),transition:String,beforeClose:Function,overlayClass:p,overlayStyle:Object,swipeDuration:M(300),startPosition:M(0),showIndicators:Boolean,closeOnPopstate:z,closeOnClickOverlay:z,closeIconPosition:G("top-right"),teleport:[String,Object]};var De=J({name:Re,props:ze,emits:["scale","close","closed","change","longPress","update:show"],setup(o,{emit:r,slots:f}){const e=O(),i=Q({active:0,rootWidth:0,rootHeight:0,disableZoom:!1}),C=()=>{if(e.value){const n=ee(e.value.$el);i.rootWidth=n.width,i.rootHeight=n.height,e.value.resize()}},R=n=>r("scale",n),P=n=>r("update:show",n),u=()=>{Te(o.beforeClose,{args:[i.active],done:()=>P(!1)})},x=n=>{n!==i.active&&(i.active=n,r("change",n))},W=()=>{if(o.showIndex)return v("div",{class:b("index")},[f.index?f.index({index:i.active}):`${i.active+1} / ${o.images.length}`])},m=()=>{if(f.cover)return v("div",{class:b("cover")},[f.cover()])},h=()=>{i.disableZoom=!0},I=()=>{i.disableZoom=!1},Y=()=>v(Ie,{ref:e,lazyRender:!0,loop:o.loop,class:b("swipe"),duration:o.swipeDuration,initialSwipe:o.startPosition,showIndicators:o.showIndicators,indicatorColor:"white",onChange:x,onDragEnd:I,onDragStart:h},{default:()=>[o.images.map((n,g)=>v(Xe,{src:n,show:o.show,active:i.active,maxZoom:o.maxZoom,minZoom:o.minZoom,rootWidth:i.rootWidth,rootHeight:i.rootHeight,disableZoom:i.disableZoom,closeOnClickOverlay:o.closeOnClickOverlay,onScale:R,onClose:u,onLongPress:()=>r("longPress",{index:g})},{image:f.image}))]}),_=()=>{if(o.closeable)return v(Se,{role:"button",name:o.closeIcon,class:[b("close-icon",o.closeIconPosition),ye],onClick:u},null)},y=()=>r("closed"),S=(n,g)=>{var w;return(w=e.value)==null?void 0:w.swipeTo(n,g)};return ue({swipeTo:S}),ge(C),X([de,fe],C),X(()=>o.startPosition,n=>x(+n)),X(()=>o.show,n=>{const{images:g,startPosition:w}=o;n?(x(+w),he(()=>{C(),S(+w,{immediate:!0})})):r("close",{index:i.active,url:g[i.active]})}),()=>v(xe,we({class:[b(),o.className],overlayClass:[b("overlay"),o.overlayClass],onClosed:y,"onUpdate:show":P},Pe(o,Ze)),{default:()=>[_(),Y(),W(),m()]})}});export{De as s};
|
