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

19
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,7 +182,9 @@ const handleKeyDown = (event) => {
}; };
// Lifecycle hooks // Lifecycle hooks
watch(() => props.modelValue, async (newValue) => { watch(
() => props.modelValue,
async newValue => {
if (newValue) { if (newValue) {
// Modal opened // Modal opened
previousActiveElement.value = document.activeElement; previousActiveElement.value = document.activeElement;
@@ -207,7 +209,8 @@ watch(() => props.modelValue, async (newValue) => {
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;