@massimo-cassandro/minimo 1.42.0 → 1.42.2

package/dev-tools/layout-tools/layout-tools.js

@@ -1,6 +1,13 @@
 import * as styles from './layout-tools.module.css';
 
+// TODO aggiungere popup info viewport
+
 const div = document.createElement('div');
 div.className = styles.mediaMonitor;
 
-document.body.insertAdjacentElement('beforeend', div);
+document.body.appendChild(div);
+
+// soluzione temporanea, al clic si deve aprire un menu con le info e con il pulsante di rimozione
+div.addEventListener('click', () => {
+  div.remove();
+});

package/package.json

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

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

@@ -8,9 +8,9 @@ import { parseCols } from './src/parse-cols.js';
 import { parseRows } from './src/parse-rows.js';
 import { mainBuilder } from './src/main-builder.js';
 import { renderTbody } from './src/table-body.js';
-import { renderTfoot } from './src/table-tfoot.js';
+import { renderTfoot } from './src/tfoot.js';
 import { updateInfo } from './src/update-info.js';
-import { applySortState, setSortListener } from './src/table-thead.js';
+import { applySortState, setSortListener } from './src/thead.js';
 import { setSearchListener, filterRows } from './src/search.js';
 import { sortRows } from './src/sorting.js';
 import { calcTotPages, renderPagination } from './src/pagination.js';

package/src/web-components/json-table/json-table-component.module.css

@@ -124,124 +124,7 @@ json-table {
   color: var(--jt-caption-color);
 }
 
-.pagination {
-  margin-inline-start: auto;
-}
-
-.paginationList {
-  display: flex;
-  flex-flow: row wrap;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.paginationItem {
-  border: var(--jt-pagination-border-width) solid var(--jt-pagination-border-color);
-  border-inline-start-width: 0;
-
-  &:first-child {
-    border-inline-start-width: var(--jt-pagination-border-width);
-    border-start-start-radius: var(--jt-pagination-radius);
-    border-end-start-radius: var(--jt-pagination-radius);
-  }
-
-  &:last-child {
-    border-start-end-radius: var(--jt-pagination-radius);
-    border-end-end-radius: var(--jt-pagination-radius);
-  }
-}
 
-.paginationBtn,
-.paginationEllipsis {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--jt-pagination-btn-min-width);
-  height: 100%;
-  padding: var(--jt-pagination-btn-padding-block) var(--jt-pagination-btn-padding-inline);
-  font: inherit;
-  font-size: var(--jt-pagination-font-size);
-  line-height: var(--jt-pagination-line-height);
-  color: inherit;
-}
-
-.paginationBtn {
-  cursor: pointer;
-
-  &[disabled] {
-    cursor: default;
-    opacity: var(--jt-pagination-disabled-opacity);
-  }
-
-  &[aria-current='page'] {
-    font-weight: var(--jt-pagination-current-font-weight);
-    cursor: default;
-    background-color: var(--jt-pagination-current-background-color);
-  }
-
-  @media (hover: hover) {
-    &:hover:not([disabled], [aria-current='page']) {
-      background-color: var(--jt-pagination-hover-background-color);
-    }
-  }
 
-  svg {
-    width: var(--jt-pagination-icon-size);
-    aspect-ratio: 1;
-    fill: currentColor;
-  }
-}
-
-.paginationArrow {
-  padding-inline: calc(var(--jt-pagination-btn-padding-inline) / 2);
-}
-
-/* =>> sorting (thead) */
-
-.sortable {
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--jt-thead-hover-background-color);
-    }
-  }
-}
-
-.sortBtn {
-  display: flex;
-  gap: var(--jt-sort-icon-gap);
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  padding: var(--jt-sort-btn-padding-block) var(--jt-sort-btn-padding-inline);
-  font: inherit;
-  line-height: var(--jt-sort-btn-line-height);
-  color: inherit;
-  text-align: inherit;
-  cursor: pointer;
-}
-
-.sortTitle {
-  flex: 1 1 auto;
-}
-
-.sortIcon {
-  display: inline-flex;
-  flex: none;
-  width: var(--jt-sort-icon-size);
-  aspect-ratio: 1;
-  opacity: var(--jt-sort-icon-none-opacity);
-
-  svg {
-    width: 100%;
-    height: 100%;
-    fill: currentColor;
-  }
-
-  /* un ordinamento attivo (aria-sort sul th) mostra l'icona a piena opacità */
-  [aria-sort] & {
-    opacity: 1;
-  }
-}
 
 /* purgecss end ignore */

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

