valaxy-theme-hairy 1.2.4 → 1.2.6

package/components/HairyBody.vue

@@ -12,7 +12,7 @@ withDefaults(
 <template>
   <div class="min-h-49vh relative z-5">
     <div class="mx-auto container flex z-1 relative">
-      <div class="relative flex-1 pt-2 main">
+      <div class="relative flex-1 pt-2 main min-w-0">
         <slot v-if="$slots.default" />
         <HairyComment v-if="comment" />
       </div>

package/components/HairyTabbar.vue

@@ -2,16 +2,19 @@
 import { ElTabPane, ElTabs } from 'element-plus'
 import 'element-plus/theme-chalk/el-tabs.css'
 import 'element-plus/theme-chalk/el-tab-pane.css'
-import { computed, provide, ref } from 'vue'
+import { computed, provide, ref, watch } from 'vue'
 
 import type { DefaultTheme } from 'valaxy/types'
 import { useFrontmatter, useThemeConfig } from 'valaxy'
+import { useOutline } from '../composables'
 
 const active = ref('aside')
 
 const frontmatter = useFrontmatter()
 const themeConfig = useThemeConfig()
 
+const { headers } = useOutline()
+
 const pageOutline = computed<DefaultTheme.Config['outline']>(
   () => frontmatter.value.outline ?? themeConfig.value.outline,
 )
@@ -21,11 +24,20 @@ const pageOutlineNotUndefined = computed(() =>
 )
 
 provide('HairyUserTab:active', active)
+
+const bars = computed<Record<string, boolean>>(() => ({
+  aside: pageOutlineNotUndefined.value && !!headers.value.length,
+  series: !!frontmatter.value.categories?.length,
+  user: true,
+}))
+const keys = computed(() => Object.keys(bars.value).filter(k => bars.value[k]))
+
+watch(keys, keys => active.value = keys[0], { immediate: true })
 </script>
 
 <template>
-  <ElTabs v-model="active" class="pt-3">
-    <ElTabPane v-if="pageOutlineNotUndefined" name="aside">
+  <ElTabs v-if="keys.length > 1" v-model="active" stretch class="pt-3">
+    <ElTabPane v-if="pageOutlineNotUndefined && headers.length" name="aside">
       <template #label>
         <div class="flex items-center">
           <div class="i-ri-list-check-2" />
@@ -34,7 +46,7 @@ provide('HairyUserTab:active', active)
       </template>
       <HairyOutline />
     </ElTabPane>
-    <ElTabPane label="Series" name="series">
+    <ElTabPane v-if="frontmatter.categories" label="Series" name="series">
       <template #label>
         <div class="flex items-center gap-1">
           <div class="i-ri-flow-chart" />
@@ -53,4 +65,6 @@ provide('HairyUserTab:active', active)
       <HairySidebar />
     </ElTabPane>
   </ElTabs>
+
+  <HairySidebar v-else />
 </template>

package/components/PageTags.vue

@@ -26,7 +26,7 @@ function displayTag(tag: string) {
         p="1"
         @click="displayTag(key.toString())"
       >
-        {{ $t(key, {}, { missingWarn: false }) }}
+        {{ key ? $t(key, {}, { missingWarn: false }) : '' }}
       </a>
     </div>
   </div>

package/components/posts/HairyUpdatedPost.vue

@@ -52,7 +52,7 @@ function displayCategory(keys: string | string[] = []) {
               class="dark:bg-dark-50 cursor-pointer border-none!"
               @click="$router.push(`/tags/${tag}`)"
             >
-              {{ $t(tag, {}, { missingWarn: false }) }}
+              {{ tag ? $t(tag, {}, { missingWarn: false }) : '' }}
             </ElTag>
           </div>
         </div>

package/components/third/HairyFuseSearchDialog.vue

@@ -20,13 +20,25 @@ whenever(() => !visible.value, () => {
 </script>
 
 <template>
-  <div v-if="visible" role="button" class="DocSearch DocSearch-Container " @click="visible = false">
-    <div class="DocSearch-Modal" style="--docsearch-vh: 5.5200000000000005px;" @click.stop>
-      <HairyFuseSearchHeader v-model:text="text" v-model:visible="visible" />
-      <HairyFuseSearchDropdown v-model:visible="visible" :text="text" />
-      <HairyFuseSearchFooter />
+  <Transition>
+    <div v-if="visible" role="button" class="DocSearch DocSearch-Container " @click="visible = false">
+      <div class="DocSearch-Modal" style="--docsearch-vh: 5.5200000000000005px;" @click.stop>
+        <HairyFuseSearchHeader v-model:text="text" v-model:visible="visible" />
+        <HairyFuseSearchDropdown v-model:visible="visible" :text="text" />
+        <HairyFuseSearchFooter />
+      </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

package/components/third/HairyFuseSearchHeader.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useModel } from 'vue'
+import { onMounted, ref, useModel } from 'vue'
 
 const props = defineProps<{
   text: string
@@ -8,6 +8,8 @@ const props = defineProps<{
 
 const text = useModel(props, 'text')
 const visible = useModel(props, 'visible')
+const inputRef = ref<HTMLInputElement>()
+onMounted(() => inputRef.value?.focus())
 </script>
 
 <template>
@@ -16,7 +18,7 @@ const visible = useModel(props, 'visible')
       <label id="docsearch-label" class="DocSearch-MagnifierLabel" for="docsearch-input">
         <svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
       </label>
-      <input id="docsearch-input" v-model="text" class="DocSearch-Input" aria-autocomplete="both" aria-labelledby="docsearch-label" autocomplete="off" autocorrect="off" autocapitalize="off" enterkeyhint="go" spellcheck="false" autofocus="true" placeholder="Search docs" maxlength="64" type="search" aria-activedescendant="docsearch-item-0" aria-controls="docsearch-list">
+      <input id="docsearch-input" ref="inputRef" v-model="text" class="DocSearch-Input" aria-autocomplete="both" aria-labelledby="docsearch-label" autocomplete="off" autocorrect="off" autocapitalize="off" enterkeyhint="go" spellcheck="false" autofocus="true" placeholder="Search docs" maxlength="64" type="search" aria-activedescendant="docsearch-item-0" aria-controls="docsearch-list">
       <button type="reset" title="Clear the query" class="DocSearch-Reset" aria-label="Clear the query" :hidden="!text" @click="text = ''">
         <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
       </button>

package/composables/category.ts

@@ -8,8 +8,6 @@ import { isEqual } from 'lodash-es'
 export function useCategory(categories: MaybeRef<string[]>) {
   const all = useCategories()
 
-  unref(categories)
-  // [BBB]
   return computed(() => {
     let parent: PostFrontMatter & Partial<CategoryList> = all.value as any
     for (const category of unref(categories)) {
@@ -21,6 +19,7 @@ export function useCategory(categories: MaybeRef<string[]>) {
         }
       }
     }
+
     return parent
   })
 }

package/layouts/post.vue

@@ -34,7 +34,7 @@ function displayTag(tag: string) {
         </div>
         <div v-if="post.tags?.length" class="tags flex-center gap-2 mt-2">
           <ElTag v-for="(tag) in post.tags" :key="tag" class="dark:bg-dark-50 cursor-pointer" @click="displayTag(tag)">
-            {{ $t(tag, {}, { missingWarn: false }) }}
+            {{ tag ? $t(tag, {}, { missingWarn: false }) : '' }}
           </ElTag>
         </div>
       </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "packageManager": "pnpm@8.15.8",
   "author": {
     "email": "wwu710632@gmail.com",

package/pages/categories/[...its].vue

@@ -14,7 +14,9 @@ const router = useRouter()
 const route = useRoute()
 
 const categories = computed(() => route.params.its as string)
+
 const paths = computed(() => categories.value.split('/').filter(Boolean))
+
 const current = useCategory(paths)
 const posts = useCategoryPost(paths)
 
@@ -26,7 +28,8 @@ function getBreadcrumbPath(index: number) {
 }
 
 function displayCategory(key: string) {
-  router.push({ path: `/categories/${[...paths.value, key].join('/')}` })
+  const paths = categories.value.split('/').filter(Boolean) // [Notes, Client]
+  router.push({ path: `/categories/${[...paths, key].join('/')}` })
 }
 </script>
 

package/pages/tags/[tag]/index.vue

@@ -17,7 +17,7 @@ const posts = computed<any[]>(() =>
       首页
     </HairyBreadcrumbItem>
     <HairyBreadcrumbItem>
-      {{ $t(tag, {}, { missingWarn: false }) }}
+      {{ tag ? $t(tag, {}, { missingWarn: false }) : '' }}
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
   <ElTimeline>