registration
This commit is contained in:
@ -66,10 +66,14 @@
|
||||
</p>
|
||||
</div>
|
||||
<UiButtonArrow @click="() => {
|
||||
menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
|
||||
if (userStore.isLogged) {
|
||||
menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
|
||||
} else {
|
||||
menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))
|
||||
}
|
||||
openCart = false
|
||||
}" class="w-full" type="fill" :arrow="true" :full="true">{{
|
||||
$t('to_checkout') }}
|
||||
}" class="w-full" type="fill" :arrow="true" :full="true">{{ userStore.isLogged ?
|
||||
$t('to_checkout') : $t('login') }}
|
||||
</UiButtonArrow>
|
||||
</div>
|
||||
<div v-else
|
||||
@ -92,6 +96,7 @@ const productStore = useProductStore()
|
||||
const openCart = ref(false);
|
||||
|
||||
const menuStore = useMenuStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const dropdownRef = ref(null);
|
||||
onClickOutside(dropdownRef, () => {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="w-full border-b border-border">
|
||||
<UiContainer class="relative">
|
||||
<div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
|
||||
<ul class="flex items-center justify-between whitespace-nowrap w-full">
|
||||
<ul class="flex items-center justify-between gap-5 whitespace-nowrap w-full">
|
||||
<li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="item.id"
|
||||
:class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
|
||||
route.params.id == item.id.toString() ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline' : false]">
|
||||
@ -18,13 +18,13 @@
|
||||
</ClientOnly>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<div class="flex items-center gap-[30px]">
|
||||
<p @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 4))" class="cursor-pointer">button</p>
|
||||
<div>
|
||||
<i v-if="!userStore.isLogged"
|
||||
@click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
|
||||
<!-- {{ userStore.user }} -->
|
||||
Arina Yakovenko
|
||||
{{ userStore.user }}
|
||||
</div>
|
||||
</div>
|
||||
<CartPopup />
|
||||
@ -35,7 +35,7 @@
|
||||
</div>
|
||||
<ThemeSwitcher />
|
||||
<button @click="menuStore.navigateToShop" :class="[
|
||||
'cursor-pointer transition-all text-inter',
|
||||
'cursor-pointer transition-all text-inter whitespace-nowrap',
|
||||
route.params.id == '5'
|
||||
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
|
||||
: 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3'
|
||||
@ -57,7 +57,14 @@
|
||||
</ClientOnly>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-[30px]">
|
||||
<i class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<div>
|
||||
<i v-if="!userStore.isLogged"
|
||||
@click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
|
||||
{{ userStore.user }}
|
||||
</div>
|
||||
</div>
|
||||
<CartPopup />
|
||||
</div>
|
||||
<div class="flex">
|
||||
@ -103,7 +110,14 @@
|
||||
</ClientOnly>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-[30px]">
|
||||
<i class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<div>
|
||||
<i v-if="!userStore.isLogged"
|
||||
@click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
|
||||
{{ userStore.user }}
|
||||
</div>
|
||||
</div>
|
||||
<CartPopup />
|
||||
</div>
|
||||
<i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
|
||||
@ -165,6 +179,10 @@
|
||||
@click="menuStore.navigateToItem()" />
|
||||
</ClientOnly>
|
||||
<div class="flex items-center gap-6">
|
||||
<div>
|
||||
<i @click="!userStore.isLogged && menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[30px] cursor-pointer"></i>
|
||||
</div>
|
||||
<CartPopup />
|
||||
<i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
|
||||
</div>
|
||||
|
||||
@ -1,49 +1,47 @@
|
||||
<template>
|
||||
<UiContainer>
|
||||
<div class="w-[85%] mx-auto">
|
||||
<div class="xl:w-[85%] mx-auto">
|
||||
<div v-if="userStore.isLogged" class="space-25-55">
|
||||
|
||||
<div class="w-full flex items-center justify-center">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex items-center gap-[25px] text-gray dark:text-button-disabled">
|
||||
<div class="px-6 py-3 mx-auto">
|
||||
{{ $t("login") }}
|
||||
</div>
|
||||
<div
|
||||
class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3">
|
||||
{{ $t("address") }}
|
||||
</div>
|
||||
<div class="px-6 py-3 mx-auto">
|
||||
{{ $t("summary") }}
|
||||
</div>
|
||||
<div class="px-6 py-3 mx-auto">
|
||||
{{ $t("order_placed") }}
|
||||
</div>
|
||||
<div class="w-full flex items-center sm:justify-center">
|
||||
<div
|
||||
class="flex items-center justify-between sm:justify-center sm:gap-[25px] text-gray dark:text-button-disabled w-full sm:w-auto">
|
||||
<div class="sm:px-6 sm:py-3 mx-auto">
|
||||
{{ $t("login") }}
|
||||
</div>
|
||||
<div
|
||||
class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
|
||||
{{ $t("address") }}
|
||||
</div>
|
||||
<div class="sm:px-6 sm:py-3 mx-auto">
|
||||
{{ $t("summary") }}
|
||||
</div>
|
||||
<div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
|
||||
{{ $t("order_placed") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-[30px]">
|
||||
<div class="space-y-[25px] sm:space-y-[30px]">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ $t("Account address") }}
|
||||
</h2>
|
||||
<div class="flex flex-col gap-[30px] xl:flex-row">
|
||||
<div class="flex flex-col w-1/2 gap-[30px]">
|
||||
<div class="flex flex-col gap-[30px] sm:flex-row">
|
||||
<div class="flex flex-col sm:w-1/2 gap-[25px] sm:gap-[30px]">
|
||||
<CheckoutInput v-model="checkoutStore.userName" :id="1" disabled>{{ $t("first_name")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.lastName" :id="2" disabled>{{ $t("surname")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.address" :id="3" disabled>{{ $t("address")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.postCode" :id="4" disabled>{{ $t("post_code")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
</div>
|
||||
<div class="flex flex-col w-1/2 gap-[30px]">
|
||||
<div class="flex flex-col sm:w-1/2 gap-[30px]">
|
||||
<CheckoutInput v-model="checkoutStore.city" :id="5" disabled>{{ $t("city")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.country" :id="6" disabled>{{ $t("country")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.accountPhoneNumber" :id="7" disabled>{{ $t("phone")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,23 +49,27 @@
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ $t("Shipping details") }}
|
||||
</h2>
|
||||
<div class="relative border border-block rounded-lg px-6 h-[67px] w-full">
|
||||
<div class="flex items-center gap-[10px]">
|
||||
<div class="flex items-center gap-[25px]" v-if="!checkoutStore.vUseAccountPhoneNumber">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div
|
||||
:class="['flex items-center gap-[10px] relative border border-block rounded-lg h-[50px] sm:h-[67px] w-full', checkoutStore.vUseAccountPhoneNumber && 'px-6']">
|
||||
<div class="flex items-center gap-5 sm:gap-[25px]"
|
||||
v-if="!checkoutStore.vUseAccountPhoneNumber">
|
||||
<div class="flex flex-col items-start gap-[25px]">
|
||||
<div ref="dropdownIsoRef"
|
||||
class="pl-[25px] relative w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
|
||||
class="pl-5 sm:pl-[25px] relative w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
|
||||
<div class="p-0" @click="dropIso = !dropIso">
|
||||
<div
|
||||
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
|
||||
{{ checkoutStore.selectedIso.name }} <span> <i
|
||||
class="flex items-center gap-2 text-base sm:text-xl font-medium uppercase text-text-light dark:text-text-dark">
|
||||
<p class="hidden sm:block">{{ checkoutStore.selectedIso.name }}</p>
|
||||
<p class="sm:hidden">{{ checkoutStore.selectedIso.iso_code }}</p>
|
||||
<span> <i
|
||||
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="dropIso"
|
||||
class="absolute w-full mt-2 left-0 bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
|
||||
<div class="overflow-auto h-[200px] w-full">
|
||||
class="absolute w-[130px] sm:w-full mt-2 left-0 bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
|
||||
<div class="overflow-auto h-[200px] w-full overflow-x-hidden">
|
||||
<p @click="() => { checkoutStore.selectedIso = item; dropIso = false; checkoutStore.changePrefix(item.call_prefix as string) }"
|
||||
class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
|
||||
v-for="item in menuStore.countries" :key="item.iso_code">
|
||||
@ -77,23 +79,23 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xl">{{ checkoutStore.currentPrefix }}</p>
|
||||
<p class="text-sm sm:text-xl border-r pr-[10px] border-block">{{ checkoutStore.currentPrefix }}</p>
|
||||
</div>
|
||||
<input
|
||||
<input id="phone"
|
||||
:value="checkoutStore.vUseAccountPhoneNumber ? checkoutStore.accountPhoneNumber : checkoutStore.phoneNumber"
|
||||
:disabled="checkoutStore.vUseAccountPhoneNumber" @input="(e) => {
|
||||
if (!checkoutStore.vUseAccountPhoneNumber) {
|
||||
checkoutStore.phoneNumber = (e.target as HTMLInputElement).value;
|
||||
}
|
||||
}" type="tel" placeholder="123 xxxx xxx"
|
||||
class="placeholder:text-xl placeholder:text-gray placeholder:uppercase dark:placeholder:text-bg-light rounded-lg h-[67px] w-full focus:outline-none focus:ring-0 focus:border-0" />
|
||||
class="placeholder:text-sm sm:placeholder:text-xl placeholder:text-gray placeholder:uppercase dark:placeholder:text-bg-light rounded-lg h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-0" />
|
||||
</div>
|
||||
<p v-if="checkoutStore.phoneValidation === false && !checkoutStore.vUseAccountPhoneNumber"
|
||||
class="text-red-500">Invalid phone number</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<input @change="(event: Event) => {
|
||||
<input id="checkbox" @change="(event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
target.checked ? checkoutStore.vUseAccountPhoneNumber = true : checkoutStore.vUseAccountPhoneNumber = false
|
||||
checkoutStore.phoneValidation = null
|
||||
@ -101,23 +103,23 @@
|
||||
<p>{{ $t('use_account_phone') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-[30px]">
|
||||
<div class="space-y-[30px] h-full">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ $t("Select delivery address") }}
|
||||
</h2>
|
||||
<div class="flex items-center justify-center gap-[25px] h-[225px]">
|
||||
<div class="w-[500px] flex flex-col gap-4 h-full">
|
||||
<div class="flex flex-col md:flex-row items-center justify-center gap-[10px] sm:gap-[25px] md:h-[225px]">
|
||||
<div class="w-full sm:w-[500px] flex flex-col gap-4 h-full">
|
||||
<div v-for="(item, index) in checkoutStore.addressesList" :key="index"
|
||||
:class="['flex h-full flex-col py-[15px] px-[25px] gap-[15px] rounded-lg border-2', checkoutStore.activeAddress === item ? 'border-button' : 'border-block']">
|
||||
:class="['flex min-h-[200px] md:h-full flex-col py-[15px] px-[25px] gap-[15px] rounded-lg border-2', checkoutStore.activeAddress === item ? 'border-button' : 'border-block']">
|
||||
<div
|
||||
:class="['flex flex-col justify-between mt-1 h-full', checkoutStore.activeAddress !== item && 'text-gray dark:text-button-disabled']">
|
||||
:class="['flex flex-col justify-between gap-[10px] h-full', checkoutStore.activeAddress !== item && 'text-gray dark:text-button-disabled']">
|
||||
<span>{{ item.address.name }} {{ item.address.surname }}</span>
|
||||
<span>{{ item.address.street }}</span>
|
||||
<span>{{ item.address.postcode }} {{ item.address.city }}</span>
|
||||
<span>{{ item.address.country_iso }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 border-t pt-[15px] border-block">
|
||||
<input :checked="checkoutStore.activeAddress ? true : false" @change="(event: Event) => {
|
||||
<input id="checkbox" :checked="checkoutStore.activeAddress ? true : false" @change="(event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
target.checked ? checkoutStore.activeAddress = item : checkoutStore.activeAddress = null;
|
||||
checkoutStore.isOpen = false;
|
||||
@ -131,7 +133,7 @@
|
||||
checkoutStore.isOpen = !checkoutStore.isOpen
|
||||
checkoutStore.activeAddress = null
|
||||
}"
|
||||
:class="['cursor-pointer w-[500px] py-[15px] px-[25px] rounded-lg border-2 flex flex-col items-center justify-center h-full', checkoutStore.isOpen ? 'border-button text-button' : 'text-gray border-block ']">
|
||||
:class="['cursor-pointer w-full sm:w-[500px] py-[15px] px-[25px] rounded-lg border-2 flex flex-col items-center justify-center min-h-[200px] md:h-full', checkoutStore.isOpen ? 'border-button text-button' : 'text-gray border-block ']">
|
||||
<h4
|
||||
:class="['font-inter text-base leading-[150%] uppercase text-[16px] sm:text-[20px] border-b', checkoutStore.isOpen ? 'border-button' : 'border-gray']">
|
||||
{{ $t("add_new_address") }}
|
||||
@ -142,7 +144,7 @@
|
||||
<div v-if="checkoutStore.isOpen"
|
||||
class="flex flex-col items-center gap-[30px] justify-center w-full">
|
||||
<div class="flex flex-col gap-[30px] xl:flex-row w-full">
|
||||
<div class="flex flex-col w-1/2 gap-[30px]">
|
||||
<div class="flex flex-col sm:w-1/2 gap-[25px] sm:gap-[30px]">
|
||||
<CheckoutInput v-model="checkoutStore.vNewAddressName" :placeholder="$t('first_name')"
|
||||
:id="8">{{ $t("first_name") }}
|
||||
</CheckoutInput>
|
||||
@ -153,7 +155,7 @@
|
||||
:id="10">{{ $t("city") }}
|
||||
</CheckoutInput>
|
||||
</div>
|
||||
<div class="flex flex-col w-1/2 gap-[30px]">
|
||||
<div class="flex flex-col sm:w-1/2 gap-[25px] sm:gap-[30px]">
|
||||
<CheckoutInput v-model="checkoutStore.vNewAddressSurname" :placeholder="$t('surname')"
|
||||
:id="11">{{ $t("surname") }}
|
||||
</CheckoutInput>
|
||||
@ -163,10 +165,10 @@
|
||||
</p>
|
||||
<div ref="dropdownCountryRef"
|
||||
class="relative w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
|
||||
<div 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 flex items-center justify-start"
|
||||
<div 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 flex items-center justify-start"
|
||||
@click="dropCountry = !dropCountry">
|
||||
<div
|
||||
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
|
||||
class="flex items-center gap-2 text-base sm:text-xl font-medium uppercase text-text-light dark:text-text-dark">
|
||||
{{ checkoutStore.vNewAddressCountry ?
|
||||
checkoutStore.vNewAddressCountry.name : '-' }} <span> <i
|
||||
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
|
||||
|
||||
@ -7,19 +7,19 @@
|
||||
}" />
|
||||
<div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
|
||||
<div class="space-25-55">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex flex-wrap-reverse gap-y-4 justify-between">
|
||||
<h2 class="h2-bold-bounded">{{ $t('sign_up') }}</h2>
|
||||
<button
|
||||
<button @click="menuStore.navigateToItem()"
|
||||
class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
|
||||
$t('back_to_home') }}</button>
|
||||
</div>
|
||||
<div class="space-y-[25px] sm:space-y-[30px]">
|
||||
<p>Obecné informace</p>
|
||||
<p>{{ $t('current_information') }}</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-[30px]">
|
||||
<div class="space-y-[15px]">
|
||||
<p class="pl-6">{{ $t('first_name') }}</p>
|
||||
<input :placeholder="$t('first_name')" type="text"
|
||||
class="text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
|
||||
class="text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
|
||||
</div>
|
||||
<div class="space-y-[15px]">
|
||||
<p class="pl-6">{{ $t('last_name') }}</p>
|
||||
@ -29,7 +29,7 @@
|
||||
<div class="space-y-[15px]">
|
||||
<p class="pl-6">{{ $t('email') }}</p>
|
||||
<input :placeholder="$t('email')" type="text"
|
||||
class="text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
|
||||
class="text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
|
||||
</div>
|
||||
<div class="space-y-[15px]" ref="dropdownRef">
|
||||
<p class="pl-6">{{ $t('phone') }}</p>
|
||||
@ -48,7 +48,7 @@
|
||||
</div>
|
||||
|
||||
<div v-if="dropCountry"
|
||||
class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-full border border-button py-[10px] px-[5px] overflow-hidden">
|
||||
class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-[130px] sm:w-full border border-button py-[10px] px-[5px] overflow-hidden">
|
||||
<div class="overflow-y-auto h-[200px] w-full">
|
||||
<p v-for="item in menuStore.countries" :key="item.iso_code"
|
||||
@click="() => { menuStore.selectedPhoneCountry = item; dropCountry = false }"
|
||||
@ -62,13 +62,14 @@
|
||||
</div>
|
||||
<p class="text-sm sm:text-xl font-normal">{{ menuStore.selectedPhoneCountry.call_prefix
|
||||
}}</p>
|
||||
<input :placeholder="$t('phone')" type="text"
|
||||
<input id="phone" :placeholder="$t('phone')" type="text"
|
||||
class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-[15px]">
|
||||
<p class="pl-6">{{ $t('account_type') }}</p>
|
||||
<USelect v-model="selectedType" :items="component.front_section_lang[0].data.account_types"
|
||||
<USelect v-model="selectedType"
|
||||
:items="component.front_section_lang && component.front_section_lang[0].data.account_types"
|
||||
value-key="name" :searchable="false" :ui="{
|
||||
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
|
||||
trailing: 'hidden w-full',
|
||||
@ -83,7 +84,9 @@
|
||||
<div
|
||||
class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
|
||||
<p class="truncate whitespace-nowrap">
|
||||
{{ component.front_section_lang[0].data.account_types.find((item) => item.name === modelValue)?.name }}
|
||||
{{component.front_section_lang &&
|
||||
component.front_section_lang[0].data.account_types.find((item) => item.name
|
||||
=== modelValue)?.name}}
|
||||
</p>
|
||||
<span> <i
|
||||
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
|
||||
@ -150,7 +153,9 @@ const menuStore = useMenuStore()
|
||||
const dropdownRef = ref(null);
|
||||
const dropCountry = ref()
|
||||
|
||||
const selectedType = ref(props.component.front_section_lang[0].data.account_types[0].name)
|
||||
const selectedType = ref()
|
||||
if (props.component.front_section_lang)
|
||||
selectedType.value = props.component.front_section_lang[0].data.account_types[0].name
|
||||
|
||||
onClickOutside(dropdownRef, () => {
|
||||
dropCountry.value = false
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
: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" />
|
||||
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" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user