el-image-viewer-cb95201d.js 5.7 KB

1
  1. import{bJ as me,aH as ve,aJ as be,aK as pe,aT as ge,bw as E,d as V,bK as H,bL as ke,bM as _e,b2 as we,aL as xe,bN as Ie,r as N,bO as ye,aW as ze,M as _,N as K,am as Ne,q as he,o as h,x as Q,f as i,w as p,g as v,X as f,a,aA as Z,a_ as Oe,a3 as O,a$ as w,b4 as Ce,c as S,F as j,bP as Te,bQ as Ae,bR as Le,bS as Re,O as Xe,bT as Ye,bU as Ee,v as Se,z as Me,a2 as $e,aM as Fe,Y as We,bV as Be,aN as Pe,bW as L,bX as z,bY as De,aO as Je,__tla as Ve}from"./index-dbf77a14.js";let q,C,He=Promise.all([(()=>{try{return Ve}catch{}})()]).then(async()=>{C=function(g,T,m){var n=!0,b=!0;if(typeof g!="function")throw new TypeError("Expected a function");return me(m)&&(n="leading"in m?!!m.leading:n,b="trailing"in m?!!m.trailing:b),ve(g,T,{leading:n,maxWait:T,trailing:b})};const G=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}}),U={close:()=>!0,switch:g=>E(g),rotate:g=>E(g)},ee=["src"],ae=V({name:"ElImageViewer"});q=Je(Pe(V({...ae,props:G,emits:U,setup(g,{expose:T,emit:m}){const n=g,b={CONTAIN:{name:"contain",icon:H(ke)},ORIGINAL:{name:"original",icon:H(_e)}},{t:se}=we(),l=xe("image-viewer"),{nextZIndex:ne}=Ie(),R=N(),M=N([]),$=ye(),I=N(!0),k=N(n.initialIndex),A=ze(b.CONTAIN),t=N({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),le=_(()=>{const{urlList:e}=n;return e.length<=1}),F=_(()=>k.value===0),W=_(()=>k.value===n.urlList.length-1),te=_(()=>n.urlList[k.value]),oe=_(()=>[l.e("btn"),l.e("prev"),l.is("disabled",!n.infinite&&F.value)]),ie=_(()=>[l.e("btn"),l.e("next"),l.is("disabled",!n.infinite&&W.value)]),ce=_(()=>{const{scale:e,deg:s,offsetX:o,offsetY:u,enableTransition:c}=t.value;let r=o/e,d=u/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:c?"transform .3s":""};return A.value.name===b.CONTAIN.name&&(y.maxWidth=y.maxHeight="100%"),y}),ue=_(()=>E(n.zIndex)?n.zIndex:ne());function X(){$.stop(),m("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||!R.value)return;t.value.enableTransition=!1;const{offsetX:s,offsetY:o}=t.value,u=e.pageX,c=e.pageY,r=C(y=>{t.value={...t.value,offsetX:s+y.pageX-u,offsetY:o+y.pageY-c}}),d=L(document,"mousemove",r);L(document,"mouseup",()=>{d()}),e.preventDefault()}function B(){t.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function P(){if(I.value)return;const e=De(b),s=Object.values(b),o=A.value.name,u=(s.findIndex(c=>c.name===o)+1)%e.length;A.value=b[e[u]],B()}function Y(e){const s=n.urlList.length;k.value=(e+s)%s}function D(){F.value&&!n.infinite||Y(k.value-1)}function J(){W.value&&!n.infinite||Y(k.value+1)}function x(e,s={}){if(I.value)return;const{minScale:o,maxScale:u}=n,{zoomRate:c,rotateDeg:r,enableTransition:d}={zoomRate:n.zoomRate,rotateDeg:90,enableTransition:!0,...s};switch(e){case"zoomOut":t.value.scale>o&&(t.value.scale=Number.parseFloat((t.value.scale/c).toFixed(3)));break;case"zoomIn":t.value.scale<u&&(t.value.scale=Number.parseFloat((t.value.scale*c).toFixed(3)));break;case"clockwise":t.value.deg+=r,m("rotate",t.value.deg);break;case"anticlockwise":t.value.deg-=r,m("rotate",t.value.deg)}t.value.enableTransition=d}return K(te,()=>{Ne(()=>{const e=M.value[0];e!=null&&e.complete||(I.value=!0)})}),K(k,e=>{B(),m("switch",e)}),he(()=>{var e,s;(function(){const o=C(c=>{switch(c.code){case z.esc:n.closeOnPressEscape&&X();break;case z.space:P();break;case z.left:D();break;case z.up:x("zoomIn");break;case z.right:J();break;case z.down:x("zoomOut")}}),u=C(c=>{x((c.deltaY||c.deltaX)<0?"zoomIn":"zoomOut",{zoomRate:n.zoomRate,enableTransition:!1})});$.run(()=>{L(document,"keydown",o),L(document,"wheel",u)})})(),(s=(e=R.value)==null?void 0:e.focus)==null||s.call(e)}),T({setActiveItem:Y}),(e,s)=>(h(),Q(Be,{to:"body",disabled:!e.teleported},[i(We,{name:"viewer-fade",appear:""},{default:p(()=>[v("div",{ref_key:"wrapper",ref:R,tabindex:-1,class:f(a(l).e("wrapper")),style:Z({zIndex:a(ue)})},[v("div",{class:f(a(l).e("mask")),onClick:s[0]||(s[0]=Oe(o=>e.hideOnClickModal&&X(),["self"]))},null,2),O(" CLOSE "),v("span",{class:f([a(l).e("btn"),a(l).e("close")]),onClick:X},[i(a(w),null,{default:p(()=>[i(a(Ce))]),_:1})],2),O(" ARROW "),a(le)?O("v-if",!0):(h(),S(j,{key:0},[v("span",{class:f(a(oe)),onClick:D},[i(a(w),null,{default:p(()=>[i(a(Te))]),_:1})],2),v("span",{class:f(a(ie)),onClick:J},[i(a(w),null,{default:p(()=>[i(a(Ae))]),_:1})],2)],64)),O(" ACTIONS "),v("div",{class:f([a(l).e("btn"),a(l).e("actions")])},[v("div",{class:f(a(l).e("actions__inner"))},[i(a(w),{onClick:s[1]||(s[1]=o=>x("zoomOut"))},{default:p(()=>[i(a(Le))]),_:1}),i(a(w),{onClick:s[2]||(s[2]=o=>x("zoomIn"))},{default:p(()=>[i(a(Re))]),_:1}),v("i",{class:f(a(l).e("actions__divider"))},null,2),i(a(w),{onClick:P},{default:p(()=>[(h(),Q(Xe(a(A).icon)))]),_:1}),v("i",{class:f(a(l).e("actions__divider"))},null,2),i(a(w),{onClick:s[3]||(s[3]=o=>x("anticlockwise"))},{default:p(()=>[i(a(Ye))]),_:1}),i(a(w),{onClick:s[4]||(s[4]=o=>x("clockwise"))},{default:p(()=>[i(a(Ee))]),_:1})],2)],2),O(" CANVAS "),v("div",{class:f(a(l).e("canvas"))},[(h(!0),S(j,null,Se(e.urlList,(o,u)=>Me((h(),S("img",{ref_for:!0,ref:c=>M.value[u]=c,key:o,src:o,style:Z(a(ce)),class:f(a(l).e("img")),onLoad:re,onError:de,onMousedown:fe},null,46,ee)),[[$e,u===k.value]])),128))],2),Fe(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,He as __tla,C as t};