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/swipe/README.md

@@ -161,8 +161,8 @@ export default {
 | Event | Description | Arguments |
 | --- | --- | --- |
 | change | Emitted when current swipe changed | _index: number_ |
-| drag-start `v4.0.9` | Emitted when user starts dragging the swipe | - |
-| drag-end `v4.0.9` | Emitted when user ends dragging the swipe | - |
+| drag-start `v4.0.9` | Emitted when user starts dragging the swipe | _{ index: number }_ |
+| drag-end `v4.0.9` | Emitted when user ends dragging the swipe | _{ index: number }_ |
 
 ### SwipeItem Events
 

packages/vant/src/swipe/README.zh-CN.md

@@ -166,11 +166,11 @@ export default {
 
 ### Swipe Events
 
-| 事件名              | 说明                         | 回调参数        |
-| ------------------- | ---------------------------- | --------------- |
-| change              | 每一页轮播结束后触发         | _index: number_ |
-| drag-start `v4.0.9` | 当用户开始拖动轮播组件时触发 | -               |
-| drag-end `v4.0.9`   | 当用户结束拖动轮播组件时触发 | -               |
+| 事件名              | 说明                         | 回调参数            |
+| ------------------- | ---------------------------- | ------------------- |
+| change              | 每一页轮播结束后触发         | _index: number_     |
+| drag-start `v4.0.9` | 当用户开始拖动轮播组件时触发 | _{ index: number }_ |
+| drag-end `v4.0.9`   | 当用户结束拖动轮播组件时触发 | _{ index: number }_ |
 
 ### SwipeItem Events
 

packages/vant/src/swipe/Swipe.tsx

@@ -333,7 +333,7 @@ export default defineComponent({
             move({ offset: delta.value });
 
             if (!dragging) {
-              emit('dragStart');
+              emit('dragStart', { index: activeIndicator.value });
               dragging = true;
             }
           }
@@ -377,7 +377,7 @@ export default defineComponent({
       dragging = false;
       state.swiping = false;
 
-      emit('dragEnd');
+      emit('dragEnd', { index: activeIndicator.value });
       autoplay();
     };
 

packages/vant/src/swipe/test/index.spec.jsx

@@ -350,9 +350,13 @@ test('should emit drag-start and drag-end events correctly', async () => {
 
   await triggerDrag(track, 100, 0);
   expect(dragStart).toHaveBeenCalledTimes(1);
+  expect(dragStart).toHaveBeenCalledWith({ index: 0 });
   expect(dragEnd).toHaveBeenCalledTimes(1);
+  expect(dragEnd).toHaveBeenCalledWith({ index: 1 });
 
   await triggerDrag(track, 100, 0);
   expect(dragStart).toHaveBeenCalledTimes(2);
+  expect(dragStart).toHaveBeenCalledWith({ index: 1 });
   expect(dragEnd).toHaveBeenCalledTimes(2);
+  expect(dragEnd).toHaveBeenCalledWith({ index: 0 });
 });

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,9 +210,10 @@ export default {
 
 ### Slots
 
-| Name    | Description          |
-| ------- | -------------------- |
-| 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
 

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

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

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

@@ -114,11 +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'] ? 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();
+});