Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add ScrollArea to TableOfContent.vue (#351)

Browse Source
This commit is contained in:
Michael Krebs 2024-02-20 07:09:22 +01:00 committed by GitHub
parent 48f3ee050f
commit 2d22ef1878
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/www/.vitepress/theme/components/TableOfContent.vue
View File

@ -5,6 +5,7 @@ import type { TableOfContents, TableOfContentsItem } from '../types/docs'
import TableOfContentTree from './TableOfContentTree.vue' import TableOfContentTree from './TableOfContentTree.vue'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible' import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
import { buttonVariants } from '@/lib/registry/default/ui/button' import { buttonVariants } from '@/lib/registry/default/ui/button'
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
const headers = shallowRef<TableOfContents>() const headers = shallowRef<TableOfContents>()
@ -22,7 +23,7 @@ function getHeadingsWithHierarchy(divId: string) {
headings.forEach((heading: HTMLHeadingElement) => { headings.forEach((heading: HTMLHeadingElement) => {
const level = Number.parseInt(heading.tagName.charAt(1)) const level = Number.parseInt(heading.tagName.charAt(1))
if (!heading.id) { if (!heading.id) {
const newId = heading.innerText const newId = heading.textContent
.replaceAll(/[^a-zA-Z0-9 ]/g, '') .replaceAll(/[^a-zA-Z0-9 ]/g, '')
.replaceAll(' ', '-') .replaceAll(' ', '-')
.toLowerCase() .toLowerCase()
@ -55,12 +56,16 @@ onContentUpdated(() => {
</script> </script>
<template> <template>
<div class="space-y-2 hidden xl:block"> <div class="hidden xl:block">
<ScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
<div class="space-y-2">
<p class="font-medium"> <p class="font-medium">
On This Page On This Page
</p> </p>
<TableOfContentTree :tree="headers" :level="1" /> <TableOfContentTree :tree="headers" :level="1" />
</div> </div>
</ScrollArea>
</div>
<div class="block xl:hidden mb-6"> <div class="block xl:hidden mb-6">
<Collapsible> <Collapsible>