@dcrackel/meyersquaredui 1.0.111 → 1.0.112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import ProgressTracker from './ProgressTracker.vue';
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title: '
|
|
4
|
+
title: 'Components/ProgressTracker',
|
|
5
5
|
component: ProgressTracker,
|
|
6
|
+
argTypes: {
|
|
7
|
+
currentPhase: { control: { type: 'number', min: 0, max: 4 } },
|
|
8
|
+
highlightPhase: { control: { type: 'number', min: 0, max: 4 } },
|
|
9
|
+
isEventComplete: { control: 'boolean' },
|
|
10
|
+
},
|
|
6
11
|
};
|
|
7
12
|
|
|
8
13
|
const Template = (args) => ({
|
|
@@ -13,21 +18,44 @@ const Template = (args) => ({
|
|
|
13
18
|
template: '<ProgressTracker v-bind="args" />',
|
|
14
19
|
});
|
|
15
20
|
|
|
16
|
-
export const
|
|
17
|
-
|
|
18
|
-
currentPhase: 2, // Example:
|
|
21
|
+
export const Default = Template.bind({});
|
|
22
|
+
Default.args = {
|
|
23
|
+
currentPhase: 2, // Example: Pool Results
|
|
24
|
+
highlightPhase: 1, // Example: Pools (User viewing Pools page)
|
|
19
25
|
isEventComplete: false,
|
|
26
|
+
phases: [
|
|
27
|
+
{ label: 'Registration', icon: 'fa-solid fa-file-alt' },
|
|
28
|
+
{ label: 'Pools', icon: 'fa-kit fa-longsword' },
|
|
29
|
+
{ label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
|
|
30
|
+
{ label: 'Bracket', icon: 'fa-solid fa-sitemap' },
|
|
31
|
+
{ label: 'Final Result', icon: 'fa-solid fa-trophy' },
|
|
32
|
+
],
|
|
20
33
|
};
|
|
21
34
|
|
|
22
|
-
export const
|
|
23
|
-
|
|
24
|
-
currentPhase:
|
|
35
|
+
export const EventComplete = Template.bind({});
|
|
36
|
+
EventComplete.args = {
|
|
37
|
+
currentPhase: 4, // Event is complete
|
|
38
|
+
highlightPhase: 4, // User is viewing the final results
|
|
39
|
+
isEventComplete: true,
|
|
25
40
|
phases: [
|
|
26
41
|
{ label: 'Registration', icon: 'fa-solid fa-file-alt' },
|
|
27
|
-
{ label: '
|
|
42
|
+
{ label: 'Pools', icon: 'fa-kit fa-longsword' },
|
|
43
|
+
{ label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
|
|
44
|
+
{ label: 'Bracket', icon: 'fa-solid fa-sitemap' },
|
|
45
|
+
{ label: 'Final Result', icon: 'fa-solid fa-trophy' },
|
|
46
|
+
],
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export const EarlyPhase = Template.bind({});
|
|
50
|
+
EarlyPhase.args = {
|
|
51
|
+
currentPhase: 0, // Event hasn't started yet
|
|
52
|
+
highlightPhase: 0, // Viewing registration page
|
|
53
|
+
isEventComplete: false,
|
|
54
|
+
phases: [
|
|
55
|
+
{ label: 'Registration', icon: 'fa-solid fa-file-alt' },
|
|
56
|
+
{ label: 'Pools', icon: 'fa-kit fa-longsword' },
|
|
28
57
|
{ label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
|
|
29
58
|
{ label: 'Bracket', icon: 'fa-solid fa-sitemap' },
|
|
30
59
|
{ label: 'Final Result', icon: 'fa-solid fa-trophy' },
|
|
31
60
|
],
|
|
32
|
-
isEventComplete: true,
|
|
33
61
|
};
|
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
<BaseText
|
|
30
30
|
tag="p"
|
|
31
31
|
size="sm"
|
|
32
|
-
:weight="
|
|
32
|
+
:weight="highlightPhase === index ? 'bold' : 'normal'"
|
|
33
33
|
class="mt-2 transition-all duration-300"
|
|
34
34
|
:class="{
|
|
35
|
-
'font-bold text-accent': isPhaseActive(index),
|
|
36
|
-
'text-gray-600': !isPhaseActive(index),
|
|
35
|
+
'font-bold text-accent': isPhaseActive(index) || highlightPhase === index,
|
|
36
|
+
'text-gray-600': !isPhaseActive(index) && highlightPhase !== index,
|
|
37
37
|
'hover:text-accent': hoveredPhase === index && index <= currentPhase,
|
|
38
38
|
}"
|
|
39
39
|
>
|
|
@@ -68,6 +68,10 @@ export default {
|
|
|
68
68
|
required: true,
|
|
69
69
|
default: 0,
|
|
70
70
|
},
|
|
71
|
+
highlightPhase: {
|
|
72
|
+
type: Number,
|
|
73
|
+
default: null,
|
|
74
|
+
},
|
|
71
75
|
isEventComplete: {
|
|
72
76
|
type: Boolean,
|
|
73
77
|
default: false,
|