feat(CardUpload): add ShowConfirmButton parameter

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

@@ -1,4 +1,4 @@
-@page "/upload-card"
+@page "/upload-card"
 @inject IOptions<WebsiteOptions> WebsiteOption
 @inject IStringLocalizer<UploadCards> Localizer
 @inject ToastService ToastService
@@ -52,6 +52,12 @@
                     <Switch @bind-Value="@_showDeleteButton"></Switch>
                 </BootstrapInputGroup>
             </div>
+            <div class="col-12 col-sm-6 col-xl-3">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="ShowDeleteConfirmButton"></BootstrapInputGroupLabel>
+                    <Switch @bind-Value="@_showDeleteConfirmButton"></Switch>
+                </BootstrapInputGroup>
+            </div>
             <div class="col-12 col-sm-6 col-xl-3">
                 <BootstrapInputGroup>
                     <BootstrapInputGroupLabel DisplayText="ShowZoomButton"></BootstrapInputGroupLabel>
@@ -68,7 +74,7 @@
     </section>
     <CardUpload TValue="string" IsMultiple="@_isMultiple" IsDirectory="@_isDirectory"
                 IsDisabled="@_isDisabled" IsUploadButtonAtFirst="@_isUploadButtonAtFirst"
-                ShowProgress="@_showProgress" ShowDeleteButton="@_showDeleteButton"
+                ShowProgress="@_showProgress" ShowDeleteButton="@_showDeleteButton" ShowDeleteConfirmButton="@_showDeleteConfirmButton"
                 ShowDownloadButton="@_showDownloadButton" ShowZoomButton="@_showZoomButton" OnChange="@OnCardUpload"></CardUpload>
 </DemoBlock>
 

src/BootstrapBlazor.Server/Components/Samples/UploadCards.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(argo@live.ca) Website: https://www.blazor.zone
@@ -17,6 +17,7 @@ public partial class UploadCards : IDisposable
     private bool _showProgress = true;
     private bool _showZoomButton = true;
     private bool _showDeleteButton = true;
+    private bool _showDeleteConfirmButton = true;
     private bool _showDownloadButton = true;
 
     private List<UploadFile> DefaultFormatFileList { get; } =

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/Upload/CardUpload.razor

@@ -67,11 +67,27 @@
                     </div>
                     @if (ShowDeleteButton)
                     {
-                        <button type="button" class="btn btn-sm btn-outline-danger"
-                                disabled="@GetDeleteButtonDisabledString(item)" aria-label="delete"
-                                @onclick="() => OnCardFileDelete(item)">
-                            <i class="@RemoveIcon"></i>
-                        </button>
+                        @if (ShowDeleteConfirmButton)
+                        {
+                            <PopConfirmButton Placement="Placement.Top" class="btn btn-sm btn-outline-danger"
+                                              ConfirmIcon="@DeleteConfirmButtonIcon"
+                                              ConfirmButtonColor="DeleteConfirmButtonColor"
+                                              ConfirmButtonText="@DeleteConfirmButtonText"
+                                              CloseButtonText="@DeleteCloseButtonText" 
+                                              Content="@DeleteConfirmContent"
+                                              Icon="@RemoveIcon"
+                                              IsAsync="true"
+                                              OnConfirm="@(async ()=> await OnCardFileDelete(item))" />
+                        }
+                        else
+                        {
+                            <button type="button" class="btn btn-sm btn-outline-danger"
+                                    disabled="@GetDeleteButtonDisabledString(item)" aria-label="delete"
+                                    @onclick="() => OnCardFileDelete(item)">
+                                <i class="@RemoveIcon"></i>
+                            </button>
+                        }
+
                     }
                 </div>
                 @if (GetShowProgress(item))
@@ -99,6 +115,6 @@
 @code {
     RenderFragment RenderAdd =>
     @<div id="@AddId" class="@CardItemClass">
-        <i class="@AddIcon"></i>
+            <i class="@AddIcon"></i>
     </div>;
 }

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

@@ -3,6 +3,8 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
 
+using Microsoft.Extensions.Localization;
+
 namespace BootstrapBlazor.Components;
 
 /// <summary>
@@ -135,6 +137,44 @@ public partial class CardUpload<TValue>
     [Parameter]
     public List<string>? AllowExtensions { get; set; }
 
