@massimo-cassandro/minimo 0.16.1 → 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.1",
+  "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

@@ -358,7 +358,7 @@ Il testo si aggiorna automaticamente ad ogni cambio pagina, ricerca e multisearc
 
 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`, `topSlot` viene ignorato.
+escludono: se `showInfoAtTop` è `true` (default), `topSlot` viene ignorato.
 
 ### `showInfoAtTop`
 

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

@@ -123,7 +123,7 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
  *                                           automaticamente quando non ci sono record o la ricerca
  *                                           non produce risultati. Ha precedenza su `topSlot`:
  *                                           se entrambi sono definiti, `topSlot` viene ignorato.
- *                                           Default: false.
+ *                                           Default: true.
  *
  * @param {string[]}      refs  Elenco di percorsi URL da cui, se si proviene,
  *                                           la pagina corrente viene ripristinata dal cookie
@@ -413,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 */ }
       }
@@ -1038,7 +1057,7 @@ class SimpleDatatableAdapter extends HTMLElement {
     const topArea = this.querySelector(`.${styles.topArea}`);
     if (!topArea) return;
 
-    const showInfoAtTop = this._getParam('showInfoAtTop', false);
+    const showInfoAtTop = this._getParam('showInfoAtTop', true);
 
     if (showInfoAtTop) {
       // Crea il nodo info top (il testo verrà scritto da _updateInfo)

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"
-      }
-    }
-
-
-  }
-}