@massimo-cassandro/minimo 1.33.0 → 1.33.2

package/src/web-components/json-table/src/pagination.js

@@ -0,0 +1,253 @@
+/*! minimo - json-table: pagination */
+
+import * as styles from '../json-table-component.module.css';
+import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';
+import { classnames } from '../../../utilities/classnames.js';
+import { iconContent } from './icons.js';
+
+/** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
+/** @typedef {import('./main-builder.js').JsonTableElements} JsonTableElements */
+
+/**
+ * Number of pages needed to show `count` rows, `perPage` per page (at least 1).
+ * `perPage` <= 0 means no pagination: a single page.
+ *
+ * @param {number} count - Number of rows
+ * @param {number} perPage - Rows per page
+ * @returns {number}
+ *
+ * @example
+ * calcTotPages(101, 25); // → 5
+ * calcTotPages(0, 25);   // → 1
+ * calcTotPages(101, 0);  // → 1
+ */
+export function calcTotPages(count, perPage) {
+  if (!(perPage > 0)) {
+    return 1;
+  }
+  return Math.max(1, Math.ceil(count / perPage));
+}
+
+
+/**
+ * Builds the list of page numbers to show in the navigation: the current page with `delta`
+ * pages on each side (the window is widened near the edges so that it keeps a constant size),
+ * plus the first and the last page; `null` marks a gap (ellipsis). When the gap would hide a
+ * single page, that page is shown instead of the ellipsis.
+ *
+ * @param {number} current - Current page (1-based)
+ * @param {number} totPages - Total number of pages
+ * @param {number} [delta=2] - Pages on each side of the current one (default: 2)
+ * @returns {Array<number|null>}
+ *
+ * @example
+ * pageList(1, 3);       // → [1, 2, 3]
+ * pageList(1, 10);      // → [1, 2, 3, 4, 5, null, 10]
+ * pageList(6, 12);      // → [1, null, 4, 5, 6, 7, 8, null, 12]
+ * pageList(5, 10);      // → [1, 2, 3, 4, 5, 6, 7, null, 10]  (page 2 shown instead of an ellipsis hiding it alone)
+ * pageList(10, 10);     // → [1, null, 6, 7, 8, 9, 10]
+ * pageList(4, 10, 1);   // → [1, 2, 3, 4, 5, null, 10]
+ */
+export function pageList(current, totPages, delta = 2) {
+
+  const side = Math.max(0, Math.floor(delta));
+  const width = side * 2 + 1;
+
+  if (totPages <= width + 2) {
+    return Array.from({ length: totPages }, (_, i) => i + 1);
+  }
+
+  let min = Math.max(1, current - side);
+  let max = Math.min(totPages, current + side);
+
+  // keep the window size constant near the edges
+  while (max - min + 1 < width) {
+    if (min > 1) {
+      min--;
+    } else if (max < totPages) {
+      max++;
+    } else {
+      break;
+    }
+  }
+
+  /** @type {Array<number|null>} */
+  const pages = Array.from({ length: max - min + 1 }, (_, i) => min + i);
+
+  if (min === 3) {
+    pages.unshift(1, 2);
+  } else if (min > 3) {
+    pages.unshift(1, null);
+  } else if (min === 2) {
+    pages.unshift(1);
+  }
+
+  if (max === totPages - 2) {
+    pages.push(totPages - 1, totPages);
+  } else if (max < totPages - 2) {
+    pages.push(null, totPages);
+  } else if (max === totPages - 1) {
+    pages.push(totPages);
+  }
+
+  return pages;
+}
+
+
+/**
+ * Replaces the `{page}` placeholder of a pagination label.
+ * @param {string|undefined} label
+ * @param {number} page
+ * @param {string} locale
+ * @returns {string}
+ */
+function pageLabel(label, page, locale) {
+  return String(label ?? '').replace(/\{page\}/g, page.toLocaleString(locale));
+}
+
+
+/**
+ * domBuilder item of the pagination `<nav>` (template slot `pagination`), rendered only when
+ * `params.perPage` is > 0. The `<nav>` is stored in `elements.pagination` and gets a delegated
+ * `click` listener on its buttons, which calls `jt.goToPage()`. The content (page list) is
+ * rendered by `renderPagination()` and the whole `<nav>` is hidden when there is a single page.
+ *
+ * Generated structure (see `renderPagination`):
+ * ```
+ * nav.pagination[classes.pagination][aria-label=labels.paginationAriaLabel]
+ *   ul.paginationList
+ *     li.paginationItem > button.paginationBtn[classes.paginationBtn][data-page=prev][aria-label][title] > icon
+ *     li.paginationItem > button.paginationBtn[data-page=1][aria-label="Vai a pagina 1"] 1
+ *     li.paginationItem > button.paginationBtn[data-page=2][aria-current=page] 2      ← current page
+ *     li.paginationItem > span.paginationEllipsis …
+ *     li.paginationItem > button.paginationBtn[data-page=next] > icon
+ * ```
+ *
+ * @param {JsonTable} jt - The component instance
+ * @param {JsonTableElements} elements - Object collecting the generated elements (mutated)
+ * @returns {DomBuilderItem}
+ *
+ * @example
+ * domBuilder([paginationPart(jt, elements)], host);
+ * elements.pagination; // → HTMLElement (nav), when params.perPage > 0
+ */
+export function paginationPart(jt, elements) {
+
+  const { params } = jt;
+
+  return {
+    tag: 'nav',
+    condition: params.perPage > 0,
+    className: classnames(styles.pagination, params.classes.pagination),
+    attrs: { 'aria-label': params.labels.paginationAriaLabel, hidden: '' },
+    callback: el => {
+      const nav = /** @type {HTMLElement} */ (el);
+      elements.pagination = nav;
+
+      nav.addEventListener('click', e => {
+        const btn = /** @type {HTMLElement|null} */ (
+          /** @type {HTMLElement} */ (e.target).closest('button[data-page]')
+        );
+        if (!btn || btn.hasAttribute('disabled') || btn.getAttribute('aria-current') === 'page') {
+          return;
+        }
+        const target = btn.dataset.page;
+        const { page } = jt.state;
+        const requested = target === 'prev' ? page - 1 : (target === 'next' ? page + 1 : Number(target));
+        jt.goToPage(requested, target);
+      });
+    }
+  };
+}
+
+
+/**
+ * Renders the page list inside `elements.pagination` from the current state (`page`, `totPages`),
+ * replacing the previous content; the `<nav>` is hidden when there is a single page.
+ *
+ * When `focusTarget` is given (the `data-page` of the button that triggered the change:
+ * `'prev'`, `'next'` or a page number) the focus is moved to the corresponding new button, or
+ * to the current page button when that one is no longer available, so that keyboard users do
+ * not lose their position.
+ *
+ * @param {JsonTable} jt - The component instance
+ * @param {string|null} [focusTarget=null] - `data-page` of the button to focus after the rendering (default: null)
+ * @returns {void}
+ *
+ * @example
+ * renderPagination(jt);         // after `jt.state` has been updated
+ * renderPagination(jt, 'next'); // same, moving the focus to the "next" button
+ */
+export function renderPagination(jt, focusTarget = null) {
+
+  const { params, elements, state } = jt;
+  const nav = elements.pagination;
+
+  if (!nav) {
+    return;
+  }
+
+  if (state.totPages <= 1) {
+    nav.hidden = true;
+    nav.replaceChildren();
+    return;
+  }
+
+  nav.hidden = false;
+
+  const btnClass = classnames(styles.paginationBtn, params.classes.paginationBtn);
+  const { labels, locale } = params;
+
+  /** @type {(target: string, label: string, icon: import('./defaults.js').IconDef, disabled: boolean) => DomBuilderItem} */
+  const arrowBtn = (target, label, icon, disabled) => ({
+    tag: 'li',
+    className: styles.paginationItem,
+    children: [
+      {
+        tag: 'button',
+        className: classnames(btnClass, styles.paginationArrow),
+        attrs: { type: 'button', 'data-page': target, 'aria-label': label, title: label, disabled: disabled ? '' : null },
+        content: iconContent(icon)
+      }
+    ]
+  });
+
+  domBuilder([
+    {
+      tag: 'ul',
+      className: styles.paginationList,
+      children: [
+        arrowBtn('prev', labels.prevPage ?? '', params.paginationPrevIcon, state.page <= 1),
+
+        ...pageList(state.page, state.totPages, params.paginationDelta).map(page => ({
+          tag: 'li',
+          className: styles.paginationItem,
+          children: [
+            page === null
+              ? { tag: 'span', className: styles.paginationEllipsis, attrs: { 'aria-hidden': 'true' }, content: '…' }
+              : {
+                tag: 'button',
+                className: btnClass,
+                attrs: {
+                  type: 'button',
+                  'data-page': page,
+                  'aria-current': page === state.page ? 'page' : null,
+                  'aria-label': pageLabel(page === state.page ? labels.currentPage : labels.pageTitle, page, locale),
+                  title: pageLabel(page === state.page ? labels.currentPage : labels.pageTitle, page, locale)
+                },
+                content: page.toLocaleString(locale)
+              }
+          ]
+        })),
+
+        arrowBtn('next', labels.nextPage ?? '', params.paginationNextIcon, state.page >= state.totPages)
+      ]
+    }
+  ], nav, { emptyParent: true });
+
+  if (focusTarget != null) {
+    const wanted = /** @type {HTMLButtonElement|null} */ (nav.querySelector(`button[data-page="${focusTarget}"]:not([disabled])`));
+    const current = /** @type {HTMLButtonElement|null} */ (nav.querySelector('button[aria-current="page"]'));
+    (wanted ?? current)?.focus();
+  }
+}

