oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20260720172840

Browse Source
This commit is contained in:
oneao committed 2026-07-20 17:28:47 +08:00
1 parent cda7f16d3a
commit 94207c77ff
3117 files changed
+201407 -1236
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/_semantic.md
+56
View File
@@ -0,0 +1,56 @@
# _semantic
## Source
```vue
<script setup lang="ts">
import { DownOutlined, FrownFilled, FrownOutlined, MehOutlined, SmileOutlined } from '@antdv-next/icons'
import { computed, h } from 'vue'
import { SemanticPreview } from '@/components/semantic'
import { useComponentLocale } from '@/composables/use-locale'
import { locales } from '../locales'
const { t } = useComponentLocale(locales)
const semantics = computed(() => [
{ name: 'root', desc: t('root'), version: '1.0.0' },
{ name: 'item', desc: t('item'), version: '1.0.0' },
{ name: 'itemIcon', desc: t('itemIcon'), version: '1.0.0' },
{ name: 'itemTitle', desc: t('itemTitle'), version: '1.0.0' },
{ name: 'itemSwitcher', desc: t('itemSwitcher'), version: '1.3.0' },
])
const treeData = [
{
title: 'parent 1',
key: '0-0',
icon: h(SmileOutlined),
children: [
{ title: 'leaf', key: '0-0-0', icon: h(MehOutlined) },
{ title: 'leaf', key: '0-0-1', icon: ({ selected }: { selected: boolean }) => selected ? h(FrownFilled) : h(FrownOutlined) },
],
},
]
</script>
<template>
<SemanticPreview
component-name="Tree"
:semantics="semantics"
>
<template #default="{ classes }">
<a-tree
show-icon
default-expand-all
:default-selected-keys="['0-0-0']"
:tree-data="treeData"
:classes="classes"
>
<template #switcherIcon>
<DownOutlined />
</template>
</a-tree>
</template>
</SemanticPreview>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/basic-controlled.md
+95
View File
@@ -0,0 +1,95 @@
# Controlled Tree
## Description (en-US)
Controlled mode lets parent nodes reflect the status of child nodes more intelligently.
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { ref } from 'vue'
const treeData: TreeDataNode[] = [
{
title: '0-0',
key: '0-0',
children: [
{
title: '0-0-0',
key: '0-0-0',
children: [
{ title: '0-0-0-0', key: '0-0-0-0' },
{ title: '0-0-0-1', key: '0-0-0-1' },
{ title: '0-0-0-2', key: '0-0-0-2' },
],
},
{
title: '0-0-1',
key: '0-0-1',
children: [
{ title: '0-0-1-0', key: '0-0-1-0' },
{ title: '0-0-1-1', key: '0-0-1-1' },
{ title: '0-0-1-2', key: '0-0-1-2' },
],
},
{
title: '0-0-2',
key: '0-0-2',
},
],
},
{
title: '0-1',
key: '0-1',
children: [
{ title: '0-1-0-0', key: '0-1-0-0' },
{ title: '0-1-0-1', key: '0-1-0-1' },
{ title: '0-1-0-2', key: '0-1-0-2' },
],
},
{
title: '0-2',
key: '0-2',
},
]
const expandedKeys = ref<(string | number)[]>(['0-0-0', '0-0-1'])
const checkedKeys = ref<(string | number)[]>(['0-0-0'])
const selectedKeys = ref<(string | number)[]>([])
const autoExpandParent = ref(true)
const onExpand: TreeEmits['expand'] = (expandedKeysValue) => {
console.log('onExpand', expandedKeysValue)
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
expandedKeys.value = expandedKeysValue
autoExpandParent.value = false
}
const onCheck: TreeEmits['check'] = (checkedKeysValue) => {
console.log('onCheck', checkedKeysValue)
checkedKeys.value = checkedKeysValue as (string | number)[]
}
const onSelect: TreeEmits['select'] = (selectedKeysValue, info) => {
console.log('onSelect', info)
selectedKeys.value = selectedKeysValue
}
</script>
<template>
<a-tree
checkable
:expanded-keys="expandedKeys"
:auto-expand-parent="autoExpandParent"
:checked-keys="checkedKeys"
:selected-keys="selectedKeys"
:tree-data="treeData"
@expand="onExpand"
@check="onCheck"
@select="onSelect"
/>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/basic.md
+72
View File
@@ -0,0 +1,72 @@
# Basic
## Description (en-US)
The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { ref } from 'vue'
const treeData: TreeDataNode[] = [
{
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
disabled: true,
children: [
{
title: 'leaf',
key: '0-0-0-0',
disableCheckbox: true,
},
{
title: 'leaf',
key: '0-0-0-1',
},
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [{ title: 'sss', key: '0-0-1-0' }],
},
],
},
]
const expandedKeys = ref(['0-0-0', '0-0-1'])
const selectedKeys = ref(['0-0-1'])
const checkedKeys = ref(['0-0-0', '0-0-1'])
const onSelect: TreeEmits['select'] = (selectedKeys, info) => {
console.log('selected', selectedKeys, info)
}
const onCheck: TreeEmits['check'] = (checkedKeys, info) => {
console.log('onCheck', checkedKeys, info)
}
</script>
<template>
<a-tree
v-model:expanded-keys="expandedKeys"
v-model:selected-keys="selectedKeys"
v-model:checked-keys="checkedKeys"
checkable
:tree-data="treeData"
@select="onSelect"
@check="onCheck"
>
<template #titleRender="{ key, title }">
<template v-if="key === '0-0-1-0'">
<span style="color: #1677ff">{{ title }}</span>
</template>
</template>
</a-tree>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/big-data.md
+36
View File
@@ -0,0 +1,36 @@
# Big data
## Description (en-US)
Plenty of tree nodes.
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode } from 'antdv-next'
const treeData: TreeDataNode[] = []
for (let i = 0; i < 100; i += 1) {
const children: TreeDataNode[] = []
for (let j = 0; j < 100; j += 1) {
children.push({
title: `child ${i}-${j}`,
key: `l-${i}-${j}`,
})
}
treeData.push({
title: `parent ${i}`,
key: `l-${i}`,
children,
})
}
</script>
<template>
<a-tree default-expand-all :height="400" :tree-data="treeData" />
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/block-node.md
+45
View File
@@ -0,0 +1,45 @@
# Block Node
## Description (en-US)
Make tree nodes fill the remaining horizontal space.
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode } from 'antdv-next'
import { ref } from 'vue'
const treeData: TreeDataNode[] = [
{
title: 'parent',
key: '0',
children: [
{
title: 'child 1',
key: '0-0',
disabled: true,
},
{
title: 'child 2',
key: '0-1',
disableCheckbox: true,
},
],
},
]
const selectedKeys = ref(['0-1'])
</script>
<template>
<a-tree
v-model:selected-keys="selectedKeys"
checkable
default-expand-all
:tree-data="treeData"
block-node
/>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/customized-icon.md
+44
View File
@@ -0,0 +1,44 @@
# Customize Icon
## Description (en-US)
You can customize icons for different nodes.
## Source
```vue
<script lang="ts" setup>
import type { TreeDataNode } from 'antdv-next'
import { DownOutlined, FrownFilled, FrownOutlined, MehOutlined, SmileOutlined } from '@antdv-next/icons'
import { h, ref } from 'vue'
const treeData: TreeDataNode[] = [
{
title: 'parent 1',
key: '0-0',
icon: h(SmileOutlined),
children: [
{
title: 'leaf',
key: '0-0-0',
icon: h(MehOutlined),
},
{
title: 'leaf',
key: '0-0-1',
icon: ({ selected }: TreeDataNode) => (selected ? h(FrownFilled) : h(FrownOutlined)),
},
],
},
]
const selectedKeys = ref(['0-0-0'])
</script>
<template>
<a-tree v-model:selected-keys="selectedKeys" show-icon default-expand-all :tree-data="treeData">
<template #switcherIcon>
<DownOutlined />
</template>
</a-tree>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/directory.md
+51
View File
@@ -0,0 +1,51 @@
# directory
## Description (en-US)
Built-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` selection.
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
const treeData: TreeDataNode[] = [
{
title: 'parent 0',
key: '0-0',
children: [
{ title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
{ title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
],
},
{
title: 'parent 1',
key: '0-1',
children: [
{ title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
{ title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
],
},
]
const onSelect: TreeEmits['select'] = (keys, info) => {
console.log('Trigger Select', keys, info)
}
const onExpand: TreeEmits['expand'] = (keys, info) => {
console.log('Trigger Expand', keys, info)
}
</script>
<template>
<a-directory-tree
multiple
draggable
default-expand-all
:tree-data="treeData"
@select="onSelect"
@expand="onExpand"
/>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/draggable.md
+122
View File
@@ -0,0 +1,122 @@
# draggable
## Description (en-US)
Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { ref } from 'vue'
type Key = string | number
const x = 3
const y = 2
const z = 1
const defaultData: TreeDataNode[] = []
function generateData(_level: number, _preKey?: Key, _tns?: TreeDataNode[]) {
const preKey = _preKey || '0'
const tns = _tns || defaultData
const children: Key[] = []
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`
tns.push({ title: key, key })
if (i < y) {
children.push(key)
}
}
if (_level < 0) {
return tns
}
const level = _level - 1
children.forEach((key, index) => {
tns[index!]!.children = []
return generateData(level, key, tns[index!]!.children)
})
}
generateData(z)
const gData = ref<TreeDataNode[]>(defaultData)
const expandedKeys = ref(['0-0', '0-0-0', '0-0-0-0'])
const onDragEnter: TreeEmits['dragEnter'] = (info) => {
console.log(info)
// expandedKeys, set it when controlled is needed
// expandedKeys.value = info.expandedKeys
}
const onDrop: TreeEmits['drop'] = (info) => {
console.log(info)
const dropKey = info.node.key
const dragKey = info.dragNode.key
const dropPos = info.node.pos.split('-')
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]) // the drop position relative to the drop node, inside 0, top -1, bottom 1
const loop = (
data: TreeDataNode[],
key: Key,
callback: (node: TreeDataNode, i: number, data: TreeDataNode[]) => void,
) => {
for (let i = 0; i < data.length; i++) {
if (data[i!]!.key === key) {
return callback(data[i!]!, i, data)
}
if (data[i!]!.children) {
loop(data[i!]!.children!, key, callback)
}
}
}
const data = [...gData.value]
// Find dragObject
let dragObj: TreeDataNode
loop(data, dragKey, (item, index, arr) => {
arr.splice(index, 1)
dragObj = item
})
if (!info.dropToGap) {
// Drop on the content
loop(data, dropKey, (item) => {
item.children = item.children || []
// where to insert. New item was inserted to the start of the array in this example, but can be anywhere
item.children.unshift(dragObj)
})
}
else {
let ar: TreeDataNode[] = []
let i: number
loop(data, dropKey, (_item, index, arr) => {
ar = arr
i = index
})
if (dropPosition === -1) {
// Drop on the top of the drop node
ar.splice(i!, 0, dragObj!)
}
else {
// Drop on the bottom of the drop node
ar.splice(i! + 1, 0, dragObj!)
}
}
gData.value = data
}
</script>
<template>
<a-tree
v-model:expanded-keys="expandedKeys"
class="draggable-tree"
draggable
block-node
:tree-data="gData"
@dragenter="onDragEnter"
@drop="onDrop"
/>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/dynamic.md
+63
View File
@@ -0,0 +1,63 @@
# load data asynchronously
## Description (en-US)
To load data asynchronously when click to expand a treeNode.
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeProps } from 'antdv-next'
import { ref } from 'vue'
type Key = string | number
const initTreeData: TreeDataNode[] = [
{ title: 'Expand to load', key: '0' },
{ title: 'Expand to load', key: '1' },
{ title: 'Tree Node', key: '2', isLeaf: true },
]
// It's just a simple demo. You can use tree map to optimize update perf.
function updateTreeData(list: TreeDataNode[], key: Key, children: TreeDataNode[]): TreeDataNode[] {
return list.map((node) => {
if (node.key === key) {
return {
...node,
children,
}
}
if (node.children) {
return {
...node,
children: updateTreeData(node.children, key, children),
}
}
return node
})
}
const treeData = ref<TreeDataNode[]>(initTreeData)
const loadData: TreeProps['loadData'] = ({ key, children }) =>
new Promise<void>((resolve) => {
if (children) {
resolve()
return
}
setTimeout(() => {
treeData.value = updateTreeData(treeData.value, key, [
{ title: 'Child Node', key: `${key}-0` },
{ title: 'Child Node', key: `${key}-1` },
])
resolve()
}, 1000)
})
</script>
<template>
<a-tree :load-data="loadData" :tree-data="treeData" />
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/line.md
+136
View File
@@ -0,0 +1,136 @@
# Tree with line
## Description (en-US)
Tree with connected line between nodes, turn on by `showLine`, customize the preset icon by `switcherIcon`.
## Source
```vue
<script lang="ts" setup>
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { CarryOutOutlined, CheckOutlined, FormOutlined } from '@antdv-next/icons'
import { h, ref } from 'vue'
const treeData: TreeDataNode[] = [
{
title: 'parent 1',
key: '0-0',
icon: h(CarryOutOutlined),
children: [
{
title: 'parent 1-0',
key: '0-0-0',
icon: h(CarryOutOutlined),
children: [
{ title: 'leaf', key: '0-0-0-0', icon: h(CarryOutOutlined) },
{
key: '0-0-0-1',
icon: h(CarryOutOutlined),
},
{ title: 'leaf', key: '0-0-0-2', icon: h(CarryOutOutlined) },
],
},
{
title: 'parent 1-1',
key: '0-0-1',
icon: h(CarryOutOutlined),
children: [{ title: 'leaf', key: '0-0-1-0', icon: h(CarryOutOutlined) }],
},
{
title: 'parent 1-2',
key: '0-0-2',
icon: h(CarryOutOutlined),
children: [
{ title: 'leaf', key: '0-0-2-0', icon: h(CarryOutOutlined) },
{
title: 'leaf',
key: '0-0-2-1',
icon: h(CarryOutOutlined),
switcherIcon: h(FormOutlined),
},
],
},
],
},
{
title: 'parent 2',
key: '0-1',
icon: h(CarryOutOutlined),
children: [
{
title: 'parent 2-0',
key: '0-1-0',
icon: h(CarryOutOutlined),
children: [
{ title: 'leaf', key: '0-1-0-0', icon: h(CarryOutOutlined) },
{ title: 'leaf', key: '0-1-0-1', icon: h(CarryOutOutlined) },
],
},
],
},
]
const showLine = ref(true)
const showIcon = ref(false)
const showLeafIcon = ref<boolean | ReturnType<typeof h>>(true)
const onSelect: TreeEmits['select'] = (selectedKeys, info) => {
console.log('selected', selectedKeys, info)
}
function handleLeafIconChange(value: 'true' | 'false' | 'custom') {
if (value === 'custom') {
showLeafIcon.value = h(CheckOutlined)
return
}
if (value === 'true') {
showLeafIcon.value = true
return
}
showLeafIcon.value = false
}
const expandedKeys = ref(['0-0-0'])
const leafSelectVal = ref('true')
</script>
<template>
<div>
<div class="mb-16px">
showLine: <a-switch v-model:checked="showLine" />
<br>
<br>
showIcon: <a-switch v-model:checked="showIcon" />
<br>
<br>
showLeafIcon:
<a-select
v-model:value="leafSelectVal"
:options="[
{ label: 'True', value: 'true' },
{ label: 'False', value: 'false' },
{ label: 'Custom icon', value: 'custom' },
]"
@change="handleLeafIconChange"
/>
</div>
<a-tree
v-model:expanded-keys="expandedKeys"
:show-line="showLine ? { showLeafIcon } : false"
:show-icon="showIcon"
:tree-data="treeData"
@select="onSelect"
>
<template #titleRender="{ key }">
<template v-if="key === '0-0-0-1'">
<div>multiple line title</div>
<div>multiple line title</div>
</template>
</template>
</a-tree>
</div>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/multiple-line.md
+75
View File
@@ -0,0 +1,75 @@
# Multiple lines
## Description (en-US)
Multiple line tree node.
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { ref } from 'vue'
const treeData: TreeDataNode[] = [
{
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
disabled: true,
children: [
{
title: 'This is a very very very very long text',
key: '0-0-0-0',
disableCheckbox: true,
},
{
title: 'This is also a very very very very very long text',
key: '0-0-0-1',
},
],
},
{
title: 'This is also a very very very very very long title',
key: '0-0-1',
children: [{ key: '0-0-1-0' }],
},
],
},
]
const expandedKeys = ref(['0-0-0', '0-0-1'])
const selectedKeys = ref(['0-0-1'])
const checkedKeys = ref(['0-0-0', '0-0-1'])
const onSelect: TreeEmits['select'] = (selectedKeys, info) => {
console.log('selected', selectedKeys, info)
}
const onCheck: TreeEmits['check'] = (checkedKeys, info) => {
console.log('onCheck', checkedKeys, info)
}
</script>
<template>
<a-tree
v-model:expanded-keys="expandedKeys"
v-model:selected-keys="selectedKeys"
v-model:checked-keys="checkedKeys"
checkable
:tree-data="treeData"
:style="{ width: '200px' }"
@select="onSelect"
@check="onCheck"
>
<template #titleRender="{ key }">
<template v-if="key === '0-0-1-0'">
<span style="color: #1677ff">sss</span>
</template>
</template>
</a-tree>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/search.md
+149
View File
@@ -0,0 +1,149 @@
# Searchable
## Description (en-US)
Searchable Tree.
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { computed, h, ref, watch } from 'vue'
type Key = string | number
const x = 3
const y = 2
const z = 1
const defaultData: TreeDataNode[] = []
function generateData(_level: number, _preKey?: Key, _tns?: TreeDataNode[]) {
const preKey = _preKey || '0'
const tns = _tns || defaultData
const children: Key[] = []
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`
tns.push({ title: key, key })
if (i < y) {
children.push(key)
}
}
if (_level < 0) {
return tns
}
const level = _level - 1
children.forEach((key, index) => {
tns[index!]!.children = []
return generateData(level, key, tns[index!]!.children)
})
}
generateData(z)
const dataList: { key: Key, title: string }[] = []
function generateList(data: TreeDataNode[]) {
for (let i = 0; i < data.length; i++) {
const node = data[i!]!
const { key } = node
dataList.push({ key, title: key as string })
if (node.children) {
generateList(node.children)
}
}
}
generateList(defaultData)
function getParentKey(key: Key, tree: TreeDataNode[]): Key {
let parentKey: Key
for (let i = 0; i < tree.length; i++) {
const node = tree[i!]!
if (node.children) {
if (node.children.some(item => item.key === key)) {
parentKey = node.key
}
else if (getParentKey(key, node.children)) {
parentKey = getParentKey(key, node.children)
}
}
}
return parentKey!
}
const expandedKeys = ref<Key[]>([])
const searchValue = ref('')
const autoExpandParent = ref(true)
const onExpand: TreeEmits['expand'] = (newExpandedKeys) => {
expandedKeys.value = newExpandedKeys
autoExpandParent.value = false
}
function onChange(value: string) {
const newExpandedKeys = dataList
.map((item) => {
if (item.title.includes(value)) {
return getParentKey(item.key, defaultData)
}
return null
})
.filter((item, i, self): item is Key => !!(item && self.indexOf(item) === i))
expandedKeys.value = newExpandedKeys
autoExpandParent.value = true
}
watch(searchValue, (value) => {
onChange(value)
})
const treeData = computed(() => {
const loop = (data: TreeDataNode[]): TreeDataNode[] =>
data.map((item) => {
const strTitle = item.title as string
const index = strTitle.indexOf(searchValue.value)
const beforeStr = strTitle.substring(0, index)
const afterStr = strTitle.slice(index + searchValue.value.length)
const title
= index > -1
? h('span', { key: item.key }, [
beforeStr,
h('span', { class: 'site-tree-search-value' }, searchValue.value),
afterStr,
])
: h('span', { key: item.key }, strTitle)
if (item.children) {
return { title, key: item.key, children: loop(item.children) }
}
return {
title,
key: item.key,
}
})
return loop(defaultData)
})
</script>
<template>
<div>
<a-input-search
v-model:value="searchValue"
class="mb-8px"
placeholder="Search"
/>
{{ expandedKeys }}
<a-tree
v-model:expanded-keys="expandedKeys"
:auto-expand-parent="autoExpandParent"
:tree-data="treeData"
@expand="onExpand"
/>
</div>
</template>
<style>
.site-tree-search-value {
color: #f50;
}
</style>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/style-class.md
+108
View File
@@ -0,0 +1,108 @@
# Custom semantic dom styling
## Description (en-US)
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeProps } from 'antdv-next'
import { ref } from 'vue'
const treeData: TreeDataNode[] = [
{
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
children: [
{
title: 'leaf',
key: '0-0-0-0',
},
{
title: 'leaf',
key: '0-0-0-1',
},
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [
{
title: 'leaf',
key: '0-0-1-0',
},
],
},
],
},
]
const styles: TreeProps['styles'] = {
root: { border: '2px solid #d9d9d9' },
item: { margin: '2px 0' },
}
const stylesFn: TreeProps['styles'] = (info) => {
if (!info.props.checkable) {
return {
root: {
border: `2px solid #E5D9F2`,
borderRadius: '4px',
},
}
}
return {}
}
const expandedKeys = ref(['0-0-0', '0-0-1'])
const selectedKeys = ref(['0-0-1'])
const checkedKeys = ref(['0-0-0', '0-0-1'])
const classes = {
root: 'root',
item: 'item',
itemTitle: 'itemTitle',
}
</script>
<template>
<a-flex vertical gap="middle">
<a-tree
:tree-data="treeData"
:classes="classes"
auto-expand-parent
checkable
:styles="styles"
/>
<a-tree
v-model:expanded-keys="expandedKeys"
v-model:selected-keys="selectedKeys"
v-model:checked-keys="checkedKeys"
:tree-data="treeData"
:classes="classes"
auto-expand-parent
:checkable="false"
:styles="stylesFn"
/>
</a-flex>
</template>
<style>
.root {
padding: 8px;
border-radius: 4px;
}
.item {
border-radius: 2px;
}
.itemTitle {
font-size: 14px;
}
</style>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/switcher-icon.md
+85
View File
@@ -0,0 +1,85 @@
# Customize collapse/expand icon
## Description (en-US)
customize collapse/expand icon of tree node
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'
import { ref } from 'vue'
const treeData: TreeDataNode[] = [
{
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
children: [
{
title: 'leaf',
key: '0-0-0-0',
},
{
title: 'leaf',
key: '0-0-0-1',
},
{
title: 'leaf',
key: '0-0-0-2',
},
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [
{
title: 'leaf',
key: '0-0-1-0',
},
],
},
{
title: 'parent 1-2',
key: '0-0-2',
children: [
{
title: 'leaf',
key: '0-0-2-0',
},
{
title: 'leaf',
key: '0-0-2-1',
},
],
},
],
},
]
const expandedKeys = ref(['0-0-0'])
const onSelect: TreeEmits['select'] = (selectedKeys, info) => {
console.log('selected', selectedKeys, info)
}
</script>
<template>
<a-tree
v-model:expanded-keys="expandedKeys"
show-line
:tree-data="treeData"
@select="onSelect"
>
<template #switcherIcon>
<DownOutlined />
</template>
</a-tree>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/demo/virtual-scroll.md
+47
View File
@@ -0,0 +1,47 @@
# Virtual scroll
## Description (en-US)
Use virtual list through `height` prop.
## Source
```vue
<script setup lang="ts">
import type { TreeDataNode } from 'antdv-next'
function dig(path = '0', level = 3) {
const list: TreeDataNode[] = []
for (let i = 0; i < 10; i += 1) {
const key = `${path}-${i}`
const treeNode: TreeDataNode = {
title: key,
key,
}
if (level > 0) {
treeNode.children = dig(key, level - 1)
}
list.push(treeNode)
}
return list
}
const treeData = dig()
</script>
<template>
<a-tree
:tree-data="treeData"
:height="233"
default-expand-all
>
<template #titleRender="{ title }">
<a-tooltip :title="title as any">
{{ title }}
</a-tooltip>
</template>
</a-tree>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/tree/docs.md
+136
View File
@@ -0,0 +1,136 @@
---
title: Tree
description: Multiple-level structure list.
---
## When To Use
Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The `Tree` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a `Tree`.
## Examples
## Demos
| Demo | Path |
| --- | --- |
| Basic | demo/basic.md |
| Controlled Tree | demo/basic-controlled.md |
| draggable | demo/draggable.md |
| load data asynchronously | demo/dynamic.md |
| Searchable | demo/search.md |
| Tree with line | demo/line.md |
| Customize Icon | demo/customized-icon.md |
| directory | demo/directory.md |
| Customize collapse/expand icon | demo/switcher-icon.md |
| Virtual scroll | demo/virtual-scroll.md |
| Block Node | demo/block-node.md |
| Big data | demo/big-data.md |
| Multiple lines | demo/multiple-line.md |
| Custom semantic dom styling | demo/style-class.md |
## API
Common props ref：[Common props](../../docs/vue/common-props.md)
### Tree
#### Props
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowDrop | Whether to allow dropping on the node | (&#123; dropNode, dropPosition &#125;) =&gt; boolean | - | - | × |
| autoExpandParent | Whether to automatically expand a parent treeNode | boolean | false | - | × |
| blockNode | Whether treeNode fill remaining horizontal space | boolean | false | - | × |
| checkable | Add a Checkbox before the treeNodes | boolean | false | - | × |
| checkedKeys | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other, support `v-model:checked-keys` | string[] \| &#123;checked: string[], halfChecked: string[]&#125; | [] | - | × |
| checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false | - | × |
| defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string[] | [] | - | × |
| defaultExpandAll | Whether to expand all treeNodes by default | boolean | false | - | × |
| defaultExpandedKeys | Specify the keys of the default expanded treeNodes | string[] | [] | - | × |
| defaultExpandParent | If auto expand parent treeNodes when init | boolean | true | - | × |
| defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string[] | [] | - | × |
| disabled | Whether the tree is disabled | boolean | false | - | × |
| draggable | Specifies whether this Tree or the node is draggable. Use `icon: false` to disable drag handler icon | boolean \| ((node: DataNode) =&gt; boolean) \| &#123; icon?: VueNode \| false, nodeDraggable?: (node: DataNode) =&gt; boolean &#125; | false | - | × |
| expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes, support `v-model:expanded-keys` | string[] | [] | - | × |
| fieldNames | Customize node title, key, children field name | object | &#123; title: `title`, key: `key`, children: `children` &#125; | - | × |
| filterAntTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - | - | × |
| height | Config virtual scroll height. Will not support horizontal scroll when enabled | number | - | - | × |
| icon | Insert a custom icon before the title. Need to set `showIcon` to true | VueNode \| (props) =&gt; VueNode | - | - | × |
| loadData | Load data asynchronously | function(node) | - | - | × |
| loadedKeys | (Controlled) Set loaded tree nodes. Need to work with `loadData` | string[] | [] | - | × |
| multiple | Allows selecting multiple treeNodes | boolean | false | - | × |
| rootStyle | Style on the root element | CSSProperties | - | - | × |
| selectable | Whether it can be selected | boolean | true | - | × |
| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes, multiple selection needs to set `multiple` to true, support `v-model:selected-keys` | string[] | - | - | × |
| showIcon | Controls whether to display the `icon` node (no default style) | boolean | false | - | × |
| showLine | Shows a connecting line | boolean \| &#123;showLeafIcon: VueNode \| ((props: AntTreeNodeProps) =&gt; VueNode)&#125; | false | - | × |
| switcherIcon | Customize expand/collapse icons for tree nodes (With default rotate angular style) | VueNode \| ((props: AntTreeNodeProps) =&gt; VueNode) | - | - | × |
| switcherLoadingIcon | Customize loading icons for tree nodes | VueNode | - | - | × |
| titleRender | Customize tree node title render | (nodeData) =&gt; VueNode | - | - | × |
| treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array&lt;&#123; key, title, children, [disabled, selectable] &#125;&gt; | - | - | × |
| virtual | Disable virtual scroll when set to false | boolean | true | - | × |
#### Events
| Event | Description | Type | Version |
| --- | --- | --- | --- |
| check | Callback function for when the onCheck event occurs | function(checkedKeys, e:&#123;checked: boolean, checkedNodes, node, event, halfCheckedKeys&#125;) | - |
| dragEnd | Callback function for when the onDragEnd event occurs | function(&#123;event, node&#125;) | - |
| dragEnter | Callback function for when the onDragEnter event occurs | function(&#123;event, node, expandedKeys&#125;) | - |
| dragLeave | Callback function for when the onDragLeave event occurs | function(&#123;event, node&#125;) | - |
| dragOver | Callback function for when the onDragOver event occurs | function(&#123;event, node&#125;) | - |
| dragStart | Callback function for when the onDragStart event occurs | function(&#123;event, node&#125;) | - |
| drop | Callback function for when the onDrop event occurs | function(&#123;event, node, dragNode, dragNodesKeys&#125;) | - |
| expand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, &#123;expanded: boolean, node&#125;) | - |
| load | Callback function for when a treeNode is loaded | function(loadedKeys, &#123;event, node&#125;) | - |
| rightClick | Callback function for when the user right clicks a treeNode | function(&#123;event, node&#125;) | - |
| select | Callback function for when the user clicks a treeNode | function(selectedKeys, e:&#123;selected: boolean, selectedNodes, node, event&#125;) | - |
#### Slots
| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| switcherLoadingIcon | Customize loading icons for tree nodes | () =&gt; any | - |
| switcherIcon | Customize expand/collapse icons for tree nodes | (props: AntTreeNodeProps) =&gt; any | - |
| draggableIcon | Custom draggable icon | () =&gt; any | - |
| icon | Insert a custom icon before the title | (props: AntdTreeNodeAttribute) =&gt; any | - |
| titleRender | Customize tree node title render | VcTreeProps['titleRender'] | - |
#### Methods
| Name | Description |
| --- | --- |
| scrollTo(&#123; key: Key, align?: 'top' \| 'bottom' \| 'auto', offset?: number &#125;) | Scroll to key item in virtual scroll |
### TreeNode
#### Props
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | - |
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | - |
| disabled | Disables the treeNode | boolean | false | - |
| icon | Customize icon. When you pass component, whose render will receive full TreeNode props as component props | VueNode \| (props) =&gt; VueNode | - | - |
| isLeaf | Determines if this is a leaf node (effective when `loadData` is specified). `false` will force the TreeNode to be treated as a parent node | boolean | - | - |
| key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree | string | (internal calculated position of treeNode) | - |
| selectable | Set whether the treeNode can be selected | boolean | true | - |
| title | Title | VueNode | `---` | - |
### DirectoryTree
#### Props
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| expandAction | Directory opening logic, options: false \| `click` \| `doubleClick` | string \| boolean | `click` |
## Semantic DOM
| _semantic | demo/_semantic.md |
## FAQ
### Why defaultExpandAll not working on ajax data?
`default` prefix props only work when initializing. So `defaultExpandAll` has already been executed when ajax loads data. You can control `expandedKeys` or render the Tree when data is loaded to realize expanding all nodes.
### Virtual scroll limitation
Virtual scroll only render items in visible region. Thus not support auto width (like long `title` with horizontal scroll).
### What does `disabled` node work logic in the tree?
Tree change its data by conduction. Includes checked or auto expanded, it will conduction state to parent / children node until current node is `disabled`. So if a controlled node is `disabled`, it will only modify self state and not affect other nodes. For example, a parent node contains 3 child nodes and one of them is `disabled`. When check the parent node, it will only check rest 2 child nodes. As the same, when check these 2 child node, parent will be checked whatever checked state the `disabled` one is.
This conduction logic prevents modifying `disabled` parent checked state by checking children nodes, and users cannot modify directly with click which avoids interactive conflicts. If you want to modify this conduction logic, you can customize it with the `checkStrictly` prop.
code/fms/.codebuddy/skills/antdv-next/references/components/tree/token.md
+34
View File
@@ -0,0 +1,34 @@
# tree Token
Use these variables through `theme.components.Tree`. This document lists definitions only and does not include values.
```vue
<a-config-provider
:theme="{
token: {
// Global token configuration
},
components: {
Tree: {
// Token name: value
},
},
}"
>
...
</a-config-provider>
```
## Token List
| Token | Type | Description |
| --- | --- | --- |
| `directoryNodeSelectedColor` | `string` | Text color of selected directory node |
| `directoryNodeSelectedBg` | `string` | Background color of selected directory node |
| `titleHeight` | `number` | Node title height |
| `switcherSize` | `number \| undefined` | Switcher width of tree |
| `indentSize` | `number \| undefined` | Indent width of tree |
| `nodeHoverBg` | `string` | Background color of hovered node |
| `nodeHoverColor` | `string` | Text color of hovered node |
| `nodeSelectedBg` | `string` | Background color of selected node |
| `nodeSelectedColor` | `string` | Text color of selected node |