@massimo-cassandro/minimo 0.11.0 → 0.11.2

package/index.js

@@ -1,4 +1,14 @@
+
+// utilities
 export { classnames } from './src/utilities/classnames.js';
 export { domBuilder } from './src/utilities/dom-builder/dom-builder.js';
 export { enableSubmitBtns } from './src/utilities/enable-submit-btns.js';
+
+// components
 export { default as modalAlert } from './src/components/modal-alert/modal-alert.js';
+export { dismissAlerts } from './src/components/dismiss-alerts.js';
+export { formResetSubmit } from './src/components/form-reset-submit.js';
+export { innerNav } from './src/components/inner-nav/inner-nav.js';
+export { overlay, removeOverlay } from './src/components/overlay/overlay.js';
+export { sf_macro } from './src/components/sf-macro/sf-macro.js';
+export { snackbar } from './src/components/snackbar/snackbar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -30,16 +30,7 @@
     "access": "public"
   },
   "main": "./index.js",
-  "sideEffects": [
-    "*.css",
-    "*.js",
-    "*.svg",
-    "*.jpg",
-    "*.jpeg",
-    "*.png",
-    "*.webp",
-    "*.avif"
-  ],
+  "sideEffects": false,
   "files": [
     "./index.js",
     "src/**/*.{js,mjs,css,svg,md}",

package/src/components/dismiss-alerts.js

@@ -1,6 +1,7 @@
-// dismiss alerts
-document.querySelectorAll('[data-dismiss]').forEach(item => {
-  item.addEventListener('click', () => {
-    item.closest('.' + item.dataset.dismiss).remove();
-  }, false);
-});
+export function dismissAlerts(){
+  document.querySelectorAll('[data-dismiss]').forEach(item => {
+    item.addEventListener('click', () => {
+      item.closest('.' + item.dataset.dismiss).remove();
+    }, false);
+  });
+}

package/src/components/form-reset-submit.js

@@ -0,0 +1,38 @@
+// import './form.css'; //incorporato nel css principale
+import { enableSubmitBtns } from '../../index.js';
+
+export function formResetSubmit(){
+
+  document.querySelectorAll('form').forEach( form => {
+
+    // form.querySelectorAll('[type="submit"]').forEach(btn =>{
+    //   btn.addEventListener('click', () => {
+    //     form.classList.add('was-validated');
+    //   }, false);
+    // });
+
+    form.addEventListener('submit', e => {
+
+      if(!form.hasAttribute('data-no-was-validated')) {
+        form.classList.add('was-validated');
+      }
+
+      form.querySelectorAll('.is-invalid, .is-valid').forEach(item => {
+        item.classList.remove('is-invalid', 'is-valid');
+      });
+
+      if(!form.checkValidity()) {
+        e.preventDefault();
+        enableSubmitBtns();
+
+      } else {
+        if(!form.hasAttribute('data-no-disabling') && !form.hasAttribute('data-disable-submit')) { /* 'data-disable-submit' per compatibilitò con verioni precedenti */
+          form.querySelectorAll('[type="submit"]').forEach(btn => {
+            btn.disabled = true;
+          });
+        }
+      }
+    }, false);
+  });
+}
+

package/src/components/inner-nav/inner-nav.js

@@ -7,13 +7,16 @@
 
 import './inner-nav.css';
 
-let nav_primary = document.querySelector('.inner-nav-main');
-if (nav_primary) {
-  // nav_primary.classList.add('text-right', 'd-print-none');
-  let nav = nav_primary.innerHTML;
+export function innerNav(){
 
-  document.querySelectorAll('.inner-nav').forEach(item => {
-    item.innerHTML = nav;
-    // item.classList.add('text-right', 'd-print-none');
-  });
+  const nav_primary = document.querySelector('.inner-nav-main');
+  if (nav_primary) {
+    // nav_primary.classList.add('text-right', 'd-print-none');
+    let nav = nav_primary.innerHTML;
+
+    document.querySelectorAll('.inner-nav').forEach(item => {
+      item.innerHTML = nav;
+      // item.classList.add('text-right', 'd-print-none');
+    });
+  }
 }

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

@@ -1,27 +1,27 @@
-# `s-datatable` web-component for simple-datatatble
+# `s-datatable` web-component per simple-datatables
 
-</https://fiduswriter.github.io/simple-datatables/documentation/>
+<https://fiduswriter.github.io/simple-datatables/documentation/>
 
 
 ## Utilizzo da markup
 
 ```html
- <s-datatable
-   json="/api/data.json"
-   cols='[{"_heading":"Nome","_field":"name"}, ...]'
-   perPage="10"
- ></s-datatable>
- 
- <!-- Alternativa: dati inline via attributo (utile per SSR/Twig/Blade).
-      Se presenti entrambi, `data` ha la precedenza su `json`. -->
- <s-datatable
-   data='[{"name":"Mario","city":"Roma"}, ...]'
-   cols='[{"_heading":"Nome","_field":"name"}, ...]'
-   perPage="10"
- ></s-datatable>
- ```
- 
-## Utilizzo da script
+<s-datatable
+  json="/api/data.json"
+  cols='[{"_heading":"Nome","_field":"name"}, ...]'
+  perPage="10"
+></s-datatable>
+
+<!-- Alternativa: dati inline via attributo (utile per SSR/Twig/Blade).
+     Se presenti entrambi, `data` ha la precedenza su `json`. -->
+<s-datatable
+  data='[{"name":"Mario","city":"Roma"}, ...]'
+  cols='[{"_heading":"Nome","_field":"name"}, ...]'
+  perPage="10"
+></s-datatable>
+```
+
+## Utilizzo da script
 
 ```javascript
 const el = document.querySelector('s-datatable');
@@ -43,23 +43,25 @@ el.init({
 // Se appena creato, appendere dopo init():
 document.body.appendChild(el);
 ```
- 
+
 ## Utilizzo misto – attributi HTML + script
 
-I parametri non inclusi in init() vengono letti dall'attributo HTML corrispondente. Si possono quindi separare configurazione statica (`cols`, `perPage`) nel markup e dati dinamici (json) nello script:
+I parametri non inclusi in `init()` vengono letti dall'attributo HTML corrispondente.
+Si possono quindi separare configurazione statica (`cols`, `perPage`) nel markup
+e dati dinamici (`json`) nello script:
 
-```html 
+```html
 <s-datatable
   id="table-utenti"
   cols='[{"_heading":"Nome","_field":"name"},{"_heading":"Città","_field":"city"}]'
   perPage="20"
 ></s-datatable>
 ```
- 
+
 ```javascript
 el.init({ json: '/api/utenti.json' }); // → json da script, cols e perPage da attributo
 ```
- 
+
 Ordine di precedenza: config (script) > attributo HTML > default interno.
 
 Per ignorare esplicitamente un attributo e ricadere sul default, passare `null` nel config:
@@ -67,121 +69,188 @@ Per ignorare esplicitamente un attributo e ricadere sul default, passare `null`
 ```javascript
 el.init({ json: '/api/data.json', cols: null }); // → cols = null, l'attributo viene saltato
 ```
- 
+
 ## Reazione ad eventi esterni
 
-Il componente ascolta tre CustomEvent che altri componenti possono emettere sul `document` (o su qualsiasi antenato del componente nel DOM):
- 
+Il componente ascolta tre CustomEvent che altri componenti possono emettere
+sul `document` (o su qualsiasi antenato del componente nel DOM):
+
 ### `datatable:search`
 
 Applica una ricerca su una o più colonne.
 
 `detail: { term: string, columns?: number[] }`
 
-Esempio – ricerca globale:
-
 ```javascript
+// Ricerca globale
 document.dispatchEvent(new CustomEvent('datatable:search', {
   detail: { term: 'mario' }
 }));
-```
 
-Esempio – ricerca su colonna 0 e 2:
-
-```javascript
-  document.dispatchEvent(new CustomEvent('datatable:search', {
-    detail: { term: 'mario', columns: [0, 2] }
-  }));
+// Ricerca su colonna 0 e 2
+document.dispatchEvent(new CustomEvent('datatable:search', {
+  detail: { term: 'mario', columns: [0, 2] }
+}));
 ```
 
 ### `datatable:multisearch`
-     
+
 Applica più filtri contemporaneamente (uno per colonna).
 
 `detail: { queries: Array<{ terms: string[], columns?: number[] }> }`
- 
-Esempio – filtra colonna 1 per "mario" E colonna 3 per "roma":
 
 ```javascript
+// Filtra colonna 1 per "mario" E colonna 3 per "roma"
 document.dispatchEvent(new CustomEvent('datatable:multisearch', {
   detail: {
     queries: [
-      { terms: ['gino'], columns: [1] },
+      { terms: ['mario'], columns: [1] },
       { terms: ['roma'],  columns: [3] }
     ]
   }
 }));
 ```
- 
+
 ### `datatable:reload`
 
-Ricarica i dati da un nuovo URL JSON (o dallo stesso URL originale se json è omesso), opzionalmente con nuove colonne o dati inline.
+Ricarica i dati da un nuovo URL JSON (o dallo stesso URL originale se `json` è omesso),
+opzionalmente con nuove colonne, dati inline e/o un filtro da applicare al termine del
+caricamento.
 
-`detail: { json?: string, data?: Array, cols?: Array }`
+`detail: { json?: string, data?: Array, cols?: Array, search?: object }`
 
-Esempio – reload stesso URL:
-
-```javascript
-document.dispatchEvent(new CustomEvent('datatable:reload', {
-  detail: {}
-}));
-```
-
-Esempio – nuovo endpoint + nuove colonne:
+Il campo `search` permette di combinare reload e filtro in un unico evento, evitando
+race condition tra il fetch e la ricerca. Formati supportati:
 
+- `{ term, columns? }` → ricerca semplice
+- `{ queries: [{terms, columns?}] }` → ricerca multipla
 
 ```javascript
+// Reload stesso URL
+document.dispatchEvent(new CustomEvent('datatable:reload', { detail: {} }));
+
+// Nuovo endpoint + nuove colonne
 document.dispatchEvent(new CustomEvent('datatable:reload', {
   detail: {
     json: '/api/data-filtered.json',
     cols: [{ _heading: 'Nome', _field: 'name' }]
   }
 }));
-```
-
-Esempio – dati inline (senza fetch):
 
-```javascript
+// Dati inline (senza fetch)
 document.dispatchEvent(new CustomEvent('datatable:reload', {
   detail: {
     data: [{ name: 'Mario', city: 'Roma' }],
-    cols: [{ _heading: 'Nome', _field: 'name' }]
+  }
+}));
+
+// Reload + filtro contestuale applicato dopo il render
+document.dispatchEvent(new CustomEvent('datatable:reload', {
+  detail: {
+    json: '/api/utenti?anno=2024',
+    search: { term: 'mario', columns: [0] }
   }
 }));
 ```
- 
 
-## Targeting – se nella pagina ci sono più istanze di s-datatable
+## Targeting – più istanze nella stessa pagina
+
+Aggiungere `id` al componente e `target` nel detail. Se `target` è assente,
+l'evento viene raccolto da **tutte** le istanze.
 
+```html
+<s-datatable id="table-utenti" ...></s-datatable>
+```
 
-Aggiungere l'attributo `id` al componente e includere `target` nel detail:
- 
-`<s-datatable id="table-utenti" ...></s-datatable>`
- 
 ```javascript
 document.dispatchEvent(new CustomEvent('datatable:search', {
   detail: { term: 'mario', target: 'table-utenti' }
 }));
 ```
 
-Se `target` è assente, l'evento viene raccolto da TUTTE le istanze.
+## Parametro `cols`
 
-## Esempio parametro `cols`
+Array di oggetti di configurazione delle colonne. Le chiavi con prefisso `_` sono
+proprietà del componente; le restanti vengono passate direttamente a simple-datatables
+(es. `sortable`, `searchable`, `type`, `hidden`, …).
 
 ```javascript
-{
-
-  cols: [
-    {
-      _field         // chiave campo json (anche composta es: `key1.key2`),
-      _heading       // testo th
-      _title         // testo `title` del `th`
-      _renderMode    // preset rendering predefiniti
-      _renderTpl     // stringa mustache-like per la composizione della cella (chiavi indicate forma `[[chiave]]`)
-      type           // parametri simple-datatable (senza `_`)
-      searchable     // ...
-      sortable       // ...
-      // ...
-    }
-  ]
-}
+cols: [
+  {
+    // ── Proprietà del componente (prefisso _) ─────────────────────────────
+
+    _field,        // Chiave del campo JSON. Obbligatorio.
+                   // Supporta notazione punto per valori annidati: 'owner.cognome'
+
+    _heading,      // Testo dell'intestazione di colonna (contenuto del <th>). Obbligatorio.
+
+    _title,        // Testo del tooltip sull'intestazione (attributo `title` dell'<abbr>).
+
+    _renderTpl,    // Template HTML per il contenuto della cella.
+                   // I segnaposto [[chiave]] vengono sostituiti con i valori della riga.
+                   // Supporta notazione punto: [[owner.nome]] [[owner.cognome]]
+                   // Se un valore è null (es. oggetto padre assente da Symfony),
+                   // il segnaposto viene sostituito con stringa vuota senza errori.
+
+    _renderMode,   // Preset di visualizzazione predefiniti. Valori disponibili:
+                   //   'id'          – colonna numerica, non ricercabile, allineata a destra
+                   //   'email'       – va a capo prima e dopo la @
+                   //   'boolean'     – icona spunta/croce con colore semantico
+                   //   'sf_datetime' – data/ora da oggetto Symfony ({ date, timezone })
+
+    _sortValue,    // Percorso del campo da usare per l'ORDINAMENTO al posto del contenuto
+                   // visualizzato. Utile quando la cella contiene HTML composto (_renderTpl).
+                   // Supporta notazione punto.
+                   // Implementato tramite l'attributo data-order sulla cella, letto
+                   // nativamente da simple-datatables.
+                   //
+                   // Esempio: cella con '[[owner.nome]] [[owner.cognome]]'
+                   //   _sortValue: 'owner.cognome'  → ordina per cognome
+
+    _searchValue,  // Percorso/i del campo da usare per la RICERCA al posto del contenuto
+                   // visualizzato. Accetta uno o più percorsi separati da spazio.
+                   // Supporta notazione punto.
+                   // Implementato tramite searchMethod di colonna (API simple-datatables)
+                   // e attributo data-search sulla cella.
+                   // La ricerca è di tipo AND: tutti i termini digitati devono essere
+                   // presenti nel valore del campo (o dei campi) indicati.
+                   //
+                   // Esempio: _searchValue: 'owner.cognome owner.nome'
+                   //   cerca su entrambi i campi concatenati; "rossi mario" trova solo
+                   //   le righe che contengono entrambe le parole, in qualsiasi ordine.
+
+    // ── Proprietà native simple-datatables (senza prefisso _) ────────────
+
+    type,          // Tipo di dato: 'string' | 'number' | 'date' | 'boolean' | 'html' | 'other'
+    sortable,      // false per disabilitare l'ordinamento sulla colonna
+    searchable,    // false per escludere la colonna dalla ricerca globale
+    hidden,        // true per nascondere la colonna (esclusa anche dalla ricerca)
+    sort,          // 'asc' | 'desc' per ordinamento iniziale (solo su colonna singola)
+    // ... tutte le altre opzioni columns di simple-datatables
+  }
+]
+```
+
+### Esempio completo con valori annidati
+
+```javascript
+const cols = [
+  {
+    _field: 'commessa',
+    _heading: 'Commessa / fornitore',
+    _renderTpl: '[[commessa]]<br><small class="text-muted">[[fornitore]]</small>',
+  },
+  {
+    _field: 'owner.cognome',
+    _heading: 'Owner',
+    _renderTpl: '[[owner.nome]] [[owner.cognome]]',
+    _sortValue: 'owner.cognome',              // ordina per cognome
+    _searchValue: 'owner.cognome owner.nome', // cerca su cognome e nome (AND)
+  },
+  {
+    _field: 'importi.0.importo',   // valore annidato con indice array
+    _heading: 'Importo',
+    type: 'number',
+  }
+];
+```

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

@@ -25,6 +25,15 @@ 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]
  *                                           Modalità di visualizzazione predefinita:
  *                                           - `id`          – colonna numerica, non ricercabile, allineata a destra
@@ -332,6 +341,12 @@ 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']
+          const sortValue = col_item._sortValue
+            ? (getNestedValue(row, col_item._sortValue) ?? '')
+            : null;
+
           if (col_item._renderTpl) {
             value = decodeURIComponent(col_item._renderTpl).replace(
               /\[\[(.*?)\]\]/g,
@@ -358,6 +373,29 @@ class SimpleDatatableAdapter extends HTMLElement {
               (value.timezone === 'UTC' ? 'Z' : '');
           }
 
+          // _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(' ')
+            : null;
+
+          // 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.
+          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 };
+          }
+
           return value;
         })
       }));
