vuepress-theme-hope
Version:
A light vuepress theme with tons of features
61 lines • 2.59 kB
JavaScript
import { useEventListener } from "@vueuse/core";
import { defineComponent, h, resolveComponent } from "vue";
import AutoLink from "@theme-hope/components/AutoLink";
import { useNavigate, useRelatedLinks, useThemeLocaleData, } from "@theme-hope/composables/index";
import "../styles/page-nav.scss";
export default defineComponent({
name: "PageNav",
setup() {
const themeLocale = useThemeLocaleData();
const navigate = useNavigate();
const { prevLink, nextLink } = useRelatedLinks();
useEventListener("keydown", (event) => {
if (event.altKey)
if (event.key === "ArrowRight") {
if (nextLink.value) {
navigate(nextLink.value.link);
event.preventDefault();
}
}
else if (event.key === "ArrowLeft") {
if (prevLink.value) {
navigate(prevLink.value.link);
event.preventDefault();
}
}
});
return () => prevLink.value || nextLink.value
? h("nav", { class: "vp-page-nav" }, [
prevLink.value
? h(AutoLink, { class: "prev", config: prevLink.value }, () => [
h("div", { class: "hint" }, [
h("span", { class: "arrow start" }),
themeLocale.value.metaLocales.prev,
]),
h("div", { class: "link" }, [
h(resolveComponent("VPIcon"), {
icon: prevLink.value?.icon,
}),
prevLink.value?.text,
]),
])
: null,
nextLink.value
? h(AutoLink, { class: "next", config: nextLink.value }, () => [
h("div", { class: "hint" }, [
themeLocale.value.metaLocales.next,
h("span", { class: "arrow end" }),
]),
h("div", { class: "link" }, [
nextLink.value?.text,
h(resolveComponent("VPIcon"), {
icon: nextLink.value?.icon,
}),
]),
])
: null,
])
: null;
},
});
//# sourceMappingURL=PageNav.js.map