@massimo-cassandro/minimo 1.42.1 → 1.42.3
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/dev-tools/README.md +1 -44
- package/dev-tools/find-orphan-css-classes/readme.md +3 -0
- package/dev-tools/layout-tools/readme.md +3 -0
- package/dev-tools/starter-kit/README.md +26 -0
- package/dev-tools/svg-icons-tools/README.md +13 -0
- package/dev-tools/update-version/README.md +1 -1
- package/dev-tools/update-version/src/create-log-row.mjs +6 -8
- package/package.json +1 -1
- package/src/web-components/json-table/json-table-component.js +2 -2
- package/src/web-components/json-table/json-table-component.module.css +0 -117
- package/src/web-components/json-table/json-table.minimo.tokens.mjs +1 -1
- package/src/web-components/json-table/jt-docs/parametri.md +51 -45
- package/src/web-components/json-table/src/cell-content.js +0 -2
- package/src/web-components/json-table/src/content-utils.js +0 -1
- package/src/web-components/json-table/src/data-types.js +0 -1
- package/src/web-components/json-table/src/defaults.js +0 -1
- package/src/web-components/json-table/src/get-data.js +0 -1
- package/src/web-components/json-table/src/icons.js +0 -1
- package/src/web-components/json-table/src/info-section.js +0 -1
- package/src/web-components/json-table/src/main-builder.js +0 -1
- package/src/web-components/json-table/src/pagination.js +2 -2
- package/src/web-components/json-table/src/pagination.module.css +77 -0
- package/src/web-components/json-table/src/parse-cols.js +0 -1
- package/src/web-components/json-table/src/parse-rows.js +0 -1
- package/src/web-components/json-table/src/resolve-params.js +0 -1
- package/src/web-components/json-table/src/search.js +0 -1
- package/src/web-components/json-table/src/sorting.js +0 -1
- package/src/web-components/json-table/src/table-body.js +0 -1
- package/src/web-components/json-table/src/table-builder.js +1 -2
- package/src/web-components/json-table/src/{table-tfoot.js → tfoot.js} +0 -1
- package/src/web-components/json-table/src/{table-thead.js → thead.js} +2 -3
- package/src/web-components/json-table/src/thead.module.css +47 -0
- package/src/web-components/json-table/src/update-info.js +0 -1
package/dev-tools/README.md
CHANGED
|
@@ -1,50 +1,7 @@
|
|
|
1
1
|
# Dev tools
|
|
2
2
|
|
|
3
|
-
Raccolta di utilità CLI Node.js standalone che aiutano nelle attività
|
|
3
|
+
Raccolta di utilità CLI Node.js standalone o Vanilla JS che aiutano nelle attività di gestione di un progetto web (aggiornamento delle dipendenze, versionamento/changelog, generazione di icone e favicon). Ogni strumento risiede in una propria sottocartella, funziona in modo indipendente dagli altri e dal pacchetto `minimo`, ed è documentato nel proprio README.
|
|
4
4
|
|
|
5
|
-
* [update-version](./update-version/README.md) — incrementa la versione in `package.json` e aggiunge una voce a `changelog.md`
|
|
6
|
-
* [Svg Icons Tools](./svg-icons-tools/README.md) — ottimizza le icone SVG e le combina/converte in symbol, JSX o variabili SCSS
|
|
7
|
-
* [Create favicons](./create-favicons/README.md) — genera il set completo di favicon (SVG, PNG, ICO, webmanifest, snippet HTML) a partire da un'immagine sorgente
|
|
8
|
-
* [upd@m](./upd@m/README.md) — aggiorna tutti i pacchetti `@massimo-cassandro/*` installati in `node_modules`
|
|
9
|
-
* [Design Tokens Builder](./design-tokens-builder/README.md) — genera un file di custom properties CSS (e, opzionalmente, file JSON di token) a partire dai sorgenti dei design token
|
|
10
|
-
* [starter-kit](#starter-kit) — script per installare l'ambiente minimo
|
|
11
|
-
|
|
12
|
-
## starter-kit
|
|
13
|
-
|
|
14
|
-
`starter-kit/starter-install.sh` avvia un nuovo progetto frontend: copia i file di configurazione starter (`package.json`, `.gitignore`, `jsconfig.json`, configurazioni eslint/stylelint, configurazione e moduli webpack, ...) nella root del progetto e i file frontend (template webpack, `CLAUDE.md`, `_root_htaccess`/`_root_robots.txt`, ...) in una cartella `./app` fissa, quindi installa tutte le dipendenze di sviluppo necessarie.
|
|
15
|
-
|
|
16
|
-
Lo script **richiede zsh** (termina con un errore se lanciato con `sh` o `bash`). I file esistenti non vengono mai sovrascritti: vengono copiati accanto con il prefisso `NEW-` (da integrare manualmente o da rimuovere). Se la cartella `./app` esiste già, l'intero set di file frontend viene copiato in `./NEW-app`.
|
|
17
|
-
|
|
18
|
-
### Se minimo è già installato
|
|
19
|
-
|
|
20
|
-
Lo script è esposto come `bin` del pacchetto:
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npx starter-kit
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
Poiché l'installazione non sovrascrive mai nulla, lo script può essere anche **rieseguito in qualsiasi momento per aggiornare** una configurazione esistente (ad es. per aggiornare i moduli webpack o reinstallare le dipendenze di sviluppo): i file esistenti vengono copiati con il prefisso `NEW-`, quindi rieseguire lo script non duplica né sovrascrive mai nulla.
|
|
27
|
-
|
|
28
|
-
### Senza installare minimo
|
|
29
|
-
|
|
30
|
-
Per avviare un progetto **prima** di installare l'intero pacchetto, scaricare solo la cartella `starter-kit` dal tarball npm ed eseguire lo script da lì:
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
curl -sL "$(npm view @massimo-cassandro/minimo dist.tarball)" | tar xz package/dev-tools/starter-kit
|
|
34
|
-
zsh package/dev-tools/starter-kit/starter-install.sh
|
|
35
|
-
rm -rf package
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## Strumenti per SVG e favicon
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
## SVG Icons Tools
|
|
42
|
-
npx svgIconsTools --config ./path/to/svg-icons-tools.config.mjs
|
|
43
|
-
|
|
44
|
-
# create favicons
|
|
45
|
-
npx create-favicons init
|
|
46
|
-
npx create-favicons [--dir=./path/to/dir]
|
|
47
|
-
```
|
|
48
5
|
|
|
49
6
|
## Aggiungere gli strumenti più usati alla sezione scripts di `package.json`:
|
|
50
7
|
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
|
|
2
|
+
# starter-kit
|
|
3
|
+
|
|
4
|
+
`starter-kit/starter-install.sh` avvia un nuovo progetto frontend: copia i file di configurazione starter (`package.json`, `.gitignore`, `jsconfig.json`, configurazioni eslint/stylelint, configurazione e moduli webpack, ...) nella root del progetto e i file frontend (template webpack, `CLAUDE.md`, `_root_htaccess`/`_root_robots.txt`, ...) in una cartella `./app` fissa, quindi installa tutte le dipendenze di sviluppo necessarie.
|
|
5
|
+
|
|
6
|
+
Lo script **richiede zsh** (termina con un errore se lanciato con `sh` o `bash`). I file esistenti non vengono mai sovrascritti: vengono copiati accanto con il prefisso `NEW-` (da integrare manualmente o da rimuovere). Se la cartella `./app` esiste già, l'intero set di file frontend viene copiato in `./NEW-app`.
|
|
7
|
+
|
|
8
|
+
### Se minimo è già installato
|
|
9
|
+
|
|
10
|
+
Lo script è esposto come `bin` del pacchetto:
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npx starter-kit
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Poiché l'installazione non sovrascrive mai nulla, lo script può essere anche **rieseguito in qualsiasi momento per aggiornare** una configurazione esistente (ad es. per aggiornare i moduli webpack o reinstallare le dipendenze di sviluppo): i file esistenti vengono copiati con il prefisso `NEW-`, quindi rieseguire lo script non duplica né sovrascrive mai nulla.
|
|
17
|
+
|
|
18
|
+
### Senza installare minimo
|
|
19
|
+
|
|
20
|
+
Per avviare un progetto **prima** di installare l'intero pacchetto, scaricare solo la cartella `starter-kit` dal tarball npm ed eseguire lo script da lì:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
curl -sL "$(npm view @massimo-cassandro/minimo dist.tarball)" | tar xz package/dev-tools/starter-kit
|
|
24
|
+
zsh package/dev-tools/starter-kit/starter-install.sh
|
|
25
|
+
rm -rf package
|
|
26
|
+
```
|
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# Svg Icons Tools
|
|
2
2
|
|
|
3
|
+
## Quick start
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
## SVG Icons Tools
|
|
7
|
+
npx svgIconsTools --config ./path/to/svg-icons-tools.config.mjs
|
|
8
|
+
|
|
9
|
+
# create favicons
|
|
10
|
+
npx create-favicons init
|
|
11
|
+
npx create-favicons [--dir=./path/to/dir]
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Panoramica
|
|
15
|
+
|
|
3
16
|
Svg Icons Tools fornisce alcune utilità per gestire e ottimizzare le icone SVG:
|
|
4
17
|
|
|
5
18
|
* ottimizza tutti i file con [SVGO](https://svgo.dev/)
|
|
@@ -16,6 +16,6 @@ Opzioni:
|
|
|
16
16
|
|
|
17
17
|
* `--pkg`: Percorso del file `package.json` relativo alla directory corrente (default: `./package.json`)
|
|
18
18
|
* `--log-file`: Percorso del file di log relativo alla directory corrente (default: `./changelog.md`). Se il nome del file termina con `.txt`, si assume il formato di log della versione precedente di `update-version`, in cui ogni riga ha la forma `timestamp | version | description`
|
|
19
|
-
* `--log-patch`: Se presente, vengono registrate nel log anche le modifiche di tipo patch.
|
|
19
|
+
* `--log-patch`: Se presente, vengono registrate nel log anche le modifiche di tipo patch, e la versione viene scritta nel log per intero (es. `1.3.1`). Se assente, nel log compaiono solo le prime due cifre (es. `1.3`).
|
|
20
20
|
* `--default-patch-log="testo"`: Testo di default usato per il log delle patch (default: `Fix / Upd`).
|
|
21
21
|
* `--no-log-v0`: Se `true` (default), il log non viene scritto quando la versione major è `0`, tranne per la voce iniziale creata alla prima inizializzazione del file changelog. Passare `--no-log-v0` per abilitarlo esplicitamente, oppure `--no-log-v0=false` per disabilitarlo da riga di comando.
|
|
@@ -2,24 +2,22 @@ import { params } from './params.mjs';
|
|
|
2
2
|
|
|
3
3
|
export function createLogRow() {
|
|
4
4
|
|
|
5
|
+
// Con --log-patch si registra la semver completa, altrimenti solo major.minor
|
|
6
|
+
const vers = params.toLog.includes('patch')
|
|
7
|
+
? params.logRow.vers
|
|
8
|
+
: String(params.logRow.vers).split('.').slice(0, 2).join('.');
|
|
5
9
|
|
|
6
10
|
if (params.markdownLog) {
|
|
7
|
-
|
|
8
11
|
const dateStr = params.logRow.date.toLocaleString(params.locale, {
|
|
9
12
|
year: 'numeric', month: 'short', day: '2-digit'
|
|
10
13
|
});
|
|
11
|
-
params.logRow.fullText = `* ${
|
|
12
|
-
|
|
14
|
+
params.logRow.fullText = `* ${vers} (${dateStr})${params.logRow.descr ? ' - ' + params.logRow.descr : ''}`;
|
|
13
15
|
|
|
14
16
|
} else {
|
|
15
|
-
|
|
16
17
|
const dateStr = params.logRow.date.toISOString();
|
|
17
|
-
params.logRow.fullText = `${dateStr} | ${(' '.repeat(16) +
|
|
18
|
+
params.logRow.fullText = `${dateStr} | ${(' '.repeat(16) + vers).slice(-16)} | ${params.logRow.descr || ''}`;
|
|
18
19
|
|
|
19
20
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
21
|
}
|
|
24
22
|
|
|
25
23
|
|
package/package.json
CHANGED
|
@@ -8,9 +8,9 @@ import { parseCols } from './src/parse-cols.js';
|
|
|
8
8
|
import { parseRows } from './src/parse-rows.js';
|
|
9
9
|
import { mainBuilder } from './src/main-builder.js';
|
|
10
10
|
import { renderTbody } from './src/table-body.js';
|
|
11
|
-
import { renderTfoot } from './src/
|
|
11
|
+
import { renderTfoot } from './src/tfoot.js';
|
|
12
12
|
import { updateInfo } from './src/update-info.js';
|
|
13
|
-
import { applySortState, setSortListener } from './src/
|
|
13
|
+
import { applySortState, setSortListener } from './src/thead.js';
|
|
14
14
|
import { setSearchListener, filterRows } from './src/search.js';
|
|
15
15
|
import { sortRows } from './src/sorting.js';
|
|
16
16
|
import { calcTotPages, renderPagination } from './src/pagination.js';
|
|
@@ -124,124 +124,7 @@ json-table {
|
|
|
124
124
|
color: var(--jt-caption-color);
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
-
.pagination {
|
|
128
|
-
margin-inline-start: auto;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.paginationList {
|
|
132
|
-
display: flex;
|
|
133
|
-
flex-flow: row wrap;
|
|
134
|
-
padding: 0;
|
|
135
|
-
margin: 0;
|
|
136
|
-
list-style: none;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.paginationItem {
|
|
140
|
-
border: var(--jt-pagination-border-width) solid var(--jt-pagination-border-color);
|
|
141
|
-
border-inline-start-width: 0;
|
|
142
|
-
|
|
143
|
-
&:first-child {
|
|
144
|
-
border-inline-start-width: var(--jt-pagination-border-width);
|
|
145
|
-
border-start-start-radius: var(--jt-pagination-radius);
|
|
146
|
-
border-end-start-radius: var(--jt-pagination-radius);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
&:last-child {
|
|
150
|
-
border-start-end-radius: var(--jt-pagination-radius);
|
|
151
|
-
border-end-end-radius: var(--jt-pagination-radius);
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
127
|
|
|
155
|
-
.paginationBtn,
|
|
156
|
-
.paginationEllipsis {
|
|
157
|
-
display: flex;
|
|
158
|
-
align-items: center;
|
|
159
|
-
justify-content: center;
|
|
160
|
-
min-width: var(--jt-pagination-btn-min-width);
|
|
161
|
-
height: 100%;
|
|
162
|
-
padding: var(--jt-pagination-btn-padding-block) var(--jt-pagination-btn-padding-inline);
|
|
163
|
-
font: inherit;
|
|
164
|
-
font-size: var(--jt-pagination-font-size);
|
|
165
|
-
line-height: var(--jt-pagination-line-height);
|
|
166
|
-
color: inherit;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.paginationBtn {
|
|
170
|
-
cursor: pointer;
|
|
171
|
-
|
|
172
|
-
&[disabled] {
|
|
173
|
-
cursor: default;
|
|
174
|
-
opacity: var(--jt-pagination-disabled-opacity);
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
&[aria-current='page'] {
|
|
178
|
-
font-weight: var(--jt-pagination-current-font-weight);
|
|
179
|
-
cursor: default;
|
|
180
|
-
background-color: var(--jt-pagination-current-background-color);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
@media (hover: hover) {
|
|
184
|
-
&:hover:not([disabled], [aria-current='page']) {
|
|
185
|
-
background-color: var(--jt-pagination-hover-background-color);
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
128
|
|
|
189
|
-
svg {
|
|
190
|
-
width: var(--jt-pagination-icon-size);
|
|
191
|
-
aspect-ratio: 1;
|
|
192
|
-
fill: currentColor;
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.paginationArrow {
|
|
197
|
-
padding-inline: calc(var(--jt-pagination-btn-padding-inline) / 2);
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
/* =>> sorting (thead) */
|
|
201
|
-
|
|
202
|
-
.sortable {
|
|
203
|
-
@media (hover: hover) {
|
|
204
|
-
&:hover {
|
|
205
|
-
background-color: var(--jt-thead-hover-background-color);
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.sortBtn {
|
|
211
|
-
display: flex;
|
|
212
|
-
gap: var(--jt-sort-icon-gap);
|
|
213
|
-
align-items: center;
|
|
214
|
-
width: 100%;
|
|
215
|
-
height: 100%;
|
|
216
|
-
padding: var(--jt-sort-btn-padding-block) var(--jt-sort-btn-padding-inline);
|
|
217
|
-
font: inherit;
|
|
218
|
-
line-height: var(--jt-sort-btn-line-height);
|
|
219
|
-
color: inherit;
|
|
220
|
-
text-align: inherit;
|
|
221
|
-
cursor: pointer;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
.sortTitle {
|
|
225
|
-
flex: 1 1 auto;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.sortIcon {
|
|
229
|
-
display: inline-flex;
|
|
230
|
-
flex: none;
|
|
231
|
-
width: var(--jt-sort-icon-size);
|
|
232
|
-
aspect-ratio: 1;
|
|
233
|
-
opacity: var(--jt-sort-icon-none-opacity);
|
|
234
|
-
|
|
235
|
-
svg {
|
|
236
|
-
width: 100%;
|
|
237
|
-
height: 100%;
|
|
238
|
-
fill: currentColor;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
/* un ordinamento attivo (aria-sort sul th) mostra l'icona a piena opacità */
|
|
242
|
-
[aria-sort] & {
|
|
243
|
-
opacity: 1;
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
129
|
|
|
247
130
|
/* purgecss end ignore */
|
|
@@ -52,65 +52,71 @@ Tutti i parametri sono impostabili sia da attributo HTML che come oggetto in `in
|
|
|
52
52
|
|
|
53
53
|
## `classes`
|
|
54
54
|
|
|
55
|
-
Nomi delle classi assegnate agli elementi generati. Le classi interne di layout (CSS module)
|
|
56
|
-
vengono **sempre** applicate in aggiunta a queste; ogni valore sostituisce interamente il
|
|
57
|
-
default della stessa chiave.
|
|
55
|
+
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.
|
|
58
56
|
|
|
59
57
|
```javascript
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
infoOuter: null, // contenitore esterno della sezione info
|
|
63
|
-
info: null, // sezione info (testo + ricerca)
|
|
64
|
-
resultInfo: null, // contenitore del testo info
|
|
65
|
-
search: null, // wrapper dell'input di ricerca
|
|
66
|
-
searchInput: 'form-control form-control-sm', // input di ricerca
|
|
67
|
-
tableWrapper: 'table-responsive', // div che racchiude la tabella
|
|
68
|
-
table: 'table table-bordered', // tag <table>
|
|
69
|
-
tableFooter: null, // barra sotto la tabella (caption + paginazione)
|
|
70
|
-
caption: null, // contenitore della caption
|
|
71
|
-
pagination: null, // <nav> della paginazione
|
|
72
|
-
paginationBtn: 'btn-reset', // pulsanti della paginazione
|
|
73
|
-
sortBtn: 'btn-reset', // pulsanti di ordinamento nei <th>
|
|
74
|
-
empty: null, // cella unica mostrata in assenza di righe
|
|
75
|
-
textStart: null, // allineamento inline-start (le celle minimo lo sono già)
|
|
76
|
-
textCenter: 'text-center', // allineamento al centro
|
|
77
|
-
textEnd: 'text-end', // allineamento inline-end
|
|
78
|
-
nowrap: 'text-nowrap', // no-wrap
|
|
79
|
-
numeric: 'text-numeric', // cifre tabulari (tipi numerici)
|
|
80
|
-
boolCell: null, // classe aggiuntiva per tutte le celle di tipo bool
|
|
81
|
-
boolTrue: null, // classe aggiuntiva per le celle bool con valore true
|
|
82
|
-
boolFalse: null // classe aggiuntiva per le celle bool con valore false
|
|
58
|
+
{
|
|
59
|
+
classes: {...}
|
|
83
60
|
}
|
|
84
61
|
```
|
|
85
62
|
|
|
63
|
+
| Parametro | Default | Descrizione |
|
|
64
|
+
|---|---|---|
|
|
65
|
+
| `wrapper` | `null` | contenitore principale (`<section>`: info + tabella) |
|
|
66
|
+
| `infoOuter` | `null` | contenitore esterno della sezione info |
|
|
67
|
+
| `info` | `null` | sezione info (testo + ricerca) |
|
|
68
|
+
| `resultInfo` | `null` | contenitore del testo info |
|
|
69
|
+
| `search` | `null` | wrapper dell'input di ricerca |
|
|
70
|
+
| `searchInput` | `'form-control form-control-sm'` | input di ricerca |
|
|
71
|
+
| `tableWrapper` | `'table-responsive'` | div che racchiude la tabella |
|
|
72
|
+
| `table` | `'table table-bordered'` | tag `<table>` |
|
|
73
|
+
| `tableFooter` | `null` | barra sotto la tabella (caption + paginazione) |
|
|
74
|
+
| `caption` | `null` | contenitore della caption |
|
|
75
|
+
| `pagination` | `null` | `<nav>` della paginazione |
|
|
76
|
+
| `paginationBtn` | `'btn-reset'` | pulsanti della paginazione |
|
|
77
|
+
| `sortBtn` | `'btn-reset'` | pulsanti di ordinamento nei `<th>` |
|
|
78
|
+
| `empty` | `null` | cella unica mostrata in assenza di righe |
|
|
79
|
+
| `textStart` | `null` | allineamento inline-start (con css `table` di *minimo* il default è `start`) |
|
|
80
|
+
| `textCenter` | `'text-center'` | allineamento al centro |
|
|
81
|
+
| `textEnd` | `'text-end'` | allineamento inline-end |
|
|
82
|
+
| `nowrap` | `'text-nowrap'` | no-wrap |
|
|
83
|
+
| `numeric` | `'text-numeric'` | cifre tabulari (tipi numerici) |
|
|
84
|
+
| `boolCell` | `null` | classe aggiuntiva per tutte le celle di tipo bool |
|
|
85
|
+
| `boolTrue` | `null` | classe aggiuntiva per le celle bool con valore true |
|
|
86
|
+
| `boolFalse` | `null` | classe aggiuntiva per le celle bool con valore false |
|
|
87
|
+
|
|
88
|
+
|
|
86
89
|
Le classi di allineamento (`textEnd`, `textCenter`, `nowrap`, `numeric`) sono quelle usate dai
|
|
87
90
|
tipi di dato predefiniti: modificandole si cambiano le classi di tutte le colonne di quel tipo.
|
|
88
91
|
|
|
89
92
|
## `labels`
|
|
90
93
|
|
|
91
94
|
```javascript
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
searchPlaceholder: 'Cerca...', // placeholder dell'input di ricerca
|
|
95
|
-
searchTitle: 'Cerca nella tabella', // attributo title dell'input
|
|
96
|
-
searchAriaLabel: 'Filtra risultati', // aria-label dell'input
|
|
97
|
-
info: 'Stai visualizzando le righe da {start} a {end}, su un totale di {filteredRec} record trovati',
|
|
98
|
-
// template del testo info (vedi `infoText`)
|
|
99
|
-
noRows: 'Nessun record trovato', // testo info e cella unica con set di dati vuoto
|
|
100
|
-
noResults: 'Nessun risultato per la ricerca', // idem, con ricerca senza risultati
|
|
101
|
-
sortAsc: 'Ordina questa colonna in senso ascendente (A → Z)', // title/aria-label del
|
|
102
|
-
sortDesc: 'Ordina questa colonna in senso discendente (Z → A)', // pulsante di ordinamento:
|
|
103
|
-
sortNone: 'Rimuovi l’ordinamento a questa colonna', // descrivono l'azione del
|
|
104
|
-
// prossimo click
|
|
105
|
-
paginationAriaLabel: 'Navigazione pagine', // aria-label del <nav>
|
|
106
|
-
prevPage: 'Pagina precedente', // title/aria-label del pulsante precedente
|
|
107
|
-
nextPage: 'Pagina successiva', // idem, successivo
|
|
108
|
-
pageTitle: 'Vai a pagina {page}', // idem, pulsanti pagina
|
|
109
|
-
currentPage: 'Pagina {page}, corrente' // idem, pagina corrente
|
|
95
|
+
{
|
|
96
|
+
labels: {...}
|
|
110
97
|
}
|
|
111
98
|
```
|
|
112
99
|
|
|
113
|
-
|
|
100
|
+
| Parametro | Default | Descrizione |
|
|
101
|
+
|---|---|---|
|
|
102
|
+
| `loading` | `'Caricamento dati…'` | segnaposto di caricamento (visually hidden) |
|
|
103
|
+
| `searchPlaceholder` | `'Cerca...'` | placeholder dell'input di ricerca |
|
|
104
|
+
| `searchTitle` | `'Cerca nella tabella'` | attributo `title` dell'input di ricerca |
|
|
105
|
+
| `searchAriaLabel` | `'Filtra risultati'` | `aria-label` dell'input di ricerca |
|
|
106
|
+
| `info` | `'Stai visualizzando le righe da {start} a {end}, su un totale di {filteredRec} record trovati'` | template del testo info (vedi `infoText`) |
|
|
107
|
+
| `noRows` | `'Nessun record trovato'` | testo info e cella unica con set di dati vuoto |
|
|
108
|
+
| `noResults` | `'Nessun risultato per la ricerca'` | testo info e cella unica con ricerca senza risultati |
|
|
109
|
+
| `sortAsc` | `'Ordina questa colonna in senso ascendente (A → Z)'` | `title`/`aria-label` del pulsante di ordinamento: descrive l'azione del prossimo click |
|
|
110
|
+
| `sortDesc` | `'Ordina questa colonna in senso discendente (Z → A)'` | `title`/`aria-label` del pulsante di ordinamento: descrive l'azione del prossimo click |
|
|
111
|
+
| `sortNone` | `'Rimuovi l’ordinamento a questa colonna'` | `title`/`aria-label` del pulsante di ordinamento: descrive l'azione del prossimo click |
|
|
112
|
+
| `paginationAriaLabel` | `'Navigazione pagine'` | `aria-label` del `<nav>` |
|
|
113
|
+
| `prevPage` | `'Pagina precedente'` | `title`/`aria-label` del pulsante precedente |
|
|
114
|
+
| `nextPage` | `'Pagina successiva'` | `title`/`aria-label` del pulsante successivo |
|
|
115
|
+
| `pageTitle` | `'Vai a pagina {page}'` | `title`/`aria-label` dei pulsanti pagina |
|
|
116
|
+
| `currentPage` | `'Pagina {page}, corrente'` | `title`/`aria-label` del pulsante della pagina corrente |
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
### Segnaposto di `labels.info` / `infoText`:
|
|
114
120
|
|
|
115
121
|
| Segnaposto | Valore |
|
|
116
122
|
|---|---|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/*! minimo - json-table: pagination */
|
|
2
1
|
|
|
3
|
-
import * as styles from '
|
|
2
|
+
import * as styles from './pagination.module.css';
|
|
3
|
+
|
|
4
4
|
import { domBuilder } from '../../../utilities/dom-builder/dom-builder.js';
|
|
5
5
|
import { classnames } from '../../../utilities/classnames.js';
|
|
6
6
|
import { iconContent } from './icons.js';
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/* purgecss start ignore */
|
|
2
|
+
|
|
3
|
+
.pagination {
|
|
4
|
+
margin-inline-start: auto;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.paginationList {
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-flow: row wrap;
|
|
10
|
+
padding: 0;
|
|
11
|
+
margin: 0;
|
|
12
|
+
list-style: none;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.paginationItem {
|
|
16
|
+
margin: 0;
|
|
17
|
+
border: var(--jt-pagination-border-width) solid var(--jt-pagination-border-color);
|
|
18
|
+
border-inline-start-width: 0;
|
|
19
|
+
|
|
20
|
+
&:first-child {
|
|
21
|
+
border-inline-start-width: var(--jt-pagination-border-width);
|
|
22
|
+
border-start-start-radius: var(--jt-pagination-radius);
|
|
23
|
+
border-end-start-radius: var(--jt-pagination-radius);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&:last-child {
|
|
27
|
+
border-start-end-radius: var(--jt-pagination-radius);
|
|
28
|
+
border-end-end-radius: var(--jt-pagination-radius);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.paginationBtn,
|
|
33
|
+
.paginationEllipsis {
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
min-width: var(--jt-pagination-btn-min-width);
|
|
38
|
+
height: 100%;
|
|
39
|
+
padding: var(--jt-pagination-btn-padding-block) var(--jt-pagination-btn-padding-inline);
|
|
40
|
+
font: inherit;
|
|
41
|
+
font-size: var(--jt-pagination-font-size);
|
|
42
|
+
line-height: var(--jt-pagination-line-height);
|
|
43
|
+
color: inherit;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.paginationBtn {
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
|
|
49
|
+
&[disabled] {
|
|
50
|
+
cursor: default;
|
|
51
|
+
opacity: var(--jt-pagination-disabled-opacity);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&[aria-current='page'] {
|
|
55
|
+
font-weight: var(--jt-pagination-current-font-weight);
|
|
56
|
+
cursor: default;
|
|
57
|
+
background-color: var(--jt-pagination-current-background-color);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@media (hover: hover) {
|
|
61
|
+
&:hover:not([disabled], [aria-current='page']) {
|
|
62
|
+
background-color: var(--jt-pagination-hover-background-color);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
svg {
|
|
67
|
+
width: var(--jt-pagination-icon-size);
|
|
68
|
+
aspect-ratio: 1;
|
|
69
|
+
fill: currentColor;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.paginationArrow {
|
|
74
|
+
padding-inline: calc(var(--jt-pagination-btn-padding-inline) / 2);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* purgecss end ignore */
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
/*! minimo - json-table: parte tabella (tabella, caption e barra del footer) */
|
|
2
1
|
|
|
3
2
|
import * as styles from '../json-table-component.module.css';
|
|
4
3
|
import { classnames } from '../../../utilities/classnames.js';
|
|
5
|
-
import { theadPart } from './
|
|
4
|
+
import { theadPart } from './thead.js';
|
|
6
5
|
|
|
7
6
|
/** @typedef {import('./defaults.js').JsonTableParams} JsonTableParams */
|
|
8
7
|
/** @typedef {import('../json-table-component.js').JsonTable} JsonTable */
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
import * as styles from './thead.module.css';
|
|
2
2
|
|
|
3
|
-
import * as styles from '../json-table-component.module.css';
|
|
4
3
|
import { classnames } from '../../../utilities/classnames.js';
|
|
5
4
|
import { setContent } from './content-utils.js';
|
|
6
5
|
import { iconContent } from './icons.js';
|
|
@@ -117,7 +116,7 @@ export function setSortListener(jt) {
|
|
|
117
116
|
|
|
118
117
|
|
|
119
118
|
/**
|
|
120
|
-
* Elemento domBuilder
|
|
119
|
+
* Elemento domBuilder per `<thead>`.
|
|
121
120
|
*
|
|
122
121
|
* Generated structure:
|
|
123
122
|
* ```
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* purgecss start ignore */
|
|
2
|
+
.sortable {
|
|
3
|
+
@media (hover: hover) {
|
|
4
|
+
&:hover {
|
|
5
|
+
background-color: var(--jt-thead-hover-background-color);
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.sortBtn {
|
|
11
|
+
display: flex;
|
|
12
|
+
gap: var(--jt-sort-icon-gap);
|
|
13
|
+
align-items: center;
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
padding: var(--jt-sort-btn-padding-block) var(--jt-sort-btn-padding-inline);
|
|
17
|
+
font: inherit;
|
|
18
|
+
line-height: var(--jt-sort-btn-line-height);
|
|
19
|
+
color: inherit;
|
|
20
|
+
text-align: inherit;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.sortTitle {
|
|
25
|
+
flex: 1 1 auto;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.sortIcon {
|
|
29
|
+
display: inline-flex;
|
|
30
|
+
flex: none;
|
|
31
|
+
width: var(--jt-sort-icon-size);
|
|
32
|
+
aspect-ratio: 1;
|
|
33
|
+
opacity: var(--jt-sort-icon-none-opacity);
|
|
34
|
+
|
|
35
|
+
svg {
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: 100%;
|
|
38
|
+
fill: currentColor;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* un ordinamento attivo (aria-sort sul th) mostra l'icona a piena opacità */
|
|
42
|
+
[aria-sort] & {
|
|
43
|
+
opacity: 1;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* purgecss end ignore */
|