vitepress-theme-element-plus 1.3.1 → 1.3.2

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

package/client/hooks/useSize.ts

@@ -1,69 +1,69 @@
-import type { MaybeRef } from '@vueuse/core'
-import type { Ref, ShallowRef } from 'vue'
-import { useEventListener } from '@vueuse/core'
-import { computed, isRef, onMounted, ref, shallowRef, unref, watch } from 'vue'
-import { isString } from '../utils/common'
-
-function getValue(value: string | number): string {
-  return isString(value) ? value : `${value}px`
-}
-
-export interface SizeOptions {
-  width: string | number | undefined
-  height: string | number | undefined
-  ratio: string | number | undefined
-}
-
-export interface SizeInfo<E extends HTMLElement> {
-  el: ShallowRef<E | undefined>
-  width: Ref<string>
-  height: Ref<string>
-  resize: () => void
-}
-
-export function useSize<E extends HTMLElement>(options: SizeOptions, extraHeight: MaybeRef<number> = 0): SizeInfo<E> {
-  const el = shallowRef<E>()
-  const width = computed(() => getValue(unref(options.width) ?? '100%'))
-  const height = ref('auto')
-
-  const getRadio = (ratio: number | string | undefined): number => {
-    if (isString(ratio)) {
-      const [width, height] = ratio.split(':')
-      const parsedRadio = Number(width) / Number(height)
-
-      if (!Number.isNaN(parsedRadio))
-        return parsedRadio
-    }
-
-    return typeof ratio === 'number' ? ratio : 16 / 9
-  }
-
-  const getHeight = (width: number): string => {
-    const height = unref(options.height)
-    const ratio = getRadio(unref(options.ratio))
-
-    return height
-      ? getValue(height)
-      : `${Number(width) / ratio + unref(extraHeight)}px`
-  }
-
-  const updateHeight = (): void => {
-    if (el.value)
-      height.value = getHeight(el.value.clientWidth)
-  }
-
-  onMounted(() => {
-    updateHeight()
-    if (isRef(extraHeight))
-      watch(extraHeight, updateHeight)
-    useEventListener('orientationchange', updateHeight)
-    useEventListener('resize', updateHeight)
-  })
-
-  return {
-    el,
-    width,
-    height,
-    resize: updateHeight,
-  }
-}
+import type { MaybeRef } from '@vueuse/core'
+import type { Ref, ShallowRef } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { computed, isRef, onMounted, ref, shallowRef, unref, watch } from 'vue'
+import { isString } from '../utils/common'
+
+function getValue(value: string | number): string {
+  return isString(value) ? value : `${value}px`
+}
+
+export interface SizeOptions {
+  width: string | number | undefined
+  height: string | number | undefined
+  ratio: string | number | undefined
+}
+
+export interface SizeInfo<E extends HTMLElement> {
+  el: ShallowRef<E | undefined>
+  width: Ref<string>
+  height: Ref<string>
+  resize: () => void
+}
+
+export function useSize<E extends HTMLElement>(options: SizeOptions, extraHeight: MaybeRef<number> = 0): SizeInfo<E> {
+  const el = shallowRef<E>()
+  const width = computed(() => getValue(unref(options.width) ?? '100%'))
+  const height = ref('auto')
+
+  const getRadio = (ratio: number | string | undefined): number => {
+    if (isString(ratio)) {
+      const [width, height] = ratio.split(':')
+      const parsedRadio = Number(width) / Number(height)
+
+      if (!Number.isNaN(parsedRadio))
+        return parsedRadio
+    }
+
+    return typeof ratio === 'number' ? ratio : 16 / 9
+  }
+
+  const getHeight = (width: number): string => {
+    const height = unref(options.height)
+    const ratio = getRadio(unref(options.ratio))
+
+    return height
+      ? getValue(height)
+      : `${Number(width) / ratio + unref(extraHeight)}px`
+  }
+
+  const updateHeight = (): void => {
+    if (el.value)
+      height.value = getHeight(el.value.clientWidth)
+  }
+
+  onMounted(() => {
+    updateHeight()
+    if (isRef(extraHeight))
+      watch(extraHeight, updateHeight)
+    useEventListener('orientationchange', updateHeight)
+    useEventListener('resize', updateHeight)
+  })
+
+  return {
+    el,
+    width,
+    height,
+    resize: updateHeight,
+  }
+}

package/client/icons/dark.vue

@@ -1,8 +1,8 @@
-<template>
-  <svg viewBox="0 0 24 24" class="dark-icon">
-    <path
-      d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
+<template>
+  <svg viewBox="0 0 24 24" class="dark-icon">
+    <path
+      d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/client/icons/light.vue

@@ -1,8 +1,8 @@
-<template>
-  <svg viewBox="0 0 24 24" class="light-icon">
-    <path
-      d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
+<template>
+  <svg viewBox="0 0 24 24" class="light-icon">
+    <path
+      d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/client/utils/client/common.ts

