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