feat(TreeSelect): add item param to nav-text slot (#11641)

* feat(TreeSelect): add item param to nav-text slot

* chore: fix case name

packages/vant/src/text-ellipsis/README.md

@@ -2,7 +2,7 @@
 
 ### Intro
 
-Display ellipsis for long text and support for expanding or collapsing text.
+Display ellipsis for long text and support for expanding or collapsing text. Please upgrade to >= v4.1.0 before using this component.
 
 ### Install
 

packages/vant/src/text-ellipsis/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-对长文本进行省略，支持展开/收起。
+对长文本进行省略，支持展开/收起。请升级到 >= 4.1.0 版本来使用该组件。
 
 ### 引入
 

packages/vant/src/tree-select/README.md

@@ -210,10 +210,10 @@ export default {
 
 ### Slots
 
-| Name     | Description                    |
+| Name              | Description                    | SlotProps               |
-| -------- | ------------------------------ |
+| ----------------- | ------------------------------ | ----------------------- |
-| nav-text | Custom name of the parent node |
+| nav-text `v4.1.0` | Custom name of the parent node | _item: TreeSelectChild_ |
-| content  | Custom right content           |
+| content           | Custom right content           | -                       |
 
 ### Data Structure of TreeSelectItem
 

packages/vant/src/tree-select/README.zh-CN.md

@@ -218,10 +218,10 @@ export default {
 
 ### Slots
 
-| 名称     | 说明               |
+| 名称              | 说明               | 参数                    |
-| -------- | ------------------ |
+| ----------------- | ------------------ | ----------------------- |
-| nav-text | 自定义导航名称     |
+| nav-text `v4.1.0` | 自定义导航名称     | _item: TreeSelectChild_ |
-| content  | 自定义右侧区域内容 |
+| content           | 自定义右侧区域内容 | -                       |
 
 ### TreeSelectItem 数据结构
 

packages/vant/src/tree-select/TreeSelect.tsx

@@ -114,12 +114,14 @@ export default defineComponent({
       const Items = props.items.map((item) => (
         <SidebarItem
           dot={item.dot}
-          title={item.text}
           badge={item.badge}
           class={[bem('nav-item'), item.className]}
           disabled={item.disabled}
           onClick={onClickSidebarItem}
-          v-slots={{ title: slots['nav-text']?.() }}
+          v-slots={{
+            title: () =>
+              slots['nav-text'] ? slots['nav-text'](item) : item.text,
+          }}
         />
       ));
 

packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap

@@ -68,3 +68,37 @@ exports[`should render nav badge correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`should render nav-text slot correctly 1`] = `
+<div class="van-tree-select"
+     style="height: 300px;"
+>
+  <div role="tablist"
+       class="van-sidebar van-tree-select__nav"
+  >
+    <div role="tab"
+         class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+         tabindex="0"
+         aria-selected="true"
+    >
+      <div class="van-badge__wrapper van-sidebar-item__text">
+        Custom nav text, group1
+      </div>
+    </div>
+    <div role="tab"
+         class="van-sidebar-item van-tree-select__nav-item"
+         tabindex="0"
+         aria-selected="false"
+    >
+      <div class="van-badge__wrapper van-sidebar-item__text">
+        Custom nav text, group2
+      </div>
+    </div>
+  </div>
+  <div class="van-tree-select__content">
+    <div class="van-ellipsis van-tree-select__item">
+      city1
+    </div>
+  </div>
+</div>
+`;

packages/vant/src/tree-select/test/index.spec.tsx

@@ -247,3 +247,16 @@ test('should change selected icon when using selected-icon prop', () => {
 
   expect(wrapper.find('.van-tree-select__item').html()).toMatchSnapshot();
 });
+
+test('should render nav-text slot correctly', async () => {
+  const wrapper = mount(TreeSelect, {
+    props: {
+      items: mockItems,
+    },
+    slots: {
+      'nav-text': (item) => `Custom nav text, ${item.text}`,
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});