@wot-ui/vitepress-theme 2.0.0-alpha.10

package/dist/theme/components/VPDoc.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { useRoute } from 'vitepress'
+import { computed, ref, inject } from 'vue'
+import VPDocAside from 'vitepress/dist/client/theme-default/components/VPDocAside.vue'
+import VPDocFooter from 'vitepress/dist/client/theme-default/components/VPDocFooter.vue'
+import { useData } from 'vitepress'
+import { useLayout } from 'vitepress/theme'
+import VPIframe from './VPIframe.vue'
+import { wotThemeOptionsKey } from '../options.js'
+
+const { theme }: any = useData()
+
+const route = useRoute()
+const { hasSidebar, hasAside, leftAside } = useLayout()
+const themeOptions = inject(wotThemeOptionsKey)
+const demoIframeOptions = themeOptions?.demoIframe
+
+const pageName = computed(() => route.path.replace(/[./]+/g, '_').replace(/_html$/, ''))
+const isComponent = computed(
+  () =>
+    (route.path.startsWith('/component') || route.path.startsWith('/en-US/component')) && !route.path.includes('/use-') && demoIframeOptions !== false
+)
+const expanded = ref(true)
+</script>
+
+<template>
+  <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside, 'is-component': isComponent, 'is-expanded': expanded }">
+    <slot name="doc-top" />
+    <div class="container">
+      <div v-if="hasAside" class="aside" :class="{ 'left-aside': leftAside }">
+        <div class="aside-curtain" />
+        <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="vp-doc" :class="[pageName, theme.externalLinkIcon && 'external-link-icon-enabled']" />
+            <VPIframe v-if="isComponent" v-model:expanded="expanded" />
+          </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>
+.VPDoc {
+  padding: 32px 24px 96px;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .VPDoc {
+    padding: 48px 32px 128px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPDoc {
+    padding: 48px 32px 0;
+  }
+
+  .VPDoc:not(.has-sidebar) .container {
+    display: flex;
+    justify-content: center;
+    max-width: 992px;
+  }
+
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 752px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .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: 32px;
+  width: 100%;
+  max-width: 256px;
+}
+
+.left-aside {
+  order: 1;
+  padding-left: unset;
+  padding-right: 32px;
+}
+
+.aside-container {
+  position: fixed;
+  top: 0;
+  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
+  width: 224px;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.aside-container::-webkit-scrollbar {
+  display: none;
+}
+
+.aside-curtain {
+  position: fixed;
+  bottom: 0;
+  z-index: 10;
+  width: 224px;
+  height: 32px;
+  background: linear-gradient(transparent, var(--vp-c-bg) 70%);
+}
+
+.aside-content {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
+  padding-bottom: 32px;
+}
+
+.content {
+  position: relative;
+  margin: 0 auto;
+  width: 100%;
+}
+
+@media (min-width: 960px) {
+  .content {
+    padding: 0 32px 128px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .content {
+    order: 1;
+    margin: 0;
+    min-width: 600px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .VPDoc.is-component.is-expanded .container {
+    padding-right: 358px;
+  }
+
+  .VPDoc.is-component:not(.is-expanded) .container {
+    padding-right: 48px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPDoc.is-component.is-expanded .container {
+    padding-right: 424px;
+  }
+
+  .VPDoc.is-component:not(.is-expanded) .container {
+    padding-right: 64px;
+  }
+}
+
+.content-container {
+  margin: 0 auto;
+}
+</style>

package/dist/theme/components/VPFeature.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { ref, computed } from 'vue'
+import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
+import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
+import { ElImageViewer } from 'element-plus'
+import { useData } from 'vitepress'
+
+const props = defineProps<{
+  icon?: DefaultTheme.FeatureIcon
+  title: string
+  details?: string
+  link?: string
+  linkText?: string
+  rel?: string
+  target?: string
+  imagePreview?: boolean
+}>()
+
+const { isDark } = useData()
+
+const showViewer = ref(false)
+const currentImageUrl = ref('')
+
+const getImageSrc = computed(() => {
+  if (!props.icon || typeof props.icon !== 'object') return ''
+
+  if ('src' in props.icon) {
+    return props.icon.src
+  }
+
+  if ('light' in props.icon && 'dark' in props.icon) {
+    return isDark.value ? props.icon.dark : props.icon.light
+  }
+
+  return ''
+})
+
+const handleImageClick = (event: Event) => {
+  if (props.imagePreview && getImageSrc.value) {
+    event.preventDefault()
+    event.stopPropagation()
+    currentImageUrl.value = getImageSrc.value
+    showViewer.value = true
+  }
+}
+
+const handleCloseViewer = () => {
+  showViewer.value = false
+}
+</script>
+
+<template>
+  <VPLink class="VPFeature" :href="link" :rel="rel" :target="target" :no-icon="true" :tag="link ? 'a' : 'div'">
+    <article class="box">
+      <div v-if="typeof icon === 'object' && icon.wrap" class="icon">
+        <VPImage :image="icon" :alt="icon.alt" :height="icon.height || 48" :width="icon.width || 48" />
+      </div>
+      <VPImage
+        v-else-if="typeof icon === 'object'"
+        :image="icon"
+        :alt="icon.alt"
+        :height="icon.height || 48"
+        :width="icon.width || 48"
+        @click="handleImageClick"
+      />
+      <div v-else-if="icon" class="icon" v-html="icon"></div>
+      <h2 class="title" v-html="title"></h2>
+      <p v-if="details" class="details" v-html="details"></p>
+
+      <div v-if="linkText" class="link-text">
+        <p class="link-text-value">
+          {{ linkText }}
+          <span class="vpi-arrow-right link-text-icon" />
+        </p>
+      </div>
+    </article>
+  </VPLink>
+  <el-image-viewer v-if="showViewer" :url-list="[currentImageUrl]" :initial-index="0" :close-on-press-escape="true" @close="handleCloseViewer" />
+</template>
+
+<style scoped>
+.VPFeature {
+  display: block;
+  border: 1px solid var(--vp-c-bg-soft);
+  border-radius: 12px;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft);
+  transition: border-color 0.25s, background-color 0.25s;
+}
+
+.VPFeature.link:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  height: 100%;
+}
+
+.box > :deep(.VPImage) {
+  margin-bottom: 20px;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+  border-radius: 6px;
+  background-color: var(--vp-c-default-soft);
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  transition: background-color 0.25s;
+}
+
+.title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.details {
+  flex-grow: 1;
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.link-text {
+  padding-top: 8px;
+}
+
+.link-text-value {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+}
+
+.link-text-icon {
+  margin-left: 6px;
+}
+</style>