From 40965202950c386c5623fcb74adb4194cbeec37d Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 13 Feb 2024 10:08:22 +0300
Subject: [PATCH] Demo updates

---
 components/doc/codeeditor/templates.js |   6 +
 doc/stepper/BasicDoc.vue               | 135 ++++-
 doc/stepper/TemplateDoc.vue            | 652 +++++++++++++++++++++----
 doc/stepper/VerticalDoc.vue            | 135 ++++-
 4 files changed, 820 insertions(+), 108 deletions(-)

diff --git a/components/doc/codeeditor/templates.js b/components/doc/codeeditor/templates.js
index dbb3f9889..56725d293 100644
--- a/components/doc/codeeditor/templates.js
+++ b/components/doc/codeeditor/templates.js
@@ -202,6 +202,7 @@ import MegaMenu from 'primevue/megamenu';
 import Menu from 'primevue/menu';
 import Menubar from 'primevue/menubar';
 import Message from 'primevue/message';
+import MeterGroup from 'primevue/metergroup';
 import MultiSelect from 'primevue/multiselect';
 import OrderList from 'primevue/orderlist';
 import OrganizationChart from 'primevue/organizationchart';
@@ -227,6 +228,8 @@ import SpeedDial from 'primevue/speeddial';
 import SplitButton from 'primevue/splitbutton';
 import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
+import Stepper from 'primevue/stepper';
+import StepperPanel from 'primevue/stepperpanel';
 import Steps from 'primevue/steps';
 import StyleClass from 'primevue/styleclass';
 import TabMenu from 'primevue/tabmenu';
@@ -316,6 +319,7 @@ app.component('MegaMenu', MegaMenu);
 app.component('Menu', Menu);
 app.component('Menubar', Menubar);
 app.component('Message', Message);
+app.component('MeterGroup', MeterGroup);
 app.component('MultiSelect', MultiSelect);
 app.component('OrderList', OrderList);
 app.component('OrganizationChart', OrganizationChart);
@@ -340,6 +344,8 @@ app.component('SpeedDial', SpeedDial);
 app.component('SplitButton', SplitButton);
 app.component('Splitter', Splitter);
 app.component('SplitterPanel', SplitterPanel);
+app.component('Stepper', Stepper);
+app.component('StepperPanel', StepperPanel);
 app.component('Steps', Steps);
 app.component('TabMenu', TabMenu);
 app.component('TabView', TabView);
diff --git a/doc/stepper/BasicDoc.vue b/doc/stepper/BasicDoc.vue
index 70097402a..df1fa7d70 100644
--- a/doc/stepper/BasicDoc.vue
+++ b/doc/stepper/BasicDoc.vue
@@ -35,10 +35,143 @@
                     </p>
                     <div class="flex gap-2 justify-content-end">
                         <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
-                        <!-- <Button label="Confirm" /> -->
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Stepper>
+    <StepperPanel header="Header 1">
+        <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 }">
+            <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+                <Button label="Next" @click="(event) => nextCallback(event)" />
+            </div>
+        </template>
+    </StepperPanel>
+    <StepperPanel header="Header 3">
+        <template #content="{ prevCallback }">
+            <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+            </div>
+        </template>
+    </StepperPanel>
+</Stepper>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Stepper>
+            <StepperPanel header="Header 1">
+                <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 }">
+                    <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+                        <Button label="Next" @click="(event) => nextCallback(event)" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header 3">
+                <template #content="{ prevCallback }">
+                    <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
                     </div>
                 </template>
             </StepperPanel>
         </Stepper>
     </div>
 </template>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Stepper>
+            <StepperPanel header="Header 1">
+                <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 }">
+                    <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+                        <Button label="Next" @click="(event) => nextCallback(event)" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header 3">
+                <template #content="{ prevCallback }">
+                    <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/stepper/TemplateDoc.vue b/doc/stepper/TemplateDoc.vue
index e4bc74c1c..2fda2b679 100644
--- a/doc/stepper/TemplateDoc.vue
+++ b/doc/stepper/TemplateDoc.vue
@@ -165,92 +165,7 @@
             </template>
         </Stepper>
     </div>
