vitepress-theme-element-plus 1.3.1 → 1.4.0

package/client/components/LocalNav.vue

@@ -1,160 +1,160 @@
-<script lang="ts" setup>
-import { useWindowScroll } from '@vueuse/core'
-import { ElButton } from 'element-plus'
-import { useData } from 'vitepress'
-import { useLayout } from 'vitepress/theme'
-import { computed, onMounted, ref } from 'vue'
-import { useBackTop } from '../hooks/useBackTop'
-import 'element-plus/theme-chalk/el-button.css'
-
-defineProps<{
-  open: boolean
-}>()
-
-defineEmits<{
-  (e: 'openMenu'): void
-}>()
-
-const { theme } = useData()
-const { isHome, hasSidebar, hasLocalNav } = useLayout()
-const { y } = useWindowScroll()
-
-const navHeight = ref(0)
-
-onMounted(() => {
-  navHeight.value = Number.parseInt(
-    getComputedStyle(document.documentElement).getPropertyValue(
-      '--vp-nav-height',
-    ),
-  )
-})
-
-const classes = computed(() => {
-  return {
-    'VPLocalNav': true,
-    'has-sidebar': hasSidebar.value,
-    'empty': !hasLocalNav.value,
-    'fixed': !hasLocalNav.value && !hasSidebar.value,
-  }
-})
-
-const { shouldShow, scrollToTop } = useBackTop()
-</script>
-
-<template>
-  <div
-    v-if="!isHome && (hasLocalNav || hasSidebar || y >= navHeight)"
-    :class="classes"
-  >
-    <div class="container">
-      <button
-        v-if="hasSidebar"
-        class="menu"
-        :aria-expanded="open"
-        aria-controls="VPSidebarNav"
-        @click="$emit('openMenu')"
-      >
-        <span class="vpi-align-left menu-icon" />
-        <span class="menu-text">
-          {{ theme.sidebarMenuLabel || 'Menu' }}
-        </span>
-      </button>
-      <Transition name="shifting">
-        <ElButton
-          :class="{ show: shouldShow }"
-          link
-          class="height-5 go-back-top"
-          @click.prevent.stop="scrollToTop"
-        >
-          Back to top
-        </ElButton>
-      </Transition>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.VPLocalNav {
-  position: sticky;
-  top: 0;
-  /*rtl:ignore*/
-  left: 0;
-  z-index: var(--vp-z-index-local-nav);
-  border-bottom: 1px solid var(--vp-c-gutter);
-  padding-top: var(--vp-layout-top-height, 0px);
-  width: 100%;
-  background-color: var(--vp-local-nav-bg-color);
-  overflow: hidden;
-}
-
-.VPLocalNav.fixed {
-  position: fixed;
-}
-
-@media (min-width: 960px) {
-  .VPLocalNav {
-    display: none;
-  }
-}
-
-@media (min-width: 1440px) {
-  .VPLocalNav {
-    display: none;
-  }
-}
-
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.menu {
-  display: flex;
-  align-items: center;
-  line-height: 24px;
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
-}
-
-.menu:hover {
-  color: var(--vp-c-text-1);
-  transition: color 0.25s;
-}
-
-@media (min-width: 960px) {
-  .menu {
-    display: none;
-  }
-}
-
-.menu-icon {
-  margin-right: 8px;
-  font-size: 16px;
-}
-
-.menu,
-:deep(.VPLocalNavOutlineDropdown > button) {
-  padding: 12px 24px 11px;
-}
-
-@media (min-width: 768px) {
-  .menu,
-  :deep(.VPLocalNavOutlineDropdown > button) {
-    padding: 12px 32px 11px;
-  }
-}
-
-.go-back-top {
-  transform: translateY(100%);
-  opacity: 0;
-  padding: 12px 32px 11px;
-
-  &.show {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-</style>
+<script lang="ts" setup>
+import { useWindowScroll } from '@vueuse/core'
+import { ElButton } from 'element-plus'
+import { useData } from 'vitepress'
+import { useLayout } from 'vitepress/theme'
+import { computed, onMounted, ref } from 'vue'
+import { useBackTop } from '../hooks/useBackTop'
+import 'element-plus/theme-chalk/el-button.css'
+
+defineProps<{
+  open: boolean
+}>()
+
+defineEmits<{
+  (e: 'openMenu'): void
+}>()
+
+const { theme } = useData()
+const { isHome, hasSidebar, hasLocalNav } = useLayout()
+const { y } = useWindowScroll()
+
+const navHeight = ref(0)
+
+onMounted(() => {
+  navHeight.value = Number.parseInt(
+    getComputedStyle(document.documentElement).getPropertyValue(
+      '--vp-nav-height',
+    ),
+  )
+})
+
+const classes = computed(() => {
+  return {
+    'VPLocalNav': true,
+    'has-sidebar': hasSidebar.value,
+    'empty': !hasLocalNav.value,
+    'fixed': !hasLocalNav.value && !hasSidebar.value,
+  }
+})
+
+const { shouldShow, scrollToTop } = useBackTop()
+</script>
+
+<template>
+  <div
+    v-if="!isHome && (hasLocalNav || hasSidebar || y >= navHeight)"
+    :class="classes"
+  >
+    <div class="container">
+      <button
+        v-if="hasSidebar"
+        class="menu"
+        :aria-expanded="open"
+        aria-controls="VPSidebarNav"
+        @click="$emit('openMenu')"
+      >
+        <span class="vpi-align-left menu-icon" />
+        <span class="menu-text">
+          {{ theme.sidebarMenuLabel || 'Menu' }}
+        </span>
+      </button>
+      <Transition name="shifting">
+        <ElButton
+          :class="{ show: shouldShow }"
+          link
+          class="height-5 go-back-top"
+          @click.prevent.stop="scrollToTop"
+        >
+          Back to top
+        </ElButton>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPLocalNav {
+  position: sticky;
+  top: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-local-nav);
+  border-bottom: 1px solid var(--vp-c-gutter);
+  padding-top: var(--vp-layout-top-height, 0px);
+  width: 100%;
+  background-color: var(--vp-local-nav-bg-color);
+  overflow: hidden;
+}
+
+.VPLocalNav.fixed {
+  position: fixed;
+}
+
+@media (min-width: 960px) {
+  .VPLocalNav {
+    display: none;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPLocalNav {
+    display: none;
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menu {
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.menu:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+@media (min-width: 960px) {
+  .menu {
+    display: none;
+  }
+}
+
+.menu-icon {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.menu,
+:deep(.VPLocalNavOutlineDropdown > button) {
+  padding: 12px 24px 11px;
+}
+
+@media (min-width: 768px) {
+  .menu,
+  :deep(.VPLocalNavOutlineDropdown > button) {
+    padding: 12px 32px 11px;
+  }
+}
+
+.go-back-top {
+  transform: translateY(100%);
+  opacity: 0;
+  padding: 12px 32px 11px;
+
+  &.show {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+</style>

package/client/components/MobilePreviewFrame.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { computed, ref, watch } from 'vue'
+import { resolveMobilePreviewId } from '../mobile-preview'
+
+const { frontmatter, isDark, theme } = useData()
+const route = useRoute()
+const frameRef = ref<HTMLIFrameElement>()
+const previewConfig = computed(() => theme.value.mobilePreview ?? {})
+
+const demoId = computed(() => {
+  const value = frontmatter.value.mobileDemo
+  return typeof value === 'string'
+    ? resolveMobilePreviewId(value, previewConfig.value.demoRoot)
+    : ''
+})
+
+const frameWidth = computed(() => `${previewConfig.value.deviceWidth ?? 390}px`)
+const viewportHeight = computed(() => `${previewConfig.value.deviceHeight ?? 760}px`)
+
+const previewHref = computed(() => {
+  const previewPath = normalizePreviewPath(previewConfig.value.previewPath)
+  const search = new URLSearchParams({
+    demo: demoId.value,
+    theme: isDark.value ? 'dark' : 'light',
+  })
+
+  return `${resolveLocalePreviewPath(route.path, previewPath)}?${search.toString()}`
+})
+
+const frameStyle = computed(() => ({
+  '--vp-mobile-preview-width': frameWidth.value,
+  '--vp-mobile-preview-height': viewportHeight.value,
+}))
+
+function normalizePreviewPath(value: unknown): string {
+  if (typeof value !== 'string' || !value.trim())
+    return 'preview/'
+
+  return value
+    .trim()
+    .replace(/^\/+/, '')
+    .replace(/\/?$/, '/')
+}
+
+function resolveLocalePreviewPath(path: string, previewPath: string): string {
+  const matchedLocale = path.match(/^\/([^/]+)\//)
+  const localePrefix = matchedLocale ? `/${matchedLocale[1]}/` : '/'
+
+  return `${localePrefix}${previewPath}`
+}
+
+function syncTheme(): void {
+  frameRef.value?.contentWindow?.postMessage({
+    type: 'vp-mobile-preview-theme',
+    value: isDark.value ? 'dark' : 'light',
+  }, '*')
+}
+
+watch(isDark, syncTheme)
+</script>
+
+<template>
+  <section v-if="demoId" class="VPMobilePreviewFrame" :style="frameStyle">
+    <div class="preview-actions">
+      <span class="preview-actions__label">Mobile Preview</span>
+      <a class="preview-actions__link" :href="previewHref" target="_blank" rel="noreferrer">
+        Open
+      </a>
+    </div>
+
+    <div class="preview-phone">
+      <div class="preview-phone__camera" />
+      <iframe
+        ref="frameRef"
+        class="preview-phone__viewport"
+        :src="previewHref"
+        title="Mobile demo preview"
+        loading="lazy"
+        @load="syncTheme"
+      />
+    </div>
+
+    <a class="preview-mobile-link" :href="previewHref" target="_blank" rel="noreferrer">
+      Open mobile preview
+    </a>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.preview-actions {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding: 0 4px;
+}
+
+.preview-actions__label {
+  color: var(--vp-c-text-2);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.preview-actions__link,
+.preview-mobile-link {
+  color: var(--vp-c-brand-1);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.preview-phone {
+  display: none;
+  position: relative;
+  width: var(--vp-mobile-preview-width);
+  padding: 14px 10px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.64)), rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 32px;
+  box-shadow:
+    0 24px 80px rgba(15, 23, 42, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+}
+
+:global(.dark) .preview-phone {
+  background: linear-gradient(180deg, rgba(24, 24, 27, 0.92), rgba(24, 24, 27, 0.8)), rgba(24, 24, 27, 0.86);
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow:
+    0 24px 80px rgba(0, 0, 0, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.preview-phone__camera {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  width: 104px;
+  height: 18px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.92);
+  transform: translateX(-50%);
+}
+
+.preview-phone__viewport {
+  display: block;
+  width: 100%;
+  height: var(--vp-mobile-preview-height);
+  overflow: hidden;
+  background: var(--vp-c-bg);
+  border: 0;
+  border-radius: 24px;
+}
+
+.preview-mobile-link {
+  display: inline-flex;
+}
+
+@media (min-width: 1440px) {
+  .preview-actions {
+    display: flex;
+  }
+
+  .preview-phone {
+    display: block;
+  }
+
+  .preview-mobile-link {
+    display: none;
+  }
+}
+</style>

package/client/components/MobilePreviewLayout.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { useData } from 'vitepress'
+import { computed, inject, markRaw, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
+import { mobilePreviewRegistryKey, resolveMobilePreviewId } from '../mobile-preview'
+
+const { frontmatter, theme } = useData()
+const registry = inject(mobilePreviewRegistryKey)
+const demoId = ref('')
+const errorMessage = ref('')
+const isLoading = ref(true)
+const demoComponent = shallowRef<Component>()
+const previewConfig = computed(() => theme.value.mobilePreview ?? {})
+
+const statusMessage = computed(() => {
+  if (errorMessage.value)
+    return errorMessage.value
+
+  return isLoading.value ? 'Loading mobile preview...' : 'No preview loaded.'
+})
+
+function applyTheme(theme: string | null): void {
+  if (typeof document === 'undefined')
+    return
+
+  document.documentElement.classList.toggle('dark', theme === 'dark')
+}
+
+async function loadDemo(value: string | null): Promise<void> {
+  demoId.value = resolveMobilePreviewId(value ?? '', previewConfig.value.demoRoot)
+  demoComponent.value = undefined
+  errorMessage.value = ''
+  isLoading.value = true
+
+  if (!demoId.value) {
+    errorMessage.value = 'Missing demo id.'
+    isLoading.value = false
+    return
+  }
+
+  if (!registry) {
+    errorMessage.value = 'No mobile preview registry was provided.'
+    isLoading.value = false
+    return
+  }
+
+  const loader = registry[demoId.value]
+  if (!loader) {
+    errorMessage.value = `Unknown demo: ${demoId.value}`
+    isLoading.value = false
+    return
+  }
+
+  try {
+    const module = await loader()
+    const resolvedComponent = (module as { default?: Component }).default ?? module
+    demoComponent.value = markRaw(resolvedComponent as Component)
+  }
+  catch (error) {
+    errorMessage.value = error instanceof Error
+      ? error.message
+      : 'Failed to load the requested demo.'
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function syncFromLocation(): void {
+  if (typeof window === 'undefined')
+    return
+
+  const search = new URLSearchParams(window.location.search)
+  const fallbackDemo = typeof frontmatter.value.mobileDemo === 'string'
+    ? frontmatter.value.mobileDemo
+    : null
+  applyTheme(search.get('theme'))
+  void loadDemo(search.get('demo') ?? fallbackDemo)
+}
+
+function handleMessage(event: MessageEvent): void {
+  if (event.data?.type !== 'vp-mobile-preview-theme')
+    return
+
+  applyTheme(event.data.value)
+}
+
+onMounted(() => {
+  syncFromLocation()
+  window.addEventListener('message', handleMessage)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', handleMessage)
+})
+</script>
+
+<template>
+  <main class="VPMobilePreviewLayout">
+    <component :is="demoComponent" v-if="demoComponent" />
+    <div v-else class="preview-status">
+      <p class="preview-status__title">
+        Mobile Preview
+      </p>
+      <p class="preview-status__body">
+        {{ statusMessage }}
+      </p>
+    </div>
+  </main>
+</template>
+
+<style scoped lang="scss">
+.VPMobilePreviewLayout {
+  min-height: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.preview-status {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  min-height: 100vh;
+  padding: 24px;
+  color: var(--vp-c-text-2);
+  text-align: center;
+}
+
+.preview-status__title {
+  margin: 0 0 12px;
+  color: var(--vp-c-text-1);
+  font-weight: 600;
+}
+
+.preview-status__body {
+  margin: 0;
+  font-size: 14px;
+}
+</style>