WorkRoot/Astro-Component
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixxed bugs From form and Fields

Browse Source
This commit is contained in:
Clintchiz
2025-08-16 12:37:38 +05:30
parent acc2d2c767
commit a7f4b59c36
5 changed files with 285 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+14
View File
@@ -19,6 +19,7 @@
"@iconify/json": "^2.2.373",
"@iconify/utils": "^3.0.1",
"@tailwindcss/forms": "^0.5.10",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"tailwind-merge": "^3.3.1"
},
@@ -2686,6 +2687,19 @@
"node": ">=8"
}
},
"node_modules/class-variance-authority": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
"integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"clsx": "^2.1.1"
},
"funding": {
"url": "https://polar.sh/cva"
}
},
"node_modules/cli-boxes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
package.json
+1
View File
@@ -77,6 +77,7 @@
"@iconify/json": "^2.2.373",
"@iconify/utils": "^3.0.1",
"@tailwindcss/forms": "^0.5.10",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"tailwind-merge": "^3.3.1"
}
src/components/Field.astro
+2 -10
View File
@@ -89,7 +89,7 @@ const helpCls = "mt-2 text-sm text-gray-500 dark:text-neutral-500";
const errCls = "text-sm text-red-600 mt-2";
const groupCls = "relative flex items-stretch";
const addonBase =
"px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-neutral-700 dark:border-neutral-700 dark:text-neutral-400";
"px-4 inline-flex items-center min-w-fit rounded-md border border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-neutral-700 dark:border-neutral-700 dark:text-neutral-400";
const controlWrap = "relative";
---
@@ -144,8 +144,6 @@ const controlWrap = "relative";
}),
p.prefixText && "rounded-l-none",
p.suffixText && "rounded-r-none",
p.iconLeft && "rounded-l-none",
p.iconRight && "rounded-r-none",
p.error &&
"border-danger focus-visible:ring-danger/40",
)}
@@ -217,8 +215,6 @@ const controlWrap = "relative";
"block w-full border border-gray-200 shadow-sm rounded-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 file:bg-gray-50 file:border-0 file:me-4 file:py-3 file:px-4 dark:file:bg-neutral-700 dark:file:text-neutral-400",
p.prefixText && "rounded-l-none",
p.suffixText && "rounded-r-none",
p.iconLeft && "rounded-l-none",
p.iconRight && "rounded-r-none",
p.error &&
"border-danger focus-visible:ring-danger/40",
)}
@@ -281,8 +277,6 @@ const controlWrap = "relative";
: p.size === "lg"
? "text-base p-4"
: "text-sm p-3",
p.iconLeft && "rounded-l-none",
p.iconRight && "rounded-r-none",
p.error && "border-danger focus-visible:ring-danger/40",
)}
data-initial={typeof p.value === "string" ? p.value : ""}
@@ -309,9 +303,7 @@ const controlWrap = "relative";
}
class={cn(
selectBase({ size: p.size ?? "md" }),
"appearance-none bg-[length:16px_16px] pr-9",
p.iconLeft && "rounded-l-none",
p.iconRight && "rounded-r-none",
"appearance-none bg-none pr-9",
p.error && "border-danger focus-visible:ring-danger/40",
)}
>
src/components/MultiSelect.astro
+98 -65
View File
@@ -18,12 +18,13 @@ interface Props extends HTMLAttributes<"div"> {
required?: boolean;
disabled?: boolean;
options: Option[];
value?: string[]; // initial selected values
placeholder?: string; // shown when empty
searchable?: boolean; // show search box in dropdown
clearable?: boolean; // show clear (x) button
maxSelections?: number; // optional selection cap
value?: string[];
placeholder?: string;
searchable?: boolean;
clearable?: boolean;
maxSelections?: number;
size?: "sm" | "md" | "lg";
display?: "text" | "chips";
class?: string;
}
@@ -32,8 +33,9 @@ const p = Astro.props as Props;
const fieldId = p.id ?? p.name;
const descId = p.description ? `${fieldId}-desc` : undefined;
const errId = `${fieldId}-err`;
const selected = new Set(p.value ?? []);
const summary = selected.size
const summarySSR = selected.size
? Array.from(selected)
.map((v) => p.options.find((o) => o.value === v)?.label ?? v)
.join(", ")
@@ -47,11 +49,15 @@ const sizeCls =
: "h-10 px-3 text-sm";
const controlCls =
"py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600";
"py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm " +
"focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none " +
"dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600";
const chipBase =
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs bg-muted text-foreground";
const containerId = `ms-${Math.random().toString(36).slice(2)}`;
const displayMode = p.display ?? "text";
---
<div class={cn("space-y-1.5", p.class)} data-field={p.name} id={containerId}>
@@ -67,9 +73,6 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
}
<div class="relative">
{
/** Visible control is a readonly input so validation styles apply here */
}
<input
id={fieldId}
type="text"
@@ -79,21 +82,28 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
aria-describedby={[descId, p.error ? errId : undefined]
.filter(Boolean)
.join(" ") || undefined}
class={cn(controlCls, sizeCls, "pr-10 cursor-pointer")}
class={cn(
controlCls,
sizeCls,
"pr-10 cursor-pointer",
displayMode === "chips" && "pl-3",
)}
placeholder={p.placeholder ?? "Select..."}
value={summary}
value={displayMode === "text" ? summarySSR : ""}
readonly
data-control
{...p.disabled ? { disabled: true } : {}}
/>
{/** Chevron / Clear */}
<div class="absolute inset-y-0 right-0 flex items-center gap-1 pr-2">
{
p.clearable !== false && selected.size > 0 && !p.disabled && (
p.clearable !== false && !p.disabled && (
<button
type="button"
class="p-1 rounded hover:bg-muted"
class={cn(
"p-1 rounded hover:bg-muted",
selected.size === 0 && "hidden",
)}
data-ms-clear
aria-label="Clear selection"
>
@@ -111,28 +121,15 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
</button>
</div>
{
/** Selected chips (optional; comment out if you prefer only summary text) */
}
{
selected.size > 0 && (
<div class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 flex flex-wrap gap-1 pr-14">
{Array.from(selected)
.slice(0, 3)
.map((v) => {
const lab =
p.options.find((o) => o.value === v)?.label ??
v;
return <span class={chipBase}>{lab}</span>;
})}
{selected.size > 3 && (
<span class={chipBase}>+{selected.size - 3}</span>
)}
</div>
)
}
<div
data-ms-chips
class={cn(
"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 flex flex-wrap gap-1 pr-14",
displayMode === "chips" ? "" : "hidden",
)}
>
</div>
{/** Dropdown */}
<div
class="absolute border-border bg-popover text-popover-foreground shadow-lg hidden mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700"
id={`${containerId}-panel`}
@@ -198,19 +195,25 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
<button
type="button"
class="text-sm text-primary hover:underline disabled:opacity-50"
data-ms-select-all>Select all</button
data-ms-select-all
>
Select all
</button>
<div class="flex items-center gap-2">
<button
type="button"
class="text-sm text-muted-foreground hover:underline"
data-ms-cancel>Cancel</button
data-ms-cancel
>
Cancel
</button>
<button
type="button"
class="text-sm text-primary hover:underline"
data-ms-apply>Apply</button
data-ms-apply
>
Apply
</button>
</div>
</div>
</div>
@@ -236,6 +239,7 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
fieldId,
name: p.name,
maxSelections: p.maxSelections ?? null,
displayMode,
}}
>
const root = document.getElementById(containerId);
@@ -248,39 +252,72 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
const btnCan = root.querySelector("[data-ms-cancel]");
const btnApp = root.querySelector("[data-ms-apply]");
const sch = root.querySelector("[data-ms-search]");
const chips = root.querySelector("[data-ms-chips]");
const checks = Array.from(
root.querySelectorAll(
`input[type="checkbox"][name="${CSS.escape(name)}"]`,
),
);
let open = false;
const origPlaceholder = input.getAttribute("placeholder") || "Select...";
function setExpanded(
v,
{ focusSearch = false, refocusInput = false } = {},
) {
function setExpanded(v, { focusSearch = false } = {}) {
open = v;
input.setAttribute("aria-expanded", String(open));
panel.classList.toggle("hidden", !open);
if (open && focusSearch) sch?.focus();
if (!open && refocusInput) input.focus();
}
function makeChip(label) {
const span = document.createElement("span");
span.className =
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs bg-muted text-foreground";
span.textContent = label;
return span;
}
function toggleClear(show) {
if (!btnClr) return;
btnClr.classList.toggle("hidden", !show);
}
function updateSummary() {
const selected = checks.filter((c) => c.checked);
const labels = selected
.slice(0, 3)
.map(
(c) =>
c
.closest("[data-ms-item]")
?.querySelector("span")
?.textContent?.trim() || c.value,
);
const extra = Math.max(0, selected.length - 3);
input.value = selected.length
? labels.join(", ") + (extra ? ` +${extra}` : "")
: "";
const labels = selected.map(
(c) =>
c
.closest("[data-ms-item]")
?.querySelector("span")
?.textContent?.trim() || c.value,
);
if (displayMode === "text") {
const preview = labels.slice(0, 3).join(", ");
const extra = Math.max(0, labels.length - 3);
input.value = labels.length
? preview + (extra ? ` +${extra}` : "")
: "";
input.placeholder = labels.length ? "" : origPlaceholder;
if (chips) {
chips.innerHTML = "";
chips.classList.add("hidden");
}
} else {
input.value = "";
input.placeholder = labels.length ? "" : origPlaceholder;
if (!chips) return;
chips.innerHTML = "";
const max = 3;
labels
.slice(0, max)
.forEach((lab) => chips.appendChild(makeChip(lab)));
const extra = labels.length - max;
if (extra > 0) chips.appendChild(makeChip(`+${extra}`));
chips.classList.toggle("hidden", labels.length === 0);
}
toggleClear(labels.length > 0);
}
function enforceMax() {
@@ -308,7 +345,6 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
updateSummary();
}
// Open/close
btnTgl?.addEventListener("click", () =>
setExpanded(!open, { focusSearch: !open }),
);
@@ -322,21 +358,20 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
}
});
// Actions
btnClr?.addEventListener("click", (e) => {
e.stopPropagation();
clearAll();
});
btnAll?.addEventListener("click", selectAll);
btnCan?.addEventListener("click", () => setExpanded(false)); // no refocus
btnApp?.addEventListener("click", () => setExpanded(false)); // no refocus
btnCan?.addEventListener("click", () => setExpanded(false));
btnApp?.addEventListener("click", () => setExpanded(false));
list.addEventListener("change", () => {
enforceMax();
updateSummary();
input.dispatchEvent(new Event("change", { bubbles: true }));
});
// Search filter
sch?.addEventListener("input", () => {
const q = sch.value.trim().toLowerCase();
root.querySelectorAll("[data-ms-item]").forEach((li) => {
@@ -345,12 +380,10 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
});
});
// Close on outside click without refocusing input
document.addEventListener("click", (e) => {
if (!root.contains(e.target)) setExpanded(false); // note: no refocusInput
if (!root.contains(e.target)) setExpanded(false);
});
// Init
enforceMax();
updateSummary();
</script>
src/pages/forms2.astro
+170 -94
View File
@@ -1,105 +1,155 @@
---
import Form from "../components/Form.astro";
import Field from "../components/Field.astro";
import { Form, Field, MultiSelect } from "@wrnexus/astro";
import Base from "../layouts/Base.astro";
import MultiSelect from "../components/MultiSelect.astro";
---
<Base class="p-4">
<Form
title="Create Project"
description="Project metadata, constraints, and attachments."
title="Job Application"
description="Tell us about yourself. Fields marked * are required."
columns={2}
schemaName="schema"
onSubmit="submit"
submitLabel="Create Project"
submitIcon="mdi:check"
actionsAlign="center"
submitLabel="Submit Application"
submitIcon="mdi:send"
actionsAlign="end"
resetOnSubmit
validateOn="blur,change,input"
validateOn="input,blur,change"
>
<!-- Applicant -->
<Field
name="projectName"
label="Project name"
name="firstName"
label="First name"
required
iconLeft="mdi:briefcase"
iconLeft="mdi:account"
/>
<Field
name="slug"
label="Slug"
prefixText="https://app.example.com/p/"
placeholder="acme-crm"
name="lastName"
label="Last name"
required
iconLeft="mdi:account"
/>
<Field
name="email"
label="Email"
kind="email"
required
iconLeft="mdi:email"
/>
<Field
name="phone"
label="Phone"
placeholder="+91 98765 43210"
iconLeft="mdi:phone"
/>
<Field
name="portfolio"
label="Portfolio URL"
kind="text"
placeholder="https://example.com"
iconLeft="mdi:link-variant"
class="sm:col-span-2"
/>
<!-- Role details -->
<Field
name="teamSize"
label="Team size"
kind="number"
placeholder="e.g., 8"
name="role"
label="Desired role"
kind="select"
placeholder="Select a role"
options={[
{ value: "frontend", label: "Frontend Engineer" },
{ value: "backend", label: "Backend Engineer" },
{ value: "fullstack", label: "Full-stack Engineer" },
{ value: "designer", label: "Product Designer" },
]}
required
iconLeft="mdi:account-group"
/>
<Field
name="budget"
label="Budget (USD)"
kind="number"
placeholder="Optional"
iconLeft="mdi:currency-usd"
/>
<Field name="startDate" label="Start date" kind="date" required />
<Field name="kickoffTime" label="Kickoff time" kind="time" required />
<Field
name="experience"
label="Years of experience"
kind="number"
placeholder="e.g., 3"
suffixText="yrs"
required
/>
<MultiSelect
name="tags"
label="Tags"
name="skills"
label="Key skills"
placeholder="Pick skills"
searchable
clearable
maxSelections={6}
value={["javascript"]}
options={[
{ value: "web", label: "Web" },
{ value: "mobile", label: "Mobile" },
{ value: "api", label: "API" },
{ value: "ml", label: "ML" },
{ value: "ops", label: "Ops" },
{ value: "javascript", label: "JavaScript" },
{ value: "typescript", label: "TypeScript" },
{ value: "react", label: "React" },
{ value: "node", label: "Node.js" },
{ value: "astro", label: "Astro" },
{ value: "css", label: "CSS" },
{ value: "figma", label: "Figma" },
]}
description="Use Ctrl/Cmd to pick multiple."
class="sm:col-span-2"
required
description="Choose up to 6."
/>
<Field
name="visibility"
label="Visibility"
name="availableFrom"
label="Available from"
kind="date"
required
/>
<Field name="preferredCall" label="Preferred call time" kind="time" />
<!-- Work auth -->
<Field
name="workAuth"
label="Work Authorization"
kind="radio"
value="private"
value="authorized"
class="sm:col-span-2"
options={[
{ value: "private", label: "Private" },
{ value: "internal", label: "Internal" },
{ value: "public", label: "Public" },
{ value: "authorized", label: "Authorized to work" },
{ value: "requiresVisa", label: "Requires visa sponsorship" },
]}
/>
<!-- Compensation -->
<Field
name="attachments"
label="Attachments"
name="salary"
label="Expected CTC"
kind="number"
prefixText="₹"
suffixText="LPA"
placeholder="e.g., 12"
class="sm:col-span-2"
/>
<!-- Resume/Cover -->
<Field
name="resume"
label="Resume (PDF)"
kind="file"
multiple
class="sm:col-span-2"
/>
<Field
name="description"
label="Description"
name="coverLetter"
label="Cover letter"
kind="textarea"
rows={5}
placeholder="What are we building?"
rows={6}
placeholder="A short note about why you’d be a great fit…"
class="sm:col-span-2"
required
/>
<Field
name="notify"
label="Notify team on create"
kind="switch"
name="agree"
label="I confirm the information provided is accurate"
kind="checkbox"
class="sm:col-span-2"
/>
</Form>
@@ -108,46 +158,72 @@ import MultiSelect from "../components/MultiSelect.astro";
<script>
import { z } from "zod";
const fileArray = z.array(z.instanceof(File)).optional();
const phoneRegex = /^\+?[0-9\s().-]{7,20}$/i;
const urlRegex = /^https?:\/\/.+/i;
window.schema = z.object({
projectName: z.string().min(3, "Enter at least 3 characters."),
slug: z
.string()
.regex(
/^[a-z0-9-]{3,}$/i,
"Slug must be 3+ chars; letters, digits, hyphen.",
),
teamSize: z.coerce.number().int().min(1, "Team size must be ≥ 1."),
budget: z.coerce
.number()
.positive("Budget must be positive.")
.optional()
.or(z.nan().transform(() => undefined)),
startDate: z.string().min(1, "Start date is required."),
kickoffTime: z.string().min(1, "Kickoff time is required."),
tags: z.array(z.string()).min(1, "Pick at least one tag."),
visibility: z.enum(["private", "internal", "public"], {
required_error: "Choose a visibility.",
}),
// attachments -> array<File> (from our collector when multiple)
attachments: fileArray
.refine((arr) => !arr || arr.length <= 3, "Max 3 files.")
.refine(
(arr) => !arr || arr.every((f) => f.size <= 5 * 1024 * 1024),
"Files must be ≤ 5MB.",
)
.refine(
(arr) =>
!arr || arr.every((f) => /pdf|png|jpg|jpeg/i.test(f.type)),
"Only PDF/PNG/JPG.",
),
description: z.string().min(20, "Describe the project (20+ chars)."),
notify: z.boolean().optional(),
});
const resumeSchema = z
.union([z.instanceof(File), z.null()])
.refine(
(f) => f === null || /pdf$/i.test(f.type),
"Resume must be a PDF.",
)
.refine(
(f) => f === null || f.size <= 5 * 1024 * 1024,
"Max file size is 5MB.",
)
.optional();
window.schema = z
.object({
firstName: z.string().min(2, "Enter at least 2 characters."),
lastName: z.string().min(2, "Enter at least 2 characters."),
email: z.string().email("Enter a valid email."),
phone: z
.string()
.regex(phoneRegex, "Enter a valid phone.")
.optional()
.or(z.literal("")),
portfolio: z
.string()
.regex(urlRegex, "Enter a valid URL (http/https).")
.optional()
.or(z.literal("")),
role: z.enum(["frontend", "backend", "fullstack", "designer"], {
required_error: "Select a role.",
}),
experience: z.coerce.number().int().min(0, "Must be 0 or more."),
skills: z
.array(z.string())
.min(1, "Pick at least one skill.")
.max(6, "Up to 6 skills."),
availableFrom: z.string().min(1, "Pick a date."),
preferredCall: z.string().optional().or(z.literal("")),
workAuth: z.enum(["authorized", "requiresVisa"]),
salary: z.coerce
.number()
.positive("Enter a positive number.")
.optional(),
resume: resumeSchema,
coverLetter: z
.string()
.max(1000, "Keep it under 1000 characters.")
.optional()
.or(z.literal("")),
agree: z.literal(true, {
errorMap: () => ({ message: "You must confirm to proceed." }),
}),
})
.superRefine((obj, ctx) => {
if (obj.workAuth === "requiresVisa" && !obj.coverLetter) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
path: ["coverLetter"],
message: "Please add a note about your visa status.",
});
}
});
window.submit = async (data: any, form: any) => {
console.log("Project Create submit:", data);
await new Promise((r) => setTimeout(r, 800));
console.log("Application:", data);
};
</script>