feat(ui): Link component with no explicit styling has an underline

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;