feat: 新增採購單發票欄位、更新 SearchableSelect 樣式與搜尋門檻至 10 個項目

2026-01-09 10:18:52 +08:00
parent d60367ac57
commit 24ae6f3eee
13 changed files with 451 additions and 268 deletions
--- a/resources/js/Components/ui/searchable-select.tsx
+++ b/resources/js/Components/ui/searchable-select.tsx
@@ -0,0 +1,139 @@
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@/Components/ui/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/Components/ui/popover";
+
+interface Option {
+    label: string;
+    value: string;
+    sublabel?: string;
+    disabled?: boolean;
+}
+
+interface SearchableSelectProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    options: Option[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    className?: string;
+    /** 當選項數量超過此閾值時顯示搜尋框，預設為 10。若設為 0 則總是顯示。 */
+    searchThreshold?: number;
+    /** 強制控制是否顯示搜尋框。若設定此值，則忽略 searchThreshold */
+    showSearch?: boolean;
+}
+
+export function SearchableSelect({
+    value,
+    onValueChange,
+    options,
+    placeholder = "請選擇...",
+    searchPlaceholder = "搜尋...",
+    emptyText = "找不到符合的項目",
+    disabled = false,
+    className,
+    searchThreshold = 10,
+    showSearch,
+}: SearchableSelectProps) {
+    const [open, setOpen] = React.useState(false);
+
+    // 決定是否顯示搜尋框
+    const shouldShowSearch =
+        showSearch !== undefined ? showSearch : options.length > searchThreshold;
+
+    const selectedOption = options.find((option) => option.value === value);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <button
+                    type="button"
+                    role="combobox"
+                    aria-expanded={open}
+                    disabled={disabled}
+                    className={cn(
+                        // Base styles matching SelectTrigger
+                        "flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none",
+                        // Outlined default state - 2px border with grey-3
+                        "border-2 border-grey-3 bg-grey-5",
+                        // Text colors
+                        "text-grey-0",
+                        !selectedOption && "text-grey-3",
+                        // Focus state - primary border with ring
+                        "focus-visible:border-primary-main focus-visible:ring-primary-main/20 focus-visible:ring-[3px]",
+                        // Disabled state
+                        "disabled:border-grey-4 disabled:bg-background-light-grey disabled:text-grey-2 disabled:cursor-not-allowed disabled:opacity-50",
+                        // Height
+                        "h-9",
+                        className
+                    )}
+                >
+                    <span className="truncate">
+                        {selectedOption ? selectedOption.label : placeholder}
+                    </span>
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 text-grey-2" />
+                </button>
+            </PopoverTrigger>
+            <PopoverContent
+                className="p-0 z-[9999]"
+                align="start"
+                style={{ width: "var(--radix-popover-trigger-width)" }}
+            >
+                <Command>
+                    {shouldShowSearch && (
+                        <CommandInput placeholder={searchPlaceholder} />
+                    )}
+                    <CommandList>
+                        <CommandEmpty>{emptyText}</CommandEmpty>
+                        <CommandGroup>
+                            {options.map((option) => (
+                                <CommandItem
+                                    key={option.value}
+                                    value={option.label}
+                                    onSelect={() => {
+                                        onValueChange(option.value);
+                                        setOpen(false);
+                                    }}
+                                    disabled={option.disabled}
+                                    className="cursor-pointer"
+                                >
+                                    <Check
+                                        className={cn(
+                                            "mr-2 h-4 w-4 text-primary",
+                                            value === option.value
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                    <div className="flex items-center justify-between flex-1">
+                                        <span>{option.label}</span>
+                                        {option.sublabel && (
+                                            <span className="text-xs text-muted-foreground ml-2">
+                                                {option.sublabel}
+                                            </span>
+                                        )}
+                                    </div>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}