cotomy 0.1.72 → 0.2.0

package/LICENSE

@@ -1,20 +1,20 @@
-The MIT License (MIT)
-Copyright (c) 2025 Yasuhiro Arakawa
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The MIT License (MIT)
+Copyright (c) 2025 Yasuhiro Arakawa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,22 +1,22 @@
-# Cotomy
-
-> This library targets ES2020+.  
-> For older browsers (e.g. iOS 13 or IE), you will need a Polyfill such as `core-js`.
-
-**Cotomy** is a lightweight framework for managing form behavior and page controllers in web applications.  
-It is suitable for both SPAs (Single Page Applications) and traditional web apps requiring dynamic form operations.
-
-⚠️ **Warning**: This project is in early development. APIs may change without notice until version 1.0.0.
-
-
-To install Cotomy in your project, run the following command:
-
-```bash
-npm i cotomy
-```
-
-## Usage
-
+# Cotomy
+
+> This library targets ES2020+.  
+> For older browsers (e.g. iOS 13 or IE), you will need a Polyfill such as `core-js`.
+
+**Cotomy** is a lightweight framework for managing form behavior and page controllers in web applications.  
+It is suitable for both SPAs (Single Page Applications) and traditional web apps requiring dynamic form operations.
+
+⚠️ **Warning**: This project is in early development. APIs may change without notice until version 1.0.0.
+
+
+To install Cotomy in your project, run the following command:
+
+```bash
+npm i cotomy
+```
+
+## Usage
+
 Cotomy will continue to expand with more detailed usage instructions and code examples added to the README in the future.  
 For the latest updates, please check the official documentation or repository regularly.
 
@@ -75,6 +75,7 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `append(child): this` / `prepend(child): this` / `appendAll(children): this`
   - `insertBefore(sibling): this` / `insertAfter(sibling): this`
   - `appendTo(target): this` / `prependTo(target): this`
+  - `clone(type?): CotomyElement` — Returns a deep-cloned element, optionally typed
   - `clear(): this` — Removes all descendants and text
   - `remove(): void`
 - Geometry & visibility
@@ -170,8 +171,8 @@ The Form layer builds on `CotomyElement` for common form flows.
   - `initialized: boolean` — Set after `initialize()`
   - `submitAsync(): Promise<void>` — Abstract in base
 - Routing & reload
-  - `method(): string` — Defaults to `get` in base; specialized in subclasses
-  - `actionUrl(): string` — Defaults to `action` attribute or current path
+  - `method: string` — Getter that defaults to `get` in base; specialized in subclasses
+  - `actionUrl: string` — Getter that defaults to the `action` attribute or current path
   - `reloadAsync(): Promise<void>` — Page reload using `CotomyWindow`
   - `autoReload: boolean` — Backed by `data-cotomy-autoreload` (default true)
 
@@ -184,8 +185,8 @@ The Form layer builds on `CotomyElement` for common form flows.
 
 - API integration
   - `apiClient(): CotomyApi` — Override to inject a client; default creates a new one
-  - `actionUrl(): string` — Uses `action` attribute
-  - `method(): string` — Defaults to `post`
+  - `actionUrl: string` — Uses `action` attribute
+  - `method: string` — Defaults to `post`
   - `formData(): FormData` — Builds from form, converts `datetime-local` to ISO (UTC offset)
   - `submitAsync()` — Calls `submitToApiAsync(formData)`
   - `submitToApiAsync(formData): Promise<CotomyApiResponse>` — Uses `CotomyApi.submitAsync`
@@ -199,8 +200,8 @@ The Form layer builds on `CotomyElement` for common form flows.
 - Surrogate key flow
   - `data-cotomy-entity-key` — Holds the entity identifier if present
   - `data-cotomy-identify` — Defaults to true; when true and `201 Created` is returned, the form extracts the key from `Location` and stores it in `data-cotomy-entity-key`
