@massimo-cassandro/minimo 1.33.0 → 1.33.1

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

@@ -0,0 +1,80 @@
+/*! minimo - json-table: icons */
+
+import checkBold from '../../../icons/check-bold.svg?inline';
+import xBold from '../../../icons/x-bold.svg?inline';
+import arrowUp from '../../../icons/arrow-up.svg?inline';
+import arrowDown from '../../../icons/arrow-down.svg?inline';
+import arrowsDownUp from '../../../icons/arrows-down-up.svg?inline';
+import caretLeft from '../../../icons/caret-left.svg?inline';
+import caretRight from '../../../icons/caret-right.svg?inline';
+
+/** @typedef {import('./defaults.js').IconDef} IconDef */
+
+/** Default icon of `true` values (minimo `check-bold`, inline SVG markup) */
+export const boolTrueIcon = checkBold;
+/** Default icon of `false` values (minimo `x-bold`) */
+export const boolFalseIcon = xBold;
+/** Default sort button icon, ascending sort active (minimo `arrow-up`) */
+export const sortAscArrowIcon = arrowUp;
+/** Default sort button icon, descending sort active (minimo `arrow-down`) */
+export const sortDescArrowIcon = arrowDown;
+/** Default sort button icon, no sort active (minimo `arrows-down-up`) */
+export const sortNoneArrowIcon = arrowsDownUp;
+/** Default previous page button icon (minimo `caret-left`) */
+export const paginationPrevIcon = caretLeft;
+/** Default next page button icon (minimo `caret-right`) */
+export const paginationNextIcon = caretRight;
+
+/**
+ * Markup strings already parsed, keyed by the string itself.
+ * @type {Map<string, DocumentFragment>}
+ */
+const fragmentCache = new Map();
+
+/**
+ * Resolves an icon definition to a content usable by domBuilder (`content`) or `setContent()`.
+ *
+ * Markup strings are parsed once through an inert `<template>` and cloned on every call, so the
+ * same icon can be inserted in many cells without re-parsing and without going through the HTML
+ * sanitizer used by domBuilder for markup strings (icons are developer-supplied configuration,
+ * not user data). DOM nodes are cloned too, since a node can live in one place only.
+ *
+ * @param {IconDef|null|undefined} icon - Icon definition (see `IconDef`)
+ * @returns {Node|DomBuilderItem[]|null} A fresh node (or domBuilder array), `null` when `icon` is nullish
+ *
+ * @example
+ * iconContent('<svg …></svg>');                  // → DocumentFragment (clone of the parsed markup)
+ * iconContent(document.querySelector('svg'));   // → cloned SVGElement
+ * iconContent({ tag: 'span', content: '✓' });   // → [{ tag: 'span', content: '✓' }] (domBuilder array)
+ * iconContent(() => '<svg …></svg>');           // → DocumentFragment
+ * iconContent(null);                            // → null
+ */
+export function iconContent(icon) {
+
+  const resolved = typeof icon === 'function' ? icon() : icon;
+
+  if (resolved == null) {
+    return null;
+  }
+
+  if (resolved instanceof Node) {
+    return resolved.cloneNode(true);
+  }
+
+  if (typeof resolved === 'string') {
+    let fragment = fragmentCache.get(resolved);
+    if (!fragment) {
+      const tpl = document.createElement('template');
+      tpl.innerHTML = resolved.trim();
+      fragment = tpl.content;
+      fragmentCache.set(resolved, fragment);
+    }
+    return fragment.cloneNode(true);
+  }
+
+  if (typeof resolved === 'object') {
+    return [resolved];
+  }
+
+  return null;
+}

package/src/web-components/json-table/src/info-section.js

@@ -1,4 +1,4 @@
-/*! minimo - json-table: info section */
+/*! minimo - json-table: info section parts */
 
 import * as styles from '../json-table-component.module.css';
 import { classnames } from '../../../utilities/classnames.js';
@@ -7,66 +7,101 @@ import { classnames } from '../../../utilities/classnames.js';
 /** @typedef {import('./main-builder.js').JsonTableElements} JsonTableElements */
 
 /**
- * Builds the domBuilder configuration of the info section (info text + search input).
+ * domBuilder item of the info text container (template slot `resultInfo`).
+ *
+ * Generated structure: `div.resultInfo[classes.resultInfo][aria-live=polite]`; the content is
+ * set by `update-info.js`. The element is stored in `elements.resultInfo`.
+ *
+ * @param {JsonTableParams} params - Resolved params
+ * @param {JsonTableElements} elements - Object collecting the generated elements (mutated)
+ * @returns {DomBuilderItem}
+ *
+ * @example
+ * domBuilder([resultInfoPart(params, elements)], host);
+ * elements.resultInfo; // → HTMLElement
+ */
+export function resultInfoPart(params, elements) {
+  return {
+    className: classnames(styles.resultInfo, params.classes.resultInfo),
+    attrs: { 'aria-live': 'polite' },
+    callback: el => { elements.resultInfo = /** @type {HTMLElement} */ (el); }
+  };
+}
+
+
+/**
+ * domBuilder item of the search input (template slot `search`), rendered only when
+ * `params.search` is true.
+ *
+ * Generated structure: `div.search[classes.search] > input[type=search][classes.searchInput]`.
+ * The input is stored in `elements.searchInput`.
+ *
+ * TODO listener sull'input di ricerca: step 3
+ *
+ * @param {JsonTableParams} params - Resolved params
+ * @param {JsonTableElements} elements - Object collecting the generated elements (mutated)
+ * @returns {DomBuilderItem}
+ *
+ * @example
+ * domBuilder([searchPart(params, elements)], host);
+ * elements.searchInput; // → HTMLInputElement (when params.search is true)
+ */
+export function searchPart(params, elements) {
+  return {
+    condition: params.search,
+    className: classnames(styles.search, params.classes.search),
+    children: [
+      {
+        tag: 'input',
+        className: classnames(params.classes.searchInput),
+        attrs: {
+          type: 'search',
+          title: params.labels.searchTitle,
+          placeholder: params.labels.searchPlaceholder,
+          'aria-label': params.labels.searchAriaLabel
+        },
+        callback: el => { elements.searchInput = /** @type {HTMLInputElement} */ (el); }
+      }
+    ]
+  };
+}
+
+
+/**
+ * domBuilder item of the whole info section (template slot `infoSection`): info text + search input.
  *
  * Generated structure:
  * ```
- * div.infoOuter[outerInfoExtraClass]
- *   div.info[infoExtraClass]
- *     div.resultInfo                       ← info text (see `update-info.js`)
- *     div.search > input[type=search]      ← only if `params.search` is true
+ * div.infoOuter[classes.infoOuter]
+ *   div.info[classes.info]
+ *     div.resultInfo                       ← resultInfoPart()
+ *     div.search > input[type=search]      ← searchPart(), only if `params.search` is true
  * ```
  *
  * References to the generated elements are stored in `elements`
  * (`infoOuter`, `info`, `resultInfo`, `searchInput`).
  *
- * TODO listener sull'input di ricerca: da impostare quando verrà implementata la ricerca
- *
  * @param {JsonTableParams} params - Resolved params
  * @param {JsonTableElements} elements - Object collecting the generated elements (mutated)
- * @returns {DomBuilderItem[]} domBuilder items to be used as children of the main wrapper
+ * @returns {DomBuilderItem}
  *
  * @example
- * const elements = {};
- * domBuilder([{ tag: 'section', children: [...infoSection(params, elements)] }], host);
- * elements.searchInput; // → HTMLInputElement (when params.search is true)
+ * domBuilder([{ tag: 'section', children: [infoSectionPart(params, elements)] }], host);
+ * elements.info; // → HTMLElement
  */
-export function infoSection(params, elements) {
-
-  return [
-    {
-      className: classnames(styles.infoOuter, params.outerInfoExtraClass),
-      callback: el => { elements.infoOuter = /** @type {HTMLElement} */ (el); },
-      children: [
-        {
-          className: classnames(styles.info, params.infoExtraClass),
-          callback: el => { elements.info = /** @type {HTMLElement} */ (el); },
-          children: [
-            {
-              className: styles.resultInfo,
-              attrs: { 'aria-live': 'polite' },
-              callback: el => { elements.resultInfo = /** @type {HTMLElement} */ (el); }
-            },
-            {
-              condition: params.search,
-              className: styles.search,
-              children: [
-                {
-                  tag: 'input',
-                  className: classnames(params.searchInputClass),
-                  attrs: {
-                    type: 'search',
-                    title: params.searchInputTitle,
-                    placeholder: params.searchInputPlaceholder,
-                    'aria-label': params.searchInputAriaLabel
-                  },
-                  callback: el => { elements.searchInput = /** @type {HTMLInputElement} */ (el); }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ];
+export function infoSectionPart(params, elements) {
+  return {
+    className: classnames(styles.infoOuter, params.classes.infoOuter),
+    callback: el => { elements.infoOuter = /** @type {HTMLElement} */ (el); },
+    children: [
+      {
+        className: classnames(styles.info, params.classes.info),
+        callback: el => { elements.info = /** @type {HTMLElement} */ (el); },
+        children: [
+          resultInfoPart(params, elements),
+          searchPart(params, elements)
+        ]
+      }
+    ]
+  };
 }

package/src/web-components/json-table/src/main-builder.js

@@ -3,93 +3,216 @@
 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 { infoSection } from './info-section.js';
+import { defaults } from './defaults.js';
+import { infoSectionPart, resultInfoPart, searchPart } from './info-section.js';
+import { tablePart, tableFooterPart, captionPart, captionId } from './table-builder.js';
+import { paginationPart } from './pagination.js';
 
-/** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
+/** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
+/** @typedef {import('./defaults.js').TemplateItem} TemplateItem */
+/** @typedef {import('./defaults.js').TemplateSlot} TemplateSlot */
 
 /**
  * Elements generated by the component, collected during the build.
  * @typedef {Object} JsonTableElements
- * @property {HTMLElement} [wrapper] - Main wrapper (`section`), contains info section and table
+ * @property {HTMLElement} [wrapper] - Main wrapper (`section`), contains the template parts
  * @property {HTMLElement} [infoOuter] - Outer info container
  * @property {HTMLElement} [info] - Info container (flex row: info text + search)
  * @property {HTMLElement} [resultInfo] - Info text container
  * @property {HTMLInputElement} [searchInput] - Search input (only when `search` is true)
  * @property {HTMLElement} [tableWrapper] - Div wrapping the table (`table-responsive` by default)
  * @property {HTMLTableElement} [table] - The `<table>` element
+ * @property {HTMLTableSectionElement} [thead] - The `<thead>` element
+ * @property {HTMLTableSectionElement} [tbody] - The `<tbody>` element
+ * @property {HTMLTableSectionElement} [tfoot] - The `<tfoot>` element (only when `tfoot` is true)
+ * @property {HTMLElement} [tableFooter] - Footer bar below the table (caption + pagination), when rendered
+ * @property {HTMLElement} [caption] - Caption container (only when `caption` is set)
+ * @property {HTMLElement} [pagination] - Pagination `<nav>` (only when `perPage` > 0)
  */
 
 /**
- * Builds the whole component structure inside `host` (emptied first) via domBuilder.
+ * Whether a template item is a slot placeholder.
+ * @param {*} item
+ * @returns {item is { slot: TemplateSlot }}
+ */
+function isSlot(item) {
+  return item != null && typeof item === 'object' && !(item instanceof Node) && typeof item.slot === 'string';
+}
+
+
+/**
+ * Collects, recursively (`children` and array `content`), the names of the slots used by a template.
+ *
+ * @param {Array<TemplateItem|string|Node>} items - Template items
+ * @param {Set<string>} [found=new Set()] - Accumulator (default: new Set())
+ * @returns {Set<string>}
  *
- * Generated structure:
+ * @example
+ * collectSlots([{ slot: 'table' }, { children: [{ slot: 'pagination' }] }]); // → Set { 'table', 'pagination' }
+ */
+export function collectSlots(items, found = new Set()) {
+
+  items.forEach(item => {
+    if (isSlot(item)) {
+      found.add(item.slot);
+    } else if (item != null && typeof item === 'object' && !(item instanceof Node)) {
+      if (Array.isArray(item.children)) {
+        collectSlots(item.children, found);
+      }
+      if (Array.isArray(item.content)) {
+        collectSlots(/** @type {TemplateItem[]} */ (item.content), found);
+      }
+    }
+  });
+
+  return found;
+}
+
+
+/**
+ * Replaces, recursively (`children` and array `content`), every `{ slot: 'name' }` item of a
+ * template with the corresponding built-in part. Unknown slots are reported in the console
+ * and skipped. Non-slot items are shallow-copied, so the original template is never mutated.
+ *
+ * @param {Array<TemplateItem|string|Node>} items - Template items
+ * @param {Object<string, DomBuilderItem>} parts - Built-in parts, keyed by slot name
+ * @returns {Array<DomBuilderItem|string|Node>}
+ *
+ * @example
+ * expandSlots([{ className: 'row', children: [{ slot: 'search' }, { slot: 'resultInfo' }] }, { slot: 'table' }], parts);
+ * // → [{ className: 'row', children: [<search part>, <resultInfo part>] }, <table part>]
+ */
+export function expandSlots(items, parts) {
+
+  /** @type {Array<DomBuilderItem|string|Node>} */
+  const result = [];
+
+  items.forEach(item => {
+
+    if (item == null || typeof item !== 'object' || item instanceof Node) {
+      result.push(/** @type {string|Node} */ (item));
+      return;
+    }
+
+    if (isSlot(item)) {
+      const part = parts[item.slot];
+      if (!part) {
+        // eslint-disable-next-line no-console
+        console.error(`[json-table] template: slot \`${item.slot}\` non riconosciuto (disponibili: ${Object.keys(parts).join(', ')})`);
+        return;
+      }
+      result.push(part);
+      return;
+    }
+
+    /** @type {DomBuilderItem} */
+    const copy = /** @type {DomBuilderItem} */ ({ ...item });
+
+    if (Array.isArray(item.children)) {
+      copy.children = expandSlots(item.children, parts);
+    }
+    if (Array.isArray(item.content)) {
+      copy.content = /** @type {DomBuilderItem[]} */ (expandSlots(/** @type {TemplateItem[]} */ (item.content), parts));
+    }
+
+    result.push(copy);
+  });
+
+  return result;
+}
+
+
+/**
+ * Builds the whole component structure inside the host element (emptied first) via domBuilder:
+ * a fixed main wrapper whose content is defined by `params.template`.
+ *
+ * Available template slots (see `TemplateItem`):
+ * - `infoSection` → `infoSectionPart()` (info text + search input)
+ * - `resultInfo`  → `resultInfoPart()` (info text only)
+ * - `search`      → `searchPart()` (search input only)
+ * - `table`       → `tablePart()` (table wrapper + table with thead, tbody, tfoot, plus the footer bar)
+ * - `caption`     → `captionPart()` (caption container; part of the `table` footer bar unless placed explicitly)
+ * - `pagination`  → `paginationPart()` (pagination nav; idem)
+ *
+ * Generated structure with the default template (`[{ slot: 'infoSection' }, { slot: 'table' }]`):
  * ```
- * section.wrapper[mainWrapperExtraClass]
- *   div.infoOuter[outerInfoExtraClass]
- *     div.info[infoExtraClass]
+ * section.wrapper[classes.wrapper]
+ *   div.infoOuter[classes.infoOuter]
+ *     div.info[classes.info]
  *       div.resultInfo
  *       div.search > input[type=search]     (if `search`)
- *   div[tableWrapperClass]
- *     table#tableId[tableClass]
- *       caption                             (if `caption`)
+ *   div.tableOuter
+ *     div.tableWrapper[classes.tableWrapper]
+ *       table#tableId.table[classes.table]
+ *         thead / tbody / tfoot             (tfoot if `tfoot`)
+ *     div.tableFooter[classes.tableFooter]  (if `caption` or `perPage` > 0)
+ *       div.caption                         (if `caption`)
+ *       nav.pagination                      (if `perPage` > 0)
  * ```
  *
- * TODO thead / tbody / tfoot: step successivo (parametro `cols` e rendering delle righe)
+ * The `<tbody>`, `<tfoot>` and pagination are created empty: see `renderTbody()`, `renderTfoot()`
+ * and `renderPagination()`.
  *
- * @param {HTMLElement} host - The `<json-table>` element
- * @param {JsonTableParams} params - Resolved params
+ * @param {JsonTable} jt - The component instance (host element, `params`, `cols`)
  * @returns {JsonTableElements} References to the generated elements
  *
  * @example
- * const elements = mainBuilder(el, {
- *   ...defaults,
- *   caption: 'Utenti',                  // default: null
- *   search: true,                       // default: true
- *   tableId: 'users-table',             // default: null
- *   tableWrapperClass: 'table-responsive', // default: 'table-responsive'
- *   tableClass: 'table table-bordered', // default: 'table table-bordered'
- *   mainWrapperExtraClass: null,        // default: null
- *   outerInfoExtraClass: null,          // default: null
- *   infoExtraClass: null                // default: null
- * });
+ * jt.params.template = [
+ *   { className: 'flex gap-2', children: [{ slot: 'search' }, { slot: 'pagination' }] },
+ *   { slot: 'table' },   // footer bar with the caption only: the pagination is placed above
+ *   { slot: 'resultInfo' }
+ * ];
+ * const elements = mainBuilder(jt);
  * elements.table; // → HTMLTableElement
  */
-export function mainBuilder(host, params) {
+export function mainBuilder(jt) {
+
+  const { params } = jt;
 
   /** @type {JsonTableElements} */
   const elements = {};
 
+  const capId = captionId(params);
+  const captionItem = captionPart(jt, elements, capId);
+  const paginationItem = paginationPart(jt, elements);
+
+  // footer bar parts: removed below when the template places them elsewhere
+  /** @type {DomBuilderItem[]} */
+  const footerChildren = [captionItem, paginationItem];
+  const footerBar = tableFooterPart(jt, elements, footerChildren);
+
+  /** @type {Object<string, DomBuilderItem>} */
+  const parts = {
+    infoSection: infoSectionPart(params, elements),
+    resultInfo: resultInfoPart(params, elements),
+    search: searchPart(params, elements),
+    caption: captionItem,
+    pagination: paginationItem,
+    table: tablePart(jt, elements, footerBar, capId)
+  };
+
+  const template = typeof params.template === 'function'
+    ? params.template(parts, params)
+    : params.template;
+
+  const items = Array.isArray(template) ? template : /** @type {TemplateItem[]} */ (defaults.template);
+  const usedSlots = collectSlots(items);
+
+  ['caption', 'pagination'].forEach(slot => {
+    if (usedSlots.has(slot)) {
+      footerChildren.splice(footerChildren.indexOf(parts[slot]), 1);
+    }
+  });
+  footerBar.condition = footerChildren.some(item => item.condition !== false);
+
   domBuilder([
     {
       tag: 'section',
-      className: classnames(styles.wrapper, params.mainWrapperExtraClass),
+      className: classnames(styles.wrapper, params.classes.wrapper),
       callback: el => { elements.wrapper = /** @type {HTMLElement} */ (el); },
-      children: [
-
-        ...infoSection(params, elements),
-
-        {
-          className: classnames(params.tableWrapperClass),
-          callback: el => { elements.tableWrapper = /** @type {HTMLElement} */ (el); },
-          children: [
-            {
-              tag: 'table',
-              id: params.tableId,
-              className: classnames(styles.table, params.tableClass),
-              callback: el => { elements.table = /** @type {HTMLTableElement} */ (el); },
-              children: [
-                {
-                  tag: 'caption',
-                  condition: params.caption != null,
-                  content: params.caption
-                }
-              ]
-            }
-          ]
-        }
-      ]
+      children: expandSlots(items, parts)
     }
-  ], host, { emptyParent: true });
+  ], jt, { emptyParent: true });
 
   return elements;
 }