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