fragginwagon/memory-infrastructure-palace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Improve code readability and consistency in BaseButton component by reformatting and simplifying syntax

Browse Source
This commit is contained in:
Greg Jacobs
2026-01-28 22:22:35 +00:00
parent 9467d4d81d
commit b06382c0bb
1 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
code/websites/pokedex.online/src/components/shared/BaseButton.vue
View File

@@ -6,13 +6,19 @@
@click="handleClick" @click="handleClick"
> >
<span v-if="loading" class="spinner" aria-hidden="true"></span> <span v-if="loading" class="spinner" aria-hidden="true"></span>
<span v-if="icon && iconPosition === 'left' && !loading" class="icon icon-left"> <span
v-if="icon && iconPosition === 'left' && !loading"
class="icon icon-left"
>
{{ icon }} {{ icon }}
</span> </span>
<span v-if="$slots.default" :class="{ 'sr-only': loading }"> <span v-if="$slots.default" :class="{ 'sr-only': loading }">
<slot></slot> <slot></slot>
</span> </span>
<span v-if="icon && iconPosition === 'right' && !loading" class="icon icon-right"> <span
v-if="icon && iconPosition === 'right' && !loading"
class="icon icon-right"
>
{{ icon }} {{ icon }}
</span> </span>
</button> </button>
@@ -29,7 +35,8 @@ const props = defineProps({
variant: { variant: {
type: String, type: String,
default: 'primary', default: 'primary',
validator: (value) => ['primary', 'secondary', 'danger', 'ghost', 'icon-only'].includes(value) validator: value =>
['primary', 'secondary', 'danger', 'ghost', 'icon-only'].includes(value)
}, },
/** /**
@@ -39,7 +46,7 @@ const props = defineProps({
size: { size: {
type: String, type: String,
default: 'medium', default: 'medium',
validator: (value) => ['small', 'medium', 'large'].includes(value) validator: value => ['small', 'medium', 'large'].includes(value)
}, },
/** /**
@@ -73,7 +80,7 @@ const props = defineProps({
iconPosition: { iconPosition: {
type: String, type: String,
default: 'left', default: 'left',
validator: (value) => ['left', 'right'].includes(value) validator: value => ['left', 'right'].includes(value)
}, },
/** /**
@@ -91,7 +98,7 @@ const props = defineProps({
type: { type: {
type: String, type: String,
default: 'button', default: 'button',
validator: (value) => ['button', 'submit', 'reset'].includes(value) validator: value => ['button', 'submit', 'reset'].includes(value)
} }
}); });
@@ -105,11 +112,12 @@ const buttonClasses = computed(() => [
'base-button--loading': props.loading, 'base-button--loading': props.loading,
'base-button--disabled': props.disabled, 'base-button--disabled': props.disabled,
'base-button--full-width': props.fullWidth, 'base-button--full-width': props.fullWidth,
'base-button--icon-only': props.variant === 'icon-only' || (!props.$slots.default && props.icon) 'base-button--icon-only':
props.variant === 'icon-only' || (!props.$slots.default && props.icon)
} }
]); ]);
const handleClick = (event) => { const handleClick = event => {
if (!props.disabled && !props.loading) { if (!props.disabled && !props.loading) {
emit('click', event); emit('click', event);
} }