feat(Search): add ShowSearchButton parameter (#5243)

* doc: 增加异常捕获

* feat: add ShowSearchButton parameter

* style: 增加样式

* feat: 增加 ShowPrefixIcon 参数

* style: 更新样式

* feat: 增加 PrefixIcon 参数

* doc: 更新示例

* style: 更新样式

* doc: 更新示例

* doc: 更新示例

* doc: 增加文档说明

* test: 增加单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/CultureChooser.razor.cs

@@ -56,18 +56,22 @@ private async Task SetCulture(SelectedItem item)
                 var uri = new Uri(NavigationManager.Uri).GetComponents(UriComponents.PathAndQuery, UriFormat.SafeUnescaped);
                 var query = $"?culture={Uri.EscapeDataString(culture)}&redirectUri={Uri.EscapeDataString(uri)}";
 
-                // use a path that matches your culture redirect controller from the previous steps
-                NavigationManager.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);
+                try
+                {
+                    // use a path that matches your culture redirect controller from the previous steps
+                    NavigationManager.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);
+                }
+                catch { }
             }
-        }
-        else
-        {
-            if (SelectedCulture != item.Value)
+            else
             {
-                var culture = item.Value;
-                await JSRuntime.InvokeVoidAsync("bbCulture.set", culture);
+                if (SelectedCulture != item.Value)
+                {
+                    var culture = item.Value;
+                    await JSRuntime.InvokeVoidAsync("bbCulture.set", culture);
 
-                NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
+                    NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
+                }
             }
         }
     }

src/BootstrapBlazor.Server/Components/Samples/Searches.razor

@@ -14,8 +14,8 @@
     <Search IsAutoFocus="true"
             PlaceHolder="@Localizer["SearchesPlaceHolder"]"
             OnSearch="@OnSearch"
-            IsSelectAllTextOnFocus="true" />
-    <ConsoleLogger @ref="Logger" />
+            IsSelectAllTextOnFocus="true"></Search>
+    <ConsoleLogger @ref="Logger"></ConsoleLogger>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["SearchesDisplayButtonTitle"]"
@@ -25,7 +25,7 @@
             ShowClearButton="true"
             OnSearch="@OnDisplaySearch"
             OnClear="@OnClear"></Search>
-    <ConsoleLogger @ref="DisplayLogger" />
+    <ConsoleLogger @ref="DisplayLogger"></ConsoleLogger>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["SearchesItemTemplateTitle"]"
@@ -56,16 +56,43 @@
            Name="keyboards">
     <Search PlaceHolder="@Localizer["SearchesPlaceHolder"]"
             IsTriggerSearchByInput="false"
-            OnSearch="@OnKeyboardSearch" />
-    <ConsoleLogger @ref="KeyboardLogger" />
+            OnSearch="@OnKeyboardSearch"></Search>
+    <ConsoleLogger @ref="KeyboardLogger"></ConsoleLogger>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["SearchesValidateFormTitle"]"
            Introduction="@Localizer["SearchesValidateFormIntro"]"
            Name="ValidateForm">
     <ValidateForm Model="@Model">
-        <Search @bind-Value="Model.Name" OnSearch="@OnModelSearch" />
+        <Search @bind-Value="Model.Name" OnSearch="@OnModelSearch"></Search>
     </ValidateForm>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["SearchesShowPrefixIconTitle"]"
+           Introduction="@Localizer["SearchesShowPrefixIconIntro"]"
+           Name="ShowPrefixIcon">
+    <section ignore>@((MarkupString)Localizer["SearchesShowPrefixIconDescription"].Value)</section>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <Search PlaceHolder="@Localizer["SearchesPlaceHolder"]"
+                    OnSearch="@OnModelSearch"
+                    ShowClearButton="false" ShowSearchButton="false"
+                    ShowPrefixIcon="true" PrefixIcon="fa fa-flag"></Search>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Search PlaceHolder="@Localizer["SearchesPlaceHolder"]"
+                    OnSearch="@OnModelSearch"
+                    ShowClearButton="false" ShowSearchButton="false"
+                    ShowPrefixIcon="true">
+                <PrefixIconTemplate>
+                    <div class="search-custom-prefix">
+                        <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 16V42" stroke="#d0021b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 29V42" stroke="#d0021b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 19V6" stroke="#d0021b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M37 6V32" stroke="#d0021b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 16C13.7614 16 16 13.7614 16 11C16 8.23858 13.7614 6 11 6C8.23858 6 6 8.23858 6 11C6 13.7614 8.23858 16 11 16Z" fill="none" stroke="#d0021b" stroke-width="3" stroke-linejoin="round"/><path d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z" fill="none" stroke="#d0021b" stroke-width="3" stroke-linejoin="round"/><path d="M37 42C39.7614 42 42 39.7614 42 37C42 34.2386 39.7614 32 37 32C34.2386 32 32 34.2386 32 37C32 39.7614 34.2386 42 37 42Z" fill="none" stroke="#d0021b" stroke-width="3" stroke-linejoin="round"/></svg>
+                    </div>
+                </PrefixIconTemplate>
+            </Search>
+        </div>
+    </div>
+
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Server/Components/Samples/Searches.razor.css

