| 1 |
- import{A as _,d as O,aw as Y,E as k,Q as F,ah as Q,V as H,a2 as X,j as r,ap as A,ar as p,aS as J,G as Z,aX as ee,aa as R,H as D,$,S as oe,aj as te,U as ae,ak as se,al as ne,W as ie,a7 as j,aA as ce,aR as le,X as re,aT as me,M as ue,aB as ve,a3 as de,I as ge,N as he,bo as fe,bp as we}from"./index.394decd7.js";import{a as xe,S as Pe}from"./index.f1b52763.js";import{I as Ce}from"./index.ae2dd816.js";const B=o=>Math.sqrt((o[0].clientX-o[1].clientX)**2+(o[0].clientY-o[1].clientY)**2),E=_("image-preview")[1];var Ie=O({props:{src:String,show:Boolean,active:Number,minZoom:Y(k),maxZoom:Y(k),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=Q(),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,b={transitionDuration:C||m?"0s":".3s"};if(t!==1){const G=s/t,K=n/t;b.transform=`scale(${t}, ${t}) translate(${G}px, ${K}px)`}return b}),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},z=()=>{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))},U=t=>{const{touches:s}=t;if(l.move(t),(e.moving||e.zooming)&&A(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=B(s),m=y*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,z()):a=setTimeout(()=>{c("close"),a=null},m))},N=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))),A(t,s),q(),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(J,{type:"spinner"},null)};return r(xe,{class:E("swipe-item"),onTouchstart:d,onTouchmove:U,onTouchend:N,onTouchcancel:N},{default:()=>[r(Ce,{src:o.src,fit:"contain",class:E("image",{vertical:i.value}),style:S.value,onLoad:V},t)]})}}});const[Se,I]=_("image-preview"),ye=["show","transition","overlayStyle","closeOnPopstate"],Te={show:Boolean,loop:Z,images:ee(),minZoom:R(1/3),maxZoom:R(3),overlay:Z,closeable:Boolean,showIndex:Z,className:D,closeIcon:$("clear"),transition:String,beforeClose:Function,overlayClass:D,overlayStyle:Object,swipeDuration:R(300),startPosition:R(0),showIndicators:Boolean,closeOnPopstate:Z,closeIconPosition:$("top-right")};var L=O({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))},z=()=>{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,j({class:[I(),o.className],overlayClass:[I("overlay"),o.overlayClass],onClosed:y,"onUpdate:show":u},ce(o,ye)),{default:()=>[x(),w(),z(),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(L,j(o,{onClosed:e,"onUpdate:show":c}),null)}}))}const M=(o,c=0)=>{if(!!de)return W||Xe(),o=Array.isArray(o)?{images:o,startPosition:c}:o,W.open(ge({},pe,o)),W};M.Component=he(L);M.install=o=>{o.use(M.Component)};export{M as I};
|
