57 lines
2.2 KiB
Vue
57 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"
|
|
@input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
|
|
@focus="$emit('focus')" @blur="$emit('blur')"
|
|
class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
|
|
<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('Panel.Component.InputDefault', 'Show password') : $t('Panel.Component.InputDefault', 'Hide password')
|
|
" @click="isPasswordVisible = !isPasswordVisible">
|
|
<FaceObserver class="ml-4 text-xl leading-6" :isPasswordVisible="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 | any;
|
|
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> |