2023-11-15 15:57:04 +08:00

2 lines
5.8 KiB
JavaScript

import{a as ie,v as ue,T as ce}from"./event-f85d77b0.js";import{c as O}from"./index-bcd7a424.js";import{b as de,d as fe,a as U,ad as me,ae as ve,E as k,a0 as pe,h as ge,j as be,af as ke,ag as we,ah as _e,ai as Ie}from"./index-cf9a2dd7.js";import{m as he}from"./index-e27c3bb0.js";import{b7 as xe,d as q,ay as P,b as ye,r as C,aC as Ce,s as Ee,c as x,w as j,E as ze,o as Ne,e as E,v as W,y as l,x as p,g as d,n as c,u as e,j as Z,H as z,f as V,F as G,S as Te,z as Oe,M as Le,h as Re,a5 as Ae,_ as Ve,k as Xe,l as $e}from"./plugin-vue_export-helper-85a4d40b.js";import{u as Me,E as y}from"./index-1ad115d7.js";import{u as Se}from"./focus-trap-64c402c5.js";import{d as Ye}from"./debounce-6c3123a6.js";var Be="Expected a function";function X(_,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),Ye(_,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:_=>U(_)},He=["src"],Pe=q({name:"ElImageViewer"}),je=q({...Pe,props:Fe,emits:De,setup(_,{expose:N,emit:g}){const o=_,f={CONTAIN:{name:"contain",icon:P(me)},ORIGINAL:{name:"original",icon:P(ve)}},{t:J}=Me(),s=ye("image-viewer"),{nextZIndex:K}=Se(),L=C(),$=C([]),M=Ce(),I=C(!0),b=C(o.initialIndex),T=Ee(f.CONTAIN),r=C({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),Q=x(()=>{const{urlList:a}=o;return a.length<=1}),S=x(()=>b.value===0),Y=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(()=>U(o.zIndex)?o.zIndex:K());function R(){se(),g("close")}function ne(){const a=X(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:H();break;case y.down:w("zoomOut");break}}),t=X(n=>{const i=n.deltaY||n.deltaX;w(i<0?"zoomIn":"zoomOut",{zoomRate:o.zoomRate,enableTransition:!1})});M.run(()=>{O(document,"keydown",a),O(document,"wheel",t)})}function se(){M.stop()}function oe(){I.value=!1}function le(a){I.value=!1,a.target.alt=J("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=X(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=Xe(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(a){const t=o.urlList.length;b.value=(a+t)%t}function D(){S.value&&!o.infinite||A(b.value-1)}function H(){Y.value&&!o.infinite||A(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 j(ee,()=>{ze(()=>{const a=$.value[0];a!=null&&a.complete||(I.value=!0)})}),j(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}),(a,t)=>(E(),W(Ae,{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:Z({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(Q)?z("v-if",!0):(E(),V(G,{key:0},[d("span",{class:c([e(s).e("btn"),e(s).e("prev"),e(s).is("disabled",!a.infinite&&e(S))]),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(Y))]),onClick:H},[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(()=>[(E(),W(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"))},[(E(!0),V(G,null,Oe(a.urlList,(n,i)=>Le((E(),V("img",{ref_for:!0,ref:m=>$.value[i]=m,key:n,src:n,style:Z(e(ae)),class:c(e(s).e("img")),onLoad:oe,onError:le,onMousedown:re},null,46,He)),[[ue,i===b.value]])),128))],2),Re(a.$slots,"default")],6)]),_:3})],8,["disabled"]))}});var We=Ve(je,[["__file","/home/runner/work/element-plus/element-plus/packages/components/image-viewer/src/image-viewer.vue"]]);const aa=$e(We);export{aa as E,X as t};