fix(components): [tabs] optimize SSR (#15183)

packages/components/tabs/src/constants.ts

@@ -16,6 +16,7 @@ export interface TabsRootContext {
   props: TabsProps
   currentName: Ref<string | number>
   registerPane: (pane: TabsPaneContext) => void
+  sortPane: (pane: TabsPaneContext) => void
   unregisterPane: (uid: number) => void
 }
 

packages/components/tabs/src/tab-pane.vue

@@ -70,8 +70,9 @@ const pane = reactive({
   isClosable,
 })
 
+tabsRoot.registerPane(pane)
 onMounted(() => {
-  tabsRoot.registerPane(pane)
+  tabsRoot.sortPane(pane)
 })
 
 onUnmounted(() => {

packages/components/tabs/src/tabs.tsx

@@ -24,7 +24,7 @@ import TabNav from './tab-nav'
 
 import type { TabNavInstance } from './tab-nav'
 import type { TabsPaneContext } from './constants'
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, FunctionalComponent, VNode } from 'vue'
 import type { Awaitable } from '@element-plus/utils'
 
 export type TabPaneName = string | number
@@ -111,7 +111,7 @@ const Tabs = defineComponent({
 
     const {
       children: panes,
-      addChild: registerPane,
+      addChild: sortPane,
       removeChild: unregisterPane,
     } = useOrderedChildren<TabsPaneContext>(getCurrentInstance()!, 'ElTabPane')
 
@@ -171,14 +171,21 @@ const Tabs = defineComponent({
     provide(tabsRootContextKey, {
       props,
       currentName,
-      registerPane,
+      registerPane: (pane: TabsPaneContext) => {
+        panes.value.push(pane)
+      },
+      sortPane,
       unregisterPane,
     })
 
     expose({
       currentName,
     })
-
+    const TabNavRenderer: FunctionalComponent<{ render: () => VNode }> = ({
+      render,
+    }) => {
+      return render()
+    }
     return () => {
       const addSlot = slots['add-icon']
       const newButton =
@@ -212,15 +219,19 @@ const Tabs = defineComponent({
             ns.is(props.tabPosition),
           ]}
         >
-          <TabNav
-            ref={nav$}
-            currentName={currentName.value}
-            editable={props.editable}
-            type={props.type}
-            panes={panes.value}
-            stretch={props.stretch}
-            onTabClick={handleTabClick}
-            onTabRemove={handleTabRemove}
+          <TabNavRenderer
+            render={() => (
+              <TabNav
+                ref={nav$}
+                currentName={currentName.value}
+                editable={props.editable}
+                type={props.type}
+                panes={panes.value}
+                stretch={props.stretch}
+                onTabClick={handleTabClick}
+                onTabRemove={handleTabRemove}
+              />
+            )}
           />
           {newButton}
         </div>
@@ -241,9 +252,8 @@ const Tabs = defineComponent({
             },
           ]}
         >
-          {...props.tabPosition !== 'bottom'
-            ? [header, panels]
-            : [panels, header]}
+          {panels}
+          {header}
         </div>
       )
     }

packages/hooks/use-ordered-children/index.ts

@@ -25,6 +25,7 @@ export const useOrderedChildren = <T extends { uid: number }>(
   const children: Record<number, T> = {}
   const orderedChildren = shallowRef<T[]>([])
 
+  // TODO: split into two functions: addChild and sortChildren
   const addChild = (child: T) => {
     children[child.uid] = child
     orderedChildren.value = getOrderedChildren(vm, childComponentName, children)

packages/theme-chalk/src/tabs.scss

@@ -3,6 +3,7 @@
 
 @include b(tabs) {
   @include set-component-css-var('tabs', $tabs);
+  display: flex;
 
   @include e(header) {
     padding: 0;
@@ -176,6 +177,7 @@
   @include e(content) {
     overflow: hidden;
     position: relative;
+    flex-grow: 1;
   }
   @include m(card) {
     > .#{$namespace}-tabs__header {
@@ -326,6 +328,8 @@
     }
   }
   @include m(bottom) {
+    flex-direction: column;
+
     .#{$namespace}-tabs__header.is-bottom {
       margin-bottom: 0;
       margin-top: 10px;
@@ -422,8 +426,9 @@
     }
   }
   @include m(left) {
+    flex-direction: row-reverse;
+
     .#{$namespace}-tabs__header.is-left {
-      float: left;
       margin-bottom: 0;
       margin-right: 10px;
     }
@@ -506,7 +511,6 @@
   }
   @include m(right) {
     .#{$namespace}-tabs__header.is-right {
-      float: right;
       margin-bottom: 0;
       margin-left: 10px;
     }
@@ -577,6 +581,9 @@
       }
     }
   }
+  @include m(top) {
+    flex-direction: column-reverse;
+  }
 }
 
 .slideInRight-transition,