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>
|
||||
<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 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>
|
||||
<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 class="content-section implementation">
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" />
|
||||
<div class="field">
|
||||
<label for="age">Age</label>
|
||||
<InputNumber id="age" v-model="age" />
|
||||
</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>
|
||||
|
||||
<StepsDoc />
|
||||
</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>
|
||||
import StepsDoc from './StepsDoc';
|
||||
|
||||
export default {
|
||||
emits: ['next-page'],
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
to: '/steps'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
to: '/steps/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
to: '/steps/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
to: '/steps/confirmation'
|
||||
}
|
||||
],
|
||||
formObject: {}
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
age: null,
|
||||
submitted: false,
|
||||
validationErrors: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
nextPage(event) {
|
||||
for (let field in event.formData) {
|
||||
this.formObject[field] = event.formData[field];
|
||||
}
|
||||
nextPage() {
|
||||
this.submitted = true;
|
||||
|
||||
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.' });
|
||||
if (this.validateForm()) {
|
||||
this.$emit('next-page', { formData: { firstname: this.firstname, lastname: this.lastname, age: this.age }, pageIndex: 0 });
|
||||
}
|
||||
},
|
||||
components: {
|
||||
StepsDoc: StepsDoc
|
||||
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>
|
||||
|
||||
<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>
|
||||
<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" />
|
||||
<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 class="tabmenudemo-content">
|
||||
<h5>Home Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TabMenuDoc from './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
|
||||
}
|
||||
};
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep(.tabmenudemo-content) {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue