Merge pull request #463 from ambroisemaupate/fix/accordion

fix: Fixed and improved Accordions

Author: laruiss

src/components/DsfrAccordion/DsfrAccordion.stories.js

@@ -100,24 +100,26 @@ export const AccordeonDansUnAccordeon = (args) => ({
           :expanded-id="expandedId"
           @expand="expandedId = $event"
         >
-          <li>
-            <DsfrAccordion
-              :title="titleSub1"
-              :expanded-id="subExpandedId"
-              @expand="subExpandedId = $event"
-            >
-              Contenu de l’accordéon dans l’accordéon
-            </DsfrAccordion>
-          </li>
-          <li>
-            <DsfrAccordion
-              :title="titleSub2"
-              :expanded-id="subExpandedId"
-              @expand="subExpandedId = $event"
-            >
-              Contenu de l’accordéon dans l’accordéon
-            </DsfrAccordion>
-          </li>
+          <DsfrAccordionsGroup>
+            <li>
+              <DsfrAccordion
+                :title="titleSub1"
+                :expanded-id="subExpandedId"
+                @expand="subExpandedId = $event"
+              >
+                Contenu de l’accordéon dans l’accordéon
+              </DsfrAccordion>
+            </li>
+            <li>
+              <DsfrAccordion
+                :title="titleSub2"
+                :expanded-id="subExpandedId"
+                @expand="subExpandedId = $event"
+              >
+                Contenu de l’accordéon dans l’accordéon
+              </DsfrAccordion>
+            </li>
+          </DsfrAccordionsGroup>
         </DsfrAccordion>
       </li>
     </DsfrAccordionsGroup>

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -24,17 +24,61 @@ export default defineComponent({
       default: 'Sans intitulé',
     },
   },
+
   emits: ['expand'],
 
+  data () {
+    return {
+      collapsing: false,
+    }
+  },
+
   computed: {
     expanded () {
       return this.expandedId === this.id
     },
   },
 
+  watch: {
+    /*
+     * @see https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js
+     */
+    expanded (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        if (newValue === true) {
+          this.$refs.collapse.style.setProperty('--collapse-max-height', 'none')
+        }
+        this.collapsing = true
+        this.adjust()
+        setTimeout(() => {
+          this.collapsing = false
+          if (newValue === false) {
+            this.$refs.collapse.style.removeProperty('--collapse-max-height')
+          }
+        }, 300)
+      }
+    },
+  },
+
   methods: {
     toggleExpanded () {
-      this.$emit('expand', this.id)
+      /*
+       * Close current accordion if expanded
+       */
+      if (this.expanded) {
+        this.$emit('expand', undefined)
+      } else {
+        this.$emit('expand', this.id)
+      }
+    },
+    /*
+     * @see https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js#L61
+     */
+    adjust () {
+      this.$refs.collapse.style.setProperty('--collapser', 'none')
+      const height = this.$refs.collapse.offsetHeight
+      this.$refs.collapse.style.setProperty('--collapse', -height + 'px')
+      this.$refs.collapse.style.setProperty('--collapser', '')
     },
   },
 
@@ -59,8 +103,12 @@ export default defineComponent({
     </h3>
     <div
       :id="id"
+      ref="collapse"
       class="fr-collapse"
-      :class="{ 'fr-collapse--expanded': expanded }"
+      :class="{
+        'fr-collapse--expanded': expanded,
+        'fr-collapsing': collapsing,
+      }"
     >
       <!-- @slot Slot par défaut pour le contenu de l’accordéon: sera dans `<div class="fr-collapse">` -->
       <slot />
@@ -69,9 +117,3 @@ export default defineComponent({
 </template>
 
 <style src="@gouvfr/dsfr/dist/component/accordion/accordion.main.min.css" />
-
-<style scoped>
-.fr-collapse--expanded {
-  max-height: none !important;
-}
-</style>

src/utils/random-utils.js

@@ -1,4 +1,7 @@
-export const alphanum = 'abcdefghijklmnopqrstuvwyz0123456789'
+const alphanumBase = 'abcdefghijklmnopqrstuvwyz0123456789'
+// We need to duplicate the base string to have a longer string
+// to avoid Math.random to return the same value twice
+export const alphanum = alphanumBase.repeat(10)
 
 export const getRandomAlphaNum = () => {
   const randomIndex = Math.floor(Math.random() * alphanum.length)