vitepress-theme-element-plus 1.3.0 → 1.3.2

package/client/components/ThemeToggler.vue

@@ -1,129 +1,129 @@
-<script setup lang="ts">
-import type { SwitchInstance } from 'element-plus'
-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'
-
-const { site, isDark } = useData()
-const switchRef = ref<SwitchInstance>()
-
-function handleChange(value: boolean) {
-  if (isDark.value !== value)
-    isDark.value = value
-}
-
-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>
-  <div class="VPNavBarAppearance">
-    <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="handleChange"
-      />
-    </ClientOnly>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.button {
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  height: var(--vp-nav-height);
-  color: var(--vp-c-text-1);
-  transition: color 0.5s;
-}
-
-: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;
-}
-
-.VPNavBarAppearance {
-  display: none;
-}
-
-@media (min-width: 1280px) {
-  .VPNavBarAppearance {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
+<script setup lang="ts">
+import type { SwitchInstance } from 'element-plus'
+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'
+
+const { site, isDark } = useData()
+const switchRef = ref<SwitchInstance>()
+
+function handleChange(value: boolean) {
+  if (isDark.value !== value)
+    isDark.value = value
+}
+
+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>
+  <div class="VPNavBarAppearance">
+    <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="handleChange"
+      />
+    </ClientOnly>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.button {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: var(--vp-nav-height);
+  color: var(--vp-c-text-1);
+  transition: color 0.5s;
+}
+
+: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;
+}
+
+.VPNavBarAppearance {
+  display: none;
+}
+
+@media (min-width: 1280px) {
+  .VPNavBarAppearance {
+    display: flex;
+    align-items: center;
+  }
+}
+</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
+}