Add Precision parameter to BitNumberField (#10244)

src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/NumberField/BitNumberFieldTests.cs

@@ -641,6 +641,7 @@ public void BitNumberFieldEnterKeyDownTest(double defaultValue, string min, stri
             parameters.Add(p => p.DefaultValue, defaultValue);
             parameters.Add(p => p.Max, max);
             parameters.Add(p => p.Min, min);
+            parameters.Add(p => p.Precision, 2);
         });
 
         var input = component.Find("input");

src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor.cs

@@ -9,6 +9,7 @@ namespace Bit.BlazorUI;
 /// </summary>
 public partial class BitNumberField<[DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)] TValue> : BitTextInputBase<TValue>
 {
+    private int _precision;
     private bool _hasFocus;
     private TValue _min = default!;
     private TValue _max = default!;
@@ -212,6 +213,13 @@ public BitNumberField()
     /// </summary>
     [Parameter] public string? Placeholder { get; set; }
 
+    /// <summary>
+    /// How many decimal places the value should be rounded to.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetPrecision))]
+    public int? Precision { get; set; }
+
     /// <summary>
     /// Prefix displayed before the numeric field contents. This is not included in the value.
     /// Ensure a descriptive label is present to assist screen readers, as the value does not include the prefix.
@@ -283,11 +291,15 @@ protected override void RegisterCssStyles()
 
     protected override async Task OnInitializedAsync()
     {
+        OnValueChanged += HandleOnValueChanged;
+
         if (ValueHasBeenSet is false && DefaultValue is not null)
         {
             Value = DefaultValue;
         }
 
+        NormalizeValue();
+
         await base.OnInitializedAsync();
     }
 
@@ -302,6 +314,8 @@ protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(fa
         {
             result = CheckMinAndMax(result);
 
+            result = Normalize(result);
+
             parsingErrorMessage = null;
             return true;
         }
@@ -608,12 +622,76 @@ private void OnSetStep()
         }
     }
 
+    private void OnSetPrecision()
+    {
+        _precision = Precision is not null ? Precision.Value : CalculatePrecision();
+    }
+
+    private TValue Normalize(TValue value)
+    {
+        if (value is double doubleValue)
+        {
+            return (TValue)Convert.ChangeType(Math.Round(doubleValue, _precision), typeof(TValue));
+        }
+        else if (value is float floatValue)
+        {
+            return (TValue)Convert.ChangeType(Math.Round(floatValue, _precision), typeof(TValue));
+        }
+        else if (value is decimal decimalValue)
+        {
+            return (TValue)Convert.ChangeType(Math.Round(decimalValue, _precision), typeof(TValue));
+        }
+
+        return value;
+    }
+
+    private int CalculatePrecision()
+    {
+        var step = Step ?? _step?.ToString() ?? "1";
+        var regex = new Regex(@"[1-9]([0]+$)|\.([0-9]*)");
+        if (regex.IsMatch(step) is false) return 0;
+
+        var matches = regex.Matches(step);
+        if (matches.Count == 0) return 0;
+
+        var groups = matches[0].Groups;
+        if (groups[1] != null && groups[1].Length != 0)
+        {
+            return -groups[1].Length;
+        }
+
+        if (groups[2] != null && groups[2].Length != 0)
+        {
+            return groups[2].Length;
+        }
+
+        return 0;
+    }
+
+    private void NormalizeValue()
+    {
+        if (Value is null) return;
+
+        var val = Normalize(Value);
+
+        if (EqualityComparer<TValue>.Default.Equals(val, Value)) return;
+
+        Value = val;
+    }
+
+    private void HandleOnValueChanged(object? sender, EventArgs args)
+    {
+        NormalizeValue();
+    }
+
 
 
     protected override async ValueTask DisposeAsync(bool disposing)
     {
         if (IsDisposed || disposing is false) return;
 
+        OnValueChanged -= HandleOnValueChanged;
+
         _continuousChangeValueCts?.Dispose();
 
         await base.DisposeAsync(disposing);

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor

@@ -142,7 +142,15 @@
         </div>
     </DemoSection>
 
-    <DemoSection Title="HideInput" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+    <DemoSection Title="Precision" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+        <div>Specifies how many decimal places the value is rounded to.</div>
+        <br />
+        <div class="example-box">
+            <BitNumberField Precision="2" @bind-Value="precisionInputValue" Label="Rounding to 2 Decimal Places" />
+        </div>
+    </DemoSection>
+
+    <DemoSection Title="HideInput" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <div>Demonstrates hiding the input field in BitNumberField while still allowing value changes.</div>
         <br />
         <div class="example-box">
@@ -155,7 +163,7 @@
         </div>
     </DemoSection>
 
-    <DemoSection Title="Events" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <DemoSection Title="Events" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
         <div>Handle events in BitNumberField, including increment, decrement, and change events.</div>
         <br />
         <div class="example-box">
@@ -170,7 +178,7 @@
         </div>
     </DemoSection>
 
-    <DemoSection Title="Validation" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <DemoSection Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
         <div>Demonstrates validation for BitNumberField within a form, including required fields and custom validation messages.</div>
         <br />
         <div class="example-box">
@@ -192,7 +200,7 @@
         </div>
     </DemoSection>
 
-    <DemoSection Title="Style & Class" RazorCode="@example11RazorCode" Id="example11">
+    <DemoSection Title="Style & Class" RazorCode="@example12RazorCode" Id="example12">
         <div>Explores styling and class customization for BitNumberField, including component styles, custom classes, and detailed style options.</div>
         <br /><br />
         <div class="example-box">
@@ -223,7 +231,7 @@
         </div>
     </DemoSection>
 
-    <DemoSection Title="RTL" RazorCode="@example12RazorCode" Id="example12">
+    <DemoSection Title="RTL" RazorCode="@example13RazorCode" Id="example13">
         <div>Use BitNumberField in right-to-left (RTL).</div>
         <br />
         <div dir="rtl">

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor.cs

@@ -229,6 +229,13 @@ public partial class BitNumberFieldDemo
             Description = "Input placeholder text.",
         },
         new()
