-
Notifications
You must be signed in to change notification settings - Fork 308
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(MultiFilter): add MultiFilter component (#3703)
* add TableContextualMenu Component * add CustomFilter * add OnSearchValueChanged * 实现单选过滤 * refactor: 增加关系运算符 * 添加隔离css * 重构代码 * 添加本地化 * 添加demo，重构代码 * 优化UI布局 * refactor: 重命名组件 * refactor: 更新 scss 源 * refactor: 移除 CustomFilter 参数 * refactor: 精简代码 * doc: 更新资源文件 * doc: 更新示例 * refactor: 更新样式 * feat: 增加 ShowSearch 参数 * refactor: 更新全选框状态 * refactor: 重置更新搜索框值 * style: 更新样式 * 固定宽高 * feat: 弃用属性不参与序列化 * doc: 更新说明文档 * test: 增加单元测试 * chore: bump version 8.6.3 --------- Co-authored-by: Argo-AscioTech <argo@live.ca>
- Loading branch information
Showing
13 changed files
with
370 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
157 changes: 157 additions & 0 deletions
157
src/BootstrapBlazor/Components/Filters/MultiFilter.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; } | ||
| } | ||
| } |
51 changes: 51 additions & 0 deletions
51
src/BootstrapBlazor/Components/Filters/MultiFilter.razor.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.