vitepress-theme-element-plus 0.0.1 → 0.0.2

package/client/components/DocFooter.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+import { ElIcon } from 'element-plus'
+import { useData } from 'vitepress'
+import VPDocFooterLastUpdated from 'vitepress/dist/client/theme-default/components/VPDocFooterLastUpdated.vue'
+import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
+import { useEditLink } from 'vitepress/dist/client/theme-default/composables/edit-link.js'
+import { usePrevNext } from 'vitepress/dist/client/theme-default/composables/prev-next.js'
+import { computed } from 'vue'
+
+const { theme, page, frontmatter } = useData()
+
+const editLink = useEditLink()
+const control = usePrevNext()
+
+const hasEditLink = computed(
+  () => theme.value.editLink && frontmatter.value.editLink !== false,
+)
+const hasLastUpdated = computed(() => page.value.lastUpdated)
+const showFooter = computed(
+  () =>
+    hasEditLink.value
+    || hasLastUpdated.value
+    || control.value.prev
+    || control.value.next,
+)
+</script>
+
+<template>
+  <footer v-if="showFooter" class="VPDocFooter">
+    <slot name="doc-footer-before" />
+
+    <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
+      <div v-if="hasEditLink" class="edit-link">
+        <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
+          <span class="vpi-square-pen edit-link-icon" />
+          {{ editLink.text }}
+        </VPLink>
+      </div>
+
+      <div v-if="hasLastUpdated" class="last-updated">
+        <VPDocFooterLastUpdated />
+      </div>
+    </div>
+
+    <nav
+      v-if="control.prev?.link || control.next?.link"
+      class="prev-next"
+      aria-labelledby="doc-footer-aria-label"
+    >
+      <span id="doc-footer-aria-label" class="visually-hidden">Pager</span>
+
+      <div class="pager prev">
+        <a v-if="control.prev?.link" :href="control.prev.link">
+          <ElIcon>
+            <ArrowLeft />
+          </ElIcon>
+          <span class="title" v-html="control.prev.text" />
+        </a>
+      </div>
+      <div class="pager next">
+        <a v-if="control.next?.link" :href="control.next.link">
+          <span class="title" v-html="control.next.text" />
+          <ElIcon>
+            <ArrowRight />
+          </ElIcon>
+        </a>
+      </div>
+    </nav>
+  </footer>
+</template>
+
+<style scoped>
+.VPDocFooter {
+  margin-top: 64px;
+}
+
+.edit-info {
+  padding-bottom: 18px;
+}
+
+@media (min-width: 640px) {
+  .edit-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 14px;
+  }
+}
+
+.edit-link-button {
+  display: flex;
+  align-items: center;
+  border: 0;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+
+.edit-link-button:hover {
+  color: var(--vp-c-brand-2);
+}
+
+.edit-link-icon {
+  margin-right: 8px;
+}
+
+.prev-next {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 16px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.pager {
+  display: flex;
+  flex-shrink: 0;
+  width: 50%;
+}
+
+.pager a {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.pager.next {
+  justify-content: flex-end;
+  padding-right: 12px;
+}
+
+.next .el-icon {
+  margin-left: 4px;
+}
+
+.pager.prev {
+  justify-content: flex-start;
+  padding-left: 12px;
+}
+
+.prev .el-icon {
+  margin-right: 4px;
+}
+
+.title {
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+</style>

package/client/components/Footer.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { ElLink } from 'element-plus'
+import { useData } from 'vitepress'
+import { useLayout } from 'vitepress/theme'
+
+const { isHome } = useLayout()
+const { theme } = useData()
+const blogroll = theme.value.footer?.blogroll
+</script>
+
+<template>
+  <footer v-if="blogroll && blogroll.length" class="footer" :class="{ 'is-home': isHome }">
+    <div v-for="item of blogroll" :key="item.title" class="footer-main">
+      <h4>{{ item.title }}</h4>
+      <ElLink
+        v-for="child of item.children"
+        :key="child.title"
+        class="footer-main-link"
+        target="_blank"
+        type="info"
+        :href="child.href"
+        :underline="false"
+      >
+        {{ child.title }}
+      </ElLink>
+    </div>
+  </footer>
+</template>
+
+<style lang="scss">
+.footer {
+  background-color: var(--vp-c-bg-soft);
+  box-sizing: border-box;
+  padding: 42px 64px 64px;
+
+  &.is-home {
+    background-color: var(--bg-color);
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 0;
+  }
+
+  .container {
+    box-sizing: border-box;
+    width: auto;
+  }
+
+  .footer-main {
+    font-size: 0;
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 130px;
+
+    h4 {
+      font-size: 18px;
+      line-height: 1;
+      margin: 0 0 15px;
+      font-weight: 400;
+      color: var(--el-text-color-primary);
+    }
+
+    .footer-main-link {
+      display: block;
+      margin: 0;
+      line-height: 2;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .footer {
+    .footer-main {
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

package/client/components/FooterCopyright.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { ElDivider } from 'element-plus'
+import { useData } from 'vitepress'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <template v-if="theme.footer?.message || theme.footer?.copyright">
+    <ElDivider style="margin-bottom: 0px" />
+    <div class="footer-copyright">
+      <p>{{ theme.footer?.message }}</p>
+      <p>{{ theme.footer?.copyright }}</p>
+    </div>
+  </template>
+</template>
+
+<style scoped lang="scss">
+.footer-copyright {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 0;
+  font-size: 12px;
+  line-height: 24px;
+}
+</style>

package/client/components/Layout.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import VPBackdrop from 'vitepress/dist/client/theme-default/components/VPBackdrop.vue'
+import VPSkipLink from 'vitepress/dist/client/theme-default/components/VPSkipLink.vue'
+import { layoutInfoInjectionKey, registerWatchers } from 'vitepress/dist/client/theme-default/composables/layout'
+import { useSidebarControl } from 'vitepress/dist/client/theme-default/composables/sidebar'
+import { computed, provide, useSlots, watch } from 'vue'
+import { useCloseSidebarOnEscape } from '../hooks/useSidebar'
+import Content from './Content.vue'
+import LocalNav from './LocalNav.vue'
+import Nav from './Nav.vue'
+import Sidebar from './Sidebar.vue'
+
+const { frontmatter } = useData()
+
+useCloseSidebarOnEscape()
+const {
+  isOpen: isSidebarOpen,
+  open: openSidebar,
+  close: closeSidebar,
+} = useSidebarControl()
+
+const route = useRoute()
+watch(() => route.path, closeSidebar)
+
+registerWatchers({ closeSidebar })
+
+const slots = useSlots()
+const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
+
+provide(layoutInfoInjectionKey, heroImageSlotExists)
+</script>
+
+<template>
+  <div v-if="frontmatter.layout !== false" class="Layout VMLayout" :class="frontmatter.pageClass">
+    <slot name="layout-top" />
+    <VPSkipLink />
+    <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar()" />
+    <Nav>
+      <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>
+      <template #nav-screen-content-before>
+        <slot name="nav-screen-content-before" />
+      </template>
+      <template #nav-screen-content-after>
+        <slot name="nav-screen-content-after" />
+      </template>
+    </Nav>
+    <LocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
+
+    <Sidebar :open="isSidebarOpen">
+      <template #sidebar-nav-before>
+        <slot name="sidebar-nav-before" />
+      </template>
+      <template #sidebar-nav-after>
+        <slot name="sidebar-nav-after" />
+      </template>
+    </Sidebar>
+
+    <Content>
+      <template #page-top>
+        <slot name="page-top" />
+      </template>
+      <template #page-bottom>
+        <slot name="page-bottom" />
+      </template>
+
+      <template #not-found>
+        <slot name="not-found" />
+      </template>
+      <template #home-hero-before>
+        <slot name="home-hero-before" />
+      </template>
+      <template #home-hero-info-before>
+        <slot name="home-hero-info-before" />
+      </template>
+      <template #home-hero-info>
+        <slot name="home-hero-info" />
+      </template>
+      <template #home-hero-info-after>
+        <slot name="home-hero-info-after" />
+      </template>
+      <template #home-hero-actions-after>
+        <slot name="home-hero-actions-after" />
+      </template>
+      <template #home-hero-image>
+        <slot name="home-hero-image" />
+      </template>
+      <template #home-hero-after>
+        <slot name="home-hero-after" />
+      </template>
+      <template #home-features-before>
+        <slot name="home-features-before" />
+      </template>
+      <template #home-features-after>
+        <slot name="home-features-after" />
+      </template>
+
+      <template #doc-footer-before>
+        <slot name="doc-footer-before" />
+      </template>
+      <template #doc-before>
+        <slot name="doc-before" />
+      </template>
+      <template #doc-after>
+        <slot name="doc-after" />
+      </template>
+      <template #doc-top>
+        <slot name="doc-top" />
+      </template>
+      <template #doc-bottom>
+        <slot name="doc-bottom" />
+      </template>
+
+      <template #aside-top>
+        <slot name="aside-top" />
+      </template>
+      <template #aside-bottom>
+        <slot name="aside-bottom" />
+      </template>
+      <template #aside-outline-before>
+        <slot name="aside-outline-before" />
+      </template>
+      <template #aside-outline-after>
+        <slot name="aside-outline-after" />
+      </template>
+      <template #aside-ads-before>
+        <slot name="aside-ads-before" />
+      </template>
+      <template #aside-ads-after>
+        <slot name="aside-ads-after" />
+      </template>
+    </Content>
+
+    <slot name="layout-bottom" />
+  </div>
+  <Content v-else />
+</template>
+
+<style scoped lang="scss">
+.Layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+</style>

package/client/components/Link.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ElIcon } from 'element-plus'
+import { EXTERNAL_URL_RE } from 'vitepress/dist/client/shared.js'
+import { normalizeLink } from 'vitepress/dist/client/theme-default/support/utils.js'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  tag?: string
+  href?: string
+  noIcon?: boolean
+  target?: string
+  rel?: string
+}>()
+
+const tag = computed(() => props.tag ?? (props.href ? 'a' : 'span'))
+const isExternal = computed(
+  () =>
+    (props.href && EXTERNAL_URL_RE.test(props.href))
+    || props.target === '_blank',
+)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="VPLink"
+    :class="{
+      'link': href,
+      'vp-external-link-icon': isExternal,
+      'no-icon': noIcon,
+    }"
+    :href="href ? normalizeLink(href) : undefined"
+    :target="target ?? (isExternal ? '_blank' : undefined)"
+    :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
+  >
+    <slot />
+    <ElIcon v-if="href && isExternal && !noIcon">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3z" /></svg>
+    </ElIcon>
+  </component>
+</template>

package/client/components/LocalNav.vue

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

package/client/components/Nav.vue

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