first commit
This commit is contained in:
Inshal
@@ -0,0 +1,429 @@
|
||||
<script setup>
|
||||
import customWizardAccount from '@images/svg/wizard-account.svg'
|
||||
import customWizardAddress from '@images/svg/wizard-address.svg'
|
||||
import customWizardPersonal from '@images/svg/wizard-personal.svg'
|
||||
import customWizardSocialLink from '@images/svg/wizard-social-link.svg'
|
||||
import customWizardSubmit from '@images/svg/wizard-submit.svg'
|
||||
|
||||
const iconsSteps = [
|
||||
{
|
||||
title: 'Account Details',
|
||||
icon: customWizardAccount,
|
||||
},
|
||||
{
|
||||
title: 'Personal Info',
|
||||
icon: customWizardPersonal,
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
icon: customWizardAddress,
|
||||
},
|
||||
{
|
||||
title: 'Social Links',
|
||||
icon: customWizardSocialLink,
|
||||
},
|
||||
{
|
||||
title: 'Review & Submit',
|
||||
icon: customWizardSubmit,
|
||||
},
|
||||
]
|
||||
|
||||
const currentStep = ref(0)
|
||||
const isPasswordVisible = ref(false)
|
||||
const isCPasswordVisible = ref(false)
|
||||
|
||||
const formData = ref({
|
||||
username: 'johndoe',
|
||||
email: 'john.doe@email.com',
|
||||
password: 'johndoe@J2',
|
||||
cPassword: 'johndoe@J2',
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
country: 'UK',
|
||||
language: 'English',
|
||||
address: '98 Borough bridge Road, Birmingham',
|
||||
landmark: 'Borough bridge',
|
||||
pincode: '658921',
|
||||
city: 'Birmingham',
|
||||
twitter: 'https://twitter.com/abc',
|
||||
facebook: 'https://facebook.com/abc',
|
||||
googlePlus: 'https://plus.google.com/abc',
|
||||
linkedIn: 'https://linkedin.com/abc',
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log(formData.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<!-- 👉 Stepper -->
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
:items="iconsSteps"
|
||||
align="center"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<!-- 👉 stepper content -->
|
||||
<VForm>
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
>
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Account Details
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Enter your Account Details
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.username"
|
||||
placeholder="CarterLeonardo"
|
||||
label="Username"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.email"
|
||||
placeholder="carterleonardo@gmail.com"
|
||||
label="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.cPassword"
|
||||
label="Confirm Password"
|
||||
placeholder="············"
|
||||
:type="isCPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isCPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isCPasswordVisible = !isCPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Personal Info
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Setup Information
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.firstName"
|
||||
label="First Name"
|
||||
placeholder="Leonard"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.lastName"
|
||||
label="Last Name"
|
||||
placeholder="Carter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.country"
|
||||
label="Country"
|
||||
placeholder="Select Country"
|
||||
:items="['UK', 'USA', 'Canada', 'Australia', 'Germany']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.language"
|
||||
label="Language"
|
||||
placeholder="Select Language"
|
||||
:items="['English', 'Spanish', 'French', 'Russian', 'German']"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Address
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Enter Your Address.
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.address"
|
||||
placeholder="98 Borough bridge Road, Birmingham"
|
||||
label="Address"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.landmark"
|
||||
placeholder="Borough bridge"
|
||||
label="Landmark"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.pincode"
|
||||
placeholder="658921"
|
||||
label="Pincode"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.city"
|
||||
placeholder="New York"
|
||||
label="City"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Social Links
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Add Social Links
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.twitter"
|
||||
placeholder="https://twitter.com/abc"
|
||||
label="Twitter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.facebook"
|
||||
placeholder="https://facebook.com/abc"
|
||||
label="Facebook"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.googlePlus"
|
||||
placeholder="https://plus.google.com/abc"
|
||||
label="Google+"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.linkedIn"
|
||||
placeholder="https://linkedin.com/abc"
|
||||
label="LinkedIn"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<div class="text-base">
|
||||
<h6 class="text-base font-weight-medium mb-2">
|
||||
Account
|
||||
</h6>
|
||||
|
||||
<p class="mb-1">
|
||||
{{ formData.username }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ formData.email }}
|
||||
</p>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<h6 class="text-base font-weight-medium mb-2">
|
||||
Personal Info
|
||||
</h6>
|
||||
|
||||
<p class="mb-1">
|
||||
{{ formData.firstName }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ formData.lastName }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ formData.country }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ formData.language }}
|
||||
</p>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<h6 class="text-base font-weight-medium mb-2">
|
||||
Address
|
||||
</h6>
|
||||
|
||||
<p class="mb-1">
|
||||
{{ formData.address }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ formData.landmark }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ formData.pincode }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ formData.city }}
|
||||
</p>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<h6 class="text-base font-weight-medium mb-2">
|
||||
Social Links
|
||||
</h6>
|
||||
|
||||
<p class="mb-1">
|
||||
{{ formData.twitter }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ formData.facebook }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ formData.googlePlus }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ formData.linkedIn }}
|
||||
</p>
|
||||
</div>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
:disabled="currentStep === 0"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-if="iconsSteps.length - 1 === currentStep"
|
||||
color="success"
|
||||
append-icon="ri-check-line"
|
||||
@click="onSubmit"
|
||||
>
|
||||
submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
@click="currentStep++"
|
||||
>
|
||||
Next
|
||||
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,615 @@
|
||||
<script setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import customWizardAccount from '@images/svg/wizard-account.svg'
|
||||
import customWizardAddress from '@images/svg/wizard-address.svg'
|
||||
import customWizardPersonal from '@images/svg/wizard-personal.svg'
|
||||
import customWizardSocialLink from '@images/svg/wizard-social-link.svg'
|
||||
import customWizardSubmit from '@images/svg/wizard-submit.svg'
|
||||
|
||||
const iconsSteps = [
|
||||
{
|
||||
title: 'Account Details',
|
||||
icon: customWizardAccount,
|
||||
},
|
||||
{
|
||||
title: 'Personal Info',
|
||||
icon: customWizardPersonal,
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
icon: customWizardAddress,
|
||||
},
|
||||
{
|
||||
title: 'Social Links',
|
||||
icon: customWizardSocialLink,
|
||||
},
|
||||
{
|
||||
title: 'Review & Submit',
|
||||
icon: customWizardSubmit,
|
||||
},
|
||||
]
|
||||
|
||||
const currentStep = ref(0)
|
||||
const isPasswordVisible = ref(false)
|
||||
const isCPasswordVisible = ref(false)
|
||||
const isCurrentStepValid = ref(true)
|
||||
const refAccountForm = ref()
|
||||
const refPersonalForm = ref()
|
||||
const refSocialLinkForm = ref()
|
||||
const refAddressForm = ref()
|
||||
|
||||
const accountForm = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
cPassword: '',
|
||||
})
|
||||
|
||||
const personalForm = ref({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
country: undefined,
|
||||
language: undefined,
|
||||
})
|
||||
|
||||
const socialForm = ref({
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
googlePlus: '',
|
||||
linkedIn: '',
|
||||
})
|
||||
|
||||
const addressForm = ref({
|
||||
address: '',
|
||||
landmark: '',
|
||||
city: '',
|
||||
pincode: '',
|
||||
})
|
||||
|
||||
const validateAccountForm = () => {
|
||||
refAccountForm.value?.validate().then(valid => {
|
||||
if (valid.valid) {
|
||||
currentStep.value++
|
||||
isCurrentStepValid.value = true
|
||||
} else {
|
||||
isCurrentStepValid.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const validatePersonalForm = () => {
|
||||
refPersonalForm.value?.validate().then(valid => {
|
||||
if (valid.valid) {
|
||||
currentStep.value++
|
||||
isCurrentStepValid.value = true
|
||||
} else {
|
||||
isCurrentStepValid.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const validateAddressForm = () => {
|
||||
refAddressForm.value?.validate().then(valid => {
|
||||
if (valid.valid) {
|
||||
currentStep.value++
|
||||
isCurrentStepValid.value = true
|
||||
} else {
|
||||
isCurrentStepValid.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const validateSocialLinkForm = () => {
|
||||
refSocialLinkForm.value?.validate().then(valid => {
|
||||
if (valid.valid) {
|
||||
currentStep.value++
|
||||
isCurrentStepValid.value = true
|
||||
} else {
|
||||
isCurrentStepValid.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<!-- 👉 Stepper -->
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
:items="iconsSteps"
|
||||
:is-active-step-valid="isCurrentStepValid"
|
||||
align="center"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<!-- 👉 stepper content -->
|
||||
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
>
|
||||
<VWindowItem>
|
||||
<VForm
|
||||
ref="refAccountForm"
|
||||
@submit.prevent="validateAccountForm"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Account Details
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Enter your Account Details
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountForm.username"
|
||||
placeholder="CarterLeonardo"
|
||||
:rules="[requiredValidator]"
|
||||
label="Username"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountForm.email"
|
||||
placeholder="carterleonardo@gmail.com"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
label="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountForm.password"
|
||||
placeholder="············"
|
||||
label="Password"
|
||||
:rules="[requiredValidator, passwordValidator]"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountForm.cPassword"
|
||||
placeholder="············"
|
||||
label="Confirm Password"
|
||||
:rules="[requiredValidator, confirmedValidator(accountForm.cPassword, accountForm.password)]"
|
||||
:type="isCPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isCPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isCPasswordVisible = !isCPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
disabled
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn type="submit">
|
||||
Next
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VForm
|
||||
ref="refPersonalForm"
|
||||
@submit.prevent="validatePersonalForm"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Personal Info
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Setup Information
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="personalForm.firstName"
|
||||
label="First Name"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="Leonard"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="personalForm.lastName"
|
||||
label="Last Name"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="Carter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="personalForm.country"
|
||||
label="Country"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="Select Country"
|
||||
:items="['UK', 'USA', 'Canada', 'Australia', 'Germany']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="personalForm.language"
|
||||
label="Language"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="Select Language"
|
||||
:items="['English', 'Spanish', 'French', 'Russian', 'German']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn type="submit">
|
||||
Next
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VForm
|
||||
ref="refAddressForm"
|
||||
@submit.prevent="validateAddressForm"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Address
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Enter Your Address.
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="addressForm.address"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="98 Borough bridge Road, Birmingham"
|
||||
label="Address"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="addressForm.landmark"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="Borough bridge"
|
||||
label="Landmark"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="addressForm.pincode"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="658921"
|
||||
label="Pincode"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="addressForm.city"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="New York"
|
||||
label="City"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn type="submit">
|
||||
Next
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VForm
|
||||
ref="refSocialLinkForm"
|
||||
@submit.prevent="validateSocialLinkForm"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Social Links
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Add Social Links
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="socialForm.twitter"
|
||||
placeholder="https://twitter.com/abc"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
label="Twitter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="socialForm.facebook"
|
||||
placeholder="https://facebook.com/abc"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
label="Facebook"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="socialForm.googlePlus"
|
||||
placeholder="https://plus.google.com/abc"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
label="Google+"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="socialForm.linkedIn"
|
||||
placeholder="https://linkedin.com/abc"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
label="LinkedIn"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn type="submit">
|
||||
Next
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<div class="text-base">
|
||||
<h6 class="text-base font-weight-medium mb-2">
|
||||
Account
|
||||
</h6>
|
||||
|
||||
<p class="mb-1">
|
||||
{{ accountForm.username }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ accountForm.email }}
|
||||
</p>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<h6 class="text-base font-weight-medium mb-2">
|
||||
Personal Info
|
||||
</h6>
|
||||
|
||||
<p class="mb-1">
|
||||
{{ personalForm.firstName }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ personalForm.lastName }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ personalForm.country }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ personalForm.language }}
|
||||
</p>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<h6 class="text-base font-weight-medium mb-2">
|
||||
Address
|
||||
</h6>
|
||||
|
||||
<p class="mb-1">
|
||||
{{ addressForm.address }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ addressForm.landmark }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ addressForm.pincode }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ addressForm.city }}
|
||||
</p>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<h6 class="text-base font-weight-medium mb-2">
|
||||
Social Links
|
||||
</h6>
|
||||
|
||||
<p class="mb-1">
|
||||
{{ socialForm.twitter }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ socialForm.facebook }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ socialForm.googlePlus }}
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
{{ socialForm.linkedIn }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="success"
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
<VIcon
|
||||
icon="ri-check-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,293 @@
|
||||
<script setup>
|
||||
const numberedSteps = [
|
||||
{
|
||||
title: 'Account Details',
|
||||
icon: 'ri-article-line',
|
||||
},
|
||||
{
|
||||
title: 'Personal Info',
|
||||
icon: 'ri-user-line',
|
||||
},
|
||||
{
|
||||
title: 'Social Links',
|
||||
icon: 'ri-links-line',
|
||||
},
|
||||
]
|
||||
|
||||
const currentStep = ref(0)
|
||||
const isPasswordVisible = ref(false)
|
||||
const isCPasswordVisible = ref(false)
|
||||
|
||||
const formData = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
cPassword: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
country: undefined,
|
||||
language: undefined,
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
googlePlus: '',
|
||||
linkedIn: '',
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log(formData.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
:class="$vuetify.display.smAndDown ? 'border-b' : 'border-e'"
|
||||
>
|
||||
<VCardText>
|
||||
<!-- 👉 Stepper -->
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
direction="vertical"
|
||||
:items="numberedSteps"
|
||||
icon-size="24"
|
||||
class="stepper-icon-step-bg"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
<!-- 👉 stepper content -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<VCardText>
|
||||
<VForm>
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
>
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Account Details
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Enter your Account Details
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.username"
|
||||
placeholder="CarterLeonardo"
|
||||
label="Username"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.email"
|
||||
placeholder="carterleonardo@gmail.com"
|
||||
label="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.cPassword"
|
||||
label="Confirm Password"
|
||||
placeholder="············"
|
||||
:type="isCPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isCPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isCPasswordVisible = !isCPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Personal Info
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Setup Information
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.firstName"
|
||||
label="First Name"
|
||||
placeholder="Leonard"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.lastName"
|
||||
label="Last Name"
|
||||
placeholder="Carter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.country"
|
||||
label="Country"
|
||||
placeholder="Select Country"
|
||||
:items="['UK', 'USA', 'Canada', 'Australia', 'Germany']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.language"
|
||||
label="Language"
|
||||
placeholder="Select Language"
|
||||
:items="['English', 'Spanish', 'French', 'Russian', 'German']"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Social Links
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Add Social Links
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.twitter"
|
||||
placeholder="https://twitter.com/abc"
|
||||
label="Twitter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.facebook"
|
||||
placeholder="https://facebook.com/abc"
|
||||
label="Facebook"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.googlePlus"
|
||||
placeholder="https://plus.google.com/abc"
|
||||
label="Google+"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.linkedIn"
|
||||
placeholder="https://linkedin.com/abc"
|
||||
label="LinkedIn"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
:disabled="currentStep === 0"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-if="numberedSteps.length - 1 === currentStep"
|
||||
color="success"
|
||||
append-icon="ri-check-line"
|
||||
@click="onSubmit"
|
||||
>
|
||||
submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
@click="currentStep++"
|
||||
>
|
||||
Next
|
||||
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,280 @@
|
||||
<script setup>
|
||||
const numberedSteps = [
|
||||
{
|
||||
title: 'Account Details',
|
||||
subtitle: 'Setup Account Details',
|
||||
},
|
||||
{
|
||||
title: 'Personal Info',
|
||||
subtitle: 'Add personal info',
|
||||
},
|
||||
{
|
||||
title: 'Social Links',
|
||||
subtitle: 'Add social links',
|
||||
},
|
||||
]
|
||||
|
||||
const currentStep = ref(0)
|
||||
const isPasswordVisible = ref(false)
|
||||
const isCPasswordVisible = ref(false)
|
||||
|
||||
const formData = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
cPassword: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
country: undefined,
|
||||
language: undefined,
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
googlePlus: '',
|
||||
linkedIn: '',
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log(formData.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<!-- 👉 Stepper -->
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
:items="numberedSteps"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<!-- 👉 stepper content -->
|
||||
<VForm>
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
>
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Account Details
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Enter your Account Details
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.username"
|
||||
placeholder="CarterLeonardo"
|
||||
label="Username"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.email"
|
||||
placeholder="carterleonardo@gmail.com"
|
||||
label="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.cPassword"
|
||||
label="Confirm Password"
|
||||
placeholder="············"
|
||||
:type="isCPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isCPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isCPasswordVisible = !isCPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Personal Info
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Setup Information
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.firstName"
|
||||
label="First Name"
|
||||
placeholder="Leonard"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.lastName"
|
||||
label="Last Name"
|
||||
placeholder="Carter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.country"
|
||||
label="Country"
|
||||
placeholder="Select Country"
|
||||
:items="['UK', 'USA', 'Canada', 'Australia', 'Germany']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.language"
|
||||
label="Language"
|
||||
placeholder="Select Language"
|
||||
:items="['English', 'Spanish', 'French', 'Russian', 'German']"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Social Links
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Add Social Links
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.twitter"
|
||||
placeholder="https://twitter.com/abc"
|
||||
label="Twitter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.facebook"
|
||||
placeholder="https://facebook.com/abc"
|
||||
label="Facebook"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.googlePlus"
|
||||
placeholder="https://plus.google.com/abc"
|
||||
label="Google+"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.linkedIn"
|
||||
placeholder="https://linkedin.com/abc"
|
||||
label="LinkedIn"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
:disabled="currentStep === 0"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-if="numberedSteps.length - 1 === currentStep"
|
||||
color="success"
|
||||
append-icon="ri-check-line"
|
||||
@click="onSubmit"
|
||||
>
|
||||
submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
@click="currentStep++"
|
||||
>
|
||||
Next
|
||||
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,390 @@
|
||||
<script setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
|
||||
const numberedSteps = [
|
||||
{
|
||||
title: 'Account Details',
|
||||
subtitle: 'Setup Account Details',
|
||||
},
|
||||
{
|
||||
title: 'Personal Info',
|
||||
subtitle: 'Add personal info',
|
||||
},
|
||||
{
|
||||
title: 'Social Links',
|
||||
subtitle: 'Add social links',
|
||||
},
|
||||
]
|
||||
|
||||
const currentStep = ref(0)
|
||||
const isPasswordVisible = ref(false)
|
||||
const isCPasswordVisible = ref(false)
|
||||
const isCurrentStepValid = ref(true)
|
||||
const refAccountForm = ref()
|
||||
const refPersonalForm = ref()
|
||||
const refSocialLinkForm = ref()
|
||||
|
||||
const accountForm = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
cPassword: '',
|
||||
})
|
||||
|
||||
const personalForm = ref({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
country: undefined,
|
||||
language: undefined,
|
||||
})
|
||||
|
||||
const socialForm = ref({
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
googlePlus: '',
|
||||
linkedIn: '',
|
||||
})
|
||||
|
||||
const validateAccountForm = () => {
|
||||
refAccountForm.value?.validate().then(valid => {
|
||||
if (valid.valid) {
|
||||
currentStep.value++
|
||||
isCurrentStepValid.value = true
|
||||
} else {
|
||||
isCurrentStepValid.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const validatePersonalForm = () => {
|
||||
refPersonalForm.value?.validate().then(valid => {
|
||||
if (valid.valid) {
|
||||
currentStep.value++
|
||||
isCurrentStepValid.value = true
|
||||
} else {
|
||||
isCurrentStepValid.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const validateSocialLinkForm = () => {
|
||||
refSocialLinkForm.value?.validate().then(valid => {
|
||||
if (valid.valid) {
|
||||
isCurrentStepValid.value = true
|
||||
console.log({
|
||||
...accountForm.value,
|
||||
...personalForm.value,
|
||||
...socialForm.value,
|
||||
})
|
||||
} else {
|
||||
isCurrentStepValid.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<!-- 👉 Stepper -->
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
:items="numberedSteps"
|
||||
:is-active-step-valid="isCurrentStepValid"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<!-- 👉 stepper content -->
|
||||
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
>
|
||||
<VWindowItem>
|
||||
<VForm
|
||||
ref="refAccountForm"
|
||||
@submit.prevent="validateAccountForm"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Account Details
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Enter your Account Details
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountForm.username"
|
||||
placeholder="CarterLeonardo"
|
||||
:rules="[requiredValidator]"
|
||||
label="Username"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountForm.email"
|
||||
placeholder="carterleonardo@gmail.com"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
label="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountForm.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:rules="[requiredValidator, passwordValidator]"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="accountForm.cPassword"
|
||||
label="Confirm Password"
|
||||
placeholder="············"
|
||||
:rules="[requiredValidator, confirmedValidator(accountForm.cPassword, accountForm.password)]"
|
||||
:type="isCPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isCPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isCPasswordVisible = !isCPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
disabled
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn type="submit">
|
||||
Next
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VForm
|
||||
ref="refPersonalForm"
|
||||
@submit.prevent="validatePersonalForm"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Personal Info
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Setup Information
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="personalForm.firstName"
|
||||
label="First Name"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="Leonard"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="personalForm.lastName"
|
||||
label="Last Name"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="Carter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="personalForm.country"
|
||||
label="Country"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="Select Country"
|
||||
:items="['UK', 'USA', 'Canada', 'Australia', 'Germany']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="personalForm.language"
|
||||
label="Language"
|
||||
:rules="[requiredValidator]"
|
||||
placeholder="Select Language"
|
||||
:items="['English', 'Spanish', 'French', 'Russian', 'German']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn type="submit">
|
||||
Next
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VForm
|
||||
ref="refSocialLinkForm"
|
||||
@submit.prevent="validateSocialLinkForm"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Social Links
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Add Social Links
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="socialForm.twitter"
|
||||
placeholder="https://twitter.com/abc"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
label="Twitter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="socialForm.facebook"
|
||||
placeholder="https://facebook.com/abc"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
label="Facebook"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="socialForm.googlePlus"
|
||||
placeholder="https://plus.google.com/abc"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
label="Google+"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="socialForm.linkedIn"
|
||||
placeholder="https://likedin.com/abc"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
label="LinkedIn"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="success"
|
||||
type="submit"
|
||||
>
|
||||
submit
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,291 @@
|
||||
<script setup>
|
||||
const numberedSteps = [
|
||||
{
|
||||
title: 'Account Details',
|
||||
subtitle: 'Setup Account Details',
|
||||
},
|
||||
{
|
||||
title: 'Personal Info',
|
||||
subtitle: 'Add personal info',
|
||||
},
|
||||
{
|
||||
title: 'Social Links',
|
||||
subtitle: 'Add social links',
|
||||
},
|
||||
]
|
||||
|
||||
const currentStep = ref(0)
|
||||
const isPasswordVisible = ref(false)
|
||||
const isCPasswordVisible = ref(false)
|
||||
|
||||
const formData = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
cPassword: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
country: undefined,
|
||||
language: undefined,
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
googlePlus: '',
|
||||
linkedIn: '',
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log(formData.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
:class="$vuetify.display.smAndDown ? 'border-b' : 'border-e'"
|
||||
>
|
||||
<VCardText>
|
||||
<!-- 👉 Stepper -->
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
direction="vertical"
|
||||
:items="numberedSteps"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
<!-- 👉 stepper content -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<VCardText>
|
||||
<VForm>
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
>
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Account Details
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Enter your Account Details
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.username"
|
||||
placeholder="CarterLeonardo"
|
||||
label="Username"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.email"
|
||||
placeholder="carterleonardo@gmail.com"
|
||||
label="Email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.password"
|
||||
placeholder="············"
|
||||
label="Password"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.cPassword"
|
||||
placeholder="············"
|
||||
label="Confirm Password"
|
||||
:type="isCPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isCPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isCPasswordVisible = !isCPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Personal Info
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Setup Information
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.firstName"
|
||||
label="First Name"
|
||||
placeholder="Leonard"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.lastName"
|
||||
label="Last Name"
|
||||
placeholder="Carter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.country"
|
||||
label="Country"
|
||||
placeholder="Select Country"
|
||||
:items="['UK', 'USA', 'Canada', 'Australia', 'Germany']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="formData.language"
|
||||
label="Language"
|
||||
placeholder="Select Language"
|
||||
:items="['English', 'Spanish', 'French', 'Russian', 'German']"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
Social Links
|
||||
</h6>
|
||||
<p class="text-xs mb-0">
|
||||
Add Social Links
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.twitter"
|
||||
placeholder="https://twitter.com/abc"
|
||||
label="Twitter"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.facebook"
|
||||
placeholder="https://facebook.com/abc"
|
||||
label="Facebook"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.googlePlus"
|
||||
placeholder="https://plus.google.com/abc"
|
||||
label="Google+"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="formData.linkedIn"
|
||||
placeholder="https://linkedin.com/abc"
|
||||
label="LinkedIn"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
|
||||
<div class="d-flex flex-wrap gap-4 justify-sm-space-between justify-center mt-8">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
:disabled="currentStep === 0"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-if="numberedSteps.length - 1 === currentStep"
|
||||
color="success"
|
||||
append-icon="ri-check-line"
|
||||
@click="onSubmit"
|
||||
>
|
||||
submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
@click="currentStep++"
|
||||
>
|
||||
Next
|
||||
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user