feat(Search): remove OnClear callback reuse OnSearch (#6761)

* refactor: 精简代码

* refactor: 微调样式

* refactor: 移动 IsClearable/ClearIcon 到基类

* refactor: 微调右间距

* Revert "refactor: 微调右间距"

This reverts commit 584f654.

* refactor: 调整 Clear 小图标样式

* refactor: 移除 OnClear 回调方法

* refactor: 调整 search-template 左间距

* refactor: 移除 is-clearable 样式

* refactor: 设置按钮样式

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs

@@ -68,19 +68,6 @@ public partial class AutoComplete
     [Parameter]
     public bool ShowNoDataTip { get; set; } = true;
 
-    /// <summary>
-    /// Gets or sets whether the select component is clearable. Default is false.
-    /// </summary>
-    [Parameter]
-    public bool IsClearable { get; set; }
-
-    /// <summary>
-    /// Gets or sets the right-side clear icon. Default is fa-solid fa-angle-up.
-    /// </summary>
-    [Parameter]
-    [NotNull]
-    public string? ClearIcon { get; set; }
-
     /// <summary>
     /// IStringLocalizer service instance
     /// </summary>
@@ -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);
     }
 
     /// <summary>

src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs

@@ -91,6 +91,19 @@ public abstract class PopoverCompleteBase<TValue> : BootstrapInputBase<TValue>,
     [Parameter]
     public RenderFragment<TValue>? ItemTemplate { get; set; }
 
+    /// <summary>
+    /// Gets or sets whether the select component is clearable. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool IsClearable { get; set; }
+
+    /// <summary>
+    /// Gets or sets the right-side clear icon. Default is fa-solid fa-angle-up.
+    /// </summary>
+    [Parameter]
+    [NotNull]
+    public string? ClearIcon { get; set; }
+
     /// <summary>
     /// 获得 是否跳过 ESC 按键字符串
     /// </summary>
@@ -155,6 +168,8 @@ protected override void OnParametersSet()
     {
         base.OnParametersSet();
 
+        ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.InputClearIcon);
+
         Offset ??= "[0, 6]";
     }
 

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs

@@ -119,19 +119,6 @@ public partial class AutoFill<TValue>
     [NotNull]
     public Func<VirtualizeQueryOption, Task<QueryData<TValue>>>? OnQueryAsync { get; set; }
 
-    /// <summary>
-    /// Gets or sets whether the select component is clearable. Default is false.
-    /// </summary>
-    [Parameter]
-    public bool IsClearable { get; set; }
-
-    /// <summary>
-    /// Gets or sets the right-side clear icon. Default is fa-solid fa-angle-up.
-    /// </summary>
-    [Parameter]
-    [NotNull]
-    public string? ClearIcon { get; set; }
-
     /// <summary>
     /// Gets or sets the callback method when the clear button is clicked. Default is null.
     /// </summary>
@@ -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 ??= [];

src/BootstrapBlazor/Components/Search/Search.razor

@@ -32,13 +32,15 @@
                    placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement" />
             @if (IsClearable)
             {
-                <div class="search-icon search-clear-icon">
+                <div class="search-clear-icon">
                     <i class="@ClearIcon" @onclick="OnClearClick" aria-label="Clear"></i>
                 </div>
             }
             @if (IconTemplate != null)
             {
-                @IconTemplate(_context)
+                <div class="search-template-icon">
+                    @IconTemplate(_context)
+                </div>
             }
         </div>
         @if (ButtonTemplate != null)

src/BootstrapBlazor/Components/Search/Search.razor.cs

@@ -18,18 +18,6 @@ public partial class Search<TValue>
     [Parameter]
     public RenderFragment<SearchContext<TValue>>? IconTemplate { get; set; }
 
-    /// <summary>
-    /// Gets or sets whether to show the clear button. Default is false.
-    /// </summary>
-    [Parameter]
-    public bool IsClearable { get; set; }
-
-    /// <summary>
-    /// Gets or sets the clear icon. Default is null.
-    /// </summary>
-    [Parameter]
-    public string? ClearIcon { get; set; }
-
     /// <summary>
     /// Gets or sets whether to show the clear button. Default is false.
     /// </summary>
@@ -146,6 +134,8 @@ public partial class Search<TValue>
     /// Gets or sets the event callback when the clear button is clicked. Default is null.
     /// </summary>
     [Parameter]
+    [Obsolete("已取消 合并到 OnSearch 方法中; Deprecated. Merged into the OnSearch method")]
+    [ExcludeFromCodeCoverage]
     public Func<Task>? 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();
     }
 

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;
     }
 }

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<Search<string>>(builder =>
         {
@@ -138,17 +139,20 @@ 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<string>();
             });
         });
         cut.Contains("test-icon");
         cut.Contains("Clear");
 
         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("<div class=\"search-icon search-clear-icon\">");
+        cut.Contains("<div class=\"search-clear-icon\">");
     }
 
     [Fact]