@massimo-cassandro/minimo 0.12.2 → 0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",

package/src/web-components/s-datatable-component/docs.md

@@ -186,11 +186,14 @@ cols: [
 
     _title,        // Testo del tooltip sull'intestazione (attributo `title` dell'<abbr>).
 
-    _renderTpl,    // Template HTML per il contenuto della cella.
-                   // I segnaposto [[chiave]] vengono sostituiti con i valori della riga.
-                   // Supporta notazione punto: [[owner.nome]] [[owner.cognome]]
-                   // Se un valore è null (es. oggetto padre assente da Symfony),
-                   // il segnaposto viene sostituito con stringa vuota senza errori.
+    _render,       // Template HTML per il contenuto della cella.
+                   // Accetta:
+                   //   - stringa mustache-like: i segnaposto [[chiave]] vengono sostituiti
+                   //     con i valori della riga (notazione punto: [[owner.nome]]).
+                   //     I segnaposto null usano _renderNullAs; se il padre dell'oggetto è
+                   //     null (es. Symfony restituisce owner: null) non viene emesso alcun
+                   //     warning (il dato è semplicemente assente, non un errore di config).
+                   //   - funzione (row) => string
 
     _renderMode,   // Preset di visualizzazione predefiniti. Valori disponibili:
                    //   'id'          – colonna numerica, non ricercabile, allineata a destra
@@ -199,7 +202,7 @@ cols: [
                    //   'sf_datetime' – data/ora da oggetto Symfony ({ date, timezone })
 
     _sortValue,    // Percorso del campo da usare per l'ORDINAMENTO al posto del contenuto
-                   // visualizzato. Utile quando la cella contiene HTML composto (_renderTpl).
+                   // visualizzato. Utile quando la cella contiene HTML composto (_render).
                    // Supporta notazione punto.
                    // Implementato tramite l'attributo data-order sulla cella, letto
                    // nativamente da simple-datatables.
@@ -238,12 +241,12 @@ const cols = [
   {
     _field: 'commessa',
     _heading: 'Commessa / fornitore',
-    _renderTpl: '[[commessa]]<br><small class="text-muted">[[fornitore]]</small>',
+    _render: '[[commessa]]<br><small class="text-muted">[[fornitore]]</small>',
   },
   {
     _field: 'owner.cognome',
     _heading: 'Owner',
-    _renderTpl: '[[owner.nome]] [[owner.cognome]]',
+    _render: '[[owner.nome]] [[owner.cognome]]',
     _sortValue: 'owner.cognome',              // ordina per cognome
     _searchValue: 'owner.cognome owner.nome', // cerca su cognome e nome (AND)
   },

package/src/web-components/s-datatable-component/s-datatable-component.js

@@ -21,10 +21,25 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
  * @typedef  {object} ColDefinition
  * @property {string}  _heading              Intestazione della colonna (obbligatorio).
  * @property {string}  _field                Chiave del campo nell'oggetto dato (obbligatorio).
- * @property {string}  [_title]              Testo del tooltip sull'intestazione.
- * @property {string}  [_renderTpl]          Template HTML per il contenuto della cella.
- *                                           I segnaposto `[[key]]` vengono sostituiti con i
- *                                           valori corrispondenti dell'oggetto riga.
+ * @property {string|Function}  [_headingTitle]       Testo del tooltip sull'intestazione (`<abbr title="…">`).
+ *                                           Accetta:
+ *                                           - stringa semplice (tooltip statico)
+ *                                           - stringa mustache-like con segnaposto `[[key]]`
+ *                                             (interpolati sui dati della prima riga disponibile;
+ *                                              utile solo se il titolo varia per colonna, non per riga)
+ *                                           - funzione `(row) => string` (row è null per le intestazioni)
+ * @property {string|Function}  [_cellTitle]          Testo del tooltip delle celle (attributo `title`).
+ *                                           Accetta:
+ *                                           - stringa semplice (tooltip statico uguale per tutte le righe)
+ *                                           - stringa mustache-like con segnaposto `[[key]]`
+ *                                             (i segnaposto vengono sostituiti con i valori della riga corrente)
+ *                                           - funzione `(row) => string` (riceve l'oggetto riga corrente)
+ * @property {string|Function} [_render]     Template HTML per il contenuto della cella.
+ *                                           Accetta:
+ *                                           - stringa mustache-like con segnaposto `[[key]]`
+ *                                             (sostituiti con i valori dell'oggetto riga;
+ *                                              i segnaposto non trovati usano `_renderNullAs`)
+ *                                           - funzione `(row) => string`
  * @property {string|Function} [_sortValue]   Percorso del campo da usare per l'ORDINAMENTO al posto
  *                                           del contenuto visualizzato, oppure una funzione
  *                                           `(row) => string|number` per casi complessi
@@ -39,7 +54,7 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
  * @property {string}  [_renderNullAs]       Stringa da mostrare al posto di valori null/undefined.
  *                                           Default: `'&mdash;'` (trattino em).
  *                                           Applicato al valore della cella e ai segnaposto
- *                                           di `_renderTpl` che si risolvono a null.
+ *                                           di `_render` che si risolvono a null.
  * @property {'id'|'email'|'sf_datetime'} [_renderMode]
  *                                           Modalità di visualizzazione predefinita:
  *                                           - `id`          – colonna numerica, non ricercabile, allineata a destra
@@ -92,6 +107,60 @@ function getNestedValue(obj, path) {
 }
 
 
+/**
+ * resolveTemplate
+ *
+ * Risolve un template in base al suo tipo:
+ *   - Funzione:              invocata con `row`, deve restituire una stringa.
+ *   - Stringa mustache-like ([[key]]): i segnaposto vengono sostituiti con i
+ *                            valori corrispondenti dell'oggetto riga.
+ *   - Stringa semplice:      restituita così com'è (utile per tooltip statici).
+ *
+ * Quando `row` è null/undefined (caso intestazioni) le funzioni vengono
+ * comunque chiamate con null; la stringa mustache-like viene restituita
+ * letteralmente perché non ci sono dati da interpolare.
+ *
+ * @param {string|Function} tpl           Template da risolvere.
+ * @param {object|null}     row           Oggetto riga corrente (null per le intestazioni).
+ * @param {object}          [opts]        Opzioni aggiuntive.
+ * @param {string}          [opts.nullAs] Stringa da usare come fallback per i segnaposto
+ *                                        che si risolvono a null (default: `''`).
+ *                                        Se non fornita i segnaposto non trovati diventano ''.
+ * @param {number}          [opts.warnColIdx] Se fornito, emette console.error quando una
+ *                                        chiave foglia non esiste sul padre (indica un errore
+ *                                        di configurazione, non un dato assente).
+ * @returns {string|null}                 Stringa risolta, oppure null se `tpl` è falsy.
+ */
+function resolveTemplate(tpl, row, { nullAs = '', warnColIdx } = {}) {
+  if (!tpl) return null;
+
+  if (typeof tpl === 'function') {
+    return tpl(row) ?? null;
+  }
+
+  // Stringa mustache-like: interpola solo se row è disponibile
+  if (row != null && /\[\[.*?\]\]/.test(tpl)) {
+    return decodeURIComponent(tpl).replace(
+      /\[\[(.*?)\]\]/g,
+      (_, key) => {
+        const resolved  = getNestedValue(row, key);
+        if (warnColIdx !== undefined) {
+          const pathParts = key.split('.');
+          const parentObj = pathParts.length > 1
+            ? getNestedValue(row, pathParts.slice(0, -1).join('.'))
+            : row;
+          if (parentObj != null && !Object.prototype.hasOwnProperty.call(parentObj, pathParts.at(-1))) {
+            // eslint-disable-next-line no-console
+            console.error(`[s-datatable] Chiave "${key}" non trovata nella struttura dati (colonna ${warnColIdx})`);
+          }
+        }
+        return resolved ?? nullAs;
+      }
+    );
+  }
+
+  return tpl;
+}
 
 class SimpleDatatableAdapter extends HTMLElement {
   constructor() {
@@ -343,11 +412,12 @@ class SimpleDatatableAdapter extends HTMLElement {
         rawData = parsed.data;
       }
 
-      this.headings = cols.map(item =>
-        item._title
-          ? `<abbr title="${item._title}">${item._heading}</abbr>`
-          : item._heading
-      );
+      this.headings = cols.map(item => {
+        const title = resolveTemplate(item._headingTitle, null);
+        return title
+          ? `<abbr title="${title}">${item._heading}</abbr>`
+          : item._heading;
+      });
 
       this.data = rawData.map((row, idx) => ({
         attributes: { 'data-jidx': idx },
@@ -370,36 +440,12 @@ class SimpleDatatableAdapter extends HTMLElement {
             : null;
 
 
-          // _renderTpl: template per il rendering del valore
-          // se stringa contiene le chiavi da renderizzare in formato mustache-like ([[key]])
-          // se funzione ha come argomento la riga dati
-          if (col_item._renderTpl) {
-            if(typeof col_item._renderTpl === 'string') {
-
-              value = decodeURIComponent(col_item._renderTpl).replace(
-                /\[\[(.*?)\]\]/g,
-                (match, key) => {
-                  const resolved  = getNestedValue(row, key);
-                  const pathParts = key.split('.');
-                  const parentObj = pathParts.length > 1
-                    ? getNestedValue(row, pathParts.slice(0, -1).join('.'))
-                    : row;
-
-                  // Segnala solo se il padre esiste ma la chiave foglia manca
-                  // (errore di configurazione). Se il padre è null il dato è
-                  // semplicemente assente (es. Symfony restituisce owner: null).
-                  if (parentObj != null && !Object.prototype.hasOwnProperty.call(parentObj, pathParts.at(-1))) {
-                    // eslint-disable-next-line no-console
-                    console.error(`[s-datatable] Chiave "${key}" non trovata nella struttura dati (colonna ${col_idx})`);
-                  }
-
-                  return resolved ?? nullAs;
-                }
-              );
-
-            } else if (typeof col_item._renderTpl === 'function') {
-              value = col_item._renderTpl(row);
-            }
+          // _render: template per il rendering del valore.
+          // Accetta stringa mustache-like ([[key]]) o funzione (row) => string.
+          // Delega a resolveTemplate, passando nullAs e l'indice di colonna
+          // per i warning di chiavi mancanti.
+          if (col_item._render) {
+            value = resolveTemplate(col_item._render, row, { nullAs, warnColIdx: col_idx });
 
           } else if (col_item._renderMode === 'sf_datetime' && value != null) {
             value = value.date.replace(' ', 'T') +
@@ -408,7 +454,7 @@ class SimpleDatatableAdapter extends HTMLElement {
 
           // Applica _renderNullAs al valore della cella se null/undefined
           // e la cella non ha già un template che gestisce la visualizzazione.
-          if (value == null && !col_item._renderTpl) {
+          if (value == null && col_item._render == null) {
             value = nullAs;
           }
 
@@ -431,10 +477,21 @@ class SimpleDatatableAdapter extends HTMLElement {
           // - `data`  → contenuto visualizzato (obbligatorio)
           // - `order` → valore alternativo per l'ordinamento (campo nativo)
           // - `attributes['data-search']` → stringa su cui opera searchMethod
-          if (sortValue !== null || searchValue !== null) {
+          // - `attributes['title']`       → tooltip della cella (_cellTitle)
+
+          // Risolvi _cellTitle: stringa semplice, mustache-like o funzione(row)
+          const cellTitle = resolveTemplate(col_item._cellTitle, row);
+
+          if (sortValue !== null || searchValue !== null || cellTitle !== null) {
             const cellObj = { data: value ?? '' };
             if (sortValue !== null)   cellObj.order = sortValue;
-            if (searchValue !== null) cellObj.attributes = { 'data-search': searchValue };
+
+            // Unifica data-search e title in un unico oggetto attributes
+            const attrs = {};
+            if (searchValue !== null) attrs['data-search'] = searchValue;
+            if (cellTitle   !== null) attrs['title']       = cellTitle;
+            if (Object.keys(attrs).length) cellObj.attributes = attrs;
+
             return cellObj;
           }