You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.6 KiB
148 lines
3.6 KiB
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
var vue = require('vue');
|
|
var core = require('@vueuse/core');
|
|
require('../../../hooks/index.js');
|
|
var constants = require('../../../utils/constants.js');
|
|
var popupManager = require('../../../utils/popup-manager.js');
|
|
var util = require('../../../utils/util.js');
|
|
var index = require('../../../hooks/use-lockscreen/index.js');
|
|
var index$1 = require('../../../hooks/use-modal/index.js');
|
|
var index$2 = require('../../../hooks/use-restore-active/index.js');
|
|
|
|
const useDialog = (props, { emit }, targetRef) => {
|
|
const visible = vue.ref(false);
|
|
const closed = vue.ref(false);
|
|
const rendered = vue.ref(false);
|
|
const zIndex = vue.ref(props.zIndex || popupManager.PopupManager.nextZIndex());
|
|
let openTimer = void 0;
|
|
let closeTimer = void 0;
|
|
const normalizeWidth = vue.computed(() => util.isNumber(props.width) ? `${props.width}px` : props.width);
|
|
const style = vue.computed(() => {
|
|
const style2 = {};
|
|
const varPrefix = `--el-dialog`;
|
|
if (!props.fullscreen) {
|
|
if (props.top) {
|
|
style2[`${varPrefix}-margin-top`] = props.top;
|
|
}
|
|
if (props.width) {
|
|
style2[`${varPrefix}-width`] = normalizeWidth.value;
|
|
}
|
|
}
|
|
return style2;
|
|
});
|
|
function afterEnter() {
|
|
emit("opened");
|
|
}
|
|
function afterLeave() {
|
|
emit("closed");
|
|
emit(constants.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 } = core.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 } = core.useTimeoutFn(() => doClose(), props.closeDelay));
|
|
} else {
|
|
doClose();
|
|
}
|
|
}
|
|
function hide(shouldCancel) {
|
|
if (shouldCancel)
|
|
return;
|
|
closed.value = true;
|
|
visible.value = false;
|
|
}
|
|
function handleClose() {
|
|
if (props.beforeClose) {
|
|
props.beforeClose(hide);
|
|
} else {
|
|
close();
|
|
}
|
|
}
|
|
function onModalClick() {
|
|
if (props.closeOnClickModal) {
|
|
handleClose();
|
|
}
|
|
}
|
|
function doOpen() {
|
|
if (!core.isClient) {
|
|
return;
|
|
}
|
|
visible.value = true;
|
|
}
|
|
function doClose() {
|
|
visible.value = false;
|
|
}
|
|
if (props.lockScroll) {
|
|
index.useLockscreen(visible);
|
|
}
|
|
if (props.closeOnPressEscape) {
|
|
index$1.useModal({
|
|
handleClose
|
|
}, visible);
|
|
}
|
|
index$2.useRestoreActive(visible);
|
|
vue.watch(() => props.modelValue, (val) => {
|
|
if (val) {
|
|
closed.value = false;
|
|
open();
|
|
rendered.value = true;
|
|
emit("open");
|
|
zIndex.value = props.zIndex ? zIndex.value++ : popupManager.PopupManager.nextZIndex();
|
|
vue.nextTick(() => {
|
|
if (targetRef.value) {
|
|
targetRef.value.scrollTop = 0;
|
|
}
|
|
});
|
|
} else {
|
|
if (visible.value) {
|
|
close();
|
|
}
|
|
}
|
|
});
|
|
vue.onMounted(() => {
|
|
if (props.modelValue) {
|
|
visible.value = true;
|
|
rendered.value = true;
|
|
open();
|
|
}
|
|
});
|
|
return {
|
|
afterEnter,
|
|
afterLeave,
|
|
beforeLeave,
|
|
handleClose,
|
|
onModalClick,
|
|
close,
|
|
doClose,
|
|
closed,
|
|
style,
|
|
rendered,
|
|
visible,
|
|
zIndex
|
|
};
|
|
};
|
|
|
|
exports.useDialog = useDialog;
|
|
//# sourceMappingURL=use-dialog.js.map
|