+    /// <summary>
+    /// 获得/设置 删除前是否显示确认对话框，依赖 <see cref="FileListUploadBase{TValue}.ShowDeleteButton"/> 属性为 true 时有效
+    /// </summary>
+    [Parameter]
+    public bool ShowDeleteConfirmButton { get; set; }
+
+    /// <summary>
+    /// 获得/设置 删除确认弹窗中确认按钮颜色 默认 <see cref="Color.Danger"/>
+    /// </summary>
+    [Parameter]
+    public Color DeleteConfirmButtonColor { get; set; } = Color.Danger;
+
+    /// <summary>
+    /// 获得/设置 删除确认弹窗中确认按钮图标 默认 null 未设置
+    /// </summary>
+    [Parameter]
+    public string? DeleteConfirmButtonIcon { get; set; }
+
+    /// <summary>
+    /// 获得/设置 删除确认弹窗中确认文本内容 默认 null 未设置 使用资源文件中内置文字
+    /// </summary>
+    [Parameter]
+    public string? DeleteConfirmContent { get; set; }
+    /// <summary>
+    /// 获得/设置 删除确认弹窗中确认按钮显示文字 默认 null 未设置
+    /// </summary>
+    [Parameter]
+    public string? DeleteConfirmButtonText { get; set; }
+
+    /// <summary>
+    /// 获得/设置 删除确认弹窗中取消按钮显示文字 默认 null 未设置
+    /// </summary>
+    [Parameter]
+    public string? DeleteCloseButtonText { get; set; }
+
+    [Inject, NotNull]
+    private IStringLocalizer<CardUpload<TValue>>? Localizer { get; set; }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -146,6 +186,8 @@ protected override void OnParametersSet()
         StatusIcon ??= IconTheme.GetIconByKey(ComponentIcons.CardUploadStatusIcon);
         ZoomIcon ??= IconTheme.GetIconByKey(ComponentIcons.CardUploadZoomIcon);
         RemoveIcon ??= IconTheme.GetIconByKey(ComponentIcons.CardUploadRemoveIcon);
+
+        DeleteConfirmContent ??= Localizer["DeleteConfirmContent"];
     }
 
     /// <summary>

src/BootstrapBlazor/Locales/en.json

@@ -402,5 +402,8 @@
   },
   "BootstrapBlazor.Components.LoadMore": {
     "NoMoreText": "No More Data"
+  },
+  "BootstrapBlazor.Components.CardUpload": {
+    "DeleteConfirmContent": "Are you sure you want to delete the current data?"
   }
 }

src/BootstrapBlazor/Locales/zh.json

@@ -402,5 +402,8 @@
   },
   "BootstrapBlazor.Components.LoadMore": {
     "NoMoreText": "没有更多数据了"
+  },
+  "BootstrapBlazor.Components.CardUpload": {
+    "DeleteConfirmContent": "确定删除当前数据吗？"
   }
 }

test/UnitTest/Components/UploadCardTest.cs

@@ -321,6 +321,31 @@ public void ActionButtonTemplate_Ok()
         cut.Contains("action-button-test");
     }
 
+    [Fact]
+    public async Task ShowConfirmButton_Ok()
+    {
+        var cut = Context.Render<CardUpload<string>>(pb =>
+        {
+            pb.Add(a => a.DefaultFileList,
+            [
+                new() { FileName = "test.png" }
+            ]);
+            pb.Add(a => a.ShowDeleteButton, true);
+            pb.Add(a => a.ShowDeleteConfirmButton, true);
+            pb.Add(a => a.DeleteConfirmButtonColor, Color.Danger);
+            pb.Add(a => a.DeleteConfirmButtonIcon, "icon-delete");
+            pb.Add(a => a.DeleteConfirmContent, "content-delete");
+            pb.Add(a => a.DeleteConfirmButtonText, "confirm");
+            pb.Add(a => a.DeleteCloseButtonText, "cancel");
+        });
+
+        var button = cut.FindComponent<PopConfirmButton>();
+        Assert.NotNull(button);
+        Assert.NotNull(button.Instance.OnConfirm);
+
+        await cut.InvokeAsync(button.Instance.OnConfirm);
+    }
+
     private class MockBrowserFile(string name = "UploadTestFile", string contentType = "text", TimeSpan? delay = null) : IBrowserFile
     {
         public string Name { get; } = name;