@massimo-cassandro/minimo 0.11.7 → 0.11.9

package/package.json

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

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

@@ -25,21 +25,29 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
  * @property {string}  [_renderTpl]          Template HTML per il contenuto della cella.
  *                                           I segnaposto `[[key]]` vengono sostituiti con i
  *                                           valori corrispondenti dell'oggetto riga.
- * @property {string}  [_sortValue]            Percorso del campo da usare per l'ordinamento al posto
- *                                           del contenuto visualizzato (es. 'owner.cognome').
- *                                           Supporta valori annidati con la notazione punto.
- *                                           Implementato tramite `data-order` sull'attributo della cella.
- * @property {string}  [_searchValue]         Percorso del campo da usare per la ricerca al posto
- *                                           del contenuto visualizzato (es. 'owner.cognome owner.nome').
- *                                           Supporta valori annidati con la notazione punto.
- *                                           Implementato tramite una funzione `search` personalizzata
- *                                           sulla colonna (API simple-datatables).
- * @property {'id'|'email'|'boolean'|'sf_datetime'} [_renderMode]
+ * @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
+ *                                           (es. booleani, valori calcolati).
+ *                                           Stringa: percorso con notazione punto (es. 'owner.cognome').
+ *                                           Funzione: riceve l'oggetto riga originale.
+ * @property {string|Function} [_searchValue] Percorso/i del campo da usare per la RICERCA al posto
+ *                                           del contenuto visualizzato, oppure una funzione
+ *                                           `(row) => string` per casi complessi (es. booleani).
+ *                                           Stringa: uno o più percorsi separati da spazio.
+ *                                           Funzione: riceve l'oggetto riga originale.
+ * @property {string}  [_renderNullAs]       Stringa da mostrare al posto di valori null/undefined.
+ *                                           Default: `'—'` (trattino em).
+ *                                           Applicato al valore della cella e ai segnaposto
+ *                                           di `_renderTpl` che si risolvono a null.
+ * @property {'id'|'email'|'sf_datetime'} [_renderMode]
  *                                           Modalità di visualizzazione predefinita:
  *                                           - `id`          – colonna numerica, non ricercabile, allineata a destra
  *                                           - `email`       – inserisce andate a capo prima e dopo la `@`
- *                                           - `boolean`     – icona segno di spunta / croce con colore semantico
  *                                           - `sf_datetime` – data e ora da oggetto Symfony (con pre-elaborazione in `_load`)
+ *                                           Per i booleani usare `type: 'boolean'` (proprietà nativa
+ *                                           simple-datatables): parseCols aggiunge automaticamente
+ *                                           l'icona spunta/croce con colore semantico.
  *
  * @param {string}        json      URL da cui recuperare i dati (struttura attesa: `{ data: [...] }`).
  *                                  Ignorato se `data` è presente.
@@ -56,8 +64,13 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
  *                                  direttamente a simple-datatables (es. `sortable`, `searchable`).
  *                                  Default: `[]`
  *
- * @param {number}        perPage   Numero di righe per pagina.
- *                                  Default: `25`
+ * @param {number}        perPage          Numero di righe per pagina.
+ *                                           Default: `25`
+ *
+ * @param {string}        renderNullAs     Stringa globale da mostrare al posto di valori null/undefined
+ *                                           in tutte le colonne. Può essere sovrascritto per singola
+ *                                           colonna con `_renderNullAs`.
+ *                                           Default: `'—'`
  */
 
 
@@ -305,9 +318,10 @@ class SimpleDatatableAdapter extends HTMLElement {
 
     this.innerHTML = '<div class="spinner"><span class="visually-hidden">Caricamento dati...</span></div>';
 
-    const inlineData = this._getParam('data');
-    const jsonUrl    = this._getParam('json');
-    const cols       = this._getParam('cols', []);
+    const inlineData     = this._getParam('data');
+    const jsonUrl        = this._getParam('json');
+    const cols           = this._getParam('cols', []);
+    const globalNullAs   = this._getParam('renderNullAs', '&mdash;');
 
     if (inlineData == null && !jsonUrl) {
       if (this._initCalledProgrammatically) {
@@ -341,10 +355,18 @@ class SimpleDatatableAdapter extends HTMLElement {
         cells: cols.map((col_item, col_idx) => {
           let value = getNestedValue(row, col_item._field);
 
-          // _sortValue: valore alternativo per l'ordinamento
-          // simple-datatables lo legge da cell.attributes['data-order']
+          // _renderNullAs: stringa da mostrare quando il valore è null/undefined.
+          // Precedenza: _renderNullAs di colonna > renderNullAs globale > '&mdash;'
+          const nullAs = col_item._renderNullAs !== undefined
+            ? col_item._renderNullAs
+            : globalNullAs;
+
+          // _sortValue: valore alternativo per l'ordinamento.
+          // Accetta un percorso stringa o una funzione (row) => string|number.
           const sortValue = col_item._sortValue
-            ? (getNestedValue(row, col_item._sortValue) ?? '')
+            ? typeof col_item._sortValue === 'function'
+              ? (col_item._sortValue(row) ?? '')
+              : (getNestedValue(row, col_item._sortValue) ?? '')
             : null;
 
           if (col_item._renderTpl) {
@@ -365,7 +387,7 @@ class SimpleDatatableAdapter extends HTMLElement {
                   console.error(`[s-datatable] Chiave "${key}" non trovata nella struttura dati (colonna ${col_idx})`);
                 }
 
-                return resolved ?? '';
+                return resolved ?? nullAs;
               }
             );
           } else if (col_item._renderMode === 'sf_datetime' && value != null) {
@@ -373,31 +395,36 @@ class SimpleDatatableAdapter extends HTMLElement {
               (value.timezone === 'UTC' ? 'Z' : '');
           }
 
+          // 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) {
+            value = nullAs;
+          }
+
           // _searchValue: valore alternativo per la ricerca
           // Viene scritto come testo nascosto nella cella così la funzione
           // search personalizzata della colonna può leggerlo direttamente
           // dal contenuto, senza dipendere da attributi non supportati.
           const searchValue = col_item._searchValue
-            ? col_item._searchValue.split(' ')
-              .map(path => getNestedValue(row, path.trim()) ?? '')
-              .filter(Boolean)
-              .join(' ')
+            ? typeof col_item._searchValue === 'function'
+              ? (col_item._searchValue(row) ?? '')
+              : col_item._searchValue.split(' ')
+                  .map(path => getNestedValue(row, path.trim()) ?? '')
+                  .filter(Boolean)
+                  .join(' ')
             : null;
 
-
-    console.log('col:', col_item._heading, '| value:', value, '| sortValue:', sortValue, '| searchValue:', searchValue);
-
-
-          // Se sono definiti _sortValue o _searchValue, restituisce un
-          // oggetto cella strutturato; altrimenti il valore grezzo.
           // Se sono definiti _sortValue o _searchValue, restituisce un
-          // oggetto cella strutturato con attributi data-order / data-search
-          // che simple-datatables può leggere in modo affidabile.
+          // oggetto cellType secondo le API di simple-datatables:
+          //   { data, order?, attributes? }
+          // - `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) {
-            const attrs = {};
-            if (sortValue !== null)   attrs['data-order']  = sortValue;
-            if (searchValue !== null) attrs['data-search'] = searchValue;
-            return { text: value ?? '', attributes: attrs };
+            const cellObj = { data: value ?? '' };
+            if (sortValue !== null)   cellObj.order = sortValue;
+            if (searchValue !== null) cellObj.attributes = { 'data-search': searchValue };
+            return cellObj;
           }
 
           return value;