@gx-design-vue/image 0.2.0-beta.3 → 0.2.0-beta.31
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.d.ts +83 -105
- package/dist/ImagePreview/Operations.d.ts +76 -0
- package/dist/ImagePreview/hooks/getFixScaleEleTransPosition.d.ts +16 -0
- package/dist/ImagePreview/hooks/useImageTransform.d.ts +35 -0
- package/dist/ImagePreview/hooks/useMouseEvent.d.ts +10 -0
- package/dist/ImagePreview/hooks/useTouchEvent.d.ts +8 -0
- package/dist/ImagePreview/index.d.ts +157 -0
- package/dist/ImagePreview/props.d.ts +85 -0
- package/dist/{components → ImagePreview}/style.d.ts +10 -6
- package/dist/ImagePreview/typings.d.ts +15 -0
- package/dist/ImagePreview/utils/KeyCode.d.ts +436 -0
- package/dist/ImagePreview/utils/addEventListener.d.ts +3 -0
- package/dist/ImagePreview/utils/util.d.ts +4 -0
- package/dist/hooks/raf.d.ts +5 -0
- package/dist/hooks/useFrameSetState.d.ts +3 -0
- package/dist/image.js +1250 -0
- package/dist/image.umd.cjs +12 -0
- package/dist/index.d.ts +7 -3
- package/dist/props.d.ts +36 -83
- package/dist/slots.d.ts +3 -0
- package/dist/style.d.ts +6 -5
- package/dist/typings.d.ts +2 -0
- package/dist/utils/util.d.ts +1 -0
- package/package.json +27 -50
- package/dist/components/ImageViewer.d.ts +0 -193
- package/dist/image.mjs +0 -1495
- package/dist/image.umd.js +0 -2
package/dist/Image.d.ts
CHANGED
|
@@ -1,20 +1,11 @@
|
|
|
1
|
-
import type { CSSProperties, ExtractPropTypes } from 'vue';
|
|
2
|
-
import {
|
|
3
|
-
export type GImageProps = Partial<ExtractPropTypes<typeof
|
|
4
|
-
declare const GImage: import("vue").DefineComponent<{
|
|
5
|
-
|
|
6
|
-
type: import("vue").PropType<boolean>;
|
|
1
|
+
import type { CSSProperties, ExtractPropTypes, SlotsType } from 'vue';
|
|
2
|
+
import { imageProps } from './props';
|
|
3
|
+
export type GImageProps = Partial<ExtractPropTypes<typeof imageProps>>;
|
|
4
|
+
declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
|
|
5
|
+
preview: {
|
|
6
|
+
type: import("vue").PropType<import(".").BaseImagePreviewProps | boolean>;
|
|
7
7
|
default: boolean;
|
|
8
8
|
};
|
|
9
|
-
hideOnClickModal: {
|
|
10
|
-
type: import("vue").PropType<boolean>;
|
|
11
|
-
default: boolean;
|
|
12
|
-
};
|
|
13
|
-
wrapperClassName: StringConstructor;
|
|
14
|
-
wrapperStyle: {
|
|
15
|
-
type: import("vue").PropType<CSSProperties>;
|
|
16
|
-
default: undefined;
|
|
17
|
-
};
|
|
18
9
|
src: {
|
|
19
10
|
type: import("vue").PropType<string>;
|
|
20
11
|
default: string;
|
|
@@ -23,22 +14,26 @@ declare const GImage: import("vue").DefineComponent<{
|
|
|
23
14
|
type: import("vue").PropType<string>;
|
|
24
15
|
default: string;
|
|
25
16
|
};
|
|
17
|
+
loading: {
|
|
18
|
+
type: import("vue").PropType<"eager" | "lazy">;
|
|
19
|
+
};
|
|
26
20
|
fit: {
|
|
27
|
-
type: import("vue").PropType<"
|
|
21
|
+
type: import("vue").PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
|
|
28
22
|
default: string;
|
|
29
23
|
};
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
crossOrigin: {
|
|
25
|
+
type: import("vue").PropType<"anonymous" | "use-credentials" | "">;
|
|
32
26
|
};
|
|
27
|
+
lazy: import("vue").PropType<boolean>;
|
|
33
28
|
scrollContainer: {
|
|
34
29
|
type: import("vue").PropType<string | HTMLElement | undefined>;
|
|
35
30
|
};
|
|
36
31
|
placeholder: {
|
|
37
|
-
type: import("vue").PropType<import("@gx-design-vue/pro-utils").WithFalse<
|
|
32
|
+
type: import("vue").PropType<import("@gx-design-vue/pro-utils/dist").WithFalse<import("@gx-design-vue/pro-utils/dist").CustomRender>>;
|
|
38
33
|
default: () => undefined;
|
|
39
34
|
};
|
|
40
35
|
fallback: {
|
|
41
|
-
type: import("vue").PropType<import("@gx-design-vue/pro-utils").WithFalse<
|
|
36
|
+
type: import("vue").PropType<import("@gx-design-vue/pro-utils/dist").WithFalse<import("@gx-design-vue/pro-utils/dist").CustomRender>>;
|
|
42
37
|
default: () => undefined;
|
|
43
38
|
};
|
|
44
39
|
onLoad: {
|
|
@@ -50,52 +45,30 @@ declare const GImage: import("vue").DefineComponent<{
|
|
|
50
45
|
onClick: {
|
|
51
46
|
type: import("vue").PropType<(info: any) => void>;
|
|
52
47
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
previewSrcList: {
|
|
57
|
-
type: import("vue").PropType<string[]>;
|
|
58
|
-
default: () => string[];
|
|
59
|
-
};
|
|
60
|
-
imageClassName: import("vue-types").VueTypeValidableDef<string> & {
|
|
61
|
-
default: string;
|
|
62
|
-
};
|
|
63
|
-
imageStyle: import("vue-types").VueTypeValidableDef<CSSProperties>;
|
|
64
|
-
width: import("vue-types").VueTypeValidableDef<number> & {
|
|
65
|
-
default: number;
|
|
66
|
-
};
|
|
67
|
-
height: import("vue-types").VueTypeValidableDef<number> & {
|
|
68
|
-
default: number;
|
|
48
|
+
imageStyle: {
|
|
49
|
+
type: import("vue").PropType<CSSProperties>;
|
|
50
|
+
default: () => {};
|
|
69
51
|
};
|
|
52
|
+
imageClass: import("vue").PropType<string>;
|
|
53
|
+
size: import("vue").PropType<number>;
|
|
54
|
+
width: import("vue").PropType<number>;
|
|
55
|
+
height: import("vue").PropType<number>;
|
|
70
56
|
zIndex: {
|
|
71
57
|
type: import("vue").PropType<number>;
|
|
72
58
|
default: number;
|
|
73
59
|
};
|
|
74
|
-
infinite: {
|
|
75
|
-
type: import("vue").PropType<boolean>;
|
|
76
|
-
default: boolean;
|
|
77
|
-
};
|
|
78
60
|
getContainer: {
|
|
79
61
|
type: import("vue").PropType<string>;
|
|
80
62
|
};
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
type: import("vue").PropType<boolean>;
|
|
63
|
+
}>, () => import("ant-design-vue/es/_util/type").VueNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
64
|
+
click: () => true;
|
|
65
|
+
load: (_event: Event) => true;
|
|
66
|
+
error: (_event: Event) => true;
|
|
67
|
+
}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
|
|
68
|
+
preview: {
|
|
69
|
+
type: import("vue").PropType<import(".").BaseImagePreviewProps | boolean>;
|
|
88
70
|
default: boolean;
|
|
89
71
|
};
|
|
90
|
-
hideOnClickModal: {
|
|
91
|
-
type: import("vue").PropType<boolean>;
|
|
92
|
-
default: boolean;
|
|
93
|
-
};
|
|
94
|
-
wrapperClassName: StringConstructor;
|
|
95
|
-
wrapperStyle: {
|
|
96
|
-
type: import("vue").PropType<CSSProperties>;
|
|
97
|
-
default: undefined;
|
|
98
|
-
};
|
|
99
72
|
src: {
|
|
100
73
|
type: import("vue").PropType<string>;
|
|
101
74
|
default: string;
|
|
@@ -104,22 +77,26 @@ declare const GImage: import("vue").DefineComponent<{
|
|
|
104
77
|
type: import("vue").PropType<string>;
|
|
105
78
|
default: string;
|
|
106
79
|
};
|
|
80
|
+
loading: {
|
|
81
|
+
type: import("vue").PropType<"eager" | "lazy">;
|
|
82
|
+
};
|
|
107
83
|
fit: {
|
|
108
|
-
type: import("vue").PropType<"
|
|
84
|
+
type: import("vue").PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
|
|
109
85
|
default: string;
|
|
110
86
|
};
|
|
111
|
-
|
|
112
|
-
|
|
87
|
+
crossOrigin: {
|
|
88
|
+
type: import("vue").PropType<"anonymous" | "use-credentials" | "">;
|
|
113
89
|
};
|
|
90
|
+
lazy: import("vue").PropType<boolean>;
|
|
114
91
|
scrollContainer: {
|
|
115
92
|
type: import("vue").PropType<string | HTMLElement | undefined>;
|
|
116
93
|
};
|
|
117
94
|
placeholder: {
|
|
118
|
-
type: import("vue").PropType<import("@gx-design-vue/pro-utils").WithFalse<
|
|
95
|
+
type: import("vue").PropType<import("@gx-design-vue/pro-utils/dist").WithFalse<import("@gx-design-vue/pro-utils/dist").CustomRender>>;
|
|
119
96
|
default: () => undefined;
|
|
120
97
|
};
|
|
121
98
|
fallback: {
|
|
122
|
-
type: import("vue").PropType<import("@gx-design-vue/pro-utils").WithFalse<
|
|
99
|
+
type: import("vue").PropType<import("@gx-design-vue/pro-utils/dist").WithFalse<import("@gx-design-vue/pro-utils/dist").CustomRender>>;
|
|
123
100
|
default: () => undefined;
|
|
124
101
|
};
|
|
125
102
|
onLoad: {
|
|
@@ -131,59 +108,60 @@ declare const GImage: import("vue").DefineComponent<{
|
|
|
131
108
|
onClick: {
|
|
132
109
|
type: import("vue").PropType<(info: any) => void>;
|
|
133
110
|
};
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
previewSrcList: {
|
|
138
|
-
type: import("vue").PropType<string[]>;
|
|
139
|
-
default: () => string[];
|
|
140
|
-
};
|
|
141
|
-
imageClassName: import("vue-types").VueTypeValidableDef<string> & {
|
|
142
|
-
default: string;
|
|
143
|
-
};
|
|
144
|
-
imageStyle: import("vue-types").VueTypeValidableDef<CSSProperties>;
|
|
145
|
-
width: import("vue-types").VueTypeValidableDef<number> & {
|
|
146
|
-
default: number;
|
|
147
|
-
};
|
|
148
|
-
height: import("vue-types").VueTypeValidableDef<number> & {
|
|
149
|
-
default: number;
|
|
111
|
+
imageStyle: {
|
|
112
|
+
type: import("vue").PropType<CSSProperties>;
|
|
113
|
+
default: () => {};
|
|
150
114
|
};
|
|
115
|
+
imageClass: import("vue").PropType<string>;
|
|
116
|
+
size: import("vue").PropType<number>;
|
|
117
|
+
width: import("vue").PropType<number>;
|
|
118
|
+
height: import("vue").PropType<number>;
|
|
151
119
|
zIndex: {
|
|
152
120
|
type: import("vue").PropType<number>;
|
|
153
121
|
default: number;
|
|
154
122
|
};
|
|
155
|
-
infinite: {
|
|
156
|
-
type: import("vue").PropType<boolean>;
|
|
157
|
-
default: boolean;
|
|
158
|
-
};
|
|
159
123
|
getContainer: {
|
|
160
124
|
type: import("vue").PropType<string>;
|
|
161
125
|
};
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
}
|
|
167
|
-
onLoad?: ((...args: any[]) => any) | undefined;
|
|
168
|
-
onError?: ((...args: any[]) => any) | undefined;
|
|
169
|
-
onClick?: ((...args: any[]) => any) | undefined;
|
|
170
|
-
}, {
|
|
171
|
-
height: number;
|
|
172
|
-
width: number;
|
|
126
|
+
}>> & Readonly<{
|
|
127
|
+
onClick?: (() => any) | undefined;
|
|
128
|
+
onError?: ((_event: Event) => any) | undefined;
|
|
129
|
+
onLoad?: ((_event: Event) => any) | undefined;
|
|
130
|
+
}>, {
|
|
173
131
|
zIndex: number;
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
132
|
+
placeholder: import("@gx-design-vue/pro-utils/dist").CustomRender;
|
|
133
|
+
preview: boolean | Partial<{
|
|
134
|
+
urls: string[];
|
|
135
|
+
mask: import("vue").VNode | boolean;
|
|
136
|
+
maskClass: string;
|
|
137
|
+
disabled: boolean;
|
|
138
|
+
zIndex: number;
|
|
139
|
+
current: number;
|
|
140
|
+
infinite: boolean;
|
|
141
|
+
getContainer: string;
|
|
142
|
+
onHideOnClickModal: boolean;
|
|
143
|
+
countRender: import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>;
|
|
144
|
+
icons: import(".").PreviewPropsIcons;
|
|
145
|
+
}>;
|
|
179
146
|
src: string;
|
|
180
147
|
alt: string;
|
|
181
|
-
fit: "
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
148
|
+
fit: "fill" | "contain" | "cover" | "none" | "scale-down";
|
|
149
|
+
fallback: import("@gx-design-vue/pro-utils/dist").CustomRender;
|
|
150
|
+
imageStyle: CSSProperties;
|
|
151
|
+
}, SlotsType<{
|
|
152
|
+
default(): void;
|
|
153
|
+
mask(): void;
|
|
154
|
+
close(): void;
|
|
155
|
+
left(): void;
|
|
156
|
+
right(): void;
|
|
157
|
+
countRender(): void;
|
|
158
|
+
rotateRight(): void;
|
|
159
|
+
zoomIn(): void;
|
|
160
|
+
zoomOut(): void;
|
|
161
|
+
flipX(): void;
|
|
162
|
+
flipY(): void;
|
|
163
|
+
rotateLeft(): void;
|
|
164
|
+
fallback(): void;
|
|
165
|
+
placeholder(): void;
|
|
166
|
+
}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
189
167
|
export default GImage;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import type { PropType } from 'vue';
|
|
2
|
+
import type { ImagePreviewTools } from './typings';
|
|
3
|
+
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
4
|
+
open: PropType<boolean>;
|
|
5
|
+
count: {
|
|
6
|
+
type: PropType<number>;
|
|
7
|
+
default: number;
|
|
8
|
+
};
|
|
9
|
+
current: {
|
|
10
|
+
type: PropType<number>;
|
|
11
|
+
default: number;
|
|
12
|
+
};
|
|
13
|
+
showSwitch: PropType<boolean>;
|
|
14
|
+
showProgress: PropType<boolean>;
|
|
15
|
+
prefixCls: PropType<string>;
|
|
16
|
+
hashId: PropType<string>;
|
|
17
|
+
zIndex: {
|
|
18
|
+
type: PropType<number>;
|
|
19
|
+
default: number;
|
|
20
|
+
};
|
|
21
|
+
icons: {
|
|
22
|
+
type: PropType<import("./props").PreviewPropsIcons>;
|
|
23
|
+
default: () => import("./props").PreviewPropsIcons;
|
|
24
|
+
};
|
|
25
|
+
infinite: {
|
|
26
|
+
type: PropType<boolean>;
|
|
27
|
+
default: boolean;
|
|
28
|
+
};
|
|
29
|
+
getContainer: {
|
|
30
|
+
type: PropType<string>;
|
|
31
|
+
};
|
|
32
|
+
countRender: PropType<import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>>;
|
|
33
|
+
tools: PropType<ImagePreviewTools[]>;
|
|
34
|
+
onClose: PropType<() => void>;
|
|
35
|
+
onActive: PropType<(offset: number) => void>;
|
|
36
|
+
}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
37
|
+
open: PropType<boolean>;
|
|
38
|
+
count: {
|
|
39
|
+
type: PropType<number>;
|
|
40
|
+
default: number;
|
|
41
|
+
};
|
|
42
|
+
current: {
|
|
43
|
+
type: PropType<number>;
|
|
44
|
+
default: number;
|
|
45
|
+
};
|
|
46
|
+
showSwitch: PropType<boolean>;
|
|
47
|
+
showProgress: PropType<boolean>;
|
|
48
|
+
prefixCls: PropType<string>;
|
|
49
|
+
hashId: PropType<string>;
|
|
50
|
+
zIndex: {
|
|
51
|
+
type: PropType<number>;
|
|
52
|
+
default: number;
|
|
53
|
+
};
|
|
54
|
+
icons: {
|
|
55
|
+
type: PropType<import("./props").PreviewPropsIcons>;
|
|
56
|
+
default: () => import("./props").PreviewPropsIcons;
|
|
57
|
+
};
|
|
58
|
+
infinite: {
|
|
59
|
+
type: PropType<boolean>;
|
|
60
|
+
default: boolean;
|
|
61
|
+
};
|
|
62
|
+
getContainer: {
|
|
63
|
+
type: PropType<string>;
|
|
64
|
+
};
|
|
65
|
+
countRender: PropType<import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>>;
|
|
66
|
+
tools: PropType<ImagePreviewTools[]>;
|
|
67
|
+
onClose: PropType<() => void>;
|
|
68
|
+
onActive: PropType<(offset: number) => void>;
|
|
69
|
+
}>> & Readonly<{}>, {
|
|
70
|
+
zIndex: number;
|
|
71
|
+
current: number;
|
|
72
|
+
infinite: boolean;
|
|
73
|
+
icons: import("./props").PreviewPropsIcons;
|
|
74
|
+
count: number;
|
|
75
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
76
|
+
export default _default;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Fix positon x,y point when
|
|
3
|
+
*
|
|
4
|
+
* Ele width && height < client
|
|
5
|
+
* - Back origin
|
|
6
|
+
*
|
|
7
|
+
* - Ele width | height > clientWidth | clientHeight
|
|
8
|
+
* - left | top > 0 -> Back 0
|
|
9
|
+
* - left | top + width | height < clientWidth | clientHeight -> Back left | top + width | height === clientWidth | clientHeight
|
|
10
|
+
*
|
|
11
|
+
* Regardless of other
|
|
12
|
+
*/
|
|
13
|
+
export default function getFixScaleEleTransPosition(width: number, height: number, left: number, top: number): null | {
|
|
14
|
+
x: number;
|
|
15
|
+
y: number;
|
|
16
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { Ref } from 'vue';
|
|
2
|
+
export interface TransformType {
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
rotate: number;
|
|
6
|
+
scale: number;
|
|
7
|
+
flipX: boolean;
|
|
8
|
+
flipY: boolean;
|
|
9
|
+
}
|
|
10
|
+
export type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound' | 'touchZoom' | 'reset';
|
|
11
|
+
export type UpdateTransformFunc = (newTransform: Partial<TransformType>, action: TransformAction) => void;
|
|
12
|
+
export type DispatchZoomChangeFunc = (ratio: number, action: TransformAction, centerX?: number, centerY?: number, isTouch?: boolean) => void;
|
|
13
|
+
export default function useImageTransform(imgRef: Ref<HTMLImageElement>, minScale: Ref<number>, maxScale: Ref<number>, onTransform?: (info: {
|
|
14
|
+
transform: TransformType;
|
|
15
|
+
action: TransformAction;
|
|
16
|
+
}) => void): {
|
|
17
|
+
transform: Ref<{
|
|
18
|
+
x: number;
|
|
19
|
+
y: number;
|
|
20
|
+
rotate: number;
|
|
21
|
+
scale: number;
|
|
22
|
+
flipX: boolean;
|
|
23
|
+
flipY: boolean;
|
|
24
|
+
}, {
|
|
25
|
+
x: number;
|
|
26
|
+
y: number;
|
|
27
|
+
rotate: number;
|
|
28
|
+
scale: number;
|
|
29
|
+
flipX: boolean;
|
|
30
|
+
flipY: boolean;
|
|
31
|
+
}>;
|
|
32
|
+
resetTransform: (action: TransformAction) => void;
|
|
33
|
+
updateTransform: UpdateTransformFunc;
|
|
34
|
+
dispatchZoomChange: DispatchZoomChangeFunc;
|
|
35
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Ref } from 'vue';
|
|
2
|
+
import type { MouseEventHandler } from '../typings';
|
|
3
|
+
import type { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from './useImageTransform';
|
|
4
|
+
export default function useMouseEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, visible: Ref<boolean>, scaleStep: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
|
|
5
|
+
isMoving: Ref<boolean, boolean>;
|
|
6
|
+
onMouseDown: MouseEventHandler;
|
|
7
|
+
onMouseMove: MouseEventHandler;
|
|
8
|
+
onMouseUp: MouseEventHandler;
|
|
9
|
+
onWheel: (event: WheelEvent) => void;
|
|
10
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Ref } from 'vue';
|
|
2
|
+
import type { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from './useImageTransform';
|
|
3
|
+
export default function useTouchEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, visible: Ref<boolean>, minScale: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
|
|
4
|
+
isTouching: Ref<boolean, boolean>;
|
|
5
|
+
onTouchStart: (event: TouchEvent) => void;
|
|
6
|
+
onTouchMove: (event: TouchEvent) => void;
|
|
7
|
+
onTouchEnd: () => void;
|
|
8
|
+
};
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import type { ExtractPropTypes, SlotsType } from 'vue';
|
|
2
|
+
import type { TransformAction, TransformType } from './hooks/useImageTransform';
|
|
3
|
+
import type { PreviewPropsIcons } from './props';
|
|
4
|
+
import imagePreviewProps from './props';
|
|
5
|
+
export type ImagePreviewProps = Partial<ExtractPropTypes<typeof imagePreviewProps>>;
|
|
6
|
+
declare const GImagePreview: import("vue").DefineComponent<ExtractPropTypes<{
|
|
7
|
+
urls: {
|
|
8
|
+
type: import("vue").PropType<string[]>;
|
|
9
|
+
default: () => never[];
|
|
10
|
+
};
|
|
11
|
+
open: {
|
|
12
|
+
type: import("vue").PropType<boolean>;
|
|
13
|
+
default: boolean;
|
|
14
|
+
};
|
|
15
|
+
scaleStep: {
|
|
16
|
+
type: import("vue").PropType<number>;
|
|
17
|
+
default: number;
|
|
18
|
+
};
|
|
19
|
+
minScale: {
|
|
20
|
+
type: import("vue").PropType<number>;
|
|
21
|
+
default: number;
|
|
22
|
+
};
|
|
23
|
+
maxScale: {
|
|
24
|
+
type: import("vue").PropType<number>;
|
|
25
|
+
default: number;
|
|
26
|
+
};
|
|
27
|
+
movable: {
|
|
28
|
+
type: import("vue").PropType<boolean>;
|
|
29
|
+
default: boolean;
|
|
30
|
+
};
|
|
31
|
+
disabled: import("vue").PropType<boolean>;
|
|
32
|
+
zIndex: {
|
|
33
|
+
type: import("vue").PropType<number>;
|
|
34
|
+
default: number;
|
|
35
|
+
};
|
|
36
|
+
current: {
|
|
37
|
+
type: import("vue").PropType<number>;
|
|
38
|
+
default: number;
|
|
39
|
+
};
|
|
40
|
+
infinite: {
|
|
41
|
+
type: import("vue").PropType<boolean>;
|
|
42
|
+
default: boolean;
|
|
43
|
+
};
|
|
44
|
+
getContainer: {
|
|
45
|
+
type: import("vue").PropType<string>;
|
|
46
|
+
};
|
|
47
|
+
onHideOnClickModal: {
|
|
48
|
+
type: import("vue").PropType<boolean>;
|
|
49
|
+
default: boolean;
|
|
50
|
+
};
|
|
51
|
+
countRender: import("vue").PropType<import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>>;
|
|
52
|
+
icons: {
|
|
53
|
+
type: import("vue").PropType<PreviewPropsIcons>;
|
|
54
|
+
default: () => PreviewPropsIcons;
|
|
55
|
+
};
|
|
56
|
+
onTransform: import("vue").PropType<(info: {
|
|
57
|
+
transform: TransformType;
|
|
58
|
+
action: TransformAction;
|
|
59
|
+
}) => void>;
|
|
60
|
+
onOpenChange: import("vue").PropType<(val: boolean) => void>;
|
|
61
|
+
'onUpdate:open': import("vue").PropType<(val: boolean) => void>;
|
|
62
|
+
}>, () => import("ant-design-vue/es/_util/type").VueNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
63
|
+
close: () => true;
|
|
64
|
+
transform: (_info: {
|
|
65
|
+
transform: TransformType;
|
|
66
|
+
action: TransformAction;
|
|
67
|
+
}) => true;
|
|
68
|
+
'update:open': (_val: boolean) => true;
|
|
69
|
+
}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
|
|
70
|
+
urls: {
|
|
71
|
+
type: import("vue").PropType<string[]>;
|
|
72
|
+
default: () => never[];
|
|
73
|
+
};
|
|
74
|
+
open: {
|
|
75
|
+
type: import("vue").PropType<boolean>;
|
|
76
|
+
default: boolean;
|
|
77
|
+
};
|
|
78
|
+
scaleStep: {
|
|
79
|
+
type: import("vue").PropType<number>;
|
|
80
|
+
default: number;
|
|
81
|
+
};
|
|
82
|
+
minScale: {
|
|
83
|
+
type: import("vue").PropType<number>;
|
|
84
|
+
default: number;
|
|
85
|
+
};
|
|
86
|
+
maxScale: {
|
|
87
|
+
type: import("vue").PropType<number>;
|
|
88
|
+
default: number;
|
|
89
|
+
};
|
|
90
|
+
movable: {
|
|
91
|
+
type: import("vue").PropType<boolean>;
|
|
92
|
+
default: boolean;
|
|
93
|
+
};
|
|
94
|
+
disabled: import("vue").PropType<boolean>;
|
|
95
|
+
zIndex: {
|
|
96
|
+
type: import("vue").PropType<number>;
|
|
97
|
+
default: number;
|
|
98
|
+
};
|
|
99
|
+
current: {
|
|
100
|
+
type: import("vue").PropType<number>;
|
|
101
|
+
default: number;
|
|
102
|
+
};
|
|
103
|
+
infinite: {
|
|
104
|
+
type: import("vue").PropType<boolean>;
|
|
105
|
+
default: boolean;
|
|
106
|
+
};
|
|
107
|
+
getContainer: {
|
|
108
|
+
type: import("vue").PropType<string>;
|
|
109
|
+
};
|
|
110
|
+
onHideOnClickModal: {
|
|
111
|
+
type: import("vue").PropType<boolean>;
|
|
112
|
+
default: boolean;
|
|
113
|
+
};
|
|
114
|
+
countRender: import("vue").PropType<import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>>;
|
|
115
|
+
icons: {
|
|
116
|
+
type: import("vue").PropType<PreviewPropsIcons>;
|
|
117
|
+
default: () => PreviewPropsIcons;
|
|
118
|
+
};
|
|
119
|
+
onTransform: import("vue").PropType<(info: {
|
|
120
|
+
transform: TransformType;
|
|
121
|
+
action: TransformAction;
|
|
122
|
+
}) => void>;
|
|
123
|
+
onOpenChange: import("vue").PropType<(val: boolean) => void>;
|
|
124
|
+
'onUpdate:open': import("vue").PropType<(val: boolean) => void>;
|
|
125
|
+
}>> & Readonly<{
|
|
126
|
+
onClose?: (() => any) | undefined;
|
|
127
|
+
onTransform?: ((_info: {
|
|
128
|
+
transform: TransformType;
|
|
129
|
+
action: TransformAction;
|
|
130
|
+
}) => any) | undefined;
|
|
131
|
+
"onUpdate:open"?: ((_val: boolean) => any) | undefined;
|
|
132
|
+
}>, {
|
|
133
|
+
urls: string[];
|
|
134
|
+
zIndex: number;
|
|
135
|
+
current: number;
|
|
136
|
+
infinite: boolean;
|
|
137
|
+
onHideOnClickModal: boolean;
|
|
138
|
+
icons: PreviewPropsIcons;
|
|
139
|
+
open: boolean;
|
|
140
|
+
scaleStep: number;
|
|
141
|
+
minScale: number;
|
|
142
|
+
maxScale: number;
|
|
143
|
+
movable: boolean;
|
|
144
|
+
}, SlotsType<{
|
|
145
|
+
close(): void;
|
|
146
|
+
left(): void;
|
|
147
|
+
right(): void;
|
|
148
|
+
countRender(): void;
|
|
149
|
+
rotateRight(): void;
|
|
150
|
+
zoomIn(): void;
|
|
151
|
+
zoomOut(): void;
|
|
152
|
+
flipX(): void;
|
|
153
|
+
flipY(): void;
|
|
154
|
+
rotateLeft(): void;
|
|
155
|
+
placeholder(): void;
|
|
156
|
+
}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
157
|
+
export default GImagePreview;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import type { CustomRender, WithFalse } from '@gx-design-vue/pro-utils';
|
|
2
|
+
import type { PropType, VNode } from 'vue';
|
|
3
|
+
import type { TransformAction, TransformType } from './hooks/useImageTransform';
|
|
4
|
+
export interface PreviewPropsIcons {
|
|
5
|
+
close?: WithFalse<CustomRender>;
|
|
6
|
+
rotateLeft?: WithFalse<CustomRender>;
|
|
7
|
+
rotateRight?: WithFalse<CustomRender>;
|
|
8
|
+
zoomIn?: WithFalse<CustomRender>;
|
|
9
|
+
zoomOut?: WithFalse<CustomRender>;
|
|
10
|
+
left?: WithFalse<CustomRender>;
|
|
11
|
+
right?: WithFalse<CustomRender>;
|
|
12
|
+
flipX?: WithFalse<CustomRender>;
|
|
13
|
+
flipY?: WithFalse<CustomRender>;
|
|
14
|
+
}
|
|
15
|
+
export type BaseImagePreviewProps = Partial<{
|
|
16
|
+
urls: string[];
|
|
17
|
+
mask: VNode | boolean;
|
|
18
|
+
maskClass: string;
|
|
19
|
+
disabled: boolean;
|
|
20
|
+
zIndex: number;
|
|
21
|
+
current: number;
|
|
22
|
+
infinite: boolean;
|
|
23
|
+
getContainer: string;
|
|
24
|
+
onHideOnClickModal: boolean;
|
|
25
|
+
countRender: WithFalse<(current: number, total: number) => CustomRender>;
|
|
26
|
+
icons: PreviewPropsIcons;
|
|
27
|
+
}>;
|
|
28
|
+
declare const _default: {
|
|
29
|
+
urls: {
|
|
30
|
+
type: PropType<string[]>;
|
|
31
|
+
default: () => never[];
|
|
32
|
+
};
|
|
33
|
+
open: {
|
|
34
|
+
type: PropType<boolean>;
|
|
35
|
+
default: boolean;
|
|
36
|
+
};
|
|
37
|
+
scaleStep: {
|
|
38
|
+
type: PropType<number>;
|
|
39
|
+
default: number;
|
|
40
|
+
};
|
|
41
|
+
minScale: {
|
|
42
|
+
type: PropType<number>;
|
|
43
|
+
default: number;
|
|
44
|
+
};
|
|
45
|
+
maxScale: {
|
|
46
|
+
type: PropType<number>;
|
|
47
|
+
default: number;
|
|
48
|
+
};
|
|
49
|
+
movable: {
|
|
50
|
+
type: PropType<boolean>;
|
|
51
|
+
default: boolean;
|
|
52
|
+
};
|
|
53
|
+
disabled: PropType<boolean>;
|
|
54
|
+
zIndex: {
|
|
55
|
+
type: PropType<number>;
|
|
56
|
+
default: number;
|
|
57
|
+
};
|
|
58
|
+
current: {
|
|
59
|
+
type: PropType<number>;
|
|
60
|
+
default: number;
|
|
61
|
+
};
|
|
62
|
+
infinite: {
|
|
63
|
+
type: PropType<boolean>;
|
|
64
|
+
default: boolean;
|
|
65
|
+
};
|
|
66
|
+
getContainer: {
|
|
67
|
+
type: PropType<string>;
|
|
68
|
+
};
|
|
69
|
+
onHideOnClickModal: {
|
|
70
|
+
type: PropType<boolean>;
|
|
71
|
+
default: boolean;
|
|
72
|
+
};
|
|
73
|
+
countRender: PropType<WithFalse<(current: number, total: number) => CustomRender>>;
|
|
74
|
+
icons: {
|
|
75
|
+
type: PropType<PreviewPropsIcons>;
|
|
76
|
+
default: () => PreviewPropsIcons;
|
|
77
|
+
};
|
|
78
|
+
onTransform: PropType<(info: {
|
|
79
|
+
transform: TransformType;
|
|
80
|
+
action: TransformAction;
|
|
81
|
+
}) => void>;
|
|
82
|
+
onOpenChange: PropType<(val: boolean) => void>;
|
|
83
|
+
'onUpdate:open': PropType<(val: boolean) => void>;
|
|
84
|
+
};
|
|
85
|
+
export default _default;
|