valaxy-theme-yun 1.0.0-rc.8 → 1.0.0

package/.npmignore

@@ -0,0 +1,8 @@
+# dev / tooling files — themes publish their source, so only exclude non-runtime junk
+.codebuddy
+bump.config.ts
+docs
+tsconfig.json
+*.tsbuildinfo
+*.log
+.DS_Store

package/App.vue

@@ -2,13 +2,11 @@
 import { useHead } from '@unhead/vue'
 import { TooltipProvider } from 'reka-ui'
 import { useAppStore } from 'valaxy'
-import { computed, onMounted, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useThemeConfig } from './composables'
 import { useYunAppStore } from './stores'
 
-const isDev = import.meta.env.DEV
-
 const appStore = useAppStore()
 
 // Use a safe default for SSR; real themeColor is applied after mount
@@ -52,17 +50,22 @@ watch(
   { immediate: true },
 )
 
-onMounted(() => {
-  // for mobile vh
+function updateViewportHeight() {
   document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
+}
+
+onMounted(() => {
+  // The viewport can be zero when an iframe mounts inside a hidden panel.
+  updateViewportHeight()
+  window.addEventListener('resize', updateViewportHeight)
   app.showLoading = false
 })
+onBeforeUnmount(() => window.removeEventListener('resize', updateViewportHeight))
 </script>
 
 <template>
   <TooltipProvider>
     <YunStratoApp v-if="yun.isStrato" />
-    <ValaxyDebug v-if="isDev" />
 
     <YunPageHeaderGradient />
     <YunNavMenu />

package/components/ValaxyMain.vue

@@ -119,4 +119,10 @@ onContentUpdated(() => {
     }
   }
 }
+
+@media (width < 768px) {
+  .yun-main > .content > .yun-card:first-child {
+    border-radius: 0;
+  }
+}
 </style>

package/components/YunAside.vue

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
 import { useFrontmatter } from 'valaxy'
-import { computed } from 'vue'
+import { computed, nextTick, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useYunAppStore } from '../stores'
 
+defineProps<{
+  mobileTitle?: string
+}>()
+
 const fm = useFrontmatter()
 const { t } = useI18n()
 const yun = useYunAppStore()
@@ -13,17 +17,59 @@ const showToc = computed(() => {
 })
 
 const asideEnabled = computed(() => fm.value.aside !== false)
+const closeButton = useTemplateRef<HTMLButtonElement>('closeButton')
+let keepHeadingFocus = false
+
+function closeAside(focusHeading = false) {
+  if (!yun.rightSidebar.isOpen)
+    return
+  keepHeadingFocus = focusHeading
+  yun.rightSidebar.toggle()
+}
+
+watch(() => yun.rightSidebar.isOpen, (open) => {
+  if (open) {
+    nextTick(() => closeButton.value?.focus({ preventScroll: true }))
+  }
+  else if (keepHeadingFocus) {
+    keepHeadingFocus = false
+  }
+  else {
+    nextTick(() => document.querySelector<HTMLElement>('[aria-controls="yun-page-outline"][aria-expanded="false"]')?.focus({ preventScroll: true }))
+  }
+})
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && yun.rightSidebar.isOpen) {
+    event.preventDefault()
+    closeAside()
+  }
+}
 </script>
 
 <template>
   <aside
     v-if="asideEnabled"
+    id="yun-page-outline"
     flex="~ col"
     class="va-card yun-aside min-h-sm rounded-2"
     :class="{ open: yun.rightSidebar.isOpen }"
     text="center"
     overflow="auto"
+    @keydown="onKeydown"
   >
+    <div class="yun-aside-mobile-header">
+      <span>{{ mobileTitle || t('sidebar.toc') }}</span>
+      <button
+        ref="closeButton"
+        type="button"
+        class="yun-aside-close yun-icon-btn"
+        :aria-label="t('theme.closeOutline')"
+        @click="closeAside()"
+      >
+        <span i-ri-close-line aria-hidden="true" />
+      </button>
+    </div>
     <div class="w-full" flex="~ col" pb-2>
       <template v-if="showToc">
         <h2
@@ -32,7 +78,7 @@ const asideEnabled = computed(() => fm.value.aside !== false)
         >
           {{ t('sidebar.toc') }}
         </h2>
-        <YunOutline />
+        <YunOutline @select="closeAside(true)" />
       </template>
 
       <div class="flex-grow" />
@@ -56,10 +102,14 @@ const asideEnabled = computed(() => fm.value.aside !== false)
   right: 0;
   bottom: 0;
   z-index: var(--yun-z-aside);
-  width: 0;
+  width: min(360px, calc(100vw - 24px));
+  height: 100dvh;
+  max-height: 100dvh;
+  visibility: hidden;
   transform: translateX(100%);
-  transition: all var(--va-transition-duration-fast) map.get($cubic-bezier, 'ease-in-out');
-  max-height: calc(100vh - var(--yun-margin-top));
+  transition: transform var(--va-transition-duration-fast) map.get($cubic-bezier, 'ease-in-out'), visibility 0s linear var(--va-transition-duration-fast);
+  border-radius: 16px 0 0 16px;
+  box-shadow: -12px 0 40px rgb(0 0 0 / 0.12);
 
   // float panel
   &.float {
@@ -72,13 +122,39 @@ const asideEnabled = computed(() => fm.value.aside !== false)
   }
 
   &.show {
-    width: 320px;
+    visibility: visible;
+    transform: translateX(0);
   }
 
   // Mobile/tablet: toggle open via JS
   &.open {
-    width: 320px;
+    visibility: visible;
     transform: translateX(0);
+    transition: transform var(--va-transition-duration-fast) map.get($cubic-bezier, 'ease-in-out'), visibility 0s;
+  }
+}
+
+.yun-aside-mobile-header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 56px;
+  padding: 0 12px 0 20px;
+  border-bottom: 1px solid var(--yun-surface-line);
+  font-size: 16px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.yun-aside-close {
+  color: var(--va-c-text);
+}
+
+@media (width < 1280px) {
+  .yun-aside > div > h2,
+  .yun-aside .outline-title {
+    display: none;
   }
 }
 
@@ -89,18 +165,32 @@ const asideEnabled = computed(() => fm.value.aside !== false)
     top: var(--yun-margin-top);
     z-index: auto;
     width: 320px;
+    height: auto;
     max-height: calc(100vh - var(--yun-margin-top));
+    visibility: visible;
     transform: translateX(0);
+    border-radius: 8px;
+    box-shadow: none;
 
     // On xl, sidebar toggle should not affect layout
     &.open {
       width: 320px;
     }
   }
+
+  .yun-aside-mobile-header {
+    display: none;
+  }
 }
 
 .toc-btn {
   color: var(--va-c-primary);
   z-index: var(--yun-z-toc-btn);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .yun-aside {
+    transition: none;
+  }
+}
 </style>

package/components/YunBackToTop.vue

@@ -1,73 +1,120 @@
 <script lang="ts" setup>
 import { useBackToTop } from 'valaxy'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { show, percentage, backToTop } = useBackToTop({ offset: 100 })
 
-const radius = 48
-const circumference = 2 * radius * Math.PI
+const { t } = useI18n()
 
