index.ead0ffe4.js 9.4 KB

1
  1. import{C as B,Y as me,Z as F,bq as pe,aN as ue,f as ne,by as ve,bz as Ie,bA as _e,R as ge,D as be,bB as Le,r as h,bC as ze,s as Ce,L as g,a4 as ce,a7 as we,a6 as ye,o as y,m as de,b as f,w as C,a as w,O as v,k as e,al as fe,N as Se,n as S,G as O,bD as Ee,c as x,Q as te,bj as Ne,J as xe,bE as Oe,bF as Te,ba as Re,bG as $e,bH as Ae,T as Be,ak as Me,aq as Ve,ar as ae,bk as Ye,bI as De,_ as he,a9 as A,aM as M,bJ as He,aS as ke,ae as Pe,bK as Xe,t as Fe,bL as Ke,aH as je,aR as We,bM as qe,bN as Ge}from"./entry.8331eecf.js";import{t as ie}from"./throttle.d0445b2c.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}=Le(),E=h(),N=h([]),T=ze(),I=h(!0),i=h(d.initialIndex),R=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),j=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)]),W=g(()=>[r.e("btn"),r.e("next"),r.is("disabled",!d.infinite&&j.value)]),H=g(()=>{const{scale:t,deg:n,offsetX:o,offsetY:_,enableTransition:z}=s.value;let m=o/t,L=_/t;switch(n%360){case 90:case-270:[m,L]=[L,-m];break;case 180:case-180:[m,L]=[-m,-L];break;case 270:case-90:[m,L]=[-L,m];break}const $={transform:`scale(${t}) rotate(${n}deg) translate(${m}px, ${L}px)`,transition:z?"transform .3s":""};return R.value.name===p.CONTAIN.name&&($.maxWidth=$.maxHeight="100%"),$});function P(){q(),l("close")}function re(){const t=ie(o=>{switch(o.code){case A.esc:d.closeOnPressEscape&&P();break;case A.space:U();break;case A.left:ee();break;case A.up:u("zoomIn");break;case A.right:a();break;case A.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,z=t.pageY,m=ie($=>{s.value={...s.value,offsetX:n+$.pageX-_,offsetY:o+$.pageY-z}}),L=M(document,"mousemove",m);M(document,"mouseup",()=>{L()}),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=R.value.name,z=(n.findIndex(m=>m.name===o)+1)%t.length;R.value=p[t[z]],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(){j.value&&!d.infinite||X(i.value+1)}function u(t,n={}){if(I.value)return;const{minScale:o,maxScale:_}=d,{zoomRate:z,rotateDeg:m,enableTransition:L}={zoomRate:d.zoomRate,rotateDeg:90,enableTransition:!0,...n};switch(t){case"zoomOut":s.value.scale>o&&(s.value.scale=Number.parseFloat((s.value.scale/z).toFixed(3)));break;case"zoomIn":s.value.scale<_&&(s.value.scale=Number.parseFloat((s.value.scale*z).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=L}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(W)),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(Re(e(R).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($e))]),_:1}),f(e(O),{onClick:n[4]||(n[4]=o=>u("clockwise"))},{default:C(()=>[f(e(Ae))]),_: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:z=>N.value[_]=z,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(),R=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),j=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}),W=g(()=>l.loading==="eager"?!1:!R&&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;je(u)?i.value=u:We(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,()=>{W.value?(N.value=!0,E.value=!1,J(),Z()):H()}),ye(()=>{W.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(j),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};