feat(SelectTable): add IsMultipleSelect parameter

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

@@ -9,7 +9,9 @@
     <section ignore>
         @((MarkupString)Localizer["NormalDesc"].Value)
     </section>
-    <SelectTable TItem="Foo" @bind-Value="@_foo" OnQueryAsync="OnQueryAsync" GetTextCallback="@GetTextCallback" TableMinWidth="300" IsClearable>
+    <SelectTable TItem="Foo" @bind-Value="@_foo" OnQueryAsync="OnQueryAsync"
+                 GetTextCallback="@GetTextCallback" TableMinWidth="300"
+                 IsClearable>
         <TableColumns>
             <TableColumn @bind-Field="@context.Name"></TableColumn>
             <TableColumn @bind-Field="@context.Address"></TableColumn>
@@ -46,7 +48,7 @@
                 <div class="select-custom-header">
                     <div class="id">@context.Id</div>
                     <div class="name">@context.Name</div>
-                    <Light Color="@(context.Complete ? Color.Success : Color.Warning)"></Light>
+                    <Light Color="@(context.Complete? Color.Success: Color.Warning)"></Light>
                 </div>
                 <Divider />
                 <div class="select-custom-body">
@@ -112,4 +114,32 @@
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["IsMultipleSelectTitle"]" Introduction="@Localizer["IsMultipleSelectIntro"]" Name="IsMultipleSelect">
+    <section ignore>
+        <ul class="ul-demo">
+            <li>@((MarkupString)Localizer["IsMultipleDesc1"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc2"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc3"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc4"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc5"].Value)</li>
+        </ul>
+    </section>
+    <SelectTable TItem="Foo" @bind-SelectedItems="@_selectedFoos" OnQueryAsync="OnQueryAsync"
+                 GetTextCallback="@GetTextCallback" TableMinWidth="300"
+                 IsMultipleSelect IsClearable MultiSelectedItemsMaxDisplayCountColor="Color.Warning">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name"></TableColumn>
+            <TableColumn @bind-Field="@context.Address"></TableColumn>
+        </TableColumns>
+    </SelectTable>
+    <section ignore>
+        <div class="select-table-list">
+            @foreach (var item in _selectedFoos)
+            {
+                <div>@item.Name</div>
+            }
+        </div>
+    </section>
+</DemoBlock>
+
 <AttributeTable Type="typeof(SelectTable<>)" />

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

@@ -34,6 +34,8 @@ public partial class SelectTables
 
     private readonly SelectTableMode Model = new();
 
+    private List<Foo> _selectedFoos = [];
+
     private static string? GetTextCallback(Foo foo) => foo.Name;
 
     private List<Foo> _items = default!;

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

@@ -1,4 +1,4 @@
-::deep .divider {
+::deep .divider {
     --bb-divider-margin: 1rem 0;
     --bb-divider-bg: #c0c4cc;
 }
@@ -54,3 +54,11 @@
     ::deep .select-custom-detail > div {
         margin-bottom: .5rem;
     }
+
+.select-table-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    overflow: auto;
+    max-height: 120px;
+}

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

@@ -2053,7 +2053,7 @@
     "DropdownCascadeItem6": "Haidian",
     "DropdownCascadeItem7": "Jingan",
     "DropdownCascadeItem8": "Huangpu",
-    "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.",
+    "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.",
     "DropdownItemsTemplateTitle": "Items Template",
     "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.",
     "DropdownItemTemplateTitle": "Item Template",
@@ -2766,13 +2766,13 @@
     "LabelsNormalDescription": "When two-way binding is not used",
     "LabelsNormalDescription2": "When using two-way binding",
     "LabelsNormalGroupBox1Tips1": "No settings in the first text box, no label",
-    "LabelsNormalGroupBox1Tips2": "The second text box setting <code>ShowLabel='true' DisplayText=``</code> displays a placeholder label without content",
+    "LabelsNormalGroupBox1Tips2": "The second text box setting <code>ShowLabel='true' DisplayText=''</code> displays a placeholder label without content",
     "LabelsNormalGroupBox1Tips3": "The third text box setting <code>ShowLabel='true' DisplayText='Name'</code> shows the set content label",
     "LabelsNormalGroupBox1Tips4": "The fourth text box setting <code>ShowLabel='true' DisplayText='@null'</code> displays a placeholder label without content",
     "LabelsNormalGroupBox1Title": "No two-way binding",
     "LabelsNormalGroupBox2Tips1": "The first text box is set to <code>@bind-Value='Dummy.Name'</code>, no label is displayed",
     "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",
-    "LabelsNormalGroupBox2Tips3": "The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=``</code> Show no content placeholder label",
+    "LabelsNormalGroupBox2Tips3": "The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=''</code> Show no content placeholder label",
     "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>",
     "LabelsNormalGroupBox2Title": "Two-way binding",
     "LabelsNormalIntro": "Suitable for data entry",
@@ -3937,6 +3937,13 @@
     "Intro": "The dropdown box is a table used to display the selection requirements for complex types",
     "IsDisabledIntro": "When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses select",
     "IsDisabledTitle": "Disabled",
+    "IsMultipleDesc1": "Set the maximum width of the selected item using the <code>MultiSelectedItemMaxWidth</code> parameter.",
+    "IsMultipleDesc2": "Set the maximum row height of the component using the <code>MultiSelectedItemsMaxHeight</code> parameter.",
+    "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>.",
+    "IsMultipleDesc4": "The <code>MultiSelectedItemsMaxDisplayCountColor</code> parameter sets the color of total number of selected items to be displayed.",
+    "IsMultipleDesc5": "Set the selected item set using the <code>@bind-SelectedItems=\"SelectedItems\"</code> parameter. Do not use <code>Value</code> in multi-select mode.",
+    "IsMultipleSelectIntro": "Enable multi-selection using the parameter <code>IsMultipleSelect=\"true\"</code>.",
+    "IsMultipleSelectTitle": "Multiple Select",
     "NormalDesc": "You can use <code>IsClearable</code> to control whether to display the clear button. The default value is <code>false</code>",
     "NormalIntro": "Suitable for candidates with a relatively large amount of information, presenting information using <code>Table</code>",
     "NormalTitle": "Basic usage",
@@ -4121,7 +4128,7 @@
     "SpeechDescription2": "When using this component, you need to reference its component package",
     "SpeechGroupBoxHeaderText": "command panel",
     "SpeechGroupBoxTitle": "Command output area",
-    "SpeechLi1": "Click <b>start</b> After pressing the button, speak to the computer <b><i>'Please turn on the light for me'</i></b>",
+    "SpeechLi1": "Click <b>start</b> After pressing the button, speak to the computer <b><i>Please turn on the light for me</i></b>",
     "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>",
     "SpeechLi3": "You speak to the computer： <b><i>confirm</i></b>",
     "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 @@
   "BootstrapBlazor.Server.Components.Samples.UploadCards": {
     "ButtonUploadIntro": "Use <code>DefaultFileList</code> to set up uploaded content",
     "ButtonUploadTitle": "Basic usage",
-    "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).",
+    "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).",
     "UploadActionButtonTemplateTitle": "Custom action button",
     "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",
     "UploadBase64Title": "Base64 format",

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

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

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.3.1</Version>
+    <Version>10.3.2-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup>

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

@@ -1,4 +1,4 @@
-@use "../../wwwroot/scss/variables" as *;
+@use "../../wwwroot/scss/variables" as *;
 
 .select,
 .popover-dropdown {
@@ -11,6 +11,7 @@
     --bb-select-padding: #{$bb-select-padding};
     --bb-select-append-width: #{$bb-select-append-width};
     --bb-select-append-color: #{$bb-select-append-color};
+    --bb-select-append-right: 0;
 }
 
 .select:not(.cascade) .dropdown-menu {
@@ -105,7 +106,7 @@
     position: absolute;
     height: 100%;
     width: var(--bb-select-append-width);
-    right: 0;
+    right: var(--bb-select-append-right);
     top: 0;
     color: var(--bb-select-append-color);
     pointer-events: none;
@@ -129,7 +130,7 @@
         position: absolute;
         height: 100%;
         width: var(--bb-select-append-width);
-        right: 0;
+        right: var(--bb-select-append-right);
         top: 0;
         color: var(--bb-select-append-color);
         align-items: center;

src/BootstrapBlazor/Components/Select/SelectTable.razor

@@ -1,4 +1,4 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @typeparam TItem
 @inherits PopoverDropdownBase<TItem>
 @attribute [BootstrapModuleAutoLoader("Select/SelectTable.razor.js", JSObjectReference = true)]
@@ -7,11 +7,43 @@
 {
     <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
-<div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" data-bb-min-width="@TableMinWidth" class="@ClassName">
-    <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">
+<div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" data-bb-min-width="@TableMinWidth"
+     class="@ClassName">
+    <div class="dropdown-toggle" data-bs-toggle="bb.dropdown" aria-expanded="false"
+         data-bs-auto-close="outside" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString">
         @if (Template == null)
         {
-            <input type="text" id="@InputId" readonly disabled="@Disabled" placeholder="@PlaceHolder" class="@InputClassName" value="@GetText()" />
+            @if (IsMultipleSelect)
+            {
+                <div class="@MultiItemsClassString" id="@InputId" style="@MultiItemsStyleString">
+                    @foreach (var item in GetDisplayItems())
+                    {
+                        <div class="multi-select-item-group">
+                            <span class="multi-select-close" data-bb-index="@GetIndexString(item)">
+                                <i class="@_closeButtonIcon"></i>
+                            </span>
+                            <span class="multi-select-item">@GetText(item)</span>
+                        </div>
+                    }
+                    @if (SelectedItems.Count > MultiSelectedItemsMaxDisplayCount)
+                    {
+                        <div class="@MultiSelectedItemCountClassString">
+                            @GetCountText()
+                        </div>
+                    }
+                    @if (SelectedItems.Count == 0)
+                    {
+                        <div class="multi-select-item-ph">
+                            @PlaceHolder
+                        </div>
+                    }
+                </div>
+            }
+            else
+            {
+                <input type="text" id="@InputId" readonly disabled="@Disabled" placeholder="@PlaceHolder"
+                       class="@InputClassName" value="@GetText(Value)" />
+            }
         }
         else
         {
@@ -47,6 +79,7 @@
                    CustomerSearchModel="CustomerSearchModel" CustomerSearchTemplate="CustomerSearchTemplate"
                    IsPagination="IsPagination" PageItemsSource="PageItemsSource" ShowGotoNavigator="false" MaxPageLinkCount="3"
                    OnClickRowCallback="OnClickRowCallback" OnQueryAsync="OnQueryAsync"
+                   IsMultipleSelect="IsMultipleSelect" @bind-SelectedRows="SelectedItems"
                    ShowEmpty="ShowEmpty" EmptyTemplate="EmptyTemplate"></Table>
         </div>
     </RenderTemplate>