-const strokeOffset = computed(() => {
-  // 周长
-  const val = (1 - percentage.value) * circumference
-  return val < 0 ? 0 : val
+const progressAngle = computed(() => {
+  const progress = Number.isFinite(percentage.value) ? percentage.value : 0
+  return `${Math.min(1, Math.max(0, progress)) * 360}deg`
 })
 </script>
 
 <template>
-  <a
-    href="#"
-    class="back-to-top yun-icon-btn bg-$va-c-bg-soft shadow-md"
+  <button
+    type="button"
+    class="back-to-top yun-icon-btn"
+    :aria-label="t('theme.backToTop')"
+    :title="t('theme.backToTop')"
+    :tabindex="show ? 0 : -1"
+    :aria-hidden="!show"
     :class="show && 'show'"
+    :style="{ '--yun-back-top-progress': progressAngle }"
     @click="backToTop"
   >
-    <div class="size-8" i-ri-arrow-up-s-line />
-    <svg class="progress-circle-container" viewBox="0 0 100 100">
-      <circle
-        :stroke-dasharray="`${circumference} ${circumference}`"
-        :stroke-dashoffset="strokeOffset"
-        stroke="currentColor" stroke-width="2" stroke-linecap="round"
-        class="progress-circle" cx="50" cy="50" :r="radius" fill="none"
-      />
-    </svg>
-  </a>
+    <div class="back-to-top-arrow" i-ri-arrow-up-s-line aria-hidden="true" />
+  </button>
 </template>
 
 <style lang="scss">
-@use "sass:map";
+.back-to-top.yun-icon-btn {
+  --yun-back-top-bg: var(--va-c-bg-soft);
+  --yun-back-top-progress-opacity: 0.06;
 
-.back-to-top {
   position: fixed;
-  right: -1.5rem;
-  bottom: 1rem;
+  right: max(1rem, env(safe-area-inset-right));
+  bottom: max(1rem, env(safe-area-inset-bottom));
   z-index: var(--yun-z-go-up-btn);
-  opacity: 0;
-  pointer-events: none;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  box-sizing: border-box;
+  isolation: isolate;
+  overflow: visible;
+  border: 0;
+  border-radius: 50%;
   color: var(--va-c-primary);
-  transform: translateX(0) rotate(270deg);
+  background: transparent;
 
-  // override yun-icon-btn transition
-  transition: all var(--va-transition-duration), opacity var(--va-transition-duration-fast) !important;
+  // Keep the progress tint inside the face, underneath the arrow.
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border: 1px solid rgb(var(--va-c-primary-rgb), 0.08);
+    border-radius: inherit;
+    background: var(--yun-back-top-bg);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
+    transition: background-color 180ms ease;
+    pointer-events: none;
+  }
+
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 180ms ease, visibility 180ms ease;
 
   &.show {
-    transform: translateX(-40px) rotate(360deg);
     opacity: 1;
-    pointer-events: fill;
+    visibility: visible;
+    pointer-events: auto;
   }
 
-  .icon {
-    width: 2.5rem;
-    height: 2.5rem;
+  @media (hover: hover) {
+    &.show:hover {
+      --yun-back-top-bg: color-mix(in srgb, var(--va-c-bg-soft) 94%, var(--va-c-primary));
+    }
   }
-}
 
-.progress-circle {
-  transition: var(--va-transition-duration) stroke-dashoffset;
-  transform: rotate(-90deg);
-  transform-origin: 50% 50%;
+  &.show:active {
+    --yun-back-top-bg: color-mix(in srgb, var(--va-c-bg-soft) 88%, var(--va-c-primary));
+  }
 
-  &-container {
+  .back-to-top-arrow {
+    position: relative;
+    z-index: 1;
+    width: 24px;
+    height: 24px;
+  }
+
+  &::after {
+    content: '';
     position: absolute;
+    inset: 1px;
+    z-index: 0;
+    border-radius: inherit;
+    background: conic-gradient(
+      from 0deg,
+      rgb(var(--va-c-primary-rgb), var(--yun-back-top-progress-opacity)) 0deg var(--yun-back-top-progress, 0deg),
+      transparent var(--yun-back-top-progress, 0deg) 360deg
+    );
+    pointer-events: none;
+  }
+
+}
+
+html.dark .back-to-top.yun-icon-btn {
+  --yun-back-top-progress-opacity: 0.1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .back-to-top.yun-icon-btn,
+  .back-to-top.yun-icon-btn::before {
+    transition: none;
   }
 }
 </style>

package/components/YunBanner.vue

@@ -26,7 +26,7 @@ const bannerStyles = computed<CSSProperties>(() => {
     'justify-content': 'space-between',
   }
   if (yun.isStrato)
-    styles.borderBottom = `1px solid var(--banner-line-color)`
+    styles.borderBottom = `1px solid var(--yun-banner-divider-color, var(--banner-line-color))`
 
   return styles
 })
@@ -58,7 +58,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div id="yun-banner" border="b-1px b-solid b-$banner-line-color" :style="bannerStyles">
+  <div id="yun-banner" border="b-1px b-solid" :style="bannerStyles">
     <div class="banner-line-container">
       <div
         class="banner-line vertical-line-top"
@@ -94,6 +94,10 @@ onMounted(async () => {
 @use "../styles/widgets/banner.scss" as *;
 @use "../styles/modules/prologue.scss" as *;
 
+#yun-banner {
+  border-bottom-color: var(--yun-banner-divider-color, var(--banner-line-color));
+}
+
 :root {
   // banner
   --banner-line-color: black;

package/components/YunCard.vue

@@ -4,7 +4,7 @@ defineProps<{ cover?: string }>()
 
 <template>
   <div
-    class="yun-card flex-center rounded-2 overflow-hidden" flex="col"
+    class="yun-card flex-center overflow-hidden" flex="col"
     min-h="100px"
     bg="$va-c-bg-light"
   >
@@ -23,3 +23,9 @@ defineProps<{ cover?: string }>()
     </div>
   </div>
 </template>
+
+<style scoped>
+.yun-card {
+  border-radius: var(--va-card-border-radius, 0.5rem);
+}
+</style>

package/components/YunComment.vue

@@ -16,7 +16,7 @@ const activeComment = ref(commentSystems.value[0])
   <YunCard w="full" p="4" class="comment yun-comment sm:p-6 lg:px-12 xl:px-16">
     <ClientOnly>
       <div v-if="commentSystems.length > 1" class="flex justify-end w-full mb-2">
-        <YunSelect v-model="activeComment" :options="commentSystems" />
+        <YunSelect v-model="activeComment" :options="commentSystems" compact />
       </div>
       <YunWaline v-if="activeComment === 'waline'" />
       <YunTwikoo v-if="activeComment === 'twikoo'" />

package/components/YunDocsSidebar.vue

@@ -1,55 +1,71 @@
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
-import { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'
+import { useEventListener, useMediaQuery } from '@vueuse/core'
+import { computed, nextTick, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { useThemeConfig } from '../composables'
-import { resolveYunDocsSidebar } from '../utils/sidebar'
+import { hasYunDocsSidebarNavigation, resolveYunDocsSidebar } from '../utils/sidebar'
+
+withDefaults(defineProps<{
+  floatingTrigger?: boolean
+}>(), {
+  floatingTrigger: true,
+})
+
+const isOpen = defineModel<boolean>('open', { default: false })
 
 const route = useRoute()
 const themeConfig = useThemeConfig()
 const { t } = useI18n()
 
 const sidebarItems = computed(() => resolveYunDocsSidebar(themeConfig.value.sidebar, route.path))
-const isOpen = shallowRef(false)
+const hasNavigation = computed(() => hasYunDocsSidebarNavigation(sidebarItems.value, route.path))
+const isDesktop = useMediaQuery('(min-width: 1024px)', { ssrWidth: 1280 })
+const closeButton = useTemplateRef<HTMLButtonElement>('closeButton')
 const triggerRef = useTemplateRef<HTMLButtonElement>('trigger')
 
+watch(isOpen, (open) => {
+  if (open)
+    nextTick(() => closeButton.value?.focus({ preventScroll: true }))
+})
+
 watch(
   () => route.fullPath,
   () => isOpen.value = false,
 )
+watch(isDesktop, (desktop) => {
+  if (desktop)
+    isOpen.value = false
+})
 
 useEventListener('keydown', (event: KeyboardEvent) => {
   if (event.key === 'Escape' && isOpen.value)
     close(true)
 })
 
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-
 function close(restoreFocus = false) {
   isOpen.value = false
   if (restoreFocus)
-    nextTick(() => triggerRef.value?.focus())
+    nextTick(() => (triggerRef.value || document.querySelector<HTMLElement>('[aria-controls="yun-docs-sidebar"][aria-expanded="false"]'))?.focus({ preventScroll: true }))
 }
 </script>
 
 <template>
-  <template v-if="sidebarItems.length">
+  <template v-if="hasNavigation">
     <button
+      v-if="floatingTrigger"
       ref="trigger"
       type="button"
       class="yun-docs-sidebar-trigger yun-icon-btn lg:hidden"
       :aria-label="t('theme.docsSidebar')"
       :aria-expanded="isOpen"
       aria-controls="yun-docs-sidebar"
-      @click="toggle"
+      @click="isOpen = !isOpen"
     >
-      <span i-ri-menu-2-line aria-hidden="true" />
+      <span i-ri-side-bar-line aria-hidden="true" />
     </button>
 
-    <YunOverlay :show="isOpen" @click="close()" />
+    <YunOverlay :show="isOpen" @click="close(true)" />
 
     <aside
       id="yun-docs-sidebar-desktop"
@@ -65,6 +81,18 @@ function close(restoreFocus = false) {
       id="yun-docs-sidebar"
       class="va-card yun-docs-sidebar yun-docs-sidebar-mobile"
     >
+      <div class="yun-docs-sidebar-mobile-header">
+        <span>{{ t('theme.docsSidebar') }}</span>
+        <button
+          ref="closeButton"
+          type="button"
+          class="yun-icon-btn"
+          :aria-label="t('theme.closeMenu')"
+          @click="close(true)"
+        >
+          <span i-ri-close-line aria-hidden="true" />
+        </button>
+      </div>
       <nav :aria-label="t('theme.docsSidebar')">
         <YunDocsSidebarNav :items="sidebarItems" @navigate="close()" />
       </nav>
@@ -92,6 +120,18 @@ function close(restoreFocus = false) {
   border-radius: 0 0.5rem 0.5rem 0;
 }
 
+.yun-docs-sidebar-mobile-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 56px;
+  margin: -1rem -1rem 1rem;
+  padding: 0 12px 0 20px;
+  border-bottom: 1px solid var(--yun-surface-line);
+  font-size: 16px;
+  font-weight: 600;
+}
+
 .yun-docs-sidebar-trigger {
   position: fixed;
   bottom: 4.75rem;

package/components/YunDropdownMenu.vue

@@ -44,7 +44,7 @@ defineSlots<{
     <DropdownMenuTrigger as-child>
       <slot name="trigger" />
     </DropdownMenuTrigger>
-    <DropdownMenuPortal>
+    <DropdownMenuPortal to="#valaxy-teleports">
       <DropdownMenuContent class="yun-dropdown-menu-content" :side-offset="sideOffset" :align="align">
         <template v-for="(item, index) in items" :key="`${item.key}-${index}`">
           <DropdownMenuSeparator v-if="item.key === 'separator'" class="yun-dropdown-menu-separator" />

package/components/YunFullscreenMenu.vue

@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useYunAppStore } from '../stores'
 
 const yunApp = useYunAppStore()
-const fullscreenMenuRef = ref<HTMLElement>()
 </script>
 
 <template>
   <Transition name="slide-left">
     <div
       v-if="yunApp.fullscreenMenu.isOpen"
-      ref="fullscreenMenuRef"
       p="t-12 md:t-20"
       class="yun-fullscreen-menu fixed left-0 right-0 bottom-0 top-0 bg-$va-c-bg-soft z-$yun-z-fullscreen-menu overflow-auto max-w-md shadow-2xl"
     >