vitepress-theme-element-plus 1.3.1 → 1.4.0

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/mobile-preview.ts

@@ -0,0 +1,60 @@
+import type { InjectionKey } from 'vue'
+
+export type MobilePreviewModule = () => Promise<unknown>
+
+export type MobilePreviewRegistry = Record<string, MobilePreviewModule>
+
+export interface EPMobilePreviewConfig {
+  /**
+   * Locale-relative path of the standalone preview page.
+   *
+   * @default '/preview/'
+   */
+  previewPath?: string
+  /**
+   * Outer device frame width used in the doc layout.
+   *
+   * @default 390
+   */
+  deviceWidth?: number
+  /**
+   * Inner viewport height used in the doc layout.
+   *
+   * @default 760
+   */
+  deviceHeight?: number
+  /**
+   * Root directory used to resolve the `mobileDemo` frontmatter field.
+   *
+   * @default 'demo/'
+   */
+  demoRoot?: string
+}
+
+export const mobilePreviewRegistryKey: InjectionKey<MobilePreviewRegistry> = Symbol('vitepress-theme-element-plus.mobile-preview-registry')
+
+export function normalizeMobilePreviewId(value: string): string {
+  return value
+    .trim()
+    .replace(/\\/g, '/')
+    .replace(/^\.?\//, '')
+}
+
+export function normalizeMobilePreviewRoot(value: string | undefined): string {
+  if (!value?.trim())
+    return 'demo/'
+
+  return normalizeMobilePreviewId(value)
+    .replace(/\/?$/, '/')
+}
+
+export function resolveMobilePreviewId(value: string | undefined, root: string | undefined): string {
+  const normalizedId = normalizeMobilePreviewId(value ?? '')
+  if (!normalizedId)
+    return ''
+
+  const normalizedRoot = normalizeMobilePreviewRoot(root)
+  return normalizedId.startsWith(normalizedRoot)
+    ? normalizedId
+    : `${normalizedRoot}${normalizedId}`
+}

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