From 0c6718de652a8eb7a8a14b3f6273f28c36ce5e21 Mon Sep 17 00:00:00 2001
From: Yugang Cao <34439652+Talljack@users.noreply.github.com>
Date: Mon, 13 Dec 2021 02:01:48 +0800
Subject: [PATCH] feat(tree-select): add empty slot (#1807)

Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>
Co-authored-by: 07akioni <07akioni2@gmail.com>
---
 CHANGELOG.en-US.md                            |  1 +
 CHANGELOG.zh-CN.md                            |  1 +
 .../demos/enUS/index.demo-entry.md            |  6 ++++++
 .../demos/zhCN/index.demo-entry.md            |  6 ++++++
 src/tree-select/src/TreeSelect.tsx            | 19 +++++++++++--------
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 3000c2ac6ca..4beae4d5c8d 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -18,6 +18,7 @@
 ### Feats
 
 - `n-tree-select` add `menu-props` prop.
+- `n-tree-select` add `empty` slot.
 - `n-cascader` add `empty` slot.
 - `n-popselect` add `action` slot.
 - `n-popselect` add `empty` slot.
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 326c9e6a073..438392d61e4 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -18,6 +18,7 @@
 ### Feats
 
 - `n-tree-select` 新增 `menu-props` 属性
+- `n-tree-select` 新增 `empty` slot
 - `n-cascader` 新增 `empty` slot
 - `n-popselect` 新增 `action` slot
 - `n-popselect` 新增 `empty` slot
diff --git a/src/tree-select/demos/enUS/index.demo-entry.md b/src/tree-select/demos/enUS/index.demo-entry.md
index 7e40099f18d..c0084befa49 100644
--- a/src/tree-select/demos/enUS/index.demo-entry.md
+++ b/src/tree-select/demos/enUS/index.demo-entry.md
@@ -60,3 +60,9 @@ debug
 | label | `string` | Displayed content of the option. The field used can be set using `label-field`. |
 | children? | `TreeSelectOption[]` | Child options of the option. The field used can be set using `children-field` |
 | disabled? | `boolean` | Option disabled state. |
+
+### TreeSelect Slots
+
+| Name   | Parameters | Description                            |
+| ------ | ---------- | -------------------------------------- |
+| empty  | `()`       | Empty state slot for the options menu. |
\ No newline at end of file
diff --git a/src/tree-select/demos/zhCN/index.demo-entry.md b/src/tree-select/demos/zhCN/index.demo-entry.md
index 0544bd85745..7cddd394530 100644
--- a/src/tree-select/demos/zhCN/index.demo-entry.md
+++ b/src/tree-select/demos/zhCN/index.demo-entry.md
@@ -62,3 +62,9 @@ debug
 | label | `string` | 选项的显示内容，可使用 `label-field` 修改字段名 |
 | children? | `TreeSelectOption[]` | 节点的子选项 |
 | disabled? | `boolean` | 是否禁用选项 |
+
+### TreeSelect Slots
+
+| 名称   | 参数 | 说明                |
+| ------ | ---- | ------------------- |
+| empty  | `()` | 菜单无数据时的 slot |
diff --git a/src/tree-select/src/TreeSelect.tsx b/src/tree-select/src/TreeSelect.tsx
index f9aae449017..64a6ddf4caf 100644
--- a/src/tree-select/src/TreeSelect.tsx
+++ b/src/tree-select/src/TreeSelect.tsx
@@ -12,7 +12,8 @@ import {
   watch,
   nextTick,
   watchEffect,
-  HTMLAttributes
+  HTMLAttributes,
+  renderSlot
 } from 'vue'
 import {
   FollowerPlacement,
@@ -667,7 +668,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedTheme, mergedClsPrefix } = this
+    const { mergedTheme, mergedClsPrefix, $slots } = this
     return (
       <div class={`${mergedClsPrefix}-tree-select`}>
         <VBinder>
@@ -805,12 +806,14 @@ export default defineComponent({
                                 <div
                                   class={`${mergedClsPrefix}-tree-select-menu__empty`}
                                 >
-                                  <NEmpty
-                                    theme={mergedTheme.peers.Empty}
-                                    themeOverrides={
-                                      mergedTheme.peerOverrides.Empty
-                                    }
-                                  />
+                                  {renderSlot($slots, 'empty', undefined, () => [
+                                    <NEmpty
+                                      theme={mergedTheme.peers.Empty}
+                                      themeOverrides={
+                                        mergedTheme.peerOverrides.Empty
+                                      }
+                                    />
+                                  ])}
                                 </div>
                               )}
                               <NBaseFocusDetector onFocus={this.handleTabOut} />