feat(Table): support ResetColumnList method (#7665)

* style: 更新弹窗样式

* refactor: 格式化代码

* feat: 增加 resetColumnList 回调方法

* doc: 更新示例

* doc: 增加变量示例

* refactor: 更新文件编码

* refactor: 更新销毁逻辑

* test: 更新单元测试

* refactor: 代码格式化

* refactor: 重构代码

Author: ArgoZhang

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

@@ -18,14 +18,33 @@
         <p>@((MarkupString)Localizer["VisibleP3"].Value)</p>
         <p>@((MarkupString)Localizer["VisibleP4"].Value)</p>
         <p>@((MarkupString)Localizer["ResetVisibleColumnsDesc"].Value)</p>
+        <p>@((MarkupString)Localizer["IsPopoverToolbarDropdownButtonDesc"].Value)</p>
+        <div class="row form-inline g-3">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsPopoverToolbarDropdownButton"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="_isPopoverToolbarDropdownButton">
+                    </Switch>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="ShowColumnListControls"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="_showColumnListControls">
+                    </Switch>
+                </BootstrapInputGroup>
+            </div>
+        </div>
     </section>
     <Button Text="@Localizer["ResetVisibleColumnsButtonText"]" OnClickWithoutRender="ResetVisibleColumns"></Button>
 
     <Table TItem="Foo" @ref="TableColumnVisible"
            IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true" ShowColumnListControls="true"
+           ShowColumnList="true" ShowColumnListControls="_showColumnListControls"
+           IsPopoverToolbarDropdownButton="_isPopoverToolbarDropdownButton"
+           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
            ShowToolbar="true" ShowAddButton="false" ShowEditButton="false" ShowDeleteButton="false"
-           ShowExtendButtons="false" ShowColumnList="true" ClientTableName="test_table"
+           ShowExtendButtons="false" ClientTableName="test_table"
            OnQueryAsync="@OnQueryAsync">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />

src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnList.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(argo@live.ca) Website: https://www.blazor.zone
@@ -27,6 +27,9 @@ public partial class TablesColumnList
     [NotNull]
     private Table<Foo>? TableColumnVisible { get; set; }
 
+    private bool _isPopoverToolbarDropdownButton = true;
+    private bool _showColumnListControls = true;
+
     /// <summary>
     /// OnInitialized 方法
     /// </summary>
@@ -51,7 +54,7 @@ private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
         IEnumerable<Foo> items = Items;
         // 过滤
         var isFiltered = false;
-        if (options.Filters.Any())
+        if (options.Filters.Count > 0)
         {
             items = items.Where(options.Filters.GetFilterFunc<Foo>());
             isFiltered = true;

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4559,6 +4559,7 @@
     "ShownWithBreakPointP4": "Because the <code>Table</code> component supports mobile adaptation by default, the card mode is used for small screens. In this example, the explicit setting uses <code>RenderMode=\"TableRenderMode. Table\"</code> mode",
     "ShownWithBreakPointTitle": "Automatically show/hide columns based on screen width",
     "TablesColumnDescription": "Used to display multiple pieces of data with similar structures, data can be sorted, filtered, compared or other custom operations.",
+    "IsPopoverToolbarDropdownButtonDesc": "The <code>IsPopoverToolbarDropdownButton</code> parameter controls whether the column list is displayed as a popover or a dropdown menu. The default value is <code>false</code>, which means it is displayed as a dropdown menu. When set to <code>true</code>, it is displayed as a popover.",
     "TablesColumnTitle": "Table Column",
     "VisibleIntro": "Set whether the column is displayed by specifying the <code>ShowColumnList</code> attribute",
     "VisibleP1": "<code>ShowColumnList</code> The default value is false, and if it is explicitly specified as true, the corresponding column adjustment button will appear in the toolbar",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4559,6 +4559,7 @@
     "ShownWithBreakPointP4": "由于 <code>Table</code> 组件默认是支持移动端适配，所以小屏幕时采用的是卡片式模式，本例中显式设置使用 <code>RenderMode=\"TableRenderMode.Table\"</code> 模式",
     "ShownWithBreakPointTitle": "根据屏幕宽度自动显示/隐藏列",
     "TablesColumnDescription": "用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。",
+    "IsPopoverToolbarDropdownButtonDesc": "通过设置 <code>IsPopoverToolbarDropdownButton</code> 属性，工具栏列下拉框显示为气泡弹窗形式",
     "TablesColumnTitle": "Table 表格",
     "VisibleIntro": "通过指定 <code>ShowColumnList</code> 属性设置列是否显示",
     "VisibleP1": "<code>ShowColumnList</code> 默认值为 false，显式指定为 true 后工具栏出现相应列调整按钮",

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

@@ -941,8 +941,11 @@ public async Task ExpandDetailRow(TItem item)
 
     private string? DropdownListClassString => CssBuilder.Default("dropdown-menu dropdown-menu-end shadow")
         .AddClass("dropdown-menu-controls", ShowColumnListControls)
+        .AddClass("dropdown-menu-popover", IsPopoverToolbarDropdownButton)
         .Build();
 
+    private bool _lastIsPopoverToolbarDropdownButtonValue = false;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -1151,6 +1154,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         if (firstRender)
         {
+            _lastIsPopoverToolbarDropdownButtonValue = IsPopoverToolbarDropdownButton;
             await ProcessFirstRender();
         }
 
@@ -1208,6 +1212,13 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             await InvokeVoidAsync("scrollTo", Id);
         }
 
+        // 如果 ColumnList 显示状态改变重置 ColumnList 渲染模式
+        if (_lastIsPopoverToolbarDropdownButtonValue != IsPopoverToolbarDropdownButton)
+        {
+            _lastIsPopoverToolbarDropdownButtonValue = IsPopoverToolbarDropdownButton;
+            await InvokeVoidAsync("resetColumnList", Id);
+        }
+
         // 增加去重保护 _loop 为 false 时执行
         if (!_loop && IsAutoRefresh && AutoRefreshInterval > 500)
         {

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -1,11 +1,11 @@
 export { getResponsive } from '../../modules/responsive.js'
 import { copy, drag, getDescribedElement, getOuterHeight, getWidth, isVisible } from '../../modules/utility.js'
-import  browser from '../../modules/browser.min.mjs'
+import browser from '../../modules/browser.min.mjs'
 import Data from '../../modules/data.js'
 import EventHandler from '../../modules/event-handler.js'
 import Popover from "../../modules/base-popover.js"
 
-export function init(id, invoke, options) {
+export async function init(id, invoke, options) {
     const el = document.getElementById(id)
     if (el === null) {
         return
@@ -18,7 +18,7 @@ export function init(id, invoke, options) {
     }
     Data.set(id, table)
 
-    reset(id)
+    await reset(id)
 }
 
 export function saveColumnList(tableName, columns) {
@@ -121,7 +121,6 @@ export async function reset(id) {
 
     table.pages = [...table.el.children].find(i => i.classList.contains('nav-pages'));
 
-
     setColumnToolboxListener(table);
 
     if (isVisible(table.el) === false) {
@@ -824,8 +823,7 @@ const calcCellWidth = cell => {
     document.body.appendChild(div);
 
     const cellStyle = getComputedStyle(cell);
-    const width = div.offsetWidth + parseFloat(cellStyle.getPropertyValue('padding-left')) + parseFloat(cellStyle.getPropertyValue('padding-right')) + parseFloat(cellStyle.getPropertyValue('border-left-width')) + parseFloat(cellStyle.getPropertyValue('border-right-width')) + 1;
-    return width;
+    return div.offsetWidth + parseFloat(cellStyle.getPropertyValue('padding-left')) + parseFloat(cellStyle.getPropertyValue('padding-right')) + parseFloat(cellStyle.getPropertyValue('border-left-width')) + parseFloat(cellStyle.getPropertyValue('border-right-width')) + 1;
 }
 
 const closeAllTips = (columns, self) => {
@@ -1003,6 +1001,33 @@ const setToolbarDropdown = (table, toolbar) => {
     })
 }
 
+export function resetColumnList(id) {
+    const table = Data.get(id);
+    if (table) {
+        const { toolbar } = table;
+        if (toolbar) {
+            const dropdown = toolbar.querySelector('.dropdown-column');
+            if (dropdown) {
+                const button = dropdown.querySelector('.dropdown-toggle');
+                const dropdownToggle = bootstrap.Dropdown.getInstance(button);
+                if (dropdownToggle) {
+                    dropdownToggle.dispose();
+                }
+                const p = table.popovers.find(i => i.el === dropdown);
+                if (p) {
+                    table.popovers = table.popovers.filter(i => i !== p);
+                    Popover.dispose(p);
+                }
+                if (button.getAttribute('data-bs-toggle') === 'bb.dropdown') {
+                    table.popovers.push(Popover.init(dropdown, {
+                        isDisabled: () => false
+                    }));
+                }
+            }
+        }
+    }
+}
+
 const saveColumnWidth = table => {
     const cols = table.columns
     const tableWidth = table.tables[0].offsetWidth

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

@@ -1,3 +1,7 @@
+.dropdown-menu-popover {
+  --bb-table-columnlist-max-height: var(--bb-dropdown-max-height);
+}
+
 .table-container {
     --bb-table-td-padding-x: .5rem;
     --bb-table-td-padding-y: .5rem;
@@ -307,7 +311,8 @@
     margin-block-end: .5rem;
 }
 
-.table-toolbar .dropdown-column .dropdown-menu {
+.table-toolbar .dropdown-column .dropdown-menu,
+.dropdown-menu-popover {
 
     &:not(.dropdown-menu-controls) {
         max-height: var(--bb-table-columnlist-max-height);

src/BootstrapBlazor/wwwroot/modules/base-popover.js

@@ -1,4 +1,4 @@
-import { getDescribedElement, getDescribedOwner, hackTooltip, hackPopover, isDisabled, registerBootstrapBlazorModule } from "./utility.js"
+import { getDescribedElement, getDescribedOwner, hackTooltip, hackPopover, isDisabled, registerBootstrapBlazorModule } from "./utility.js"
 import EventHandler from "./event-handler.js"
 
 const Popover = {
@@ -74,7 +74,7 @@ const Popover = {
         popover.triggerHideCallback = () => {
             if (popover.hideCallback) {
                 popover.hideCallback();
-            };
+            }
         }
 
         if (popover.isPopover) {

test/UnitTest/Components/TableTest.cs

@@ -747,7 +747,7 @@ public async Task ShowColumnList_Ok()
                 pb.Add(a => a.RenderMode, TableRenderMode.Table);
                 pb.Add(a => a.ShowToolbar, true);
                 pb.Add(a => a.ShowColumnList, true);
-                pb.Add(a => a.IsPopoverToolbarDropdownButton, true);
+                pb.Add(a => a.IsPopoverToolbarDropdownButton, false);
                 pb.Add(a => a.AllowResizing, true);
                 pb.Add(a => a.ShowColumnWidthTooltip, true);
                 pb.Add(a => a.ColumnWidthTooltipPrefix, "test");
@@ -775,13 +775,21 @@ public async Task ShowColumnList_Ok()
             });
         });
         cut.Contains("Test_Column_List");
+        cut.DoesNotContain("dropdown-menu-popover");
 
         var item = cut.FindComponents<Checkbox<bool>>()[0];
         await cut.InvokeAsync(item.Instance.OnToggleClick);
         Assert.True(show);
 
         await cut.InvokeAsync(item.Instance.OnToggleClick);
         Assert.False(show);
+
+        var table = cut.FindComponent<Table<Foo>>();
+        table.Render(pb =>
+        {
+            pb.Add(a => a.IsPopoverToolbarDropdownButton, true);
+        });
+        table.Contains("dropdown-menu-popover");
     }
 
     [Fact]