feat(Table): multiple select column adapts to compact mode

src/BootstrapBlazor.Server/Components/Samples/Table/Tables.razor

@@ -1,4 +1,4 @@
-@page "/table"
+@page "/table"
 @inject IStringLocalizer<NavMenu> NavMenuLocalizer
 @inject IStringLocalizer<Tables> Localizer
 @inject IStringLocalizer<Foo> FooLocalizer
@@ -7,11 +7,11 @@
 <h4>@Localizer["TableBaseDescription"]</h4>
 
 <Tips Color="Color.Success">
-	<p>表格功能比较多，参数也非常多，示例更多，各个功能详细用法建议查看下方视频讲解 <b>鞠佬</b> 有专门的视频讲解</p>
-	<ul class="ul-demo">
-		<li>鞠佬 BootstrapBlazor Table 系列 <a href="https://space.bilibili.com/2060594/lists/4298264?type=season">[传送门]</a></li>
-		<li>官网 组件讲解合集 <a href="https://space.bilibili.com/660853738/lists">[传送门]</a></li>
-	</ul>
+    <p>表格功能比较多，参数也非常多，示例更多，各个功能详细用法建议查看下方视频讲解 <b>鞠佬</b> 有专门的视频讲解</p>
+    <ul class="ul-demo">
+        <li>鞠佬 BootstrapBlazor Table 系列 <a href="https://space.bilibili.com/2060594/lists/4298264?type=season">[传送门]</a></li>
+        <li>官网 组件讲解合集 <a href="https://space.bilibili.com/660853738/lists">[传送门]</a></li>
+    </ul>
 </Tips>
 
 <Tips>
@@ -68,8 +68,16 @@
 <DemoBlock Title="@Localizer["TableBaseSizeTitle"]"
            Introduction="@Localizer["TableBaseSizeIntro"]"
            Name="TableSize">
-    <section ignore>@((MarkupString)Localizer["TableBaseSizeDescription"].Value)</section>
-    <Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" IsStriped="true" TableSize="TableSize.Compact">
+    <section ignore>
+        <p>@((MarkupString)Localizer["TableBaseSizeDescription"].Value)</p>
+        <div class="row g-3">
+            <div class="col-12 col-sm-6">
+                <Switch @bind-Value="@_isCompact" DisplayText="TableSize" />
+            </div>
+        </div>
+    </section>
+    <Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" IsStriped="true"
+           TableSize="@(_isCompact ? TableSize.Compact : TableSize.Normal)" IsMultipleSelect="true">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
             <TableColumn @bind-Field="@context.Name" Filterable="true" />

src/BootstrapBlazor.Server/Components/Samples/Table/Tables.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
@@ -21,6 +21,8 @@ public partial class Tables
     [NotNull]
     private string? RefreshText { get; set; }
 
+    private bool _isCompact = true;
+
     /// <summary>
     /// OnInitialized
     /// </summary>

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,11 +1,11 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup Condition="'$(VisualStudioVersion)' == '17.0'">
-    <Version>9.12.2-beta01</Version>
+    <Version>9.12.2-beta02</Version>
   </PropertyGroup>
 
   <PropertyGroup Condition="'$(VisualStudioVersion)' == '18.0'">
-    <Version>10.0.0-rc.2.2.3</Version>
+    <Version>10.0.0-rc.2.2.4</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/ErrorLogger/ErrorLogger.cs

@@ -102,9 +102,9 @@ protected override async Task OnInitializedAsync()
     protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         builder.OpenComponent<CascadingValue<IErrorLogger>>(0);
-        builder.AddAttribute(1, nameof(CascadingValue<IErrorLogger>.Value), this);
-        builder.AddAttribute(2, nameof(CascadingValue<IErrorLogger>.IsFixed), true);
-        builder.AddAttribute(3, nameof(CascadingValue<IErrorLogger>.ChildContent), RenderContent);
+        builder.AddAttribute(1, nameof(CascadingValue<>.Value), this);
+        builder.AddAttribute(2, nameof(CascadingValue<>.IsFixed), true);
+        builder.AddAttribute(3, nameof(CascadingValue<>.ChildContent), RenderContent);
         builder.CloseComponent();
     }
 

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

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
@@ -175,7 +175,10 @@ private int MultipleSelectColumnLeft()
 
     private string? MultiColumnStyleString => GetFixedMultipleSelectColumn ? $"left: {MultipleSelectColumnLeft()}px;" : null;
 
-    private int MultiColumnWidth => ShowCheckboxText ? ShowCheckboxTextColumnWidth : CheckboxColumnWidth;
+    private int MultiColumnWidth => ShowCheckboxText ? ShowCheckboxTextColumnWidth :
+        TableSize == TableSize.Normal
+            ? CheckboxColumnWidth
+            : CheckboxColumnCompactWidth;
 
     /// <summary>
     /// 获得指定列头固定列样式
