@aplus-frontend/ui
Version:
275 lines (274 loc) • 8.33 kB
JavaScript
import { isVNode as Q, defineComponent as Y, useSlots as Z, shallowRef as ee, ref as y, computed as w, unref as n, watch as P, cloneVNode as te, createVNode as s, mergeProps as p, createElementBlock as N, openBlock as h, Fragment as ie, createBlock as S, createCommentVNode as M, withCtx as v, renderSlot as _, withModifiers as ne, normalizeClass as oe, resolveDynamicComponent as I, createTextVNode as ae, toDisplayString as se } from "vue";
import { Button as z, Flex as le, Space as re, Drawer as ue } from "@aplus-frontend/antdv";
import { isBoolean as de, isUndefined as me, omit as ce } from "lodash-unified";
import "../../config-provider/index.mjs";
import "../../hooks/index.mjs";
import { convertReactiveToRaw as fe } from "../../utils/index.mjs";
import { getSingleVNode as pe } from "../../utils/slot.mjs";
import "../ap-form.vue.mjs";
import he from "../style/drawer-form.mjs";
import { useControllableValue as ve } from "../../hooks/useControllableValue.mjs";
import { useLocale as be } from "../../config-provider/hooks/use-locale.mjs";
import { useNamespace as ge } from "../../config-provider/hooks/use-namespace.mjs";
import Fe from "../ap-form.vue2.mjs";
function L(r) {
return typeof r == "function" || Object.prototype.toString.call(r) === "[object Object]" && !Q(r);
}
const De = /* @__PURE__ */ Y({
name: "ApFormDrawerForm",
__name: "index",
props: {
layout: {
default: "horizontal"
},
labelCol: {},
wrapperCol: {},
colon: {
type: Boolean,
default: !0
},
labelAlign: {
default: "right"
},
labelWrap: {
type: Boolean
},
prefixCls: {},
requiredMark: {},
hideRequiredMark: {
type: Boolean,
default: !1
},
rules: {},
validateMessages: {},
validateOnRuleChange: {
type: Boolean,
default: !0
},
scrollToFirstError: {},
onSubmit: {},
name: {},
validateTrigger: {
default: "change"
},
size: {},
disabled: {
type: Boolean
},
onFieldsChange: {},
onFinishFailed: {},
onValidate: {},
variant: {},
initialValues: {},
onValuesChange: {},
syncToUrl: {
type: [Boolean, Function]
},
syncToUrlPriority: {
type: Boolean
},
open: {
type: Boolean,
default: void 0
},
"onUpdate:open": {},
drawerProps: {
default: () => ({})
},
title: {},
width: {
default: 378
},
onFinish: {},
submitter: {
type: [Boolean, Object],
default: () => ({
resetButtonProps: !1
})
},
showCancel: {
type: Boolean,
default: !0
},
submitTimeout: {},
resize: {
type: [Object, Boolean],
default: !1
}
},
emits: ["update:open"],
setup(r, {
expose: U,
emit: j
}) {
const t = r, b = Z(), E = j, o = ee(), d = y(), a = y(!1), {
value: C,
updateValue: m
} = ve(t, E, {
valuePropName: "open",
defaultValue: !1
}), l = w(() => {
const e = {
onResize: () => {
},
minWidth: 300,
maxWidth: window.innerWidth * 0.8,
resizeOnOpen: !0
};
return de(t.resize) ? t.resize ? e : {} : {
minWidth: t.resize?.minWidth ?? e.minWidth,
maxWidth: t.resize?.maxWidth ?? e.maxWidth,
onResize: t.resize?.onResize ?? e.onResize,
resizeOnOpen: me(t.resize?.resizeOnOpen) ? e.onResize : t.resize.resizeOnOpen
};
}), u = y(T()), {
t: g
} = be(), D = he("ap-form-drawer-form"), {
b: $,
e: q,
em: V
} = ge("ap-form-drawer-form"), A = w(() => [q("resize-bar"), {
[V("resize-bar", "min-disabled")]: n(u) === n(l).minWidth
}, {
[V("resize-bar", "max-disabled")]: n(u) === n(l).maxWidth
}]);
P(() => o.value, (e) => {
e && d.value && (e.setFieldsValue?.(d.value), d.value = void 0);
}), P(() => n(C), (e) => {
e && n(l)?.resizeOnOpen && (u.value = T());
});
function T() {
const e = n(l)?.minWidth;
return !e || e && e < t.width ? t.width : e;
}
const R = pe(b.trigger), W = R ? te(R, {
onClick: () => {
m(!0);
}
}) : null, X = w(() => {
const e = [];
if (t.submitter === !1)
return null;
if (t.showCancel) {
let i;
e.push(s(z, {
onClick: k,
disabled: a.value
}, L(i = g("ap.common.cancelText")) ? i : {
default: () => [i]
}));
}
return t.submitter?.resetButtonProps !== !1 && e.push(s(z, p(t.submitter?.resetButtonProps || {}, {
key: "submit",
disabled: a.value,
onClick: H
}), {
default: () => [t.submitter?.resetText || g("ap.common.resetText")]
})), t.submitter?.submitButtonProps !== !1 && e.push(s(z, p({
type: "primary",
key: "submit"
}, t.submitter?.submitButtonProps || {}, {
loading: a.value,
onClick: J
}), {
default: () => [t.submitter?.submitText || g("ap.common.okText")]
})), s(le, {
justify: "flex-end"
}, {
default: () => [b.submitter ? b.submitter(e) : s(re, null, L(e) ? e : {
default: () => [e]
})]
});
});
function G() {
l.value?.onResize?.(), document.addEventListener("mousemove", B), document.addEventListener("mouseup", x);
}
function B(e) {
const i = n(l), c = (document.body.offsetWidth || 1e3) - (e.clientX - document.body.offsetLeft), f = i?.minWidth ?? (t.width || 800), O = i?.maxWidth ?? window.innerWidth * 0.8;
let F = c;
c < f && (F = f), c > O && (F = O), u.value = F;
}
function x() {
document.removeEventListener("mousemove", B), document.removeEventListener("mouseup", x);
}
function H() {
t.submitter !== !1 && (o.value?.resetFields(), t.submitter?.onReset?.());
}
async function J() {
if (t.submitter !== !1)
try {
const e = await o.value?.validateFieldsReturnTransformed();
t.submitter?.onSubmit?.(), a.value = !0;
const i = t.onFinish?.(fe(e));
if (t.submitTimeout && i instanceof Promise) {
const f = setTimeout(() => a.value = !1, t.submitTimeout);
i.finally(() => {
clearTimeout(f), a.value = !1;
});
}
await i && m(!1);
} finally {
a.value = !1;
}
}
function k() {
n(a) || m(!1);
}
function K(e) {
!e && n(a) || m(e);
}
return U({
resetFields: async () => {
o.value?.resetFields();
},
clearValidate: (e) => {
o.value?.clearValidate(e);
},
validateFields: (e, i) => o.value?.validateFields(e, i),
getFieldsValue: (e) => o.value?.getFieldsValue(e),
validate: (e, i) => o.value?.validate(e, i),
scrollToField: (e, i = {}) => {
o.value?.scrollToField(e, i);
},
setFieldValue: (e, i) => {
o.value?.setFieldValue?.(e, i);
},
setFieldsValue: (e) => {
if (!o.value) {
d.value = e;
return;
}
o.value?.setFieldsValue?.(e);
},
getInternalInstance: (e) => o.value?.getInternalInstance(e),
getFieldsValueTransformed: (e) => o.value?.getFieldsValueTransformed(e),
validateFieldsReturnTransformed: (e) => o.value?.validateFieldsReturnTransformed(e)
}), (e, i) => (h(), N(ie, null, [s(n(ue), p(e.drawerProps, {
open: n(C),
width: u.value,
class: [n($)(), n(D)],
"onUpdate:open": K,
onCancel: k
}), {
title: v(() => [_(e.$slots, "title", {}, () => [ae(se(t.title), 1)])]),
footer: v(() => [(h(), S(I(X.value)))]),
default: v(() => [s(Fe, p({
ref_key: "formRef",
ref: o
}, n(ce)(t, ["drawerProps", "open", "onUpdate:open", "title", "width", "onFinish", "submitter"])), {
default: v(() => [_(e.$slots, "default")]),
_: 3
}, 16), e.resize ? (h(), N("div", {
key: 0,
class: oe(A.value),
onMousedown: ne(G, ["stop", "prevent"])
}, null, 34)) : M("", !0)]),
_: 3
}, 16, ["open", "width", "class"]), n(W) ? (h(), S(I(n(W)), {
key: 0
})) : M("", !0)], 64));
}
});
export {
De as default
};