@@ -52,65 +52,71 @@ Tutti i parametri sono impostabili sia da attributo HTML che come oggetto in `in
 
 ## `classes`
 
-Nomi delle classi assegnate agli elementi generati. Le classi interne di layout (CSS module)
-vengono **sempre** applicate in aggiunta a queste; ogni valore sostituisce interamente il
-default della stessa chiave.
+Nomi delle classi assegnate agli elementi generati. Le classi interne di layout (CSS module) vengono **sempre** applicate in aggiunta a queste; gli eventuali valori inseriti sostituiscono quelli di default.
 
 ```javascript
-classes: {
-  wrapper: null,                    // contenitore principale (<section>: info + tabella)
-  infoOuter: null,                  // contenitore esterno della sezione info
-  info: null,                       // sezione info (testo + ricerca)
-  resultInfo: null,                 // contenitore del testo info
-  search: null,                     // wrapper dell'input di ricerca
-  searchInput: 'form-control form-control-sm', // input di ricerca
-  tableWrapper: 'table-responsive', // div che racchiude la tabella
-  table: 'table table-bordered',    // tag <table>
-  tableFooter: null,                // barra sotto la tabella (caption + paginazione)
-  caption: null,                    // contenitore della caption
-  pagination: null,                 // <nav> della paginazione
-  paginationBtn: 'btn-reset',       // pulsanti della paginazione
-  sortBtn: 'btn-reset',             // pulsanti di ordinamento nei <th>
-  empty: null,                      // cella unica mostrata in assenza di righe
-  textStart: null,                  // allineamento inline-start (le celle minimo lo sono già)
-  textCenter: 'text-center',        // allineamento al centro
-  textEnd: 'text-end',              // allineamento inline-end
-  nowrap: 'text-nowrap',            // no-wrap
-  numeric: 'text-numeric',          // cifre tabulari (tipi numerici)
-  boolCell: null,                   // classe aggiuntiva per tutte le celle di tipo bool
-  boolTrue: null,                   // classe aggiuntiva per le celle bool con valore true
-  boolFalse: null                   // classe aggiuntiva per le celle bool con valore false
+{
+  classes: {...}
 }
 ```
 
+| Parametro | Default | Descrizione |
+|---|---|---|
+| `wrapper` | `null` | contenitore principale (`<section>`: info + tabella) |
+| `infoOuter` | `null` | contenitore esterno della sezione info |
+| `info` | `null` | sezione info (testo + ricerca) |
+| `resultInfo` | `null` | contenitore del testo info |
+| `search` | `null` | wrapper dell'input di ricerca |
+| `searchInput` | `'form-control form-control-sm'` | input di ricerca |
+| `tableWrapper` | `'table-responsive'` | div che racchiude la tabella |
+| `table` | `'table table-bordered'` | tag `<table>` |
+| `tableFooter` | `null` | barra sotto la tabella (caption + paginazione) |
+| `caption` | `null` | contenitore della caption |
+| `pagination` | `null` | `<nav>` della paginazione |
+| `paginationBtn` | `'btn-reset'` | pulsanti della paginazione |
+| `sortBtn` | `'btn-reset'` | pulsanti di ordinamento nei `<th>` |
+| `empty` | `null` | cella unica mostrata in assenza di righe |
+| `textStart` | `null` | allineamento inline-start (con css `table` di *minimo* il default è `start`) |
+| `textCenter` | `'text-center'` | allineamento al centro |
+| `textEnd` | `'text-end'` | allineamento inline-end |
+| `nowrap` | `'text-nowrap'` | no-wrap |
+| `numeric` | `'text-numeric'` | cifre tabulari (tipi numerici) |
+| `boolCell` | `null` | classe aggiuntiva per tutte le celle di tipo bool |
+| `boolTrue` | `null` | classe aggiuntiva per le celle bool con valore true |
+| `boolFalse` | `null` | classe aggiuntiva per le celle bool con valore false |
+
+
 Le classi di allineamento (`textEnd`, `textCenter`, `nowrap`, `numeric`) sono quelle usate dai
 tipi di dato predefiniti: modificandole si cambiano le classi di tutte le colonne di quel tipo.
 
 ## `labels`
 
 ```javascript
-labels: {
-  loading: 'Caricamento dati…',            // segnaposto di caricamento (visually hidden)
-  searchPlaceholder: 'Cerca...',           // placeholder dell'input di ricerca
-  searchTitle: 'Cerca nella tabella',      // attributo title dell'input
-  searchAriaLabel: 'Filtra risultati',     // aria-label dell'input
-  info: 'Stai visualizzando le righe da {start} a {end}, su un totale di {filteredRec} record trovati',
-                                           // template del testo info (vedi `infoText`)
-  noRows: 'Nessun record trovato',         // testo info e cella unica con set di dati vuoto
-  noResults: 'Nessun risultato per la ricerca', // idem, con ricerca senza risultati
-  sortAsc: 'Ordina questa colonna in senso ascendente (A → Z)',   // title/aria-label del
-  sortDesc: 'Ordina questa colonna in senso discendente (Z → A)', // pulsante di ordinamento:
-  sortNone: 'Rimuovi l’ordinamento a questa colonna',             // descrivono l'azione del
-                                                                  // prossimo click
-  paginationAriaLabel: 'Navigazione pagine', // aria-label del <nav>
-  prevPage: 'Pagina precedente',           // title/aria-label del pulsante precedente
-  nextPage: 'Pagina successiva',           // idem, successivo
-  pageTitle: 'Vai a pagina {page}',        // idem, pulsanti pagina
-  currentPage: 'Pagina {page}, corrente'   // idem, pagina corrente
+{
+  labels: {...}
 }
 ```
 
-I segnaposto di `labels.info` / `infoText`:
+| Parametro | Default | Descrizione |
+|---|---|---|
+| `loading` | `'Caricamento dati…'` | segnaposto di caricamento (visually hidden) |
+| `searchPlaceholder` | `'Cerca...'` | placeholder dell'input di ricerca |
+| `searchTitle` | `'Cerca nella tabella'` | attributo `title` dell'input di ricerca |
+| `searchAriaLabel` | `'Filtra risultati'` | `aria-label` dell'input di ricerca |
+| `info` | `'Stai visualizzando le righe da {start} a {end}, su un totale di {filteredRec} record trovati'` | template del testo info (vedi `infoText`) |
+| `noRows` | `'Nessun record trovato'` | testo info e cella unica con set di dati vuoto |
+| `noResults` | `'Nessun risultato per la ricerca'` | testo info e cella unica con ricerca senza risultati |
+| `sortAsc` | `'Ordina questa colonna in senso ascendente (A → Z)'` | `title`/`aria-label` del pulsante di ordinamento: descrive l'azione del prossimo click |
+| `sortDesc` | `'Ordina questa colonna in senso discendente (Z → A)'` | `title`/`aria-label` del pulsante di ordinamento: descrive l'azione del prossimo click |
+| `sortNone` | `'Rimuovi l’ordinamento a questa colonna'` | `title`/`aria-label` del pulsante di ordinamento: descrive l'azione del prossimo click |
+| `paginationAriaLabel` | `'Navigazione pagine'` | `aria-label` del `<nav>` |
+| `prevPage` | `'Pagina precedente'` | `title`/`aria-label` del pulsante precedente |
+| `nextPage` | `'Pagina successiva'` | `title`/`aria-label` del pulsante successivo |
+| `pageTitle` | `'Vai a pagina {page}'` | `title`/`aria-label` dei pulsanti pagina |
+| `currentPage` | `'Pagina {page}, corrente'` | `title`/`aria-label` del pulsante della pagina corrente |
+
+
+### Segnaposto di `labels.info` / `infoText`:
 
 | Segnaposto | Valore |
 |---|---|

package/src/web-components/json-table/src/cell-content.js

@@ -1,5 +1,3 @@
-/*! minimo - json-table: cell & footer content */
-
 import { getNestedValue, resolveMustache } from './content-utils.js';
 import { toNumber } from './data-types.js';
 

package/src/web-components/json-table/src/content-utils.js

@@ -1,4 +1,3 @@
-/*! minimo - json-table: content utilities */
 
 import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';
 

package/src/web-components/json-table/src/data-types.js

@@ -1,4 +1,3 @@
-/*! minimo - json-table: data types */
 
 import * as styles from '../json-table-component.module.css';
 import { classnames } from '../../../utilities/classnames.js';

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

@@ -1,4 +1,3 @@
-/*! minimo - json-table: defaults */
 
 import {
   boolTrueIcon, boolFalseIcon, sortAscArrowIcon, sortDescArrowIcon, sortNoneArrowIcon,

package/src/web-components/json-table/src/get-data.js

@@ -1,4 +1,3 @@
-/*! minimo - json-table: data acquisition */
 
 /** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
 /** @typedef {import('./defaults.js').SortDef} SortDef */

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

@@ -1,4 +1,3 @@
-/*! minimo - json-table: icons */
 
 import checkBold from '../../../icons/check-bold.svg?inline';
 import xBold from '../../../icons/x-bold.svg?inline';

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

@@ -1,4 +1,3 @@
-/*! minimo - json-table: info section parts */
 
 import * as styles from '../json-table-component.module.css';
 import { classnames } from '../../../utilities/classnames.js';

package/src/web-components/json-table/src/main-builder.js

@@ -1,4 +1,3 @@
-/*! minimo - json-table: main structure builder */
 
 import * as styles from '../json-table-component.module.css';
 import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';

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

@@ -1,6 +1,6 @@
-/*! minimo - json-table: pagination */
 
-import * as styles from '../json-table-component.module.css';
+import * as styles from './pagination.module.css';
+
 import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';
 import { classnames } from '../../../utilities/classnames.js';
 import { iconContent } from './icons.js';

package/src/web-components/json-table/src/pagination.module.css

@@ -0,0 +1,77 @@
+/* purgecss start ignore */
+
+.pagination {
+  margin-inline-start: auto;
+}
+
+.paginationList {
+  display: flex;
+  flex-flow: row wrap;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.paginationItem {
+  margin: 0;
+  border: var(--jt-pagination-border-width) solid var(--jt-pagination-border-color);
+  border-inline-start-width: 0;
+
+  &:first-child {
+    border-inline-start-width: var(--jt-pagination-border-width);
+    border-start-start-radius: var(--jt-pagination-radius);
+    border-end-start-radius: var(--jt-pagination-radius);
+  }
+
+  &:last-child {
+    border-start-end-radius: var(--jt-pagination-radius);
+    border-end-end-radius: var(--jt-pagination-radius);
+  }
+}
+
+.paginationBtn,
+.paginationEllipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--jt-pagination-btn-min-width);
+  height: 100%;
+  padding: var(--jt-pagination-btn-padding-block) var(--jt-pagination-btn-padding-inline);
+  font: inherit;
+  font-size: var(--jt-pagination-font-size);
+  line-height: var(--jt-pagination-line-height);
+  color: inherit;
+}
+
+.paginationBtn {
+  cursor: pointer;
+
+  &[disabled] {
+    cursor: default;
+    opacity: var(--jt-pagination-disabled-opacity);
+  }
+
+  &[aria-current='page'] {
+    font-weight: var(--jt-pagination-current-font-weight);
+    cursor: default;
+    background-color: var(--jt-pagination-current-background-color);
+  }
+
+  @media (hover: hover) {
+    &:hover:not([disabled], [aria-current='page']) {
+      background-color: var(--jt-pagination-hover-background-color);
+    }
+  }
+
+  svg {
+    width: var(--jt-pagination-icon-size);
+    aspect-ratio: 1;
+    fill: currentColor;
+  }
+}
+
+.paginationArrow {
+  padding-inline: calc(var(--jt-pagination-btn-padding-inline) / 2);
+}
+
+/* purgecss end ignore */

package/src/web-components/json-table/src/parse-cols.js

@@ -1,4 +1,3 @@
-/*! minimo - json-table: columns parsing */
 
 /** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
 /** @typedef {import('./defaults.js').ColDefinition} ColDefinition */

package/src/web-components/json-table/src/parse-rows.js

@@ -1,4 +1,3 @@
-/*! minimo - json-table: rows parsing (sort & search values) */
 
 import { getNestedValue } from './content-utils.js';
 

package/src/web-components/json-table/src/resolve-params.js

@@ -1,4 +1,3 @@
-/*! minimo - json-table: params resolution */
 
 import { defaults, mergedParams, jqDatatableModeDefaults } from './defaults.js';
 

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

@@ -1,4 +1,3 @@
-/*! minimo - json-table: client-side search */
 
 /** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
 /** @typedef {import('./parse-rows.js').ParsedRow} ParsedRow */

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

@@ -1,4 +1,3 @@
-/*! minimo - json-table: client-side sorting */
 
 /** @typedef {import('./parse-rows.js').ParsedRow} ParsedRow */
 /** @typedef {'asc'|'desc'} SortDir */

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

@@ -1,4 +1,3 @@
-/*! minimo - json-table: tbody rendering */
 
 import * as styles from '../json-table-component.module.css';
 import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';

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

@@ -1,8 +1,7 @@
-/*! minimo - json-table: parte tabella (tabella, caption e barra del footer) */
 
 import * as styles from '../json-table-component.module.css';
 import { classnames } from '../../../utilities/classnames.js';
-import { theadPart } from './table-thead.js';
+import { theadPart } from './thead.js';
 
 /** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
 /** @typedef {import('../json-table-component.js').JsonTable} JsonTable */

package/src/web-components/json-table/src/{table-tfoot.js → tfoot.js}

@@ -1,4 +1,3 @@
-/*! minimo - json-table: tfoot rendering */
 
 import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';
 import { classnames } from '../../../utilities/classnames.js';

package/src/web-components/json-table/src/{table-thead.js → thead.js}

@@ -1,6 +1,5 @@
-/*! minimo - json-table: thead */
+import * as styles from './thead.module.css';
 
-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';
@@ -117,7 +116,7 @@ export function setSortListener(jt) {
 
 
 /**
- * Elemento domBuilder del `<thead>`.
+ * Elemento domBuilder per `<thead>`.
  *
  * Generated structure:
  * ```

package/src/web-components/json-table/src/thead.module.css

@@ -0,0 +1,47 @@
+/* purgecss start ignore */
+.sortable {
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--jt-thead-hover-background-color);
+    }
+  }
+}
+
+.sortBtn {
+  display: flex;
+  gap: var(--jt-sort-icon-gap);
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--jt-sort-btn-padding-block) var(--jt-sort-btn-padding-inline);
+  font: inherit;
+  line-height: var(--jt-sort-btn-line-height);
+  color: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+.sortTitle {
+  flex: 1 1 auto;
+}
+
+.sortIcon {
+  display: inline-flex;
+  flex: none;
+  width: var(--jt-sort-icon-size);
+  aspect-ratio: 1;
+  opacity: var(--jt-sort-icon-none-opacity);
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+
+  /* un ordinamento attivo (aria-sort sul th) mostra l'icona a piena opacità */
+  [aria-sort] & {
+    opacity: 1;
+  }
+}
+
+/* purgecss end ignore */

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

@@ -1,4 +1,3 @@
-/*! minimo - json-table: info text update */
 
 import { setContent } from './content-utils.js';