@appius-fr/apx 2.6.1 → 2.7.0

package/modules/scrollableTable/scrollableTable.mjs

@@ -0,0 +1,198 @@
+import './css/scrollableTable.css';
+
+const DATA_KEY = '_apxScrollableTable';
+const CLASS_TABLE = 'apx-scrollable-table';
+
+const DEFAULT_MAX_HEIGHT = '200px';
+
+/**
+ * Get number of columns from the first row that has cells (sum of colspan).
+ * @param {HTMLTableSectionElement} section - thead, tbody, or tfoot
+ * @returns {number}
+ */
+function getColumnCountFromSection(section) {
+    const firstRow = section?.querySelector(':scope > tr');
+    if (!firstRow) return 0;
+    let cols = 0;
+    firstRow.querySelectorAll(':scope > th, :scope > td').forEach((cell) => {
+        cols += parseInt(cell.getAttribute('colspan'), 10) || 1;
+    });
+    return cols;
+}
+
+/**
+ * Get total column count for the table (from thead or tbody first row).
+ * @param {HTMLTableElement} table
+ * @returns {number}
+ */
+function getTableColumnCount(table) {
+    const thead = table.querySelector('thead');
+    const tbody = table.querySelector('tbody');
+    const countFromThead = thead ? getColumnCountFromSection(thead) : 0;
+    const countFromTbody = tbody ? getColumnCountFromSection(tbody) : 0;
+    return countFromThead || countFromTbody || 1;
+}
+
+/**
+ * Count direct tr children in a section.
+ * @param {HTMLTableSectionElement} section
+ * @returns {number}
+ */
+function getRowCount(section) {
+    if (!section) return 0;
+    return section.querySelectorAll(':scope > tr').length;
+}
+
+/**
+ * Build a 2D grid of occupied slots for a section (for rowspan/colspan placement).
+ * Place each cell in DOM order; return a list of { cell, row, col, colspan, rowspan }.
+ * @param {HTMLTableSectionElement} section
+ * @param {number} numRows
+ * @param {number} numCols
+ * @returns {{ cell: HTMLTableCellElement, row: number, col: number, colspan: number, rowspan: number }[]}
+ */
+function computeCellPlacements(section, numRows, numCols) {
+    if (!section || numRows === 0 || numCols === 0) return [];
+    const occupied = Array.from({ length: numRows }, () => Array(numCols).fill(false));
+    const placements = [];
+    const rows = section.querySelectorAll(':scope > tr');
+
+    for (let r = 0; r < rows.length; r++) {
+        const tr = rows[r];
+        const cells = tr.querySelectorAll(':scope > th, :scope > td');
+        for (const cell of cells) {
+            const colspan = Math.min(parseInt(cell.getAttribute('colspan'), 10) || 1, numCols);
+            const rowspan = Math.min(parseInt(cell.getAttribute('rowspan'), 10) || 1, numRows - r);
+            let col = 0;
+            while (col < numCols) {
+                let free = true;
+                for (let rr = r; rr < r + rowspan && free; rr++) {
+                    for (let cc = col; cc < col + colspan && free; cc++) {
+                        if (occupied[rr]?.[cc]) free = false;
+                    }
+                }
+                if (free) break;
+                col++;
+            }
+            if (col + colspan > numCols) continue;
+            for (let rr = r; rr < r + rowspan; rr++) {
+                for (let cc = col; cc < col + colspan; cc++) {
+                    if (occupied[rr]) occupied[rr][cc] = true;
+                }
+            }
+            placements.push({ cell, row: r, col, colspan, rowspan });
+        }
+    }
+    return placements;
+}
+
+/**
+ * Apply grid placement styles to a list of placements (1-based line numbers for CSS Grid).
+ */
+function applyPlacements(placements) {
+    placements.forEach(({ cell, row, col, colspan, rowspan }) => {
+        cell.style.gridRow = `${row + 1} / span ${rowspan}`;
+        cell.style.gridColumn = `${col + 1} / span ${colspan}`;
+    });
+}
+
+/**
+ * Clear grid placement styles from all th/td in a table (for refresh).
+ * @param {HTMLTableElement} table
+ */
+function clearPlacements(table) {
+    table.querySelectorAll('th, td').forEach((cell) => {
+        cell.style.gridRow = '';
+        cell.style.gridColumn = '';
+    });
+}
+
+/**
+ * Normalize maxHeight option to a CSS length string.
+ * @param {number|string} value
+ * @returns {string}
+ */
+function normalizeMaxHeight(value) {
+    if (value == null) return DEFAULT_MAX_HEIGHT;
+    if (typeof value === 'number') return `${value}px`;
+    return String(value);
+}
+
+/**
+ * Apply scrollable table layout to a single table.
+ * @param {HTMLTableElement} table
+ * @param {{ maxHeight?: number|string }} options
+ */
+function applyScrollableTable(table, options) {
+    const thead = table.querySelector('thead');
+    const tbody = table.querySelector('tbody');
+    const tfoot = table.querySelector('tfoot');
+
+    const numCols = getTableColumnCount(table);
+    if (numCols === 0) return;
+
+    const theadRows = getRowCount(thead);
+    const tbodyRows = getRowCount(tbody);
+    const tfootRows = getRowCount(tfoot);
+
+    table.style.setProperty('--apx-scrollable-cols', String(numCols));
+    table.style.setProperty('--apx-scrollable-thead-rows', String(Math.max(1, theadRows)));
+    table.style.setProperty('--apx-scrollable-tbody-rows', String(Math.max(1, tbodyRows)));
+    table.style.setProperty('--apx-scrollable-tfoot-rows', String(Math.max(1, tfootRows)));
+    table.style.setProperty('--apx-scrollable-body-max-height', normalizeMaxHeight(options.maxHeight));
+
+    table.classList.add(CLASS_TABLE);
+    table.classList.toggle('apx-scrollable-table--has-tfoot', !!(tfoot && tfootRows > 0));
+    table.classList.toggle('apx-scrollable-table--no-thead', !(thead && theadRows > 0));
+
+    clearPlacements(table);
+
+    const sections = [
+        { section: thead, rows: Math.max(1, theadRows) },
+        { section: tbody, rows: Math.max(1, tbodyRows) },
+        { section: tfoot, rows: Math.max(1, tfootRows) }
+    ];
+    sections.forEach(({ section, rows }) => {
+        if (!section) return;
+        const placements = computeCellPlacements(section, rows, numCols);
+        applyPlacements(placements);
+    });
+}
+
+/**
+ * Augments the APX object with scrollableTable(options | 'refresh').
+ * Makes the tbody of a table scrollable while keeping thead/tfoot fixed and columns aligned (CSS Grid + subgrid).
+ *
+ * @param {Object} apx - The APX object to augment.
+ * @example
+ * APX('table.data-grid').scrollableTable({ maxHeight: 300 });
+ * APX('table.data-grid').scrollableTable('refresh');
+ */
+export default function augmentWithScrollableTable(apx) {
+    apx.scrollableTable = function (optionsOrAction) {
+        const isRefresh = optionsOrAction === 'refresh';
+        const options = isRefresh ? null : (optionsOrAction && typeof optionsOrAction === 'object' ? optionsOrAction : {});
+
+        apx.elements.forEach((element) => {
+            if (element.tagName !== 'TABLE') return;
+            const table = /** @type {HTMLTableElement} */ (element);
+
+            const ref = table[DATA_KEY];
+            if (ref) {
+                if (isRefresh) {
+                    applyScrollableTable(table, ref.options);
+                } else if (options && Object.keys(options).length > 0) {
+                    ref.options = { ...ref.options, ...options };
+                    applyScrollableTable(table, ref.options);
+                }
+                return;
+            }
+            if (isRefresh) return;
+
+            applyScrollableTable(table, options);
+            table[DATA_KEY] = { options: { ...options } };
+        });
+
+        return apx;
+    };
+}

