Update steps demos
Cagatay Civici
parent
4fdbe365ba
commit
a4a1f8dacb
|
|
@ -3,25 +3,7 @@
|
|||
<p>Steps requires a collection of menuitems as its <i>model</i>.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</template>
|
||||
</Steps>
|
||||
<Steps :model="items" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -32,68 +14,23 @@ export default {
|
|||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
route: '/steps/'
|
||||
label: 'Personal Info'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: '/steps/seat'
|
||||
label: 'Reservation'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: '/steps/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: '/steps/confirmation'
|
||||
label: 'Review'
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<span v-else v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</Steps>
|
||||
<Steps :model="items" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<span v-else v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
<Steps :model="items" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -103,97 +40,46 @@ export default {
|
|||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
route: '/'
|
||||
label: 'Personal Info'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: '/seat'
|
||||
label: 'Reservation'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: '/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: '/confirmation'
|
||||
label: 'Review'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<span v-else v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
<Steps :model="items" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Personal',
|
||||
route: "/"
|
||||
label: 'Personal Info'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: "/seat",
|
||||
label: 'Reservation'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: "/payment",
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: "/confirmation",
|
||||
label: 'Review'
|
||||
}
|
||||
]);
|
||||
|
||||
const isActive = (item) => {
|
||||
return item.route ? router.resolve(item.route).path === route.path : false;
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Steps can be controlled programmatically using <i>activeStep</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="flex mb-5 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
<Steps v-model:activeStep="active" :model="items" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
items: [
|
||||
{
|
||||
label: 'Personal Info'
|
||||
},
|
||||
{
|
||||
label: 'Reservation'
|
||||
},
|
||||
{
|
||||
label: 'Review'
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<div class="flex mb-2 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
<Steps v-model:activeStep="active" :model="items" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex mb-2 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
<Steps v-model:activeStep="active" :model="items" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
items: [
|
||||
{
|
||||
label: 'Personal Info'
|
||||
},
|
||||
{
|
||||
label: 'Reservation'
|
||||
},
|
||||
{
|
||||
label: 'Review'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex mb-2 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
<Steps v-model:activeStep="active" :model="items" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const active = ref(0);
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Personal Info'
|
||||
},
|
||||
{
|
||||
label: 'Reservation'
|
||||
},
|
||||
{
|
||||
label: 'Review'
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,571 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>In order to add interactivity to the component, disable <i>readonly</i> to control the Steps.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
|
||||
<NuxtPage v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
|
||||
<keep-alive>
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</NuxtPage>
|
||||
<br class="mt-4" />
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
route: '/steps/'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: '/steps/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: '/steps/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: '/steps/confirmation'
|
||||
}
|
||||
],
|
||||
formObject: {},
|
||||
code: {
|
||||
basic: `
|
||||
<div class="card">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
|
||||
<router-view v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
|
||||
<keep-alive>
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
<Toast />
|
||||
|
||||
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
|
||||
<keep-alive>
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
route: '/'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: '/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: '/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: '/confirmation'
|
||||
}
|
||||
],
|
||||
formObject: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextPage(event) {
|
||||
for (let field in event.formData) {
|
||||
this.formObject[field] = event.formData[field];
|
||||
}
|
||||
|
||||
this.$router.push(this.items[event.pageIndex + 1].route);
|
||||
},
|
||||
prevPage(event) {
|
||||
this.$router.push(this.items[event.pageIndex - 1].route);
|
||||
},
|
||||
complete() {
|
||||
this.$toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.'});
|
||||
},
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
<Toast />
|
||||
|
||||
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
|
||||
<keep-alive>
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
const router = useRouter();
|
||||
const toast = useToast();
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Personal',
|
||||
route: "/"
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: "/seat",
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: "/payment",
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: "/confirmation",
|
||||
}
|
||||
]);
|
||||
const formObject = ref({});
|
||||
|
||||
const nextPage = (event) => {
|
||||
for (let field in event.formData) {
|
||||
formObject.value[field] = event.formData[field];
|
||||
}
|
||||
|
||||
router.push(items.value[event.pageIndex + 1].route);
|
||||
};
|
||||
const prevPage = (event) => {
|
||||
router.push(items.value[event.pageIndex - 1].route);
|
||||
};
|
||||
const complete = () => {
|
||||
toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + formObject.value.firstname + ' ' + formObject.value.lastname + ' your order completed.'});
|
||||
};
|
||||
|
||||
const isActive = (item) => {
|
||||
return item.route ? router.resolve(item.route).path === route.path : false;
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
pages: [
|
||||
{
|
||||
tabName: 'PersonalDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template v-slot:title>
|
||||
Personal Information
|
||||
</template>
|
||||
<template v-slot:subtitle>
|
||||
Enter your personal information
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<div class="p-fluid">
|
||||
<div class="field">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" />
|
||||
<small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" />
|
||||
<small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="age">Age</label>
|
||||
<InputNumber id="age" v-model="age" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<div class="grid grid-nogutter justify-content-between">
|
||||
<i></i>
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
age: null,
|
||||
submitted: false,
|
||||
validationErrors: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextPage() {
|
||||
this.submitted = true;
|
||||
if (this.validateForm() ) {
|
||||
this.$emit('next-page', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
|
||||
}
|
||||
},
|
||||
validateForm() {
|
||||
if (!this.firstname.trim())
|
||||
this.validationErrors['firstname'] = true;
|
||||
else
|
||||
delete this.validationErrors['firstname'];
|
||||
|
||||
if (!this.lastname.trim())
|
||||
this.validationErrors['lastname'] = true;
|
||||
else
|
||||
delete this.validationErrors['lastname'];
|
||||
|
||||
return !Object.keys(this.validationErrors).length;
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
{
|
||||
tabName: 'SeatDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template v-slot:title>
|
||||
Seat Information
|
||||
</template>
|
||||
<template v-slot:subtitle>
|
||||
Choose your seat
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="class">Class</label>
|
||||
<Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="lastname">Wagon</label>
|
||||
<Dropdown inputId="wagon" v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="seat">Seat</label>
|
||||
<Dropdown inputId="seat" v-model="selectedSeat" :options="seats" optionLabel="seat" placeholder="Select a Seat" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<div class="grid grid-nogutter justify-content-between">
|
||||
<Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selectedClass: '',
|
||||
classes: [
|
||||
{name: 'First Class', code: 'A', factor: 1},
|
||||
{name: 'Second Class', code: 'B', factor: 2},
|
||||
{name: 'Third Class', code: 'C', factor: 3}
|
||||
],
|
||||
vagons: [],
|
||||
selectedVagon: '',
|
||||
seats: [],
|
||||
selectedSeat: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setVagons(event) {
|
||||
if (this.selectedClass && event.value) {
|
||||
this.vagons = [];
|
||||
this.seats = [];
|
||||
for (let i = 1; i < 3 * event.value.factor; i++) {
|
||||
this.vagons.push({vagon: i + event.value.code, type: event.value.name, factor: event.value.factor});
|
||||
}
|
||||
}
|
||||
},
|
||||
setSeats(event) {
|
||||
if (this.selectedVagon && event.value) {
|
||||
this.seats = [];
|
||||
for (let i = 1; i < 10 * event.value.factor; i++) {
|
||||
this.seats.push({seat: i, type: event.value.type});
|
||||
}
|
||||
}
|
||||
},
|
||||
nextPage() {
|
||||
this.$emit('next-page', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
|
||||
},
|
||||
prevPage() {
|
||||
this.$emit('prev-page', {pageIndex: 1});
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
{
|
||||
tabName: 'PaymentDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template v-slot:title>
|
||||
Payment Information
|
||||
</template>
|
||||
<template v-slot:subtitle>
|
||||
Enter your card details
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12">
|
||||
<label for="class">Card Holder Name</label>
|
||||
<InputText type="text" v-model="cardholderName" />
|
||||
</div>
|
||||
<div class="field col-8">
|
||||
<label id="number" for="lastname">Number</label>
|
||||
<InputMask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber" />
|
||||
</div>
|
||||
<div class="field col-2">
|
||||
<label id="date" for="date">Date</label>
|
||||
<InputMask id="date" mask="99/99" v-model="date" />
|
||||
</div>
|
||||
<div class="field col-2">
|
||||
<label for="cvv">CVV</label>
|
||||
<InputMask id="cvv" mask="999" v-model="cvv" />
|
||||
</div>
|
||||
<div class="field-checkbox col-12">
|
||||
<Checkbox id="remember" v-model="remember" :binary="true" />
|
||||
<label for="remember" class="p-checkbox-label">Save credit card information for future</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<div class="grid grid-nogutter justify-content-between">
|
||||
<Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cardholderName:'',
|
||||
cardholderNumber:'',
|
||||
date:'',
|
||||
cvv:'',
|
||||
remember:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextPage() {
|
||||
this.$emit('next-page', {formData: {cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv}, pageIndex: 2});
|
||||
},
|
||||
prevPage() {
|
||||
this.$emit('prev-page', {pageIndex: 2});
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
{
|
||||
tabName: 'ConfirmationDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template v-slot:title>
|
||||
Confirmation
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<div class="field col-12">
|
||||
<label for="class">Name</label>
|
||||
<b>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Age</label>
|
||||
<b>{{formData.age ? formData.age : '-'}}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Seat Class</label>
|
||||
<b>{{formData.class ? formData.class : '-'}}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Wagon Number</label>
|
||||
<b>{{formData.vagon ? formData.vagon : '-'}}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Seat</label>
|
||||
<b>{{formData.seat ? formData.seat : '-'}}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Cardholder Name</label>
|
||||
<b>{{formData.cardholderName ? formData.cardholderName : '-'}}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Card Number</label>
|
||||
<b>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Date</label>
|
||||
<b>{{formData.date ? formData.date : '-'}}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">CVV</label>
|
||||
<b>{{formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-'}}</b>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<div class="grid grid-nogutter justify-content-between">
|
||||
<Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
|
||||
<Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
formData: Object
|
||||
},
|
||||
methods: {
|
||||
prevPage() {
|
||||
this.$emit('prev-page', {pageIndex: 3});
|
||||
},
|
||||
complete() {
|
||||
this.$emit('complete');
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
nextPage(event) {
|
||||
for (let field in event.formData) {
|
||||
this.formObject[field] = event.formData[field];
|
||||
}
|
||||
|
||||
this.$router.push(this.items[event.pageIndex + 1].route);
|
||||
},
|
||||
prevPage(event) {
|
||||
this.$router.push(this.items[event.pageIndex - 1].route);
|
||||
},
|
||||
complete() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.' });
|
||||
},
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Steps is linear by default to enforce completion of a previus step to proceed, set <i>readonly</i> as false for non-linear mode.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Steps :model="items" :readonly="false" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Personal Info'
|
||||
},
|
||||
{
|
||||
label: 'Reservation'
|
||||
},
|
||||
{
|
||||
label: 'Review'
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Steps :model="items" :readonly="false" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Steps :model="items" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Personal Info'
|
||||
},
|
||||
{
|
||||
label: 'Reservation'
|
||||
},
|
||||
{
|
||||
label: 'Review'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Steps :model="items" :readonly="false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Personal Info'
|
||||
},
|
||||
{
|
||||
label: 'Reservation'
|
||||
},
|
||||
{
|
||||
label: 'Review'
|
||||
}
|
||||
]);
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,218 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
|
||||
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<!-- <div class="card">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</Steps>
|
||||
</div> -->
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// items: [
|
||||
// {
|
||||
// label: 'Personal',
|
||||
// route: '/steps/'
|
||||
// },
|
||||
// {
|
||||
// label: 'Seat',
|
||||
// route: '/steps/seat'
|
||||
// },
|
||||
// {
|
||||
// label: 'Payment',
|
||||
// route: '/steps/payment'
|
||||
// },
|
||||
// {
|
||||
// label: 'Confirmation',
|
||||
// route: '/steps/confirmation'
|
||||
// },
|
||||
// {
|
||||
// label: 'File Upload',
|
||||
// url: '/fileupload'
|
||||
// }
|
||||
// ],
|
||||
code: {
|
||||
basic: `
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</Steps>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
route: '/'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: '/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: '/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: '/confirmation'
|
||||
},
|
||||
{
|
||||
label: 'File Upload',
|
||||
url: '/fileupload'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Personal',
|
||||
route: "/"
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: "/seat",
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: "/payment",
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: "/confirmation",
|
||||
},
|
||||
{
|
||||
label: 'File Upload',
|
||||
url: '/fileupload'
|
||||
}
|
||||
]);
|
||||
|
||||
const isActive = (item) => {
|
||||
return item.route ? router.resolve(item.route).path === route.path : false;
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Steps offers item customization with the <i>item</i> template that receives the item instance from the model as a parameter.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Steps :model="items" class="custom-steps" :readonly="false">
|
||||
<template #item="{ item, active }">
|
||||
<span :class="['inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
|
||||
<i :class="[item.icon, 'text-xl']" />
|
||||
</span>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
icon: 'pi pi-user'
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-calendar'
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-check'
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Steps :model="items" class="custom-steps" :readonly="false">
|
||||
<template #item="{ item, active }">
|
||||
<span :class="['inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
|
||||
<i :class="[item.icon, 'text-xl']" />
|
||||
</span>
|
||||
</template>
|
||||
</Steps>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Steps :model="items" class="custom-steps" :readonly="false">
|
||||
<template #item="{ item, active }">
|
||||
<span :class="['inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
|
||||
<i :class="[item.icon, 'text-xl']" />
|
||||
</span>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
icon: 'pi pi-user'
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-calendar'
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-check'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Steps :model="items" class="custom-steps" :readonly="false">
|
||||
<template #item="{ item, active }">
|
||||
<span :class="['inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
|
||||
<i :class="[item.icon, 'text-xl']" />
|
||||
</span>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
icon: 'pi pi-user'
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-calendar'
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-check'
|
||||
}
|
||||
]);
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.custom-steps) {
|
||||
.p-steps-item:before {
|
||||
margin-top: 0;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<template>
|
||||
<DocComponent
|
||||
title="Vue Stepper Component"
|
||||
header="Steps"
|
||||
description="Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design."
|
||||
:componentDocs="docs"
|
||||
:apiDocs="['Steps', 'MenuItem']"
|
||||
:ptTabComponent="ptComponent"
|
||||
:themingDocs="themingDoc"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/steps/AccessibilityDoc.vue';
|
||||
import BasicDoc from '@/doc/steps/BasicDoc.vue';
|
||||
import ImportDoc from '@/doc/steps/ImportDoc.vue';
|
||||
import InteractiveDoc from '@/doc/steps/InteractiveDoc.vue';
|
||||
import RouterDoc from '@/doc/steps/RouterDoc.vue';
|
||||
import PTComponent from '@/doc/steps/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/steps/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'interactive',
|
||||
label: 'Interactive',
|
||||
component: InteractiveDoc
|
||||
},
|
||||
{
|
||||
id: 'router',
|
||||
label: 'Router',
|
||||
component: RouterDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<template>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template v-slot:title> Confirmation </template>
|
||||
<template v-slot:content>
|
||||
<div class="field col-12">
|
||||
<label for="class">Name</label>
|
||||
<b>{{ formData.firstname ? formData.firstname : '-' }} {{ formData.lastname ? formData.lastname : '-' }}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Age</label>
|
||||
<b>{{ formData.age ? formData.age : '-' }}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Seat Class</label>
|
||||
<b>{{ formData.class ? formData.class : '-' }}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Wagon Number</label>
|
||||
<b>{{ formData.vagon ? formData.vagon : '-' }}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Seat</label>
|
||||
<b>{{ formData.seat ? formData.seat : '-' }}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Cardholder Name</label>
|
||||
<b>{{ formData.cardholderName ? formData.cardholderName : '-' }}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Card Number</label>
|
||||
<b>{{ formData.cardholderNumber ? formData.cardholderNumber : '-' }}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">Date</label>
|
||||
<b>{{ formData.date ? formData.date : '-' }}</b>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="Age">CVV</label>
|
||||
<b>{{ formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-' }}</b>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<div class="grid grid-nogutter justify-content-between">
|
||||
<Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
|
||||
<Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" severity="success" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['prev-page', 'complete'],
|
||||
props: {
|
||||
formData: Object
|
||||
},
|
||||
methods: {
|
||||
prevPage() {
|
||||
this.$emit('prev-page', { pageIndex: 3 });
|
||||
},
|
||||
complete() {
|
||||
this.$emit('complete');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
<template>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template v-slot:title> Payment Information </template>
|
||||
<template v-slot:subtitle> Enter your card details </template>
|
||||
<template v-slot:content>
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12">
|
||||
<label for="class">Card Holder Name</label>
|
||||
<InputText v-model="cardholderName" type="text" />
|
||||
</div>
|
||||
<div class="field col-8">
|
||||
<label id="number" for="lastname">Number</label>
|
||||
<InputMask id="number" v-model="cardholderNumber" mask="9999-9999-9999-9999" />
|
||||
</div>
|
||||
<div class="field col-2">
|
||||
<label id="date" for="date">Date</label>
|
||||
<InputMask id="date" v-model="date" mask="99/99" />
|
||||
</div>
|
||||
<div class="field col-2">
|
||||
<label for="cvv">CVV</label>
|
||||
<InputMask id="cvv" v-model="cvv" mask="999" />
|
||||
</div>
|
||||
<div class="field-checkbox col-12">
|
||||
<Checkbox id="remember" v-model="remember" :binary="true" />
|
||||
<label for="remember" class="p-checkbox-label">Save credit card information for future</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<div class="grid grid-nogutter justify-content-between">
|
||||
<Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['next-page', 'prev-page'],
|
||||
data() {
|
||||
return {
|
||||
cardholderName: '',
|
||||
cardholderNumber: '',
|
||||
date: '',
|
||||
cvv: '',
|
||||
remember: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
nextPage() {
|
||||
this.$emit('next-page', { formData: { cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv }, pageIndex: 2 });
|
||||
},
|
||||
prevPage() {
|
||||
this.$emit('prev-page', { pageIndex: 2 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template v-slot:title> Seat Information </template>
|
||||
<template v-slot:subtitle> Choose your seat </template>
|
||||
<template v-slot:content>
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="class">Class</label>
|
||||
<Dropdown v-model="selectedClass" inputId="class" :options="classes" @change="setWagons($event)" optionLabel="name" placeholder="Select a Class" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="lastname">Wagon</label>
|
||||
<Dropdown v-model="selectedWagon" inputId="wagon" :options="wagons" @change="setSeats($event)" optionLabel="wagon" placeholder="Select a Wagon" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="seat">Seat</label>
|
||||
<Dropdown v-model="selectedSeat" inputId="seat" :options="seats" optionLabel="seat" placeholder="Select a Seat" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<div class="grid grid-nogutter justify-content-between">
|
||||
<Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['next-page', 'prev-page'],
|
||||
data() {
|
||||
return {
|
||||
selectedClass: '',
|
||||
classes: [
|
||||
{ name: 'First Class', code: 'A', factor: 1 },
|
||||
{ name: 'Second Class', code: 'B', factor: 2 },
|
||||
{ name: 'Third Class', code: 'C', factor: 3 }
|
||||
],
|
||||
wagons: [],
|
||||
selectedWagon: '',
|
||||
seats: [],
|
||||
selectedSeat: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setWagons(event) {
|
||||
if (this.selectedClass && event.value) {
|
||||
this.wagons = [];
|
||||
this.seats = [];
|
||||
|
||||
for (let i = 1; i < 3 * event.value.factor; i++) {
|
||||
this.wagons.push({ wagon: i + event.value.code, type: event.value.name, factor: event.value.factor });
|
||||
}
|
||||
}
|
||||
},
|
||||
setSeats(event) {
|
||||
if (this.selectedWagon && event.value) {
|
||||
this.seats = [];
|
||||
|
||||
for (let i = 1; i < 10 * event.value.factor; i++) {
|
||||
this.seats.push({ seat: i, type: event.value.type });
|
||||
}
|
||||
}
|
||||
},
|
||||
nextPage() {
|
||||
this.$emit('next-page', { formData: { class: this.selectedClass.name, wagon: this.selectedWagon.wagon, seat: this.selectedSeat.seat }, pageIndex: 1 });
|
||||
},
|
||||
prevPage() {
|
||||
this.$emit('prev-page', { pageIndex: 1 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,65 +1,63 @@
|
|||
<template>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template v-slot:title> Personal Information </template>
|
||||
<template v-slot:subtitle> Enter your personal information </template>
|
||||
<template v-slot:content>
|
||||
<div class="p-fluid">
|
||||
<div class="field">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" v-model="firstname" :class="{ 'p-invalid': validationErrors.firstname && submitted }" />
|
||||
<small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" v-model="lastname" :class="{ 'p-invalid': validationErrors.lastname && submitted }" />
|
||||
<small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="age">Age</label>
|
||||
<InputNumber id="age" v-model="age" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<div class="grid grid-nogutter justify-content-between">
|
||||
<i></i>
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
<DocComponent
|
||||
title="Vue Stepper Component"
|
||||
header="Steps"
|
||||
description="Steps also known as Stepper, is an indicator for the steps in a workflow."
|
||||
:componentDocs="docs"
|
||||
:apiDocs="['Steps', 'MenuItem']"
|
||||
:ptTabComponent="ptComponent"
|
||||
:themingDocs="themingDoc"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/steps/AccessibilityDoc.vue';
|
||||
import BasicDoc from '@/doc/steps/BasicDoc.vue';
|
||||
import ControlledDoc from '@/doc/steps/ControlledDoc.vue';
|
||||
import ImportDoc from '@/doc/steps/ImportDoc.vue';
|
||||
import LinearDoc from '@/doc/steps/LinearDoc.vue';
|
||||
import TemplateDoc from '@/doc/steps/TemplateDoc.vue';
|
||||
import PTComponent from '@/doc/steps/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/steps/theming/index.vue';
|
||||
|
||||
export default {
|
||||
emits: ['next-page'],
|
||||
data() {
|
||||
return {
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
age: null,
|
||||
submitted: false,
|
||||
validationErrors: {}
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'controlled',
|
||||
label: 'Controlled',
|
||||
component: ControlledDoc
|
||||
},
|
||||
{
|
||||
id: 'linear',
|
||||
label: 'Linear',
|
||||
component: LinearDoc
|
||||
},
|
||||
{
|
||||
id: 'template',
|
||||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
nextPage() {
|
||||
this.submitted = true;
|
||||
|
||||
if (this.validateForm()) {
|
||||
this.$emit('next-page', { formData: { firstname: this.firstname, lastname: this.lastname, age: this.age }, pageIndex: 0 });
|
||||
}
|
||||
},
|
||||
validateForm() {
|
||||
if (!this.firstname.trim()) this.validationErrors['firstname'] = true;
|
||||
else delete this.validationErrors['firstname'];
|
||||
|
||||
if (!this.lastname.trim()) this.validationErrors['lastname'] = true;
|
||||
else delete this.validationErrors['lastname'];
|
||||
|
||||
return !Object.keys(this.validationErrors).length;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5729,4 +5729,9 @@
|
|||
.p-orderlist-controls .p-button {
|
||||
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item.p-highlight .p-steps-number {
|
||||
background: #60a5fa;
|
||||
color: #030712;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5729,4 +5729,9 @@
|
|||
.p-orderlist-controls .p-button {
|
||||
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item.p-highlight .p-steps-number {
|
||||
background: #818cf8;
|
||||
color: #030712;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5729,4 +5729,9 @@
|
|||
.p-orderlist-controls .p-button {
|
||||
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item.p-highlight .p-steps-number {
|
||||
background: #a78bfa;
|
||||
color: #030712;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5729,4 +5729,9 @@
|
|||
.p-orderlist-controls .p-button {
|
||||
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item.p-highlight .p-steps-number {
|
||||
background: #34d399;
|
||||
color: #030712;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5721,4 +5721,9 @@
|
|||
.p-orderlist-controls .p-button {
|
||||
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item.p-highlight .p-steps-number {
|
||||
background: #3B82F6;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5721,4 +5721,9 @@
|
|||
.p-orderlist-controls .p-button {
|
||||
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item.p-highlight .p-steps-number {
|
||||
background: #6366F1;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5721,4 +5721,9 @@
|
|||
.p-orderlist-controls .p-button {
|
||||
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item.p-highlight .p-steps-number {
|
||||
background: #8B5CF6;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5721,4 +5721,9 @@
|
|||
.p-orderlist-controls .p-button {
|
||||
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item.p-highlight .p-steps-number {
|
||||
background: #10b981;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue