fix(step): 兼容 title/description 空值样式 (#882)

components/steps/__tests__/step-882.spec.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import FSteps from '../steps';
+import FStep from '../step';
+
+describe('Step issue #882 - empty title/description', () => {
+    const mountComponent = (props = {}, stepSlots = {}) => {
+        return mount(FSteps, {
+            slots: {
+                default: () => [
+                    h(FStep, { ...props, ...stepSlots }),
+                ],
+            },
+        });
+    };
+
+    it('should NOT render .fes-step-title when title is empty string', () => {
+        const wrapper = mountComponent({ title: '' });
+        const titleEl = wrapper.findAll('.fes-step-title');
+        expect(titleEl.length).toBe(0);
+    });
+
+    it('should NOT render .fes-step-title when title is undefined', () => {
+        const wrapper = mountComponent({});
+        const titleEl = wrapper.findAll('.fes-step-title');
+        expect(titleEl.length).toBe(0);
+    });
+
+    it('should render .fes-step-title with correct text when title is provided', () => {
+        const wrapper = mountComponent({ title: 'Step 1' });
+        const titleEl = wrapper.find('.fes-step-title');
+        expect(titleEl.exists()).toBe(true);
+        expect(titleEl.text()).toBe('Step 1');
+    });
+
+    it('should NOT render .fes-step-title or .fes-step-description when both are empty', () => {
+        const wrapper = mountComponent({ title: '', description: '' });
+        const titleEl = wrapper.findAll('.fes-step-title');
+        const descEl = wrapper.findAll('.fes-step-description');
+        expect(titleEl.length).toBe(0);
+        expect(descEl.length).toBe(0);
+    });
+});

components/steps/step.tsx

@@ -158,18 +158,21 @@ export default defineComponent({
             <div ref={itemDomRef} class={classList.value} style={style.value}>
                 {renderSymbol()}
                 <div class={`${prefixCls}-content`}>
-                    <div class={`${prefixCls}-title`}>
-                        <span class={`${prefixCls}-text`} onClick={onClickStep}>
-                            {slots.title?.() || `${props.title}`}
-                        </span>
-                        {!parent.props.vertical && (
-                            <div class={`${prefixCls}-tail`}></div>
-                        )}
-                    </div>
-                    <div class={`${prefixCls}-description`}>
-                        {(slots.description || props.description)
-                        && (slots.description?.() || props.description)}
-                    </div>
+                    {(slots.title || props.title) && (
+                        <div class={`${prefixCls}-title`}>
+                            <span class={`${prefixCls}-text`} onClick={onClickStep}>
+                                {slots.title?.() ?? props.title}
+                            </span>
+                            {!parent.props.vertical && (
+                                <div class={`${prefixCls}-tail`}></div>
+                            )}
+                        </div>
+                    )}
+                    {(slots.description || props.description) && (
+                        <div class={`${prefixCls}-description`}>
+                            {slots.description?.() ?? props.description}
+                        </div>
+                    )}
                 </div>
             </div>
         );