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

Small button refactor, overflow and popout menus

Browse Source
This commit is contained in:
Prospector
2023-10-11 08:04:50 -07:00
parent c70ebb6cce
commit a708cf7f69
13 changed files with 556 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
lib/components/base/Button.vue
View File

@@ -32,9 +32,15 @@ const props = defineProps({
type: Boolean,
default: false,
},
transparent: {
type: Boolean,
default: false,
},
})
const accentedButton = computed(() => ['danger', 'primary'].includes(props.color))
const accentedButton = computed(() =>
['danger', 'primary', 'red', 'orange', 'green', 'blue', 'purple', 'gray'].includes(props.color)
)
</script>
<template>
@@ -42,14 +48,20 @@ const accentedButton = computed(() => ['danger', 'primary'].includes(props.color
v-if="link"
class="btn"
:class="{
'icon-only': props.iconOnly,
'btn-large': props.large,
'btn-raised': color === 'raised',
'icon-only': iconOnly,
'btn-large': large,
'btn-danger': color === 'danger',
'btn-primary': color === 'primary',
'btn-secondary': color === 'secondary',
'btn-highlight': color === 'highlight',
'btn-outline': props.outline,
'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-outline': outline,
'color-accent-contrast': accentedButton,
}"
:to="link"
@@ -63,14 +75,20 @@ const accentedButton = computed(() => ['danger', 'primary'].includes(props.color
v-else
class="btn"
:class="{
'icon-only': props.iconOnly,
'btn-large': props.large,
'btn-raised': color === 'raised',
'icon-only': iconOnly,
'btn-large': large,
'btn-danger': color === 'danger',
'btn-primary': color === 'primary',
'btn-secondary': color === 'secondary',
'btn-highlight': color === 'highlight',
'btn-outline': props.outline,
'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-outline': outline,
'color-accent-contrast': accentedButton,
}"
@click="action"