[À VALIDER MÉTIER] DataTable : pagination compacte avec saut de page #69

2026-06-09T13:41:21Z

tristan commented

2026-06-09 13:41:21 +00:00

⚠️ PR support d'atelier métier — à valider avant merge. L'existant (numéros + …) reste en place sur feature/MUI-42 en attendant.

Résumé

Remplace la pagination numérotée du DataTable par une forme compacte avec saut de page : ‹ Préc. Page [16] / 31 Suiv. ›. Le client veut pouvoir aller directement à une page en tapant son numéro.

Numéros + … (computed visiblePages) supprimés ; remplacés par un champ numérique Page [n] / N entre Préc. et Suiv.
Saut de page : saisie debouncée 400 ms (seules les valeurs 1..N partent en cours de frappe), Entrée applique immédiatement, valeur > N → dernière page (clamp), champ vidé / 0 → restaure la page courante, chiffres uniquement.
Labels Préc. / Suiv. (FR).
Contrat inchangé : v-model:page / v-model:per-page.
Démo « gros volume » (31 pages) ajoutée au playground et à la story.

Maquette de validation métier

Fichier autonome committé : docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html (ouvrir dans un navigateur — comportement fidèle, délai de debounce réglable pour la démo).
Spec + plan : docs/superpowers/{specs,plans}/2026-06-09-datatable-pagination-goto*.

Plan de test

npm run test -- DataTable.test.ts → 37 tests OK (9 nouveaux sur le saut, 6 caducs retirés)
npm run lint → 0 erreur
Validation métier (atelier) sur la maquette / le playground composant/datatable (carte « Gros volume »)
Vérif manuelle : taper 16 d'un trait → un seul chargement page 16 ; 50 (sur 31) + Entrée → page 31 ; champ vidé + blur → page courante

🤖 Generated with Claude Code

⚠️ **PR support d'atelier métier** — à valider avant merge. L'existant (numéros + `…`) reste en place sur `feature/MUI-42` en attendant. ## Résumé Remplace la pagination numérotée du DataTable par une forme **compacte avec saut de page** : `‹ Préc. Page [16] / 31 Suiv. ›`. Le client veut pouvoir aller directement à une page en tapant son numéro. - Numéros + `…` (computed `visiblePages`) **supprimés** ; remplacés par un champ numérique `Page [n] / N` entre Préc. et Suiv. - **Saut de page** : saisie **debouncée 400 ms** (seules les valeurs `1..N` partent en cours de frappe), **Entrée** applique immédiatement, valeur `> N` → dernière page (clamp), champ vidé / `0` → restaure la page courante, chiffres uniquement. - Labels `Préc.` / `Suiv.` (FR). - **Contrat inchangé** : `v-model:page` / `v-model:per-page`. - Démo « gros volume » (31 pages) ajoutée au playground et à la story. ## Maquette de validation métier Fichier autonome committé : `docs/superpowers/sandboxes/2026-06-09-datatable-pagination.html` (ouvrir dans un navigateur — comportement fidèle, délai de debounce réglable pour la démo). Spec + plan : `docs/superpowers/{specs,plans}/2026-06-09-datatable-pagination-goto*`. ## Plan de test - [x] `npm run test -- DataTable.test.ts` → 37 tests OK (9 nouveaux sur le saut, 6 caducs retirés) - [x] `npm run lint` → 0 erreur - [ ] Validation métier (atelier) sur la maquette / le playground `composant/datatable` (carte « Gros volume ») - [ ] Vérif manuelle : taper `16` d'un trait → un seul chargement page 16 ; `50` (sur 31) + Entrée → page 31 ; champ vidé + blur → page courante 🤖 Generated with [Claude Code](https://claude.com/claude-code)

tristan added 6 commits 2026-06-09 13:41:22 +00:00

docs(datatable) : spec + sandbox pagination aller-à-la-page ccd84d6d4a

docs(datatable) : plan pagination aller-à-la-page b2c6f33e38

feat(datatable) : pagination compacte avec saut de page (Page [n] / N) f797c1c8a0

test(datatable) : champ de saut de page (debounce, Entrée, clamp) c6bca756f1

docs(datatable) : démo gros volume (31 pages) pour le saut de page 26759395f9

docs(datatable) : pagination compacte avec saut de page 747285ae3f

This pull request has changes conflicting with the target branch.