| 1 |
- import{t as A,d as L,aB as z,z as $,r as B,aq as V,R as O,y as X,Z as Y,a0 as J,c as r,a4 as p,aU as C,L as Q,bl as ee,v as H,av as oe,w as W,O as E,u as k,W as te,$ as ae,aN as se,au as ne,_ as ie,E as ce,am as le,P as re,an as me,at as ue,a5 as ve,aR as ge}from"./index.3b0304e1.js";import{a as de,S as he}from"./index.ce8d626c.js";import{I as fe}from"./index.710cd200.js";const D=t=>Math.sqrt((t[0].clientX-t[1].clientX)**2+(t[0].clientY-t[1].clientY)**2),M=A("image-preview")[1];var we=L({props:{src:String,show:Boolean,active:Number,minZoom:z($),maxZoom:z($),rootWidth:z(Number),rootHeight:z(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(),T=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,b={transitionDuration:x||g?"0s":".3s"};if(o!==1){const G=s/o,K=i/o;b.transform=`scale(${o}, ${o}) translate(${G}px, ${K}px)`}return b}),d=X(()=>{if(e.imageRatio){const{rootWidth:o,rootHeight:s}=t,i=T.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=T.value?s:o*e.imageRatio;return Math.max(0,(e.scale*i-s)/2)}return 0}),y=o=>{o=C(o,+t.minZoom,+t.maxZoom+1),o!==e.scale&&(e.scale=o,l("scale",{scale:o,index:t.active}))},I=()=>{y(1),e.moveX=0,e.moveY=0},Z=()=>{const o=e.scale>1?1:2;y(o),e.moveX=0,e.moveY=0};let w,P,h,a,v,c,N;const F=o=>{const{touches:s}=o,{offsetX:i}=n;n.start(o),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=D(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,b=g.value+h;e.moveX=C(x,-d.value,d.value),e.moveY=C(b,-u.value,u.value)}if(e.zooming&&s.length===2){const i=D(s),g=a*i/v;y(g)}},U=()=>{if(w>1)return;const{offsetX:o,offsetY:s}=n,i=Date.now()-N,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&&I(),e.scale>t.maxZoom&&(e.scale=+t.maxZoom))),p(o,s),U(),n.reset()},j=o=>{const{naturalWidth:s,naturalHeight:i}=o.target;e.imageRatio=i/s};return Y(()=>t.active,I),Y(()=>t.show,o=>{o||I()}),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:M("swipe-item"),onTouchstartPassive:F,onTouchend:_,onTouchcancel:_},{default:()=>[m.image?r("div",{class:M("image-wrap")},[m.image({src:t.src})]):r(fe,{src:t.src,fit:"contain",class:M("image",{vertical:T.value}),style:R.value,onLoad:j},o)]})}}});const[Pe,S]=A("image-preview"),xe=["show","transition","overlayStyle","closeOnPopstate"],Se={show:Boolean,loop:H,images:oe(),minZoom:W(1/3),maxZoom:W(3),overlay:H,closeable:Boolean,showIndex:H,className:E,closeIcon:k("clear"),transition:String,beforeClose:Function,overlayClass:E,overlayStyle:Object,swipeDuration:W(300),startPosition:W(0),showIndicators:Boolean,closeOnPopstate:H,closeIconPosition:k("top-right")};var Xe=L({name:Pe,props:Se,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()}},T=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))},y=()=>{if(t.showIndex)return r("div",{class:S("index")},[m.index?m.index({index:n.active}):`${n.active+1} / ${t.images.length}`])},I=()=>{if(m.cover)return r("div",{class:S("cover")},[m.cover()])},Z=()=>r(he,{ref:e,lazyRender:!0,loop:t.loop,class:S("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:T,onClose:d,onLongPress:()=>l("longPress",{index:v})},{image:m.image}))]}),w=()=>{if(t.closeable)return r(ve,{role:"button",name:t.closeIcon,class:[S("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:[S(),t.className],overlayClass:[S("overlay"),t.overlayClass],onClosed:P,"onUpdate:show":R},le(t,xe)),{default:()=>[w(),Z(),y(),I()]})}});export{Xe as s};
|
