fix(space): fix fragment virtual node has not been expanded (#5388)

* feat(hooks): add useFlatChildrenSlots hook for recursive slot flattening

* fix(space): replace useChildSlots with useFlatChildrenSlots for improved slot handling

* chore: update snapshot

* fix(space): handle Teleport nodes in renderChildren to prevent rendering issues

ref #5296

* fix(space): refactor child slot handling to improve clarity and functionality

* fix(upload): remove unnecessary t-space-item divs from snapshots for cleaner output

* fix(slot): refine documentation for useFlatChildrenSlots function

* chore: stash changelog [ci skip]

* chore: stash changelog [ci skip]

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: wū yāng <[email protected]>
Co-authored-by: tdesign-bot <[email protected]>
Co-authored-by: Wesley <[email protected]>

Author: 5 people

packages/components/hooks/slot.ts

@@ -9,6 +9,7 @@ import {
   VNodeArrayChildren,
   RendererElement,
   VNodeChild,
+  isVNode,
 } from 'vue';
 import { isArray } from 'lodash-es';
 import { getChildren } from '../utils/render-tnode';
@@ -73,3 +74,25 @@ export function useChildSlots(): () => (
       .flat();
   };
 }
+
+/**
+ * 递归展开所有 Fragment，并跳过 Comment 节点，返回一维 VNodeChild 数组
+ * @example const useFlatChildrenSlots = useFlatChildrenSlotsHook()
+ * @example useFlatChildrenSlots(children)
+ */
+export function useFlatChildrenSlots() {
+  function getFlatChildren(children: VNodeChild[]): VNodeChild[] {
+    const result: VNodeChild[] = [];
+    children.forEach((child) => {
+      if (isVNode(child) && child.type === Fragment && Array.isArray(child.children)) {
+        result.push(...getFlatChildren(child.children as VNodeChild[]));
+      } else if (isVNode(child) && child.type === Comment) {
+        // skip comment
+      } else {
+        result.push(child);
+      }
+    });
+    return result;
+  }
+  return getFlatChildren;
+}

packages/components/space/space.tsx

@@ -1,8 +1,8 @@
-import { defineComponent, computed, CSSProperties, Fragment, Comment, isVNode } from 'vue';
+import { defineComponent, computed, CSSProperties, Fragment, isVNode, Teleport } from 'vue';
 import props from './props';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useTNodeJSX } from '../hooks/tnode';
-import { useChildSlots } from '../hooks/slot';
+import { useChildSlots, useFlatChildrenSlots } from '../hooks/slot';
 import { isNumber } from 'lodash-es';
 import { isString } from 'lodash-es';
 import { isArray } from 'lodash-es';
@@ -23,6 +23,7 @@ export default defineComponent({
     const COMPONENT_NAME = usePrefixClass('space');
     const renderTNodeJSX = useTNodeJSX();
     const getChildSlots = useChildSlots();
+    const getFlatChildren = useFlatChildrenSlots();
 
     const needPolyfill = computed(() => props.forceFlexGapPolyfill || defaultNeedPolyfill);
 
@@ -52,22 +53,21 @@ export default defineComponent({
       }
       return style;
     });
-
     function renderChildren() {
-      const children = getChildSlots();
+      const children = getFlatChildren(getChildSlots());
       const separatorContent = renderTNodeJSX('separator');
-      return children
-        .filter((child) => (isVNode(child) ? child.type !== Comment : true))
-        .map((child, index) => {
-          // filter last child
-          const showSeparator = index + 1 !== children.length && separatorContent;
-          return (
-            <Fragment>
-              <div class={`${COMPONENT_NAME.value}-item`}>{child}</div>
-              {showSeparator && <div class={`${COMPONENT_NAME.value}-item-separator`}>{separatorContent}</div>}
-            </Fragment>
-          );
-        });
+      return children.map((child, index) => {
+        const isTeleport = isVNode(child) && child.type === Teleport;
+        if (isTeleport) return null;
+        // filter last child
+        const showSeparator = index + 1 !== children.length && separatorContent;
+        return (
+          <Fragment>
+            <div class={`${COMPONENT_NAME.value}-item`}>{child}</div>
+            {showSeparator && <div class={`${COMPONENT_NAME.value}-item-separator`}>{separatorContent}</div>}
+          </Fragment>
+        );
+      });
     }
 
     return () => {

packages/tdesign-vue-next/.changelog/pr-5388.md

@@ -0,0 +1,7 @@
+---
+pr_number: 5388
+contributor: QuentinHsu
+---
+
+- fix(Space): 修复`fragment`虚拟节点未展开的问题 @QuentinHsu ([#5388](https://github.com/Tencent/tdesign-vue-next/pull/5388))
+- fix(Space): 修复`teleport`结构意外渲染为`SpaceItem`节点，导致额外占用间距的问题 @QuentinHsu ([#5388](https://github.com/Tencent/tdesign-vue-next/pull/5388))