rename MenuItem to OutlineItem and scope it to DefaultTheme

docs/en/reference/default-theme-config.md

@@ -474,7 +474,7 @@ interface {
   hasAside: ComputedRef<boolean>
   leftAside: ComputedRef<boolean>
 
-  headers: ShallowRef<MenuItem>
+  headers: ShallowRef<DefaultTheme.OutlineItem[]>
   hasLocalNav: ComputedRef<boolean>
 }
 ```

src/client/theme-default/components/VPDocOutlineItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { MenuItem } from '../../shared'
+import type { DefaultTheme } from 'vitepress/theme'
 
 defineProps<{
-  headers: MenuItem[]
+  headers: DefaultTheme.OutlineItem[]
   root?: boolean
 }>()
 

src/client/theme-default/components/VPLocalNavOutlineDropdown.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { onKeyStroke } from '@vueuse/core'
 import { onContentUpdated } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
 import { nextTick, ref, watch } from 'vue'
-import type { MenuItem } from '../../shared'
 import { useData } from '../composables/data'
 import { resolveTitle } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
 
 const props = defineProps<{
-  headers: MenuItem[]
+  headers: DefaultTheme.OutlineItem[]
   navHeight: number
 }>()
 

src/client/theme-default/components/VPNavBarSearch.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import '@docsearch/css'
 import { onKeyStroke } from '@vueuse/core'
+import type { DefaultTheme } from 'vitepress/theme'
 import {
   defineAsyncComponent,
   onMounted,
   onUnmounted,
   ref
 } from 'vue'
-import type { DefaultTheme } from '../../shared'
 import { useData } from '../composables/data'
 import VPNavBarSearchButton from './VPNavBarSearchButton.vue'
 

src/client/theme-default/composables/layout.ts

@@ -1,13 +1,13 @@
 import { useMediaQuery } from '@vueuse/core'
 import { onContentUpdated, useRoute } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
 import { computed, shallowRef, watch } from 'vue'
-import { type MenuItem } from '../../shared'
 import { getSidebar, getSidebarGroups } from '../support/sidebar'
 import { useData } from './data'
 import { getHeaders } from './outline'
 import { useCloseSidebarOnEscape } from './sidebar'
 
-const headers = shallowRef<MenuItem[]>([])
+const headers = shallowRef<DefaultTheme.OutlineItem[]>([])
 
 export function useLayout() {
   const { frontmatter, page, theme } = useData()

src/client/theme-default/composables/outline.ts

@@ -1,7 +1,6 @@
 import { getScrollOffset } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
 import { onMounted, onUnmounted, onUpdated, type Ref } from 'vue'
-import type { MenuItem } from '../../shared'
 import { throttleAndDebounce } from '../support/utils'
 import { useAside } from './aside'
 
@@ -20,7 +19,9 @@ export function resolveTitle(theme: DefaultTheme.Config): string {
   )
 }
 
-export function getHeaders(range: DefaultTheme.Config['outline']): MenuItem[] {
+export function getHeaders(
+  range: DefaultTheme.Config['outline']
+): DefaultTheme.OutlineItem[] {
   const headers = [
     ...document.querySelectorAll('.VPDoc :where(h1,h2,h3,h4,h5,h6)')
   ]
@@ -52,9 +53,9 @@ function serializeHeader(h: Element): string {
 }
 
 export function resolveHeaders(
-  headers: MenuItem[],
+  headers: DefaultTheme.OutlineItem[],
   range?: DefaultTheme.Config['outline']
-): MenuItem[] {
+): DefaultTheme.OutlineItem[] {
   if (range === false) {
     return []
   }
@@ -188,11 +189,18 @@ function getAbsoluteTop(element: HTMLElement): number {
   return offsetTop
 }
 
-function buildTree(data: MenuItem[], min: number, max: number): MenuItem[] {
+function buildTree(
+  data: DefaultTheme.OutlineItem[],
+  min: number,
+  max: number
+): DefaultTheme.OutlineItem[] {
   resolvedHeaders.length = 0
 
-  const result: MenuItem[] = []
+  const result: DefaultTheme.OutlineItem[] = []
-  const stack: (MenuItem | { level: number; shouldIgnore: true })[] = []
+  const stack: (
+    | DefaultTheme.OutlineItem
+    | { level: number; shouldIgnore: true }
+  )[] = []
 
   data.forEach((item) => {
     const node = { ...item, children: [] }

src/shared/shared.ts

@@ -8,7 +8,6 @@ export type {
   LocaleConfig,
   LocaleSpecificConfig,
   MarkdownEnv,
-  MenuItem,
   PageData,
   PageDataPayload,
   SiteData,

theme.d.ts

@@ -3,7 +3,6 @@
 import type { ComputedRef, DefineComponent, ShallowRef } from 'vue'
 import type { EnhanceAppContext } from './dist/client/index.js'
 import type { DefaultTheme } from './types/default-theme.js'
-import type { MenuItem } from './types/shared.js'
 
 export type { DefaultTheme } from './types/default-theme.js'
 
@@ -28,7 +27,7 @@ export declare const useLayout: () => {
   /**
    * The outline headers of the current page.
    */
-  headers: ShallowRef<MenuItem>
+  headers: ShallowRef<DefaultTheme.OutlineItem[]>
   /**
    * Whether the current page has a local nav. Local nav is shown when the
    * "outline" is present in the page. However, note that the actual

types/default-theme.d.ts

@@ -1,7 +1,7 @@
 import type { Options as _MiniSearchOptions } from 'minisearch'
 import type { DocSearchProps } from './docsearch.js'
 import type { LocalSearchTranslations } from './local-search.js'
-import type { PageData } from './shared.js'
+import type { Header, PageData } from './shared.js'
 
 export namespace DefaultTheme {
   export interface Config {
@@ -347,6 +347,11 @@ export namespace DefaultTheme {
     label?: string
   }
 
+  export type OutlineItem = Omit<Header, 'slug' | 'children'> & {
+    element: HTMLHeadElement
+    children?: OutlineItem[]
+  }
+
   // local search --------------------------------------------------------------
 
   export interface LocalSearchOptions {

types/shared.d.ts

@@ -205,8 +205,3 @@ export interface MarkdownEnv {
   realPath?: string
   localeIndex?: string
 }
-
-export type MenuItem = Omit<Header, 'slug' | 'children'> & {
-  element: HTMLHeadElement
-  children?: MenuItem[]
-}