coles-solid-library 0.4.7 → 0.4.8

package/USAGE.html

@@ -551,6 +551,36 @@ fg.addToArray('pets', ['name', []] as any, { name: 'Fido' });
 fg.validate('pets'); // true now
 fg.removeFromArray('pets', 0);</code></pre>
     <p><strong>Item Shape:</strong> Adding to a FormArray requires a control definition tuple: <code>['propName', validators[]]</code>. Provide an object value with those props.</p>
+  <h3 id="forms-formarray-toplevel">FormArray as Top-Level Form Data</h3>
+    <p>The <code>&lt;Form&gt;</code> component accepts either a <code>FormGroup</code> or a <code>FormArray</code> as its <code>data</code> prop. When using a <code>FormArray</code>, <code>onSubmit</code> receives <code>T[]</code> instead of <code>T</code>.</p>
+    <pre><code>import { Form, FormArray, Validators, Button } from 'coles-solid-library';
+import { For } from 'solid-js';
+
+interface TodoItem { text: string; done: boolean }
+
+const todos = new FormArray&lt;TodoItem&gt;(
+  [
+    [['text', [Validators.Required]], ['done', []]],
+    [Validators.custom&lt;TodoItem[]&gt;('minOne', v =&gt; v.length &gt;= 1)]
+  ],
+  [{ text: 'Buy milk', done: false }]
+);
+
+// onSubmit receives TodoItem[] when data is a FormArray
+&lt;Form data={todos} onSubmit={(items) =&gt; console.log('todos:', items)}&gt;
+  &lt;For each={todos.get()}&gt;
+    {(item, i) =&gt; (
+      &lt;div&gt;
+        &lt;input value={item.text}
+          onInput={e =&gt; todos.setProperty(i(), 'text', e.currentTarget.value)} /&gt;
+        &lt;input type="checkbox" checked={item.done}
+          onChange={e =&gt; todos.setProperty(i(), 'done', e.currentTarget.checked)} /&gt;
+      &lt;/div&gt;
+    )}
+  &lt;/For&gt;
+  &lt;Button type="submit" theme="primary"&gt;Save&lt;/Button&gt;
+&lt;/Form&gt;</code></pre>
+    <p><strong>Note:</strong> When using <code>FormArray</code> as the top-level <code>data</code>, <code>FormField</code> field binding and <code>useFormFieldBinding</code> are not available. Manage array items directly through the FormArray API.</p>
   <h3 id="forms-async">Async Validators</h3>
     <p>Create via <code>Validators.asyncCustom('key', asyncFn, hide?)</code>. <code>validate()</code> is optimistic for async; call <code>await validateAsync()</code> to finalize.</p>
   <h3 id="forms-validation-flow">Validation Flow</h3>
@@ -570,7 +600,7 @@ if (asyncOk) doSubmit();</code></pre>
       <tr><td>FormGroup&lt;T&gt;</td><td><code>get/getR/set/reset/validate/validateAsync/addValidator/removeValidator/addToArray/removeFromArray/getErrors/hasError/hasValidator/getMeta/getArrayItem/markTouched/markDirty/setError</code></td><td>Root form state + validation engine.</td></tr>
       <tr><td>FormArray&lt;T&gt;</td><td><code>get/getAt/getProperty/set/setAt/setProperty/add/remove/replace/validate/validateCurrent/hasError/hasValidator/getErrors/getErrorsAt</code></td><td>Dynamic object array with array + control validators.</td></tr>
       <tr><td>Validators</td><td><code>Required/Email/minLength/maxLength/pattern/custom/asyncCustom</code></td><td>Validator factories; <code>hide</code> predicate suppresses an error.</td></tr>
-      <tr><td>&lt;Form&gt;</td><td><code>data</code>, <code>onSubmit</code></td><td>Context provider + submit orchestration (sync validate).</td></tr>
+      <tr><td>&lt;Form&gt;</td><td><code>data: FormGroup&lt;T&gt; | FormArray&lt;T&gt;</code>, <code>onSubmit</code></td><td>Context provider + submit orchestration. Accepts FormGroup (onSubmit receives T) or FormArray (onSubmit receives T[]).</td></tr>
       <tr><td>&lt;FormField&gt;</td><td><code>name</code>, <code>formName</code>, <code>required?</code>, others</td><td>Floating legend, focus, error projection region.</td></tr>
       <tr><td>&lt;ColeError&gt;</td><td><code>errorName</code></td><td>Registers error display element for key.</td></tr>
       <tr><td>useFormFieldBinding</td><td><code>(key)</code> =&gt; binding object</td><td>Manual binding to a control.</td></tr>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coles-solid-library",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "A SolidJS mostly UI library",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",