router for csb
Tuğçe Küçükoğlu
parent
db69b9ad63
commit
26b76c023c
|
|
@ -128,9 +128,12 @@ export default {
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
<div class="p-d-flex p-jc-between">
|
||||||
<span>View on GitHub</span>
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
</a>
|
<span>View on GitHub</span>
|
||||||
|
</a>
|
||||||
|
<LiveEditor name="StepsDemo" :sources="sources" :toastService="true" :router="true" :components="['Card', 'InputText', 'InputNumber', 'Button', 'Dropdown', 'InputMask', 'Checkbox']" />
|
||||||
|
</div>
|
||||||
<pre v-code>
|
<pre v-code>
|
||||||
<code><template v-pre>
|
<code><template v-pre>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
@ -503,3 +506,372 @@ export default {
|
||||||
</TabView>
|
</TabView>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LiveEditor from '../liveeditor/LiveEditor';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sources: {
|
||||||
|
'template': {
|
||||||
|
content: `<template>
|
||||||
|
<div class="layout-content">
|
||||||
|
<Toast />
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="card">
|
||||||
|
<Steps :model="items" :readonly="true" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [{
|
||||||
|
label: 'Personal',
|
||||||
|
to: "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Seat',
|
||||||
|
to: "/seat",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Payment',
|
||||||
|
to: "/payment",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Confirmation',
|
||||||
|
to: "/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.'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`
|
||||||
|
},
|
||||||
|
'pages': [
|
||||||
|
{
|
||||||
|
'name': 'PersonalDemo',
|
||||||
|
'template': `<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="p-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="p-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="p-field">
|
||||||
|
<label for="age">Age</label>
|
||||||
|
<InputNumber id="age" v-model="age" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot:footer>
|
||||||
|
<div class="p-grid p-nogutter p-justify-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'SeatDemo',
|
||||||
|
'template': `<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 p-formgrid p-grid">
|
||||||
|
<div class="p-field p-col-12 p-md-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="p-field p-col-12 p-md-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="p-field p-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="p-grid p-nogutter p-justify-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});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'PaymentDemo',
|
||||||
|
'template': `<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 p-formgrid p-grid">
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="class">Card Holder Name</label>
|
||||||
|
<InputText type="text" v-model="cardholderName" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-8">
|
||||||
|
<label id="number" for="lastname">Number</label>
|
||||||
|
<InputMask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-2">
|
||||||
|
<label id="date" for="date">Date</label>
|
||||||
|
<InputMask id="date" mask="99/99" v-model="date" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-2">
|
||||||
|
<label for="cvv">CVV</label>
|
||||||
|
<InputMask id="cvv" mask="999" v-model="cvv" />
|
||||||
|
</div>
|
||||||
|
<div class="p-field-checkbox p-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="p-grid p-nogutter p-justify-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});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'ConfirmationDemo',
|
||||||
|
'template': `<template>
|
||||||
|
<div class="stepsdemo-content">
|
||||||
|
<Card>
|
||||||
|
<template v-slot:title>
|
||||||
|
Confirmation
|
||||||
|
</template>
|
||||||
|
<template v-slot:content>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="class">Name</label>
|
||||||
|
<b>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Age</label>
|
||||||
|
<b>{{formData.age ? formData.age : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Seat Class</label>
|
||||||
|
<b>{{formData.class ? formData.class : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Wagon Number</label>
|
||||||
|
<b>{{formData.vagon ? formData.vagon : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Seat</label>
|
||||||
|
<b>{{formData.seat ? formData.seat : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Cardholder Name</label>
|
||||||
|
<b>{{formData.cardholderName ? formData.cardholderName : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Card Number</label>
|
||||||
|
<b>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="Age">Date</label>
|
||||||
|
<b>{{formData.date ? formData.date : '-'}}</b>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-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="p-grid p-nogutter p-justify-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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
LiveEditor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -106,9 +106,12 @@ export default {
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
<div class="p-d-flex p-jc-between">
|
||||||
<span>View on GitHub</span>
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
</a>
|
<span>View on GitHub</span>
|
||||||
|
</a>
|
||||||
|
<LiveEditor name="TabMenuDemo" :sources="sources" :router="true" />
|
||||||
|
</div>
|
||||||
<pre v-code>
|
<pre v-code>
|
||||||
<code><template v-pre>
|
<code><template v-pre>
|
||||||
<TabMenu :model="items" />
|
<TabMenu :model="items" />
|
||||||
|
|
@ -137,3 +140,137 @@ export default {
|
||||||
</TabView>
|
</TabView>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LiveEditor from '../liveeditor/LiveEditor';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sources: {
|
||||||
|
'template': {
|
||||||
|
content: `<template>
|
||||||
|
<div class="layout-content">
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="card">
|
||||||
|
<TabMenu :model="items" />
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Home',
|
||||||
|
icon: 'pi pi-fw pi-home',
|
||||||
|
to: '/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Calendar',
|
||||||
|
icon: 'pi pi-fw pi-calendar',
|
||||||
|
to: '/calendar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
to: '/edit'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Documentation',
|
||||||
|
icon: 'pi pi-fw pi-file',
|
||||||
|
to: '/documentation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Settings',
|
||||||
|
icon: 'pi pi-fw pi-cog',
|
||||||
|
to: '/settings'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`,
|
||||||
|
style: `<style scoped lang="scss">
|
||||||
|
::v-deep(.tabmenudemo-content) {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
</style>`
|
||||||
|
},
|
||||||
|
'pages': [
|
||||||
|
{
|
||||||
|
'name': 'HomeDemo',
|
||||||
|
'template': `<template>
|
||||||
|
<div class="tabmenudemo-content">
|
||||||
|
<h5>Home Component Content</h5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'CalendarDemo',
|
||||||
|
'template': `<template>
|
||||||
|
<div class="tabmenudemo-content">
|
||||||
|
<h5>Calendar Component Content</h5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'EditDemo',
|
||||||
|
'template': `<template>
|
||||||
|
<div class="tabmenudemo-content">
|
||||||
|
<h5>Edit Component Content</h5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'DocumentationDemo',
|
||||||
|
'template': `<template>
|
||||||
|
<div class="tabmenudemo-content">
|
||||||
|
<h5>Documentation Component Content</h5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'SettingsDemo',
|
||||||
|
'template': `<template>
|
||||||
|
<div class="tabmenudemo-content">
|
||||||
|
<h5>Settings Component Content</h5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
LiveEditor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue