fix(space): fix redundant space render when using v-if (#4663)

* fix(space): 修复t-space在嵌套使用时，使用v-if隐藏会产生冗余空格的问题 * chore: update snapshot --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Oct 17, 2024 · 9611e6b · 9611e6b
1 parent aa94731
commit 9611e6b
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 12 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/space/_example/combination.vue b/src/space/_example/combination.vue
@@ -0,0 +1,18 @@
+<template>
+  <t-space direction="vertical">
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-button>Button</t-button>
+    <t-space>
+      <template v-if="true">
+        <t-button>Button</t-button>
+        <t-button>Button</t-button>
+        <t-button v-if="false">Button</t-button>
+        <t-button>Button</t-button>
+        <!-- <t-button v-if="false">Button</t-button> -->
+        <t-button v-if="true">Button</t-button>
+      </template>
+      <t-button>Button</t-button>
+    </t-space>
+  </t-space>
+</template>
diff --git a/src/space/space.tsx b/src/space/space.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, computed, CSSProperties, Fragment } from 'vue';
+import { defineComponent, computed, CSSProperties, Fragment, Comment, isVNode } from 'vue';
 import props from './props';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useTNodeJSX } from '../hooks/tnode';
@@ -57,16 +57,18 @@ export default defineComponent({
     function renderChildren() {
       const children = getChildSlots();
       const separatorContent = renderTNodeJSX('separator');
-      return children.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
+        .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 () => {

diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap
@@ -117827,6 +117827,198 @@ exports[`csr snapshot test > csr test ./src/space/_example/break-line.vue 1`] =
   <!---->
 
 
+</div>
+`;
+
+exports[`csr snapshot test > csr test ./src/space/_example/combination.vue 1`] = `
+<div
+  class="t-space t-space-vertical"
+  style="gap: 16px;"
+>
+
+
+  <div
+    class="t-space-item"
+  >
+    <button
+      class="t-button t-button--variant-base t-button--theme-primary"
+      href=""
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+
+        Button
+
+      </span>
+    </button>
+  </div>
+  <!---->
+
+
+  <div
+    class="t-space-item"
+  >
+    <button
+      class="t-button t-button--variant-base t-button--theme-primary"
+      href=""
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+
+        Button
+
+      </span>
+    </button>
+  </div>
+  <!---->
+
+
+  <div
+    class="t-space-item"
+  >
+    <button
+      class="t-button t-button--variant-base t-button--theme-primary"
+      href=""
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+
+        Button
+
+      </span>
+    </button>
+  </div>
+  <!---->
+
+
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-space t-space-horizontal"
+      style="gap: 16px;"
+    >
+
+
+      <div
+        class="t-space-item"
+      >
+        <button
+          class="t-button t-button--variant-base t-button--theme-primary"
+          href=""
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+
+            Button
+
+          </span>
+        </button>
+      </div>
+      <!---->
+
+
+      <div
+        class="t-space-item"
+      >
+        <button
+          class="t-button t-button--variant-base t-button--theme-primary"
+          href=""
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+
+            Button
+
+          </span>
+        </button>
+      </div>
+      <!---->
+
+
+      <div
+        class="t-space-item"
+      >
+        <button
+          class="t-button t-button--variant-base t-button--theme-primary"
+          href=""
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+
+            Button
+
+          </span>
+        </button>
+      </div>
+      <!---->
+
+
+      <div
+        class="t-space-item"
+      >
+        <button
+          class="t-button t-button--variant-base t-button--theme-primary"
+          href=""
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+
+            Button
+
+          </span>
+        </button>
+      </div>
+      <!---->
+
+
+      <div
+        class="t-space-item"
+      >
+        <button
+          class="t-button t-button--variant-base t-button--theme-primary"
+          href=""
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+
+            Button
+
+          </span>
+        </button>
+      </div>
+      <!---->
+
+
+    </div>
+  </div>
+  <!---->
+
+
 </div>
 `;
 

diff --git a/test/unit/snap/__snapshots__/ssr.test.js.snap b/test/unit/snap/__snapshots__/ssr.test.js.snap
@@ -956,6 +956,8 @@ exports[`ssr snapshot test > ssr test ./src/space/_example/base.vue 1`] = `"<div
 
 exports[`ssr snapshot test > ssr test ./src/space/_example/break-line.vue 1`] = `"<div class=\\"t-space t-space-horizontal t-space--break-line\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--]--></div>"`;
 
+exports[`ssr snapshot test > ssr test ./src/space/_example/combination.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--]--></div></div><!----><!--]--><!--]--></div>"`;
+
 exports[`ssr snapshot test > ssr test ./src/space/_example/separator.vue 1`] = `"<!--[--><div class=\\"t-space t-space-align-center t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-text t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Text<!--]--></span></button></div><div class=\\"t-space-item-separator\\"><!--[--><div class=\\"t-divider t-divider--vertical\\"><!----></div><!--]--></div><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-text t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Text<!--]--></span></button></div><div class=\\"t-space-item-separator\\"><!--[--><div class=\\"t-divider t-divider--vertical\\"><!----></div><!--]--></div><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-text t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Text<!--]--></span></button></div><!----><!--]--><!--]--></div><div class=\\"t-space t-space-align-center t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-text t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Text<!--]--></span></button></div><div class=\\"t-space-item-separator\\"><div class=\\"t-divider t-divider--vertical\\"><!----></div></div><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-text t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Text<!--]--></span></button></div><div class=\\"t-space-item-separator\\"><div class=\\"t-divider t-divider--vertical\\"><!----></div></div><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-text t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Text<!--]--></span></button></div><!----><!--]--><!--]--></div><!--]-->"`;
 
 exports[`ssr snapshot test > ssr test ./src/space/_example/size.vue 1`] = `"<div><div class=\\"t-slider__container\\"><div class=\\"t-slider\\" role=\\"slider\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\" aria-orientation=\\"horizontal\\" aria-disabled=\\"false\\"><div class=\\"t-slider__rail\\" style=\\"\\"><div class=\\"t-slider__track\\" style=\\"width:8%;left:0%;\\"></div><div class=\\"t-slider__button-wrapper\\" style=\\"left:8%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><!----><!----><!----></div></div><!----></div><br><div class=\\"t-space t-space-horizontal\\" style=\\"gap:8px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><button class=\\"t-button t-button--variant-base t-button--theme-primary\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[-->Button<!--]--></span></button></div><!----><!--]--><!--]--></div></div>"`;