first commit
This commit is contained in:
Inshal
@@ -0,0 +1,129 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const propertyRadioContent = [
|
||||
{
|
||||
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(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>
|
||||
@@ -0,0 +1,140 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Expected Price -->
|
||||
<VTextField
|
||||
v-model="formData.expectedPrice"
|
||||
label="Expected Price"
|
||||
type="number"
|
||||
append-inner-icon="ri-money-dollar-circle-line"
|
||||
placeholder="25,000"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Price Per SQFT -->
|
||||
<VTextField
|
||||
v-model="formData.pricePerSqft"
|
||||
label="Price Per SQFT"
|
||||
append-inner-icon="ri-money-dollar-circle-line"
|
||||
type="number"
|
||||
placeholder="500"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Maintenance Charge -->
|
||||
<VTextField
|
||||
v-model="formData.maintenanceCharge"
|
||||
label="Maintenance Charge"
|
||||
append-inner-icon="ri-money-dollar-circle-line"
|
||||
type="number"
|
||||
placeholder="50"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Maintenance Period -->
|
||||
<VSelect
|
||||
v-model="formData.maintenancePeriod"
|
||||
label="Maintenance Period"
|
||||
placeholder="Select Maintenance Period"
|
||||
:items="['Monthly', 'Quarterly', 'Half Yearly', 'Yearly']"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Booking/Token Amount -->
|
||||
<VTextField
|
||||
v-model="formData.bookingAmount"
|
||||
label="Booking/Token Amount"
|
||||
append-inner-icon="ri-money-dollar-circle-line"
|
||||
type="number"
|
||||
placeholder="250"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Other Amount -->
|
||||
<VTextField
|
||||
v-model="formData.otherAmount"
|
||||
label="Other Amount"
|
||||
append-inner-icon="ri-money-dollar-circle-line"
|
||||
type="number"
|
||||
placeholder="500"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Show Price As -->
|
||||
<VRadioGroup v-model="formData.priceDisplayType">
|
||||
<template #label>
|
||||
<div>
|
||||
Show Price As
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
label="Negotiable"
|
||||
value="Negotiable"
|
||||
/>
|
||||
<VRadio
|
||||
label="Call For Price"
|
||||
value="Call For Price"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Price Includes -->
|
||||
<div class="mb-2 text-base">
|
||||
Price Includes
|
||||
</div>
|
||||
<VCheckbox
|
||||
v-model="formData.priceIncludes"
|
||||
label="Car Parking"
|
||||
value="Car Parking"
|
||||
/>
|
||||
<VCheckbox
|
||||
v-model="formData.priceIncludes"
|
||||
label="Club Membership"
|
||||
value="Club Membership"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,159 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Total Area -->
|
||||
<VTextField
|
||||
v-model="formData.totalArea"
|
||||
label="Total Area"
|
||||
suffix="sq-ft"
|
||||
type="number"
|
||||
placeholder="1000"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Carpet Area -->
|
||||
<VTextField
|
||||
v-model="formData.carpetArea"
|
||||
label="Carpet Area"
|
||||
suffix="sq-ft"
|
||||
type="number"
|
||||
placeholder="800"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Plot Area -->
|
||||
<VTextField
|
||||
v-model="formData.plotArea"
|
||||
label="Plot Area"
|
||||
suffix="sq-ft"
|
||||
type="number"
|
||||
placeholder="800"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Available From -->
|
||||
<AppDateTimePicker
|
||||
v-model="formData.availableFrom"
|
||||
label="Available From"
|
||||
type="date"
|
||||
placeholder="Select Date"
|
||||
format="YYYY-MM-DD"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Possession Status -->
|
||||
<VRadioGroup v-model="formData.possessionStatus">
|
||||
<template #label>
|
||||
<div>
|
||||
Possession Status
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
value="Under Construciton"
|
||||
label="Under Construction"
|
||||
/>
|
||||
<VRadio
|
||||
value="Ready to Move"
|
||||
label="Ready to Move"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Transaction Type -->
|
||||
<VRadioGroup v-model="formData.transactionType">
|
||||
<template #label>
|
||||
<div>
|
||||
Transaction Type
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
value="New Property"
|
||||
label="New Property"
|
||||
/>
|
||||
<VRadio
|
||||
value="Resale"
|
||||
label="Resale"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 property Location -->
|
||||
<VRadioGroup v-model="formData.isOnMainRoad">
|
||||
<template #label>
|
||||
<div>
|
||||
Is Property Facing Main Road?
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
value="Yes"
|
||||
label="Yes"
|
||||
/>
|
||||
<VRadio
|
||||
value="No"
|
||||
label="No"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Gated Colony -->
|
||||
<VRadioGroup v-model="formData.isGatedColony">
|
||||
<template #label>
|
||||
<div>
|
||||
Gated Colony
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
value="Yes"
|
||||
label="Yes"
|
||||
/>
|
||||
<VRadio
|
||||
value="No"
|
||||
label="No"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Sell the property',
|
||||
desc: 'Post your property for sale. Unlimited free listing.',
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
value: 'sell',
|
||||
},
|
||||
{
|
||||
title: 'Rent the property',
|
||||
desc: 'Post your property for rent. Unlimited free listing.',
|
||||
icon: 'ri-home-6-line',
|
||||
value: 'rent',
|
||||
},
|
||||
]
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Property Deal Type -->
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="formData.propertyDealType"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ cols: '12', sm: '6' }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Property Type -->
|
||||
<VSelect
|
||||
v-model="formData.propertyType"
|
||||
label="Property type"
|
||||
placeholder="Select Property Type"
|
||||
:items="['Residential', 'Commercial']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Zip Code -->
|
||||
<VTextField
|
||||
v-model="formData.zipCode"
|
||||
label="Zip Code"
|
||||
type="number"
|
||||
placeholder="123456"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Country -->
|
||||
<VSelect
|
||||
v-model="formData.country"
|
||||
label="Country"
|
||||
placeholder="Select country"
|
||||
:items="['India', 'UK', 'USA', 'AUS', 'Germany']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 State -->
|
||||
<VTextField
|
||||
v-model="formData.state"
|
||||
label="State"
|
||||
placeholder="California"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 City -->
|
||||
<VTextField
|
||||
v-model="formData.city"
|
||||
label="City"
|
||||
placeholder="Los Angeles"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Landmark -->
|
||||
<VTextField
|
||||
v-model="formData.landmark"
|
||||
label="Landmark"
|
||||
placeholder="Near to bus stop"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol>
|
||||
<!-- 👉 Address -->
|
||||
<VTextarea
|
||||
v-model="formData.address"
|
||||
label="Address"
|
||||
placeholder="112, 1st Cross, 1st Stage, 1st Phase, BTM Layout, Bangalore - 560068"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Bedrooms -->
|
||||
<VTextField
|
||||
v-model="formData.bedroomCount"
|
||||
label="Bedrooms"
|
||||
placeholder="3"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Floor No -->
|
||||
<VTextField
|
||||
v-model="formData.floorNo"
|
||||
label="Floor No"
|
||||
placeholder="12"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Bathrooms -->
|
||||
<VTextField
|
||||
v-model="formData.bathroomCount"
|
||||
label="Bathroom"
|
||||
placeholder="4"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Furnished Status -->
|
||||
<VSelect
|
||||
v-model="formData.furnishedStatus"
|
||||
label="Furnished Status"
|
||||
placeholder="Select Furnished Status"
|
||||
:items="['Fully Furnished', 'Furnished', 'Semi-Furnished', 'Unfurnished']"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Furnishing Details -->
|
||||
<VSelect
|
||||
v-model="formData.furnishingDetails"
|
||||
label="Furnishing Details"
|
||||
placeholder="Select Furnishing Details"
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
:items="['TV', 'AC', 'RO', 'Bed', 'Fridge', 'Wi-Fi', 'Sofa', 'Cupboard', 'Microwave', 'Dining Table', 'Washing Machine']"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 xCommon Area? -->
|
||||
<VRadioGroup v-model="formData.isCommonArea1">
|
||||
<template #label>
|
||||
<div>
|
||||
Is There Any Common Area?
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
label="Yes"
|
||||
value="true"
|
||||
/>
|
||||
<VRadio
|
||||
label="No"
|
||||
value="false"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<!-- 👉 Common Area? -->
|
||||
<VRadioGroup v-model="formData.isCommonArea2">
|
||||
<template #label>
|
||||
<div>
|
||||
Is There Any Common Area?
|
||||
</div>
|
||||
</template>
|
||||
<VRadio
|
||||
label="Yes"
|
||||
value="true"
|
||||
/>
|
||||
<VRadio
|
||||
label="No"
|
||||
value="false"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1 @@
|
||||
export {}
|
||||
Reference in New Issue
Block a user