@vuepress-reco/style-default
Version:
It is default type of vuepress-theme-reco.
111 lines (110 loc) • 3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidebarChild = void 0;
const vue_1 = require("vue");
const vue_router_1 = require("vue-router");
const Link_vue_1 = require("./Link.vue");
const normalizePath = (path) => decodeURI(path)
.replace(/#.*$/, '')
.replace(/(index)?\.(md|html)$/, '');
const isActiveLink = (route, link) => {
if (link === undefined) {
return false;
}
if (route.hash === link) {
return true;
}
const currentPath = normalizePath(route.path);
const targetPath = normalizePath(link);
return currentPath === targetPath;
};
const isActiveItem = (route, item) => {
if (isActiveLink(route, item.link)) {
return true;
}
if (item.children) {
return item.children.some((child) => isActiveItem(route, child));
}
return false;
};
const renderItem = (item, props) => {
// if the item has link, render it as `<Link>`
if (item.link) {
return vue_1.h(Link_vue_1.default, {
...props,
item,
});
}
// if the item only has text, render it as `<p>`
return vue_1.h('p', props, item.text);
};
const renderChildren = (item, depth) => {
var _a;
if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
return null;
}
return vue_1.h('ul', {
class: {
'sidebar-sub-headers': depth > 0,
},
}, item.children.map((child) => vue_1.h('li', vue_1.h(exports.SidebarChild, {
item: child,
depth: depth + 1,
}))));
};
const SidebarChild = ({ item, depth = 0 }) => {
const route = vue_router_1.useRoute();
const active = isActiveItem(route, item);
if (item.isGroup) {
return [
vue_1.h('section', {
class: 'sidebar-group sidebar-item',
}, [
renderItem(item, {
class: {
'sidebar-heading': true,
active,
},
}),
renderChildren(item, depth),
]),
];
}
if (item.children) {
return [
vue_1.h('section', {
class: 'sidebar-item',
}, [
renderItem(item, {
class: {
'sidebar-heading': true,
active,
},
}),
renderChildren(item, depth),
]),
];
}
return [
renderItem(item, {
class: {
'sidebar-item': true,
'sidebar-link': true,
active,
},
}),
];
};
exports.SidebarChild = SidebarChild;
exports.SidebarChild.displayName = 'SidebarChild';
exports.SidebarChild.props = {
item: {
type: Object,
required: true,
},
depth: {
type: Number,
required: false,
default: 0,
},
};