Skip to content

Commit

Permalink
fix(DsfrHeader): 🐛 ferme la modale en mobile au clic sur un lien du menu
Browse files Browse the repository at this point in the history
  • Loading branch information
laruiss committed Sep 12, 2024
1 parent b3ebb4b commit d0a7935
Show file tree
Hide file tree
Showing 6 changed files with 33 additions and 23 deletions.
2 changes: 0 additions & 2 deletions demo-app/main.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import VueDsfr from '@/index'
import { Icon } from '@iconify/vue'

import { createApp } from 'vue'
import App from './App.vue'
Expand All @@ -14,7 +13,6 @@ import '@gouvfr/dsfr/dist/utility/icons/icons.main.min.css'

createApp(App)
.use(router)
.component('Icon', Icon)
.use(VueDsfr)
.mount('#app')

Expand Down
27 changes: 14 additions & 13 deletions demo-app/views/AppHome.vue
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const onClick = () => {
}, 2000)
}
const expandedId = ref('')
const activeAccordion = ref(-1)
</script>

<template>
Expand Down Expand Up @@ -111,19 +111,20 @@ const expandedId = ref('')
</h2>

<div>
<DsfrAccordion
id="accordion-1"
style="position: relative;"
title="Accordéon avec infobulle"
:expanded-id="expandedId"
@expand="expandedId = $event"
<DsfrAccordionsGroup
v-model="activeAccordion"
>
Test infobulle dans accordéon
<DsfrTooltip

content="Texte de l’info-bulle qui apparaît au survol"
/>
</DsfrAccordion>
<DsfrAccordion
style="position: relative;"
title="Accordéon avec infobulle"
>
Test infobulle dans accordéon
<DsfrTooltip

content="Texte de l’info-bulle qui apparaît au survol"
/>
</DsfrAccordion>
</DsfrAccordionsGroup>
</div>

<div class="flex justify-between w-full relative">
Expand Down
2 changes: 1 addition & 1 deletion src/components/DsfrAccordion/DsfrAccordionsGroup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { computed, onUnmounted, provide, ref, type Ref, watch } from 'vue'
import { registerTabKey } from './injection-key'
const props = withDefaults(defineProps<{
modelValue: number
modelValue?: number
}>(), {
modelValue: -1,
})
Expand Down
6 changes: 5 additions & 1 deletion src/components/DsfrHeader/DsfrHeader.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref, toRef, useSlots } from 'vue'
import { computed, onMounted, onUnmounted, provide, ref, toRef, useSlots } from 'vue'
import DsfrLanguageSelector, { type DsfrLanguageSelectorElement } from '../DsfrLanguageSelector/DsfrLanguageSelector.vue'
import DsfrLogo from '../DsfrLogo/DsfrLogo.vue'
import DsfrSearchBar from '../DsfrSearchBar/DsfrSearchBar.vue'
import DsfrHeaderMenuLinks from './DsfrHeaderMenuLinks.vue'
import { registerNavigationLinkKey } from './injection-key'
import type { DsfrHeaderProps } from './DsfrHeader.types'
Expand Down Expand Up @@ -79,6 +80,9 @@ const onQuickLinkClick = hideModal
const slots = useSlots()
const isWithSlotOperator = computed(() => Boolean(slots.operator?.().length) || !!props.operatorImgSrc)
const isWithSlotNav = computed(() => Boolean(slots.mainnav))
provide(registerNavigationLinkKey, () => {
return hideModal
})
</script>

<template>
Expand Down
5 changes: 5 additions & 0 deletions src/components/DsfrHeader/injection-key.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import type { InjectionKey } from 'vue'

type RegisterNavigationLink = () => () => void

export const registerNavigationLinkKey: InjectionKey<RegisterNavigationLink> = Symbol('header')
14 changes: 8 additions & 6 deletions src/components/DsfrNavigation/DsfrNavigationMenuLink.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<script lang="ts" setup>
import { computed } from 'vue'
import { computed, inject } from 'vue'
import { getRandomId } from '../../utils/random-utils'
import VIcon from '../VIcon/VIcon.vue'
import { registerNavigationLinkKey } from '../DsfrHeader/injection-key'
import VIcon from '../VIcon/VIcon.vue'
import type { DsfrNavigationMenuLinkProps } from './DsfrNavigation.types'
export type { DsfrNavigationMenuLinkProps }
Expand All @@ -27,6 +28,9 @@ const iconProps = computed(() => (dsfrIcon.value || !props.icon)
? { scale: defaultScale, name: props.icon }
: { scale: defaultScale, ...((props.icon as Record<string, string>) || {}) },
)
const useHeader = inject(registerNavigationLinkKey)!
const closeModal = useHeader() ?? (() => {})

Check failure on line 33 in src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

View workflow job for this annotation

GitHub Actions / Run unit tests and CT tests

src/components/DsfrNavigation/DsfrNavigation.spec.ts > DsfrNavigation > should render navigation menu

TypeError: useHeader is not a function ❯ setup src/components/DsfrNavigation/DsfrNavigationMenuLink.vue:33:20 ❯ callWithErrorHandling node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19 ❯ setupStatefulComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7757:25 ❯ setupComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7718:36 ❯ mountComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5075:7 ❯ processComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5041:9 ❯ patch node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4570:11 ❯ mountChildren node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4802:7 ❯ processFragment node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4984:7 ❯ patch node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4544:9

Check failure on line 33 in src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

