🆕 feat(Form): add the ValidateOn parameter to support setting the val…

…idation timing

src/Masa.Blazor/Components/Form/FormContext.cs

@@ -43,20 +43,13 @@ public FormContext(EditContext editContext, MForm form)
     /// <summary>
     /// parse form validation result,if parse failed throw exception
     /// </summary>
-    /// <param name="validationResult">
-    /// validation result
-    /// see details https://blazor.masastack.com/components/forms
-    /// </param>
+    /// <param name="validationResult"></param>
     public void ParseFormValidation(string validationResult) => Form.ParseFormValidation(validationResult);
 
     /// <summary>
     /// parse form validation result,if parse failed return false
     /// </summary>
-    /// <param name="validationResult">
-    /// validation result
-    /// see details https://blazor.masastack.com/components/forms
-    /// </param>
-    /// <returns></returns>
+    /// <param name="validationResult"></param>
     public bool TryParseFormValidation(string validationResult) => Form.TryParseFormValidation(validationResult);
 
     public void ParseFormValidation(IEnumerable<ValidationResult> validationResults) =>

src/Masa.Blazor/Components/Form/MForm.razor.cs

@@ -36,6 +36,8 @@ public partial class MForm : MasaComponentBase
     [MasaApiParameter(true, ReleasedOn = "v1.7.0")]
     public bool AutoLabel { get; set; } = true;
 
+    [Parameter] public ValidateOn ValidateOn { get; set; } = ValidateOn.Input;
+
     internal ConcurrentDictionary<string, string> AutoLabelMap { get; } = new();
 
     private static readonly ConcurrentDictionary<Type, PropertyInfo[]> s_modelPropertiesMap = new();
@@ -52,7 +54,7 @@ public partial class MForm : MasaComponentBase
 
     /// <summary>
     /// The type of property attribute used to generate the label,
-    /// the default value is same as <see cref="FFormAutoLabelOptionsAttributeType"/>.
+    /// the default value is same as <see cref="AutoLabelOptions.AttributeType"/>.
     /// </summary>
     internal Type? LabelAttributeType { get; set; } = typeof(DisplayNameAttribute);
 
@@ -221,10 +223,7 @@ public bool Validate(FieldIdentifier fieldIdentifier)
     /// <summary>
     /// parse form validation result,if parse faield throw exception
     /// </summary>
