refactor(MultiSelect): support ShowToolbar parameter when set ShowSearch to true

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -31,7 +31,7 @@
     <PackageReference Include="BootstrapBlazor.Chart" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="9.0.0" />
-    <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.3" />
+    <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.5" />
     <PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.ElementIcon" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.FileViewer" Version="9.0.0" />

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

@@ -319,6 +319,12 @@ private enum MultiSelectEnumFoo
                     <Checkbox @bind-Value="@_isFixedSearch" />
                 </BootstrapInputGroup>
             </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="ShowToolbar" />
+                    <Checkbox @bind-Value="@_showToolbar" />
+                </BootstrapInputGroup>
+            </div>
             <div class="col-12 col-sm-6">
                 <BootstrapInputGroup>
                     <BootstrapInputGroupLabel DisplayText="IsClearable" />
@@ -332,7 +338,8 @@ private enum MultiSelectEnumFoo
     <div class="row mb-3">
         <div class="col-6">
             <MultiSelect IsVirtualize="true" @bind-Value="_virtualItemString1" OnQueryAsync="OnQueryAsync"
-                         ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
+                         ShowSearch="_showSearch" ShowToolbar="_showToolbar"
+                         IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
             </MultiSelect>
         </div>
         <div class="col-6">
@@ -344,7 +351,8 @@ private enum MultiSelectEnumFoo
     <div class="row">
         <div class="col-6">
             <MultiSelect IsVirtualize="true" @bind-Value="_virtualItemString2" Items="VirtualItems"
-                         ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
+                         ShowSearch="_showSearch" ShowToolbar="_showToolbar"
+                         IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
             </MultiSelect>
         </div>
         <div class="col-6">

src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor.cs

@@ -121,9 +121,10 @@ private enum MultiSelectEnumFoo
 
     private string? _editString;
 
-    private bool _isFixedSearch;
-    private bool _isClearable;
-    private bool _showSearch;
+    private bool _isFixedSearch = true;
+    private bool _isClearable = true;
+    private bool _showToolbar = true;
+    private bool _showSearch = true;
 
     private async Task<SelectedItem> OnEditCallback(string value)
     {
@@ -373,6 +374,22 @@ private AttributeItem[] GetAttributes() =>
             DefaultValue = "true"
         },
         new()
+        {
+            Name = "ShowSearch",
+            Description = Localizer["MultiSelectsAttribute_ShowSearch"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = "IsFixedSearch",
+            Description = Localizer["MultiSelectsAttribute_IsFixedSearch"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
         {
             Name = "ShowToolbar",
             Description = Localizer["MultiSelectsAttribute_ShowToolbar"],

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

@@ -3024,7 +3024,12 @@
     "MultiSelectOptionChangeLog": "Select the collection of items",
     "MultiSelectIsEditableTitle": "Editable",
     "MultiSelectIsEditableIntro": "Make the component editable by setting the <code>IsEditable</code> parameter",
-    "MultiSelectIsEditableDescription": "By setting the <code>EditSubmitKey</code> parameter, you can specify whether to submit via <kbd>Enter</kbd> or <kbd>Space</kbd>"
+    "MultiSelectIsEditableDescription": "By setting the <code>EditSubmitKey</code> parameter, you can specify whether to submit via <kbd>Enter</kbd> or <kbd>Space</kbd>",
+    "MultiSelectVirtualizeTitle": "Virtualize",
+    "MultiSelectVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for large data",
+    "MultiSelectVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through <code>Items</code> or <code>OnQueryAsync</code> callback methods",
+    "MultiSelectsAttribute_ShowSearch": "Whether to display the search box",
+    "MultiSelectsAttribute_IsFixedSearch": "Whether fixed the search box"
   },
   "BootstrapBlazor.Server.Components.Samples.Radios": {
     "RadiosTitle": "Radio",
@@ -3193,7 +3198,7 @@
     "SelectsIsEditableIntro": "By setting <code>IsEditable=\"true\"</code> to make the component editable",
     "SelectsIsEditableDesc": "After the editable function is enabled, if the input value is not in the candidate items, the new value can be returned through the <code>TextConvertToValueCallback</code> callback method, and the <code>Items</code> data source can be updated through the <code>OnInputChangedCallback</code> callback to prevent the input value from being lost after the page is refreshed.",
     "SelectsVirtualizeTitle": "Virtualize",
-    "SelectsVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for larg data",
+    "SelectsVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for large data",
     "SelectsVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through <code>Items</code> or <code>OnQueryAsync</code> callback methods",
     "SelectsGenericTitle": "Generic",
     "SelectsGenericIntro": "Data source <code>Items</code> supports generics when using <code>SelectedItem&lt;TValue&gt;</code>",

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

@@ -3024,7 +3024,12 @@
     "MultiSelectOptionChangeLog": "选中项集合",
     "MultiSelectIsEditableTitle": "可编辑",
     "MultiSelectIsEditableIntro": "通过设置 <code>IsEditable</code> 参数，使组件可编辑",
-    "MultiSelectIsEditableDescription": "通过设置 <code>EditSubmitKey</code> 参数可以指定通过 <kbd>Enter</kbd> 还是 <kbd>Space</kbd> 进行提交"
+    "MultiSelectIsEditableDescription": "通过设置 <code>EditSubmitKey</code> 参数可以指定通过 <kbd>Enter</kbd> 还是 <kbd>Space</kbd> 进行提交",
+    "MultiSelectVirtualizeTitle": "虚拟滚动",
+    "MultiSelectVirtualizeIntro": "通过设置 <code>IsVirtualize</code> 参数开启组件虚拟功能特性",
+    "MultiSelectVirtualizeDescription": "组件虚拟滚动支持两种形式通过 <code>Items</code> 或者 <code>OnQueryAsync</code> 回调方法提供数据",
+    "MultiSelectsAttribute_ShowSearch": "是否显示搜索框",
+    "MultiSelectsAttribute_IsFixedSearch": "是否固定搜索栏"
   },
   "BootstrapBlazor.Server.Components.Samples.Radios": {
     "RadiosTitle": "Radio 单选框",

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/Select/MultiSelect.razor

@@ -53,7 +53,7 @@
     {
         <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearableIcon"></i></span>
     }
-    <div class="@DropdownMenuClassString">
+    <div class="@MultipleDropdownMenuClassString">
         @if (ShowSearch)
         {
             <div class="dropdown-menu-search">
@@ -62,6 +62,18 @@
                 <i class="@SearchLoadingIconString"></i>
             </div>
         }
+        @if (ShowToolbar)
+        {
+            <div class="toolbar">
+                @if (ShowDefaultButtons)
+                {
+                    <DynamicElement TagName="button" type="button" class="btn" OnClick="SelectAll">@SelectAllText</DynamicElement>
+                    <DynamicElement TagName="button" type="button" class="btn" OnClick="InvertSelect">@ReverseSelectText</DynamicElement>
+                    <DynamicElement TagName="button" type="button" class="btn" OnClick="Clear">@ClearText</DynamicElement>
+                }
+                @ButtonTemplate
+            </div>
+        }
         @if (IsVirtualize)
         {
             <div class="dropdown-menu-body dropdown-virtual">
@@ -85,18 +97,6 @@
         else
         {
             <div class="dropdown-menu-body">
-                @if (ShowToolbar)
-                {
-                    <div class="toolbar">
-                        @if (ShowDefaultButtons)
-                        {
-                            <DynamicElement TagName="button" type="button" class="btn" OnClick="SelectAll">@SelectAllText</DynamicElement>
-                            <DynamicElement TagName="button" type="button" class="btn" OnClick="InvertSelect">@ReverseSelectText</DynamicElement>
-                            <DynamicElement TagName="button" type="button" class="btn" OnClick="Clear">@ClearText</DynamicElement>
-                        }
-                        @ButtonTemplate
-                    </div>
-                }
                 @foreach (var itemGroup in Rows.GroupBy(i => i.GroupName))
                 {
                     if (!string.IsNullOrEmpty(itemGroup.Key))

src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs

@@ -20,6 +20,10 @@ public partial class MultiSelect<TValue>
         .AddClass("is-clearable", IsClearable)
         .Build();
 
+    private string? MultipleDropdownMenuClassString => CssBuilder.Default(DropdownMenuClassString)
+        .AddClass("is-fixed-toolbar", ShowToolbar)
+        .Build();
+
     private string? EditSubmitKeyString => EditSubmitKey == EditSubmitKey.Space ? EditSubmitKey.ToDescriptionString() : null;
 
     private string? ToggleClassString => CssBuilder.Default("dropdown-toggle scroll")
@@ -291,6 +295,12 @@ protected override List<SelectedItem> GetRowsByItems()
         return items;
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override bool CheckFixedSearch() => ShowToolbar ? true : base.CheckFixedSearch();
+
     /// <summary>
     /// 客户端回车回调方法
     /// </summary>

src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss

@@ -119,24 +119,44 @@
     }
 }
 
-.dropdown-menu .toolbar {
-    --bb-multi-select-toolbar-padding: 6px 10px;
-    --bb-multi-select-toolbar-button-padding: 3px 10px;
-    padding: var(--bb-multi-select-toolbar-padding);
-    white-space: nowrap;
-
-    .btn {
-        padding: var(--bb-multi-select-toolbar-button-padding);
-        border: 1px solid var(--bs-border-color);
-        transition: border-color .3s linear, color .3s linear;
+.dropdown-menu {
+    &.is-fixed-toolbar {
+        --bb-dropdown-max-height: 330px;
 
-        &:hover {
-            border: 1px solid var(--bb-border-hover-color);
-            color: var(--bs-primary);
+        .dropdown-menu-body {
+            max-height: calc(var(--bb-dropdown-max-height) - 48px);
+            overflow: auto;
+        }
+    }
+
+    &.is-fixed-search.is-fixed-toolbar {
+        .dropdown-menu-body {
+            max-height: calc(var(--bb-dropdown-max-height) - 117px);
+            overflow: auto;
         }
+    }
 
-        &:not(:last-child) {
-            margin-inline-end: .5rem;
+    .toolbar {
+        --bb-multi-select-toolbar-padding: 0 16px 8px 16px;
+        --bb-multi-select-toolbar-button-padding: 3px 10px;
+        padding: var(--bb-multi-select-toolbar-padding);
+        white-space: nowrap;
+        border-block-end: var(--bs-border-width) solid var(--bb-select-search-border-color);
+        margin-block-end: var(--bb-select-search-margin-bottom);
+
+        .btn {
+            padding: var(--bb-multi-select-toolbar-button-padding);
+            border: 1px solid var(--bs-border-color);
+            transition: border-color .3s linear, color .3s linear;
+
+            &:hover {
+                border: 1px solid var(--bb-border-hover-color);
+                color: var(--bs-primary);
+            }
+
+            &:not(:last-child) {
+                margin-inline-end: .5rem;
+            }
         }
     }
 }

src/BootstrapBlazor/Components/Select/Select.razor.scss

@@ -209,6 +209,13 @@
 }
 
 .dropdown-menu {
+    &.is-fixed-search {
+        .dropdown-menu-body {
+            max-height: calc(var(--bb-dropdown-max-height) - 76px);
+            overflow: auto;
+        }
+    }
+
     .dropdown-menu-search {
         padding: var(--bb-select-search-padding);
         position: relative;
@@ -240,13 +247,6 @@
         top: var(--bb-select-search-icon-top);
         color: var(--bb-select-search-icon-color);
     }
-
-    &.is-fixed-search {
-        .dropdown-menu-body {
-            max-height: calc(var(--bb-dropdown-max-height) - 76px);
-            overflow: auto;
-        }
-    }
 }
 
 .select:not(.multi-select) .dropdown-toggle {

src/BootstrapBlazor/Components/Select/SelectBase.cs

@@ -172,7 +172,7 @@ public abstract class SelectBase<TValue> : PopoverSelectBase<TValue>
     /// Gets the dropdown menu class string.
     /// </summary>
     protected string? DropdownMenuClassString => CssBuilder.Default("dropdown-menu")
-        .AddClass("is-fixed-search", ShowSearch && IsFixedSearch)
+        .AddClass("is-fixed-search", CheckFixedSearch())
         .Build();
 
     /// <summary>
@@ -243,4 +243,10 @@ protected virtual async Task OnClearValue()
         }
         CurrentValue = default;
     }
+
+    /// <summary>
+    /// Gets whether to show the search box.
+    /// </summary>
+    /// <returns></returns>
+    protected virtual bool CheckFixedSearch() => ShowSearch && IsFixedSearch;
 }

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

@@ -514,7 +514,7 @@ $bb-dropdown-link-pre-active-bg: #498ff7;
 $bb-select-focus-shadow: none;
 $bb-select-padding-right: 2.25rem;
 $bb-select-padding: 6px 0.75rem;
-$bb-select-search-padding: 7px 10px;
+$bb-select-search-padding: .5rem 1rem;
 $bb-select-search-margin-bottom: .5rem;
 $bb-select-search-border-color: var(--bs-border-color);
 $bb-select-search-padding-right: 30px;