c5ec8ccd32
- Add level prop to track node hierarchy - Fix indentation calculation for leaves and nodes - Simplify alignment logic based on node level
56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { TreeItem } from './type'
|
|
import Leaf from './leaf.vue'
|
|
import TreeNode from './tree-node.vue'
|
|
|
|
const props = defineProps<{
|
|
data: TreeItem[]
|
|
selectedValue?: string
|
|
onFetchChildren: (parentId: string) => Promise<void>
|
|
level?: number
|
|
}>()
|
|
|
|
const emit = defineEmits(['select'])
|
|
|
|
function handleSelect(value: string) {
|
|
emit('select', value)
|
|
}
|
|
|
|
// Computed untuk mendeteksi apakah ada node dengan children dalam level ini
|
|
const hasAnyChildrenInLevel = computed(() => {
|
|
return props.data.some(item => item.hasChildren)
|
|
})
|
|
|
|
// Computed untuk menentukan apakah perlu alignment berdasarkan level
|
|
const shouldAlignLeaves = computed(() => {
|
|
// Di root level (level 0), selalu align leaf dengan tree nodes jika ada mixed content
|
|
// Di level lain, hanya align jika ada mixed content
|
|
const isRootLevel = (props.level || 0) === 0
|
|
const hasMixedContent = hasAnyChildrenInLevel.value && props.data.some(item => !item.hasChildren)
|
|
|
|
return isRootLevel ? hasAnyChildrenInLevel.value : hasMixedContent
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tree-view min-w-max">
|
|
<template v-for="item in data" :key="item.value">
|
|
<TreeNode
|
|
v-if="item.hasChildren"
|
|
:item="item"
|
|
:selected-value="selectedValue"
|
|
:on-fetch-children="onFetchChildren"
|
|
:level="level || 0"
|
|
@select="handleSelect"
|
|
/>
|
|
<Leaf
|
|
v-else
|
|
:item="item"
|
|
:selected-value="selectedValue"
|
|
:should-align="shouldAlignLeaves"
|
|
@select="handleSelect"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|