fix(vue): tab bar now works with slot="top" (#22461)

resolves #22456

packages/vue/src/components/IonTabs.ts

@@ -1,10 +1,50 @@
-import { h, defineComponent } from 'vue';
+import { h, defineComponent, VNode } from 'vue';
 import { IonRouterOutlet } from './IonRouterOutlet';
 
 export const IonTabs = defineComponent({
   name: 'IonTabs',
   render() {
     const { $slots: slots } = this;
+    const slottedContent = slots.default && slots.default();
+    let childrenToRender = [
+      h('div', {
+        class: 'tabs-inner',
+        style: {
+            'position': 'relative',
+            'flex': '1',
+            'contain': 'layout size style'
+        }
+      }, [
+        h(IonRouterOutlet, { tabs: true })
+      ])
+    ];
+
+    /**
+     * If ion-tab-bar has slot="top" it needs to be
+     * rendered before `.tabs-inner` otherwise it will
+     * not show above the tab content.
+     */
+    if (slottedContent && slottedContent.length > 0) {
+      const topSlottedTabBar = slottedContent.find((child: VNode) => {
+        const isTabBar = child.type && (child.type as any).name === 'IonTabBar';
+        const hasTopSlot = child.props?.slot === 'top';
+
+        return isTabBar && hasTopSlot;
+      });
+
+      if (topSlottedTabBar) {
+        childrenToRender = [
+          ...slottedContent,
+          ...childrenToRender
+        ];
+      } else {
+        childrenToRender = [
+          ...childrenToRender,
+          ...slottedContent
+        ]
+      }
+    }
+
     return h(
       'ion-tabs',
       {
@@ -22,23 +62,7 @@ export const IonTabs = defineComponent({
           'z-index': '0'
         }
       },
-      [
-        h(
-          'div',
-          {
-            class: 'tabs-inner',
-            style: {
-              'position': 'relative',
-              'flex': '1',
-              'contain': 'layout size style'
-            }
-          },
-          [
-            h(IonRouterOutlet, { tabs: true })
-          ]
-        ),
-        ...slots.default && slots.default()
-      ]
+      childrenToRender
     )
   }
 });