429 lines
14 KiB
Plaintext
429 lines
14 KiB
Plaintext
---
|
|
import type { HTMLAttributes } from "astro/types";
|
|
import { cn } from "../utils/cn";
|
|
import Button from "./Button.astro";
|
|
|
|
interface Props extends HTMLAttributes<"form"> {
|
|
title?: string;
|
|
description?: string;
|
|
columns?: 1 | 2;
|
|
schemaName?: string;
|
|
onSubmit?: string;
|
|
submitLabel?: string;
|
|
submitIcon?: string;
|
|
actionsAlign?: "start" | "center" | "end";
|
|
resetOnSubmit?: boolean;
|
|
validateOn?: string;
|
|
showSuccesInput?: boolean;
|
|
}
|
|
|
|
const {
|
|
title,
|
|
description,
|
|
columns = 1,
|
|
class: className,
|
|
schemaName,
|
|
onSubmit,
|
|
submitLabel = "Submit",
|
|
submitIcon = "",
|
|
actionsAlign = "end",
|
|
resetOnSubmit = false,
|
|
validateOn = "input,blur,change",
|
|
showSuccesInput = false,
|
|
...rest
|
|
}: Props = Astro.props;
|
|
|
|
const gridCls =
|
|
columns === 2 ? "grid grid-cols-1 sm:grid-cols-2 gap-4" : "space-y-4";
|
|
const actionsJustify =
|
|
actionsAlign === "start"
|
|
? "justify-start"
|
|
: actionsAlign === "center"
|
|
? "justify-center"
|
|
: "justify-end";
|
|
|
|
const formId = `f-${Math.random().toString(36).slice(2)}`;
|
|
---
|
|
|
|
<form
|
|
id={formId}
|
|
class={cn("space-y-4", className)}
|
|
{...rest}
|
|
data-schema={schemaName ?? ""}
|
|
data-onsubmit={onSubmit ?? ""}
|
|
data-reset={resetOnSubmit ? "1" : ""}
|
|
data-validateon={validateOn}
|
|
novalidate
|
|
>
|
|
<div>
|
|
{
|
|
title && (
|
|
<h2 class="text-lg font-semibold text-foreground">{title}</h2>
|
|
)
|
|
}
|
|
{
|
|
description && (
|
|
<p class="text-sm text-muted-foreground mt-1 text-gray-600 dark:text-neutral-400">
|
|
{description}
|
|
</p>
|
|
)
|
|
}
|
|
</div>
|
|
|
|
<div class={gridCls}>
|
|
<slot />
|
|
</div>
|
|
|
|
<div class={cn("flex gap-3", actionsJustify)}>
|
|
<Button type="submit" variant="solid" color="primary" icon={submitIcon}>
|
|
{submitLabel}
|
|
</Button>
|
|
<slot name="actions" />
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Client validation & submit hook (no zod import here) -->
|
|
<script type="module" is:inline define:vars={{ formId, showSuccesInput }}>
|
|
const start = () => {
|
|
const INVALID_KLS = ["!border-danger", "focus-visible:ring-danger/40"];
|
|
const VALID_KLS = ["!border-success", "focus-visible:ring-success/40"];
|
|
|
|
const form = document.getElementById(formId);
|
|
if (!form) throw new Error("Form element not found");
|
|
|
|
function getSchema() {
|
|
const name = form.dataset.schema;
|
|
if (!name) return null;
|
|
const val = window[name];
|
|
if (!val) {
|
|
console.warn("Schema not found:", name);
|
|
return null;
|
|
}
|
|
return typeof val === "function" ? val() : val;
|
|
}
|
|
|
|
// Prefer explicit [data-control]; fall back to any input/select/textarea
|
|
function fieldControls(root) {
|
|
// Prefer explicit data-control, fallback to any control
|
|
let ctrls = root.querySelectorAll(
|
|
"input[data-control], select[data-control], textarea[data-control]",
|
|
);
|
|
if (ctrls.length === 0)
|
|
ctrls = root.querySelectorAll("input,select,textarea");
|
|
|
|
const all = Array.from(ctrls);
|
|
const radios = all.filter(
|
|
(el) => el instanceof HTMLInputElement && el.type === "radio",
|
|
);
|
|
const checks = all.filter(
|
|
(el) =>
|
|
el instanceof HTMLInputElement && el.type === "checkbox",
|
|
);
|
|
|
|
const err = root.querySelector('[id$="-err"]');
|
|
const isRadioGroup = radios.length > 1;
|
|
const isMultiCheckbox = checks.length > 1;
|
|
|
|
return {
|
|
ctrls: all, // includes the readonly summary input if present
|
|
err,
|
|
isRadioGroup,
|
|
isMultiCheckbox,
|
|
checkboxes: checks, // handy for multi-select
|
|
};
|
|
}
|
|
|
|
function setError(root, msg) {
|
|
const { ctrls, err } = fieldControls(root);
|
|
if (!ctrls.length) return;
|
|
const first = ctrls[0];
|
|
|
|
if (msg) {
|
|
if (showSuccesInput) first.classList.remove(...VALID_KLS);
|
|
first.classList.add(...INVALID_KLS);
|
|
first.setAttribute("aria-invalid", "true");
|
|
if (err) {
|
|
err.textContent = msg;
|
|
err.hidden = false;
|
|
}
|
|
} else {
|
|
first.classList.remove(...INVALID_KLS);
|
|
if (showSuccesInput) first.classList.add(...VALID_KLS);
|
|
first.setAttribute("aria-invalid", "false");
|
|
if (err) {
|
|
err.textContent = "";
|
|
err.hidden = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
function clearState(root) {
|
|
const { ctrls, err } = fieldControls(root);
|
|
ctrls.forEach((c) =>
|
|
c.classList.remove(...INVALID_KLS, ...VALID_KLS),
|
|
);
|
|
ctrls[0]?.removeAttribute("aria-invalid");
|
|
if (err) {
|
|
err.textContent = "";
|
|
err.hidden = true;
|
|
}
|
|
}
|
|
|
|
// Robust data collector (radios, checkboxes, multi-select, files)
|
|
function collectData(formEl) {
|
|
const names = new Set(
|
|
Array.from(
|
|
formEl.querySelectorAll(
|
|
"input[name], select[name], textarea[name]",
|
|
),
|
|
)
|
|
.map((el) => el.getAttribute("name"))
|
|
.filter(Boolean),
|
|
);
|
|
const data = {};
|
|
|
|
for (const name of names) {
|
|
const els = Array.from(
|
|
formEl.querySelectorAll(`[name="${CSS.escape(name)}"]`),
|
|
);
|
|
const radios = els.filter(
|
|
(el) =>
|
|
el instanceof HTMLInputElement && el.type === "radio",
|
|
);
|
|
const checks = els.filter(
|
|
(el) =>
|
|
el instanceof HTMLInputElement &&
|
|
el.type === "checkbox",
|
|
);
|
|
|
|
if (radios.length) {
|
|
const chosen = radios.find((el) => el.checked);
|
|
data[name] = chosen ? chosen.value : "";
|
|
continue;
|
|
}
|
|
|
|
if (checks.length) {
|
|
if (checks.length > 1) {
|
|
data[name] = checks
|
|
.filter((el) => el.checked)
|
|
.map((el) => el.value || "on");
|
|
} else {
|
|
data[name] = checks[0].checked;
|
|
}
|
|
continue;
|
|
}
|
|
|
|
const el = els[0];
|
|
|
|
if (el instanceof HTMLSelectElement && el.multiple) {
|
|
data[name] = Array.from(el.selectedOptions).map(
|
|
(o) => o.value,
|
|
);
|
|
} else if (
|
|
el instanceof HTMLInputElement &&
|
|
el.type === "file"
|
|
) {
|
|
data[name] = el.multiple
|
|
? Array.from(el.files || [])
|
|
: (el.files?.[0] ?? null);
|
|
} else {
|
|
const fd = new FormData(formEl);
|
|
data[name] = fd.get(name);
|
|
}
|
|
}
|
|
return data;
|
|
}
|
|
|
|
function showErrors(formEl, zodError) {
|
|
formEl.querySelectorAll("[data-field]").forEach(clearState);
|
|
let firstRoot = null;
|
|
for (const issue of zodError.issues ?? []) {
|
|
const key =
|
|
Array.isArray(issue.path) && issue.path.length
|
|
? String(issue.path[0])
|
|
: null;
|
|
if (!key) continue;
|
|
const root = formEl.querySelector(
|
|
`[data-field="${CSS.escape(key)}"]`,
|
|
);
|
|
if (!root) continue;
|
|
setError(root, issue.message);
|
|
if (!firstRoot) firstRoot = root;
|
|
}
|
|
if (firstRoot) {
|
|
const { ctrls } = fieldControls(firstRoot);
|
|
ctrls[0]?.focus();
|
|
}
|
|
}
|
|
|
|
function validateField(name) {
|
|
console.log(name);
|
|
|
|
const schema = getSchema();
|
|
|
|
console.log(schema);
|
|
console.log(schema.shape[name]);
|
|
|
|
if (!schema || !schema.shape || !schema.shape[name]) return;
|
|
|
|
const root = form.querySelector(
|
|
`[data-field="${CSS.escape(name)}"]`,
|
|
);
|
|
console.log(root);
|
|
if (!root) return;
|
|
|
|
const { ctrls, isRadioGroup, isMultiCheckbox, checkboxes } =
|
|
fieldControls(root);
|
|
if (!ctrls.length) return;
|
|
|
|
let value;
|
|
|
|
if (isRadioGroup) {
|
|
// one-of
|
|
const chosen = ctrls.find(
|
|
(el) =>
|
|
el instanceof HTMLInputElement &&
|
|
el.type === "radio" &&
|
|
el.checked,
|
|
);
|
|
value = chosen ? chosen.value : "";
|
|
} else if (isMultiCheckbox) {
|
|
// array<string> for MultiSelect / checkbox groups
|
|
value = checkboxes
|
|
.filter((c) => c.checked)
|
|
.map((c) => c.value || "on");
|
|
} else {
|
|
// single control
|
|
const ctrl = ctrls[0];
|
|
if (
|
|
ctrl instanceof HTMLInputElement &&
|
|
ctrl.type === "checkbox"
|
|
) {
|
|
value = ctrl.checked;
|
|
} else if (
|
|
ctrl instanceof HTMLInputElement &&
|
|
ctrl.type === "file"
|
|
) {
|
|
value = ctrl.multiple
|
|
? Array.from(ctrl.files || [])
|
|
: (ctrl.files?.[0] ?? null);
|
|
} else if (ctrl instanceof HTMLSelectElement && ctrl.multiple) {
|
|
value = Array.from(ctrl.selectedOptions).map(
|
|
(o) => o.value,
|
|
);
|
|
} else {
|
|
value = ctrl.value;
|
|
}
|
|
}
|
|
|
|
console.log(value);
|
|
const res = schema.shape[name].safeParse(value);
|
|
console.log(res);
|
|
setError(
|
|
root,
|
|
res.success
|
|
? ""
|
|
: res.error.issues[0]?.message || "Invalid value",
|
|
);
|
|
}
|
|
|
|
const validateOn = (form.dataset.validateon || "input,blur,change")
|
|
.split(",")
|
|
.map((s) => s.trim())
|
|
.filter(Boolean);
|
|
|
|
if (validateOn.includes("input")) {
|
|
form.addEventListener("input", (e) => {
|
|
const root = e.target?.closest?.("[data-field]");
|
|
if (!root) return;
|
|
const name = root.getAttribute("data-field");
|
|
if (name) validateField(name);
|
|
});
|
|
}
|
|
if (validateOn.includes("blur")) {
|
|
form.addEventListener(
|
|
"blur",
|
|
(e) => {
|
|
const root = e.target?.closest?.("[data-field]");
|
|
if (!root) return;
|
|
const name = root.getAttribute("data-field");
|
|
if (name) validateField(name);
|
|
},
|
|
true,
|
|
);
|
|
}
|
|
if (validateOn.includes("change")) {
|
|
form.addEventListener("change", (e) => {
|
|
const root = e.target?.closest?.("[data-field]");
|
|
if (!root) return;
|
|
const name = root.getAttribute("data-field");
|
|
if (name) validateField(name);
|
|
});
|
|
}
|
|
|
|
form.addEventListener("submit", async (e) => {
|
|
const schema = getSchema();
|
|
const onSubmitName = form.dataset.onsubmit;
|
|
|
|
if (!schema && !onSubmitName) return; // native submit
|
|
|
|
e.preventDefault();
|
|
|
|
if (schema) {
|
|
const data = collectData(form);
|
|
const result = schema.safeParse(data);
|
|
if (!result.success) {
|
|
showErrors(form, result.error);
|
|
return;
|
|
}
|
|
form.querySelectorAll("[data-field]").forEach(clearState);
|
|
|
|
if (!onSubmitName) {
|
|
form.submit(); // native submit after validation
|
|
return;
|
|
}
|
|
|
|
const btn = form.querySelector('button[type="submit"]');
|
|
btn && (btn.disabled = true);
|
|
try {
|
|
const fn = window[onSubmitName];
|
|
const res =
|
|
typeof fn === "function"
|
|
? await fn(result.data, form)
|
|
: null;
|
|
if (res !== false && form.dataset.reset) form.reset();
|
|
} catch (err) {
|
|
console.error("onSubmit error:", err);
|
|
} finally {
|
|
btn && (btn.disabled = false);
|
|
}
|
|
} else if (onSubmitName) {
|
|
const btn = form.querySelector('button[type="submit"]');
|
|
btn && (btn.disabled = true);
|
|
try {
|
|
const data = collectData(form);
|
|
const fn = window[onSubmitName];
|
|
const res =
|
|
typeof fn === "function" ? await fn(data, form) : null;
|
|
if (res !== false && form.dataset.reset) form.reset();
|
|
} finally {
|
|
btn && (btn.disabled = false);
|
|
}
|
|
}
|
|
});
|
|
|
|
form.querySelectorAll("textarea[data-initial]").forEach((t) => {
|
|
t.value = t.getAttribute("data-initial") || "";
|
|
t.removeAttribute("data-initial");
|
|
});
|
|
};
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", start, { once: true });
|
|
} else {
|
|
start();
|
|
}
|
|
// For Astro client routing / view transitions
|
|
document.addEventListener("astro:page-load", start);
|
|
</script>
|