@massimo-cassandro/minimo 1.32.4 → 1.33.1

package/src/web-components/json-table/src/table-tfoot.js

@@ -0,0 +1,56 @@
+/*! minimo - json-table: tfoot rendering */
+
+import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';
+import { classnames } from '../../../utilities/classnames.js';
+import { setContent } from './content-utils.js';
+import { tfootContent } from './cell-content.js';
+
+/** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
+
+/**
+ * Renders the footer row inside `elements.tfoot` (present only when `params.tfoot` is true),
+ * replacing the previous content. Every column produces a cell whose content comes from
+ * `tfootContent()` (column `tfootRender`); the footer is emptied when there are no rows.
+ *
+ * The rows passed to `tfootRender` are the whole filtered set, or the current page only when
+ * `updateFooterOnPageChange` is true.
+ *
+ * Generated structure: `tr > td[data-key][cellClass]…`
+ *
+ * @param {JsonTable} jt - The component instance
+ * @returns {void}
+ *
+ * @example
+ * renderTfoot(jt); // after `jt.state` has been updated
+ */
+export function renderTfoot(jt) {
+
+  const { params, elements, state, cols } = jt;
+  const tfoot = elements.tfoot;
+
+  if (!tfoot) {
+    return;
+  }
+
+  if (!state.filtered.length) {
+    tfoot.replaceChildren();
+    return;
+  }
+
+  const rows = (params.updateFooterOnPageChange ? state.pageRows : state.filtered).map(parsed => parsed.row);
+
+  domBuilder([
+    {
+      tag: 'tr',
+      children: cols.map(col => ({
+        tag: 'td',
+        className: classnames(col.cellClass),
+        attrs: { 'data-key': col.key },
+        callback: el => {
+          const td = /** @type {HTMLTableCellElement} */ (el);
+          setContent(td, tfootContent(col, rows, params, td));
+        }
+      }))
+    }
+  ], tfoot, { emptyParent: true });
+}

package/src/web-components/json-table/src/table-thead.js

