chore(Mask): add a mask component

exclusion.dic

@@ -88,3 +88,4 @@ meili
 onerror
 dockview
 Wwads
+zindex

src/BootstrapBlazor.Server/Components/Samples/Marquees.razor

@@ -1,9 +1,11 @@
 @page "/marquee"
 @inject IStringLocalizer<Marquees> Localizer
 
-<h3>@Localizer["MarqueeDescription"]</h3>
+<h3>@Localizer["MarqueeTitle"]</h3>
 
-<DemoBlock Title="@Localizer["MarqueeTitle"]" Introduction="@Localizer["MarqueeIntro"]" Name="Normal">
+<h4>@Localizer["MarqueeDescription"]</h4>
+
+<DemoBlock Title="@Localizer["MarqueeBase"]" Introduction="@Localizer["MarqueeBaseIntro"]" Name="Normal">
     <section ignore>
         <h4>Options</h4>
         <BootstrapInputGroup>
@@ -35,5 +37,5 @@
     </section>
 
     <Marquee Text="@Text" Color="@TextColor" BackgroundColor="@BackgroundColor"
-             Duration="@Duration" DirecTion="@Direction" FontSize="@FontSize" />
+             Duration="@Duration" Direction="@Direction" FontSize="@FontSize" />
 </DemoBlock>

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

@@ -0,0 +1,10 @@
+@page "/mask"
+@inject IStringLocalizer<Masks> Localizer
+
+<h3>@Localizer["MaskTitle"]</h3>
+
+<h4>@Localizer["MaskDescription"]</h4>
+
+<DemoBlock Title="@Localizer["MaskNormalTitle"]" Introduction="@Localizer["MaskNormalIntro"]" Name="Normal">
+    <button class="btn btn-primary" @onclick="@ShowMask">@Localizer["ShowMaskButtonText"]</button>
+</DemoBlock>

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

@@ -0,0 +1,24 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// Mask 组件示例文档
+/// </summary>
+public partial class Masks
+{
+    [Inject, NotNull]
+    private MaskService? MaskService { get; set; }
+
+    private async Task ShowMask()
+    {
+        await MaskService.Show(new MaskOption()
+        {
+            ChildContent = builder => builder.AddContent(0, new MarkupString("<i class=\"text-white fa-solid fa-3x fa-spinner fa-spin-pulse\"></i><span class=\"ms-3 fs-2 text-white\">loading ....</span>"))
+        });
+        await Task.Delay(3000);
+        await MaskService.Close();
+    }
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1448,6 +1448,11 @@ void AddServices(DemoMenuItem item)
                     Url = "lookup"
                 },
                 new()
+                {
+                    Text = Localizer["Mask"],
+                    Url = "mask"
+                },
+                new()
                 {
                     Text = Localizer["PrintService"],
                     Url = "print-service"

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -423,6 +423,13 @@
     "ModalsAttributeShowMaximizeButton": "Whether to show the popup maximize button",
     "ModalsAttributeShownCallbackAsync": "Popup shows callback method"
   },
+  "BootstrapBlazor.Server.Components.Samples.Masks": {
+    "MaskTitle": "Mask",
+    "MaskDescription": "By calling the service display and hide methods, a mask layer is displayed to mask the data.",
+    "MaskNormalTitle": "Basic usage",
+    "MaskNormalIntro": "Call the <code>MaskService</code> mask service example method <code>Show</code> to display a mask, and call the instance method <code>Close</code> to close the mask after 3 seconds",
+    "ShowMaskButtonText": "Show"
+  },
   "BootstrapBlazor.Server.Components.Samples.Messages": {
     "MessagesTitle": "Message prompt",
     "MessagesDescription": "Often used for feedback prompts after active operations. The difference from Toast is that the latter is more passive reminder for system-level notifications",
@@ -4598,6 +4605,7 @@
     "AzureOpenAI": "AzureOpenAI",
     "HtmlRenderer": "HtmlRenderer",
     "Html2Pdf": "IHtml2Pdf",
+    "Mask": "MaskService",
     "ContextMenu": "ContextMenu",
     "ClockPicker": "ClockPicker",
     "TimePicker": "TimePicker",
@@ -6206,9 +6214,10 @@
     "GetItemDisplayText": "the callback on get item display text"
   },
   "BootstrapBlazor.Server.Components.Samples.Marquees": {
-    "MarqueeTitle": "Usage",
-    "MarqueeIntro": "Adjusting the text scrolling effect through parameters",
-    "MarqueeDescription": "Marquee component"
+    "MarqueeTitle": "Marquee component",
+    "MarqueeDescription": "The component is mostly used to create scrolling text, usually for news scrolling, advertising scrolling, etc.",
+    "MarqueeBase": "Usage",
+    "MarqueeBaseIntro": "Adjusting the text scrolling effect through parameters"
   },
   "BootstrapBlazor.Server.Components.Samples.Stacks": {
     "Title": "Stack Layout",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -423,6 +423,13 @@
     "ModalsAttributeShowMaximizeButton": "是否显示弹出的最大化按钮",
     "ModalsAttributeShownCallbackAsync": "弹出菜单显示回调方法"
   },
