vitepress-theme-element-plus 0.0.7 → 0.0.8

package/client/components/ThemeToggler.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { SwitchInstance } from 'element-plus'
+import { useDark, useToggle } from '@vueuse/core'
+import { ElSwitch } from 'element-plus'
+import { useData } from 'vitepress/client'
+import { nextTick, ref } from 'vue'
+import DarkIcon from '../icons/dark.vue'
+import LightIcon from '../icons/light.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const { site } = useData()
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+const switchRef = ref<SwitchInstance>()
+
+function beforeChange() {
+  return new Promise<boolean>((resolve) => {
+    const isAppearanceTransition = document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (!isAppearanceTransition) {
+      resolve(true)
+      return
+    }
+
+    const switchElement = switchRef.value?.$el
+    const rect = switchElement.getBoundingClientRect()
+    const x = rect.left + rect.width / 2
+    const y = rect.top + rect.height / 2
+
+    const endRadius = Math.hypot(
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y),
+    )
+
+    const ratioX = (100 * x) / innerWidth
+    const ratioY = (100 * y) / innerHeight
+    const referR = Math.hypot(innerWidth, innerHeight) / Math.SQRT2
+    const ratioR = (100 * endRadius) / referR
+
+    const transition = document.startViewTransition(async () => {
+      resolve(true)
+      await nextTick()
+    })
+    transition.ready.then(() => {
+      const clipPath = [
+        `circle(0% at ${ratioX}% ${ratioY}%)`,
+        `circle(${ratioR}% at ${ratioX}% ${ratioY}%)`,
+      ]
+      document.documentElement.animate(
+        {
+          clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
+        },
+        {
+          duration: 400,
+          easing: 'ease-in',
+          fill: 'both',
+          pseudoElement: isDark.value
+            ? '::view-transition-old(root)'
+            : '::view-transition-new(root)',
+        },
+      )
+    })
+  })
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <ElSwitch
+      v-if="
+        site.appearance
+          && site.appearance !== 'force-dark'
+          && site.appearance !== 'force-auto'
+      "
+      ref="switchRef"
+      :model-value="isDark"
+      v-bind="$attrs"
+      :before-change="beforeChange"
+      :active-action-icon="DarkIcon"
+      :inactive-action-icon="LightIcon"
+      @change="toggleDark"
+    />
+  </ClientOnly>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-switch__core) {
+  --el-switch-on-color: var(--bg-color-mute);
+  --el-switch-off-color: var(--bg-color-mute);
+  --el-switch-border-color: var(--border-color);
+
+  .el-switch__action {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+:deep(.dark-icon) {
+  border-radius: 50%;
+  color: #cfd3dc;
+  background-color: #141414;
+}
+
+:deep(.light-icon) {
+  color: #606266;
+}
+</style>

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/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/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,
+  }
+}