@vuepress-reco/style-default
Version:
It is default type of vuepress-theme-reco.
64 lines (63 loc) • 1.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeaderChild = void 0;
const vue_1 = require("vue");
const vue_router_1 = require("vue-router");
const Link_vue_1 = require("./Link.vue");
const isActiveItem = (route, item) => {
if (route.hash === item.link) {
return true;
}
if (item.children) {
return item.children.some((child) => isActiveItem(route, child));
}
return false;
};
const renderItem = (item, props) => {
return vue_1.h('li', {
...props,
}, vue_1.h(Link_vue_1.default, {
class: 'page-header-item',
item,
}));
};
const renderChildren = (item) => {
var _a;
if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
return [null];
}
return item.children.map((child) => vue_1.h(exports.HeaderChild, {
item: child,
}));
};
const HeaderChild = ({ item }) => {
const route = vue_router_1.useRoute();
const active = isActiveItem(route, item);
if (item.children && item.children.length > 0) {
return [
renderItem(item, {
class: {
[`page-header-menu-depth_${item.level || 2}`]: true,
active,
},
}),
...renderChildren(item),
];
}
return [
renderItem(item, {
class: {
[`page-header-menu-depth_${item.level || 2}`]: true,
active,
},
}),
];
};
exports.HeaderChild = HeaderChild;
exports.HeaderChild.displayName = 'HeaderChild';
exports.HeaderChild.props = {
item: {
type: Object,
required: true,
},
};