feat(tree-select): add action slot (#1790)

* feat: add action slot * fix: can copy * Update src/tree-select/demos/enUS/action.demo.md * Update src/tree-select/demos/zhCN/action.demo.md Co-authored-by: yugang.cao <[email protected]> Co-authored-by: 07akioni <[email protected]>
tusen-ai · Dec 12, 2021 · 39a0608 · 39a0608
1 parent 577eda4
commit 39a0608
Show file tree

Hide file tree

Showing 9 changed files with 220 additions and 8 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -20,6 +20,7 @@
 ### Feats
 
 - `n-tree-select` add `menu-props` prop.
+- `n-tree-select` add `action` slot, closes [#1765](https://github.com/TuSimple/naive-ui/issues/1765).
 - `n-tree-select` add `empty` slot.
 - `n-cascader` add `empty` slot.
 - `n-popselect` add `action` slot.

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -20,6 +20,7 @@
 ### Feats
 
 - `n-tree-select` 新增 `menu-props` 属性
+- `n-tree-select` 新增 `action` slot, 关闭 [#1765](https://github.com/TuSimple/naive-ui/issues/1765)
 - `n-tree-select` 新增 `empty` slot
 - `n-cascader` 新增 `empty` slot
 - `n-popselect` 新增 `action` slot

diff --git a/src/tree-select/demos/enUS/action.demo.md b/src/tree-select/demos/enUS/action.demo.md
@@ -0,0 +1,91 @@
+# Action slot
+
+Maybe you need to use this slot in the tree selection menu.
+
+```html
+<n-tree-select
+  :options="options"
+  default-value="Drive My Car"
+  @update:value="handleUpdateValue"
+>
+  <template #action>You can customize some operations here.</template>
+</n-tree-select>
+```
+
+```js
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      handleUpdateValue (...args) {
+        console.log(...args)
+      },
+      options: [
+        {
+          label: 'Rubber Soul',
+          key: 'Rubber Soul',
+          children: [
+            {
+              label:
+                "Everybody's Got Something to Hide Except Me and My Monkey",
+              key: "Everybody's Got Something to Hide Except Me and My Monkey"
+            },
+            {
+              label: 'Drive My Car',
+              key: 'Drive My Car',
+              disabled: true
+            },
+            {
+              label: 'Norwegian Wood',
+              key: 'Norwegian Wood'
+            },
+            {
+              label: "You Won't See",
+              key: "You Won't See",
+              disabled: true
+            },
+            {
+              label: 'Nowhere Man',
+              key: 'Nowhere Man'
+            },
+            {
+              label: 'Think For Yourself',
+              key: 'Think For Yourself'
+            },
+            {
+              label: 'The Word',
+              key: 'The Word'
+            },
+            {
+              label: 'Michelle',
+              key: 'Michelle',
+              disabled: true
+            },
+            {
+              label: 'What goes on',
+              key: 'What goes on'
+            },
+            {
+              label: 'Girl',
+              key: 'Girl'
+            },
+            {
+              label: "I'm looking through you",
+              key: "I'm looking through you"
+            },
+            {
+              label: 'In My Life',
+              key: 'In My Life'
+            },
+            {
+              label: 'Wait',
+              key: 'Wait'
+            }
+          ]
+        }
+      ]
+    }
+  }
+})
+```
diff --git a/src/tree-select/demos/enUS/index.demo-entry.md b/src/tree-select/demos/enUS/index.demo-entry.md
@@ -11,6 +11,7 @@ multiple
 checkbox
 check-strategy
 filterable
+action
 debug
 ```
 
@@ -65,4 +66,5 @@ debug
 
 | Name   | Parameters | Description                            |
 | ------ | ---------- | -------------------------------------- |
-| empty  | `()`       | Empty state slot for the options menu. |
+| action | `()`       | Options menu slot.                     |
+| empty  | `()`       | Empty state slot for the options menu. |
diff --git a/src/tree-select/demos/zhCN/action.demo.md b/src/tree-select/demos/zhCN/action.demo.md
@@ -0,0 +1,91 @@
+# 操作插槽
+
+可能你需要在树型选择菜单里用这个插槽。
+
+```html
+<n-tree-select
+  :options="options"
+  default-value="Drive My Car"
+  @update:value="handleUpdateValue"
+>
+  <template #action>你可以在这里自定义一些操作</template>
+</n-tree-select>
+```
+
+```js
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      handleUpdateValue (...args) {
+        console.log(...args)
+      },
+      options: [
+        {
+          label: 'Rubber Soul',
+          key: 'Rubber Soul',
+          children: [
+            {
+              label:
+                "Everybody's Got Something to Hide Except Me and My Monkey",
+              key: "Everybody's Got Something to Hide Except Me and My Monkey"
+            },
+            {
+              label: 'Drive My Car',
+              key: 'Drive My Car',
+              disabled: true
+            },
+            {
+              label: 'Norwegian Wood',
+              key: 'Norwegian Wood'
+            },
+            {
+              label: "You Won't See",
+              key: "You Won't See",
+              disabled: true
+            },
+            {
+              label: 'Nowhere Man',
+              key: 'Nowhere Man'
+            },
+            {
+              label: 'Think For Yourself',
+              key: 'Think For Yourself'
+            },
+            {
+              label: 'The Word',
+              key: 'The Word'
+            },
+            {
+              label: 'Michelle',
+              key: 'Michelle',
+              disabled: true
+            },
+            {
+              label: 'What goes on',
+              key: 'What goes on'
+            },
+            {
+              label: 'Girl',
+              key: 'Girl'
+            },
+            {
+              label: "I'm looking through you",
+              key: "I'm looking through you"
+            },
+            {
+              label: 'In My Life',
+              key: 'In My Life'
+            },
+            {
+              label: 'Wait',
+              key: 'Wait'
+            }
+          ]
+        }
+      ]
+    }
+  }
+})
+```
diff --git a/src/tree-select/demos/zhCN/index.demo-entry.md b/src/tree-select/demos/zhCN/index.demo-entry.md
@@ -12,6 +12,7 @@ checkbox
 check-strategy
 filterable
 check-strategy-debug
+action
 debug
 ```
 
