diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj index 40bece1f1e9..2983359cc65 100644 --- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj @@ -20,7 +20,7 @@ - + @@ -32,7 +32,7 @@ - + @@ -48,7 +48,7 @@ - + diff --git a/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor new file mode 100644 index 00000000000..173325055cb --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor @@ -0,0 +1,4 @@ +@typeparam TValue + + + diff --git a/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs new file mode 100644 index 00000000000..20e6fdec30a --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs @@ -0,0 +1,35 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Server.Components.Components; + +/// +/// SearchButtonTemplateDemo 示例组件 +/// +public partial class SearchButtonTemplateDemo +{ + /// + /// 获得/设置 实例"/> + /// + [Parameter, EditorRequired, NotNull] + public SearchContext? Context { get; set; } + + [Inject, NotNull] + private ToastService? ToastService { get; set; } + + private async Task OnClickSearch() + { + await Context.OnSearchAsync(); + + await ToastService.Information("Search-ButtonTemplate", "Click Search1 Button"); + } + + private async Task OnClickClear() + { + await Context.OnClearAsync(); + + await ToastService.Information("Search-ButtonTemplate", "Click Clear1 Button"); + } +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/AntDesignIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/AntDesignIcons.razor index b11a17257fa..002c74ab763 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Icons/AntDesignIcons.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Icons/AntDesignIcons.razor @@ -23,7 +23,8 @@ 
<link href="_content/BootstrapBlazor.AntDesignIcon/BootstrapBlazor.AntDesignIcon.bundle.scp.css" rel="stylesheet">
- + + 
<AntDesignIcon Category="AntDesignIconCategory.Outlined" Name="github"></AntDesignIcon>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor index 8a5de212020..43f89c4eb7b 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor @@ -92,7 +92,106 @@ + + + +
+

@((MarkupString)Localizer["SearchesIconTemplateDesc"].Value)

+
+
+
+ + + + + +
+
+ + +
+

@((MarkupString)Localizer["SearchesButtonTemplateDesc"].Value)

+

@((MarkupString)Localizer["SearchesButtonTemplateDesc2"].Value)

