Data list

Forma mobilă (<1024px) a tabelului — fiecare rând un card, fiecare celulă o pereche etichetă–valoare. Contract: components/data-list.json, status WIP. Perechea de pe desktop: Table. Rândurile simple (un client, o setare) sunt List row.

Markup canonic · `components/data-list.json`

sursa = JSON · generat de scripts/build-catalog.py

Septembrie 2026 · 24.870,00 Lei

Dublin Software SRLNeîncasată Nr.BON-014 Scadență25 sept Suma12.400,00 Lei

Încă nu ai nimic aici. Adaugă primul document și începem.

Stare: WIP (2026-09-16). Perechea e decisă — un .tbl devine o .data-list sub 1024px. Forma cardului nu e decisă. Un tabel de desktop duce sortare, filtre, selecție multiplă, paginare, totaluri și șase-plus coloane; canvasul a arătat o singură formă de card cu două facturi. Forma se așază pe un ecran real (lista Facturi), cu skills/edge-audit/mechanisms/tables.md drept listă de verificare. Până atunci: vizibil, nu de încredere — consumatorii rămân pe .tbl.

Perechea · .tbl pe desktop, .data-list pe mobil

Un .tbl cu scroll orizontal pe telefon — niciodată. .tbl-wrap răspunde la lățime pe desktop, nu în banda mobilă.

≥ 1024px · .tbl

Rânduri și coloane, sortare, selecție, paginare. Tabelul e componenta de înregistrări a desktopului.

Client	Nr.	Scadență	Sumă	Status
Dublin Software SRL	BON-014	25 sept	12.400 Lei	Neîncasată
Regus București	BON-013	3 sept	3.200 Lei	Încasată
Hartmann Consulting GmbH	BON-011	28 aug	9.270 Lei	Restantă

< 1024px · .data-list

Fiecare rând devine un card, fiecare celulă o pereche etichetă–valoare. Trei sau patru câmpuri, suma ultima și la dreapta.

Septembrie 2026 · 24.870,00 Lei

Dublin Software SRLNeîncasatăNr.BON-014Scadență25 septSuma12.400,00 Lei Regus BucureștiÎncasatăNr.BON-013Scadență3 septSuma3.200,00 Lei Hartmann Consulting GmbHRestantăNr.BON-011Scadență28 augSuma9.270,00 Lei

August 2026 · 6.140,00 Lei

Petrom · Stația PiperaÎncasatăNr.BON-010Scadență21 augSuma487,00 Lei

Facturi

Cardul · etichetă .t11 + valoare 14, suma la dreapta

Peste patru câmpuri → alege-le pe cele care identifică înregistrarea; restul e ecranul de detaliu.

.data-card-grid.two · două câmpuri

Regus BucureștiÎncasatăScadență3 septSuma3.200,00 Lei

.data-card-grid · trei câmpuri (implicit)

Dublin Software SRLNeîncasatăNr.BON-014Scadență25 septSuma12.400,00 Lei

.data-card-grid.four · patru câmpuri — maximul

Hartmann Consulting GmbHRestantăNr.BON-011Emisă14 augScadență28 augSuma9.270,00 Lei

.data-card e un <a> sau <button> (tot cardul se atinge): alb, --c-rule-card, --r-lg, padding 16 20. Sus .data-card-top — titlul (15/600, ellipsis) și starea ca .badge.sm. Jos .data-card-grid (.two / implicit trei / .four): coloanele fluide, ultima max-content aliniată dreapta, valoarea ei 600 și nowrap. Eticheta de câmp e .t11 — podeaua scalei, doar pentru asta. Antetul de grup .data-list-hdr: lună · .sum.

Starea goală

Un disc bej-1 (.disc, 44px) cu glifa, o propoziție, un .btn.primary.lg. Discul e .disc, nu .ic — .ic e glifa Lucide dinăuntru.

.data-list-empty · disc bej-1 cu glifă · o propoziție · un primary

Încă nu ai nimic aici. Adaugă primul document și începem.

Ce trebuie decis pe ecranul real

Sortarea și filtrele — bară deasupra listei sau .sheet.attached deschisă dintr-un buton din header.
Selecția multiplă — cum intră cardul în modul de selecție (skills/edge-audit/mechanisms/bulk-selection.md).
Paginarea — infinită sau pe pagini (skills/edge-audit/mechanisms/pagination.md).
Totalurile — în .data-list-hdr per grup sau un rând final.
Suprafața — .data-card moștenește explicit .list-group (alb, --c-rule-card, --r-lg) când iese din WIP.

Reguli · provizorii

Eticheta

.t11 — podeaua scalei, doar pentru etichetele de câmp.

Suma

Ultimul .data-field: dreapta, 600, tabular, nowrap.

Starea

Un .badge.sm în .data-card-top, nu o culoare pe card.

Max 4

Nu peste patru câmpuri; restul e detaliul.

Nu tabel pe telefon

Nu .tbl cu scroll orizontal sub 1024px.

Nu în producție

WIP — nu te baza pe forma asta încă; consumatorii rămân pe .tbl.