feat(ui): links have the same alignment props as buttons

front/src/components/ui/Link.vue

@@ -4,8 +4,12 @@ import { type RouterLinkProps, RouterLink } from 'vue-router'
 import { type ColorProps, type DefaultProps, type VariantProps, propsToColor } from '~/composables/colors';
 
 const { to, icon, thin, round, ...colorProps } = defineProps<{
-    icon?: string;
+    width?: 'standard' | 'auto' | 'full'
+    alignText?: 'left' | 'center' | 'right'
+    alignSelf?: 'start' | 'center' | 'end'
     thin?: true
+
+    icon?: string;
     round?: true;
   } & RouterLinkProps & (ColorProps | DefaultProps) & VariantProps>()
 
@@ -24,10 +28,13 @@ const isSimple = propsToColor(colorProps).class === ''
     v-bind="propsToColor({ ...colorProps, interactive: true })"
     :class="[
       $style.link,
+      'is-' + width,
+      'is-text-aligned-' + (alignText ?? 'center'),
+      'is-self-aligned-' + (alignSelf ?? 'center'),
       round && $style['is-round'],
       isIconOnly && $style['is-icon-only'],
       isSimple && $style['force-underline'],
-      $style.external
+      isSimple && $style['no-spacing'],
     ]"
     :href="to.toString()"
     target="_blank"
@@ -42,8 +49,12 @@ const isSimple = propsToColor(colorProps).class === ''
     v-bind="propsToColor({ ...colorProps, interactive: true })"
     :class="[
       $style.link,
+      'is-' + width,
+      'is-text-aligned-' + (alignText ?? 'center'),
+      'is-self-aligned-' + (alignSelf ?? 'center'),
       round && $style['is-round'],
       isIconOnly && $style['is-icon-only'],
+      isSimple && $style['no-spacing'],
       isSimple && $style['force-underline']
     ]"
   >
@@ -56,8 +67,6 @@ const isSimple = propsToColor(colorProps).class === ''
 
 <style module lang="scss">
   .link {
-    display: inline-flex;
-    align-items: center;
     white-space: nowrap;
 
     font-family: $font-main;
@@ -66,19 +75,16 @@ const isSimple = propsToColor(colorProps).class === ''
 
     line-height: 1em;
 
-    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;
-
     transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale));
     transition:background-color .2s, border-color .3s;
 
-    i {
-      font-size:1.4em;
+    // Icon
+
+    i:global(.bi) {
+      font-size: 1.2rem;
+      &.large {
+        font-size:2rem;
+      }
     }
 
     i:global(.bi) + span:not(:empty) {
@@ -91,8 +97,59 @@ const isSimple = propsToColor(colorProps).class === ''
       border-color: transparent;
     }
 
+    /* Shape */
+
+    border-radius: var(--fw-border-radius);
+    margin: 0 0.5ch;
+
+    padding: 0.642857142857em 0.714em 0.714em 0.714em;
+    &.is-icon-only {
+      padding: 0.675em 0.714em 0.678em 0.714em;
+    }
+    &.no-spacing{
+      padding: 0;
+      margin: 0;
+      font-size: 1em;
+    }
+
     &.is-round {
       border-radius: 100vh;
     }
+
+    /* Alignment */
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    &.is-text-aligned-center {
+      justify-content: center
+    }
+
+    &.is-text-aligned-left {
+      justify-content: flex-start
+    }
+
+    &.is-text-aligned-right {
+      justify-content: flex-end;
+    }
+
+    &.is-self-aligned-start {
+      align-self: flex-start;
+    }
+
+    &.is-self-aligned-center {
+      align-self: center;
+    }
+
+    &.is-self-aligned-end {
+      align-self: flex-end;
+    }
+
+    /* Width */
+
+    &.is-full {
+      align-self: stretch;
+    }
   }
 </style>