Merge branch 'main' of https://github.com/dotnetcore/BootstrapBlazor

Author: actions-user

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.10.1</Version>
+    <Version>9.10.2</Version>
   </PropertyGroup>
 
   <ItemGroup>

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

@@ -19,7 +19,7 @@
     <span class="form-select-append ac-loading"><i class="@LoadingIcon"></i></span>
     @if (GetClearable())
     {
-        <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
+        <span class="@ClearClassString"><i class="@ClearIcon"></i></span>
     }
     <RenderTemplate @ref="_dropdown">
         @RenderDropdown

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

@@ -14,13 +14,6 @@ namespace BootstrapBlazor.Components;
 /// <typeparam name="TValue">The type of the value.</typeparam>
 public partial class AutoFill<TValue>
 {
-    /// <summary>
-    /// Gets the component style.
-    /// </summary>
-    private string? ClassString => CssBuilder.Default("auto-complete auto-fill")
-        .AddClass("is-clearable", IsClearable)
-        .Build();
-
     /// <summary>
     /// Gets or sets the collection of items for the component.
     /// </summary>
@@ -119,19 +112,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>
@@ -154,6 +134,13 @@ public partial class AutoFill<TValue>
     [NotNull]
     private RenderTemplate? _dropdown = null;
 
+    /// <summary>
+    /// Gets the component style.
+    /// </summary>
+    private string? ClassString => CssBuilder.Default("auto-complete auto-fill")
+        .AddClass("is-clearable", IsClearable)
+        .Build();
+
     /// <summary>
     /// Gets the clear icon class string.
     /// </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 ??= [];
@@ -190,7 +176,6 @@ protected override void OnParametersSet()
     /// <returns></returns>
     protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, _displayText);
 
-
     private bool IsNullable() => !ValueType.IsValueType || NullableUnderlyingType != null;
 
     /// <summary>
@@ -199,30 +184,6 @@ protected override void OnParametersSet()
     /// <returns></returns>
     private bool GetClearable() => IsClearable && !IsDisabled && IsNullable();
 
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    /// <returns></returns>
-    private async Task OnClearValue()
-    {
-        // 使用脚本更新 input 值
-        await InvokeVoidAsync("setValue", Id, "");
-
-        if (OnClearAsync != null)
-        {
-            await OnClearAsync();
-        }
-        CurrentValue = default;
-        _displayText = null;
-        _filterItems = null;
-        _searchText = null;
-
-        if (OnQueryAsync != null)
-        {
-            await _virtualizeElement.RefreshDataAsync();
-        }
-    }
-
     /// <summary>
     /// Callback method when a candidate item is clicked.
     /// </summary>
@@ -269,6 +230,18 @@ private async ValueTask<ItemsProviderResult<TValue>> LoadItems(ItemsProviderRequ
     [JSInvokable]
     public async Task TriggerFilter(string val)
     {
+        if (string.IsNullOrEmpty(val))
+        {
+            CurrentValue = default;
+            _filterItems = null;
+            _displayText = null;
+
+            if (OnClearAsync != null)
+            {
+                await OnClearAsync();
+            }
+        }
+
         if (OnQueryAsync != null)
         {
             _searchText = val;

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/AutoFillTest.cs

@@ -425,10 +425,9 @@ public async Task IsVirtualize_OnQueryAsync_Clearable_Ok()
         Assert.Equal("2", searchText);
         Assert.Contains("<div>test2</div>", cut.Markup);
 
+        // 测试 Clear 清空逻辑
         query = false;
-        // 点击 Clear 按钮
-        var button = cut.Find(".clear-icon");
-        await cut.InvokeAsync(() => button.Click());
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter(""));
 
         Assert.True(query);
         Assert.True(cleared);
@@ -445,7 +444,7 @@ public async Task IsVirtualize_OnQueryAsync_Clearable_Ok()
                 });
             });
         });
-        await cut.InvokeAsync(() => button.Click());
+        await cut.InvokeAsync(() => cut.Instance.TriggerFilter(""));
     }
 
     [Fact]

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]