feat(AvatarUpload): preview function may be required (#6418)

* chore: 更新 Logging 到最新版本

* doc: 更新单词拼写错误

* refactor: 增加预览功能

* feat: 增加预览实例方法

* test: 增加单元测试

* feat: bump version 9.8.1

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -75,7 +75,7 @@
     <PackageReference Include="BootstrapBlazor.Vditor" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.VideoPlayer" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.WinBox" Version="9.0.7" />
-    <PackageReference Include="Longbow.Logging" Version="9.0.0" />
+    <PackageReference Include="Longbow.Logging" Version="9.0.1" />
     <PackageReference Include="Longbow.Tasks" Version="9.0.0" />
   </ItemGroup>
 

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

@@ -3075,7 +3075,7 @@
     "SelectsEnumTitle": "Enumerate the data",
     "SelectsEnumIntro": "an example of a type enumerated a <code>select</code> component binding",
     "SelectsEnumDescription1": "Enumeration When the binding value is an empty enumeration type, the component automatically adds preferences internally through the <code>PlaceHolder</code> value, and when the <code>PlaceHolder</code> value is not set, <b>please select ... </b>as a preference, and this example binds <code>the EnumEducation</code> enumeration type data",
-    "SelectsEnumDescription2": "Setting <code>PalceHolder</code> is not valid when the binding value is an enumerated type",
+    "SelectsEnumDescription2": "Setting <code>PlaceHolder</code> is not valid when the binding value is an enumerated type",
     "SelectsEnumSelectText1": "Can be empty",
     "SelectsEnumSelectText2": "Not empty",
     "SelectsEnumSelectText3": "Using enum integer values ​​as Items",

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

@@ -3075,7 +3075,7 @@
     "SelectsEnumTitle": "枚举数据",
     "SelectsEnumIntro": "<code>Select</code> 组件绑定枚举类型示例",
     "SelectsEnumDescription1": "当绑定值为可为空枚举类型时，组件内部自动通过 <code>PlaceHolder</code> 值添加首选项，未设置 <code>PlaceHolder</code> 值时，使用资源文件中的 <b>请选择 ...</b> 作为首选项，本示例绑定 <code>EnumEducation</code> 枚举类型",
-    "SelectsEnumDescription2": "绑定值为枚举类型时，设置 <code>PalceHolder</code> 无效",
+    "SelectsEnumDescription2": "绑定值为枚举类型时，设置 <code>PlaceHolder</code> 无效",
     "SelectsEnumSelectText1": "可为空",
     "SelectsEnumSelectText2": "不为空",
     "SelectsEnumSelectText3": "使用枚举整形值作为集合",

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/Upload/AvatarUpload.razor

@@ -6,7 +6,7 @@
 {
     <BootstrapLabel required="@Required" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
-<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
+<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id" data-bb-previewer-id="@PreviewerId">
     <div class="upload-body is-avatar">
         @if (IsUploadButtonAtFirst && ShowAddButton())
         {
@@ -41,6 +41,10 @@
             @RenderAdd
         }
     </div>
+    @if (ShowPreviewList)
+    {
+        <ImagePreviewer Id="@PreviewerId" PreviewList="PreviewList"></ImagePreviewer>
+    }
     <InputFile AdditionalAttributes="@GetUploadAdditionalAttributes()" OnChange="OnFileChange" />
 </div>
 

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

@@ -115,6 +115,12 @@ public partial class AvatarUpload<TValue>
         .AddClass(InvalidStatusIcon)
         .Build();
 
+    private bool ShowPreviewList => Files.Count != 0;
+
+    private string PreviewerId => $"prev_{Id}";
+
+    private List<string?> PreviewList => [.. Files.Select(i => i.PrevUrl)];
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -144,6 +150,18 @@ protected override async Task TriggerOnChanged(UploadFile file)
         await base.TriggerOnChanged(file);
     }
 
+    /// <summary>
+    /// 预览当前头像方法
+    /// </summary>
+    /// <returns></returns>
+    public async Task Preview()
+    {
+        if(ShowPreviewList)
+        {
+            await InvokeVoidAsync("preview", PreviewerId, 0);
+        }
+    }
+
     private IReadOnlyCollection<ValidationResult> _results = [];
 
     /// <summary>

src/BootstrapBlazor/wwwroot/modules/upload.js

@@ -84,6 +84,13 @@ export function init(id) {
     })
 }
 
+export function preview(previewerId, index) {
+    const prev = Data.get(previewerId);
+    if (prev) {
+        prev.viewer.show(index);
+    }
+}
+
 export async function getPreviewUrl(id, fileName) {
     let url = '';
     const upload = Data.get(id);

test/UnitTest/Components/UploadAvatarTest.cs

@@ -76,6 +76,9 @@ await cut.InvokeAsync(() => input.Instance.OnChange.InvokeAsync(new InputFileCha
             new()
         })));
 
+        // call preview
+        await cut.InvokeAsync(() => cut.Instance.Preview());
+
         // upload-item-delete
         var button = cut.Find(".upload-item-delete");
         await cut.InvokeAsync(() => button.Click());