From 0547527f5b7aeeb89e0ba4ec254e5591caf31fd8 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 4 Mar 2023 15:47:39 +0800
Subject: [PATCH] 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 +-
 .../vant/src/text-ellipsis/README.zh-CN.md    |  2 +-
 packages/vant/src/tree-select/README.md       |  8 ++---
 packages/vant/src/tree-select/README.zh-CN.md |  8 ++---
 packages/vant/src/tree-select/TreeSelect.tsx  |  6 ++--
 .../test/__snapshots__/index.spec.tsx.snap    | 34 +++++++++++++++++++
 .../vant/src/tree-select/test/index.spec.tsx  | 13 +++++++
 7 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/packages/vant/src/text-ellipsis/README.md b/packages/vant/src/text-ellipsis/README.md
index 41815e8ad..b9ae40cc4 100644
--- a/packages/vant/src/text-ellipsis/README.md
+++ b/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
 
diff --git a/packages/vant/src/text-ellipsis/README.zh-CN.md b/packages/vant/src/text-ellipsis/README.zh-CN.md
index 968cbe53d..6c9842e65 100644
--- a/packages/vant/src/text-ellipsis/README.zh-CN.md
+++ b/packages/vant/src/text-ellipsis/README.zh-CN.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-对长文本进行省略，支持展开/收起。
+对长文本进行省略，支持展开/收起。请升级到 >= 4.1.0 版本来使用该组件。
 
 ### 引入
 
diff --git a/packages/vant/src/tree-select/README.md b/packages/vant/src/tree-select/README.md
index 69832f5a3..bdcbb92d3 100644
--- a/packages/vant/src/tree-select/README.md
+++ b/packages/vant/src/tree-select/README.md
@@ -210,10 +210,10 @@ export default {
 
 ### Slots
 
-| Name     | Description                    |
-| -------- | ------------------------------ |
-| nav-text | Custom name of the parent node |
-| content  | Custom right content           |
+| Name              | Description                    | SlotProps               |
+| ----------------- | ------------------------------ | ----------------------- |
+| nav-text `v4.1.0` | Custom name of the parent node | _item: TreeSelectChild_ |
+| content           | Custom right content           | -                       |
 
 ### Data Structure of TreeSelectItem
 
diff --git a/packages/vant/src/tree-select/README.zh-CN.md b/packages/vant/src/tree-select/README.zh-CN.md
index 71a648f2e..7b14f9076 100644
--- a/packages/vant/src/tree-select/README.zh-CN.md
+++ b/packages/vant/src/tree-select/README.zh-CN.md
@@ -218,10 +218,10 @@ export default {
 
 ### Slots
 
-| 名称     | 说明               |
-| -------- | ------------------ |
-| nav-text | 自定义导航名称     |
-| content  | 自定义右侧区域内容 |
+| 名称              | 说明               | 参数                    |
+| ----------------- | ------------------ | ----------------------- |
+| nav-text `v4.1.0` | 自定义导航名称     | _item: TreeSelectChild_ |
+| content           | 自定义右侧区域内容 | -                       |
 
 ### TreeSelectItem 数据结构
 
diff --git a/packages/vant/src/tree-select/TreeSelect.tsx b/packages/vant/src/tree-select/TreeSelect.tsx
index 1a38f4efc..3bff66ecd 100644
--- a/packages/vant/src/tree-select/TreeSelect.tsx
+++ b/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,
+          }}
         />
       ));
 
diff --git a/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap
index 8dc254c41..df4b62388 100644
--- a/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap
+++ b/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>
+`;
diff --git a/packages/vant/src/tree-select/test/index.spec.tsx b/packages/vant/src/tree-select/test/index.spec.tsx
index da4caf192..e26b34ec3 100644
--- a/packages/vant/src/tree-select/test/index.spec.tsx
+++ b/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();
+});