@ithinkdt/ui 4.0.9 → 4.0.11

package/dist/{DataTable-DEb9CRCZ.js → DataTable-C5hx-Wo8.js}

@@ -1,5 +1,5 @@
 import e, { c as t, cB as n, cE as r, cM as i, useClsPrefix as a } from "./use-style.js";
-import { i as o } from "./directives-pwYPe_53.js";
+import { i as o } from "./directives-g3YmS-dM.js";
 import { l as s } from "./assets-bJgPKDh1.js";
 import { computed as c, createVNode as l, defineComponent as u, inject as d, isVNode as f, ref as p, shallowRef as m, toValue as h, useTemplateRef as g, watch as _, withDirectives as v } from "vue";
 import { toReactive as y, until as b } from "@vueuse/core";

package/dist/components.js

@@ -1,6 +1,6 @@
 import { n as e } from "./use-i18n-D1TTDOML.js";
 import t, { cB as n, cE as r, useClsPrefix as i } from "./use-style.js";
-import { i as a } from "./directives-pwYPe_53.js";
+import { i as a } from "./directives-g3YmS-dM.js";
 import { _ as o, a as s, c, d as l, f as u, g as d, h as f, i as p, l as m, m as h, n as g, o as _, p as v, r as y, s as b, t as x, u as S, v as C } from "./assets-bJgPKDh1.js";
 import { Fragment as w, computed as T, createTextVNode as E, createVNode as D, defineAsyncComponent as O, defineComponent as k, h as A, inject as ee, isVNode as j, markRaw as M, mergeProps as N, nextTick as te, reactive as P, ref as F, renderSlot as I, shallowRef as ne, toRaw as re, toRef as ie, toValue as L, unref as ae, watch as R, withDirectives as oe } from "vue";
 import { until as se } from "@vueuse/core";
@@ -1616,6 +1616,6 @@ var ht = /* @__PURE__ */ k({
 			});
 		};
 	}
-}), yt = O(() => import("./DataTable-DEb9CRCZ.js").then((e) => e.DataTable));
+}), yt = O(() => import("./DataTable-C5hx-Wo8.js").then((e) => e.DataTable));
 //#endregion
 export { Je as DataActions, Xe as DataCustom, tt as DataDescriptions, ot as DataFilter, at as DataForm, rt as DataFormActions, lt as DataLocaleInput, X as DataPagination, dt as DataSelection, yt as DataTable, ht as DtDeptRender, mt as DtUserDept, gt as DtUserRender, qe as NCheckboxes, pt as NRadios, vt as NStateButton, _t as StateButtonProps, Y as dataFormActionsProps, $ as renderUsers, ct as useLocaleEdit };

package/dist/{directives-pwYPe_53.js → directives-g3YmS-dM.js}

