@wordrhyme/auto-crud 1.8.2 → 1.10.0

package/dist/index.js

@@ -1,12 +1,12 @@
 import { i as positionActions, n as compareOrder, r as matchesPosition, t as actionPositionSchema } from "./position--p6kJnYA.js";
 import * as React from "react";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState, useSyncExternalStore } 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, RefreshCw, Settings2, Text, Trash2, Upload, X, XCircle } from "lucide-react";
-import { flexRender, getCoreRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Fragment, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { ArrowDownUp, BadgeCheck, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, CommandIcon, Download, Ellipsis, EyeOff, FileDown, FileSpreadsheetIcon, GripVertical, ListFilter, ListFilterIcon, Loader2, PlusCircle, RefreshCw, Settings2, Text, Trash2, Upload, X, XCircle } from "lucide-react";
+import { flexRender, getCoreRowModel, getExpandedRowModel, 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, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, Input, Label, Popover, PopoverContent, PopoverTrigger, Select as Select$1, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Slider, Switch, Table as Table$1, TableBody, TableCell, TableHead, TableHeader, TableRow, cn as cn$1 } from "@wordrhyme/shadcn";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { customAlphabet } from "nanoid";
 import { ActionBar, ActionBarClose, ActionBarGroup, ActionBarItem, ActionBarSelection, ActionBarSeparator, Faceted, FacetedBadgeList, FacetedContent, FacetedEmpty, FacetedGroup, FacetedInput, FacetedItem, FacetedList, FacetedTrigger, MultiCombobox, Select, Select as Select$2, Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay } from "@wordrhyme/shadcn-ui";
 import { AlertDialog as AlertDialog$1, AlertDialogAction as AlertDialogAction$1, AlertDialogCancel as AlertDialogCancel$1, AlertDialogContent as AlertDialogContent$1, AlertDialogDescription as AlertDialogDescription$1, AlertDialogFooter as AlertDialogFooter$1, AlertDialogHeader as AlertDialogHeader$1, AlertDialogTitle as AlertDialogTitle$1, Button as Button$1, Calendar as Calendar$1, Dialog as Dialog$1, DialogContent as DialogContent$1, DialogDescription as DialogDescription$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DropdownMenu as DropdownMenu$1, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuSeparator, DropdownMenuTrigger as DropdownMenuTrigger$1, Popover as Popover$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@wordrhyme/ui";
@@ -551,7 +551,7 @@ function formatDate(date, opts = {}, preset) {
 
 //#endregion
 //#region src/components/data-table/data-table.tsx
-function DataTable({ table, actionBar, pagination, children, className, classNames,...props }) {
+function DataTable({ table, actionBar, pagination, expandedRow, children, className, classNames,...props }) {
 	useDateFormatterVersion();
 	const columns = [
 		...table.getLeftVisibleLeafColumns(),
@@ -591,7 +591,7 @@ function DataTable({ table, actionBar, pagination, children, className, classNam
 						}),
 						/* @__PURE__ */ jsx(TableBody, {
 							className: classNames?.tbody,
-							children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+							children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
 								className: classNames?.tr,
 								"data-state": row.getIsSelected() && "selected",
 								children: row.getVisibleCells().map((cell) => {
@@ -602,7 +602,14 @@ function DataTable({ table, actionBar, pagination, children, className, classNam
 										children: flexRender(cell.column.columnDef.cell, cell.getContext())
 									}, cell.id);
 								})
-							}, row.id)) : /* @__PURE__ */ jsx(TableRow, {
+							}), expandedRow && row.getCanExpand() && row.getIsExpanded() && /* @__PURE__ */ jsx(TableRow, {
+								className: classNames?.tr,
+								children: /* @__PURE__ */ jsx(TableCell, {
+									colSpan: row.getVisibleCells().length,
+									className: classNames?.td,
+									children: expandedRow(row.original)
+								})
+							})] }, row.id)) : /* @__PURE__ */ jsx(TableRow, {
 								className: classNames?.tr,
 								children: /* @__PURE__ */ jsx(TableCell, {
 									colSpan: table.getAllColumns().length,
@@ -997,6 +1004,11 @@ function useReadableFilters(columns, options = {}) {
 		filtersRef.current = initial;
 		return initial;
 	});
+	React.useEffect(() => {
+		const next = parseReadableFilters(getUrlParams(), columnSnapshot);
+		filtersRef.current = next;
+		setFilters((previous) => JSON.stringify(previous) === JSON.stringify(next) ? previous : next);
+	}, [columnSnapshot]);
 	React.useEffect(() => {
 		const handleUrlChange = () => {
 			if (lastWrittenUrlRef.current !== null && window.location.search === lastWrittenUrlRef.current) {
@@ -1954,7 +1966,7 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 							onKeyDown: onInputKeyDown
 						}), /* @__PURE__ */ jsx(CommandList, {
 							onScroll: selectedColumnMeta?.autoCrudFilterOnPopupScroll,
-							children: selectedColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							children: selectedColumn ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 								selectedColumn.columnDef.meta?.options && /* @__PURE__ */ jsx(CommandEmpty, { children: "No options found." }),
 								/* @__PURE__ */ jsx(FilterValueSelector, {
 									column: selectedColumn,
@@ -1973,7 +1985,7 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 									className: "sr-only",
 									children: "Load more"
 								})
-							] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }), /* @__PURE__ */ jsx(CommandGroup, { children: columns.map((column) => /* @__PURE__ */ jsxs(CommandItem, {
+							] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }), /* @__PURE__ */ jsx(CommandGroup, { children: columns.map((column) => /* @__PURE__ */ jsxs(CommandItem, {
 								value: column.id,
 								onSelect: () => {
 									setSelectedColumn(column);
@@ -2157,7 +2169,7 @@ function FilterValueSelector({ column, value, onSelect }) {
 				value,
 				onSelect: () => onSelect(value),
 				disabled: isEmpty,
-				children: isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {}), /* @__PURE__ */ jsx("span", { children: "Type to add filter..." })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BadgeCheck, {}), /* @__PURE__ */ jsxs("span", {
+				children: isEmpty ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {}), /* @__PURE__ */ jsx("span", { children: "Type to add filter..." })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BadgeCheck, {}), /* @__PURE__ */ jsxs("span", {
 					className: "truncate",
 					children: [
 						"Filter by \"",
@@ -2243,7 +2255,7 @@ function onFilterInputRender({ today, filter, column, inputId, onFilterUpdate, s
 						variant: "ghost",
 						size: "sm",
 						className: "h-full min-w-16 rounded-none border px-1.5 font-normal dark:bg-input/30",
-						children: selectedOptions.length === 0 ? filter.variant === "multiSelect" ? "Select options..." : "Select option..." : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						children: selectedOptions.length === 0 ? filter.variant === "multiSelect" ? "Select options..." : "Select option..." : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 							className: "flex items-center -space-x-2 rtl:space-x-reverse",
 							children: selectedOptions.map((selectedOption) => selectedOption.icon ? /* @__PURE__ */ jsx("div", {
 								className: "rounded-full border bg-background p-0.5",
@@ -2956,7 +2968,7 @@ function SimpleFacetedFilter({ title, options, multiple, value, hasMore, loading
 					children: /* @__PURE__ */ jsx(XCircle, {})
 				}) : /* @__PURE__ */ jsx(PlusCircle, {}),
 				title,
-				selectedValues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+				selectedValues.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(Separator, {
 						orientation: "vertical",
 						className: "mx-0.5 h-4"
@@ -3030,7 +3042,7 @@ function SimpleSliderFilter({ title, range, unit, value, onChange }) {
 					children: /* @__PURE__ */ jsx(XCircle, {})
 				}) : /* @__PURE__ */ jsx(PlusCircle, {}),
 				/* @__PURE__ */ jsx("span", { children: title }),
-				value && /* @__PURE__ */ jsxs(Fragment, { children: [
+				value && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(Separator, {
 						orientation: "vertical",
 						className: "mx-0.5 h-4"
@@ -3170,7 +3182,7 @@ function SimpleDateFilter({ title, maxDate, multiple, value, onChange }) {
 						children: /* @__PURE__ */ jsx(XCircle, {})
 					}) : /* @__PURE__ */ jsx(CalendarIcon, {}),
 					/* @__PURE__ */ jsx("span", { children: title }),
-					label && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
+					label && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {
 						orientation: "vertical",
 						className: "mx-0.5 h-4"
 					}), /* @__PURE__ */ jsx("span", { children: label })] })
@@ -3272,7 +3284,7 @@ function DataTableColumnHeader({ column, label, className,...props }) {
 	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 		align: "start",
 		className: "w-28",
-		children: [column.getCanSort() && /* @__PURE__ */ jsxs(Fragment, { children: [
+		children: [column.getCanSort() && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
 				className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
 				checked: column.getIsSorted() === "asc",
@@ -3886,9 +3898,12 @@ function coerceRowValues(rows, schema) {
 
 //#endregion
 //#region src/lib/export.ts
+function getExportColumnIds(table) {
+	return table.getAllLeafColumns().filter((column) => column.accessorFn).map((column) => column.id);
+}
 function exportTableToCSV(table, opts = {}) {
 	const { filename = "table", excludeColumns = [], onlySelected = false } = opts;
-	const headers = table.getAllLeafColumns().map((column) => column.id).filter((id) => !excludeColumns.includes(id));
+	const headers = getExportColumnIds(table).filter((id) => !excludeColumns.includes(id));
 	downloadCSV([headers.join(","), ...(onlySelected ? table.getFilteredSelectedRowModel().rows : table.getRowModel().rows).map((row) => headers.map((header) => {
 		const cellValue = row.getValue(header);
 		return typeof cellValue === "string" ? `"${cellValue.replace(/"/g, "\"\"")}"` : cellValue;
@@ -4076,7 +4091,7 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
 			{ type: "delete" }
 		]) : actions;
 		let resolvedActions = configuredActions?.filter((action$1) => !action$1.hidden);
-		if (configuredActions === void 0) return /* @__PURE__ */ jsxs(Fragment, { children: [
+		if (configuredActions === void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			renderBuiltinAction({ type: "batchUpdate" }),
 			extraActions,
 			showDefaultExport && renderBuiltinAction({ type: "export" }),
@@ -4099,7 +4114,7 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
 		if (!hasBuiltin) {
 			const startNodes = resolvedActions.filter(isBatchCustomAction).filter((action$1) => action$1.position === "start").map((action$1, index$1) => renderCustomAction(action$1, index$1));
 			const endNodes = resolvedActions.filter(isBatchCustomAction).filter((action$1) => action$1.position !== "start").map((action$1, index$1) => renderCustomAction(action$1, index$1));
-			return /* @__PURE__ */ jsxs(Fragment, { children: [
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				startNodes,
 				renderBuiltinAction({ type: "batchUpdate" }),
 				extraActions,
@@ -4399,7 +4414,9 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode, search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
+function AutoTable({ schema, data, getRowId, expandedRow, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
+	if (expandedRow && !getRowId) throw new Error("AutoTable requires getRowId when expandedRow is provided.");
+	const enableExpansion = !!expandedRow;
 	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;
@@ -4413,36 +4430,85 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
 	});
 	const searchConfig = search && typeof search === "object" ? search : {};
 	const enableAdvancedFilter = true;
-	const columns = useMemo(() => {
+	const { columns, expandColumnId } = useMemo(() => {
+		const columnOverrides = Object.assign({}, overrides);
+		for (const key of filterOnly ?? []) {
+			const field = key;
+			Object.assign(columnOverrides, { [field]: {
+				...columnOverrides[field],
+				hidden: false
+			} });
+		}
 		const dataColumns = createTableSchema(schema, {
-			overrides,
+			overrides: columnOverrides,
 			exclude
+		}).map((column) => {
+			const key = column.id ?? ("accessorKey" in column ? String(column.accessorKey) : "");
+			return filterOnly?.includes(key) ? {
+				...column,
+				enableHiding: false,
+				enableSorting: false
+			} : column;
 		});
 		const result = enableRowSelection ? [createSelectColumn(), ...dataColumns] : dataColumns;
+		let expandColumnId$1 = "expand";
+		if (enableExpansion) {
+			while (expandColumnId$1 in schema.shape || result.some((column) => column.id === expandColumnId$1)) expandColumnId$1 = `_${expandColumnId$1}`;
+			result.unshift({
+				id: expandColumnId$1,
+				header: () => /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Row details"
+				}),
+				cell: ({ row }) => /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+					"aria-expanded": row.getIsExpanded(),
+					onClick: row.getToggleExpandedHandler(),
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: row.getIsExpanded() ? "size-4 rotate-90" : "size-4" })
+				}),
+				enableHiding: false,
+				enableSorting: false,
+				size: 40
+			});
+		}
 		if (actions) result.push(createActionsColumn(actions));
-		return result;
+		return {
+			columns: result,
+			expandColumnId: expandColumnId$1
+		};
 	}, [
 		schema,
 		overrides,
 		enableRowSelection,
+		enableExpansion,
 		exclude,
-		actions
+		actions,
+		filterOnly
 	]);
 	const stableInitialState = useMemo(() => ({
 		sorting: initialSorting,
 		columnPinning: pinnedColumns ?? {
-			left: enableRowSelection ? ["select"] : [],
+			left: [...enableExpansion ? [expandColumnId] : [], ...enableRowSelection ? ["select"] : []],
 			right: actions ? ["actions"] : []
 		}
 	}), [
 		initialSorting,
 		pinnedColumns,
 		enableRowSelection,
+		enableExpansion,
+		expandColumnId,
 		actions
 	]);
+	const expandedRowModel = useMemo(() => getExpandedRowModel(), []);
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
 		columns,
+		getRowId,
+		getRowCanExpand: () => enableExpansion,
+		getExpandedRowModel: enableExpansion ? expandedRowModel : void 0,
 		pageCount,
 		...total !== void 0 ? { rowCount: total } : {},
 		enableAdvancedFilter,
@@ -4450,6 +4516,16 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
 		shallow: false,
 		clearOnDefault: true
 	});
+	useEffect(() => {
+		if (!filterOnly?.length) return;
+		table.setColumnVisibility((previous) => {
+			if (filterOnly.every((key) => previous[key] === false)) return previous;
+			return {
+				...previous,
+				...Object.fromEntries(filterOnly.map((key) => [key, false]))
+			};
+		});
+	}, [table, filterOnly]);
 	const rowSelection = table.getState().rowSelection;
 	const columnFilters = table.getState().columnFilters;
 	const selectedRows = useMemo(() => table.getFilteredSelectedRowModel().rows.map((row) => row.original), [
@@ -4564,7 +4640,8 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
 			/* @__PURE__ */ jsx(DataTable, {
 				pagination,
 				table,
-				classNames
+				classNames,
+				expandedRow
 			}),
 			enableRowSelection && /* @__PURE__ */ jsx(AutoTableActionBar, {
 				table,
@@ -4890,6 +4967,30 @@ function normalizeHasMore(result) {
 
 //#endregion
 //#region src/lib/field-config.ts
+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,
+		enum: override?.enum ?? base?.enum,
+		dataSource: override?.dataSource ?? base?.dataSource,
+		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])]));
+}
 function normalizeFieldOptions$1(options) {
 	if (!options || options.length === 0) return void 0;
 	return options.map((option) => ({
@@ -5986,7 +6087,7 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title, local
 			] })] }), /* @__PURE__ */ jsxs("div", {
 				className: "space-y-4",
 				children: [
-					step === "upload" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+					step === "upload" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 						className: `border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${isDragging ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-muted-foreground/50"}`,
 						onDragOver: (e) => {
 							e.preventDefault();
@@ -6034,7 +6135,7 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title, local
 						onClick: handleDownloadTemplate,
 						children: locale.downloadTemplate
 					})] }),
-					step === "preview" && parsedData && /* @__PURE__ */ jsxs(Fragment, { children: [
+					step === "preview" && parsedData && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						/* @__PURE__ */ jsx("div", {
 							className: "rounded-md border",
 							children: /* @__PURE__ */ jsx("div", {
@@ -6089,7 +6190,7 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title, local
 							children: locale.importingRows(parsedData?.rows.length ?? 0)
 						})]
 					}),
-					step === "result" && result && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+					step === "result" && result && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 						className: "space-y-3",
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex gap-4",
@@ -6277,7 +6378,6 @@ function resolveActions$1(targetId, zone, ownerActions) {
 	const ownerCustomIds = new Set(ownerActions.flatMap((action$1) => isCustomAction$1(action$1) && action$1.id ? [action$1.id] : []));
 	const baseActions = ownerActions.filter((action$1) => !action$1.hidden && !isMaskedCustom(action$1)).map((action$1) => ({ ...isCustomAction$1(action$1) && action$1.id ? customOverrides.get(action$1.id)?.action ?? action$1 : action$1 }));
 	const isReplacedCustom = ({ action: action$1, seq: seq$1 }) => isCustomAction$1(action$1) && Boolean(action$1.id && (ownerCustomIds.has(action$1.id) || customOverrides.get(action$1.id)?.seq !== seq$1));
-	if (registered.length === 0) return positionActions(baseActions).map(withoutRegistryMeta);
 	const nextActions = [...baseActions];
 	const extraActions = [];
 	const groups = /* @__PURE__ */ new Map();
@@ -6304,7 +6404,13 @@ function resolveActions$1(targetId, zone, ownerActions) {
 		const items = group.sort((left, right) => left.seq - right.seq).flatMap((entry) => {
 			const { action: action$1 } = entry;
 			if (action$1.hidden || isReplacedCustom(entry)) return [];
-			if (isCustomAction$1(action$1)) return [{ ...action$1 }];
+			if (isCustomAction$1(action$1)) {
+				if (action$1.before) {
+					extraActions.push({ ...action$1 });
+					return [];
+				}
+				return [{ ...action$1 }];
+			}
 			const builtin = nextActions.find((item) => item.type === action$1.type);
 			return builtin ? [builtin] : [];
 		});
@@ -6325,6 +6431,15 @@ function resolveActions$1(targetId, zone, ownerActions) {
 			}
 		} else extraActions.push(...items);
 	}
+	for (const action$1 of [...nextActions, ...extraActions]) {
+		if (!isCustomAction$1(action$1) || !action$1.before) continue;
+		const anchor = nextActions.find((item) => !isCustomAction$1(item) && item.type === action$1.before);
+		if (anchor) action$1.position = {
+			anchor: anchor.id ?? anchor.type,
+			side: "before"
+		};
+		else if (typeof action$1.position === "object") action$1.position = "end";
+	}
 	return positionActions(nextActions, extraActions).map(withoutRegistryMeta);
 }
 const crudActions = {
@@ -6474,30 +6589,6 @@ function resolveToolbarActionsWithResolver(targetId, ownerActions, context) {
 	const resolver = autoCrudToolbarResolver;
 	return targetId !== void 0 && targetId.length > 0 && resolver !== null ? resolver(targetId, ownerActions, context) : ownerActions;
 }
-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,
-		enum: override?.enum ?? base?.enum,
-		dataSource: override?.dataSource ?? base?.dataSource,
-		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])]));
-}
 function applyResourceTablePresentation(fields, resourceFields) {
 	if (!fields || !resourceFields) return fields;
 	return Object.fromEntries(Object.entries(fields).map(([key, config]) => {
@@ -7399,6 +7490,12 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 	const [exporting, setExporting] = React.useState(false);
 	const getSelectedRowsRef = React.useRef(null);
 	const dynamicFilterOptions = useDynamicFilterOptions(resolvedFields);
+	const filterOnly = React.useMemo(() => Object.entries(resolvedFields).filter(([key, config]) => config.table === false && config.filter && config.hidden !== true && !denyFields?.includes(key) && !tableConfig?.hidden?.includes(key) && tableConfig?.overrides?.[key]?.hidden !== true).map(([key]) => key), [
+		resolvedFields,
+		denyFields,
+		tableConfig?.hidden,
+		tableConfig?.overrides
+	]);
 	const hiddenColumns = React.useMemo(() => buildHiddenColumns(resolvedFields, tableConfig?.hidden, denyFields, tableConfig?.overrides), [
 		resolvedFields,
 		tableConfig?.hidden,
@@ -7487,7 +7584,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 			return {
 				...action$1,
 				onClick: (_rows, { table }) => {
-					const headers = table.getAllLeafColumns().map((column) => column.id).filter((key) => key !== "select" && key !== "actions" && !denyFields?.includes(key));
+					const headers = getExportColumnIds(table).filter((key) => key !== "select" && key !== "actions" && !denyFields?.includes(key));
 					exportAllToCSV(table.getFilteredSelectedRowModel().rows.map((row) => formatExportRow(row.original, resolvedFields, Object.fromEntries(headers.map((key) => [key, row.getValue(key)])))), {
 						filename: "table",
 						headers
@@ -7747,9 +7844,12 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 					...pagination
 				} : void 0,
 				...resource.tableData.total !== void 0 ? { total: resource.tableData.total } : {},
+				getRowId: tableConfig?.getRowId,
+				expandedRow: tableConfig?.expandedRow,
 				overrides: tableOverrides,
 				classNames: tableConfig?.classNames,
-				exclude: hiddenColumns,
+				exclude: hiddenColumns.filter((key) => !filterOnly.includes(key)),
+				filterOnly,
 				filterMode: tableConfig?.filterModes,
 				search: searchConfig,
 				actions: tableRowActions,
@@ -7957,7 +8057,7 @@ function DataTableFacetedFilter({ column, title, options, multiple }) {
 					children: /* @__PURE__ */ jsx(XCircle, {})
 				}) : /* @__PURE__ */ jsx(PlusCircle, {}),
 				title,
-				selectedValues$1.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+				selectedValues$1.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(Separator, {
 						orientation: "vertical",
 						className: "mx-0.5 data-[orientation=vertical]:h-4"
@@ -8116,7 +8216,7 @@ function DataTableDateFilter({ column, title, multiple }) {
 			const dateText$1 = hasSelectedDates ? formatDateRange(selectedDates) : "Select date range";
 			return /* @__PURE__ */ jsxs("span", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", { children: title }), hasSelectedDates && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
+				children: [/* @__PURE__ */ jsx("span", { children: title }), hasSelectedDates && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {
 					orientation: "vertical",
 					className: "mx-0.5 data-[orientation=vertical]:h-4"
 				}), /* @__PURE__ */ jsx("span", { children: dateText$1 })] })]
@@ -8127,7 +8227,7 @@ function DataTableDateFilter({ column, title, multiple }) {
 		const dateText = hasSelectedDate ? formatDate$1(selectedDates[0]) : "Select date";
 		return /* @__PURE__ */ jsxs("span", {
 			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx("span", { children: title }), hasSelectedDate && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
+			children: [/* @__PURE__ */ jsx("span", { children: title }), hasSelectedDate && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {
 				orientation: "vertical",
 				className: "mx-0.5 data-[orientation=vertical]:h-4"
 			}), /* @__PURE__ */ jsx("span", { children: dateText })] })]
@@ -8283,7 +8383,7 @@ function DataTableSliderFilter({ column, title }) {
 					children: /* @__PURE__ */ jsx(XCircle, {})
 				}) : /* @__PURE__ */ jsx(PlusCircle, {}),
 				/* @__PURE__ */ jsx("span", { children: title }),
-				columnFilterValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				columnFilterValue ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(Separator, {
 						orientation: "vertical",
 						className: "mx-0.5 data-[orientation=vertical]:h-4"
@@ -8582,7 +8682,7 @@ function modalReducer(state, action$1) {
 /**
 * Hook 主函数
 */
-function useAutoCrudResource({ router, schema, query: queryTransform, options = {} }) {
+function useAutoCrudResource({ router, schema, query: queryTransform, fields, options = {} }) {
 	const { idKey = "id", defaultVariant = "dialog", hooks, toast: toastAdapter, exportFetcher, defaultSort: defaultSortOption } = options;
 	const toast$1 = useMemo(() => toastAdapter === false ? noopToastAdapter : toastAdapter ?? defaultToastAdapter, [toastAdapter]);
 	const hooksRef = useRef(hooks);
@@ -8594,7 +8694,14 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 	const defaultSorting = useMemo(() => defaultSortOption === false ? [] : defaultSortOption ?? getDefaultSortingForSchema(resolvedSchema), [defaultSortOption, resolvedSchema]);
 	const metadataFields = useMemo(() => readMetadataFields(metadata?.fields), [metadata?.fields]);
 	const capabilities = metadata?.capabilities;
-	const columns = useMemo(() => createTableSchema(resolvedSchema), [resolvedSchema]);
+	const columns = useMemo(() => createTableSchema(resolvedSchema, { overrides: Object.fromEntries(Object.entries(mergeFields(metadataFields, fields) ?? {}).flatMap(([key, field]) => {
+		const filter = field.filter;
+		return filter && typeof filter === "object" && filter.variant ? [[key, { meta: { variant: filter.variant } }]] : [];
+	})) }), [
+		resolvedSchema,
+		fields,
+		metadataFields
+	]);
 	const [urlParams] = useQueryStates({
 		page: parseAsInteger.withDefault(1),
 		perPage: parseAsInteger.withDefault(10),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.8.2",
+  "version": "1.10.0",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -70,9 +70,9 @@
     "nanoid": "^5.1.6",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
-    "@wordrhyme/shadcn": "2.0.1",
     "@wordrhyme/formily-shadcn": "2.1.1",
-    "@wordrhyme/shadcn-ui": "2.1.1"
+    "@wordrhyme/shadcn-ui": "2.1.1",
+    "@wordrhyme/shadcn": "2.0.1"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.18",
@@ -93,11 +93,11 @@
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@internal/tsconfig": "0.1.0",
-    "@internal/prettier-config": "0.0.1",
     "@internal/eslint-config": "0.3.0",
+    "@internal/prettier-config": "0.0.1",
+    "@internal/vitest-config": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
-    "@internal/vitest-config": "0.1.0"
+    "@internal/tsconfig": "0.1.0"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {