feat(MultiFilter): add MultiFilter component

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

@@ -46,7 +46,7 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["FilterTemplateTitle"]"
-            Introduction="@Localizer["FilterTemplateIntro"]" Name="CustomerFilter">
+           Introduction="@Localizer["FilterTemplateIntro"]" Name="CustomerFilter">
     <section ignore>@((MarkupString)Localizer["TablesFilterTemplateDescription", ComponentSourceCodeUrl].Value)</section>
 
     <Table TItem="Foo"
@@ -192,3 +192,38 @@
         </TableColumns>
     </Table>
 </DemoBlock>
+
+<DemoBlock Title="@Localizer["CustomFilterTitle"]"
+           Introduction="@Localizer["CustomFilterIntro"]"
+           Name="CustomFilter">
+    <Table TItem="Foo"
+           IsPagination="true" PageItemsSource="@PageItemsSource"
+           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
+           ShowSkeleton="true"
+           OnQueryAsync="@OnQueryAsync">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
+            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true">
+                <FilterTemplate>
+                    <MultiFilter Items="Items.Select(i => new SelectedItem(i.Name!, i.Name!)).DistinctBy(i => i.Value).ToList()"></MultiFilter>
+                </FilterTemplate>
+            </TableColumn>
+            <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true">
+                <FilterTemplate>
+                    <MultiFilter Items="Items.Select(i => new SelectedItem(i.Address!, i.Address!)).DistinctBy(i => i.Value).ToList()"></MultiFilter>
+                </FilterTemplate>
+            </TableColumn>
+            <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true">
+                <FilterTemplate>
+                    <MultiFilter Items="Items.Select(i => new SelectedItem(i.Complete.ToString()!, i.Complete.ToString()!)).DistinctBy(i => i.Value).ToList()"></MultiFilter>
+                </FilterTemplate>
+            </TableColumn>
+            <TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true">
+                <FilterTemplate>
+                    <MultiFilter Items="Items.Select(i => new SelectedItem(i.Education.ToString()!, i.Education.ToString()!)).DistinctBy(i => i.Value).ToList()"></MultiFilter>
+                </FilterTemplate>
+            </TableColumn>
+            <TableColumn @bind-Field="@context.Count" Width="150" Sortable="true" />
+        </TableColumns>
+    </Table>
+</DemoBlock>

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

@@ -5448,6 +5448,8 @@
     "AutoHeightIntro": "<p><b>Highly Adaptive</b></p><p>In this example, when the parent container height is set to <code>600px</code> expand/collapse the search bar, the table automatically fills the parent container</p>"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesFilter": {
+    "CustomFilterTitle": "List filtering",
+    "CustomFilterIntro": "Provide a custom filtering list for columns",
     "TablesFilterTitle": "Filter and sort function",
     "TablesFilterDesc": "Filter to quickly find the data you want to see; sort to quickly find or compare data.",
     "TablesFilterDescLi1": "Filters a column of data to specify the column to be filtered by specifying the <code>filterable</code> property of the column",

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

@@ -5448,6 +5448,8 @@
     "AutoHeightIntro": "<p><b>高度自适应</b></p><p>本例中设置父容器高度为 <code>600px</code> 展开/收起搜索栏时，表格自动充满父容器</p>"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesFilter": {
+    "CustomFilterTitle": "列表筛选",
+    "CustomFilterIntro": "为列提供自定义筛选列表",
     "TablesFilterTitle": "筛选和排序功能",
     "TablesFilterDesc": "筛选可快速查找到自己想看的数据；排序可快速查找或对比数据。",
     "TablesFilterDescLi1": "对某一列数据进行筛选，通过指定列的 <code>Filterable</code> 属性来指定需要筛选的列",

src/BootstrapBlazor/Components/Filters/BoolFilter.razor.cs

@@ -39,9 +39,9 @@ protected override void OnParametersSet()
 
         Items ??= new SelectedItem[]
         {
-            new SelectedItem("", Localizer["BoolFilter.AllText"].Value),
-            new SelectedItem("true", Localizer["BoolFilter.TrueText"].Value),
-            new SelectedItem("false", Localizer["BoolFilter.FalseText"].Value)
+            new("", Localizer["BoolFilter.AllText"].Value),
+            new("true", Localizer["BoolFilter.TrueText"].Value),
+            new("false", Localizer["BoolFilter.FalseText"].Value)
         };
     }
 

src/BootstrapBlazor/Components/Filters/MultiFilter.razor

@@ -0,0 +1,27 @@
+@using Microsoft.Extensions.Localization
+@namespace BootstrapBlazor.Components
+@inherits FilterBase
+@inject IStringLocalizer<MultiFilter> Localizer
+
+<div class="bb-multi-filter">
+    @if (ShowSearch)
+    {
+        <BootstrapInput UseInputEvent="true" class="bb-multi-filter-search"
+                        Value="@_searchText" bind-value:event="oninput" IsAutoFocus="true"
+                        PlaceHolder="@SearchPlaceHolderText" IsSelectAllTextOnFocus="true"
+                        OnValueChanged="OnSearchValueChanged" />
+    }
+    <div class="bb-multi-filter-list">
+        <div class="bb-multi-filter-header">
+            <Checkbox Value="checkAll" ShowAfterLabel="true" ShowLabel="false" DisplayText="@SelectAllText" OnStateChanged="@OnStateChanged" State="GetState()" />
+        </div>
+        <div class="bb-multi-filter-body scroll">
+            @foreach (var item in GetItems())
+            {
+                <div class="bb-multi-filter-body-item">
+                    <Checkbox @bind-Value="@item.Checked" ShowAfterLabel="true" ShowLabel="false" DisplayText="@item.Text" />
+                </div>
+            }
+        </div>
+    </div>
+</div>

src/BootstrapBlazor/Components/Filters/MultiFilter.razor.cs

