cotomy 0.2.1 → 0.3.1

package/README.md

@@ -91,8 +91,8 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `rect(): { top, left, width, height }`
   - `innerRect()` — Subtracts padding
 - Events
-  - Generic: `on(event, handler, options?)`, `off(event, handler?, options?)`, `once(event, handler, options?)`, `trigger(event[, Event])`
-  - Delegation: `onChild(event, selector, handler, options?)`
+  - Generic: `on(event, handler, options?)`, `off(event, handler?, options?)`, `once(event, handler, options?)`, `trigger(event[, Event])` — `trigger` emits bubbling events by default and can be customized by passing an `Event`
+  - Delegation: `onSubTree(event, selector, handler, options?)`
   - Mouse: `click`, `dblclick`, `mouseover`, `mouseout`, `mousedown`, `mouseup`, `mousemove`, `mouseenter`, `mouseleave`
   - Keyboard: `keydown`, `keyup`, `keypress`
   - Inputs: `change`, `input`
@@ -114,7 +114,7 @@ const panel = new CotomyElement({
   `,
 });
 
-panel.onChild("click", ".ok", () => console.log("clicked!"));
+panel.onSubTree("click", ".ok", () => console.log("clicked!"));
 document.body.appendChild(panel.element);
 ```
 
@@ -134,7 +134,7 @@ document.body.appendChild(panel.element);
   - `append(element: CotomyElement)`
   - `moveNext(focused: CotomyElement, shift = false)` — Move focus to next/previous focusable
 - Window events
-  - `on(event, handler)` / `off(event, handler?)` / `trigger(event)`
+  - `on(event, handler)` / `off(event, handler?)` / `trigger(event[, Event])` — CotomyWindow’s `trigger` also bubbles by default and accepts an `Event` to override the behavior
   - `load(handler)` / `ready(handler)`
   - `resize([handler])` / `scroll([handler])` / `changeLayout([handler])` / `pageshow([handler])`
 - Window state

package/dist/browser/cotomy.js

@@ -1421,7 +1421,7 @@ class CotomyElement {
         return this;
     }
     trigger(event, e) {
-        this.element.dispatchEvent(e ?? new Event(event));
+        this.element.dispatchEvent(e ?? new Event(event, { bubbles: true }));
         return this;
     }
     on(event, handle, options) {
@@ -1429,7 +1429,7 @@ class CotomyElement {
         EventRegistry.instance.on(event, this, entry);
         return this;
     }
-    onChild(event, selector, handle, options) {
+    onSubTree(event, selector, handle, options) {
         const delegate = (e) => {
             const target = e.target;
             if (target && target.closest(selector)) {
@@ -1853,8 +1853,8 @@ class CotomyWindow {
             focusableElements[nextIndex].setFocus();
         }
     }
-    trigger(event) {
-        window.dispatchEvent(new Event(event));
+    trigger(event, e) {
+        window.dispatchEvent(e ?? new Event(event, { bubbles: true }));
     }
     on(event, handle) {
         if (!this._eventHandlers[event])