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

Co-authored-by: mariotang <mariotang@tencent.com>

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
  }
  })