@wordrhyme/auto-crud 1.1.5 → 1.1.7

package/dist/index.cjs

@@ -59,8 +59,6 @@ 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);
 
@@ -1459,6 +1457,7 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 	const descriptionId = react.useId();
 	const [open, setOpen] = react.useState(false);
 	const addButtonRef = react.useRef(null);
+	const columnDefs = table.options.columns;
 	const columns = react.useMemo(() => {
 		return table.getAllColumns().filter((column) => {
 			if (!column.getCanFilter()) return false;
@@ -1466,7 +1465,7 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 			if (modes && !modes.includes("advanced")) return false;
 			return true;
 		});
-	}, [table]);
+	}, [table, columnDefs]);
 	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const [joinOperator, setJoinOperator] = useQueryState(table.options.meta?.queryKeys?.joinOperator ?? "", parseAsStringEnum(["and", "or"]).withDefault("and"));
@@ -1944,7 +1943,7 @@ 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) {
+function getOptionCommandValue(option) {
 	return [
 		option.value,
 		option.label,
@@ -1953,6 +1952,7 @@ function getOptionCommandValue$2(option) {
 }
 function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = THROTTLE_MS$1, shallow = true, disabled,...props }) {
 	const id = react.useId();
+	const columnDefs = table.options.columns;
 	const columns = react.useMemo(() => {
 		return table.getAllColumns().filter((column) => {
 			if (!column.columnDef.enableColumnFilter) return false;
@@ -1960,7 +1960,7 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 			if (modes && !modes.includes("command")) return false;
 			return true;
 		});
-	}, [table]);
+	}, [table, columnDefs]);
 	const [open, setOpen] = react.useState(false);
 	const [selectedColumn, setSelectedColumn] = react.useState(null);
 	const [inputValue, setInputValue] = react.useState("");
@@ -2229,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: getOptionCommandValue$2(option),
+			value: getOptionCommandValue(option),
 			onSelect: () => onSelect(option.value),
 			children: [
 				option.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(option.icon, {}),
@@ -2356,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: getOptionCommandValue$2(option),
+						value: getOptionCommandValue(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 });
@@ -2713,9 +2713,209 @@ function DataTableViewOptions({ table, disabled,...props }) {
 	})] });
 }
 
