feat(Transfer): add IsWrapItem/ItemWidth parameter (#6960)

* feat: 增加 IsWrapItem 参数

* test: 增加单元测试

* test: 更新单元测试

* feat: 增加 ItemWidth 参数

* doc: 移除多余箭头

* Revert "doc: 移除多余箭头"

This reverts commit fce10f6.

* chore: bump version 9.11.3-beta06

Co-Authored-By: 18636609650 <[email protected]>

* test: 更新单元测试

---------

Co-authored-by: 18636609650 <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.11.3-beta05</Version>
+    <Version>9.11.3-beta06</Version>
   </PropertyGroup>
 
   <ItemGroup>

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

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

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

@@ -1,13 +1,12 @@
 @use "../../wwwroot/scss/variables" as *;
 
-.transfer {
+.bb-transfer {
     --bb-transfer-panel-header-height: #{$bb-transfer-panel-header-height};
     --bb-transfer-panel-header-padding: #{$bb-transfer-panel-header-padding};
     --bb-transfer-panel-body-padding: #{$bb-transfer-panel-body-padding};
     --bb-transfer-panel-list-max-height: #{$bb-transfer-panel-list-max-height};
     --bb-transfer-panel-list-min-height: #{$bb-transfer-panel-list-min-height};
     --bb-transfer-panel-item-padding: #{$bb-transfer-panel-item-padding};
-    --bb-transfer-panel-item-margin: #{$bb-transfer-panel-item-margin};
     --bb-transfer-panel-item-width: #{$bb-transfer-panel-item-width};
     --bb-transfer-buttons-padding: #{$bb-transfer-buttons-padding};
     --bb-transfer-filter-focus-border-color: #{$bb-transfer-filter-focus-border-color};
@@ -27,6 +26,14 @@
             }
         }
     }
+
+    &.wrap-item {
+        .transfer-panel-item .form-check-input + .form-check-label {
+            white-space: normal;
+            text-overflow: clip;
+            overflow: visible;
+        }
+    }
 }
 
 .transfer-panel {
@@ -62,15 +69,20 @@
 .transfer-panel-list {
     max-height: var(--bb-transfer-panel-list-max-height);
     min-height: var(--bb-transfer-panel-list-min-height);
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .transfer-panel-item {
     border-radius: var(--bs-border-radius);
     padding: var(--bb-transfer-panel-item-padding);
-    margin: var(--bb-transfer-panel-item-margin);
     width: var(--bb-transfer-panel-item-width);
 }
 
+.transfer-panel-item .form-check-input + .form-check-label {
+    white-space: var(--bb-transfer-panel-item-wrap, nowrap);
+}
+
 .transfer-buttons {
     display: flex;
     align-items: center;

src/BootstrapBlazor/wwwroot/scss/variables.scss

@@ -672,7 +672,6 @@ $bb-transfer-panel-body-padding: 0;
 $bb-transfer-panel-list-max-height: 200px;
 $bb-transfer-panel-list-min-height: auto;
 $bb-transfer-panel-item-padding: 0.25rem 0.75rem;
-$bb-transfer-panel-item-margin: 0 .5rem .25rem 0;
 $bb-transfer-panel-item-width: 160px;
 $bb-transfer-buttons-padding: 0 30px;
 $bb-transfer-filter-focus-border-color: #409eff;

test/UnitTest/Components/TransferTest.cs

@@ -12,7 +12,7 @@ public void Items_Ok()
     {
         // 未设置 Items 为空
         var cut = Context.RenderComponent<Transfer<string>>();
-        cut.Contains("class=\"transfer\"");
+        cut.Contains("class=\"bb-transfer\"");
 
         // 设置 Items
         cut.SetParametersAndRender(pb =>
@@ -260,4 +260,47 @@ public void Template_Ok()
         cut.Contains("Right-ItemTemplate-Test2");
         cut.Contains("Right-ItemTemplate-Test4");
     }
+
+    [Fact]
+    public void IsWrapItem_Ok()
+    {
+        var cut = Context.RenderComponent<Transfer<string>>(pb =>
+        {
+            pb.Add(a => a.Value, "2");
+            pb.Add(a => a.Items, new List<SelectedItem>()
+            {
+                new("1", "Test1 with a very long text"),
+                new("2", "Test2 with a very long text")
+            });
+            pb.Add(a => a.IsWrapItem, false);
+        });
+        cut.DoesNotContain("wrap-item");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsWrapItem, true);
+        });
+        cut.Contains("wrap-item");
+    }
+
+    [Fact]
+    public void ItemWidth_Ok()
+    {
+        var cut = Context.RenderComponent<Transfer<string>>(pb =>
+        {
+            pb.Add(a => a.Value, "2");
+            pb.Add(a => a.Items, new List<SelectedItem>()
+            {
+                new("1", "Test1 with a very long text"),
+                new("2", "Test2 with a very long text")
+            });
+        });
+        cut.DoesNotContain("--bb-transfer-panel-item-width");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.ItemWidth, "160px");
+        });
+        cut.Contains("--bb-transfer-panel-item-width: 160px;");
+    }
 }