Skip to content

Commit f59ebd4

Browse files
pwelter34pwelter34
authored
Merge pull request #286 from loresoft/feature/modal
Feature/modal
2 parents 4f12388 + ebca24d commit f59ebd4

38 files changed

+2514
-24
lines changed

‎Directory.Build.props‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project>
22

33
<PropertyGroup Label="Package">
4-
<Description>Blazor Controls Library</Description>
4+
<Description>A comprehensive collection of high-quality Blazor components</Description>
55
<Copyright>Copyright © $([System.DateTime]::Now.ToString(yyyy)) LoreSoft</Copyright>
66
<Authors>LoreSoft</Authors>
77
<NeutralLanguage>en-US</NeutralLanguage>

‎LoreSoft.Blazor.Controls.slnx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<Solution>
22
<Folder Name="/Build/">
3-
<File Path=".github/workflows/dotnetcore.yml" />
3+
<File Path=".github/workflows/dotnet.yml" />
44
<File Path="Directory.Build.props" />
55
<File Path="Directory.Packages.props" />
66
<File Path="README.md" />

‎samples/Sample.Core/Pages/Modals/Examples/Basic.razor‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
2+
<h4 class="my-3">Example Alert Dialog with Types</h4>
3+
4+
<div>
5+
<button type="button"
6+
class="btn btn-secondary"
7+
@onclick="ShowPrimaryAlert">
8+
Show Default
9+
</button>
10+
<button type="button"
11+
class="btn btn-secondary"
12+
@onclick="ShowInfoAlert">
13+
Show Information
14+
</button>
15+
<button type="button"
16+
class="btn btn-secondary"
17+
@onclick="ShowSuccessAlert">
18+
Show Success
19+
</button>
20+
<button type="button"
21+
class="btn btn-secondary"
22+
@onclick="ShowWarnAlert">
23+
Show Warning
24+
</button>
25+
<button type="button"
26+
class="btn btn-secondary"
27+
@onclick="ShowDangerAlert">
28+
Show Danger
29+
</button>
30+
</div>
31+
32+
<h4 class="my-3">Confirm Dialog with Custom Buttons</h4>
33+
34+
<div>
35+
<button type="button"
36+
class="btn btn-secondary"
37+
@onclick="ShowDeleteConfirm">
38+
Delete Item
39+
</button>
40+
</div>
41+
42+
<div>
43+
Result: @_deleteConfirm
44+
</div>
45+
46+
<h4 class="my-3">Prompt Dialog with Custom Buttons</h4>
47+
48+
<div>
49+
<button type="button"
50+
class="btn btn-secondary"
51+
@onclick="ShowPrompt">
52+
Enter Name
53+
</button>
54+
</div>
55+
56+
<div>
57+
Result: @_promptResult
58+
</div>
59+
60+
@code {
61+
[Inject]
62+
public required ModalService ModalService { get; set; }
63+
64+
private bool? _deleteConfirm;
65+
private string? _promptResult;
66+
67+
private async Task ShowPrimaryAlert()
68+
{
69+
await ModalService.Alert(
70+
"This is a standard message!"
71+
);
72+
}
73+
74+
private async Task ShowInfoAlert()
75+
{
76+
await ModalService.Alert(
77+
"This is an informational message!",
78+
"Information",
79+
ModalVariant.Information
80+
);
81+
}
82+
83+
private async Task ShowWarnAlert()
84+
{
85+
await ModalService.Alert(
86+
"This is a warning message!",
87+
"Warning",
88+
ModalVariant.Warning
89+
);
90+
}
91+
92+
private async Task ShowSuccessAlert()
93+
{
94+
await ModalService.Alert(
95+
"Operation completed successfully!",
96+
"Success",
97+
ModalVariant.Success
98+
);
99+
}
100+
101+
private async Task ShowDangerAlert()
102+
{
103+
await ModalService.Alert(
104+
"An error occurred!",
105+
"Error",
106+
ModalVariant.Danger,
107+
primaryAction: "Got it"
108+
);
109+
}
110+
111+
private async Task ShowDeleteConfirm()
112+
{
113+
_deleteConfirm = await ModalService.Confirm(
114+
"Are you sure you want to delete this item? This action cannot be undone.",
115+
"Confirm Delete",
116+
ModalVariant.Danger,
117+
primaryAction: "Delete"
118+
);
119+
120+
StateHasChanged();
121+
}
122+
123+
private async Task ShowPrompt()
124+
{
125+
var modal = await ModalService.PromptModal(
126+
"Please enter your name:",
127+
"Name Entry",
128+
"John Doe",
129+
ModalVariant.Primary,
130+
primaryAction: "Submit",
131+
secondaryAction: "Skip"
132+
);
133+
134+
var result = await modal.Result;
135+
_promptResult = result.Data as string;
136+
137+
StateHasChanged();
138+
}
139+
}