@@ -1,49 +1,49 @@
-import type { DefaultTheme } from 'vitepress'
-import { isActive } from '../common'
-
-export interface SidebarLink {
-  text: string
-  link: string
-  docFooterText?: string
-}
-export function getFlatSideBarLinks(sidebar: DefaultTheme.SidebarItem[]): SidebarLink[] {
-  const links: SidebarLink[] = []
-
-  function recursivelyExtractLinks(items: DefaultTheme.SidebarItem[]) {
-    for (const item of items) {
-      if (item.text && item.link) {
-        links.push({
-          text: item.text,
-          link: item.link,
-          docFooterText: item.docFooterText,
-        })
-      }
-
-      if (item.items) {
-        recursivelyExtractLinks(item.items)
-      }
-    }
-  }
-
-  recursivelyExtractLinks(sidebar)
-
-  return links
-}
-
-/**
- * Check if the given sidebar item contains any active link.
- */
-export function hasActiveLink(
-  path: string,
-  items: DefaultTheme.SidebarItem | DefaultTheme.SidebarItem[],
-): boolean {
-  if (Array.isArray(items)) {
-    return items.some(item => hasActiveLink(path, item))
-  }
-
-  return isActive(path, items.link)
-    ? true
-    : items.items
-      ? hasActiveLink(path, items.items)
-      : false
-}
+import type { DefaultTheme } from 'vitepress'
+import { isActive } from '../common'
+
+export interface SidebarLink {
+  text: string
+  link: string
+  docFooterText?: string
+}
+export function getFlatSideBarLinks(sidebar: DefaultTheme.SidebarItem[]): SidebarLink[] {
+  const links: SidebarLink[] = []
+
+  function recursivelyExtractLinks(items: DefaultTheme.SidebarItem[]) {
+    for (const item of items) {
+      if (item.text && item.link) {
+        links.push({
+          text: item.text,
+          link: item.link,
+          docFooterText: item.docFooterText,
+        })
+      }
+
+      if (item.items) {
+        recursivelyExtractLinks(item.items)
+      }
+    }
+  }
+
+  recursivelyExtractLinks(sidebar)
+
+  return links
+}
+
+/**
+ * Check if the given sidebar item contains any active link.
+ */
+export function hasActiveLink(
+  path: string,
+  items: DefaultTheme.SidebarItem | DefaultTheme.SidebarItem[],
+): boolean {
+  if (Array.isArray(items)) {
+    return items.some(item => hasActiveLink(path, item))
+  }
+
+  return isActive(path, items.link)
+    ? true
+    : items.items
+      ? hasActiveLink(path, items.items)
+      : false
+}

package/client/utils/client/outline.ts

