feat(components): add numbox component (#54)

* refactor(components): remove potentially wrong input types

* feat(textbox): add a base component for input fields based on the textbox; derive from this component

* feat(numbox): initial implementation of numbox

* fix(inputs): set an input type properly

* chore(textbox): remove to fix git

* chore(textbox): add back

* fix(inputs): call base `OnParametersSet` method

* test(numbox): add tests

* test(textbox): fix git

* test(textbox): fix git

* chore(numbox): mention source

* chore(textbox): override `TryParseValueFromString`

src/LumexUI/Common/Enums/InputType.cs

@@ -35,12 +35,6 @@ public enum InputType
     [Description( "hidden" )]
     Hidden,
 
-    /// <summary>
-    /// A number input field.
-    /// </summary>
-    [Description( "number" )]
-    Number,
-
     /// <summary>
     /// A search input field.
     /// </summary>
@@ -63,35 +57,5 @@ public enum InputType
     /// A color input field.
     /// </summary>
     [Description( "color" )]
-    Color,
-
-    /// <summary>
-    /// A date input field.
-    /// </summary>
-    [Description( "date" )]
-    Date,
-
-    /// <summary>
-    /// A date-time input field (local time).
-    /// </summary>
-    [Description( "datetime-local" )]
-    DateTimeLocal,
-
-    /// <summary>
-    /// A month input field.
-    /// </summary>
-    [Description( "month" )]
-    Month,
-
-    /// <summary>
-    /// A time input field.
-    /// </summary>
-    [Description( "time" )]
-    Time,
-
-    /// <summary>
-    /// A week input field.
-    /// </summary>
-    [Description( "week" )]
-    Week
+    Color
 }

src/LumexUI/Components/TextBox/TextBoxSlots.cs → src/LumexUI/Components/Bases/InputFieldSlots.cs

@@ -9,7 +9,7 @@
 namespace LumexUI;
 
 [ExcludeFromCodeCoverage]
