@wordrhyme/auto-crud 1.12.2 → 1.13.0

package/README.md

@@ -278,6 +278,8 @@ interface AutoCrudTableProps<TSchema> {
   form?: {
     overrides?: Record<string, any>; // 表单覆盖配置
     columns?: number; // 表单列数
+    labelAlign?: 'left' | 'top' | 'right'; // 默认 top；left/right 为左右布局及标签文字对齐
+    labelWidth?: number | string; // 左右布局的标签宽度，数字单位为 px
   };
   /**
    * 行操作配置，或统一配置 toolbar/row/batch。
@@ -1509,27 +1511,39 @@ function CustomTable({ data }) {
 ### 使用 AutoForm 组件
 
 ```typescript
-import { AutoForm, createFormSchema } from "@wordrhyme/auto-crud";
-import { createForm } from "@formily/core";
+import { AutoForm } from "@wordrhyme/auto-crud";
 
 function CustomForm() {
-  const form = createForm();
-  const formSchema = createFormSchema(taskSchema, {
-    exclude: ["id", "createdAt"],
-    layout: "grid",
-    gridColumns: 2,
-  });
-
   return (
     <AutoForm
-      form={form}
-      schema={formSchema}
+      schema={taskSchema}
+      gridColumns={2}
       onSubmit={(values) => console.log(values)}
     />
   );
 }
 ```
 
+详情使用同一条 Formily 渲染链路，通过 `mode="view"` 启用 `readPretty`，无需传入 `onSubmit`，也不会显示提交按钮：
+
+```tsx
+<AutoForm
+  mode="view"
+  schema={taskSchema}
+  initialValues={selectedTask}
+  fields={fields}
+  gridColumns={2}
+/>
+```
+
+创建、编辑排除 ID 和审计托管字段；详情保留 ID、创建时间和更新时间。`form: false` 和字段级 `form['x-hidden']` 只影响创建、编辑；全局 `hidden` 和 `permissions.deny` 仍限制详情字段。其他表单覆盖配置、布局、scope 和选项标签继续共用。
+
+内置字段提供阅读态映射；通过 `components.register()` 注册的自定义组件应使用 Formily `mapReadPretty` 实现自己的阅读态。`AutoCrudTable` 详情仍展示当前选中记录，不会额外请求单条接口。
+
+详情默认单列，列数由 `AutoCrudTable` 的 `form.columns` 或 `AutoForm` 的 `gridColumns` 控制，使用浅色标签和宽松间距；长文本、数组和对象默认占满整行，字段 `gridSpan` 可指定跨度。单选标签显示为文字，多选标签使用轻量徽标。长内容自动换行；弹窗最高为视口高度的 85%，超出后正文滚动，标题保持可见。
+
+`AutoCrudTable` 的 `form.labelAlign` 和 `form.labelWidth` 同时作用于创建、编辑及详情弹窗。例如 `form={{ columns: 1, labelAlign: 'left', labelWidth: 100 }}` 表示单列、左侧标签文字左对齐，标签宽度为 100px。`top` 表示上下布局（默认），`right` 表示左侧标签文字右对齐；`labelWidth` 仅在 `left` / `right` 布局时生效。
+
 ### 使用 useDataTable Hook
 
 ```typescript

package/dist/index.cjs

@@ -25,6 +25,8 @@ let __wordrhyme_formily_shadcn = require("@wordrhyme/formily-shadcn");
 __wordrhyme_formily_shadcn = require_position.__toESM(__wordrhyme_formily_shadcn);
 let __formily_core = require("@formily/core");
 __formily_core = require_position.__toESM(__formily_core);
+let __formily_react = require("@formily/react");
+__formily_react = require_position.__toESM(__formily_react);
 let __formily_reactive = require("@formily/reactive");
 __formily_reactive = require_position.__toESM(__formily_reactive);
 let sonner = require("sonner");
@@ -5478,6 +5480,7 @@ function FormModal({ open, onOpenChange, title, description, children, variant =
 		open,
 		onOpenChange,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.SheetContent, {
+			...!description ? { "aria-describedby": void 0 } : {},
 			side,
 			className: cn("sm:max-w-lg flex flex-col p-0", className),
 			children: [
@@ -5503,6 +5506,7 @@ function FormModal({ open, onOpenChange, title, description, children, variant =
 		open,
 		onOpenChange,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.DialogContent, {
+			...!description ? { "aria-describedby": void 0 } : {},
 			className: cn("max-w-2xl sm:max-w-2xl flex flex-col max-h-[85vh] overflow-hidden p-0", className),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.DialogHeader, {
@@ -5624,6 +5628,8 @@ function createFormSchema(schema, options) {
 		const inferredByName = inferComponentByFieldName(key);
 		const component = inferredByName?.component ?? fieldTypeToFormilyComponent[parsed.type];
 		const inferredProps = inferredByName?.props ?? {};
+		const componentProps = getComponentProps(parsed.type, parsed);
+		if (parsed.type === "enum" && override?.enum) componentProps.options = override.enum;
 		properties[key] = {
 			type: mapToJsonSchemaType(parsed.type),
 			title: humanize$1(key),
@@ -5632,7 +5638,7 @@ function createFormSchema(schema, options) {
 			"x-decorator-props": decoratorProps,
 			"x-component": component,
 			"x-component-props": {
-				...getComponentProps(parsed.type, parsed),
+				...componentProps,
 				...inferredProps
 			},
 			...parsed.enumValues && { enum: parsed.enumValues.map((v) => ({
@@ -5666,6 +5672,51 @@ function createEditFormSchema(schema, options) {
 	});
 }
 
+//#endregion
+//#region src/components/auto-crud/read-pretty-field.tsx
+const ReadPrettyBooleanLocale = (0, react.createContext)(zhCN.boolean);
+const ReadPrettyRenderers = (0, react.createContext)({});
+function ReadPrettyField({ options }) {
+	const field = (0, __formily_react.useField)();
+	const schema = (0, __formily_react.useFieldSchema)();
+	const renderCustomValue = (0, react.useContext)(ReadPrettyRenderers)[field.path.toString()];
+	return renderCustomValue ? renderCustomValue() : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadPrettyValue, {
+		value: field.value,
+		options: options?.length ? options : field.dataSource,
+		date: schema["x-component"] === "DatePicker"
+	});
+}
+function ReadPrettyValue({ value, options: choices, date }) {
+	const booleanLocale = (0, react.useContext)(ReadPrettyBooleanLocale);
+	useDateFormatterVersion();
+	const renderValue = (item) => {
+		if (item == null || item === "") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-muted-foreground",
+			children: "-"
+		});
+		const option = choices?.find((choice) => String(choice.value) === String(item));
+		if (option) return Array.isArray(value) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
+			variant: "secondary",
+			className: "font-normal",
+			children: option.label
+		}) : option.label;
+		if (typeof item === "boolean") return item ? booleanLocale.true : booleanLocale.false;
+		if (item instanceof Date || date) return formatDate(item);
+		if (typeof item === "object") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+			className: "rounded-md bg-muted/50 p-3 text-sm whitespace-pre-wrap break-words",
+			children: JSON.stringify(item, null, 2)
+		});
+		return String(item);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "min-w-0 whitespace-pre-wrap break-words text-base leading-6 text-foreground",
+		children: Array.isArray(value) ? value.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-wrap gap-2",
+			children: value.map((item, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: renderValue(item) }, index$1))
+		}) : renderValue(null) : renderValue(value)
+	});
+}
+
 //#endregion
 //#region src/lib/crud-reference-projection.ts
 function isRecord$1(value) {
@@ -5814,12 +5865,8 @@ function normalizeFieldOptions$1(options) {
 * 从统一字段配置生成 Formily overrides。
 * `legacyOverrides` 保持兼容旧 API，字段级 `form` 配置优先级最高。
 */
-function buildFormOverrides(fields, legacyOverrides, denyFields) {
+function buildFormOverrides(fields, legacyOverrides, denyFields, mode = "edit") {
 	const result = { ...legacyOverrides };
-	if (denyFields) for (const field of denyFields) result[field] = {
-		...result[field],
-		"x-hidden": true
-	};
 	if (fields) for (const [key, config] of Object.entries(fields)) {
 		const fieldOptions = normalizeFieldOptions$1((config.form && typeof config.form === "object" ? config.form : void 0)?.enum) ?? normalizeFieldOptions$1(config.enum);
 		const fieldDataSource = fieldOptions || !config.dataSource ? void 0 : normalizeDataSourceConfig(config.dataSource);
@@ -5827,10 +5874,6 @@ function buildFormOverrides(fields, legacyOverrides, denyFields) {
 			...result[key],
 			title: config.label
 		};
-		if (config.hidden) result[key] = {
-			...result[key],
-			"x-hidden": true
-		};
 		if (fieldOptions) result[key] = {
 			...result[key],
 			enum: fieldOptions
@@ -5839,15 +5882,27 @@ function buildFormOverrides(fields, legacyOverrides, denyFields) {
 			...result[key],
 			"x-data-source": config.dataSource
 		};
-		if (config.form === false) result[key] = {
+		if (config.form === false && mode !== "view") result[key] = {
 			...result[key],
 			"x-hidden": true
 		};
-		else if (config.form && typeof config.form === "object") result[key] = {
+		else if (config.form && typeof config.form === "object") {
+			const { "x-hidden": formHidden,...sharedFormConfig } = config.form;
+			result[key] = {
+				...result[key],
+				...sharedFormConfig,
+				...mode !== "view" && formHidden !== void 0 ? { "x-hidden": formHidden } : {}
+			};
+		}
+		if (config.hidden) result[key] = {
 			...result[key],
-			...config.form
+			"x-hidden": true
 		};
 	}
+	for (const field of denyFields ?? []) result[field] = {
+		...result[field],
+		"x-hidden": true
+	};
 	return result;
 }
 
@@ -5910,6 +5965,13 @@ const defaultFieldComponents = {
 		decorator: "FormItem"
 	}
 };
+const readPrettyFieldComponents = Object.fromEntries(Object.entries({
+	...__wordrhyme_formily_shadcn.defaultComponentRegistry,
+	...defaultFieldComponents
+}).filter(([, config]) => "decorator" in config).map(([name, config]) => [name, {
+	...config,
+	component: (0, __wordrhyme_formily_shadcn.connect)(config.component, (0, __formily_react.mapReadPretty)(ReadPrettyField))
+}]));
 const AUTO_CRUD_DATA_SOURCE_SCOPE_KEY = "$autoCrudDataSource";
 const POPUP_SCROLL_LOAD_THRESHOLD$1 = 24;
 const dataSourceReactionStates = /* @__PURE__ */ new WeakMap();
@@ -5938,7 +6000,8 @@ function mergeReactions(existing, reaction) {
 	if (Array.isArray(existing)) return existing.includes(reaction) ? existing : [...existing, reaction];
 	return [existing, reaction];
 }
-function applyDataSourceReactions(schema) {
+function applyDataSourceReactions(schema, readPretty = false) {
+	if (readPretty) schema["x-pattern"] = "readPretty";
 	const dataSourceConfig = getSchemaDataSourceConfig(schema);
 	if (dataSourceConfig) {
 		const reaction = `{{${AUTO_CRUD_DATA_SOURCE_SCOPE_KEY}(${JSON.stringify(dataSourceConfig)})}}`;
@@ -5946,12 +6009,12 @@ function applyDataSourceReactions(schema) {
 	}
 	const properties = schema.properties;
 	if (properties && typeof properties === "object" && !Array.isArray(properties)) {
-		for (const property of Object.values(properties)) if (property && typeof property === "object" && !Array.isArray(property)) applyDataSourceReactions(property);
+		for (const property of Object.values(properties)) if (property && typeof property === "object" && !Array.isArray(property)) applyDataSourceReactions(property, readPretty);
 	}
 	const items = schema.items;
 	if (Array.isArray(items)) {
-		for (const item of items) if (item && typeof item === "object") applyDataSourceReactions(item);
-	} else if (items && typeof items === "object") applyDataSourceReactions(items);
+		for (const item of items) if (item && typeof item === "object") applyDataSourceReactions(item, readPretty);
+	} else if (items && typeof items === "object") applyDataSourceReactions(items, readPretty);
 }
 function getDataSourceReactionState(field) {
 	const existing = dataSourceReactionStates.get(field);
@@ -5996,7 +6059,7 @@ function loadAutoCrudDataSource({ entry, field, registryVersion, search, sourceK
 	});
 	setAutoCrudDataSourceOptions(field, state.options);
 	if (!append && state.loadKey === loadKey && state.registryVersion === registryVersion) return;
-	if (entry.reset && state.dependencyKey !== void 0 && state.dependencyKey !== dependencyKey) field.setValue(void 0);
+	if (entry.reset && !field.readPretty && state.dependencyKey !== void 0 && state.dependencyKey !== dependencyKey) field.setValue(void 0);
 	state.dependencyKey = dependencyKey;
 	if (!append) {
 		state.loadKey = loadKey;
@@ -6172,7 +6235,10 @@ function createAutoCrudDataSourceReaction(config, registryState) {
 	};
 }
 function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, fields, overrides, scope: scopeProp, mode = "create", loading = false, gridColumns = 1, labelAlign = "top", labelWidth, showSubmitButton = true }, ref) {
-	const form = (0, react.useMemo)(() => (0, __formily_core.createForm)({ initialValues }), [JSON.stringify(initialValues)]);
+	const form = (0, react.useMemo)(() => (0, __formily_core.createForm)({
+		initialValues,
+		pattern: mode === "view" ? "readPretty" : "editable"
+	}), [JSON.stringify(initialValues), mode]);
 	const dataSourceRegistryState = (0, react.useMemo)(() => (0, __formily_reactive.observable)({ version: 0 }), []);
 	const updateDataSourceRegistryState = (0, react.useCallback)(() => {
 		(0, __formily_reactive.action)(() => {
@@ -6180,40 +6246,75 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, fields, ove
 		});
 	}, [dataSourceRegistryState]);
 	const dataSourceRegistryVersion = useRegistryVersion$1(dataSources.subscribe, updateDataSourceRegistryState);
-	const formOverrides = (0, react.useMemo)(() => buildFormOverrides(fields, overrides), [fields, overrides]);
+	const formOverrides = (0, react.useMemo)(() => buildFormOverrides(fields, overrides, void 0, mode), [
+		fields,
+		overrides,
+		mode
+	]);
 	const formSchema = (0, react.useMemo)(() => {
-		const nextSchema = createEditFormSchema(zodSchema, {
+		const nextSchema = (mode === "view" ? createFormSchema : createEditFormSchema)(zodSchema, {
 			overrides: formOverrides,
 			layout: "grid",
 			gridColumns
 		});
-		applyDataSourceReactions(nextSchema);
+		const grid = typeof nextSchema.properties === "object" ? nextSchema.properties.layout : void 0;
+		if (mode === "view" && grid && typeof grid === "object") {
+			grid["x-component-props"] = {
+				...grid["x-component-props"],
+				className: (0, __wordrhyme_shadcn.cn)(grid["x-component-props"]?.className, "gap-x-10 gap-y-7 py-2")
+			};
+			const properties = typeof grid.properties === "object" ? grid.properties : {};
+			for (const property of Object.values(properties)) {
+				const decoratorProps = property["x-decorator-props"];
+				const fullWidth = property.type === "object" || property.type === "array" || ["Textarea", "RichTextEditor"].includes(property["x-component"]);
+				property["x-decorator-props"] = {
+					colon: false,
+					...decoratorProps,
+					className: (0, __wordrhyme_shadcn.cn)(fullWidth && decoratorProps?.gridSpan == null && "col-span-full", decoratorProps?.className)
+				};
+			}
+		}
+		applyDataSourceReactions(nextSchema, mode === "view");
 		return nextSchema;
 	}, [
 		zodSchema,
 		formOverrides,
 		gridColumns,
-		dataSourceRegistryVersion
+		dataSourceRegistryVersion,
+		mode
 	]);
 	const formLayout = (0, react.useMemo)(() => {
 		const inlineLabel = labelAlign === "left" || labelAlign === "right";
-		return {
-			labelPlacement: inlineLabel ? "start" : "top",
-			itemProps: inlineLabel ? { label: {
-				className: labelAlign === "right" ? "text-right" : void 0,
-				style: labelWidth != null ? { width: labelWidth } : void 0
-			} } : void 0
-		};
-	}, [labelAlign, labelWidth]);
+		return { itemProps: {
+			container: mode === "view" ? { className: "min-w-0 space-y-0 gap-2" } : void 0,
+			label: {
+				placement: inlineLabel ? "start" : "top",
+				className: (0, __wordrhyme_shadcn.cn)(mode === "view" && "mb-0 text-sm font-normal text-muted-foreground leading-5", labelAlign === "right" && "text-right"),
+				style: inlineLabel && labelWidth != null ? { width: labelWidth } : void 0
+			}
+		} };
+	}, [
+		labelAlign,
+		labelWidth,
+		mode
+	]);
 	const fieldComponents = (0, react.useMemo)(() => ({ fields: {
 		...defaultFieldComponents,
+		...mode === "view" ? {
+			...readPrettyFieldComponents,
+			ObjectField: {
+				component: ReadPrettyField,
+				decorator: "FormItem"
+			}
+		} : {},
 		...components.all()
-	} }), [useRegistryVersion$1(components.subscribe)]);
+	} }), [useRegistryVersion$1(components.subscribe), mode]);
 	const scope = (0, react.useMemo)(() => ({
 		...scopeProp,
 		[AUTO_CRUD_DATA_SOURCE_SCOPE_KEY]: (config) => createAutoCrudDataSourceReaction(config, dataSourceRegistryState)
 	}), [dataSourceRegistryState, scopeProp]);
 	const handleSubmit = async () => {
+		if (mode === "view" || !onSubmit) return;
 		await form.validate();
 		if (form.valid) await onSubmit(form.values);
 	};
@@ -6225,7 +6326,7 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, fields, ove
 			schema: formSchema,
 			components: fieldComponents,
 			scope
-		}), showSubmitButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}), mode !== "view" && showSubmitButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex justify-end gap-2 mt-6",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
 				type: "button",
