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