@wordrhyme/auto-crud 1.5.5 → 1.5.7

package/dist/index.cjs

@@ -525,104 +525,6 @@ function DataTable({ table, actionBar, children, className,...props }) {
 	});
 }
 
-//#endregion
-//#region src/lib/id.ts
-const prefixes = {};
-function generateId(prefixOrOptions, inputOptions = {}) {
-	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
-	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
-	const { length = 12, separator = "_" } = finalOptions;
-	const id = (0, nanoid.customAlphabet)("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
-	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
-}
-
-//#endregion
-//#region src/lib/readable-filters.ts
-const OP_SUFFIX = "__op";
-const INDEX_SEPARATOR = "__";
-const RANGE_VARIANTS = new Set(["range", "dateRange"]);
-function getColumnId(column) {
-	if ("id" in column && column.id) return String(column.id);
-	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
-	return null;
-}
-function getColumnVariant(column) {
-	if ("columnDef" in column) return column.columnDef.meta?.variant;
-	return column.meta?.variant;
-}
-function splitKey(key) {
-	const match = key.match(/^(.*?)(?:__(\d+))?$/);
-	if (!match) return { base: key };
-	const index$1 = match[2] ? Number(match[2]) : void 0;
-	return {
-		base: match[1] ?? key,
-		index: index$1
-	};
-}
-function isFilterKey(key, columnIds) {
-	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
-	return columnIds.has(base);
-}
-function parseValueByVariant(value, variant) {
-	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
-	if (RANGE_VARIANTS.has(variant)) {
-		const parts = value.split(",");
-		return [parts[0] ?? "", parts[1] ?? ""];
-	}
-	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
-	return value;
-}
-function serializeValue(value, variant) {
-	if (Array.isArray(value)) {
-		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
-		return value.join(",");
-	}
-	return value;
-}
-function parseReadableFilters(params, columns) {
-	const columnsById = /* @__PURE__ */ new Map();
-	for (const column of columns) {
-		const id = getColumnId(column);
-		if (id) columnsById.set(id, column);
-	}
-	const filters = [];
-	for (const [key, rawValue] of params.entries()) {
-		if (key.endsWith(OP_SUFFIX)) continue;
-		const { base } = splitKey(key);
-		const column = columnsById.get(base);
-		if (!column) continue;
-		const variant = getColumnVariant(column) ?? "text";
-		const opKey = `${key}${OP_SUFFIX}`;
-		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
-		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
-		filters.push({
-			id: base,
-			value: parsedValue,
-			variant,
-			operator,
-			filterId: key || generateId({ length: 8 })
-		});
-	}
-	return filters;
-}
-function applyReadableFilters(params, columns, filters) {
-	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
-	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
-	const counters = /* @__PURE__ */ new Map();
-	for (const filter of filters) {
-		const columnId = String(filter.id);
-		const count = (counters.get(columnId) ?? 0) + 1;
-		counters.set(columnId, count);
-		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
-		const variant = filter.variant ?? "text";
-		const value = serializeValue(filter.value, variant);
-		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
-		const defaultOperator = getDefaultFilterOperator(variant);
-		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
-	}
-	return params;
-}
-
 //#endregion
 //#region src/hooks/use-url-state.ts
 const parseAsInteger = {
@@ -873,15 +775,120 @@ function useQueryStates(parsers, options = {}) {
 	}, [setValues])];
 }
 
