Merge pull request #467 from ambroisemaupate/fix/tabs

fix(DsfrTabs): Fixes #425 - Calc tabs-height CSS property

Author: laruiss

src/components/DsfrTabs/DsfrTabs.stories.js

@@ -4,6 +4,8 @@ import DsfrTabContent from './DsfrTabContent.vue'
 import { addIcons } from 'oh-vue-icons'
 
 import { RiCheckboxCircleLine } from 'oh-vue-icons/icons/ri/index.js'
+import DsfrAccordionsGroup from '../DsfrAccordion/DsfrAccordionsGroup.vue'
+import DsfrAccordion from '../DsfrAccordion/DsfrAccordion.vue'
 
 addIcons(RiCheckboxCircleLine)
 
@@ -160,3 +162,97 @@ OngletsComplexes.args = {
   selectedTabIndex: 1,
   initialSelectedIndex: 1,
 }
+
+export const OngletsAvecAccordeon = (args) => ({
+  components: { DsfrTabs, DsfrTabContent, DsfrAccordionsGroup, DsfrAccordion },
+  data () {
+    return {
+      ...args,
+      asc: true,
+    }
+  },
+
+  template: `
+    <DsfrTabs
+      :tab-list-name="tabListName"
+      :tab-titles="tabTitles"
+      :initial-selected-index="initialSelectedIndex"
+      @select-tab="selectTab"
+    >
+      <DsfrTabContent
+        panel-id="tab-content-0"
+        tab-id="tab-0"
+        :selected="selectedTabIndex === 0"
+        :asc="asc"
+      >
+        <DsfrAccordionsGroup>
+          <li>
+            <DsfrAccordion
+              id="accordion-1"
+              :title="title1"
+              :expanded-id="expandedId"
+              @expand="expandedId = $event"
+            >
+              Contenu de l’accordéon 1
+            </DsfrAccordion>
+          </li>
+          <li>
+            <DsfrAccordion
+              id="accordion-2"
+              :title="title2"
+              :expanded-id="expandedId"
+              @expand="id => expandedId = id"
+            >
+              Contenu de l’accordéon 2
+            </DsfrAccordion>
+          </li>
+          <li>
+            <DsfrAccordion
+              id="accordion-3"
+              :title="title3"
+              :expanded-id="expandedId"
+              @expand="id => expandedId = id"
+            >
+              Contenu de l’accordéon 3
+            </DsfrAccordion>
+          </li>
+        </DsfrAccordionsGroup>
+      </DsfrTabContent>
+
+      <DsfrTabContent
+        panel-id="tab-content-1"
+        tab-id="tab-1"
+        :selected="selectedTabIndex === 1"
+        :asc="asc"
+      >
+        <div>Contenu 2 avec d'autres composants</div>
+      </DsfrTabContent>
+    </DsfrTabs>
+  `,
+
+  methods: {
+    selectTab (idx) {
+      this.onSelectTab(idx)
+      this.asc = this.selectedTabIndex < idx
+      this.selectedTabIndex = idx
+    },
+  },
+
+  mounted () {
+    document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
+  },
+})
+OngletsAvecAccordeon.args = {
+  dark: false,
+  tabListName,
+  tabTitles: [
+    { title: 'Onglet avec accordéon', icon: 'ri-checkbox-circle-line', tabId: 'tab-0', panelId: 'tab-content-0' },
+    { title: 'Titre 2', icon: 'ri-checkbox-circle-line', tabId: 'tab-1', panelId: 'tab-content-1' },
+  ],
+  selectedTabIndex: 0,
+  initialSelectedIndex: 0,
+  title1: 'Un titre d’accordéon 1',
+  title2: 'Un titre d’accordéon 2',
+  title3: 'Un titre d’accordéon 3',
+  expandedId: '',
+}

src/components/DsfrTabs/DsfrTabs.vue

@@ -44,9 +44,36 @@ export default defineComponent({
       selectedIndex: this.initialSelectedIndex || 0,
       generatedIds: {},
       asc: true,
+      resizeObserver: null,
     }
   },
 
+  mounted () {
+    /*
+     * Need to use a resize-observer as tab-content height can
+     * change according to its inner components.
+     */
+    if (window.ResizeObserver) {
+      this.resizeObserver = new window.ResizeObserver(() => {
+        this.renderTabs()
+      })
+    }
+
+    this.$el.querySelectorAll('.fr-tabs__panel').forEach((element) => {
+      if (element) {
+        this.resizeObserver?.observe(element)
+      }
+    })
+  },
+
+  unmounted () {
+    this.$el.querySelectorAll('.fr-tabs__panel').forEach((element) => {
+      if (element) {
+        this.resizeObserver?.unobserve(element)
+      }
+    })
+  },
+
   methods: {
     isSelected (idx) {
       return this.selectedIndex === idx
@@ -66,17 +93,39 @@ export default defineComponent({
     },
     async selectPrevious () {
       const newIndex = this.selectedIndex === 0 ? this.tabTitles.length - 1 : this.selectedIndex - 1
-      this.selectIndex(newIndex)
+      await this.selectIndex(newIndex)
     },
     async selectNext () {
       const newIndex = this.selectedIndex === this.tabTitles.length - 1 ? 0 : this.selectedIndex + 1
-      this.selectIndex(newIndex)
+      await this.selectIndex(newIndex)
     },
     async selectFirst () {
-      this.selectIndex(0)
+      await this.selectIndex(0)
     },
     async selectLast () {
-      this.selectIndex(this.tabTitles.length - 1)
+      await this.selectIndex(this.tabTitles.length - 1)
+    },
+    /*
+     * Need to reimplement tab-height calc
+     * @see https://github.com/GouvernementFR/dsfr/blob/main/src/component/tab/script/tab/tabs-group.js#L117
+     */
+    renderTabs () {
+      if (this.selectedIndex < 0) {
+        return
+      }
+      const tablist = this.$refs.tablist
+      if (!tablist || !tablist.offsetHeight) {
+        return
+      }
+      const tablistHeight = tablist.offsetHeight
+      // Need to manually select tabs-content in case of manual slot filling
+      const selectedTab = this.$el.querySelectorAll('.fr-tabs__panel')[this.selectedIndex]
+      if (!selectedTab || !selectedTab.offsetHeight) {
+        return
+      }
+      const selectedTabHeight = selectedTab.offsetHeight
+
+      this.$el.style.setProperty('--tabs-height', (tablistHeight + selectedTabHeight) + 'px')
     },
   },
 })
@@ -85,6 +134,7 @@ export default defineComponent({
 <template>
   <div class="fr-tabs">
     <ul
+      ref="tablist"
       class="fr-tabs__list"
       role="tablist"
       :aria-label="tabListName"