Skip to content

Commit 08b8d60

Browse files
ArgoZhangArgoZhang
authored
refactor(MultiSelect): support ShowToolbar parameter when set ShowSearch to true (#5655)
* refactor: 增加检查是否显示搜索栏方法 * refactor: 工具栏调整到搜索栏下方 * style: 微调搜索栏工具栏样式 * doc: 更新默认值 * chore: 更新依赖 * chore: bump version 9.5.0-beta03 * doc: 增加参数文档注释 * test: 更新单元测试
1 parent 366c830 commit 08b8d60

File tree

13 files changed

+120
-49
lines changed

13 files changed

+120
-49
lines changed

‎src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<PackageReference Include="BootstrapBlazor.Chart" Version="9.0.0" />
3232
<PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="9.0.0" />
3333
<PackageReference Include="BootstrapBlazor.Dock" Version="9.0.0" />
34-
<PackageReference Include="BootstrapBlazor.DockView" Version="9.1.3" />
34+
<PackageReference Include="BootstrapBlazor.DockView" Version="9.1.5" />
3535
<PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />
3636
<PackageReference Include="BootstrapBlazor.ElementIcon" Version="9.0.3" />
3737
<PackageReference Include="BootstrapBlazor.FileViewer" Version="9.0.0" />

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,12 @@ private enum MultiSelectEnumFoo
319319
<Checkbox @bind-Value="@_isFixedSearch" />
320320
</BootstrapInputGroup>
321321
</div>
322+
<div class="col-12 col-sm-6">
323+
<BootstrapInputGroup>
324+
<BootstrapInputGroupLabel DisplayText="ShowToolbar" />
325+
<Checkbox @bind-Value="@_showToolbar" />
326+
</BootstrapInputGroup>
327+
</div>
322328
<div class="col-12 col-sm-6">
323329
<BootstrapInputGroup>
324330
<BootstrapInputGroupLabel DisplayText="IsClearable" />
@@ -332,7 +338,8 @@ private enum MultiSelectEnumFoo
332338
<div class="row mb-3">
333339
<div class="col-6">
334340
<MultiSelect IsVirtualize="true" @bind-Value="_virtualItemString1" OnQueryAsync="OnQueryAsync"
335-
ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
341+
ShowSearch="_showSearch" ShowToolbar="_showToolbar"
342+
IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
336343
</MultiSelect>
337344
</div>
338345
<div class="col-6">
@@ -344,7 +351,8 @@ private enum MultiSelectEnumFoo
344351
<div class="row">
345352
<div class="col-6">
346353
<MultiSelect IsVirtualize="true" @bind-Value="_virtualItemString2" Items="VirtualItems"
347-
ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
354+
ShowSearch="_showSearch" ShowToolbar="_showToolbar"
355+
IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
348356
</MultiSelect>
349357
</div>
350358
<div class="col-6">

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,10 @@ private enum MultiSelectEnumFoo
121121

122122
private string? _editString;
123123

124-
private bool _isFixedSearch;
125-
private bool _isClearable;
126-
private bool _showSearch;
124+
private bool _isFixedSearch = true;
125+
private bool _isClearable = true;
126+
private bool _showToolbar = true;
127+
private bool _showSearch = true;
127128

128129
private async Task<SelectedItem> OnEditCallback(string value)
129130
{
@@ -373,6 +374,22 @@ private AttributeItem[] GetAttributes() =>
373374
DefaultValue = "true"
374375
},
375376
new()
377+
{
378+
Name = "ShowSearch",
379+
Description = Localizer["MultiSelectsAttribute_ShowSearch"],
380+
Type = "bool",
381+
ValueList = "true|false",
382+
DefaultValue = "false"
383+
},
384+
new()
385+
{
386+
Name = "IsFixedSearch",
387+
Description = Localizer["MultiSelectsAttribute_IsFixedSearch"],
388+
Type = "bool",
389+
ValueList = "true|false",
390+
DefaultValue = "false"
391+
},
392+
new()
376393
{
377394
Name = "ShowToolbar",
378395
Description = Localizer["MultiSelectsAttribute_ShowToolbar"],

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3024,7 +3024,12 @@
30243024
"MultiSelectOptionChangeLog": "Select the collection of items",
30253025
"MultiSelectIsEditableTitle": "Editable",
30263026
"MultiSelectIsEditableIntro": "Make the component editable by setting the <code>IsEditable</code> parameter",
3027-
"MultiSelectIsEditableDescription": "By setting the <code>EditSubmitKey</code> parameter, you can specify whether to submit via <kbd>Enter</kbd> or <kbd>Space</kbd>"
3027+
"MultiSelectIsEditableDescription": "By setting the <code>EditSubmitKey</code> parameter, you can specify whether to submit via <kbd>Enter</kbd> or <kbd>Space</kbd>",
3028+
"MultiSelectVirtualizeTitle": "Virtualize",
3029+
"MultiSelectVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for large data",
3030+
"MultiSelectVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through <code>Items</code> or <code>OnQueryAsync</code> callback methods",
3031+
"MultiSelectsAttribute_ShowSearch": "Whether to display the search box",
3032+
"MultiSelectsAttribute_IsFixedSearch": "Whether fixed the search box"
30283033
},
30293034
"BootstrapBlazor.Server.Components.Samples.Radios": {
30303035
"RadiosTitle": "Radio",
@@ -3193,7 +3198,7 @@
31933198
"SelectsIsEditableIntro": "By setting <code>IsEditable=\"true\"</code> to make the component editable",
31943199
"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.",
31953200
"SelectsVirtualizeTitle": "Virtualize",
3196-
"SelectsVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for larg data",
3201+
"SelectsVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for large data",
31973202
"SelectsVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through <code>Items</code> or <code>OnQueryAsync</code> callback methods",
31983203
"SelectsGenericTitle": "Generic",
31993204
"SelectsGenericIntro": "Data source <code>Items</code> supports generics when using <code>SelectedItem&lt;TValue&gt;</code>",

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

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

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>9.5.0-beta02</Version>
4+
<Version>9.5.0-beta03</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
{
5454
<span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearableIcon"></i></span>
5555
}
56-
<div class="@DropdownMenuClassString">
56+
<div class="@MultipleDropdownMenuClassString">
5757
@if (ShowSearch)
5858
{
5959
<div class="dropdown-menu-search">
@@ -62,6 +62,18 @@
6262
<i class="@SearchLoadingIconString"></i>
6363
</div>
6464
}
65+
@if (ShowToolbar)
66+
{
67+
<div class="toolbar">
68+
@if (ShowDefaultButtons)
69+
{
70+
<DynamicElement TagName="button" type="button" class="btn" OnClick="SelectAll">@SelectAllText</DynamicElement>
71+
<DynamicElement TagName="button" type="button" class="btn" OnClick="InvertSelect">@ReverseSelectText</DynamicElement>
72+
<DynamicElement TagName="button" type="button" class="btn" OnClick="Clear">@ClearText</DynamicElement>
73+
}
74+
@ButtonTemplate
75+
</div>
76+
}
6577
@if (IsVirtualize)
6678
{
6779
<div class="dropdown-menu-body dropdown-virtual">
@@ -85,18 +97,6 @@
8597
else
8698
{
8799
<div class="dropdown-menu-body">
88-
@if (ShowToolbar)
89-
{
90-
<div class="toolbar">
91-
@if (ShowDefaultButtons)
92-
{
93-
<DynamicElement TagName="button" type="button" class="btn" OnClick="SelectAll">@SelectAllText</DynamicElement>
94-
<DynamicElement TagName="button" type="button" class="btn" OnClick="InvertSelect">@ReverseSelectText</DynamicElement>
95-
<DynamicElement TagName="button" type="button" class="btn" OnClick="Clear">@ClearText</DynamicElement>
96-
}
97-
@ButtonTemplate
98-
</div>
99-
}
100100
@foreach (var itemGroup in Rows.GroupBy(i => i.GroupName))
101101
{
102102
if (!string.IsNullOrEmpty(itemGroup.Key))

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ public partial class MultiSelect<TValue>
2020
.AddClass("is-clearable", IsClearable)
2121
.Build();
2222

23+
private string? MultipleDropdownMenuClassString => CssBuilder.Default(DropdownMenuClassString)
24+
.AddClass("is-fixed-toolbar", ShowToolbar)
25+
.Build();
26+
2327
private string? EditSubmitKeyString => EditSubmitKey == EditSubmitKey.Space ? EditSubmitKey.ToDescriptionString() : null;
2428

2529
private string? ToggleClassString => CssBuilder.Default("dropdown-toggle scroll")
@@ -291,6 +295,12 @@ protected override List<SelectedItem> GetRowsByItems()
291295
return items;
292296
}
293297

298+
/// <summary>
299+
/// <inheritdoc/>
300+
/// </summary>
301+
/// <returns></returns>
302+
protected override bool CheckFixedSearch() => ShowToolbar ? true : base.CheckFixedSearch();
303+
294304
/// <summary>
295305
/// 客户端回车回调方法
296306
/// </summary>

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

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -119,24 +119,44 @@
119119
}
120120
}
121121

122-
.dropdown-menu .toolbar {
123-
--bb-multi-select-toolbar-padding: 6px 10px;
124-
--bb-multi-select-toolbar-button-padding: 3px 10px;
125-
padding: var(--bb-multi-select-toolbar-padding);
126-
white-space: nowrap;
127-
128-
.btn {
129-
padding: var(--bb-multi-select-toolbar-button-padding);
130-
border: 1px solid var(--bs-border-color);
131-
transition: border-color .3s linear, color .3s linear;
122+
.dropdown-menu {
123+
&.is-fixed-toolbar {
124+
--bb-dropdown-max-height: 330px;
132125

133-
&:hover {
134-
border: 1px solid var(--bb-border-hover-color);
135-
color: var(--bs-primary);
126+
.dropdown-menu-body {
127+
max-height: calc(var(--bb-dropdown-max-height) - 48px);
128+
overflow: auto;
129+
}
130+
}
131+
132+
&.is-fixed-search.is-fixed-toolbar {
133+
.dropdown-menu-body {
134+
max-height: calc(var(--bb-dropdown-max-height) - 117px);
135+
overflow: auto;
136136
}
137+
}
137138

138-
&:not(:last-child) {
139-
margin-inline-end: .5rem;
139+
.toolbar {
140+
--bb-multi-select-toolbar-padding: 0 16px 8px 16px;
141+
--bb-multi-select-toolbar-button-padding: 3px 10px;
142+
padding: var(--bb-multi-select-toolbar-padding);
143+
white-space: nowrap;
144+
border-block-end: var(--bs-border-width) solid var(--bb-select-search-border-color);
145+
margin-block-end: var(--bb-select-search-margin-bottom);
146+
147+
.btn {
148+
padding: var(--bb-multi-select-toolbar-button-padding);
149+
border: 1px solid var(--bs-border-color);
150+
transition: border-color .3s linear, color .3s linear;
151+
152+
&:hover {
153+
border: 1px solid var(--bb-border-hover-color);
154+
color: var(--bs-primary);
155+
}
156+
157+
&:not(:last-child) {
158+
margin-inline-end: .5rem;
159+
}
140160
}
141161
}
142162
}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,13 @@
209209
}
210210

211211
.dropdown-menu {
212+
&.is-fixed-search {
213+
.dropdown-menu-body {
214+
max-height: calc(var(--bb-dropdown-max-height) - 76px);
215+
overflow: auto;
216+
}
217+
}
218+
212219
.dropdown-menu-search {
213220
padding: var(--bb-select-search-padding);
214221
position: relative;
@@ -240,13 +247,6 @@
240247
top: var(--bb-select-search-icon-top);
241248
color: var(--bb-select-search-icon-color);
242249
}
243-
244-
&.is-fixed-search {
245-
.dropdown-menu-body {
246-
max-height: calc(var(--bb-dropdown-max-height) - 76px);
247-
overflow: auto;
248-
}
249-
}
250250
}
251251

252252
.select:not(.multi-select) .dropdown-toggle {

0 commit comments

Comments
 (0)