@gx-design-vue/image 0.2.0-beta.25 → 0.2.0-beta.26
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 +7 -27
- package/dist/ImagePreview/Operations.d.ts +2 -2
- package/dist/ImagePreview/index.d.ts +6 -5
- package/dist/ImagePreview/props.d.ts +3 -3
- package/dist/ImagePreview/style.d.ts +1 -1
- package/dist/image.js +227 -229
- package/dist/image.umd.cjs +1 -1
- package/dist/index.d.ts +6 -6
- package/dist/props.d.ts +3 -13
- package/dist/style.d.ts +1 -1
- package/package.json +22 -22
package/dist/Image.d.ts
CHANGED
|
@@ -1,20 +1,10 @@
|
|
|
1
1
|
import type { CSSProperties, ExtractPropTypes, SlotsType } from 'vue';
|
|
2
|
-
import {
|
|
3
|
-
export type GImageProps = Partial<ExtractPropTypes<typeof
|
|
2
|
+
import { imageProps } from './props';
|
|
3
|
+
export type GImageProps = Partial<ExtractPropTypes<typeof imageProps>>;
|
|
4
4
|
declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
|
|
5
5
|
preview: {
|
|
6
|
-
type: import("vue").PropType<import("
|
|
7
|
-
default: () =>
|
|
8
|
-
previewUrls: string[];
|
|
9
|
-
disabled: boolean;
|
|
10
|
-
zIndex: number;
|
|
11
|
-
current: number;
|
|
12
|
-
infinite: boolean;
|
|
13
|
-
getContainer: string;
|
|
14
|
-
onHideOnClickModal: boolean;
|
|
15
|
-
countRender: import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>;
|
|
16
|
-
icons: import(".").PreviewPropsIcons;
|
|
17
|
-
}>;
|
|
6
|
+
type: import("vue").PropType<import(".").BaseImagePreviewProps>;
|
|
7
|
+
default: () => import(".").BaseImagePreviewProps;
|
|
18
8
|
};
|
|
19
9
|
showPreview: {
|
|
20
10
|
type: import("vue").PropType<boolean>;
|
|
@@ -66,18 +56,8 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
66
56
|
};
|
|
67
57
|
}>, () => 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<{
|
|
68
58
|
preview: {
|
|
69
|
-
type: import("vue").PropType<import("
|
|
70
|
-
default: () =>
|
|
71
|
-
previewUrls: string[];
|
|
72
|
-
disabled: boolean;
|
|
73
|
-
zIndex: number;
|
|
74
|
-
current: number;
|
|
75
|
-
infinite: boolean;
|
|
76
|
-
getContainer: string;
|
|
77
|
-
onHideOnClickModal: boolean;
|
|
78
|
-
countRender: import("@gx-design-vue/pro-utils/dist").WithFalse<(current: number, total: number) => import("@gx-design-vue/pro-utils/dist").CustomRender>;
|
|
79
|
-
icons: import(".").PreviewPropsIcons;
|
|
80
|
-
}>;
|
|
59
|
+
type: import("vue").PropType<import(".").BaseImagePreviewProps>;
|
|
60
|
+
default: () => import(".").BaseImagePreviewProps;
|
|
81
61
|
};
|
|
82
62
|
showPreview: {
|
|
83
63
|
type: import("vue").PropType<boolean>;
|
|
@@ -147,7 +127,7 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
147
127
|
showPreview: boolean;
|
|
148
128
|
src: string;
|
|
149
129
|
alt: string;
|
|
150
|
-
fit: "
|
|
130
|
+
fit: "fill" | "contain" | "cover" | "none" | "scale-down";
|
|
151
131
|
placeholder: import("@gx-design-vue/pro-utils/dist").CustomRender;
|
|
152
132
|
fallback: import("@gx-design-vue/pro-utils/dist").CustomRender;
|
|
153
133
|
}, SlotsType<{
|
|
@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
33
33
|
tools: PropType<ImagePreviewTools[]>;
|
|
34
34
|
onClose: PropType<() => void>;
|
|
35
35
|
onActive: PropType<(offset: number) => void>;
|
|
36
|
-
}>, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
36
|
+
}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
37
37
|
open: PropType<boolean>;
|
|
38
38
|
count: {
|
|
39
39
|
type: PropType<number>;
|
|
@@ -68,8 +68,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
68
68
|
onActive: PropType<(offset: number) => void>;
|
|
69
69
|
}>> & Readonly<{}>, {
|
|
70
70
|
zIndex: number;
|
|
71
|
-
infinite: boolean;
|
|
72
71
|
current: number;
|
|
72
|
+
infinite: boolean;
|
|
73
73
|
icons: import("./props").PreviewPropsIcons;
|
|
74
74
|
count: number;
|
|
75
75
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { ExtractPropTypes } from 'vue';
|
|
2
|
-
import
|
|
2
|
+
import type { PreviewPropsIcons } from './props';
|
|
3
|
+
import imagePreviewProps from './props';
|
|
3
4
|
export declare const slotsNames: string[];
|
|
4
5
|
export type ImagePreviewProps = Partial<ExtractPropTypes<typeof imagePreviewProps>>;
|
|
5
|
-
declare const
|
|
6
|
+
declare const GImagePreview: import("vue").DefineComponent<ExtractPropTypes<{
|
|
6
7
|
previewUrls: {
|
|
7
8
|
type: import("vue").PropType<string[]>;
|
|
8
9
|
default: () => never[];
|
|
@@ -67,11 +68,11 @@ declare const ImagePreview: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
67
68
|
onSwitch?: ((...args: any[]) => any) | undefined;
|
|
68
69
|
onAfterClose?: ((...args: any[]) => any) | undefined;
|
|
69
70
|
}>, {
|
|
70
|
-
zIndex: number;
|
|
71
|
-
infinite: boolean;
|
|
72
71
|
previewUrls: string[];
|
|
72
|
+
zIndex: number;
|
|
73
73
|
current: number;
|
|
74
|
+
infinite: boolean;
|
|
74
75
|
onHideOnClickModal: boolean;
|
|
75
76
|
icons: PreviewPropsIcons;
|
|
76
77
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
77
|
-
export default
|
|
78
|
+
export default GImagePreview;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { PropType, VNode } from 'vue';
|
|
2
1
|
import type { CustomRender, WithFalse } from '@gx-design-vue/pro-utils';
|
|
3
|
-
|
|
2
|
+
import type { PropType, VNode } from 'vue';
|
|
3
|
+
export interface PreviewPropsIcons {
|
|
4
4
|
close?: VNode;
|
|
5
5
|
rotateLeft?: VNode;
|
|
6
6
|
rotateRight?: VNode;
|
|
@@ -10,7 +10,7 @@ export type PreviewPropsIcons = {
|
|
|
10
10
|
right?: VNode;
|
|
11
11
|
flipX?: VNode;
|
|
12
12
|
flipY?: VNode;
|
|
13
|
-
}
|
|
13
|
+
}
|
|
14
14
|
export type BaseImagePreviewProps = Partial<{
|
|
15
15
|
previewUrls: string[];
|
|
16
16
|
disabled: boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { CSSObject } from 'ant-design-vue';
|
|
2
1
|
import type { ProAliasToken } from '@gx-design-vue/pro-provider';
|
|
2
|
+
import type { CSSObject } from 'ant-design-vue';
|
|
3
3
|
import { Keyframe } from '@gx-design-vue/pro-provider';
|
|
4
4
|
export interface ImageToken extends ProAliasToken {
|
|
5
5
|
previewCls: string;
|
package/dist/image.js
CHANGED
|
@@ -1,11 +1,53 @@
|
|
|
1
1
|
import { ref as N, reactive as ae, onMounted as De, defineComponent as ye, createVNode as r, Teleport as ze, Transition as ge, withDirectives as we, Fragment as Se, cloneVNode as Je, vShow as he, shallowRef as Z, computed as y, watch as H, onUnmounted as et, mergeProps as pe, watchEffect as tt, createTextVNode as nt, nextTick as ot } from "vue";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
2
|
+
import { useState as xe, onMountedOrActivated as it } from "@gx-design-vue/pro-hooks";
|
|
3
|
+
import { getTransitionProps as Ie, Keyframe as re, useStyle as at, mergeToken as lt, unit as rt, useProStyle as st } from "@gx-design-vue/pro-provider";
|
|
4
|
+
import { classNames as oe, getPrefixCls as Ue, isNumber as Ee, getSlotVNode as $, isArray as _e, getSlot as ct, isServer as ie, isInContainer as ut, getSlotsProps as dt, isString as ft, getScrollContainer as vt } from "@gx-design-vue/pro-utils";
|
|
5
|
+
import { useThrottleFn as mt, useEventListener as Le } from "@vueuse/core";
|
|
6
|
+
import { omit as gt, pick as wt } from "lodash-es";
|
|
7
|
+
import { CloseOutlined as St, LeftOutlined as ht, RightOutlined as pt, RotateLeftOutlined as It, RotateRightOutlined as Et, ZoomInOutlined as Ct, ZoomOutOutlined as yt, SwapOutlined as be } from "@ant-design/icons-vue";
|
|
6
8
|
import { TinyColor as Y } from "@ctrl/tinycolor";
|
|
7
|
-
|
|
8
|
-
|
|
9
|
+
function Nt(e, t) {
|
|
10
|
+
process.env.NODE_ENV !== "production" && !e && console !== void 0 && console.error(`Warning: ${t}`);
|
|
11
|
+
}
|
|
12
|
+
let Fe = (e) => setTimeout(e, 16), Be = (e) => clearTimeout(e);
|
|
13
|
+
typeof window < "u" && "requestAnimationFrame" in window && (Fe = (e) => window.requestAnimationFrame(e), Be = (e) => window.cancelAnimationFrame(e));
|
|
14
|
+
let Te = 0;
|
|
15
|
+
const Ne = /* @__PURE__ */ new Map();
|
|
16
|
+
function He(e) {
|
|
17
|
+
Ne.delete(e);
|
|
18
|
+
}
|
|
19
|
+
function Ce(e, t = 1) {
|
|
20
|
+
Te += 1;
|
|
21
|
+
const i = Te;
|
|
22
|
+
function l(o) {
|
|
23
|
+
if (o === 0)
|
|
24
|
+
He(i), e();
|
|
25
|
+
else {
|
|
26
|
+
const f = Fe(() => {
|
|
27
|
+
l(o - 1);
|
|
28
|
+
});
|
|
29
|
+
Ne.set(i, f);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return l(t), i;
|
|
33
|
+
}
|
|
34
|
+
Ce.cancel = (e) => {
|
|
35
|
+
const t = Ne.get(e);
|
|
36
|
+
return He(t), Be(t);
|
|
37
|
+
};
|
|
38
|
+
function Mt(e) {
|
|
39
|
+
const t = N(null), i = ae({ ...e }), l = N([]), o = (f) => {
|
|
40
|
+
t.value === null && (l.value = [], t.value = Ce(() => {
|
|
41
|
+
let c;
|
|
42
|
+
l.value.forEach((d) => {
|
|
43
|
+
c = { ...c, ...d };
|
|
44
|
+
}), Object.assign(i, c), t.value = null;
|
|
45
|
+
})), l.value.push(f);
|
|
46
|
+
};
|
|
47
|
+
return De(() => {
|
|
48
|
+
t.value && Ce.cancel(t.value);
|
|
49
|
+
}), [i, o];
|
|
50
|
+
}
|
|
9
51
|
const V = {
|
|
10
52
|
infinite: {
|
|
11
53
|
type: Boolean,
|
|
@@ -22,7 +64,7 @@ const V = {
|
|
|
22
64
|
getContainer: {
|
|
23
65
|
type: String
|
|
24
66
|
}
|
|
25
|
-
},
|
|
67
|
+
}, je = {
|
|
26
68
|
preview: {
|
|
27
69
|
type: Object,
|
|
28
70
|
default: () => ({
|
|
@@ -85,7 +127,7 @@ const V = {
|
|
|
85
127
|
zIndex: V.zIndex,
|
|
86
128
|
current: V.current,
|
|
87
129
|
infinite: V.infinite,
|
|
88
|
-
getContainer:
|
|
130
|
+
getContainer: je.getContainer,
|
|
89
131
|
onHideOnClickModal: {
|
|
90
132
|
type: Boolean,
|
|
91
133
|
default: !0
|
|
@@ -95,25 +137,107 @@ const V = {
|
|
|
95
137
|
type: Object,
|
|
96
138
|
default: () => ({})
|
|
97
139
|
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
140
|
+
}, Ot = /* @__PURE__ */ ye({
|
|
141
|
+
name: "Operations",
|
|
142
|
+
inheritAttrs: !1,
|
|
143
|
+
props: {
|
|
144
|
+
open: Boolean,
|
|
145
|
+
count: {
|
|
146
|
+
type: Number,
|
|
147
|
+
default: 0
|
|
148
|
+
},
|
|
149
|
+
current: {
|
|
150
|
+
type: Number,
|
|
151
|
+
default: 0
|
|
152
|
+
},
|
|
153
|
+
showSwitch: Boolean,
|
|
154
|
+
showProgress: Boolean,
|
|
155
|
+
prefixCls: String,
|
|
156
|
+
hashId: String,
|
|
157
|
+
zIndex: j.zIndex,
|
|
158
|
+
icons: j.icons,
|
|
159
|
+
infinite: j.infinite,
|
|
160
|
+
getContainer: j.getContainer,
|
|
161
|
+
countRender: j.countRender,
|
|
162
|
+
tools: Array,
|
|
163
|
+
onClose: Function,
|
|
164
|
+
onActive: Function
|
|
165
|
+
},
|
|
166
|
+
setup(e) {
|
|
167
|
+
const t = (i, l) => {
|
|
168
|
+
var o;
|
|
169
|
+
i.preventDefault(), i.stopPropagation(), (o = e.onActive) == null || o.call(e, l);
|
|
170
|
+
};
|
|
171
|
+
return () => {
|
|
172
|
+
const {
|
|
173
|
+
prefixCls: i,
|
|
174
|
+
hashId: l,
|
|
175
|
+
tools: o
|
|
176
|
+
} = e, f = Ie(`${e.prefixCls}-fade`), c = `${i}-operations-operation`, d = `${i}-operations-icon`;
|
|
177
|
+
return r(ze, {
|
|
178
|
+
to: e.getContainer || "body"
|
|
179
|
+
}, {
|
|
180
|
+
default: () => [r(ge, f, {
|
|
181
|
+
default: () => {
|
|
182
|
+
var E, g, h, C;
|
|
183
|
+
return [we(r("div", {
|
|
184
|
+
class: oe(`${i}-operations-wrapper`, l),
|
|
185
|
+
style: {
|
|
186
|
+
zIndex: e.zIndex
|
|
187
|
+
}
|
|
188
|
+
}, [((E = e.icons) == null ? void 0 : E.close) === null ? null : r("button", {
|
|
189
|
+
class: `${i}-close ${l}`,
|
|
190
|
+
onClick: e.onClose
|
|
191
|
+
}, [((g = e.icons) == null ? void 0 : g.close) || r(St, null, null)]), e.showSwitch && r(Se, null, [r("div", {
|
|
192
|
+
class: oe(`${i}-switch-left ${l}`, {
|
|
193
|
+
[`${i}-switch-left-disabled`]: e.infinite ? !1 : e.current === 0
|
|
194
|
+
}),
|
|
195
|
+
onClick: (v) => t(v, -1)
|
|
196
|
+
}, [((h = e.icons) == null ? void 0 : h.left) || r(ht, null, null)]), r("div", {
|
|
197
|
+
class: oe(`${i}-switch-right ${l}`, {
|
|
198
|
+
[`${i}-switch-right-disabled`]: e.infinite ? !1 : e.current === e.count - 1
|
|
199
|
+
}),
|
|
200
|
+
onClick: (v) => t(v, 1)
|
|
201
|
+
}, [((C = e.icons) == null ? void 0 : C.right) || r(pt, null, null)])]), r("div", {
|
|
202
|
+
class: `${i}-footer ${l}`
|
|
203
|
+
}, [e.showProgress && r("div", {
|
|
204
|
+
class: `${i}-progress`
|
|
205
|
+
}, [e.countRender ? e.countRender(e.current + 1, e.count) : `${e.current + 1} / ${e.count}`]), r("div", {
|
|
206
|
+
class: `${e.prefixCls}-operations`
|
|
207
|
+
}, [o == null ? void 0 : o.map(({
|
|
208
|
+
icon: v,
|
|
209
|
+
onClick: u,
|
|
210
|
+
type: M,
|
|
211
|
+
disabled: w
|
|
212
|
+
}) => r("div", {
|
|
213
|
+
class: oe(c, {
|
|
214
|
+
[`${e.prefixCls}-operations-operation-disabled`]: w && (w == null ? void 0 : w.value)
|
|
215
|
+
}),
|
|
216
|
+
onClick: u,
|
|
217
|
+
key: M
|
|
218
|
+
}, [Je(v, {
|
|
219
|
+
class: d
|
|
220
|
+
})]))])])]), [[he, e.open]])];
|
|
221
|
+
}
|
|
222
|
+
})]
|
|
223
|
+
});
|
|
224
|
+
};
|
|
225
|
+
}
|
|
226
|
+
}), At = new re("viewFadeIn", {
|
|
103
227
|
"0%": {
|
|
104
228
|
opacity: 0
|
|
105
229
|
},
|
|
106
230
|
"100%": {
|
|
107
231
|
opacity: 1
|
|
108
232
|
}
|
|
109
|
-
}),
|
|
233
|
+
}), xt = new re("viewFadeOut", {
|
|
110
234
|
"0%": {
|
|
111
235
|
opacity: 1
|
|
112
236
|
},
|
|
113
237
|
"100%": {
|
|
114
238
|
opacity: 0
|
|
115
239
|
}
|
|
116
|
-
}),
|
|
240
|
+
}), Lt = new re("viewZoomBadgeIn", {
|
|
117
241
|
"0%": {
|
|
118
242
|
transform: "scale(0.2)",
|
|
119
243
|
opacity: 0
|
|
@@ -122,7 +246,7 @@ const Mt = new re("viewFadeIn", {
|
|
|
122
246
|
transform: "scale(1)",
|
|
123
247
|
opacity: 1
|
|
124
248
|
}
|
|
125
|
-
}),
|
|
249
|
+
}), bt = new re("viewZoomBadgeOut", {
|
|
126
250
|
"0%": {
|
|
127
251
|
transform: "scale(1)"
|
|
128
252
|
},
|
|
@@ -130,7 +254,7 @@ const Mt = new re("viewFadeIn", {
|
|
|
130
254
|
transform: "scale(0.2)",
|
|
131
255
|
opacity: 0
|
|
132
256
|
}
|
|
133
|
-
}),
|
|
257
|
+
}), Pe = (e) => ({
|
|
134
258
|
position: e || "absolute",
|
|
135
259
|
inset: 0
|
|
136
260
|
});
|
|
@@ -143,7 +267,7 @@ function ve(e) {
|
|
|
143
267
|
insetInlineStart: 0
|
|
144
268
|
};
|
|
145
269
|
}
|
|
146
|
-
const
|
|
270
|
+
const Tt = (e) => {
|
|
147
271
|
const { previewCls: t, modalMaskBg: i, paddingSM: l, marginXL: o, margin: f, paddingLG: c, previewOperationColorDisabled: d, previewOperationHoverColor: E, motionDurationSlow: g, iconCls: h, colorTextLightSolid: C } = e, v = new Y(i).setAlpha(0.1), u = v.clone().setAlpha(0.2);
|
|
148
272
|
return {
|
|
149
273
|
[`${t}-footer`]: {
|
|
@@ -188,7 +312,7 @@ const Lt = (e) => {
|
|
|
188
312
|
[`${t}-operations`]: {
|
|
189
313
|
display: "flex",
|
|
190
314
|
alignItems: "center",
|
|
191
|
-
padding: `0 ${
|
|
315
|
+
padding: `0 ${rt(c)}`,
|
|
192
316
|
backgroundColor: v.toRgbString(),
|
|
193
317
|
borderRadius: 100,
|
|
194
318
|
"&-operation": {
|
|
@@ -213,7 +337,7 @@ const Lt = (e) => {
|
|
|
213
337
|
}
|
|
214
338
|
}
|
|
215
339
|
};
|
|
216
|
-
},
|
|
340
|
+
}, Pt = (e) => {
|
|
217
341
|
const { modalMaskBg: t, iconCls: i, previewOperationColorDisabled: l, previewCls: o, zIndexPopup: f, motionDurationSlow: c } = e, d = new Y(t).setAlpha(0.1), E = d.clone().setAlpha(0.2);
|
|
218
342
|
return {
|
|
219
343
|
[`${o}-switch-left, ${o}-switch-right`]: {
|
|
@@ -257,7 +381,7 @@ const Lt = (e) => {
|
|
|
257
381
|
insetInlineEnd: e.marginSM
|
|
258
382
|
}
|
|
259
383
|
};
|
|
260
|
-
},
|
|
384
|
+
}, Rt = (e) => ({
|
|
261
385
|
[e.componentCls]: {
|
|
262
386
|
height: "100%",
|
|
263
387
|
textAlign: "center",
|
|
@@ -283,7 +407,7 @@ const Lt = (e) => {
|
|
|
283
407
|
backgroundColor: e.colorBgMask
|
|
284
408
|
},
|
|
285
409
|
"&-body": {
|
|
286
|
-
...
|
|
410
|
+
...Pe(),
|
|
287
411
|
overflow: "hidden"
|
|
288
412
|
},
|
|
289
413
|
"&-img": {
|
|
@@ -296,7 +420,7 @@ const Lt = (e) => {
|
|
|
296
420
|
userSelect: "none",
|
|
297
421
|
pointerEvents: "auto",
|
|
298
422
|
"&-wrapper": {
|
|
299
|
-
...
|
|
423
|
+
...Pe(),
|
|
300
424
|
display: "flex",
|
|
301
425
|
justifyContent: "center",
|
|
302
426
|
alignItems: "center",
|
|
@@ -311,17 +435,17 @@ const Lt = (e) => {
|
|
|
311
435
|
}
|
|
312
436
|
},
|
|
313
437
|
"&-fade-appear, &-fade-enter": {
|
|
314
|
-
animationName:
|
|
438
|
+
animationName: At,
|
|
315
439
|
animationDuration: e.motionDurationSlow,
|
|
316
440
|
animationTimingFunction: "linear"
|
|
317
441
|
},
|
|
318
442
|
"&-fade-leave": {
|
|
319
|
-
animationName:
|
|
443
|
+
animationName: xt,
|
|
320
444
|
animationDuration: e.motionDurationSlow,
|
|
321
445
|
animationTimingFunction: "linear"
|
|
322
446
|
},
|
|
323
447
|
"&-zoom-appear, &-zoom-enter": {
|
|
324
|
-
animationName:
|
|
448
|
+
animationName: Lt,
|
|
325
449
|
opacity: 0,
|
|
326
450
|
animationTimingFunction: e.motionEaseOutCirc,
|
|
327
451
|
animationFillMode: "both",
|
|
@@ -333,7 +457,7 @@ const Lt = (e) => {
|
|
|
333
457
|
animationPlayState: "running"
|
|
334
458
|
},
|
|
335
459
|
"&-zoom-leave": {
|
|
336
|
-
animationName:
|
|
460
|
+
animationName: bt,
|
|
337
461
|
animationDuration: e.motionDurationSlow,
|
|
338
462
|
animationTimingFunction: e.motionEaseOutBack,
|
|
339
463
|
animationFillMode: "both"
|
|
@@ -351,11 +475,11 @@ const Lt = (e) => {
|
|
|
351
475
|
zIndex: e.zIndexPopup + 1,
|
|
352
476
|
width: "100%"
|
|
353
477
|
},
|
|
354
|
-
"&": [
|
|
478
|
+
"&": [Tt(e), Pt(e)]
|
|
355
479
|
});
|
|
356
|
-
function
|
|
357
|
-
return
|
|
358
|
-
const i =
|
|
480
|
+
function $t(e) {
|
|
481
|
+
return at("ImageViewer", (t) => {
|
|
482
|
+
const i = lt(t, {
|
|
359
483
|
zIndexPopup: t.zIndexPopupBase + 80,
|
|
360
484
|
previewOperationColorDisabled: new Y(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
|
|
361
485
|
previewOperationHoverColor: new Y(t.colorTextLightSolid).setAlpha(0.85).toRgbString(),
|
|
@@ -368,56 +492,14 @@ function Pt(e) {
|
|
|
368
492
|
iconCls: "anticon",
|
|
369
493
|
previewCls: t.componentCls
|
|
370
494
|
});
|
|
371
|
-
return [
|
|
495
|
+
return [Rt(i)];
|
|
372
496
|
}, e);
|
|
373
497
|
}
|
|
374
|
-
|
|
375
|
-
const t = e.getBoundingClientRect(), i = document.documentElement;
|
|
376
|
-
return {
|
|
377
|
-
left: t.left + (window.scrollX || i.scrollLeft) - (i.clientLeft || document.body.clientLeft || 0),
|
|
378
|
-
top: t.top + (window.scrollY || i.scrollTop) - (i.clientTop || document.body.clientTop || 0)
|
|
379
|
-
};
|
|
380
|
-
}
|
|
381
|
-
function $t() {
|
|
382
|
-
const e = document.documentElement.clientWidth, t = window.innerHeight || document.documentElement.clientHeight;
|
|
383
|
-
return {
|
|
384
|
-
width: e,
|
|
385
|
-
height: t
|
|
386
|
-
};
|
|
387
|
-
}
|
|
388
|
-
function Pe(e, t, i, l) {
|
|
389
|
-
const o = t + i, f = (i - l) / 2;
|
|
390
|
-
if (i > l) {
|
|
391
|
-
if (t > 0)
|
|
392
|
-
return {
|
|
393
|
-
[e]: f
|
|
394
|
-
};
|
|
395
|
-
if (t < 0 && o < l)
|
|
396
|
-
return {
|
|
397
|
-
[e]: -f
|
|
398
|
-
};
|
|
399
|
-
} else if (t < 0 || o > l)
|
|
400
|
-
return {
|
|
401
|
-
[e]: t < 0 ? f : -f
|
|
402
|
-
};
|
|
403
|
-
return {};
|
|
404
|
-
}
|
|
405
|
-
function Dt(e, t, i, l) {
|
|
406
|
-
const { width: o, height: f } = $t();
|
|
407
|
-
let c = null;
|
|
408
|
-
return e <= o && t <= f ? c = {
|
|
409
|
-
x: 0,
|
|
410
|
-
y: 0
|
|
411
|
-
} : (e > o || t > f) && (c = {
|
|
412
|
-
...Pe("x", i, e, o),
|
|
413
|
-
...Pe("y", l, t, f)
|
|
414
|
-
}), c;
|
|
415
|
-
}
|
|
416
|
-
let Be = !1;
|
|
498
|
+
let Ye = !1;
|
|
417
499
|
try {
|
|
418
500
|
const e = Object.defineProperty({}, "passive", {
|
|
419
501
|
get() {
|
|
420
|
-
|
|
502
|
+
Ye = !0;
|
|
421
503
|
}
|
|
422
504
|
});
|
|
423
505
|
window.addEventListener("testPassive", null, e), window.removeEventListener("testPassive", null, e);
|
|
@@ -426,7 +508,7 @@ try {
|
|
|
426
508
|
function F(e, t, i, l) {
|
|
427
509
|
if (e && e.addEventListener) {
|
|
428
510
|
let o = l;
|
|
429
|
-
o === void 0 &&
|
|
511
|
+
o === void 0 && Ye && (t === "touchstart" || t === "touchmove" || t === "wheel") && (o = { passive: !1 }), e.addEventListener(t, i, o);
|
|
430
512
|
}
|
|
431
513
|
return {
|
|
432
514
|
remove: () => {
|
|
@@ -948,145 +1030,62 @@ const a = {
|
|
|
948
1030
|
}
|
|
949
1031
|
}
|
|
950
1032
|
};
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
}
|
|
958
|
-
function Ce(e, t = 1) {
|
|
959
|
-
Re += 1;
|
|
960
|
-
const i = Re;
|
|
961
|
-
function l(o) {
|
|
962
|
-
if (o === 0)
|
|
963
|
-
Ye(i), e();
|
|
964
|
-
else {
|
|
965
|
-
const f = He(() => {
|
|
966
|
-
l(o - 1);
|
|
967
|
-
});
|
|
968
|
-
Ne.set(i, f);
|
|
969
|
-
}
|
|
970
|
-
}
|
|
971
|
-
return l(t), i;
|
|
1033
|
+
function Dt(e) {
|
|
1034
|
+
const t = e.getBoundingClientRect(), i = document.documentElement;
|
|
1035
|
+
return {
|
|
1036
|
+
left: t.left + (window.scrollX || i.scrollLeft) - (i.clientLeft || document.body.clientLeft || 0),
|
|
1037
|
+
top: t.top + (window.scrollY || i.scrollTop) - (i.clientTop || document.body.clientTop || 0)
|
|
1038
|
+
};
|
|
972
1039
|
}
|
|
973
|
-
|
|
974
|
-
const t =
|
|
975
|
-
return
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
const t = N(null), i = ae({ ...e }), l = N([]), o = (f) => {
|
|
979
|
-
t.value === null && (l.value = [], t.value = Ce(() => {
|
|
980
|
-
let c;
|
|
981
|
-
l.value.forEach((d) => {
|
|
982
|
-
c = { ...c, ...d };
|
|
983
|
-
}), Object.assign(i, c), t.value = null;
|
|
984
|
-
})), l.value.push(f);
|
|
1040
|
+
function zt() {
|
|
1041
|
+
const e = document.documentElement.clientWidth, t = window.innerHeight || document.documentElement.clientHeight;
|
|
1042
|
+
return {
|
|
1043
|
+
width: e,
|
|
1044
|
+
height: t
|
|
985
1045
|
};
|
|
986
|
-
return De(() => {
|
|
987
|
-
t.value && Ce.cancel(t.value);
|
|
988
|
-
}), [i, o];
|
|
989
1046
|
}
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
showProgress: Boolean,
|
|
1005
|
-
prefixCls: String,
|
|
1006
|
-
hashId: String,
|
|
1007
|
-
zIndex: j.zIndex,
|
|
1008
|
-
icons: j.icons,
|
|
1009
|
-
infinite: j.infinite,
|
|
1010
|
-
getContainer: j.getContainer,
|
|
1011
|
-
countRender: j.countRender,
|
|
1012
|
-
tools: Array,
|
|
1013
|
-
onClose: Function,
|
|
1014
|
-
onActive: Function
|
|
1015
|
-
},
|
|
1016
|
-
setup(e) {
|
|
1017
|
-
const t = (i, l) => {
|
|
1018
|
-
var o;
|
|
1019
|
-
i.preventDefault(), i.stopPropagation(), (o = e.onActive) == null || o.call(e, l);
|
|
1020
|
-
};
|
|
1021
|
-
return () => {
|
|
1022
|
-
const {
|
|
1023
|
-
prefixCls: i,
|
|
1024
|
-
hashId: l,
|
|
1025
|
-
tools: o
|
|
1026
|
-
} = e, f = Ee(`${e.prefixCls}-fade`), c = `${i}-operations-operation`, d = `${i}-operations-icon`;
|
|
1027
|
-
return r(ze, {
|
|
1028
|
-
to: e.getContainer || "body"
|
|
1029
|
-
}, {
|
|
1030
|
-
default: () => [r(ge, f, {
|
|
1031
|
-
default: () => {
|
|
1032
|
-
var E, g, h, C;
|
|
1033
|
-
return [we(r("div", {
|
|
1034
|
-
class: oe(`${i}-operations-wrapper`, l),
|
|
1035
|
-
style: {
|
|
1036
|
-
zIndex: e.zIndex
|
|
1037
|
-
}
|
|
1038
|
-
}, [((E = e.icons) == null ? void 0 : E.close) === null ? null : r("button", {
|
|
1039
|
-
class: `${i}-close ${l}`,
|
|
1040
|
-
onClick: e.onClose
|
|
1041
|
-
}, [((g = e.icons) == null ? void 0 : g.close) || r(it, null, null)]), e.showSwitch && r(Se, null, [r("div", {
|
|
1042
|
-
class: oe(`${i}-switch-left ${l}`, {
|
|
1043
|
-
[`${i}-switch-left-disabled`]: e.infinite ? !1 : e.current === 0
|
|
1044
|
-
}),
|
|
1045
|
-
onClick: (v) => t(v, -1)
|
|
1046
|
-
}, [((h = e.icons) == null ? void 0 : h.left) || r(at, null, null)]), r("div", {
|
|
1047
|
-
class: oe(`${i}-switch-right ${l}`, {
|
|
1048
|
-
[`${i}-switch-right-disabled`]: e.infinite ? !1 : e.current === e.count - 1
|
|
1049
|
-
}),
|
|
1050
|
-
onClick: (v) => t(v, 1)
|
|
1051
|
-
}, [((C = e.icons) == null ? void 0 : C.right) || r(lt, null, null)])]), r("div", {
|
|
1052
|
-
class: `${i}-footer ${l}`
|
|
1053
|
-
}, [e.showProgress && r("div", {
|
|
1054
|
-
class: `${i}-progress`
|
|
1055
|
-
}, [e.countRender ? e.countRender(e.current + 1, e.count) : `${e.current + 1} / ${e.count}`]), r("div", {
|
|
1056
|
-
class: `${e.prefixCls}-operations`
|
|
1057
|
-
}, [o == null ? void 0 : o.map(({
|
|
1058
|
-
icon: v,
|
|
1059
|
-
onClick: u,
|
|
1060
|
-
type: M,
|
|
1061
|
-
disabled: w
|
|
1062
|
-
}) => r("div", {
|
|
1063
|
-
class: oe(c, {
|
|
1064
|
-
[`${e.prefixCls}-operations-operation-disabled`]: w && (w == null ? void 0 : w.value)
|
|
1065
|
-
}),
|
|
1066
|
-
onClick: u,
|
|
1067
|
-
key: M
|
|
1068
|
-
}, [Je(v, {
|
|
1069
|
-
class: d
|
|
1070
|
-
})]))])])]), [[he, e.open]])];
|
|
1071
|
-
}
|
|
1072
|
-
})]
|
|
1073
|
-
});
|
|
1047
|
+
function Re(e, t, i, l) {
|
|
1048
|
+
const o = t + i, f = (i - l) / 2;
|
|
1049
|
+
if (i > l) {
|
|
1050
|
+
if (t > 0)
|
|
1051
|
+
return {
|
|
1052
|
+
[e]: f
|
|
1053
|
+
};
|
|
1054
|
+
if (t < 0 && o < l)
|
|
1055
|
+
return {
|
|
1056
|
+
[e]: -f
|
|
1057
|
+
};
|
|
1058
|
+
} else if (t < 0 || o > l)
|
|
1059
|
+
return {
|
|
1060
|
+
[e]: t < 0 ? f : -f
|
|
1074
1061
|
};
|
|
1075
|
-
}
|
|
1076
|
-
}
|
|
1062
|
+
return {};
|
|
1063
|
+
}
|
|
1064
|
+
function Ut(e, t, i, l) {
|
|
1065
|
+
const { width: o, height: f } = zt();
|
|
1066
|
+
let c = null;
|
|
1067
|
+
return e <= o && t <= f ? c = {
|
|
1068
|
+
x: 0,
|
|
1069
|
+
y: 0
|
|
1070
|
+
} : (e > o || t > f) && (c = {
|
|
1071
|
+
...Re("x", i, e, o),
|
|
1072
|
+
...Re("y", l, t, f)
|
|
1073
|
+
}), c;
|
|
1074
|
+
}
|
|
1075
|
+
const D = {
|
|
1077
1076
|
x: 0,
|
|
1078
1077
|
y: 0
|
|
1079
1078
|
}, B = {
|
|
1080
|
-
rotateLeft: r(
|
|
1081
|
-
rotateRight: r(
|
|
1082
|
-
zoomIn: r(
|
|
1083
|
-
zoomOut: r(
|
|
1084
|
-
flipX: r(
|
|
1085
|
-
flipY: r(
|
|
1079
|
+
rotateLeft: r(It, null, null),
|
|
1080
|
+
rotateRight: r(Et, null, null),
|
|
1081
|
+
zoomIn: r(Ct, null, null),
|
|
1082
|
+
zoomOut: r(yt, null, null),
|
|
1083
|
+
flipX: r(be, null, null),
|
|
1084
|
+
flipY: r(be, {
|
|
1086
1085
|
rotate: 90
|
|
1087
1086
|
}, null)
|
|
1088
1087
|
}, Ke = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], _t = /* @__PURE__ */ ye({
|
|
1089
|
-
name: "
|
|
1088
|
+
name: "GImagePreview",
|
|
1090
1089
|
props: j,
|
|
1091
1090
|
inheritAttrs: !1,
|
|
1092
1091
|
emits: ["close", "switch", "afterClose"],
|
|
@@ -1101,10 +1100,10 @@ const Ut = /* @__PURE__ */ ye({
|
|
|
1101
1100
|
}), {
|
|
1102
1101
|
wrapSSR: f,
|
|
1103
1102
|
hashId: c
|
|
1104
|
-
} =
|
|
1103
|
+
} = $t(o), [d, E] = xe(!1), [g, h] = xe(!1), C = N(null), v = N(e.current), u = Z(1), M = Z(0), w = Z(!1), O = ae({
|
|
1105
1104
|
x: 1,
|
|
1106
1105
|
y: 1
|
|
1107
|
-
}), [p, L] =
|
|
1106
|
+
}), [p, L] = Mt(D), K = Z({
|
|
1108
1107
|
wheelDirection: 0
|
|
1109
1108
|
}), P = Z(), A = ae({
|
|
1110
1109
|
originX: 0,
|
|
@@ -1121,7 +1120,7 @@ const Ut = /* @__PURE__ */ ye({
|
|
|
1121
1120
|
v.value = n;
|
|
1122
1121
|
};
|
|
1123
1122
|
H(() => e.current, (n) => {
|
|
1124
|
-
|
|
1123
|
+
Ee(n) && s(n);
|
|
1125
1124
|
});
|
|
1126
1125
|
function S(n, m) {
|
|
1127
1126
|
R.set(n, {
|
|
@@ -1194,9 +1193,9 @@ const Ut = /* @__PURE__ */ ye({
|
|
|
1194
1193
|
const n = P.value.offsetWidth * u.value, m = P.value.offsetHeight * u.value, {
|
|
1195
1194
|
left: T,
|
|
1196
1195
|
top: I
|
|
1197
|
-
} =
|
|
1196
|
+
} = Dt(P.value), te = M.value % 180 !== 0;
|
|
1198
1197
|
w.value = !1;
|
|
1199
|
-
const ne =
|
|
1198
|
+
const ne = Ut(te ? m : n, te ? n : m, T, I);
|
|
1200
1199
|
ne && L({
|
|
1201
1200
|
...ne
|
|
1202
1201
|
});
|
|
@@ -1258,7 +1257,7 @@ const Ut = /* @__PURE__ */ ye({
|
|
|
1258
1257
|
}), i({
|
|
1259
1258
|
setOpen: E
|
|
1260
1259
|
}), () => {
|
|
1261
|
-
const n =
|
|
1260
|
+
const n = Ie(`${o}-fade`), m = Ie(`${o}-zoom`), T = {};
|
|
1262
1261
|
for (const I in e.icons)
|
|
1263
1262
|
T[I] = $(l, e.icons, I);
|
|
1264
1263
|
return f(r(Se, null, [r(ze, {
|
|
@@ -1303,7 +1302,7 @@ const Ut = /* @__PURE__ */ ye({
|
|
|
1303
1302
|
}
|
|
1304
1303
|
}, null)])])])]), [[he, d.value && g.value]])]
|
|
1305
1304
|
})])])])]
|
|
1306
|
-
}), d.value && g.value && r(
|
|
1305
|
+
}), d.value && g.value && r(Ot, {
|
|
1307
1306
|
open: d.value && g.value,
|
|
1308
1307
|
hashId: c.value,
|
|
1309
1308
|
count: e.previewUrls.length,
|
|
@@ -1311,12 +1310,12 @@ const Ut = /* @__PURE__ */ ye({
|
|
|
1311
1310
|
zIndex: e.zIndex + 1,
|
|
1312
1311
|
getContainer: e.getContainer,
|
|
1313
1312
|
prefixCls: o,
|
|
1314
|
-
icons:
|
|
1313
|
+
icons: gt(T, Me.map(({
|
|
1315
1314
|
type: I
|
|
1316
1315
|
}) => I)),
|
|
1317
1316
|
tools: Me,
|
|
1318
1317
|
infinite: e.infinite,
|
|
1319
|
-
countRender:
|
|
1318
|
+
countRender: ct(l, e, "countRenders"),
|
|
1320
1319
|
showSwitch: k.value,
|
|
1321
1320
|
showProgress: G.value,
|
|
1322
1321
|
onClose: x,
|
|
@@ -1369,7 +1368,7 @@ const Ut = /* @__PURE__ */ ye({
|
|
|
1369
1368
|
}), Ht = (e) => e && e.nodeType === Node.ELEMENT_NODE;
|
|
1370
1369
|
let $e = "";
|
|
1371
1370
|
const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
|
|
1372
|
-
props:
|
|
1371
|
+
props: je,
|
|
1373
1372
|
name: "GImage",
|
|
1374
1373
|
emits: ["error", "click", "load"],
|
|
1375
1374
|
slots: Object,
|
|
@@ -1383,7 +1382,7 @@ const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
|
|
|
1383
1382
|
}), {
|
|
1384
1383
|
wrapSSR: f,
|
|
1385
1384
|
hashId: c
|
|
1386
|
-
} =
|
|
1385
|
+
} = st("Image", [Bt], o), d = N(), E = N(""), g = N(!1), h = N(!0), C = N(!1), v = N(null), u = N();
|
|
1387
1386
|
let M, w;
|
|
1388
1387
|
const O = y(() => !ie && e.fit ? {
|
|
1389
1388
|
"object-fit": e.fit
|
|
@@ -1397,7 +1396,7 @@ const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
|
|
|
1397
1396
|
previewUrls: s = [],
|
|
1398
1397
|
current: S = 0
|
|
1399
1398
|
} = e.preview;
|
|
1400
|
-
if (
|
|
1399
|
+
if (Ee(S)) return s.length >= S ? S : 0;
|
|
1401
1400
|
const x = s.indexOf(e.src);
|
|
1402
1401
|
return x >= 0 ? x : 0;
|
|
1403
1402
|
}), K = (s) => {
|
|
@@ -1413,11 +1412,11 @@ const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
|
|
|
1413
1412
|
const x = (l || {})[S];
|
|
1414
1413
|
s.setAttribute(S, x);
|
|
1415
1414
|
}), s.src = e.src;
|
|
1416
|
-
}, R =
|
|
1415
|
+
}, R = mt(Q, 200), z = () => {
|
|
1417
1416
|
ie || !u.value || !R || (M(), u.value = void 0);
|
|
1418
1417
|
};
|
|
1419
1418
|
function Q() {
|
|
1420
|
-
|
|
1419
|
+
ut(v.value, u.value) && (A(), z());
|
|
1421
1420
|
}
|
|
1422
1421
|
const U = async () => {
|
|
1423
1422
|
if (ie) return;
|
|
@@ -1425,7 +1424,7 @@ const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
|
|
|
1425
1424
|
const {
|
|
1426
1425
|
scrollContainer: s
|
|
1427
1426
|
} = e;
|
|
1428
|
-
Ht(s) ? u.value = s :
|
|
1427
|
+
Ht(s) ? u.value = s : ft(s) && s !== "" ? u.value = document.querySelector(s) ?? void 0 : v.value && (u.value = vt(v.value)), u.value && (M = Le(u, "scroll", R), setTimeout(() => Q(), 200));
|
|
1429
1428
|
}, W = (s) => {
|
|
1430
1429
|
if (s.ctrlKey) {
|
|
1431
1430
|
if (s.deltaY < 0)
|
|
@@ -1434,7 +1433,7 @@ const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
|
|
|
1434
1433
|
return s.preventDefault(), !1;
|
|
1435
1434
|
}
|
|
1436
1435
|
}, b = () => {
|
|
1437
|
-
p.value && (w =
|
|
1436
|
+
p.value && (w = Le("wheel", W, {
|
|
1438
1437
|
passive: !1
|
|
1439
1438
|
}), $e = document.body.style.overflow, document.body.style.overflow = "hidden", C.value = !0);
|
|
1440
1439
|
}, k = () => {
|
|
@@ -1446,8 +1445,8 @@ const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
|
|
|
1446
1445
|
var s, S;
|
|
1447
1446
|
p.value && C.value ? (s = d.value) == null || s.setOpen(!0) : (S = d.value) == null || S.setOpen(!1);
|
|
1448
1447
|
});
|
|
1449
|
-
const G = (s) =>
|
|
1450
|
-
return
|
|
1448
|
+
const G = (s) => Ee(s) ? s + "px" : s;
|
|
1449
|
+
return it(() => {
|
|
1451
1450
|
e.lazy ? U() : A();
|
|
1452
1451
|
}), () => {
|
|
1453
1452
|
var X;
|
|
@@ -1471,7 +1470,7 @@ const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
|
|
|
1471
1470
|
...O.value,
|
|
1472
1471
|
height: e.height ? G(e.height) : void 0
|
|
1473
1472
|
}
|
|
1474
|
-
}, _ =
|
|
1473
|
+
}, _ = dt(jt, t, e, {
|
|
1475
1474
|
render: !0
|
|
1476
1475
|
});
|
|
1477
1476
|
return f(r("div", {
|
|
@@ -1508,7 +1507,7 @@ const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
|
|
|
1508
1507
|
onClick: () => b()
|
|
1509
1508
|
}, null), p.value && r(_t, pe({
|
|
1510
1509
|
ref: d
|
|
1511
|
-
}, e.preview,
|
|
1510
|
+
}, e.preview, wt(_, Ke), {
|
|
1512
1511
|
previewUrls: ((X = e.preview) == null ? void 0 : X.previewUrls) || [e.src],
|
|
1513
1512
|
current: L.value,
|
|
1514
1513
|
onClose: () => k()
|
|
@@ -1520,9 +1519,8 @@ le.isGImage = !0;
|
|
|
1520
1519
|
le.install = (e) => (e.component(le.name, le), e);
|
|
1521
1520
|
export {
|
|
1522
1521
|
le as GImage,
|
|
1523
|
-
_t as
|
|
1522
|
+
_t as GImagePreview,
|
|
1524
1523
|
V as baseProps,
|
|
1525
1524
|
le as default,
|
|
1526
|
-
|
|
1527
|
-
j as imagePreviewProps
|
|
1525
|
+
je as imageProps
|
|
1528
1526
|
};
|
package/dist/image.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(v,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@ant-design/icons-vue"),require("@gx-design-vue/pro-utils"),require("@gx-design-vue/pro-hooks"),require("@gx-design-vue/pro-provider"),require("@ctrl/tinycolor"),require("lodash-es"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@ant-design/icons-vue","@gx-design-vue/pro-utils","@gx-design-vue/pro-hooks","@gx-design-vue/pro-provider","@ctrl/tinycolor","lodash-es","@vueuse/core"],t):(v=typeof globalThis<"u"?globalThis:v||self,t(v.GImage={},v.vue,v.iconsVue,v.proUtils,v.proHooks,v.proProvider,v.tinycolor,v.lodashEs,v.core))})(this,function(v,t,L,u,oe,y,F,we,ie){"use strict";const V={infinite:{type:Boolean,default:!0},zIndex:{type:Number,default:2e3},current:{type:Number,default:0},getContainer:{type:String}},ae={preview:{type:Object,default:()=>({current:0,infinite:!0,onHideOnClickModal:!0})},showPreview:{type:Boolean,default:!0},src:{type:String,default:""},alt:{type:String,default:""},fit:{type:String,default:"contain"},lazy:Boolean,scrollContainer:{type:[String,Object]},placeholder:{type:[Function,Object],default:()=>{}},fallback:{type:[Function,Object],default:()=>{}},onLoad:{type:Function},onError:{type:Function},onClick:{type:Function},imageClassName:String,imageStyle:Object,width:Number,height:Number,zIndex:V.zIndex,getContainer:V.getContainer},$={previewUrls:{type:Array,default:()=>[]},disabled:Boolean,zIndex:V.zIndex,current:V.current,infinite:V.infinite,getContainer:ae.getContainer,onHideOnClickModal:{type:Boolean,default:!0},countRender:[Function,Array,Object],icons:{type:Object,default:()=>({})}};function Le(e,n){process.env.NODE_ENV!=="production"&&!e&&console!==void 0&&console.error(`Warning: ${n}`)}const Te=new y.Keyframe("viewFadeIn",{"0%":{opacity:0},"100%":{opacity:1}}),be=new y.Keyframe("viewFadeOut",{"0%":{opacity:1},"100%":{opacity:0}}),Pe=new y.Keyframe("viewZoomBadgeIn",{"0%":{transform:"scale(0.2)",opacity:0},"100%":{transform:"scale(1)",opacity:1}}),Re=new y.Keyframe("viewZoomBadgeOut",{"0%":{transform:"scale(1)"},"100%":{transform:"scale(0.2)",opacity:0}}),ve=e=>({position:e||"absolute",inset:0});function re(e){return{position:e,top:0,insetInlineEnd:0,bottom:0,insetInlineStart:0}}const $e=e=>{const{previewCls:n,modalMaskBg:a,paddingSM:l,marginXL:i,margin:g,paddingLG:c,previewOperationColorDisabled:f,previewOperationHoverColor:p,motionDurationSlow:h,iconCls:I,colorTextLightSolid:M}=e,m=new F.TinyColor(a).setAlpha(.1),d=m.clone().setAlpha(.2);return{[`${n}-footer`]:{position:"fixed",bottom:i,left:{_skip_check_:!0,value:"50%"},display:"flex",flexDirection:"column",alignItems:"center",color:e.previewOperationColor,transform:"translateX(-50%)"},[`${n}-progress`]:{marginBottom:g},[`${n}-close`]:{position:"fixed",top:i,right:{_skip_check_:!0,value:i},display:"flex",color:M,backgroundColor:m.toRgbString(),borderRadius:"50%",padding:l,outline:0,border:0,cursor:"pointer",transition:`all ${h}`,"&:hover":{backgroundColor:d.toRgbString()},[`& > ${I}`]:{fontSize:e.previewOperationSize}},[`${n}-operations`]:{display:"flex",alignItems:"center",padding:`0 ${y.unit(c)}`,backgroundColor:m.toRgbString(),borderRadius:100,"&-operation":{marginInlineStart:l,padding:l,cursor:"pointer",transition:`all ${h}`,userSelect:"none",[`&:not(${n}-operations-operation-disabled):hover > ${I}`]:{color:p},"&-disabled":{color:f,cursor:"not-allowed"},"&:first-of-type":{marginInlineStart:0},[`& > ${I}`]:{fontSize:e.previewOperationSize}}}}},De=e=>{const{modalMaskBg:n,iconCls:a,previewOperationColorDisabled:l,previewCls:i,zIndexPopup:g,motionDurationSlow:c}=e,f=new F.TinyColor(n).setAlpha(.1),p=f.clone().setAlpha(.2);return{[`${i}-switch-left, ${i}-switch-right`]:{position:"fixed",insetBlockStart:"50%",zIndex:e.calc(g).add(1).equal(),display:"flex",alignItems:"center",justifyContent:"center",width:e.imagePreviewSwitchSize,height:e.imagePreviewSwitchSize,marginTop:e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),color:e.previewOperationColor,background:f.toRgbString(),borderRadius:"50%",transform:"translateY(-50%)",cursor:"pointer",transition:`all ${c}`,userSelect:"none","&:hover":{background:p.toRgbString()},"&-disabled":{"&, &:hover":{color:l,background:"transparent",cursor:"not-allowed",[`> ${a}`]:{cursor:"not-allowed"}}},[`> ${a}`]:{fontSize:e.previewOperationSize}},[`${i}-switch-left`]:{insetInlineStart:e.marginSM},[`${i}-switch-right`]:{insetInlineEnd:e.marginSM}}},ze=e=>({[e.componentCls]:{height:"100%",textAlign:"center",pointerEvents:"none","&-root":{...re("fixed"),zIndex:e.zIndexPopup,overflow:"auto",outline:0,WebkitOverflowScrolling:"touch"},"&-wrap":{...re("fixed"),zIndex:e.zIndexPopup,overflow:"auto",outline:0,WebkitOverflowScrolling:"touch"},"&-mask":{...re("fixed"),zIndex:e.zIndexPopupBase,height:"100%",backgroundColor:e.colorBgMask},"&-body":{...ve(),overflow:"hidden"},"&-img":{maxWidth:"100%",maxHeight:"100%",verticalAlign:"middle",transform:"scale3d(1, 1, 1)",cursor:"grab",transition:`transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,userSelect:"none",pointerEvents:"auto","&-wrapper":{...ve(),display:"flex",justifyContent:"center",alignItems:"center",transition:`transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,"&::before":{display:"inline-block",width:1,height:"50%",marginInlineEnd:-1,content:'""'}}},"&-fade-appear, &-fade-enter":{animationName:Te,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear"},"&-fade-leave":{animationName:be,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear"},"&-zoom-appear, &-zoom-enter":{animationName:Pe,opacity:0,animationTimingFunction:e.motionEaseOutCirc,animationFillMode:"both",transform:"none",animationDuration:e.motionDurationSlow,userSelect:"none"},"&-zoom-enter-active":{animationPlayState:"running"},"&-zoom-leave":{animationName:Re,animationDuration:e.motionDurationSlow,animationTimingFunction:e.motionEaseOutBack,animationFillMode:"both"}},[`${e.componentCls}-root`]:{[`${e.componentCls}-wrapper`]:{zIndex:e.zIndexPopup}},[`${e.componentCls}-operations-wrapper`]:{position:"fixed",insetBlockStart:0,insetInlineEnd:0,zIndex:e.zIndexPopup+1,width:"100%"},"&":[$e(e),De(e)]});function _e(e){return y.useStyle("ImageViewer",n=>{const a=y.mergeToken(n,{zIndexPopup:n.zIndexPopupBase+80,previewOperationColorDisabled:new F.TinyColor(n.colorTextLightSolid).setAlpha(.25).toRgbString(),previewOperationHoverColor:new F.TinyColor(n.colorTextLightSolid).setAlpha(.85).toRgbString(),modalMaskBg:new F.TinyColor("#000").setAlpha(.45).toRgbString(),previewOperationColor:new F.TinyColor(n.colorTextLightSolid).toRgbString(),previewOperationSize:n.fontSizeIcon*1.5,imagePreviewSwitchSize:n.controlHeightLG,iconCls:"anticon",previewCls:n.componentCls});return[ze(a)]},e)}function Fe(e){const n=e.getBoundingClientRect(),a=document.documentElement;return{left:n.left+(window.scrollX||a.scrollLeft)-(a.clientLeft||document.body.clientLeft||0),top:n.top+(window.scrollY||a.scrollTop)-(a.clientTop||document.body.clientTop||0)}}function Ve(){const e=document.documentElement.clientWidth,n=window.innerHeight||document.documentElement.clientHeight;return{width:e,height:n}}function he(e,n,a,l){const i=n+a,g=(a-l)/2;if(a>l){if(n>0)return{[e]:g};if(n<0&&i<l)return{[e]:-g}}else if(n<0||i>l)return{[e]:n<0?g:-g};return{}}function Ue(e,n,a,l){const{width:i,height:g}=Ve();let c=null;return e<=i&&n<=g?c={x:0,y:0}:(e>i||n>g)&&(c={...he("x",a,e,i),...he("y",l,n,g)}),c}let Se=!1;try{const e=Object.defineProperty({},"passive",{get(){Se=!0}});window.addEventListener("testPassive",null,e),window.removeEventListener("testPassive",null,e)}catch{}function U(e,n,a,l){if(e&&e.addEventListener){let i=l;i===void 0&&Se&&(n==="touchstart"||n==="touchmove"||n==="wheel")&&(i={passive:!1}),e.addEventListener(n,a,i)}return{remove:()=>{e&&e.removeEventListener&&e.removeEventListener(n,a)}}}const r={MAC_ENTER:3,BACKSPACE:8,TAB:9,NUM_CENTER:12,ENTER:13,SHIFT:16,CTRL:17,ALT:18,PAUSE:19,CAPS_LOCK:20,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40,PRINT_SCREEN:44,INSERT:45,DELETE:46,ZERO:48,ONE:49,TWO:50,THREE:51,FOUR:52,FIVE:53,SIX:54,SEVEN:55,EIGHT:56,NINE:57,QUESTION_MARK:63,A:65,B:66,C:67,D:68,E:69,F:70,G:71,H:72,I:73,J:74,K:75,L:76,M:77,N:78,O:79,P:80,Q:81,R:82,S:83,T:84,U:85,V:86,W:87,X:88,Y:89,Z:90,META:91,WIN_KEY_RIGHT:92,CONTEXT_MENU:93,NUM_ZERO:96,NUM_ONE:97,NUM_TWO:98,NUM_THREE:99,NUM_FOUR:100,NUM_FIVE:101,NUM_SIX:102,NUM_SEVEN:103,NUM_EIGHT:104,NUM_NINE:105,NUM_MULTIPLY:106,NUM_PLUS:107,NUM_MINUS:109,NUM_PERIOD:110,NUM_DIVISION:111,F1:112,F2:113,F3:114,F4:115,F5:116,F6:117,F7:118,F8:119,F9:120,F10:121,F11:122,F12:123,NUMLOCK:144,SEMICOLON:186,DASH:189,EQUALS:187,COMMA:188,PERIOD:190,SLASH:191,APOSTROPHE:192,SINGLE_QUOTE:222,OPEN_SQUARE_BRACKET:219,BACKSLASH:220,CLOSE_SQUARE_BRACKET:221,WIN_KEY:224,MAC_FF_META:224,WIN_IME:229,isTextModifyingKeyEvent:function(n){const{keyCode:a}=n;if(n.altKey&&!n.ctrlKey||n.metaKey||a>=r.F1&&a<=r.F12)return!1;switch(a){case r.ALT:case r.CAPS_LOCK:case r.CONTEXT_MENU:case r.CTRL:case r.DOWN:case r.END:case r.ESC:case r.HOME:case r.INSERT:case r.LEFT:case r.MAC_FF_META:case r.META:case r.NUMLOCK:case r.NUM_CENTER:case r.PAGE_DOWN:case r.PAGE_UP:case r.PAUSE:case r.PRINT_SCREEN:case r.RIGHT:case r.SHIFT:case r.UP:case r.WIN_KEY:case r.WIN_KEY_RIGHT:return!1;default:return!0}},isCharacterKey:function(n){if(n>=r.ZERO&&n<=r.NINE||n>=r.NUM_ZERO&&n<=r.NUM_MULTIPLY||n>=r.A&&n<=r.Z||window.navigator.userAgent.includes("WebKit")&&n===0)return!0;switch(n){case r.SPACE:case r.QUESTION_MARK:case r.NUM_PLUS:case r.NUM_MINUS:case r.NUM_PERIOD:case r.NUM_DIVISION:case r.SEMICOLON:case r.DASH:case r.EQUALS:case r.COMMA:case r.PERIOD:case r.SLASH:case r.APOSTROPHE:case r.SINGLE_QUOTE:case r.OPEN_SQUARE_BRACKET:case r.BACKSLASH:case r.CLOSE_SQUARE_BRACKET:return!0;default:return!1}}};let Ne=e=>setTimeout(e,16),Ie=e=>clearTimeout(e);typeof window<"u"&&"requestAnimationFrame"in window&&(Ne=e=>window.requestAnimationFrame(e),Ie=e=>window.cancelAnimationFrame(e));let Ce=0;const le=new Map;function Ee(e){le.delete(e)}function se(e,n=1){Ce+=1;const a=Ce;function l(i){if(i===0)Ee(a),e();else{const g=Ne(()=>{l(i-1)});le.set(a,g)}}return l(n),a}se.cancel=e=>{const n=le.get(e);return Ee(n),Ie(n)};function je(e){const n=t.ref(null),a=t.reactive({...e}),l=t.ref([]),i=g=>{n.value===null&&(l.value=[],n.value=se(()=>{let c;l.value.forEach(f=>{c={...c,...f}}),Object.assign(a,c),n.value=null})),l.value.push(g)};return t.onMounted(()=>{n.value&&se.cancel(n.value)}),[a,i]}const Be=t.defineComponent({name:"Operations",inheritAttrs:!1,props:{open:Boolean,count:{type:Number,default:0},current:{type:Number,default:0},showSwitch:Boolean,showProgress:Boolean,prefixCls:String,hashId:String,zIndex:$.zIndex,icons:$.icons,infinite:$.infinite,getContainer:$.getContainer,countRender:$.countRender,tools:Array,onClose:Function,onActive:Function},setup(e){const n=(a,l)=>{var i;a.preventDefault(),a.stopPropagation(),(i=e.onActive)==null||i.call(e,l)};return()=>{const{prefixCls:a,hashId:l,tools:i}=e,g=y.getTransitionProps(`${e.prefixCls}-fade`),c=`${a}-operations-operation`,f=`${a}-operations-icon`;return t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[t.createVNode(t.Transition,g,{default:()=>{var p,h,I,M;return[t.withDirectives(t.createVNode("div",{class:u.classNames(`${a}-operations-wrapper`,l),style:{zIndex:e.zIndex}},[((p=e.icons)==null?void 0:p.close)===null?null:t.createVNode("button",{class:`${a}-close ${l}`,onClick:e.onClose},[((h=e.icons)==null?void 0:h.close)||t.createVNode(L.CloseOutlined,null,null)]),e.showSwitch&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:u.classNames(`${a}-switch-left ${l}`,{[`${a}-switch-left-disabled`]:e.infinite?!1:e.current===0}),onClick:m=>n(m,-1)},[((I=e.icons)==null?void 0:I.left)||t.createVNode(L.LeftOutlined,null,null)]),t.createVNode("div",{class:u.classNames(`${a}-switch-right ${l}`,{[`${a}-switch-right-disabled`]:e.infinite?!1:e.current===e.count-1}),onClick:m=>n(m,1)},[((M=e.icons)==null?void 0:M.right)||t.createVNode(L.RightOutlined,null,null)])]),t.createVNode("div",{class:`${a}-footer ${l}`},[e.showProgress&&t.createVNode("div",{class:`${a}-progress`},[e.countRender?e.countRender(e.current+1,e.count):`${e.current+1} / ${e.count}`]),t.createVNode("div",{class:`${e.prefixCls}-operations`},[i==null?void 0:i.map(({icon:m,onClick:d,type:O,disabled:S})=>t.createVNode("div",{class:u.classNames(c,{[`${e.prefixCls}-operations-operation-disabled`]:S&&(S==null?void 0:S.value)}),onClick:d,key:O},[t.cloneVNode(m,{class:f})]))])])]),[[t.vShow,e.open]])]}})]})}}}),D={x:0,y:0},j={rotateLeft:t.createVNode(L.RotateLeftOutlined,null,null),rotateRight:t.createVNode(L.RotateRightOutlined,null,null),zoomIn:t.createVNode(L.ZoomInOutlined,null,null),zoomOut:t.createVNode(L.ZoomOutOutlined,null,null),flipX:t.createVNode(L.SwapOutlined,null,null),flipY:t.createVNode(L.SwapOutlined,{rotate:90},null)},pe=["close","left","right","rotateRight","rotateRight","zoomOut","flipX","flipY","rotateLeft"],ye=t.defineComponent({name:"GImageViewer",props:$,inheritAttrs:!1,emits:["close","switch","afterClose"],emit:Object,setup:(e,{emit:n,expose:a,slots:l})=>{const i=u.getPrefixCls({suffixCls:"image-view"}),{wrapSSR:g,hashId:c}=_e(i),[f,p]=oe.useState(!1),[h,I]=oe.useState(!1),M=t.ref(null),m=t.ref(e.current),d=t.shallowRef(1),O=t.shallowRef(0),S=t.shallowRef(!1),A=t.reactive({x:1,y:1}),[C,b]=je(D),W=t.shallowRef({wheelDirection:0}),z=t.shallowRef(),x=t.reactive({originX:0,originY:0,deltaX:0,deltaY:0}),_=t.reactive(new Map),H=t.computed(()=>new Map(Array.from(_).map(([o,{url:w}])=>[o,w]))),Q=t.computed(()=>H.value.get(m.value)),K=t.computed(()=>H.value.size),G=t.computed(()=>Array.from(H.value.keys())),P=t.computed(()=>G.value.indexOf(m.value)),k=t.computed(()=>K.value>1),X=t.computed(()=>K.value>=1);t.watch(f,o=>{o&&(h.value=!0)});const s=o=>{m.value=o};t.watch(()=>e.current,o=>{u.isNumber(o)&&s(o)});function N(o,w){_.set(o,{url:w,loading:!0,canPreview:!1})}const T=()=>{I(!1),m.value=e.current},ue=()=>{d.value=1,O.value=0,A.x=1,A.y=1,b(D),n("close")},de=o=>{S.value||M.value===(o==null?void 0:o.target)&&T()},fe=()=>{const o=_.get(m.value);o&&(o.loading=!1,o.canPreview=!0)},q=o=>{const w=_.get(m.value);w&&(w.loading=!1,w.canPreview=!1),o.target.alt="加载失败"},J=()=>{if(P.value>0||e.infinite){const o=P.value-1<0?e.previewUrls.length-1:P.value-1;s(G.value[o])}},ee=()=>{if(P.value<K.value-1||e.infinite){const o=P.value+1>e.previewUrls.length-1?0:P.value+1;s(G.value[o])}},Y=o=>{o?d.value+=.5:d.value++,b(D)},Z=o=>{d.value>1&&(o?d.value-=.5:d.value--),b(D)},ge=()=>{O.value+=90},Ge=()=>{O.value-=90},Xe=()=>{A.x=-A.x},Ze=()=>{A.y=-A.y},Oe=[{icon:u.getSlotVNode(l,e.icons,"zoomIn")||j.zoomIn,onClick:()=>Y(),type:"zoomIn"},{icon:u.getSlotVNode(l,e.icons,"zoomOut")||j.zoomOut,onClick:()=>Z(),type:"zoomOut",disabled:t.computed(()=>d.value===1)},{icon:u.getSlotVNode(l,e.icons,"rotateRight")||j.rotateRight,onClick:ge,type:"rotateRight"},{icon:u.getSlotVNode(l,e.icons,"rotateLeft")||j.rotateLeft,onClick:Ge,type:"rotateLeft"},{icon:u.getSlotVNode(l,e.icons,"flipX")||j.flipX,onClick:Xe,type:"flipX"},{icon:u.getSlotVNode(l,e.icons,"flipY")||j.flipY,onClick:Ze,type:"flipY"}],Ae=()=>{if(f.value&&S.value&&z.value){const o=z.value.offsetWidth*d.value,w=z.value.offsetHeight*d.value,{left:R,top:E}=Fe(z.value),te=O.value%180!==0;S.value=!1;const ne=Ue(te?w:o,te?o:w,R,E);ne&&b({...ne})}},Qe=o=>{o.button===0&&(o.preventDefault(),o.stopPropagation(),x.deltaX=o.pageX-C.x,x.deltaY=o.pageY-C.y,x.originX=C.x,x.originY=C.y,S.value=!0)},xe=o=>{f.value&&S.value&&b({x:o.pageX-x.deltaX,y:o.pageY-x.deltaY})},ke=o=>{if(!f.value)return;o.preventDefault();const w=o.deltaY;W.value={wheelDirection:w}},qe=o=>{!f.value||!k.value||(o.keyCode===r.LEFT?J():o.keyCode===r.RIGHT&&ee())},Je=()=>{f.value&&(d.value!==1&&(d.value=1),(C.x!==D.x||C.y!==D.y)&&b(D))};let me=()=>{};return t.onMounted(()=>{t.watch(()=>e.previewUrls,o=>{u.isArray(o)&&o.forEach((w,R)=>{N(R,w)})},{flush:"post",immediate:!0}),t.watch([()=>f.value,S],()=>{me();let o,w;const R=U(window,"mouseup",Ae,!1),E=U(window,"mousemove",xe,!1),te=U(window,"wheel",ke,{passive:!1}),ne=U(window,"keydown",qe,!1);try{window.top!==window.self&&(o=U(window.top,"mouseup",Ae,!1),w=U(window.top,"mousemove",xe,!1))}catch(et){Le(!1,`[vc-image] ${et}`)}me=()=>{R.remove(),E.remove(),te.remove(),ne.remove(),o&&o.remove(),w&&w.remove()}},{flush:"post",immediate:!0}),t.watch([W],()=>{const{wheelDirection:o}=W.value;o>0?Z(!0):o<0&&Y(!0)})}),t.onUnmounted(()=>{me()}),a({setOpen:p}),()=>{const o=y.getTransitionProps(`${i}-fade`),w=y.getTransitionProps(`${i}-zoom`),R={};for(const E in e.icons)R[E]=u.getSlotVNode(l,e.icons,E);return g(t.createVNode(t.Fragment,null,[t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[f.value&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:`${i}-root ${c.value}`},[t.createVNode(t.Transition,o,{default:()=>[t.withDirectives(t.createVNode("div",{class:`${i}-mask ${c.value}`},null),[[t.vShow,f.value&&h.value]])]}),t.createVNode("div",{ref:M,tabindex:-1,class:[`${i}-wrap`,`${c.value}`],onClick:E=>e.onHideOnClickModal&&de(E)},[t.createVNode(t.Transition,t.mergeProps(w,{onAfterLeave:()=>ue()}),{default:()=>[t.withDirectives(t.createVNode("div",{role:"dialog",class:`${i} ${c.value}`},[t.createVNode("div",{class:`${i}-content ${c.value}`},[t.createVNode("div",{class:`${i}-body ${c.value}`},[t.createVNode("div",{class:`${i}-img-wrapper ${c.value}`,style:{transform:`translate3d(${C.x}px, ${C.y}px, 0)`}},[t.createVNode("img",{onMousedown:Qe,onDblclick:Je,ref:z,class:`${i}-img ${c.value}`,src:Q.value,onLoad:()=>fe(),onError:E=>q(E),style:{transform:`scale3d(${A.x*d.value}, ${A.y*d.value}, 1) rotate(${O.value}deg)`}},null)])])])]),[[t.vShow,f.value&&h.value]])]})])])])]}),f.value&&h.value&&t.createVNode(Be,{open:f.value&&h.value,hashId:c.value,count:e.previewUrls.length,current:m.value,zIndex:e.zIndex+1,getContainer:e.getContainer,prefixCls:i,icons:we.omit(R,Oe.map(({type:E})=>E)),tools:Oe,infinite:e.infinite,countRender:u.getSlot(l,e,"countRenders"),showSwitch:k.value,showProgress:X.value,onClose:T,onActive:E=>E>0?ee():J()},null)]))}}}),ce={width:"100%",height:"100%"},He=()=>({position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",opacity:0}),Ke=e=>({[e.componentCls]:{display:"inline-block",position:"relative",overflow:"hidden","&-inner":{...ce,verticalAlign:"top",opacity:1,[`&${e.componentCls}-inner-preview`]:{userSelect:"none"}},"&-placeholder":{...ce,backgroundColor:e.colorBgContainerDisabled,backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",backgroundRepeat:"no-repeat",backgroundPosition:"center center",backgroundSize:"30%"},"&-error":{...ce,display:"flex",alignItems:"center",justifyContent:"center",color:e.colorText,backgroundColor:e.colorBgContainerDisabled},"&-preview":He()}}),Ye=e=>e&&e.nodeType===Node.ELEMENT_NODE;let Me="";const We=[...pe,"fallback","placeholder"],B=t.defineComponent({props:ae,name:"GImage",emits:["error","click","load"],slots:Object,setup(e,{slots:n,emit:a,attrs:l}){const i=u.getPrefixCls({suffixCls:"image"}),{wrapSSR:g,hashId:c}=y.useProStyle("Image",[Ke],i),f=t.ref(),p=t.ref(""),h=t.ref(!1),I=t.ref(!0),M=t.ref(!1),m=t.ref(null),d=t.ref();let O,S;const A=t.computed(()=>!u.isServer&&e.fit?{"object-fit":e.fit}:{}),C=t.computed(()=>{const{previewUrls:s}=e.preview;return u.isArray(s)&&s.length>0||e.showPreview}),b=t.computed(()=>{const{previewUrls:s=[],current:N=0}=e.preview;if(u.isNumber(N))return s.length>=N?N:0;const T=s.indexOf(e.src);return T>=0?T:0}),W=s=>{p.value=e.src,I.value=!1,h.value=!1,a("load",s)},z=s=>{I.value=!1,h.value=!0,a("error",s)},x=()=>{if(u.isServer)return;I.value=!0,h.value=!1;const s=new Image;s.onload=N=>W(N),s.onerror=z,Object.keys(l||{}).forEach(N=>{if(N.toLowerCase()==="onload")return;const T=(l||{})[N];s.setAttribute(N,T)}),s.src=e.src},_=ie.useThrottleFn(Q,200),H=()=>{u.isServer||!d.value||!_||(O(),d.value=void 0)};function Q(){u.isInContainer(m.value,d.value)&&(x(),H())}const K=async()=>{if(u.isServer)return;await t.nextTick();const{scrollContainer:s}=e;Ye(s)?d.value=s:u.isString(s)&&s!==""?d.value=document.querySelector(s)??void 0:m.value&&(d.value=u.getScrollContainer(m.value)),d.value&&(O=ie.useEventListener(d,"scroll",_),setTimeout(()=>Q(),200))},G=s=>{if(s.ctrlKey){if(s.deltaY<0)return s.preventDefault(),!1;if(s.deltaY>0)return s.preventDefault(),!1}},P=()=>{C.value&&(S=ie.useEventListener("wheel",G,{passive:!1}),Me=document.body.style.overflow,document.body.style.overflow="hidden",M.value=!0)},k=()=>{S==null||S(),document.body.style.overflow=Me,M.value=!1};t.watch(()=>e.src,()=>{e.lazy?(I.value=!0,h.value=!1,H(),K()):x()}),t.watchEffect(()=>{var s,N;C.value&&M.value?(s=f.value)==null||s.setOpen(!0):(N=f.value)==null||N.setOpen(!1)});const X=s=>u.isNumber(s)?s+"px":s;return oe.onMountedOrActivated(()=>{e.lazy?K():x()}),()=>{var Z;const{crossorigin:s,decoding:N,alt:T,sizes:ue,srcset:de,usemap:fe,class:q,style:J={}}=l,ee={crossorigin:s,decoding:N,alt:T,sizes:ue,srcset:de,usemap:fe,style:{...A.value,height:e.height?X(e.height):void 0}},Y=u.getSlotsProps(We,n,e,{render:!0});return g(t.createVNode("div",{class:{[`${c.value}`]:!0,[`${i}`]:!0,[`${q}`]:!!q},ref:ge=>m.value=ge,style:{width:e.width?X(e.width):void 0,height:e.height?X(e.height):void 0,display:e.lazy?"block":void 0,...J},onClick:()=>{a("click")}},[I.value?Y.placeholder||t.createVNode("div",{class:`${i}-placeholder ${c.value}`},null):h.value?Y.fallback||t.createVNode("div",{class:`${i}-error ${c.value}`},[t.createTextVNode("加载失败")]):p.value&&t.createVNode("img",t.mergeProps(ee,{class:{[`${c.value}`]:!0,[`${e.imageClassName}`]:!!e.imageClassName,[`${i}-inner`]:!0,[`${i}-inner-preview`]:C.value},alt:e.alt,src:p.value}),null),C.value&&t.createVNode("div",{class:`${i}-preview ${c.value}`,onClick:()=>P()},null),C.value&&t.createVNode(ye,t.mergeProps({ref:f},e.preview,we.pick(Y,pe),{previewUrls:((Z=e.preview)==null?void 0:Z.previewUrls)||[e.src],current:b.value,onClose:()=>k()}),null)]))}}});B.isGImage=!0,B.install=e=>(e.component(B.name,B),e),v.GImage=B,v.ImagePreview=ye,v.baseProps=V,v.default=B,v.imagePorps=ae,v.imagePreviewProps=$,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(function(v,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@gx-design-vue/pro-hooks"),require("@gx-design-vue/pro-provider"),require("@gx-design-vue/pro-utils"),require("@vueuse/core"),require("lodash-es"),require("@ant-design/icons-vue"),require("@ctrl/tinycolor")):typeof define=="function"&&define.amd?define(["exports","vue","@gx-design-vue/pro-hooks","@gx-design-vue/pro-provider","@gx-design-vue/pro-utils","@vueuse/core","lodash-es","@ant-design/icons-vue","@ctrl/tinycolor"],t):(v=typeof globalThis<"u"?globalThis:v||self,t(v.GImage={},v.vue,v.proHooks,v.proProvider,v.proUtils,v.core,v.lodashEs,v.iconsVue,v.tinycolor))})(this,function(v,t,oe,y,u,ie,we,L,_){"use strict";function Le(e,n){process.env.NODE_ENV!=="production"&&!e&&console!==void 0&&console.error(`Warning: ${n}`)}let ve=e=>setTimeout(e,16),he=e=>clearTimeout(e);typeof window<"u"&&"requestAnimationFrame"in window&&(ve=e=>window.requestAnimationFrame(e),he=e=>window.cancelAnimationFrame(e));let Se=0;const ae=new Map;function Ne(e){ae.delete(e)}function re(e,n=1){Se+=1;const a=Se;function l(i){if(i===0)Ne(a),e();else{const g=ve(()=>{l(i-1)});ae.set(a,g)}}return l(n),a}re.cancel=e=>{const n=ae.get(e);return Ne(n),he(n)};function Te(e){const n=t.ref(null),a=t.reactive({...e}),l=t.ref([]),i=g=>{n.value===null&&(l.value=[],n.value=re(()=>{let c;l.value.forEach(f=>{c={...c,...f}}),Object.assign(a,c),n.value=null})),l.value.push(g)};return t.onMounted(()=>{n.value&&re.cancel(n.value)}),[a,i]}const F={infinite:{type:Boolean,default:!0},zIndex:{type:Number,default:2e3},current:{type:Number,default:0},getContainer:{type:String}},le={preview:{type:Object,default:()=>({current:0,infinite:!0,onHideOnClickModal:!0})},showPreview:{type:Boolean,default:!0},src:{type:String,default:""},alt:{type:String,default:""},fit:{type:String,default:"contain"},lazy:Boolean,scrollContainer:{type:[String,Object]},placeholder:{type:[Function,Object],default:()=>{}},fallback:{type:[Function,Object],default:()=>{}},onLoad:{type:Function},onError:{type:Function},onClick:{type:Function},imageClassName:String,imageStyle:Object,width:Number,height:Number,zIndex:F.zIndex,getContainer:F.getContainer},V={previewUrls:{type:Array,default:()=>[]},disabled:Boolean,zIndex:F.zIndex,current:F.current,infinite:F.infinite,getContainer:le.getContainer,onHideOnClickModal:{type:Boolean,default:!0},countRender:[Function,Array,Object],icons:{type:Object,default:()=>({})}},be=t.defineComponent({name:"Operations",inheritAttrs:!1,props:{open:Boolean,count:{type:Number,default:0},current:{type:Number,default:0},showSwitch:Boolean,showProgress:Boolean,prefixCls:String,hashId:String,zIndex:V.zIndex,icons:V.icons,infinite:V.infinite,getContainer:V.getContainer,countRender:V.countRender,tools:Array,onClose:Function,onActive:Function},setup(e){const n=(a,l)=>{var i;a.preventDefault(),a.stopPropagation(),(i=e.onActive)==null||i.call(e,l)};return()=>{const{prefixCls:a,hashId:l,tools:i}=e,g=y.getTransitionProps(`${e.prefixCls}-fade`),c=`${a}-operations-operation`,f=`${a}-operations-icon`;return t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[t.createVNode(t.Transition,g,{default:()=>{var p,h,I,M;return[t.withDirectives(t.createVNode("div",{class:u.classNames(`${a}-operations-wrapper`,l),style:{zIndex:e.zIndex}},[((p=e.icons)==null?void 0:p.close)===null?null:t.createVNode("button",{class:`${a}-close ${l}`,onClick:e.onClose},[((h=e.icons)==null?void 0:h.close)||t.createVNode(L.CloseOutlined,null,null)]),e.showSwitch&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:u.classNames(`${a}-switch-left ${l}`,{[`${a}-switch-left-disabled`]:e.infinite?!1:e.current===0}),onClick:m=>n(m,-1)},[((I=e.icons)==null?void 0:I.left)||t.createVNode(L.LeftOutlined,null,null)]),t.createVNode("div",{class:u.classNames(`${a}-switch-right ${l}`,{[`${a}-switch-right-disabled`]:e.infinite?!1:e.current===e.count-1}),onClick:m=>n(m,1)},[((M=e.icons)==null?void 0:M.right)||t.createVNode(L.RightOutlined,null,null)])]),t.createVNode("div",{class:`${a}-footer ${l}`},[e.showProgress&&t.createVNode("div",{class:`${a}-progress`},[e.countRender?e.countRender(e.current+1,e.count):`${e.current+1} / ${e.count}`]),t.createVNode("div",{class:`${e.prefixCls}-operations`},[i==null?void 0:i.map(({icon:m,onClick:d,type:O,disabled:S})=>t.createVNode("div",{class:u.classNames(c,{[`${e.prefixCls}-operations-operation-disabled`]:S&&(S==null?void 0:S.value)}),onClick:d,key:O},[t.cloneVNode(m,{class:f})]))])])]),[[t.vShow,e.open]])]}})]})}}}),Pe=new y.Keyframe("viewFadeIn",{"0%":{opacity:0},"100%":{opacity:1}}),Re=new y.Keyframe("viewFadeOut",{"0%":{opacity:1},"100%":{opacity:0}}),$e=new y.Keyframe("viewZoomBadgeIn",{"0%":{transform:"scale(0.2)",opacity:0},"100%":{transform:"scale(1)",opacity:1}}),De=new y.Keyframe("viewZoomBadgeOut",{"0%":{transform:"scale(1)"},"100%":{transform:"scale(0.2)",opacity:0}}),Ie=e=>({position:e||"absolute",inset:0});function se(e){return{position:e,top:0,insetInlineEnd:0,bottom:0,insetInlineStart:0}}const ze=e=>{const{previewCls:n,modalMaskBg:a,paddingSM:l,marginXL:i,margin:g,paddingLG:c,previewOperationColorDisabled:f,previewOperationHoverColor:p,motionDurationSlow:h,iconCls:I,colorTextLightSolid:M}=e,m=new _.TinyColor(a).setAlpha(.1),d=m.clone().setAlpha(.2);return{[`${n}-footer`]:{position:"fixed",bottom:i,left:{_skip_check_:!0,value:"50%"},display:"flex",flexDirection:"column",alignItems:"center",color:e.previewOperationColor,transform:"translateX(-50%)"},[`${n}-progress`]:{marginBottom:g},[`${n}-close`]:{position:"fixed",top:i,right:{_skip_check_:!0,value:i},display:"flex",color:M,backgroundColor:m.toRgbString(),borderRadius:"50%",padding:l,outline:0,border:0,cursor:"pointer",transition:`all ${h}`,"&:hover":{backgroundColor:d.toRgbString()},[`& > ${I}`]:{fontSize:e.previewOperationSize}},[`${n}-operations`]:{display:"flex",alignItems:"center",padding:`0 ${y.unit(c)}`,backgroundColor:m.toRgbString(),borderRadius:100,"&-operation":{marginInlineStart:l,padding:l,cursor:"pointer",transition:`all ${h}`,userSelect:"none",[`&:not(${n}-operations-operation-disabled):hover > ${I}`]:{color:p},"&-disabled":{color:f,cursor:"not-allowed"},"&:first-of-type":{marginInlineStart:0},[`& > ${I}`]:{fontSize:e.previewOperationSize}}}}},_e=e=>{const{modalMaskBg:n,iconCls:a,previewOperationColorDisabled:l,previewCls:i,zIndexPopup:g,motionDurationSlow:c}=e,f=new _.TinyColor(n).setAlpha(.1),p=f.clone().setAlpha(.2);return{[`${i}-switch-left, ${i}-switch-right`]:{position:"fixed",insetBlockStart:"50%",zIndex:e.calc(g).add(1).equal(),display:"flex",alignItems:"center",justifyContent:"center",width:e.imagePreviewSwitchSize,height:e.imagePreviewSwitchSize,marginTop:e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),color:e.previewOperationColor,background:f.toRgbString(),borderRadius:"50%",transform:"translateY(-50%)",cursor:"pointer",transition:`all ${c}`,userSelect:"none","&:hover":{background:p.toRgbString()},"&-disabled":{"&, &:hover":{color:l,background:"transparent",cursor:"not-allowed",[`> ${a}`]:{cursor:"not-allowed"}}},[`> ${a}`]:{fontSize:e.previewOperationSize}},[`${i}-switch-left`]:{insetInlineStart:e.marginSM},[`${i}-switch-right`]:{insetInlineEnd:e.marginSM}}},Fe=e=>({[e.componentCls]:{height:"100%",textAlign:"center",pointerEvents:"none","&-root":{...se("fixed"),zIndex:e.zIndexPopup,overflow:"auto",outline:0,WebkitOverflowScrolling:"touch"},"&-wrap":{...se("fixed"),zIndex:e.zIndexPopup,overflow:"auto",outline:0,WebkitOverflowScrolling:"touch"},"&-mask":{...se("fixed"),zIndex:e.zIndexPopupBase,height:"100%",backgroundColor:e.colorBgMask},"&-body":{...Ie(),overflow:"hidden"},"&-img":{maxWidth:"100%",maxHeight:"100%",verticalAlign:"middle",transform:"scale3d(1, 1, 1)",cursor:"grab",transition:`transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,userSelect:"none",pointerEvents:"auto","&-wrapper":{...Ie(),display:"flex",justifyContent:"center",alignItems:"center",transition:`transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,"&::before":{display:"inline-block",width:1,height:"50%",marginInlineEnd:-1,content:'""'}}},"&-fade-appear, &-fade-enter":{animationName:Pe,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear"},"&-fade-leave":{animationName:Re,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear"},"&-zoom-appear, &-zoom-enter":{animationName:$e,opacity:0,animationTimingFunction:e.motionEaseOutCirc,animationFillMode:"both",transform:"none",animationDuration:e.motionDurationSlow,userSelect:"none"},"&-zoom-enter-active":{animationPlayState:"running"},"&-zoom-leave":{animationName:De,animationDuration:e.motionDurationSlow,animationTimingFunction:e.motionEaseOutBack,animationFillMode:"both"}},[`${e.componentCls}-root`]:{[`${e.componentCls}-wrapper`]:{zIndex:e.zIndexPopup}},[`${e.componentCls}-operations-wrapper`]:{position:"fixed",insetBlockStart:0,insetInlineEnd:0,zIndex:e.zIndexPopup+1,width:"100%"},"&":[ze(e),_e(e)]});function Ve(e){return y.useStyle("ImageViewer",n=>{const a=y.mergeToken(n,{zIndexPopup:n.zIndexPopupBase+80,previewOperationColorDisabled:new _.TinyColor(n.colorTextLightSolid).setAlpha(.25).toRgbString(),previewOperationHoverColor:new _.TinyColor(n.colorTextLightSolid).setAlpha(.85).toRgbString(),modalMaskBg:new _.TinyColor("#000").setAlpha(.45).toRgbString(),previewOperationColor:new _.TinyColor(n.colorTextLightSolid).toRgbString(),previewOperationSize:n.fontSizeIcon*1.5,imagePreviewSwitchSize:n.controlHeightLG,iconCls:"anticon",previewCls:n.componentCls});return[Fe(a)]},e)}let Ce=!1;try{const e=Object.defineProperty({},"passive",{get(){Ce=!0}});window.addEventListener("testPassive",null,e),window.removeEventListener("testPassive",null,e)}catch{}function U(e,n,a,l){if(e&&e.addEventListener){let i=l;i===void 0&&Ce&&(n==="touchstart"||n==="touchmove"||n==="wheel")&&(i={passive:!1}),e.addEventListener(n,a,i)}return{remove:()=>{e&&e.removeEventListener&&e.removeEventListener(n,a)}}}const r={MAC_ENTER:3,BACKSPACE:8,TAB:9,NUM_CENTER:12,ENTER:13,SHIFT:16,CTRL:17,ALT:18,PAUSE:19,CAPS_LOCK:20,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40,PRINT_SCREEN:44,INSERT:45,DELETE:46,ZERO:48,ONE:49,TWO:50,THREE:51,FOUR:52,FIVE:53,SIX:54,SEVEN:55,EIGHT:56,NINE:57,QUESTION_MARK:63,A:65,B:66,C:67,D:68,E:69,F:70,G:71,H:72,I:73,J:74,K:75,L:76,M:77,N:78,O:79,P:80,Q:81,R:82,S:83,T:84,U:85,V:86,W:87,X:88,Y:89,Z:90,META:91,WIN_KEY_RIGHT:92,CONTEXT_MENU:93,NUM_ZERO:96,NUM_ONE:97,NUM_TWO:98,NUM_THREE:99,NUM_FOUR:100,NUM_FIVE:101,NUM_SIX:102,NUM_SEVEN:103,NUM_EIGHT:104,NUM_NINE:105,NUM_MULTIPLY:106,NUM_PLUS:107,NUM_MINUS:109,NUM_PERIOD:110,NUM_DIVISION:111,F1:112,F2:113,F3:114,F4:115,F5:116,F6:117,F7:118,F8:119,F9:120,F10:121,F11:122,F12:123,NUMLOCK:144,SEMICOLON:186,DASH:189,EQUALS:187,COMMA:188,PERIOD:190,SLASH:191,APOSTROPHE:192,SINGLE_QUOTE:222,OPEN_SQUARE_BRACKET:219,BACKSLASH:220,CLOSE_SQUARE_BRACKET:221,WIN_KEY:224,MAC_FF_META:224,WIN_IME:229,isTextModifyingKeyEvent:function(n){const{keyCode:a}=n;if(n.altKey&&!n.ctrlKey||n.metaKey||a>=r.F1&&a<=r.F12)return!1;switch(a){case r.ALT:case r.CAPS_LOCK:case r.CONTEXT_MENU:case r.CTRL:case r.DOWN:case r.END:case r.ESC:case r.HOME:case r.INSERT:case r.LEFT:case r.MAC_FF_META:case r.META:case r.NUMLOCK:case r.NUM_CENTER:case r.PAGE_DOWN:case r.PAGE_UP:case r.PAUSE:case r.PRINT_SCREEN:case r.RIGHT:case r.SHIFT:case r.UP:case r.WIN_KEY:case r.WIN_KEY_RIGHT:return!1;default:return!0}},isCharacterKey:function(n){if(n>=r.ZERO&&n<=r.NINE||n>=r.NUM_ZERO&&n<=r.NUM_MULTIPLY||n>=r.A&&n<=r.Z||window.navigator.userAgent.includes("WebKit")&&n===0)return!0;switch(n){case r.SPACE:case r.QUESTION_MARK:case r.NUM_PLUS:case r.NUM_MINUS:case r.NUM_PERIOD:case r.NUM_DIVISION:case r.SEMICOLON:case r.DASH:case r.EQUALS:case r.COMMA:case r.PERIOD:case r.SLASH:case r.APOSTROPHE:case r.SINGLE_QUOTE:case r.OPEN_SQUARE_BRACKET:case r.BACKSLASH:case r.CLOSE_SQUARE_BRACKET:return!0;default:return!1}}};function Ue(e){const n=e.getBoundingClientRect(),a=document.documentElement;return{left:n.left+(window.scrollX||a.scrollLeft)-(a.clientLeft||document.body.clientLeft||0),top:n.top+(window.scrollY||a.scrollTop)-(a.clientTop||document.body.clientTop||0)}}function je(){const e=document.documentElement.clientWidth,n=window.innerHeight||document.documentElement.clientHeight;return{width:e,height:n}}function Ee(e,n,a,l){const i=n+a,g=(a-l)/2;if(a>l){if(n>0)return{[e]:g};if(n<0&&i<l)return{[e]:-g}}else if(n<0||i>l)return{[e]:n<0?g:-g};return{}}function Be(e,n,a,l){const{width:i,height:g}=je();let c=null;return e<=i&&n<=g?c={x:0,y:0}:(e>i||n>g)&&(c={...Ee("x",a,e,i),...Ee("y",l,n,g)}),c}const $={x:0,y:0},j={rotateLeft:t.createVNode(L.RotateLeftOutlined,null,null),rotateRight:t.createVNode(L.RotateRightOutlined,null,null),zoomIn:t.createVNode(L.ZoomInOutlined,null,null),zoomOut:t.createVNode(L.ZoomOutOutlined,null,null),flipX:t.createVNode(L.SwapOutlined,null,null),flipY:t.createVNode(L.SwapOutlined,{rotate:90},null)},pe=["close","left","right","rotateRight","rotateRight","zoomOut","flipX","flipY","rotateLeft"],ye=t.defineComponent({name:"GImagePreview",props:V,inheritAttrs:!1,emits:["close","switch","afterClose"],emit:Object,setup:(e,{emit:n,expose:a,slots:l})=>{const i=u.getPrefixCls({suffixCls:"image-view"}),{wrapSSR:g,hashId:c}=Ve(i),[f,p]=oe.useState(!1),[h,I]=oe.useState(!1),M=t.ref(null),m=t.ref(e.current),d=t.shallowRef(1),O=t.shallowRef(0),S=t.shallowRef(!1),x=t.reactive({x:1,y:1}),[C,b]=Te($),G=t.shallowRef({wheelDirection:0}),D=t.shallowRef(),A=t.reactive({originX:0,originY:0,deltaX:0,deltaY:0}),z=t.reactive(new Map),H=t.computed(()=>new Map(Array.from(z).map(([o,{url:w}])=>[o,w]))),Q=t.computed(()=>H.value.get(m.value)),K=t.computed(()=>H.value.size),W=t.computed(()=>Array.from(H.value.keys())),P=t.computed(()=>W.value.indexOf(m.value)),k=t.computed(()=>K.value>1),X=t.computed(()=>K.value>=1);t.watch(f,o=>{o&&(h.value=!0)});const s=o=>{m.value=o};t.watch(()=>e.current,o=>{u.isNumber(o)&&s(o)});function N(o,w){z.set(o,{url:w,loading:!0,canPreview:!1})}const T=()=>{I(!1),m.value=e.current},ue=()=>{d.value=1,O.value=0,x.x=1,x.y=1,b($),n("close")},de=o=>{S.value||M.value===(o==null?void 0:o.target)&&T()},fe=()=>{const o=z.get(m.value);o&&(o.loading=!1,o.canPreview=!0)},q=o=>{const w=z.get(m.value);w&&(w.loading=!1,w.canPreview=!1),o.target.alt="加载失败"},J=()=>{if(P.value>0||e.infinite){const o=P.value-1<0?e.previewUrls.length-1:P.value-1;s(W.value[o])}},ee=()=>{if(P.value<K.value-1||e.infinite){const o=P.value+1>e.previewUrls.length-1?0:P.value+1;s(W.value[o])}},Y=o=>{o?d.value+=.5:d.value++,b($)},Z=o=>{d.value>1&&(o?d.value-=.5:d.value--),b($)},ge=()=>{O.value+=90},We=()=>{O.value-=90},Xe=()=>{x.x=-x.x},Ze=()=>{x.y=-x.y},Oe=[{icon:u.getSlotVNode(l,e.icons,"zoomIn")||j.zoomIn,onClick:()=>Y(),type:"zoomIn"},{icon:u.getSlotVNode(l,e.icons,"zoomOut")||j.zoomOut,onClick:()=>Z(),type:"zoomOut",disabled:t.computed(()=>d.value===1)},{icon:u.getSlotVNode(l,e.icons,"rotateRight")||j.rotateRight,onClick:ge,type:"rotateRight"},{icon:u.getSlotVNode(l,e.icons,"rotateLeft")||j.rotateLeft,onClick:We,type:"rotateLeft"},{icon:u.getSlotVNode(l,e.icons,"flipX")||j.flipX,onClick:Xe,type:"flipX"},{icon:u.getSlotVNode(l,e.icons,"flipY")||j.flipY,onClick:Ze,type:"flipY"}],xe=()=>{if(f.value&&S.value&&D.value){const o=D.value.offsetWidth*d.value,w=D.value.offsetHeight*d.value,{left:R,top:E}=Ue(D.value),te=O.value%180!==0;S.value=!1;const ne=Be(te?w:o,te?o:w,R,E);ne&&b({...ne})}},Qe=o=>{o.button===0&&(o.preventDefault(),o.stopPropagation(),A.deltaX=o.pageX-C.x,A.deltaY=o.pageY-C.y,A.originX=C.x,A.originY=C.y,S.value=!0)},Ae=o=>{f.value&&S.value&&b({x:o.pageX-A.deltaX,y:o.pageY-A.deltaY})},ke=o=>{if(!f.value)return;o.preventDefault();const w=o.deltaY;G.value={wheelDirection:w}},qe=o=>{!f.value||!k.value||(o.keyCode===r.LEFT?J():o.keyCode===r.RIGHT&&ee())},Je=()=>{f.value&&(d.value!==1&&(d.value=1),(C.x!==$.x||C.y!==$.y)&&b($))};let me=()=>{};return t.onMounted(()=>{t.watch(()=>e.previewUrls,o=>{u.isArray(o)&&o.forEach((w,R)=>{N(R,w)})},{flush:"post",immediate:!0}),t.watch([()=>f.value,S],()=>{me();let o,w;const R=U(window,"mouseup",xe,!1),E=U(window,"mousemove",Ae,!1),te=U(window,"wheel",ke,{passive:!1}),ne=U(window,"keydown",qe,!1);try{window.top!==window.self&&(o=U(window.top,"mouseup",xe,!1),w=U(window.top,"mousemove",Ae,!1))}catch(et){Le(!1,`[vc-image] ${et}`)}me=()=>{R.remove(),E.remove(),te.remove(),ne.remove(),o&&o.remove(),w&&w.remove()}},{flush:"post",immediate:!0}),t.watch([G],()=>{const{wheelDirection:o}=G.value;o>0?Z(!0):o<0&&Y(!0)})}),t.onUnmounted(()=>{me()}),a({setOpen:p}),()=>{const o=y.getTransitionProps(`${i}-fade`),w=y.getTransitionProps(`${i}-zoom`),R={};for(const E in e.icons)R[E]=u.getSlotVNode(l,e.icons,E);return g(t.createVNode(t.Fragment,null,[t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[f.value&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:`${i}-root ${c.value}`},[t.createVNode(t.Transition,o,{default:()=>[t.withDirectives(t.createVNode("div",{class:`${i}-mask ${c.value}`},null),[[t.vShow,f.value&&h.value]])]}),t.createVNode("div",{ref:M,tabindex:-1,class:[`${i}-wrap`,`${c.value}`],onClick:E=>e.onHideOnClickModal&&de(E)},[t.createVNode(t.Transition,t.mergeProps(w,{onAfterLeave:()=>ue()}),{default:()=>[t.withDirectives(t.createVNode("div",{role:"dialog",class:`${i} ${c.value}`},[t.createVNode("div",{class:`${i}-content ${c.value}`},[t.createVNode("div",{class:`${i}-body ${c.value}`},[t.createVNode("div",{class:`${i}-img-wrapper ${c.value}`,style:{transform:`translate3d(${C.x}px, ${C.y}px, 0)`}},[t.createVNode("img",{onMousedown:Qe,onDblclick:Je,ref:D,class:`${i}-img ${c.value}`,src:Q.value,onLoad:()=>fe(),onError:E=>q(E),style:{transform:`scale3d(${x.x*d.value}, ${x.y*d.value}, 1) rotate(${O.value}deg)`}},null)])])])]),[[t.vShow,f.value&&h.value]])]})])])])]}),f.value&&h.value&&t.createVNode(be,{open:f.value&&h.value,hashId:c.value,count:e.previewUrls.length,current:m.value,zIndex:e.zIndex+1,getContainer:e.getContainer,prefixCls:i,icons:we.omit(R,Oe.map(({type:E})=>E)),tools:Oe,infinite:e.infinite,countRender:u.getSlot(l,e,"countRenders"),showSwitch:k.value,showProgress:X.value,onClose:T,onActive:E=>E>0?ee():J()},null)]))}}}),ce={width:"100%",height:"100%"},He=()=>({position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",opacity:0}),Ke=e=>({[e.componentCls]:{display:"inline-block",position:"relative",overflow:"hidden","&-inner":{...ce,verticalAlign:"top",opacity:1,[`&${e.componentCls}-inner-preview`]:{userSelect:"none"}},"&-placeholder":{...ce,backgroundColor:e.colorBgContainerDisabled,backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",backgroundRepeat:"no-repeat",backgroundPosition:"center center",backgroundSize:"30%"},"&-error":{...ce,display:"flex",alignItems:"center",justifyContent:"center",color:e.colorText,backgroundColor:e.colorBgContainerDisabled},"&-preview":He()}}),Ye=e=>e&&e.nodeType===Node.ELEMENT_NODE;let Me="";const Ge=[...pe,"fallback","placeholder"],B=t.defineComponent({props:le,name:"GImage",emits:["error","click","load"],slots:Object,setup(e,{slots:n,emit:a,attrs:l}){const i=u.getPrefixCls({suffixCls:"image"}),{wrapSSR:g,hashId:c}=y.useProStyle("Image",[Ke],i),f=t.ref(),p=t.ref(""),h=t.ref(!1),I=t.ref(!0),M=t.ref(!1),m=t.ref(null),d=t.ref();let O,S;const x=t.computed(()=>!u.isServer&&e.fit?{"object-fit":e.fit}:{}),C=t.computed(()=>{const{previewUrls:s}=e.preview;return u.isArray(s)&&s.length>0||e.showPreview}),b=t.computed(()=>{const{previewUrls:s=[],current:N=0}=e.preview;if(u.isNumber(N))return s.length>=N?N:0;const T=s.indexOf(e.src);return T>=0?T:0}),G=s=>{p.value=e.src,I.value=!1,h.value=!1,a("load",s)},D=s=>{I.value=!1,h.value=!0,a("error",s)},A=()=>{if(u.isServer)return;I.value=!0,h.value=!1;const s=new Image;s.onload=N=>G(N),s.onerror=D,Object.keys(l||{}).forEach(N=>{if(N.toLowerCase()==="onload")return;const T=(l||{})[N];s.setAttribute(N,T)}),s.src=e.src},z=ie.useThrottleFn(Q,200),H=()=>{u.isServer||!d.value||!z||(O(),d.value=void 0)};function Q(){u.isInContainer(m.value,d.value)&&(A(),H())}const K=async()=>{if(u.isServer)return;await t.nextTick();const{scrollContainer:s}=e;Ye(s)?d.value=s:u.isString(s)&&s!==""?d.value=document.querySelector(s)??void 0:m.value&&(d.value=u.getScrollContainer(m.value)),d.value&&(O=ie.useEventListener(d,"scroll",z),setTimeout(()=>Q(),200))},W=s=>{if(s.ctrlKey){if(s.deltaY<0)return s.preventDefault(),!1;if(s.deltaY>0)return s.preventDefault(),!1}},P=()=>{C.value&&(S=ie.useEventListener("wheel",W,{passive:!1}),Me=document.body.style.overflow,document.body.style.overflow="hidden",M.value=!0)},k=()=>{S==null||S(),document.body.style.overflow=Me,M.value=!1};t.watch(()=>e.src,()=>{e.lazy?(I.value=!0,h.value=!1,H(),K()):A()}),t.watchEffect(()=>{var s,N;C.value&&M.value?(s=f.value)==null||s.setOpen(!0):(N=f.value)==null||N.setOpen(!1)});const X=s=>u.isNumber(s)?s+"px":s;return oe.onMountedOrActivated(()=>{e.lazy?K():A()}),()=>{var Z;const{crossorigin:s,decoding:N,alt:T,sizes:ue,srcset:de,usemap:fe,class:q,style:J={}}=l,ee={crossorigin:s,decoding:N,alt:T,sizes:ue,srcset:de,usemap:fe,style:{...x.value,height:e.height?X(e.height):void 0}},Y=u.getSlotsProps(Ge,n,e,{render:!0});return g(t.createVNode("div",{class:{[`${c.value}`]:!0,[`${i}`]:!0,[`${q}`]:!!q},ref:ge=>m.value=ge,style:{width:e.width?X(e.width):void 0,height:e.height?X(e.height):void 0,display:e.lazy?"block":void 0,...J},onClick:()=>{a("click")}},[I.value?Y.placeholder||t.createVNode("div",{class:`${i}-placeholder ${c.value}`},null):h.value?Y.fallback||t.createVNode("div",{class:`${i}-error ${c.value}`},[t.createTextVNode("加载失败")]):p.value&&t.createVNode("img",t.mergeProps(ee,{class:{[`${c.value}`]:!0,[`${e.imageClassName}`]:!!e.imageClassName,[`${i}-inner`]:!0,[`${i}-inner-preview`]:C.value},alt:e.alt,src:p.value}),null),C.value&&t.createVNode("div",{class:`${i}-preview ${c.value}`,onClick:()=>P()},null),C.value&&t.createVNode(ye,t.mergeProps({ref:f},e.preview,we.pick(Y,pe),{previewUrls:((Z=e.preview)==null?void 0:Z.previewUrls)||[e.src],current:b.value,onClose:()=>k()}),null)]))}}});B.isGImage=!0,B.install=e=>(e.component(B.name,B),e),v.GImage=B,v.GImagePreview=ye,v.baseProps=F,v.default=B,v.imageProps=le,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
export * from './props';
|
|
1
|
+
import type { PreviewPropsIcons } from './ImagePreview/props';
|
|
3
2
|
export type { GImageProps } from './Image';
|
|
4
|
-
export type { ImagePreviewProps } from './ImagePreview';
|
|
5
|
-
export type { PreviewPropsIcons };
|
|
6
|
-
export { imagePreviewProps };
|
|
7
|
-
export { default as ImagePreview } from './ImagePreview';
|
|
8
3
|
export { default } from './Image';
|
|
9
4
|
export { default as GImage } from './Image';
|
|
5
|
+
export type { PreviewPropsIcons };
|
|
6
|
+
export type { ImagePreviewProps } from './ImagePreview';
|
|
7
|
+
export { default as GImagePreview } from './ImagePreview';
|
|
8
|
+
export * from './ImagePreview/props';
|
|
9
|
+
export * from './props';
|
package/dist/props.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { CSSProperties, PropType } from 'vue';
|
|
2
1
|
import type { CustomRender, WithFalse } from '@gx-design-vue/pro-utils';
|
|
2
|
+
import type { CSSProperties, PropType } from 'vue';
|
|
3
3
|
import type { BaseImagePreviewProps } from './ImagePreview/props';
|
|
4
4
|
export declare const baseProps: {
|
|
5
5
|
infinite: {
|
|
@@ -18,20 +18,10 @@ export declare const baseProps: {
|
|
|
18
18
|
type: PropType<string>;
|
|
19
19
|
};
|
|
20
20
|
};
|
|
21
|
-
export declare const
|
|
21
|
+
export declare const imageProps: {
|
|
22
22
|
preview: {
|
|
23
23
|
type: PropType<BaseImagePreviewProps>;
|
|
24
|
-
default: () =>
|
|
25
|
-
previewUrls: string[];
|
|
26
|
-
disabled: boolean;
|
|
27
|
-
zIndex: number;
|
|
28
|
-
current: number;
|
|
29
|
-
infinite: boolean;
|
|
30
|
-
getContainer: string;
|
|
31
|
-
onHideOnClickModal: boolean;
|
|
32
|
-
countRender: WithFalse<(current: number, total: number) => CustomRender>;
|
|
33
|
-
icons: import("./ImagePreview/props").PreviewPropsIcons;
|
|
34
|
-
}>;
|
|
24
|
+
default: () => BaseImagePreviewProps;
|
|
35
25
|
};
|
|
36
26
|
showPreview: {
|
|
37
27
|
type: PropType<boolean>;
|
package/dist/style.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import type { ProAliasToken } from '@gx-design-vue/pro-provider';
|
|
1
2
|
import type { CSSObject } from 'ant-design-vue';
|
|
2
3
|
import type { GenerateStyle } from 'ant-design-vue/es/theme/internal';
|
|
3
|
-
import type { ProAliasToken } from '@gx-design-vue/pro-provider';
|
|
4
4
|
export declare const genImageMaskStyle: () => CSSObject;
|
|
5
5
|
export declare const genImageStyle: GenerateStyle<ProAliasToken>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gx-design-vue/image",
|
|
3
|
-
"
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "0.2.0-beta.26",
|
|
5
|
+
"description": "Gx Design Image",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": {
|
|
8
|
+
"import": "./dist/image.js",
|
|
9
|
+
"require": "./dist/image.umd.cjs"
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
"main": "./dist/image.umd.cjs",
|
|
13
|
+
"module": "./dist/image.js",
|
|
14
|
+
"types": "./dist",
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
4
18
|
"scripts": {
|
|
5
19
|
"dev": "vite",
|
|
6
20
|
"build": "vite build",
|
|
@@ -10,34 +24,20 @@
|
|
|
10
24
|
"typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
|
11
25
|
"lint": "TIMING=1 eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
|
12
26
|
},
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
"type": "module",
|
|
17
|
-
"types": "./dist",
|
|
18
|
-
"main": "./dist/image.umd.cjs",
|
|
19
|
-
"module": "./dist/image.js",
|
|
20
|
-
"exports": {
|
|
21
|
-
".": {
|
|
22
|
-
"import": "./dist/image.js",
|
|
23
|
-
"require": "./dist/image.umd.cjs"
|
|
24
|
-
}
|
|
27
|
+
"peerDependencies": {
|
|
28
|
+
"ant-design-vue": "^4.1.2",
|
|
29
|
+
"vue": ">=3.0.0"
|
|
25
30
|
},
|
|
26
31
|
"dependencies": {
|
|
27
|
-
"
|
|
32
|
+
"@gx-design-vue/pro-hooks": "^0.2.0-beta.44",
|
|
33
|
+
"@gx-design-vue/pro-provider": "^0.1.0-beta.106",
|
|
34
|
+
"@gx-design-vue/pro-utils": "^0.2.0-beta.62",
|
|
28
35
|
"@vueuse/core": "^9.10.0",
|
|
29
|
-
"
|
|
30
|
-
"@gx-design-vue/pro-hooks": "^0.2.0-beta.33",
|
|
31
|
-
"@gx-design-vue/pro-provider": "^0.1.0-beta.96"
|
|
36
|
+
"lodash-es": "^4.17.21"
|
|
32
37
|
},
|
|
33
38
|
"devDependencies": {
|
|
34
39
|
"typescript": "^5.3.3"
|
|
35
40
|
},
|
|
36
|
-
"peerDependencies": {
|
|
37
|
-
"vue": ">=3.0.0",
|
|
38
|
-
"ant-design-vue": "^4.1.2"
|
|
39
|
-
},
|
|
40
|
-
"description": "Gx Design Image",
|
|
41
41
|
"authors": [
|
|
42
42
|
"gx12358 <gx12358@gmail.com> (https://github.com/gx12358)"
|
|
43
43
|
]
|