tdesign-vue-next/es/image-viewer/base/ImageViewerUtils.mjs

TDesign Component for vue-next

/**
 * tdesign v1.19.2
 * (c) 2026 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 { u as usePrefixClass, r as useImagePreviewUrl } from '../../_chunks/dep-fbeb2963.mjs';
import { l as largeNumberToFixed } from '../../_chunks/dep-d7fc4cc3.mjs';
import { useConfig } from '../../config-provider/hooks/useConfig.mjs';
import '../../_chunks/dep-ba214d75.mjs';
import '../../_chunks/dep-e1c62679.mjs';
import 'lodash-es';
import '../../_chunks/dep-47c3cae9.mjs';
import '../../_chunks/dep-b0b422fe.mjs';
import '../../_chunks/dep-feed89df.mjs';
import '../../_chunks/dep-5b510fcd.mjs';
import '../../config-provider/utils/context.mjs';
import '../../_chunks/dep-e0ab6d55.mjs';
import '../../_chunks/dep-75f265c4.mjs';
import '../../_chunks/dep-67ffcfeb.mjs';
import '../../_chunks/dep-f558ebb8.mjs';
import '../../_chunks/dep-edab0e6a.mjs';
import '../../_chunks/dep-76dddedf.mjs';
import '../../_chunks/dep-d92220c4.mjs';
import '../../_chunks/dep-466a8f31.mjs';
import '../../_chunks/dep-e66c0337.mjs';
import '../../tooltip/tooltip.mjs';
import '../../tooltip/props.mjs';
import '../../popup/props.mjs';
import '../../popup/index.mjs';
import '../../popup/popup.mjs';
import '@popperjs/core';
import '../../popup/container.mjs';
import './style/css.mjs';
import '../../tooltip/utils/index.mjs';

var TImageViewerUtils = defineComponent({
  name: "TImageViewerUtils",
  props: {
    zIndex: Number,
    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",
        "zIndex": props.zIndex
      }, {
        "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",
        "zIndex": props.zIndex
      }, {
        "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"),
        "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",
        "zIndex": props.zIndex
      }, {
        "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