vue-admin-core
Version:
A Component Library for Vue 3
291 lines (288 loc) • 9.32 kB
JavaScript
import { FragmentComponent, FormProvider } from '@formily/vue';
import { toJS } from '@formily/reactive';
import { observer } from '@formily/reactive-vue';
import { createForm } from '@formily/core';
import { isNum, isStr, isBool, isFn, applyMiddleware } from '@formily/shared';
import { ElDialog, ElButton } from 'element-plus';
import { isVNode, defineComponent, h, createApp, Teleport } from 'vue';
import '../../__builtins__/index.mjs';
import { isValidElement } from '../../__builtins__/shared/utils.mjs';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';
import { resolveComponent } from '../../__builtins__/shared/resolve-component.mjs';
import { getPortalContext, createPortalProvider } from '../../__builtins__/shared/portal.mjs';
import { loading } from '../../__builtins__/shared/loading.mjs';
const PORTAL_TARGET_NAME = "FormDialogFooter";
const isDialogTitle = (props) => {
return isNum(props) || isStr(props) || isBool(props) || isValidElement(props) || isFn(props) || isVNode(props);
};
const getDialogProps = (props) => {
if (isDialogTitle(props)) {
return {
title: props
};
} else {
return props;
}
};
function FormDialog(title, id, content) {
if (isFn(id) || isValidElement(id)) {
content = id;
id = "form-dialog";
}
const prefixCls = `${stylePrefix}-form-dialog`;
const env = {
root: document.createElement("div"),
form: null,
promise: null,
app: null,
instance: null,
openMiddlewares: [],
confirmMiddlewares: [],
cancelMiddlewares: []
};
document.body.appendChild(env.root);
const props = getDialogProps(title);
const dialogProps = {
...props,
onClosed: () => {
var _a, _b, _c, _d, _e;
(_a = props.onClosed) == null ? void 0 : _a.call(props);
(_c = (_b = env.app) == null ? void 0 : _b.unmount) == null ? void 0 : _c.call(_b);
env.app = null;
env.instance = null;
(_e = (_d = env.root) == null ? void 0 : _d.parentNode) == null ? void 0 : _e.removeChild(env.root);
env.root = void 0;
}
};
const component = observer(
defineComponent({
setup() {
return () => h(FragmentComponent, {}, { default: () => resolveComponent(content) });
}
})
);
const render = (visible = true, resolve, reject) => {
if (!env.instance) {
const ComponentConstructor = defineComponent({
props: { dialogProps: Object },
data() {
return {
visible: false
};
},
render() {
const {
onClose,
onClosed,
onOpen,
onOpend,
onOK,
onCancel,
title: title2,
footer,
okText,
cancelText,
okButtonProps,
cancelButtonProps,
...dialogProps2
} = this.dialogProps;
return h(
FormProvider,
{ form: env.form },
{
default: () => h(
ElDialog,
{
class: [`${prefixCls}`],
...dialogProps2,
modelValue: this.visible,
"onUpdate:modelValue": (val) => {
this.visible = val;
},
onClose: () => {
onClose == null ? void 0 : onClose();
},
onClosed: () => {
onClosed == null ? void 0 : onClosed();
},
onOpen: () => {
onOpen == null ? void 0 : onOpen();
},
onOpened: () => {
onOpend == null ? void 0 : onOpend();
}
},
{
default: () => h(component, {}, {}),
header: () => h("div", {}, [resolveComponent(title2)]),
footer: () => h(
"div",
{},
{
default: () => {
var _a;
const FooterPortalTarget = h(
"span",
{
id: PORTAL_TARGET_NAME
},
{}
);
if (footer === null) {
return [null, FooterPortalTarget];
} else if (footer) {
return [resolveComponent(footer), FooterPortalTarget];
}
return [
h(
ElButton,
{
...cancelButtonProps,
onClick: (e) => {
onCancel == null ? void 0 : onCancel(e);
reject && reject();
}
},
{
default: () => resolveComponent(
cancelText || "\u53D6\u6D88"
// t('el.popconfirm.cancelButtonText')
)
}
),
h(
ElButton,
{
type: "primary",
...okButtonProps,
loading: (_a = env.form) == null ? void 0 : _a.submitting,
onClick: (e) => {
onOK == null ? void 0 : onOK(e);
resolve && resolve();
}
},
{
default: () => resolveComponent(
okText || "\u786E\u5B9A"
// t('el.popconfirm.confirmButtonText')
)
}
),
FooterPortalTarget
];
}
}
)
}
)
}
);
}
});
env.app = createApp(ComponentConstructor, {
dialogProps,
parent: getPortalContext(id)
});
env.instance = env.app.mount(env.root);
}
env.instance.visible = visible;
};
const formDialog = {
forOpen: (middleware) => {
if (isFn(middleware)) {
env.openMiddlewares.push(middleware);
}
return formDialog;
},
forConfirm: (middleware) => {
if (isFn(middleware)) {
env.confirmMiddlewares.push(middleware);
}
return formDialog;
},
forCancel: (middleware) => {
if (isFn(middleware)) {
env.cancelMiddlewares.push(middleware);
}
return formDialog;
},
open: (props2) => {
if (env.promise)
return env.promise;
env.promise = new Promise(async (resolve, reject) => {
try {
props2 = await loading(
dialogProps.loadingText,
() => applyMiddleware(props2, env.openMiddlewares)
);
env.form = env.form || createForm(props2);
} catch (e) {
reject(e);
}
render(
true,
() => {
var _a;
(_a = env.form) == null ? void 0 : _a.submit(async () => {
var _a2;
await applyMiddleware(env.form, env.confirmMiddlewares);
resolve(toJS((_a2 = env.form) == null ? void 0 : _a2.values));
if (dialogProps.beforeClose) {
setTimeout(() => {
var _a3;
(_a3 = dialogProps == null ? void 0 : dialogProps.beforeClose) == null ? void 0 : _a3.call(dialogProps, () => {
formDialog.close();
});
});
} else {
formDialog.close();
}
}).catch(reject);
},
async () => {
await loading(
dialogProps.loadingText,
() => applyMiddleware(env.form, env.cancelMiddlewares)
);
if (dialogProps.beforeClose) {
dialogProps.beforeClose(() => {
formDialog.close();
});
} else {
formDialog.close();
}
}
);
});
return env.promise;
},
close: () => {
if (!env.root)
return;
render(false);
}
};
return formDialog;
}
const FormDialogFooter = defineComponent({
name: "FFormDialogFooter",
setup(props, { slots }) {
return () => {
if (document.querySelector(`#${PORTAL_TARGET_NAME}`)) {
return h(
Teleport,
{
to: `#${PORTAL_TARGET_NAME}`
},
slots
);
} else {
return null;
}
};
}
});
FormDialog.Footer = FormDialogFooter;
FormDialog.Portal = createPortalProvider("form-dialog");
export { FormDialog, FormDialog as default };
//# sourceMappingURL=index.mjs.map