@gx-design-vue/image 0.2.0-beta.21 → 0.2.0-beta.22
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 +6 -13
- package/dist/ImagePreview/Operations.d.ts +76 -0
- package/dist/ImagePreview/index.d.ts +83 -0
- package/dist/ImagePreview/props.d.ts +48 -0
- package/dist/{components → ImagePreview}/style.d.ts +5 -3
- 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 +12 -0
- package/dist/hooks/raf.d.ts +5 -0
- package/dist/hooks/useFrameSetState.d.ts +3 -0
- package/dist/image.js +1195 -1047
- package/dist/image.umd.cjs +1 -1
- package/dist/index.d.ts +5 -1
- package/dist/props.d.ts +19 -48
- package/dist/style.d.ts +2 -0
- package/package.json +4 -4
- package/dist/components/ImageViewer.d.ts +0 -123
package/dist/Image.d.ts
CHANGED
|
@@ -45,10 +45,7 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
45
45
|
onClick: {
|
|
46
46
|
type: import("vue").PropType<(info: any) => void>;
|
|
47
47
|
};
|
|
48
|
-
|
|
49
|
-
default: boolean;
|
|
50
|
-
};
|
|
51
|
-
previewSrcList: {
|
|
48
|
+
previewUrls: {
|
|
52
49
|
type: import("vue").PropType<string[]>;
|
|
53
50
|
default: () => string[];
|
|
54
51
|
};
|
|
@@ -73,7 +70,7 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
73
70
|
getContainer: {
|
|
74
71
|
type: import("vue").PropType<string>;
|
|
75
72
|
};
|
|
76
|
-
|
|
73
|
+
current: {
|
|
77
74
|
default: () => undefined;
|
|
78
75
|
type: import("vue").PropType<number>;
|
|
79
76
|
};
|
|
@@ -121,10 +118,7 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
121
118
|
onClick: {
|
|
122
119
|
type: import("vue").PropType<(info: any) => void>;
|
|
123
120
|
};
|
|
124
|
-
|
|
125
|
-
default: boolean;
|
|
126
|
-
};
|
|
127
|
-
previewSrcList: {
|
|
121
|
+
previewUrls: {
|
|
128
122
|
type: import("vue").PropType<string[]>;
|
|
129
123
|
default: () => string[];
|
|
130
124
|
};
|
|
@@ -149,7 +143,7 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
149
143
|
getContainer: {
|
|
150
144
|
type: import("vue").PropType<string>;
|
|
151
145
|
};
|
|
152
|
-
|
|
146
|
+
current: {
|
|
153
147
|
default: () => undefined;
|
|
154
148
|
type: import("vue").PropType<number>;
|
|
155
149
|
};
|
|
@@ -162,7 +156,8 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
162
156
|
width: number;
|
|
163
157
|
zIndex: number;
|
|
164
158
|
infinite: boolean;
|
|
165
|
-
|
|
159
|
+
current: number;
|
|
160
|
+
previewUrls: string[];
|
|
166
161
|
previewTeleported: boolean;
|
|
167
162
|
hideOnClickModal: boolean;
|
|
168
163
|
src: string;
|
|
@@ -171,8 +166,6 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
171
166
|
lazy: boolean;
|
|
172
167
|
placeholder: import("@gx-design-vue/pro-utils/dist").CustomRender;
|
|
173
168
|
fallback: import("@gx-design-vue/pro-utils/dist").CustomRender;
|
|
174
|
-
disablePreview: boolean;
|
|
175
|
-
previewSrcList: string[];
|
|
176
169
|
imageClassName: string;
|
|
177
170
|
}, SlotsType<{
|
|
178
171
|
default(): void;
|
|
@@ -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
|
+
}>, () => 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
|
+
infinite: boolean;
|
|
72
|
+
icons: import("./props").PreviewPropsIcons;
|
|
73
|
+
count: number;
|
|
74
|
+
current: number;
|
|
75
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
76
|
+
export default _default;
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import type { ExtractPropTypes } from 'vue';
|
|
2
|
+
import imagePreviewProps, { type PreviewPropsIcons } from './props';
|
|
3
|
+
export type ImagePreviewProps = Partial<ExtractPropTypes<typeof imagePreviewProps>>;
|
|
4
|
+
declare const ImagePreview: import("vue").DefineComponent<ExtractPropTypes<{
|
|
5
|
+
previewUrls: {
|
|
6
|
+
type: import("vue").PropType<string[]>;
|
|
7
|
+
default: () => never[];
|
|
8
|
+
};
|
|
9
|
+
teleported: {
|
|
10
|
+
type: import("vue").PropType<boolean>;
|
|
11
|
+
default: boolean;
|
|
12
|
+
};
|
|
13
|
+
zIndex: {
|
|
14
|
+
type: import("vue").PropType<number>;
|
|
15
|
+
default: number;
|
|
16
|
+
};
|
|
17
|
+
current: {
|
|
18
|
+
type: import("vue").PropType<number>;
|
|
19
|
+
default: number;
|
|
20
|
+
};
|
|
21
|
+
infinite: {
|
|
22
|
+
type: import("vue").PropType<boolean>;
|
|
23
|
+
default: boolean;
|
|
24
|
+
};
|
|
25
|
+
getContainer: {
|
|
26
|
+
type: import("vue").PropType<string>;
|
|
27
|
+
};
|
|
28
|
+
onHideOnClickModal: {
|
|
29
|
+
type: import("vue").PropType<boolean>;
|
|
30
|
+
default: boolean;
|
|
31
|
+
};
|
|
32
|
+
countRender: import("vue").PropType<import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>>;
|
|
33
|
+
icons: {
|
|
34
|
+
type: import("vue").PropType<PreviewPropsIcons>;
|
|
35
|
+
default: () => PreviewPropsIcons;
|
|
36
|
+
};
|
|
37
|
+
}>, () => 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<{
|
|
38
|
+
previewUrls: {
|
|
39
|
+
type: import("vue").PropType<string[]>;
|
|
40
|
+
default: () => never[];
|
|
41
|
+
};
|
|
42
|
+
teleported: {
|
|
43
|
+
type: import("vue").PropType<boolean>;
|
|
44
|
+
default: boolean;
|
|
45
|
+
};
|
|
46
|
+
zIndex: {
|
|
47
|
+
type: import("vue").PropType<number>;
|
|
48
|
+
default: number;
|
|
49
|
+
};
|
|
50
|
+
current: {
|
|
51
|
+
type: import("vue").PropType<number>;
|
|
52
|
+
default: number;
|
|
53
|
+
};
|
|
54
|
+
infinite: {
|
|
55
|
+
type: import("vue").PropType<boolean>;
|
|
56
|
+
default: boolean;
|
|
57
|
+
};
|
|
58
|
+
getContainer: {
|
|
59
|
+
type: import("vue").PropType<string>;
|
|
60
|
+
};
|
|
61
|
+
onHideOnClickModal: {
|
|
62
|
+
type: import("vue").PropType<boolean>;
|
|
63
|
+
default: boolean;
|
|
64
|
+
};
|
|
65
|
+
countRender: import("vue").PropType<import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>>;
|
|
66
|
+
icons: {
|
|
67
|
+
type: import("vue").PropType<PreviewPropsIcons>;
|
|
68
|
+
default: () => PreviewPropsIcons;
|
|
69
|
+
};
|
|
70
|
+
}>> & Readonly<{
|
|
71
|
+
onClose?: ((...args: any[]) => any) | undefined;
|
|
72
|
+
onSwitch?: ((...args: any[]) => any) | undefined;
|
|
73
|
+
onAfterClose?: ((...args: any[]) => any) | undefined;
|
|
74
|
+
}>, {
|
|
75
|
+
zIndex: number;
|
|
76
|
+
infinite: boolean;
|
|
77
|
+
icons: PreviewPropsIcons;
|
|
78
|
+
current: number;
|
|
79
|
+
previewUrls: string[];
|
|
80
|
+
teleported: boolean;
|
|
81
|
+
onHideOnClickModal: boolean;
|
|
82
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
83
|
+
export default ImagePreview;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import type { PropType, VNode } from 'vue';
|
|
2
|
+
import type { CustomRender, WithFalse } from '@gx-design-vue/pro-utils';
|
|
3
|
+
export type PreviewPropsIcons = {
|
|
4
|
+
close?: VNode;
|
|
5
|
+
rotateLeft?: VNode;
|
|
6
|
+
rotateRight?: VNode;
|
|
7
|
+
zoomIn?: VNode;
|
|
8
|
+
zoomOut?: VNode;
|
|
9
|
+
left?: VNode;
|
|
10
|
+
right?: VNode;
|
|
11
|
+
flipX?: VNode;
|
|
12
|
+
flipY?: VNode;
|
|
13
|
+
};
|
|
14
|
+
declare const _default: {
|
|
15
|
+
previewUrls: {
|
|
16
|
+
type: PropType<string[]>;
|
|
17
|
+
default: () => never[];
|
|
18
|
+
};
|
|
19
|
+
teleported: {
|
|
20
|
+
type: PropType<boolean>;
|
|
21
|
+
default: boolean;
|
|
22
|
+
};
|
|
23
|
+
zIndex: {
|
|
24
|
+
type: PropType<number>;
|
|
25
|
+
default: number;
|
|
26
|
+
};
|
|
27
|
+
current: {
|
|
28
|
+
type: PropType<number>;
|
|
29
|
+
default: number;
|
|
30
|
+
};
|
|
31
|
+
infinite: {
|
|
32
|
+
type: PropType<boolean>;
|
|
33
|
+
default: boolean;
|
|
34
|
+
};
|
|
35
|
+
getContainer: {
|
|
36
|
+
type: PropType<string>;
|
|
37
|
+
};
|
|
38
|
+
onHideOnClickModal: {
|
|
39
|
+
type: PropType<boolean>;
|
|
40
|
+
default: boolean;
|
|
41
|
+
};
|
|
42
|
+
countRender: PropType<WithFalse<(current: number, total: number) => CustomRender>>;
|
|
43
|
+
icons: {
|
|
44
|
+
type: PropType<PreviewPropsIcons>;
|
|
45
|
+
default: () => PreviewPropsIcons;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
export default _default;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import type { CSSObject } from 'ant-design-vue';
|
|
2
2
|
import type { ProAliasToken } from '@gx-design-vue/pro-provider';
|
|
3
3
|
import { Keyframe } from '@gx-design-vue/pro-provider';
|
|
4
|
-
export interface
|
|
4
|
+
export interface ImageToken extends ProAliasToken {
|
|
5
|
+
previewCls: string;
|
|
5
6
|
zIndexPopup: number;
|
|
6
7
|
previewOperationSize: number;
|
|
7
8
|
modalMaskBg: string;
|
|
8
9
|
componentCls: string;
|
|
9
10
|
iconCls: string;
|
|
11
|
+
previewOperationHoverColor: string;
|
|
10
12
|
previewOperationColor: string;
|
|
11
13
|
imagePreviewSwitchSize: number;
|
|
12
14
|
previewOperationColorDisabled: string;
|
|
@@ -16,8 +18,8 @@ export declare const viewFadeOut: Keyframe;
|
|
|
16
18
|
export type PositionType = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky' | undefined;
|
|
17
19
|
export declare const genBoxStyle: (position?: PositionType) => CSSObject;
|
|
18
20
|
export declare const resetComponent: (token: ProAliasToken) => CSSObject;
|
|
19
|
-
export declare const genPreviewOperationsStyle: (token:
|
|
20
|
-
export declare const genPreviewSwitchStyle: (token:
|
|
21
|
+
export declare const genPreviewOperationsStyle: (token: ImageToken) => CSSObject;
|
|
22
|
+
export declare const genPreviewSwitchStyle: (token: ImageToken) => CSSObject;
|
|
21
23
|
export declare function useStyle(componentCls: string): {
|
|
22
24
|
wrapSSR: (node: import("ant-design-vue/es/_util/type").VueNode) => import("ant-design-vue/es/_util/type").VueNode;
|
|
23
25
|
hashId: import("vue").ComputedRef<string>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ComputedRef, VNode } from 'vue';
|
|
2
|
+
import type { PreviewPropsIcons } from './props';
|
|
3
|
+
export type MouseEventHandler = (e: MouseEvent) => void;
|
|
4
|
+
export type WheelEventHandler = (e: WheelEvent) => void;
|
|
5
|
+
export interface PreviewUrl {
|
|
6
|
+
url: string;
|
|
7
|
+
loading: boolean;
|
|
8
|
+
canPreview: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface ImagePreviewTools {
|
|
11
|
+
type: keyof PreviewPropsIcons;
|
|
12
|
+
icon: VNode;
|
|
13
|
+
onClick: () => void;
|
|
14
|
+
disabled?: ComputedRef<boolean>;
|
|
15
|
+
}
|