82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
|
<div class="space-y-[15px]">
|
|
<p :for="`base-input-${id}`"
|
|
class="pl-6"
|
|
>
|
|
<slot />
|
|
</p>
|
|
<div class="flex flex-col">
|
|
<div class="flex relative">
|
|
<input
|
|
:id="`base-input-${id}`"
|
|
:value="modelValue"
|
|
:type="!isPasswordVisible ? type : 'text'"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
|
|
@input="
|
|
$emit(
|
|
'update:modelValue',
|
|
($event.target as HTMLInputElement).value,
|
|
)
|
|
"
|
|
@focus="$emit('focus')"
|
|
@blur="$emit('blur')"
|
|
>
|
|
<i
|
|
v-if="disabled"
|
|
class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray"
|
|
/>
|
|
|
|
<div
|
|
v-if="type === 'password'"
|
|
class="order-2 ml-1.5 cursor-pointer"
|
|
:title="
|
|
!isPasswordVisible ? $t('show_password') : $t('hide_password')
|
|
"
|
|
@click="isPasswordVisible = !isPasswordVisible"
|
|
>
|
|
<FaceObserver
|
|
class="ml-4 text-xl leading-6"
|
|
:is-password-visible="isPasswordVisible"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <p class="mt-2 text-xs text-red-600">{{ validationText }}</p> -->
|
|
|
|
<!-- <p v-if="!validation && validation != null" class="mt-2 text-xs text-red-600">
|
|
{{ validationText }}
|
|
</p> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import FaceObserver from './FaceObserver.vue'
|
|
|
|
defineEmits(['update:modelValue', 'focus', 'blur'])
|
|
|
|
defineProps<{
|
|
modelValue?: string | undefined
|
|
modelModifiers?: object
|
|
id: number
|
|
type?: string
|
|
disabled?: boolean
|
|
placeholder?: string
|
|
validation?: boolean | null
|
|
validationText?: string
|
|
}>()
|
|
|
|
const isPasswordVisible = ref(false)
|
|
</script>
|
|
|
|
<style>
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
input:-webkit-autofill:active {
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
</style>
|