@appius-fr/apx 2.6.1 → 2.7.0

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/README.md

@@ -0,0 +1,52 @@
+# APX Scrollable Table Module
+
+Makes the **tbody** of a table scrollable while keeping **thead** and **tfoot** fixed and column alignment consistent. Uses CSS Grid with subgrid so no JavaScript is needed for width syncing or scrollbar compensation.
+
+## Requirements
+
+- Modern browsers with **CSS subgrid** support (Chrome 117+, Safari 16+, Firefox 71+). See [caniuse](https://caniuse.com/css-subgrid).
+
+## Installation
+
+The module is part of APX. Ensure the scrollableTable augment is applied (see `APX.mjs`).
+
+CSS is loaded automatically when the module is imported.
+
+## Usage
+
+### Init
+
+```js
+APX('table.my-table').scrollableTable({ maxHeight: 300 });
+// or with a CSS length
+APX('table.my-table').scrollableTable({ maxHeight: '50vh' });
+```
+
+Calling `scrollableTable(options)` again with no options or an empty object does nothing (idempotent). Passing new options (e.g. a different `maxHeight`) updates the stored options and re-applies the layout.
+
+### Refresh
+
+After changing the table DOM (adding/removing rows, changing colspan/rowspan), re-apply the layout with the same options:
+
+```js
+APX('table.my-table').scrollableTable('refresh');
+```
+
+## Options
+
+| Option      | Type             | Default   | Description                          |
+| ----------- | ---------------- | --------- | ------------------------------------ |
+| `maxHeight` | `number` or `string` | `'200px'` | Max height of the tbody. Number is treated as pixels; string can be any CSS length (e.g. `'50vh'`, `'20rem'`). |
+
+## Colspan and rowspan
+
+Tables with **colspan** and **rowspan** are supported. The module sets explicit grid placement on each cell so thead, tbody, and tfoot stay aligned. Complex headers or merged cells in the body/foot work as expected.
+
+## Edge cases
+
+- **Empty tbody:** The layout is still applied; the tbody area is scrollable with no content.
+- **No thead or no tfoot:** Tables with only thead+tbody or tbody+tfoot are supported; grid rows adjust automatically.
+
+## Browser support
+
+Requires **CSS subgrid**. No fallback is provided in this module; for legacy browsers, consider a different approach or a separate fallback implementation.

package/modules/scrollableTable/css/scrollableTable.css

@@ -0,0 +1,60 @@
+/* APX Scrollable Table: scrollable tbody with fixed thead/tfoot and aligned columns (CSS Grid + subgrid) */
+
+.apx-scrollable-table {
+    display: grid;
+    grid-template-columns: repeat(var(--apx-scrollable-cols, 3), minmax(0, 1fr));
+    grid-template-rows: auto fit-content(var(--apx-scrollable-body-max-height, 200px)) auto;
+    width: 100%;
+}
+
+/* Table with no tfoot: thead + tbody only */
+.apx-scrollable-table:not(.apx-scrollable-table--has-tfoot) {
+    grid-template-rows: auto fit-content(var(--apx-scrollable-body-max-height, 200px));
+}
+
+/* Table with no thead: tbody + tfoot only */
+.apx-scrollable-table.apx-scrollable-table--no-thead {
+    grid-template-rows: fit-content(var(--apx-scrollable-body-max-height, 200px)) auto;
+}
+
+/* Table with neither thead nor tfoot: tbody only */
+.apx-scrollable-table.apx-scrollable-table--no-thead:not(.apx-scrollable-table--has-tfoot) {
+    grid-template-rows: fit-content(var(--apx-scrollable-body-max-height, 200px));
+}
+
+.apx-scrollable-table > thead,
+.apx-scrollable-table > tbody,
+.apx-scrollable-table > tfoot {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    grid-template-rows: repeat(var(--apx-scrollable-thead-rows, 1), auto);
+    min-height: 0;
+}
+
+.apx-scrollable-table > thead {
+    grid-template-rows: repeat(var(--apx-scrollable-thead-rows, 1), auto);
+}
+
+.apx-scrollable-table > tbody {
+    grid-template-rows: repeat(var(--apx-scrollable-tbody-rows, 1), auto);
+    overflow: auto;
+    /* Reserve space for the vertical scrollbar so it doesn't shrink content width and trigger a horizontal scrollbar */
+    scrollbar-gutter: stable;
+}
+
+.apx-scrollable-table > tfoot {
+    grid-template-rows: repeat(var(--apx-scrollable-tfoot-rows, 1), auto);
+}
+
+.apx-scrollable-table > thead > tr,
+.apx-scrollable-table > tbody > tr,
+.apx-scrollable-table > tfoot > tr {
+    display: contents;
+}
+
+.apx-scrollable-table th,
+.apx-scrollable-table td {
+    /* Grid placement set by JS (grid-row, grid-column) for colspan/rowspan */
+    min-width: 0;
+}