-    /// <param name="validationResult">
-    /// validation result
-    /// see deatils https://blazor.masastack.com/components/forms
-    /// </param>
+    /// <param name="validationResult"></param>
     [MasaApiPublicMethod]
     public void ParseFormValidation(string validationResult)
     {
@@ -235,11 +234,7 @@ public void ParseFormValidation(string validationResult)
     /// <summary>
     /// parse form validation result,if parse failed return false
     /// </summary>
-    /// <param name="validationResult">
-    /// validation result
-    /// see deatils https://blazor.masastack.com/components/forms
-    /// </param>
-    /// <returns></returns>
+    /// <param name="validationResult"></param>
     [MasaApiPublicMethod]
     public bool TryParseFormValidation(string validationResult)
     {

src/Masa.Blazor/Components/Form/Validation/ValidateOn.cs

@@ -0,0 +1,10 @@
+namespace Masa.Blazor;
+
+public enum ValidateOn
+{
+    Input,
+
+    Blur,
+
+    Submit
+}

src/Masa.Blazor/Components/Input/MInput.Validatable.cs

@@ -8,6 +8,10 @@ public partial class MInput<TValue> : IInputJsCallbacks, IValidatable
 {
     [Inject] private InputJSModule InputJSModule { get; set; } = null!;
 
+    [CascadingParameter] public MForm? Form { get; set; }
+
+    [CascadingParameter] public EditContext? EditContext { get; set; }
+
     [Parameter] public bool Disabled { get; set; }
 
     [Parameter] public bool Readonly { get; set; }
@@ -25,10 +29,6 @@ public virtual TValue? Value
 
     [Parameter] public Expression<Func<TValue>>? ValueExpression { get; set; }
 
-    [CascadingParameter] public MForm? Form { get; set; }
-
-    [CascadingParameter] public EditContext? EditContext { get; set; }
-
     [Parameter] public bool Error { get; set; }
 
     [Parameter] public int ErrorCount { get; set; } = 1;
@@ -145,6 +145,19 @@ public List<string> ValidationTarget
 
     public virtual bool IsReadonly => Readonly || Form is { Readonly: true };
 
+    public ValidateOn ValidateOn
+    {
+        get
+        {
+            if (IsDirtyParameter(nameof(ValidateOnBlur)))
+            {
+                return ValidateOnBlur ? ValidateOn.Blur : ValidateOn.Input;
+            }
+
+            return Form?.ValidateOn ?? ValidateOn.Input;
+        }
+    }
+
     public virtual bool ShouldValidate
     {
         get
@@ -154,9 +167,9 @@ public virtual bool ShouldValidate
                 return true;
             }
 
-            if (ValidateOnBlur)
+            if (ValidateOn == ValidateOn.Blur)
             {
-                return HasFocused && !IsFocused;
+                return HasFocused;
             }
 
             return HasInput || HasFocused;
@@ -210,7 +223,7 @@ public virtual async Task HandleOnInputAsync(ChangeEventArgs args)
             }
         }
 
-        if (!ValidateOnBlur)
+        if (ValidateOn == ValidateOn.Input)
         {
             //We removed NextTick since it doesn't trigger render
             //and validate may not be called
@@ -263,7 +276,8 @@ private async void IsFocusedChangeCallback(bool val)
         if (!val && !IsDisabled)
         {
             HasFocused = true;
-            if (ValidateOnBlur)
+
+            if (ValidateOn == ValidateOn.Blur)
             {
                 InternalValidate();
             }
@@ -330,16 +344,9 @@ protected virtual void OnInternalValueChange(TValue? val)
         // mark it with hasInput
         HasInput = true;
 
-        if (ValidateOnlyInFocusedState)
-        {
-            if (HasFocused)
-            {
-                NextTickIf(InternalValidate, () => !ValidateOnBlur);
-            }
-        }
-        else
+        if (ValidateOn == ValidateOn.Input)
         {
-            NextTickIf(InternalValidate, () => !ValidateOnBlur);
+            NextTick(InternalValidate);
         }
 
         if (_internalValueChangingFromOnValueChanged)
@@ -353,8 +360,8 @@ protected virtual void OnInternalValueChange(TValue? val)
                 _ = SetValueByJsInterop(Formatter(val));
             }
 
-                _ = ValueChanged.InvokeAsync(val.TryDeepClone());
-            }
+            _ = ValueChanged.InvokeAsync(val.TryDeepClone());
+        }
     }
 
     protected virtual void SubscribeValidationStateChanged()

src/Masa.Blazor/Components/Input/MInput.razor

@@ -150,7 +150,7 @@
         @ChildContent
     };
 
