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.
59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<template>
|
|
<fieldset class="fieldset">
|
|
<label v-if="label" class="label" :for="inputId">
|
|
<span>{{ label }}</span>
|
|
</label>
|
|
<div class="relative flex">
|
|
<input
|
|
:id="inputId"
|
|
:value="modelValue"
|
|
:type="showPass ? 'text' : 'password'"
|
|
class="input flex-1 pr-10 min-h-11 touch-manipulation"
|
|
:placeholder="placeholder"
|
|
:required="required"
|
|
:autocomplete="autocomplete"
|
|
:readonly="readonly"
|
|
:aria-describedby="ariaDescribedby"
|
|
@input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-square min-h-9 min-w-9 touch-manipulation"
|
|
:aria-label="showPass ? 'Hide password' : 'Show password'"
|
|
@click="showPass = !showPass"
|
|
>
|
|
<icons-icon-eye-off v-if="showPass" />
|
|
<icons-icon-eye v-else />
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: string
|
|
label?: string
|
|
placeholder?: string
|
|
required?: boolean
|
|
autocomplete?: string
|
|
readonly?: boolean
|
|
inputId?: string
|
|
ariaDescribedby?: string
|
|
}>(),
|
|
{
|
|
required: false,
|
|
autocomplete: 'off',
|
|
inputId: undefined,
|
|
ariaDescribedby: undefined,
|
|
label: undefined,
|
|
placeholder: undefined,
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
|
|
|
|
const showPass = ref(false)
|
|
const inputId = computed(() => props.inputId ?? `password-${Math.random().toString(36).slice(2, 9)}`)
|
|
</script>
|