Skip to content

Commit 703c8a6

Browse files
gvreddy04gvreddy04
authored
Number Input (#64)
The commit introduces a new, highly flexible `NumberInput` component for BlazorExpress.Bulma, supporting generic numeric types (`int`, `double`, `decimal`, etc.) and nullable variants. It adds extensive enhancements, including: - Generic type parameter `TValue` for versatile numeric input handling. - Improved documentation and updated demo files to showcase generic usage, binding, and validation. - HTML input type changed to `"number"` for better UX. - New properties for min/max constraints, step, culture, negative value allowance, and color/size/state customizations. - Enhanced event handling, validation, and JavaScript interop to restrict and validate input types. - UI and code refactors for clarity, consistency, and improved user feedback. - Detailed documentation updates with implementation instructions, examples, and new features. - Addition of a new `number-input.png` demo image.
1 parent 53aab63 commit 703c8a6

34 files changed

Lines changed: 1437 additions & 13 deletions

‎BlazorExpress.Bulma.Demo.RCL/Constants/DemoScreenshotSrcConstants.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ public class DemoScreenshotSrcConstants
2929
// Form
3030
public const string DateInput = DemoScreenshotSrcPrefix + "date-input.png";
3131
public const string EnumInput = DemoScreenshotSrcPrefix + "enum-input.png";
32+
public const string NumberInput = DemoScreenshotSrcPrefix + "number-input.png";
3233
public const string OTPInput = DemoScreenshotSrcPrefix + "otp-input.png";
3334
public const string TextInput = DemoScreenshotSrcPrefix + "text-input.png";
3435

‎BlazorExpress.Bulma.Demo.RCL/Layout/DemosMainLayout.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ private HashSet<LinkGroup> GetLinkGroups()
7878
Links = [
7979
new Link { Href = DemoRouteConstants.Demos_Form_DateInput_Documentation , Text = "Date Input" },
8080
new Link { Href = DemoRouteConstants.Demos_Form_EnumInput_Documentation , Text = "Enum Input" },
81+
new Link { Href = DemoRouteConstants.Demos_Form_NumberInput_Documentation , Text = "Number Input" },
8182
new Link { Href = DemoRouteConstants.Demos_Form_OTPInput_Documentation , Text = "OTP Input" },
8283
new Link { Href = DemoRouteConstants.Demos_Form_TextInput_Documentation , Text = "Text Input" },
8384
]

‎BlazorExpress.Bulma.Demo.RCL/Layout/DocsMainLayout.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ private HashSet<LinkGroup> GetLinkGroups()
9292
Links = [
9393
new Link { Href = DemoRouteConstants.Docs_Form_DateInput_Documentation , Text = "Date Input" },
9494
new Link { Href = DemoRouteConstants.Docs_Form_EnumInput_Documentation , Text = "Enum Input" },
95+
new Link { Href = DemoRouteConstants.Docs_Form_NumberInput_Documentation , Text = "Number Input" },
9596
new Link { Href = DemoRouteConstants.Docs_Form_OTPInput_Documentation , Text = "OTP Input" },
9697
new Link { Href = DemoRouteConstants.Docs_Form_TextInput_Documentation , Text = "Text Input" },
9798
]

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/DateInput/DateInput_Demo_04_Sizes.razor‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,4 @@
88
private DateOnly? value2 = null;
99
private DateOnly? value3 = null;
1010
private DateOnly? value4 = null;
11-
private DateOnly? value5 = null;
12-
private DateOnly? value6 = null;
1311
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/NumberInput/NumberInputDocumentation.razor‎

Lines changed: 290 additions & 0 deletions
Large diffs are not rendered by default.

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/NumberInput/NumberInput_Demo_01_How_it_works.razor‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<NumberInput TValue="int?" @bind-Value="enteredValue" />
2+
<div class="mb-3">Entered value: @enteredValue</div>
3+
4+
@code {
5+
private int? enteredValue = null;
6+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/NumberInput/NumberInput_Demo_02_GenericType.razor‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<div class="field">
2+
<label class="form-label">Enter int number</label>
3+
<NumberInput TValue="int" @bind-Value="value1" />
4+
<div>Entered value: @value1</div>
5+
</div>
6+
7+
<div class="field">
8+
<label class="form-label">Enter int? number</label>
9+
<NumberInput TValue="int?" @bind-Value="value2" />
10+
<div>Entered value: @(value2.HasValue? value2.Value.ToString() : "null")</div>
11+
</div>
12+
13+
<div class="field">
14+
<label class="form-label">Enter float number</label>
15+
<NumberInput TValue="float" @bind-Value="value3" />
16+
<div>Entered value: @value3</div>
17+
</div>
18+
19+
<div class="field">
20+
<label class="form-label">Enter float? number</label>
21+
22+
<NumberInput TValue="float?" @bind-Value="value4" />
23+
<div>Entered value: @(value4.HasValue? value4.Value.ToString() : "null")</div>
24+
</div>
25+
26+
<div class="field">
27+
<label class="form-label">Enter double number</label>
28+
29+
<NumberInput TValue="double" @bind-Value="value5" />
30+
<div>Entered value: @value5</div>
31+
</div>
32+
<div class="field">
33+
<label class="form-label">Enter double? number</label>
34+
35+
<NumberInput TValue="double?" @bind-Value="value6" />
36+
<div>Entered value: @(value6.HasValue? value6.Value.ToString() : "null")</div>
37+
</div>
38+
<div class="field">
39+
<label class="form-label">Enter decimal number</label>
40+
41+
<NumberInput TValue="decimal" @bind-Value="value7" />
42+
<div>Entered value: @value7</div>
43+
</div>
44+
<div class="field">
45+
<label class="form-label">Enter decimal? number</label>
46+
47+
<NumberInput TValue="decimal?" @bind-Value="value8" />
48+
<div>Entered value: @(value8.HasValue? value8.Value.ToString() : "null")</div>
49+
</div>
50+
51+
@code {
52+
private int value1;
53+
private int? value2;
54+
private float value3;
55+
private float? value4;
56+
private double value5;
57+
private double? value6;
58+
private decimal value7;
59+
private decimal? value8;
60+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/NumberInput/NumberInput_Demo_03_Placeholder.razor‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<NumberInput TValue="int?" @bind-Value="enteredValue" Placeholder="Enter a value" />
2+
<div>Entered value: @enteredValue</div>
3+
4+
@code {
5+
private int? enteredValue = null;
6+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/NumberInput/NumberInput_Demo_04_Colors.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<NumberInput Class="mb-3" Color="NumberInputColor.Link" TValue="int?" @bind-Value="enteredValue" Placeholder="Link number input" />
2+
<NumberInput Class="mb-3" Color="NumberInputColor.Primary" TValue="int?" @bind-Value="enteredValue" Placeholder="Primary number input" />
3+
<NumberInput Class="mb-3" Color="NumberInputColor.Info" TValue="int?" @bind-Value="enteredValue" Placeholder="Info number input" />
4+
<NumberInput Class="mb-3" Color="NumberInputColor.Success" TValue="int?" @bind-Value="enteredValue" Placeholder="Success number input" />
5+
<NumberInput Class="mb-3" Color="NumberInputColor.Warning" TValue="int?" @bind-Value="enteredValue" Placeholder="Warning number input" />
6+
<NumberInput Class="mb-3" Color="NumberInputColor.Danger" TValue="int?" @bind-Value="enteredValue" Placeholder="Danger number input" />
7+
8+
@code {
9+
private int? enteredValue = null;
10+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/NumberInput/NumberInput_Demo_05_Sizes.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<NumberInput Class="mb-3" Size="NumberInputSize.Small" TValue="int?" @bind-Value="enteredValue" Placeholder="Small number input" />
2+
<NumberInput Class="mb-3" Size="NumberInputSize.Normal" TValue="int?" @bind-Value="enteredValue" Placeholder="Normal number input" />
3+
<NumberInput Class="mb-3" Size="NumberInputSize.Medium" TValue="int?" @bind-Value="enteredValue" Placeholder="Medium number input" />
4+
<NumberInput Class="mb-3" Size="NumberInputSize.Large" TValue="int?" @bind-Value="enteredValue" Placeholder="Large number input" />
5+
6+
@code {
7+
private int? enteredValue = null;
8+
}

0 commit comments

Comments
 (0)