162 lines
3.8 KiB
Vue
162 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file FormInput.vue
|
|
* @description Reusable input component with label, error handling, and support for disabled/required states.
|
|
* Now supports password visibility toggle.
|
|
*/
|
|
|
|
const props = defineProps<{
|
|
modelValue: string
|
|
label: string
|
|
type?: string
|
|
placeholder?: string
|
|
error?: string
|
|
required?: boolean
|
|
disabled?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
/** Update v-model value */
|
|
'update:modelValue': [value: string]
|
|
}>()
|
|
|
|
// Password visibility state
|
|
const showPassword = ref(false)
|
|
|
|
// Toggle function
|
|
const togglePassword = () => {
|
|
showPassword.value = !showPassword.value
|
|
}
|
|
|
|
// Compute input type based on visibility state
|
|
const inputType = computed(() => {
|
|
if (props.type === 'password') {
|
|
return showPassword.value ? 'text' : 'password'
|
|
}
|
|
return props.type || 'text'
|
|
})
|
|
|
|
const updateValue = (event: Event) => {
|
|
emit('update:modelValue', (event.target as HTMLInputElement).value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="form-group" :class="{ 'has-error': error }">
|
|
<label class="input-label">
|
|
{{ label }}
|
|
<span v-if="required" class="required-mark">*</span>
|
|
</label>
|
|
|
|
<div class="input-wrapper">
|
|
<input
|
|
:type="inputType"
|
|
:value="modelValue"
|
|
class="input-field"
|
|
:class="{ 'input-error': error, 'has-password-toggle': type === 'password' }"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
@input="updateValue"
|
|
>
|
|
|
|
<!-- Password Toggle Button -->
|
|
<button
|
|
v-if="type === 'password'"
|
|
type="button"
|
|
class="password-toggle-btn"
|
|
@click="togglePassword"
|
|
tabindex="-1"
|
|
>
|
|
<!-- Eye Icon (Show) -->
|
|
<svg v-if="!showPassword" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
|
|
<circle cx="12" cy="12" r="3"/>
|
|
</svg>
|
|
|
|
<!-- Eye Off Icon (Hide) -->
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/>
|
|
<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/>
|
|
<path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7c.44 0 .87-.03 1.28-.08"/>
|
|
<line x1="2" y1="2" x2="22" y2="22"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<span v-if="error" class="error-message">
|
|
<span class="error-icon">⚠</span>
|
|
{{ error }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.input-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.password-toggle-btn {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #94a3b8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
border-radius: 50%;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.password-toggle-btn:hover {
|
|
color: #64748b;
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.input-field.has-password-toggle {
|
|
padding-right: 42px;
|
|
}
|
|
|
|
.required-mark {
|
|
color: var(--error);
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.input-error {
|
|
border-color: var(--error) !important;
|
|
background-color: rgba(239, 68, 68, 0.05);
|
|
}
|
|
|
|
.input-error:focus {
|
|
outline-color: var(--error) !important;
|
|
}
|
|
|
|
.error-message {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--error);
|
|
font-size: 12px;
|
|
margin-top: 6px;
|
|
animation: shake 0.3s ease-in-out;
|
|
}
|
|
|
|
.error-icon {
|
|
font-size: 14px;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-4px); }
|
|
75% { transform: translateX(4px); }
|
|
}
|
|
</style>
|