@appius-fr/apx 2.6.1 → 2.7.0

package/APX.mjs

@@ -1,5 +1,6 @@
 import augmentWithListen from './modules/listen/listen.mjs';
 import augmentWithTristate from './modules/tristate/tristate.mjs';
+import augmentWithScrollableTable from './modules/scrollableTable/scrollableTable.mjs';
 import dialog from './modules/dialog/dialog.mjs';
 import toast from './modules/toast/toast.mjs';
 import { loadCss } from './modules/common.mjs';
@@ -104,6 +105,7 @@ const APX = function (input, context = document) {
     };
     augmentWithListen(apx);
     augmentWithTristate(apx);
+    augmentWithScrollableTable(apx);
     augmentWithPack(apx);
     return apx;
 };

package/README.md

@@ -1,203 +1,207 @@
-# APX DOM Wrapper
-
-APX is a versatile DOM wrapper designed to simplify interactions with HTML elements. It provides a unified interface for working with various input types, including XPath, CSS selectors, individual HTMLElements, NodeLists, HTMLCollections, arrays of elements, jQuery objects, and even functions that return APX objects.
-
-## Core Library
-
-The main APX library is defined in [`APX.mjs`](./APX.mjs), which provides the core DOM wrapping functionality and integrates all modules.
-
-**Quick Start:**
-```javascript
-import APX from './APX.mjs';
-
-// Use APX to select and manipulate elements
-APX('.my-class').each((el) => console.log(el));
-```
-
-## Features
-
-- **XPath Support**: Easily select elements using XPath queries.
-- **CSS Selector Support**: Utilize CSS selectors for element selection.
-- **Enhanced Interactions**: Augmented with modules like `listen` for event handling and `tristate` for managing tristate logic.
-- **Utility Functions**: Includes tools like `loadCss`, `dialog`, and `toast` for extended functionality.
-- **jQuery Compatibility**: Seamlessly works with jQuery objects.
-- **Function Input**: Accepts functions returning an APX object as input.
-
-## Modules
-
-APX is enhanced with several modules, each adding specialized functionality. Each module has its own detailed documentation:
-
-### `listen`
-
-The `listen` module simplifies event handling for wrapped elements. It provides an intuitive way to attach and manage event listeners with support for event delegation, multiple callbacks, debouncing, and manual event triggering.
-
-**Documentation:** [`modules/listen/README.md`](./modules/listen/README.md)
-
-**Quick Example:**
-```javascript
-APX('.button').listen('click').do((event) => {
-    console.log('Button clicked!');
-});
-```
-
-### `tristate`
-
-The `tristate` module allows you to manage tristate logic (e.g., on/off/indeterminate) for HTML elements efficiently.
-
-**Documentation:** [`modules/tristate/tristate.mjs`](./modules/tristate/tristate.mjs)
-
-### `dialog`
-
-The `dialog` module provides utilities to create and manage modal dialogs with lifecycle management, button interactions, and flexible content loading.
-
-**Documentation:** [`modules/dialog/README.md`](./modules/dialog/README.md)
-
-Since 2.4.0, dialog content can be fetched via GET (default) or POST with optional payload and headers.
-
-```javascript
-// Example: POST fetch for dialog content (APX 2.4.0+)
-const myDialog = APX.dialog({
-    title: 'Submit and Load',
-    contentURI: '/api/dialog/content',
-    contentMethod: 'POST',
-    contentData: { foo: 'bar' }, // also supports FormData, URLSearchParams, string, Blob
-    contentHeaders: { 'X-Request-ID': '123' },
-    buttons: [
-        { key: 'ok', label: 'OK', closeOnClick: true },
-        { key: 'cancel', label: 'Cancel', closeOnClick: true }
-    ],
-    size: 'medium'
-});
-
-myDialog.open();
-```
-
-### `toast` (since 2.5.0)
-
-Minimal, framework‑agnostic toast notifications with auto‑loaded CSS and a small API. Exposed as `APX.toast`. Supports advanced positioning (sticky, relative, anchored), flow control, and container management.
-
-**Documentation:** [`modules/toast/README.md`](./modules/toast/README.md)
-
-**Quick Start:**
-```javascript
-// One‑liners on the default manager
-APX.toast.success('Saved!');
-APX.toast.warning('Heads up', { durationMs: 4000 });
-
-// Callable shorthand (equivalent to show)
-APX.toast({ message: 'Processing…', type: 'info', durationMs: 0 });
-
-// Configure defaults
-APX.toast.configure({ position: 'top-right', maxToasts: 4, dedupe: true });
-
-// Named managers (profiles)
-APX.toast.create('admin', { position: 'bottom-left' });
-APX.toast.use('admin').info('Admin ready');
-```
-
-**Demo pages** (work from file:// via standalone build):
-- `demo/index.html` (landing)
-- `demo/modules/toast/index.html` (basic and advanced examples with code viewer)
-
-### `tools` (since 2.6.0)
-
-The `tools` module provides utility functions for common web development tasks. Currently includes form handling utilities with more tools planned for future releases.
-
-**Documentation:** [`modules/tools/README.md`](./modules/tools/README.md)
-
-**Quick Start:**
-```javascript
-// Convert form to JSON
-const data = APX('form#myForm').pack();
-// or
-const data = APX.tools.packFormToJSON(document.querySelector('#myForm'));
-```
-
-**Sub-modules:**
-- **`form-packer`**: Convert HTML forms to JSON with support for nested objects, arrays, and complex structures.
-  - Documentation: [`modules/tools/form-packer/README.md`](./modules/tools/form-packer/README.md)
-
-**Demo page:**
-- `demo/modules/tools/index.html` (interactive form examples and validation)
-
-### Utilities
-
-- **`loadCss`**: Dynamically load CSS files into your document.
-
-Documentation: [`modules/common.mjs`](./modules/common.mjs)
-
-## Usage
-
-Here are some examples of how you can use APX:
-
-```javascript
-// Using XPath
-const apx1 = APX('//div[@class="example"]');
-
-// Using CSS selector
-const apx2 = APX('.example');
-
-// Using a single element
-const element = document.querySelector('.example');
-const apx3 = APX(element);
-
-// Using NodeList or HTMLCollection
-const nodeList = document.querySelectorAll('.example');
-const apx4 = APX(nodeList);
-
-// Using an array of elements
-const elements = [document.querySelector('.example1'), document.querySelector('.example2')];
-const apx5 = APX(elements);
-
-// Using a jQuery object
-const $example = $('.example');
-const apx6 = APX($example);
-
-// Using a function returning an APX object
-const apx7 = APX(() => APX('.example'));
-```
-
-## API
-
-### Core Functionality
-
-- **`APX(input, context = document)`**: The main function that creates an APX object. Accepts a wide variety of input types:
-  - `string`: XPath or CSS selectors.
-  - `HTMLElement`: Single DOM element.
-  - `NodeList`/`HTMLCollection`: A collection of DOM elements.
-  - `Array<HTMLElement>`: An array of DOM elements.
-  - `jQuery`: A jQuery object.
-  - `Function`: A function that returns an APX object.
-- **Methods on APX objects**:
-  - `.each(callback)`: Iterates over elements.
-  - `.get(index)`: Retrieves an element by index.
-  - `.all()`: Returns all wrapped elements.
-  - `.first()`: Returns the first wrapped element.
-
-### Utilities
-
-- **`APX.loadCss()`**: Dynamically load CSS files.
-- **`APX.dialog()`**: Manage and display dialogs. See [`modules/dialog/README.md`](./modules/dialog/README.md)
-- **`APX.toast`**: Toast notification system. See [`modules/toast/README.md`](./modules/toast/README.md)
-- **`APX.tools`**: Utility functions. See [`modules/tools/README.md`](./modules/tools/README.md)
-- **`APX.isAPXObject(obj)`**: Check if an object is an APX object.
-- **`APX.is_numeric(n)`**: Check if a value is numeric.
-
-## Installation
-
-To include APX in your project:
-
-1. Clone the repository or download the package.
-2. Import APX and its modules into your project:
-   ```javascript
-   import APX from './path-to-apx/apx.mjs';
-   ```
-
-## Contributing
-
-We welcome contributions! Please refer to the contribution guidelines in the repository.
-
-## License
-
-Author : Thibault SAELEN
-Copyright Appius SARL.
+# APX DOM Wrapper
+
+APX is a versatile DOM wrapper designed to simplify interactions with HTML elements. It provides a unified interface for working with various input types, including XPath, CSS selectors, individual HTMLElements, NodeLists, HTMLCollections, arrays of elements, jQuery objects, and even functions that return APX objects.
+
+## Core Library
+
+The main APX library is defined in [`APX.mjs`](./APX.mjs), which provides the core DOM wrapping functionality and integrates all modules.
+
+**Quick Start:**
+```javascript
+import APX from './APX.mjs';
+
+// Use APX to select and manipulate elements
+APX('.my-class').each((el) => console.log(el));
+```
+
+## Features
+
+- **XPath Support**: Easily select elements using XPath queries.
+- **CSS Selector Support**: Utilize CSS selectors for element selection.
+- **Enhanced Interactions**: Augmented with modules like `listen` for event handling and `tristate` for managing tristate logic.
+- **Utility Functions**: Includes tools like `loadCss`, `dialog`, and `toast` for extended functionality.
+- **jQuery Compatibility**: Seamlessly works with jQuery objects.
+- **Function Input**: Accepts functions returning an APX object as input.
+
+## Modules
+
+APX is enhanced with several modules, each adding specialized functionality. Each module has its own detailed documentation:
+
+### `listen`
+
+The `listen` module simplifies event handling for wrapped elements. It provides an intuitive way to attach and manage event listeners with support for event delegation, multiple callbacks, debouncing, and manual event triggering.
+
+**Documentation:** [`modules/listen/README.md`](./modules/listen/README.md)
+
+**Quick Example:**
+```javascript
+APX('.button').listen('click').do((event) => {
+    console.log('Button clicked!');
+});
+```
+
+### `tristate`
+
+The `tristate` module allows you to manage tristate logic (e.g., on/off/indeterminate) for HTML elements efficiently.
+
+**Documentation:** [`modules/tristate/README.md`](./modules/tristate/README.md)
+
+**Demo page:**
+- `demo/modules/tristate/index.html` (state preview and interactive cycle)
+
+### `dialog`
+
+The `dialog` module provides utilities to create and manage modal dialogs with lifecycle management, button interactions, and flexible content loading.
+
+**Documentation:** [`modules/dialog/README.md`](./modules/dialog/README.md)
+
+Since 2.4.0, dialog content can be fetched via GET (default) or POST with optional payload and headers.
+
+```javascript
+// Example: POST fetch for dialog content (APX 2.4.0+)
+const myDialog = APX.dialog({
+    title: 'Submit and Load',
+    contentURI: '/api/dialog/content',
+    contentMethod: 'POST',
+    contentData: { foo: 'bar' }, // also supports FormData, URLSearchParams, string, Blob
+    contentHeaders: { 'X-Request-ID': '123' },
+    buttons: [
+        { key: 'ok', label: 'OK', closeOnClick: true },
+        { key: 'cancel', label: 'Cancel', closeOnClick: true }
+    ],
+    size: 'medium'
+});
+
+myDialog.open();
+```
+
+### `toast` (since 2.5.0)
+
+Minimal, framework‑agnostic toast notifications with auto‑loaded CSS and a small API. Exposed as `APX.toast`. Supports advanced positioning (sticky, relative, anchored), flow control, and container management.
+
+**Documentation:** [`modules/toast/README.md`](./modules/toast/README.md)
+
+**Quick Start:**
+```javascript
+// One‑liners on the default manager
+APX.toast.success('Saved!');
+APX.toast.warning('Heads up', { durationMs: 4000 });
+
+// Callable shorthand (equivalent to show)
+APX.toast({ message: 'Processing…', type: 'info', durationMs: 0 });
+
+// Configure defaults
+APX.toast.configure({ position: 'top-right', maxToasts: 4, dedupe: true });
+
+// Named managers (profiles)
+APX.toast.create('admin', { position: 'bottom-left' });
+APX.toast.use('admin').info('Admin ready');
+```
+
+**Demo pages** (work from file:// via standalone build):
+- `demo/index.html` (landing)
+- `demo/modules/toast/index.html` (basic and advanced examples with code viewer)
+- `demo/modules/tristate/index.html` (state preview and interactive cycle)
+
+### `tools` (since 2.6.0)
+
+The `tools` module provides utility functions for common web development tasks. Currently includes form handling utilities with more tools planned for future releases.
+
+**Documentation:** [`modules/tools/README.md`](./modules/tools/README.md)
+
+**Quick Start:**
+```javascript
+// Convert form to JSON
+const data = APX('form#myForm').pack();
+// or
+const data = APX.tools.packFormToJSON(document.querySelector('#myForm'));
+```
+
+**Sub-modules:**
+- **`form-packer`**: Convert HTML forms to JSON with support for nested objects, arrays, and complex structures.
+  - Documentation: [`modules/tools/form-packer/README.md`](./modules/tools/form-packer/README.md)
+
+**Demo page:**
+- `demo/modules/tools/index.html` (interactive form examples and validation)
+
+### Utilities
+
+- **`loadCss`**: Dynamically load CSS files into your document.
+
+Documentation: [`modules/common.mjs`](./modules/common.mjs)
+
+## Usage
+
+Here are some examples of how you can use APX:
+
+```javascript
+// Using XPath
+const apx1 = APX('//div[@class="example"]');
+
+// Using CSS selector
+const apx2 = APX('.example');
+
+// Using a single element
+const element = document.querySelector('.example');
+const apx3 = APX(element);
+
+// Using NodeList or HTMLCollection
+const nodeList = document.querySelectorAll('.example');
+const apx4 = APX(nodeList);
+
+// Using an array of elements
+const elements = [document.querySelector('.example1'), document.querySelector('.example2')];
+const apx5 = APX(elements);
+
+// Using a jQuery object
+const $example = $('.example');
+const apx6 = APX($example);
+
+// Using a function returning an APX object
+const apx7 = APX(() => APX('.example'));
+```
+
+## API
+
+### Core Functionality
+
+- **`APX(input, context = document)`**: The main function that creates an APX object. Accepts a wide variety of input types:
+  - `string`: XPath or CSS selectors.
+  - `HTMLElement`: Single DOM element.
+  - `NodeList`/`HTMLCollection`: A collection of DOM elements.
+  - `Array<HTMLElement>`: An array of DOM elements.
+  - `jQuery`: A jQuery object.
+  - `Function`: A function that returns an APX object.
+- **Methods on APX objects**:
+  - `.each(callback)`: Iterates over elements.
+  - `.get(index)`: Retrieves an element by index.
+  - `.all()`: Returns all wrapped elements.
+  - `.first()`: Returns the first wrapped element.
+
+### Utilities
+
+- **`APX.loadCss()`**: Dynamically load CSS files.
+- **`APX.dialog()`**: Manage and display dialogs. See [`modules/dialog/README.md`](./modules/dialog/README.md)
+- **`APX.toast`**: Toast notification system. See [`modules/toast/README.md`](./modules/toast/README.md)
+- **`APX.tools`**: Utility functions. See [`modules/tools/README.md`](./modules/tools/README.md)
+- **`APX.isAPXObject(obj)`**: Check if an object is an APX object.
+- **`APX.is_numeric(n)`**: Check if a value is numeric.
+
+## Installation
+
+To include APX in your project:
+
+1. Clone the repository or download the package.
+2. Import APX and its modules into your project:
+   ```javascript
+   import APX from './path-to-apx/apx.mjs';
+   ```
+
+## Contributing
+
+We welcome contributions! Please refer to the contribution guidelines in the repository.
+
+## License
+
+Author : Thibault SAELEN
+Copyright Appius SARL.

package/dist/2ab50e700c8fbddb45e0.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <path
+    d="M8 8L24 24M24 8L8 24"
+    fill="none"
+    stroke="#000"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/2e967d8dd752e0bed703.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <path
+    d="M8 8L24 24M24 8L8 24"
+    fill="none"
+    stroke="#fff"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/5ddaeefe5dfbc8e09652.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="4" ry="4" fill="#000" />
+  </mask>
+  <rect width="32" height="32" fill="#cccccc" mask="url(#frame-cutout)" />
+</svg>

package/dist/6dc2907ba3bbb232601d.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="#fff"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/6e1e61dfca176a885b8d.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="#f00" />
+</svg>

package/dist/6f3a0a27a260bb2c221b.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <path
+    d="M8 16h16"
+    fill="none"
+    stroke="#fff"
+    stroke-width="3"
+    stroke-linecap="round"
+  />
+</svg>

package/dist/8b07a8bf719a38262b7d.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <mask id="check-cutout">
+    <rect width="32" height="32" fill="#fff" />
+    <path
+      fill="#000"
+      d="M5.313 17.587l7.039 6.839 13.831-13.439-2.636-2.561-10.929 10.62-4.442-4.317-2.862 2.858z"
+    />
+  </mask>
+  <rect width="32" height="32" fill="#0654ba" mask="url(#check-cutout)" />
+</svg>