Skip to content

Commit 13ee4a9

Browse files
Tony-ST0754ArgoZhang
Tony-ST0754
and
ArgoZhang
authored
feat(SelectTable): add IsMultipleSelect parameter (#7629)
* feat: 增加选项关闭按钮逻辑 * feat(SelectTable): add IsMultipleSelect parameter * style: 增加样式 * feat: 增加双向绑定支持 * doc: 更新注释 * refactor: 增加最大高度参数 * refactor: 增加右侧间隙变量 * feat: 增加冗余显示 * doc: 更新示例 * refactor: 增加 GetDisplayItems 方法 * doc: 更新示例 * doc: 更新资源文件 * test: 更新单元测试 * feat: 增加禁用功能 * chore: bump version 10.3.2-beta01 * revert: 撤销更改 * doc: 更新资源文件 * doc: 更新资源文件 * doc: 资源文件键值排序 * doc: 增加参数说明 * feat: 增加 MultiSelectedItemsMaxDisplayCountColor 参数 * doc: 更新示例 * test: 增加单元测试 --------- Co-authored-by: Argo Zhang <argo@live.ca>
1 parent 3828963 commit 13ee4a9

File tree

12 files changed

+398
-20
lines changed

12 files changed

+398
-20
lines changed

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

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
<section ignore>
1010
@((MarkupString)Localizer["NormalDesc"].Value)
1111
</section>
12-
<SelectTable TItem="Foo" @bind-Value="@_foo" OnQueryAsync="OnQueryAsync" GetTextCallback="@GetTextCallback" TableMinWidth="300" IsClearable>
12+
<SelectTable TItem="Foo" @bind-Value="@_foo" OnQueryAsync="OnQueryAsync"
13+
GetTextCallback="@GetTextCallback" TableMinWidth="300"
14+
IsClearable>
1315
<TableColumns>
1416
<TableColumn @bind-Field="@context.Name"></TableColumn>
1517
<TableColumn @bind-Field="@context.Address"></TableColumn>
@@ -46,7 +48,7 @@
4648
<div class="select-custom-header">
4749
<div class="id">@context.Id</div>
4850
<div class="name">@context.Name</div>
49-
<Light Color="@(context.Complete ? Color.Success : Color.Warning)"></Light>
51+
<Light Color="@(context.Complete? Color.Success: Color.Warning)"></Light>
5052
</div>
5153
<Divider />
5254
<div class="select-custom-body">
@@ -112,4 +114,32 @@
112114
</div>
113115
</DemoBlock>
114116

117+
<DemoBlock Title="@Localizer["IsMultipleSelectTitle"]" Introduction="@Localizer["IsMultipleSelectIntro"]" Name="IsMultipleSelect">
118+
<section ignore>
119+
<ul class="ul-demo">
120+
<li>@((MarkupString)Localizer["IsMultipleDesc1"].Value)</li>
121+
<li>@((MarkupString)Localizer["IsMultipleDesc2"].Value)</li>
122+
<li>@((MarkupString)Localizer["IsMultipleDesc3"].Value)</li>
123+
<li>@((MarkupString)Localizer["IsMultipleDesc4"].Value)</li>
124+
<li>@((MarkupString)Localizer["IsMultipleDesc5"].Value)</li>
125+
</ul>
126+
</section>
127+
<SelectTable TItem="Foo" @bind-SelectedItems="@_selectedFoos" OnQueryAsync="OnQueryAsync"
128+
GetTextCallback="@GetTextCallback" TableMinWidth="300"
129+
IsMultipleSelect IsClearable MultiSelectedItemsMaxDisplayCountColor="Color.Warning">
130+
<TableColumns>
131+
<TableColumn @bind-Field="@context.Name"></TableColumn>
132+
<TableColumn @bind-Field="@context.Address"></TableColumn>
133+
</TableColumns>
134+
</SelectTable>
135+
<section ignore>
136+
<div class="select-table-list">
137+
@foreach (var item in _selectedFoos)
138+
{
139+
<div>@item.Name</div>
140+
}
141+
</div>
142+
</section>
143+
</DemoBlock>
144+
115145
<AttributeTable Type="typeof(SelectTable<>)" />

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ public partial class SelectTables
3434

3535
private readonly SelectTableMode Model = new();
3636

37+
private List<Foo> _selectedFoos = [];
38+
3739
private static string? GetTextCallback(Foo foo) => foo.Name;
3840

3941
private List<Foo> _items = default!;

‎src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
::deep .divider {
1+
::deep .divider {
22
--bb-divider-margin: 1rem 0;
33
--bb-divider-bg: #c0c4cc;
44
}
@@ -54,3 +54,11 @@
5454
::deep .select-custom-detail > div {
5555
margin-bottom: .5rem;
5656
}
57+
58+
.select-table-list {
59+
display: flex;
60+
flex-wrap: wrap;
61+
gap: 5px;
62+
overflow: auto;
63+
max-height: 120px;
64+
}

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2053,7 +2053,7 @@
20532053
"DropdownCascadeItem6": "Haidian",
20542054
"DropdownCascadeItem7": "Jingan",
20552055
"DropdownCascadeItem8": "Huangpu",
2056-
"DropdownItemsTemplateIntro": "You can customize all the content of the dropdown list by setting `<itemsTemplate>`. In this example, we use the `<DropdownItem>` component and `<DropdownDivider>` component to customize the dropdown list component.",
2056+
"DropdownItemsTemplateIntro": "You can customize all the content of the dropdown list by setting <code>ItemsTemplate</code>. In this example, we use the <code>DropdownItem</code> component and <code>DropdownDivider</code> component to customize the dropdown list component.",
20572057
"DropdownItemsTemplateTitle": "Items Template",
20582058
"DropdownItemTemplateIntro": "By setting <code>ItemTemplate</code>, you can customize the content displayed in the drop-down item. In this example, the <code>Tooltip</code> component is used to add a tooltip function when the mouse is hovered.",
20592059
"DropdownItemTemplateTitle": "Item Template",
@@ -2766,13 +2766,13 @@
27662766
"LabelsNormalDescription": "When two-way binding is not used",
27672767
"LabelsNormalDescription2": "When using two-way binding",
27682768
"LabelsNormalGroupBox1Tips1": "No settings in the first text box, no label",
2769-
"LabelsNormalGroupBox1Tips2": "The second text box setting <code>ShowLabel='true' DisplayText=``</code> displays a placeholder label without content",
2769+
"LabelsNormalGroupBox1Tips2": "The second text box setting <code>ShowLabel='true' DisplayText=''</code> displays a placeholder label without content",
27702770
"LabelsNormalGroupBox1Tips3": "The third text box setting <code>ShowLabel='true' DisplayText='Name'</code> shows the set content label",
27712771
"LabelsNormalGroupBox1Tips4": "The fourth text box setting <code>ShowLabel='true' DisplayText='@null'</code> displays a placeholder label without content",
27722772
"LabelsNormalGroupBox1Title": "No two-way binding",
27732773
"LabelsNormalGroupBox2Tips1": "The first text box is set to <code>@bind-Value='Dummy.Name'</code>, no label is displayed",
27742774
"LabelsNormalGroupBox2Tips2": "The second text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@Localizer[nameof(Foo.Address)]'</code> Display the contents of the setting",
2775-
"LabelsNormalGroupBox2Tips3": "The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=``</code> Show no content placeholder label",
2775+
"LabelsNormalGroupBox2Tips3": "The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=''</code> Show no content placeholder label",
27762776
"LabelsNormalGroupBox2Tips4": "The fourth text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@null'</code> Display the label content under the resource file mechanism<code>Label</code> code>",
27772777
"LabelsNormalGroupBox2Title": "Two-way binding",
27782778
"LabelsNormalIntro": "Suitable for data entry",
@@ -3937,6 +3937,13 @@
39373937
"Intro": "The dropdown box is a table used to display the selection requirements for complex types",
39383938
"IsDisabledIntro": "When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses select",
39393939
"IsDisabledTitle": "Disabled",
3940+
"IsMultipleDesc1": "Set the maximum width of the selected item using the <code>MultiSelectedItemMaxWidth</code> parameter.",
3941+
"IsMultipleDesc2": "Set the maximum row height of the component using the <code>MultiSelectedItemsMaxHeight</code> parameter.",
3942+
"IsMultipleDesc3": "The <code>MultiSelectedItemsMaxDisplayCount</code> parameter sets the total number of selected items to be displayed. To customize the color, please set the variable <code>--bb-select-table-item-count-bg-color</code> in your <code>CSS</code>.",
3943+
"IsMultipleDesc4": "The <code>MultiSelectedItemsMaxDisplayCountColor</code> parameter sets the color of total number of selected items to be displayed.",
3944+
"IsMultipleDesc5": "Set the selected item set using the <code>@bind-SelectedItems=\"SelectedItems\"</code> parameter. Do not use <code>Value</code> in multi-select mode.",
3945+
"IsMultipleSelectIntro": "Enable multi-selection using the parameter <code>IsMultipleSelect=\"true\"</code>.",
3946+
"IsMultipleSelectTitle": "Multiple Select",
39403947
"NormalDesc": "You can use <code>IsClearable</code> to control whether to display the clear button. The default value is <code>false</code>",
39413948
"NormalIntro": "Suitable for candidates with a relatively large amount of information, presenting information using <code>Table</code>",
39423949
"NormalTitle": "Basic usage",
@@ -4121,7 +4128,7 @@
41214128
"SpeechDescription2": "When using this component, you need to reference its component package",
41224129
"SpeechGroupBoxHeaderText": "command panel",
41234130
"SpeechGroupBoxTitle": "Command output area",
4124-
"SpeechLi1": "Click <b>start</b> After pressing the button, speak to the computer <b><i>'Please turn on the light for me'</i></b>",
4131+
"SpeechLi1": "Click <b>start</b> After pressing the button, speak to the computer <b><i>Please turn on the light for me</i></b>",
41254132
"SpeechLi2": "After the computer receives the command, it will ask <b><i>Are you sure you want to turn on the light? Please confirm!</i></b>",
41264133
"SpeechLi3": "You speak to the computer： <b><i>confirm</i></b>",
41274134
"SpeechLi4": "The computer executes the command and enters it in the text box below <b><i>has been opened for you</i></b> text",
@@ -5670,7 +5677,7 @@
56705677
"BootstrapBlazor.Server.Components.Samples.UploadCards": {
56715678
"ButtonUploadIntro": "Use <code>DefaultFileList</code> to set up uploaded content",
56725679
"ButtonUploadTitle": "Basic usage",
5673-
"UploadActionButtonTemplateIntro": "Customize the action buttons on the card by setting the `<code>ActionButtonTemplate</code>` parameter (appending it to the end of the default button), and customize the action buttons on the card by setting the `<code>BeforeActionButtonTemplate</code>` parameter (insert it before the default button).",
5680+
"UploadActionButtonTemplateIntro": "Customize the action buttons on the card by setting the <code>ActionButtonTemplate</code> parameter (appending it to the end of the default button), and customize the action buttons on the card by setting the <code>BeforeActionButtonTemplate</code> parameter (insert it before the default button).",
56745681
"UploadActionButtonTemplateTitle": "Custom action button",
56755682
"UploadBase64Intro": "By setting the <code>PrevUrl</code> parameter value of the <code>UploadFile</code> instance, use the image content string in the <code>data:image/xxx;base64,XXXXX</code> format as the preview file path",
56765683
"UploadBase64Title": "Base64 format",

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3937,6 +3937,13 @@
39373937
"Intro": "下拉框为表格用于展示复杂类型的选择需求",
39383938
"IsDisabledIntro": "设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止选择",
39393939
"IsDisabledTitle": "禁用",
3940+
"IsMultipleDesc1": "通过 <code>MultiSelectedItemMaxWidth</code> 参数设置选中项最大宽度",
3941+
"IsMultipleDesc2": "通过 <code>MultiSelectedItemsMaxHeight</code> 参数设置组件最大行高",
3942+
"IsMultipleDesc3": "通过 <code>MultiSelectedItemsMaxDisplayCount</code> 参数设置选中项显示总数量",
3943+
"IsMultipleDesc4": "通过 <code>MultiSelectedItemsMaxDisplayCountColor</code> 参数设置选中项显示总数量标签颜色，如需自定义颜色请设置 <code>css</code> 变量 <code>--bb-select-table-item-count-bg-color</code>",
3944+
"IsMultipleDesc5": "通过 <code>@bind-SelectedItems=\"SelectedItems\"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code>",
3945+
"IsMultipleSelectIntro": "通过 <code>IsMultipleSelect=\"true\"</code> 参数开启多选",
3946+
"IsMultipleSelectTitle": "多选",
39403947
"NormalDesc": "可通过 <code>IsClearable</code> 控制是否显示清除小按钮，默认值 <code>false</code>",
39413948
"NormalIntro": "适用于候选项信息量比较大，用 <code>Table</code> 呈现信息量",
39423949
"NormalTitle": "基本功能",

‎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>10.3.1</Version>
4+
<Version>10.3.2-beta01</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "../../wwwroot/scss/variables" as *;
1+
@use "../../wwwroot/scss/variables" as *;
22

33
.select,
44
.popover-dropdown {
@@ -11,6 +11,7 @@
1111
--bb-select-padding: #{$bb-select-padding};
1212
--bb-select-append-width: #{$bb-select-append-width};
1313
--bb-select-append-color: #{$bb-select-append-color};
14+
--bb-select-append-right: 0;
1415
}
1516

1617
.select:not(.cascade) .dropdown-menu {
@@ -105,7 +106,7 @@
105106
position: absolute;
106107
height: 100%;
107108
width: var(--bb-select-append-width);
108-
right: 0;
109+
right: var(--bb-select-append-right);
109110
top: 0;
110111
color: var(--bb-select-append-color);
111112
pointer-events: none;
@@ -129,7 +130,7 @@
129130
position: absolute;
130131
height: 100%;
131132
width: var(--bb-select-append-width);
132-
right: 0;
133+
right: var(--bb-select-append-right);
133134
top: 0;
134135
color: var(--bb-select-append-color);
135136
align-items: center;

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

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@namespace BootstrapBlazor.Components
1+
@namespace BootstrapBlazor.Components
22
@typeparam TItem
33
@inherits PopoverDropdownBase<TItem>
44
@attribute [BootstrapModuleAutoLoader("Select/SelectTable.razor.js", JSObjectReference = true)]
@@ -7,11 +7,43 @@
77
{
88
<BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
99
}
10-
<div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" data-bb-min-width="@TableMinWidth" class="@ClassName">
11-
<div class="dropdown-toggle" data-bs-toggle="bb.dropdown" data-bs-auto-close="outside" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString" aria-expanded="false">
10+
<div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" data-bb-min-width="@TableMinWidth"
11+
class="@ClassName">
12+
<div class="dropdown-toggle" data-bs-toggle="bb.dropdown" aria-expanded="false"
13+
data-bs-auto-close="outside" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString">
1214
@if (Template == null)
1315
{
14-
<input type="text" id="@InputId" readonly disabled="@Disabled" placeholder="@PlaceHolder" class="@InputClassName" value="@GetText()" />
16+
@if (IsMultipleSelect)
17+
{
18+
<div class="@MultiItemsClassString" id="@InputId" style="@MultiItemsStyleString">
19+
@foreach (var item in GetDisplayItems())
20+
{
21+
<div class="multi-select-item-group">
22+
<span class="multi-select-close" data-bb-index="@GetIndexString(item)">
23+
<i class="@_closeButtonIcon"></i>
24+
</span>
25+
<span class="multi-select-item">@GetText(item)</span>
26+
</div>
27+
}
28+
@if (SelectedItems.Count > MultiSelectedItemsMaxDisplayCount)
29+
{
30+
<div class="@MultiSelectedItemCountClassString">
31+
@GetCountText()
32+
</div>
33+
}
34+
@if (SelectedItems.Count == 0)
35+
{
36+
<div class="multi-select-item-ph">
37+
@PlaceHolder
38+
</div>
39+
}
40+
</div>
41+
}
42+
else
43+
{
44+
<input type="text" id="@InputId" readonly disabled="@Disabled" placeholder="@PlaceHolder"
45+
class="@InputClassName" value="@GetText(Value)" />
46+
}
1547
}
1648
else
1749
{
@@ -47,6 +79,7 @@
4779
CustomerSearchModel="CustomerSearchModel" CustomerSearchTemplate="CustomerSearchTemplate"
4880
IsPagination="IsPagination" PageItemsSource="PageItemsSource" ShowGotoNavigator="false" MaxPageLinkCount="3"
4981
OnClickRowCallback="OnClickRowCallback" OnQueryAsync="OnQueryAsync"
82+
IsMultipleSelect="IsMultipleSelect" @bind-SelectedRows="SelectedItems"
5083
ShowEmpty="ShowEmpty" EmptyTemplate="EmptyTemplate"></Table>
5184
</div>
5285
</RenderTemplate>

0 commit comments

Comments
 (0)