From b5bebe3a3c1a53b2ee37dea58cbf896ce17d751e Mon Sep 17 00:00:00 2001 From: tristan Date: Thu, 25 Jun 2026 08:44:17 +0000 Subject: [PATCH] fix: sidebar + autocomplete (#88) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit | Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié --------- Co-authored-by: admin malio Co-authored-by: THOLOT DECHENE Matthieu Reviewed-on: https://gitea.malio.fr/MALIO-DEV/malio-layer-ui/pulls/88 Co-authored-by: tristan Co-committed-by: tristan --- .../composant/input/inputAutocomplete.vue | 61 +++++++++++++++++++ .../pages/composant/sidebar/sidebar.vue | 24 ++++++++ CHANGELOG.md | 3 + COMPONENTS.md | 6 +- .../malio/input/InputAutocomplete.test.ts | 38 +++++++++++- .../malio/input/InputAutocomplete.vue | 5 ++ app/components/malio/sidebar/Sidebar.test.ts | 56 ++++++++++++++--- app/components/malio/sidebar/Sidebar.vue | 18 +++++- app/story/sidebar/sidebarMenu.story.vue | 41 +++++++++++++ 9 files changed, 241 insertions(+), 11 deletions(-) diff --git a/.playground/pages/composant/input/inputAutocomplete.vue b/.playground/pages/composant/input/inputAutocomplete.vue index dfac49b..89a2119 100644 --- a/.playground/pages/composant/input/inputAutocomplete.vue +++ b/.playground/pages/composant/input/inputAutocomplete.vue @@ -47,6 +47,31 @@

+
+

allowCreate + BAN (test MUI-48)

+

+ Tapez au moins 3 caractères → suggestions de la Base Adresse Nationale. + Repro : sélectionnez une adresse dans la liste, puis + Ctrl+A et Ctrl+V pour coller une autre valeur + par-dessus. La valeur collée doit rester (le champ ne doit ni se vider, ni faire redescendre le label). +

+ +

+ v-model : {{ banValue ?? 'null' }} +

+
+

Avec création (allowCreate)

{ const onSelectApi = (option: Option | null) => { apiSelected.value = option } + +// allowCreate + BAN (test MUI-48) : recherche nationale sur la Base Adresse Nationale. +const banValue = ref(null) +const banOptions = ref([]) +const banLoading = ref(false) +let banFetchId = 0 + +const onSearchBan = async (query: string) => { + if (query.length < 3) { + banOptions.value = [] + banLoading.value = false + return + } + const requestId = ++banFetchId + banLoading.value = true + try { + const params = new URLSearchParams({q: query, limit: '8'}) + const response = await fetch(`https://api-adresse.data.gouv.fr/search/?${params.toString()}`) + const data = await response.json() as {features: {properties: {label: string}}[]} + if (requestId !== banFetchId) return + banOptions.value = data.features.map(f => ({ + label: f.properties.label, + value: f.properties.label, + })) + } catch (err) { + if (requestId !== banFetchId) return + banOptions.value = [] + console.error('Erreur lors du chargement des adresses BAN', err) + } finally { + if (requestId === banFetchId) banLoading.value = false + } +} + +const onCreateBan = (value: string) => { + console.log('BAN — valeur libre créée :', value) +} diff --git a/.playground/pages/composant/sidebar/sidebar.vue b/.playground/pages/composant/sidebar/sidebar.vue index 533306e..96e22da 100644 --- a/.playground/pages/composant/sidebar/sidebar.vue +++ b/.playground/pages/composant/sidebar/sidebar.vue @@ -10,6 +10,18 @@ + + Malio + +
diff --git a/CHANGELOG.md b/CHANGELOG.md index 9a115ce..5d277ea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -57,6 +57,7 @@ Liste des évolutions de la librairie Malio layer UI * [#MUI-44] MalioDate / MalioDateTime : event `update:rawValue` (string) exposant la saisie brute sur un canal séparé pour la validation back-autoritative — saisie invalide (non parsable ou hors `min`/`max`) → texte trimmé tel que tapé, saisie valide/vide + clear + sélection au calendrier → `''`. `modelValue` reste `string` ISO `| null` (la saisie invalide n'y transite jamais) ; le parent construit son payload via `valid ? modelValue : rawValue`. * [#MUI-45] MalioDate : prop `markedDates` (`Record<"YYYY-MM-DD", 'success' | 'danger'>`) appliquant un fond tokenisé par jour dans la grille (générique, fourni par le consommateur ; précédence sélection/`today` > variante marquée > défaut) + event `month-change` (`{ month: 0-11, year }`) émis à l'ouverture du popover et à chaque navigation de mois. Sert l'écran *Heures* de SIRH (jours validés en vert, chargement du mois visible à la volée). * Calendrier (Date/DateRange/DateTime/DateWeek) : sélecteur d'année (3ᵉ niveau de navigation — jours → mois → années) et grisage des mois et années hors `min`/`max`. +* MalioSidebar : slots `footer` / `footer-collapsed` pour ajouter un contenu en bas de la sidebar (profil, déconnexion, version…). Toujours collé en bas (la nav `flex-1` le pousse), reste visible quand la liste de liens scrolle ; bordure haute `m-primary` en mode déplié, à l'image du bloc logo. ### Changed * Cohérence du mode **`disabled`** sur toute la famille formulaire (calqué sur InputText : texte + label grisés, `cursor-not-allowed`, aucune affordance interactive). Concrètement, quand `disabled` : le **bouton « + »** d'ajout disparaît (InputPhone, InputEmail), l'**œil** de révélation disparaît (InputPassword), le **chevron** disparaît (Select, SelectCheckbox, InputAutocomplete), la **croix d'effacement** reste masquée (date, upload, time), le **label** passe en `text-m-muted` (Select, SelectCheckbox, famille Date via CalendarField, TimePicker), et les **tags** du SelectCheckbox + la valeur du Select passent en gris. (InputText, InputAmount, InputNumber, InputTextArea, InputRichText, Checkbox, RadioButton, InputUpload étaient déjà conformes.) @@ -71,6 +72,8 @@ 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-48] InputAutocomplete : après avoir **sélectionné une suggestion** dans la liste, un **collage qui remplace tout** (Ctrl+A puis Ctrl+V, sans re-cliquer dans le champ) **vidait le champ** au lieu de prendre la valeur collée (label qui redescend, dropdown « Tapez pour rechercher »). Cause : `onSelect` repassait `isFocused` à `false` alors que l'input gardait le focus DOM (option cliquée en `mousedown.prevent`) ; le `watch` de synchronisation, non protégé, remettait `inputValue` à `''`. `onInput` resynchronise désormais `isFocused`. La sélection à la souris n'était pas affectée (re-clic réalignant l'état). +* [#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/COMPONENTS.md b/COMPONENTS.md index 1dbe850..2b527ce 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -893,12 +893,16 @@ Barre latérale de navigation rétractable. **Lien actif :** un lien est marqué actif (texte `m-primary` + semi-bold) quand la route courante **est ce lien ou une de ses sous-routes** (match par préfixe) — ex. `/supplier` reste actif sur `/supplier/1/edit`. Mettre `exact: true` sur l'item force le match strict (actif uniquement sur la route exacte). Indépendant de l'imbrication des routes côté consommateur. **Events :** `update:modelValue(value: boolean)` -**Slots :** `logo` (sidebar ouverte), `logo-collapsed` (sidebar fermée) +**Slots :** `logo` (sidebar ouverte), `logo-collapsed` (sidebar fermée), `footer` (bas, sidebar ouverte), `footer-collapsed` (bas, sidebar fermée) + +Le footer est **toujours collé en bas** : la nav occupe l'espace restant (`flex-1`) et pousse le footer vers le bas, qui reste visible même quand la liste de liens scrolle. ```vue + + ``` diff --git a/app/components/malio/input/InputAutocomplete.test.ts b/app/components/malio/input/InputAutocomplete.test.ts index ebc59fe..96cf735 100644 --- a/app/components/malio/input/InputAutocomplete.test.ts +++ b/app/components/malio/input/InputAutocomplete.test.ts @@ -1,6 +1,6 @@ import {describe, expect, it, vi} from 'vitest' import {mount} from '@vue/test-utils' -import type {DefineComponent} from 'vue' +import {defineComponent, nextTick, ref, type DefineComponent} from 'vue' import {Icon as IconifyIcon} from '@iconify/vue' import InputAutocomplete from './InputAutocomplete.vue' @@ -569,4 +569,40 @@ describe('MalioInputAutocomplete', () => { expect(msg.exists()).toBe(true) expect(msg.classes()).not.toContain('min-h-[1rem]') }) + + // MUI-48 : après avoir sélectionné une option dans la liste, le champ garde le focus DOM + // mais isFocused interne passe à false (clic option en mousedown.prevent). Un collage qui + // remplace tout (Ctrl+A puis Ctrl+V) déclenche update:modelValue(null) ; le watch ne doit + // PAS vider la valeur collée. Régression : le champ se vidait au lieu de prendre le texte collé. + it('MUI-48 : un collage après sélection dans la liste remplace la valeur (ne la vide pas)', async () => { + const Harness = defineComponent({ + components: {InputAutocomplete}, + setup() { + const val = ref(null) + const opts = ref([{label: '10 Rue de la Paix', value: '10 Rue de la Paix'}]) + return {val, opts} + }, + template: '', + }) + + const wrapper = mount(Harness, { + attachTo: document.body, + global: {stubs: {IconifyIcon: {template: ''}}}, + }) + const input = wrapper.get('input') + + // saisie puis sélection d'une suggestion (commit, focus DOM conservé) + await input.trigger('focus') + await input.setValue('10') + await wrapper.findAll('[data-test="option"]')[0].trigger('click') + await nextTick() + expect(input.element.value).toBe('10 Rue de la Paix') + + // Ctrl+A puis Ctrl+V : input toujours focalisé DOM, aucun nouvel évènement focus + await input.setValue('25 Avenue Victor Hugo') + await nextTick() + + expect(input.element.value).toBe('25 Avenue Victor Hugo') + wrapper.unmount() + }) }) diff --git a/app/components/malio/input/InputAutocomplete.vue b/app/components/malio/input/InputAutocomplete.vue index 1d907c2..780ed73 100644 --- a/app/components/malio/input/InputAutocomplete.vue +++ b/app/components/malio/input/InputAutocomplete.vue @@ -393,6 +393,11 @@ const scheduleSearch = () => { const onInput = (event: Event) => { const target = event.target as HTMLInputElement + // Un évènement input prouve que le champ est en cours d'édition : on resynchronise + // isFocused, qu'une sélection précédente (onSelect) a pu passer à false tout en gardant + // le focus DOM (clic option en mousedown.prevent). Sans ça, le watch ci-dessous remettrait + // inputValue à '' au collage et la valeur collée serait perdue (MUI-48). + isFocused.value = true inputValue.value = target.value if (!isOpen.value) isOpen.value = true activeIndex.value = -1 diff --git a/app/components/malio/sidebar/Sidebar.test.ts b/app/components/malio/sidebar/Sidebar.test.ts index 22f4846..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', () => { @@ -239,6 +244,43 @@ describe('MalioSidebar', () => { expect(wrapper.find('img[alt="M"]').exists()).toBe(true) }) + it('renders footer slot when expanded', () => { + const wrapper = mountComponent({sections}, { + footer: 'Déconnexion', + }) + expect(wrapper.find('a[href="/logout"]').exists()).toBe(true) + expect(wrapper.text()).toContain('Déconnexion') + }) + + it('renders footer-collapsed slot when collapsed', async () => { + const wrapper = mountComponent({sections}, { + 'footer-collapsed': 'FC', + }) + await wrapper.find('button').trigger('click') + expect(wrapper.text()).toContain('FC') + }) + + it('footer is rendered after the nav (pushed to the bottom)', () => { + const wrapper = mountComponent({sections}, { + footer: 'Footer', + }) + const children = wrapper.find('aside').element.children + const navIndex = Array.from(children).findIndex(el => el.tagName === 'NAV') + const footerEl = wrapper.find('.ft').element + const footerWrapperIndex = Array.from(children).findIndex(el => el.contains(footerEl)) + expect(footerWrapperIndex).toBeGreaterThan(navIndex) + }) + + it('does not render a footer container when no footer slot is provided', () => { + const wrapper = mountComponent({sections}) + // Seuls le bloc logo et le