+//#endregion
+//#region src/components/ui/multi-combobox.tsx
+const DEFAULT_OPTIONS = [];
+const SCROLLABLE_COMMAND_GROUP_STYLE = {
+	maxHeight: "300px",
+	overscrollBehavior: "contain",
+	overflowX: "hidden",
+	overflowY: "auto"
+};
+function getWheelDeltaY(event) {
+	if (event.deltaMode === 1) return event.deltaY * 16;
+	if (event.deltaMode === 2) return event.deltaY * event.currentTarget.clientHeight;
+	return event.deltaY;
+}
+function handleScrollableCommandGroupWheel(event) {
+	const target = event.currentTarget;
+	if (target.scrollHeight <= target.clientHeight) return;
+	const maxScrollTop = target.scrollHeight - target.clientHeight;
+	const nextScrollTop = Math.max(0, Math.min(target.scrollTop + getWheelDeltaY(event), maxScrollTop));
+	if (nextScrollTop === target.scrollTop) return;
+	event.preventDefault();
+	event.stopPropagation();
+	target.scrollTop = nextScrollTop;
+}
+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 getOptionKeywords(option) {
+	return collectSearchText(typeof option.label === "string" || typeof option.label === "number" ? option.label : void 0, option.searchText, option.keywords).split(/\s+/).filter(Boolean);
+}
+function getOptionText(option) {
+	if (typeof option.label === "string" || typeof option.label === "number") return String(option.label);
+	return option.value;
+}
+function createNextValue(currentValue, optionValue, isSelected, selectionMode) {
+	if (selectionMode === "single") return isSelected ? [] : [optionValue];
+	return isSelected ? currentValue.filter((value) => value !== optionValue) : [...currentValue, optionValue];
+}
+function DefaultMultiComboboxTrigger({ open, selectedOptions, selectedValues, clearSelection, disabled, readOnly, placeholder, selectedText, className,...buttonProps }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+		...buttonProps,
+		type: "button",
+		variant: "outline",
+		role: "combobox",
+		"aria-expanded": open,
+		disabled,
+		className: (0, __pixpilot_shadcn.cn)("w-full justify-between", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden",
+			children: selectedValues.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "truncate text-muted-foreground",
+				children: placeholder
+			}) : selectedOptions.length <= 2 ? selectedOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
+				variant: "secondary",
+				className: "max-w-[8rem] rounded-sm px-1 font-normal",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: option.label
+				})
+			}, option.value)) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Badge, {
+				variant: "secondary",
+				className: "rounded-sm px-1 font-normal",
+				children: [
+					selectedValues.length,
+					" ",
+					selectedText
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "ml-2 flex shrink-0 items-center gap-1",
+			children: [selectedValues.length > 0 && !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				role: "button",
+				"aria-label": "Clear selection",
+				tabIndex: 0,
+				className: "rounded-sm px-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+				onClick: clearSelection,
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						clearSelection(event);
+					}
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-3" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDown, { className: "h-4 w-4 opacity-50" })]
+		})]
+	});
+}
+const MultiCombobox = ({ value, defaultValue, onChange, options = DEFAULT_OPTIONS, placeholder = "Select options...", searchPlaceholder = "Search...", emptyText = "No options found.", clearText = "Clear selection", selectedText = "selected", selectionMode = "multiple", disabled, readOnly, className, contentClassName, triggerClassName, matchTriggerWidth = true, renderTrigger, filter,...commandProps }) => {
+	const [open, setOpen] = react.useState(false);
+	const [internalValue, setInternalValue] = react.useState(defaultValue ?? []);
+	const selectedValues = value ?? internalValue;
+	const selectedValueSet = react.useMemo(() => new Set(selectedValues), [selectedValues]);
+	const selectedOptions = react.useMemo(() => options.filter((option) => selectedValueSet.has(option.value)), [options, selectedValueSet]);
+	const commitChange = react.useCallback((nextValue) => {
+		if (value === void 0) setInternalValue(nextValue);
+		onChange?.(nextValue);
+	}, [onChange, value]);
+	const clearSelection = react.useCallback((event) => {
+		event?.preventDefault();
+		event?.stopPropagation();
+		if (readOnly) return;
+		commitChange([]);
+	}, [commitChange, readOnly]);
+	const onItemSelect = react.useCallback((option) => {
+		if (option.disabled || readOnly) return;
+		const isSelected = selectedValueSet.has(option.value);
+		commitChange(createNextValue(selectedValues, option.value, isSelected, selectionMode));
+		if (selectionMode === "single") setOpen(false);
+	}, [
+		commitChange,
+		readOnly,
+		selectedValues,
+		selectedValueSet,
+		selectionMode
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
+			asChild: true,
+			children: renderTrigger ? renderTrigger({
+				open,
+				selectedOptions,
+				selectedValues,
+				clearSelection,
+				disabled,
+				readOnly
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultMultiComboboxTrigger, {
+				open,
+				selectedOptions,
+				selectedValues,
+				clearSelection,
+				disabled,
+				readOnly,
+				placeholder,
+				selectedText,
+				className: triggerClassName
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
+			className: (0, __pixpilot_shadcn.cn)("w-full p-0", contentClassName),
+			style: matchTriggerWidth ? { width: "var(--radix-popover-trigger-width)" } : void 0,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Command, {
+				className,
+				filter,
+				...commandProps,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandInput, { placeholder: searchPlaceholder }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandList, {
+					className: "max-h-full",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandEmpty, { children: emptyText }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandGroup, {
+							className: "max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden",
+							onWheelCapture: handleScrollableCommandGroupWheel,
+							style: SCROLLABLE_COMMAND_GROUP_STYLE,
+							children: options.map((option) => {
+								const isSelected = selectedValueSet.has(option.value);
+								const Icon = option.icon;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandItem, {
+									value: option.value,
+									keywords: getOptionKeywords(option),
+									disabled: option.disabled,
+									onSelect: () => onItemSelect(option),
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: (0, __pixpilot_shadcn.cn)("flex size-4 items-center justify-center rounded-sm border border-primary", isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {})
+										}),
+										Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "size-4" }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "truncate",
+											children: getOptionText(option)
+										}),
+										option.count !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "ml-auto font-mono text-xs",
+											children: option.count
+										})
+									]
+								}, option.value);
+							})
+						}),
+						selectedValues.length > 0 && !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandItem, {
+							onSelect: () => commitChange([]),
+							className: "justify-center text-center",
+							children: clearText
+						}) })] })
+					]
+				})]
+			})
+		})]
+	});
+};
+MultiCombobox.displayName = "MultiCombobox";
+
 //#endregion
 //#region src/components/auto-crud/auto-table-simple-filters.tsx
 function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilters, onFiltersChange, leading }) {
+	const columnDefs = table.options.columns;
 	const columns = react.useMemo(() => table.getAllColumns().filter((col) => col.getCanFilter()).sort((a, b) => {
 		const readOrder = (column) => {
 			const metaIndex = column.columnDef.meta?.index;
@@ -2725,7 +2925,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 		const orderDiff = readOrder(a) - readOrder(b);
 		if (orderDiff !== 0) return orderDiff;
 		return a.getIndex() - b.getIndex();
-	}), [table]);
+	}), [table, columnDefs]);
 	const queryStateOptions = table.options.meta?.queryStateOptions;
 	const [queryFilters, setQueryFilters] = useReadableFilters(columns, {
 		...queryStateOptions,
@@ -2959,120 +3159,60 @@ 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]);
-	const onItemSelect = (option, isSelected) => {
-		if (multiple) {
-			const newValues = new Set(selectedValues);
-			if (isSelected) newValues.delete(option.value);
-			else newValues.add(option.value);
-			onChange(Array.from(newValues));
-		} else {
-			onChange(isSelected ? [] : [option.value]);
-			setOpen(false);
-		}
-	};
-	const onReset = (e) => {
-		e?.stopPropagation();
-		onChange([]);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
-				variant: "outline",
-				size: "sm",
-				className: "border-dashed font-normal",
-				children: [
-					selectedValues.size > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						role: "button",
-						tabIndex: 0,
-						className: "rounded-sm opacity-70 hover:opacity-100",
-						onClick: onReset,
-						onKeyDown: (e) => {
-							if (e.key === "Enter" || e.key === " ") {
-								e.preventDefault();
-								onReset(e);
-							}
-						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, {})
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PlusCircle, {}),
-					title,
-					selectedValues.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Separator, {
-							orientation: "vertical",
-							className: "mx-0.5 h-4"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
-							variant: "secondary",
-							className: "rounded-sm px-1 font-normal lg:hidden",
-							children: selectedValues.size
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "hidden items-center gap-1 lg:flex",
-							children: selectedValues.size > 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Badge, {
-								variant: "secondary",
-								className: "rounded-sm px-1 font-normal",
-								children: [selectedValues.size, " selected"]
-							}) : options.filter((o) => selectedValues.has(o.value)).map((o) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
-								variant: "secondary",
-								className: "rounded-sm px-1 font-normal",
-								children: o.label
-							}, o.value))
-						})
-					] })
-				]
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
-			className: "w-50 p-0",
-			align: "start",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Command, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandInput, { placeholder: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandList, {
-				className: "max-h-full",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandEmpty, { children: "No results found." }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandGroup, {
-						className: "max-h-[300px] overflow-y-auto",
-						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", {
-										className: cn("flex size-4 items-center justify-center rounded-sm border border-primary", isSelected ? "bg-primary" : "opacity-50 [&_svg]:invisible"),
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {})
-									}),
-									option.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(option.icon, {}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "truncate",
-										children: option.label
-									}),
-									option.count && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "ml-auto font-mono text-xs",
-										children: option.count
-									})
-								]
-							}, option.value);
-						})
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiCombobox, {
+		value,
+		onChange,
+		options,
+		selectionMode: multiple ? "multiple" : "single",
+		searchPlaceholder: title,
+		contentClassName: "w-50",
+		matchTriggerWidth: false,
+		clearText: "Clear filters",
+		renderTrigger: ({ selectedOptions, selectedValues, clearSelection }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+			variant: "outline",
+			size: "sm",
+			className: "border-dashed font-normal",
+			children: [
+				selectedValues.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					role: "button",
+					tabIndex: 0,
+					className: "rounded-sm opacity-70 hover:opacity-100",
+					onClick: clearSelection,
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							clearSelection(e);
+						}
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, {})
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PlusCircle, {}),
+				title,
+				selectedValues.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Separator, {
+						orientation: "vertical",
+						className: "mx-0.5 h-4"
 					}),