+ 
[Parameter, EditorRequired, NotNull]
+public SearchContext<TValue>? Context { get; set; }
+
+[Inject, NotNull]
+private ToastService? ToastService { get; set; }
+
+private async Task OnClickSearch()
+{
+    await Context.OnSearchAsync();
+
+    await ToastService.Information("Search-ButtonTemplate", "Click Search1 Button");
+}
+
+private async Task OnClickClear()
+{
+    await Context.OnClearAsync();
+
+    await ToastService.Information("Search-ButtonTemplate", "Click Clear1 Button");
+}
+
+
+
+ + + + + + + + + +
+
+ + + +
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+
+
+ + +
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs index 2b03d5ff0d4..3ca4a984bfe 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs @@ -10,6 +10,9 @@ namespace BootstrapBlazor.Server.Components.Samples; /// public sealed partial class Searches { + [Inject, NotNull] + private ToastService? ToastService { get; set; } + [NotNull] private ConsoleLogger? Logger { get; set; } @@ -78,6 +81,17 @@ private async Task> OnSearchFoo(string searchText) : Enumerable.Range(1, 10).Select(i => LocalizerFoo["Foo.Name", $"{i:d4}"].Value).ToList(); } + private async Task OnClickCamera(SearchContext context) + { + await Task.Delay(10); + + await ToastService.Information("Custom IconTemplate", "Click custom icon"); + } + + private bool _isClearable = true; + private bool _showClearButton = false; + private bool _showSearchButton = false; + /// /// 获得属性方法 /// @@ -93,11 +107,35 @@ private AttributeItem[] GetAttributes() => }, new() { - Name="SearchButtonLoadingIcon", - Description = Localizer["SearchesButtonLoadingIcon"], + Name="IsClearable", + Description = Localizer["SearchesIsClearable"], + Type = "bool", + ValueList = "true|false", + DefaultValue = "false" + }, + new() + { + Name="ClearIcon", + Description = Localizer["SearchesClearIcon"], Type = "string", ValueList = " — ", - DefaultValue = "fa-fw fa-spin fa-solid fa-spinner" + DefaultValue = " — " + }, + new() + { + Name="PrefixButtonTemplate", + Description = Localizer["SearchesPrefixButtonTemplate"], + Type = "RenderFragment", + ValueList = " — ", + DefaultValue = " — " + }, + new() + { + Name="ButtonTemplate", + Description = Localizer["SearchesButtonTemplate"], + Type = "RenderFragment", + ValueList = " — ", + DefaultValue = " — " }, new() { Name = "ClearButtonIcon", diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 3e1db2f5b24..74bc53e1884 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -4226,7 +4226,20 @@ "SearchesItemTemplateIntro": "By setting ItemTemplate 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 OnSelectedItemChanged callback method", "SearchesShowPrefixIconTitle": "ShowPrefixIcon", "SearchesShowPrefixIconIntro": "Control whether to show the prefix icon by setting the ShowPrefixIcon parameter", - "SearchesShowPrefixIconDescription": "You can customize the prefix through PrefixIconTemplate. In this example, the Svg icon is used through the prefix template." + "SearchesShowPrefixIconDescription": "You can customize the prefix through PrefixIconTemplate. In this example, the Svg icon is used through the prefix template.", + "SearchesButtonTemplateTitle": "Button Template", + "SearchesButtonTemplateIntro": "Customize the buttons displayed by the component by setting ButtonTemplate", + "SearchesButtonTemplateDesc": "Customize the buttons displayed in front of the component by setting PrefixButtonTemplate", + "SearchesButtonTemplateDesc2": "In a custom template, you can call the OnClear OnSearch method inside the Search component with the context.", + "SearchesIsClearableTitle": "IsClearable", + "SearchesIsClearableIntro": "Display the clear icon by setting IsClearable=\"true\"", + "SearchesIsClearable": "Whether to display the clear icon", + "SearchesClearIcon": "Clear Icon", + "SearchesPrefixButtonTemplate": "Prefix button template", + "SearchesButtonTemplate": "Button template", + "SearchesIconTemplateTitle": "Icon Template", + "SearchesIconTemplateIntro": "Customize the icon displayed by the component by setting IconTemplate", + "SearchesIconTemplateDesc": "The search component context SearchContext<string> provides the OnClear OnSearch methods within the component" }, "BootstrapBlazor.Server.Components.Samples.Titles": { "Title": "Title", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index c25bf1aedce..2b4d3f0598e 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -4226,7 +4226,20 @@ "SearchesItemTemplateIntro": "通过设置 ItemTemplate 配合泛型数据可以做出自己想要的任何效果，本例中通过搜索任意关键字，后台调用任意第三方搜索结果并且进行展示，选中搜索项后通过 OnSelectedItemChanged 回调方法可以自行处理", "SearchesShowPrefixIconTitle": "显示前缀图标", "SearchesShowPrefixIconIntro": "通过设置 ShowPrefixIcon 参数控制是否显示前缀图标", - "SearchesShowPrefixIconDescription": "可以通过 PrefixIconTemplate 自定义前缀，本例中通过前缀模板使用 Svg 图标" + "SearchesShowPrefixIconDescription": "可以通过 PrefixIconTemplate 自定义前缀，本例中通过前缀模板使用 Svg 图标", + "SearchesButtonTemplateTitle": "按钮模板", + "SearchesButtonTemplateIntro": "通过设置 ButtonTemplate 自定义组件显示的按钮", + "SearchesButtonTemplateDesc": "通过设置 PrefixButtonTemplate 自定义组件前置显示的按钮", + "SearchesButtonTemplateDesc2": "在自定义模板中可以通过关联参数调用 Search 组件内部的 OnClear OnSearch 方法", + "SearchesIsClearableTitle": "IsClearable", + "SearchesIsClearableIntro": "通过设置 IsClearable=\"true\" 显示清空小图标", + "SearchesIsClearable": "是否显示清空小按钮", + "SearchesClearIcon": "清空图标", + "SearchesPrefixButtonTemplate": "前置按钮模板", + "SearchesButtonTemplate": "按钮模板", + "SearchesIconTemplateTitle": "图标模板", + "SearchesIconTemplateIntro": "通过设置 IconTemplate 自定义组件显示的图标", + "SearchesIconTemplateDesc": "搜索组件上下文 SearchContext<string> 提供了组件内部的 OnClear OnSearch 方法" }, "BootstrapBlazor.Server.Components.Samples.Titles": { "Title": "Title 网站标题", diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index dc23b6eb19b..2504a2d7b3c 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@ - 9.3.1-beta06 + 9.3.1-beta07 diff --git a/src/BootstrapBlazor/Components/Search/Search.razor b/src/BootstrapBlazor/Components/Search/Search.razor index 17c7e45bbcd..bfa7c74f82f 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor +++ b/src/BootstrapBlazor/Components/Search/Search.razor @@ -4,15 +4,48 @@
- + @if (PrefixButtonTemplate != null) + { + @PrefixButtonTemplate(_context) + } +
+ @if (ShowPrefixIcon) + { +
+ @if (PrefixIconTemplate != null) + { + @PrefixIconTemplate(_context) + } + else + { + + } +
+ } + + @if (IsClearable) + { +
+ +
+ } + @if (IconTemplate != null) + { + @IconTemplate(_context) + } +
+ @if (ButtonTemplate != null) + { + @ButtonTemplate(_context) + } @if (ShowClearButton) { @@ -22,19 +55,6 @@ }
- @if (ShowPrefixIcon) - { -
- @if (PrefixIconTemplate != null) - { - @PrefixIconTemplate - } - else - { - - } -
- }
    @foreach (var item in _filterItems) { diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.cs b/src/BootstrapBlazor/Components/Search/Search.razor.cs index 3c11514b9a9..062ec8d3ca2 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.cs +++ b/src/BootstrapBlazor/Components/Search/Search.razor.cs @@ -12,6 +12,24 @@ namespace BootstrapBlazor.Components; /// public partial class Search { + /// + /// 获得/设置 图标模板 默认 null 未设置 + /// + [Parameter] + public RenderFragment>? IconTemplate { get; set; } + + /// + /// 获得/设置 是否显示清空小按钮 默认 false + /// + [Parameter] + public bool IsClearable { get; set; } + + /// + /// 获得/设置 清空图标 默认为 null + /// + [Parameter] + public string? ClearIcon { get; set; } + /// /// 获得/设置 是否显示清除按钮 默认为 false 不显示 /// @@ -67,6 +85,18 @@ public partial class Search [NotNull] public string? SearchButtonText { get; set; } + /// + /// 获得/设置 按钮模板 默认 null 未设置 + /// + [Parameter] + public RenderFragment>? ButtonTemplate { get; set; } + + /// + /// 获得/设置 前置按钮模板 默认 null 未设置 + /// + [Parameter] + public RenderFragment>? PrefixButtonTemplate { get; set; } + /// /// 获得/设置 是否显示前缀图标 默认为 false 不显示 /// @@ -83,7 +113,7 @@ public partial class Search /// 获得/设置 前缀图标模板 默认为 null /// [Parameter] - public RenderFragment? PrefixIconTemplate { get; set; } + public RenderFragment>? PrefixIconTemplate { get; set; } /// /// 获得/设置 点击搜索后是否自动清空搜索框 @@ -123,7 +153,6 @@ public partial class Search private IStringLocalizer>? Localizer { get; set; } private string? ClassString => CssBuilder.Default("search auto-complete") - .AddClass("search-prefix", ShowPrefixIcon) .AddClassFromAttributes(AdditionalAttributes) .Build(); @@ -140,6 +169,18 @@ public partial class Search [NotNull] private List? _filterItems = null; + private SearchContext _context = default!; + + /// + /// + /// + protected override void OnInitialized() + { + base.OnInitialized(); + + _context = new SearchContext(this, OnSearchClick, OnClearClick); + } + /// /// /// @@ -147,6 +188,7 @@ 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); diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.scss b/src/BootstrapBlazor/Components/Search/Search.razor.scss index f6259b7d67e..9c66534c7ce 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.scss +++ b/src/BootstrapBlazor/Components/Search/Search.razor.scss @@ -1,21 +1,33 @@ .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; + .form-control-group { display: flex; + justify-content: center; align-items: center; - color: var(--bb-search-prefix-icon-color); + flex-wrap: nowrap; + + .search-prefix-icon { + color: var(--bb-search-prefix-icon-color); + margin-right: 0.5rem; + } + + .search-input { + flex: 1; + width: 1%; + min-width: 0; + border: none; + padding: 0; + } + + .search-icon { + cursor: pointer; + margin-left: 0.5rem; + } + + &:not(:hover) .search-clear-icon { + display: none; + } } } diff --git a/src/BootstrapBlazor/Components/Search/SearchContext.cs b/src/BootstrapBlazor/Components/Search/SearchContext.cs new file mode 100644 index 00000000000..993fc929820 --- /dev/null +++ b/src/BootstrapBlazor/Components/Search/SearchContext.cs @@ -0,0 +1,27 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Components; + +/// +/// 搜索组件上下文类 +/// +public class SearchContext(Search search, Func onSearchAsync, Func onClearAsync) +{ + /// + /// 获得/设置 搜索组件实例 + /// + public Search Search { get; } = search; + + /// + /// 获得/设置 清空按钮回调方法 + /// + public Func OnClearAsync { get; } = onClearAsync; + + /// + /// 获得/设置 搜索按钮回调方法 + /// + public Func OnSearchAsync { get; } = onSearchAsync; +} diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss index f58d40b5bcc..fbfb33dbe0b 100644 --- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss +++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss @@ -484,8 +484,6 @@ $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 diff --git a/test/UnitTest/Components/SearchTest.cs b/test/UnitTest/Components/SearchTest.cs index abb1935d5d1..5d93475bc53 100644 --- a/test/UnitTest/Components/SearchTest.cs +++ b/test/UnitTest/Components/SearchTest.cs @@ -158,7 +158,6 @@ public void ShowPrefixIcon_Ok() { pb.Add(a => a.ShowPrefixIcon, true); }); - cut.Contains("search auto-complete search-prefix"); cut.Contains("
    "); } @@ -169,11 +168,22 @@ public void PrefixIconTemplate_Ok() var cut = Context.RenderComponent>(pb => { pb.Add(a => a.ShowPrefixIcon, true); - pb.Add(a => a.PrefixIconTemplate, b => b.AddContent(0, "test-prefix-icon-template")); + pb.Add(a => a.PrefixIconTemplate, context => b => b.AddContent(0, "test-prefix-icon-template")); }); cut.Contains("
    test-prefix-icon-template
    "); } + [Fact] + public void IconTemplate_Ok() + { + var items = new List() { null, "test1", "test2" }; + var cut = Context.RenderComponent>(pb => + { + pb.Add(a => a.IconTemplate, context => b => b.AddContent(0, "test-icon-template")); + }); + cut.Contains("test-icon-template"); + } + [Fact] public void ShowSearchButton_Ok() { @@ -184,4 +194,40 @@ public void ShowSearchButton_Ok() }); cut.DoesNotContain("aria-label=\"Search\""); } + + [Fact] + public void IsClearable_Ok() + { + var cut = Context.RenderComponent>(pb => + { + pb.Add(a => a.IsClearable, true); + }); + cut.Contains("
    "); + } + + [Fact] + public void ButtonTemplate_Ok() + { + SearchContext? val = null; + var cut = Context.RenderComponent>(pb => + { + pb.Add(a => a.ButtonTemplate, context => builder => + { + val = context; + builder.AddContent(0, "button-template"); + }); + }); + cut.Contains("button-template"); + Assert.NotNull(val); + Assert.NotNull(val.Search); + Assert.Equal(cut.Instance, val.Search); + Assert.NotNull(val.OnSearchAsync); + Assert.NotNull(val.OnClearAsync); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.PrefixButtonTemplate, context => builder => builder.AddContent(0, "prefix-button-template")); + }); + cut.Contains("prefix-button-template"); + } }