vitepress-theme-element-plus 1.3.1 → 1.4.0

package/client/components/Doc.vue

@@ -1,185 +1,219 @@
-<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.has-aside {
-    padding: 64px 48px 48px 64px;
-  }
-
-  .VPDoc.has-aside {
-    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'
+import MobilePreviewFrame from './MobilePreviewFrame.vue'
+
+const { theme, frontmatter } = useData()
+
+const route = useRoute()
+const { hasAside, leftAside, hasSidebar } = useSidebar()
+const hasMobilePreview = computed(() => typeof frontmatter.value.mobileDemo === 'string' && frontmatter.value.mobileDemo.trim().length > 0)
+const showAside = computed(() => hasAside.value)
+
+const pageName = computed(() =>
+  route.path.replace(/[./]+/g, '_').replace(/_html$/, ''),
+)
+</script>
+
+<template>
+  <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar, 'has-aside': showAside, 'has-mobile-preview': hasMobilePreview }">
+    <slot name="doc-top" />
+    <div class="container">
+      <div v-if="hasMobilePreview" class="preview">
+        <div class="preview-container">
+          <MobilePreviewFrame />
+        </div>
+      </div>
+
+      <div v-if="showAside" 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.has-aside {
+    padding: 64px 48px 48px 64px;
+  }
+
+  .VPDoc.has-aside {
+    padding: 64px 0 48px 64px;
+  }
+
+  .VPDoc .container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .VPDoc.has-mobile-preview .container {
+    gap: 32px;
+  }
+
+  .VPDoc .aside {
+    display: block;
+  }
+
+  .VPDoc.has-aside.has-mobile-preview .aside {
+    display: none;
+  }
+}
+
+@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%;
+}
+
+.preview {
+  margin-bottom: 24px;
+  order: 2;
+}
+
+.preview-container {
+  width: 100%;
+  position: sticky;
+  top: calc(var(--vp-nav-height) + 32px);
+}
+
+.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;
+  }
+}
+
+@media (min-width: 1680px) {
+  .VPDoc.has-aside.has-mobile-preview .aside {
+    display: block;
+  }
+}
+
+.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>