yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
294 lines (293 loc) • 9.97 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const core = require("../utils/core");
const hook = require("../utils/hook");
const containerClass = "ele-dialog-container";
const wrapperClass = "ele-dialog";
const closedClass = "ele-dialog-closed";
const fixTop = 0.65;
const fixLeft = 0.65;
function getDialogEl(dialogRef) {
var _a, _b;
const el = (_b = vue.unref((_a = vue.unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
return el;
}
function initDialogStyle(dialogEl) {
dialogEl.style.top = dialogEl.offsetTop + "px";
dialogEl.style.left = dialogEl.offsetLeft + "px";
dialogEl.style.right = "auto";
dialogEl.style.bottom = "auto";
dialogEl.style.position = "absolute";
dialogEl.style.margin = "0";
}
function canMoveOut(moveOut, direction) {
if (direction && moveOut != null && Array.isArray(moveOut)) {
return moveOut.includes(direction);
}
return false;
}
function getDialogContainer(inner, multiple, appendTo, dialogsEl) {
if (multiple) {
const parent = (inner ? dialogsEl : void 0) || document.body;
const wrapper = core.queryChild(parent, containerClass);
if (wrapper) {
return wrapper;
}
const elem = document.createElement("div");
elem.classList.add(containerClass);
parent.appendChild(elem);
return elem;
}
if (inner && dialogsEl) {
return dialogsEl;
}
return appendTo || "body";
}
function useDialogMove(dialogRef, props, isFullscreen) {
let dialogEl = null;
let wrapEl = null;
let downOL = null;
let downOT = null;
const { handleMousedown, handleTouchstart } = hook.useMoveEvent({
start: () => {
dialogEl = getDialogEl(dialogRef);
wrapEl = dialogEl == null ? void 0 : dialogEl.parentElement;
if (!dialogEl || !wrapEl || !props.draggable || isFullscreen.value) {
return;
}
dialogEl.style.userSelect = "none";
initDialogStyle(dialogEl);
downOL = dialogEl.offsetLeft;
downOT = dialogEl.offsetTop;
},
move: ({ distanceX, distanceY, e }) => {
if (!dialogEl || !wrapEl || downOL == null || downOT == null || distanceX == null || distanceY == null) {
return;
}
e.preventDefault();
let positionLeft = distanceX + downOL;
let positionTop = distanceY + downOT;
const limitL = wrapEl.clientWidth - dialogEl.clientWidth - fixLeft;
const limitT = wrapEl.clientHeight - dialogEl.clientHeight - fixTop;
if (!props.moveOut) {
if (positionLeft < 0) {
positionLeft = 0;
} else if (positionLeft > limitL) {
positionLeft = limitL;
}
if (positionTop > limitT) {
positionTop = limitT;
}
if (positionTop < 0) {
positionTop = 0;
}
} else {
if (!canMoveOut(props.moveOut, "left") && positionLeft < 0) {
positionLeft = 0;
}
if (!canMoveOut(props.moveOut, "right") && positionLeft > limitL) {
positionLeft = limitL;
}
if (!canMoveOut(props.moveOut, "bottom") && positionTop > limitT) {
positionTop = limitT;
}
if (!canMoveOut(props.moveOut, "top") && positionTop < 0) {
positionTop = 0;
}
const minLimitL = wrapEl.clientWidth - 48;
if (positionLeft > minLimitL) {
positionLeft = minLimitL;
}
const minLimitT = wrapEl.clientHeight - 48;
if (props.multiple && positionTop > minLimitT) {
positionTop = minLimitT;
}
}
dialogEl.style.left = `${Math.floor(positionLeft)}px`;
dialogEl.style.top = `${Math.floor(positionTop)}px`;
},
end: () => {
if (dialogEl) {
dialogEl.style.userSelect = "";
}
downOL = null;
downOT = null;
dialogEl = null;
wrapEl = null;
},
touchmoveOptions: { passive: false }
});
return {
handleHeaderMousedown: handleMousedown,
handleHeaderTouchstart: handleTouchstart
};
}
function useDialogResize(dialogRef, props, isFullscreen) {
let dialogEl = null;
let wrapEl = null;
let downW = null;
let downH = null;
const { handleMousedown, handleTouchstart } = hook.useMoveEvent({
start: () => {
dialogEl = getDialogEl(dialogRef);
wrapEl = dialogEl == null ? void 0 : dialogEl.parentElement;
if (!dialogEl || !wrapEl || !props.resizable || isFullscreen.value) {
return;
}
dialogEl.style.userSelect = "none";
initDialogStyle(dialogEl);
downW = dialogEl.clientWidth;
downH = dialogEl.clientHeight;
},
move: ({ distanceX, distanceY, e }) => {
if (!dialogEl || !wrapEl || downW == null || downH == null || distanceX == null || distanceY == null) {
return;
}
e.preventDefault();
if (props.resizable !== "vertical") {
const w = distanceX + downW;
const maxW = wrapEl.clientWidth - dialogEl.offsetLeft - fixLeft;
const nw = (w < props.minWidth ? props.minWidth : !canMoveOut(props.moveOut, "right") && w > maxW ? maxW : w) + "px";
dialogEl.style.width = nw;
dialogEl.style.maxWidth = nw;
dialogEl.style.minWidth = nw;
}
if (props.resizable !== "horizontal") {
const h = distanceY + downH;
const maxH = wrapEl.clientHeight - dialogEl.offsetTop - fixTop;
const nh = (h < props.minHeight ? props.minHeight : !canMoveOut(props.moveOut, "bottom") && h > maxH ? maxH : h) + "px";
dialogEl.style.height = nh;
dialogEl.style.maxHeight = nh;
dialogEl.style.minHeight = nh;
}
},
end: () => {
if (dialogEl) {
dialogEl.style.userSelect = "";
}
downW = null;
downH = null;
dialogEl = null;
wrapEl = null;
},
touchmoveOptions: { passive: false }
});
return {
handleResizeMousedown: handleMousedown,
handleResizeTouchstart: handleTouchstart
};
}
function useDialogEvent(dialogRef, props, isFullscreen) {
const { handleHeaderMousedown, handleHeaderTouchstart } = useDialogMove(dialogRef, props, isFullscreen);
const { handleResizeMousedown, handleResizeTouchstart } = useDialogResize(dialogRef, props, isFullscreen);
let isInitPosition = true;
const getZIndex = () => {
return props.zIndex ?? 2e3;
};
const topDialog = (el) => {
var _a;
const dialogEl = el ?? getDialogEl(dialogRef);
const overlayEl = (_a = dialogEl == null ? void 0 : dialogEl.parentElement) == null ? void 0 : _a.parentElement;
if (!overlayEl) {
return;
}
const currentIndex = core.getCurrentStyle(overlayEl).zIndex;
const containerEl = overlayEl.parentElement;
const cls = `.${wrapperClass}:not(.${closedClass})`;
const dialogs = containerEl ? containerEl.querySelectorAll(cls) : void 0;
let maxIndex = 0;
(dialogs ? Array.from(dialogs) : []).forEach((dialogEl2) => {
const zIndex = core.getCurrentStyle(dialogEl2).zIndex;
if (zIndex != null) {
const index = Number(zIndex);
if (index >= maxIndex && (!overlayEl || dialogEl2 !== overlayEl)) {
maxIndex = index + 1;
}
}
});
if (maxIndex > Number(currentIndex || getZIndex() || 0)) {
overlayEl.style.zIndex = String(maxIndex);
}
};
const mousedownListener = (event) => {
if (props.multiple) {
topDialog(event.currentTarget);
}
};
const bindAutoTopEvent = () => {
const dialogEl = getDialogEl(dialogRef);
if (dialogEl) {
dialogEl.addEventListener("mousedown", mousedownListener);
dialogEl.addEventListener("touchstart", mousedownListener);
}
};
const unbindAutoTopEvent = () => {
const dialogEl = getDialogEl(dialogRef);
if (dialogEl) {
dialogEl.removeEventListener("mousedown", mousedownListener);
dialogEl.removeEventListener("touchstart", mousedownListener);
}
};
const getPositionMargin = (position) => {
if (position == null || typeof position !== "object" || position.top == null && position.right == null && position.bottom == null && position.left == null) {
return;
}
return [position.top, position.right, position.bottom, position.left].map((p) => typeof p === "number" ? `${p}px` : p || "auto").join(" ");
};
const getPosition = () => {
if (props.alignCenter) {
return "center";
}
if (props.top != null && props.top !== "") {
return { top: props.top };
}
return props.position;
};
const setInitPosition = () => {
if (isInitPosition) {
isInitPosition = false;
const dialogEl = getDialogEl(dialogRef);
const margin = getPositionMargin(getPosition());
if (dialogEl && margin != null) {
dialogEl.style.margin = margin;
}
}
};
const resetDialogStyle = () => {
const dialogEl = getDialogEl(dialogRef);
if (dialogEl) {
const w = props.width;
dialogEl.style.margin = getPositionMargin(getPosition()) || "";
dialogEl.style.position = "";
dialogEl.style.top = "";
dialogEl.style.left = "";
dialogEl.style.right = "";
dialogEl.style.bottom = "";
dialogEl.style.height = "";
dialogEl.style.maxHeight = "";
dialogEl.style.minHeight = "";
dialogEl.style.width = typeof w === "number" ? `${w}px` : w ?? "";
dialogEl.style.maxWidth = "";
dialogEl.style.minWidth = "";
}
};
return {
handleHeaderMousedown,
handleHeaderTouchstart,
handleResizeMousedown,
handleResizeTouchstart,
bindAutoTopEvent,
unbindAutoTopEvent,
topDialog,
setInitPosition,
resetDialogStyle
};
}
exports.closedClass = closedClass;
exports.containerClass = containerClass;
exports.getDialogContainer = getDialogContainer;
exports.useDialogEvent = useDialogEvent;
exports.useDialogMove = useDialogMove;
exports.useDialogResize = useDialogResize;
exports.wrapperClass = wrapperClass;