Merge branch 'master' of https://github.com/primefaces/primevue
commit
c36f11c024
|
@ -13,43 +13,43 @@
|
|||
</template>
|
||||
<template slot="content">
|
||||
<div class="p-grid p-fluid wizard-content wizard-confirmation">
|
||||
<div class="p-col-12 p-md-3" style="max-width: 170px;">
|
||||
<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-3" style="max-width: 75px;">
|
||||
<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" style="max-width: 170px;">
|
||||
<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" style="max-width: 130px;">
|
||||
<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-2" style="max-width: 53px;">
|
||||
<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-4" style="max-width: 170px;">
|
||||
<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" style="max-width: 160px;">
|
||||
<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" style="max-width: 53px;">
|
||||
<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" style="max-width: 53px;">
|
||||
<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>
|
||||
|
@ -58,10 +58,10 @@
|
|||
<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()" />
|
||||
<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()" />
|
||||
<Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -18,21 +18,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="p-grid p-fluid wizard-content">
|
||||
<div class="p-col-12 p-md-6" style="max-width: 391px;">
|
||||
<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-4" style="max-width: 252px">
|
||||
<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-1" style="max-width: 69px">
|
||||
<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-1" style="max-width: 69px">
|
||||
<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>
|
||||
|
@ -47,10 +47,10 @@
|
|||
<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()" />
|
||||
<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()" />
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -45,10 +45,10 @@
|
|||
<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" />
|
||||
<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)" />
|
||||
<Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -42,10 +42,10 @@
|
|||
<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()" />
|
||||
<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()" />
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -58,7 +58,7 @@ export default {
|
|||
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.', life: 3000});
|
||||
this.$toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.'});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -127,12 +127,10 @@ export default {
|
|||
|
||||
p {
|
||||
font-weight: 600;
|
||||
color: #484848;
|
||||
}
|
||||
label.wizard-input-label {
|
||||
opacity: 0.6;
|
||||
font-size: 14px;
|
||||
color: #484848;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -153,7 +151,7 @@ export default {
|
|||
margin-right:0;
|
||||
|
||||
& button {
|
||||
max-width: 59px;
|
||||
max-width: 77px;
|
||||
|
||||
&:disabled {
|
||||
background-color: #a0a0a0;
|
||||
|
@ -167,12 +165,20 @@ export default {
|
|||
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 {
|
||||
|
@ -181,13 +187,12 @@ export default {
|
|||
margin-right: .5em;
|
||||
|
||||
& button {
|
||||
max-width: 88px;
|
||||
max-width: 108px;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-input-label {
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
p.wizard-input-header {
|
||||
|
|
Loading…
Reference in New Issue