vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Demo updates

pull/5269/head
tugcekucukoglu 2024-02-13 10:08:22 +03:00
parent 24f0e5ebf7
commit 4096520295
4 changed files with 820 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/doc/codeeditor/templates.js
View File

@ -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);

135
doc/stepper/BasicDoc.vue
View File

@ -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>

652
doc/stepper/TemplateDoc.vue
View File

@ -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() {

135
doc/stepper/VerticalDoc.vue
View File

@ -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>