vitepress-theme-element-plus 0.0.3 → 0.0.4

package/client/components/NavBar.vue

@@ -1,203 +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>
+<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

@@ -1,75 +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>
+<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>