feat(theme): allow setting rel and target on sidebar links

closes #2851
pull/2852/head
Divyansh Singh 2 years ago
parent 3992202404
commit e477cdfd2f

@ -20,17 +20,19 @@ const {
toggle toggle
} = useSidebarControl(computed(() => props.item)) } = useSidebarControl(computed(() => props.item))
const sectionTag = computed(() => hasChildren.value ? 'section' : `div`) const sectionTag = computed(() => (hasChildren.value ? 'section' : `div`))
const linkTag = computed(() => isLink.value ? 'a' : 'div') const linkTag = computed(() => (isLink.value ? 'a' : 'div'))
const textTag = computed(() => { const textTag = computed(() => {
return !hasChildren.value return !hasChildren.value
? 'p' ? 'p'
: props.depth + 2 === 7 ? 'p' : `h${props.depth + 2}` : props.depth + 2 === 7
? 'p'
: `h${props.depth + 2}`
}) })
const itemRole = computed(() => isLink.value ? undefined : 'button') const itemRole = computed(() => (isLink.value ? undefined : 'button'))
const classes = computed(() => [ const classes = computed(() => [
[`level-${props.depth}`], [`level-${props.depth}`],
@ -55,20 +57,33 @@ function onCaretClick() {
<template> <template>
<component :is="sectionTag" class="VPSidebarItem" :class="classes"> <component :is="sectionTag" class="VPSidebarItem" :class="classes">
<div v-if="item.text" <div
v-if="item.text"
class="item" class="item"
:role="itemRole" :role="itemRole"
v-on="item.items ? { click: onItemInteraction, keydown: onItemInteraction } : {}" v-on="
item.items
? { click: onItemInteraction, keydown: onItemInteraction }
: {}
"
:tabindex="item.items && 0" :tabindex="item.items && 0"
> >
<div class="indicator" /> <div class="indicator" />
<VPLink v-if="item.link" :tag="linkTag" class="link" :href="item.link"> <VPLink
v-if="item.link"
:tag="linkTag"
class="link"
:href="item.link"
:rel="item.rel"
:target="item.target"
>
<component :is="textTag" class="text" v-html="item.text" /> <component :is="textTag" class="text" v-html="item.text" />
</VPLink> </VPLink>
<component v-else :is="textTag" class="text" v-html="item.text" /> <component v-else :is="textTag" class="text" v-html="item.text" />
<div v-if="item.collapsed != null" <div
v-if="item.collapsed != null"
class="caret" class="caret"
role="button" role="button"
aria-label="toggle section" aria-label="toggle section"

@ -240,6 +240,9 @@ export namespace DefaultTheme {
* Customize text that appears on the footer of previous/next page. * Customize text that appears on the footer of previous/next page.
*/ */
docFooterText?: string docFooterText?: string
rel?: string
target?: string
} }
/** /**

Loading…
Cancel
Save