Nikolay Tatarinov
fd624c2357
- Consolidated global error handling in app.vue to redirect users to the login page on API authentication failure. - Enhanced MapView component by reintroducing event listeners for selected map and marker updates, improving interactivity. - Updated PasswordInput and various modal components to ensure proper input handling and accessibility compliance. - Refactored MapControls and MapControlsContent to streamline prop management and enhance user experience. - Improved error handling in local storage operations within useMapBookmarks and useRecentLocations composables. - Standardized input elements across forms for consistency in user interaction.
81 lines
2.5 KiB
Vue
81 lines
2.5 KiB
Vue
<template>
|
|
<dialog
|
|
ref="modalRef"
|
|
class="modal"
|
|
aria-modal="true"
|
|
aria-labelledby="coord-set-modal-title"
|
|
@cancel="$emit('close')"
|
|
@close="onDialogClose"
|
|
>
|
|
<div class="modal-box transition-all duration-200" @click.stop>
|
|
<h3 id="coord-set-modal-title" class="font-bold text-lg">Rewrite tile coords</h3>
|
|
<p class="py-2">From ({{ coordSetFrom.x }}, {{ coordSetFrom.y }}) to:</p>
|
|
<div class="flex gap-2">
|
|
<input ref="firstInputRef" v-model.number="localTo.x" type="number" class="input flex-1" placeholder="X" >
|
|
<input v-model.number="localTo.y" type="number" class="input flex-1" placeholder="Y" >
|
|
</div>
|
|
<div class="modal-action">
|
|
<form method="dialog" @submit.prevent="onSubmit">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
<button type="button" class="btn" @click="$emit('close')">Cancel</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="modal-backdrop cursor-pointer" aria-label="Close" @click="$emit('close')" />
|
|
</dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
coordSetFrom: { x: number; y: number }
|
|
coordSet: { x: number; y: number }
|
|
open: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
close: []
|
|
submit: [from: { x: number; y: number }, to: { x: number; y: number }]
|
|
}>()
|
|
|
|
const modalRef = ref<HTMLDialogElement | null>(null)
|
|
const firstInputRef = ref<HTMLInputElement | null>(null)
|
|
const localTo = ref({ x: props.coordSet.x, y: props.coordSet.y })
|
|
let previousActiveElement: HTMLElement | null = null
|
|
|
|
watch(
|
|
() => props.open,
|
|
(open) => {
|
|
if (open) {
|
|
previousActiveElement = (import.meta.client ? document.activeElement : null) as HTMLElement | null
|
|
localTo.value = { x: props.coordSet.x, y: props.coordSet.y }
|
|
nextTick(() => {
|
|
modalRef.value?.showModal()
|
|
firstInputRef.value?.focus()
|
|
})
|
|
} else {
|
|
modalRef.value?.close()
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
function onDialogClose() {
|
|
if (import.meta.client && previousActiveElement && typeof previousActiveElement.focus === 'function' && document.contains(previousActiveElement)) {
|
|
nextTick(() => previousActiveElement?.focus())
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => props.coordSet,
|
|
(c) => {
|
|
localTo.value = { x: c.x, y: c.y }
|
|
},
|
|
{ deep: true }
|
|
)
|
|
|
|
function onSubmit() {
|
|
emit('submit', props.coordSetFrom, localTo.value)
|
|
emit('close')
|
|
}
|
|
</script>
|