Skip to content

Commit cc39a16

Browse files
mckaragozmckaragoz
authored
StepperExtended: Remake (#569)
* StepperExtended: Remake * Fix ActionButton Justify End not Working * Add IntroStep * Vertical Mode and Mobile Header Index Text Fix * Fix CSP Violation * Add KeyboardNavigation & Aria Labels * Docs Completion
1 parent e71d6f8 commit cc39a16

File tree

14 files changed

+1974
-446
lines changed

14 files changed

+1974
-446
lines changed

‎CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml‎

Lines changed: 151 additions & 62 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample1.razor‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@using MudExtensions.Utilities
55

66
<MudGrid Class="cursor-default">
7-
<MudItem xs="12" sm="8" Class="d-flex align-center">
7+
<MudItem xs="12" sm="8">
88
<MudStepperExtended @ref="_stepper" Class="mud-width-full" ContentStyle="min-height: 400px" Linear="_linear" Vertical="_vertical" Color="_color" Variant="_variant"
99
Animation="_animation" ShowPreviousButton="_showPreviousButton" ShowNextButton="_showNextButton"
1010
ShowSkipButton="_showSkipButton" ShowStepResultIndicator="_showStepResultIndicator" HeaderBadgeView="_headerBadgeView"
@@ -70,14 +70,13 @@
7070
{
7171
<MudButton Color="Color.Secondary" Variant="_variant" OnClick="@(() => Snackbar.Add("Custom cancel button clicked.", Severity.Info))">Cancel</MudButton>
7272
}
73-
@* <MudSpacer /> *@
7473
</ActionContent>
7574
</MudStepperExtended>
7675
</MudItem>
7776

7877
<MudItem xs="12" sm="4">
7978
<MudStack Spacing="4">
80-
<MudNumericField @bind-Value="_activeIndex" Label="Change ActiveIndex" @bind-Value:after="(() => _stepper.SetActiveStepByIndex(_activeIndex))" Variant="Variant.Outlined" Margin="Margin.Dense" />
79+
<MudNumericField @bind-Value="_activeIndex" Label="Change ActiveIndex" @bind-Value:after="(async() => await _stepper.GoToStepAsync(_activeIndex))" Variant="Variant.Outlined" Margin="Margin.Dense" />
8180
<MudCheckBox @bind-Value="_vertical" Color="Color.Secondary" Label="Vertical" Dense="true" />
8281
<MudCheckBox @bind-Value="_linear" Color="Color.Secondary" Label="Linear" Dense="true" />
8382
<MudCheckBox @bind-Value="_animation" Color="Color.Secondary" Label="Enable Animation" Dense="true" />
@@ -136,9 +135,9 @@
136135
</MudGrid>
137136

138137
@code {
139-
MudStepperExtended? _stepper = new();
140-
MudForm? _form = new();
141-
MudForm? _form2 = new();
138+
MudStepperExtended _stepper = default!;
139+
MudForm _form = default!;
140+
MudForm _form2 = default!;
142141
bool _checkValidationBeforeComplete = false;
143142
bool _linear;
144143
bool _mobileView;

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample3.razor‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
@namespace MudExtensions.Docs.Examples
2+
@inject ISnackbar Snackbar
3+
@inject IDialogService DialogService
4+
5+
<MudGrid Class="cursor-default">
6+
<MudItem xs="12" sm="8" Class="d-flex align-center">
7+
8+
<MudStepperExtended @ref="_stepper"
9+
Class="mud-width-full" ContentStyle="min-height: 400px"
10+
Linear="_linear" Vertical="_vertical"
11+
PreventStepChangeAsync="CheckChange" BeforeFinishedAsync="BeforeFinishedAsync" OnFinished="OnFinished"
12+
Variant="Variant.Filled" Color="Color.Secondary" ContentClass="d-flex align-center justify-center mud-height-full"
13+
MobileView="_mobileView" Loading="_loading" HeaderTextView="HeaderTextView.All" StepperActionsJustify="_stepperActionsJustify">
14+
15+
<ChildContent>
16+
<MudStepExtended Icon="@Icons.Material.Filled.DoneAll" Title="Start Your Reservation" IsIntroStep="true">
17+
<div class="d-flex flex-column align-center justify-center mud-height-full">
18+
<MudIcon Icon="@Icons.Material.Filled.Book" Size="Size.Large" Color="Color.Secondary" />
19+
<MudText Typo="Typo.h6" Class="mt-2">This is your reservation wizard.</MudText>
20+
<MudText Typo="Typo.h6" Class="mt-2">Press start when you are ready.</MudText>
21+
</div>
22+
</MudStepExtended>
23+
24+
<MudStepExtended Icon="@Icons.Material.Filled.Approval" Title="Customer Info" StatusChanged="OnStatusChanged" Order="_infoStepOrder">
25+
<MudForm @ref="_form">
26+
<MudStack>
27+
<MudTextField T="string" Label="Name" Variant="Variant.Filled" Required="true" />
28+
<MudTextField T="string" Label="Last Name" Variant="Variant.Filled" Required="true" />
29+
<MudTextField T="string" Label="Address" Variant="Variant.Filled" />
30+
</MudStack>
31+
</MudForm>
32+
</MudStepExtended>
33+
34+
<MudStepExtended Title="Booking Options" Icon="@Icons.Material.Filled.MoreVert" Optional="true" Order="_optionsStepOrder">
35+
<MudCheckBox T="bool" Label="Early Check-in" />
36+
<MudCheckBox T="bool" Label="Late Check-out" />
37+
<MudCheckBox T="bool" Label="Twin Bed" />
38+
</MudStepExtended>
39+
40+
<MudStepExtended Icon="@Icons.Material.Filled.Money" Title="Payment" Order="_paymentStepOrder">
41+
<MudForm @ref="_form2">
42+
<MudStack>
43+
<MudTextField T="string" Label="Card Number" Variant="Variant.Filled" Required="true" />
44+
<MudStack Row="true">
45+
<MudTextField T="string" Label="Expire Date" Required="true" />
46+
<MudTextField T="string" Label="CVC" Required="true" />
47+
</MudStack>
48+
</MudStack>
49+
</MudForm>
50+
</MudStepExtended>
51+
52+
@if (_hasResultStep)
53+
{
54+
<MudStepExtended Icon="@Icons.Material.Filled.DoneAll" Title="Reservation Completed" IsResultStep="true">
55+
<div class="d-flex flex-column align-center justify-center" style="height: 200px">
56+
<MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Large" Color="Color.Secondary" />
57+
<MudText Typo="Typo.h6" Class="mt-2">Your reservation is completed successfully.</MudText>
58+
</div>
59+
</MudStepExtended>
60+
}
61+
62+
</ChildContent>
63+
64+
</MudStepperExtended>
65+
66+
</MudItem>
67+
68+
<MudItem xs="12" sm="4">
69+
<MudStack Spacing="4">
70+
<MudNumericField @bind-Value="_infoStepOrder"
71+
Label="Info Step Order"
72+
@bind-Value:after="@(() => _stepper.ForceRender())"
73+
Variant="Variant.Outlined"
74+
Margin="Margin.Dense"
75+
Immediate="true" />
76+
77+
<MudNumericField @bind-Value="_optionsStepOrder"
78+
Label="Options Step Order"
79+
@bind-Value:after="@(() => _stepper.ForceRender())"
80+
Variant="Variant.Outlined"
81+
Margin="Margin.Dense"
82+
Immediate="true" />
83+
84+
<MudNumericField @bind-Value="_paymentStepOrder"
85+
Label="Payment Step Order"
86+
@bind-Value:after="@(() => _stepper.ForceRender())"
87+
Variant="Variant.Outlined"
88+
Margin="Margin.Dense"
89+
Immediate="true" />
90+
<MudSelect @bind-Value="_stepperActionsJustify" Variant="Variant.Outlined" Label="Action Buttons Justify" Margin="Margin.Dense" Dense="true">
91+
@foreach (StepperActionsJustify item in Enum.GetValues<StepperActionsJustify>())
92+
{
93+
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
94+
}
95+
</MudSelect>
96+
<MudCheckBox @bind-Value="_vertical" Label="Vertical" />
97+
<MudCheckBox @bind-Value="_linear" Label="Linear" />
98+
<MudSwitchM3 @bind-Value="_mobileView" Label="Mobile View" Color="Color.Secondary" />
99+
<MudSwitchM3 @bind-Value="_hasResultStep" Label="Has Result Step" Color="Color.Secondary" />
100+
101+
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="(() => _stepper?.Reset())">
102+
Reset
103+
</MudButton>
104+
</MudStack>
105+
</MudItem>
106+
107+
</MudGrid>
108+
109+
@code {
110+
MudStepperExtended? _stepper;
111+
MudForm _form = new();
112+
MudForm _form2 = new();
113+
bool _linear;
114+
bool _mobileView;
115+
bool _vertical;
116+
bool _loading;
117+
bool _hasResultStep = true;
118+
int _infoStepOrder;
119+
int _optionsStepOrder;
120+
int _paymentStepOrder;
121+
StepperActionsJustify _stepperActionsJustify = StepperActionsJustify.SpaceBetween;
122+
123+
private void OnStatusChanged(StepStatus status)
124+
{
125+
Snackbar.Add($"Customer Info step is now: {status}.", Severity.Info);
126+
}
127+
128+
private async Task<bool> CheckChange(StepChangeDirection direction, int targetIndex)
129+
{
130+
if (direction == StepChangeDirection.Backward)
131+
return false;
132+
133+
if (_stepper?.GetActiveIndex() == 0)
134+
{
135+
_loading = true;
136+
StateHasChanged();
137+
await Task.Delay(500);
138+
139+
await _form.Validate();
140+
_loading = false;
141+
StateHasChanged();
142+
143+
return !_form.IsValid;
144+
}
145+
146+
if (_stepper?.GetActiveIndex() == 2)
147+
{
148+
_loading = true;
149+
StateHasChanged();
150+
await Task.Delay(500);
151+
152+
await _form2.Validate();
153+
_loading = false;
154+
StateHasChanged();
155+
156+
return !_form2.IsValid;
157+
}
158+
159+
return false;
160+
}
161+
162+
private async Task<bool> BeforeFinishedAsync()
163+
{
164+
var result = await DialogService.ShowMessageBox(
165+
"Confirm",
166+
"All steps are completed. Do you want to finish?",
167+
yesText: "Finish",
168+
cancelText: "Cancel"
169+
);
170+
171+
return result == true;
172+
}
173+
174+
private Task OnFinished()
175+
{
176+
Snackbar.Add("Reservation process finished successfully!", Severity.Success);
177+
return Task.CompletedTask;
178+
}
179+
}

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/StepperExtendedPage.razor‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,29 @@
22
@namespace MudExtensions.Docs.Pages
33

44
<ExamplePage Component="typeof(MudStepperExtended)">
5-
<ExampleCard ComponentName="StepperExtended" ExampleName="StepperExtendedExample1" Title="Playground" Description="Place MudSteps in the MudStepper.">
5+
6+
<ExampleCard ComponentName="StepperExtended"
7+
ExampleName="StepperExtendedExample1"
8+
Title="Playground"
9+
Description="Basic usage and interactive settings.">
10+
611
<StepperExtendedExample1 />
712
</ExampleCard>
813

9-
<ExampleCard ComponentName="StepperExtended" ExampleName="StepperExtendedExample2" Title="Order" Description="You can set each step's order dynamically.">
14+
<ExampleCard ComponentName="StepperExtended"
15+
ExampleName="StepperExtendedExample2"
16+
Title="Order"
17+
Description="You can set each step's order dynamically and reorder at runtime.">
18+
1019
<StepperExtendedExample2 />
1120
</ExampleCard>
21+
22+
<ExampleCard ComponentName="StepperExtended"
23+
ExampleName="StepperExtendedExample3"
24+
Title="Full Flow & Validation"
25+
Description="Advanced flow with BeforeFinishedAsync, OnFinished, validation, dynamic ResultStep, and step status events.">
26+
27+
<StepperExtendedExample3 />
28+
</ExampleCard>
29+
1230
</ExamplePage>

0 commit comments

Comments
 (0)