118 lines
3.7 KiB
JavaScript
118 lines
3.7 KiB
JavaScript
|
|
import { isClient } from "../../../utils/browser.mjs";
|
||
|
|
import { isElement, isFunction, isObject, isString, isUndefined } from "../../../utils/types.mjs";
|
||
|
|
import { hasOwn } from "../../../utils/objects.mjs";
|
||
|
|
import { debugWarn } from "../../../utils/error.mjs";
|
||
|
|
import src_default from "./index.mjs";
|
||
|
|
import { createVNode, isVNode, markRaw, render } from "vue";
|
||
|
|
|
||
|
|
//#region ../../packages/components/message-box/src/messageBox.ts
|
||
|
|
const messageInstance = /* @__PURE__ */ new Map();
|
||
|
|
const getAppendToElement = (props) => {
|
||
|
|
let appendTo = document.body;
|
||
|
|
if (props.appendTo) {
|
||
|
|
if (isString(props.appendTo)) appendTo = document.querySelector(props.appendTo);
|
||
|
|
if (isElement(props.appendTo)) appendTo = props.appendTo;
|
||
|
|
if (!isElement(appendTo)) {
|
||
|
|
debugWarn("ElMessageBox", "the appendTo option is not an HTMLElement. Falling back to document.body.");
|
||
|
|
appendTo = document.body;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return appendTo;
|
||
|
|
};
|
||
|
|
const initInstance = (props, container, appContext = null) => {
|
||
|
|
const vnode = createVNode(src_default, props, isFunction(props.message) || isVNode(props.message) ? { default: isFunction(props.message) ? props.message : () => props.message } : null);
|
||
|
|
vnode.appContext = appContext;
|
||
|
|
render(vnode, container);
|
||
|
|
getAppendToElement(props).appendChild(container.firstElementChild);
|
||
|
|
return vnode.component;
|
||
|
|
};
|
||
|
|
const genContainer = () => {
|
||
|
|
return document.createElement("div");
|
||
|
|
};
|
||
|
|
const showMessage = (options, appContext) => {
|
||
|
|
const container = genContainer();
|
||
|
|
options.onVanish = () => {
|
||
|
|
render(null, container);
|
||
|
|
messageInstance.delete(vm);
|
||
|
|
};
|
||
|
|
options.onAction = (action) => {
|
||
|
|
const currentMsg = messageInstance.get(vm);
|
||
|
|
let resolve;
|
||
|
|
if (options.showInput) resolve = {
|
||
|
|
value: vm.inputValue,
|
||
|
|
action
|
||
|
|
};
|
||
|
|
else resolve = action;
|
||
|
|
if (options.callback) options.callback(resolve, instance.proxy);
|
||
|
|
else if (action === "cancel" || action === "close") if (options.distinguishCancelAndClose && action !== "cancel") currentMsg.reject("close");
|
||
|
|
else currentMsg.reject("cancel");
|
||
|
|
else currentMsg.resolve(resolve);
|
||
|
|
};
|
||
|
|
const instance = initInstance(options, container, appContext);
|
||
|
|
const vm = instance.proxy;
|
||
|
|
for (const prop in options) if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) if (prop === "closeIcon" && isObject(options[prop])) vm[prop] = markRaw(options[prop]);
|
||
|
|
else vm[prop] = options[prop];
|
||
|
|
vm.visible = true;
|
||
|
|
return vm;
|
||
|
|
};
|
||
|
|
function MessageBox(options, appContext = null) {
|
||
|
|
if (!isClient) return Promise.reject();
|
||
|
|
let callback;
|
||
|
|
if (isString(options) || isVNode(options)) options = { message: options };
|
||
|
|
else callback = options.callback;
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
const vm = showMessage(options, appContext ?? MessageBox._context);
|
||
|
|
messageInstance.set(vm, {
|
||
|
|
options,
|
||
|
|
callback,
|
||
|
|
resolve,
|
||
|
|
reject
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
const MESSAGE_BOX_VARIANTS = [
|
||
|
|
"alert",
|
||
|
|
"confirm",
|
||
|
|
"prompt"
|
||
|
|
];
|
||
|
|
const MESSAGE_BOX_DEFAULT_OPTS = {
|
||
|
|
alert: {
|
||
|
|
closeOnPressEscape: false,
|
||
|
|
closeOnClickModal: false
|
||
|
|
},
|
||
|
|
confirm: { showCancelButton: true },
|
||
|
|
prompt: {
|
||
|
|
showCancelButton: true,
|
||
|
|
showInput: true
|
||
|
|
}
|
||
|
|
};
|
||
|
|
MESSAGE_BOX_VARIANTS.forEach((boxType) => {
|
||
|
|
MessageBox[boxType] = messageBoxFactory(boxType);
|
||
|
|
});
|
||
|
|
function messageBoxFactory(boxType) {
|
||
|
|
return (message, title, options, appContext) => {
|
||
|
|
let titleOrOpts = "";
|
||
|
|
if (isObject(title)) {
|
||
|
|
options = title;
|
||
|
|
titleOrOpts = "";
|
||
|
|
} else if (isUndefined(title)) titleOrOpts = "";
|
||
|
|
else titleOrOpts = title;
|
||
|
|
return MessageBox(Object.assign({
|
||
|
|
title: titleOrOpts,
|
||
|
|
message,
|
||
|
|
type: "",
|
||
|
|
...MESSAGE_BOX_DEFAULT_OPTS[boxType]
|
||
|
|
}, options, { boxType }), appContext);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
MessageBox.close = () => {
|
||
|
|
messageInstance.forEach((_, vm) => {
|
||
|
|
vm.doClose();
|
||
|
|
});
|
||
|
|
messageInstance.clear();
|
||
|
|
};
|
||
|
|
MessageBox._context = null;
|
||
|
|
|
||
|
|
//#endregion
|
||
|
|
export { MessageBox as default };
|
||
|
|
//# sourceMappingURL=messageBox.mjs.map
|