diff --git a/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs b/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs index 6c079f3c885..8957a351624 100644 --- a/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs +++ b/src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs @@ -68,19 +68,6 @@ public partial class AutoComplete [Parameter] public bool ShowNoDataTip { get; set; } = true; - /// - /// Gets or sets whether the select component is clearable. Default is false. - /// - [Parameter] - public bool IsClearable { get; set; } - - /// - /// Gets or sets the right-side clear icon. Default is fa-solid fa-angle-up. - /// - [Parameter] - [NotNull] - public string? ClearIcon { get; set; } - /// /// IStringLocalizer service instance /// @@ -143,7 +130,6 @@ protected override void OnParametersSet() PlaceHolder ??= Localizer[nameof(PlaceHolder)]; Icon ??= IconTheme.GetIconByKey(ComponentIcons.AutoCompleteIcon); LoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.LoadingIcon); - ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectClearIcon); } /// diff --git a/src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs b/src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs index db2835b49cb..c5c3d90b74d 100644 --- a/src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs +++ b/src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs @@ -91,6 +91,19 @@ public abstract class PopoverCompleteBase : BootstrapInputBase, [Parameter] public RenderFragment? ItemTemplate { get; set; } + /// + /// Gets or sets whether the select component is clearable. Default is false. + /// + [Parameter] + public bool IsClearable { get; set; } + + /// + /// Gets or sets the right-side clear icon. Default is fa-solid fa-angle-up. + /// + [Parameter] + [NotNull] + public string? ClearIcon { get; set; } + /// /// 获得 是否跳过 ESC 按键字符串 /// @@ -155,6 +168,8 @@ protected override void OnParametersSet() { base.OnParametersSet(); + ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.InputClearIcon); + Offset ??= "[0, 6]"; } diff --git a/src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs b/src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs index 71c8fda2eb2..6da99c45d14 100644 --- a/src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs +++ b/src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs @@ -119,19 +119,6 @@ public partial class AutoFill [NotNull] public Func>>? OnQueryAsync { get; set; } - /// - /// Gets or sets whether the select component is clearable. Default is false. - /// - [Parameter] - public bool IsClearable { get; set; } - - /// - /// 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 clear button is clicked. Default is null. /// @@ -178,7 +165,6 @@ protected override void OnParametersSet() PlaceHolder ??= Localizer[nameof(PlaceHolder)]; Icon ??= IconTheme.GetIconByKey(ComponentIcons.AutoFillIcon); LoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.LoadingIcon); - ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectClearIcon); _displayText = GetDisplayText(Value); Items ??= []; diff --git a/src/BootstrapBlazor/Components/Search/Search.razor b/src/BootstrapBlazor/Components/Search/Search.razor index cae05a7c74a..10aa2b55cee 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor +++ b/src/BootstrapBlazor/Components/Search/Search.razor @@ -32,13 +32,15 @@ placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement" /> @if (IsClearable) { -
+
} @if (IconTemplate != null) { - @IconTemplate(_context) +
+ @IconTemplate(_context) +
}
@if (ButtonTemplate != null) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.cs b/src/BootstrapBlazor/Components/Search/Search.razor.cs index 1dbcd19d6af..541d0bcecfb 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.cs +++ b/src/BootstrapBlazor/Components/Search/Search.razor.cs @@ -18,18 +18,6 @@ public partial class Search [Parameter] public RenderFragment>? IconTemplate { get; set; } - /// - /// Gets or sets whether to show the clear button. Default is false. - /// - [Parameter] - public bool IsClearable { get; set; } - - /// - /// Gets or sets the clear icon. Default is null. - /// - [Parameter] - public string? ClearIcon { get; set; } - /// /// Gets or sets whether to show the clear button. Default is false. /// @@ -146,6 +134,8 @@ public partial class Search /// Gets or sets the event callback when the clear button is clicked. Default is null. /// [Parameter] + [Obsolete("已取消 合并到 OnSearch 方法中; Deprecated. Merged into the OnSearch method")] + [ExcludeFromCodeCoverage] public Func? OnClear { get; set; } [Inject] @@ -189,7 +179,6 @@ protected override void OnParametersSet() { base.OnParametersSet(); - ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.InputClearIcon); ClearButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchClearButtonIcon); SearchButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchButtonIcon); SearchButtonLoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchButtonLoadingIcon); @@ -239,10 +228,6 @@ private async Task OnClearClick() await InvokeVoidAsync("setValue", Id, ""); _displayText = null; - if (OnClear != null) - { - await OnClear(); - } await OnSearchClick(); } diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.scss b/src/BootstrapBlazor/Components/Search/Search.razor.scss index 9c66534c7ce..5af03e418f8 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.scss +++ b/src/BootstrapBlazor/Components/Search/Search.razor.scss @@ -1,6 +1,7 @@ -.search.auto-complete { +.search.auto-complete { --bb-ac-padding-right: #{$bb-search-padding-right}; --bb-search-prefix-icon-color: #{$bb-search-prefix-icon-color}; + --bb-search-clear-icon-color: var(--bb-select-append-color); .form-control-group { display: flex; @@ -10,7 +11,7 @@ .search-prefix-icon { color: var(--bb-search-prefix-icon-color); - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .search-input { @@ -21,13 +22,22 @@ padding: 0; } - .search-icon { + .search-clear-icon { cursor: pointer; - margin-left: 0.5rem; + color: var(--bb-search-clear-icon-color); + margin-inline-start: 0.5rem; } &:not(:hover) .search-clear-icon { display: none; } + + .search-template-icon { + margin-inline-start: 0.5rem; + } + } + + .input-group button { + cursor: pointer; } } diff --git a/test/UnitTest/Components/SearchTest.cs b/test/UnitTest/Components/SearchTest.cs index 841152a748e..db72ea3ddc2 100644 --- a/test/UnitTest/Components/SearchTest.cs +++ b/test/UnitTest/Components/SearchTest.cs @@ -130,6 +130,7 @@ public async Task OnSearchClick_Ok() [Fact] public async Task OnClearClick_Ok() { + var tcs = new TaskCompletionSource(); var ret = false; var cut = Context.RenderComponent>(builder => { @@ -138,10 +139,12 @@ public async Task OnClearClick_Ok() builder.Add(s => s.ClearButtonColor, Color.Secondary); builder.Add(s => s.ClearButtonIcon, "test-icon"); builder.Add(s => s.ClearButtonText, "Clear"); - builder.Add(s => s.OnClear, () => + builder.Add(s => s.OnSearch, async v => { ret = true; - return Task.CompletedTask; + await Task.Yield(); + tcs.TrySetResult(); + return new List(); }); }); cut.Contains("test-icon"); @@ -149,6 +152,7 @@ public async Task OnClearClick_Ok() var button = cut.Find(".btn-secondary"); await cut.InvokeAsync(() => button.Click()); + await tcs.Task; Assert.True(ret); } @@ -227,7 +231,7 @@ public void IsClearable_Ok() { pb.Add(a => a.IsClearable, true); }); - cut.Contains("
"); + cut.Contains("
"); } [Fact]