feat: allow to make links block elements and make buttons blocks by default

Author: essenmitsosse

app/components/Button/Base.vue

@@ -32,7 +32,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group cursor-pointer flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',

app/components/Link/Base.vue

@@ -10,7 +10,7 @@ const props = withDefaults(
        * `type` should never be used, because this will always be a link.
        * */
       'type'?: never
-      'variant'?: 'button-primary' | 'button-secondary' | 'link'
+      'variant'?: 'button-primary' | 'button-secondary' | 'link' | 'link-block'
       'size'?: 'small' | 'medium'
 
       'keyshortcut'?: string
@@ -52,17 +52,20 @@ const isLinkAnchor = computed(
 )
 
 /** size is only applicable for button like links */
-const isLink = computed(() => props.variant === 'link')
-const isButton = computed(() => props.variant !== 'link')
-const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link')
-const isButtonMedium = computed(() => props.size === 'medium' && props.variant !== 'link')
+const isLink = computed(() => props.variant === 'link' || props.variant === 'link-block')
+const isButton = computed(() => !isLink.value)
+const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
+const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
+const isBlock = computed(() => isButton || props.variant === 'link-block')
 </script>
 
 <template>
   <span
     v-if="disabled"
     :class="{
-      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
+      'flex': isBlock,
+      'inline-flex': !isBlock,
+      'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
@@ -73,8 +76,10 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   /></span>
   <NuxtLink
     v-else
-    class="group/link inline-flex gap-x-1 items-center justify-center"
+    class="group/link gap-x-1 items-center justify-center"
     :class="{
+      'flex': isBlock,
+      'inline-flex': !isBlock,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
       'font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
         isLink,

app/components/Package/Versions.vue

@@ -412,7 +412,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(v.version)"
-                class="text-xs flex!"
+                variant="link-block"
+                class="text-xs"
                 :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                 :title="
                   v.deprecated
@@ -509,7 +510,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                class="text-xs flex!"
+                variant="link-block"
+                class="text-xs"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                 "
@@ -581,7 +583,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="text-xs flex!"
+                      variant="link-block"
+                      class="text-xs"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -642,7 +645,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="text-xs flex!"
+                      variant="link-block"
+                      class="text-xs"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -701,7 +705,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center justify-between gap-2">
                     <LinkBase
                       :to="versionRoute(v.version)"
-                      class="text-xs flex!"
+                      variant="link-block"
+                      class="text-xs"
                       :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                       :title="
                         v.deprecated