@@ -365,7 +403,7 @@ class SimpleDatatableAdapter extends HTMLElement {
       this.columns = cols.map((col_settings, idx) => {
         col_settings = parseCols(col_settings);
 
-        return {
+        const colObj = {
           ...(Object.fromEntries(
             Object.entries(col_settings).filter(([key]) => !key.startsWith('_'))
           )),
@@ -374,6 +412,25 @@ class SimpleDatatableAdapter extends HTMLElement {
           searchable: col_settings.searchable ?? true,
           sortable:   col_settings.sortable   ?? true,
         };
+
+        // _searchValue: funzione searchMethod personalizzata che opera su
+        // cell.attributes['data-search'] invece che sul testo visualizzato.
+        // L'API simple-datatables prevede: (terms, cell, row, colIdx, source)
+        // - terms: array di stringhe (uno per parola cercata)
+        // - cell:  oggetto cella dai dati originali (con .text e .attributes)
+        // La funzione deve restituire true se la riga è da includere.
+        // Comportamento AND: tutti i termini devono essere presenti (come
+        // nella demo https://fiduswriter.github.io/simple-datatables/demos/22-and-search/).
+        if (col_settings._searchValue) {
+          colObj.searchMethod = (terms, cell) => {
+            const haystack = (
+              cell.attributes?.['data-search'] ?? cell.text ?? ''
+            ).toLowerCase();
+            return terms.every(term => haystack.includes(term.toLowerCase()));
+          };
+        }
+
+        return colObj;
       });
 
     } catch (err) {

package/src/components/forms.js

@@ -1,36 +0,0 @@
-// import './form.css'; //incorporato nel css principale
-
-import { enableSubmitBtns } from '../../index.js';
-
-document.querySelectorAll('form').forEach( form => {
-
-  // form.querySelectorAll('[type="submit"]').forEach(btn =>{
-  //   btn.addEventListener('click', () => {
-  //     form.classList.add('was-validated');
-  //   }, false);
-  // });
-
-  form.querySelectorAll('.is-invalid, .is-valid').forEach(item => {
-    item.classList.remove('is-invalid', 'is-valid');
-  });
-
-  form.addEventListener('submit', e => {
-
-    if(!form.hasAttribute('data-no-was-validated')) {
-      form.classList.add('was-validated');
-    }
-
-    if(!form.checkValidity()) {
-      e.preventDefault();
-      enableSubmitBtns();
-
-    } else {
-      if(!form.hasAttribute('data-no-disabling') && !form.hasAttribute('data-disable-submit')) { /* 'data-disable-submit' per compatibilitò con verioni precedenti */
-        form.querySelectorAll('[type="submit"]').forEach(btn => {
-          btn.disabled = true;
-        });
-      }
-    }
-  }, false);
-});
-