vue-admin-core
Version:
A Component Library for Vue 3
307 lines (304 loc) • 9.53 kB
JavaScript
import { h, Fragment, 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 { ElDrawer, ElButton } from 'element-plus';
import { defineComponent, 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 = "FormDrawerFooter";
const isDrawerTitle = (props) => {
return isNum(props) || isStr(props) || isBool(props) || isValidElement(props);
};
const getDrawerProps = (props) => {
if (isDrawerTitle(props)) {
return {
title: props
};
} else {
return props;
}
};
function FormDrawer(title, id, content) {
if (isFn(id) || isValidElement(id)) {
content = id;
id = "form-drawer";
}
const prefixCls = `${stylePrefix}-form-drawer`;
const env = {
root: document.createElement("div"),
form: null,
promise: null,
app: null,
instance: null,
openMiddlewares: [],
confirmMiddlewares: [],
cancelMiddlewares: []
};
document.body.appendChild(env.root);
const props = getDrawerProps(title);
const drawerProps = {
...props,
onClosed: () => {
var _a, _b, _c;
(_a = props.onClosed) == null ? void 0 : _a.call(props);
env.app.unmount();
env.app = null;
env.instance = null;
(_c = (_b = env.root) == null ? void 0 : _b.parentNode) == null ? void 0 : _c.removeChild(env.root);
env.root = void 0;
}
};
const component = observer(
defineComponent({
setup() {
return () => h(
Fragment,
{},
{
default: () => resolveComponent(content, {
form: env.form
})
}
);
}
})
);
const render = (visible = true, resolve, reject) => {
if (!env.instance) {
const ComponentConstructor = defineComponent({
props: ["drawerProps"],
data() {
return {
visible: false
};
},
render() {
const {
onClose,
onClosed,
onOpen,
onOpend,
onOK,
onCancel,
title: title2,
footer,
okText,
cancelText,
okButtonProps,
cancelButtonProps,
...drawerProps2
} = this.drawerProps;
return h(
FormProvider,
{
form: env.form
},
{
default: () => h(
ElDrawer,
{
class: `${prefixCls}`,
...drawerProps2,
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(
"div",
{
class: [`${prefixCls}-body`]
},
[h(component, {}, {})]
),
h(
"div",
{
class: [`${prefixCls}-footer`]
},
{
default: () => {
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 == null ? void 0 : reject();
}
},
{
default: () => resolveComponent(
cancelText || "\u53D6\u6D88"
// t('el.popconfirm.cancelButtonText')
)
}
),
h(
ElButton,
{
type: "primary",
...okButtonProps,
onClick: (e) => {
onOK == null ? void 0 : onOK(e);
resolve == null ? void 0 : resolve();
}
},
{
default: () => resolveComponent(
okText || "\u786E\u5B9A"
// t('el.popconfirm.confirmButtonText')
)
}
),
FooterPortalTarget
];
}
}
)
],
title: () => h("div", {}, { default: () => resolveComponent(title2) })
}
)
}
);
}
});
env.app = createApp(ComponentConstructor, {
drawerProps,
parent: getPortalContext(id)
});
env.instance = env.app.mount(env.root);
}
env.instance.visible = visible;
};
const formDrawer = {
forOpen: (middleware) => {
if (isFn(middleware)) {
env.openMiddlewares.push(middleware);
}
return formDrawer;
},
forConfirm: (middleware) => {
if (isFn(middleware)) {
env.confirmMiddlewares.push(middleware);
}
return formDrawer;
},
forCancel: (middleware) => {
if (isFn(middleware)) {
env.cancelMiddlewares.push(middleware);
}
return formDrawer;
},
open: (props2) => {
if (env.promise)
return env.promise;
env.promise = new Promise(async (resolve, reject) => {
try {
props2 = await loading(
drawerProps.loadingText,
() => applyMiddleware(props2, env.openMiddlewares)
);
env.form = env.form || createForm(props2);
} catch (e) {
reject(e);
}
render(
true,
() => {
env.form.submit(async () => {
await applyMiddleware(env.form, env.confirmMiddlewares);
resolve(toJS(env.form.values));
if (drawerProps.beforeClose) {
setTimeout(() => {
var _a;
(_a = drawerProps == null ? void 0 : drawerProps.beforeClose) == null ? void 0 : _a.call(drawerProps, () => {
formDrawer.close();
});
});
} else {
formDrawer.close();
}
}).catch(reject);
},
async () => {
await loading(
drawerProps.loadingText,
() => applyMiddleware(env.form, env.cancelMiddlewares)
);
if (drawerProps.beforeClose) {
drawerProps.beforeClose(() => {
formDrawer.close();
});
} else {
formDrawer.close();
}
}
);
});
return env.promise;
},
close: () => {
if (!env.root)
return;
render(false);
}
};
return formDrawer;
}
const FormDrawerFooter = defineComponent({
name: "FFormDrawerFooter",
setup(props, { slots }) {
return () => {
if (document.querySelector(`#${PORTAL_TARGET_NAME}`)) {
return h(
Teleport,
{
to: `#${PORTAL_TARGET_NAME}`
},
slots
);
} else {
return null;
}
};
}
});
FormDrawer.Footer = FormDrawerFooter;
FormDrawer.Portal = createPortalProvider("form-drawer");
export { FormDrawer, FormDrawer as default };
//# sourceMappingURL=index.mjs.map