Develop

ci/check-exports.mjs

@@ -14,12 +14,12 @@ const isCI = process.argv.includes('--ci')
 const getNormalizedDir = (relativeDir) => fileURLToPath(new URL(relativeDir, import.meta.url))
 
 // const sfcs = await globby(fileURLToPath(new URL('../src/components/**/*.vue', import.meta.url)))
-const sfcs = (await globby('src/components/**/*.{vue,types.ts}'))
- .filter(path => !/Demo|Example/.test(path))
+const sfcs = (await globby('src/components/**/*.{vue,ts}'))
+ .filter(path => !/Demo|Example|stories|spec\.ts|index\.ts/.test(path))
  .map(path => path.replace(/^(.*).types.ts$/, '$1.types'))
 
-const projectFn = component => component.endsWith('types')
- ? `export * from '${component.replace('src/components', '.')}'`
+const projectFn = component => (component.endsWith('types') || component.includes('injection-key.ts'))
+ ? `export * from '${component.replace('src/components', '.').replace(/\.ts$/, '')}'`
  : `export { default as ${path.basename(component, '.vue')} } from '${component.replace('src/components', '.')}'`
 
 const correctComponentList = sfcs.map(projectFn).sort()

demo-app/main.js

@@ -1,5 +1,4 @@
 import VueDsfr from '@/index'
-import { Icon } from '@iconify/vue'
 
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -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')
 

demo-app/views/AppHome.vue

@@ -70,7 +70,7 @@ const onClick = () => {
  }, 2000)
 }
 
-const expandedId = ref('')
+const activeAccordion = ref(-1)
 </script>
 
 <template>
@@ -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">

src/components/DsfrAccordion/DsfrAccordion.md

@@ -48,4 +48,5 @@ Ce composant peut être utilisé uniquement avec [`DsfrAccordionsGroup`](/compos
 ::: code-group
 <<< DsfrAccordion.vue
 <<< DsfrAccordion.types.ts
+<<< injection-key.ts
 :::

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -3,7 +3,7 @@ import { inject, onMounted, ref, toRef, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
 import { getRandomId } from '../../utils/random-utils'
-import { registerTabKey } from './injection-key'
+import { registerAccordionKey } from './injection-key'
 import type { DsfrAccordionProps } from './DsfrAccordion.types'
 
 export type { DsfrAccordionProps }
@@ -27,7 +27,7 @@ const {
 
 const isStandaloneActive = ref()
 
-const useAccordion = inject(registerTabKey)!
+const useAccordion = inject(registerAccordionKey)!
 const { isActive, expand } = useAccordion?.(toRef(() => props.title)) ?? { isActive: isStandaloneActive, expand: () => isStandaloneActive.value = !isStandaloneActive.value }
 
 onMounted(() => {

src/components/DsfrAccordion/DsfrAccordionsGroup.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed, onUnmounted, provide, ref, type Ref, watch } from 'vue'
 
-import { registerTabKey } from './injection-key'
+import { registerAccordionKey } from './injection-key'
 
 const props = withDefaults(defineProps<{
- modelValue: number
+ modelValue?: number
 }>(), {
  modelValue: -1,
 })
@@ -21,7 +21,7 @@ const activeAccordion = computed({
 })
 const accordions = ref(new Map<number, string>())
 const currentId = ref(0)
-provide(registerTabKey, (title: Ref<string>) => {
+provide(registerAccordionKey, (title: Ref<string>) => {
  const myIndex = currentId.value++
  accordions.value.set(myIndex, title.value)
 

src/components/DsfrAccordion/injection-key.ts

@@ -5,4 +5,4 @@ type RegisterTab = (title: Ref<string>) => {
  expand: () => void
 }
 
-export const registerTabKey: InjectionKey<RegisterTab> = Symbol('accordions')
+export const registerAccordionKey: InjectionKey<RegisterTab> = Symbol('accordions')

src/components/DsfrHeader/DsfrHeader.md

@@ -80,6 +80,7 @@ Exemple plus complet sur l’[application de demo](https://demo.vue-ds.fr/) (don
 
 <<< DsfrHeader.vue
 <<< DsfrHeader.types.ts
+<<< injection-key.ts
 
 :::
 

src/components/DsfrHeader/DsfrHeader.vue

@@ -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'
 
@@ -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>

src/components/DsfrHeader/DsfrHeaderMenuLink.vue

@@ -67,7 +67,7 @@ const iconProps = computed(() => typeof props.icon === 'string'
  }"
  v-bind="linkData"
  :target="target"
- @click.stop="onClick"
+ @click.stop="onClick($event)"
  >
  <template
  v-if="!dsfrIcon && (icon || iconAttrs?.name) && !iconRight"

src/components/DsfrHeader/injection-key.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue'
+
+type RegisterNavigationLink = () => () => void
+
+export const registerNavigationLinkKey: InjectionKey<RegisterNavigationLink> = Symbol('header')

src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, hasInjectionContext, 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 }
@@ -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 = hasInjectionContext() ? inject(registerNavigationLinkKey)! : undefined
+const closeModal = useHeader?.() ?? (() => {})
 </script>
 
 <template>
@@ -35,7 +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="$emit('toggleId', id); onClick($event)"
  >
  {{ text }}
  </a>
@@ -47,7 +51,7 @@ const iconProps = computed(() => (dsfrIcon.value || !props.icon)
  :class="{
  [String(icon)]: dsfrIcon,
  }"
- @click="$emit('toggleId', id)"
+ @click="closeModal(); $emit('toggleId', id); onClick?.($event)"
  >
  <VIcon
  v-if="icon && iconProps"

src/components/DsfrTabs/DsfrTabs.md

@@ -141,6 +141,7 @@ activeTab.value = tabTitles.length - 1 // active le dernier onglet
 <<< DsfrTabContent.vue
 <<< DsfrTabItem.vue
 <<< DsfrTabs.types.ts
+<<< injection-key.ts
 :::
 
 <script setup lang="ts">

src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './DsfrAccordion/DsfrAccordion.types'
+export * from './DsfrAccordion/injection-key'
 export * from './DsfrAlert/DsfrAlert.types'
 export * from './DsfrBackToTop/DsfrBackToTop.types'
 export * from './DsfrBadge/DsfrBadge.types'
@@ -17,6 +18,7 @@ export * from './DsfrFollow/DsfrFollow.types'
 export * from './DsfrFooter/DsfrFooter.types'
 export * from './DsfrFranceConnect/DsfrFranceConnect.types'
 export * from './DsfrHeader/DsfrHeader.types'
+export * from './DsfrHeader/injection-key'
 export * from './DsfrHighlight/DsfrHighlight.types'
 export * from './DsfrInput/DsfrInput.types'
 export * from './DsfrLanguageSelector/DsfrLanguageSelector.types'
@@ -39,6 +41,7 @@ export * from './DsfrStepper/DsfrStepper.types'
 export * from './DsfrSummary/DsfrSummary.types'
 export * from './DsfrTable/DsfrTable.types'
 export * from './DsfrTabs/DsfrTabs.types'
+export * from './DsfrTabs/injection-key'
 export * from './DsfrTag/DsfrTags.types'
 export * from './DsfrTile/DsfrTiles.types'
 export * from './DsfrToggleSwitch/DsfrToggleSwitch.types'