tdesign-vue-next
Version:
TDesign Component for vue-next
175 lines (171 loc) • 6.1 kB
JavaScript
/**
* tdesign v1.11.5
* (c) 2025 tdesign
* @license MIT
*/
import { defineComponent, computed, createVNode } from 'vue';
import { MirrorIcon, RotationIcon, ZoomOutIcon, ZoomInIcon, ImageIcon, DownloadIcon } from 'tdesign-icons-vue-next';
import TImageViewerIcon from './ImageModalIcon.mjs';
import { Tooltip } from '../../tooltip/index.mjs';
import { usePrefixClass } from '../../hooks/useConfig.mjs';
import '../../hooks/index.mjs';
import { l as largeNumberToFixed } from '../../_chunks/dep-aa6dbb70.mjs';
import { useImagePreviewUrl } from '../../hooks/useImagePreviewUrl.mjs';
import { useConfig } from '../../config-provider/hooks/useConfig.mjs';
import '../../_chunks/dep-da95471f.mjs';
import '../../_chunks/dep-4ed7019e.mjs';
import '../../_chunks/dep-46ec3e86.mjs';
import 'lodash-es';
import '../../utils/render-tnode.mjs';
import '../../config-provider/utils/context.mjs';
import '../../_chunks/dep-a5ae2f3f.mjs';
import '../../_chunks/dep-82d2a14f.mjs';
import '../../_chunks/dep-37fa6ccb.mjs';
import '../../_chunks/dep-7fb24b17.mjs';
import '../../tooltip/tooltip.mjs';
import '../../_chunks/dep-6d9c1bfc.mjs';
import '../../_chunks/dep-9f375e51.mjs';
import '../../tooltip/props.mjs';
import '../../popup/props.mjs';
import '../../popup/index.mjs';
import '../../popup/popup.mjs';
import '@popperjs/core';
import '../../hooks/useVModel.mjs';
import '../../utils/dom.mjs';
import '../../_chunks/dep-6cfc5734.mjs';
import '../../popup/container.mjs';
import '../../_chunks/dep-03e058e5.mjs';
import '../../hooks/useResizeObserver.mjs';
import '../../hooks/icon.mjs';
import '../../hooks/slot.mjs';
import '../../hooks/useCommonClassName.mjs';
import '../../hooks/useDefaultValue.mjs';
import '../../hooks/useDestroyOnClose.mjs';
import '../../hooks/useKeepAnimation.mjs';
import '../../hooks/useRipple.mjs';
import '../../hooks/useVirtualScroll.mjs';
import '../../_chunks/dep-dda40c90.mjs';
import '../../_chunks/dep-88187fb2.mjs';
import '../../utils/withInstall.mjs';
import './style/css.mjs';
import '../../tooltip/utils/index.mjs';
var TImageViewerUtils = defineComponent({
name: "TImageViewerUtils",
props: {
scale: Number,
onRotate: Function,
onZoomIn: Function,
onZoomOut: Function,
onMirror: Function,
onReset: Function,
onDownload: Function,
currentImage: {
type: Object,
"default": function _default() {
return {};
}
}
},
setup: function setup(props) {
var classPrefix = usePrefixClass();
var imageUrl = computed(function () {
return props.currentImage.mainImage;
});
var _useImagePreviewUrl = useImagePreviewUrl(imageUrl),
previewUrl = _useImagePreviewUrl.previewUrl;
var _useConfig = useConfig("imageViewer"),
globalConfig = _useConfig.globalConfig;
return function () {
return createVNode("div", {
"class": "".concat(classPrefix.value, "-image-viewer__utils")
}, [createVNode("div", {
"class": "".concat(classPrefix.value, "-image-viewer__utils-content")
}, [createVNode(Tooltip, {
"overlayClassName": "".concat(classPrefix.value, "-image-viewer__utils--tip"),
"content": globalConfig.value.mirrorTipText,
"destroyOnClose": true,
"placement": "top",
"showArrow": true,
"theme": "default"
}, {
"default": function _default() {
return [createVNode(TImageViewerIcon, {
"onClick": props.onMirror,
"icon": function icon() {
return createVNode(MirrorIcon, {
"size": "medium"
}, null);
}
}, null)];
}
}), createVNode(Tooltip, {
"overlayClassName": "".concat(classPrefix.value, "-image-viewer__utils--tip"),
"content": globalConfig.value.rotateTipText,
"destroyOnClose": true,
"placement": "top",
"showArrow": true,
"theme": "default"
}, {
"default": function _default() {
return [createVNode(TImageViewerIcon, {
"onClick": props.onRotate,
"icon": function icon() {
return createVNode(RotationIcon, {
"size": "medium"
}, null);
}
}, null)];
}
}), createVNode(TImageViewerIcon, {
"icon": function icon() {
return createVNode(ZoomOutIcon, {
"size": "medium"
}, null);
},
"onClick": props.onZoomOut
}, null), createVNode(TImageViewerIcon, {
"class": "".concat(classPrefix.value, "-image-viewer__utils-scale"),
"size": "medium",
"label": "".concat(largeNumberToFixed(String(props.scale * 100)), "%")
}, null), createVNode(TImageViewerIcon, {
"icon": function icon() {
return createVNode(ZoomInIcon, {
"size": "medium"
}, null);
},
"onClick": props.onZoomIn
}, null), createVNode(Tooltip, {
"overlayClassName": "".concat(classPrefix.value, "-image-viewer__utils--tip"),
"content": globalConfig.value.originalSizeTipText,
"destroyOnClose": true,
"placement": "top",
"showArrow": true,
"theme": "default"
}, {
"default": function _default() {
return [createVNode("div", {
"class": "".concat(classPrefix.value, "-image-viewer__modal-icon")
}, [createVNode(TImageViewerIcon, {
"icon": function icon() {
return createVNode(ImageIcon, {
"size": "medium"
}, null);
},
"onClick": props.onReset
}, null)])];
}
}), props.currentImage.download && createVNode(TImageViewerIcon, {
"icon": function icon() {
return createVNode(DownloadIcon, {
"size": "medium"
}, null);
},
"onClick": function onClick() {
props.onDownload(previewUrl.value);
}
}, null)])]);
};
}
});
export { TImageViewerUtils as default };
//# sourceMappingURL=ImageViewerUtils.mjs.map