Record view

Markup canonic · components/record-view.json

sursa = JSON · generat de scripts/build-catalog.py · modalul static, pe scrim

Compoziția · un modal care doar citește

Pattern, nu componentă: o aranjare a unor piese care există deja — Modal și Quantum stack. Se deschide dintr-un rând (o listă, un tabel) și arată o singură înregistrare. Antetul apare imediat, din ce spune deja rândul; doar corpul se încarcă. Formalizat din RecordViewDialog în Dublin, care îl folosește pentru detaliile unei cheltuieli și ale unei facturi.

.modal-backdrop.open
└─ .modal.record-view                  440px · suprafața, padding-ul și X-ul sunt ale .modal
   ├─ .btn.outline.sm.icon-only        X — închide, ca Esc și click-ul în afară
   ├─ .t-eyebrow + .dot                felul înregistrării — „Cheltuială"       ↓ 8px
   │  └─ .record-view-ref              numărul ei, opțional — „YB-0142", cifre tabulare
   ├─ .modal-title                     numele ei — furnizorul, clientul         ↓ 6px
   ├─ .modal-body                      descrierea, opțională                    ↓ 16px
   └─ .quantum-stack                   faptele — sau .record-view-state cât se încarcă

Live · cele trei stări

Același dialog, deschis în fiecare stare — ca demo-ul din showcase-ul lui Dublin. Închide cu X, click în afară sau Escape: e doar citire, deci nu există text tastat de pierdut.

deschide dialogul într-o stare

Stările · corpul își ține locul

Cât se încarcă sau dacă a eșuat, corpul e un .record-view-state: înalt cât trei grupuri de un rând (192px), cu un .spinner sau cu o propoziție .t14 la mijloc — ca dialogul să nu sară când sosește corpul. Antetul nu așteaptă.

pending · .record-view-state > .spinner
error · .record-view-state > .t14

Factura · numărul în eyebrow, cronologia într-un bloc

O înregistrare care are număr îl poartă după felul ei, în eyebrow: .record-view-ref, în cifre tabulare, la 14px de fel (gap-ul de 8px al .t-eyebrow + 6px, ca în Dublin). Titlul rămâne numele — clientul. Corpul e aceeași stivă, cu Viața facturii ca .quantum-block ținând o Timeline, iar descărcarea ca valoare-acțiune.

.t-eyebrow > .record-view-ref · .quantum-block > .timeline

Reguli

Doar citire

Fără rând de acțiuni. O acțiune pe înregistrare e o valoare-acțiune în stivă (.quantum-action); editarea e un alt .modal, cu formular.

Click în afară închide

Spre deosebire de un modal de formular: nu există text tastat de pierdut. X, Escape și click-ul pe scrim închid deopotrivă.

440px

40 sub cei 480 ai modalului: perechile etichetă–valoare au nevoie de mai puțină lățime decât un formular, iar un card mai îngust ține eticheta aproape de valoare.

Fără descriere

Stiva stă tot la 16px sub titlu, iar dialogul spune că n-are descriere (fără aria-describedby).