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

product page and linter

Browse Source
This commit is contained in:
Marek Goc
2025-07-03 11:13:42 +02:00
parent fbb6c071af
commit 90e1d70f64
72 changed files with 12667 additions and 6578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
components/ui/CheckoutInput.vue
View File

@ -1,57 +1,81 @@
<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-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
<i v-if="disabled"
class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray" />
<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" :isPasswordVisible="isPasswordVisible" />
</div>
<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>
</div>
<!-- <p class="mt-2 text-xs text-red-600">{{ validationText }}</p> -->
<!-- <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">
<!-- <p v-if="!validation && validation != null" class="mt-2 text-xs text-red-600">
{{ validationText }}
</p> -->
</div>
</div>
</div>
</template>
<script setup lang="ts">
import FaceObserver from './FaceObserver.vue';
defineEmits(["update:modelValue", "focus", "blur"]);
<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);
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;
transition: background-color 5000s ease-in-out 0s;
}
</style>
</style>