xdesign-vue-next/lib/image-viewer/base/ImageViewerUtils.js

XDesign Component for vue-next

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

import { openBlock, createElementBlock, createElementVNode, defineComponent, computed, createVNode } from 'vue';
import { _ as __unplugin_components_4 } from '../../_chunks/dep-bd86e885.js';
import TImageViewerIcon from './ImageModalIcon.js';
import { Tooltip } from '../../tooltip/index.js';
import { usePrefixClass } from '../../hooks/useConfig.js';
import { downloadFile } from '../utils.js';
import { useImagePreviewUrl } from '../../hooks/useImagePreviewUrl.js';
import { useConfig } from '../../config-provider/useConfig.js';
import '@babel/runtime/helpers/defineProperty';
import '../../hooks/tnode.js';
import 'lodash/isFunction';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../utils/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isString';
import 'lodash/isObject';
import 'lodash/cloneDeep';
import '../../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../../_common/js/global-config/default-config.js';
import '../../_common/js/global-config/locale/en_US.js';
import '../../_chunks/dep-3a1cce9f.js';
import 'lodash/isArray';
import '../../tooltip/tooltip.js';
import '@babel/runtime/helpers/slicedToArray';
import 'lodash/omit';
import '../../tooltip/props.js';
import '../../popup/props.js';
import '../../popup/index.js';
import '../../popup/popup.js';
import '@popperjs/core';
import 'lodash/debounce';
import '../../hooks/useVModel.js';
import '../../utils/dom.js';
import '../../utils/easing.js';
import '../../_common/js/utils/set-style.js';
import '../../popup/container.js';
import '@babel/runtime/helpers/toConsumableArray';
import '../../hooks/useResizeObserver.js';
import '../../utils/withInstall.js';
import '../../tooltip/util.js';
import '../../_common/js/upload/utils.js';
import '../../_common/js/log/log.js';

const _hoisted_1$4 = {
  class: "x-icon",
  viewBox: "0 0 24 24",
  width: "1.1em",
  height: "1.1em"
};
const _hoisted_2$4 = /*#__PURE__*/createElementVNode("path", {
  fill: "currentColor",
  d: "M13 10h5l-6 6l-6-6h5V3h2v7Zm-9 9h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7Z"
}, null, -1 /* HOISTED */);
const _hoisted_3$4 = [
  _hoisted_2$4
];

function render$4(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_3$4))
}

var __unplugin_components_5 = { name: 'ri-download2-line', render: render$4 };
/* vite-plugin-components disabled */

const _hoisted_1$3 = {
  class: "x-icon",
  viewBox: "0 0 24 24",
  width: "1.1em",
  height: "1.1em"
};
const _hoisted_2$3 = /*#__PURE__*/createElementVNode("path", {
  fill: "currentColor",
  d: "m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617Zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15ZM10 10V7h2v3h3v2h-3v3h-2v-3H7v-2h3Z"
}, null, -1 /* HOISTED */);
const _hoisted_3$3 = [
  _hoisted_2$3
];

function render$3(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$3))
}

var __unplugin_components_3 = { name: 'ri-zoom-in-line', render: render$3 };
/* vite-plugin-components disabled */

const _hoisted_1$2 = {
  class: "x-icon",
  viewBox: "0 0 24 24",
  width: "1.1em",
  height: "1.1em"
};
const _hoisted_2$2 = /*#__PURE__*/createElementVNode("path", {
  fill: "currentColor",
  d: "m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617Zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15ZM7 10h8v2H7v-2Z"
}, null, -1 /* HOISTED */);
const _hoisted_3$2 = [
  _hoisted_2$2
];

function render$2(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$2))
}

var __unplugin_components_2 = { name: 'ri-zoom-out-line', render: render$2 };
/* vite-plugin-components disabled */

const _hoisted_1$1 = {
  class: "x-icon",
  viewBox: "0 0 24 24",
  width: "1.1em",
  height: "1.1em"
};
const _hoisted_2$1 = /*#__PURE__*/createElementVNode("path", {
  fill: "currentColor",
  d: "m20 10.586l1.828-1.829l1.415 1.415L19 14.414l-4.243-4.242l1.415-1.415L18 10.586V8a3 3 0 0 0-3-3h-4V3h4a5 5 0 0 1 5 5v2.586ZM13 9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h10Zm-1 2H4v8h8v-8Z"
}, null, -1 /* HOISTED */);
const _hoisted_3$1 = [
  _hoisted_2$1
];

