feat(Mask): add AppendToBody parameter

src/BootstrapBlazor.Server/Components/Samples/Masks.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.5.1-beta02</Version>
+    <Version>10.5.1-beta05</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Mask/Mask.razor

@@ -1,4 +1,4 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
 @attribute [BootstrapModuleAutoLoader(AutoInvokeInit = false, AutoInvokeDispose = false)]
 

src/BootstrapBlazor/Components/Mask/Mask.razor.cs

@@ -22,6 +22,7 @@ public partial class Mask
         .Build();
 
     private MaskOption? _options;
+    private bool _show = false;
 
     /// <summary>
     /// <inheritdoc/>
@@ -45,22 +46,46 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             await InvokeVoidAsync("update", Id, new
             {
-                Show = _options != null,
+                Show = _show,
                 _options?.ContainerId,
-                _options?.Selector
+                _options?.Selector,
+                _options?.AppendToBody
             });
         }
     }
 
     private Task Show(MaskOption? option)
     {
-        _options = option;
+        if (option == null)
+        {
+            // 服务关闭遮罩调用
+            _options?.ChildContent = null;
+            _show = false;
+        }
+        else
+        {
+            // 服务打开遮罩调用
+            _options = option;
+            _show = true;
+        }
         StateHasChanged();
         return Task.CompletedTask;
     }
 
-    private Task CloseAsync()
+    private Task CloseAsync() => Show(null);
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="disposing"></param>
+    /// <returns></returns>
+    protected override async ValueTask DisposeAsync(bool disposing)
     {
-        return Show(null);
+        await base.DisposeAsync(disposing);
+
+        if (disposing)
+        {
+            MaskService.UnRegister(this);
+        }
     }
 }

src/BootstrapBlazor/Components/Mask/Mask.razor.js

