Stepper demo updated
tugcekucukoglu
parent
ee7515056b
commit
9a416252a7
|
|
@ -4,37 +4,36 @@
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Stepper>
|
<Stepper>
|
||||||
<StepperPanel header="Header 1">
|
<StepperPanel header="Header I">
|
||||||
<template #content="{ nextCallback }">
|
|
||||||
<p class="m-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-2 justify-content-end">
|
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel header="Header 2">
|
|
||||||
<template #content="{ prevCallback, nextCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex pt-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
<StepperPanel header="Header 3">
|
<StepperPanel header="Header II">
|
||||||
<template #content="{ prevCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex pt-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel header="Header III">
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column h-12rem">
|
||||||
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
|
|
@ -50,37 +49,36 @@ export default {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<Stepper>
|
<Stepper>
|
||||||
<StepperPanel header="Header 1">
|
<StepperPanel header="Header I">
|
||||||
<template #content="{ nextCallback }">
|
|
||||||
<p class="m-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-2 justify-content-end">
|
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel header="Header 2">
|
|
||||||
<template #content="{ prevCallback, nextCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex pt-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
<StepperPanel header="Header 3">
|
<StepperPanel header="Header II">
|
||||||
<template #content="{ prevCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex pt-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel header="Header III">
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column h-12rem">
|
||||||
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
|
|
@ -90,37 +88,36 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Stepper>
|
<Stepper>
|
||||||
<StepperPanel header="Header 1">
|
<StepperPanel header="Header I">
|
||||||
<template #content="{ nextCallback }">
|
|
||||||
<p class="m-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-2 justify-content-end">
|
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel header="Header 2">
|
|
||||||
<template #content="{ prevCallback, nextCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex pt-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
<StepperPanel header="Header 3">
|
<StepperPanel header="Header II">
|
||||||
<template #content="{ prevCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex pt-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel header="Header III">
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column h-12rem">
|
||||||
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
|
|
@ -132,37 +129,36 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Stepper>
|
<Stepper>
|
||||||
<StepperPanel header="Header 1">
|
<StepperPanel header="Header I">
|
||||||
<template #content="{ nextCallback }">
|
|
||||||
<p class="m-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-2 justify-content-end">
|
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel header="Header 2">
|
|
||||||
<template #content="{ prevCallback, nextCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex pt-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
<StepperPanel header="Header 3">
|
<StepperPanel header="Header II">
|
||||||
<template #content="{ prevCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex pt-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel header="Header III">
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column h-12rem">
|
||||||
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,483 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex flex-column justify-content-center">
|
||||||
|
<Stepper v-model:activeStep="active">
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Account</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
|
||||||
|
<h3 class="text-center mt-3">Create your account</h3>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon>
|
||||||
|
<i class="pi pi-user" />
|
||||||
|
</InputIcon>
|
||||||
|
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||||
|
</IconField>
|
||||||
|
</div>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon>
|
||||||
|
<i class="pi pi-envelope" />
|
||||||
|
</InputIcon>
|
||||||
|
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||||
|
</IconField>
|
||||||
|
</div>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<Password v-model="password" toggleMask placeholder="Password" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Interests</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
|
||||||
|
<h3 class="text-center mt-3">Create your interests</h3>
|
||||||
|
<div class="flex flex-wrap justify-content-center gap-3">
|
||||||
|
<ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
|
||||||
|
<ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
|
||||||
|
<ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
|
||||||
|
<ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
|
||||||
|
<ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
|
||||||
|
<ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
|
||||||
|
<ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
|
||||||
|
<ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Complete</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
|
||||||
|
<h3 class="text-center mt-3 mb-6">Account created successfully</h3>
|
||||||
|
<div class="flex justify-content-center">
|
||||||
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
</Stepper>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: 0,
|
||||||
|
name: null,
|
||||||
|
email: null,
|
||||||
|
password: null,
|
||||||
|
option1: false,
|
||||||
|
option2: true,
|
||||||
|
option3: false,
|
||||||
|
option4: true,
|
||||||
|
option5: false,
|
||||||
|
option6: true,
|
||||||
|
option7: true,
|
||||||
|
option8: true,
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<Stepper v-model:activeStep="active">
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Account</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
|
||||||
|
<h3 class="text-center mt-3">Create your account</h3>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon>
|
||||||
|
<i class="pi pi-user" />
|
||||||
|
</InputIcon>
|
||||||
|
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||||
|
</IconField>
|
||||||
|
</div>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon>
|
||||||
|
<i class="pi pi-envelope" />
|
||||||
|
</InputIcon>
|
||||||
|
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||||
|
</IconField>
|
||||||
|
</div>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<Password v-model="password" toggleMask placeholder="Password" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Interests</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
|
||||||
|
<h3 class="text-center mt-3">Create your interests</h3>
|
||||||
|
<div class="flex flex-wrap justify-content-center gap-3">
|
||||||
|
<ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
|
||||||
|
<ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
|
||||||
|
<ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
|
||||||
|
<ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
|
||||||
|
<ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
|
||||||
|
<ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
|
||||||
|
<ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
|
||||||
|
<ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Complete</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
|
||||||
|
<h3 class="text-center mt-3 mb-6">Account created successfully</h3>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
</Stepper>
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex flex-column justify-content-center">
|
||||||
|
<Stepper v-model:activeStep="active">
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Account</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
|
||||||
|
<h3 class="text-center mt-3">Create your account</h3>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon>
|
||||||
|
<i class="pi pi-user" />
|
||||||
|
</InputIcon>
|
||||||
|
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||||
|
</IconField>
|
||||||
|
</div>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon>
|
||||||
|
<i class="pi pi-envelope" />
|
||||||
|
</InputIcon>
|
||||||
|
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||||
|
</IconField>
|
||||||
|
</div>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<Password v-model="password" toggleMask placeholder="Password" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Interests</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
|
||||||
|
<h3 class="text-center mt-3">Create your interests</h3>
|
||||||
|
<div class="flex flex-wrap justify-content-center gap-3">
|
||||||
|
<ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
|
||||||
|
<ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
|
||||||
|
<ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
|
||||||
|
<ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
|
||||||
|
<ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
|
||||||
|
<ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
|
||||||
|
<ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
|
||||||
|
<ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Complete</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
|
||||||
|
<h3 class="text-center mt-3 mb-6">Account created successfully</h3>
|
||||||
|
<div class="flex justify-content-center">
|
||||||
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
</Stepper>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: 0,
|
||||||
|
name: null,
|
||||||
|
email: null,
|
||||||
|
password: null,
|
||||||
|
option1: false,
|
||||||
|
option2: true,
|
||||||
|
option3: false,
|
||||||
|
option4: true,
|
||||||
|
option5: false,
|
||||||
|
option6: true,
|
||||||
|
option7: true,
|
||||||
|
option8: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex flex-column justify-content-center">
|
||||||
|
<Stepper v-model:activeStep="active">
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Account</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
|
||||||
|
<h3 class="text-center mt-3">Create your account</h3>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon>
|
||||||
|
<i class="pi pi-user" />
|
||||||
|
</InputIcon>
|
||||||
|
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||||
|
</IconField>
|
||||||
|
</div>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon>
|
||||||
|
<i class="pi pi-envelope" />
|
||||||
|
</InputIcon>
|
||||||
|
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||||
|
</IconField>
|
||||||
|
</div>
|
||||||
|
<div class="field p-fluid">
|
||||||
|
<Password v-model="password" toggleMask placeholder="Password" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Interests</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
|
||||||
|
<h3 class="text-center mt-3">Create your interests</h3>
|
||||||
|
<div class="flex flex-wrap justify-content-center gap-3">
|
||||||
|
<ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
|
||||||
|
<ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
|
||||||
|
<ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
|
||||||
|
<ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
|
||||||
|
<ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
|
||||||
|
<ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
|
||||||
|
<ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
|
||||||
|
<ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel>
|
||||||
|
<template #header="{ index, clickCallback, headerClass, numberClass }">
|
||||||
|
<div :class="headerClass" @click="clickCallback">
|
||||||
|
<span :class="[numberClass, 'text-color']">
|
||||||
|
<i v-if="index < active" class="pi pi-check font-semibold" />
|
||||||
|
<template v-else>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span class="text-base ml-2">Complete</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
|
||||||
|
<h3 class="text-center mt-3 mb-6">Account created successfully</h3>
|
||||||
|
<div class="flex justify-content-center">
|
||||||
|
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
</Stepper>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const active = ref(0);
|
||||||
|
const completed = ref(false);
|
||||||
|
const products = ref();
|
||||||
|
const name = ref();
|
||||||
|
const email = ref();
|
||||||
|
const password = ref();
|
||||||
|
const option1 = ref(false);
|
||||||
|
const option2 = ref(true);
|
||||||
|
const option3 = ref(false);
|
||||||
|
const option4 = ref(true);
|
||||||
|
const option5 = ref(false);
|
||||||
|
const option6 = ref(true);
|
||||||
|
const option7 = ref(true);
|
||||||
|
const option8 = ref(true);
|
||||||
|
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -1,740 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card flex flex-column justify-content-center">
|
|
||||||
<Stepper
|
|
||||||
v-model:activeStep="active"
|
|
||||||
:pt="{
|
|
||||||
stepperpanel: {
|
|
||||||
separator: ({ context }) => ({
|
|
||||||
style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
|
|
||||||
<span class="text-lg ml-2">Account</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
|
|
||||||
<h3 class="text-center mt-3">Personal Details</h3>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<IconField>
|
|
||||||
<InputIcon>
|
|
||||||
<i class="pi pi-user" />
|
|
||||||
</InputIcon>
|
|
||||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
|
||||||
</IconField>
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<IconField>
|
|
||||||
<InputIcon>
|
|
||||||
<i class="pi pi-envelope" />
|
|
||||||
</InputIcon>
|
|
||||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
|
||||||
</IconField>
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<InputText v-model="password" type="text" placeholder="Password" />
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar
|
|
||||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
|
|
||||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
|
||||||
size="large"
|
|
||||||
shape="circle"
|
|
||||||
/>
|
|
||||||
<span class="text-lg ml-2">Cart</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<DataView :value="products">
|
|
||||||
<template #header>
|
|
||||||
<h3 class="text-center">Cart Details</h3>
|
|
||||||
</template>
|
|
||||||
<template #list="slotProps">
|
|
||||||
<div class="grid grid-nogutter">
|
|
||||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
|
||||||
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
|
||||||
<div class="md:w-10rem relative">
|
|
||||||
<img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
|
|
||||||
<div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
|
|
||||||
<div>
|
|
||||||
<span class="font-medium text-secondary text-sm">{{ item.category }}</span>
|
|
||||||
<div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="surface-100 p-1" style="border-radius: 30px">
|
|
||||||
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
|
||||||
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
|
|
||||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-column md:align-items-end gap-5">
|
|
||||||
<span class="text-xl font-semibold text-900">${{ item.price }}</span>
|
|
||||||
<div class="flex flex-row-reverse md:flex-row gap-2">
|
|
||||||
<InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
|
|
||||||
<template #incrementbuttonicon>
|
|
||||||
<span class="pi pi-plus" />
|
|
||||||
</template>
|
|
||||||
<template #decrementbuttonicon>
|
|
||||||
<span class="pi pi-minus" />
|
|
||||||
</template>
|
|
||||||
</InputNumber>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</DataView>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar
|
|
||||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
|
|
||||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
|
||||||
size="large"
|
|
||||||
shape="circle"
|
|
||||||
/>
|
|
||||||
<span class="text-lg ml-2">Billing</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<h3 class="text-center mt-3">Payment</h3>
|
|
||||||
<div class="grid formgrid p-fluid">
|
|
||||||
<div class="col-12 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">Card Number</label>
|
|
||||||
<InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 lg:col-6 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
|
|
||||||
<InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 lg:col-6 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">CVC</label>
|
|
||||||
<InputMask v-model="cvc" mask="999" placeholder="999" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 field mb-0">
|
|
||||||
<label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
|
|
||||||
<InputText id="holderName" type="text" class="w-full mb-3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StepperPanel>
|
|
||||||
<template #end>
|
|
||||||
<div v-if="!completed" class="flex justify-content-end gap-2">
|
|
||||||
<Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
|
|
||||||
<Button v-if="active !== 2" label="Continue" @click="active += 1" />
|
|
||||||
<Button
|
|
||||||
v-if="active === 2"
|
|
||||||
label="Complete"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
active = null;
|
|
||||||
completed = true;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else class="flex flex-column justify-content-center mx-auto">
|
|
||||||
<Message severity="success">The order was submitted successfully.</Message>
|
|
||||||
<Button
|
|
||||||
label="New Order"
|
|
||||||
class="w-10rem mx-auto"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
active = 0;
|
|
||||||
completed = false;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Stepper>
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { ProductService } from '@/service/ProductService';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 0,
|
|
||||||
completed: false,
|
|
||||||
products: null,
|
|
||||||
name: null,
|
|
||||||
email: null,
|
|
||||||
password: null,
|
|
||||||
cpassword: null,
|
|
||||||
quantity: [1, 2],
|
|
||||||
cc: null,
|
|
||||||
cvc: null,
|
|
||||||
exp: null,
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<Stepper
|
|
||||||
v-model:activeStep="active"
|
|
||||||
:pt="{
|
|
||||||
stepperpanel: {
|
|
||||||
separator: ({ context }) => ({
|
|
||||||
style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
|
|
||||||
<span class="text-lg ml-2">Account</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
|
|
||||||
<h3 class="text-center mt-3">Personal Details</h3>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<IconField>
|
|
||||||
<InputIcon>
|
|
||||||
<i class="pi pi-user" />
|
|
||||||
</InputIcon>
|
|
||||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
|
||||||
</IconField>
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<IconField>
|
|
||||||
<InputIcon>
|
|
||||||
<i class="pi pi-envelope" />
|
|
||||||
</InputIcon>
|
|
||||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
|
||||||
</IconField>
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<InputText v-model="password" type="text" placeholder="Password" />
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar
|
|
||||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
|
|
||||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
|
||||||
size="large"
|
|
||||||
shape="circle"
|
|
||||||
/>
|
|
||||||
<span class="text-lg ml-2">Cart</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<DataView :value="products">
|
|
||||||
<template #header>
|
|
||||||
<h3 class="text-center">Cart Details</h3>
|
|
||||||
</template>
|
|
||||||
<template #list="slotProps">
|
|
||||||
<div class="grid grid-nogutter">
|
|
||||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
|
||||||
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
|
||||||
<div class="md:w-10rem relative">
|
|
||||||
<img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
|
|
||||||
<div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
|
|
||||||
<div>
|
|
||||||
<span class="font-medium text-secondary text-sm">{{ item.category }}</span>
|
|
||||||
<div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="surface-100 p-1" style="border-radius: 30px">
|
|
||||||
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
|
||||||
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
|
|
||||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-column md:align-items-end gap-5">
|
|
||||||
<span class="text-xl font-semibold text-900">\${{ item.price }}</span>
|
|
||||||
<div class="flex flex-row-reverse md:flex-row gap-2">
|
|
||||||
<InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
|
|
||||||
<template #incrementbuttonicon>
|
|
||||||
<span class="pi pi-plus" />
|
|
||||||
</template>
|
|
||||||
<template #decrementbuttonicon>
|
|
||||||
<span class="pi pi-minus" />
|
|
||||||
</template>
|
|
||||||
</InputNumber>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</DataView>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar
|
|
||||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
|
|
||||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
|
||||||
size="large"
|
|
||||||
shape="circle"
|
|
||||||
/>
|
|
||||||
<span class="text-lg ml-2">Billing</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<h3 class="text-center mt-3">Payment</h3>
|
|
||||||
<div class="grid formgrid p-fluid">
|
|
||||||
<div class="col-12 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">Card Number</label>
|
|
||||||
<InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 lg:col-6 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
|
|
||||||
<InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 lg:col-6 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">CVC</label>
|
|
||||||
<InputMask v-model="cvc" mask="999" placeholder="999" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 field mb-0">
|
|
||||||
<label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
|
|
||||||
<InputText id="holderName" type="text" class="w-full mb-3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StepperPanel>
|
|
||||||
<template #end>
|
|
||||||
<div v-if="!completed" class="flex justify-content-end gap-2">
|
|
||||||
<Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
|
|
||||||
<Button v-if="active !== 2" label="Continue" @click="active += 1" />
|
|
||||||
<Button
|
|
||||||
v-if="active === 2"
|
|
||||||
label="Complete"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
active = null;
|
|
||||||
completed = true;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else class="flex flex-column justify-content-center mx-auto">
|
|
||||||
<Message severity="success">The order was submitted successfully.</Message>
|
|
||||||
<Button
|
|
||||||
label="New Order"
|
|
||||||
class="w-10rem mx-auto"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
active = 0;
|
|
||||||
completed = false;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Stepper>
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card flex flex-column justify-content-center">
|
|
||||||
<Stepper
|
|
||||||
v-model:activeStep="active"
|
|
||||||
:pt="{
|
|
||||||
stepperpanel: {
|
|
||||||
separator: ({ context }) => ({
|
|
||||||
style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
|
|
||||||
<span class="text-lg ml-2">Account</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
|
|
||||||
<h3 class="text-center mt-3">Personal Details</h3>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<IconField>
|
|
||||||
<InputIcon>
|
|
||||||
<i class="pi pi-user" />
|
|
||||||
</InputIcon>
|
|
||||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
|
||||||
</IconField>
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<IconField>
|
|
||||||
<InputIcon>
|
|
||||||
<i class="pi pi-envelope" />
|
|
||||||
</InputIcon>
|
|
||||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
|
||||||
</IconField>
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<InputText v-model="password" type="text" placeholder="Password" />
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar
|
|
||||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
|
|
||||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
|
||||||
size="large"
|
|
||||||
shape="circle"
|
|
||||||
/>
|
|
||||||
<span class="text-lg ml-2">Cart</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<DataView :value="products">
|
|
||||||
<template #header>
|
|
||||||
<h3 class="text-center">Cart Details</h3>
|
|
||||||
</template>
|
|
||||||
<template #list="slotProps">
|
|
||||||
<div class="grid grid-nogutter">
|
|
||||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
|
||||||
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
|
||||||
<div class="md:w-10rem relative">
|
|
||||||
<img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
|
|
||||||
<div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
|
|
||||||
<div>
|
|
||||||
<span class="font-medium text-secondary text-sm">{{ item.category }}</span>
|
|
||||||
<div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="surface-100 p-1" style="border-radius: 30px">
|
|
||||||
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
|
||||||
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
|
|
||||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-column md:align-items-end gap-5">
|
|
||||||
<span class="text-xl font-semibold text-900">\${{ item.price }}</span>
|
|
||||||
<div class="flex flex-row-reverse md:flex-row gap-2">
|
|
||||||
<InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
|
|
||||||
<template #incrementbuttonicon>
|
|
||||||
<span class="pi pi-plus" />
|
|
||||||
</template>
|
|
||||||
<template #decrementbuttonicon>
|
|
||||||
<span class="pi pi-minus" />
|
|
||||||
</template>
|
|
||||||
</InputNumber>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</DataView>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar
|
|
||||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
|
|
||||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
|
||||||
size="large"
|
|
||||||
shape="circle"
|
|
||||||
/>
|
|
||||||
<span class="text-lg ml-2">Billing</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<h3 class="text-center mt-3">Payment</h3>
|
|
||||||
<div class="grid formgrid p-fluid">
|
|
||||||
<div class="col-12 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">Card Number</label>
|
|
||||||
<InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 lg:col-6 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
|
|
||||||
<InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 lg:col-6 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">CVC</label>
|
|
||||||
<InputMask v-model="cvc" mask="999" placeholder="999" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 field mb-0">
|
|
||||||
<label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
|
|
||||||
<InputText id="holderName" type="text" class="w-full mb-3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StepperPanel>
|
|
||||||
<template #end>
|
|
||||||
<div v-if="!completed" class="flex justify-content-end gap-2">
|
|
||||||
<Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
|
|
||||||
<Button v-if="active !== 2" label="Continue" @click="active += 1" />
|
|
||||||
<Button
|
|
||||||
v-if="active === 2"
|
|
||||||
label="Complete"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
active = null;
|
|
||||||
completed = true;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else class="flex flex-column justify-content-center mx-auto">
|
|
||||||
<Message severity="success">The order was submitted successfully.</Message>
|
|
||||||
<Button
|
|
||||||
label="New Order"
|
|
||||||
class="w-10rem mx-auto"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
active = 0;
|
|
||||||
completed = false;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Stepper>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { ProductService } from '@/service/ProductService';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 0,
|
|
||||||
completed: false,
|
|
||||||
products: null,
|
|
||||||
name: null,
|
|
||||||
email: null,
|
|
||||||
password: null,
|
|
||||||
cpassword: null,
|
|
||||||
quantity: [1, 2],
|
|
||||||
cc: null,
|
|
||||||
cvc: null,
|
|
||||||
exp: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 2)));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card flex flex-column justify-content-center">
|
|
||||||
<Stepper
|
|
||||||
v-model:activeStep="active"
|
|
||||||
:pt="{
|
|
||||||
stepperpanel: {
|
|
||||||
separator: ({ context }) => ({
|
|
||||||
style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
|
|
||||||
<span class="text-lg ml-2">Account</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
|
|
||||||
<h3 class="text-center mt-3">Personal Details</h3>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<IconField>
|
|
||||||
<InputIcon>
|
|
||||||
<i class="pi pi-user" />
|
|
||||||
</InputIcon>
|
|
||||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
|
||||||
</IconField>
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<IconField>
|
|
||||||
<InputIcon>
|
|
||||||
<i class="pi pi-envelope" />
|
|
||||||
</InputIcon>
|
|
||||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
|
||||||
</IconField>
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<InputText v-model="password" type="text" placeholder="Password" />
|
|
||||||
</div>
|
|
||||||
<div class="field p-fluid">
|
|
||||||
<InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar
|
|
||||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
|
|
||||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
|
||||||
size="large"
|
|
||||||
shape="circle"
|
|
||||||
/>
|
|
||||||
<span class="text-lg ml-2">Cart</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<DataView :value="products">
|
|
||||||
<template #header>
|
|
||||||
<h3 class="text-center">Cart Details</h3>
|
|
||||||
</template>
|
|
||||||
<template #list="slotProps">
|
|
||||||
<div class="grid grid-nogutter">
|
|
||||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
|
||||||
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
|
||||||
<div class="md:w-10rem relative">
|
|
||||||
<img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
|
|
||||||
<div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
|
|
||||||
<div>
|
|
||||||
<span class="font-medium text-secondary text-sm">{{ item.category }}</span>
|
|
||||||
<div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="surface-100 p-1" style="border-radius: 30px">
|
|
||||||
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
|
||||||
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
|
|
||||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-column md:align-items-end gap-5">
|
|
||||||
<span class="text-xl font-semibold text-900">\${{ item.price }}</span>
|
|
||||||
<div class="flex flex-row-reverse md:flex-row gap-2">
|
|
||||||
<InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
|
|
||||||
<template #incrementbuttonicon>
|
|
||||||
<span class="pi pi-plus" />
|
|
||||||
</template>
|
|
||||||
<template #decrementbuttonicon>
|
|
||||||
<span class="pi pi-minus" />
|
|
||||||
</template>
|
|
||||||
</InputNumber>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</DataView>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel>
|
|
||||||
<template #header="slotProps">
|
|
||||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
|
||||||
<Avatar
|
|
||||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
|
|
||||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
|
||||||
size="large"
|
|
||||||
shape="circle"
|
|
||||||
/>
|
|
||||||
<span class="text-lg ml-2">Billing</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<h3 class="text-center mt-3">Payment</h3>
|
|
||||||
<div class="grid formgrid p-fluid">
|
|
||||||
<div class="col-12 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">Card Number</label>
|
|
||||||
<InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 lg:col-6 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
|
|
||||||
<InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 lg:col-6 field mb-4">
|
|
||||||
<label class="text-900 font-medium mb-3 ml-1">CVC</label>
|
|
||||||
<InputMask v-model="cvc" mask="999" placeholder="999" />
|
|
||||||
</div>
|
|
||||||
<div class="col-12 field mb-0">
|
|
||||||
<label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
|
|
||||||
<InputText id="holderName" type="text" class="w-full mb-3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StepperPanel>
|
|
||||||
<template #end>
|
|
||||||
<div v-if="!completed" class="flex justify-content-end gap-2">
|
|
||||||
<Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
|
|
||||||
<Button v-if="active !== 2" label="Continue" @click="active += 1" />
|
|
||||||
<Button
|
|
||||||
v-if="active === 2"
|
|
||||||
label="Complete"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
active = null;
|
|
||||||
completed = true;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else class="flex flex-column justify-content-center mx-auto">
|
|
||||||
<Message severity="success">The order was submitted successfully.</Message>
|
|
||||||
<Button
|
|
||||||
label="New Order"
|
|
||||||
class="w-10rem mx-auto"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
active = 0;
|
|
||||||
completed = false;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Stepper>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted } from 'vue';
|
|
||||||
import { ProductService } from '@/service/ProductService';
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
|
|
||||||
});
|
|
||||||
|
|
||||||
const active = ref(0);
|
|
||||||
const completed = ref(false);
|
|
||||||
const products = ref();
|
|
||||||
const name = ref();
|
|
||||||
const email = ref();
|
|
||||||
const password = ref();
|
|
||||||
const cpassword = ref();
|
|
||||||
const quantity = ref([1, 2]);
|
|
||||||
const cc = ref();
|
|
||||||
const cvc = ref();
|
|
||||||
const exp = ref();
|
|
||||||
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 2)));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -4,37 +4,36 @@
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Stepper orientation="vertical">
|
<Stepper orientation="vertical">
|
||||||
<StepperPanel header="Header 1">
|
<StepperPanel header="Header I">
|
||||||
<template #content="{ nextCallback }">
|
|
||||||
<p class="m-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-2 justify-content-end">
|
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel header="Header 2">
|
|
||||||
<template #content="{ prevCallback, nextCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex py-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
<StepperPanel header="Header 3">
|
<StepperPanel header="Header II">
|
||||||
<template #content="{ prevCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex py-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel header="Header III">
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column h-12rem">
|
||||||
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex py-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
|
|
@ -50,37 +49,36 @@ export default {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<Stepper orientation="vertical">
|
<Stepper orientation="vertical">
|
||||||
<StepperPanel header="Header 1">
|
<StepperPanel header="Header I">
|
||||||
<template #content="{ nextCallback }">
|
|
||||||
<p class="m-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-2 justify-content-end">
|
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel header="Header 2">
|
|
||||||
<template #content="{ prevCallback, nextCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex py-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
<StepperPanel header="Header 3">
|
<StepperPanel header="Header II">
|
||||||
<template #content="{ prevCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex py-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel header="Header III">
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column h-12rem">
|
||||||
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex py-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
|
|
@ -90,37 +88,36 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Stepper orientation="vertical">
|
<Stepper orientation="vertical">
|
||||||
<StepperPanel header="Header 1">
|
<StepperPanel header="Header I">
|
||||||
<template #content="{ nextCallback }">
|
|
||||||
<p class="m-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-2 justify-content-end">
|
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel header="Header 2">
|
|
||||||
<template #content="{ prevCallback, nextCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex py-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
<StepperPanel header="Header 3">
|
<StepperPanel header="Header II">
|
||||||
<template #content="{ prevCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex py-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel header="Header III">
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column h-12rem">
|
||||||
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex py-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
|
|
@ -132,37 +129,36 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Stepper orientation="vertical">
|
<Stepper orientation="vertical">
|
||||||
<StepperPanel header="Header 1">
|
<StepperPanel header="Header I">
|
||||||
<template #content="{ nextCallback }">
|
|
||||||
<p class="m-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-2 justify-content-end">
|
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</StepperPanel>
|
|
||||||
<StepperPanel header="Header 2">
|
|
||||||
<template #content="{ prevCallback, nextCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex py-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
<StepperPanel header="Header 3">
|
<StepperPanel header="Header II">
|
||||||
<template #content="{ prevCallback }">
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
<p class="m-0">
|
<div class="flex flex-column h-12rem">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
</div>
|
||||||
</p>
|
<div class="flex py-4 justify-content-between">
|
||||||
<div class="flex gap-2 justify-content-end">
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</StepperPanel>
|
||||||
|
<StepperPanel header="Header III">
|
||||||
|
<template #content="{ prevCallback, nextCallback }">
|
||||||
|
<div class="flex flex-column h-12rem">
|
||||||
|
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex py-4 justify-content-between">
|
||||||
|
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
|
||||||
|
<Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</StepperPanel>
|
</StepperPanel>
|
||||||
|
|
|
||||||
|
|
@ -22,10 +22,6 @@
|
||||||
<td>p-stepper-vertical</td>
|
<td>p-stepper-vertical</td>
|
||||||
<td>Container element with vertical layout.</td>
|
<td>Container element with vertical layout.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td>p-stepper-nav-container</td>
|
|
||||||
<td>Container element of navigator container.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-stepper-nav</td>
|
<td>p-stepper-nav</td>
|
||||||
<td>Container element of navigator.</td>
|
<td>Container element of navigator.</td>
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,8 @@
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/stepper/AccessibilityDoc.vue';
|
import AccessibilityDoc from '@/doc/stepper/AccessibilityDoc.vue';
|
||||||
import BasicDoc from '@/doc/stepper/BasicDoc.vue';
|
import BasicDoc from '@/doc/stepper/BasicDoc.vue';
|
||||||
|
import ExampleDoc from '@/doc/stepper/ExampleDoc.vue';
|
||||||
import ImportDoc from '@/doc/stepper/ImportDoc.vue';
|
import ImportDoc from '@/doc/stepper/ImportDoc.vue';
|
||||||
import TemplateDoc from '@/doc/stepper/TemplateDoc.vue';
|
|
||||||
import VerticalDoc from '@/doc/stepper/VerticalDoc.vue';
|
import VerticalDoc from '@/doc/stepper/VerticalDoc.vue';
|
||||||
import PTComponent from '@/doc/stepper/pt/index.vue';
|
import PTComponent from '@/doc/stepper/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/stepper/theming/index.vue';
|
import ThemingDoc from '@/doc/stepper/theming/index.vue';
|
||||||
|
|
@ -39,9 +39,9 @@ export default {
|
||||||
component: VerticalDoc
|
component: VerticalDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'template',
|
id: 'example',
|
||||||
label: 'Template',
|
label: 'Example',
|
||||||
component: TemplateDoc
|
component: ExampleDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue