61 lines
2.0 KiB
Vue
61 lines
2.0 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>
|