-					selectedValues.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandItem, {
-						onSelect: () => onReset(),
-						className: "justify-center text-center",
-						children: "Clear filters"
-					}) })] })
-				]
-			})] })
-		})]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
+						variant: "secondary",
+						className: "rounded-sm px-1 font-normal lg:hidden",
+						children: selectedValues.length
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "hidden items-center gap-1 lg:flex",
+						children: selectedValues.length > 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: [selectedValues.length, " selected"]
+						}) : selectedOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: option.label
+						}, option.value))
+					})
+				] })
+			]
+		})
 	});
 }
 function SimpleSliderFilter({ title, range, unit, value, onChange }) {
@@ -3983,11 +4123,32 @@ function parseZodField(schema) {
 /**
 * 渲染单元格内容
 */
-function renderCell(value, type) {
+function renderCell(value, type, options) {
 	if (value === null || value === void 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;
+	};
+	if (options && options.length > 0) {
+		if (Array.isArray(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-1 flex-wrap",
+			children: [value.slice(0, 3).map((v, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
+				variant: "secondary",
+				children: formatOptionValue(v)
+			}, i)), value.length > 3 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Badge, {
+				variant: "outline",
+				children: ["+", value.length - 3]
+			})]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
+			variant: "outline",
+			className: "capitalize",
+			children: formatOptionValue(value)
+		});
+	}
 	switch (type) {
 		case "boolean": return value ? "✓" : "✗";
 		case "date": return formatDate(value);
@@ -4060,7 +4221,7 @@ function createTableSchema(schema, options) {
 					column,
 					label
 				}),
-				cell: ({ row }) => renderCell(row.getValue(key), parsed.type),
+				cell: ({ row }) => renderCell(row.getValue(key), parsed.type, meta.options),
 				enableColumnFilter: true,
 				enableSorting: true,
 				meta,
@@ -4757,25 +4918,27 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 		clearOnDefault: true
 	});
 	const searchConfig = search && typeof search === "object" ? search : {};
