@gx-design-vue/image 0.2.0-beta.26 → 0.2.0-beta.28

package/dist/image.umd.cjs

@@ -1 +1 @@
-(function(v,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@gx-design-vue/pro-hooks"),require("@gx-design-vue/pro-provider"),require("@gx-design-vue/pro-utils"),require("@vueuse/core"),require("lodash-es"),require("@ant-design/icons-vue"),require("@ctrl/tinycolor")):typeof define=="function"&&define.amd?define(["exports","vue","@gx-design-vue/pro-hooks","@gx-design-vue/pro-provider","@gx-design-vue/pro-utils","@vueuse/core","lodash-es","@ant-design/icons-vue","@ctrl/tinycolor"],t):(v=typeof globalThis<"u"?globalThis:v||self,t(v.GImage={},v.vue,v.proHooks,v.proProvider,v.proUtils,v.core,v.lodashEs,v.iconsVue,v.tinycolor))})(this,function(v,t,oe,y,u,ie,we,L,_){"use strict";function Le(e,n){process.env.NODE_ENV!=="production"&&!e&&console!==void 0&&console.error(`Warning: ${n}`)}let ve=e=>setTimeout(e,16),he=e=>clearTimeout(e);typeof window<"u"&&"requestAnimationFrame"in window&&(ve=e=>window.requestAnimationFrame(e),he=e=>window.cancelAnimationFrame(e));let Se=0;const ae=new Map;function Ne(e){ae.delete(e)}function re(e,n=1){Se+=1;const a=Se;function l(i){if(i===0)Ne(a),e();else{const g=ve(()=>{l(i-1)});ae.set(a,g)}}return l(n),a}re.cancel=e=>{const n=ae.get(e);return Ne(n),he(n)};function Te(e){const n=t.ref(null),a=t.reactive({...e}),l=t.ref([]),i=g=>{n.value===null&&(l.value=[],n.value=re(()=>{let c;l.value.forEach(f=>{c={...c,...f}}),Object.assign(a,c),n.value=null})),l.value.push(g)};return t.onMounted(()=>{n.value&&re.cancel(n.value)}),[a,i]}const F={infinite:{type:Boolean,default:!0},zIndex:{type:Number,default:2e3},current:{type:Number,default:0},getContainer:{type:String}},le={preview:{type:Object,default:()=>({current:0,infinite:!0,onHideOnClickModal:!0})},showPreview:{type:Boolean,default:!0},src:{type:String,default:""},alt:{type:String,default:""},fit:{type:String,default:"contain"},lazy:Boolean,scrollContainer:{type:[String,Object]},placeholder:{type:[Function,Object],default:()=>{}},fallback:{type:[Function,Object],default:()=>{}},onLoad:{type:Function},onError:{type:Function},onClick:{type:Function},imageClassName:String,imageStyle:Object,width:Number,height:Number,zIndex:F.zIndex,getContainer:F.getContainer},V={previewUrls:{type:Array,default:()=>[]},disabled:Boolean,zIndex:F.zIndex,current:F.current,infinite:F.infinite,getContainer:le.getContainer,onHideOnClickModal:{type:Boolean,default:!0},countRender:[Function,Array,Object],icons:{type:Object,default:()=>({})}},be=t.defineComponent({name:"Operations",inheritAttrs:!1,props:{open:Boolean,count:{type:Number,default:0},current:{type:Number,default:0},showSwitch:Boolean,showProgress:Boolean,prefixCls:String,hashId:String,zIndex:V.zIndex,icons:V.icons,infinite:V.infinite,getContainer:V.getContainer,countRender:V.countRender,tools:Array,onClose:Function,onActive:Function},setup(e){const n=(a,l)=>{var i;a.preventDefault(),a.stopPropagation(),(i=e.onActive)==null||i.call(e,l)};return()=>{const{prefixCls:a,hashId:l,tools:i}=e,g=y.getTransitionProps(`${e.prefixCls}-fade`),c=`${a}-operations-operation`,f=`${a}-operations-icon`;return t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[t.createVNode(t.Transition,g,{default:()=>{var p,h,I,M;return[t.withDirectives(t.createVNode("div",{class:u.classNames(`${a}-operations-wrapper`,l),style:{zIndex:e.zIndex}},[((p=e.icons)==null?void 0:p.close)===null?null:t.createVNode("button",{class:`${a}-close ${l}`,onClick:e.onClose},[((h=e.icons)==null?void 0:h.close)||t.createVNode(L.CloseOutlined,null,null)]),e.showSwitch&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:u.classNames(`${a}-switch-left ${l}`,{[`${a}-switch-left-disabled`]:e.infinite?!1:e.current===0}),onClick:m=>n(m,-1)},[((I=e.icons)==null?void 0:I.left)||t.createVNode(L.LeftOutlined,null,null)]),t.createVNode("div",{class:u.classNames(`${a}-switch-right ${l}`,{[`${a}-switch-right-disabled`]:e.infinite?!1:e.current===e.count-1}),onClick:m=>n(m,1)},[((M=e.icons)==null?void 0:M.right)||t.createVNode(L.RightOutlined,null,null)])]),t.createVNode("div",{class:`${a}-footer ${l}`},[e.showProgress&&t.createVNode("div",{class:`${a}-progress`},[e.countRender?e.countRender(e.current+1,e.count):`${e.current+1} / ${e.count}`]),t.createVNode("div",{class:`${e.prefixCls}-operations`},[i==null?void 0:i.map(({icon:m,onClick:d,type:O,disabled:S})=>t.createVNode("div",{class:u.classNames(c,{[`${e.prefixCls}-operations-operation-disabled`]:S&&(S==null?void 0:S.value)}),onClick:d,key:O},[t.cloneVNode(m,{class:f})]))])])]),[[t.vShow,e.open]])]}})]})}}}),Pe=new y.Keyframe("viewFadeIn",{"0%":{opacity:0},"100%":{opacity:1}}),Re=new y.Keyframe("viewFadeOut",{"0%":{opacity:1},"100%":{opacity:0}}),$e=new y.Keyframe("viewZoomBadgeIn",{"0%":{transform:"scale(0.2)",opacity:0},"100%":{transform:"scale(1)",opacity:1}}),De=new y.Keyframe("viewZoomBadgeOut",{"0%":{transform:"scale(1)"},"100%":{transform:"scale(0.2)",opacity:0}}),Ie=e=>({position:e||"absolute",inset:0});function se(e){return{position:e,top:0,insetInlineEnd:0,bottom:0,insetInlineStart:0}}const ze=e=>{const{previewCls:n,modalMaskBg:a,paddingSM:l,marginXL:i,margin:g,paddingLG:c,previewOperationColorDisabled:f,previewOperationHoverColor:p,motionDurationSlow:h,iconCls:I,colorTextLightSolid:M}=e,m=new _.TinyColor(a).setAlpha(.1),d=m.clone().setAlpha(.2);return{[`${n}-footer`]:{position:"fixed",bottom:i,left:{_skip_check_:!0,value:"50%"},display:"flex",flexDirection:"column",alignItems:"center",color:e.previewOperationColor,transform:"translateX(-50%)"},[`${n}-progress`]:{marginBottom:g},[`${n}-close`]:{position:"fixed",top:i,right:{_skip_check_:!0,value:i},display:"flex",color:M,backgroundColor:m.toRgbString(),borderRadius:"50%",padding:l,outline:0,border:0,cursor:"pointer",transition:`all ${h}`,"&:hover":{backgroundColor:d.toRgbString()},[`& > ${I}`]:{fontSize:e.previewOperationSize}},[`${n}-operations`]:{display:"flex",alignItems:"center",padding:`0 ${y.unit(c)}`,backgroundColor:m.toRgbString(),borderRadius:100,"&-operation":{marginInlineStart:l,padding:l,cursor:"pointer",transition:`all ${h}`,userSelect:"none",[`&:not(${n}-operations-operation-disabled):hover > ${I}`]:{color:p},"&-disabled":{color:f,cursor:"not-allowed"},"&:first-of-type":{marginInlineStart:0},[`& > ${I}`]:{fontSize:e.previewOperationSize}}}}},_e=e=>{const{modalMaskBg:n,iconCls:a,previewOperationColorDisabled:l,previewCls:i,zIndexPopup:g,motionDurationSlow:c}=e,f=new _.TinyColor(n).setAlpha(.1),p=f.clone().setAlpha(.2);return{[`${i}-switch-left, ${i}-switch-right`]:{position:"fixed",insetBlockStart:"50%",zIndex:e.calc(g).add(1).equal(),display:"flex",alignItems:"center",justifyContent:"center",width:e.imagePreviewSwitchSize,height:e.imagePreviewSwitchSize,marginTop:e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),color:e.previewOperationColor,background:f.toRgbString(),borderRadius:"50%",transform:"translateY(-50%)",cursor:"pointer",transition:`all ${c}`,userSelect:"none","&:hover":{background:p.toRgbString()},"&-disabled":{"&, &:hover":{color:l,background:"transparent",cursor:"not-allowed",[`> ${a}`]:{cursor:"not-allowed"}}},[`> ${a}`]:{fontSize:e.previewOperationSize}},[`${i}-switch-left`]:{insetInlineStart:e.marginSM},[`${i}-switch-right`]:{insetInlineEnd:e.marginSM}}},Fe=e=>({[e.componentCls]:{height:"100%",textAlign:"center",pointerEvents:"none","&-root":{...se("fixed"),zIndex:e.zIndexPopup,overflow:"auto",outline:0,WebkitOverflowScrolling:"touch"},"&-wrap":{...se("fixed"),zIndex:e.zIndexPopup,overflow:"auto",outline:0,WebkitOverflowScrolling:"touch"},"&-mask":{...se("fixed"),zIndex:e.zIndexPopupBase,height:"100%",backgroundColor:e.colorBgMask},"&-body":{...Ie(),overflow:"hidden"},"&-img":{maxWidth:"100%",maxHeight:"100%",verticalAlign:"middle",transform:"scale3d(1, 1, 1)",cursor:"grab",transition:`transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,userSelect:"none",pointerEvents:"auto","&-wrapper":{...Ie(),display:"flex",justifyContent:"center",alignItems:"center",transition:`transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,"&::before":{display:"inline-block",width:1,height:"50%",marginInlineEnd:-1,content:'""'}}},"&-fade-appear, &-fade-enter":{animationName:Pe,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear"},"&-fade-leave":{animationName:Re,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear"},"&-zoom-appear, &-zoom-enter":{animationName:$e,opacity:0,animationTimingFunction:e.motionEaseOutCirc,animationFillMode:"both",transform:"none",animationDuration:e.motionDurationSlow,userSelect:"none"},"&-zoom-enter-active":{animationPlayState:"running"},"&-zoom-leave":{animationName:De,animationDuration:e.motionDurationSlow,animationTimingFunction:e.motionEaseOutBack,animationFillMode:"both"}},[`${e.componentCls}-root`]:{[`${e.componentCls}-wrapper`]:{zIndex:e.zIndexPopup}},[`${e.componentCls}-operations-wrapper`]:{position:"fixed",insetBlockStart:0,insetInlineEnd:0,zIndex:e.zIndexPopup+1,width:"100%"},"&":[ze(e),_e(e)]});function Ve(e){return y.useStyle("ImageViewer",n=>{const a=y.mergeToken(n,{zIndexPopup:n.zIndexPopupBase+80,previewOperationColorDisabled:new _.TinyColor(n.colorTextLightSolid).setAlpha(.25).toRgbString(),previewOperationHoverColor:new _.TinyColor(n.colorTextLightSolid).setAlpha(.85).toRgbString(),modalMaskBg:new _.TinyColor("#000").setAlpha(.45).toRgbString(),previewOperationColor:new _.TinyColor(n.colorTextLightSolid).toRgbString(),previewOperationSize:n.fontSizeIcon*1.5,imagePreviewSwitchSize:n.controlHeightLG,iconCls:"anticon",previewCls:n.componentCls});return[Fe(a)]},e)}let Ce=!1;try{const e=Object.defineProperty({},"passive",{get(){Ce=!0}});window.addEventListener("testPassive",null,e),window.removeEventListener("testPassive",null,e)}catch{}function U(e,n,a,l){if(e&&e.addEventListener){let i=l;i===void 0&&Ce&&(n==="touchstart"||n==="touchmove"||n==="wheel")&&(i={passive:!1}),e.addEventListener(n,a,i)}return{remove:()=>{e&&e.removeEventListener&&e.removeEventListener(n,a)}}}const r={MAC_ENTER:3,BACKSPACE:8,TAB:9,NUM_CENTER:12,ENTER:13,SHIFT:16,CTRL:17,ALT:18,PAUSE:19,CAPS_LOCK:20,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40,PRINT_SCREEN:44,INSERT:45,DELETE:46,ZERO:48,ONE:49,TWO:50,THREE:51,FOUR:52,FIVE:53,SIX:54,SEVEN:55,EIGHT:56,NINE:57,QUESTION_MARK:63,A:65,B:66,C:67,D:68,E:69,F:70,G:71,H:72,I:73,J:74,K:75,L:76,M:77,N:78,O:79,P:80,Q:81,R:82,S:83,T:84,U:85,V:86,W:87,X:88,Y:89,Z:90,META:91,WIN_KEY_RIGHT:92,CONTEXT_MENU:93,NUM_ZERO:96,NUM_ONE:97,NUM_TWO:98,NUM_THREE:99,NUM_FOUR:100,NUM_FIVE:101,NUM_SIX:102,NUM_SEVEN:103,NUM_EIGHT:104,NUM_NINE:105,NUM_MULTIPLY:106,NUM_PLUS:107,NUM_MINUS:109,NUM_PERIOD:110,NUM_DIVISION:111,F1:112,F2:113,F3:114,F4:115,F5:116,F6:117,F7:118,F8:119,F9:120,F10:121,F11:122,F12:123,NUMLOCK:144,SEMICOLON:186,DASH:189,EQUALS:187,COMMA:188,PERIOD:190,SLASH:191,APOSTROPHE:192,SINGLE_QUOTE:222,OPEN_SQUARE_BRACKET:219,BACKSLASH:220,CLOSE_SQUARE_BRACKET:221,WIN_KEY:224,MAC_FF_META:224,WIN_IME:229,isTextModifyingKeyEvent:function(n){const{keyCode:a}=n;if(n.altKey&&!n.ctrlKey||n.metaKey||a>=r.F1&&a<=r.F12)return!1;switch(a){case r.ALT:case r.CAPS_LOCK:case r.CONTEXT_MENU:case r.CTRL:case r.DOWN:case r.END:case r.ESC:case r.HOME:case r.INSERT:case r.LEFT:case r.MAC_FF_META:case r.META:case r.NUMLOCK:case r.NUM_CENTER:case r.PAGE_DOWN:case r.PAGE_UP:case r.PAUSE:case r.PRINT_SCREEN:case r.RIGHT:case r.SHIFT:case r.UP:case r.WIN_KEY:case r.WIN_KEY_RIGHT:return!1;default:return!0}},isCharacterKey:function(n){if(n>=r.ZERO&&n<=r.NINE||n>=r.NUM_ZERO&&n<=r.NUM_MULTIPLY||n>=r.A&&n<=r.Z||window.navigator.userAgent.includes("WebKit")&&n===0)return!0;switch(n){case r.SPACE:case r.QUESTION_MARK:case r.NUM_PLUS:case r.NUM_MINUS:case r.NUM_PERIOD:case r.NUM_DIVISION:case r.SEMICOLON:case r.DASH:case r.EQUALS:case r.COMMA:case r.PERIOD:case r.SLASH:case r.APOSTROPHE:case r.SINGLE_QUOTE:case r.OPEN_SQUARE_BRACKET:case r.BACKSLASH:case r.CLOSE_SQUARE_BRACKET:return!0;default:return!1}}};function Ue(e){const n=e.getBoundingClientRect(),a=document.documentElement;return{left:n.left+(window.scrollX||a.scrollLeft)-(a.clientLeft||document.body.clientLeft||0),top:n.top+(window.scrollY||a.scrollTop)-(a.clientTop||document.body.clientTop||0)}}function je(){const e=document.documentElement.clientWidth,n=window.innerHeight||document.documentElement.clientHeight;return{width:e,height:n}}function Ee(e,n,a,l){const i=n+a,g=(a-l)/2;if(a>l){if(n>0)return{[e]:g};if(n<0&&i<l)return{[e]:-g}}else if(n<0||i>l)return{[e]:n<0?g:-g};return{}}function Be(e,n,a,l){const{width:i,height:g}=je();let c=null;return e<=i&&n<=g?c={x:0,y:0}:(e>i||n>g)&&(c={...Ee("x",a,e,i),...Ee("y",l,n,g)}),c}const $={x:0,y:0},j={rotateLeft:t.createVNode(L.RotateLeftOutlined,null,null),rotateRight:t.createVNode(L.RotateRightOutlined,null,null),zoomIn:t.createVNode(L.ZoomInOutlined,null,null),zoomOut:t.createVNode(L.ZoomOutOutlined,null,null),flipX:t.createVNode(L.SwapOutlined,null,null),flipY:t.createVNode(L.SwapOutlined,{rotate:90},null)},pe=["close","left","right","rotateRight","rotateRight","zoomOut","flipX","flipY","rotateLeft"],ye=t.defineComponent({name:"GImagePreview",props:V,inheritAttrs:!1,emits:["close","switch","afterClose"],emit:Object,setup:(e,{emit:n,expose:a,slots:l})=>{const i=u.getPrefixCls({suffixCls:"image-view"}),{wrapSSR:g,hashId:c}=Ve(i),[f,p]=oe.useState(!1),[h,I]=oe.useState(!1),M=t.ref(null),m=t.ref(e.current),d=t.shallowRef(1),O=t.shallowRef(0),S=t.shallowRef(!1),x=t.reactive({x:1,y:1}),[C,b]=Te($),G=t.shallowRef({wheelDirection:0}),D=t.shallowRef(),A=t.reactive({originX:0,originY:0,deltaX:0,deltaY:0}),z=t.reactive(new Map),H=t.computed(()=>new Map(Array.from(z).map(([o,{url:w}])=>[o,w]))),Q=t.computed(()=>H.value.get(m.value)),K=t.computed(()=>H.value.size),W=t.computed(()=>Array.from(H.value.keys())),P=t.computed(()=>W.value.indexOf(m.value)),k=t.computed(()=>K.value>1),X=t.computed(()=>K.value>=1);t.watch(f,o=>{o&&(h.value=!0)});const s=o=>{m.value=o};t.watch(()=>e.current,o=>{u.isNumber(o)&&s(o)});function N(o,w){z.set(o,{url:w,loading:!0,canPreview:!1})}const T=()=>{I(!1),m.value=e.current},ue=()=>{d.value=1,O.value=0,x.x=1,x.y=1,b($),n("close")},de=o=>{S.value||M.value===(o==null?void 0:o.target)&&T()},fe=()=>{const o=z.get(m.value);o&&(o.loading=!1,o.canPreview=!0)},q=o=>{const w=z.get(m.value);w&&(w.loading=!1,w.canPreview=!1),o.target.alt="加载失败"},J=()=>{if(P.value>0||e.infinite){const o=P.value-1<0?e.previewUrls.length-1:P.value-1;s(W.value[o])}},ee=()=>{if(P.value<K.value-1||e.infinite){const o=P.value+1>e.previewUrls.length-1?0:P.value+1;s(W.value[o])}},Y=o=>{o?d.value+=.5:d.value++,b($)},Z=o=>{d.value>1&&(o?d.value-=.5:d.value--),b($)},ge=()=>{O.value+=90},We=()=>{O.value-=90},Xe=()=>{x.x=-x.x},Ze=()=>{x.y=-x.y},Oe=[{icon:u.getSlotVNode(l,e.icons,"zoomIn")||j.zoomIn,onClick:()=>Y(),type:"zoomIn"},{icon:u.getSlotVNode(l,e.icons,"zoomOut")||j.zoomOut,onClick:()=>Z(),type:"zoomOut",disabled:t.computed(()=>d.value===1)},{icon:u.getSlotVNode(l,e.icons,"rotateRight")||j.rotateRight,onClick:ge,type:"rotateRight"},{icon:u.getSlotVNode(l,e.icons,"rotateLeft")||j.rotateLeft,onClick:We,type:"rotateLeft"},{icon:u.getSlotVNode(l,e.icons,"flipX")||j.flipX,onClick:Xe,type:"flipX"},{icon:u.getSlotVNode(l,e.icons,"flipY")||j.flipY,onClick:Ze,type:"flipY"}],xe=()=>{if(f.value&&S.value&&D.value){const o=D.value.offsetWidth*d.value,w=D.value.offsetHeight*d.value,{left:R,top:E}=Ue(D.value),te=O.value%180!==0;S.value=!1;const ne=Be(te?w:o,te?o:w,R,E);ne&&b({...ne})}},Qe=o=>{o.button===0&&(o.preventDefault(),o.stopPropagation(),A.deltaX=o.pageX-C.x,A.deltaY=o.pageY-C.y,A.originX=C.x,A.originY=C.y,S.value=!0)},Ae=o=>{f.value&&S.value&&b({x:o.pageX-A.deltaX,y:o.pageY-A.deltaY})},ke=o=>{if(!f.value)return;o.preventDefault();const w=o.deltaY;G.value={wheelDirection:w}},qe=o=>{!f.value||!k.value||(o.keyCode===r.LEFT?J():o.keyCode===r.RIGHT&&ee())},Je=()=>{f.value&&(d.value!==1&&(d.value=1),(C.x!==$.x||C.y!==$.y)&&b($))};let me=()=>{};return t.onMounted(()=>{t.watch(()=>e.previewUrls,o=>{u.isArray(o)&&o.forEach((w,R)=>{N(R,w)})},{flush:"post",immediate:!0}),t.watch([()=>f.value,S],()=>{me();let o,w;const R=U(window,"mouseup",xe,!1),E=U(window,"mousemove",Ae,!1),te=U(window,"wheel",ke,{passive:!1}),ne=U(window,"keydown",qe,!1);try{window.top!==window.self&&(o=U(window.top,"mouseup",xe,!1),w=U(window.top,"mousemove",Ae,!1))}catch(et){Le(!1,`[vc-image] ${et}`)}me=()=>{R.remove(),E.remove(),te.remove(),ne.remove(),o&&o.remove(),w&&w.remove()}},{flush:"post",immediate:!0}),t.watch([G],()=>{const{wheelDirection:o}=G.value;o>0?Z(!0):o<0&&Y(!0)})}),t.onUnmounted(()=>{me()}),a({setOpen:p}),()=>{const o=y.getTransitionProps(`${i}-fade`),w=y.getTransitionProps(`${i}-zoom`),R={};for(const E in e.icons)R[E]=u.getSlotVNode(l,e.icons,E);return g(t.createVNode(t.Fragment,null,[t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[f.value&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:`${i}-root ${c.value}`},[t.createVNode(t.Transition,o,{default:()=>[t.withDirectives(t.createVNode("div",{class:`${i}-mask ${c.value}`},null),[[t.vShow,f.value&&h.value]])]}),t.createVNode("div",{ref:M,tabindex:-1,class:[`${i}-wrap`,`${c.value}`],onClick:E=>e.onHideOnClickModal&&de(E)},[t.createVNode(t.Transition,t.mergeProps(w,{onAfterLeave:()=>ue()}),{default:()=>[t.withDirectives(t.createVNode("div",{role:"dialog",class:`${i} ${c.value}`},[t.createVNode("div",{class:`${i}-content ${c.value}`},[t.createVNode("div",{class:`${i}-body ${c.value}`},[t.createVNode("div",{class:`${i}-img-wrapper ${c.value}`,style:{transform:`translate3d(${C.x}px, ${C.y}px, 0)`}},[t.createVNode("img",{onMousedown:Qe,onDblclick:Je,ref:D,class:`${i}-img ${c.value}`,src:Q.value,onLoad:()=>fe(),onError:E=>q(E),style:{transform:`scale3d(${x.x*d.value}, ${x.y*d.value}, 1) rotate(${O.value}deg)`}},null)])])])]),[[t.vShow,f.value&&h.value]])]})])])])]}),f.value&&h.value&&t.createVNode(be,{open:f.value&&h.value,hashId:c.value,count:e.previewUrls.length,current:m.value,zIndex:e.zIndex+1,getContainer:e.getContainer,prefixCls:i,icons:we.omit(R,Oe.map(({type:E})=>E)),tools:Oe,infinite:e.infinite,countRender:u.getSlot(l,e,"countRenders"),showSwitch:k.value,showProgress:X.value,onClose:T,onActive:E=>E>0?ee():J()},null)]))}}}),ce={width:"100%",height:"100%"},He=()=>({position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",opacity:0}),Ke=e=>({[e.componentCls]:{display:"inline-block",position:"relative",overflow:"hidden","&-inner":{...ce,verticalAlign:"top",opacity:1,[`&${e.componentCls}-inner-preview`]:{userSelect:"none"}},"&-placeholder":{...ce,backgroundColor:e.colorBgContainerDisabled,backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",backgroundRepeat:"no-repeat",backgroundPosition:"center center",backgroundSize:"30%"},"&-error":{...ce,display:"flex",alignItems:"center",justifyContent:"center",color:e.colorText,backgroundColor:e.colorBgContainerDisabled},"&-preview":He()}}),Ye=e=>e&&e.nodeType===Node.ELEMENT_NODE;let Me="";const Ge=[...pe,"fallback","placeholder"],B=t.defineComponent({props:le,name:"GImage",emits:["error","click","load"],slots:Object,setup(e,{slots:n,emit:a,attrs:l}){const i=u.getPrefixCls({suffixCls:"image"}),{wrapSSR:g,hashId:c}=y.useProStyle("Image",[Ke],i),f=t.ref(),p=t.ref(""),h=t.ref(!1),I=t.ref(!0),M=t.ref(!1),m=t.ref(null),d=t.ref();let O,S;const x=t.computed(()=>!u.isServer&&e.fit?{"object-fit":e.fit}:{}),C=t.computed(()=>{const{previewUrls:s}=e.preview;return u.isArray(s)&&s.length>0||e.showPreview}),b=t.computed(()=>{const{previewUrls:s=[],current:N=0}=e.preview;if(u.isNumber(N))return s.length>=N?N:0;const T=s.indexOf(e.src);return T>=0?T:0}),G=s=>{p.value=e.src,I.value=!1,h.value=!1,a("load",s)},D=s=>{I.value=!1,h.value=!0,a("error",s)},A=()=>{if(u.isServer)return;I.value=!0,h.value=!1;const s=new Image;s.onload=N=>G(N),s.onerror=D,Object.keys(l||{}).forEach(N=>{if(N.toLowerCase()==="onload")return;const T=(l||{})[N];s.setAttribute(N,T)}),s.src=e.src},z=ie.useThrottleFn(Q,200),H=()=>{u.isServer||!d.value||!z||(O(),d.value=void 0)};function Q(){u.isInContainer(m.value,d.value)&&(A(),H())}const K=async()=>{if(u.isServer)return;await t.nextTick();const{scrollContainer:s}=e;Ye(s)?d.value=s:u.isString(s)&&s!==""?d.value=document.querySelector(s)??void 0:m.value&&(d.value=u.getScrollContainer(m.value)),d.value&&(O=ie.useEventListener(d,"scroll",z),setTimeout(()=>Q(),200))},W=s=>{if(s.ctrlKey){if(s.deltaY<0)return s.preventDefault(),!1;if(s.deltaY>0)return s.preventDefault(),!1}},P=()=>{C.value&&(S=ie.useEventListener("wheel",W,{passive:!1}),Me=document.body.style.overflow,document.body.style.overflow="hidden",M.value=!0)},k=()=>{S==null||S(),document.body.style.overflow=Me,M.value=!1};t.watch(()=>e.src,()=>{e.lazy?(I.value=!0,h.value=!1,H(),K()):A()}),t.watchEffect(()=>{var s,N;C.value&&M.value?(s=f.value)==null||s.setOpen(!0):(N=f.value)==null||N.setOpen(!1)});const X=s=>u.isNumber(s)?s+"px":s;return oe.onMountedOrActivated(()=>{e.lazy?K():A()}),()=>{var Z;const{crossorigin:s,decoding:N,alt:T,sizes:ue,srcset:de,usemap:fe,class:q,style:J={}}=l,ee={crossorigin:s,decoding:N,alt:T,sizes:ue,srcset:de,usemap:fe,style:{...x.value,height:e.height?X(e.height):void 0}},Y=u.getSlotsProps(Ge,n,e,{render:!0});return g(t.createVNode("div",{class:{[`${c.value}`]:!0,[`${i}`]:!0,[`${q}`]:!!q},ref:ge=>m.value=ge,style:{width:e.width?X(e.width):void 0,height:e.height?X(e.height):void 0,display:e.lazy?"block":void 0,...J},onClick:()=>{a("click")}},[I.value?Y.placeholder||t.createVNode("div",{class:`${i}-placeholder ${c.value}`},null):h.value?Y.fallback||t.createVNode("div",{class:`${i}-error ${c.value}`},[t.createTextVNode("加载失败")]):p.value&&t.createVNode("img",t.mergeProps(ee,{class:{[`${c.value}`]:!0,[`${e.imageClassName}`]:!!e.imageClassName,[`${i}-inner`]:!0,[`${i}-inner-preview`]:C.value},alt:e.alt,src:p.value}),null),C.value&&t.createVNode("div",{class:`${i}-preview ${c.value}`,onClick:()=>P()},null),C.value&&t.createVNode(ye,t.mergeProps({ref:f},e.preview,we.pick(Y,pe),{previewUrls:((Z=e.preview)==null?void 0:Z.previewUrls)||[e.src],current:b.value,onClose:()=>k()}),null)]))}}});B.isGImage=!0,B.install=e=>(e.component(B.name,B),e),v.GImage=B,v.GImagePreview=ye,v.baseProps=F,v.default=B,v.imageProps=le,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(b,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@ant-design/icons-vue"),require("@gx-design-vue/pro-provider"),require("@gx-design-vue/pro-utils"),require("@vueuse/core"),require("lodash-es"),require("@gx-design-vue/pro-hooks"),require("@ctrl/tinycolor")):typeof define=="function"&&define.amd?define(["exports","vue","@ant-design/icons-vue","@gx-design-vue/pro-provider","@gx-design-vue/pro-utils","@vueuse/core","lodash-es","@gx-design-vue/pro-hooks","@ctrl/tinycolor"],t):(b=typeof globalThis<"u"?globalThis:b||self,t(b.GImage={},b.vue,b.iconsVue,b.proProvider,b.proUtils,b.core,b.lodashEs,b.proHooks,b.tinycolor))})(this,function(b,t,E,$,v,R,_,X,k){"use strict";let ge=e=>setTimeout(e,16),me=e=>clearTimeout(e);typeof window<"u"&&"requestAnimationFrame"in window&&(ge=e=>window.requestAnimationFrame(e),me=e=>window.cancelAnimationFrame(e));let ve=0;const le=new Map;function he(e){le.delete(e)}function we(e,o=1){ve+=1;const i=ve;function r(n){if(n===0)he(i),e();else{const s=ge(()=>{r(n-1)});le.set(i,s)}}return r(o),i}we.cancel=e=>{const o=le.get(e);return he(o),me(o)};const ne={x:0,y:0,rotate:0,scale:1,flipX:!1,flipY:!1};function Le(e,o,i,r){const n=t.ref(null),s=t.ref([]),[u,w]=X.useState(ne),S=h=>{w(ne),_.isEqual(ne,u.value)||r==null||r({transform:ne,action:h})},d=(h,y)=>{n.value===null&&(s.value=[],n.value=we(()=>{let I=_.cloneDeep(u.value);s.value.forEach(l=>{I={...I,...l}}),n.value=null,r==null||r({transform:I,action:y}),w(I)})),s.value.push({...u.value,...h})};return{transform:u,resetTransform:S,updateTransform:d,dispatchZoomChange:(h,y,I,l,a)=>{const{width:p,height:m,offsetWidth:C,offsetHeight:x,offsetLeft:z,offsetTop:D}=e.value;let O=h,N=u.value.scale*h;N>i.value?(N=i.value,O=i.value/u.value.scale):N<o.value&&(N=a?N:o.value,O=N/u.value.scale);const W=I??innerWidth/2,U=l??innerHeight/2,j=O-1,M=j*p*.5,Y=j*m*.5,F=j*(W-u.value.x-z),ee=j*(U-u.value.y-D);let B=u.value.x-(F-M),Z=u.value.y-(ee-Y);if(h<1&&N===1){const P=C*N,f=x*N,{width:T,height:A}=R.useWindowSize();P<=T.value&&f<=A.value&&(B=0,Z=0)}d({x:B,y:Z,scale:N},y)}}}function Oe(e,o){process.env.NODE_ENV!=="production"&&console!==void 0&&console.error(`Warning: ${o}`)}let ye=!1;try{const e=Object.defineProperty({},"passive",{get(){ye=!0}});window.addEventListener("testPassive",null,e),window.removeEventListener("testPassive",null,e)}catch{}function H(e,o,i,r){if(e&&e.addEventListener){let n=r;n===void 0&&ye&&(o==="touchstart"||o==="touchmove"||o==="wheel")&&(n={passive:!1}),e.addEventListener(o,i,n)}return{remove:()=>{e&&e.removeEventListener&&e.removeEventListener(o,i)}}}const G=1,Me=1;function pe(e,o,i,r){const n=o+i,s=(i-r)/2;if(i>r){if(o>0)return{[e]:s};if(o<0&&n<r)return{[e]:-s}}else if(o<0||n>r)return{[e]:o<0?s:-s};return{}}function Se(e,o,i,r){const{width:n,height:s}=R.useWindowSize();let u=null;return e<=n.value&&o<=s.value?u={x:0,y:0}:(e>n.value||o>s.value)&&(u={...pe("x",i,e,n.value),...pe("y",r,o,s.value)}),u}function Te(e,o,i,r,n,s,u){const[w,S]=X.useState(!1),d=t.ref({diffX:0,diffY:0,transformX:0,transformY:0}),g=l=>{!o||l.button!==0||(l.preventDefault(),l.stopPropagation(),d.value={diffX:l.pageX-n.value.x,diffY:l.pageY-n.value.y,transformX:n.value.x,transformY:n.value.y},S(!0))},h=l=>{i&&w.value&&s({x:l.pageX-d.value.diffX,y:l.pageY-d.value.diffY},"move")},y=()=>{if(i&&w.value){S(!1);const{transformX:l,transformY:a}=d.value;if(!(n.value.x!==l&&n.value.y!==a))return;const m=e.value.offsetWidth*n.value.scale,C=e.value.offsetHeight*n.value.scale,{left:x,top:z}=e.value.getBoundingClientRect(),D=n.value.rotate%180!==0,O=Se(D?C:m,D?m:C,x,z);O&&s({...O},"dragRebound")}},I=l=>{if(!i||l.deltaY===0)return;const a=Math.abs(l.deltaY/100),p=Math.min(a,Me);let m=G+p*r.value;l.deltaY>0&&(m=G/m),u(m,"wheel",l.clientX,l.clientY)};return X.useEffect(()=>{let l,a,p,m;if(o){p=H(window,"mouseup",y,!1),m=H(window,"mousemove",h,!1);try{window.top!==window.self&&(l=H(window.top,"mouseup",y,!1),a=H(window.top,"mousemove",h,!1))}catch(C){Oe(!1,`[rc-image] ${C}`)}}return()=>{p==null||p.remove(),m==null||m.remove(),l==null||l.remove(),a==null||a.remove()}},[i,w,()=>n.value.x,()=>n.value.y,()=>n.value.rotate,o]),{isMoving:w,onMouseDown:g,onMouseMove:h,onMouseUp:y,onWheel:I}}function oe(e,o){const i=e.x-o.x,r=e.y-o.y;return Math.hypot(i,r)}function Ae(e,o,i,r){const n=oe(e,i),s=oe(o,r);if(n===0&&s===0)return[e.x,e.y];const u=n/(n+s),w=e.x+u*(o.x-e.x),S=e.y+u*(o.y-e.y);return[w,S]}function Ee(e,o,i,r,n,s,u){const[w,S]=X.useState(!1),d=t.ref({point1:{x:0,y:0},point2:{x:0,y:0},eventType:"none"}),g=l=>{d.value={...d.value,...l}},h=l=>{if(!o.value)return;l.stopPropagation(),S(!0);const{touches:a=[]}=l;a.length>1?g({point1:{x:a[0].clientX,y:a[0].clientY},point2:{x:a[1].clientX,y:a[1].clientY},eventType:"touchZoom"}):g({point1:{x:a[0].clientX-n.value.x,y:a[0].clientY-n.value.y},eventType:"move"})},y=l=>{const{touches:a=[]}=l,{point1:p,point2:m,eventType:C}=d.value;if(a.length>1&&C==="touchZoom"){const x={x:a[0].clientX,y:a[0].clientY},z={x:a[1].clientX,y:a[1].clientY},[D,O]=Ae(p,m,x,z),N=oe(x,z)/oe(p,m);u(N,"touchZoom",D,O,!0),g({point1:x,point2:z,eventType:"touchZoom"})}else C==="move"&&(s({x:a[0].clientX-p.x,y:a[0].clientY-p.y},"move"),g({eventType:"move"}))},I=()=>{if(!i.value)return;if(w&&S(!1),g({eventType:"none"}),r.value>n.value.scale)return s({x:0,y:0,scale:r.value},"touchZoom");const l=e.value.offsetWidth*n.value.scale,a=e.value.offsetHeight*n.value.scale,{left:p,top:m}=e.value.getBoundingClientRect(),C=n.value.rotate%180!==0,x=Se(C?a:l,C?l:a,p,m);x&&s({...x},"dragRebound")};return X.useEffect(()=>{let l;return i.value&&o.value&&(l=H(window,"touchmove",a=>a.preventDefault(),{passive:!1})),()=>{l==null||l.remove()}},[i,o]),{isTouching:w,onTouchStart:h,onTouchMove:y,onTouchEnd:I}}const q={infinite:{type:Boolean,default:!0},zIndex:{type:Number,default:2e3},current:{type:Number,default:0},getContainer:{type:String}},re={preview:{type:[Object,Boolean],default:!0},src:{type:String,default:""},alt:{type:String,default:""},loading:{type:String},fit:{type:String,default:"contain"},crossOrigin:{type:String},lazy:Boolean,scrollContainer:{type:[String,Object]},placeholder:{type:[Function,Object,Boolean],default:()=>{}},fallback:{type:[Function,Object],default:()=>{}},onLoad:{type:Function},onError:{type:Function},onClick:{type:Function},imageStyle:{type:Object,default:()=>({})},imageClass:String,size:Number,width:Number,height:Number,zIndex:q.zIndex,getContainer:q.getContainer},K={urls:{type:Array,default:()=>[]},open:{type:Boolean,default:!1},scaleStep:{type:Number,default:.5},minScale:{type:Number,default:.32},maxScale:{type:Number,default:32},movable:{type:Boolean,default:!0},disabled:Boolean,zIndex:q.zIndex,current:q.current,infinite:q.infinite,getContainer:re.getContainer,onHideOnClickModal:{type:Boolean,default:!0},countRender:[Function,Array,Object],icons:{type:Object,default:()=>({})},onTransform:Function,onOpenChange:Function,"onUpdate:open":Function},Re=t.defineComponent({name:"Operations",inheritAttrs:!1,props:{open:Boolean,count:{type:Number,default:0},current:{type:Number,default:0},showSwitch:Boolean,showProgress:Boolean,prefixCls:String,hashId:String,zIndex:K.zIndex,icons:K.icons,infinite:K.infinite,getContainer:K.getContainer,countRender:K.countRender,tools:Array,onClose:Function,onActive:Function},setup(e){const o=(i,r)=>{var n;i.preventDefault(),i.stopPropagation(),(n=e.onActive)==null||n.call(e,r)};return()=>{const{prefixCls:i,hashId:r,tools:n}=e,s=$.getTransitionProps(`${e.prefixCls}-fade`),u=`${i}-operations-operation`,w=`${i}-operations-icon`;return t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[t.createVNode(t.Transition,s,{default:()=>{var S,d,g,h;return[t.withDirectives(t.createVNode("div",{class:v.classNames(`${i}-operations-wrapper`,r),style:{zIndex:e.zIndex}},[((S=e.icons)==null?void 0:S.close)===null?null:t.createVNode("button",{class:`${i}-close ${r}`,onClick:e.onClose},[((d=e.icons)==null?void 0:d.close)||t.createVNode(E.CloseOutlined,null,null)]),e.showSwitch&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:v.classNames(`${i}-switch-left ${r}`,{[`${i}-switch-left-disabled`]:e.infinite?!1:e.current===0}),onClick:y=>o(y,-1)},[((g=e.icons)==null?void 0:g.left)||t.createVNode(E.LeftOutlined,null,null)]),t.createVNode("div",{class:v.classNames(`${i}-switch-right ${r}`,{[`${i}-switch-right-disabled`]:e.infinite?!1:e.current===e.count-1}),onClick:y=>o(y,1)},[((h=e.icons)==null?void 0:h.right)||t.createVNode(E.RightOutlined,null,null)])]),t.createVNode("div",{class:`${i}-footer ${r}`},[e.showProgress&&t.createVNode("div",{class:`${i}-progress`},[e.countRender?e.countRender(e.current+1,e.count):`${e.current+1} / ${e.count}`]),t.createVNode("div",{class:`${e.prefixCls}-operations`},[n==null?void 0:n.map(({icon:y,onClick:I,type:l,disabled:a})=>t.createVNode("div",{class:v.classNames(u,{[`${e.prefixCls}-operations-operation-disabled`]:a&&(a==null?void 0:a.value)}),onClick:I,key:l},[t.cloneVNode(y,{class:w})]))])])]),[[t.vShow,e.open]])]}})]})}}}),De=new $.Keyframe("viewFadeIn",{"0%":{opacity:0},"100%":{opacity:1}}),Pe=new $.Keyframe("viewFadeOut",{"0%":{opacity:1},"100%":{opacity:0}}),Ve=new $.Keyframe("viewZoomBadgeIn",{"0%":{transform:"scale(0)",opacity:0},"100%":{transform:"scale(1)",opacity:1}}),Xe=new $.Keyframe("viewZoomBadgeOut",{"0%":{transform:"scale(1)"},"100%":{transform:"scale(0)",opacity:0}}),Ce=e=>({position:e||"absolute",inset:0});function se(e){return{position:e,top:0,insetInlineEnd:0,bottom:0,insetInlineStart:0}}const je=e=>{const{previewCls:o,modalMaskBg:i,marginXL:r,margin:n,colorTextLightSolid:s,previewOperationColorDisabled:u,previewOperationHoverColor:w,motionDurationSlow:S,iconCls:d}=e,g=new k.TinyColor(i).setAlpha(.1),h=g.clone().setAlpha(.2),y=new k.TinyColor(i).setAlpha(.06);return{[`${o}-footer`]:{position:"fixed",bottom:r,left:{_skip_check_:!0,value:"50%"},display:"flex",flexDirection:"column",alignItems:"center",color:e.previewOperationColor,transform:"translateX(-50%)"},[`${o}-progress`]:{marginBottom:n},[`${o}-close`]:{position:"fixed",top:r,right:{_skip_check_:!0,value:r},display:"flex",alignItems:"center",justifyContent:"center",color:s,backgroundColor:g.toRgbString(),borderRadius:e.borderRadiusLG,backdropFilter:"saturate(180%) blur(10px)",width:e.sizeXL,height:e.sizeXL,outline:0,border:0,cursor:"pointer",transition:`all ${S}`,"&:hover":{backgroundColor:h.toRgbString()},[`& > ${d}`]:{fontSize:e.previewOperationSize}},[`${o}-operations`]:{display:"flex",alignItems:"center",gap:e.sizeXXS,padding:e.paddingXXS,backgroundColor:g.toRgbString(),borderRadius:e.borderRadiusLG,backdropFilter:"saturate(180%) blur(10px)","&-operation":{display:"flex",alignItems:"center",justifyContent:"center",width:e.sizeXL+4,height:e.sizeXL+4,cursor:"pointer",color:s,borderRadius:e.borderRadiusSM,transition:`all ${S}`,userSelect:"none",[`&:not(${o}-operations-operation-disabled):hover > ${d}`]:{color:w},"&:hover":{backgroundColor:y.toRgbString()},"&-disabled":{color:u,cursor:"not-allowed"},"&:first-of-type":{marginInlineStart:0},[`& > ${d}`]:{fontSize:e.previewOperationSize}}}}},Ye=e=>{const{modalMaskBg:o,iconCls:i,previewOperationColorDisabled:r,previewCls:n,zIndexPopup:s,motionDurationSlow:u,colorTextLightSolid:w}=e,S=new k.TinyColor(o).setAlpha(.1),d=S.clone().setAlpha(.2);return{[`${n}-switch-left, ${n}-switch-right`]:{position:"fixed",insetBlockStart:"50%",zIndex:e.calc(s).add(1).equal(),display:"flex",alignItems:"center",justifyContent:"center",borderRadius:e.borderRadius,backdropFilter:"saturate(180%) blur(10px)",width:e.imagePreviewSwitchSize,height:e.imagePreviewSwitchSize,marginTop:e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),color:w,background:S.toRgbString(),transform:"translateY(-50%)",cursor:"pointer",transition:`all ${u}`,userSelect:"none","&:hover":{background:d.toRgbString()},"&-disabled":{"&, &:hover":{color:r,background:"transparent",cursor:"not-allowed",[`> ${i}`]:{cursor:"not-allowed"}}},[`> ${i}`]:{fontSize:e.previewOperationSize}},[`${n}-switch-left`]:{insetInlineStart:e.marginSM},[`${n}-switch-right`]:{insetInlineEnd:e.marginSM}}},Fe=e=>{const{motionEaseOut:o,motionDurationSlow:i}=e;return{[e.componentCls]:{height:"100%",textAlign:"center",pointerEvents:"none","&-root":{...se("fixed"),zIndex:e.zIndexPopup,overflow:"auto",outline:0,WebkitOverflowScrolling:"touch"},"&-wrap":{...se("fixed"),zIndex:e.zIndexPopup,overflow:"auto",outline:0,WebkitOverflowScrolling:"touch"},"&-mask":{...se("fixed"),zIndex:e.zIndexPopupBase,height:"100%",backgroundColor:e.colorBgMask,backdropFilter:"blur(2px)"},"&-body":{...Ce(),overflow:"hidden"},"&-img":{maxWidth:"100%",maxHeight:"70%",verticalAlign:"middle",transform:"scale3d(1, 1, 1)",cursor:"grab",transition:`transform ${i} ${o} 0s`,userSelect:"none","&-wrapper":{...Ce(),transition:`transform ${i} ${o} 0s`,display:"flex",justifyContent:"center",alignItems:"center","& > *":{pointerEvents:"auto"},"&::before":{display:"inline-block",width:1,height:"50%",marginInlineEnd:-1,content:'""'}}},"&-moving":{[`${e.componentCls}-view-img`]:{cursor:"grabbing","&-wrapper":{transitionDuration:"0s"}}},"&-mask-zoom-appear, &-mask-zoom-enter":{animationName:De,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear",userSelect:"none"},"&-mask-zoom-leave":{animationName:Pe,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear",pointerEvents:"none"},"&-zoom-appear, &-zoom-enter":{animationName:Ve,opacity:0,animationTimingFunction:e.motionEaseOutCirc,animationFillMode:"both",transform:"none",animationDuration:e.motionDurationMid,userSelect:"none"},"&-zoom-enter-active":{animationPlayState:"running"},"&-zoom-leave":{animationName:Xe,animationDuration:e.motionDurationSlow,animationTimingFunction:e.motionEaseInOutCirc,animationFillMode:"both"}},[`${e.componentCls}-root`]:{[`${e.componentCls}-wrapper`]:{zIndex:e.zIndexPopup}},[`${e.componentCls}-operations-wrapper`]:{position:"fixed",insetBlockStart:0,insetInlineEnd:0,zIndex:e.calc(e.zIndexPopup).add(1).equal(),width:"100%"},"&":[je(e),Ye(e)]}};function Be(e){return $.useStyle("ImageViewer",o=>{const i=$.mergeToken(o,{zIndexPopup:o.zIndexPopupBase+80,previewOperationColor:new k.TinyColor(o.colorTextLightSolid).setAlpha(.65).toRgbString(),previewOperationHoverColor:new k.TinyColor(o.colorTextLightSolid).setAlpha(.85).toRgbString(),previewOperationColorDisabled:new k.TinyColor(o.colorTextLightSolid).setAlpha(.25).toRgbString(),imagePreviewSwitchSize:o.sizeXL,modalMaskBg:new k.TinyColor("#000").setAlpha(.45).toRgbString(),previewOperationSize:o.fontSizeIcon*1.5,iconCls:".anticon",previewCls:o.componentCls});return[Fe(i)]},e)}const ce={ESC:27,LEFT:37,RIGHT:39},Q={rotateLeft:t.createVNode(E.RotateLeftOutlined,null,null),rotateRight:t.createVNode(E.RotateRightOutlined,null,null),zoomIn:t.createVNode(E.ZoomInOutlined,null,null),zoomOut:t.createVNode(E.ZoomOutOutlined,null,null),flipX:t.createVNode(E.SwapOutlined,null,null),flipY:t.createVNode(E.SwapOutlined,{rotate:90},null)},xe=["close","left","right","rotateRight","rotateRight","zoomOut","flipX","flipY","rotateLeft"],Ie=t.defineComponent({name:"GImagePreview",props:K,inheritAttrs:!1,slots:Object,emits:{close:()=>!0,transform:e=>!0,"update:open":e=>!0},setup:(e,{emit:o,expose:i,slots:r})=>{const n=v.getPrefixCls({suffixCls:"image-view"}),{wrapSSR:s,hashId:u}=Be(n),[w,S,d]=X.useMergedState(e.open,{value:t.toRef(e,"open"),onChange:c=>{var L;(L=e.onOpenChange)==null||L.call(e,c),o("update:open",c)}}),[g,h]=X.useState(!1),[y,I]=X.useState(!0),l=t.ref(),{transform:a,resetTransform:p,updateTransform:m,dispatchZoomChange:C}=Le(l,t.toRef(e,"minScale"),t.toRef(e,"maxScale"),e.onTransform),{isMoving:x,onMouseDown:z,onWheel:D}=Te(l,t.toRef(e,"movable"),d,t.toRef(e,"scaleStep"),a,m,C),{isTouching:O,onTouchStart:N,onTouchMove:W,onTouchEnd:U}=Ee(l,t.toRef(e,"movable"),d,t.toRef(e,"minScale"),a,m,C);X.useEffect(()=>{y.value||I(!0)},[y]);const j=t.ref(null),M=t.ref(e.current),Y=t.reactive(new Map),F=t.computed(()=>new Map(Array.from(Y).map(([c,{url:L}])=>[c,L]))),ee=t.computed(()=>F.value.get(M.value)),B=t.computed(()=>F.value.size),Z=t.computed(()=>Array.from(F.value.keys())),P=t.computed(()=>Z.value.indexOf(M.value)),f=t.computed(()=>B.value>1),T=t.computed(()=>B.value>=1);t.watch(d,c=>{c&&(g.value=!0)});const A=c=>{M.value=c};t.watch(()=>e.current,c=>{v.isNumber(c)&&A(c)});function de(c,L){Y.set(c,{url:L,loading:!0,canPreview:!1})}const te=()=>{h(!1)},ie=()=>{p("close"),o("close")},qe=c=>{x.value||j.value===(c==null?void 0:c.target)&&te()},Ke=()=>{const c=Y.get(M.value);c&&(c.loading=!1,c.canPreview=!0)},Qe=c=>{const L=Y.get(M.value);L&&(L.loading=!1,L.canPreview=!1),c.target.alt="加载失败"},Ne=()=>{if(P.value>0||e.infinite){const c=P.value-1<0?e.urls.length-1:P.value-1;A(Z.value[c]),p("prev")}},$e=()=>{if(P.value<B.value-1||e.infinite){const c=P.value+1>e.urls.length-1?0:P.value+1;A(Z.value[c]),p("next")}},Je=()=>{C(G+e.scaleStep,"zoomIn")},Ue=()=>{C(G/(G+e.scaleStep),"zoomOut")},et=()=>{m({rotate:a.value.rotate+90},"rotateRight")},tt=()=>{m({rotate:a.value.rotate-90},"rotateLeft")},nt=()=>{m({flipX:!a.value.flipX},"flipX")},ot=()=>{m({flipY:!a.value.flipY},"flipY")},ze=[{icon:v.getSlotVNode(r,e.icons,"flipY")||Q.flipY,onClick:ot,type:"flipY"},{icon:v.getSlotVNode(r,e.icons,"flipX")||Q.flipX,onClick:nt,type:"flipX"},{icon:v.getSlotVNode(r,e.icons,"rotateLeft")||Q.rotateLeft,onClick:tt,type:"rotateLeft"},{icon:v.getSlotVNode(r,e.icons,"rotateRight")||Q.rotateRight,onClick:et,type:"rotateRight"},{icon:v.getSlotVNode(r,e.icons,"zoomOut")||Q.zoomOut,onClick:()=>Ue(),type:"zoomOut",disabled:t.computed(()=>a.value.scale<=e.minScale)},{icon:v.getSlotVNode(r,e.icons,"zoomIn")||Q.zoomIn,onClick:()=>Je(),type:"zoomIn",disabled:t.computed(()=>a.value.scale===e.maxScale)}],it=c=>{d.value&&(a.value.scale!==1?m({x:0,y:0,scale:1},"doubleClick"):C(G+e.scaleStep,"doubleClick",c.clientX,c.clientY))},at=c=>{c.keyCode===ce.ESC&&te(),!(!d.value||!f.value)&&(c.keyCode===ce.LEFT?Ne():c.keyCode===ce.RIGHT&&$e())};let fe=()=>{};return t.onMounted(()=>{t.watch(()=>e.urls,c=>{v.isArray(c)&&c.forEach((L,ae)=>{de(ae,L)})},{flush:"post",immediate:!0}),t.watch([()=>d.value,()=>x.value],()=>{fe();const c=H(window,"keydown",at,!1);fe=()=>{c.remove()}},{flush:"post",immediate:!0})}),t.onUnmounted(()=>{fe()}),i({setOpen:c=>{S(c),M.value=e.current}}),()=>{const c=$.getTransitionProps(`${n}-mask-zoom`),L=$.getTransitionProps(`${n}-zoom`),ae={};for(const V in e.icons)ae[V]=v.getSlotVNode(r,e.icons,V);return s(t.createVNode(t.Fragment,null,[t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[d.value&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:`${n}-root ${u.value}`},[t.createVNode(t.Transition,c,{default:()=>[t.withDirectives(t.createVNode("div",{class:`${n}-mask ${u.value}`},null),[[t.vShow,d.value&&g.value]])]}),t.createVNode("div",{ref:j,tabindex:-1,class:[`${n}-wrap`,`${u.value}`,x.value&&`${n}-moving`],onClick:V=>e.onHideOnClickModal&&qe(V)},[t.createVNode(t.Transition,t.mergeProps(L,{onAfterLeave:()=>ie()}),{default:()=>[t.withDirectives(t.createVNode("div",{role:"dialog",class:`${n} ${u.value}`},[t.createVNode("div",{class:`${n}-content ${u.value}`},[t.createVNode("div",{class:`${n}-body ${u.value}`},[t.createVNode("div",{class:`${n}-img-wrapper ${u.value}`},[t.createVNode("img",{ref:l,class:`${n}-img ${u.value}`,src:ee.value,onLoad:()=>Ke(),onError:V=>Qe(V),style:{transform:`translate3d(${a.value.x}px, ${a.value.y}px, 0) scale3d(${a.value.flipX?"-":""}${a.value.scale}, ${a.value.flipY?"-":""}${a.value.scale}, 1) rotate(${a.value.rotate}deg)`,transitionDuration:!y.value||O.value?"0s":void 0},onWheel:D,onMousedown:z,onDblclick:it,onTouchstart:N,onTouchmove:W,onTouchend:U,onTouchcancel:U},null)])])])]),[[t.vShow,d.value&&g.value]])]})])])])]}),d.value&&g.value&&t.createVNode(Re,{open:d.value&&g.value,hashId:u.value,count:e.urls.length,current:M.value,zIndex:e.zIndex+1,getContainer:e.getContainer,prefixCls:n,icons:_.omit(ae,ze.map(({type:V})=>V)),tools:ze,infinite:e.infinite,countRender:v.getSlot(r,e,"countRenders"),showSwitch:f.value,showProgress:T.value,onClose:te,onActive:V=>V>0?$e():Ne()},null)]))}}}),ue={width:"100%",height:"100%"},Ze={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"},ke=e=>{const{motionDurationSlow:o,paddingXXS:i,marginXXS:r,colorTextLightSolid:n}=e,s=".anticon";return{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",color:n,background:new $.FastColor("#000").setA(.5).toRgbString(),cursor:"pointer",opacity:0,transition:`opacity ${o}`,[`.${e.componentCls}-mask-info`]:{...Ze,padding:`0 ${$.unit(i)}`,[s]:{marginInlineEnd:r,svg:{verticalAlign:"baseline"}}}}},We=e=>({position:e||"absolute",inset:0}),_e=e=>({[e.componentCls]:{display:"inline-block",position:"relative",overflow:"hidden",[`${e.componentCls}-img`]:{...ue,verticalAlign:"top",opacity:1,[`&${e.componentCls}-img-preview`]:{userSelect:"none",cursor:"pointer"},"&-placeholder":{...ue,backgroundColor:e.colorBgContainerDisabled,backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",backgroundRepeat:"no-repeat",backgroundPosition:"center center",backgroundSize:"30%"}},[`${e.componentCls}-error`]:{...ue,display:"flex",alignItems:"center",justifyContent:"center"},[`${e.componentCls}-placeholder`]:{...We()},[`${e.componentCls}-mask`]:{...ke(e)},[`${e.componentCls}-mask:hover`]:{opacity:1}}}),He=e=>typeof Element>"u"?!1:e instanceof Element;let be="";const Ge=[...xe,"placeholder","fallback"],J=t.defineComponent({props:re,name:"GImage",inheritAttrs:!1,emits:{click:()=>!0,load:e=>!0,error:e=>!0},slots:Object,setup(e,{slots:o,emit:i,attrs:r}){const n=R.isClient&&"loading"in HTMLImageElement.prototype,s=v.getPrefixCls({suffixCls:"image"}),{wrapSSR:u,hashId:w}=$.useProStyle("Image",[_e],s),S=t.ref(),d=t.ref(),g=t.ref(!1),h=t.ref(!0),y=t.ref(!1),I=t.ref(),l=t.ref();let a,p;const m=t.computed(()=>e.loading==="eager"?!1:!n&&e.loading==="lazy"||e.lazy),C=t.computed(()=>R.isClient&&e.fit?{...e.imageStyle,objectFit:e.fit}:e.imageStyle),x=t.computed(()=>typeof e.preview=="object"?e.preview:{}),z=t.computed(()=>!!e.preview),D=t.computed(()=>{const{urls:f=[],current:T=0}=x.value;if(v.isNumber(T))return f.length>=T?T:0;const A=f.indexOf(e.src);return A>=0?A:0}),O=t.computed(()=>$.unit(e.width)),N=t.computed(()=>$.unit(e.height)),W=()=>{R.isClient&&(h.value=!0,g.value=!1,d.value=e.src)};function U(f){g.value||(h.value=!1,g.value=!1,i("load",f))}function j(f){h.value=!1,g.value=!0,i("error",f)}function M(){v.isInContainer(I.value,l.value)&&(W(),ee())}const Y=R.useThrottleFn(M,200,!0);async function F(){if(!R.isClient)return;await t.nextTick();const{scrollContainer:f}=e;He(f)?l.value=f:v.isString(f)&&f!==""?l.value=document.querySelector(f)??void 0:I.value&&(l.value=v.getScrollContainer(I.value)),l.value&&(a=R.useEventListener(l,"scroll",Y),setTimeout(()=>M(),100))}function ee(){!R.isClient||!l.value||!Y||(a==null||a(),l.value=void 0)}function B(f){if(f.ctrlKey){if(f.deltaY<0)return f.preventDefault(),!1;if(f.deltaY>0)return f.preventDefault(),!1}}const Z=()=>{i("click"),!(h.value||g.value)&&z.value&&(p=R.useEventListener("wheel",B,{passive:!1}),be=document.body.style.overflow,document.body.style.overflow="hidden",y.value=!0)},P=()=>{p==null||p(),document.body.style.overflow=be,y.value=!1};return t.watch(()=>e.src,()=>{m.value?(h.value=!0,g.value=!1,ee(),F()):W()}),t.watchEffect(()=>{var f,T;z.value&&y.value?(f=S.value)==null||f.setOpen(!0):(T=S.value)==null||T.setOpen(!1)}),t.onMounted(()=>{m.value?F():W()}),()=>{var te;const f=_.fromPairs(Object.entries(r).filter(([ie])=>/^(?:data-|on[A-Z])/i.test(ie)||["id","style","class"].includes(ie))),T=_.omit(r,Object.keys(f)),A=v.getSlotsProps(Ge,o,e,{render:!0}),de=v.getSlot(o,e,["preview","mask"],!0);return u(t.createVNode("div",t.mergeProps({class:{[`${w.value}`]:!0,[`${s}`]:!0},ref:I},f,{style:{width:$.unit(e.size)||O.value,height:$.unit(e.size)||N.value,...f.style||{}}}),[g.value?t.createVNode("div",{class:v.classNames(w.value,`${s}-error`)},[A.fallback]):t.createVNode(t.Fragment,null,[t.createVNode("img",t.mergeProps(T,{src:d.value,loading:e.loading,style:C.value,class:v.classNames(w.value,e.imageClass,`${s}-img`,{[`${s}-img-placeholder`]:e.placeholder===!0,[`${s}-img-preview`]:z.value}),crossorigin:e.crossOrigin,width:O.value,height:N.value,onClick:Z,onLoad:U,onError:j}),null),h.value&&t.createVNode("div",{class:v.classNames(`${s}-placeholder`,w.value)},[A.placeholder])]),x.value.mask&&z.value&&t.createVNode("div",{class:v.classNames(`${s}-mask`,x.value.maskClass,w.value),style:{display:((te=f.style)==null?void 0:te.display)==="none"?"none":void 0}},[de||t.createVNode("div",{class:v.classNames(`${s}-mask-info`,w.value)},[t.createVNode(E.EyeOutlined,null,null)])]),z.value&&t.createVNode(Ie,t.mergeProps({ref:S},x.value,_.pick(A,xe),{urls:x.value.urls||[e.src],current:D.value,onClose:()=>P()}),null)]))}}});J.isGImage=!0,J.install=e=>(e.component(J.name,J),e),b.GImage=J,b.GImagePreview=Ie,b.baseProps=q,b.default=J,b.imageProps=re,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/props.d.ts

@@ -20,11 +20,7 @@ export declare const baseProps: {
 };
 export declare const imageProps: {
     preview: {
-        type: PropType<BaseImagePreviewProps>;
-        default: () => BaseImagePreviewProps;
-    };
-    showPreview: {
-        type: PropType<boolean>;
+        type: PropType<BaseImagePreviewProps | boolean>;
         default: boolean;
     };
     src: {
@@ -35,10 +31,16 @@ export declare const imageProps: {
         type: PropType<string>;
         default: string;
     };
+    loading: {
+        type: PropType<"eager" | "lazy">;
+    };
     fit: {
         type: PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
         default: string;
     };
+    crossOrigin: {
+        type: PropType<"anonymous" | "use-credentials" | "">;
+    };
     lazy: PropType<boolean>;
     scrollContainer: {
         type: PropType<string | HTMLElement | undefined>;
@@ -60,8 +62,12 @@ export declare const imageProps: {
     onClick: {
         type: PropType<(info: any) => void>;
     };
-    imageClassName: PropType<string>;
-    imageStyle: PropType<CSSProperties>;
+    imageStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    imageClass: PropType<string>;
+    size: PropType<number>;
     width: PropType<number>;
     height: PropType<number>;
     zIndex: {

package/dist/style.d.ts

@@ -1,5 +1,7 @@
 import type { ProAliasToken } from '@gx-design-vue/pro-provider';
 import type { CSSObject } from 'ant-design-vue';
 import type { GenerateStyle } from 'ant-design-vue/es/theme/internal';
-export declare const genImageMaskStyle: () => CSSObject;
+export type PositionType = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky' | undefined;
+export declare const genImageMaskStyle: (token: ProAliasToken) => CSSObject;
+export declare const genBoxStyle: (position?: PositionType) => CSSObject;
 export declare const genImageStyle: GenerateStyle<ProAliasToken>;

package/dist/typings.d.ts

@@ -0,0 +1,2 @@
+import type { ImgHTMLAttributes } from 'vue';
+export type ImageElementProps = Pick<ImgHTMLAttributes, 'src' | 'crossorigin' | 'decoding' | 'draggable' | 'loading' | 'referrerpolicy' | 'sizes' | 'srcset' | 'usemap' | 'alt'>;

package/dist/utils/util.d.ts

@@ -0,0 +1 @@
+export declare const isElement: (e: unknown) => e is Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gx-design-vue/image",
   "type": "module",
-  "version": "0.2.0-beta.26",
+  "version": "0.2.0-beta.28",
   "description": "Gx Design Image",
   "exports": {
     ".": {
@@ -29,9 +29,9 @@
     "vue": ">=3.0.0"
   },
   "dependencies": {
-    "@gx-design-vue/pro-hooks": "^0.2.0-beta.44",
-    "@gx-design-vue/pro-provider": "^0.1.0-beta.106",
-    "@gx-design-vue/pro-utils": "^0.2.0-beta.62",
+    "@gx-design-vue/pro-hooks": "^0.2.0-beta.45",
+    "@gx-design-vue/pro-provider": "^0.1.0-beta.110",
+    "@gx-design-vue/pro-utils": "^0.2.0-beta.64",
     "@vueuse/core": "^9.10.0",
     "lodash-es": "^4.17.21"
   },