From 9b898d1283820616146d5ba2f2d72d8ffccebbd8 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 29 Nov 2024 23:51:16 +0530 Subject: [PATCH 01/18] Text input - initial commit --- .../BlazorBootstrap.Demo.RCL.csproj | 4 + .../Components/Layout/MainLayout.razor.cs | 3 +- .../TextInput/TextInputDocumentation.razor | 30 +++++ .../TextInput_Demo_01_Basic_Usage.razor | 8 ++ .../Components/Pages/Index.razor | 10 ++ .../Constants/RouteConstants.cs | 1 + .../Components/Form/TextInput/TextInput.razor | 14 +++ .../Form/TextInput/TextInput.razor.cs | 110 ++++++++++++++++++ 8 files changed, 179 insertions(+), 1 deletion(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_01_Basic_Usage.razor create mode 100644 blazorbootstrap/Components/Form/TextInput/TextInput.razor create mode 100644 blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs diff --git a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj index 3a3a921dc..1ce89497d 100644 --- a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj +++ b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj @@ -19,6 +19,10 @@ + + + + diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index e076eb178..3bd368976 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -23,7 +23,8 @@ internal override IEnumerable GetNavItems() new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" }, new (){ Id = "404", Text = "Range Input", Href = "/form/range-input", IconName = IconName.Sliders, ParentId = "4" }, new (){ Id = "405", Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn, ParentId = "4" }, - new (){ Id = "406", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, + new (){ Id = "406", Text = "Text Input", Href = RouteConstants.Demos_TextInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" }, + new (){ Id = "407", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger }, new (){ Id = "500", Text = "Accordion", Href = "/accordion", IconName = IconName.ChevronBarExpand, ParentId = "5" }, diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor new file mode 100644 index 000000000..5608e7519 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor @@ -0,0 +1,30 @@ +@attribute [Route(pageUrl)] + + + + + @pageDescription + + + + +
+ + The input UI generally varies from browser to browser. + In unsupported browsers, the control degrades gracefully to type="text". + + + +
+ +@code { + private const string pageUrl = RouteConstants.Demos_TextInput_Documentation; + private const string pageTitle = "Blazor TextInput"; + private const string pageDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text' which limits user input based on pre-defined parameters."; + private const string metaTitle = "Blazor TextInput Component"; + private const string metaDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'time' which limits user input based on pre-defined parameters."; + private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_01_Basic_Usage.razor new file mode 100644 index 000000000..7153b870c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_01_Basic_Usage.razor @@ -0,0 +1,8 @@ +
+ +
+
Entered text: @enteredText
+ +@code { + private string? enteredText = null; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index 7f65a9275..4bdecd432 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -220,6 +220,11 @@

Tabs

+
+ +

Text Input

+ +

Time Input

@@ -293,6 +298,11 @@

Switch
+
+ +

Text Input

+ +

Time Input

diff --git a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs index bc6ddfca0..f11fcb7d3 100644 --- a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs +++ b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs @@ -27,6 +27,7 @@ public static class RouteConstants public const string Demos_NumberInput_Documentation = Demos_Forms_Prefix + "/number-input"; public const string Demos_RangeInput_Documentation = Demos_Forms_Prefix + "/range-input"; public const string Demos_Switch_Documentation = Demos_Forms_Prefix + "/switch"; + public const string Demos_TextInput_Documentation = Demos_Forms_Prefix + "/text-input"; public const string Demos_TimeInput_Documentation = Demos_Forms_Prefix + "/time-input"; // Components diff --git a/blazorbootstrap/Components/Form/TextInput/TextInput.razor b/blazorbootstrap/Components/Form/TextInput/TextInput.razor new file mode 100644 index 000000000..78dcc5076 --- /dev/null +++ b/blazorbootstrap/Components/Form/TextInput/TextInput.razor @@ -0,0 +1,14 @@ +@namespace BlazorBootstrap +@inherits BlazorBootstrapComponentBase + + \ No newline at end of file diff --git a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs new file mode 100644 index 000000000..0012985d7 --- /dev/null +++ b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs @@ -0,0 +1,110 @@ +namespace BlazorBootstrap; + +public partial class TextInput : BlazorBootstrapComponentBase +{ + #region Fields and Constants + + private FieldIdentifier fieldIdentifier = default!; + + #endregion + + #region Methods + + /// + /// Disables number input. + /// + public void Disable() => Disabled = true; + + /// + /// Enables number input. + /// + public void Enable() => Disabled = false; + + private async Task OnChange(ChangeEventArgs e) + { + var oldValue = Value; + var newValue = e.Value?.ToString() ?? string.Empty; // object + + await ValueChanged.InvokeAsync(newValue); + + EditContext?.NotifyFieldChanged(fieldIdentifier); + } + + #endregion + + #region Properties, Indexers + + protected override string? ClassNames => + BuildClassNames( + Class, + (BootstrapClass.FormControl, true), + (TextAlignment.ToTextAlignmentClass(), TextAlignment != Alignment.None) + ); + + /// + /// If , allows negative numbers. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool AllowNegativeNumbers { get; set; } + + private string autoComplete => AutoComplete ? "true" : "false"; + + /// + /// If , NumberInput can complete the values automatically by the browser. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool AutoComplete { get; set; } + + /// + /// Gets or sets the disabled state. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool Disabled { get; set; } + + [CascadingParameter] private EditContext EditContext { get; set; } = default!; + + private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; + + /// + /// Gets or sets the placeholder. + /// + /// + /// Default value is null. + /// + [Parameter] + public string? Placeholder { get; set; } + + /// + /// Gets or sets the text alignment. + /// + /// + /// Default value is . + /// + [Parameter] + public Alignment TextAlignment { get; set; } = Alignment.None; + + /// + /// Gets or sets the value. + /// + [Parameter] + public string Value { get; set; } = default!; + + /// + /// This event fired on every user keystroke that changes the NumberInput value. + /// + [Parameter] + public EventCallback ValueChanged { get; set; } + + [Parameter] public Expression> ValueExpression { get; set; } = default!; + + #endregion +} From 2d8831273839239a7e93eeaea7538cacaf151413 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 29 Nov 2024 23:52:09 +0530 Subject: [PATCH 02/18] TextInput - Demos updated --- .../Pages/Form/TextInput/TextInputDocumentation.razor | 5 ----- 1 file changed, 5 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor index 5608e7519..e82ed06e7 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor @@ -12,11 +12,6 @@
- - The input UI generally varies from browser to browser. - In unsupported browsers, the control degrades gracefully to type="text". - -
From a78b72ad4a04f1a9b4ab756a9faa694b4c66f0c9 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 29 Nov 2024 23:53:33 +0530 Subject: [PATCH 03/18] TextInput - demos text updated --- .../Pages/Form/TextInput/TextInputDocumentation.razor | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor index e82ed06e7..f20851584 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor @@ -18,8 +18,8 @@ @code { private const string pageUrl = RouteConstants.Demos_TextInput_Documentation; private const string pageTitle = "Blazor TextInput"; - private const string pageDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text' which limits user input based on pre-defined parameters."; + private const string pageDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text'."; private const string metaTitle = "Blazor TextInput Component"; - private const string metaDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'time' which limits user input based on pre-defined parameters."; + private const string metaDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'time'."; private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL } From 6a6b80db7179685b17835b51ca4f85055bb9c437 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 29 Nov 2024 23:56:12 +0530 Subject: [PATCH 04/18] TextInput updates --- .../Components/Layout/MainLayout.razor.cs | 2 +- BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index 3bd368976..954d8d88b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -23,7 +23,7 @@ internal override IEnumerable GetNavItems() new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" }, new (){ Id = "404", Text = "Range Input", Href = "/form/range-input", IconName = IconName.Sliders, ParentId = "4" }, new (){ Id = "405", Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn, ParentId = "4" }, - new (){ Id = "406", Text = "Text Input", Href = RouteConstants.Demos_TextInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" }, + new (){ Id = "406", Text = "Text Input", Href = RouteConstants.Demos_TextInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, new (){ Id = "407", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger }, diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index 4bdecd432..799d426f2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -222,7 +222,7 @@
-

Text Input

+

Text Input
@@ -300,7 +300,7 @@
-

Text Input

+

Text Input
From 94296ee3be02a145418b8262c26568243ba7c1b0 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 30 Nov 2024 18:48:07 +0530 Subject: [PATCH 05/18] TextInput - updates + Examples added --- .../TextInput/TextInputDocumentation.razor | 37 ++++++++++++++++++- .../TextInput_Demo_02_Text_Alignment.razor | 8 ++++ .../TextInput_Demo_03_Disable_A.razor | 8 ++++ .../TextInput_Demo_03_Disable_B.razor | 8 ++++ .../TextInput_Demo_04_MaxLength.razor | 8 ++++ .../TextInput_Demo_05_Validations.razor | 8 ++++ ...extInput_Demo_06_Events_ValueChanged.razor | 8 ++++ .../Components/Form/TextInput/TextInput.razor | 1 + .../Form/TextInput/TextInput.razor.cs | 6 +++ 9 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_02_Text_Alignment.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_A.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_B.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_04_MaxLength.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor index f20851584..09e812eb8 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor @@ -1,4 +1,6 @@ -@attribute [Route(pageUrl)] +@page "/text-input" + +@attribute [Route(pageUrl)] +
+
You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
+ +
+ +
+
Use the Disabled parameter to disable the TextInput.
+ +
Also, use Enable() and Disable() methods to enable and disable the TextInput.
+ + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
+ +
+ +
+ +
+
+ Like any other blazor input component, TextInput supports validations. + Add the DataAnnotations on the TextInput component to validate the user input before submitting the form. + In the below example, we used Required and Range attributes. +
+ +
+ +
+
This event fires on every user keystroke that changes the TextInput value.
+ +
+ @code { private const string pageUrl = RouteConstants.Demos_TextInput_Documentation; private const string pageTitle = "Blazor TextInput"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_02_Text_Alignment.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_02_Text_Alignment.razor new file mode 100644 index 000000000..7153b870c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_02_Text_Alignment.razor @@ -0,0 +1,8 @@ +
+ +
+
Entered text: @enteredText
+ +@code { + private string? enteredText = null; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_A.razor new file mode 100644 index 000000000..7153b870c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_A.razor @@ -0,0 +1,8 @@ +
+ +
+
Entered text: @enteredText
+ +@code { + private string? enteredText = null; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_B.razor new file mode 100644 index 000000000..7153b870c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_B.razor @@ -0,0 +1,8 @@ +
+ +
+
Entered text: @enteredText
+ +@code { + private string? enteredText = null; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_04_MaxLength.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_04_MaxLength.razor new file mode 100644 index 000000000..7153b870c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_04_MaxLength.razor @@ -0,0 +1,8 @@ +
+ +
+
Entered text: @enteredText
+ +@code { + private string? enteredText = null; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor new file mode 100644 index 000000000..7153b870c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor @@ -0,0 +1,8 @@ +
+ +
+
Entered text: @enteredText
+ +@code { + private string? enteredText = null; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor new file mode 100644 index 000000000..7153b870c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor @@ -0,0 +1,8 @@ +
+ +
+
Entered text: @enteredText
+ +@code { + private string? enteredText = null; +} diff --git a/blazorbootstrap/Components/Form/TextInput/TextInput.razor b/blazorbootstrap/Components/Form/TextInput/TextInput.razor index 78dcc5076..795fbbbc6 100644 --- a/blazorbootstrap/Components/Form/TextInput/TextInput.razor +++ b/blazorbootstrap/Components/Form/TextInput/TextInput.razor @@ -9,6 +9,7 @@ value="@Value" disabled="@Disabled" placeholder="@Placeholder" + maxlength="@MaxLength" autocomplete="@autoComplete" @attributes="@AdditionalAttributes" @onchange="OnChange" /> \ No newline at end of file diff --git a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs index 0012985d7..a032a4d56 100644 --- a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs +++ b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs @@ -74,6 +74,12 @@ private async Task OnChange(ChangeEventArgs e) private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; + /// + /// Gets or sets the maximum length of the input. + /// + [Parameter] + public int? MaxLength { get; set; } + /// /// Gets or sets the placeholder. /// From 99c7d947c881eaccffec8ccce581ee665dbc513b Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 30 Nov 2024 21:49:10 +0530 Subject: [PATCH 06/18] TextInput updates --- .../TextInput/TextInputDocumentation.razor | 6 +- .../TextInput_Demo_02_Text_Alignment.razor | 9 +- .../TextInput_Demo_03_Disable_A.razor | 14 +++- .../TextInput_Demo_03_Disable_B.razor | 11 ++- .../TextInput_Demo_04_MaxLength.razor | 2 +- .../TextInput_Demo_05_Validations.razor | 84 +++++++++++++++++-- ...extInput_Demo_06_Events_ValueChanged.razor | 13 ++- .../Form/TextInput/TextInput.razor.cs | 18 ++-- 8 files changed, 131 insertions(+), 26 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor index 09e812eb8..3efd5c091 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor @@ -24,12 +24,12 @@
Use the Disabled parameter to disable the TextInput.
- +
Also, use Enable() and Disable() methods to enable and disable the TextInput.
Do not use both the Disabled parameter and Enable() & Disable() methods. - +
@@ -40,7 +40,7 @@
Like any other blazor input component, TextInput supports validations. Add the DataAnnotations on the TextInput component to validate the user input before submitting the form. - In the below example, we used Required and Range attributes. + In the below example, we used Required attribute.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_02_Text_Alignment.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_02_Text_Alignment.razor index 7153b870c..3c0b5b535 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_02_Text_Alignment.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_02_Text_Alignment.razor @@ -1,8 +1,13 @@ 
- +
Entered text: @enteredText
+
+ +
+
Entered text: @enteredText2
@code { - private string? enteredText = null; + private string? enteredText = "sample text"; + private string? enteredText2 = "sample text 2"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_A.razor index 7153b870c..456b47d32 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_A.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_A.razor @@ -1,8 +1,20 @@ 
- +
Entered text: @enteredText
+ + + + @code { private string? enteredText = null; + + private bool disabled = true; + + private void Enable() => disabled = false; + + private void Disable() => disabled = true; + + private void Toggle() => disabled = !disabled; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_B.razor index 7153b870c..17f0e35f3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_B.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_03_Disable_B.razor @@ -1,8 +1,17 @@ 
- +
Entered text: @enteredText
+ + + @code { + private TextInput? textInputRef; + private string? enteredText = null; + + private void Disable() => textInputRef.Disable(); + + private void Enable() => textInputRef.Enable(); } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_04_MaxLength.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_04_MaxLength.razor index 7153b870c..118d5d557 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_04_MaxLength.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_04_MaxLength.razor @@ -1,5 +1,5 @@ 
- +
Entered text: @enteredText
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor index 7153b870c..20e73c12e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor @@ -1,8 +1,82 @@ -
- -
-
Entered text: @enteredText
+@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+
+ + +
+
+ + @code { - private string? enteredText = null; + private Employee employee = new(); + private EditContext? editContext; + + protected override void OnInitialized() + { + editContext = new EditContext(employee); + base.OnInitialized(); + } + + public void HandleOnValidSubmit() + { + Console.WriteLine("Handle called..."); + + // additional check + if (editContext.Validate()) + { + // do something + // submit the form + Console.WriteLine("Form submitted successfully"); + } + } + + private void ResetForm() + { + employee = new(); + editContext = new EditContext(employee); + } + + public class Employee + { + [Required(ErrorMessage = "First name required.")] + public string? FirstName { get; set; } + + [Required(ErrorMessage = "Last name required.")] + public string? LastName { get; set; } + } } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor index 7153b870c..32832d708 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor @@ -1,8 +1,15 @@ 
- +
-
Entered text: @enteredText
+
Entered employee name: @employeeName
@code { - private string? enteredText = null; + private string? employeeName = null; + + private void EmployeeNameChanged(string? value) + { + employeeName = value; + + // do something + } } diff --git a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs index a032a4d56..33cc7943e 100644 --- a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs +++ b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs @@ -1,4 +1,6 @@ -namespace BlazorBootstrap; +using System.Globalization; + +namespace BlazorBootstrap; public partial class TextInput : BlazorBootstrapComponentBase { @@ -34,6 +36,11 @@ private async Task OnChange(ChangeEventArgs e) #region Properties, Indexers + protected override void OnInitialized() + { + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + } + protected override string? ClassNames => BuildClassNames( Class, @@ -41,15 +48,6 @@ private async Task OnChange(ChangeEventArgs e) (TextAlignment.ToTextAlignmentClass(), TextAlignment != Alignment.None) ); - /// - /// If , allows negative numbers. - /// - /// - /// Default value is false. - /// - [Parameter] - public bool AllowNegativeNumbers { get; set; } - private string autoComplete => AutoComplete ? "true" : "false"; /// From 6653c34cbcbf493d273f20efa5edd936b22f93ae Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sun, 1 Dec 2024 21:58:30 +0530 Subject: [PATCH 07/18] TextAreaInput component updates --- .../BlazorBootstrap.Demo.RCL.csproj | 1 + .../Components/Layout/MainLayout.razor.cs | 3 +- .../TextAreaInputDocumentation.razor | 60 +++++++++ .../TextAreaInput_Demo_01_Basic_Usage.razor | 8 ++ ...TextAreaInput_Demo_02_Text_Alignment.razor | 13 ++ .../TextAreaInput_Demo_03_Disable_A.razor | 20 +++ .../TextAreaInput_Demo_03_Disable_B.razor | 17 +++ .../TextAreaInput_Demo_04_MaxLength.razor | 8 ++ .../TextAreaInput_Demo_05_Validations.razor | 80 +++++++++++ ...reaInput_Demo_06_Events_ValueChanged.razor | 15 +++ .../TextInput/TextInputDocumentation.razor | 2 +- .../TextInput_Demo_05_Validations.razor | 2 - .../Components/Pages/Index.razor | 10 ++ .../Constants/RouteConstants.cs | 1 + .../Core/BlazorBootstrapComponentBase.cs | 3 +- .../Form/TextAreaInput/TextAreaInput.razor | 17 +++ .../Form/TextAreaInput/TextAreaInput.razor.cs | 124 ++++++++++++++++++ .../Form/TextInput/TextInput.razor.cs | 14 +- 18 files changed, 385 insertions(+), 13 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_01_Basic_Usage.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_02_Text_Alignment.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_03_Disable_A.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_03_Disable_B.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_04_MaxLength.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_05_Validations.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_06_Events_ValueChanged.razor create mode 100644 blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor create mode 100644 blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs diff --git a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj index 1ce89497d..b39bee455 100644 --- a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj +++ b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj @@ -20,6 +20,7 @@ + diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index 954d8d88b..78c3a3631 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -24,7 +24,8 @@ internal override IEnumerable GetNavItems() new (){ Id = "404", Text = "Range Input", Href = "/form/range-input", IconName = IconName.Sliders, ParentId = "4" }, new (){ Id = "405", Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn, ParentId = "4" }, new (){ Id = "406", Text = "Text Input", Href = RouteConstants.Demos_TextInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, - new (){ Id = "407", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, + new (){ Id = "407", Text = "Text Area Input", Href = RouteConstants.Demos_TextAreaInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, + new (){ Id = "408", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger }, new (){ Id = "500", Text = "Accordion", Href = "/accordion", IconName = IconName.ChevronBarExpand, ParentId = "5" }, diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor new file mode 100644 index 000000000..abd8a76bc --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor @@ -0,0 +1,60 @@ +@page "/text-area-input" + +@attribute [Route(pageUrl)] + + + + + @pageDescription + + + + +
+ +
+ +
+
You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
+ +
+ +
+
Use the Disabled parameter to disable the TextAreaInput.
+ +
Also, use Enable() and Disable() methods to enable and disable the TextAreaInput.
+ + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
+ +
+ +
+ +
+
+ Like any other blazor input component, TextAreaInput supports validations. + Add the DataAnnotations on the TextAreaInput component to validate the user input before submitting the form. + In the below example, we used Required attribute. +
+ +
+ +
+
This event fires when the TextAreaInput value changes, but not on every keystroke.
+ +
+ +@code { + private const string pageUrl = RouteConstants.Demos_TextAreaInput_Documentation; + private const string pageTitle = "Blazor TextAreaInput"; + private const string pageDescription = "The Blazor Bootstrap TextAreaInput component provides a multi-line plain-text editing control, ideal for scenarios requiring users to input substantial amounts of free-form text. Common use cases include comment sections on reviews or feedback forms."; + private const string metaTitle = "Blazor TextAreaInput Component"; + private const string metaDescription = "The Blazor Bootstrap TextAreaInput component provides a multi-line plain-text editing control, ideal for scenarios requiring users to input substantial amounts of free-form text. Common use cases include comment sections on reviews or feedback forms."; + private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_01_Basic_Usage.razor new file mode 100644 index 000000000..9f919c39e --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_01_Basic_Usage.razor @@ -0,0 +1,8 @@ +
+ +
+
Entered text: @enteredText
+ +@code { + private string? enteredText = null; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_02_Text_Alignment.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_02_Text_Alignment.razor new file mode 100644 index 000000000..9e69ca909 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_02_Text_Alignment.razor @@ -0,0 +1,13 @@ +
+ +
+
Entered text: @enteredText
+
+ +
+
Entered text: @enteredText2
+ +@code { + private string? enteredText = "sample text"; + private string? enteredText2 = "sample text 2"; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_03_Disable_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_03_Disable_A.razor new file mode 100644 index 000000000..be32069bd --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_03_Disable_A.razor @@ -0,0 +1,20 @@ +
+ +
+
Entered text: @enteredText
+ + + + + +@code { + private string? enteredText = null; + + private bool disabled = true; + + private void Enable() => disabled = false; + + private void Disable() => disabled = true; + + private void Toggle() => disabled = !disabled; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_03_Disable_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_03_Disable_B.razor new file mode 100644 index 000000000..24bf642c3 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_03_Disable_B.razor @@ -0,0 +1,17 @@ +
+ +
+
Entered text: @enteredText
+ + + + +@code { + private TextAreaInput? textAreaInputRef; + + private string? enteredText = null; + + private void Disable() => textAreaInputRef.Disable(); + + private void Enable() => textAreaInputRef.Enable(); +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_04_MaxLength.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_04_MaxLength.razor new file mode 100644 index 000000000..44e93ce26 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_04_MaxLength.razor @@ -0,0 +1,8 @@ +
+ +
+
Entered text: @enteredText
+ +@code { + private string? enteredText = null; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_05_Validations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_05_Validations.razor new file mode 100644 index 000000000..3c4c8f77d --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_05_Validations.razor @@ -0,0 +1,80 @@ +@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+
+ + +
+
+ + + +@code { + private Product product = new(); + private EditContext? editContext; + + protected override void OnInitialized() + { + editContext = new EditContext(product); + base.OnInitialized(); + } + + public void HandleOnValidSubmit() + { + // additional check + if (editContext.Validate()) + { + // do something + // submit the form + Console.WriteLine("Form submitted successfully"); + } + } + + private void ResetForm() + { + product = new(); + editContext = new EditContext(product); + } + + public class Product + { + [Required(ErrorMessage = "Product name required.")] + public string? Name { get; set; } + + [Required(ErrorMessage = "Product description required.")] + public string? Description { get; set; } + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_06_Events_ValueChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_06_Events_ValueChanged.razor new file mode 100644 index 000000000..34a9fe2bf --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_06_Events_ValueChanged.razor @@ -0,0 +1,15 @@ +
+ +
+
Entered text: @enteredText
+ +@code { + private string? enteredText = null; + + private void TextChanged(string? value) + { + enteredText = value; + + // do something + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor index 3efd5c091..b50a1c44c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor @@ -46,7 +46,7 @@
-
This event fires on every user keystroke that changes the TextInput value.
+
This event fires when the TextInput value changes, but not on every keystroke.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor index 20e73c12e..9a6b848e4 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInput_Demo_05_Validations.razor @@ -54,8 +54,6 @@ public void HandleOnValidSubmit() { - Console.WriteLine("Handle called..."); - // additional check if (editContext.Validate()) { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index 799d426f2..14ced1719 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -225,6 +225,11 @@

Text Input

+
+ +

Text Area Input

+ +

Time Input

@@ -303,6 +308,11 @@

Text Input
+
+ +

Text Area Input

+ +

Time Input

diff --git a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs index f11fcb7d3..7129dc9c1 100644 --- a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs +++ b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs @@ -28,6 +28,7 @@ public static class RouteConstants public const string Demos_RangeInput_Documentation = Demos_Forms_Prefix + "/range-input"; public const string Demos_Switch_Documentation = Demos_Forms_Prefix + "/switch"; public const string Demos_TextInput_Documentation = Demos_Forms_Prefix + "/text-input"; + public const string Demos_TextAreaInput_Documentation = Demos_Forms_Prefix + "/text-area-input"; public const string Demos_TimeInput_Documentation = Demos_Forms_Prefix + "/time-input"; // Components diff --git a/blazorbootstrap/Components/Core/BlazorBootstrapComponentBase.cs b/blazorbootstrap/Components/Core/BlazorBootstrapComponentBase.cs index a8bfe8dfa..4144b0c77 100644 --- a/blazorbootstrap/Components/Core/BlazorBootstrapComponentBase.cs +++ b/blazorbootstrap/Components/Core/BlazorBootstrapComponentBase.cs @@ -1,4 +1,5 @@ -using Microsoft.Extensions.Configuration; +using Microsoft.AspNetCore.Components.Rendering; +using Microsoft.Extensions.Configuration; namespace BlazorBootstrap; diff --git a/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor b/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor new file mode 100644 index 000000000..3a3cff244 --- /dev/null +++ b/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor @@ -0,0 +1,17 @@ +@namespace BlazorBootstrap +@inherits BlazorBootstrapComponentBase + + \ No newline at end of file diff --git a/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs b/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs new file mode 100644 index 000000000..c5d191670 --- /dev/null +++ b/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs @@ -0,0 +1,124 @@ +namespace BlazorBootstrap; + +public partial class TextAreaInput : BlazorBootstrapComponentBase +{ + #region Fields and Constants + + private FieldIdentifier fieldIdentifier; + + #endregion + + #region Methods + + protected override void OnInitialized() + { + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + } + + /// + /// Disables number input. + /// + public void Disable() => Disabled = true; + + /// + /// Enables number input. + /// + public void Enable() => Disabled = false; + + private async Task OnChange(ChangeEventArgs e) + { + var oldValue = Value; + var newValue = e.Value?.ToString() ?? string.Empty; // object + + await ValueChanged.InvokeAsync(newValue); + + EditContext?.NotifyFieldChanged(fieldIdentifier); + } + + #endregion + + #region Properties, Indexers + + protected override string? ClassNames => + BuildClassNames( + Class, + (BootstrapClass.FormControl, true), + (TextAlignment.ToTextAlignmentClass(), TextAlignment != Alignment.None) + ); + + private string autoComplete => AutoComplete ? "true" : "false"; + + /// + /// If , NumberInput can complete the values automatically by the browser. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool AutoComplete { get; set; } + + /// + /// Gets or sets the number of columns. + /// + [Parameter] + public int? Cols { get; set; } + + /// + /// Gets or sets the disabled state. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool Disabled { get; set; } + + [CascadingParameter] private EditContext EditContext { get; set; } = default!; + + private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; + + /// + /// Gets or sets the maximum length of the input. + /// + [Parameter] + public int? MaxLength { get; set; } + + /// + /// Gets or sets the placeholder. + /// + /// + /// Default value is null. + /// + [Parameter] + public string? Placeholder { get; set; } + + /// + /// Gets or sets the number of rows. + /// + [Parameter] + public int? Rows { get; set; } + + /// + /// Gets or sets the text alignment. + /// + /// + /// Default value is . + /// + [Parameter] + public Alignment TextAlignment { get; set; } = Alignment.None; + + /// + /// Gets or sets the value. + /// + [Parameter] + public string Value { get; set; } = default!; + + /// + /// This event fired on every user keystroke that changes the NumberInput value. + /// + [Parameter] + public EventCallback ValueChanged { get; set; } + + [Parameter] public Expression> ValueExpression { get; set; } = default!; + + #endregion +} diff --git a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs index 33cc7943e..fef1e41c5 100644 --- a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs +++ b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs @@ -1,6 +1,4 @@ -using System.Globalization; - -namespace BlazorBootstrap; +namespace BlazorBootstrap; public partial class TextInput : BlazorBootstrapComponentBase { @@ -12,6 +10,11 @@ public partial class TextInput : BlazorBootstrapComponentBase #region Methods + protected override void OnInitialized() + { + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + } + /// /// Disables number input. /// @@ -36,11 +39,6 @@ private async Task OnChange(ChangeEventArgs e) #region Properties, Indexers - protected override void OnInitialized() - { - fieldIdentifier = FieldIdentifier.Create(ValueExpression); - } - protected override string? ClassNames => BuildClassNames( Class, From 74f296aaf3648ce537bd49bce326a775410d8d1f Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Thu, 5 Dec 2024 22:42:32 +0530 Subject: [PATCH 08/18] Form components - initial setup --- .../Constants/RouteConstants.cs | 3 + .../Form/CheckboxInput/CheckboxInput.razor | 18 +++ .../Form/CheckboxInput/CheckboxInput.razor.cs | 85 +++++++++++++ .../Form/RadioInput/RadioInput.razor | 15 +++ .../Form/RadioInput/RadioInput.razor.cs | 112 ++++++++++++++++++ .../Form/SelectInput/SelectInput.razor | 15 +++ .../Form/SelectInput/SelectInput.razor.cs | 112 ++++++++++++++++++ blazorbootstrap/Constants/BootstrapClass.cs | 3 + 8 files changed, 363 insertions(+) create mode 100644 blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor create mode 100644 blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs create mode 100644 blazorbootstrap/Components/Form/RadioInput/RadioInput.razor create mode 100644 blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs create mode 100644 blazorbootstrap/Components/Form/SelectInput/SelectInput.razor create mode 100644 blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs diff --git a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs index 7129dc9c1..0d30d4d5b 100644 --- a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs +++ b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs @@ -22,10 +22,13 @@ public static class RouteConstants // Forms public const string Demos_Forms_Prefix = Demos_Prefix + "/form"; public const string Demos_AutoComplete_Documentation = Demos_Forms_Prefix + "/autocomplete"; + public const string Demos_CheckboxInput_Documentation = Demos_Forms_Prefix + "/checkbox-input"; public const string Demos_CurrencyInput_Documentation = Demos_Forms_Prefix + "/currency-input"; public const string Demos_DateInput_Documentation = Demos_Forms_Prefix + "/date-input"; public const string Demos_NumberInput_Documentation = Demos_Forms_Prefix + "/number-input"; + public const string Demos_RadioInput_Documentation = Demos_Forms_Prefix + "/radio-input"; public const string Demos_RangeInput_Documentation = Demos_Forms_Prefix + "/range-input"; + public const string Demos_SelectInput_Documentation = Demos_Forms_Prefix + "/select-input"; public const string Demos_Switch_Documentation = Demos_Forms_Prefix + "/switch"; public const string Demos_TextInput_Documentation = Demos_Forms_Prefix + "/text-input"; public const string Demos_TextAreaInput_Documentation = Demos_Forms_Prefix + "/text-area-input"; diff --git a/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor b/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor new file mode 100644 index 000000000..857b9a32b --- /dev/null +++ b/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor @@ -0,0 +1,18 @@ +@namespace BlazorBootstrap +@inherits BlazorBootstrapComponentBase + + + +@if (!string.IsNullOrWhiteSpace(Label)) +{ + +} \ No newline at end of file diff --git a/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs b/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs new file mode 100644 index 000000000..c95a53717 --- /dev/null +++ b/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs @@ -0,0 +1,85 @@ +namespace BlazorBootstrap; + +public partial class CheckboxInput : BlazorBootstrapComponentBase +{ + #region Fields and Constants + + private FieldIdentifier fieldIdentifier; + + #endregion + + #region Methods + + protected override void OnInitialized() + { + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + } + + /// + /// Disables number input. + /// + public void Disable() => Disabled = true; + + /// + /// Enables number input. + /// + public void Enable() => Disabled = false; + + private async Task OnChange(ChangeEventArgs e) + { + var oldValue = Value; + var newValue = e.Value is not null && (bool)e.Value; + + await ValueChanged.InvokeAsync(newValue); + + EditContext?.NotifyFieldChanged(fieldIdentifier); + } + + #endregion + + #region Properties, Indexers + + protected override string? ClassNames => + BuildClassNames( + Class, + (BootstrapClass.FormCheckInput, true), + (EditContext?.FieldCssClass(fieldIdentifier) ?? string.Empty, true) + ); + + /// + /// Gets or sets the disabled state. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool Disabled { get; set; } + + /// + /// Gets the associated . + /// + [CascadingParameter] + private EditContext EditContext { get; set; } = default!; + + /// + /// Gets or sets the label. + /// + [Parameter] + public string? Label { get; set; } + + /// + /// Gets or sets the value. + /// + [Parameter] + public bool Value { get; set; } + + /// + /// This event fired on every user keystroke that changes the NumberInput value. + /// + [Parameter] + public EventCallback ValueChanged { get; set; } + + [Parameter] public Expression> ValueExpression { get; set; } = default!; + + #endregion +} diff --git a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor new file mode 100644 index 000000000..795fbbbc6 --- /dev/null +++ b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor @@ -0,0 +1,15 @@ +@namespace BlazorBootstrap +@inherits BlazorBootstrapComponentBase + + \ No newline at end of file diff --git a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs new file mode 100644 index 000000000..f15773c89 --- /dev/null +++ b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs @@ -0,0 +1,112 @@ +namespace BlazorBootstrap; + +public partial class RadioInput : BlazorBootstrapComponentBase +{ + #region Fields and Constants + + private FieldIdentifier fieldIdentifier; + + #endregion + + #region Methods + + protected override void OnInitialized() + { + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + } + + /// + /// Disables number input. + /// + public void Disable() => Disabled = true; + + /// + /// Enables number input. + /// + public void Enable() => Disabled = false; + + private async Task OnChange(ChangeEventArgs e) + { + var oldValue = Value; + var newValue = e.Value?.ToString() ?? string.Empty; // object + + await ValueChanged.InvokeAsync(newValue); + + EditContext?.NotifyFieldChanged(fieldIdentifier); + } + + #endregion + + #region Properties, Indexers + + protected override string? ClassNames => + BuildClassNames( + Class, + (BootstrapClass.FormControl, true), + (TextAlignment.ToTextAlignmentClass(), TextAlignment != Alignment.None) + ); + + private string autoComplete => AutoComplete ? "true" : "false"; + + /// + /// If , NumberInput can complete the values automatically by the browser. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool AutoComplete { get; set; } + + /// + /// Gets or sets the disabled state. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool Disabled { get; set; } + + [CascadingParameter] private EditContext EditContext { get; set; } = default!; + + private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; + + /// + /// Gets or sets the maximum length of the input. + /// + [Parameter] + public int? MaxLength { get; set; } + + /// + /// Gets or sets the placeholder. + /// + /// + /// Default value is null. + /// + [Parameter] + public string? Placeholder { get; set; } + + /// + /// Gets or sets the text alignment. + /// + /// + /// Default value is . + /// + [Parameter] + public Alignment TextAlignment { get; set; } = Alignment.None; + + /// + /// Gets or sets the value. + /// + [Parameter] + public string Value { get; set; } = default!; + + /// + /// This event fired on every user keystroke that changes the NumberInput value. + /// + [Parameter] + public EventCallback ValueChanged { get; set; } + + [Parameter] public Expression> ValueExpression { get; set; } = default!; + + #endregion +} diff --git a/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor b/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor new file mode 100644 index 000000000..795fbbbc6 --- /dev/null +++ b/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor @@ -0,0 +1,15 @@ +@namespace BlazorBootstrap +@inherits BlazorBootstrapComponentBase + + \ No newline at end of file diff --git a/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs b/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs new file mode 100644 index 000000000..242320871 --- /dev/null +++ b/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs @@ -0,0 +1,112 @@ +namespace BlazorBootstrap; + +public partial class SelectInput : BlazorBootstrapComponentBase +{ + #region Fields and Constants + + private FieldIdentifier fieldIdentifier; + + #endregion + + #region Methods + + protected override void OnInitialized() + { + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + } + + /// + /// Disables number input. + /// + public void Disable() => Disabled = true; + + /// + /// Enables number input. + /// + public void Enable() => Disabled = false; + + private async Task OnChange(ChangeEventArgs e) + { + var oldValue = Value; + var newValue = e.Value?.ToString() ?? string.Empty; // object + + await ValueChanged.InvokeAsync(newValue); + + EditContext?.NotifyFieldChanged(fieldIdentifier); + } + + #endregion + + #region Properties, Indexers + + protected override string? ClassNames => + BuildClassNames( + Class, + (BootstrapClass.FormControl, true), + (TextAlignment.ToTextAlignmentClass(), TextAlignment != Alignment.None) + ); + + private string autoComplete => AutoComplete ? "true" : "false"; + + /// + /// If , NumberInput can complete the values automatically by the browser. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool AutoComplete { get; set; } + + /// + /// Gets or sets the disabled state. + /// + /// + /// Default value is false. + /// + [Parameter] + public bool Disabled { get; set; } + + [CascadingParameter] private EditContext EditContext { get; set; } = default!; + + private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; + + /// + /// Gets or sets the maximum length of the input. + /// + [Parameter] + public int? MaxLength { get; set; } + + /// + /// Gets or sets the placeholder. + /// + /// + /// Default value is null. + /// + [Parameter] + public string? Placeholder { get; set; } + + /// + /// Gets or sets the text alignment. + /// + /// + /// Default value is . + /// + [Parameter] + public Alignment TextAlignment { get; set; } = Alignment.None; + + /// + /// Gets or sets the value. + /// + [Parameter] + public string Value { get; set; } = default!; + + /// + /// This event fired on every user keystroke that changes the NumberInput value. + /// + [Parameter] + public EventCallback ValueChanged { get; set; } + + [Parameter] public Expression> ValueExpression { get; set; } = default!; + + #endregion +} diff --git a/blazorbootstrap/Constants/BootstrapClass.cs b/blazorbootstrap/Constants/BootstrapClass.cs index 73919b3ad..76e7ae0dc 100644 --- a/blazorbootstrap/Constants/BootstrapClass.cs +++ b/blazorbootstrap/Constants/BootstrapClass.cs @@ -92,9 +92,12 @@ public static class BootstrapClass public const string FormCheck = "form-check"; public const string FormCheckInput = "form-check-input"; + public const string FormCheckLabel = "form-check-label"; public const string FormCheckReverse = "form-check-reverse"; public const string FormControl = "form-control"; + public const string FormLabel = "form-label"; public const string FormRange = "form-range"; + public const string FormSelect = "form-select"; public const string FormSwitch= "form-switch"; public const string ImageFluid = "img-fluid"; From e8506dcfceabd91a9e38c49ce099abfcba743dbf Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 6 Dec 2024 11:20:12 +0530 Subject: [PATCH 09/18] Routing updated --- .../Components/Layout/MainLayout.razor.cs | 100 +++++++++--------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index 78c3a3631..e20bf5320 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -6,41 +6,41 @@ internal override IEnumerable GetNavItems() { navItems ??= new List { - new (){ Id = "1", Text = "Getting Started", Href = "/getting-started", IconName = IconName.HouseDoorFill }, + new (){ Id = "1", Text = "Getting Started", Href = RouteConstants.Demos_GettingStarted_Documentation, IconName = IconName.HouseDoorFill }, new (){ Id = "2", Text = "Layout", IconName = IconName.LayoutTextWindowReverse, IconColor = IconColor.Success }, new (){ Id = "200", Text = "Blazor WebAssembly", Href = "/layout-setup/blazor-webassembly", IconName = IconName.BrowserEdge, ParentId = "2" }, new (){ Id = "201", Text = "Blazor Server", Href = "/layout-setup/blazor-server", IconName = IconName.Server, ParentId = "2" }, new (){ Id = "3", Text = "Content", IconName = IconName.BodyText, IconColor = IconColor.Primary }, - new (){ Id = "300", Text = "Icons", Href = "/icons", IconName = IconName.PersonSquare, ParentId = "3" }, - new (){ Id = "301", Text = "Images", Href = "/images", IconName = IconName.Image, ParentId = "3" }, + new (){ Id = "300", Text = "Icons", Href = RouteConstants.Demos_Icons_Documentation, IconName = IconName.PersonSquare, ParentId = "3" }, + new (){ Id = "301", Text = "Images", Href = RouteConstants.Demos_Images_Documentation, IconName = IconName.Image, ParentId = "3" }, new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success }, - new (){ Id = "400", Text = "Auto Complete", Href = "/form/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" }, - new (){ Id = "401", Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar, ParentId = "4" }, - new (){ Id = "402", Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate, ParentId = "4" }, - new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" }, - new (){ Id = "404", Text = "Range Input", Href = "/form/range-input", IconName = IconName.Sliders, ParentId = "4" }, - new (){ Id = "405", Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn, ParentId = "4" }, + new (){ Id = "400", Text = "Auto Complete", Href = RouteConstants.Demos_AutoComplete_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, + new (){ Id = "401", Text = "Currency Input", Href = RouteConstants.Demos_CurrencyInput_Documentation, IconName = IconName.CurrencyDollar, ParentId = "4" }, + new (){ Id = "402", Text = "Date Input", Href = RouteConstants.Demos_DateInput_Documentation, IconName = IconName.CalendarDate, ParentId = "4" }, + new (){ Id = "403", Text = "Number Input", Href = RouteConstants.Demos_NumberInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" }, + new (){ Id = "404", Text = "Range Input", Href = RouteConstants.Demos_RangeInput_Documentation, IconName = IconName.Sliders, ParentId = "4" }, + new (){ Id = "405", Text = "Switch", Href = RouteConstants.Demos_Switch_Documentation, IconName = IconName.ToggleOn, ParentId = "4" }, new (){ Id = "406", Text = "Text Input", Href = RouteConstants.Demos_TextInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, new (){ Id = "407", Text = "Text Area Input", Href = RouteConstants.Demos_TextAreaInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, - new (){ Id = "408", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, + new (){ Id = "408", Text = "Time Input", Href = RouteConstants.Demos_TimeInput_Documentation, IconName = IconName.ClockFill, ParentId = "4" }, new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger }, - new (){ Id = "500", Text = "Accordion", Href = "/accordion", IconName = IconName.ChevronBarExpand, ParentId = "5" }, - new (){ Id = "501", Text = "Alerts", Href = "/alerts", IconName = IconName.CheckCircleFill, ParentId = "5" }, - new (){ Id = "502", Text = "Badge", Href = "/badge", IconName = IconName.AppIndicator, ParentId = "5" }, - new (){ Id = "503", Text = "Breadcrumb", Href = "/breadcrumb", IconName = IconName.SegmentedNav, ParentId = "5" }, - new (){ Id = "504", Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn, ParentId = "5" }, - new (){ Id = "505", Text = "Callout", Href = "/callout", IconName = IconName.StickyFill, ParentId = "5" }, - new (){ Id = "506", Text = "Card", Href = "/card", IconName = IconName.CardHeading, ParentId = "5" }, - new (){ Id = "507", Text = "Carousel", Href = "/carousel", IconName = IconName.CollectionPlayFill, ParentId = "5" }, - new (){ Id = "508", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All }, - new (){ Id = "509", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" }, - new (){ Id = "510", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" }, - new (){ Id = "511", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" }, - new (){ Id = "512", Text = "Google Map", Href = "/google-map", IconName = IconName.Map, ParentId = "5" }, + new (){ Id = "500", Text = "Accordion", Href = RouteConstants.Demos_Accordion_Documentation, IconName = IconName.ChevronBarExpand, ParentId = "5" }, + new (){ Id = "501", Text = "Alerts", Href = RouteConstants.Demos_Alerts_Documentation, IconName = IconName.CheckCircleFill, ParentId = "5" }, + new (){ Id = "502", Text = "Badge", Href = RouteConstants.Demos_Badge_Documentation, IconName = IconName.AppIndicator, ParentId = "5" }, + new (){ Id = "503", Text = "Breadcrumb", Href = RouteConstants.Demos_Breadcrumb_Documentation, IconName = IconName.SegmentedNav, ParentId = "5" }, + new (){ Id = "504", Text = "Buttons", Href = RouteConstants.Demos_Buttons_Documentation, IconName = IconName.ToggleOn, ParentId = "5" }, + new (){ Id = "505", Text = "Callout", Href = RouteConstants.Demos_Callout_Documentation, IconName = IconName.StickyFill, ParentId = "5" }, + new (){ Id = "506", Text = "Card", Href = RouteConstants.Demos_Card_Documentation, IconName = IconName.CardHeading, ParentId = "5" }, + new (){ Id = "507", Text = "Carousel", Href = RouteConstants.Demos_Carousel_Documentation, IconName = IconName.CollectionPlayFill, ParentId = "5" }, + new (){ Id = "508", Text = "Charts", Href = RouteConstants.Demos_Charts_Documentation, IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All }, + new (){ Id = "509", Text = "Collapse", Href = RouteConstants.Demos_Collapse_Documentation, IconName = IconName.ArrowsCollapse, ParentId = "5" }, + new (){ Id = "510", Text = "Confirm Dialog", Href = RouteConstants.Demos_ConfirmDialog_Documentation, IconName = IconName.QuestionDiamondFill, ParentId = "5" }, + new (){ Id = "511", Text = "Dropdown", Href = RouteConstants.Demos_Dropdown_Documentation, IconName = IconName.MenuButtonWideFill, ParentId = "5" }, + new (){ Id = "512", Text = "Google Map", Href = RouteConstants.Demos_GoogleMap_Documentation, IconName = IconName.Map, ParentId = "5" }, #region Grid @@ -64,39 +64,39 @@ internal override IEnumerable GetNavItems() #endregion Grid - new (){ Id = "514", Text = "Markdown", Href = "/markdown", IconName = IconName.MarkdownFill, ParentId = "5" }, - new (){ Id = "514", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" }, - new (){ Id = "515", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" }, - new (){ Id = "516", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" }, - new (){ Id = "517", Text = "PDF Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill, ParentId = "5" }, - new (){ Id = "518", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" }, - new (){ Id = "519", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" }, - new (){ Id = "520", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" }, - new (){ Id = "521", Text = "Ribbon", Href = "/ribbon", IconName = IconName.WindowStack, ParentId = "5" }, - new (){ Id = "522", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" }, - new (){ Id = "523", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" }, - new (){ Id = "524", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" }, - new (){ Id = "525", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" }, - new (){ Id = "526", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" }, - new (){ Id = "527", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" }, - new (){ Id = "528", Text = "Theme Switcher", Href = "/theme-switcher", IconName = IconName.NintendoSwitch, ParentId = "5" }, - new (){ Id = "529", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" }, - new (){ Id = "530", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, + new (){ Id = "514", Text = "Markdown", Href = RouteConstants.Demos_Markdown_Documentation, IconName = IconName.MarkdownFill, ParentId = "5" }, + new (){ Id = "514", Text = "Modals", Href = RouteConstants.Demos_Modal_Documentation, IconName = IconName.WindowStack, ParentId = "5" }, + new (){ Id = "515", Text = "Offcanvas", Href = RouteConstants.Demos_Offcanvas_Documentation, IconName = IconName.LayoutSidebarReverse, ParentId = "5" }, + new (){ Id = "516", Text = "Pagination", Href = RouteConstants.Demos_Pagination_Documentation, IconName = IconName.ThreeDots, ParentId = "5" }, + new (){ Id = "517", Text = "PDF Viewer", Href = RouteConstants.Demos_PDFViewer_Documentation, IconName = IconName.FilePdfFill, ParentId = "5" }, + new (){ Id = "518", Text = "Placeholders", Href = RouteConstants.Demos_Placeholders_Documentation, IconName = IconName.ColumnsGap, ParentId = "5" }, + new (){ Id = "519", Text = "Preload", Href = RouteConstants.Demos_Preload_Documentation, IconName = IconName.ArrowClockwise, ParentId = "5" }, + new (){ Id = "520", Text = "Progress", Href = RouteConstants.Demos_Progress_Documentation, IconName = IconName.UsbC, ParentId = "5" }, + new (){ Id = "521", Text = "Ribbon", Href = RouteConstants.Demos_Ribbon_Documentation, IconName = IconName.WindowStack, ParentId = "5" }, + new (){ Id = "522", Text = "Script Loader", Href = RouteConstants.Demos_ScriptLoader_Documentation, IconName = IconName.CodeSlash, ParentId = "5" }, + new (){ Id = "523", Text = "Sidebar", Href = RouteConstants.Demos_Sidebar_Documentation, IconName = IconName.LayoutSidebar, ParentId = "5" }, + new (){ Id = "524", Text = "Sidebar 2", Href = RouteConstants.Demos_Sidebar2_Documentation, IconName = IconName.ListNested, ParentId = "5" }, + new (){ Id = "525", Text = "Sortable List", Href = RouteConstants.Demos_SortableList_Documentation, IconName = IconName.ArrowsMove, ParentId = "5" }, + new (){ Id = "526", Text = "Spinner", Href = RouteConstants.Demos_Spinners_Documentation, IconName = IconName.ArrowRepeat, ParentId = "5" }, + new (){ Id = "527", Text = "Tabs", Href = RouteConstants.Demos_Tabs_Documentation, IconName = IconName.WindowPlus, ParentId = "5" }, + new (){ Id = "528", Text = "Theme Switcher", Href = RouteConstants.Demos_ThemeSwitcher_Documentation, IconName = IconName.NintendoSwitch, ParentId = "5" }, + new (){ Id = "529", Text = "Toasts", Href = RouteConstants.Demos_Toasts_Documentation, IconName = IconName.ExclamationTriangleFill, ParentId = "5" }, + new (){ Id = "530", Text = "Tooltips", Href = RouteConstants.Demos_Tooltips_Documentation, IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning }, - new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "601", Text = "Doughnut Chart", Href = "/charts/doughnut-chart", IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "602", Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "603", Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "604", Text = "Polar Area Chart", Href = "/charts/polar-area-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "605", Text = "Radar Chart", Href = "/charts/radar-chart", IconName = IconName.Radar, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "605", Text = "Scatter Chart", Href = "/charts/scatter-chart", IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "600", Text = "Bar Chart", Href = RouteConstants.Demos_BarChart_Documentation, IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "601", Text = "Doughnut Chart", Href = RouteConstants.Demos_DoughnutChart_Documentation, IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "602", Text = "Line Chart", Href = RouteConstants.Demos_LineChart_Documentation, IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "603", Text = "Pie Chart", Href = RouteConstants.Demos_PieChart_Documentation, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "604", Text = "Polar Area Chart", Href = RouteConstants.Demos_PolarAreaChart_Documentation, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "605", Text = "Radar Chart", Href = RouteConstants.Demos_RadarChart_Documentation, IconName = IconName.Radar, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "605", Text = "Scatter Chart", Href = RouteConstants.Demos_ScatterChart_Documentation, IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All }, new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success }, - new (){ Id = "700", Text = "Modal Service", Href = "/services/modal-service", IconName = IconName.WindowStack, ParentId = "7" }, + new (){ Id = "700", Text = "Modal Service", Href = RouteConstants.Demos_ModalService_Documentation, IconName = IconName.WindowStack, ParentId = "7" }, new(){ Id = "19", Text = "Utilities", IconName = IconName.GearWideConnected, IconColor = IconColor.Info }, - new (){ Id = "1900", Text = "Color Utility", Href = "/utils/color-utility", IconName = IconName.Palette2, ParentId = "19" }, + new (){ Id = "1900", Text = "Color Utility", Href = RouteConstants.Demos_ColorUtils_Documentation, IconName = IconName.Palette2, ParentId = "19" }, }; return navItems; From 619158e9909e752677c7f515fe4b7bdf7367562f Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 6 Dec 2024 11:53:26 +0530 Subject: [PATCH 10/18] Links updated --- .../Components/Layout/MainLayout.razor.cs | 35 ++++++++++--------- .../Components/Pages/Index.razor | 31 +++++++++++----- 2 files changed, 42 insertions(+), 24 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index e20bf5320..3ec715e43 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -18,10 +18,13 @@ internal override IEnumerable GetNavItems() new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success }, new (){ Id = "400", Text = "Auto Complete", Href = RouteConstants.Demos_AutoComplete_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, + new (){ Id = "400", Text = "Checkbox Input", Href = RouteConstants.Demos_CheckboxInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, new (){ Id = "401", Text = "Currency Input", Href = RouteConstants.Demos_CurrencyInput_Documentation, IconName = IconName.CurrencyDollar, ParentId = "4" }, new (){ Id = "402", Text = "Date Input", Href = RouteConstants.Demos_DateInput_Documentation, IconName = IconName.CalendarDate, ParentId = "4" }, new (){ Id = "403", Text = "Number Input", Href = RouteConstants.Demos_NumberInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" }, + new (){ Id = "403", Text = "Radio Input", Href = RouteConstants.Demos_RadioInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" }, new (){ Id = "404", Text = "Range Input", Href = RouteConstants.Demos_RangeInput_Documentation, IconName = IconName.Sliders, ParentId = "4" }, + new (){ Id = "404", Text = "Select Input", Href = RouteConstants.Demos_SelectInput_Documentation, IconName = IconName.Sliders, ParentId = "4" }, new (){ Id = "405", Text = "Switch", Href = RouteConstants.Demos_Switch_Documentation, IconName = IconName.ToggleOn, ParentId = "4" }, new (){ Id = "406", Text = "Text Input", Href = RouteConstants.Demos_TextInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, new (){ Id = "407", Text = "Text Area Input", Href = RouteConstants.Demos_TextAreaInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, @@ -45,22 +48,22 @@ internal override IEnumerable GetNavItems() #region Grid new (){ Id = "513", Text = "Grid", IconName = IconName.Grid, ParentId = "5" }, - new (){ Id = "51101", Text = "Overview", Href = "/grid/overview", IconName = IconName.Grid, ParentId = "513" }, // first item - do not change - new (){ Id = "51102", Text = "Alignment", Href = "/grid/alignment", IconName = IconName.Justify, ParentId = "513" }, - new (){ Id = "51103", Text = "Custom CSS Class", Href = "/grid/custom-css-class", IconName = IconName.FileTypeCss, ParentId = "513" }, - new (){ Id = "51104", Text = "Data Binding", Href = "/grid/data-binding", IconName = IconName.GridFill, ParentId = "513" }, - new (){ Id = "51106", Text = "Detail View", Href = "/grid/detail-view", IconName = IconName.ListNested, ParentId = "513" }, - new (){ Id = "51107", Text = "Events", Href = "/grid/events", IconName = IconName.LightningChargeFill, ParentId = "513" }, - new (){ Id = "51107", Text = "Filters", Href = "/grid/filters", IconName = IconName.FunnelFill, ParentId = "513" }, - new (){ Id = "51108", Text = "Fixed Header", Href = "/grid/fixed-header", IconName = IconName.Table, ParentId = "513" }, - new (){ Id = "51109", Text = "Freeze Columns", Href = "/grid/freeze-columns", IconName = IconName.LayoutThreeColumns, ParentId = "513" }, - new (){ Id = "51110", Text = "Grid Settings", Href = "/grid/settings", IconName = IconName.GearFill, ParentId = "513" }, - new (){ Id = "51111", Text = "Nested Grid", Href = "/grid/nested-grid", IconName = IconName.Pip, ParentId = "513" }, - new (){ Id = "51112", Text = "Paging", Href = "/grid/paging", IconName = IconName.ChevronBarRight, ParentId = "513" }, - new (){ Id = "51113", Text = "Selection", Href = "/grid/selection", IconName = IconName.CheckSquareFill, ParentId = "513" }, - new (){ Id = "51114", Text = "Sorting", Href = "/grid/sorting", IconName = IconName.ArrowDownUp, ParentId = "513" }, - new (){ Id = "51115", Text = "Translations", Href = "/grid/translations", IconName = IconName.Translate, ParentId = "513" }, - new (){ Id = "51199", Text = "Other", Href = "/grid/other", IconName = IconName.PlusSquareFill, ParentId = "513" }, // last item - do not change + new (){ Id = "51101", Text = "Overview", Href = RouteConstants.Demos_Grid_Overview_Documentation, IconName = IconName.Grid, ParentId = "513" }, // first item - do not change + new (){ Id = "51102", Text = "Alignment", Href = RouteConstants.Demos_Grid_Alignment_Documentation, IconName = IconName.Justify, ParentId = "513" }, + new (){ Id = "51103", Text = "Custom CSS Class", Href = RouteConstants.Demos_Grid_CustomCSSClass_Documentation, IconName = IconName.FileTypeCss, ParentId = "513" }, + new (){ Id = "51104", Text = "Data Binding", Href = RouteConstants.Demos_Grid_DataBinding_Documentation, IconName = IconName.GridFill, ParentId = "513" }, + new (){ Id = "51106", Text = "Detail View", Href = RouteConstants.Demos_Grid_DetailView_Documentation, IconName = IconName.ListNested, ParentId = "513" }, + new (){ Id = "51107", Text = "Events", Href = RouteConstants.Demos_Grid_Events_Documentation, IconName = IconName.LightningChargeFill, ParentId = "513" }, + new (){ Id = "51107", Text = "Filters", Href = RouteConstants.Demos_Grid_Filters_Documentation, IconName = IconName.FunnelFill, ParentId = "513" }, + new (){ Id = "51108", Text = "Fixed Header", Href = RouteConstants.Demos_Grid_FixedHeader_Documentation, IconName = IconName.Table, ParentId = "513" }, + new (){ Id = "51109", Text = "Freeze Columns", Href = RouteConstants.Demos_Grid_FreezeColumns_Documentation, IconName = IconName.LayoutThreeColumns, ParentId = "513" }, + new (){ Id = "51110", Text = "Grid Settings", Href = RouteConstants.Demos_Grid_Settings_Documentation, IconName = IconName.GearFill, ParentId = "513" }, + new (){ Id = "51111", Text = "Nested Grid", Href = RouteConstants.Demos_Grid_NestedGrid_Documentation, IconName = IconName.Pip, ParentId = "513" }, + new (){ Id = "51112", Text = "Paging", Href = RouteConstants.Demos_Grid_Paging_Documentation, IconName = IconName.ChevronBarRight, ParentId = "513" }, + new (){ Id = "51113", Text = "Selection", Href = RouteConstants.Demos_Grid_Selection_Documentation, IconName = IconName.CheckSquareFill, ParentId = "513" }, + new (){ Id = "51114", Text = "Sorting", Href = RouteConstants.Demos_Grid_Sorting_Documentation, IconName = IconName.ArrowDownUp, ParentId = "513" }, + new (){ Id = "51115", Text = "Translations", Href = RouteConstants.Demos_Grid_Translations_Documentation, IconName = IconName.Translate, ParentId = "513" }, + new (){ Id = "51199", Text = "Other", Href = RouteConstants.Demos_Grid_OtherExamples_Documentation, IconName = IconName.PlusSquareFill, ParentId = "513" }, // last item - do not change #endregion Grid diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index 14ced1719..1feb905fc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -85,6 +85,11 @@

Charts
+
+ +

Checkbox Input New

+ +

Collapse

@@ -157,7 +162,7 @@
-

PDF Viewer Updated

+

PDF Viewer
@@ -176,10 +181,15 @@
- -

Range Input

+ +

Radio Input New
+
+ +

Range Input

+ +

Ribbon

@@ -190,6 +200,11 @@

Script Loader
+
+ +

Select Input New

+ +

Sidebar

@@ -222,12 +237,12 @@
-

Text Input

+

Text Input New
-

Text Area Input

+

Text Area Input New
@@ -237,7 +252,7 @@
-

Theme Switcher New

+

Theme Switcher
@@ -305,12 +320,12 @@
-

Text Input

+

Text Input New
-

Text Area Input

+

Text Area Input New
From 114e469767e285781be64382e2f4b539f2c86708 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 6 Dec 2024 11:54:22 +0530 Subject: [PATCH 11/18] Index page links updated --- .../Components/Pages/Index.razor | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index 1feb905fc..c7ff88a08 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -85,11 +85,11 @@

Charts

-
+

Checkbox Input New

- -
+ +

Collapse

@@ -185,11 +185,11 @@

Radio Input New
-
- -

Range Input

- -
+
+ +

Range Input

+ +

Ribbon

@@ -200,11 +200,11 @@

Script Loader
-
- +
+

Select Input New

- -
+ +

Sidebar

From c8a69c2237611711b46438096aa24b6bd1df126f Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 7 Dec 2024 20:43:09 +0530 Subject: [PATCH 12/18] Demos - Index page updates --- .../Components/Pages/Index.razor | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index c7ff88a08..eca66a2a1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -293,6 +293,11 @@

Auto Complete
+
+ +

Checkbox Input New

+ +

Currency Input

@@ -308,11 +313,21 @@

Number Input
+
+ +

Radio Input New

+ +

Range Input
+
+ +

Select Input New

+ +

Switch

From 5949bc08660f1c68a480e039449129d0a6c95e9f Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 7 Dec 2024 22:27:51 +0530 Subject: [PATCH 13/18] CheckboxInput updates --- .../BlazorBootstrap.Demo.RCL.csproj | 5 --- .../CheckboxInputDocumentation.razor | 42 +++++++++++++++++++ .../CheckboxInput_Demo_01_Basic_Usage.razor | 8 ++++ .../CheckboxInput_Demo_02_Disable_A.razor | 22 ++++++++++ .../CheckboxInput_Demo_02_Disable_B.razor | 28 +++++++++++++ ...boxInput_Demo_03_Events_ValueChanged.razor | 13 ++++++ .../TextInput/TextInputDocumentation.razor | 2 +- .../Form/CheckboxInput/CheckboxInput.razor | 28 +++++++------ .../Form/CheckboxInput/CheckboxInput.razor.cs | 6 ++- .../Form/RadioInput/RadioInput.razor.cs | 4 ++ .../Form/SelectInput/SelectInput.razor.cs | 4 ++ .../Form/TextAreaInput/TextAreaInput.razor.cs | 4 ++ .../Form/TextInput/TextInput.razor.cs | 4 ++ 13 files changed, 150 insertions(+), 20 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_01_Basic_Usage.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_A.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_B.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_03_Events_ValueChanged.razor diff --git a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj index b39bee455..3a3a921dc 100644 --- a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj +++ b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj @@ -19,11 +19,6 @@ - - - - - diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor new file mode 100644 index 000000000..cbea8ebf1 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor @@ -0,0 +1,42 @@ +@page "/checkbox-input" + +@attribute [Route(pageUrl)] + + + + + @pageDescription + + + + +
+ +
+ +
+
Use the Disabled parameter to disable the CheckboxInput.
+ +
Also, use Enable() and Disable() methods to enable and disable the CheckboxInput.
+ + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
+ +
+
This event fires when the CheckboxInput value changes, but not on every keystroke.
+ +
+ +@code { + private const string pageUrl = RouteConstants.Demos_CheckboxInput_Documentation; + private const string pageTitle = "Blazor CheckboxInput"; + private const string pageDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'."; + private const string metaTitle = "Blazor CheckboxInput Component"; + private const string metaDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'."; + private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_01_Basic_Usage.razor new file mode 100644 index 000000000..4e6861f3a --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_01_Basic_Usage.razor @@ -0,0 +1,8 @@ + + + +@code +{ + private bool isChecked; + private bool isChecked2 = true; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_A.razor new file mode 100644 index 000000000..0966297e2 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_A.razor @@ -0,0 +1,22 @@ + + + +
+ + + +
+ +@code +{ + private bool isChecked; + private bool isChecked2 = true; + + private bool disabled = true; + + private void Enable() => disabled = false; + + private void Disable() => disabled = true; + + private void Toggle() => disabled = !disabled; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_B.razor new file mode 100644 index 000000000..4ca9f8739 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_B.razor @@ -0,0 +1,28 @@ + + + +
+ + +
+ +@code +{ + private CheckboxInput? checkboxInputRef1; + private CheckboxInput? checkboxInputRef2; + + private bool isChecked; + private bool isChecked2 = true; + + private void Disable() + { + checkboxInputRef1.Disable(); + checkboxInputRef2.Disable(); + } + + private void Enable() + { + checkboxInputRef1.Enable(); + checkboxInputRef2.Enable(); + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_03_Events_ValueChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_03_Events_ValueChanged.razor new file mode 100644 index 000000000..ad0f2601a --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_03_Events_ValueChanged.razor @@ -0,0 +1,13 @@ + +Current value: @isChecked +@code +{ + private bool isChecked; + + private void CheckboxValueChanged(bool value) + { + isChecked = value; + + // do something + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor index b50a1c44c..59c2a3cb3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextInput/TextInputDocumentation.razor @@ -55,6 +55,6 @@ private const string pageTitle = "Blazor TextInput"; private const string pageDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text'."; private const string metaTitle = "Blazor TextInput Component"; - private const string metaDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'time'."; + private const string metaDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text'."; private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL } diff --git a/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor b/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor index 857b9a32b..2f802c5dc 100644 --- a/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor +++ b/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor @@ -1,18 +1,20 @@ @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase - +
+ -@if (!string.IsNullOrWhiteSpace(Label)) -{ + @if (!string.IsNullOrWhiteSpace(Label)) + { -} \ No newline at end of file + } +
\ No newline at end of file diff --git a/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs b/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs index c95a53717..3916ba00d 100644 --- a/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs +++ b/blazorbootstrap/Components/Form/CheckboxInput/CheckboxInput.razor.cs @@ -12,7 +12,11 @@ public partial class CheckboxInput : BlazorBootstrapComponentBase protected override void OnInitialized() { + AdditionalAttributes ??= new Dictionary(); + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + + base.OnInitialized(); } /// @@ -59,7 +63,7 @@ private async Task OnChange(ChangeEventArgs e) /// Gets the associated . /// [CascadingParameter] - private EditContext EditContext { get; set; } = default!; + private EditContext? EditContext { get; set; } = default!; /// /// Gets or sets the label. diff --git a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs index f15773c89..1a017628d 100644 --- a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs +++ b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs @@ -12,7 +12,11 @@ public partial class RadioInput : BlazorBootstrapComponentBase protected override void OnInitialized() { + AdditionalAttributes ??= new Dictionary(); + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + + base.OnInitialized(); } /// diff --git a/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs b/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs index 242320871..fde894568 100644 --- a/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs +++ b/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs @@ -12,7 +12,11 @@ public partial class SelectInput : BlazorBootstrapComponentBase protected override void OnInitialized() { + AdditionalAttributes ??= new Dictionary(); + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + + base.OnInitialized(); } /// diff --git a/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs b/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs index c5d191670..fff52731f 100644 --- a/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs +++ b/blazorbootstrap/Components/Form/TextAreaInput/TextAreaInput.razor.cs @@ -12,7 +12,11 @@ public partial class TextAreaInput : BlazorBootstrapComponentBase protected override void OnInitialized() { + AdditionalAttributes ??= new Dictionary(); + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + + base.OnInitialized(); } /// diff --git a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs index fef1e41c5..535ade3d5 100644 --- a/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs +++ b/blazorbootstrap/Components/Form/TextInput/TextInput.razor.cs @@ -12,7 +12,11 @@ public partial class TextInput : BlazorBootstrapComponentBase protected override void OnInitialized() { + AdditionalAttributes ??= new Dictionary(); + fieldIdentifier = FieldIdentifier.Create(ValueExpression); + + base.OnInitialized(); } /// From b02c3cde2b6958be8e3f11c3635e4716a6f39f1f Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 7 Dec 2024 23:00:59 +0530 Subject: [PATCH 14/18] RadioInput updates --- .../Components/Layout/MainLayout.razor.cs | 6 +-- .../RadioInput/RadioInputDocumentation.razor | 42 +++++++++++++++++ .../RadioInput_Demo_01_Basic_Usage.razor | 8 ++++ .../RadioInput_Demo_02_Disable_A.razor | 22 +++++++++ .../RadioInput_Demo_02_Disable_B.razor | 28 +++++++++++ ...dioInput_Demo_03_Events_ValueChanged.razor | 13 +++++ .../Form/RadioInput/RadioInput.razor | 29 +++++++----- .../Form/RadioInput/RadioInput.razor.cs | 47 +++++-------------- 8 files changed, 146 insertions(+), 49 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_A.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_B.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index 3ec715e43..c94f1f78e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -18,13 +18,13 @@ internal override IEnumerable GetNavItems() new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success }, new (){ Id = "400", Text = "Auto Complete", Href = RouteConstants.Demos_AutoComplete_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, - new (){ Id = "400", Text = "Checkbox Input", Href = RouteConstants.Demos_CheckboxInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, + new (){ Id = "400", Text = "Checkbox Input", Href = RouteConstants.Demos_CheckboxInput_Documentation, IconName = IconName.CheckSquareFill, ParentId = "4" }, new (){ Id = "401", Text = "Currency Input", Href = RouteConstants.Demos_CurrencyInput_Documentation, IconName = IconName.CurrencyDollar, ParentId = "4" }, new (){ Id = "402", Text = "Date Input", Href = RouteConstants.Demos_DateInput_Documentation, IconName = IconName.CalendarDate, ParentId = "4" }, new (){ Id = "403", Text = "Number Input", Href = RouteConstants.Demos_NumberInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" }, - new (){ Id = "403", Text = "Radio Input", Href = RouteConstants.Demos_RadioInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" }, + new (){ Id = "403", Text = "Radio Input", Href = RouteConstants.Demos_RadioInput_Documentation, IconName = IconName.RecordCircle, ParentId = "4" }, new (){ Id = "404", Text = "Range Input", Href = RouteConstants.Demos_RangeInput_Documentation, IconName = IconName.Sliders, ParentId = "4" }, - new (){ Id = "404", Text = "Select Input", Href = RouteConstants.Demos_SelectInput_Documentation, IconName = IconName.Sliders, ParentId = "4" }, + new (){ Id = "404", Text = "Select Input", Href = RouteConstants.Demos_SelectInput_Documentation, IconName = IconName.MenuButtonWideFill, ParentId = "4" }, new (){ Id = "405", Text = "Switch", Href = RouteConstants.Demos_Switch_Documentation, IconName = IconName.ToggleOn, ParentId = "4" }, new (){ Id = "406", Text = "Text Input", Href = RouteConstants.Demos_TextInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, new (){ Id = "407", Text = "Text Area Input", Href = RouteConstants.Demos_TextAreaInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor new file mode 100644 index 000000000..4b22004e0 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor @@ -0,0 +1,42 @@ +@page "/radio-input" + +@attribute [Route(pageUrl)] + + + + + @pageDescription + + + + +
+ +
+ +
+
Use the Disabled parameter to disable the CheckboxInput.
+ +
Also, use Enable() and Disable() methods to enable and disable the CheckboxInput.
+ + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
+ +
+
This event fires when the CheckboxInput value changes, but not on every keystroke.
+ +
+ +@code { + private const string pageUrl = RouteConstants.Demos_RadioInput_Documentation; + private const string pageTitle = "Blazor RadioInput"; + private const string pageDescription = "The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'."; + private const string metaTitle = "Blazor RadioInput Component"; + private const string metaDescription = "The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'."; + private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor new file mode 100644 index 000000000..eb284e461 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor @@ -0,0 +1,8 @@ + + + +@code +{ + private bool isChecked; + private bool isChecked2 = true; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_A.razor new file mode 100644 index 000000000..5be792081 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_A.razor @@ -0,0 +1,22 @@ + + + +
+ + + +
+ +@code +{ + private bool isChecked; + private bool isChecked2 = true; + + private bool disabled = true; + + private void Enable() => disabled = false; + + private void Disable() => disabled = true; + + private void Toggle() => disabled = !disabled; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_B.razor new file mode 100644 index 000000000..65a71eb0c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_B.razor @@ -0,0 +1,28 @@ + + + +
+ + +
+ +@code +{ + private RadioInput? radioInputRef1; + private RadioInput? radioInputRef2; + + private bool isChecked; + private bool isChecked2 = true; + + private void Disable() + { + radioInputRef1.Disable(); + radioInputRef2.Disable(); + } + + private void Enable() + { + radioInputRef1.Enable(); + radioInputRef2.Enable(); + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor new file mode 100644 index 000000000..a8c664382 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor @@ -0,0 +1,13 @@ + +Current value: @isChecked +@code +{ + private bool isChecked; + + private void CheckboxValueChanged(bool value) + { + isChecked = value; + + // do something + } +} diff --git a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor index 795fbbbc6..df18b0ba7 100644 --- a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor +++ b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor @@ -1,15 +1,20 @@ @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase - \ No newline at end of file +
+ + + @if (!string.IsNullOrWhiteSpace(Label)) + { + + } +
\ No newline at end of file diff --git a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs index 1a017628d..805fb9d30 100644 --- a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs +++ b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs @@ -32,7 +32,7 @@ protected override void OnInitialized() private async Task OnChange(ChangeEventArgs e) { var oldValue = Value; - var newValue = e.Value?.ToString() ?? string.Empty; // object + var newValue = e.Value is not null && (bool)e.Value; await ValueChanged.InvokeAsync(newValue); @@ -46,21 +46,10 @@ private async Task OnChange(ChangeEventArgs e) protected override string? ClassNames => BuildClassNames( Class, - (BootstrapClass.FormControl, true), - (TextAlignment.ToTextAlignmentClass(), TextAlignment != Alignment.None) + (BootstrapClass.FormCheckInput, true), + (EditContext?.FieldCssClass(fieldIdentifier) ?? string.Empty, true) ); - private string autoComplete => AutoComplete ? "true" : "false"; - - /// - /// If , NumberInput can complete the values automatically by the browser. - /// - /// - /// Default value is false. - /// - [Parameter] - public bool AutoComplete { get; set; } - /// /// Gets or sets the disabled state. /// @@ -70,47 +59,37 @@ private async Task OnChange(ChangeEventArgs e) [Parameter] public bool Disabled { get; set; } - [CascadingParameter] private EditContext EditContext { get; set; } = default!; - - private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; - /// - /// Gets or sets the maximum length of the input. + /// Gets the associated . /// - [Parameter] - public int? MaxLength { get; set; } + [CascadingParameter] + private EditContext EditContext { get; set; } = default!; /// - /// Gets or sets the placeholder. + /// Gets or sets the label. /// - /// - /// Default value is null. - /// [Parameter] - public string? Placeholder { get; set; } + public string? Label { get; set; } /// - /// Gets or sets the text alignment. + /// Gets or sets the name. /// - /// - /// Default value is . - /// [Parameter] - public Alignment TextAlignment { get; set; } = Alignment.None; + public string? Name { get; set; } /// /// Gets or sets the value. /// [Parameter] - public string Value { get; set; } = default!; + public bool Value { get; set; } = default!; /// /// This event fired on every user keystroke that changes the NumberInput value. /// [Parameter] - public EventCallback ValueChanged { get; set; } + public EventCallback ValueChanged { get; set; } - [Parameter] public Expression> ValueExpression { get; set; } = default!; + [Parameter] public Expression> ValueExpression { get; set; } = default!; #endregion } From ba365d88c91a747a0d55d7970489e2eca8c61a5b Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sun, 8 Dec 2024 18:25:51 +0530 Subject: [PATCH 15/18] Radio component updates --- .../RadioInput/RadioInput_Demo_01_Basic_Usage.razor | 5 +++-- .../RadioInput/RadioInput_Demo_02_Disable_A.razor | 5 +++-- .../RadioInput/RadioInput_Demo_02_Disable_B.razor | 11 ++++++----- .../Components/Form/RadioInput/RadioInput.razor.cs | 2 +- 4 files changed, 13 insertions(+), 10 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor index eb284e461..1cf04d678 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor @@ -1,5 +1,6 @@ - - +

Would you like to receive notifications?

+ + @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_A.razor index 5be792081..6260b867d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_A.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_A.razor @@ -1,5 +1,6 @@ - - +

Would you like to receive notifications?

+ +
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_B.razor index 65a71eb0c..b0a91473c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_B.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_B.razor @@ -1,5 +1,6 @@ - - +

Would you like to receive notifications?

+ +
@@ -8,7 +9,7 @@ @code { - private RadioInput? radioInputRef1; + private RadioInput? radioInputRef; private RadioInput? radioInputRef2; private bool isChecked; @@ -16,13 +17,13 @@ private void Disable() { - radioInputRef1.Disable(); + radioInputRef.Disable(); radioInputRef2.Disable(); } private void Enable() { - radioInputRef1.Enable(); + radioInputRef.Enable(); radioInputRef2.Enable(); } } diff --git a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs index 805fb9d30..fa2b1a4a8 100644 --- a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs +++ b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs @@ -32,7 +32,7 @@ protected override void OnInitialized() private async Task OnChange(ChangeEventArgs e) { var oldValue = Value; - var newValue = e.Value is not null && (bool)e.Value; + var newValue = bool.TryParse(e.Value?.ToString(), out bool result) ? result : result; await ValueChanged.InvokeAsync(newValue); From 1f3168e7d8def1e1196511347a088643ef36249e Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 13 Dec 2024 21:13:23 +0530 Subject: [PATCH 16/18] RadioInput updates --- .../RadioInput/RadioInputDocumentation.razor | 6 +++--- ...dioInput_Demo_03_Events_ValueChanged.razor | 19 ++++++++++++++----- .../Form/RadioInput/RadioInput.razor.cs | 4 +++- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor index 4b22004e0..e597dcf66 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor @@ -18,9 +18,9 @@
-
Use the Disabled parameter to disable the CheckboxInput.
+
Use the Disabled parameter to disable the RadioInput.
-
Also, use Enable() and Disable() methods to enable and disable the CheckboxInput.
+
Also, use Enable() and Disable() methods to enable and disable the RadioInput.
Do not use both the Disabled parameter and Enable() & Disable() methods. @@ -28,7 +28,7 @@
-
This event fires when the CheckboxInput value changes, but not on every keystroke.
+
This event fires when the RadioInput value changes, but not on every keystroke.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor index a8c664382..db9459ad1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor @@ -1,12 +1,21 @@ - -Current value: @isChecked + + + @code { - private bool isChecked; + private bool isYesChecked; + private bool isNoChecked; + + private void YesOptionSelectionChanged(bool value) + { + isYesChecked = value; + + // do something + } - private void CheckboxValueChanged(bool value) + private void NoOptionSelectionChanged(bool value) { - isChecked = value; + isYesChecked = value; // do something } diff --git a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs index fa2b1a4a8..902ddf906 100644 --- a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs +++ b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs @@ -32,10 +32,12 @@ protected override void OnInitialized() private async Task OnChange(ChangeEventArgs e) { var oldValue = Value; - var newValue = bool.TryParse(e.Value?.ToString(), out bool result) ? result : result; + var newValue = string.Equals(e.Value?.ToString(), "on"); await ValueChanged.InvokeAsync(newValue); + Console.WriteLine($"Old value: {oldValue}, New value: {e.Value}"); + EditContext?.NotifyFieldChanged(fieldIdentifier); } From 0457f9345a4adf4575795b5729e9ace0ff92a30d Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 13 Dec 2024 21:49:06 +0530 Subject: [PATCH 17/18] Removed AI Chat component dependency --- .../Pages/AI/AIChat/AIChatDocumentation.razor | 26 --- .../AI/AIChat/AIChat_Demo_01_Examples.razor | 4 - .../Components/Pages/Index.razor | 14 -- .../Constants/RouteConstants.cs | 4 +- blazorbootstrap/BlazorBootstrap.csproj | 3 - .../Components/AI/Chat/AIChat.razor | 63 ------- .../Components/AI/Chat/AIChat.razor.cs | 156 ------------------ .../Components/AI/Chat/AIChatInterop.cs.cs | 12 -- .../Core/BlazorBootstrapComponentBase.cs | 7 +- .../BlazorBootstrapLayoutComponentBase.cs | 6 +- blazorbootstrap/Config.cs | 3 +- .../Models/AI/OpenAIChatMessage.cs | 3 - .../Models/AI/OpenAIChatPayload.cs | 56 ------- .../wwwroot/blazor.bootstrap.ai.js | 57 ------- blazorbootstrap/wwwroot/blazor.bootstrap.js | 80 --------- 15 files changed, 5 insertions(+), 489 deletions(-) delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChat_Demo_01_Examples.razor delete mode 100644 blazorbootstrap/Components/AI/Chat/AIChat.razor delete mode 100644 blazorbootstrap/Components/AI/Chat/AIChat.razor.cs delete mode 100644 blazorbootstrap/Components/AI/Chat/AIChatInterop.cs.cs delete mode 100644 blazorbootstrap/Models/AI/OpenAIChatMessage.cs delete mode 100644 blazorbootstrap/Models/AI/OpenAIChatPayload.cs delete mode 100644 blazorbootstrap/wwwroot/blazor.bootstrap.ai.js diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor deleted file mode 100644 index fffd2c360..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor +++ /dev/null @@ -1,26 +0,0 @@ -@attribute [Route(pageUrl)] - - - - - @pageDescription - - - - -
-
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.
- -
- -@code{ - private const string pageUrl = RouteConstants.Demos_AI_Chat_Documentation; - private const string pageTitle = "Blazor Open AI Chat Component"; - private const string pageDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update - private const string metaTitle = "Blazor Open AI Chat Component"; - private const string metaDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update - private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChat_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChat_Demo_01_Examples.razor deleted file mode 100644 index a9cdd295b..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChat_Demo_01_Examples.razor +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index eca66a2a1..34d81885e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -268,20 +268,6 @@
-@*
-
-

AI Components

-
- -
-
- -

Open AI Chat

- -
-
-
*@ -

Form Components

diff --git a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs index 0d30d4d5b..874eb6775 100644 --- a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs +++ b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs @@ -12,8 +12,8 @@ public static class RouteConstants public const string Demos_GettingStarted_Documentation = Demos_Prefix + "/getting-started"; // AI - public const string Demos_AI_Prefix = Demos_Prefix + "/ai"; - public const string Demos_AI_Chat_Documentation = Demos_AI_Prefix + "/open-ai-chat"; + //public const string Demos_AI_Prefix = Demos_Prefix + "/ai"; + //public const string Demos_AI_Chat_Documentation = Demos_AI_Prefix + "/open-ai-chat"; // Content public const string Demos_Icons_Documentation = Demos_Prefix + "/icons"; diff --git a/blazorbootstrap/BlazorBootstrap.csproj b/blazorbootstrap/BlazorBootstrap.csproj index ba6f40e44..dde59ea39 100644 --- a/blazorbootstrap/BlazorBootstrap.csproj +++ b/blazorbootstrap/BlazorBootstrap.csproj @@ -46,17 +46,14 @@ - - - \ No newline at end of file diff --git a/blazorbootstrap/Components/AI/Chat/AIChat.razor b/blazorbootstrap/Components/AI/Chat/AIChat.razor deleted file mode 100644 index 254561235..000000000 --- a/blazorbootstrap/Components/AI/Chat/AIChat.razor +++ /dev/null @@ -1,63 +0,0 @@ -@namespace BlazorBootstrap -@inherits BlazorBootstrapComponentBase - - \ No newline at end of file diff --git a/blazorbootstrap/Components/AI/Chat/AIChat.razor.cs b/blazorbootstrap/Components/AI/Chat/AIChat.razor.cs deleted file mode 100644 index cc8c1ec77..000000000 --- a/blazorbootstrap/Components/AI/Chat/AIChat.razor.cs +++ /dev/null @@ -1,156 +0,0 @@ -namespace BlazorBootstrap; - -public partial class AIChat : BlazorBootstrapComponentBase -{ - #region Fields and Constants - - private readonly List conversationHistory = new(); - private string? apiKey; - private string? apiVersion; - private string? currentCompletion; - private string? deploymentName; - private string? endpoint; - private bool isRequestInProgress; - private DotNetObjectReference? objRef; - private string userPrompt = string.Empty; - - #endregion - - #region Methods - - protected override async Task OnInitializedAsync() - { - var configurationSection = Configuration.GetSection("AzureOpenAI"); - - if (Configuration is null) - throw new ArgumentException("`AzureOpenAI` section was not found in the application configuration."); - - endpoint = configurationSection["Endpoint"]; - - if (endpoint is null) - throw new ArgumentException("`Endpoint` key/value was not found in the 'AzureOpenAI' section of the application configuration."); - - deploymentName = configurationSection["DeploymentName"]; - - if (deploymentName is null) - throw new ArgumentException("`DeploymentName` key/value was not found in the 'AzureOpenAI' section of the application configuration."); - - apiKey = configurationSection["ApiKey"]; - - if (apiKey is null) - throw new ArgumentException("`ApiKey` key/value was not found in the 'AzureOpenAI' section of the application configuration."); - - apiVersion = configurationSection["ApiVersion"]; - - if (apiVersion is null) - throw new ArgumentException("`ApiVersion` key/value was not found in the 'AzureOpenAI' section of the application configuration."); - - objRef ??= DotNetObjectReference.Create(this); - - await base.OnInitializedAsync(); - } - - [JSInvokable] - public async Task ChartCompletetionsStreamJs(string content, bool done) - { - ClearInput(); - - if (isRequestInProgress) - isRequestInProgress = false; - - if (done) - { - conversationHistory.Add(new OpenAIChatMessage("system", currentCompletion!)); - currentCompletion = ""; - await InvokeAsync(StateHasChanged); - await JSRuntime.InvokeVoidAsync(BlazorBootstrapInterop.ScrollToElementBottom, Id); - - return; - } - - currentCompletion += content; - await InvokeAsync(StateHasChanged); - await JSRuntime.InvokeVoidAsync(BlazorBootstrapInterop.ScrollToElementBottom, Id); - } - - private void ClearInput() => userPrompt = string.Empty; - - private async Task CreateCompletionAsync(List messages) - { - isRequestInProgress = true; - - var payload = new OpenAIChatPayload { Messages = messages, MaximumTokens = MaximumTokens, Temperature = Temperature, TopP = TopP }; - - try - { - await JSRuntime.InvokeVoidAsync( - AIChatInterop.AzureOpenAIChatCompletions, - $"{endpoint}openai/deployments/{deploymentName}/chat/completions?api-version={apiVersion}", - apiKey, - payload, - objRef! - ); - } - catch - { - isRequestInProgress = false; - } - } - - private async Task SendPromptAsync() - { - if (string.IsNullOrWhiteSpace(userPrompt)) - return; - - var message = new OpenAIChatMessage("user", userPrompt); - conversationHistory.Add(message); - - await CreateCompletionAsync(new List { message }); - } - - #endregion - - #region Properties, Indexers - - protected override string? ClassNames => - BuildClassNames( - Class, - (BootstrapClass.Container, true) - ); - - protected override string? StyleNames => - BuildStyleNames( - Style, - //("min-height:200px", true), - //("max-height:400px", true), - ("overflow-x:hidden", true), - ("overflow-y:auto", true) - ); - - /// - /// The maximum number of tokens to generate shared between the prompt and completion. - /// The exact limit varies by model. (One token is roughly 4 characters for standard English text) - /// Minimum 1 and the maximum tokens is 4096. - /// - /// Default value is 2048. This value is limited by gpt-3.5-turbo. - [Parameter] - public long MaximumTokens { get; set; } = 2048; - - /// - /// Controls randomness: Lowering results in less random completions. - /// As the temperature approaches zero, the model will become deterministic and repetitive. - /// Minimum 1 and the maximum is 2. - /// - /// Default value is 1. - [Parameter] - public double Temperature { get; set; } = 1; - - /// - /// Controls diversity via nucleus sampling: 0.5 means half of all likelihood-weighted options are considered. - /// - /// Default value is 1. - [Parameter] - public double TopP { get; set; } = 1; - - #endregion -} diff --git a/blazorbootstrap/Components/AI/Chat/AIChatInterop.cs.cs b/blazorbootstrap/Components/AI/Chat/AIChatInterop.cs.cs deleted file mode 100644 index 8dc241100..000000000 --- a/blazorbootstrap/Components/AI/Chat/AIChatInterop.cs.cs +++ /dev/null @@ -1,12 +0,0 @@ -namespace BlazorBootstrap; - -public class AIChatInterop -{ - #region Fields and Constants - - private const string Prefix = "window.blazorBootstrap.ai."; - - public const string AzureOpenAIChatCompletions = Prefix + "azureOpenAI.chat.completions"; - - #endregion -} diff --git a/blazorbootstrap/Components/Core/BlazorBootstrapComponentBase.cs b/blazorbootstrap/Components/Core/BlazorBootstrapComponentBase.cs index 4144b0c77..e5386389f 100644 --- a/blazorbootstrap/Components/Core/BlazorBootstrapComponentBase.cs +++ b/blazorbootstrap/Components/Core/BlazorBootstrapComponentBase.cs @@ -1,7 +1,4 @@ -using Microsoft.AspNetCore.Components.Rendering; -using Microsoft.Extensions.Configuration; - -namespace BlazorBootstrap; +namespace BlazorBootstrap; public abstract class BlazorBootstrapComponentBase : ComponentBase, IDisposable, IAsyncDisposable { @@ -144,8 +141,6 @@ protected virtual ValueTask DisposeAsyncCore(bool disposing) protected virtual string? ClassNames => Class; - [Inject] protected IConfiguration Configuration { get; set; } = default!; - public ElementReference Element { get; set; } [Parameter] public string? Id { get; set; } diff --git a/blazorbootstrap/Components/Core/BlazorBootstrapLayoutComponentBase.cs b/blazorbootstrap/Components/Core/BlazorBootstrapLayoutComponentBase.cs index d4fd797d5..2e1e299b8 100644 --- a/blazorbootstrap/Components/Core/BlazorBootstrapLayoutComponentBase.cs +++ b/blazorbootstrap/Components/Core/BlazorBootstrapLayoutComponentBase.cs @@ -1,6 +1,4 @@ -using Microsoft.Extensions.Configuration; - -namespace BlazorBootstrap; +namespace BlazorBootstrap; public abstract class BlazorBootstrapLayoutComponentBase : LayoutComponentBase, IDisposable, IAsyncDisposable { @@ -138,8 +136,6 @@ protected virtual ValueTask DisposeAsyncCore(bool disposing) protected virtual string? ClassNames => Class; - [Inject] protected IConfiguration Configuration { get; set; } = default!; - public ElementReference Element { get; set; } [Parameter] public string? Id { get; set; } diff --git a/blazorbootstrap/Config.cs b/blazorbootstrap/Config.cs index 0a26e404a..32198bbb2 100644 --- a/blazorbootstrap/Config.cs +++ b/blazorbootstrap/Config.cs @@ -1,5 +1,4 @@ using BlazorBootstrap; -using Microsoft.Extensions.Configuration; namespace Microsoft.Extensions.DependencyInjection; @@ -12,7 +11,7 @@ public static class Config ///
/// /// IServiceCollection - public static IServiceCollection AddBlazorBootstrap(this IServiceCollection services, IConfiguration configuration = null!) + public static IServiceCollection AddBlazorBootstrap(this IServiceCollection services) { services.AddScoped(); services.AddScoped(); diff --git a/blazorbootstrap/Models/AI/OpenAIChatMessage.cs b/blazorbootstrap/Models/AI/OpenAIChatMessage.cs deleted file mode 100644 index 4a3950e63..000000000 --- a/blazorbootstrap/Models/AI/OpenAIChatMessage.cs +++ /dev/null @@ -1,3 +0,0 @@ -namespace BlazorBootstrap; - -public record OpenAIChatMessage(string Role, string Content); diff --git a/blazorbootstrap/Models/AI/OpenAIChatPayload.cs b/blazorbootstrap/Models/AI/OpenAIChatPayload.cs deleted file mode 100644 index 92f69887d..000000000 --- a/blazorbootstrap/Models/AI/OpenAIChatPayload.cs +++ /dev/null @@ -1,56 +0,0 @@ -namespace BlazorBootstrap; - -public record OpenAIChatPayload -{ - #region Properties, Indexers - - /// - /// How much to penalize new tokens based on their existing frequency in the text so far. - /// Decreases the model's likelihood to repeat the same line verbatim. - /// Minimum 1 and the maximum is 2. - /// - /// Default value is 0. - [JsonPropertyName("frequency_penalty")] - public double FrequencyPenalty { get; set; } = 0; - - /// - /// The maximum number of tokens to generate shared between the prompt and completion. - /// The exact limit varies by model. (One token is roughly 4 characters for standard English text) - /// Minimum 1 and the maximum tokens is 4096. - /// - /// Default value is 2048. This value is limited by gpt-3.5-turbo. - [JsonPropertyName("max_tokens")] - public long MaximumTokens { get; set; } = 2048; - - [JsonPropertyName("messages")] - public List? Messages { get; set; } - - /// - /// How much to penalize new tokens based on whether they appear in the text so far. - /// Increases the model's likelihood to talk about new topics. - /// Minimum 1 and the maximum is 2. - /// - /// Default value is 0. - [JsonPropertyName("presence_penalty")] - public float PresencePenalty { get; set; } = 0; - - [JsonPropertyName("stream")] public bool Stream { get; } = true; - - /// - /// Controls randomness: Lowering results in less random completions. - /// As the temperature approaches zero, the model will become deterministic and repetitive. - /// Minimum 1 and the maximum is 2. - /// - /// Default value is 1. - [JsonPropertyName("temperature")] - public double Temperature { get; set; } = 1; - - /// - /// Controls diversity via nucleus sampling: 0.5 means half of all likelihood-weighted options are considered. - /// - /// Default value is 1. - [JsonPropertyName("top_p")] - public double TopP { get; set; } = 1; - - #endregion -} diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.ai.js b/blazorbootstrap/wwwroot/blazor.bootstrap.ai.js deleted file mode 100644 index f9241c524..000000000 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.ai.js +++ /dev/null @@ -1,57 +0,0 @@ -export async function createChatCompletions(key, messages, dotNetHelper) { - const API_KEY = key; - const API_URL = 'https://api.openai.com/v1/chat/completions'; - - try { - // Fetch the response from the OpenAI API with the signal from AbortController - const response = await fetch(API_URL, { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${API_KEY}`, - }, - body: JSON.stringify({ - model: "gpt-3.5-turbo", //"gpt-4", - messages: messages, - max_tokens: 200, - stream: true, // For streaming responses - }) - }); - - // Read the response as a stream of data - const reader = response.body.getReader(); - const decoder = new TextDecoder("utf-8"); - let i = 0; - while (true) { - const { done, value } = await reader.read(); - if (done) { - break; - } - - // Massage and parse the chunk of data - const chunk = decoder.decode(value); - const lines = chunk.split("\n"); - - for (const payload of lines) { - - if (payload.includes('[DONE]')) { - dotNetHelper.invokeMethodAsync('ChartCompletetionsStreamJs', '', true); - return; - } - - if (payload.startsWith("data:")) { - const data = JSON.parse(payload.replace("data:", "")); - const content = data.choices[0].delta.content; - if (content) { - dotNetHelper.invokeMethodAsync('ChartCompletetionsStreamJs', content, false); - } - } - } - } - } catch (error) { - // Handle fetch request errors - console.log(error); - } finally { - // TODO: cleanup - } -} diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js index 055742f0d..94922a648 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js @@ -2002,83 +2002,3 @@ window.blazorChart.scatter = { } } } - -if (!window.blazorBootstrap.ai) { - window.blazorBootstrap.ai = {}; -} - -window.blazorBootstrap.ai = { - azureOpenAI: { - chat: { - completions: async (url, key, payload, dotNetHelper) => { - let contentArray = []; - let notificationTriggered = false; - let streamComplete = false; - - try { - const response = await fetch(url, { - method: "POST", - headers: { - "Content-Type": "application/json", - "api-key": `${key}`, - }, - body: JSON.stringify(payload) - }); - - // Read the response as a stream of data - const reader = response.body.getReader(); - const decoder = new TextDecoder("utf-8"); - let i = 0; - while (true) { - const { done, value } = await reader.read(); - if (done) { - break; - } - - // Message and parse the chunk of data - const chunk = decoder.decode(value); - const lines = chunk.split("\n"); - - for (const line of lines) { - - if (line.includes('[DONE]')) { - streamComplete = true; - return; - } - - if (line.startsWith("data:")) { - const data = JSON.parse(line.replace("data:", "")); - const content = data.choices[0]?.delta?.content; - if (content) { - contentArray.push(content); - if (!notificationTriggered) { - notificationTriggered = true; - triggerNotify(); - } - } - } - } - } - - function triggerNotify() { - let handler = setInterval(() => { - const content = contentArray.shift(); - if (content && content.length > 0) - dotNetHelper.invokeMethodAsync('ChartCompletetionsStreamJs', content, false); - - if (streamComplete && contentArray.length === 0) { - clearInterval(handler); - dotNetHelper.invokeMethodAsync('ChartCompletetionsStreamJs', '', true); - } - }, 100); - } - - } catch (error) { - console.log(error); - } finally { - // TODO: cleanup - } - } - } - } -} From 0fa906fbf03b55085478b7bcbf829e57bbd8c66a Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 13 Dec 2024 22:13:45 +0530 Subject: [PATCH 18/18] SelectInput component code commented for now. --- .../Components/Layout/MainLayout.razor.cs | 2 +- .../Components/Pages/Index.razor | 8 +- .../Form/SelectInput/SelectInput.razor | 4 +- .../Form/SelectInput/SelectInput.razor.cs | 232 +++++++++--------- 4 files changed, 123 insertions(+), 123 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index c94f1f78e..64f809290 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -24,7 +24,7 @@ internal override IEnumerable GetNavItems() new (){ Id = "403", Text = "Number Input", Href = RouteConstants.Demos_NumberInput_Documentation, IconName = IconName.InputCursor, ParentId = "4" }, new (){ Id = "403", Text = "Radio Input", Href = RouteConstants.Demos_RadioInput_Documentation, IconName = IconName.RecordCircle, ParentId = "4" }, new (){ Id = "404", Text = "Range Input", Href = RouteConstants.Demos_RangeInput_Documentation, IconName = IconName.Sliders, ParentId = "4" }, - new (){ Id = "404", Text = "Select Input", Href = RouteConstants.Demos_SelectInput_Documentation, IconName = IconName.MenuButtonWideFill, ParentId = "4" }, + //new (){ Id = "404", Text = "Select Input", Href = RouteConstants.Demos_SelectInput_Documentation, IconName = IconName.MenuButtonWideFill, ParentId = "4" }, new (){ Id = "405", Text = "Switch", Href = RouteConstants.Demos_Switch_Documentation, IconName = IconName.ToggleOn, ParentId = "4" }, new (){ Id = "406", Text = "Text Input", Href = RouteConstants.Demos_TextInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, new (){ Id = "407", Text = "Text Area Input", Href = RouteConstants.Demos_TextAreaInput_Documentation, IconName = IconName.InputCursorText, ParentId = "4" }, diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index 34d81885e..feb8706c4 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -200,11 +200,11 @@

Script Loader
-
+ @*

Select Input New

 -
+
*@

Sidebar

@@ -309,11 +309,11 @@

Range Input
-
+ @*

Select Input New

 -
+
*@

Switch

diff --git a/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor b/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor index 795fbbbc6..9e3df9654 100644 --- a/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor +++ b/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor @@ -1,4 +1,4 @@ -@namespace BlazorBootstrap +@* @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase \ No newline at end of file + @onchange="OnChange" /> *@ \ No newline at end of file diff --git a/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs b/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs index fde894568..c22fc7617 100644 --- a/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs +++ b/blazorbootstrap/Components/Form/SelectInput/SelectInput.razor.cs @@ -1,116 +1,116 @@ -namespace BlazorBootstrap; - -public partial class SelectInput : BlazorBootstrapComponentBase -{ - #region Fields and Constants - - private FieldIdentifier fieldIdentifier; - - #endregion - - #region Methods - - protected override void OnInitialized() - { - AdditionalAttributes ??= new Dictionary(); - - fieldIdentifier = FieldIdentifier.Create(ValueExpression); - - base.OnInitialized(); - } - - /// - /// Disables number input. - /// - public void Disable() => Disabled = true; - - /// - /// Enables number input. - /// - public void Enable() => Disabled = false; - - private async Task OnChange(ChangeEventArgs e) - { - var oldValue = Value; - var newValue = e.Value?.ToString() ?? string.Empty; // object - - await ValueChanged.InvokeAsync(newValue); - - EditContext?.NotifyFieldChanged(fieldIdentifier); - } - - #endregion - - #region Properties, Indexers - - protected override string? ClassNames => - BuildClassNames( - Class, - (BootstrapClass.FormControl, true), - (TextAlignment.ToTextAlignmentClass(), TextAlignment != Alignment.None) - ); - - private string autoComplete => AutoComplete ? "true" : "false"; - - /// - /// If , NumberInput can complete the values automatically by the browser. - /// - /// - /// Default value is false. - /// - [Parameter] - public bool AutoComplete { get; set; } - - /// - /// Gets or sets the disabled state. - /// - /// - /// Default value is false. - /// - [Parameter] - public bool Disabled { get; set; } - - [CascadingParameter] private EditContext EditContext { get; set; } = default!; - - private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; - - /// - /// Gets or sets the maximum length of the input. - /// - [Parameter] - public int? MaxLength { get; set; } - - /// - /// Gets or sets the placeholder. - /// - /// - /// Default value is null. - /// - [Parameter] - public string? Placeholder { get; set; } - - /// - /// Gets or sets the text alignment. - /// - /// - /// Default value is . - /// - [Parameter] - public Alignment TextAlignment { get; set; } = Alignment.None; - - /// - /// Gets or sets the value. - /// - [Parameter] - public string Value { get; set; } = default!; - - /// - /// This event fired on every user keystroke that changes the NumberInput value. - /// - [Parameter] - public EventCallback ValueChanged { get; set; } - - [Parameter] public Expression> ValueExpression { get; set; } = default!; - - #endregion -} +//namespace BlazorBootstrap; + +//public partial class SelectInput : BlazorBootstrapComponentBase +//{ +// #region Fields and Constants + +// private FieldIdentifier fieldIdentifier; + +// #endregion + +// #region Methods + +// protected override void OnInitialized() +// { +// AdditionalAttributes ??= new Dictionary(); + +// fieldIdentifier = FieldIdentifier.Create(ValueExpression); + +// base.OnInitialized(); +// } + +// /// +// /// Disables number input. +// /// +// public void Disable() => Disabled = true; + +// /// +// /// Enables number input. +// /// +// public void Enable() => Disabled = false; + +// private async Task OnChange(ChangeEventArgs e) +// { +// var oldValue = Value; +// var newValue = e.Value?.ToString() ?? string.Empty; // object + +// await ValueChanged.InvokeAsync(newValue); + +// EditContext?.NotifyFieldChanged(fieldIdentifier); +// } + +// #endregion + +// #region Properties, Indexers + +// protected override string? ClassNames => +// BuildClassNames( +// Class, +// (BootstrapClass.FormControl, true), +// (TextAlignment.ToTextAlignmentClass(), TextAlignment != Alignment.None) +// ); + +// private string autoComplete => AutoComplete ? "true" : "false"; + +// /// +// /// If , NumberInput can complete the values automatically by the browser. +// /// +// /// +// /// Default value is false. +// /// +// [Parameter] +// public bool AutoComplete { get; set; } + +// /// +// /// Gets or sets the disabled state. +// /// +// /// +// /// Default value is false. +// /// +// [Parameter] +// public bool Disabled { get; set; } + +// [CascadingParameter] private EditContext EditContext { get; set; } = default!; + +// private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? ""; + +// /// +// /// Gets or sets the maximum length of the input. +// /// +// [Parameter] +// public int? MaxLength { get; set; } + +// /// +// /// Gets or sets the placeholder. +// /// +// /// +// /// Default value is null. +// /// +// [Parameter] +// public string? Placeholder { get; set; } + +// /// +// /// Gets or sets the text alignment. +// /// +// /// +// /// Default value is . +// /// +// [Parameter] +// public Alignment TextAlignment { get; set; } = Alignment.None; + +// /// +// /// Gets or sets the value. +// /// +// [Parameter] +// public string Value { get; set; } = default!; + +// /// +// /// This event fired on every user keystroke that changes the NumberInput value. +// /// +// [Parameter] +// public EventCallback ValueChanged { get; set; } + +// [Parameter] public Expression> ValueExpression { get; set; } = default!; + +// #endregion +//}