@wordrhyme/auto-crud 1.14.1 → 1.14.3

package/README.md

@@ -357,6 +357,8 @@ const resource = useAutoCrudResource({
 
 未配置的参数名保留默认值。搜索仍使用共享的 `search` 参数，字段筛选仍使用字段名；`queryKeys` 不隔离这些值。筛选或搜索变化时，仅重置该表格对应的页码。直接使用 `AutoTable` 时传入相同的 `queryKeys`；`table.queryKeys` 可覆盖资源提供的整组配置。
 
+全局搜索输入立即显示，停止输入 200ms 后提交查询并回到第一页；清空立即提交，中文输入法组词期间不查询。可以通过 `table.search: { debounceMs: 0 }` 恢复即时查询，或指定其他延时；直接使用 `AutoTable` 时配置 `search.debounceMs`。浏览器导航或其他 URL 状态变化会取消尚未提交的搜索，并按 URL 恢复输入框。
+
 `enableRowSelection` 默认 `true`，设为 `false` 后关闭行选择并隐藏选择列和批量操作栏。`initialColumnVisibility` 只设置首次显示的列，用户仍可通过列设置切换；它不同于 `table.hidden` 对列的排除。
 
 ### `useAutoCrudResource()`
@@ -1788,6 +1790,8 @@ does not control detail layout, even with `view.presentation: 'table'`.
 `view.overrides[field].index` takes precedence for detail-only ordering. Fields
 hidden only in forms remain available in details; use detail ordering to place
 read-only business fields next to related information or audit fields at the end.
+Field spans come from the shared form configuration; details do not expand arrays,
+objects or long-text fields to a full row automatically.
 
 ```tsx
 <AutoCrudTable

package/dist/index.cjs

@@ -1166,11 +1166,15 @@ function useCallbackRef(callback) {
 function useDebouncedCallback(callback, delay) {
 	const handleCallback = useCallbackRef(callback);
 	const debounceTimerRef = react.useRef(0);
-	react.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
-	return react.useCallback((...args) => {
+	const cancel = react.useCallback(() => {
+		window.clearTimeout(debounceTimerRef.current);
+	}, []);
+	react.useEffect(() => cancel, [cancel, delay]);
+	const setValue = react.useCallback((...args) => {
 		window.clearTimeout(debounceTimerRef.current);
 		debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
 	}, [handleCallback, delay]);
+	return Object.assign(setValue, { cancel });
 }
 
 //#endregion
@@ -4015,6 +4019,57 @@ function SimpleDateFilter({ title, maxDate, multiple, value, onChange }) {
 	});
 }
 
+//#endregion
+//#region src/components/auto-crud/auto-table-search.tsx
+function AutoTableSearch({ placeholder = "搜索", debounceMs = 200, pageKey = "page" }) {
+	const [value, setValue] = (0, react.useState)(() => getUrlParams().get("search") ?? "");
+	const composing = (0, react.useRef)(false);
+	const commit = (0, react.useCallback)((next) => {
+		const params = getUrlParams();
+		if ((params.get("search") ?? "") === next) return;
+		if (next) params.set("search", next);
+		else params.delete("search");
+		params.delete(pageKey);
+		setSearchParams(params);
+	}, [pageKey]);
+	const debouncedCommit = useDebouncedCallback(commit, debounceMs);
+	const { cancel } = debouncedCommit;
+	(0, react.useEffect)(() => {
+		const sync = () => {
+			cancel();
+			setValue(getUrlParams().get("search") ?? "");
+		};
+		window.addEventListener("popstate", sync);
+		window.addEventListener("urlchange", sync);
+		return () => {
+			cancel();
+			window.removeEventListener("popstate", sync);
+			window.removeEventListener("urlchange", sync);
+		};
+	}, [cancel, pageKey]);
+	const change = (next) => {
+		setValue(next);
+		cancel();
+		if (composing.current) return;
+		if (!next || debounceMs <= 0) commit(next);
+		else debouncedCommit(next);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Input, {
+		value,
+		onChange: (event) => change(event.target.value),
+		onCompositionStart: () => {
+			composing.current = true;
+			cancel();
+		},
+		onCompositionEnd: (event) => {
+			composing.current = false;
+			change(event.currentTarget.value);
+		},
+		placeholder,
+		className: "h-8 w-48 shrink-0"
+	});
+}
+
 //#endregion
 //#region src/components/data-table/data-table-column-header.tsx
 function DataTableColumnHeader({ column, label, className,...props }) {
@@ -5194,14 +5249,6 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 	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(queryKeys?.page ?? "page", parseAsInteger.withDefault(1), {
-		shallow: false,
-		clearOnDefault: true
-	});
 	const searchConfig = search && typeof search === "object" ? search : {};
 	const enableAdvancedFilter = true;
 	const { columns, expandColumnId } = (0, react.useMemo)(() => {
@@ -5363,14 +5410,9 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 			})
 		})
 	})] }) : null;
-	const searchInput = search ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Input, {
-		value: searchValue,
-		onChange: (event) => {
-			setSearchValue(event.target.value);
-			setSearchPage(1);
-		},
-		placeholder: searchConfig.placeholder ?? "搜索",
-		className: "h-8 w-48 shrink-0"
+	const searchInput = search ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoTableSearch, {
+		...searchConfig,
+		pageKey: queryKeys?.page
 	}) : null;
 	const filtersContent = (0, react.useMemo)(() => {
 		switch (currentMode) {
@@ -6268,15 +6310,10 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, fields, ove
 				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)
-				};
-			}
+			for (const property of Object.values(properties)) property["x-decorator-props"] = {
+				colon: false,
+				...property["x-decorator-props"]
+			};
 		}
 		applyDataSourceReactions(nextSchema, mode === "view");
 		return nextSchema;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { a as positionActions, i as matchesPosition, n as actionPositionSchema, r as compareOrder, t as ActionPosition } from "./position-DoBV7yB6.cjs";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _tanstack_react_table0 from "@tanstack/react-table";
@@ -676,7 +676,7 @@ declare function DataTable<TData>({
   className,
   classNames,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime9.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-table-action-bar.d.ts
 /** 批量更新字段配置 */
@@ -765,7 +765,7 @@ declare function AutoTableActionBar<TData>({
   extraActions,
   actions,
   deleteConfirmation
-}: AutoTableActionBarProps<TData>): react_jsx_runtime9.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -1042,6 +1042,8 @@ interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> extends Pick<Data
   /** 全局搜索框 */
   search?: boolean | {
     placeholder?: string;
+    /** Search delay in milliseconds. Defaults to 200; use 0 for immediate queries. */
+    debounceMs?: number;
   };
   /** Extra table controls rendered between sorting and column visibility. */
   toolbarExtra?: React.ReactNode;
@@ -1109,7 +1111,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   onSelectedRowsChange,
   getSelectedRows,
   exportTableRef
-}: AutoTableProps<T>): react_jsx_runtime9.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 type AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> = {
@@ -1152,7 +1154,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime9.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime8.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1515,9 +1517,7 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
      */
     filterModes?: FilterMode | FilterMode[];
     /** 全局搜索框；默认在存在 search: true 字段时显示 */
-    search?: boolean | {
-      placeholder?: string;
-    };
+    search?: AutoTableProps<TSchema>['search'];
     /**
      * 批量更新字段配置
      * - 只需传字段名数组，options 自动从 schema enum 推导
@@ -1622,7 +1622,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   locale: localeProp,
   onCreate,
   onExport
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime9.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-table-simple-filters.d.ts
 interface AutoTableSimpleFiltersProps<TData> {
@@ -1638,7 +1638,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime9.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime8.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = 'dialog' | 'sheet';
@@ -1687,7 +1687,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T> & CrudFormModalMode<T>): react_jsx_runtime9.JSX.Element;
+}: CrudFormModalProps<T> & CrudFormModalMode<T>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1709,7 +1709,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime9.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = 'selected' | 'filtered';
@@ -1729,7 +1729,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime9.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1740,7 +1740,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime9.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1752,7 +1752,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime9.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1766,7 +1766,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime9.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<'div'>, TablePaginationOptions {
@@ -1782,7 +1782,7 @@ declare function DataTablePagination<TData>({
   pageJumpLabel,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime9.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1793,7 +1793,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime9.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends PopoverContentProps {
@@ -1806,7 +1806,7 @@ declare function DataTableViewOptions<TData>({
   disabled,
   locale,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime9.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/lib/crud-actions.d.ts
 type CrudActionZone = 'toolbar' | 'row' | 'batch';

package/dist/index.d.ts

@@ -1042,6 +1042,8 @@ interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> extends Pick<Data
   /** 全局搜索框 */
   search?: boolean | {
     placeholder?: string;
+    /** Search delay in milliseconds. Defaults to 200; use 0 for immediate queries. */
+    debounceMs?: number;
   };
   /** Extra table controls rendered between sorting and column visibility. */
   toolbarExtra?: React.ReactNode;
@@ -1515,9 +1517,7 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
      */
     filterModes?: FilterMode | FilterMode[];
     /** 全局搜索框；默认在存在 search: true 字段时显示 */
-    search?: boolean | {
-      placeholder?: string;
-    };
+    search?: AutoTableProps<TSchema>['search'];
     /**
      * 批量更新字段配置
      * - 只需传字段名数组，options 自动从 schema enum 推导

package/dist/index.js

@@ -1150,11 +1150,15 @@ function useCallbackRef(callback) {
 function useDebouncedCallback(callback, delay) {
 	const handleCallback = useCallbackRef(callback);
 	const debounceTimerRef = React.useRef(0);
-	React.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
-	return React.useCallback((...args) => {
+	const cancel = React.useCallback(() => {
+		window.clearTimeout(debounceTimerRef.current);
+	}, []);
+	React.useEffect(() => cancel, [cancel, delay]);
+	const setValue = React.useCallback((...args) => {
 		window.clearTimeout(debounceTimerRef.current);
 		debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
 	}, [handleCallback, delay]);
+	return Object.assign(setValue, { cancel });
 }
 
 //#endregion
@@ -3999,6 +4003,57 @@ function SimpleDateFilter({ title, maxDate, multiple, value, onChange }) {
 	});
 }
 
+//#endregion
+//#region src/components/auto-crud/auto-table-search.tsx
+function AutoTableSearch({ placeholder = "搜索", debounceMs = 200, pageKey = "page" }) {
+	const [value, setValue] = useState(() => getUrlParams().get("search") ?? "");
+	const composing = useRef(false);
+	const commit = useCallback((next) => {
+		const params = getUrlParams();
+		if ((params.get("search") ?? "") === next) return;
+		if (next) params.set("search", next);
+		else params.delete("search");
+		params.delete(pageKey);
+		setSearchParams(params);
+	}, [pageKey]);
+	const debouncedCommit = useDebouncedCallback(commit, debounceMs);
+	const { cancel } = debouncedCommit;
+	useEffect(() => {
+		const sync = () => {
+			cancel();
+			setValue(getUrlParams().get("search") ?? "");
+		};
+		window.addEventListener("popstate", sync);
+		window.addEventListener("urlchange", sync);
+		return () => {
+			cancel();
+			window.removeEventListener("popstate", sync);
+			window.removeEventListener("urlchange", sync);
+		};
+	}, [cancel, pageKey]);
+	const change = (next) => {
+		setValue(next);
+		cancel();
+		if (composing.current) return;
+		if (!next || debounceMs <= 0) commit(next);
+		else debouncedCommit(next);
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		value,
+		onChange: (event) => change(event.target.value),
+		onCompositionStart: () => {
+			composing.current = true;
+			cancel();
+		},
+		onCompositionEnd: (event) => {
+			composing.current = false;
+			change(event.currentTarget.value);
+		},
+		placeholder,
+		className: "h-8 w-48 shrink-0"
+	});
+}
+
 //#endregion
 //#region src/components/data-table/data-table-column-header.tsx
 function DataTableColumnHeader({ column, label, className,...props }) {
@@ -5178,14 +5233,6 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 	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(queryKeys?.page ?? "page", parseAsInteger.withDefault(1), {
-		shallow: false,
-		clearOnDefault: true
-	});
 	const searchConfig = search && typeof search === "object" ? search : {};
 	const enableAdvancedFilter = true;
 	const { columns, expandColumnId } = useMemo(() => {
@@ -5347,14 +5394,9 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 			})
 		})
 	})] }) : 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"
+	const searchInput = search ? /* @__PURE__ */ jsx(AutoTableSearch, {
+		...searchConfig,
+		pageKey: queryKeys?.page
 	}) : null;
 	const filtersContent = useMemo(() => {
 		switch (currentMode) {
@@ -6252,15 +6294,10 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, fields, ove
 				className: cn$1(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: cn$1(fullWidth && decoratorProps?.gridSpan == null && "col-span-full", decoratorProps?.className)
-				};
-			}
+			for (const property of Object.values(properties)) property["x-decorator-props"] = {
+				colon: false,
+				...property["x-decorator-props"]
+			};
 		}
 		applyDataSourceReactions(nextSchema, mode === "view");
 		return nextSchema;

package/package.json

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