vitepress-theme-element-plus 0.0.3 → 0.0.4

package/client/components/VPNavBarSearch.vue

@@ -1,23 +1,23 @@
-<script lang="ts" setup>
-import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNavBarSearch.vue'
-// compatible with vitepress-plugin-pagefind
-</script>
-
-<template>
-  <VPNavBarSearch />
-</template>
-
-<style>
-@media (min-width: 768px) {
-  .VPNavBarSearch.VPNavBarSearch {
-    flex-grow: unset;
-    padding-right: 24px;
-  }
-}
-
-@media (min-width: 960px) {
-  .VPNavBarSearch.VPNavBarSearch {
-    padding-right: 32px;
-  }
-}
-</style>
+<script lang="ts" setup>
+import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNavBarSearch.vue'
+// compatible with vitepress-plugin-pagefind
+</script>
+
+<template>
+  <VPNavBarSearch />
+</template>
+
+<style>
+@media (min-width: 768px) {
+  .VPNavBarSearch.VPNavBarSearch {
+    flex-grow: unset;
+    padding-right: 24px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPNavBarSearch.VPNavBarSearch {
+    padding-right: 32px;
+  }
+}
+</style>

package/client/components/VersionTag.vue

@@ -1,18 +1,18 @@
-<script lang="ts" setup>
-import { ElTag } from 'element-plus'
-
-defineProps<{
-  version: string
-}>()
-</script>
-
-<template>
-  <ElTag
-    size="small"
-    effect="plain"
-    hit
-    round
-  >
-    {{ version }}
-  </ElTag>
-</template>
+<script lang="ts" setup>
+import { ElTag } from 'element-plus'
+
+defineProps<{
+  version: string
+}>()
+</script>
+
+<template>
+  <ElTag
+    size="small"
+    effect="plain"
+    hit
+    round
+  >
+    {{ version }}
+  </ElTag>
+</template>

package/client/hooks/useBackTop.ts

@@ -1,74 +1,74 @@
 import { isClient } from '@vueuse/core'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { throttle } from '../utils/throttle'
-
-const threshold = 960
-
-const cubic = (value: number): number => value ** 3
-function easeInOutCubic(value: number): number {
-  return value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2
-}
-
-export function useBackTop(offset = 200) {
-  const shouldShow = ref(false)
-  const throttleResize = throttle(onResize, 300)
-  const throttleScroll = throttle(onScroll, 160)
-
-  onMounted(() => {
-    if (!isClient)
-      return
-    onResize()
-    onScroll()
-    window.addEventListener('resize', throttleResize)
-  })
-
-  onBeforeUnmount(() => {
-    if (!isClient)
-      return
-    window.removeEventListener('resize', throttleResize)
-    window.removeEventListener('scroll', throttleScroll)
-  })
-
-  const scrollToTop = () => {
-    const beginTime = Date.now()
-    const beginValue = document.documentElement.scrollTop
-    const rAF = window.requestAnimationFrame
-    const frameFunc = () => {
-      const progress = (Date.now() - beginTime) / 500
-      if (progress < 1) {
-        document.documentElement.scrollTop
-          = beginValue * (1 - easeInOutCubic(progress))
-        rAF(frameFunc)
-      }
-      else {
-        document.documentElement.scrollTop = 0
-      }
-    }
-    rAF(frameFunc)
-  }
-
-  function onResize() {
-    if (!isClient)
-      return
-
-    const { clientWidth } = document.body
-
-    if (clientWidth < threshold) {
-      window.addEventListener('scroll', throttleScroll)
-    }
-    else {
-      window.removeEventListener('scroll', throttleScroll)
-    }
-  }
-
-  function onScroll() {
-    if (!isClient)
-      return
-    shouldShow.value = document.documentElement.scrollTop > offset
-  }
-
-  return {
-    shouldShow,
-    scrollToTop,
-  }
-}
+
+const threshold = 960
+
+const cubic = (value: number): number => value ** 3
+function easeInOutCubic(value: number): number {
+  return value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2
+}
+
+export function useBackTop(offset = 200) {
+  const shouldShow = ref(false)
+  const throttleResize = throttle(onResize, 300)
+  const throttleScroll = throttle(onScroll, 160)
+
+  onMounted(() => {
+    if (!isClient)
+      return
+    onResize()
+    onScroll()
+    window.addEventListener('resize', throttleResize)
+  })
+
+  onBeforeUnmount(() => {
+    if (!isClient)
+      return
+    window.removeEventListener('resize', throttleResize)
+    window.removeEventListener('scroll', throttleScroll)
+  })
+
+  const scrollToTop = () => {
+    const beginTime = Date.now()
+    const beginValue = document.documentElement.scrollTop
+    const rAF = window.requestAnimationFrame
+    const frameFunc = () => {
+      const progress = (Date.now() - beginTime) / 500
+      if (progress < 1) {
+        document.documentElement.scrollTop
+          = beginValue * (1 - easeInOutCubic(progress))
+        rAF(frameFunc)
+      }
+      else {
+        document.documentElement.scrollTop = 0
+      }
+    }
+    rAF(frameFunc)
+  }
+
+  function onResize() {
+    if (!isClient)
+      return
+
+    const { clientWidth } = document.body
+
+    if (clientWidth < threshold) {
+      window.addEventListener('scroll', throttleScroll)
+    }
+    else {
+      window.removeEventListener('scroll', throttleScroll)
+    }
+  }
+
+  function onScroll() {
+    if (!isClient)
+      return
+    shouldShow.value = document.documentElement.scrollTop > offset
+  }
+
+  return {
+    shouldShow,
+    scrollToTop,
+  }
+}

package/client/hooks/useLangs.ts

@@ -1,50 +1,50 @@
-import { useData } from 'vitepress'
-import { computed } from 'vue'
-import { ensureStartingSlash } from '../utils/common'
-
-export function useLangs({ correspondingLink = false } = {}) {
-  const { site, localeIndex, page, theme, hash } = useData()
-  const currentLang = computed(() => ({
-    label: site.value.locales[localeIndex.value]?.label,
-    link:
-      site.value.locales[localeIndex.value]?.link
-      || (localeIndex.value === 'root' ? '/' : `/${localeIndex.value}/`),
-  }))
-
-  const localeLinks = computed(() =>
-    Object.entries(site.value.locales).flatMap(([key, value]) =>
-      currentLang.value.label === value.label
-        ? []
-        : {
-            text: value.label,
-            link:
-              normalizeLink(
-                value.link || (key === 'root' ? '/' : `/${key}/`),
-                theme.value.i18nRouting !== false && correspondingLink,
-                page.value.relativePath.slice(
-                  currentLang.value.link.length - 1,
-                ),
-                !site.value.cleanUrls,
-              ) + hash.value,
-          },
-    ),
-  )
-
-  return { localeLinks, currentLang }
-}
-
-function normalizeLink(
-  link: string,
-  addPath: boolean,
-  path: string,
-  addExt: boolean,
-) {
-  return addPath
-    ? link.replace(/\/$/, '')
-    + ensureStartingSlash(
-      path
-        .replace(/(^|\/)index\.md$/, '$1')
-        .replace(/\.md$/, addExt ? '.html' : ''),
-    )
-    : link
-}
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+import { ensureStartingSlash } from '../utils/common'
+
+export function useLangs({ correspondingLink = false } = {}) {
+  const { site, localeIndex, page, theme, hash } = useData()
+  const currentLang = computed(() => ({
+    label: site.value.locales[localeIndex.value]?.label,
+    link:
+      site.value.locales[localeIndex.value]?.link
+      || (localeIndex.value === 'root' ? '/' : `/${localeIndex.value}/`),
+  }))
+
+  const localeLinks = computed(() =>
+    Object.entries(site.value.locales).flatMap(([key, value]) =>
+      currentLang.value.label === value.label
+        ? []
+        : {
+            text: value.label,
+            link:
+              normalizeLink(
+                value.link || (key === 'root' ? '/' : `/${key}/`),
+                theme.value.i18nRouting !== false && correspondingLink,
+                page.value.relativePath.slice(
+                  currentLang.value.link.length - 1,
+                ),
+                !site.value.cleanUrls,
+              ) + hash.value,
+          },
+    ),
+  )
+
+  return { localeLinks, currentLang }
+}
+
+function normalizeLink(
+  link: string,
+  addPath: boolean,
+  path: string,
+  addExt: boolean,
+) {
+  return addPath
+    ? link.replace(/\/$/, '')
+    + ensureStartingSlash(
+      path
+        .replace(/(^|\/)index\.md$/, '$1')
+        .replace(/\.md$/, addExt ? '.html' : ''),
+    )
+    : link
+}

package/client/hooks/useSidebar.ts

@@ -1,23 +1,30 @@
+import type { DefaultTheme } from 'vitepress'
 import { useMediaQuery } from '@vueuse/core'
 import { useData } from 'vitepress'
 import { computed, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'
 import { NOT_ARTICLE_LAYOUTS } from '../../shared/constants'
+import { ensureStartingSlash } from '../utils/common'
 
 export function useSidebar() {
-  const { frontmatter, theme } = useData()
+  const { frontmatter, theme, page } = useData()
   const is960 = useMediaQuery('(min-width: 960px)')
   const isOpen = ref(false)
-  const _sidebar = computed(() => {
+  const sidebar = ref<DefaultTheme.SidebarItem[]>([])
+
+  function updateSidebar() {
     const sidebarConfig = theme.value.sidebar
-    return sidebarConfig ?? []
-  })
+    const relativePath = page.value?.relativePath ?? '/'
+    const nextSidebar = resolveSidebar(sidebarConfig, relativePath)
 
-  const sidebar = ref(_sidebar.value)
+    if (JSON.stringify(nextSidebar) !== JSON.stringify(sidebar.value))
+      sidebar.value = nextSidebar
+  }
 
-  watch(_sidebar, (next, prev) => {
-    if (JSON.stringify(next) !== JSON.stringify(prev))
-      sidebar.value = _sidebar.value
-  })
+  watch(
+    () => [page.value?.relativePath, theme.value.sidebar],
+    () => updateSidebar(),
+    { immediate: true, deep: true, flush: 'sync' },
+  )
 
   const hasSidebar = computed(() => {
     return (
@@ -28,9 +35,9 @@ export function useSidebar() {
   })
 
   const hasAside = computed(() => {
-    if (NOT_ARTICLE_LAYOUTS.includes(frontmatter.value.layout)) {
+    if (NOT_ARTICLE_LAYOUTS.includes(frontmatter.value.layout))
       return false
-    }
+
     if (frontmatter.value.aside !== undefined && frontmatter.value.aside !== null)
       return !!frontmatter.value.aside
 
@@ -38,18 +45,18 @@ export function useSidebar() {
   })
 
   const leftAside = computed(() => {
-    if (hasAside) {
-      return frontmatter.value.aside === null
-        ? theme.value.aside === 'left'
-        : frontmatter.value.aside === 'left'
-    }
-    return false
+    if (!hasAside.value)
+      return false
+
+    return frontmatter.value.aside === null
+      ? theme.value.aside === 'left'
+      : frontmatter.value.aside === 'left'
   })
 
   const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
 
   const sidebarGroups = computed(() => {
-    return hasSidebar.value ?? []
+    return hasSidebar.value ? groupSidebarItems(sidebar.value) : []
   })
 
   function open() {
@@ -103,3 +110,71 @@ export function useCloseSidebarOnEscape() {
     }
   }
 }
+
+function resolveSidebar(
+  sidebarConfig: DefaultTheme.Sidebar | undefined,
+  relativePath: string,
+): DefaultTheme.SidebarItem[] {
+  if (!sidebarConfig)
+    return []
+
+  if (Array.isArray(sidebarConfig))
+    return withBase(sidebarConfig)
+
+  const normalizedPath = ensureStartingSlash(relativePath)
+  const matchingDir = Object.keys(sidebarConfig)
+    .sort((a, b) => b.split('/').length - a.split('/').length)
+    .find(dir => normalizedPath.startsWith(ensureStartingSlash(dir)))
+
+  const matched = matchingDir ? sidebarConfig[matchingDir] : []
+
+  if (Array.isArray(matched))
+    return withBase(matched)
+
+  return withBase(matched?.items ?? [], matched?.base)
+}
+
+function withBase(
+  items: DefaultTheme.SidebarItem[],
+  base?: string,
+): DefaultTheme.SidebarItem[] {
+  return items.map((_item) => {
+    const item: DefaultTheme.SidebarItem = { ..._item }
+    const resolvedBase = item.base || base
+
+    if (resolvedBase && item.link) {
+      item.link = resolvedBase
+        + item.link.replace(/^\//, resolvedBase.endsWith('/') ? '' : '/')
+    }
+
+    if (item.items)
+      item.items = withBase(item.items, resolvedBase)
+
+    return item
+  })
+}
+
+function groupSidebarItems(
+  sidebarItems: DefaultTheme.SidebarItem[],
+): DefaultTheme.SidebarItem[] {
+  const groups: DefaultTheme.SidebarItem[] = []
+  let lastGroupIndex = 0
+
+  sidebarItems.forEach((item) => {
+    if (item.items && item.items.length) {
+      lastGroupIndex = groups.push(item)
+      return
+    }
+
+    if (!groups[lastGroupIndex])
+      groups.push({ items: [] })
+
+    const group = groups[lastGroupIndex]
+    if (!group.items)
+      group.items = []
+
+    group.items.push(item)
+  })
+
+  return groups
+}

package/client/hooks/useSidebarControl.ts

@@ -1,78 +1,78 @@
-import type { DefaultTheme } from 'vitepress'
-import type { ComputedRef, Ref } from 'vue'
-import { useData } from 'vitepress'
-import { computed, onMounted, ref, watch, watchEffect, watchPostEffect } from 'vue'
-import { hasActiveLink as containsActiveLink } from '../utils/client/common'
-
-import { isActive } from '../utils/common'
-
-export interface SidebarControl {
-  collapsed: Ref<boolean>
-  collapsible: ComputedRef<boolean>
-  isLink: ComputedRef<boolean>
-  isActiveLink: Ref<boolean>
-  hasActiveLink: ComputedRef<boolean>
-  hasChildren: ComputedRef<boolean>
-  toggle: () => void
-}
-
-export function useSidebarControl(
-  item: ComputedRef<DefaultTheme.SidebarItem>,
-): SidebarControl {
-  const { page, hash } = useData()
-  const collapsed = ref(false)
-
-  const collapsible = computed(() => {
-    return item.value.collapsed !== undefined
-  })
-
-  const isLink = computed(() => {
-    return !!item.value.link
-  })
-
-  const isActiveLink = ref(false)
-  const updateIsActiveLink = () => {
-    isActiveLink.value = isActive(page.value.relativePath, item.value.link)
-  }
-
-  watch([page, item, hash], updateIsActiveLink)
-  onMounted(updateIsActiveLink)
-
-  const hasActiveLink = computed(() => {
-    if (isActiveLink.value) {
-      return true
-    }
-
-    return item.value.items
-      ? containsActiveLink(page.value.relativePath, item.value.items)
-      : false
-  })
-
-  const hasChildren = computed(() => {
-    return !!(item.value.items && item.value.items.length)
-  })
-
-  watchEffect(() => {
-    collapsed.value = !!(collapsible.value && item.value.collapsed)
-  })
-
-  watchPostEffect(() => {
-    ;(isActiveLink.value || hasActiveLink.value) && (collapsed.value = false)
-  })
-
-  function toggle() {
-    if (collapsible.value) {
-      collapsed.value = !collapsed.value
-    }
-  }
-
-  return {
-    collapsed,
-    collapsible,
-    isLink,
-    isActiveLink,
-    hasActiveLink,
-    hasChildren,
-    toggle,
-  }
-}
+import type { DefaultTheme } from 'vitepress'
+import type { ComputedRef, Ref } from 'vue'
+import { useData } from 'vitepress'
+import { computed, onMounted, ref, watch, watchEffect, watchPostEffect } from 'vue'
+import { hasActiveLink as containsActiveLink } from '../utils/client/common'
+
+import { isActive } from '../utils/common'
+
+export interface SidebarControl {
+  collapsed: Ref<boolean>
+  collapsible: ComputedRef<boolean>
+  isLink: ComputedRef<boolean>
+  isActiveLink: Ref<boolean>
+  hasActiveLink: ComputedRef<boolean>
+  hasChildren: ComputedRef<boolean>
+  toggle: () => void
+}
+
+export function useSidebarControl(
+  item: ComputedRef<DefaultTheme.SidebarItem>,
+): SidebarControl {
+  const { page, hash } = useData()
+  const collapsed = ref(false)
+
+  const collapsible = computed(() => {
+    return item.value.collapsed !== undefined
+  })
+
+  const isLink = computed(() => {
+    return !!item.value.link
+  })
+
+  const isActiveLink = ref(false)
+  const updateIsActiveLink = () => {
+    isActiveLink.value = isActive(page.value.relativePath, item.value.link)
+  }
+
+  watch([page, item, hash], updateIsActiveLink)
+  onMounted(updateIsActiveLink)
+
+  const hasActiveLink = computed(() => {
+    if (isActiveLink.value) {
+      return true
+    }
+
+    return item.value.items
+      ? containsActiveLink(page.value.relativePath, item.value.items)
+      : false
+  })
+
+  const hasChildren = computed(() => {
+    return !!(item.value.items && item.value.items.length)
+  })
+
+  watchEffect(() => {
+    collapsed.value = !!(collapsible.value && item.value.collapsed)
+  })
+
+  watchPostEffect(() => {
+    ;(isActiveLink.value || hasActiveLink.value) && (collapsed.value = false)
+  })
+
+  function toggle() {
+    if (collapsible.value) {
+      collapsed.value = !collapsed.value
+    }
+  }
+
+  return {
+    collapsed,
+    collapsible,
+    isLink,
+    isActiveLink,
+    hasActiveLink,
+    hasChildren,
+    toggle,
+  }
+}