From 33cfa54a5d4009559cfad94183dae75d3d0f6d62 Mon Sep 17 00:00:00 2001 From: tristan Date: Thu, 25 Jun 2026 10:06:02 +0200 Subject: [PATCH] =?UTF-8?q?fix(sidebar)=20:=20rend=20cliquable=20toute=20l?= =?UTF-8?q?a=20zone=20survol=C3=A9e=20des=20liens=20(MUI-47)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Le padding vertical (pt-1/pb-1) était porté par le
  • qui affiche le fond de hover, alors que l'élément cliquable est l' à l'intérieur : les ~4px en haut et en bas de chaque lien étaient survolés mais non cliquables. Le padding vertical passe sur l' (py-1) — la zone de hover épouse exactement la cible de clic, sans changement visuel. Co-Authored-By: Claude Opus 4.8 (1M context) --- CHANGELOG.md | 1 + app/components/malio/sidebar/Sidebar.test.ts | 19 ++++++++++++------- app/components/malio/sidebar/Sidebar.vue | 4 ++-- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24607cf..107ab34 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -72,6 +72,7 @@ Liste des évolutions de la librairie Malio layer UI * [#MUI-42] Button / ButtonIcon : l'anneau de focus passe du halo `ring-2 ring-m-primary/50` à l'anneau standard `.m-focus-ring` (outline plein, offset 2px), pour l'homogénéité avec les autres composants. ### Fixed +* [#MUI-47] Sidebar : la **bande de ~4px en haut/bas d'un lien** (padding du `
  • ` qui porte le fond de hover) était survolée mais **non cliquable**. Le padding vertical passe du `
  • ` à l'`` (`py-1`), si bien que toute la zone survolée devient cliquable — sans changement visuel. Les côtés n'étaient pas affectés (`` en `block`, pas de padding horizontal sur le `
  • `). * Sidebar : le **lien actif** reste actif sur les **sous-routes** (match par préfixe via `useRoute().path` au lieu de l'`active-class` de NuxtLink qui dépendait de l'imbrication des routes) — ex. `/supplier` reste surligné sur `/supplier/1/edit`. Nouvelle option `exact: true` par item pour forcer le match strict. * Famille Date (CalendarField) : le **clic sur le picto calendrier** ouvre désormais le popover (le `` en overlay absolu interceptait le clic sans le traiter, et ne le laissait pas retomber sur l'input). Couvre Date, DateTime, DateRange, DateWeek. La croix d'effacement conserve son comportement (efface sans ouvrir). * Famille Date editable (MalioDate, MalioDateTime) : la saisie clavier est désormais **bornée par champ** sur le premier **et** le second chiffre (jour `01-31`, mois `01-12`, heure `00-23`, minute `00-59`) — une valeur hors plage (`99/99/9999`, un jour `33`, un mois `19`…) ne peut plus être tapée (auparavant saisissable puis rejetée a posteriori par la validation). Les impossibilités calendaires fines (`31/02`, 29/02 non bissextile, hors `min`/`max`) restent captées par la validation. Implémenté via `buildBoundedMask(template)` (CalendarField) : un `preProcess` maska valide chaque champ progressivement (un chiffre n'est accepté que s'il reste une complétion valide dans la plage) ; il distingue le mois des minutes (même lettre `M`) selon la présence d'heures dans le gabarit. diff --git a/app/components/malio/sidebar/Sidebar.test.ts b/app/components/malio/sidebar/Sidebar.test.ts index 02cafc9..83bb3bd 100644 --- a/app/components/malio/sidebar/Sidebar.test.ts +++ b/app/components/malio/sidebar/Sidebar.test.ts @@ -107,19 +107,24 @@ describe('MalioSidebar', () => { expect(links[2].attributes('href')).toBe('/fournisseurs') }) - it('hover : fond + couleur + semi-bold tous portés par le
  • (texte non figé sur le )', () => { + it('hover : fond + couleur + semi-bold portés par le
  • ', () => { const wrapper = mountComponent({sections}) const li = wrapper.find('li') expect(li.classes()).toContain('hover:bg-m-primary/10') expect(li.classes()).toContain('hover:text-m-primary') expect(li.classes()).toContain('hover:font-semibold') expect(li.classes()).toContain('text-black') - expect(li.classes()).toContain('pt-1') - expect(li.classes()).toContain('pb-1') - // Le ne fige PAS sa couleur (sinon le texte resterait noir sur les bandes - // pt-1/pb-1 hors du alors que le fond du
  • est bleu). - expect(wrapper.find('a').classes()).not.toContain('text-black') - expect(wrapper.find('a').classes()).not.toContain('hover:text-m-primary') + }) + + it('zone cliquable : le padding vertical est sur le , pas sur le
  • (pas de bande morte au survol)', () => { + const wrapper = mountComponent({sections}) + // Le padding vertical doit appartenir à la cible de clic () pour que toute + // la bande survolée soit cliquable — sinon pt-1/pb-1 sur le
  • crée une + // bande colorée mais non cliquable en haut et en bas du lien. + const li = wrapper.find('li') + expect(li.classes()).not.toContain('pt-1') + expect(li.classes()).not.toContain('pb-1') + expect(wrapper.find('a').classes()).toContain('py-1') }) it('actif : route exacte → lien en primary + semi-bold, sans fond', () => { diff --git a/app/components/malio/sidebar/Sidebar.vue b/app/components/malio/sidebar/Sidebar.vue index ae3ee4b..d6c23c5 100644 --- a/app/components/malio/sidebar/Sidebar.vue +++ b/app/components/malio/sidebar/Sidebar.vue @@ -49,14 +49,14 @@