winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
283 lines (282 loc) • 7.99 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var vue = require("vue");
var useMergeState = require("../_hooks/use-merge-state.js");
var globalConfig = require("../_utils/global-config.js");
var previewArrow = require("./preview-arrow.js");
var previewToolbar = require("./preview-toolbar.js");
var useImageLoadStatus = require("./hooks/use-image-load-status.js");
var useImageDrag = require("./hooks/use-image-drag.js");
var index = require("../icon/icon-loading/index.js");
var index$1 = require("../icon/icon-close/index.js");
var index$7 = require("../icon/icon-zoom-out/index.js");
var index$6 = require("../icon/icon-zoom-in/index.js");
var index$3 = require("../icon/icon-fullscreen/index.js");
var index$5 = require("../icon/icon-rotate-left/index.js");
var index$4 = require("../icon/icon-rotate-right/index.js");
var index$8 = require("../icon/icon-original-size/index.js");
var usePopupOverflowHidden = require("../_hooks/use-popup-overflow-hidden.js");
var usePopupContainer = require("../_hooks/use-popup-container.js");
var getScale = require("./utils/get-scale.js");
var index$2 = require("../locale/index.js");
var usePopupManager = require("../_hooks/use-popup-manager.js");
const ROTATE_STEP = 90;
var _sfc_main = vue.defineComponent({
name: "ImagePreview",
components: {
PreviewArrow: previewArrow,
PreviewToolbar: previewToolbar,
IconLoading: index,
IconClose: index$1
},
props: {
renderToBody: {
type: Boolean,
default: true
},
src: {
type: String
},
visible: {
type: Boolean,
default: void 0
},
defaultVisible: {
type: Boolean,
default: false
},
maskClosable: {
type: Boolean,
default: true
},
closable: {
type: Boolean,
default: true
},
actionsLayout: {
type: Array,
default: () => [
"zoomOut",
"zoomIn",
"fullScreen",
"rotateRight",
"rotateLeft"
]
},
popupContainer: {
type: [Object, String]
},
inGroup: {
type: Boolean,
default: false
},
groupArrowProps: {
type: Object,
default: () => ({})
}
},
emits: [
"close",
"update:visible"
],
setup(props, {
emit
}) {
const {
t
} = index$2.useI18n();
const {
src,
popupContainer,
visible,
defaultVisible,
maskClosable
} = vue.toRefs(props);
const refWrapper = vue.ref();
const refImage = vue.ref();
const prefixCls = globalConfig.getPrefixCls("image-preview");
const [mergedVisible, setVisible] = useMergeState(defaultVisible.value, vue.reactive({
value: visible
}));
const classNames = vue.computed(() => [prefixCls, {
[`${prefixCls}-hide`]: !mergedVisible.value
}]);
const container = usePopupContainer(document.body, vue.reactive({
popupContainer
}));
const isFixed = vue.computed(() => container.value === document.body);
const {
zIndex
} = usePopupManager("dialog", {
visible: mergedVisible
});
const wrapperStyles = vue.computed(() => {
const positionStyles = isFixed.value ? {
zIndex: zIndex.value,
position: "fixed"
} : {
zIndex: "inherit",
position: "absolute"
};
return __spreadValues({}, positionStyles);
});
const {
isLoading,
isLoaded,
setLoadStatus
} = useImageLoadStatus();
const rotate = vue.ref(0);
const scale = vue.ref(1);
const {
translate,
moving,
resetTranslate
} = useImageDrag(vue.reactive({
wrapperEl: refWrapper,
imageEl: refImage,
visible: mergedVisible,
scale
}));
const scaleValueVisible = vue.ref(false);
let hideScaleTimer = null;
const showScaleValue = () => {
!scaleValueVisible.value && (scaleValueVisible.value = true);
hideScaleTimer && clearTimeout(hideScaleTimer);
hideScaleTimer = setTimeout(() => {
scaleValueVisible.value = false;
}, 1e3);
};
usePopupOverflowHidden(vue.reactive({
container,
hidden: mergedVisible
}));
function reset() {
rotate.value = 0;
scale.value = 1;
resetTranslate();
}
vue.watch([src, mergedVisible], () => {
if (mergedVisible.value) {
reset();
setLoadStatus("loading");
}
});
function close() {
if (mergedVisible.value) {
emit("close");
emit("update:visible", false);
setVisible(false);
}
}
function onMaskClick(e) {
if (maskClosable.value && e.target === e.currentTarget) {
close();
}
}
function changeScale(newScale) {
if (scale.value !== newScale) {
scale.value = newScale;
showScaleValue();
}
}
return {
prefixCls,
classNames,
container,
wrapperStyles,
scale,
translate,
rotate,
moving,
mergedVisible,
isLoading,
isLoaded,
scaleValueVisible,
refWrapper,
refImage,
onMaskClick,
onCloseClick: close,
onImgLoad() {
setLoadStatus("loaded");
},
onImgError() {
setLoadStatus("error");
},
actions: vue.computed(() => [
{
key: "fullScreen",
name: t("imagePreview.fullScreen"),
content: () => vue.h(index$3),
onClick: () => {
const wrapperRect = refWrapper.value.getBoundingClientRect();
const imgRect = refImage.value.getBoundingClientRect();
const newHeightScale = wrapperRect.height / (imgRect.height / scale.value);
const newWidthScale = wrapperRect.width / (imgRect.width / scale.value);
const newScale = Math.max(newHeightScale, newWidthScale);
changeScale(newScale);
}
},
{
key: "rotateRight",
name: t("imagePreview.rotateRight"),
content: () => vue.h(index$4),
onClick: () => {
rotate.value = rotate.value === 0 ? 360 - ROTATE_STEP : rotate.value - ROTATE_STEP;
}
},
{
key: "rotateLeft",
name: t("imagePreview.rotateLeft"),
content: () => vue.h(index$5),
onClick: () => {
rotate.value = (rotate.value + ROTATE_STEP) % 360;
}
},
{
key: "zoomIn",
name: t("imagePreview.zoomIn"),
content: () => vue.h(index$6),
onClick: () => {
const newScale = getScale["default"](scale.value, "zoomIn");
changeScale(newScale);
},
disabled: scale.value === getScale.maxScale
},
{
key: "zoomOut",
name: t("imagePreview.zoomOut"),
content: () => vue.h(index$7),
onClick: () => {
const newScale = getScale["default"](scale.value, "zoomOut");
changeScale(newScale);
},
disabled: scale.value === getScale.minScale
},
{
key: "originalSize",
name: t("imagePreview.originalSize"),
content: () => vue.h(index$8),
onClick: () => {
changeScale(1);
}
}
])
};
}
});
module.exports = _sfc_main;