-  - `actionUrl()` — Appends the key to the base `action` when present; otherwise normalizes trailing slash for collection URL
-  - `method()` — `put` when key exists; otherwise `post` (unless `method` attribute is explicitly set)
+  - `actionUrl` — Appends the key to the base `action` when present; otherwise normalizes trailing slash for collection URL
+  - `method` — `put` when key exists; otherwise `post` (unless `method` attribute is explicitly set)
 
 ### CotomyEntityFillApiForm
 
@@ -208,14 +209,21 @@ The Form layer builds on `CotomyElement` for common form flows.
   - `initialize()` — Adds default fillers and triggers `loadAsync()` on `CotomyWindow.ready`
   - `reloadAsync()` — Alias to `loadAsync()`
   - `loadAsync(): Promise<CotomyApiResponse>` — Calls `CotomyApi.getAsync` when `canLoad()` is true
-  - `loadActionUrl(): string` — Defaults to `actionUrl()`; override for custom endpoints
+  - `loadActionUrl(): string` — Defaults to `actionUrl`; override for custom endpoints
   - `canLoad(): boolean` — Defaults to `hasEntityKey`
 - Naming & binding
   - `bindNameGenerator(): ICotomyBindNameGenerator` — Defaults to `CotomyBracketBindNameGenerator` (`user[name]`)
   - `renderer(): CotomyViewRenderer` — Applies `[data-cotomy-bind]` to view elements
-  - `filler(type, (input, value))` — Register fillers; defaults provided for `datetime-local`, `checkbox`, `radio`
+- `filler(type, (input, value))` — Register fillers; defaults provided for `datetime-local`, `checkbox`, `radio`
   - Fills non-array, non-object fields by matching input/select/textarea `name`
 
+#### Array binding
+
+- Both `CotomyViewRenderer.applyAsync` and `CotomyEntityFillApiForm.fillAsync` resolve array elements by index via the active `ICotomyBindNameGenerator` (dot style → `items[0].name`, bracket style → `items[0][name]`).
+- Cotomy does **not** create or clone templates for you. Prepare the necessary DOM (e.g., table rows, list items, individual inputs) ahead of time, then call `fillAsync`/`applyAsync` to populate the values.
+- Primitive arrays (strings, numbers, booleans, etc.) are treated the same way—have matching `[data-cotomy-bind]`/`name` attributes ready for every index you want to show.
+- If you need dynamic row counts, generate the markup yourself before invoking Cotomy; the framework purposely avoids mutating the structure so it does not get in your way.
+
 Example:
 
 ```ts
@@ -228,69 +236,69 @@ form.submitFailed(e => console.warn("Submit failed", e.response.status));
 ```
 
 ### Entity API forms
