wip

__tests__/e2e/.vitepress/theme/components/ApiPreference.vue

@@ -30,7 +30,7 @@ function removeSpaces(str: string) {
       <input
         type="radio"
         :id="option.key"
-        :name="name"
+        :name
         :value="option.value"
         v-model="selected"
       />

docs/en/reference/default-theme-team-page.md

@@ -53,12 +53,12 @@ const members = [
 
 Say hello to our awesome team.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 ```
 
 The above will display a team member in card looking element. It should display something similar to below.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 
 `<VPTeamMembers>` component comes in 2 different sizes, `small` and `medium`. While it boils down to your preference, usually `small` size should fit better when used in doc page. Also, you may add more properties to each member such as adding "description" or "sponsor" button. Learn more about it in [`<VPTeamMembers>`](#vpteammembers).
 
@@ -108,7 +108,7 @@ const members = [
     </template>
   </VPTeamPageTitle>
   <VPTeamMembers
-    :members="members"
+    :members
   />
 </VPTeamPage>
 ```

docs/es/reference/default-theme-team-page.md

@@ -53,12 +53,12 @@ const members = [
 
 Saluda a nuestro increible equipo.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 ```
 
 El código anterior mostrará a un miembro del equipo en un elemento similar a una tarjeta. Debería mostrar algo similar a lo siguiente.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 
 El componente `<VPTeamMembers>` viene en dos tamaños diferentes, pequeño `small` y médio `medium`. Si bien es una cuestión de preferencia, generalmente el tamaño `small` debería encajar mejor cuando se use en la página del documento. Además, puede agregar más propiedades a cada miembro, como agregar el botón "descripción" o "patrocinador". Obtenga más información sobre en [`<VPTeamMembers>`](#vpteammembers).
 
@@ -108,7 +108,7 @@ const members = [
     </template>
   </VPTeamPageTitle>
   <VPTeamMembers
-    :members="members"
+    :members
   />
 </VPTeamPage>
 ```

docs/fa/reference/default-theme-team-page.md

@@ -53,12 +53,12 @@ const members = [
 
 با سلام به تیم فوق‌العاده‌ی ما خوش آمدید.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 ```
 
 بالا به صورت عنصری با شکل کارتی اعضای تیم را نمایش می‌دهد. باید به شکل زیر نمایش داده شود.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 
 کامپوننت `<VPTeamMembers>` دارای دو اندازه مختلف، `small` و `medium` است. معمولاً اندازه `small` برای استفاده در صفحات مستندات مناسب‌تر است. همچنین می‌توانید ویژگی‌های بیشتری برای هر عضو اضافه کنید مانند "توضیحات" یا "دکمه حامی". جهت کسب اطلاعات بیشتر به [`<VPTeamMembers>`](#vpteammembers) مراجعه کنید.
 
@@ -107,7 +107,7 @@ const members = [
     </template>
   </VPTeamPageTitle>
   <VPTeamMembers
-    :members="members"
+    :members
   />
 </VPTeamPage>
 ```

docs/ko/reference/default-theme-team-page.md

@@ -53,12 +53,12 @@ const members = [
 
 Say hello to our awesome team.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 ```
 
 위 코드는 카드 형태의 엘리먼트로 팀 구성원을 표시합니다. 아래와 비슷한 형태로 표시됩니다.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 
 `<VPTeamMembers>` 컴포넌트는 `small`과 `medium` 두 가지 크기로 제공됩니다. 개인의 선호도에 따라 선택할 수 있지만, 일반적으로 `small` 사이즈가 문서 페이지에 더 적합합니다. 또한, 각 구성원에 "설명"이나 "후원" 버튼과 같은 프로퍼티를 추가할 수도 있습니다. 자세한 내용은 [`<VPTeamMembers>`](#vpteammembers)에서 확인할 수 있습니다.
 
@@ -108,7 +108,7 @@ const members = [
     </template>
   </VPTeamPageTitle>
   <VPTeamMembers
-    :members="members"
+    :members
   />
 </VPTeamPage>
 ```

docs/pt/reference/default-theme-team-page.md

@@ -53,12 +53,12 @@ const members = [
 
 Diga olá à nossa equipe incrível.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 ```
 
 O código acima exibirá um membro da equipe em um elemento tipo cartão. Ele deve exibir algo semelhante ao abaixo.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 
 O componente `<VPTeamMembers>` vem em 2 tamanhos diferentes, pequeno `small` e médio `medium`. Enquanto é uma questão de preferência, geralmente o tamanho `small` deve encaixar melhor quando usado na página de documento. Além disso, você pode adicionar mais propriedades a cada membro, como adicionar o botão "descrição" ou "patrocinador". Saiba mais sobre em [`<VPTeamMembers>`](#vpteammembers).
 
@@ -108,7 +108,7 @@ const members = [
     </template>
   </VPTeamPageTitle>
   <VPTeamMembers
-    :members="members"
+    :members
   />
 </VPTeamPage>
 ```

docs/ru/reference/default-theme-team-page.md

@@ -51,12 +51,12 @@ const members = [
 
 # Поприветствуйте нашу замечательную команду
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 ```
 
 Вышеуказанное отобразит члена команды в виде карточки. Должно отобразиться что-то похожее на то, что показано ниже.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 
 Компонент `<VPTeamMembers>` поставляется в двух различных размерах, `small` и `medium`. Хотя это зависит от ваших предпочтений, обычно размер `small` лучше подходит для использования на странице с макетом `doc`. Кроме того, вы можете добавить дополнительные свойства для карточки члена команды, например, добавить «описание» или кнопку «спонсировать». Подробнее об этом в секции [`<VPTeamMembers>`](#vpteammembers).
 
@@ -104,7 +104,7 @@ layout: page
       которой представлены ниже.
     </template>
   </VPTeamPageTitle>
-  <VPTeamMembers :members="members" />
+  <VPTeamMembers :members />
 </VPTeamPage>
 ```
 

docs/zh/reference/default-theme-team-page.md

@@ -53,12 +53,12 @@ const members = [
 
 Say hello to our awesome team.
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 ```
 
 以上将在卡片外观元素中显示团队成员。它应该显示类似于下面的内容。
 
-<VPTeamMembers size="small" :members="members" />
+<VPTeamMembers size="small" :members />
 
 `<VPTeamMembers>` 组件有 2 种不同的尺寸，`small` 和 `medium`。虽然它取决于你的偏好，但通常尺寸在文档页面中使用时 `small` 应该更适合。此外，你可以为每个成员添加更多属性，例如添加“描述”或“赞助”按钮。在 [`<VPTeamMembers>`](#vpteammembers) 中了解更多信息。
 
@@ -108,7 +108,7 @@ const members = [
     </template>
   </VPTeamPageTitle>
   <VPTeamMembers
-    :members="members"
+    :members
   />
 </VPTeamPage>
 ```

src/client/app/utils.ts

@@ -1,10 +1,5 @@
-import {
+import { tryOnUnmounted } from '@vueuse/core'
-  h,
+import { h, onMounted, shallowRef, type AsyncComponentLoader } from 'vue'
-  onMounted,
-  onUnmounted,
-  shallowRef,
-  type AsyncComponentLoader
-} from 'vue'
 import {
   EXTERNAL_URL_RE,
   inBrowser,
@@ -81,7 +76,7 @@ export let contentUpdatedCallbacks: (() => any)[] = []
  */
 export function onContentUpdated(fn: () => any) {
   contentUpdatedCallbacks.push(fn)
-  onUnmounted(() => {
+  tryOnUnmounted(() => {
     contentUpdatedCallbacks = contentUpdatedCallbacks.filter((f) => f !== fn)
   })
 }

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

@@ -1,26 +1,17 @@
 <script setup lang="ts">
-import { onContentUpdated } from 'vitepress'
+import { ref } from 'vue'
-import { ref, shallowRef } from 'vue'
-import type { MenuItem } from '../../shared'
 import { useData } from '../composables/data'
-import {
+import { resolveTitle, useActiveAnchor } from '../composables/outline'
-  getHeaders,
-  resolveTitle,
-  useActiveAnchor
-} from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
+import { useLayout } from '../composables/layout'
 
-const { frontmatter, theme } = useData()
+const { theme } = useData()
-
-const headers = shallowRef<MenuItem[]>([])
-
-onContentUpdated(() => {
-  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
-})
 
 const container = ref()
 const marker = ref()
 
+const { headers, hasLocalNav } = useLayout()
+
 useActiveAnchor(container, marker)
 </script>
 
@@ -28,7 +19,7 @@ useActiveAnchor(container, marker)
   <nav
     aria-labelledby="doc-outline-aria-label"
     class="VPDocAsideOutline"
-    :class="{ 'has-outline': headers.length > 0 }"
+    :class="{ 'has-outline': hasLocalNav }"
     ref="container"
   >
     <div class="content">
@@ -43,7 +34,7 @@ useActiveAnchor(container, marker)
         {{ resolveTitle(theme) }}
       </div>
 
-      <VPDocOutlineItem :headers="headers" :root="true" />
+      <VPDocOutlineItem :headers :root="true" />
     </div>
   </nav>
 </template>

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

@@ -12,6 +12,6 @@ defineProps<{
 
 <template>
   <div class="VPDocAsideSponsors">
-    <VPSponsors mode="aside" :tier="tier" :size="size" :data="data" />
+    <VPSponsors mode="aside" :tier :size :data />
   </div>
 </template>

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

@@ -16,7 +16,7 @@ function onClick({ target: el }: Event) {
 <template>
   <ul class="VPDocOutlineItem" :class="root ? 'root' : 'nested'">
     <li v-for="{ children, link, title } in headers">
-      <a class="outline-link" :href="link" @click="onClick" :title="title">
+      <a class="outline-link" :href="link" @click="onClick" :title>
         {{ title }}
       </a>
       <template v-if="children?.length">

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

@@ -18,8 +18,8 @@ defineProps<{
   <VPLink
     class="VPFeature"
     :href="link"
-    :rel="rel"
+    :rel
-    :target="target"
+    :target
     :no-icon="true"
     :tag="link ? 'a' : 'div'"
   >

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

@@ -45,7 +45,7 @@ function onBlur() {
     </button>
 
     <div class="menu">
-      <VPMenu :items="items">
+      <VPMenu :items>
         <slot />
       </VPMenu>
     </div>

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

@@ -57,7 +57,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
         <div class="image-container">
           <div class="image-bg" />
           <slot name="home-hero-image">
-            <VPImage v-if="image" class="image-src" :image="image" />
+            <VPImage v-if="image" class="image-src" :image />
           </slot>
         </div>
       </div>

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

@@ -36,7 +36,7 @@ withDefaults(defineProps<Props>(), {
       </div>
 
       <div class="sponsors">
-        <VPSponsors :data="data" />
+        <VPSponsors :data />
       </div>
 
       <div v-if="actionLink" class="action">

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

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
-import { onContentUpdated } from 'vitepress'
 import { computed, onMounted, ref } from 'vue'
 import { useData } from '../composables/data'
 import { useLayout } from '../composables/layout'
-import { getHeaders } from '../composables/outline'
 import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
 
 defineProps<{
@@ -29,10 +27,6 @@ onMounted(() => {
   )
 })
 
-onContentUpdated(() => {
-  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
-})
-
 const empty = computed(() => {
   return headers.value.length === 0
 })
@@ -70,7 +64,7 @@ const classes = computed(() => {
         </span>
       </button>
 
-      <VPLocalNavOutlineDropdown :headers="headers" :navHeight="navHeight" />
+      <VPLocalNavOutlineDropdown :headers :navHeight />
     </div>
   </div>
 </template>

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

@@ -84,7 +84,7 @@ function scrollToTop() {
           </a>
         </div>
         <div class="outline">
-          <VPDocOutlineItem :headers="headers" />
+          <VPDocOutlineItem :headers />
         </div>
       </div>
     </Transition>

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

@@ -11,7 +11,7 @@ defineProps<{
   <div class="VPMenu">
     <div 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"

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

@@ -12,7 +12,7 @@ defineProps<{
     <p v-if="text" class="title">{{ text }}</p>
 
     <template v-for="item in items">
-      <VPMenuLink v-if="'link' in item" :item="item" />
+      <VPMenuLink v-if="'link' in item" :item />
     </template>
   </div>
 </template>

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

@@ -16,13 +16,13 @@ const { theme } = useData()
       Main Navigation
     </span>
     <template v-for="item in theme.nav" :key="JSON.stringify(item)">
-      <VPNavBarMenuLink v-if="'link' in item" :item="item" />
+      <VPNavBarMenuLink v-if="'link' in item" :item />
       <component
         v-else-if="'component' in item"
         :is="item.component"
         v-bind="item.props"
       />
-      <VPNavBarMenuGroup v-else :item="item" />
+      <VPNavBarMenuGroup v-else :item />
     </template>
   </nav>
 </template>

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

@@ -34,8 +34,8 @@ const target = computed(() =>
     <a
       class="title"
       :href="link ?? normalizeLink(currentLang.link)"
-      :rel="rel"
+      :rel
-      :target="target"
+      :target
     >
       <slot name="nav-bar-title-before" />
       <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />

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

@@ -9,7 +9,7 @@ const { theme } = useData()
 <template>
   <nav v-if="theme.nav" class="VPNavScreenMenu">
     <template v-for="item in theme.nav" :key="JSON.stringify(item)">
-      <VPNavScreenMenuLink v-if="'link' in item" :item="item" />
+      <VPNavScreenMenuLink v-if="'link' in item" :item />
       <component
         v-else-if="'component' in item"
         :is="item.component"

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

@@ -34,7 +34,7 @@ function toggle() {
     <div :id="groupId" class="items">
       <template v-for="item in items" :key="JSON.stringify(item)">
         <div v-if="'link' in item" class="item">
-          <VPNavScreenMenuGroupLink :item="item" />
+          <VPNavScreenMenuGroupLink :item />
         </div>
 
         <div v-else-if="'component' in item" class="item">

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

@@ -11,11 +11,7 @@ defineProps<{
 <template>
   <div class="VPNavScreenMenuGroupSection">
     <p v-if="text" class="title">{{ text }}</p>
-    <VPNavScreenMenuGroupLink
+    <VPNavScreenMenuGroupLink v-for="item in items" :key="item.text" :item />
-      v-for="item in items"
-      :key="item.text"
-      :item="item"
-    />
   </div>
 </template>
 

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

@@ -58,7 +58,7 @@ watch(
       </span>
 
       <slot name="sidebar-nav-before" />
-      <VPSidebarGroup :items="sidebarGroups" :key="key" />
+      <VPSidebarGroup :items="sidebarGroups" :key />
       <slot name="sidebar-nav-after" />
     </nav>
   </aside>

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

@@ -33,7 +33,7 @@ onBeforeUnmount(() => {
     class="group"
     :class="{ 'no-transition': disableTransition }"
   >
-    <VPSidebarItem :item="item" :depth="0" />
+    <VPSidebarItem :item :depth="0" />
   </div>
 </template>
 

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

@@ -12,9 +12,9 @@ defineProps<{
     <VPSocialLink
       v-for="{ link, icon, ariaLabel } in links"
       :key="link"
-      :icon="icon"
+      :icon
-      :link="link"
+      :link
-      :ariaLabel="ariaLabel"
+      :ariaLabel
     />
   </div>
 </template>

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

@@ -19,7 +19,7 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
   <div class="VPTeamMembers" :class="classes">
     <div class="container">
       <div v-for="member in members" :key="member.name" class="item">
-        <VPTeamMembersItem :size="size" :member="member" />
+        <VPTeamMembersItem :size :member />
       </div>
     </div>
   </div>

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

@@ -49,14 +49,15 @@ export function useLayout() {
 
   const headers = shallowRef<MenuItem[]>([])
 
-  const hasLocalNav = computed(() => {
+  // TODO: optimize this
-    return headers.value.length > 0
-  })
-
   onContentUpdated(() => {
     headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
   })
 
+  const hasLocalNav = computed(() => {
+    return headers.value.length > 0
+  })
+
   return {
     isHome,
     sidebar,