@@ -0,0 +1,183 @@
+/*! minimo - json-table: thead */
+
+import * as styles from '../json-table-component.module.css';
+import { classnames } from '../../../utilities/classnames.js';
+import { setContent } from './content-utils.js';
+import { iconContent } from './icons.js';
+import { nextSortDir } from './sorting.js';
+
+/** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
+/** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
+/** @typedef {import('./main-builder.js').JsonTableElements} JsonTableElements */
+
+/** @typedef {'none'|'ascending'|'descending'} SortState */
+
+/**
+ * Updates the sort state of a sortable `<th>`: `aria-sort` attribute (removed when `none`),
+ * icon and `title`/`aria-label` of the sort button (both describing the action of the next
+ * click, e.g. "sort descending" when the ascending sort is active).
+ *
+ * @param {HTMLTableCellElement} th - The `<th>` generated by `theadPart()`
+ * @param {SortState} state - Sort state to apply
+ * @param {JsonTableParams} params - Resolved params (icons and labels)
+ * @returns {void}
+ *
+ * @example
+ * setSortState(th, 'ascending', params);
+ * // th[aria-sort=ascending], icon → params.sortAscArrowIcon, button title → params.labels.sortDesc
+ */
+export function setSortState(th, state, params) {
+
+  const btn = th.querySelector('button');
+  const icon = th.querySelector('[data-jt-sort-icon]');
+
+  if (state === 'none') {
+    th.removeAttribute('aria-sort');
+  } else {
+    th.setAttribute('aria-sort', state);
+  }
+
+  const nextLabel = state === 'none'
+    ? params.labels.sortAsc
+    : (state === 'ascending' ? params.labels.sortDesc : params.labels.sortNone);
+
+  if (btn) {
+    const titleText = (th.querySelector('[data-jt-sort-title]')?.textContent ?? '').trim();
+    btn.title = nextLabel ?? '';
+    btn.setAttribute('aria-label', titleText ? `${titleText}: ${nextLabel}` : (nextLabel ?? ''));
+  }
+
+  if (icon) {
+    const iconDef = state === 'none'
+      ? params.sortNoneArrowIcon
+      : (state === 'ascending' ? params.sortAscArrowIcon : params.sortDescArrowIcon);
+    setContent(/** @type {HTMLElement} */ (icon), iconContent(iconDef));
+  }
+}
+
+
+/**
+ * Applies the current sort (`jt.state.sort`) to every sortable `<th>` of the thead: the sorted
+ * column gets `aria-sort` and the matching icon, the others are reset to `none`.
+ *
+ * @param {JsonTable} jt - The component instance
+ * @returns {void}
+ *
+ * @example
+ * jt.state.sort = { key: 'name', dir: 'desc' };
+ * applySortState(jt); // th[data-key=name][aria-sort=descending], the other th without aria-sort
+ */
+export function applySortState(jt) {
+
+  const { elements, params, state } = jt;
+
+  if (!elements.thead) {
+    return;
+  }
+
+  elements.thead.querySelectorAll('th[data-sortable]').forEach(el => {
+    const th = /** @type {HTMLTableCellElement} */ (el);
+    const isSorted = state.sort != null && th.dataset.key === state.sort.key;
+    setSortState(th, isSorted ? (state.sort?.dir === 'desc' ? 'descending' : 'ascending') : 'none', params);
+  });
+}
+
+
+/**
+ * Attaches the delegated `click` listener to the thead: a click on a sort button cycles the
+ * column sort (none → asc → desc → none, see `nextSortDir`) through `jt.setSort()`.
+ * The thead is not rebuilt on sort, so the focus stays on the clicked button.
+ *
+ * @param {JsonTable} jt - The component instance
+ * @returns {void}
+ *
+ * @example
+ * setSortListener(jt); // after mainBuilder(jt)
+ */
+export function setSortListener(jt) {
+
+  const thead = jt.elements.thead;
+
+  if (!thead) {
+    return;
+  }
+
+  thead.addEventListener('click', e => {
+    const btn = /** @type {HTMLElement|null} */ (
+      /** @type {HTMLElement} */ (e.target).closest('button[data-key]')
+    );
+    if (!btn) {
+      return;
+    }
+    const key = btn.dataset.key ?? '';
+    const current = jt.state.sort?.key === key ? jt.state.sort.dir : null;
+    jt.setSort(key, nextSortDir(current));
+  });
+}
+
+
+/**
+ * domBuilder item of the `<thead>`.
+ *
+ * Generated structure:
+ * ```
+ * thead > tr
+ *   th[scope=col][data-key][headerClass]                                   ← not sortable: content = col.title
+ *   th.sortable[scope=col][data-key][data-sortable=true][headerClass]      ← sortable
+ *     button.sortBtn[classes.sortBtn][type=button][data-key][title][aria-label]
+ *       span.sortTitle[data-jt-sort-title]  ← col.title
+ *       span.sortIcon[data-jt-sort-icon]    ← sort icon (see `setSortState`)
+ * ```
+ *
+ * The `<thead>` is stored in `elements.thead`; the sort listener is attached by `setSortListener()`.
+ *
+ * @param {JsonTable} jt - The component instance (`params`, `cols`)
+ * @param {JsonTableElements} elements - Object collecting the generated elements (mutated)
+ * @returns {DomBuilderItem}
+ *
+ * @example
+ * domBuilder([{ tag: 'table', children: [theadPart(jt, elements)] }], host);
+ * elements.thead; // → HTMLTableSectionElement
+ */
+export function theadPart(jt, elements) {
+
+  const { params, cols } = jt;
+
+  return {
+    tag: 'thead',
+    callback: el => { elements.thead = /** @type {HTMLTableSectionElement} */ (el); },
+    children: [
+      {
+        tag: 'tr',
+        children: cols.map(col => ({
+          tag: 'th',
+          className: classnames(col.headerClass, col.sortable && styles.sortable),
+          attrs: {
+            scope: 'col',
+            'data-key': col.key,
+            'data-sortable': col.sortable ? 'true' : null
+          },
+          content: col.sortable ? null : col.title,
+          children: col.sortable
+            ? [
+              {
+                tag: 'button',
+                className: classnames(styles.sortBtn, params.classes.sortBtn),
+                attrs: { type: 'button', 'data-key': col.key },
+                children: [
+                  { tag: 'span', className: styles.sortTitle, attrs: { 'data-jt-sort-title': '' }, content: col.title },
+                  { tag: 'span', className: styles.sortIcon, attrs: { 'data-jt-sort-icon': '', 'aria-hidden': 'true' } }
+                ]
+              }
+            ]
+            : [],
+          callback: el => {
+            if (col.sortable) {
+              setSortState(/** @type {HTMLTableCellElement} */ (el), 'none', params);
+            }
+          }
+        }))
+      }
+    ]
+  };
+}

