// ========================================================================== // Components / Inputs 家族 — thumbnails + detail pages // ========================================================================== const { Demo: __Demo_ip, DocCard: __DocCard_ip, Spinner: __Spinner_ip } = window; const Demo = __Demo_ip, DocCard = __DocCard_ip, Spinner = __Spinner_ip; // ---------- 小型輔助 ---------- const Bar = ({ w = 60, h = 6, c = "var(--blue-500)", op = 1, r = 3 }) =>
; // ---------- Thumbnails (家族 overview 用) ---------- const T_Autocomplete = () => (
Design system
); const T_Button = () => (
); const T_ButtonGroup = () => (
{["Day", "Week", "Month"].map((t, i) =>
{t}
)}
); const T_Checkbox = () => (
); const T_FAB = () => (
); const T_NumberField = () => (
6
−
+
); const T_RadioGroup = () => (
{[true, false, false].map((s, i) =>
{s && }
)}
); const T_Select = () => (
Item
); const T_Rating = () => (
{[1, 1, 0, 0, 0].map((s, i) => )}
); const T_Slider = () => (
); const T_Switch = () => (
); const T_TextField = () => (
Design System
); const T_Transfer = () => (
{[0, 1].map(c =>
)}
); const T_Toggle = () => (
{[0, 1, 2].map(i =>
)}
); const T_Upload = () => (
Upload
); const T_Cascader = () => (
{[0, 1, 2].map(c =>
)}
); const T_ColorPicker = () => (
); const T_DatePicker = () => (
‹04月›
{Array.from({ length: 14 }).map((_, i) =>
)}
); const T_Camera = () => (
); // ========================================================================== // Detail Cards // ========================================================================== // 共用：欄位 label const FieldLabel = ({ children }) => ( ); const DocInputs = () => ( <> {/* ---------- Autocomplete ---------- */}
Design System
{/* ---------- Button ---------- */} {React.createElement(window.ButtonSpec || (() => null))} {/* ---------- Button Group ---------- */} {/* ---------- Checkbox ---------- */}
{/* ---------- FAB ---------- */} {/* ---------- Number Field ---------- */} {/* ---------- Radio Group ---------- */} {/* ---------- Select ---------- */} { setV(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} onBlur={() => setTimeout(() => setOpen(false), 150)} placeholder="輸入關鍵字…" style={{ ...tfStyle(), borderColor: "var(--blue-500)" }} /> {open && filtered.length > 0 && (
{filtered.map(o => (
{ setV(o); setOpen(false); }}>{o}
))}
)}
); }; const ButtonLoadingDemo = () => { const [loading, setLoading] = React.useState(false); return ( { setLoading(true); setTimeout(() => setLoading(false), 1600); }} disabled={loading}> {loading ? <> 處理中… : "點我載入"} ); }; const SegmentedDemo = ({ options, defaultIndex = 0 }) => { const [idx, setIdx] = React.useState(defaultIndex); return (
{options.map((o, i) => (
setIdx(i)} style={{ padding: "8px 16px", fontSize: 13, fontWeight: 500, cursor: "pointer", background: i === idx ? "var(--blue-500)" : "#fff", color: i === idx ? "#fff" : "var(--blue-500)", borderRight: i < options.length - 1 ? "1px solid var(--blue-500)" : "none", display: "inline-flex", alignItems: "center", gap: 6, transition: "all var(--dur-fast) var(--ease)", }}> {typeof o === "object" && o.icon ? : null} {typeof o === "string" ? o : o.label}
))}
); }; const FabBtn = ({ icon, variant = "filled" }) => { const bg = variant === "toner" ? "var(--blue-50)" : "var(--blue-500)"; const color = variant === "toner" ? "var(--blue-600)" : "#fff"; const shadow = variant === "toner" ? "0 4px 12px rgba(0,0,0,.08)" : "0 8px 20px rgba(36,146,255,.4)"; return ( ); }; const NumberFieldDemo = ({ defaultValue = 1, min = 0, max = 999 }) => { const [v, setV] = React.useState(defaultValue); const btn = { width: 32, height: 32, border: "none", background: "transparent", color: "var(--blue-500)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }; return (
setV(Math.max(min, Math.min(max, +e.target.value || 0)))} style={{ width: 56, border: "none", borderLeft: "1px solid var(--n-200)", borderRight: "1px solid var(--n-200)", textAlign: "center", fontSize: 14, outline: "none" }} />
); }; const RadioCardDemo = () => { const [idx, setIdx] = React.useState(1); const opts = [ { t: "標準版", p: "$10/月", d: "適合個人使用" }, { t: "進階版", p: "$25/月", d: "適合小型團隊" }, { t: "企業版", p: "$80/月", d: "客製化與專屬支援" }, ]; return (
{opts.map((o, i) => (
setIdx(i)} style={{ padding: 16, background: "#fff", cursor: "pointer", border: `1.5px solid ${i === idx ? "var(--blue-500)" : "var(--n-200)"}`, borderRadius: 8, position: "relative", boxShadow: i === idx ? "0 0 0 3px rgba(36,146,255,.15)" : "none", transition: "all var(--dur-fast) var(--ease)", }}> {i === idx && }
{o.t}
{o.p}
{o.d}
))}
); }; const SwitchRow = ({ title, desc, defaultOn }) => (
{title}
{desc}
); const TransferDemo = () => { const all = ["Alice 林", "Bob 陳", "Cathy 王", "David 李", "Eve 張", "Frank 黃"]; const [right, setRight] = React.useState(["Bob 陳", "David 李"]); const left = all.filter(a => !right.includes(a)); const [selL, setSelL] = React.useState(new Set()); const [selR, setSelR] = React.useState(new Set()); const Col = ({ title, items, sel, setSel }) => (
{title} ({items.length})
{items.map(it => (
{ const n = new Set(sel); n.has(it) ? n.delete(it) : n.add(it); setSel(n); }} style={{ padding: "6px 10px", cursor: "pointer", borderRadius: 4, display: "flex", alignItems: "center", gap: 6, background: sel.has(it) ? "var(--blue-50)" : "transparent", fontSize: 13 }}> {sel.has(it) && } {it}
))}
); const moveR = () => { setRight([...right, ...left.filter(l => selL.has(l))]); setSelL(new Set()); }; const moveL = () => { setRight(right.filter(r => !selR.has(r))); setSelR(new Set()); }; return (
); }; const ToggleMultiDemo = () => { const [sel, setSel] = React.useState(new Set(["B"])); const tools = [{ k: "B", t: B }, { k: "I", t: I }, { k: "U", t: U }, { k: "S", t: S }]; return (
{tools.map((tool, i) => (
{ const n = new Set(sel); n.has(tool.k) ? n.delete(tool.k) : n.add(tool.k); setSel(n); }} style={{ padding: "6px 14px", cursor: "pointer", background: sel.has(tool.k) ? "var(--blue-500)" : "#fff", color: sel.has(tool.k) ? "#fff" : "var(--blue-500)", borderRight: i < tools.length - 1 ? "1px solid var(--blue-500)" : "none", fontSize: 14 }}>{tool.t}
))}
); }; const UploadDropDemo = () => { const [hover, setHover] = React.useState(false); return (
setHover(true)} onDragLeave={() => setHover(false)} onDragOver={(e) => e.preventDefault()} onDrop={(e) => { e.preventDefault(); setHover(false); }} style={{ width: "100%", maxWidth: 480, border: `2px dashed ${hover ? "var(--blue-500)" : "var(--n-300)"}`, background: hover ? "var(--blue-50)" : "var(--n-50)", borderRadius: 8, padding: 28, textAlign: "center", cursor: "pointer", transition: "all var(--dur-fast) var(--ease)", }}>
拖曳檔案到這裡 或 點擊選擇檔案
支援 PNG / JPG / PDF / DOCX，單檔最大 10MB
); }; const CascaderDemo = () => { const data = { "北部": { "台北市": ["大安區", "信義區", "中正區"], "新北市": ["板橋區", "三重區", "中和區"] }, "中部": { "台中市": ["北區", "西區", "南區"], "彰化縣": ["彰化市", "員林市"] }, "南部": { "高雄市": ["前金區", "三民區", "鼓山區"], "台南市": ["中西區", "東區"] }, }; const [a, setA] = React.useState("北部"); const [b, setB] = React.useState("台北市"); const [c, setC] = React.useState(null); const ColList = ({ items, sel, onClick }) => (
{items.map(x => (
onClick(x)} style={{ padding: "6px 10px", cursor: "pointer", fontSize: 13, borderRadius: 4, background: x === sel ? "var(--blue-50)" : "transparent", color: x === sel ? "var(--blue-600)" : "var(--n-800)", fontWeight: x === sel ? 500 : 400 }}>{x}
))}
); return (
{ setA(x); setB(null); setC(null); }} /> {a && { setB(x); setC(null); }} />} {a && b && }
); }; const ColorPickerDemo = () => { const [hex, setHex] = React.useState("#2492ff"); const presets = ["#2492ff", "#1fa101", "#faad14", "#e43131", "#a855f7", "#e8178a", "#262626", "#fff"]; return (
{hex.toUpperCase()}
{presets.map(c => (
setHex(c)} style={{ width: 22, height: 22, borderRadius: 4, background: c, border: c === hex ? "2px solid var(--n-900)" : "1px solid var(--n-200)", cursor: "pointer" }} /> ))}
); }; const ColorSwatchesDemo = () => { const groups = [ { name: "Blue", colors: ["#f0f7ff", "#bae0ff", "#69b1ff", "#2492ff", "#1d75cc", "#165699"] }, { name: "Green", colors: ["#f0faf5", "#bbf7d0", "#4ade80", "#1fa101", "#16823a", "#0f5e2a"] }, { name: "Red", colors: ["#fff1f0", "#ffc4c2", "#ff5f5b", "#e43131", "#b81f1f", "#871414"] }, ]; return (
{groups.map(g => (
{g.name} {g.colors.map(c =>
)}
))}
); }; const DatePickerInline = () => { const [open, setOpen] = React.useState(true); const [d, setD] = React.useState(15); return (
setOpen(!open)} /> {open && (
2026 年 4 月
{["日", "一", "二", "三", "四", "五", "六"].map(d =>
{d}
)}
{Array.from({ length: 30 }, (_, i) => i + 1).map(n => (
setD(n)} style={{ height: 30, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, borderRadius: 4, cursor: "pointer", background: n === d ? "var(--blue-500)" : "transparent", color: n === d ? "#fff" : "var(--n-800)", fontWeight: n === d ? 600 : 400 }}>{n}
))}
)}
); }; const DateInput = ({ value, onClick }) => (
{value}
); const TimeInput = ({ value }) => (
{value}
); // 對外暴露 Object.assign(window, { Bar, T_Autocomplete, T_Button, T_ButtonGroup, T_Checkbox, T_FAB, T_NumberField, T_RadioGroup, T_Select, T_Rating, T_Slider, T_Switch, T_TextField, T_Transfer, T_Toggle, T_Upload, T_Cascader, T_ColorPicker, T_DatePicker, T_Camera, DocInputs, Demo, DocCard, CompGrid, FieldLabel, tfStyle, });