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

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

@@ -1,43 +1,40 @@
-<script lang="ts" setup>
-import { useWindowScroll } from '@vueuse/core'
-import { ref, watchPostEffect } from 'vue'
-import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
-import VPNavBarAppearance from './VPNavBarAppearance.vue'
-import VPNavBarExtra from './VPNavBarExtra.vue'
-import VPNavBarHamburger from './VPNavBarHamburger.vue'
-import VPNavBarMenu from './VPNavBarMenu.vue'
-import VPNavBarSearch from './VPNavBarSearch.vue'
-import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
-import VPNavBarTitle from './VPNavBarTitle.vue'
-import VPNavBarTranslations from './VPNavBarTranslations.vue'
-
-const props = defineProps<{
-  isScreenOpen: boolean
-}>()
-
-defineEmits<{
-  (e: 'toggle-screen'): void
-}>()
-
-const { y } = useWindowScroll()
-const { hasSidebar } = useSidebar()
-const { frontmatter } = useData()
-
-const classes = ref<Record<string, boolean>>({})
-
-watchPostEffect(() => {
-  classes.value = {
-    'has-sidebar': hasSidebar.value,
-    'home': frontmatter.value.layout === 'home',
-    'top': y.value === 0,
-    'screen-open': props.isScreenOpen
-  }
-})
+<script setup>
+import { useWindowScroll } from "@vueuse/core";
+import { computed } from "vue";
+import { useData } from "../composables/data";
+import { useLayout } from "../composables/layout";
+import { provideNavOverflow } from "../composables/nav-overflow";
+import VPNavAppearance from "./VPNavAppearance.vue";
+import VPNavBarExtra from "./VPNavBarExtra.vue";
+import VPNavBarHamburger from "./VPNavBarHamburger.vue";
+import VPNavBarSearch from "./VPNavBarSearch.vue";
+import VPNavBarTitle from "./VPNavBarTitle.vue";
+import VPNavMenu from "./VPNavMenu.vue";
+import VPNavSocialLinks from "./VPNavSocialLinks.vue";
+import VPNavTranslations from "./VPNavTranslations.vue";
+defineProps({ isScreenOpen: {
+	type: Boolean,
+	required: true
+} });
+defineEmits(["toggle-screen"]);
+const { theme } = useData();
+const { isHome, hasSidebar, hasLocalNav } = useLayout();
+const { y } = useWindowScroll();
+const isTop = computed(() => y.value <= 0);
+const overflow = provideNavOverflow({ itemsKey: () => JSON.stringify(theme.value.nav ?? null) });
 </script>
 
 <template>
-  <div class="VPNavBar" :class="classes">
+  <div
+    class="VPNavBar"
+    :class="{
+	'has-sidebar': hasSidebar,
+	'has-local-nav': !isHome && hasLocalNav,
+	'home': isHome,
+	'top': isTop,
+	'screen-open': isScreenOpen
+}"
+  >
     <div class="wrapper">
       <div class="container">
         <div class="title">
