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 accepts color and stylistic props

This commit is contained in:
upsiflu 2024-12-17 23:20:37 +01:00
parent 2e1f095d37
commit 7bca997597
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' 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 DefaultProps, type VariantProps, propsToColor } from '~/composables/colors';
const { to, icon, round, ...colorProps } = defineProps<{ const { to, icon, thin, round, ...colorProps } = defineProps<{
icon?: string; icon?: string;
round?: boolean; thin?: true
} & ColorProps & VariantProps & RouterLinkProps>() round?: true;
} & RouterLinkProps & (ColorProps | DefaultProps) & VariantProps>()
const isExternalLink = computed(() => { const isExternalLink = computed(() => {
return typeof to === 'string' && to.startsWith('http') return typeof to === 'string' && to.startsWith('http')
}) })
const fontWeight = thin ? 400 : 900
const isIconOnly = computed(() => !!icon) const isIconOnly = computed(() => !!icon)
const isSimple = Object.keys(colorProps).length === 0 const isSimple = Object.keys(colorProps).length === 0
</script> </script>
@ -58,7 +61,7 @@ const isSimple = Object.keys(colorProps).length === 0
white-space: nowrap; white-space: nowrap;
font-family: $font-main; font-family: $font-main;
font-weight: 900; font-weight: v-bind(fontWeight);
font-size: 0.875em; font-size: 0.875em;
line-height: 1em; line-height: 1em;
@ -72,7 +75,7 @@ const isSimple = Object.keys(colorProps).length === 0
margin: 0 0.5ch; margin: 0 0.5ch;
transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale)); transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale));
transition:background-color .3s, border-color .2s; transition:background-color .2s, border-color .3s;
i { i {
font-size:1.4em; font-size:1.4em;