valaxy-theme-yun 0.13.3 → 0.13.5

package/components/YunAlgoliaSearch.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { watch } from 'vue'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const { useAddonAlgolia } = await import('valaxy-addon-algolia')
+
+const { loaded, load, dispatchEvent } = useAddonAlgolia()
+
+watch(() => props.open, () => {
+  if (props.open)
+    load()
+
+  if (loaded)
+    dispatchEvent()
+})
+</script>
+
+<template>
+  <AlgoliaSearchBox v-if="loaded" class="hidden" />
+</template>

package/components/YunSearchBtn.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+withDefaults(defineProps<{
+  open?: boolean
+}>(), {
+  open: false,
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <button class="search-btn popup-trigger yun-icon-btn" :title="t('menu.search')">
+    <div v-if="!open" i-ri-search-line />
+    <div v-else text="!2xl" i-ri-close-line />
+  </button>
+</template>

package/components/YunSearchTrigger.vue

@@ -1,24 +1,12 @@
 <script lang="ts" setup>
-import { computed } from '@vue/reactivity'
 import { useSiteConfig } from 'valaxy'
-import { ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { computed, defineAsyncComponent, ref, watch } from 'vue'
 import { useMagicKeys } from '@vueuse/core'
 
 const siteConfig = useSiteConfig()
-const { t } = useI18n()
-
-// to avoid loading the docsearch js upfront (which is more than 1/3 of the
-// payload), we delay initializing it until the user has actually clicked or
-// hit the hotkey to invoke it.
-const loaded = ref(false)
-
-function load() {
-  if (!loaded.value)
-    loaded.value = true
-}
 
 const isAlgolia = computed(() => siteConfig.value.search.type === 'algolia')
+const isFuse = computed(() => siteConfig.value.search.type === 'fuse')
 
 const open = ref(false)
 
@@ -29,21 +17,20 @@ const togglePopup = () => {
 const { Meta_K } = useMagicKeys()
 
 watch(Meta_K, (val) => {
-  if (val) {
+  if (val)
     togglePopup()
-    load()
-  }
 })
+
+const YunAlgoliaSearch = isAlgolia.value
+  ? defineAsyncComponent(() => import('./YunAlgoliaSearch.vue'))
+  : () => null
 </script>
 
 <template>
-  <button class="search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="togglePopup">
-    <div v-if="!open" i-ri-search-line />
-    <div v-else text="!2xl" i-ri-close-line />
-  </button>
+  <YunSearchBtn :open="open && !isAlgolia" @click="togglePopup" />
 
-  <AlgoliaSearchBox v-if="isAlgolia && loaded" />
-  <YunFuseSearch v-else-if="siteConfig.search.type === 'fuse'" :open="open" @close="open = false" />
+  <YunAlgoliaSearch v-if="isAlgolia" :open="open" @close="open = false" />
+  <YunFuseSearch v-else-if="isFuse" :open="open" @close="open = false" />
 </template>
 
 <style lang="scss">

package/composables/helper.ts

@@ -15,7 +15,7 @@ export function useRandomData<T>(source: string | T[], random = false) {
     if (typeof source === 'string') {
       if (!isClient)
         return
-      rawData = await fetch(source).then(res => res.json()) as T[]
+      rawData = (await fetch(source).then(res => res.json()) as T[]) || []
     }
     else { rawData = source }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -22,6 +22,6 @@
     "valaxy-addon-waline": "0.0.9"
   },
   "devDependencies": {
-    "valaxy": "0.13.3"
+    "valaxy": "0.13.5"
   }
 }

package/valaxy.config.ts

@@ -34,7 +34,11 @@ export default defineValaxyTheme<ThemeConfig>((options) => {
       build: {
         rollupOptions: {
           // add on demand external
-          external: ['valaxy-addon-twikoo', 'valaxy-addon-waline'],
+          external: [
+            // 'valaxy-addon-algolia',
+            'valaxy-addon-twikoo',
+            'valaxy-addon-waline',
+          ],
         },
       },
       plugins: [ThemeVitePlugin(options)],