tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

More monorepo migration fixes (#1257)

Browse Source 
* fix: More monorepo migration fixes

* fix: Corrected icon sizes & other fixes

* fix(theseus): Change color of mod installation button

* fix(theseus): More Turborepo fixes

* chore: Prettier

---------

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
This commit is contained in:
Norbiros
2024-07-18 07:01:58 +02:00
committed by GitHub
parent 8704d3acb3
commit f1713647cf
16 changed files with 141 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
packages/ui/src/components/base/Button.vue
View File

@@ -48,31 +48,36 @@ const props = defineProps({
const accentedButton = computed(() =>
['danger', 'primary', 'red', 'orange', 'green', 'blue', 'purple', 'gray'].includes(props.color),
)
const classes = computed(() => {
const color = props.color
return {
'icon-only': props.iconOnly,
'btn-large': props.large,
'btn-danger': color === 'danger',
'btn-primary': color === 'primary',
'btn-secondary': color === 'secondary',
'btn-highlight': color === 'highlight',
'btn-red': color === 'red',
'btn-orange': color === 'orange',
'btn-green': color === 'green',
'btn-blue': color === 'blue',
'btn-purple': color === 'purple',
'btn-gray': color === 'gray',
'btn-transparent': props.transparent,
'btn-hover-filled': props.hoverFilled,
'btn-hover-filled-only': props.hoverFilledOnly,
'btn-outline': props.outline,
'color-accent-contrast': accentedButton,
}
})
</script>
<template>
<router-link
v-if="link && link.startsWith('/')"
class="btn"
:class="{
'icon-only': iconOnly,
'btn-large': large,
'btn-danger': color === 'danger',
'btn-primary': color === 'primary',
'btn-secondary': color === 'secondary',
'btn-highlight': color === 'highlight',
'btn-red': color === 'red',
'btn-orange': color === 'orange',
'btn-green': color === 'green',
'btn-blue': color === 'blue',
'btn-purple': color === 'purple',
'btn-gray': color === 'gray',
'btn-transparent': transparent,
'btn-hover-filled': hoverFilled,
'btn-hover-filled-only': hoverFilledOnly,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
}"
:class="classes"
:to="link"
:target="external ? '_blank' : '_self'"
>
@@ -83,25 +88,7 @@ const accentedButton = computed(() =>
<a
v-else-if="link"
class="btn"
:class="{
'icon-only': iconOnly,
'btn-large': large,
'btn-danger': color === 'danger',
'btn-primary': color === 'primary',
'btn-secondary': color === 'secondary',
'btn-highlight': color === 'highlight',
'btn-red': color === 'red',
'btn-orange': color === 'orange',
'btn-green': color === 'green',
'btn-blue': color === 'blue',
'btn-purple': color === 'purple',
'btn-gray': color === 'gray',
'btn-transparent': transparent,
'btn-hover-filled': hoverFilled,
'btn-hover-filled-only': hoverFilledOnly,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
}"
:class="classes"
:href="link"
:target="external ? '_blank' : '_self'"
>
@@ -109,30 +96,7 @@ const accentedButton = computed(() =>
<ExternalIcon v-if="external && !iconOnly" class="external-icon" />
<UnknownIcon v-if="!$slots.default" />
</a>
<button
v-else
class="btn"
:class="{
'icon-only': iconOnly,
'btn-large': large,
'btn-danger': color === 'danger',
'btn-primary': color === 'primary',
'btn-secondary': color === 'secondary',
'btn-highlight': color === 'highlight',
'btn-red': color === 'red',
'btn-orange': color === 'orange',
'btn-green': color === 'green',
'btn-blue': color === 'blue',
'btn-purple': color === 'purple',
'btn-gray': color === 'gray',
'btn-transparent': transparent,
'btn-hover-filled': hoverFilled,
'btn-hover-filled-only': hoverFilledOnly,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
}"
@click="action"
>
<button v-else class="btn" :class="classes" @click="action">
<slot />
<UnknownIcon v-if="!$slots.default" />
</button>