From f16b42730319547fbc2084e210762fd22f333901 Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Thu, 28 Feb 2019 19:07:12 +0100 Subject: [PATCH 01/13] Enable "next button" if step is completed. I must allow the users to review the previous steps of a form. Since the "can-continue" event is triggered by Vee Validate, if the form is correct the user must be able to continue after going back and deciding not to make changes at all. --- src/HorizontalStepper.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/HorizontalStepper.vue b/src/HorizontalStepper.vue index d3beaad..6e21e9b 100644 --- a/src/HorizontalStepper.vue +++ b/src/HorizontalStepper.vue @@ -151,6 +151,11 @@ export default { if (!back) { this.$emit("completed-step", this.previousStep); } + + if(this.steps[index].completed) { + this.canContinue = true; + } + } this.$emit("active-step", this.currentStep); }, From 415c15d3151aaba43e3074e5b386b4b4ffb1164c Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Thu, 28 Feb 2019 19:30:42 +0100 Subject: [PATCH 02/13] Added "review" prop (default: false) The prop review can be applied to the horizontal-stepper component. If set to true, it always enable the "next" button if the step is complete. It's useful when giving a quick review to a previously completed (and correct) form. --- src/HorizontalStepper.vue | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/HorizontalStepper.vue b/src/HorizontalStepper.vue index 6e21e9b..16203d0 100644 --- a/src/HorizontalStepper.vue +++ b/src/HorizontalStepper.vue @@ -94,6 +94,10 @@ export default { reset: { type: Boolean, default: false + }, + review: { + type: Boolean, + default: false } }, @@ -152,8 +156,10 @@ export default { this.$emit("completed-step", this.previousStep); } - if(this.steps[index].completed) { - this.canContinue = true; + if(this.review) { + if(this.steps[index].completed) { + this.canContinue = true; + } } } From 25ef12342d5ad0e3ed5cd79670c1f06b458626f0 Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Fri, 1 Mar 2019 20:25:41 +0100 Subject: [PATCH 03/13] New step option "required" If required is set to "false", the "Next" button is always active --- src/HorizontalStepper.vue | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/HorizontalStepper.vue b/src/HorizontalStepper.vue index 16203d0..302fc5f 100644 --- a/src/HorizontalStepper.vue +++ b/src/HorizontalStepper.vue @@ -162,6 +162,10 @@ export default { } } + if (!this.steps[index].required) { + this.canContinue = true; + } + } this.$emit("active-step", this.currentStep); }, @@ -176,7 +180,13 @@ export default { this.activateStep(currentIndex); } - this.canContinue = false; + + if (!this.steps[this.currentStep.index].required) { + this.canContinue = true; + } else { + this.canContinue = false; + } + this.$forceUpdate(); }, @@ -186,7 +196,11 @@ export default { this.nextStepAction() } - this.canContinue = false; + if (!this.steps[this.currentStep.index].required) { + this.canContinue = true; + } else { + this.canContinue = false; + } this.$emit("before-next-step", { currentStep: this.currentStep }, (next = true) => { this.canContinue = true; From 72ebc904860133516d942dee21ac1f269b86108a Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Tue, 12 Mar 2019 16:57:28 +0100 Subject: [PATCH 04/13] Pass prop "isready" to single component --- src/HorizontalStepper.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/HorizontalStepper.vue b/src/HorizontalStepper.vue index 302fc5f..ae63569 100644 --- a/src/HorizontalStepper.vue +++ b/src/HorizontalStepper.vue @@ -30,10 +30,10 @@ - + - +
From 6144edba401e67dc649fcaf3e825ca66fc758fb8 Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Thu, 30 May 2019 17:54:51 +0200 Subject: [PATCH 05/13] Changed to red --- src/HorizontalStepper.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/HorizontalStepper.scss b/src/HorizontalStepper.scss index faedcc9..8bccab4 100644 --- a/src/HorizontalStepper.scss +++ b/src/HorizontalStepper.scss @@ -57,8 +57,8 @@ align-items: center; justify-content: space-between; &.next { - border: 2px solid #3383c8; - color: #3383c8; + border: 2px solid #d80000; + color: #d80000; right: 1%; &.deactivated { border: 2px solid #cccccc !important; @@ -122,7 +122,7 @@ padding: 0 1rem; background-color: white; i { - background-color: #3383c8; + background-color: #d80000; color: #fff; border-radius: 100rem; padding: 1rem; @@ -171,7 +171,7 @@ align-items: center; justify-content: space-between; &.next { - background-color: #3383c8; + background-color: #d80000; color: white; @include shadow(1); &.deactivated { @@ -184,4 +184,4 @@ } } } -} \ No newline at end of file +} From 528cf93ba951452c3d95c697f3f72b8a670c7a6e Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Tue, 4 Jun 2019 15:27:01 +0200 Subject: [PATCH 06/13] Changed steppen button style --- src/HorizontalStepper.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/HorizontalStepper.scss b/src/HorizontalStepper.scss index 8bccab4..b363bb2 100644 --- a/src/HorizontalStepper.scss +++ b/src/HorizontalStepper.scss @@ -67,6 +67,7 @@ } } &.previous { + border: 2px solid #333333; color: #333333; left: 1%; } From dc6090c8631e679d458f19a6544baa5ecaa92fb5 Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Fri, 14 Jun 2019 10:25:56 +0200 Subject: [PATCH 07/13] "Last button" prop --- src/HorizontalStepper.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/HorizontalStepper.vue b/src/HorizontalStepper.vue index ae63569..b4cd913 100644 --- a/src/HorizontalStepper.vue +++ b/src/HorizontalStepper.vue @@ -42,7 +42,7 @@ {{ 'back' | translate(locale) }}
- {{ (finalStep) ? 'finish' : 'next' | translate(locale) }} + {{ (finalStep) ? lastButton' : 'Next' }} keyboard_arrow_right
@@ -64,6 +64,10 @@ export default { type: String, default: "en" }, + lastButton: { + type: String, + default: "Finish" + }, topButtons: { type: Boolean, default: false From 406c363ae2c52da0cd67efe691e045720f158089 Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Fri, 14 Jun 2019 14:47:59 +0200 Subject: [PATCH 08/13] Bug removal --- src/HorizontalStepper.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/HorizontalStepper.vue b/src/HorizontalStepper.vue index b4cd913..c1e2af6 100644 --- a/src/HorizontalStepper.vue +++ b/src/HorizontalStepper.vue @@ -42,7 +42,7 @@ {{ 'back' | translate(locale) }}
- {{ (finalStep) ? lastButton' : 'Next' }} + {{ (finalStep) ? lastButton : 'Next' }} keyboard_arrow_right
From d310512b603f4f1be7bfabbec9c3dae3235a0757 Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Wed, 14 Aug 2019 00:00:07 +0200 Subject: [PATCH 09/13] New branding style --- src/HorizontalStepper.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/HorizontalStepper.scss b/src/HorizontalStepper.scss index b363bb2..ea746cd 100644 --- a/src/HorizontalStepper.scss +++ b/src/HorizontalStepper.scss @@ -57,8 +57,8 @@ align-items: center; justify-content: space-between; &.next { - border: 2px solid #d80000; - color: #d80000; + border: 2px solid #000; + color: #000; right: 1%; &.deactivated { border: 2px solid #cccccc !important; @@ -123,7 +123,7 @@ padding: 0 1rem; background-color: white; i { - background-color: #d80000; + background-color: #000; color: #fff; border-radius: 100rem; padding: 1rem; @@ -181,7 +181,7 @@ } } &.previous { - color: #333333; + color: #d80000; } } } From 17fd36fa261207e9215a5acbd83ddbfdaac66083 Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Wed, 14 Aug 2019 21:27:45 +0200 Subject: [PATCH 10/13] New button styling --- src/HorizontalStepper.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/HorizontalStepper.scss b/src/HorizontalStepper.scss index ea746cd..4d68440 100644 --- a/src/HorizontalStepper.scss +++ b/src/HorizontalStepper.scss @@ -171,6 +171,7 @@ display: flex; align-items: center; justify-content: space-between; + border-radius: 30px!important; &.next { background-color: #d80000; color: white; From fe56196905cee10c10851689e08f6d2db9c0e14a Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Sun, 15 Sep 2019 20:13:57 +0200 Subject: [PATCH 11/13] New button style --- src/HorizontalStepper.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/HorizontalStepper.scss b/src/HorizontalStepper.scss index 4d68440..7c5ecd1 100644 --- a/src/HorizontalStepper.scss +++ b/src/HorizontalStepper.scss @@ -167,6 +167,8 @@ } .stepper-button { padding: .5rem 1rem; + border-radius: 30px; + box-shadow: none; cursor: pointer; display: flex; align-items: center; @@ -175,7 +177,6 @@ &.next { background-color: #d80000; color: white; - @include shadow(1); &.deactivated { background-color: #cccccc !important; cursor: not-allowed !important; From 49c846a3e7e996011e4327f28befb8606ab73e62 Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Sun, 15 Sep 2019 20:16:13 +0200 Subject: [PATCH 12/13] Removed box shadow --- src/HorizontalStepper.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/HorizontalStepper.scss b/src/HorizontalStepper.scss index 7c5ecd1..5c9f495 100644 --- a/src/HorizontalStepper.scss +++ b/src/HorizontalStepper.scss @@ -44,7 +44,6 @@ .stepper-box { background-color: white; - @include shadow(1); min-height: 200px; .top { .stepper-button-top { From 6c0496b29d52915527b0b403991acfd11ddf1740 Mon Sep 17 00:00:00 2001 From: Enea Barbetta Date: Sun, 15 Sep 2019 20:27:25 +0200 Subject: [PATCH 13/13] Changed background --- src/HorizontalStepper.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/HorizontalStepper.scss b/src/HorizontalStepper.scss index 5c9f495..9612e3a 100644 --- a/src/HorizontalStepper.scss +++ b/src/HorizontalStepper.scss @@ -43,7 +43,7 @@ } .stepper-box { - background-color: white; + background-color: transparent; min-height: 200px; .top { .stepper-button-top { @@ -120,7 +120,7 @@ .circle { margin-bottom: 1rem; padding: 0 1rem; - background-color: white; + background-color: transparent; i { background-color: #000; color: #fff;