@gx-design-vue/image 0.2.0-alpha.4 → 0.2.0-alpha.6
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 +3 -3
- package/dist/ImagePreview.js +24 -15
- package/dist/g-image.esm.js +352 -528
- package/dist/g-image.js +1 -1
- package/dist/style/index.d.ts +1 -3
- package/dist/style/preview.d.ts +1 -3
- package/package.json +17 -9
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,
|
|
@@ -197,7 +197,7 @@ const Image = /* @__PURE__ */ defineComponent((props, { emit, slots, expose, att
|
|
|
197
197
|
]);
|
|
198
198
|
};
|
|
199
199
|
}, {
|
|
200
|
-
props:
|
|
200
|
+
props: /*@__PURE__*/ mergeDefaults({
|
|
201
201
|
rootClass: {
|
|
202
202
|
type: String,
|
|
203
203
|
required: false
|
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 }),
|
|
@@ -460,7 +469,7 @@ const GImagePreview = /* @__PURE__ */ defineComponent((props, { emit, slots, exp
|
|
|
460
469
|
])] })] });
|
|
461
470
|
};
|
|
462
471
|
}, {
|
|
463
|
-
props:
|
|
472
|
+
props: /*@__PURE__*/ mergeDefaults({
|
|
464
473
|
class: {
|
|
465
474
|
type: String,
|
|
466
475
|
required: false
|