@gx-design-vue/image 0.2.0-alpha.3 → 0.2.0-alpha.5

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.js CHANGED
@@ -2,7 +2,7 @@ import useImagePreview from "./hooks/useImagePreview.js";
2
2
  import GImagePreview from "./ImagePreview.js";
3
3
  import style_default from "./style/index.js";
4
4
  import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, onMounted, ref, watch } from "vue";
5
- import { EyeOutlined } from "@antdv-next/icons";
5
+ import { GIcon } from "@gx-design-vue/icon";
6
6
  import { unit } from "@gx-design-vue/pro-provider";
7
7
  import { classNames, getScrollContainer, getSlotsProps, isNumber, isString } from "@gx-design-vue/pro-utils";
8
8
  import { isClient, useEventListener, useThrottleFn } from "@vueuse/core";
@@ -185,7 +185,7 @@ const Image = /* @__PURE__ */ defineComponent((props, { emit, slots, expose, att
185
185
  previewConfig.value.mask && canPreview.value && createVNode("div", {
186
186
  "class": classNames(`${prefixCls.value}-mask`, previewConfig.value.maskClass),
187
187
  "style": { display: containerAttrs.style?.display === "none" ? "none" : void 0 }
188
- }, [slotProps.mask || createVNode("div", { "class": classNames(`${prefixCls.value}-mask-info`) }, [createVNode(EyeOutlined, null, null)])]),
188
+ }, [slotProps.mask || createVNode("div", { "class": classNames(`${prefixCls.value}-mask-info`) }, [createVNode(GIcon, { "type": "EyeOutlined" }, null)])]),
189
189
  canPreview.value && createVNode(GImagePreview, mergeProps(previewConfig.value, {
190
190
  "urls": previewConfig.value.urls || (props.src ? [props.src] : []),
191
191
  "current": currentPreviewIndex.value,
@@ -264,12 +264,11 @@ const Image = /* @__PURE__ */ defineComponent((props, { emit, slots, expose, att
264
264
  placeholder: {
265
265
  type: [
266
266
  Function,
267
- Object,
268
267
  String,
269
268
  Number,
270
- Boolean,
271
269
  null,
272
- Array
270
+ Object,
271
+ Boolean
273
272
  ],
274
273
  required: false,
275
274
  default: void 0
@@ -277,12 +276,11 @@ const Image = /* @__PURE__ */ defineComponent((props, { emit, slots, expose, att
277
276
  fallback: {
278
277
  type: [
279
278
  Function,
280
- Object,
281
279
  String,
282
280
  Number,
283
- Boolean,
284
281
  null,
285
- Array
282
+ Object,
283
+ Boolean
286
284
  ],
287
285
  required: false,
288
286
  default: void 0
@@ -3,7 +3,7 @@ import useMouseEvent from "./hooks/useMouseEvent.js";
3
3
  import useTouchEvent from "./hooks/useTouchEvent.js";
4
4
  import preview_default from "./style/preview.js";
5
5
  import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, mergeDefaults, nextTick, onMounted, onUnmounted, ref, toRef, watch } from "vue";
6
- import { CloseOutlined, CopyOutlined, DownloadOutlined, LeftOutlined, LoadingOutlined, RightOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, ZoomInOutlined, ZoomOutOutlined } from "@antdv-next/icons";
6
+ import { GIcon } from "@gx-design-vue/icon";
7
7
  import { classNames, getSlotVNode, getSlotsProps } from "@gx-design-vue/pro-utils";
8
8
  import { useWindowSize } from "@vueuse/core";
9
9
  import { useBaseConfig } from "antdv-next/config-provider/context";
@@ -13,14 +13,17 @@ import { message } from "antdv-next";
13
13
  //#region src/ImagePreview.tsx
14
14
  const BASE_SCALE_RATIO = 1;
15
15
  const defaultIcons = {
16
- rotateLeft: createVNode(RotateLeftOutlined, null, null),
17
- rotateRight: createVNode(RotateRightOutlined, null, null),
18
- zoomIn: createVNode(ZoomInOutlined, null, null),
19
- zoomOut: createVNode(ZoomOutOutlined, null, null),
20
- flipX: createVNode(SwapOutlined, null, null),
21
- flipY: createVNode(SwapOutlined, { "rotate": 90 }, null),
22
- copy: createVNode(CopyOutlined, null, null),
23
- download: createVNode(DownloadOutlined, null, null)
16
+ rotateLeft: createVNode(GIcon, { "type": "RotateLeftOutlined" }, null),
17
+ rotateRight: createVNode(GIcon, { "type": "RotateRightOutlined" }, null),
18
+ zoomIn: createVNode(GIcon, { "type": "ZoomInOutlined" }, null),
19
+ zoomOut: createVNode(GIcon, { "type": "ZoomOutOutlined" }, null),
20
+ flipX: createVNode(GIcon, { "type": "SwapOutlined" }, null),
21
+ flipY: createVNode(GIcon, {
22
+ "type": "SwapOutlined",
23
+ "rotate": 90
24
+ }, null),
25
+ copy: createVNode(GIcon, { "type": "CopyOutlined" }, null),
26
+ download: createVNode(GIcon, { "type": "DownloadOutlined" }, null)
24
27
  };
25
28
  const imagePreviewMessages = {
26
29
  copySuccess: "复制成功",
@@ -351,13 +354,19 @@ const GImagePreview = /* @__PURE__ */ defineComponent((props, { emit, slots, exp
351
354
  disabled: computed(() => transform.value.scale === (props.maxScale ?? 50))
352
355
  },
353
356
  {
354
- icon: copyLoading.value ? createVNode(LoadingOutlined, { "spin": true }, null) : slotProps.copy,
357
+ icon: copyLoading.value ? createVNode(GIcon, {
358
+ "type": "Spinning",
359
+ "spin": true
360
+ }, null) : slotProps.copy,
355
361
  onClick: onCopy,
356
362
  type: "copy",
357
363
  disabled: computed(() => copyLoading.value)
358
364
  },
359
365
  {
360
- icon: downloadLoading.value ? createVNode(LoadingOutlined, { "spin": true }, null) : slotProps.download,
366
+ icon: downloadLoading.value ? createVNode(GIcon, {
367
+ "type": "Spinning",
368
+ "spin": true
369
+ }, null) : slotProps.download,
361
370
  onClick: onDownload,
362
371
  type: "download",
363
372
  disabled: computed(() => downloadLoading.value)
@@ -429,7 +438,7 @@ const GImagePreview = /* @__PURE__ */ defineComponent((props, { emit, slots, exp
429
438
  "type": "button",
430
439
  "class": `${prefixCls.value}-close`,
431
440
  "onClick": onClose
432
- }, [closeIcon || createVNode(CloseOutlined, null, null)]),
441
+ }, [closeIcon || createVNode(GIcon, { "type": "CloseOutlined" }, null)]),
433
442
  showSwitchButtons.value && createVNode(Fragment, null, [createVNode("button", {
434
443
  "type": "button",
435
444
  "class": classNames(`${prefixCls.value}-switch`, `${prefixCls.value}-switch-prev`, { [`${prefixCls.value}-switch-disabled`]: !props.infinite && currentIndex.value === 0 }),
@@ -438,7 +447,7 @@ const GImagePreview = /* @__PURE__ */ defineComponent((props, { emit, slots, exp
438
447
  event.stopPropagation();
439
448
  onSwitchPrevious();
440
449
  }
441
- }, [leftIcon || createVNode(LeftOutlined, null, null)]), createVNode("button", {
450
+ }, [leftIcon || createVNode(GIcon, { "type": "LeftOutlined" }, null)]), createVNode("button", {
442
451
  "type": "button",
443
452
  "class": classNames(`${prefixCls.value}-switch`, `${prefixCls.value}-switch-next`, { [`${prefixCls.value}-switch-disabled`]: !props.infinite && currentIndex.value === props.urls.length - 1 }),
444
453
  "onClick": (event) => {
@@ -446,7 +455,7 @@ const GImagePreview = /* @__PURE__ */ defineComponent((props, { emit, slots, exp
446
455
  event.stopPropagation();
447
456
  onSwitchNext();
448
457
  }
449
- }, [rightIcon || createVNode(RightOutlined, null, null)])]),
458
+ }, [rightIcon || createVNode(GIcon, { "type": "RightOutlined" }, null)])]),
450
459
  createVNode("div", { "class": `${prefixCls.value}-footer` }, [showProgress.value && createVNode("div", { "class": `${prefixCls.value}-progress` }, [props.countRender ? props.countRender(currentIndex.value + 1, props.urls.length) : `${currentIndex.value + 1} / ${props.urls.length}`]), createVNode("div", { "class": `${prefixCls.value}-actions` }, [toolbarActions.map(({ icon, onClick, type, disabled }) => createVNode("button", {
451
460
  "type": "button",
452
461
  "class": classNames(actionClassName, `${actionClassName}-${type}`, { [`${actionClassName}-disabled`]: disabled && disabled.value }),