vitepress-theme-element-plus 0.0.7 → 0.0.9

package/client/components/Doc.vue

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

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

@@ -1,87 +1,87 @@
-<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;
-
-  & :deep(.el-anchor) {
-    --el-anchor-active-color: var(--vp-c-brand);
-    --el-anchor-marker-bg-color: var(--vp-c-brand);
-  }
-}
-
-.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>
+<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;
+
+  & :deep(.el-anchor) {
+    --el-anchor-active-color: var(--vp-c-brand);
+    --el-anchor-marker-bg-color: var(--vp-c-brand);
+  }
+}
+
+.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>