View workflow job for this annotation

GitHub Actions / Run unit tests and CT tests

src/components/DsfrNavigation/DsfrNavigation.spec.ts > DsfrNavigation > should render navigation menu and expand menu on click

TypeError: useHeader is not a function ❯ setup src/components/DsfrNavigation/DsfrNavigationMenuLink.vue:33:20 ❯ callWithErrorHandling node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19 ❯ setupStatefulComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7757:25 ❯ setupComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7718:36 ❯ mountComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5075:7 ❯ processComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5041:9 ❯ patch node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4570:11 ❯ mountChildren node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4802:7 ❯ processFragment node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4984:7 ❯ patch node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4544:9

Check failure on line 33 in src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

View workflow job for this annotation

GitHub Actions / Run unit tests and CT tests

src/components/DsfrNavigation/DsfrNavigationMegaMenu.spec.ts > DsfrNavigationMegaMenu > should render a navigation mega menu

TypeError: useHeader is not a function ❯ setup src/components/DsfrNavigation/DsfrNavigationMenuLink.vue:33:20 ❯ callWithErrorHandling node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19 ❯ setupStatefulComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7757:25 ❯ setupComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7718:36 ❯ mountComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5075:7 ❯ processComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5041:9 ❯ patch node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4570:11 ❯ mountChildren node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4802:7 ❯ mountElement node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4725:7 ❯ processElement node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4690:7

Check failure on line 33 in src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

View workflow job for this annotation

GitHub Actions / Run unit tests and CT tests

src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.spec.ts > DsfrNavigationMegaMenuCategory > should render a navigation mega menu

TypeError: useHeader is not a function ❯ setup src/components/DsfrNavigation/DsfrNavigationMenuLink.vue:33:20 ❯ callWithErrorHandling node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19 ❯ setupStatefulComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7757:25 ❯ setupComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7718:36 ❯ mountComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5075:7 ❯ processComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5041:9 ❯ patch node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4570:11 ❯ mountChildren node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4802:7 ❯ mountElement node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4725:7 ❯ processElement node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4690:7

Check failure on line 33 in src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

View workflow job for this annotation

GitHub Actions / Run unit tests and CT tests

src/components/DsfrNavigation/DsfrNavigationMenu.spec.ts > DsfrNavigationMenu > should render a navigation mega menu

TypeError: useHeader is not a function ❯ setup src/components/DsfrNavigation/DsfrNavigationMenuLink.vue:33:20 ❯ callWithErrorHandling node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19 ❯ setupStatefulComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7757:25 ❯ setupComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7718:36 ❯ mountComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5075:7 ❯ processComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5041:9 ❯ patch node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4570:11 ❯ mountChildren node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4802:7 ❯ processFragment node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4984:7 ❯ patch node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4544:9

Check failure on line 33 in src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

View workflow job for this annotation

GitHub Actions / Run unit tests and CT tests

src/components/DsfrNavigation/DsfrNavigationMenuLink.spec.ts > DsfrNavigationMenuLink > should render a navigation menu link (internal) with icon

TypeError: useHeader is not a function ❯ setup src/components/DsfrNavigation/DsfrNavigationMenuLink.vue:33:20 ❯ callWithErrorHandling node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19 ❯ setupStatefulComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7757:25 ❯ setupComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7718:36 ❯ mountComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5075:7 ❯ processComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5041:9 ❯ patch node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4570:11 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5184:11 ❯ ReactiveEffect.run node_modules/.pnpm/@VUE+reactivity@3.5.4/node_modules/@vue/reactivity/dist/reactivity.cjs.js:228:19 ❯ setupRenderEffect node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5312:5

Check failure on line 33 in src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

View workflow job for this annotation

GitHub Actions / Run unit tests and CT tests

src/components/DsfrNavigation/DsfrNavigationMenuLink.spec.ts > DsfrNavigationMenuLink > should render a navigation menu link (internal) without icon

TypeError: useHeader is not a function ❯ setup src/components/DsfrNavigation/DsfrNavigationMenuLink.vue:33:20 ❯ callWithErrorHandling node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19 ❯ setupStatefulComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7757:25 ❯ setupComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7718:36 ❯ mountComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5075:7 ❯ processComponent node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5041:9 ❯ patch node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4570:11 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5184:11 ❯ ReactiveEffect.run node_modules/.pnpm/@VUE+reactivity@3.5.4/node_modules/@vue/reactivity/dist/reactivity.cjs.js:228:19 ❯ setupRenderEffect node_modules/.pnpm/@VUE+runtime-core@3.5.4/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5312:5
</script>

<template>
Expand All @@ -35,8 +39,7 @@ const iconProps = computed(() => (dsfrIcon.value || !props.icon)
class="fr-nav__link"
data-testid="nav-external-link"
:href="(to as string)"
@click="$emit('toggleId', id)"
@click.stop="onClick($event)"
@click="$emit('toggleId', id); onClick($event)"
>
{{ text }}
</a>
Expand All @@ -48,8 +51,7 @@ const iconProps = computed(() => (dsfrIcon.value || !props.icon)
:class="{
[String(icon)]: dsfrIcon,
}"
@click="$emit('toggleId', id)"
@click.stop="onClick($event)"
@click="closeModal(); $emit('toggleId', id); onClick?.($event)"
>
<VIcon
v-if="icon && iconProps"
Expand Down

0 comments on commit d0a7935

Please sign in to comment.