2023-10-23 17:13:34 +08:00

2 lines
5.7 KiB
JavaScript

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