fix(Tabs): issue where Tab inside Fragment doesn't detected

example/src/views/TabView.vue

@@ -96,9 +96,12 @@ const tabs = ref<TabsProps[]>([
         <RuiTab disabled>
           Tab 2
         </RuiTab>
-        <RuiTab>Tab 3</RuiTab>
-        <RuiTab>Tab 4</RuiTab>
-        <RuiTab>Tab 5</RuiTab>
+        <RuiTab
+          v-for="n in 3"
+          :key="n"
+        >
+          Tab {{ n + 2 }}
+        </RuiTab>
         <RuiTab
           link
           to="/steppers"
@@ -110,17 +113,11 @@ const tabs = ref<TabsProps[]>([
         v-model="data.modelValue"
         data-cy="tab-items"
       >
-        <RuiTabItem>
-          <RuiCard>Tab 1 Content</RuiCard>
-        </RuiTabItem>
-        <RuiTabItem>
-          <RuiCard>Tab 2 Content</RuiCard>
-        </RuiTabItem>
-        <RuiTabItem>
-          <RuiCard>Tab 3 Content</RuiCard>
-        </RuiTabItem>
-        <RuiTabItem>
-          <RuiCard>Tab 4 Content</RuiCard>
+        <RuiTabItem
+          v-for="n in 4"
+          :key="n"
+        >
+          <RuiCard>Tab {{ n }} Content</RuiCard>
         </RuiTabItem>
         <RuiTabItem>
           <RuiCard>

src/components/tabs/tab-items/RuiTabItems.vue

@@ -23,14 +23,21 @@ watch(currIndex, (index) => {
   });
 });
 
+// When using dynamic content with v-for the slot content can contain fragment,
+// Go through the fragment and always return RuiTabItem only
+function getChildrenTabs(children: VNode[]): VNode[] {
+  return children.flatMap((item) => {
+    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)
+      return getChildrenTabs(item.children.filter(isVNode));
+
+    return [item];
+  }).flat();
+}
+
 const children = computed(() => {
   const slotContent = slots.default?.() ?? [];
 
-  // When using dynamic content with v-for the slot content is a single fragment
-  // containing the children components.
-  const tabs = slotContent.length === 1 && slotContent[0].type === Fragment
-    ? Array.isArray(slotContent[0].children) ? slotContent[0].children.filter(isVNode) : []
-    : slotContent;
+  const tabs = getChildrenTabs(slotContent);
 
   let anyActive = false;
   const children = tabs.map((tab, index) => {

src/components/tabs/tabs/RuiTabs.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
 import { throttleFilter } from '@vueuse/shared';
-import { Fragment, isVNode } from 'vue';
+import { Fragment, type VNode, isVNode } from 'vue';
 import RuiButton from '@/components/buttons/button/RuiButton.vue';
 import RuiIcon from '@/components/icons/RuiIcon.vue';
-import type { ContextColorsType } from '@/consts/colors';
 import type { Props as TabProps } from '@/components/tabs/tab/RuiTab.vue';
+import type { ContextColorsType } from '@/consts/colors';
 
 export interface Props {
   color?: ContextColorsType;
@@ -40,15 +40,22 @@ const bar = ref<HTMLDivElement>();
 const wrapper = ref<HTMLDivElement>();
 const showArrows: Ref<boolean> = ref(false);
 
+// When using dynamic content with v-for the slot content can contain fragment,
+// Go through the fragment and always return RuiTab only
+function getChildrenTabs(children: VNode[]): VNode[] {
+  return children.flatMap((item) => {
+    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)
+      return getChildrenTabs(item.children.filter(isVNode));
+
+    return [item];
+  }).flat();
+}
+
 const slots = useSlots();
 const children = computed(() => {
   const slotContent = slots.default?.() ?? [];
 
-  // When using dynamic content with v-for the slot content is a single fragment
-  // containing the children components.
-  const tabs = slotContent.length === 1 && slotContent[0].type === Fragment
-    ? Array.isArray(slotContent[0].children) ? slotContent[0].children.filter(isVNode) : []
-    : slotContent;
+  const tabs = getChildrenTabs(slotContent);
 
   const currentModelValue = get(internalModelValue);
   const inheritedProps = {