-    protected virtual RenderFragment GenLabel(bool preventDefaultOnClick = false) => __builder =>
+    protected virtual RenderFragment GenLabel(bool preventDefaultOnClick = false, bool stopPropagationOnClick = false) => __builder =>
     {
         if (HasLabel)
         {
@@ -160,7 +160,8 @@
                     Focused="@HasState"
                     For="@Id"
                     Light="@Light"
-                    @onclick:preventDefault="@preventDefaultOnClick">
+                    __internal_stopPropagation_onclick="@stopPropagationOnClick"
+                    __internal_preventDefault_onclick="@preventDefaultOnClick">
                 @RenderFragments.RenderFragmentOrText(LabelContent, ComputedLabel, wrapperTag: null)
             </MLabel>
         }

src/Masa.Blazor/Components/Radio/MRadio.razor

@@ -1,16 +1,12 @@
 @namespace Masa.Blazor
 @inherits MasaComponentBase
-@using StyleBuilder = Masa.Blazor.Core.StyleBuilder
 @typeparam TValue
 
 <CascadingValue Value="IsDark" Name="IsDark">
     <div class="@GetClass()"
          style="@GetStyle()"
-         id="@Id"
-         @ref="Ref"
-         @onclick="@HandleClick"
-         @attributes="@Attributes">
-        <div class="@_selectionControls.Element("input")">
+         @ref="Ref">
+        <div class="@_selectionControls.Element("input").AppendClasses(CssClassUtils.GetTextColor(RippleState))" ripple>
 
             <MIcon Icon="@(IsActive ? OnIcon : OffIcon)"
                    Dense="@(RadioGroup?.Dense is true)"
@@ -23,21 +19,17 @@
                    checked="@IsActive"
                    value="@Value"
                    @onblur="OnBlur"
-                   @onchange="OnChange"
+                   @onchange="@HandleOnChange"
                    @onfocus="OnFocus"
                    @onkeydown="OnKeyDown"
-                   @onclick:stopPropagation/>
-
-            @RenderFragments.GenRipple(
-                Ripple,
-                GetClass(_selectionControls.Element("ripple").Name, CssClassUtils.GetTextColor(RippleState)),
-                StyleBuilder.Create().AddTextColor(RippleState).Build())
+                   @onclick:stopPropagation
+                   @attributes="@Attributes"/>
         </div>
 
         <MLabel For="@Id"
                 Color="@ValidationState"
                 Focused="@HasState"
-                @onclick:preventDefault>
+                @onclick:stopPropagation>
             @RenderFragments.RenderFragmentOrText(LabelContent, Label, wrapperTag: null)
         </MLabel>
     </div>

src/Masa.Blazor/Components/Radio/MRadio.razor.cs

@@ -138,7 +138,7 @@ protected bool IsDark
 
         protected bool IsReadonly => Readonly || RadioGroup?.IsReadonly is true;
 
-        private async Task HandleClick(MouseEventArgs args)
+        private async Task HandleOnChange()
         {
             if (IsDisabled || IsReadonly || IsActive)
             {

src/Masa.Blazor/Components/Radio/MRadioGroup.razor

@@ -19,7 +19,7 @@
     };
 
 
-    protected override RenderFragment GenLabel(bool preventDefaultOnClick = false) => __builder =>
+    protected override RenderFragment GenLabel(bool preventDefaultOnClick = false, bool stopPropagationOnClick = false) => __builder =>
     {
         if (HasLabel)
         {
@@ -30,7 +30,8 @@
                     Light="@Light"
                     Id="@Id"
                     Tag="legend"
-                    @onclick:preventDefault="@preventDefaultOnClick">
+                    __internal_stopPropagation_onclick="@stopPropagationOnClick"
+                    __internal_preventDefault_onclick="@preventDefaultOnClick">
                 @RenderFragments.RenderFragmentOrText(LabelContent, ComputedLabel, wrapperTag: null)
             </MLabel>
         }

src/Masa.Blazor/Components/TextField/MTextField.razor

@@ -21,7 +21,7 @@
         @RenderFragments.GenProgress(Loading, Color, LoaderHeight, ProgressContent)
     };
 
-    protected override RenderFragment GenLabel(bool preventDefaultOnClick = false) => __builder =>
+    protected override RenderFragment GenLabel(bool preventDefaultOnClick = false, bool stopPropagationOnClick = false) => __builder =>
     {
         if (ShowLabel)
         {
@@ -38,7 +38,8 @@
                     Light="@Light"
                     Value="@LabelValue"
                     @ref="@LabelReference"
-                    @onclick:preventDefault="@preventDefaultOnClick">
+                    __internal_stopPropagation_onclick="@stopPropagationOnClick"
+                    __internal_preventDefault_onclick="@preventDefaultOnClick">
                 @RenderFragments.RenderFragmentOrText(LabelContent, ComputedLabel, wrapperTag: null)
             </MLabel>
         }

src/Masa.Blazor/Components/TextField/MTextField.razor.cs

@@ -181,7 +181,7 @@ public virtual bool Outlined
 
     public bool HasCounter => Counter != false && Counter != null;
 
-    public override string ComputedColor
+    public override string? ComputedColor
     {
         get
         {
@@ -618,7 +618,7 @@ private void UpdateValue(string? originValue, bool succeeded, TValue? convertedV
             }
         }
 
-        if (!ValidateOnBlur)
+        if (ValidateOn == ValidateOn.Input)
         {
             //We removed NextTick since it doesn't trigger render
             //and validate may not be called

src/Masa.Blazor/Mixins/Selectable/MSelectable.razor

@@ -13,7 +13,7 @@
         <div class="@ControlBlock.Element("input")" ripple>
             @GenSelection()
         </div>
-        @GenLabel(true)
+        @GenLabel(false, true)
     };
 
     protected virtual RenderFragment? GenSelection() => default;

src/Masa.Blazor/Mixins/Selectable/MSelectable.razor.cs

@@ -18,7 +18,7 @@ public partial class MSelectable<TValue> : MInput<TValue> where TValue : notnull
 
     public override bool HasColor => IsActive;
 
-    public override string ComputedColor => Color ?? (IsDark && !AppIsDark ? "white" : "primary");
+    public override string? ComputedColor => Color ?? (IsDark && !AppIsDark ? "white" : "primary");
 
     private bool IsCustomValue => IsDirtyParameter(nameof(TrueValue)) && IsDirtyParameter(nameof(FalseValue));
 

src/Masa.Blazor/wwwroot/css/masa-blazor.css

@@ -22918,10 +22918,6 @@ html.overflow-y-hidden {
 .m-input--checkbox.m-input--dense {
     margin-top: 4px;
 }
-.m-input--selection-controls {
-    margin-top: 16px;
-    padding-top: 4px;
-}
 .m-input--selection-controls > .m-input__append-outer,
 .m-input--selection-controls > .m-input__prepend-outer {
     margin-top: 0;
@@ -22940,7 +22936,6 @@ html.overflow-y-hidden {
     display: inline-flex;
     flex: 1 1 auto;
     height: auto;
-    margin-inline-start: 10px;
 }
 .m-input--selection-controls__input {
     color: inherit;
@@ -27286,9 +27281,6 @@ html.overflow-y-hidden {
 .m-input--radio-group--column legend {
     padding-bottom: 8px;
 }
-.m-input--radio-group--column .m-radio:not(:last-child):not(:only-child) {
-    margin-bottom: 8px;
-}
 .m-input--radio-group--column .m-input--radio-group__input {
     flex-direction: column;
 }

src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css

@@ -1584,6 +1584,10 @@ html.m-overlay-scroll-blocked {
 
 /* switch */
 
+.m-input--is-focused .m-input--selection-controls__input::before {
+    opacity: 0.12;
+}
+
 .m-input--switch--inset .m-input--switch__track {
     width: 48px;
 }
@@ -1688,6 +1692,22 @@ html.m-overlay-scroll-blocked {
     color: #fff
 }
 
+.m-input--switch .m-input--selection-controls__wrapper {
+    margin-inline-end: 10px;
+}
+
+.m-input--dense.m-input--switch .m-input--selection-controls__wrapper {
+    margin-inline-end: 6px;
+}
+
+.m-input--switch--inset .m-input--selection-controls__wrapper {
+    margin-inline-end: 6px;
+}
+
+.m-input--dense.m-input--switch--inset .m-input--selection-controls__wrapper {
+    margin-inline-end: 2px;
+}
+
 /* slider */
 
 .m-slider__track-background {