@gx-design-vue/image 0.2.0-beta.29 → 0.2.0-beta.30

package/dist/image.umd.cjs

@@ -1 +1,12 @@
-(function(I,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):(I=typeof globalThis<"u"?globalThis:I||self,t(I.GImage={},I.vue,I.iconsVue,I.proProvider,I.proUtils,I.core,I.lodashEs,I.proHooks,I.tinycolor))})(this,function(I,t,A,L,m,E,_,V,Z){"use strict";let fe=e=>setTimeout(e,16),ge=e=>clearTimeout(e);typeof window<"u"&&"requestAnimationFrame"in window&&(fe=e=>window.requestAnimationFrame(e),ge=e=>window.cancelAnimationFrame(e));let me=0;const ae=new Map;function ve(e){ae.delete(e)}function he(e,n=1){me+=1;const i=me;function a(o){if(o===0)ve(i),e();else{const s=fe(()=>{a(o-1)});ae.set(i,s)}}return a(n),i}he.cancel=e=>{const n=ae.get(e);return ve(n),ge(n)};const ne={x:0,y:0,rotate:0,scale:1,flipX:!1,flipY:!1};function Me(e,n,i,a){const o=t.ref(null),s=t.ref([]),[u,p]=V.useState(ne),v=h=>{p(ne),_.isEqual(ne,u.value)||a?.({transform:ne,action:h})},d=(h,x)=>{o.value===null&&(s.value=[],o.value=he(()=>{let b=_.cloneDeep(u.value);s.value.forEach(l=>{b={...b,...l}}),o.value=null,a?.({transform:b,action:x}),p(b)})),s.value.push({...u.value,...h})};return{transform:u,resetTransform:v,updateTransform:d,dispatchZoomChange:(h,x,b,l,r)=>{const{width:y,height:w,offsetWidth:S,offsetHeight:C,offsetLeft:M,offsetTop:R}=e.value;let T=h,N=u.value.scale*h;N>i.value?(N=i.value,T=i.value/u.value.scale):N<n.value&&(N=r?N:n.value,T=N/u.value.scale);const k=b??innerWidth/2,U=l??innerHeight/2,X=T-1,$=X*y*.5,j=X*w*.5,F=X*(k-u.value.x-M),ee=X*(U-u.value.y-R);let B=u.value.x-(F-$),W=u.value.y-(ee-j);if(h<1&&N===1){const D=S*N,g=C*N,{width:Y,height:z}=E.useWindowSize();D<=Y.value&&g<=z.value&&(B=0,W=0)}d({x:B,y:W,scale:N},x)}}}function Te(e,n){process.env.NODE_ENV!=="production"&&console!==void 0&&console.error(`Warning: ${n}`)}let we=!1;try{const e=Object.defineProperty({},"passive",{get(){we=!0}});window.addEventListener("testPassive",null,e),window.removeEventListener("testPassive",null,e)}catch{}function H(e,n,i,a){if(e&&e.addEventListener){let o=a;o===void 0&&we&&(n==="touchstart"||n==="touchmove"||n==="wheel")&&(o={passive:!1}),e.addEventListener(n,i,o)}return{remove:()=>{e&&e.removeEventListener&&e.removeEventListener(n,i)}}}const G=1,$e=1;function pe(e,n,i,a){const o=n+i,s=(i-a)/2;if(i>a){if(n>0)return{[e]:s};if(n<0&&o<a)return{[e]:-s}}else if(n<0||o>a)return{[e]:n<0?s:-s};return{}}function ye(e,n,i,a){const{width:o,height:s}=E.useWindowSize();let u=null;return e<=o.value&&n<=s.value?u={x:0,y:0}:(e>o.value||n>s.value)&&(u={...pe("x",i,e,o.value),...pe("y",a,n,s.value)}),u}function ze(e,n,i,a,o,s,u){const[p,v]=V.useState(!1),d=t.ref({diffX:0,diffY:0,transformX:0,transformY:0}),f=l=>{!n||l.button!==0||(l.preventDefault(),l.stopPropagation(),d.value={diffX:l.pageX-o.value.x,diffY:l.pageY-o.value.y,transformX:o.value.x,transformY:o.value.y},v(!0))},h=l=>{i&&p.value&&s({x:l.pageX-d.value.diffX,y:l.pageY-d.value.diffY},"move")},x=()=>{if(i&&p.value){v(!1);const{transformX:l,transformY:r}=d.value;if(!(o.value.x!==l&&o.value.y!==r))return;const w=e.value.offsetWidth*o.value.scale,S=e.value.offsetHeight*o.value.scale,{left:C,top:M}=e.value.getBoundingClientRect(),R=o.value.rotate%180!==0,T=ye(R?S:w,R?w:S,C,M);T&&s({...T},"dragRebound")}},b=l=>{if(!i||l.deltaY===0)return;const r=Math.abs(l.deltaY/100),y=Math.min(r,$e);let w=G+y*a.value;l.deltaY>0&&(w=G/w),u(w,"wheel",l.clientX,l.clientY)};return V.useEffect(()=>{let l,r,y,w;if(n){y=H(window,"mouseup",x,!1),w=H(window,"mousemove",h,!1);try{window.top!==window.self&&(l=H(window.top,"mouseup",x,!1),r=H(window.top,"mousemove",h,!1))}catch(S){Te(!1,`[rc-image] ${S}`)}}return()=>{y?.remove(),w?.remove(),l?.remove(),r?.remove()}},[i,p,()=>o.value.x,()=>o.value.y,()=>o.value.rotate,n]),{isMoving:p,onMouseDown:f,onMouseMove:h,onMouseUp:x,onWheel:b}}function oe(e,n){const i=e.x-n.x,a=e.y-n.y;return Math.hypot(i,a)}function Oe(e,n,i,a){const o=oe(e,i),s=oe(n,a);if(o===0&&s===0)return[e.x,e.y];const u=o/(o+s),p=e.x+u*(n.x-e.x),v=e.y+u*(n.y-e.y);return[p,v]}function Ae(e,n,i,a,o,s,u){const[p,v]=V.useState(!1),d=t.ref({point1:{x:0,y:0},point2:{x:0,y:0},eventType:"none"}),f=l=>{d.value={...d.value,...l}},h=l=>{if(!n.value)return;l.stopPropagation(),v(!0);const{touches:r=[]}=l;r.length>1?f({point1:{x:r[0].clientX,y:r[0].clientY},point2:{x:r[1].clientX,y:r[1].clientY},eventType:"touchZoom"}):f({point1:{x:r[0].clientX-o.value.x,y:r[0].clientY-o.value.y},eventType:"move"})},x=l=>{const{touches:r=[]}=l,{point1:y,point2:w,eventType:S}=d.value;if(r.length>1&&S==="touchZoom"){const C={x:r[0].clientX,y:r[0].clientY},M={x:r[1].clientX,y:r[1].clientY},[R,T]=Oe(y,w,C,M),N=oe(C,M)/oe(y,w);u(N,"touchZoom",R,T,!0),f({point1:C,point2:M,eventType:"touchZoom"})}else S==="move"&&(s({x:r[0].clientX-y.x,y:r[0].clientY-y.y},"move"),f({eventType:"move"}))},b=()=>{if(!i.value)return;if(p&&v(!1),f({eventType:"none"}),a.value>o.value.scale)return s({x:0,y:0,scale:a.value},"touchZoom");const l=e.value.offsetWidth*o.value.scale,r=e.value.offsetHeight*o.value.scale,{left:y,top:w}=e.value.getBoundingClientRect(),S=o.value.rotate%180!==0,C=ye(S?r:l,S?l:r,y,w);C&&s({...C},"dragRebound")};return V.useEffect(()=>{let l;return i.value&&n.value&&(l=H(window,"touchmove",r=>r.preventDefault(),{passive:!1})),()=>{l?.remove()}},[i,n]),{isTouching:p,onTouchStart:h,onTouchMove:x,onTouchEnd:b}}const q={infinite:{type:Boolean,default:!0},zIndex:{type:Number,default:2e3},current:{type:Number,default:0},getContainer:{type:String}},le={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:le.getContainer,onHideOnClickModal:{type:Boolean,default:!0},countRender:[Function,Array,Object],icons:{type:Object,default:()=>({})},onTransform:Function,onOpenChange:Function,"onUpdate:open":Function},Ee=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 n=(i,a)=>{i.preventDefault(),i.stopPropagation(),e.onActive?.(a)};return()=>{const{prefixCls:i,hashId:a,tools:o}=e,s=L.getTransitionProps(`${e.prefixCls}-fade`),u=`${i}-operations-operation`,p=`${i}-operations-icon`;return t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[t.createVNode(t.Transition,s,{default:()=>[t.withDirectives(t.createVNode("div",{class:m.classNames(`${i}-operations-wrapper`,a),style:{zIndex:e.zIndex}},[e.icons?.close===null?null:t.createVNode("button",{class:`${i}-close ${a}`,onClick:e.onClose},[e.icons?.close||t.createVNode(A.CloseOutlined,null,null)]),e.showSwitch&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:m.classNames(`${i}-switch-left ${a}`,{[`${i}-switch-left-disabled`]:e.infinite?!1:e.current===0}),onClick:v=>n(v,-1)},[e.icons?.left||t.createVNode(A.LeftOutlined,null,null)]),t.createVNode("div",{class:m.classNames(`${i}-switch-right ${a}`,{[`${i}-switch-right-disabled`]:e.infinite?!1:e.current===e.count-1}),onClick:v=>n(v,1)},[e.icons?.right||t.createVNode(A.RightOutlined,null,null)])]),t.createVNode("div",{class:`${i}-footer ${a}`},[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`},[o?.map(({icon:v,onClick:d,type:f,disabled:h})=>t.createVNode("div",{class:m.classNames(u,{[`${e.prefixCls}-operations-operation-disabled`]:h&&h?.value}),onClick:d,key:f},[t.cloneVNode(v,{class:p})]))])])]),[[t.vShow,e.open]])]})]})}}}),Re=new L.Keyframe("viewFadeIn",{"0%":{opacity:0},"100%":{opacity:1}}),De=new L.Keyframe("viewFadeOut",{"0%":{opacity:1},"100%":{opacity:0}}),Pe=new L.Keyframe("viewZoomBadgeIn",{"0%":{transform:"scale(0)",opacity:0},"100%":{transform:"scale(1)",opacity:1}}),Ve=new L.Keyframe("viewZoomBadgeOut",{"0%":{transform:"scale(1)"},"100%":{transform:"scale(0)",opacity:0}}),Se=e=>({position:e||"absolute",inset:0});function re(e){return{position:e,top:0,insetInlineEnd:0,bottom:0,insetInlineStart:0}}const Xe=e=>{const{previewCls:n,modalMaskBg:i,marginXL:a,margin:o,colorTextLightSolid:s,previewOperationColorDisabled:u,previewOperationHoverColor:p,motionDurationSlow:v,iconCls:d}=e,f=new Z.TinyColor(i).setAlpha(.1),h=f.clone().setAlpha(.2),x=new Z.TinyColor(i).setAlpha(.06);return{[`${n}-footer`]:{position:"fixed",bottom:a,left:{_skip_check_:!0,value:"50%"},display:"flex",flexDirection:"column",alignItems:"center",color:e.previewOperationColor,transform:"translateX(-50%)"},[`${n}-progress`]:{marginBottom:o},[`${n}-close`]:{position:"fixed",top:a,right:{_skip_check_:!0,value:a},display:"flex",alignItems:"center",justifyContent:"center",color:s,backgroundColor:f.toRgbString(),borderRadius:e.borderRadiusLG,backdropFilter:"saturate(180%) blur(10px)",width:e.sizeXL,height:e.sizeXL,outline:0,border:0,cursor:"pointer",transition:`all ${v}`,"&:hover":{backgroundColor:h.toRgbString()},[`& > ${d}`]:{fontSize:e.previewOperationSize}},[`${n}-operations`]:{display:"flex",alignItems:"center",gap:e.sizeXXS,padding:e.paddingXXS,backgroundColor:f.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 ${v}`,userSelect:"none",[`&:not(${n}-operations-operation-disabled):hover > ${d}`]:{color:p},"&:hover":{backgroundColor:x.toRgbString()},"&-disabled":{color:u,cursor:"not-allowed"},"&:first-of-type":{marginInlineStart:0},[`& > ${d}`]:{fontSize:e.previewOperationSize}}}}},je=e=>{const{modalMaskBg:n,iconCls:i,previewOperationColorDisabled:a,previewCls:o,zIndexPopup:s,motionDurationSlow:u,colorTextLightSolid:p}=e,v=new Z.TinyColor(n).setAlpha(.1),d=v.clone().setAlpha(.2);return{[`${o}-switch-left, ${o}-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:p,background:v.toRgbString(),transform:"translateY(-50%)",cursor:"pointer",transition:`all ${u}`,userSelect:"none","&:hover":{background:d.toRgbString()},"&-disabled":{"&, &:hover":{color:a,background:"transparent",cursor:"not-allowed",[`> ${i}`]:{cursor:"not-allowed"}}},[`> ${i}`]:{fontSize:e.previewOperationSize}},[`${o}-switch-left`]:{insetInlineStart:e.marginSM},[`${o}-switch-right`]:{insetInlineEnd:e.marginSM}}},Ye=e=>{const{motionEaseOut:n,motionDurationSlow:i}=e;return{[e.componentCls]:{height:"100%",textAlign:"center",pointerEvents:"none","&-root":{...re("fixed"),zIndex:e.zIndexPopup,overflow:"auto",outline:0,WebkitOverflowScrolling:"touch"},"&-wrap":{...re("fixed"),zIndex:e.zIndexPopup,overflow:"auto",outline:0,WebkitOverflowScrolling:"touch"},"&-mask":{...re("fixed"),zIndex:e.zIndexPopupBase,height:"100%",backgroundColor:e.colorBgMask,backdropFilter:"blur(2px)"},"&-body":{...Se(),overflow:"hidden"},"&-img":{maxWidth:"100%",maxHeight:"70%",verticalAlign:"middle",transform:"scale3d(1, 1, 1)",cursor:"grab",transition:`transform ${i} ${n} 0s`,userSelect:"none","&-wrapper":{...Se(),transition:`transform ${i} ${n} 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:Re,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear",userSelect:"none"},"&-mask-zoom-leave":{animationName:De,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear",pointerEvents:"none"},"&-zoom-appear, &-zoom-enter":{animationName:Pe,opacity:0,animationTimingFunction:e.motionEaseOutCirc,animationFillMode:"both",transform:"none",animationDuration:e.motionDurationMid,userSelect:"none"},"&-zoom-enter-active":{animationPlayState:"running"},"&-zoom-leave":{animationName:Ve,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%"},"&":[Xe(e),je(e)]}};function Fe(e){return L.useStyle("ImageViewer",n=>{const i=L.mergeToken(n,{zIndexPopup:n.zIndexPopupBase+80,previewOperationColor:new Z.TinyColor(n.colorTextLightSolid).setAlpha(.65).toRgbString(),previewOperationHoverColor:new Z.TinyColor(n.colorTextLightSolid).setAlpha(.85).toRgbString(),previewOperationColorDisabled:new Z.TinyColor(n.colorTextLightSolid).setAlpha(.25).toRgbString(),imagePreviewSwitchSize:n.sizeXL,modalMaskBg:new Z.TinyColor("#000").setAlpha(.45).toRgbString(),previewOperationSize:n.fontSizeIcon*1.5,iconCls:".anticon",previewCls:n.componentCls});return[Ye(i)]},e)}const se={ESC:27,LEFT:37,RIGHT:39},Q={rotateLeft:t.createVNode(A.RotateLeftOutlined,null,null),rotateRight:t.createVNode(A.RotateRightOutlined,null,null),zoomIn:t.createVNode(A.ZoomInOutlined,null,null),zoomOut:t.createVNode(A.ZoomOutOutlined,null,null),flipX:t.createVNode(A.SwapOutlined,null,null),flipY:t.createVNode(A.SwapOutlined,{rotate:90},null)},Ce=["close","left","right","rotateRight","rotateRight","zoomOut","flipX","flipY","rotateLeft"],xe=t.defineComponent({name:"GImagePreview",props:K,inheritAttrs:!1,slots:Object,emits:{close:()=>!0,transform:e=>!0,"update:open":e=>!0},setup:(e,{emit:n,expose:i,slots:a})=>{const o=m.getPrefixCls({suffixCls:"image-view"}),{wrapSSR:s,hashId:u}=Fe(o),[p,v,d]=V.useMergedState(e.open,{value:t.toRef(e,"open"),onChange:c=>{e.onOpenChange?.(c),n("update:open",c)}}),[f,h]=V.useState(!1),[x,b]=V.useState(!0),l=t.ref(),{transform:r,resetTransform:y,updateTransform:w,dispatchZoomChange:S}=Me(l,t.toRef(e,"minScale"),t.toRef(e,"maxScale"),e.onTransform),{isMoving:C,onMouseDown:M,onWheel:R}=ze(l,t.toRef(e,"movable"),d,t.toRef(e,"scaleStep"),r,w,S),{isTouching:T,onTouchStart:N,onTouchMove:k,onTouchEnd:U}=Ae(l,t.toRef(e,"movable"),d,t.toRef(e,"minScale"),r,w,S);V.useEffect(()=>{x.value||b(!0)},[x]);const X=t.ref(null),$=t.ref(e.current),j=t.reactive(new Map),F=t.computed(()=>new Map(Array.from(j).map(([c,{url:O}])=>[c,O]))),ee=t.computed(()=>F.value.get($.value)),B=t.computed(()=>F.value.size),W=t.computed(()=>Array.from(F.value.keys())),D=t.computed(()=>W.value.indexOf($.value)),g=t.computed(()=>B.value>1),Y=t.computed(()=>B.value>=1);t.watch(d,c=>{c&&(f.value=!0)});const z=c=>{$.value=c};t.watch(()=>e.current,c=>{m.isNumber(c)&&z(c)});function ue(c,O){j.set(c,{url:O,loading:!0,canPreview:!1})}const te=()=>{h(!1)},Ge=()=>{y("close"),n("close")},qe=c=>{C.value||X.value===c?.target&&te()},Ke=()=>{const c=j.get($.value);c&&(c.loading=!1,c.canPreview=!0)},Qe=c=>{const O=j.get($.value);O&&(O.loading=!1,O.canPreview=!1),c.target.alt="加载失败"},be=()=>{if(D.value>0||e.infinite){const c=D.value-1<0?e.urls.length-1:D.value-1;z(W.value[c]),y("prev")}},Ne=()=>{if(D.value<B.value-1||e.infinite){const c=D.value+1>e.urls.length-1?0:D.value+1;z(W.value[c]),y("next")}},Je=()=>{S(G+e.scaleStep,"zoomIn")},Ue=()=>{S(G/(G+e.scaleStep),"zoomOut")},et=()=>{w({rotate:r.value.rotate+90},"rotateRight")},tt=()=>{w({rotate:r.value.rotate-90},"rotateLeft")},nt=()=>{w({flipX:!r.value.flipX},"flipX")},ot=()=>{w({flipY:!r.value.flipY},"flipY")},Le=[{icon:m.getSlotVNode(a,e.icons,"flipY")||Q.flipY,onClick:ot,type:"flipY"},{icon:m.getSlotVNode(a,e.icons,"flipX")||Q.flipX,onClick:nt,type:"flipX"},{icon:m.getSlotVNode(a,e.icons,"rotateLeft")||Q.rotateLeft,onClick:tt,type:"rotateLeft"},{icon:m.getSlotVNode(a,e.icons,"rotateRight")||Q.rotateRight,onClick:et,type:"rotateRight"},{icon:m.getSlotVNode(a,e.icons,"zoomOut")||Q.zoomOut,onClick:()=>Ue(),type:"zoomOut",disabled:t.computed(()=>r.value.scale<=e.minScale)},{icon:m.getSlotVNode(a,e.icons,"zoomIn")||Q.zoomIn,onClick:()=>Je(),type:"zoomIn",disabled:t.computed(()=>r.value.scale===e.maxScale)}],it=c=>{d.value&&(r.value.scale!==1?w({x:0,y:0,scale:1},"doubleClick"):S(G+e.scaleStep,"doubleClick",c.clientX,c.clientY))},at=c=>{c.keyCode===se.ESC&&te(),!(!d.value||!g.value)&&(c.keyCode===se.LEFT?be():c.keyCode===se.RIGHT&&Ne())};let de=()=>{};return t.onMounted(()=>{t.watch(()=>e.urls,c=>{m.isArray(c)&&c.forEach((O,ie)=>{ue(ie,O)})},{flush:"post",immediate:!0}),t.watch([()=>d.value,()=>C.value],()=>{de();const c=H(window,"keydown",at,!1);de=()=>{c.remove()}},{flush:"post",immediate:!0})}),t.onUnmounted(()=>{de()}),i({setOpen:c=>{v(c),$.value=e.current}}),()=>{const c=L.getTransitionProps(`${o}-mask-zoom`),O=L.getTransitionProps(`${o}-zoom`),ie={};for(const P in e.icons)ie[P]=m.getSlotVNode(a,e.icons,P);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:`${o}-root ${u.value}`},[t.createVNode(t.Transition,c,{default:()=>[t.withDirectives(t.createVNode("div",{class:`${o}-mask ${u.value}`},null),[[t.vShow,d.value&&f.value]])]}),t.createVNode("div",{ref:X,tabindex:-1,class:[`${o}-wrap`,`${u.value}`,C.value&&`${o}-moving`],onClick:P=>e.onHideOnClickModal&&qe(P)},[t.createVNode(t.Transition,t.mergeProps(O,{onAfterLeave:()=>Ge()}),{default:()=>[t.withDirectives(t.createVNode("div",{role:"dialog",class:`${o} ${u.value}`},[t.createVNode("div",{class:`${o}-content ${u.value}`},[t.createVNode("div",{class:`${o}-body ${u.value}`},[t.createVNode("div",{class:`${o}-img-wrapper ${u.value}`},[t.createVNode("img",{ref:l,class:`${o}-img ${u.value}`,src:ee.value,onLoad:()=>Ke(),onError:P=>Qe(P),style:{transform:`translate3d(${r.value.x}px, ${r.value.y}px, 0) scale3d(${r.value.flipX?"-":""}${r.value.scale}, ${r.value.flipY?"-":""}${r.value.scale}, 1) rotate(${r.value.rotate}deg)`,transitionDuration:!x.value||T.value?"0s":void 0},onWheel:R,onMousedown:M,onDblclick:it,onTouchstart:N,onTouchmove:k,onTouchend:U,onTouchcancel:U},null)])])])]),[[t.vShow,d.value&&f.value]])]})])])])]}),d.value&&f.value&&t.createVNode(Ee,{open:d.value&&f.value,hashId:u.value,count:e.urls.length,current:$.value,zIndex:e.zIndex+1,getContainer:e.getContainer,prefixCls:o,icons:_.omit(ie,Le.map(({type:P})=>P)),tools:Le,infinite:e.infinite,countRender:m.getSlot(a,e,"countRenders"),showSwitch:g.value,showProgress:Y.value,onClose:te,onActive:P=>P>0?Ne():be()},null)]))}}}),ce={width:"100%",height:"100%"},Be={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"},We=e=>{const{motionDurationSlow:n,paddingXXS:i,marginXXS:a,colorTextLightSolid:o}=e,s=".anticon";return{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",color:o,background:new L.FastColor("#000").setA(.5).toRgbString(),cursor:"pointer",opacity:0,transition:`opacity ${n}`,[`.${e.componentCls}-mask-info`]:{...Be,padding:`0 ${L.unit(i)}`,[s]:{marginInlineEnd:a,svg:{verticalAlign:"baseline"}}}}},Ze=e=>({position:e||"absolute",inset:0}),ke=e=>({[e.componentCls]:{display:"inline-block",position:"relative",overflow:"hidden",[`${e.componentCls}-img`]:{...ce,verticalAlign:"top",opacity:1,[`&${e.componentCls}-img-preview`]:{userSelect:"none",cursor:"pointer"},"&-placeholder":{...ce,backgroundColor:e.colorBgContainerDisabled,backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",backgroundRepeat:"no-repeat",backgroundPosition:"center center",backgroundSize:"30%"}},[`${e.componentCls}-error`]:{...ce,display:"flex",alignItems:"center",justifyContent:"center"},[`${e.componentCls}-placeholder`]:{...Ze()},[`${e.componentCls}-mask`]:{...We(e)},[`${e.componentCls}-mask:hover`]:{opacity:1}}}),_e=e=>typeof Element>"u"?!1:e instanceof Element;let Ie="";const He=[...Ce,"placeholder","fallback"],J=t.defineComponent({props:le,name:"GImage",inheritAttrs:!1,emits:{click:()=>!0,load:e=>!0,error:e=>!0},slots:Object,setup(e,{slots:n,emit:i,attrs:a}){const o=E.isClient&&"loading"in HTMLImageElement.prototype,s=m.getPrefixCls({suffixCls:"image"}),{wrapSSR:u,hashId:p}=L.useProStyle("Image",[ke],s),v=t.ref(),d=t.ref(),f=t.ref(!1),h=t.ref(!0),x=t.ref(!1),b=t.ref(),l=t.ref();let r,y;const w=t.computed(()=>e.loading==="eager"?!1:!o&&e.loading==="lazy"||e.lazy),S=t.computed(()=>E.isClient&&e.fit?{...e.imageStyle,objectFit:e.fit}:e.imageStyle),C=t.computed(()=>typeof e.preview=="object"?e.preview:{}),M=t.computed(()=>!!e.preview),R=t.computed(()=>{const{urls:g=[],current:Y=0}=C.value;if(m.isNumber(Y))return g.length>=Y?Y:0;const z=g.indexOf(e.src);return z>=0?z:0}),T=t.computed(()=>L.unit(e.width)),N=t.computed(()=>L.unit(e.height)),k=()=>{E.isClient&&(h.value=!0,f.value=!1,d.value=e.src)};function U(g){f.value||(h.value=!1,f.value=!1,i("load",g))}function X(g){h.value=!1,f.value=!0,i("error",g)}function $(){m.isInContainer(b.value,l.value)&&(k(),ee())}const j=E.useThrottleFn($,200,!0);async function F(){if(!E.isClient)return;await t.nextTick();const{scrollContainer:g}=e;_e(g)?l.value=g:m.isString(g)&&g!==""?l.value=document.querySelector(g)??void 0:b.value&&(l.value=m.getScrollContainer(b.value)),l.value&&(r=E.useEventListener(l,"scroll",j),setTimeout(()=>$(),100))}function ee(){!E.isClient||!l.value||!j||(r?.(),l.value=void 0)}function B(g){if(g.ctrlKey){if(g.deltaY<0)return g.preventDefault(),!1;if(g.deltaY>0)return g.preventDefault(),!1}}const W=()=>{i("click"),!(h.value||f.value)&&M.value&&(y=E.useEventListener("wheel",B,{passive:!1}),Ie=document.body.style.overflow,document.body.style.overflow="hidden",x.value=!0)},D=()=>{y?.(),document.body.style.overflow=Ie,x.value=!1};return t.watch(()=>e.src,()=>{w.value?(h.value=!0,f.value=!1,ee(),F()):k()}),t.watchEffect(()=>{M.value&&x.value?v.value?.setOpen(!0):v.value?.setOpen(!1)}),t.onMounted(()=>{w.value?F():k()}),()=>{const g=_.fromPairs(Object.entries(a).filter(([te])=>/^(?:data-|on[A-Z])/i.test(te)||["id","style","class"].includes(te))),Y=_.omit(a,Object.keys(g)),z=m.getSlotsProps(He,n,e,{render:!0}),ue=m.getSlot(n,e,["preview","mask"],!0);return u(t.createVNode("div",t.mergeProps({class:{[`${p.value}`]:!0,[`${s}`]:!0},ref:b},g,{style:{width:L.unit(e.size)||T.value,height:L.unit(e.size)||N.value,...g.style||{}}}),[f.value?t.createVNode("div",{class:m.classNames(p.value,`${s}-error`)},[z.fallback]):t.createVNode(t.Fragment,null,[t.createVNode("img",t.mergeProps(Y,{src:d.value,loading:e.loading,style:S.value,class:m.classNames(p.value,e.imageClass,`${s}-img`,{[`${s}-img-placeholder`]:e.placeholder===!0,[`${s}-img-preview`]:M.value}),crossorigin:e.crossOrigin,width:T.value,height:N.value,onClick:W,onLoad:U,onError:X}),null),h.value&&t.createVNode("div",{class:m.classNames(`${s}-placeholder`,p.value)},[z.placeholder])]),C.value.mask&&M.value&&t.createVNode("div",{class:m.classNames(`${s}-mask`,C.value.maskClass,p.value),style:{display:g.style?.display==="none"?"none":void 0}},[ue||t.createVNode("div",{class:m.classNames(`${s}-mask-info`,p.value)},[t.createVNode(A.EyeOutlined,null,null)])]),M.value&&t.createVNode(xe,t.mergeProps({ref:v},C.value,_.pick(z,Ce),{urls:C.value.urls||[e.src],current:R.value,onClose:()=>D()}),null)]))}}});J.isGImage=!0,J.install=e=>(e.component(J.name,J),e),I.GImage=J,I.GImagePreview=xe,I.baseProps=q,I.default=J,I.imageProps=le,Object.defineProperties(I,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+/*!
+  * Gx Design Pro
+  * Version: 0.2.0-beta.29
+  * Author: gx12358
+  * Copyright (C) 2024 gx12358
+  * License: MIT License
+  * Description: Gx Design Image
+  * Date Created: 2025-08-15 
+  * Homepage: 
+  * Contact: gx12358@gmail.com
+*/
+(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,O,L,f,A,U,P,B){"use strict";const H={infinite:{type:Boolean,default:!0},zIndex:{type:Number,default:2e3},current:{type:Number,default:0},getContainer:{type:String}},le={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:H.zIndex,getContainer:H.getContainer},_={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:H.zIndex,current:H.current,infinite:H.infinite,getContainer:le.getContainer,onHideOnClickModal:{type:Boolean,default:!0},countRender:[Function,Array,Object],icons:{type:Object,default:()=>({})},onTransform:Function,onOpenChange:Function,"onUpdate:open":Function};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 re=new Map;function he(e){re.delete(e)}function we(e,n=1){ve+=1;const i=ve;function a(o){if(o===0)he(i),e();else{const s=ge(()=>{a(o-1)});re.set(i,s)}}return a(n),i}we.cancel=e=>{const n=re.get(e);return he(n),me(n)};const ne={x:0,y:0,rotate:0,scale:1,flipX:!1,flipY:!1};function Me(e,n,i,a){const o=t.ref(null),s=t.ref([]),[u,p]=P.useState(ne),m=h=>{p(ne),U.isEqual(ne,u.value)||a?.({transform:ne,action:h})},d=(h,x)=>{o.value===null&&(s.value=[],o.value=we(()=>{let I=U.cloneDeep(u.value);s.value.forEach(l=>{I={...I,...l}}),o.value=null,a?.({transform:I,action:x}),p(I)})),s.value.push({...u.value,...h})};return{transform:u,resetTransform:m,updateTransform:d,dispatchZoomChange:(h,x,I,l,r)=>{const{width:y,height:w,offsetWidth:S,offsetHeight:C,offsetLeft:M,offsetTop:E}=e.value;let T=h,N=u.value.scale*h;N>i.value?(N=i.value,T=i.value/u.value.scale):N<n.value&&(N=r?N:n.value,T=N/u.value.scale);const k=I??innerWidth/2,Q=l??innerHeight/2,X=T-1,$=X*y*.5,j=X*w*.5,F=X*(k-u.value.x-M),J=X*(Q-u.value.y-E);let W=u.value.x-(F-$),Z=u.value.y-(J-j);if(h<1&&N===1){const R=S*N,g=C*N,{width:Y,height:D}=A.useWindowSize();R<=Y.value&&g<=D.value&&(W=0,Z=0)}d({x:W,y:Z,scale:N},x)}}}function Te(e,n){process.env.NODE_ENV!=="production"&&console!==void 0&&console.error(`Warning: ${n}`)}let pe=!1;try{const e=Object.defineProperty({},"passive",{get(){pe=!0}});window.addEventListener("testPassive",null,e),window.removeEventListener("testPassive",null,e)}catch{}function G(e,n,i,a){if(e&&e.addEventListener){let o=a;o===void 0&&pe&&(n==="touchstart"||n==="touchmove"||n==="wheel")&&(o={passive:!1}),e.addEventListener(n,i,o)}return{remove:()=>{e&&e.removeEventListener&&e.removeEventListener(n,i)}}}const q=1,$e=1;function ye(e,n,i,a){const o=n+i,s=(i-a)/2;if(i>a){if(n>0)return{[e]:s};if(n<0&&o<a)return{[e]:-s}}else if(n<0||o>a)return{[e]:n<0?s:-s};return{}}function Se(e,n,i,a){const{width:o,height:s}=A.useWindowSize();let u=null;return e<=o.value&&n<=s.value?u={x:0,y:0}:(e>o.value||n>s.value)&&(u={...ye("x",i,e,o.value),...ye("y",a,n,s.value)}),u}function ze(e,n,i,a,o,s,u){const[p,m]=P.useState(!1),d=t.ref({diffX:0,diffY:0,transformX:0,transformY:0}),v=l=>{!n||l.button!==0||(l.preventDefault(),l.stopPropagation(),d.value={diffX:l.pageX-o.value.x,diffY:l.pageY-o.value.y,transformX:o.value.x,transformY:o.value.y},m(!0))},h=l=>{i&&p.value&&s({x:l.pageX-d.value.diffX,y:l.pageY-d.value.diffY},"move")},x=()=>{if(i&&p.value){m(!1);const{transformX:l,transformY:r}=d.value;if(!(o.value.x!==l&&o.value.y!==r))return;const w=e.value.offsetWidth*o.value.scale,S=e.value.offsetHeight*o.value.scale,{left:C,top:M}=e.value.getBoundingClientRect(),E=o.value.rotate%180!==0,T=Se(E?S:w,E?w:S,C,M);T&&s({...T},"dragRebound")}},I=l=>{if(!i||l.deltaY===0)return;const r=Math.abs(l.deltaY/100),y=Math.min(r,$e);let w=q+y*a.value;l.deltaY>0&&(w=q/w),u(w,"wheel",l.clientX,l.clientY)};return P.useEffect(()=>{let l,r,y,w;if(n){y=G(window,"mouseup",x,!1),w=G(window,"mousemove",h,!1);try{window.top!==window.self&&(l=G(window.top,"mouseup",x,!1),r=G(window.top,"mousemove",h,!1))}catch(S){Te(!1,`[rc-image] ${S}`)}}return()=>{y?.remove(),w?.remove(),l?.remove(),r?.remove()}},[i,p,()=>o.value.x,()=>o.value.y,()=>o.value.rotate,n]),{isMoving:p,onMouseDown:v,onMouseMove:h,onMouseUp:x,onWheel:I}}function oe(e,n){const i=e.x-n.x,a=e.y-n.y;return Math.hypot(i,a)}function Oe(e,n,i,a){const o=oe(e,i),s=oe(n,a);if(o===0&&s===0)return[e.x,e.y];const u=o/(o+s),p=e.x+u*(n.x-e.x),m=e.y+u*(n.y-e.y);return[p,m]}function Ae(e,n,i,a,o,s,u){const[p,m]=P.useState(!1),d=t.ref({point1:{x:0,y:0},point2:{x:0,y:0},eventType:"none"}),v=l=>{d.value={...d.value,...l}},h=l=>{if(!n.value)return;l.stopPropagation(),m(!0);const{touches:r=[]}=l;r.length>1?v({point1:{x:r[0].clientX,y:r[0].clientY},point2:{x:r[1].clientX,y:r[1].clientY},eventType:"touchZoom"}):v({point1:{x:r[0].clientX-o.value.x,y:r[0].clientY-o.value.y},eventType:"move"})},x=l=>{const{touches:r=[]}=l,{point1:y,point2:w,eventType:S}=d.value;if(r.length>1&&S==="touchZoom"){const C={x:r[0].clientX,y:r[0].clientY},M={x:r[1].clientX,y:r[1].clientY},[E,T]=Oe(y,w,C,M),N=oe(C,M)/oe(y,w);u(N,"touchZoom",E,T,!0),v({point1:C,point2:M,eventType:"touchZoom"})}else S==="move"&&(s({x:r[0].clientX-y.x,y:r[0].clientY-y.y},"move"),v({eventType:"move"}))},I=()=>{if(!i.value)return;if(p&&m(!1),v({eventType:"none"}),a.value>o.value.scale)return s({x:0,y:0,scale:a.value},"touchZoom");const l=e.value.offsetWidth*o.value.scale,r=e.value.offsetHeight*o.value.scale,{left:y,top:w}=e.value.getBoundingClientRect(),S=o.value.rotate%180!==0,C=Se(S?r:l,S?l:r,y,w);C&&s({...C},"dragRebound")};return P.useEffect(()=>{let l;return i.value&&n.value&&(l=G(window,"touchmove",r=>r.preventDefault(),{passive:!1})),()=>{l?.remove()}},[i,n]),{isTouching:p,onTouchStart:h,onTouchMove:x,onTouchEnd:I}}const Ee=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:_.zIndex,icons:_.icons,infinite:_.infinite,getContainer:_.getContainer,countRender:_.countRender,tools:Array,onClose:Function,onActive:Function},setup(e){const n=(i,a)=>{i.preventDefault(),i.stopPropagation(),e.onActive?.(a)};return()=>{const{prefixCls:i,hashId:a,tools:o}=e,s=L.getTransitionProps(`${e.prefixCls}-fade`),u=`${i}-operations-operation`,p=`${i}-operations-icon`;return t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[t.createVNode(t.Transition,s,{default:()=>[t.withDirectives(t.createVNode("div",{class:f.classNames(`${i}-operations-wrapper`,a),style:{zIndex:e.zIndex}},[e.icons?.close===null?null:t.createVNode("button",{class:`${i}-close ${a}`,onClick:e.onClose},[e.icons?.close||t.createVNode(O.CloseOutlined,null,null)]),e.showSwitch&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:f.classNames(`${i}-switch-left ${a}`,{[`${i}-switch-left-disabled`]:e.infinite?!1:e.current===0}),onClick:m=>n(m,-1)},[e.icons?.left||t.createVNode(O.LeftOutlined,null,null)]),t.createVNode("div",{class:f.classNames(`${i}-switch-right ${a}`,{[`${i}-switch-right-disabled`]:e.infinite?!1:e.current===e.count-1}),onClick:m=>n(m,1)},[e.icons?.right||t.createVNode(O.RightOutlined,null,null)])]),t.createVNode("div",{class:`${i}-footer ${a}`},[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`},[o?.map(({icon:m,onClick:d,type:v,disabled:h})=>t.createVNode("div",{class:f.classNames(u,{[`${e.prefixCls}-operations-operation-disabled`]:h&&h?.value}),onClick:d,key:v},[t.cloneVNode(m,{class:p})]))])])]),[[t.vShow,e.open]])]})]})}}}),Re=new L.Keyframe("viewFadeIn",{"0%":{opacity:0},"100%":{opacity:1}}),De=new L.Keyframe("viewFadeOut",{"0%":{opacity:1},"100%":{opacity:0}}),Ve=new L.Keyframe("viewZoomBadgeIn",{"0%":{transform:"scale(0)",opacity:0},"100%":{transform:"scale(1)",opacity:1}}),Pe=new L.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 Xe=e=>{const{previewCls:n,modalMaskBg:i,marginXL:a,margin:o,colorTextLightSolid:s,previewOperationColorDisabled:u,previewOperationHoverColor:p,motionDurationSlow:m,iconCls:d}=e,v=new B.TinyColor(i).setAlpha(.1),h=v.clone().setAlpha(.2),x=new B.TinyColor(i).setAlpha(.5),I=new B.TinyColor(i).setAlpha(.03);return{[`${n}-footer`]:{position:"fixed",bottom:a,left:{_skip_check_:!0,value:"50%"},display:"flex",flexDirection:"column",alignItems:"center",color:e.previewOperationColor,transform:"translateX(-50%)"},[`${n}-progress`]:{marginBottom:o},[`${n}-close`]:{position:"fixed",top:a,right:{_skip_check_:!0,value:a},display:"flex",alignItems:"center",justifyContent:"center",color:s,backgroundColor:v.toRgbString(),borderRadius:e.borderRadiusLG,backdropFilter:"saturate(180%) blur(10px)",width:e.sizeXL,height:e.sizeXL,outline:0,border:0,cursor:"pointer",transition:`all ${m}`,"&:hover":{backgroundColor:h.toRgbString()},[`& > ${d}`]:{fontSize:e.previewOperationSize}},[`${n}-operations`]:{display:"flex",alignItems:"center",gap:e.sizeXXS,padding:e.paddingXXS,border:`1px solid ${e.colorBorderSecondary}`,backgroundColor:x.toRgbString(),borderRadius:e.borderRadiusLG,backdropFilter:"saturate(150%) 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 ${m}`,userSelect:"none",[`&:not(${n}-operations-operation-disabled):hover > ${d}`]:{color:p},"&:hover":{backgroundColor:I.toRgbString()},"&-disabled":{color:u,cursor:"not-allowed"},"&:first-of-type":{marginInlineStart:0},[`& > ${d}`]:{fontSize:e.previewOperationSize}}}}},je=e=>{const{modalMaskBg:n,iconCls:i,previewOperationColorDisabled:a,previewCls:o,zIndexPopup:s,motionDurationSlow:u,colorTextLightSolid:p}=e,m=new B.TinyColor(n).setAlpha(.1),d=m.clone().setAlpha(.2);return{[`${o}-switch-left, ${o}-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:p,background:m.toRgbString(),transform:"translateY(-50%)",cursor:"pointer",transition:`all ${u}`,userSelect:"none","&:hover":{background:d.toRgbString()},"&-disabled":{"&, &:hover":{color:a,background:"transparent",cursor:"not-allowed",[`> ${i}`]:{cursor:"not-allowed"}}},[`> ${i}`]:{fontSize:e.previewOperationSize}},[`${o}-switch-left`]:{insetInlineStart:e.marginSM},[`${o}-switch-right`]:{insetInlineEnd:e.marginSM}}},Ye=e=>{const{motionEaseOut:n,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(8px)"},"&-body":{...Ce(),overflow:"hidden"},"&-img":{maxWidth:"100%",maxHeight:"70%",verticalAlign:"middle",transform:"scale3d(1, 1, 1)",cursor:"grab",transition:`transform ${i} ${n} 0s`,userSelect:"none","&-wrapper":{...Ce(),transition:`transform ${i} ${n} 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:Re,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear",userSelect:"none"},"&-mask-zoom-leave":{animationName:De,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:Pe,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%"},"&":[Xe(e),je(e)]}};function Be(e){return L.useStyle("ImageViewer",n=>{const i=L.mergeToken(n,{zIndexPopup:n.zIndexPopupBase+80,previewOperationColor:new B.TinyColor(n.colorTextLightSolid).setAlpha(.65).toRgbString(),previewOperationHoverColor:new B.TinyColor(n.colorTextLightSolid).setAlpha(.85).toRgbString(),previewOperationColorDisabled:new B.TinyColor(n.colorTextLightSolid).setAlpha(.25).toRgbString(),imagePreviewSwitchSize:n.sizeXL,modalMaskBg:new B.TinyColor("#000").setAlpha(.45).toRgbString(),previewOperationSize:n.fontSizeIcon*1.5,iconCls:".anticon",previewCls:n.componentCls});return[Ye(i)]},e)}const ce={ESC:27,LEFT:37,RIGHT:39},K={rotateLeft:t.createVNode(O.RotateLeftOutlined,null,null),rotateRight:t.createVNode(O.RotateRightOutlined,null,null),zoomIn:t.createVNode(O.ZoomInOutlined,null,null),zoomOut:t.createVNode(O.ZoomOutOutlined,null,null),flipX:t.createVNode(O.SwapOutlined,null,null),flipY:t.createVNode(O.SwapOutlined,{rotate:90},null)},xe=t.defineComponent({name:"GImagePreview",props:_,inheritAttrs:!1,slots:Object,emits:{close:()=>!0,transform:e=>!0,"update:open":e=>!0},setup:(e,{emit:n,expose:i,slots:a})=>{const o=f.getPrefixCls({suffixCls:"image-view"}),{wrapSSR:s,hashId:u}=Be(o),[p,m,d]=P.useMergedState(e.open,{value:t.toRef(e,"open"),onChange:c=>{e.onOpenChange?.(c),n("update:open",c)}}),[v,h]=P.useState(!1),[x,I]=P.useState(!0),l=t.ref(),{transform:r,resetTransform:y,updateTransform:w,dispatchZoomChange:S}=Me(l,t.toRef(e,"minScale"),t.toRef(e,"maxScale"),e.onTransform),{isMoving:C,onMouseDown:M,onWheel:E}=ze(l,t.toRef(e,"movable"),d,t.toRef(e,"scaleStep"),r,w,S),{isTouching:T,onTouchStart:N,onTouchMove:k,onTouchEnd:Q}=Ae(l,t.toRef(e,"movable"),d,t.toRef(e,"minScale"),r,w,S);P.useEffect(()=>{x.value||I(!0)},[x]);const X=t.ref(null),$=t.ref(e.current),j=t.reactive(new Map),F=t.computed(()=>new Map(Array.from(j).map(([c,{url:z}])=>[c,z]))),J=t.computed(()=>F.value.get($.value)),W=t.computed(()=>F.value.size),Z=t.computed(()=>Array.from(F.value.keys())),R=t.computed(()=>Z.value.indexOf($.value)),g=t.computed(()=>W.value>1),Y=t.computed(()=>W.value>=1);t.watch(d,c=>{c&&(v.value=!0)});const D=c=>{$.value=c};t.watch(()=>e.current,c=>{f.isNumber(c)&&D(c)});function de(c,z){j.set(c,{url:z,loading:!0,canPreview:!1})}const te=()=>{h(!1)},ie=()=>{y("close"),n("close")},_e=c=>{C.value||X.value===c?.target&&te()},Ge=()=>{const c=j.get($.value);c&&(c.loading=!1,c.canPreview=!0)},qe=c=>{const z=j.get($.value);z&&(z.loading=!1,z.canPreview=!1),c.target.alt="加载失败"},be=()=>{if(R.value>0||e.infinite){const c=R.value-1<0?e.urls.length-1:R.value-1;D(Z.value[c]),y("prev")}},Ne=()=>{if(R.value<W.value-1||e.infinite){const c=R.value+1>e.urls.length-1?0:R.value+1;D(Z.value[c]),y("next")}},Ke=()=>{S(q+e.scaleStep,"zoomIn")},Qe=()=>{S(q/(q+e.scaleStep),"zoomOut")},Je=()=>{w({rotate:r.value.rotate+90},"rotateRight")},Ue=()=>{w({rotate:r.value.rotate-90},"rotateLeft")},et=()=>{w({flipX:!r.value.flipX},"flipX")},tt=()=>{w({flipY:!r.value.flipY},"flipY")},Le=[{icon:f.getSlotVNode(a,e.icons,"flipY")||K.flipY,onClick:tt,type:"flipY"},{icon:f.getSlotVNode(a,e.icons,"flipX")||K.flipX,onClick:et,type:"flipX"},{icon:f.getSlotVNode(a,e.icons,"rotateLeft")||K.rotateLeft,onClick:Ue,type:"rotateLeft"},{icon:f.getSlotVNode(a,e.icons,"rotateRight")||K.rotateRight,onClick:Je,type:"rotateRight"},{icon:f.getSlotVNode(a,e.icons,"zoomOut")||K.zoomOut,onClick:()=>Qe(),type:"zoomOut",disabled:t.computed(()=>r.value.scale<=e.minScale)},{icon:f.getSlotVNode(a,e.icons,"zoomIn")||K.zoomIn,onClick:()=>Ke(),type:"zoomIn",disabled:t.computed(()=>r.value.scale===e.maxScale)}],nt=c=>{d.value&&(r.value.scale!==1?w({x:0,y:0,scale:1},"doubleClick"):S(q+e.scaleStep,"doubleClick",c.clientX,c.clientY))},ot=c=>{c.keyCode===ce.ESC&&te(),!(!d.value||!g.value)&&(c.keyCode===ce.LEFT?be():c.keyCode===ce.RIGHT&&Ne())};let fe=()=>{};return t.onMounted(()=>{t.watch(()=>e.urls,c=>{f.isArray(c)&&c.forEach((z,ae)=>{de(ae,z)})},{flush:"post",immediate:!0}),t.watch([()=>d.value,()=>C.value],()=>{fe();const c=G(window,"keydown",ot,!1);fe=()=>{c.remove()}},{flush:"post",immediate:!0})}),t.onUnmounted(()=>{fe()}),i({setOpen:c=>{m(c),$.value=e.current}}),()=>{const c=L.getTransitionProps(`${o}-mask-zoom`),z=L.getTransitionProps(`${o}-zoom`),ae={};for(const V in e.icons)ae[V]=f.getSlotVNode(a,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:`${o}-root ${u.value}`},[t.createVNode(t.Transition,c,{default:()=>[t.withDirectives(t.createVNode("div",{class:`${o}-mask ${u.value}`},null),[[t.vShow,d.value&&v.value]])]}),t.createVNode("div",{ref:X,tabindex:-1,class:[`${o}-wrap`,`${u.value}`,C.value&&`${o}-moving`],onClick:V=>e.onHideOnClickModal&&_e(V)},[t.createVNode(t.Transition,t.mergeProps(z,{onAfterLeave:()=>ie()}),{default:()=>[t.withDirectives(t.createVNode("div",{role:"dialog",class:`${o} ${u.value}`},[t.createVNode("div",{class:`${o}-content ${u.value}`},[t.createVNode("div",{class:`${o}-body ${u.value}`},[t.createVNode("div",{class:`${o}-img-wrapper ${u.value}`},[t.createVNode("img",{ref:l,class:`${o}-img ${u.value}`,src:J.value,onLoad:()=>Ge(),onError:V=>qe(V),style:{transform:`translate3d(${r.value.x}px, ${r.value.y}px, 0) scale3d(${r.value.flipX?"-":""}${r.value.scale}, ${r.value.flipY?"-":""}${r.value.scale}, 1) rotate(${r.value.rotate}deg)`,transitionDuration:!x.value||T.value?"0s":void 0},onWheel:E,onMousedown:M,onDblclick:nt,onTouchstart:N,onTouchmove:k,onTouchend:Q,onTouchcancel:Q},null)])])])]),[[t.vShow,d.value&&v.value]])]})])])])]}),d.value&&v.value&&t.createVNode(Ee,{open:d.value&&v.value,hashId:u.value,count:e.urls.length,current:$.value,zIndex:e.zIndex+1,getContainer:e.getContainer,prefixCls:o,icons:U.omit(ae,Le.map(({type:V})=>V)),tools:Le,infinite:e.infinite,countRender:f.getSlot(a,e,"countRender"),showSwitch:g.value,showProgress:Y.value,onClose:te,onActive:V=>V>0?Ne():be()},null)]))}}}),ue={width:"100%",height:"100%"},Fe={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"},We=e=>{const{motionDurationSlow:n,paddingXXS:i,marginXXS:a,colorTextLightSolid:o}=e,s=".anticon";return{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",color:o,background:new L.FastColor("#000").setA(.5).toRgbString(),cursor:"pointer",opacity:0,transition:`opacity ${n}`,[`.${e.componentCls}-mask-info`]:{...Fe,padding:`0 ${L.unit(i)}`,[s]:{marginInlineEnd:a,svg:{verticalAlign:"baseline"}}}}},Ze=e=>({position:e||"absolute",inset:0}),ke=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`]:{...Ze()},[`${e.componentCls}-mask`]:{...We(e)},[`${e.componentCls}-mask:hover`]:{opacity:1}}}),He=e=>typeof Element>"u"?!1:e instanceof Element;let Ie="";const ee=t.defineComponent({props:le,name:"GImage",inheritAttrs:!1,emits:{click:()=>!0,load:e=>!0,error:e=>!0},slots:Object,setup(e,{slots:n,emit:i,attrs:a}){const o=A.isClient&&"loading"in HTMLImageElement.prototype,s=f.getPrefixCls({suffixCls:"image"}),{wrapSSR:u,hashId:p}=L.useProStyle("Image",[ke],s),m=t.ref(),d=t.ref(),v=t.ref(!1),h=t.ref(!0),x=t.ref(!1),I=t.ref(),l=t.ref();let r,y;const w=t.computed(()=>e.loading==="eager"?!1:!o&&e.loading==="lazy"||e.lazy),S=t.computed(()=>A.isClient&&e.fit?{...e.imageStyle,objectFit:e.fit}:e.imageStyle),C=t.computed(()=>typeof e.preview=="object"?e.preview:{}),M=t.computed(()=>!!e.preview),E=t.computed(()=>{const{urls:g=[],current:Y=0}=C.value;if(f.isNumber(Y))return g.length>=Y?Y:0;const D=g.indexOf(e.src);return D>=0?D:0}),T=t.computed(()=>L.unit(e.width)),N=t.computed(()=>L.unit(e.height)),k=()=>{A.isClient&&(h.value=!0,v.value=!1,d.value=e.src)};function Q(g){v.value||(h.value=!1,v.value=!1,i("load",g))}function X(g){h.value=!1,v.value=!0,i("error",g)}function $(){f.isInContainer(I.value,l.value)&&(k(),J())}const j=A.useThrottleFn($,200,!0);async function F(){if(!A.isClient)return;await t.nextTick();const{scrollContainer:g}=e;He(g)?l.value=g:f.isString(g)&&g!==""?l.value=document.querySelector(g)??void 0:I.value&&(l.value=f.getScrollContainer(I.value)),l.value&&(r=A.useEventListener(l,"scroll",j),setTimeout(()=>$(),100))}function J(){!A.isClient||!l.value||!j||(r?.(),l.value=void 0)}function W(g){if(g.ctrlKey){if(g.deltaY<0)return g.preventDefault(),!1;if(g.deltaY>0)return g.preventDefault(),!1}}const Z=()=>{i("click"),!(h.value||v.value)&&M.value&&(y=A.useEventListener("wheel",W,{passive:!1}),Ie=document.body.style.overflow,document.body.style.overflow="hidden",x.value=!0)},R=()=>{y?.(),document.body.style.overflow=Ie,x.value=!1};return t.watch(()=>e.src,()=>{w.value?(h.value=!0,v.value=!1,J(),F()):k()}),t.watchEffect(()=>{M.value&&x.value?m.value?.setOpen(!0):m.value?.setOpen(!1)}),t.onMounted(()=>{w.value?F():k()}),()=>{const g=U.fromPairs(Object.entries(a).filter(([ie])=>/^(?:data-|on[A-Z])/i.test(ie)||["id","style","class"].includes(ie))),Y=U.omit(a,Object.keys(g)),D=f.getSlot(n,e,"fallback",{render:!0}),de=f.getSlot(n,e,"mask",{render:!0}),te=f.getSlot(n,e,"placeholder",{render:!0});return u(t.createVNode("div",t.mergeProps({class:{[`${p.value}`]:!0,[`${s}`]:!0},ref:I},g,{style:{width:L.unit(e.size)||T.value,height:L.unit(e.size)||N.value,...g.style||{}}}),[v.value?t.createVNode("div",{class:f.classNames(p.value,`${s}-error`)},[D]):t.createVNode(t.Fragment,null,[t.createVNode("img",t.mergeProps(Y,{src:d.value,loading:e.loading,style:S.value,class:f.classNames(p.value,e.imageClass,`${s}-img`,{[`${s}-img-placeholder`]:e.placeholder===!0,[`${s}-img-preview`]:M.value}),crossorigin:e.crossOrigin,width:T.value,height:N.value,onClick:Z,onLoad:Q,onError:X}),null),h.value&&t.createVNode("div",{class:f.classNames(`${s}-placeholder`,p.value)},[te])]),C.value.mask&&M.value&&t.createVNode("div",{class:f.classNames(`${s}-mask`,C.value.maskClass,p.value),style:{display:g.style?.display==="none"?"none":void 0}},[de||t.createVNode("div",{class:f.classNames(`${s}-mask-info`,p.value)},[t.createVNode(O.EyeOutlined,null,null)])]),M.value&&t.createVNode(xe,t.mergeProps({ref:m},C.value,{urls:C.value.urls||[e.src],current:E.value,onClose:()=>R()}),n)]))}}});ee.isGImage=!0,ee.install=e=>(e.component(ee.name,ee),e),b.GImage=ee,b.GImagePreview=xe,b.baseProps=H,b.imageProps=le,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/dist/index.d.ts

@@ -1,9 +1,8 @@
 import type { PreviewPropsIcons } from './ImagePreview/props';
-export type { GImageProps } from './Image';
-export { default } from './Image';
+export * from './props';
+export * from './ImagePreview/props';
 export { default as GImage } from './Image';
+export { default as GImagePreview } from './ImagePreview';
 export type { PreviewPropsIcons };
+export type { GImageProps } from './Image';
 export type { ImagePreviewProps } from './ImagePreview';
-export { default as GImagePreview } from './ImagePreview';
-export * from './ImagePreview/props';
-export * from './props';

package/dist/slots.d.ts

@@ -0,0 +1,3 @@
+export type SlotKeys = 'default' | 'mask' | 'close' | 'left' | 'right' | 'flipX' | 'flipY' | 'zoomIn' | 'zoomOut' | 'fallback' | 'placeholder' | 'countRender' | 'rotateLeft' | 'rotateRight';
+export declare const previewSlotKeys: SlotKeys[];
+export declare const imageSlotKeys: SlotKeys[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gx-design-vue/image",
   "type": "module",
-  "version": "0.2.0-beta.29",
+  "version": "0.2.0-beta.30",
   "description": "Gx Design Image",
   "exports": {
     ".": {
@@ -30,9 +30,9 @@
     "vue": ">=3.0.0"
   },
   "dependencies": {
-    "@gx-design-vue/pro-hooks": "^0.2.0-beta.46",
-    "@gx-design-vue/pro-provider": "^0.1.0-beta.112",
-    "@gx-design-vue/pro-utils": "^0.2.0-beta.66",
+    "@gx-design-vue/pro-hooks": "^0.2.0-beta.50",
+    "@gx-design-vue/pro-provider": "^0.1.0-beta.115",
+    "@gx-design-vue/pro-utils": "^0.2.0-beta.72",
     "@vueuse/core": "^9.10.0",
     "lodash-es": "^4.17.21"
   },