+//#endregion
+//#region src/lib/id.ts
+const prefixes = {};
+function generateId(prefixOrOptions, inputOptions = {}) {
+	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
+	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
+	const { length = 12, separator = "_" } = finalOptions;
+	const id = (0, nanoid.customAlphabet)("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
+	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
+}
+
+//#endregion
+//#region src/lib/readable-filters.ts
+const OP_SUFFIX = "__op";
+const INDEX_SEPARATOR = "__";
+const RANGE_VARIANTS = new Set(["range", "dateRange"]);
+function getColumnId(column) {
+	if ("id" in column && column.id) return String(column.id);
+	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
+	return null;
+}
+function getColumnVariant(column) {
+	if ("columnDef" in column) return column.columnDef.meta?.variant;
+	return column.meta?.variant;
+}
+function splitKey(key) {
+	const match = key.match(/^(.*?)(?:__(\d+))?$/);
+	if (!match) return { base: key };
+	const index$1 = match[2] ? Number(match[2]) : void 0;
+	return {
+		base: match[1] ?? key,
+		index: index$1
+	};
+}
+function isFilterKey(key, columnIds) {
+	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
+	return columnIds.has(base);
+}
+function parseValueByVariant(value, variant) {
+	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
+	if (RANGE_VARIANTS.has(variant)) {
+		const parts = value.split(",");
+		return [parts[0] ?? "", parts[1] ?? ""];
+	}
+	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
+	return value;
+}
+function serializeValue(value, variant) {
+	if (Array.isArray(value)) {
+		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
+		return value.join(",");
+	}
+	return value;
+}
+function parseReadableFilters(params, columns) {
+	const columnsById = /* @__PURE__ */ new Map();
+	for (const column of columns) {
+		const id = getColumnId(column);
+		if (id) columnsById.set(id, column);
+	}
+	const filters = [];
+	for (const [key, rawValue] of params.entries()) {
+		if (key.endsWith(OP_SUFFIX)) continue;
+		const { base } = splitKey(key);
+		const column = columnsById.get(base);
+		if (!column) continue;
+		const variant = getColumnVariant(column) ?? "text";
+		const opKey = `${key}${OP_SUFFIX}`;
+		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
+		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
+		filters.push({
+			id: base,
+			value: parsedValue,
+			variant,
+			operator,
+			filterId: key || generateId({ length: 8 })
+		});
+	}
+	return filters;
+}
+function applyReadableFilters(params, columns, filters) {
+	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
+	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
+	const counters = /* @__PURE__ */ new Map();
+	for (const filter of filters) {
+		const columnId = String(filter.id);
+		const count = (counters.get(columnId) ?? 0) + 1;
+		counters.set(columnId, count);
+		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
+		const variant = filter.variant ?? "text";
+		const value = serializeValue(filter.value, variant);
+		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
+		const defaultOperator = getDefaultFilterOperator(variant);
+		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
+	}
+	return params;
+}
+
 //#endregion
 //#region src/hooks/use-readable-filters.ts
 const URL_CHANGE_EVENT = "urlchange";
 function toSearchString(params) {
-	const queryString = params.toString().replace(/%2C/g, ",");
+	const queryString = params.toString().replace(/%2C/gu, ",");
 	return queryString ? `?${queryString}` : "";
 }
+function filterSignature(filters) {
+	return JSON.stringify(filters.map(({ id, operator, value, variant }) => JSON.stringify([
+		id,
+		operator,
+		variant === "multiSelect" && Array.isArray(value) ? [...value].sort() : value
+	])).sort());
+}
 function useReadableFilters(columns, options = {}) {
-	const { history = "replace", scroll = false } = options;
+	const { history = "replace", scroll = false, resetPageKey = "page" } = options;
 	const columnSnapshot = react.useMemo(() => columns, [columns]);
 	const lastWrittenUrlRef = react.useRef(null);
 	const filtersRef = react.useRef(null);
@@ -909,7 +916,10 @@ function useReadableFilters(columns, options = {}) {
 	}, [columnSnapshot]);
 	const writeToUrl = react.useCallback((next) => {
 		const params = getUrlParams();
+		const previousFilters = parseReadableFilters(params, columnSnapshot);
 		applyReadableFilters(params, columnSnapshot, next);
+		const nextFilters = parseReadableFilters(params, columnSnapshot);
+		if (resetPageKey !== false && resetPageKey.length > 0 && filterSignature(previousFilters) !== filterSignature(nextFilters)) params.delete(resetPageKey);
 		lastWrittenUrlRef.current = toSearchString(params);
 		setSearchParams(params, {
 			history,
@@ -918,6 +928,7 @@ function useReadableFilters(columns, options = {}) {
 	}, [
 		columnSnapshot,
 		history,
+		resetPageKey,
 		scroll
 	]);
 	return [filters, react.useCallback((updater) => {
@@ -1053,7 +1064,10 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 			return true;
 		});
 	}, [table, columnDefs]);
-	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
+	const [filters, setFilters] = useReadableFilters(columns, {
+		debounceMs,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page"
+	});
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const [joinOperator, setJoinOperator] = useQueryState(table.options.meta?.queryKeys?.joinOperator ?? "", parseAsStringEnum(["and", "or"]).withDefault("and"));
 	const onFilterAdd = react.useCallback(() => {
@@ -1591,7 +1605,10 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 			setSelectedColumn(null);
 		}
 	}, [inputValue, selectedColumn]);
-	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
+	const [filters, setFilters] = useReadableFilters(columns, {
+		debounceMs,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page"
+	});
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const onFilterAdd = react.useCallback((column, value) => {
 		if (!value.trim() && column.columnDef.meta?.variant !== "boolean") return;
@@ -2397,6 +2414,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	const queryStateOptions = table.options.meta?.queryStateOptions;
 	const [queryFilters, setQueryFilters] = useReadableFilters(columns, {
 		...queryStateOptions,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page",
 		shallow
 	});
 	const filters = externalFilters ?? queryFilters;
@@ -3236,6 +3254,10 @@ function renderCell(value, type, options) {
 		className: "text-muted-foreground",
 		children: "-"
 	});
+	if (Array.isArray(value) && value.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
 	const formatOptionValue = (optionValue) => {
 		const stringValue = String(optionValue);
 		return options?.find((option) => option.value === stringValue)?.label ?? stringValue;
@@ -6124,7 +6146,7 @@ function mergeOptionsByField(left, right) {
 function shouldResolveOptions(field, config, hiddenColumns) {
 	if (!config) return false;
 	if (hiddenColumns.has(field)) return false;
-	if (getTableOptions(config)) return false;
+	if (getTableOptions(config) && !getTableConfig(config)?.dataSource) return false;
 	return normalizeDataSourceConfig(getTableDataSource(config)) !== void 0;
 }
 function useRegistryVersion(subscribe) {
@@ -6474,7 +6496,7 @@ function buildTableOverrides(fields, legacyOverrides, dynamicFilterState, dynami
 		const filterDataSourceSearchable = dynamicFilterState?.searchableByField[key];
 		const currentDynamicOptions = !fieldOptions && filterDataSourceRegistered ? toTableOptions(dynamicFilterState?.optionsByField[key] ?? []) : void 0;
 		const dynamicFilterLabelOptions = !fieldOptions && filterDataSourceRegistered ? dynamicFilterState?.labelOptionsByField[key] ?? dynamicFilterState?.optionsByField[key] ?? [] : void 0;
-		const dynamicResolveOptions = !presentationOptions ? dynamicResolveState?.optionsByField[key] : void 0;
+		const dynamicResolveOptions = dynamicResolveState?.optionsByField[key];
 		const mergedSharedDynamicOptions = mergeFieldOptions(dynamicFilterLabelOptions, tableConfig?.dataSource ? void 0 : dynamicResolveOptions);
 		const dynamicOptions = !fieldOptions && mergedSharedDynamicOptions ? toTableOptions(mergedSharedDynamicOptions) : void 0;
 		const tableMeta = config.table !== false && typeof config.table === "object" ? config.table.meta : void 0;
@@ -6549,7 +6571,7 @@ function buildTableOverrides(fields, legacyOverrides, dynamicFilterState, dynami
 			};
 			const hasTableLabels = config.table.options !== void 0 || config.table.dataSource !== void 0;
 			if (display && display !== "auto" || hasTableLabels) {
-				const options = presentationOptions ?? dynamicResolveOptions ?? mergedSharedDynamicOptions;
+				const options = tableConfig?.dataSource ? mergeFieldOptions(dynamicResolveOptions, presentationOptions) : presentationOptions ?? mergedSharedDynamicOptions;
 				result[key] = {
 					...result[key],
 					cell: ({ row }) => renderFieldValue(row.getValue(key), "string", {
@@ -6662,6 +6684,10 @@ function renderFieldValue(value, type, booleanLocale, options, display = "auto")
 		className: "text-muted-foreground",
 		children: "-"
 	});
+	if (Array.isArray(value) && value.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
 	const renderText = (item) => getOptionLabel(item, options);
 	if (display === "text") return Array.isArray(value) ? value.map(renderText).join(", ") : renderText(value);
 	if (display === "date" || display === "datetime") return formatDate(value, {}, display);

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { z } from "zod";
 import { JsonSchemaFormScope } from "@wordrhyme/formily-shadcn";
 import * as _tanstack_react_table0 from "@tanstack/react-table";
@@ -413,7 +413,7 @@ declare function AutoTableActionBar<TData>({
   extraActions,
   actions,
   deleteConfirmation
-}: AutoTableActionBarProps<TData>): react_jsx_runtime6.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -592,7 +592,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   onSelectedCountChange,
   onSelectedRowsChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime6.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -843,7 +843,7 @@ interface Field {
     label?: string;
     /** 排序权重，数值越小越靠前 */
     index?: number;
-    /** 仅用于表格展示的静态值标签 */
+    /** 仅用于表格展示的静态值标签；与 dataSource 同时配置时覆盖同值的动态标签 */
     options?: FieldOption[];
     /** 仅用于表格展示的动态值标签源 */
     dataSource?: AutoCrudDataSourceConfig;
@@ -1093,7 +1093,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   toolbarActions,
   locale: localeProp,
   onCreate
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime6.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -1132,7 +1132,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime6.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime3.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1448,7 +1448,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime6.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime3.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = 'dialog' | 'sheet';
@@ -1492,7 +1492,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime6.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1514,7 +1514,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime6.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = 'selected' | 'filtered';
@@ -1534,7 +1534,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime6.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1547,7 +1547,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime6.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1558,7 +1558,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime6.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1570,7 +1570,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime6.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1584,7 +1584,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime6.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<'div'> {
@@ -1596,7 +1596,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime6.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1607,7 +1607,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime6.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1618,7 +1618,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime6.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/lib/crud-actions.d.ts
 type CrudActionZone = 'toolbar' | 'row' | 'batch';
@@ -1691,6 +1691,8 @@ type ColumnLike<TData> = Column<TData> | ColumnDef<TData, unknown> | {
 };
 interface UseReadableFiltersOptions extends UrlStateOptions {
   debounceMs?: number;
+  /** Reset server-side pagination when effective filters change. */
+  resetPageKey?: string | false;
 }
 declare function useReadableFilters<TData>(columns: ColumnLike<TData>[], options?: UseReadableFiltersOptions): [ExtendedColumnFilter<TData>[], (value: ExtendedColumnFilter<TData>[] | ((prev: ExtendedColumnFilter<TData>[]) => ExtendedColumnFilter<TData>[])) => void];
 //#endregion

package/dist/index.d.ts

@@ -843,7 +843,7 @@ interface Field {
     label?: string;
     /** 排序权重，数值越小越靠前 */
     index?: number;
-    /** 仅用于表格展示的静态值标签 */
+    /** 仅用于表格展示的静态值标签；与 dataSource 同时配置时覆盖同值的动态标签 */
     options?: FieldOption[];
     /** 仅用于表格展示的动态值标签源 */
     dataSource?: AutoCrudDataSourceConfig;
@@ -1691,6 +1691,8 @@ type ColumnLike<TData> = Column<TData> | ColumnDef<TData, unknown> | {
 };
 interface UseReadableFiltersOptions extends UrlStateOptions {
   debounceMs?: number;
+  /** Reset server-side pagination when effective filters change. */
+  resetPageKey?: string | false;
 }
 declare function useReadableFilters<TData>(columns: ColumnLike<TData>[], options?: UseReadableFiltersOptions): [ExtendedColumnFilter<TData>[], (value: ExtendedColumnFilter<TData>[] | ((prev: ExtendedColumnFilter<TData>[]) => ExtendedColumnFilter<TData>[])) => void];
 //#endregion

package/dist/index.js

@@ -488,104 +488,6 @@ function DataTable({ table, actionBar, children, className,...props }) {
 	});
 }
 
-//#endregion
-//#region src/lib/id.ts
-const prefixes = {};
-function generateId(prefixOrOptions, inputOptions = {}) {
-	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
-	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
-	const { length = 12, separator = "_" } = finalOptions;
-	const id = customAlphabet("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
-	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
-}
-
-//#endregion
-//#region src/lib/readable-filters.ts
-const OP_SUFFIX = "__op";
-const INDEX_SEPARATOR = "__";
-const RANGE_VARIANTS = new Set(["range", "dateRange"]);
-function getColumnId(column) {
-	if ("id" in column && column.id) return String(column.id);
-	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
-	return null;
-}
-function getColumnVariant(column) {
-	if ("columnDef" in column) return column.columnDef.meta?.variant;
-	return column.meta?.variant;
-}
-function splitKey(key) {
-	const match = key.match(/^(.*?)(?:__(\d+))?$/);
-	if (!match) return { base: key };
-	const index$1 = match[2] ? Number(match[2]) : void 0;
-	return {
-		base: match[1] ?? key,
-		index: index$1
-	};
-}
-function isFilterKey(key, columnIds) {
-	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
-	return columnIds.has(base);
-}
-function parseValueByVariant(value, variant) {
-	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
-	if (RANGE_VARIANTS.has(variant)) {
-		const parts = value.split(",");
-		return [parts[0] ?? "", parts[1] ?? ""];
-	}
-	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
-	return value;
-}
-function serializeValue(value, variant) {
-	if (Array.isArray(value)) {
-		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
-		return value.join(",");
-	}
-	return value;
-}
-function parseReadableFilters(params, columns) {
-	const columnsById = /* @__PURE__ */ new Map();
-	for (const column of columns) {
-		const id = getColumnId(column);
-		if (id) columnsById.set(id, column);
-	}
-	const filters = [];
-	for (const [key, rawValue] of params.entries()) {
-		if (key.endsWith(OP_SUFFIX)) continue;
-		const { base } = splitKey(key);
-		const column = columnsById.get(base);
-		if (!column) continue;
-		const variant = getColumnVariant(column) ?? "text";
-		const opKey = `${key}${OP_SUFFIX}`;
-		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
-		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
-		filters.push({
-			id: base,
-			value: parsedValue,
-			variant,
-			operator,
-			filterId: key || generateId({ length: 8 })
-		});
-	}
-	return filters;
-}
-function applyReadableFilters(params, columns, filters) {
-	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
-	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
-	const counters = /* @__PURE__ */ new Map();
-	for (const filter of filters) {
-		const columnId = String(filter.id);
-		const count = (counters.get(columnId) ?? 0) + 1;
-		counters.set(columnId, count);
-		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
-		const variant = filter.variant ?? "text";
-		const value = serializeValue(filter.value, variant);
-		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
-		const defaultOperator = getDefaultFilterOperator(variant);
-		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
-	}
-	return params;
-}
-
 //#endregion
 //#region src/hooks/use-url-state.ts
 const parseAsInteger = {
@@ -836,15 +738,120 @@ function useQueryStates(parsers, options = {}) {
 	}, [setValues])];
 }
 
+//#endregion
+//#region src/lib/id.ts
+const prefixes = {};
+function generateId(prefixOrOptions, inputOptions = {}) {
+	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
+	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
+	const { length = 12, separator = "_" } = finalOptions;
+	const id = customAlphabet("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
+	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
+}
+
+//#endregion
+//#region src/lib/readable-filters.ts
+const OP_SUFFIX = "__op";
+const INDEX_SEPARATOR = "__";
+const RANGE_VARIANTS = new Set(["range", "dateRange"]);
+function getColumnId(column) {
+	if ("id" in column && column.id) return String(column.id);
+	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
+	return null;
+}
+function getColumnVariant(column) {
+	if ("columnDef" in column) return column.columnDef.meta?.variant;
+	return column.meta?.variant;
+}
+function splitKey(key) {
+	const match = key.match(/^(.*?)(?:__(\d+))?$/);
+	if (!match) return { base: key };
+	const index$1 = match[2] ? Number(match[2]) : void 0;
+	return {
+		base: match[1] ?? key,
+		index: index$1
+	};
+}
+function isFilterKey(key, columnIds) {
+	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
+	return columnIds.has(base);
+}
+function parseValueByVariant(value, variant) {
+	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
+	if (RANGE_VARIANTS.has(variant)) {
+		const parts = value.split(",");
+		return [parts[0] ?? "", parts[1] ?? ""];
+	}
+	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
+	return value;
+}
+function serializeValue(value, variant) {
+	if (Array.isArray(value)) {
+		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
+		return value.join(",");
+	}
+	return value;
+}
+function parseReadableFilters(params, columns) {
+	const columnsById = /* @__PURE__ */ new Map();
+	for (const column of columns) {
+		const id = getColumnId(column);
+		if (id) columnsById.set(id, column);
+	}
+	const filters = [];
+	for (const [key, rawValue] of params.entries()) {
+		if (key.endsWith(OP_SUFFIX)) continue;
+		const { base } = splitKey(key);
+		const column = columnsById.get(base);
+		if (!column) continue;
+		const variant = getColumnVariant(column) ?? "text";
+		const opKey = `${key}${OP_SUFFIX}`;
+		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
+		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
+		filters.push({
+			id: base,
+			value: parsedValue,
+			variant,
+			operator,
+			filterId: key || generateId({ length: 8 })
+		});
+	}
+	return filters;
+}
+function applyReadableFilters(params, columns, filters) {
+	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
+	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
+	const counters = /* @__PURE__ */ new Map();
+	for (const filter of filters) {
+		const columnId = String(filter.id);
+		const count = (counters.get(columnId) ?? 0) + 1;
+		counters.set(columnId, count);
+		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
+		const variant = filter.variant ?? "text";
+		const value = serializeValue(filter.value, variant);
+		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
+		const defaultOperator = getDefaultFilterOperator(variant);
+		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
+	}
+	return params;
+}
+
 //#endregion
 //#region src/hooks/use-readable-filters.ts
 const URL_CHANGE_EVENT = "urlchange";
 function toSearchString(params) {
-	const queryString = params.toString().replace(/%2C/g, ",");
+	const queryString = params.toString().replace(/%2C/gu, ",");
 	return queryString ? `?${queryString}` : "";
 }
+function filterSignature(filters) {
+	return JSON.stringify(filters.map(({ id, operator, value, variant }) => JSON.stringify([
+		id,
+		operator,
+		variant === "multiSelect" && Array.isArray(value) ? [...value].sort() : value
+	])).sort());
+}
 function useReadableFilters(columns, options = {}) {
-	const { history = "replace", scroll = false } = options;
+	const { history = "replace", scroll = false, resetPageKey = "page" } = options;
 	const columnSnapshot = React.useMemo(() => columns, [columns]);
 	const lastWrittenUrlRef = React.useRef(null);
 	const filtersRef = React.useRef(null);
@@ -872,7 +879,10 @@ function useReadableFilters(columns, options = {}) {
 	}, [columnSnapshot]);
 	const writeToUrl = React.useCallback((next) => {
 		const params = getUrlParams();
+		const previousFilters = parseReadableFilters(params, columnSnapshot);
 		applyReadableFilters(params, columnSnapshot, next);
+		const nextFilters = parseReadableFilters(params, columnSnapshot);
+		if (resetPageKey !== false && resetPageKey.length > 0 && filterSignature(previousFilters) !== filterSignature(nextFilters)) params.delete(resetPageKey);
 		lastWrittenUrlRef.current = toSearchString(params);
 		setSearchParams(params, {
 			history,
@@ -881,6 +891,7 @@ function useReadableFilters(columns, options = {}) {
 	}, [
 		columnSnapshot,
 		history,
+		resetPageKey,
 		scroll
 	]);
 	return [filters, React.useCallback((updater) => {
@@ -1016,7 +1027,10 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 			return true;
 		});
 	}, [table, columnDefs]);
-	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
+	const [filters, setFilters] = useReadableFilters(columns, {
+		debounceMs,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page"
+	});
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const [joinOperator, setJoinOperator] = useQueryState(table.options.meta?.queryKeys?.joinOperator ?? "", parseAsStringEnum(["and", "or"]).withDefault("and"));
 	const onFilterAdd = React.useCallback(() => {
@@ -1554,7 +1568,10 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 			setSelectedColumn(null);
 		}
 	}, [inputValue, selectedColumn]);
-	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
+	const [filters, setFilters] = useReadableFilters(columns, {
+		debounceMs,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page"
+	});
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const onFilterAdd = React.useCallback((column, value) => {
 		if (!value.trim() && column.columnDef.meta?.variant !== "boolean") return;
@@ -2360,6 +2377,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	const queryStateOptions = table.options.meta?.queryStateOptions;
 	const [queryFilters, setQueryFilters] = useReadableFilters(columns, {
 		...queryStateOptions,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page",
 		shallow
 	});
 	const filters = externalFilters ?? queryFilters;
@@ -3199,6 +3217,10 @@ function renderCell(value, type, options) {
 		className: "text-muted-foreground",
 		children: "-"
 	});
+	if (Array.isArray(value) && value.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
 	const formatOptionValue = (optionValue) => {
 		const stringValue = String(optionValue);
 		return options?.find((option) => option.value === stringValue)?.label ?? stringValue;
@@ -6087,7 +6109,7 @@ function mergeOptionsByField(left, right) {
 function shouldResolveOptions(field, config, hiddenColumns) {
 	if (!config) return false;
 	if (hiddenColumns.has(field)) return false;
-	if (getTableOptions(config)) return false;
+	if (getTableOptions(config) && !getTableConfig(config)?.dataSource) return false;
 	return normalizeDataSourceConfig(getTableDataSource(config)) !== void 0;
 }
 function useRegistryVersion(subscribe) {
@@ -6437,7 +6459,7 @@ function buildTableOverrides(fields, legacyOverrides, dynamicFilterState, dynami
 		const filterDataSourceSearchable = dynamicFilterState?.searchableByField[key];
 		const currentDynamicOptions = !fieldOptions && filterDataSourceRegistered ? toTableOptions(dynamicFilterState?.optionsByField[key] ?? []) : void 0;
 		const dynamicFilterLabelOptions = !fieldOptions && filterDataSourceRegistered ? dynamicFilterState?.labelOptionsByField[key] ?? dynamicFilterState?.optionsByField[key] ?? [] : void 0;
-		const dynamicResolveOptions = !presentationOptions ? dynamicResolveState?.optionsByField[key] : void 0;
+		const dynamicResolveOptions = dynamicResolveState?.optionsByField[key];
 		const mergedSharedDynamicOptions = mergeFieldOptions(dynamicFilterLabelOptions, tableConfig?.dataSource ? void 0 : dynamicResolveOptions);
 		const dynamicOptions = !fieldOptions && mergedSharedDynamicOptions ? toTableOptions(mergedSharedDynamicOptions) : void 0;
 		const tableMeta = config.table !== false && typeof config.table === "object" ? config.table.meta : void 0;
@@ -6512,7 +6534,7 @@ function buildTableOverrides(fields, legacyOverrides, dynamicFilterState, dynami
 			};
 			const hasTableLabels = config.table.options !== void 0 || config.table.dataSource !== void 0;
 			if (display && display !== "auto" || hasTableLabels) {
-				const options = presentationOptions ?? dynamicResolveOptions ?? mergedSharedDynamicOptions;
+				const options = tableConfig?.dataSource ? mergeFieldOptions(dynamicResolveOptions, presentationOptions) : presentationOptions ?? mergedSharedDynamicOptions;
 				result[key] = {
 					...result[key],
 					cell: ({ row }) => renderFieldValue(row.getValue(key), "string", {
@@ -6625,6 +6647,10 @@ function renderFieldValue(value, type, booleanLocale, options, display = "auto")
 		className: "text-muted-foreground",
 		children: "-"
 	});
+	if (Array.isArray(value) && value.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
 	const renderText = (item) => getOptionLabel(item, options);
 	if (display === "text") return Array.isArray(value) ? value.map(renderText).join(", ") : renderText(value);
 	if (display === "date" || display === "datetime") return formatDate(value, {}, display);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -62,9 +62,9 @@
     "nanoid": "^5.1.6",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
-    "@wordrhyme/formily-shadcn": "1.13.4",
+    "@wordrhyme/shadcn": "1.3.4",
     "@wordrhyme/shadcn-ui": "1.32.9",
-    "@wordrhyme/shadcn": "1.3.4"
+    "@wordrhyme/formily-shadcn": "1.13.4"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.18",
@@ -85,8 +85,8 @@
     "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/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },