vitepress-theme-element-plus 0.0.1 → 0.0.2

package/client/components/A11yTag.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ElTag } from 'element-plus'
+</script>
+
+<template>
+  <ElTag
+    size="small"
+    effect="plain"
+    hit
+    round
+  >
+    a11y
+  </ElTag>
+</template>
+
+<style lang="scss" scoped>
+.el-tag {
+  color: #6222c2;
+}
+.el-tag.is-hit {
+  border-color: #9065db;
+}
+.dark .el-tag {
+  color: #9065db;
+}
+.dark .el-tag.is-hit {
+  border-color: #6222c2;
+}
+</style>

package/client/components/ApiTyping.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Warning } from '@element-plus/icons-vue'
+import { ElButton, ElTooltip } from 'element-plus'
+
+defineProps({
+  type: String,
+  details: String,
+})
+</script>
+
+<template>
+  <span class="api-typing-container">
+    <code class="api-typing">
+      {{ type }}
+    </code>
+    <ClientOnly>
+      <ElTooltip v-if="details" effect="light" trigger="click">
+        <ElButton
+          text
+          :icon="Warning"
+          aria-label="Type details"
+          class="api-typing__warning-icon"
+        />
+        <template #content>
+          <slot>
+            <div class="m-1" style="max-width: 600px">
+              <code
+                style="
+                  color: var(--code-tooltip-color);
+                  background-color: var(--code-tooltip-bg-color);
+                "
+              >
+                {{ details }}
+              </code>
+            </div>
+          </slot>
+        </template>
+      </ElTooltip>
+    </ClientOnly>
+  </span>
+</template>
+
+<style scoped lang="scss">
+.api-typing-container {
+  display: inline-flex;
+  align-items: center;
+}
+.api-typing {
+  margin-right: 4px;
+}
+.api-typing__warning-icon {
+  padding: 8px;
+}
+</style>

package/client/components/Backdrop.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { useSidebar } from '../hooks/useSidebar'
+
+const { isOpen, close } = useSidebar()
+</script>
+
+<template>
+  <transition name="fade">
+    <div v-if="isOpen" class="VPBackdrop" @click="close()" />
+  </transition>
+</template>
+
+<style scoped lang="scss">
+.VPBackdrop {
+  position: fixed;
+  top: 0;
+  /*rtl:ignore*/
+  right: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-backdrop);
+  background: var(--vp-backdrop-bg-color);
+  transition: opacity 0.5s;
+}
+
+.VPBackdrop.fade-enter-from,
+.VPBackdrop.fade-leave-to {
+  opacity: 0;
+}
+
+.VPBackdrop.fade-leave-active {
+  transition-duration: 0.25s;
+}
+
+@media (min-width: 1440px) {
+  .VPBackdrop {
+    display: none;
+  }
+}
+</style>

package/client/components/Bili.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useSize } from '../hooks/useSize'
+
+interface Props {
+  /**
+   * aid
+   */
+  aid?: string
+  /**
+   * bvid
+   */
+  bvid?: string
+  /**
+   * cid
+   */
+  cid?: string
+  /**
+   * 是否开启自动播放
+   */
+  autoplay?: boolean
+  /**
+   * 指定播放时间
+   */
+  time?: number | string
+  /**
+   * 指定视频分p
+   */
+  page?: number
+  /**
+   * 宽度
+   */
+  width?: number
+  /**
+   * 高度
+   */
+  height?: number
+  /**
+   * 尺寸比例
+   */
+  ratio?: number
+
+  /**
+   * 是否展示封面
+   * @default true
+   */
+  poster?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  ratio: 16 / 9,
+  poster: true,
+})
+
+const VIDEO_LINK = 'https://player.bilibili.com/player.html'
+const { el, width, height, resize } = useSize<HTMLIFrameElement>(props)
+const loaded = ref(false)
+
+const videoLink = computed(() => {
+  const { aid, bvid, cid, autoplay, time, page, poster } = props
+
+  return aid && cid
+    ? `${VIDEO_LINK}?aid=${aid}&cid=${cid}&t=${time}&autoplay=${
+      autoplay ? 1 : 0
+    }&p=${page}&poster=${poster ? 1 : 0}`
+    : bvid
+      ? `${VIDEO_LINK}?bvid=${bvid}&t=${time}&autoplay=${autoplay ? 1 : 0}&poster=${poster ? 1 : 0}`
+      : ''
+})
+
+function handleLoad() {
+  loaded.value = true
+  resize()
+}
+</script>
+
+<template>
+  <iframe
+    ref="el"
+    class="bili-iframe"
+    :src="videoLink"
+    :style="{ width, height }"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
+    @load="handleLoad"
+  />
+</template>
+
+<style lang="scss" scoped>
+.bili-iframe {
+  border-radius: 8px;
+  border: none;
+  background-color: #000;
+  transition: all 0.3s;
+}
+</style>

