vitepress-theme-element-plus 0.0.1 → 0.0.2

package/client/components/SidebarItem.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress'
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { useSidebarControl } from '../hooks/useSidebarControl'
+import Link from './Link.vue'
+import VersionTag from './VersionTag.vue'
+
+const props = defineProps<{
+  item: DefaultTheme.SidebarItem & {
+    hide?: boolean
+    icon?: string
+    promotion?: string
+  }
+  depth: number
+}>()
+const {
+  collapsed,
+  collapsible,
+  isLink,
+  isActiveLink,
+  hasActiveLink,
+  hasChildren,
+  toggle,
+} = useSidebarControl(computed(() => props.item))
+
+const sectionTag = computed(() => (hasChildren.value ? 'section' : 'div'))
+
+const linkTag = computed(() => (isLink.value ? 'a' : 'div'))
+
+const textTag = computed(() => {
+  return !hasChildren.value
+    ? 'p'
+    : props.depth + 2 === 7
+      ? 'p'
+      : `h${props.depth + 2}`
+})
+
+const itemRole = computed(() => (isLink.value ? undefined : 'button'))
+
+const classes = computed(() => [
+  [`level-${props.depth}`],
+  { collapsible: collapsible.value },
+  { collapsed: collapsed.value },
+  { 'is-link': isLink.value },
+  { 'is-active': isActiveLink.value },
+  { 'has-active': hasActiveLink.value },
+])
+
+function onItemInteraction(e: MouseEvent | Event) {
+  if ('key' in e && e.key !== 'Enter') {
+    return
+  }
+  !props.item.link && toggle()
+}
+function onCaretClick() {
+  props.item.link && toggle()
+}
+
+function onLinkAreaClick(e: MouseEvent) {
+  const elA = (e.target as HTMLElement).querySelector('a')
+  elA && elA.click()
+}
+</script>
+
+<template>
+  <component :is="sectionTag" class="VPSidebarItem" :class="classes">
+    <div
+      v-if="item.text && !item.hide"
+      class="item"
+      :role="itemRole"
+      :tabindex="item.items && 0"
+      v-on="
+        item.items
+          ? { click: onItemInteraction, keydown: onItemInteraction }
+          : { click: onLinkAreaClick }
+      "
+    >
+      <div class="indicator" />
+      <Icon
+        v-if="item.icon && item.items"
+        :icon="item.icon"
+        style="margin-right: 5px;"
+        ssr
+      />
+      <Link
+        v-if="item.link"
+        :tag="linkTag"
+        class="link"
+        :href="item.link"
+        :rel="item.rel"
+        :target="item.target"
+      >
+        <Icon
+          v-if="item.icon && item.link"
+          :icon="item.icon"
+          class="text text-icon"
+          ssr
+        />
+        <component :is="textTag" class="text" v-html="item.text" />
+        <VersionTag v-if="item.promotion" class="version-tag" :version="item.promotion" />
+      </Link>
+      <component
+        :is="textTag"
+        v-else
+        class="text"
+        v-html="item.text"
+      />
+
+      <div
+        v-if="item.collapsed !== undefined && item.items && item.items.length"
+        class="caret"
+        role="button"
+        aria-label="toggle section"
+        tabindex="0"
+        @click="onCaretClick"
+        @keydown.enter="onCaretClick"
+      >
+        <span class="vpi-chevron-right caret-icon" />
+      </div>
+    </div>
+
+    <div v-if="item?.items && item?.items.length" class="items">
+      <template v-if="depth < 5">
+        <SidebarItem
+          v-for="i in item.items"
+          :key="i.text"
+          :item="i"
+          :depth="depth + 1"
+        />
+      </template>
+    </div>
+  </component>
+</template>
+
+<style scoped lang="scss">
+.VPSidebarItem.collapsed.level-0 {
+  padding-bottom: 10px;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  transition: background-color 0.25s;
+  cursor: pointer;
+}
+
+.VPSidebarItem.collapsible > .item {
+  cursor: pointer;
+}
+
+.indicator {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  left: -17px;
+  width: 2px;
+  border-radius: 2px;
+  transition: background-color 0.25s;
+}
+
+.VPSidebarItem.level-2.is-active > .item > .indicator,
+.VPSidebarItem.level-3.is-active > .item > .indicator,
+.VPSidebarItem.level-4.is-active > .item > .indicator,
+.VPSidebarItem.level-5.is-active > .item > .indicator {
+  background-color: var(--vp-c-brand-1);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  line-height: 20px;
+  font-size: 13px;
+}
+
+.text {
+  flex-grow: 1;
+  line-height: 24px;
+  transition: color 0.25s;
+}
+.text-icon {
+  flex-grow: 0;
+  padding: 0;
+  margin-right: 4px;
+}
+.version-tag {
+  margin-left: 8px;
+}
+.VPSidebarItem.level-0 > .item {
+  color: var(--vp-c-text-1);
+  margin-bottom: 8px;
+  line-height: 24px;
+}
+.VPSidebarItem.level-0 > .item h2 {
+  color: var(--vp-c-text-1);
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  line-height: 24px;
+}
+
+.VPSidebarItem.level-1,
+.VPSidebarItem.level-2,
+.VPSidebarItem.level-3,
+.VPSidebarItem.level-4,
+.VPSidebarItem.level-5 {
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.VPSidebarItem.level-0.is-link > .item > .link:hover,
+.VPSidebarItem.level-1.is-link > .item > .link:hover,
+.VPSidebarItem.level-2.is-link > .item > .link:hover,
+.VPSidebarItem.level-3.is-link > .item > .link:hover,
+.VPSidebarItem.level-4.is-link > .item > .link:hover,
+.VPSidebarItem.level-5.is-link > .item > .link:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.VPSidebarItem.level-0.has-active > .item,
+.VPSidebarItem.level-1.has-active > .item,
+.VPSidebarItem.level-2.has-active > .item,
+.VPSidebarItem.level-3.has-active > .item,
+.VPSidebarItem.level-4.has-active > .item,
+.VPSidebarItem.level-5.has-active > .item,
+.VPSidebarItem.level-0.has-active > .item > .link,
+.VPSidebarItem.level-1.has-active > .item > .link,
+.VPSidebarItem.level-2.has-active > .item > .link,
+.VPSidebarItem.level-3.has-active > .item > .link,
+.VPSidebarItem.level-4.has-active > .item > .link,
+.VPSidebarItem.level-5.has-active > .item > .link {
+  color: var(--vp-c-text-1);
+}
+
+.VPSidebarItem.level-0.is-active > .item .link,
+.VPSidebarItem.level-1.is-active > .item .link,
+.VPSidebarItem.level-2.is-active > .item .link,
+.VPSidebarItem.level-3.is-active > .item .link,
+.VPSidebarItem.level-4.is-active > .item .link,
+.VPSidebarItem.level-5.is-active > .item .link {
+  color: var(--vp-c-brand-1);
+  font-weight: 600;
+}
+
+.VPSidebarItem.level-0.is-active > .item,
+.VPSidebarItem.level-1.is-active > .item,
+.VPSidebarItem.level-2.is-active > .item,
+.VPSidebarItem.level-3.is-active > .item,
+.VPSidebarItem.level-4.is-active > .item,
+.VPSidebarItem.level-5.is-active > .item {
+  background-color: var(--el-color-primary-light-9);
+}
+
+.caret {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: -7px;
+  width: 32px;
+  height: 32px;
+  color: var(--vp-c-text-3);
+  cursor: pointer;
+  transition: color 0.25s;
+  flex-shrink: 0;
+}
+
+.item:hover .caret {
+  color: var(--vp-c-text-2);
+}
+
+.item:hover .caret:hover {
+  color: var(--vp-c-text-1);
+}
+
+.caret-icon {
+  font-size: 18px;
+  transform: rotate(90deg);
+  transition: transform 0.25s;
+}
+
+.VPSidebarItem.collapsed .caret-icon {
+  transform: rotate(0);
+}
+
+.VPSidebarItem.level-1 .items,
+.VPSidebarItem.level-2 .items,
+.VPSidebarItem.level-3 .items,
+.VPSidebarItem.level-4 .items,
+.VPSidebarItem.level-5 .items {
+  border-left: 1px solid var(--vp-c-divider);
+  padding-left: 16px;
+}
+
+.VPSidebarItem.collapsed .items {
+  display: none;
+}
+</style>

package/client/components/Tag.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+interface Props {
+  text: string
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <span class="VPTTag">
+    {{ text }}
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.VPTTag {
+  font-size: 12px;
+  line-height: 26px;
+  background-color: var(--vpt-bg-opacity);
+  border-radius: 6px;
+  padding: 0 12px;
+  box-sizing: border-box;
+  margin-right: 12px;
+  margin-bottom: 12px;
+}
+</style>

package/client/components/VPNavBarSearch.vue

@@ -0,0 +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>

package/client/components/VersionTag.vue

@@ -0,0 +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>

package/client/hooks/useBackTop.ts

@@ -0,0 +1,74 @@
+import { isClient } from '@vueuse/core'
+import { throttle } from 'es-toolkit'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+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

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

package/client/hooks/useSidebar.ts

@@ -0,0 +1,105 @@
+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'
+
+export function useSidebar() {
+  const { frontmatter, theme } = useData()
+  const is960 = useMediaQuery('(min-width: 960px)')
+  const isOpen = ref(false)
+  const _sidebar = computed(() => {
+    const sidebarConfig = theme.value.sidebar
+    return sidebarConfig ?? []
+  })
+
+  const sidebar = ref(_sidebar.value)
+
+  watch(_sidebar, (next, prev) => {
+    if (JSON.stringify(next) !== JSON.stringify(prev))
+      sidebar.value = _sidebar.value
+  })
+
+  const hasSidebar = computed(() => {
+    return (
+      frontmatter.value.sidebar !== false
+      && sidebar.value.length > 0
+      && frontmatter.value.layout !== 'home'
+    )
+  })
+
+  const hasAside = computed(() => {
+    if (NOT_ARTICLE_LAYOUTS.includes(frontmatter.value.layout)) {
+      return false
+    }
+    if (frontmatter.value.aside !== undefined && frontmatter.value.aside !== null)
+      return !!frontmatter.value.aside
+
+    return theme.value.aside !== false
+  })
+
+  const leftAside = computed(() => {
+    if (hasAside) {
+      return frontmatter.value.aside === null
+        ? theme.value.aside === 'left'
+        : frontmatter.value.aside === 'left'
+    }
+    return false
+  })
+
+  const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
+
+  const sidebarGroups = computed(() => {
+    return hasSidebar.value ?? []
+  })
+
+  function open() {
+    isOpen.value = true
+  }
+
+  function close() {
+    isOpen.value = false
+  }
+
+  function toggle() {
+    isOpen.value ? close() : open()
+  }
+
+  return {
+    isOpen,
+    sidebar,
+    sidebarGroups,
+    hasSidebar,
+    hasAside,
+    leftAside,
+    isSidebarEnabled,
+    open,
+    close,
+    toggle,
+  }
+}
+
+export function useCloseSidebarOnEscape() {
+  let triggerElement: HTMLButtonElement | undefined
+  const { isOpen, close } = useSidebar()
+
+  watchEffect(() => {
+    triggerElement = isOpen.value
+      ? (document.activeElement as HTMLButtonElement)
+      : undefined
+  })
+
+  onMounted(() => {
+    window.addEventListener('keyup', onEscape)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keyup', onEscape)
+  })
+
+  function onEscape(e: KeyboardEvent) {
+    if (e.key === 'Escape' && isOpen.value) {
+      close()
+      triggerElement?.focus()
+    }
+  }
+}

package/client/hooks/useSidebarControl.ts

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