vue-admin-core
Version:
A Component Library for Vue 3
296 lines (291 loc) • 9.59 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue$1 = require('@formily/vue');
var reactive = require('@formily/reactive');
var reactiveVue = require('@formily/reactive-vue');
var core = require('@formily/core');
var shared = require('@formily/shared');
var elementPlus = require('element-plus');
var vue = require('vue');
require('../../__builtins__/index.js');
var utils = require('../../__builtins__/shared/utils.js');
var index = require('../../__builtins__/configs/index.js');
var resolveComponent = require('../../__builtins__/shared/resolve-component.js');
var portal = require('../../__builtins__/shared/portal.js');
var loading = require('../../__builtins__/shared/loading.js');
const PORTAL_TARGET_NAME = "FormDialogFooter";
const isDialogTitle = (props) => {
return shared.isNum(props) || shared.isStr(props) || shared.isBool(props) || utils.isValidElement(props) || shared.isFn(props) || vue.isVNode(props);
};
const getDialogProps = (props) => {
if (isDialogTitle(props)) {
return {
title: props
};
} else {
return props;
}
};
function FormDialog(title, id, content) {
if (shared.isFn(id) || utils.isValidElement(id)) {
content = id;
id = "form-dialog";
}
const prefixCls = `${index.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 = reactiveVue.observer(
vue.defineComponent({
setup() {
return () => vue.h(vue$1.FragmentComponent, {}, { default: () => resolveComponent.resolveComponent(content) });
}
})
);
const render = (visible = true, resolve, reject) => {
if (!env.instance) {
const ComponentConstructor = vue.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 vue.h(
vue$1.FormProvider,
{ form: env.form },
{
default: () => vue.h(
elementPlus.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: () => vue.h(component, {}, {}),
header: () => vue.h("div", {}, [resolveComponent.resolveComponent(title2)]),
footer: () => vue.h(
"div",
{},
{
default: () => {
var _a;
const FooterPortalTarget = vue.h(
"span",
{
id: PORTAL_TARGET_NAME
},
{}
);
if (footer === null) {
return [null, FooterPortalTarget];
} else if (footer) {
return [resolveComponent.resolveComponent(footer), FooterPortalTarget];
}
return [
vue.h(
elementPlus.ElButton,
{
...cancelButtonProps,
onClick: (e) => {
onCancel == null ? void 0 : onCancel(e);
reject && reject();
}
},
{
default: () => resolveComponent.resolveComponent(
cancelText || "\u53D6\u6D88"
// t('el.popconfirm.cancelButtonText')
)
}
),
vue.h(
elementPlus.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.resolveComponent(
okText || "\u786E\u5B9A"
// t('el.popconfirm.confirmButtonText')
)
}
),
FooterPortalTarget
];
}
}
)
}
)
}
);
}
});
env.app = vue.createApp(ComponentConstructor, {
dialogProps,
parent: portal.getPortalContext(id)
});
env.instance = env.app.mount(env.root);
}
env.instance.visible = visible;
};
const formDialog = {
forOpen: (middleware) => {
if (shared.isFn(middleware)) {
env.openMiddlewares.push(middleware);
}
return formDialog;
},
forConfirm: (middleware) => {
if (shared.isFn(middleware)) {
env.confirmMiddlewares.push(middleware);
}
return formDialog;
},
forCancel: (middleware) => {
if (shared.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.loading(
dialogProps.loadingText,
() => shared.applyMiddleware(props2, env.openMiddlewares)
);
env.form = env.form || core.createForm(props2);
} catch (e) {
reject(e);
}
render(
true,
() => {
var _a;
(_a = env.form) == null ? void 0 : _a.submit(async () => {
var _a2;
await shared.applyMiddleware(env.form, env.confirmMiddlewares);
resolve(reactive.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.loading(
dialogProps.loadingText,
() => shared.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 = vue.defineComponent({
name: "FFormDialogFooter",
setup(props, { slots }) {
return () => {
if (document.querySelector(`#${PORTAL_TARGET_NAME}`)) {
return vue.h(
vue.Teleport,
{
to: `#${PORTAL_TARGET_NAME}`
},
slots
);
} else {
return null;
}
};
}
});
FormDialog.Footer = FormDialogFooter;
FormDialog.Portal = portal.createPortalProvider("form-dialog");
exports.FormDialog = FormDialog;
exports.default = FormDialog;
//# sourceMappingURL=index.js.map