11<script setup lang="ts">
2- import type { NuxtLinkProps } from " #app" ;
3- import type { IconClass } from " ~/types" ;
2+ import type { NuxtLinkProps } from ' #app'
3+ import type { IconClass } from ' ~/types'
44
55const props = withDefaults (
66 defineProps <{
77 /** Disabled links will be displayed as plain text */
8- disabled? : boolean ;
8+ disabled? : boolean
99 /**
1010 * `type` should never be used, because this will always be a link.
1111 * */
12- type? : never ;
12+ type? : never
1313 /** Visual style of the link */
14- variant? : " button-primary" | " button-secondary" | " link" ;
14+ variant? : ' button-primary' | ' button-secondary' | ' link'
1515 /** Size (only applicable for button variants) */
16- size? : " sm " | " md " ;
16+ size? : ' sm ' | ' md '
1717 /** Makes the link take full width */
18- block? : boolean ;
18+ block? : boolean
1919
2020 /** Keyboard shortcut hint */
21- ariaKeyshortcuts? : string ;
21+ ariaKeyshortcuts? : string
2222
2323 /**
2424 * Don't use this directly. This will automatically be set to `_blank` for external links passed via `to`.
2525 */
26- target? : never ;
26+ target? : never
2727
2828 /**
2929 * Don't use this directly. This will automatically be set for external links passed via `to`.
3030 */
31- rel? : never ;
31+ rel? : never
3232
3333 /** Icon class to display */
34- classicon? : IconClass ;
34+ classicon? : IconClass
3535
3636 /** Link destination (internal or external URL) */
37- to? : NuxtLinkProps [" to " ];
37+ to? : NuxtLinkProps [' to ' ]
3838
3939 /** always use `to` instead of `href` */
40- href? : never ;
40+ href? : never
4141
4242 /** should only be used for links where the context makes it very clear they are clickable. Don't just use this, because you don't like underlines. */
43- noUnderline? : boolean ;
43+ noUnderline? : boolean
4444
4545 /**
4646 * Hide external link icon (deprecated)
4747 * @deprecated @todo remove this property and add separate clean component without this logic
4848 */
49- noNewTabIcon? : boolean ;
49+ noNewTabIcon? : boolean
5050 }>(),
51- { variant: " link" , size: " md " },
52- );
51+ { variant: ' link' , size: ' md ' },
52+ )
5353
5454const isLinkExternal = computed (
5555 () =>
5656 !! props .to &&
57- typeof props .to === " string" &&
58- (props .to .startsWith (" http:" ) || props .to .startsWith (" https:" ) || props .to .startsWith (" // " )),
59- );
57+ typeof props .to === ' string' &&
58+ (props .to .startsWith (' http:' ) || props .to .startsWith (' https:' ) || props .to .startsWith (' // ' )),
59+ )
6060const isLinkAnchor = computed (
61- () => !! props .to && typeof props .to === " string" && props .to .startsWith (" # " ),
62- );
61+ () => !! props .to && typeof props .to === ' string' && props .to .startsWith (' # ' ),
62+ )
6363
6464/** size is only applicable for button like links */
65- const isLink = computed (() => props .variant === " link" );
66- const isButton = computed (() => ! isLink .value );
67- const isButtonSmall = computed (() => props .size === " sm " && ! isLink .value );
68- const isButtonMedium = computed (() => props .size === " md " && ! isLink .value );
69- const keyboardShortcutsEnabled = useKeyboardShortcutsPreference ();
65+ const isLink = computed (() => props .variant === ' link' )
66+ const isButton = computed (() => ! isLink .value )
67+ const isButtonSmall = computed (() => props .size === ' sm ' && ! isLink .value )
68+ const isButtonMedium = computed (() => props .size === ' md ' && ! isLink .value )
69+ const keyboardShortcutsEnabled = useKeyboardShortcutsPreference ()
7070 </script >
7171
7272<template >
7373 <span
7474 v-if =" disabled"
7575 :class =" {
76- flex: block,
76+ ' flex' : block,
7777 'inline-flex': !block,
7878 'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
7979 isButton,
@@ -89,7 +89,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcutsPreference();
8989 v-else
9090 class =" group/link gap-x-1 items-center"
9191 :class =" {
92- flex: block,
92+ ' flex' : block,
9393 'inline-flex': !block,
9494 'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
9595 !isLinkAnchor && isLink && !noUnderline,
0 commit comments