‎samples/Sample.Core/Pages/Modals/Examples/Bootstrap.razor‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@using Sample.Core.Models
2+
3+
<p>Use bootstrap styling for the modal</p>
4+
5+
<div>
6+
<button type="button"
7+
class="btn btn-secondary"
8+
@onclick="ShowNewProfile">
9+
Create Profile
10+
</button>
11+
</div>
12+
13+
<div>
14+
<p>
15+
New Profile:
16+
</p>
17+
<ul>
18+
<li><strong>Display Name:</strong> @_newProfile.DisplayName</li>
19+
<li><strong>Email Address:</strong> @_newProfile.EmailAddress</li>
20+
</ul>
21+
</div>
22+
23+
@code {
24+
[Inject]
25+
public required ModalService ModalService { get; set; }
26+
27+
private Profile _newProfile = new Profile();
28+
29+
private async Task ShowNewProfile()
30+
{
31+
_newProfile = new Profile();
32+
33+
var parameters = ModalParameters.Create()
34+
.Title("New Profile")
35+
.Message("Please enter the new profile information.")
36+
.Parameter(nameof(CustomModal.Profile), _newProfile)
37+
.Style(b => b.AddStyle("max-width", "700px"));
38+
39+
var modal = await ModalService.Show<CustomModal>(parameters);
40+
var result = await modal.Result;
41+
42+
if (result.Cancelled)
43+
return;
44+
45+
var profile = result.Data as Profile;
46+
if (profile is not null)
47+
_newProfile = profile;
48+
49+
StateHasChanged();
50+
}
51+
}

‎samples/Sample.Core/Pages/Modals/Examples/BootstrapModal.razor‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
@using Sample.Core.Models
2+
@inherits ModalComponentBase
3+
4+
<div class="modal-dialog">
5+
<div class="modal-content">
6+
<form @onsubmit="SubmitAsync">
7+
<div class="modal-header">
8+
<h3 class="modal-title">@Title</h3>
9+
<button type="button"
10+
class="btn-close"
11+
aria-label="Close"
12+
@onclick="CancelAsync" />
13+
</div>
14+
<div class="modal-body">
15+
<h5>@Message</h5>
16+
<div class="mb-2">
17+
<label for="DisplayName">Display Name:</label>
18+
<input id="DisplayName"
19+
type="text"
20+
class="dialog-input"
21+
required
22+
@bind="Profile.DisplayName"
23+
@bind:event="oninput" />
24+
</div>
25+
<div class="mb-2">
26+
<label for="EmailAddress">Email Address:</label>
27+
<input id="EmailAddress"
28+
type="email"
29+
class="dialog-input"
30+
required
31+
@bind="Profile.EmailAddress"
32+
@bind:event="oninput" />
33+
</div>
34+
</div>
35+
<div class="modal-footer">
36+
<button type="button"
37+
class="btn-secondary"
38+
@onclick="CancelAsync">
39+
@SecondaryAction
40+
</button>
41+
<button type="submit"
42+
class="btn-primary">
43+
@PrimaryAction
44+
</button>
45+
</div>
46+
</form>
47+
</div>
48+
</div>
49+
50+
@code {
51+
[Parameter]
52+
public Profile Profile { get; set; } = new Profile();
53+
54+
public Profile Model { get; set; } = null!;
55+
56+
protected override void OnInitialized()
57+
{
58+
Model = Profile;
59+
}
60+
61+
private async Task SubmitAsync()
62+
{
63+
await CloseAsync(Profile);
64+
}
65+
}

‎samples/Sample.Core/Pages/Modals/Examples/Custom.razor‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
@using Sample.Core.Models
2+
3+
4+
<div>
5+
<button type="button"
6+
class="btn btn-secondary"
7+
@onclick="ShowCurrentProfile">
8+
Show Profile
9+
</button>
10+
</div>
11+
12+
<div>
13+
<p>
14+
Current Profile:
15+
</p>
16+
<ul>
17+
<li><strong>Display Name:</strong> @_currentProfile.DisplayName</li>
18+
<li><strong>Email Address:</strong> @_currentProfile.EmailAddress</li>
19+
</ul>
20+
</div>
21+
22+
<div>
23+
<button type="button"
24+
class="btn btn-secondary"
25+
@onclick="ShowNewProfile">
26+
Create Profile
27+
</button>
28+
</div>
29+
30+
<div>
31+
<p>
32+
New Profile:
33+
</p>
34+
<ul>
35+
<li><strong>Display Name:</strong> @_newProfile.DisplayName</li>
36+
<li><strong>Email Address:</strong> @_newProfile.EmailAddress</li>
37+
</ul>
38+
</div>
39+
40+
@code {
41+
[Inject]
42+
public required ModalService ModalService { get; set; }
43+
44+
private Profile _currentProfile = new Profile
45+
{
46+
DisplayName = "John Smith",
47+
EmailAddress = "john.smith@email.com"
48+
};
49+
50+
private Profile _newProfile = new Profile();
51+
52+
private async Task ShowCurrentProfile()
53+
{
54+
var parameters = ModalParameters.Create()
55+
.Title("Update Profile")
56+
.Message("Please update your profile information.")
57+
.Parameter(nameof(CustomModal.Profile), _currentProfile)
58+
.Style(b => b.AddStyle("max-width", "700px"));
59+
60+
var modal = await ModalService.Show<CustomModal>(parameters);
61+
var result = await modal.Result;
62+
63+
if (result.Cancelled)
64+
return;
65+
66+
var profile = result.Data as Profile;
67+
if (profile is not null)
68+
_currentProfile = profile;
69+
70+
StateHasChanged();
71+
}
72+
73+
private async Task ShowNewProfile()
74+
{
75+
_newProfile = new Profile();
76+
77+
var parameters = ModalParameters.Create()
78+
.Title("Create Profile")
79+
.Message("Please enter the new profile information.")
80+
.Parameter(nameof(CustomModal.Profile), _newProfile)
81+
.ClassName("dialog-xl");
82+
83+
var modal = await ModalService.Show<CustomModal>(parameters);
84+
var result = await modal.Result;
85+
86+
if (result.Cancelled)
87+
return;
88+
89+
var profile = result.Data as Profile;
90+
if (profile is not null)
91+
_newProfile = profile;
92+
93+
StateHasChanged();
94+
}
95+
}

0 commit comments

Comments
 (0)