feat(tree): add show-line prop (tusen-ai#4842)

* feat(n-tree): `n-tree` adds `show-line` prop * fix: docs error --------- Co-authored-by: lijiaheng <lijiaheng@semi-tech.com> Co-authored-by: 07akioni <07akioni2@gmail.com>
jahnli · Jun 12, 2023 · 9251ca5 · 9251ca5
1 parent 3ed6557
commit 9251ca5
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 8 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -24,7 +24,7 @@
 - `n-select` adds `focusInput` `blurInput` methods.
 - `n-tree-select` adds `focusInput` `blurInput` methods.
 - `n-image-group` adds `on-preview-prev` `on-preview-next` prop
-
+- `n-tree` adds `show-line` prop, closes [#3796](https://github.com/tusen-ai/naive-ui/issues/3796), [#4554](https://github.com/tusen-ai/naive-ui/pull/4554)
 
 ## 2.34.4
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -24,6 +24,7 @@
 - `n-select` 新增 `focusInput` `blurInput` 方法
 - `n-tree-select` 新增 `focusInput` `blurInput` 方法
 - `n-image-group` 新增 `on-preview-prev` `on-preview-next` 属性
+- `n-tree` 新增 `show-line` 属性，关闭 [#3796](https://github.com/tusen-ai/naive-ui/issues/3796)， [#4554](https://github.com/tusen-ai/naive-ui/issues/4554)
 
 ## 2.34.4
 

diff --git a/src/tree/demos/enUS/index.demo-entry.md b/src/tree/demos/enUS/index.demo-entry.md
@@ -21,6 +21,7 @@ batch-render.vue
 switcher-icon.vue
 file-tree.vue
 node-props.vue
+show-line.vue
 checkbox-placement.vue
 ```
 
@@ -72,6 +73,7 @@ checkbox-placement.vue
 | selectable | `boolean` | `true` | Whether the node can be selected. |  |
 | selected-keys | `Array<string \| number>` | `undefined` | If set, selected status will work in controlled manner. |  |
 | show-irrelevant-nodes | `boolean` | `true` | Whether to filter unmached nodes when tree is in filter mode. | 2.28.1 |
+| show-line | `boolean` | `true` | Whether to display the connection line. | NEXT_VERSION |
 | virtual-scroll | `boolean` | `false` | Whether to enable virtual scroll. You need to set proper style height of the tree in advance. |  |
 | watch-props | `Array<'defaultCheckedKeys' \| 'defaultSelectedKeys' \|'defaultExpandedKeys'>` | `undefined` | Default prop names that needed to be watched. Components will be updated after the prop is changed. Note: the `watch-props` itself is not reactive. |  |
 | on-dragend | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | The callback function after the node completes the dragging action. |  |

diff --git a/src/tree/demos/enUS/show-line.demo.vue b/src/tree/demos/enUS/show-line.demo.vue
@@ -0,0 +1,53 @@
+<markdown>
+  # Show Line
+  </markdown>
+
+<template>
+  <n-space vertical>
+    <n-switch v-model:value="showLine" />
+    <n-tree
+      :show-line="showLine"
+      :default-expanded-keys="defaultExpandedKeys"
+      :data="data"
+      checkable
+      expand-on-click
+      selectable
+    />
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { repeat } from 'seemly'
+import { TreeOption } from 'naive-ui'
+
+function createData (level = 4, baseKey = ''): TreeOption[] | undefined {
+  if (!level) return undefined
+  return repeat(6 - level, undefined).map((_, index) => {
+    const key = '' + baseKey + level + index
+    return {
+      label: createLabel(level),
+      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 {
+      showLine: ref(false),
+      data: createData(),
+      defaultExpandedKeys: ref(['40', '4030', '403020'])
+    }
+  }
+})
+</script>
diff --git a/src/tree/demos/zhCN/index.demo-entry.md b/src/tree/demos/zhCN/index.demo-entry.md
@@ -21,6 +21,7 @@ batch-render.vue
 switcher-icon.vue
 file-tree.vue
 node-props.vue
+show-line.vue
 checkbox-placement.vue
 check-strategy-debug.vue
 change-debug.vue
@@ -78,6 +79,7 @@ expand-debug.vue
 | selectable | `boolean` | `true` | 节点是否可以被选中 |  |
 | selected-keys | `Array<string \| number>` | `undefined` | 如果设定则 `selected` 状态受控 |  |
 | show-irrelevant-nodes | `boolean` | `true` | 是否在搜索状态显示和搜索无关的节点 | 2.28.1 |
+| show-line | `boolean` | `true` | 是否显示连接线 | NEXT_VERSION |
 | virtual-scroll | `boolean` | `false` | 是否启用虚拟滚动，启用前你需要设定好树的高度样式 |  |
 | watch-props | `Array<'defaultCheckedKeys' \| 'defaultSelectedKeys' \|'defaultExpandedKeys'>` | `undefined` | 需要检测变更的默认属性，检测后组件状态会更新。注意：`watch-props` 本身不是响应式的 |  |
 | on-dragend | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | 节点完成拖拽动作后的回调函数 |  |

diff --git a/src/tree/demos/zhCN/show-line.demo.vue b/src/tree/demos/zhCN/show-line.demo.vue
@@ -0,0 +1,53 @@
+<markdown>
+  # 连接线
+  </markdown>
+
+<template>
+  <n-space vertical>
+    <n-switch v-model:value="showLine" />
+    <n-tree
+      :show-line="showLine"
+      :default-expanded-keys="defaultExpandedKeys"
+      :data="data"
+      checkable
+      expand-on-click
+      selectable
+    />
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { repeat } from 'seemly'
+import { TreeOption } from 'naive-ui'
+
+function createData (level = 4, baseKey = ''): TreeOption[] | undefined {
+  if (!level) return undefined
+  return repeat(6 - level, undefined).map((_, index) => {
+    const key = '' + baseKey + level + index
+    return {
+      label: createLabel(level),
+      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 {
+      showLine: ref(false),
+      data: createData(),
+      defaultExpandedKeys: ref(['40', '4030', '403020'])
+    }
+  }
+})
+</script>
diff --git a/src/tree/src/Tree.tsx b/src/tree/src/Tree.tsx
@@ -237,6 +237,7 @@ export const treeProps = {
   draggable: Boolean,
   blockNode: Boolean,
   blockLine: Boolean,
+  showLine: Boolean,
   disabled: Boolean,
   checkedKeys: Array as PropType<Key[]>,
   defaultCheckedKeys: {
@@ -262,7 +263,7 @@ export const treeProps = {
   scrollbarProps: Object as PropType<ScrollbarProps>,
   indent: {
     type: Number,
-    default: 16
+    default: 24
   },
   allowDrop: {
     type: Function as PropType<AllowDrop>,
@@ -1625,6 +1626,7 @@ export default defineComponent({
       mergedClsPrefix,
       blockNode,
       blockLine,
+      showLine,
       draggable,
       disabled,
       internalFocusable,
@@ -1641,7 +1643,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`,
+      showLine && `${mergedClsPrefix}-tree--show-line`
     ]
     const createNode = (tmNode: TmNode | MotionData): VNode => {
       return '__motion' in tmNode ? (

diff --git a/src/tree/src/styles/index.cssr.ts b/src/tree/src/styles/index.cssr.ts
@@ -28,11 +28,6 @@ export default cB('tree', `
       })
     ])
   ]),
-  cB('tree-node-indent', `
-    flex-grow: 0;
-    flex-shrink: 0;
-    height: 0;
-  `),
   cB('tree-motion-wrapper', [
     cM('expand', [
       fadeInHeightExpandTransition({
@@ -137,6 +132,32 @@ export default cB('tree', `
       `)
     ])
   ]),
+  cM('show-line', [
+    cB('tree-node-indent', `
+      flex-grow: 0;
+      flex-shrink: 0;
+      position: relative
+    `, [
+      c('&::before', `
+        position: absolute;
+        left: 50%;
+        box-sizing: border-box;
+        border: 1px solid var(--n-border-color);
+        transform: translate(-50%);
+        content: "";
+        top: -5px;
+        bottom: -5px;
+      }
+    `)
+    ])
+  ]),
+  cNotM('show-line', [
+    cB('tree-node-indent', `
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: 0;
+  `)
+  ]),
   cB('tree-node-switcher', `
     cursor: pointer;
     display: inline-flex;