+  "BootstrapBlazor.Server.Components.Samples.Masks": {
+    "MaskTitle": "遮罩组件",
+    "MaskDescription": "通过调用服务显示，隐藏方法，显示一个遮罩层对数据进行遮罩操作",
+    "MaskNormalTitle": "基本用法",
+    "MaskNormalIntro": "调用 <code>MaskService</code> 遮罩服务示例方法 <code>Show</code> 方法显示一个遮罩，3 秒后调用实例方法 <code>Close</code> 关闭遮罩",
+    "ShowMaskButtonText": "打开"
+  },
   "BootstrapBlazor.Server.Components.Samples.Messages": {
     "MessagesTitle": "Message 消息提示",
     "MessagesDescription": "常用于主动操作后的反馈提示。与 Toast 的区别是后者更多用于系统级通知的被动提醒",
@@ -4598,6 +4605,7 @@
     "AzureOpenAI": "AI 聊天服务 AzureOpenAI",
     "HtmlRenderer": "Html 转换器  HtmlRenderer",
     "Html2Pdf": "Html 转 Pdf IHtml2Pdf",
+    "Mask": "遮罩服务 MaskService",
     "ContextMenu": "右键菜单 ContextMenu",
     "ClockPicker": "时间选择器 ClockPicker",
     "TimePicker": "时间选择器 TimePicker",
@@ -6206,9 +6214,10 @@
     "GetItemDisplayText": "获得显示项显示内容回调方法"
   },
   "BootstrapBlazor.Server.Components.Samples.Marquees": {
-    "MarqueeTitle": "基本用法",
-    "MarqueeIntro": "通过参数调节文字滚动效果",
-    "MarqueeDescription": "文字滚动组件"
+    "MarqueeTitle": "循环滚动组件",
+    "MarqueeDescription": "组件多用于创建滚动文本，通常用于新闻滚动、广告滚动等效果",
+    "MarqueeBase": "基本用法",
+    "MarqueeBaseIntro": "通过参数调节文字滚动效果"
   },
   "BootstrapBlazor.Server.Components.Samples.Stacks": {
     "Title": "Stack 布局",

src/BootstrapBlazor.Server/docs.json

@@ -103,6 +103,7 @@
     "input": "Inputs",
     "input-group": "InputGroups",
     "ip": "Ips",
+    "mask": "Masks",
     "markdown": "Markdowns",
     "marquee": "Marquees",
     "menu": "Menus",

src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor

@@ -15,6 +15,7 @@
 <ResizeNotification></ResizeNotification>
 <BrowserFinger></BrowserFinger>
 <ConnectionHub></ConnectionHub>
+<Mask></Mask>
 
 @code {
     RenderFragment RenderChildContent =>

src/BootstrapBlazor/Components/Mask/Mask.razor

@@ -0,0 +1,12 @@
+@namespace BootstrapBlazor.Components
+
+<div class="@ClassString" style="@StyleString">
+    <div class="bb-mask-backdrop"></div>
+
+    @if (_options is { ChildContent: not null })
+    {
+        <div class="bb-mask-content">
+            @_options.ChildContent
+        </div>
+    }
+</div>

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

@@ -0,0 +1,44 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Mask 组件
+/// </summary>
+public partial class Mask
+{
+    [Inject]
+    [NotNull]
+    private MaskService? MaskService { get; set; }
+
+    private string? ClassString => CssBuilder.Default("bb-mask")
+        .AddClass("show", _options is { ChildContent: not null })
+        .Build();
+
+    private string? StyleString => _options == null ? null : CssBuilder.Default()
+        .AddClass($"--bb-mask-zindex: {_options.ZIndex};", _options.ZIndex != null)
+        .AddClass($"--bb-mask-bg: {_options.BackgroundColor};", _options.BackgroundColor != null)
+        .AddClass($"--bb-mask-opacity: {_options.Opacity};", _options.Opacity != null)
+        .Build();
+
+    private MaskOption? _options;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        MaskService.Register(this, Show);
+    }
+
+    private Task Show(MaskOption? option)
+    {
+        _options = option;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+}

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

@@ -0,0 +1,31 @@
+.bb-mask {
+    --bb-mask-zindex: #{$bb-mask-zindex};
+    --bb-mask-bg: #{$bb-mask-bg};
+    --bb-mask-opacity: #{$bb-mask-opacity};
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--bb-mask-zindex);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:not(.show) {
+        display: none;
+    }
+
+    .bb-mask-backdrop {
+        background-color: var(--bb-mask-bg);
+        opacity: var(--bb-mask-opacity);
+        height: 100%;
+        width: 100%;
+    }
+
+    .bb-mask-content {
+        position: absolute;
+        display: flex;
+        align-items: center;
+    }
+}

src/BootstrapBlazor/Components/Mask/MaskOption.cs

@@ -0,0 +1,31 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// MaskOption 配置类
+/// </summary>
+public class MaskOption
+{
+    /// <summary>
+    /// 获得/设置 z-index 值 默认 未设置 使用 样式 1050
+    /// </summary>
+    public int? ZIndex { get; set; }
+
+    /// <summary>
+    /// 获得/设置 opacity 值 默认 未设置 使用 样式 0.5
+    /// </summary>
+    public float? Opacity { get; set; }
+
+    /// <summary>
+    /// 获得/设置 background-color 值 默认 未设置 使用 样式 #000
+    /// </summary>
+    public string? BackgroundColor { get; set; }
+
+    /// <summary>
+    /// 获得/设置 子组件
+    /// </summary>
+    public RenderFragment? ChildContent { get; set; }
+}

src/BootstrapBlazor/Components/Mask/MaskService.cs

@@ -0,0 +1,24 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// MaskService 遮罩服务
+/// </summary>
+public class MaskService : BootstrapServiceBase<MaskOption?>
+{
+    /// <summary>
+    /// 显示 Mask 方法
+    /// </summary>
+    /// <param name="option">遮罩配置信息实体类</param>
+    /// <returns></returns>
+    public Task Show(MaskOption option) => Invoke(option);
+
+    /// <summary>
+    /// 关闭 Mask 方法
+    /// </summary>
+    /// <returns></returns>
+    public Task Close() => Invoke(null);
+}

src/BootstrapBlazor/Components/Message/MessageService.cs

@@ -5,7 +5,7 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// 
+/// MessageService 消息弹窗服务
 /// </summary>
 /// <param name="option"></param>
 public class MessageService(IOptionsMonitor<BootstrapBlazorOptions> option) : BootstrapServiceBase<MessageOption>

src/BootstrapBlazor/Components/SweetAlert/SwalService.cs

@@ -7,29 +7,18 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// SweetAlert 弹窗服务
 /// </summary>
-public class SwalService : BootstrapServiceBase<SwalOption>
+public class SwalService(IOptionsMonitor<BootstrapBlazorOptions> options) : BootstrapServiceBase<SwalOption>
 {
-    private BootstrapBlazorOptions _option;
-
-    /// <summary>
-    /// 构造方法
-    /// </summary>
-    /// <param name="option"></param>
-    public SwalService(IOptionsMonitor<BootstrapBlazorOptions> option)
-    {
-        _option = option.CurrentValue;
-    }
-
     /// <summary>
     /// Show 方法
     /// </summary>
     /// <param name="option"><see cref="SwalOption"/> 实例</param>
     /// <param name="swal">指定弹窗组件 默认为 null 使用 <see cref="BootstrapBlazorRoot"/> 组件内置弹窗组件</param>
     public async Task Show(SwalOption option, SweetAlert? swal = null)
     {
-        if (!option.ForceDelay && _option.SwalDelay != 0)
+        if (!option.ForceDelay && options.CurrentValue.SwalDelay != 0)
         {
-            option.Delay = _option.SwalDelay;
+            option.Delay = options.CurrentValue.SwalDelay;
         }
 
         await Invoke(option, swal);

src/BootstrapBlazor/Extensions/BootstrapBlazorServiceCollectionExtensions.cs

@@ -72,6 +72,7 @@ public static IServiceCollection AddBootstrapBlazor(this IServiceCollection serv
 
         services.AddScoped<TabItemTextOptions>();
         services.AddScoped<DialogService>();
+        services.AddScoped<MaskService>();
         services.AddScoped<MessageService>();
         services.AddScoped<ToastService>();
         services.AddScoped<DrawerService>();

src/BootstrapBlazor/wwwroot/scss/components.scss

@@ -56,6 +56,7 @@
 @import "../../Components/ListGroup/ListGroup.razor.scss";
 @import "../../Components/ListView/ListView.razor.scss";
 @import "../../Components/Logout/Logout.razor.scss";
+@import "../../Components/Mask/Mask.razor.scss";
 @import "../../Components/Menu/Menu.razor.scss";
 @import "../../Components/Message/Message.razor.scss";
 @import "../../Components/Modal/Modal.razor.scss";

src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss

@@ -385,6 +385,11 @@ $bb-logout-user-avatar-width: 60px;
 $bb-logout-user-avatar-height: 60px;
 $bb-logout-user-avatar-margin-right: 1rem;
 
+// Mask
+$bb-mask-zindex: 1050;
+$bb-mask-bg: #000;
+$bb-mask-opacity: .5;
+
 // Menu
 $bb-menu-nav-pading: 0 1rem;
 $bb-menu-nav-border-bottom: 1px solid var(--bs-border-color);