@@ -290,7 +293,10 @@ private int CalcMargin()
         }
         if (IsMultipleSelect)
         {
-            margin += ShowCheckboxText ? ShowCheckboxTextColumnWidth : CheckboxColumnWidth;
+            margin += ShowCheckboxText ? ShowCheckboxTextColumnWidth :
+                TableSize == TableSize.Normal
+                    ? CheckboxColumnWidth
+                    : CheckboxColumnCompactWidth;
         }
         if (ShowLineNo)
         {

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

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
@@ -339,6 +339,12 @@ private string GetSortTooltip(ITableColumn col) => SortName != col.GetFieldName(
     [Parameter]
     public int CheckboxColumnWidth { get; set; }
 
+    /// <summary>
+    /// 获得/设置 紧凑模式下复选框宽度 默认 28
+    /// </summary>
+    [Parameter]
+    public int CheckboxColumnCompactWidth { get; set; }
+
     /// <summary>
     /// 获得/设置 行号列宽度 默认 60
     /// </summary>
@@ -880,6 +886,11 @@ private void OnInitParameters()
             CheckboxColumnWidth = op.TableSettings.CheckboxColumnWidth;
         }
 
+        if (CheckboxColumnCompactWidth == 0)
+        {
+            CheckboxColumnCompactWidth = op.TableSettings.CheckboxColumnCompactWidth;
+        }
+
         if (op.TableSettings.TableRenderMode != null && RenderMode == TableRenderMode.Auto)
         {
             RenderMode = op.TableSettings.TableRenderMode.Value;

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

@@ -1,4 +1,4 @@
-.table-container {
+.table-container {
     --bb-table-td-padding-x: .5rem;
     --bb-table-td-padding-y: .5rem;
     --bb-table-cardview-label-width: 30%;
@@ -72,7 +72,7 @@
 }
 
 .table-sm {
-    --bb-table-td-padding-x: .25rem;
+    --bb-table-td-padding-x: .35rem;
     --bb-table-td-padding-y: .25rem;
 }
 

src/BootstrapBlazor/Options/TableSettings.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
@@ -15,6 +15,11 @@ public class TableSettings
     /// </summary>
     public int CheckboxColumnWidth { get; set; } = 36;
 
+    /// <summary>
+    /// 获得/设置 复选框宽度 默认 28
+    /// </summary>
+    public int CheckboxColumnCompactWidth { get; set; } = 28;
+
     /// <summary>
     /// 获得/设置 明细行 Row Header 宽度 默认 24
     /// </summary>

test/UnitTest/Components/TableTest.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
@@ -1731,7 +1731,7 @@ public void FixedColumn_Ok()
                     builder.OpenComponent<TableColumn<Foo, string>>(0);
                     builder.AddAttribute(1, "Field", foo.Name);
                     builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
-                    builder.AddAttribute(3, nameof(TableColumn<Foo, string>.Fixed), true);
+                    builder.AddAttribute(3, nameof(TableColumn<,>.Fixed), true);
                     builder.CloseComponent();
                 });
                 pb.Add(a => a.DetailRowTemplate, foo => builder =>
@@ -1972,6 +1972,13 @@ public void FixedMultipleColumn_Ok()
             });
         });
         Assert.Contains("left: 36px;", cut.Markup);
+
+        var table = cut.FindComponent<Table<Foo>>();
+        table.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.TableSize, TableSize.Compact);
+        });
+        Assert.Contains("left: 28px;", cut.Markup);
     }
 
     [Theory]
@@ -2650,7 +2657,7 @@ public void ToolbarButton_Ok()
                 pb.Add(a => a.TableToolbarTemplate, builder =>
                 {
                     builder.OpenComponent<TableToolbarButton<Foo>>(0);
-                    builder.AddAttribute(1, nameof(TableToolbarButton<Foo>.Text), "test-after");
+                    builder.AddAttribute(1, nameof(TableToolbarButton<>.Text), "test-after");
                     builder.CloseComponent();
                 });
                 pb.Add(a => a.TableToolbarBeforeTemplate, builder =>
@@ -3257,6 +3264,30 @@ public void ShowFilterHeader_Ok(bool showCheckboxText)
                 });
             });
         });
+
+        if (showCheckboxText == false)
+        {
+            cut.Contains("width: 36px;");
+        }
+        else
+        {
+            cut.Contains("width: 80px;");
+        }
+
+        var table = cut.FindComponent<Table<Foo>>();
+        table.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.TableSize, TableSize.Compact);
+        });
+
+        if (showCheckboxText == false)
+        {
+            cut.Contains("width: 28px;");
+        }
+        else
+        {
+            cut.Contains("width: 80px;");
+        }
     }
 
     [Theory]
@@ -7390,6 +7421,7 @@ public void TableSize_Ok()
             {
                 pb.Add(a => a.RenderMode, TableRenderMode.Table);
                 pb.Add(a => a.TableSize, TableSize.Normal);
+                pb.Add(a => a.IsMultipleSelect, true);
                 pb.Add(a => a.OnQueryAsync, OnQueryAsync(localizer));
                 pb.Add(a => a.TableColumns, foo => builder =>
                 {