From 3f9799fd20175170e61aee5d4e10bcdc3dd522db Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Mon, 30 Dec 2024 13:17:55 +0100
Subject: [PATCH] fix(ui): width prop is respected on internal links

---
 front/src/components/ui/Link.vue    | 28 ++++---------------
 front/ui-docs/components/ui/link.md | 42 +++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 82340cabf..55831348f 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -35,7 +35,7 @@ const attributes = computed(() => ({
 </script>
 
 <template>
-  <a v-if="isExternalLink"
+  <component :is="isExternalLink ? 'a' : 'RouterLink'"
     v-bind="attributes"
     :class="[
       $style.link,
@@ -47,33 +47,15 @@ const attributes = computed(() => ({
       isSimple && $style['force-underline'],
       isSimple && $style['no-spacing'],
     ]"
-    :href="to.toString()"
-    target="_blank"
+    :href="isExternalLink ? to.toString() : undefined"
+    :to="isExternalLink ? undefined : to"
+    :target="isExternalLink ? '_blank' : undefined"
   >
     <i v-if="icon" :class="['bi', icon]" />
     <span>
       <slot />
     </span>
-  </a>
-  <RouterLink v-else
-    :to="to"
-    v-bind="color(props, ['interactive'])"
-    :class="[
-      $style.link,
-      $style['is-' + width],
-      $style['is-text-aligned-' + (alignText ?? 'left')],
-      $style['is-self-aligned-' + (alignSelf ?? 'auto')],
-      round && $style['is-round'],
-      isIconOnly && $style['is-icon-only'],
-      isSimple && $style['no-spacing'],
-      isSimple && $style['force-underline']
-    ]"
-  >
-    <i v-if="icon" :class="['bi', icon]" />
-    <span>
-      <slot />
-    </span>
-  </RouterLink>
+  </component>
 </template>
 
 <style module lang="scss">
diff --git a/front/ui-docs/components/ui/link.md b/front/ui-docs/components/ui/link.md
index 45d45ccc8..6f2aa92a5 100644
--- a/front/ui-docs/components/ui/link.md
+++ b/front/ui-docs/components/ui/link.md
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Link from '~/components/ui/Link.vue'
 import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
 </script>
 
 # Link
@@ -76,3 +77,44 @@ Instead of a route, you can set the prop `to` to any web address starting with `
 <Link primary solid round to="/">
   Home
 </Link>
+
+## Width and alignment
+
+<Layout flex>
+
+```vue-html
+    <Link solid primary min-content to="/">min-content</Link>
+    <Link solid primary tiny to="/">tiny</Link>
+    <Link solid primary buttonWidth to="/">buttonWidth</Link>
+    <Link solid primary small to="/">small</Link>
+    <Link solid primary medium to="/">medium</Link>
+    <Link solid primary full to="/">full</Link>
+    <Link solid primary auto to="/">auto</Link>
+    <hr />
+    <Link solid primary alignSelf="start" to="/">🐌</Link>
+    <Link solid primary alignSelf="center" to="/">🐌</Link>
+    <Link solid primary alignSelf="end" to="/">🐌</Link>
+    <hr />
+    <Link solid primary alignText="left" to="/">🐌</Link>
+    <Link solid primary alignText="center" to="/">🐌</Link>
+    <Link solid primary alignText="right" to="/">🐌</Link>
+```
+
+  <Layout class="preview" stack style="--gap:4px;">
+    <Link solid primary min-content to="/">min-content</Link>
+    <Link solid primary tiny to="/">tiny</Link>
+    <Link solid primary buttonWidth to="/">buttonWidth</Link>
+    <Link solid primary small to="/">small</Link>
+    <Link solid primary medium to="/">medium</Link>
+    <Link solid primary full to="/">full</Link>
+    <Link solid primary auto to="/">auto</Link>
+    <hr />
+    <Link solid primary alignSelf="start" to="/">🐌</Link>
+    <Link solid primary alignSelf="center" to="/">🐌</Link>
+    <Link solid primary alignSelf="end" to="/">🐌</Link>
+    <hr />
+    <Link solid primary alignText="left" to="/">🐌</Link>
+    <Link solid primary alignText="center" to="/">🐌</Link>
+    <Link solid primary alignText="right" to="/">🐌</Link>
+  </Layout>
+</Layout>