xdesign-vue-next/cjs/image-viewer/base/ImageViewerModal.js

XDesign Component for vue-next

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var dialog_index = require('../../dialog/index.js');
var imageViewer_base_ImageItem = require('./ImageItem.js');
var imageViewer_base_ImageViewerUtils = require('./ImageViewerUtils.js');
var hooks_useConfig = require('../../hooks/useConfig.js');
var hooks_tnode = require('../../hooks/tnode.js');
var imageViewer_props = require('../props.js');
require('../../dialog/dialog.js');
require('../../_chunks/dep-ac484abb.js');
require('../../_chunks/dep-38e8405e.js');
require('../../_chunks/dep-0a0a2988.js');
require('../../_chunks/dep-0e9e4ce6.js');
require('@babel/runtime/helpers/defineProperty');
require('../../dialog/props.js');
require('../../dialog/hooks.js');
require('@babel/runtime/helpers/typeof');
require('lodash/isString');
require('lodash/isObject');
require('lodash/omit');
require('../../button/index.js');
require('../../button/button.js');
require('@babel/runtime/helpers/toConsumableArray');
require('../../loading/index.js');
require('../../loading/directive.js');
require('../../loading/plugin.js');
require('../../loading/loading.js');
require('@babel/runtime/helpers/slicedToArray');
require('../../loading/icon/gradient.js');
require('../../_common/js/loading/circle-adapter.js');
require('../../_common/js/utils/set-style.js');
require('../../_common/js/utils/helper.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/isNull');
require('lodash/isUndefined');
require('lodash/isNumber');
require('lodash/isArray');
require('../../utils/dom.js');
require('../../_chunks/dep-8d10b59f.js');
require('lodash/isFunction');
require('../../utils/easing.js');
require('../../utils/render-tnode.js');
require('lodash/isEmpty');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../../loading/props.js');
require('../../hooks/useTeleport.js');
require('../../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('../../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../../_common/js/global-config/default-config.js');
require('../../_common/js/global-config/locale/en_US.js');
require('../../utils/withInstall.js');
require('../../button/props.js');
require('../../hooks/useRipple.js');
require('../../hooks/useKeepAnimation.js');
require('../../utils/set-style.js');
require('../../hooks/useDisabled.js');
require('lodash/isBoolean');
require('../../hooks/useDestroyOnClose.js');
require('../../dialog/stack.js');
require('../../_common/js/utils/getScrollbarWidth.js');
require('../../dialog/plugin.js');
require('../../_chunks/dep-6085e357.js');
require('../hooks.js');
require('../../hooks/useImagePreviewUrl.js');
require('../../_common/js/upload/utils.js');
require('../../_common/js/log/log.js');
require('../../_chunks/dep-d2b45a10.js');
require('./ImageModalIcon.js');
require('../../tooltip/index.js');
require('../../tooltip/tooltip.js');
require('../../tooltip/props.js');
require('../../popup/props.js');
require('../../popup/index.js');
require('../../popup/popup.js');
require('@popperjs/core');
require('lodash/debounce');
require('../../hooks/useVModel.js');
require('../../popup/container.js');
require('../../hooks/useResizeObserver.js');
require('../../tooltip/util.js');
require('../utils.js');

var TImageViewerModal = vue.defineComponent({
  name: "XImageViewerModal",
  props: {
    zIndex: Number,
    visible: Boolean,
    index: Number,
    images: imageViewer_props["default"].images,
    scale: Number,
    rotate: Number,
    mirror: Number,
    title: imageViewer_props["default"].title,
    currentImage: {
      type: Object,
      "default": function _default() {
        return {};
      }
    },
    onRotate: Function,
    onZoomIn: Function,
    onZoomOut: Function,
    onMirror: Function,
    onReset: Function,
    onClose: imageViewer_props["default"].onClose,
    draggable: {
      type: Boolean,
      "default": true
    },
    viewerScale: {
      type: Object,
      "default": function _default() {
        return {};
      }
    },
    showOverlay: Boolean,
    closeBtn: imageViewer_props["default"].closeBtn
  },
  setup: function setup(props2) {
    var classPrefix = hooks_useConfig.usePrefixClass();
    var renderJSX = hooks_tnode.useTNodeJSX();
    var style = vue.computed(function () {
      return {
        minWidth: props2.viewerScale.minWidth,
        minHeight: props2.viewerScale.minHeight
      };
    });
    return function () {
      return vue.createVNode(dialog_index.Dialog, {
        "destroyOnClose": true,
        "attach": "body",
        "onClose": props2.onClose,
        "visible": props2.visible,
        "placement": "center",
        "mode": "modeless",
        "width": 1e3,
        "cancelBtn": null,
        "confirmBtn": null,
        "draggable": props2.draggable,
        "zIndex": props2.zIndex,
        "showOverlay": props2.showOverlay,
        "class": "".concat(classPrefix.value, "-image-viewer__dialog"),
        "header": renderJSX("title", ""),
        "footer": function footer() {
          return vue.createVNode("div", {
            "class": "".concat(classPrefix.value, "-image-viewer-mini__footer")
          }, [vue.createVNode(imageViewer_base_ImageViewerUtils["default"], {
            "onZoomIn": props2.onZoomIn,
            "onZoomOut": props2.onZoomOut,
            "scale": props2.scale,
            "currentImage": props2.currentImage,
            "onRotate": props2.onRotate,
            "onMirror": props2.onMirror,
            "onReset": props2.onReset
          }, null)]);
        }
      }, {
        "default": function _default() {
          return [vue.createVNode("div", {
            "class": "".concat(classPrefix.value, "-image-viewer-mini__content"),
            "style": style.value
          }, [vue.createVNode(imageViewer_base_ImageItem["default"], {
            "rotate": props2.rotate,
            "scale": props2.scale,
            "mirror": props2.mirror,
            "src": props2.currentImage.mainImage,
            "placementSrc": props2.currentImage.thumbnail
          }, null)])];
        }
      });
    };
  }
});

exports["default"] = TImageViewerModal;
//# sourceMappingURL=ImageViewerModal.js.map