diff --git a/.playground/pages/composant/filtre/filtres.vue b/.playground/pages/composant/filtre/filtres.vue index 008c793..a05e162 100644 --- a/.playground/pages/composant/filtre/filtres.vue +++ b/.playground/pages/composant/filtre/filtres.vue @@ -55,7 +55,7 @@ `), themable en redéfinissant la CSS var ### Changed * [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`. ### Fixed +* DataTable : pagination réalignée verticalement après l'introduction du `min-h-[1rem]` du Select — la barre pagination passe en `items-center`, et le MalioSelect du sélecteur de perPage est encapsulé dans un wrapper `h-12` qui borne sa taille flex à la hauteur du field (le slot vide déborde invisiblement en dessous). Span « Lignes : » et boutons Prev/Page/Next sont désormais centrés exactement sur le field (y=24) * Drawer : le slot `#footer` est désormais rendu hors de la zone scrollable (épinglé en bas, comme la modal) ; seul le body défile et la scrollbar ne s'étend plus derrière le footer * Hauteur des boutons de pagination du datatable alignée sur le select (40px) * Distribution de `tailwind.config.ts` aux projets consommateurs avec paths `content` absolus diff --git a/COMPONENTS.md b/COMPONENTS.md index 69210b5..4a88b30 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -653,8 +653,11 @@ Bouton d'action avec 4 variantes visuelles et icône optionnelle. + ``` +> **Token de largeur partagé** : `w-m-btn-action` (150px) est exposé via `tailwind.config.ts` du layer, branché sur la CSS var `--m-btn-action-width`. Pour les boutons d'action (listes, lignes de tableau, footers denses…). Themable côté consommateur en redéfinissant `--m-btn-action-width` dans son propre CSS. + --- ## MalioButtonIcon diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css index e9207a2..2d5f716 100644 --- a/app/assets/css/malio.css +++ b/app/assets/css/malio.css @@ -31,6 +31,9 @@ --m-btn-danger-hover: 234 151 151; /* #EA9797 */ --m-btn-danger-active: 255 83 86; /* #FF5356 */ + /* ── Largeurs Boutons ── */ + --m-btn-action-width: 150px; /* Boutons d'action (liste, ligne tableau, footer dense…) */ + /* ── Couleurs de site (usage ponctuel) ── */ --m-site-blue: 5 108 242; /* #056CF2 - Bleu Châtellerault */ --m-site-yellow: 243 203 0; /* #F3CB00 - Jaune Saint-Jean */ diff --git a/app/components/malio/datatable/DataTable.vue b/app/components/malio/datatable/DataTable.vue index c242bd1..19ef782 100644 --- a/app/components/malio/datatable/DataTable.vue +++ b/app/components/malio/datatable/DataTable.vue @@ -57,25 +57,27 @@
-
- Lignes : - +
+ Lignes : +
+ +
-