@@ -29,3 +29,8 @@
     font-size: 86%;
     color: #c0c4cc;
 }
+
+.search-custom-prefix {
+    display: flex;
+    margin-left: -2px;
+}

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4220,7 +4220,10 @@
     "SearchesOnSearch": "Call back this delegate when you click Search",
     "SearchesOnClear": "Click Recall this order when emptying",
     "SearchesItemTemplateTitle": "Item Template",
-    "SearchesItemTemplateIntro": "By setting <code>ItemTemplate</code> and matching generic data, you can achieve any desired effect. In this example, by searching for any keyword, the backend calls any third-party search results and displays them. After selecting the search item, you can handle it yourself through the <code>OnSelectedItemChanged</code> callback method"
+    "SearchesItemTemplateIntro": "By setting <code>ItemTemplate</code> and matching generic data, you can achieve any desired effect. In this example, by searching for any keyword, the backend calls any third-party search results and displays them. After selecting the search item, you can handle it yourself through the <code>OnSelectedItemChanged</code> callback method",
+    "SearchesShowPrefixIconTitle": "ShowPrefixIcon",
+    "SearchesShowPrefixIconIntro": "Control whether to show the prefix icon by setting the <code>ShowPrefixIcon</code> parameter",
+    "SearchesShowPrefixIconDescription": "You can customize the prefix through <code>PrefixIconTemplate</code>. In this example, the <code>Svg</code> icon is used through the prefix template."
   },
   "BootstrapBlazor.Server.Components.Samples.Titles": {
     "Title": "Title",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4220,7 +4220,10 @@
     "SearchesOnSearch": "点击搜索时回调此委托",
     "SearchesOnClear": "点击清空时回调此委托",
     "SearchesItemTemplateTitle": "模板",
-    "SearchesItemTemplateIntro": "通过设置 <code>ItemTemplate</code> 配合泛型数据可以做出自己想要的任何效果，本例中通过搜索任意关键字，后台调用任意第三方搜索结果并且进行展示，选中搜索项后通过 <code>OnSelectedItemChanged</code> 回调方法可以自行处理"
+    "SearchesItemTemplateIntro": "通过设置 <code>ItemTemplate</code> 配合泛型数据可以做出自己想要的任何效果，本例中通过搜索任意关键字，后台调用任意第三方搜索结果并且进行展示，选中搜索项后通过 <code>OnSelectedItemChanged</code> 回调方法可以自行处理",
+    "SearchesShowPrefixIconTitle": "显示前缀图标",
+    "SearchesShowPrefixIconIntro": "通过设置 <code>ShowPrefixIcon</code> 参数控制是否显示前缀图标",
+    "SearchesShowPrefixIconDescription": "可以通过 <code>PrefixIconTemplate</code> 自定义前缀，本例中通过前缀模板使用 <code>Svg</code> 图标"
   },
   "BootstrapBlazor.Server.Components.Samples.Titles": {
     "Title": "Title 网站标题",

src/BootstrapBlazor/Components/Search/Search.razor

@@ -17,8 +17,24 @@
         {
             <Button Color="ClearButtonColor" Text="@ClearButtonText" Icon="@ClearButtonIcon" OnClick="OnClearClick" aria-label="Clear"></Button>
         }
-        <Button Color="SearchButtonColor" Text="@SearchButtonText" Icon="@ButtonIcon" OnClick="OnSearchClick" aria-label="Search"></Button>
+        @if (ShowSearchButton)
+        {
+            <Button Color="SearchButtonColor" Text="@SearchButtonText" Icon="@ButtonIcon" OnClick="OnSearchClick" aria-label="Search"></Button>
+        }
     </div>
+    @if (ShowPrefixIcon)
+    {
+        <div class="search-prefix-icon">
+            @if (PrefixIconTemplate != null)
+            {
+                @PrefixIconTemplate
+            }
+            else
+            {
+                <i class="@PrefixIcon"></i>
+            }
+        </div>
+    }
     <ul class="dropdown-menu">
         @foreach (var item in _filterItems)
         {

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

@@ -36,6 +36,12 @@ public partial class Search<TValue>
     [Parameter]
     public Color ClearButtonColor { get; set; } = Color.Primary;
 
+    /// <summary>
+    /// 获得/设置 是否显示搜索按钮 默认为 true 显示
+    /// </summary>
+    [Parameter]
+    public bool ShowSearchButton { get; set; } = true;
+
     /// <summary>
     /// 获得/设置 搜索按钮颜色
     /// </summary>
@@ -61,6 +67,24 @@ public partial class Search<TValue>
     [NotNull]
     public string? SearchButtonText { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示前缀图标 默认为 false 不显示
+    /// </summary>
+    [Parameter]
+    public bool ShowPrefixIcon { get; set; }
+
+    /// <summary>
+    /// 获得/设置 前缀图标 默认为 null
+    /// </summary>
+    [Parameter]
+    public string? PrefixIcon { get; set; }
+
+    /// <summary>
+    /// 获得/设置 前缀图标模板 默认为 null
+    /// </summary>
+    [Parameter]
+    public RenderFragment? PrefixIconTemplate { get; set; }
+
     /// <summary>
     /// 获得/设置 点击搜索后是否自动清空搜索框
     /// </summary>
@@ -99,6 +123,7 @@ public partial class Search<TValue>
     private IStringLocalizer<Search<TValue>>? Localizer { get; set; }
 
     private string? ClassString => CssBuilder.Default("search auto-complete")
+        .AddClass("search-prefix", ShowPrefixIcon)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
@@ -125,6 +150,8 @@ protected override void OnParametersSet()
         ClearButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchClearButtonIcon);
         SearchButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchButtonIcon);
         SearchButtonLoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchButtonLoadingIcon);
