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

38
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,9 +35,10 @@ 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)
}, },
/** /**
* Button size * Button size
* @type {'small' | 'medium' | 'large'} * @type {'small' | 'medium' | 'large'}
@@ -39,9 +46,9 @@ 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)
}, },
/** /**
* Whether button is in loading state * Whether button is in loading state
*/ */
@@ -49,7 +56,7 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false default: false
}, },
/** /**
* Whether button is disabled * Whether button is disabled
*/ */
@@ -57,7 +64,7 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false default: false
}, },
/** /**
* Icon character or emoji to display * Icon character or emoji to display
*/ */
@@ -65,7 +72,7 @@ const props = defineProps({
type: String, type: String,
default: null default: null
}, },
/** /**
* Icon position relative to text * Icon position relative to text
* @type {'left' | 'right'} * @type {'left' | 'right'}
@@ -73,9 +80,9 @@ 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)
}, },
/** /**
* Whether button should take full width of container * Whether button should take full width of container
*/ */
@@ -83,7 +90,7 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false default: false
}, },
/** /**
* Button type attribute * Button type attribute
* @type {'button' | 'submit' | 'reset'} * @type {'button' | 'submit' | 'reset'}
@@ -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);
} }