| 1 |
- import{E as O,d as _,ax as b,G as D,S as F,ai as K,W as H,a3 as X,j as r,aq as M,as as p,aT as Q,H as Z,aY as ee,ab as W,I as $,a0 as A,U as oe,ak as te,V as ae,al as se,am as ne,X as ie,a8 as U,aB as ce,aS as le,Y as re,aU as me,N as ue,aC as ve,a4 as de,J as ge,O as he,bs as fe,bt as we}from"./ResizeObserver.es.39b48a47.js";import{a as xe,S as Pe}from"./index.0e35d2fb.js";import{I as Ce}from"./index.fcbcb027.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(D),maxZoom:b(D),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=K(),i=H(()=>{const{rootWidth:t,rootHeight:s}=o,n=s/t;return e.imageRatio>n}),S=H(()=>{const{scale:t,moveX:s,moveY:n,moving:m,zooming:C}=e,Y={transitionDuration:C||m?"0s":".3s"};if(t!==1){const G=s/t,J=n/t;Y.transform=`scale(${t}, ${t}) translate(${G}px, ${J}px)`}return Y}),g=H(()=>{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=H(()=>{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,y,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&&(y=e.scale,T=B(t.touches))},L=t=>{const{touches:s}=t;if(l.move(t),(e.moving||e.zooming)&&M(t,!0),e.moving){const{deltaX:n,deltaY:m}=l,C=n.value+w,Y=m.value+x;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=y*n/T;h(m)}},j=()=>{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))},k=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,y=1,e.scale<1&&v(),e.scale>o.maxZoom&&(e.scale=+o.maxZoom))),M(t,s),j(),l.reset()},V=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(xe,{class:E("swipe-item"),onTouchstart:d,onTouchmove:L,onTouchend:k,onTouchcancel:k},{default:()=>[r(Ce,{src:o.src,fit:"contain",class:E("image",{vertical:i.value}),style:S.value,onLoad:V},t)]})}}});const[Se,I]=O("image-preview"),ye=["show","transition","overlayStyle","closeOnPopstate"],Te={show:Boolean,loop:Z,images:ee(),minZoom:W(1/3),maxZoom:W(3),overlay:Z,closeable:Boolean,showIndex:Z,className:$,closeIcon:A("clear"),transition:String,beforeClose:Function,overlayClass:$,overlayStyle:Object,swipeDuration:W(300),startPosition:W(0),showIndicators:Boolean,closeOnPopstate:Z,closeIconPosition:A("top-right")};var q=_({name:Se,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}),S=()=>{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(Pe,{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))]}),x=()=>{if(o.closeable)return r(ue,{role:"button",name:o.closeIcon,class:[I("close-icon",o.closeIconPosition),me],onClick:h},null)},y=()=>c("closed"),T=(a,P)=>{var d;return(d=l.value)==null?void 0:d.swipeTo(a,P)};return te({swipeTo:T}),ae(S),X([se,ne],S),X(()=>o.startPosition,a=>v(+a)),X(()=>o.show,a=>{const{images:P,startPosition:d}=o;a?(v(+d),ie(()=>{S(),T(+d,{immediate:!0})})):c("close",{index:i.active,url:P[i.active]})}),()=>r(le,U({class:[I(),o.className],overlayClass:[I("overlay"),o.overlayClass],onClosed:y,"onUpdate:show":u},ce(o,ye)),{default:()=>[x(),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(q,U(o,{onClosed:e,"onUpdate:show":c}),null)}}))}const N=(o,c=0)=>{if(!!de)return z||Xe(),o=Array.isArray(o)?{images:o,startPosition:c}:o,z.open(ge({},pe,o)),z};N.Component=he(q);N.install=o=>{o.use(N.Component)};export{N as I};
|
