From efc0fb4f1938a63a5909b27191cf204d7ec80e47 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Tue, 17 Dec 2024 15:12:20 +0100
Subject: [PATCH] feat(ui): make Link with item render similarly to Button with
 icon

---
 front/src/components/ui/Link.vue | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 64caa704a..be5e2f76a 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -13,6 +13,8 @@ const { to, icon, inline, round, ...otherProps } = defineProps<RouterLinkProps
 const isExternalLink = computed(() => {
   return typeof to === 'string' && to.startsWith('http')
 })
+
+const isIconOnly = computed(() => !!icon)
 </script>
 
 <template>
@@ -22,13 +24,16 @@ const isExternalLink = computed(() => {
       'interactive',
       $style.link,
       $style.external,
-      round && $style['is-round']
+      round && $style['is-round'],
+      isIconOnly && $style['is-icon-only']
       ]"
     :href="to?.toString()"
     target="_blank"
   >
     <i v-if="icon" :class="['bi', icon]" />
-    <slot />
+    <span>
+      <slot />
+    </span>
   </a>
   <RouterLink v-else
     :to="to"
@@ -36,17 +41,18 @@ const isExternalLink = computed(() => {
     :class="[
       'interactive',
       $style.link,
-      round && $style['is-round']
+      round && $style['is-round'],
+      isIconOnly && $style['is-icon-only']
       ]"
   >
     <i v-if="icon" :class="['bi', icon]" />
-    <slot />
+    <span>
+      <slot />
+    </span>
   </RouterLink>
 </template>
 
 <style module lang="scss">
-  .active { outline: 3px solid red; }
-  .external { outline: 3px dotted blue; }
   .link {
     display: inline-flex;
     align-items: center;
@@ -58,7 +64,10 @@ const isExternalLink = computed(() => {
 
     line-height: 1em;
 
-    padding: 0.642857142857em;
+    padding: 0.642857142857em 0.714em 0.714em 0.714em;
+    &.is-icon-only {
+      padding: 0.675em 0.714em 0.678em 0.714em;
+    }
 
     border-radius: var(--fw-border-radius);
     margin: 0 0.5ch;
@@ -67,10 +76,13 @@ const isExternalLink = computed(() => {
     transition:background-color .3s, border-color .2s;
 
     i {
-      margin-right:1ch;
       font-size:1.4em;
     }
 
+    i:global(.bi) + span:not(:empty) {
+      margin-left: 1ch;
+    }
+
     &:not(:hover):not(:global(.active)) {
       text-decoration:none;
       background-color:transparent;