fix(Collapse): handle accordion mode by collapsing other items when one is expanded (#5514)

* refactor: Pageable 更改为 IsPagination

* feat: 支持 IsTriggerByPagination 参数

* test: 更新单元测试

* doc: 更新文档注释

* refactor: 更新 PageIndex 默认值

* test: 更新单元测试

* refactor: 更新变量名

* refactor: 代码格式化

* fix: 修复手风琴模式逻辑错误

* refactor: 精简代码提高性能

* test: 更新单元测试

* refactor: 重构代码

Author: ArgoZhang

src/BootstrapBlazor/Components/Collapse/Collapse.razor

@@ -6,7 +6,7 @@
         @CollapseItems
     </CascadingValue>
     <RenderTemplate>
-        @foreach (var item in Children)
+        @foreach (var item in Items)
         {
             <div @key="item" class="@GetItemClassString(item)">
                 <div class="@GetHeaderClassString(item)">
@@ -16,7 +16,9 @@
                             @item.HeaderTemplate
                         </div>
                     }
-                    <div class="@GetHeaderButtonClassString(item)" data-bs-toggle="collapse" data-bs-target="@GetTargetIdString(item)" aria-expanded="@(item.IsCollapsed ? "false" : "true")" @onclick="() => OnClickItem(item)">
+                    <div class="@GetHeaderButtonClassString(item)"
+                         data-bs-toggle="collapse" data-bs-target="@GetTargetIdString(item)"
+                         aria-expanded="@(item.IsCollapsed ? "false" : "true")" @onclick="() => OnClickItem(item)">
                         @if(!string.IsNullOrEmpty(item.Icon))
                         {
                             <i class="@GetItemIconString(item)"></i>

src/BootstrapBlazor/Components/Collapse/Collapse.razor.cs

@@ -20,7 +20,6 @@ public partial class Collapse
         .Build();
 
     private static string? GetHeaderClassString(CollapseItem item) => CssBuilder.Default("accordion-header")
-        .AddClass("collapsed", item.IsCollapsed)
         .AddClass($"bg-{item.TitleColor.ToDescriptionString()}", item.TitleColor != Color.None)
         .AddClass(item.HeaderClass)
         .Build();
@@ -47,7 +46,7 @@ public partial class Collapse
     /// <summary>
     /// 获得/设置 CollapseItem 集合
     /// </summary>
-    protected List<CollapseItem> Children { get; } = new(10);
+    protected List<CollapseItem> Items { get; } = new(10);
 
     /// <summary>
     /// 获得/设置 是否为手风琴效果 默认为 false
@@ -69,6 +68,14 @@ public partial class Collapse
 
     private async Task OnClickItem(CollapseItem item)
     {
+        if (IsAccordion && item.IsCollapsed)
+        {
+            // 手风琴模式，设置其他项收起
+            foreach (var i in Items.Where(i => i != item && !i.IsCollapsed))
+            {
+                i.SetCollapsed(true);
+            }
+        }
         item.SetCollapsed(!item.IsCollapsed);
         if (OnCollapseChanged != null)
         {
@@ -80,11 +87,11 @@ private async Task OnClickItem(CollapseItem item)
     /// 添加 CollapseItem 方法 由 CollapseItem 方法加载时调用
     /// </summary>
     /// <param name="item">TabItemBase 实例</param>
-    internal void AddItem(CollapseItem item) => Children.Add(item);
+    internal void AddItem(CollapseItem item) => Items.Add(item);
 
     /// <summary>
     /// 移除 CollapseItem 方法 由 CollapseItem 方法 Dispose 时调用
     /// </summary>
     /// <param name="item">TabItemBase 实例</param>
-    internal void RemoveItem(CollapseItem item) => Children.Remove(item);
+    internal void RemoveItem(CollapseItem item) => Items.Remove(item);
 }

test/UnitTest/Components/CollapseTest.cs

@@ -33,7 +33,7 @@ public void Collapse_Ok()
     }
 
     [Fact]
-    public void Accordion_Ok()
+    public async Task Accordion_Ok()
     {
         var cut = Context.RenderComponent<Collapse>(pb =>
         {
@@ -53,8 +53,11 @@ public void Accordion_Ok()
         });
         cut.Contains("is-accordion");
 
-        var btn = cut.Find(".accordion-button");
-        cut.InvokeAsync(() => btn.Click());
+        var buttons = cut.FindAll(".accordion-button");
+        await cut.InvokeAsync(() => buttons[0].Click());
+
+        buttons = cut.FindAll(".accordion-button");
+        await cut.InvokeAsync(() => buttons[1].Click());
     }
 
     [Fact]