feat(Drawser): provider Drawser service

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

@@ -38,4 +38,8 @@
     </Drawer>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["DrawerServiceTitle"]" Introduction="@Localizer["DrawerServiceIntro"]">
+    <Button OnClickWithoutRender="@DrawerServiceShow" Text="@Localizer["Open"]"></Button>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

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

@@ -9,6 +9,9 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public sealed partial class Drawers
 {
+    [Inject, NotNull]
+    private DrawerService? DrawerService { get; set; }
+
     private bool IsOpen { get; set; }
 
     private Placement DrawerAlign { get; set; }
@@ -49,6 +52,15 @@ private void OpenDrawer()
 
     private void OpenNoBackdropDrawer() => IsShowBackdropOpen = true;
 
+    private async Task DrawerServiceShow() => await DrawerService.Show(new DrawerOption()
+    {
+        Placement = Placement.Right,
+        ChildContent = builder => builder.AddContent(0, "Test"),
+        ShowBackdrop = true,
+        AllowResize = true,
+        IsBackdrop = true
+    });
+
     /// <summary>
     /// Get property method
     /// </summary>
@@ -118,6 +130,14 @@ private static AttributeItem[] GetAttributes() =>
             Type = "RenderFragment",
             ValueList = " — ",
             DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(Drawer.OnCloseAsync),
+            Description = "The callback when close drawer",
+            Type = "Func<Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
         }
     ];
 }

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

@@ -923,6 +923,8 @@
     "PlacementIntro": "By setting the <code>IsBackdrop</code> property to <code>true</code>, the drawer is automatically closed when the mask part is clicked",
     "NoBackdropTitle": "No backdrop",
     "NoBackdropIntro": "By setting the <code>ShowBackdrop=\"false\"</code> do not show the backdrop",
+    "DrawerServiceTitle": "Drawer Service",
+    "DrawerServiceIntro": "Open the drawer pop-up window by calling the <code>DrawerService</code> service",
     "Open": "click me to open",
     "Content": "The layout, components, etc. in the drawer are fully customizable",
     "Close": "close the drawer",

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

@@ -923,6 +923,8 @@
     "PlacementIntro": "通过设置 <code>IsBackdrop</code> 属性为 <code>true</code>，点击遮罩部分时自动关闭抽屉",
     "NoBackdropTitle": "无遮罩效果",
     "NoBackdropIntro": "通过设置 <code>ShowBackdrop=\"false\"</code> 不显示遮罩，这种模式下可以与抽屉下面网页元素进行交互操作",
+    "DrawerServiceTitle": "调用服务打开抽屉",
+    "DrawerServiceIntro": "通过调用 <code>DrawerService</code> 服务打开抽屉弹窗",
     "Open": "点我打开",
     "Content": "抽屉内布局、组件等完全可以自定义",
     "Close": "关闭抽屉",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.5.10</Version>
+    <Version>8.5.11</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor

@@ -10,6 +10,7 @@
 
 <Message @ref="MessageContainer"></Message>
 <ToastContainer @ref="ToastContainer"></ToastContainer>
+<DrawerContainer></DrawerContainer>
 
 <ResizeNotification></ResizeNotification>
 <BrowserFinger></BrowserFinger>

src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor.cs

@@ -32,7 +32,7 @@ public partial class BootstrapBlazorRoot
     public Message? MessageContainer { get; private set; }
 
     /// <summary>
-    /// 获得 Toast 组件实例
+    /// 获得 ToastContainer 组件实例
     /// </summary>
     [NotNull]
     public ToastContainer? ToastContainer { get; private set; }

src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs

@@ -95,6 +95,12 @@ public partial class Drawer
     [Parameter]
     public bool AllowResize { get; set; }
 
+    /// <summary>
+    /// 获得/设置 关闭抽屉回调委托 默认 null
+    /// </summary>
+    [Parameter]
+    public Func<Task>? OnCloseAsync { get; set; }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -104,7 +110,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
-        if (!firstRender)
+        if (!firstRender || IsOpen)
         {
             await InvokeVoidAsync("execute", Id, IsOpen);
         }
@@ -117,8 +123,11 @@ public async Task OnContainerClick()
     {
         if (IsBackdrop)
         {
+            if (OnClickBackdrop != null)
+            {
+                await OnClickBackdrop();
+            }
             await Close();
-            if (OnClickBackdrop != null) await OnClickBackdrop.Invoke();
         }
     }
 
