feat(tree): add ellipsis prop (#6817)

Author: shugen002

src/tree/demos/enUS/index.demo-entry.md

@@ -55,6 +55,7 @@ override-click-behavior.vue
 | expand-on-dragenter | `boolean` | `true` | Whether to expand nodes after dragenter. |  |
 | expand-on-click | `boolean` | `false` | Whether to expand or collapse nodes after click. | 2.29.1 |
 | expanded-keys | `Array<string \| number>` | `undefined` | If set, expanded status will work in controlled manner. |  |
+| ellipsis | `boolean` | `false` | Whether to ellipsis the text that exceeds the width. |  |
 | filter | `(pattern: string, node: TreeOption) => boolean` | A simple string based filter. | The function that filter tree nodes based on pattern. |  |
 | get-children | `(option: any) => unknown` | `undefined` | Get children of the option. | 2.34.3 |
 | indent | `number` | `24` | Indent of per level of the tree. | 2.9.0 |

src/tree/demos/zhCN/ellipsis.demo.vue

@@ -0,0 +1,55 @@
+<markdown>
+# 省略
+
+有时候节点的文本会很长，可以使用 `ellipsis` 来省略文本。
+</markdown>
+
+<script lang="ts">
+import type { TreeOption } from 'naive-ui'
+import { repeat } from 'seemly'
+import { defineComponent, ref } from 'vue'
+
+function createData(level = 4, baseKey = ''): TreeOption[] | undefined {
+  if (!level)
+    return undefined
+  return repeat(6 - level, undefined).map((_, index) => {
+    const key = `${baseKey}${level}${index}`
+    const label = createLabel(level)
+    return {
+      label,
+      key,
+      children: createData(level - 1, key)
+    }
+  })
+}
+
+function createLabel(level: number): string {
+  if (level === 4)
+    return '站在能分割世界的桥 还是看不清 在那些时刻 遮蔽我们 黑暗的心 究竟是什么'
+  if (level === 3)
+    return '住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪 你的心里 有没有一点点想念我'
+  if (level === 2)
+    return '站在能看到灯火的桥 还是看不清 在那些夜晚 照亮我们 黑暗的心 究竟是什么'
+  if (level === 1)
+    return '于是他默默追逐着 横渡海峡 年轻的人 看着他们 为了彼岸 骄傲的 骄傲的 灭亡'
+  return ''
+}
+
+export default defineComponent({
+  setup() {
+    return {
+      data: createData(),
+      defaultExpandedKeys: ref(['40', '41'])
+    }
+  }
+})
+</script>
+
+<template>
+  <n-tree
+    ellipsis
+    :data="data"
+    :default-expanded-keys="defaultExpandedKeys"
+    :selectable="false"
+  />
+</template>

src/tree/demos/zhCN/index.demo-entry.md

@@ -24,6 +24,7 @@ node-props.vue
 show-line.vue
 checkbox-placement.vue
 override-click-behavior.vue
+ellipsis.vue
 check-strategy-debug.vue
 change-debug.vue
 scrollbar-debug.vue
@@ -58,6 +59,7 @@ expand-debug.vue
 | default-expanded-keys | `Array<string \| number>` | `[]` | 默认展开项 |  |
 | default-selected-keys | `Array<string \| number>` | `[]` | 默认选中的节点 |  |
 | draggable | `boolean` | `false` | 是否可拖拽 |  |
+| ellipsis | `boolean` | `false` | 是否省略超出宽度的文本 |  |
 | expand-on-dragenter | `boolean` | `true` | 是否在拖入后展开节点 |  |
 | expand-on-click | `boolean` | `false` | 是否在点击节点后展开或收缩节点 | 2.29.1 |
 | expanded-keys | `Array<string \| number>` | `undefined` | 如果设定则展开受控 |  |

src/tree/src/Tree.tsx

@@ -274,6 +274,10 @@ export const treeProps = {
     type: Boolean,
     default: true
   },
+  ellipsis: {
+    type: Boolean,
+    default: false
+  },
   checkboxPlacement: {
     type: String as PropType<'left' | 'right'>,
     default: 'left'
@@ -1748,6 +1752,7 @@ export default defineComponent({
       blockLine,
       draggable,
       disabled,
+      ellipsis,
       internalFocusable,
       checkable,
       handleKeydown,
@@ -1762,7 +1767,8 @@ export default defineComponent({
       rtlEnabled && `${mergedClsPrefix}-tree--rtl`,
       checkable && `${mergedClsPrefix}-tree--checkable`,
       (blockLine || blockNode) && `${mergedClsPrefix}-tree--block-node`,
-      blockLine && `${mergedClsPrefix}-tree--block-line`
+      blockLine && `${mergedClsPrefix}-tree--block-line`,
+      ellipsis && `${mergedClsPrefix}-tree--ellipsis`
     ]
     const createNode = (tmNode: TmNode | MotionData): VNode => {
       return '__motion' in tmNode ? (

src/tree/src/styles/index.cssr.ts

@@ -127,6 +127,19 @@ export default cB('tree', `
       `)
     ])
   ]),
+  cM('ellipsis', [
+    cB('tree-node', [
+      cB('tree-node-content', `
+        overflow: hidden;
+      `, [
+        cE('text', `
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        `)
+      ])
+    ])
+  ]),
   cB('tree-node-indent', `
     flex-grow: 0;
     flex-shrink: 0;