+        PrefixIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchButtonIcon);
+
         SearchButtonText ??= Localizer[nameof(SearchButtonText)];
         ButtonIcon ??= SearchButtonIcon;
         NoDataTip ??= Localizer[nameof(NoDataTip)];

src/BootstrapBlazor/Components/Search/Search.razor.scss

@@ -0,0 +1,21 @@
+.search.auto-complete {
+    --bb-ac-padding-right: #{$bb-search-padding-right};
+    --bb-search-prefix-input-padding-left: #{$bb-search-prefix-input-padding-left};
+    --bb-search-prefix-icon-color: #{$bb-search-prefix-icon-color};
+
+    &.search-prefix .form-control {
+        padding-left: var(--bb-search-prefix-input-padding-left);
+    }
+
+    .search-prefix-icon {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 6;
+        padding-left: 1rem;
+        display: flex;
+        align-items: center;
+        color: var(--bb-search-prefix-icon-color);
+    }
+}

src/BootstrapBlazor/wwwroot/scss/components.scss

@@ -77,6 +77,7 @@
 @import "../../Components/RibbonTab/RibbonTab.razor.scss";
 @import "../../Components/Row/Row.razor.scss";
 @import "../../Components/Scroll/Scroll.razor.scss";
+@import "../../Components/Search/Search.razor.scss";
 @import "../../Components/Select/MultiSelect.razor.scss";
 @import "../../Components/Select/Select.razor.scss";
 @import "../../Components/Select/SelectObject.razor.scss";

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -482,6 +482,12 @@ $bb-scroll-thumb-hover-bg: rgba(var(--bs-emphasis-color-rgb),0.3);
 $bb-scroll-thumb-active-bg: rgba(var(--bs-emphasis-color-rgb),0.5);
 $bb-scroll-track-bg: rgba(var(--bs-emphasis-color-rgb),0.08);
 
+// Search
+$bb-search-padding-right: 0.75rem;
+$bb-search-prefix-icon-padding-left: 2rem;
+$bb-search-prefix-input-padding-left: 36px;
+$bb-search-prefix-icon-color: #59636e;
+
 // Segmented
 $bb-segmented-padding: 2px;
 $bb-segmented-bg: rgba(var(--bs-body-color-rgb),.06);