package/modules/toast/README.md

@@ -1,153 +1,186 @@
-# APX Toast
-
-A tiny, framework‑agnostic toast library for APX. Minimal CSS, ESM‑first, no globals. DOM is only touched when you actually show a toast (SSR‑safe to import).
-
-## Install / Import
-
-Just import `APX` — the toast CSS is automatically loaded by `modules/toast/toast.mjs`.
-
-```html
-<script type="module">
-  import APX from './APX.mjs';
-  // CSS is auto‑imported; no <link> tag required.
-  // ...
-  APX.toast.success('Ready!');
- </script>
-```
-
-## Quick start
-
-```js
-// Default manager (lazy)
-APX.toast.success('Saved!');
-APX.toast.warning('Heads up', { durationMs: 4000 });
-APX.toast.danger('Something failed', { durationMs: 0 }); // sticky
-
-// Custom toast
-const ref = APX.toast.show({ message: 'Processing…', type: 'info', durationMs: 0 });
-// Callable shorthand for show:
-APX.toast({ message: 'Hello', type: 'success' });
-ref.update({ message: 'Done', type: 'success', durationMs: 1800 });
-ref.whenClosed().then(() => console.log('closed'));
-
-// Configure defaults at runtime
-APX.toast.configure({ position: 'top-right', maxToasts: 4, dedupe: true });
-```
-
-### Named managers (profiles)
-
-```js
-// Register a named manager
-APX.toast.create('admin', { position: 'bottom-left', ariaLive: 'polite' });
-
-// Use it later
-APX.toast.use('admin').info('Admin ready');
-APX.toast.use('admin').closeAll();
-```
-
-## API overview
-
-- Top‑level (default manager):
-  - `APX.toast.show(opts)`
-  - `APX.toast.info|success|warning|danger(message, opts?)`
-  - `APX.toast.configure(config)`
-  - `APX.toast.closeAll(reason?)`
-  - `APX.toast.create(name, config)` → registers named manager
-  - `APX.toast.use(name)` → returns named manager
-
-- Named manager instance (same surface):
-  - `.show(opts)`, `.info|success|warning|danger(message, opts?)`
-  - `.configure(config)`, `.closeAll(reason?)`
-
-## Options and types
-
-```js
-// ToastConfig (global/manager defaults)
-{
-  position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left', // default 'bottom-right'
-  maxToasts: number,                // default 5
-  defaultDurationMs: number,       // default 5000
-  zIndex: number,                   // default 11000
-  ariaLive: 'polite'|'assertive'|'off', // default 'polite'
-  gap: number,                      // default 8
-  dedupe: boolean,                 // default false
-  containerClass: string,           // extra class on container
-  offset: number,                  // px offset from screen edges
-  progress: false | true | { enable, position?, pauseButton? }  // default false; pauseButton default false (v2.6.1)
-}
-
-// ToastOptions (per toast)
-{
-  message: string | Node,
-  type: 'info'|'success'|'warning'|'danger', // default 'info'
-  durationMs: number,               // default from config; 0 = sticky
-  dismissible: boolean,             // default true
-  id: string,                       // stable id for dedupe updates
-  className: string,                // extra classes on the toast element
-  progress: true | { enable: boolean, position?: 'top'|'bottom', pauseButton?: boolean },  // v2.6.1; pauseButton default false
-  onClick: (ref, ev) => void,
-  onClose: (ref, reason) => void    // reason: 'timeout'|'close'|'api'|'overflow'
-}
-```
-
-## Theming (minimal CSS)
-
-Override CSS variables to theme without touching markup:
-
-```css
-:root {
-  --apx-toast-gap: 10px;
-  --apx-toast-min-width: 280px;
-  --apx-toast-radius: 8px;
-  --apx-toast-success-bg: #16a34a;
-  --apx-toast-success-fg: #fff;
-}
-```
-
-Class structure (BEM‑like):
-- Container: `APX-toast-container APX-toast-container--{corner}`
-- Toast: `APX-toast APX-toast--{type}`
-- Children: `APX-toast__content`, optional `APX-toast__close`
-- Progress (v2.6.1): `APX-toast__progress`, `APX-toast__progress-track`, `APX-toast__progress-bar`, optional `APX-toast__progress-pause`
-- Animations: `APX-toast--enter/--enter-active`, `APX-toast--exit/--exit-active`
-
-## Progress bar (v2.6.1)
-
-Optional visual countdown for toasts with a duration. Bar shows time remaining (100% → 0%); sync with timer and hover pause.
-
-```js
-// Bar on top (default), no pause button by default
-APX.toast.show({ message: 'Saving…', type: 'info', progress: true });
-
-// Bar with pause/resume button
-APX.toast.show({ message: 'Pausable', type: 'info', progress: { enable: true, position: 'top', pauseButton: true } });
-
-// Bar at bottom
-APX.toast.show({ message: 'Done', type: 'success', progress: { enable: true, position: 'bottom' } });
-
-// Default progress for all toasts from a manager
-APX.toast.configure({ progress: true });
-```
-
-- `progress: true` → bar at top, no pause button.
-- `progress: { enable, position: 'top'|'bottom', pauseButton?: boolean }` — `pauseButton` defaults to `false`; set `pauseButton: true` to show the round pause/resume button on the toast corner.
-- No bar if `durationMs === 0` (sticky). Extra spacing is applied when the button is present so stacked toasts do not overlap.
-
-## Behavior
-
-- Lazy container creation (first `show`).
-- `maxToasts` enforced; oldest removed with reason `'overflow'`.
-- Hover pauses timer; resumes on mouse leave (unless user clicked pause).
-- `durationMs = 0` makes the toast sticky (no progress bar).
-- If `dedupe: true` and `id` matches an open toast, it updates instead of creating a new one.
-- With `progress`, a bar and optional pause/resume button show; button toggles pause (same as hover).
-
-## Accessibility & SSR
-
-- Container uses `aria-live` (configurable).
-- Each toast has `role="status"`.
-- ESM only; no DOM access at import time. Safe to import in SSR; DOM is touched only when showing toasts in the browser.
-
-## License
-
-Copyright Appius.
+# APX Toast
+
+A tiny, framework‑agnostic toast library for APX. Minimal CSS, ESM‑first, no globals. DOM is only touched when you actually show a toast (SSR‑safe to import).
+
+## Install / Import
+
+Just import `APX` — the toast CSS is automatically loaded by `modules/toast/toast.mjs`.
+
+```html
+<script type="module">
+  import APX from './APX.mjs';
+  // CSS is auto‑imported; no <link> tag required.
+  // ...
+  APX.toast.success('Ready!');
+ </script>
+```
+
+## Quick start
+
+```js
+// Default manager (lazy)
+APX.toast.success('Saved!');
+APX.toast.warning('Heads up', { durationMs: 4000 });
+APX.toast.danger('Something failed', { durationMs: 0 }); // sticky
+
+// Custom toast
+const ref = APX.toast.show({ message: 'Processing…', type: 'info', durationMs: 0 });
+// Callable shorthand for show:
+APX.toast({ message: 'Hello', type: 'success' });
+ref.update({ message: 'Done', type: 'success', durationMs: 1800 });
+ref.whenClosed().then(() => console.log('closed'));
+
+// Configure defaults at runtime
+APX.toast.configure({ position: 'top-right', maxToasts: 4, dedupe: true });
+```
+
+### Named managers (profiles)
+
+```js
+// Register a named manager
+APX.toast.create('admin', { position: 'bottom-left', ariaLive: 'polite' });
+
+// Use it later
+APX.toast.use('admin').info('Admin ready');
+APX.toast.use('admin').closeAll();
+```
+
+## API overview
+
+- Top‑level (default manager):
+  - `APX.toast(opts)` — callable shorthand for `show(opts)`
+  - `APX.toast.show(opts)`
+  - `APX.toast.info|success|warning|danger(message, opts?)`
+  - `APX.toast.configure(config)`
+  - `APX.toast.closeAll(reason?)` — `reason`: `'api'` | `'overflow'`
+  - `APX.toast.getOpenToasts()` — returns `ToastRef[]`
+  - `APX.toast.create(name, config)` — register named manager; or `create(config)` to get a new manager without registering
+  - `APX.toast.use(name)` — returns named manager or `null`
+
+- Named manager instance (same surface):
+  - `.show(opts)`, `.info|success|warning|danger(message, opts?)`
+  - `.configure(config)`, `.closeAll(reason?)`, `.getOpenToasts()`
+
+- **ToastRef** (returned by `show` / helpers):
+  - `ref.id`, `ref.el` (HTMLElement)
+  - `ref.close(reason?)` — `reason`: `'api'` | `'close'`
+  - `ref.update(partial)` — merge options (message, type, durationMs, progress, className, etc.)
+  - `ref.whenClosed()` — `Promise<void>` when toast is removed
+  - `ref.on('close'|'click', handler)` — returns unsubscribe function
+  - `ref.off('close'|'click', handler)`
+
+## Options and types
+
+```js
+// ToastConfig (global/manager defaults)
+{
+  position: Position,               // default 'bottom-right' (string or object, see Position below)
+  flow: 'up'|'down'|'auto',         // stacking direction; 'auto' from position (default 'auto')
+  maxToasts: number,                // default 5
+  defaultDurationMs: number,        // default 5000
+  zIndex: number,                  // default 11000
+  ariaLive: 'polite'|'assertive'|'off', // default 'polite'
+  gap: number,                      // default 8
+  dedupe: boolean,                  // default false
+  containerClass: string,           // extra class on container
+  offset: number,                  // px offset from screen edges (string positions only)
+  id: string,                      // default id for toasts when not provided per-call
+  progress: false | true | { enable, position?, pauseButton? }  // default false; pauseButton default false
+}
+
+// Position — string or object
+// String: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+// Object:
+//   - type 'sticky': fixed viewport, use x / y (e.g. '10px', '-20px' = from right/bottom)
+//   - type 'relative': relative to element; x, y offset; requires element
+//   - type 'anchored': outside element; placement 'top'|'right'|'bottom'|'left' (or 'above'|'below'|'before'|'after'); gap; requires element
+//   - useNativeCSS: true — for relative/anchored, render container inside the element with CSS (no fixed overlay)
+
+// ToastOptions (per toast)
+{
+  message: string | Node,
+  type: 'info'|'success'|'warning'|'danger', // default 'info'
+  durationMs: number,               // default from config; 0 = sticky
+  dismissible: boolean,             // default true
+  id: string,                       // stable id for dedupe updates
+  className: string,                // extra classes on the toast element
+  position: Position,               // override container position for this toast
+  flow: 'up'|'down'|'auto',        // override stacking direction for this toast
+  progress: true | { enable: boolean, position?: 'top'|'bottom', pauseButton?: boolean },  // pauseButton default false
+  onClick: (ref, ev) => void,
+  onClose: (ref, reason) => void    // reason: 'timeout'|'close'|'api'|'overflow'
+}
+```
+
+## Position (advanced)
+
+Besides the four corners (`'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`), position can be an object:
+
+- **sticky** (or omit type and set `x`/`y`): fixed in viewport. Use `x`, `y` as CSS values; prefix with `-` for right/bottom (e.g. `y: '-20px'`).
+- **relative**: fixed overlay positioned relative to an element. Requires `element` (HTMLElement); `x`, `y` are offsets (px/em). Container follows scroll/resize.
+- **anchored**: container placed outside the element. Requires `element` and `placement` (`'top'|'right'|'bottom'|'left'` or synonyms `'above'|'below'|'before'|'after'`). Optional `gap` (e.g. `'1em'`).
+- **useNativeCSS**: when `true` with relative/anchored, the toast container is rendered inside the target element with `position: absolute` (no fixed overlay). The target gets `position: relative` while toasts exist.
+
+`flow` (`'up'|'down'|'auto'`) controls stacking: `'auto'` is derived from position (e.g. top → up, bottom → down).
+
+## Theming (minimal CSS)
+
+Override CSS variables to theme without touching markup:
+
+```css
+:root {
+  --apx-toast-gap: 10px;
+  --apx-toast-min-width: 280px;
+  --apx-toast-radius: 8px;
+  --apx-toast-success-bg: #16a34a;
+  --apx-toast-success-fg: #fff;
+}
+```
+
+Class structure (BEM‑like):
+- Container: `APX-toast-container APX-toast-container--{corner}`
+- Toast: `APX-toast APX-toast--{type}`
+- Children: `APX-toast__content`, optional `APX-toast__close`
+- Progress (v2.6.1): `APX-toast__progress`, `APX-toast__progress-track`, `APX-toast__progress-bar`, optional `APX-toast__progress-pause`
+- Animations: `APX-toast--enter/--enter-active`, `APX-toast--exit/--exit-active`
+
+## Progress bar (v2.6.1)
+
+Optional visual countdown for toasts with a duration. Bar shows time remaining (100% → 0%); sync with timer and hover pause.
+
+```js
+// Bar on top (default), no pause button by default
+APX.toast.show({ message: 'Saving…', type: 'info', progress: true });
+
+// Bar with pause/resume button
+APX.toast.show({ message: 'Pausable', type: 'info', progress: { enable: true, position: 'top', pauseButton: true } });
+
+// Bar at bottom
+APX.toast.show({ message: 'Done', type: 'success', progress: { enable: true, position: 'bottom' } });
+
+// Default progress for all toasts from a manager
+APX.toast.configure({ progress: true });
+```
+
+- `progress: true` → bar at top, no pause button.
+- `progress: { enable, position: 'top'|'bottom', pauseButton?: boolean }` — `pauseButton` defaults to `false`; set `pauseButton: true` to show the round pause/resume button on the toast corner.
+- No bar if `durationMs === 0` (sticky). Extra spacing is applied when the button is present so stacked toasts do not overlap.
+
+## Behavior
+
+- Lazy container creation (first `show`).
+- `maxToasts` enforced; oldest removed with reason `'overflow'`.
+- Hover pauses timer; resumes on mouse leave (unless user clicked pause).
+- `durationMs = 0` makes the toast sticky (no progress bar).
+- If `dedupe: true` and `id` matches an open toast, it updates instead of creating a new one.
+- With `progress`, a bar and optional pause/resume button show; button toggles pause (same as hover).
+
+## Accessibility & SSR
+
+- Container uses `aria-live` (configurable).
+- Each toast has `role="status"`.
+- ESM only; no DOM access at import time. Safe to import in SSR; DOM is touched only when showing toasts in the browser.
+
+## License
+
+Copyright Appius.