package/src/web-components/json-table/src/update-info.js

@@ -0,0 +1,67 @@
+/*! minimo - json-table: info text update */
+
+import { setContent } from './content-utils.js';
+
+/** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
+
+/**
+ * Updates the info text (`elements.resultInfo`) from the current state.
+ *
+ * Content resolution:
+ * - `params.infoText` function → `infoText(start, end, totRec, filteredRec, page, totPages)`
+ * - no rows → `labels.noResults` (search active) or `labels.noRows`
+ * - otherwise the mustache-like template `params.infoText` (string) or `labels.info`, with the
+ *   placeholders `{start}`, `{end}`, `{totRec}`, `{filteredRec}`, `{page}`, `{totPages}` replaced
+ *   by the locale-formatted numbers
+ *
+ * `start`/`end` are the 1-based indexes of the first/last row of the current page within the
+ * filtered set (0 when there are no rows).
+ *
+ * @param {JsonTable} jt - The component instance
+ * @returns {void}
+ *
+ * @example
+ * updateInfo(jt);
+ * // default `labels.info`, page 2 of 25 rows per page, 60 rows → "Stai visualizzando le righe da 26 a 50, su un totale di 60 record trovati"
+ */
+export function updateInfo(jt) {
+
+  const { params, elements, state } = jt;
+  const target = elements.resultInfo;
+
+  if (!target) {
+    return;
+  }
+
+  const shown = state.pageRows.length;
+  const perPage = params.perPage > 0 ? params.perPage : shown;
+  const start = shown ? (state.page - 1) * perPage + 1 : 0;
+
+  /** @type {Record<string, number>} */
+  const values = {
+    start,
+    end: shown ? start + shown - 1 : 0,
+    totRec: state.totRec,
+    filteredRec: state.filteredRec,
+    page: state.page,
+    totPages: state.totPages
+  };
+
+  let content;
+
+  if (typeof params.infoText === 'function') {
+    content = params.infoText(values.start, values.end, values.totRec, values.filteredRec, values.page, values.totPages);
+
+  } else if (values.filteredRec === 0) {
+    content = state.searchTerm ? params.labels.noResults : params.labels.noRows;
+
+  } else {
+    const tpl = params.infoText ?? params.labels.info ?? '';
+    content = String(tpl).replace(
+      /\{(start|end|totRec|filteredRec|page|totPages)\}/g,
+      (_, key) => values[key].toLocaleString(params.locale)
+    );
+  }
+
+  setContent(target, content);
+}

package/src/web-components/s-datatable-component/{docs.md → readme.md}

@@ -1,6 +1,8 @@
-# `s-datatable` web-component per simple-datatables
+# `s-datatable` web-component per [simple-datatables](https://fiduswriter.github.io/simple-datatables/documentation/)
+
+
+>**NB: deprecato, utilizzare [json-table](../json-table/readme.md)** 
 
-<https://fiduswriter.github.io/simple-datatables/documentation/>
 
 ## Installazione
 
