yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

pre registration

Browse Source
This commit is contained in:
Arina Yakovenko
2025-07-04 16:01:44 +02:00
parent af0a3df068
commit a2db817133
8 changed files with 511 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/ui/CheckoutInput.vue
View File

@ -1,53 +1,32 @@
<template>
<div class="space-y-[15px]">
<p :for="`base-input-${id}`"
class="pl-6"
>
<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"
/>
<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 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> -->
<p v-if="!validation && validation != null" class="mt-2 text-xs text-red-600">
{{ validationText }}
</p>
</div>
</div>
</template>