Skip to content
This repository has been archived by the owner on Aug 28, 2024. It is now read-only.

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
simplify btn-color class declaration
Browse files Browse the repository at this point in the history
ToBinio committed Nov 21, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 66f46f9 commit 55341c1
Showing 1 changed file with 22 additions and 38 deletions.
60 changes: 22 additions & 38 deletions lib/components/base/Button.vue
Original file line number Diff line number Diff line change
@@ -6,15 +6,26 @@ import { computed } from 'vue'
const props = withDefaults(
defineProps<{
link?: string
external: boolean
external?: boolean
action?: (event: MouseEvent) => void
color: 'default' | 'danger'| 'primary'| 'red'| 'orange'| 'green'| 'blue'| 'purple'| 'gray' | 'secondary' | 'highlight'
iconOnly: boolean
large: boolean
outline: boolean
transparent: boolean
hoverFilled: boolean
hoverFilledOnly: boolean
color?:
| 'default'
| 'danger'
| 'primary'
| 'red'
| 'orange'
| 'green'
| 'blue'
| 'purple'
| 'gray'
| 'secondary'
| 'highlight'
iconOnly?: boolean
large?: boolean
outline?: boolean
transparent?: boolean
hoverFilled?: boolean
hoverFilledOnly?: boolean
}>(),
{
link: undefined,
@@ -42,21 +53,12 @@ const accentedButton = computed(() =>
: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,
[`btn-${color}`]: true,
}"
:to="link"
:target="external ? '_blank' : '_self'"
@@ -71,21 +73,12 @@ const accentedButton = computed(() =>
: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,
[`btn-${color}`]: true,
}"
:href="link"
:target="external ? '_blank' : '_self'"
@@ -100,21 +93,12 @@ const accentedButton = computed(() =>
: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,
[`btn-${color}`]: true,
}"
@click="action"
>

0 comments on commit 55341c1

Please sign in to comment.