diff --git a/src/BootstrapBlazor.Server/Components/Samples/Selects.razor b/src/BootstrapBlazor.Server/Components/Samples/Selects.razor index 4b5b6c51e44..16f1809e5d1 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Selects.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Selects.razor @@ -316,21 +316,27 @@ Introduction="@Localizer["SelectsShowSearchIntro"]" Name="ShowSearch">
-
+
+
+ + + + +
-
+
-
-
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Selects.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Selects.razor.cs index 11332afc37b..883a8afe457 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Selects.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Selects.razor.cs @@ -47,6 +47,8 @@ public sealed partial class Selects private bool _isShowSearchClearable; + private bool _isFixedSearch; + private bool _isClearable; private string? _fooName; @@ -357,6 +359,14 @@ private AttributeItem[] GetAttributes() => DefaultValue = "false" }, new() + { + Name = "IsFixedSearch", + Description = Localizer["SelectsIsFixedSearch"], + Type = "boolean", + ValueList = "true / false", + DefaultValue = "false" + }, + new() { Name = "IsDisabled", Description = Localizer["SelectsIsDisabled"], diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 3636abe6d2b..94e5b78975b 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -3154,7 +3154,7 @@ "SelectsCustomTemplateTitle": "Custom option templates", "SelectsCustomTemplateIntro": "By setting the ItemTemplate you can customize the option rendering style", "SelectsShowSearchTitle": "Drop-down box with search box", - "SelectsShowSearchIntro": "Controls whether the search box is displayed by setting the ShowSearch property, which is not displayed by default false", + "SelectsShowSearchIntro": "Controls whether the search box is displayed by setting the ShowSearch property, which is not displayed by default false. Fixed the search bar by setting IsFixedSearch", "SelectsConfirmSelectTitle": "Drop-down box with confirmation", "SelectsConfirmSelectIntro": "Block changes to the current value by setting the OnBeforeSelectedItemChange delegate.", "SelectsTimeZoneTitle": "Timezone", @@ -3194,7 +3194,8 @@ "SelectsGenericDesc": "

Please refer to Design Ideas to understand this feature. In this example, by selecting the drop-down box option, the value obtained is the Foo instance, and the value displayed in the text box on the right is the Address value of the Foo attribute

In this example, the ValueEqualityComparer and CustomKeyAttribute parameters are not set, and the [Key] tag of the Id attribute of Foo is used for equality judgment

", "SelectsOnInputChangedCallback": "Callback method for converting input text into corresponding Value in edit mode", "TextConvertToValueCallback": "Callback method when input text changes in edit mode", - "SelectsIsEditable": "Whether editable" + "SelectsIsEditable": "Whether editable", + "SelectsIsFixedSearch": "Whether fixed the search box" }, "BootstrapBlazor.Server.Components.Samples.Sliders": { "SlidersTitle": "Slider", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index d1f1067eeca..9fe32229fa2 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -3154,7 +3154,7 @@ "SelectsCustomTemplateTitle": "自定义选项模板", "SelectsCustomTemplateIntro": "通过设置 ItemTemplate 可以自定义选项渲染样式", "SelectsShowSearchTitle": "带搜索框的下拉框", - "SelectsShowSearchIntro": "通过设置 ShowSearch 属性控制是否显示搜索框，默认为 false 不显示搜索框", + "SelectsShowSearchIntro": "通过设置 ShowSearch 属性控制是否显示搜索框，默认为 false 不显示搜索框；通过设置 IsFixedSearch 固定搜索栏", "SelectsConfirmSelectTitle": "带确认的下拉框", "SelectsConfirmSelectIntro": "通过设置 OnBeforeSelectedItemChange 委托，阻止当前值的改变", "SelectsTimeZoneTitle": "时区下拉框", @@ -3194,7 +3194,8 @@ "SelectsGenericDesc": "

请参考 设计思路 理解此功能。本例中通过选择下拉框选项，得到的值为 Foo 实例，右侧文本框内显示值为 Foo 属性 Address 值

本例中未设置 ValueEqualityComparer 以及 CustomKeyAttribute 参数，使用 Foo 属性 Id 的 [Key] 标签进行相等判定

", "SelectsOnInputChangedCallback": "编辑模式下输入文本转换为对应 Value 回调方法", "TextConvertToValueCallback": "编辑模式下输入文本变化时回调方法", - "SelectsIsEditable": "是否可编辑" + "SelectsIsEditable": "是否可编辑", + "SelectsIsFixedSearch": "是否固定搜索栏" }, "BootstrapBlazor.Server.Components.Samples.Sliders": { "SlidersTitle": "Slider 滑块", diff --git a/src/BootstrapBlazor/Components/Select/Select.razor b/src/BootstrapBlazor/Components/Select/Select.razor index b9adcebc2f7..f41bc4f7ff9 100644 --- a/src/BootstrapBlazor/Components/Select/Select.razor +++ b/src/BootstrapBlazor/Components/Select/Select.razor @@ -30,12 +30,15 @@ { } -
-
- - - -
+
+ @if (ShowSearch) + { +
+ + + +
+ } @if (IsVirtualize) {
@@ -49,30 +52,32 @@ }
} + else if (Rows.Count == 0) + { +
@NoSearchDataText
+ } else { - @foreach (var itemGroup in Rows.GroupBy(i => i.GroupName)) - { - if (!string.IsNullOrEmpty(itemGroup.Key)) +
+ @foreach (var itemGroup in Rows.GroupBy(i => i.GroupName)) { - if (GroupItemTemplate != null) + if (!string.IsNullOrEmpty(itemGroup.Key)) { - @GroupItemTemplate(itemGroup.Key) + if (GroupItemTemplate != null) + { + @GroupItemTemplate(itemGroup.Key) + } + else + { + + } } - else + @foreach (var item in itemGroup) { - + @RenderRow(item) } } - @foreach (var item in itemGroup) - { - @RenderRow(item) - } - } - @if (Rows.Count == 0) - { -
@NoSearchDataText
- } +
}
@if (!IsPopover) diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.cs b/src/BootstrapBlazor/Components/Select/Select.razor.cs index 1fb848e459a..8001f578e9e 100644 --- a/src/BootstrapBlazor/Components/Select/Select.razor.cs +++ b/src/BootstrapBlazor/Components/Select/Select.razor.cs @@ -9,7 +9,7 @@ namespace BootstrapBlazor.Components; /// -/// Select 组件实现类 +/// Select component /// /// public partial class Select : ISelect, ILookup @@ -18,17 +18,11 @@ public partial class Select : ISelect, ILookup [NotNull] private SwalService? SwalService { get; set; } - /// - /// 获得 样式集合 - /// private string? ClassString => CssBuilder.Default("select dropdown") .AddClass("cls", IsClearable) .AddClassFromAttributes(AdditionalAttributes) .Build(); - /// - /// 获得 样式集合 - /// private string? InputClassString => CssBuilder.Default("form-select form-control") .AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue) .AddClass($"border-success", IsValid.HasValue && IsValid.Value) @@ -44,117 +38,108 @@ public partial class Select : ISelect, ILookup private bool GetClearable() => IsClearable && !IsDisabled && IsNullable(); - /// - /// 设置当前项是否 Active 方法 - /// - /// - /// private string? ActiveItem(SelectedItem item) => CssBuilder.Default("dropdown-item") .AddClass("active", item.Value == CurrentValueAsString) .AddClass("disabled", item.IsDisabled) .Build(); - private string? SearchClassString => CssBuilder.Default("search") - .AddClass("show", ShowSearch) - .AddClass("is-fixed", IsFixedSearch) - .Build(); - - /// - /// 获得 SearchLoadingIcon 图标字符串 - /// private string? SearchLoadingIconString => CssBuilder.Default("icon searching-icon") .AddClass(SearchLoadingIcon) .Build(); + private string? DropdownMenuClassString => CssBuilder.Default("dropdown-menu") + .AddClass("is-fixed-search", ShowSearch && IsFixedSearch) + .Build(); + private readonly List _children = []; private string? ScrollIntoViewBehaviorString => ScrollIntoViewBehavior == ScrollIntoViewBehavior.Smooth ? null : ScrollIntoViewBehavior.ToDescriptionString(); /// - /// 获得/设置 右侧清除图标 默认 fa-solid fa-angle-up + /// Gets or sets the right-side clear icon. Default is fa-solid fa-angle-up. /// [Parameter] [NotNull] public string? ClearIcon { get; set; } /// - /// 获得/设置 搜索文本发生变化时回调此方法 + /// Gets or sets the callback method when the search text changes. /// [Parameter] public Func>? OnSearchTextChanged { get; set; } /// - /// 获得/设置 是否固定下拉框中的搜索栏 默认 false + /// Gets or sets whether the search bar in the dropdown is fixed. Default is false. /// [Parameter] public bool IsFixedSearch { get; set; } /// - /// 获得/设置 是否可编辑 默认 false + /// Gets or sets whether the select component is editable. Default is false. /// [Parameter] public bool IsEditable { get; set; } /// - /// 获得/设置 选项输入更新后回调方法 默认 null + /// Gets or sets the callback method when the input value changes. Default is null. /// - /// 设置 后生效 + /// Effective when is set. [Parameter] public Func? OnInputChangedCallback { get; set; } /// - /// 获得/设置 是否可清除 默认 false + /// Gets or sets whether the select component is clearable. Default is false. /// [Parameter] public bool IsClearable { get; set; } /// - /// 获得/设置 选项模板支持静态数据 + /// Gets or sets the options template for static data. /// [Parameter] public RenderFragment? Options { get; set; } /// - /// 获得/设置 显示部分模板 默认 null + /// Gets or sets the display template. Default is null. /// [Parameter] public RenderFragment? DisplayTemplate { get; set; } /// - /// 获得/设置 是否开启虚拟滚动 默认 false 未开启 注意：开启虚拟滚动后不支持 参数设置，设置初始值时请设置 + /// Gets or sets whether virtual scrolling is enabled. Default is false. Note: When virtual scrolling is enabled, , , and are not supported. Set when setting initial values. /// [Parameter] public bool IsVirtualize { get; set; } /// - /// 获得/设置 虚拟滚动行高 默认为 33 + /// Gets or sets the row height for virtual scrolling. Default is 33. /// - /// 需要设置 值为 true 时生效 + /// Effective when is set to true. [Parameter] public float RowHeight { get; set; } = 33f; /// - /// 获得/设置 过载阈值数 默认为 4 + /// Gets or sets the overscan count for virtual scrolling. Default is 4. /// - /// 需要设置 值为 true 时生效 + /// Effective when is set to true. [Parameter] public int OverscanCount { get; set; } = 4; /// - /// 获得/设置 默认文本 时生效 默认 null + /// Gets or sets the default text for virtualized items. Default is null. /// - /// 开启 并且通过 提供数据源时，由于渲染时还未调用或者调用后数据集未包含 选项值，此时使用 DefaultText 值渲染 + /// Effective when is enabled and data source is provided via . If the data set does not contain the option value during rendering, the DefaultText value is used. [Parameter] public string? DefaultVirtualizeItemText { get; set; } /// - /// 获得/设置 清除文本内容 OnClear 回调方法 默认 null + /// Gets or sets the callback method when the clear button is clicked. Default is null. /// [Parameter] public Func? OnClearAsync { get; set; } /// - /// 获得/设置 禁止首次加载时触发 OnSelectedItemChanged 回调方法 默认 false + /// Gets or sets whether to disable the OnSelectedItemChanged callback method on first render. Default is false. /// [Parameter] public bool DisableItemChangedWhenFirstRender { get; set; } @@ -163,50 +148,50 @@ public partial class Select : ISelect, ILookup private Virtualize? VirtualizeElement { get; set; } /// - /// 获得/设置 绑定数据集 + /// Gets or sets the bound data set. /// [Parameter] [NotNull] public IEnumerable? Items { get; set; } /// - /// 获得/设置 选项模板 + /// Gets or sets the item template. /// [Parameter] public RenderFragment? ItemTemplate { get; set; } /// - /// 获得/设置 下拉框项目改变前回调委托方法 返回 true 时选项值改变，否则选项值不变 + /// Gets or sets the callback method before the selected item changes. Returns true to change the selected item value; otherwise, the selected item value does not change. /// [Parameter] public Func>? OnBeforeSelectedItemChange { get; set; } /// - /// SelectedItemChanged 回调方法 + /// Gets or sets the callback method when the selected item changes. /// [Parameter] public Func? OnSelectedItemChanged { get; set; } /// - /// 获得/设置 Swal 图标 默认 Question + /// Gets or sets the Swal category. Default is Question. /// [Parameter] public SwalCategory SwalCategory { get; set; } = SwalCategory.Question; /// - /// 获得/设置 Swal 标题 默认 null + /// Gets or sets the Swal title. Default is null. /// [Parameter] public string? SwalTitle { get; set; } /// - /// 获得/设置 Swal 内容 默认 null + /// Gets or sets the Swal content. Default is null. /// [Parameter] public string? SwalContent { get; set; } /// - /// 获得/设置 Footer 默认 null + /// Gets or sets the Swal footer. Default is null. /// [Parameter] public string? SwalFooter { get; set; } @@ -229,6 +214,13 @@ public partial class Select : ISelect, ILookup [Parameter] public object? LookupServiceData { get; set; } + /// + /// Gets or sets the callback method for loading virtualized items. + /// + [Parameter] + [NotNull] + public Func>>? OnQueryAsync { get; set; } + /// /// /// @@ -244,21 +236,17 @@ public partial class Select : ISelect, ILookup private IStringLocalizer>? Localizer { get; set; } /// - /// 获得/设置 服务实例 + /// Gets or sets the injected lookup service instance. /// [Inject] [NotNull] private ILookupService? InjectLookupService { get; set; } /// - /// 获得 input 组件 Id 方法 + /// /// - /// protected override string? RetrieveId() => InputId; - /// - /// 获得/设置 Select 内部 Input 组件 Id - /// private string? InputId => $"{Id}_input"; private string _lastSelectedValueString = string.Empty; @@ -269,9 +257,6 @@ public partial class Select : ISelect, ILookup private ItemsProviderResult _result; - /// - /// 当前选择项实例 - /// private SelectedItem? SelectedItem { get; set; } private List Rows @@ -393,20 +378,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender) } } - /// - /// 获得/设置 数据总条目 - /// private int TotalCount { get; set; } private List GetVirtualItems() => [.. FilterBySearchText(GetRowsByItems())]; - /// - /// 虚拟滚动数据加载回调方法 - /// - [Parameter] - [NotNull] - public Func>>? OnQueryAsync { get; set; } - private async ValueTask> LoadItems(ItemsProviderRequest request) { // 有搜索条件时使用原生请求数量 @@ -473,14 +448,13 @@ private bool TryParseSelectItem(string value, [MaybeNullWhen(false)] out TValue /// /// /// - /// protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { ConfirmMethodCallback = nameof(ConfirmSelectedItem), SearchMethodCallback = nameof(TriggerOnSearch) }); /// - /// 客户端回车回调方法 + /// Confirms the selected item. /// - /// - /// + /// The index of the selected item. + /// A task that represents the asynchronous operation. [JSInvokable] public async Task ConfirmSelectedItem(int index) { @@ -492,10 +466,10 @@ public async Task ConfirmSelectedItem(int index) } /// - /// 客户端搜索栏回调方法 + /// Triggers the search callback method. /// - /// - /// + /// The search text. + /// A task that represents the asynchronous operation. [JSInvokable] public async Task TriggerOnSearch(string searchText) { @@ -504,8 +478,10 @@ public async Task TriggerOnSearch(string searchText) } /// - /// 下拉框选项点击时调用此方法 + /// Handles the click event for a dropdown item. /// + /// The selected item. + /// A task that represents the asynchronous operation. private async Task OnClickItem(SelectedItem item) { var ret = true; @@ -514,7 +490,7 @@ private async Task OnClickItem(SelectedItem item) ret = await OnBeforeSelectedItemChange(item); if (ret) { - // 返回 True 弹窗提示 + // Return true to show modal var option = new SwalOption() { Category = SwalCategory, @@ -530,7 +506,7 @@ private async Task OnClickItem(SelectedItem item) } else { - // 返回 False 直接运行 + // Return false to proceed ret = true; } } @@ -547,11 +523,9 @@ private async Task SelectedItemChanged(SelectedItem item) item.Active = true; SelectedItem = item; - // 触发 StateHasChanged _lastSelectedValueString = item.Value; CurrentValueAsString = _lastSelectedValueString; - // 触发 SelectedItemChanged 事件 if (OnSelectedItemChanged != null) { await OnSelectedItemChanged(SelectedItem); @@ -562,11 +536,10 @@ private async Task SelectedItemChanged(SelectedItem item) /// /// /// - /// public void Add(SelectedItem item) => _children.Add(item); /// - /// 清空搜索栏文本内容 + /// Clears the search text. /// public void ClearSearchText() => SearchText = null; diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.scss b/src/BootstrapBlazor/Components/Select/Select.razor.scss index 18f82f95222..4145796e73e 100644 --- a/src/BootstrapBlazor/Components/Select/Select.razor.scss +++ b/src/BootstrapBlazor/Components/Select/Select.razor.scss @@ -209,46 +209,45 @@ border-color: transparent transparent var(--bs-info); } -.dropdown-menu .search { - padding: var(--bb-select-search-padding); - position: relative; - border-block-end: var(--bs-border-width) solid var(--bb-select-search-border-color); - margin-block-end: var(--bb-select-search-margin-bottom); - - &:not(.show) { - display: none; - } - - &.l { - .search-icon { - display: none; +.dropdown-menu { + .dropdown-menu-search { + padding: var(--bb-select-search-padding); + position: relative; + border-block-end: var(--bs-border-width) solid var(--bb-select-search-border-color); + margin-block-end: var(--bb-select-search-margin-bottom); + + &.l { + .search-icon { + display: none; + } + + .searching-icon { + display: block; + } } .searching-icon { - display: block; + display: none; } } - .searching-icon { - display: none; + .search-text { + padding-inline-end: var(--bb-select-search-padding-right); } -} - -.dropdown-menu .search.is-fixed { - position: sticky; - top: calc(-1 * var(--bs-dropdown-padding-y)); - background-color: var(--bs-dropdown-bg); -} -.dropdown-menu .search .search-text { - padding-inline-end: var(--bb-select-search-padding-right); -} + .icon { + position: absolute; + right: var(--bb-select-search-icon-right); + top: var(--bb-select-search-icon-top); + color: var(--bb-select-search-icon-color); + } -.dropdown-menu .search .icon { - position: absolute; - right: var(--bb-select-search-icon-right); - top: var(--bb-select-search-icon-top); - color: var(--bb-select-search-icon-color); + &.is-fixed-search { + .dropdown-menu-body { + max-height: calc(var(--bb-dropdown-max-height) - 76px); + overflow: auto; + } + } } .select:not(.multi-select) .dropdown-toggle { diff --git a/test/UnitTest/Components/SelectTest.cs b/test/UnitTest/Components/SelectTest.cs index f1c59c44c6d..0da9524b0f3 100644 --- a/test/UnitTest/Components/SelectTest.cs +++ b/test/UnitTest/Components/SelectTest.cs @@ -580,14 +580,14 @@ public void IsFixedSearch_Ok() pb.Add(a => a.ShowSearch, true); pb.Add(a => a.IsFixedSearch, true); }); - Assert.Contains("search show is-fixed", cut.Markup); + Assert.Contains("dropdown-menu is-fixed-search", cut.Markup); Assert.Contains("class=\"icon search-icon", cut.Markup); cut.SetParametersAndRender(pb => { pb.Add(a => a.ShowSearch, false); }); - Assert.Contains("search is-fixed", cut.Markup); + Assert.DoesNotContain("dropdown-menu is-fixed-search", cut.Markup); } [Fact]