@@ -129,6 +138,10 @@ public async Task OnContainerClick()
     public async Task Close()
     {
         IsOpen = false;
+        if (OnCloseAsync != null)
+        {
+            await OnCloseAsync();
+        }
         if (IsOpenChanged.HasDelegate)
         {
             await IsOpenChanged.InvokeAsync(IsOpen);

src/BootstrapBlazor/Components/Drawer/Drawer.razor.js

@@ -1,31 +1,24 @@
 import Data from "../../modules/data.js"
 import Drag from "../../modules/drag.js"
 
-export function init(id) {
-    const el = document.getElementById(id)
-    const dw = {
-        element: el,
-        body: document.querySelector('body'),
-        drawerBody: el.querySelector('.drawer-body'),
-        bar: el.querySelector('.drawer-bar')
-    }
-    Data.set(id, dw)
-
+const initDrag = el => {
     let originX = 0
     let originY = 0;
     let width = 0
     let height = 0;
     let isVertical = false;
-    Drag.drag(dw.bar,
+    const drawerBody = el.querySelector('.drawer-body');
+    const bar = el.querySelector('.drawer-bar');
+    Drag.drag(bar,
         e => {
-            isVertical = dw.drawerBody.classList.contains("top") || dw.drawerBody.classList.contains("bottom")
-            dw.bar.classList.add('drag')
+            isVertical = drawerBody.classList.contains("top") || drawerBody.classList.contains("bottom")
+            bar.classList.add('drag')
             if (isVertical) {
-                height = parseInt(getComputedStyle(dw.drawerBody).getPropertyValue('--bb-drawer-height'))
+                height = parseInt(getComputedStyle(drawerBody).getPropertyValue('--bb-drawer-height'))
                 originY = e.clientY || e.touches[0].clientY
             }
             else {
-                width = parseInt(getComputedStyle(dw.drawerBody).getPropertyValue('--bb-drawer-width'))
+                width = parseInt(getComputedStyle(drawerBody).getPropertyValue('--bb-drawer-width'))
                 originX = e.clientX || e.touches[0].clientX
             }
         },
@@ -34,75 +27,113 @@ export function init(id) {
                 const eventY = e.clientY || (e.touches.length || e.touches.length > 0 && e.touches[0].clientY)
                 const moveY = eventY - originY
                 let newHeight = 0;
-                if (dw.drawerBody.classList.contains("bottom")) {
+                if (drawerBody.classList.contains("bottom")) {
                     newHeight = height - moveY
                 }
                 else {
                     newHeight = height + moveY
                 }
                 const maxHeight = window.innerHeight;
                 if (newHeight > 100 && newHeight < maxHeight) {
-                    dw.drawerBody.style.setProperty('--bb-drawer-height', `${newHeight}px`)
+                    drawerBody.style.setProperty('--bb-drawer-height', `${newHeight}px`)
                 }
             }
             else {
                 const eventX = e.clientX || (e.touches.length || e.touches.length > 0 && e.touches[0].clientX)
                 const moveX = eventX - originX
                 let newWidth = 0;
-                if (dw.drawerBody.classList.contains("right")) {
+                if (drawerBody.classList.contains("right")) {
                     newWidth = width - moveX
                 }
                 else {
                     newWidth = width + moveX
                 }
                 const maxWidth = window.innerWidth;
                 if (newWidth > 100 && newWidth < maxWidth) {
-                    dw.drawerBody.style.setProperty('--bb-drawer-width', `${newWidth}px`)
+                    drawerBody.style.setProperty('--bb-drawer-width', `${newWidth}px`)
                 }
             }
         },
         e => {
-            dw.bar.classList.remove('drag')
+            bar.classList.remove('drag')
         }
     )
 }
 
+export function init(id) {
+    const el = document.getElementById(id)
+    const dw = {
+        el,
+        body: document.querySelector('body')
+    }
+    Data.set(id, dw)
+
+    initDrag(el);
+}
+
 export function execute(id, open) {
     const dw = Data.get(id)
-    const el = dw.element
+    const { el, body } = dw
+    const drawerBody = el.querySelector('.drawer-body')
+
+    let start = void 0
+    const show = ts => {
+        if (start === void 0) {
+            start = ts
+        }
+        const elapsed = ts - start;
+        if (elapsed < 20) {
+            requestAnimationFrame(show);
+        }
+        else {
+            drawerBody.classList.add('show')
+        }
+    }
+
+    const hide = ts => {
+        if (start === void 0) {
+            start = ts
+        }
+        const elapsed = ts - start;
+        if (elapsed < 320) {
+            requestAnimationFrame(hide);
+        }
+        else {
+            el.classList.remove('show')
+            body.classList.remove('overflow-hidden')
+        }
+    }
+
     if (open) {
         el.classList.add('show')
-        dw.body.classList.add('overflow-hidden')
-        let handler = window.setTimeout(() => {
-            dw.drawerBody.classList.add('show')
-            window.clearTimeout(handler)
-            handler = null
-        }, 20);
+        body.classList.add('overflow-hidden')
+        requestAnimationFrame(show)
     }
     else {
         if (el.classList.contains('show')) {
-            dw.drawerBody.classList.remove('show')
-            let handler = window.setTimeout(() => {
-                window.clearTimeout(handler)
-                handler = null
-                el.classList.remove('show')
-                dw.body.classList.remove('overflow-hidden')
-            }, 320)
+            drawerBody.classList.remove('show')
+            requestAnimationFrame(hide)
         }
     }
 }
 
 export function dispose(id) {
     const dw = Data.get(id)
-    const el = dw.element
+    Data.remove(id);
+
+    const { el, body } = dw
     if (el.classList.contains('show')) {
         el.classList.remove('show')
-        dw.drawerBody.classList.remove('show')
-        dw.body.classList.remove('overflow-hidden')
+
+        const drawerBody = el.querySelector('.drawer-body')
+        if (drawerBody) {
+            drawerBody.classList.remove('show')
+        }
+        body.classList.remove('overflow-hidden')
     }
-    Data.remove(id)
 
-    if (dw.bar) {
-        Drag.dispose(dw.bar)
+    const bar = el.querySelector('.drawer-bar');
+    if (bar) {
+        Drag.dispose(bar)
     }
 }