package/src/web-components/json-table/src/parse-cols.js

@@ -0,0 +1,113 @@
+/*! minimo - json-table: columns parsing */
+
+/** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
+/** @typedef {import('./defaults.js').ColDefinition} ColDefinition */
+/** @typedef {import('./defaults.js').DataTypeDefinition} DataTypeDefinition */
+
+/**
+ * Column definition after parsing: every property has a value, `condition` is resolved to a
+ * boolean, `headerClass`/`cellClass` are the final class strings and `_type` is the data type object.
+ * @typedef {Required<Omit<ColDefinition, 'type'|'condition'|'sortValue'|'searchValue'>> & {
+ *   condition: boolean,
+ *   sortValue: *,
+ *   searchValue: *,
+ *   _type: DataTypeDefinition
+ * }} ParsedCol
+ */
+
+/**
+ * Column defaults.
+ * @type {Omit<Required<ColDefinition>, 'type'|'sortValue'|'searchValue'> & { sortValue: *, searchValue: * }}
+ */
+export const colDefaults = {
+  key: '',
+  title: null,
+  dataType: 'string',
+  render: null,
+  tfootRender: null,
+  rowHeading: false,
+  searchable: true,
+  sortable: true,
+  sortValue: undefined,
+  searchValue: undefined,
+  condition: true,
+  headerClass: null,
+  cellClass: null
+};
+
+
+/**
+ * Normalizes the `cols` param: applies the column defaults and the data type `colDefaults`,
+ * resolves the `type`/`dataType` alias, the `condition` and the `headerClass`/`cellClass`
+ * fallbacks, and drops the columns whose `condition` is false.
+ *
+ * `cols` is required: an empty or missing definition throws.
+ *
+ * Merge order (lowest first): `colDefaults` ← data type `colDefaults` ← column definition.
+ * Class resolution: `headerClass` = column `headerClass` ?? column `cellClass` ?? type `headerClass`;
+ * `cellClass` = column `cellClass` ?? column `headerClass` ?? type `cellClass`.
+ *
+ * @param {ColDefinition[]|null|undefined} cols - Columns definition (`params.cols`)
+ * @param {Object<string, DataTypeDefinition>} dataTypes - Data types map (see `buildDataTypes`)
+ * @param {JsonTableParams} params - Resolved params (passed to `condition` functions)
+ * @returns {ParsedCol[]} Visible columns only
+ * @throws {Error} On missing/empty `cols`, missing `key` or unknown data type
+ *
+ * @example
+ * parseCols([
+ *   { key: 'id', dataType: 'id' },                       // title: 'id' (default: key)
+ *   { key: 'name', title: 'Nome', cellClass: 'fw-bold' }, // headerClass: 'fw-bold' (default: cellClass)
+ *   { key: 'amount', type: 'euro', tfootRender: '@sum' }, // `type` alias of `dataType`
+ *   { key: 'notes', condition: false }                     // dropped
+ * ], dataTypes, params);
+ */
+export function parseCols(cols, dataTypes, params) {
+
+  if (!Array.isArray(cols) || !cols.length) {
+    throw new Error('[json-table] parametro `cols` mancante o vuoto: la definizione delle colonne è obbligatoria');
+  }
+
+  return cols
+    .map((col, idx) => {
+
+      if (col == null || typeof col !== 'object') {
+        throw new Error(`[json-table] colonna #${idx}: definizione non valida`);
+      }
+
+      const dataType = col.dataType ?? col.type ?? 'string';
+      const type = dataTypes[dataType];
+
+      if (!type) {
+        throw new Error(`[json-table] colonna #${idx} (${col.key}): dataType \`${dataType}\` non definito`);
+      }
+
+      // `type` is only an alias of `dataType`: dropped from the merged definition
+      const colProps = { ...col };
+      delete colProps.type;
+
+      const merged = {
+        ...colDefaults,
+        ...(type.colDefaults ?? {}),
+        ...colProps,
+        dataType
+      };
+
+      if (!merged.key || typeof merged.key !== 'string') {
+        throw new Error(`[json-table] colonna #${idx}: parametro \`key\` mancante`);
+      }
+
+      const condition = typeof merged.condition === 'function'
+        ? merged.condition(params)
+        : (merged.condition ?? true);
+
+      return /** @type {ParsedCol} */ ({
+        ...merged,
+        title: merged.title ?? merged.key,
+        condition: Boolean(condition),
+        headerClass: merged.headerClass ?? merged.cellClass ?? type.headerClass ?? null,
+        cellClass: merged.cellClass ?? merged.headerClass ?? type.cellClass ?? null,
+        _type: type
+      });
+    })
+    .filter(col => col.condition);
+}

