vitepress-theme-element-plus 0.0.1 → 0.0.2

package/client/components/NavBar.vue

@@ -0,0 +1,203 @@
+<script lang="ts" setup>
+import { useWindowScroll } from '@vueuse/core'
+import { useData } from 'vitepress'
+import VPNavBarAppearance from 'vitepress/dist/client/theme-default/components/VPNavBarAppearance.vue'
+import VPNavBarExtra from 'vitepress/dist/client/theme-default/components/VPNavBarExtra.vue'
+import VPNavBarHamburger from 'vitepress/dist/client/theme-default/components/VPNavBarHamburger.vue'
+import VPNavBarMenu from 'vitepress/dist/client/theme-default/components/VPNavBarMenu.vue'
+import VPNavBarSocialLinks from 'vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue'
+import VPNavBarTranslations from 'vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue'
+import { ref, watchPostEffect } from 'vue'
+import VPNavBarTitle from './NavBarTitle.vue'
+import VPNavBarSearch from './VPNavBarSearch.vue'
+
+const props = defineProps<{
+  isScreenOpen: boolean
+}>()
+
+defineEmits<{
+  (e: 'toggleScreen'): void
+}>()
+
+const { y } = useWindowScroll()
+const { frontmatter } = useData()
+const classes = ref<Record<string, boolean>>({})
+
+watchPostEffect(() => {
+  classes.value = {
+    'home': frontmatter.value.layout === 'home',
+    'top': y.value === 0,
+    'screen-open': props.isScreenOpen,
+  }
+})
+</script>
+
+<template>
+  <div class="VPNavBar" :class="classes">
+    <div class="wrapper">
+      <div class="container">
+        <div class="title">
+          <VPNavBarTitle>
+            <template #nav-bar-title-before>
+              <slot name="nav-bar-title-before" />
+            </template>
+            <template #nav-bar-title-after>
+              <slot name="nav-bar-title-after" />
+            </template>
+          </VPNavBarTitle>
+        </div>
+
+        <div class="content">
+          <div class="content-body">
+            <slot name="nav-bar-content-before" />
+            <VPNavBarSearch class="search" />
+            <VPNavBarMenu class="menu" />
+            <VPNavBarTranslations class="translations" />
+            <VPNavBarAppearance class="appearance" />
+            <VPNavBarSocialLinks class="social-links" />
+            <VPNavBarExtra class="extra" />
+            <slot name="nav-bar-content-after" />
+            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggleScreen')" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="divider">
+      <div class="divider-line" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.VPNavBar {
+  position: relative;
+  height: var(--vp-nav-height);
+  pointer-events: none;
+  white-space: nowrap;
+  transition: background-color 0.25s;
+  background-image: radial-gradient(transparent 1px, var(--vp-c-bg) 1px);
+  background-size: 4px 4px;
+  backdrop-filter: saturate(50%) blur(4px);
+  -webkit-backdrop-filter: saturate(50%) blur(4px);
+}
+
+.VPNavBar.screen-open {
+  transition: none;
+  background-color: var(--vp-nav-bg-color);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.VPNavBar:not(.home) {
+  background-color: var(--vp-nav-bg-color);
+}
+
+:deep(.VPNavBarMenuLink) {
+  border-bottom: 2px solid transparent;
+}
+
+:deep(.VPNavBarMenuLink.active) {
+  border-bottom-color: var(--vp-c-brand-1);
+}
+
+@media (min-width: 960px) {
+  .VPNavBar:not(.home) {
+    background-color: transparent;
+  }
+}
+
+.wrapper {
+  padding: 0 8px 0 24px;
+}
+
+@media (min-width: 768px) {
+  .wrapper {
+    padding: 0 32px;
+  }
+}
+
+@media screen and (min-width: var(--vp-layout-max-width)) {
+  .wrapper {
+      padding: 0px 48px;
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  height: var(--vp-nav-height);
+  pointer-events: none;
+}
+
+.container > .title,
+.container > .content {
+  pointer-events: none;
+}
+
+.container :deep(*) {
+  pointer-events: auto;
+}
+
+.title {
+  flex-shrink: 0;
+  height: calc(var(--vp-nav-height) - 1px);
+  transition: background-color 0.5s;
+}
+
+.content {
+  flex-grow: 1;
+}
+
+.content-body {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: var(--vp-nav-height);
+  transition: background-color 0.5s;
+}
+
+@media (max-width: 767px) {
+  .content-body {
+    column-gap: 0.5rem;
+  }
+}
+
+.menu + .translations::before,
+.menu + .appearance::before,
+.menu + .social-links::before,
+.translations + .appearance::before,
+.appearance + .social-links::before {
+  margin-right: 8px;
+  margin-left: 8px;
+  width: 1px;
+  height: 24px;
+  background-color: var(--vp-c-divider);
+  content: '';
+}
+
+.menu + .appearance::before,
+.translations + .appearance::before {
+  margin-right: 16px;
+}
+
+.appearance + .social-links::before {
+  margin-left: 16px;
+}
+
+.social-links {
+  margin-right: -8px;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+}
+
+.divider-line {
+  width: 100%;
+  height: 1px;
+  transition: background-color 0.5s;
+  background-color: var(--vp-c-gutter);
+}
+</style>

package/client/components/NavBarTitle.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ElTag } from 'element-plus'
+import { useData } from 'vitepress'
+import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
+import { normalizeLink } from 'vitepress/dist/client/theme-default/support/utils'
+import { computed } from 'vue'
+import { useLangs } from '../hooks/useLangs'
+
+const { site, theme } = useData()
+const { currentLang } = useLangs()
+const link = computed(() =>
+  typeof theme.value.logoLink === 'string'
+    ? theme.value.logoLink
+    : theme.value.logoLink?.link,
+)
+
+const rel = computed(() =>
+  typeof theme.value.logoLink === 'string'
+    ? undefined
+    : theme.value.logoLink?.rel,
+)
+
+const target = computed(() =>
+  typeof theme.value.logoLink === 'string'
+    ? undefined
+    : theme.value.logoLink?.target,
+)
+</script>
+
+<template>
+  <div class="VPNavBarTitle">
+    <a
+      class="title"
+      :href="link ?? normalizeLink(currentLang.link)"
+      :rel="rel"
+      :target="target"
+    >
+      <slot name="nav-bar-title-before" />
+      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
+      <span v-if="theme.siteTitle" v-html="theme.siteTitle" />
+      <span v-else-if="theme.siteTitle === undefined">{{ site.title }}</span>
+      <ElTag v-if="theme.version" type="primary" round>{{ theme.version }}</ElTag>
+      <slot name="nav-bar-title-after" />
+    </a>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.title {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid transparent;
+  width: 100%;
+  height: var(--vp-nav-height);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  transition: opacity 0.25s;
+}
+
+.title .el-tag {
+  font-weight: normal;
+}
+
+@media (min-width: 960px) {
+  .title {
+    flex-shrink: 0;
+  }
+}
+
+:deep(.logo) {
+  margin-right: 14px;
+  height: var(--vp-nav-logo-height);
+}
+</style>

package/client/components/Sidebar.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { useScrollLock } from '@vueuse/core'
+import { inBrowser } from 'vitepress'
+import { useLayout } from 'vitepress/theme'
+import { ref, watch } from 'vue'
+import VPSidebarGroup from './SidebarGroup.vue'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const { sidebarGroups, hasSidebar } = useLayout()
+
+// a11y: focus Nav element when menu has opened
+const navEl = ref<HTMLElement | null>(null)
+const isLocked = useScrollLock(inBrowser ? document.body : null)
+watch(
+  [props, navEl],
+  () => {
+    if (props.open) {
+      isLocked.value = true
+      navEl.value?.focus()
+    }
+    else {
+      isLocked.value = false
+    }
+  },
+  { immediate: true, flush: 'post' },
+)
+
+const key = ref(0)
+watch(
+  sidebarGroups,
+  () => {
+    key.value += 1
+  },
+  { deep: true },
+)
+</script>
+
+<template>
+  <aside v-if="hasSidebar" ref="navEl" class="VPSidebar" :class="{ open: open && hasSidebar }" @click.stop>
+    <nav id="VPSidebarNav" class="nav" aria-labelledby="sidebar-aria-label" tabindex="-1">
+      <span id="sidebar-aria-label" class="visually-hidden">
+        Sidebar Navigation
+      </span>
+
+      <slot name="sidebar-nav-before" />
+      <VPSidebarGroup :key="key" :items="sidebarGroups" />
+      <slot name="sidebar-nav-after" />
+    </nav>
+  </aside>
+</template>
+
+<style lang="scss" scoped>
+.VPSidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--vp-z-index-sidebar);
+  padding: 32px 32px 96px;
+  background-color: var(--vp-c-bg);
+  opacity: 0;
+  box-shadow: var(--vp-c-shadow-3);
+  overflow-x: hidden;
+  overflow-y: auto;
+  transform: translateX(-100%);
+  transition:
+    opacity 0.5s,
+    transform 0.25s ease;
+  overscroll-behavior: contain;
+}
+
+.VPSidebar.open {
+  opacity: 1;
+  transform: translateX(0);
+  transition:
+    opacity 0.25s,
+    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.dark .VPSidebar {
+  box-shadow: var(--vp-shadow-1);
+}
+
+@media (max-width: 767px) {
+  .VPSidebar {
+    width: calc(var(--vp-sidebar-width-mobile) - 14px);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .VPSidebar {
+    width: calc(var(--vp-sidebar-width-small));
+    top: 0;
+  }
+}
+
+@media screen and (min-width: 960px) {
+  .VPSidebar {
+    top: var(--vp-nav-height);
+    padding: 48px 32px;
+    background-color: var(--vp-c-bg);
+    opacity: 1;
+    visibility: visible;
+    box-shadow: none;
+    transform: translateX(0);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .VPSidebar {
+    padding: 48px 32px;
+    width: calc(var(--vp-sidebar-width-small) + 39px)
+  }
+}
+
+@media screen and (min-width: 1680px) {
+  .VPSidebar {
+    padding: 48px;
+    width: calc(var(--vp-sidebar-width-small) + 48px)
+  }
+}
+
+.nav {
+  outline: 0;
+}
+</style>

package/client/components/SidebarGroup.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import VPSidebarItem from './SidebarItem.vue'
+
+defineProps<{
+  items: (DefaultTheme.SidebarItem & { hide?: boolean })[]
+}>()
+
+const disableTransition = ref(true)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+onMounted(() => {
+  timer = setTimeout(() => {
+    timer = null
+    disableTransition.value = false
+  }, 300)
+})
+
+onBeforeUnmount(() => {
+  if (timer !== null) {
+    clearTimeout(timer)
+    timer = null
+  }
+})
+</script>
+
+<template>
+  <template
+    v-for="item in items"
+    :key="item.link"
+  >
+    <div
+      v-if="!item.hide"
+      class="group"
+      :class="{ 'no-transition': disableTransition }"
+    >
+      <VPSidebarItem :item="item" :depth="0" />
+    </div>
+  </template>
+</template>
+
+<style scoped lang="scss">
+.no-transition :deep(.caret-icon) {
+  transition: none;
+}
+
+.group + .group {
+  padding-top: 24px;
+}
+</style>