diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 496aa1ad0db..5d1f960acf4 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@ - 8.9.2-beta12 + 8.9.2 diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.scss b/src/BootstrapBlazor/Components/Layout/Layout.razor.scss index 3200ff5540c..b7109611b14 100644 --- 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 index 97733b89fd4..499e7a7fd27 100644 --- a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor +++ b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor @@ -5,7 +5,8 @@ @if (Model != null) { - + @ChildContent diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs index 316fb4ba464..341bb93042f 100644 --- 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? OnFieldValueChanged { get; set; } + /// + /// 获得/设置 是否显示所有验证失败字段的提示信息 默认 false 仅显示第一个验证失败字段的提示信息 + /// + [Parameter] + public bool ShowAllInvalidResult { get; set; } + /// /// 获得/设置 是否验证所有字段 默认 false /// @@ -113,6 +119,8 @@ public partial class ValidateForm /// internal List InvalidMemberNames { get; } = []; + private string? ShowAllInvalidResultString => ShowAllInvalidResult ? "true" : null; + /// /// OnParametersSet 方法 /// diff --git a/src/BootstrapBlazor/wwwroot/modules/validate.js b/src/BootstrapBlazor/wwwroot/modules/validate.js index 49c6d81c098..887034bdfb4 100644 --- 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 index 62878c44eb7..dbb21477eaf 100644 --- 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 index ccdbccb5e11..5ff75fbbbef 100644 --- 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>(); - var input2 = cut.FindComponents>().Last(); + var all = cut.FindComponents>(); + 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(pb => + { + pb.Add(a => a.Model, model); + pb.AddChildContent>(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";