@@ -6241,7 +6342,7 @@ const AutoForm = (0, react.forwardRef)(AutoFormInner);
 //#endregion
 //#region src/components/auto-crud/crud-form-modal.tsx
 function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubmit, loading = false, variant = "dialog", overrides, scope, title, locale = zhCN.formModal, gridColumns, labelAlign, labelWidth, className }) {
-	const defaultTitle = mode === "create" ? locale.createTitle : locale.editTitle;
+	const defaultTitle = mode === "create" ? locale.createTitle : mode === "edit" ? locale.editTitle : zhCN.viewModal.title;
 	const formRef = (0, react.useRef)(null);
 	const handleSubmit = async () => {
 		await formRef.current?.submit();
@@ -6252,7 +6353,7 @@ function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubm
 		title: title ?? defaultTitle,
 		variant,
 		className,
-		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		footer: mode !== "view" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex justify-end gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
 				type: "button",
@@ -6265,14 +6366,16 @@ function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubm
 				disabled: loading,
 				children: loading ? locale.submitting : mode === "create" ? locale.create : locale.save
 			})]
-		}),
+		}) : void 0,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoForm, {
 			ref: formRef,
 			schema,
-			mode,
+			...mode === "view" ? { mode } : {
+				mode,
+				onSubmit
+			},
 			initialValues,
 			loading,
-			onSubmit,
 			overrides,
 			scope,
 			gridColumns,
@@ -7652,7 +7755,7 @@ function ViewModal(props) {
 	if (!props.open || !props.data) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModalContent, { ...props });
 }
