feat(CardUpload): support ValidateForm validate function (#7432)

* feat: 增加空集合验证样式

* refactor: 更正单词拼写错误

* feat: 增加验证逻辑

* fix: 修复空集合不报错问题

* refactor: 增加对 UploadFile 集合支持

* style: 更新样式

* chore: bump version 10.1.5-beta04

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

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

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

@@ -187,19 +187,19 @@ public override async Task ToggleMessage(IReadOnlyCollection<ValidationResult> r
 
         ValidateModule ??= await LoadValidateModule();
 
-        var invalidItems = IsInValiadOnAddItem
+        var invalidItems = IsInValidOnAddItem
             ? [new { Id = AddId, _results.First().ErrorMessage }]
             : _results.Select(i => new { Id = i.MemberNames.FirstOrDefault(), i.ErrorMessage }).ToList();
 
-        var items = IsInValiadOnAddItem
+        var items = IsInValidOnAddItem
             ? [AddId]
             : Files.Select(i => i.ValidateId).ToList();
 
-        var addId = IsInValiadOnAddItem ? null : AddId;
+        var addId = IsInValidOnAddItem ? null : AddId;
         await ValidateModule.InvokeVoidAsync("executeUpload", items, invalidItems, addId);
     }
 
-    private bool IsInValiadOnAddItem => Files.Count == 0 && _results.Count > 0;
+    private bool IsInValidOnAddItem => Files.Count == 0 && _results.Count > 0;
 
     /// <summary>
     /// <inheritdoc/>
@@ -238,7 +238,7 @@ protected override async ValueTask DisposeAsync(bool disposing)
 
             if (ValidateModule != null)
             {
-                var items = IsInValiadOnAddItem
+                var items = IsInValidOnAddItem
                     ? [AddId]
                     : Files.Select(i => i.ValidateId).ToList();
 

src/BootstrapBlazor/Components/Upload/CardUpload.razor

@@ -14,7 +14,7 @@
         }
         @foreach (var item in Files)
         {
-            <div @key="@item" class="@GetItemClassString(item)">
+            <div @key="@item" id="@item.ValidateId" class="@GetItemClassString(item)">
                 <div class="upload-item-body">
                     @if (IconTemplate != null)
                     {
@@ -98,7 +98,7 @@
 
 @code {
     RenderFragment RenderAdd =>
-    @<div class="@CardItemClass">
+    @<div id="@AddId" class="@CardItemClass">
         <i class="@AddIcon"></i>
     </div>;
 }

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

@@ -18,6 +18,7 @@ public partial class CardUpload<TValue>
         .AddClass("is-valid", item is { Uploaded: true, Code: 0 })
         .AddClass("is-invalid", item.Code != 0)
         .Build();
+
     private string? ItemClassString => CssBuilder.Default("upload-item")
         .AddClass("disabled", CanUpload() == false)
         .Build();
@@ -162,6 +163,54 @@ protected override async Task TriggerOnChanged(UploadFile file)
         await base.TriggerOnChanged(file);
     }
 
+    private IReadOnlyCollection<ValidationResult> _results = [];
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="results"></param>
+    public override async Task ToggleMessage(IReadOnlyCollection<ValidationResult> results)
+    {
+        _results = results;
+        IsValid = results.Count == 0;
+
+        ValidateModule ??= await LoadValidateModule();
+
+        var invalidItems = IsInValidOnAddItem
+            ? [new { Id = AddId, _results.First().ErrorMessage }]
+            : _results.Select(i => new { Id = i.MemberNames.FirstOrDefault(), i.ErrorMessage }).ToList();
+
+        var items = IsInValidOnAddItem
+            ? [AddId]
+            : Files.Select(i => i.ValidateId).ToList();
+
+        var addId = IsInValidOnAddItem ? null : AddId;
+        await ValidateModule.InvokeVoidAsync("executeUpload", items, invalidItems, addId);
+    }
+
+    private bool IsInValidOnAddItem => Files.Count == 0 && _results.Count > 0;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override ValueTask ShowValidResult() => ValueTask.CompletedTask;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="validateId"></param>
+    /// <returns></returns>
+    protected override async ValueTask RemoveValidResult(string? validateId = null)
+    {
+        if (!string.IsNullOrEmpty(validateId))
+        {
+            await base.RemoveValidResult(validateId);
+        }
+    }
+
+    private string? AddId => $"{Id}_new";
+
     private async Task OnCardFileDelete(UploadFile item)
     {
         await OnFileDelete(item);

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

@@ -119,7 +119,7 @@
 .upload .upload-body.is-avatar .upload-item:not(.is-form):not(.is-valid):not(.is-invalid):hover,
 .upload .upload-body.is-avatar .upload-item:not(.is-form).is-valid,
 .upload .upload-body.is-card .upload-item.is-valid,
-.upload .upload-body.is-card .upload-item:not(.disabled):hover {
+.upload .upload-body.is-card .upload-item:not(.disabled):not(.is-valid):not(.is-invalid):hover {
     border-color: var(--bb-upload-body-list-item-hover-color);
 }
 
@@ -194,10 +194,14 @@
     display: block;
 }
 
-.upload .upload-body.is-card .is-invalid .upload-item-body {
+.upload .upload-body.is-card .upload-item.is-invalid {
     border-color: var(--bs-danger);
 }
 
+.upload .upload-body.is-card .upload-item.is-valid {
+    border-color: var(--bs-success);
+}
+
 .upload .upload-body.is-card .upload-item-body {
     border-radius: var(--bs-border-radius);
     width: var(--bb-upload-card-item-width);

src/BootstrapBlazor/Components/Upload/UploadBase.cs

@@ -190,7 +190,11 @@ protected async Task OnFileChange(InputFileChangeEventArgs args)
             await OnAllFileUploaded(items);
         }
 
-        if (ValueType.IsAssignableTo(typeof(IEnumerable<IBrowserFile>)))
+        if (ValueType.IsAssignableTo(typeof(IEnumerable<UploadFile>)))
+        {
+            CurrentValue = (TValue)(object)items;
+        }
+        else if (ValueType.IsAssignableTo(typeof(IEnumerable<IBrowserFile>)))
         {
             CurrentValue = (TValue)(object)items.Select(f => f.File).ToList();
         }

src/BootstrapBlazor/Components/ValidateForm/ValidateForm.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
@@ -508,6 +508,7 @@ private async Task ValidateAsync(IValidateComponent validator, ValidationContext
             else
             {
                 // 未选择文件
+                propertyValue = null;
                 ValidateDataAnnotations(propertyValue, context, messages, pi);
             }