@@ -48,16 +45,23 @@ watchPostEffect(() => {
         </div>
 
         <div class="content">
-          <div class="content-body">
+          <div
+            class="content-body"
+            :ref="(el) => overflow.setContainerEl(el)"
+          >
             <slot name="nav-bar-content-before" />
             <VPNavBarSearch class="search" />
-            <VPNavBarMenu class="menu" />
-            <VPNavBarTranslations class="translations" />
-            <VPNavBarAppearance class="appearance" />
-            <VPNavBarSocialLinks class="social-links" />
+            <VPNavMenu class="menu" />
+            <VPNavTranslations class="translations" />
+            <VPNavAppearance class="appearance" />
+            <VPNavSocialLinks class="social-links" />
             <VPNavBarExtra class="extra" />
             <slot name="nav-bar-content-after" />
-            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
+            <VPNavBarHamburger
+              class="hamburger"
+              :active="isScreenOpen"
+              @click="$emit('toggle-screen')"
+            />
           </div>
         </div>
       </div>
@@ -72,45 +76,79 @@ watchPostEffect(() => {
 <style scoped>
 .VPNavBar {
   position: relative;
+  z-index: 1;
   height: var(--vp-nav-height);
   pointer-events: none;
   white-space: nowrap;
-  transition: background-color 0.25s;
+  /* inline-start edge of the background surface and divider — on doc pages the
+     sidebar column paints its own surface up to this offset */
+  --vp-nav-col-offset: 0px;
 }
 
-.VPNavBar.screen-open {
-  transition: none;
+/* the single background surface — every state change below is color-only,
+   so nothing ever moves */
+.VPNavBar::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline: var(--vp-nav-col-offset) 0;
+  z-index: -1;
   background-color: var(--vp-nav-bg-color);
-  border-bottom: 1px solid var(--vp-c-divider);
+  backdrop-filter: var(--vp-nav-backdrop-filter);
+  transition: background-color 0.25s;
 }
 
-.VPNavBar:not(.home) {
-  background-color: var(--vp-nav-bg-color);
+/* below 60rem the bar scrolls with the page, so home stays transparent */
+.VPNavBar.home::before {
+  background-color: transparent;
 }
 
-@media (min-width: 960px) {
-  .VPNavBar:not(.home) {
-    background-color: transparent;
+@media (min-width: 60rem) {
+  .VPNavBar.home::before {
+    background-color: var(--vp-nav-bg-color);
   }
 
-  .VPNavBar:not(.has-sidebar):not(.home.top) {
-    background-color: var(--vp-nav-bg-color);
+  .VPNavBar.home.top::before {
+    background-color: var(--vp-nav-home-bg-color);
+    backdrop-filter: none;
+  }
+
+  .VPNavBar.has-sidebar {
+    --vp-nav-col-offset: var(--vp-sidebar-width);
   }
 }
 
-.wrapper {
-  padding: 0 8px 0 24px;
+@media (min-width: 90rem) {
+  .VPNavBar.has-sidebar {
+    --vp-nav-col-offset: calc(
+      (100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
+    );
+  }
 }
 
-@media (min-width: 768px) {
-  .wrapper {
-    padding: 0 32px;
+.VPNavBar.screen-open::before {
+  transition: none;
+  background-color: var(--vp-nav-bg-color);
+}
+
+/* between 60rem and 80rem the local nav is pinned right under the bar and
+   its surface extends up behind it, carrying the paint for both bars */
+@media (60rem <= width < 80rem) {
+  .VPNavBar.has-local-nav::before {
+    background-color: transparent;
+    backdrop-filter: none;
   }
 }
 
-@media (min-width: 960px) {
-  .VPNavBar.has-sidebar .wrapper {
-    padding: 0;
+.wrapper {
+  padding-block: 0;
+  padding-inline: 1.5rem 0.5rem;
+}
+
+@media (min-width: 48rem) {
+  .wrapper {
+    padding: 0 2rem;
   }
 }
 
@@ -118,7 +156,7 @@ watchPostEffect(() => {
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
-  max-width: calc(var(--vp-layout-max-width) - 64px);
+  max-width: calc(var(--vp-layout-max-width) - 4rem);
   height: var(--vp-nav-height);
   pointer-events: none;
 }
@@ -132,143 +170,133 @@ watchPostEffect(() => {
   pointer-events: auto;
 }
 
-@media (min-width: 960px) {
-  .VPNavBar.has-sidebar .container {
-    max-width: 100%;
-  }
-}
-
 .title {
-  flex-shrink: 0;
-  height: calc(var(--vp-nav-height) - 1px);
-  transition: background-color 0.5s;
+  /* below the overflow engine's range the title is the only shrinkable
+     piece, truncating instead of running over search and the hamburger */
+  min-width: 0;
 }
 
-@media (min-width: 960px) {
-  .VPNavBar.has-sidebar .title {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    padding: 0 32px;
-    width: var(--vp-sidebar-width);
-    height: var(--vp-nav-height);
-    background-color: transparent;
+@media (min-width: 48rem) {
+  .title {
+    /* the overflow engine measures fixed occupancy around a rigid title */
+    flex-shrink: 0;
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 60rem) {
+  /* reserve the sidebar column only when it is present; otherwise the title
+     keeps its natural width and search sits right next to it */
   .VPNavBar.has-sidebar .title {
-    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);
+    min-width: calc(var(--vp-sidebar-width) - 2rem);
+    max-width: calc(var(--vp-sidebar-width) - 2rem);
   }
 }
 
 .content {
   flex-grow: 1;
+  /* below the engine's range the controls stay rigid and the title absorbs
+     all the shrink */
+  flex-shrink: 0;
 }
 
-@media (min-width: 960px) {
-  .VPNavBar.has-sidebar .content {
-    position: relative;
-    z-index: 1;
-    padding-right: 32px;
-    padding-left: var(--vp-sidebar-width);
-  }
-}
-
-@media (min-width: 1440px) {
-  .VPNavBar.has-sidebar .content {
-    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+@media (min-width: 48rem) {
+  .content {
+    flex-shrink: 1;
+    min-width: 0;
   }
 }
 
 .content-body {
+  position: relative;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   height: var(--vp-nav-height);
-  transition: background-color 0.5s;
 }
 
-@media (min-width: 960px) {
-  .VPNavBar:not(.home.top) .content-body {
-    position: relative;
-    background-color: var(--vp-nav-bg-color);
-  }
-
-  .VPNavBar:not(.has-sidebar):not(.home.top) .content-body {
-    background-color: transparent;
+@media (min-width: 48rem) {
+  /* keeps search on the title's side when there is no nav menu to grow
+     into the middle; with a menu present its flex-grow wins and this
+     margin resolves to zero */
+  .content-body > .search {
+    margin-inline-end: auto;
   }
 }
 
-@media (max-width: 767px) {
-  .content-body {
-    column-gap: 0.5rem;
-  }
+/* collapsed into the `⋯` menu — kept mounted (hidden, out of the a11y tree
+   and tab order) so its natural width stays measurable */
+.content-body > .collapsed {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  max-width: 100%;
+  overflow: hidden;
 }
 
-.menu + .translations::before,
-.menu + .appearance::before,
-.menu + .social-links::before,
-.translations + .appearance::before,
-.appearance + .social-links::before {
-  margin-right: 8px;
-  margin-left: 8px;
+/* separators between whichever cluster units are currently in the bar */
+.content-body > :where(.menu, .translations, .appearance, .social-links) + :where(.translations, .appearance, .social-links)::before {
+  margin-inline: 0.5rem;
   width: 1px;
-  height: 24px;
+  height: 1.5rem;
   background-color: var(--vp-c-divider);
   content: "";
 }
 
-.menu + .appearance::before,
-.translations + .appearance::before {
-  margin-right: 16px;
+.content-body > :where(.menu, .translations) + .appearance::before {
+  margin-inline-end: 1rem;
 }
 
-.appearance + .social-links::before {
-  margin-left: 16px;
+.content-body > .appearance + .social-links::before {
+  margin-inline-start: 1rem;
 }
 
 .social-links {
-  margin-right: -8px;
+  margin-inline-end: -0.5rem;
 }
 
 .divider {
+  position: relative;
+  /* above the background surface, below the bar's content — an open flyout
+     panel overlaps the bar's bottom edge and must cover the rule */
+  z-index: -1;
+  /* own layer — Safari otherwise sorts the rule behind the sticky local
+     nav's surface in their overlapping row (#5399) */
+  transform: translateZ(0);
   width: 100%;
   height: 1px;
+  padding-inline-start: var(--vp-nav-col-offset);
 }
 
-@media (min-width: 960px) {
-  .VPNavBar.has-sidebar .divider {
-    padding-left: var(--vp-sidebar-width);
-  }
-}
-
-@media (min-width: 1440px) {
-  .VPNavBar.has-sidebar .divider {
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
-  }
+/* the sidebar-column segment of the bottom rule — inset from the column
+   edges so it lines up with the sidebar's own group dividers */
+.VPNavBar.has-sidebar .divider::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  inset-inline-start: calc(var(--vp-nav-col-offset) - var(--vp-sidebar-width) + 2rem);
+  width: calc(var(--vp-sidebar-width) - 4rem);
+  height: 1px;
+  background-color: var(--vp-c-divider);
 }
 
 .divider-line {
   width: 100%;
   height: 1px;
-  transition: background-color 0.5s;
+  transition: background-color 0.25s;
 }
 
 .VPNavBar:not(.home) .divider-line {
-  background-color: var(--vp-c-gutter);
+  background-color: var(--vp-nav-divider-color);
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNavBar:not(.home.top) .divider-line {
-    background-color: var(--vp-c-gutter);
+    background-color: var(--vp-nav-divider-color);
   }
+}
 
-  .VPNavBar:not(.has-sidebar):not(.home.top) .divider {
-    background-color: var(--vp-c-gutter);
-  }
+.VPNavBar.screen-open .divider-line {
+  background-color: var(--vp-c-divider);
 }
 </style>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,31 @@
+<template>
+  <button type="button" class="VPNavBarAskAiButton">
+    <span class="vpi-sparkles" aria-hidden="true"></span>
+  </button>
+</template>
+
+<style scoped>
+.VPNavBarAskAiButton {
+  display: flex;
+  align-items: center;
+  height: var(--vp-nav-height);
+  padding: 0.5rem 0.875rem;
+  font-size: 1.25rem;
+}
+
+@media (min-width: 48rem) {
+  .VPNavBarAskAiButton {
+    height: auto;
+    padding: 0.71875rem;
+    transition: color 0.3s ease;
+    background-color: var(--vp-c-bg-alt);
+    border-radius: 0.5rem;
+    font-size: 0.9375rem;
+    color: var(--vp-c-text-2);
+  }
+
+  .VPNavBarAskAiButton:hover {
+    color: var(--vp-c-brand-1);
+  }
+}
+</style>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,59 +1,60 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-import VPFlyout from './VPFlyout.vue'
-import VPMenuLink from './VPMenuLink.vue'
-import VPSwitchAppearance from './VPSwitchAppearance.vue'
-import VPSocialLinks from './VPSocialLinks.vue'
-import { useData } from '../composables/data'
-import { useLangs } from '../composables/langs'
-
-const { site, theme } = useData()
-const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
-
-const hasExtraContent = computed(
-  () =>
-    (localeLinks.value.length && currentLang.value.label) ||
-    site.value.appearance ||
-    theme.value.socialLinks
-)
+<script setup>
+import { computed } from "vue";
+import { useData } from "../composables/data";
+import { useLangs } from "../composables/langs";
+import { useAppearanceSwitch } from "../composables/nav";
+import { useNavOverflow } from "../composables/nav-overflow";
+import VPFlyout from "./VPFlyout.vue";
+import VPMenuGroup from "./VPMenuGroup.vue";
+import VPMenuLink from "./VPMenuLink.vue";
+import VPNavAppearance from "./VPNavAppearance.vue";
+import VPNavTranslations from "./VPNavTranslations.vue";
+import VPSocialLinks from "./VPSocialLinks.vue";
+const { theme } = useData();
+const { localeLinks, currentLang } = useLangs({ linkToCorrespondingPage: true });
+const hasAppearanceSwitch = useAppearanceSwitch();
+const overflow = useNavOverflow();
+// nav items the priority+ engine pushed out of the bar (contiguous suffix)
+const overflowItems = computed(() => {
+	const count = overflow?.state.visibleItemCount ?? Infinity;
+	if (count === Infinity || !theme.value.nav) return [];
+	return theme.value.nav.slice(count);
+});
+const showTranslations = computed(() => !!(localeLinks.value.length && currentLang.value.label) && !(overflow?.state.translations ?? true));
+const showAppearance = computed(() => hasAppearanceSwitch.value && !(overflow?.state.appearance ?? true));
+const showSocialLinks = computed(() => !!theme.value.socialLinks && !(overflow?.state.socialLinks ?? true));
+const hasContent = computed(() => overflowItems.value.length > 0 || showTranslations.value || showAppearance.value || showSocialLinks.value);
 </script>
 
 <template>
   <VPFlyout
-    v-if="hasExtraContent"
+    v-if="hasContent"
     class="VPNavBarExtra"
-    label="extra navigation"
+    :label="theme.extraMenuLabel || 'More options'"
+    :ref="(inst) => overflow?.setExtraEl(inst?.$el ?? null)"
   >
-    <div
-      v-if="localeLinks.length && currentLang.label"
-      class="group translations"
-    >
-      <p class="trans-title">{{ currentLang.label }}</p>
-
-      <template v-for="locale in localeLinks" :key="locale.link">
-        <VPMenuLink :item="locale" />
+    <ul v-if="overflowItems.length" class="group overflow-items">
+      <template v-for="item in overflowItems" :key="JSON.stringify(item)">
+        <VPMenuLink v-if="'link' in item" :item />
+        <!-- a menu panel is a vertical list context — components must
+             render a flat list here, not a nested floating flyout -->
+        <component
+          v-else-if="'component' in item"
+          :is="item.component"
+          v-bind="item.props"
+          menu
+        />
+        <VPMenuGroup v-else :text="item.text" :items="item.items" />
       </template>
-    </div>
+    </ul>
 
-    <div
-      v-if="
-        site.appearance &&
-        site.appearance !== 'force-dark' &&
-        site.appearance !== 'force-auto'
-      "
-      class="group"
-    >
-      <div class="item appearance">
-        <p class="label">
-          {{ theme.darkModeSwitchLabel || 'Appearance' }}
-        </p>
-        <div class="appearance-action">
-          <VPSwitchAppearance />
-        </div>
-      </div>
+    <VPNavTranslations v-if="showTranslations" menu />
+
+    <div v-if="showAppearance" class="group">
+      <VPNavAppearance row />
     </div>
 
-    <div v-if="theme.socialLinks" class="group">
+    <div v-if="showSocialLinks" class="group">
       <div class="item social-links">
         <VPSocialLinks class="social-links-list" :links="theme.socialLinks" />
       </div>
@@ -64,45 +65,22 @@ const hasExtraContent = computed(
 <style scoped>
 .VPNavBarExtra {
   display: none;
-  margin-right: -12px;
+  margin-inline-end: -0.75rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPNavBarExtra {
     display: block;
   }
 }
 
-@media (min-width: 1280px) {
-  .VPNavBarExtra {
-    display: none;
-  }
-}
-
-.trans-title {
-  padding: 0 24px 0 12px;
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-
-.item.appearance,
 .item.social-links {
   display: flex;
   align-items: center;
-  padding: 0 12px;
-}
-
-.item.appearance {
-  min-width: 176px;
-}
-
-.appearance-action {
-  margin-right: -2px;
+  padding: 0 0.75rem;
 }
 
 .social-links-list {
-  margin: -4px -8px;
+  margin: -0.25rem -0.5rem;
 }
 </style>

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

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