| 1 |
- import{G as O,d as _,ay as b,H as N,U as F,aj as J,X as Z,a4 as X,j as r,ar as k,at as p,aU as Q,I as H,aX as ee,ac as W,J as $,a1 as A,V as oe,al as te,W as ae,am as se,an as ne,Y as ie,a9 as U,aC as ce,aT as le,Z as re,aZ as me,O as ue,aD as ve,a5 as de,K as ge,P as he,bp as fe,bq as we}from"./index.c8a33855.js";import{a as Pe,S as xe}from"./index.3dff5bed.js";import{I as Ce}from"./index.5da3180f.js";const B=o=>Math.sqrt((o[0].clientX-o[1].clientX)**2+(o[0].clientY-o[1].clientY)**2),E=O("image-preview")[1];var Ie=_({props:{src:String,show:Boolean,active:Number,minZoom:b(N),maxZoom:b(N),rootWidth:b(Number),rootHeight:b(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}),y=Z(()=>{const{scale:t,moveX:s,moveY:n,moving:m,zooming:C}=e,Y={transitionDuration:C||m?"0s":".3s"};if(t!==1){const V=s/t,G=n/t;Y.transform=`scale(${t}, ${t}) translate(${V}px, ${G}px)`}return Y}),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,P,S,T,a,x;const d=t=>{const{touches:s}=t,{offsetX:n}=l;l.start(t),f=s.length,w=e.moveX,P=e.moveY,x=Date.now(),e.moving=f===1&&e.scale!==1,e.zooming=f===2&&!n.value,e.zooming&&(S=e.scale,T=B(t.touches))},q=t=>{const{touches:s}=t;if(l.move(t),(e.moving||e.zooming)&&k(t,!0),e.moving){const{deltaX:n,deltaY:m}=l,C=n.value+w,Y=m.value+P;e.moveX=p(C,-g.value,g.value),e.moveY=p(Y,-u.value,u.value)}if(e.zooming&&s.length===2){const n=B(s),m=S*n/T;h(m)}},L=()=>{if(f>1)return;const{offsetX:t,offsetY:s}=l,n=Date.now()-x,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))},M=t=>{let s=!1;(e.moving||e.zooming)&&(s=!0,e.moving&&w===e.moveX&&P===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,P=0,S=1,e.scale<1&&v(),e.scale>o.maxZoom&&(e.scale=+o.maxZoom))),k(t,s),L(),l.reset()},K=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(Q,{type:"spinner"},null)};return r(Pe,{class:E("swipe-item"),onTouchstart:d,onTouchmove:q,onTouchend:M,onTouchcancel:M},{default:()=>[r(Ce,{src:o.src,fit:"contain",class:E("image",{vertical:i.value}),style:y.value,onLoad:K},t)]})}}});const[ye,I]=O("image-preview"),Se=["show","transition","overlayStyle","closeOnPopstate"],Te={show:Boolean,loop:H,images:ee(),minZoom:W(1/3),maxZoom:W(3),overlay:H,closeable:Boolean,showIndex:H,className:$,closeIcon:A("clear"),transition:String,beforeClose:Function,overlayClass:$,overlayStyle:Object,swipeDuration:W(300),startPosition:W(0),showIndicators:Boolean,closeOnPopstate:H,closeIconPosition:A("top-right")};var j=_({name:ye,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}),y=()=>{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:I("index")},[e.index?e.index({index:i.active}):`${i.active+1} / ${o.images.length}`])},f=()=>{if(e.cover)return r("div",{class:I("cover")},[e.cover()])},w=()=>r(xe,{ref:l,lazyRender:!0,loop:o.loop,class:I("swipe"),duration:o.swipeDuration,initialSwipe:o.startPosition,showIndicators:o.showIndicators,indicatorColor:"white",onChange:v},{default:()=>[o.images.map(a=>r(Ie,{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))]}),P=()=>{if(o.closeable)return r(ue,{role:"button",name:o.closeIcon,class:[I("close-icon",o.closeIconPosition),me],onClick:h},null)},S=()=>c("closed"),T=(a,x)=>{var d;return(d=l.value)==null?void 0:d.swipeTo(a,x)};return te({swipeTo:T}),ae(y),X([se,ne],y),X(()=>o.startPosition,a=>v(+a)),X(()=>o.show,a=>{const{images:x,startPosition:d}=o;a?(v(+d),ie(()=>{y(),T(+d,{immediate:!0})})):c("close",{index:i.active,url:x[i.active]})}),()=>r(le,U({class:[I(),o.className],overlayClass:[I("overlay"),o.overlayClass],onClosed:S,"onUpdate:show":u},ce(o,Se)),{default:()=>[P(),w(),R(),f()]})}});let z;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:z}=fe({setup(){const{state:o,toggle:c}=we(),e=()=>{o.images=[]};return()=>r(j,U(o,{onClosed:e,"onUpdate:show":c}),null)}}))}const D=(o,c=0)=>{if(!!de)return z||Xe(),o=Array.isArray(o)?{images:o,startPosition:c}:o,z.open(ge({},pe,o)),z};D.Component=he(j);D.install=o=>{o.use(D.Component)};export{D as I};
|
