feat(Table): add ShowColorWhenToolbarButtonsCollapsed parameter (#6251)

* feat(Table): add 'ShowColorWhenToolbarButtonsCollapsed' attribute in 'table' component, add some css style

* chore: bump version 9.7.4-beta08

Co-Authored-By: jin momiji <105467851+momijijin@users.noreply.github.com>

* test: 增加单元测试

---------

Co-authored-by: Argo Zhang <argo@live.ca>

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.7.4-beta07</Version>
+    <Version>9.7.4-beta08</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Table/Table.razor

@@ -40,7 +40,7 @@
         @if (ShowToolbar)
         {
             <div class="table-toolbar">
-                <TableToolbar GearIcon="@GearIcon" OnGetSelectedRows="@GetSelectedRows" IsAutoCollapsedToolbarButton="IsAutoCollapsedToolbarButton">
+                <TableToolbar GearIcon="@GearIcon" OnGetSelectedRows="@GetSelectedRows" IsAutoCollapsedToolbarButton="IsAutoCollapsedToolbarButton" ShowColorWhenToolbarButtonsCollapsed="ShowColorWhenToolbarButtonsCollapsed">
                     @if (TableToolbarBeforeTemplate != null)
                     {
                         @TableToolbarBeforeTemplate

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

@@ -166,6 +166,12 @@ public partial class Table<TItem>
     [Parameter]
     public bool IsAutoCollapsedToolbarButton { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 工具栏按钮收缩后是否继承原先按钮的颜色样式和中空化 默认 false
+    /// </summary>
+    [Parameter]
+    public bool ShowColorWhenToolbarButtonsCollapsed { get; set; }
+
     /// <summary>
     /// 获得/设置 工具栏移动端按钮图标
     /// </summary>

src/BootstrapBlazor/Components/Table/Table.razor.scss

@@ -338,6 +338,46 @@
     }
 }
 
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-primary {
+    background-color: var(--bs-primary);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-secondary {
+    background-color: var(--bs-secondary);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-success {
+    background-color: var(--bs-success);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-danger {
+    background-color: var(--bs-danger);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-warning {
+    background-color: var(--bs-warning);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-info {
+    background-color: var(--bs-info);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-dark {
+    background-color: var(--bs-dark);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-light {
+    background-color: var(--bs-light);
+    color: #212529;
+}
+
 .btn-gear .dropdown-menu .dropdown-item:not(:first-child) {
     border-inline-start: solid 1px #aeb2b7;
 }

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

@@ -41,6 +41,12 @@ public partial class TableToolbar<TItem> : ComponentBase
     [Parameter]
     public bool IsAutoCollapsedToolbarButton { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 工具栏按钮收缩后是否继承原先按钮的颜色样式 默认 false
+    /// </summary>
+    [Parameter]
+    public bool ShowColorWhenToolbarButtonsCollapsed { get; set; }
+
     /// <summary>
     /// 获得/设置 移动端按钮图标
     /// </summary>
@@ -53,6 +59,11 @@ public partial class TableToolbar<TItem> : ComponentBase
 
     private string? GetItemClass(ButtonBase button) => CssBuilder.Default("dropdown-item")
         .AddClass("disabled", GetDisabled(button))
+        .AddClass($"dropdown-item-btn-{button.Color.ToDescriptionString()}",
+            ShowColorWhenToolbarButtonsCollapsed &&
+            !button.IsOutline &&
+            button.Color != Color.None &&
+            button.Color != Color.Link)
         .Build();
 
     private async Task OnToolbarButtonClick(TableToolbarButton<TItem> button)

test/UnitTest/Components/TableTest.cs

@@ -247,6 +247,7 @@ public class TableTest : BootstrapBlazorTestBase
             {
                 pb.Add(a => a.RenderMode, TableRenderMode.Table);
                 pb.Add(a => a.ShowToolbar, true);
+                pb.Add(a => a.ShowColorWhenToolbarButtonsCollapsed, true);
                 pb.Add(a => a.ShowColumnList, true);
                 pb.Add(a => a.Items, Foo.GenerateFoo(localizer, 2));
                 pb.Add(a => a.TableColumns, foo => builder =>