-
-`CotomyEntityApiForm` targets REST endpoints that identify records with a single surrogate key.  
-Attach `data-cotomy-entity-key="<id>"` to the form when editing an existing entity; omit the attribute (or leave it empty) to issue a `POST` to the base `action` URL.  
-On `201 Created`, the form reads the `Location` header and stores the generated key back into `data-cotomy-entity-key`, enabling subsequent `PUT` submissions.  
-Composite or natural keys are no longer supported—migrate any legacy markup that relied on `data-cotomy-keyindex` or multiple key inputs to the new surrogate-key flow.
-When you must integrate with endpoints that still expect natural identifiers, subclass `CotomyEntityApiForm`/`CotomyEntityFillApiForm`, override `canLoad()` to supply your own load condition, and adjust `loadActionUrl()` (plus any submission hooks) to build the appropriate URL fragments.
-
-The core of Cotomy is `CotomyElement`, which is constructed as a wrapper for `Element`.  
-By passing HTML and CSS strings to the constructor, it is possible to generate Element designs with a limited scope.
-
-```typescript
-    const ce = new CotomyElement({
-        html: /* html */`
-              <div>
-                <p>Text</p>
-              </div>
-            `,
-        css: /* css */`
-            [scope] {
-              display: block;
-            }
-            [scope] > p {
-              text-align: center;
-            }
-          `
-    });
-```
-
-- `"display HTML in character literals with color coding"` → `"syntax highlighting for embedded HTML"`
-- `"generate Element designs with a limited scope"` → `"generate scoped DOM elements with associated styles"`
-
-## Development
-
-Cotomy ships with both ESM (`dist/esm`) and CommonJS (`dist/cjs`) builds, plus generated type definitions in `dist/types`.  
-For direct `<script>` usage, browser-ready bundles are available at `dist/browser/cotomy.js` and `dist/browser/cotomy.min.js` (also served via the npm `unpkg` entry).
-Include the minified build like so:
-
-```html
-<script src="https://unpkg.com/cotomy/dist/browser/cotomy.min.js"></script>
-<script>
-  const el = new Cotomy.CotomyElement("<div>Hello</div>");
-  document.body.appendChild(el.element);
-</script>
-```
-
-Run the build to refresh every target bundle:
-
-```bash
-npm install
-npm run build
-```
-
-The Vitest-based test suite can be executed via:
-
-```bash
-npx vitest run
-```
-
-## License
-
-This project is licensed under the [MIT License](LICENSE).
-
-## Contact
-
-You can reach out to me at: [yshr1920@gmail.com](mailto:yshr1920@gmail.com)  
-GitHub repository: [https://github.com/yshr1920/cotomy](https://github.com/yshr1920/cotomy)
+
+`CotomyEntityApiForm` targets REST endpoints that identify records with a single surrogate key.  
+Attach `data-cotomy-entity-key="<id>"` to the form when editing an existing entity; omit the attribute (or leave it empty) to issue a `POST` to the base `action` URL.  
+On `201 Created`, the form reads the `Location` header and stores the generated key back into `data-cotomy-entity-key`, enabling subsequent `PUT` submissions.  
+Composite or natural keys are no longer supported—migrate any legacy markup that relied on `data-cotomy-keyindex` or multiple key inputs to the new surrogate-key flow.
+When you must integrate with endpoints that still expect natural identifiers, subclass `CotomyEntityApiForm`/`CotomyEntityFillApiForm`, override `canLoad()` to supply your own load condition, and adjust `loadActionUrl()` (plus any submission hooks) to build the appropriate URL fragments.
+
+The core of Cotomy is `CotomyElement`, which is constructed as a wrapper for `Element`.  
+By passing HTML and CSS strings to the constructor, it is possible to generate Element designs with a limited scope.
+
+```typescript
+    const ce = new CotomyElement({
+        html: /* html */`
+              <div>
+                <p>Text</p>
+              </div>
+            `,
+        css: /* css */`
+            [scope] {
+              display: block;
+            }
+            [scope] > p {
+              text-align: center;
+            }
+          `
+    });
+```
+
+- `"display HTML in character literals with color coding"` → `"syntax highlighting for embedded HTML"`
+- `"generate Element designs with a limited scope"` → `"generate scoped DOM elements with associated styles"`
+
+## Development
+
+Cotomy ships with both ESM (`dist/esm`) and CommonJS (`dist/cjs`) builds, plus generated type definitions in `dist/types`.  
+For direct `<script>` usage, browser-ready bundles are available at `dist/browser/cotomy.js` and `dist/browser/cotomy.min.js` (also served via the npm `unpkg` entry).
+Include the minified build like so:
+
+```html
+<script src="https://unpkg.com/cotomy/dist/browser/cotomy.min.js"></script>
+<script>
+  const el = new Cotomy.CotomyElement("<div>Hello</div>");
+  document.body.appendChild(el.element);
+</script>
+```
+
+Run the build to refresh every target bundle:
+
+```bash
+npm install
+npm run build
+```
+
+The Vitest-based test suite can be executed via:
+
+```bash
+npx vitest run
+```
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).
+
+## Contact
+
+You can reach out to me at: [yshr1920@gmail.com](mailto:yshr1920@gmail.com)  
+GitHub repository: [https://github.com/yshr1920/cotomy](https://github.com/yshr1920/cotomy)

package/dist/browser/cotomy.js

@@ -174,7 +174,7 @@ module.exports = cuid;
 /***/ 826:
 /***/ (function(module) {
 
-!function(t,i){ true?module.exports=i():0}(this,(function(){"use strict";var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var r=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),r.call(this,t)};var o=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds()}else o.call(this)};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s;if(0===u)return this.utc(f);var r=this.clone();if(f)return r.$offset=u,r.$u=!1,r;var o=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();return(r=this.local().add(u+o,t)).$offset=u,r.$x.$localOffset=o,r};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return!!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return"s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)}}}));
+!function(t,i){ true?module.exports=i():0}(this,(function(){"use strict";var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t)};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds()}else r.call(this)};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return!!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return"s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)}}}));
 
 /***/ })
 