@@ -12,7 +12,11 @@ var C = [
 	3,
 	5
 ], w = /* @__PURE__ */ t([
-	t(({ props: e }) => `:where(span${e.bPrefix}tooltip-host)`, { display: "inline-block" }),
+	...[
+		"span",
+		"a",
+		"img"
+	].map((e) => t(({ props: t }) => `:where(${e}${t.bPrefix}tooltip-host)`, { display: "inline-block" })),
 	t(({ props: e }) => `:where(${e.bPrefix}tooltip-host)`, {
 		maxWidth: "100%",
 		whiteSpace: "nowrap",

package/dist/directives.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "./directives-pwYPe_53.js";
+import { i as e, n as t, r as n, t as r } from "./directives-g3YmS-dM.js";
 export { r as SpinDirectiveProvider, n as TooltipDirectiveProvider, t as vSpin, e as vTooltip };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { n as e, t } from "./use-i18n-D1TTDOML.js";
 import n, { c as r, cB as i, cE as a, cM as o } from "./use-style.js";
-import { i as s, n as c, r as l, t as u } from "./directives-pwYPe_53.js";
+import { i as s, n as c, r as l, t as u } from "./directives-g3YmS-dM.js";
 import { Fragment as d, computed as f, createVNode as p, defineComponent as m, inject as h, isVNode as g, mergeProps as _, provide as v, reactive as y, ref as b, renderSlot as x, shallowRef as ee, toRef as S, toValue as C, unref as w, useTemplateRef as T, watch as E, withDirectives as D } from "vue";
 import { computedAsync as te, promiseTimeout as O, useElementHover as k, useElementSize as ne, useEventListener as re, useFullscreen as ie, watchDebounced as ae } from "@vueuse/core";
 import { NAvatar as A, NBadge as oe, NBreadcrumb as se, NBreadcrumbItem as ce, NButton as j, NDrawer as le, NDrawerContent as M, NDropdown as N, NEmpty as P, NIcon as F, NList as I, NListItem as L, NMenu as R, NPagination as z, NPopover as B, NScrollbar as V, NText as H, NThing as U, useThemeVars as W } from "ithinkdt-ui";
@@ -169,7 +169,7 @@ var ge = /* @__PURE__ */ m({
 			{ bottom: !0 }
 		]]);
 	}
-}), q = "APP_SIDER_COLLAPSED", J = () => p("svg", {
+}), q = "APP_SIDEBAR_COLLAPSED", J = () => p("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	"xmlns:xlink": "http://www.w3.org/1999/xlink",
 	role: "img",
@@ -291,7 +291,7 @@ var ye = /* @__PURE__ */ m({
 }), Se = /* @__PURE__ */ r([
 	i("layout", {
 		display: "grid",
-		gridTemplateAreas: "\n                'sider header'\n                'sider content'\n                'sider footer'\n            ",
+		gridTemplateAreas: "\n                'sidebar header'\n                'sidebar content'\n                'sidebar footer'\n            ",
 		gridTemplateRows: "auto 1fr auto",
 		gridTemplateColumns: "auto 1fr",
 		position: "relative",
@@ -299,10 +299,10 @@ var ye = /* @__PURE__ */ m({
 		left: "0",
 		transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
 		"--app-content-height": "calc(100vh - var(--app-header-height) - var(--app-footer-height))"
-	}, [o("full-header", { gridTemplateAreas: "\n                    'header header'\n                    'sider  content'\n                    'sider  footer'\n                " }), o("full-content", {
-		width: "calc(100% + var(--app-sider-width))",
+	}, [o("full-header", { gridTemplateAreas: "\n                    'header header'\n                    'sidebar  content'\n                    'sidebar  footer'\n                " }), o("full-content", {
+		width: "calc(100% + var(--app-sidebar-width))",
 		height: "calc(100% + var(--app-header-height))",
-		left: "calc(-1 * var(--app-sider-width))",
+		left: "calc(-1 * var(--app-sidebar-width))",
 		top: "calc(-1 * var(--app-header-height))"
 	})]),
 	i("header", {
@@ -311,9 +311,9 @@ var ye = /* @__PURE__ */ m({
 		zIndex: 2,
 		height: "var(--app-header-height, 44px)"
 	}),
-	i("sider", {
-		gridArea: "sider",
-		width: "var(--app-sider-width, 220px)",
+	i("sidebar", {
+		gridArea: "sidebar",
+		width: "var(--app-sidebar-width, 220px)",
 		display: "flex",
 		flexDirection: "column",
 		overflow: "auto",
@@ -377,7 +377,7 @@ var ye = /* @__PURE__ */ m({
 	setup(e, { slots: t }) {
 		n("-layout", Se, b("app"), !1);
 		let r = y({
-			siderWidth: "0px",
+			sidebarWidth: "0px",
 			headerHeight: "0px",
 			footerHeight: "0px",
 			hasMultiTab: !1
@@ -391,7 +391,7 @@ var ye = /* @__PURE__ */ m({
 					"app-layout--full-content": e.fullContent
 				},
 				style: {
-					"--app-sider-width": r.siderWidth,
+					"--app-sidebar-width": r.sidebarWidth,
 					"--app-header-height": r.headerHeight,
 					"--app-footer-height": r.footerHeight
 				}
@@ -429,13 +429,13 @@ var ye = /* @__PURE__ */ m({
 	setup(t, { emit: n, slots: r }) {
 		v(q, S(t, "collapsed"));
 		let { t: i } = e(), a = X();
-		return () => (a.siderWidth = (t.collapsed ? t.collapsedWidth : t.width) + "px", p("div", { class: "app-sider" }, [x(r, "default"), t.showCollapseBtn ? D(p(j, {
-			class: "app-sider__collapse-btn",
+		return () => (a.sidebarWidth = (t.collapsed ? t.collapsedWidth : t.width) + "px", p("div", { class: "app-sidebar" }, [x(r, "default"), t.showCollapseBtn ? D(p(j, {
+			class: "app-sidebar__collapse-btn",
 			quaternary: !0,
 			onClick: () => {
 				n("update:collapsed", !t.collapsed);
 			}
-		}, { default: () => [p(F, { size: "20" }, { default: () => [t.collapsed ? p(we, null, null) : p(Ce, null, null)] })] }), [[s, t.collapsed ? i("common.layout.sider.expand") : i("common.layout.sider.collapse")]]) : void 0]));
+		}, { default: () => [p(F, { size: "20" }, { default: () => [t.collapsed ? p(we, null, null) : p(Ce, null, null)] })] }), [[s, t.collapsed ? i("common.layout.sidebar.expand") : i("common.layout.sidebar.collapse")]]) : void 0]));
 	}
 }), Oe = /* @__PURE__ */ m({
 	name: "AppContent",
@@ -497,8 +497,8 @@ var je = /* @__PURE__ */ m({
 			}, [x(t, "default", void 0, () => [p("div", {
 				class: "app-logo__img",
 				style: `
-                                        width: ${a ? "var(--app-sider-width, 60px)" : "56px"};
-                                        font-size: ${a ? "calc(var(--app-sider-width, 60px) - 24px)" : "32px"};
+                                        width: ${a ? "var(--app-sidebar-width, 60px)" : "56px"};
+                                        font-size: ${a ? "calc(var(--app-sidebar-width, 60px) - 24px)" : "32px"};
                                         transition: width 0.2s ease-in-out 0.1s;
                                         flex: 0 0 auto;
                                         display: flex;

package/dist/page.js

@@ -1,8 +1,8 @@
 import { n as e } from "./use-i18n-D1TTDOML.js";
 import { DataForm as t, DtDeptRender as n, DtUserDept as r, DtUserRender as i, NCheckboxes as a, NRadios as o } from "./components.js";
-import { computed as s, createVNode as c, defineAsyncComponent as l, defineComponent as u, h as d, isVNode as f, mergeProps as p, nextTick as m, ref as h, renderSlot as g, shallowRef as _, toValue as v, unref as y } from "vue";
-import { until as b, useClipboard as x } from "@vueuse/core";
-import { NButton as S, NCheckbox as C, NColorPicker as w, NDrawer as T, NDrawerContent as E, NFlex as D, NIcon as O, NInput as k, NInputNumber as A, NModal as j, NScrollbar as M, NSelect as N, NText as P, NUpload as F, useMessage as I } from "ithinkdt-ui";
+import { computed as s, createVNode as c, defineComponent as l, h as u, isVNode as d, mergeProps as f, nextTick as p, ref as m, renderSlot as h, shallowRef as g, toValue as _, unref as v } from "vue";
+import { until as y, useClipboard as b } from "@vueuse/core";
+import { NButton as x, NCheckbox as S, NColorPicker as C, NDatePicker as w, NDrawer as T, NDrawerContent as E, NFlex as D, NIcon as O, NInput as k, NInputNumber as A, NModal as j, NScrollbar as M, NSelect as N, NText as P, NUpload as F, useMessage as I } from "ithinkdt-ui";
 import { nanoid as L } from "nanoid";
 import { format as R } from "date-fns";
 import { useFormItem as z } from "ithinkdt-ui/es/_mixins";
@@ -10,16 +10,16 @@ import { useModal as B } from "@ithinkdt/page";
 import { isNullish as V } from "@ithinkdt/common";
 import { useDict as H, useDictMap as U } from "@ithinkdt/common/dict";
 //#region src/page-util.js
-var W = (e) => Object.fromEntries(Object.entries(e || {}).map(([e, t]) => [e, y(t)]));
+var W = (e) => Object.fromEntries(Object.entries(e || {}).map(([e, t]) => [e, v(t)]));
 //#endregion
 //#region src/page-description.jsx
 function G(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !f(e);
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !d(e);
 }
 function K({ getDeptsByCode: e, getUsersByUsername: t, getFileInfos: r, previewFileUrl: a }) {
 	let o = (e) => (t, n, { params: r = {} }) => {
 		if (t != null) return R(t, r.formatter ?? e);
-	}, s = (e = {}) => c("svg", p({
+	}, s = (e = {}) => c("svg", f({
 		xmlns: "http://www.w3.org/2000/svg",
 		width: "1em",
 		height: "1em",
@@ -29,7 +29,7 @@ function K({ getDeptsByCode: e, getUsersByUsername: t, getFileInfos: r, previewF
 		cy: "16",
 		r: "8",
 		fill: "currentColor"
-	}, null)]), l = (e = {}) => c("svg", p({
+	}, null)]), l = (e = {}) => c("svg", f({
 		xmlns: "http://www.w3.org/2000/svg",
 		width: "1em",
 		height: "1em",
@@ -37,7 +37,7 @@ function K({ getDeptsByCode: e, getUsersByUsername: t, getFileInfos: r, previewF
 	}, e), [c("path", {
 		fill: "currentColor",
 		d: "M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0"
-	}, null)]), u = (e) => c("svg", p({
+	}, null)]), u = (e) => c("svg", f({
 		xmlns: "http://www.w3.org/2000/svg",
 		width: "1em",
 		height: "1em",
@@ -45,7 +45,7 @@ function K({ getDeptsByCode: e, getUsersByUsername: t, getFileInfos: r, previewF
 	}, e), [c("path", {
 		fill: "currentColor",
 		d: "M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z"
-	}, null)]), d = (e) => c("svg", p({
+	}, null)]), d = (e) => c("svg", f({
 		xmlns: "http://www.w3.org/2000/svg",
 		width: "1em",
 		height: "1em",
@@ -56,30 +56,30 @@ function K({ getDeptsByCode: e, getUsersByUsername: t, getFileInfos: r, previewF
 	}, null)]);
 	return {
 		longtext: () => {
-			let e = h(), t = h(), n = h(), { open: r } = B({
+			let e = m(), t = m(), n = m(), { open: r } = B({
 				type: "drawer",
 				resizable: !0,
 				content: () => c("div", null, [c("span", null, [e.value])]),
 				width: t,
 				footer: () => n.value?.() ?? null,
 				maskClosable: !0
-			}), { copy: i, copied: a } = x({ legacy: !0 }), o = (t, n, o) => {
+			}), { copy: i, copied: a } = b({ legacy: !0 }), o = (t, n, o) => {
 				if (!n) return r(t);
 				let s = () => {
 					o ? o(e.value) : i(e.value);
 				};
-				return r(() => c("div", { style: "display: flex; align-items: center; justify-content: space-between; margin-right: 4px;" }, [v(t), a.value ? c(S, {
+				return r(() => c("div", { style: "display: flex; align-items: center; justify-content: space-between; margin-right: 4px;" }, [_(t), a.value ? c(x, {
 					quaternary: !0,
 					size: "tiny",
 					type: "success"
-				}, { icon: () => c(O, { size: 18 }, { default: () => [c(d, null, null)] }) }) : c(S, {
+				}, { icon: () => c(O, { size: 18 }, { default: () => [c(d, null, null)] }) }) : c(x, {
 					quaternary: !0,
 					size: "tiny",
 					onClick: s
 				}, { icon: () => c(O, { size: 16 }, { default: () => [c(u, null, null)] }) })]));
 			};
 			return {
-				renderer: (r, i, { params: a = {} }, { label: s }) => c("div", { style: "white-space: nowrap; overflow: hidden; display: flex; gap: 8px; align-items: center; justify-content: space-between" }, [c("div", { style: "flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" }, [r]), c(S, {
+				renderer: (r, i, { params: a = {} }, { label: s }) => c("div", { style: "white-space: nowrap; overflow: hidden; display: flex; gap: 8px; align-items: center; justify-content: space-between" }, [c("div", { style: "flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" }, [r]), c(x, {
 					type: "info",
 					text: !0,
 					style: "position: sticky; right: 0; z-index: 2",
@@ -151,7 +151,7 @@ function K({ getDeptsByCode: e, getUsersByUsername: t, getFileInfos: r, previewF
 		}),
 		email: () => (e) => c("a", { href: `mailto:${e}` }, [e]),
 		url: () => (e) => c("a", { href: e }, [e]),
-		color: () => (e) => c(w, {
+		color: () => (e) => c(C, {
 			value: e,
 			disabled: !0,
 			size: "small"
@@ -215,9 +215,9 @@ function K({ getDeptsByCode: e, getUsersByUsername: t, getFileInfos: r, previewF
 //#endregion
 //#region src/page-form.jsx
 function q(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !f(e);
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !d(e);
 }
-var J = /* @__PURE__ */ l(() => import("ithinkdt-ui/es/date-picker")), Y = /* @__PURE__ */ u({
+var J = /* @__PURE__ */ l({
 	name: "SimpleUpload",
 	props: {
 		type: {
@@ -257,24 +257,24 @@ var J = /* @__PURE__ */ l(() => import("ithinkdt-ui/es/date-picker")), Y = /* @_
 	},
 	setup(t, { slots: n, expose: r }) {
 		let { t: i } = e();
-		Y.t = i;
+		J.t = i;
 		let a = z(t), o = I(), l = s(() => t.customRequest || (({ file: e, onProgress: n, onFinish: r, onError: i }) => {
 			t.uploadFile(e.file, (e) => n({ percent: e })).then((t) => {
 				e.file.fileId = t, r();
 			}).catch((e) => {
 				o.error(e.message), i(e);
 			});
-		})), u = h();
+		})), u = m();
 		r({ submit() {
-			return b(u).toBeTruthy().then((e) => e.submit());
+			return y(u).toBeTruthy().then((e) => e.submit());
 		} });
 		let d = (e) => {
 			if (e) for (let n of e) n.size > t.maxSize * 1024 && (n.status = "error");
-			t.onUpdateFileList?.(e), m(() => a.nTriggerFormChange());
+			t.onUpdateFileList?.(e), p(() => a.nTriggerFormChange());
 		};
 		return () => {
 			let { type: e, onUpdateFileList: r, ...o } = t;
-			return c(F, p(o, {
+			return c(F, f(o, {
 				ref: u,
 				customRequest: l.value,
 				listType: e === "image" ? "image-card" : "text",
@@ -283,7 +283,7 @@ var J = /* @__PURE__ */ l(() => import("ithinkdt-ui/es/date-picker")), Y = /* @_
 			}), {
 				default: e === "image" ? void 0 : () => {
 					let e;
-					return c(S, {
+					return c(x, {
 						disabled: a.mergedDisabledRef.value,
 						size: a.mergedSizeRef.value
 					}, q(e = i("common.page.form.selectFileText")) ? e : { default: () => [e] });
@@ -293,13 +293,13 @@ var J = /* @__PURE__ */ l(() => import("ithinkdt-ui/es/date-picker")), Y = /* @_
 		};
 	}
 });
-function X({ getUserGroups: e, getUsersByGroup: t, getDeptsByCode: n, getUsersByDept: s, getUsersByUsername: l, uploadFile: u, getFileInfos: f }) {
-	let m = (e) => e, v = (e) => V(e) ? e : String(e), x = (e) => V(e) ? e : Number(e);
+function Y({ getUserGroups: e, getUsersByGroup: t, getDeptsByCode: n, getUsersByDept: s, getUsersByUsername: l, uploadFile: d, getFileInfos: p }) {
+	let _ = (e) => e, b = (e) => V(e) ? e : String(e), x = (e) => V(e) ? e : Number(e);
 	return {
 		input: () => ({ slots: e, props: t }, { modelValue: n, "onUpdate:modelValue": r, required: i, readonly: a, ...o }) => a ? c(P, {
 			depth: 2,
 			style: "line-height: 1.25"
-		}, { default: () => [n ?? ""] }) : (t = W(t), d(k, p({ clearable: !0 }, t, o, {
+		}, { default: () => [n ?? ""] }) : (t = W(t), u(k, f({ clearable: !0 }, t, o, {
 			value: n,
 			"onUpdate:value": r
 		}), e)),
@@ -310,20 +310,20 @@ function X({ getUserGroups: e, getUsersByGroup: t, getDeptsByCode: n, getUsersBy
 					depth: 2,
 					style: "line-height: 1.25"
 				}, { default: () => [i ?? ""] });
-				let { valueType: u = "number", ...f } = W(r), m = u === "string" ? x(i) : i;
-				return e = a, u === "string" && !t && (t = (t, ...n) => {
-					e(v(t), ...n);
-				}), d(A, p({ clearable: !0 }, f, l, {
+				let { valueType: d = "number", ...p } = W(r), m = d === "string" ? x(i) : i;
+				return e = a, d === "string" && !t && (t = (t, ...n) => {
+					e(b(t), ...n);
+				}), u(A, f({ clearable: !0 }, p, l, {
 					value: m,
-					"onUpdate:value": u === "string" ? t : e
+					"onUpdate:value": d === "string" ? t : e
 				}), n);
 			};
 		},
 		select: () => {
 			let e, t, n, r, i, a;
-			return ({ slots: o, props: s }, { modelValue: l, "onUpdate:modelValue": u, required: f, readonly: g, ..._ }) => {
-				let { dictType: b, options: S, valueType: C = "string", ...w } = W(s), T = C === "number" ? v : m, E, D, O;
-				S ? typeof S == "function" ? (E = !0, n ??= h(!1), D = (e) => {
+			return ({ slots: o, props: s }, { modelValue: l, "onUpdate:modelValue": d, required: p, readonly: h, ...g }) => {
+				let { dictType: y, options: S, valueType: C = "string", ...w } = W(s), T = C === "number" ? b : _, E, D, O;
+				S ? typeof S == "function" ? (E = !0, n ??= m(!1), D = (e) => {
 					n.value = !0, Promise.resolve(S(e.trim())).then((e) => {
 						t = e;
 					}).finally(() => {
@@ -331,35 +331,35 @@ function X({ getUserGroups: e, getUsersByGroup: t, getDeptsByCode: n, getUsersBy
 					});
 				}, O = () => {
 					D("");
-				}, O()) : (n = void 0, t = S) : (n = void 0, e !== b && (e = b, !t && e && (t = H(e))));
+				}, O()) : (n = void 0, t = S) : (n = void 0, e !== y && (e = y, !t && e && (t = H(e))));
 				let k = w.multiple ? l?.map(T) : T(l);
-				if (g) if (w.multiple) {
+				if (h) if (w.multiple) {
 					let e;
 					return c(P, {
 						depth: 2,
 						style: "line-height: 1.25"
-					}, q(e = (k?.map((e) => y(t)?.find((t) => t[w.valueField || "value"] === e)) ?? []).map((e, t, n) => {
+					}, q(e = (k?.map((e) => v(t)?.find((t) => t[w.valueField || "value"] === e)) ?? []).map((e, t, n) => {
 						let r = e ? w.renderLabel ? w.renderLabel(e) ?? "" : e[w.labelField || "label"] ?? "" : k[t] ?? "";
 						return c("span", { key: e ? e[w.valueField || "value"] : k[t] ?? "" }, [r, t < n.length - 1 ? ", " : ""]);
 					})) ? e : { default: () => [e] });
 				} else {
-					let e = y(t)?.find((e) => e[w.valueField || "value"] === k);
+					let e = v(t)?.find((e) => e[w.valueField || "value"] === k);
 					return c(P, {
 						depth: 2,
 						style: "line-height: 1.25"
 					}, { default: () => [e ? w.renderLabel ? w.renderLabel(e) ?? "" : e[w.labelField || "label"] ?? "" : k ?? ""] });
 				}
-				return r = w.multiple, i = u, C === "number" && !a && (a = (e, ...t) => {
+				return r = w.multiple, i = d, C === "number" && !a && (a = (e, ...t) => {
 					i(r ? e?.map(x) : x(e), ...t);
-				}), d(N, p({
+				}), u(N, f({
 					clearable: !0,
-					filterable: y(t)?.length > 9,
+					filterable: v(t)?.length > 9,
 					loading: n?.value || t?.loading,
 					remote: E,
 					onSearch: D,
 					onClear: O
-				}, w, _, {
-					options: y(t),
+				}, w, g, {
+					options: v(t),
 					value: k,
 					"onUpdate:value": C === "number" ? a : i
 				}), o);
@@ -367,78 +367,78 @@ function X({ getUserGroups: e, getUsersByGroup: t, getDeptsByCode: n, getUsersBy
 		},
 		checkbox: () => ({ slots: e, props: t }, { modelValue: n, "onUpdate:modelValue": r, required: i, readonly: a, ...o }) => {
 			if (t = W(t), a) {
-				let r = n === (t.checkedValue ?? !0) ? g(e, "checked", void 0, () => [c(C, { checked: !0 }, null)]) : g(e, "unchecked", void 0, () => [c(C, { disabled: !0 }, null)]);
+				let r = n === (t.checkedValue ?? !0) ? h(e, "checked", void 0, () => [c(S, { checked: !0 }, null)]) : h(e, "unchecked", void 0, () => [c(S, { disabled: !0 }, null)]);
 				return c(P, {
 					depth: 2,
 					style: "line-height: 1.25"
 				}, q(r) ? r : { default: () => [r] });
 			}
-			return d(C, p(t, o, {
+			return u(S, f(t, o, {
 				checked: n,
 				"onUpdate:checked": r
 			}), e);
 		},
 		checkboxes: () => {
 			let e, t, n, r;
-			return ({ props: i }, { modelValue: o, "onUpdate:modelValue": s, required: l, readonly: u, ...f }) => {
-				let { dictType: h, options: g, valueType: _ = "string", ...y } = W(i), b = _ === "number" ? v : m;
-				g ? t = g : e !== h && (e = h, !t && e && (t = H(e)));
-				let S = o?.map(b) ?? [];
-				if (u) {
+			return ({ props: i }, { modelValue: o, "onUpdate:modelValue": s, required: l, readonly: d, ...p }) => {
+				let { dictType: m, options: h, valueType: g = "string", ...v } = W(i), y = g === "number" ? b : _;
+				h ? t = h : e !== m && (e = m, !t && e && (t = H(e)));
+				let S = o?.map(y) ?? [];
+				if (d) {
 					let e;
 					return c(P, {
 						depth: 2,
 						style: "line-height: 2.4"
-					}, q(e = (S?.map((e) => t?.find((t) => t[y.valueField || "value"] === e)) ?? []).map((e, t, n) => {
-						let r = e ? e[y.labelField ?? "label"] ?? "" : S[t] ?? "";
-						return c("span", { key: e ? e[y.valueField ?? "value"] : S[t] ?? "" }, [r, t < n.length - 1 ? ", " : ""]);
+					}, q(e = (S?.map((e) => t?.find((t) => t[v.valueField || "value"] === e)) ?? []).map((e, t, n) => {
+						let r = e ? e[v.labelField ?? "label"] ?? "" : S[t] ?? "";
+						return c("span", { key: e ? e[v.valueField ?? "value"] : S[t] ?? "" }, [r, t < n.length - 1 ? ", " : ""]);
 					})) ? e : { default: () => [e] });
 				}
-				return n = s, _ === "number" && !r && (r = (e, ...t) => {
+				return n = s, g === "number" && !r && (r = (e, ...t) => {
 					n(e?.map(x), ...t);
-				}), d(a, p(y, f, {
+				}), u(a, f(v, p, {
 					options: t,
 					modelValue: S,
-					"onUpdate:modelValue": _ === "number" ? r : n
+					"onUpdate:modelValue": g === "number" ? r : n
 				}));
 			};
 		},
 		radios: () => {
 			let e, t, n, r;
-			return ({ props: i }, { modelValue: a, "onUpdate:modelValue": s, required: l, readonly: u, ...f }) => {
-				let { dictType: h, options: g, valueType: _ = "string", ...y } = W(i), b = _ === "number" ? v : m;
-				g ? t = g : e !== h && (e = h, !t && e && (t = H(e)));
-				let S = b(a);
-				if (u) {
-					let e = t?.find((e) => e[y.valueField ?? "value"] === S);
+			return ({ props: i }, { modelValue: a, "onUpdate:modelValue": s, required: l, readonly: d, ...p }) => {
+				let { dictType: m, options: h, valueType: g = "string", ...v } = W(i), y = g === "number" ? b : _;
+				h ? t = h : e !== m && (e = m, !t && e && (t = H(e)));
+				let S = y(a);
+				if (d) {
+					let e = t?.find((e) => e[v.valueField ?? "value"] === S);
 					return c(P, {
 						depth: 2,
 						style: "line-height: 1.25"
-					}, { default: () => [e ? e[y.labelField ?? "label"] ?? "" : S ?? ""] });
+					}, { default: () => [e ? e[v.labelField ?? "label"] ?? "" : S ?? ""] });
 				}
-				return n = s, _ === "number" && !r && (r = (e, ...t) => {
+				return n = s, g === "number" && !r && (r = (e, ...t) => {
 					n(x(e), ...t);
-				}), d(o, p(y, f, {
+				}), u(o, f(v, p, {
 					options: t,
 					modelValue: S,
-					"onUpdate:modelValue": _ === "number" ? r : n
+					"onUpdate:modelValue": g === "number" ? r : n
 				}));
 			};
 		},
 		datepicker: () => ({ slots: e, props: t }, { modelValue: n, "onUpdate:modelValue": r, required: i, readonly: a, ...o }) => {
-			let { type: s = "date", format: l = s.startsWith("datetime") ? "yyyy-MM-dd HH:mm:ss" : "yyyy-MM-dd", ...u } = W(t);
+			let { type: s = "date", format: l = s.startsWith("datetime") ? "yyyy-MM-dd HH:mm:ss" : "yyyy-MM-dd", ...d } = W(t);
 			return a ? s.endsWith("range") ? c(P, {
 				depth: 2,
 				style: "line-height: 1.25"
 			}, { default: () => [n ? `${n[0] ? R(n[0], l) : ""} ~ ${n[1] ? R(n[1], l) : ""}` : ""] }) : c(P, {
 				depth: 2,
 				style: "line-height: 1.25"
-			}, { default: () => [n ? R(n, l) : ""] }) : d(J, p({
+			}, { default: () => [n ? R(n, l) : ""] }) : u(w, f({
 				actions: null,
 				updateValueOnClose: !0,
 				closeOnSelect: !0,
 				clearable: !0
-			}, u, o, {
+			}, d, o, {
 				type: s,
 				format: l,
 				value: n,
@@ -459,19 +459,19 @@ function X({ getUserGroups: e, getUsersByGroup: t, getDeptsByCode: n, getUsersBy
 					style: "max-width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
 				}, [e.name]))) ? e : { default: () => [e] }) : void 0;
 			}
-			return d(Y, p(t, o, {
+			return u(J, f(t, o, {
 				defaultUpload: !1,
-				uploadFile: u,
+				uploadFile: d,
 				fileList: n,
 				onUpdateFileList: r
 			}), e);
 		},
 		upload: () => {
-			let e = null, t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), r = _([]), i = 0, a = (e) => {
+			let e = null, t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), r = g([]), i = 0, a = (e) => {
 				let t = ++i;
 				r.value = e.map((e) => n.get(e)).filter(Boolean);
 				let a = e.filter((e) => !n.has(e));
-				Promise.resolve(a.length > 0 ? f(a) : []).then((a) => {
+				Promise.resolve(a.length > 0 ? p(a) : []).then((a) => {
 					if (t === i) {
 						r.value = e.map((e) => n.get(e) || a.find((t) => t.id === e)), n.clear();
 						for (let e of r.value) n.set(e.id, e);
@@ -479,9 +479,9 @@ function X({ getUserGroups: e, getUsersByGroup: t, getDeptsByCode: n, getUsersBy
 				});
 			}, o, s;
 			return {
-				renderer: ({ slots: i, props: l }, { modelValue: f, "onUpdate:modelValue": m, required: h, readonly: g, ...v }) => {
+				renderer: ({ slots: i, props: l }, { modelValue: p, "onUpdate:modelValue": m, required: h, readonly: _, ...v }) => {
 					let y = W(l);
-					if (s = y.maxSize, o = y.ref ??= _(), e !== f && (e = f, a(f?.split(",") ?? [])), g) {
+					if (s = y.maxSize, o = y.ref ??= g(), e !== p && (e = p, a(p?.split(",") ?? [])), _) {
 						let e;
 						return r.value.length === 0 ? void 0 : c(D, {
 							gap: "8",
@@ -497,8 +497,8 @@ function X({ getUserGroups: e, getUsersByGroup: t, getDeptsByCode: n, getUsersBy
 							style: "max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
 						}, [e.name]))) ? e : { default: () => [e] });
 					}
-					return d(Y, p(y, v, {
-						uploadFile: u,
+					return u(J, f(y, v, {
+						uploadFile: d,
 						fileList: r.value,
 						onUpdateFileList: (e = []) => {
 							n.clear();
@@ -508,99 +508,100 @@ function X({ getUserGroups: e, getUsersByGroup: t, getDeptsByCode: n, getUsersBy
 					}), i);
 				},
 				beforeSubmit: async () => {
-					if (await o?.value?.submit(), await b(r).toMatch((e) => e.every((e) => !["pending", "uploading"].includes(e.status))), r.value.some((e) => e.size > s * 1024)) return Y.t("common.page.form.validate.fileSizeExceeded", { maxSize: s });
-					if (r.value.some((e) => e.status === "error")) return Y.t("common.page.form.validate.fileErrorMessage");
+					if (await o?.value?.submit(), await y(r).toMatch((e) => e.every((e) => !["pending", "uploading"].includes(e.status))), r.value.some((e) => e.size > s * 1024)) return J.t("common.page.form.validate.fileSizeExceeded", { maxSize: s });
+					if (r.value.some((e) => e.status === "error")) return J.t("common.page.form.validate.fileErrorMessage");
 				}
 			};
 		},
 		user: () => {
-			let a, o, u;
-			return ({ slots: f, props: m }, { modelValue: h, "onUpdate:modelValue": g, required: v, readonly: y, ...b }) => {
+			let a, o, d;
+			return ({ slots: p, props: m }, { modelValue: h, "onUpdate:modelValue": _, required: v, readonly: y, ...b }) => {
 				let x = W(m);
-				return a || (a = _([]), o = _([]), u = _([]), l().then((e) => {
+				return a || (a = g([]), o = g([]), d = g([]), l().then((e) => {
 					a.value = e;
 				}), e().then((e) => {
 					o.value = e;
 				}), n().then((e) => {
-					u.value = e;
+					d.value = e;
 				})), y ? c(i, {
 					value: h,
 					multiple: x.multiple,
 					getUsersByUsername: l,
 					renderInfo: x.renderInfo
-				}, null) : d(r, p({
+				}, null) : u(r, f({
 					type: "user",
 					users: a.value,
-					depts: u.value,
+					depts: d.value,
 					groups: o.value,
 					getUsersByDept: s,
 					getUsersByGroup: t
 				}, x, b, {
 					renderUserInfo: x.renderInfo,
 					modelValue: h,
-					"onUpdate:modelValue": g
-				}), f);
+					"onUpdate:modelValue": _
+				}), p);
 			};
 		}
 	};
 }
 //#endregion
 //#region src/page.jsx
-function Z(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !f(e);
+function X(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !d(e);
 }
-function Q() {
-	return () => ({ items: e, model: n, handleSubmit: r, reset: i, validation: a, readonly: o, inModal: s, showFeedback: l, showColon: u, labelWidth: d, labelAlign: f, labelPlacement: p, showRequireMark: m, requireMarkPlacement: h }) => c(t, {
+function Z() {
+	return () => ({ items: e, model: n, handleSubmit: r, reset: i, validation: a, readonly: o, inModal: s, showFeedback: l, cols: u, showColon: d, labelWidth: f, labelAlign: p, labelPlacement: m, showRequireMark: h, requireMarkPlacement: g }) => c(t, {
 		readonly: o,
 		model: n,
 		items: e,
 		validation: a,
-		showColon: y(u) ?? !0,
-		labelWidth: y(d),
-		labelAlign: y(f),
-		labelPlacement: y(p),
-		showRequireMark: y(m),
-		requireMarkPlacement: y(h),
-		showFeedback: y(l) ?? !0,
+		showColon: v(d) ?? !0,
+		labelWidth: v(f),
+		labelAlign: v(p),
+		labelPlacement: v(m),
+		showRequireMark: v(h),
+		requireMarkPlacement: v(g),
+		showFeedback: v(l) ?? !0,
 		showAction: !1,
+		grid: { cols: v(u) },
 		onSubmit: r,
 		onReset: i,
 		style: s ? "padding-right: 2rem; padding-top: 1rem" : void 0
 	}, null);
 }
-function $() {
+function Q() {
 	let e = (e) => typeof e == "number" ? `${e}px` : e, t = {
 		maxHeight: "calc(100vh - 130px)",
 		display: "flex",
 		flexDirection: "column"
 	}, n = { content: !0 };
-	return () => ({ type: r = "dialog", visible: i, title: a, content: o, footer: s, placement: l, resizable: u, draggable: d, closeOnEsc: f, closable: m, showMask: h, maskClosable: g, width: _, height: v, style: y, onClose: b, onCancel: x, onConfirm: C, onAfterClose: w, onAfterOpen: O, confirmText: k, confirmDisabled: A, confirmLoading: N, cancelText: P, cancelDisabled: F, cancelLoading: I, nativeScrollbar: L, ...R }) => {
+	return () => ({ type: r = "dialog", visible: i, title: a, content: o, footer: s, placement: l, resizable: u, draggable: d, closeOnEsc: p, closable: m, showMask: h, maskClosable: g, width: _, height: v, style: y, onClose: b, onCancel: S, onConfirm: C, onAfterClose: w, onAfterOpen: O, confirmText: k, confirmDisabled: A, confirmLoading: N, cancelText: P, cancelDisabled: F, cancelLoading: I, nativeScrollbar: L, ...R }) => {
 		let z = s ? () => s : s === null ? null : () => c(D, {
 			justify: "end",
 			gap: "16"
-		}, { default: () => [P === null ? void 0 : c(S, {
-			onClick: x,
+		}, { default: () => [P === null ? void 0 : c(x, {
+			onClick: S,
 			disabled: F,
 			loading: I,
 			style: "min-width: 60px"
-		}, Z(P) ? P : { default: () => [P] }), k === null ? void 0 : c(S, {
+		}, X(P) ? P : { default: () => [P] }), k === null ? void 0 : c(x, {
 			type: "primary",
 			onClick: C,
 			disabled: A,
 			loading: N,
 			style: "min-width: 60px"
-		}, Z(k) ? k : { default: () => [k] })] });
+		}, X(k) ? k : { default: () => [k] })] });
 		if (r === "dialog") {
-			let { style: r } = p({ style: {
+			let { style: r } = f({ style: {
 				width: e(_ ?? 520),
 				height: e(v)
 			} }, { style: y });
-			return c(j, p({
+			return c(j, f({
 				show: i,
 				preset: "card",
 				title: () => a,
 				maskClosable: g ?? !1,
-				closeOnEsc: f,
+				closeOnEsc: p,
 				closable: m,
 				onClose: b,
 				segmented: n,
@@ -615,15 +616,15 @@ function $() {
 				default: () => c(M, {
 					abstract: !0,
 					style: "display: flex; flex-direction: column"
-				}, Z(o) ? o : { default: () => [o] }),
+				}, X(o) ? o : { default: () => [o] }),
 				action: z
 			});
 		}
 		let { bodyContentClass: B, bodyContentStyle: V, ...H } = R;
-		return c(T, p({
+		return c(T, f({
 			show: i,
 			trapFocus: !1,
-			closeOnEsc: f,
+			closeOnEsc: p,
 			showMask: h,
 			maskClosable: g,
 			resizable: u,
@@ -648,4 +649,4 @@ function $() {
 	};
 }
 //#endregion
-export { K as createDescriptionHelper, Q as createFormHelper, $ as createModalHelper, X as createPageFormHelper };
+export { K as createDescriptionHelper, Z as createFormHelper, Y as createFormItemHelper, Q as createModalHelper };

package/esm/components.d.ts

@@ -21,6 +21,7 @@ declare module '@ithinkdt/page' {
         showRequireMark?: MaybeRef<boolean | undefined>
         requireMarkPlacement?: MaybeRef<'left' | 'right' | 'right-hanging' | undefined>
         showFeedback?: MaybeRef<boolean | undefined>
+        cols?: MaybeRef<number | string | undefined>
     }
 
     type FormItemOptionKeys = 'size' | 'showLabel' | 'labelWidth' | 'labelStyle' | 'labelAlign' | 'labelPlacement' | 'labelProps'

package/esm/page.d.ts

@@ -1,8 +1,6 @@
 import {
-    CheckboxProps, DatePickerProps, DatePickerSlots, DrawerContentProps, DrawerProps,
-    InputNumberProps, InputNumberSlots, InputProps, InputSlots,
-    ModalOptions, SelectGroupOption, SelectOption, SelectProps, SelectSlots,
-    UploadFileInfo, UploadProps,
+    CheckboxProps, DatePickerProps, DatePickerSlots, DrawerContentProps, DrawerProps, InputNumberProps, InputNumberSlots,
+    InputProps, InputSlots, ModalOptions, SelectGroupOption, SelectOption, SelectProps, SelectSlots, UploadFileInfo, UploadProps,
 } from 'ithinkdt-ui'
 import { MaybeRef, VNode, VNodeChild } from 'vue'
 
@@ -184,7 +182,7 @@ declare module '@ithinkdt/page' {
     interface ModalDialogOptions extends ShallowMaybeRef<Omit<ModalOptions, ModalOptionsKey>> {}
 }
 
-export declare function createPageFormHelper(options?: {
+export declare function createFormItemHelper(options?: {
     getUserGroups?: (() => Promise<UserGroupOption[]>) | undefined
     getUsersByGroup?: ((code: string) => Promise<{ username: string, nickname: string }[]>) | undefined
     getUsersByDept?: ((code: string) => Promise<{ username: string, nickname: string }[]>) | undefined

package/locale.d.ts

@@ -2,7 +2,7 @@ export interface UILocale {
     all: string
     back: string
     layout: {
-        sider: {
+        sidebar: {
             collapse: string
             expand: string
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.9",
+  "version": "4.0.11",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -94,7 +94,7 @@
     "vue": "^3.5.31",
     "vue-router": "^5.0.4",
     "@vue/test-utils": "^2.4.6",
-    "@ithinkdt/page": "^4.0.10"
+    "@ithinkdt/page": "^4.0.12"
   },
   "scripts": {
     "dev": "vite build --watch",