PersonalDetails.vue
2.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<script setup lang="ts">
import type { PersonalDetails } from './types'
import type { CustomInputContent } from '@core/types'
const props = defineProps<{
formData: PersonalDetails
}>()
const emit = defineEmits<{
(e: 'update:formData', value: PersonalDetails): void
}>()
const propertyRadioContent: CustomInputContent[] = [
{
title: 'I am the builder',
desc: 'List property as Builder, list your project and get highest reach fast.',
icon: 'ri-home-6-line',
value: 'builder',
},
{
title: 'I am the owner',
desc: 'Submit property as an Individual. Lease, Rent or Sell at the best price.',
icon: 'ri-user-3-line',
value: 'owner',
},
{
title: 'I am the broker',
desc: 'Earn highest commission by listing your clients properties at best price.',
value: 'broker',
icon: 'ri-money-dollar-circle-line',
},
]
const formData = ref<PersonalDetails>(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<VCol cols="12">
<!-- 👉 User Type -->
<CustomRadiosWithIcon
v-model:selected-radio="formData.userType"
:radio-content="propertyRadioContent"
:grid-column="{ cols: '12', sm: '4' }"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 First Name -->
<VTextField
v-model="formData.firstName"
class="text-center"
label="First Name"
placeholder="John"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Last Name -->
<VTextField
v-model="formData.lastName"
label="Last Name"
placeholder="Doe"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Username -->
<VTextField
v-model="formData.username"
label="Username"
placeholder="Johndoe"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Password -->
<VTextField
v-model="formData.password"
autocomplete="on"
type="password"
label="Password"
placeholder="············"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Email -->
<VTextField
v-model="formData.email"
type="email"
label="Email"
placeholder="john.doe@email.com"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Contact -->
<VTextField
v-model="formData.contact"
type="number"
label="Contact"
placeholder="+1 123 456 7890"
/>
</VCol>
</VRow>
</VForm>
</template>