@wordrhyme/auto-crud 1.1.3 → 1.1.5

package/dist/index.cjs

@@ -1065,6 +1065,7 @@ function FacetedItem(props) {
 		else if (context.onItemSelect) context.onItemSelect(currentValue);
 	}, [onSelect, context]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandItem, {
+		value,
 		"aria-selected": isSelected,
 		"data-selected": isSelected,
 		className: cn("gap-2", className),
@@ -1943,6 +1944,13 @@ const DEBOUNCE_MS$1 = 300;
 const THROTTLE_MS$1 = 50;
 const FILTER_SHORTCUT_KEY = "f";
 const REMOVE_FILTER_SHORTCUTS = ["backspace", "delete"];
+function getOptionCommandValue$2(option) {
+	return [
+		option.value,
+		option.label,
+		option.searchText
+	].filter(Boolean).join(" ");
+}
 function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = THROTTLE_MS$1, shallow = true, disabled,...props }) {
 	const id = react.useId();
 	const columns = react.useMemo(() => {
@@ -2221,7 +2229,7 @@ function FilterValueSelector({ column, value, onSelect }) {
 		})] });
 		case "select":
 		case "multiSelect": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandGroup, { children: column.columnDef.meta?.options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandItem, {
-			value: option.value,
+			value: getOptionCommandValue$2(option),
 			onSelect: () => onSelect(option.value),
 			children: [
 				option.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(option.icon, {}),
@@ -2348,7 +2356,7 @@ function onFilterInputRender({ filter, column, inputId, onFilterUpdate, showValu
 					align: "start",
 					className: "w-48 p-0",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Command, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandInput, { placeholder: "Search options..." }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandList, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandEmpty, { children: "No options found." }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandGroup, { children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandItem, {
-						value: option.value,
+						value: getOptionCommandValue$2(option),
 						onSelect: () => {
 							const value = filter.variant === "multiSelect" ? selectedValues.includes(option.value) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value] : option.value;
 							onFilterUpdate(filter.filterId, { value });
@@ -2774,32 +2782,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;
@@ -2807,6 +2848,9 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	}, [
 		mounted,
 		filterColumns.length,
+		hasLeading,
+		hasFilters,
+		filterMeasureKey,
 		calcVisibleCount
 	]);
 	react.useEffect(() => {
@@ -2829,6 +2873,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	}, [
 		mounted,
 		filterColumns.length,
+		hasLeading,
 		calcVisibleCount
 	]);
 	if (!mounted) return null;
@@ -2836,7 +2881,11 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 		ref: containerRef,
 		className: "flex flex-1 flex-wrap items-center gap-2 min-w-0",
 		children: [
-			leading,
+			leading != null ? /* @__PURE__ */ (0, react_jsx_runtime.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);
@@ -2900,6 +2949,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 				children: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-4" })
 			}),
 			hasFilters && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+				"data-filter-reset": true,
 				variant: "outline",
 				size: "sm",
 				className: "h-8 border-dashed shrink-0",
@@ -2909,6 +2959,13 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 		]
 	});
 }
