valaxy 0.20.1 → 0.20.2

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/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,