@@ -1,31 +1,30 @@
-export function update(id, options) {
+export function update(id, options) {
     const mask = document.getElementById(id);
     if (mask) {
-        const { show } = options;
+        const { show, appendToBody } = options;
         const el = document.querySelector(`[data-bb-mask="${id}"]`);
         const container = getContainerBySelector(options);
         if (container) {
             const position = container.style.getPropertyValue('position');
             if (position === '' || position === 'static') {
                 container.style.setProperty('position', 'relative');
             }
-            if (show) {
-                el.style.setProperty('--bb-mask-position', 'absolute');
-                container.appendChild(el);
-            }
+            reset(el, mask, container, show);
         }
-        else {
-            document.body.appendChild(el);
+        else if (appendToBody === true) {
+            reset(el, mask, document.body, show);
         }
+    }
+}
 
-        if (show) {
-            el.classList.add('show');
-        }
-        else {
-            el.classList.remove('show');
-            el.style.removeProperty('--bb-mask-position');
-            mask.appendChild(el);
-        }
+const reset = (el, mask, container, status) => {
+    if (status) {
+        container.appendChild(el);
+        el.classList.add('show');
+    }
+    else {
+        el.classList.remove('show');
+        mask.appendChild(el);
     }
 }
 

src/BootstrapBlazor/Components/Mask/Mask.razor.scss

@@ -1,11 +1,10 @@
-@use "../../wwwroot/scss/variables" as *;
+@use "../../wwwroot/scss/variables" as *;
 
 .bb-mask {
     --bb-mask-zindex: #{$bb-mask-zindex};
     --bb-mask-bg: #{$bb-mask-bg};
     --bb-mask-opacity: #{$bb-mask-opacity};
-    --bb-mask-position: fixed;
-    position: var(--bb-mask-position);
+    position: absolute;
     top: 0;
     right: 0;
     bottom: 0;

src/BootstrapBlazor/Components/Mask/MaskOption.cs

@@ -46,4 +46,11 @@ public class MaskOption
     /// <para lang="en">Gets or sets Mask Parent Container Selector. Default null</para>
     /// </summary>
     public string? Selector { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 是否将遮罩追加到 body 元素 默认 true</para>
+    /// <para lang="en">Gets or sets whether to append the mask to the body element. Default true</para>
+    /// <para>v<vesion>10.5.1</vesion></para>
+    /// </summary>
+    public bool AppendToBody { get; set; } = true;
 }

src/BootstrapBlazor/Extensions/MaskServiceExtensions.cs

@@ -11,46 +11,50 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public static class MaskServiceExtensions
 {
-
-    /// <summary>
-    /// <para lang="zh">Show 扩展方法</para>
-    /// <para lang="en">Show extension method</para>
-    /// </summary>
-    /// <param name="maskService"></param>
-    /// <param name="parameters"></param>
-    /// <param name="containerId"></param>
-    /// <param name="backgroundColor"></param>
-    /// <param name="opacity"></param>
-    /// <param name="zIndex"></param>
-    /// <param name="mask"></param>
-    public static Task Show<TComponent>(this MaskService maskService, IDictionary<string, object?>? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, Mask? mask = null) where TComponent : ComponentBase => maskService.Show(new MaskOption()
+    extension(MaskService maskService)
     {
-        BackgroundColor = backgroundColor,
-        Opacity = opacity,
-        ZIndex = zIndex,
-        ContainerId = containerId,
-        ChildContent = BootstrapDynamicComponent.CreateComponent<TComponent>(parameters).Render()
-    }, mask);
+        /// <summary>
+        /// <para lang="zh">Show 扩展方法</para>
+        /// <para lang="en">Show extension method</para>
+        /// </summary>
+        /// <param name="parameters"></param>
+        /// <param name="containerId"></param>
+        /// <param name="backgroundColor"></param>
+        /// <param name="opacity"></param>
+        /// <param name="zIndex"></param>
+        /// <param name="appendToBody"></param>
+        /// <param name="mask"></param>
+        public Task Show<TComponent>(IDictionary<string, object?>? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, bool appendToBody = true, Mask? mask = null) where TComponent : ComponentBase => maskService.Show(new MaskOption()
+        {
+            BackgroundColor = backgroundColor,
+            Opacity = opacity,
+            ZIndex = zIndex,
+            ContainerId = containerId,
+            ChildContent = BootstrapDynamicComponent.CreateComponent<TComponent>(parameters).Render(),
+            AppendToBody = appendToBody
+        }, mask);
 
 
-    /// <summary>
-    /// <para lang="zh">Show 扩展方法</para>
-    /// <para lang="en">Show extension method</para>
-    /// </summary>
-    /// <param name="maskService"></param>
-    /// <param name="type"></param>
-    /// <param name="parameters"></param>
-    /// <param name="containerId"></param>
-    /// <param name="backgroundColor"></param>
-    /// <param name="opacity"></param>
-    /// <param name="zIndex"></param>
-    /// <param name="mask"></param>
-    public static Task Show(this MaskService maskService, Type type, IDictionary<string, object?>? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, Mask? mask = null) => maskService.Show(new MaskOption()
-    {
-        BackgroundColor = backgroundColor,
-        Opacity = opacity,
-        ZIndex = zIndex,
-        ContainerId = containerId,
-        ChildContent = BootstrapDynamicComponent.CreateComponent(type, parameters).Render()
-    }, mask);
+        /// <summary>
+        /// <para lang="zh">Show 扩展方法</para>
+        /// <para lang="en">Show extension method</para>
+        /// </summary>
+        /// <param name="type"></param>
+        /// <param name="parameters"></param>
+        /// <param name="containerId"></param>
+        /// <param name="backgroundColor"></param>
+        /// <param name="opacity"></param>
+        /// <param name="zIndex"></param>
+        /// <param name="appendToBody"></param>
+        /// <param name="mask"></param>
+        public Task Show(Type type, IDictionary<string, object?>? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, bool appendToBody = true, Mask? mask = null) => maskService.Show(new MaskOption()
+        {
+            BackgroundColor = backgroundColor,
+            Opacity = opacity,
+            ZIndex = zIndex,
+            ContainerId = containerId,
+            ChildContent = BootstrapDynamicComponent.CreateComponent(type, parameters).Render(),
+            AppendToBody = appendToBody
+        }, mask);
+    }
 }

test/UnitTest/Services/MaskServiceTest.cs

@@ -25,7 +25,8 @@ await maskService.Show(new MaskOption()
                         BackgroundColor = "#000",
                         Opacity = 0.5f,
                         ZIndex = 1050,
-                        ChildContent = builder => builder.AddContent(0, "test-mask-content")
+                        ChildContent = builder => builder.AddContent(0, "test-mask-content"),
+                        AppendToBody = true
                     });
                 });
             });
@@ -116,6 +117,26 @@ public async Task Show_Type()
         await cut.InvokeAsync(() => button.Click());
     }
 
+    [Fact]
+    public async Task Show_Ok()
+    {
+        var maskService = Context.Services.GetRequiredService<MaskService>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Button>(pb =>
+            {
+                pb.Add(a => a.OnClickWithoutRender, async () =>
+                {
+                    await maskService.Show((MaskOption)null!);
+                });
+            });
+        });
+        var button = cut.Find("button");
+        await cut.InvokeAsync(() => button.Click());
+
+        // 遮罩参数 MaskOption 强制为 null 不报错
+    }
+
     class MockComponent : ComponentBase
     {
         [CascadingParameter]