feat: table support CollapsedTopSearch parameter (#359)

Co-authored-by: alex chow <zhouchuanglin@gmail.com>
Co-authored-by: lambert lee <1708416@qq.com>
Co-authored-by: lambert lee <lish@live.cn>

Author: 4 people

src/BootstrapBlazor/Components/Table/Table.razor

@@ -2,7 +2,7 @@
 @typeparam TItem
 @inherits BootstrapModuleComponentBase
 
-<div @attributes="@AdditionalAttributes" class="@ClassName" style="@StyleString" id="@Id" @ref="TableElement">
+<div @attributes="@AdditionalAttributes" class="@ClassName" style="@StyleString" id="@Id">
     <CascadingValue Value="this" IsFixed="true">
         @TableColumns?.Invoke(new TItem())
     </CascadingValue>
@@ -842,7 +842,7 @@ RenderFragment<TItem> RenderRowExtendButtons => item =>
 </td>;
 
 RenderFragment RenderSearch =>
-@<Card IsCollapsible="true" HeaderText="@SearchModalTitle">
+@<Card IsCollapsible="true" HeaderText="@SearchModalTitle" Collapsed="CollapsedTopSearch">
     <HeaderTemplate>
         @if (ShowSearchText)
         {

src/BootstrapBlazor/Components/Table/Table.razor.FixHeader.cs

@@ -133,6 +133,26 @@ namespace BootstrapBlazor.Components;
 
     private static string? GetColWidthString(int? width) => width.HasValue ? $"width: {width.Value}px;" : null;
 
+    /// <summary>
+    /// 获得/设置 Table 高度 默认为 null
+    /// </summary>
+    /// <remarks>开启固定表头功能时生效 <see cref="IsFixedHeader"/></remarks>
+    [Parameter]
+    public int? Height { get; set; }
+
+    /// <summary>
+    /// 获得/设置 固定表头 默认 false
+    /// </summary>
+    /// <remarks>固定表头时设置 <see cref="Height"/> 即可出现滚动条，未设置时尝试自适应</remarks>
+    [Parameter]
+    public bool IsFixedHeader { get; set; }
+
+    /// <summary>
+    /// 获得/设置 多表头模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? MultiHeaderTemplate { get; set; }
+
     /// <summary>
     /// 获得/设置 列拷贝 Tooltip 文字
     /// </summary>

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -127,10 +127,12 @@ public async Task EditAsync_Ok()
             {
                 itemsChanged = true;
             });
+            pb.Add(a => a.EditFooterTemplate, foo => builder => builder.AddContent(0, "test_edit_footer"));
         });
 
         // Add 弹窗
         await cut.InvokeAsync(() => table.Instance.AddAsync());
+        cut.Contains("test_edit_footer");
 
         // 编辑弹窗逻辑
         input = cut.Find(".modal-body form input.form-control");

test/UnitTest/Components/TableDialogTest.cs

@@ -443,6 +443,46 @@ public async Task ShowTopSearch_Ok()
         await cut.InvokeAsync(() => searchButton.Click());
     }
 
+    [Fact]
+    public void CollapsedTopSearch_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.RenderComponent<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.ShowSearch, true);
+                pb.Add(a => a.CollapsedTopSearch, true);
+                pb.Add(a => a.SearchMode, SearchMode.Top);
+                pb.Add(a => a.OnQueryAsync, OnQueryAsync(localizer));
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", "Name");
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+                    builder.AddAttribute(3, "Searchable", true);
+                    builder.CloseComponent();
+                });
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, int>>(0);
+                    builder.AddAttribute(1, "Field", foo.Count);
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Count", typeof(int)));
+                    builder.AddAttribute(3, "Searchable", true);
+                    builder.CloseComponent();
+                });
+            });
+        });
+        cut.DoesNotContain("card-body collapse show");
+
+        var table = cut.FindComponent<Table<Foo>>();
+        table.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.CollapsedTopSearch, false);
+        });
+        cut.Contains("card-body collapse show");
+    }
+
     [Fact]
     public void ShowToolbar_Ok()
     {