@@ -67,4 +68,5 @@ debug
 
 | 名称   | 参数 | 说明                |
 | ------ | ---- | ------------------- |
+| action | `()` | 菜单操作区域的 slot |
 | empty  | `()` | 菜单无数据时的 slot |
diff --git a/src/tree-select/src/TreeSelect.tsx b/src/tree-select/src/TreeSelect.tsx
@@ -25,6 +25,7 @@ import {
 import { useIsMounted, useMergedState } from 'vooks'
 import { clickoutside } from 'vdirs'
 import { createTreeMate, CheckStrategy } from 'treemate'
+import { happensIn } from 'seemly'
 import { Key, InternalTreeInst } from '../../tree/src/interface'
 import type { SelectBaseOption } from '../../select/src/interface'
 import { createTreeMateOptions, treeSharedProps } from '../../tree/src/Tree'
@@ -568,7 +569,7 @@ export default defineComponent({
     function handleMenuMousedown (e: MouseEvent): void {
       // If there's an action slot later, we need to check if mousedown happens
       // in action panel
-      e.preventDefault()
+      if (!happensIn(e, 'action')) e.preventDefault()
     }
     provide(treeSelectInjectionKey, {
       pendingNodeKeyRef
@@ -654,14 +655,17 @@ export default defineComponent({
       cssVars: computed(() => {
         const {
           common: { cubicBezierEaseInOut },
-          self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight }
+          self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight, actionPadding, actionDividerColor, actionTextColor }
         } = themeRef.value
         return {
           '--menu-box-shadow': menuBoxShadow,
           '--menu-border-radius': menuBorderRadius,
           '--menu-color': menuColor,
           '--menu-height': menuHeight,
-          '--bezier': cubicBezierEaseInOut
+          '--bezier': cubicBezierEaseInOut,
+          '--action-padding': actionPadding,
+          '--action-text-color': actionTextColor,
+          '--action-divider-color': actionDividerColor
         }
       }),
       mergedTheme: themeRef
@@ -816,6 +820,13 @@ export default defineComponent({
                                   ])}
                                 </div>
                               )}
+                              {$slots.action && (
+                                <div class={`${mergedClsPrefix}-tree-select-menu__action`} data-action>
+                                  {{
+                                    default: $slots.action
+                                  }}
+                                </div>
+                              )}
                               <NBaseFocusDetector onFocus={this.handleTabOut} />
                             </div>,
                             [[clickoutside, this.handleMenuClickoutside]]

diff --git a/src/tree-select/src/styles/index.cssr.ts b/src/tree-select/src/styles/index.cssr.ts
@@ -7,6 +7,9 @@ import { c, cB, cE } from '../../../_utils/cssr'
 // --menu-border-radius
 // --menu-box-shadow
 // --menu-color
+// --action-padding
+// --action-text-color
+// --action-divider-color
 export default c([
   cB('tree-select', `
     z-index: auto;
@@ -18,20 +21,27 @@ export default c([
     position: relative;
     overflow: hidden;
     margin: 4px 0;
-    max-height: var(--menu-height);
     transition: box-shadow .3s var(--bezier), background-color .3s var(--bezier);
     border-radius: var(--menu-border-radius);
     box-shadow: var(--menu-box-shadow);
     background-color: var(--menu-color);
     outline: none;
   `, [
-    cB('tree', 'max-height: inherit;'),
+    cB('tree', 'max-height: var(--menu-height);'),
     cE('empty', `
       display: flex;
       padding: 12px 32px;
       flex: 1;
       justify-content: center;
     `),
+    cE('action', `
+      padding: var(--action-padding);
+      transition: 
+        color .3s var(--bezier);
+        border-color .3s var(--bezier);
+      border-top: 1px solid var(--action-divider-color);
+      color: var(--action-text-color);
+    `),
     fadeInScaleUpTransition()
   ])
 ])
diff --git a/src/tree-select/styles/light.ts b/src/tree-select/styles/light.ts
@@ -6,13 +6,16 @@ import { emptyLight } from '../../empty/styles'
 import { internalSelectionLight } from '../../_internal/selection/styles'
 
 export const self = (vars: ThemeCommonVars) => {
-  const { popoverColor, boxShadow2, borderRadius, heightMedium } = vars
+  const { popoverColor, boxShadow2, borderRadius, heightMedium, dividerColor, textColor2 } = vars
   return {
     menuPadding: '4px',
     menuColor: popoverColor,
     menuBoxShadow: boxShadow2,
     menuBorderRadius: borderRadius,
-    menuHeight: `calc(${heightMedium} * 7.6)`
+    menuHeight: `calc(${heightMedium} * 7.6)`,
+    actionDividerColor: dividerColor,
+    actionTextColor: textColor2,
+    actionPadding: '8px 12px'
   }
 }