-public class TextBoxSlots : ISlot
+public class InputFieldSlots : ISlot
 {
 	public string? Root { get; set; }
 	public string? Label { get; set; }

src/LumexUI/Components/Bases/LumexBooleanInputBase.cs

@@ -33,6 +33,13 @@ protected override bool TryParseValueFromString( string? value, [MaybeNullWhen(
             $"Bind to the '{nameof( CurrentValue )}' property, not '{nameof( CurrentValueAsString )}'." );
     }
 
+    /// <inheritdoc />
+    protected override ValueTask SetValidationMessageAsync( bool parsingFailed )
+    {
+        // This component doesn't have a validation message by default.
+        return ValueTask.CompletedTask;
+    }
+
     /// <summary>
     /// Handles the change event asynchronously.
     /// Derived classes can override this to specify custom behavior when the input's value changes.

src/LumexUI/Components/Bases/LumexDebouncedInputBase.cs

@@ -36,7 +36,7 @@ public LumexDebouncedInputBase()
     /// <returns>A <see cref="Task"/> representing the asynchronous value input operation.</returns>
     protected virtual Task OnInputAsync( ChangeEventArgs args )
     {
-        if( DebounceDelay != 0 )
+        if( DebounceDelay > 0 )
         {
             return _debouncer.DebounceAsync( SetCurrentValueAsStringAsync, (string?)args.Value, DebounceDelay );
         }

src/LumexUI/Components/Bases/LumexInputBase.cs

@@ -2,8 +2,8 @@
 // LumexUI licenses this file to you under the MIT license
 // See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
 
-// Some of the code was taken from
-// https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/InputBase.cs
+// Portions of the code in this file are based on code from Blazor.
+// See https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/InputBase.cs
 
 using System.Diagnostics.CodeAnalysis;
 using System.Linq.Expressions;
@@ -16,7 +16,7 @@
 namespace LumexUI;
 
 /// <summary>
-/// Represents a base class for input components.
+/// Represents a base class for form input components.
 /// </summary>
 /// <typeparam name="TValue">The type of the input value.</typeparam>
 public abstract class LumexInputBase<TValue> : LumexComponentBase
@@ -96,6 +96,9 @@ protected TValue? CurrentValue
     /// </summary>
     protected string? CurrentValueAsString
     {
+        // InputBase-derived components can hold invalid states (e.g., an InputNumber being blank even when bound
+        // to an int value). So, if parsing fails, we keep the rejected string in the UI even though it doesn't
+        // match what's on the .NET model. This avoids interfering with typing.
         get => _parsingFailed ? _incomingValueBeforeParsing : FormatValueAsString( CurrentValue );
         set => _ = SetCurrentValueAsStringAsync( value );
     }
@@ -169,7 +172,7 @@ protected internal async Task SetCurrentValueAsStringAsync( string? value )
             // Then all subclasses get nullable support almost automatically (they just have to
             // not reject Nullable<T> based on the type itself).
             _parsingFailed = false;
-            CurrentValue = default!;
+            CurrentValue = default;
         }
         else if( TryParseValueFromString( value, out var parsedValue ) )
         {
@@ -200,10 +203,12 @@ protected virtual async Task OnFocusAsync( FocusEventArgs args )
     /// </summary>
     /// <param name="args">The blur event arguments.</param>
     /// <returns>A <see cref="Task"/> representing the asynchronous blur operation.</returns>
-    protected virtual Task OnBlurAsync( FocusEventArgs args )
+    protected virtual async Task OnBlurAsync( FocusEventArgs args )
     {
         Focused = false;
-        return OnBlur.InvokeAsync( args );
+
+        await SetValidationMessageAsync( _parsingFailed );
+        await OnBlur.InvokeAsync( args );
     }
 
     /// <summary>
@@ -221,5 +226,12 @@ protected virtual Task OnBlurAsync( FocusEventArgs args )
     /// <param name="value">The string value to be parsed.</param>
     /// <param name="result">An instance of <typeparamref name="TValue"/>.</param>
     /// <returns><see langword="true"/> if the value could be parsed; otherwise <see langword="false"/>.</returns>
-    protected abstract bool TryParseValueFromString( string? value, [MaybeNullWhen( false )] out TValue? result );
+    protected abstract bool TryParseValueFromString( string? value, [MaybeNullWhen( false )] out TValue result );
+
+    /// <summary>
+    /// Sets the validation message asynchronously based on the parsing result.
+    /// </summary>
+    /// <param name="parsingFailed">A boolean value indicating whether the parsing has failed.</param>
+    /// <returns>A <see cref="ValueTask"/> representing the asynchronous operation.</returns>
+    protected abstract ValueTask SetValidationMessageAsync( bool parsingFailed );
 }

src/LumexUI/Components/TextBox/LumexTextBox.razor → src/LumexUI/Components/Bases/LumexInputFieldBase.razor

@@ -1,5 +1,6 @@
 @namespace LumexUI
-@inherits LumexDebouncedInputBase<string?>
+@inherits LumexDebouncedInputBase<TValue>
+@typeparam TValue
 
 <LumexComponent As="@As"
                 Class="@RootClass"
@@ -11,7 +12,7 @@
                 data-required="@Utils.GetDataAttributeValue( Required )"
                 data-focus="@Utils.GetDataAttributeValue( Focused )"
                 data-filled-focused="@Utils.GetDataAttributeValue( FilledOrFocused )"
-                data-hidden="@Utils.GetDataAttributeValue( Type is InputType.Hidden )">
+                data-hidden="@Utils.GetDataAttributeValue( _inputType is "hidden" )">
     @_renderMainWrapper
 </LumexComponent>
 
@@ -48,7 +49,7 @@
                  data-has-clear-button="@Utils.GetDataAttributeValue( ClearButtonVisible )">
                 @StartContent
 
-                <input type="@Type.ToDescription()"
+                <input type="@_inputType"
                        class="@InputClass"
                        value="@CurrentValueAsString"
                        placeholder="@Placeholder"
@@ -78,7 +79,7 @@
                           @onkeyup="@ClearAsync">
                         <LumexIcon Icon="@Icons.Rounded.Cancel"
                                    Size="@new("1em")"
-                                   Color="@ThemeColor.None" />
+                                   Color="@ThemeColor.Default" />
                     </span>
                 }
             </div>
@@ -93,10 +94,17 @@
         }
 
         <div class="@HelperWrapperClass" data-slot="helper-wrapper">
-            @if( Invalid && !string.IsNullOrEmpty( ErrorMessage ) )
+            @if( Invalid && ( !string.IsNullOrEmpty( ErrorMessage ) || !string.IsNullOrEmpty( ValidationMessage ) ) )
             {
                 <div class="@ErrorMessageClass" data-slot="error-message">
-                    @ErrorMessage
+                    @if( !string.IsNullOrEmpty( ErrorMessage ) )
+                    {
+                        @ErrorMessage
+                    }
+                    else
+                    {
+                        @ValidationMessage
+                    }
                 </div>
             }
             else if( !string.IsNullOrEmpty( Description ) )