vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/client/theme-default/components/VPNavMenuLink.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { inject } from "vue";
+import { navInjectionKey, useNavItemLink } from "../composables/nav";
+import VPLink from "./VPLink.vue";
+const props = defineProps({
+	item: {
+		type: Object,
+		required: true
+	},
+	screen: {
+		type: Boolean,
+		required: false
+	}
+});
+const { href, isActiveLink, isCurrentLink } = useNavItemLink(() => props.item);
+const nav = inject(navInjectionKey, null);
+function onClick() {
+	if (props.screen) nav?.closeScreen();
+}
+</script>
+
+<template>
+  <VPLink
+    class="VPNavMenuLink"
+    :class="{
+	VPNavBarMenuLink: !screen,
+	VPNavScreenMenuLink: screen,
+	active: isActiveLink
+}"
+    :aria-current="isCurrentLink ? 'page' : undefined"
+    :href
+    :target="item.target"
+    :rel="item.rel"
+    :no-icon="item.noIcon"
+    @click="onClick"
+  >
+    <span dir="auto" v-html="item.text"></span>
+  </VPLink>
+</template>
+
+<style scoped>
+.VPNavMenuLink {
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: color 0.25s;
+}
+
+.VPNavMenuLink:hover,
+.VPNavMenuLink.active {
+  color: var(--vp-c-brand-1);
+}
+
+.VPNavBarMenuLink {
+  display: flex;
+  align-items: center;
+  min-height: var(--vp-nav-height);
+  padding: 0 0.75rem;
+  line-height: 1.5;
+}
+
+.VPNavScreenMenuLink {
+  display: block;
+  border-bottom: 1px solid var(--vp-c-divider);
+  padding: 0.75rem 0 0.6875rem;
+  line-height: 1.7142857;
+  transition: border-color 0.25s, color 0.25s;
+}
+</style>

package/dist/client/theme-default/components/VPNavScreen.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare var __VLS_10: {}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    'nav-screen-content-before'?: (props: typeof __VLS_10) => any;
+} & {
+    'nav-screen-content-after'?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/client/theme-default/components/VPNavScreen.vue

@@ -1,18 +1,24 @@
-<script setup lang="ts">
-import { useScrollLock } from '@vueuse/core'
-import { inBrowser } from 'vitepress'
-import { ref } from 'vue'
-import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
-import VPNavScreenMenu from './VPNavScreenMenu.vue'
-import VPNavScreenSocialLinks from './VPNavScreenSocialLinks.vue'
-import VPNavScreenTranslations from './VPNavScreenTranslations.vue'
-
-defineProps<{
-  open: boolean
-}>()
-
-const screen = ref<HTMLElement | null>(null)
-const isLocked = useScrollLock(inBrowser ? document.body : null)
+<script setup>
+import { onKeyStroke } from "@vueuse/core";
+import { provide } from "vue";
+import { navScreenInjectionKey, useNav } from "../composables/nav";
+import { useBodyScrollLock } from "../composables/scroll-lock";
+import VPNavAppearance from "./VPNavAppearance.vue";
+import VPNavMenu from "./VPNavMenu.vue";
+import VPNavSocialLinks from "./VPNavSocialLinks.vue";
+import VPNavTranslations from "./VPNavTranslations.vue";
+const props = defineProps({ open: {
+	type: Boolean,
+	required: true
+} });
+const isLocked = useBodyScrollLock();
+provide(navScreenInjectionKey, true);
+const { closeScreen, screenTriggerEl } = useNav();
+onKeyStroke("Escape", () => {
+	if (!props.open) return;
+	closeScreen();
+	screenTriggerEl.value?.focus();
+});
 </script>
 
 <template>
@@ -21,13 +27,13 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
     @enter="isLocked = true"
     @after-leave="isLocked = false"
   >
-    <div v-if="open" class="VPNavScreen" ref="screen" id="VPNavScreen">
+    <div v-if="open" class="VPNavScreen" id="VPNavScreen">
       <div class="container">
         <slot name="nav-screen-content-before" />
-        <VPNavScreenMenu class="menu" />
-        <VPNavScreenTranslations class="translations" />
-        <VPNavScreenAppearance class="appearance" />
-        <VPNavScreenSocialLinks class="social-links" />
+        <VPNavMenu screen class="menu" />
+        <VPNavTranslations screen class="translations" />
+        <VPNavAppearance row screen class="appearance" />
+        <VPNavSocialLinks screen class="social-links" />
         <slot name="nav-screen-content-after" />
       </div>
     </div>
@@ -37,16 +43,12 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
-  /*rtl:ignore*/
-  right: 0;
-  bottom: 0;
-  /*rtl:ignore*/
-  left: 0;
-  padding: 0 32px;
+  inset: 0;
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px) 2rem 0;
   width: 100%;
   background-color: var(--vp-nav-screen-bg-color);
   overflow-y: auto;