+	const enableAdvancedFilter = true;
+	const columns = (0, react.useMemo)(() => {
+		const dataColumns = createTableSchema(schema, {
+			overrides,
+			exclude
+		});
+		const result = enableRowSelection ? [createSelectColumn(), ...dataColumns] : dataColumns;
+		if (actions) result.push(createActionsColumn(actions));
+		return result;
+	}, [
+		schema,
+		overrides,
+		enableRowSelection,
+		exclude,
+		actions
+	]);
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
-		columns: (0, react.useMemo)(() => {
-			const dataColumns = createTableSchema(schema, {
-				overrides,
-				exclude
-			});
-			const result = enableRowSelection ? [createSelectColumn(), ...dataColumns] : dataColumns;
-			if (actions) result.push(createActionsColumn(actions));
-			return result;
-		}, [
-			schema,
-			overrides,
-			enableRowSelection,
-			exclude,
-			actions
-		]),
+		columns,
 		pageCount,
-		enableAdvancedFilter: true,
+		enableAdvancedFilter,
 		initialState: (0, react.useMemo)(() => ({
 			sorting: initialSorting,
 			columnPinning: pinnedColumns ?? {
@@ -4861,6 +5024,7 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 	}, [
 		currentMode,
 		table,
+		columns,
 		shallow,
 		searchInput,
 		debounceMs,
@@ -5076,37 +5240,31 @@ const FormilySwitch = (0, __formily_react.connect)(__pixpilot_shadcn.Switch, (0,
 	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, {
+const FormilyMultiCombobox = (0, __formily_react.connect)(AutoCrudMultiCombobox, (0, __formily_react.mapProps)({
+	dataSource: "options",
+	onInput: "onChange"
+}, (props, field) => {
+	const fieldValue = field.value;
+	return {
+		...props,
+		value: Array.isArray(fieldValue) ? fieldValue.map(String) : []
+	};
+}));
+function AutoCrudCombobox({ options = [], className, value, onChange,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiCombobox, {
 		...props,
+		value: value ? [value] : [],
 		options,
-		filter: resolvedFilter,
+		selectionMode: "single",
+		onChange: (nextValues) => onChange?.(nextValues[0] ?? ""),
 		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 AutoCrudMultiCombobox({ options = [],...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiCombobox, {
+		...props,
+		options
+	});
 }
 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)]);
@@ -5137,6 +5295,10 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, overrides,
 					component: FormilyCombobox,
 					decorator: "FormItem"
 				},
+				MultiCombobox: {
+					component: FormilyMultiCombobox,
+					decorator: "FormItem"
+				},
 				Switch: {
 					component: FormilySwitch,
 					decorator: "FormItem"
@@ -5954,6 +6116,7 @@ function mergeFieldConfig(base, override) {
 	return {
 		...base,
 		...override,
+		enum: override?.enum ?? base?.enum,
 		table: mergeFieldPart(base?.table, override?.table),
 		filter: mergeFieldPart(base?.filter, override?.filter),
 		form: mergeFieldPart(base?.form, override?.form)
@@ -5964,6 +6127,32 @@ function mergeFields(base, override) {
 	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(options) {
+	if (!options || options.length === 0) return void 0;
+	return options.map((option) => ({
+		...option,
+		value: String(option.value)
+	}));
+}
+function toTableOptions(options) {
+	return options?.map(({ label, value, searchText, count, icon }) => ({
+		label,
+		value,
+		searchText: Array.isArray(searchText) ? searchText.join(" ") : searchText,
+		count,
+		icon
+	}));
+}
+function toBatchOptions(options) {
+	return options?.map(({ label, value }) => ({
+		label,
+		value
+	}));
+}
+function getOptionLabel(value, options) {
+	const stringValue = String(value);
+	return options?.find((option) => option.value === stringValue)?.label ?? stringValue;
+}
 /**
 * 从统一配置生成表格 overrides
 * 当 filter 配置存在时，合并到 meta 中（不影响列隐藏）
@@ -5971,7 +6160,12 @@ function mergeFields(base, override) {
 function buildTableOverrides(fields, legacyOverrides) {
 	const result = { ...legacyOverrides };
 	if (fields) for (const [key, config] of Object.entries(fields)) {
+		const tableOptions = toTableOptions(normalizeFieldOptions(config.enum));
 		const tableMeta = config.table !== false && typeof config.table === "object" ? config.table.meta : void 0;
+		const fieldEnumMeta = tableOptions ? {
+			options: tableOptions,
+			variant: "multiSelect"
+		} : void 0;
 		let filterMeta;
 		if (config.filter && typeof config.filter === "object") {
 			if (config.filter.enabled !== false && config.filter.hidden !== true) {
@@ -5989,10 +6183,11 @@ function buildTableOverrides(fields, legacyOverrides) {
 				enableColumnFilter: false
 			};
 		}
-		if (tableMeta || filterMeta) result[key] = {
+		if (fieldEnumMeta || tableMeta || filterMeta) result[key] = {
 			...result[key],
 			meta: {
 				...result[key]?.meta ?? {},
+				...fieldEnumMeta ?? {},
 				...tableMeta ?? {},
 				...filterMeta ?? {}
 			}
@@ -6030,6 +6225,7 @@ function buildFormOverrides(fields, legacyOverrides, denyFields) {
 		"x-hidden": true
 	};
 	if (fields) for (const [key, config] of Object.entries(fields)) {
+		const fieldOptions = normalizeFieldOptions(config.enum);
 		if (config.label) result[key] = {
 			...result[key],
 			title: config.label
@@ -6038,6 +6234,10 @@ function buildFormOverrides(fields, legacyOverrides, denyFields) {
 			...result[key],
 			"x-hidden": true
 		};
+		if (fieldOptions) result[key] = {
+			...result[key],
+			enum: fieldOptions
+		};
 		if (config.form === false) result[key] = {
 			...result[key],
 			"x-hidden": true
@@ -6080,6 +6280,12 @@ function buildBatchUpdateFields(schema, batchFields, fields) {
 		}
 		const parsed = parseZodField(fieldSchema);
 		const label = fields?.[field]?.label ?? humanize(field);
+		const batchOptions = toBatchOptions(normalizeFieldOptions(fields?.[field]?.enum));
+		if (batchOptions) return {
+			field,
+			label,
+			options: batchOptions
+		};
 		if (parsed.type === "enum" && parsed.enumValues) return {
 			field,
 			label,
@@ -6099,11 +6305,28 @@ function buildBatchUpdateFields(schema, batchFields, fields) {
 /**
 * 渲染字段值
 */
-function renderFieldValue(value, type, booleanLocale) {
+function renderFieldValue(value, type, booleanLocale, options) {
 	if (value === null || value === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "text-muted-foreground",
 		children: "-"
 	});
+	if (options && options.length > 0) {
+		if (Array.isArray(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-1 flex-wrap",
+			children: [value.slice(0, 5).map((v, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
+				variant: "secondary",
+				children: getOptionLabel(v, options)
+			}, i)), value.length > 5 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Badge, {
+				variant: "outline",
+				children: ["+", value.length - 5]
+			})]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
+			variant: "outline",
+			className: "capitalize",
+			children: getOptionLabel(value, options)
+		});
+	}
 	switch (type) {
 		case "boolean": return value ? booleanLocale.true : booleanLocale.false;
 		case "date": return formatDate(value);
@@ -6141,6 +6364,7 @@ function ViewModal({ open, onOpenChange, variant, data, schema, fields: fieldCon
 			const parsed = parseZodField(fieldSchema);
 			const label = fieldConfig?.[key]?.label ?? humanize(key);
 			const value = data[key];
+			const options = normalizeFieldOptions(fieldConfig?.[key]?.enum);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "grid grid-cols-3 items-start gap-4",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
@@ -6148,7 +6372,7 @@ function ViewModal({ open, onOpenChange, variant, data, schema, fields: fieldCon
 					children: label
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
 					className: "col-span-2 text-sm",
-					children: renderFieldValue(value, parsed.type, locale.boolean)
+					children: renderFieldValue(value, parsed.type, locale.boolean, options)
 				})]
 			}, key);
 		})
@@ -6580,122 +6804,62 @@ 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();
-	const selectedValues = new Set(Array.isArray(columnFilterValue) ? columnFilterValue : []);
-	const onItemSelect = react.useCallback((option, isSelected) => {
-		if (!column) return;
-		if (multiple) {
-			const newSelectedValues = new Set(selectedValues);
-			if (isSelected) newSelectedValues.delete(option.value);
-			else newSelectedValues.add(option.value);
-			const filterValues = Array.from(newSelectedValues);
-			column.setFilterValue(filterValues.length ? filterValues : void 0);
-		} else {
-			column.setFilterValue(isSelected ? void 0 : [option.value]);
-			setOpen(false);
-		}
-	}, [
-		column,
-		multiple,
-		selectedValues
-	]);
-	const onReset = react.useCallback((event) => {
-		event?.stopPropagation();
-		column?.setFilterValue(void 0);
-	}, [column]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
-				variant: "outline",
-				size: "sm",
-				className: "border-dashed font-normal",
-				children: [
-					selectedValues?.size > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						role: "button",
-						"aria-label": `Clear ${title} filter`,
-						tabIndex: 0,
-						className: "rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-						onClick: onReset,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, {})
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PlusCircle, {}),
-					title,
-					selectedValues?.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Separator, {
-							orientation: "vertical",
-							className: "mx-0.5 data-[orientation=vertical]:h-4"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
-							variant: "secondary",
-							className: "rounded-sm px-1 font-normal lg:hidden",
-							children: selectedValues.size
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "hidden items-center gap-1 lg:flex",
-							children: selectedValues.size > 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Badge, {
-								variant: "secondary",
-								className: "rounded-sm px-1 font-normal",
-								children: [selectedValues.size, " selected"]
-							}) : options.filter((option) => selectedValues.has(option.value)).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
-								variant: "secondary",
-								className: "rounded-sm px-1 font-normal",
-								children: option.label
-							}, option.value))
-						})
-					] })
-				]
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
-			className: "w-50 p-0",
-			align: "start",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Command, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandInput, { placeholder: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandList, {
-				className: "max-h-full",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandEmpty, { children: "No results found." }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandGroup, {
-						className: "max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden",
-						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", {
-										className: cn("flex size-4 items-center justify-center rounded-sm border border-primary", isSelected ? "bg-primary" : "opacity-50 [&_svg]:invisible"),
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {})
-									}),
-									option.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(option.icon, {}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "truncate",
-										children: option.label
-									}),
-									option.count && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "ml-auto font-mono text-xs",
-										children: option.count
-									})
-								]
-							}, option.value);
-						})
+	const selectedValues = Array.isArray(columnFilterValue) ? columnFilterValue.filter((value) => typeof value === "string") : [];
+	const onChange = (nextValues) => {
+		column?.setFilterValue(nextValues.length ? nextValues : void 0);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiCombobox, {
+		value: selectedValues,
+		onChange,
+		options,
+		selectionMode: multiple ? "multiple" : "single",
+		searchPlaceholder: title,
+		contentClassName: "w-50",
+		matchTriggerWidth: false,
+		clearText: "Clear filters",
+		renderTrigger: ({ selectedOptions, selectedValues: selectedValues$1, clearSelection }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			className: "border-dashed font-normal",
+			disabled: !column,
+			children: [
+				selectedValues$1.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					role: "button",
+					"aria-label": `Clear ${title} filter`,
+					tabIndex: 0,
+					className: "rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+					onClick: clearSelection,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, {})
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PlusCircle, {}),
+				title,
+				selectedValues$1.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Separator, {
+						orientation: "vertical",
+						className: "mx-0.5 data-[orientation=vertical]:h-4"
 					}),
-					selectedValues.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandItem, {
-						onSelect: () => onReset(),
-						className: "justify-center text-center",
-						children: "Clear filters"
-					}) })] })
-				]
-			})] })
-		})]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
+						variant: "secondary",
+						className: "rounded-sm px-1 font-normal lg:hidden",
+						children: selectedValues$1.length
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "hidden items-center gap-1 lg:flex",
+						children: selectedValues$1.length > 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: [selectedValues$1.length, " selected"]
+						}) : selectedOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Badge, {
+							variant: "secondary",
+							className: "rounded-sm px-1 font-normal",
+							children: option.label
+						}, option.value))
+					})
+				] })
+			]
+		})
 	});
 }
 
@@ -7929,6 +8093,7 @@ exports.DataTableToolbar = DataTableToolbar;
 exports.DataTableViewOptions = DataTableViewOptions;
 exports.ExportDialog = ExportDialog;
 exports.ImportDialog = ImportDialog;
+exports.MultiCombobox = MultiCombobox;
 exports.SchemaAdapter = SchemaAdapter;
 exports.cn = cn;
 exports.coerceRowValues = coerceRowValues;