xdesign-vue-next/es/image-viewer/base/ImageItem.mjs

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import { _ as __unplugin_components_0 } from '../../_chunks/dep-5b2c02e7.mjs';
import { defineComponent, toRefs, ref, computed, watch, createVNode } from 'vue';
import { usePrefixClass } from '../../hooks/useConfig.mjs';
import { useDrag } from '../hooks.mjs';
import { useImagePreviewUrl } from '../../hooks/useImagePreviewUrl.mjs';
import { useConfig } from '../../config-provider/useConfig.mjs';
import '../../_chunks/dep-1cc1c24f.mjs';
import '../../_chunks/dep-10a947a6.mjs';
import '../../_chunks/dep-b75d8d74.mjs';
import '../../_chunks/dep-82805301.mjs';
import '../../_chunks/dep-6ad18815.mjs';
import '../../_chunks/dep-91ac8f71.mjs';
import '../../_chunks/dep-c4737535.mjs';
import '../../_chunks/dep-81c83986.mjs';
import '../../_chunks/dep-6aa0223b.mjs';
import '../../_chunks/dep-db381ece.mjs';
import '../../_chunks/dep-5755c21c.mjs';
import '../../_chunks/dep-7f239c43.mjs';
import '../../_chunks/dep-6f04869e.mjs';
import '../../_chunks/dep-d32fbbb3.mjs';
import '../../_chunks/dep-dafada74.mjs';
import '../../_chunks/dep-addc2a84.mjs';
import '../../_chunks/dep-a95026f2.mjs';
import '../../_chunks/dep-068e912d.mjs';
import '../../_chunks/dep-6e7b37b8.mjs';
import '../../_chunks/dep-e1ab85c5.mjs';
import '../../_chunks/dep-5f0e0453.mjs';
import '../../_chunks/dep-71f84cf2.mjs';
import '../../_chunks/dep-0e832fc7.mjs';
import '../../_chunks/dep-69963a8c.mjs';
import '../../_chunks/dep-8d1c9a23.mjs';
import '../../_chunks/dep-03412fab.mjs';
import '../../_chunks/dep-205ff58d.mjs';
import '../../_chunks/dep-11fa9c2c.mjs';
import '../../_chunks/dep-b09f48fa.mjs';
import '../../_chunks/dep-26bf361a.mjs';
import '../../_chunks/dep-3ec3335a.mjs';
import '../../_chunks/dep-ed4e7c50.mjs';
import '../../_chunks/dep-a666b9ad.mjs';
import '../../_common/js/global-config/default-config.mjs';
import '../../_common/js/global-config/locale/en_US.mjs';
import '../../config-provider/type.mjs';
import '../../_chunks/dep-f9e836af.mjs';
import '../../_chunks/dep-32d4c595.mjs';
import '../../_chunks/dep-89b966f4.mjs';
import '../../_common/js/upload/utils.mjs';
import '../../_common/js/log/log.mjs';

var TImageItem = defineComponent({
  name: "XImageItem",
  props: {
    rotate: Number,
    scale: Number,
    mirror: Number,
    src: [String, Object],
    placementSrc: [String, Object]
  },
  setup: function setup(props) {
    var _globalConfig$value$e;
    var _toRefs = toRefs(props),
      src = _toRefs.src,
      placementSrc = _toRefs.placementSrc;
    var classPrefix = usePrefixClass();
    var error = ref(false);
    var loaded = ref(false);
    var _useDrag = useDrag({
        translateX: 0,
        translateY: 0
      }),
      transform = _useDrag.transform,
      mouseDownHandler = _useDrag.mouseDownHandler;
    var _useConfig = useConfig("imageViewer"),
      globalConfig = _useConfig.globalConfig;
    var errorText = (_globalConfig$value$e = globalConfig.value.errorText) !== null && _globalConfig$value$e !== void 0 ? _globalConfig$value$e : "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\uFF0C\u53EF\u5C1D\u8BD5\u91CD\u65B0\u52A0\u8F7D";
    var imgStyle = computed(function () {
      return {
        transform: "rotate(".concat(props.rotate, "deg) scale(").concat(props.scale, ")"),
        display: !props.placementSrc || loaded.value ? "block" : "none"
      };
    });
    var placementImgStyle = computed(function () {
      return {
        transform: "rotate(".concat(props.rotate, "deg) scale(").concat(props.scale, ")"),
        display: !loaded.value ? "block" : "none"
      };
    });
    var boxStyle = computed(function () {
      var _transform$value = transform.value,
        translateX = _transform$value.translateX,
        translateY = _transform$value.translateY;
      return {
        transform: "translate(".concat(translateX, "px, ").concat(translateY, "px) scale(").concat(props.mirror, ", 1)")
      };
    });
    var resetStatus = function resetStatus() {
      error.value = false;
      loaded.value = false;
    };
    watch(function () {
      return props.src;
    }, function () {
      resetStatus();
    });
    var _useImagePreviewUrl = useImagePreviewUrl(src),
      mainImagePreviewUrl = _useImagePreviewUrl.previewUrl;
    var _useImagePreviewUrl2 = useImagePreviewUrl(placementSrc),
      placementImagePreviewUrl = _useImagePreviewUrl2.previewUrl;
    return function () {
      return createVNode("div", {
        "class": "".concat(classPrefix.value, "-image-viewer__modal-pic")
      }, [createVNode("div", {
        "class": "".concat(classPrefix.value, "-image-viewer__modal-box"),
        "style": boxStyle.value
      }, [error.value && createVNode("div", {
        "class": "".concat(classPrefix.value, "-image-viewer__img-error")
      }, [createVNode("div", {
        "class": "".concat(classPrefix.value, "-image-viewer__img-error-content")
      }, [createVNode(__unplugin_components_0, {
        "size": "4em"
      }, null), createVNode("div", {
        "class": "".concat(classPrefix.value, "-image-viewer__img-error-text")
      }, [errorText])])]), !error.value && !!props.placementSrc && placementImagePreviewUrl.value && createVNode("img", {
        "class": "".concat(classPrefix.value, "-image-viewer__modal-image"),
        "onMousedown": function onMousedown(event) {
          event.stopPropagation();
          mouseDownHandler(event);
        },
        "src": placementImagePreviewUrl.value,
        "style": placementImgStyle.value,
        "alt": "image",
        "draggable": "false"
      }, null), !error.value && mainImagePreviewUrl.value && createVNode("img", {
        "class": "".concat(classPrefix.value, "-image-viewer__modal-image"),
        "onMousedown": function onMousedown(event) {
          event.stopPropagation();
          mouseDownHandler(event);
        },
        "src": mainImagePreviewUrl.value,
        "onLoad": function onLoad() {
          return loaded.value = true;
        },
        "onError": function onError() {
          return error.value = true;
        },
        "style": imgStyle.value,
        "alt": "image",
        "draggable": "false"
      }, null)])]);
    };
  }
});

export { TImageItem as default };
//# sourceMappingURL=ImageItem.mjs.map