249 lines
7.0 KiB
JavaScript
249 lines
7.0 KiB
JavaScript
import { getCurrentInstance, ref, computed, watch, nextTick, onMounted } from 'vue';
|
|
import { useTimeoutFn, isClient } from '@vueuse/core';
|
|
import { DEFAULT_DIALOG_TRANSITION } from './constants.mjs';
|
|
import { useLockscreen } from '../../../hooks/use-lockscreen/index.mjs';
|
|
import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
|
|
import { useId } from '../../../hooks/use-id/index.mjs';
|
|
import { useGlobalConfig } from '../../config-provider/src/hooks/use-global-config.mjs';
|
|
import { defaultNamespace } from '../../../hooks/use-namespace/index.mjs';
|
|
import { addUnit } from '../../../utils/dom/style.mjs';
|
|
import { isObject, isArray, isFunction } from '@vue/shared';
|
|
import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
|
|
|
|
const useDialog = (props, targetRef) => {
|
|
var _a;
|
|
const instance = getCurrentInstance();
|
|
const emit = instance.emit;
|
|
const { nextZIndex } = useZIndex();
|
|
let lastPosition = "";
|
|
const titleId = useId();
|
|
const bodyId = useId();
|
|
const visible = ref(false);
|
|
const closed = ref(false);
|
|
const rendered = ref(false);
|
|
const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
|
|
let openTimer = void 0;
|
|
let closeTimer = void 0;
|
|
const config = useGlobalConfig();
|
|
const namespace = computed(() => {
|
|
var _a2, _b;
|
|
return (_b = (_a2 = config.value) == null ? void 0 : _a2.namespace) != null ? _b : defaultNamespace;
|
|
});
|
|
const globalConfig = computed(() => {
|
|
var _a2;
|
|
return (_a2 = config.value) == null ? void 0 : _a2.dialog;
|
|
});
|
|
const style = computed(() => {
|
|
const style2 = {};
|
|
const varPrefix = `--${namespace.value}-dialog`;
|
|
if (!props.fullscreen) {
|
|
if (props.top) {
|
|
style2[`${varPrefix}-margin-top`] = props.top;
|
|
}
|
|
if (props.width) {
|
|
style2[`${varPrefix}-width`] = addUnit(props.width);
|
|
}
|
|
}
|
|
return style2;
|
|
});
|
|
const _draggable = computed(() => {
|
|
var _a2, _b, _c;
|
|
return ((_c = (_b = props.draggable) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.draggable) != null ? _c : false) && !props.fullscreen;
|
|
});
|
|
const _alignCenter = computed(() => {
|
|
var _a2, _b, _c;
|
|
return (_c = (_b = props.alignCenter) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.alignCenter) != null ? _c : false;
|
|
});
|
|
const _overflow = computed(() => {
|
|
var _a2, _b, _c;
|
|
return (_c = (_b = props.overflow) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.overflow) != null ? _c : false;
|
|
});
|
|
const overlayDialogStyle = computed(() => {
|
|
if (_alignCenter.value) {
|
|
return { display: "flex" };
|
|
}
|
|
return {};
|
|
});
|
|
const transitionConfig = computed(() => {
|
|
var _a2, _b, _c;
|
|
const transition = (_c = (_b = props.transition) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.transition) != null ? _c : DEFAULT_DIALOG_TRANSITION;
|
|
const baseConfig = {
|
|
name: transition,
|
|
onAfterEnter: afterEnter,
|
|
onBeforeLeave: beforeLeave,
|
|
onAfterLeave: afterLeave
|
|
};
|
|
if (isObject(transition)) {
|
|
const config2 = { ...transition };
|
|
const _mergeHook = (userHook, defaultHook) => {
|
|
return (el) => {
|
|
if (isArray(userHook)) {
|
|
userHook.forEach((fn) => {
|
|
if (isFunction(fn))
|
|
fn(el);
|
|
});
|
|
} else if (isFunction(userHook)) {
|
|
userHook(el);
|
|
}
|
|
defaultHook();
|
|
};
|
|
};
|
|
config2.onAfterEnter = _mergeHook(config2.onAfterEnter, afterEnter);
|
|
config2.onBeforeLeave = _mergeHook(config2.onBeforeLeave, beforeLeave);
|
|
config2.onAfterLeave = _mergeHook(config2.onAfterLeave, afterLeave);
|
|
if (!config2.name) {
|
|
config2.name = DEFAULT_DIALOG_TRANSITION;
|
|
}
|
|
return config2;
|
|
}
|
|
return baseConfig;
|
|
});
|
|
function afterEnter() {
|
|
emit("opened");
|
|
}
|
|
function afterLeave() {
|
|
emit("closed");
|
|
emit(UPDATE_MODEL_EVENT, false);
|
|
if (props.destroyOnClose) {
|
|
rendered.value = false;
|
|
}
|
|
}
|
|
function beforeLeave() {
|
|
emit("close");
|
|
}
|
|
function open() {
|
|
closeTimer == null ? void 0 : closeTimer();
|
|
openTimer == null ? void 0 : openTimer();
|
|
if (props.openDelay && props.openDelay > 0) {
|
|
({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay));
|
|
} else {
|
|
doOpen();
|
|
}
|
|
}
|
|
function close() {
|
|
openTimer == null ? void 0 : openTimer();
|
|
closeTimer == null ? void 0 : closeTimer();
|
|
if (props.closeDelay && props.closeDelay > 0) {
|
|
({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay));
|
|
} else {
|
|
doClose();
|
|
}
|
|
}
|
|
function handleClose() {
|
|
function hide(shouldCancel) {
|
|
if (shouldCancel)
|
|
return;
|
|
closed.value = true;
|
|
visible.value = false;
|
|
}
|
|
if (props.beforeClose) {
|
|
props.beforeClose(hide);
|
|
} else {
|
|
close();
|
|
}
|
|
}
|
|
function onModalClick() {
|
|
if (props.closeOnClickModal) {
|
|
handleClose();
|
|
}
|
|
}
|
|
function doOpen() {
|
|
if (!isClient)
|
|
return;
|
|
visible.value = true;
|
|
}
|
|
function doClose() {
|
|
visible.value = false;
|
|
}
|
|
function onOpenAutoFocus() {
|
|
emit("openAutoFocus");
|
|
}
|
|
function onCloseAutoFocus() {
|
|
emit("closeAutoFocus");
|
|
}
|
|
function onFocusoutPrevented(event) {
|
|
var _a2;
|
|
if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
if (props.lockScroll) {
|
|
useLockscreen(visible);
|
|
}
|
|
function onCloseRequested() {
|
|
if (props.closeOnPressEscape) {
|
|
handleClose();
|
|
}
|
|
}
|
|
watch(() => props.zIndex, () => {
|
|
var _a2;
|
|
zIndex.value = (_a2 = props.zIndex) != null ? _a2 : nextZIndex();
|
|
});
|
|
watch(() => props.modelValue, (val) => {
|
|
var _a2;
|
|
if (val) {
|
|
closed.value = false;
|
|
open();
|
|
rendered.value = true;
|
|
zIndex.value = (_a2 = props.zIndex) != null ? _a2 : nextZIndex();
|
|
nextTick(() => {
|
|
emit("open");
|
|
if (targetRef.value) {
|
|
targetRef.value.parentElement.scrollTop = 0;
|
|
targetRef.value.parentElement.scrollLeft = 0;
|
|
targetRef.value.scrollTop = 0;
|
|
}
|
|
});
|
|
} else {
|
|
if (visible.value) {
|
|
close();
|
|
}
|
|
}
|
|
});
|
|
watch(() => props.fullscreen, (val) => {
|
|
if (!targetRef.value)
|
|
return;
|
|
if (val) {
|
|
lastPosition = targetRef.value.style.transform;
|
|
targetRef.value.style.transform = "";
|
|
} else {
|
|
targetRef.value.style.transform = lastPosition;
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
if (props.modelValue) {
|
|
visible.value = true;
|
|
rendered.value = true;
|
|
open();
|
|
}
|
|
});
|
|
return {
|
|
afterEnter,
|
|
afterLeave,
|
|
beforeLeave,
|
|
handleClose,
|
|
onModalClick,
|
|
close,
|
|
doClose,
|
|
onOpenAutoFocus,
|
|
onCloseAutoFocus,
|
|
onCloseRequested,
|
|
onFocusoutPrevented,
|
|
titleId,
|
|
bodyId,
|
|
closed,
|
|
style,
|
|
overlayDialogStyle,
|
|
rendered,
|
|
visible,
|
|
zIndex,
|
|
transitionConfig,
|
|
_draggable,
|
|
_alignCenter,
|
|
_overflow
|
|
};
|
|
};
|
|
|
|
export { useDialog };
|
|
//# sourceMappingURL=use-dialog.mjs.map
|