@ithinkdt/ui 4.0.0-38 → 4.0.0-400

package/dist/page.js

@@ -0,0 +1,519 @@
+import { n as useI18n } from "./use-i18n-Dx7V4KrY.js";
+import "./directives-qqYcWl1I.js";
+import "./use-style-DcT-1dj4.js";
+import { a as NRadios, n as DtUserDept, p as DataForm, r as DtUserRender, t as DtDeptRender, v as NCheckboxes } from "./components-B_qzc9ro.js";
+import { computed, createVNode, defineComponent, h, isVNode, mergeProps, ref, shallowRef, unref } from "vue";
+import { until } from "@vueuse/core";
+import { NButton, NCheckbox, NColorPicker, NDatePicker, NDrawer, NDrawerContent, NFlex, NInput, NInputNumber, NModal, NScrollbar, NSelect, NText, NUpload, useMessage } from "ithinkdt-ui";
+import { format } from "date-fns";
+import { useFormItem } from "ithinkdt-ui/es/_mixins";
+import { useDict, useDictMap } from "@ithinkdt/common/dict";
+function _isSlot(n) {
+	return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !isVNode(n);
+}
+var mapProps = (n) => Object.fromEntries(Object.entries(n || {}).map(([n, c]) => [n, unref(c)])), SimpleUpload = /* @__PURE__ */ defineComponent({
+	name: "SimpleUpload",
+	props: {
+		type: {
+			type: String,
+			default: "file"
+		},
+		size: {
+			type: String,
+			default: "medium"
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		max: {
+			type: Number,
+			default: void 0
+		},
+		accept: {
+			type: String,
+			default: void 0
+		},
+		maxSize: {
+			type: Number,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		fileList: {
+			type: Array,
+			default: () => []
+		},
+		onUpdateFileList: { type: [Array, Function] },
+		uploadFile: { type: Function }
+	},
+	setup(c, { slots: l, expose: u }) {
+		let { t: d } = useI18n();
+		SimpleUpload.t = d;
+		let f = useFormItem(c), p = useMessage(), g = computed(() => c.customRequest || (({ file: n, onProgress: l, onFinish: u, onError: d }) => {
+			c.uploadFile(n.file, (n) => l({ percent: n })).then((c) => {
+				n.file.fileId = c, u();
+			}).catch((n) => {
+				p.error(n.message), d(n);
+			});
+		})), _ = ref();
+		u({ submit() {
+			return until(_).toBeTruthy().then((n) => n.submit());
+		} });
+		let v = (n) => {
+			c.onUpdateFileList?.(n), nextTick(() => f.nTriggerFormChange());
+		};
+		return () => {
+			let { type: n, onUpdateFileList: u, ...p } = c;
+			return createVNode(NUpload, mergeProps(p, {
+				ref: _,
+				customRequest: g.value,
+				listType: n === "image" ? "image-card" : "text",
+				accept: p.accept ?? n === "image" ? "image/*" : void 0,
+				"onUpdate:fileList": v
+			}), {
+				default: n === "image" ? void 0 : () => {
+					let n;
+					return createVNode(NButton, {
+						disabled: f.mergedDisabledRef.value,
+						size: f.mergedSizeRef.value
+					}, _isSlot(n = d("common.page.form.selectFileText")) ? n : { default: () => [n] });
+				},
+				...l
+			});
+		};
+	}
+});
+function createPageFormHelper({ getUserGroups: n, getUsersByGroup: u, getDeptsByCode: f, getUsersByDept: m, getUsersByUsername: g, uploadFile: v, getFileInfos: y }) {
+	return {
+		input: () => ({ slots: n, props: c }, { modelValue: l, "onUpdate:modelValue": u, required: d, readonly: f, ...p }) => f ? createVNode(NText, {
+			depth: 2,
+			style: "line-height: 1.25"
+		}, { default: () => [l ?? ""] }) : (c = mapProps(c), h(NInput, {
+			clearable: !0,
+			...c,
+			...p,
+			value: l,
+			"onUpdate:value": u
+		}, n)),
+		number: () => ({ slots: n, props: c }, { modelValue: l, "onUpdate:modelValue": u, required: d, readonly: f, ...p }) => f ? createVNode(NText, {
+			depth: 2,
+			style: "line-height: 1.25"
+		}, { default: () => [l ?? ""] }) : (c = mapProps(c), h(NInputNumber, {
+			clearable: !0,
+			...c,
+			...p,
+			value: l,
+			"onUpdate:value": u
+		}, n)),
+		select: () => {
+			let n, c;
+			return ({ slots: l, props: u }, { modelValue: d, "onUpdate:modelValue": f, required: p, readonly: m, ...g }) => {
+				let { dictType: v, options: y, ...b } = mapProps(u);
+				if (y ? c = y : n !== v && (n = v, !c && n && (c = useDict(n))), m) if (b.multiple) {
+					let n;
+					return createVNode(NText, {
+						depth: 2,
+						style: "line-height: 1.25"
+					}, _isSlot(n = (d?.map((n) => c?.find((c) => c[b.valueField || "value"] === n)) ?? []).map((n, c, l) => {
+						let u = n ? b.renderLabel ? b.renderLabel(n) ?? "" : n[b.labelField || "label"] ?? "" : d[c] ?? "";
+						return createVNode("span", { key: n ? n[b.valueField || "value"] : d[c] ?? "" }, [u, c < l.length - 1 ? ", " : ""]);
+					})) ? n : { default: () => [n] });
+				} else {
+					let n = c?.find((n) => n[b.valueField || "value"] === d);
+					return createVNode(NText, {
+						depth: 2,
+						style: "line-height: 1.25"
+					}, { default: () => [n ? b.renderLabel ? b.renderLabel(n) ?? "" : n[b.labelField || "label"] ?? "" : d ?? ""] });
+				}
+				return h(NSelect, {
+					clearable: !0,
+					loading: c?.loading,
+					...b,
+					options: unref(c),
+					...g,
+					value: d,
+					"onUpdate:value": f
+				}, l);
+			};
+		},
+		checkbox: () => ({ slots: n, props: c }, { modelValue: l, "onUpdate:modelValue": u, required: d, readonly: f, ...p }) => {
+			if (c = mapProps(c), f) {
+				let u;
+				return u = l === (c.checkedValue ?? !0) ? n?.checked ? n.checked() : createVNode(NCheckbox, { checked: !0 }, null) : n?.unchecked ? n.unchecked() : createVNode(NCheckbox, { disabled: !0 }, null), createVNode(NText, {
+					depth: 2,
+					style: "line-height: 1.25"
+				}, _isSlot(u) ? u : { default: () => [u] });
+			}
+			return h(NCheckbox, {
+				...c,
+				...p,
+				checked: l,
+				"onUpdate:checked": u
+			}, n);
+		},
+		checkboxes: () => {
+			let n, c;
+			return ({ props: l }, { modelValue: u, required: d, readonly: f, ...m }) => {
+				let { dictType: g, options: v, ...y } = mapProps(l);
+				if (v ? c = v : n !== g && (n = g, !c && n && (c = useDict(n))), f) {
+					let n;
+					return createVNode(NText, {
+						depth: 2,
+						style: "line-height: 2.4"
+					}, _isSlot(n = (u?.map((n) => c?.find((c) => c[y.valueField || "value"] === n)) ?? []).map((n, c, l) => {
+						let d = n ? n[y.labelField ?? "label"] ?? "" : u[c] ?? "";
+						return createVNode("span", { key: n ? n[y.valueField ?? "value"] : u[c] ?? "" }, [d, c < l.length - 1 ? ", " : ""]);
+					})) ? n : { default: () => [n] });
+				}
+				return h(NCheckboxes, {
+					...y,
+					...m,
+					options: c,
+					modelValue: u
+				});
+			};
+		},
+		radios: () => {
+			let n, l;
+			return ({ props: u }, { modelValue: d, required: f, readonly: p, ...m }) => {
+				let { dictType: g, options: v, ...y } = mapProps(u);
+				if (v ? l = v : n !== g && (n = g, !l && n && (l = useDict(n))), p) {
+					let n = l?.find((n) => n[y.valueField ?? "value"] === d);
+					return createVNode(NText, {
+						depth: 2,
+						style: "line-height: 1.25"
+					}, { default: () => [n ? n[y.labelField ?? "label"] ?? "" : d ?? ""] });
+				}
+				return h(NRadios, {
+					...y,
+					...m,
+					options: l,
+					modelValue: d
+				});
+			};
+		},
+		datepicker: () => ({ slots: n, props: c }, { modelValue: l, "onUpdate:modelValue": u, required: d, readonly: f, ...p }) => {
+			let { type: m = "date", format: g = m.startsWith("datetime") ? "yyyy-MM-dd HH:mm:ss" : "yyyy-MM-dd", ...v } = mapProps(c);
+			return f ? m.endsWith("range") ? createVNode(NText, {
+				depth: 2,
+				style: "line-height: 1.25"
+			}, { default: () => [l ? `${l[0] ? format(l[0], g) : ""} ~ ${l[1] ? format(l[1], g) : ""}` : ""] }) : createVNode(NText, {
+				depth: 2,
+				style: "line-height: 1.25"
+			}, { default: () => [l ? format(l, g) : ""] }) : h(NDatePicker, {
+				clearable: !0,
+				...v,
+				...p,
+				type: m,
+				format: g,
+				value: l,
+				"onUpdate:value": u
+			}, n);
+		},
+		file: () => ({ slots: n, props: c }, { modelValue: l, "onUpdate:modelValue": u, required: d, readonly: f, ...p }) => {
+			if (c = mapProps(c), f) {
+				let n;
+				return console.warn("[file] 原则上此组建不应该显示在详情中"), fileList.value.length === 0 ? void 0 : createVNode(NFlex, {
+					gap: "8",
+					vertical: !0
+				}, _isSlot(n = l.map((n) => createVNode("a", {
+					key: n.id,
+					href: n.url,
+					target: "_blank",
+					rel: "noreferrer",
+					style: "max-width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
+				}, [n.name]))) ? n : { default: () => [n] });
+			}
+			return h(SimpleUpload, {
+				...c,
+				...p,
+				defaultUpload: !1,
+				uploadFile: v,
+				fileList: l,
+				onUpdateFileList: u
+			}, n);
+		},
+		upload: () => {
+			let n = null, c = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map(), u = shallowRef([]), d = 0, f = (n) => {
+				let c = ++d;
+				u.value = n.map((n) => l.get(n)).filter(Boolean);
+				let f = n.filter((n) => !l.has(n));
+				Promise.resolve(f.length > 0 ? y(f) : []).then((f) => {
+					if (c === d) {
+						u.value = n.map((n) => l.get(n) || f.find((c) => c.id === n)), l.clear();
+						for (let n of u.value) l.set(n.id, n);
+					}
+				});
+			}, p;
+			return {
+				renderer: ({ slots: d, props: m }, { modelValue: g, "onUpdate:modelValue": y, required: b, readonly: S, ...C }) => {
+					let w = mapProps(m);
+					if (p = w.ref ??= shallowRef(), n !== g && (n = g, f(g?.split(",") ?? [])), S) {
+						let n;
+						return u.value.length === 0 ? void 0 : createVNode(NFlex, {
+							gap: "8",
+							vertical: !0,
+							style: "padding: 6px 0"
+						}, _isSlot(n = u.value.map((n) => createVNode("a", {
+							key: n.id,
+							href: n.url,
+							target: "_blank",
+							rel: "noreferrer",
+							title: n.name,
+							download: n.name,
+							style: "max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
+						}, [n.name]))) ? n : { default: () => [n] });
+					}
+					return h(SimpleUpload, {
+						...w,
+						...C,
+						uploadFile: v,
+						fileList: u.value,
+						onUpdateFileList: (n = []) => {
+							l.clear();
+							for (let u of n) u.file?.fileId && c.set(u.id, u.file.fileId), u.file?.fileId ? l.set(u.file.fileId, u) : l.set(u.id, u);
+							u.value = n, y(u.value.map((n) => c.get(n.id) || n.id).join(",") || null);
+						}
+					}, d);
+				},
+				beforeSubmit: async () => {
+					if (await p?.value?.submit(), await until(u).toMatch((n) => n.every((n) => !["pending", "uploading"].includes(n.status))), u.value.some((n) => n.status === "error")) return SimpleUpload.t("common.page.form.validate.fileErrorMessage");
+				}
+			};
+		},
+		user: () => {
+			let c, p, v;
+			return ({ slots: y, props: b }, { modelValue: S, "onUpdate:modelValue": C, required: w, readonly: T, ...E }) => {
+				let D = mapProps(b);
+				return c || (c = shallowRef([]), p = shallowRef([]), v = shallowRef([]), g().then((n) => {
+					c.value = n;
+				}), n().then((n) => {
+					p.value = n;
+				}), f().then((n) => {
+					v.value = n;
+				})), T ? createVNode(DtUserRender, {
+					value: S,
+					multiple: D.multiple,
+					getUsersByUsername: g
+				}, null) : h(DtUserDept, {
+					type: "user",
+					users: c.value,
+					depts: v.value,
+					groups: p.value,
+					getUsersByDept: m,
+					getUsersByGroup: u,
+					...D,
+					...E,
+					modelValue: S,
+					"onUpdate:modelValue": C
+				}, y);
+			};
+		}
+	};
+}
+function createPageTableHelper({ getDeptsByCode: n, getUsersByUsername: c, getFileInfos: l, previewFileUrl: u }) {
+	let p = (n) => () => (c, l, u, d) => {
+		if (c != null) return format(c, d.formatter ?? n);
+	}, m = (n = {}) => createVNode("svg", mergeProps({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 32 32"
+	}, n), [createVNode("circle", {
+		cx: "16",
+		cy: "16",
+		r: "8",
+		fill: "currentColor"
+	}, null)]);
+	return {
+		date: p("yyyy-MM-dd"),
+		datetime: p("yyyy-MM-dd HH:mm:ss"),
+		dict: () => {
+			let n, c, l;
+			return (u, d, f, p) => {
+				if (u == null) return;
+				let { dictType: g, options: _, multiple: v, statusMap: y } = mapProps(p);
+				if (_ ? c !== _ && (c = _, l = new Map(_.map((n) => [n[p.valueField || "value"], n]))) : n !== g && (n = g, !l && n && (l = useDictMap(n))), !v) {
+					if (u = u.toString(), y && u in y) {
+						let n = y[u] ?? "default";
+						return [
+							"primary",
+							"success",
+							"warning",
+							"danger"
+						].includes(n) && (n = `var(--color-${n})`), createVNode("span", { style: "position: relative; padding-left: 1.25em" }, [createVNode(m, { style: `color: ${n}; position: absolute;left: 0; top: 1.5px` }, null), createVNode("span", null, [l.get(u?.toString())?.[p.labelField || "label"] ?? ""])]);
+					}
+					return l.get(u)?.[p.labelField || "label"] ?? "";
+				}
+				return u?.map((n) => l.get(n.toString())?.[p.labelField || "label"]) ?? "";
+			};
+		},
+		number: () => (n, c, l, u) => {
+			if (n != null) {
+				switch (u.percent && (n = Number(n) * 100), "number") {
+					case typeof u.fixed:
+						n = n.toFixed(u.fixed);
+						break;
+					case typeof u.round:
+						n = n.toFixed(u.round).replace(/0+$/, "");
+						break;
+					case typeof u.precision:
+						n = n.toPrecision(u.precision);
+						break;
+				}
+				return u?.separator ? Number(n).toLocaleString() : n;
+			}
+		},
+		email: () => (n) => createVNode("a", { href: `mailto:${n}` }, [n]),
+		url: () => (n) => createVNode("a", { href: n }, [n]),
+		color: () => (n) => createVNode(NColorPicker, {
+			value: n,
+			disabled: !0,
+			size: "small"
+		}, null),
+		image: () => (n, c, l, d) => {
+			let f;
+			return n ? createVNode(NFlex, {
+				gap: "8",
+				wrap: !0
+			}, _isSlot(f = (Array.isArray(n) ? n : d?.multiple ? n.split(",") : [n]).map((n) => u(n)).map((n) => createVNode("img", {
+				key: n,
+				src: n,
+				style: "max-height: 32px; max-width: 100px; object-fit: contain"
+			}, null))) ? f : { default: () => [f] }) : void 0;
+		},
+		file: () => {
+			let n = nanoid();
+			return (c, u, d, f) => {
+				let p;
+				return c ? (u.__file_urls ??= {}, u.__file_urls[n] || l(Array.isArray(c) ? c : f?.multiple ? c.split(",") : [c]).then((c) => {
+					u.__file_urls[n] = c;
+				}), createVNode(NFlex, {
+					gap: "8",
+					wrap: !0
+				}, _isSlot(p = (u.__file_urls[n] || []).map((n) => createVNode("a", {
+					key: n.id,
+					href: n.url,
+					target: "_blank",
+					rel: "noreferrer",
+					style: "max-width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
+				}, [n.name]))) ? p : { default: () => [p] })) : void 0;
+			};
+		},
+		dept: () => (c, l, u, d) => {
+			if (c) return createVNode(DtDeptRender, {
+				value: c,
+				multiple: d?.multiple,
+				getDeptsByCode: n
+			}, null);
+		},
+		user: () => (n, l, u, f) => {
+			if (n) return createVNode(DtUserRender, {
+				value: n,
+				multiple: f?.multiple,
+				getUsersByUsername: c
+			}, null);
+		}
+	};
+}
+function createFormHelper() {
+	return () => ({ items: n, model: c, handleSubmit: l, reset: d, validation: f, readonly: p, inModal: m, showFeedback: g, showColon: _, labelWidth: v, labelAlign: y, labelPlacement: b, showRequireMark: x, requireMarkPlacement: C }) => createVNode(DataForm, {
+		readonly: p,
+		model: c,
+		items: n,
+		validation: f,
+		showColon: unref(_) ?? !0,
+		labelWidth: unref(v),
+		labelAlign: unref(y),
+		labelPlacement: unref(b),
+		showRequireMark: unref(x),
+		requireMarkPlacement: unref(C),
+		showFeedback: unref(g) ?? !0,
+		showAction: !1,
+		onSubmit: l,
+		onRest: d,
+		style: m ? "padding-right: 2rem; padding-top: 1rem" : void 0
+	}, null);
+}
+function createModalHelper() {
+	let n = (n) => typeof n == "number" ? `${n}px` : n, c = {
+		maxHeight: "calc(100vh - 130px)",
+		display: "flex",
+		flexDirection: "column"
+	}, l = { content: !0 };
+	return () => ({ type: u = "dialog", visible: d, title: f, content: p, footer: m, placement: g, resizable: _, draggable: v, closeOnEsc: b, closable: x, showMask: S, maskClosable: C, width: T, height: E, style: D, onClose: O, onCancel: k, onConfirm: A, onAfterClose: j, onAfterOpen: M, confirmText: N, confirmDisabled: P, confirmLoading: F, cancelText: I, cancelDisabled: L, cancelLoading: R, nativeScrollbar: z, ...B }) => {
+		let V = m ? () => m : m === null ? null : () => createVNode(NFlex, {
+			justify: "end",
+			gap: "16"
+		}, { default: () => [I === null ? void 0 : createVNode(NButton, {
+			onClick: k,
+			disabled: L,
+			loading: R,
+			style: "min-width: 60px"
+		}, _isSlot(I) ? I : { default: () => [I] }), N === null ? void 0 : createVNode(NButton, {
+			type: "primary",
+			onClick: A,
+			disabled: P,
+			loading: F,
+			style: "min-width: 60px"
+		}, _isSlot(N) ? N : { default: () => [N] })] });
+		if (u === "dialog") {
+			let { style: u } = mergeProps({ style: {
+				width: n(T ?? 520),
+				height: n(E)
+			} }, { style: D });
+			return createVNode(NModal, mergeProps({
+				show: d,
+				preset: "card",
+				title: () => f,
+				maskClosable: C ?? !1,
+				closeOnEsc: b,
+				closable: x,
+				onClose: O,
+				segmented: l,
+				size: "small",
+				onAfterEnter: M,
+				onAfterLeave: j,
+				onUpdateShow: O,
+				draggable: v ?? !0,
+				style: u,
+				contentStyle: c
+			}, B), {
+				default: () => createVNode(NScrollbar, {
+					abstract: !0,
+					style: "display: flex; flex-direction: column"
+				}, _isSlot(p) ? p : { default: () => [p] }),
+				action: V
+			});
+		}
+		let { bodyContentClass: H, bodyContentStyle: U, ...W } = B;
+		return createVNode(NDrawer, mergeProps({
+			show: d,
+			trapFocus: !1,
+			closeOnEsc: b,
+			showMask: S,
+			maskClosable: C,
+			resizable: _,
+			placement: g,
+			width: T ?? 440,
+			height: E,
+			onUpdateShow: O,
+			onAfterEnter: M,
+			onAfterLeave: j,
+			style: D
+		}, W), { default: () => [createVNode(NDrawerContent, {
+			closable: x,
+			nativeScrollbar: z ?? !1,
+			bodyContentClass: H,
+			bodyContentStyle: U
+		}, {
+			default: () => p,
+			header: () => f,
+			footer: V
+		})] });
+	};
+}
+export { createFormHelper, createModalHelper, createPageFormHelper, createPageTableHelper };

package/dist/use-i18n-Dx7V4KrY.js

@@ -0,0 +1,6 @@
+import { inject } from "vue";
+const UI_I18N_INJECTION = "__UI_I18N__";
+function useI18n() {
+	return inject(UI_I18N_INJECTION).value();
+}
+export { useI18n as n, UI_I18N_INJECTION as t };

package/dist/use-style-DcT-1dj4.js

@@ -0,0 +1,29 @@
+import { useMergedClsPrefix } from "ithinkdt-ui/es/_mixins/use-config";
+import _useStyle from "ithinkdt-ui/es/_mixins/use-style";
+import { c, cB, cE, cM } from "ithinkdt-ui/es/_utils/cssr/index";
+function useStyle(m, h, g, _) {
+	return g ??= useMergedClsPrefix(), _useStyle(m, h, g, _), g;
+}
+const fullWidth = { width: "100%" }, fullHeight = { height: "100%" }, fullWH = {
+	...fullWidth,
+	...fullHeight
+}, flex = { display: "flex" }, flexDirCol = {
+	...flex,
+	flexDirection: "column"
+}, flexAlignCenter = {
+	...flex,
+	alignItems: "center"
+}, flexJustifyCenter = {
+	...flex,
+	justifyContent: "center"
+}, flexJustifySB = {
+	...flex,
+	justifyContent: "space-between"
+}, flexCenter = {
+	...flexAlignCenter,
+	...flexJustifyCenter
+}, flexGap = (e) => ({
+	...flex,
+	gap: e
+});
+export { flex as a, flexDirCol as c, flexJustifySB as d, fullHeight as f, useStyle as g, useMergedClsPrefix as h, cM as i, flexGap as l, fullWidth as m, cB as n, flexAlignCenter as o, fullWH as p, cE as r, flexCenter as s, c as t, flexJustifyCenter as u };

package/dist/use-style.js

@@ -0,0 +1,2 @@
+import { a as flex, c as flexDirCol, d as flexJustifySB, f as fullHeight, g as useStyle, h as useMergedClsPrefix, i as cM, l as flexGap, m as fullWidth, n as cB, o as flexAlignCenter, p as fullWH, r as cE, s as flexCenter, t as c, u as flexJustifyCenter } from "./use-style-DcT-1dj4.js";
+export { c, cB, cE, cM, useStyle as default, flex, flexAlignCenter, flexCenter, flexDirCol, flexGap, flexJustifyCenter, flexJustifySB, fullHeight, fullWH, fullWidth, useMergedClsPrefix as useClsPrefix };

package/{src → esm}/components.d.ts

@@ -1,5 +1,5 @@
 import {
-    CheckboxGroupProps, DataTableInst as NDataTableInst, DataTableProps as NDataTableProps,
+    CheckboxGroupProps, DataTableInst as NDataTableInst, DataTableProps as NDataTableProps, FlexProps,
     FormItemGiProps as NFormItemGiProps, FormProps as NFormProps, GridItemProps as NGridItemProps, GridProps as NGridProps,
     PopoverProps,
     RadioGroupProps, TransferProps,
@@ -16,6 +16,12 @@ declare module '@ithinkdt/page' {
 
     interface FormRenderExtraOptions {
         showColon?: MaybeRef<boolean | undefined>
+        labelWidth?: MaybeRef<string | number | undefined>
+        labelAlign?: MaybeRef<'left' | 'right' | 'center' | undefined>
+        labelPlacement?: MaybeRef<'left' | 'top' | undefined>
+        showRequireMark?: MaybeRef<boolean | undefined>
+        requireMarkPlacement?: MaybeRef<'left' | 'right' | 'right-hanging' | undefined>
+        showFeedback?: MaybeRef<boolean | undefined>
     }
 
     type FormItemOptionKeys = 'size' | 'showLabel' | 'labelWidth' | 'labelStyle' | 'labelAlign' | 'labelPlacement' | 'labelProps'
@@ -48,16 +54,9 @@ declare module '@ithinkdt/page' {
 
 }
 
-export type DataFormProps<Data extends {}> = Omit<NFormProps, 'model' | 'rules' | 'onSubmit' | 'validateMessages'> & {
-    items: FormItem<Data>[]
-    model: Data
-    readonly?: boolean | undefined
-    grid?: boolean | NGridProps | undefined
-    validation?: { [k in keyof Data]?: ValidationResults } | undefined
-    showColon?: boolean | undefined
-    loading?: boolean | undefined
-    showAction?: boolean | NGridItemProps & AllowedComponentProps | undefined
-    actionAlign?: 'start' | 'center' | 'end'
+export type DataFormActionsProps = Pick<FlexProps, 'align' | 'justify' | 'vertical' | 'reverse'> & {
+    size?: 'small' | 'medium' | 'large' | undefined
+    gap?: number | string | undefined
     submitText?: VNodeChild | undefined
     resetText?: VNodeChild | undefined
     cancelText?: VNodeChild | undefined
@@ -65,21 +64,61 @@ export type DataFormProps<Data extends {}> = Omit<NFormProps, 'model' | 'rules'
     showResetBtn?: boolean | undefined
     showCancelBtn?: boolean | undefined
     submitDisabled?: boolean | undefined
+    submitLoading?: boolean | undefined
     succeeded?: boolean | undefined
     successText?: VNodeChild | undefined
-
-    tooltipPlacement?: 'bottom' | 'icon' | undefined
-    onSubmit?: MaybeArray<(model: Data) => void> | undefined
+    failureText?: VNodeChild | undefined
+    onSubmit?: MaybeArray<() => void> | undefined
     onRest?: MaybeArray<() => void> | undefined
+    onCancel?: MaybeArray<() => void> | undefined
+    nativeButtonType?: boolean | undefined
+}
+
+export type DataFormActionsEmits = {
+    (e: 'submit'): void
+    (e: 'reset'): void
+    (e: 'cancel'): void
+}
+
+export type DataFormActionsSlots = {
+    prefix?: () => VNodeChild
+    suffix?: () => VNodeChild
 }
 
+export declare function DataFormActions(
+    props: DataFormActionsProps & PublicProps,
+    ctx?: Pick<GenericCtx<DataFormActionsProps, DataFormActionsEmits, DataFormActionsSlots>, 'attrs' | 'emit' | 'slots'>,
+    expose?: (exposed?: GenericExposed) => void,
+    setup?: GenericCtx<DataFormActionsProps, DataFormActionsEmits, DataFormActionsSlots>,
+): GenericReturn<DataFormActionsProps, DataFormActionsEmits, DataFormActionsSlots>
+
+export type DataFormProps<Data extends {}> = Omit<NFormProps, 'model' | 'rules' | 'onSubmit' | 'validateMessages'>
+    & Omit<DataFormActionsProps, 'onSubmit' | 'size' | 'gap' | 'justify' | 'direction' | 'submitloading'> & {
+        items: FormItem<Data>[]
+        model: Data
+        readonly?: boolean | undefined
+        grid?: boolean | NGridProps | undefined
+        validation?: { [k in keyof Data]?: ValidationResults } | undefined
+        showColon?: boolean | undefined
+        tooltipPlacement?: 'bottom' | 'icon' | undefined
+        loading?: boolean | undefined
+        showAction?: boolean | NGridItemProps & AllowedComponentProps | undefined
+        actionJustify?: DataFormActionsProps['justify']
+        actionAlign?: DataFormActionsProps['align']
+        actionGap?: DataFormActionsProps['gap']
+        onSubmit?: MaybeArray<(model: Data) => void> | undefined
+    }
+
 export type DataFormEmits<Data extends {}> = {
     (e: 'submit', model: Data): void
     (e: 'reset'): void
+    (e: 'cancel'): void
 }
 
 export type DataFormSlots<_Data extends {}> = {
     action?: (params: { cols: number, spans: number, overflow: boolean }) => VNodeChild
+    actionPrefix?: () => VNodeChild
+    actionSuffix?: () => VNodeChild
 }
 
 export type DataFormInst = {
@@ -367,6 +406,7 @@ export interface UserGroupOption {
     name: string
 }
 export interface DeptOption {
+    id?: string | undefined
     code: string
     name: string
     children?: DeptOption[]
@@ -382,7 +422,8 @@ interface UserDeptProps<Multiple extends boolean> {
     'filterable'?: boolean | undefined
     'disabled'?: boolean | undefined
     'size'?: TransferProps['size'] | undefined
-    'users'?: { username: string, nickname: string }[] | undefined
+    'valueField'?: 'id' | 'username' | 'code' | undefined
+    'users'?: { id?: string | undefined, username: string, nickname: string }[] | undefined
     'groups'?: UserGroupOption[] | undefined
     'depts'?: DeptOption[] | undefined
     'getUsersByGroup'?: ((code: string) => Promise<{ username: string, nickname: string }[]>) | undefined

package/esm/components.js

@@ -0,0 +1 @@
+export * from '../dist/components.js'

package/esm/directives.js

@@ -0,0 +1 @@
+export * from '../dist/directives.js'

package/esm/index.js

@@ -0,0 +1 @@
+export * from '../dist/index.js'