@massimo-cassandro/minimo 1.41.4 → 1.41.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -12
- package/charts/src/node-helpers/create-svg-canvas-node.mjs +2 -2
- package/charts/src/node-helpers/svg-text-to-path.js +9 -9
- package/charts/src/rating-display/index.js +1 -1
- package/charts/src/rating-display/ratindDisplayAnimation.js +3 -3
- package/design-tokens/README.md +2 -2
- package/design-tokens/_src/_readme.md +26 -26
- package/dev-tools/README.md +16 -16
- package/dev-tools/create-favicons/README.md +31 -31
- package/dev-tools/create-favicons/src/create-ico.mjs +2 -2
- package/dev-tools/create-favicons/src/default-params.mjs +1 -1
- package/dev-tools/create-favicons/src/init.mjs +1 -1
- package/dev-tools/design-tokens-builder/README.md +102 -102
- package/dev-tools/design-tokens-builder/build-tokens-src/build-source-modes.mjs +85 -73
- package/dev-tools/design-tokens-builder/build-tokens-src/config.mjs +109 -85
- package/dev-tools/design-tokens-builder/build-tokens-src/formats/css.mjs +113 -90
- package/dev-tools/design-tokens-builder/build-tokens-src/formats/json.mjs +107 -95
- package/dev-tools/design-tokens-builder/build-tokens-src/legacy-tokens-parser.mjs +71 -64
- package/dev-tools/design-tokens-builder/build-tokens-src/light-dark.mjs +75 -65
- package/dev-tools/design-tokens-builder/build-tokens-src/merge-css.mjs +113 -102
- package/dev-tools/design-tokens-builder/build-tokens-src/platforms.mjs +36 -30
- package/dev-tools/design-tokens-builder/build-tokens-src/resolve-source-paths.mjs +15 -13
- package/dev-tools/design-tokens-builder/build-tokens-src/source-prefixes.mjs +44 -42
- package/dev-tools/design-tokens-builder/build-tokens-src/source-transforms.mjs +89 -83
- package/dev-tools/design-tokens-builder/build-tokens-src/token-rename-parser.mjs +99 -86
- package/dev-tools/design-tokens-builder/build-tokens-src/transforms.mjs +64 -48
- package/dev-tools/design-tokens-builder/build-tokens.mjs +80 -68
- package/dev-tools/design-tokens-builder/check-unresolved-custom-props.mjs +103 -77
- package/dev-tools/design-tokens-builder/tokens-config-sample.mjs +275 -238
- package/dev-tools/find-orphan-css-classes/find-orphan-css-classes.mjs +2 -2
- package/dev-tools/starter-kit/source_files/app/CLAUDE.md +4 -2
- package/dev-tools/starter-kit/source_files/app/{css/index.css → index.css} +2 -2
- package/dev-tools/starter-kit/source_files/app/index.js +1 -1
- package/dev-tools/starter-kit/source_files/root/_sf/controller/ImgViewerController.php +3 -3
- package/dev-tools/starter-kit/source_files/root/_sf/controller/ViewerController.php +2 -2
- package/dev-tools/starter-kit/source_files/root/stylelint.config.mjs +1 -1
- package/dev-tools/starter-kit/source_files/root/webpack-config-modules/css-rules.mjs +1 -1
- package/dev-tools/stylelint-config/README.md +7 -7
- package/dev-tools/svg-icons-tools/README.md +32 -32
- package/dev-tools/svg-icons-tools/src/config-manager.mjs +1 -1
- package/dev-tools/svg-icons-tools/src/default-config.mjs +118 -118
- package/dev-tools/svg-icons-tools/src/jsx-icon-file-builder.mjs +24 -24
- package/dev-tools/svg-icons-tools/src/parse-svg-filename.mjs +3 -3
- package/dev-tools/svg-icons-tools/src/parse-svg-files.mjs +1 -1
- package/dev-tools/svg-icons-tools/src/parse-svg-markup.mjs +4 -4
- package/dev-tools/svg-icons-tools/src/svg-to-jsx.mjs +2 -2
- package/dev-tools/svg-icons-tools/src/svg-to-optimized.mjs +2 -2
- package/dev-tools/svg-icons-tools/src/svg-to-symbols.mjs +2 -2
- package/dev-tools/upd@m/README.md +1 -1
- package/dev-tools/upd@m/index.mjs +1 -1
- package/dev-tools/update-version/README.md +9 -9
- package/package.json +1 -1
- package/snippets/unsplash-browser-app/README.md +1 -1
- package/snippets/unsplash-browser-app/unsplash-utilities.js +9 -9
- package/src/components/autocomplete/README.md +3 -3
- package/src/components/autocomplete/autocomplete-engine.js +75 -63
- package/src/components/autocomplete/check-autocomplete.js +3 -3
- package/src/components/dismiss-alerts.js +3 -3
- package/src/components/form-reset-submit.js +6 -6
- package/src/components/inner-nav/inner-nav.js +2 -2
- package/src/components/modal-alert/modal-alert.js +67 -65
- package/src/components/modal-alert/modal-alert.minimo.tokens.mjs +1 -1
- package/src/components/modal-popup/modal-popup.js +56 -56
- package/src/components/overlay/overlay.js +3 -3
- package/src/components/sf-macro/readme.md +1 -1
- package/src/components/sf-macro/sf-macro.js +27 -23
- package/src/components/slide-up-down-toggle/slide-up-down-toggle.js +83 -79
- package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css +44 -44
- package/src/components/snackbar/snackbar.js +19 -19
- package/src/components/spinner/spinner.js +3 -3
- package/src/components/unsplash-page/README.md +8 -8
- package/src/components/unsplash-page/fetch-unsplash-data.js +3 -3
- package/src/components/unsplash-page/unsplash-page.js +33 -33
- package/src/components/unsplash-page/unsplash-page.module.css +1 -1
- package/src/css/alerts.css +2 -2
- package/src/css/forms/forms.css +4 -4
- package/src/css/forms/validation.css +1 -1
- package/src/css/margin-padding-media.css +4 -4
- package/src/css/margin-padding.css +4 -4
- package/src/css/reset.css +11 -11
- package/src/icons/read-me.md +1 -1
- package/src/minimo.css +3 -3
- package/src/utilities/better-text-with-places.js +22 -22
- package/src/utilities/better-text.js +42 -35
- package/src/utilities/classnames.js +8 -8
- package/src/utilities/cookies.js +6 -6
- package/src/utilities/create-id.js +3 -3
- package/src/utilities/disable-btns-on-submit.js +2 -2
- package/src/utilities/dom-builder/dom-builder.js +89 -86
- package/src/utilities/dom-builder/domBuilderBasicSetup.js +9 -9
- package/src/utilities/dom-builder/parseDomString.js +23 -23
- package/src/utilities/dom-builder-helpers/README.md +2 -2
- package/src/utilities/dom-builder-helpers/form-tags.js +100 -100
- package/src/utilities/dom-builder-helpers/picture-tag.js +39 -39
- package/src/utilities/enable-submit-btns.js +1 -1
- package/src/utilities/escape-html.js +2 -2
- package/src/utilities/generate-pwd.js +4 -4
- package/src/utilities/linked-dates.js +13 -13
- package/src/utilities/parse-file-size.js +6 -6
- package/src/utilities/random-id.js +3 -3
- package/src/utilities/relative-date.js +40 -40
- package/src/utilities/sentence-case.js +1 -1
- package/src/utilities/strip-tags.js +1 -1
- package/src/utilities/title-case.js +1 -1
- package/src/utilities/truncate-string.js +5 -5
- package/src/utilities/validation-error-class.js +12 -12
- package/src/web-components/json-table/json-table-component.js +123 -121
- package/src/web-components/json-table/json-table-component.module.css +6 -6
- package/src/web-components/json-table/json-table.minimo.tokens.mjs +6 -6
- package/src/web-components/json-table/readme.md +72 -108
- package/src/web-components/json-table/src/cell-content.js +25 -25
- package/src/web-components/json-table/src/content-utils.js +21 -21
- package/src/web-components/json-table/src/data-types.js +32 -32
- package/src/web-components/json-table/src/defaults.js +230 -191
- package/src/web-components/json-table/src/get-data.js +55 -38
- package/src/web-components/json-table/src/icons.js +17 -17
- package/src/web-components/json-table/src/info-section.js +18 -18
- package/src/web-components/json-table/src/main-builder.js +45 -45
- package/src/web-components/json-table/src/pagination.js +32 -32
- package/src/web-components/json-table/src/parse-cols.js +18 -18
- package/src/web-components/json-table/src/parse-rows.js +17 -17
- package/src/web-components/json-table/src/resolve-params.js +53 -41
- package/src/web-components/json-table/src/search.js +13 -13
- package/src/web-components/json-table/src/sorting.js +20 -20
- package/src/web-components/json-table/src/table-body.js +13 -13
- package/src/web-components/json-table/src/table-builder.js +34 -34
- package/src/web-components/json-table/src/table-tfoot.js +8 -8
- package/src/web-components/json-table/src/table-thead.js +21 -21
- package/src/web-components/json-table/src/update-info.js +11 -11
- package/types/classes.d.ts +2 -2
- package/types/global.d.ts +18 -12
|
@@ -45,7 +45,7 @@ export default {
|
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
47
|
|
|
48
|
-
//
|
|
48
|
+
// colonne ordinabili (thead)
|
|
49
49
|
thead: {
|
|
50
50
|
hover: {
|
|
51
51
|
background: {
|
|
@@ -58,7 +58,7 @@ export default {
|
|
|
58
58
|
},
|
|
59
59
|
|
|
60
60
|
sort: {
|
|
61
|
-
//
|
|
61
|
+
// il pulsante di ordinamento riempie l'intero th: stesso padding/line-height delle celle tabella di minimo
|
|
62
62
|
btn: {
|
|
63
63
|
padding: {
|
|
64
64
|
block: {
|
|
@@ -84,7 +84,7 @@ export default {
|
|
|
84
84
|
$type: 'dimension',
|
|
85
85
|
$value: '.4em'
|
|
86
86
|
},
|
|
87
|
-
//
|
|
87
|
+
// opacità dell'icona quando non c'è alcun ordinamento attivo
|
|
88
88
|
none: {
|
|
89
89
|
opacity: {
|
|
90
90
|
$type: 'number',
|
|
@@ -94,7 +94,7 @@ export default {
|
|
|
94
94
|
}
|
|
95
95
|
},
|
|
96
96
|
|
|
97
|
-
//
|
|
97
|
+
// celle booleane
|
|
98
98
|
bool: {
|
|
99
99
|
icon: {
|
|
100
100
|
size: {
|
|
@@ -116,7 +116,7 @@ export default {
|
|
|
116
116
|
}
|
|
117
117
|
},
|
|
118
118
|
|
|
119
|
-
//
|
|
119
|
+
// opacità della tabella mentre è in corso una richiesta server-side
|
|
120
120
|
busy: {
|
|
121
121
|
opacity: {
|
|
122
122
|
$type: 'number',
|
|
@@ -124,7 +124,7 @@ export default {
|
|
|
124
124
|
}
|
|
125
125
|
},
|
|
126
126
|
|
|
127
|
-
// footer
|
|
127
|
+
// barra del footer sotto la tabella (caption + paginazione)
|
|
128
128
|
'table-footer': {
|
|
129
129
|
padding: {
|
|
130
130
|
block: {
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
# `<json-table>` – datatable da JSON
|
|
2
2
|
|
|
3
|
-
**json-table** costruisce una tabella HTML da un array di dati JSON (inline o caricato via
|
|
4
|
-
fetch), a partire da una definizione delle colonne (`cols`) e da un insieme di tipi di dato
|
|
5
|
-
predefiniti ed estendibili, con ordinamento, ricerca e paginazione (lato client oppure, con
|
|
6
|
-
`serverSide: true`, delegati al server). È un web component light DOM senza dipendenze esterne:
|
|
7
|
-
può quindi essere stilizzato direttamente dal CSS del progetto in cui è utilizzato.
|
|
3
|
+
**json-table** costruisce una tabella HTML da un array di dati JSON (inline o caricato via fetch), a partire da una definizione delle colonne (`cols`) e da un insieme di tipi di dato predefiniti ed estendibili, con ordinamento, ricerca e paginazione (lato client oppure, con `serverSide: true`, delegati al server). È un web component light DOM senza dipendenze esterne: può quindi essere stilizzato direttamente dal CSS del progetto in cui è utilizzato.
|
|
8
4
|
|
|
9
5
|
## Installazione
|
|
10
6
|
|
|
@@ -26,10 +22,7 @@ webpack dello starter-kit).
|
|
|
26
22
|
|
|
27
23
|
### Tipi per gli script consumer
|
|
28
24
|
|
|
29
|
-
Il file `types/global.d.ts` di minimo dichiara il tipo globale `JsonTable` e registra il tag
|
|
30
|
-
`json-table` in `HTMLElementTagNameMap`: aggiungendolo all'`include` del proprio
|
|
31
|
-
`jsconfig.json`/`tsconfig.json` (`"node_modules/@massimo-cassandro/minimo/types/global.d.ts"`)
|
|
32
|
-
si ottiene il completamento dei metodi senza cast né import di tipo:
|
|
25
|
+
Il file `types/global.d.ts` di minimo dichiara il tipo globale `JsonTable` e registra il tag `json-table` in `HTMLElementTagNameMap`: aggiungendolo all'`include` del proprio `jsconfig.json`/`tsconfig.json` (`"node_modules/@massimo-cassandro/minimo/types/global.d.ts"`) si ottiene il completamento dei metodi senza cast né import di tipo:
|
|
33
26
|
|
|
34
27
|
```javascript
|
|
35
28
|
const el = document.querySelector('json-table'); // → JsonTable
|
|
@@ -210,106 +203,53 @@ el.init({ jsonUrl: '/api/rows.json', cols: [...] });
|
|
|
210
203
|
|
|
211
204
|
## Parametri
|
|
212
205
|
|
|
213
|
-
Tutti i parametri sono impostabili sia da attributo HTML che
|
|
214
|
-
funzione solo da `init()`.
|
|
206
|
+
Tutti i parametri sono impostabili sia da attributo HTML che come oggetto in `init({...})`. I valori di tipo funzione solo da `init()`.
|
|
215
207
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
// Non disponibile in modalità server-side. Default: false
|
|
262
|
-
updateFooterOnPageChange, // boolean – se true `tfootRender` riceve solo i record della pagina
|
|
263
|
-
// corrente (subtotali di pagina) e il footer si aggiorna a ogni cambio
|
|
264
|
-
// pagina; se false riceve l'intero set filtrato e si aggiorna solo al
|
|
265
|
-
// cambio filtro. Default: false
|
|
266
|
-
infoText, // string|Function|null – contenuto dell'area info: stringa mustache-like
|
|
267
|
-
// con i segnaposto {start}, {end}, {totRec}, {filteredRec}, {page},
|
|
268
|
-
// {totPages}, oppure funzione
|
|
269
|
-
// (start, end, totRec, filteredRec, page, totPages) => string|Node.
|
|
270
|
-
// null = viene usato `labels.info`. Default: null
|
|
271
|
-
template, // Array – layout del contenitore principale (vedi "Template").
|
|
272
|
-
// Default: [{ slot: 'infoSection' }, { slot: 'table' }]
|
|
273
|
-
|
|
274
|
-
locale, // string – locale per numeri, date e confronto stringhe
|
|
275
|
-
// nell'ordinamento. Default: 'it-IT'
|
|
276
|
-
currency, // string – codice ISO 4217 usato dal tipo `currency`. Default: 'EUR'
|
|
277
|
-
datesLocaleOpts, // Intl.DateTimeFormatOptions – parte data dei tipi date/datetime.
|
|
278
|
-
// Default: { year: 'numeric', month: 'short', day: 'numeric' }
|
|
279
|
-
timesLocaleOpts, // Intl.DateTimeFormatOptions – parte ora del tipo datetime.
|
|
280
|
-
// Default: { hour12: false, hour: '2-digit', minute: '2-digit' }
|
|
281
|
-
numbersLocaleOpts, // Intl.NumberFormatOptions – tipo num.
|
|
282
|
-
// Default: { maximumFractionDigits: 2 }
|
|
283
|
-
currPercLocaleOpts, // Intl.NumberFormatOptions – tipi currency/euro/perc/percDecimal.
|
|
284
|
-
// Default: { minimumFractionDigits: 2, maximumFractionDigits: 2 }
|
|
285
|
-
|
|
286
|
-
renderNullAs, // string|null – contenuto per i valori null/undefined. Default: '—'
|
|
287
|
-
renderZeroAs, // string|null – se non null, contenuto per i valori numerici pari a
|
|
288
|
-
// zero. Default: null
|
|
289
|
-
renderNaNAs, // string|null – contenuto per i valori non numerici nei tipi numerici.
|
|
290
|
-
// Default: '—'
|
|
291
|
-
|
|
292
|
-
boolTrueIcon, // icona per i valori true (tipo bool).
|
|
293
|
-
// Default: icona `check-bold` di minimo (Phosphor)
|
|
294
|
-
boolFalseIcon, // icona per i valori false. Default: icona `x-bold`
|
|
295
|
-
sortAscArrowIcon, // icona del pulsante di ordinamento, ordinamento asc attivo.
|
|
296
|
-
// Default: icona `arrow-up`
|
|
297
|
-
sortDescArrowIcon, // idem, ordinamento desc attivo. Default: icona `arrow-down`
|
|
298
|
-
sortNoneArrowIcon, // idem, nessun ordinamento. Default: icona `arrows-down-up`
|
|
299
|
-
paginationPrevIcon, // icona del pulsante "pagina precedente". Default: icona `caret-left`
|
|
300
|
-
paginationNextIcon, // icona del pulsante "pagina successiva". Default: icona `caret-right`
|
|
301
|
-
// Ogni icona può essere una stringa SVG/HTML (es. import `?inline`),
|
|
302
|
-
// un Node, un oggetto domBuilder o una funzione che restituisce uno
|
|
303
|
-
// di questi valori
|
|
304
|
-
|
|
305
|
-
trCallback, // (tr, row, params) => void – callback invocata dopo il rendering di
|
|
306
|
-
// ogni riga del body. Default: null
|
|
307
|
-
tableId, // string – id del tag <table>. Default: null
|
|
308
|
-
|
|
309
|
-
classes, // Object – classi consumer (vedi sotto), unite ai default
|
|
310
|
-
labels // Object – testi (vedi sotto), uniti ai default
|
|
311
|
-
}
|
|
312
|
-
```
|
|
208
|
+
| Parametro | Tipo / default | Descrizione |
|
|
209
|
+
|---|---|---|
|
|
210
|
+
| `debug` | boolean (`false`) | Log in console di parametri, colonne, dati, stato ed elementi generati |
|
|
211
|
+
| `jsonUrl` | string (`null`) | URL del JSON da caricare. Ignorato se `data` è presente |
|
|
212
|
+
| `jqDatatableMode` | boolean (`false`) | Se `true` imposta come default i valori compatibili con il formato server-side di jQuery DataTables: `jsonDataField: 'data'`, `totRecField: 'recordsTotal'`, `filteredRecField: 'recordsFiltered'`, `serverSide: true` e i `serverParams` indicati in "Modalità jQuery DataTables". Ogni valore resta sovrascrivibile |
|
|
213
|
+
| `jsonDataField` | string o null (`'data'`) | Chiave del JSON che contiene l'array delle righe (es. `'data'` per `{ data: [...] }`); `null` o `''` = la root del JSON è l'array stesso |
|
|
214
|
+
| `totRecField` | string (`'totRec'`) | Chiave del JSON con il totale dei record (numerico); se assente o non numerico il totale è la lunghezza dell'array |
|
|
215
|
+
| `filteredRecField` | string (`'filteredRec'`) | Solo server-side: chiave del JSON con il numero di record che soddisfano la ricerca corrente; se assente vale `totRecField` |
|
|
216
|
+
| `data` | Array<Object> (`null`) | Righe inline; prevale su `jsonUrl`. Da attributo va passato come stringa JSON ed è sempre inteso come array delle righe (`jsonDataField` ignorato) |
|
|
217
|
+
| `cols` | ColDefinition[] | **OBBLIGATORIO**: definizione delle colonne (vedi sotto). Se assente o vuoto viene segnalato un errore in console e la tabella non viene generata |
|
|
218
|
+
| `dataTypes` | Object (`{}`) | Tipi di dato personalizzati, uniti a quelli predefiniti (vedi sotto) |
|
|
219
|
+
| `caption` | string o Function (`null`) | Caption della tabella (testo o HTML), oppure funzione che restituisce stringa o Node. Mostrata sotto la tabella (vedi "Caption e paginazione") |
|
|
220
|
+
| `search` | boolean (`true`) | Genera l'input di ricerca |
|
|
221
|
+
| `searchDebounce` | number (`300`) | Millisecondi di attesa dopo l'ultimo tasto prima di eseguire la ricerca |
|
|
222
|
+
| `perPage` | number (`25`) | Righe per pagina; `0` = nessuna paginazione (tutte le righe, nessuna navigazione) |
|
|
223
|
+
| `paginationDelta` | number (`2`) | Pulsanti pagina mostrati a ciascun lato della pagina corrente |
|
|
224
|
+
| `serverSide` | boolean (`false`) | Paginazione, ordinamento e ricerca delegati al server (vedi "Modalità server-side"). Richiede `jsonUrl` |
|
|
225
|
+
| `serverParams` | Object | Nomi dei parametri di query string in modalità server-side, uniti ai default (vedi sotto) |
|
|
226
|
+
| `initialSort` | { key, dir } o null (`null`) | Ordinamento applicato al caricamento, es. `{ key: 'name', dir: 'asc' }` |
|
|
227
|
+
| `tfoot` | boolean (`false`) | Genera il tfoot (vedi `tfootRender` delle colonne). Non disponibile in modalità server-side |
|
|
228
|
+
| `updateFooterOnPageChange` | boolean (`false`) | Se `true` `tfootRender` riceve solo i record della pagina corrente (subtotali di pagina) e il footer si aggiorna a ogni cambio pagina; se `false` riceve l'intero set filtrato e si aggiorna solo al cambio filtro |
|
|
229
|
+
| `infoText` | string, Function o null (`null`) | Contenuto dell'area info: stringa mustache-like con i segnaposto `{start}`, `{end}`, `{totRec}`, `{filteredRec}`, `{page}`, `{totPages}`, oppure funzione `(start, end, totRec, filteredRec, page, totPages) => string\|Node`. `null` = viene usato `labels.info` |
|
|
230
|
+
| `template` | Array (`[{ slot: 'infoSection' }, { slot: 'table' }]`) | Layout del contenitore principale (vedi "Template") |
|
|
231
|
+
| `locale` | string (`'it-IT'`) | Locale per numeri, date e confronto stringhe nell'ordinamento |
|
|
232
|
+
| `currency` | string (`'EUR'`) | Codice ISO 4217 usato dal tipo `currency` |
|
|
233
|
+
| `datesLocaleOpts` | Intl.DateTimeFormatOptions (`{ year: 'numeric', month: 'short', day: 'numeric' }`) | Parte data dei tipi date/datetime |
|
|
234
|
+
| `timesLocaleOpts` | Intl.DateTimeFormatOptions (`{ hour12: false, hour: '2-digit', minute: '2-digit' }`) | Parte ora del tipo datetime |
|
|
235
|
+
| `numbersLocaleOpts` | Intl.NumberFormatOptions (`{ maximumFractionDigits: 2 }`) | Tipo `num` |
|
|
236
|
+
| `currPercLocaleOpts` | Intl.NumberFormatOptions (`{ minimumFractionDigits: 2, maximumFractionDigits: 2 }`) | Tipi currency/euro/perc/percDecimal |
|
|
237
|
+
| `renderNullAs` | string o null (`'—'`) | Contenuto per i valori null/undefined |
|
|
238
|
+
| `renderZeroAs` | string o null (`null`) | Se non null, contenuto per i valori numerici pari a zero |
|
|
239
|
+
| `renderNaNAs` | string o null (`'—'`) | Contenuto per i valori non numerici nei tipi numerici |
|
|
240
|
+
| `boolTrueIcon` | icona, vedi nota (icona `check-bold` di minimo (Phosphor)) | Icona per i valori `true` (tipo bool) |
|
|
241
|
+
| `boolFalseIcon` | icona, vedi nota (icona `x-bold`) | Icona per i valori `false` |
|
|
242
|
+
| `sortAscArrowIcon` | icona, vedi nota (icona `arrow-up`) | Icona del pulsante di ordinamento, ordinamento asc attivo |
|
|
243
|
+
| `sortDescArrowIcon` | icona, vedi nota (icona `arrow-down`) | Icona del pulsante di ordinamento, ordinamento desc attivo |
|
|
244
|
+
| `sortNoneArrowIcon` | icona, vedi nota (icona `arrows-down-up`) | Icona del pulsante di ordinamento, nessun ordinamento |
|
|
245
|
+
| `paginationPrevIcon` | icona, vedi nota (icona `caret-left`) | Icona del pulsante "pagina precedente" |
|
|
246
|
+
| `paginationNextIcon` | icona, vedi nota (icona `caret-right`) | Icona del pulsante "pagina successiva" |
|
|
247
|
+
| `trCallback` | (tr, row, params) => void (`null`) | Callback invocata dopo il rendering di ogni riga del body |
|
|
248
|
+
| `tableId` | string (`null`) | Id del tag `<table>` |
|
|
249
|
+
| `classes` | Object | Classi consumer (vedi sotto), unite ai default |
|
|
250
|
+
| `labels` | Object | Testi (vedi sotto), uniti ai default |
|
|
251
|
+
|
|
252
|
+
**Nota sulle icone**: ogni icona può essere una stringa SVG/HTML (es. import `?inline`), un Node, un oggetto domBuilder o una funzione che restituisce uno di questi valori.
|
|
313
253
|
|
|
314
254
|
### `classes`
|
|
315
255
|
|
|
@@ -626,6 +566,30 @@ disponibile. In questa modalità `data`, `filtered` e `pageRows` dello stato con
|
|
|
626
566
|
pagina corrente e il `tfoot` non è disponibile. `serverSide` richiede `jsonUrl`: con `data` inline
|
|
627
567
|
viene ignorato con un avviso in console.
|
|
628
568
|
|
|
569
|
+
### Modalità jQuery DataTables
|
|
570
|
+
|
|
571
|
+
Con `jqDatatableMode: true` (o l'attributo `jqdatatablemode="true"`) i default dei parametri server-side diventano quelli del formato di jQuery DataTables, utile per riutilizzare endpoint già esistenti:
|
|
572
|
+
|
|
573
|
+
| Parametro | Default con `jqDatatableMode` |
|
|
574
|
+
|---|---|
|
|
575
|
+
| `jsonDataField` | `'data'` |
|
|
576
|
+
| `totRecField` | `'recordsTotal'` |
|
|
577
|
+
| `filteredRecField` | `'recordsFiltered'` |
|
|
578
|
+
| `serverSide` | `true` |
|
|
579
|
+
| `serverParams` | `{ page: null, start: 'start', perPage: 'length', sort: 'order[0][column]', dir: 'order[0][dir]', search: 'search[value]' }` |
|
|
580
|
+
|
|
581
|
+
Precedenza: `init()` > attributo HTML > `JsonTable.setDefaults()` > modalità jQuery DataTables > default predefiniti. Ogni parametro può quindi essere sovrascritto singolarmente, e `serverParams` viene unito chiave per chiave.
|
|
582
|
+
|
|
583
|
+
Oltre ai `serverParams`, in questa modalità vengono inviati anche `draw=1` e, per ogni colonna visualizzata, `columns[i][name]` (la `key`), `columns[i][searchable]` e `columns[i][orderable]`. `order[0][column]` riceve l'**indice** della colonna ordinata (tra quelle visualizzate), non la chiave. È previsto un solo criterio di ordinamento (`order[0]`).
|
|
584
|
+
|
|
585
|
+
```html
|
|
586
|
+
<json-table jsonurl="/api/rows" jqdatatablemode="true" cols='[{"key":"id"},{"key":"name"}]'></json-table>
|
|
587
|
+
```
|
|
588
|
+
|
|
589
|
+
```
|
|
590
|
+
GET /api/rows?draw=1&columns[0][name]=id&columns[0][searchable]=true&columns[0][orderable]=true&columns[1][name]=name&…&start=25&length=25&order[0][column]=1&order[0][dir]=desc&search[value]=mar
|
|
591
|
+
```
|
|
592
|
+
|
|
629
593
|
## Template
|
|
630
594
|
|
|
631
595
|
`template` definisce il contenuto del contenitore principale come array domBuilder, in cui gli
|
|
@@ -8,21 +8,21 @@ import { toNumber } from './data-types.js';
|
|
|
8
8
|
/** @typedef {import('./parse-cols.js').ParsedCol} ParsedCol */
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Calcola il contenuto di una cella del body.
|
|
12
12
|
*
|
|
13
13
|
* Pipeline:
|
|
14
|
-
* 1.
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* 2. `null`/`undefined`
|
|
18
|
-
* 3.
|
|
19
|
-
* 4.
|
|
14
|
+
* 1. `render` della colonna: funzione `(row, tr, td)` o stringa in stile mustache (`[[key]]`); una funzione
|
|
15
|
+
* che restituisce `undefined` lascia proseguire la pipeline (utile per decorare solo `td`/`tr`), `null`
|
|
16
|
+
* dà `renderNullAs`
|
|
17
|
+
* 2. valore grezzo `null`/`undefined` → `renderNullAs`
|
|
18
|
+
* 3. `render(value, row, params)` del data type
|
|
19
|
+
* 4. valore grezzo
|
|
20
20
|
*
|
|
21
|
-
* @param {ParsedCol} col -
|
|
22
|
-
* @param {Object} row -
|
|
23
|
-
* @param {JsonTableParams} params -
|
|
24
|
-
* @param {HTMLTableRowElement} [tr] -
|
|
25
|
-
* @param {HTMLTableCellElement} [td] -
|
|
21
|
+
* @param {ParsedCol} col - Colonna analizzata
|
|
22
|
+
* @param {Object} row - Oggetto riga
|
|
23
|
+
* @param {JsonTableParams} params - Parametri risolti
|
|
24
|
+
* @param {HTMLTableRowElement} [tr] - Elemento riga, passato al `render` della colonna
|
|
25
|
+
* @param {HTMLTableCellElement} [td] - Elemento cella, passato al `render` della colonna
|
|
26
26
|
* @returns {CellContent}
|
|
27
27
|
*
|
|
28
28
|
* @example
|
|
@@ -30,7 +30,7 @@ import { toNumber } from './data-types.js';
|
|
|
30
30
|
* cellContent({ ...col, key: 'amount', _type: types.euro }, { amount: null }, params); // → '—' (renderNullAs)
|
|
31
31
|
* cellContent({ ...col, render: '<b>[[name]]</b>' }, { name: 'Mario' }, params); // → '<b>Mario</b>'
|
|
32
32
|
* cellContent({ ...col, render: (row, tr, td) => { td.title = row.name; } }, row, params, tr, td);
|
|
33
|
-
* // → data type /
|
|
33
|
+
* // → data type / valore grezzo (render ha restituito undefined)
|
|
34
34
|
*/
|
|
35
35
|
export function cellContent(col, row, params, tr, td) {
|
|
36
36
|
|
|
@@ -61,8 +61,8 @@ export function cellContent(col, row, params, tr, td) {
|
|
|
61
61
|
|
|
62
62
|
|
|
63
63
|
/**
|
|
64
|
-
*
|
|
65
|
-
*
|
|
64
|
+
* Aggregati predefiniti del footer (`tfootRender: '@sum'`, ...), calcolati sui valori numerici
|
|
65
|
+
* della colonna (i valori non numerici vengono saltati).
|
|
66
66
|
* @type {Object<string, (nums: number[]) => number>}
|
|
67
67
|
*/
|
|
68
68
|
const aggregates = {
|
|
@@ -75,17 +75,17 @@ const aggregates = {
|
|
|
75
75
|
|
|
76
76
|
|
|
77
77
|
/**
|
|
78
|
-
*
|
|
79
|
-
* -
|
|
80
|
-
* -
|
|
81
|
-
* type,
|
|
82
|
-
* -
|
|
83
|
-
* - `null`:
|
|
78
|
+
* Calcola il contenuto di una cella del footer dal `tfootRender` della colonna:
|
|
79
|
+
* - funzione `(rows, td) => content`
|
|
80
|
+
* - aggregato predefinito `'@sum'`, `'@avg'`, `'@min'`, `'@max'` (formattato dal data
|
|
81
|
+
* type della colonna, ad es. come valuta per le colonne `euro`) oppure `'@count'` (numero di valori numerici)
|
|
82
|
+
* - qualsiasi altra stringa: contenuto statico (ad es. un'etichetta "Totale")
|
|
83
|
+
* - `null`: cella vuota
|
|
84
84
|
*
|
|
85
|
-
* @param {ParsedCol} col -
|
|
86
|
-
* @param {Array<Object>} rows -
|
|
87
|
-
* @param {JsonTableParams} params -
|
|
88
|
-
* @param {HTMLTableCellElement} [td] -
|
|
85
|
+
* @param {ParsedCol} col - Colonna analizzata
|
|
86
|
+
* @param {Array<Object>} rows - Righe da aggregare (insieme filtrato o pagina corrente, vedi `updateFooterOnPageChange`)
|
|
87
|
+
* @param {JsonTableParams} params - Parametri risolti
|
|
88
|
+
* @param {HTMLTableCellElement} [td] - Elemento cella del footer, passato alla funzione `tfootRender`
|
|
89
89
|
* @returns {CellContent}
|
|
90
90
|
*
|
|
91
91
|
* @example
|
|
@@ -5,17 +5,17 @@ import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';
|
|
|
5
5
|
/** @typedef {import('./defaults.js').CellContent} CellContent */
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* (`Element.setHTML`
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
8
|
+
* Sostituisce il contenuto di `el` con `content`, accettando ogni forma di contenuto usata dal
|
|
9
|
+
* componente (vedi `CellContent`): un Node viene aggiunto così com'è, un array domBuilder viene costruito dentro
|
|
10
|
+
* l'elemento, una stringa/numero viene impostato come testo oppure, se contiene `<`, come markup sanificato
|
|
11
|
+
* (`Element.setHTML` dove supportato, altrimenti `innerHTML`, in modo coerente con domBuilder).
|
|
12
|
+
* La configurazione vuota del sanitizer passata a `setHTML` mantiene gli attributi `class`, `id`, `style` e `data-*`,
|
|
13
|
+
* che la configurazione predefinita del browser rimuove, mentre il contenuto non sicuro (script,
|
|
14
|
+
* gestori di eventi, URL `javascript:`) viene sempre eliminato.
|
|
15
|
+
* Una funzione viene invocata e il suo risultato usato. `null`/`undefined` svuotano l'elemento.
|
|
16
16
|
*
|
|
17
|
-
* @param {HTMLElement} el -
|
|
18
|
-
* @param {CellContent|(() => CellContent)} content -
|
|
17
|
+
* @param {HTMLElement} el - Elemento di destinazione (svuotato prima)
|
|
18
|
+
* @param {CellContent|(() => CellContent)} content - Contenuto da impostare
|
|
19
19
|
* @returns {void}
|
|
20
20
|
*
|
|
21
21
|
* @example
|
|
@@ -24,7 +24,7 @@ import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';
|
|
|
24
24
|
* setContent(td, 1234);
|
|
25
25
|
* setContent(td, document.createElement('span'));
|
|
26
26
|
* setContent(td, [{ tag: 'a', attrs: { href: '#' }, content: 'link' }]);
|
|
27
|
-
* setContent(td, null); // →
|
|
27
|
+
* setContent(td, null); // → cella vuota
|
|
28
28
|
*/
|
|
29
29
|
export function setContent(el, content) {
|
|
30
30
|
|
|
@@ -60,11 +60,11 @@ export function setContent(el, content) {
|
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
/**
|
|
63
|
-
*
|
|
64
|
-
*
|
|
63
|
+
* Legge un valore da un oggetto tramite un percorso di chiavi separate da punti.
|
|
64
|
+
* Restituisce `undefined` quando una chiave intermedia non esiste.
|
|
65
65
|
*
|
|
66
|
-
* @param {Object|null|undefined} obj -
|
|
67
|
-
* @param {string} path -
|
|
66
|
+
* @param {Object|null|undefined} obj - Oggetto sorgente
|
|
67
|
+
* @param {string} path - Chiave o percorso separato da punti
|
|
68
68
|
* @returns {*}
|
|
69
69
|
*
|
|
70
70
|
* @example
|
|
@@ -81,13 +81,13 @@ export function getNestedValue(obj, path) {
|
|
|
81
81
|
|
|
82
82
|
|
|
83
83
|
/**
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
*
|
|
84
|
+
* Risolve un template in stile mustache: ogni segnaposto `[[key]]` viene sostituito con il
|
|
85
|
+
* corrispondente valore della riga (chiavi annidate ammesse); i segnaposto che risultano `null`/`undefined`
|
|
86
|
+
* vengono sostituiti con `nullAs`. Utile per la configurazione senza JS tramite attributi HTML.
|
|
87
87
|
*
|
|
88
|
-
* @param {string} tpl -
|
|
89
|
-
* @param {Object} row -
|
|
90
|
-
* @param {string} [nullAs=''] -
|
|
88
|
+
* @param {string} tpl - Stringa del template
|
|
89
|
+
* @param {Object} row - Oggetto riga
|
|
90
|
+
* @param {string} [nullAs=''] - Sostituto dei valori null/undefined (default: '')
|
|
91
91
|
* @returns {string}
|
|
92
92
|
*
|
|
93
93
|
* @example
|
|
@@ -8,7 +8,7 @@ import { iconContent } from './icons.js';
|
|
|
8
8
|
/** @typedef {import('./defaults.js').DataTypeDefinition} DataTypeDefinition */
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Converte un valore in numero; le stringhe vuote e i valori nullish danno `NaN`.
|
|
12
12
|
* @param {*} value
|
|
13
13
|
* @returns {number}
|
|
14
14
|
*
|
|
@@ -26,8 +26,8 @@ export function toNumber(value) {
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
/**
|
|
29
|
-
*
|
|
30
|
-
*
|
|
29
|
+
* Converte un valore simile a un booleano (`true`/`false`, `1`/`0`, `'1'`/`'0'`, `'true'`/`'false'`)
|
|
30
|
+
* in booleano; ogni altro valore dà `null`, così che `null` si distingua da `false`.
|
|
31
31
|
* @param {*} value
|
|
32
32
|
* @returns {boolean|null}
|
|
33
33
|
*
|
|
@@ -49,11 +49,11 @@ export function toBool(value) {
|
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
/**
|
|
52
|
-
*
|
|
52
|
+
* Analizza un valore simile a una data: stringa ISO, timestamp, oggetto `Date` o un oggetto in stile Symfony
|
|
53
53
|
* (`{ date: '2022-12-02 06:18:55', timezone_type: 3, timezone: 'Europe/Berlin' }`).
|
|
54
54
|
* TODO fuso orario degli oggetti Symfony non gestito (la stringa `date` è interpretata come ora locale)
|
|
55
55
|
* @param {*} value
|
|
56
|
-
* @returns {Date|null} `null`
|
|
56
|
+
* @returns {Date|null} `null` per i valori vuoti o non validi
|
|
57
57
|
*
|
|
58
58
|
* @example
|
|
59
59
|
* parseDate('2024-01-31'); // → Date
|
|
@@ -77,11 +77,11 @@ export function parseDate(value) {
|
|
|
77
77
|
|
|
78
78
|
|
|
79
79
|
/**
|
|
80
|
-
*
|
|
81
|
-
* @param {*} value -
|
|
82
|
-
* @param {JsonTableParams} params -
|
|
83
|
-
* @param {Intl.NumberFormatOptions} formatOpts - `toLocaleString`
|
|
84
|
-
* @param {(formatted: string, num: number) => string} [wrap] -
|
|
80
|
+
* Formatta un valore numerico, applicando `renderNaNAs` e `renderZeroAs`.
|
|
81
|
+
* @param {*} value - Valore grezzo
|
|
82
|
+
* @param {JsonTableParams} params - Parametri risolti
|
|
83
|
+
* @param {Intl.NumberFormatOptions} formatOpts - Opzioni di `toLocaleString`
|
|
84
|
+
* @param {(formatted: string, num: number) => string} [wrap] - Decoratore opzionale della stringa formattata
|
|
85
85
|
* @returns {string}
|
|
86
86
|
*
|
|
87
87
|
* @example
|
|
@@ -104,23 +104,23 @@ export function formatNumber(value, params, formatOpts, wrap) {
|
|
|
104
104
|
|
|
105
105
|
|
|
106
106
|
/**
|
|
107
|
-
*
|
|
107
|
+
* Data type predefiniti, costruiti sui parametri risolti (nomi delle classi, opzioni locale, icone).
|
|
108
108
|
*
|
|
109
|
-
* |
|
|
109
|
+
* | chiave | descrizione | classi della cella |
|
|
110
110
|
* |---------------|-----------------------------------------------------------------|-------------------------|
|
|
111
|
-
* | `string` |
|
|
112
|
-
* | `num` |
|
|
113
|
-
* | `id` |
|
|
114
|
-
* | `perc` |
|
|
115
|
-
* | `percDecimal` |
|
|
116
|
-
* | `currency` | `Intl
|
|
117
|
-
* | `euro` |
|
|
118
|
-
* | `date` | `<time
|
|
119
|
-
* | `datetime` |
|
|
120
|
-
* | `bool` | `boolTrueIcon`/`boolFalseIcon`;
|
|
121
|
-
* | `email` |
|
|
111
|
+
* | `string` | tipo predefinito, valore così com'è | – |
|
|
112
|
+
* | `num` | numero formattato con `numbersLocaleOpts` | textEnd numeric nowrap |
|
|
113
|
+
* | `id` | id numerico: valore grezzo, allineato a destra, non ricercabile | textEnd numeric |
|
|
114
|
+
* | `perc` | percentuale già in scala 0–100, `currPercLocaleOpts` + " %" | textEnd numeric nowrap |
|
|
115
|
+
* | `percDecimal` | percentuale in scala 0–1 (moltiplicata per 100) | textEnd numeric nowrap |
|
|
116
|
+
* | `currency` | formato valuta `Intl`, `params.currency` | textEnd numeric nowrap |
|
|
117
|
+
* | `euro` | come `currency`, EUR forzato | textEnd numeric nowrap |
|
|
118
|
+
* | `date` | elemento `<time>`, `datesLocaleOpts` | textEnd nowrap |
|
|
119
|
+
* | `datetime` | come `date`, più la parte oraria (`timesLocaleOpts`) | textEnd nowrap |
|
|
120
|
+
* | `bool` | `boolTrueIcon`/`boolFalseIcon`; non ordinabile/ricercabile | (stili interni delle icone) |
|
|
121
|
+
* | `email` | a capo morbidi attorno a `@` | – |
|
|
122
122
|
*
|
|
123
|
-
* @param {JsonTableParams} params -
|
|
123
|
+
* @param {JsonTableParams} params - Parametri risolti
|
|
124
124
|
* @returns {Object<string, DataTypeDefinition>}
|
|
125
125
|
*
|
|
126
126
|
* @example
|
|
@@ -237,21 +237,21 @@ export function builtInDataTypes(params) {
|
|
|
237
237
|
|
|
238
238
|
|
|
239
239
|
/**
|
|
240
|
-
*
|
|
240
|
+
* Unisce i data type personalizzati (`params.dataTypes`) a quelli predefiniti.
|
|
241
241
|
*
|
|
242
|
-
*
|
|
243
|
-
*
|
|
242
|
+
* Una chiave personalizzata che corrisponde a un tipo predefinito ne sovrascrive solo le proprietà indicate; una nuova chiave può
|
|
243
|
+
* estendere un tipo predefinito tramite `inheritsFrom`.
|
|
244
244
|
*
|
|
245
|
-
* @param {JsonTableParams} params -
|
|
246
|
-
* @returns {Object<string, DataTypeDefinition>}
|
|
247
|
-
* @throws {Error}
|
|
245
|
+
* @param {JsonTableParams} params - Parametri risolti
|
|
246
|
+
* @returns {Object<string, DataTypeDefinition>} La mappa completa dei data type
|
|
247
|
+
* @throws {Error} Quando `inheritsFrom` si riferisce a un tipo sconosciuto
|
|
248
248
|
*
|
|
249
249
|
* @example
|
|
250
250
|
* const types = buildDataTypes({
|
|
251
251
|
* ...params,
|
|
252
252
|
* dataTypes: {
|
|
253
|
-
* num: { cellClass: 'text-end fw-bold' }, //
|
|
254
|
-
* km: { inheritsFrom: 'num', render: v => `${v} km` } //
|
|
253
|
+
* num: { cellClass: 'text-end fw-bold' }, // sovrascrive solo `cellClass` del `num` predefinito
|
|
254
|
+
* km: { inheritsFrom: 'num', render: v => `${v} km` } // nuovo tipo basato su `num`
|
|
255
255
|
* }
|
|
256
256
|
* });
|
|
257
257
|
*/
|