package/modules/tools/form-packer/README.md

@@ -123,12 +123,14 @@ The module intelligently handles mixed structures (objects with both numeric and
 
 ## API
 
-### `APX.tools.packFormToJSON(form)`
+### `APX.tools.packFormToJSON(form, options?)`
 
 Converts an HTML form element into a JSON object.
 
 **Parameters:**
 - `form` (HTMLFormElement): The form element to convert
+- `options` (Object, optional):
+  - `numericKeysAlwaysArray` (boolean, default `false`): If `true`, every numeric bracket key (e.g. `[26]`) is treated as an array index (pre-2.6.2 behaviour). If `false`, the heuristic applies: array only when indices are dense 0,1,2,…,n; otherwise object with string keys.
 
 **Returns:** (Object) The JSON object representation of the form data
 
@@ -137,30 +139,26 @@ Converts an HTML form element into a JSON object.
 **Example:**
 ```javascript
 const form = document.querySelector('#myForm');
-try {
-    const data = APX.tools.packFormToJSON(form);
-    console.log(data);
-} catch (error) {
-    console.error('Error:', error.message);
-}
+const data = APX.tools.packFormToJSON(form);
+// Legacy: always use arrays for numeric keys
+const dataLegacy = APX.tools.packFormToJSON(form, { numericKeysAlwaysArray: true });
 ```
 
-### `APX('form').pack()`
+### `APX('form').pack(options?)`
 
 Converts the first selected form element into a JSON object. This is a chainable method on APX objects.
 
+**Parameters:**
+- `options` (Object, optional): Same as the second argument of `packFormToJSON` (e.g. `{ numericKeysAlwaysArray: true }`).
+
 **Returns:** (Object) The JSON object representation of the form data
 
 **Throws:** (Error) If no element is found or the first element is not a form
 
 **Example:**
 ```javascript
-try {
-    const data = APX('form#myForm').pack();
-    console.log(data);
-} catch (error) {
-    console.error('Error:', error.message);
-}
+const data = APX('form#myForm').pack();
+const dataLegacy = APX('form#myForm').pack({ numericKeysAlwaysArray: true });
 ```
 
 ---

package/modules/tools/form-packer/augment-apx.mjs

@@ -8,12 +8,14 @@ import { packFormToJSON } from './packToJson.mjs';
 export default function (apx) {
     /**
      * Convertit le premier formulaire sélectionné en objet JSON
+     * @param {Object} [options] - Options passées à packFormToJSON (ex. { numericKeysAlwaysArray: true })
      * @returns {Object} L'objet JSON résultant
      * @throws {Error} Si aucun formulaire n'est trouvé ou si le premier élément n'est pas un formulaire
      * @example
      * const data = APX('form.myformclass').pack();
+     * const dataLegacy = APX('form').pack({ numericKeysAlwaysArray: true });
      */
-    apx.pack = function () {
+    apx.pack = function (options) {
         const firstElement = this.first();
         if (!firstElement) {
             throw new Error('No element found');
@@ -21,7 +23,7 @@ export default function (apx) {
         if (firstElement.tagName !== 'FORM') {
             throw new Error('Element is not a form');
         }
-        return packFormToJSON(firstElement);
+        return packFormToJSON(firstElement, options);
     };
     
     return apx;