mirror of https://github.com/requarks/wiki
feat: Configurable ToC Heading Levels (#5101)
Co-authored-by: Regev Brody <regevbr@gmail.com>feat-toc
Timo Kruth
3 years ago
committed by
NGPixel
parent
e3d94f7177
commit
d9f4e90e2c
@ -0,0 +1,81 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
div
|
||||||
|
template(v-if='level >= minTocLevel')
|
||||||
|
v-list-item(@click='click(item.anchor)', v-if='(item.children.length === 0 && tocCollapseLevel > level) || tocCollapseLevel > level',
|
||||||
|
:key='item.anchor', :class='isNestedLevel ? `pl-9` : `pl-6`')
|
||||||
|
v-icon.pl-0(small, color='grey lighten-1') {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
|
||||||
|
v-list-item-title.pl-4(v-bind:class='titleClasses') {{item.title}}
|
||||||
|
v-list-group(sub-group, v-else, v-bind:class='{"pl-3": isNestedLevel}')
|
||||||
|
template(v-slot:activator)
|
||||||
|
v-list-item.pl-0(@click='click(item.anchor)', :key='item.anchor')
|
||||||
|
v-list-item-title(v-bind:class='titleClasses') {{item.title}}
|
||||||
|
template(v-if='item.children.length !== 0', v-for='subItem in item.children')
|
||||||
|
page-toc-item(:item='subItem', :level='level + 1', :tocLevel='tocLevel', :minTocLevel='minTocLevel', :tocCollapseLevel='tocCollapseLevel')
|
||||||
|
template(v-if='tocCollapseLevel > level', v-for='subItem in item.children')
|
||||||
|
page-toc-item(:item='subItem', :level='level + 1', :tocLevel='tocLevel', :minTocLevel='minTocLevel', :tocCollapseLevel='tocCollapseLevel')
|
||||||
|
template(v-else, v-for='subItem in item.children')
|
||||||
|
page-toc-item(:item='subItem', :level='level + 1', :tocLevel='tocLevel', :minTocLevel='minTocLevel', :tocCollapseLevel='tocCollapseLevel')
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'PageTocItem',
|
||||||
|
props: {
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
|
minTocLevel: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
tocLevel: {
|
||||||
|
type: Number,
|
||||||
|
default: 2
|
||||||
|
},
|
||||||
|
tocCollapseLevel: {
|
||||||
|
type: Number,
|
||||||
|
default: 2
|
||||||
|
},
|
||||||
|
level: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrollOpts: {
|
||||||
|
duration: 1500,
|
||||||
|
offset: 0,
|
||||||
|
easing: 'easeInOutCubic'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isNestedLevel() {
|
||||||
|
return this.level > this.minTocLevel
|
||||||
|
},
|
||||||
|
titleClasses() {
|
||||||
|
return {
|
||||||
|
'caption': this.isNestedLevel,
|
||||||
|
'grey--text': this.isNestedLevel,
|
||||||
|
'text--lighten-1': this.$vuetify.theme.dark && this.isNestedLevel,
|
||||||
|
'text--darken-1': !this.$vuetify.theme.dark && this.isNestedLevel
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
click (anchor) {
|
||||||
|
this.$vuetify.goTo(anchor, this.scrollOpts)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss'>
|
||||||
|
// Hack to fix animations of multi level nesting v-list-group
|
||||||
|
.v-list-group--sub-group.v-list-group--active .v-list-item:not(.v-list-item--active) .v-list-item__icon.v-list-group__header__prepend-icon .v-icon {
|
||||||
|
transform: rotate(0deg)!important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
exports.up = async knex => {
|
||||||
|
await knex.schema
|
||||||
|
.alterTable('pages', table => {
|
||||||
|
table.integer('minTocLevel').notNullable().defaultTo(0)
|
||||||
|
table.integer('tocLevel').notNullable().defaultTo(0)
|
||||||
|
table.integer('tocCollapseLevel').notNullable().defaultTo(0)
|
||||||
|
table.boolean('doUseTocDefault').notNullable().defaultTo(true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
exports.down = knex => { }
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
exports.up = async knex => {
|
||||||
|
await knex.schema
|
||||||
|
.alterTable('pages', table => {
|
||||||
|
table.integer('minTocLevel').notNullable().defaultTo(0)
|
||||||
|
table.integer('tocLevel').notNullable().defaultTo(0)
|
||||||
|
table.integer('tocCollapseLevel').notNullable().defaultTo(0)
|
||||||
|
table.boolean('doUseTocDefault').notNullable().defaultTo(true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
exports.down = knex => { }
|
||||||
Loading…
Reference in new issue