| 1 |
- import{aB as B,aq as me,ar as F,bq as pe,bb as ue,f as ne,bx as ve,by as Ie,bz as _e,ac as ge,N as be,bA as ze,r as h,bB as Le,s as Ce,y as g,W as ce,X as we,C as ye,o as y,m as de,b as f,w as C,a as w,a2 as v,k as e,a4 as fe,a3 as Se,n as S,B as O,bC as Ee,c as x,H as te,bl as Ne,av as xe,bD as Oe,bE as Te,a1 as $e,bF as Ae,bG as Re,I as Be,$ as Me,a0 as Ve,R as ae,bm as Ye,bH as De,_ as he,aa as R,a9 as M,bI as He,as as ke,aP as Pe,bJ as Xe,t as Fe,bK as Ke,b7 as We,a7 as je,bL as qe,bM as Ge}from"./entry.97b97815.js";import{t as ie}from"./throttle.3cebe6b3.js";const Ze=(c,k)=>{if(!B||!c||!k)return!1;const l=c.getBoundingClientRect();let b;return k instanceof Element?b=k.getBoundingClientRect():b={top:0,right:window.innerWidth,bottom:window.innerHeight,left:0},l.top<b.bottom&&l.bottom>b.top&&l.right>b.left&&l.left<b.right},Je=me({urlList:{type:F(Array),default:()=>pe([])},zIndex:{type:Number},initialIndex:{type:Number,default:0},infinite:{type:Boolean,default:!0},hideOnClickModal:Boolean,teleported:Boolean,closeOnPressEscape:{type:Boolean,default:!0},zoomRate:{type:Number,default:1.2},minScale:{type:Number,default:.2},maxScale:{type:Number,default:7},crossorigin:{type:F(String)}}),Qe={close:()=>!0,switch:c=>ue(c),rotate:c=>ue(c)},Ue=["src","crossorigin"],ea=ne({name:"ElImageViewer"}),aa=ne({...ea,props:Je,emits:Qe,setup(c,{expose:k,emit:l}){var b;const d=c,p={CONTAIN:{name:"contain",icon:ve(Ie)},ORIGINAL:{name:"original",icon:ve(_e)}},{t:se}=ge(),r=be("image-viewer"),{nextZIndex:V}=ze(),E=h(),N=h([]),T=Le(),I=h(!0),i=h(d.initialIndex),$=Ce(p.CONTAIN),s=h({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),Y=h((b=d.zIndex)!=null?b:V()),oe=g(()=>{const{urlList:t}=d;return t.length<=1}),K=g(()=>i.value===0),W=g(()=>i.value===d.urlList.length-1),D=g(()=>d.urlList[i.value]),le=g(()=>[r.e("btn"),r.e("prev"),r.is("disabled",!d.infinite&&K.value)]),j=g(()=>[r.e("btn"),r.e("next"),r.is("disabled",!d.infinite&&W.value)]),H=g(()=>{const{scale:t,deg:n,offsetX:o,offsetY:_,enableTransition:L}=s.value;let m=o/t,z=_/t;switch(n%360){case 90:case-270:[m,z]=[z,-m];break;case 180:case-180:[m,z]=[-m,-z];break;case 270:case-90:[m,z]=[-z,m];break}const A={transform:`scale(${t}) rotate(${n}deg) translate(${m}px, ${z}px)`,transition:L?"transform .3s":""};return $.value.name===p.CONTAIN.name&&(A.maxWidth=A.maxHeight="100%"),A});function P(){q(),l("close")}function re(){const t=ie(o=>{switch(o.code){case R.esc:d.closeOnPressEscape&&P();break;case R.space:U();break;case R.left:ee();break;case R.up:u("zoomIn");break;case R.right:a();break;case R.down:u("zoomOut");break}}),n=ie(o=>{const _=o.deltaY||o.deltaX;u(_<0?"zoomIn":"zoomOut",{zoomRate:d.zoomRate,enableTransition:!1})});T.run(()=>{M(document,"keydown",t),M(document,"wheel",n)})}function q(){T.stop()}function G(){I.value=!1}function Z(t){I.value=!1,t.target.alt=se("el.image.error")}function J(t){if(I.value||t.button!==0||!E.value)return;s.value.enableTransition=!1;const{offsetX:n,offsetY:o}=s.value,_=t.pageX,L=t.pageY,m=ie(A=>{s.value={...s.value,offsetX:n+A.pageX-_,offsetY:o+A.pageY-L}}),z=M(document,"mousemove",m);M(document,"mouseup",()=>{z()}),t.preventDefault()}function Q(){s.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function U(){if(I.value)return;const t=He(p),n=Object.values(p),o=$.value.name,L=(n.findIndex(m=>m.name===o)+1)%t.length;$.value=p[t[L]],Q()}function X(t){const n=d.urlList.length;i.value=(t+n)%n}function ee(){K.value&&!d.infinite||X(i.value-1)}function a(){W.value&&!d.infinite||X(i.value+1)}function u(t,n={}){if(I.value)return;const{minScale:o,maxScale:_}=d,{zoomRate:L,rotateDeg:m,enableTransition:z}={zoomRate:d.zoomRate,rotateDeg:90,enableTransition:!0,...n};switch(t){case"zoomOut":s.value.scale>o&&(s.value.scale=Number.parseFloat((s.value.scale/L).toFixed(3)));break;case"zoomIn":s.value.scale<_&&(s.value.scale=Number.parseFloat((s.value.scale*L).toFixed(3)));break;case"clockwise":s.value.deg+=m,l("rotate",s.value.deg);break;case"anticlockwise":s.value.deg-=m,l("rotate",s.value.deg);break}s.value.enableTransition=z}return ce(D,()=>{we(()=>{const t=N.value[0];t!=null&&t.complete||(I.value=!0)})}),ce(i,t=>{Q(),l("switch",t)}),ye(()=>{var t,n;re(),(n=(t=E.value)==null?void 0:t.focus)==null||n.call(t)}),k({setActiveItem:X}),(t,n)=>(y(),de(De,{to:"body",disabled:!t.teleported},[f(Ye,{name:"viewer-fade",appear:""},{default:C(()=>[w("div",{ref_key:"wrapper",ref:E,tabindex:-1,class:v(e(r).e("wrapper")),style:fe({zIndex:Y.value})},[w("div",{class:v(e(r).e("mask")),onClick:n[0]||(n[0]=Se(o=>t.hideOnClickModal&&P(),["self"]))},null,2),S(" CLOSE "),w("span",{class:v([e(r).e("btn"),e(r).e("close")]),onClick:P},[f(e(O),null,{default:C(()=>[f(e(Ee))]),_:1})],2),S(" ARROW "),e(oe)?S("v-if",!0):(y(),x(te,{key:0},[w("span",{class:v(e(le)),onClick:ee},[f(e(O),null,{default:C(()=>[f(e(Ne))]),_:1})],2),w("span",{class:v(e(j)),onClick:a},[f(e(O),null,{default:C(()=>[f(e(xe))]),_:1})],2)],64)),S(" ACTIONS "),w("div",{class:v([e(r).e("btn"),e(r).e("actions")])},[w("div",{class:v(e(r).e("actions__inner"))},[f(e(O),{onClick:n[1]||(n[1]=o=>u("zoomOut"))},{default:C(()=>[f(e(Oe))]),_:1}),f(e(O),{onClick:n[2]||(n[2]=o=>u("zoomIn"))},{default:C(()=>[f(e(Te))]),_:1}),w("i",{class:v(e(r).e("actions__divider"))},null,2),f(e(O),{onClick:U},{default:C(()=>[(y(),de($e(e($).icon)))]),_:1}),w("i",{class:v(e(r).e("actions__divider"))},null,2),f(e(O),{onClick:n[3]||(n[3]=o=>u("anticlockwise"))},{default:C(()=>[f(e(Ae))]),_:1}),f(e(O),{onClick:n[4]||(n[4]=o=>u("clockwise"))},{default:C(()=>[f(e(Re))]),_:1})],2)],2),S(" CANVAS "),w("div",{class:v(e(r).e("canvas"))},[(y(!0),x(te,null,Be(t.urlList,(o,_)=>Me((y(),x("img",{ref_for:!0,ref:L=>N.value[_]=L,key:o,src:o,style:fe(e(H)),class:v(e(r).e("img")),crossorigin:t.crossorigin,onLoad:G,onError:Z,onMousedown:J},null,46,Ue)),[[Ve,_===i.value]])),128))],2),ae(t.$slots,"default")],6)]),_:3})],8,["disabled"]))}});var ta=he(aa,[["__file","image-viewer.vue"]]);const na=ke(ta),sa=me({hideOnClickModal:Boolean,src:{type:String,default:""},fit:{type:String,values:["","contain","cover","fill","none","scale-down"],default:""},loading:{type:String,values:["eager","lazy"]},lazy:Boolean,scrollContainer:{type:F([String,Object])},previewSrcList:{type:F(Array),default:()=>pe([])},previewTeleported:Boolean,zIndex:{type:Number},initialIndex:{type:Number,default:0},infinite:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},zoomRate:{type:Number,default:1.2},minScale:{type:Number,default:.2},maxScale:{type:Number,default:7},crossorigin:{type:F(String)}}),oa={load:c=>c instanceof Event,error:c=>c instanceof Event,switch:c=>ue(c),close:()=>!0,show:()=>!0},la=["src","loading","crossorigin"],ra={key:0},ia=ne({name:"ElImage",inheritAttrs:!1}),ua=ne({...ia,props:sa,emits:oa,setup(c,{emit:k}){const l=c;let b="";const{t:d}=ge(),p=be("image"),se=Pe(),r=Xe(),V=h(),E=h(!1),N=h(!0),T=h(!1),I=h(),i=h(),$=B&&"loading"in HTMLImageElement.prototype;let s,Y;const oe=g(()=>[p.e("inner"),D.value&&p.e("preview"),N.value&&p.is("loading")]),K=g(()=>se.style),W=g(()=>{const{fit:a}=l;return B&&a?{objectFit:a}:{}}),D=g(()=>{const{previewSrcList:a}=l;return Array.isArray(a)&&a.length>0}),le=g(()=>{const{previewSrcList:a,initialIndex:u}=l;let t=u;return u>a.length-1&&(t=0),t}),j=g(()=>l.loading==="eager"?!1:!$&&l.loading==="lazy"||l.lazy),H=()=>{B&&(N.value=!0,E.value=!1,V.value=l.src)};function P(a){N.value=!1,E.value=!1,k("load",a)}function re(a){N.value=!1,E.value=!0,k("error",a)}function q(){Ze(I.value,i.value)&&(H(),J())}const G=Ge(q,200,!0);async function Z(){var a;if(!B)return;await we();const{scrollContainer:u}=l;We(u)?i.value=u:je(u)&&u!==""?i.value=(a=document.querySelector(u))!=null?a:void 0:I.value&&(i.value=qe(I.value)),i.value&&(s=M(i,"scroll",G),setTimeout(()=>q(),100))}function J(){!B||!i.value||!G||(s==null||s(),i.value=void 0)}function Q(a){if(a.ctrlKey){if(a.deltaY<0)return a.preventDefault(),!1;if(a.deltaY>0)return a.preventDefault(),!1}}function U(){D.value&&(Y=M("wheel",Q,{passive:!1}),b=document.body.style.overflow,document.body.style.overflow="hidden",T.value=!0,k("show"))}function X(){Y==null||Y(),document.body.style.overflow=b,T.value=!1,k("close")}function ee(a){k("switch",a)}return ce(()=>l.src,()=>{j.value?(N.value=!0,E.value=!1,J(),Z()):H()}),ye(()=>{j.value?Z():H()}),(a,u)=>(y(),x("div",{ref_key:"container",ref:I,class:v([e(p).b(),a.$attrs.class]),style:fe(e(K))},[E.value?ae(a.$slots,"error",{key:0},()=>[w("div",{class:v(e(p).e("error"))},Fe(e(d)("el.image.error")),3)]):(y(),x(te,{key:1},[V.value!==void 0?(y(),x("img",Ke({key:0},e(r),{src:V.value,loading:a.loading,style:e(W),class:e(oe),crossorigin:a.crossorigin,onClick:U,onLoad:P,onError:re}),null,16,la)):S("v-if",!0),N.value?(y(),x("div",{key:1,class:v(e(p).e("wrapper"))},[ae(a.$slots,"placeholder",{},()=>[w("div",{class:v(e(p).e("placeholder"))},null,2)])],2)):S("v-if",!0)],64)),e(D)?(y(),x(te,{key:2},[T.value?(y(),de(e(na),{key:0,"z-index":a.zIndex,"initial-index":e(le),infinite:a.infinite,"zoom-rate":a.zoomRate,"min-scale":a.minScale,"max-scale":a.maxScale,"url-list":a.previewSrcList,"hide-on-click-modal":a.hideOnClickModal,teleported:a.previewTeleported,"close-on-press-escape":a.closeOnPressEscape,onClose:X,onSwitch:ee},{default:C(()=>[a.$slots.viewer?(y(),x("div",ra,[ae(a.$slots,"viewer")])):S("v-if",!0)]),_:3},8,["z-index","initial-index","infinite","zoom-rate","min-scale","max-scale","url-list","hide-on-click-modal","teleported","close-on-press-escape"])):S("v-if",!0)],64)):S("v-if",!0)],6))}});var ca=he(ua,[["__file","image.vue"]]);const va=ke(ca);export{va as E};
|
