wip

6 months ago · d847773e15
parent a02db2b3bc
commit d847773e15
30 changed files with 62 additions and 85 deletions
--- a/tests/e2e/.vitepress/theme/components/ApiPreference.vue
+++ b/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"
      />
--- a/docs/en/reference/default-theme-team-page.md
+++ b/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>
 ```
--- a/docs/es/reference/default-theme-team-page.md
+++ b/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>
 ```
--- a/docs/fa/reference/default-theme-team-page.md
+++ b/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>
 ```
--- a/docs/ko/reference/default-theme-team-page.md
+++ b/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>
 ```
--- a/docs/pt/reference/default-theme-team-page.md
+++ b/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>
 ```
--- a/docs/ru/reference/default-theme-team-page.md
+++ b/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>
 ```

--- a/docs/zh/reference/default-theme-team-page.md
+++ b/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>
 ```
--- a/src/client/app/utils.ts
+++ b/src/client/app/utils.ts
@ -1,10 +1,5 @@
-import {
-  h,
-  onMounted,
-  onUnmounted,
-  shallowRef,
-  type AsyncComponentLoader
-} from 'vue'
+import { tryOnUnmounted } from '@vueuse/core'
+import { h, onMounted, 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)
  })
 }
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/src/client/theme-default/components/VPDocAsideOutline.vue
@ -1,26 +1,17 @@
 <script setup lang="ts">
-import { onContentUpdated } from 'vitepress'
-import { ref, shallowRef } from 'vue'
-import type { MenuItem } from '../../shared'
+import { ref } from 'vue'
 import { useData } from '../composables/data'
-import {
-  getHeaders,
-  resolveTitle,
-  useActiveAnchor
-} from '../composables/outline'
+import { resolveTitle, useActiveAnchor } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
+import { useLayout } from '../composables/layout'

-const { frontmatter, theme } = useData()
-
-const headers = shallowRef<MenuItem[]>([])
-
-onContentUpdated(() => {
-  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
-})
+const { theme } = useData()

 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>
--- a/src/client/theme-default/components/VPDocAsideSponsors.vue
+++ b/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>
--- a/src/client/theme-default/components/VPDocOutlineItem.vue
+++ b/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">
--- a/src/client/theme-default/components/VPFeature.vue
+++ b/src/client/theme-default/components/VPFeature.vue
@ -18,8 +18,8 @@ defineProps<{
  <VPLink
    class="VPFeature"
    :href="link"
-    :rel="rel"
-    :target="target"
+    :rel
+    :target
    :no-icon="true"
    :tag="link ? 'a' : 'div'"
  >
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/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>
--- a/src/client/theme-default/components/VPHero.vue
+++ b/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>
--- a/src/client/theme-default/components/VPHomeSponsors.vue
+++ b/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">
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/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>
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/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>
--- a/src/client/theme-default/components/VPMenu.vue
+++ b/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"
--- a/src/client/theme-default/components/VPMenuGroup.vue
+++ b/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>
--- a/src/client/theme-default/components/VPNavBarMenu.vue
+++ b/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>
--- a/src/client/theme-default/components/VPNavBarTitle.vue
+++ b/src/client/theme-default/components/VPNavBarTitle.vue
@ -34,8 +34,8 @@ const target = computed(() =>
    <a
      class="title"
      :href="link ?? normalizeLink(currentLang.link)"
-      :rel="rel"
-      :target="target"
+      :rel
+      :target
    >
      <slot name="nav-bar-title-before" />
      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
--- a/src/client/theme-default/components/VPNavScreenMenu.vue
+++ b/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"
--- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue
+++ b/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">
--- a/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue
+++ b/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
-      v-for="item in items"
-      :key="item.text"
-      :item="item"
-    />
+    <VPNavScreenMenuGroupLink v-for="item in items" :key="item.text" :item />
  </div>
 </template>

--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/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>
--- a/src/client/theme-default/components/VPSidebarGroup.vue
+++ b/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>

--- a/src/client/theme-default/components/VPSocialLinks.vue
+++ b/src/client/theme-default/components/VPSocialLinks.vue
@ -12,9 +12,9 @@ defineProps<{
    <VPSocialLink
      v-for="{ link, icon, ariaLabel } in links"
      :key="link"
-      :icon="icon"
-      :link="link"
-      :ariaLabel="ariaLabel"
+      :icon
+      :link
+      :ariaLabel
    />
  </div>
 </template>
--- a/src/client/theme-default/components/VPTeamMembers.vue
+++ b/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>
--- a/src/client/theme-default/composables/layout.ts
+++ b/src/client/theme-default/composables/layout.ts
@ -49,14 +49,15 @@ export function useLayout() {

  const headers = shallowRef<MenuItem[]>([])

-  const hasLocalNav = computed(() => {
-    return headers.value.length > 0
-  })
-
+  // TODO: optimize this
  onContentUpdated(() => {
    headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
  })

+  const hasLocalNav = computed(() => {
+    return headers.value.length > 0
+  })
+
  return {
    isHome,
    sidebar,