@@ -1,53 +1,53 @@
-import type { Header } from 'vitepress'
-import type { DefaultTheme } from 'vitepress/theme'
-
-const ignoreRE = /\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/
-
-// cached list of anchor elements from resolveHeaders
-const resolvedHeaders: { element: HTMLHeadElement, link: string }[] = []
-
-export type MenuItem = Omit<Header, 'slug' | 'children'> & {
-  element: HTMLHeadElement
-  titleTags: string[]
-  children?: MenuItem[]
-}
-
-export function resolveTitle(theme: DefaultTheme.Config): string {
-  return (
-    (typeof theme.outline === 'object'
-      && !Array.isArray(theme.outline)
-      && theme.outline.label)
-    || theme.outlineTitle
-    || 'On this page'
-  )
-}
-
-export function getHeaders(range: DefaultTheme.Config['outline']): MenuItem[] {
-  const headers = Array.from(document.querySelectorAll('.VPDoc :where(h1,h2,h3,h4,h5,h6)'))
-    .filter(el => el.id && el.hasChildNodes())
-    .map((el) => {
-      const level = Number(el.tagName[1])
-      const { text, tags } = serializeHeader(el)
-      return {
-        element: el as HTMLHeadElement,
-        title: text,
-        titleTags: tags,
-        link: `#${el.id}`,
-        level,
-      }
-    })
-
-  return resolveHeaders(headers, range)
-}
-
+import type { Header } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
+
+const ignoreRE = /\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/
+
+// cached list of anchor elements from resolveHeaders
+const resolvedHeaders: { element: HTMLHeadElement, link: string }[] = []
+
+export type MenuItem = Omit<Header, 'slug' | 'children'> & {
+  element: HTMLHeadElement
+  titleTags: string[]
+  children?: MenuItem[]
+}
+
+export function resolveTitle(theme: DefaultTheme.Config): string {
+  return (
+    (typeof theme.outline === 'object'
+      && !Array.isArray(theme.outline)
+      && theme.outline.label)
+    || theme.outlineTitle
+    || 'On this page'
+  )
+}
+
+export function getHeaders(range: DefaultTheme.Config['outline']): MenuItem[] {
+  const headers = Array.from(document.querySelectorAll('.VPDoc :where(h1,h2,h3,h4,h5,h6)'))
+    .filter(el => el.id && el.hasChildNodes())
+    .map((el) => {
+      const level = Number(el.tagName[1])
+      const { text, tags } = serializeHeader(el)
+      return {
+        element: el as HTMLHeadElement,
+        title: text,
+        titleTags: tags,
+        link: `#${el.id}`,
+        level,
+      }
+    })
+
+  return resolveHeaders(headers, range)
+}
+
 function serializeHeader(h: Element): { text: string, tags: string[] } {
   let text = ''
   const tags: string[] = []
   for (const node of Array.from(h.childNodes)) {
     if (node.nodeType === 1) {
       const element = node as HTMLElement
-      if (ignoreRE.test(element.className))
-        continue
+      if (ignoreRE.test(element.className))
+        continue
       if (element.classList.contains('el-tag') || element.classList.contains('vp-tag')) {
         const cloned = element.cloneNode(true) as HTMLElement
         const transitionClassRE = /(?:^|-)enter-(?:active|from|to)$|(?:^|-)leave-(?:active|from|to)$/
@@ -59,75 +59,75 @@ function serializeHeader(h: Element): { text: string, tags: string[] } {
         tags.push(cloned.outerHTML)
         continue
       }
-      text += element.textContent ?? ''
-    }
-    else if (node.nodeType === 3) {
-      const value = node.textContent ?? ''
-      text += value
-    }
-  }
-  return {
-    text: text.trim(),
-    tags,
-  }
-}
-
-export function resolveHeaders(
-  headers: MenuItem[],
-  range?: DefaultTheme.Config['outline'],
-): MenuItem[] {
-  if (range === false) {
-    return []
-  }
-
-  const levelsRange
-    = (typeof range === 'object' && !Array.isArray(range)
-      ? range.level
-      : range) || 2
-
-  const [high, low]: [number, number]
-    = typeof levelsRange === 'number'
-      ? [levelsRange, levelsRange]
-      : levelsRange === 'deep'
-        ? [2, 6]
-        : levelsRange
-
-  return buildTree(headers, high, low)
-}
-
-function buildTree(data: MenuItem[], min: number, max: number): MenuItem[] {
-  resolvedHeaders.length = 0
-
-  const result: MenuItem[] = []
-  const stack: (MenuItem | { level: number, shouldIgnore: true })[] = []
-
-  data.forEach((item) => {
-    const node = { ...item, children: [] }
-    let parent = stack[stack.length - 1]
-
-    while (parent && parent.level >= node.level) {
-      stack.pop()
-      parent = stack[stack.length - 1]
-    }
-
-    if (
-      node.element.classList.contains('ignore-header')
-      || (parent && 'shouldIgnore' in parent)
-    ) {
-      stack.push({ level: node.level, shouldIgnore: true })
-      return
-    }
-
-    if (node.level > max || node.level < min)
-      return
-    resolvedHeaders.push({ element: node.element, link: node.link })
-
-    if (parent)
-      (parent as MenuItem).children.push(node)
-    else result.push(node)
-
-    stack.push(node)
-  })
-
-  return result
-}
+      text += element.textContent ?? ''
+    }
+    else if (node.nodeType === 3) {
+      const value = node.textContent ?? ''
+      text += value
+    }
+  }
+  return {
+    text: text.trim(),
+    tags,
+  }
+}
+
+export function resolveHeaders(
+  headers: MenuItem[],
+  range?: DefaultTheme.Config['outline'],
+): MenuItem[] {
+  if (range === false) {
+    return []
+  }
+
+  const levelsRange
+    = (typeof range === 'object' && !Array.isArray(range)
+      ? range.level
+      : range) || 2
+
+  const [high, low]: [number, number]
+    = typeof levelsRange === 'number'
+      ? [levelsRange, levelsRange]
+      : levelsRange === 'deep'
+        ? [2, 6]
+        : levelsRange
+
+  return buildTree(headers, high, low)
+}
+
+function buildTree(data: MenuItem[], min: number, max: number): MenuItem[] {
+  resolvedHeaders.length = 0
+
+  const result: MenuItem[] = []
+  const stack: (MenuItem | { level: number, shouldIgnore: true })[] = []
+
+  data.forEach((item) => {
+    const node = { ...item, children: [] }
+    let parent = stack[stack.length - 1]
+
+    while (parent && parent.level >= node.level) {
+      stack.pop()
+      parent = stack[stack.length - 1]
+    }
+
+    if (
+      node.element.classList.contains('ignore-header')
+      || (parent && 'shouldIgnore' in parent)
+    ) {
+      stack.push({ level: node.level, shouldIgnore: true })
+      return
+    }
+
+    if (node.level > max || node.level < min)
+      return
+    resolvedHeaders.push({ element: node.element, link: node.link })
+
+    if (parent)
+      (parent as MenuItem).children.push(node)
+    else result.push(node)
+
+    stack.push(node)
+  })
+
+  return result
+}