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

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

@@ -1,213 +1,79 @@
-<script lang="ts" setup>
-import type { ButtonTranslations } from '../../../../types/local-search'
-import { createSearchTranslate } from '../support/translation'
-
-// Button-Translations
-const defaultTranslations: { button: ButtonTranslations } = {
-  button: {
-    buttonText: 'Search',
-    buttonAriaLabel: 'Search'
-  }
-}
-
-const translate = createSearchTranslate(defaultTranslations)
+<script setup>
+defineProps({ text: {
+	type: String,
+	required: true
+} });
 </script>
 
 <template>
-  <button type="button" class="DocSearch DocSearch-Button" :aria-label="translate('button.buttonAriaLabel')">
-    <span class="DocSearch-Button-Container">
-      <span class="vp-icon DocSearch-Search-Icon"></span>
-      <span class="DocSearch-Button-Placeholder">{{ translate('button.buttonText') }}</span>
-    </span>
-    <span class="DocSearch-Button-Keys">
-      <kbd class="DocSearch-Button-Key"></kbd>
-      <kbd class="DocSearch-Button-Key">K</kbd>
+  <button type="button" class="VPNavBarSearchButton">
+    <span class="vpi-search" aria-hidden="true"></span>
+    <span class="text">{{ text }}</span>
+    <span class="keys" aria-hidden="true">
+      <kbd class="key-mod"></kbd>
+      <kbd class="key-k"></kbd>
     </span>
   </button>
 </template>
 
