@gx-design-vue/image 0.2.0-alpha.1 → 0.2.0-alpha.2

package/dist/interface.d.ts

@@ -0,0 +1,169 @@
+import { CSSProperties, VNode } from "vue";
+import { CustomRender, WithFalse } from "@gx-design-vue/pro-utils";
+
+//#region src/interface.d.ts
+interface TransformType {
+  x: number;
+  y: number;
+  rotate: number;
+  scale: number;
+  flipX: boolean;
+  flipY: boolean;
+}
+type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound' | 'touchZoom' | 'reset';
+type ImageFitType = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+type ImageLoadingType = 'eager' | 'lazy';
+interface PreviewPropsIcons {
+  close?: WithFalse<CustomRender>;
+  rotateLeft?: WithFalse<CustomRender>;
+  rotateRight?: WithFalse<CustomRender>;
+  zoomIn?: WithFalse<CustomRender>;
+  zoomOut?: WithFalse<CustomRender>;
+  copy?: WithFalse<CustomRender>;
+  download?: WithFalse<CustomRender>;
+  left?: WithFalse<CustomRender>;
+  right?: WithFalse<CustomRender>;
+  flipX?: WithFalse<CustomRender>;
+  flipY?: WithFalse<CustomRender>;
+}
+interface ImagePreviewConfig {
+  urls?: string[];
+  mask?: VNode | boolean | {
+    blur?: boolean;
+  };
+  maskClass?: string;
+  disabled?: boolean;
+  zIndex?: number;
+  current?: number;
+  infinite?: boolean;
+  getContainer?: string;
+  onHideOnClickModal?: boolean;
+  countRender?: WithFalse<(current: number, total: number) => CustomRender>;
+  icons?: PreviewPropsIcons;
+}
+interface GImageProps {
+  rootClass?: string;
+  prefixCls?: string;
+  src?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  size?: number;
+  fit?: ImageFitType;
+  loading?: ImageLoadingType;
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  imageStyle?: CSSProperties;
+  imageClass?: string;
+  preview?: boolean | ImagePreviewConfig;
+  zIndex?: number;
+  lazy?: boolean;
+  scrollContainer?: string | HTMLElement;
+  placeholder?: WithFalse<CustomRender>;
+  fallback?: WithFalse<CustomRender>;
+  onLoad?: (event: Event) => void;
+  onError?: (event: Event) => void;
+  onClick?: (info: 'loaded' | 'error' | 'success') => void;
+  'onUpdate:open'?: (open: boolean) => void;
+}
+interface GImageEmits {
+  click: GImageProps['onClick'];
+  load: GImageProps['onLoad'];
+  error: GImageProps['onError'];
+}
+interface GImageSlots {
+  default?: () => any;
+  placeholder?: () => any;
+  fallback?: () => any;
+  mask?: () => any;
+  close?: () => any;
+  left?: () => any;
+  right?: () => any;
+  countRender?: () => any;
+  rotateLeft?: () => any;
+  rotateRight?: () => any;
+  zoomIn?: () => any;
+  zoomOut?: () => any;
+  copy?: () => any;
+  download?: () => any;
+  flipX?: () => any;
+  flipY?: () => any;
+}
+interface GImageExpose {
+  setOpen: (open: boolean) => void;
+}
+interface ImagePreviewProps {
+  class?: string;
+  style?: CSSProperties;
+  rootClass?: string;
+  prefixCls?: string;
+  urls: string[];
+  open?: boolean;
+  scaleStep?: number;
+  minScale?: number;
+  maxScale?: number;
+  movable?: boolean;
+  disabled?: boolean;
+  zIndex?: number;
+  current?: number;
+  infinite?: boolean;
+  getContainer?: string;
+  onHideOnClickModal?: boolean;
+  mask?: VNode | boolean | {
+    blur?: boolean;
+  };
+  maskClass?: string;
+  mousePosition?: {
+    x: number;
+    y: number;
+  } | null;
+  countRender?: WithFalse<(current: number, total: number) => CustomRender>;
+  icons?: PreviewPropsIcons;
+  onClose?: () => void;
+  onTransform?: (info: {
+    transform: TransformType;
+    action: TransformAction;
+  }) => void;
+  onOpenChange?: (value: boolean) => void;
+  'onUpdate:open'?: (value: boolean) => void;
+}
+interface ImagePreviewEmits {
+  close: ImagePreviewProps['onClose'];
+  transform: ImagePreviewProps['onTransform'];
+  'update:open': ImagePreviewProps['onUpdate:open'];
+}
+interface ImagePreviewSlots {
+  default?: () => any;
+  close?: () => any;
+  left?: () => any;
+  right?: () => any;
+  countRender?: () => any;
+  rotateLeft?: () => any;
+  rotateRight?: () => any;
+  zoomIn?: () => any;
+  zoomOut?: () => any;
+  copy?: () => any;
+  download?: () => any;
+  flipX?: () => any;
+  flipY?: () => any;
+}
+interface ImagePreviewExpose {
+  setOpen: (open: boolean) => void;
+}
+interface ForwardGImageType {
+  new (props: GImageProps): {
+    $props: GImageProps;
+    $slots: GImageSlots;
+  } & GImageExpose;
+}
+interface ForwardImagePreviewType {
+  new (props: ImagePreviewProps): {
+    $props: ImagePreviewProps;
+    $slots: ImagePreviewSlots;
+  } & ImagePreviewExpose;
+}
+type GImageSlotNames = keyof GImageSlots;
+type PreviewSlotNames = keyof ImagePreviewSlots;
+type UpdateTransformFunc = (newTransform: Partial<TransformType>, action: TransformAction) => void;
+type DispatchZoomChangeFunc = (ratio: number, action: TransformAction, centerX?: number, centerY?: number, isTouch?: boolean) => void;
+//#endregion
+export { DispatchZoomChangeFunc, ForwardGImageType, ForwardImagePreviewType, GImageEmits, GImageExpose, GImageProps, GImageSlotNames, GImageSlots, ImageFitType, ImageLoadingType, ImagePreviewConfig, ImagePreviewEmits, ImagePreviewExpose, ImagePreviewProps, ImagePreviewSlots, PreviewPropsIcons, PreviewSlotNames, TransformAction, TransformType, UpdateTransformFunc };

