@gx-design-vue/image 0.2.0-beta.32 → 0.2.0-beta.33

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 CHANGED
@@ -61,7 +61,7 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
61
61
  type: import("vue").PropType<string>;
62
62
  };
63
63
  }>, () => import("ant-design-vue/es/_util/type").VueNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
64
- click: () => true;
64
+ click: (_type: "loaded" | "error" | "success") => true;
65
65
  load: (_event: Event) => true;
66
66
  error: (_event: Event) => true;
67
67
  }, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
@@ -124,7 +124,7 @@ declare const GImage: import("vue").DefineComponent<ExtractPropTypes<{
124
124
  type: import("vue").PropType<string>;
125
125
  };
126
126
  }>> & Readonly<{
127
- onClick?: (() => any) | undefined;
127
+ onClick?: ((_type: "error" | "loaded" | "success") => any) | undefined;
128
128
  onError?: ((_event: Event) => any) | undefined;
129
129
  onLoad?: ((_event: Event) => any) | undefined;
130
130
  }>, {
package/dist/image.js CHANGED
@@ -1,18 +1,18 @@
1
1
  /*!
2
2
  * Gx Design Pro
3
- * Version: 0.2.0-beta.31
3
+ * Version: 0.2.0-beta.32
4
4
  * Author: gx12358
5
5
  * Copyright (C) 2024 gx12358
6
6
  * License: MIT License
7
7
  * Description: Gx Design Image
8
- * Date Created: 2025-08-17
8
+ * Date Created: 2026-02-05
9
9
  * Homepage:
10
10
  * Contact: gx12358@gmail.com
11
11
  */
12
12
  import { ref as $, defineComponent as we, createVNode as u, Teleport as Te, Transition as ge, withDirectives as me, Fragment as le, cloneVNode as nt, vShow as pe, toRef as H, reactive as ot, computed as b, watch as K, onMounted as Ae, onUnmounted as it, mergeProps as ie, watchEffect as at, nextTick as lt } from "vue";
13
13
  import { CloseOutlined as rt, LeftOutlined as st, RightOutlined as ut, SwapOutlined as be, ZoomOutOutlined as ct, ZoomInOutlined as dt, RotateRightOutlined as ft, RotateLeftOutlined as vt, EyeOutlined as gt } from "@ant-design/icons-vue";
14
14
  import { getTransitionProps as he, Keyframe as se, useStyle as mt, mergeToken as pt, unit as Q, FastColor as ht, useProStyle as wt } from "@gx-design-vue/pro-provider";
15
- import { classNames as X, getPrefixCls as Ee, isNumber as De, isArray as yt, getSlot as St, getSlotsProps as Re, isInContainer as Ct, isString as xt, getScrollContainer as It } from "@gx-design-vue/pro-utils";
15
+ import { classNames as Y, getPrefixCls as Ee, isNumber as De, isArray as yt, getSlot as St, getSlotsProps as Re, isInContainer as Ct, isString as xt, getScrollContainer as It } from "@gx-design-vue/pro-utils";
16
16
  import { useWindowSize as Pe, isClient as q, useThrottleFn as bt, useEventListener as Le } from "@vueuse/core";
17
17
  import { isEqual as Lt, cloneDeep as $t, omit as Ne, fromPairs as zt } from "lodash-es";
18
18
  import { useState as ee, useEffect as ye, useMergedState as Mt } from "@gx-design-vue/pro-hooks";
@@ -167,9 +167,9 @@ const oe = {
167
167
  flipY: !1
168
168
  };
169
169
  function Ot(e, t, o, r) {
170
- const n = $(null), s = $([]), [c, h] = ee(oe), v = (m) => {
171
- h(oe), Lt(oe, c.value) || r?.({ transform: oe, action: m });
172
- }, d = (m, C) => {
170
+ const n = $(null), s = $([]), [c, h] = ee(oe), m = (v) => {
171
+ h(oe), Lt(oe, c.value) || r?.({ transform: oe, action: v });
172
+ }, d = (v, C) => {
173
173
  n.value === null && (s.value = [], n.value = Fe(() => {
174
174
  let x = $t(c.value);
175
175
  s.value.forEach((i) => {
@@ -177,26 +177,26 @@ function Ot(e, t, o, r) {
177
177
  }), n.value = null, r?.({ transform: x, action: C }), h(x);
178
178
  })), s.value.push({
179
179
  ...c.value,
180
- ...m
180
+ ...v
181
181
  });
182
182
  };
183
183
  return {
184
184
  transform: c,
185
- resetTransform: v,
185
+ resetTransform: m,
186
186
  updateTransform: d,
187
- dispatchZoomChange: (m, C, x, i, a) => {
187
+ dispatchZoomChange: (v, C, x, i, a) => {
188
188
  const { width: w, height: p, offsetWidth: y, offsetHeight: S, offsetLeft: L, offsetTop: A } = e.value;
189
- let z = m, I = c.value.scale * m;
189
+ let z = v, I = c.value.scale * v;
190
190
  I > o.value ? (I = o.value, z = o.value / c.value.scale) : I < t.value && (I = a ? I : t.value, z = I / c.value.scale);
191
- const k = x ?? innerWidth / 2, Z = i ?? innerHeight / 2, R = z - 1, M = R * w * 0.5, P = R * p * 0.5, Y = R * (k - c.value.x - L), W = R * (Z - c.value.y - A);
192
- let j = c.value.x - (Y - M), B = c.value.y - (W - P);
193
- if (m < 1 && I === 1) {
194
- const E = y * I, f = S * I, { width: N, height: O } = Pe();
195
- E <= N.value && f <= O.value && (j = 0, B = 0);
191
+ const k = x ?? innerWidth / 2, Z = i ?? innerHeight / 2, P = z - 1, M = P * w * 0.5, N = P * p * 0.5, j = P * (k - c.value.x - L), W = P * (Z - c.value.y - A);
192
+ let B = c.value.x - (j - M), E = c.value.y - (W - N);
193
+ if (v < 1 && I === 1) {
194
+ const D = y * I, g = S * I, { width: X, height: O } = Pe();
195
+ D <= X.value && g <= O.value && (B = 0, E = 0);
196
196
  }
197
197
  d({
198
- x: j,
199
- y: B,
198
+ x: B,
199
+ y: E,
200
200
  scale: I
201
201
  }, C);
202
202
  }
@@ -256,26 +256,26 @@ function He(e, t, o, r) {
256
256
  }), c;
257
257
  }
258
258
  function Et(e, t, o, r, n, s, c) {
259
- const [h, v] = ee(!1), d = $({
259
+ const [h, m] = ee(!1), d = $({
260
260
  diffX: 0,
261
261
  diffY: 0,
262
262
  transformX: 0,
263
263
  transformY: 0
264
- }), g = (i) => {
264
+ }), f = (i) => {
265
265
  !t || i.button !== 0 || (i.preventDefault(), i.stopPropagation(), d.value = {
266
266
  diffX: i.pageX - n.value.x,
267
267
  diffY: i.pageY - n.value.y,
268
268
  transformX: n.value.x,
269
269
  transformY: n.value.y
270
- }, v(!0));
271
- }, m = (i) => {
270
+ }, m(!0));
271
+ }, v = (i) => {
272
272
  o && h.value && s({
273
273
  x: i.pageX - d.value.diffX,
274
274
  y: i.pageY - d.value.diffY
275
275
  }, "move");
276
276
  }, C = () => {
277
277
  if (o && h.value) {
278
- v(!1);
278
+ m(!1);
279
279
  const { transformX: i, transformY: a } = d.value;
280
280
  if (!(n.value.x !== i && n.value.y !== a))
281
281
  return;
@@ -292,9 +292,9 @@ function Et(e, t, o, r, n, s, c) {
292
292
  return ye(() => {
293
293
  let i, a, w, p;
294
294
  if (t) {
295
- w = G(window, "mouseup", C, !1), p = G(window, "mousemove", m, !1);
295
+ w = G(window, "mouseup", C, !1), p = G(window, "mousemove", v, !1);
296
296
  try {
297
- window.top !== window.self && (i = G(window.top, "mouseup", C, !1), a = G(window.top, "mousemove", m, !1));
297
+ window.top !== window.self && (i = G(window.top, "mouseup", C, !1), a = G(window.top, "mousemove", v, !1));
298
298
  } catch (y) {
299
299
  Tt(!1, `[rc-image] ${y}`);
300
300
  }
@@ -304,8 +304,8 @@ function Et(e, t, o, r, n, s, c) {
304
304
  };
305
305
  }, [o, h, () => n.value.x, () => n.value.y, () => n.value.rotate, t]), {
306
306
  isMoving: h,
307
- onMouseDown: g,
308
- onMouseMove: m,
307
+ onMouseDown: f,
308
+ onMouseMove: v,
309
309
  onMouseUp: C,
310
310
  onWheel: x
311
311
  };
@@ -318,29 +318,29 @@ function Dt(e, t, o, r) {
318
318
  const n = re(e, o), s = re(t, r);
319
319
  if (n === 0 && s === 0)
320
320
  return [e.x, e.y];
321
- const c = n / (n + s), h = e.x + c * (t.x - e.x), v = e.y + c * (t.y - e.y);
322
- return [h, v];
321
+ const c = n / (n + s), h = e.x + c * (t.x - e.x), m = e.y + c * (t.y - e.y);
322
+ return [h, m];
323
323
  }
324
324
  function Rt(e, t, o, r, n, s, c) {
325
- const [h, v] = ee(!1), d = $({
325
+ const [h, m] = ee(!1), d = $({
326
326
  point1: { x: 0, y: 0 },
327
327
  point2: { x: 0, y: 0 },
328
328
  eventType: "none"
329
- }), g = (i) => {
329
+ }), f = (i) => {
330
330
  d.value = {
331
331
  ...d.value,
332
332
  ...i
333
333
  };
334
- }, m = (i) => {
334
+ }, v = (i) => {
335
335
  if (!t.value)
336
336
  return;
337
- i.stopPropagation(), v(!0);
337
+ i.stopPropagation(), m(!0);
338
338
  const { touches: a = [] } = i;
339
- a.length > 1 ? g({
339
+ a.length > 1 ? f({
340
340
  point1: { x: a[0].clientX, y: a[0].clientY },
341
341
  point2: { x: a[1].clientX, y: a[1].clientY },
342
342
  eventType: "touchZoom"
343
- }) : g({
343
+ }) : f({
344
344
  point1: {
345
345
  x: a[0].clientX - n.value.x,
346
346
  y: a[0].clientY - n.value.y
@@ -357,7 +357,7 @@ function Rt(e, t, o, r, n, s, c) {
357
357
  x: a[1].clientX,
358
358
  y: a[1].clientY
359
359
  }, [A, z] = Dt(w, p, S, L), I = re(S, L) / re(w, p);
360
- c(I, "touchZoom", A, z, !0), g({
360
+ c(I, "touchZoom", A, z, !0), f({
361
361
  point1: S,
362
362
  point2: L,
363
363
  eventType: "touchZoom"
@@ -365,11 +365,11 @@ function Rt(e, t, o, r, n, s, c) {
365
365
  } else y === "move" && (s({
366
366
  x: a[0].clientX - w.x,
367
367
  y: a[0].clientY - w.y
368
- }, "move"), g({ eventType: "move" }));
368
+ }, "move"), f({ eventType: "move" }));
369
369
  }, x = () => {
370
370
  if (!o.value)
371
371
  return;
372
- if (h && v(!1), g({ eventType: "none" }), r.value > n.value.scale)
372
+ if (h && m(!1), f({ eventType: "none" }), r.value > n.value.scale)
373
373
  return s({ x: 0, y: 0, scale: r.value }, "touchZoom");
374
374
  const i = e.value.offsetWidth * n.value.scale, a = e.value.offsetHeight * n.value.scale, { left: w, top: p } = e.value.getBoundingClientRect(), y = n.value.rotate % 180 !== 0, S = He(y ? a : i, y ? i : a, w, p);
375
375
  S && s({ ...S }, "dragRebound");
@@ -383,7 +383,7 @@ function Rt(e, t, o, r, n, s, c) {
383
383
  };
384
384
  }, [o, t]), {
385
385
  isTouching: h,
386
- onTouchStart: m,
386
+ onTouchStart: v,
387
387
  onTouchMove: C,
388
388
  onTouchEnd: x
389
389
  };
@@ -429,7 +429,7 @@ const Pt = /* @__PURE__ */ we({
429
429
  }, {
430
430
  default: () => [u(ge, s, {
431
431
  default: () => [me(u("div", {
432
- class: X(`${o}-operations-wrapper`, r),
432
+ class: Y(`${o}-operations-wrapper`, r),
433
433
  style: {
434
434
  zIndex: e.zIndex
435
435
  }
@@ -437,15 +437,15 @@ const Pt = /* @__PURE__ */ we({
437
437
  class: `${o}-close ${r}`,
438
438
  onClick: e.onClose
439
439
  }, [e.icons?.close || u(rt, null, null)]), e.showSwitch && u(le, null, [u("div", {
440
- class: X(`${o}-switch-left ${r}`, {
440
+ class: Y(`${o}-switch-left ${r}`, {
441
441
  [`${o}-switch-left-disabled`]: e.infinite ? !1 : e.current === 0
442
442
  }),
443
- onClick: (v) => t(v, -1)
443
+ onClick: (m) => t(m, -1)
444
444
  }, [e.icons?.left || u(st, null, null)]), u("div", {
445
- class: X(`${o}-switch-right ${r}`, {
445
+ class: Y(`${o}-switch-right ${r}`, {
446
446
  [`${o}-switch-right-disabled`]: e.infinite ? !1 : e.current === e.count - 1
447
447
  }),
448
- onClick: (v) => t(v, 1)
448
+ onClick: (m) => t(m, 1)
449
449
  }, [e.icons?.right || u(ut, null, null)])]), u("div", {
450
450
  class: `${o}-footer ${r}`
451
451
  }, [e.showProgress && u("div", {
@@ -453,17 +453,17 @@ const Pt = /* @__PURE__ */ we({
453
453
  }, [e.countRender ? e.countRender(e.current + 1, e.count) : `${e.current + 1} / ${e.count}`]), u("div", {
454
454
  class: `${e.prefixCls}-operations`
455
455
  }, [n?.map(({
456
- icon: v,
456
+ icon: m,
457
457
  onClick: d,
458
- type: g,
459
- disabled: m
458
+ type: f,
459
+ disabled: v
460
460
  }) => u("div", {
461
- class: X(c, {
462
- [`${e.prefixCls}-operations-operation-disabled`]: m && m?.value
461
+ class: Y(c, {
462
+ [`${e.prefixCls}-operations-operation-disabled`]: v && v?.value
463
463
  }),
464
464
  onClick: d,
465
- key: g
466
- }, [nt(v, {
465
+ key: f
466
+ }, [nt(m, {
467
467
  class: h
468
468
  })]))])])]), [[pe, e.open]])]
469
469
  })]
@@ -515,7 +515,7 @@ function de(e) {
515
515
  };
516
516
  }
517
517
  const Bt = (e) => {
518
- const { previewCls: t, modalMaskBg: o, marginXL: r, margin: n, colorTextLightSolid: s, previewOperationColorDisabled: c, previewOperationHoverColor: h, motionDurationSlow: v, iconCls: d } = e, g = new F(o).setAlpha(0.1), m = g.clone().setAlpha(0.2), C = new F(o).setAlpha(0.5), x = new F(o).setAlpha(0.03);
518
+ const { previewCls: t, modalMaskBg: o, marginXL: r, margin: n, colorTextLightSolid: s, previewOperationColorDisabled: c, previewOperationHoverColor: h, motionDurationSlow: m, iconCls: d } = e, f = new F(o).setAlpha(0.1), v = f.clone().setAlpha(0.2), C = new F(o).setAlpha(0.5), x = new F(o).setAlpha(0.03);
519
519
  return {
520
520
  [`${t}-footer`]: {
521
521
  position: "fixed",
@@ -544,7 +544,7 @@ const Bt = (e) => {
544
544
  alignItems: "center",
545
545
  justifyContent: "center",
546
546
  color: s,
547
- backgroundColor: g.toRgbString(),
547
+ backgroundColor: f.toRgbString(),
548
548
  borderRadius: e.borderRadiusLG,
549
549
  backdropFilter: "saturate(180%) blur(10px)",
550
550
  width: e.sizeXL,
@@ -552,9 +552,9 @@ const Bt = (e) => {
552
552
  outline: 0,
553
553
  border: 0,
554
554
  cursor: "pointer",
555
- transition: `all ${v}`,
555
+ transition: `all ${m}`,
556
556
  "&:hover": {
557
- backgroundColor: m.toRgbString()
557
+ backgroundColor: v.toRgbString()
558
558
  },
559
559
  [`& > ${d}`]: {
560
560
  fontSize: e.previewOperationSize
@@ -578,7 +578,7 @@ const Bt = (e) => {
578
578
  cursor: "pointer",
579
579
  color: s,
580
580
  borderRadius: e.borderRadiusSM,
581
- transition: `all ${v}`,
581
+ transition: `all ${m}`,
582
582
  userSelect: "none",
583
583
  [`&:not(${t}-operations-operation-disabled):hover > ${d}`]: {
584
584
  color: h
@@ -600,7 +600,7 @@ const Bt = (e) => {
600
600
  }
601
601
  };
602
602
  }, Ft = (e) => {
603
- const { modalMaskBg: t, iconCls: o, previewOperationColorDisabled: r, previewCls: n, zIndexPopup: s, motionDurationSlow: c, colorTextLightSolid: h } = e, v = new F(t).setAlpha(0.1), d = v.clone().setAlpha(0.2);
603
+ const { modalMaskBg: t, iconCls: o, previewOperationColorDisabled: r, previewCls: n, zIndexPopup: s, motionDurationSlow: c, colorTextLightSolid: h } = e, m = new F(t).setAlpha(0.1), d = m.clone().setAlpha(0.2);
604
604
  return {
605
605
  [`${n}-switch-left, ${n}-switch-right`]: {
606
606
  position: "fixed",
@@ -615,7 +615,7 @@ const Bt = (e) => {
615
615
  height: e.imagePreviewSwitchSize,
616
616
  marginTop: e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),
617
617
  color: h,
618
- background: v.toRgbString(),
618
+ background: m.toRgbString(),
619
619
  transform: "translateY(-50%)",
620
620
  cursor: "pointer",
621
621
  transition: `all ${c}`,
@@ -818,12 +818,12 @@ const fe = {
818
818
  }), {
819
819
  wrapSSR: s,
820
820
  hashId: c
821
- } = Ht(n), [h, v, d] = Mt(e.open, {
821
+ } = Ht(n), [h, m, d] = Mt(e.open, {
822
822
  value: H(e, "open"),
823
823
  onChange: (l) => {
824
824
  e.onOpenChange?.(l), t("update:open", l);
825
825
  }
826
- }), [g, m] = ee(!1), [C, x] = ee(!0), i = $(), {
826
+ }), [f, v] = ee(!1), [C, x] = ee(!0), i = $(), {
827
827
  transform: a,
828
828
  resetTransform: w,
829
829
  updateTransform: p,
@@ -841,11 +841,11 @@ const fe = {
841
841
  ye(() => {
842
842
  C.value || x(!0);
843
843
  }, [C]);
844
- const R = $(null), M = $(e.current), P = ot(/* @__PURE__ */ new Map()), Y = b(() => new Map(Array.from(P).map(([l, {
844
+ const P = $(null), M = $(e.current), N = ot(/* @__PURE__ */ new Map()), j = b(() => new Map(Array.from(N).map(([l, {
845
845
  url: T
846
- }]) => [l, T]))), W = b(() => Y.value.get(M.value)), j = b(() => Y.value.size), B = b(() => Array.from(Y.value.keys())), E = b(() => B.value.indexOf(M.value)), f = b(() => j.value > 1), N = b(() => j.value >= 1);
846
+ }]) => [l, T]))), W = b(() => j.value.get(M.value)), B = b(() => j.value.size), E = b(() => Array.from(j.value.keys())), D = b(() => E.value.indexOf(M.value)), g = b(() => B.value > 1), X = b(() => B.value >= 1);
847
847
  K(d, (l) => {
848
- l && (g.value = !0);
848
+ l && (f.value = !0);
849
849
  });
850
850
  const O = (l) => {
851
851
  M.value = l;
@@ -854,33 +854,33 @@ const fe = {
854
854
  De(l) && O(l);
855
855
  });
856
856
  function te(l, T) {
857
- P.set(l, {
857
+ N.set(l, {
858
858
  url: T,
859
859
  loading: !0,
860
860
  canPreview: !1
861
861
  });
862
862
  }
863
863
  const ue = () => {
864
- m(!1);
864
+ v(!1);
865
865
  }, Ze = () => {
866
866
  w("close"), t("close");
867
867
  }, We = (l) => {
868
- S.value || R.value === l?.target && ue();
868
+ S.value || P.value === l?.target && ue();
869
869
  }, _e = () => {
870
- const l = P.get(M.value);
870
+ const l = N.get(M.value);
871
871
  l && (l.loading = !1, l.canPreview = !0);
872
872
  }, Ue = (l) => {
873
- const T = P.get(M.value);
873
+ const T = N.get(M.value);
874
874
  T && (T.loading = !1, T.canPreview = !1), l.target.alt = "加载失败";
875
875
  }, Ce = () => {
876
- if (E.value > 0 || e.infinite) {
877
- const l = E.value - 1 < 0 ? e.urls.length - 1 : E.value - 1;
878
- O(B.value[l]), w("prev");
876
+ if (D.value > 0 || e.infinite) {
877
+ const l = D.value - 1 < 0 ? e.urls.length - 1 : D.value - 1;
878
+ O(E.value[l]), w("prev");
879
879
  }
880
880
  }, xe = () => {
881
- if (E.value < j.value - 1 || e.infinite) {
882
- const l = E.value + 1 > e.urls.length - 1 ? 0 : E.value + 1;
883
- O(B.value[l]), w("next");
881
+ if (D.value < B.value - 1 || e.infinite) {
882
+ const l = D.value + 1 > e.urls.length - 1 ? 0 : D.value + 1;
883
+ O(E.value[l]), w("next");
884
884
  }
885
885
  }, Ge = () => {
886
886
  y(V + e.scaleStep, "zoomIn");
@@ -944,7 +944,7 @@ const fe = {
944
944
  scale: 1
945
945
  }, "doubleClick") : y(V + e.scaleStep, "doubleClick", l.clientX, l.clientY));
946
946
  }, tt = (l) => {
947
- l.keyCode === fe.ESC && ue(), !(!d.value || !f.value) && (l.keyCode === fe.LEFT ? Ce() : l.keyCode === fe.RIGHT && xe());
947
+ l.keyCode === fe.ESC && ue(), !(!d.value || !g.value) && (l.keyCode === fe.LEFT ? Ce() : l.keyCode === fe.RIGHT && xe());
948
948
  };
949
949
  let ce = () => {
950
950
  };
@@ -970,12 +970,12 @@ const fe = {
970
970
  ce();
971
971
  }), o({
972
972
  setOpen: (l) => {
973
- v(l), M.value = e.current;
973
+ m(l), M.value = e.current;
974
974
  }
975
975
  }), () => {
976
976
  const l = he(`${n}-mask-zoom`), T = he(`${n}-zoom`), ne = {};
977
- for (const D in e.icons)
978
- ne[D] = getSlotVNode(r, e.icons, D);
977
+ for (const R in e.icons)
978
+ ne[R] = getSlotVNode(r, e.icons, R);
979
979
  return s(u(le, null, [u(Te, {
980
980
  to: e.getContainer || "body"
981
981
  }, {
@@ -984,12 +984,12 @@ const fe = {
984
984
  }, [u(ge, l, {
985
985
  default: () => [me(u("div", {
986
986
  class: `${n}-mask ${c.value}`
987
- }, null), [[pe, d.value && g.value]])]
987
+ }, null), [[pe, d.value && f.value]])]
988
988
  }), u("div", {
989
- ref: R,
989
+ ref: P,
990
990
  tabindex: -1,
991
991
  class: [`${n}-wrap`, `${c.value}`, S.value && `${n}-moving`],
992
- onClick: (D) => e.onHideOnClickModal && We(D)
992
+ onClick: (R) => e.onHideOnClickModal && We(R)
993
993
  }, [u(ge, ie(T, {
994
994
  onAfterLeave: () => Ze()
995
995
  }), {
@@ -1007,7 +1007,7 @@ const fe = {
1007
1007
  class: `${n}-img ${c.value}`,
1008
1008
  src: W.value,
1009
1009
  onLoad: () => _e(),
1010
- onError: (D) => Ue(D),
1010
+ onError: (R) => Ue(R),
1011
1011
  style: {
1012
1012
  transform: `translate3d(${a.value.x}px, ${a.value.y}px, 0) scale3d(${a.value.flipX ? "-" : ""}${a.value.scale}, ${a.value.flipY ? "-" : ""}${a.value.scale}, 1) rotate(${a.value.rotate}deg)`,
1013
1013
  transitionDuration: !C.value || z.value ? "0s" : void 0
@@ -1019,10 +1019,10 @@ const fe = {
1019
1019
  onTouchmove: k,
1020
1020
  onTouchend: Z,
1021
1021
  onTouchcancel: Z
1022
- }, null)])])])]), [[pe, d.value && g.value]])]
1022
+ }, null)])])])]), [[pe, d.value && f.value]])]
1023
1023
  })])])])]
1024
- }), d.value && g.value && u(Pt, {
1025
- open: d.value && g.value,
1024
+ }), d.value && f.value && u(Pt, {
1025
+ open: d.value && f.value,
1026
1026
  hashId: c.value,
1027
1027
  count: e.urls.length,
1028
1028
  current: M.value,
@@ -1030,8 +1030,8 @@ const fe = {
1030
1030
  getContainer: e.getContainer,
1031
1031
  prefixCls: n,
1032
1032
  icons: Ne(ne, Ie().map(({
1033
- type: D
1034
- }) => D)),
1033
+ type: R
1034
+ }) => R)),
1035
1035
  tools: Ie(),
1036
1036
  infinite: e.infinite,
1037
1037
  countRender: St({
@@ -1039,10 +1039,10 @@ const fe = {
1039
1039
  props: e,
1040
1040
  key: "countRender"
1041
1041
  }),
1042
- showSwitch: f.value,
1043
- showProgress: N.value,
1042
+ showSwitch: g.value,
1043
+ showProgress: X.value,
1044
1044
  onClose: ue,
1045
- onActive: (D) => D > 0 ? xe() : Ce()
1045
+ onActive: (R) => R > 0 ? xe() : Ce()
1046
1046
  }, null)]));
1047
1047
  };
1048
1048
  }
@@ -1125,7 +1125,7 @@ const ae = /* @__PURE__ */ we({
1125
1125
  name: "GImage",
1126
1126
  inheritAttrs: !1,
1127
1127
  emits: {
1128
- click: () => !0,
1128
+ click: (e) => !0,
1129
1129
  load: (e) => !0,
1130
1130
  error: (e) => !0
1131
1131
  },
@@ -1140,66 +1140,66 @@ const ae = /* @__PURE__ */ we({
1140
1140
  }), {
1141
1141
  wrapSSR: c,
1142
1142
  hashId: h
1143
- } = wt("Image", [Gt], s), v = $(), d = $(), g = $(!1), m = $(!0), C = $(!1), x = $(), i = $();
1143
+ } = wt("Image", [Gt], s), m = $(), d = $(), f = $(!1), v = $(!0), C = $(!1), x = $(), i = $();
1144
1144
  let a, w;
1145
1145
  const p = b(() => e.loading === "eager" ? !1 : !n && e.loading === "lazy" || e.lazy), y = b(() => q && e.fit ? {
1146
1146
  ...e.imageStyle,
1147
1147
  objectFit: e.fit
1148
1148
  } : e.imageStyle), S = b(() => typeof e.preview == "object" ? e.preview : {}), L = b(() => !!e.preview), A = b(() => {
1149
1149
  const {
1150
- urls: f = [],
1151
- current: N = 0
1150
+ urls: g = [],
1151
+ current: X = 0
1152
1152
  } = S.value;
1153
- if (De(N)) return f.length >= N ? N : 0;
1154
- const O = f.indexOf(e.src);
1153
+ if (De(X)) return g.length >= X ? X : 0;
1154
+ const O = g.indexOf(e.src);
1155
1155
  return O >= 0 ? O : 0;
1156
1156
  }), z = b(() => Q(e.width)), I = b(() => Q(e.height)), k = () => {
1157
- q && (m.value = !0, g.value = !1, d.value = e.src);
1157
+ q && (v.value = !0, f.value = !1, d.value = e.src);
1158
1158
  };
1159
- function Z(f) {
1160
- g.value || (m.value = !1, g.value = !1, o("load", f));
1159
+ function Z(g) {
1160
+ f.value || (v.value = !1, f.value = !1, o("load", g));
1161
1161
  }
1162
- function R(f) {
1163
- m.value = !1, g.value = !0, o("error", f);
1162
+ function P(g) {
1163
+ v.value = !1, f.value = !0, o("error", g);
1164
1164
  }
1165
1165
  function M() {
1166
1166
  Ct(x.value, i.value) && (k(), W());
1167
1167
  }
1168
- const P = bt(M, 200, !0);
1169
- async function Y() {
1168
+ const N = bt(M, 200, !0);
1169
+ async function j() {
1170
1170
  if (!q) return;
1171
1171
  await lt();
1172
1172
  const {
1173
- scrollContainer: f
1173
+ scrollContainer: g
1174
1174
  } = e;
1175
- Vt(f) ? i.value = f : xt(f) && f !== "" ? i.value = document.querySelector(f) ?? void 0 : x.value && (i.value = It(x.value)), i.value && (a = Le(i, "scroll", P), setTimeout(() => M(), 100));
1175
+ Vt(g) ? i.value = g : xt(g) && g !== "" ? i.value = document.querySelector(g) ?? void 0 : x.value && (i.value = It(x.value)), i.value && (a = Le(i, "scroll", N), setTimeout(() => M(), 100));
1176
1176
  }
1177
1177
  function W() {
1178
- !q || !i.value || !P || (a?.(), i.value = void 0);
1178
+ !q || !i.value || !N || (a?.(), i.value = void 0);
1179
1179
  }
1180
- function j(f) {
1181
- if (f.ctrlKey) {
1182
- if (f.deltaY < 0)
1183
- return f.preventDefault(), !1;
1184
- if (f.deltaY > 0)
1185
- return f.preventDefault(), !1;
1180
+ function B(g) {
1181
+ if (g.ctrlKey) {
1182
+ if (g.deltaY < 0)
1183
+ return g.preventDefault(), !1;
1184
+ if (g.deltaY > 0)
1185
+ return g.preventDefault(), !1;
1186
1186
  }
1187
1187
  }
1188
- const B = () => {
1189
- o("click"), !(m.value || g.value) && L.value && (w = Le("wheel", j, {
1188
+ const E = () => {
1189
+ o("click", v.value ? "loaded" : f.value ? "error" : "success"), !(v.value || f.value) && L.value && (w = Le("wheel", B, {
1190
1190
  passive: !1
1191
1191
  }), Oe = document.body.style.overflow, document.body.style.overflow = "hidden", C.value = !0);
1192
- }, E = () => {
1192
+ }, D = () => {
1193
1193
  w?.(), document.body.style.overflow = Oe, C.value = !1;
1194
1194
  };
1195
1195
  return K(() => e.src, () => {
1196
- p.value ? (m.value = !0, g.value = !1, W(), Y()) : k();
1196
+ p.value ? (v.value = !0, f.value = !1, W(), j()) : k();
1197
1197
  }), at(() => {
1198
- L.value && C.value ? v.value?.setOpen(!0) : v.value?.setOpen(!1);
1198
+ L.value && C.value ? m.value?.setOpen(!0) : m.value?.setOpen(!1);
1199
1199
  }), Ae(() => {
1200
- p.value ? Y() : k();
1200
+ p.value ? j() : k();
1201
1201
  }), () => {
1202
- const f = zt(Object.entries(r).filter(([te]) => /^(?:data-|on[A-Z])/i.test(te) || ["id", "style", "class"].includes(te))), N = Ne(r, Object.keys(f)), O = Re({
1202
+ const g = zt(Object.entries(r).filter(([te]) => /^(?:data-|on[A-Z])/i.test(te) || ["id", "style", "class"].includes(te))), X = Ne(r, Object.keys(g)), O = Re({
1203
1203
  slots: t,
1204
1204
  props: e,
1205
1205
  keys: ["fallback", "mask", "placeholder"],
@@ -1211,43 +1211,47 @@ const ae = /* @__PURE__ */ we({
1211
1211
  [`${s}`]: !0
1212
1212
  },
1213
1213
  ref: x
1214
- }, f, {
1214
+ }, g, {
1215
1215
  style: {
1216
1216
  width: Q(e.size) || z.value,
1217
1217
  height: Q(e.size) || I.value,
1218
- ...f.style || {}
1218
+ ...g.style || {}
1219
+ },
1220
+ onClick: () => {
1221
+ f.value && E();
1219
1222
  }
1220
- }), [g.value ? u("div", {
1221
- class: X(h.value, `${s}-error`)
1222
- }, [O.fallback]) : u(le, null, [u("img", ie(N, {
1223
+ }), [f.value ? u("div", {
1224
+ class: Y(h.value, `${s}-error`)
1225
+ }, [O.fallback]) : u(le, null, [u("img", ie(X, {
1223
1226
  src: d.value,
1224
1227
  loading: e.loading,
1225
1228
  style: y.value,
1226
- class: X(h.value, e.imageClass, `${s}-img`, {
1229
+ class: Y(h.value, e.imageClass, `${s}-img`, {
1227
1230
  [`${s}-img-placeholder`]: e.placeholder === !0,
1228
1231
  [`${s}-img-preview`]: L.value
1229
1232
  }),
1230
1233
  crossorigin: e.crossOrigin,
1231
1234
  width: z.value,
1232
1235
  height: I.value,
1233
- onClick: B,
1236
+ onClick: E,
1234
1237
  onLoad: Z,
1235
- onError: R
1236
- }), null), m.value && u("div", {
1237
- class: X(`${s}-placeholder`, h.value)
1238
+ onError: P
1239
+ }), null), v.value && u("div", {
1240
+ class: Y(`${s}-placeholder`, h.value),
1241
+ onClick: E
1238
1242
  }, [O.placeholder])]), S.value.mask && L.value && u("div", {
1239
- class: X(`${s}-mask`, S.value.maskClass, h.value),
1243
+ class: Y(`${s}-mask`, S.value.maskClass, h.value),
1240
1244
  style: {
1241
- display: f.style?.display === "none" ? "none" : void 0
1245
+ display: g.style?.display === "none" ? "none" : void 0
1242
1246
  }
1243
1247
  }, [O.mask || u("div", {
1244
- class: X(`${s}-mask-info`, h.value)
1248
+ class: Y(`${s}-mask-info`, h.value)
1245
1249
  }, [u(gt, null, null)])]), L.value && u(Zt, ie({
1246
- ref: v
1250
+ ref: m
1247
1251
  }, S.value, {
1248
1252
  urls: S.value.urls || [e.src],
1249
1253
  current: A.value,
1250
- onClose: () => E()
1254
+ onClose: () => D()
1251
1255
  }), t)]));
1252
1256
  };
1253
1257
  }
@@ -1,12 +1,12 @@
1
1
  /*!
2
2
  * Gx Design Pro
3
- * Version: 0.2.0-beta.31
3
+ * Version: 0.2.0-beta.32
4
4
  * Author: gx12358
5
5
  * Copyright (C) 2024 gx12358
6
6
  * License: MIT License
7
7
  * Description: Gx Design Image
8
- * Date Created: 2025-08-17
8
+ * Date Created: 2026-02-05
9
9
  * Homepage:
10
10
  * Contact: gx12358@gmail.com
11
11
  */
12
- (function(b,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@ant-design/icons-vue"),require("@gx-design-vue/pro-provider"),require("@gx-design-vue/pro-utils"),require("@vueuse/core"),require("lodash-es"),require("@gx-design-vue/pro-hooks"),require("@ctrl/tinycolor")):typeof define=="function"&&define.amd?define(["exports","vue","@ant-design/icons-vue","@gx-design-vue/pro-provider","@gx-design-vue/pro-utils","@vueuse/core","lodash-es","@gx-design-vue/pro-hooks","@ctrl/tinycolor"],t):(b=typeof globalThis<"u"?globalThis:b||self,t(b.GImage={},b.vue,b.iconsVue,b.proProvider,b.proUtils,b.core,b.lodashEs,b.proHooks,b.tinycolor))})(this,(function(b,t,A,L,y,E,U,X,F){"use strict";const H={infinite:{type:Boolean,default:!0},zIndex:{type:Number,default:2e3},current:{type:Number,default:0},getContainer:{type:String}},ae={preview:{type:[Object,Boolean],default:!0},src:{type:String,default:""},alt:{type:String,default:""},loading:{type:String},fit:{type:String,default:"contain"},crossOrigin:{type:String},lazy:Boolean,scrollContainer:{type:[String,Object]},placeholder:{type:[Function,Object,Boolean],default:()=>{}},fallback:{type:[Function,Object],default:()=>{}},onLoad:{type:Function},onError:{type:Function},onClick:{type:Function},imageStyle:{type:Object,default:()=>({})},imageClass:String,size:Number,width:Number,height:Number,zIndex:H.zIndex,getContainer:H.getContainer},_={urls:{type:Array,default:()=>[]},open:{type:Boolean,default:!1},scaleStep:{type:Number,default:.5},minScale:{type:Number,default:.32},maxScale:{type:Number,default:32},movable:{type:Boolean,default:!0},disabled:Boolean,zIndex:H.zIndex,current:H.current,infinite:H.infinite,getContainer:ae.getContainer,onHideOnClickModal:{type:Boolean,default:!0},countRender:[Function,Array,Object],icons:{type:Object,default:()=>({})},onTransform:Function,onOpenChange:Function,"onUpdate:open":Function};let fe=e=>setTimeout(e,16),ge=e=>clearTimeout(e);typeof window<"u"&&"requestAnimationFrame"in window&&(fe=e=>window.requestAnimationFrame(e),ge=e=>window.cancelAnimationFrame(e));let me=0;const le=new Map;function ve(e){le.delete(e)}function he(e,n=1){me+=1;const i=me;function s(o){if(o===0)ve(i),e();else{const c=fe(()=>{s(o-1)});le.set(i,c)}}return s(n),i}he.cancel=e=>{const n=le.get(e);return ve(n),ge(n)};const te={x:0,y:0,rotate:0,scale:1,flipX:!1,flipY:!1};function Le(e,n,i,s){const o=t.ref(null),c=t.ref([]),[u,p]=X.useState(te),g=v=>{p(te),U.isEqual(te,u.value)||s?.({transform:te,action:v})},d=(v,x)=>{o.value===null&&(c.value=[],o.value=he(()=>{let I=U.cloneDeep(u.value);c.value.forEach(a=>{I={...I,...a}}),o.value=null,s?.({transform:I,action:x}),p(I)})),c.value.push({...u.value,...v})};return{transform:u,resetTransform:g,updateTransform:d,dispatchZoomChange:(v,x,I,a,l)=>{const{width:w,height:h,offsetWidth:S,offsetHeight:C,offsetLeft:T,offsetTop:R}=e.value;let M=v,N=u.value.scale*v;N>i.value?(N=i.value,M=i.value/u.value.scale):N<n.value&&(N=l?N:n.value,M=N/u.value.scale);const k=I??innerWidth/2,Q=a??innerHeight/2,j=M-1,$=j*w*.5,V=j*h*.5,B=j*(k-u.value.x-T),J=j*(Q-u.value.y-R);let W=u.value.x-(B-$),Z=u.value.y-(J-V);if(v<1&&N===1){const D=S*N,f=C*N,{width:Y,height:z}=E.useWindowSize();D<=Y.value&&f<=z.value&&(W=0,Z=0)}d({x:W,y:Z,scale:N},x)}}}function Te(e,n){process.env.NODE_ENV!=="production"&&console!==void 0&&console.error(`Warning: ${n}`)}let pe=!1;try{const e=Object.defineProperty({},"passive",{get(){pe=!0}});window.addEventListener("testPassive",null,e),window.removeEventListener("testPassive",null,e)}catch{}function G(e,n,i,s){if(e&&e.addEventListener){let o=s;o===void 0&&pe&&(n==="touchstart"||n==="touchmove"||n==="wheel")&&(o={passive:!1}),e.addEventListener(n,i,o)}return{remove:()=>{e&&e.removeEventListener&&e.removeEventListener(n,i)}}}const q=1,Me=1;function we(e,n,i,s){const o=n+i,c=(i-s)/2;if(i>s){if(n>0)return{[e]:c};if(n<0&&o<s)return{[e]:-c}}else if(n<0||o>s)return{[e]:n<0?c:-c};return{}}function ye(e,n,i,s){const{width:o,height:c}=E.useWindowSize();let u=null;return e<=o.value&&n<=c.value?u={x:0,y:0}:(e>o.value||n>c.value)&&(u={...we("x",i,e,o.value),...we("y",s,n,c.value)}),u}function $e(e,n,i,s,o,c,u){const[p,g]=X.useState(!1),d=t.ref({diffX:0,diffY:0,transformX:0,transformY:0}),m=a=>{!n||a.button!==0||(a.preventDefault(),a.stopPropagation(),d.value={diffX:a.pageX-o.value.x,diffY:a.pageY-o.value.y,transformX:o.value.x,transformY:o.value.y},g(!0))},v=a=>{i&&p.value&&c({x:a.pageX-d.value.diffX,y:a.pageY-d.value.diffY},"move")},x=()=>{if(i&&p.value){g(!1);const{transformX:a,transformY:l}=d.value;if(!(o.value.x!==a&&o.value.y!==l))return;const h=e.value.offsetWidth*o.value.scale,S=e.value.offsetHeight*o.value.scale,{left:C,top:T}=e.value.getBoundingClientRect(),R=o.value.rotate%180!==0,M=ye(R?S:h,R?h:S,C,T);M&&c({...M},"dragRebound")}},I=a=>{if(!i||a.deltaY===0)return;const l=Math.abs(a.deltaY/100),w=Math.min(l,Me);let h=q+w*s.value;a.deltaY>0&&(h=q/h),u(h,"wheel",a.clientX,a.clientY)};return X.useEffect(()=>{let a,l,w,h;if(n){w=G(window,"mouseup",x,!1),h=G(window,"mousemove",v,!1);try{window.top!==window.self&&(a=G(window.top,"mouseup",x,!1),l=G(window.top,"mousemove",v,!1))}catch(S){Te(!1,`[rc-image] ${S}`)}}return()=>{w?.remove(),h?.remove(),a?.remove(),l?.remove()}},[i,p,()=>o.value.x,()=>o.value.y,()=>o.value.rotate,n]),{isMoving:p,onMouseDown:m,onMouseMove:v,onMouseUp:x,onWheel:I}}function ne(e,n){const i=e.x-n.x,s=e.y-n.y;return Math.hypot(i,s)}function ze(e,n,i,s){const o=ne(e,i),c=ne(n,s);if(o===0&&c===0)return[e.x,e.y];const u=o/(o+c),p=e.x+u*(n.x-e.x),g=e.y+u*(n.y-e.y);return[p,g]}function Oe(e,n,i,s,o,c,u){const[p,g]=X.useState(!1),d=t.ref({point1:{x:0,y:0},point2:{x:0,y:0},eventType:"none"}),m=a=>{d.value={...d.value,...a}},v=a=>{if(!n.value)return;a.stopPropagation(),g(!0);const{touches:l=[]}=a;l.length>1?m({point1:{x:l[0].clientX,y:l[0].clientY},point2:{x:l[1].clientX,y:l[1].clientY},eventType:"touchZoom"}):m({point1:{x:l[0].clientX-o.value.x,y:l[0].clientY-o.value.y},eventType:"move"})},x=a=>{const{touches:l=[]}=a,{point1:w,point2:h,eventType:S}=d.value;if(l.length>1&&S==="touchZoom"){const C={x:l[0].clientX,y:l[0].clientY},T={x:l[1].clientX,y:l[1].clientY},[R,M]=ze(w,h,C,T),N=ne(C,T)/ne(w,h);u(N,"touchZoom",R,M,!0),m({point1:C,point2:T,eventType:"touchZoom"})}else S==="move"&&(c({x:l[0].clientX-w.x,y:l[0].clientY-w.y},"move"),m({eventType:"move"}))},I=()=>{if(!i.value)return;if(p&&g(!1),m({eventType:"none"}),s.value>o.value.scale)return c({x:0,y:0,scale:s.value},"touchZoom");const a=e.value.offsetWidth*o.value.scale,l=e.value.offsetHeight*o.value.scale,{left:w,top:h}=e.value.getBoundingClientRect(),S=o.value.rotate%180!==0,C=ye(S?l:a,S?a:l,w,h);C&&c({...C},"dragRebound")};return X.useEffect(()=>{let a;return i.value&&n.value&&(a=G(window,"touchmove",l=>l.preventDefault(),{passive:!1})),()=>{a?.remove()}},[i,n]),{isTouching:p,onTouchStart:v,onTouchMove:x,onTouchEnd:I}}const Ae=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=(i,s)=>{i.preventDefault(),i.stopPropagation(),e.onActive?.(s)};return()=>{const{prefixCls:i,hashId:s,tools:o}=e,c=L.getTransitionProps(`${e.prefixCls}-fade`),u=`${i}-operations-operation`,p=`${i}-operations-icon`;return t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[t.createVNode(t.Transition,c,{default:()=>[t.withDirectives(t.createVNode("div",{class:y.classNames(`${i}-operations-wrapper`,s),style:{zIndex:e.zIndex}},[e.icons?.close===null?null:t.createVNode("button",{class:`${i}-close ${s}`,onClick:e.onClose},[e.icons?.close||t.createVNode(A.CloseOutlined,null,null)]),e.showSwitch&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:y.classNames(`${i}-switch-left ${s}`,{[`${i}-switch-left-disabled`]:e.infinite?!1:e.current===0}),onClick:g=>n(g,-1)},[e.icons?.left||t.createVNode(A.LeftOutlined,null,null)]),t.createVNode("div",{class:y.classNames(`${i}-switch-right ${s}`,{[`${i}-switch-right-disabled`]:e.infinite?!1:e.current===e.count-1}),onClick:g=>n(g,1)},[e.icons?.right||t.createVNode(A.RightOutlined,null,null)])]),t.createVNode("div",{class:`${i}-footer ${s}`},[e.showProgress&&t.createVNode("div",{class:`${i}-progress`},[e.countRender?e.countRender(e.current+1,e.count):`${e.current+1} / ${e.count}`]),t.createVNode("div",{class:`${e.prefixCls}-operations`},[o?.map(({icon:g,onClick:d,type:m,disabled:v})=>t.createVNode("div",{class:y.classNames(u,{[`${e.prefixCls}-operations-operation-disabled`]:v&&v?.value}),onClick:d,key:m},[t.cloneVNode(g,{class:p})]))])])]),[[t.vShow,e.open]])]})]})}}}),Ee=new L.Keyframe("viewFadeIn",{"0%":{opacity:0},"100%":{opacity:1}}),Re=new L.Keyframe("viewFadeOut",{"0%":{opacity:1},"100%":{opacity:0}}),De=new L.Keyframe("viewZoomBadgeIn",{"0%":{transform:"scale(0)",opacity:0},"100%":{transform:"scale(1)",opacity:1}}),Pe=new L.Keyframe("viewZoomBadgeOut",{"0%":{transform:"scale(1)"},"100%":{transform:"scale(0)",opacity:0}}),Se=e=>({position:e||"absolute",inset:0});function re(e){return{position:e,top:0,insetInlineEnd:0,bottom:0,insetInlineStart:0}}const Xe=e=>{const{previewCls:n,modalMaskBg:i,marginXL:s,margin:o,colorTextLightSolid:c,previewOperationColorDisabled:u,previewOperationHoverColor:p,motionDurationSlow:g,iconCls:d}=e,m=new F.TinyColor(i).setAlpha(.1),v=m.clone().setAlpha(.2),x=new F.TinyColor(i).setAlpha(.5),I=new F.TinyColor(i).setAlpha(.03);return{[`${n}-footer`]:{position:"fixed",bottom:s,left:{_skip_check_:!0,value:"50%"},display:"flex",flexDirection:"column",alignItems:"center",color:e.previewOperationColor,transform:"translateX(-50%)"},[`${n}-progress`]:{marginBottom:o},[`${n}-close`]:{position:"fixed",top:s,right:{_skip_check_:!0,value:s},display:"flex",alignItems:"center",justifyContent:"center",color:c,backgroundColor:m.toRgbString(),borderRadius:e.borderRadiusLG,backdropFilter:"saturate(180%) blur(10px)",width:e.sizeXL,height:e.sizeXL,outline:0,border:0,cursor:"pointer",transition:`all ${g}`,"&:hover":{backgroundColor:v.toRgbString()},[`& > ${d}`]:{fontSize:e.previewOperationSize}},[`${n}-operations`]:{display:"flex",alignItems:"center",gap:e.sizeXXS,padding:e.paddingXXS,border:`1px solid ${e.colorBorderSecondary}`,backgroundColor:x.toRgbString(),borderRadius:e.borderRadiusLG,backdropFilter:"saturate(150%) blur(10px)","&-operation":{display:"flex",alignItems:"center",justifyContent:"center",width:e.sizeXL+4,height:e.sizeXL+4,cursor:"pointer",color:c,borderRadius:e.borderRadiusSM,transition:`all ${g}`,userSelect:"none",[`&:not(${n}-operations-operation-disabled):hover > ${d}`]:{color:p},"&:hover":{backgroundColor:I.toRgbString()},"&-disabled":{color:u,cursor:"not-allowed"},"&:first-of-type":{marginInlineStart:0},[`& > ${d}`]:{fontSize:e.previewOperationSize}}}}},je=e=>{const{modalMaskBg:n,iconCls:i,previewOperationColorDisabled:s,previewCls:o,zIndexPopup:c,motionDurationSlow:u,colorTextLightSolid:p}=e,g=new F.TinyColor(n).setAlpha(.1),d=g.clone().setAlpha(.2);return{[`${o}-switch-left, ${o}-switch-right`]:{position:"fixed",insetBlockStart:"50%",zIndex:e.calc(c).add(1).equal(),display:"flex",alignItems:"center",justifyContent:"center",borderRadius:e.borderRadius,backdropFilter:"saturate(180%) blur(10px)",width:e.imagePreviewSwitchSize,height:e.imagePreviewSwitchSize,marginTop:e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),color:p,background:g.toRgbString(),transform:"translateY(-50%)",cursor:"pointer",transition:`all ${u}`,userSelect:"none","&:hover":{background:d.toRgbString()},"&-disabled":{"&, &:hover":{color:s,background:"transparent",cursor:"not-allowed",[`> ${i}`]:{cursor:"not-allowed"}}},[`> ${i}`]:{fontSize:e.previewOperationSize}},[`${o}-switch-left`]:{insetInlineStart:e.marginSM},[`${o}-switch-right`]:{insetInlineEnd:e.marginSM}}},Ve=e=>{const{motionEaseOut:n,motionDurationSlow:i}=e;return{[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,backdropFilter:"blur(8px)"},"&-body":{...Se(),overflow:"hidden"},"&-img":{maxWidth:"100%",maxHeight:"70%",verticalAlign:"middle",transform:"scale3d(1, 1, 1)",cursor:"grab",transition:`transform ${i} ${n} 0s`,userSelect:"none","&-wrapper":{...Se(),transition:`transform ${i} ${n} 0s`,display:"flex",justifyContent:"center",alignItems:"center","& > *":{pointerEvents:"auto"},"&::before":{display:"inline-block",width:1,height:"50%",marginInlineEnd:-1,content:'""'}}},"&-moving":{[`${e.componentCls}-view-img`]:{cursor:"grabbing","&-wrapper":{transitionDuration:"0s"}}},"&-mask-zoom-appear, &-mask-zoom-enter":{animationName:Ee,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear",userSelect:"none"},"&-mask-zoom-leave":{animationName:Re,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear",pointerEvents:"none"},"&-zoom-appear, &-zoom-enter":{animationName:De,opacity:0,animationTimingFunction:e.motionEaseOutCirc,animationFillMode:"both",transform:"none",animationDuration:e.motionDurationMid,userSelect:"none"},"&-zoom-enter-active":{animationPlayState:"running"},"&-zoom-leave":{animationName:Pe,animationDuration:e.motionDurationSlow,animationTimingFunction:e.motionEaseInOutCirc,animationFillMode:"both"}},[`${e.componentCls}-root`]:{[`${e.componentCls}-wrapper`]:{zIndex:e.zIndexPopup}},[`${e.componentCls}-operations-wrapper`]:{position:"fixed",insetBlockStart:0,insetInlineEnd:0,zIndex:e.calc(e.zIndexPopup).add(1).equal(),width:"100%"},"&":[Xe(e),je(e)]}};function Ye(e){return L.useStyle("ImageViewer",n=>{const i=L.mergeToken(n,{zIndexPopup:n.zIndexPopupBase+80,previewOperationColor:new F.TinyColor(n.colorTextLightSolid).setAlpha(.65).toRgbString(),previewOperationHoverColor:new F.TinyColor(n.colorTextLightSolid).setAlpha(.85).toRgbString(),previewOperationColorDisabled:new F.TinyColor(n.colorTextLightSolid).setAlpha(.25).toRgbString(),imagePreviewSwitchSize:n.sizeXL,modalMaskBg:new F.TinyColor("#000").setAlpha(.45).toRgbString(),previewOperationSize:n.fontSizeIcon*1.5,iconCls:".anticon",previewCls:n.componentCls});return[Ve(i)]},e)}const se={ESC:27,LEFT:37,RIGHT:39},K={rotateLeft:t.createVNode(A.RotateLeftOutlined,null,null),rotateRight:t.createVNode(A.RotateRightOutlined,null,null),zoomIn:t.createVNode(A.ZoomInOutlined,null,null),zoomOut:t.createVNode(A.ZoomOutOutlined,null,null),flipX:t.createVNode(A.SwapOutlined,null,null),flipY:t.createVNode(A.SwapOutlined,{rotate:90},null)},Ce=t.defineComponent({name:"GImagePreview",props:_,inheritAttrs:!1,slots:Object,emits:{close:()=>!0,transform:e=>!0,"update:open":e=>!0},setup:(e,{emit:n,expose:i,slots:s})=>{const o=y.getPrefixCls({suffixCls:"image-view"}),{wrapSSR:c,hashId:u}=Ye(o),[p,g,d]=X.useMergedState(e.open,{value:t.toRef(e,"open"),onChange:r=>{e.onOpenChange?.(r),n("update:open",r)}}),[m,v]=X.useState(!1),[x,I]=X.useState(!0),a=t.ref(),{transform:l,resetTransform:w,updateTransform:h,dispatchZoomChange:S}=Le(a,t.toRef(e,"minScale"),t.toRef(e,"maxScale"),e.onTransform),{isMoving:C,onMouseDown:T,onWheel:R}=$e(a,t.toRef(e,"movable"),d,t.toRef(e,"scaleStep"),l,h,S),{isTouching:M,onTouchStart:N,onTouchMove:k,onTouchEnd:Q}=Oe(a,t.toRef(e,"movable"),d,t.toRef(e,"minScale"),l,h,S);X.useEffect(()=>{x.value||I(!0)},[x]);const j=t.ref(null),$=t.ref(e.current),V=t.reactive(new Map),B=t.computed(()=>new Map(Array.from(V).map(([r,{url:O}])=>[r,O]))),J=t.computed(()=>B.value.get($.value)),W=t.computed(()=>B.value.size),Z=t.computed(()=>Array.from(B.value.keys())),D=t.computed(()=>Z.value.indexOf($.value)),f=t.computed(()=>W.value>1),Y=t.computed(()=>W.value>=1);t.watch(d,r=>{r&&(m.value=!0)});const z=r=>{$.value=r};t.watch(()=>e.current,r=>{y.isNumber(r)&&z(r)});function oe(r,O){V.set(r,{url:O,loading:!0,canPreview:!1})}const ue=()=>{v(!1)},He=()=>{w("close"),n("close")},_e=r=>{C.value||j.value===r?.target&&ue()},Ge=()=>{const r=V.get($.value);r&&(r.loading=!1,r.canPreview=!0)},qe=r=>{const O=V.get($.value);O&&(O.loading=!1,O.canPreview=!1),r.target.alt="加载失败"},Ie=()=>{if(D.value>0||e.infinite){const r=D.value-1<0?e.urls.length-1:D.value-1;z(Z.value[r]),w("prev")}},be=()=>{if(D.value<W.value-1||e.infinite){const r=D.value+1>e.urls.length-1?0:D.value+1;z(Z.value[r]),w("next")}},Ke=()=>{S(q+e.scaleStep,"zoomIn")},Qe=()=>{S(q/(q+e.scaleStep),"zoomOut")},Je=()=>{h({rotate:l.value.rotate+90},"rotateRight")},Ue=()=>{h({rotate:l.value.rotate-90},"rotateLeft")},et=()=>{h({flipX:!l.value.flipX},"flipX")},tt=()=>{h({flipY:!l.value.flipY},"flipY")},Ne=()=>{const r=y.getSlotsProps({slots:s,props:e.icons,keys:["flipY","flipX","rotateLeft","rotateRight","zoomOut","zoomIn"],render:!0,defaultVNodes:[K.flipY,K.flipX,K.rotateLeft,K.rotateRight,K.zoomOut,K.zoomIn]});return[{icon:r.flipY,onClick:tt,type:"flipY"},{icon:r.flipX,onClick:et,type:"flipX"},{icon:r.rotateLeft,onClick:Ue,type:"rotateLeft"},{icon:r.rotateRight,onClick:Je,type:"rotateRight"},{icon:r.zoomOut,onClick:()=>Qe(),type:"zoomOut",disabled:t.computed(()=>l.value.scale<=e.minScale)},{icon:r.zoomIn,onClick:()=>Ke(),type:"zoomIn",disabled:t.computed(()=>l.value.scale===e.maxScale)}]},nt=r=>{d.value&&(l.value.scale!==1?h({x:0,y:0,scale:1},"doubleClick"):S(q+e.scaleStep,"doubleClick",r.clientX,r.clientY))},ot=r=>{r.keyCode===se.ESC&&ue(),!(!d.value||!f.value)&&(r.keyCode===se.LEFT?Ie():r.keyCode===se.RIGHT&&be())};let de=()=>{};return t.onMounted(()=>{t.watch(()=>e.urls,r=>{y.isArray(r)&&r.forEach((O,ie)=>{oe(ie,O)})},{flush:"post",immediate:!0}),t.watch([()=>d.value,()=>C.value],()=>{de();const r=G(window,"keydown",ot,!1);de=()=>{r.remove()}},{flush:"post",immediate:!0})}),t.onUnmounted(()=>{de()}),i({setOpen:r=>{g(r),$.value=e.current}}),()=>{const r=L.getTransitionProps(`${o}-mask-zoom`),O=L.getTransitionProps(`${o}-zoom`),ie={};for(const P in e.icons)ie[P]=getSlotVNode(s,e.icons,P);return c(t.createVNode(t.Fragment,null,[t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[d.value&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:`${o}-root ${u.value}`},[t.createVNode(t.Transition,r,{default:()=>[t.withDirectives(t.createVNode("div",{class:`${o}-mask ${u.value}`},null),[[t.vShow,d.value&&m.value]])]}),t.createVNode("div",{ref:j,tabindex:-1,class:[`${o}-wrap`,`${u.value}`,C.value&&`${o}-moving`],onClick:P=>e.onHideOnClickModal&&_e(P)},[t.createVNode(t.Transition,t.mergeProps(O,{onAfterLeave:()=>He()}),{default:()=>[t.withDirectives(t.createVNode("div",{role:"dialog",class:`${o} ${u.value}`},[t.createVNode("div",{class:`${o}-content ${u.value}`},[t.createVNode("div",{class:`${o}-body ${u.value}`},[t.createVNode("div",{class:`${o}-img-wrapper ${u.value}`},[t.createVNode("img",{ref:a,class:`${o}-img ${u.value}`,src:J.value,onLoad:()=>Ge(),onError:P=>qe(P),style:{transform:`translate3d(${l.value.x}px, ${l.value.y}px, 0) scale3d(${l.value.flipX?"-":""}${l.value.scale}, ${l.value.flipY?"-":""}${l.value.scale}, 1) rotate(${l.value.rotate}deg)`,transitionDuration:!x.value||M.value?"0s":void 0},onWheel:R,onMousedown:T,onDblclick:nt,onTouchstart:N,onTouchmove:k,onTouchend:Q,onTouchcancel:Q},null)])])])]),[[t.vShow,d.value&&m.value]])]})])])])]}),d.value&&m.value&&t.createVNode(Ae,{open:d.value&&m.value,hashId:u.value,count:e.urls.length,current:$.value,zIndex:e.zIndex+1,getContainer:e.getContainer,prefixCls:o,icons:U.omit(ie,Ne().map(({type:P})=>P)),tools:Ne(),infinite:e.infinite,countRender:y.getSlot({slots:s,props:e,key:"countRender"}),showSwitch:f.value,showProgress:Y.value,onClose:ue,onActive:P=>P>0?be():Ie()},null)]))}}}),ce={width:"100%",height:"100%"},Fe={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"},Be=e=>{const{motionDurationSlow:n,paddingXXS:i,marginXXS:s,colorTextLightSolid:o}=e,c=".anticon";return{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",color:o,background:new L.FastColor("#000").setA(.5).toRgbString(),cursor:"pointer",opacity:0,transition:`opacity ${n}`,[`.${e.componentCls}-mask-info`]:{...Fe,padding:`0 ${L.unit(i)}`,[c]:{marginInlineEnd:s,svg:{verticalAlign:"baseline"}}}}},We=e=>({position:e||"absolute",inset:0}),Ze=e=>({[e.componentCls]:{display:"inline-block",position:"relative",overflow:"hidden",[`${e.componentCls}-img`]:{...ce,verticalAlign:"top",opacity:1,[`&${e.componentCls}-img-preview`]:{userSelect:"none",cursor:"pointer"},"&-placeholder":{...ce,backgroundColor:e.colorBgContainerDisabled,backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",backgroundRepeat:"no-repeat",backgroundPosition:"center center",backgroundSize:"30%"}},[`${e.componentCls}-error`]:{...ce,display:"flex",alignItems:"center",justifyContent:"center"},[`${e.componentCls}-placeholder`]:{...We()},[`${e.componentCls}-mask`]:{...Be(e)},[`${e.componentCls}-mask:hover`]:{opacity:1}}}),ke=e=>typeof Element>"u"?!1:e instanceof Element;let xe="";const ee=t.defineComponent({props:ae,name:"GImage",inheritAttrs:!1,emits:{click:()=>!0,load:e=>!0,error:e=>!0},slots:Object,setup(e,{slots:n,emit:i,attrs:s}){const o=E.isClient&&"loading"in HTMLImageElement.prototype,c=y.getPrefixCls({suffixCls:"image"}),{wrapSSR:u,hashId:p}=L.useProStyle("Image",[Ze],c),g=t.ref(),d=t.ref(),m=t.ref(!1),v=t.ref(!0),x=t.ref(!1),I=t.ref(),a=t.ref();let l,w;const h=t.computed(()=>e.loading==="eager"?!1:!o&&e.loading==="lazy"||e.lazy),S=t.computed(()=>E.isClient&&e.fit?{...e.imageStyle,objectFit:e.fit}:e.imageStyle),C=t.computed(()=>typeof e.preview=="object"?e.preview:{}),T=t.computed(()=>!!e.preview),R=t.computed(()=>{const{urls:f=[],current:Y=0}=C.value;if(y.isNumber(Y))return f.length>=Y?Y:0;const z=f.indexOf(e.src);return z>=0?z:0}),M=t.computed(()=>L.unit(e.width)),N=t.computed(()=>L.unit(e.height)),k=()=>{E.isClient&&(v.value=!0,m.value=!1,d.value=e.src)};function Q(f){m.value||(v.value=!1,m.value=!1,i("load",f))}function j(f){v.value=!1,m.value=!0,i("error",f)}function $(){y.isInContainer(I.value,a.value)&&(k(),J())}const V=E.useThrottleFn($,200,!0);async function B(){if(!E.isClient)return;await t.nextTick();const{scrollContainer:f}=e;ke(f)?a.value=f:y.isString(f)&&f!==""?a.value=document.querySelector(f)??void 0:I.value&&(a.value=y.getScrollContainer(I.value)),a.value&&(l=E.useEventListener(a,"scroll",V),setTimeout(()=>$(),100))}function J(){!E.isClient||!a.value||!V||(l?.(),a.value=void 0)}function W(f){if(f.ctrlKey){if(f.deltaY<0)return f.preventDefault(),!1;if(f.deltaY>0)return f.preventDefault(),!1}}const Z=()=>{i("click"),!(v.value||m.value)&&T.value&&(w=E.useEventListener("wheel",W,{passive:!1}),xe=document.body.style.overflow,document.body.style.overflow="hidden",x.value=!0)},D=()=>{w?.(),document.body.style.overflow=xe,x.value=!1};return t.watch(()=>e.src,()=>{h.value?(v.value=!0,m.value=!1,J(),B()):k()}),t.watchEffect(()=>{T.value&&x.value?g.value?.setOpen(!0):g.value?.setOpen(!1)}),t.onMounted(()=>{h.value?B():k()}),()=>{const f=U.fromPairs(Object.entries(s).filter(([oe])=>/^(?:data-|on[A-Z])/i.test(oe)||["id","style","class"].includes(oe))),Y=U.omit(s,Object.keys(f)),z=y.getSlotsProps({slots:n,props:e,keys:["fallback","mask","placeholder"],render:!0});return u(t.createVNode("div",t.mergeProps({class:{[`${p.value}`]:!0,[`${c}`]:!0},ref:I},f,{style:{width:L.unit(e.size)||M.value,height:L.unit(e.size)||N.value,...f.style||{}}}),[m.value?t.createVNode("div",{class:y.classNames(p.value,`${c}-error`)},[z.fallback]):t.createVNode(t.Fragment,null,[t.createVNode("img",t.mergeProps(Y,{src:d.value,loading:e.loading,style:S.value,class:y.classNames(p.value,e.imageClass,`${c}-img`,{[`${c}-img-placeholder`]:e.placeholder===!0,[`${c}-img-preview`]:T.value}),crossorigin:e.crossOrigin,width:M.value,height:N.value,onClick:Z,onLoad:Q,onError:j}),null),v.value&&t.createVNode("div",{class:y.classNames(`${c}-placeholder`,p.value)},[z.placeholder])]),C.value.mask&&T.value&&t.createVNode("div",{class:y.classNames(`${c}-mask`,C.value.maskClass,p.value),style:{display:f.style?.display==="none"?"none":void 0}},[z.mask||t.createVNode("div",{class:y.classNames(`${c}-mask-info`,p.value)},[t.createVNode(A.EyeOutlined,null,null)])]),T.value&&t.createVNode(Ce,t.mergeProps({ref:g},C.value,{urls:C.value.urls||[e.src],current:R.value,onClose:()=>D()}),n)]))}}});ee.isGImage=!0,ee.install=e=>(e.component(ee.name,ee),e),b.GImage=ee,b.GImagePreview=Ce,b.baseProps=H,b.imageProps=ae,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));
12
+ (function(b,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@ant-design/icons-vue"),require("@gx-design-vue/pro-provider"),require("@gx-design-vue/pro-utils"),require("@vueuse/core"),require("lodash-es"),require("@gx-design-vue/pro-hooks"),require("@ctrl/tinycolor")):typeof define=="function"&&define.amd?define(["exports","vue","@ant-design/icons-vue","@gx-design-vue/pro-provider","@gx-design-vue/pro-utils","@vueuse/core","lodash-es","@gx-design-vue/pro-hooks","@ctrl/tinycolor"],t):(b=typeof globalThis<"u"?globalThis:b||self,t(b.GImage={},b.vue,b.iconsVue,b.proProvider,b.proUtils,b.core,b.lodashEs,b.proHooks,b.tinycolor))})(this,(function(b,t,A,L,y,E,U,j,B){"use strict";const _={infinite:{type:Boolean,default:!0},zIndex:{type:Number,default:2e3},current:{type:Number,default:0},getContainer:{type:String}},ae={preview:{type:[Object,Boolean],default:!0},src:{type:String,default:""},alt:{type:String,default:""},loading:{type:String},fit:{type:String,default:"contain"},crossOrigin:{type:String},lazy:Boolean,scrollContainer:{type:[String,Object]},placeholder:{type:[Function,Object,Boolean],default:()=>{}},fallback:{type:[Function,Object],default:()=>{}},onLoad:{type:Function},onError:{type:Function},onClick:{type:Function},imageStyle:{type:Object,default:()=>({})},imageClass:String,size:Number,width:Number,height:Number,zIndex:_.zIndex,getContainer:_.getContainer},H={urls:{type:Array,default:()=>[]},open:{type:Boolean,default:!1},scaleStep:{type:Number,default:.5},minScale:{type:Number,default:.32},maxScale:{type:Number,default:32},movable:{type:Boolean,default:!0},disabled:Boolean,zIndex:_.zIndex,current:_.current,infinite:_.infinite,getContainer:ae.getContainer,onHideOnClickModal:{type:Boolean,default:!0},countRender:[Function,Array,Object],icons:{type:Object,default:()=>({})},onTransform:Function,onOpenChange:Function,"onUpdate:open":Function};let fe=e=>setTimeout(e,16),ge=e=>clearTimeout(e);typeof window<"u"&&"requestAnimationFrame"in window&&(fe=e=>window.requestAnimationFrame(e),ge=e=>window.cancelAnimationFrame(e));let me=0;const le=new Map;function ve(e){le.delete(e)}function he(e,n=1){me+=1;const i=me;function s(o){if(o===0)ve(i),e();else{const c=fe(()=>{s(o-1)});le.set(i,c)}}return s(n),i}he.cancel=e=>{const n=le.get(e);return ve(n),ge(n)};const te={x:0,y:0,rotate:0,scale:1,flipX:!1,flipY:!1};function Le(e,n,i,s){const o=t.ref(null),c=t.ref([]),[u,p]=j.useState(te),v=g=>{p(te),U.isEqual(te,u.value)||s?.({transform:te,action:g})},d=(g,x)=>{o.value===null&&(c.value=[],o.value=he(()=>{let I=U.cloneDeep(u.value);c.value.forEach(a=>{I={...I,...a}}),o.value=null,s?.({transform:I,action:x}),p(I)})),c.value.push({...u.value,...g})};return{transform:u,resetTransform:v,updateTransform:d,dispatchZoomChange:(g,x,I,a,l)=>{const{width:w,height:h,offsetWidth:S,offsetHeight:C,offsetLeft:T,offsetTop:R}=e.value;let M=g,N=u.value.scale*g;N>i.value?(N=i.value,M=i.value/u.value.scale):N<n.value&&(N=l?N:n.value,M=N/u.value.scale);const Z=I??innerWidth/2,Q=a??innerHeight/2,V=M-1,$=V*w*.5,Y=V*h*.5,k=V*(Z-u.value.x-T),J=V*(Q-u.value.y-R);let W=u.value.x-(k-$),D=u.value.y-(J-Y);if(g<1&&N===1){const P=S*N,m=C*N,{width:F,height:z}=E.useWindowSize();P<=F.value&&m<=z.value&&(W=0,D=0)}d({x:W,y:D,scale:N},x)}}}function Te(e,n){process.env.NODE_ENV!=="production"&&console!==void 0&&console.error(`Warning: ${n}`)}let pe=!1;try{const e=Object.defineProperty({},"passive",{get(){pe=!0}});window.addEventListener("testPassive",null,e),window.removeEventListener("testPassive",null,e)}catch{}function G(e,n,i,s){if(e&&e.addEventListener){let o=s;o===void 0&&pe&&(n==="touchstart"||n==="touchmove"||n==="wheel")&&(o={passive:!1}),e.addEventListener(n,i,o)}return{remove:()=>{e&&e.removeEventListener&&e.removeEventListener(n,i)}}}const q=1,Me=1;function we(e,n,i,s){const o=n+i,c=(i-s)/2;if(i>s){if(n>0)return{[e]:c};if(n<0&&o<s)return{[e]:-c}}else if(n<0||o>s)return{[e]:n<0?c:-c};return{}}function ye(e,n,i,s){const{width:o,height:c}=E.useWindowSize();let u=null;return e<=o.value&&n<=c.value?u={x:0,y:0}:(e>o.value||n>c.value)&&(u={...we("x",i,e,o.value),...we("y",s,n,c.value)}),u}function $e(e,n,i,s,o,c,u){const[p,v]=j.useState(!1),d=t.ref({diffX:0,diffY:0,transformX:0,transformY:0}),f=a=>{!n||a.button!==0||(a.preventDefault(),a.stopPropagation(),d.value={diffX:a.pageX-o.value.x,diffY:a.pageY-o.value.y,transformX:o.value.x,transformY:o.value.y},v(!0))},g=a=>{i&&p.value&&c({x:a.pageX-d.value.diffX,y:a.pageY-d.value.diffY},"move")},x=()=>{if(i&&p.value){v(!1);const{transformX:a,transformY:l}=d.value;if(!(o.value.x!==a&&o.value.y!==l))return;const h=e.value.offsetWidth*o.value.scale,S=e.value.offsetHeight*o.value.scale,{left:C,top:T}=e.value.getBoundingClientRect(),R=o.value.rotate%180!==0,M=ye(R?S:h,R?h:S,C,T);M&&c({...M},"dragRebound")}},I=a=>{if(!i||a.deltaY===0)return;const l=Math.abs(a.deltaY/100),w=Math.min(l,Me);let h=q+w*s.value;a.deltaY>0&&(h=q/h),u(h,"wheel",a.clientX,a.clientY)};return j.useEffect(()=>{let a,l,w,h;if(n){w=G(window,"mouseup",x,!1),h=G(window,"mousemove",g,!1);try{window.top!==window.self&&(a=G(window.top,"mouseup",x,!1),l=G(window.top,"mousemove",g,!1))}catch(S){Te(!1,`[rc-image] ${S}`)}}return()=>{w?.remove(),h?.remove(),a?.remove(),l?.remove()}},[i,p,()=>o.value.x,()=>o.value.y,()=>o.value.rotate,n]),{isMoving:p,onMouseDown:f,onMouseMove:g,onMouseUp:x,onWheel:I}}function ne(e,n){const i=e.x-n.x,s=e.y-n.y;return Math.hypot(i,s)}function ze(e,n,i,s){const o=ne(e,i),c=ne(n,s);if(o===0&&c===0)return[e.x,e.y];const u=o/(o+c),p=e.x+u*(n.x-e.x),v=e.y+u*(n.y-e.y);return[p,v]}function Oe(e,n,i,s,o,c,u){const[p,v]=j.useState(!1),d=t.ref({point1:{x:0,y:0},point2:{x:0,y:0},eventType:"none"}),f=a=>{d.value={...d.value,...a}},g=a=>{if(!n.value)return;a.stopPropagation(),v(!0);const{touches:l=[]}=a;l.length>1?f({point1:{x:l[0].clientX,y:l[0].clientY},point2:{x:l[1].clientX,y:l[1].clientY},eventType:"touchZoom"}):f({point1:{x:l[0].clientX-o.value.x,y:l[0].clientY-o.value.y},eventType:"move"})},x=a=>{const{touches:l=[]}=a,{point1:w,point2:h,eventType:S}=d.value;if(l.length>1&&S==="touchZoom"){const C={x:l[0].clientX,y:l[0].clientY},T={x:l[1].clientX,y:l[1].clientY},[R,M]=ze(w,h,C,T),N=ne(C,T)/ne(w,h);u(N,"touchZoom",R,M,!0),f({point1:C,point2:T,eventType:"touchZoom"})}else S==="move"&&(c({x:l[0].clientX-w.x,y:l[0].clientY-w.y},"move"),f({eventType:"move"}))},I=()=>{if(!i.value)return;if(p&&v(!1),f({eventType:"none"}),s.value>o.value.scale)return c({x:0,y:0,scale:s.value},"touchZoom");const a=e.value.offsetWidth*o.value.scale,l=e.value.offsetHeight*o.value.scale,{left:w,top:h}=e.value.getBoundingClientRect(),S=o.value.rotate%180!==0,C=ye(S?l:a,S?a:l,w,h);C&&c({...C},"dragRebound")};return j.useEffect(()=>{let a;return i.value&&n.value&&(a=G(window,"touchmove",l=>l.preventDefault(),{passive:!1})),()=>{a?.remove()}},[i,n]),{isTouching:p,onTouchStart:g,onTouchMove:x,onTouchEnd:I}}const Ae=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:H.zIndex,icons:H.icons,infinite:H.infinite,getContainer:H.getContainer,countRender:H.countRender,tools:Array,onClose:Function,onActive:Function},setup(e){const n=(i,s)=>{i.preventDefault(),i.stopPropagation(),e.onActive?.(s)};return()=>{const{prefixCls:i,hashId:s,tools:o}=e,c=L.getTransitionProps(`${e.prefixCls}-fade`),u=`${i}-operations-operation`,p=`${i}-operations-icon`;return t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[t.createVNode(t.Transition,c,{default:()=>[t.withDirectives(t.createVNode("div",{class:y.classNames(`${i}-operations-wrapper`,s),style:{zIndex:e.zIndex}},[e.icons?.close===null?null:t.createVNode("button",{class:`${i}-close ${s}`,onClick:e.onClose},[e.icons?.close||t.createVNode(A.CloseOutlined,null,null)]),e.showSwitch&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:y.classNames(`${i}-switch-left ${s}`,{[`${i}-switch-left-disabled`]:e.infinite?!1:e.current===0}),onClick:v=>n(v,-1)},[e.icons?.left||t.createVNode(A.LeftOutlined,null,null)]),t.createVNode("div",{class:y.classNames(`${i}-switch-right ${s}`,{[`${i}-switch-right-disabled`]:e.infinite?!1:e.current===e.count-1}),onClick:v=>n(v,1)},[e.icons?.right||t.createVNode(A.RightOutlined,null,null)])]),t.createVNode("div",{class:`${i}-footer ${s}`},[e.showProgress&&t.createVNode("div",{class:`${i}-progress`},[e.countRender?e.countRender(e.current+1,e.count):`${e.current+1} / ${e.count}`]),t.createVNode("div",{class:`${e.prefixCls}-operations`},[o?.map(({icon:v,onClick:d,type:f,disabled:g})=>t.createVNode("div",{class:y.classNames(u,{[`${e.prefixCls}-operations-operation-disabled`]:g&&g?.value}),onClick:d,key:f},[t.cloneVNode(v,{class:p})]))])])]),[[t.vShow,e.open]])]})]})}}}),Ee=new L.Keyframe("viewFadeIn",{"0%":{opacity:0},"100%":{opacity:1}}),Re=new L.Keyframe("viewFadeOut",{"0%":{opacity:1},"100%":{opacity:0}}),De=new L.Keyframe("viewZoomBadgeIn",{"0%":{transform:"scale(0)",opacity:0},"100%":{transform:"scale(1)",opacity:1}}),Pe=new L.Keyframe("viewZoomBadgeOut",{"0%":{transform:"scale(1)"},"100%":{transform:"scale(0)",opacity:0}}),Se=e=>({position:e||"absolute",inset:0});function re(e){return{position:e,top:0,insetInlineEnd:0,bottom:0,insetInlineStart:0}}const Xe=e=>{const{previewCls:n,modalMaskBg:i,marginXL:s,margin:o,colorTextLightSolid:c,previewOperationColorDisabled:u,previewOperationHoverColor:p,motionDurationSlow:v,iconCls:d}=e,f=new B.TinyColor(i).setAlpha(.1),g=f.clone().setAlpha(.2),x=new B.TinyColor(i).setAlpha(.5),I=new B.TinyColor(i).setAlpha(.03);return{[`${n}-footer`]:{position:"fixed",bottom:s,left:{_skip_check_:!0,value:"50%"},display:"flex",flexDirection:"column",alignItems:"center",color:e.previewOperationColor,transform:"translateX(-50%)"},[`${n}-progress`]:{marginBottom:o},[`${n}-close`]:{position:"fixed",top:s,right:{_skip_check_:!0,value:s},display:"flex",alignItems:"center",justifyContent:"center",color:c,backgroundColor:f.toRgbString(),borderRadius:e.borderRadiusLG,backdropFilter:"saturate(180%) blur(10px)",width:e.sizeXL,height:e.sizeXL,outline:0,border:0,cursor:"pointer",transition:`all ${v}`,"&:hover":{backgroundColor:g.toRgbString()},[`& > ${d}`]:{fontSize:e.previewOperationSize}},[`${n}-operations`]:{display:"flex",alignItems:"center",gap:e.sizeXXS,padding:e.paddingXXS,border:`1px solid ${e.colorBorderSecondary}`,backgroundColor:x.toRgbString(),borderRadius:e.borderRadiusLG,backdropFilter:"saturate(150%) blur(10px)","&-operation":{display:"flex",alignItems:"center",justifyContent:"center",width:e.sizeXL+4,height:e.sizeXL+4,cursor:"pointer",color:c,borderRadius:e.borderRadiusSM,transition:`all ${v}`,userSelect:"none",[`&:not(${n}-operations-operation-disabled):hover > ${d}`]:{color:p},"&:hover":{backgroundColor:I.toRgbString()},"&-disabled":{color:u,cursor:"not-allowed"},"&:first-of-type":{marginInlineStart:0},[`& > ${d}`]:{fontSize:e.previewOperationSize}}}}},je=e=>{const{modalMaskBg:n,iconCls:i,previewOperationColorDisabled:s,previewCls:o,zIndexPopup:c,motionDurationSlow:u,colorTextLightSolid:p}=e,v=new B.TinyColor(n).setAlpha(.1),d=v.clone().setAlpha(.2);return{[`${o}-switch-left, ${o}-switch-right`]:{position:"fixed",insetBlockStart:"50%",zIndex:e.calc(c).add(1).equal(),display:"flex",alignItems:"center",justifyContent:"center",borderRadius:e.borderRadius,backdropFilter:"saturate(180%) blur(10px)",width:e.imagePreviewSwitchSize,height:e.imagePreviewSwitchSize,marginTop:e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),color:p,background:v.toRgbString(),transform:"translateY(-50%)",cursor:"pointer",transition:`all ${u}`,userSelect:"none","&:hover":{background:d.toRgbString()},"&-disabled":{"&, &:hover":{color:s,background:"transparent",cursor:"not-allowed",[`> ${i}`]:{cursor:"not-allowed"}}},[`> ${i}`]:{fontSize:e.previewOperationSize}},[`${o}-switch-left`]:{insetInlineStart:e.marginSM},[`${o}-switch-right`]:{insetInlineEnd:e.marginSM}}},Ve=e=>{const{motionEaseOut:n,motionDurationSlow:i}=e;return{[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,backdropFilter:"blur(8px)"},"&-body":{...Se(),overflow:"hidden"},"&-img":{maxWidth:"100%",maxHeight:"70%",verticalAlign:"middle",transform:"scale3d(1, 1, 1)",cursor:"grab",transition:`transform ${i} ${n} 0s`,userSelect:"none","&-wrapper":{...Se(),transition:`transform ${i} ${n} 0s`,display:"flex",justifyContent:"center",alignItems:"center","& > *":{pointerEvents:"auto"},"&::before":{display:"inline-block",width:1,height:"50%",marginInlineEnd:-1,content:'""'}}},"&-moving":{[`${e.componentCls}-view-img`]:{cursor:"grabbing","&-wrapper":{transitionDuration:"0s"}}},"&-mask-zoom-appear, &-mask-zoom-enter":{animationName:Ee,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear",userSelect:"none"},"&-mask-zoom-leave":{animationName:Re,animationDuration:e.motionDurationSlow,animationTimingFunction:"linear",pointerEvents:"none"},"&-zoom-appear, &-zoom-enter":{animationName:De,opacity:0,animationTimingFunction:e.motionEaseOutCirc,animationFillMode:"both",transform:"none",animationDuration:e.motionDurationMid,userSelect:"none"},"&-zoom-enter-active":{animationPlayState:"running"},"&-zoom-leave":{animationName:Pe,animationDuration:e.motionDurationSlow,animationTimingFunction:e.motionEaseInOutCirc,animationFillMode:"both"}},[`${e.componentCls}-root`]:{[`${e.componentCls}-wrapper`]:{zIndex:e.zIndexPopup}},[`${e.componentCls}-operations-wrapper`]:{position:"fixed",insetBlockStart:0,insetInlineEnd:0,zIndex:e.calc(e.zIndexPopup).add(1).equal(),width:"100%"},"&":[Xe(e),je(e)]}};function Ye(e){return L.useStyle("ImageViewer",n=>{const i=L.mergeToken(n,{zIndexPopup:n.zIndexPopupBase+80,previewOperationColor:new B.TinyColor(n.colorTextLightSolid).setAlpha(.65).toRgbString(),previewOperationHoverColor:new B.TinyColor(n.colorTextLightSolid).setAlpha(.85).toRgbString(),previewOperationColorDisabled:new B.TinyColor(n.colorTextLightSolid).setAlpha(.25).toRgbString(),imagePreviewSwitchSize:n.sizeXL,modalMaskBg:new B.TinyColor("#000").setAlpha(.45).toRgbString(),previewOperationSize:n.fontSizeIcon*1.5,iconCls:".anticon",previewCls:n.componentCls});return[Ve(i)]},e)}const se={ESC:27,LEFT:37,RIGHT:39},K={rotateLeft:t.createVNode(A.RotateLeftOutlined,null,null),rotateRight:t.createVNode(A.RotateRightOutlined,null,null),zoomIn:t.createVNode(A.ZoomInOutlined,null,null),zoomOut:t.createVNode(A.ZoomOutOutlined,null,null),flipX:t.createVNode(A.SwapOutlined,null,null),flipY:t.createVNode(A.SwapOutlined,{rotate:90},null)},Ce=t.defineComponent({name:"GImagePreview",props:H,inheritAttrs:!1,slots:Object,emits:{close:()=>!0,transform:e=>!0,"update:open":e=>!0},setup:(e,{emit:n,expose:i,slots:s})=>{const o=y.getPrefixCls({suffixCls:"image-view"}),{wrapSSR:c,hashId:u}=Ye(o),[p,v,d]=j.useMergedState(e.open,{value:t.toRef(e,"open"),onChange:r=>{e.onOpenChange?.(r),n("update:open",r)}}),[f,g]=j.useState(!1),[x,I]=j.useState(!0),a=t.ref(),{transform:l,resetTransform:w,updateTransform:h,dispatchZoomChange:S}=Le(a,t.toRef(e,"minScale"),t.toRef(e,"maxScale"),e.onTransform),{isMoving:C,onMouseDown:T,onWheel:R}=$e(a,t.toRef(e,"movable"),d,t.toRef(e,"scaleStep"),l,h,S),{isTouching:M,onTouchStart:N,onTouchMove:Z,onTouchEnd:Q}=Oe(a,t.toRef(e,"movable"),d,t.toRef(e,"minScale"),l,h,S);j.useEffect(()=>{x.value||I(!0)},[x]);const V=t.ref(null),$=t.ref(e.current),Y=t.reactive(new Map),k=t.computed(()=>new Map(Array.from(Y).map(([r,{url:O}])=>[r,O]))),J=t.computed(()=>k.value.get($.value)),W=t.computed(()=>k.value.size),D=t.computed(()=>Array.from(k.value.keys())),P=t.computed(()=>D.value.indexOf($.value)),m=t.computed(()=>W.value>1),F=t.computed(()=>W.value>=1);t.watch(d,r=>{r&&(f.value=!0)});const z=r=>{$.value=r};t.watch(()=>e.current,r=>{y.isNumber(r)&&z(r)});function oe(r,O){Y.set(r,{url:O,loading:!0,canPreview:!1})}const ue=()=>{g(!1)},_e=()=>{w("close"),n("close")},He=r=>{C.value||V.value===r?.target&&ue()},Ge=()=>{const r=Y.get($.value);r&&(r.loading=!1,r.canPreview=!0)},qe=r=>{const O=Y.get($.value);O&&(O.loading=!1,O.canPreview=!1),r.target.alt="加载失败"},Ie=()=>{if(P.value>0||e.infinite){const r=P.value-1<0?e.urls.length-1:P.value-1;z(D.value[r]),w("prev")}},be=()=>{if(P.value<W.value-1||e.infinite){const r=P.value+1>e.urls.length-1?0:P.value+1;z(D.value[r]),w("next")}},Ke=()=>{S(q+e.scaleStep,"zoomIn")},Qe=()=>{S(q/(q+e.scaleStep),"zoomOut")},Je=()=>{h({rotate:l.value.rotate+90},"rotateRight")},Ue=()=>{h({rotate:l.value.rotate-90},"rotateLeft")},et=()=>{h({flipX:!l.value.flipX},"flipX")},tt=()=>{h({flipY:!l.value.flipY},"flipY")},Ne=()=>{const r=y.getSlotsProps({slots:s,props:e.icons,keys:["flipY","flipX","rotateLeft","rotateRight","zoomOut","zoomIn"],render:!0,defaultVNodes:[K.flipY,K.flipX,K.rotateLeft,K.rotateRight,K.zoomOut,K.zoomIn]});return[{icon:r.flipY,onClick:tt,type:"flipY"},{icon:r.flipX,onClick:et,type:"flipX"},{icon:r.rotateLeft,onClick:Ue,type:"rotateLeft"},{icon:r.rotateRight,onClick:Je,type:"rotateRight"},{icon:r.zoomOut,onClick:()=>Qe(),type:"zoomOut",disabled:t.computed(()=>l.value.scale<=e.minScale)},{icon:r.zoomIn,onClick:()=>Ke(),type:"zoomIn",disabled:t.computed(()=>l.value.scale===e.maxScale)}]},nt=r=>{d.value&&(l.value.scale!==1?h({x:0,y:0,scale:1},"doubleClick"):S(q+e.scaleStep,"doubleClick",r.clientX,r.clientY))},ot=r=>{r.keyCode===se.ESC&&ue(),!(!d.value||!m.value)&&(r.keyCode===se.LEFT?Ie():r.keyCode===se.RIGHT&&be())};let de=()=>{};return t.onMounted(()=>{t.watch(()=>e.urls,r=>{y.isArray(r)&&r.forEach((O,ie)=>{oe(ie,O)})},{flush:"post",immediate:!0}),t.watch([()=>d.value,()=>C.value],()=>{de();const r=G(window,"keydown",ot,!1);de=()=>{r.remove()}},{flush:"post",immediate:!0})}),t.onUnmounted(()=>{de()}),i({setOpen:r=>{v(r),$.value=e.current}}),()=>{const r=L.getTransitionProps(`${o}-mask-zoom`),O=L.getTransitionProps(`${o}-zoom`),ie={};for(const X in e.icons)ie[X]=getSlotVNode(s,e.icons,X);return c(t.createVNode(t.Fragment,null,[t.createVNode(t.Teleport,{to:e.getContainer||"body"},{default:()=>[d.value&&t.createVNode(t.Fragment,null,[t.createVNode("div",{class:`${o}-root ${u.value}`},[t.createVNode(t.Transition,r,{default:()=>[t.withDirectives(t.createVNode("div",{class:`${o}-mask ${u.value}`},null),[[t.vShow,d.value&&f.value]])]}),t.createVNode("div",{ref:V,tabindex:-1,class:[`${o}-wrap`,`${u.value}`,C.value&&`${o}-moving`],onClick:X=>e.onHideOnClickModal&&He(X)},[t.createVNode(t.Transition,t.mergeProps(O,{onAfterLeave:()=>_e()}),{default:()=>[t.withDirectives(t.createVNode("div",{role:"dialog",class:`${o} ${u.value}`},[t.createVNode("div",{class:`${o}-content ${u.value}`},[t.createVNode("div",{class:`${o}-body ${u.value}`},[t.createVNode("div",{class:`${o}-img-wrapper ${u.value}`},[t.createVNode("img",{ref:a,class:`${o}-img ${u.value}`,src:J.value,onLoad:()=>Ge(),onError:X=>qe(X),style:{transform:`translate3d(${l.value.x}px, ${l.value.y}px, 0) scale3d(${l.value.flipX?"-":""}${l.value.scale}, ${l.value.flipY?"-":""}${l.value.scale}, 1) rotate(${l.value.rotate}deg)`,transitionDuration:!x.value||M.value?"0s":void 0},onWheel:R,onMousedown:T,onDblclick:nt,onTouchstart:N,onTouchmove:Z,onTouchend:Q,onTouchcancel:Q},null)])])])]),[[t.vShow,d.value&&f.value]])]})])])])]}),d.value&&f.value&&t.createVNode(Ae,{open:d.value&&f.value,hashId:u.value,count:e.urls.length,current:$.value,zIndex:e.zIndex+1,getContainer:e.getContainer,prefixCls:o,icons:U.omit(ie,Ne().map(({type:X})=>X)),tools:Ne(),infinite:e.infinite,countRender:y.getSlot({slots:s,props:e,key:"countRender"}),showSwitch:m.value,showProgress:F.value,onClose:ue,onActive:X=>X>0?be():Ie()},null)]))}}}),ce={width:"100%",height:"100%"},Fe={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"},Be=e=>{const{motionDurationSlow:n,paddingXXS:i,marginXXS:s,colorTextLightSolid:o}=e,c=".anticon";return{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",color:o,background:new L.FastColor("#000").setA(.5).toRgbString(),cursor:"pointer",opacity:0,transition:`opacity ${n}`,[`.${e.componentCls}-mask-info`]:{...Fe,padding:`0 ${L.unit(i)}`,[c]:{marginInlineEnd:s,svg:{verticalAlign:"baseline"}}}}},ke=e=>({position:e||"absolute",inset:0}),We=e=>({[e.componentCls]:{display:"inline-block",position:"relative",overflow:"hidden",[`${e.componentCls}-img`]:{...ce,verticalAlign:"top",opacity:1,[`&${e.componentCls}-img-preview`]:{userSelect:"none",cursor:"pointer"},"&-placeholder":{...ce,backgroundColor:e.colorBgContainerDisabled,backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",backgroundRepeat:"no-repeat",backgroundPosition:"center center",backgroundSize:"30%"}},[`${e.componentCls}-error`]:{...ce,display:"flex",alignItems:"center",justifyContent:"center"},[`${e.componentCls}-placeholder`]:{...ke()},[`${e.componentCls}-mask`]:{...Be(e)},[`${e.componentCls}-mask:hover`]:{opacity:1}}}),Ze=e=>typeof Element>"u"?!1:e instanceof Element;let xe="";const ee=t.defineComponent({props:ae,name:"GImage",inheritAttrs:!1,emits:{click:e=>!0,load:e=>!0,error:e=>!0},slots:Object,setup(e,{slots:n,emit:i,attrs:s}){const o=E.isClient&&"loading"in HTMLImageElement.prototype,c=y.getPrefixCls({suffixCls:"image"}),{wrapSSR:u,hashId:p}=L.useProStyle("Image",[We],c),v=t.ref(),d=t.ref(),f=t.ref(!1),g=t.ref(!0),x=t.ref(!1),I=t.ref(),a=t.ref();let l,w;const h=t.computed(()=>e.loading==="eager"?!1:!o&&e.loading==="lazy"||e.lazy),S=t.computed(()=>E.isClient&&e.fit?{...e.imageStyle,objectFit:e.fit}:e.imageStyle),C=t.computed(()=>typeof e.preview=="object"?e.preview:{}),T=t.computed(()=>!!e.preview),R=t.computed(()=>{const{urls:m=[],current:F=0}=C.value;if(y.isNumber(F))return m.length>=F?F:0;const z=m.indexOf(e.src);return z>=0?z:0}),M=t.computed(()=>L.unit(e.width)),N=t.computed(()=>L.unit(e.height)),Z=()=>{E.isClient&&(g.value=!0,f.value=!1,d.value=e.src)};function Q(m){f.value||(g.value=!1,f.value=!1,i("load",m))}function V(m){g.value=!1,f.value=!0,i("error",m)}function $(){y.isInContainer(I.value,a.value)&&(Z(),J())}const Y=E.useThrottleFn($,200,!0);async function k(){if(!E.isClient)return;await t.nextTick();const{scrollContainer:m}=e;Ze(m)?a.value=m:y.isString(m)&&m!==""?a.value=document.querySelector(m)??void 0:I.value&&(a.value=y.getScrollContainer(I.value)),a.value&&(l=E.useEventListener(a,"scroll",Y),setTimeout(()=>$(),100))}function J(){!E.isClient||!a.value||!Y||(l?.(),a.value=void 0)}function W(m){if(m.ctrlKey){if(m.deltaY<0)return m.preventDefault(),!1;if(m.deltaY>0)return m.preventDefault(),!1}}const D=()=>{i("click",g.value?"loaded":f.value?"error":"success"),!(g.value||f.value)&&T.value&&(w=E.useEventListener("wheel",W,{passive:!1}),xe=document.body.style.overflow,document.body.style.overflow="hidden",x.value=!0)},P=()=>{w?.(),document.body.style.overflow=xe,x.value=!1};return t.watch(()=>e.src,()=>{h.value?(g.value=!0,f.value=!1,J(),k()):Z()}),t.watchEffect(()=>{T.value&&x.value?v.value?.setOpen(!0):v.value?.setOpen(!1)}),t.onMounted(()=>{h.value?k():Z()}),()=>{const m=U.fromPairs(Object.entries(s).filter(([oe])=>/^(?:data-|on[A-Z])/i.test(oe)||["id","style","class"].includes(oe))),F=U.omit(s,Object.keys(m)),z=y.getSlotsProps({slots:n,props:e,keys:["fallback","mask","placeholder"],render:!0});return u(t.createVNode("div",t.mergeProps({class:{[`${p.value}`]:!0,[`${c}`]:!0},ref:I},m,{style:{width:L.unit(e.size)||M.value,height:L.unit(e.size)||N.value,...m.style||{}},onClick:()=>{f.value&&D()}}),[f.value?t.createVNode("div",{class:y.classNames(p.value,`${c}-error`)},[z.fallback]):t.createVNode(t.Fragment,null,[t.createVNode("img",t.mergeProps(F,{src:d.value,loading:e.loading,style:S.value,class:y.classNames(p.value,e.imageClass,`${c}-img`,{[`${c}-img-placeholder`]:e.placeholder===!0,[`${c}-img-preview`]:T.value}),crossorigin:e.crossOrigin,width:M.value,height:N.value,onClick:D,onLoad:Q,onError:V}),null),g.value&&t.createVNode("div",{class:y.classNames(`${c}-placeholder`,p.value),onClick:D},[z.placeholder])]),C.value.mask&&T.value&&t.createVNode("div",{class:y.classNames(`${c}-mask`,C.value.maskClass,p.value),style:{display:m.style?.display==="none"?"none":void 0}},[z.mask||t.createVNode("div",{class:y.classNames(`${c}-mask-info`,p.value)},[t.createVNode(A.EyeOutlined,null,null)])]),T.value&&t.createVNode(Ce,t.mergeProps({ref:v},C.value,{urls:C.value.urls||[e.src],current:R.value,onClose:()=>P()}),n)]))}}});ee.isGImage=!0,ee.install=e=>(e.component(ee.name,ee),e),b.GImage=ee,b.GImagePreview=Ce,b.baseProps=_,b.imageProps=ae,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@gx-design-vue/image",
3
3
  "type": "module",
4
- "version": "0.2.0-beta.32",
4
+ "version": "0.2.0-beta.33",
5
5
  "description": "Gx Design Image",
6
6
  "exports": {
7
7
  ".": {
@@ -26,13 +26,13 @@
26
26
  "lint": "TIMING=1 eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
27
27
  },
28
28
  "peerDependencies": {
29
- "ant-design-vue": "^4.1.2",
29
+ "ant-design-vue": "^4.2.6",
30
30
  "vue": ">=3.0.0"
31
31
  },
32
32
  "dependencies": {
33
- "@gx-design-vue/pro-hooks": "^0.2.0-beta.54",
34
- "@gx-design-vue/pro-provider": "^0.1.0-beta.119",
35
- "@gx-design-vue/pro-utils": "^0.2.0-beta.80",
33
+ "@gx-design-vue/pro-hooks": "^0.2.0-beta.61",
34
+ "@gx-design-vue/pro-provider": "^0.1.0-beta.143",
35
+ "@gx-design-vue/pro-utils": "^0.2.0-beta.87",
36
36
  "@vueuse/core": "^9.10.0",
37
37
  "lodash-es": "^4.17.21"
38
38
  },