feat(MaskService): add Selector parameter (#5361)

* feat: 增加 Selector 参数支持样式选择

* feat: 更新 JavaScript 交互

* feat: 支持 Selector 参数

* test: 更新单元测试

Author: ArgoZhang

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

@@ -43,7 +43,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         if (!firstRender)
         {
-            await InvokeVoidAsync("update", Id, new { Show = _options != null, _options?.ContainerId });
+            await InvokeVoidAsync("update", Id, new
+            {
+                Show = _options != null,
+                _options?.ContainerId,
+                _options?.Selector
+            });
         }
     }
 

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

@@ -1,20 +1,17 @@
 export function update(id, options) {
     const mask = document.getElementById(id);
     if (mask) {
-        const { show, containerId } = options;
+        const { show } = options;
         const el = document.querySelector(`[data-bb-mask="${id}"]`);
-        if (containerId) {
-            const container = document.getElementById(containerId);
-            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);
-                }
+        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);
             }
         }
         else {
@@ -31,3 +28,10 @@
         }
     }
 }
+
+const getContainerBySelector = options => {
+    const selector = getContainerById(options.containerId) ?? options.selector;
+    return selector ? document.querySelector(selector) : null;
+}
+
+const getContainerById = id => id ? `#${id}` : null;

src/BootstrapBlazor/Components/Mask/MaskOption.cs

@@ -34,4 +34,9 @@ public class MaskOption
     /// 获得/设置 遮罩父容器 id 默认 null 未设置
     /// </summary>
     public string? ContainerId { get; set; }
+
+    /// <summary>
+    /// 获得/设置 遮罩父容器选择器 Selector 默认 null 未设置
+    /// </summary>
+    public string? Selector { get; set; }
 }

test/UnitTest/Services/MaskServiceTest.cs

@@ -66,7 +66,8 @@ await maskService.Show(new MaskOption()
                         Opacity = 0.5f,
                         ZIndex = 1050,
                         ChildContent = builder => builder.AddContent(0, "test-mask-content"),
-                        ContainerId = "test-9527"
+                        ContainerId = "test-9527",
+                        Selector = "test-mask-selector"
                     });
                 });
             });