@wordrhyme/auto-crud 1.1.1 → 1.1.3

package/dist/index.cjs

@@ -59,6 +59,8 @@ let __pixpilot_formily_shadcn = require("@pixpilot/formily-shadcn");
 __pixpilot_formily_shadcn = __toESM(__pixpilot_formily_shadcn);
 let __formily_react = require("@formily/react");
 __formily_react = __toESM(__formily_react);
+let __pixpilot_shadcn_ui = require("@pixpilot/shadcn-ui");
+__pixpilot_shadcn_ui = __toESM(__pixpilot_shadcn_ui);
 let sonner = require("sonner");
 sonner = __toESM(sonner);
 
@@ -2705,8 +2707,17 @@ function DataTableViewOptions({ table, disabled,...props }) {
 
 //#endregion
 //#region src/components/auto-crud/auto-table-simple-filters.tsx
-function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilters, onFiltersChange }) {
-	const columns = react.useMemo(() => table.getAllColumns().filter((col) => col.getCanFilter()), [table]);
+function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilters, onFiltersChange, leading }) {
+	const columns = react.useMemo(() => table.getAllColumns().filter((col) => col.getCanFilter()).sort((a, b) => {
+		const readOrder = (column) => {
+			const metaIndex = column.columnDef.meta?.index;
+			const columnIndex = column.columnDef.index;
+			return typeof metaIndex === "number" ? metaIndex : typeof columnIndex === "number" ? columnIndex : 1e4;
+		};
+		const orderDiff = readOrder(a) - readOrder(b);
+		if (orderDiff !== 0) return orderDiff;
+		return a.getIndex() - b.getIndex();
+	}), [table]);
 	const queryStateOptions = table.options.meta?.queryStateOptions;
 	const [queryFilters, setQueryFilters] = useReadableFilters(columns, {
 		...queryStateOptions,
@@ -2823,8 +2834,9 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	if (!mounted) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: containerRef,
-		className: "flex flex-wrap items-center gap-2 min-w-0",
+		className: "flex flex-1 flex-wrap items-center gap-2 min-w-0",
 		children: [
+			leading,
 			filterColumns.map((column, index) => {
 				const meta = column.columnDef.meta;
 				const value = getFilterValue(column.id);
@@ -3957,7 +3969,7 @@ function createTableSchema(schema, options) {
 		if (cached) return [...cached];
 	}
 	const shape = schema.shape;
-	const columns = [];
+	const columnEntries = [];
 	for (const [key, fieldSchema] of Object.entries(shape)) {
 		if (exclude.includes(key)) continue;
 		const override = overrides?.[key];
@@ -3978,20 +3990,31 @@ function createTableSchema(schema, options) {
 			options: override?.meta?.options ?? autoOptions
 		};
 		const { meta: _ignoredMeta,...restOverride } = override ?? {};
-		columns.push({
-			id: key,
-			accessorKey: key,
-			header: ({ column }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableColumnHeader, {
-				column,
-				label
-			}),
-			cell: ({ row }) => renderCell(row.getValue(key), parsed.type),
-			enableColumnFilter: true,
-			enableSorting: true,
-			meta,
-			...restOverride
+		const sourceIndex = columnEntries.length;
+		const order = typeof restOverride.index === "number" ? restOverride.index : typeof meta.index === "number" ? meta.index : 1e4 + sourceIndex;
+		columnEntries.push({
+			order,
+			sourceIndex,
+			column: {
+				id: key,
+				accessorKey: key,
+				header: ({ column }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableColumnHeader, {
+					column,
+					label
+				}),
+				cell: ({ row }) => renderCell(row.getValue(key), parsed.type),
+				enableColumnFilter: true,
+				enableSorting: true,
+				meta,
+				...restOverride
+			}
 		});
 	}
+	const columns = columnEntries.sort((a, b) => {
+		const orderDiff = a.order - b.order;
+		if (orderDiff !== 0) return orderDiff;
+		return a.sourceIndex - b.sourceIndex;
+	}).map((entry) => entry.column);
 	if (canCache) baseTableSchemaCache.set(schema, columns);
 	return columns;
 }
@@ -4318,12 +4341,12 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
 		if (action.component) return renderComponent(action.component);
 		if (action.type === "batchUpdate") return renderBatchUpdate(action.type);
 		if (action.type === "export") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBarItem, {
-			onClick: () => action.onClick ? action.onClick(selectedRows, actionContext) : onExport(),
+			onClick: (event) => action.onClick ? action.onClick(selectedRows, actionContext, event) : onExport(),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, {}), action.label ?? "Export"]
 		}, "export");
 		if (action.type === "delete") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBarItem, {
 			variant: "destructive",
-			onClick: () => action.onClick ? action.onClick(selectedRows, actionContext) : onDelete(),
+			onClick: (event) => action.onClick ? action.onClick(selectedRows, actionContext, event) : onDelete(),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, {}), action.label ?? "Delete"]
 		}, "delete");
 		return null;
@@ -4345,7 +4368,7 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
 		if (!action.label || !action.onClick) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarItem, {
 			variant: action.variant === "destructive" ? "destructive" : "secondary",
-			onClick: () => action.onClick?.(selectedRows, actionContext),
+			onClick: (event) => action.onClick?.(selectedRows, actionContext, event),
 			children: action.label
 		}, `custom-${index}`);
 	}, [
@@ -4663,10 +4686,19 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, getSelectedRows }) {
+function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, getSelectedRows }) {
 	const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : DEFAULT_MODES;
 	const [currentMode, setCurrentMode] = useQueryState("filterMode", parseAsStringEnum(modes).withDefault(modes[0] ?? "simple"));
 	const showToggle = modes.length > 1;
+	const [searchValue, setSearchValue] = useUrlState("search", parseAsString.withDefault(""), {
+		shallow: false,
+		clearOnDefault: true
+	});
+	const [, setSearchPage] = useUrlState("page", parseAsInteger.withDefault(1), {
+		shallow: false,
+		clearOnDefault: true
+	});
+	const searchConfig = search && typeof search === "object" ? search : {};
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
 		columns: (0, react.useMemo)(() => {
@@ -4738,11 +4770,21 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 			})
 		})
 	})] }) : null;
