ideaz-element
Version:
<p align="center"> <a href="" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/logo.svg" alt="Ideaz Element" width="180" style="width: 180px;" /> </a> </p>
354 lines (353 loc) • 11.9 kB
JavaScript
import { isVNode as le, defineComponent as ae, getCurrentInstance as ne, provide as ie, computed as de, toRefs as se, createVNode as r, Fragment as R, mergeProps as $, withDirectives as ue, resolveDirective as me } from "vue";
import "../../../hooks/index.mjs";
import "../../../node_modules/.pnpm/lodash-unified@1.0.3_@types_lodash-es@4.17.12_lodash-es@4.17.21_lodash@4.17.21/node_modules/lodash-unified/import.mjs";
import { Plus as T } from "@element-plus/icons-vue";
import "../../../shared/index.mjs";
import { useVModel as pe } from "../../../node_modules/.pnpm/@vueuse_core@10.11.0_@vue_composition-api@1.7.2_vue@3.4.27_typescript@5.4.5___vue@3.4.27_typescript@5.4.5_/node_modules/@vueuse/core/index.mjs";
import "../../../utils/index.mjs";
import { ElFormItem as fe, ElButton as _, ElDivider as ce, ElCollapse as he, ElCollapseItem as ve, ElMessage as ge, ElForm as k, ElSteps as be, ElStep as Ce } from "element-plus";
import "../../../directives/index.mjs";
import "./hooks/index.mjs";
import { formProps as Ve, formProvideKey as ye, FORM_FILTER_KEYS as W, FORM_ITEM_FILTER_KEYS as Fe } from "./props.mjs";
import w from "./FormColumns.mjs";
import M from "./OperationCard.mjs";
import j from "./FormItem.mjs";
import { useNamespace as Se } from "../../../hooks/useNamespace.mjs";
import { useLocale as Ee } from "../../../hooks/useLocale.mjs";
import { draggable as _e } from "../../../directives/tableDraggable.mjs";
import { useFormItems as Ie } from "./hooks/useFormItems.mjs";
import { useRow as Pe } from "./hooks/useRow.mjs";
import { useFormConfig as Re } from "./hooks/useFormConfig.mjs";
import { useFormMethods as we } from "./hooks/useFormMethods.mjs";
import { useDraggable as De } from "./hooks/useDraggable.mjs";
import { useExpose as $e } from "../../../hooks/useExpose.mjs";
import { isFunction as Z, isString as ke } from "../../../utils/is.mjs";
import { getContentByRenderAndSlot as I } from "../../../shared/getContentByRenderAndSlot.mjs";
import O from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/omit.mjs";
import x from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/cloneDeep.mjs";
function h(a) {
return typeof a == "function" || Object.prototype.toString.call(a) === "[object Object]" && !le(a);
}
const nt = /* @__PURE__ */ ae({
name: "ZForm",
components: {
FormColumns: w,
OperationCard: M,
ZFormItem: j
},
props: Ve,
directives: {
draggable: _e
},
emits: ["input", "update:modelValue", "change", "update:activeCollapse", "collapse-change", "next-step", "previous-step", "update:activeStep", "submit", "update:columns"],
setup(a, {
emit: o,
slots: l
}) {
const {
formatFormItems: s
} = Ie(a), {
rowStyle: z,
rowKls: B
} = Pe(a), {
formConfig: P
} = Re(a), {
resetFields: Y,
validate: q,
validateField: G,
clearValidate: H,
scrollToField: J
} = we(a), {
draggableOptions: Q
} = De(o, s), F = Se("form"), {
t: V
} = Ee(), {
proxy: S
} = ne(), p = pe(a, "activeStep", o);
$e({
resetFields: Y,
validate: q,
validateField: G,
clearValidate: H,
scrollToField: J
}), ie(ye, de(() => ({
...se(a),
size: P.value.size
})));
const v = (i) => {
const {
modelValue: f,
options: y
} = a;
return r(w, {
modelValue: f,
options: y,
columns: i,
formProps: a,
"onUpdate:modelValue": (...g) => {
o("update:modelValue", ...g);
},
onChange: (...g) => {
o("change", ...g);
}
}, l);
}, X = () => {
let i, f, y;
const {
footer: g
} = a;
return Z(g) ? g() : l.footer ? l.footer() : r(fe, null, {
default: () => [r(_, {
disabled: p.value === 0,
onClick: () => {
o("previous-step"), p.value-- <= 0 && (p.value = 0);
}
}, h(i = V("form.previousStep")) ? i : {
default: () => [i]
}), p.value !== s.value.length - 1 && r(_, {
type: "primary",
onClick: () => {
(S == null ? void 0 : S.$refs.formRef).validate((E) => {
E && (o("next-step"), p.value++ >= s.value.length - 1 && (p.value = 0));
});
}
}, h(f = V("form.nextStep")) ? f : {
default: () => [f]
}), p.value === s.value.length - 1 && r(_, {
type: "primary",
onClick: () => {
(S == null ? void 0 : S.$refs.formRef).validate((E) => {
E && o("submit");
});
}
}, h(y = V("common.submit")) ? y : {
default: () => [y]
})]
});
}, ee = () => {
const {
type: i,
contentPosition: f,
borderStyle: y,
activeCollapse: g,
accordion: E,
modelValue: d,
options: A,
finishStatus: te,
processStatus: re,
simple: oe,
max: D,
min: N,
action: b
} = a, U = s.value.some((t) => t.children);
if (Z(l.default)) return l.default();
if (i === "group")
return s.value.map((t) => {
if (t.label && t.children && t.children.length) {
let e;
return r(R, null, [r(ce, {
contentPosition: t.contentPosition || f,
borderStyle: t.borderStyle || y
}, h(e = I(t.label, l)) ? e : {
default: () => [e]
}), v(t.children || [])]);
}
return v([t]);
});
if (i === "collapse") {
let t;
return r(he, {
modelValue: g,
accordion: E,
class: F.b("collapse"),
"onUpdate:modelValue": (e) => {
o("update:activeCollapse", e);
},
onChange: (e) => {
o("collapse-change", e);
}
}, h(t = s.value.map((e) => {
if (e.children) {
const n = ke(e.label) ? e.label : e.key;
return r(ve, {
name: n,
disabled: e.disabled
}, {
default: () => {
var u, m;
return [((u = e.render) == null ? void 0 : u.call(e)) || ((m = l[e.slot || ""]) == null ? void 0 : m.call(l)) || v(e.children || [])];
},
title: () => I(e.label, l)
});
} else return e.slot || e.render ? v([e]) : null;
})) ? t : {
default: () => [t]
});
} else if (i === "array" && !U) {
let t;
const e = [...d];
return r(R, null, [d.map((n, u) => {
const m = O(a, W);
return r(M, {
onAdd: () => {
o("update:modelValue", [...e, {}]);
},
onDelete: () => {
if (d.length === N) {
ge.warning(`${V("form.minNum")}${N}${V("form.minNumUnit")}`);
return;
}
e.splice(u, 1), o("update:modelValue", e);
},
showAdd: d.length !== D && !!b,
showDelete: !!b,
action: b,
contentIndex: u
}, {
default: () => [r(k, $({
labelWidth: P.value.labelWidth,
...m
}, {
model: n,
ref: `arrayForm${u}`
}), {
default: () => [r(w, {
modelValue: n,
options: A,
columns: s.value,
"onUpdate:modelValue": (C) => {
e.splice(u, 1, C), o("update:modelValue", e);
},
onChange: (...C) => {
o("change", ...C);
}
}, l)]
})],
...l
});
}), d.length !== D && b && r(_, {
class: F.be("array", "add"),
onClick: () => {
o("update:modelValue", [...e, {}]);
},
icon: T
}, h(t = V("form.add")) ? t : {
default: () => [t]
})]);
} else {
if (i === "array" && U)
return s.value.map((t) => {
if (t.label && t.children && t.children.length) {
let e;
const n = t.field, u = t.max || D;
return r(j, {
col: t,
class: F.b("array-form-item"),
formConfig: {
...O(t, Fe)
}
}, {
default: () => [r(R, null, [d[n].map((m, C) => {
const K = O(t, W);
return r(M, {
onAdd: () => {
const c = {
...d
};
c[n].push({}), o("update:modelValue", c);
},
onDelete: () => {
const c = x(d);
c[n].splice(C, 1), o("update:modelValue", c);
},
showAdd: d[n].length !== u && !!b,
showDelete: !!b,
action: b,
contentIndex: C
}, {
default: () => [r(k, $({
labelWidth: P.value.labelWidth,
...K,
rules: K.rules
}, {
model: m,
ref: `arrayForm${C}${n}`
}), {
default: () => [r(w, {
modelValue: m,
options: t.options || A,
columns: t.children,
"onUpdate:modelValue": (c) => {
const L = x(d[n]);
L.splice(C, 1, c), o("update:modelValue", {
...d,
[n]: L
});
},
onChange: (...c) => {
o("change", ...c);
}
}, l)]
})],
...l
});
}), d[n].length !== u && b && r(_, {
class: F.be("array", "add"),
onClick: () => {
const m = {
...d
};
m[n].push({}), o("update:modelValue", m);
},
icon: T
}, h(e = V("form.add")) ? e : {
default: () => [e]
})])],
...l
});
}
return v([t]);
});
if (i === "step") {
let t;
return r(R, null, [r(be, {
active: p.value,
finishStatus: te,
processStatus: re,
simple: oe,
class: F.b("steps")
}, h(t = s.value.map((e) => r(Ce, {
status: e.status
}, {
icon: () => I(e.icon, l),
description: () => I(e.description, l),
title: () => I(e.label, l)
}))) ? t : {
default: () => [t]
}), s.value.map((e, n) => n === p.value ? e.label && e.children && e.children.length ? v(e.children || []) : v([e]) : null), X()]);
} else
return v(s.value);
}
};
return () => {
let i;
const {
modelValue: f
} = a;
return ue(r(k, $({
...P.value,
model: f
}, {
ref: "formRef",
class: [B.value, F.b("")],
style: z.value
}), h(i = ee()) ? i : {
default: () => [i]
}), [[me("draggable"), Q]]);
};
}
});
export {
nt as default
};
//# sourceMappingURL=BaseForm.mjs.map