Feature/modal

Directory.Build.props

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

LoreSoft.Blazor.Controls.slnx

@@ -1,6 +1,6 @@
 <Solution>
   <Folder Name="/Build/">
-    <File Path=".github/workflows/dotnetcore.yml" />
+    <File Path=".github/workflows/dotnet.yml" />
     <File Path="Directory.Build.props" />
     <File Path="Directory.Packages.props" />
     <File Path="README.md" />

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

@@ -0,0 +1,139 @@
+
+<h4 class="my-3">Example Alert Dialog with Types</h4>
+
+<div>
+    <button type="button"
+            class="btn btn-secondary"
+            @onclick="ShowPrimaryAlert">
+        Show Default
+    </button>
+    <button type="button"
+            class="btn btn-secondary"
+            @onclick="ShowInfoAlert">
+        Show Information
+    </button>
+    <button type="button"
+            class="btn btn-secondary"
+            @onclick="ShowSuccessAlert">
+        Show Success
+    </button>
+    <button type="button"
+            class="btn btn-secondary"
+            @onclick="ShowWarnAlert">
+        Show Warning
+    </button>
+    <button type="button"
+            class="btn btn-secondary"
+            @onclick="ShowDangerAlert">
+        Show Danger
+    </button>
+</div>
+
+<h4 class="my-3">Confirm Dialog with Custom Buttons</h4>
+
+<div>
+    <button type="button"
+            class="btn btn-secondary"
+            @onclick="ShowDeleteConfirm">
+        Delete Item
+    </button>
+</div>
+
+<div>
+    Result: @_deleteConfirm
+</div>
+
+<h4 class="my-3">Prompt Dialog with Custom Buttons</h4>
+
+<div>
+    <button type="button"
+            class="btn btn-secondary"
+            @onclick="ShowPrompt">
+        Enter Name
+    </button>
+</div>
+
+<div>
+    Result: @_promptResult
+</div>
+
+@code {
+    [Inject]
+    public required ModalService ModalService { get; set; }
+
+    private bool? _deleteConfirm;
+    private string? _promptResult;
+
+    private async Task ShowPrimaryAlert()
+    {
+        await ModalService.Alert(
+            "This is a standard message!"
+        );
+    }
+
+    private async Task ShowInfoAlert()
+    {
+        await ModalService.Alert(
+            "This is an informational message!",
+            "Information",
+            ModalVariant.Information
+        );
+    }
+
+    private async Task ShowWarnAlert()
+    {
+        await ModalService.Alert(
+            "This is a warning message!",
+            "Warning",
+            ModalVariant.Warning
+        );
+    }
+
+    private async Task ShowSuccessAlert()
+    {
+        await ModalService.Alert(
+            "Operation completed successfully!",
+            "Success",
+            ModalVariant.Success
+        );
+    }
+
+    private async Task ShowDangerAlert()
+    {
+        await ModalService.Alert(
+            "An error occurred!",
+            "Error",
+            ModalVariant.Danger,
+            primaryAction: "Got it"
+        );
+    }
+
+    private async Task ShowDeleteConfirm()
+    {
+        _deleteConfirm = await ModalService.Confirm(
+            "Are you sure you want to delete this item? This action cannot be undone.",
+            "Confirm Delete",
+            ModalVariant.Danger,
+            primaryAction: "Delete"
+        );
+
+        StateHasChanged();
+    }
+
+    private async Task ShowPrompt()
+    {
+        var modal = await ModalService.PromptModal(
+            "Please enter your name:",
+            "Name Entry",
+            "John Doe",
+            ModalVariant.Primary,
+            primaryAction: "Submit",
+            secondaryAction: "Skip"
+        );
+
+        var result = await modal.Result;
+        _promptResult = result.Data as string;
+
+        StateHasChanged();
+    }
+}

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

@@ -0,0 +1,51 @@
+@using Sample.Core.Models
+
+<p>Use bootstrap styling for the modal</p>
+
+<div>
+    <button type="button"
+            class="btn btn-secondary"
+            @onclick="ShowNewProfile">
+        Create Profile
+    </button>
+</div>
+
+<div>
+    <p>
+        New Profile:
+    </p>
+    <ul>
+        <li><strong>Display Name:</strong> @_newProfile.DisplayName</li>
+        <li><strong>Email Address:</strong> @_newProfile.EmailAddress</li>
+    </ul>
+</div>
+
+@code {
+    [Inject]
+    public required ModalService ModalService { get; set; }
+
+    private Profile _newProfile = new Profile();
+
+    private async Task ShowNewProfile()
+    {
+        _newProfile = new Profile();
+
+        var parameters = ModalParameters.Create()
+            .Title("New Profile")
+            .Message("Please enter the new profile information.")
+            .Parameter(nameof(CustomModal.Profile), _newProfile)
+            .Style(b => b.AddStyle("max-width", "700px"));
+
+        var modal = await ModalService.Show<CustomModal>(parameters);
+        var result = await modal.Result;
+
+        if (result.Cancelled)
+            return;
+
+        var profile = result.Data as Profile;
+        if (profile is not null)
+            _newProfile = profile;
+
+        StateHasChanged();
+    }
+}

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