+	const searchInput = search ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
+		value: searchValue,
+		onChange: (event) => {
+			setSearchValue(event.target.value);
+			setSearchPage(1);
+		},
+		placeholder: searchConfig.placeholder ?? "搜索",
+		className: "h-8 w-48 shrink-0"
+	}) : null;
 	const filtersContent = (0, react.useMemo)(() => {
 		switch (currentMode) {
 			case "simple": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoTableSimpleFilters, {
 				table,
-				shallow
+				shallow,
+				leading: searchInput
 			});
 			case "command": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableFilterMenu, {
 				table,
@@ -4762,6 +4804,7 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 		currentMode,
 		table,
 		shallow,
+		searchInput,
 		debounceMs,
 		throttleMs
 	]);
@@ -4773,10 +4816,14 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex flex-1 items-start gap-2 min-h-[40px]",
 					"data-filter-parent": true,
-					children: [currentMode !== "simple" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableSortList, {
-						table,
-						align: "start"
-					}), filtersContent]
+					children: [
+						currentMode !== "simple" && searchInput,
+						currentMode !== "simple" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableSortList, {
+							table,
+							align: "start"
+						}),
+						filtersContent
+					]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2",
 					children: [
@@ -4965,10 +5012,44 @@ function createEditFormSchema(schema, options) {
 
 //#endregion
 //#region src/components/auto-crud/auto-form.tsx
+const COMBOBOX_LIST_CLASS = "[&_[cmdk-list]]:max-h-[360px]";
 const FormilySwitch = (0, __formily_react.connect)(__pixpilot_shadcn.Switch, (0, __formily_react.mapProps)({
 	value: "checked",
 	onInput: "onCheckedChange"
 }));
+const FormilyCombobox = (0, __formily_react.connect)(AutoCrudCombobox, (0, __formily_react.mapProps)({ dataSource: "options" }));
+function AutoCrudCombobox({ options = [], filter, className,...props }) {
+	const resolvedFilter = (0, react.useMemo)(() => {
+		if (typeof filter === "function") return filter;
+		return createComboboxFilter(options);
+	}, [filter, options]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Combobox, {
+		...props,
+		options,
+		filter: resolvedFilter,
+		className: (0, __pixpilot_shadcn.cn)(COMBOBOX_LIST_CLASS, className)
+	});
+}
+function createComboboxFilter(options) {
+	const searchTextByValue = new Map(options.map((option) => [option.value, collectSearchText(option.value, option.label, option.searchText, option.keywords).toLocaleLowerCase()]));
+	return (value, search, keywords) => {
+		const query = search.trim().toLocaleLowerCase();
+		if (!query) return 1;
+		const searchText = collectSearchText(searchTextByValue.get(value), keywords).toLocaleLowerCase();
+		if (searchText === query) return 2;
+		return searchText.includes(query) ? 1 : 0;
+	};
+}
+function collectSearchText(...parts) {
+	const texts = [];
+	for (const part of parts) {
+		if (!part) continue;
+		if (Array.isArray(part)) texts.push(...part.map(String));
+		else if (typeof part === "object") texts.push(...Object.values(part).filter(Boolean).map(String));
+		else texts.push(String(part));
+	}
+	return texts.join(" ");
+}
 function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, overrides, mode = "create", loading = false, gridColumns = 1, labelAlign = "top", labelWidth, showSubmitButton = true }, ref) {
 	const form = (0, react.useMemo)(() => (0, __formily_core.createForm)({ initialValues }), [JSON.stringify(initialValues)]);
 	const formSchema = (0, react.useMemo)(() => createEditFormSchema(zodSchema, {
@@ -4993,10 +5074,16 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, overrides,
 		form,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_formily_shadcn.JsonSchemaField, {
 			schema: formSchema,
-			components: { fields: { Switch: {
-				component: FormilySwitch,
-				decorator: "FormItem"
-			} } }
+			components: { fields: {
+				Combobox: {
+					component: FormilyCombobox,
+					decorator: "FormItem"
+				},
+				Switch: {
+					component: FormilySwitch,
+					decorator: "FormItem"
+				}
+			} }
 		}), showSubmitButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex justify-end gap-2 mt-6",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
@@ -6088,6 +6175,11 @@ function resolveActions(actionsOrFn, defaults, rowActionsLocale) {
 */
 function AutoCrudTable({ title, description, schema, resource, fields, table: tableConfig, form: formConfig, permissions, actions: actionItems, toolbarActions, locale: localeProp, onCreate }) {
 	const locale = resolveLocale(localeProp);
+	const resolvedSchema = resource.schema ?? schema;
+	const resolvedFields = react.useMemo(() => ({
+		...fields,
+		...resource.fields
+	}), [fields, resource.fields]);
 	const can = {
 		create: permissions?.can?.create ?? true,
 		update: permissions?.can?.update ?? true,
@@ -6103,10 +6195,10 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 	const [exporting, setExporting] = react.useState(false);
 	const getSelectedRowsRef = react.useRef(null);
 	const importColumns = react.useMemo(() => {
-		const shape = schema.shape;
+		const shape = resolvedSchema.shape;
 		const denySet = new Set(denyFields ?? []);
 		return Object.keys(shape).filter((key) => !denySet.has(key));
-	}, [schema, denyFields]);
+	}, [resolvedSchema, denyFields]);
 	const handleExport = react.useCallback(async (mode) => {
 		const filename = title ?? "export";
 		const excludeColumns = denyFields;
@@ -6138,21 +6230,34 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 			setExporting(false);
 		}
 	}, [selectedCount, handleExport]);
-	const tableOverrides = react.useMemo(() => buildTableOverrides(fields, tableConfig?.overrides), [fields, tableConfig?.overrides]);
-	const formOverrides = react.useMemo(() => buildFormOverrides(fields, formConfig?.overrides, denyFields), [
-		fields,
+	const tableOverrides = react.useMemo(() => buildTableOverrides(resolvedFields, tableConfig?.overrides), [resolvedFields, tableConfig?.overrides]);
+	const formOverrides = react.useMemo(() => buildFormOverrides(resolvedFields, formConfig?.overrides, denyFields), [
+		resolvedFields,
 		formConfig?.overrides,
 		denyFields
 	]);
-	const hiddenColumns = react.useMemo(() => buildHiddenColumns(fields, tableConfig?.hidden, denyFields), [
-		fields,
+	const hiddenColumns = react.useMemo(() => buildHiddenColumns(resolvedFields, tableConfig?.hidden, denyFields), [
+		resolvedFields,
 		tableConfig?.hidden,
 		denyFields
 	]);
-	const batchFields = react.useMemo(() => buildBatchUpdateFields(schema, tableConfig?.batchFields, fields), [
-		schema,
+	const searchConfig = react.useMemo(() => {
+		const tableSearch = tableConfig?.search;
+		if (tableSearch === false) return false;
+		if (tableSearch && typeof tableSearch === "object") return tableSearch;
+		return Object.values(resolvedFields).some((field) => field?.search === true) ? true : false;
+	}, [resolvedFields, tableConfig?.search]);
+	const batchFields = react.useMemo(() => buildBatchUpdateFields(resolvedSchema, tableConfig?.batchFields, resolvedFields), [
+		resolvedSchema,
 		tableConfig?.batchFields,
-		fields
+		resolvedFields
+	]);
+	const formInitialValues = react.useMemo(() => {
+		return resource.modal.createOpen ? resource.modal.copySource ?? void 0 : resource.modal.selected ?? void 0;
+	}, [
+		resource.modal.createOpen,
+		resource.modal.copySource,
+		resource.modal.selected
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-4",
@@ -6233,11 +6338,12 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoTable, {
 				data: resource.tableData.data,
-				schema,
+				schema: resolvedSchema,
 				pageCount: resource.tableData.pageCount,
 				overrides: tableOverrides,
 				exclude: hiddenColumns,
 				filterMode: tableConfig?.filterModes,
+				search: searchConfig,
 				actions: resolveActions(actionItems, {
 					openView: resource.handlers.openView,
 					openEdit: can.update ? resource.handlers.openEdit : void 0,
@@ -6258,8 +6364,8 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 				open: resource.modal.createOpen || resource.modal.editOpen,
 				onOpenChange: (open) => !open && resource.handlers.closeModals(),
 				mode: resource.modal.createOpen ? "create" : "edit",
-				schema,
-				initialValues: resource.modal.createOpen ? resource.modal.copySource ?? void 0 : resource.modal.selected ?? void 0,
+				schema: resolvedSchema,
+				initialValues: formInitialValues,
 				onSubmit: (values) => {
 					if (resource.modal.createOpen) resource.handlers.submitCreate(values);
 					else resource.handlers.submitUpdate(values);
@@ -6276,8 +6382,8 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 				onOpenChange: (open) => !open && resource.handlers.closeModals(),
 				variant: resource.modal.variant,
 				data: resource.modal.selected,
-				schema,
-				fields,
+				schema: resolvedSchema,
+				fields: resolvedFields,
 				denyFields,
 				locale
 			}),
@@ -6996,6 +7102,53 @@ const noopToastAdapter = {
 	info: () => {},
 	warning: () => {}
 };
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isJsonSchemaObject(value) {
+	return isRecord(value) && isRecord(value.properties);
+}
+function readJsonSchemaType(property) {
+	return Array.isArray(property.type) ? property.type.find((item) => item !== "null") : property.type;
+}
+function jsonPropertyToZod(property, required) {
+	const enumValues = property.enum?.filter((value) => typeof value === "string");
+	let schema;
+	if (enumValues && enumValues.length > 0) schema = zod.z.enum(enumValues);
+	else switch (readJsonSchemaType(property)) {
+		case "number":
+		case "integer":
+			schema = zod.z.number();
+			break;
+		case "boolean":
+			schema = zod.z.boolean();
+			break;
+		case "array":
+			schema = zod.z.array(zod.z.unknown());
+			break;
+		case "object":
+			schema = zod.z.record(zod.z.string(), zod.z.unknown());
+			break;
+		case "string":
+			schema = property.format === "date" || property.format === "date-time" ? zod.z.coerce.date() : zod.z.string();
+			break;
+		default: schema = zod.z.unknown();
+	}
+	return required ? schema : schema.optional();
+}
+function mergeMetadataSchema(baseSchema, metadataSchema) {
+	if (!isJsonSchemaObject(metadataSchema)) return baseSchema;
+	const required = new Set(Array.isArray(metadataSchema.required) ? metadataSchema.required.filter((field) => typeof field === "string") : []);
+	const extensionShape = {};
+	for (const [field, property] of Object.entries(metadataSchema.properties ?? {})) {
+		if (field in baseSchema.shape) continue;
+		extensionShape[field] = jsonPropertyToZod(property, required.has(field));
+	}
+	return Object.keys(extensionShape).length > 0 ? baseSchema.extend(extensionShape) : baseSchema;
+}
+function readMetadataFields(fields) {
+	return isRecord(fields) ? fields : void 0;
+}
 /**
 * Modal 状态 Reducer
 */
@@ -7054,12 +7207,16 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 	(0, react.useEffect)(() => {
 		hooksRef.current = hooks;
 	}, [hooks]);
-	const columns = (0, react.useMemo)(() => createTableSchema(schema), [schema]);
+	const metadata = (router.meta?.useQuery(void 0, { staleTime: 3e4 }))?.data;
+	const resolvedSchema = (0, react.useMemo)(() => mergeMetadataSchema(schema, metadata?.schema), [schema, metadata?.schema]);
+	const metadataFields = (0, react.useMemo)(() => readMetadataFields(metadata?.fields), [metadata?.fields]);
+	const columns = (0, react.useMemo)(() => createTableSchema(resolvedSchema), [resolvedSchema]);
 	const [urlParams] = useQueryStates({
 		page: parseAsInteger.withDefault(1),
 		perPage: parseAsInteger.withDefault(10),
 		sort: getSortingStateParser().withDefault([]),
-		joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and")
+		joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+		search: parseAsString.withDefault("")
 	}, { shallow: false });
 	const [filters] = useReadableFilters(columns, { shallow: false });
 	const queryInput = (0, react.useMemo)(() => {
@@ -7068,7 +7225,8 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 			perPage: urlParams.perPage,
 			sort: urlParams.sort,
 			filters,
-			joinOperator: urlParams.joinOperator
+			joinOperator: urlParams.joinOperator,
+			...urlParams.search.trim() ? { search: urlParams.search.trim() } : {}
 		};
 		return queryTransform ? queryTransform(autoParams) : autoParams;
 	}, [
@@ -7080,6 +7238,7 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 		placeholderData: keepPreviousData,
 		staleTime: 0
 	});
+	const tableRows = listQuery.data?.data ?? [];
 	const createMutation = router.create.useMutation();
 	const updateMutation = router.update.useMutation();
 	const deleteMutation = router.delete.useMutation();
@@ -7332,11 +7491,13 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 	const canExport = !!(exportFetcher || exportQuery);
 	return {
 		tableData: {
-			data: listQuery.data?.data ?? [],
+			data: tableRows,
 			pageCount: listQuery.data?.pageCount ?? 0,
 			isLoading: listQuery.isLoading,
 			isFetching: listQuery.isFetching
 		},
+		schema: resolvedSchema,
+		fields: metadataFields,
 		modal,
 		mutations: {
 			isCreating: createMutation.isPending,