@gx-design-vue/image 0.2.0-beta.25 → 0.2.0-beta.27

package/dist/Image.d.ts

@@ -1,23 +1,9 @@
 import type { CSSProperties, ExtractPropTypes, SlotsType } from 'vue';
-import { imagePorps } from './props';
-export type GImageProps = Partial<ExtractPropTypes<typeof imagePorps>>;
+import { imageProps } from './props';
+export type GImageProps = Partial<ExtractPropTypes<typeof imageProps>>;
 declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
     preview: {
-        type: import("vue").PropType<import("./ImagePreview/props").BaseImagePreviewProps>;
-        default: () => Partial<{
-            previewUrls: string[];
-            disabled: boolean;
-            zIndex: number;
-            current: number;
-            infinite: boolean;
-            getContainer: string;
-            onHideOnClickModal: boolean;
-            countRender: import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>;
-            icons: import(".").PreviewPropsIcons;
-        }>;
-    };
-    showPreview: {
-        type: import("vue").PropType<boolean>;
+        type: import("vue").PropType<import(".").BaseImagePreviewProps | boolean>;
         default: boolean;
     };
     src: {
@@ -28,10 +14,16 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    loading: {
+        type: import("vue").PropType<"eager" | "lazy">;
+    };
     fit: {
         type: import("vue").PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
         default: string;
     };
+    crossorigin: {
+        type: import("vue").PropType<"anonymous" | "use-credentials" | "">;
+    };
     lazy: import("vue").PropType<boolean>;
     scrollContainer: {
         type: import("vue").PropType<string | HTMLElement | undefined>;
@@ -53,8 +45,11 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
     onClick: {
         type: import("vue").PropType<(info: any) => void>;
     };
-    imageClassName: import("vue").PropType<string>;
-    imageStyle: import("vue").PropType<CSSProperties>;
+    wrapperStyle: {
+        type: import("vue").PropType<CSSProperties>;
+        default: () => {};
+    };
+    wrapperClass: import("vue").PropType<string>;
     width: import("vue").PropType<number>;
     height: import("vue").PropType<number>;
     zIndex: {
@@ -64,23 +59,13 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
     getContainer: {
         type: import("vue").PropType<string>;
     };
-}>, () => import("ant-design-vue/es/_util/type").VueNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "error" | "load")[], "click" | "error" | "load", import("vue").PublicProps, Readonly<ExtractPropTypes<{
+}>, () => import("ant-design-vue/es/_util/type").VueNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => true;
+    load: (_event: Event) => true;
+    error: (_event: Event) => true;
+}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
     preview: {
-        type: import("vue").PropType<import("./ImagePreview/props").BaseImagePreviewProps>;
-        default: () => Partial<{
-            previewUrls: string[];
-            disabled: boolean;
-            zIndex: number;
-            current: number;
-            infinite: boolean;
-            getContainer: string;
-            onHideOnClickModal: boolean;
-            countRender: import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>;
-            icons: import(".").PreviewPropsIcons;
-        }>;
-    };
-    showPreview: {
-        type: import("vue").PropType<boolean>;
+        type: import("vue").PropType<import(".").BaseImagePreviewProps | boolean>;
         default: boolean;
     };
     src: {
@@ -91,10 +76,16 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    loading: {
+        type: import("vue").PropType<"eager" | "lazy">;
+    };
     fit: {
         type: import("vue").PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
         default: string;
     };
+    crossorigin: {
+        type: import("vue").PropType<"anonymous" | "use-credentials" | "">;
+    };
     lazy: import("vue").PropType<boolean>;
     scrollContainer: {
         type: import("vue").PropType<string | HTMLElement | undefined>;
@@ -116,8 +107,11 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
     onClick: {
         type: import("vue").PropType<(info: any) => void>;
     };
-    imageClassName: import("vue").PropType<string>;
-    imageStyle: import("vue").PropType<CSSProperties>;
+    wrapperStyle: {
+        type: import("vue").PropType<CSSProperties>;
+        default: () => {};
+    };
+    wrapperClass: import("vue").PropType<string>;
     width: import("vue").PropType<number>;
     height: import("vue").PropType<number>;
     zIndex: {
@@ -128,13 +122,14 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
         type: import("vue").PropType<string>;
     };
 }>> & Readonly<{
-    onLoad?: ((...args: any[]) => any) | undefined;
-    onError?: ((...args: any[]) => any) | undefined;
-    onClick?: ((...args: any[]) => any) | undefined;
+    onClick?: (() => any) | undefined;
+    onError?: ((_event: Event) => any) | undefined;
+    onLoad?: ((_event: Event) => any) | undefined;
 }>, {
     zIndex: number;
-    preview: Partial<{
-        previewUrls: string[];
+    placeholder: import("@gx-design-vue/pro-utils/dist").CustomRender;
+    preview: boolean | Partial<{
+        urls: string[];
         disabled: boolean;
         zIndex: number;
         current: number;
@@ -144,12 +139,11 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
         countRender: import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>;
         icons: import(".").PreviewPropsIcons;
     }>;
-    showPreview: boolean;
     src: string;
     alt: string;
-    fit: "contain" | "fill" | "none" | "cover" | "scale-down";
-    placeholder: import("@gx-design-vue/pro-utils/dist").CustomRender;
+    fit: "fill" | "contain" | "cover" | "none" | "scale-down";
     fallback: import("@gx-design-vue/pro-utils/dist").CustomRender;
+    wrapperStyle: CSSProperties;
 }, SlotsType<{
     default(): void;
     close(): void;

package/dist/ImagePreview/Operations.d.ts

@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     tools: PropType<ImagePreviewTools[]>;
     onClose: PropType<() => void>;
     onActive: PropType<(offset: number) => void>;
-}>, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     open: PropType<boolean>;
     count: {
         type: PropType<number>;
@@ -68,8 +68,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onActive: PropType<(offset: number) => void>;
 }>> & Readonly<{}>, {
     zIndex: number;
-    infinite: boolean;
     current: number;
+    infinite: boolean;
     icons: import("./props").PreviewPropsIcons;
     count: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/ImagePreview/hooks/getFixScaleEleTransPosition.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Fix positon x,y point when
+ *
+ * Ele width && height < client
+ * - Back origin
+ *
+ * - Ele width | height > clientWidth | clientHeight
+ * - left | top > 0 -> Back 0
+ * - left | top + width | height < clientWidth | clientHeight -> Back left | top + width | height === clientWidth | clientHeight
+ *
+ * Regardless of other
+ */
+export default function getFixScaleEleTransPosition(width: number, height: number, left: number, top: number): null | {
+    x: number;
+    y: number;
+};

package/dist/ImagePreview/hooks/useImageTransform.d.ts

@@ -0,0 +1,35 @@
+import type { Ref } from 'vue';
+export interface TransformType {
+    x: number;
+    y: number;
+    rotate: number;
+    scale: number;
+    flipX: boolean;
+    flipY: boolean;
+}
+export type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound' | 'touchZoom' | 'reset';
+export type UpdateTransformFunc = (newTransform: Partial<TransformType>, action: TransformAction) => void;
+export type DispatchZoomChangeFunc = (ratio: number, action: TransformAction, centerX?: number, centerY?: number, isTouch?: boolean) => void;
+export default function useImageTransform(imgRef: Ref<HTMLImageElement>, minScale: Ref<number>, maxScale: Ref<number>, onTransform?: (info: {
+    transform: TransformType;
+    action: TransformAction;
+}) => void): {
+    transform: Ref<{
+        x: number;
+        y: number;
+        rotate: number;
+        scale: number;
+        flipX: boolean;
+        flipY: boolean;
+    }, {
+        x: number;
+        y: number;
+        rotate: number;
+        scale: number;
+        flipX: boolean;
+        flipY: boolean;
+    }>;
+    resetTransform: (action: TransformAction) => void;
+    updateTransform: UpdateTransformFunc;
+    dispatchZoomChange: DispatchZoomChangeFunc;
+};

package/dist/ImagePreview/hooks/useMouseEvent.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'vue';
+import type { MouseEventHandler } from '../typings';
+import type { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from './useImageTransform';
+export default function useMouseEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, visible: Ref<boolean>, scaleStep: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
+    isMoving: Ref<boolean, boolean>;
+    onMouseDown: MouseEventHandler;
+    onMouseMove: MouseEventHandler;
+    onMouseUp: MouseEventHandler;
+    onWheel: (event: WheelEvent) => void;
+};

package/dist/ImagePreview/hooks/useTouchEvent.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from 'vue';
+import type { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from './useImageTransform';
+export default function useTouchEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, visible: Ref<boolean>, minScale: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
+    isTouching: Ref<boolean, boolean>;
+    onTouchStart: (event: TouchEvent) => void;
+    onTouchMove: (event: TouchEvent) => void;
+    onTouchEnd: () => void;
+};

package/dist/ImagePreview/index.d.ts

@@ -1,12 +1,34 @@
-import type { ExtractPropTypes } from 'vue';
-import imagePreviewProps, { type PreviewPropsIcons } from './props';
+import type { ExtractPropTypes, SlotsType } from 'vue';
+import type { TransformAction, TransformType } from './hooks/useImageTransform';
+import type { PreviewPropsIcons } from './props';
+import imagePreviewProps from './props';
 export declare const slotsNames: string[];
 export type ImagePreviewProps = Partial<ExtractPropTypes<typeof imagePreviewProps>>;
-declare const ImagePreview: import("vue").DefineComponent<ExtractPropTypes<{
-    previewUrls: {
+declare const GImagePreview: import("vue").DefineComponent<ExtractPropTypes<{
+    urls: {
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
+    open: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    scaleStep: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    minScale: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    maxScale: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    movable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     disabled: import("vue").PropType<boolean>;
     zIndex: {
         type: import("vue").PropType<number>;
@@ -32,11 +54,44 @@ declare const ImagePreview: import("vue").DefineComponent<ExtractPropTypes<{
         type: import("vue").PropType<PreviewPropsIcons>;
         default: () => PreviewPropsIcons;
     };
-}>, () => import("ant-design-vue/es/_util/type").VueNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "switch" | "afterClose")[], "close" | "switch" | "afterClose", import("vue").PublicProps, Readonly<ExtractPropTypes<{
-    previewUrls: {
+    onTransform: import("vue").PropType<(info: {
+        transform: TransformType;
+        action: TransformAction;
+    }) => void>;
+    onOpenChange: import("vue").PropType<(val: boolean) => void>;
+    'onUpdate:open': import("vue").PropType<(val: boolean) => void>;
+}>, () => import("ant-design-vue/es/_util/type").VueNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => true;
+    transform: (_info: {
+        transform: TransformType;
+        action: TransformAction;
+    }) => true;
+    'update:open': (_val: boolean) => true;
+}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
+    urls: {
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
+    open: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    scaleStep: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    minScale: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    maxScale: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    movable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     disabled: import("vue").PropType<boolean>;
     zIndex: {
         type: import("vue").PropType<number>;
@@ -62,16 +117,41 @@ declare const ImagePreview: import("vue").DefineComponent<ExtractPropTypes<{
         type: import("vue").PropType<PreviewPropsIcons>;
         default: () => PreviewPropsIcons;
     };
+    onTransform: import("vue").PropType<(info: {
+        transform: TransformType;
+        action: TransformAction;
+    }) => void>;
+    onOpenChange: import("vue").PropType<(val: boolean) => void>;
+    'onUpdate:open': import("vue").PropType<(val: boolean) => void>;
 }>> & Readonly<{
-    onClose?: ((...args: any[]) => any) | undefined;
-    onSwitch?: ((...args: any[]) => any) | undefined;
-    onAfterClose?: ((...args: any[]) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onTransform?: ((_info: {
+        transform: TransformType;
+        action: TransformAction;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((_val: boolean) => any) | undefined;
 }>, {
+    urls: string[];
     zIndex: number;
-    infinite: boolean;
-    previewUrls: string[];
     current: number;
+    infinite: boolean;
     onHideOnClickModal: boolean;
     icons: PreviewPropsIcons;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default ImagePreview;
+    open: boolean;
+    scaleStep: number;
+    minScale: number;
+    maxScale: number;
+    movable: boolean;
+}, SlotsType<{
+    close(): void;
+    left(): void;
+    right(): void;
+    rotateRight(): void;
+    rotateRight(): void;
+    zoomOut(): void;
+    flipX(): void;
+    flipY(): void;
+    rotateLeft(): void;
+    placeholder(): void;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default GImagePreview;

package/dist/ImagePreview/props.d.ts

@@ -1,6 +1,7 @@
-import type { PropType, VNode } from 'vue';
 import type { CustomRender, WithFalse } from '@gx-design-vue/pro-utils';
-export type PreviewPropsIcons = {
+import type { PropType, VNode } from 'vue';
+import type { TransformAction, TransformType } from './hooks/useImageTransform';
+export interface PreviewPropsIcons {
     close?: VNode;
     rotateLeft?: VNode;
     rotateRight?: VNode;
@@ -10,9 +11,9 @@ export type PreviewPropsIcons = {
     right?: VNode;
     flipX?: VNode;
     flipY?: VNode;
-};
+}
 export type BaseImagePreviewProps = Partial<{
-    previewUrls: string[];
+    urls: string[];
     disabled: boolean;
     zIndex: number;
     current: number;
@@ -23,10 +24,30 @@ export type BaseImagePreviewProps = Partial<{
     icons: PreviewPropsIcons;
 }>;
 declare const _default: {
-    previewUrls: {
+    urls: {
         type: PropType<string[]>;
         default: () => never[];
     };
+    open: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    scaleStep: {
+        type: PropType<number>;
+        default: number;
+    };
+    minScale: {
+        type: PropType<number>;
+        default: number;
+    };
+    maxScale: {
+        type: PropType<number>;
+        default: number;
+    };
+    movable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     disabled: PropType<boolean>;
     zIndex: {
         type: PropType<number>;
@@ -52,5 +73,11 @@ declare const _default: {
         type: PropType<PreviewPropsIcons>;
         default: () => PreviewPropsIcons;
     };
+    onTransform: PropType<(info: {
+        transform: TransformType;
+        action: TransformAction;
+    }) => void>;
+    onOpenChange: PropType<(val: boolean) => void>;
+    'onUpdate:open': PropType<(val: boolean) => void>;
 };
 export default _default;

package/dist/ImagePreview/style.d.ts

@@ -1,5 +1,5 @@
-import type { CSSObject } from 'ant-design-vue';
 import type { ProAliasToken } from '@gx-design-vue/pro-provider';
+import type { CSSObject } from 'ant-design-vue';
 import { Keyframe } from '@gx-design-vue/pro-provider';
 export interface ImageToken extends ProAliasToken {
     previewCls: string;

package/dist/ImagePreview/typings.d.ts

@@ -1,7 +1,6 @@
 import type { ComputedRef, VNode } from 'vue';
 import type { PreviewPropsIcons } from './props';
 export type MouseEventHandler = (e: MouseEvent) => void;
-export type WheelEventHandler = (e: WheelEvent) => void;
 export interface PreviewUrl {
     url: string;
     loading: boolean;

package/dist/ImagePreview/utils/util.d.ts

@@ -1,12 +1,4 @@
-export declare function getOffset(node: any): {
-    left: number;
-    top: number;
-};
-export declare function getClientSize(): {
-    width: number;
-    height: number;
-};
-export declare function getFixScaleEleTransPosition(width: number, height: number, left: number, top: number): null | {
-    x: number;
-    y: number;
-};
+/** Scale the ratio base */
+export declare const BASE_SCALE_RATIO = 1;
+/** The maximum zoom ratio when the mouse zooms in, adjustable */
+export declare const WHEEL_MAX_SCALE_RATIO = 1;