@vuepress-reco/style-default
Version:
It is default type of vuepress-theme-reco.
85 lines (84 loc) • 2.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SeriesItem = 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('h5', props, item.text);
};
const renderChildren = (item) => {
var _a;
if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
return null;
}
return vue_1.h('ul', item.children.map((child) => vue_1.h('li', vue_1.h(exports.SeriesItem, {
item: child,
}))));
};
const SeriesItem = ({ item }) => {
const route = vue_router_1.useRoute();
const active = isActiveItem(route, item);
if (item.children) {
return [
vue_1.h('section', {
class: 'series-group series-item',
}, [
renderItem(item, {
class: {
'series-heading': true,
active,
},
}),
renderChildren(item),
]),
];
}
return [
renderItem(item, {
class: {
'series-item': true,
active,
},
}),
];
};
exports.SeriesItem = SeriesItem;
exports.SeriesItem.displayName = 'SeriesItem';
exports.SeriesItem.props = {
item: {
type: Object,
required: true,
},
};