+  overscroll-behavior: contain;
   transition: background-color 0.25s;
   pointer-events: auto;
 }
@@ -68,10 +70,10 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 
 .VPNavScreen.fade-enter-from .container,
 .VPNavScreen.fade-leave-to .container {
-  transform: translateY(-8px);
+  transform: translateY(-0.5rem);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavScreen {
     display: none;
   }
@@ -79,21 +81,21 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 
 .container {
   margin: 0 auto;
-  padding: 24px 0 96px;
-  max-width: 288px;
+  padding: 1.5rem 0 6rem;
+  max-width: 18rem;
 }
 
 .menu + .translations,
 .menu + .appearance,
 .translations + .appearance {
-  margin-top: 24px;
+  margin-top: 1.5rem;
 }
 
 .menu + .social-links {
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 
 .appearance + .social-links {
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 </style>

package/dist/client/theme-default/components/VPNavSocialLinks.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    screen?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/client/theme-default/components/VPNavSocialLinks.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from "vue";
+import { useData } from "../composables/data";
+import { useNavOverflow } from "../composables/nav-overflow";
+import VPSocialLinks from "./VPSocialLinks.vue";
+const props = defineProps({ screen: {
+	type: Boolean,
+	required: false
+} });
+const { theme } = useData();
+const overflow = props.screen ? null : useNavOverflow();
+const isCollapsed = computed(() => !!overflow && !overflow.state.socialLinks);
+</script>
+
+<template>
+  <VPSocialLinks
+    v-if="theme.socialLinks"
+    class="VPNavSocialLinks"
+    :class="[screen ? 'VPNavScreenSocialLinks' : 'VPNavBarSocialLinks', { collapsed: isCollapsed }]"
+    :links="theme.socialLinks"
+    :ref="(inst) => overflow?.setClusterEl('socialLinks', inst?.$el ?? null)"
+  />
+</template>
+
+<style scoped>
+.VPNavBarSocialLinks {
+  display: none;
+}
+
+@media (min-width: 48rem) {
+  .VPNavBarSocialLinks {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/dist/client/theme-default/components/VPNavTranslations.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    /** accordion inside the nav screen */
+    screen?: boolean;
+    /** titled group inside the `⋯` menu */
+    menu?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/client/theme-default/components/VPNavTranslations.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { computed, ref, useId } from "vue";
+import { useData } from "../composables/data";
+import { useLangs } from "../composables/langs";
+import { useNavOverflow } from "../composables/nav-overflow";
+import VPFlyout from "./VPFlyout.vue";
+import VPLink from "./VPLink.vue";
+import VPMenuLink from "./VPMenuLink.vue";
+const props = defineProps({
+	screen: {
+		type: Boolean,
+		required: false
+	},
+	menu: {
+		type: Boolean,
+		required: false
+	}
+});
+const { theme } = useData();
+const { localeLinks, currentLang } = useLangs({ linkToCorrespondingPage: true });
+const show = computed(() => !!(localeLinks.value.length && currentLang.value.label));
+// only the inline bar flyout participates in the overflow engine
+const overflow = props.screen || props.menu ? null : useNavOverflow();
+const isCollapsed = computed(() => !!overflow && !overflow.state.translations);
+const isOpen = ref(false);
+const listId = useId();
+function toggle() {
+	isOpen.value = !isOpen.value;
+}
+const localeProps = (locale) => ({
+	lang: locale.lang,
+	hreflang: locale.lang,
+	rel: "alternate",
+	dir: locale.dir,
+	"data-allow-mismatch": "attribute"
+});
+</script>
+
+<template>
+  <!-- accordion inside the nav screen -->
+  <div
+    v-if="screen && show"
+    class="VPNavTranslations VPNavScreenTranslations"
+    :class="{ open: isOpen }"
+  >
+    <button
+      type="button"
+      class="title"
+      :aria-expanded="isOpen"
+      :aria-controls="listId"
+      @click="toggle"
+    >
+      <span class="vpi-languages icon lang" aria-hidden="true" />
+      {{ currentLang.label }}
+      <span class="vpi-chevron-down icon chevron" aria-hidden="true" />
+    </button>
+
+    <ul v-show="isOpen" :id="listId" class="list">
+      <li v-for="locale in localeLinks" :key="locale.link" class="item">
+        <VPLink
+          class="link"
+          :href="locale.link"
+          :external="false"
+          v-bind="localeProps(locale)"
+        >
+          {{ locale.text }}
+        </VPLink>
+      </li>
+    </ul>
+  </div>
+
+  <!-- titled group inside the `⋯` menu -->
+  <div v-else-if="menu && show" class="VPNavTranslations group translations">
+    <p class="title">{{ currentLang.label }}</p>
+
+    <ul>
+      <template v-for="locale in localeLinks" :key="locale.link">
+        <VPMenuLink :item="locale" :external="false" v-bind="localeProps(locale)" />
+      </template>
+    </ul>
+  </div>
+
+  <!-- inline flyout in the navbar -->
+  <VPFlyout
+    v-else-if="!menu && show"
+    class="VPNavTranslations VPNavBarTranslations"
+    :class="{ collapsed: isCollapsed }"
+    icon="vpi-languages"
+    :label="theme.langMenuLabel || 'Change language'"
+    :ref="(inst) => overflow?.setClusterEl('translations', inst?.$el ?? null)"
+  >
+    <p class="title">{{ currentLang.label }}</p>
+
+    <ul class="items">
+      <template v-for="locale in localeLinks" :key="locale.link">
+        <VPMenuLink :item="locale" :external="false" v-bind="localeProps(locale)" />
+      </template>
+    </ul>
+  </VPFlyout>
+</template>
+
+<style scoped>
+/* flyout variant */
+.VPNavBarTranslations {
+  display: none;
+}
+
+@media (min-width: 48rem) {
+  .VPNavBarTranslations {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.VPNavBarTranslations .title {
+  padding-block: 0;
+  padding-inline: 0.75rem 1.5rem;
+  line-height: 2.2857143;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+/* menu-group variant (inside the `⋯` menu) — matches the menu group
+   titles */
+.group > .title {
+  padding: 0 0.75rem;
+  line-height: 2.2857143;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+
+/* accordion variant (inside the nav screen) */
+.VPNavScreenTranslations .title {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.VPNavScreenTranslations .icon {
+  font-size: 1rem;
+}
+
+.VPNavScreenTranslations .icon.lang {
+  margin-inline-end: 0.5rem;
+}
+
+.VPNavScreenTranslations .icon.chevron {
+  margin-inline-start: 0.25rem;
+  transition: transform 0.25s;
+}
+
+.VPNavScreenTranslations.open .icon.chevron {
+  transform: rotate(-90deg);
+}
+
+.VPNavScreenTranslations .list {
+  padding-block: 0.25rem 0;
+  padding-inline: 1.5rem 0;
+}
+
+.VPNavScreenTranslations .link {
+  line-height: 2.4615385;
+  font-size: 0.8125rem;
+  color: var(--vp-c-text-1);
+}
+</style>

package/dist/client/theme-default/components/VPPage.d.vue.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    'page-top'?: (props: typeof __VLS_1) => any;
+} & {
+    'page-bottom'?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/client/theme-default/components/VPSidebar.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare var __VLS_1: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    'sidebar-nav-before'?: (props: typeof __VLS_1) => any;
+} & {
+    'sidebar-nav-after'?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/client/theme-default/components/VPSidebar.vue

@@ -1,40 +1,29 @@
-<script lang="ts" setup>
-import { useScrollLock } from '@vueuse/core'
-import { inBrowser } from 'vitepress'
-import { ref, watch } from 'vue'
-import { useSidebar } from '../composables/sidebar'
-import VPSidebarGroup from './VPSidebarGroup.vue'
-
-const { sidebarGroups, hasSidebar } = useSidebar()
-
-const props = defineProps<{
-  open: boolean
-}>()
-
+<script setup>
+import { ref, useTemplateRef, watch } from "vue";
+import { useLayout } from "../composables/layout";
+import { useBodyScrollLock } from "../composables/scroll-lock";
+import VPSidebarGroup from "./VPSidebarGroup.vue";
+const { sidebarGroups, hasSidebar } = useLayout();
+const props = defineProps({ open: {
+	type: Boolean,
+	required: true
+} });
 // a11y: focus Nav element when menu has opened
-const navEl = ref<HTMLElement | null>(null)
-const isLocked = useScrollLock(inBrowser ? document.body : null)
-
-watch(
-  [props, navEl],
-  () => {
-    if (props.open) {
-      isLocked.value = true
-      navEl.value?.focus()
-    } else isLocked.value = false
-  },
-  { immediate: true, flush: 'post' }
-)
-
-const key = ref(0)
-
-watch(
-  sidebarGroups,
-  () => {
-    key.value += 1
-  },
-  { deep: true }
-)
+const navEl = useTemplateRef("navEl");
+const isLocked = useBodyScrollLock();
+watch([() => props.open, navEl], () => {
+	if (props.open) {
+		isLocked.value = true;
+		navEl.value?.focus();
+	} else isLocked.value = false;
+}, {
+	immediate: true,
+	flush: "post"
+});
+const key = ref(0);
+watch(sidebarGroups, () => {
+	key.value += 1;
+}, { deep: true });
 </script>
 
 <template>
@@ -58,7 +47,7 @@ watch(
       </span>
 
       <slot name="sidebar-nav-before" />
-      <VPSidebarGroup :items="sidebarGroups" :key="key" />
+      <VPSidebarGroup :items="sidebarGroups" :key />
       <slot name="sidebar-nav-after" />
     </nav>
   </aside>
@@ -69,17 +58,17 @@ watch(
   position: fixed;
   top: var(--vp-layout-top-height, 0px);
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: var(--vp-z-index-sidebar);
-  padding: 32px 32px 96px;
-  width: calc(100vw - 64px);
-  max-width: 320px;
+  padding: 2rem 2rem 6rem;
+  width: calc(100vw - 4rem);
+  max-width: 20rem;
   background-color: var(--vp-sidebar-bg-color);
   opacity: 0;
   box-shadow: var(--vp-c-shadow-3);
   overflow-x: hidden;
   overflow-y: auto;
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% * var(--vp-direction-multiplier)));
   transition: opacity 0.5s, transform 0.25s ease;
   overscroll-behavior: contain;
 }
@@ -88,15 +77,14 @@ watch(
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
-  transition: opacity 0.25s,
-    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
 .dark .VPSidebar {
   box-shadow: var(--vp-shadow-1);
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPSidebar {
     padding-top: var(--vp-nav-height);
     width: var(--vp-sidebar-width);
@@ -109,22 +97,21 @@ watch(
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 90rem) {
   .VPSidebar {
-    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
-    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-inline-start: max(2rem, calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2));
+    width: calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2 + var(--vp-sidebar-width) - 2rem);
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .curtain {
     position: sticky;
-    top: -64px;
-    left: 0;
+    top: calc(var(--vp-nav-height) * -1);
+    inset-inline-start: 0;
     z-index: 1;
     margin-top: calc(var(--vp-nav-height) * -1);
-    margin-right: -32px;
-    margin-left: -32px;
+    margin-inline: -2rem;
     height: var(--vp-nav-height);
     background-color: var(--vp-sidebar-bg-color);
   }

package/dist/client/theme-default/components/VPSidebarGroup.d.vue.ts

@@ -0,0 +1,7 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    items: DefaultTheme.SidebarItem[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;