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