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