vue-admin-core
Version:
A Component Library for Vue 3
312 lines (307 loc) • 9.83 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 = "FormDrawerFooter";
const isDrawerTitle = (props) => {
return shared.isNum(props) || shared.isStr(props) || shared.isBool(props) || utils.isValidElement(props);
};
const getDrawerProps = (props) => {
if (isDrawerTitle(props)) {
return {
title: props
};
} else {
return props;
}
};
function FormDrawer(title, id, content) {
if (shared.isFn(id) || utils.isValidElement(id)) {
content = id;
id = "form-drawer";
}
const prefixCls = `${index.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 = reactiveVue.observer(
vue.defineComponent({
setup() {
return () => vue$1.h(
vue$1.Fragment,
{},
{
default: () => resolveComponent.resolveComponent(content, {
form: env.form
})
}
);
}
})
);
const render = (visible = true, resolve, reject) => {
if (!env.instance) {
const ComponentConstructor = vue.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 vue$1.h(
vue$1.FormProvider,
{
form: env.form
},
{
default: () => vue$1.h(
elementPlus.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: () => [
vue$1.h(
"div",
{
class: [`${prefixCls}-body`]
},
[vue$1.h(component, {}, {})]
),
vue$1.h(
"div",
{
class: [`${prefixCls}-footer`]
},
{
default: () => {
const FooterPortalTarget = vue$1.h(
"span",
{
id: PORTAL_TARGET_NAME
},
{}
);
if (footer === null) {
return [null, FooterPortalTarget];
} else if (footer) {
return [resolveComponent.resolveComponent(footer), FooterPortalTarget];
}
return [
vue$1.h(
elementPlus.ElButton,
{
...cancelButtonProps,
onClick: (e) => {
onCancel == null ? void 0 : onCancel(e);
reject == null ? void 0 : reject();
}
},
{
default: () => resolveComponent.resolveComponent(
cancelText || "\u53D6\u6D88"
// t('el.popconfirm.cancelButtonText')
)
}
),
vue$1.h(
elementPlus.ElButton,
{
type: "primary",
...okButtonProps,
onClick: (e) => {
onOK == null ? void 0 : onOK(e);
resolve == null ? void 0 : resolve();
}
},
{
default: () => resolveComponent.resolveComponent(
okText || "\u786E\u5B9A"
// t('el.popconfirm.confirmButtonText')
)
}
),
FooterPortalTarget
];
}
}
)
],
title: () => vue$1.h("div", {}, { default: () => resolveComponent.resolveComponent(title2) })
}
)
}
);
}
});
env.app = vue.createApp(ComponentConstructor, {
drawerProps,
parent: portal.getPortalContext(id)
});
env.instance = env.app.mount(env.root);
}
env.instance.visible = visible;
};
const formDrawer = {
forOpen: (middleware) => {
if (shared.isFn(middleware)) {
env.openMiddlewares.push(middleware);
}
return formDrawer;
},
forConfirm: (middleware) => {
if (shared.isFn(middleware)) {
env.confirmMiddlewares.push(middleware);
}
return formDrawer;
},
forCancel: (middleware) => {
if (shared.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.loading(
drawerProps.loadingText,
() => shared.applyMiddleware(props2, env.openMiddlewares)
);
env.form = env.form || core.createForm(props2);
} catch (e) {
reject(e);
}
render(
true,
() => {
env.form.submit(async () => {
await shared.applyMiddleware(env.form, env.confirmMiddlewares);
resolve(reactive.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.loading(
drawerProps.loadingText,
() => shared.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 = vue.defineComponent({
name: "FFormDrawerFooter",
setup(props, { slots }) {
return () => {
if (document.querySelector(`#${PORTAL_TARGET_NAME}`)) {
return vue$1.h(
vue.Teleport,
{
to: `#${PORTAL_TARGET_NAME}`
},
slots
);
} else {
return null;
}
};
}
});
FormDrawer.Footer = FormDrawerFooter;
FormDrawer.Portal = portal.createPortalProvider("form-drawer");
exports.FormDrawer = FormDrawer;
exports.default = FormDrawer;
//# sourceMappingURL=index.js.map