valaxy 0.20.1 → 0.20.3

package/client/components/ValaxyFootnoteTooltip.vue

@@ -1,17 +1,14 @@
-<script lang="ts">
-import { PopperWrapper } from 'floating-vue'
-
-const Component = ({
-  ...PopperWrapper,
-  name: 'ValaxyFootnoteTooltip',
-  vPopperTheme: 'tooltip',
-}) as unknown as typeof PopperWrapper
-
-export default Component
+<script setup lang="ts">
+import { Tooltip } from 'floating-vue'
+// distance offset for sup
 </script>
 
-<style scoped>
-div .v-popper {
-  display: inline
-}
-</style>
+<template>
+  <Tooltip class="inline-block" :distance="8">
+    <slot />
+
+    <template #popper>
+      <slot name="popper" />
+    </template>
+  </Tooltip>
+</template>

package/client/composables/index.ts

@@ -19,6 +19,7 @@ export * from './outline'
 // utils
 export * from './back'
 export * from './decrypt'
+export * from './search'
 
 // app
 export * from './app'

package/client/composables/search/fuse.ts

@@ -0,0 +1,57 @@
+import { computed, onMounted, shallowRef } from 'vue'
+import { useSiteConfig } from 'valaxy'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import type { FuseListItem } from 'valaxy/types'
+
+export function useFuseSearch<T extends FuseListItem = FuseListItem>(
+  search: MaybeRefOrGetter<string>,
+  options?: MaybeRefOrGetter<UseFuseOptions<T>>,
+) {
+  const siteConfig = useSiteConfig()
+
+  const fuseListData = shallowRef<T[]>([])
+
+  const keys = computed(() => {
+    const ks = siteConfig.value.fuse.options.keys || []
+    return ks.length === 0 ? ['title', 'tags', 'categories', 'excerpt'] : ks
+  })
+
+  const defaultOptions: UseFuseOptions<T> = {
+    fuseOptions: {
+      includeMatches: true,
+      findAllMatches: true,
+      // threshold: 0.99,
+      // ignoreLocation: true,
+
+      ...siteConfig.value.fuse.options,
+      keys: keys.value,
+    },
+    // resultLimit: resultLimit.value,
+    // matchAllWhenSearchEmpty: matchAllWhenSearchEmpty.value,
+  }
+  const useFuseOptions = computed<UseFuseOptions<T>>(() => ({
+    ...defaultOptions,
+    ...options,
+  }))
+
+  const ruse = useFuse<T>(search, fuseListData, useFuseOptions)
+
+  async function fetchFuseListData(path?: string) {
+    const fuseListDataPath = path
+      || (siteConfig.value.fuse.dataPath.startsWith('http')
+        ? siteConfig.value.fuse.dataPath
+        : `${import.meta.env.BASE_URL}${siteConfig.value.fuse.dataPath}`)
+
+    const res = await fetch(fuseListDataPath)
+    const data = await res.json()
+
+    if (Array.isArray(data))
+      fuseListData.value = data
+  }
+
+  onMounted(fetchFuseListData)
+
+  return ruse
+}

package/client/composables/search/index.ts

@@ -0,0 +1 @@
+export * from './fuse'

package/client/modules/floating-vue.ts

@@ -6,13 +6,7 @@ import type { DefaultTheme, ValaxyConfig } from 'valaxy/types'
 import type { ComputedRef } from 'vue'
 
 export async function install({ app }: ViteSSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
-  app.use(FloatingVue, Object.assign({
-    themes: {
-      tooltip: {
-        delay: {
-          show: 0,
-        },
-      },
-    },
-  }, config.value.siteConfig.floatingVue || {}))
+  // @see https://floating-vue.starpad.dev/guide/config#default-values
+  const defaultFloatingVueConfig = {}
+  app.use(FloatingVue, Object.assign(defaultFloatingVueConfig, config.value.siteConfig.floatingVue || {}))
 }

package/client/stores/app.ts

@@ -1,6 +1,6 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { ref } from 'vue'
-import { useMobile, useThemeConfig, useValaxyDark } from 'valaxy'
+import { computed, ref } from 'vue'
+import { useMobile, useSiteConfig, useThemeConfig, useValaxyDark } from 'valaxy'
 
 /**
  * Global store for users
@@ -11,16 +11,25 @@ import { useMobile, useThemeConfig, useValaxyDark } from 'valaxy'
  * ```
  */
 export const useAppStore = defineStore('app', () => {
+  const siteConfig = useSiteConfig()
+
   const themeConfig = useThemeConfig()
   const { isDark, toggleDark, toggleDarkWithTransition, themeColor } = useValaxyDark(themeConfig.value.valaxyDarkOptions)
 
   const isMobile = useMobile()
   const showLoading = ref(true)
 
+  const showToggleLocale = computed(() => siteConfig.value.languages.length > 1)
+
   return {
     isMobile,
     // for dark
     isDark,
+    /**
+     * show toggle locale btn
+     * only show toggle when `siteConfig.languages.length > 1`
+     */
+    showToggleLocale,
     themeColor,
     toggleDark,
     toggleDarkWithTransition,