fix: home action link not being reactive (#195) (#212)

Co-authored-by: mariotang <[email protected]>

src/client/theme-default/components/NavDropdownLinkItem.vue

@@ -9,16 +9,16 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, toRefs } from 'vue'
 import type { DefaultTheme } from '../config'
 import { useNavLink } from '../composables/navLink'
 import OutboundLink from './icons/OutboundLink.vue'
 
-const { item } = defineProps<{
+const props = defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
-
-const { props: linkProps, isExternal } = useNavLink(item)
+const propsRefs = toRefs(props);
+const { props: linkProps, isExternal } = useNavLink(propsRefs.item)
 </script>
 
 <style scoped>

src/client/theme-default/components/NavLink.vue

@@ -7,16 +7,16 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, toRefs } from 'vue'
 import type { DefaultTheme } from '../config'
 import { useNavLink } from '../composables/navLink'
 import OutboundLink from './icons/OutboundLink.vue'
 
-const { item } = defineProps<{
-  item: DefaultTheme.NavItemWithLink
-}>()
-
-const { props: linkProps, isExternal } = useNavLink(item)
+const props = defineProps<{
+  item: DefaultTheme.NavItemWithLink,
+}>();
+const propsRefs = toRefs(props);
+const { props: linkProps, isExternal } = useNavLink(propsRefs.item);
 </script>
 
 <style scoped>

src/client/theme-default/composables/navLink.ts

@@ -1,23 +1,23 @@
-import { computed } from 'vue'
+import { computed, Ref } from 'vue'
 import { useRoute } from 'vitepress'
 import type { DefaultTheme } from '../config'
 import { isExternal as isExternalCheck } from '../utils'
 import { useUrl } from '../composables/url'
 
-export function useNavLink(item: DefaultTheme.NavItemWithLink) {
+export function useNavLink(item: Ref<DefaultTheme.NavItemWithLink>) {
   const route = useRoute()
   const { withBase } = useUrl()
 
-  const isExternal = isExternalCheck(item.link)
+  const isExternal = isExternalCheck(item.value.link)
 
   const props = computed(() => {
     const routePath = normalizePath(route.path)
 
     let active = false
-    if (item.activeMatch) {
-      active = new RegExp(item.activeMatch).test(routePath)
+    if (item.value.activeMatch) {
+      active = new RegExp(item.value.activeMatch).test(routePath)
     } else {
-      const itemPath = normalizePath(withBase(item.link))
+      const itemPath = normalizePath(withBase(item.value.link))
       active =
         itemPath === '/'
           ? itemPath === routePath
@@ -29,10 +29,10 @@ export function useNavLink(item: DefaultTheme.NavItemWithLink) {
         active,
         isExternal
       },
-      href: isExternal ? item.link : withBase(item.link),
-      target: item.target || isExternal ? `_blank` : null,
-      rel: item.rel || isExternal ? `noopener noreferrer` : null,
-      'aria-label': item.ariaLabel
+      href: isExternal ? item.value.link : withBase(item.value.link),
+      target: item.value.target || isExternal ? `_blank` : null,
+      rel: item.value.rel || isExternal ? `noopener noreferrer` : null,
+      'aria-label': item.value.ariaLabel
     }
   })