@samline/forms 2.3.2 → 2.3.4

package/README.md

@@ -42,10 +42,10 @@ Requires Node 20+ when bundling. Runtime target is ES2020.
 Use the browser build when you do not have a bundler and need to run the package directly in HTML, Shopify, WordPress, or any traditional template.
 
 ```html
-<script src="https://unpkg.com/@samline/forms@2.3.2/dist/browser/global.global.js"></script>
+<script src="https://unpkg.com/@samline/forms@2.3.4/dist/browser/global.global.js"></script>
 ```
 
-> Pin the version in production. Replace `2.3.2` with the version you ship.
+> Pin the version in production. Replace `2.3.4` with the version you ship.
 
 The browser bundle exposes a single global: `window.Forms`.
 
@@ -55,7 +55,7 @@ The browser bundle exposes a single global: `window.Forms`.
   <button type="submit">Send</button>
 </form>
 
-<script src="https://unpkg.com/@samline/forms@2.3.2/dist/browser/global.global.js"></script>
+<script src="https://unpkg.com/@samline/forms@2.3.4/dist/browser/global.global.js"></script>
 <script>
   const contactForm = window.Forms.newForm({ id: 'contact-form' })
 

package/dist/browser/global.global.js

@@ -5131,6 +5131,7 @@ var Forms = (() => {
 
   // src/core/dom.ts
   var isFormFieldElement = (value) => value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
+  var isArraySyntax = (field) => typeof field.name === "string" && field.name.endsWith("[]");
   var resolveFormElement = (target) => {
     if (!target) return null;
     if (target instanceof HTMLFormElement) return target;
@@ -5167,6 +5168,30 @@ var Forms = (() => {
     if (fields.length === 0) return void 0;
     const first = fields[0];
     if (!first) return void 0;
+    if (isArraySyntax(first) && fields.length > 1) {
+      if (first instanceof HTMLSelectElement || first instanceof HTMLTextAreaElement) {
+        return fields.map((f2) => f2.value);
+      }
+      if (first instanceof HTMLInputElement) {
+        if (first.type === "radio") {
+          const checked = fields.find(
+            (f2) => f2 instanceof HTMLInputElement && f2.checked
+          );
+          return checked?.value ?? "";
+        }
+        if (first.type === "checkbox") {
+          return fields.filter(
+            (f2) => f2 instanceof HTMLInputElement && f2.checked
+          ).map((f2) => f2.value);
+        }
+        if (first.type === "file") {
+          return fields.flatMap(
+            (f2) => f2 instanceof HTMLInputElement && f2.files ? Array.from(f2.files) : []
+          );
+        }
+      }
+      return fields.map((f2) => f2.value);
+    }
     if (first instanceof HTMLSelectElement || first instanceof HTMLTextAreaElement) {
       return first.value;
     }
@@ -5192,7 +5217,10 @@ var Forms = (() => {
   var writeFieldValue = (fields, value) => {
     const normalizedArray = Array.isArray(value) ? value.map((item) => String(item)) : null;
     const normalizedValue = value === void 0 || value === null ? "" : String(value);
-    for (const field of fields) {
+    const distributeArray = fields.length > 0 && fields[0] !== void 0 && isArraySyntax(fields[0]) && normalizedArray !== null;
+    for (let index = 0; index < fields.length; index++) {
+      const field = fields[index];
+      if (!field) continue;
       if (field instanceof HTMLInputElement) {
         if (field.type === "checkbox") {
           field.checked = normalizedArray ? normalizedArray.includes(field.value) : normalizedValue === field.value;
@@ -5206,9 +5234,17 @@ var Forms = (() => {
           if (Array.isArray(value) && value.length === 0) field.value = "";
           continue;
         }
+        if (distributeArray && normalizedArray) {
+          field.value = normalizedArray[index] ?? "";
+          continue;
+        }
         field.value = normalizedValue;
         continue;
       }
+      if (distributeArray && normalizedArray) {
+        field.value = normalizedArray[index] ?? "";
+        continue;
+      }
       field.value = normalizedValue;
     }
   };
@@ -5497,11 +5533,13 @@ var Forms = (() => {
     const getMergedErrors = () => mergeErrors(state2.validationErrors, state2.manualErrors);
     const syncVisualState = (names) => {
       if (!state2.element) return;
-      const targetNames = names ?? getTrackedFieldNames();
+      const sourceNames = names ?? getTrackedFieldNames();
       const errors = getMergedErrors();
-      for (const name of targetNames) {
-        const fields = getFieldsByName(name);
-        const hasError = Boolean(errors[name]?.length);
+      for (const name of sourceNames) {
+        const displayName = resolveDisplayNameForName(state2, name);
+        const canonical = resolveCanonicalForName(state2, name) ?? name;
+        const fields = getFieldsByName(displayName);
+        const hasError = Boolean(errors[canonical]?.length);
         for (const field of fields) {
           applyBooleanAttribute(field, attributes.filled, isFieldFilled(field));
           applyBooleanAttribute(field, attributes.error, hasError);