feat(ValidateForm): add ShowAllInvalidResult parameter (#4306)

* feat: add parameter ShowAllInvalidResult * feat: update ShowAllInvalidResult script * chore: 更新 Layout 组件 Bar 样式 * test: 更新单元测试 * chore: bump version 8.9.2
dotnetcore · Sep 14, 2024 · 7e78384 · 7e78384
1 parent c58ea05
commit 7e78384
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 13 deletions.
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.9.2-beta12</Version>
+    <Version>8.9.2</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.scss b/src/BootstrapBlazor/Components/Layout/Layout.razor.scss
@@ -2,8 +2,10 @@
     --bb-layout-header-height: #{$bb-layout-header-height};
     --bb-layout-header-background: #{$bb-layout-header-background};
     --bb-layout-header-color: #{$bb-layout-header-color};
+    --bb-layout-headerbar-color: var(--bb-layout-header-color);
     --bb-layout-headerbar-background: #{$bb-layout-headerbar-background};
     --bb-layout-headerbar-border-color: #{$bb-layout-headerbar-border-color};
+    --bb-layout-headerbar-padding: #{$bb-layout-headerbar-padding};
     --bb-layout-footer-background: #{$bb-layout-footer-background};
     --bb-layout-footer-color: #{$bb-layout-footer-color};
     --bb-layout-footer-height: #{$bb-layout-footer-height};
@@ -162,10 +164,10 @@
 }
 
 .layout-header-bar {
-    padding: 4px 12px;
-    color: #fff;
+    padding: var(--bb-layout-headerbar-padding);
+    color: var(--bb-layout-headerbar-color);
     background-color: var(--bb-layout-headerbar-background);
-    border-color: var(--bb-layout-headerbar-border-color);
+    border: var(--bs-border-width) solid var(--bb-layout-headerbar-border-color);
     border-radius: var(--bs-border-radius);
 
     .fa-bars {

diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor
@@ -5,7 +5,8 @@
 @if (Model != null)
 {
     <CascadingValue Value="this" IsFixed="true">
-        <EditForm Model="@Model" @attributes="@AdditionalAttributes" id="@Id" data-bb-dissubmit="@DisableAutoSubmitString" OnValidSubmit="@OnValidSubmitForm" OnInvalidSubmit="@OnInvalidSubmitForm">
+        <EditForm Model="@Model" @attributes="@AdditionalAttributes" id="@Id" data-bb-dissubmit="@DisableAutoSubmitString" data-bb-invalid-result="@ShowAllInvalidResultString"
+                  OnValidSubmit="@OnValidSubmitForm" OnInvalidSubmit="@OnInvalidSubmitForm">
             <BootstrapBlazorDataAnnotationsValidator @ref="Validator" />
             @ChildContent
         </EditForm>

diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs
@@ -39,6 +39,12 @@ public partial class ValidateForm
     [NotNull]
     public Action<string, object?>? OnFieldValueChanged { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示所有验证失败字段的提示信息 默认 false 仅显示第一个验证失败字段的提示信息
+    /// </summary>
+    [Parameter]
+    public bool ShowAllInvalidResult { get; set; }
+
     /// <summary>
     /// 获得/设置 是否验证所有字段 默认 false
     /// </summary>
@@ -113,6 +119,8 @@ public partial class ValidateForm
     /// </summary>
     internal List<ValidationResult> InvalidMemberNames { get; } = [];
 
+    private string? ShowAllInvalidResultString => ShowAllInvalidResult ? "true" : null;
+
     /// <summary>
     /// OnParametersSet 方法
     /// </summary>

diff --git a/src/BootstrapBlazor/wwwroot/modules/validate.js b/src/BootstrapBlazor/wwwroot/modules/validate.js
@@ -1,15 +1,37 @@
 export function execute(id, title) {
-    const el = document.getElementById(id)
+    const el = document.getElementById(id);
 
     if (el) {
         const tip = bootstrap.Tooltip.getOrCreateInstance(el, { customClass: 'is-invalid', title })
         if (!tip._isShown()) {
             if (title !== tip._config.title) {
-                tip._config.title = title
+                tip._config.title = title;
+            }
+
+            if (showResult(el)) {
+                tip.show();
+            }
+        }
+    }
+}
+
+const showResult = el => {
+    let ret = false;
+    const form = el.closest('form');
+    if (form) {
+        const show = form.getAttribute("data-bb-invalid-result");
+        if (show === "true") {
+            ret = true;
+        }
+        else {
+            const shown = form.getAttribute("data-bb-invalid-shown");
+            if (shown !== "true") {
+                ret = true;
+                form.setAttribute("data-bb-invalid-shown", "true");
             }
-            tip.show()
         }
     }
+    return ret;
 }
 
 export function dispose(id) {

diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -317,8 +317,9 @@ $bb-ip-cell-max-width: 30px;
 $bb-layout-header-height: 50px;
 $bb-layout-header-background: var(--bs-body-bg);
 $bb-layout-header-color: var(--bs-body-color);
-$bb-layout-headerbar-background: var(--bs-body-bg);
-$bb-layout-headerbar-border-color: var(--bs-body-color);
+$bb-layout-headerbar-background: var(--bb-header-bg);
+$bb-layout-headerbar-border-color: var(--bs-border-color);
+$bb-layout-headerbar-padding: 4px 12px;
 $bb-layout-footer-background: var(--bs-body-bg);
 $bb-layout-footer-color: var(--bs-body-color);
 $bb-layout-footer-height: 40px;

diff --git a/test/UnitTest/Components/ValidateFormTest.cs b/test/UnitTest/Components/ValidateFormTest.cs
@@ -3,7 +3,6 @@
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
 using Microsoft.AspNetCore.Components.Forms;
-using Microsoft.Extensions.Localization;
 using Microsoft.Extensions.Options;
 using System.Collections.Concurrent;
 using System.ComponentModel.DataAnnotations;
@@ -597,7 +596,8 @@ public async Task IValidateCollection_Ok()
         var form = cut.Find("form");
         await cut.InvokeAsync(() => form.Submit());
         var input = cut.FindComponent<MockInput<string>>();
-        var input2 = cut.FindComponents<MockInput<string>>().Last();
+        var all = cut.FindComponents<MockInput<string>>();
+        var input2 = all[all.Count - 1];
         Assert.Equal("Telephone1 and Telephone2 can not be the same", input.Instance.GetErrorMessage());
         Assert.Equal("Telephone1 and Telephone2 can not be the same", input2.Instance.GetErrorMessage());
 
@@ -610,7 +610,8 @@ public async Task IValidateCollection_Ok()
         message = input2.Instance.GetErrorMessage();
         Assert.Null(message);
 
-        var inputEl2 = cut.FindAll("input").Last();
+        var allInputs = cut.FindAll("input");
+        var inputEl2 = allInputs[all.Count - 1];
         await cut.InvokeAsync(() => inputEl2.Change("1234"));
         message = input2.Instance.GetErrorMessage();
         Assert.Equal("Telephone1 and Telephone2 can not be the same", message);
@@ -619,6 +620,28 @@ public async Task IValidateCollection_Ok()
         Assert.Equal("Telephone1 and Telephone2 can not be the same", message);
     }
 
+    [Fact]
+    public void ShowAllInvalidResult_Ok()
+    {
+        var model = new Foo();
+        var cut = Context.RenderComponent<ValidateForm>(pb =>
+        {
+            pb.Add(a => a.Model, model);
+            pb.AddChildContent<BootstrapInput<string>>(pb =>
+            {
+                pb.Add(a => a.Value, model.Name);
+                pb.Add(a => a.ValueExpression, Utility.GenerateValueExpression(model, "Name", typeof(string)));
+            });
+        });
+        cut.DoesNotContain("data-bb-invalid-result");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.ShowAllInvalidResult, true);
+        });
+        cut.Contains("data-bb-invalid-result");
+    }
+
     private class HasServiceAttribute : ValidationAttribute
     {
         public const string Success = "Has Service";