56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
<template>
|
|
<TreeRoot v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm" :items="model" :get-key="(item) => item.link ?? item.label" :defaultExpanded="flatten(model)">
|
|
<TreeItem v-for="item in flattenItems" v-slot="{ isExpanded }" :key="item._id" :style="{ 'padding-left': `${item.level - 0.5}em` }" v-bind="item.bind" class="flex items-center px-2 outline-none relative cursor-pointer">
|
|
<NuxtLink :href="item.value.link && !item.hasChildren ? { name: 'explore-path', params: { path: item.value.link } } : undefined" no-prefetch class="flex flex-1 items-center border-light-35 dark:border-dark-35 hover:border-accent-blue" :class="{ 'border-s': !item.hasChildren, 'font-medium': item.hasChildren }" active-class="text-accent-blue border-s-2 !border-accent-blue">
|
|
<Icon v-if="item.hasChildren" icon="radix-icons:chevron-right" :class="{ 'rotate-90': isExpanded }" class="h-4 w-4 transition-transform absolute" :style="{ 'left': `${item.level - 1}em` }" />
|
|
<div class="pl-3 py-1 flex-1 truncate" :data-tag="item.value.tag">
|
|
{{ item.value.label }}
|
|
</div>
|
|
</NuxtLink>
|
|
</TreeItem>
|
|
</TreeRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
|
|
interface TreeItem
|
|
{
|
|
label: string
|
|
link?: string
|
|
tag?: string
|
|
open?: boolean
|
|
children?: TreeItem[]
|
|
}
|
|
const model = defineModel<TreeItem[]>();
|
|
|
|
function flatten(arr: TreeItem[]): string[]
|
|
{
|
|
return arr.filter(e => e.open).flatMap(e => [e?.link ?? e.label, ...flatten(e.children ?? [])]);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
[data-tag="canvas"]:after,
|
|
[data-tag="private"]:after
|
|
{
|
|
@apply text-sm;
|
|
@apply font-normal;
|
|
@apply float-end;
|
|
@apply border ;
|
|
@apply border-light-35 ;
|
|
@apply dark:border-dark-35;
|
|
@apply px-1;
|
|
@apply bg-light-20;
|
|
@apply dark:bg-dark-20;
|
|
font-variant: small-caps;
|
|
}
|
|
[data-tag="canvas"]:after
|
|
{
|
|
content: 'Canvas'
|
|
}
|
|
[data-tag="private"]:after
|
|
{
|
|
content: 'Privé'
|
|
}
|
|
</style> |