| 1 |
- import{x as O,d as _,as as Y,y as M,N as F,ad as J,Q as Z,Z as X,i as r,al as $,an as p,aP as G,z,aT as ee,a6 as H,A as k,W as A,O as oe,af as te,P as ae,ag as se,ah as ne,S as ie,a3 as L,aw as ce,aQ as le,T as re,aV as me,J as ue,ax as ve,$ as de,E as ge,K as he,bn as fe,bo as we}from"./index.7bb55078.js";import{a as xe,S as Pe}from"./index.a5a8c52d.js";import{I as Ce}from"./index.749e125e.js";const E=o=>Math.sqrt((o[0].clientX-o[1].clientX)**2+(o[0].clientY-o[1].clientY)**2),B=O("image-preview")[1];var ye=_({props:{src:String,show:Boolean,active:Number,minZoom:Y(M),maxZoom:Y(M),rootWidth:Y(Number),rootHeight:Y(Number)},emits:["scale","close"],setup(o,{emit:c}){const e=F({scale:1,moveX:0,moveY:0,moving:!1,zooming:!1,imageRatio:0,displayWidth:0,displayHeight:0}),l=J(),i=Z(()=>{const{rootWidth:t,rootHeight:s}=o,n=s/t;return e.imageRatio>n}),I=Z(()=>{const{scale:t,moveX:s,moveY:n,moving:m,zooming:C}=e,b={transitionDuration:C||m?"0s":".3s"};if(t!==1){const V=s/t,j=n/t;b.transform=`scale(${t}, ${t}) translate(${V}px, ${j}px)`}return b}),g=Z(()=>{if(e.imageRatio){const{rootWidth:t,rootHeight:s}=o,n=i.value?s/e.imageRatio:t;return Math.max(0,(e.scale*n-t)/2)}return 0}),u=Z(()=>{if(e.imageRatio){const{rootWidth:t,rootHeight:s}=o,n=i.value?s:t*e.imageRatio;return Math.max(0,(e.scale*n-s)/2)}return 0}),h=t=>{t=p(t,+o.minZoom,+o.maxZoom+1),t!==e.scale&&(e.scale=t,c("scale",{scale:t,index:o.active}))},v=()=>{h(1),e.moveX=0,e.moveY=0},R=()=>{const t=e.scale>1?1:2;h(t),e.moveX=0,e.moveY=0};let f,w,x,S,T,a,P;const d=t=>{const{touches:s}=t,{offsetX:n}=l;l.start(t),f=s.length,w=e.moveX,x=e.moveY,P=Date.now(),e.moving=f===1&&e.scale!==1,e.zooming=f===2&&!n.value,e.zooming&&(S=e.scale,T=E(t.touches))},K=t=>{const{touches:s}=t;if(l.move(t),(e.moving||e.zooming)&&$(t,!0),e.moving){const{deltaX:n,deltaY:m}=l,C=n.value+w,b=m.value+x;e.moveX=p(C,-g.value,g.value),e.moveY=p(b,-u.value,u.value)}if(e.zooming&&s.length===2){const n=E(s),m=S*n/T;h(m)}},Q=()=>{if(f>1)return;const{offsetX:t,offsetY:s}=l,n=Date.now()-P,m=250,C=5;t.value<C&&s.value<C&&n<m&&(a?(clearTimeout(a),a=null,R()):a=setTimeout(()=>{c("close"),a=null},m))},D=t=>{let s=!1;(e.moving||e.zooming)&&(s=!0,e.moving&&w===e.moveX&&x===e.moveY&&(s=!1),t.touches.length||(e.zooming&&(e.moveX=p(e.moveX,-g.value,g.value),e.moveY=p(e.moveY,-u.value,u.value),e.zooming=!1),e.moving=!1,w=0,x=0,S=1,e.scale<1&&v(),e.scale>o.maxZoom&&(e.scale=+o.maxZoom))),$(t,s),Q(),l.reset()},U=t=>{const{naturalWidth:s,naturalHeight:n}=t.target;e.imageRatio=n/s};return X(()=>o.active,v),X(()=>o.show,t=>{t||v()}),()=>{const t={loading:()=>r(G,{type:"spinner"},null)};return r(xe,{class:B("swipe-item"),onTouchstart:d,onTouchmove:K,onTouchend:D,onTouchcancel:D},{default:()=>[r(Ce,{src:o.src,fit:"contain",class:B("image",{vertical:i.value}),style:I.value,onLoad:U},t)]})}}});const[Ie,y]=O("image-preview"),Se=["show","transition","overlayStyle","closeOnPopstate"],Te={show:Boolean,loop:z,images:ee(),minZoom:H(1/3),maxZoom:H(3),overlay:z,closeable:Boolean,showIndex:z,className:k,closeIcon:A("clear"),transition:String,beforeClose:Function,overlayClass:k,overlayStyle:Object,swipeDuration:H(300),startPosition:H(0),showIndicators:Boolean,closeOnPopstate:z,closeIconPosition:A("top-right")};var q=_({name:Ie,props:Te,emits:["scale","close","closed","change","update:show"],setup(o,{emit:c,slots:e}){const l=oe(),i=F({active:0,rootWidth:0,rootHeight:0}),I=()=>{if(l.value){const a=re(l.value.$el);i.rootWidth=a.width,i.rootHeight=a.height,l.value.resize()}},g=a=>c("scale",a),u=a=>c("update:show",a),h=()=>{ve(o.beforeClose,{args:[i.active],done:()=>u(!1)})},v=a=>{a!==i.active&&(i.active=a,c("change",a))},R=()=>{if(o.showIndex)return r("div",{class:y("index")},[e.index?e.index({index:i.active}):`${i.active+1} / ${o.images.length}`])},f=()=>{if(e.cover)return r("div",{class:y("cover")},[e.cover()])},w=()=>r(Pe,{ref:l,lazyRender:!0,loop:o.loop,class:y("swipe"),duration:o.swipeDuration,initialSwipe:o.startPosition,showIndicators:o.showIndicators,indicatorColor:"white",onChange:v},{default:()=>[o.images.map(a=>r(ye,{src:a,show:o.show,active:i.active,maxZoom:o.maxZoom,minZoom:o.minZoom,rootWidth:i.rootWidth,rootHeight:i.rootHeight,onScale:g,onClose:h},null))]}),x=()=>{if(o.closeable)return r(ue,{role:"button",name:o.closeIcon,class:[y("close-icon",o.closeIconPosition),me],onClick:h},null)},S=()=>c("closed"),T=(a,P)=>{var d;return(d=l.value)==null?void 0:d.swipeTo(a,P)};return te({swipeTo:T}),ae(I),X([se,ne],I),X(()=>o.startPosition,a=>v(+a)),X(()=>o.show,a=>{const{images:P,startPosition:d}=o;a?(v(+d),ie(()=>{I(),T(+d,{immediate:!0})})):c("close",{index:i.active,url:P[i.active]})}),()=>r(le,L({class:[y(),o.className],overlayClass:[y("overlay"),o.overlayClass],onClosed:S,"onUpdate:show":u},ce(o,Se)),{default:()=>[x(),w(),R(),f()]})}});let W;const pe={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 Xe(){({instance:W}=fe({setup(){const{state:o,toggle:c}=we(),e=()=>{o.images=[]};return()=>r(q,L(o,{onClosed:e,"onUpdate:show":c}),null)}}))}const N=(o,c=0)=>{if(!!de)return W||Xe(),o=Array.isArray(o)?{images:o,startPosition:c}:o,W.open(ge({},pe,o)),W};N.Component=he(q);N.install=o=>{o.use(N.Component)};export{N as I};
|
