fix: ensures the child template is not empty

oruga-ui · Nov 26, 2024 · 383c433 · 383c433
1 parent 493a37e
commit 383c433
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/packages/oruga/src/components/steps/StepItem.vue b/packages/oruga/src/components/steps/StepItem.vue
@@ -175,16 +175,16 @@ const panelClasses = defineClasses(["stepPanelClass", "o-steps__panel"]);
         :appear="parent.animateInitially"
         @after-enter="afterEnter"
         @before-leave="beforeLeave">
-        <template v-if="!parent.destroyOnHide || (isActive && visible)">
-            <div
-                v-show="isActive && visible"
-                v-bind="$attrs"
-                :id="`tabpanel-${item.identifier}`"
-                :class="panelClasses"
-                :data-id="`steps-${item.identifier}`"
-                data-oruga="steps-item"
-                :aria-labelledby="`tab-${item.identifier}`"
-                aria-roledescription="item">
+        <div
+            v-show="isActive && visible"
+            v-bind="$attrs"
+            :id="`tabpanel-${item.identifier}`"
+            :class="panelClasses"
+            :data-id="`steps-${item.identifier}`"
+            data-oruga="steps-item"
+            :aria-labelledby="`tab-${item.identifier}`"
+            aria-roledescription="item">
+            <template v-if="!parent.destroyOnHide || (isActive && visible)">
                 <!-- 
                     @slot Step item content
                 -->
@@ -199,7 +199,7 @@ const panelClasses = defineClasses(["stepPanelClass", "o-steps__panel"]);
                     <!-- default content prop -->
                     <template v-else>{{ content }}</template>
                 </slot>
-            </div>
-        </template>
+            </template>
+        </div>
     </Transition>
 </template>
diff --git a/packages/oruga/src/components/tabs/TabItem.vue b/packages/oruga/src/components/tabs/TabItem.vue
@@ -159,16 +159,16 @@ const panelClasses = defineClasses(["tabPanelClass", "o-tabs__panel"]);
         :appear="parent.animateInitially"
         @after-enter="afterEnter"
         @before-leave="beforeLeave">
-        <template v-if="!parent.destroyOnHide || (isActive && visible)">
-            <div
-                v-show="isActive && visible"
-                v-bind="$attrs"
-                :id="`tabpanel-${item.identifier}`"
-                :class="panelClasses"
-                :data-id="`tabs-${item.identifier}`"
-                data-oruga="tabs-item"
-                :aria-labelledby="`tab-${item.identifier}`"
-                aria-roledescription="item">
+        <div
+            v-show="isActive && visible"
+            v-bind="$attrs"
+            :id="`tabpanel-${item.identifier}`"
+            :class="panelClasses"
+            :data-id="`tabs-${item.identifier}`"
+            data-oruga="tabs-item"
+            :aria-labelledby="`tab-${item.identifier}`"
+            aria-roledescription="item">
+            <template v-if="!parent.destroyOnHide || (isActive && visible)">
                 <!-- 
                     @slot Tab item content
                 -->
@@ -195,7 +195,7 @@ const panelClasses = defineClasses(["tabPanelClass", "o-tabs__panel"]);
                     -->
                     <slot name="header" />
                 </template>
-            </div>
-        </template>
+            </template>
+        </div>
     </Transition>
 </template>