vitepress-theme-element-plus 0.0.3 → 0.0.4

package/client/components/DocFooter.vue

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

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

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