package/src/web-components/json-table/src/parse-rows.js

@@ -0,0 +1,81 @@
+/*! minimo - json-table: rows parsing (sort & search values) */
+
+import { getNestedValue } from './content-utils.js';
+
+/** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
+/** @typedef {import('./parse-cols.js').ParsedCol} ParsedCol */
+
+/**
+ * A data row with the values precomputed for sorting and searching.
+ * @typedef {Object} ParsedRow
+ * @property {number} idx - Index of the row in the original data set
+ * @property {Object} row - The original row object
+ * @property {Object<string, *>} sortValues - Sort value of every sortable column, keyed by column key
+ * @property {string} searchText - Lowercased concatenation of the search values of the searchable columns
+ */
+
+/**
+ * Resolves the sort/search value of a cell: column-level value or function `row => value`
+ * (when defined) → data type function `(value, row, params) => value` → raw value.
+ * @param {*} colValue - Column `sortValue`/`searchValue` (undefined = not set)
+ * @param {((value: *, row: Object, params: JsonTableParams) => *)|undefined} typeFn - Data type function
+ * @param {*} value - Raw cell value
+ * @param {Object} row - Row object
+ * @param {JsonTableParams} params - Resolved params
+ * @returns {*}
+ */
+function resolveValue(colValue, typeFn, value, row, params) {
+  if (colValue !== undefined) {
+    return typeof colValue === 'function' ? colValue(row) : colValue;
+  }
+  if (typeof typeFn === 'function') {
+    return typeFn(value, row, params);
+  }
+  return value;
+}
+
+
+/**
+ * Precomputes, for every row, the values used by sorting and searching, so that they are
+ * calculated once and not on every sort/search operation (see `sorting.js` and `search.js`).
+ *
+ * @param {Array<Object>} rows - Raw data rows
+ * @param {ParsedCol[]} cols - Parsed columns (see `parse-cols.js`)
+ * @param {JsonTableParams} params - Resolved params
+ * @returns {ParsedRow[]}
+ *
+ * @example
+ * parseRows([{ id: 1, name: 'Mario', amount: '12.5' }], cols, params);
+ * // → [{ idx: 0, row: {…}, sortValues: { id: 1, name: 'Mario', amount: 12.5 }, searchText: 'mario 12,5' }]
+ */
+export function parseRows(rows, cols, params) {
+
+  return rows.map((row, idx) => {
+
+    /** @type {Object<string, *>} */
+    const sortValues = {};
+    /** @type {string[]} */
+    const searchParts = [];
+
+    cols.forEach(col => {
+      const value = getNestedValue(row, col.key);
+
+      if (col.sortable) {
+        sortValues[col.key] = resolveValue(col.sortValue, col._type.sortValue, value, row, params);
+      }
+
+      if (col.searchable) {
+        const searchValue = resolveValue(
+          col.searchValue,
+          col._type.searchValue ?? (v => (v == null ? '' : String(v))),
+          value, row, params
+        );
+        if (searchValue != null && searchValue !== '') {
+          searchParts.push(String(searchValue));
+        }
+      }
+    });
+
+    return { idx, row, sortValues, searchText: searchParts.join(' ').toLowerCase() };
+  });
+}