@@ -804,12 +804,12 @@ class HandlerRegistory {
     }
 }
 class EventRegistry {
-    static get instance() {
-        return this._instance ?? (this._instance = new EventRegistry());
-    }
     constructor() {
         this._registry = new Map();
     }
+    static get instance() {
+        return this._instance ?? (this._instance = new EventRegistry());
+    }
     map(target) {
         const scopeId = target.scopeId;
         let registry = this._registry.get(scopeId);
@@ -994,6 +994,10 @@ class CotomyElement {
     get element() {
         return this._element;
     }
+    clone(type) {
+        const ctor = (type ?? CotomyElement);
+        return new ctor(this.element.cloneNode(true));
+    }
     get tagname() {
         return this.element.tagName.toLowerCase();
     }
@@ -1023,6 +1027,14 @@ class CotomyElement {
         }
         return true;
     }
+    match(selector) {
+        try {
+            return this.element.matches(selector);
+        }
+        catch {
+            return false;
+        }
+    }
     get empty() {
         const nonEmptyTags = new Set([
             "input", "select", "textarea", "img", "video", "audio", "br", "hr",
@@ -1339,6 +1351,36 @@ class CotomyElement {
             return undefined;
         }
     }
+    previousSibling(selector = "*", type) {
+        const element = this.element.previousElementSibling;
+        if (element !== null && element instanceof HTMLElement) {
+            const ctor = (type ?? CotomyElement);
+            const ce = new ctor(element);
+            return ce.match(selector) ? ce : ce.previousSibling(selector, type);
+        }
+        else {
+            return undefined;
+        }
+    }
+    nextSibling(selector = "*", type) {
+        const element = this.element.nextElementSibling;
+        if (element !== null && element instanceof HTMLElement) {
+            const ctor = (type ?? CotomyElement);
+            const ce = new ctor(element);
+            return ce.match(selector) ? ce : ce.nextSibling(selector, type);
+        }
+        else {
+            return undefined;
+        }
+    }
+    siblings(selector = "*", type) {
+        const parent = this.element.parentElement;
+        if (!parent)
+            return [];
+        const ctor = (type ?? CotomyElement);
+        return Array.from(parent.children).filter((e) => e instanceof HTMLElement
+            && e !== this.element).map(e => new ctor(e)).filter(e => e.match(selector));
+    }
     find(selector, type) {
         const elements = Array.from(this.element.querySelectorAll(selector));
         return elements.map(e => new (type ?? CotomyElement)(e));
@@ -2078,11 +2120,17 @@ class CotomyBracketBindNameGenerator {
     create(name, parent) {
         return parent ? `${parent}[${name}]` : name;
     }
+    createIndex(parent, index) {
+        return this.create(String(index), parent);
+    }
 }
 class CotomyDotBindNameGenerator {
     create(name, parent) {
         return parent ? `${parent}.${name}` : name;
     }
+    createIndex(parent, index) {
+        return parent ? `${parent}[${index}]` : `[${index}]`;
+    }
 }
 class CotomyViewRenderer {
     constructor(element, bindNameGenerator) {
@@ -2146,30 +2194,50 @@ class CotomyViewRenderer {
         }
         return this;
     }
+    bindPrimitiveValue(propertyName, value) {
+        this.element.find(`[data-cotomy-bind="${propertyName}" i]`).forEach(element => {
+            if (CotomyDebugSettings.isEnabled(CotomyDebugFeature.Bind)) {
+                console.debug(`Binding data to element [data-cotomy-bind="${propertyName}"]:`, value);
+            }
+            const type = element.attribute("data-cotomy-bindtype")?.toLowerCase();
+            if (type && this._renderers[type]) {
+                this._renderers[type](element, value);
+            }
+            else {
+                element.text = String(value ?? "");
+            }
+        });
+    }
+    async applyArrayAsync(values, propertyName) {
+        for (let index = 0; index < values.length; index++) {
+            const item = values[index];
+            const itemName = this.bindNameGenerator.createIndex(propertyName, index);
+            if (Array.isArray(item)) {
+                await this.applyArrayAsync(item, itemName);
+                continue;
+            }
+            if (item && typeof item === "object") {
+                await this.applyObjectAsync(item, itemName);
+                continue;
+            }
+            this.bindPrimitiveValue(itemName, item);
+        }
+    }
     async applyObjectAsync(target, propertyName = undefined) {
         if (!propertyName) {
             this.element.find("[data-cotomy-bind]").forEach(e => e.clear());
         }
         for (const [key, value] of Object.entries(await target)) {
             const pname = this.bindNameGenerator.create(key, propertyName);
-            if (Array.isArray(value))
+            if (Array.isArray(value)) {
+                await this.applyArrayAsync(value, pname);
                 continue;
+            }
             if (value && typeof value === "object") {
                 await this.applyObjectAsync(value, pname);
                 continue;
             }
-            this.element.find(`[data-cotomy-bind="${pname}" i]`).forEach(element => {
-                if (CotomyDebugSettings.isEnabled(CotomyDebugFeature.Bind)) {
-                    console.debug(`Binding data to element [data-cotomy-bind="${pname}"]:`, value);
-                }
-                const type = element.attribute("data-cotomy-bindtype")?.toLowerCase();
-                if (type && this._renderers[type]) {
-                    this._renderers[type](element, value);
-                }
-                else {
-                    element.text = String(value ?? "");
-                }
-            });
+            this.bindPrimitiveValue(pname, value);
         }
     }
     async applyAsync(respose) {
@@ -2370,10 +2438,10 @@ class CotomyForm extends CotomyElement {
     generateId(prefix = "__cotomy_form__") {
         return super.generateId(prefix);
     }
-    method() {
+    get method() {
         return this.attribute("method") ?? "get";
     }
-    actionUrl() {
+    get actionUrl() {
         return this.attribute("action") ?? location.pathname + location.search;
     }
     async reloadAsync() {
@@ -2406,11 +2474,11 @@ class CotomyForm extends CotomyElement {
     }
 }
 class CotomyQueryForm extends CotomyForm {
-    method() {
+    get method() {
         return "get";
     }
     async submitAsync() {
-        const url = this.actionUrl();
+        const url = this.actionUrl;
         const queryParams = {};
         const queryString = url.split("?")[1];
         if (queryString) {
@@ -2452,7 +2520,7 @@ class CotomyApiForm extends CotomyForm {
     apiClient() {
         return new CotomyApi();
     }
-    actionUrl() {
+    get actionUrl() {
         return this.attribute("action");
     }
     apiFailed(handle) {
@@ -2479,7 +2547,7 @@ class CotomyApiForm extends CotomyForm {
             console.error("Submit failed:", response);
         }
     }
-    method() {
+    get method() {
         return this.attribute("method") ?? "post";
     }
     formData() {
@@ -2508,8 +2576,8 @@ class CotomyApiForm extends CotomyForm {
         const api = this.apiClient();
         try {
             const response = await api.submitAsync({
-                method: this.method(),
-                action: this.actionUrl(),
+                method: this.method,
+                action: this.actionUrl,
                 body: formData,
             });
             return response;
@@ -2533,7 +2601,7 @@ class CotomyEntityApiForm extends CotomyApiForm {
     get hasEntityKey() {
         return !!this.entityKey;
     }
-    actionUrl() {
+    get actionUrl() {
         const action = this.attribute("action");
         const normalized = action.replace(/\/+$/, "");
         if (!this.entityKey) {
@@ -2541,7 +2609,7 @@ class CotomyEntityApiForm extends CotomyApiForm {
         }
         return `${normalized}/${encodeURIComponent(this.entityKey)}`;
     }
-    method() {
+    get method() {
         if (this.hasAttribute("method") && this.attribute("method") !== "") {
             return this.attribute("method");
         }
@@ -2583,7 +2651,7 @@ class CotomyEntityApiForm extends CotomyApiForm {
                 this.attribute("data-cotomy-entity-key", addedParts[0]);
             }
             else {
-                const msg = `Location does not contain a single entity key segment.
+                const msg = `Location does not contain a single entity key segment.
                 action="${baseAction}", location="${locPath}", added=["${addedParts.join('","')}"]`;
                 throw new Error(msg);
             }
@@ -2641,7 +2709,7 @@ class CotomyEntityFillApiForm extends CotomyEntityApiForm {
         await this.loadAsync();
     }
     loadActionUrl() {
-        return this.actionUrl();
+        return this.actionUrl;
     }
     bindNameGenerator() {
         return new CotomyBracketBindNameGenerator();
@@ -2672,32 +2740,52 @@ class CotomyEntityFillApiForm extends CotomyEntityApiForm {
             throw error;
         }
     }
+    applyValueToInputs(pname, value) {
+        this.find(`input[name="${pname}" i]:not([data-cotomy-fill="false"]):not([multiple]),
+                textarea[name="${pname}" i]:not([data-cotomy-fill="false"]), 
+                select[name="${pname}" i]:not([data-cotomy-fill="false"]):not([multiple])`).forEach(input => {
+            if (CotomyDebugSettings.isEnabled(CotomyDebugFeature.Fill)) {
+                console.debug(`Filling input[name="${pname}"] with value:`, value);
+            }
+            const type = input.attribute("type")?.toLowerCase();
+            if (type && this._fillers[type]) {
+                this._fillers[type](input, value);
+            }
+            else {
+                input.value = String(value || "");
+            }
+        });
+    }
+    async fillArrayAsync(bindNameGenerator, values, propertyName) {
+        for (let index = 0; index < values.length; index++) {
+            const item = values[index];
+            const itemName = bindNameGenerator.createIndex(propertyName, index);
+            if (Array.isArray(item)) {
+                await this.fillArrayAsync(bindNameGenerator, item, itemName);
+                continue;
+            }
+            if (item && typeof item === "object") {
+                await this.fillObjectAsync(bindNameGenerator, item, itemName);
+                continue;
+            }
+            this.applyValueToInputs(itemName, item);
+        }
+    }
     async fillObjectAsync(bindNameGenerator, target, propertyName = undefined) {
         for (const [key, value] of Object.entries(target)) {
             if (key.endsWith('[]')) {
                 continue;
             }
             const pname = bindNameGenerator.create(key, propertyName);
-            if (Array.isArray(value))
+            if (Array.isArray(value)) {
+                await this.fillArrayAsync(bindNameGenerator, value, pname);
                 continue;
+            }
             if (value && typeof value === "object") {
                 await this.fillObjectAsync(bindNameGenerator, value, pname);
                 continue;
             }
-            this.find(`input[name="${pname}" i]:not([data-cotomy-fill="false"]):not([multiple]),
-                    textarea[name="${pname}" i]:not([data-cotomy-fill="false"]), 
-                    select[name="${pname}" i]:not([data-cotomy-fill="false"]):not([multiple])`).forEach(input => {
-                if (CotomyDebugSettings.isEnabled(CotomyDebugFeature.Fill)) {
-                    console.debug(`Filling input[name="${pname}"] with value:`, value);
-                }
-                const type = input.attribute("type")?.toLowerCase();
-                if (type && this._fillers[type]) {
-                    this._fillers[type](input, value);
-                }
-                else {
-                    input.value = String(value || "");
-                }
-            });
+            this.applyValueToInputs(pname, value);
         }
     }
     async fillAsync(response) {