@massimo-cassandro/minimo 1.43.1 → 1.43.3

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/dev-tools/starter-kit/source_files/root/package-tpl.json

@@ -40,7 +40,8 @@
     "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 → webpack.config-tpl.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/webpack-config-upg.md

@@ -2,6 +2,8 @@
 
 La versione della configurazione in uso è indicata dal commento `// v.N` alla riga 2 di `webpack.config.mjs` e di ogni file in `webpack-config-modules/`.
 
+Dove non esiste il commento, si intende una configurazione v2 o precedente.
+
 Le versioni precedenti sono conservate in `archived/webpack-config-v2/` del repository di minimo.
 
 > **Alternativa rapida:** rilanciare `starter-install.sh` (è idempotente): i file diversi dai sorgenti vengono rinominati `OLD-<nome>` e sostituiti dalla nuova versione. Poi si riportano nel nuovo `webpack.config.mjs` le personalizzazioni del progetto (entry, glob dei contenuti, safelist, template html, regole custom) copiandole da `OLD-webpack.config.mjs`. Le istruzioni seguenti servono per aggiornare a mano un progetto già esistente.
@@ -30,6 +32,8 @@ Riepilogo delle modifiche:
 
 ### 1. Moduli in `webpack-config-modules/`
 
+- aggiornare tutti i moduli con versione precedente a quella presente nello starter-kit
+- cssnano non è più utilizzato, se presente effettuare un `npm uninstall`  
 - **Aggiungere** `custom-props-purgecss-plugin.mjs`.
 - **Sostituire** `purgecss-setup.mjs` con la versione v3 (non gestisce più `variables` né `variablesSafelist`; la firma di `createPurgeCSSPlugins` non accetta più `variablesSafelist` e `variables`).
 - **Eliminare** `purgecss-variables-safelist.mjs` (sostituito dal plugin).

package/package.json

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

package/src/components/sf-macro/sf-macro.js

@@ -4,6 +4,7 @@ import './sf-macro.css';
 // TODO[epic=v2] in una v. 2 di minimo, rinominare wrapper_selector e row_selector in
 // wrapperClass e rowClass (NB: classi, non selettori, per uniformità con closeBtnClass/addBtnClass/containerClass
 // aggiunti sotto) e rendere tutti i parametri camelCase.
+// TODO[epic=v2] rendere tutti i parametri camelCase, predisporre script di conversione automatica
 // TODO[epic=v2] valutare se rendere opzionale, tramite parametro, l'importazione statica
 // di sf-macro.css qui sopra (questione lasciata in sospeso).
 
@@ -20,6 +21,21 @@ import './sf-macro.css';
  * @param {((row: Element | null, closeBtn: Element | null) => void) | null} [options.del_callback=null] - Chiamata dopo la rimozione di una riga; riceve la riga rimossa (ormai scollegata) e il pulsante di chiusura. (default: null)
  * @param {boolean} [options.insertAtTop=false] - Se true, le nuove righe vengono inserite in cima. (default: false)
  * @returns {void}