function render$1(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3$1))
}

var __unplugin_components_1 = { name: 'ri-clockwise-line', render: render$1 };
/* vite-plugin-components disabled */

const _hoisted_1 = {
  class: "x-icon",
  viewBox: "0 0 24 24",
  width: "1.1em",
  height: "1.1em"
};
const _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
  fill: "currentColor",
  d: "M16.05 12.05L21 17l-4.95 4.95l-1.414-1.415L17.172 18H4v-2h13.172l-2.536-2.535l1.414-1.414Zm-8.1-10l1.414 1.414l-2.536 2.535H20v2H6.828l2.536 2.536L7.95 11.95L3 7l4.95-4.95Z"
}, null, -1 /* HOISTED */);
const _hoisted_3 = [
  _hoisted_2
];

function render(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3))
}

var __unplugin_components_0 = { name: 'ri-arrow-left-right-line', render };
/* vite-plugin-components disabled */

var TImageViewerUtils = defineComponent({
  name: "XImageViewerUtils",
  props: {
    scale: Number,
    onRotate: Function,
    onZoomIn: Function,
    onZoomOut: Function,
    onMirror: Function,
    onReset: 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 () {
      var _globalConfig$value$m, _globalConfig$value$r, _globalConfig$value$o;
      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$m = globalConfig.value.mirrorTipText) !== null && _globalConfig$value$m !== void 0 ? _globalConfig$value$m : "\u955C\u50CF",
        "destroyOnClose": true,
        "placement": "top",
        "showArrow": true,
        "theme": "default"
      }, {
        "default": function _default() {
          return [createVNode(TImageViewerIcon, {
            "onClick": props.onMirror,
            "icon": function icon() {
              return createVNode(__unplugin_components_0, {
                "size": "medium"
              }, null);
            }
          }, null)];
        }
      }), createVNode(Tooltip, {
        "overlayClassName": "".concat(classPrefix.value, "-image-viewer__utils--tip"),
        "content": (_globalConfig$value$r = globalConfig.value.rotateTipText) !== null && _globalConfig$value$r !== void 0 ? _globalConfig$value$r : "\u65CB\u8F6C",
        "destroyOnClose": true,
        "placement": "top",
        "showArrow": true,
        "theme": "default"
      }, {
        "default": function _default() {
          return [createVNode(TImageViewerIcon, {
            "onClick": props.onRotate,
            "icon": function icon() {
              return createVNode(__unplugin_components_1, {
                "size": "medium"
              }, null);
            }
          }, null)];
        }
      }), createVNode(TImageViewerIcon, {
        "icon": function icon() {
          return createVNode(__unplugin_components_2, {
            "size": "medium"
          }, null);
        },
        "onClick": props.onZoomOut
      }, null), createVNode(TImageViewerIcon, {
        "class": "".concat(classPrefix.value, "-image-viewer__utils-scale"),
        "size": "medium",
        "label": "".concat(props.scale * 100, "%")
      }, null), createVNode(TImageViewerIcon, {
        "icon": function icon() {
          return createVNode(__unplugin_components_3, {
            "size": "medium"
          }, null);
        },
        "onClick": props.onZoomIn
      }, null), createVNode(Tooltip, {
        "overlayClassName": "".concat(classPrefix.value, "-image-viewer__utils--tip"),
        "content": (_globalConfig$value$o = globalConfig.value.originalSizeTipText) !== null && _globalConfig$value$o !== void 0 ? _globalConfig$value$o : "\u539F\u59CB\u5927\u5C0F",
        "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(__unplugin_components_4, {
                "size": "medium"
              }, null);
            },
            "onClick": props.onReset
          }, null)])];
        }
      }), props.currentImage.download && createVNode(TImageViewerIcon, {
        "icon": function icon() {
          return createVNode(__unplugin_components_5, {
            "size": "medium"
          }, null);
        },
        "onClick": function onClick() {
          downloadFile(previewUrl.value);
        }
      }, null)])]);
    };
  }
});

export { TImageViewerUtils as default };
//# sourceMappingURL=ImageViewerUtils.js.map