Child routes added for step-tabmenu components
Bahadır Sofuoğlu
parent
7569018ddc
commit
f545a9f388
|
|
@ -0,0 +1,88 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<Title>Vue Stepper Component</Title>
|
||||||
|
<Meta name="description" content="Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design." />
|
||||||
|
</Head>
|
||||||
|
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Steps</h1>
|
||||||
|
<p>Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.</p>
|
||||||
|
</div>
|
||||||
|
<AppDemoActions />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="card">
|
||||||
|
<Steps :model="items" aria-label="Form 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<StepsDoc />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import StepsDoc from './steps/StepsDoc';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Personal',
|
||||||
|
to: '/steps'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Seat',
|
||||||
|
to: '/steps/seat'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Payment',
|
||||||
|
to: '/steps/payment'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Confirmation',
|
||||||
|
to: '/steps/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].to);
|
||||||
|
},
|
||||||
|
prevPage(event) {
|
||||||
|
this.$router.push(this.items[event.pageIndex - 1].to);
|
||||||
|
},
|
||||||
|
complete() {
|
||||||
|
this.$toast.add({ severity: 'success', summary: 'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
StepsDoc: StepsDoc
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
::v-deep(b) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.p-card-body) {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
<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 {
|
|
||||||
emits: ['next-page'],
|
|
||||||
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>
|
|
||||||
|
|
@ -1,88 +1,65 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="stepsdemo-content">
|
||||||
<Head>
|
<Card>
|
||||||
<Title>Vue Stepper Component</Title>
|
<template v-slot:title> Personal Information </template>
|
||||||
<Meta name="description" content="Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design." />
|
<template v-slot:subtitle> Enter your personal information </template>
|
||||||
</Head>
|
<template v-slot:content>
|
||||||
|
<div class="p-fluid">
|
||||||
<div class="content-section introduction">
|
<div class="field">
|
||||||
<div class="feature-intro">
|
<label for="firstname">Firstname</label>
|
||||||
<h1>Steps</h1>
|
<InputText id="firstname" v-model="firstname" :class="{ 'p-invalid': validationErrors.firstname && submitted }" />
|
||||||
<p>Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.</p>
|
<small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
|
||||||
</div>
|
</div>
|
||||||
<AppDemoActions />
|
<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>
|
||||||
|
<div class="field">
|
||||||
<div class="content-section implementation">
|
<label for="age">Age</label>
|
||||||
<div class="card">
|
<InputNumber id="age" v-model="age" />
|
||||||
<Steps :model="items" aria-label="Form Steps" />
|
|
||||||
</div>
|
</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>
|
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
<StepsDoc />
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import StepsDoc from './StepsDoc';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
emits: ['next-page'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
items: [
|
firstname: '',
|
||||||
{
|
lastname: '',
|
||||||
label: 'Personal',
|
age: null,
|
||||||
to: '/steps'
|
submitted: false,
|
||||||
},
|
validationErrors: {}
|
||||||
{
|
|
||||||
label: 'Seat',
|
|
||||||
to: '/steps/seat'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Payment',
|
|
||||||
to: '/steps/payment'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Confirmation',
|
|
||||||
to: '/steps/confirmation'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
formObject: {}
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
nextPage(event) {
|
nextPage() {
|
||||||
for (let field in event.formData) {
|
this.submitted = true;
|
||||||
this.formObject[field] = event.formData[field];
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$router.push(this.items[event.pageIndex + 1].to);
|
if (this.validateForm()) {
|
||||||
},
|
this.$emit('next-page', { formData: { firstname: this.firstname, lastname: this.lastname, age: this.age }, pageIndex: 0 });
|
||||||
prevPage(event) {
|
|
||||||
this.$router.push(this.items[event.pageIndex - 1].to);
|
|
||||||
},
|
|
||||||
complete() {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.' });
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
validateForm() {
|
||||||
StepsDoc: StepsDoc
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
::v-deep(b) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep(.p-card-body) {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<Title>Vue TabMenu Component</Title>
|
||||||
|
<Meta name="description" content="TabMenu is a navigation/command component that displays items as tab headers." />
|
||||||
|
</Head>
|
||||||
|
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>TabMenu</h1>
|
||||||
|
<p>TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.</p>
|
||||||
|
</div>
|
||||||
|
<AppDemoActions />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Default</h5>
|
||||||
|
<TabMenu :model="items" />
|
||||||
|
<NuxtPage />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Programmatic</h5>
|
||||||
|
<div class="py-2">
|
||||||
|
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||||
|
<Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
|
||||||
|
<Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TabMenu v-model:activeIndex="active" :model="items2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TabMenuDoc />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TabMenuDoc from './tabmenu/TabMenuDoc';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: 3,
|
||||||
|
items: [
|
||||||
|
{ label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu' },
|
||||||
|
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar' },
|
||||||
|
{ label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit' },
|
||||||
|
{ label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation' },
|
||||||
|
{ label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
|
||||||
|
],
|
||||||
|
items2: [
|
||||||
|
{ label: 'Home', icon: 'pi pi-fw pi-home' },
|
||||||
|
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
|
||||||
|
{ label: 'Edit', icon: 'pi pi-fw pi-pencil' },
|
||||||
|
{ label: 'Documentation', icon: 'pi pi-fw pi-file' },
|
||||||
|
{ label: 'Settings', icon: 'pi pi-fw pi-cog' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
TabMenuDoc: TabMenuDoc
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
::v-deep(.tabmenudemo-content) {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="tabmenudemo-content">
|
|
||||||
<h5>Home Component Content</h5>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,72 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="tabmenudemo-content">
|
||||||
<Head>
|
<h5>Home Component Content</h5>
|
||||||
<Title>Vue TabMenu Component</Title>
|
|
||||||
<Meta name="description" content="TabMenu is a navigation/command component that displays items as tab headers." />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>TabMenu</h1>
|
|
||||||
<p>TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.</p>
|
|
||||||
</div>
|
|
||||||
<AppDemoActions />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<div class="card">
|
|
||||||
<h5>Default</h5>
|
|
||||||
<TabMenu :model="items" />
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h5>Programmatic</h5>
|
|
||||||
<div class="py-2">
|
|
||||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
|
||||||
<Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
|
|
||||||
<Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TabMenu v-model:activeIndex="active" :model="items2" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TabMenuDoc />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TabMenuDoc from './TabMenuDoc';
|
export default {};
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 3,
|
|
||||||
items: [
|
|
||||||
{ label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu' },
|
|
||||||
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar' },
|
|
||||||
{ label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit' },
|
|
||||||
{ label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation' },
|
|
||||||
{ label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
|
|
||||||
],
|
|
||||||
items2: [
|
|
||||||
{ label: 'Home', icon: 'pi pi-fw pi-home' },
|
|
||||||
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
|
|
||||||
{ label: 'Edit', icon: 'pi pi-fw pi-pencil' },
|
|
||||||
{ label: 'Documentation', icon: 'pi pi-fw pi-file' },
|
|
||||||
{ label: 'Settings', icon: 'pi pi-fw pi-cog' }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
TabMenuDoc: TabMenuDoc
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
::v-deep(.tabmenudemo-content) {
|
|
||||||
padding: 2rem 1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue