rayine-ui/docs/components/Toc.vue

<script setup lang="ts">
import { ref, computed } from "vue";

interface TocItem {
  id: string;
  depth: number;
  text: string;
  children?: TocItem[];
}

const props = defineProps<{
  toc: TocItem[];
  maxDepth?: number;
}>();

const maxDepth = props.maxDepth ?? 3;

const filteredToc = computed(() => {
  const filterByDepth = (items: TocItem[]): TocItem[] => {
    return items
      .filter(item => item.depth <= maxDepth)
      .map(item => ({
        ...item,
        children: item.children ? filterByDepth(item.children) : undefined,
      }));
  };

  return filterByDepth(props.toc);
});

const activeLinks = ref<string[]>([]);

onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          activeLinks.value.push(entry.target.id);
        } else {
          activeLinks.value = activeLinks.value.filter(link => link !== entry.target.id);
        }
      });
    },
    // { rootMargin: '0px 0px -80% 0px' }
  );

  filteredToc.value.forEach(item => {
    const element = document.getElementById(item.id);
    if (element) {
      observer.observe(element);
    }
    item.children?.forEach(child => {
      const childElement = document.getElementById(child.id);
      if (childElement) {
        observer.observe(childElement);
      }
    });
  });
});
</script>

<template>
  <ul>
    <template v-for="item in filteredToc" :key="item.id">
      <li>
        <NuxtLink :href="'#' + item.id" class="link" :class="{ 'active': activeLinks.includes(item.id) }">
          {{ item.text }}
        </NuxtLink>
        <ul v-if="item.children && item.children.length" class="ml-4">
          <template v-for="child in item.children" :key="child.id">
            <li>
              <NuxtLink :href="'#' + child.id" class="link" :class="{ 'active': activeLinks.includes(child.id) }">
                {{ child.text }}
              </NuxtLink>
            </li>
          </template>
        </ul>
      </li>
    </template>
  </ul>
</template>

<style scoped>
.link {
  @apply text-xs text-neutral-400 dark:text-neutral-500 font-medium;
}

.link.active {
  @apply text-primary;
}
</style>