feat(ModalDialog): support IsCenter when set IsDraggable to true (#4589)

* feat: 增加可拖动垂直居中功能

* chore: 更新样式与脚本

* test: 更新单元测试

* doc: 更新参数文档

* test: 更新单元测试

* refactor: 更改默认值

* test: 更新单元测试

* refactor: 补全括弧

Author: ArgoZhang

src/BootstrapBlazor/Components/Modal/Modal.razor.js

@@ -17,6 +17,16 @@ export function init(id, invoke, shownCallback, closeCallback) {
     Data.set(id, modal)
 
     EventHandler.on(el, 'shown.bs.modal', () => {
+        const dialog = el.querySelector('.modal-dialog');
+        if (dialog.classList.contains('is-draggable-center')) {
+            const width = dialog.offsetWidth / 2;
+            const height = dialog.offsetHeight / 2;
+
+            dialog.style.setProperty("margin-left", `calc(50vw - ${width}px)`);
+            dialog.style.setProperty("margin-top", `calc(50vh - ${height}px)`);
+            dialog.classList.remove('is-draggable-center');
+        }
+
         invoke.invokeMethodAsync(shownCallback)
     })
     EventHandler.on(el, 'hidden.bs.modal', e => {

src/BootstrapBlazor/Components/Modal/Modal.razor.scss

@@ -1,7 +1,11 @@
-.is-draggable .modal-header {
+.is-draggable .modal-header {
     cursor: pointer;
 }
 
+.is-draggable-center {
+    visibility: hidden;
+}
+
 .modal-header {
     padding: .5rem 1rem;
 }

src/BootstrapBlazor/Components/Modal/ModalDialog.razor.cs

@@ -24,6 +24,7 @@ public partial class ModalDialog : IHandlerException
         .AddClass("modal-dialog-scrollable", IsScrolling)
         .AddClass("modal-fullscreen", MaximizeStatus)
         .AddClass("is-draggable", IsDraggable)
+        .AddClass("is-draggable-center", IsCentered && IsDraggable)
         .AddClass("d-none", !IsShown)
         .AddClass(Class, !string.IsNullOrEmpty(Class))
         .Build();
@@ -52,13 +53,13 @@ public partial class ModalDialog : IHandlerException
     public bool ShowResize { get; set; }
 
     /// <summary>
-    /// 获得/设置 弹窗大小
+    /// 获得/设置 弹窗大小 默认为 <see cref="Size.ExtraExtraLarge"/>
     /// </summary>
     [Parameter]
     public Size Size { get; set; } = Size.ExtraExtraLarge;
 
     /// <summary>
-    /// 获得/设置 弹窗大小
+    /// 获得/设置 弹窗大小 默认为 <see cref="FullScreenSize.None"/>
     /// </summary>
     [Parameter]
     public FullScreenSize FullScreenSize { get; set; }
@@ -67,10 +68,10 @@ public partial class ModalDialog : IHandlerException
     /// 获得/设置 是否垂直居中 默认为 true
     /// </summary>
     [Parameter]
-    public bool IsCentered { get; set; }
+    public bool IsCentered { get; set; } = true;
 
     /// <summary>
-    /// 获得/设置 是否弹窗正文超长时滚动
+    /// 获得/设置 是否弹窗正文超长时滚动 默认为 false
     /// </summary>
     [Parameter]
     public bool IsScrolling { get; set; }
@@ -82,7 +83,7 @@ public partial class ModalDialog : IHandlerException
     public bool IsDraggable { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否显示最大化按钮
+    /// 获得/设置 是否显示最大化按钮 默认为 false
     /// </summary>
     [Parameter]
     public bool ShowMaximizeButton { get; set; }

test/UnitTest/Components/ModalDialogTest.cs

@@ -75,7 +75,15 @@ public void IsDraggable_Ok()
             });
         });
         Assert.Contains("is-draggable", cut.Markup);
+        Assert.Contains("is-draggable-center", cut.Markup);
         Assert.Contains("test_class", cut.Markup);
+
+        var dialog = cut.FindComponent<ModalDialog>();
+        dialog.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsCentered, false);
+        });
+        Assert.DoesNotContain("is-draggable-center", cut.Markup);
     }
 
     [Fact]