-<style>
-[class*='DocSearch'] {
-  --docsearch-primary-color: var(--vp-c-brand-1);
-  --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-text-color: var(--vp-c-text-1);
-  --docsearch-muted-color: var(--vp-c-text-2);
-  --docsearch-searchbox-shadow: none;
-  --docsearch-searchbox-background: transparent;
-  --docsearch-searchbox-focus-background: transparent;
-  --docsearch-key-gradient: transparent;
-  --docsearch-key-shadow: none;
-  --docsearch-modal-background: var(--vp-c-bg-soft);
-  --docsearch-footer-background: var(--vp-c-bg);
-}
-
-.dark [class*='DocSearch'] {
-  --docsearch-modal-shadow: none;
-  --docsearch-footer-shadow: none;
-  --docsearch-logo-color: var(--vp-c-text-2);
-  --docsearch-hit-background: var(--vp-c-default-soft);
-  --docsearch-hit-color: var(--vp-c-text-2);
-  --docsearch-hit-shadow: none;
-}
-
-.DocSearch-Button {
+<style scoped>
+.VPNavBarSearchButton {
   display: flex;
-  justify-content: center;
   align-items: center;
-  margin: 0;
-  padding: 0;
-  width: 48px;
-  height: 55px;
-  background: transparent;
-  transition: border-color 0.25s;
-}
-
-.DocSearch-Button:hover {
-  background: transparent;
-}
-
-.DocSearch-Button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-.DocSearch-Button-Key--pressed {
-  transform: none;
-  box-shadow: none;
+  gap: 0.5rem;
+  height: var(--vp-nav-height);
+  padding: 0.5rem 0.875rem;
+  font-size: 1.25rem;
 }
 
-.DocSearch-Button:focus:not(:focus-visible) {
-  outline: none !important;
+.text,
+.keys {
+  display: none;
 }
 
-@media (min-width: 768px) {
-  .DocSearch-Button {
-    justify-content: flex-start;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    padding: 0 10px 0 12px;
-    width: 100%;
-    height: 40px;
-    background-color: var(--vp-c-bg-alt);
-  }
-
-  .DocSearch-Button:hover {
-    border-color: var(--vp-c-brand-1);
-    background: var(--vp-c-bg-alt);
-  }
+kbd {
+  font-family: inherit;
+  font-weight: 500;
 }
 
-.DocSearch-Button .DocSearch-Button-Container {
-  display: flex;
-  align-items: center;
+.key-mod::before {
+  content: 'Ctrl';
 }
 
-.DocSearch-Button .DocSearch-Search-Icon {
-  position: relative;
-  width: 16px;
-  height: 16px;
-  color: var(--vp-c-text-1);
-  fill: currentColor;
-  transition: color 0.5s;
+:root.mac .key-mod::before {
+  content: '\2318';
 }
 
-.DocSearch-Button:hover .DocSearch-Search-Icon {
-  color: var(--vp-c-text-1);
+.key-k::before {
+  content: 'K';
 }
 
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Search-Icon {
-    top: 1px;
-    margin-right: 8px;
-    width: 14px;
-    height: 14px;
+@media (min-width: 48rem) {
+  .VPNavBarSearchButton {
+    height: auto;
+    padding: 0.5rem 0.75rem;
+    background-color: var(--vp-c-bg-alt);
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1;
     color: var(--vp-c-text-2);
   }
-}
 
-.DocSearch-Button .DocSearch-Button-Placeholder {
-  display: none;
-  margin-top: 2px;
-  padding: 0 16px 0 0;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Button-Placeholder {
-  color: var(--vp-c-text-1);
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Placeholder {
-    display: inline-block;
+  .text {
+    display: inline;
+    font-size: 0.8125rem;
   }
-}
-
-.DocSearch-Button .DocSearch-Button-Keys {
-  /*rtl:ignore*/
-  direction: ltr;
-  display: none;
-  min-width: auto;
-}
 
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Keys {
+  .keys {
     display: flex;
     align-items: center;
+    gap: 0.25rem;
+    /* the shortcut reads the same way in every direction */
+    direction: ltr;
+    padding: 0.25rem 0.375rem;
+    border: 1px solid var(--vp-c-divider);
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
   }
 }
-
-.DocSearch-Button .DocSearch-Button-Key {
-  display: block;
-  margin: 2px 0 0 0;
-  border: 1px solid var(--vp-c-divider);
-  /*rtl:begin:ignore*/
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  padding-left: 6px;
-  /*rtl:end:ignore*/
-  min-width: 0;
-  width: auto;
-  height: 22px;
-  line-height: 22px;
-  font-family: var(--vp-font-family-base);
-  font-size: 12px;
-  font-weight: 500;
-  transition: color 0.5s, border-color 0.5s;
-}
-
-.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
-  /*rtl:begin:ignore*/
-  border-right: 1px solid var(--vp-c-divider);
-  border-left: none;
-  border-radius: 0 4px 4px 0;
-  padding-left: 2px;
-  padding-right: 6px;
-  /*rtl:end:ignore*/
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child {
-  font-size: 0 !important;
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child:after {
-  content: 'Ctrl';
-  font-size: 12px;
-  letter-spacing: normal;
-  color: var(--docsearch-muted-color);
-}
-
-.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after {
-  content: '\2318';
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child > * {
-  display: none;
-}
-
-.DocSearch-Search-Icon {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m14.386 14.386 4.088 4.088-4.088-4.088A7.533 7.533 0 1 1 3.733 3.733a7.533 7.533 0 0 1 10.653 10.653z'/%3E%3C/svg%3E");
-}
 </style>

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

@@ -0,0 +1,15 @@
+declare var __VLS_1: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    'nav-bar-title-before'?: (props: typeof __VLS_1) => any;
+} & {
+    'nav-bar-title-after'?: (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/VPNavBarTitle.vue

@@ -1,32 +1,23 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useData } from '../composables/data'
-import { useLangs } from '../composables/langs'
-import { useSidebar } from '../composables/sidebar'
-import { normalizeLink } from '../support/utils'
-import VPImage from './VPImage.vue'
-
-const { site, theme } = useData()
-const { hasSidebar } = useSidebar()
-const { currentLang } = useLangs()
-
-const link = computed(() =>
-  typeof theme.value.logoLink === 'string'
-    ? theme.value.logoLink
-    : theme.value.logoLink?.link
-)
-
-const rel = computed(() =>
-  typeof theme.value.logoLink === 'string'
-    ? undefined
-    : theme.value.logoLink?.rel
-)
-
-const target = computed(() =>
-  typeof theme.value.logoLink === 'string'
-    ? undefined
-    : theme.value.logoLink?.target
-)
+<script setup>
+import { computed } from "vue";
+import { useData } from "../composables/data";
+import { useLangs } from "../composables/langs";
+import { useLayout } from "../composables/layout";
+import { normalizeLink } from "../support/utils";
+import VPImage from "./VPImage.vue";
+const { site, theme } = useData();
+const { hasSidebar } = useLayout();
+const { currentLang } = useLangs();
+const link = computed(() => typeof theme.value.logoLink === "string" ? theme.value.logoLink : theme.value.logoLink?.link);
+const rel = computed(() => typeof theme.value.logoLink === "string" ? undefined : theme.value.logoLink?.rel);
+const target = computed(() => typeof theme.value.logoLink === "string" ? undefined : theme.value.logoLink?.target);
+// plain-text form of the rendered title (`siteTitle` may contain HTML),
+// surfaced as a native tooltip since the sidebar column truncates it
+const textTitle = computed(() => {
+	if (theme.value.siteTitle === false) return undefined;
+	const raw = theme.value.siteTitle ?? site.value.title;
+	return raw.replace(/<[^>]+>/g, "").trim() || undefined;
+});
 </script>
 
 <template>
@@ -34,12 +25,13 @@ const target = computed(() =>
     <a
       class="title"
       :href="link ?? normalizeLink(currentLang.link)"
-      :rel="rel"
-      :target="target"
+      :rel
+      :target
+      :title="textTitle"
     >
       <slot name="nav-bar-title-before" />
       <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
-      <span v-if="theme.siteTitle" v-html="theme.siteTitle"></span>
+      <span v-if="theme.siteTitle" dir="auto" v-html="theme.siteTitle"></span>
       <span v-else-if="theme.siteTitle === undefined">{{ site.title }}</span>
       <slot name="nav-bar-title-after" />
     </a>
@@ -50,27 +42,36 @@ const target = computed(() =>
 .title {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid transparent;
   width: 100%;
   height: var(--vp-nav-height);
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
   transition: opacity 0.25s;
 }
 
-@media (min-width: 960px) {
+/* wherever the bar runs out of room, the title text gives way first */
+.title > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (min-width: 60rem) {
   .title {
     flex-shrink: 0;
   }
 
-  .VPNavBarTitle.has-sidebar .title {
-    border-bottom-color: var(--vp-c-divider);
+  /* the sidebar column has a fixed width — truncate at the divider
+     segment's edge (2rem inset from the column); the outer column box
+     keeps its full reserved width */
+  .VPNavBarTitle.has-sidebar {
+    max-width: calc(var(--vp-sidebar-width) - 4rem);
   }
 }
 
 :deep(.logo) {
-  margin-right: 8px;
+  flex: none;
+  margin-inline-end: 0.5rem;
   height: var(--vp-nav-logo-height);
 }
 </style>

package/dist/client/theme-default/components/VPNavMenu.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/VPNavMenu.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { useData } from "../composables/data";
+import { useNavOverflow } from "../composables/nav-overflow";
+import VPNavMenuGroup from "./VPNavMenuGroup.vue";
+import VPNavMenuLink from "./VPNavMenuLink.vue";
+const props = defineProps({ screen: {
+	type: Boolean,
+	required: false
+} });
+const { theme } = useData();
+// bar only — inside the screen every item is always shown
+const overflow = props.screen ? null : useNavOverflow();
+function isVisible(index) {
+	return !overflow || index < overflow.state.visibleItemCount;
+}
+</script>
+
+<template>
+  <nav
+    v-if="theme.nav"
+    :aria-label="theme.navMenuLabel || 'Main Navigation'"
+    class="VPNavMenu"
+    :class="screen ? 'VPNavScreenMenu' : 'VPNavBarMenu'"
+    :ref="(el) => overflow?.setMenuEl(el)"
+  >
+    <ul class="list">
+      <li
+        v-for="(item, index) in theme.nav"
+        :key="JSON.stringify(item)"
+        :class="{ collapsed: !isVisible(index) }"
+        :ref="(el) => overflow?.setItemEl(index, el)"
+      >
+        <VPNavMenuLink v-if="'link' in item" :item :screen />
+        <component
+          v-else-if="'component' in item"
+          :is="item.component"
+          v-bind="item.props"
+          :screen-menu="screen || undefined"
+        />
+        <VPNavMenuGroup v-else :item :screen />
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style scoped>
+.VPNavBarMenu {
+  position: relative;
+  display: none;
+  min-width: 0;
+}
+
+.VPNavBarMenu .list {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* collapsed into the `⋯` menu — kept mounted (hidden, out of the a11y tree
+   and tab order) so its natural width stays measurable */
+.VPNavBarMenu .list > li.collapsed {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+@media (min-width: 48rem) {
+  .VPNavBarMenu {
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+  }
+}
+</style>

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

@@ -0,0 +1,11 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    item: DefaultTheme.NavItemWithChildren;
+    /** accordion inside the nav screen */
+    screen?: boolean;
+    /** flat titled group inside a menu panel (e.g. 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/VPNavMenuGroup.vue

@@ -0,0 +1,140 @@
+<script setup>
+import { useRoute } from "vitepress";
+import { computed, ref, useId } from "vue";
+import { isActive } from "../../shared";
+import VPFlyout from "./VPFlyout.vue";
+import VPMenuGroup from "./VPMenuGroup.vue";
+import VPMenuLink from "./VPMenuLink.vue";
+const props = defineProps({
+	item: {
+		type: Object,
+		required: true
+	},
+	screen: {
+		type: Boolean,
+		required: false
+	},
+	menu: {
+		type: Boolean,
+		required: false
+	}
+});
+const route = useRoute();
+const isActiveGroup = computed(() => {
+	if (props.item.activeMatch) {
+		return isActive(route.data.relativePath, route.hash, props.item.activeMatch, true);
+	}
+	return isChildActive(props.item);
+});
+function isChildActive(navItem) {
+	if ("component" in navItem) return false;
+	if ("link" in navItem) {
+		const href = typeof navItem.link === "function" ? navItem.link(route.data) : navItem.link;
+		return isActive(route.data.relativePath, route.hash, navItem.activeMatch || href, !!navItem.activeMatch);
+	}
+	return navItem.items.some(isChildActive);
+}
+// screen accordion state — resets when the screen unmounts
+const isOpen = ref(false);
+const groupId = useId();
+function toggle() {
+	isOpen.value = !isOpen.value;
+}
+</script>
+
+<template>
+  <VPMenuGroup
+    v-if="menu"
+    class="VPNavMenuGroup"
+    :text="item.text"
+    :items="item.items"
+  />
+
+  <VPFlyout
+    v-else-if="!screen"
+    :class="{
+	VPNavMenuGroup: true,
+	VPNavBarMenuGroup: true,
+	active: isActiveGroup
+}"
+    :button="item.text"
+    :items="item.items"
+  />
+
+  <div
+    v-else
+    class="VPNavMenuGroup VPNavScreenMenuGroup"
+    :class="{
+	open: isOpen,
+	active: isActiveGroup
+}"
+  >
+    <button
+      type="button"
+      class="button"
+      :aria-expanded="isOpen"
+      :aria-controls="groupId"
+      @click="toggle"
+    >
+      <span class="button-text" dir="auto" v-html="item.text"></span>
+      <span class="vpi-plus button-icon" aria-hidden="true" />
+    </button>
+
+    <ul v-show="isOpen" :id="groupId" class="items">
+      <template v-for="child in item.items" :key="JSON.stringify(child)">
+        <VPMenuLink v-if="'link' in child" :item="child" />
+        <li v-else-if="'component' in child">
+          <component :is="child.component" v-bind="child.props" screen-menu />
+        </li>
+        <VPMenuGroup v-else :text="child.text" :items="child.items" />
+      </template>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.VPNavScreenMenuGroup {
+  border-bottom: 1px solid var(--vp-c-divider);
+  transition: border-color 0.5s;
+}
+
+.VPNavScreenMenuGroup.open {
+  padding-bottom: 0.625rem;
+}
+
+.VPNavScreenMenuGroup.open .button {
+  padding-bottom: 0.375rem;
+  color: var(--vp-c-brand-1);
+}
+
+.VPNavScreenMenuGroup.open .button-icon {
+  transform: rotate(45deg);
+}
+
+.button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block: 0.75rem 0.6875rem;
+  padding-inline: 0 0.25rem;
+  width: 100%;
+  line-height: 1.7142857;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.button:hover,
+.VPNavScreenMenuGroup.active .button {
+  color: var(--vp-c-brand-1);
+}
+
+.button-icon {
+  transition: transform 0.25s;
+}
+
+.items :deep(.VPMenuGroup) {
+  padding-top: 0.25rem;
+}
+</style>

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

@@ -0,0 +1,8 @@
+import type { DefaultTheme } from 'vitepress/theme';
+type __VLS_Props = {
+    item: DefaultTheme.NavItemWithLink;
+    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;