1414 *
1515 * @param {WizardStepMeta[] } steps
1616 * @param {CurrentStep } currentStep
17- * @returns
17+ * @param {function(string)? } onStepClick
18+ * @returns
1819 */
1920import van from '../van.min.js' ;
2021import { colorMap } from '../display_utils.js' ;
2122
2223const { div, i, span } = van . tags ;
2324
24- const WizardProgressIndicator = ( steps , currentStep ) => {
25+ const WizardProgressIndicator = ( steps , currentStep , onStepClick ) => {
2526 const currentPhysicalIndex = steps . findIndex ( s => s . includedSteps . includes ( currentStep . name ) ) ;
2627 const progressWidth = van . state ( '0px' ) ;
2728
@@ -50,8 +51,12 @@ const WizardProgressIndicator = (steps, currentStep) => {
5051 z-index: -4;
5152 ` ;
5253
53- const currentStepIndicator = ( title , stepIndex ) => div (
54- { class : `flex-column fx-align-flex-center fx-gap-1 step-icon-current` , style : 'position: relative;' } ,
54+ const currentStepIndicator = ( title , stepIndex , step ) => div (
55+ {
56+ class : `flex-column fx-align-flex-center fx-gap-1 step-icon-current` ,
57+ style : `position: relative; ${ onStepClick ? 'cursor: pointer;' : '' } ` ,
58+ onclick : ( ) => onStepClick ?. ( step . includedSteps [ 0 ] ) ,
59+ } ,
5560 stepIndex === 0
5661 ? div ( { style : 'position: absolute; width: 50%; height: 50%; left: 0px; background: var(--dk-dialog-background); z-index: -1;' } , '' )
5762 : '' ,
@@ -66,7 +71,10 @@ const WizardProgressIndicator = (steps, currentStep) => {
6671 ) ;
6772
6873 const pendingStepIndicator = ( title , stepIndex ) => div (
69- { class : `flex-column fx-align-flex-center fx-gap-1 ${ currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary' } ` , style : 'position: relative;' } ,
74+ {
75+ class : `flex-column fx-align-flex-center fx-gap-1 ${ currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary' } ` ,
76+ style : 'position: relative; cursor: default;' ,
77+ } ,
7078 stepIndex === 0
7179 ? div ( { style : 'position: absolute; width: 50%; height: 50%; left: 0px; background: var(--dk-dialog-background); z-index: -1;' } , '' )
7280 : '' ,
@@ -80,8 +88,12 @@ const WizardProgressIndicator = (steps, currentStep) => {
8088 span ( { } , title ) ,
8189 ) ;
8290
83- const completedStepIndicator = ( title , stepIndex ) => div (
84- { class : `flex-column fx-align-flex-center fx-gap-1 ${ currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary' } ` , style : 'position: relative;' } ,
91+ const completedStepIndicator = ( title , stepIndex , step ) => div (
92+ {
93+ class : `flex-column fx-align-flex-center fx-gap-1 ${ currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary' } ` ,
94+ style : `position: relative; ${ onStepClick ? 'cursor: pointer;' : '' } ` ,
95+ onclick : ( ) => onStepClick ?. ( step . includedSteps [ 0 ] ) ,
96+ } ,
8597 stepIndex === 0
8698 ? div ( { style : 'position: absolute; width: 50%; height: 50%; left: 0px; background: var(--dk-dialog-background); z-index: -1;' } , '' )
8799 : '' ,
@@ -134,9 +146,9 @@ const WizardProgressIndicator = (steps, currentStep) => {
134146 ...steps . map ( ( step , physicalIdx ) => {
135147 if ( step . index < currentStep . index ) {
136148 if ( step . skipped ) return skippedStepIndicator ( step . title , physicalIdx ) ;
137- return completedStepIndicator ( step . title , physicalIdx ) ;
149+ return completedStepIndicator ( step . title , physicalIdx , step ) ;
138150 } else if ( step . includedSteps . includes ( currentStep . name ) ) {
139- return currentStepIndicator ( step . title , physicalIdx ) ;
151+ return currentStepIndicator ( step . title , physicalIdx , step ) ;
140152 } else {
141153 return pendingStepIndicator ( step . title , physicalIdx ) ;
142154 }
0 commit comments