vitepress-theme-element-plus 1.3.1 → 1.3.2

package/client/components/DocAsideOutline.vue

@@ -1,145 +1,145 @@
-<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="item in headers"
-          :key="item.link"
-          :href="item.link"
-          :title="item.title"
-        >
-          <template #default>
-            <span class="outline-link">
-              <span
-                class="outline-link__text"
-                v-text="item.title"
-              />
-              <span
-                v-if="item.titleTags.length"
-                class="outline-link__tags"
-              >
-                <span
-                  v-for="(tagHTML, tagIndex) in item.titleTags"
-                  :key="`${item.link}-tag-${tagIndex}`"
-                  class="outline-link__tag"
-                  v-html="tagHTML"
-                />
-              </span>
-            </span>
-          </template>
-          <template v-if="item.children && item.children.length" #sub-link>
-            <ElAnchorLink
-              v-for="child in item.children"
-              :key="child.link"
-              :href="child.link"
-              :title="child.title"
-            >
-              <template #default>
-                <span class="outline-link">
-                  <span
-                    class="outline-link__text"
-                    v-text="child.title"
-                  />
-                  <template v-if="child.titleTags.length">
-                    <span
-                      v-for="(tagHTML, tagIndex) in child.titleTags"
-                      :key="`${child.link}-tag-${tagIndex}`"
-                      v-html="tagHTML"
-                    />
-                  </template>
-                </span>
-              </template>
-            </ElAnchorLink>
-          </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;
-}
-
-.outline-link {
-  color: inherit;
-  width: 100%;
-  display: inline-flex;
-}
-
-.outline-link__text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:deep(.el-tag) {
-  transform: scale(0.75);
-  margin-left: -4px;
-  margin-right: -4px;
-}
-
-:deep(.vp-tag) {
-  margin-left: 6px;
-}
-</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="item in headers"
+          :key="item.link"
+          :href="item.link"
+          :title="item.title"
+        >
+          <template #default>
+            <span class="outline-link">
+              <span
+                class="outline-link__text"
+                v-text="item.title"
+              />
+              <span
+                v-if="item.titleTags.length"
+                class="outline-link__tags"
+              >
+                <span
+                  v-for="(tagHTML, tagIndex) in item.titleTags"
+                  :key="`${item.link}-tag-${tagIndex}`"
+                  class="outline-link__tag"
+                  v-html="tagHTML"
+                />
+              </span>
+            </span>
+          </template>
+          <template v-if="item.children && item.children.length" #sub-link>
+            <ElAnchorLink
+              v-for="child in item.children"
+              :key="child.link"
+              :href="child.link"
+              :title="child.title"
+            >
+              <template #default>
+                <span class="outline-link">
+                  <span
+                    class="outline-link__text"
+                    v-text="child.title"
+                  />
+                  <template v-if="child.titleTags.length">
+                    <span
+                      v-for="(tagHTML, tagIndex) in child.titleTags"
+                      :key="`${child.link}-tag-${tagIndex}`"
+                      v-html="tagHTML"
+                    />
+                  </template>
+                </span>
+              </template>
+            </ElAnchorLink>
+          </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;
+}
+
+.outline-link {
+  color: inherit;
+  width: 100%;
+  display: inline-flex;
+}
+
+.outline-link__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:deep(.el-tag) {
+  transform: scale(0.75);
+  margin-left: -4px;
+  margin-right: -4px;
+}
+
+:deep(.vp-tag) {
+  margin-left: 6px;
+}
+</style>

package/client/components/DocFooter.vue

@@ -1,162 +1,162 @@
-<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);
-  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);
-  transition: color 0.25s;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-</style>
+<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);
+  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);
+  transition: color 0.25s;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+</style>