@@ -176,6 +178,68 @@ document.dispatchEvent(new CustomEvent('datatable:search', {
 }));
 ```
 
+## Parametri/attributi
+
+Tutti i parametri sono leggibili sia da attributo HTML che da script (`init()`).
+Ordine di precedenza: config (script) > attributo HTML > default interno.
+
+### Parametri del componente
+
+```javascript
+{
+  json,          // URL da cui recuperare i dati (struttura attesa: { data: [...] }).
+                 // Ignorato se `data` è presente.
+
+  data,          // Dati inline, array di oggetti plain. Ha precedenza su `json`.
+                 // Utile in contesti SSR (Twig, Blade, ...) dove il JSON è già
+                 // disponibile server-side; per grandi dataset preferire `json`.
+
+  cols,          // Definizione delle colonne. Vedi "Parametro cols" più sotto.
+                 // Default: []
+
+  tableClass,    // Classi CSS del tag <table>, in sostituzione di 'table table-bordered'.
+                 // La classe interna styles.table (necessaria al layout) viene
+                 // comunque sempre applicata.
+                 // Default: 'table table-bordered'
+
+  renderNullAs,  // Stringa globale da mostrare al posto di valori null/undefined,
+                 // sovrascrivibile per singola colonna con `_renderNullAs`.
+                 // Default: '—' (em dash)
+
+  updateFooterOnPageChange, // Se true, `_footerRender` riceve solo i record della
+                 // pagina corrente (subtotale). Se false, l'intero set filtrato
+                 // (il footer si aggiorna solo al cambio filtro, non pagina).
+                 // Default: false
+
+  refs,          // string[] di percorsi URL da cui, se si proviene, la pagina
+                 // corrente viene ripristinata dal cookie di sessione 'sd-pag'.
+                 // Confronto su pathname (query string/hash ignorati): es. ['/utenti']
+                 // intercetta anche '/utenti/1234'.
+
+  topSlot,       // Elemento DOM o markup HTML nell'area in alto a sinistra.
+                 // Solo via init() (non leggibile da attributo HTML). Ignorato
+                 // se showInfoAtTop è true. Vedi sezione dedicata più sotto.
+
+  showInfoAtTop, // Replica il testo dell'area info anche in alto a sinistra.
+                 // Ha priorità su topSlot se true. Vedi sezione dedicata più sotto.
+                 // Default: true
+}
+```
+
+### Parametri nativi di simple-datatables
+
+```javascript
+{
+  perPage,       // Numero di righe per pagina, passato direttamente come opzione
+                 // nativa `perPage` del costruttore DataTable.
+                 // Default: 25
+}
+```
+
+Tutte le altre opzioni native di simple-datatables (`searchable`, `sortable`, `paging`,
+`pagerDelta`, `perPageSelect`, `locale`, `labels`, `classes`, `template`, ...) sono
+impostate internamente dal componente e **non** sono configurabili da attributo/script.
+
 ## Parametro `cols`
 
 Array di oggetti di configurazione delle colonne. Le chiavi con prefisso `_` sono
@@ -217,7 +281,7 @@ cols: [
                    //   'sf_datetime'   – data e ora da oggetto Symfony ({ date, timezone }),
                    //                     pre-elaborato in _load
                    //   'sf_date'       – come 'sf_datetime', ma mostra solo la data
-                   //   'datetime'      – data e ora da stringa/valore parsabile da `new Date()`
+                   //   'datetime'      – data e ora da stringa/valore elaborabile da `new Date()`
                    //   'date'          – come 'datetime', ma mostra solo la data
                    //                     (date/datetime: formato it-IT, allineamento a destra,
                    //                     data-order impostato per l'ordinamento; null → '—')

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

@@ -502,7 +502,7 @@ class SimpleDatatableAdapter extends HTMLElement {
    *                 Se presente e !== undefined sovrascrive sempre l'attributo.
    *                 Passare esplicitamente `null` per ignorare l'attributo e
    *                 ricevere il defaultValue.
-   *   2. Attributo HTML – se il valore inizia con [ o { viene auto-parsato
+   *   2. Attributo HTML – se il valore inizia con [ o { viene auto-elaborato
    *                 da JSON (utile per cols, che può stare nell'attributo).
    *   3. defaultValue – fallback finale.
    *

package/types/global.d.ts

@@ -3,9 +3,23 @@
 // The canonical definition lives in dom-builder.js — this only re-exports it.
 type DomBuilderItem = import('../src/utilities/dom-builder/dom-builder.js').DomBuilderItem;
 
-// Sanitizer API (Element.setHTML / getHTML) — not yet in TypeScript's lib.dom.d.ts.
+// Global alias for the `<json-table>` web component class, so consumer scripts can write
+// `/** @type {JsonTable} */` without importing the type. The tag name map augmentation makes
+// `document.querySelector('json-table')` / `document.createElement('json-table')` return a
+// `JsonTable` instance without casts. Consumers get both by adding this file to their
+// jsconfig/tsconfig `include` (e.g. "node_modules/@massimo-cassandro/minimo/types/global.d.ts").
+type JsonTable = import('../src/web-components/json-table/json-table-component.js').JsonTable;
+
+interface HTMLElementTagNameMap {
+  'json-table': JsonTable;
+}
+
+// Sanitizer API (Element.setHTML / getHTML). Declared as required members (not optional) so
+// the augmentation stays compatible with the lib.dom versions that already include them
+// (overload signatures must all be optional or all required); the runtime code still checks
+// `typeof el.setHTML === 'function'` before using it.
 // https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML
 interface Element {
-  setHTML?(input: string, options?: { sanitizer?: unknown }): void;
-  getHTML?(options?: { serializableShadowRoots?: boolean; shadowRoots?: ShadowRoot[] }): string;
+  setHTML(input: string, options?: { sanitizer?: unknown }): void;
+  getHTML(options?: { serializableShadowRoots?: boolean; shadowRoots?: ShadowRoot[] }): string;
 }

package/dev-tools/starter-kit/source_files/app_index.js

@@ -1 +0,0 @@
-import './index.css';

package/snippets/config-templates/_htaccess

@@ -1,69 +0,0 @@
-
-# no cache
-# <IfModule mod_headers.c>
-#   Header set Cache-Control "no-cache, no-store, must-revalidate"
-#   Header set Pragma "no-cache"
-#   Header set Expires 0
-# </IfModule>
-
-# blocco iframe
-# "deny" = tutti siti
-# "sameorigin" tutti tranne quelli che vengono dalla stessa origine
-# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
-Header set X-Frame-Options "sameorigin"
-
-
-<IfModule mod_expires.c>
-  ExpiresActive On
-  AddType application/vnd.ms-fontobject .eot
-  AddType application/x-font-ttf .ttf
-  AddType application/x-font-opentype .otf
-  AddType application/x-font-woff .woff
-  AddType application/x-font-woff2 .woff2
-  AddType application/font-sfnt otf ttf
-  AddType application/font-woff  woff
-  AddType application/font-woff2 woff2
-  AddType image/svg+xml .svg
-
-  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
-  ExpiresByType application/x-font-ttf "access plus 1 year"
-  ExpiresByType application/x-font-opentype "access plus 1 year"
-  ExpiresByType application/x-font-woff "access plus 1 year"
-  ExpiresByType application/x-font-woff2 "access plus 1 year"
-  ExpiresByType application/font-sfnt "access plus 1 year"
-  ExpiresByType application/font-woff "access plus 1 year"
-  ExpiresByType application/font-woff2 "access plus 1 year"
-
-  ExpiresByType text/html "access plus 1 hour"
-  ExpiresByType text/css "access plus 1 year"
-  ExpiresByType text/x-javascript "access plus 1 year"
-  ExpiresByType application/javascript "access plus 1 year"
-  ExpiresByType application/x-javascript "access plus 1 year"
-
-  ExpiresByType image/svg+xml "access plus 1 year"
-  ExpiresByType image/gif "access plus 1 year"
-  ExpiresByType image/png "access plus 1 year"
-  ExpiresByType image/jpeg "access plus 1 year"
-  ExpiresByType image/pjpeg "access plus 1 year"
-  ExpiresByType image/webp "access plus 1 year"
-  ExpiresByType image/avif "access plus 1 year"
-
-  ExpiresByType application/pdf "access plus 1 year"
-
-  ExpiresByType video/mp4 "access plus 1 year"
-  ExpiresByType video/webm "access plus 1 year"
-  ExpiresByType video/x-m4v "access plus 1 year"
-  ExpiresByType video/quicktime "access plus 1 year"
-  ExpiresByType audio/mpeg "access plus 1 year"
-  ExpiresByType audio/x-wav "access plus 1 year"
-
-  ExpiresByType image/x-icon "access plus 1 year"
-  ExpiresDefault "access plus 1 year"
-</IfModule>
-
-<IfModule !mod_expires.c>
-  <IfModule mod_headers.c>
-    # 1 year
-    Header set Cache-Control 'public, max-age 31536000'
-  </IfModule>
-</IfModule>

package/snippets/config-templates/robots.txt

@@ -1,5 +0,0 @@
-User-agent: *
-Allow: /
-# Disallow: /
-
-Sitemap: https://www.example.com/sitemap.xml

package/snippets/config-templates/rollup.config.mjs

@@ -1,115 +0,0 @@
-import terser  from '@rollup/plugin-terser';
-import fs from 'fs';
-import node_resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-
-// https://github.com/hyhappy/rollup-plugin-string-html
-// import htmlString from 'rollup-plugin-string-html';
-
-// https://github.com/exuanbo/rollup-plugin-minify-html-template-literals
-// https://github.com/asyncLiz/minify-html-literals
-// https://github.com/kangax/html-minifier#options-quick-reference
-// import minifyHTML from 'rollup-plugin-minify-html-template-literals';
-
-import p from '../package.json'; // assert { type: 'json' };
-
-const terserOptions = {
-    compress: {
-      passes: 2
-    }
-  },
-  anno = new Date().getFullYear(),
-  dirs = [
-    {source_dir: './front-end/js', output_dir: './AppBundle/Resources/public/js'}
-  ];
-
-let config = [];
-
-// lettura subdir apps e aggiunta a `dirs`
-fs.readdirSync('./front-end/apps').forEach(item => {
-  let stats = fs.statSync(`./front-end/apps/${item}`); // stats.isFile() / stats.isDirectory()
-  if(stats.isDirectory()) {
-    dirs.push({
-      source_dir: `./front-end/apps/${item}`,
-      output_dir: `./AppBundle/Resources/public/apps/${item}`
-    });
-  }
-});
-
-dirs.forEach(dir => {
-
-  fs.readdirSync(dir.source_dir)
-    .filter(f => /\.js$/.test(f))
-    .filter(f => /^[^_]/.test(f)) // ignore files starting with _
-    .forEach(file => {
-
-      let format = 'iife',
-        name = null;
-
-      if(/(-umd\.js)$/.test(file)) {
-        format = 'umd';
-        name = file.replace('-umd.js', '').replace(/-/g, '_');
-      }
-
-      config.push(
-        {
-          // preserveEntrySignatures: false,
-          input: `${dir.source_dir}/${file}`,
-          plugins: [
-            // deve essere il primo
-            // minifyHTML({
-            //   options: {
-            //     minifyOptions: {
-            //       html5: true,
-            //       collapseWhitespace: true,
-            //       collapseInlineTagWhitespace: true,
-            //       conservativeCollapse: true,
-            //       decodeEntities: true
-            //     },
-            //     shouldMinify: () => true
-            //   },
-            // }),
-            node_resolve(),
-            commonjs(),
-            terser(terserOptions),
-          ],
-          output: [{
-            file: `${dir.output_dir}/${file.replace('.js', '-min.js')}`,
-            format: format,
-            sourcemap: true,
-            name: name,
-            banner: `/*! xxxx v.${p.version} - Massimo Cassandro ${anno} */`,
-            // footer: `//! Released on ${new Date().toLocaleString('it-IT', { year: 'numeric',  month: 'short', day: '2-digit', hour12: false, hour:'2-digit', minute:'2-digit' })}`
-          }]
-        }
-      );
-
-    });
-});
-
-export default config;
-
-
-// versione statica
-
-// export default [
-//   {
-//     input: 'input.js',
-//     plugins: [
-//       node_resolve(),
-//       // commonjs(),
-//       terser({ compress: { passes: 2 } }),
-//     ],
-//     output: [
-//       {
-//         file: 'output.min.js',
-//         format: 'iife',
-//         sourcemap: true,
-
-//         banner: `/*! xxxx v.${p.version} - Massimo Cassandro ${anno} */`,
-//         // footer: `//! Released on ${new Date().toLocaleString('it-IT', { year: 'numeric',  month: 'short', day: '2-digit', hour12: false, hour:'2-digit', minute:'2-digit' })}`
-//       }
-//     ]
-//   },
-//   ...
-// ];