@gx-design-vue/image 0.2.0-beta.15 → 0.2.0-beta.17
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 +13 -13
- package/dist/components/ImageViewer.d.ts +41 -111
- package/dist/image.js +350 -359
- package/dist/image.umd.cjs +1 -1
- package/dist/props.d.ts +2 -2
- package/package.json +13 -40
package/dist/image.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { createTypes as Ze } from "vue-types";
|
|
2
|
-
import { createVNode as
|
|
3
|
-
import { ExpandOutlined as
|
|
4
|
-
import { isServer as
|
|
5
|
-
import { useState as Ne, onMountedOrActivated as
|
|
6
|
-
import { Keyframe as
|
|
7
|
-
import { useThrottleFn as
|
|
8
|
-
const
|
|
2
|
+
import { createVNode as f, defineComponent as Ve, shallowRef as Te, ref as C, reactive as Xe, computed as L, watch as _, nextTick as Ye, Teleport as _e, Transition as ke, withDirectives as ze, vShow as Oe, mergeProps as We, cloneVNode as qe, watchEffect as Qe, createTextVNode as Je } from "vue";
|
|
3
|
+
import { ExpandOutlined as Ke, OneToOneOutlined as et, CloseOutlined as tt, ZoomInOutlined as nt, ZoomOutOutlined as at, RotateRightOutlined as it, RotateLeftOutlined as rt, LeftOutlined as ot, RightOutlined as st } from "@ant-design/icons-vue";
|
|
4
|
+
import { isServer as q, getPrefixCls as Ge, isInContainer as lt, getSlotVNode as Le, isString as ut, getScrollContainer as ct, isNumber as ft } from "@gx-design-vue/pro-utils";
|
|
5
|
+
import { useState as Ne, onMountedOrActivated as dt } from "@gx-design-vue/pro-hooks";
|
|
6
|
+
import { Keyframe as fe, useStyle as ht, mergeToken as gt, getTransitionProps as $e, useProStyle as vt } from "@gx-design-vue/pro-provider";
|
|
7
|
+
import { useThrottleFn as mt, useEventListener as Ee } from "@vueuse/core";
|
|
8
|
+
const R = Ze({
|
|
9
9
|
func: void 0,
|
|
10
10
|
bool: void 0,
|
|
11
11
|
string: void 0,
|
|
@@ -14,7 +14,7 @@ const H = Ze({
|
|
|
14
14
|
object: void 0,
|
|
15
15
|
integer: void 0
|
|
16
16
|
});
|
|
17
|
-
|
|
17
|
+
R.extend([{
|
|
18
18
|
name: "looseBool",
|
|
19
19
|
getter: !0,
|
|
20
20
|
type: Boolean,
|
|
@@ -29,7 +29,7 @@ H.extend([{
|
|
|
29
29
|
getter: !0,
|
|
30
30
|
type: null
|
|
31
31
|
}]);
|
|
32
|
-
const
|
|
32
|
+
const D = {
|
|
33
33
|
infinite: {
|
|
34
34
|
type: Boolean,
|
|
35
35
|
default: !0
|
|
@@ -45,7 +45,7 @@ const P = {
|
|
|
45
45
|
getContainer: {
|
|
46
46
|
type: String
|
|
47
47
|
}
|
|
48
|
-
},
|
|
48
|
+
}, ue = {
|
|
49
49
|
previewTeleported: {
|
|
50
50
|
type: Boolean,
|
|
51
51
|
default: !0
|
|
@@ -66,7 +66,7 @@ const P = {
|
|
|
66
66
|
type: String,
|
|
67
67
|
default: "contain"
|
|
68
68
|
},
|
|
69
|
-
lazy:
|
|
69
|
+
lazy: R.bool,
|
|
70
70
|
scrollContainer: {
|
|
71
71
|
type: [String, Object]
|
|
72
72
|
},
|
|
@@ -89,63 +89,63 @@ const P = {
|
|
|
89
89
|
onClick: {
|
|
90
90
|
type: Function
|
|
91
91
|
},
|
|
92
|
-
disablePreview:
|
|
92
|
+
disablePreview: R.bool,
|
|
93
93
|
previewSrcList: {
|
|
94
94
|
type: Array,
|
|
95
95
|
default: () => []
|
|
96
96
|
},
|
|
97
|
-
imageClassName:
|
|
98
|
-
imageStyle:
|
|
99
|
-
width:
|
|
100
|
-
height:
|
|
101
|
-
zIndex:
|
|
102
|
-
infinite:
|
|
103
|
-
getContainer:
|
|
97
|
+
imageClassName: R.string,
|
|
98
|
+
imageStyle: R.style,
|
|
99
|
+
width: R.number,
|
|
100
|
+
height: R.number,
|
|
101
|
+
zIndex: D.zIndex,
|
|
102
|
+
infinite: D.infinite,
|
|
103
|
+
getContainer: D.getContainer,
|
|
104
104
|
initialIndex: {
|
|
105
|
-
...
|
|
105
|
+
...D.initialIndex,
|
|
106
106
|
default: () => {
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
|
-
},
|
|
109
|
+
}, pt = {
|
|
110
110
|
urlList: {
|
|
111
111
|
type: Array,
|
|
112
112
|
default: () => []
|
|
113
113
|
},
|
|
114
|
-
teleported:
|
|
115
|
-
zIndex:
|
|
116
|
-
initialIndex:
|
|
117
|
-
infinite:
|
|
118
|
-
getContainer:
|
|
119
|
-
onHideOnClickModal:
|
|
114
|
+
teleported: ue.previewTeleported,
|
|
115
|
+
zIndex: D.zIndex,
|
|
116
|
+
initialIndex: D.initialIndex,
|
|
117
|
+
infinite: D.infinite,
|
|
118
|
+
getContainer: ue.getContainer,
|
|
119
|
+
onHideOnClickModal: ue.hideOnClickModal,
|
|
120
120
|
icons: {
|
|
121
121
|
type: Object,
|
|
122
122
|
default: () => ({})
|
|
123
123
|
}
|
|
124
124
|
};
|
|
125
125
|
function v(e, t) {
|
|
126
|
-
|
|
127
|
-
var n =
|
|
126
|
+
bt(e) && (e = "100%");
|
|
127
|
+
var n = yt(e);
|
|
128
128
|
return e = t === 360 ? e : Math.min(t, Math.max(0, parseFloat(e))), n && (e = parseInt(String(e * t), 10) / 100), Math.abs(e - t) < 1e-6 ? 1 : (t === 360 ? e = (e < 0 ? e % t + t : e % t) / parseFloat(String(t)) : e = e % t / parseFloat(String(t)), e);
|
|
129
129
|
}
|
|
130
|
-
function
|
|
130
|
+
function oe(e) {
|
|
131
131
|
return Math.min(1, Math.max(0, e));
|
|
132
132
|
}
|
|
133
|
-
function
|
|
133
|
+
function bt(e) {
|
|
134
134
|
return typeof e == "string" && e.indexOf(".") !== -1 && parseFloat(e) === 1;
|
|
135
135
|
}
|
|
136
|
-
function
|
|
136
|
+
function yt(e) {
|
|
137
137
|
return typeof e == "string" && e.indexOf("%") !== -1;
|
|
138
138
|
}
|
|
139
139
|
function Ue(e) {
|
|
140
140
|
return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
|
|
141
141
|
}
|
|
142
|
-
function
|
|
142
|
+
function se(e) {
|
|
143
143
|
return e <= 1 ? "".concat(Number(e) * 100, "%") : e;
|
|
144
144
|
}
|
|
145
|
-
function
|
|
145
|
+
function H(e) {
|
|
146
146
|
return e.length === 1 ? "0" + e : String(e);
|
|
147
147
|
}
|
|
148
|
-
function
|
|
148
|
+
function wt(e, t, n) {
|
|
149
149
|
return {
|
|
150
150
|
r: v(e, 255) * 255,
|
|
151
151
|
g: v(t, 255) * 255,
|
|
@@ -158,16 +158,16 @@ function Re(e, t, n) {
|
|
|
158
158
|
if (a === i)
|
|
159
159
|
o = 0, r = 0;
|
|
160
160
|
else {
|
|
161
|
-
var
|
|
162
|
-
switch (o = l > 0.5 ?
|
|
161
|
+
var c = a - i;
|
|
162
|
+
switch (o = l > 0.5 ? c / (2 - a - i) : c / (a + i), a) {
|
|
163
163
|
case e:
|
|
164
|
-
r = (t - n) /
|
|
164
|
+
r = (t - n) / c + (t < n ? 6 : 0);
|
|
165
165
|
break;
|
|
166
166
|
case t:
|
|
167
|
-
r = (n - e) /
|
|
167
|
+
r = (n - e) / c + 2;
|
|
168
168
|
break;
|
|
169
169
|
case n:
|
|
170
|
-
r = (e - t) /
|
|
170
|
+
r = (e - t) / c + 4;
|
|
171
171
|
break;
|
|
172
172
|
}
|
|
173
173
|
r /= 6;
|
|
@@ -177,7 +177,7 @@ function Re(e, t, n) {
|
|
|
177
177
|
function be(e, t, n) {
|
|
178
178
|
return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? e + (t - e) * (6 * n) : n < 1 / 2 ? t : n < 2 / 3 ? e + (t - e) * (2 / 3 - n) * 6 : e;
|
|
179
179
|
}
|
|
180
|
-
function
|
|
180
|
+
function St(e, t, n) {
|
|
181
181
|
var a, i, r;
|
|
182
182
|
if (e = v(e, 360), t = v(t, 100), n = v(n, 100), t === 0)
|
|
183
183
|
i = n, r = n, a = n;
|
|
@@ -189,7 +189,7 @@ function xt(e, t, n) {
|
|
|
189
189
|
}
|
|
190
190
|
function De(e, t, n) {
|
|
191
191
|
e = v(e, 255), t = v(t, 255), n = v(n, 255);
|
|
192
|
-
var a = Math.max(e, t, n), i = Math.min(e, t, n), r = 0, o = a, l = a - i,
|
|
192
|
+
var a = Math.max(e, t, n), i = Math.min(e, t, n), r = 0, o = a, l = a - i, c = a === 0 ? 0 : l / a;
|
|
193
193
|
if (a === i)
|
|
194
194
|
r = 0;
|
|
195
195
|
else {
|
|
@@ -206,31 +206,31 @@ function De(e, t, n) {
|
|
|
206
206
|
}
|
|
207
207
|
r /= 6;
|
|
208
208
|
}
|
|
209
|
-
return { h: r, s:
|
|
209
|
+
return { h: r, s: c, v: o };
|
|
210
210
|
}
|
|
211
|
-
function
|
|
211
|
+
function xt(e, t, n) {
|
|
212
212
|
e = v(e, 360) * 6, t = v(t, 100), n = v(n, 100);
|
|
213
|
-
var a = Math.floor(e), i = e - a, r = n * (1 - t), o = n * (1 - i * t), l = n * (1 - (1 - i) * t),
|
|
214
|
-
return { r: S * 255, g:
|
|
213
|
+
var a = Math.floor(e), i = e - a, r = n * (1 - t), o = n * (1 - i * t), l = n * (1 - (1 - i) * t), c = a % 6, S = [n, o, r, r, l, n][c], p = [l, n, n, o, r, r][c], $ = [r, r, l, n, n, o][c];
|
|
214
|
+
return { r: S * 255, g: p * 255, b: $ * 255 };
|
|
215
215
|
}
|
|
216
216
|
function He(e, t, n, a) {
|
|
217
217
|
var i = [
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
218
|
+
H(Math.round(e).toString(16)),
|
|
219
|
+
H(Math.round(t).toString(16)),
|
|
220
|
+
H(Math.round(n).toString(16))
|
|
221
221
|
];
|
|
222
222
|
return a && i[0].startsWith(i[0].charAt(1)) && i[1].startsWith(i[1].charAt(1)) && i[2].startsWith(i[2].charAt(1)) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) : i.join("");
|
|
223
223
|
}
|
|
224
|
-
function
|
|
224
|
+
function Mt(e, t, n, a, i) {
|
|
225
225
|
var r = [
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
226
|
+
H(Math.round(e).toString(16)),
|
|
227
|
+
H(Math.round(t).toString(16)),
|
|
228
|
+
H(Math.round(n).toString(16)),
|
|
229
|
+
H(It(a))
|
|
230
230
|
];
|
|
231
231
|
return i && r[0].startsWith(r[0].charAt(1)) && r[1].startsWith(r[1].charAt(1)) && r[2].startsWith(r[2].charAt(1)) && r[3].startsWith(r[3].charAt(1)) ? r[0].charAt(0) + r[1].charAt(0) + r[2].charAt(0) + r[3].charAt(0) : r.join("");
|
|
232
232
|
}
|
|
233
|
-
function
|
|
233
|
+
function It(e) {
|
|
234
234
|
return Math.round(parseFloat(e) * 255).toString(16);
|
|
235
235
|
}
|
|
236
236
|
function Pe(e) {
|
|
@@ -239,7 +239,7 @@ function Pe(e) {
|
|
|
239
239
|
function w(e) {
|
|
240
240
|
return parseInt(e, 16);
|
|
241
241
|
}
|
|
242
|
-
function
|
|
242
|
+
function At(e) {
|
|
243
243
|
return {
|
|
244
244
|
r: e >> 16,
|
|
245
245
|
g: (e & 65280) >> 8,
|
|
@@ -396,9 +396,9 @@ var Ae = {
|
|
|
396
396
|
yellow: "#ffff00",
|
|
397
397
|
yellowgreen: "#9acd32"
|
|
398
398
|
};
|
|
399
|
-
function
|
|
399
|
+
function Ct(e) {
|
|
400
400
|
var t = { r: 0, g: 0, b: 0 }, n = 1, a = null, i = null, r = null, o = !1, l = !1;
|
|
401
|
-
return typeof e == "string" && (e =
|
|
401
|
+
return typeof e == "string" && (e = zt(e)), typeof e == "object" && (O(e.r) && O(e.g) && O(e.b) ? (t = wt(e.r, e.g, e.b), o = !0, l = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : O(e.h) && O(e.s) && O(e.v) ? (a = se(e.s), i = se(e.v), t = xt(e.h, a, i), o = !0, l = "hsv") : O(e.h) && O(e.s) && O(e.l) && (a = se(e.s), r = se(e.l), t = St(e.h, a, r), o = !0, l = "hsl"), Object.prototype.hasOwnProperty.call(e, "a") && (n = e.a)), n = Ue(n), {
|
|
402
402
|
ok: o,
|
|
403
403
|
format: e.format || l,
|
|
404
404
|
r: Math.min(255, Math.max(t.r, 0)),
|
|
@@ -407,8 +407,8 @@ function Tt(e) {
|
|
|
407
407
|
a: n
|
|
408
408
|
};
|
|
409
409
|
}
|
|
410
|
-
var
|
|
411
|
-
CSS_UNIT: new RegExp(
|
|
410
|
+
var Tt = "[-\\+]?\\d+%?", kt = "[-\\+]?\\d*\\.\\d+%?", N = "(?:".concat(kt, ")|(?:").concat(Tt, ")"), ye = "[\\s|\\(]+(".concat(N, ")[,|\\s]+(").concat(N, ")[,|\\s]+(").concat(N, ")\\s*\\)?"), we = "[\\s|\\(]+(".concat(N, ")[,|\\s]+(").concat(N, ")[,|\\s]+(").concat(N, ")[,|\\s]+(").concat(N, ")\\s*\\)?"), T = {
|
|
411
|
+
CSS_UNIT: new RegExp(N),
|
|
412
412
|
rgb: new RegExp("rgb" + ye),
|
|
413
413
|
rgba: new RegExp("rgba" + we),
|
|
414
414
|
hsl: new RegExp("hsl" + ye),
|
|
@@ -420,7 +420,7 @@ var kt = "[-\\+]?\\d+%?", zt = "[-\\+]?\\d*\\.\\d+%?", $ = "(?:".concat(zt, ")|(
|
|
|
420
420
|
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
|
|
421
421
|
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
|
|
422
422
|
};
|
|
423
|
-
function
|
|
423
|
+
function zt(e) {
|
|
424
424
|
if (e = e.trim().toLowerCase(), e.length === 0)
|
|
425
425
|
return !1;
|
|
426
426
|
var t = !1;
|
|
@@ -428,35 +428,35 @@ function Ot(e) {
|
|
|
428
428
|
e = Ae[e], t = !0;
|
|
429
429
|
else if (e === "transparent")
|
|
430
430
|
return { r: 0, g: 0, b: 0, a: 0, format: "name" };
|
|
431
|
-
var n =
|
|
432
|
-
return n ? { r: n[1], g: n[2], b: n[3] } : (n =
|
|
431
|
+
var n = T.rgb.exec(e);
|
|
432
|
+
return n ? { r: n[1], g: n[2], b: n[3] } : (n = T.rgba.exec(e), n ? { r: n[1], g: n[2], b: n[3], a: n[4] } : (n = T.hsl.exec(e), n ? { h: n[1], s: n[2], l: n[3] } : (n = T.hsla.exec(e), n ? { h: n[1], s: n[2], l: n[3], a: n[4] } : (n = T.hsv.exec(e), n ? { h: n[1], s: n[2], v: n[3] } : (n = T.hsva.exec(e), n ? { h: n[1], s: n[2], v: n[3], a: n[4] } : (n = T.hex8.exec(e), n ? {
|
|
433
433
|
r: w(n[1]),
|
|
434
434
|
g: w(n[2]),
|
|
435
435
|
b: w(n[3]),
|
|
436
436
|
a: Pe(n[4]),
|
|
437
437
|
format: t ? "name" : "hex8"
|
|
438
|
-
} : (n =
|
|
438
|
+
} : (n = T.hex6.exec(e), n ? {
|
|
439
439
|
r: w(n[1]),
|
|
440
440
|
g: w(n[2]),
|
|
441
441
|
b: w(n[3]),
|
|
442
442
|
format: t ? "name" : "hex"
|
|
443
|
-
} : (n =
|
|
443
|
+
} : (n = T.hex4.exec(e), n ? {
|
|
444
444
|
r: w(n[1] + n[1]),
|
|
445
445
|
g: w(n[2] + n[2]),
|
|
446
446
|
b: w(n[3] + n[3]),
|
|
447
447
|
a: Pe(n[4] + n[4]),
|
|
448
448
|
format: t ? "name" : "hex8"
|
|
449
|
-
} : (n =
|
|
449
|
+
} : (n = T.hex3.exec(e), n ? {
|
|
450
450
|
r: w(n[1] + n[1]),
|
|
451
451
|
g: w(n[2] + n[2]),
|
|
452
452
|
b: w(n[3] + n[3]),
|
|
453
453
|
format: t ? "name" : "hex"
|
|
454
454
|
} : !1)))))))));
|
|
455
455
|
}
|
|
456
|
-
function
|
|
457
|
-
return !!
|
|
456
|
+
function O(e) {
|
|
457
|
+
return !!T.CSS_UNIT.exec(String(e));
|
|
458
458
|
}
|
|
459
|
-
var
|
|
459
|
+
var Q = (
|
|
460
460
|
/** @class */
|
|
461
461
|
function() {
|
|
462
462
|
function e(t, n) {
|
|
@@ -464,8 +464,8 @@ var J = (
|
|
|
464
464
|
var a;
|
|
465
465
|
if (t instanceof e)
|
|
466
466
|
return t;
|
|
467
|
-
typeof t == "number" && (t =
|
|
468
|
-
var i =
|
|
467
|
+
typeof t == "number" && (t = At(t)), this.originalInput = t;
|
|
468
|
+
var i = Ct(t);
|
|
469
469
|
this.originalInput = t, this.r = i.r, this.g = i.g, this.b = i.b, this.a = i.a, this.roundA = Math.round(100 * this.a) / 100, this.format = (a = n.format) !== null && a !== void 0 ? a : i.format, this.gradientType = n.gradientType, this.r < 1 && (this.r = Math.round(this.r)), this.g < 1 && (this.g = Math.round(this.g)), this.b < 1 && (this.b = Math.round(this.b)), this.isValid = i.ok;
|
|
470
470
|
}
|
|
471
471
|
return e.prototype.isDark = function() {
|
|
@@ -502,7 +502,7 @@ var J = (
|
|
|
502
502
|
}, e.prototype.toHexString = function(t) {
|
|
503
503
|
return t === void 0 && (t = !1), "#" + this.toHex(t);
|
|
504
504
|
}, e.prototype.toHex8 = function(t) {
|
|
505
|
-
return t === void 0 && (t = !1),
|
|
505
|
+
return t === void 0 && (t = !1), Mt(this.r, this.g, this.b, this.a, t);
|
|
506
506
|
}, e.prototype.toHex8String = function(t) {
|
|
507
507
|
return t === void 0 && (t = !1), "#" + this.toHex8(t);
|
|
508
508
|
}, e.prototype.toHexShortString = function(t) {
|
|
@@ -555,7 +555,7 @@ var J = (
|
|
|
555
555
|
}, e.prototype.lighten = function(t) {
|
|
556
556
|
t === void 0 && (t = 10);
|
|
557
557
|
var n = this.toHsl();
|
|
558
|
-
return n.l += t / 100, n.l =
|
|
558
|
+
return n.l += t / 100, n.l = oe(n.l), new e(n);
|
|
559
559
|
}, e.prototype.brighten = function(t) {
|
|
560
560
|
t === void 0 && (t = 10);
|
|
561
561
|
var n = this.toRgb();
|
|
@@ -563,7 +563,7 @@ var J = (
|
|
|
563
563
|
}, e.prototype.darken = function(t) {
|
|
564
564
|
t === void 0 && (t = 10);
|
|
565
565
|
var n = this.toHsl();
|
|
566
|
-
return n.l -= t / 100, n.l =
|
|
566
|
+
return n.l -= t / 100, n.l = oe(n.l), new e(n);
|
|
567
567
|
}, e.prototype.tint = function(t) {
|
|
568
568
|
return t === void 0 && (t = 10), this.mix("white", t);
|
|
569
569
|
}, e.prototype.shade = function(t) {
|
|
@@ -571,11 +571,11 @@ var J = (
|
|
|
571
571
|
}, e.prototype.desaturate = function(t) {
|
|
572
572
|
t === void 0 && (t = 10);
|
|
573
573
|
var n = this.toHsl();
|
|
574
|
-
return n.s -= t / 100, n.s =
|
|
574
|
+
return n.s -= t / 100, n.s = oe(n.s), new e(n);
|
|
575
575
|
}, e.prototype.saturate = function(t) {
|
|
576
576
|
t === void 0 && (t = 10);
|
|
577
577
|
var n = this.toHsl();
|
|
578
|
-
return n.s += t / 100, n.s =
|
|
578
|
+
return n.s += t / 100, n.s = oe(n.s), new e(n);
|
|
579
579
|
}, e.prototype.greyscale = function() {
|
|
580
580
|
return this.desaturate(100);
|
|
581
581
|
}, e.prototype.spin = function(t) {
|
|
@@ -632,21 +632,21 @@ var J = (
|
|
|
632
632
|
}, e;
|
|
633
633
|
}()
|
|
634
634
|
);
|
|
635
|
-
const
|
|
635
|
+
const Ot = new fe("viewFadeIn", {
|
|
636
636
|
"0%": {
|
|
637
637
|
opacity: 0
|
|
638
638
|
},
|
|
639
639
|
"100%": {
|
|
640
640
|
opacity: 1
|
|
641
641
|
}
|
|
642
|
-
}),
|
|
642
|
+
}), Lt = new fe("viewFadeOut", {
|
|
643
643
|
"0%": {
|
|
644
644
|
opacity: 1
|
|
645
645
|
},
|
|
646
646
|
"100%": {
|
|
647
647
|
opacity: 0
|
|
648
648
|
}
|
|
649
|
-
}),
|
|
649
|
+
}), Nt = new fe("viewZoomBadgeIn", {
|
|
650
650
|
"0%": {
|
|
651
651
|
transform: "scale(0.2)",
|
|
652
652
|
opacity: 0
|
|
@@ -655,7 +655,7 @@ const Lt = new ce("viewFadeIn", {
|
|
|
655
655
|
transform: "scale(1)",
|
|
656
656
|
opacity: 1
|
|
657
657
|
}
|
|
658
|
-
}),
|
|
658
|
+
}), $t = new fe("viewZoomBadgeOut", {
|
|
659
659
|
"0%": {
|
|
660
660
|
transform: "scale(1)"
|
|
661
661
|
},
|
|
@@ -676,7 +676,7 @@ function Se(e) {
|
|
|
676
676
|
insetInlineStart: 0
|
|
677
677
|
};
|
|
678
678
|
}
|
|
679
|
-
const
|
|
679
|
+
const Et = (e) => ({
|
|
680
680
|
boxSizing: "border-box",
|
|
681
681
|
margin: 0,
|
|
682
682
|
padding: 0,
|
|
@@ -685,11 +685,11 @@ const Rt = (e) => ({
|
|
|
685
685
|
lineHeight: e.lineHeight,
|
|
686
686
|
listStyle: "none",
|
|
687
687
|
fontFamily: e.fontFamily
|
|
688
|
-
}),
|
|
689
|
-
const { componentCls: t, modalMaskBg: n, paddingSM: a, previewOperationColorDisabled: i, motionDurationSlow: r } = e, o = new
|
|
688
|
+
}), Rt = (e) => {
|
|
689
|
+
const { componentCls: t, modalMaskBg: n, paddingSM: a, previewOperationColorDisabled: i, motionDurationSlow: r } = e, o = new Q(n).setAlpha(0.1), l = o.clone().setAlpha(0.2);
|
|
690
690
|
return {
|
|
691
691
|
[`${t}-operations`]: {
|
|
692
|
-
...
|
|
692
|
+
...Et(e),
|
|
693
693
|
display: "flex",
|
|
694
694
|
flexDirection: "row-reverse",
|
|
695
695
|
alignItems: "center",
|
|
@@ -724,8 +724,8 @@ const Rt = (e) => ({
|
|
|
724
724
|
}
|
|
725
725
|
}
|
|
726
726
|
};
|
|
727
|
-
},
|
|
728
|
-
const { modalMaskBg: t, previewOperationColorDisabled: n, zIndexPopup: a, motionDurationSlow: i } = e, r = new
|
|
727
|
+
}, Dt = (e) => {
|
|
728
|
+
const { modalMaskBg: t, previewOperationColorDisabled: n, zIndexPopup: a, motionDurationSlow: i } = e, r = new Q(t).setAlpha(0.1), o = r.clone().setAlpha(0.2);
|
|
729
729
|
return {
|
|
730
730
|
[`${e.componentCls}-switch-left, ${e.componentCls}-switch-right`]: {
|
|
731
731
|
position: "fixed",
|
|
@@ -769,7 +769,7 @@ const Rt = (e) => ({
|
|
|
769
769
|
insetInlineEnd: e.marginSM
|
|
770
770
|
}
|
|
771
771
|
};
|
|
772
|
-
},
|
|
772
|
+
}, Ht = (e) => ({
|
|
773
773
|
[e.componentCls]: {
|
|
774
774
|
"&-root": {
|
|
775
775
|
...Se("fixed"),
|
|
@@ -824,17 +824,17 @@ const Rt = (e) => ({
|
|
|
824
824
|
pointerEvents: "auto"
|
|
825
825
|
},
|
|
826
826
|
"&-fade-appear, &-fade-enter": {
|
|
827
|
-
animationName:
|
|
827
|
+
animationName: Ot,
|
|
828
828
|
animationDuration: e.motionDurationSlow,
|
|
829
829
|
animationTimingFunction: "linear"
|
|
830
830
|
},
|
|
831
831
|
"&-fade-leave": {
|
|
832
|
-
animationName:
|
|
832
|
+
animationName: Lt,
|
|
833
833
|
animationDuration: e.motionDurationSlow,
|
|
834
834
|
animationTimingFunction: "linear"
|
|
835
835
|
},
|
|
836
836
|
"&-zoom-appear, &-zoom-enter": {
|
|
837
|
-
animationName:
|
|
837
|
+
animationName: Nt,
|
|
838
838
|
opacity: 0,
|
|
839
839
|
animationTimingFunction: e.motionEaseOutCirc,
|
|
840
840
|
animationFillMode: "both",
|
|
@@ -846,7 +846,7 @@ const Rt = (e) => ({
|
|
|
846
846
|
animationPlayState: "running"
|
|
847
847
|
},
|
|
848
848
|
"&-zoom-leave": {
|
|
849
|
-
animationName:
|
|
849
|
+
animationName: $t,
|
|
850
850
|
animationDuration: e.motionDurationSlow,
|
|
851
851
|
animationTimingFunction: e.motionEaseOutBack,
|
|
852
852
|
animationFillMode: "both"
|
|
@@ -864,22 +864,22 @@ const Rt = (e) => ({
|
|
|
864
864
|
zIndex: e.zIndexPopup + 1,
|
|
865
865
|
width: "100%"
|
|
866
866
|
},
|
|
867
|
-
"&": [
|
|
867
|
+
"&": [Rt(e), Dt(e)]
|
|
868
868
|
});
|
|
869
|
-
function
|
|
870
|
-
return
|
|
871
|
-
const n =
|
|
869
|
+
function Pt(e) {
|
|
870
|
+
return ht("ImageView", (t) => {
|
|
871
|
+
const n = gt(t, {
|
|
872
872
|
zIndexPopup: t.zIndexPopupBase + 80,
|
|
873
|
-
previewOperationColorDisabled: new
|
|
874
|
-
modalMaskBg: new
|
|
873
|
+
previewOperationColorDisabled: new Q(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
|
|
874
|
+
modalMaskBg: new Q("#000").setAlpha(0.45).toRgbString(),
|
|
875
875
|
// FIXME: Shared Token
|
|
876
|
-
previewOperationColor: new
|
|
876
|
+
previewOperationColor: new Q(t.colorTextLightSolid).toRgbString(),
|
|
877
877
|
previewOperationSize: t.fontSizeIcon * 1.5,
|
|
878
878
|
// FIXME: fontSizeIconLG
|
|
879
879
|
imagePreviewSwitchSize: t.controlHeightLG,
|
|
880
880
|
iconCls: "anticon"
|
|
881
881
|
});
|
|
882
|
-
return [
|
|
882
|
+
return [Ht(n)];
|
|
883
883
|
}, e);
|
|
884
884
|
}
|
|
885
885
|
const Y = {
|
|
@@ -897,22 +897,22 @@ const Y = {
|
|
|
897
897
|
esc: "Escape",
|
|
898
898
|
delete: "Delete",
|
|
899
899
|
backspace: "Backspace"
|
|
900
|
-
},
|
|
900
|
+
}, le = function(e, t, n, a = !1) {
|
|
901
901
|
e && t && n && e.addEventListener(t, n, a);
|
|
902
902
|
}, xe = function(e, t, n, a = !1) {
|
|
903
903
|
e && t && n && e.removeEventListener(t, n, a);
|
|
904
|
-
},
|
|
904
|
+
}, X = {
|
|
905
905
|
CONTAIN: {
|
|
906
906
|
name: "contain",
|
|
907
|
-
icon:
|
|
907
|
+
icon: f(Ke, null, null)
|
|
908
908
|
},
|
|
909
909
|
ORIGINAL: {
|
|
910
910
|
name: "original",
|
|
911
|
-
icon:
|
|
911
|
+
icon: f(et, null, null)
|
|
912
912
|
}
|
|
913
|
-
},
|
|
914
|
-
return !
|
|
915
|
-
}, je =
|
|
913
|
+
}, Ft = function() {
|
|
914
|
+
return !q && !!window.navigator.userAgent.match(/firefox/i);
|
|
915
|
+
}, je = Ft() ? "DOMMouseScroll" : "mousewheel";
|
|
916
916
|
function Me(e) {
|
|
917
917
|
let t = !1;
|
|
918
918
|
return function(...n) {
|
|
@@ -921,21 +921,21 @@ function Me(e) {
|
|
|
921
921
|
}));
|
|
922
922
|
};
|
|
923
923
|
}
|
|
924
|
-
const
|
|
925
|
-
props:
|
|
924
|
+
const jt = /* @__PURE__ */ Ve({
|
|
925
|
+
props: pt,
|
|
926
926
|
emits: ["close", "switch"],
|
|
927
|
-
setup:
|
|
927
|
+
setup: (e, {
|
|
928
928
|
emit: t,
|
|
929
929
|
expose: n
|
|
930
|
-
}) {
|
|
931
|
-
var
|
|
930
|
+
}) => {
|
|
931
|
+
var ie, re, E, Z, Ce;
|
|
932
932
|
let a = null, i = null, r = null;
|
|
933
933
|
const o = Ge({
|
|
934
934
|
suffixCls: "image-viewer"
|
|
935
935
|
}), {
|
|
936
936
|
wrapSSR: l,
|
|
937
|
-
hashId:
|
|
938
|
-
} =
|
|
937
|
+
hashId: c
|
|
938
|
+
} = Pt(o), S = Te(!1), [p, $] = Ne(!1), [k, x] = Ne(!1), z = C(!0), h = C(e.initialIndex), P = C(null), F = C(null), W = C(X.CONTAIN), m = Xe({
|
|
939
939
|
transform: {
|
|
940
940
|
scale: 1,
|
|
941
941
|
deg: 0,
|
|
@@ -943,22 +943,24 @@ const Bt = /* @__PURE__ */ Ve({
|
|
|
943
943
|
offsetY: 0,
|
|
944
944
|
enableTransition: !1
|
|
945
945
|
}
|
|
946
|
-
}),
|
|
946
|
+
}), J = L(() => e.urlList.length > 1), G = L(() => h.value === 0), K = L(() => h.value === e.urlList.length - 1), ee = L(() => e.urlList[h.value]), te = L(() => {
|
|
947
947
|
const {
|
|
948
948
|
scale: s,
|
|
949
|
-
deg:
|
|
950
|
-
offsetX:
|
|
949
|
+
deg: I,
|
|
950
|
+
offsetX: d,
|
|
951
951
|
offsetY: y,
|
|
952
|
-
enableTransition:
|
|
953
|
-
} =
|
|
954
|
-
transform: `scale(${s}) rotate(${
|
|
955
|
-
transition:
|
|
956
|
-
marginLeft: `${
|
|
952
|
+
enableTransition: b
|
|
953
|
+
} = m.transform, A = {
|
|
954
|
+
transform: `scale(${s}) rotate(${I}deg)`,
|
|
955
|
+
transition: b ? "transform .3s" : "",
|
|
956
|
+
marginLeft: `${d}px`,
|
|
957
957
|
marginTop: `${y}px`
|
|
958
958
|
};
|
|
959
|
-
return W.value.name ===
|
|
960
|
-
}),
|
|
961
|
-
|
|
959
|
+
return W.value.name === X.CONTAIN.name && (A.maxWidth = A.maxHeight = "100%"), A;
|
|
960
|
+
}), ne = () => {
|
|
961
|
+
xe(document, "keydown", a), xe(document, je, i), a = null, i = null;
|
|
962
|
+
}, de = () => {
|
|
963
|
+
ne(), t("close"), m.transform = {
|
|
962
964
|
scale: 1,
|
|
963
965
|
deg: 0,
|
|
964
966
|
offsetX: 0,
|
|
@@ -966,222 +968,215 @@ const Bt = /* @__PURE__ */ Ve({
|
|
|
966
968
|
enableTransition: !1
|
|
967
969
|
};
|
|
968
970
|
}, he = (s) => {
|
|
969
|
-
S.value ? S.value = !1 :
|
|
970
|
-
},
|
|
971
|
+
S.value ? S.value = !1 : P.value === (s == null ? void 0 : s.target) && (x(!1), h.value = e.initialIndex);
|
|
972
|
+
}, ae = () => {
|
|
973
|
+
m.transform = {
|
|
974
|
+
scale: 1,
|
|
975
|
+
deg: 0,
|
|
976
|
+
offsetX: 0,
|
|
977
|
+
offsetY: 0,
|
|
978
|
+
enableTransition: !1
|
|
979
|
+
};
|
|
980
|
+
}, j = () => {
|
|
981
|
+
if (G.value && !e.infinite) return;
|
|
982
|
+
const s = e.urlList.length;
|
|
983
|
+
h.value = (h.value - 1 + s) % s;
|
|
984
|
+
}, u = () => {
|
|
985
|
+
if (K.value && !e.infinite) return;
|
|
986
|
+
const s = e.urlList.length;
|
|
987
|
+
h.value = (h.value + 1) % s;
|
|
988
|
+
}, M = () => {
|
|
989
|
+
if (z.value) return;
|
|
990
|
+
const s = Object.keys(X), I = Object.values(X), d = W.value.name, b = (I.findIndex((A) => A.name === d) + 1) % s.length;
|
|
991
|
+
W.value = X[s[b]], ae();
|
|
992
|
+
}, g = (s, I = {}) => {
|
|
993
|
+
if (z.value) return;
|
|
994
|
+
const {
|
|
995
|
+
zoomRate: d,
|
|
996
|
+
rotateDeg: y,
|
|
997
|
+
enableTransition: b
|
|
998
|
+
} = {
|
|
999
|
+
zoomRate: 0.2,
|
|
1000
|
+
rotateDeg: 90,
|
|
1001
|
+
enableTransition: !0,
|
|
1002
|
+
...I
|
|
1003
|
+
};
|
|
1004
|
+
switch (s) {
|
|
1005
|
+
case "zoomOut":
|
|
1006
|
+
m.transform.scale > 0.2 && (m.transform.scale = Number.parseFloat((m.transform.scale - d).toFixed(3)));
|
|
1007
|
+
break;
|
|
1008
|
+
case "zoomIn":
|
|
1009
|
+
m.transform.scale = Number.parseFloat((m.transform.scale + d).toFixed(3));
|
|
1010
|
+
break;
|
|
1011
|
+
case "clocelise":
|
|
1012
|
+
m.transform.deg += y;
|
|
1013
|
+
break;
|
|
1014
|
+
case "anticlocelise":
|
|
1015
|
+
m.transform.deg -= y;
|
|
1016
|
+
break;
|
|
1017
|
+
}
|
|
1018
|
+
m.transform.enableTransition = b;
|
|
1019
|
+
}, B = () => {
|
|
971
1020
|
a = Me((s) => {
|
|
972
1021
|
switch (s.code) {
|
|
973
1022
|
case Y.esc:
|
|
974
1023
|
x(!1);
|
|
975
1024
|
break;
|
|
976
1025
|
case Y.space:
|
|
977
|
-
|
|
1026
|
+
M();
|
|
978
1027
|
break;
|
|
979
1028
|
case Y.left:
|
|
980
|
-
|
|
1029
|
+
j();
|
|
981
1030
|
break;
|
|
982
1031
|
case Y.up:
|
|
983
|
-
|
|
1032
|
+
g("zoomIn");
|
|
984
1033
|
break;
|
|
985
1034
|
case Y.right:
|
|
986
|
-
|
|
1035
|
+
u();
|
|
987
1036
|
break;
|
|
988
1037
|
case Y.down:
|
|
989
|
-
|
|
1038
|
+
g("zoomOut");
|
|
990
1039
|
break;
|
|
991
1040
|
}
|
|
992
1041
|
}), i = Me((s) => {
|
|
993
|
-
(s.wheelDelta ? s.wheelDelta : -s.detail) > 0 ?
|
|
1042
|
+
(s.wheelDelta ? s.wheelDelta : -s.detail) > 0 ? g("zoomIn", {
|
|
994
1043
|
zoomRate: 0.015,
|
|
995
1044
|
enableTransition: !1
|
|
996
|
-
}) :
|
|
1045
|
+
}) : g("zoomOut", {
|
|
997
1046
|
zoomRate: 0.015,
|
|
998
1047
|
enableTransition: !1
|
|
999
1048
|
});
|
|
1000
|
-
}),
|
|
1001
|
-
},
|
|
1002
|
-
|
|
1003
|
-
},
|
|
1004
|
-
|
|
1005
|
-
},
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
if (O.value || s.button !== 0)
|
|
1009
|
-
return;
|
|
1010
|
-
s.preventDefault(), s.stopPropagation(), clearTimeout(b.value), S.value = !0;
|
|
1049
|
+
}), le(document, "keydown", a), le(document, je, i);
|
|
1050
|
+
}, V = () => {
|
|
1051
|
+
z.value = !1;
|
|
1052
|
+
}, ge = (s) => {
|
|
1053
|
+
z.value = !1, s.target.alt = "加载失败";
|
|
1054
|
+
}, U = Te(), ve = (s) => {
|
|
1055
|
+
if (z.value || s.button !== 0) return;
|
|
1056
|
+
s.preventDefault(), s.stopPropagation(), clearTimeout(U.value), S.value = !0;
|
|
1011
1057
|
const {
|
|
1012
|
-
offsetX:
|
|
1013
|
-
offsetY:
|
|
1014
|
-
} =
|
|
1015
|
-
r = Me((
|
|
1016
|
-
|
|
1017
|
-
...
|
|
1018
|
-
offsetX:
|
|
1019
|
-
offsetY:
|
|
1058
|
+
offsetX: I,
|
|
1059
|
+
offsetY: d
|
|
1060
|
+
} = m.transform, y = s.pageX, b = s.pageY;
|
|
1061
|
+
r = Me((A) => {
|
|
1062
|
+
m.transform = {
|
|
1063
|
+
...m.transform,
|
|
1064
|
+
offsetX: I + A.pageX - y,
|
|
1065
|
+
offsetY: d + A.pageY - b
|
|
1020
1066
|
};
|
|
1021
|
-
}),
|
|
1022
|
-
xe(document, "mousemove", r),
|
|
1067
|
+
}), le(document, "mousemove", r), le(document, "mouseup", () => {
|
|
1068
|
+
xe(document, "mousemove", r), p.value && k.value && (U.value = setTimeout(() => {
|
|
1023
1069
|
S.value = !1;
|
|
1024
1070
|
}));
|
|
1025
1071
|
});
|
|
1026
|
-
}, R = () => {
|
|
1027
|
-
d.transform = {
|
|
1028
|
-
scale: 1,
|
|
1029
|
-
deg: 0,
|
|
1030
|
-
offsetX: 0,
|
|
1031
|
-
offsetY: 0,
|
|
1032
|
-
enableTransition: !1
|
|
1033
|
-
};
|
|
1034
|
-
}, V = () => {
|
|
1035
|
-
if (O.value)
|
|
1036
|
-
return;
|
|
1037
|
-
const s = Object.keys(_), M = Object.values(_), h = W.value.name, p = (M.findIndex((I) => I.name === h) + 1) % s.length;
|
|
1038
|
-
W.value = _[s[p]], R();
|
|
1039
|
-
}, ne = () => {
|
|
1040
|
-
if (K.value && !e.infinite)
|
|
1041
|
-
return;
|
|
1042
|
-
const s = e.urlList.length;
|
|
1043
|
-
g.value = (g.value - 1 + s) % s;
|
|
1044
|
-
}, Z = () => {
|
|
1045
|
-
if (ee.value && !e.infinite)
|
|
1046
|
-
return;
|
|
1047
|
-
const s = e.urlList.length;
|
|
1048
|
-
g.value = (g.value + 1) % s;
|
|
1049
|
-
}, k = (s, M = {}) => {
|
|
1050
|
-
if (O.value)
|
|
1051
|
-
return;
|
|
1052
|
-
const {
|
|
1053
|
-
zoomRate: h,
|
|
1054
|
-
rotateDeg: y,
|
|
1055
|
-
enableTransition: p
|
|
1056
|
-
} = {
|
|
1057
|
-
zoomRate: 0.2,
|
|
1058
|
-
rotateDeg: 90,
|
|
1059
|
-
enableTransition: !0,
|
|
1060
|
-
...M
|
|
1061
|
-
};
|
|
1062
|
-
switch (s) {
|
|
1063
|
-
case "zoomOut":
|
|
1064
|
-
d.transform.scale > 0.2 && (d.transform.scale = parseFloat((d.transform.scale - h).toFixed(3)));
|
|
1065
|
-
break;
|
|
1066
|
-
case "zoomIn":
|
|
1067
|
-
d.transform.scale = parseFloat((d.transform.scale + h).toFixed(3));
|
|
1068
|
-
break;
|
|
1069
|
-
case "clocelise":
|
|
1070
|
-
d.transform.deg += y;
|
|
1071
|
-
break;
|
|
1072
|
-
case "anticlocelise":
|
|
1073
|
-
d.transform.deg -= y;
|
|
1074
|
-
break;
|
|
1075
|
-
}
|
|
1076
|
-
d.transform.enableTransition = p;
|
|
1077
1072
|
}, me = [{
|
|
1078
|
-
icon: ((
|
|
1073
|
+
icon: ((ie = e.icons) == null ? void 0 : ie.close) || f(tt, null, null),
|
|
1079
1074
|
onClick: (s) => {
|
|
1080
1075
|
s.stopPropagation(), x(!1);
|
|
1081
1076
|
},
|
|
1082
1077
|
type: "close"
|
|
1083
1078
|
}, {
|
|
1084
|
-
icon: ((
|
|
1079
|
+
icon: ((re = e.icons) == null ? void 0 : re.zoomIn) || f(nt, null, null),
|
|
1085
1080
|
onClick: (s) => {
|
|
1086
|
-
s.stopPropagation(),
|
|
1081
|
+
s.stopPropagation(), g("zoomIn");
|
|
1087
1082
|
},
|
|
1088
1083
|
type: "zoomIn"
|
|
1089
1084
|
}, {
|
|
1090
|
-
icon: ((
|
|
1085
|
+
icon: ((E = e.icons) == null ? void 0 : E.zoomOut) || f(at, null, null),
|
|
1091
1086
|
onClick: (s) => {
|
|
1092
|
-
s.stopPropagation(),
|
|
1087
|
+
s.stopPropagation(), g("zoomOut");
|
|
1093
1088
|
},
|
|
1094
1089
|
type: "zoomOut"
|
|
1095
1090
|
}, {
|
|
1096
|
-
icon: ((
|
|
1091
|
+
icon: ((Z = e.icons) == null ? void 0 : Z.rotateRight) || f(it, null, null),
|
|
1097
1092
|
onClick: (s) => {
|
|
1098
|
-
s.stopPropagation(),
|
|
1093
|
+
s.stopPropagation(), g("anticlocelise");
|
|
1099
1094
|
},
|
|
1100
1095
|
type: "rotateRight"
|
|
1101
1096
|
}, {
|
|
1102
|
-
icon: ((Ce = e.icons) == null ? void 0 : Ce.rotateLeft) ||
|
|
1097
|
+
icon: ((Ce = e.icons) == null ? void 0 : Ce.rotateLeft) || f(rt, null, null),
|
|
1103
1098
|
onClick: (s) => {
|
|
1104
|
-
s.stopPropagation(),
|
|
1099
|
+
s.stopPropagation(), g("clocelise");
|
|
1105
1100
|
},
|
|
1106
1101
|
type: "rotateLeft"
|
|
1107
1102
|
}];
|
|
1108
|
-
return
|
|
1103
|
+
return _(ee, () => {
|
|
1109
1104
|
Ye(() => {
|
|
1110
|
-
|
|
1105
|
+
F.value.complete || (z.value = !0);
|
|
1111
1106
|
});
|
|
1112
|
-
}),
|
|
1113
|
-
|
|
1114
|
-
}),
|
|
1115
|
-
s && (
|
|
1116
|
-
}),
|
|
1117
|
-
var
|
|
1118
|
-
s &&
|
|
1107
|
+
}), _(h, (s) => {
|
|
1108
|
+
ae(), t("switch", s);
|
|
1109
|
+
}), _(p, (s) => {
|
|
1110
|
+
s && (k.value = s);
|
|
1111
|
+
}), _([() => p.value, () => P.value], ([s, I]) => {
|
|
1112
|
+
var d, y;
|
|
1113
|
+
s && I && (B(), (y = (d = P.value) == null ? void 0 : d.focus) == null || y.call(d));
|
|
1119
1114
|
}), n({
|
|
1120
|
-
setOpen:
|
|
1115
|
+
setOpen: $
|
|
1121
1116
|
}), () => {
|
|
1122
|
-
const s = $e(`${o}-fade`),
|
|
1123
|
-
return l(
|
|
1117
|
+
const s = $e(`${o}-fade`), I = $e(`${o}-zoom`);
|
|
1118
|
+
return l(f(_e, {
|
|
1124
1119
|
to: e.getContainer || "body",
|
|
1125
1120
|
disabled: !e.teleported
|
|
1126
1121
|
}, {
|
|
1127
|
-
default: () => [
|
|
1128
|
-
class: `${o}-root ${
|
|
1129
|
-
}, [
|
|
1130
|
-
default: () => [ze(
|
|
1131
|
-
class: `${o}-mask ${
|
|
1132
|
-
}, null), [[Oe,
|
|
1133
|
-
}),
|
|
1134
|
-
ref:
|
|
1122
|
+
default: () => [p.value && f("div", {
|
|
1123
|
+
class: `${o}-root ${c.value}`
|
|
1124
|
+
}, [f(ke, s, {
|
|
1125
|
+
default: () => [ze(f("div", {
|
|
1126
|
+
class: `${o}-mask ${c.value}`
|
|
1127
|
+
}, null), [[Oe, p.value && k.value]])]
|
|
1128
|
+
}), f("div", {
|
|
1129
|
+
ref: P,
|
|
1135
1130
|
tabindex: -1,
|
|
1136
|
-
class: [`${o}-wrapper`, `${
|
|
1137
|
-
onClick: (
|
|
1138
|
-
}, [
|
|
1131
|
+
class: [`${o}-wrapper`, `${c.value}`],
|
|
1132
|
+
onClick: (d) => e.onHideOnClickModal && he(d)
|
|
1133
|
+
}, [f(ke, We(I, {
|
|
1139
1134
|
onAfterLeave: () => de()
|
|
1140
1135
|
}), {
|
|
1141
1136
|
default: () => {
|
|
1142
|
-
var
|
|
1143
|
-
return [ze(
|
|
1144
|
-
class: `${o}-block ${
|
|
1145
|
-
}, [
|
|
1146
|
-
class: `${o}-content ${
|
|
1147
|
-
}, [
|
|
1148
|
-
class: `${o}-body ${
|
|
1149
|
-
}, [
|
|
1150
|
-
class: `${o}-operations-wrapper ${
|
|
1151
|
-
onClick: (
|
|
1152
|
-
}, [
|
|
1153
|
-
class: `${o}-operations ${
|
|
1137
|
+
var d, y;
|
|
1138
|
+
return [ze(f("div", {
|
|
1139
|
+
class: `${o}-block ${c.value}`
|
|
1140
|
+
}, [f("div", {
|
|
1141
|
+
class: `${o}-content ${c.value}`
|
|
1142
|
+
}, [f("div", {
|
|
1143
|
+
class: `${o}-body ${c.value}`
|
|
1144
|
+
}, [f("div", {
|
|
1145
|
+
class: `${o}-operations-wrapper ${c.value}`,
|
|
1146
|
+
onClick: (b) => b.stopPropagation()
|
|
1147
|
+
}, [f("ul", {
|
|
1148
|
+
class: `${o}-operations ${c.value}`
|
|
1154
1149
|
}, [me.map(({
|
|
1155
|
-
icon:
|
|
1156
|
-
onClick:
|
|
1150
|
+
icon: b,
|
|
1151
|
+
onClick: A,
|
|
1157
1152
|
type: pe
|
|
1158
|
-
}) =>
|
|
1159
|
-
class: `${o}-operations-operation ${
|
|
1160
|
-
onClick:
|
|
1153
|
+
}) => f("li", {
|
|
1154
|
+
class: `${o}-operations-operation ${c.value}`,
|
|
1155
|
+
onClick: A,
|
|
1161
1156
|
key: pe
|
|
1162
|
-
}, [qe(
|
|
1163
|
-
class: `${o}-operations-icon ${
|
|
1164
|
-
})]))])]),
|
|
1165
|
-
class: `${o}-canvas ${
|
|
1166
|
-
}, [e.urlList.map((
|
|
1167
|
-
ref:
|
|
1168
|
-
class: `${o}-img ${
|
|
1157
|
+
}, [qe(b, {
|
|
1158
|
+
class: `${o}-operations-icon ${c.value}`
|
|
1159
|
+
})]))])]), f("div", {
|
|
1160
|
+
class: `${o}-canvas ${c.value}`
|
|
1161
|
+
}, [e.urlList.map((b, A) => f("img", {
|
|
1162
|
+
ref: F,
|
|
1163
|
+
class: `${o}-img ${c.value}`,
|
|
1169
1164
|
style: {
|
|
1170
|
-
...
|
|
1171
|
-
display:
|
|
1165
|
+
...te.value,
|
|
1166
|
+
display: A === h.value ? "block" : "none"
|
|
1172
1167
|
},
|
|
1173
|
-
key:
|
|
1174
|
-
src:
|
|
1175
|
-
onLoad: () =>
|
|
1176
|
-
onError: (pe) =>
|
|
1177
|
-
onMousedown:
|
|
1178
|
-
}, null))]),
|
|
1179
|
-
class: [`${o}-switch-left`,
|
|
1180
|
-
onClick:
|
|
1181
|
-
}, [((
|
|
1182
|
-
class: [`${o}-switch-right`,
|
|
1183
|
-
onClick:
|
|
1184
|
-
}, [((y = e.icons) == null ? void 0 : y.right) ||
|
|
1168
|
+
key: b,
|
|
1169
|
+
src: b,
|
|
1170
|
+
onLoad: () => V(),
|
|
1171
|
+
onError: (pe) => ge(pe),
|
|
1172
|
+
onMousedown: ve
|
|
1173
|
+
}, null))]), J.value && f("div", {
|
|
1174
|
+
class: [`${o}-switch-left`, h.value === 0 && !e.infinite ? `${o}-switch-left-disabled` : "", `${c.value}`],
|
|
1175
|
+
onClick: j
|
|
1176
|
+
}, [((d = e.icons) == null ? void 0 : d.left) || f(ot, null, null)]), J.value && f("div", {
|
|
1177
|
+
class: [`${o}-switch-right`, h.value === e.urlList.length - 1 && !e.infinite ? `${o}-switch-right-disabled` : "", `${c.value}`],
|
|
1178
|
+
onClick: u
|
|
1179
|
+
}, [((y = e.icons) == null ? void 0 : y.right) || f(st, null, null)])])])]), [[Oe, p.value && k.value]])];
|
|
1185
1180
|
}
|
|
1186
1181
|
})])])]
|
|
1187
1182
|
}));
|
|
@@ -1190,7 +1185,7 @@ const Bt = /* @__PURE__ */ Ve({
|
|
|
1190
1185
|
}), Ie = {
|
|
1191
1186
|
width: "100%",
|
|
1192
1187
|
height: "100%"
|
|
1193
|
-
},
|
|
1188
|
+
}, Bt = (e) => ({
|
|
1194
1189
|
[e.componentCls]: {
|
|
1195
1190
|
display: "inline-block",
|
|
1196
1191
|
position: "relative",
|
|
@@ -1220,10 +1215,10 @@ const Bt = /* @__PURE__ */ Ve({
|
|
|
1220
1215
|
cursor: "pointer"
|
|
1221
1216
|
}
|
|
1222
1217
|
}
|
|
1223
|
-
}),
|
|
1218
|
+
}), Vt = (e) => e && e.nodeType === Node.ELEMENT_NODE;
|
|
1224
1219
|
let Be = "";
|
|
1225
|
-
const
|
|
1226
|
-
props:
|
|
1220
|
+
const ce = /* @__PURE__ */ Ve({
|
|
1221
|
+
props: ue,
|
|
1227
1222
|
name: "GImage",
|
|
1228
1223
|
emits: ["error", "click", "load"],
|
|
1229
1224
|
setup(e, {
|
|
@@ -1236,131 +1231,127 @@ const ue = /* @__PURE__ */ Ve({
|
|
|
1236
1231
|
}), {
|
|
1237
1232
|
wrapSSR: r,
|
|
1238
1233
|
hashId: o
|
|
1239
|
-
} =
|
|
1240
|
-
let
|
|
1241
|
-
const
|
|
1234
|
+
} = vt("Image", [Bt], i), l = C(), c = C(""), S = C(!1), p = C(!0), $ = C(!1), k = C(null), x = C();
|
|
1235
|
+
let z, h;
|
|
1236
|
+
const P = L(() => !q && e.fit ? {
|
|
1242
1237
|
"object-fit": e.fit
|
|
1243
|
-
} : {}),
|
|
1238
|
+
} : {}), F = L(() => {
|
|
1244
1239
|
const {
|
|
1245
1240
|
previewSrcList: u
|
|
1246
1241
|
} = e;
|
|
1247
1242
|
return Array.isArray(u) && u.length > 0;
|
|
1248
|
-
}), W =
|
|
1243
|
+
}), W = L(() => {
|
|
1249
1244
|
const {
|
|
1250
1245
|
src: u,
|
|
1251
|
-
previewSrcList:
|
|
1252
|
-
initialIndex:
|
|
1246
|
+
previewSrcList: M,
|
|
1247
|
+
initialIndex: g
|
|
1253
1248
|
} = e;
|
|
1254
|
-
if (
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1249
|
+
if (g || g === 0) return M.length >= g ? g : 0;
|
|
1250
|
+
let B = 0;
|
|
1251
|
+
const V = M.indexOf(u);
|
|
1252
|
+
return V >= 0 && (B = V), B;
|
|
1253
|
+
}), m = (u) => {
|
|
1254
|
+
c.value = e.src, p.value = !1, S.value = !1, n("load", u);
|
|
1255
|
+
}, J = (u) => {
|
|
1256
|
+
p.value = !1, S.value = !0, n("error", u);
|
|
1257
|
+
}, G = () => {
|
|
1258
|
+
if (q) return;
|
|
1259
|
+
p.value = !0, S.value = !1;
|
|
1263
1260
|
const u = new Image();
|
|
1264
|
-
u.onload = (
|
|
1265
|
-
if (
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
u.setAttribute(b, T);
|
|
1261
|
+
u.onload = (M) => m(M), u.onerror = J, Object.keys(a || {}).forEach((M) => {
|
|
1262
|
+
if (M.toLowerCase() === "onload") return;
|
|
1263
|
+
const g = (a || {})[M];
|
|
1264
|
+
u.setAttribute(M, g);
|
|
1269
1265
|
}), u.src = e.src;
|
|
1266
|
+
}, K = mt(te, 200), ee = () => {
|
|
1267
|
+
q || !x.value || !K || (z(), x.value = void 0);
|
|
1270
1268
|
};
|
|
1271
|
-
function
|
|
1272
|
-
|
|
1269
|
+
function te() {
|
|
1270
|
+
lt(k.value, x.value) && (G(), ee());
|
|
1273
1271
|
}
|
|
1274
|
-
const
|
|
1275
|
-
if (
|
|
1276
|
-
return;
|
|
1272
|
+
const ne = async () => {
|
|
1273
|
+
if (q) return;
|
|
1277
1274
|
await Ye();
|
|
1278
1275
|
const {
|
|
1279
1276
|
scrollContainer: u
|
|
1280
1277
|
} = e;
|
|
1281
|
-
|
|
1282
|
-
}, te = () => {
|
|
1283
|
-
Q || !x.value || !K || (O(), x.value = void 0);
|
|
1284
|
-
}, fe = (u) => {
|
|
1285
|
-
f.value = e.src, m.value = !1, S.value = !1, n("load", u);
|
|
1278
|
+
Vt(u) ? x.value = u : ut(u) && u !== "" ? x.value = document.querySelector(u) ?? void 0 : k.value && (x.value = ct(k.value)), x.value && (z = Ee(x, "scroll", K), setTimeout(() => te(), 200));
|
|
1286
1279
|
}, de = (u) => {
|
|
1287
|
-
m.value = !1, S.value = !0, n("error", u);
|
|
1288
|
-
}, he = (u) => {
|
|
1289
1280
|
if (u.ctrlKey) {
|
|
1290
1281
|
if (u.deltaY < 0)
|
|
1291
1282
|
return u.preventDefault(), !1;
|
|
1292
1283
|
if (u.deltaY > 0)
|
|
1293
1284
|
return u.preventDefault(), !1;
|
|
1294
1285
|
}
|
|
1295
|
-
},
|
|
1296
|
-
!
|
|
1286
|
+
}, he = () => {
|
|
1287
|
+
!F.value || e.disablePreview || (h = Ee("wheel", de, {
|
|
1297
1288
|
passive: !1
|
|
1298
|
-
}), Be = document.body.style.overflow, document.body.style.overflow = "hidden",
|
|
1299
|
-
},
|
|
1300
|
-
|
|
1289
|
+
}), Be = document.body.style.overflow, document.body.style.overflow = "hidden", $.value = !0);
|
|
1290
|
+
}, ae = () => {
|
|
1291
|
+
h == null || h(), document.body.style.overflow = Be, $.value = !1;
|
|
1301
1292
|
};
|
|
1302
|
-
|
|
1303
|
-
e.lazy ? (
|
|
1293
|
+
_(() => e.src, () => {
|
|
1294
|
+
e.lazy ? (p.value = !0, S.value = !1, ee(), ne()) : G();
|
|
1304
1295
|
});
|
|
1305
|
-
const
|
|
1306
|
-
return
|
|
1307
|
-
e.lazy ?
|
|
1296
|
+
const j = (u) => ft(u) ? u + "px" : u;
|
|
1297
|
+
return dt(() => {
|
|
1298
|
+
e.lazy ? ne() : G();
|
|
1308
1299
|
}), () => {
|
|
1309
1300
|
const {
|
|
1310
1301
|
crossorigin: u,
|
|
1311
|
-
decoding:
|
|
1312
|
-
alt:
|
|
1313
|
-
sizes:
|
|
1302
|
+
decoding: M,
|
|
1303
|
+
alt: g,
|
|
1304
|
+
sizes: B,
|
|
1314
1305
|
srcset: V,
|
|
1315
|
-
usemap:
|
|
1316
|
-
class:
|
|
1317
|
-
style:
|
|
1306
|
+
usemap: ge,
|
|
1307
|
+
class: U,
|
|
1308
|
+
style: ve = {}
|
|
1318
1309
|
} = a, me = {
|
|
1319
1310
|
crossorigin: u,
|
|
1320
|
-
decoding:
|
|
1321
|
-
alt:
|
|
1322
|
-
sizes:
|
|
1311
|
+
decoding: M,
|
|
1312
|
+
alt: g,
|
|
1313
|
+
sizes: B,
|
|
1323
1314
|
srcset: V,
|
|
1324
|
-
usemap:
|
|
1315
|
+
usemap: ge,
|
|
1325
1316
|
style: {
|
|
1326
|
-
...
|
|
1327
|
-
height: e.height ?
|
|
1317
|
+
...P.value,
|
|
1318
|
+
height: e.height ? j(e.height) : void 0
|
|
1328
1319
|
}
|
|
1329
|
-
},
|
|
1320
|
+
}, ie = Le(t, e, "fallback"), re = Le(t, e, "placeholder");
|
|
1330
1321
|
return Qe(() => {
|
|
1331
|
-
var
|
|
1332
|
-
|
|
1333
|
-
}), r(
|
|
1322
|
+
var E, Z;
|
|
1323
|
+
F.value && $.value ? (E = l.value) == null || E.setOpen(!0) : (Z = l.value) == null || Z.setOpen(!1);
|
|
1324
|
+
}), r(f("div", {
|
|
1334
1325
|
class: {
|
|
1335
1326
|
[`${o.value}`]: !0,
|
|
1336
1327
|
[`${i}`]: !0,
|
|
1337
|
-
[`${
|
|
1328
|
+
[`${U}`]: !!U
|
|
1338
1329
|
},
|
|
1339
|
-
ref: (
|
|
1330
|
+
ref: (E) => k.value = E,
|
|
1340
1331
|
style: {
|
|
1341
|
-
width: e.width ?
|
|
1342
|
-
height: e.height ?
|
|
1332
|
+
width: e.width ? j(e.width) : void 0,
|
|
1333
|
+
height: e.height ? j(e.height) : void 0,
|
|
1343
1334
|
display: e.lazy ? "block" : void 0,
|
|
1344
|
-
...
|
|
1335
|
+
...ve
|
|
1345
1336
|
},
|
|
1346
1337
|
onClick: () => {
|
|
1347
1338
|
n("click");
|
|
1348
1339
|
}
|
|
1349
|
-
}, [
|
|
1340
|
+
}, [p.value ? re || f("div", {
|
|
1350
1341
|
class: `${i}-placeholder ${o.value}`
|
|
1351
|
-
}, null) : S.value ?
|
|
1342
|
+
}, null) : S.value ? ie || f("div", {
|
|
1352
1343
|
class: `${i}-error ${o.value}`
|
|
1353
|
-
}, [
|
|
1344
|
+
}, [Je("加载失败")]) : c.value && f("img", We(me, {
|
|
1354
1345
|
class: {
|
|
1355
1346
|
[`${o.value}`]: !0,
|
|
1356
1347
|
[`${e.imageClassName}`]: !!e.imageClassName,
|
|
1357
1348
|
[`${i}-inner`]: !0,
|
|
1358
|
-
[`${i}-preview`]:
|
|
1349
|
+
[`${i}-preview`]: F.value
|
|
1359
1350
|
},
|
|
1360
1351
|
alt: e.alt,
|
|
1361
|
-
src:
|
|
1362
|
-
onClick: () =>
|
|
1363
|
-
}), null),
|
|
1352
|
+
src: c.value,
|
|
1353
|
+
onClick: () => he()
|
|
1354
|
+
}), null), f(jt, {
|
|
1364
1355
|
ref: l,
|
|
1365
1356
|
zIndex: e.zIndex,
|
|
1366
1357
|
infinite: e.infinite,
|
|
@@ -1368,17 +1359,17 @@ const ue = /* @__PURE__ */ Ve({
|
|
|
1368
1359
|
urlList: e.previewSrcList,
|
|
1369
1360
|
getContainer: e.getContainer,
|
|
1370
1361
|
onHideOnClickModal: e.hideOnClickModal,
|
|
1371
|
-
onClose: () =>
|
|
1372
|
-
}, null)])
|
|
1362
|
+
onClose: () => ae()
|
|
1363
|
+
}, null)]));
|
|
1373
1364
|
};
|
|
1374
1365
|
}
|
|
1375
1366
|
});
|
|
1376
|
-
|
|
1377
|
-
|
|
1367
|
+
ce.isWImage = !0;
|
|
1368
|
+
ce.install = (e) => (e.component(ce.name, ce), e);
|
|
1378
1369
|
export {
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1370
|
+
ce as GImage,
|
|
1371
|
+
jt as ImageViewer,
|
|
1372
|
+
ce as default,
|
|
1373
|
+
ue as gImagePorps,
|
|
1374
|
+
pt as gImageViewProps
|
|
1384
1375
|
};
|