mirror of https://github.com/vuejs/vitepress
close #1360 close #1361 close #1680pull/1568/merge
Kia King Ishii
1 year ago
committed by
GitHub
parent
8782c82fee
commit
c35a1f0fae
@ -1,96 +1,131 @@
|
||||
import { getSidebar } from 'client/theme-default/support/sidebar'
|
||||
import { getSidebar, hasActiveLink } from 'client/theme-default/support/sidebar'
|
||||
|
||||
describe('client/theme-default/support/sidebar', () => {
|
||||
const root = [
|
||||
{
|
||||
text: 'A',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{
|
||||
text: 'A',
|
||||
link: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'B',
|
||||
items: [
|
||||
{
|
||||
text: 'B',
|
||||
link: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
const another = [
|
||||
{
|
||||
text: 'C',
|
||||
items: [
|
||||
describe('getSidebar', () => {
|
||||
const root = [
|
||||
{
|
||||
text: 'A',
|
||||
collapsible: true,
|
||||
items: [{ text: 'A', link: '' }]
|
||||
},
|
||||
{
|
||||
text: 'B',
|
||||
items: [{ text: 'B', link: '' }]
|
||||
}
|
||||
]
|
||||
|
||||
const another = [
|
||||
{
|
||||
text: 'C',
|
||||
items: [{ text: 'C', link: '' }]
|
||||
}
|
||||
]
|
||||
|
||||
describe('normal sidebar sort', () => {
|
||||
const normalSidebar = {
|
||||
'/': root,
|
||||
'/multi-sidebar/': another
|
||||
}
|
||||
|
||||
test('gets `/` sidebar', () => {
|
||||
expect(getSidebar(normalSidebar, '/')).toBe(root)
|
||||
})
|
||||
|
||||
test('gets `/multi-sidebar/` sidebar', () => {
|
||||
expect(getSidebar(normalSidebar, '/multi-sidebar/')).toBe(another)
|
||||
})
|
||||
|
||||
test('gets `/` sidebar again', () => {
|
||||
expect(getSidebar(normalSidebar, '/some-entry.html')).toBe(root)
|
||||
})
|
||||
})
|
||||
|
||||
describe('reversed sidebar sort', () => {
|
||||
const reversedSidebar = {
|
||||
'/multi-sidebar/': another,
|
||||
'/': root
|
||||
}
|
||||
|
||||
test('gets `/` sidebar', () => {
|
||||
expect(getSidebar(reversedSidebar, '/')).toBe(root)
|
||||
})
|
||||
|
||||
test('gets `/multi-sidebar/` sidebar', () => {
|
||||
expect(getSidebar(reversedSidebar, '/multi-sidebar/')).toBe(another)
|
||||
})
|
||||
|
||||
test('gets `/` sidebar again', () => {
|
||||
expect(getSidebar(reversedSidebar, '/some-entry.html')).toBe(root)
|
||||
})
|
||||
})
|
||||
|
||||
describe('nested sidebar sort', () => {
|
||||
const nested = [
|
||||
{
|
||||
text: 'C',
|
||||
link: ''
|
||||
text: 'D',
|
||||
items: [{ text: 'D', link: '' }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
describe('normal sidebar sort', () => {
|
||||
const normalSidebar = {
|
||||
'/': root,
|
||||
'/multi-sidebar/': another
|
||||
}
|
||||
test('gets / sidebar', () => {
|
||||
expect(getSidebar(normalSidebar, '/')).toBe(root)
|
||||
})
|
||||
test('gets /multi-sidebar/ sidebar', () => {
|
||||
expect(getSidebar(normalSidebar, '/multi-sidebar/')).toBe(another)
|
||||
})
|
||||
test('gets / sidebar again', () => {
|
||||
expect(getSidebar(normalSidebar, '/some-entry.html')).toBe(root)
|
||||
})
|
||||
})
|
||||
describe('reversed sidebar sort', () => {
|
||||
const reversedSidebar = {
|
||||
'/multi-sidebar/': another,
|
||||
'/': root
|
||||
}
|
||||
test('gets / sidebar', () => {
|
||||
expect(getSidebar(reversedSidebar, '/')).toBe(root)
|
||||
})
|
||||
test('gets /multi-sidebar/ sidebar', () => {
|
||||
expect(getSidebar(reversedSidebar, '/multi-sidebar/')).toBe(another)
|
||||
})
|
||||
test('gets / sidebar again', () => {
|
||||
expect(getSidebar(reversedSidebar, '/some-entry.html')).toBe(root)
|
||||
|
||||
const nestedSidebar = {
|
||||
'/': root,
|
||||
'/multi-sidebar/': another,
|
||||
'/multi-sidebar/nested/': nested
|
||||
}
|
||||
|
||||
test('gets `/` sidebar', () => {
|
||||
expect(getSidebar(nestedSidebar, '/')).toBe(root)
|
||||
})
|
||||
|
||||
test('gets `/multi-sidebar/` sidebar', () => {
|
||||
expect(getSidebar(nestedSidebar, '/multi-sidebar/')).toBe(another)
|
||||
})
|
||||
|
||||
test('gets `/multi-sidebar/nested/` sidebar', () => {
|
||||
expect(getSidebar(nestedSidebar, '/multi-sidebar/nested/')).toBe(nested)
|
||||
})
|
||||
|
||||
test('gets `/` sidebar again', () => {
|
||||
expect(getSidebar(nestedSidebar, '/some-entry.html')).toBe(root)
|
||||
})
|
||||
})
|
||||
})
|
||||
describe('nested sidebar sort', () => {
|
||||
const nested = [
|
||||
{
|
||||
text: 'D',
|
||||
|
||||
describe('hasActiveLink', () => {
|
||||
test('checks `SidebarItem`', () => {
|
||||
const item = {
|
||||
text: 'Item 001',
|
||||
items: [
|
||||
{
|
||||
text: 'D',
|
||||
link: ''
|
||||
}
|
||||
{ text: 'Item 001', link: '/active-1' },
|
||||
{ text: 'Item 002', link: '/active-2' }
|
||||
]
|
||||
}
|
||||
]
|
||||
const nestedSidebar = {
|
||||
'/': root,
|
||||
'/multi-sidebar/': another,
|
||||
'/multi-sidebar/nested/': nested
|
||||
}
|
||||
test('gets / sidebar', () => {
|
||||
expect(getSidebar(nestedSidebar, '/')).toBe(root)
|
||||
})
|
||||
test('gets /multi-sidebar/ sidebar', () => {
|
||||
expect(getSidebar(nestedSidebar, '/multi-sidebar/')).toBe(another)
|
||||
})
|
||||
test('gets /multi-sidebar/nested/ sidebar', () => {
|
||||
expect(getSidebar(nestedSidebar, '/multi-sidebar/nested/')).toBe(nested)
|
||||
|
||||
expect(hasActiveLink('active-1', item)).toBe(true)
|
||||
expect(hasActiveLink('inactive', item)).toBe(false)
|
||||
})
|
||||
test('gets / sidebar again', () => {
|
||||
expect(getSidebar(nestedSidebar, '/some-entry.html')).toBe(root)
|
||||
|
||||
test('checks `SidebarItem[]`', () => {
|
||||
const item = [
|
||||
{
|
||||
text: 'Item 001',
|
||||
items: [
|
||||
{ text: 'Item 001', link: '/active-1' },
|
||||
{ text: 'Item 002', link: '/active-2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Item 002',
|
||||
items: [
|
||||
{ text: 'Item 003', link: '/active-3' },
|
||||
{ text: 'Item 004', link: '/active-4' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
expect(hasActiveLink('active-1', item)).toBe(true)
|
||||
expect(hasActiveLink('active-3', item)).toBe(true)
|
||||
expect(hasActiveLink('inactive', item)).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,128 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
import { ref, watchEffect } from 'vue'
|
||||
import { useData } from '../composables/data.js'
|
||||
import { isActive } from '../support/utils.js'
|
||||
import VPIconPlusSquare from './icons/VPIconPlusSquare.vue'
|
||||
import VPIconMinusSquare from './icons/VPIconMinusSquare.vue'
|
||||
import VPSidebarLink from './VPSidebarLink.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
text?: string
|
||||
items: DefaultTheme.SidebarItem[]
|
||||
collapsible?: boolean
|
||||
collapsed?: boolean
|
||||
}>()
|
||||
|
||||
const collapsed = ref(false)
|
||||
watchEffect(() => {
|
||||
collapsed.value = !!(props.collapsible && props.collapsed)
|
||||
})
|
||||
|
||||
const { page } = useData()
|
||||
watchEffect(() => {
|
||||
if(props.items.some((item) => { return isActive(page.value.relativePath, item.link) })){
|
||||
collapsed.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function toggle() {
|
||||
if (props.collapsible) {
|
||||
collapsed.value = !collapsed.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="VPSidebarGroup" :class="{ collapsible, collapsed }">
|
||||
<div
|
||||
v-if="text"
|
||||
class="title"
|
||||
:role="collapsible ? 'button' : undefined"
|
||||
@click="toggle"
|
||||
>
|
||||
<h2 v-html="text" class="title-text"></h2>
|
||||
<div class="action">
|
||||
<VPIconMinusSquare class="icon minus" />
|
||||
<VPIconPlusSquare class="icon plus" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<template v-for="item in items" :key="item.link">
|
||||
<VPSidebarLink :item="item" />
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.action {
|
||||
display: none;
|
||||
position: relative;
|
||||
margin-right: -8px;
|
||||
border-radius: 4px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--vp-c-text-3);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.VPSidebarGroup.collapsible .action {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.VPSidebarGroup.collapsible .title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title:hover .action {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.icon.minus { opacity: 1; }
|
||||
.icon.plus { opacity: 0; }
|
||||
|
||||
.VPSidebarGroup.collapsed .icon.minus { opacity: 0; }
|
||||
.VPSidebarGroup.collapsed .icon.plus { opacity: 1; }
|
||||
|
||||
.items {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.VPSidebarGroup.collapsed .items {
|
||||
margin-bottom: -22px;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.VPSidebarGroup.collapsed .items {
|
||||
margin-bottom: -14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,213 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
import { useSidebarControl } from '../composables/sidebar.js'
|
||||
import VPIconChevronRight from './icons/VPIconChevronRight.vue'
|
||||
import VPLink from './VPLink.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: DefaultTheme.SidebarItem
|
||||
depth: number
|
||||
}>()
|
||||
|
||||
const {
|
||||
collapsed,
|
||||
collapsible,
|
||||
isLink,
|
||||
isActiveLink,
|
||||
hasActiveLink,
|
||||
hasChildren,
|
||||
toggle
|
||||
} = useSidebarControl(computed(() => props.item))
|
||||
|
||||
const sectionTag = computed(() => hasChildren.value ? 'section' : `div`)
|
||||
|
||||
const linkTag = computed(() => isLink.value ? 'a' : 'div')
|
||||
|
||||
const textTag = computed(() => {
|
||||
return !hasChildren.value
|
||||
? 'p'
|
||||
: props.depth + 2 === 7 ? 'p' : `h${props.depth + 2}`
|
||||
})
|
||||
|
||||
const itemRole = computed(() => isLink.value ? undefined : 'button')
|
||||
|
||||
const classes = computed(() => [
|
||||
[`level-${props.depth}`],
|
||||
{ collapsible: collapsible.value },
|
||||
{ collapsed: collapsed.value },
|
||||
{ 'is-link': isLink.value },
|
||||
{ 'is-active': isActiveLink.value },
|
||||
{ 'has-active': hasActiveLink.value }
|
||||
])
|
||||
|
||||
function onItemClick() {
|
||||
!props.item.link && toggle()
|
||||
}
|
||||
|
||||
function onCaretClick() {
|
||||
props.item.link && toggle()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="sectionTag" class="VPSidebarItem" :class="classes">
|
||||
<div v-if="item.text" class="item" :role="itemRole" @click="onItemClick">
|
||||
<div class="indicator" />
|
||||
|
||||
<VPLink :tag="linkTag" class="link" :href="item.link">
|
||||
<component :is="textTag" class="text" v-html="item.text" />
|
||||
</VPLink>
|
||||
|
||||
<div class="caret" role="button" @click="onCaretClick">
|
||||
<VPIconChevronRight v-if="item.collapsible" class="caret-icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="item.items && item.items.length" class="items">
|
||||
<template v-if="depth < 5">
|
||||
<VPSidebarItem
|
||||
v-for="i in item.items"
|
||||
:key="i.text"
|
||||
:item="i"
|
||||
:depth="depth + 1"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPSidebarItem.level-0 {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.VPSidebarItem.collapsed.level-0 {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.VPSidebarItem.collapsible > .item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
left: -17px;
|
||||
width: 1px;
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
.VPSidebarItem.level-2.is-active > .item > .indicator,
|
||||
.VPSidebarItem.level-3.is-active > .item > .indicator,
|
||||
.VPSidebarItem.level-4.is-active > .item > .indicator,
|
||||
.VPSidebarItem.level-5.is-active > .item > .indicator {
|
||||
background-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.text {
|
||||
flex-grow: 1;
|
||||
padding: 4px 0;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.VPSidebarItem.level-0 .text {
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.VPSidebarItem.level-1 .text,
|
||||
.VPSidebarItem.level-2 .text,
|
||||
.VPSidebarItem.level-3 .text,
|
||||
.VPSidebarItem.level-4 .text,
|
||||
.VPSidebarItem.level-5 .text {
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.VPSidebarItem.level-0.is-link > .item > .link:hover .text,
|
||||
.VPSidebarItem.level-1.is-link > .item > .link:hover .text,
|
||||
.VPSidebarItem.level-2.is-link > .item > .link:hover .text,
|
||||
.VPSidebarItem.level-3.is-link > .item > .link:hover .text,
|
||||
.VPSidebarItem.level-4.is-link > .item > .link:hover .text,
|
||||
.VPSidebarItem.level-5.is-link > .item > .link:hover .text {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.VPSidebarItem.level-0.has-active > .item > .link > .text,
|
||||
.VPSidebarItem.level-1.has-active > .item > .link > .text,
|
||||
.VPSidebarItem.level-2.has-active > .item > .link > .text,
|
||||
.VPSidebarItem.level-3.has-active > .item > .link > .text,
|
||||
.VPSidebarItem.level-4.has-active > .item > .link > .text,
|
||||
.VPSidebarItem.level-5.has-active > .item > .link > .text {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.VPSidebarItem.level-0.is-active > .item .link > .text,
|
||||
.VPSidebarItem.level-1.is-active > .item .link > .text,
|
||||
.VPSidebarItem.level-2.is-active > .item .link > .text,
|
||||
.VPSidebarItem.level-3.is-active > .item .link > .text,
|
||||
.VPSidebarItem.level-4.is-active > .item .link > .text,
|
||||
.VPSidebarItem.level-5.is-active > .item .link > .text {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.caret {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: -7px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--vp-c-text-3);
|
||||
cursor: pointer;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.item:hover .caret {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.item:hover .caret:hover {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.caret-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: currentColor;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
|
||||
.VPSidebarItem.collapsed .caret-icon {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.VPSidebarItem.level-1 .items,
|
||||
.VPSidebarItem.level-2 .items,
|
||||
.VPSidebarItem.level-3 .items,
|
||||
.VPSidebarItem.level-4 .items,
|
||||
.VPSidebarItem.level-5 .items {
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.VPSidebarItem.collapsed .items {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,88 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
import { type Ref, computed, inject, ref, watchEffect } from 'vue'
|
||||
import { useData } from '../composables/data.js'
|
||||
import { useSidebar } from '../composables/sidebar.js'
|
||||
import { isActive } from '../support/utils.js'
|
||||
import VPLink from './VPLink.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{ item: DefaultTheme.SidebarItem; depth?: number }>(),
|
||||
{ depth: 1 }
|
||||
)
|
||||
|
||||
const { page, frontmatter } = useData()
|
||||
const maxDepth = computed<number>(
|
||||
() => frontmatter.value.sidebarDepth || Infinity
|
||||
)
|
||||
|
||||
const active = computed(() =>
|
||||
isActive(page.value.relativePath, props.item.link)
|
||||
)
|
||||
|
||||
const { isSidebarEnabled } = useSidebar()
|
||||
const closeSideBar = inject('close-sidebar') as () => void
|
||||
const isSidebarOpen = inject('is-sidebar-open') as Ref<boolean>
|
||||
|
||||
const link = ref<InstanceType<typeof VPLink> | null>(null)
|
||||
watchEffect(() => {
|
||||
if (isSidebarOpen.value && active.value) {
|
||||
link.value?.$el?.focus()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPLink
|
||||
class="link"
|
||||
:class="{ active }"
|
||||
:style="{ paddingLeft: 16 * (depth - 1) + 'px' }"
|
||||
:href="item.link"
|
||||
:tabindex="isSidebarEnabled || isSidebarOpen ? 0 : -1"
|
||||
@click="closeSideBar"
|
||||
ref="link"
|
||||
>
|
||||
<span v-html="item.text" class="link-text" :class="{ light: depth > 1 }"></span>
|
||||
</VPLink>
|
||||
<template
|
||||
v-if="'items' in item && depth < maxDepth"
|
||||
v-for="child in item.items"
|
||||
:key="child.link"
|
||||
>
|
||||
<VPSidebarLink :item="child" :depth="depth + 1" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.link {
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.link.active {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.link :deep(.icon) {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.link-text.light {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue