2024-02-20 14:56:58 +00:00
|
|
|
<template>
|
|
|
|
|
<DocSectionText v-bind="$attrs">
|
2024-06-12 21:12:30 +00:00
|
|
|
<p>
|
|
|
|
|
Custom content for a step is defined with the default slot. The optional <i>as</i> property controls the default container element of a step, for example setting it to a <i>button</i> renders a button for the header instead of a div. The
|
|
|
|
|
<i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own step.
|
|
|
|
|
</p>
|
2024-02-20 14:56:58 +00:00
|
|
|
</DocSectionText>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="card flex justify-center">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Stepper v-model:value="activeStep" class="basis-[40rem]">
|
|
|
|
|
<StepList>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
|
|
|
|
|
<div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-user" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<Divider />
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
|
|
|
|
|
<div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-star" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<Divider />
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
|
|
|
|
|
<div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-id-card" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
</StepList>
|
|
|
|
|
<StepPanels>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="1">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
2024-02-20 14:56:58 +00:00
|
|
|
<div class="field p-fluid">
|
2024-06-04 06:23:16 +00:00
|
|
|
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="field p-fluid">
|
2024-06-04 06:23:16 +00:00
|
|
|
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="field p-fluid">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Password v-model="password" placeholder="Password" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-end">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="2">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4">
|
2024-02-22 09:35:09 +00:00
|
|
|
<ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
|
|
|
|
|
<ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
|
|
|
|
|
<ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
|
|
|
|
|
<ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
|
|
|
|
|
<ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
|
|
|
|
|
<ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
|
|
|
|
|
<ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
|
|
|
|
|
<ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
|
|
|
|
|
<ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
|
|
|
|
|
<ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-between">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
|
|
|
|
|
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="3">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
|
2024-02-22 09:35:09 +00:00
|
|
|
<div class="text-center">
|
|
|
|
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-start">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
</StepPanels>
|
2024-02-20 14:56:58 +00:00
|
|
|
</Stepper>
|
|
|
|
|
</div>
|
|
|
|
|
<DocSectionCode :code="code" />
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
2024-06-04 06:23:16 +00:00
|
|
|
activeStep: 1,
|
2024-02-20 14:56:58 +00:00
|
|
|
name: null,
|
|
|
|
|
email: null,
|
|
|
|
|
password: null,
|
|
|
|
|
option1: false,
|
2024-02-22 09:35:09 +00:00
|
|
|
option2: false,
|
2024-02-20 14:56:58 +00:00
|
|
|
option3: false,
|
2024-02-22 09:35:09 +00:00
|
|
|
option4: false,
|
2024-02-20 14:56:58 +00:00
|
|
|
option5: false,
|
2024-02-22 09:35:09 +00:00
|
|
|
option6: false,
|
|
|
|
|
option7: false,
|
|
|
|
|
option8: false,
|
|
|
|
|
option9: false,
|
|
|
|
|
option10: false,
|
2024-02-20 14:56:58 +00:00
|
|
|
code: {
|
|
|
|
|
basic: `
|
2024-06-04 06:23:16 +00:00
|
|
|
<Stepper v-model:value="activeStep" class="basis-[40rem]">
|
|
|
|
|
<StepList>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
|
|
|
|
|
<div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-user" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<Divider />
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
|
|
|
|
|
<div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-star" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<Divider />
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
|
|
|
|
|
<div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-id-card" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
</StepList>
|
|
|
|
|
<StepPanels>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="1">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
<div class="field p-fluid">
|
|
|
|
|
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field p-fluid">
|
|
|
|
|
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
|
|
|
|
</div>
|
2024-02-20 14:56:58 +00:00
|
|
|
<div class="field p-fluid">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Password v-model="password" placeholder="Password" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-end">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="2">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4">
|
2024-02-22 09:35:09 +00:00
|
|
|
<ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
|
|
|
|
|
<ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
|
|
|
|
|
<ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
|
|
|
|
|
<ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
|
|
|
|
|
<ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
|
|
|
|
|
<ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
|
|
|
|
|
<ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
|
|
|
|
|
<ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
|
|
|
|
|
<ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
|
|
|
|
|
<ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-between">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
|
|
|
|
|
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="3">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
|
2024-02-22 09:35:09 +00:00
|
|
|
<div class="text-center">
|
|
|
|
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
|
|
|
|
|
</div>
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-start">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
</StepPanels>
|
2024-02-20 14:56:58 +00:00
|
|
|
</Stepper>
|
|
|
|
|
`,
|
|
|
|
|
options: `
|
|
|
|
|
<template>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="card flex justify-center">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Stepper v-model:value="activeStep" class="basis-[40rem]">
|
|
|
|
|
<StepList>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
|
|
|
|
|
<div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-user" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<Divider />
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
|
|
|
|
|
<div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-star" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<Divider />
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
|
|
|
|
|
<div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-id-card" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
</StepList>
|
|
|
|
|
<StepPanels>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="1">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
2024-02-20 14:56:58 +00:00
|
|
|
<div class="field p-fluid">
|
2024-06-04 06:23:16 +00:00
|
|
|
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="field p-fluid">
|
2024-06-04 06:23:16 +00:00
|
|
|
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="field p-fluid">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Password v-model="password" placeholder="Password" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-end">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="2">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4">
|
2024-02-22 09:35:09 +00:00
|
|
|
<ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
|
|
|
|
|
<ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
|
|
|
|
|
<ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
|
|
|
|
|
<ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
|
|
|
|
|
<ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
|
|
|
|
|
<ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
|
|
|
|
|
<ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
|
|
|
|
|
<ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
|
|
|
|
|
<ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
|
|
|
|
|
<ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-between">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
|
|
|
|
|
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="3">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
|
2024-02-22 09:35:09 +00:00
|
|
|
<div class="text-center">
|
|
|
|
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-start">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
</StepPanels>
|
|
|
|
|
</Stepper>
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
2024-06-04 06:23:16 +00:00
|
|
|
activeStep: 1,
|
2024-02-20 14:56:58 +00:00
|
|
|
name: null,
|
|
|
|
|
email: null,
|
|
|
|
|
password: null,
|
|
|
|
|
option1: false,
|
2024-02-22 09:35:09 +00:00
|
|
|
option2: false,
|
2024-02-20 14:56:58 +00:00
|
|
|
option3: false,
|
2024-02-22 09:35:09 +00:00
|
|
|
option4: false,
|
2024-02-20 14:56:58 +00:00
|
|
|
option5: false,
|
2024-02-22 09:35:09 +00:00
|
|
|
option6: false,
|
|
|
|
|
option7: false,
|
|
|
|
|
option8: false,
|
|
|
|
|
option9: false,
|
|
|
|
|
option10: false
|
2024-02-20 14:56:58 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
<\/script>
|
|
|
|
|
`,
|
|
|
|
|
composition: `
|
|
|
|
|
<template>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="card flex justify-center">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Stepper v-model:value="activeStep" class="basis-[40rem]">
|
|
|
|
|
<StepList>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
|
|
|
|
|
<div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-user" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<Divider />
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
|
|
|
|
|
<div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-star" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<Divider />
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
|
|
|
|
|
<div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
|
|
|
|
|
<button class="bg-transparent border-0 inline-flex flex-col gap-2" @click="activateCallback" v-bind="a11yAttrs.header">
|
|
|
|
|
<span
|
|
|
|
|
:class="[
|
|
|
|
|
'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
|
|
|
|
|
{ 'bg-primary text-primary-contrast border-primary': value <= activeStep, 'border-surface-200 dark:border-surface-700': value > activeStep }
|
|
|
|
|
]"
|
|
|
|
|
>
|
|
|
|
|
<i class="pi pi-id-card" />
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</Step>
|
|
|
|
|
</StepList>
|
|
|
|
|
<StepPanels>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="1">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
2024-02-20 14:56:58 +00:00
|
|
|
<div class="field p-fluid">
|
2024-06-04 06:23:16 +00:00
|
|
|
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="field p-fluid">
|
2024-06-04 06:23:16 +00:00
|
|
|
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="field p-fluid">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Password v-model="password" placeholder="Password" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-end">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(2)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="2">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Choose your interests</div>
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4">
|
2024-02-22 09:35:09 +00:00
|
|
|
<ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
|
|
|
|
|
<ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
|
|
|
|
|
<ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
|
|
|
|
|
<ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
|
|
|
|
|
<ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
|
|
|
|
|
<ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
|
|
|
|
|
<ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
|
|
|
|
|
<ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
|
|
|
|
|
<ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
|
|
|
|
|
<ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-between">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
|
|
|
|
|
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
<StepPanel v-slot="{ activateCallback }" :value="3">
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
|
|
|
|
|
<div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
|
2024-02-22 09:35:09 +00:00
|
|
|
<div class="text-center">
|
|
|
|
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:14:38 +00:00
|
|
|
<div class="flex pt-6 justify-start">
|
2024-06-04 06:23:16 +00:00
|
|
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
|
2024-02-20 14:56:58 +00:00
|
|
|
</div>
|
2024-06-04 06:23:16 +00:00
|
|
|
</StepPanel>
|
|
|
|
|
</StepPanels>
|
2024-02-20 14:56:58 +00:00
|
|
|
</Stepper>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { ref } from 'vue';
|
|
|
|
|
|
2024-06-04 06:23:16 +00:00
|
|
|
const activeStep = ref(1);
|
2024-02-20 14:56:58 +00:00
|
|
|
const completed = ref(false);
|
|
|
|
|
const products = ref();
|
|
|
|
|
const name = ref();
|
|
|
|
|
const email = ref();
|
|
|
|
|
const password = ref();
|
|
|
|
|
const option1 = ref(false);
|
2024-02-22 09:35:09 +00:00
|
|
|
const option2 = ref(false);
|
2024-02-20 14:56:58 +00:00
|
|
|
const option3 = ref(false);
|
2024-02-22 09:35:09 +00:00
|
|
|
const option4 = ref(false);
|
2024-02-20 14:56:58 +00:00
|
|
|
const option5 = ref(false);
|
2024-02-22 09:35:09 +00:00
|
|
|
const option6 = ref(false);
|
|
|
|
|
const option7 = ref(false);
|
|
|
|
|
const option8 = ref(false);
|
|
|
|
|
const option9 = ref(false);
|
|
|
|
|
const option10 = ref(false);
|
2024-02-20 14:56:58 +00:00
|
|
|
|
|
|
|
|
<\/script>
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
