@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 +6 -8
- package/dist/ImagePreview.js +23 -14
- package/dist/g-image.esm.js +352 -533
- package/dist/g-image.js +1 -1
- package/package.json +6 -6
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 {
|
|
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(
|
|
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
|
-
|
|
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
|
-
|
|
282
|
+
Object,
|
|
283
|
+
Boolean
|
|
286
284
|
],
|
|
287
285
|
required: false,
|
|
288
286
|
default: void 0
|
package/dist/ImagePreview.js
CHANGED
|
@@ -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 {
|
|
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(
|
|
17
|
-
rotateRight: createVNode(
|
|
18
|
-
zoomIn: createVNode(
|
|
19
|
-
zoomOut: createVNode(
|
|
20
|
-
flipX: createVNode(
|
|
21
|
-
flipY: createVNode(
|
|
22
|
-
|
|
23
|
-
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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 }),
|