Skip to content

Commit e43035f

Browse files
gvreddy04gvreddy04
authored
EnumInput component (#22)
* EnumInput - New Component
1 parent b776b39 commit e43035f

25 files changed

Lines changed: 734 additions & 1 deletion

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ public static class RouteConstants
3434
public const string Docs_Form_CheckboxInput_Documentation = Docs_Form_Prefix + "/checkbox-input";
3535
public const string Docs_Form_CurrencyInput_Documentation = Docs_Form_Prefix + "/currency-input";
3636
public const string Docs_Form_DateInput_Documentation = Docs_Form_Prefix + "/date-input";
37+
public const string Docs_Form_EnumInput_Documentation = Docs_Form_Prefix + "/enum-input";
3738
public const string Docs_Form_NumberInput_Documentation = Docs_Form_Prefix + "/number-input";
3839
public const string Docs_Form_OTPInput_Documentation = Docs_Form_Prefix + "/otp-input";
3940
public const string Docs_Form_PasswordInput_Documentation = Docs_Form_Prefix + "/password-input";
@@ -112,6 +113,7 @@ public static class RouteConstants
112113
public const string Demos_Form_CheckboxInput_Documentation = Demos_Form_Prefix + "/checkbox-input";
113114
public const string Demos_Form_CurrencyInput_Documentation = Demos_Form_Prefix + "/currency-input";
114115
public const string Demos_Form_DateInput_Documentation = Demos_Form_Prefix + "/date-input";
116+
public const string Demos_Form_EnumInput_Documentation = Demos_Form_Prefix + "/enum-input";
115117
public const string Demos_Form_NumberInput_Documentation = Demos_Form_Prefix + "/number-input";
116118
public const string Demos_Form_OTPInput_Documentation = Demos_Form_Prefix + "/otp-input";
117119
public const string Demos_Form_PasswordInput_Documentation = Demos_Form_Prefix + "/password-input";

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ private HashSet<LinkGroup> GetLinkGroups()
8787
CssClass = "is-size-7 has-text-weight-bold has-text-primary",
8888
Links = [
8989
new Link { Href = RouteConstants.Demos_Form_DateInput_Documentation , Text = "Date Input" },
90+
new Link { Href = RouteConstants.Demos_Form_EnumInput_Documentation , Text = "Enum Input" },
9091
new Link { Href = RouteConstants.Demos_Form_OTPInput_Documentation , Text = "OTP Input" },
9192
new Link { Href = RouteConstants.Demos_Form_TextInput_Documentation , Text = "Text Input" },
9293
]

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ private HashSet<LinkGroup> GetLinkGroups()
7777
CssClass = "is-size-7 has-text-weight-bold has-text-primary",
7878
Links = [
7979
new Link { Href = RouteConstants.Docs_Form_DateInput_Documentation , Text = "Date Input" },
80+
new Link { Href = RouteConstants.Docs_Form_EnumInput_Documentation , Text = "Enum Input" },
8081
new Link { Href = RouteConstants.Docs_Form_OTPInput_Documentation , Text = "OTP Input" },
8182
new Link { Href = RouteConstants.Docs_Form_TextInput_Documentation , Text = "Text Input" },
8283
]

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/EnumInput/EnumInputDocumentation.razor‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
3+
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@RouteConstants.Docs_Form_EnumInput_Documentation" />
13+
14+
<Section Class="p-0" Size="HeadingSize.H3" Name="Example" PageUrl="@pageUrl" Link="example">
15+
<Demo Type="typeof(EnumInput_Demo_01_How_it_works)" Tabs="true" />
16+
</Section>
17+
18+
<Section Class="p-0" Size="HeadingSize.H3" Name="Colors" PageUrl="@pageUrl" Link="colors">
19+
<Block>
20+
You can use the <code>Color</code> parameter to set the color of the <code>EnumInput</code> component.
21+
The available colors are: <b>Link</b>, <b>Primary</b>, <b>Info</b>, <b>Success</b>, <b>Warning</b>, and <b>Danger</b>.
22+
</Block>
23+
<Demo Type="typeof(EnumInput_Demo_02_Colors)" Tabs="true" />
24+
</Section>
25+
26+
<Section Class="p-0" Size="HeadingSize.H3" Name="Sizes" PageUrl="@pageUrl" Link="Sizes">
27+
<Block>
28+
You can use the <code>Size</code> parameter to set the size of the <code>EnumInput</code> component.
29+
The available sizes are: <b>Small</b>, <b>Normal</b>, <b>Medium</b>, and <b>Large</b>.
30+
</Block>
31+
<Demo Type="typeof(EnumInput_Demo_03_Sizes)" Tabs="true" />
32+
</Section>
33+
34+
<Section Class="p-0" Size="HeadingSize.H3" Name="Styles" PageUrl="@pageUrl" Link="styles">
35+
<Block>
36+
You can create rounded <code>EnumInput</code> component by using the <code>IsRounded</code> parameter.
37+
In the example below, <code>IsRounded</code> parameter is set to <b>true</b>.
38+
</Block>
39+
<Demo Type="typeof(EnumInput_Demo_04_Styles)" Tabs="true" />
40+
</Section>
41+
42+
<Section Class="p-0" Size="HeadingSize.H3" Name="States" PageUrl="@pageUrl" Link="states">
43+
<Demo Type="typeof(EnumInput_Demo_05_States)" Tabs="true" />
44+
</Section>
45+
46+
<Section Class="p-0" Size="HeadingSize.H3" Name="Disabled" PageUrl="@pageUrl" Link="disabled">
47+
<Block>
48+
You can disable the <code>EnumInput</code> component by using the <code>Disabled</code> parameter.
49+
In the example below, <code>Disabled</code> parameter is set to <b>true</b>.
50+
</Block>
51+
<Demo Type="typeof(EnumInput_Demo_06_Disabled)" Tabs="true" />
52+
</Section>
53+
54+
<Section Class="p-0" Size="HeadingSize.H3" Name="Events" PageUrl="@pageUrl" Link="events">
55+
<Block>
56+
The <code>EnumInput</code> component has two events: <code>ValueChanged</code> and <code>TextChanged</code>.
57+
</Block>
58+
</Section>
59+
60+
<Section Class="p-0" Size="HeadingSize.H4" Name="ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
61+
<Block>
62+
The <code>ValueChanged</code> event is triggered when the value of the <code>EnumInput</code> component changes.
63+
</Block>
64+
<Demo Type="typeof(EnumInput_Demo_07_Events_A_ValueChanged)" Tabs="true" />
65+
</Section>
66+
67+
<Section Class="p-0" Size="HeadingSize.H4" Name="TextChanged" PageUrl="@pageUrl" Link="events-text-changed">
68+
<Block>
69+
The <code>TextChanged</code> event is triggered when the text of the <code>EnumInput</code> component changes.
70+
</Block>
71+
<Demo Type="typeof(EnumInput_Demo_07_Events_B_TextChanged)" Tabs="true" />
72+
</Section>
73+
74+
<Section Class="p-0" Size="HeadingSize.H3" Name="Mehods" PageUrl="@pageUrl" Link="methods">
75+
<Block>
76+
The <code>EnumInput</code> component has two methods: <code>Enable()</code> and <code>Disable()</code>.
77+
You can use these methods to enable or disable the <code>EnumInput</code> component programmatically.
78+
</Block>
79+
</Section>
80+
81+
<Section Class="p-0" Size="HeadingSize.H4" Name="Enable() and Disable()" PageUrl="@pageUrl" Link="methods-enable-disable">
82+
<Demo Type="typeof(EnumInput_Demo_08_Methods_Enable_Disable)" Tabs="true" />
83+
</Section>
84+
85+
@code {
86+
private const string pageUrl = RouteConstants.Demos_Form_EnumInput_Documentation;
87+
private const string pageTitle = "EnumInput";
88+
private const string pageDescription = "The <code>EnumInput</code> component is used to show enum values in a dropdown list. It is a simple and effective way to allow users to select from a predefined set of options.";
89+
private const string metaTitle = "Blazor EnumInput Component";
90+
private const string metaDescription = "The EnumInput component is used to show enum values in a dropdown list. It is a simple and effective way to allow users to select from a predefined set of options.";
91+
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
92+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/EnumInput/EnumInput_Demo_01_How_it_works.razor‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<EnumInput TEnum="Status" @bind-Value="@selectedStatusValue" />
2+
<div class="mb-3">Selected value: @selectedStatusValue</div>
3+
4+
<EnumInput TEnum="Status" @bind-Text="@selectedStatusText" />
5+
<div class="mb-3">Selected text: @selectedStatusText</div>
6+
7+
@code {
8+
private int selectedStatusValue;
9+
private string? selectedStatusText;
10+
11+
override protected void OnInitialized()
12+
{
13+
selectedStatusValue = (int)Status.Pending;
14+
selectedStatusText = Status.Inactive.ToString();
15+
}
16+
17+
public enum Status
18+
{
19+
Active,
20+
Inactive,
21+
Pending
22+
}
23+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/EnumInput/EnumInput_Demo_02_Colors.razor‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<EnumInput TEnum="Status" Color="EnumInputColor.Link" @bind-Value="@value1" />
2+
<EnumInput TEnum="Status" Color="EnumInputColor.Primary" @bind-Value="@value2" />
3+
<EnumInput TEnum="Status" Color="EnumInputColor.Info" @bind-Value="@value3" />
4+
<EnumInput TEnum="Status" Color="EnumInputColor.Success" @bind-Value="@value4" />
5+
<EnumInput TEnum="Status" Color="EnumInputColor.Warning" @bind-Value="@value5" />
6+
<EnumInput TEnum="Status" Color="EnumInputColor.Danger" @bind-Value="@value6" />
7+
8+
@code {
9+
private int value1 = (int)Status.Pending;
10+
private int value2 = (int)Status.Pending;
11+
private int value3 = (int)Status.Pending;
12+
private int value4 = (int)Status.Pending;
13+
private int value5 = (int)Status.Pending;
14+
private int value6 = (int)Status.Pending;
15+
16+
public enum Status
17+
{
18+
Active,
19+
Inactive,
20+
Pending
21+
}
22+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/EnumInput/EnumInput_Demo_03_Sizes.razor‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<EnumInput TEnum="Status" @bind-Value="@value1" />
2+
<EnumInput TEnum="Status" Size="EnumInputSize.Small" @bind-Value="@value2" />
3+
<EnumInput TEnum="Status" Size="EnumInputSize.Normal" @bind-Value="@value3" />
4+
<EnumInput TEnum="Status" Size="EnumInputSize.Medium" @bind-Value="@value4" />
5+
<EnumInput TEnum="Status" Size="EnumInputSize.Large" @bind-Value="@value5" />
6+
7+
@code {
8+
private int value1 = (int)Status.Pending;
9+
private int value2 = (int)Status.Pending;
10+
private int value3 = (int)Status.Pending;
11+
private int value4 = (int)Status.Pending;
12+
private int value5 = (int)Status.Pending;
13+
14+
public enum Status
15+
{
16+
Active,
17+
Inactive,
18+
Pending
19+
}
20+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/EnumInput/EnumInput_Demo_04_Styles.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<EnumInput TEnum="Status" IsRounded="true" @bind-Value="@value1" />
2+
3+
@code {
4+
private int value1 = (int)Status.Pending;
5+
6+
public enum Status
7+
{
8+
Active,
9+
Inactive,
10+
Pending
11+
}
12+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/EnumInput/EnumInput_Demo_05_States.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<EnumInput TEnum="Status" @bind-Value="@value1" />
2+
<EnumInput TEnum="Status" State="EnumInputState.Hovered" @bind-Value="@value2" />
3+
<EnumInput TEnum="Status" State="EnumInputState.Focused" @bind-Value="@value3" />
4+
<EnumInput TEnum="Status" State="EnumInputState.Loading" @bind-Value="@value4" />
5+
6+
@code {
7+
private int value1 = (int)Status.Pending;
8+
private int value2 = (int)Status.Pending;
9+
private int value3 = (int)Status.Pending;
10+
private int value4 = (int)Status.Pending;
11+
12+
public enum Status
13+
{
14+
Active,
15+
Inactive,
16+
Pending
17+
}
18+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Form/EnumInput/EnumInput_Demo_06_Disabled.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<EnumInput TEnum="Status" @bind-Value="@value1" Disabled="true" />
2+
3+
@code {
4+
private int value1 = (int)Status.Pending;
5+
6+
public enum Status
7+
{
8+
Active,
9+
Inactive,
10+
Pending
11+
}
12+
}

0 commit comments

Comments
 (0)