chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

Add:Eye icon

Browse source
This commit is contained in:
supalerk-ar66 2026-01-13 11:24:03 +07:00
parent b1aa414190
commit 959a7e3f85
18 changed files with 118 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

95
Frontend-Learner/components/common/FormInput.vue
View file

@ -2,9 +2,10 @@
/**
* @file FormInput.vue
* @description Reusable input component with label, error handling, and support for disabled/required states.
* Now supports password visibility toggle.
*/
defineProps<{
const props = defineProps<{
modelValue: string
label: string
type?: string
@ -19,6 +20,22 @@ const emit = defineEmits<{
'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)
}
@ -30,15 +47,42 @@ const updateValue = (event: Event) => {
{{ label }}
<span v-if="required" class="required-mark">*</span>
</label>
<input
:type="type || 'text'"
:value="modelValue"
class="input-field"
:class="{ 'input-error': error }"
:placeholder="placeholder"
:disabled="disabled"
@input="updateValue"
>
<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 }}
@ -51,6 +95,37 @@ const updateValue = (event: Event) => {
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;