@dcrackel/meyersquaredui 1.0.100 → 1.0.102

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.100",
+  "version": "1.0.102",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",

package/src/stories/Molecules/ProgressTracker/ProgressTracker.stories.js

@@ -21,6 +21,13 @@ ActiveEvent.args = {
 
 export const CompletedEvent = Template.bind({});
 CompletedEvent.args = {
-    currentPhase: 3, // All phases are complete
+    currentPhase: 3,
+    phases: [
+        { label: 'Registration', icon: 'fa-solid fa-file-alt' },
+        { label: 'Demo Pools', icon: 'fa-kit fa-longsword' },
+        { label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
+        { label: 'Bracket', icon: 'fa-solid fa-sitemap' },
+        { label: 'Final Result', icon: 'fa-solid fa-trophy' },
+    ],
     isEventComplete: true,
 };

package/src/stories/Molecules/ProgressTracker/ProgressTracker.vue

@@ -1,22 +1,27 @@
 <template>
-  <div class="flex items-center justify-between">
+  <div class="flex items-center justify-between w-full">
     <div
         v-for="(phase, index) in phases"
         :key="index"
-        class="flex items-center flex-grow"
+        class="flex w-full items-center flex-grow"
         @mouseover="handleMouseOver(index)"
         @mouseout="handleMouseOut"
         @click="handlePhaseClick(index)"
+        :class="{
+          'cursor-pointer': index <= currentPhase,
+          'cursor-not-allowed': index > currentPhase,
+        }"
     >
       <!-- Clickable Icon and Label -->
-      <div class="flex flex-col items-center hover:cursor-pointer">
+      <div class="flex flex-col items-center"
+           :class="{'hover:cursor-pointer': index <= currentPhase, 'hover:cursor-default': index > currentPhase}">
         <div
-            class="w-8 h-8 flex items-center justify-center rounded-full transition-all duration-300 border-2 border-accent"
+            class="w-8 h-8 flex items-center justify-center rounded-full transition-all duration-300 border-2"
             :class="{
             'border-accent': isPhaseActive(index),
             'border-gray-300': !isPhaseActive(index),
-            'hover:bg-accent': hoveredPhase === index,
-            'hover:bg-gray-200': hoveredPhase === index && !isPhaseActive(index),
+            'hover:bg-accent': hoveredPhase === index && index <= currentPhase,
+            'hover:bg-gray-200': hoveredPhase === index && !isPhaseActive(index) && index <= currentPhase,
           }"
         >
           <i :class="phase.icon"></i>
@@ -29,7 +34,7 @@
             :class="{
             'font-bold text-accent': isPhaseActive(index),
             'text-gray-600': !isPhaseActive(index),
-            'hover:text-accent': hoveredPhase === index,
+            'hover:text-accent': hoveredPhase === index && index <= currentPhase,
           }"
         >
           {{ phase.label }}
@@ -66,24 +71,24 @@ export default {
     isEventComplete: {
       type: Boolean,
       default: false,
-    }
-  },
-  data() {
-    return {
-      hoveredPhase: null, // Variable to store which phase is hovered over
-    };
-  },
-  computed: {
-    phases() {
-      return [
+    },
+    phases: {
+      type: Array,
+      required: true,
+      default: () => [
         { label: 'Registration', icon: 'fa-solid fa-file-alt' },
         { label: 'Pools', icon: 'fa-kit fa-longsword' },
         { label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
         { label: 'Bracket', icon: 'fa-solid fa-sitemap' },
         { label: 'Final Result', icon: 'fa-solid fa-trophy' },
-      ];
+      ],
     },
   },
+  data() {
+    return {
+      hoveredPhase: null, // Variable to store which phase is hovered over
+    };
+  },
   methods: {
     isPhaseActive(index) {
       return this.isEventComplete || index <= this.currentPhase;
@@ -95,8 +100,10 @@ export default {
       this.hoveredPhase = null;
     },
     handlePhaseClick(index) {
-      // Emit the clicked phase to the parent
-      this.$emit('phase-clicked', index);
+      // Emit the clicked phase to the parent only if the phase is active or previous
+      if (index <= this.currentPhase) {
+        this.$emit('phase-clicked', index);
+      }
     }
   }
 };