package/src/web-components/json-table/src/resolve-params.js

@@ -1,22 +1,93 @@
 /*! minimo - json-table: params resolution */
 
-import { defaults } from './defaults.js';
+import { defaults, mergedParams } from './defaults.js';
 
 /** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
 
+/**
+ * Whether `value` is a plain object (not null, not an array).
+ * @param {*} value
+ * @returns {value is Object<string, *>}
+ */
+function isPlainObject(value) {
+  return value != null && typeof value === 'object' && !Array.isArray(value);
+}
+
+
+/**
+ * Reads and parses an HTML attribute of the `<json-table>` element.
+ *
+ * - booleans are auto-parsed when the built-in default is a boolean
+ *   (`search`, `search="true"`, `search="1"` → true; `search="false"`, `search="0"` → false)
+ * - numbers are auto-parsed when the built-in default is a number (`perpage="10"` → 10; a
+ *   non-numeric value is reported in the console and treated as a missing attribute)
+ * - values starting with `[` or `{` are parsed as JSON (invalid JSON is reported in the
+ *   console and treated as a missing attribute)
+ * - every other value is returned as a string
+ *
+ * @param {HTMLElement} el - The `<json-table>` element
+ * @param {keyof JsonTableParams} name - Parameter name (attribute names are case-insensitive)
+ * @returns {*} The parsed value, or `undefined` when the attribute is missing or invalid
+ *
+ * @example
+ * // <json-table search="false" cols='[{"key":"id"}]'></json-table>
+ * readAttr(el, 'search'); // → false
+ * readAttr(el, 'cols');   // → [{ key: 'id' }]
+ * readAttr(el, 'perPage'); // → 10 (from perpage="10")
+ * readAttr(el, 'caption'); // → undefined
+ */
+export function readAttr(el, name) {
+
+  const attr = el.getAttribute(name);
+  if (attr === null) {
+    return undefined;
+  }
+
+  const trimmed = attr.trim();
+
+  if (typeof defaults[name] === 'boolean') {
+    const lower = trimmed.toLowerCase();
+    // empty string = attribute present without value → true (standard HTML)
+    return lower !== 'false' && lower !== '0';
+  }
+
+  if (typeof defaults[name] === 'number') {
+    const num = Number(trimmed);
+    if (trimmed === '' || Number.isNaN(num)) {
+      // eslint-disable-next-line no-console
+      console.error(`[json-table] attributo \`${name}\`: valore numerico non valido (${attr}), viene usato il default`);
+      return undefined;
+    }
+    return num;
+  }
+
+  if (trimmed.startsWith('[') || trimmed.startsWith('{')) {
+    try {
+      return JSON.parse(trimmed);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(`[json-table] attributo \`${name}\`: JSON non valido, valore ignorato (viene usato il default)`, err);
+      return undefined;
+    }
+  }
+
+  return attr;
+}
+
+
 /**
  * Resolves a single parameter, merging the four possible sources.
  *
  * Precedence (highest first):
  * 1. `config` – value passed via `init()`/`reload()`. Present and `!== undefined` always wins;
  *    pass `null` explicitly to skip the HTML attribute and fall back to the defaults.
- * 2. HTML attribute – booleans are auto-parsed when the built-in default is a boolean
- *    (`search`, `search="true"`, `search="1"` → true; `search="false"`, `search="0"` → false);
- *    values starting with `[` or `{` are parsed as JSON (invalid JSON is reported in the
- *    console and ignored, falling back to the defaults).
+ * 2. HTML attribute (see `readAttr`).
  * 3. `projectDefaults` – values set via `JsonTable.setDefaults()`.
  * 4. Built-in default (see `defaults.js`).
  *
+ * Object params listed in `mergedParams` (`classes`, `labels`, `dataTypes`, `serverParams`) are shallow-merged
+ * across the sources instead of being replaced, so every source only needs the keys to override.
+ *
  * @param {HTMLElement} el - The `<json-table>` element (source of the HTML attributes)
  * @param {Partial<JsonTableParams>|null} config - Config passed via `init()` (default: null)
  * @param {Partial<JsonTableParams>} projectDefaults - Project-wide defaults (default: {})
@@ -24,41 +95,40 @@ import { defaults } from './defaults.js';
  * @returns {*} The resolved value
  *
  * @example
- * // <json-table jsonurl="/api/rows.json" search="false"></json-table>
+ * // <json-table jsonurl="/api/rows.json" search="false" classes='{"table":"table"}'></json-table>
  * getParam(el, { jsonUrl: '/api/other.json' }, {}, 'jsonUrl'); // → '/api/other.json' (config)
  * getParam(el, null, {}, 'search');                             // → false (attribute)
- * getParam(el, null, { tableClass: 'table' }, 'tableClass');    // → 'table' (project defaults)
- * getParam(el, null, {}, 'tableWrapperClass');                  // → 'table-responsive' (built-in default)
+ * getParam(el, null, { tableId: 'tbl' }, 'tableId');            // → 'tbl' (project defaults)
+ * getParam(el, null, {}, 'locale');                             // → 'it-IT' (built-in default)
+ * getParam(el, { classes: { sortBtn: 'btn' } }, {}, 'classes');
+ * // → { ...defaults.classes, table: 'table', sortBtn: 'btn' } (merged)
  */
 export function getParam(el, config = null, projectDefaults = {}, name) {
 
+  const configValue = config ? config[name] : undefined;
+
+  // merged object params: built-in ← project ← attribute ← config
+  if (mergedParams.includes(name)) {
+    const builtIn = /** @type {Object<string, *>} */ (defaults[name]);
+    const projectValue = projectDefaults[name];
+    const attrValue = configValue === null ? undefined : readAttr(el, name);
+    return {
+      ...builtIn,
+      ...(isPlainObject(projectValue) ? projectValue : {}),
+      ...(isPlainObject(attrValue) ? attrValue : {}),
+      ...(isPlainObject(configValue) ? configValue : {})
+    };
+  }
+
   // 1. config from script (undefined = key not present → go down one level)
-  if (config && config[name] !== undefined) {
-    return config[name];
+  if (configValue !== undefined) {
+    return configValue;
   }
 
   // 2. HTML attribute
-  const attr = el.getAttribute(name);
-  if (attr !== null) {
-    const trimmed = attr.trim();
-
-    if (typeof defaults[name] === 'boolean') {
-      const lower = trimmed.toLowerCase();
-      // empty string = attribute present without value → true (standard HTML)
-      return lower !== 'false' && lower !== '0';
-    }
-
-    if (trimmed.startsWith('[') || trimmed.startsWith('{')) {
-      try {
-        return JSON.parse(trimmed);
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.error(`[json-table] attributo \`${name}\`: JSON non valido, valore ignorato (viene usato il default)`, err);
-        // fall through to the defaults
-      }
-    } else {
-      return attr;
-    }
+  const attrValue = readAttr(el, name);
+  if (attrValue !== undefined) {
+    return attrValue;
   }
 
   // 3. project defaults
@@ -81,7 +151,7 @@ export function getParam(el, config = null, projectDefaults = {}, name) {
  *
  * @example
  * const params = resolveParams(el, { jsonUrl: '/api/rows.json', debug: true }, {});
- * // → { debug: true, jsonUrl: '/api/rows.json', jsonDataField: 'data', data: null, ... }
+ * // → { debug: true, jsonUrl: '/api/rows.json', jsonDataField: 'data', data: null, cols: [], ... }
  */
 export function resolveParams(el, config = null, projectDefaults = {}) {
 

package/src/web-components/json-table/src/search.js

@@ -0,0 +1,71 @@
+/*! minimo - json-table: client-side search */
+
+/** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
+/** @typedef {import('./parse-rows.js').ParsedRow} ParsedRow */
+
+/**
+ * Normalizes a search term: trimmed, lowercased, split into words (whitespace separated).
+ * @param {string|null|undefined} term
+ * @returns {string[]}
+ *
+ * @example
+ * searchWords('  Mario  Rossi '); // → ['mario', 'rossi']
+ * searchWords('');                // → []
+ */
+export function searchWords(term) {
+  return String(term ?? '').trim().toLowerCase().split(/\s+/).filter(Boolean);
+}
+
+
+/**
+ * Filters the parsed rows by a search term: every word of the term must be contained in the
+ * row `searchText` (precomputed by `parse-rows.js` from the searchable columns; case-insensitive).
+ * An empty term returns the original array.
+ *
+ * @param {ParsedRow[]} rows - Parsed rows
+ * @param {string} term - Search term
+ * @returns {ParsedRow[]}
+ *
+ * @example
+ * filterRows(state.rows, 'mario 2024'); // rows whose searchText contains both 'mario' and '2024'
+ * filterRows(state.rows, '');           // → state.rows
+ */
+export function filterRows(rows, term) {
+
+  const words = searchWords(term);
+
+  if (!words.length) {
+    return rows;
+  }
+
+  return rows.filter(parsed => words.every(word => parsed.searchText.includes(word)));
+}
+
+
+/**
+ * Attaches the `input` listener to the search input (`elements.searchInput`, when present):
+ * the search is executed through `jt.setSearch()` after `params.searchDebounce` milliseconds
+ * from the last keystroke. The pending timer id is stored in `jt._searchTimer` so that
+ * `destroy()` can clear it.
+ *
+ * @param {JsonTable} jt - The component instance
+ * @returns {void}
+ *
+ * @example
+ * setSearchListener(jt); // after mainBuilder(jt)
+ */
+export function setSearchListener(jt) {
+
+  const input = jt.elements.searchInput;
+
+  if (!input) {
+    return;
+  }
+
+  input.addEventListener('input', () => {
+    clearTimeout(jt._searchTimer);
+    jt._searchTimer = setTimeout(() => {
+      jt.setSearch(input.value);
+    }, Math.max(0, Number(jt.params.searchDebounce) || 0));
+  });
+}