42 lines
1.9 KiB
Vue
42 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { Navigation } from '~/types/api';
|
|
|
|
interface Props {
|
|
link: Navigation;
|
|
project?: number;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const hasChildren = computed(() => {
|
|
return props.link && props.link.children && props.link.children.length > 0 || false;
|
|
});
|
|
|
|
const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.path));
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tree-item" v-if="project && !isNaN(project)">
|
|
<template v-if="hasChildren">
|
|
<div class="tree-item-self"
|
|
:class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }"
|
|
data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed"
|
|
:data-type="link.private ? 'privé' : undefined">
|
|
<div v-if="hasChildren" class="tree-item-icon collapse-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="svg-icon right-triangle">
|
|
<path d="M3 8L12 17L21 8"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="tree-item-inner">{{ link.title }}</div>
|
|
</div>
|
|
<div v-if="!collapsed" class="tree-item-children">
|
|
<NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
|
|
</div>
|
|
</template>
|
|
<NuxtLink v-else class="tree-item-self" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
|
|
:active-class="'mod-active'" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
|
|
<div class="tree-item-inner">{{ link.title }}</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</template> |