From 7c8aadf261b5faebd4e26d0f9960e5a89c38af9a Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Thu, 6 Feb 2025 14:02:09 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20BodyScroll=20?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/Components/Drawer/Drawer.razor       | 3 ++-
 src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs    | 8 ++++++++
 src/BootstrapBlazor/Components/Drawer/Drawer.razor.js    | 8 ++++++--
 src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss  | 4 ++++
 src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs | 1 +
 src/BootstrapBlazor/Components/Drawer/DrawerOption.cs    | 5 +++++
 6 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor b/src/BootstrapBlazor/Components/Drawer/Drawer.razor
index addc7b8a074..12948be0e13 100644
--- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor
+++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor
@@ -2,7 +2,8 @@
 @inherits BootstrapModuleComponentBase
 @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
-<div @attributes="@AdditionalAttributes" tabindex="-1" class="@ClassString" style="@StyleString" id="@Id" data-bb-keyboard="@KeyboardString">
+<div @attributes="@AdditionalAttributes" tabindex="-1" class="@ClassString" style="@StyleString" id="@Id"
+     data-bb-keyboard="@KeyboardString" data-bb-scroll="@BodyScrollString">
     @if (ShowBackdrop)
     {
         <div tabindex="-1" class="drawer-backdrop" @onclick="@OnContainerClick">
diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs
index a4e32e5ad83..4ebf8aca239 100644
--- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs
+++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs
@@ -125,8 +125,16 @@ public partial class Drawer
     [Parameter]
     public bool IsKeyboard { get; set; }
 
+    /// <summary>
+    /// 获得/设置 抽屉显示时是否允许滚动 body 默认为 false 不滚动
+    /// </summary>
+    [Parameter]
+    public bool BodyScroll { get; set; }
+
     private string? KeyboardString => IsKeyboard ? "true" : null;
 
+    private string? BodyScrollString => BodyScroll ? "true" : null;   
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js
index 9b021754c74..4513cfc90c1 100644
--- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js
+++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js
@@ -115,13 +115,17 @@ export function execute(id, open) {
         }
         else {
             el.classList.remove('show')
-            body.classList.remove('overflow-hidden')
+            body.classList.remove('drawer-overflow-hidden')
         }
     }
 
     if (open) {
         el.classList.add('show')
-        body.classList.add('overflow-hidden')
+
+        const scroll = el.getAttribute('bb-drawer-scroll') === "true";
+        if (scroll === false) {
+            body.classList.add('drawer-overflow-hidden');
+        }
         requestAnimationFrame(show)
     }
     else if (el.classList.contains('show')) {
diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss
index 697e94e9bd1..d5357d23cb3 100644
--- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss
+++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss
@@ -184,3 +184,7 @@
         }
     }
 }