+        {
+            Name = "Precision",
+            Type = "int?",
+            DefaultValue = "null",
+            Description = "How many decimal places the value should be rounded to.",
+        },
+        new()
         {
             Name = "Prefix",
             Type = "string?",
@@ -484,6 +491,8 @@ public partial class BitNumberFieldDemo
 
     private int hideInputValue;
 
+    private double precisionInputValue = 3.1415;
+
     private string SuccessMessage = string.Empty;
     private BitNumberFieldValidationModel validationModel = new();
 

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumberField/BitNumberFieldDemo.razor.samples.cs

@@ -92,14 +92,19 @@ public partial class BitNumberFieldDemo
 private int minMaxValue;";
 
     private readonly string example8RazorCode = @"
+<BitNumberField Precision=""2"" @bind-Value=""precisionInputValue"" Label=""Rounding to 2 Decimal Places"" />";
+    private readonly string example8CsharpCode = @"
+    private double precisionInputValue = 3.1415;";
+
+    private readonly string example9RazorCode = @"
 <BitNumberField HideInput
                 @bind-Value=""hideInputValue""
                 Mode=""BitSpinButtonMode.Inline""
                 Label=""@hideInputValue.ToString()"" />";
-    private readonly string example8CsharpCode = @"
+    private readonly string example9CsharpCode = @"
 private int hideInputValue;";
 
-    private readonly string example9RazorCode = @"
+    private readonly string example10RazorCode = @"
 <BitNumberField Label=""OnIncrement & OnDecrement"" ShowButtons=""true""
                 OnIncrement=""(double v) => onIncrementCounter++""
                 OnDecrement=""(double v) => onDecrementCounter++"" />
@@ -108,12 +113,12 @@ public partial class BitNumberFieldDemo
 
 <BitNumberField Label=""OnChange"" OnChange=""(double v) => onChangeCounter++"" />
 <div>OnChange Counter: @onChangeCounter</div>";
-    private readonly string example9CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private int onIncrementCounter;
 private int onDecrementCounter;
 private int onChangeCounter;";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 <EditForm Model=""@validationModel"">
     <DataAnnotationsValidator />
 
@@ -122,7 +127,7 @@ public partial class BitNumberFieldDemo
     <br />
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
 </EditForm>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 public class BitNumberFieldValidationModel
 {
     [Required(ErrorMessage = ""Enter an age"")]
@@ -132,7 +137,7 @@ public class BitNumberFieldValidationModel
 
 private BitNumberFieldValidationModel validationModel = new();";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example12RazorCode = @"
 <style>
     .custom-class {
         overflow: hidden;
@@ -228,7 +233,7 @@ public class BitNumberFieldValidationModel
                                  Input = ""custom-input"",
                                  Label = $""custom-label{(classesValue is null ? string.Empty : "" custom-label-top"")}"" })"" />";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example13RazorCode = @"
 <CascadingValue Value=""BitDir.Rtl"">
 
     <BitNumberField Label=""برچسب در بالا"" TValue=""int"" ShowButtons />