Merge pull request #1247 from PrefectHQ/fix-tabs

Fix tabs not showing content when slots are used
PrefectHQ · Apr 25, 2024 · 06120f4 · 06120f4
2 parents 2bfb642 + 82a4749
commit 06120f4
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/components/Tabs/PTabs.vue b/src/components/Tabs/PTabs.vue
@@ -2,8 +2,8 @@
   <section class="p-tabs">
     <template v-if="media.sm">
       <PTabNavigation v-model:selected="selected" class="p-tabs--not-mobile" :tabs="tabs">
-        <template v-for="tab in tabs" #[`${tab}-heading`]="data">
-          <slot :name="`${tab}-heading`" v-bind="data" />
+        <template v-for="tab in tabs" #[`${kebabCase(tab.label)}-heading`]="data">
+          <slot :name="`${kebabCase(tab.label)}-heading`" v-bind="data" />
         </template>
 
         <template #heading="data">
@@ -13,8 +13,8 @@
     </template>
     <template v-else>
       <PTabSelect v-model:selected="selected" :tabs="tabs">
-        <template v-for="tab in tabs" #[`${tab}-heading`]="data">
-          <slot :name="`${tab}-heading`" v-bind="data" />
+        <template v-for="tab in tabs" #[`${kebabCase(tab.label)}-heading`]="data">
+          <slot :name="`${kebabCase(tab.label)}-heading`" v-bind="data" />
         </template>
 
         <template #heading="data">
@@ -30,7 +30,7 @@
           role="tabpanel"
           :aria-labelledby="`${kebabCase(tab.label)}`"
         >
-          <slot :name="`${tab.label}`" v-bind="{ tab, index }">
+          <slot :name="`${kebabCase(tab.label)}`" v-bind="{ tab, index }">
             <slot name="content" v-bind="{ tab, index }" />
           </slot>
         </section>