+ *
+ * @example
+ * sf_macro({
+ *   wrapper_selector: '.sf-macro-wrapper',
+ *   row_selector: '.sf-macro-riga',
+ *   closeBtnClass: 'sf-macro-close-btn',
+ *   addBtnClass: 'sf-macro-riga-add',
+ *   containerClass: 'sf-macro-container',
+ *   insertAtTop: false,
+ *   // addBtn è il pulsante di aggiunta (action_btn) su cui è avvenuto il click
+ *   add_callback: (newRow, addBtn) => {},
+ *   // closeBtn è il pulsante di rimozione (action_btn) su cui è avvenuto il click
+ *   preDelCallback: async (row, closeBtn) => true,
+ *   del_callback: (row, closeBtn) => {}
+ * });
  */
 export function sf_macro({
   wrapper_selector = '.sf-macro-wrapper',

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/utilities/dom-builder-helpers/picture-tag.js

@@ -1,6 +1,42 @@
 /*! minimo - buildPictureTag */
 import { classnames } from '../classnames.js';
 
+/*
+ * TODO valori di `sizes` in rem/em: permettere di indicare `from` e `size` anche in unità relative
+ * (es. `'40rem'`), oltre ai px numerici, sia nell'attributo `sizes` sia nelle condizioni media.
+ * Da definire come calcolare le dimensioni in px dei candidati `srcset` (es. base font-size configurabile).
+ *
+ *
+ * TODO rivedere e semplificare l'intera funzione (parametri, normalizzazione di `sizes`, calcolo dei
+ * candidati) e ampliare gli esempi iniziali del JSDoc, coprendo un numero maggiore di casi d'uso.
+ *
+ *
+ * TODO URL autonomo per singola size (override di `baseSrc`) — da valutare
+ *
+ * Obiettivo: permettere che ogni candidato dello `srcset` (per entry di `sizes`) ignori `baseSrc`
+ * e usi un URL completamente autonomo.
+ *
+ * Ipotesi A (array parallelo): nuovo parametro `baseSrcset`, array di stringhe o `{src, isViewer}`;
+ * per ogni entry di `sizes` si usa `baseSrcset[i]` al posto di `baseSrc`; se manca o è null, si usa `baseSrc`.
+ * Se `isViewer` è true (default) si aggiungono i parametri `bb`/`q`/`f`, altrimenti l'URL è usato tal quale.
+ *
+ * Ipotesi B (consigliata): proprietà `src` direttamente nella entry di `sizes`,
+ * `{ from, size, src: string | {src, isViewer} }`, senza array parallelo.
+ * Contro: le entry con override non possono usare la scorciatoia numerica.
+ *
+ * Dubbi da sciogliere:
+ * - A vs B: in A `sizes` viene riordinato per breakpoint, quindi `baseSrcset[i]` richiede di tracciare
+ *   l'indice originale prima del sort (fragile).
+ * - `isViewer: false` e `formats`: un URL non gestito dal viewer non può essere convertito in
+ *   avif/webp/pjpg. Proposta: usarlo tal quale in tutti gli `srcset` (`source` e `img`), con il formato
+ *   a carico di chi lo passa. Alternative: solo nell'`img` di fallback, oppure omettere i `source`.
+ * - `dpr`: un URL non-viewer non è ridimensionabile, quindi un solo candidato per entry
+ *   (descrittore `w` = larghezza della size) invece di uno per densità.
+ * - `baseSrc` obbligatorio solo se almeno una entry non ha override (oggi `null` se manca).
+ * - Una stringa semplice vale come `{src, isViewer: true}`: per un URL non-viewer serve sempre l'oggetto.
+ * - Aggiornare JSDoc (typedef, `@param baseSrc`, `@example` con caso misto).
+ */
+
 /**
  * @typedef {Object} PictureSizeEntry
  * @property {number} [from] - Breakpoint (px) da cui si applica la size (condizione media `width >=`); omesso nell'(unica) entry predefinita mobile-first.
@@ -68,7 +104,7 @@ import { classnames } from '../classnames.js';
  * });
  *
  * @param {Object} args
- * @param {string} args.baseSrc - URL base dell'immagine (endpoint del viewer); i suoi parametri di query vengono conservati.
+ * @param {string} args.baseSrc - URL base dell'immagine (endpoint del viewer); i suoi parametri di query vengono conservati. Un URL relativo (es. `/img/abc123`) viene risolto rispetto alla location corrente.
  * @param {(number | [number, number] | PictureSizeEntry)[]} [args.sizes=[250]] - Dimensioni renderizzate dell'immagine, in qualsiasi ordine. Ogni entry è un oggetto `{from, size}` (vedi {@link PictureSizeEntry}); un numero semplice o una coppia `[width, height]` è la scorciatoia per l'entry predefinita mobile-first (quella senza `from`), attesa esattamente una volta (default: [250])
  * @param {number|null} [args.ratio=null] - Aspect ratio predefinito (larghezza / altezza, come nella proprietà CSS `aspect-ratio`) usato per calcolare l'altezza delle size numeriche. Se null, l'altezza non viene calcolata: gli output legati all'altezza (attributo `height`, altezza nel parametro `bb`) vengono omessi e il viewer mantiene il ratio originale dell'immagine (default: null)
  * @param {number} [args.dpr=2] - Densità di pixel massima (intero): i candidati di `srcset` vengono generati per ogni densità da 1 a `dpr` (default: 2)
@@ -143,7 +179,8 @@ export function buildPictureTag({
     console.warn('[buildPictureTag] `sizes` must contain exactly one entry without `from` (the mobile-first default)');
   }
 
-  const base_url = new URL(baseSrc)
+  // gli URL relativi (es. `/img/abc123`) vengono risolti rispetto alla location corrente
+  const base_url = new URL(baseSrc, globalThis.location?.href)
     ,searchParams = new URLSearchParams(base_url.search)
 
     // dimensioni dei candidati srcset (una per ogni densità da 1 a `dpr`),
@@ -200,7 +237,7 @@ export function buildPictureTag({
       searchParams.set('f', fmt);
 
       srcsetSizes.forEach(([w, h]) => {
-        // TODO senza altezza `bb=<w>x` vale per questo viewer: prevedere altre convenzioni (es. imgix)
+        // TODO senza altezza `bb=<w>x` vale per il viewer di default: prevedere altre convenzioni (es. imgix)
         searchParams.set('bb', `${w}x${h ?? ''}`);
         base_url.search = searchParams.toString();
         srcsetArray.push(`${base_url.toString()} ${w}w`);

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'