🎨 Refactor code style for consistency and readability in BaseModal component

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

@@ -76,7 +76,7 @@ const props = defineProps({
   size: {
     type: String,
     default: 'medium',
-    validator: (value) => ['small', 'medium', 'large', 'full'].includes(value)
+    validator: value => ['small', 'medium', 'large', 'full'].includes(value)
   },
 
   /**
@@ -123,7 +123,7 @@ const handleOverlayClick = () => {
   }
 };
 
-const handleEscapeKey = (event) => {
+const handleEscapeKey = event => {
   if (event.key === 'Escape' && props.modelValue && !props.persistent) {
     handleClose();
   }
@@ -149,7 +149,7 @@ const getFocusableElements = () => {
   );
 };
 
-const handleTabKey = (event) => {
+const handleTabKey = event => {
   if (!props.modelValue) return;
 
   const focusableElements = getFocusableElements();
@@ -173,7 +173,7 @@ const handleTabKey = (event) => {
   }
 };
 
-const handleKeyDown = (event) => {
+const handleKeyDown = event => {
   if (event.key === 'Escape') {
     handleEscapeKey(event);
   } else if (event.key === 'Tab') {
@@ -182,32 +182,35 @@ const handleKeyDown = (event) => {
 };
 
 // Lifecycle hooks
-watch(() => props.modelValue, async (newValue) => {
-  if (newValue) {
-    // Modal opened
-    previousActiveElement.value = document.activeElement;
-    document.body.style.overflow = 'hidden';
-    emit('open');
+watch(
+  () => props.modelValue,
+  async newValue => {
+    if (newValue) {
+      // Modal opened
+      previousActiveElement.value = document.activeElement;
+      document.body.style.overflow = 'hidden';
+      emit('open');
 
-    // Focus first focusable element after render
-    await nextTick();
-    const focusableElements = getFocusableElements();
-    if (focusableElements.length > 0) {
-      focusableElements[0].focus();
-    } else if (modalRef.value) {
-      modalRef.value.focus();
-    }
-  } else {
-    // Modal closed
-    document.body.style.overflow = '';
+      // Focus first focusable element after render
+      await nextTick();
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length > 0) {
+        focusableElements[0].focus();
+      } else if (modalRef.value) {
+        modalRef.value.focus();
+      }
+    } else {
+      // Modal closed
+      document.body.style.overflow = '';
 
-    // Restore focus to previous element
-    if (previousActiveElement.value) {
-      previousActiveElement.value.focus();
-      previousActiveElement.value = null;
+      // Restore focus to previous element
+      if (previousActiveElement.value) {
+        previousActiveElement.value.focus();
+        previousActiveElement.value = null;
+      }
     }
   }
-});
+);
 
 onMounted(() => {
   document.addEventListener('keydown', handleKeyDown);
@@ -244,7 +247,9 @@ onBeforeUnmount(() => {
 .modal-container {
   background: white;
   border-radius: 0.5rem;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
   max-height: 90vh;
   display: flex;
   flex-direction: column;