94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
<script setup>
|
||
import { useTreeState } from '~/composables/useTreeState'
|
||
|
||
defineProps({ nodes: Array, depth: { type: Number, default: 0 } })
|
||
|
||
const router = useRouter()
|
||
const { collapsed } = useTreeState() // ← shared state, not local ref
|
||
|
||
function getTitle(node) {
|
||
if (node.title === 'index') return 'Index'
|
||
return node.title || node._path?.split('/').pop() || 'Home'
|
||
}
|
||
|
||
function navigate(path) {
|
||
if (!path) return
|
||
router.push(path)
|
||
}
|
||
|
||
function toggle(key) {
|
||
collapsed.value[key] = !collapsed.value[key]
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<ul :style="{ paddingLeft: depth ? '1rem' : '0' }">
|
||
<li v-for="node in nodes" :key="node.path ?? node.title">
|
||
|
||
<template v-if="!node.children?.length">
|
||
<a v-if="node.path" :href="node.path" @click.prevent="navigate(node.path)">
|
||
{{ getTitle(node) }}
|
||
</a>
|
||
<span v-else>{{ getTitle(node) }}</span>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<button class="folder-toggle" @click="toggle(node.path ?? node.title)">
|
||
<span class="chevron" :class="{ open: !collapsed[node.path ?? node.title] }">›</span>
|
||
{{ getTitle(node) }}
|
||
</button>
|
||
<TreeNode
|
||
v-if="!collapsed[node.path ?? node.title]"
|
||
:nodes="node.children"
|
||
:depth="depth + 1"
|
||
/>
|
||
</template>
|
||
|
||
</li>
|
||
</ul>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
ul {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
}
|
||
|
||
li {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
a {
|
||
color: var(--text-link);
|
||
}
|
||
|
||
.folder-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
background: none;
|
||
border: none;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
color: inherit;
|
||
font: inherit;
|
||
width: 100%;
|
||
text-align: left;
|
||
|
||
&:hover {
|
||
color: var(--text-link);
|
||
}
|
||
}
|
||
|
||
.chevron {
|
||
display: inline-block;
|
||
font-style: normal;
|
||
transition: transform 0.15s ease;
|
||
transform: rotate(0deg);
|
||
line-height: 1;
|
||
|
||
&.open {
|
||
transform: rotate(90deg);
|
||
}
|
||
}
|
||
</style> |