Develop

docs/composants.md

@@ -34,25 +34,12 @@ Le storybook est toujours disponible [ici](https://storybook.vue-ds.fr)
 
 - [DsfrConsent](./composants/DsfrConsent)
 
-## Infobulle (Information contextuelle)
-
-- [DsfrTooltip](./composants/DsfrTooltip)
-
 ## En-tête de page
 
 - [DsfrHeader](./composants/DsfrHeader)
 - [DsfrHeaderMenuLink](./composants/DsfrHeaderMenuLink)
 - [DsfrLanguageSelector](./composants/DsfrLanguageSelector)
 
-## Modale
-
-- [DsfrModal](./composants/DsfrModal)
-
-## Pied de page
-
-- [DsfrFooter](./composants/DsfrFooter)
-- [DsfrFooterLink](./composants/DsfrFooterLink)
-
 ## Fil d’ariane
 
 - [DsfrBreadcrumb](./composants/DsfrBreadcrumb)
@@ -70,6 +57,14 @@ Le storybook est toujours disponible [ici](https://storybook.vue-ds.fr)
 - [DsfrRange](./composants/DsfrRange)
 - [DsfrFieldset](./composants/DsfrFieldset)
 
+## Infobulle (Information contextuelle)
+
+- [DsfrTooltip](./composants/DsfrTooltip)
+
+## Modale
+
+- [DsfrModal](./composants/DsfrModal)
+
 ## Onglets
 
 - [DsfrTabs](./composants/DsfrTabs)
@@ -78,12 +73,23 @@ Le storybook est toujours disponible [ici](https://storybook.vue-ds.fr)
 
 - [DsfrErrorPage](./composants/DsfrErrorPage)
 
+## Pied de page
+
+- [DsfrFooter](./composants/DsfrFooter)
+- [DsfrFooterLink](./composants/DsfrFooterLink)
+
 ## Retour en haut de page
 
 - [DsfrBackToTop](./composants/DsfrBackToTop)
 
 ## Tableau
 
+Conseillé pour des tableaux complexes :
+
+- [DsfrDataTable](./composants/DsfrDataTable)
+
+Conseillé pour des tableaux simples :
+
 - [DsfrTable](./composants/DsfrTable)
 - [DsfrTableHeader](./composants/DsfrTableHeader)
 - [DsfrTableHeaders](./composants/DsfrTableHeaders)

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -41,7 +41,7 @@ onMounted(() => {
 
 watch(isActive, (newValue, oldValue) => {
   /*
-  * @see https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js
+  * @see https://github.com/GouvernementFR/dsfr/blob/main/src/dsfr/core/script/collapse/collapse.js
   */
   if (newValue !== oldValue) {
     doExpand(newValue)
@@ -76,7 +76,7 @@ watch(isActive, (newValue, oldValue) => {
         'fr-collapse--expanded': cssExpanded, // Need to use a separate data to add/remove the class after a RAF
         'fr-collapsing': collapsing,
       }"
-      @transitionend="onTransitionEnd(isActive)"
+      @transitionend="onTransitionEnd(isActive, false)"
     >
       <!-- @slot Slot par défaut pour le contenu de l’accordéon: sera dans `<div class="fr-collapse">` -->
       <slot />

src/components/DsfrDataTable/DsfrDataTable.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 import DsfrPagination from '../DsfrPagination/DsfrPagination.vue'
 import VIcon from '../VIcon/VIcon.vue'
@@ -128,17 +128,15 @@ function selectAll (bool: boolean) {
   if (bool) {
     const keyIndex = props.headersRow.findIndex(header => (header as DsfrDataTableHeaderCellObject).key ?? header)
     selection.value = finalRows.value.map(row => row[keyIndex] as string)
+  } else {
+    selection.value.length = 0
   }
-  selection.value!.length = 0
-}
-const wholeSelection = ref(false)
-function checkSelection () {
-  wholeSelection.value = selection.value.length === finalRows.value.length
 }
 
+const wholeSelection = computed(() => selection.value.length === finalRows.value.length)
+
 function onPaginationOptionsChange () {
   emit('update:current-page', 0)
-  wholeSelection.value = false
   selection.value.length = 0
 }
 
@@ -231,7 +229,6 @@ function copyToClipboard (text: string) {
                       v-model="selection"
                       :value="rows[idx][rowKey] ?? `row-${idx}`"
                       type="checkbox"
-                      @change="checkSelection()"
                     >
                     <label
                       class="fr-label"
@@ -317,6 +314,7 @@ function copyToClipboard (text: string) {
             <DsfrPagination
               v-model:current-page="currentPage"
               :pages="pages"
+              @update:current-page="selection.length = 0"
             />
           </div>
         </template>

src/components/DsfrHeader/DsfrHeader.vue

@@ -193,11 +193,13 @@ provide(registerNavigationLinkKey, () => {
               v-if="quickLinks?.length || languageSelector"
               class="fr-header__tools-links"
             >
+              <slot name="before-quick-links" />
               <DsfrHeaderMenuLinks
                 v-if="!menuOpened"
                 :links="quickLinks"
                 :nav-aria-label="quickLinksAriaLabel"
               />
+              <slot name="after-quick-links" />
               <template v-if="languageSelector">
                 <DsfrLanguageSelector
                   v-bind="languageSelector"
@@ -247,13 +249,15 @@ provide(registerNavigationLinkKey, () => {
                   @select="languageSelector.currentLanguage = $event.codeIso"
                 />
               </template>
+              <slot name="before-quick-links" />
               <DsfrHeaderMenuLinks
                 v-if="menuOpened"
                 role="navigation"
                 :links="quickLinks"
                 :nav-aria-label="quickLinksAriaLabel"
                 @link-click="onQuickLinkClick"
               />
+              <slot name="after-quick-links" />
             </div>
 
             <template v-if="modalOpened">

src/components/DsfrSideMenu/DsfrSideMenu.types.ts

@@ -10,6 +10,7 @@ export type DsfrSideMenuProps = {
   menuItems?: DsfrSideMenuListItemProps[]
   headingTitle?: string
   titleTag?: string
+  focusOnExpanding?: boolean
 }
 
 export type DsfrSideMenuButtonProps = {
@@ -26,4 +27,5 @@ export type DsfrSideMenuListProps = {
     DsfrSideMenuListItemProps & Partial<DsfrSideMenuListProps & { to?: RouteLocationRaw, text?: string }>
     & { menuItems?: (DsfrSideMenuListItemProps & Partial<DsfrSideMenuListProps & { to?: RouteLocationRaw, text?: string }>)[] }
   )[]
+  focusOnExpanding?: boolean
 }

src/components/DsfrSideMenu/DsfrSideMenu.vue

@@ -18,6 +18,7 @@ withDefaults(defineProps<DsfrSideMenuProps>(), {
   menuItems: () => undefined,
   headingTitle: '',
   titleTag: 'h3',
+  focusOnExpanding: true,
 })
 
 defineEmits<{ (e: 'toggleExpand', payload: string): void }>()
@@ -64,7 +65,7 @@ watch(expanded, (newValue, oldValue) => {
           'fr-collapse--expanded': cssExpanded, // Need to use a separate data to add/remove the class after a RAF
           'fr-collapsing': collapsing,
         }"
-        @transitionend="onTransitionEnd(expanded)"
+        @transitionend="onTransitionEnd(expanded, focusOnExpanding)"
       >
         <component
           :is="titleTag"

src/components/DsfrSideMenu/DsfrSideMenuList.vue

@@ -56,7 +56,7 @@ const linkProps = (to: string | RouteLocationRaw | undefined) => {
       'fr-collapsing': collapsing,
       'fr-collapse--expanded': cssExpanded,
     }"
-    @transitionend="onTransitionEnd(!!expanded)"
+    @transitionend="onTransitionEnd(!!expanded, focusOnExpanding)"
   >
     <ul
       class="fr-sidemenu__list"

src/composables/useCollapsable.ts

@@ -32,11 +32,11 @@ export const useCollapsable = () => {
     }
     if (newValue === true) {
       // unbound
-      // @see https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js#L33
+      // @see https://github.com/GouvernementFR/dsfr/blob/main/src/dsfr/core/script/collapse/collapse.js
       collapse.value.style.setProperty('--collapse-max-height', 'none')
     }
     // We need to wait for the next RAF to be sure the CSS variable will be set
-    // DSFR use RAF too https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/api/modules/render/renderer.js#L22
+    // DSFR use RAF too https://github.com/GouvernementFR/dsfr/blob/main/src/dsfr/core/script/api/modules/render/renderer.js#L22
     window.requestAnimationFrame(() => {
       collapsing.value = true
       adjust()
@@ -48,13 +48,16 @@ export const useCollapsable = () => {
   }
 
   /**
-   * @see https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js#L25
+   * @see https://github.com/GouvernementFR/dsfr/blob/main/src/dsfr/core/script/collapse/collapse.js#L25
    * @param {boolean} expanded
+   * @param {boolean} focusFirstAnchor
    * @return void
    */
-  const onTransitionEnd = (expanded: boolean): void => {
+  const onTransitionEnd = (expanded: boolean, autoFocus = true): void => {
     collapsing.value = false
-    collapse.value?.querySelector('a')?.focus()
+    if (autoFocus) {
+      collapse.value?.querySelector('a')?.focus()
+    }
     if (collapse.value && expanded === false) {
       collapse.value.style.removeProperty('--collapse-max-height')
     }