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