| 1 |
- import{c as V,d as J,bb as D,n as j,x as ee,u as re,r as R,e as p,w as X,_ as me,a as r,p as A,a0 as I,aB as ue,L as ve,$ as oe,bQ as q,bR as ge,t as M,ac as de,b as W,a6 as U,m as G,Z as fe,y as he,bH as we,bI as Pe,z as xe,h as te,af as be,R as Ie,H as Se,I as ye,a1 as Ce,aw as Te,ad as Ye,bS as Xe,bT as Ze,k as Re}from"./index-869d77fb.js";import{a as ze,S as He}from"./index-d45dfe1a.js";import{I as De}from"./index-e76f2a88.js";const K=o=>Math.sqrt((o[0].clientX-o[1].clientX)**2+(o[0].clientY-o[1].clientY)**2),pe=o=>({x:(o[0].clientX+o[1].clientX)/2,y:(o[0].clientY+o[1].clientY)/2}),B=V("image-preview")[1],Q=2.6;var Me=J({props:{src:String,show:Boolean,active:Number,minZoom:D(j),maxZoom:D(j),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(),S=R(),z=R(),w=R(!1),g=R(!1);let P=0;const $=p(()=>{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=p(()=>{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=p(()=>{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=I(t,+o.minZoom,+o.maxZoom+1),t!==e.scale){const l=t/e.scale;if(e.scale=t,a){const v=oe((i=S.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=I(H,-u.value,u.value),e.moveY=I(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)},E=()=>{const t=e.scale>1?1:2;y(t,t===2||g.value?{x:s.startX.value,y:s.startY.value}:void 0)};let x,b,n,d,h,N,Z,L,k=!1;const se=t=>{const{touches:a}=t;if(x=a.length,x===2&&o.disableZoom)return;const{offsetX:i}=s;s.start(t),b=e.moveX,n=e.moveY,L=Date.now(),k=!1,e.moving=x===1&&(e.scale!==1||g.value),e.zooming=x===2&&!i.value,e.zooming&&(d=e.scale,h=K(a))},ie=t=>{const{touches:a}=t;if(s.move(t),e.moving){const{deltaX:i,deltaY:l}=s,v=i.value+b,T=l.value+n;if((v>u.value||v<-u.value)&&!k&&s.isHorizontal()){e.moving=!1;return}k=!0,A(t,!0),e.moveX=I(v,-u.value,u.value),e.moveY=I(T,-f.value,f.value)}if(e.zooming&&(A(t,!0),a.length===2)){const i=K(a),l=d*i/h;N=pe(a),y(l,N)}},ne=()=>{if(x>1)return;const{offsetX:t,offsetY:a}=s,i=Date.now()-L,l=250;t.value<q&&a.value<q&&(i<l?Z?(clearTimeout(Z),Z=null,E()):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&&b===e.moveX&&n===e.moveY&&(a=!1),!t.touches.length)){e.zooming&&(e.moveX=I(e.moveX,-u.value,u.value),e.moveY=I(e.moveY,-f.value,f.value),e.zooming=!1),e.moving=!1,b=0,n=0,d=1,e.scale<1&&C();const i=+o.maxZoom;e.scale>i&&y(i,N)}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<Q,g.value=e.imageRatio>i&&l>=Q,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 X(()=>o.active,C),X(()=>o.show,t=>{t||C()}),X(()=>[o.rootWidth,o.rootHeight],F),me("touchmove",ie,{target:p(()=>{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:B("swipe-item"),onTouchstartPassive:se,onTouchend:O,onTouchcancel:O},{default:()=>[m.image?r("div",{class:B("image-wrap")},[m.image({src:o.src})]):r(De,{ref:S,src:o.src,fit:"contain",class:B("image",{vertical:w.value}),style:$.value,onLoad:le},t)]})}}});const[We,Y]=V("image-preview"),_e=["show","teleport","transition","overlayStyle","closeOnPopstate"],$e={show:Boolean,loop:M,images:de(),minZoom:W(1/3),maxZoom:W(3),overlay:M,closeable:Boolean,showIndex:M,className:U,closeIcon:G("clear"),transition:String,beforeClose:Function,overlayClass:U,overlayStyle:Object,swipeDuration:W(300),startPosition:W(0),showIndicators:Boolean,closeOnPopstate:M,closeIconPosition:G("top-right"),teleport:[String,Object]};var ae=J({name:We,props:$e,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}),S=()=>{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))},$=()=>{if(o.showIndex)return r("div",{class:Y("index")},[m.index?m.index({index:s.active}):`${s.active+1} / ${o.images.length}`])},u=()=>{if(m.cover)return r("div",{class:Y("cover")},[m.cover()])},f=()=>{s.disableZoom=!0},y=()=>{s.disableZoom=!1},C=()=>r(He,{ref:e,lazyRender:!0,loop:o.loop,class:Y("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(Me,{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}))]}),E=()=>{if(o.closeable)return r(ye,{role:"button",name:o.closeIcon,class:[Y("close-icon",o.closeIconPosition),Se],onClick:g},null)},x=()=>c("closed"),b=(n,d)=>{var h;return(h=e.value)==null?void 0:h.swipeTo(n,d)};return fe({swipeTo:b}),he(S),X([we,Pe],S),X(()=>o.startPosition,n=>P(+n)),X(()=>o.show,n=>{const{images:d,startPosition:h}=o;n?(P(+h),xe(()=>{S(),b(+h,{immediate:!0})})):c("close",{index:s.active,url:d[s.active]})}),()=>r(Ie,te({class:[Y(),o.className],overlayClass:[Y("overlay"),o.overlayClass],onClosed:x,"onUpdate:show":w},be(o,_e)),{default:()=>[E(),C(),$(),u()]})}});let _;const Ee={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 Ne(){({instance:_}=Xe({setup(){const{state:o,toggle:c}=Ze(),m=()=>{o.images=[]};return()=>r(ae,te(o,{onClosed:m,"onUpdate:show":c}),null)}}))}const Le=(o,c=0)=>{if(Te)return _||Ne(),o=Array.isArray(o)?{images:o,startPosition:c}:o,_.open(Ye({},Ee,o)),_};Re(ae);export{Le as s};
|