-    <!-- <div class="card flex flex-column justify-content-center gap-5" style="height: auto">
-        <Stepper v-model:activeStep="active" orientation="vertical">
-            <StepperPanel v-for="(step, index) of steps" :key="step.id">
-                <template #header="slotProps">
-                    <div class="flex align-items-center gap-2" :class="slotProps.class" @click="(event) => slotProps.clickCallback(event, index)">
-                        <Button :severity="slotProps.highlighted || completed ? 'success' : 'secondary'" rounded :icon="step.icon" />
-                        <span>{{ step.header }}</span>
-                    </div>
-                </template>
-                <template #content="{ clickCallback }">
-                    <div class="flex flex-column gap-5">
-                        <span>{{ step.content }}</span>
-                        <div class="flex gap-3">
-                            <Button v-if="index !== steps.length - 1" label="Continue" :disabled="index === steps.length - 1" @click="(event) => clickCallback(event, index + 1)" />
-                            <Button
-                                v-else
-                                label="Finish"
-                                @click="
-                                    (event) => {
-                                        clickCallback(event, null);
-                                        completed = true;
-                                    }
-                                "
-                            />
-                            <Button label="Back" severity="secondary" :disabled="index === 0" @click="(event) => clickCallback(event, index - 1)" />
-                        </div>
-                    </div>
-                </template>
-            </StepperPanel>
-            <template v-if="completed" #end>
-                <div class="flex">
-                    <Button
-                        severity="contrast"
-                        label="Reset"
-                        @click="
-                            completed = false;
-                            active = 0;
-                        "
-                    />
-                </div>
-            </template>
-        </Stepper>
-    </div>
-    <div class="card flex flex-column justify-content-center gap-5" style="height: auto">
-        <Stepper v-model:activeStep="active">
-            <StepperPanel v-for="(step, index) of steps" :key="step.id">
-                <template #header="slotProps">
-                    <div class="flex align-items-center gap-2" :class="slotProps.class" @click="(event) => slotProps.clickCallback(event, index)">
-                        <Button :severity="slotProps.highlighted || completed ? 'success' : 'secondary'" rounded :icon="step.icon" />
-                        <span>{{ step.header }}</span>
-                    </div>
-                </template>
-                <template #content="{ clickCallback }">
-                    <div class="flex flex-column gap-5">
-                        <span>{{ step.content }}</span>
-                        <div class="flex gap-3">
-                            <Button v-if="index !== steps.length - 1" label="Continue" :disabled="index === steps.length - 1" @click="(event) => clickCallback(event, index + 1)" />
-                            <Button
-                                v-else
-                                label="Finish"
-                                @click="
-                                    (event) => {
-                                        clickCallback(event, null);
-                                        completed = true;
-                                    }
-                                "
-                            />
-                            <Button label="Back" severity="secondary" :disabled="index === 0" @click="(event) => clickCallback(event, index - 1)" />
-                        </div>
-                    </div>
-                </template>
-            </StepperPanel>
-            <template v-if="completed" #end>
-                <div class="flex">
-                    <Button
-                        severity="contrast"
-                        label="Reset"
-                        @click="
-                            completed = false;
-                            active = 0;
-                        "
-                    />
-                </div>
-            </template>
-        </Stepper>
-    </div> -->
+    <DocSectionCode :code="code" />
 </template>
 
 <script>
@@ -267,30 +182,555 @@ export default {
             password: null,
             cpassword: null,
             quantity: [1, 2],
-            selectedValue: null,
             cc: null,
             cvc: null,
             exp: null,
-            steps: [
-                {
-                    id: 0,
-                    header: 'Long Header 1',
-                    content: 'Content 1',
-                    icon: 'pi pi-cog'
-                },
-                {
-                    id: 1,
-                    header: 'Long Header 2',
-                    content: 'Content 2',
-                    icon: 'pi pi-discord'
-                },
-                {
-                    id: 2,
-                    header: 'Long Header 3',
-                    content: 'Content 3',
-                    icon: 'pi pi-twitter'
+            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() {
diff --git a/doc/stepper/VerticalDoc.vue b/doc/stepper/VerticalDoc.vue
index 86785fe87..420ecb58c 100644
--- a/doc/stepper/VerticalDoc.vue
+++ b/doc/stepper/VerticalDoc.vue
@@ -35,10 +35,143 @@
                     </p>
                     <div class="flex gap-2 justify-content-end">
                         <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
-                        <!-- <Button label="Confirm" /> -->
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Stepper orientation="vertical">
+    <StepperPanel header="Header 1">
+        <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 }">
+            <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+                <Button label="Next" @click="(event) => nextCallback(event)" />
+            </div>
+        </template>
+    </StepperPanel>
+    <StepperPanel header="Header 3">
+        <template #content="{ prevCallback }">
+            <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+            </div>
+        </template>
+    </StepperPanel>
+</Stepper>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Stepper orientation="vertical">
+            <StepperPanel header="Header 1">
+                <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 }">
+                    <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+                        <Button label="Next" @click="(event) => nextCallback(event)" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header 3">
+                <template #content="{ prevCallback }">
+                    <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
                     </div>
                 </template>
             </StepperPanel>
         </Stepper>
     </div>
 </template>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Stepper orientation="vertical">
+            <StepperPanel header="Header 1">
+                <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 }">
+                    <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+                        <Button label="Next" @click="(event) => nextCallback(event)" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header 3">
+                <template #content="{ prevCallback }">
+                    <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="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>