@nanobpm/urban 0.46.0 → 0.47.0

package/dist/runtime/core/modules/pages.js

@@ -482,6 +482,10 @@ body { margin:0; font:15px/1.5 system-ui,sans-serif; padding:2rem; max-width:64r
 .pc-msg { font-size:.85rem; margin-top:.5rem; min-height:1.2em; }
 .pc-msg.err { color:var(--nano-danger); }
 .pc-msg.ok { color:var(--nano-ok); }
+.pc-req { color:var(--nano-danger); font-weight:600; }
+.pc-field-err { font-size:.75rem; color:var(--nano-danger); margin:.1rem 0 0; }
+.pc-field-err:empty { display:none; }
+.pc-field input.pc-invalid, .pc-field-check input.pc-invalid { border-color:var(--nano-danger); outline-color:var(--nano-danger); }
 table.pc-grid { width:100%; border-collapse:collapse; font-size:.9rem; table-layout:fixed; }
 /* table-layout:fixed divides the available width across columns and wraps text
    within each, so a grid with several long free-text columns (e.g. the epic
@@ -1031,9 +1035,38 @@ function renderActionForm(node) {
   // pollute Object.prototype or shadow inherited props (prototype-pollution class).
   const inputs = new Map();
   const fieldTypes = new Map();
+  // Client-side required-field validation state: the set of required keys, each
+  // field's custom message, and its inline error node (populated on a blocked
+  // submit, cleared as soon as the user edits the field).
+  const required = new Set();
+  const reqMsg = new Map();
+  const errs = new Map();
+  // A required field's label carries a danger-toned "*" so the requirement is
+  // visible BEFORE submit; spread into el(...) — an empty array adds no child.
+  const reqMark = (f) => (f.required === true ? [el("span", { class: "pc-req", title: "Required" }, " *")] : []);
+  // Register a field's inline error node and, when required, mark the input
+  // (aria-required) and wire a clear-on-edit handler so a hint disappears the
+  // moment the user starts fixing it. Editing a required field also clears the
+  // blocked-submit summary ("Please fill in the required fields.") so it never
+  // lingers as a stale/misleading banner while the user is correcting input.
+  const wireField = (f, input, ferr, evt) => {
+    errs.set(f.key, ferr);
+    if (f.required !== true) return;
+    required.add(f.key);
+    if (typeof f.requiredMessage === "string" && f.requiredMessage !== "") reqMsg.set(f.key, f.requiredMessage);
+    input.setAttribute("aria-required", "true");
+    input.addEventListener(evt, () => {
+      input.classList.remove("pc-invalid");
+      input.removeAttribute("aria-invalid");
+      ferr.textContent = "";
+      msg.textContent = "";
+      msg.className = "pc-msg";
+    });
+  };
   for (const f of p.fields || []) {
     const kind = f.type === "checkbox" ? "checkbox" : (f.type === "number" ? "number" : "text");
     fieldTypes.set(f.key, kind);
+    const ferr = el("p", { class: "pc-field-err" });
     if (kind === "checkbox") {
       // A boolean field renders a real checkbox; its default checked state comes
       // from default/checked on the field (unset -> unchecked). We record that on
@@ -1044,9 +1077,10 @@ function renderActionForm(node) {
       input.defaultChecked = checked;
       input.checked = checked;
       inputs.set(f.key, input);
+      wireField(f, input, ferr, "change");
       // Input-first, wrapped in the label so the whole row is a click target.
       card.append(
-        el("div", { class: "pc-field pc-field-check" }, el("label", {}, input, " " + (f.label || f.key))),
+        el("div", { class: "pc-field pc-field-check" }, el("label", {}, input, " " + (f.label || f.key), ...reqMark(f)), ferr),
       );
       continue;
     }
@@ -1059,11 +1093,43 @@ function renderActionForm(node) {
     }
     const input = el("input", attrs);
     inputs.set(f.key, input);
-    card.append(el("div", { class: "pc-field" }, el("label", {}, f.label || f.key), input));
+    wireField(f, input, ferr, "input");
+    card.append(el("div", { class: "pc-field" }, el("label", {}, f.label || f.key, ...reqMark(f)), input, ferr));
   }
   const msg = el("p", { class: "pc-msg" });
   const btn = el("button", { class: "pc-btn" }, p.submitLabel || "Submit");
   btn.addEventListener("click", async () => {
+    // Required-field gate: block the submit and surface an inline hint on each
+    // empty required field (a text/number left blank, a required checkbox left
+    // unchecked), focusing the first offender — so a missing value never
+    // round-trips to the server only to bounce back as a generic error.
+    let firstInvalid = null;
+    for (const [k, input] of inputs) {
+      const ferr = errs.get(k);
+      if (ferr) ferr.textContent = "";
+      input.classList.remove("pc-invalid");
+      input.removeAttribute("aria-invalid");
+      if (!required.has(k)) continue;
+      const type = fieldTypes.get(k);
+      const val = String(input.value).trim();
+      const missing = type === "checkbox"
+        ? input.checked !== true
+        : type === "number"
+          ? (val === "" || !Number.isFinite(Number(val)))
+          : val === "";
+      if (missing) {
+        if (ferr) ferr.textContent = reqMsg.get(k) || "Required";
+        input.classList.add("pc-invalid");
+        input.setAttribute("aria-invalid", "true");
+        if (!firstInvalid) firstInvalid = input;
+      }
+    }
+    if (firstInvalid) {
+      msg.className = "pc-msg err";
+      msg.textContent = "Please fill in the required fields.";
+      firstInvalid.focus();
+      return;
+    }
     const variables = Object.create(null);
     for (const [k, input] of inputs) {
       if (fieldTypes.get(k) === "checkbox") {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nanobpm/urban",
-	"version": "0.46.0",
+	"version": "0.47.0",
 	"description": "Urban: build and run code-first apps on Nano — runtime, derivation toolkit, and CLI in one. Author durable processes with @nanobpm/workflow (defineFlow), a typed datasource, forms, triggers and surfaces from a nano.app.json manifest, on Node or Deno.",
 	"license": "Apache-2.0",
 	"type": "module",

package/src/runtime/core/modules/pages.test.ts

@@ -502,6 +502,48 @@ test("the renderer honours boolean (checkbox) actionForm fields", async () => {
   assert.match(js, /input\.checked = input\.defaultChecked;/);
 });
 
+test("the renderer enforces required actionForm fields client-side, blocking submit with an inline hint", async () => {
+  const res = await dispatch("GET", "/app/runtime.js");
+  const js = res.body ?? "";
+  // A field declared `required: true` is tracked in a Set and given an inline
+  // error node; the label carries a danger-toned "*" marker before submit.
+  assert.match(js, /required\.add\(f\.key\)/);
+  assert.match(js, /reqMark = \(f\) =>/);
+  assert.match(js, /class: "pc-req"/);
+  // The input is marked aria-required, and a clear-on-edit handler wipes the hint
+  // the moment the user starts fixing the field (input for text/number, change for
+  // a checkbox).
+  assert.match(js, /input\.setAttribute\("aria-required", "true"\)/);
+  assert.match(js, /wireField\(f, input, ferr, "input"\)/);
+  assert.match(js, /wireField\(f, input, ferr, "change"\)/);
+  // Submit is GATED: an empty required text/number or an unchecked required
+  // checkbox is "missing"; the first offender is focused and the submit RETURNS
+  // early (never round-trips to the server).
+  assert.match(js, /input\.checked !== true/);
+  assert.match(js, /!Number\.isFinite\(Number\(val\)\)/);
+  assert.match(js, /if \(firstInvalid\)/);
+  assert.match(js, /Please fill in the required fields\./);
+  assert.match(js, /firstInvalid\.focus\(\)/);
+  assert.match(js, /input\.classList\.add\("pc-invalid"\)/);
+  // Editing a required field after a blocked submit clears the summary banner too,
+  // so "Please fill in the required fields." never lingers stale while correcting.
+  assert.match(js, /msg\.textContent = "";\s*\n\s*msg\.className = "pc-msg";/);
+  // A per-field custom message (`requiredMessage`) overrides the default "Required".
+  assert.match(js, /reqMsg\.get\(k\) \|\| "Required"/);
+  assert.match(js, /f\.requiredMessage/);
+});
+
+test("the shell styles required-field markers and inline field errors", async () => {
+  const res = await dispatch("GET", "/");
+  const html = res.body ?? "";
+  // The "*" required marker and the inline per-field error both resolve through
+  // the shared danger token, and an empty error node collapses (no reserved gap).
+  assert.match(html, /\.pc-req \{ color:var\(--nano-danger\)/);
+  assert.match(html, /\.pc-field-err \{ font-size:.75rem; color:var\(--nano-danger\)/);
+  assert.match(html, /\.pc-field-err:empty \{ display:none; \}/);
+  assert.match(html, /input\.pc-invalid/);
+});
+
 test("renderer makes collapsible nodes persist their state across sessions", async () => {
   // A node with `collapsible` gets a clickable header that hides/shows the card
   // body, and the collapsed state is written to localStorage keyed by the home

package/src/runtime/core/modules/pages.ts

@@ -533,6 +533,10 @@ body { margin:0; font:15px/1.5 system-ui,sans-serif; padding:2rem; max-width:64r
 .pc-msg { font-size:.85rem; margin-top:.5rem; min-height:1.2em; }
 .pc-msg.err { color:var(--nano-danger); }
 .pc-msg.ok { color:var(--nano-ok); }
+.pc-req { color:var(--nano-danger); font-weight:600; }
+.pc-field-err { font-size:.75rem; color:var(--nano-danger); margin:.1rem 0 0; }
+.pc-field-err:empty { display:none; }
+.pc-field input.pc-invalid, .pc-field-check input.pc-invalid { border-color:var(--nano-danger); outline-color:var(--nano-danger); }
 table.pc-grid { width:100%; border-collapse:collapse; font-size:.9rem; table-layout:fixed; }
 /* table-layout:fixed divides the available width across columns and wraps text
    within each, so a grid with several long free-text columns (e.g. the epic
@@ -1083,9 +1087,38 @@ function renderActionForm(node) {
   // pollute Object.prototype or shadow inherited props (prototype-pollution class).
   const inputs = new Map();
   const fieldTypes = new Map();
+  // Client-side required-field validation state: the set of required keys, each
+  // field's custom message, and its inline error node (populated on a blocked
+  // submit, cleared as soon as the user edits the field).
+  const required = new Set();
+  const reqMsg = new Map();
+  const errs = new Map();
+  // A required field's label carries a danger-toned "*" so the requirement is
+  // visible BEFORE submit; spread into el(...) — an empty array adds no child.
+  const reqMark = (f) => (f.required === true ? [el("span", { class: "pc-req", title: "Required" }, " *")] : []);
+  // Register a field's inline error node and, when required, mark the input
+  // (aria-required) and wire a clear-on-edit handler so a hint disappears the
+  // moment the user starts fixing it. Editing a required field also clears the
+  // blocked-submit summary ("Please fill in the required fields.") so it never
+  // lingers as a stale/misleading banner while the user is correcting input.
+  const wireField = (f, input, ferr, evt) => {
+    errs.set(f.key, ferr);
+    if (f.required !== true) return;
+    required.add(f.key);
+    if (typeof f.requiredMessage === "string" && f.requiredMessage !== "") reqMsg.set(f.key, f.requiredMessage);
+    input.setAttribute("aria-required", "true");
+    input.addEventListener(evt, () => {
+      input.classList.remove("pc-invalid");
+      input.removeAttribute("aria-invalid");
+      ferr.textContent = "";
+      msg.textContent = "";
+      msg.className = "pc-msg";
+    });
+  };
   for (const f of p.fields || []) {
     const kind = f.type === "checkbox" ? "checkbox" : (f.type === "number" ? "number" : "text");
     fieldTypes.set(f.key, kind);
+    const ferr = el("p", { class: "pc-field-err" });
     if (kind === "checkbox") {
       // A boolean field renders a real checkbox; its default checked state comes
       // from default/checked on the field (unset -> unchecked). We record that on
@@ -1096,9 +1129,10 @@ function renderActionForm(node) {
       input.defaultChecked = checked;
       input.checked = checked;
       inputs.set(f.key, input);
+      wireField(f, input, ferr, "change");
       // Input-first, wrapped in the label so the whole row is a click target.
       card.append(
-        el("div", { class: "pc-field pc-field-check" }, el("label", {}, input, " " + (f.label || f.key))),
+        el("div", { class: "pc-field pc-field-check" }, el("label", {}, input, " " + (f.label || f.key), ...reqMark(f)), ferr),
       );
       continue;
     }
@@ -1111,11 +1145,43 @@ function renderActionForm(node) {
     }
     const input = el("input", attrs);
     inputs.set(f.key, input);
-    card.append(el("div", { class: "pc-field" }, el("label", {}, f.label || f.key), input));
+    wireField(f, input, ferr, "input");
+    card.append(el("div", { class: "pc-field" }, el("label", {}, f.label || f.key, ...reqMark(f)), input, ferr));
   }
   const msg = el("p", { class: "pc-msg" });
   const btn = el("button", { class: "pc-btn" }, p.submitLabel || "Submit");
   btn.addEventListener("click", async () => {
+    // Required-field gate: block the submit and surface an inline hint on each
+    // empty required field (a text/number left blank, a required checkbox left
+    // unchecked), focusing the first offender — so a missing value never
+    // round-trips to the server only to bounce back as a generic error.
+    let firstInvalid = null;
+    for (const [k, input] of inputs) {
+      const ferr = errs.get(k);
+      if (ferr) ferr.textContent = "";
+      input.classList.remove("pc-invalid");
+      input.removeAttribute("aria-invalid");
+      if (!required.has(k)) continue;
+      const type = fieldTypes.get(k);
+      const val = String(input.value).trim();
+      const missing = type === "checkbox"
+        ? input.checked !== true
+        : type === "number"
+          ? (val === "" || !Number.isFinite(Number(val)))
+          : val === "";
+      if (missing) {
+        if (ferr) ferr.textContent = reqMsg.get(k) || "Required";
+        input.classList.add("pc-invalid");
+        input.setAttribute("aria-invalid", "true");
+        if (!firstInvalid) firstInvalid = input;
+      }
+    }
+    if (firstInvalid) {
+      msg.className = "pc-msg err";
+      msg.textContent = "Please fill in the required fields.";
+      firstInvalid.focus();
+      return;
+    }
     const variables = Object.create(null);
     for (const [k, input] of inputs) {
       if (fieldTypes.get(k) === "checkbox") {