@massimo-cassandro/minimo 1.43.0 → 1.43.2

package/charts/src/helpers/parse-std-axis-opts.js

@@ -25,6 +25,7 @@ export function parseStdAxisOpts(params = {} ) {
       values: [], // array flat dei valori per il calcolo di maxValues e minValues, qualora fossero null
       legenda: null,
       padding: 0, // spazio intorno ai bordi del grafico
+      padding_right: null, // padding del solo lato destro; se null viene usato `padding`
       width: null, // width e height non possono essere null, vanno verificate prima
       height: null,
       eti_asseX_height: null, // non può essere null, va verificato prima
@@ -96,7 +97,7 @@ export function parseStdAxisOpts(params = {} ) {
     // i lati sx e inferiore corrispondono agli assi
     parsed.chart_area = {
       top       : legenda_height + gap_legenda + params.padding, // coordinata y superiore
-      right     : params.width - params.padding, // coordinata x dx
+      right     : params.width - (params.padding_right?? params.padding), // coordinata x dx
       bottom    : params.height - params.eti_asseX_height - params.ticksLength - params.padding, // coordinata y inferiore
       left      : params.eti_asseY_width + params.ticksLength + params.padding // coordinata x sx
     };

package/charts/src/lines.js

@@ -274,6 +274,17 @@ export async function lines(params) {
       .viewbox(0, 0, params.width, params.height)
       .attr({...params.svgAttrs});
 
+    /*
+      L'ultimo punto di ogni linea cade sul limite destro della chart area:
+      se il padding è inferiore al raggio massimo dei punti, il cerchio verrebbe tagliato dal bordo dell'svg.
+      In tal caso il padding destro viene portato al raggio massimo.
+    */
+    const radii = Array.isArray(params.data_points_attrs.r)
+      ? params.data_points_attrs.r
+      : [params.data_points_attrs.r];
+    const maxPointRadius = Math.max(0, ...radii.map(r => Number(r) || 0));
+    const paddingRight = Math.max(params.padding, maxPointRadius);
+
     // pre-elaborazione e calcolo di alcuni elementi (chartArea)
     // nuove variabili definite da parseStdAxisOpts
     const {
@@ -291,6 +302,7 @@ export async function lines(params) {
       values: flatValues,
       legenda: params.legenda,
       padding: params.padding,
+      padding_right: paddingRight,
       width: params.width,
       height: params.height,
       eti_asseX_height: params.xAxisLabelHeight,

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

@@ -12,7 +12,11 @@ export default {
           $type: 'dimension',
           $value: '3px'
         }
-      }
+      },
+      'vertical-align': {
+        $type: 'string',
+        $value: 'middle',
+      },
     },
     tfoot: {
       background: {
@@ -32,10 +36,15 @@ export default {
           $type: 'fontWeight',
           $value: '{font.weight.semibold}',
         }
+      },
+      'vertical-align': {
+        $type: 'string',
+        $value: 'middle',
+
       }
     },
 
-    body: {
+    tbody: {
       background: {
         color: null
       },
@@ -45,6 +54,11 @@ export default {
           $value: '1px'
         }
       },
+      'vertical-align': {
+        $type: 'string',
+        $value: 'middle',
+
+      },
       tr: {
         'alt-bg-color': {
           $type: 'color',

package/dev-tools/starter-kit/source_files/app/CLAUDE.md

@@ -15,3 +15,4 @@
 - nei commenti jsDoc aggiungere sempre dove possibile una sezione example che riepiloghi i vari parametri mostrando i valori di default
 - commenti nel codice (inclusi TODO/FIX e jsDoc) e file README vanno scritti sempre in italiano; gli identificatori restano in inglese
 - nei documenti markdown generati non andare a capo forzatamente alla fine di ogni riga: un paragrafo è una sola riga, così si usa il soft wrap dell'editor ed è più semplice fare correzioni
+- Le tabelle nei file `.md` devono avere le celle allineate con spazi (colonne di larghezza uniforme, separatore `---` della stessa larghezza), in modo da essere leggibili anche in modalità editor.

package/dev-tools/starter-kit/source_files/root/CLAUDE.md

@@ -7,3 +7,4 @@
 Backend in symfony, frontend nella dir `/app`
 
 vedi anche `app/CLAUDE.md`
+

package/dev-tools/starter-kit/source_files/root/_gitignore

@@ -20,6 +20,7 @@
 # frontend
 node_modules
 _private
+_reports/**/*.html
 public/_dev
 unresolved-unused-props.md
 orphan-classes.md

package/dev-tools/starter-kit/source_files/root/_reports/.hintrc

@@ -0,0 +1,12 @@
+{
+  "extends": ["development"],
+  "connector": {
+    "name": "puppeteer",
+    "options": {
+      "headless": true,
+      "puppeteerOptions": {
+        "executablePath": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+      }
+    }
+  }
+}

package/dev-tools/starter-kit/source_files/root/_reports/README.md

@@ -0,0 +1,45 @@
+# Report Lighthouse / webhint
+
+Cartella ignorata da git. Gli script sono in `package.json` di questa cartella;
+`lighthouse` e `hint` sono devDependencies del progetto (root).
+
+## Installazione
+
+```
+npm i -D lighthouse hint
+```
+
+## Step
+
+Dalla root del progetto (o dentro `_reports`, senza `--prefix`):
+
+1. Build di produzione: `npm run --prefix _reports "webpack PROD"`
+2. Avvio PHP in prod (porta 8100): `npm run --prefix _reports "server PROD"`
+   (a fine test chiudere il terminale con il pulsante cestino di VS Code, per liberare la porta)
+3. In un altro terminale:
+   - `npm run --prefix _reports "lighthouse mobile"` → `mobile.html`
+   - `npm run --prefix _reports "lighthouse desktop"` → `desktop.html`
+   - `npm run --prefix _reports webhint` → `hint-report/http-localhost-8100.html`
+
+## Note
+
+- Lanciare i test sempre sulla build prod, non sul dev server di webpack.
+- webhint usa il connector `puppeteer` con il Chrome installato (`.hintrc` in questa cartella, `executablePath` di macOS; il finder automatico non lo trova), in modalità headless: render reale, quindi anche le regole sul layout sono attendibili. Gli avvisi iniziali su `typescript-config/*` sono normali (regole non applicabili).
+- `.hintrc` va letto dalla directory corrente: lanciare webhint da `_reports` (lo script `--prefix` lo fa).
+- Usare gli stessi dati nel database locale tra un run e l'altro: la home cambia con i gruppi disponibili e rende i punteggi non confrontabili.
+- Lighthouse oscilla di qualche punto tra un run e l'altro: fare 3 run e prendere la mediana.
+- Per i numeri definitivi (rete, compressione, CDN) ripetere su staging/produzione.
+
+
+## Caratteristiche del server
+
+Lo script prod usa il server integrato di PHP (`php -S`). Rispetto al server reale tenere presente che: 
+
+* esegue un solo processo per volta, più richieste vanno in coda
+* non esegue compressione gzip/brotli
+
+Note:
+
+- `APP_ENV=prod APP_DEBUG=0` sono variabili d'ambiente lette da Symfony (non dal server): con `php -S` vengono ereditate dal processo e hanno la precedenza sui file `.env` / `.env.local`.
+- `php -S` usa il `php.ini` della CLI, che può differire da quello di `php-cgi`.
+- Con richieste in coda i tempi di caricamento di asset e immagini possono risultare peggiori: i numeri di performance locali sono indicativi.

package/dev-tools/starter-kit/source_files/root/_reports/_package.json

@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "webpack PROD": "cd .. && NODE_ENV=production webpack --config ./webpack.config.mjs --stats minimal",
+    "server PROD": "cd .. && APP_ENV=prod APP_DEBUG=0 php -S 127.0.0.1:8100 -t public public/index.php # http://localhost:8100 (server integrato php: la CLI symfony ammette un solo server per progetto)",
+    "lighthouse mobile": "npx lighthouse http://localhost:8100/ --form-factor=mobile --output=html --output-path=./mobile.html --view",
+    "lighthouse desktop": "npx lighthouse http://localhost:8100/ --preset=desktop --output=html --output-path=./desktop.html --view",
+    "webhint": "npx hint http://localhost:8100/"
+  }
+}

package/dev-tools/starter-kit/source_files/root/package-tpl.json

@@ -23,7 +23,6 @@
     "symfony server": "symfony serve --port=[[port8000]] --listen-ip=0.0.0.0 # http://192.168.1.135:[[port8000]] # -d (deamon): rimane aperto anche dopo la chiusura del terminale, terminare con `symfony server:stop`",
     "launchChrome": "open -n -a 'Google Chrome' --args --profile-directory='Profile 3' # mbn: 1 / mg2: 3",
     "webpack PROD": "npm run 'UPD-version' && NODE_ENV=production webpack --config ./webpack.config.mjs --stats minimal",
-    "UPD-version": "npx update-version --no-log-v0 --log-file=./changelog.md # --log-patch --pkg=alt/path/to/package.json --default-patch-log=__log_text__",
     "email sass": "npx sass ./app/email:./templates/email/css --no-source-map --style=compressed --watch",
     "postcss email": "postcss ./app/email/[!_]*.css --dir ./templates/email/css --no-map --verbose --config ./app/email --watch",
     "eslint-check": "npx eslint app/",
@@ -35,12 +34,14 @@
     "build tokens": "npx buildTokens --config ./app/css/tokens-config.mjs",
     "check unresolved props": "npx checkUnresolvedProps --config ./app/css/tokens-config.mjs",
     "find orphan css classes": "npx findOrphanCssClasses --config ./app/css/orphan-css-classes.config.mjs",
+    "UPD-version": "npx update-version --no-log-v0 --log-file=./changelog.md # --log-patch --pkg=alt/path/to/package.json --default-patch-log=__log_text__",
     "npm-outdated": "npm outdated",
     "upd@m": "npx upd@m",
     "npm-upd": "npm update --save"
   },
   "allowScripts": {
-    "@parcel/watcher": false
+    "@parcel/watcher": false,
+    "fsevents@2.3.3": true
   },
   "devDependencies": {},
   "dependencies": {}

package/dev-tools/starter-kit/source_files/root/webpack.config.mjs

@@ -103,21 +103,27 @@ const isDevelopment = process.env.NODE_ENV === 'development'
   ,minimo_path = './node_modules/@massimo-cassandro/minimo' // fromProjectRoot('node_modules/@massimo-cassandro/minimo')
 
   ,usePurgeCss = true // false per disattivare PurgeCSS (debug rapido di problemi legati al purge)
+  ,purgeCssInDev = false
   ,purgeCSSOptions = {
     keyframes: true, // rimuove i @keyframes non referenziati
     debug: false // true per loggare i selettori rimossi da PurgeCSS a fine build
   }
 
-  // plugin per l'estrazione ottimizzata delle custom properties (vedi
-  // webpack-config-modules/custom-props-purgecss-plugin.mjs): dopo la
-  // minificazione inietta nei css compilati SOLO le definizioni di custom
-  // properties effettivamente usate, prese dal file master. I css del progetto
-  // contengono quindi solo usi `var(--nome)`, mai definizioni (custom-properties.css
-  // NON va importato nelle entry css). Se false il plugin non viene nemmeno
-  // caricato e la gestione delle custom properties resta a carico del progetto
+  /*
+    plugin per l'estrazione ottimizzata delle custom properties (vedi
+    webpack-config-modules/custom-props-purgecss-plugin.mjs): dopo la
+    minificazione inietta nei css compilati SOLO le definizioni di custom
+    properties effettivamente usate, prese dal file master. I css del progetto
+    contengono quindi solo usi `var(--nome)`, mai definizioni (custom-properties.css
+    NON va importato nelle entry css). Se false il plugin non viene nemmeno
+    caricato e la gestione delle custom properties resta a carico del progetto
+  */
   ,useCustomPropsPlugin = true
-  // file master con TUTTE le definizioni di custom properties disponibili
-  // (copiato da minimo da starter-install.sh, generato da `npm run 'build tokens'`)
+
+  /*
+    file master con TUTTE le definizioni di custom properties disponibili
+    (copiato da minimo da starter-install.sh, generato da `npm run 'build tokens'`)
+  */
   ,customPropsFile = path.resolve(__dirname, './app/css/custom-properties.css')
 
   /*
@@ -143,14 +149,15 @@ const isDevelopment = process.env.NODE_ENV === 'development'
   */
   ,standaloneEntries = []
 
-  // PurgeCSS e plugin custom properties lavorano sugli asset css finali:
-  // in dev, con `false`, sono entrambi disattivati (build più veloce, css
-  // iniettato con style-loader; se `useCustomPropsPlugin` è true le definizioni
-  // vengono aggiunte per intero alle entry, vedi `parsedEntries`).
-  // Con `true` (a scopo di test) sono attivi come in produzione (secondo i
-  // rispettivi flag `usePurgeCss` / `useCustomPropsPlugin`) e `inlineCssInDevMode`
-  // viene forzato a false
-  ,purgeCssInDev = false
+  /*
+    PurgeCSS e plugin custom properties lavorano sugli asset css finali:
+    in dev, con `false`, sono entrambi disattivati (build più veloce, css
+    iniettato con style-loader; se `useCustomPropsPlugin` è true le definizioni
+    vengono aggiunte per intero alle entry, vedi `parsedEntries`).
+    Con `purgeCssInDev = true` (a scopo di test) sono attivi come in produzione (secondo i
+    rispettivi flag `usePurgeCss` / `useCustomPropsPlugin`) e `inlineCssInDevMode`
+    viene forzato a false
+  */
   ,runCustomPropsPlugin = useCustomPropsPlugin && (!isDevelopment || purgeCssInDev)
   // ,manifest_shared_seed = {}
 ;

package/dev-tools/starter-kit/starter-install.sh

@@ -42,13 +42,13 @@ fi
 # Package manager da utilizzare per l'installazione dei pacchetti: 1 = pnpm
 # (default), 2 = npm. Il valore viene usato più sotto (sezione NODE MODULES)
 # per scegliere il comando di installazione.
-read "PM_INPUT?Package manager da utilizzare (1 = pnpm, 2 = npm) [1]: "
+read "PM_INPUT?Package manager da utilizzare (1 = npm, 2 = pnpm) [1]: "
 PM_INPUT=${PM_INPUT:-1}
 case "$PM_INPUT" in
-  1) PKG_MANAGER="pnpm" ;;
-  2) PKG_MANAGER="npm" ;;
+  1) PKG_MANAGER="npm" ;;
+  2) PKG_MANAGER="pnpm" ;;
   *)
