From dcb8c16a35fc2fe48b80a11ce6a99c3621aeef58 Mon Sep 17 00:00:00 2001 From: tristan Date: Mon, 8 Jun 2026 15:04:31 +0200 Subject: [PATCH 1/2] =?UTF-8?q?feat(ui)=20:=20revue=20des=20tailles=20par?= =?UTF-8?q?=20d=C3=A9faut=20du=20DataTable=20+=20prop=20fieldClass=20au=20?= =?UTF-8?q?Select?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - texte header 16px (était 20px), body 14px (était 18px) - sélecteur de lignes et boutons de pagination alignés à 30px - padding 12px entre le tableau et la barre de pagination - nouvelle prop fieldClass sur Select (override hauteur du field) Co-Authored-By: Claude Opus 4.8 (1M context) --- CHANGELOG.md | 2 ++ COMPONENTS.md | 1 + app/components/malio/datatable/DataTable.vue | 17 +++++++++-------- app/components/malio/select/Select.vue | 4 +++- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b3fa992..71ae60f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -43,6 +43,8 @@ Liste des évolutions de la librairie Malio layer UI * [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`) ### Changed +* DataTable : tailles par défaut revues — texte header `16px` (était `20px`), texte body `14px` (était `18px`), sélecteur de lignes et boutons de pagination (Prev / numéros / Next) alignés à `30px` de haut, padding de `12px` entre le bas du tableau et la barre de pagination. Couleurs inchangées (texte `m-primary`, bordures noires). +* Select : nouvelle prop `fieldClass` pour surcharger les classes du field (notamment la hauteur `h-[40px]` jusqu'ici codée en dur) ; utilisée par le DataTable pour passer le sélecteur de perPage à `30px`. * [#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 diff --git a/COMPONENTS.md b/COMPONENTS.md index 38a1efd..fcc7332 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -388,6 +388,7 @@ Liste déroulante. | `textField` | `string` | `'text-lg'` | Classe taille texte bouton | | `textValue` | `string` | `'text-lg'` | Classe taille texte valeur | | `textLabel` | `string` | `'text-sm'` | Classe taille texte label | +| `fieldClass` | `string` | `''` | Classes supplémentaires sur le field (override hauteur, ex. `h-[30px]`) | | `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide | **Events :** `update:modelValue(value: string | number | null)` diff --git a/app/components/malio/datatable/DataTable.vue b/app/components/malio/datatable/DataTable.vue index 19ef782..e785588 100644 --- a/app/components/malio/datatable/DataTable.vue +++ b/app/components/malio/datatable/DataTable.vue @@ -7,7 +7,7 @@ v-for="col in columns" :key="col.key" scope="col" - class="border-b border-black px-3 py-3 text-left align-middle text-[20px]" + class="border-b border-black px-3 py-3 text-left align-middle text-[16px]" >
Lignes : -
+
Date: Mon, 8 Jun 2026 15:28:27 +0200 Subject: [PATCH 2/2] =?UTF-8?q?feat(ui)=20:=20dimensions=20par=20d=C3=A9fa?= =?UTF-8?q?ut=20du=20bouton=20180x38?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit MalioButton : w-[180px] / h-[38px] (étaient w-[200px] / h-[40px]) Co-Authored-By: Claude Opus 4.8 (1M context) --- CHANGELOG.md | 1 + app/components/malio/button/Button.test.ts | 4 ++-- app/components/malio/button/Button.vue | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 71ae60f..af02bfc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -43,6 +43,7 @@ Liste des évolutions de la librairie Malio layer UI * [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`) ### Changed +* MalioButton : dimensions par défaut `w-[180px]` / `h-[38px]` (étaient `w-[200px]` / `h-[40px]`). * DataTable : tailles par défaut revues — texte header `16px` (était `20px`), texte body `14px` (était `18px`), sélecteur de lignes et boutons de pagination (Prev / numéros / Next) alignés à `30px` de haut, padding de `12px` entre le bas du tableau et la barre de pagination. Couleurs inchangées (texte `m-primary`, bordures noires). * Select : nouvelle prop `fieldClass` pour surcharger les classes du field (notamment la hauteur `h-[40px]` jusqu'ici codée en dur) ; utilisée par le DataTable pour passer le sélecteur de perPage à `30px`. * [#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`. diff --git a/app/components/malio/button/Button.test.ts b/app/components/malio/button/Button.test.ts index 972bd1b..b66638b 100644 --- a/app/components/malio/button/Button.test.ts +++ b/app/components/malio/button/Button.test.ts @@ -162,8 +162,8 @@ describe('MalioButton', () => { it('applies correct dimensions', () => { const wrapper = mountComponent() - expect(wrapper.get('button').classes()).toContain('w-[200px]') - expect(wrapper.get('button').classes()).toContain('h-[40px]') + expect(wrapper.get('button').classes()).toContain('w-[180px]') + expect(wrapper.get('button').classes()).toContain('h-[38px]') }) it('applies font styles', () => { diff --git a/app/components/malio/button/Button.vue b/app/components/malio/button/Button.vue index 397eb83..11037c9 100644 --- a/app/components/malio/button/Button.vue +++ b/app/components/malio/button/Button.vue @@ -84,7 +84,7 @@ const variantClasses = computed(() => { const mergedButtonClass = computed(() => twMerge( - 'inline-flex w-[200px] h-[40px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50', + 'inline-flex w-[180px] h-[38px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50', variantClasses.value, props.buttonClass, ), -- 2.39.5