@wordrhyme/auto-crud 1.1.2 → 1.1.4

package/dist/index.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from "react";
 import { ArrowDownUp, BadgeCheck, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, CommandIcon, Download, Ellipsis, EyeOff, FileDown, FileSpreadsheetIcon, GripVertical, ListFilter, ListFilterIcon, Loader2, PlusCircle, Settings2, Text, Trash2, Upload, X, XCircle } from "lucide-react";
 import { flexRender, getCoreRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Calendar, Checkbox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Slider, Switch } from "@pixpilot/shadcn";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Calendar, Checkbox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Slider, Switch, cn as cn$1 } from "@pixpilot/shadcn";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -18,6 +18,7 @@ import { z } from "zod";
 import { createForm } from "@formily/core";
 import { Form, JsonSchemaField } from "@pixpilot/formily-shadcn";
 import { connect, mapProps } from "@formily/react";
+import { Combobox } from "@pixpilot/shadcn-ui";
 import { toast } from "sonner";
 
 //#region src/lib/utils.ts
@@ -2663,8 +2664,17 @@ function DataTableViewOptions({ table, disabled,...props }) {
 
 //#endregion
 //#region src/components/auto-crud/auto-table-simple-filters.tsx
-function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilters, onFiltersChange }) {
-	const columns = React.useMemo(() => table.getAllColumns().filter((col) => col.getCanFilter()), [table]);
+function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilters, onFiltersChange, leading }) {
+	const columns = React.useMemo(() => table.getAllColumns().filter((col) => col.getCanFilter()).sort((a, b) => {
+		const readOrder = (column) => {
+			const metaIndex = column.columnDef.meta?.index;
+			const columnIndex = column.columnDef.index;
+			return typeof metaIndex === "number" ? metaIndex : typeof columnIndex === "number" ? columnIndex : 1e4;
+		};
+		const orderDiff = readOrder(a) - readOrder(b);
+		if (orderDiff !== 0) return orderDiff;
+		return a.getIndex() - b.getIndex();
+	}), [table]);
 	const queryStateOptions = table.options.meta?.queryStateOptions;
 	const [queryFilters, setQueryFilters] = useReadableFilters(columns, {
 		...queryStateOptions,
@@ -2721,32 +2731,65 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	const [expanded, setExpanded] = React.useState(false);
 	const [visibleCount, setVisibleCount] = React.useState(null);
 	const containerRef = React.useRef(null);
+	const hasLeading = leading != null;
+	const filterMeasureKey = React.useMemo(() => filters.map((filter) => [
+		filter.id,
+		filter.operator,
+		Array.isArray(filter.value) ? filter.value.join(",") : String(filter.value ?? "")
+	].join(":")).join("|"), [filters]);
 	const calcVisibleCount = React.useCallback(() => {
 		const el = containerRef.current;
 		if (!el) return;
-		const items = el.querySelectorAll("[data-filter-item]");
-		if (items.length === 0) return;
+		const items = Array.from(el.querySelectorAll("[data-filter-item]"));
+		if (items.length === 0) {
+			setVisibleCount(null);
+			return;
+		}
 		const restoreList = [];
-		el.querySelectorAll(".hidden").forEach((node) => {
-			const htmlNode = node;
-			htmlNode.classList.remove("hidden");
-			restoreList.push(htmlNode);
+		el.querySelectorAll("[data-filter-item].hidden, [data-filter-toggle].hidden").forEach((node) => {
+			node.classList.remove("hidden");
+			restoreList.push(node);
 		});
-		el.style.flex = "1 1 0%";
-		el.offsetHeight;
-		const firstTop = items[0].offsetTop;
+		const availableWidth = el.getBoundingClientRect().width;
+		const previousFlex = el.style.flex;
+		const previousWidth = el.style.width;
+		el.style.flex = `0 0 ${availableWidth}px`;
+		el.style.width = `${availableWidth}px`;
+		el.getBoundingClientRect();
+		const computedStyle = window.getComputedStyle(el);
+		const gap = Number.parseFloat(computedStyle.columnGap) || Number.parseFloat(computedStyle.gap) || 0;
+		const leadingEl = el.querySelector("[data-filter-leading]");
+		const toggle = el.querySelector("[data-filter-toggle]");
+		const reset = el.querySelector("[data-filter-reset]");
+		const addWidth = (current, next) => {
+			if (next <= 0) return current;
+			if (current === 0) return next;
+			return current + gap + next;
+		};
+		const leadingWidth = leadingEl?.offsetWidth ?? 0;
+		const itemWidths = items.map((item) => item.offsetWidth);
+		const toggleWidth = toggle?.offsetWidth ?? 0;
+		const resetWidth = reset?.offsetWidth ?? 0;
+		if (itemWidths.reduce((width, itemWidth) => addWidth(width, itemWidth), addWidth(leadingWidth, resetWidth)) <= availableWidth) {
+			el.style.flex = previousFlex;
+			el.style.width = previousWidth;
+			restoreList.forEach((node) => node.classList.add("hidden"));
+			setVisibleCount(null);
+			return;
+		}
+		const trailingWidth = addWidth(addWidth(0, toggleWidth), resetWidth);
+		let usedWidth = leadingWidth;
 		let count = 0;
-		for (const item of Array.from(items)) {
-			if (item.offsetTop > firstTop) break;
+		for (const itemWidth of itemWidths) {
+			const nextWidth = addWidth(usedWidth, itemWidth);
+			if (addWidth(nextWidth, trailingWidth) > availableWidth) break;
+			usedWidth = nextWidth;
 			count++;
 		}
-		const btn = el.querySelector("[data-filter-toggle]");
-		if (btn && count < items.length && count > 0) {
-			if (btn.offsetTop > firstTop) count--;
-		}
-		el.style.flex = "";
+		el.style.flex = previousFlex;
+		el.style.width = previousWidth;
 		restoreList.forEach((node) => node.classList.add("hidden"));
-		setVisibleCount(count >= items.length ? null : count);
+		setVisibleCount(count);
 	}, []);
 	React.useLayoutEffect(() => {
 		if (!mounted) return;
@@ -2754,6 +2797,9 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	}, [
 		mounted,
 		filterColumns.length,
+		hasLeading,
+		hasFilters,
+		filterMeasureKey,
 		calcVisibleCount
 	]);
 	React.useEffect(() => {
@@ -2776,13 +2822,19 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	}, [
 		mounted,
 		filterColumns.length,
+		hasLeading,
 		calcVisibleCount
 	]);
 	if (!mounted) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
-		className: "flex flex-wrap items-center gap-2 min-w-0",
+		className: "flex flex-1 flex-wrap items-center gap-2 min-w-0",
 		children: [
+			leading != null ? /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				"data-filter-leading": true,
+				children: leading
+			}) : null,
 			filterColumns.map((column, index) => {
 				const meta = column.columnDef.meta;
 				const value = getFilterValue(column.id);
@@ -2846,6 +2898,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 				children: expanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
 			}),
 			hasFilters && /* @__PURE__ */ jsxs(Button, {
+				"data-filter-reset": true,
 				variant: "outline",
 				size: "sm",
 				className: "h-8 border-dashed shrink-0",
@@ -3915,7 +3968,7 @@ function createTableSchema(schema, options) {
 		if (cached) return [...cached];
 	}
 	const shape = schema.shape;
-	const columns = [];
+	const columnEntries = [];
 	for (const [key, fieldSchema] of Object.entries(shape)) {
 		if (exclude.includes(key)) continue;
 		const override = overrides?.[key];
@@ -3936,20 +3989,31 @@ function createTableSchema(schema, options) {
 			options: override?.meta?.options ?? autoOptions
 		};
 		const { meta: _ignoredMeta,...restOverride } = override ?? {};
-		columns.push({
-			id: key,
-			accessorKey: key,
-			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
-				column,
-				label
-			}),
-			cell: ({ row }) => renderCell(row.getValue(key), parsed.type),
-			enableColumnFilter: true,
-			enableSorting: true,
-			meta,
-			...restOverride
+		const sourceIndex = columnEntries.length;
+		const order = typeof restOverride.index === "number" ? restOverride.index : typeof meta.index === "number" ? meta.index : 1e4 + sourceIndex;
+		columnEntries.push({
+			order,
+			sourceIndex,
+			column: {
+				id: key,
+				accessorKey: key,
+				header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+					column,
+					label
+				}),
+				cell: ({ row }) => renderCell(row.getValue(key), parsed.type),
+				enableColumnFilter: true,
+				enableSorting: true,
+				meta,
+				...restOverride
+			}
 		});
 	}
+	const columns = columnEntries.sort((a, b) => {
+		const orderDiff = a.order - b.order;
+		if (orderDiff !== 0) return orderDiff;
+		return a.sourceIndex - b.sourceIndex;
+	}).map((entry) => entry.column);
 	if (canCache) baseTableSchemaCache.set(schema, columns);
 	return columns;
 }
@@ -4621,10 +4685,19 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, getSelectedRows }) {
+function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, getSelectedRows }) {
 	const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : DEFAULT_MODES;
 	const [currentMode, setCurrentMode] = useQueryState("filterMode", parseAsStringEnum(modes).withDefault(modes[0] ?? "simple"));
 	const showToggle = modes.length > 1;
+	const [searchValue, setSearchValue] = useUrlState("search", parseAsString.withDefault(""), {
+		shallow: false,
+		clearOnDefault: true
+	});
+	const [, setSearchPage] = useUrlState("page", parseAsInteger.withDefault(1), {
+		shallow: false,
+		clearOnDefault: true
+	});
+	const searchConfig = search && typeof search === "object" ? search : {};
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
 		columns: useMemo(() => {
@@ -4696,11 +4769,21 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 			})
 		})
 	})] }) : null;
