MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): Link component with no explicit styling has an underline

This commit is contained in:
upsiflu 2024-12-17 17:07:21 +01:00
parent a64bfa5f20
commit a40736d0b6
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
front/src/components/ui/Link.vue
View File

@ -3,31 +3,30 @@ import { computed } from 'vue'
import { type RouterLinkProps, RouterLink } from 'vue-router' import { type RouterLinkProps, RouterLink } from 'vue-router'
import { type ColorProps, type VariantProps, propsToColor } from '~/composables/colors'; import { type ColorProps, type VariantProps, propsToColor } from '~/composables/colors';
const { to, icon, inline, round, ...otherProps } = defineProps<RouterLinkProps const { to, icon, round, ...colorProps } = defineProps<{
& {
icon?: string; icon?: string;
round?: boolean round?: boolean;
inline?: true } & ColorProps & VariantProps & RouterLinkProps>()
} & ColorProps & VariantProps>()
const isExternalLink = computed(() => { const isExternalLink = computed(() => {
return typeof to === 'string' && to.startsWith('http') return typeof to === 'string' && to.startsWith('http')
}) })
const isIconOnly = computed(() => !!icon) const isIconOnly = computed(() => !!icon)
const isSimple = Object.keys(colorProps).length === 0
</script> </script>
<template> <template>
<a v-if="isExternalLink" <a v-if="isExternalLink"
v-bind="propsToColor(otherProps)" v-bind="propsToColor({ ...colorProps, interactive: true })"
:class="[ :class="[
'interactive',
$style.link, $style.link,
$style.external,
round && $style['is-round'], round && $style['is-round'],
isIconOnly && $style['is-icon-only'] isIconOnly && $style['is-icon-only'],
isSimple && $style['force-underline'],
$style.external
]" ]"
:href="to?.toString()" :href="to.toString()"
target="_blank" target="_blank"
> >
<i v-if="icon" :class="['bi', icon]" /> <i v-if="icon" :class="['bi', icon]" />
@ -37,12 +36,12 @@ const isIconOnly = computed(() => !!icon)
</a> </a>
<RouterLink v-else <RouterLink v-else
:to="to" :to="to"
v-bind="propsToColor(otherProps)" v-bind="propsToColor({ ...colorProps, interactive: true })"
:class="[ :class="[
'interactive',
$style.link, $style.link,
round && $style['is-round'], round && $style['is-round'],
isIconOnly && $style['is-icon-only'] isIconOnly && $style['is-icon-only'],
isSimple && $style['force-underline']
]" ]"
> >
<i v-if="icon" :class="['bi', icon]" /> <i v-if="icon" :class="['bi', icon]" />
@ -83,7 +82,7 @@ const isIconOnly = computed(() => !!icon)
margin-left: 1ch; margin-left: 1ch;
} }
&:not(:hover):not(:global(.active)) { &:not(:hover, .force-underline) {
text-decoration:none; text-decoration:none;
background-color:transparent; background-color:transparent;
border-color:transparent; border-color:transparent;