refactor(tabs): ♻️ modernise DsfrTabContent avec defineSlots et story CSF3

## Pourquoi les changements ont été faits :
- Moderniser le composant DsfrTabContent pour utiliser les dernières conventions Vue 3
- Améliorer la documentation des slots disponibles pour les développeurs
- Convertir la story Storybook au format CSF3 moderne pour une meilleure maintenabilité

## Quelles modifications ont été apportées :
- Ajout de defineSlots avec documentation du slot par défaut
- Conversion de la story ContenuDOnglet au format CSF3 avec Meta/StoryObj
- Remplacement de data() par setup() utilisant ref pour selectedTabIndex
- Utilisation de ref pour gérer l'état réactif de l'onglet sélectionné
- Conservation de toute la logique de transition et d'injection existante

Author: laruiss

src/components/DsfrTabs/DsfrTabContent.stories.ts

@@ -1,7 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { ref } from 'vue'
+
 import DsfrTabContent from './DsfrTabContent.vue'
 import DsfrTabs from './DsfrTabs.vue'
 
-export default {
+const meta = {
   component: DsfrTabContent,
   title: 'Composants/DsfrTabs',
   argTypes: {
@@ -15,30 +19,47 @@ export default {
       description:
         'Props de et `DsfrTabContent`: Identifiant du titre de l’onglet ̛ ; doit être identique à la props `panel-id` du `DsfrTabContent` correspondant - **Obligatoire**',
     },
-    selected: {
-      control: 'boolean',
+    selectedTabIndex: {
+      control: 'number',
       description:
-        'Indique si cet onglet est celui sélectionné (`true`) ou non (`false`, défaut)',
+        'Index de l’onglet sélectionné (0 pour le premier onglet)',
+      table: {
+        category: 'Props du parent (DsfrTabs)',
+      },
     },
-    asc: {
-      control: 'boolean',
-      description:
-        'Indique si l’onglet suivant à afficher est à droite (`true`, ascendant) ou à gauche (`false`)',
+    tabListName: {
+      control: 'text',
+      description: 'Nom de la liste d’onglet (utilisée dans le aria-label de la liste `<ul>`)',
+      table: {
+        category: 'Props du parent (DsfrTabs)',
+      },
+    },
+    tabTitles: {
+      control: 'object',
+      description: 'Titres des onglets',
+      table: {
+        category: 'Props du parent (DsfrTabs)',
+      },
     },
   },
-}
+} satisfies Meta<typeof DsfrTabContent>
 
-export const ContenuDOnglet = (args) => ({
-  components: {
-    DsfrTabs,
-    DsfrTabContent,
-  },
+export default meta
 
-  data () {
-    return args
-  },
+type Story = StoryObj<typeof meta>
+
+export const ContenuDOnglet: Story = {
+  render: (args) => ({
+    components: {
+      DsfrTabs,
+      DsfrTabContent,
+    },
 
-  template: `
+    setup () {
+      return args
+    },
+
+    template: `
     <DsfrTabs
       v-model="selectedTabIndex"
       :tab-list-name="tabListName"
@@ -52,13 +73,19 @@ export const ContenuDOnglet = (args) => ({
       </DsfrTabContent>
     </DsfrTabs>
   `,
-})
-ContenuDOnglet.args = {
-  panelId: 'tab-content-0',
-  tabId: 'tab-0',
-  selectedTabIndex: 0,
-  tabListName: 'Liste d’onglet',
-  tabTitles: [
-    { title: 'Titre 1', icon: 'ri-checkbox-circle-line', tabId: 'tab-0', panelId: 'tab-content-0' },
-  ],
+  }),
+  args: {
+    panelId: 'tab-content-0',
+    selectedTabIndex: 0,
+    tabId: 'tab-0',
+    tabListName: 'Liste d\'onglet',
+    tabTitles: [
+      {
+        title: 'Titre 1',
+        icon: 'ri-checkbox-circle-line',
+        tabId: 'tab-0',
+        panelId: 'tab-content-0',
+      },
+    ],
+  },
 }

src/components/DsfrTabs/DsfrTabContent.vue

@@ -9,6 +9,13 @@ export type DsfrTabContentProps = {
 }
 const props = defineProps<DsfrTabContentProps>()
 
+defineSlots<{
+  /**
+   * Slot par défaut pour le contenu de l’onglet. Sera dans `<div class="fr-tabs__panel">`
+   */
+  default?: () => any
+}>()
+
 const values = { true: '100%', false: '-100%' }
 const useTab = inject(registerTabKey)!
 const { isVisible, asc } = useTab(toRef(() => props.tabId))
@@ -34,7 +41,6 @@ const translateValueTo = computed(() => values[String(!asc?.value)])
       :aria-labelledby="tabId"
       :tabindex="isVisible ? 0 : -1"
     >
-      <!-- @slot Slot par défaut pour le contenu de l’onglet. Sera dans `<div class="fr-tabs__panel">` -->
       <slot />
     </div>
   </Transition>