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