feat(cascader): add not-found slot, closes #3862

tusen-ai · Oct 29, 2022 · ed88b91 · ed88b91
1 parent c962a2a
commit ed88b91
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 9 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -16,6 +16,7 @@
 - `n-cascader` adds `getCheckedKeys` method.
 - `n-cascader` adds `getIndeterminateKeys` method.
 - `n-input` adds `count-graphemes` prop, closes [#3967](https://github.com/tusen-ai/naive-ui/issues/3967).
+- `n-cascader` adds `not-found` slot, closes [#3862](https://github.com/tusen-ai/naive-ui/issues/3862).
 
 ### Fixes
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -16,6 +16,7 @@
 - `n-cascader` 新增 `getCheckedKeys` 方法
 - `n-cascader` 新增 `getIndeterminateKeys` 方法
 - `n-input` 新增 `count-graphemes` 属性，关闭 [#3967](https://github.com/tusen-ai/naive-ui/issues/3967)
+- `n-cascader` 新增 `not-found` slot，关闭 [#3862](https://github.com/tusen-ai/naive-ui/issues/3862)
 
 ### Fixes
 

diff --git a/src/cascader/demos/enUS/index.demo-entry.md b/src/cascader/demos/enUS/index.demo-entry.md
@@ -78,6 +78,7 @@ status.vue
 | action | `()` | Action content displayed in the cascading menu. |  |
 | arrow | `()` | Arrow content displayed in the cascading menu. | 2.32.2 |
 | empty | `()` | Empty state slot for the options cascading menu. | 2.22.0 |
+| not-found | `()` | Data not found slot when searching. | NEXT_VERSION |
 
 ### Cascader Methods
 

diff --git a/src/cascader/demos/zhCN/index.demo-entry.md b/src/cascader/demos/zhCN/index.demo-entry.md
@@ -74,11 +74,12 @@ default-value-debug.vue
 
 ### Cascader Slots
 
-| 名称   | 参数 | 描述                             | 版本   |
-| ------ | ---- | -------------------------------- | ------ |
-| action | `()` | 级联菜单中显示的 action 填充内容 |        |
-| arrow  | `()` | 箭头的 slot                      | 2.32.2 |
-| empty  | `()` | 级联菜单无数据时的 slot          | 2.22.0 |
+| 名称      | 参数 | 描述                             | 版本         |
+| --------- | ---- | -------------------------------- | ------------ |
+| action    | `()` | 级联菜单中显示的 action 填充内容 |              |
+| arrow     | `()` | 箭头的 slot                      | 2.32.2       |
+| empty     | `()` | 级联菜单无数据时的 slot          | 2.22.0       |
+| not-found | `()` | 搜索不到数据时候的 slot          | NEXT_VERSION |
 
 ### Cascader Methods
 

diff --git a/src/cascader/src/Cascader.tsx b/src/cascader/src/Cascader.tsx
@@ -172,7 +172,7 @@ export type CascaderProps = ExtractPublicPropTypes<typeof cascaderProps>
 export default defineComponent({
   name: 'Cascader',
   props: cascaderProps,
-  setup (props) {
+  setup (props, { slots }) {
     if (__DEV__) {
       watchEffect(() => {
         if (props.leafOnly) {
@@ -840,6 +840,7 @@ export default defineComponent({
       return false
     })
     provide(cascaderInjectionKey, {
+      slots,
       mergedClsPrefixRef,
       mergedThemeRef: themeRef,
       mergedValueRef,

diff --git a/src/cascader/src/CascaderSelectMenu.tsx b/src/cascader/src/CascaderSelectMenu.tsx
@@ -26,6 +26,7 @@ import {
   SelectMenuInstance,
   cascaderInjectionKey
 } from './interface'
+import { resolveSlot } from '../../_utils'
 
 export default defineComponent({
   name: 'NCascaderSelectMenu',
@@ -61,6 +62,7 @@ export default defineComponent({
       mergedClsPrefixRef,
       mergedThemeRef,
       mergedCheckStrategyRef,
+      slots: cascaderSlots,
       syncSelectMenuPosition,
       closeMenu,
       handleSelectMenuClickOutside,
@@ -169,11 +171,12 @@ export default defineComponent({
       handleResize,
       handleToggle,
       handleClickOutside,
+      cascaderSlots,
       ...exposedRef
     }
   },
   render () {
-    const { mergedClsPrefix, isMounted, mergedTheme } = this
+    const { mergedClsPrefix, isMounted, mergedTheme, cascaderSlots } = this
     return (
       <Transition name="fade-in-scale-up-transition" appear={isMounted}>
         {{
@@ -194,7 +197,12 @@ export default defineComponent({
                     multiple={this.multiple}
                     value={this.value}
                     onToggle={this.handleToggle}
-                  />,
+                  >
+                    {{
+                      empty: () =>
+                        resolveSlot(cascaderSlots['not-found'], () => [])
+                    }}
+                  </NInternalSelectMenu>,
                   [
                     [
                       clickoutside,

diff --git a/src/cascader/src/interface.ts b/src/cascader/src/interface.ts
@@ -2,7 +2,7 @@ import { CheckStrategy, TreeNode } from 'treemate'
 import type { MergedTheme } from '../../_mixins'
 import type { NLocale } from '../../locales'
 import type { CascaderTheme } from '../styles'
-import { Ref, VNodeChild } from 'vue'
+import { Ref, Slots, VNodeChild } from 'vue'
 import { createInjectionKey } from '../../_utils'
 
 export type ValueAtom = string | number
@@ -57,6 +57,7 @@ export type OnUpdateValueImpl = (
 export type MenuModel = TmNode[][]
 
 export interface CascaderInjection {
+  slots: Slots
   mergedClsPrefixRef: Ref<string>
   mergedThemeRef: Ref<MergedTheme<CascaderTheme>>
   mergedValueRef: Ref<Value | null>