+
+.drawer-overflow-hidden {
+    overflow: hidden;
+}
diff --git a/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs b/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs
index 0a50a68085e..dd515189dd7 100644
--- a/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs
+++ b/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs
@@ -66,6 +66,7 @@ private Dictionary<string, object> GetParameters(DrawerOption option)
         {
             [nameof(Drawer.IsOpen)] = true,
             [nameof(Drawer.IsKeyboard)] = option.IsKeyboard,
+            [nameof(Drawer.BodyScroll)] = option.BodyScroll,
             [nameof(Drawer.IsBackdrop)] = option.IsBackdrop,
             [nameof(Drawer.ShowBackdrop)] = option.ShowBackdrop,
             [nameof(Drawer.Placement)] = option.Placement,
diff --git a/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs b/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs
index 0e489ce343d..85616fbe148 100644
--- a/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs
+++ b/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs
@@ -40,6 +40,11 @@ public class DrawerOption
     /// </summary>
     public bool ShowBackdrop { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 抽屉显示时是否允许滚动 body 默认为 false 不滚动
+    /// </summary>
+    public bool BodyScroll { get; set; }
+
     /// <summary>
     /// 获得/设置 组件出现位置 默认显示在 Left 位置
     /// </summary>

From 985eed048adf827c631c37347c98012c2cc26cda Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Thu, 6 Feb 2025 14:02:25 +0800
Subject: [PATCH 2/4] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Samples/Drawers.razor                 | 12 ++++++++++++
 .../Components/Samples/Drawers.razor.cs              | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor
index c5f1badc5a3..8d2844abe3a 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor
@@ -59,6 +59,18 @@
     </Drawer>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["BodyScrollTitle"]" Introduction="@Localizer["BodyScrollIntro"]" Name="BodyScroll">
+    <section ignore>
+        <button type="button" class="btn btn-primary" @onclick="@OpenBodyScrollDrawer">@Localizer["Open"]</button>
+    </section>
+    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsBodyScrollOpen" BodyScroll="true">
+        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
+            <p>@Localizer["Content"]</p>
+            <button type="button" class="btn btn-primary" @onclick="@(e => IsBodyScrollOpen = false)">@Localizer["Close"]</button>
+        </div>
+    </Drawer>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["DrawerServiceTitle"]" Introduction="@Localizer["DrawerServiceIntro"]" Name="DrawerService">
     <Button OnClickWithoutRender="@DrawerServiceShow" Text="@Localizer["Open"]"></Button>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs
index 2e4ed87b4b9..5b6caa7d3a4 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs
@@ -57,6 +57,10 @@ private void OpenDrawer()
 
     private void OpenKeyboardDrawer() => IsKeyboardOpen = true;
 
+    private bool IsBodyScrollOpen { get; set; }
+
+    private void OpenBodyScrollDrawer() => IsKeyboardOpen = true;
+
     private async Task DrawerServiceShow() => await DrawerService.Show(new DrawerOption()
     {
         Placement = Placement.Right,
@@ -137,6 +141,14 @@ private static AttributeItem[] GetAttributes() =>
             DefaultValue = " — "
         },
         new()
+        {
+            Name = "BodyScroll",
+            Description = "Where the enable body scrolling when drawer is shown",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
         {
             Name = "ChildContent",
             Description = "Subassembly",

From 4b083a68a76dde0477b02abd2ef564582541a77b Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Thu, 6 Feb 2025 14:02:33 +0800
Subject: [PATCH 3/4] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?=
 =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/UnitTest/Components/DrawerTest.cs      | 15 +++++++++++++++
 test/UnitTest/Services/DrawerServiceTest.cs |  3 ++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/test/UnitTest/Components/DrawerTest.cs b/test/UnitTest/Components/DrawerTest.cs
index 05293683e62..36dc900cc0c 100644
--- a/test/UnitTest/Components/DrawerTest.cs
+++ b/test/UnitTest/Components/DrawerTest.cs
@@ -182,6 +182,21 @@ public void IsKeyboard_Ok()
         cut.DoesNotContain("data-bb-keyboard=\"true\"");
     }
 
+    [Fact]
+    public void BodyScroll_Ok()
+    {
+        var cut = Context.RenderComponent<Drawer>(builder =>
+        {
+            builder.Add(a => a.BodyScroll, true);
+            builder.Add(a => a.ChildContent, s =>
+            {
+                s.OpenComponent<Button>(0);
+                s.CloseComponent();
+            });
+        });
+        cut.Contains("data-bb-scroll=\"true\"");
+    }
+
     class MockContent : ComponentBase
     {
         [CascadingParameter(Name = "BodyContext")]
diff --git a/test/UnitTest/Services/DrawerServiceTest.cs b/test/UnitTest/Services/DrawerServiceTest.cs
index 21c4e3745cc..f0de17364d4 100644
--- a/test/UnitTest/Services/DrawerServiceTest.cs
+++ b/test/UnitTest/Services/DrawerServiceTest.cs
@@ -24,7 +24,8 @@ public async Task Show_Ok()
             Placement = Placement.Bottom,
             ShowBackdrop = true,
             BodyContext = "test-body-context",
-            IsKeyboard = true
+            IsKeyboard = true,
+            BodyScroll = true
         };
         var service = Context.Services.GetRequiredService<DrawerService>();
         var cut = Context.RenderComponent<BootstrapBlazorRoot>();

From b19d857b4476692775660107d92c810d3dffa150 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Thu, 6 Feb 2025 14:13:08 +0800
Subject: [PATCH 4/4] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B5=84=E6=BA=90=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs | 2 +-
 src/BootstrapBlazor.Server/Locales/en-US.json                  | 2 ++
 src/BootstrapBlazor.Server/Locales/zh-CN.json                  | 2 ++
 src/BootstrapBlazor/Components/Drawer/Drawer.razor.js          | 2 +-
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs
index 5b6caa7d3a4..8bdbadad442 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs
@@ -59,7 +59,7 @@ private void OpenDrawer()
 
     private bool IsBodyScrollOpen { get; set; }
 
-    private void OpenBodyScrollDrawer() => IsKeyboardOpen = true;
+    private void OpenBodyScrollDrawer() => IsBodyScrollOpen = true;
 
     private async Task DrawerServiceShow() => await DrawerService.Show(new DrawerOption()
     {
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 74bc53e1884..2f985a9ef14 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -894,6 +894,8 @@
     "DrawerServiceIntro": "Open the drawer pop-up window by calling the <code>DrawerService</code> service",
     "IsKeyboardTitle": "ESC",
     "IsKeyboardIntro": "By default, the component uses the <kbd>ESC</kbd> key to close the drawer popup. You can enable this function by <code>IsKeyboard=\"true\"</code>",
+    "BodyScrollTitle": "Body Scroll",
+    "BodyScrollIntro": "By setting <code>BodyScroll</code>, you can control whether scrolling is allowed when the drawer pop-up window is displayed. <code>Body</code> is false by default, scrolling is not allowed",
     "Open": "click me to open",
     "Content": "The layout, components, etc. in the drawer are fully customizable",
     "Close": "close the drawer",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 2b4d3f0598e..0f3fca089e3 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -894,6 +894,8 @@
     "DrawerServiceIntro": "通过调用 <code>DrawerService</code> 服务打开抽屉弹窗",
     "IsKeyboardTitle": "ESC 按键支持",
     "IsKeyboardIntro": "组件默认使用 <kbd>ESC</kbd> 按键关闭抽屉弹窗，可通过 <code>IsKeyboard=\"true\"</code> 开启此功能",
+    "BodyScrollTitle": "页面滚动",
+    "BodyScrollIntro": "通过设置 <code>BodyScroll</code> 控制抽屉弹窗显示时是否允许滚动 <code>Body</code> 默认 false 不允许滚动",
     "Open": "点我打开",
     "Content": "抽屉内布局、组件等完全可以自定义",
     "Close": "关闭抽屉",
diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js
index 4513cfc90c1..14dea40da52 100644
--- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js
+++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js
@@ -122,7 +122,7 @@ export function execute(id, open) {
     if (open) {
         el.classList.add('show')
 
-        const scroll = el.getAttribute('bb-drawer-scroll') === "true";
+        const scroll = el.getAttribute('data-bb-scroll') === "true";
         if (scroll === false) {
             body.classList.add('drawer-overflow-hidden');
         }