[dev-v5] [Dialog Service] Add the FluentDialog and services

.editorconfig

@@ -387,6 +387,9 @@ dotnet_diagnostic.IDE2005.severity = warning
 # MA0001: StringComparison is missing
 dotnet_diagnostic.MA0001.severity = warning
 
+# MA0004:  Use ConfigureAwait when awaiting a task
+dotnet_diagnostic.MA0004.severity = none
+
 # MA0015: Do not call overridable members in constructor
 dotnet_diagnostic.MA0056.severity = none
 

Directory.Packages.props

@@ -29,7 +29,7 @@
     <PackageVersion Include="Microsoft.VisualStudio.Threading.Analyzers" Version="17.12.19" />
     <PackageVersion Include="Microsoft.VisualStudioEng.MicroBuild.Core" Version="1.0.0" />
     <PackageVersion Include="Microsoft.TypeScript.MSBuild" Version="5.6.2" />
-    <PackageVersion Include="Microsoft.CodeAnalysis.ResxSourceGenerator" Version="3.11.0-beta1.24508.2" />
+    <PackageVersion Include="Microsoft.CodeAnalysis.ResxSourceGenerator" Version="3.11.0-beta1.24527.2" />
   </ItemGroup>
   <ItemGroup Condition="'$(TargetFramework)'=='netstandard2.0'">
     <PackageVersion Include="Microsoft.Bcl.AsyncInterfaces" Version="$(RuntimeVersion9)" />

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/Examples/Dialog/CustomizedDialog.razor

@@ -0,0 +1,61 @@
+<FluentDialogBody>
+
+    <TitleTemplate>
+        @Dialog.Options.Header.Title
+    </TitleTemplate>
+
+    <ChildContent>
+        <FluentTextInput Label="Name:" @bind-Value="@Name" Disabled="true" />
+        <FluentTextInput Label="Age:" @bind-Value="@Person.Age" />
+        <FluentLabel>Description</FluentLabel>
+        @Person.VeryLongDescription
+    </ChildContent>
+
+    <ActionTemplate>
+        <FluentButton OnClick="btnCancel_Click">Cancel</FluentButton>
+        <FluentButton OnClick="btnOK_Click" Appearance="ButtonAppearance.Primary">OK</FluentButton>
+    </ActionTemplate>
+
+</FluentDialogBody>
+
+@code {
+    // If you want to use this razor component in standalone mode,
+    // you can use a nullable IDialogInstance property.
+    // If the value is not null, the component is running using the DialogService.
+    // `public IDialogInstance? FluentDialog { get; set; }`
+    [CascadingParameter]
+    public required IDialogInstance Dialog { get; set; }
+
+    [Inject]
+    public required IDialogService DialogService { get; set; }
+
+    // A simple type is not updatable
+    [Parameter]
+    public string? Name { get; set; }
+
+    // A class is updatable
+    [Parameter]
+    public PersonDetails Person { get; set; } = new();
+
+    // A nullable type is optional
+    [Parameter]
+    public int? NotAssignedParam { get; set; }
+
+    private async Task btnOK_Click()
+    {
+        int.TryParse(Person.Age, out var age);
+        if (age <= 0)
+        {
+            await DialogService.ShowErrorAsync("Age must be a positive number.");
+        }
+        else
+        {
+            await Dialog.CloseAsync(DialogResult.Ok("Yes"));
+        }
+    }
+
+    private async Task btnCancel_Click()
+    {
+        await Dialog.CloseAsync(DialogResult.Cancel("No"));
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/Examples/Dialog/PersonDetails.cs

@@ -0,0 +1,18 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+using Microsoft.AspNetCore.Components;
+
+namespace FluentUI.Demo.Client.Documentation.Components.Dialog.Examples.Dialog;
+
+public class PersonDetails
+{
+    private static readonly string _longDescription = string.Join("", SampleData.Text.LoremIpsum.Select(i => $"<p>{i}</p>"));
+
+    public string Age { get; set; } = "";
+
+    public MarkupString VeryLongDescription => (MarkupString)_longDescription;
+
+    public override string ToString() => $"Age: {Age}";
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/Examples/Dialog/SimpleDialog.razor

@@ -0,0 +1,36 @@
+@inherits FluentDialogInstance
+
+<FluentDialogBody>
+    <FluentTextInput Label="Name:" @bind-Value="@Name" Disabled="true" />
+    <FluentTextInput Label="Age:" @bind-Value="@Person.Age" />
+</FluentDialogBody>
+
+@code {
+    // A simple type is not updatable
+    [Parameter]
+    public string? Name { get; set; }
+
+    // A class is updatable
+    [Parameter]
+    public PersonDetails Person { get; set; } = new();
+
+    // Initialize the dialog
+    protected override void OnInitializeDialog(DialogOptionsHeader header, DialogOptionsFooter footer)
+    {
+        header.Title = $"Dialog Title - {Name}";
+        footer.SecondaryAction.Visible = true;
+    }
+
+    // Handle the action click
+    protected override async Task OnActionClickedAsync(bool primary)
+    {
+        if (primary)
+        {
+            await DialogInstance.CloseAsync("Yes");
+        }
+        else
+        {            
+            await DialogInstance.CancelAsync();
+        }
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/Examples/DialogBodyDefault.razor

@@ -0,0 +1,16 @@
+<FluentDialogBody>
+
+    <TitleTemplate>
+        My title
+    </TitleTemplate>
+
+    <ChildContent>
+        @SampleData.Text.GenerateLoremIpsum(paragraphCount: 1)
+    </ChildContent>
+
+    <ActionTemplate>
+        <FluentButton Disabled="true" Appearance="ButtonAppearance.Primary">One</FluentButton>
+        <FluentButton Disabled="true">Two</FluentButton>
+    </ActionTemplate>
+
+</FluentDialogBody>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/Examples/DialogMessageBox.razor

@@ -0,0 +1,79 @@
+@inject IDialogService DialogService
+
+<FluentButton OnClick="@ShowSuccessAsync" Appearance="ButtonAppearance.Primary">Success</FluentButton>
+<FluentButton OnClick="@ShowWarningAsync" Appearance="ButtonAppearance.Primary">Warning</FluentButton>
+<FluentButton OnClick="@ShowErrorAsync" Appearance="ButtonAppearance.Primary">Error</FluentButton>
+<FluentButton OnClick="@ShowInformationAsync" Appearance="ButtonAppearance.Primary">Information</FluentButton>
+<FluentButton OnClick="@ShowConfirmationAsync" Appearance="ButtonAppearance.Primary">Confirmation</FluentButton>
+<FluentButton OnClick="@ShowMessageBoxLongAsync" Appearance="ButtonAppearance.Primary">Long message</FluentButton>
+<FluentButton OnClick="@ShowMessageBoxAsync" Appearance="ButtonAppearance.Primary">Custom message</FluentButton>
+
+<p>
+    Last result: @GetResult()
+</p>
+
+@code
+{
+    private bool? Canceled;
+
+    private async Task ShowSuccessAsync()
+    {
+        var result = await DialogService.ShowSuccessAsync("The action was a success");        
+        Canceled = result.Cancelled;
+    }
+
+    private async Task ShowWarningAsync()
+    {
+        var result = await DialogService.ShowWarningAsync("This is your final warning");
+        Canceled = result.Cancelled;
+    }
+
+    private async Task ShowErrorAsync()
+    {
+        var result = await DialogService.ShowErrorAsync("This is an error");
+        Canceled = result.Cancelled;
+    }
+
+    private async Task ShowInformationAsync()
+    {
+        var result = await DialogService.ShowInfoAsync("This is a message");
+        Canceled = result.Cancelled;
+    }
+
+    private async Task ShowConfirmationAsync()
+    {
+        var result = await DialogService.ShowConfirmationAsync("Are you <strong>sure</strong> you want to delete this item? <br />This will also remove any linked items");
+        Canceled = result.Cancelled;
+    }
+
+    private async Task ShowMessageBoxLongAsync()
+    {
+        var result = await DialogService.ShowInfoAsync(SampleData.Text.GenerateLoremIpsum(1));
+        Canceled = result.Cancelled;
+    }
+
+    private async Task ShowMessageBoxAsync()
+    {
+        var result = await DialogService.ShowMessageBoxAsync(new MessageBoxOptions()
+            {
+                Title = "My title",
+                Message = "My <strong>customized</strong> message",
+                Icon = new Icons.Regular.Size24.Games(),
+                IconColor = Color.Success,
+                PrimaryButton = "Plus",
+                SecondaryButton = "Minus",
+            });
+
+        Canceled = result.Cancelled;
+    }
+
+    private string GetResult()
+    {
+        return Canceled switch
+        {
+            true => "❌ Canceled",
+            false => "✅ OK",
+            _ => ""
+        };
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/Examples/DialogServiceCustomized.razor

@@ -0,0 +1,40 @@
+@inject IDialogService DialogService
+
+<FluentButton OnClick="@(e => OpenDialogAsync(DialogAlignment.Default))" Appearance="ButtonAppearance.Primary">Open Dialog</FluentButton>
+
+<hr />
+<div>
+    John: @John
+</div>
+
+@code
+{
+    private Dialog.PersonDetails John = new() { Age = "20" };
+
+    private async Task OpenDialogAsync(DialogAlignment alignment)
+    {
+        var result = await DialogService.ShowDialogAsync<Dialog.CustomizedDialog>(options =>
+        {
+            options.Header.Title = "Dialog Title";
+            options.Alignment = alignment;
+            options.Style = alignment == DialogAlignment.Default ? "max-height: 400px;" : null;
+
+            options.Parameters.Add(nameof(Dialog.CustomizedDialog.Name), "John");  // Simple type
+            options.Parameters.Add(nameof(Dialog.CustomizedDialog.Person), John);  // Updatable object
+
+            options.OnStateChange = (e) =>
+            {
+                Console.WriteLine($"State changed: {e.State}");
+            };
+        });
+
+        if (result.Cancelled)
+        {
+            Console.WriteLine($"Dialog Canceled: {result.Value}");
+        }
+        else
+        {
+            Console.WriteLine($"Dialog Saved: {result.Value}");
+        }
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/Examples/DialogServiceDefault.razor

@@ -0,0 +1,36 @@
+@inject IDialogService DialogService
+
+<FluentButton OnClick="@(e => OpenDialogAsync())" Appearance="ButtonAppearance.Primary">Open Dialog</FluentButton>
+
+<hr />
+<div>
+    John: @John
+</div>
+
+@code
+{
+    private Dialog.PersonDetails John = new() { Age = "20" };
+
+    private async Task OpenDialogAsync()
+    {
+        var result = await DialogService.ShowDialogAsync<Dialog.SimpleDialog>(options =>
+        {
+            options.Parameters.Add(nameof(Dialog.SimpleDialog.Name), "John");  // Simple type
+            options.Parameters.Add(nameof(Dialog.SimpleDialog.Person), John);  // Updatable object
+
+            options.OnStateChange = (e) =>
+            {
+                Console.WriteLine($"State changed: {e.State}");
+            };
+        });
+
+        if (result.Cancelled)
+        {
+            Console.WriteLine($"Dialog Canceled: {result.Value}");
+        }
+        else
+        {
+            Console.WriteLine($"Dialog Saved: {result.Value}");
+        }
+    }
+}