Add isExternalLink to useLink composable

d0rich · Nov 11, 2023 · e4fcf5f · e4fcf5f
1 parent a89a523
commit e4fcf5f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/packages/esprit-design/src/components/buttons/DBtn.vue b/packages/esprit-design/src/components/buttons/DBtn.vue
@@ -52,7 +52,11 @@ const props = defineProps({
   }
 })
 
-const { linkComponent: currentComponent } = useLink(props)
+const {
+  linkComponent: currentComponent,
+  isLink,
+  isExternalLink
+} = useLink(props)
 </script>
 
 <template>
@@ -70,7 +74,7 @@ const { linkComponent: currentComponent } = useLink(props)
     <DWrapFocusHighlight
       :variant="highlight"
       :link-exact="exact"
-      :no-passive-link="noPassiveHighlight"
+      :no-passive-link="noPassiveHighlight || !isLink || isExternalLink"
       :color-class="colorClass"
       :active="active"
     >

diff --git a/packages/esprit-design/src/composables/router.ts b/packages/esprit-design/src/composables/router.ts
@@ -17,23 +17,36 @@ export function useLink(props: LinkProps) {
     | string
 
   const isLink = computed(() => !!(props.href || props.to))
+  const isExternalLink = computed(() => {
+    if (!props.href) return false
+    const href = props.href
+    return (
+      href.startsWith('http') ||
+      href.startsWith('mailto:') ||
+      href.startsWith('tel:') ||
+      href.startsWith('#')
+    )
+  })
 
   if (typeof NuxtLink !== 'string') {
     return {
       isLink,
+      isExternalLink,
       linkComponent: NuxtLink
     }
   }
 
   if (typeof RouterLink !== 'string') {
     return {
       isLink,
+      isExternalLink,
       linkComponent: RouterLink
     }
   }
 
   return {
     isLink,
+    isExternalLink,
     linkComponent: 'a'
   }
 }