From 75e2bf0fd35f7ff0c02c44e575e2c9b811e3f22b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= Date: Fri, 27 Dec 2019 10:14:09 +0300 Subject: [PATCH] Steps demo added --- package.json | 1 + src/main.js | 2 + src/views/steps/ConfirmationDemo.vue | 83 ++++++++++++++- src/views/steps/PaymentDemo.vue | 75 ++++++++++++- src/views/steps/PersonalDemo.vue | 93 ++++++++++++++++- src/views/steps/SeatDemo.vue | 94 ++++++++++++++++- src/views/steps/StepsDemo.vue | 151 ++++++++++++++++++++++++++- src/views/steps/StepsDoc.vue | 0 8 files changed, 483 insertions(+), 16 deletions(-) mode change 100644 => 100755 src/views/steps/ConfirmationDemo.vue mode change 100644 => 100755 src/views/steps/PaymentDemo.vue mode change 100644 => 100755 src/views/steps/PersonalDemo.vue mode change 100644 => 100755 src/views/steps/SeatDemo.vue mode change 100644 => 100755 src/views/steps/StepsDemo.vue mode change 100644 => 100755 src/views/steps/StepsDoc.vue diff --git a/package.json b/package.json index cb675eadc..5cd91a712 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@vue/cli-plugin-eslint": "^3.2.0", "@vue/cli-service": "^3.2.0", "axios": "^0.19.0", + "vuelidate": "^0.7.4", "babel-eslint": "^10.0.1", "chart.js": "2.7.3", "eslint": "^5.8.0", diff --git a/src/main.js b/src/main.js index 8cef1b397..32b73d225 100644 --- a/src/main.js +++ b/src/main.js @@ -78,7 +78,9 @@ import 'prismjs/themes/prism-coy.css'; import '@fullcalendar/core/main.min.css'; import '@fullcalendar/daygrid/main.min.css'; import '@fullcalendar/timegrid/main.min.css'; +import Vuelidate from 'vuelidate'; +Vue.use(Vuelidate); Vue.use(ToastService); Vue.directive('tooltip', Tooltip); diff --git a/src/views/steps/ConfirmationDemo.vue b/src/views/steps/ConfirmationDemo.vue old mode 100644 new mode 100755 index b01d2b1ec..7ed9245de --- a/src/views/steps/ConfirmationDemo.vue +++ b/src/views/steps/ConfirmationDemo.vue @@ -1,12 +1,91 @@ \ No newline at end of file diff --git a/src/views/steps/PaymentDemo.vue b/src/views/steps/PaymentDemo.vue old mode 100644 new mode 100755 index 311ee96e8..89a59e720 --- a/src/views/steps/PaymentDemo.vue +++ b/src/views/steps/PaymentDemo.vue @@ -1,12 +1,81 @@ \ No newline at end of file diff --git a/src/views/steps/PersonalDemo.vue b/src/views/steps/PersonalDemo.vue old mode 100644 new mode 100755 index c61f705e7..4cb84d6bb --- a/src/views/steps/PersonalDemo.vue +++ b/src/views/steps/PersonalDemo.vue @@ -1,12 +1,97 @@ \ No newline at end of file + + + \ No newline at end of file diff --git a/src/views/steps/SeatDemo.vue b/src/views/steps/SeatDemo.vue old mode 100644 new mode 100755 index 5c5d76e6b..2a173debf --- a/src/views/steps/SeatDemo.vue +++ b/src/views/steps/SeatDemo.vue @@ -1,12 +1,100 @@ \ No newline at end of file diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue old mode 100644 new mode 100755 index d189d58e3..842df7008 --- a/src/views/steps/StepsDemo.vue +++ b/src/views/steps/StepsDemo.vue @@ -8,8 +8,10 @@
- - + + + +
@@ -37,12 +39,28 @@ 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.', life: 3000}); + } + } } @@ -61,5 +79,130 @@ export default { font-size: 2em; margin-top: .3em; } + + .p-card-body { + padding: 0; + padding-bottom: 0; + padding-top: 0; + border-radius: 2px; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); + background-color: #f9f9f9; + } + + .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; + color: #484848; + } + label.wizard-input-label { + opacity: 0.6; + font-size: 14px; + color: #484848; + } + } + } + + .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: 59px; + + &:disabled { + background-color: #a0a0a0; + border: none; + cursor: unset; + } + } + } + + .wizard-footer-back-button { + align-self: center; + text-align: left; + margin-left: .5em; + } + + .wizard-footer-next-button { + align-self: center; + text-align: right; + margin-right: .5em; + } + + .wizard-footer-complete-button { + align-self: center; + text-align: right; + margin-right: .5em; + + & button { + max-width: 88px; + } + } + + .wizard-input-label { + font-size: 12px; + color: #898989; + } + + p.wizard-input-header { + margin-bottom: 7px; + } + + @media screen and (max-width: 768px) { + .wizard-content { + padding-right: 1em; + } + + .wizard-header { + max-height: 66px; + } + } } \ No newline at end of file diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue old mode 100644 new mode 100755