feat(Transfer): add IsWrapItemText parameter (#7057)

* chore: 增加预处理指令

* doc: 更新文档注释

* doc: 文档格式化

* refactor: 默认值更改为 true

* feat: 增加 IsWrapItemText 参数

* doc: 代码格式化

* feat: 增加样式

* doc: 更新示例

* doc: 文档格式化

* test: 更新单元测试

* chore: bump version 9.12.1-beta02

Author: ArgoZhang

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

@@ -6,7 +6,29 @@
 <DemoBlock Title="@Localizer["TransferNormalTitle"]"
            Introduction="@Localizer["TransferNormalIntro"]"
            Name="Normal">
-    <Transfer TValue="string" Items="@Items" OnSelectedItemsChanged="@OnSelectedItemsChanged" />
+    <section ignore class="row form-inline g-3">
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="IsWrapItem"></BootstrapInputGroupLabel>
+                <Switch @bind-Value="@_isWrapItem"></Switch>
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="IsWrapItemText"></BootstrapInputGroupLabel>
+                <Switch @bind-Value="@_isWrapItemText"></Switch>
+            </BootstrapInputGroup>
+        </div>
+        <div class="col-12 col-sm-6">
+            <BootstrapInputGroup>
+                <BootstrapInputGroupLabel DisplayText="ItemWidth"></BootstrapInputGroupLabel>
+                <BootstrapInput @bind-Value="@_itemWidth"></BootstrapInput>
+            </BootstrapInputGroup>
+        </div>
+    </section>
+    <Transfer TValue="string" Items="@Items"
+              IsWrapItem="@_isWrapItem" IsWrapItemText="@_isWrapItemText" ItemWidth="@_itemWidth"
+              OnSelectedItemsChanged="@OnSelectedItemsChanged" />
     <ConsoleLogger @ref="Logger" />
 </DemoBlock>
 

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

@@ -43,6 +43,10 @@ public sealed partial class Transfers : ComponentBase
 
     private IEnumerable<SelectedItem> SelectedValue { get; set; } = Enumerable.Empty<SelectedItem>();
 
+    private bool _isWrapItem = true;
+    private bool _isWrapItemText = true;
+    private string? _itemWidth = "160px";
+
     private Task OnSelectedItemsChanged(IEnumerable<SelectedItem> items)
     {
         Logger.Log(string.Join(" ", items.Select(i => i.Text)));
@@ -59,15 +63,17 @@ protected override async Task OnInitializedAsync()
         // 模拟异步加载数据源
         await Task.Delay(100);
 
-        Items = GeneratorItems();
+        var items = GeneratorItems().ToList();
+        items[1].Text = "我是一个超级长的专门为了测试溢出折行功能的候选项";
+        Items = items;
         Items1 = GeneratorItems();
         Items2 = GeneratorItems();
 
-        Items3 = Enumerable.Range(1, 15).Select(i => new SelectedItem()
+        Items3 = [.. Enumerable.Range(1, 15).Select(i => new SelectedItem()
         {
             Text = $"{Localizer["Backup"]} {i:d2}",
             Value = i.ToString()
-        }).ToList();
+        })];
 
         Items4 = GeneratorItems();
         Items5 = GeneratorItems();

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

@@ -3219,7 +3219,7 @@
     "PlaceHolder": "Please enter",
     "TransfersTitle": "Transfer",
     "TransferNormalTitle": "Basic usage",
-    "TransferNormalIntro": "Searchable",
+    "TransferNormalIntro": "Select the candidate items on the left and click the move button to move them to the right",
     "TransferCustomerTitle": "Customizable",
     "TransferCustomerIntro": "You can customize the list title copy, button copy, rendering function of data items, check status copy at the bottom of the list, content area at the bottom of the list, and so on.",
     "TransferSearchTitle": "Searchable",

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

@@ -3219,7 +3219,7 @@
     "PlaceHolder": "请输入",
     "TransfersTitle": "Transfer 穿梭框",
     "TransferNormalTitle": "基础用法",
-    "TransferNormalIntro": "可搜索",
+    "TransferNormalIntro": "左边勾选候选项点击移动按钮将候选项移动到右侧",
     "TransferCustomerTitle": "可自定义",
     "TransferCustomerIntro": "可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。",
     "TransferSearchTitle": "可搜索",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,11 +1,11 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup Condition="'$(VisualStudioVersion)' == '17.0'">
-    <Version>9.12.1-beta01</Version>
+    <Version>9.12.1-beta02</Version>
   </PropertyGroup>
 
   <PropertyGroup Condition="'$(VisualStudioVersion)' == '18.0'">
-    <Version>10.0.0-rc.2.2.1</Version>
+    <Version>10.0.0-rc.2.2.2</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Transfer/Transfer.razor

@@ -13,11 +13,13 @@
                    HeaderTemplate="LeftHeaderTemplate!" ItemTemplate="LeftItemTemplate!">
     </TransferPanel>
     <div class="transfer-buttons">
-        <Button Color="@Color.Primary" IsDisabled="@GetButtonState(RightItems)" OnClick="() => TransferItems(RightItems, LeftItems, false)">
+        <Button Color="@Color.Primary" IsDisabled="@GetButtonState(RightItems)"
+                OnClick="() => TransferItems(RightItems, LeftItems, false)">
             <i class="@LeftIcon"></i>
             <span class="@LeftButtonClassName">@LeftButtonText</span>
         </Button>
-        <Button Color="@Color.Primary" IsDisabled="@GetButtonState(LeftItems)" OnClick="() => TransferItems(LeftItems, RightItems, true)">
+        <Button Color="@Color.Primary" IsDisabled="@GetButtonState(LeftItems)"
+                OnClick="() => TransferItems(LeftItems, RightItems, true)">
             <span class="@RightButtonClassName">@RightButtonText</span>
             <i class="@RightIcon"></i>
         </Button>

src/BootstrapBlazor/Components/Transfer/Transfer.razor.cs

@@ -192,24 +192,31 @@ public partial class Transfer<TValue>
     public string? Height { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否为换行模式 默认 false 不换行
+    /// 获得/设置 候选项是否为换行模式 默认 false 不换行
     /// </summary>
     [Parameter]
-    public bool IsWrapItem { get; set; }
+    public bool IsWrapItem { get; set; } = true;
 
     /// <summary>
     /// 获得/设置 候选项宽度 默认 null 未设置
     /// </summary>
     [Parameter]
     public string? ItemWidth { get; set; }
 
+    /// <summary>
+    /// 获得/设置 候选项文本是否为换行 默认 false 不换行
+    /// </summary>
+    [Parameter]
+    public bool IsWrapItemText { get; set; }
+
     [Inject]
     [NotNull]
     private IIconTheme? IconTheme { get; set; }
 
     private string? ClassString => CssBuilder.Default("bb-transfer")
         .AddClass("has-height", !string.IsNullOrEmpty(Height))
         .AddClass("wrap-item", IsWrapItem)
+        .AddClass("wrap-item-text", IsWrapItemText)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 

src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss

@@ -28,12 +28,29 @@
     }
 
     &.wrap-item {
+        .transfer-panel-list {
+            flex-direction: row;
+            flex-wrap: wrap;
+
+            .transfer-panel-item {
+                width: var(--bb-transfer-panel-item-width);
+            }
+        }
+    }
+
+    &.wrap-item-text {
         .transfer-panel-item .form-check-input + .form-check-label {
             white-space: normal;
             text-overflow: clip;
             overflow: visible;
         }
     }
+
+    .transfer-panel-item .form-check-input + .form-check-label {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
 }
 
 .transfer-panel {
@@ -70,13 +87,16 @@
     max-height: var(--bb-transfer-panel-list-max-height);
     min-height: var(--bb-transfer-panel-list-min-height);
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
+
+    .form-check {
+        min-height: unset;
+    }
 }
 
 .transfer-panel-item {
     border-radius: var(--bs-border-radius);
     padding: var(--bb-transfer-panel-item-padding);
-    width: var(--bb-transfer-panel-item-width);
 }
 
 .transfer-panel-item .form-check-input + .form-check-label {

src/BootstrapBlazor/Components/Transfer/TransferPanel.razor

@@ -17,7 +17,8 @@
         @if (ShowSearch)
         {
             <div class="transfer-panel-filter">
-                <input type="text" autocomplete="off" placeholder="@SearchPlaceHolderString" disabled="@Disabled" class="input-inner" value="@SearchText" @oninput="@OnSearch" @onkeyup="@OnKeyUp">
+                <input type="text" autocomplete="off" placeholder="@SearchPlaceHolderString" disabled="@Disabled"
+                       class="input-inner" value="@SearchText" @oninput="@OnSearch" @onkeyup="@OnKeyUp">
                 <span class="@SearchClass" @onclick="@ClearSearch">
                     <i class="@SearchIcon"></i>
                 </span>
@@ -30,8 +31,8 @@
                 {
                     var state = item.Active ? CheckboxState.Checked : CheckboxState.UnChecked;
                     <Checkbox TValue="SelectedItem" IsDisabled="@IsDisabled" class="@GetItemClass(item)"
-                                DisplayText="@item.Text" Value="item" ShowAfterLabel="true" ShowLabel="false"
-                                State="@state" OnStateChanged="@OnStateChanged"></Checkbox>
+                              DisplayText="@item.Text" Value="item" ShowAfterLabel="true" ShowLabel="false"
+                              State="@state" OnStateChanged="@OnStateChanged"></Checkbox>
                 }
                 else
                 {

test/UnitTest/Components/TransferTest.cs

@@ -12,8 +12,20 @@ public void Items_Ok()
     {
         // 未设置 Items 为空
         var cut = Context.RenderComponent<Transfer<string>>();
+        cut.Contains("class=\"bb-transfer wrap-item\"");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsWrapItem, false);
+        });
         cut.Contains("class=\"bb-transfer\"");
 
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsWrapItemText, true);
+        });
+        cut.Contains("class=\"bb-transfer wrap-item-text\"");
+
         // 设置 Items
         cut.SetParametersAndRender(pb =>
         {