Doc fixed
Yiğit FINDIKLI
parent
a777bf17dc
commit
bbf2bbac34
|
|
@ -119,8 +119,10 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Steps :model="items" :readonly="false" />
|
||||
<router-view />
|
||||
<Steps :model="items" :readonly="true" />
|
||||
<keep-alive>
|
||||
<router-view :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete" />
|
||||
</keep-alive>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -143,10 +145,550 @@ export default {
|
|||
{
|
||||
label: 'Confirmation',
|
||||
to: '/steps/confirmation'
|
||||
}]
|
||||
}],
|
||||
formObject: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'StepsDoc': StepsDoc
|
||||
},
|
||||
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.'});
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
<CodeHighlight lang="css">
|
||||
/deep/ .stepsdemo-content {
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 24px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
i {
|
||||
vertical-align: middle;
|
||||
font-size: 2em;
|
||||
margin-top: .3em;
|
||||
}
|
||||
|
||||
.p-card-body {
|
||||
padding: 0;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.card-header-message {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.wizard-header {
|
||||
background-color: #057ad8;
|
||||
margin:0;
|
||||
max-height: 48px;
|
||||
}
|
||||
|
||||
.wizard-header-content {
|
||||
align-self: center;
|
||||
padding: 0px;
|
||||
font-weight: 600;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.wizard-header-steps {
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
max-width:90px;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.wizard-content {
|
||||
padding-left: 1em;
|
||||
margin-top: .1em;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.wizard-confirmation {
|
||||
box-shadow: 0 25px 0 -23px #ededed;
|
||||
|
||||
p {
|
||||
font-weight: 600;
|
||||
}
|
||||
label.wizard-input-label {
|
||||
opacity: 0.6;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-content-summary {
|
||||
margin-bottom: .1em;
|
||||
padding-left: 1em;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-footer {
|
||||
background-color: #ededed;
|
||||
margin-top: 2em;
|
||||
margin-left: 0;
|
||||
margin-right:0;
|
||||
|
||||
& button {
|
||||
max-width: 77px;
|
||||
|
||||
&:disabled {
|
||||
background-color: #a0a0a0;
|
||||
border: none;
|
||||
cursor: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-footer-back-button {
|
||||
align-self: center;
|
||||
text-align: left;
|
||||
margin-left: .5em;
|
||||
|
||||
span.pi {
|
||||
top: 54%;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-footer-next-button {
|
||||
align-self: center;
|
||||
text-align: right;
|
||||
margin-right: .5em;
|
||||
|
||||
span.pi {
|
||||
top: 54%;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-footer-complete-button {
|
||||
align-self: center;
|
||||
text-align: right;
|
||||
margin-right: .5em;
|
||||
|
||||
& button {
|
||||
max-width: 108px;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-input-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
p.wizard-input-header {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.wizard-content {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.wizard-header {
|
||||
max-height: 66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
<TabPanel header="Personal">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template slot="title">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-header">
|
||||
<div class="p-col-8 wizard-header-content">
|
||||
<p class="card-header-message">Personal Information</p>
|
||||
</div>
|
||||
<div class="p-col-2 wizard-header-steps">
|
||||
<p class="card-header-message">Step 1/4</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="p-grid p-fluid wizard-content-summary">
|
||||
<div class="p-col-12">
|
||||
<p>Please enter your information and proceed to the next step</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content">
|
||||
<div class="p-col-12 p-md-4" style="padding-bottom: 0px; max-width: 235px;">
|
||||
<p>Your Name</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content">
|
||||
<div class="p-col-12 p-md-3" style="max-width: 176px;">
|
||||
<InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" />
|
||||
<label class="wizard-input-label">First</label>
|
||||
<ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px">Firstname is required.</ValidationMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3" style="max-width: 176px;">
|
||||
<InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" />
|
||||
<label class="wizard-input-label">Last</label>
|
||||
<ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px">Lastname is required.</ValidationMessage>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content">
|
||||
<div class="p-col-12 p-md-3" style="max-width: 176px;">
|
||||
<p class="wizard-input-header">Your Age</p>
|
||||
<InputText v-model="$v.age.$model" :class="{'p-error':$v.age.$error && submitted}" />
|
||||
<ValidationMessage v-show="$v.age.$invalid && submitted" style="margin-top: .5em; font-size: 12px">Age should be number.</ValidationMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-footer">
|
||||
<div class="p-col-4 wizard-footer-back-button">
|
||||
<Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
|
||||
</div>
|
||||
<div class="p-col-4 wizard-footer-next-button">
|
||||
<Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import {required, integer} from 'vuelidate/lib/validators';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
age: '',
|
||||
submitted: false
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
firstname: {
|
||||
required
|
||||
},
|
||||
lastname: {
|
||||
required
|
||||
},
|
||||
age: {
|
||||
integer
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextPage(isFormValid) {
|
||||
this.submitted = true;
|
||||
|
||||
if (!isFormValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('nextPage', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
<TabPanel header="Seat">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template slot="title">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-header">
|
||||
<div class="p-col-8 wizard-header-content">
|
||||
<p class="card-header-message">Seat Information</p>
|
||||
</div>
|
||||
<div class="p-col-2 wizard-header-steps">
|
||||
<p class="card-header-message">Step 2/4</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="p-grid p-fluid wizard-content-summary">
|
||||
<div class="p-col-12">
|
||||
<p>Please pick your seat and proceed to the payment</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content">
|
||||
<div class="p-col-12 p-md-4" style="padding-bottom: 0px; max-width: 235px;">
|
||||
<p>Class and Vagon</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content">
|
||||
<div class="p-col-12 p-md-3" style="max-width: 176px;">
|
||||
<Dropdown v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" />
|
||||
<label class="wizard-input-label">Class</label>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3" style="max-width: 176px;">
|
||||
<Dropdown v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" />
|
||||
<label class="wizard-input-label">Vagon</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content">
|
||||
<div class="p-col-12 p-md-3" style="max-width: 176px;">
|
||||
<p class="wizard-input-header">Seat</p>
|
||||
<Dropdown v-model="selectedSeat" :options="seats" optionLabel="seat" placeholder="Select a Seat" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-footer">
|
||||
<div class="p-col-4 wizard-footer-back-button">
|
||||
<Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
|
||||
</div>
|
||||
<div class="p-col-4 wizard-footer-next-button">
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
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('nextPage', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
|
||||
},
|
||||
prevPage() {
|
||||
this.$emit('prevPage', {pageIndex: 1});
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
<TabPanel header="Payment">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template slot="title">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-header">
|
||||
<div class="p-col-8 wizard-header-content">
|
||||
<p class="card-header-message">Payment Information</p>
|
||||
</div>
|
||||
<div class="p-col-2 wizard-header-steps">
|
||||
<p class="card-header-message">Step 3/4</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="p-grid p-fluid wizard-content-summary">
|
||||
<div class="p-col-12">
|
||||
<p>Complete your registration with Payment</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content">
|
||||
<div class="p-col-12 p-md-8" style="max-width: 391px;">
|
||||
<p class="wizard-input-header">Cardholder Name</p>
|
||||
<InputText type="text" v-model="cardholderName" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content">
|
||||
<div class="p-col-12 p-md-5" style="max-width: 252px">
|
||||
<p class="wizard-input-header">Cardholder Number</p>
|
||||
<InputMask mask="9999-9999-9999-9999" v-model="cardholderNumber" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-2" style="max-width: 69px">
|
||||
<p class="wizard-input-header">Date</p>
|
||||
<InputMask mask="99/99" v-model="date" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-2" style="max-width: 69px">
|
||||
<p class="wizard-input-header">CVV</p>
|
||||
<InputMask mask="999" v-model="cvv" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content" style="margin-top: .3em">
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="remember" v-model="remember" :binary="true" />
|
||||
<label for="remember" class="p-checkbox-label">Save credit card information for future usage</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-footer" style="margin-top: .5em">
|
||||
<div class="p-col-4 wizard-footer-back-button">
|
||||
<Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
|
||||
</div>
|
||||
<div class="p-col-4 wizard-footer-next-button">
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cardholderName:'',
|
||||
cardholderNumber:'',
|
||||
date:'',
|
||||
cvv:'',
|
||||
remember:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nextPage() {
|
||||
this.$emit('nextPage', {formData: {cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv}, pageIndex: 2});
|
||||
},
|
||||
prevPage() {
|
||||
this.$emit('prevPage', {pageIndex: 2});
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
<TabPanel header="Confirmation">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="stepsdemo-content">
|
||||
<Card>
|
||||
<template slot="title">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-header">
|
||||
<div class="p-col-8 wizard-header-content">
|
||||
<p class="card-header-message">Confirmation</p>
|
||||
</div>
|
||||
<div class="p-col-2 wizard-header-steps">
|
||||
<p class="card-header-message">Step 4/4</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="p-grid p-fluid wizard-content wizard-confirmation">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<label class="wizard-input-label">Your Name</label>
|
||||
<p>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</p>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-1">
|
||||
<label class="wizard-input-label">Your Age</label>
|
||||
<p>{{formData.age ? formData.age : '-'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content wizard-confirmation">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<label class="wizard-input-label">Seat Class</label>
|
||||
<p>{{formData.class ? formData.class : '-'}}</p>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<label class="wizard-input-label">Vagon Number</label>
|
||||
<p>{{formData.vagon ? formData.vagon : '-'}}</p>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-1">
|
||||
<label class="wizard-input-label">Seat</label>
|
||||
<p>{{formData.seat ? formData.seat : '-'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content wizard-confirmation">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<label class="wizard-input-label">Cardholder Name</label>
|
||||
<p>{{formData.cardholderName ? formData.cardholderName : '-'}}</p>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<label class="wizard-input-label">Cardholder Number</label>
|
||||
<p>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</p>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-1">
|
||||
<label class="wizard-input-label">Date</label>
|
||||
<p>{{formData.date ? formData.date : '-'}}</p>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-1">
|
||||
<label class="wizard-input-label">CVV</label>
|
||||
<p>{{formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-footer">
|
||||
<div class="p-col-4 wizard-footer-back-button">
|
||||
<Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
|
||||
</div>
|
||||
<div class="p-col-6 wizard-footer-complete-button">
|
||||
<Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
props: {
|
||||
formData: Object
|
||||
},
|
||||
methods: {
|
||||
prevPage() {
|
||||
this.$emit('prevPage', {pageIndex: 3});
|
||||
},
|
||||
complete() {
|
||||
this.$emit('complete');
|
||||
}
|
||||
},
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
|
|
|||
Loading…
Reference in New Issue