vitepress-theme-element-plus 1.3.0 → 1.3.2

package/client/components/Sidebar.vue

@@ -1,129 +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) + 32px);
-  }
-}
-
-@media screen and (min-width: 1680px) {
-  .VPSidebar {
-    padding: 48px;
-    width: calc(var(--vp-sidebar-width-small) + 48px);
-  }
-}
-
-.nav {
-  outline: 0;
-}
-</style>
+<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) + 32px);
+  }
+}
+
+@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

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