From a40736d0b6920d54f3a7b8a74961818a85458902 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Tue, 17 Dec 2024 17:07:21 +0100
Subject: [PATCH] feat(ui): Link component with no explicit styling has an
 underline

---
 front/src/components/ui/Link.vue | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index be5e2f76a..edee420b5 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -3,31 +3,30 @@ import { computed } from 'vue'
 import { type RouterLinkProps, RouterLink } from 'vue-router'
 import { type ColorProps, type VariantProps, propsToColor } from '~/composables/colors';
 
-const { to, icon, inline, round, ...otherProps } = defineProps<RouterLinkProps
-  & {
+const { to, icon, round, ...colorProps } = defineProps<{
     icon?: string;
-    round?: boolean
-    inline?: true
-  } & ColorProps & VariantProps>()
+    round?: boolean;
+  } & ColorProps & VariantProps & RouterLinkProps>()
 
 const isExternalLink = computed(() => {
   return typeof to === 'string' && to.startsWith('http')
 })
 
 const isIconOnly = computed(() => !!icon)
+const isSimple = Object.keys(colorProps).length === 0
 </script>
 
 <template>
   <a v-if="isExternalLink"
-    v-bind="propsToColor(otherProps)"
+    v-bind="propsToColor({ ...colorProps, interactive: true })"
     :class="[
-      'interactive',
       $style.link,
-      $style.external,
       round && $style['is-round'],
-      isIconOnly && $style['is-icon-only']
-      ]"
-    :href="to?.toString()"
+      isIconOnly && $style['is-icon-only'],
+      isSimple && $style['force-underline'],
+      $style.external
+    ]"
+    :href="to.toString()"
     target="_blank"
   >
     <i v-if="icon" :class="['bi', icon]" />
@@ -37,13 +36,13 @@ const isIconOnly = computed(() => !!icon)
   </a>
   <RouterLink v-else
     :to="to"
-    v-bind="propsToColor(otherProps)"
+    v-bind="propsToColor({ ...colorProps, interactive: true })"
     :class="[
-      'interactive',
       $style.link,
       round && $style['is-round'],
-      isIconOnly && $style['is-icon-only']
-      ]"
+      isIconOnly && $style['is-icon-only'],
+      isSimple && $style['force-underline']
+    ]"
   >
     <i v-if="icon" :class="['bi', icon]" />
     <span>
@@ -83,7 +82,7 @@ const isIconOnly = computed(() => !!icon)
       margin-left: 1ch;
     }
 
-    &:not(:hover):not(:global(.active)) {
+    &:not(:hover, .force-underline) {
       text-decoration:none;
       background-color:transparent;
       border-color:transparent;