@massimo-cassandro/minimo 0.16.0 → 0.16.2

package/design-tokens/table.minimo.tokens.jsonc

@@ -20,6 +20,26 @@
         }
       }
     },
+    "tfoot": {
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "{table.thead.background.color}"
+        }
+      },
+      "border": {
+        "width": {
+          "$type": "dimension",
+          "$value": "{table.thead.border.width}"
+        }
+      },
+      "font": {
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.semibold}"
+        }
+      }
+    },
     "body": {
       "border": {
         "width": {

package/design-tokens-src/table.minimo.tokens.mjs

@@ -0,0 +1,86 @@
+export default {
+  table: {
+    thead: {
+      background: {
+        color: {
+          $type: 'color',
+          $value: '#ddd'
+        }
+      },
+      border: {
+        width : {
+          $type: 'dimension',
+          $value: '3px'
+        }
+      }
+    },
+    tfoot: {
+      background: {
+        color: {
+          $type: 'color',
+          $value: '{table.thead.background.color}'
+        }
+      },
+      border: {
+        width : {
+          $type: 'dimension',
+          $value: '{table.thead.border.width}'
+        }
+      },
+      font: {
+        weight: {
+          $type: 'fontWeight',
+          $value: '{font.weight.semibold}',
+        }
+      }
+    },
+
+    body: {
+      background: {
+        color: null
+      },
+      border: {
+        'width' : {
+          $type: 'dimension',
+          $value: '1px'
+        }
+      },
+      tr: {
+        'alt-bg-color': {
+          $type: 'color',
+          $value: '#efefef'
+        },
+        'hover-bg-color': {
+          $type: 'color',
+          $value: '#cbcbcb'
+        }
+      }
+    },
+
+    border: {
+      'color' : {
+        $type: 'color',
+        $value: '#333'
+      }
+    },
+
+    cell: {
+      'padding' : {
+        block: {
+          $type: 'dimension',
+          $value: '.3rem'
+        },
+        inline: {
+          $type: 'dimension',
+          $value: '.6rem'
+        }
+      },
+      'line-height': {
+        $type: 'number',
+        $value: '1.3'
+      }
+    }
+
+
+  }
+};

package/package.json

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

package/src/css/table.css

@@ -22,6 +22,7 @@
   tr {
     border-bottom: var(--_border);
   }
+
   thead {
     background-color: var(--table-thead-background-color);
     tr:last-child {
@@ -29,6 +30,16 @@
     }
   }
 
+  tfoot {
+    background-color: var(--table-tfoot-background-color);
+    tr:first-child {
+      border-block-start: var(--table-tfoot-border-width) solid var(--_border-color);
+    }
+    th, td {
+      font-weight: var(--table-tfoot-font-weight);
+    }
+  }
+
   tbody {
     tr:nth-child(even) {
       background-color: var(--_alternate-row-bg);

package/src/custom-properties.css

@@ -276,6 +276,9 @@
   --table-cell-line-height: 1.3;
   --table-cell-padding-block: .3rem;
   --table-cell-padding-inline: .6rem;
+  --table-tfoot-background-color: var(--table-thead-background-color);
+  --table-tfoot-border-width: var(--table-thead-border-width);
+  --table-tfoot-font-weight: var(--font-weight-semibold);
   --table-thead-background-color: #ddd;
   --table-thead-border-width: .1875rem;
   --text-color: #000;

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

@@ -354,28 +354,43 @@ Ricerca senza risultati:
 
 Il testo si aggiorna automaticamente ad ogni cambio pagina, ricerca e multisearch.
 
-## Parametro `topSlot`
+## Parametri `topSlot` e `showInfoAtTop`
 
-Permette di inserire un elemento DOM o del markup HTML nell'area in alto a sinistra
-del datatable — lo spazio normalmente occupato dal selettore "righe per pagina"
-(qui disabilitato). È utile per aggiungere pulsanti contestuali, filtri aggiuntivi
-o qualsiasi controllo da affiancare alla search box.
+Entrambi occupano l'area in alto a sinistra del datatable — lo spazio normalmente
+riservato al selettore "righe per pagina" (qui disabilitato). I due parametri si
+escludono: se `showInfoAtTop` è `true` (default), `topSlot` viene ignorato.
 
-L'elemento viene avvolto in un `<div class="datatable-top-slot">` e inserito
-come primo figlio dell'area superiore, prima della search box.
+### `showInfoAtTop`
 
-È configurabile solo via script (non da attributo HTML), perché accetta sia
-stringhe HTML che elementi DOM già costruiti.
+Replica nell'area superiore lo stesso testo dell'area `.info` in basso,
+mantenuto in sincronia ad ogni cambio pagina o filtro. Il nodo viene nascosto
+automaticamente quando non ci sono record o la ricerca non produce risultati
+(evita di mostrare "Nessun risultato…" in due posti).
+
+```javascript
+el.init({
+  json: '/api/data.json',
+  cols: [...],
+  showInfoAtTop: true,
+});
+```
+
+### `topSlot`
+
+Inserisce un elemento DOM o markup HTML arbitrario, avvolto in un
+`<div class="datatable-top-slot">`. Accetta sia una stringa HTML che un `Element`
+già costruito (utile per mantenere un riferimento al nodo e aggiungervi listener).
+Non è leggibile da attributo HTML, solo via `init()`.
 
 ```javascript
 // Stringa HTML
 el.init({
   json: '/api/data.json',
   cols: [...],
-  topSlot: '<button class="btn btn-sm btn-primary" onclick="...">Esporta CSV</button>',
+  topSlot: '<button class="btn btn-sm btn-primary">Esporta CSV</button>',
 });
 
-// Elemento DOM (utile quando si vuole mantenere un riferimento al nodo)
+// Elemento DOM
 const btn = document.createElement('button');
 btn.className = 'btn btn-sm btn-outline-secondary';
 btn.textContent = 'Nuova commessa';

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

@@ -114,8 +114,17 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
  *                                           Accetta:
  *                                           - `Element`: un nodo DOM già costruito
  *                                           - stringa HTML: parsata via innerHTML
+ *                                           Ignorato se `showInfoAtTop` è true.
  *                                           Non è leggibile da attributo HTML (solo via script).
  *
+ * @param {boolean}        showInfoAtTop    Se true, mostra nell'area superiore (spazio top-sinistra)
+ *                                           lo stesso testo dell'area `.info` in basso, mantenuto in
+ *                                           sync ad ogni cambio pagina/filtro. Il nodo viene nascosto
+ *                                           automaticamente quando non ci sono record o la ricerca
+ *                                           non produce risultati. Ha precedenza su `topSlot`:
+ *                                           se entrambi sono definiti, `topSlot` viene ignorato.
+ *                                           Default: true.
+ *
  * @param {string[]}      refs  Elenco di percorsi URL da cui, se si proviene,
  *                                           la pagina corrente viene ripristinata dal cookie
  *                                           di sessione `sd-pag`. Se il referrer non è tra
@@ -404,8 +413,27 @@ class SimpleDatatableAdapter extends HTMLElement {
     // 2. Attributo HTML
     const attr = this.getAttribute(name);
     if (attr !== null) {
-      // Auto-parse JSON per array e oggetti (es. cols='[…]')
+      // Auto-parse booleani quando il defaultValue è boolean e il valore
+      // è una delle stringhe canoniche true/false/0/1, oppure true/false.
+      // Casi supportati:
+      //   showInfoAtTop         (attributo senza valore → attr === '')  → true
+      //   showInfoAtTop="true"  / showInfoAtTop="1"                     → true
+      //   showInfoAtTop="false" / showInfoAtTop="0"                     → false
+      // Auto-parse booleani solo quando il parametro è dichiaratamente booleano
+      // (defaultValue === true | false). Copre tutti i formati HTML idiomatici:
+      //   showInfoAtTop            (attributo senza valore → '')  → true
+      //   showInfoAtTop="true"  /  showInfoAtTop="1"              → true
+      //   showInfoAtTop="false" /  showInfoAtTop="0"              → false
+      // I valori "1" e "0" NON vengono intercettati qui se defaultValue non è
+      // boolean, per non interferire con parametri numerici (es. perPage="1").
       const trimmed = attr.trim();
+      if (typeof defaultValue === 'boolean') {
+        const lower = trimmed.toLowerCase();
+        // Stringa vuota '' = attributo presente senza valore → true (standard HTML)
+        return lower !== 'false' && lower !== '0';
+      }
+
+      // Auto-parse JSON per array e oggetti (es. cols='[…]')
       if (trimmed.startsWith('[') || trimmed.startsWith('{')) {
         try { return JSON.parse(trimmed); } catch { /* restituisce la stringa grezza */ }
       }
@@ -760,24 +788,25 @@ class SimpleDatatableAdapter extends HTMLElement {
     });
 
     this._dt.on('datatable.init', () => {
+      // ── Icone paginazione ─────────────────────────────────────────────────
       const pagination = this.querySelector(`.${styles.paginationList}`);
-      if (!pagination) return;
-
-      const items = pagination.querySelectorAll(`.${styles.paginationListItem}`);
-      if (!items.length) return;
-
-      pagination.querySelector(
-        `.${styles.paginationListItem}:first-child .${styles.paginationListItemBtn}`
-      ).innerHTML = caretLeftIcon;
-
-      pagination.querySelector(
-        `.${styles.paginationListItem}:last-child .${styles.paginationListItemBtn}`
-      ).innerHTML = caretRightIcon;
-
-      pagination.querySelectorAll(`.${styles.paginationListItemBtn}:has(svg)`)
-        .forEach(btn => btn.classList.add(styles.hasSvg));
+      if (pagination) {
+        const items = pagination.querySelectorAll(`.${styles.paginationListItem}`);
+        if (items.length) {
+          pagination.querySelector(
+            `.${styles.paginationListItem}:first-child .${styles.paginationListItemBtn}`
+          ).innerHTML = caretLeftIcon;
+
+          pagination.querySelector(
+            `.${styles.paginationListItem}:last-child .${styles.paginationListItemBtn}`
+          ).innerHTML = caretRightIcon;
+
+          pagination.querySelectorAll(`.${styles.paginationListItemBtn}:has(svg)`)
+            .forEach(btn => btn.classList.add(styles.hasSvg));
+        }
+      }
 
-      // Ripristino pagina dal cookie di sessione (se referrer autorizzato)
+      // ── Ripristino pagina dal cookie di sessione (se referrer autorizzato) ─
       // const isRefUrl = this._isReferrer(), refsCallback = this._getParam('refsCallback', null);
       // if (isRefUrl) {
       if (this._isReferrer()) {
@@ -793,6 +822,7 @@ class SimpleDatatableAdapter extends HTMLElement {
       //   refsCallback(isRefUrl);
       // }
 
+      // ── Filtro contestuale post-reload ────────────────────────────────────
       // Applica eventuale filtro contestuale passato via reload({ search: … })
       // Lo facciamo qui, dentro datatable.init, per essere certi che
       // simple-datatables abbia completato il render dei nuovi dati.
@@ -807,14 +837,11 @@ class SimpleDatatableAdapter extends HTMLElement {
         }
       }
 
-      // Renderizza il tfoot (se almeno una colonna ha _footerRender)
+      // ── Tfoot, info, top slot ─────────────────────────────────────────────
+      // Eseguiti sempre, indipendentemente dalla presenza della paginazione.
       this._renderTfoot();
-
-      // Aggiorna il testo info con il totale assoluto
+      this._injectTopSlot();   // va prima di _updateInfo per creare il nodo top-info
       this._updateInfo();
-
-      // Inietta l'elemento nello slot top-sinistra (se configurato)
-      this._injectTopSlot();
     });
 
     // Salva la pagina corrente nel cookie ad ogni cambio di pagina;
@@ -927,84 +954,123 @@ class SimpleDatatableAdapter extends HTMLElement {
   /**
    * Sovrascrive il testo dell'area `.info` generato da simple-datatables per
    * includere sempre il totale assoluto dei record (indipendente dal filtro).
+   * Se `showInfoAtTop` è attivo, aggiorna in sincronia anche il nodo `.info`
+   * nell'area superiore (creato da `_injectTopSlot`).
+   *
+   * Calcolo di start/end: si conta il numero di righe renderizzate nel tbody
+   * (`dt.pages[currentPage - 1]`) invece di fare aritmetica su perPage,
+   * perché `dt.currentPage` può essere undefined al primo render.
    *
    * Comportamento:
    *   - Senza ricerca attiva:
    *       "Stai visualizzando le righe da {start} a {end}, su un totale di {total}."
-   *   - Con ricerca attiva:
-   *       "Stai visualizzando le righe da {start} a {end} dei {filtered} record filtrati,
-   *        su un totale di {total}."
+   *   - Con ricerca attiva (risultati > 0):
+   *       "Stai visualizzando le righe da {start} a {end} dei {filtered} record
+   *        filtrati, su un totale di {total}."
    *   - Nessun risultato (ricerca attiva, 0 match):
    *       "Nessun risultato per la ricerca corrente (totale record: {total})."
    *
-   * Viene chiamato da datatable.init, datatable.page, datatable.search,
-   * datatable.multisearch.
+   * Il nodo top-info viene nascosto quando filtered = 0 o total = 0.
    */
   _updateInfo() {
-    const infoEl = this.querySelector(`.${styles.info}`);
-    if (!infoEl) return;
+    const infoEl    = this.querySelector(`.${styles.info}`);
+    const topInfoEl = this.querySelector('.datatable-top-info');
 
-    const dt      = this._dt;
-    const total   = this._rawData?.length ?? 0;
+    if (!infoEl && !topInfoEl) return;
 
-    // Numero di record nel set corrente (filtrati o tutti)
+    const dt       = this._dt;
+    const total    = this._rawData?.length ?? 0;
     const filtered = dt.searching ? dt.searchData.length : total;
 
-    if (filtered === 0 && dt.searching) {
-      infoEl.textContent = `Nessun risultato per la ricerca corrente (totale record: ${total}).`;
+    let text;
+
+    if (total === 0 || (filtered === 0 && dt.searching)) {
+      // Nessun risultato — nasconde il nodo top-info se presente
+      if (topInfoEl) topInfoEl.hidden = true;
+
+      text = filtered === 0 && dt.searching
+        ? `Nessun risultato per la ricerca corrente (totale record: ${total}).`
+        : `Nessun record trovato.`;
+
+      if (infoEl) infoEl.textContent = text;
       return;
     }
 
-    // Calcola start/end della pagina corrente
-    const perPage    = dt.options.perPage;
-    const currentPage = dt.currentPage;                  // 1-based
-    const start      = (currentPage - 1) * perPage + 1;
-    const end        = Math.min(currentPage * perPage, filtered);
+    // Calcola start/end dalla pagina corrente in dt.pages (più affidabile di
+    // currentPage * perPage, che può dare NaN se currentPage è undefined
+    // al primo render oppure quando non c'è paginazione).
+    const currentPage  = dt.currentPage ?? 1;
+    const pageRows     = dt.pages?.[currentPage - 1] ?? [];
+    const perPage      = dt.options?.perPage ?? filtered;
+    const start        = pageRows.length > 0
+      ? (currentPage - 1) * perPage + 1
+      : 1;
+    const end          = pageRows.length > 0
+      ? start + pageRows.length - 1
+      : filtered;
 
     if (dt.searching) {
-      infoEl.textContent =
+      text =
         `Stai visualizzando le righe da ${start} a ${end} ` +
         `dei ${filtered} record filtrati, su un totale di ${total}.`;
     } else {
-      infoEl.textContent =
+      text =
         `Stai visualizzando le righe da ${start} a ${end}, ` +
         `su un totale di ${total}.`;
     }
+
+    if (infoEl)    infoEl.textContent    = text;
+    if (topInfoEl) { topInfoEl.textContent = text; topInfoEl.hidden = false; }
   }
 
 
   // ─── Top slot ────────────────────────────────────────────────────────────────
 
   /**
-   * Inietta un elemento DOM o del markup HTML nell'area in alto a sinistra
-   * del datatable — lo spazio normalmente occupato dal selettore "righe per
-   * pagina" (qui disabilitato con `perPageSelect: false`).
+   * Inietta nell'area in alto a sinistra del datatable il contenuto configurato.
+   *
+   * Modalità:
+   *
+   *   showInfoAtTop: true  (ha precedenza su topSlot)
+   *     Inserisce un nodo `.datatable-top-info` con la stessa stringa dell'area
+   *     `.info` in basso, mantenuta in sync da `_updateInfo`. Viene nascosto
+   *     automaticamente quando filtered = 0 o total = 0.
+   *     Il parametro `topSlot`, se presente, viene ignorato.
    *
-   * Il parametro `topSlot` accetta:
-   *   - un `Element` (già costruito fuori dal componente)
-   *   - una stringa HTML (viene parsata con `innerHTML`)
+   *   topSlot: Element | string  (usato solo se showInfoAtTop è false/assente)
+   *     Inserisce un elemento DOM o markup HTML arbitrario, avvolto in un
+   *     `<div class="datatable-top-slot">`.
    *
-   * L'elemento viene inserito come primo figlio dell'area `.topArea`,
-   * prima della search box, avvolto in un `<div class="datatable-top-slot">`.
-   * Se `topSlot` non è definito, non viene inserito nulla.
+   * In entrambi i casi l'elemento viene inserito come primo figlio di `.topArea`,
+   * prima della search box.
    *
-   * Esempio – stringa HTML:
-   *   el.init({
-   *     topSlot: '<button class="btn btn-sm btn-primary">Esporta CSV</button>',
-   *   });
+   * Esempi:
+   *   el.init({ showInfoAtTop: true });
+   *
+   *   el.init({ topSlot: '<button class="btn btn-sm btn-primary">Esporta</button>' });
    *
-   * Esempio – elemento DOM:
    *   const btn = document.createElement('button');
-   *   btn.textContent = 'Nuova commessa';
+   *   btn.textContent = 'Nuovo';
    *   el.init({ topSlot: btn });
    */
   _injectTopSlot() {
-    const topSlot = this._getParam('topSlot', null);
-    if (topSlot == null) return;
-
     const topArea = this.querySelector(`.${styles.topArea}`);
     if (!topArea) return;
 
+    const showInfoAtTop = this._getParam('showInfoAtTop', true);
+
+    if (showInfoAtTop) {
+      // Crea il nodo info top (il testo verrà scritto da _updateInfo)
+      const infoTop = document.createElement('div');
+      infoTop.className = `datatable-top-info ${styles.info}`;
+      infoTop.hidden = true;   // nascosto finché _updateInfo non lo popola
+      topArea.insertBefore(infoTop, topArea.firstChild);
+      return;
+    }
+
+    const topSlot = this._getParam('topSlot', null);
+    if (topSlot == null) return;
+
     const wrapper = document.createElement('div');
     wrapper.className = 'datatable-top-slot';
 
@@ -1014,7 +1080,6 @@ class SimpleDatatableAdapter extends HTMLElement {
       wrapper.innerHTML = topSlot;
     }
 
-    // Inserisce prima della search box (primo figlio esistente)
     topArea.insertBefore(wrapper, topArea.firstChild);
   }
 

package/src/web-components/s-datatable-component/s-datatable-component.module.css

@@ -19,6 +19,11 @@
   align-items: center;
   justify-content: flex-end;
   padding-block-end: var(--size-xs);
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  &:has(:global(.datatable-top-info)), &:has(:global(.datatable-top-slot)) {
+    justify-content: space-between;
+  }
 }
 
 .searchWrapper {

package/design-tokens-src/table.minimo.tokens.jsonc

@@ -1,66 +0,0 @@
-{
-  "table": {
-    "thead": {
-      "background": {
-        "color": {
-          "$type": "color",
-          "$value": "#ddd"
-        }
-      },
-      "border": {
-        "width" : {
-          "$type": "dimension",
-          "$value": "3px"
-        }
-      }
-    },
-
-    "body": {
-      "background": {
-        "color": null
-      },
-      "border": {
-        "width" : {
-          "$type": "dimension",
-          "$value": "1px"
-        }
-      },
-      "tr": {
-        "alt-bg-color": {
-          "$type": "color",
-          "$value": "#efefef"
-        },
-        "hover-bg-color": {
-          "$type": "color",
-          "$value": "#cbcbcb"
-        }
-      }
-    },
-
-    "border": {
-      "color" : {
-        "$type": "color",
-        "$value": "#333"
-      }
-    },
-
-    "cell": {
-      "padding" : {
-        "block": {
-          "$type": "dimension",
-          "$value": ".3rem"
-        },
-        "inline": {
-          "$type": "dimension",
-          "$value": ".6rem"
-        }
-      },
-      "line-height": {
-        "$type": "number",
-        "$value": "1.3"
-      }
-    }
-
-
-  }
-}