package/client/components/Content.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { ElTag } from 'element-plus'
+import { useData } from 'vitepress'
+import VPHome from 'vitepress/dist/client/theme-default/components/VPHome.vue'
+import VPPage from 'vitepress/dist/client/theme-default/components/VPPage.vue'
+import NotFound from 'vitepress/dist/client/theme-default/NotFound.vue'
+import { useLayout } from 'vitepress/theme'
+import { getCurrentInstance } from 'vue'
+import ApiTyping from './ApiTyping.vue'
+import VPDoc from './Doc.vue'
+import Footer from './Footer.vue'
+import FooterCopyright from './FooterCopyright.vue'
+
+const { page, frontmatter } = useData()
+const { isHome, hasSidebar } = useLayout()
+const { appContext } = getCurrentInstance()
+
+appContext.app.component('ApiTyping', ApiTyping)
+appContext.app.component('ElTag', ElTag)
+</script>
+
+<template>
+  <div id="VPContent" class="VPContent" :class="{ 'has-sidebar': hasSidebar, 'is-home': isHome }">
+    <slot v-if="page.isNotFound" name="not-found">
+      <NotFound />
+    </slot>
+
+    <VPPage v-else-if="frontmatter.layout === 'page'">
+      <template #page-top>
+        <slot name="page-top" />
+      </template>
+      <template #page-bottom>
+        <slot name="page-bottom" />
+      </template>
+    </VPPage>
+
+    <VPHome v-else-if="frontmatter.layout === 'home'">
+      <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>
+    </VPHome>
+
+    <component :is="frontmatter.layout" v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'" />
+
+    <VPDoc v-else>
+      <template #doc-top>
+        <slot name="doc-top" />
+      </template>
+      <template #doc-bottom>
+        <slot name="doc-bottom" />
+      </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 #aside-top>
+        <slot name="aside-top" />
+      </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>
+      <template #aside-bottom>
+        <slot name="aside-bottom" />
+      </template>
+    </VPDoc>
+    <Footer />
+    <FooterCopyright v-if="isHome" />
+  </div>
+</template>
+
+<style scoped>
+.VPContent {
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin: var(--vp-layout-top-height, 0px) auto 0;
+  width: 100%;
+}
+
+.VPContent.is-home {
+  width: 100%;
+  max-width: 100%;
+}
+
+.VPContent.has-sidebar {
+  margin: 0;
+}
+
+@media (min-width: 960px) {
+  .VPContent {
+    padding-top: calc(var(--vp-nav-height) + 47px);
+  }
+
+  .VPContent.has-sidebar {
+    margin: var(--vp-layout-top-height, 0px) 0 0;
+    padding-left: var(--vp-sidebar-width-small);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .VPContent.has-sidebar {
+    padding-left: calc(var(--vp-sidebar-width-small) + 39px)
+  }
+}
+
+@media screen and (min-width: 1680px) {
+  .VPContent.has-sidebar {
+    padding-left: calc(var(--vp-sidebar-width-small) + 48px)
+  }
+}
+</style>

package/client/components/DeprecatedTag.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { ElTag } from 'element-plus'
+
+defineProps<{
+  version: string
+}>()
+</script>
+
+<template>
+  <ElTag
+    size="small"
+    type="warning"
+    effect="plain"
+    hit
+    round
+  >
+    deprecated
+  </ElTag>
+</template>

package/client/components/Doc.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { computed } from 'vue'
+import { useSidebar } from '../hooks/useSidebar'
+import VPDocAside from './DocAside.vue'
+import VPDocFooter from './DocFooter.vue'
+
+const { theme } = useData()
+
+const route = useRoute()
+const { hasAside, leftAside, hasSidebar } = useSidebar()
+
+const pageName = computed(() =>
+  route.path.replace(/[./]+/g, '_').replace(/_html$/, ''),
+)
+</script>
+
+<template>
+  <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }">
+    <slot name="doc-top" />
+    <div class="container">
+      <div v-if="hasAside" class="aside" :class="{ 'left-aside': leftAside }">
+        <div class="aside-container">
+          <div class="aside-content">
+            <VPDocAside>
+              <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>
+            </VPDocAside>
+          </div>
+        </div>
+      </div>
+
+      <div class="content">
+        <div class="content-container">
+          <slot name="doc-before" />
+          <main class="main">
+            <Content
+              class="doc-content" :class="[
+                pageName,
+                theme.externalLinkIcon && 'external-link-icon-enabled',
+              ]"
+            />
+          </main>
+          <VPDocFooter>
+            <template #doc-footer-before>
+              <slot name="doc-footer-before" />
+            </template>
+          </VPDocFooter>
+          <slot name="doc-after" />
+        </div>
+      </div>
+    </div>
+    <slot name="doc-bottom" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.VPDoc {
+  padding: 32px 24px 96px;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .VPDoc {
+    padding: 48px 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPDoc {
+    padding: 48px 32px;
+  }
+
+  .VPDoc:not(.has-sidebar) .container {
+    display: flex;
+    justify-content: center;
+    max-width: 992px;
+  }
+
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 752px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPDoc {
+    padding: 64px 0 48px 64px;
+  }
+
+  .VPDoc .container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .VPDoc .aside {
+    display: block;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 784px;
+  }
+
+  .VPDoc:not(.has-sidebar) .container {
+    max-width: 1104px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.aside {
+  position: relative;
+  display: none;
+  order: 2;
+  flex-grow: 1;
+  padding-left: 64px;
+  padding-right: 32px;
+}
+
+.left-aside {
+  order: 1;
+  padding-left: unset;
+  padding-right: 32px;
+  padding-left: 16px;
+}
+
+.aside-container {
+  position: sticky;
+  top: calc(var(--vp-nav-height) + 32px);
+  margin-top: 0;
+  margin-bottom: 32px;
+  width: 200px;
+  height: calc(100vh - var(--vp-nav-height) - 32px);
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.aside-content {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 32px;
+}
+
+.content {
+  position: relative;
+  margin: 0 auto;
+  width: 100%;
+}
+
+@media (min-width: 1440px) {
+  .content {
+    order: 1;
+    margin: 0;
+    min-width: 640px;
+  }
+}
+
+.content-container {
+  margin: 0 auto;
+}
+</style>

package/client/components/DocAside.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue'
+import VPDocAsideOutline from './DocAsideOutline.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <div class="VPDocAside">
+    <slot name="aside-top" />
+
+    <slot name="aside-outline-before" />
+    <VPDocAsideOutline />
+    <slot name="aside-outline-after" />
+
+    <div class="spacer" />
+
+    <slot name="aside-ads-before" />
+    <VPDocAsideCarbonAds v-if="theme.carbonAds" :carbon-ads="theme.carbonAds" />
+    <slot name="aside-ads-after" />
+
+    <slot name="aside-bottom" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.VPDocAside {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.spacer {
+  flex-grow: 1;
+}
+
+.VPDocAside :deep(.spacer + .VPDocAsideSponsors),
+.VPDocAside :deep(.spacer + .VPDocAsideCarbonAds) {
+  margin-top: 24px;
+}
+
+.VPDocAside :deep(.VPDocAsideSponsors + .VPDocAsideCarbonAds) {
+  margin-top: 16px;
+}
+</style>

package/client/components/DocAsideOutline.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { MenuItem } from '../utils/client/outline'
+import { ElAnchor, ElAnchorLink } from 'element-plus'
+import { onContentUpdated, useData } from 'vitepress'
+import { shallowRef } from 'vue'
+import {
+  getHeaders,
+
+  resolveTitle,
+} from '../utils/client/outline'
+import 'element-plus/dist/index.css'
+
+const { frontmatter, theme } = useData()
+
+const headers = shallowRef<MenuItem[]>([])
+
+onContentUpdated(() => {
+  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
+})
+</script>
+
+<template>
+  <nav
+    aria-labelledby="doc-outline-aria-label"
+    class="VPDocAsideOutline"
+    :class="{ 'has-outline': headers.length > 0 }"
+  >
+    <div class="content">
+      <div
+        id="doc-outline-aria-label"
+        aria-level="2"
+        class="outline-title"
+        role="heading"
+      >
+        {{ resolveTitle(theme) }}
+      </div>
+      <ElAnchor :offset="70" :bound="120">
+        <ElAnchorLink
+          v-for="{ link, title, children } in headers"
+          :key="link"
+          :href="link"
+          :title="title"
+        >
+          <template v-if="children" #sub-link>
+            <ElAnchorLink
+              v-for="{ link: childLink, title: childTitle } in children"
+              :key="childLink"
+              :href="childLink"
+              :title="childTitle"
+            />
+          </template>
+        </ElAnchorLink>
+      </ElAnchor>
+    </div>
+  </nav>
+</template>
+
+<style scoped lang="scss">
+.VPDocAsideOutline {
+  display: none;
+}
+
+.VPDocAsideOutline.has-outline {
+  display: block;
+}
+
+.content {
+  position: relative;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.outline-title {
+  font-size: 12px;
+  line-height: 30px;
+  padding-left: 14px;
+  color: var(--text-color-light);
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-top: 0px;
+}
+</style>