| 12 |
- import{m as me,u as V,E as A}from"./typescript-c7dac87b.js";import{g as B,h as Ie,j as pe,k as H,l as ue,m as ne,n as ve,p as _e,s as ze,q as ge,t as we,v as Le,r as k,x as Ee,y as Ce,z as y,w as ce,A as ye,B as be,o as h,c as de,f as v,a as E,d as b,C as m,u as e,D as fe,E as Se,e as C,F as Ne,b as x,G as ae,H as xe,I as Oe,J as Te,K as Re,L as $e,M as Ae,N as Be,O as Ve,P as Me,Q as Ye,R as te,T as Xe,S as De,U as Pe,V as he,W as Fe,X as He,Y as We,Z as je,_ as Ke,$ as Ze}from"./index-312d0758.js";import{E as O}from"./index-7588b595.js";import{_ as ke}from"./plugin-vue_export-helper-1cff8a04.js";import{d as qe}from"./debounce-80ed8290.js";import{u as Ge}from"./index-bec297e4.js";import{g as Ue}from"./scroll-27bc6409.js";const Je=(i,p)=>{if(!B||!i||!p)return!1;const s=i.getBoundingClientRect();let f;return p instanceof Element?f=p.getBoundingClientRect():f={top:0,right:window.innerWidth,bottom:window.innerHeight,left:0},s.top<f.bottom&&s.bottom>f.top&&s.right>f.left&&s.left<f.right};var Qe="Expected a function";function ie(i,p,s){var f=!0,l=!0;if(typeof i!="function")throw new TypeError(Qe);return Ie(s)&&(f="leading"in s?!!s.leading:f,l="trailing"in s?!!s.trailing:l),qe(i,p,{leading:f,maxWait:p,trailing:l})}const et=pe({urlList:{type:H(Array),default:()=>me([])},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:H(String)}}),tt={close:()=>!0,switch:i=>ue(i),rotate:i=>ue(i)},at=["src","crossorigin"],nt=ne({name:"ElImageViewer"}),st=ne({...nt,props:et,emits:tt,setup(i,{expose:p,emit:s}){var f;const l=i,w={CONTAIN:{name:"contain",icon:ve(_e)},ORIGINAL:{name:"original",icon:ve(ze)}},{t:se}=ge(),u=we("image-viewer"),{nextZIndex:M}=Le(),S=k(),N=k([]),T=Ee(),I=k(!0),c=k(l.initialIndex),R=Ce(w.CONTAIN),o=k({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),Y=k((f=l.zIndex)!=null?f:M()),oe=y(()=>{const{urlList:a}=l;return a.length<=1}),W=y(()=>c.value===0),j=y(()=>c.value===l.urlList.length-1),X=y(()=>l.urlList[c.value]),le=y(()=>[u.e("btn"),u.e("prev"),u.is("disabled",!l.infinite&&W.value)]),K=y(()=>[u.e("btn"),u.e("next"),u.is("disabled",!l.infinite&&j.value)]),D=y(()=>{const{scale:a,deg:n,offsetX:r,offsetY:_,enableTransition:L}=o.value;let g=r/a,z=_/a;switch(n%360){case 90:case-270:[g,z]=[z,-g];break;case 180:case-180:[g,z]=[-g,-z];break;case 270:case-90:[g,z]=[-z,g];break}const $={transform:`scale(${a}) rotate(${n}deg) translate(${g}px, ${z}px)`,transition:L?"transform .3s":""};return R.value.name===w.CONTAIN.name&&($.maxWidth=$.maxHeight="100%"),$});function P(){Z(),s("close")}function re(){const a=ie(r=>{switch(r.code){case A.esc:l.closeOnPressEscape&&P();break;case A.space:Q();break;case A.left:ee();break;case A.up:d("zoomIn");break;case A.right:t();break;case A.down:d("zoomOut");break}}),n=ie(r=>{const _=r.deltaY||r.deltaX;d(_<0?"zoomIn":"zoomOut",{zoomRate:l.zoomRate,enableTransition:!1})});T.run(()=>{V(document,"keydown",a),V(document,"wheel",n)})}function Z(){T.stop()}function q(){I.value=!1}function G(a){I.value=!1,a.target.alt=se("el.image.error")}function U(a){if(I.value||a.button!==0||!S.value)return;o.value.enableTransition=!1;const{offsetX:n,offsetY:r}=o.value,_=a.pageX,L=a.pageY,g=ie($=>{o.value={...o.value,offsetX:n+$.pageX-_,offsetY:r+$.pageY-L}}),z=V(document,"mousemove",g);V(document,"mouseup",()=>{z()}),a.preventDefault()}function J(){o.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function Q(){if(I.value)return;const a=Pe(w),n=Object.values(w),r=R.value.name,L=(n.findIndex(g=>g.name===r)+1)%a.length;R.value=w[a[L]],J()}function F(a){const n=l.urlList.length;c.value=(a+n)%n}function ee(){W.value&&!l.infinite||F(c.value-1)}function t(){j.value&&!l.infinite||F(c.value+1)}function d(a,n={}){if(I.value)return;const{minScale:r,maxScale:_}=l,{zoomRate:L,rotateDeg:g,enableTransition:z}={zoomRate:l.zoomRate,rotateDeg:90,enableTransition:!0,...n};switch(a){case"zoomOut":o.value.scale>r&&(o.value.scale=Number.parseFloat((o.value.scale/L).toFixed(3)));break;case"zoomIn":o.value.scale<_&&(o.value.scale=Number.parseFloat((o.value.scale*L).toFixed(3)));break;case"clockwise":o.value.deg+=g,s("rotate",o.value.deg);break;case"anticlockwise":o.value.deg-=g,s("rotate",o.value.deg);break}o.value.enableTransition=z}return ce(X,()=>{ye(()=>{const a=N.value[0];a!=null&&a.complete||(I.value=!0)})}),ce(c,a=>{J(),s("switch",a)}),be(()=>{var a,n;re(),(n=(a=S.value)==null?void 0:a.focus)==null||n.call(a)}),p({setActiveItem:F}),(a,n)=>(h(),de(De,{to:"body",disabled:!a.teleported},[v(Xe,{name:"viewer-fade",appear:""},{default:E(()=>[b("div",{ref_key:"wrapper",ref:S,tabindex:-1,class:m(e(u).e("wrapper")),style:fe({zIndex:Y.value})},[b("div",{class:m(e(u).e("mask")),onClick:n[0]||(n[0]=Se(r=>a.hideOnClickModal&&P(),["self"]))},null,2),C(" CLOSE "),b("span",{class:m([e(u).e("btn"),e(u).e("close")]),onClick:P},[v(e(O),null,{default:E(()=>[v(e(Ne))]),_:1})],2),C(" ARROW "),e(oe)?C("v-if",!0):(h(),x(ae,{key:0},[b("span",{class:m(e(le)),onClick:ee},[v(e(O),null,{default:E(()=>[v(e(xe))]),_:1})],2),b("span",{class:m(e(K)),onClick:t},[v(e(O),null,{default:E(()=>[v(e(Oe))]),_:1})],2)],64)),C(" ACTIONS "),b("div",{class:m([e(u).e("btn"),e(u).e("actions")])},[b("div",{class:m(e(u).e("actions__inner"))},[v(e(O),{onClick:n[1]||(n[1]=r=>d("zoomOut"))},{default:E(()=>[v(e(Te))]),_:1}),v(e(O),{onClick:n[2]||(n[2]=r=>d("zoomIn"))},{default:E(()=>[v(e(Re))]),_:1}),b("i",{class:m(e(u).e("actions__divider"))},null,2),v(e(O),{onClick:Q},{default:E(()=>[(h(),de($e(e(R).icon)))]),_:1}),b("i",{class:m(e(u).e("actions__divider"))},null,2),v(e(O),{onClick:n[3]||(n[3]=r=>d("anticlockwise"))},{default:E(()=>[v(e(Ae))]),_:1}),v(e(O),{onClick:n[4]||(n[4]=r=>d("clockwise"))},{default:E(()=>[v(e(Be))]),_:1})],2)],2),C(" CANVAS "),b("div",{class:m(e(u).e("canvas"))},[(h(!0),x(ae,null,Ve(a.urlList,(r,_)=>Me((h(),x("img",{ref_for:!0,ref:L=>N.value[_]=L,key:r,src:r,style:fe(e(D)),class:m(e(u).e("img")),crossorigin:a.crossorigin,onLoad:q,onError:G,onMousedown:U},null,46,at)),[[Ye,_===c.value]])),128))],2),te(a.$slots,"default")],6)]),_:3})],8,["disabled"]))}});var ot=ke(st,[["__file","image-viewer.vue"]]);const lt=he(ot),rt=pe({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:H([String,Object])},previewSrcList:{type:H(Array),default:()=>me([])},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:H(String)}}),it={load:i=>i instanceof Event,error:i=>i instanceof Event,switch:i=>ue(i),close:()=>!0,show:()=>!0},ut=["src","loading","crossorigin"],ct={key:0},dt=ne({name:"ElImage",inheritAttrs:!1}),ft=ne({...dt,props:rt,emits:it,setup(i,{emit:p}){const s=i;let f="";const{t:l}=ge(),w=we("image"),se=Fe(),u=Ge(),M=k(),S=k(!1),N=k(!0),T=k(!1),I=k(),c=k(),R=B&&"loading"in HTMLImageElement.prototype;let o,Y;const oe=y(()=>[w.e("inner"),X.value&&w.e("preview"),N.value&&w.is("loading")]),W=y(()=>se.style),j=y(()=>{const{fit:t}=s;return B&&t?{objectFit:t}:{}}),X=y(()=>{const{previewSrcList:t}=s;return Array.isArray(t)&&t.length>0}),le=y(()=>{const{previewSrcList:t,initialIndex:d}=s;let a=d;return d>t.length-1&&(a=0),a}),K=y(()=>s.loading==="eager"?!1:!R&&s.loading==="lazy"||s.lazy),D=()=>{B&&(N.value=!0,S.value=!1,M.value=s.src)};function P(t){N.value=!1,S.value=!1,p("load",t)}function re(t){N.value=!1,S.value=!0,p("error",t)}function Z(){Je(I.value,c.value)&&(D(),U())}const q=Ze(Z,200,!0);async function G(){var t;if(!B)return;await ye();const{scrollContainer:d}=s;je(d)?c.value=d:Ke(d)&&d!==""?c.value=(t=document.querySelector(d))!=null?t:void 0:I.value&&(c.value=Ue(I.value)),c.value&&(o=V(c,"scroll",q),setTimeout(()=>Z(),100))}function U(){!B||!c.value||!q||(o==null||o(),c.value=void 0)}function J(t){if(t.ctrlKey){if(t.deltaY<0)return t.preventDefault(),!1;if(t.deltaY>0)return t.preventDefault(),!1}}function Q(){X.value&&(Y=V("wheel",J,{passive:!1}),f=document.body.style.overflow,document.body.style.overflow="hidden",T.value=!0,p("show"))}function F(){Y==null||Y(),document.body.style.overflow=f,T.value=!1,p("close")}function ee(t){p("switch",t)}return ce(()=>s.src,()=>{K.value?(N.value=!0,S.value=!1,U(),G()):D()}),be(()=>{K.value?G():D()}),(t,d)=>(h(),x("div",{ref_key:"container",ref:I,class:m([e(w).b(),t.$attrs.class]),style:fe(e(W))},[S.value?te(t.$slots,"error",{key:0},()=>[b("div",{class:m(e(w).e("error"))},He(e(l)("el.image.error")),3)]):(h(),x(ae,{key:1},[M.value!==void 0?(h(),x("img",We({key:0},e(u),{src:M.value,loading:t.loading,style:e(j),class:e(oe),crossorigin:t.crossorigin,onClick:Q,onLoad:P,onError:re}),null,16,ut)):C("v-if",!0),N.value?(h(),x("div",{key:1,class:m(e(w).e("wrapper"))},[te(t.$slots,"placeholder",{},()=>[b("div",{class:m(e(w).e("placeholder"))},null,2)])],2)):C("v-if",!0)],64)),e(X)?(h(),x(ae,{key:2},[T.value?(h(),de(e(lt),{key:0,"z-index":t.zIndex,"initial-index":e(le),infinite:t.infinite,"zoom-rate":t.zoomRate,"min-scale":t.minScale,"max-scale":t.maxScale,"url-list":t.previewSrcList,"hide-on-click-modal":t.hideOnClickModal,teleported:t.previewTeleported,"close-on-press-escape":t.closeOnPressEscape,onClose:F,onSwitch:ee},{default:E(()=>[t.$slots.viewer?(h(),x("div",ct,[te(t.$slots,"viewer")])):C("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"])):C("v-if",!0)],64)):C("v-if",!0)],6))}});var vt=ke(ft,[["__file","image.vue"]]);const kt=he(vt);export{kt as E};
|