+	const searchInput = search ? /* @__PURE__ */ jsx(Input, {
+		value: searchValue,
+		onChange: (event) => {
+			setSearchValue(event.target.value);
+			setSearchPage(1);
+		},
+		placeholder: searchConfig.placeholder ?? "搜索",
+		className: "h-8 w-48 shrink-0"
+	}) : null;
 	const filtersContent = useMemo(() => {
 		switch (currentMode) {
 			case "simple": return /* @__PURE__ */ jsx(AutoTableSimpleFilters, {
 				table,
-				shallow
+				shallow,
+				leading: searchInput
 			});
 			case "command": return /* @__PURE__ */ jsx(DataTableFilterMenu, {
 				table,
@@ -4720,6 +4803,7 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 		currentMode,
 		table,
 		shallow,
+		searchInput,
 		debounceMs,
 		throttleMs
 	]);
@@ -4729,12 +4813,16 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex w-full items-start justify-between gap-2 p-1",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-1 items-start gap-2 min-h-[40px]",
+					className: "flex min-h-[40px] min-w-0 flex-1 items-start gap-2",
 					"data-filter-parent": true,
-					children: [currentMode !== "simple" && /* @__PURE__ */ jsx(DataTableSortList, {
-						table,
-						align: "start"
-					}), filtersContent]
+					children: [
+						currentMode !== "simple" && searchInput,
+						currentMode !== "simple" && /* @__PURE__ */ jsx(DataTableSortList, {
+							table,
+							align: "start"
+						}),
+						filtersContent
+					]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [
@@ -4923,10 +5011,44 @@ function createEditFormSchema(schema, options) {
 
 //#endregion
 //#region src/components/auto-crud/auto-form.tsx
+const COMBOBOX_LIST_CLASS = "[&_[cmdk-list]]:max-h-[360px]";
 const FormilySwitch = connect(Switch, mapProps({
 	value: "checked",
 	onInput: "onCheckedChange"
 }));
+const FormilyCombobox = connect(AutoCrudCombobox, mapProps({ dataSource: "options" }));
+function AutoCrudCombobox({ options = [], filter, className,...props }) {
+	const resolvedFilter = useMemo(() => {
+		if (typeof filter === "function") return filter;
+		return createComboboxFilter(options);
+	}, [filter, options]);
+	return /* @__PURE__ */ jsx(Combobox, {
+		...props,
+		options,
+		filter: resolvedFilter,
+		className: cn$1(COMBOBOX_LIST_CLASS, className)
+	});
+}
+function createComboboxFilter(options) {
+	const searchTextByValue = new Map(options.map((option) => [option.value, collectSearchText(option.value, option.label, option.searchText, option.keywords).toLocaleLowerCase()]));
+	return (value, search, keywords) => {
+		const query = search.trim().toLocaleLowerCase();
+		if (!query) return 1;
+		const searchText = collectSearchText(searchTextByValue.get(value), keywords).toLocaleLowerCase();
+		if (searchText === query) return 2;
+		return searchText.includes(query) ? 1 : 0;
+	};
+}
+function collectSearchText(...parts) {
+	const texts = [];
+	for (const part of parts) {
+		if (!part) continue;
+		if (Array.isArray(part)) texts.push(...part.map(String));
+		else if (typeof part === "object") texts.push(...Object.values(part).filter(Boolean).map(String));
+		else texts.push(String(part));
+	}
+	return texts.join(" ");
+}
 function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, overrides, mode = "create", loading = false, gridColumns = 1, labelAlign = "top", labelWidth, showSubmitButton = true }, ref) {
 	const form = useMemo(() => createForm({ initialValues }), [JSON.stringify(initialValues)]);
 	const formSchema = useMemo(() => createEditFormSchema(zodSchema, {
@@ -4951,10 +5073,16 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, overrides,
 		form,
 		children: [/* @__PURE__ */ jsx(JsonSchemaField, {
 			schema: formSchema,
-			components: { fields: { Switch: {
-				component: FormilySwitch,
-				decorator: "FormItem"
-			} } }
+			components: { fields: {
+				Combobox: {
+					component: FormilyCombobox,
+					decorator: "FormItem"
+				},
+				Switch: {
+					component: FormilySwitch,
+					decorator: "FormItem"
+				}
+			} }
 		}), showSubmitButton && /* @__PURE__ */ jsx("div", {
 			className: "flex justify-end gap-2 mt-6",
 			children: /* @__PURE__ */ jsx(Button, {
@@ -6046,6 +6174,11 @@ function resolveActions(actionsOrFn, defaults, rowActionsLocale) {
 */
 function AutoCrudTable({ title, description, schema, resource, fields, table: tableConfig, form: formConfig, permissions, actions: actionItems, toolbarActions, locale: localeProp, onCreate }) {
 	const locale = resolveLocale(localeProp);
+	const resolvedSchema = resource.schema ?? schema;
+	const resolvedFields = React.useMemo(() => ({
+		...fields,
+		...resource.fields
+	}), [fields, resource.fields]);
 	const can = {
 		create: permissions?.can?.create ?? true,
 		update: permissions?.can?.update ?? true,
@@ -6061,10 +6194,10 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 	const [exporting, setExporting] = React.useState(false);
 	const getSelectedRowsRef = React.useRef(null);
 	const importColumns = React.useMemo(() => {
-		const shape = schema.shape;
+		const shape = resolvedSchema.shape;
 		const denySet = new Set(denyFields ?? []);
 		return Object.keys(shape).filter((key) => !denySet.has(key));
-	}, [schema, denyFields]);
+	}, [resolvedSchema, denyFields]);
 	const handleExport = React.useCallback(async (mode) => {
 		const filename = title ?? "export";
 		const excludeColumns = denyFields;
@@ -6096,21 +6229,34 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 			setExporting(false);
 		}
 	}, [selectedCount, handleExport]);
-	const tableOverrides = React.useMemo(() => buildTableOverrides(fields, tableConfig?.overrides), [fields, tableConfig?.overrides]);
-	const formOverrides = React.useMemo(() => buildFormOverrides(fields, formConfig?.overrides, denyFields), [
-		fields,
+	const tableOverrides = React.useMemo(() => buildTableOverrides(resolvedFields, tableConfig?.overrides), [resolvedFields, tableConfig?.overrides]);
+	const formOverrides = React.useMemo(() => buildFormOverrides(resolvedFields, formConfig?.overrides, denyFields), [
+		resolvedFields,
 		formConfig?.overrides,
 		denyFields
 	]);
-	const hiddenColumns = React.useMemo(() => buildHiddenColumns(fields, tableConfig?.hidden, denyFields), [
-		fields,
+	const hiddenColumns = React.useMemo(() => buildHiddenColumns(resolvedFields, tableConfig?.hidden, denyFields), [
+		resolvedFields,
 		tableConfig?.hidden,
 		denyFields
 	]);
-	const batchFields = React.useMemo(() => buildBatchUpdateFields(schema, tableConfig?.batchFields, fields), [
-		schema,
+	const searchConfig = React.useMemo(() => {
+		const tableSearch = tableConfig?.search;
+		if (tableSearch === false) return false;
+		if (tableSearch && typeof tableSearch === "object") return tableSearch;
+		return Object.values(resolvedFields).some((field) => field?.search === true) ? true : false;
+	}, [resolvedFields, tableConfig?.search]);
+	const batchFields = React.useMemo(() => buildBatchUpdateFields(resolvedSchema, tableConfig?.batchFields, resolvedFields), [
+		resolvedSchema,
 		tableConfig?.batchFields,
-		fields
+		resolvedFields
+	]);
+	const formInitialValues = React.useMemo(() => {
+		return resource.modal.createOpen ? resource.modal.copySource ?? void 0 : resource.modal.selected ?? void 0;
+	}, [
+		resource.modal.createOpen,
+		resource.modal.copySource,
+		resource.modal.selected
 	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
@@ -6191,11 +6337,12 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 			}),
 			/* @__PURE__ */ jsx(AutoTable, {
 				data: resource.tableData.data,
-				schema,
+				schema: resolvedSchema,
 				pageCount: resource.tableData.pageCount,
 				overrides: tableOverrides,
 				exclude: hiddenColumns,
 				filterMode: tableConfig?.filterModes,
+				search: searchConfig,
 				actions: resolveActions(actionItems, {
 					openView: resource.handlers.openView,
 					openEdit: can.update ? resource.handlers.openEdit : void 0,
@@ -6216,8 +6363,8 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 				open: resource.modal.createOpen || resource.modal.editOpen,
 				onOpenChange: (open) => !open && resource.handlers.closeModals(),
 				mode: resource.modal.createOpen ? "create" : "edit",
-				schema,
-				initialValues: resource.modal.createOpen ? resource.modal.copySource ?? void 0 : resource.modal.selected ?? void 0,
+				schema: resolvedSchema,
+				initialValues: formInitialValues,
 				onSubmit: (values) => {
 					if (resource.modal.createOpen) resource.handlers.submitCreate(values);
 					else resource.handlers.submitUpdate(values);
@@ -6234,8 +6381,8 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 				onOpenChange: (open) => !open && resource.handlers.closeModals(),
 				variant: resource.modal.variant,
 				data: resource.modal.selected,
-				schema,
-				fields,
+				schema: resolvedSchema,
+				fields: resolvedFields,
 				denyFields,
 				locale
 			}),
@@ -6954,6 +7101,53 @@ const noopToastAdapter = {
 	info: () => {},
 	warning: () => {}
 };
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isJsonSchemaObject(value) {
+	return isRecord(value) && isRecord(value.properties);
+}
+function readJsonSchemaType(property) {
+	return Array.isArray(property.type) ? property.type.find((item) => item !== "null") : property.type;
+}
+function jsonPropertyToZod(property, required) {
+	const enumValues = property.enum?.filter((value) => typeof value === "string");
+	let schema;
+	if (enumValues && enumValues.length > 0) schema = z.enum(enumValues);
+	else switch (readJsonSchemaType(property)) {
+		case "number":
+		case "integer":
+			schema = z.number();
+			break;
+		case "boolean":
+			schema = z.boolean();
+			break;
+		case "array":
+			schema = z.array(z.unknown());
+			break;
+		case "object":
+			schema = z.record(z.string(), z.unknown());
+			break;
+		case "string":
+			schema = property.format === "date" || property.format === "date-time" ? z.coerce.date() : z.string();
+			break;
+		default: schema = z.unknown();
+	}
+	return required ? schema : schema.optional();
+}
+function mergeMetadataSchema(baseSchema, metadataSchema) {
+	if (!isJsonSchemaObject(metadataSchema)) return baseSchema;
+	const required = new Set(Array.isArray(metadataSchema.required) ? metadataSchema.required.filter((field) => typeof field === "string") : []);
+	const extensionShape = {};
+	for (const [field, property] of Object.entries(metadataSchema.properties ?? {})) {
+		if (field in baseSchema.shape) continue;
+		extensionShape[field] = jsonPropertyToZod(property, required.has(field));
+	}
+	return Object.keys(extensionShape).length > 0 ? baseSchema.extend(extensionShape) : baseSchema;
+}
+function readMetadataFields(fields) {
+	return isRecord(fields) ? fields : void 0;
+}
 /**
 * Modal 状态 Reducer
 */
@@ -7012,12 +7206,16 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 	useEffect(() => {
 		hooksRef.current = hooks;
 	}, [hooks]);
-	const columns = useMemo(() => createTableSchema(schema), [schema]);
+	const metadata = (router.meta?.useQuery(void 0, { staleTime: 3e4 }))?.data;
+	const resolvedSchema = useMemo(() => mergeMetadataSchema(schema, metadata?.schema), [schema, metadata?.schema]);
+	const metadataFields = useMemo(() => readMetadataFields(metadata?.fields), [metadata?.fields]);
+	const columns = useMemo(() => createTableSchema(resolvedSchema), [resolvedSchema]);
 	const [urlParams] = useQueryStates({
 		page: parseAsInteger.withDefault(1),
 		perPage: parseAsInteger.withDefault(10),
 		sort: getSortingStateParser().withDefault([]),
-		joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and")
+		joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+		search: parseAsString.withDefault("")
 	}, { shallow: false });
 	const [filters] = useReadableFilters(columns, { shallow: false });
 	const queryInput = useMemo(() => {
@@ -7026,7 +7224,8 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 			perPage: urlParams.perPage,
 			sort: urlParams.sort,
 			filters,
-			joinOperator: urlParams.joinOperator
+			joinOperator: urlParams.joinOperator,
+			...urlParams.search.trim() ? { search: urlParams.search.trim() } : {}
 		};
 		return queryTransform ? queryTransform(autoParams) : autoParams;
 	}, [
@@ -7038,6 +7237,7 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 		placeholderData: keepPreviousData,
 		staleTime: 0
 	});
+	const tableRows = listQuery.data?.data ?? [];
 	const createMutation = router.create.useMutation();
 	const updateMutation = router.update.useMutation();
 	const deleteMutation = router.delete.useMutation();
@@ -7290,11 +7490,13 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 	const canExport = !!(exportFetcher || exportQuery);
 	return {
 		tableData: {
-			data: listQuery.data?.data ?? [],
+			data: tableRows,
 			pageCount: listQuery.data?.pageCount ?? 0,
 			isLoading: listQuery.isLoading,
 			isFetching: listQuery.isFetching
 		},
+		schema: resolvedSchema,
+		fields: metadataFields,
 		modal,
 		mutations: {
 			isCreating: createMutation.isPending,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -83,10 +83,10 @@
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
     "@internal/prettier-config": "0.0.1",
-    "@internal/tsconfig": "0.1.0",
     "@internal/eslint-config": "0.3.0",
-    "@internal/vitest-config": "0.1.0",
-    "@internal/tsdown-config": "0.1.0"
+    "@internal/tsconfig": "0.1.0",
+    "@internal/tsdown-config": "0.1.0",
+    "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {