@appius-fr/apx 2.6.2 → 2.7.1

package/dist/bdfa755a1cdb872368c7.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect width="32" height="32" fill="#0654ba" />
+</svg>

package/dist/c9da177f7663f9fcd023.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <path
+    d="M6 17L12 23L26 9"
+    fill="none"
+    stroke="#000"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/ce9ef5fceb78e17e68c9.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <mask id="cross-cutout">
+    <rect width="32" height="32" fill="#fff" />
+    <path d="M8 8L24 24" stroke="#000" stroke-width="2" />
+    <path d="M24 8L8 24" stroke="#000" stroke-width="2" />
+  </mask>
+  <rect width="32" height="32" fill="#f00" mask="url(#cross-cutout)" />
+</svg>

package/dist/ed5af5163957b04bc6cc.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <mask id="frame-cutout">
+    <rect width="32" height="32" fill="#fff" />
+    <rect x="3" y="3" width="26" height="26" rx="3" ry="3" fill="#000" />
+  </mask>
+  <rect width="32" height="32" fill="#cccccc" mask="url(#frame-cutout)" />
+</svg>

package/modules/listen/README.md

@@ -1,235 +1,242 @@
-# APX Listen Module
-
-The `listen` module provides a powerful event handling system for APX objects. It enables event delegation, multiple callback chaining, debouncing via timeouts, and manual event triggering.
-
----
-
-## Installation
-
-The `listen` module is automatically included when you import APX. It augments all APX objects with the `.listen()` and `.trigger()` methods.
-
-```javascript
-import APX from './APX.mjs';
-// .listen() and .trigger() are now available on all APX objects
-```
-
----
-
-## Usage
-
-### Basic Event Listening
-
-```javascript
-// Listen to a single event type
-APX('.my-button').listen('click').do((event) => {
-    console.log('Button clicked!', event.target);
-});
-
-// Listen to multiple event types
-APX('.my-input').listen(['input', 'change']).do((event) => {
-    console.log('Input changed:', event.target.value);
-});
-```
-
-### Event Delegation
-
-Use event delegation to handle events on dynamically added elements:
-
-```javascript
-// Listen for clicks on any button inside the container (even if added later)
-APX('#container').listen('click', '.button').do((event) => {
-    console.log('Button clicked:', event.target);
-});
-```
-
-### Multiple Callbacks (Chaining)
-
-Chain multiple callbacks that execute sequentially:
-
-```javascript
-APX('.my-button').listen('click').do((event) => {
-    console.log('First callback');
-    return fetch('/api/data'); // Can return promises
-}).do((event) => {
-    console.log('Second callback (runs after first completes)');
-}).do((event) => {
-    console.log('Third callback');
-});
-```
-
-### Debouncing with Timeout
-
-Add a delay before executing callbacks:
-
-```javascript
-// Wait 300ms after the last event before executing callbacks
-APX('.search-input').listen('input', { timeout: 300 }).do((event) => {
-    console.log('Searching for:', event.target.value);
-    // This will only fire 300ms after the user stops typing
-});
-```
-
-### Manual Event Triggering
-
-Manually trigger events and their registered callbacks:
-
-```javascript
-// Trigger a click event
-APX('.my-button').trigger('click');
-
-// Or trigger with an actual Event object
-const customEvent = new CustomEvent('myevent', { detail: { data: 'value' } });
-APX('.my-element').trigger(customEvent);
-```
-
----
-
-## API
-
-### `.listen(eventTypes, selector?, options?)`
-
-Adds event listeners to the APX-wrapped elements.
-
-**Parameters:**
-- `eventTypes` (string | string[]): The event type(s) to listen for (e.g., `'click'`, `['input', 'change']`)
-- `selector` (string, optional): CSS selector for event delegation
-- `options` (object, optional): Configuration options
-  - `timeout` (number): Delay in milliseconds before executing callbacks (default: `0`)
-
-**Returns:** An object with a `.do()` method for chaining callbacks.
-
-**Example:**
-```javascript
-APX('.element')
-    .listen('click', '.button', { timeout: 100 })
-    .do((event) => { /* callback 1 */ })
-    .do((event) => { /* callback 2 */ });
-```
-
-### `.do(callback)`
-
-Adds a callback function to the event listener chain. Callbacks execute sequentially, and each callback can return a Promise to delay the next callback.
-
-**Parameters:**
-- `callback` (Function): The callback function that receives the event object
-
-**Returns:** The same object (for chaining)
-
-**Example:**
-```javascript
-APX('.button').listen('click').do((event) => {
-    // Callback is bound to the matched element
-    console.log(this); // The matched element
-    return fetch('/api').then(res => res.json());
-}).do((event) => {
-    // This runs after the fetch completes
-    console.log('Fetch completed');
-});
-```
-
-### `.trigger(event)`
-
-Manually triggers an event on all wrapped elements and executes registered callbacks.
-
-**Parameters:**
-- `event` (string | Event): Event type string or an Event object
-
-**Example:**
-```javascript
-// Trigger with string
-APX('.button').trigger('click');
-
-// Trigger with Event object
-const event = new CustomEvent('custom', { detail: { foo: 'bar' } });
-APX('.element').trigger(event);
-```
-
----
-
-## Examples
-
-### Form Validation with Debouncing
-
-```javascript
-APX('#email-input').listen('input', { timeout: 500 }).do((event) => {
-    const email = event.target.value;
-    if (email.includes('@')) {
-        validateEmail(email);
-    }
-});
-```
-
-### Dynamic Content with Event Delegation
-
-```javascript
-// Handle clicks on buttons added dynamically
-APX('#dynamic-container').listen('click', '.action-button').do((event) => {
-    const button = event.target;
-    const action = button.dataset.action;
-    handleAction(action);
-});
-```
-
-### Sequential Async Operations
-
-```javascript
-APX('#submit-button').listen('click').do(async (event) => {
-    // First: Validate form
-    const isValid = await validateForm();
-    if (!isValid) throw new Error('Validation failed');
-}).do(async (event) => {
-    // Second: Submit form (only if validation passed)
-    const result = await submitForm();
-    return result;
-}).do((event) => {
-    // Third: Show success message
-    showSuccessMessage();
-});
-```
-
-### Multiple Event Types
-
-```javascript
-APX('.input-field').listen(['focus', 'blur', 'input']).do((event) => {
-    switch (event.type) {
-        case 'focus':
-            highlightField(event.target);
-            break;
-        case 'blur':
-            validateField(event.target);
-            break;
-        case 'input':
-            updatePreview(event.target.value);
-            break;
-    }
-});
-```
-
----
-
-## Features
-
-- ✅ **Event Delegation**: Handle events on dynamically added elements
-- ✅ **Multiple Callbacks**: Chain multiple callbacks that execute sequentially
-- ✅ **Promise Support**: Callbacks can return Promises for async operations
-- ✅ **Debouncing**: Add timeouts to delay callback execution
-- ✅ **Multiple Event Types**: Listen to multiple event types at once
-- ✅ **Manual Triggering**: Programmatically trigger events and callbacks
-- ✅ **Context Binding**: Callbacks are bound to the matched element (`this`)
-
----
-
-## Notes
-
-- Callbacks execute sequentially; if a callback returns a Promise, the next callback waits for it to resolve
-- Event delegation uses `closest()` to find the matching element, so it works with nested elements
-- Timeouts are cleared and reset on each event, making it perfect for debouncing
-- The `trigger()` method respects event delegation selectors when executing callbacks
-
----
-
-## License
-
-Author : Thibault SAELEN  
-Copyright Appius SARL.
-
+# APX Listen Module
+
+The `listen` module provides a powerful event handling system for APX objects. It enables event delegation, multiple callback chaining, debouncing via timeouts, and manual event triggering.
+
+---
+
+## Installation
+
+The `listen` module is automatically included when you import APX. It augments all APX objects with the `.listen()` and `.trigger()` methods.
+
+```javascript
+import APX from './APX.mjs';
+// .listen() and .trigger() are now available on all APX objects
+```
+
+---
+
+## Usage
+
+### Basic Event Listening
+
+```javascript
+// Listen to a single event type
+APX('.my-button').listen('click').do((event) => {
+    console.log('Button clicked!', event.target);
+});
+
+// Listen to multiple event types
+APX('.my-input').listen(['input', 'change']).do((event) => {
+    console.log('Input changed:', event.target.value);
+});
+```
+
+### Event Delegation
+
+Use event delegation to handle events on dynamically added elements:
+
+```javascript
+// Listen for clicks on any button inside the container (even if added later)
+APX('#container').listen('click', '.button').do((event) => {
+    console.log('Button clicked:', event.target);
+});
+```
+
+### Multiple Callbacks (Chaining)
+
+Chain multiple callbacks that execute sequentially:
+
+```javascript
+APX('.my-button').listen('click').do((event) => {
+    console.log('First callback');
+    return fetch('/api/data'); // Can return promises
+}).do((event) => {
+    console.log('Second callback (runs after first completes)');
+}).do((event) => {
+    console.log('Third callback');
+});
+```
+
+### Debouncing with Timeout
+
+Add a delay before executing callbacks:
+
+```javascript
+// Wait 300ms after the last event before executing callbacks
+APX('.search-input').listen('input', { timeout: 300 }).do((event) => {
+    console.log('Searching for:', event.target.value);
+    // This will only fire 300ms after the user stops typing
+});
+```
+
+### Manual Event Triggering
+
+Manually trigger events and their registered callbacks:
+
+```javascript
+// Trigger a click event
+APX('.my-button').trigger('click');
+
+// Or trigger with an actual Event object
+const customEvent = new CustomEvent('myevent', { detail: { data: 'value' } });
+APX('.my-element').trigger(customEvent);
+```
+
+---
+
+## API
+
+### `.listen(eventTypes, selector?, options?)`
+
+Adds event listeners to the APX-wrapped elements.
+
+**Parameters:**
+- `eventTypes` (string | string[]): The event type(s) to listen for (e.g., `'click'`, `['input', 'change']`)
+- `selector` (string, optional): CSS selector for event delegation
+- `options` (object, optional): Configuration options
+  - `timeout` (number): Delay in milliseconds before executing callbacks (default: `0`)
+
+**Returns:** An object with a `.do()` method for chaining callbacks.
+
+**Example:**
+```javascript
+APX('.element')
+    .listen('click', '.button', { timeout: 100 })
+    .do((event) => { /* callback 1 */ })
+    .do((event) => { /* callback 2 */ });
+```
+
+### `.do(callback)`
+
+Adds a callback function to the event listener chain. Callbacks execute sequentially, and each callback can return a Promise to delay the next callback.
+
+**Parameters:**
+- `callback` (Function): The callback function that receives the event object
+
+**Returns:** The same object (for chaining)
+
+**Example:**
+```javascript
+APX('.button').listen('click').do((event) => {
+    // Callback is bound to the matched element
+    console.log(this); // The matched element
+    return fetch('/api').then(res => res.json());
+}).do((event) => {
+    // This runs after the fetch completes
+    console.log('Fetch completed');
+});
+```
+
+### `.trigger(event)`
+
+Manually triggers an event on all wrapped elements and executes registered callbacks.
+
+**Parameters:**
+- `event` (string | Event): Event type string or an Event object
+
+**Example:**
+```javascript
+// Trigger with string
+APX('.button').trigger('click');
+
+// Trigger with Event object
+const event = new CustomEvent('custom', { detail: { foo: 'bar' } });
+APX('.element').trigger(event);
+```
+
+---
+
+## Examples
+
+### Form Validation with Debouncing
+
+```javascript
+APX('#email-input').listen('input', { timeout: 500 }).do((event) => {
+    const email = event.target.value;
+    if (email.includes('@')) {
+        validateEmail(email);
+    }
+});
+```
+
+### Dynamic Content with Event Delegation
+
+```javascript
+// Handle clicks on buttons added dynamically
+APX('#dynamic-container').listen('click', '.action-button').do((event) => {
+    const button = event.target;
+    const action = button.dataset.action;
+    handleAction(action);
+});
+```
+
+### Sequential Async Operations
+
+```javascript
+APX('#submit-button').listen('click').do(async (event) => {
+    // First: Validate form
+    const isValid = await validateForm();
+    if (!isValid) throw new Error('Validation failed');
+}).do(async (event) => {
+    // Second: Submit form (only if validation passed)
+    const result = await submitForm();
+    return result;
+}).do((event) => {
+    // Third: Show success message
+    showSuccessMessage();
+});
+```
+
+### Multiple Event Types
+
+```javascript
+APX('.input-field').listen(['focus', 'blur', 'input']).do((event) => {
+    switch (event.type) {
+        case 'focus':
+            highlightField(event.target);
+            break;
+        case 'blur':
+            validateField(event.target);
+            break;
+        case 'input':
+            updatePreview(event.target.value);
+            break;
+    }
+});
+```
+
+---
+
+## Features
+
+- ✅ **Event Delegation**: Handle events on dynamically added elements
+- ✅ **Multiple Callbacks**: Chain multiple callbacks that execute sequentially
+- ✅ **Promise Support**: Callbacks can return Promises for async operations
+- ✅ **Debouncing**: Add timeouts to delay callback execution
+- ✅ **Multiple Event Types**: Listen to multiple event types at once
+- ✅ **Manual Triggering**: Programmatically trigger events and callbacks
+- ✅ **Context Binding**: Callbacks are bound to the matched element (`this`)
+
+---
+
+## Notes
+
+- Callbacks execute sequentially; if a callback returns a Promise, the next callback waits for it to resolve
+- Event delegation uses `closest()` to find the matching element, so it works with nested elements
+- Timeouts are cleared and reset on each event, making it perfect for debouncing
+- The `trigger()` method respects event delegation selectors when executing callbacks
+
+---
+
+## Demos
+
+- Demo landing page: `demo/index.html`
+- Related module demo: `demo/modules/tristate/index.html` (tri-state visual states and interaction)
+
+---
+
+## License
+
+Author : Thibault SAELEN  
+Copyright Appius SARL.
+

package/modules/listen/listen.mjs

@@ -132,9 +132,7 @@ function executeCallbacks(event, uniqueId, timeoutDuration, selector = '', eleme
                         }
                     });
                 });
-            }, Promise.resolve()).catch(error => {
-                console.error('Error in callback chain:', error);
-            });
+            }, Promise.resolve()).catch(() => {});
         }
     }
 

package/modules/scrollableTable/CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog — Scrollable Table module
+
+All notable changes to this module are documented here.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+
+## [2.7.1] - 2025-02-16
+
+### Added
+- Option **`height`**: fixed body height (number or CSS length). When set, the tbody row always uses this height; `maxHeight` is ignored. Class `apx-scrollable-table--body-height` is applied.
+- Option **`bodyHeightDynamic`**: dynamic body height — `{ get: (table) => number|string, useAs: 'height'|'maxHeight', updateOn?: { scroll?, resize?, scrollOn?, resizeOn? } }`. Re-resolves body size when scroll/resize sources fire (viewport, scrollbar appearance, or custom elements). **updateOn** uses booleans `scroll`/`resize` (default true = document scroll + window resize) or explicit `scrollOn`/`resizeOn` arrays with sentinels `'document'`/`'window'` or elements (ResizeObserver for resize elements). Lazy cleanup: tables removed from the DOM are dropped from updates on the next event (no MutationObserver).
+- Option **`gridTemplateColumns`**: full override for column tracks (e.g. `'1fr 2fr 1fr'`). Skips width measurement.
+- Option **`gridTemplateRows`**: per-section override `{ thead?, tbody?, tfoot? }` for row tracks.
+- Option **`columnOverrides`**: hybrid mode — column index → CSS value (object or array). Columns not overridden keep measured width.
+- Option **`rowOverrides`**: hybrid mode — per-section row index → CSS value. Rows not overridden keep measured height.
+- **Column width preservation**: widths are measured from the table’s natural layout (before applying the module) and applied as `grid-template-columns`; stored in ref for refresh.
+- **Row height preservation**: each `<tr>` height is measured and applied so rowspan cells keep correct proportions.
+- **Scrollbar gutter**: dedicated grid column for the vertical scrollbar so it does not overlap the last data column. CSS variable `--apx-scrollable-gutter-width` (default 17px); set to `0` to allow overlap.
+- CSS variables **`--apx-scrollable-thead-template-rows`**, **`--apx-scrollable-tbody-template-rows`**, **`--apx-scrollable-tfoot-template-rows`** for row track overrides.
+
+### Fixed
+- **Horizontal scrollbar on init**: the grid class and template-columns were applied in the same layout pass, causing the tbody to overflow horizontally. The grid is now established first (with a forced reflow) before setting the measured template-columns.
+- Measured column widths now use `fr` units instead of `px` so they remain flexible alongside the fixed gutter column.
+
+### Changed
+- Removed `scrollbar-gutter: stable` from tbody; scrollbar space is now the dedicated gutter column.
+- Grid template columns: value is set via `--apx-scrollable-template-columns` (with gutter suffix). Fallback in CSS includes gutter.
+- Body size: when `height` is set, grid row uses fixed size; otherwise `fit-content(max-height)` as before. With `bodyHeightDynamic`, body size is resolved from `get(table)` at init and on scroll/resize (throttled).
+
+## [2.7.0] - 2025-02-16
+
+### Added
+- Initial release: scrollable tbody with fixed thead/tfoot, CSS Grid + subgrid.
+- `APX('table').scrollableTable(options)` and `scrollableTable('refresh')`.
+- Option `maxHeight` (number or CSS length).
+- Full colspan/rowspan support via explicit grid placement.
+- Demo: `demo/modules/scrollableTable/index.html`.