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

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

@@ -0,0 +1,23 @@
+import type { DefaultTheme } from 'vitepress/theme';
+declare const __VLS_export: <T extends DefaultTheme.NavItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        items?: T[];
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,25 +1,26 @@
-<script lang="ts" setup>
-import VPMenuLink from './VPMenuLink.vue'
-import VPMenuGroup from './VPMenuGroup.vue'
-
-defineProps<{
-  items?: any[]
-}>()
+<script setup>
+import VPMenuGroup from "./VPMenuGroup.vue";
+import VPMenuLink from "./VPMenuLink.vue";
+defineProps({ items: {
+	type: Array,
+	required: false
+} });
 </script>
 
 <template>
   <div class="VPMenu">
-    <div v-if="items" class="items">
+    <ul v-if="items" class="items">
       <template v-for="item in items" :key="JSON.stringify(item)">
-        <VPMenuLink v-if="'link' in item" :item="item" />
+        <VPMenuLink v-if="'link' in item" :item />
         <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>
 
     <slot />
   </div>
@@ -27,9 +28,9 @@ defineProps<{
 
 <style scoped>
 .VPMenu {
-  border-radius: 12px;
-  padding: 12px;
-  min-width: 128px;
+  border-radius: 0.75rem;
+  padding: 0.75rem;
+  min-width: 8rem;
   border: 1px solid var(--vp-c-divider);
   background-color: var(--vp-c-bg-elv);
   box-shadow: var(--vp-shadow-3);
@@ -39,13 +40,13 @@ defineProps<{
 }
 
 .VPMenu :deep(.group) {
-  margin: 0 -12px;
-  padding: 0 12px 12px;
+  margin: 0 -0.75rem;
+  padding: 0 0.75rem 0.75rem;
 }
 
 .VPMenu :deep(.group + .group) {
   border-top: 1px solid var(--vp-c-divider);
-  padding: 11px 12px 12px;
+  padding: 0.6875rem 0.75rem 0.75rem;
 }
 
 .VPMenu :deep(.group:last-child) {
@@ -54,24 +55,11 @@ defineProps<{
 
 .VPMenu :deep(.group + .item) {
   border-top: 1px solid var(--vp-c-divider);
-  padding: 11px 16px 0;
+  padding: 0.6875rem 1rem 0;
 }
 
 .VPMenu :deep(.item) {
-  padding: 0 16px;
+  padding: 0 1rem;
   white-space: nowrap;
 }
-
-.VPMenu :deep(.label) {
-  flex-grow: 1;
-  line-height: 28px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
-}
-
-.VPMenu :deep(.action) {
-  padding-left: 24px;
-}
 </style>

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

@@ -0,0 +1,22 @@
+import type { DefaultTheme } from 'vitepress/theme';
+declare const __VLS_export: <T extends DefaultTheme.NavItemComponent | DefaultTheme.NavItemChildren | DefaultTheme.NavItemWithLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        text?: string;
+        items: T[];
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,27 +1,49 @@
-<script lang="ts" setup>
-import VPMenuLink from './VPMenuLink.vue'
-
-defineProps<{
-  text?: string
-  items: any[]
-}>()
+<script setup>
+import { computed, inject } from "vue";
+import { navScreenInjectionKey } from "../composables/nav";
+import VPMenuLink from "./VPMenuLink.vue";
+const props = defineProps({
+	text: {
+		type: String,
+		required: false
+	},
+	items: {
+		type: Array,
+		required: true
+	}
+});
+const screen = inject(navScreenInjectionKey, false);
+const hasSubGroups = computed(() => props.items.some((item) => !("link" in item) && !("component" in item)));
 </script>
 
 <template>
-  <div class="VPMenuGroup">
+  <li
+    class="VPMenuGroup"
+    :class="{ VPNavScreenMenuGroupSection: screen }"
+  >
     <p v-if="text" class="title">{{ text }}</p>
 
-    <template v-for="item in items">
-      <VPMenuLink v-if="'link' in item" :item="item" />
-    </template>
-  </div>
+    <ul :class="{ 'sub-groups': hasSubGroups }">
+      <template v-for="item in items" :key="JSON.stringify(item)">
+        <VPMenuLink v-if="'link' in item" :item />
+        <component
+          v-else-if="'component' in item"
+          :is="item.component"
+          v-bind="item.props"
+          :screen-menu="screen || undefined"
+          :menu="!screen || undefined"
+        />
+        <VPMenuGroup v-else :text="item.text" :items="item.items" />
+      </template>
+    </ul>
+  </li>
 </template>
 
 <style scoped>
 .VPMenuGroup {
-  margin: 12px -12px 0;
+  margin: 0.75rem -0.75rem 0;
   border-top: 1px solid var(--vp-c-divider);
-  padding: 12px 12px 0;
+  padding: 0.75rem 0.75rem 0;
 }
 
 .VPMenuGroup:first-child {
@@ -31,17 +53,49 @@ defineProps<{
 }
 
 .VPMenuGroup + .VPMenuGroup {
-  margin-top: 12px;
+  margin-top: 0.75rem;
   border-top: 1px solid var(--vp-c-divider);
 }
 
 .title {
-  padding: 0 12px;
-  line-height: 32px;
-  font-size: 14px;
+  padding: 0 0.75rem;
+  line-height: 2.2857143;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
   white-space: nowrap;
   transition: color 0.25s;
 }
+
+.VPNavScreen .VPMenuGroup {
+  margin: 0;
+  border: none;
+  padding: 0;
+}
+
+.VPNavScreen .title {
+  padding: 0;
+  line-height: 2.4615385;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  white-space: normal;
+}
+
+.VPMenuGroup > .sub-groups {
+  margin-block: 0.25rem;
+  margin-inline: 0.75rem 0;
+  border-inline-start: 1px solid var(--vp-c-divider);
+  padding-inline-start: 0.25rem;
+}
+
+.VPMenuGroup .VPMenuGroup,
+.VPMenuGroup .VPMenuGroup + .VPMenuGroup {
+  margin: 0;
+  border-top: 0;
+  padding: 0.5rem 0 0;
+}
+
+.VPMenuGroup .VPMenuGroup:first-child {
+  padding-top: 0;
+}
 </style>

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

@@ -0,0 +1,22 @@
+import type { DefaultTheme } from 'vitepress/theme';
+declare const __VLS_export: <T extends DefaultTheme.NavItemWithLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        item: T;
+        rel?: string;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,55 +1,70 @@
-<script lang="ts" setup>
-import type { DefaultTheme } from 'vitepress/theme'
-import { useData } from '../composables/data'
-import { isActive } from '../../shared'
-import VPLink from './VPLink.vue'
-
-defineProps<{
-  item: DefaultTheme.NavItemWithLink
-}>()
-
-const { page } = useData()
+<script setup>
+import { inject } from "vue";
+import { navInjectionKey, navScreenInjectionKey, useNavItemLink } from "../composables/nav";
+import VPLink from "./VPLink.vue";
+const props = defineProps({
+	item: {
+		type: null,
+		required: true
+	},
+	rel: {
+		type: String,
+		required: false
+	}
+});
+const { href, isActiveLink, isCurrentLink } = useNavItemLink(() => props.item);
+const screen = inject(navScreenInjectionKey, false);
+const nav = inject(navInjectionKey, null);
+function onClick() {
+	if (screen) nav?.closeScreen();
+}
+defineOptions({ inheritAttrs: false });
 </script>
 
 <template>
-  <div class="VPMenuLink">
+  <li class="VPMenuLink">
     <VPLink
+      v-bind="$attrs"
       :class="{
-        active: isActive(
-          page.relativePath,
-          item.activeMatch || item.link,
-          !!item.activeMatch
-        )
-      }"
-      :href="item.link"
+	active: isActiveLink,
+	VPNavScreenMenuGroupLink: screen
+}"
+      :aria-current="isCurrentLink ? 'page' : undefined"
+      :href
       :target="item.target"
-      :rel="item.rel"
+      :rel="props.rel ?? item.rel"
       :no-icon="item.noIcon"
+      @click="onClick"
     >
-      <span v-html="item.text"></span>
+      <span dir="auto" v-html="item.text"></span>
     </VPLink>
-  </div>
+  </li>
 </template>
 
 <style scoped>
 .VPMenuGroup + .VPMenuLink {
-  margin: 12px -12px 0;
+  margin: 0.75rem -0.75rem 0;
   border-top: 1px solid var(--vp-c-divider);
-  padding: 12px 12px 0;
+  padding: 0.75rem 0.75rem 0;
+}
+
+.VPMenuGroup .VPMenuGroup + .VPMenuLink {
+  margin: 0;
+  border-top: 0;
+  padding: 0.5rem 0 0;
 }
 
 .link {
   display: block;
-  border-radius: 6px;
-  padding: 0 12px;
-  line-height: 32px;
-  font-size: 14px;
+  border-radius: 0.375rem;
+  padding: 0 0.75rem;
+  line-height: 2.2857143;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
+  text-align: start;
   white-space: nowrap;
-  transition:
-    background-color 0.25s,
-    color 0.25s;
+  transition: background-color 0.25s, color 0.25s;
 }
 
 .link:hover {
@@ -60,4 +75,23 @@ const { page } = useData()
 .link.active {
   color: var(--vp-c-brand-1);
 }
+
+.VPNavScreen .VPMenuLink {
+  margin: 0;
+  border: none;
+  padding: 0;
+}
+
+.VPNavScreen .link {
+  display: block;
+  margin-inline-start: 0.75rem;
+  border-radius: 0;
+  padding: 0;
+  font-weight: 400;
+  white-space: normal;
+}
+
+.VPNavScreen .link:hover {
+  background-color: transparent;
+}
 </style>

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

@@ -0,0 +1,23 @@
+declare var __VLS_10: {}, __VLS_13: {}, __VLS_16: {}, __VLS_19: {}, __VLS_28: {}, __VLS_31: {};
+type __VLS_Slots = {} & {
+    'nav-bar-title-before'?: (props: typeof __VLS_10) => any;
+} & {
+    'nav-bar-title-after'?: (props: typeof __VLS_13) => any;
+} & {
+    'nav-bar-content-before'?: (props: typeof __VLS_16) => any;
+} & {
+    'nav-bar-content-after'?: (props: typeof __VLS_19) => any;
+} & {
+    'nav-screen-content-before'?: (props: typeof __VLS_28) => any;
+} & {
+    'nav-screen-content-after'?: (props: typeof __VLS_31) => 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/VPNav.vue

@@ -1,25 +1,21 @@
-<script setup lang="ts">
-import { inBrowser } from 'vitepress'
-import { computed, provide, watchEffect } from 'vue'
-import { useData } from '../composables/data'
-import { useNav } from '../composables/nav'
-import VPNavBar from './VPNavBar.vue'
-import VPNavScreen from './VPNavScreen.vue'
-
-const { isScreenOpen, closeScreen, toggleScreen } = useNav()
-const { frontmatter } = useData()
-
+<script setup>
+import { inBrowser } from "vitepress";
+import { computed, provide, watchEffect } from "vue";
+import { useData } from "../composables/data";
+import { navInjectionKey, useNav } from "../composables/nav";
+import VPNavBar from "./VPNavBar.vue";
+import VPNavScreen from "./VPNavScreen.vue";
+const { isScreenOpen, closeScreen, toggleScreen } = useNav();
+const { frontmatter } = useData();
 const hasNavbar = computed(() => {
-  return frontmatter.value.navbar !== false
-})
-
-provide('close-screen', closeScreen)
-
+	return frontmatter.value.navbar !== false;
+});
+provide(navInjectionKey, { closeScreen });
 watchEffect(() => {
-  if (inBrowser) {
-    document.documentElement.classList.toggle('hide-nav', !hasNavbar.value)
-  }
-})
+	if (inBrowser) {
+		document.documentElement.classList.toggle("hide-nav", !hasNavbar.value);
+	}
+});
 </script>
 
 <template>
@@ -41,15 +37,13 @@ watchEffect(() => {
 .VPNav {
   position: relative;
   top: var(--vp-layout-top-height, 0px);
-  /*rtl:ignore*/
-  left: 0;
+  inset-inline-start: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;
   pointer-events: none;
-  transition: background-color 0.5s;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPNav {
     position: fixed;
   }

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    /** labeled row (nav screen and `⋯` menu) instead of the bare switch */
+    row?: boolean;
+    /** styling context for the row variant */
+    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/VPNavAppearance.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useData } from "../composables/data";
+import { useAppearanceSwitch } from "../composables/nav";
+import { useNavOverflow } from "../composables/nav-overflow";
+import VPSwitchAppearance from "./VPSwitchAppearance.vue";
+const props = defineProps({
+	row: {
+		type: Boolean,
+		required: false
+	},
+	screen: {
+		type: Boolean,
+		required: false
+	}
+});
+const { theme } = useData();
+const show = useAppearanceSwitch();
+// only the inline bar switch participates in the overflow engine
+const overflow = props.row ? null : useNavOverflow();
+const isCollapsed = computed(() => !!overflow && !overflow.state.appearance);
+const labelId = useId();
+</script>
+
+<template>
+  <div
+    v-if="show"
+    class="VPNavAppearance"
+    :class="[row ? screen ? 'VPNavScreenAppearance' : 'menu-appearance' : 'VPNavBarAppearance', { collapsed: isCollapsed }]"
+    :ref="(el) => overflow?.setClusterEl('appearance', el)"
+  >
+    <p v-if="row" :id="labelId" class="text">
+      {{ theme.darkModeSwitchLabel || "Appearance" }}
+    </p>
+    <VPSwitchAppearance :aria-labelledby="row ? labelId : undefined" />
+  </div>
+</template>
+
+<style scoped>
+.VPNavBarAppearance {
+  display: none;
+}
+
+@media (min-width: 48rem) {
+  .VPNavBarAppearance {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.VPNavAppearance .text {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+/* labeled row inside the nav screen */
+.VPNavScreenAppearance {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 0.5rem;
+  padding-block: 0.75rem;
+  padding-inline: 1rem 0.875rem;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.VPNavScreenAppearance .text {
+  line-height: 2;
+}
+
+/* labeled row inside the `⋯` menu */
+.menu-appearance {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  min-width: 11rem;
+  padding: 0 0.75rem;
+}
+
+/* matches the menu group titles */
+.menu-appearance .text {
+  line-height: 2.2857143;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+</style>

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    isScreenOpen: boolean;
+};
+declare var __VLS_8: {}, __VLS_11: {}, __VLS_13: {}, __VLS_45: {};
+type __VLS_Slots = {} & {
+    'nav-bar-title-before'?: (props: typeof __VLS_8) => any;
+} & {
+    'nav-bar-title-after'?: (props: typeof __VLS_11) => any;
+} & {
+    'nav-bar-content-before'?: (props: typeof __VLS_13) => any;
+} & {
+    'nav-bar-content-after'?: (props: typeof __VLS_45) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "toggle-screen": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onToggle-screen"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};