Steps demo update
cagataycivici
parent
b210e37d9e
commit
808d911d1f
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #cd3a3a;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #cd3a3a;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #cd3a3a;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: e7a3a3;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-error, .p-invalid {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,67 +2,50 @@
|
|||
<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>
|
||||
Confirmation
|
||||
</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 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-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 class="p-field p-col-12">
|
||||
<label for="Age">Age</label>
|
||||
<b>{{formData.age ? formData.age : '-'}}</b>
|
||||
</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 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 slot="footer">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-footer demo-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 class="p-grid p-nogutter p-justify-between">
|
||||
<Button label="Back" class="disabled-button" @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>
|
||||
|
|
|
|||
|
|
@ -2,56 +2,36 @@
|
|||
<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>
|
||||
Payment Information
|
||||
</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>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12">
|
||||
<label for="class">Class</label>
|
||||
<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 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-col-12 p-md-2" style="max-width: 69px">
|
||||
<p class="wizard-input-header">Date</p>
|
||||
<InputMask mask="99/99" v-model="date" />
|
||||
<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-col-12 p-md-2" style="max-width: 69px">
|
||||
<p class="wizard-input-header">CVV</p>
|
||||
<InputMask mask="999" v-model="cvv" />
|
||||
<div class="p-field p-col-2">
|
||||
<label for="cvv">CVV</label>
|
||||
<InputMask id="cvv" 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 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 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 class="p-grid p-nogutter p-justify-between">
|
||||
<Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -2,52 +2,31 @@
|
|||
<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>
|
||||
Personal Information
|
||||
</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 class="p-fluid">
|
||||
<div class="p-field">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" v-model="$v.firstname.$model" :class="{'p-invalid':$v.firstname.$invalid && submitted}" />
|
||||
<small v-show="$v.firstname.$invalid && submitted" class="p-error">Firstname is required.</small>
|
||||
</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 class="p-field">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText v-model="$v.lastname.$model" :class="{'p-invalid':$v.lastname.$invalid && submitted}" />
|
||||
<small v-show="$v.lastname.$invalid && submitted" class="p-error">Lastname is required.</small>
|
||||
</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-invalid':$v.firstname.$invalid && submitted}" placeholder="Firstname"/>
|
||||
<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-invalid':$v.lastname.$invalid && submitted}" placeholder="Lastname" />
|
||||
<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-invalid':$v.age.$error && submitted}" />
|
||||
<ValidationMessage v-show="$v.age.$invalid && submitted" style="margin-top: .5em; font-size: 12px">Age should be number.</ValidationMessage>
|
||||
<div class="p-field">
|
||||
<label for="age">Age</label>
|
||||
<InputText id="age" v-model="$v.age.$model" :class="{'p-invalid':$v.age.$error && submitted}" />
|
||||
<small v-show="$v.age.$invalid && submitted" class="p-error">Age should be a number.</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-footer demo-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 class="p-grid p-nogutter p-justify-between">
|
||||
<Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
|
||||
<Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
|
@ -89,7 +68,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -1,50 +1,29 @@
|
|||
<template>
|
||||
<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 slot="title">
|
||||
Seat Information
|
||||
</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 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>
|
||||
<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 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>
|
||||
<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" />
|
||||
</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" />
|
||||
</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 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 slot="footer">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-footer demo-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 class="p-grid p-nogutter p-justify-between">
|
||||
<Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Steps :model="items" :readonly="true" style="margin-bottom: 2em"/>
|
||||
<Steps :model="items" :readonly="true" style="margin-bottom: 1rem"/>
|
||||
<keep-alive>
|
||||
<router-view :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete" />
|
||||
</keep-alive>
|
||||
|
|
@ -65,142 +65,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/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;
|
||||
}
|
||||
|
||||
.p-card-content {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-top: 2em;
|
||||
margin-left: 0;
|
||||
margin-right:0;
|
||||
|
||||
button {
|
||||
max-width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-footer-back-button {
|
||||
align-self: center;
|
||||
text-align: left;
|
||||
margin-left: .5em;
|
||||
|
||||
span.pi {
|
||||
margin-top: -.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-footer-next-button {
|
||||
align-self: center;
|
||||
text-align: right;
|
||||
margin-right: .5em;
|
||||
|
||||
span.pi {
|
||||
margin-top: -.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
/deep/ b {
|
||||
display: block
|
||||
}
|
||||
</style>
|
||||
|
|
@ -125,7 +125,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Steps :model="items" :readonly="true" style="margin-bottom: 1em" />
|
||||
<Steps :model="items" :readonly="true" style="margin-bottom: 1rem" />
|
||||
<keep-alive>
|
||||
<router-view :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete" />
|
||||
</keep-alive>
|
||||
|
|
@ -183,52 +183,31 @@ export default {
|
|||
<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>
|
||||
Personal Information
|
||||
</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 class="p-fluid">
|
||||
<div class="p-field">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" v-model="$v.firstname.$model" :class="{'p-invalid':$v.firstname.$invalid && submitted}" />
|
||||
<small v-show="$v.firstname.$invalid && submitted" class="p-error">Firstname is required.</small>
|
||||
</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 class="p-field">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText v-model="$v.lastname.$model" :class="{'p-invalid':$v.lastname.$invalid && submitted}" />
|
||||
<small v-show="$v.lastname.$invalid && submitted" class="p-error">Lastname is required.</small>
|
||||
</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-invalid':$v.firstname.$invalid && submitted}" placeholder="Firstname" />
|
||||
<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-invalid':$v.lastname.$invalid && submitted}" placeholder="Lastname"/>
|
||||
<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-invalid':$v.age.$error && submitted}" />
|
||||
<ValidationMessage v-show="$v.age.$invalid && submitted" style="margin-top: .5em; font-size: 12px">Age should be number.</ValidationMessage>
|
||||
<div class="p-field">
|
||||
<label for="age">Age</label>
|
||||
<InputText id="age" v-model="$v.age.$model" :class="{'p-invalid':$v.age.$error && submitted}" />
|
||||
<small v-show="$v.age.$invalid && submitted" class="p-error">Age should be a number.</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-footer demo-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 class="p-grid p-nogutter p-justify-between">
|
||||
<Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
|
||||
<Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
|
@ -276,56 +255,35 @@ export default {
|
|||
<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 class="stepsdemo-content">
|
||||
<Card>
|
||||
<template slot="title">
|
||||
Seat Information
|
||||
</template>
|
||||
<template 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>
|
||||
<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" />
|
||||
</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" />
|
||||
</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 demo-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">
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div class="p-grid p-nogutter p-justify-between">
|
||||
<Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -379,56 +337,36 @@ export default {
|
|||
<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>
|
||||
Payment Information
|
||||
</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>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12">
|
||||
<label for="class">Class</label>
|
||||
<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 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-col-12 p-md-2" style="max-width: 69px">
|
||||
<p class="wizard-input-header">Date</p>
|
||||
<InputMask mask="99/99" v-model="date" />
|
||||
<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-col-12 p-md-2" style="max-width: 69px">
|
||||
<p class="wizard-input-header">CVV</p>
|
||||
<InputMask mask="999" v-model="cvv" />
|
||||
<div class="p-field p-col-2">
|
||||
<label for="cvv">CVV</label>
|
||||
<InputMask id="cvv" 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 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 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 class="p-grid p-nogutter p-justify-between">
|
||||
<Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
|
||||
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
|
@ -464,67 +402,50 @@ export default {
|
|||
<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>
|
||||
Confirmation
|
||||
</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 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-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 class="p-field p-col-12">
|
||||
<label for="Age">Age</label>
|
||||
<b>{{formData.age ? formData.age : '-'}}</b>
|
||||
</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 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 slot="footer">
|
||||
<div class="p-grid p-fluid p-justify-between wizard-footer demo-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 class="p-grid p-nogutter p-justify-between">
|
||||
<Button label="Back" class="disabled-button" @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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue