feat(CardUpload): add ShowFileSize parameter (#7370)

* feat(CardUpload): Add ShowFileSize

* refactor(CardUpload): Update unit test

* refactor(CardUpload): Update unit test

* refactor(CardUpload): Update unit test

* doc: 更新注释

* doc: 调整样式

* test: 重构单元测试

* test: 更新单元测试

---------

Co-authored-by: Argo Zhang <[email protected]>

Author: momijijin

src/BootstrapBlazor/Components/Upload/CardUpload.razor

@@ -1,4 +1,4 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @typeparam TValue
 @inherits FileListUploadBase<TValue>
 
@@ -29,7 +29,13 @@
                         <FileIcon Extension="@item.GetExtension()"></FileIcon>
                     }
                 </div>
-                <div class="upload-item-size"><span>@item.GetFileName()</span> (@item.Size.ToFileSizeString())</div>
+                <div class="upload-item-file">
+                    <span class="upload-item-file-name">@item.GetFileName()</span>
+                    @if (ShowFileSize)
+                    {
+                        <span class="upload-item-file-size">(@item.Size.ToFileSizeString())</span>
+                    }
+                </div>
                 <div class="upload-item-actions">
                     <div class="btn-group">
                         @if (BeforeActionButtonTemplate != null)
@@ -54,10 +60,10 @@
                                 <i class="@CancelIcon"></i>
                             </button>
                         }
-						@if (ActionButtonTemplate != null)
-						{
-							@ActionButtonTemplate(item)
-						}
+                        @if (ActionButtonTemplate != null)
+                        {
+                            @ActionButtonTemplate(item)
+                        }
                     </div>
                     @if (ShowDeleteButton)
                     {

src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
@@ -72,6 +72,12 @@ public partial class CardUpload<TValue>
     [Parameter]
     public RenderFragment<UploadFile>? ActionButtonTemplate { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示文件尺寸，默认为 true 显示
+    /// </summary>
+    [Parameter]
+    public bool ShowFileSize { get; set; } = true;
+
     /// <summary>
     /// 获得/设置 新建图标
     /// </summary>

src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss

@@ -1,4 +1,4 @@
-@use "../../wwwroot/scss/variables" as *;
+@use "../../wwwroot/scss/variables" as *;
 
 .upload {
     --bb-upload-body-margin-top: #{$bb-upload-body-margin-top};
@@ -208,21 +208,22 @@
     display: none;
 }
 
-.upload .upload-body.is-card .upload-item-size {
+.upload .upload-body.is-card .upload-item-file {
     margin: 1rem auto;
-    text-align: center;
     font-size: 0.625rem;
     display: flex;
+    flex-wrap: nowrap;
     justify-content: center;
-}
+    align-items: center;
 
-.upload .upload-body.is-card .upload-item-size span {
-    max-width: calc(100% - 4.5rem);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-    white-space: nowrap;
-    padding-right: 0.25rem;
+    .upload-item-file-name {
+        max-width: calc(100% - 4.5rem);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        white-space: nowrap;
+        padding-right: 0.25rem;
+    }
 }
 
 .upload .upload-item .upload-item-label {

test/UnitTest/Components/UploadCardTest.cs

@@ -130,6 +130,26 @@ await cut.InvokeAsync(() => input.Instance.OnChange.InvokeAsync(new InputFileCha
         cut.DoesNotContain("aria-label=\"delete\"");
     }
 
+    [Fact]
+    public void ShowFileSize_Ok()
+    {
+        var cut = Context.Render<CardUpload<string>>(pb =>
+        {
+            pb.Add(a => a.ShowFileSize, true);
+            pb.Add(a => a.DefaultFileList,
+            [
+                new() { FileName = "Test-File1.text" },
+            ]);
+        });
+        cut.Contains("upload-item-file-size");
+
+        cut.Render(pb =>
+        {
+            pb.Add(a => a.ShowFileSize, false);
+        });
+        cut.DoesNotContain("upload-item-file-size");
+    }
+
     [Fact]
     public void CardUpload_ValidateForm_Ok()
     {
@@ -157,7 +177,7 @@ public void AllowExtensions_Ok()
                 new() { FileName = "test.dba" }
             ]);
         });
-        cut.Contains("<span>test.dba</span> (0 B)");
+        cut.Contains("test.dba");
 
         cut.Render(pb =>
         {
@@ -166,7 +186,7 @@ public void AllowExtensions_Ok()
                 new() { File = new MockBrowserFile("demo.dba") }
             ]);
         });
-        cut.Contains("<span>demo.dba</span> (0 B)");
+        cut.Contains("demo.dba");
     }
 
     [Fact]