+function getOptionCommandValue$1(option) {
+	return [
+		option.value,
+		option.label,
+		option.searchText
+	].filter(Boolean).join(" ");
+}
 function SimpleFacetedFilter({ title, options, multiple, value, onChange }) {
 	const [open, setOpen] = react.useState(false);
 	const selectedValues = react.useMemo(() => new Set(value), [value]);
@@ -2988,6 +3045,7 @@ function SimpleFacetedFilter({ title, options, multiple, value, onChange }) {
 						children: options.map((option) => {
 							const isSelected = selectedValues.has(option.value);
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandItem, {
+								value: getOptionCommandValue$1(option),
 								onSelect: () => onItemSelect(option, isSelected),
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4814,7 +4872,7 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex w-full items-start justify-between gap-2 p-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.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" && searchInput,
@@ -5012,7 +5070,7 @@ function createEditFormSchema(schema, options) {
 
 //#endregion
 //#region src/components/auto-crud/auto-form.tsx
-const COMBOBOX_LIST_CLASS = "[&_[cmdk-list]]:max-h-[360px]";
+const COMBOBOX_LIST_CLASS = "[&_[cmdk-list]]:max-h-[360px] [&_[cmdk-list]]:overflow-x-hidden [&_[cmdk-list]]:overflow-y-auto";
 const FormilySwitch = (0, __formily_react.connect)(__pixpilot_shadcn.Switch, (0, __formily_react.mapProps)({
 	value: "checked",
 	onInput: "onCheckedChange"
@@ -5884,6 +5942,28 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title, local
 
 //#endregion
 //#region src/components/auto-crud/auto-crud-table.tsx
+function mergeFieldPart(base, override) {
+	if (override === void 0) return base;
+	if (override === false || base === false || typeof base !== "object" || typeof override !== "object" || base === null || override === null || Array.isArray(base) || Array.isArray(override)) return override;
+	return {
+		...base,
+		...override
+	};
+}
+function mergeFieldConfig(base, override) {
+	return {
+		...base,
+		...override,
+		table: mergeFieldPart(base?.table, override?.table),
+		filter: mergeFieldPart(base?.filter, override?.filter),
+		form: mergeFieldPart(base?.form, override?.form)
+	};
+}
+function mergeFields(base, override) {
+	if (!base && !override) return void 0;
+	const keys = new Set([...Object.keys(base ?? {}), ...Object.keys(override ?? {})]);
+	return Object.fromEntries(Array.from(keys).map((key) => [key, mergeFieldConfig(base?.[key], override?.[key])]));
+}
 /**
 * 从统一配置生成表格 overrides
 * 当 filter 配置存在时，合并到 meta 中（不影响列隐藏）
@@ -6176,10 +6256,7 @@ 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 resolvedFields = react.useMemo(() => mergeFields(resource.fields, fields) ?? {}, [fields, resource.fields]);
 	const can = {
 		create: permissions?.can?.create ?? true,
 		update: permissions?.can?.update ?? true,
@@ -6503,6 +6580,13 @@ function DataTableAdvancedToolbar({ table, children, className,...props }) {
 
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.tsx
+function getOptionCommandValue(option) {
+	return [
+		option.value,
+		option.label,
+		option.searchText
+	].filter(Boolean).join(" ");
+}
 function DataTableFacetedFilter({ column, title, options, multiple }) {
 	const [open, setOpen] = react.useState(false);
 	const columnFilterValue = column?.getFilterValue();
@@ -6584,6 +6668,7 @@ function DataTableFacetedFilter({ column, title, options, multiple }) {
 						children: options.map((option) => {
 							const isSelected = selectedValues.has(option.value);
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandItem, {
+								value: getOptionCommandValue(option),
 								onSelect: () => onItemSelect(option, isSelected),
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { z } from "zod";
 import * as _tanstack_react_table0 from "@tanstack/react-table";
 import { Column, ColumnDef, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
@@ -361,7 +361,7 @@ declare function AutoTableActionBar<TData>({
   enableDelete,
   extraActions,
   actions
-}: AutoTableActionBarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -529,7 +529,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   showDefaultExport,
   onSelectedCountChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime3.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -635,6 +635,7 @@ interface FilterConfig {
   options?: Array<{
     label: string;
     value: string;
+    searchText?: string;
     count?: number;
     icon?: React$1.FC<React$1.SVGProps<SVGSVGElement>>;
   }>;
@@ -874,7 +875,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   toolbarActions,
   locale: localeProp,
   onCreate
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime3.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -882,11 +883,11 @@ interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
   initialValues?: Partial<z.infer<T>>;
   onSubmit: (values: z.infer<T>) => void | Promise<void>;
   overrides?: FormSchemaOverrides;
-  mode?: "create" | "edit";
+  mode?: 'create' | 'edit';
   loading?: boolean;
   gridColumns?: number;
   /** Label 对齐方式 */
-  labelAlign?: "left" | "top" | "right";
+  labelAlign?: 'left' | 'top' | 'right';
   /** Label 宽度（labelAlign 为 left 时有效） */
   labelWidth?: number | string;
   /** 是否显示提交按钮（默认 true） */
@@ -906,7 +907,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime3.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime2.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1176,6 +1177,7 @@ interface QueryKeys {
 interface Option {
   label: string;
   value: string;
+  searchText?: string;
   count?: number;
   icon?: React.FC<React.SVGProps<SVGSVGElement>>;
 }
@@ -1207,7 +1209,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime3.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime2.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = "dialog" | "sheet";
@@ -1249,7 +1251,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime3.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1271,7 +1273,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime3.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = "selected" | "filtered";
@@ -1291,7 +1293,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime3.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1304,7 +1306,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1315,7 +1317,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1327,7 +1329,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1341,7 +1343,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
@@ -1353,7 +1355,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1364,7 +1366,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1375,7 +1377,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/hooks/use-data-table.d.ts
 interface UseDataTableProps<TData> extends Omit<TableOptions<TData>, "state" | "pageCount" | "getCoreRowModel" | "manualFiltering" | "manualPagination" | "manualSorting">, Required<Pick<TableOptions<TData>, "pageCount">> {

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as _tanstack_react_table0 from "@tanstack/react-table";
 import { Column, ColumnDef, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
 import { DropdownMenuTrigger, PopoverContent } from "@pixpilot/shadcn";
 import { ClassValue } from "clsx";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 import { z } from "zod";
 import { ISchema } from "@formily/json-schema";
 
@@ -361,7 +361,7 @@ declare function AutoTableActionBar<TData>({
   enableDelete,
   extraActions,
   actions
-}: AutoTableActionBarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -529,7 +529,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   showDefaultExport,
   onSelectedCountChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime2.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -635,6 +635,7 @@ interface FilterConfig {
   options?: Array<{
     label: string;
     value: string;
+    searchText?: string;
     count?: number;
     icon?: React$1.FC<React$1.SVGProps<SVGSVGElement>>;
   }>;
@@ -874,7 +875,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   toolbarActions,
   locale: localeProp,
   onCreate
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime2.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -882,11 +883,11 @@ interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
   initialValues?: Partial<z.infer<T>>;
   onSubmit: (values: z.infer<T>) => void | Promise<void>;
   overrides?: FormSchemaOverrides;
-  mode?: "create" | "edit";
+  mode?: 'create' | 'edit';
   loading?: boolean;
   gridColumns?: number;
   /** Label 对齐方式 */
-  labelAlign?: "left" | "top" | "right";
+  labelAlign?: 'left' | 'top' | 'right';
   /** Label 宽度（labelAlign 为 left 时有效） */
   labelWidth?: number | string;
   /** 是否显示提交按钮（默认 true） */
@@ -906,7 +907,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime2.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime13.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1176,6 +1177,7 @@ interface QueryKeys {
 interface Option {
   label: string;
   value: string;
+  searchText?: string;
   count?: number;
   icon?: React.FC<React.SVGProps<SVGSVGElement>>;
 }
@@ -1207,7 +1209,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime2.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime13.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = "dialog" | "sheet";
@@ -1249,7 +1251,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime2.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1271,7 +1273,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime2.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = "selected" | "filtered";
@@ -1291,7 +1293,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime2.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1304,7 +1306,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1315,7 +1317,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1327,7 +1329,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1341,7 +1343,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
@@ -1353,7 +1355,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1364,7 +1366,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1375,7 +1377,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime13.JSX.Element;
 //#endregion
 //#region src/hooks/use-data-table.d.ts
 interface UseDataTableProps<TData> extends Omit<TableOptions<TData>, "state" | "pageCount" | "getCoreRowModel" | "manualFiltering" | "manualPagination" | "manualSorting">, Required<Pick<TableOptions<TData>, "pageCount">> {

package/dist/index.js

@@ -1022,6 +1022,7 @@ function FacetedItem(props) {
 		else if (context.onItemSelect) context.onItemSelect(currentValue);
 	}, [onSelect, context]);
 	return /* @__PURE__ */ jsxs(CommandItem, {
+		value,
 		"aria-selected": isSelected,
 		"data-selected": isSelected,
 		className: cn("gap-2", className),
@@ -1900,6 +1901,13 @@ const DEBOUNCE_MS$1 = 300;
 const THROTTLE_MS$1 = 50;
 const FILTER_SHORTCUT_KEY = "f";
 const REMOVE_FILTER_SHORTCUTS = ["backspace", "delete"];
+function getOptionCommandValue$2(option) {
+	return [
+		option.value,
+		option.label,
+		option.searchText
+	].filter(Boolean).join(" ");
+}
 function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = THROTTLE_MS$1, shallow = true, disabled,...props }) {
 	const id = React.useId();
 	const columns = React.useMemo(() => {
@@ -2178,7 +2186,7 @@ function FilterValueSelector({ column, value, onSelect }) {
 		})] });
 		case "select":
 		case "multiSelect": return /* @__PURE__ */ jsx(CommandGroup, { children: column.columnDef.meta?.options?.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
-			value: option.value,
+			value: getOptionCommandValue$2(option),
 			onSelect: () => onSelect(option.value),
 			children: [
 				option.icon && /* @__PURE__ */ jsx(option.icon, {}),
@@ -2305,7 +2313,7 @@ function onFilterInputRender({ filter, column, inputId, onFilterUpdate, showValu
 					align: "start",
 					className: "w-48 p-0",
 					children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: "Search options..." }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No options found." }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
-						value: option.value,
+						value: getOptionCommandValue$2(option),
 						onSelect: () => {
 							const value = filter.variant === "multiSelect" ? selectedValues.includes(option.value) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value] : option.value;
 							onFilterUpdate(filter.filterId, { value });
@@ -2731,32 +2739,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;
@@ -2764,6 +2805,9 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	}, [
 		mounted,
 		filterColumns.length,
+		hasLeading,
+		hasFilters,
+		filterMeasureKey,
 		calcVisibleCount
 	]);
 	React.useEffect(() => {
@@ -2786,6 +2830,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	}, [
 		mounted,
 		filterColumns.length,
+		hasLeading,
 		calcVisibleCount
 	]);
 	if (!mounted) return null;
@@ -2793,7 +2838,11 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 		ref: containerRef,
 		className: "flex flex-1 flex-wrap items-center gap-2 min-w-0",
 		children: [
-			leading,
+			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);
@@ -2857,6 +2906,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",
@@ -2866,6 +2916,13 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 		]
 	});
 }
+function getOptionCommandValue$1(option) {
+	return [
+		option.value,
+		option.label,
+		option.searchText
+	].filter(Boolean).join(" ");
+}
 function SimpleFacetedFilter({ title, options, multiple, value, onChange }) {
 	const [open, setOpen] = React.useState(false);
 	const selectedValues = React.useMemo(() => new Set(value), [value]);
@@ -2945,6 +3002,7 @@ function SimpleFacetedFilter({ title, options, multiple, value, onChange }) {
 						children: options.map((option) => {
 							const isSelected = selectedValues.has(option.value);
 							return /* @__PURE__ */ jsxs(CommandItem, {
+								value: getOptionCommandValue$1(option),
 								onSelect: () => onItemSelect(option, isSelected),
 								children: [
 									/* @__PURE__ */ jsx("div", {
@@ -4771,7 +4829,7 @@ 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" && searchInput,
@@ -4969,7 +5027,7 @@ function createEditFormSchema(schema, options) {
 
 //#endregion
 //#region src/components/auto-crud/auto-form.tsx
-const COMBOBOX_LIST_CLASS = "[&_[cmdk-list]]:max-h-[360px]";
+const COMBOBOX_LIST_CLASS = "[&_[cmdk-list]]:max-h-[360px] [&_[cmdk-list]]:overflow-x-hidden [&_[cmdk-list]]:overflow-y-auto";
 const FormilySwitch = connect(Switch, mapProps({
 	value: "checked",
 	onInput: "onCheckedChange"
@@ -5841,6 +5899,28 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title, local
 
 //#endregion
 //#region src/components/auto-crud/auto-crud-table.tsx
+function mergeFieldPart(base, override) {
+	if (override === void 0) return base;
+	if (override === false || base === false || typeof base !== "object" || typeof override !== "object" || base === null || override === null || Array.isArray(base) || Array.isArray(override)) return override;
+	return {
+		...base,
+		...override
+	};
+}
+function mergeFieldConfig(base, override) {
+	return {
+		...base,
+		...override,
+		table: mergeFieldPart(base?.table, override?.table),
+		filter: mergeFieldPart(base?.filter, override?.filter),
+		form: mergeFieldPart(base?.form, override?.form)
+	};
+}
+function mergeFields(base, override) {
+	if (!base && !override) return void 0;
+	const keys = new Set([...Object.keys(base ?? {}), ...Object.keys(override ?? {})]);
+	return Object.fromEntries(Array.from(keys).map((key) => [key, mergeFieldConfig(base?.[key], override?.[key])]));
+}
 /**
 * 从统一配置生成表格 overrides
 * 当 filter 配置存在时，合并到 meta 中（不影响列隐藏）
@@ -6133,10 +6213,7 @@ 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 resolvedFields = React.useMemo(() => mergeFields(resource.fields, fields) ?? {}, [fields, resource.fields]);
 	const can = {
 		create: permissions?.can?.create ?? true,
 		update: permissions?.can?.update ?? true,
@@ -6460,6 +6537,13 @@ function DataTableAdvancedToolbar({ table, children, className,...props }) {
 
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.tsx
+function getOptionCommandValue(option) {
+	return [
+		option.value,
+		option.label,
+		option.searchText
+	].filter(Boolean).join(" ");
+}
 function DataTableFacetedFilter({ column, title, options, multiple }) {
 	const [open, setOpen] = React.useState(false);
 	const columnFilterValue = column?.getFilterValue();
@@ -6541,6 +6625,7 @@ function DataTableFacetedFilter({ column, title, options, multiple }) {
 						children: options.map((option) => {
 							const isSelected = selectedValues.has(option.value);
 							return /* @__PURE__ */ jsxs(CommandItem, {
+								value: getOptionCommandValue(option),
 								onSelect: () => onItemSelect(option, isSelected),
 								children: [
 									/* @__PURE__ */ jsx("div", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -66,8 +66,8 @@
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
     "@pixpilot/formily-shadcn": "1.11.20",
-    "@pixpilot/shadcn-ui": "1.21.1",
-    "@pixpilot/shadcn": "1.2.7"
+    "@pixpilot/shadcn": "1.2.7",
+    "@pixpilot/shadcn-ui": "1.21.1"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.90.15",
@@ -83,9 +83,9 @@
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
     "@internal/eslint-config": "0.3.0",
+    "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
-    "@internal/prettier-config": "0.0.1",
     "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",