| 1 |
- import{bu as ve,g as me,aD as be,aE as pe,bj as ge,bk as Y,d as M,bv as V,bw as ke,bx as we,bl as xe,aF as _e,by as Ie,r as C,bz as ye,be as ze,e as w,O as W,ao as Ce,z as he,o as h,j as K,i,w as p,k as m,a0 as f,a,ax as U,ba as Oe,l as O,aP as x,aO as Ne,c as F,F as Z,bA as Te,bB as Ae,bC as Ee,bD as Le,P as Re,bE as Xe,bF as Ye,C as Fe,D as Se,a6 as De,aG as Be,a2 as Pe,bG as $e,aH as je,br as E,bH as z,bI as Ge,aI as He,__tla as Me}from"./index-20ebf448.js";let q,N,Ve=Promise.all([(()=>{try{return Me}catch{}})()]).then(async()=>{N=function(g,T,v){var l=!0,b=!0;if(typeof g!="function")throw new TypeError("Expected a function");return ve(v)&&(l="leading"in v?!!v.leading:l,b="trailing"in v?!!v.trailing:b),me(g,T,{leading:l,maxWait:T,trailing:b})};const J=be({urlList:{type:pe(Array),default:()=>ge([])},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}}),Q={close:()=>!0,switch:g=>Y(g),rotate:g=>Y(g)},ee=["src"],ae=M({name:"ElImageViewer"});q=He(je(M({...ae,props:J,emits:Q,setup(g,{expose:T,emit:v}){const l=g,b={CONTAIN:{name:"contain",icon:V(ke)},ORIGINAL:{name:"original",icon:V(we)}},{t:se}=xe(),n=_e("image-viewer"),{nextZIndex:le}=Ie(),L=C(),S=C([]),D=ye(),I=C(!0),k=C(l.initialIndex),A=ze(b.CONTAIN),t=C({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),ne=w(()=>{const{urlList:e}=l;return e.length<=1}),B=w(()=>k.value===0),P=w(()=>k.value===l.urlList.length-1),te=w(()=>l.urlList[k.value]),oe=w(()=>[n.e("btn"),n.e("prev"),n.is("disabled",!l.infinite&&B.value)]),ie=w(()=>[n.e("btn"),n.e("next"),n.is("disabled",!l.infinite&&P.value)]),ue=w(()=>{const{scale:e,deg:s,offsetX:o,offsetY:c,enableTransition:u}=t.value;let r=o/e,d=c/e;switch(s%360){case 90:case-270:[r,d]=[d,-r];break;case 180:case-180:[r,d]=[-r,-d];break;case 270:case-90:[r,d]=[-d,r]}const y={transform:`scale(${e}) rotate(${s}deg) translate(${r}px, ${d}px)`,transition:u?"transform .3s":""};return A.value.name===b.CONTAIN.name&&(y.maxWidth=y.maxHeight="100%"),y}),ce=w(()=>Y(l.zIndex)?l.zIndex:le());function R(){D.stop(),v("close")}function re(){I.value=!1}function de(e){I.value=!1,e.target.alt=se("el.image.error")}function fe(e){if(I.value||e.button!==0||!L.value)return;t.value.enableTransition=!1;const{offsetX:s,offsetY:o}=t.value,c=e.pageX,u=e.pageY,r=N(y=>{t.value={...t.value,offsetX:s+y.pageX-c,offsetY:o+y.pageY-u}}),d=E(document,"mousemove",r);E(document,"mouseup",()=>{d()}),e.preventDefault()}function $(){t.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function j(){if(I.value)return;const e=Ge(b),s=Object.values(b),o=A.value.name,c=(s.findIndex(u=>u.name===o)+1)%e.length;A.value=b[e[c]],$()}function X(e){const s=l.urlList.length;k.value=(e+s)%s}function G(){B.value&&!l.infinite||X(k.value-1)}function H(){P.value&&!l.infinite||X(k.value+1)}function _(e,s={}){if(I.value)return;const{minScale:o,maxScale:c}=l,{zoomRate:u,rotateDeg:r,enableTransition:d}={zoomRate:l.zoomRate,rotateDeg:90,enableTransition:!0,...s};switch(e){case"zoomOut":t.value.scale>o&&(t.value.scale=Number.parseFloat((t.value.scale/u).toFixed(3)));break;case"zoomIn":t.value.scale<c&&(t.value.scale=Number.parseFloat((t.value.scale*u).toFixed(3)));break;case"clockwise":t.value.deg+=r,v("rotate",t.value.deg);break;case"anticlockwise":t.value.deg-=r,v("rotate",t.value.deg)}t.value.enableTransition=d}return W(te,()=>{Ce(()=>{const e=S.value[0];e!=null&&e.complete||(I.value=!0)})}),W(k,e=>{$(),v("switch",e)}),he(()=>{var e,s;(function(){const o=N(u=>{switch(u.code){case z.esc:l.closeOnPressEscape&&R();break;case z.space:j();break;case z.left:G();break;case z.up:_("zoomIn");break;case z.right:H();break;case z.down:_("zoomOut")}}),c=N(u=>{_((u.deltaY||u.deltaX)<0?"zoomIn":"zoomOut",{zoomRate:l.zoomRate,enableTransition:!1})});D.run(()=>{E(document,"keydown",o),E(document,"wheel",c)})})(),(s=(e=L.value)==null?void 0:e.focus)==null||s.call(e)}),T({setActiveItem:X}),(e,s)=>(h(),K($e,{to:"body",disabled:!e.teleported},[i(Pe,{name:"viewer-fade",appear:""},{default:p(()=>[m("div",{ref_key:"wrapper",ref:L,tabindex:-1,class:f(a(n).e("wrapper")),style:U({zIndex:a(ce)})},[m("div",{class:f(a(n).e("mask")),onClick:s[0]||(s[0]=Oe(o=>e.hideOnClickModal&&R(),["self"]))},null,2),O(" CLOSE "),m("span",{class:f([a(n).e("btn"),a(n).e("close")]),onClick:R},[i(a(x),null,{default:p(()=>[i(a(Ne))]),_:1})],2),O(" ARROW "),a(ne)?O("v-if",!0):(h(),F(Z,{key:0},[m("span",{class:f(a(oe)),onClick:G},[i(a(x),null,{default:p(()=>[i(a(Te))]),_:1})],2),m("span",{class:f(a(ie)),onClick:H},[i(a(x),null,{default:p(()=>[i(a(Ae))]),_:1})],2)],64)),O(" ACTIONS "),m("div",{class:f([a(n).e("btn"),a(n).e("actions")])},[m("div",{class:f(a(n).e("actions__inner"))},[i(a(x),{onClick:s[1]||(s[1]=o=>_("zoomOut"))},{default:p(()=>[i(a(Ee))]),_:1}),i(a(x),{onClick:s[2]||(s[2]=o=>_("zoomIn"))},{default:p(()=>[i(a(Le))]),_:1}),m("i",{class:f(a(n).e("actions__divider"))},null,2),i(a(x),{onClick:j},{default:p(()=>[(h(),K(Re(a(A).icon)))]),_:1}),m("i",{class:f(a(n).e("actions__divider"))},null,2),i(a(x),{onClick:s[3]||(s[3]=o=>_("anticlockwise"))},{default:p(()=>[i(a(Xe))]),_:1}),i(a(x),{onClick:s[4]||(s[4]=o=>_("clockwise"))},{default:p(()=>[i(a(Ye))]),_:1})],2)],2),O(" CANVAS "),m("div",{class:f(a(n).e("canvas"))},[(h(!0),F(Z,null,Fe(e.urlList,(o,c)=>Se((h(),F("img",{ref_for:!0,ref:u=>S.value[c]=u,key:o,src:o,style:U(a(ue)),class:f(a(n).e("img")),onLoad:re,onError:de,onMousedown:fe},null,46,ee)),[[De,c===k.value]])),128))],2),Be(e.$slots,"default")],6)]),_:3})],8,["disabled"]))}}),[["__file","/home/runner/work/element-plus/element-plus/packages/components/image-viewer/src/image-viewer.vue"]]))});export{q as E,Ve as __tla,N as t};
|
