|
|
|
@ -58,26 +58,52 @@ function onCaretClick() {
|
|
|
|
|
<template>
|
|
|
|
|
<ClientOnly :is-client-only="isClientOnly(item)">
|
|
|
|
|
<component :is="sectionTag" class="VPSidebarItem" :class="classes">
|
|
|
|
|
<div v-if="item.text" class="item" :role="itemRole" v-on="item.items
|
|
|
|
|
<div
|
|
|
|
|
v-if="item.text"
|
|
|
|
|
class="item"
|
|
|
|
|
:role="itemRole"
|
|
|
|
|
v-on="
|
|
|
|
|
item.items
|
|
|
|
|
? { click: onItemInteraction, keydown: onItemInteraction }
|
|
|
|
|
: {}
|
|
|
|
|
" :tabindex="item.items && 0">
|
|
|
|
|
"
|
|
|
|
|
:tabindex="item.items && 0"
|
|
|
|
|
>
|
|
|
|
|
<div class="indicator" />
|
|
|
|
|
|
|
|
|
|
<VPLink v-if="item.link" :tag="linkTag" class="link" :href="item.link" :rel="item.rel" :target="item.target">
|
|
|
|
|
<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" />
|
|
|
|
|
</VPLink>
|
|
|
|
|
<component v-else :is="textTag" class="text" v-html="item.text" />
|
|
|
|
|
|
|
|
|
|
<div v-if="item.collapsed != null && item.items && item.items.length" class="caret" role="button"
|
|
|
|
|
aria-label="toggle section" @click="onCaretClick" @keydown.enter="onCaretClick" tabindex="0">
|
|
|
|
|
<div
|
|
|
|
|
v-if="item.collapsed != null && item.items && item.items.length"
|
|
|
|
|
class="caret"
|
|
|
|
|
role="button"
|
|
|
|
|
aria-label="toggle section"
|
|
|
|
|
@click="onCaretClick"
|
|
|
|
|
@keydown.enter="onCaretClick"
|
|
|
|
|
tabindex="0"
|
|
|
|
|
>
|
|
|
|
|
<span class="vpi-chevron-right 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" />
|
|
|
|
|
<VPSidebarItem
|
|
|
|
|
v-for="i in item.items"
|
|
|
|
|
:key="i.text"
|
|
|
|
|
:item="i"
|
|
|
|
|
:depth="depth + 1"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</component>
|
|
|
|
@ -210,9 +236,7 @@ function onCaretClick() {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.VPSidebarItem.collapsed .caret-icon {
|
|
|
|
|
transform: rotate(0)
|
|
|
|
|
/*rtl:rotate(180deg)*/
|
|
|
|
|
;
|
|
|
|
|
transform: rotate(0)/*rtl:rotate(180deg)*/;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.VPSidebarItem.level-1 .items,
|
|
|
|
|