refactor: simplify navlink logic

Author: yyx990803

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

@@ -116,7 +116,7 @@ const action = computed(() => ({
   }
 }
 
-.action ::v-deep(.item) {
+.action :deep(.item) {
   display: inline-block;
   border-radius: 4px;
   padding: 0 20px;
@@ -128,14 +128,14 @@ const action = computed(() => ({
   transition: background-color .1s ease;
 }
 
-.action ::v-deep(.item:hover) {
+.action :deep(.item:hover) {
   text-decoration: none;
   color: #ffffff;
   background-color: var(--c-brand-light);
 }
 
 @media (min-width: 420px) {
-  .action ::v-deep(.item) {
+  .action :deep(.item) {
     padding: 0 24px;
     line-height: 56px;
     font-size: 1.2rem;

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

@@ -1,15 +1,8 @@
 <template>
   <div class="nav-dropdown-link-item">
-    <a
-      class="item"
-      :class="classes"
-      :href="href"
-      :target="target"
-      :rel="rel"
-      :aria-label="ariaLabel"
-    >
+    <a class="item" v-bind="linkProps">
       <span class="arrow" />
-      <span class="text">{{ text }}</span>
+      <span class="text">{{ item.text }}</span>
       <span class="icon"><OutboundLink v-if="isExternal" /></span>
     </a>
   </div>
@@ -22,27 +15,18 @@ import { useNavLink } from '../composables/navLink'
 import OutboundLink from './icons/OutboundLink.vue'
 
 const { item } = defineProps<{
-  item: DefaultTheme.NavItem
+  item: DefaultTheme.NavItemWithLink
 }>()
 
-const {
-  classes,
-  isActive,
-  isExternal,
-  href,
-  target,
-  rel,
-  ariaLabel,
-  text
-} = useNavLink(item)
+const { props: linkProps, isExternal } = useNavLink(item)
 </script>
 
 <style scoped>
 .item {
   display: block;
   padding: 0 1.5rem 0 2.5rem;
   line-height: 32px;
-  font-size: .9rem;
+  font-size: 0.9rem;
   font-weight: 500;
   color: var(--c-text);
   white-space: nowrap;
@@ -52,7 +36,7 @@ const {
   .item {
     padding: 0 24px 0 12px;
     line-height: 32px;
-    font-size: .85rem;
+    font-size: 0.85rem;
     font-weight: 500;
     color: var(--c-text);
     white-space: nowrap;

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

@@ -1,44 +1,25 @@
 <template>
   <div class="nav-link">
-    <a
-      class="item"
-      :class="classes"
-      :href="href"
-      :target="target"
-      :rel="rel"
-      :aria-label="ariaLabel"
-    >
-      {{ text }} <OutboundLink v-if="isExternal" />
+    <a class="item" v-bind="linkProps">
+      {{ item.text }} <OutboundLink v-if="isExternal" />
     </a>
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineProps } 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 {
-  classes,
-  isActive,
-  isExternal,
-  href,
-  target,
-  rel,
-  ariaLabel,
-  text
-} = useNavLink(item)
+const { props: linkProps, isExternal } = useNavLink(item)
 </script>
 
 <style scoped>
-.nav-link {
-
-}
-
 .item {
   display: block;
   padding: 0 1.5rem;
@@ -65,7 +46,7 @@ const {
     border-bottom: 2px solid transparent;
     padding: 0;
     line-height: 24px;
-    font-size: .9rem;
+    font-size: 0.9rem;
     font-weight: 500;
   }
 

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

@@ -53,6 +53,9 @@ export function useLocaleLinks() {
       ? locales[currentLangKey].selectText
       : 'Languages'
 
-    return { text: selectText, items: candidates }
+    return {
+      text: selectText,
+      items: candidates
+    } as DefaultTheme.NavItemWithChildren
   })
 }

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

@@ -8,52 +8,25 @@ export function useNavLink(item: DefaultTheme.NavItemWithLink) {
   const route = useRoute()
   const { withBase } = useUrl()
 
-  const classes = computed(() => ({
-    active: isActive.value,
-    external: isExternal.value
-  }))
-
-  const isActive = computed(() => {
-    return normalizePath(withBase(item.link)) === normalizePath(route.path)
-  })
-
-  const isExternal = computed(() => {
-    return isExternalCheck(item.link)
-  })
-
-  const href = computed(() => {
-    return isExternal.value ? item.link : withBase(item.link)
-  })
-
-  const target = computed(() => {
-    if (item.target) {
-      return item.target
+  const isExternal = isExternalCheck(item.link)
+
+  const props = computed(() => {
+    return {
+      class: {
+        active:
+          normalizePath(withBase(item.link)) === normalizePath(route.path),
+        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
     }
-
-    return isExternal.value ? '_blank' : ''
   })
 
-  const rel = computed(() => {
-    if (item.rel) {
-      return item.rel
-    }
-
-    return isExternal.value ? 'noopener noreferrer' : ''
-  })
-
-  const ariaLabel = computed(() => item.ariaLabel)
-
-  const text = computed(() => item.text)
-
   return {
-    classes,
-    isActive,
-    isExternal,
-    href,
-    target,
-    rel,
-    ariaLabel,
-    text
+    props,
+    isExternal
   }
 }
 

src/client/theme-default/config.ts

@@ -87,7 +87,7 @@ export namespace DefaultTheme {
   }
 
   export interface NavItemWithChildren extends NavItemBase {
-    items: NavItem[]
+    items: NavItemWithLink[]
   }
 
   // sidebar -------------------------------------------------------------------