From 59ca41febbb55b561d8bb49a217adab67f92b783 Mon Sep 17 00:00:00 2001
From: donalfenwick <37119470+donalfenwick@users.noreply.github.com>
Date: Tue, 22 Jun 2021 10:50:26 +0100
Subject: [PATCH] add class 'completed' to any step that comes before the
 'active' step to permit styling

---
 src/js/util.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/js/util.js b/src/js/util.js
index b772ea8..3a98387 100644
--- a/src/js/util.js
+++ b/src/js/util.js
@@ -8,7 +8,8 @@ const ClassName = {
   BLOCK: 'dstepper-block',
   NONE: 'dstepper-none',
   FADE: 'fade',
-  VERTICAL: 'vertical'
+  VERTICAL: 'vertical',
+  COMPLETED: 'completed'
 }
 
 const transitionEndEvent = 'transitionend'
@@ -62,6 +63,7 @@ const showStep = (stepperNode, step, stepList, options) => {
     if (stepperNode.classList.contains(ClassName.LINEAR)) {
       trigger.setAttribute('disabled', 'disabled')
     }
+    step.classList.remove(ClassName.COMPLETED);
   })
 
   step.classList.add(ClassName.ACTIVE)
@@ -72,6 +74,12 @@ const showStep = (stepperNode, step, stepList, options) => {
   if (stepperNode.classList.contains(ClassName.LINEAR)) {
     currentTrigger.removeAttribute('disabled')
   }
+  const stepIndex = stepList.indexOf(step); 
+  stepList.forEach((itm, itmIndex) => {
+    if(itmIndex < stepIndex){
+      itm.classList.add(ClassName.COMPLETED); 
+    }
+  })
 }
 
 const showContent = (stepperNode, content, contentList, activeContent, done) => {