feat(ImagePreviewer): detach image component (#2475)

* 添加单独使用ImagePreviewer的用法

* doc: 格式化文档

* doc: 格式化文档

* test: 更新单元测试

* chore: bump version 8.0.5-beta01

---------

Co-authored-by: Argo-AscioTech <argo@live.ca>

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

@@ -120,4 +120,11 @@
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["ImagePreviewerTitle"]"
+           Introduction="@Localizer["ImagePreviewerIntro"]"
+           Name="Show">
+    <Button OnClick="ShowImagePreviewer" Text="@Localizer["ImagePreviewerButton"]"></Button>
+    <ImagePreviewer @ref="ImagePreviewer" PreviewList="PreviewList"></ImagePreviewer>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

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

@@ -11,6 +11,11 @@ public partial class ImageViewers
 {
     private List<string> PreviewList { get; } = new();
 
+    [NotNull]
+    private ImagePreviewer? ImagePreviewer { get; set; }
+
+    private Task ShowImagePreviewer() => ImagePreviewer.Show();
+
     /// <summary>
     /// OnInitialized
     /// </summary>
@@ -18,11 +23,11 @@ public partial class ImageViewers
     {
         base.OnInitialized();
 
-        PreviewList.AddRange(new string[]
-        {
+        PreviewList.AddRange(
+        [
             "./images/ImageList1.jpeg",
             "./images/ImageList2.jpeg"
-        });
+        ]);
     }
 
     private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]

src/BootstrapBlazor.Server/Locales/en.json

@@ -5417,7 +5417,10 @@
     "ImageViewerPlaceHolderTemplateLoadingShow": "When loading show",
     "ImageViewerErrorTemplateUrlError": "Url The path error",
     "ImageViewerErrorTemplateCustom": "The custom",
-    "ImageViewerErrorTemplateLoadFailed": "Load failed"
+    "ImageViewerErrorTemplateLoadFailed": "Load failed",
+    "ImagePreviewerTitle": "Use ImagePreviewer Standalone",
+    "ImagePreviewerIntro": "Pop up the Previewer directly in conjunction with other components like Button",
+    "ImagePreviewerButton": "Show Previewer"
   },
   "BootstrapBlazor.Server.Components.Samples.Geolocations": {
     "GeolocationsTitle": "Geolocation",

src/BootstrapBlazor.Server/Locales/zh.json

@@ -5417,7 +5417,10 @@
     "ImageViewerPlaceHolderTemplateLoadingShow": "加载时显示",
     "ImageViewerErrorTemplateUrlError": "Url 路径错误",
     "ImageViewerErrorTemplateCustom": "自定义",
-    "ImageViewerErrorTemplateLoadFailed": "加载失败"
+    "ImageViewerErrorTemplateLoadFailed": "加载失败",
+    "ImagePreviewerTitle": "单独使用ImagePreviewer",
+    "ImagePreviewerIntro": "配合Button等其他组件，直接弹出Previewer",
+    "ImagePreviewerButton": "显示Previewer"
   },
   "BootstrapBlazor.Server.Components.Samples.Geolocations": {
     "GeolocationsTitle": "地理定位/移动距离追踪",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.4</Version>
+    <Version>8.0.5-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs

@@ -85,6 +85,12 @@ public partial class ImagePreviewer
 
     private bool ShowButtons => PreviewList.Count > 1;
 
+    /// <summary>
+    /// 显示图片
+    /// </summary>
+    /// <param name="index"></param>
+    public Task Show(int index = 0) => InvokeVoidAsync("show", Id, index);
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js

@@ -19,6 +19,11 @@ export function update(id, prevList) {
     viewer.viewer.prevList = prevList
 }
 
+export function show(id, index) {
+    const viewer = Data.get(id)
+    viewer.viewer.show(index)
+}
+
 export function dispose(id) {
     const viewer = Data.get(id)
     Data.remove(id)

test/UnitTest/Components/ImageTest.cs

@@ -117,8 +117,18 @@ public class ImageTest : BootstrapBlazorTestBase
         {
             pb.Add(a => a.Url, "https://www.blazor.zone/images/logo.png");
             pb.Add(a => a.IsAsync, true);
-            pb.Add(a => a.PreviewList, new List<string> { "v1", "v2" });
+            pb.Add(a => a.PreviewList, ["v1", "v2"]);
         });
         cut.Contains("bb-previewer collapse active");
     }
+
+    [Fact]
+    public void ImagerViewer_Show()
+    {
+        var cut = Context.RenderComponent<ImagePreviewer>(pb =>
+        {
+            pb.Add(a => a.PreviewList, ["v1", "v2"]);
+        });
+        cut.Instance.Show();
+    }
 }