-    printf "${RED}Errore: inserire 1 (pnpm) oppure 2 (npm).${NC}\n" >&2
+    printf "${RED}Errore: inserire 1 (npm) oppure 2 (pnpm).${NC}\n" >&2
     exit 1
     ;;
 esac

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.43.0",
+  "version": "1.43.2",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./src/index.js",

package/src/css/grid.css

@@ -2,10 +2,8 @@
 
 .grid {
   --_cols: 1;
-  /* --_min-col-width: calc((100% - calc(var(--_cols) * var(--flex-grid-gap))) / var(--grid-cols));  NB custom prop rimossa */
 
   display: grid;
-  /* grid-template-columns: repeat(var(--_cols), minmax(var(--grid-min-col-width), 1fr)); NB custom prop rimossa */
   grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
   grid-auto-flow: row;
   gap: var(--flex-grid-gap);
@@ -28,7 +26,7 @@
   @media (--media-large-viewport-up) {
     --_cols: 4;
 
-    /* versione a 3, 4, 5, 6, 8 colonne */
+    /* versione a 2-10 colonne */
     &.grid-2 {
       --_cols: 2;
     }
@@ -44,9 +42,18 @@
     &.grid-6 {
       --_cols: 6;
     }
+    &.grid-7 {
+      --_cols: 6;
+    }
     &.grid-8 {
       --_cols: 8;
     }
+    &.grid-9 {
+      --_cols: 9;
+    }
+    &.grid-10 {
+      --_cols: 10;
+    }
 
     > .span-2 {
       grid-column-end: span 2;
@@ -54,10 +61,15 @@
     > .span-3 {
       grid-column-end: span 3;
     }
-
     > .span-4 {
       grid-column-end: span 4;
     }
+    > .span-5 {
+      grid-column-end: span 5;
+    }
+    > .span-6 {
+      grid-column-end: span 6;
+    }
   } /* end @media */
 
   /* grid items */

package/src/css/table.css

@@ -24,6 +24,10 @@
     tr:last-child {
       border-width: var(--table-thead-border-width);
     }
+
+    th {
+      vertical-align: var(--table-thead-vertical-align, top);
+    }
   }
 
   tfoot {
@@ -33,31 +37,30 @@
     }
     th, td {
       font-weight: var(--table-tfoot-font-weight);
+      vertical-align: var(--table-tfoot-vertical-align, top);
     }
   }
 
   tbody {
     tr:nth-child(even) {
-      background-color: var(--table-body-tr-alt-bg-color);
+      background-color: var(--table-tbody-tr-alt-bg-color);
     }
 
     @media (hover: hover) {
       tr:hover {
-        background-color: var(--table-body-tr-hover-bg-color);
+        background-color: var(--table-tbody-tr-hover-bg-color);
       }
     }
+    th {
+      vertical-align: var(--table-tbody-vertical-align, top);
+    }
   }
 
 
   th, td {
     padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
     line-height: var(--table-cell-line-height);
-    vertical-align: top;
     text-align: start;
-
-    .valign-middle &, &.valign-middle {
-      vertical-align: middle;
-    }
   }
 
   &.table-bordered {
@@ -76,8 +79,8 @@
 @media (prefers-color-scheme: dark) {
 .table {
   --table-border-color: var(--_stone-8);
-  --table-body-tr-alt-bg-color: color-mix(in srgb, var(--_stone-12) 60%, transparent);
-  --table-body-tr-hover-bg-color: color-mix(in srgb, var(--_blue-12) 60%, transparent);
+  --table-tbody-tr-alt-bg-color: color-mix(in srgb, var(--_stone-12) 60%, transparent);
+  --table-tbody-tr-hover-bg-color: color-mix(in srgb, var(--_blue-12) 60%, transparent);
 }
 }
 */

package/src/custom-properties.css

@@ -227,7 +227,7 @@
   --jt-caption-font-size: var(--font-size-sm);
   --jt-empty-color: var(--text-muted);
   --jt-empty-padding-block: var(--size-sm);
-  --jt-info-color: var(--text-muted);
+  --jt-info-color: var(--text-color);
   --jt-info-font-size: var(--font-size-sm);
   --jt-info-gap: var(--size-sm);
   --jt-info-outer-padding-block-end: var(--size-xs);
@@ -240,7 +240,7 @@
   --jt-pagination-current-font-weight: var(--font-weight-semibold);
   --jt-pagination-disabled-opacity: .5;
   --jt-pagination-font-size: var(--font-size-sm);
-  --jt-pagination-hover-background-color: var(--table-body-tr-hover-bg-color);
+  --jt-pagination-hover-background-color: var(--table-tbody-tr-hover-bg-color);
   --jt-pagination-icon-size: 1em;
   --jt-pagination-line-height: var(--table-cell-line-height);
   --jt-pagination-radius: var(--radius-xxs);
@@ -420,18 +420,21 @@
   --status-warning-color: #fc0;
   --status-warning-fg: #4f2900;
 
-  --table-body-border-width: 1px;
-  --table-body-tr-alt-bg-color: #efefef;
-  --table-body-tr-hover-bg-color: #cbcbcb;
   --table-border-color: #333;
   --table-cell-line-height: 1.3;
   --table-cell-padding-block: .3rem;
   --table-cell-padding-inline: .6rem;
+  --table-tbody-border-width: 1px;
+  --table-tbody-tr-alt-bg-color: #efefef;
+  --table-tbody-tr-hover-bg-color: #cbcbcb;
+  --table-tbody-vertical-align: middle;
   --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-tfoot-vertical-align: middle;
   --table-thead-background-color: #ddd;
   --table-thead-border-width: 3px;
+  --table-thead-vertical-align: middle;
 
   --text-color: #000;
   --text-dim: var(--text-muted);

package/src/web-components/json-table/json-table.minimo.tokens.mjs

@@ -214,7 +214,7 @@ export default {
         background: {
           color: {
             $type: 'color',
-            $value: '{table.body.tr.hover-bg-color}'
+            $value: '{table.tbody.tr.hover-bg-color}'
           }
         }
       },

package/src/web-components/json-table/jt-docs.md

@@ -506,7 +506,7 @@ Definite in `json-table.minimo.tokens.mjs` (namespace `--jt-*`):
 | `--jt-pagination-icon-size` | `1em` |
 | `--jt-pagination-current-background-color` | `{table.thead.background.color}` |
 | `--jt-pagination-current-font-weight` | `{font.weight.semibold}` |
-| `--jt-pagination-hover-background-color` | `{table.body.tr.hover-bg-color}` |
+| `--jt-pagination-hover-background-color` | `{table.tbody.tr.hover-bg-color}` |
 | `--jt-pagination-disabled-opacity` | `.5` |
 | `--jt-bool-icon-size` | `1.1em` |
 | `--jt-bool-true-color` | `{status.success.color}` |

package/types/classes.d.ts

@@ -76,12 +76,15 @@ export type MinimoClass =
   | 'gap-0'
   | 'gap-2'
   | 'grid'
+  | 'grid-10'
   | 'grid-2'
   | 'grid-3'
   | 'grid-4'
   | 'grid-5'
   | 'grid-6'
+  | 'grid-7'
   | 'grid-8'
+  | 'grid-9'
   | 'grid-full-row'
   | 'grid-item-last'
   | 'grid-new-row'
@@ -854,6 +857,8 @@ export type MinimoClass =
   | 'span-2'
   | 'span-3'
   | 'span-4'
+  | 'span-5'
+  | 'span-6'
   | 'spinner'
   | 'table'
   | 'table-bordered'
@@ -878,7 +883,6 @@ export type MinimoClass =
   | 'text-upper'
   | 'text-warning'
   | 'text-xs'
-  | 'valign-middle'
   | 'visibility-hidden'
   | 'visually-hidden'
   | 'w-100'