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

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

@@ -35,7 +35,7 @@
 <DemoBlock Title="@Localizer["PaginationTitle"]"
            Introduction="@Localizer["PaginationIntro"]"
            Name="Pagination">
-    <ListView TItem="Product" Pageable="true" PageItems="4" OnQueryAsync="@OnQueryAsync" Height="620px">
+    <ListView TItem="Product" IsPagination="true" PageItems="4" OnQueryAsync="@OnQueryAsync" Height="620px">
         <HeaderTemplate>
             <div>@Localizer["ProductListText"]</div>
         </HeaderTemplate>

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,11 @@ public partial class Collapse
 
     private async Task OnClickItem(CollapseItem item)
     {
+        if (IsAccordion && item.IsCollapsed)
+        {
+            // 手风琴模式，设置其他项收起
+            Items.Where(i => i != item && !i.IsCollapsed).ToList().ForEach(i => i.SetCollapsed(true));
+        }
         item.SetCollapsed(!item.IsCollapsed);
         if (OnCollapseChanged != null)
         {
@@ -80,11 +84,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);
 }

src/BootstrapBlazor/Components/ListView/ListView.razor

@@ -55,14 +55,14 @@
             @EmptyText
         }
     </div>
-    @if (FooterTemplate != null || Pageable)
+    @if (FooterTemplate != null || IsPagination)
     {
         <div class="listview-footer">
             @if (FooterTemplate != null)
             {
                 @FooterTemplate
             }
-            else if (Pageable)
+            else if (IsPagination)
             {
                 <Pagination PageCount="@PageCount" PageIndex="@_pageIndex" OnPageLinkClick="@OnPageLinkClick"></Pagination>
             }

src/BootstrapBlazor/Components/ListView/ListView.razor.cs

@@ -51,7 +51,7 @@ public partial class ListView<TItem> : BootstrapComponentBase
     public RenderFragment<TItem>? BodyTemplate { get; set; }
 
     /// <summary>
-    /// 获得/设置 FooterTemplate 默认 null 未设置 设置值后 <see cref="Pageable"/> 参数不起作用，请自行实现分页功能
+    /// 获得/设置 FooterTemplate 默认 null 未设置 设置值后 <see cref="IsPagination"/> 参数不起作用，请自行实现分页功能
     /// </summary>
     [Parameter]
     public RenderFragment? FooterTemplate { get; set; }
@@ -66,7 +66,15 @@ public partial class ListView<TItem> : BootstrapComponentBase
     /// 获得/设置 是否分页 默认为 false 不分页 设置 <see cref="FooterTemplate"/> 时分页功能自动被禁用
     /// </summary>
     [Parameter]
-    public bool Pageable { get; set; }
+    [Obsolete("已弃用，请使用 IsPagination 代替。Deprecated, use IsPagination instead")]
+    [ExcludeFromCodeCoverage]
+    public bool Pageable { get => IsPagination; set => IsPagination = value; }
+
+    /// <summary>
+    /// 获得/设置 是否分页 默认为 false 不分页 设置 <see cref="FooterTemplate"/> 时分页功能自动被禁用
+    /// </summary>
+    [Parameter]
+    public bool IsPagination { get; set; }
 
     /// <summary>
     /// 获得/设置 分组 Lambda 表达式 默认 null
@@ -143,7 +151,7 @@ public partial class ListView<TItem> : BootstrapComponentBase
     /// <summary>
     /// 获得/设置 当前页码
     /// </summary>
-    private int _pageIndex;
+    private int _pageIndex = 1;
 
     /// <summary>
     /// 获得/设置 数据总条目
@@ -177,29 +185,31 @@ protected override async Task OnParametersSetAsync()
     /// 点击页码调用此方法
     /// </summary>
     /// <param name="pageIndex"></param>
-    protected Task OnPageLinkClick(int pageIndex) => QueryAsync(pageIndex);
+    protected Task OnPageLinkClick(int pageIndex) => QueryAsync(pageIndex, true);
 
     /// <summary>
     /// 查询按钮调用此方法
     /// </summary>
     /// <returns></returns>
-    public async Task QueryAsync(int pageIndex = 1)
+    public async Task QueryAsync(int pageIndex = 1, bool triggerByPagination = false)
     {
         _pageIndex = pageIndex;
-        await QueryData();
+        await QueryData(triggerByPagination);
         StateHasChanged();
     }
 
     /// <summary>
     /// 调用 OnQuery 回调方法获得数据源
     /// </summary>
-    protected async Task QueryData()
+    protected async Task QueryData(bool triggerByPagination = false)
     {
         QueryData<TItem>? queryData = null;
         if (OnQueryAsync != null)
         {
             queryData = await OnQueryAsync(new QueryPageOptions()
             {
+                IsPage = IsPagination,
+                IsTriggerByPagination = triggerByPagination,
                 PageIndex = _pageIndex,
                 PageItems = PageItems,
             });

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]

test/UnitTest/Components/ListViewTest.cs

@@ -76,6 +76,8 @@ public async Task ListView_Ok()
     [Fact]
     public async Task Pageable_Ok()
     {
+        var triggerByPage = false;
+        var pageIndex = 0;
         var items = Enumerable.Range(1, 6).Select(i => new Product()
         {
             ImageUrl = $"images/Pic{i}.jpg",
@@ -84,26 +86,33 @@ public async Task Pageable_Ok()
         });
         var cut = Context.RenderComponent<ListView<Product>>(pb =>
         {
-            pb.Add(a => a.OnQueryAsync, Query);
-            pb.Add(a => a.Pageable, true);
+            pb.Add(a => a.OnQueryAsync, option =>
+            {
+                pageIndex = option.PageIndex;
+                triggerByPage = option.IsTriggerByPagination;
+                return Task.FromResult(new QueryData<Product>()
+                {
+                    Items = items,
+                    TotalCount = 6
+                });
+            });
+            pb.Add(a => a.IsPagination, true);
             pb.Add(a => a.PageItems, 2);
         });
+        Assert.False(triggerByPage);
+        Assert.Equal(1, pageIndex);
 
         var pages = cut.FindAll(".page-link");
         Assert.Equal(5, pages.Count);
         await cut.InvokeAsync(() => pages[2].Click());
-
-        Task<QueryData<Product>> Query(QueryPageOptions option) => Task.FromResult(new QueryData<Product>()
-        {
-            Items = items,
-            TotalCount = 6
-        });
+        Assert.True(triggerByPage);
     }
 
     [Fact]
-    public void QueryAsync_Ok()
+    public async Task QueryAsync_Ok()
     {
         bool query = false;
+        bool page = false;
         var items = Enumerable.Range(1, 6).Select(i => new Product()
         {
             ImageUrl = $"images/Pic{i}.jpg",
@@ -114,6 +123,7 @@ public void QueryAsync_Ok()
         {
             pb.Add(a => a.OnQueryAsync, option =>
             {
+                page = option.IsPage;
                 query = true;
                 var ret = new QueryData<Product>()
                 {
@@ -122,11 +132,12 @@ public void QueryAsync_Ok()
                 };
                 return Task.FromResult(ret);
             });
-            pb.Add(a => a.Pageable, true);
+            pb.Add(a => a.IsPagination, true);
             pb.Add(a => a.PageItems, 2);
         });
         Assert.True(query);
-        cut.InvokeAsync(() => cut.Instance.QueryAsync());
+        Assert.True(page);
+        await cut.InvokeAsync(() => cut.Instance.QueryAsync());
     }
 
     [Fact]
@@ -159,7 +170,7 @@ public void Collapsible_Ok()
                 };
                 return Task.FromResult(ret);
             });
-            pb.Add(a => a.Pageable, true);
+            pb.Add(a => a.IsPagination, true);
             pb.Add(a => a.PageItems, 2);
             pb.Add(a => a.OnListViewItemClick, p =>
             {
@@ -209,7 +220,7 @@ public void IsAccordion_Ok()
                 };
                 return Task.FromResult(ret);
             });
-            pb.Add(a => a.Pageable, true);
+            pb.Add(a => a.IsPagination, true);
             pb.Add(a => a.PageItems, 2);
         });
         var collapse = cut.FindComponent<Collapse>();
@@ -246,7 +257,7 @@ public void CollapsedGroupCallback_Ok()
                 };
                 return Task.FromResult(ret);
             });
-            pb.Add(a => a.Pageable, true);
+            pb.Add(a => a.IsPagination, true);
             pb.Add(a => a.PageItems, 2);
         });
         Assert.True(callback);
@@ -281,7 +292,7 @@ public void OnCollapseChanged_Ok()
                 expect = item;
                 return Task.CompletedTask;
             });
-            pb.Add(a => a.Pageable, true);
+            pb.Add(a => a.IsPagination, true);
             pb.Add(a => a.PageItems, 2);
         });