@@ -0,0 +1,65 @@
+@using Sample.Core.Models
+@inherits ModalComponentBase
+
+<div class="modal-dialog">
+    <div class="modal-content">
+        <form @onsubmit="SubmitAsync">
+            <div class="modal-header">
+                <h3 class="modal-title">@Title</h3>
+                <button type="button"
+                        class="btn-close"
+                        aria-label="Close"
+                        @onclick="CancelAsync" />
+            </div>
+            <div class="modal-body">
+                <h5>@Message</h5>
+                <div class="mb-2">
+                    <label for="DisplayName">Display Name:</label>
+                    <input id="DisplayName"
+                           type="text"
+                           class="dialog-input"
+                           required
+                           @bind="Profile.DisplayName"
+                           @bind:event="oninput" />
+                </div>
+                <div class="mb-2">
+                    <label for="EmailAddress">Email Address:</label>
+                    <input id="EmailAddress"
+                           type="email"
+                           class="dialog-input"
+                           required
+                           @bind="Profile.EmailAddress"
+                           @bind:event="oninput" />
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button"
+                        class="btn-secondary"
+                        @onclick="CancelAsync">
+                    @SecondaryAction
+                </button>
+                <button type="submit"
+                        class="btn-primary">
+                    @PrimaryAction
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public Profile Profile { get; set; } = new Profile();
+
+    public Profile Model { get; set; } = null!;
+
+    protected override void OnInitialized()
+    {
+        Model = Profile;
+    }
+
+    private async Task SubmitAsync()
+    {
+        await CloseAsync(Profile);
+    }
+}

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

@@ -0,0 +1,95 @@
+@using Sample.Core.Models
+
+
+<div>
+    <button type="button"
+            class="btn btn-secondary"
+            @onclick="ShowCurrentProfile">
+        Show Profile
+    </button>
+</div>
+
+<div>
+    <p>
+        Current Profile:
+    </p>
+    <ul>
+        <li><strong>Display Name:</strong> @_currentProfile.DisplayName</li>
+        <li><strong>Email Address:</strong> @_currentProfile.EmailAddress</li>
+    </ul>
+</div>
+
+<div>
+    <button type="button"
+            class="btn btn-secondary"
+            @onclick="ShowNewProfile">
+        Create Profile
+    </button>
+</div>
+
+<div>
+    <p>
+        New Profile:
+    </p>
+    <ul>
+        <li><strong>Display Name:</strong> @_newProfile.DisplayName</li>
+        <li><strong>Email Address:</strong> @_newProfile.EmailAddress</li>
+    </ul>
+</div>
+
+@code {
+    [Inject]
+    public required ModalService ModalService { get; set; }
+
+    private Profile _currentProfile = new Profile
+    {
+        DisplayName = "John Smith",
+        EmailAddress = "john.smith@email.com"
+    };
+
+    private Profile _newProfile = new Profile();
+
+    private async Task ShowCurrentProfile()
+    {
+        var parameters = ModalParameters.Create()
+            .Title("Update Profile")
+            .Message("Please update your profile information.")
+            .Parameter(nameof(CustomModal.Profile), _currentProfile)
+            .Style(b => b.AddStyle("max-width", "700px"));
+
+        var modal = await ModalService.Show<CustomModal>(parameters);
+        var result = await modal.Result;
+
+        if (result.Cancelled)
+            return;
+
+        var profile = result.Data as Profile;
+        if (profile is not null)
+            _currentProfile = profile;
+
+        StateHasChanged();
+    }
+
+    private async Task ShowNewProfile()
+    {
+        _newProfile = new Profile();
+
+        var parameters = ModalParameters.Create()
+            .Title("Create Profile")
+            .Message("Please enter the new profile information.")
+            .Parameter(nameof(CustomModal.Profile), _newProfile)
+            .ClassName("dialog-xl");
+
+        var modal = await ModalService.Show<CustomModal>(parameters);
+        var result = await modal.Result;
+
+        if (result.Cancelled)
+            return;
+
+        var profile = result.Data as Profile;
+        if (profile is not null)
+            _newProfile = profile;
+
+        StateHasChanged();
+    }
+}