vitepress-theme-element-plus 0.0.2 → 0.0.4

package/client/components/LocalNav.vue

@@ -1,160 +1,160 @@
-<script lang="ts" setup>
-import { useWindowScroll } from '@vueuse/core'
-import { ElButton } from 'element-plus'
-import { useData } from 'vitepress'
-import { useLayout } from 'vitepress/theme'
-import { computed, onMounted, ref } from 'vue'
-import { useBackTop } from '../hooks/useBackTop'
-import 'element-plus/theme-chalk/el-button.css'
-
-defineProps<{
-  open: boolean
-}>()
-
-defineEmits<{
-  (e: 'openMenu'): void
-}>()
-
-const { theme } = useData()
-const { isHome, hasSidebar, hasLocalNav } = useLayout()
-const { y } = useWindowScroll()
-
-const navHeight = ref(0)
-
-onMounted(() => {
-  navHeight.value = Number.parseInt(
-    getComputedStyle(document.documentElement).getPropertyValue(
-      '--vp-nav-height',
-    ),
-  )
-})
-
-const classes = computed(() => {
-  return {
-    'VPLocalNav': true,
-    'has-sidebar': hasSidebar.value,
-    'empty': !hasLocalNav.value,
-    'fixed': !hasLocalNav.value && !hasSidebar.value,
-  }
-})
-
-const { shouldShow, scrollToTop } = useBackTop()
-</script>
-
-<template>
-  <div
-    v-if="!isHome && (hasLocalNav || hasSidebar || y >= navHeight)"
-    :class="classes"
-  >
-    <div class="container">
-      <button
-        v-if="hasSidebar"
-        class="menu"
-        :aria-expanded="open"
-        aria-controls="VPSidebarNav"
-        @click="$emit('openMenu')"
-      >
-        <span class="vpi-align-left menu-icon" />
-        <span class="menu-text">
-          {{ theme.sidebarMenuLabel || 'Menu' }}
-        </span>
-      </button>
-      <Transition name="shifting">
-        <ElButton
-          :class="{ show: shouldShow }"
-          link
-          class="height-5 go-back-top"
-          @click.prevent.stop="scrollToTop"
-        >
-          Back to top
-        </ElButton>
-      </Transition>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.VPLocalNav {
-  position: sticky;
-  top: 0;
-  /*rtl:ignore*/
-  left: 0;
-  z-index: var(--vp-z-index-local-nav);
-  border-bottom: 1px solid var(--vp-c-gutter);
-  padding-top: var(--vp-layout-top-height, 0px);
-  width: 100%;
-  background-color: var(--vp-local-nav-bg-color);
-  overflow: hidden;
-}
-
-.VPLocalNav.fixed {
-  position: fixed;
-}
-
-@media (min-width: 960px) {
-  .VPLocalNav {
-    display: none;
-  }
-}
-
-@media (min-width: 1440px) {
-  .VPLocalNav {
-    display: none;
-  }
-}
-
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.menu {
-  display: flex;
-  align-items: center;
-  line-height: 24px;
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
-}
-
-.menu:hover {
-  color: var(--vp-c-text-1);
-  transition: color 0.25s;
-}
-
-@media (min-width: 960px) {
-  .menu {
-    display: none;
-  }
-}
-
-.menu-icon {
-  margin-right: 8px;
-  font-size: 16px;
-}
-
-.menu,
-:deep(.VPLocalNavOutlineDropdown > button) {
-  padding: 12px 24px 11px;
-}
-
-@media (min-width: 768px) {
-  .menu,
-  :deep(.VPLocalNavOutlineDropdown > button) {
-    padding: 12px 32px 11px;
-  }
-}
-
-.go-back-top {
-  transform: translateY(100%);
-  opacity: 0;
-  padding: 12px 32px 11px;
-
-  &.show {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-</style>
+<script lang="ts" setup>
+import { useWindowScroll } from '@vueuse/core'
+import { ElButton } from 'element-plus'
+import { useData } from 'vitepress'
+import { useLayout } from 'vitepress/theme'
+import { computed, onMounted, ref } from 'vue'
+import { useBackTop } from '../hooks/useBackTop'
+import 'element-plus/theme-chalk/el-button.css'
+
+defineProps<{
+  open: boolean
+}>()
+
+defineEmits<{
+  (e: 'openMenu'): void
+}>()
+
+const { theme } = useData()
+const { isHome, hasSidebar, hasLocalNav } = useLayout()
+const { y } = useWindowScroll()
+
+const navHeight = ref(0)
+
+onMounted(() => {
+  navHeight.value = Number.parseInt(
+    getComputedStyle(document.documentElement).getPropertyValue(
+      '--vp-nav-height',
+    ),
+  )
+})
+
+const classes = computed(() => {
+  return {
+    'VPLocalNav': true,
+    'has-sidebar': hasSidebar.value,
+    'empty': !hasLocalNav.value,
+    'fixed': !hasLocalNav.value && !hasSidebar.value,
+  }
+})
+
+const { shouldShow, scrollToTop } = useBackTop()
+</script>
+
+<template>
+  <div
+    v-if="!isHome && (hasLocalNav || hasSidebar || y >= navHeight)"
+    :class="classes"
+  >
+    <div class="container">
+      <button
+        v-if="hasSidebar"
+        class="menu"
+        :aria-expanded="open"
+        aria-controls="VPSidebarNav"
+        @click="$emit('openMenu')"
+      >
+        <span class="vpi-align-left menu-icon" />
+        <span class="menu-text">
+          {{ theme.sidebarMenuLabel || 'Menu' }}
+        </span>
+      </button>
+      <Transition name="shifting">
+        <ElButton
+          :class="{ show: shouldShow }"
+          link
+          class="height-5 go-back-top"
+          @click.prevent.stop="scrollToTop"
+        >
+          Back to top
+        </ElButton>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPLocalNav {
+  position: sticky;
+  top: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-local-nav);
+  border-bottom: 1px solid var(--vp-c-gutter);
+  padding-top: var(--vp-layout-top-height, 0px);
+  width: 100%;
+  background-color: var(--vp-local-nav-bg-color);
+  overflow: hidden;
+}
+
+.VPLocalNav.fixed {
+  position: fixed;
+}
+
+@media (min-width: 960px) {
+  .VPLocalNav {
+    display: none;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPLocalNav {
+    display: none;
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menu {
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.menu:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+@media (min-width: 960px) {
+  .menu {
+    display: none;
+  }
+}
+
+.menu-icon {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.menu,
+:deep(.VPLocalNavOutlineDropdown > button) {
+  padding: 12px 24px 11px;
+}
+
+@media (min-width: 768px) {
+  .menu,
+  :deep(.VPLocalNavOutlineDropdown > button) {
+    padding: 12px 32px 11px;
+  }
+}
+
+.go-back-top {
+  transform: translateY(100%);
+  opacity: 0;
+  padding: 12px 32px 11px;
+
+  &.show {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+</style>

package/client/components/Nav.vue

@@ -1,69 +1,69 @@
-<script setup lang="ts">
-import { inBrowser } from 'vitepress'
-import { useData } from 'vitepress/client'
-import VPNavScreen from 'vitepress/dist/client/theme-default/components/VPNavScreen.vue'
-import { navInjectionKey, useNav } from 'vitepress/dist/client/theme-default/composables/nav'
-import { computed, provide, watchEffect } from 'vue'
-import NavBar from './NavBar.vue'
-
-const { isScreenOpen, closeScreen, toggleScreen } = useNav()
-const { frontmatter } = useData()
-
-const hasNavbar = computed(() => {
-  return frontmatter.value.navbar !== false
-})
-
-provide(navInjectionKey, { closeScreen })
-
-watchEffect(() => {
-  if (inBrowser) {
-    document.documentElement.classList.toggle('hide-nav', !hasNavbar.value)
-  }
-})
-</script>
-
-<template>
-  <header v-if="hasNavbar" class="VPNav">
-    <NavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
-      <template #nav-bar-title-before>
-        <slot name="nav-bar-title-before" />
-      </template>
-      <template #nav-bar-title-after>
-        <slot name="nav-bar-title-after" />
-      </template>
-      <template #nav-bar-content-before>
-        <slot name="nav-bar-content-before" />
-      </template>
-      <template #nav-bar-content-after>
-        <slot name="nav-bar-content-after" />
-      </template>
-    </NavBar>
-    <VPNavScreen :open="isScreenOpen">
-      <template #nav-screen-content-before>
-        <slot name="nav-screen-content-before" />
-      </template>
-      <template #nav-screen-content-after>
-        <slot name="nav-screen-content-after" />
-      </template>
-    </VPNavScreen>
-  </header>
-</template>
-
-<style scoped>
-.VPNav {
-  position: relative;
-  top: var(--vp-layout-top-height, 0px);
-  /*rtl:ignore*/
-  left: 0;
-  z-index: var(--vp-z-index-nav);
-  width: 100%;
-  pointer-events: none;
-  transition: background-color 0.5s;
-}
-
-@media (min-width: 960px) {
-  .VPNav {
-    position: fixed;
-  }
-}
-</style>
+<script setup lang="ts">
+import { inBrowser } from 'vitepress'
+import { useData } from 'vitepress/client'
+import VPNavScreen from 'vitepress/dist/client/theme-default/components/VPNavScreen.vue'
+import { navInjectionKey, useNav } from 'vitepress/dist/client/theme-default/composables/nav'
+import { computed, provide, watchEffect } from 'vue'
+import NavBar from './NavBar.vue'
+
+const { isScreenOpen, closeScreen, toggleScreen } = useNav()
+const { frontmatter } = useData()
+
+const hasNavbar = computed(() => {
+  return frontmatter.value.navbar !== false
+})
+
+provide(navInjectionKey, { closeScreen })
+
+watchEffect(() => {
+  if (inBrowser) {
+    document.documentElement.classList.toggle('hide-nav', !hasNavbar.value)
+  }
+})
+</script>
+
+<template>
+  <header v-if="hasNavbar" class="VPNav">
+    <NavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
+      <template #nav-bar-title-before>
+        <slot name="nav-bar-title-before" />
+      </template>
+      <template #nav-bar-title-after>
+        <slot name="nav-bar-title-after" />
+      </template>
+      <template #nav-bar-content-before>
+        <slot name="nav-bar-content-before" />
+      </template>
+      <template #nav-bar-content-after>
+        <slot name="nav-bar-content-after" />
+      </template>
+    </NavBar>
+    <VPNavScreen :open="isScreenOpen">
+      <template #nav-screen-content-before>
+        <slot name="nav-screen-content-before" />
+      </template>
+      <template #nav-screen-content-after>
+        <slot name="nav-screen-content-after" />
+      </template>
+    </VPNavScreen>
+  </header>
+</template>
+
+<style scoped>
+.VPNav {
+  position: relative;
+  top: var(--vp-layout-top-height, 0px);
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-nav);
+  width: 100%;
+  pointer-events: none;
+  transition: background-color 0.5s;
+}
+
+@media (min-width: 960px) {
+  .VPNav {
+    position: fixed;
+  }
+}
+</style>