@@ -0,0 +1,157 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 表格过滤菜单组件
+/// </summary>
+public partial class MultiFilter
+{
+    /// <summary>
+    /// 获得/设置 搜索栏占位符 默认 nul 使用资源文件中值
+    /// </summary>
+    [Parameter]
+    public string? SearchPlaceHolderText { get; set; }
+
+    /// <summary>
+    /// 获得/设置 全选按钮文本 默认 nul 使用资源文件中值
+    /// </summary>
+    [Parameter]
+    public string? SelectAllText { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否显示搜索栏 默认 true
+    /// </summary>
+    [Parameter]
+    public bool ShowSearch { get; set; } = true;
+
+    private string? _searchText;
+
+    private bool checkAll = false;
+
+    private readonly List<MultiFilterItem> _source = [];
+
+    private IEnumerable<MultiFilterItem>? _items;
+
+    /// <summary>
+    /// OnInitialized 方法
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        if (Items != null)
+        {
+            _source.AddRange(Items.Select(item => new MultiFilterItem() { Value = item.Value, Text = item.Text }));
+        }
+        if (TableFilter != null)
+        {
+            TableFilter.ShowMoreButton = false;
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        SearchPlaceHolderText ??= Localizer["MultiFilterSearchPlaceHolderText"];
+        SelectAllText ??= Localizer["MultiFilterSelectAllText"];
+    }
+
+    /// <summary>
+    /// 重置过滤条件方法
+    /// </summary>
+    public override void Reset()
+    {
+        checkAll = false;
+        _searchText = string.Empty;
+        foreach (var item in _source)
+        {
+            item.Checked = false;
+        }
+        StateHasChanged();
+    }
+
+    /// <summary>
+    /// 生成过滤条件方法
+    /// </summary>
+    /// <returns></returns>
+    public override FilterKeyValueAction GetFilterConditions()
+    {
+        var filter = new FilterKeyValueAction() { Filters = [], FilterLogic = FilterLogic.Or };
+
+        foreach (var item in GetItems().Where(i => i.Checked))
+        {
+            filter.Filters.Add(new FilterKeyValueAction()
+            {
+                FieldKey = FieldKey,
+                FieldValue = item.Value,
+                FilterAction = FilterAction.Equal
+            });
+        }
+        return filter;
+    }
+
+    private CheckboxState GetState() => GetItems().All(i => i.Checked)
+        ? CheckboxState.Checked
+        : GetItems().All(i => !i.Checked) ? CheckboxState.UnChecked : CheckboxState.Indeterminate;
+
+    private Task OnStateChanged(CheckboxState state, bool val)
+    {
+        checkAll = val;
+        if (state == CheckboxState.Checked)
+        {
+            foreach (var item in _source)
+            {
+                item.Checked = true;
+            }
+        }
+        else
+        {
+            foreach (var item in _source)
+            {
+                item.Checked = false;
+            }
+        }
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    /// <summary>
+    /// 过滤内容搜索
+    /// </summary>
+    /// <param name="val"></param>
+    /// <returns></returns>
+    private Task OnSearchValueChanged(string? val)
+    {
+        _searchText = val;
+        if (!string.IsNullOrEmpty(_searchText))
+        {
+            _items = _source.Where(i => i.Text.Contains(_searchText));
+        }
+        else
+        {
+            _items = null;
+        }
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private IEnumerable<MultiFilterItem> GetItems() => _items ?? _source;
+
+    class MultiFilterItem
+    {
+        public bool Checked { get; set; }
+
+        [NotNull]
+        public string? Value { get; init; }
+
+        [NotNull]
+        public string? Text { get; init; }
+    }
+}

src/BootstrapBlazor/Components/Filters/MultiFilter.razor.scss

@@ -0,0 +1,51 @@
+.bb-multi-filter {
+    --bb-multi-filter-height: 180px;
+    --bb-multi-filter-width: 224px;
+    --bb-multi-filter-search-margin-bottom: 1rem;
+    --bb-multi-filter-body-item-bg: #fff;
+    --bb-multi-filter-body-item-hover-bg: #fff;
+    --bb-multi-filter-body-item-margin: .5rem;
+
+    .bb-multi-filter-search {
+        margin-bottom: var(--bb-multi-filter-search-margin-bottom);
+    }
+
+    .bb-multi-filter-list {
+        border: var(--bs-border-width) solid var(--bs-border-color);
+        border-radius: var(--bs-border-radius);
+        padding: var(--bb-multi-filter-body-item-margin);
+
+        .bb-multi-filter-header {
+            margin-bottom: var(--bb-multi-filter-body-item-margin);
+            padding-bottom: var(--bb-multi-filter-body-item-margin);
+            border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+        }
+
+        .bb-multi-filter-body {
+            height: var(--bb-multi-filter-height);
+            width: var(--bb-multi-filter-width);
+            margin-top: var(--bb-multi-filter-body-item-margin);
+
+            .bb-multi-filter-body-item {
+                background-color: var(--bb-multi-filter-body-item-bg);
+
+                .form-check {
+                    width: 100%;
+
+                    .form-check-input + .form-check-label {
+                        text-overflow: unset;
+                        overflow: unset;
+                    }
+                }
+
+                &:not(:last-child) {
+                    margin-bottom: var(--bb-multi-filter-body-item-margin);
+                }
+
+                &:hover {
+                    background-color: var(--bb-multi-filter-body-item-hover-bg);
+                }
+            }
+        }
+    }
+}

src/BootstrapBlazor/Locales/en.json

@@ -173,6 +173,10 @@
     "CloseAllTabsText": "Close All",
     "NotFoundTabText": "NotFound"
   },
+  "BootstrapBlazor.Components.MultiFilter": {
+    "MultiFilterSearchPlaceHolderText": "Please enter ...",
+    "MultiFilterSelectAllText": "Select All"
+  },
   "BootstrapBlazor.Components.Table": {
     "AddButtonText": "Add",
     "EditButtonText": "Edit",

src/BootstrapBlazor/Locales/zh.json

@@ -173,6 +173,10 @@
     "CloseAllTabsText": "关闭所有标签",
     "NotFoundTabText": "未找到"
   },
+  "BootstrapBlazor.Components.MultiFilter": {
+    "MultiFilterSearchPlaceHolderText": "请输入 ...",
+    "MultiFilterSelectAllText": "全选"
+  },
   "BootstrapBlazor.Components.Table": {
     "AddButtonText": "新建",
     "EditButtonText": "编辑",

src/BootstrapBlazor/wwwroot/scss/components.scss

@@ -39,6 +39,7 @@
 @import "../../Components/ErrorLogger/ErrorLogger.razor.scss";
 @import "../../Components/FlipClock/FlipClock.razor.scss";
 @import "../../Components/FileIcon/FileIcon.razor.scss";
+@import "../../Components/Filters/MultiFilter.razor.scss";
 @import "../../Components/Filters/TableFilter.razor.scss";
 @import "../../Components/Footer/Footer.razor.scss";
 @import "../../Components/FullScreen/FullScreenButton.razor.scss";