-function ViewModalContent({ open, onOpenChange, variant, data, schema, fields: fieldConfig, dynamicOptions, denyFields, locale, tableOverrides, view }) {
+function ViewModalContent({ open, onOpenChange, variant, data, schema, fields: fieldConfig, dynamicOptions, denyFields, locale, tableOverrides, view, form }) {
 	const excluded = react.useMemo(() => {
 		const denied = new Set(denyFields ?? []);
 		return Object.keys(schema.shape).filter((key) => {
@@ -7667,70 +7770,82 @@ function ViewModalContent({ open, onOpenChange, variant, data, schema, fields: f
 	]);
 	const rows = react.useMemo(() => data ? [data] : [], [data]);
 	const resolvedOptions = useDynamicResolveOptions(fieldConfig, rows, excluded);
-	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
-		className: "grid gap-4 py-4",
-		children: (0, __tanstack_react_table.useReactTable)({
-			data: rows,
-			columns: react.useMemo(() => {
-				const overrides = {};
-				for (const [key, fieldSchema] of Object.entries(schema.shape).filter(([fieldKey]) => !excluded.includes(fieldKey))) {
-					const config = fieldConfig?.[key] ?? {};
-					const tableConfig = getTableConfig(config);
-					const listOverride = tableOverrides?.[key];
-					const options = getTableOptions(config) ?? resolvedOptions.optionsByField[key] ?? (tableConfig?.dataSource !== void 0 ? void 0 : dynamicOptions?.[key]);
-					overrides[key] = {
-						label: tableConfig?.label ?? config.label ?? listOverride?.label ?? humanize(key),
-						index: tableConfig?.index ?? listOverride?.index,
-						cell: ({ getValue, row }) => {
-							const value = getValue();
-							return config.format?.(value, {
-								row: row.original,
-								target: "display"
-							}) ?? renderFieldValue(value, parseZodField(fieldSchema).type, locale.boolean, options, tableConfig?.display ?? "auto", Infinity);
-						},
-						...view?.presentation === "table" ? listOverride : void 0,
-						hidden: false,
-						...view?.overrides?.[key]
-					};
-				}
-				return createTableSchema(schema, {
-					overrides,
-					exclude: excluded
-				});
-			}, [
-				schema,
-				excluded,
-				fieldConfig,
-				tableOverrides,
-				view,
-				resolvedOptions.optionsByField,
-				dynamicOptions,
-				locale.boolean
-			]),
-			getCoreRowModel: (0, __tanstack_react_table.getCoreRowModel)()
-		}).getRowModel().rows[0]?.getAllCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid grid-cols-3 items-start gap-4",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-				className: "text-sm font-medium text-muted-foreground",
-				children: cell.column.columnDef.meta?.label ?? humanize(cell.column.id)
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-				className: "col-span-2 min-w-0 whitespace-pre-wrap break-words text-sm",
-				children: (0, __tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-			})]
-		}, cell.id))
-	});
-	if (variant === "sheet") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.Sheet, {
-		open,
-		onOpenChange,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.SheetContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.SheetHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.SheetTitle, { children: locale.viewModal.title }) }), content] })
+	const table = (0, __tanstack_react_table.useReactTable)({
+		data: rows,
+		columns: react.useMemo(() => {
+			const overrides$1 = {};
+			for (const [key, fieldSchema] of Object.entries(schema.shape).filter(([fieldKey]) => !excluded.includes(fieldKey))) {
+				const config = fieldConfig?.[key] ?? {};
+				const tableConfig = getTableConfig(config);
+				const listOverride = tableOverrides?.[key];
+				const options = getTableOptions(config) ?? resolvedOptions.optionsByField[key] ?? (tableConfig?.dataSource !== void 0 ? void 0 : dynamicOptions?.[key]);
+				overrides$1[key] = {
+					label: tableConfig?.label ?? config.label ?? listOverride?.label ?? humanize(key),
+					index: tableConfig?.index ?? listOverride?.index,
+					cell: ({ getValue, row }) => {
+						const value = getValue();
+						return config.format?.(value, {
+							row: row.original,
+							target: "display"
+						}) ?? (tableConfig?.display && tableConfig.display !== "auto" || options?.some((option) => option.badgeTone) ? renderFieldValue(value, parseZodField(fieldSchema).type, locale.boolean, options, tableConfig?.display ?? "auto", Infinity) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadPrettyValue, {
+							value,
+							options,
+							date: parseZodField(fieldSchema).type === "date"
+						}));
+					},
+					...view?.presentation === "table" ? listOverride : void 0,
+					hidden: false,
+					...view?.overrides?.[key]
+				};
+			}
+			return createTableSchema(schema, {
+				overrides: overrides$1,
+				exclude: excluded
+			});
+		}, [
+			schema,
+			excluded,
+			fieldConfig,
+			tableOverrides,
+			view,
+			resolvedOptions.optionsByField,
+			dynamicOptions,
+			locale.boolean
+		]),
+		getCoreRowModel: (0, __tanstack_react_table.getCoreRowModel)()
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.Dialog, {
-		open,
-		onOpenChange,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.DialogContent, {
-			"aria-describedby": void 0,
-			className: "max-w-2xl max-h-[80vh] overflow-y-auto",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.DialogTitle, { children: locale.viewModal.title }) }), content]
+	const detailSchema = react.useMemo(() => schema.omit(Object.fromEntries(excluded.map((key) => [key, true]))), [schema, excluded]);
+	const overrides = buildFormOverrides(fieldConfig, form?.overrides, denyFields, "view");
+	const renderers = {};
+	for (const [index$1, cell] of (table.getRowModel().rows[0]?.getAllCells() ?? []).entries()) {
+		const key = cell.column.id;
+		overrides[key] = {
+			...overrides[key],
+			title: cell.column.columnDef.meta?.label ?? humanize(key),
+			"x-index": index$1
+		};
+		renderers[key] = () => (0, __tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
+		delete overrides[key]["x-data-source"];
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadPrettyBooleanLocale.Provider, {
+		value: locale.boolean,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadPrettyRenderers.Provider, {
+			value: renderers,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrudFormModal, {
+				open,
+				onOpenChange,
+				mode: "view",
+				variant,
+				schema: detailSchema,
+				initialValues: data ?? void 0,
+				overrides,
+				scope: form?.scope,
+				title: locale.viewModal.title,
+				gridColumns: form?.columns,
+				labelAlign: form?.labelAlign,
+				labelWidth: form?.labelWidth,
+				className: form?.className
+			})
 		})
 	});
 }
@@ -8235,6 +8350,8 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				scope: formConfig?.scope,
 				locale: locale.formModal,
 				gridColumns: formConfig?.columns,
+				labelAlign: formConfig?.labelAlign,
+				labelWidth: formConfig?.labelWidth,
 				className: formConfig?.className
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModal, {
@@ -8248,7 +8365,8 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				denyFields,
 				locale,
 				tableOverrides: detailTableOverrides,
-				view: viewConfig
+				view: viewConfig,
+				form: formConfig
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.AlertDialog, {
 				open: resource.modal.deleteOpen,