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

code/websites/pokedex.online/src/components/shared/BaseButton.vue

@@ -6,13 +6,19 @@
     @click="handleClick"
   >
     <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 }}
     </span>
     <span v-if="$slots.default" :class="{ 'sr-only': loading }">
       <slot></slot>
     </span>
-    <span v-if="icon && iconPosition === 'right' && !loading" class="icon icon-right">
+    <span
+      v-if="icon && iconPosition === 'right' && !loading"
+      class="icon icon-right"
+    >
       {{ icon }}
     </span>
   </button>
@@ -29,7 +35,8 @@ const props = defineProps({
   variant: {
     type: String,
     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: {
     type: String,
     default: 'medium',
-    validator: (value) => ['small', 'medium', 'large'].includes(value)
+    validator: value => ['small', 'medium', 'large'].includes(value)
   },
 
   /**
@@ -73,7 +80,7 @@ const props = defineProps({
   iconPosition: {
     type: String,
     default: 'left',
-    validator: (value) => ['left', 'right'].includes(value)
+    validator: value => ['left', 'right'].includes(value)
   },
 
   /**
@@ -91,7 +98,7 @@ const props = defineProps({
   type: {
     type: String,
     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--disabled': props.disabled,
     '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) {
     emit('click', event);
   }