@gx-design-vue/image 0.2.0-alpha.4 → 0.2.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Image.js +2 -2
- package/dist/ImagePreview.js +23 -14
- package/dist/g-image.esm.js +348 -527
- package/dist/g-image.js +1 -1
- package/package.json +6 -6
package/dist/g-image.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`),require(`@antdv-next/icons`),require(`@gx-design-vue/pro-provider`),require(`antdv-next/config-provider/context`),require(`antdv-next/config-provider/hooks/useCSSVarCls`),require(`antdv-next`)):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@antdv-next/icons`,`@gx-design-vue/pro-provider`,`antdv-next/config-provider/context`,`antdv-next/config-provider/hooks/useCSSVarCls`,`antdv-next`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.GImage={},e.Vue,e._antdv_next_icons,e._gx_design_vue_pro_provider,e.antdv_next_config_provider_context,e.antdv_next_config_provider_hooks_useCSSVarCls,e.antdv_next))})(this,function(e,t,n,r,i,a,o){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var s=Object.create,c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=u(t),a=0,o=i.length,s;a<o;a++)s=i[a],!f.call(e,s)&&s!==n&&c(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=l(t,s))||r.enumerable});return e};a=((e,t,n)=>(n=e==null?{}:s(d(e)),p(t||!e||!e.__esModule?c(n,`default`,{value:e,enumerable:!0}):n,e)))(a,1);function m(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function h(e){return typeof e==`boolean`}function g(e){return typeof e==`number`}function _(e){return Array.isArray===void 0?Object.prototype.toString.call(e)===`[object Array]`:Array.isArray(e)}function v(e){return e!==null&&m(e,`Object`)}function y(e){return typeof e==`string`}var b=typeof window>`u`,x=e=>setTimeout(e,16),S=e=>clearTimeout(e);typeof window<`u`&&`requestAnimationFrame`in window&&(x=e=>window.requestAnimationFrame(e),S=e=>window.cancelAnimationFrame(e));var C=0,w=new Map;function T(e){w.delete(e)}function E(e,t=1){C+=1;let n=C;function r(t){if(t===0)T(n),e();else{let e=x(()=>{r(t-1)});w.set(n,e)}}return r(t),n}E.cancel=e=>{let t=w.get(e);return T(t),S(t)};function D(e){return e.replace(/[-_](.)/g,(e,t)=>t.toUpperCase())}function O(e,t){if(b||!e||!t)return``;t=D(t),t===`float`&&(t=`cssFloat`);try{let n=e.style[t];if(n)return n;let r=document?.defaultView?.getComputedStyle(e,``);return r?r[t]:``}catch{return e.style[t]}}function k(e,t){if(!b)return(t==null?O(e,`overflow`):t?O(e,`overflow-y`):O(e,`overflow-x`)).match(/(scroll|auto|overlay)/)}function ee(e,t){if(b)return;let n=e;for(;n;){if([window,document,document.documentElement].includes(n))return window;if(k(n,t))return n;n=n.parentNode}return n}function A(...e){let t=[];for(let n=0;n<e.length;n++){let r=e[n];if(r){if(y(r))t.push(r);else if(_(r))for(let e=0;e<r.length;e++){let n=A(r[e]);n&&t.push(n)}else if(v(r))for(let e in r)r[e]&&t.push(e)}}return t.filter(e=>e).join(` `)}function j({vnode:e,defaultVNode:t},...n){return e===!1?null:typeof e==`function`?e?.(...n):e||t}function M({value:e,slotsValue:n,defaultVNode:r,render:i}){return e===!1?!1:e===!0?n??r:v(e)&&i?(0,t.isVNode)(e)?e:n:e||n}function N(e,...t){let{slots:n,key:r=`default`,render:i,props:a,defaultChildren:o}=e,s=a[r],c=n?.[r],l=typeof o==`function`?o?.():o,u=M({value:s,slotsValue:c,defaultVNode:l,render:i});return u===!1?!1:i?j({vnode:u,defaultVNode:l},...t):u}function P(e,...t){let{slots:n,key:r=`default`,props:i,defaultChildren:a}=e,o=i[r],s=n?.[r]?.(...t),c=typeof a==`function`?a?.():a,l=M({value:o,slotsValue:s,defaultVNode:c,render:!0});return l===!1?!1:j({vnode:l,defaultVNode:c},...t)}function te(e,...t){let{slots:n,props:r,keys:i,render:a,defaultVNodes:o}=e,s={};return i.forEach((e,i)=>{let c=o?o[i]:null,l=a?P({slots:n,props:r,key:e,defaultChildren:c},...t):N({slots:n,props:r,key:e,render:!1,defaultChildren:c},...t);(h(l)||l)&&(s[e]=l)}),s}function F(e,n){return(0,t.getCurrentScope)()?((0,t.onScopeDispose)(e,n),!0):!1}var I=new WeakMap,L=(...e)=>{let n=e[0],r=(0,t.getCurrentInstance)()?.proxy??(0,t.getCurrentScope)();if(r==null&&!(0,t.hasInjectionContext)())throw Error(`injectLocal must be called in setup`);return r&&I.has(r)&&n in I.get(r)?I.get(r)[n]:(0,t.inject)(...e)},R=typeof window<`u`&&typeof document<`u`;typeof WorkerGlobalScope<`u`&&globalThis instanceof WorkerGlobalScope;var z=Object.prototype.toString,B=e=>z.call(e)===`[object Object]`,V=()=>{},H=U();function U(){var e,t;return R&&!!(!((e=window)==null||(e=e.navigator)==null)&&e.userAgent)&&(/iP(?:ad|hone|od)/.test(window.navigator.userAgent)||((t=window)==null||(t=t.navigator)==null?void 0:t.maxTouchPoints)>2&&/iPad|Macintosh/.test(window?.navigator.userAgent))}function ne(...e){if(e.length!==1)return(0,t.toRef)(...e);let n=e[0];return typeof n==`function`?(0,t.readonly)((0,t.customRef)(()=>({get:n,set:V}))):(0,t.ref)(n)}function re(e,t){function n(...n){return new Promise((r,i)=>{Promise.resolve(e(()=>t.apply(this,n),{fn:t,thisArg:this,args:n})).then(r).catch(i)})}return n}function ie(...e){let n=0,r,i=!0,a=V,o,s,c,l,u;!(0,t.isRef)(e[0])&&typeof e[0]==`object`?{delay:s,trailing:c=!0,leading:l=!0,rejectOnCancel:u=!1}=e[0]:[s,c=!0,l=!0,u=!1]=e;let d=()=>{r&&(clearTimeout(r),r=void 0,a(),a=V)};return e=>{let f=(0,t.toValue)(s),p=Date.now()-n,m=()=>o=e();return d(),f<=0?(n=Date.now(),m()):(p>f?(n=Date.now(),(l||!i)&&m()):c&&(o=new Promise((e,t)=>{a=u?t:e,r=setTimeout(()=>{n=Date.now(),i=!0,e(m()),d()},Math.max(0,f-p))})),!l&&!r&&(r=setTimeout(()=>i=!0,f)),i=!1,o)}}function W(e){return e.endsWith(`rem`)?Number.parseFloat(e)*16:Number.parseFloat(e)}function G(e){return Array.isArray(e)?e:[e]}function ae(e){return e||(0,t.getCurrentInstance)()}function oe(e,t=200,n=!1,r=!0,i=!1){return re(ie(t,n,r,i),e)}function se(e,n=!0,r){ae(r)?(0,t.onMounted)(e,r):n?e():(0,t.nextTick)(e)}function ce(e,n,r){return(0,t.watch)(e,n,{...r,immediate:!0})}var K=R?window:void 0;R&&window.document,R&&window.navigator,R&&window.location;function q(e){let n=(0,t.toValue)(e);return n?.$el??n}function J(...e){let n=(e,t,n,r)=>(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)),r=(0,t.computed)(()=>{let n=G((0,t.toValue)(e[0])).filter(e=>e!=null);return n.every(e=>typeof e!=`string`)?n:void 0});return ce(()=>[r.value?.map(e=>q(e))??[K].filter(e=>e!=null),G((0,t.toValue)(r.value?e[1]:e[0])),G((0,t.unref)(r.value?e[2]:e[1])),(0,t.toValue)(r.value?e[3]:e[2])],([e,t,r,i],a,o)=>{if(!e?.length||!t?.length||!r?.length)return;let s=B(i)?{...i}:i,c=e.flatMap(e=>t.flatMap(t=>r.map(r=>n(e,t,r,s))));o(()=>{c.forEach(e=>e())})},{flush:`post`})}function le(){let e=(0,t.shallowRef)(!1),n=(0,t.getCurrentInstance)();return n&&(0,t.onMounted)(()=>{e.value=!0},n),e}function ue(e){let n=le();return(0,t.computed)(()=>(n.value,!!e()))}var de=Symbol(`vueuse-ssr-width`);function fe(){let e=(0,t.hasInjectionContext)()?L(de,null):null;return typeof e==`number`?e:void 0}function pe(e,n={}){let{window:r=K,ssrWidth:i=fe()}=n,a=ue(()=>r&&`matchMedia`in r&&typeof r.matchMedia==`function`),o=(0,t.shallowRef)(typeof i==`number`),s=(0,t.shallowRef)(),c=(0,t.shallowRef)(!1);return(0,t.watchEffect)(()=>{if(o.value){o.value=!a.value,c.value=(0,t.toValue)(e).split(`,`).some(e=>{let t=e.includes(`not all`),n=e.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),r=e.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),a=!!(n||r);return n&&a&&(a=i>=W(n[1])),r&&a&&(a=i<=W(r[1])),t?!a:a});return}a.value&&(s.value=r.matchMedia((0,t.toValue)(e)),c.value=s.value.matches)}),J(s,`change`,e=>{c.value=e.matches},{passive:!0}),(0,t.computed)(()=>c.value)}function me(e){return typeof Window<`u`&&e instanceof Window?e.document.documentElement:typeof Document<`u`&&e instanceof Document?e.documentElement:e}function he(e){let t=window.getComputedStyle(e);if(t.overflowX===`scroll`||t.overflowY===`scroll`||t.overflowX===`auto`&&e.clientWidth<e.scrollWidth||t.overflowY===`auto`&&e.clientHeight<e.scrollHeight)return!0;{let t=e.parentNode;return!t||t.tagName===`BODY`?!1:he(t)}}function ge(e){let t=e||window.event,n=t.target;return he(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}var _e=new WeakMap;function ve(e,n=!1){let r=(0,t.shallowRef)(n),i=null,a=``;(0,t.watch)(ne(e),e=>{let n=me((0,t.toValue)(e));if(n){let e=n;if(_e.get(e)||_e.set(e,e.style.overflow),e.style.overflow!==`hidden`&&(a=e.style.overflow),e.style.overflow===`hidden`)return r.value=!0;if(r.value)return e.style.overflow=`hidden`}},{immediate:!0});let o=()=>{let n=me((0,t.toValue)(e));!n||r.value||(H&&(i=J(n,`touchmove`,e=>{ge(e)},{passive:!1})),n.style.overflow=`hidden`,r.value=!0)},s=()=>{let n=me((0,t.toValue)(e));!n||!r.value||(H&&i?.(),n.style.overflow=a,_e.delete(n),r.value=!1)};return F(s),(0,t.computed)({get(){return r.value},set(e){e?o():s()}})}function ye(e={}){let{window:n=K,initialWidth:r=1/0,initialHeight:i=1/0,listenOrientation:a=!0,includeScrollbar:o=!0,type:s=`inner`}=e,c=(0,t.shallowRef)(r),l=(0,t.shallowRef)(i),u=()=>{if(n)if(s===`outer`)c.value=n.outerWidth,l.value=n.outerHeight;else if(s===`visual`&&n.visualViewport){let{width:e,height:t,scale:r}=n.visualViewport;c.value=Math.round(e*r),l.value=Math.round(t*r)}else o?(c.value=n.innerWidth,l.value=n.innerHeight):(c.value=n.document.documentElement.clientWidth,l.value=n.document.documentElement.clientHeight)};u(),se(u);let d={passive:!0};return J(`resize`,u,d),n&&s===`visual`&&n.visualViewport&&J(n.visualViewport,`resize`,u,d),a&&(0,t.watch)(pe(`(orientation: portrait)`),()=>u()),{width:c,height:l}}function be(e){let{canPreview:n}=e,r=(0,t.ref)(!1),i=(0,t.ref)(null),a=ve(document.body,!1),o;return(0,t.onScopeDispose)(()=>{o!==void 0&&(window.cancelAnimationFrame(o),o=void 0),a.value=!1}),J(`wheel`,e=>{r.value&&e.ctrlKey&&e.preventDefault()},{passive:!1}),{showViewer:r,mousePosition:i,openPreview:e=>{n.value&&(o!==void 0&&(window.cancelAnimationFrame(o),o=void 0),e?i.value={x:e.clientX,y:e.clientY}:i.value=null,r.value=!0,o=window.requestAnimationFrame(()=>{a.value=!0,o=void 0}))},closePreview:()=>{o!==void 0&&(window.cancelAnimationFrame(o),o=void 0),r.value=!1,i.value=null,a.value=!1}}}var xe=(typeof window>`u`?!1:/iPad|iPhone|iPod/.test(navigator.platform)||navigator.platform===`MacIntel`&&navigator.maxTouchPoints>1)&&!window.MSStream;typeof window>`u`||xe||window.safari;function Se(e){let n=(0,t.ref)(typeof e==`function`?e():e);function r(e){n.value=e}return[n,r]}function Ce(e,n){let{defaultValue:r,value:i=(0,t.ref)()}=n||{},a=typeof e==`function`?e():e;i.value!==void 0&&(a=(0,t.unref)(i)),r!==void 0&&(a=typeof r==`function`?r():r);let o=(0,t.ref)(a),s=(0,t.ref)(a),[c,l]=Se([s.value]),u=(0,t.watchEffect)(()=>{let e=i.value===void 0?o.value:i.value;n?.postState&&(e=n.postState(e,o.value)),s.value=e}),d=(0,t.watch)(c,()=>{let e=c.value[0];o.value!==e&&n?.onChange?.(o.value,e)},{deep:!0});function f(e){o.value=e}function p(e){f(e),l([s.value])}let m=(0,t.watch)(i,()=>{o.value=i.value});return(0,t.onScopeDispose)(()=>{u(),d(),m()}),[s,p,o]}var we={x:0,y:0,rotate:0,scale:1,flipX:!1,flipY:!1};function Te(e){let{imageRef:n,minScale:r,maxScale:i,windowWidth:a,windowHeight:o,onTransform:s}=e,c=(0,t.ref)(null),l=(0,t.ref)([]),[u,d]=Se({...we}),f=e=>{let t={...u.value};d({...we}),(t.x!==0||t.y!==0||t.scale!==1||t.rotate!==0||t.flipX||t.flipY)&&s?.({transform:{...we},action:e})},p=(e,t)=>{c.value===null&&(l.value=[],c.value=E(()=>{let e={...u.value};for(let t of l.value)e={...e,...t};c.value=null,s?.({transform:e,action:t}),d(e)})),l.value.push({...u.value,...e})};return{transform:u,resetTransform:f,updateTransform:p,dispatchZoomChange:(e,t,s,c,l)=>{let d=n.value;if(!d)return;let{width:f,height:m,offsetWidth:h,offsetHeight:g,offsetLeft:_,offsetTop:v}=d,y=e,b=u.value.scale*e;b>i.value?(b=i.value,y=i.value/u.value.scale):b<r.value&&(b=l?b:r.value,y=b/u.value.scale);let x=s??a.value/2,S=c??o.value/2,C=y-1,w=C*f*.5,T=C*m*.5,E=C*(x-u.value.x-_),D=C*(S-u.value.y-v),O=u.value.x-(E-w),k=u.value.y-(D-T);if(e<1&&b===1){let e=h*b,t=g*b;e<=a.value&&t<=o.value&&(O=0,k=0)}p({x:O,y:k,scale:b},t)}}}function Ee(e,t,n,r){let i=t+n,a=(n-r)/2;if(n>r){if(t>0)return{[e]:a};if(t<0&&i<r)return{[e]:-a}}else if(t<0||i>r)return{[e]:t<0?a:-a};return{}}function De(e){let{imageWidth:t,imageHeight:n,imageLeft:r,imageTop:i,windowWidth:a,windowHeight:o}=e;return t<=a&&n<=o?{x:0,y:0}:t>a||n>o?{...Ee(`x`,r,t,a),...Ee(`y`,i,n,o)}:null}var Oe=1,ke=2;function Ae(e){let{imageRef:n,movable:r,visible:i,scaleStep:a,transform:o,updateTransform:s,dispatchZoomChange:c,windowWidth:l,windowHeight:u}=e,d=(0,t.ref)(!1),f=(0,t.ref)({diffX:0,diffY:0,transformX:0,transformY:0});return J(window,`mouseup`,()=>{if(!i.value||!d.value)return;d.value=!1;let{transformX:e,transformY:t}=f.value;if(!(o.value.x!==e&&o.value.y!==t))return;let r=n.value;if(!r)return;let a=r.offsetWidth*o.value.scale,c=r.offsetHeight*o.value.scale,{left:p,top:m}=r.getBoundingClientRect(),h=o.value.rotate%180!=0,g=De({imageWidth:h?c:a,imageHeight:h?a:c,imageLeft:p,imageTop:m,windowWidth:l.value,windowHeight:u.value});g&&s({...g},`dragRebound`)}),J(window,`mousemove`,e=>{!i.value||!d.value||s({x:e.pageX-f.value.diffX,y:e.pageY-f.value.diffY},`move`)}),{isMoving:d,onMouseDown:e=>{!r.value||e.button!==0||(e.preventDefault(),e.stopPropagation(),f.value={diffX:e.pageX-o.value.x,diffY:e.pageY-o.value.y,transformX:o.value.x,transformY:o.value.y},d.value=!0)},onWheel:e=>{if(!i.value||e.deltaY===0)return;let t=Oe+Math.min(Math.abs(e.deltaY/100),ke)*a.value;e.deltaY>0&&(t=Oe/t),c(t,`wheel`,e.clientX,e.clientY)}}}function Y(e,t){return Math.hypot(e.x-t.x,e.y-t.y)}function je(e,t,n,r){let i=Y(e,n),a=Y(t,r);if(i===0&&a===0)return[e.x,e.y];let o=i/(i+a);return[e.x+o*(t.x-e.x),e.y+o*(t.y-e.y)]}function Me(e){let{imageRef:n,movable:r,visible:i,minScale:a,transform:o,updateTransform:s,dispatchZoomChange:c,windowWidth:l,windowHeight:u}=e,d=(0,t.ref)(!1),f=(0,t.ref)({point1:{x:0,y:0},point2:{x:0,y:0},eventType:`none`}),p=e=>{f.value={...f.value,...e}};return J(window,`touchmove`,e=>{i.value&&r.value&&e.preventDefault()},{passive:!1}),{isTouching:d,onTouchStart:e=>{if(!r.value)return;e.stopPropagation(),d.value=!0;let{touches:t=[]}=e;t.length>1?p({point1:{x:t[0].clientX,y:t[0].clientY},point2:{x:t[1].clientX,y:t[1].clientY},eventType:`touchZoom`}):p({point1:{x:t[0].clientX-o.value.x,y:t[0].clientY-o.value.y},eventType:`move`})},onTouchMove:e=>{let{touches:t=[]}=e,{point1:n,point2:r,eventType:i}=f.value;if(t.length>1&&i===`touchZoom`){let e={x:t[0].clientX,y:t[0].clientY},i={x:t[1].clientX,y:t[1].clientY},[a,o]=je(n,r,e,i);c(Y(e,i)/Y(n,r),`touchZoom`,a,o,!0),p({point1:e,point2:i,eventType:`touchZoom`})}else i===`move`&&(s({x:t[0].clientX-n.x,y:t[0].clientY-n.y},`move`),p({eventType:`move`}))},onTouchEnd:()=>{if(!i.value)return;if(d.value&&=!1,p({eventType:`none`}),a.value>o.value.scale)return s({x:0,y:0,scale:a.value},`touchZoom`);let e=n.value;if(!e)return;let t=e.offsetWidth*o.value.scale,r=e.offsetHeight*o.value.scale,{left:c,top:f}=e.getBoundingClientRect(),m=o.value.rotate%180!=0,h=De({imageWidth:m?r:t,imageHeight:m?t:r,imageLeft:c,imageTop:f,windowWidth:l.value,windowHeight:u.value});h&&s({...h},`dragRebound`)}}}function Ne(e){return{zIndexPopup:`calc(${e.zIndexPopupBase} + 80)`,previewOperationColor:e.colorTextDescription,previewOperationHoverColor:e.colorText,previewOperationColorDisabled:e.colorTextDisabled,imagePreviewSwitchSize:e.controlHeightLG,previewOperationSize:e.fontSizeLG}}var Pe=e=>{let t=e.componentCls,{motionEaseOut:n,motionDurationSlow:i,previewOperationSize:a,zIndexPopup:o}=e,s={position:`absolute`,color:e.previewOperationColor,backgroundColor:e.colorBgContainer,borderRadius:`50%`,width:e.controlHeightLG,height:e.controlHeightLG,padding:0,outline:0,border:0,boxShadow:e.boxShadowTertiary,cursor:`pointer`,transition:`all ${i}`,display:`flex`,alignItems:`center`,justifyContent:`center`,fontSize:a,"&:hover":{color:e.previewOperationHoverColor,backgroundColor:e.colorBgContainer},"&:active":{backgroundColor:e.colorBgContainer},svg:{stroke:`currentColor`}};return{[t]:{textAlign:`center`,inset:0,position:`fixed`,userSelect:`none`,zIndex:o,[`${t}-mask`]:{position:`absolute`,inset:0,background:`color-mix(in srgb, ${e.colorBgLayout} 90%, transparent)`,backdropFilter:`blur(0px)`,transition:`background-color ${i}, backdrop-filter ${i}`,[`&${t}-mask-blur`]:{backdropFilter:`blur(4px)`},[`&${t}-mask-hidden`]:{display:`none`}},[`${t}-body`]:{position:`absolute`,inset:0,overflow:`hidden`,display:`flex`,alignItems:`center`,justifyContent:`center`,pointerEvents:`none`,"> *":{pointerEvents:`auto`}},[`${t}-img`]:{maxWidth:`100%`,maxHeight:`70%`,verticalAlign:`middle`,transform:`scale3d(1, 1, 1)`,transition:`transform ${i} ${n} 0s`,userSelect:`none`},[`&-movable ${t}-img`]:{cursor:`grab`},[`&-moving ${t}-img`]:{cursor:`grabbing`},[`${t}-close`]:{...s,top:e.marginSM,insetInlineEnd:e.marginSM},[`${t}-switch`]:{...s,top:`50%`,transform:`translateY(-50%)`,"&-disabled":{"&, &:hover, &:active":{color:e.previewOperationColorDisabled,backgroundColor:e.colorBgContainer,cursor:`not-allowed`}},"&-prev":{insetInlineStart:e.marginSM},"&-next":{insetInlineEnd:e.marginSM}},[`${t}-footer`]:{position:`absolute`,bottom:e.marginXL,left:{_skip_check_:!0,value:`50%`},display:`flex`,flexDirection:`column`,alignItems:`center`,color:e.previewOperationColor,transform:`translateX(-50%)`,gap:e.marginXS},[`${t}-progress`]:{color:e.previewOperationColor},[`${t}-actions`]:{display:`flex`,alignItems:`center`,gap:e.marginXXS,padding:e.paddingXXS,color:e.previewOperationColor,backgroundColor:e.colorBgContainer,border:`${(0,r.unit)(e.lineWidth)} ${e.lineType} ${e.colorFillTertiary}`,borderRadius:e.borderRadiusLG,fontSize:a,"&-action":{color:`inherit`,background:`transparent`,border:0,font:`inherit`,lineHeight:1,width:e.controlHeight,height:e.controlHeight,padding:0,cursor:`pointer`,transition:`all ${i}`,display:`flex`,alignItems:`center`,justifyContent:`center`,borderRadius:e.borderRadius,userSelect:`none`,[`&:not(${t}-actions-action-disabled):hover`]:{color:e.colorTextSecondary,backgroundColor:e.colorFillTertiary},[`&:not(${t}-actions-action-disabled):active`]:{color:e.colorText,backgroundColor:e.colorFillSecondary},"&-disabled":{cursor:`not-allowed`,opacity:.5},svg:{stroke:`currentColor`}}}}}},Fe=e=>{let t=e.componentCls,{motionDurationSlow:n,motionEaseOut:r}=e;return{[`${t}`]:{"&-fade-enter-active, &-fade-leave-active":{transition:`visibility ${n}`,[`${t}-mask`]:{transition:`background-color ${n}, backdrop-filter ${n}`},[`${t}-body`]:{transition:`transform ${n} ${r}`},[`${t}-close, ${t}-switch, ${t}-footer`]:{transition:`opacity ${n}, all ${n}`}},"&-fade-enter-from, &-fade-leave-to":{visibility:`visible`,[`${t}-mask`]:{backgroundColor:`transparent`,backdropFilter:`blur(0px)`},[`${t}-body`]:{transform:`scale(0)`},[`${t}-close, ${t}-switch, ${t}-footer`]:{opacity:0}},"&-fade-enter-to, &-fade-leave-from":{[`${t}-mask`]:{backgroundColor:`color-mix(in srgb, ${e.colorBgLayout} 90%, transparent)`,[`&${t}-mask-blur`]:{backdropFilter:`blur(4px)`}},[`${t}-close, ${t}-switch, ${t}-footer`]:{opacity:1}}}}},Ie=(0,r.proGenStyleHooks)(`GImagePreview`,e=>[Pe(e),Fe(e)],Ne),X=1,Z={rotateLeft:(0,t.createVNode)(n.RotateLeftOutlined,null,null),rotateRight:(0,t.createVNode)(n.RotateRightOutlined,null,null),zoomIn:(0,t.createVNode)(n.ZoomInOutlined,null,null),zoomOut:(0,t.createVNode)(n.ZoomOutOutlined,null,null),flipX:(0,t.createVNode)(n.SwapOutlined,null,null),flipY:(0,t.createVNode)(n.SwapOutlined,{rotate:90},null),copy:(0,t.createVNode)(n.CopyOutlined,null,null),download:(0,t.createVNode)(n.DownloadOutlined,null,null)},Q={copySuccess:`复制成功`,copyFailed:`复制失败`,downloadSuccess:`下载成功`,downloadFailed:`下载失败`};function Le(e){try{let t=new URL(e,window.location.href).pathname.match(/\/([^/]+)$/)?.[1];return t?decodeURIComponent(t):`image`}catch{let t=e.split(`?`)[0]?.split(`#`)[0]?.split(`/`).pop();return t?decodeURIComponent(t):`image`}}function Re(e){let t={"image/gif":`gif`,"image/jpg":`jpg`,"image/jpeg":`jpg`,"image/png":`png`,"image/svg+xml":`svg`,"image/webp":`webp`},n=e?.toLowerCase();return t[n]||n?.split(`/`)[1]?.split(`+`)[0]||`png`}async function ze(e){let t=await fetch(e,{mode:`cors`});if(!t.ok)throw Error(`Failed to fetch image: ${t.status}`);return t.blob()}async function Be(e){return new Promise((t,n)=>{let r=new Image,i=URL.createObjectURL(e);r.onload=()=>{URL.revokeObjectURL(i);let e=document.createElement(`canvas`);e.width=r.naturalWidth,e.height=r.naturalHeight;let a=e.getContext(`2d`);if(!a){n(Error(`Canvas context not available`));return}a.drawImage(r,0,0),e.toBlob(e=>{e?t(e):n(Error(`Failed to convert to PNG`))},`image/png`,1)},r.onerror=()=>{URL.revokeObjectURL(i),n(Error(`Failed to load image for PNG conversion`))},r.src=i})}async function Ve(e){let t=(e.type||``).toLowerCase();return t===`image/png`||t===`image/svg+xml`?{[t]:e}:{"image/png":await Be(e)}}function He(e,t){let n=Le(e);return n.includes(`.`)?n.endsWith(`.svg+xml`)?n.replace(/\.svg\+xml$/i,`.svg`):n:`${n}.${Re(t)}`}function Ue(e,t){let n=URL.createObjectURL(e),r=document.createElement(`a`);r.href=n,r.download=t,r.style.display=`none`,document.body.appendChild(r),r.click(),r.remove(),URL.revokeObjectURL(n)}var We=(0,t.defineComponent)((e,{emit:r,slots:s,expose:c})=>{let{width:l,height:u}=ye(),{prefixCls:d}=(0,i.useBaseConfig)(`pro-image-preview`,e),f=(0,a.default)(d),[p,m]=Ie(d,f),[h,g]=Ce(e.open,{value:(0,t.toRef)(e,`open`),onChange:t=>{e.onOpenChange?.(t),r(`update:open`,t)}}),_=(0,t.ref)(!0),v=(0,t.ref)(),y=(0,t.ref)(),b=(0,t.ref)(e.current??0),x=(0,t.ref)(!1),S=(0,t.ref)(!1),{transform:C,resetTransform:w,updateTransform:T,dispatchZoomChange:E}=Te({imageRef:v,minScale:(0,t.toRef)(e,`minScale`),maxScale:(0,t.toRef)(e,`maxScale`),windowWidth:l,windowHeight:u,onTransform:e.onTransform}),{isMoving:D,onMouseDown:O,onWheel:k}=Ae({imageRef:v,movable:(0,t.toRef)(e,`movable`),visible:h,scaleStep:(0,t.toRef)(e,`scaleStep`),transform:C,updateTransform:T,dispatchZoomChange:E,windowWidth:l,windowHeight:u}),{isTouching:ee,onTouchStart:j,onTouchMove:M,onTouchEnd:N}=Me({imageRef:v,movable:(0,t.toRef)(e,`movable`),visible:h,minScale:(0,t.toRef)(e,`minScale`),transform:C,updateTransform:T,dispatchZoomChange:E,windowWidth:l,windowHeight:u}),F=(0,t.computed)(()=>e.urls[b.value]),I=(0,t.computed)(()=>e.urls.length>1),L=(0,t.computed)(()=>e.urls.length>=1),R=(0,t.computed)(()=>e.mask===!1?{visible:!1,blur:!1}:e.mask&&typeof e.mask==`object`&&!(`type`in e.mask)?{visible:!0,blur:e.mask.blur!==!1}:{visible:!0,blur:!0}),z=(0,t.computed)(()=>{let t={};return e.mousePosition&&(t.transformOrigin=`${e.mousePosition.x}px ${e.mousePosition.y}px`),t});(0,t.watch)(()=>e.current,e=>{e!==void 0&&(b.value=e)}),(0,t.watch)(()=>e.current,e=>{e!==void 0&&(b.value=e)});let B=()=>{g(!1),e.onClose?.(),r(`close`)},V=()=>{D.value||B()},H=()=>{if(b.value>0||e.infinite){let n=b.value-1<0?e.urls.length-1:b.value-1;_.value=!1,b.value=n,w(`prev`),(0,t.nextTick)(()=>{_.value=!0})}},U=()=>{if(b.value<e.urls.length-1||e.infinite){let n=b.value+1>e.urls.length-1?0:b.value+1;_.value=!1,b.value=n,w(`next`),(0,t.nextTick)(()=>{_.value=!0})}},ne=()=>{E(X+(e.scaleStep??.5),`zoomIn`)},re=()=>{E(X/(X+(e.scaleStep??.5)),`zoomOut`)},ie=()=>{T({rotate:C.value.rotate+90},`rotateRight`)},W=()=>{T({rotate:C.value.rotate-90},`rotateLeft`)},G=()=>{T({flipX:!C.value.flipX},`flipX`)},ae=()=>{T({flipY:!C.value.flipY},`flipY`)},oe=async()=>{if(!(!F.value||x.value)){if(!navigator.clipboard||!window.ClipboardItem){o.message.error(Q.copyFailed);return}x.value=!0;try{let e=await Ve(await ze(F.value));await navigator.clipboard.write([new ClipboardItem(e)]),o.message.success(Q.copySuccess)}catch{o.message.error(Q.copyFailed)}finally{x.value=!1}}},se=async()=>{if(!(!F.value||S.value)){S.value=!0;try{let e=await ze(F.value);Ue(e,He(F.value,e.type)),o.message.success(Q.downloadSuccess)}catch{o.message.error(Q.downloadFailed)}finally{S.value=!1}}},ce=t=>{h.value&&(C.value.scale===1?E(X+(e.scaleStep??.5),`doubleClick`,t.clientX,t.clientY):T({x:0,y:0,scale:1},`doubleClick`))},K=e=>{if(e.key===`Escape`){B();return}!h.value||!I.value||(e.key===`ArrowLeft`?H():e.key===`ArrowRight`&&U())},q;(0,t.onMounted)(()=>{let e=e=>K(e);window.addEventListener(`keydown`,e),q=()=>window.removeEventListener(`keydown`,e)}),(0,t.onUnmounted)(()=>{q?.()}),c({setOpen:t=>{g(t),b.value=e.current??0}});let J=()=>te({slots:s,props:{...e.icons},keys:[`flipY`,`flipX`,`rotateLeft`,`rotateRight`,`zoomOut`,`zoomIn`,`copy`,`download`],render:!0,defaultVNodes:[Z.flipY,Z.flipX,Z.rotateLeft,Z.rotateRight,Z.zoomOut,Z.zoomIn,Z.copy,Z.download]}),le=()=>{let r=J();return[{icon:r.flipY,onClick:ae,type:`flipY`},{icon:r.flipX,onClick:G,type:`flipX`},{icon:r.rotateLeft,onClick:W,type:`rotateLeft`},{icon:r.rotateRight,onClick:ie,type:`rotateRight`},{icon:r.zoomOut,onClick:re,type:`zoomOut`,disabled:(0,t.computed)(()=>C.value.scale<=(e.minScale??1))},{icon:r.zoomIn,onClick:ne,type:`zoomIn`,disabled:(0,t.computed)(()=>C.value.scale===(e.maxScale??50))},{icon:x.value?(0,t.createVNode)(n.LoadingOutlined,{spin:!0},null):r.copy,onClick:oe,type:`copy`,disabled:(0,t.computed)(()=>x.value)},{icon:S.value?(0,t.createVNode)(n.LoadingOutlined,{spin:!0},null):r.download,onClick:se,type:`download`,disabled:(0,t.computed)(()=>S.value)}]};return()=>{let r={transform:`translate3d(${C.value.x}px, ${C.value.y}px, 0) scale3d(${C.value.flipX?`-`:``}${C.value.scale}, ${C.value.flipY?`-`:``}${C.value.scale}, 1) rotate(${C.value.rotate}deg)`,transitionDuration:!_.value||ee.value?`0s`:void 0},i=P({slots:s,props:{close:e.icons?.close},key:`close`}),a=P({slots:s,props:{left:e.icons?.left},key:`left`}),o=P({slots:s,props:{right:e.icons?.right},key:`right`}),c=`${d.value}-actions-action`,l=le();return(0,t.createVNode)(t.Teleport,{to:e.getContainer||`body`},{default:()=>[(0,t.createVNode)(t.Transition,{name:`${d.value}-fade`,appear:!0,onAfterLeave:()=>w(`close`)},{default:()=>[h.value&&(0,t.createVNode)(`div`,{ref:y,class:A(d.value,p.value,m.value,f.value,{[`${d.value}-movable`]:e.movable,[`${d.value}-moving`]:D.value}),style:{zIndex:e.zIndex},role:`dialog`,"aria-modal":`true`,"aria-label":`Image`,tabindex:-1},[R.value.visible&&(0,t.createVNode)(`div`,{class:A(`${d.value}-mask`,e.maskClass,{[`${d.value}-mask-blur`]:R.value.blur}),onClick:e.onHideOnClickModal?V:void 0},null),(0,t.createVNode)(`div`,{class:`${d.value}-body`,style:z.value},[(0,t.createVNode)(`img`,{ref:v,class:`${d.value}-img`,src:F.value,alt:`Image`,loading:`eager`,decoding:`sync`,style:r,onWheel:k,onMousedown:O,onDblclick:ce,onTouchstart:j,onTouchmove:M,onTouchend:N,onTouchcancel:N},null)]),(0,t.createVNode)(`button`,{type:`button`,class:`${d.value}-close`,onClick:B},[i||(0,t.createVNode)(n.CloseOutlined,null,null)]),I.value&&(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)(`button`,{type:`button`,class:A(`${d.value}-switch`,`${d.value}-switch-prev`,{[`${d.value}-switch-disabled`]:!e.infinite&&b.value===0}),onClick:e=>{e.preventDefault(),e.stopPropagation(),H()}},[a||(0,t.createVNode)(n.LeftOutlined,null,null)]),(0,t.createVNode)(`button`,{type:`button`,class:A(`${d.value}-switch`,`${d.value}-switch-next`,{[`${d.value}-switch-disabled`]:!e.infinite&&b.value===e.urls.length-1}),onClick:e=>{e.preventDefault(),e.stopPropagation(),U()}},[o||(0,t.createVNode)(n.RightOutlined,null,null)])]),(0,t.createVNode)(`div`,{class:`${d.value}-footer`},[L.value&&(0,t.createVNode)(`div`,{class:`${d.value}-progress`},[e.countRender?e.countRender(b.value+1,e.urls.length):`${b.value+1} / ${e.urls.length}`]),(0,t.createVNode)(`div`,{class:`${d.value}-actions`},[l.map(({icon:e,onClick:n,type:r,disabled:i})=>(0,t.createVNode)(`button`,{type:`button`,class:A(c,`${c}-${r}`,{[`${c}-disabled`]:i&&i.value}),onClick:()=>{i?.value||n()},disabled:i?i.value:!1,"aria-label":r,key:r},[e]))])])])]})]})}},{props:(0,t.mergeDefaults)({class:{type:String,required:!1},style:{type:Object,required:!1},rootClass:{type:String,required:!1},prefixCls:{type:String,required:!1},urls:{type:Array,required:!0},open:{type:Boolean,required:!1,default:void 0},scaleStep:{type:Number,required:!1},minScale:{type:Number,required:!1},maxScale:{type:Number,required:!1},movable:{type:Boolean,required:!1,default:void 0},disabled:{type:Boolean,required:!1,default:void 0},zIndex:{type:Number,required:!1},current:{type:Number,required:!1},infinite:{type:Boolean,required:!1,default:void 0},getContainer:{type:String,required:!1},onHideOnClickModal:{type:Boolean,required:!1,default:void 0},mask:{type:[Object,Boolean],required:!1,default:void 0},maskClass:{type:String,required:!1},mousePosition:{type:[Object,null],required:!1},countRender:{type:[Function,Boolean],required:!1,default:void 0},icons:{type:Object,required:!1},onClose:{type:Function,required:!1},onTransform:{type:Function,required:!1},onOpenChange:{type:Function,required:!1},"onUpdate:open":{type:Function,required:!1}},{open:!1,scaleStep:.5,minScale:1,maxScale:50,movable:!0,zIndex:2e3,current:0,infinite:!0,onHideOnClickModal:!0,urls:[],icons:{}}),emits:[`close`,`transform`,`update:open`],name:`GImagePreview`,inheritAttrs:!1}),Ge=e=>{let{motionDurationSlow:t,paddingXXS:n,marginXXS:i,colorTextLightSolid:a}=e;return{position:`absolute`,inset:0,display:`flex`,alignItems:`center`,justifyContent:`center`,color:a,background:`rgba(0, 0, 0, 0.5)`,cursor:`pointer`,opacity:0,transition:`opacity ${t}`,[`.${e.componentCls}-mask-info`]:{overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`ellipsis`,padding:`0 ${(0,r.unit)(n)}`,".anticon":{marginInlineEnd:i,svg:{verticalAlign:`baseline`}}}}},Ke=e=>{let t={width:`100%`,height:`100%`};return{[e.componentCls]:{display:`inline-block`,position:`relative`,overflow:`hidden`,[`${e.componentCls}-img`]:{...t,verticalAlign:`top`,opacity:1,[`&${e.componentCls}-img-preview`]:{userSelect:`none`,cursor:`pointer`},"&-placeholder":{...t,backgroundColor:e.colorBgContainerDisabled,backgroundImage:`url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')`,backgroundRepeat:`no-repeat`,backgroundPosition:`center center`,backgroundSize:`30%`}},[`${e.componentCls}-error`]:{...t,display:`flex`,alignItems:`center`,justifyContent:`center`},[`${e.componentCls}-placeholder`]:{position:`absolute`,inset:0},[`${e.componentCls}-mask`]:{...Ge(e)},[`${e.componentCls}-mask:hover`]:{opacity:1}}}},qe=(0,r.proGenStyleHooks)(`GImage`,e=>[Ke(e)]),Je={src:``,alt:``,fit:`contain`,preview:!0,loading:`eager`};function Ye(e){return e&&e.nodeType===1}var $=(0,t.defineComponent)((e,{emit:o,slots:s,expose:c,attrs:l})=>{let u=R&&`loading`in HTMLImageElement.prototype,{prefixCls:d}=(0,i.useBaseConfig)(`pro-image`,e),f=(0,a.default)(d),[p,m]=qe(d,f),h=(0,t.ref)(),_=(0,t.ref)(!1),v=(0,t.ref)(!0),b=(0,t.ref)(),x=(0,t.ref)(),S,C=(0,t.computed)(()=>e.loading===`eager`?!1:!u&&e.loading===`lazy`||e.lazy),w=(0,t.computed)(()=>R&&e.fit?{...e.imageStyle,objectFit:e.fit}:{...e.imageStyle}),T=(0,t.computed)(()=>typeof e.preview==`object`?e.preview:{}),E=(0,t.computed)(()=>!!e.preview),D=(0,t.computed)(()=>{let{urls:t=[],current:n=0}=T.value;if(g(n))return t.length>=n?n:0;let r=t.indexOf(e.src??``);return r>=0?r:0}),O=(0,t.computed)(()=>(0,r.unit)(e.width)),k=(0,t.computed)(()=>(0,r.unit)(e.height)),{showViewer:j,mousePosition:M,openPreview:N,closePreview:P}=be({canPreview:E}),F=()=>{R&&(v.value=!0,_.value=!1,h.value=e.src)},I=t=>{_.value||(v.value=!1,_.value=!1,e.onLoad?.(t),o(`load`,t))},L=t=>{v.value=!1,_.value=!0,e.onError?.(t),o(`error`,t)},z=()=>{if(!b.value||!x.value)return!1;let e=b.value.getBoundingClientRect(),t=x.value.getBoundingClientRect?x.value.getBoundingClientRect():{top:0,bottom:x.value.innerHeight??0,left:0,right:x.value.innerWidth??0};return e.top<t.bottom&&e.bottom>t.top&&e.left<t.right&&e.right>t.left},B=oe(()=>{z()&&(F(),S?.(),S=void 0)},200,!0),V=async()=>{if(!R)return;await(0,t.nextTick)();let{scrollContainer:n}=e;Ye(n)?x.value=n:y(n)&&n!==``?x.value=document.querySelector(n)??void 0:b.value&&(x.value=ee(b.value)),x.value&&(S=J(x.value,`scroll`,B),setTimeout(B,100))},H=t=>{let n=v.value?`loaded`:_.value?`error`:`success`;if(e.onClick?.(n),o(`click`,n),!(v.value||_.value)&&E.value){let e=t.currentTarget?.getBoundingClientRect();N(e?{...t,clientX:e.x+e.width/2,clientY:e.y+e.height/2}:t)}};return(0,t.watch)(()=>e.src,()=>{C.value?(v.value=!0,_.value=!1,S?.(),V()):F()}),(0,t.onMounted)(()=>{C.value?V():F()}),c({setOpen:e=>{e?N():P()}}),()=>{let i={},a={};for(let[e,t]of Object.entries(l))/^(?:data-|on[A-Z])/i.test(e)||[`id`,`style`,`class`].includes(e)?i[e]=t:a[e]=t;let o=te({slots:s,props:e,keys:[`fallback`,`mask`,`placeholder`],render:!0});return(0,t.createVNode)(`div`,(0,t.mergeProps)({class:A(d.value,p.value,m.value,f.value,e.class),ref:b},i,{style:{width:(0,r.unit)(e.size)||O.value,height:(0,r.unit)(e.size)||k.value,...i.style||{}},onClick:e=>{_.value&&H(e)}}),[_.value?(0,t.createVNode)(`div`,{class:A(`${d.value}-error`)},[o.fallback]):(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)(`img`,(0,t.mergeProps)(a,{src:h.value,loading:e.loading,style:w.value,class:A(e.imageClass,`${d.value}-img`,{[`${d.value}-img-placeholder`]:e.placeholder===!0,[`${d.value}-img-preview`]:E.value}),crossorigin:e.crossOrigin,width:O.value,height:k.value,onClick:H,onLoad:I,onError:L}),null),v.value&&(0,t.createVNode)(`div`,{class:A(`${d.value}-placeholder`),onClick:H},[o.placeholder])]),T.value.mask&&E.value&&(0,t.createVNode)(`div`,{class:A(`${d.value}-mask`,T.value.maskClass),style:{display:i.style?.display===`none`?`none`:void 0}},[o.mask||(0,t.createVNode)(`div`,{class:A(`${d.value}-mask-info`)},[(0,t.createVNode)(n.EyeOutlined,null,null)])]),E.value&&(0,t.createVNode)(We,(0,t.mergeProps)(T.value,{urls:T.value.urls||(e.src?[e.src]:[]),current:D.value,zIndex:e.zIndex??T.value.zIndex,open:j.value,mousePosition:M.value,onClose:()=>P()}),s)])}},{props:(0,t.mergeDefaults)({rootClass:{type:String,required:!1},prefixCls:{type:String,required:!1},src:{type:String,required:!1},alt:{type:String,required:!1},width:{type:Number,required:!1},height:{type:Number,required:!1},size:{type:Number,required:!1},fit:{type:String,required:!1},loading:{type:String,required:!1},crossOrigin:{type:String,required:!1},imageStyle:{type:Object,required:!1},imageClass:{type:String,required:!1},preview:{type:[Boolean,Object],required:!1,default:void 0},zIndex:{type:Number,required:!1},lazy:{type:Boolean,required:!1,default:void 0},scrollContainer:{required:!1},placeholder:{type:[Function,String,Number,null,Object,Boolean],required:!1,default:void 0},fallback:{type:[Function,String,Number,null,Object,Boolean],required:!1,default:void 0},onLoad:{type:Function,required:!1},onError:{type:Function,required:!1},onClick:{type:Function,required:!1},"onUpdate:open":{type:Function,required:!1}},Je),emits:[`click`,`load`,`error`],name:`GImage`,inheritAttrs:!1});$.isGImage=!0,$.install=e=>(e.component($.name,$),e),e.GImage=$,e.GImagePreview=We});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@gx-design-vue/icon"),require("@gx-design-vue/pro-provider"),require("@vueuse/core"),require("antdv-next/config-provider/context"),require("antdv-next/config-provider/hooks/useCSSVarCls"),require("antdv-next")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@gx-design-vue/icon`,`@gx-design-vue/pro-provider`,`@vueuse/core`,`antdv-next/config-provider/context`,`antdv-next/config-provider/hooks/useCSSVarCls`,`antdv-next`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.GImage={},e.Vue,e._gx_design_vue_icon,e._gx_design_vue_pro_provider,e._vueuse_core,e.antdv_next_config_provider_context,e.antdv_next_config_provider_hooks_useCSSVarCls,e.antdv_next))})(this,function(e,t,n,r,i,a,o,s){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var c=Object.create,l=Object.defineProperty,u=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,m=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=d(t),a=0,o=i.length,s;a<o;a++)s=i[a],!p.call(e,s)&&s!==n&&l(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=u(t,s))||r.enumerable});return e};o=((e,t,n)=>(n=e==null?{}:c(f(e)),m(t||!e||!e.__esModule?l(n,`default`,{value:e,enumerable:!0}):n,e)))(o,1);function h(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function g(e){return typeof e==`boolean`}function _(e){return typeof e==`number`}function v(e){return Array.isArray===void 0?Object.prototype.toString.call(e)===`[object Array]`:Array.isArray(e)}function y(e){return e!==null&&h(e,`Object`)}function b(e){return typeof e==`string`}var x=typeof window>`u`,S=e=>setTimeout(e,16),C=e=>clearTimeout(e);typeof window<`u`&&`requestAnimationFrame`in window&&(S=e=>window.requestAnimationFrame(e),C=e=>window.cancelAnimationFrame(e));var w=0,T=new Map;function E(e){T.delete(e)}function D(e,t=1){w+=1;let n=w;function r(t){if(t===0)E(n),e();else{let e=S(()=>{r(t-1)});T.set(n,e)}}return r(t),n}D.cancel=e=>{let t=T.get(e);return E(t),C(t)};function O(e){return e.replace(/[-_](.)/g,(e,t)=>t.toUpperCase())}function k(e,t){if(x||!e||!t)return``;t=O(t),t===`float`&&(t=`cssFloat`);try{let n=e.style[t];if(n)return n;let r=document?.defaultView?.getComputedStyle(e,``);return r?r[t]:``}catch{return e.style[t]}}function A(e,t){if(!x)return(t==null?k(e,`overflow`):t?k(e,`overflow-y`):k(e,`overflow-x`)).match(/(scroll|auto|overlay)/)}function j(e,t){if(x)return;let n=e;for(;n;){if([window,document,document.documentElement].includes(n))return window;if(A(n,t))return n;n=n.parentNode}return n}function M(...e){let t=[];for(let n=0;n<e.length;n++){let r=e[n];if(r){if(b(r))t.push(r);else if(v(r))for(let e=0;e<r.length;e++){let n=M(r[e]);n&&t.push(n)}else if(y(r))for(let e in r)r[e]&&t.push(e)}}return t.filter(e=>e).join(` `)}function N({vnode:e,defaultVNode:t},...n){return e===!1?null:typeof e==`function`?e?.(...n):e||t}function P({value:e,slotsValue:n,defaultVNode:r,render:i}){return e===!1?!1:e===!0?n??r:y(e)&&i?(0,t.isVNode)(e)?e:n:e||n}function F(e,...t){let{slots:n,key:r=`default`,render:i,props:a,defaultChildren:o}=e,s=a[r],c=n?.[r],l=typeof o==`function`?o?.():o,u=P({value:s,slotsValue:c,defaultVNode:l,render:i});return u===!1?!1:i?N({vnode:u,defaultVNode:l},...t):u}function I(e,...t){let{slots:n,key:r=`default`,props:i,defaultChildren:a}=e,o=i[r],s=n?.[r]?.(...t),c=typeof a==`function`?a?.():a,l=P({value:o,slotsValue:s,defaultVNode:c,render:!0});return l===!1?!1:N({vnode:l,defaultVNode:c},...t)}function L(e,...t){let{slots:n,props:r,keys:i,render:a,defaultVNodes:o}=e,s={};return i.forEach((e,i)=>{let c=o?o[i]:null,l=a?I({slots:n,props:r,key:e,defaultChildren:c},...t):F({slots:n,props:r,key:e,render:!1,defaultChildren:c},...t);(g(l)||l)&&(s[e]=l)}),s}function R(e){let{canPreview:n}=e,r=(0,t.ref)(!1),a=(0,t.ref)(null),o=(0,i.useScrollLock)(document.body,!1),s;return(0,t.onScopeDispose)(()=>{s!==void 0&&(window.cancelAnimationFrame(s),s=void 0),o.value=!1}),(0,i.useEventListener)(`wheel`,e=>{r.value&&e.ctrlKey&&e.preventDefault()},{passive:!1}),{showViewer:r,mousePosition:a,openPreview:e=>{n.value&&(s!==void 0&&(window.cancelAnimationFrame(s),s=void 0),e?a.value={x:e.clientX,y:e.clientY}:a.value=null,r.value=!0,s=window.requestAnimationFrame(()=>{o.value=!0,s=void 0}))},closePreview:()=>{s!==void 0&&(window.cancelAnimationFrame(s),s=void 0),r.value=!1,a.value=null,o.value=!1}}}var z=(typeof window>`u`?!1:/iPad|iPhone|iPod/.test(navigator.platform)||navigator.platform===`MacIntel`&&navigator.maxTouchPoints>1)&&!window.MSStream;typeof window>`u`||z||window.safari;function B(e){let n=(0,t.ref)(typeof e==`function`?e():e);function r(e){n.value=e}return[n,r]}function ee(e,n){let{defaultValue:r,value:i=(0,t.ref)()}=n||{},a=typeof e==`function`?e():e;i.value!==void 0&&(a=(0,t.unref)(i)),r!==void 0&&(a=typeof r==`function`?r():r);let o=(0,t.ref)(a),s=(0,t.ref)(a),[c,l]=B([s.value]),u=(0,t.watchEffect)(()=>{let e=i.value===void 0?o.value:i.value;n?.postState&&(e=n.postState(e,o.value)),s.value=e}),d=(0,t.watch)(c,()=>{let e=c.value[0];o.value!==e&&n?.onChange?.(o.value,e)},{deep:!0});function f(e){o.value=e}function p(e){f(e),l([s.value])}let m=(0,t.watch)(i,()=>{o.value=i.value});return(0,t.onScopeDispose)(()=>{u(),d(),m()}),[s,p,o]}var V={x:0,y:0,rotate:0,scale:1,flipX:!1,flipY:!1};function H(e){let{imageRef:n,minScale:r,maxScale:i,windowWidth:a,windowHeight:o,onTransform:s}=e,c=(0,t.ref)(null),l=(0,t.ref)([]),[u,d]=B({...V}),f=e=>{let t={...u.value};d({...V}),(t.x!==0||t.y!==0||t.scale!==1||t.rotate!==0||t.flipX||t.flipY)&&s?.({transform:{...V},action:e})},p=(e,t)=>{c.value===null&&(l.value=[],c.value=D(()=>{let e={...u.value};for(let t of l.value)e={...e,...t};c.value=null,s?.({transform:e,action:t}),d(e)})),l.value.push({...u.value,...e})};return{transform:u,resetTransform:f,updateTransform:p,dispatchZoomChange:(e,t,s,c,l)=>{let d=n.value;if(!d)return;let{width:f,height:m,offsetWidth:h,offsetHeight:g,offsetLeft:_,offsetTop:v}=d,y=e,b=u.value.scale*e;b>i.value?(b=i.value,y=i.value/u.value.scale):b<r.value&&(b=l?b:r.value,y=b/u.value.scale);let x=s??a.value/2,S=c??o.value/2,C=y-1,w=C*f*.5,T=C*m*.5,E=C*(x-u.value.x-_),D=C*(S-u.value.y-v),O=u.value.x-(E-w),k=u.value.y-(D-T);if(e<1&&b===1){let e=h*b,t=g*b;e<=a.value&&t<=o.value&&(O=0,k=0)}p({x:O,y:k,scale:b},t)}}}function U(e,t,n,r){let i=t+n,a=(n-r)/2;if(n>r){if(t>0)return{[e]:a};if(t<0&&i<r)return{[e]:-a}}else if(t<0||i>r)return{[e]:t<0?a:-a};return{}}function W(e){let{imageWidth:t,imageHeight:n,imageLeft:r,imageTop:i,windowWidth:a,windowHeight:o}=e;return t<=a&&n<=o?{x:0,y:0}:t>a||n>o?{...U(`x`,r,t,a),...U(`y`,i,n,o)}:null}var G=1,K=2;function te(e){let{imageRef:n,movable:r,visible:a,scaleStep:o,transform:s,updateTransform:c,dispatchZoomChange:l,windowWidth:u,windowHeight:d}=e,f=(0,t.ref)(!1),p=(0,t.ref)({diffX:0,diffY:0,transformX:0,transformY:0});return(0,i.useEventListener)(window,`mouseup`,()=>{if(!a.value||!f.value)return;f.value=!1;let{transformX:e,transformY:t}=p.value;if(!(s.value.x!==e&&s.value.y!==t))return;let r=n.value;if(!r)return;let i=r.offsetWidth*s.value.scale,o=r.offsetHeight*s.value.scale,{left:l,top:m}=r.getBoundingClientRect(),h=s.value.rotate%180!=0,g=W({imageWidth:h?o:i,imageHeight:h?i:o,imageLeft:l,imageTop:m,windowWidth:u.value,windowHeight:d.value});g&&c({...g},`dragRebound`)}),(0,i.useEventListener)(window,`mousemove`,e=>{!a.value||!f.value||c({x:e.pageX-p.value.diffX,y:e.pageY-p.value.diffY},`move`)}),{isMoving:f,onMouseDown:e=>{!r.value||e.button!==0||(e.preventDefault(),e.stopPropagation(),p.value={diffX:e.pageX-s.value.x,diffY:e.pageY-s.value.y,transformX:s.value.x,transformY:s.value.y},f.value=!0)},onWheel:e=>{if(!a.value||e.deltaY===0)return;let t=G+Math.min(Math.abs(e.deltaY/100),K)*o.value;e.deltaY>0&&(t=G/t),l(t,`wheel`,e.clientX,e.clientY)}}}function q(e,t){return Math.hypot(e.x-t.x,e.y-t.y)}function ne(e,t,n,r){let i=q(e,n),a=q(t,r);if(i===0&&a===0)return[e.x,e.y];let o=i/(i+a);return[e.x+o*(t.x-e.x),e.y+o*(t.y-e.y)]}function re(e){let{imageRef:n,movable:r,visible:a,minScale:o,transform:s,updateTransform:c,dispatchZoomChange:l,windowWidth:u,windowHeight:d}=e,f=(0,t.ref)(!1),p=(0,t.ref)({point1:{x:0,y:0},point2:{x:0,y:0},eventType:`none`}),m=e=>{p.value={...p.value,...e}};return(0,i.useEventListener)(window,`touchmove`,e=>{a.value&&r.value&&e.preventDefault()},{passive:!1}),{isTouching:f,onTouchStart:e=>{if(!r.value)return;e.stopPropagation(),f.value=!0;let{touches:t=[]}=e;t.length>1?m({point1:{x:t[0].clientX,y:t[0].clientY},point2:{x:t[1].clientX,y:t[1].clientY},eventType:`touchZoom`}):m({point1:{x:t[0].clientX-s.value.x,y:t[0].clientY-s.value.y},eventType:`move`})},onTouchMove:e=>{let{touches:t=[]}=e,{point1:n,point2:r,eventType:i}=p.value;if(t.length>1&&i===`touchZoom`){let e={x:t[0].clientX,y:t[0].clientY},i={x:t[1].clientX,y:t[1].clientY},[a,o]=ne(n,r,e,i);l(q(e,i)/q(n,r),`touchZoom`,a,o,!0),m({point1:e,point2:i,eventType:`touchZoom`})}else i===`move`&&(c({x:t[0].clientX-n.x,y:t[0].clientY-n.y},`move`),m({eventType:`move`}))},onTouchEnd:()=>{if(!a.value)return;if(f.value&&=!1,m({eventType:`none`}),o.value>s.value.scale)return c({x:0,y:0,scale:o.value},`touchZoom`);let e=n.value;if(!e)return;let t=e.offsetWidth*s.value.scale,r=e.offsetHeight*s.value.scale,{left:i,top:l}=e.getBoundingClientRect(),p=s.value.rotate%180!=0,h=W({imageWidth:p?r:t,imageHeight:p?t:r,imageLeft:i,imageTop:l,windowWidth:u.value,windowHeight:d.value});h&&c({...h},`dragRebound`)}}}function ie(e){return{zIndexPopup:`calc(${e.zIndexPopupBase} + 80)`,previewOperationColor:e.colorTextDescription,previewOperationHoverColor:e.colorText,previewOperationColorDisabled:e.colorTextDisabled,imagePreviewSwitchSize:e.controlHeightLG,previewOperationSize:e.fontSizeLG}}var ae=e=>{let t=e.componentCls,{motionEaseOut:n,motionDurationSlow:i,previewOperationSize:a,zIndexPopup:o}=e,s={position:`absolute`,color:e.previewOperationColor,backgroundColor:e.colorBgContainer,borderRadius:`50%`,width:e.controlHeightLG,height:e.controlHeightLG,padding:0,outline:0,border:0,boxShadow:e.boxShadowTertiary,cursor:`pointer`,transition:`all ${i}`,display:`flex`,alignItems:`center`,justifyContent:`center`,fontSize:a,"&:hover":{color:e.previewOperationHoverColor,backgroundColor:e.colorBgContainer},"&:active":{backgroundColor:e.colorBgContainer},svg:{stroke:`currentColor`}};return{[t]:{textAlign:`center`,inset:0,position:`fixed`,userSelect:`none`,zIndex:o,[`${t}-mask`]:{position:`absolute`,inset:0,background:`color-mix(in srgb, ${e.colorBgLayout} 90%, transparent)`,backdropFilter:`blur(0px)`,transition:`background-color ${i}, backdrop-filter ${i}`,[`&${t}-mask-blur`]:{backdropFilter:`blur(4px)`},[`&${t}-mask-hidden`]:{display:`none`}},[`${t}-body`]:{position:`absolute`,inset:0,overflow:`hidden`,display:`flex`,alignItems:`center`,justifyContent:`center`,pointerEvents:`none`,"> *":{pointerEvents:`auto`}},[`${t}-img`]:{maxWidth:`100%`,maxHeight:`70%`,verticalAlign:`middle`,transform:`scale3d(1, 1, 1)`,transition:`transform ${i} ${n} 0s`,userSelect:`none`},[`&-movable ${t}-img`]:{cursor:`grab`},[`&-moving ${t}-img`]:{cursor:`grabbing`},[`${t}-close`]:{...s,top:e.marginSM,insetInlineEnd:e.marginSM},[`${t}-switch`]:{...s,top:`50%`,transform:`translateY(-50%)`,"&-disabled":{"&, &:hover, &:active":{color:e.previewOperationColorDisabled,backgroundColor:e.colorBgContainer,cursor:`not-allowed`}},"&-prev":{insetInlineStart:e.marginSM},"&-next":{insetInlineEnd:e.marginSM}},[`${t}-footer`]:{position:`absolute`,bottom:e.marginXL,left:{_skip_check_:!0,value:`50%`},display:`flex`,flexDirection:`column`,alignItems:`center`,color:e.previewOperationColor,transform:`translateX(-50%)`,gap:e.marginXS},[`${t}-progress`]:{color:e.previewOperationColor},[`${t}-actions`]:{display:`flex`,alignItems:`center`,gap:e.marginXXS,padding:e.paddingXXS,color:e.previewOperationColor,backgroundColor:e.colorBgContainer,border:`${(0,r.unit)(e.lineWidth)} ${e.lineType} ${e.colorFillTertiary}`,borderRadius:e.borderRadiusLG,fontSize:a,"&-action":{color:`inherit`,background:`transparent`,border:0,font:`inherit`,lineHeight:1,width:e.controlHeight,height:e.controlHeight,padding:0,cursor:`pointer`,transition:`all ${i}`,display:`flex`,alignItems:`center`,justifyContent:`center`,borderRadius:e.borderRadius,userSelect:`none`,[`&:not(${t}-actions-action-disabled):hover`]:{color:e.colorTextSecondary,backgroundColor:e.colorFillTertiary},[`&:not(${t}-actions-action-disabled):active`]:{color:e.colorText,backgroundColor:e.colorFillSecondary},"&-disabled":{cursor:`not-allowed`,opacity:.5},svg:{stroke:`currentColor`}}}}}},oe=e=>{let t=e.componentCls,{motionDurationSlow:n,motionEaseOut:r}=e;return{[`${t}`]:{"&-fade-enter-active, &-fade-leave-active":{transition:`visibility ${n}`,[`${t}-mask`]:{transition:`background-color ${n}, backdrop-filter ${n}`},[`${t}-body`]:{transition:`transform ${n} ${r}`},[`${t}-close, ${t}-switch, ${t}-footer`]:{transition:`opacity ${n}, all ${n}`}},"&-fade-enter-from, &-fade-leave-to":{visibility:`visible`,[`${t}-mask`]:{backgroundColor:`transparent`,backdropFilter:`blur(0px)`},[`${t}-body`]:{transform:`scale(0)`},[`${t}-close, ${t}-switch, ${t}-footer`]:{opacity:0}},"&-fade-enter-to, &-fade-leave-from":{[`${t}-mask`]:{backgroundColor:`color-mix(in srgb, ${e.colorBgLayout} 90%, transparent)`,[`&${t}-mask-blur`]:{backdropFilter:`blur(4px)`}},[`${t}-close, ${t}-switch, ${t}-footer`]:{opacity:1}}}}},se=(0,r.proGenStyleHooks)(`GImagePreview`,e=>[ae(e),oe(e)],ie),J=1,Y={rotateLeft:(0,t.createVNode)(n.GIcon,{type:`RotateLeftOutlined`},null),rotateRight:(0,t.createVNode)(n.GIcon,{type:`RotateRightOutlined`},null),zoomIn:(0,t.createVNode)(n.GIcon,{type:`ZoomInOutlined`},null),zoomOut:(0,t.createVNode)(n.GIcon,{type:`ZoomOutOutlined`},null),flipX:(0,t.createVNode)(n.GIcon,{type:`SwapOutlined`},null),flipY:(0,t.createVNode)(n.GIcon,{type:`SwapOutlined`,rotate:90},null),copy:(0,t.createVNode)(n.GIcon,{type:`CopyOutlined`},null),download:(0,t.createVNode)(n.GIcon,{type:`DownloadOutlined`},null)},X={copySuccess:`复制成功`,copyFailed:`复制失败`,downloadSuccess:`下载成功`,downloadFailed:`下载失败`};function ce(e){try{let t=new URL(e,window.location.href).pathname.match(/\/([^/]+)$/)?.[1];return t?decodeURIComponent(t):`image`}catch{let t=e.split(`?`)[0]?.split(`#`)[0]?.split(`/`).pop();return t?decodeURIComponent(t):`image`}}function le(e){let t={"image/gif":`gif`,"image/jpg":`jpg`,"image/jpeg":`jpg`,"image/png":`png`,"image/svg+xml":`svg`,"image/webp":`webp`},n=e?.toLowerCase();return t[n]||n?.split(`/`)[1]?.split(`+`)[0]||`png`}async function ue(e){let t=await fetch(e,{mode:`cors`});if(!t.ok)throw Error(`Failed to fetch image: ${t.status}`);return t.blob()}async function de(e){return new Promise((t,n)=>{let r=new Image,i=URL.createObjectURL(e);r.onload=()=>{URL.revokeObjectURL(i);let e=document.createElement(`canvas`);e.width=r.naturalWidth,e.height=r.naturalHeight;let a=e.getContext(`2d`);if(!a){n(Error(`Canvas context not available`));return}a.drawImage(r,0,0),e.toBlob(e=>{e?t(e):n(Error(`Failed to convert to PNG`))},`image/png`,1)},r.onerror=()=>{URL.revokeObjectURL(i),n(Error(`Failed to load image for PNG conversion`))},r.src=i})}async function fe(e){let t=(e.type||``).toLowerCase();return t===`image/png`||t===`image/svg+xml`?{[t]:e}:{"image/png":await de(e)}}function pe(e,t){let n=ce(e);return n.includes(`.`)?n.endsWith(`.svg+xml`)?n.replace(/\.svg\+xml$/i,`.svg`):n:`${n}.${le(t)}`}function me(e,t){let n=URL.createObjectURL(e),r=document.createElement(`a`);r.href=n,r.download=t,r.style.display=`none`,document.body.appendChild(r),r.click(),r.remove(),URL.revokeObjectURL(n)}var Z=(0,t.defineComponent)((e,{emit:r,slots:c,expose:l})=>{let{width:u,height:d}=(0,i.useWindowSize)(),{prefixCls:f}=(0,a.useBaseConfig)(`pro-image-preview`,e),p=(0,o.default)(f),[m,h]=se(f,p),[g,_]=ee(e.open,{value:(0,t.toRef)(e,`open`),onChange:t=>{e.onOpenChange?.(t),r(`update:open`,t)}}),v=(0,t.ref)(!0),y=(0,t.ref)(),b=(0,t.ref)(),x=(0,t.ref)(e.current??0),S=(0,t.ref)(!1),C=(0,t.ref)(!1),{transform:w,resetTransform:T,updateTransform:E,dispatchZoomChange:D}=H({imageRef:y,minScale:(0,t.toRef)(e,`minScale`),maxScale:(0,t.toRef)(e,`maxScale`),windowWidth:u,windowHeight:d,onTransform:e.onTransform}),{isMoving:O,onMouseDown:k,onWheel:A}=te({imageRef:y,movable:(0,t.toRef)(e,`movable`),visible:g,scaleStep:(0,t.toRef)(e,`scaleStep`),transform:w,updateTransform:E,dispatchZoomChange:D,windowWidth:u,windowHeight:d}),{isTouching:j,onTouchStart:N,onTouchMove:P,onTouchEnd:F}=re({imageRef:y,movable:(0,t.toRef)(e,`movable`),visible:g,minScale:(0,t.toRef)(e,`minScale`),transform:w,updateTransform:E,dispatchZoomChange:D,windowWidth:u,windowHeight:d}),R=(0,t.computed)(()=>e.urls[x.value]),z=(0,t.computed)(()=>e.urls.length>1),B=(0,t.computed)(()=>e.urls.length>=1),V=(0,t.computed)(()=>e.mask===!1?{visible:!1,blur:!1}:e.mask&&typeof e.mask==`object`&&!(`type`in e.mask)?{visible:!0,blur:e.mask.blur!==!1}:{visible:!0,blur:!0}),U=(0,t.computed)(()=>{let t={};return e.mousePosition&&(t.transformOrigin=`${e.mousePosition.x}px ${e.mousePosition.y}px`),t});(0,t.watch)(()=>e.current,e=>{e!==void 0&&(x.value=e)}),(0,t.watch)(()=>e.current,e=>{e!==void 0&&(x.value=e)});let W=()=>{_(!1),e.onClose?.(),r(`close`)},G=()=>{O.value||W()},K=()=>{if(x.value>0||e.infinite){let n=x.value-1<0?e.urls.length-1:x.value-1;v.value=!1,x.value=n,T(`prev`),(0,t.nextTick)(()=>{v.value=!0})}},q=()=>{if(x.value<e.urls.length-1||e.infinite){let n=x.value+1>e.urls.length-1?0:x.value+1;v.value=!1,x.value=n,T(`next`),(0,t.nextTick)(()=>{v.value=!0})}},ne=()=>{D(J+(e.scaleStep??.5),`zoomIn`)},ie=()=>{D(J/(J+(e.scaleStep??.5)),`zoomOut`)},ae=()=>{E({rotate:w.value.rotate+90},`rotateRight`)},oe=()=>{E({rotate:w.value.rotate-90},`rotateLeft`)},ce=()=>{E({flipX:!w.value.flipX},`flipX`)},le=()=>{E({flipY:!w.value.flipY},`flipY`)},de=async()=>{if(!(!R.value||S.value)){if(!navigator.clipboard||!window.ClipboardItem){s.message.error(X.copyFailed);return}S.value=!0;try{let e=await fe(await ue(R.value));await navigator.clipboard.write([new ClipboardItem(e)]),s.message.success(X.copySuccess)}catch{s.message.error(X.copyFailed)}finally{S.value=!1}}},Z=async()=>{if(!(!R.value||C.value)){C.value=!0;try{let e=await ue(R.value);me(e,pe(R.value,e.type)),s.message.success(X.downloadSuccess)}catch{s.message.error(X.downloadFailed)}finally{C.value=!1}}},he=t=>{g.value&&(w.value.scale===1?D(J+(e.scaleStep??.5),`doubleClick`,t.clientX,t.clientY):E({x:0,y:0,scale:1},`doubleClick`))},ge=e=>{if(e.key===`Escape`){W();return}!g.value||!z.value||(e.key===`ArrowLeft`?K():e.key===`ArrowRight`&&q())},Q;(0,t.onMounted)(()=>{let e=e=>ge(e);window.addEventListener(`keydown`,e),Q=()=>window.removeEventListener(`keydown`,e)}),(0,t.onUnmounted)(()=>{Q?.()}),l({setOpen:t=>{_(t),x.value=e.current??0}});let _e=()=>L({slots:c,props:{...e.icons},keys:[`flipY`,`flipX`,`rotateLeft`,`rotateRight`,`zoomOut`,`zoomIn`,`copy`,`download`],render:!0,defaultVNodes:[Y.flipY,Y.flipX,Y.rotateLeft,Y.rotateRight,Y.zoomOut,Y.zoomIn,Y.copy,Y.download]}),ve=()=>{let r=_e();return[{icon:r.flipY,onClick:le,type:`flipY`},{icon:r.flipX,onClick:ce,type:`flipX`},{icon:r.rotateLeft,onClick:oe,type:`rotateLeft`},{icon:r.rotateRight,onClick:ae,type:`rotateRight`},{icon:r.zoomOut,onClick:ie,type:`zoomOut`,disabled:(0,t.computed)(()=>w.value.scale<=(e.minScale??1))},{icon:r.zoomIn,onClick:ne,type:`zoomIn`,disabled:(0,t.computed)(()=>w.value.scale===(e.maxScale??50))},{icon:S.value?(0,t.createVNode)(n.GIcon,{type:`Spinning`,spin:!0},null):r.copy,onClick:de,type:`copy`,disabled:(0,t.computed)(()=>S.value)},{icon:C.value?(0,t.createVNode)(n.GIcon,{type:`Spinning`,spin:!0},null):r.download,onClick:Z,type:`download`,disabled:(0,t.computed)(()=>C.value)}]};return()=>{let r={transform:`translate3d(${w.value.x}px, ${w.value.y}px, 0) scale3d(${w.value.flipX?`-`:``}${w.value.scale}, ${w.value.flipY?`-`:``}${w.value.scale}, 1) rotate(${w.value.rotate}deg)`,transitionDuration:!v.value||j.value?`0s`:void 0},i=I({slots:c,props:{close:e.icons?.close},key:`close`}),a=I({slots:c,props:{left:e.icons?.left},key:`left`}),o=I({slots:c,props:{right:e.icons?.right},key:`right`}),s=`${f.value}-actions-action`,l=ve();return(0,t.createVNode)(t.Teleport,{to:e.getContainer||`body`},{default:()=>[(0,t.createVNode)(t.Transition,{name:`${f.value}-fade`,appear:!0,onAfterLeave:()=>T(`close`)},{default:()=>[g.value&&(0,t.createVNode)(`div`,{ref:b,class:M(f.value,m.value,h.value,p.value,{[`${f.value}-movable`]:e.movable,[`${f.value}-moving`]:O.value}),style:{zIndex:e.zIndex},role:`dialog`,"aria-modal":`true`,"aria-label":`Image`,tabindex:-1},[V.value.visible&&(0,t.createVNode)(`div`,{class:M(`${f.value}-mask`,e.maskClass,{[`${f.value}-mask-blur`]:V.value.blur}),onClick:e.onHideOnClickModal?G:void 0},null),(0,t.createVNode)(`div`,{class:`${f.value}-body`,style:U.value},[(0,t.createVNode)(`img`,{ref:y,class:`${f.value}-img`,src:R.value,alt:`Image`,loading:`eager`,decoding:`sync`,style:r,onWheel:A,onMousedown:k,onDblclick:he,onTouchstart:N,onTouchmove:P,onTouchend:F,onTouchcancel:F},null)]),(0,t.createVNode)(`button`,{type:`button`,class:`${f.value}-close`,onClick:W},[i||(0,t.createVNode)(n.GIcon,{type:`CloseOutlined`},null)]),z.value&&(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)(`button`,{type:`button`,class:M(`${f.value}-switch`,`${f.value}-switch-prev`,{[`${f.value}-switch-disabled`]:!e.infinite&&x.value===0}),onClick:e=>{e.preventDefault(),e.stopPropagation(),K()}},[a||(0,t.createVNode)(n.GIcon,{type:`LeftOutlined`},null)]),(0,t.createVNode)(`button`,{type:`button`,class:M(`${f.value}-switch`,`${f.value}-switch-next`,{[`${f.value}-switch-disabled`]:!e.infinite&&x.value===e.urls.length-1}),onClick:e=>{e.preventDefault(),e.stopPropagation(),q()}},[o||(0,t.createVNode)(n.GIcon,{type:`RightOutlined`},null)])]),(0,t.createVNode)(`div`,{class:`${f.value}-footer`},[B.value&&(0,t.createVNode)(`div`,{class:`${f.value}-progress`},[e.countRender?e.countRender(x.value+1,e.urls.length):`${x.value+1} / ${e.urls.length}`]),(0,t.createVNode)(`div`,{class:`${f.value}-actions`},[l.map(({icon:e,onClick:n,type:r,disabled:i})=>(0,t.createVNode)(`button`,{type:`button`,class:M(s,`${s}-${r}`,{[`${s}-disabled`]:i&&i.value}),onClick:()=>{i?.value||n()},disabled:i?i.value:!1,"aria-label":r,key:r},[e]))])])])]})]})}},{props:(0,t.mergeDefaults)({class:{type:String,required:!1},style:{type:Object,required:!1},rootClass:{type:String,required:!1},prefixCls:{type:String,required:!1},urls:{type:Array,required:!0},open:{type:Boolean,required:!1,default:void 0},scaleStep:{type:Number,required:!1},minScale:{type:Number,required:!1},maxScale:{type:Number,required:!1},movable:{type:Boolean,required:!1,default:void 0},disabled:{type:Boolean,required:!1,default:void 0},zIndex:{type:Number,required:!1},current:{type:Number,required:!1},infinite:{type:Boolean,required:!1,default:void 0},getContainer:{type:String,required:!1},onHideOnClickModal:{type:Boolean,required:!1,default:void 0},mask:{type:[Object,Boolean],required:!1,default:void 0},maskClass:{type:String,required:!1},mousePosition:{type:[Object,null],required:!1},countRender:{type:[Function,Boolean],required:!1,default:void 0},icons:{type:Object,required:!1},onClose:{type:Function,required:!1},onTransform:{type:Function,required:!1},onOpenChange:{type:Function,required:!1},"onUpdate:open":{type:Function,required:!1}},{open:!1,scaleStep:.5,minScale:1,maxScale:50,movable:!0,zIndex:2e3,current:0,infinite:!0,onHideOnClickModal:!0,urls:[],icons:{}}),emits:[`close`,`transform`,`update:open`],name:`GImagePreview`,inheritAttrs:!1}),he=e=>{let{motionDurationSlow:t,paddingXXS:n,marginXXS:i,colorTextLightSolid:a}=e;return{position:`absolute`,inset:0,display:`flex`,alignItems:`center`,justifyContent:`center`,color:a,background:`rgba(0, 0, 0, 0.5)`,cursor:`pointer`,opacity:0,transition:`opacity ${t}`,[`.${e.componentCls}-mask-info`]:{overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`ellipsis`,padding:`0 ${(0,r.unit)(n)}`,".anticon":{marginInlineEnd:i,svg:{verticalAlign:`baseline`}}}}},ge=e=>{let t={width:`100%`,height:`100%`};return{[e.componentCls]:{display:`inline-block`,position:`relative`,overflow:`hidden`,[`${e.componentCls}-img`]:{...t,verticalAlign:`top`,opacity:1,[`&${e.componentCls}-img-preview`]:{userSelect:`none`,cursor:`pointer`},"&-placeholder":{...t,backgroundColor:e.colorBgContainerDisabled,backgroundImage:`url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')`,backgroundRepeat:`no-repeat`,backgroundPosition:`center center`,backgroundSize:`30%`}},[`${e.componentCls}-error`]:{...t,display:`flex`,alignItems:`center`,justifyContent:`center`},[`${e.componentCls}-placeholder`]:{position:`absolute`,inset:0},[`${e.componentCls}-mask`]:{...he(e)},[`${e.componentCls}-mask:hover`]:{opacity:1}}}},Q=(0,r.proGenStyleHooks)(`GImage`,e=>[ge(e)]),_e={src:``,alt:``,fit:`contain`,preview:!0,loading:`eager`};function ve(e){return e&&e.nodeType===1}var $=(0,t.defineComponent)((e,{emit:s,slots:c,expose:l,attrs:u})=>{let d=i.isClient&&`loading`in HTMLImageElement.prototype,{prefixCls:f}=(0,a.useBaseConfig)(`pro-image`,e),p=(0,o.default)(f),[m,h]=Q(f,p),g=(0,t.ref)(),v=(0,t.ref)(!1),y=(0,t.ref)(!0),x=(0,t.ref)(),S=(0,t.ref)(),C,w=(0,t.computed)(()=>e.loading===`eager`?!1:!d&&e.loading===`lazy`||e.lazy),T=(0,t.computed)(()=>i.isClient&&e.fit?{...e.imageStyle,objectFit:e.fit}:{...e.imageStyle}),E=(0,t.computed)(()=>typeof e.preview==`object`?e.preview:{}),D=(0,t.computed)(()=>!!e.preview),O=(0,t.computed)(()=>{let{urls:t=[],current:n=0}=E.value;if(_(n))return t.length>=n?n:0;let r=t.indexOf(e.src??``);return r>=0?r:0}),k=(0,t.computed)(()=>(0,r.unit)(e.width)),A=(0,t.computed)(()=>(0,r.unit)(e.height)),{showViewer:N,mousePosition:P,openPreview:F,closePreview:I}=R({canPreview:D}),z=()=>{i.isClient&&(y.value=!0,v.value=!1,g.value=e.src)},B=t=>{v.value||(y.value=!1,v.value=!1,e.onLoad?.(t),s(`load`,t))},ee=t=>{y.value=!1,v.value=!0,e.onError?.(t),s(`error`,t)},V=()=>{if(!x.value||!S.value)return!1;let e=x.value.getBoundingClientRect(),t=S.value.getBoundingClientRect?S.value.getBoundingClientRect():{top:0,bottom:S.value.innerHeight??0,left:0,right:S.value.innerWidth??0};return e.top<t.bottom&&e.bottom>t.top&&e.left<t.right&&e.right>t.left},H=(0,i.useThrottleFn)(()=>{V()&&(z(),C?.(),C=void 0)},200,!0),U=async()=>{if(!i.isClient)return;await(0,t.nextTick)();let{scrollContainer:n}=e;ve(n)?S.value=n:b(n)&&n!==``?S.value=document.querySelector(n)??void 0:x.value&&(S.value=j(x.value)),S.value&&(C=(0,i.useEventListener)(S.value,`scroll`,H),setTimeout(H,100))},W=t=>{let n=y.value?`loaded`:v.value?`error`:`success`;if(e.onClick?.(n),s(`click`,n),!(y.value||v.value)&&D.value){let e=t.currentTarget?.getBoundingClientRect();F(e?{...t,clientX:e.x+e.width/2,clientY:e.y+e.height/2}:t)}};return(0,t.watch)(()=>e.src,()=>{w.value?(y.value=!0,v.value=!1,C?.(),U()):z()}),(0,t.onMounted)(()=>{w.value?U():z()}),l({setOpen:e=>{e?F():I()}}),()=>{let i={},a={};for(let[e,t]of Object.entries(u))/^(?:data-|on[A-Z])/i.test(e)||[`id`,`style`,`class`].includes(e)?i[e]=t:a[e]=t;let o=L({slots:c,props:e,keys:[`fallback`,`mask`,`placeholder`],render:!0});return(0,t.createVNode)(`div`,(0,t.mergeProps)({class:M(f.value,m.value,h.value,p.value,e.class),ref:x},i,{style:{width:(0,r.unit)(e.size)||k.value,height:(0,r.unit)(e.size)||A.value,...i.style||{}},onClick:e=>{v.value&&W(e)}}),[v.value?(0,t.createVNode)(`div`,{class:M(`${f.value}-error`)},[o.fallback]):(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)(`img`,(0,t.mergeProps)(a,{src:g.value,loading:e.loading,style:T.value,class:M(e.imageClass,`${f.value}-img`,{[`${f.value}-img-placeholder`]:e.placeholder===!0,[`${f.value}-img-preview`]:D.value}),crossorigin:e.crossOrigin,width:k.value,height:A.value,onClick:W,onLoad:B,onError:ee}),null),y.value&&(0,t.createVNode)(`div`,{class:M(`${f.value}-placeholder`),onClick:W},[o.placeholder])]),E.value.mask&&D.value&&(0,t.createVNode)(`div`,{class:M(`${f.value}-mask`,E.value.maskClass),style:{display:i.style?.display===`none`?`none`:void 0}},[o.mask||(0,t.createVNode)(`div`,{class:M(`${f.value}-mask-info`)},[(0,t.createVNode)(n.GIcon,{type:`EyeOutlined`},null)])]),D.value&&(0,t.createVNode)(Z,(0,t.mergeProps)(E.value,{urls:E.value.urls||(e.src?[e.src]:[]),current:O.value,zIndex:e.zIndex??E.value.zIndex,open:N.value,mousePosition:P.value,onClose:()=>I()}),c)])}},{props:(0,t.mergeDefaults)({rootClass:{type:String,required:!1},prefixCls:{type:String,required:!1},src:{type:String,required:!1},alt:{type:String,required:!1},width:{type:Number,required:!1},height:{type:Number,required:!1},size:{type:Number,required:!1},fit:{type:String,required:!1},loading:{type:String,required:!1},crossOrigin:{type:String,required:!1},imageStyle:{type:Object,required:!1},imageClass:{type:String,required:!1},preview:{type:[Boolean,Object],required:!1,default:void 0},zIndex:{type:Number,required:!1},lazy:{type:Boolean,required:!1,default:void 0},scrollContainer:{required:!1},placeholder:{type:[Function,String,Number,null,Object,Boolean],required:!1,default:void 0},fallback:{type:[Function,String,Number,null,Object,Boolean],required:!1,default:void 0},onLoad:{type:Function,required:!1},onError:{type:Function,required:!1},onClick:{type:Function,required:!1},"onUpdate:open":{type:Function,required:!1}},_e),emits:[`click`,`load`,`error`],name:`GImage`,inheritAttrs:!1});$.isGImage=!0,$.install=e=>(e.component($.name,$),e),e.GImage=$,e.GImagePreview=Z});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gx-design-vue/image",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.2.0-alpha.
|
|
4
|
+
"version": "0.2.0-alpha.5",
|
|
5
5
|
"description": "Gx Design Image",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "gx12358",
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@antdv-next/cssinjs": "^1.0.6",
|
|
44
|
-
"@antdv-next/icons": "^1.0.6",
|
|
45
44
|
"@ctrl/tinycolor": "^3.5.0",
|
|
46
45
|
"@vueuse/core": "^14.3.0",
|
|
47
|
-
"antdv-next": "^1.3.
|
|
46
|
+
"antdv-next": "^1.3.5",
|
|
48
47
|
"es-toolkit": "^1.43.0",
|
|
49
|
-
"@gx-design-vue/
|
|
50
|
-
"@gx-design-vue/pro-
|
|
51
|
-
"@gx-design-vue/pro-
|
|
48
|
+
"@gx-design-vue/icon": "^0.0.1-alpha.7",
|
|
49
|
+
"@gx-design-vue/pro-utils": "^0.2.0-alpha.6",
|
|
50
|
+
"@gx-design-vue/pro-hooks": "^0.2.0-alpha.6",
|
|
51
|
+
"@gx-design-vue/pro-provider": "^0.1.0-alpha.8"
|
|
52
52
|
},
|
|
53
53
|
"browserslist": [
|
|
54
54
|
"> 1%",
|