package/dist/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/style/index.d.ts

@@ -0,0 +1,7 @@
+import * as _$vue from "vue";
+
+//#region src/style/index.d.ts
+type ComponentToken = Record<string, any>;
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, _default as default };

package/dist/{style.js → style/index.js}

@@ -1,18 +1,8 @@
-import { FastColor, unit } from "@gx-design-vue/pro-provider";
-
-//#region src/style.ts
-const fullSize = {
-	width: "100%",
-	height: "100%"
-};
-const textEllipsis = {
-	overflow: "hidden",
-	whiteSpace: "nowrap",
-	textOverflow: "ellipsis"
-};
-function genImageMaskStyle(token) {
+import { proGenStyleHooks, unit } from "@gx-design-vue/pro-provider";
+//#region src/style/index.ts
+const genImageMaskStyle = (token) => {
 	const { motionDurationSlow, paddingXXS, marginXXS, colorTextLightSolid } = token;
-	const iconCls = `.anticon`;
+	const iconCls = ".anticon";
 	return {
 		position: "absolute",
 		inset: 0,
@@ -20,12 +10,14 @@ function genImageMaskStyle(token) {
 		alignItems: "center",
 		justifyContent: "center",
 		color: colorTextLightSolid,
-		background: new FastColor("#000").setA(.5).toRgbString(),
+		background: "rgba(0, 0, 0, 0.5)",
 		cursor: "pointer",
 		opacity: 0,
 		transition: `opacity ${motionDurationSlow}`,
 		[`.${token.componentCls}-mask-info`]: {
-			...textEllipsis,
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis",
 			padding: `0 ${unit(paddingXXS)}`,
 			[iconCls]: {
 				marginInlineEnd: marginXXS,
@@ -33,14 +25,12 @@ function genImageMaskStyle(token) {
 			}
 		}
 	};
-}
-function genBoxStyle(position) {
-	return {
-		position: position || "absolute",
-		inset: 0
+};
+const genImageBaseStyle = (token) => {
+	const fullSize = {
+		width: "100%",
+		height: "100%"
 	};
-}
-const genImageStyle = (token) => {
 	return { [token.componentCls]: {
 		display: "inline-block",
 		position: "relative",
@@ -68,11 +58,14 @@ const genImageStyle = (token) => {
 			alignItems: "center",
 			justifyContent: "center"
 		},
-		[`${token.componentCls}-placeholder`]: { ...genBoxStyle() },
+		[`${token.componentCls}-placeholder`]: {
+			position: "absolute",
+			inset: 0
+		},
 		[`${token.componentCls}-mask`]: { ...genImageMaskStyle(token) },
 		[`${token.componentCls}-mask:hover`]: { opacity: 1 }
 	} };
 };
-
+var style_default = proGenStyleHooks("GImage", (token) => [genImageBaseStyle(token)]);
 //#endregion
-export { genBoxStyle, genImageMaskStyle, genImageStyle };
+export { style_default as default };

package/dist/style/preview.d.ts

@@ -0,0 +1,14 @@
+import * as _$vue from "vue";
+
+//#region src/style/preview.d.ts
+interface ComponentToken {
+  zIndexPopup: string | number;
+  previewOperationSize: string | number;
+  previewOperationColor: string;
+  previewOperationHoverColor: string;
+  previewOperationColorDisabled: string;
+  imagePreviewSwitchSize: string | number;
+}
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, _default as default };

package/dist/style/preview.js

@@ -0,0 +1,182 @@
+import { proGenStyleHooks, unit } from "@gx-design-vue/pro-provider";
+//#region src/style/preview.ts
+function createPreviewToken(token) {
+	return {
+		zIndexPopup: `calc(${token.zIndexPopupBase} + 80)`,
+		previewOperationColor: token.colorTextDescription,
+		previewOperationHoverColor: token.colorText,
+		previewOperationColorDisabled: token.colorTextDisabled,
+		imagePreviewSwitchSize: token.controlHeightLG,
+		previewOperationSize: token.fontSizeLG
+	};
+}
+const genPreviewBaseStyle = (token) => {
+	const previewCls = token.componentCls;
+	const { motionEaseOut, motionDurationSlow, previewOperationSize, zIndexPopup } = token;
+	const singleButtonStyle = {
+		position: "absolute",
+		color: token.previewOperationColor,
+		backgroundColor: token.colorBgContainer,
+		borderRadius: "50%",
+		width: token.controlHeightLG,
+		height: token.controlHeightLG,
+		padding: 0,
+		outline: 0,
+		border: 0,
+		boxShadow: token.boxShadowTertiary,
+		cursor: "pointer",
+		transition: `all ${motionDurationSlow}`,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: previewOperationSize,
+		"&:hover": {
+			color: token.previewOperationHoverColor,
+			backgroundColor: token.colorBgContainer
+		},
+		"&:active": { backgroundColor: token.colorBgContainer },
+		svg: { stroke: "currentColor" }
+	};
+	return { [previewCls]: {
+		textAlign: "center",
+		inset: 0,
+		position: "fixed",
+		userSelect: "none",
+		zIndex: zIndexPopup,
+		[`${previewCls}-mask`]: {
+			position: "absolute",
+			inset: 0,
+			background: `color-mix(in srgb, ${token.colorBgLayout} 90%, transparent)`,
+			backdropFilter: "blur(0px)",
+			transition: `background-color ${motionDurationSlow}, backdrop-filter ${motionDurationSlow}`,
+			[`&${previewCls}-mask-blur`]: { backdropFilter: "blur(4px)" },
+			[`&${previewCls}-mask-hidden`]: { display: "none" }
+		},
+		[`${previewCls}-body`]: {
+			position: "absolute",
+			inset: 0,
+			overflow: "hidden",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			pointerEvents: "none",
+			"> *": { pointerEvents: "auto" }
+		},
+		[`${previewCls}-img`]: {
+			maxWidth: "100%",
+			maxHeight: "70%",
+			verticalAlign: "middle",
+			transform: "scale3d(1, 1, 1)",
+			transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
+			userSelect: "none"
+		},
+		[`&-movable ${previewCls}-img`]: { cursor: "grab" },
+		[`&-moving ${previewCls}-img`]: { cursor: "grabbing" },
+		[`${previewCls}-close`]: {
+			...singleButtonStyle,
+			top: token.marginSM,
+			insetInlineEnd: token.marginSM
+		},
+		[`${previewCls}-switch`]: {
+			...singleButtonStyle,
+			top: "50%",
+			transform: "translateY(-50%)",
+			"&-disabled": { "&, &:hover, &:active": {
+				color: token.previewOperationColorDisabled,
+				backgroundColor: token.colorBgContainer,
+				cursor: "not-allowed"
+			} },
+			"&-prev": { insetInlineStart: token.marginSM },
+			"&-next": { insetInlineEnd: token.marginSM }
+		},
+		[`${previewCls}-footer`]: {
+			position: "absolute",
+			bottom: token.marginXL,
+			left: {
+				_skip_check_: true,
+				value: "50%"
+			},
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			color: token.previewOperationColor,
+			transform: "translateX(-50%)",
+			gap: token.marginXS
+		},
+		[`${previewCls}-progress`]: { color: token.previewOperationColor },
+		[`${previewCls}-actions`]: {
+			display: "flex",
+			alignItems: "center",
+			gap: token.marginXXS,
+			padding: token.paddingXXS,
+			color: token.previewOperationColor,
+			backgroundColor: token.colorBgContainer,
+			border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorFillTertiary}`,
+			borderRadius: token.borderRadiusLG,
+			fontSize: previewOperationSize,
+			"&-action": {
+				color: "inherit",
+				background: "transparent",
+				border: 0,
+				font: "inherit",
+				lineHeight: 1,
+				width: token.controlHeight,
+				height: token.controlHeight,
+				padding: 0,
+				cursor: "pointer",
+				transition: `all ${motionDurationSlow}`,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: token.borderRadius,
+				userSelect: "none",
+				[`&:not(${previewCls}-actions-action-disabled):hover`]: {
+					color: token.colorTextSecondary,
+					backgroundColor: token.colorFillTertiary
+				},
+				[`&:not(${previewCls}-actions-action-disabled):active`]: {
+					color: token.colorText,
+					backgroundColor: token.colorFillSecondary
+				},
+				"&-disabled": {
+					cursor: "not-allowed",
+					opacity: .5
+				},
+				svg: { stroke: "currentColor" }
+			}
+		}
+	} };
+};
+const genPreviewMotionStyle = (token) => {
+	const previewCls = token.componentCls;
+	const { motionDurationSlow, motionEaseOut } = token;
+	return { [`${previewCls}`]: {
+		"&-fade-enter-active, &-fade-leave-active": {
+			transition: `visibility ${motionDurationSlow}`,
+			[`${previewCls}-mask`]: { transition: `background-color ${motionDurationSlow}, backdrop-filter ${motionDurationSlow}` },
+			[`${previewCls}-body`]: { transition: `transform ${motionDurationSlow} ${motionEaseOut}` },
+			[`${previewCls}-close, ${previewCls}-switch, ${previewCls}-footer`]: { transition: `opacity ${motionDurationSlow}, all ${motionDurationSlow}` }
+		},
+		"&-fade-enter-from, &-fade-leave-to": {
+			visibility: "visible",
+			[`${previewCls}-mask`]: {
+				backgroundColor: "transparent",
+				backdropFilter: "blur(0px)"
+			},
+			[`${previewCls}-body`]: { transform: "scale(0)" },
+			[`${previewCls}-close, ${previewCls}-switch, ${previewCls}-footer`]: { opacity: 0 }
+		},
+		"&-fade-enter-to, &-fade-leave-from": {
+			[`${previewCls}-mask`]: {
+				backgroundColor: `color-mix(in srgb, ${token.colorBgLayout} 90%, transparent)`,
+				[`&${previewCls}-mask-blur`]: { backdropFilter: "blur(4px)" }
+			},
+			[`${previewCls}-close, ${previewCls}-switch, ${previewCls}-footer`]: { opacity: 1 }
+		}
+	} };
+};
+var preview_default = proGenStyleHooks("GImagePreview", (token) => {
+	return [genPreviewBaseStyle(token), genPreviewMotionStyle(token)];
+}, createPreviewToken);
+//#endregion
+export { preview_default as default };

package/dist/theme/augment.d.ts

@@ -0,0 +1,10 @@
+import { ComponentToken } from "../style/index.js";
+import { ComponentToken as ComponentToken$1 } from "../style/preview.js";
+
+//#region src/theme/augment.d.ts
+declare module 'antdv-next/dist/theme/interface/components' {
+  interface ComponentTokenMap {
+    GImage?: ComponentToken;
+    GImagePreview?: ComponentToken$1;
+  }
+}

package/dist/theme/augment.js

@@ -0,0 +1 @@
+export {};

package/dist/theme/interface/components.d.ts

@@ -0,0 +1,10 @@
+import { ComponentToken } from "../../style/index.js";
+import { ComponentToken as ComponentToken$1 } from "../../style/preview.js";
+
+//#region src/theme/interface/components.d.ts
+interface ComponentTokenMap {
+  GImage: ComponentToken;
+  GImagePreview: ComponentToken$1;
+}
+//#endregion
+export { ComponentTokenMap };

package/dist/theme/interface/components.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gx-design-vue/image",
   "type": "module",
-  "version": "0.2.0-alpha.1",
+  "version": "0.2.0-alpha.2",
   "description": "Gx Design Image",
   "author": {
     "name": "gx12358",
@@ -40,14 +40,15 @@
     "vue": ">=3.2.0"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "^7.0.1",
+    "@antdv-next/cssinjs": "^1.0.6",
+    "@antdv-next/icons": "^1.0.6",
     "@ctrl/tinycolor": "^3.5.0",
-    "@vueuse/core": "^14.2.0",
-    "ant-design-vue": "^4.2.6",
+    "@vueuse/core": "^14.3.0",
+    "antdv-next": "^1.3.3",
     "es-toolkit": "^1.43.0",
-    "@gx-design-vue/pro-hooks": "^0.2.0-alpha.2",
-    "@gx-design-vue/pro-utils": "^0.2.0-alpha.2",
-    "@gx-design-vue/pro-provider": "^0.1.0-alpha.1"
+    "@gx-design-vue/pro-hooks": "^0.2.0-alpha.3",
+    "@gx-design-vue/pro-provider": "^0.1.0-alpha.5",
+    "@gx-design-vue/pro-utils": "^0.2.0-alpha.3"
   },
   "browserslist": [
     "> 1%",

package/dist/GImage.d.ts

@@ -1,162 +0,0 @@
-import { BaseImagePreviewProps } from "./ImagePreview/props.js";
-import { imageProps } from "./props.js";
-import * as vue46 from "vue";
-import { CSSProperties, ExtractPropTypes, SlotsType } from "vue";
-import * as _gx_design_vue_pro_utils7 from "@gx-design-vue/pro-utils";
-import * as ant_design_vue_es__util_type2 from "ant-design-vue/es/_util/type";
-
-//#region src/GImage.d.ts
-type GImageProps = Partial<ExtractPropTypes<typeof imageProps>>;
-declare const GImage: vue46.DefineComponent<ExtractPropTypes<{
-  preview: {
-    type: vue46.PropType<BaseImagePreviewProps | boolean>;
-    default: boolean;
-  };
-  src: {
-    type: vue46.PropType<string>;
-    default: string;
-  };
-  alt: {
-    type: vue46.PropType<string>;
-    default: string;
-  };
-  loading: {
-    type: vue46.PropType<"eager" | "lazy">;
-  };
-  fit: {
-    type: vue46.PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
-    default: string;
-  };
-  crossOrigin: {
-    type: vue46.PropType<"anonymous" | "use-credentials" | "">;
-  };
-  lazy: vue46.PropType<boolean>;
-  scrollContainer: {
-    type: vue46.PropType<string | HTMLElement | undefined>;
-  };
-  placeholder: {
-    type: vue46.PropType<_gx_design_vue_pro_utils7.WithFalse<_gx_design_vue_pro_utils7.CustomRender>>;
-    default: () => any;
-  };
-  fallback: {
-    type: vue46.PropType<_gx_design_vue_pro_utils7.WithFalse<_gx_design_vue_pro_utils7.CustomRender>>;
-    default: () => any;
-  };
-  onLoad: {
-    type: vue46.PropType<(e: Error) => void>;
-  };
-  onError: {
-    type: vue46.PropType<(e: Error) => void>;
-  };
-  onClick: {
-    type: vue46.PropType<(info: any) => void>;
-  };
-  imageStyle: {
-    type: vue46.PropType<CSSProperties>;
-    default: () => {};
-  };
-  imageClass: vue46.PropType<string>;
-  size: vue46.PropType<number>;
-  width: vue46.PropType<number>;
-  height: vue46.PropType<number>;
-  zIndex: {
-    type: vue46.PropType<number>;
-    default: number;
-  };
-  getContainer: {
-    type: vue46.PropType<string>;
-  };
-}>, () => ant_design_vue_es__util_type2.VueNode, {}, {}, {}, vue46.ComponentOptionsMixin, vue46.ComponentOptionsMixin, {
-  click: (_type: "loaded" | "error" | "success") => true;
-  load: (_event: Event) => true;
-  error: (_event: Event) => true;
-}, string, vue46.PublicProps, Readonly<ExtractPropTypes<{
-  preview: {
-    type: vue46.PropType<BaseImagePreviewProps | boolean>;
-    default: boolean;
-  };
-  src: {
-    type: vue46.PropType<string>;
-    default: string;
-  };
-  alt: {
-    type: vue46.PropType<string>;
-    default: string;
-  };
-  loading: {
-    type: vue46.PropType<"eager" | "lazy">;
-  };
-  fit: {
-    type: vue46.PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
-    default: string;
-  };
-  crossOrigin: {
-    type: vue46.PropType<"anonymous" | "use-credentials" | "">;
-  };
-  lazy: vue46.PropType<boolean>;
-  scrollContainer: {
-    type: vue46.PropType<string | HTMLElement | undefined>;
-  };
-  placeholder: {
-    type: vue46.PropType<_gx_design_vue_pro_utils7.WithFalse<_gx_design_vue_pro_utils7.CustomRender>>;
-    default: () => any;
-  };
-  fallback: {
-    type: vue46.PropType<_gx_design_vue_pro_utils7.WithFalse<_gx_design_vue_pro_utils7.CustomRender>>;
-    default: () => any;
-  };
-  onLoad: {
-    type: vue46.PropType<(e: Error) => void>;
-  };
-  onError: {
-    type: vue46.PropType<(e: Error) => void>;
-  };
-  onClick: {
-    type: vue46.PropType<(info: any) => void>;
-  };
-  imageStyle: {
-    type: vue46.PropType<CSSProperties>;
-    default: () => {};
-  };
-  imageClass: vue46.PropType<string>;
-  size: vue46.PropType<number>;
-  width: vue46.PropType<number>;
-  height: vue46.PropType<number>;
-  zIndex: {
-    type: vue46.PropType<number>;
-    default: number;
-  };
-  getContainer: {
-    type: vue46.PropType<string>;
-  };
-}>> & Readonly<{
-  onError?: (_event: Event) => any;
-  onClick?: (_type: "loaded" | "error" | "success") => any;
-  onLoad?: (_event: Event) => any;
-}>, {
-  zIndex: number;
-  placeholder: _gx_design_vue_pro_utils7.CustomRender;
-  fallback: _gx_design_vue_pro_utils7.CustomRender;
-  preview: boolean;
-  src: string;
-  alt: string;
-  fit: "fill" | "contain" | "none" | "cover" | "scale-down";
-  imageStyle: CSSProperties;
-}, SlotsType<{
-  default: () => void;
-  mask: () => void;
-  close: () => void;
-  left: () => void;
-  right: () => void;
-  countRender: () => void;
-  rotateRight: () => void;
-  zoomIn: () => void;
-  zoomOut: () => void;
-  flipX: () => void;
-  flipY: () => void;
-  rotateLeft: () => void;
-  fallback: () => void;
-  placeholder: () => void;
-}>, {}, {}, string, vue46.ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { GImageProps, GImage as default };