vitepress-theme-element-plus 1.3.1 → 1.4.0

package/client/components/Footer.vue

@@ -1,100 +1,100 @@
-<script lang="ts" setup>
-import { ElLink } from 'element-plus'
-import { useData } from 'vitepress'
-import { useLayout } from 'vitepress/theme'
-import { computed } from 'vue'
-
-const { isHome } = useLayout()
-const { theme } = useData()
-const blogroll = theme.value.footer?.blogroll
-
-const linkUnderline = computed(() => {
-  const underlineProp = (ElLink as any)?.props?.underline
-  const types = Array.isArray(underlineProp?.type)
-    ? underlineProp.type
-    : underlineProp?.type
-      ? [underlineProp.type]
-      : []
-  return types.includes(String) ? 'never' : false
-})
-</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.text"
-        class="footer-main-link"
-        target="_blank"
-        :href="child.link"
-        :underline="linkUnderline"
-      >
-        {{ child.text }}
-      </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 64px;
-  }
-
-  .container {
-    box-sizing: border-box;
-    width: auto;
-  }
-
-  .footer-main {
-    font-size: 0;
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 130px;
-    width: 200px;
-
-    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;
-      color: var(--text-color-light);
-
-      &:hover {
-        color: var(--text-color);
-      }
-
-      & .el-link__inner {
-        display: block;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-      }
-    }
-  }
-}
-
-@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'
+import { computed } from 'vue'
+
+const { isHome } = useLayout()
+const { theme } = useData()
+const blogroll = theme.value.footer?.blogroll
+
+const linkUnderline = computed(() => {
+  const underlineProp = (ElLink as any)?.props?.underline
+  const types = Array.isArray(underlineProp?.type)
+    ? underlineProp.type
+    : underlineProp?.type
+      ? [underlineProp.type]
+      : []
+  return types.includes(String) ? 'never' : false
+})
+</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.text"
+        class="footer-main-link"
+        target="_blank"
+        :href="child.link"
+        :underline="linkUnderline"
+      >
+        {{ child.text }}
+      </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 64px;
+  }
+
+  .container {
+    box-sizing: border-box;
+    width: auto;
+  }
+
+  .footer-main {
+    font-size: 0;
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 130px;
+    width: 200px;
+
+    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;
+      color: var(--text-color-light);
+
+      &:hover {
+        color: var(--text-color);
+      }
+
+      & .el-link__inner {
+        display: block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+@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>

package/client/components/Layout.vue

@@ -1,156 +1,159 @@
-<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.js'
-import { useSidebarControl } from 'vitepress/dist/client/theme-default/composables/sidebar.js'
-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>
+<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.js'
+import { useSidebarControl } from 'vitepress/dist/client/theme-default/composables/sidebar.js'
+import { computed, provide, useSlots, watch } from 'vue'
+import { useCloseSidebarOnEscape } from '../hooks/useSidebar'
+import Content from './Content.vue'
+import LocalNav from './LocalNav.vue'
+import MobilePreviewLayout from './MobilePreviewLayout.vue'
+import Nav from './Nav.vue'
+import Sidebar from './Sidebar.vue'
+
+const { frontmatter } = useData()
+const isStandaloneMobilePreview = computed(() => frontmatter.value.layout === 'mobile-preview')
+
+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>
+  <MobilePreviewLayout v-if="isStandaloneMobilePreview" />
+  <div v-else-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

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