vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'master' of https://github.com/primefaces/primevue

pull/132/head
cagataycivici 2019-12-30 11:50:38 +03:00
parent 5f3b696d21 14c1a089d4
commit c36f11c024
5 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/steps/ConfirmationDemo.vue
View File

@ -13,43 +13,43 @@
</template> </template>
<template slot="content"> <template slot="content">
<div class="p-grid p-fluid wizard-content wizard-confirmation"> <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> <label class="wizard-input-label">Your Name</label>
<p>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</p> <p>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</p>
</div> </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> <label class="wizard-input-label">Your Age</label>
<p>{{formData.age ? formData.age : '-'}}</p> <p>{{formData.age ? formData.age : '-'}}</p>
</div> </div>
</div> </div>
<div class="p-grid p-fluid wizard-content wizard-confirmation"> <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> <label class="wizard-input-label">Seat Class</label>
<p>{{formData.class ? formData.class : '-'}}</p> <p>{{formData.class ? formData.class : '-'}}</p>
</div> </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> <label class="wizard-input-label">Vagon Number</label>
<p>{{formData.vagon ? formData.vagon : '-'}}</p> <p>{{formData.vagon ? formData.vagon : '-'}}</p>
</div> </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> <label class="wizard-input-label">Seat</label>
<p>{{formData.seat ? formData.seat : '-'}}</p> <p>{{formData.seat ? formData.seat : '-'}}</p>
</div> </div>
</div> </div>
<div class="p-grid p-fluid wizard-content wizard-confirmation"> <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> <label class="wizard-input-label">Cardholder Name</label>
<p>{{formData.cardholderName ? formData.cardholderName : '-'}}</p> <p>{{formData.cardholderName ? formData.cardholderName : '-'}}</p>
</div> </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> <label class="wizard-input-label">Cardholder Number</label>
<p>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</p> <p>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</p>
</div> </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> <label class="wizard-input-label">Date</label>
<p>{{formData.date ? formData.date : '-'}}</p> <p>{{formData.date ? formData.date : '-'}}</p>
</div> </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> <label class="wizard-input-label">CVV</label>
<p>{{formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-'}}</p> <p>{{formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-'}}</p>
</div> </div>
@ -58,10 +58,10 @@
<template slot="footer"> <template slot="footer">
<div class="p-grid p-fluid p-justify-between wizard-footer"> <div class="p-grid p-fluid p-justify-between wizard-footer">
<div class="p-col-4 wizard-footer-back-button"> <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>
<div class="p-col-6 wizard-footer-complete-button"> <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>
</div> </div>
</template> </template>

12
src/views/steps/PaymentDemo.vue
View File

@ -18,21 +18,21 @@
</div> </div>
</div> </div>
<div class="p-grid p-fluid wizard-content"> <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> <p class="wizard-input-header">Cardholder Name</p>
<InputText type="text" v-model="cardholderName" /> <InputText type="text" v-model="cardholderName" />
</div> </div>
</div> </div>
<div class="p-grid p-fluid wizard-content"> <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> <p class="wizard-input-header">Cardholder Number</p>
<InputMask mask="9999-9999-9999-9999" v-model="cardholderNumber" /> <InputMask mask="9999-9999-9999-9999" v-model="cardholderNumber" />
</div> </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> <p class="wizard-input-header">Date</p>
<InputMask mask="99/99" v-model="date" /> <InputMask mask="99/99" v-model="date" />
</div> </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> <p class="wizard-input-header">CVV</p>
<InputMask mask="999" v-model="cvv" /> <InputMask mask="999" v-model="cvv" />
</div> </div>
@ -47,10 +47,10 @@
<template slot="footer"> <template slot="footer">
<div class="p-grid p-fluid p-justify-between wizard-footer" style="margin-top: .5em"> <div class="p-grid p-fluid p-justify-between wizard-footer" style="margin-top: .5em">
<div class="p-col-4 wizard-footer-back-button"> <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>
<div class="p-col-4 wizard-footer-next-button"> <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>
</div> </div>
</template> </template>

4
src/views/steps/PersonalDemo.vue
View File

@ -45,10 +45,10 @@
<template slot="footer"> <template slot="footer">
<div class="p-grid p-fluid p-justify-between wizard-footer"> <div class="p-grid p-fluid p-justify-between wizard-footer">
<div class="p-col-4 wizard-footer-back-button"> <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>
<div class="p-col-4 wizard-footer-next-button"> <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>
</div> </div>
</template> </template>

4
src/views/steps/SeatDemo.vue
View File

@ -42,10 +42,10 @@
<template slot="footer"> <template slot="footer">
<div class="p-grid p-fluid p-justify-between wizard-footer"> <div class="p-grid p-fluid p-justify-between wizard-footer">
<div class="p-col-4 wizard-footer-back-button"> <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>
<div class="p-col-4 wizard-footer-next-button"> <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>
</div> </div>
</template> </template>

17
src/views/steps/StepsDemo.vue
View File

@ -58,7 +58,7 @@ export default {
this.$router.push(this.items[event.pageIndex - 1].to); this.$router.push(this.items[event.pageIndex - 1].to);
}, },
complete() { 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 { p {
font-weight: 600; font-weight: 600;
color: #484848;
} }
label.wizard-input-label { label.wizard-input-label {
opacity: 0.6; opacity: 0.6;
font-size: 14px; font-size: 14px;
color: #484848;
} }
} }
} }
@ -153,7 +151,7 @@ export default {
margin-right:0; margin-right:0;
& button { & button {
max-width: 59px; max-width: 77px;
&:disabled { &:disabled {
background-color: #a0a0a0; background-color: #a0a0a0;
@ -167,12 +165,20 @@ export default {
align-self: center; align-self: center;
text-align: left; text-align: left;
margin-left: .5em; margin-left: .5em;
span.pi {
top: 54%;
}
} }
.wizard-footer-next-button { .wizard-footer-next-button {
align-self: center; align-self: center;
text-align: right; text-align: right;
margin-right: .5em; margin-right: .5em;
span.pi {
top: 54%;
}
} }
.wizard-footer-complete-button { .wizard-footer-complete-button {
@ -181,13 +187,12 @@ export default {
margin-right: .5em; margin-right: .5em;
& button { & button {
max-width: 88px; max-width: 108px;
} }
} }
.wizard-input-label { .wizard-input-label {
font-size: 12px; font-size: 12px;
color: #898989;
} }
p.wizard-input-header { p.wizard-input-header {