feat(SelectTable): add ShowToolbar parameter (#7668)

* refactor: 调整默认宽度防止分页折行

* feat(SelectTable): add ShowToolbar parameter

* doc: 更新文档注释

* chore: bump version 10.3.3-beta01

* test: 更正单词拼写错误

* test: 增加 Toolbar 单元测试

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.3.2</Version>
+    <Version>10.3.3-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Select/SelectTable.razor

@@ -80,6 +80,9 @@
                    IsPagination="IsPagination" PageItemsSource="PageItemsSource" ShowGotoNavigator="false" MaxPageLinkCount="3"
                    OnClickRowCallback="OnClickRowCallback" OnQueryAsync="OnQueryAsync"
                    IsMultipleSelect="IsMultipleSelect" @bind-SelectedRows="SelectedItems"
+                   ShowToolbar="ShowToolbar" ToolbarTemplate="ToolbarTemplate"
+                   TableExtensionToolbarTemplate="TableExtensionToolbarTemplate"
+                   ShowDefaultButtons="false" ShowRefresh="false"
                    ShowEmpty="ShowEmpty" EmptyTemplate="EmptyTemplate"></Table>
         </div>
     </RenderTemplate>

src/BootstrapBlazor/Components/Select/SelectTable.razor.cs

@@ -88,8 +88,8 @@ namespace BootstrapBlazor.Components;
     public bool ShowAppendArrow { get; set; } = true;
 
     /// <summary>
-    /// <para lang="zh">获得/设置 弹窗表格最小宽度 默认为 null 未设置使用样式中的默认值</para>
-    /// <para lang="en">Gets or sets Dropdown Table Min Width. Default null (use style default)</para>
+    /// <para lang="zh">获得/设置 弹窗表格最小宽度 默认为 null 未设置使用样式中的默认值 602px</para>
+    /// <para lang="en">Gets or sets Dropdown Table Min Width. Default null (use style default 602px)</para>
     /// </summary>
     [Parameter]
     public int? TableMinWidth { get; set; }
@@ -139,6 +139,27 @@ namespace BootstrapBlazor.Components;
     [Parameter]
     public string? MultiSelectedItemMaxWidth { get; set; }
 
+    /// <summary>
+    /// <para lang="zh">获得/设置 是否显示工具栏 默认 false 不显示</para>
+    /// <para lang="en">Gets or sets Whether to show toolbar. Default false</para>
+    /// </summary>
+    [Parameter]
+    public bool ShowToolbar { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 表格 Toolbar 工具栏模板</para>
+    /// <para lang="en">Gets or sets the table toolbar template, content appears center of toolbar</para>
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ToolbarTemplate { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 表格 Toolbar 工具栏右侧按钮模板，模板中内容出现在默认按钮后面</para>
+    /// <para lang="en">Gets or sets the table toolbar right-side button template, content appears after the default buttons</para>
+    /// </summary>
+    [Parameter]
+    public RenderFragment? TableExtensionToolbarTemplate { get; set; }
+
     /// <summary>
     /// <para lang="zh">获得/设置 IIconTheme 服务实例</para>
     /// <para lang="en">Gets or sets IIconTheme Service Instance</para>

src/BootstrapBlazor/Components/Select/SelectTable.razor.js

@@ -10,7 +10,7 @@ export function init(id, invoke) {
     }
 
     const setWidth = () => {
-        const minWidth = parseFloat(el.dataset.bbMinWidth || '580');
+        const minWidth = parseFloat(el.dataset.bbMinWidth || '602');
         let width = getWidth(el);
         if (width < minWidth) {
             width = minWidth;

test/UnitTest/Components/SelectTableTest.cs

@@ -686,6 +686,59 @@ public async Task IsMultipleSelect_Ok()
         cut.Contains("multi-select-item-ph");
     }
 
+    [Fact]
+    public void ToolbarTemplate_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var items = Foo.GenerateFoo(localizer);
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<SelectTable<Foo>>(pb =>
+            {
+                pb.Add(a => a.OnQueryAsync, options =>
+                {
+                    return Task.FromResult(new QueryData<Foo>()
+                    {
+                        Items = items,
+                        IsAdvanceSearch = true,
+                        IsFiltered = true,
+                        IsSearch = true,
+                        IsSorted = true
+                    });
+                });
+                pb.Add(a => a.GetTextCallback, foo => foo.Name);
+                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.ShowToolbar, true);
+                pb.Add(a => a.ToolbarTemplate, builder =>
+                {
+                    builder.AddContent(0, "toolbar-template");
+                });
+                pb.Add(a => a.TableExtensionToolbarTemplate, builder =>
+                {
+                    builder.AddContent(0, "toolbar-extension-template");
+                });
+            });
+        });
+
+        cut.Contains("toolbar-template");
+        cut.Contains("toolbar-extension-template");
+
+        var table = cut.FindComponent<SelectTable<Foo>>();
+        table.Render(pb =>
+        {
+            pb.Add(a => a.ShowToolbar, false);
+        });
+        cut.DoesNotContain("toolbar-template");
+        cut.DoesNotContain("toolbar-extension-template");
+    }
+
     private static Task<QueryData<Foo>> OnFilterQueryAsync(QueryPageOptions options, IEnumerable<Foo> _filterItems)
     {
         _filterItems = _filterItems.Where(options.ToFilterFunc<Foo>());