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

🎨 Refactor code style for consistency and readability in BaseModal component

Browse Source
This commit is contained in:
Greg Jacobs
2026-01-28 22:24:11 +00:00
parent 94b1828c88
commit 4cb66eafbd
1 changed files with 44 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
code/websites/pokedex.online/src/components/shared/BaseModal.vue
View File

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